:root {
  color-scheme: dark;
  --bg: #050b18;
  --panel: #0b1730;
  --panel-2: #0d1d3a;
  --text: #f6f8ff;
  --muted: #a9b8d8;
  --cyan: #2cdcff;
  --blue: #3887ff;
  --violet: #a970ff;
  --coral: #ff5f8f;
  --line: rgba(151, 183, 255, 0.18);
  --radius: 1.25rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(76,145,255,.08) 1px, transparent 1px), linear-gradient(90deg,rgba(76,145,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; border-radius: .5rem; background: white; color: #001; }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 30; height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 clamp(1rem, 5vw, 5rem); background: rgba(5,11,24,.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 850; letter-spacing: -.04em; white-space: nowrap; }
.brand span span, .footer-brand span { color: var(--cyan); }
.brand-mark { width: 2.5rem; fill: none; stroke: url(#brand-gradient); stroke: var(--cyan); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(44,220,255,.5)); }
.desktop-nav { display: flex; gap: 2rem; color: #c8d3ea; font-weight: 650; }
.desktop-nav a { padding: .8rem 0; transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--cyan); }
.header-action { border: 1px solid rgba(102,160,255,.45); border-radius: .85rem; padding: .7rem 1.1rem; color: white; background: linear-gradient(135deg, #4d9bff, #4a5dff); font-weight: 750; cursor: pointer; box-shadow: 0 8px 24px rgba(52,100,255,.2); }

main { overflow: hidden; }
.hero { isolation: isolate; position: relative; min-height: min(44rem, calc(100svh - 4.75rem)); display: grid; align-items: center; padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 7vw, 7rem); border-bottom: 1px solid var(--line); }
.hero-art { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,10,24,.98) 0%, rgba(4,10,24,.92) 32%, rgba(4,10,24,.36) 67%, rgba(4,10,24,.12) 100%), linear-gradient(0deg, rgba(5,11,24,.66), transparent 40%); }
.hero-content { width: min(43rem, 56vw); }
.eyebrow, .kicker { margin: 0 0 .9rem; color: #8ddfff; font-size: .82rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .6rem; }
.eyebrow span, .status span { width: .55rem; height: .55rem; border-radius: 50%; background: #3cffb4; box-shadow: 0 0 12px #3cffb4; }
h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .9; letter-spacing: -.065em; text-wrap: balance; }
h1 span { color: transparent; background: linear-gradient(100deg, var(--cyan), #8bc5ff 50%, #d078ff); background-clip: text; -webkit-background-clip: text; }
.hero-content > p { max-width: 37rem; margin: 1.5rem 0 2rem; color: #c4d1eb; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.button { min-height: 3.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .9rem; border: 1px solid transparent; padding: 0 1.35rem; font-weight: 800; cursor: pointer; transition: transform .18s ease, border-color .18s ease, filter .18s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .header-action:focus-visible, .mobile-nav :focus-visible { outline: 3px solid white; outline-offset: 3px; }
.primary { color: #04101b; background: linear-gradient(135deg, #5ceeff, #24bfff); box-shadow: 0 10px 32px rgba(37,202,255,.25); }
.secondary { color: white; background: rgba(11,24,52,.76); border-color: rgba(145,180,255,.44); }

.games-section { position: relative; max-width: 92rem; margin: 0 auto; padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 5vw, 4.5rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.section-heading h2, .multiplayer h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -.045em; }
.status { display: flex; align-items: center; gap: .6rem; color: #c6d2eb; font-weight: 650; }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.game-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(17,36,70,.92), rgba(7,16,35,.95)); box-shadow: 0 20px 50px rgba(0,0,0,.2); transition: transform .22s ease, border-color .22s ease; }
.game-card:hover { transform: translateY(-5px); border-color: rgba(89,211,255,.5); }
.game-visual { position: relative; height: 13rem; overflow: hidden; }
.game-info { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: 1rem; }
.game-info h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.game-info p { margin: 0; color: var(--muted); font-size: .82rem; }
.pill { flex: none; border-radius: 99rem; padding: .42rem .65rem; background: rgba(53,219,255,.1); border: 1px solid rgba(53,219,255,.28); color: #91efff; font-size: .72rem; font-weight: 750; }
.card-racers .game-visual { background: radial-gradient(circle at 70% 30%, #ff8bd0, transparent 28%), linear-gradient(145deg,#14205e,#48165e 60%,#ff3c88); }
.road-lines { position: absolute; inset: 58% -20% -40%; border-top: 2px solid #44eaff; transform: perspective(250px) rotateX(55deg); background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(59,224,255,.7) 19% 20%); }
.car { position: absolute; width: 32%; height: 14%; bottom: 18%; border-radius: 50% 50% 25% 25%; transform: skewX(-12deg); box-shadow: 0 0 14px currentColor; }
.car::before { content:""; position: absolute; width: 48%; height: 80%; left: 28%; top: -55%; border-radius: 50% 50% 0 0; background: #061333; border: 2px solid currentColor; }
.car-one { left: 13%; color:#39e7ff; background:#18b3f4; }.car-two { right: 10%; bottom: 35%; scale:.65; color:#ff8cdd; background:#ff4d9c; }
.card-orbit .game-visual { background: radial-gradient(circle at 50% 50%, #31369b, #070e30 60%); }
.orbit-ring { position:absolute; inset: 13% 18%; border-radius:50%; border:2px solid #ff8b36; transform:rotate(-18deg); box-shadow:0 0 14px #ff5d30; }.ring-two { inset: 24% 8%; border-color:#8c55ff; transform:rotate(35deg); }.orb { position:absolute; width:28%; aspect-ratio:1; border-radius:50%; left:36%; top:28%; background:radial-gradient(circle at 35% 30%,#a6eeff,#1478e6 45%,#091f60); box-shadow:0 0 28px #33bfff; }
.card-puzzle .game-visual { display:flex; justify-content:center; align-items:end; gap:5px; padding:2rem; background:linear-gradient(#49bce8,#9ee9e3 60%,#7dbf73); }.puzzle-blocks i { display:block; width:21%; aspect-ratio:1; border-radius:18%; box-shadow: inset 0 -6px 0 rgba(0,0,0,.13); }.puzzle-blocks i:nth-child(1){background:#ffbd38;height:45%}.puzzle-blocks i:nth-child(2){background:#28a8f5;height:68%}.puzzle-blocks i:nth-child(3){background:#ff5e6f;height:90%}.puzzle-blocks i:nth-child(4){background:#75d145;height:58%}.puzzle-blocks i:nth-child(5){background:#8c62ff;height:36%}
.card-summit .game-visual { background:linear-gradient(#7fc6ff,#f5b9d0 64%,#463d83); }.sun { position:absolute;width:3.7rem;height:3.7rem;border-radius:50%;background:#fff4bf;right:15%;top:13%;box-shadow:0 0 28px #fff4c0; }.mountain {position:absolute;bottom:-13%;width:85%;height:80%;clip-path:polygon(50% 0,100% 100%,0 100%);background:#7783bd}.mountain-back{left:-18%;scale:.8;background:#9b94c8}.mountain-front{right:-10%;background:linear-gradient(135deg,#eff5ff 0 26%,#54619a 27%)}.flag{position:absolute;left:54%;top:22%;height:44%;border-left:3px solid #15204d}.flag::after{content:"";position:absolute;top:0;left:0;width:2.6rem;height:1.7rem;background:#ff5d7c;clip-path:polygon(0 0,100% 20%,75% 100%,0 80%)}

.multiplayer { max-width: 84rem; margin: 0 auto clamp(4rem, 8vw, 8rem); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); border: 1px solid rgba(133,104,255,.32); border-radius: 1.5rem; background: radial-gradient(circle at 0 0, rgba(91,74,222,.32), transparent 36%), linear-gradient(130deg, rgba(20,37,73,.94), rgba(11,19,43,.94)); }
.multiplayer-icon { width: 5.5rem; aspect-ratio: 1; display:grid; place-items:center; border-radius:1.25rem;background:linear-gradient(135deg,#6d59ff,#bc63ff);box-shadow:0 16px 32px rgba(112,70,255,.25)}
.multiplayer-icon svg { width: 3.4rem; fill:none; stroke:white; stroke-width:3; stroke-linecap:round; }
.multiplayer p:not(.kicker) { max-width: 40rem; margin: .8rem 0 0; color: var(--muted); line-height: 1.55; }
footer { min-height: 8rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem clamp(1rem,5vw,5rem); border-top:1px solid var(--line); color:#8f9dbb; font-size:.88rem; }
.footer-brand { color:white; }.footer-brand span { color:var(--cyan); }
.mobile-nav { display: none; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 50; transform: translate(-50%, 160%); width: max-content; max-width: calc(100vw - 2rem); padding: .85rem 1rem; border: 1px solid rgba(98,202,255,.4); border-radius: .8rem; color: white; background: rgba(10,24,51,.96); box-shadow: 0 16px 50px rgba(0,0,0,.5); transition: transform .24s ease; }
.toast.show { transform: translate(-50%, 0); }
.loteria-card { border-color:rgba(255,199,74,.48);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 40px rgba(255,92,76,.09) }
.loteria-visual { display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:radial-gradient(circle at 50% 110%,#ffb44d,transparent 50%),linear-gradient(135deg,#572651,#123e50) }
.loteria-visual img { width:29%;height:88%;object-fit:cover;border:3px solid #fff0c8;border-radius:.35rem;box-shadow:0 7px 16px #26102e;transform:rotate(-5deg) }
.loteria-visual img:nth-child(2){transform:translateY(-.3rem);z-index:2}.loteria-visual img:nth-child(3){transform:rotate(5deg)}
.live-pill { border:0;cursor:pointer;background:#ffe075;color:#38210d;font-weight:900 }
.bingo-card{border-color:rgba(80,220,255,.48)}.bingo-visual{padding:1rem;background:radial-gradient(circle at 50% 100%,#5534b8,transparent 48%),linear-gradient(145deg,#073f69,#07162e)}.bingo-preview-head,.bingo-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;max-width:18rem;margin:auto}.bingo-preview-head b{display:grid;place-items:center;height:2.2rem;border-radius:.35rem;color:#fff;background:#e7444d;font:900 1.3rem Georgia,serif}.bingo-preview-head b:nth-child(2){background:#f0992c}.bingo-preview-head b:nth-child(3){background:#31a85d}.bingo-preview-head b:nth-child(4){background:#2387e4}.bingo-preview-head b:nth-child(5){background:#8145d9}.bingo-preview-grid{margin-top:.25rem}.bingo-preview-grid i{display:grid;place-items:center;aspect-ratio:1;border:1px solid #d5b953;border-radius:.25rem;color:#122b4c;background:#fff1c9;font-style:normal;font-size:.72rem;font-weight:900}.bingo-preview-grid i:nth-child(3),.bingo-preview-grid i:nth-child(8){color:#053b44;background:radial-gradient(circle at 35% 30%,#7df7e7,#16aca8)}
@media(min-width:901px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:92rem}}
.snakes-card{border-color:rgba(93,221,137,.45)}.snakes-visual{display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 75% 20%,#4ebf5c55,transparent 35%),linear-gradient(145deg,#0d5e5b,#082946)}.snakes-mini-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:.18rem;width:min(100%,15rem);padding:.35rem;border:.2rem solid #e3c85c;border-radius:.5rem;background:#d8b951}.snakes-mini-board i{display:grid;place-items:center;aspect-ratio:1;border-radius:.18rem;color:#10284a;background:#fff0c8;font-size:.58rem;font-style:normal;font-weight:900}.snakes-mini-board i:nth-child(4n){background:#ef5d62}.snakes-mini-board i:nth-child(4n+1){background:#29a9ad}.mini-ladder,.mini-snake,.mini-pawn{position:absolute}.mini-ladder{left:20%;bottom:15%;color:#7a3e16;font-size:3.7rem;transform:rotate(-28deg)}.mini-snake{right:20%;top:14%;color:#ffe055;font:900 5rem/1 Georgia,serif;transform:rotate(25deg)}.mini-pawn{left:52%;bottom:28%;color:#d91f42;font-size:2rem;text-shadow:0 2px 0 #fff0a0}
.connect-card{border-color:rgba(255,205,68,.52)}.connect-visual{display:grid;place-items:center;padding:1rem;background:linear-gradient(rgba(3,28,55,.18),rgba(3,28,55,.18)),url('/assets/connect-four-reference.png') center 49%/cover}.connect-mini-board{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem;width:min(100%,16rem);padding:.65rem;border:.18rem solid #ffd44f;border-radius:.75rem;background:linear-gradient(145deg,#119cdb,#0752b5);box-shadow:inset 0 0 0 .18rem #51dfff,0 .55rem .9rem #00152caa}.connect-mini-board i{display:block;aspect-ratio:1;border-radius:50%;background:#071d3e;box-shadow:inset 0 .16rem .25rem #000b,0 0 0 .1rem #50d8ff}.connect-mini-board i.red{background:radial-gradient(circle at 35% 28%,#ff8b8b,#ef1f36 62%,#97101f)}.connect-mini-board i.yellow{background:radial-gradient(circle at 35% 28%,#fff685,#ffc51e 62%,#bf7600)}.connect-mini-board i.blue{background:radial-gradient(circle at 35% 28%,#79eaff,#159de8 62%,#075bba)}.connect-mini-board i.purple{background:radial-gradient(circle at 35% 28%,#e393ff,#9d36e6 62%,#55138d)}
.arcade-section{padding-top:0}.arcade-grid{grid-template-columns:minmax(0,28rem);max-width:none}.arcade-status span{background:#ff8568;box-shadow:0 0 12px #ff8568}.tetherbound-card{border-color:rgba(102,221,255,.46);box-shadow:0 20px 55px rgba(0,0,0,.3),0 0 44px rgba(39,190,230,.1)}.tetherbound-visual{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(22,119,145,.3),transparent 28%),linear-gradient(160deg,#071625,#030b16)}.tether-stars{position:absolute;inset:0;opacity:.64;background-image:radial-gradient(circle,#d7fbff 0 1px,transparent 1.3px);background-size:2.7rem 2.15rem;transform:rotate(-7deg) scale(1.12)}.tether-orbit{position:absolute;left:50%;top:39%;width:5.2rem;height:2.55rem;border:1px solid rgba(119,215,239,.46);border-radius:50%;transform:translate(-50%,-50%) rotate(18deg)}.tether-orbit.orbit-b{width:4.7rem;height:3.8rem;transform:translate(-50%,-50%) rotate(-33deg)}.tether-core{position:absolute;left:50%;top:39%;width:2rem;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#dafbff;box-shadow:0 0 12px #a9f2ff,0 0 36px #40b9dc}.tether-moon{position:absolute;left:calc(50% + 2.5rem);top:calc(39% - .75rem);width:.62rem;aspect-ratio:1;border-radius:50%;background:#ff8a64;box-shadow:0 0 10px #ff8a64}.tether-moon.moon-b{left:calc(50% + 2.75rem);top:calc(39% + 1.35rem);width:.5rem;background:#835a45;box-shadow:none}.tether-signal,.tether-title{position:absolute;left:0;right:0;text-align:center}.tether-signal{bottom:2.75rem;color:#7fe5ff;font-size:.56rem;font-weight:900;letter-spacing:.2em}.tether-title{bottom:1.1rem;color:#edfaff;font-size:1.3rem;font-weight:950;letter-spacing:-.045em;text-shadow:0 0 20px rgba(92,225,255,.28)}.tetherbound-card .live-pill{text-decoration:none;background:linear-gradient(135deg,#55dff6,#1b9ec5);color:#031622}.tetherbound-card .game-info{min-height:5.1rem}
.room-dialog { width:min(94vw,30rem);padding:1.4rem;border:1px solid rgba(255,222,117,.55);border-radius:1.35rem;color:#fff;background:linear-gradient(160deg,#0b5260,#261542 75%);box-shadow:0 30px 100px #000;font:inherit }
.room-dialog::backdrop { background:rgba(3,7,18,.8);backdrop-filter:blur(8px) }
.dialog-close { position:absolute;right:.7rem;top:.55rem;border:0;background:transparent;color:#fff;font-size:2rem;cursor:pointer }
.dialog-logo { width:max-content;padding:.38rem .7rem;border:2px solid #ffeb93;border-radius:.5rem;color:#ffec9d;background:#c6383b;font:900 1.25rem Georgia,serif;transform:rotate(-2deg) }
.room-dialog h2 { margin:.8rem 0 .3rem;font-size:2rem }.room-dialog>p { margin:.3rem 0 1rem;color:#bdd8db;line-height:1.45 }
.room-tabs { display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.3rem;border-radius:.8rem;background:rgba(3,12,27,.45) }
.room-tabs button { min-height:2.7rem;border:0;border-radius:.62rem;color:#b8c7d9;background:transparent;font-weight:800;cursor:pointer }.room-tabs .active{color:#251b0a;background:#ffe26f}
.room-form { display:grid;gap:.85rem;margin-top:1rem }.room-form[hidden]{display:none}.room-form label{display:grid;gap:.35rem;color:#f5f7ff;font-size:.8rem;font-weight:800}.room-form input,.room-form select{width:100%;min-height:3.1rem;padding:0 .85rem;border:1px solid rgba(188,222,232,.4);border-radius:.7rem;color:#fff;background:#0c2d43;font:inherit}.room-form option{background:#0c2d43}.room-form .button{width:100%;margin-top:.2rem}.pin-choice{grid-template-columns:auto 1fr!important;align-items:center}.pin-choice input{width:1.2rem;height:1.2rem;min-height:0}.optional{font-weight:500;color:#aec3cc}.form-error{min-height:1.2rem!important;margin:.75rem 0 0!important;color:#ffb4ad!important;font-weight:700}

@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-content { width: min(38rem, 72vw); }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 4.25rem; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .site-header { height:4.25rem;padding:0 1rem; }
  .brand-mark { width:2.1rem; }.brand { font-size:1.05rem; }
  .header-action { display:none; }
  .hero { min-height: calc(100svh - 8.85rem); align-items:end; padding: 16rem 1rem 2.25rem; }
  .hero-art { object-position: 64% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(4,10,24,1) 8%,rgba(4,10,24,.89) 42%,rgba(4,10,24,.15) 78%),linear-gradient(90deg,rgba(4,10,24,.55),transparent); }
  .hero-content { width:100%; }
  h1 { font-size:clamp(3.1rem,15vw,4.5rem); }
  .hero-content > p { margin:1rem 0 1.4rem;font-size:1rem;line-height:1.5; }
  .hero-actions { display:grid;grid-template-columns:1fr 1fr; }
  .button { min-height:3.2rem;padding:0 .85rem; }
  .games-section { padding:3.4rem 1rem; }
  .section-heading { align-items:start; }.section-heading h2 { font-size:2.25rem; }
  .status { font-size:.78rem;margin-top:.4rem; }
  .game-grid { display:flex; overflow-x:auto; gap:.8rem; margin:0 -1rem; padding:0 1rem 1rem; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .game-grid::-webkit-scrollbar { display:none; }
  .game-card { flex:0 0 min(84vw,20rem);scroll-snap-align:center; }
  .game-visual { height:12rem; }
  .multiplayer { margin:0 1rem 4rem;padding:1.35rem;grid-template-columns:auto 1fr;align-items:start; }
  .multiplayer-icon { width:3.5rem;border-radius:.9rem; }.multiplayer-icon svg { width:2.2rem; }
  .multiplayer .button { grid-column:1 / -1;width:100%;margin-top:.3rem; }
  .multiplayer h2 { font-size:1.8rem; }
  footer { min-height:12rem;flex-direction:column;justify-content:center;gap:.5rem;padding-bottom:3rem; }
  footer p { margin:.2rem 0; }
  .mobile-nav { position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);padding:.45rem .8rem calc(.4rem + env(safe-area-inset-bottom));background:rgba(5,11,24,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px); }
  .mobile-nav a,.mobile-nav button { min-height:3.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;border:0;color:#8291b1;background:transparent;font-size:.68rem;font-weight:700; }
  .mobile-nav .active { color:var(--cyan); }
  .mobile-nav svg { width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
  .toast { bottom:calc(5.5rem + env(safe-area-inset-bottom));font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important; }
}
.share-room-result{display:grid;gap:.8rem;margin-top:1rem;padding:1rem;border:1px solid rgba(255,229,126,.45);border-radius:1rem;text-align:center;background:rgba(3,18,33,.38)}.share-room-result[hidden]{display:none}.share-kicker{margin:0!important;color:#80eaff!important;font-size:.68rem;font-weight:900;letter-spacing:.14em}.share-room-result>strong{color:#ffe477;font:900 2.4rem Georgia,serif;letter-spacing:.12em}.share-room-result label{display:grid;gap:.35rem;text-align:left;font-size:.75rem;font-weight:800}.share-room-result input{min-height:2.8rem;padding:0 .7rem;border:1px solid rgba(188,222,232,.4);border-radius:.65rem;color:#dff8ff;background:#071d33;font:inherit}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.share-actions .button{min-height:2.9rem;padding:0 .6rem}.share-text{color:#061b2a;background:#6ee8ff}.share-whatsapp{color:#062115;background:#58dd85}
.rooms-dialog{width:min(94vw,42rem);max-height:min(88vh,46rem);padding:1.4rem;border:1px solid rgba(111,220,255,.45);border-radius:1.35rem;color:#fff;background:linear-gradient(160deg,#082b4a,#221441 82%);box-shadow:0 30px 100px #000;font:inherit}.rooms-dialog::backdrop{background:rgba(3,7,18,.82);backdrop-filter:blur(8px)}.rooms-dialog h2{margin:.2rem 0 .35rem;font-size:2rem}.rooms-dialog>p:not(.kicker){margin:.2rem 0 1rem;color:#bdd1e2;line-height:1.45}.rooms-list{display:grid;gap:.65rem;max-height:52vh;overflow:auto;padding:.1rem}.room-listing{display:grid;grid-template-columns:1fr auto;gap:.65rem;padding:.85rem;border:1px solid rgba(110,200,255,.25);border-radius:.85rem;background:rgba(4,20,43,.7)}.room-listing>div:first-child{display:flex;align-items:baseline;gap:.65rem}.room-game{color:#81e9ff;font-weight:850}.room-listing strong{color:#ffe37a;font-family:Georgia,serif;letter-spacing:.08em}.room-facts{display:flex;flex-wrap:wrap;gap:.35rem;grid-column:1}.room-facts span{padding:.22rem .45rem;border-radius:2rem;color:#bbcbe3;background:#14294a;font-size:.68rem;font-weight:750}.room-listing button{grid-column:2;grid-row:1/3;align-self:center;min-height:2.65rem;padding:0 .8rem;border:1px solid #ffe77f;border-radius:.65rem;color:#2b230e;background:#ffe16c;font-weight:900;cursor:pointer}.rooms-empty{padding:2rem;text-align:center;color:#b9c9df}.create-from-lobby{width:100%;margin-top:1rem}@media(max-width:520px){.room-listing{grid-template-columns:1fr}.room-listing button{grid-column:1;grid-row:auto;width:100%}.share-actions{grid-template-columns:1fr}}