@import url("/gridplay/tokens.css");
@import url("/gridplay/table-theatre.css?v=vg3");
*{box-sizing:border-box}body{margin:0;background:#080c13;color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--gold);text-decoration:none}button{border:1px solid var(--line);border-radius:10px;background:#192435;color:var(--text);padding:10px 16px;transition:background .15s,transform .15s}button:hover{background:#24334a}button.primary{background:var(--gold);color:#171b23;border-color:var(--gold);font-weight:750;box-shadow:0 3px 16px #d4b46a15}button.primary:hover{background:#edce86}button.ghost{background:transparent}button.danger{color:#f3a99b}button.small{padding:6px 10px;font-size:12px}button.selected{border-color:var(--gold);color:var(--gold)}h1,h2,h3,p{margin:0}h1{font-size:clamp(26px,4.5vw,42px);line-height:1.12;letter-spacing:-1.3px;font-weight:650}h2{font-size:20px;font-weight:650;letter-spacing:-.4px}h3{font-size:15px;font-weight:650}.muted,small{color:var(--muted)}small{font-size:11px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.3px;text-transform:uppercase;color:var(--gold)}.shell{width:min(100%,1000px);min-height:100dvh;margin:auto;display:flex;flex-direction:column;background:var(--background);box-shadow:0 0 100px #0005}.top{height:74px;flex-shrink:0;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{width:220px;max-height:54px;object-fit:contain;object-position:left}.account-pill{display:flex;gap:13px;align-items:center}.avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;border:1px solid #bf9c53;background:#233047;color:#ead093;font:600 14px Georgia,serif}.wallet{font-size:12px;line-height:1.3;text-align:right}.wallet strong{color:var(--gold);display:block;font-size:15px}.content{padding:25px 28px 30px;flex:1;min-height:0}.nav{display:flex;justify-content:space-around;background:#101824;border-top:1px solid var(--line);padding:8px 18px;position:sticky;bottom:0;z-index:5}.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--muted);font-size:10px;letter-spacing:.3px;min-width:58px;padding:8px}.nav button.active{color:var(--gold)}.nav svg{width:21px;height:21px}.hero{min-height:245px;border:1px solid #b394513d;border-radius:18px;background:linear-gradient(90deg,#101a28 8%,#101a28e0 40%,#101a2800 83%),url("/gridplay/assets/table-v1.png") center 55%/cover;display:flex;align-items:center;padding:30px;margin:18px 0 22px;overflow:hidden;position:relative}.hero-copy{width:55%;position:relative;z-index:1}.hero h1{margin:10px 0 14px}.hero p{max-width:285px;color:#aeb9c9;font-size:12px;margin-bottom:22px}.hero .eyebrow{color:#e3bd70}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 14px}.section-head:first-child{margin-top:0}.section-head>a,.section-head>button{font-size:12px}.section-head .muted{font-size:12px}.game-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.game-card{padding:0;text-align:left;overflow:hidden;border-radius:13px;background:#131d2b;transition:transform .2s,border-color .2s}.game-card:hover{transform:translateY(-3px);border-color:#bda56b}.game-art{height:114px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#41645a,#162d30 75%)}.game-art svg{width:77px;height:77px;filter:drop-shadow(0 9px 7px #0006);transform:rotate(-8deg)}.art-hand-foot{background:radial-gradient(ellipse at bottom,#56425b,#251f39)}.art-dominoes{background:radial-gradient(ellipse at bottom,#5c5749,#282821)}.art-connect-four{background:radial-gradient(ellipse at bottom,#2c526c,#15283c)}.art-rummy{background:radial-gradient(ellipse at bottom,#744343,#30212d)}.game-info{padding:12px}.game-info h3{font-size:12px}.game-info small{font-size:9px}.badge{font-size:9px;font-weight:700;letter-spacing:.8px;padding:3px 6px;border-radius:5px;color:#b5e6c6;background:#163f31;display:inline-block}.game-art .badge{position:absolute;top:9px;left:9px}.badge.gold{color:var(--gold);background:#b9944922}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.panel p{color:var(--muted);font-size:12px;margin:6px 0 14px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row .name{font-weight:600}.row small{display:block}.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.bot-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.bot-card{text-align:center;padding:12px 6px;background:var(--panel)}.portrait{width:62px;height:62px;margin:auto auto 10px;border-radius:50%;background-image:url("/gridplay/assets/bots-v1.png");background-size:200% 200%;border:1px solid #a3854a;box-shadow:0 3px 14px #0005}.portrait.milo{background-position:0 0}.portrait.nova{background-position:100% 0}.portrait.vex{background-position:0 100%}.portrait.pip{background-position:100% 100%}.bot-card h3{font-size:13px}.bot-card small{font-size:10px}.bot-card.selected{border-color:var(--gold)}.stats{display:flex;gap:22px}.stats b{display:block;font-size:23px;color:var(--gold);font-weight:500}.stats small{font-size:10px}.empty{text-align:center;padding:28px 14px;color:var(--muted);font-size:12px}.empty h2{color:var(--text);margin-bottom:8px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.tabs button{padding:6px 12px;font-size:12px}.planned{opacity:.65}.planned .game-art{height:65px}.planned .game-art svg{width:40px;height:40px}.coming{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.coming .panel{padding:12px}.notice{padding:11px 14px;border:1px solid #b9974c44;background:#b9974c0c;color:#d8c89d;border-radius:10px;font-size:12px;margin:12px 0}.online{color:#83c8a0}.field{display:grid;gap:6px;font-size:12px;color:var(--muted)}input,select,textarea{width:100%;background:#0d1520;border:1px solid #334155;color:var(--text);border-radius:8px;padding:10px}textarea{min-height:80px;resize:vertical}.check{display:flex;gap:8px;align-items:center;font-size:12px}.check input{width:auto;accent-color:var(--gold)}.form-row{display:flex;gap:8px}.form-row input{flex:1;min-width:0}.form-row button{flex-shrink:0}.price{font-size:24px;color:var(--gold);font-weight:600;margin:10px 0}.price small{font-size:11px;font-weight:400}.catalog-card{display:flex;flex-direction:column}.catalog-card ul{color:var(--muted);font-size:12px;padding-left:16px;flex:1}.catalog-card button{width:100%}.catalog-card .badge{align-self:flex-start}.loading{height:100vh;display:grid;place-content:center;text-align:center;gap:20px}.loading img{width:300px}.loading p{color:var(--muted)}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);max-width:90%;background:#24394b;border:1px solid #6e8797;color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 10px 40px #000a;z-index:40;display:none;font-size:13px}.overlay{position:fixed;inset:0;background:#04080ed9;z-index:20;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}.modal{width:min(100%,550px);max-height:90dvh;overflow:auto;background:#131d2c;border:1px solid #5a4e35;border-radius:18px;padding:25px;box-shadow:0 30px 120px #000b}.modal h2{font-size:25px}.modal p{color:var(--muted);font-size:12px;margin:10px 0 18px}.modal .close{float:right;padding:4px 10px}.play-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.play-head h2{font-size:18px}.players{display:flex;gap:8px;justify-content:center;margin:10px 0 14px}.player{flex:1;background:#182434;border:1px solid var(--line);border-radius:9px;padding:8px;text-align:center;font-size:11px}.player.turn{border-color:var(--gold);box-shadow:0 0 14px #dfba4f15}.player small{display:block;font-size:10px}.table{min-height:275px;background:radial-gradient(ellipse,#203e3b,#102924);border:3px solid #5a5038;box-shadow:inset 0 0 60px #0005,0 8px 20px #0003;border-radius:24px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;position:relative}.table-label{text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#9aafa5}.dice-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.die{display:inline-grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:52px;height:52px;gap:4px;padding:9px;background:#f0ead7;border:1px solid #e0d5bb;border-radius:9px;box-shadow:2px 4px 0 #b5a782,0 6px 12px #0004;position:relative}.die i{width:7px;height:7px;border-radius:50%;background:#34362e;opacity:0}.die i.on{opacity:1}.die.chosen{transform:translateY(-8px);outline:2px solid var(--gold);outline-offset:3px}.turn-score{font-size:42px;font-weight:500;letter-spacing:-2px;color:#f0d490}.turn-score small{display:block;font-size:10px;letter-spacing:2px;text-align:center}.connect{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;max-width:390px;width:100%;background:#1c4058;padding:14px;border-radius:12px;box-shadow:0 5px 0 #0a1c2b}.connect .cell{aspect-ratio:1;border-radius:50%;background:#071e22;box-shadow:inset 0 3px 6px #0007}.connect .cell.p0{background:#d8b25d;box-shadow:inset 0 0 0 4px #c49c4c,0 2px 4px #0004}.connect .cell.p1{background:#b04e55;box-shadow:inset 0 0 0 4px #9b3b46,0 2px 4px #0004}.connect .cell.win{outline:3px solid #fff2bb;outline-offset:1px}.column-actions{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:390px;width:100%;padding:0 14px}.column-actions button{padding:4px;font-size:11px}.domino-chain{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;max-height:190px;overflow:auto}.tile{display:flex;background:#eee8d5;border:1px solid #d8ceb4;color:#283332;border-radius:6px;padding:5px;box-shadow:1px 3px 0 #aa9e80;font-size:20px;font-weight:600}.tile span{padding:0 8px}.tile span+span{border-left:1px solid #a79e87}.hand{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;max-height:180px;overflow:auto;padding:8px 3px;width:100%}.card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#f1ead5;color:#253645;border:1px solid #d6c9aa;min-width:37px;height:66px;padding:4px;border-radius:5px;font:600 13px Georgia,serif;box-shadow:0 3px 0 #ad9e7b}.card.red{color:#9f3c43}.card.back{background:repeating-linear-gradient(45deg,#243a52,#243a52 4px,#2b4560 4px,#2b4560 8px);border:2px solid #d8bd7b;color:#e2c378}.melds{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-height:130px;overflow:auto}.meld{padding:5px;background:#ffffff0b;border-radius:7px}.meld .card{display:inline-flex;min-width:23px;height:42px;font-size:10px}.meld small{display:block;font-size:9px;color:#b5c4b8}.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:15px 0;max-height:180px;overflow:auto}.actions button{font-size:11px;padding:8px 11px}.tutorial{border:1px solid #bba466;background:#cba85b10;padding:12px;border-radius:10px;margin:12px 0}.tutorial h3{color:var(--gold)}.tutorial p{font-size:12px;color:var(--muted);margin-top:5px}.result{text-align:center;padding:15px}.result h2{font-size:30px;color:var(--gold)}.result p{margin:8px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-grid textarea{min-height:100px;font:11px monospace}.admin-grid .panel{display:grid;gap:8px}.rule-copy{color:var(--muted);font-size:12px}.welcome{min-height:calc(100dvh - 160px);display:flex;flex-direction:column;justify-content:center}.welcome .hero{min-height:400px}.footer-note{font-size:10px;color:#6e7e92;text-align:center;margin-top:22px}.gift-select{margin-bottom:10px;font-size:12px}.credits-note{font-size:11px;color:var(--muted)}.trophy{color:var(--gold);font-size:22px}
@media(min-width:760px) and (min-height:760px){.shell{min-height:min(100dvh,1000px)}}
@media(max-width:600px){body{font-size:12px}.top{height:60px;padding:9px 15px}.logo{width:170px}.account-pill{gap:7px}.wallet{font-size:9px}.wallet strong{font-size:12px}.content{padding:17px 15px 20px}.hero{padding:20px;min-height:220px}.hero-copy{width:66%}.hero h1{font-size:30px}.hero p{font-size:10px;max-width:215px}.hero button{font-size:11px;padding:9px 12px}.game-grid{gap:7px}.game-art{height:81px}.game-art svg{width:53px;height:53px}.game-info{padding:9px 6px}.game-info h3{font-size:10px;min-height:28px}.game-info small{font-size:8px}.badge{font-size:7px}.game-art .badge{top:5px;left:5px}.panel{padding:13px}.grid3{grid-template-columns:1fr 1fr;gap:10px}.grid2{gap:10px}.portrait{width:48px;height:48px}.section-head h2{font-size:17px}.nav{padding:5px 9px}.nav button{font-size:9px;padding:6px;min-width:48px}.nav svg{width:18px;height:18px}.coming{grid-template-columns:repeat(3,1fr)}.table{padding:15px 10px;min-height:250px}.player{font-size:9px;padding:7px 3px}.player small{font-size:8px}.die{width:43px;height:43px;padding:7px;gap:3px}.die i{width:6px;height:6px}.dice-row{gap:9px}.card{min-width:30px;height:56px;font-size:11px}.hand{gap:4px}.admin-grid{grid-template-columns:1fr}.modal{padding:19px}.stats{gap:17px}.stats b{font-size:21px}}
@media(max-width:390px){.game-grid{grid-template-columns:repeat(3,1fr)}.game-info h3{min-height:0}.grid2,.grid3{grid-template-columns:1fr}.hero-copy{width:76%}.hero{min-height:240px}.account-pill .avatar{display:none}.bot-list{gap:5px}.portrait{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.avatar{padding:0;flex-shrink:0}.card{min-width:44px;height:72px;font-size:15px}.hinted{outline:2px solid var(--gold);outline-offset:2px}
.hero{background-image:linear-gradient(90deg,#101a28 8%,#101a28e0 40%,#101a2800 83%),var(--gridplay-hero,url("/gridplay/assets/table-v1.png"))}.portrait{background-image:var(--gridplay-portraits,url("/gridplay/assets/bots-v1.png"))}
.portrait.professor,.portrait.lucy,.portrait.captain,.portrait.royale{background-image:var(--gridplay-premium-portraits,url("/gridplay/assets/premium-bots-v1.png"))}.portrait.professor{background-position:0 0}.portrait.lucy{background-position:100% 0}.portrait.captain{background-position:0 100%}.portrait.royale{background-position:100% 100%}
.bot-commentary{font-size:11px;color:var(--muted);padding:3px 0 10px}.bot-commentary b{color:var(--gold)}
#app[aria-busy="true"] main{opacity:.86}#app[aria-busy="true"] button{cursor:progress}
.shell{background-image:var(--gp-background-image,none);background-size:cover}.table{background-color:var(--gp-board-color,#193d36);background-image:var(--gp-board-image,radial-gradient(ellipse,#ffffff09,#0002));background-size:cover}.card{background-image:var(--gp-card-face-image,none);background-size:cover}.card.back{background-color:var(--gp-card-back-color,#243a52);background-image:var(--gp-card-back-image,repeating-linear-gradient(45deg,transparent,transparent 4px,#ffffff12 4px,#ffffff12 8px));background-size:cover}.die{background-color:var(--gp-dice-color,#f0ead7);background-image:var(--gp-dice-image,none);background-size:cover}.avatar{border-color:var(--gp-frame-color,var(--gold));box-shadow:0 0 8px var(--gp-frame-color,transparent)}.design-json{min-height:280px;font:12px/1.5 ui-monospace,monospace}.row:has([data-join]){border-left:2px solid var(--gp-invite-color,transparent);padding-left:8px}
@keyframes gp-enter{from{transform:translateY(-8px);opacity:.6}to{transform:translateY(0);opacity:1}}@keyframes gp-win{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}body[data-motion="on"] .card,body[data-motion="on"] .cell.falling{animation:gp-enter .18s ease-out}body[data-motion="on"] .result{animation:gp-enter .3s ease-out}body[data-motion="on"][data-effect]:not([data-effect="none"]) .result{animation:gp-win 1.5s ease-in-out 2}body[data-motion="off"] *{animation:none!important;transition:none!important}body[data-performance="on"] .hero{background-image:linear-gradient(100deg,#132031,#203b49)}body[data-performance="on"] *{box-shadow:none!important;backdrop-filter:none!important;animation:none!important}
@media(max-width:600px){.card{min-width:30px;height:56px;font-size:11px}}
@media(max-height:650px){.top{height:52px}.content{padding:12px 15px 18px}.section-head{margin:14px 0 8px}.section-head h2{font-size:16px}.hero{min-height:140px;padding:16px;margin:12px 0 16px}.hero h1{font-size:25px;margin:0 0 14px}.hero .eyebrow,.hero p:not(.eyebrow){display:none}.hero button{padding:7px 12px;font-size:11px}.game-art{height:65px}.game-art svg{width:48px;height:48px}.game-info{padding:8px}.game-info h3{min-height:0;font-size:10px}.tutorial{padding:9px}.tutorial p{font-size:10px}.tutorial small{display:none}.table{min-height:190px;gap:10px;padding:12px}.players{margin:8px 0}.play-head{margin-bottom:8px}.actions{margin:10px 0;max-height:100px}.footer-note{margin-top:10px}.nav button{padding:5px}}
/* Social actions share the same request lifecycle as the MOAP client. */
.social-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.friend-card>div:first-child,.player-result>div:first-child{min-width:0;overflow-wrap:anywhere}.friend-card small,.player-result small{display:block}.agent-uuid{overflow-wrap:anywhere}
/* Useful header controls replace passive connection status; never overlay gameplay. */
a.button.primary{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;background:var(--gold);color:#171b23;font-weight:750}
@media(max-width:650px){.top{height:auto;min-height:74px;gap:8px;flex-wrap:wrap}.top .logo{width:125px}.account-pill{gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:1}.account-pill .game-return{font-size:11px;padding:6px}.account-pill .header-bell{padding:5px;min-width:30px}.account-pill button.wallet{font-size:10px;padding:4px}.account-pill button.wallet strong{font-size:12px}}
.account-pill .header-bell{position:relative;right:auto;top:auto;z-index:auto;min-width:2.4rem;background:transparent;color:var(--gold,#e7c878)}.header-bell svg{height:1.5rem;width:1.5rem}.header-bell small{position:absolute;right:0;top:0;border-radius:1rem;background:#e7c878;color:#142030;padding:.1rem .25rem;font-size:.7rem}.header-bell small:empty{display:none}.account-pill .game-return{font-size:.85rem;white-space:nowrap}.account-pill button.wallet{text-align:left;background:transparent;border:0;color:inherit;cursor:pointer}.account-pill button.wallet strong{display:block}