@font-face{font-family:NotoThai;src:url('/fonts/noto-sans-thai-thai-400-normal.woff2') format('woff2');font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:NotoThai;src:url('/fonts/noto-sans-thai-latin-400-normal.woff2') format('woff2');font-display:swap}
:root{font-family:NotoThai,system-ui,sans-serif;color:#173353;background:#133967}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px}
body{min-height:100dvh;background:linear-gradient(180deg,#123b6be3,#1d5277d9),url('/assets/street-lobby-plate.webp') center/cover fixed}
button,input{font:inherit}
button{cursor:pointer}
.portal{width:min(100%,460px);min-height:100dvh;margin:auto;padding:12px 16px 24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px}
.brand{display:flex;align-items:center;gap:5px;min-width:0;color:#fff;font-size:14px;font-weight:900;white-space:nowrap}
.brand img{display:block;width:112px;height:50px;object-fit:contain}
.player{display:flex;align-items:center;gap:6px;min-width:0;max-width:50%;border:1px solid #fff9;border-radius:999px;padding:7px 10px;background:#102c57ed;color:#fff;font-size:12px;white-space:nowrap;box-shadow:0 3px 8px #10294755}
.player button{border:0;background:none;color:#fff;font-weight:800;padding:0}
.player-name{overflow:hidden;text-overflow:ellipsis;max-width:76px}
.balance{color:#ffe784}
.welcome{margin:15px 2px 17px;color:#fff;text-shadow:0 2px 4px #153b69}
.eyebrow{font-size:13px;margin:0 0 1px;color:#f8e8c0}
h1{font-size:27px;line-height:1.28;margin:0}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.game-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:188px;padding:9px;border:2px solid #fff9;border-radius:22px;text-align:center;text-decoration:none;color:#263551;overflow:hidden;background:var(--card);box-shadow:0 5px 13px #092b5066;scroll-margin-block:8px;-webkit-tap-highlight-color:transparent}
.game-card.coral{--card:#ffdc8b;--accent:#e15e58}
.game-card.pink{--card:#f5cad9;--accent:#c15775}
.game-card.gold{--card:#f3dda7;--accent:#ad773a}
.game-card.mint{--card:#bce5d1;--accent:#458b6b}
.game-card.blue{--card:#bbddf0;--accent:#4a80aa}
.game-card.lilac{--card:#d9cbf3;--accent:#7962a1}
.game-card::before{content:attr(data-mark);position:absolute;top:-16px;right:7px;font:900 76px Georgia,serif;color:var(--accent);opacity:.15}
.game-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:112px;flex:none}
.game-art img{display:block;max-width:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #233c5140)}
.game-name{position:relative;z-index:1;font-size:18px;font-weight:900;line-height:1.25;white-space:nowrap}
.game-state{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:27px;margin-top:2px;padding:1px 10px;border-radius:999px;background:#fffdf0;color:#583947;font-size:13px;font-weight:900;line-height:1.2;white-space:nowrap}
.is-soon .game-state::before{content:'🔒';font-size:13px;margin-right:4px}
.game-card.is-live{grid-column:1/-1;display:grid;grid-template-columns:51% minmax(0,1fr);grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;height:262px;padding:14px 12px;background:radial-gradient(circle at 20% 52%,#fff5d0,#ffdc88 55%,#ffc773);border:3px solid #fff2c9;box-shadow:0 0 0 3px #ffc96e50,0 8px 20px #082b5090;cursor:pointer}
.is-live::before{top:-31px;right:8px;font-size:155px;opacity:.09}
.is-live .game-art{grid-column:1;grid-row:1/-1;height:222px;align-self:end}
.is-live .game-name{grid-column:2;grid-row:2;font-size:26px;color:#743c39;text-shadow:0 1px #fff9}
.is-live .game-state{grid-column:2;grid-row:3;align-self:start;min-height:42px;margin-top:14px;padding:7px 13px;border-radius:999px;background:#c94950;color:#fff;font-size:14px;box-shadow:0 3px 0 #94353b;white-space:normal}
.is-live:hover,.is-live:focus-visible{outline:3px solid #fff2a5;outline-offset:2px}
.wallet-note{margin:17px 0 0;color:#eaf4ff;font-size:12px;text-align:center}
.status{min-height:18px;margin:6px 0 0;color:#fff;font-size:12px;text-align:center}
.loading{grid-column:1/-1;color:#fff;text-align:center}
dialog{width:min(390px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:2px solid #ffe3a5;border-radius:23px;padding:21px;background:#fff8e9;color:#173353;box-shadow:0 20px 60px #091d3dba}
dialog::backdrop{background:#061936b8}
.auth-head{display:flex;align-items:center;justify-content:space-between}
.auth-head h2{font-size:22px;margin:0}
.auth-head button{border:0;background:none;font-size:30px;color:#173353}
#auth-form{display:grid;gap:11px;margin-top:13px}
#auth-form label{display:grid;gap:4px;font-size:14px;font-weight:800}
#auth-form input{width:100%;min-height:42px;padding:8px 11px;border:1px solid #8fa8b6;border-radius:10px;background:#fff}
#auth-form button{min-height:42px;border:0;border-radius:12px;background:#e7edf2;color:#173353;font-weight:800}
#auth-form .auth-submit{background:#c94950;color:#fff}
#auth-error{min-height:18px;margin:0;color:#a32731;font-size:13px}
.handoff[hidden]{display:none}
.handoff{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;background:radial-gradient(circle at 50% 45%,#315e84,#0b284e 74%);color:#fff;text-align:center}
.handoff img{width:min(46vw,200px);height:min(46vw,200px);object-fit:contain;filter:drop-shadow(0 8px 9px #071c3b)}
.phone-turn{width:62px;height:100px;margin:10px;border:5px solid #ffe8a4;border-radius:14px;background:#133967;box-shadow:0 0 0 3px #ffffff28;animation:turn-phone 2.6s ease-in-out infinite}
.phone-screen{display:grid;place-items:center;width:100%;height:100%;font-size:18px;color:#ffe8a4;white-space:nowrap}
@keyframes turn-phone{0%,18%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}
.handoff h2{max-width:360px;margin:4px 0 0;font-size:22px;line-height:1.35}
.handoff p{margin:0;font-size:14px;color:#e8f2ff}
.handoff button{min-width:120px;min-height:43px;margin-top:12px;border:1px solid #fff9;border-radius:999px;background:#fff;color:#173353;font-size:15px;font-weight:900}
.handoff-open{overflow:hidden}
@media(max-width:380px){.portal{padding-inline:12px}.brand span{display:none}.games{gap:10px}.game-card{height:180px}.game-card.is-live{height:245px}.is-live .game-art{height:207px}}
@media(max-height:430px) and (orientation:landscape){.portal{padding-top:5px}.welcome{margin:4px 2px 11px}.topbar{min-height:48px}.brand img{height:42px}.game-card.is-live{height:208px}.is-live .game-art{height:180px}}
@media(prefers-reduced-motion:reduce){.phone-turn{animation:none;transform:rotate(90deg)}}