@font-face { font-family: "Local UI"; src: url('/fonts/fallback.ttf') format('truetype'); font-display: swap; }

.blockchain-lobby-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% -5%, rgba(29, 199, 182, .22), transparent 30rem),
    radial-gradient(circle at 100% 8%, rgba(42, 90, 219, .2), transparent 24rem),
    #070b14 !important;
  color: #f5f8ff;
  font-family: "Local UI", Arial, sans-serif;
}

.blockchain-lobby-page #app { min-height: 100vh; min-height: 100dvh; }
.blockchain-lobby { width: min(100%, 1040px); min-height: 100dvh; margin: 0 auto; padding: 0 14px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.blockchain-lobby__header { position: sticky; z-index: 20; top: 0; height: calc(58px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(7,11,20,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.blockchain-lobby__mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(100,255,229,.6); border-radius: 10px; background: linear-gradient(145deg,#33e0c2,#126aba); box-shadow: 0 0 22px rgba(34,213,185,.28); color: #fff; font-size: 20px; font-weight: 900; font-style: italic; }
.blockchain-lobby__heading { display: flex; flex: 1; flex-direction: column; line-height: 1; }
.blockchain-lobby__heading strong { font-size: 15px; letter-spacing: 1.4px; }
.blockchain-lobby__heading small { margin-top: 5px; color: #77839a; font-size: 8px; letter-spacing: 1.1px; }
.blockchain-lobby__status { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(64,226,187,.22); border-radius: 999px; background: rgba(21,174,141,.1); color: #74e9c9; font-size: 9px; font-weight: 800; letter-spacing: .7px; }
.blockchain-lobby__status i,.blockchain-game-card__meta small i { width: 6px; height: 6px; border-radius: 50%; background: #25e29d; box-shadow: 0 0 8px #25e29d; }
.blockchain-lobby__hero { position: relative; margin: 15px 0 13px; padding: 20px 20px 18px; overflow: hidden; border: 1px solid rgba(104,160,255,.16); border-radius: 18px; background: linear-gradient(120deg,rgba(20,37,67,.95),rgba(7,19,37,.96)); box-shadow: 0 14px 36px rgba(0,0,0,.24); }
.blockchain-lobby__hero::after { content:""; position:absolute; width:170px; height:170px; right:-42px; top:-74px; border:1px solid rgba(49,224,197,.28); border-radius:50%; box-shadow: inset 0 0 60px rgba(35,167,205,.12), 0 0 0 24px rgba(63,122,204,.04); }
.blockchain-lobby__hero span { color:#42dfc1; font-size:9px; font-weight:800; letter-spacing:2px; }
.blockchain-lobby__hero h1 { position:relative; z-index:1; margin:5px 0 4px; font-size:25px; line-height:1.15; }
.blockchain-lobby__hero p { margin:0; color:#8d9bb2; font-size:12px; }
.blockchain-lobby__filters { display:flex; gap:7px; padding:2px 0 13px; overflow-x:auto; scrollbar-width:none; }
.blockchain-lobby__filters::-webkit-scrollbar { display:none; }
.blockchain-lobby__filters button { flex:0 0 auto; height:32px; padding:0 14px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#111827; color:#8792a7; font:600 11px "Local UI",Arial,sans-serif; cursor:pointer; transition:.18s ease; }
.blockchain-lobby__filters button.is-active { border-color:#34d9be; background:linear-gradient(135deg,#1bc5ab,#1288a4); color:#fff; box-shadow:0 6px 17px rgba(18,172,158,.2); }
.blockchain-lobby__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.blockchain-game-card { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:linear-gradient(155deg,#151d2d,#0d1320); box-shadow:0 9px 24px rgba(0,0,0,.26); color:#f7f9ff; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease; }
.blockchain-game-card:active { transform:scale(.975); }
.blockchain-game-card:hover { border-color:rgba(65,225,198,.48); box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 18px rgba(35,210,181,.08); }
.blockchain-game-card__type { position:absolute; z-index:2; top:8px; left:8px; padding:4px 6px; border:1px solid rgba(78,235,207,.24); border-radius:5px; background:rgba(4,15,24,.72); color:#71ead0; font-size:7px; font-weight:800; letter-spacing:.65px; backdrop-filter:blur(5px); }
.blockchain-game-card__art { aspect-ratio:1.36/1; display:block; overflow:hidden; background:radial-gradient(circle at 50% 30%,#1c3858,#0d1421 70%); }
.blockchain-game-card__art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 20%; transition:transform .25s ease; }
.blockchain-game-card:hover .blockchain-game-card__art img { transform:scale(1.035); }
.blockchain-game-card__meta { min-height:49px; display:flex; flex-direction:column; justify-content:center; padding:7px 31px 8px 10px; border-top:1px solid rgba(255,255,255,.07); }
.blockchain-game-card__meta strong { overflow:hidden; font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.blockchain-game-card__meta small { display:flex; align-items:center; gap:5px; margin-top:4px; color:#637088; font-size:8px; }
.blockchain-game-card__meta small i { width:4px; height:4px; }
.blockchain-game-card__play { position:absolute; right:9px; bottom:13px; width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(76,225,203,.24); border-radius:50%; background:rgba(28,190,165,.1); color:#59dfc6; font-size:20px; line-height:1; }
.blockchain-lobby__footer { padding:20px 8px 2px; color:#536078; font-size:9px; text-align:center; }

@media (min-width: 560px) {
  .blockchain-lobby { padding-right:22px; padding-left:22px; }
  .blockchain-lobby__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
  .blockchain-game-card__meta strong { font-size:12px; }
}

@media (min-width: 920px) {
  .blockchain-lobby__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .blockchain-lobby__hero { padding:26px; }
  .blockchain-lobby__hero h1 { font-size:31px; }
}