:root{
--bg0:#070A13; --bg1:#0B1020; --bg2:#101731;
--card:rgba(15,22,44,.82); --card2:rgba(20,29,56,.9);
--line:rgba(124,140,190,.20); --line-hi:rgba(150,170,230,.4);
--mint:#2CE6A0; --mint2:#14C284; --mint-glow:rgba(44,230,160,.4);
--vio:#8B6CFF; --vio2:#6A48E8; --cyan:#4FC3F7; --amber:#FFC85C;
--coral:#FF6B5E; --coral2:#E04838;
--txt:#EEF3FF; --mut:#8B96B8;
--t-fast:.1s; --t-base:.18s; --t-slow:.3s;
--el2:0 5px 0; --el3:0 7px 0; --el4:0 10px 0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg0);color:var(--txt);font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',monospace}
.disp{font-family:'Sora',sans-serif}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
#c3d{position:fixed;inset:0;z-index:0}
#fx{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.screen{position:fixed;inset:0;z-index:10;display:none;overflow-y:auto}
.screen.active{display:block}
.menu-bg{background:
radial-gradient(1200px 700px at 78% -10%,rgba(139,108,255,.16),transparent 55%),
radial-gradient(1000px 800px at 8% 108%,rgba(44,230,160,.12),transparent 55%),
radial-gradient(700px 500px at 92% 88%,rgba(79,195,247,.08),transparent 55%),
var(--bg0)}
.menu-grid-bg{position:fixed;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(124,140,190,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,140,190,.05) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(1000px 700px at 50% 30%,#000 30%,transparent 80%)}
/* ============ PANELS / BUTTONS ============ */
.gpanel{position:relative;background:var(--card);backdrop-filter:blur(22px) saturate(1.25);border:1px solid var(--line);border-radius:18px;
box-shadow:0 1px 0 rgba(180,200,255,.10) inset,0 20px 60px rgba(0,0,0,.5)}
.gtitle{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);text-align:center;padding:12px 0 10px;border-bottom:1px solid var(--line)}
.btn{position:relative;overflow:hidden;padding:15px 30px;border-radius:14px;font-family:'Sora';font-weight:700;font-size:15px;letter-spacing:.02em;transition:transform .16s,box-shadow .2s,filter .16s;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-130%);z-index:1;pointer-events:none}
.btn:hover::after{transition:transform .55s;transform:translateX(130%)}
.btn:active{transform:translateY(4px)}
.btn-mint{background:linear-gradient(135deg,#3BF2B0,#12B87C);color:#04231A;
box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(0,60,40,.35) inset,0 12px 36px var(--mint-glow)}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(0,60,40,.35) inset,0 18px 50px rgba(44,230,160,.55)}
.btn-vio{background:linear-gradient(135deg,#9C7DFF,#6443E6);color:#F2EEFF;
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -3px 0 rgba(30,10,90,.4) inset,0 12px 36px rgba(139,108,255,.35)}
.btn-vio:hover{transform:translateY(-2px)}
.btn-coral{background:linear-gradient(135deg,#FF7A6B,#D63A2C);color:#FFF1EE;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -3px 0 rgba(90,14,8,.4) inset}
.btn-coral:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(140,160,220,.06);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--mint);box-shadow:0 0 26px rgba(44,230,160,.2)}
.btn:disabled{opacity:.32;cursor:not-allowed;transform:none!important;box-shadow:none!important;filter:none!important}
.btn:disabled::after{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:11px;border:1px solid var(--line);background:rgba(140,160,220,.06)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:blink 1.7s infinite}
@keyframes blink{50%{opacity:.25}}
/* ============ LANDING (legacy styles kept for hub reuse) ============ */
/* ---- box-art landing ---- */
.landing-clear{background:transparent!important;display:none;align-items:flex-start;justify-content:center;padding-top:9vh}
.landing-clear.active{display:flex}
.land-scrim{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,40,.34),rgba(10,20,40,0) 34%,rgba(10,20,40,0) 72%,rgba(10,20,40,.3))}
.land-inner.boxart{text-align:center;animation:rise .9s cubic-bezier(.2,1,.3,1)}
.eyebrow-line{font-size:12px;letter-spacing:.34em;color:#FFFFFF;text-shadow:0 2px 8px rgba(10,20,40,.8);margin-bottom:16px;font-weight:600}
.logo-plate{position:relative;display:inline-flex;align-items:center;gap:18px;padding:22px 46px;border-radius:22px;
background:linear-gradient(180deg,#37E296 0%,#17B87C 55%,#0E9463 100%);
border:6px solid #0A3324;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -10px 0 rgba(6,60,40,.35) inset,0 26px 60px rgba(8,20,40,.5),0 8px 0 #082A1D;
transform:rotate(-1.2deg)}
.lp-pill{font-size:clamp(38px,6vw,64px);filter:drop-shadow(0 4px 0 rgba(8,40,28,.5))}
.logo-plate.img-banner{background:none;border:none;box-shadow:none;padding:0;transform:none;display:block}
.lp-banner{width:min(640px,86vw);height:auto;filter:drop-shadow(0 14px 30px rgba(8,20,40,.55));
animation:bannerPop .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerPop{from{opacity:0;transform:translateY(-14px) scale(.92)}}
.lp-text{font-family:'Sora';font-weight:800;font-size:clamp(40px,7.4vw,86px);letter-spacing:.02em;color:#FFFFFF;
text-shadow:0 3px 0 #0A3324,0 -2px 0 #0A3324,3px 0 0 #0A3324,-3px 0 0 #0A3324,2px 2px 0 #0A3324,-2px 2px 0 #0A3324,2px -2px 0 #0A3324,-2px -2px 0 #0A3324,0 9px 18px rgba(8,20,40,.55)}
.logo-sub{margin-top:-10px;position:relative;z-index:1}
.logo-sub span{display:inline-block;padding:9px 26px;border-radius:12px;transform:rotate(-1.2deg);
background:linear-gradient(180deg,#4FA6F2,#2E6DA8);border:4px solid #0E2B4A;
font-family:'Sora';font-weight:800;font-size:clamp(13px,2vw,19px);letter-spacing:.1em;color:#fff;
text-shadow:0 2px 0 #0E2B4A;box-shadow:0 8px 22px rgba(8,20,40,.45),0 4px 0 #0B2038}
.btn-play{font-size:19px;padding:17px 52px;letter-spacing:.18em}
#landing{display:none;align-items:center;justify-content:center;text-align:center;padding:24px}
#landing.active{display:flex}
.land-inner{max-width:900px;animation:rise .9s cubic-bezier(.2,1,.3,1);position:relative;z-index:2}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.logo-mark{width:92px;height:92px;margin:0 auto 22px;border-radius:26px;display:grid;place-items:center;font-size:46px;
background:linear-gradient(140deg,#152242,#0C1327);border:1px solid var(--line-hi);
box-shadow:0 0 0 1px rgba(44,230,160,.2),0 0 60px rgba(44,230,160,.22),0 24px 60px rgba(0,0,0,.6);position:relative}
.logo-mark::after{content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;
background:linear-gradient(140deg,var(--mint),transparent 40%,transparent 60%,var(--vio));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
h1.hero{font-family:'Sora';font-size:clamp(46px,8vw,96px);font-weight:800;line-height:.98;letter-spacing:-.02em;margin-bottom:10px;
background:linear-gradient(120deg,#FFFFFF 10%,#B9E9FF 40%,#2CE6A0 75%,#8B6CFF 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 8px 40px rgba(44,230,160,.22))}
.hero-tag{font-family:'JetBrains Mono';font-size:clamp(11px,1.4vw,14px);letter-spacing:.42em;color:var(--mut);text-transform:uppercase;margin-bottom:26px}
.sub{color:var(--mut);font-size:17px;max-width:640px;margin:0 auto 40px;line-height:1.7}
.sub b{color:var(--txt)}
.sub .m{color:var(--mint)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.stat-row{margin-top:56px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.stat{padding:14px 26px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:150px}
.stat .v{font-family:'Sora';font-weight:800;font-size:21px;color:var(--txt)}
.stat .v.m{color:var(--mint)}.stat .v.a{color:var(--amber)}
.stat .l{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-top:3px}
/* ============ HUB (main menu) ============ */
#hub{padding:0 0 40px}
.hub-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:16px 26px;
background:linear-gradient(180deg,rgba(7,10,19,.94),rgba(7,10,19,.75) 70%,transparent);backdrop-filter:blur(14px)}
.hub-logo{display:flex;align-items:center;gap:11px;font-family:'Sora';font-weight:800;font-size:17px;color:#000; letter-spacing:.04em}
.hub-logo .mk{
width:36px;
height:36px;
color: black;
border-radius:11px;
background:
url("./logo.jpg") center/cover no-repeat;
border:1.8px solid
}
.hub-top .sp{flex:1}
.bal-chip{display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:12px;border:1px solid rgba(44,230,160,.35);background:rgba(44,230,160,.07)}
.bal-chip .ic{font-size:15px}
.bal-chip .v{font-family:'JetBrains Mono';font-weight:800;font-size:14px;color:var(--mint)}
.bal-chip .u{font-family:'JetBrains Mono';font-size:10.5px;color:var(--mut)}
.hub-body{max-width:1120px;margin:26px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
@media(max-width:920px){.hub-body{grid-template-columns:1fr}}
.play-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:640px){.play-cards{grid-template-columns:1fr}}
.play-card{position:relative;overflow:hidden;border-radius:20px;padding:26px;text-align:left;border:1px solid var(--line);transition:.22s;min-height:168px;display:flex;flex-direction:column;justify-content:flex-end}
.play-card .big{font-family:'Sora';font-weight:800;font-size:24px;margin-bottom:5px;position:relative;z-index:1}
.play-card .d{font-size:13.5px;color:var(--mut);position:relative;z-index:1;line-height:1.5}
.play-card .glyph{position:absolute;top:-14px;right:-6px;font-size:110px;opacity:.16;transform:rotate(-8deg)}
.play-card.create{background:linear-gradient(140deg,rgba(44,230,160,.16),rgba(15,22,44,.9) 55%)}
.play-card.create:hover{border-color:var(--mint);transform:translateY(-4px);box-shadow:0 20px 50px rgba(44,230,160,.18)}
.play-card.join{background:linear-gradient(140deg,rgba(139,108,255,.18),rgba(15,22,44,.9) 55%)}
.play-card.join:hover{border-color:var(--vio);transform:translateY(-4px);box-shadow:0 20px 50px rgba(139,108,255,.2)}
.sec-h{display:flex;align-items:center;gap:11px;margin:4px 0 12px}
.sec-h h3{font-family:'Sora';font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sec-h .ln{flex:1;height:1px;background:var(--line)}
.game-row{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:15px;background:var(--card);border:1px solid var(--line);margin-bottom:10px;transition:.16s}
.game-row:hover{border-color:var(--line-hi);transform:translateX(4px)}
.game-row .nm{font-weight:700;font-size:15px;flex:1;min-width:0}
.game-row .nm small{display:block;font-family:'JetBrains Mono';font-size:11px;color:var(--mut);font-weight:400;margin-top:3px}
.game-row .fee{font-family:'JetBrains Mono';font-weight:800;font-size:13.5px;color:var(--amber);text-align:right}
.game-row .fee small{display:block;font-size:10px;color:var(--mut);font-weight:400}
.gstate{font-family:'JetBrains Mono';font-size:10px;font-weight:700;letter-spacing:.14em;padding:5px 10px;border-radius:7px}
.gstate.open{color:var(--mint);background:rgba(44,230,160,.1);border:1px solid rgba(44,230,160,.35)}
.gstate.live{color:var(--amber);background:rgba(255,200,92,.1);border:1px solid rgba(255,200,92,.35)}
.gstate.full{color:var(--mut);background:rgba(140,160,220,.08);border:1px solid var(--line)}
.pool-panel{padding:20px}
.pool-panel .pv{font-family:'Sora';font-weight:800;font-size:34px;color:var(--amber);text-shadow:0 0 34px rgba(255,200,92,.35)}
.pool-panel .pl{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-top:2px}
.pool-panel .rw{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);padding:7px 0;border-top:1px solid var(--line);margin-top:10px}
.pool-panel .rw b{color:var(--txt);font-family:'JetBrains Mono'}
.note{font-size:12px;color:var(--mut);line-height:1.6;padding:14px 16px;border-radius:13px;background:rgba(139,108,255,.07);border:1px solid rgba(139,108,255,.25);margin-top:14px}
.note b{color:#B9A5FF}
/* ============ WAITING LOBBY ============ */
#waiting{padding:40px 22px}
.wait-box{max-width:900px;margin:0 auto;animation:rise .5s cubic-bezier(.2,1,.3,1)}
.wait-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.wait-head h2{font-family:'Sora';font-size:29px;font-weight:800}
.wait-head .code{font-family:'JetBrains Mono';font-size:12px;color:var(--mut)}
.wait-head .code b{color:var(--cyan);letter-spacing:.2em}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.slot{border-radius:16px;border:1.5px dashed var(--line);padding:16px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.slot.filled{border-style:solid;background:var(--card);border-color:var(--line-hi)}
.slot .se{font-size:32px}
.slot .sn{font-weight:700;font-size:14px}
.slot .ss{font-family:'JetBrains Mono';font-size:10.5px;color:var(--mut);letter-spacing:.12em;text-transform:uppercase}
.slot .ss.rdy{color:var(--mint)}
.pl-row{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.pl-row input{flex:1;min-width:150px;background:rgba(140,160,220,.06);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:14px;font-weight:600}
.pl-row input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(44,230,160,.15)}
.pemoji{width:48px;height:48px;border-radius:13px;background:rgba(140,160,220,.06);border:1px solid var(--line);display:grid;place-items:center;font-size:25px}
.piece-row{display:flex;gap:7px;flex-wrap:wrap}
.tok{width:46px;height:46px;border-radius:12px;background:rgba(140,160,220,.05);border:1px solid var(--line);display:grid;place-items:center;font-size:21px;transition:.15s}
.tok:hover{transform:translateY(-3px);border-color:var(--vio)}
.tok.sel{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint),0 0 24px rgba(44,230,160,.4);background:rgba(44,230,160,.1)}
.tok.taken{opacity:.25;pointer-events:none}
.small-btn{background:rgba(140,160,220,.06);border:1px solid var(--line);color:var(--mut);padding:9px 16px;border-radius:11px;font-size:13px;font-weight:600;transition:.15s}
.small-btn:hover{color:var(--txt);border-color:var(--vio)}
.fee-pills{display:flex;gap:8px;flex-wrap:wrap}
.fee-pill{padding:10px 18px;border-radius:11px;border:1px solid var(--line);background:rgba(140,160,220,.05);font-family:'JetBrains Mono';font-weight:700;font-size:13px;transition:.14s}
.fee-pill.sel{border-color:var(--amber);color:var(--amber);background:rgba(255,200,92,.1);box-shadow:0 0 20px rgba(255,200,92,.2)}
/* ============ MODALS ============ */
.modal-wrap{position:fixed;inset:0;background:rgba(4,6,12,.78);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:60}
.modal-wrap.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:20px;width:min(440px,94vw);animation:pop .3s cubic-bezier(.2,1.4,.4,1);
box-shadow:0 1px 0 rgba(180,200,255,.12) inset,0 50px 130px rgba(0,0,0,.8);overflow:hidden}
.modal .body{padding:24px}
@keyframes pop{from{transform:scale(.86) translateY(18px);opacity:0}}
.modal h3{font-family:'Sora';font-size:19px;margin-bottom:4px}
.modal p.hint{color:var(--mut);font-size:13px;margin-bottom:18px;
/* The global .hint further down is absolutely positioned for the landing
page. Inside a modal that rips the text out of the panel and drops it in
the corner of the viewport, unstyled. Modal hints flow inline. */
position:static;font-family:inherit}
.cfm-msg{color:var(--mut);font-size:14px;line-height:1.5;margin:2px 0 18px;
word-break:break-word}
.cfm-msg p{margin-top:10px}
.cfm-msg .cfm-lead{font-size:15.5px;color:var(--fg,inherit);font-weight:600;display:block}
.wopt{display:flex;align-items:center;gap:13px;width:100%;padding:14px 15px;border-radius:13px;background:rgba(140,160,220,.05);border:1px solid var(--line);font-size:15px;font-weight:600;margin-bottom:10px;transition:.16s}
.wopt:hover{border-color:var(--mint);background:rgba(44,230,160,.07);transform:translateX(3px)}
.wopt .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px}
.wopt .arr{margin-left:auto;color:var(--mut)}
.f-label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:16px 0 8px}
.f-input{width:100%;background:rgba(140,160,220,.06);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:14px;font-weight:600}
.f-input:focus{outline:none;border-color:var(--mint)}
.tx-row{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.tx-row span{color:var(--mut)}.tx-row b{font-family:'JetBrains Mono'}
.tx-total b{color:var(--amber);font-size:16px}
.spinner{width:42px;height:42px;margin:18px auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--mint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tx-ok{font-size:44px;text-align:center;margin:12px 0;animation:pop .4s}
/* ============ GAME HUD ============ */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none}
#hud.active{display:block}
#hud .clickable{pointer-events:auto}
.hud-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:10px 20px;border-radius:99px}
.hud-top .rn{font-family:'Sora';font-weight:800;font-size:12.5px;color:var(--txt);letter-spacing:.12em}
.hud-top .sep{width:1px;height:15px;background:var(--line)}
.hud-top .tt{font-family:'JetBrains Mono';font-size:12px;color:var(--mut)}
.hud-top .tt b{color:var(--txt)}
.hud-top .pool{font-family:'JetBrains Mono';font-size:12px;font-weight:800;color:var(--amber)}
.hud-left{position:absolute;top:14px;left:14px;width:256px;display:flex;flex-direction:column;gap:9px}
.pcard{position:relative;border-radius:14px;transition:border-color .3s,box-shadow .3s,transform .3s;border:1.5px solid var(--line);background:var(--card);backdrop-filter:blur(18px);overflow:hidden}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc);opacity:.95;box-shadow:0 0 14px var(--pc)}
.pcard.active{border-color:var(--pc);box-shadow:0 0 0 1px var(--pc),0 0 34px color-mix(in srgb,var(--pc) 28%,transparent),0 12px 34px rgba(0,0,0,.5);transform:translateX(4px)}
.pcard.dead{filter:grayscale(1) brightness(.55)}
.pcard .top{display:flex;align-items:center;gap:9px;padding:11px 13px 9px 15px}
.pcard .pe{font-size:22px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.pcard .pn{font-weight:700;font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .bal{font-family:'JetBrains Mono';font-weight:800;font-size:14.5px;color:var(--mint);text-shadow:0 0 14px rgba(44,230,160,.3)}
.pcard .bal.neg{color:var(--coral)}
.pcard .props{display:flex;flex-wrap:wrap;gap:3.5px;padding:0 13px 10px 15px}
.pcard .chip2{width:15px;height:9px;border-radius:2px;background:var(--cc);box-shadow:0 1px 3px rgba(0,0,0,.55),0 0 6px color-mix(in srgb,var(--cc) 55%,transparent)}
.pcard .chip2.mort{opacity:.3}
.pcard .jail-tag{font-family:'JetBrains Mono';font-size:10px;color:var(--coral)}
.hud-right{position:absolute;top:14px;right:14px;width:224px;display:flex;flex-direction:column;gap:8px}
.tool-btn{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:13px;font-family:'Sora';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line);transition:.18s;color:var(--txt)}
.tool-btn:hover:not(:disabled){border-color:var(--mint);background:rgba(44,230,160,.09);transform:translateX(-4px);box-shadow:0 0 24px rgba(44,230,160,.18)}
.tool-btn .ico{font-size:16px;width:22px;text-align:center}
.hud-log{position:absolute;bottom:14px;right:14px;width:336px;max-height:212px;display:flex;flex-direction:column}
.hud-log .scroll{overflow-y:auto;padding:11px 15px}
.hud-log .scroll::-webkit-scrollbar{width:5px}
.hud-log .scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.hud-log p{font-size:12px;color:var(--mut);margin-bottom:7px;line-height:1.5;animation:feedin .35s}
.hud-log p b{color:var(--txt)}
@keyframes feedin{from{opacity:0;transform:translateY(6px)}}
.hud-roll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:14px}
.roll-btn{position:relative;overflow:hidden;padding:18px 52px;border-radius:16px;font-family:'Sora';font-weight:800;font-size:17px;letter-spacing:.2em;text-transform:uppercase;
background:linear-gradient(135deg,#3BF2B0,#12B87C);color:#04231A;transition:.2s;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -4px 0 rgba(0,60,40,.35) inset,0 16px 46px rgba(44,230,160,.4),0 4px 14px rgba(0,0,0,.5)}
.roll-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%)}
.roll-btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.05)}
.roll-btn:hover:not(:disabled)::after{transition:transform .6s;transform:translateX(130%)}
.roll-btn:disabled{opacity:.3;cursor:not-allowed}
/* ---- Roll result plate ---- */
.roll-plate{display:none;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:16px;background:var(--card);backdrop-filter:blur(16px);
border:1px solid rgba(44,230,160,.4);box-shadow:0 0 0 1px rgba(44,230,160,.15),0 0 34px rgba(44,230,160,.22),0 14px 34px rgba(0,0,0,.5)}
.roll-plate.show{display:flex;animation:platePop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes platePop{0%{opacity:0;transform:translateY(24px) scale(.7)}60%{transform:translateY(-4px) scale(1.06)}100%{opacity:1;transform:none}}
.roll-plate .die-face{width:40px;height:40px;border-radius:10px;background:linear-gradient(160deg,#FDFBF3,#DCD4BC);display:grid;place-items:center;
box-shadow:0 3px 8px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.7) inset;position:relative}
.roll-plate .die-face svg{width:28px;height:28px}
.roll-plate .die-face svg circle{fill:#1E1A10}
.roll-plate .tot{display:flex;flex-direction:column;align-items:center;line-height:1;padding-left:6px;border-left:1px solid var(--line);margin-left:2px}
.roll-plate .tot small{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.26em;color:var(--mut);margin-bottom:4px}
.roll-plate .tot b{font-family:'Sora';font-weight:800;font-size:26px;color:var(--mint);text-shadow:0 0 20px rgba(44,230,160,.5)}
.roll-plate .tot b.dbl{color:var(--amber);text-shadow:0 0 20px rgba(255,200,92,.5)}
.hud-actions{position:absolute;bottom:106px;left:50%;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:680px}
.act{padding:13px 22px;border-radius:12px;font-weight:700;font-size:14px}
.hint{position:absolute;bottom:16px;left:16px;font-family:'JetBrains Mono';font-size:11px;color:rgba(139,150,184,.5)}
@media(max-width:960px){.hud-log{display:none}.hud-left{width:206px}.hud-right{width:180px}}
/* turn banner */
#turnBanner{position:fixed;top:37%;left:0;right:0;z-index:40;pointer-events:none;display:flex;justify-content:center;opacity:0}
#turnBanner.show{animation:banner 2s cubic-bezier(.2,1,.3,1) forwards}
@keyframes banner{0%{opacity:0;transform:translateX(-60px)}12%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(60px)}}
#turnBanner .band{position:relative;padding:20px 90px;background:linear-gradient(90deg,transparent,rgba(6,9,16,.94) 18%,rgba(6,9,16,.94) 82%,transparent);text-align:center}
#turnBanner .band::before,#turnBanner .band::after{content:"";position:absolute;left:12%;right:12%;height:1.5px;background:linear-gradient(90deg,transparent,var(--bc,#2CE6A0),transparent)}
#turnBanner .band::before{top:0}#turnBanner .band::after{bottom:0}
#turnBanner .who{font-family:'Sora';font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:.1em;color:var(--bc,#2CE6A0);text-shadow:0 0 36px color-mix(in srgb,var(--bc,#2CE6A0) 55%,transparent),0 3px 10px rgba(0,0,0,.8)}
#turnBanner .lbl{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.5em;color:var(--mut);text-transform:uppercase;margin-bottom:6px}
/* floaters / stamps */
.floater{position:absolute;font-family:'JetBrains Mono';font-weight:800;font-size:22px;transform:translate(-50%,-50%);animation:floatUp 1.5s cubic-bezier(.2,.8,.3,1) forwards;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 22px currentColor;white-space:nowrap}
.floater.small{font-size:15px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}14%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}26%{transform:translate(-50%,-72%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.stamp{position:absolute;font-family:'Sora';font-weight:800;font-size:32px;letter-spacing:.18em;color:var(--coral);border:3.5px solid var(--coral);border-radius:10px;padding:5px 20px;transform:translate(-50%,-50%) rotate(-12deg) scale(3);opacity:0;animation:stampIn 1.6s cubic-bezier(.2,1.3,.3,1) forwards;text-shadow:0 0 20px rgba(255,107,94,.5);box-shadow:0 0 30px rgba(255,107,94,.3),0 0 30px rgba(255,107,94,.22) inset;background:rgba(6,9,16,.55)}
.stamp .st-sub{display:block;font-size:.42em;letter-spacing:.14em;opacity:.92;margin-bottom:2px;
max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stamp .st-main{display:block;line-height:1}
.stamp.gold{color:var(--mint);border-color:var(--mint);text-shadow:0 0 22px rgba(44,230,160,.6);box-shadow:0 0 34px rgba(44,230,160,.35),0 0 30px rgba(44,230,160,.22) inset}
@keyframes stampIn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(3)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}24%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.08)}30%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-64%) rotate(-12deg) scale(1)}}
/* ============ CINEMATIC CARD (transform fixed) ============ */
#cine{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;perspective:1400px}
#cine.open{display:flex}
#cine .dim{position:absolute;inset:0;background:radial-gradient(720px 560px at 50% 46%,rgba(14,20,36,.5),rgba(3,5,10,.95));opacity:0;transition:opacity .4s}
#cine.open .dim{opacity:1}
#cine .rays{position:absolute;left:50%;top:46%;width:1400px;height:1400px;transform:translate(-50%,-50%);opacity:0;transition:opacity .8s;
background:conic-gradient(from 0deg,transparent 0 12deg,rgba(44,230,160,.05) 12deg 20deg,transparent 20deg 38deg,rgba(139,108,255,.05) 38deg 46deg,transparent 46deg 64deg,rgba(44,230,160,.05) 64deg 72deg,transparent 72deg 90deg);
animation:raySpin 26s linear infinite;border-radius:50%;filter:blur(2px)}
#cine.lit .rays{opacity:1}
@keyframes raySpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#cineParticles{position:absolute;inset:0}
/* FIX: container fly ends at a multiple of 360° so faces are never mirrored.
The .flipper alone handles the back→front reveal. */
.cine-card{position:relative;width:min(340px,84vw);aspect-ratio:3/4.3;transform-style:preserve-3d;opacity:0}
.cine-card.fly{animation:cardFly .85s cubic-bezier(.16,.9,.28,1) forwards}
@keyframes cardFly{0%{opacity:0;transform:translate(38vw,58vh) rotateY(1060deg) rotateZ(24deg) scale(.24)}55%{opacity:1}100%{opacity:1;transform:translate(0,0) rotateY(720deg) rotateZ(0) scale(1)}}
.cine-card .flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.3,1.2,.35,1)}
.cine-card.flip .flipper{transform:rotateY(180deg)}
.cface{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;overflow:hidden;
box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 0 1px rgba(150,170,230,.3),0 0 60px rgba(44,230,160,.16)}
.cback{background:
radial-gradient(circle at 50% 42%,rgba(44,230,160,.14),transparent 62%),
repeating-linear-gradient(45deg,#0D1428 0 14px,#111A33 14px 28px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:2px solid rgba(44,230,160,.4)}
.cback .emb{font-size:74px;filter:drop-shadow(0 0 26px rgba(44,230,160,.5))}
.cback .txt{font-family:'Sora';font-weight:800;font-size:18px;letter-spacing:.38em;color:var(--mint);text-shadow:0 0 22px rgba(44,230,160,.5)}
.cback .frame{position:absolute;inset:11px;border:1.5px solid rgba(44,230,160,.4);border-radius:13px;pointer-events:none}
.cfront{transform:rotateY(180deg);background:linear-gradient(178deg,#F7F0DC 0%,#E9DDBE 100%);color:#241C10;display:flex;flex-direction:column;padding:22px 22px 18px;border:2px solid rgba(120,94,44,.5)}
.cfront .frame{position:absolute;inset:10px;border:2px solid rgba(120,94,44,.4);border-radius:13px;pointer-events:none}
.cfront .deckname{font-family:'Sora';font-weight:800;font-size:13px;letter-spacing:.1em;text-align:center;color:#0E9B68;margin-bottom:4px}
.cfront .deckname.ct{color:#3B76B4}
.cfront .divider{width:64%;height:1.5px;margin:6px auto 0;background:linear-gradient(90deg,transparent,rgba(120,94,44,.6),transparent)}
.cfront .art{font-size:78px;text-align:center;margin:auto 0 6px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.cfront .txt{font-size:15.5px;line-height:1.55;text-align:center;font-weight:600;margin-bottom:auto}
.cfront .amt{font-family:'JetBrains Mono';font-weight:800;font-size:27px;text-align:center;margin:12px 0 4px}
.cfront .amt.pos{color:#0E9B68}.cfront .amt.neg{color:#B3261E}
.cine-btn{position:absolute;bottom:-74px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .4s,transform .3s;white-space:nowrap}
.cine-btn.show{opacity:1;pointer-events:auto}
.cshine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-130%);border-radius:20px;pointer-events:none}
.cine-card.flip .cshine{transition:transform .9s .5s;transform:translateX(130%)}
/* ============ DEED ============ */
#deedWrap{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:12px}
#deedWrap.show{display:flex;animation:deedIn .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes deedIn{from{opacity:0;transform:translateX(-50%) translateY(40px) scale(.85)}}
.deed{width:236px;background:linear-gradient(178deg,#F7F0DC,#E9DDBE);color:#241C10;border-radius:13px;overflow:hidden;border:2px solid rgba(120,94,44,.55);box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1px rgba(150,170,230,.25)}
.deed .band{padding:11px 10px 9px;text-align:center;border-bottom:2px solid rgba(30,24,14,.35)}
.deed .band .tt{font-family:'Sora';font-weight:800;font-size:14.5px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.deed .band .st{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.24em;color:rgba(255,255,255,.85);text-transform:uppercase}
.deed table{width:100%;border-collapse:collapse;font-size:11.5px}
.deed td{padding:4.5px 13px}
.deed td:last-child{text-align:right;font-family:'JetBrains Mono';font-weight:800}
.deed tr:nth-child(even){background:rgba(120,94,44,.07)}
.deed .foot{padding:7px 13px 9px;font-family:'JetBrains Mono';font-size:10px;color:#6B5426;display:flex;justify-content:space-between;border-top:1.5px dashed rgba(120,94,44,.4)}
.deed-actions{display:flex;gap:10px}
/* ============ TRADE (mini deed cards) ============ */
.trade-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
@media(max-width:640px){.trade-grid{grid-template-columns:1fr}.tswap{transform:rotate(90deg)}}
.trade-col{background:rgba(140,160,220,.04);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column}
.trade-col h4{font-size:13.5px;font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.trade-col h4 .who-dot{width:9px;height:9px;border-radius:50%;background:var(--wc,#8B96B8);box-shadow:0 0 10px var(--wc,#8B96B8)}
.tswap{align-self:center;font-size:26px;color:var(--mut);padding:0 2px;user-select:none}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;min-height:96px;align-content:start}
.tcards .empty{grid-column:1/-1;color:var(--mut);font-size:12px;text-align:center;padding:26px 0;border:1.5px dashed var(--line);border-radius:12px}
.tcard{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;user-select:none;text-align:center;
background:linear-gradient(178deg,#F7F0DC,#E9DDBE);color:#241C10;border:2px solid rgba(120,94,44,.45);
transition:transform .15s,box-shadow .2s,border-color .15s;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.tcard:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.tcard .tband{height:30px;display:grid;place-items:center;font-size:16px;border-bottom:2px solid rgba(30,24,14,.35);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tcard .tname{font-family:'Sora';font-weight:800;font-size:9.5px;letter-spacing:.02em;padding:6px 4px 2px;line-height:1.15;min-height:28px;display:flex;align-items:center;justify-content:center}
.tcard .tval{font-family:'JetBrains Mono';font-weight:800;font-size:10.5px;color:#6B5426;padding-bottom:7px}
.tcard .tsel{position:absolute;inset:0;display:none;place-items:center;background:rgba(44,230,160,.28);backdrop-filter:blur(1px)}
.tcard .tsel span{width:30px;height:30px;border-radius:50%;background:var(--mint);color:#04231A;display:grid;place-items:center;font-weight:800;font-size:17px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tcard.on{border-color:var(--mint);box-shadow:0 0 0 2px var(--mint),0 0 26px rgba(44,230,160,.45),0 10px 24px rgba(0,0,0,.5);transform:translateY(-4px)}
.tcard.on .tsel{display:grid}
.tcard .tmort{position:absolute;top:32px;left:0;right:0;font-family:'JetBrains Mono';font-size:8.5px;font-weight:800;letter-spacing:.14em;color:#fff;background:rgba(179,38,30,.9);padding:2px 0}
.tcard.locked{opacity:.5;cursor:not-allowed}
.tcard.locked:hover{transform:none}
.cash-line{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cash-line .lbl{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.cash-wrap{flex:1;display:flex;align-items:center;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:0 11px}
.cash-wrap:focus-within{border-color:var(--mint)}
.cash-wrap b{color:var(--amber);font-family:'JetBrains Mono';font-size:14px}
.cash-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--mint);font-family:'JetBrains Mono';font-weight:800;font-size:14px;padding:10px 6px;min-width:0}
.sel-partner{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.sel-partner button{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;background:rgba(140,160,220,.05);border:1.5px solid var(--line);font-weight:700;font-size:13px;transition:.14s}
.sel-partner button:hover{border-color:var(--line-hi)}
.sel-partner button.on{border-color:var(--mint);background:rgba(44,230,160,.12);color:var(--mint);box-shadow:0 0 20px rgba(44,230,160,.2)}
/* ---- offer popup ---- */
.offer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:6px 0 16px}
@media(max-width:560px){.offer-grid{grid-template-columns:1fr}.oswap{transform:rotate(90deg);margin:-4px auto}}
.offer-side{background:rgba(140,160,220,.05);border:1px solid var(--line);border-radius:15px;padding:13px;display:flex;flex-direction:column;gap:10px}
.offer-side.give{border-color:rgba(255,107,94,.4);background:rgba(255,107,94,.05)}
.offer-side.get{border-color:rgba(44,230,160,.4);background:rgba(44,230,160,.05)}
.offer-side .oh{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.offer-side .oh .oe{font-size:19px}
.offer-side .oh small{display:block;font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;color:var(--mut);text-transform:uppercase;font-weight:400}
.ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.ocards .tcard{cursor:default;pointer-events:none}
.onothing{color:var(--mut);font-size:12px;text-align:center;padding:18px 0;border:1.5px dashed var(--line);border-radius:11px}
.ocash{display:flex;align-items:center;justify-content:center;gap:7px;font-family:'JetBrains Mono';font-weight:800;font-size:15px;color:var(--amber);background:rgba(255,200,92,.09);border:1px solid rgba(255,200,92,.35);border-radius:11px;padding:9px}
.oswap{align-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--mint);
background:rgba(44,230,160,.1);border:1.5px solid rgba(44,230,160,.45);box-shadow:0 0 24px rgba(44,230,160,.25);animation:swapPulse 2s ease-in-out infinite}
@keyframes swapPulse{50%{transform:scale(1.12);box-shadow:0 0 34px rgba(44,230,160,.45)}}
.offer-q{text-align:center;font-size:13px;color:var(--mut);margin-bottom:16px}
.offer-q b{color:var(--txt)}
/* La lista e' un contenitore flex in colonna: senza `flex:0 0 auto` i gruppi
di Build si comprimevano invece di traboccare, e siccome .bld-group ha
overflow:hidden le righe in eccesso sparivano del tutto, senza nulla da
scorrere. Chi aveva molte proprieta' non riusciva a costruire su quelle
rimaste fuori. */
.mng-list{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.mng-list > *{flex:0 0 auto}
.mng-list::-webkit-scrollbar{width:5px}
.mng-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.mng-item{display:flex;align-items:center;gap:9px;background:rgba(140,160,220,.04);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.mng-item .sw{width:14px;height:22px;border-radius:3px;flex:none;box-shadow:0 0 8px color-mix(in srgb,var(--swc,#888) 50%,transparent)}
.mng-item .nm{font-size:13px;font-weight:700;flex:1;min-width:0}
.mng-item .nm small{display:block;font-family:'JetBrains Mono';font-size:10px;color:var(--mut);font-weight:400}
.mng-item .mbtn{padding:7px 10px;border-radius:8px;font-size:11.5px;font-weight:700;font-family:'Space Grotesk'}
.auc-prop{display:flex;align-items:center;gap:12px;background:rgba(140,160,220,.04);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:14px}
.auc-prop .sw{width:16px;height:26px;border-radius:3px;box-shadow:0 0 10px color-mix(in srgb,var(--swc,#888) 50%,transparent)}
.auc-prop .nm{font-weight:700;font-size:15px}
.auc-prop .nm small{display:block;font-family:'JetBrains Mono';font-size:11px;color:var(--mut);font-weight:400}
.auc-bid{font-family:'Sora';font-size:52px;font-weight:800;color:var(--amber);text-align:center;margin:10px 0 4px;letter-spacing:-.02em;line-height:1;text-shadow:0 0 26px rgba(255,200,92,.4)}
.auc-holder{text-align:center;font-size:13px;font-weight:600;color:var(--mutink);margin-bottom:14px}
.auc-turn{text-align:center;font-size:14px;font-weight:700;margin-bottom:12px}
.auc-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--mint);padding:13px 24px;border-radius:13px;font-weight:600;z-index:95;box-shadow:0 0 36px rgba(44,230,160,.28);animation:pop .25s}
/* ============================================================
BOARD GAME PREMIUM, warm paper, crafted, original Monopoly spirit
============================================================ */
:root{
--ink:#1A1614; --ink2:#2C2420;
--cream:#F8F0D4; --cream2:#EFE3BC; --paper:#FBF4E2;
--cmint:#28B870; --cmintD:#0E7A4A; --cblue:#4896E8; --cblueD:#1A5CA4;
--ccoral:#E85858; --ccoralD:#B02828; --cyellow:#FFC040; --cyellowD:#C08010;
--cpurple:#9870E8; --cpurpleD:#5840B0;
--mutink:#706040;
}
/* ---- panels: warm cardboard ---- */
.gpanel{background:linear-gradient(150deg,var(--cream),var(--cream2));border:3.5px solid var(--ink);border-radius:10px;backdrop-filter:none;
box-shadow:4px 4px 0 var(--ink),5px 5px 0 rgba(0,0,0,.18);color:var(--ink)}
.gpanel::before,.gpanel::after{display:none}
.gtitle{background:linear-gradient(90deg,var(--cmint),var(--cmintD));color:#fff;border-bottom:3.5px solid var(--ink);border-radius:8px 8px 0 0;
font-size:12.5px;letter-spacing:.24em;padding:12px 0 10px;text-shadow:1px 1px 0 var(--cmintD)}
/* ---- buttons: paper cutout feel ---- */
.btn{border:3px solid var(--ink);border-radius:10px;font-family:'Sora';font-weight:800;transition:transform .1s,box-shadow .1s}
.btn::after{display:none}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn:active{transform:translateY(4px)!important}
.btn-mint{background:linear-gradient(150deg,#38D880,#1AAA5C);color:#fff;
box-shadow:0 5px 0 var(--cmintD),0 6px 0 rgba(0,0,0,.35),3px 3px 0 rgba(0,60,30,.2);
text-shadow:1px 1px 0 var(--cmintD)}
.btn-mint:hover{box-shadow:0 7px 0 var(--cmintD),4px 4px 0 rgba(0,60,30,.2)}
.btn-mint:active{box-shadow:0 2px 0 var(--cmintD)}
.btn-vio{background:linear-gradient(150deg,#5AACF8,#2060B8);color:#fff;box-shadow:0 5px 0 var(--cblueD),3px 3px 0 rgba(0,0,0,.25);text-shadow:1px 1px 0 var(--cblueD)}
.btn-vio:active{box-shadow:0 2px 0 var(--cblueD)}
.btn-coral{background:linear-gradient(150deg,#F06060,#C02828);color:#fff;box-shadow:0 5px 0 var(--ccoralD),3px 3px 0 rgba(0,0,0,.25);text-shadow:1px 1px 0 var(--ccoralD)}
.btn-coral:active{box-shadow:0 2px 0 var(--ccoralD)}
.btn-ghost{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink2),3px 3px 0 rgba(0,0,0,.15)}
.btn-ghost:hover{border-color:var(--ink);box-shadow:0 5px 0 var(--ink2)}
.btn-ghost:active{box-shadow:0 1px 0 var(--ink2)}
.btn:disabled{opacity:.42}
.small-btn{background:var(--paper);border:2.5px solid var(--ink);color:var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink2),2px 2px 0 rgba(0,0,0,.12);font-weight:700}
.small-btn:hover{color:var(--ink);transform:translateY(-1px)}
.small-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2)}
/* ---- chips / inputs ---- */
.chip,.bal-chip,.wallet-chip{background:var(--paper);border:2.5px solid var(--ink);color:var(--ink);border-radius:11px;box-shadow:2px 2px 0 var(--ink2)}
.chip .dot{background:var(--cmint);box-shadow:none;border:1.5px solid var(--ink)}
.bal-chip .v{color:var(--cmintD)}.bal-chip .u{color:var(--mutink)}
.f-label{color:#fff;text-shadow:1px 1px 0 var(--ink)}
.modal .f-label{color:var(--mutink);text-shadow:none}
.f-input,.pl-row input{background:#fff;border:3px solid var(--ink);color:var(--ink);border-radius:10px;font-weight:700}
.f-input:focus,.pl-row input:focus{border-color:var(--cmintD);box-shadow:0 0 0 3px rgba(40,184,112,.28)}
.cash-wrap{background:#fff;border:3px solid var(--ink);border-radius:10px}
.cash-wrap b{color:var(--cyellowD)}.cash-wrap input{color:var(--cmintD)}
.fee-pill{background:#fff;border:3px solid var(--ink);color:var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink2)}
.fee-pill.sel{background:var(--cyellow);color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--cyellowD)}
.tok{background:#fff;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink2)}
.tok.sel{background:var(--cmint);border-color:var(--ink);box-shadow:0 3px 0 var(--cmintD)}
.pemoji{background:#fff;border:2.5px solid var(--ink)}
/* ---- modals: paper cards ---- */
.modal-wrap{background:rgba(50,35,15,.42);backdrop-filter:blur(6px)}
.modal{background:linear-gradient(150deg,var(--cream),var(--cream2));border:4px solid var(--ink);border-radius:16px;color:var(--ink);
box-shadow:6px 6px 0 var(--ink),8px 8px 0 rgba(0,0,0,.2)}
.modal h3{color:var(--ink)}.modal p.hint{color:var(--mutink)}
.modal .cfm-msg{color:var(--mutink)}
.modal .cfm-msg .cfm-lead{color:var(--ink)}
.wopt{background:#fff;border:3px solid var(--ink);color:var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink2)}
.wopt:hover{background:#F0FFF6;border-color:var(--ink);transform:translateY(-1px)}
.wopt .arr{color:var(--mutink)}
.tx-row{border-bottom:2px dashed rgba(26,22,20,.22)}
.tx-row span{color:var(--mutink)}.tx-row b{color:var(--ink)}.tx-total b{color:var(--cyellowD)}
.spinner{border-color:rgba(26,22,20,.18);border-top-color:var(--cmint)}
/* ---- hub ---- */
.hub-top{background:var(--cream);border-bottom:3.5px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 6px 12px rgba(0,0,0,.18);backdrop-filter:none}
.play-card{border:4px solid var(--ink);border-radius:18px;color:#fff;transition:transform .15s,box-shadow .15s}
.play-card .d{color:rgba(255,255,255,.92)}.play-card .big{text-shadow:1.5px 1.5px 0 rgba(26,22,20,.6)}.play-card .glyph{opacity:.28}
.play-card.create{background:linear-gradient(145deg,var(--cmint),var(--cmintD));box-shadow:0 6px 0 var(--cmintD),4px 4px 0 rgba(0,0,0,.25)}
.play-card.create:hover{box-shadow:0 9px 0 var(--cmintD),4px 4px 0 rgba(0,0,0,.3);transform:translateY(-5px)}
.play-card.join{background:linear-gradient(145deg,var(--cblue),var(--cblueD));box-shadow:0 6px 0 var(--cblueD),4px 4px 0 rgba(0,0,0,.25)}
.play-card.join:hover{box-shadow:0 9px 0 var(--cblueD),4px 4px 0 rgba(0,0,0,.3);transform:translateY(-5px)}
.sec-h h3{color:#fff;text-shadow:1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink)}
.sec-h .ln{background:rgba(255,255,255,.5);height:2.5px;border-radius:2px}
.game-row{background:var(--cream);border:3px solid var(--ink);border-radius:13px;box-shadow:3px 3px 0 var(--ink2);color:var(--ink)}
.game-row:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--ink2)}
.game-row .nm small{color:var(--mutink)}.game-row .fee{color:var(--cyellowD)}.game-row .fee small{color:var(--mutink)}
.gstate{border-width:2px!important;border-radius:8px;font-weight:800}
.gstate.open{color:#fff;background:var(--cmint);border:2px solid var(--ink)}
.gstate.live{color:var(--ink);background:var(--cyellow);border:2px solid var(--ink)}
.gstate.full{color:#fff;background:#9AA0AD;border:2px solid var(--ink)}
.pool-panel .pv{color:var(--cyellowD);text-shadow:none}
.pool-panel .pl,.pool-panel .rw span{color:var(--mutink)}.pool-panel .rw b{color:var(--ink)}
.note{background:var(--cyellow);border:3px solid var(--ink);border-radius:14px;color:var(--ink);box-shadow:0 4px 0 var(--cyellowD)}.note b{color:var(--ink)}
.stat{background:var(--cream);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink2)}
.stat .v{color:var(--ink)}.stat .v.m{color:var(--cmintD)}.stat .v.a{color:var(--cyellowD)}.stat .l{color:var(--mutink)}
/* ---- waiting lobby ---- */
.wait-head h2{color:#fff;text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.wait-head .code{color:#fff}.wait-head .code b{color:var(--cyellow)}
.slot{border:3px dashed rgba(26,22,20,.28);border-radius:14px;background:rgba(251,244,226,.55);color:var(--ink)}
.slot.filled{background:var(--cream);border:3.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink2)}
.slot .ss{color:var(--mutink)}.slot .ss.rdy{color:var(--cmintD)}
/* ---- HUD ---- */
.hud-top{border-radius:99px;background:var(--cream);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink2),4px 4px 0 rgba(0,0,0,.1)}
.hud-top .rn{color:var(--ink)}.hud-top .sep{background:rgba(26,22,20,.3)}
.hud-top .tt{color:var(--mutink)}.hud-top .tt b{color:var(--ink)}.hud-top .pool{color:var(--cyellowD)}
.pcard{background:var(--cream);border:3px solid var(--ink);border-radius:13px;backdrop-filter:none;box-shadow:3px 3px 0 var(--ink2)}
.pcard::before{width:7px;box-shadow:none;border-right:3px solid var(--ink)}
.pcard.active{border-color:var(--ink);box-shadow:0 0 0 4px var(--pc),3px 3px 0 var(--ink2);transform:translateX(6px)}
.pcard .pn{color:var(--ink)}.pcard .bal{color:var(--cmintD);font-size:15px}
.pcard .bal.neg{color:var(--ccoralD)}.pcard .chip2{box-shadow:0 0 0 1.5px var(--ink)}.pcard .jail-tag{color:var(--ccoralD)}
.tool-btn{background:var(--cream);border:3px solid var(--ink);color:var(--ink);border-radius:11px;backdrop-filter:none;box-shadow:3px 3px 0 var(--ink2)}
.tool-btn:hover:not(:disabled){background:#F0FFF4;transform:translateX(-3px)}
.tool-btn:active:not(:disabled){transform:translateY(4px)!important;box-shadow:1px 1px 0 var(--ink2)}
.hud-log .scroll p{color:rgba(26,22,20,.72);font-size:12.5px;line-height:1.55}.hud-log .scroll p b{color:var(--ink);font-weight:700}
.roll-btn{background:linear-gradient(150deg,#38D880,#1AAA5C);color:#fff;border:4px solid var(--ink);border-radius:16px;
box-shadow:0 7px 0 var(--cmintD),4px 4px 0 rgba(0,0,0,.25);text-shadow:2px 2px 0 var(--cmintD)}
.roll-btn::after{display:none}
.roll-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 0 var(--cmintD),4px 4px 0 rgba(0,0,0,.25)}
.roll-btn:active:not(:disabled){transform:translateY(6px)!important;box-shadow:0 2px 0 var(--cmintD)}
.roll-plate{background:var(--cream);border:3.5px solid var(--ink);border-radius:16px;backdrop-filter:none;box-shadow:3px 3px 0 var(--ink2)}
.roll-plate .die-face{border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink2)}
.roll-plate .tot{border-left:2px dashed rgba(26,22,20,.3)}
.roll-plate .tot small{color:var(--mutink)}.roll-plate .tot b{color:var(--cmintD);text-shadow:none}.roll-plate .tot b.dbl{color:var(--cyellowD);text-shadow:none}
.hint{color:#fff;text-shadow:1px 1px 0 rgba(26,22,20,.6)}
/* ---- turn banner ---- */
#turnBanner .band{background:var(--bc,#28B870);border:5px solid var(--ink);border-radius:18px;padding:20px 80px;
box-shadow:0 10px 0 rgba(26,22,20,.9),5px 5px 0 rgba(0,0,0,.2);transform:rotate(-1.5deg)}
#turnBanner .band::before,#turnBanner .band::after{display:none}
#turnBanner .who{color:#fff;font-size:clamp(26px,4.5vw,46px);text-shadow:3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink)}
#turnBanner .lbl{color:rgba(255,255,255,.95);text-shadow:1px 1px 0 var(--ink)}
/* ---- cinematic card ---- */
#cine .dim{background:radial-gradient(760px 600px at 50% 46%,rgba(40,80,30,.3),rgba(10,25,5,.9))}
.cface{border-radius:20px;box-shadow:0 12px 0 rgba(26,22,20,.85),5px 5px 0 rgba(0,0,0,.4)}
.cback{background:var(--cmint);border:5px solid var(--ink)}
.cback .frame{border:2.5px dashed rgba(255,255,255,.6);border-radius:14px;inset:13px}
.cback .emb{filter:drop-shadow(0 5px 0 rgba(26,22,20,.4))}.cback .txt{color:#fff;text-shadow:2px 2px 0 var(--ink)}
.cfront{border:5px solid var(--ink);background:linear-gradient(178deg,#FFFBEF,#F4E9CC)}.cfront .frame{border:2.5px solid rgba(26,22,20,.25);border-radius:14px}
.cfront .deckname{color:var(--cmintD)}.cfront .deckname.ct{color:var(--cblueD)}.cfront .amt.pos{color:var(--cmintD)}.cfront .amt.neg{color:var(--ccoralD)}
.cine-btn,.cine-btn.show{display:none!important}
/* ---- deed ---- */
.deed{border:4px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 rgba(26,22,20,.8);background:linear-gradient(178deg,#FFFBEF,#F4E9CC)}
.deed .band{border-bottom:3.5px solid var(--ink)}.deed .band .tt{text-shadow:1.5px 1.5px 0 rgba(26,22,20,.7)}.deed .foot{border-top:2.5px dashed rgba(26,22,20,.3);color:var(--mutink)}
/* ---- trade ---- */
.trade-col{background:var(--paper);border:3px solid var(--ink);border-radius:15px}.trade-col h4{color:var(--ink)}
.trade-col h4 .who-dot{border:2px solid var(--ink);box-shadow:none}.tswap{color:var(--ink);font-weight:800}
.tcards .empty{border:2.5px dashed var(--ink2);color:var(--mutink);border-radius:12px}
.tcard{border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(26,22,20,.6)}.tcard:hover{box-shadow:5px 5px 0 rgba(26,22,20,.6)}
.tcard.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--cmint),3px 3px 0 rgba(26,22,20,.6)}.tcard .tsel{background:rgba(40,184,112,.35)}
.tcard .tsel span{background:var(--cmint);border:2.5px solid var(--ink);color:#fff}.tcard .tband{border-bottom:2.5px solid var(--ink)}
.tcard .tmort{background:var(--ccoral);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sel-partner button{background:#fff;border:3px solid var(--ink);color:var(--ink);border-radius:11px;box-shadow:2px 2px 0 var(--ink2);font-weight:700}
.sel-partner button.on{background:var(--cmint);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--cmintD)}
.offer-side{border-radius:16px;border:3px solid var(--ink)}.offer-side.give{background:#FFECE6;border-color:var(--ink)}.offer-side.get{background:#E8F8EE;border-color:var(--ink)}
.onothing{border:2.5px dashed var(--ink2);color:var(--mutink);border-radius:11px}
.ocash{background:var(--cyellow);border:3px solid var(--ink);color:var(--ink);border-radius:11px;box-shadow:2px 2px 0 var(--cyellowD)}
.oswap{background:var(--cmint);border:3.5px solid var(--ink);color:#fff;box-shadow:0 4px 0 var(--cmintD)}
.offer-q{color:var(--mutink)}.offer-q b{color:var(--ink)}
/* ---- manage / auction ---- */
.mng-item{background:var(--paper);border:3px solid var(--ink);border-radius:12px}
.mng-item .sw{border:2px solid var(--ink);box-shadow:none;border-radius:4px}.mng-item .nm{color:var(--ink)}.mng-item .nm small{color:var(--mutink)}
.mng-item .mbtn{border:2.5px solid var(--ink);border-radius:9px}.mng-list::-webkit-scrollbar-thumb{background:var(--ink2)}
.auc-prop{background:var(--paper);border:3px solid var(--ink);border-radius:13px}.auc-prop .sw{border:2px solid var(--ink);box-shadow:none;border-radius:4px}
.auc-prop .nm{color:var(--ink)}.auc-prop .nm small{color:var(--mutink)}.auc-bid{color:var(--cyellowD);text-shadow:none;line-height:1}
.auc-holder,.auc-turn{color:var(--mutink)}.auc-turn b{text-shadow:.5px .5px 0 var(--ink)}
/* ---- misc ---- */
.toast{background:var(--cream);border:4px solid var(--ink);color:var(--ink);border-radius:13px;font-weight:700;box-shadow:4px 4px 0 var(--ink2)}
.floater{text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.stamp{background:rgba(251,244,226,.92);border-width:4px;border-color:var(--ccoral);color:var(--ccoral);box-shadow:3px 3px 0 rgba(26,22,20,.5)}
.stamp.gold{border-color:var(--cmintD);color:var(--cmintD)}
:focus-visible{outline:3px solid var(--cmint);outline-offset:3px}
::selection{background:var(--cmint);color:#04231A}
*{scrollbar-width:thin;scrollbar-color:var(--ink2) transparent}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--ink2);border-radius:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── Chat scrollbar ── */
#chatMsgs::-webkit-scrollbar{width:4px}
#chatMsgs::-webkit-scrollbar-thumb{background:var(--ink2);border-radius:3px}
/* ── Create modal: fee pills + general layout ── */
#createModal .fee-pills{gap:8px;flex-wrap:wrap;justify-content:flex-start}
#createModal .fee-pill{padding:11px 16px;font-size:13px;min-width:72px;text-align:center;letter-spacing:.04em}
#createModal .f-label{margin:16px 0 8px;font-size:11.5px}
#createModal .f-input{font-size:15px;padding:13px 15px}
#createModal .btn{font-size:15px;padding:15px}
/* ── Hub: better spacing ── */
.hub-body{gap:22px}
.play-card{min-height:150px}
.play-card .big{font-size:22px}
.pool-panel .pv{font-size:30px}
/* ── Piece images (replace emoji) ── */
.pcard .top > img { width:30px; height:30px; object-fit:contain; border-radius:5px; flex-shrink:0; }
.tok img { width:100%; height:100%; object-fit:contain; border-radius:4px; padding:2px; }
.pemoji img { width:100%; height:100%; object-fit:contain; }
.slot .se img, .slot > img { width:34px; height:34px; object-fit:contain; border-radius:4px; }
#turnBannerWho img { height:44px; width:44px; object-fit:contain; border-radius:6px; vertical-align:middle; }
/* ============================================================
TURN TIMER (60s max decision time)
============================================================ */
#turnTimer{position:absolute;top:66px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:9px;
background:var(--cream);border:3px solid var(--ink);border-radius:99px;padding:6px 14px 6px 6px;
box-shadow:3px 3px 0 var(--ink2);z-index:6}
#turnTimer .ttbar{width:120px;height:9px;border-radius:99px;background:rgba(26,22,20,.12);overflow:hidden;border:1.5px solid var(--ink)}
#turnTimer .ttbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#38D880,#1AAA5C);transition:width .3s linear}
#turnTimer.urgent .ttbar i{background:linear-gradient(90deg,#F06060,#C02828)}
#turnTimer .ttnum{font-family:'JetBrains Mono';font-weight:800;font-size:12.5px;color:var(--ink);min-width:20px;text-align:right}
#turnTimer.urgent .ttnum{color:var(--ccoralD);animation:blink 1s infinite}
@media(max-width:720px){#turnTimer{top:auto;bottom:170px;left:50%}}
/* ---- offline / reconnecting player card ---- */
.pcard.offline{opacity:.55}
.pcard.offline .top{position:relative}
.pcard.offline::after{content:"reconnecting";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:'JetBrains Mono';font-size:10px;letter-spacing:.1em;color:var(--ccoralD);background:rgba(251,244,226,.82);
border-radius:10px;text-transform:uppercase;pointer-events:none}
/* ============================================================
VICTORY SCREEN
============================================================ */
#victoryScreen{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;overflow:hidden;
background:radial-gradient(1200px 800px at 50% 30%,rgba(40,184,112,.28),rgba(6,9,16,.94) 62%)}
#victoryScreen.open{display:flex}
.vic-rays{position:absolute;left:50%;top:50%;width:1600px;height:1600px;transform:translate(-50%,-50%);
background:conic-gradient(from 0deg,transparent 0 10deg,rgba(255,255,255,.06) 10deg 16deg,transparent 16deg 36deg,rgba(255,255,255,.06) 36deg 42deg,transparent 42deg 62deg);
animation:raySpin 30s linear infinite;pointer-events:none}
.vic-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vconf{position:absolute;top:-24px;width:9px;height:15px;opacity:.95;border-radius:2px;
animation-name:vconfFall;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:forwards;
transform:translateY(-30px) rotate(0deg)}
@keyframes vconfFall{
0%{transform:translateY(-30px) translateX(0) rotate(0deg);opacity:1}
85%{opacity:1}
100%{transform:translateY(108vh) translateX(calc(var(--dx,0) * 220px)) rotate(var(--rot,360deg));opacity:0}
}
.vic-card{position:relative;z-index:2;text-align:center;max-width:520px;width:92vw;padding:46px 38px 38px;
background:linear-gradient(150deg,var(--cream),var(--cream2));border:5px solid var(--ink);border-radius:26px;
box-shadow:0 10px 0 var(--ink),0 14px 60px rgba(0,0,0,.6);animation:vicIn .55s cubic-bezier(.2,1.3,.35,1)}
@keyframes vicIn{0%{opacity:0;transform:scale(.7) translateY(40px)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}}
.vic-eyebrow{font-size:11px;letter-spacing:.34em;color:var(--mutink);margin-bottom:10px}
.vic-title{font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:.03em;color:var(--cmintD);
text-shadow:2px 2px 0 rgba(0,0,0,.08);margin-bottom:14px;animation:vicPulse 1.6s ease-in-out infinite}
@keyframes vicPulse{50%{transform:scale(1.035)}}
.vic-piece{width:104px;height:104px;margin:0 auto 14px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.vic-piece img{width:100%;height:100%;object-fit:contain}
.vic-name{font-size:26px;font-weight:800;margin-bottom:8px}
.vic-amount{font-size:19px;font-weight:800;color:var(--cyellowD);background:rgba(255,192,64,.16);
border:2.5px solid var(--cyellowD);border-radius:12px;padding:10px 18px;display:inline-block;margin-bottom:26px}
.vic-close{width:100%;font-size:16px;padding:16px}
/* ============================================================
BUILD SCREEN, grouped by color, +/- steppers, unmistakable
============================================================ */
.bld-group{margin-bottom:16px;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper)}
.bld-group:last-child{margin-bottom:0}
.bld-ghead{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--gc,#A69A80);
font-family:'Sora';font-weight:800;font-size:11.5px;letter-spacing:.14em;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.bld-swatch{width:13px;height:13px;border-radius:4px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.2) inset}
.bld-row{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1.5px dashed rgba(26,22,20,.18)}
.bld-name{flex:1;font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bld-stage{display:flex;align-items:center}
.bld-dots{display:flex;gap:3px}
.bld-dot{width:9px;height:9px;border-radius:50%;background:rgba(26,22,20,.15);border:1.5px solid var(--ink)}
.bld-dot.on{background:var(--cmint)}
.bld-hotel{font-family:'JetBrains Mono';font-size:10.5px;font-weight:800;color:var(--ccoralD);background:rgba(232,88,88,.12);
border:1.5px solid var(--ccoralD);border-radius:7px;padding:2px 7px}
.bld-mort{font-family:'JetBrains Mono';font-size:10px;font-weight:700;color:var(--mutink);letter-spacing:.06em}
.bld-controls{display:flex;align-items:center;gap:7px;flex:none}
.bld-btn{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--ink);font-size:17px;font-weight:800;
background:#fff;color:var(--ink);line-height:1;box-shadow:0 3px 0 var(--ink2)}
.bld-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink2)}
.bld-btn.plus{background:var(--cmint);color:#fff}
.bld-btn.minus{background:var(--ccoral);color:#fff}
.bld-btn:disabled{opacity:.28;cursor:not-allowed}
.bld-cost{font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;color:var(--mutink);min-width:46px;text-align:center}
.mng-empty{text-align:center;padding:34px 14px;color:var(--mutink);font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mng-empty::first-line{font-size:38px}
.mng-empty b{color:var(--ink);font-size:15px}
/* ============================================================
MORTGAGE SCREEN, clean two-section list, mortgage/redeem only
============================================================ */
.mrt-section-h{font-family:'JetBrains Mono';font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--mutink);
text-transform:uppercase;margin:14px 0 7px;padding-bottom:5px;border-bottom:1.5px dashed rgba(26,22,20,.2)}
.mrt-section-h:first-child{margin-top:0}
.mrt-row{display:flex;align-items:center;gap:11px;padding:9px 12px;margin-bottom:7px;border-radius:12px;
background:var(--paper);border:2.5px solid var(--ink)}
.mrt-row.is-mort{background:rgba(232,88,88,.08)}
.mrt-sw{width:12px;height:26px;border-radius:3px;flex:none;background:var(--gc,#A69A80);border:1.5px solid var(--ink)}
.mrt-nm{flex:1;font-size:13px;font-weight:700;min-width:0}
.mrt-nm small{display:block;font-family:'JetBrains Mono';font-size:10px;color:var(--mutink);font-weight:400}
.mrt-btn{flex:none;padding:9px 14px;border-radius:9px;font-size:12px;font-weight:800;border:2.5px solid var(--ink);
font-family:'Space Grotesk';box-shadow:0 3px 0 var(--ink2)}
.mrt-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink2)}
.mrt-btn.mortgage{background:var(--cyellow);color:var(--ink)}
.mrt-btn.redeem{background:var(--cmint);color:#fff}
.mrt-btn:disabled{opacity:.32;cursor:not-allowed}
.mrt-btn.sell{background:#E88A5E;color:#fff}
/* ============================================================
RAISE THE CASH, il pannello unico che si apre con un debito aperto:
quanto manca sempre in cima, sotto tutte le mosse possibili in ordine
============================================================ */
.raise-head{padding:11px 12px;margin-bottom:10px;border-radius:12px;
background:rgba(184,50,40,.07);border:2.5px solid var(--ink)}
.rh-figs{display:flex;flex-direction:column;gap:5px}
.rh-fig{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:700}
.rh-fig span{color:var(--mutink)}
.rh-fig.miss{border-top:1.5px dashed rgba(26,22,20,.2);padding-top:6px;margin-top:2px}
.rh-fig.miss b{color:#B83228}
.rh-tip{margin-top:8px;font-size:12px;line-height:1.45;color:var(--mutink)}
.raise-row.is-blocked{opacity:.62}
#manageFoot{display:flex;gap:8px}
#debtBar .db-btn.raise{background:var(--cyellow);color:var(--ink)}
@media(max-width:640px){
.raise-head{padding:9px 10px}
.rh-fig{font-size:11.5px}
.rh-tip{font-size:11px}
}
/* ============================================================
AUCTION, "last remaining bidder" notice
============================================================ */
.auc-notice{
margin:2px 0 14px;padding:11px 14px;border-radius:12px;
background:rgba(255,200,92,.16);border:2.5px solid var(--cyellowD,#C99A16);
color:var(--ink,#1A1614);font-size:13px;font-weight:600;line-height:1.5;text-align:center;
animation:aucNoticeIn .28s cubic-bezier(.2,1.3,.4,1)
}
.auc-notice b{font-weight:800}
@keyframes aucNoticeIn{from{opacity:0;transform:translateY(-6px)}}
/* ============================================================
SETTINGS MENU
============================================================ */
.tool-div{height:3px;background:rgba(26,22,20,.18);border-radius:2px;margin:6px 0;flex:none}
.chip-btn{cursor:pointer;font-size:14px;line-height:1;padding:9px 12px}
.chip-btn:hover{filter:brightness(1.06)}
.set-sec{margin-bottom:18px;padding:14px;border-radius:14px;
background:var(--paper,rgba(140,160,220,.05));border:2.5px solid var(--ink,rgba(124,140,190,.2))}
.set-sec:last-of-type{margin-bottom:0}
.set-sec-h{font-family:'Sora';font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink,var(--txt));margin-bottom:12px;padding-bottom:8px;
border-bottom:2px dashed rgba(26,22,20,.18)}
.set-row{display:flex;align-items:center;gap:12px;min-height:38px}
.set-row + .set-row{margin-top:6px}
.set-lbl{flex:1;font-size:13.5px;font-weight:700;color:var(--ink,var(--txt));min-width:0}
.set-lbl small{display:block;font-family:'JetBrains Mono';font-size:10px;font-weight:400;
color:var(--mutink,var(--mut));letter-spacing:.02em;margin-top:2px}
.set-val{flex:none;width:34px;text-align:right;font-size:12px;font-weight:800;color:var(--mutink,var(--mut))}
/* pill toggle */
.set-toggle{flex:none;width:52px;height:30px;border-radius:99px;position:relative;
background:rgba(26,22,20,.14);border:2.5px solid var(--ink,rgba(124,140,190,.4));
box-shadow:0 3px 0 var(--ink2,transparent);transition:background .18s}
.set-toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
background:#fff;border:2px solid var(--ink,#222);transition:transform .18s}
.set-toggle.on{background:var(--cmint,#2CE6A0)}
.set-toggle.on i{transform:translateX(22px)}
.set-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2,transparent)}
/* range slider */
.set-range{flex:1;min-width:90px;height:10px;-webkit-appearance:none;appearance:none;
background:rgba(26,22,20,.14);border:2px solid var(--ink,rgba(124,140,190,.4));border-radius:99px;outline:none}
.set-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
background:var(--cmint,#2CE6A0);border:2.5px solid var(--ink,#222);cursor:pointer;box-shadow:0 2px 0 var(--ink2,transparent)}
.set-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
background:var(--cmint,#2CE6A0);border:2.5px solid var(--ink,#222);cursor:pointer}
.set-range:disabled{opacity:.4;cursor:not-allowed}
#settingsModal .modal .body{max-height:76vh;overflow-y:auto}
#setCamPresets{gap:6px}
#setCamPresets .fee-pill{padding:9px 14px;font-size:12px;flex:1;text-align:center}
/* ============================================================
CHAT PANEL, always-readable dark text on the paper background
============================================================ */
/* Desktop: the bottom-left corner is free (player cards sit top-left, the
event log bottom-right), so the chat lives there and overlaps nothing. */
#chatPanel{
display:none;flex-direction:column;position:fixed;bottom:14px;left:14px;
width:285px;max-height:370px;z-index:15;
border:3.5px solid var(--ink,#1A1614);border-radius:12px;overflow:hidden;
box-shadow:4px 4px 0 var(--ink,#1A1614)
}
#chatPanel.open{display:flex}
.chat-head{
background:var(--cmint,#2CE6A0);padding:8px 13px;font-family:'Sora';font-weight:800;font-size:12px;
letter-spacing:.14em;color:#fff;border-bottom:2.5px solid var(--ink,#1A1614);
display:flex;align-items:center;justify-content:space-between;flex-shrink:0
}
.chat-x{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0 2px;line-height:1}
#chatMsgs{flex:1;overflow-y:auto;background:var(--paper,#FFFDF5);min-height:100px}
/* the message text itself: black + bold, never inherits the light body colour */
.chat-msg{
padding:5px 10px;border-bottom:1px dashed rgba(0,0,0,.12);
font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;line-height:1.5;
color:#000;word-break:break-word
}
.chat-msg .chat-who{font-weight:800;color:#000}
.chat-msg .chat-who.mine{color:#0B7A4B}
.chat-msg .chat-body{color:#000;font-weight:700}
.chat-msg.sys{font-style:italic;color:#000;opacity:.8}
.chat-bar{display:flex;gap:6px;padding:8px;background:var(--cream,#FBF4E2);
border-top:2px dashed rgba(0,0,0,.15);flex-shrink:0}
.chat-bar input{
flex:1;min-width:0;padding:8px 10px;font-size:12px;border:2.5px solid var(--ink,#1A1614);border-radius:9px;
background:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#000;outline:none
}
.chat-bar input::placeholder{color:rgba(0,0,0,.42);font-weight:600}
.chat-send{padding:8px 13px;border:2.5px solid var(--ink,#1A1614);border-radius:9px;
background:var(--cmint,#2CE6A0);color:#fff;font-family:'Sora';font-weight:800;font-size:13px;cursor:pointer;
box-shadow:0 3px 0 var(--cmintD,#0B7A4B);text-shadow:1px 1px 0 var(--cmintD,#0B7A4B)}
.chat-send:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cmintD,#0B7A4B)}
/* ---- join with a table code, under the two play cards ---- */
.code-join{margin:12px 0 4px;padding:12px 14px;border-radius:12px;
background:var(--paper,#FBF4E2);border:2.5px solid var(--ink,#1A1614);
box-shadow:0 3px 0 var(--ink2,#2C2420)}
.code-join .cj-lbl{display:block;margin-bottom:8px;font-family:'Sora';font-weight:800;
font-size:13px;color:var(--ink,#1A1614)}
.code-join .cj-row{display:flex;gap:8px;align-items:stretch}
.code-join .f-input{flex:1;font-family:'JetBrains Mono';font-size:14px;letter-spacing:.08em;
text-transform:uppercase;padding:11px 13px}
.code-join .btn{padding:0 20px;font-size:13.5px;white-space:nowrap}
@media(max-width:520px){
.code-join .cj-row{flex-direction:column}
.code-join .btn{padding:12px 14px}
}
/* ---- private table, inside Create Game ---- */
.cg-private{margin-top:14px}
.cg-check{display:flex;align-items:center;gap:9px;cursor:pointer;
font-family:'Sora';font-weight:700;font-size:13px;color:var(--ink,#1A1614)}
.cg-check input{width:18px;height:18px;flex:none;accent-color:var(--cmintD,#0E7A4A);cursor:pointer}
/* ============================================================
CREATE TABLE, token selector
============================================================ */
.tok-pill{display:inline-flex;align-items:center;gap:7px}
.tok-pill .tk-em{font-size:15px;line-height:1}
#cgTokens .fee-pill{padding:10px 14px;font-size:12.5px}
/* ============================================================
MOBILE RESPONSIVE, one deterministic bottom stack, no overlaps
Desktop layout above 820px is untouched.
============================================================ */
@media(max-width:820px){
:root{
/* heights of the three bottom bands + the safe area of notched phones.
Every mobile HUD offset below is derived from these, nothing is
positioned with a hardcoded magic number any more. */
--mob-safe: env(safe-area-inset-bottom, 0px);
--mob-cards: 58px; /* player-card strip (bottom band) */
--mob-roll: 62px; /* dice + roll button (middle band) */
--mob-gap: 8px;
--modal-edge: 10px; /* aria tra bordo schermo e modale */
--mob-band1: calc(var(--mob-safe) + var(--mob-cards) + var(--mob-gap));
--mob-band2: calc(var(--mob-band1) + var(--mob-roll) + var(--mob-gap));
}
/* ---- landing / hub ---- */
.logo-plate{padding:16px 26px;gap:10px}
.cta-row{flex-direction:column;width:88vw;max-width:340px}
.cta-row .btn{width:100%}
.hub-top{padding:12px 14px;gap:9px;flex-wrap:wrap}
.hub-logo{font-size:15px}
.hub-body{padding:0 12px;margin-top:14px;gap:14px}
.play-card{padding:18px;min-height:120px}
.play-card .glyph{font-size:70px}
.play-card .big{font-size:19px}
.game-row{flex-wrap:wrap;padding:12px}
.game-row .fee{width:100%;text-align:left;order:3}
/* ---- modals: bottom sheet con un filo d'aria sui bordi ----
Non piu' incollata ai lati dello schermo: 10px per lato e 8px sotto
bastano a staccarla dal bordo senza rubare spazio al contenuto. */
.modal-wrap{padding:0;align-items:flex-end}
.modal{width:calc(100vw - var(--modal-edge)*2)!important;max-width:calc(100vw - var(--modal-edge)*2);
max-height:90vh;overflow-y:auto;
border-radius:20px;position:fixed;bottom:8px;left:var(--modal-edge);right:var(--modal-edge);margin:0;
padding-bottom:var(--mob-safe);animation:sheetUp .3s cubic-bezier(.2,1,.3,1)}
@keyframes sheetUp{from{transform:translateY(100%)}}
.modal .body{padding:16px}
#settingsModal .modal .body{max-height:70vh}
/* ---- waiting lobby ---- */
#waiting{padding:20px 12px}
.wait-head{flex-direction:column}
.wait-head h2{font-size:22px}
.slots{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#startBtn{width:100%}
/* ---- game HUD ------------------------------------------------
Bottom stack, from the screen edge upwards:
[player cards] → [dice + roll] → [actions / title deed]
The tool rail becomes a vertical strip pinned to the right edge,
clear of the whole stack. Nothing overlaps anything else. */
.hud-top{top:calc(6px + env(safe-area-inset-top,0px));padding:7px 12px;gap:7px;max-width:calc(100vw - 16px)}
.hud-top .rn{font-size:10px}
.hud-top .tt,.hud-top .pool{font-size:10.5px}
#turnTimer{top:calc(56px + env(safe-area-inset-top,0px));bottom:auto;left:50%;padding:5px 12px 5px 5px}
#turnTimer .ttbar{width:88px;height:8px}
#turnTimer .ttnum{font-size:11.5px}
/* band 1, player cards */
.hud-left{position:fixed;top:auto;bottom:var(--mob-safe);left:0;right:0;width:100%;
height:var(--mob-cards);flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;
gap:6px;padding:0 8px;background:linear-gradient(0deg,rgba(6,9,16,.6),transparent);
scroll-snap-type:x proximity;z-index:13;-webkit-overflow-scrolling:touch}
.hud-left::-webkit-scrollbar{display:none}
.pcard{flex:0 0 148px;scroll-snap-align:start;height:100%;display:flex;flex-direction:column;justify-content:center}
.pcard .top{padding:5px 9px 3px 11px;gap:6px}
.pcard .top > img{width:22px;height:22px}
.pcard .pn{font-size:11.5px}
.pcard .bal{font-size:12.5px}
.pcard .props{padding:0 9px 4px 11px;gap:2.5px}
.pcard .chip2{width:11px;height:7px}
/* band 2, dice plate + roll button */
.hud-roll{bottom:var(--mob-band1);left:50%;transform:translateX(-50%);
height:var(--mob-roll);align-items:center;gap:10px;z-index:12}
.roll-btn{padding:13px 30px;font-size:14px;letter-spacing:.14em}
.roll-plate{padding:7px 11px 7px 8px;gap:7px}
.roll-plate .die-face{width:31px;height:31px;border-radius:8px}
.roll-plate .die-face svg{width:21px;height:21px}
.roll-plate .tot b{font-size:19px}
.roll-plate .tot small{font-size:8px;margin-bottom:2px}
/* band 3, contextual actions and the title deed (never both at once) */
.hud-actions{bottom:var(--mob-band2);max-width:calc(100vw - 92px);gap:8px;z-index:12}
#deedWrap{bottom:var(--mob-band2);gap:8px;z-index:12}
.deed{width:172px}
.deed table{font-size:10.5px}
.deed td{padding:3px 10px}
.deed .band .tt{font-size:12.5px}
.deed-actions .act{padding:10px 16px;font-size:12.5px}
/* right-edge tool rail, vertically centred, out of the bottom stack */
.hud-right{top:50%;bottom:auto;right:6px;left:auto;width:auto;transform:translateY(-50%);
flex-direction:column;align-items:flex-end;gap:5px;z-index:12}
.tool-btn{padding:9px;font-size:0;gap:0;border-radius:12px;width:42px;height:42px;justify-content:center}
.tool-btn .ico{font-size:18px;width:auto}
.tool-btn:hover:not(:disabled){transform:none}
.tool-div{width:26px;height:3px;margin:2px 0}
.hud-log{display:none}
.hint{display:none}
/* ---- trade / manage / auction ---- */
.trade-grid{gap:10px}
.tcards{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.mng-list{max-height:52vh}
.bld-row{flex-wrap:wrap}
.mrt-row{flex-wrap:wrap}
.mrt-btn{width:100%;text-align:center}
.auc-bid{font-size:40px}
.auc-row .btn{flex:1 1 calc(50% - 8px);padding:12px 10px;font-size:13px}
.auc-notice{font-size:12.5px;padding:10px 12px}
/* ---- victory screen ---- */
.vic-card{padding:32px 22px 26px}
.vic-title{font-size:28px}
.vic-piece{width:80px;height:80px}
/* ---- chat: sits directly above the bottom stack, never over it ---- */
#chatPanel{width:auto;left:8px;right:8px;bottom:var(--mob-band1);max-height:46vh;z-index:16}
/* larger tap targets everywhere */
.btn,.small-btn,.fee-pill,.bld-btn,.mrt-btn{min-height:42px}
}
/* very narrow phones, stack the action buttons */
@media(max-width:400px){
:root{--mob-cards:54px}
.hud-actions{flex-direction:column;align-items:stretch;max-width:calc(100vw - 86px)}
.hud-actions .act{width:100%}
.hud-top .pool,.hud-top .sep:first-of-type{display:none}
.pcard{flex:0 0 132px}
.roll-btn{padding:12px 22px;font-size:13px}
.deed{width:158px}
}
/* landscape phones: very little vertical room, compress the stack */
@media(max-width:900px) and (max-height:520px){
:root{--mob-cards:50px;--mob-roll:52px;--mob-gap:6px}
.hud-left{overflow-x:auto}
.pcard .props{display:none}
.hud-right{top:auto;bottom:var(--mob-band1);transform:none;flex-direction:row;flex-wrap:wrap;
justify-content:flex-end;max-width:52vw}
.hud-roll{left:auto;right:auto;transform:translateX(-50%)}
.hud-actions,#deedWrap{bottom:var(--mob-band1)}
.deed{width:150px}
#turnTimer{top:8px}
#chatPanel{max-height:60vh}
}
/* ============================================================
GESTURES, the board is the only zoomable surface
Every menu, HUD and modal is a fixed UI layer: pinch-zoom and sideways
panning there are always accidents, never intent. The board keeps its own
pinch because it never used browser zoom in the first place, it reads raw
pointer events off the canvas and drives the camera radius itself.
============================================================ */
html,body{overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* `manipulation` keeps taps instant by dropping double-tap-to-zoom */
.screen,.modal,.modal-wrap,#hud,#chatPanel,#victoryScreen,#cine{touch-action:manipulation}
/* panels that scroll may scroll vertically, and only vertically */
.screen{overflow-x:hidden;overscroll-behavior:contain}
.modal > .body,.mng-list,.hud-log .scroll,#chatMsgs{overflow-x:hidden;overscroll-behavior:contain}
/* the one exception: raw pointer control, no browser gesture handling at all */
#c3d{touch-action:none;-ms-touch-action:none}
/* landing sub-note (wallet requirement) */
.land-note{margin-top:14px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.72);text-shadow:1px 1px 0 rgba(0,0,0,.55)}
/* auction: the sole-bidder Buy button reads as the primary action */
#aucBid10{font-weight:800}
.auc-row .btn:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:820px){.land-note{font-size:10.5px;text-align:center;padding:0 18px}}
/* Sole-bidder controls: two equal-width choices, buy or walk away */
.auc-solo{gap:10px}
.auc-solo .btn{flex:1 1 0;min-width:0;padding:14px 12px;font-size:13.5px}
.auc-solo .btn:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:820px){
.auc-solo{flex-direction:column}
.auc-solo .btn{flex:none;width:100%}
}
/* ============================================================
CREATE TABLE, currency dropdown + typed entry fee
============================================================ */
.f-select{
appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center
}
.f-select option{color:#1A1614;background:#fff;font-weight:700}
.fee-field{position:relative;display:flex;align-items:center}
.fee-field .f-input{padding-right:104px;font-family:'JetBrains Mono';font-weight:800}
/* hide the spinner arrows, the unit label sits where they would be */
.fee-field .f-input::-webkit-outer-spin-button,
.fee-field .f-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fee-field .f-input[type=number]{-moz-appearance:textfield}
.fee-unit{
position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
font-family:'JetBrains Mono';font-size:12px;font-weight:800;letter-spacing:.06em;
color:var(--ink,var(--txt));background:var(--cyellow,rgba(255,200,92,.18));
border:2px solid var(--ink,var(--line));border-radius:8px;padding:5px 9px;max-width:88px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center
}
.f-hint{
font-family:'JetBrains Mono';font-size:10.5px;line-height:1.5;
color:var(--mutink,var(--mut));margin-top:7px
}
.f-hint.err{color:var(--ccoralD,#C0392B);font-weight:700}
.f-input.invalid{border-color:var(--ccoralD,#C0392B)!important;
box-shadow:0 0 0 3px rgba(224,72,56,.22)!important}
/* ── CREATE GAME · currency picker + custom mint lookup ───── */
.cur-pills{display:flex;gap:8px;flex-wrap:wrap}
.cur-pill{flex:1;min-width:130px;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
background:rgba(140,160,220,.05);font-family:'JetBrains Mono';font-weight:700;font-size:13px;
color:var(--txt);cursor:pointer;transition:.14s}
.cur-pill:hover{border-color:var(--vio)}
.cur-pill.sel{border-color:var(--mint);color:var(--mint);background:rgba(44,230,160,.1);
box-shadow:0 0 20px rgba(44,230,160,.22)}
.mint-field{display:flex;gap:8px;align-items:stretch}
.mint-field .f-input{flex:1;font-family:'JetBrains Mono';font-size:12px}
.mint-field .btn{padding:0 18px;font-size:13px;white-space:nowrap}
/* Token picker. The native select carried the operating system's own look, so
the list is drawn by the page instead: same paper cards, same borders and
same fonts as every other control. */
.cur-tok{flex:1;min-width:130px;display:flex}
.cur-tok .cur-tok-btn{flex:1;min-width:0;display:inline-flex;align-items:center;
justify-content:center;gap:8px;line-height:1.2}
.cur-tok-btn .cur-caret{font-size:11px;opacity:.75;transition:transform .14s}
.cur-tok-btn[aria-expanded="true"] .cur-caret{transform:rotate(180deg)}
.cur-tok-btn.busy{opacity:.65;pointer-events:none}
.tok-menu{position:fixed;z-index:70;padding:7px;border-radius:12px;max-height:238px;overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:var(--paper,#FBF4E2);border:3px solid var(--ink,#1A1614);
box-shadow:0 4px 0 var(--ink2,#2C2420),4px 4px 0 rgba(0,0,0,.16),0 18px 40px rgba(0,0,0,.35);
animation:pop .16s}
.tok-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
padding:10px 12px;border-radius:9px;background:transparent;
border:2.5px solid transparent;color:var(--ink,#1A1614);
font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
transition:transform .1s,box-shadow .1s,background .12s}
.tok-opt+.tok-opt{margin-top:5px}
.tok-opt .tk-em{font-size:15px;line-height:1;flex:none}
.tok-opt:hover{background:#fff;border-color:var(--ink,#1A1614);
box-shadow:0 3px 0 var(--ink2,#2C2420);transform:translateY(-1px)}
.tok-opt:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink2,#2C2420)}
.tok-opt.sel{background:var(--cmint,#28B870);color:#fff;border-color:var(--ink,#1A1614);
box-shadow:0 3px 0 var(--cmintD,#0E7A4A)}
@media(max-width:820px){
.tok-menu{max-height:206px;padding:6px}
.tok-opt{padding:11px 11px;font-size:12.5px}
}
.token-card{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(44,230,160,.35);
background:rgba(44,230,160,.07);font-size:13px;line-height:1.55}
.token-card.err{border-color:rgba(255,110,110,.45);background:rgba(255,110,110,.08)}
.token-card .tk-top{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px}
.token-card .tk-top .tk-sym{color:var(--mint)}
.token-card .tk-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;
font-family:'JetBrains Mono';font-size:12px;opacity:.85}
.token-card .tk-row b{color:var(--amber)}
.token-card .tk-mint{font-family:'JetBrains Mono';font-size:11px;opacity:.6;word-break:break-all;margin-top:6px}
/* ── Wallet modal: mobile hand-off note ───────────────────── */
.wallet-hint{margin:0 0 12px;padding:10px 12px;border-radius:10px;
border:1px solid rgba(139,108,255,.35);background:rgba(139,108,255,.10);
font-size:12.5px;line-height:1.5;opacity:.9}
/* ============================================================
MOBILE DENSITY PASS
The desktop layout is generous on purpose; on a phone that generosity
costs the one thing there isn't any of, vertical space. Everything below
only trims padding, type and control sizes so more of each panel fits on
screen at once. Nothing here changes desktop.
Text inputs deliberately stay at 16px: anything smaller makes iOS Safari
zoom the whole page on focus, which is far more disruptive than the few
pixels saved.
============================================================ */
@media(max-width:820px){
/* ---- modal shell ---- */
.modal{max-height:92vh}
.modal .body{padding:14px 14px 16px}
.modal h3{font-size:16.5px;margin-bottom:2px}
.modal p.hint{font-size:12px;margin-bottom:12px}
.cfm-msg{font-size:13.5px;margin-bottom:14px}
.cfm-msg .cfm-lead{font-size:14.5px}
.gtitle{font-size:9.5px;padding:9px 0 8px;letter-spacing:.22em}
/* ---- forms ---- */
.f-label{font-size:9.5px;margin:11px 0 5px;letter-spacing:.13em}
.f-input{padding:10px 12px;font-size:16px;border-radius:10px}
.f-hint{font-size:10px;margin-top:5px}
.fee-field .f-input{padding-right:92px}
.fee-unit{font-size:11px;padding:4px 7px;max-width:78px;right:9px}
.f-select{padding-right:34px;background-position:right 11px center}
/* ---- buttons ---- */
.btn{padding:12px 18px;font-size:14px;border-radius:12px}
.btn-play{font-size:16px;padding:14px 30px;letter-spacing:.14em}
.small-btn{padding:8px 13px;font-size:12px}
.fee-pills{gap:6px}
.fee-pill{padding:9px 13px;font-size:12px;border-radius:10px}
/* ---- wallet picker: tighter rows, smaller badges ---- */
.wopt{padding:11px 12px;gap:10px;font-size:14px;margin-bottom:7px;border-radius:11px}
.wopt .ic{width:31px;height:31px;border-radius:9px;font-size:16px}
.wallet-hint{font-size:11.5px;padding:8px 10px;margin-bottom:10px}
/* ---- create table: currency picker + token card ---- */
.cur-pill{min-width:0;padding:10px 8px;font-size:12px;border-radius:10px}
.mint-field{gap:6px}
.mint-field .f-input{font-size:16px}
.mint-field .btn{padding:0 13px;font-size:12.5px}
.token-card{padding:10px 11px;font-size:12px;margin-top:9px}
.token-card .tk-top{font-size:13.5px;gap:7px}
.token-card .tk-row{font-size:11px;margin-top:4px}
.token-card .tk-mint{font-size:9.5px;margin-top:4px}
/* ---- transaction rows ---- */
.tx-row{font-size:12.5px;padding:7px 0}
.tx-total b{font-size:14.5px}
.spinner{width:34px;height:34px;margin:14px auto}
.tx-ok{font-size:36px;margin:8px 0}
/* ---- waiting lobby: two seats per row instead of one ---- */
#waiting{padding:14px 10px}
.wait-head{margin-bottom:14px;gap:10px}
.wait-head h2{font-size:20px}
.slots{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.slot{padding:10px 8px;min-height:88px;gap:5px;border-radius:13px}
.slot .se{font-size:24px}
.slot .sn{font-size:12.5px}
.slot .ss{font-size:9px;letter-spacing:.08em}
.tok{width:38px;height:38px;font-size:17px;border-radius:10px}
.pool-panel{padding:13px}
.pool-panel .pv{font-size:25px}
.pool-panel .pl{font-size:9.5px;letter-spacing:.13em}
.pool-panel .rw{font-size:12px;padding:5px 0;margin-top:7px}
/* ---- hub ---- */
.play-card{padding:14px;min-height:104px;border-radius:16px}
.play-card .big{font-size:17px;margin-bottom:3px}
.play-card .d{font-size:12px;line-height:1.4}
.play-card .glyph{font-size:58px;top:-8px}
.play-cards{gap:10px;margin-bottom:12px}
/* Tap targets stay comfortable even though everything shrank */
.btn,.small-btn,.fee-pill,.cur-pill,.wopt,.bld-btn,.mrt-btn{min-height:40px}
}
/* very narrow phones, squeeze the last few pixels */
@media(max-width:380px){
.modal .body{padding:12px}
.slots{gap:6px}
.slot{min-height:80px}
.wait-head h2{font-size:18px}
.cur-pill{font-size:11px;padding:9px 6px}
.btn{padding:11px 14px;font-size:13.5px}
}
.ca-btn{position:relative;display:inline-flex;align-items:center;gap:8px;
padding:10px 16px;border-radius:11px;cursor:pointer;
background:var(--paper,#FBF4E2);border:2.5px solid var(--ink,#1A1614);color:var(--ink,#1A1614);
font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.04em;
box-shadow:0 3px 0 var(--ink2,#2C2420);transition:transform .12s,box-shadow .12s,background .16s}
.ca-btn:hover{background:#F0FFF6;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink2,#2C2420)}
.ca-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2,#2C2420)}
.ca-btn .ca-ic{font-size:14px;line-height:1}
.ca-btn .ca-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
border-radius:inherit;background:var(--cmint,#28B870);color:#fff;font-weight:800;
opacity:0;pointer-events:none;transition:opacity .14s}
.ca-btn.copied .ca-ok{opacity:1}
.ca-btn.copied{background:var(--cmint,#28B870);border-color:var(--ink,#1A1614)}
.ca-row{margin-top:20px;display:flex;justify-content:center}
.ca-row .ca-btn{padding:12px 22px;font-size:13.5px}
.ca-btn-nav{flex:none}
/* in-game rail: inherits .tool-btn, so only the confirmation flash is new */
.tool-ca.copied{background:var(--cmint,#28B870);color:#fff}
/* pump.fun / X logo link buttons (replace the old "Copy CA" buttons) */
.social-row{display:flex;gap:10px;justify-content:center}
.social-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:11px;cursor:pointer;
background:var(--paper,#FBF4E2);border:2.5px solid var(--ink,#1A1614);
box-shadow:0 3px 0 var(--ink2,#2C2420);transition:transform .12s,box-shadow .12s,background .16s}
.social-btn:hover{background:#F0FFF6;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink2,#2C2420)}
.social-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2,#2C2420)}
.social-ic{width:22px;height:22px;display:block}
.social-btn-nav{width:34px;height:34px;border-radius:10px}
.social-btn-nav .social-ic{width:18px;height:18px}
.social-ic-sm{width:18px;height:18px;display:block}
/* ============================================================
GUEST MODE
============================================================ */
.btn-guest{background:var(--paper,#FBF4E2);color:var(--ink,#1A1614)}
.wopt-guest{margin-top:4px}
.wallet-foot{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.5;
color:var(--mutink,#706040);margin:8px 0 2px;text-align:center}
.guest-note{margin:14px 0 2px;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;
background:rgba(255,192,64,.18);border:2.5px solid var(--cyellowD,#C08010);color:var(--ink,#1A1614)}
.guest-note b{font-weight:800}
#hubWallet.is-guest{background:var(--cyellow,#FFC040)}
/* ============================================================
SHARED MODAL FOOTER
Desktop keeps exactly the spacing the inline styles used to give it;
on mobile (below) the same element becomes a pinned action bar.
============================================================ */
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1}
/* Create Game: two short fields sit side by side on mobile, stacked on desktop */
.cg-grid,.cg-cell{display:contents}
/* ============================================================
MOBILE LAYOUT PASS
Everything below runs only at ≤820px. The goals, in order:
1. a modal is a sheet with a fixed header, ONE scroll area and an
action bar that is always reachable without scrolling;
2. side-by-side wherever two short controls used to stack;
3. smaller type/padding only where legibility allows.
`dvh` tracks the collapsing browser chrome on phones, so the sheet never
hides its own buttons behind the address bar.
============================================================ */
@media(max-width:820px){
/* ---- sheet shell: header / scroll body / pinned actions ---- */
.modal{display:flex;flex-direction:column;overflow:hidden;
max-height:88dvh;padding-bottom:0}
.modal > .gtitle{flex:0 0 auto}
.modal > .body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;padding:12px 13px 0}
#settingsModal .modal .body{max-height:none}
.modal-actions{position:sticky;bottom:0;z-index:2;gap:8px;
margin:12px -13px 0;padding:10px 13px calc(10px + var(--mob-safe));
background:linear-gradient(180deg,rgba(239,227,188,0),var(--cream2,#EFE3BC) 26%);
border-top:2px dashed rgba(26,22,20,.22)}
/* a body with no action bar still needs its own bottom breathing room */
.modal > .body > :last-child:not(.modal-actions){margin-bottom:calc(14px + var(--mob-safe))}
/* ---- create game ---- */
.cg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
gap:10px;align-items:start}
.cg-cell{display:block;min-width:0}
.cg-cell .f-label{margin-top:11px!important}
.fp-lbl{display:none} /* "4 players" → "4" */
#cgMax{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#cgMax .fee-pill{min-width:0;padding:9px 4px;text-align:center}
#createModal .fee-pill{min-width:0}
.cur-pills{gap:6px}
.guest-note{font-size:11.5px;padding:9px 11px;margin:11px 0 0;border-radius:10px}
/* ---- landing ----
The hero used viewport-relative widths (86vw banner, 88vw CTA column) that
sat wider than the section's own padded content box, which pushed a few
pixels of horizontal scroll onto narrow phones. Everything is measured
against the container instead. */
.landing-clear{padding-top:calc(5vh + env(safe-area-inset-top,0px));overflow-x:hidden}
#landing{padding:20px 16px}
.land-inner.boxart{width:100%;max-width:420px}
.lp-banner{width:100%}
.cta-row{width:100%;max-width:100%;gap:9px;margin-top:22px}
.btn-guest{font-size:14px;padding:12px 24px}
.land-note{margin-top:11px}
.ca-row{margin-top:14px}
.ca-row .ca-btn{padding:10px 16px;font-size:12px}
/* ---- hub navbar: see the rebuild at the end of this file ---- */
.chip{padding:7px 11px;font-size:11px;gap:6px}
.chip-btn{padding:7px 10px}
.ca-btn-nav{padding:7px 11px;font-size:11px;gap:6px;border-radius:10px}
.ca-btn-nav .ca-lbl{display:none} /* icon-only in the navbar */
.ca-btn-nav .ca-ok{font-size:10px}
.ca-btn-nav .ca-ic{font-size:15px}
/* ---- wallet picker ---- */
.wallet-foot{font-size:10px;margin:6px 0 0}
/* ---- waiting lobby: header, seats, then a pinned start bar ---- */
#waiting{padding:calc(12px + env(safe-area-inset-top,0px)) 10px calc(84px + var(--mob-safe))}
.wait-head{gap:8px;margin-bottom:10px}
.wait-head .code{font-size:11px}
.pool-panel{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;
width:100%;min-width:0!important;padding:11px 13px}
.pool-panel .pv{grid-column:1;font-size:22px}
.pool-panel .pl{grid-column:2;margin-top:0}
.pool-panel .rw{grid-column:1/-1;padding:4px 0;margin-top:4px;font-size:11.5px}
.slots{grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.slot{min-height:78px;padding:9px 7px;gap:4px}
.wait-box > .gpanel{padding:12px!important;margin-bottom:12px!important}
.pl-row{gap:8px;margin-bottom:8px}
.pl-row input{padding:10px 12px;font-size:16px;border-radius:10px}
.pemoji{width:40px;height:40px;border-radius:11px}
.piece-row{gap:5px}
.tok{width:34px;height:34px;border-radius:9px}
.wait-actions{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;gap:8px;
padding:10px 12px calc(10px + var(--mob-safe));
background:linear-gradient(180deg,rgba(7,10,19,0),rgba(7,10,19,.92) 34%);
backdrop-filter:blur(8px)}
.wait-actions .btn{flex:1;min-width:0}
#startBtn{font-size:15px!important;padding:14px 16px!important}
/* ---- trade desk ----
Side-by-side columns were a mistake here: `1fr` is `minmax(auto,1fr)`, so
neither column could shrink below the min-content width of its card grid
and the whole modal scrolled sideways. The two sides stack instead, which
gives each card grid the FULL sheet width, 5 cards per row at 375px
against the 2 that fitted in a half-width column, so the sheet scrolls
the way a sheet should: vertically, never horizontally. */
.trade-grid{grid-template-columns:minmax(0,1fr);gap:7px}
.trade-col{padding:9px 10px;border-radius:13px;min-width:0}
.trade-col h4{font-size:11.5px;margin-bottom:8px;gap:5px}
.tswap{transform:rotate(90deg);font-size:18px;padding:0;margin:-3px auto}
.tcards{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;min-height:0}
.tcards .empty{font-size:10.5px;padding:16px 4px}
.tcard .tband{height:22px;font-size:13px}
.tcard .tname{font-size:8px;min-height:22px;padding:4px 2px 1px}
.tcard .tval{font-size:9px;padding-bottom:5px}
.tcard .tmort{top:24px;font-size:7px}
.cash-line{margin-top:8px;padding-top:8px;gap:6px}
.cash-line .lbl{font-size:9px;letter-spacing:.08em}
.cash-wrap{padding:0 8px}
.cash-wrap input{font-size:16px;padding:8px 4px}
.sel-partner{gap:6px;margin-bottom:10px}
.sel-partner button{padding:8px 11px;font-size:12px;gap:6px}
/* ---- incoming offer ---- */
.offer-grid{grid-template-columns:minmax(0,1fr);gap:7px;margin:2px 0 10px}
.offer-side{padding:9px 10px;gap:7px;border-radius:13px;min-width:0}
.offer-side .oh{font-size:11px;gap:6px}
.offer-side .oh .oe{font-size:15px}
.offer-side .oh small{font-size:8px;letter-spacing:.1em}
.ocards{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.onothing{font-size:10.5px;padding:12px 4px}
.ocash{font-size:12.5px;padding:7px}
.oswap{width:30px;height:30px;font-size:14px;transform:rotate(90deg);margin:-2px auto}
.offer-q{font-size:12px;margin-bottom:10px}
/* ---- build / mortgage: one line per property, never wrapped ---- */
.mng-list{max-height:none;gap:6px}
.bld-group{margin-bottom:9px;border-radius:12px}
.bld-ghead{padding:6px 10px;font-size:10px;letter-spacing:.1em}
.bld-row{flex-wrap:nowrap;gap:7px;padding:7px 10px}
.bld-name{font-size:11.5px}
.bld-dot{width:7px;height:7px}
.bld-dots{gap:2px}
.bld-hotel{font-size:9px;padding:1px 5px}
.bld-controls{gap:5px}
.bld-btn{width:32px;height:32px;min-height:32px;border-radius:8px;font-size:15px}
.bld-cost{font-size:9.5px;min-width:38px}
.mrt-section-h{font-size:9.5px;margin:10px 0 5px;letter-spacing:.14em}
.mrt-row{flex-wrap:nowrap;gap:8px;padding:7px 9px;margin-bottom:5px;border-radius:11px}
.mrt-sw{width:9px;height:22px}
.mrt-nm{font-size:11.5px}
.mrt-nm small{font-size:9px}
.mrt-btn{width:auto;min-height:34px;padding:7px 10px;font-size:10.5px;white-space:nowrap}
.mng-empty{padding:22px 12px;font-size:12.5px}
/* ---- auction ---- */
.auc-prop{padding:9px 11px;margin-bottom:9px;gap:9px}
.auc-prop .nm{font-size:13.5px}
.auc-prop .nm small{font-size:10px}
.auc-bid{font-size:34px;margin:4px 0 2px}
.auc-holder{font-size:11.5px;margin-bottom:8px}
.auc-turn{font-size:12.5px;margin-bottom:8px}
.auc-row{gap:7px}
.auc-row .btn{flex:1 1 calc(50% - 7px);padding:11px 8px;font-size:12.5px}
.auc-notice{font-size:11.5px;padding:8px 10px;margin:0 0 9px}
/* ---- settings: paired rows, no section-per-toggle stacking ---- */
.set-sec{margin-bottom:10px;padding:10px 11px;border-radius:12px}
.set-sec-h{font-size:10px;margin-bottom:8px;padding-bottom:6px;letter-spacing:.12em}
.set-row{gap:9px;min-height:32px}
.set-row + .set-row{margin-top:4px}
.set-lbl{font-size:12px}
.set-lbl small{font-size:9px;margin-top:1px}
.set-val{width:26px;font-size:11px}
.set-toggle{width:44px;height:26px}
.set-toggle i{width:18px;height:18px}
.set-toggle.on i{transform:translateX(18px)}
.set-range{height:8px}
.set-range::-webkit-slider-thumb{width:19px;height:19px}
#setCamPresets .fee-pill{padding:8px 6px;font-size:11px;min-height:36px}
/* ---- tile info / portfolio sheets ---- */
#tileInfoModal .modal,#playerPortModal .modal{width:100vw!important}
#playerPortBody{max-height:none!important;padding-right:0!important}
#playerPortBody > div[style*="grid-template-columns"]{
grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important;gap:7px!important}
/* ---- victory ---- */
.vic-card{padding:26px 18px 22px}
.vic-amount{font-size:16px;padding:8px 14px;margin-bottom:18px}
.vic-name{font-size:22px}
.vic-close{padding:13px;font-size:15px}
}
/* ---- very narrow phones: last squeeze ---- */
@media(max-width:380px){
.modal > .body{padding:10px 11px 0}
.modal-actions{margin:10px -11px 0;padding:9px 11px calc(9px + var(--mob-safe))}
.cg-grid{grid-template-columns:1fr 1fr}
.tcards{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
.ocards{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.auc-bid{font-size:30px}
.mrt-btn{padding:7px 8px;font-size:10px}
.bld-name,.mrt-nm{font-size:11px}
/* lobby: the section heading repeats what the panel already shows */
#waiting .sec-h{display:none}
.slot{min-height:70px;padding:7px 5px}
.slot .se{font-size:20px}
.tok{width:31px;height:31px}
.wait-box > .gpanel{padding:10px!important;margin-bottom:9px!important}
}
/* ---- landscape phones: the sheet must not swallow the whole screen ---- */
@media(max-width:900px) and (max-height:520px){
.modal{max-height:94dvh}
.modal > .body{padding-top:8px}
.cg-grid{grid-template-columns:1fr 1fr}
.set-sec{margin-bottom:8px;padding:8px 10px}
.auc-bid{font-size:26px;margin:0}
.wait-actions{padding:7px 10px calc(7px + var(--mob-safe))}
#waiting{padding-bottom:calc(66px + var(--mob-safe))}
}
/* ============================================================
RULEBOOK, the "how to play" leaflet
Typeset like a printed rules insert: numbered sections, a warm paper
surface and dashed rules between rows, consistent with the board pieces.
============================================================ */
.rules-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
padding:12px 14px;margin-bottom:4px;border-radius:12px;cursor:pointer;
background:var(--paper,#FBF4E2);border:2.5px solid var(--ink,#1A1614);color:var(--ink,#1A1614);
box-shadow:0 3px 0 var(--ink2,#2C2420);transition:transform .12s,box-shadow .12s,background .16s}
.rules-link:hover{background:#F0FFF6;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink2,#2C2420)}
.rules-link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2,#2C2420)}
.rules-link .rl-ic{font-size:20px;line-height:1;flex:none}
.rules-link .rl-tx{flex:1;min-width:0;font-family:'Sora';font-weight:800;font-size:13.5px}
.rules-link .rl-tx small{display:block;font-family:'JetBrains Mono',monospace;font-weight:400;
font-size:10px;letter-spacing:.04em;color:var(--mutink,#706040);margin-top:2px}
.rules-link .rl-ar{flex:none;color:var(--mutink,#706040);font-weight:800}
/* the sheet sits above Create Game, which stays open behind it */
#rulesModal{z-index:64}
/* Unlike the other modals this one is genuinely long, so it gets the same
header / scrolling body / pinned footer treatment on DESKTOP too, scoped
to .rules-modal so no other dialog changes. */
.rules-modal{width:min(560px,94vw);display:flex;flex-direction:column;
max-height:86vh;overflow:hidden}
.rules-modal > .gtitle{flex:0 0 auto}
.rules-modal > .body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
overscroll-behavior:contain}
.rules-modal .modal-actions{position:sticky;bottom:0;z-index:2;
margin:16px -24px -24px;padding:14px 24px;
background:linear-gradient(180deg,rgba(239,227,188,0),var(--cream2,#EFE3BC) 26%);
border-top:2px dashed rgba(26,22,20,.22)}
.rl-intro{font-size:13.5px;line-height:1.6;color:var(--ink,#1A1614);font-weight:600;
padding-bottom:14px;margin-bottom:2px;border-bottom:2px dashed rgba(26,22,20,.22)}
.rl-sec{margin-top:16px}
.rl-sec h4{display:flex;align-items:center;gap:9px;margin-bottom:8px;
font-family:'Sora';font-weight:800;font-size:13.5px;letter-spacing:.02em;color:var(--ink,#1A1614)}
.rl-sec h4 span{flex:none;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;
border-radius:7px;background:var(--cmint,#28B870);border:2px solid var(--ink,#1A1614);
color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;
text-shadow:1px 1px 0 var(--cmintD,#0E7A4A)}
.rl-sec p,.rl-sec li{font-size:12.5px;line-height:1.62;color:var(--ink,#1A1614)}
.rl-sec ul{list-style:none;padding:0;margin:0}
.rl-sec li{position:relative;padding-left:15px;margin-bottom:5px}
.rl-sec li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
border-radius:1px;background:var(--cmint,#28B870);border:1px solid var(--ink,#1A1614)}
.rl-sec li:last-child{margin-bottom:0}
.rl-sec b{font-weight:800}
.rl-tab{width:100%;border-collapse:collapse;margin-top:4px}
.rl-tab td{font-size:12.5px;line-height:1.5;padding:7px 0;vertical-align:top;
border-bottom:1.5px dashed rgba(26,22,20,.2);color:var(--ink,#1A1614)}
.rl-tab tr:last-child td{border-bottom:none}
.rl-tab td:first-child{width:44%;padding-right:12px;font-weight:700}
.rl-tab td:last-child{color:var(--mutink,#706040)}
.rl-rent td:last-child{width:34%;text-align:right;font-family:'JetBrains Mono',monospace;
font-weight:800;color:var(--cmintD,#0E7A4A)}
.rl-sec-prize{margin-top:18px;padding:13px 14px;border-radius:13px;
background:rgba(255,192,64,.16);border:2.5px solid var(--cyellowD,#C08010)}
.rl-sec-prize h4 span{background:transparent;border:none;text-shadow:none;font-size:15px;min-width:0;padding:0}
.rl-sec-prize li::before{background:var(--cyellowD,#C08010)}
.rl-foot{margin-top:16px;padding-top:12px;border-top:2px dashed rgba(26,22,20,.22);
font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.6;
color:var(--mutink,#706040)}
@media(max-width:820px){
.rules-link{padding:10px 12px;gap:9px;border-radius:11px;min-height:44px}
.rules-link .rl-tx{font-size:12.5px}
.rules-link .rl-tx small{font-size:9.5px}
.rules-modal{width:100vw!important}
.rl-intro{font-size:12.5px;padding-bottom:11px}
.rl-sec{margin-top:13px}
.rl-sec h4{font-size:12.5px;gap:8px;margin-bottom:6px}
.rl-sec h4 span{min-width:20px;height:20px;font-size:10px}
.rl-sec p,.rl-sec li,.rl-tab td{font-size:12px;line-height:1.55}
.rl-tab td{padding:6px 0}
.rl-tab td:first-child{width:46%;padding-right:9px}
.rl-sec-prize{padding:11px 12px;margin-top:15px}
.rl-foot{font-size:10px;margin-top:13px;padding-top:10px}
}
/* hub placement: same component as the one in the Create Game sheet, sized to
sit between the two play cards and the open-tables list */
.rules-hub{margin:0 0 18px;padding:14px 16px}
.rules-hub .rl-tx{font-size:15px}
.rules-hub .rl-ic{font-size:22px}
@media(max-width:820px){
.rules-hub{margin:0 0 12px;padding:11px 12px}
.rules-hub .rl-tx{font-size:13px}
.rules-hub .rl-ic{font-size:19px}
}
/* the short "CA" label only exists for the mobile navbar */
.ca-short{display:none}
@media(max-width:820px){
/* ---- mobile navbar ----
A phone navbar should carry actions, not branding: the logo repeats the
page you are already on and the online/offline chip duplicates what the
table list already tells you. Both go, leaving room for the wallet state
and the contract on a single row. */
.hub-logo{display:none}
#netChip{display:none}
/* with the logo gone the flexible spacer would shove everything against the
right edge and leave a dead gap; spread the controls instead */
.hub-top .sp{display:none}
.hub-top{justify-content:space-between}
.hide-mob{display:none} /* "Connect wallet" -> "Connect" */
.ca-btn-nav .ca-ic{display:none} /* the chain icon gives way to... */
.ca-btn-nav .ca-short{display:inline; /* ...the plain letters CA */
font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:.08em}
.ca-btn-nav{padding:7px 13px;font-size:12px;gap:0}
/* ---- piece picker ----
pieceImg() writes width/height inline, so shrinking the buttons for phones
left the artwork sticking out of its rounded box, 4px past the avatar,
1px past each token. Percentages are no good here: the buttons centre their
content with `place-items`, which leaves the grid row height indefinite, so
`height:100%` collapses to the image's intrinsic ratio and it grows TALLER
than the button. Explicit pixel sizes per breakpoint, sized to sit inside
the 2.5px border, are the only deterministic fix. !important is required to
beat the inline attribute; scoped to mobile so desktop is untouched. */
.tok img{width:26px!important;height:26px!important}
.pemoji img{width:30px!important;height:30px!important}
.tok{flex:none}
.piece-row{flex-wrap:wrap;justify-content:flex-start}
}
@media(max-width:380px){
.tok img{width:23px!important;height:23px!important}
.pemoji img{width:27px!important;height:27px!important}
}
/* ── AUTO START COUNTDOWN + TURN ORDER DRAW ───────────────── */
.auto-start{display:flex;align-items:center;justify-content:center;gap:12px;
margin:0 0 16px;padding:11px 18px;border-radius:16px;
border:1px solid var(--line);background:rgba(44,230,160,.07)}
.auto-start .as-lbl{font-size:11px;letter-spacing:.3px;line-height:1.3;color:var(--mut);
text-transform:uppercase;text-align:right}
.auto-start .as-num{font-size:30px;line-height:1;color:var(--mint);text-shadow:0 0 22px var(--mint-glow)}
.auto-start.hot .as-num{animation:blink .9s infinite}
.ord-clock{text-align:center;font-size:34px;color:var(--mint);margin:2px 0 16px}
.ord-list{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.ord-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;
border:1px solid var(--line);background:rgba(255,255,255,.04)}
.ord-row .on{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-row .od{font-family:'Sora';font-size:18px;min-width:34px;text-align:right;color:var(--mut)}
.ord-row.has .od{color:var(--mint)}
.ord-row.auto .od{color:var(--amber,#f6c453)}
.ord-row .oseat{font-size:11px;color:var(--mut);min-width:20px}
/* Il sorteggio e' a turni: chi deve tirare adesso e' evidenziato. */
.ord-row.now{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset,0 0 18px rgba(44,230,160,.18)}
.ord-row.now .on{font-weight:700}
.ord-row.now .od{color:var(--mint)}
.ord-clock.mine{color:var(--mint);text-shadow:0 0 18px rgba(44,230,160,.45)}
/* ── COUNTDOWN POPUP (on top of everything, fully opaque) ─── */
.cd-wrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
background:rgba(4,6,12,.92)}
.cd-wrap.open{display:flex}
.cd-box{width:min(420px,92vw);padding:34px 28px 30px;text-align:center;border-radius:22px;
background:var(--bg2);border:2px solid var(--mint);
box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 90px rgba(0,0,0,.75),0 0 60px var(--mint-glow);
animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.cd-ttl{font-size:15px;letter-spacing:2.4px;text-transform:uppercase;color:var(--mut)}
.cd-num{font-size:104px;line-height:1.02;margin:6px 0 2px;color:var(--mint);
text-shadow:0 0 34px var(--mint-glow);font-variant-numeric:tabular-nums}
.cd-sub{font-size:13.5px;color:var(--mut);margin-bottom:16px}
.cd-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cd-bar i{display:block;height:100%;width:100%;border-radius:99px;
background:linear-gradient(90deg,var(--mint),var(--vio));transition:width .25s linear}
.cd-wrap.urgent .cd-box{border-color:var(--coral,#ff6b6b)}
.cd-wrap.urgent .cd-num{color:var(--coral,#ff6b6b);text-shadow:0 0 34px rgba(255,107,107,.5);animation:blink .8s infinite}
/* The draw popup lives at the bottom and never blacks out the board: the real
dice are thrown behind it and have to stay visible. */
#orderModal{background:transparent;backdrop-filter:none;align-items:flex-end;justify-content:center}
#orderModal .modal{width:min(390px,94vw);margin-bottom:20px;
box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5)}
/* While a throw plays the panel moves to the top: the dice land in the lower
half of the view and nothing must sit in front of them. */
#orderModal.rolling{align-items:flex-start}
#orderModal.rolling .modal{width:min(340px,92vw);margin:18px 0 0}
#orderModal.rolling .ord-list,#orderModal.rolling .modal-actions,#orderModal.rolling #orderHint{display:none}
/* The countdown is meaningless while a result is on screen, and sitting right
next to the dice total it read as a second score. Hidden during the throw. */
#orderModal.rolling .ord-clock{display:none}
#orderModal .modal .body{padding:18px 20px 20px}
.ord-caster{display:flex;align-items:center;justify-content:center;gap:10px;
font-family:'Sora';font-size:16px;padding:4px 0 2px}
.ord-dice{display:none;align-items:center;justify-content:center;gap:10px;margin:6px 0 2px}
.ord-dice.show{display:flex}
.ord-dice .die-face{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
background:linear-gradient(160deg,#FDFBF3,#DCD4BC);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.ord-dice .die-face svg{width:30px;height:30px}
.ord-dice .die-face svg circle{fill:#1E1A10}
.ord-dice .tot{font-family:'Sora';font-size:26px;color:var(--mint);padding-left:8px}
#orderModal.rolling .ord-dice{display:flex}
/* ---- draw popup on phones ----
The global mobile rule turns every .modal into a full-width sheet pinned to
the bottom, which is exactly where the dice land: on a phone the panel sat
on top of the throw and only the die peeking out was visible. During the
throw the panel becomes a compact pill at the top instead, leaving the whole
lower half of the screen to the board. */
@media (max-width:760px){
#orderModal .modal{width:100vw!important}
#orderModal.rolling{align-items:flex-start}
#orderModal.rolling .modal{
position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px));bottom:auto!important;
left:50%!important;transform:translateX(-50%);
width:auto!important;max-width:92vw;min-width:210px;
border-radius:18px;margin:0;padding-bottom:0;
max-height:none;overflow:visible;animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
#orderModal.rolling .modal .body{padding:10px 16px 12px}
#orderModal.rolling .gtitle{display:none}
#orderModal.rolling .ord-caster{font-size:14px;padding:0 0 2px}
#orderModal.rolling .ord-dice{gap:8px;margin:4px 0 0}
#orderModal.rolling .ord-dice .die-face{width:38px;height:38px;border-radius:9px}
#orderModal.rolling .ord-dice .die-face svg{width:26px;height:26px}
#orderModal.rolling .ord-dice .tot{font-size:22px}
}
/* ── PROPERTY ACQUIRED CARD (everyone sees it) ────────────── */
#acq{position:fixed;inset:0;z-index:72;display:none;align-items:center;justify-content:center;perspective:1200px}
#acq.open{display:flex}
#acq .dim{position:absolute;inset:0;opacity:0;transition:opacity .35s;
background:radial-gradient(680px 520px at 50% 48%,rgba(14,20,36,.5),rgba(3,5,10,.9))}
#acq.open .dim{opacity:1}
.acq-card{position:relative;width:min(310px,80vw);max-height:90dvh;border-radius:20px;overflow:hidden;
background:linear-gradient(170deg,#FDFBF3,#E7DFC8);color:#1E1A10;
border:3px solid rgba(0,0,0,.55);box-shadow:0 26px 80px rgba(0,0,0,.75),0 0 70px rgba(212,175,94,.25);
opacity:0;transform:translateY(40px) scale(.86)}
#acq.open .acq-card{animation:acqIn .55s cubic-bezier(.16,1.2,.3,1) forwards}
@keyframes acqIn{0%{opacity:0;transform:translateY(40px) scale(.86) rotateX(18deg)}
100%{opacity:1;transform:none}}
.acq-card.out{animation:acqOut .3s ease forwards}
@keyframes acqOut{to{opacity:0;transform:translateY(-40px) scale(.92)}}
.acq-band{padding:11px 14px;text-align:center;background:#5A5142;color:#fff;
border-bottom:3px solid rgba(0,0,0,.5)}
.acq-band .st{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
/* `cover` riempiva il riquadro ritagliando l'illustrazione, e su schermi bassi
la scheda usciva dallo schermo. Ora l'immagine sta tutta dentro il suo
riquadro (`contain`), che si adatta all'altezza disponibile invece di
restare fisso a 172px. */
/* L'immagine non viene mai ritagliata, qualunque sia la sua forma: invece di
riempire un riquadro di dimensioni imposte, e' l'immagine a decidere quanto
spazio prendere entro i limiti che le si danno. Con `max-width` e
`max-height` su misure automatiche non esiste combinazione in cui il
contenuto esca dal riquadro, quindi non c'e' niente da tagliare. */
.acq-art{position:relative;background:#0d1018;display:flex;
align-items:center;justify-content:center;padding:10px;min-height:110px}
.acq-art img{display:block;width:auto;height:auto;
max-width:100%;max-height:min(34vh,220px);object-fit:contain}
.acq-art .acq-em{position:absolute;font-size:74px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
/* The emoji is never drawn over the artwork: it only appears when the tile
picture itself is unavailable, and the script un-hides it in that case. */
.acq-art img+.acq-em{display:none}
.acq-name{text-align:center;font-size:21px;padding:13px 14px 2px;line-height:1.15}
.acq-by{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px 0;
font-size:14px;color:#5A5142}
.acq-by img{width:26px;height:26px;border-radius:50%}
.acq-by b{color:#1E1A10}
.acq-price{text-align:center;font-size:30px;padding:6px 14px 18px;color:#1f7a4d}
/* ── JOIN CONFIRM DIALOG ──────────────────────────────────── */
.jn-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.jn-name{font-size:20px;line-height:1.15}
.jn-meta{font-size:12px;color:var(--mut);margin-top:4px}
.jn-fee{text-align:right;line-height:1.15}
.jn-fee b{font-family:'Sora';font-size:19px;color:var(--mint)}
.jn-fee small{display:block;font-size:10.5px;color:var(--mut);letter-spacing:1.4px;text-transform:uppercase}
.jn-warn{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.45;
border:1px solid rgba(246,196,83,.45);background:rgba(246,196,83,.1)}
.jn-warn.show{display:block}
#jnPieces{margin-top:8px}
#jnPieces .tok.taken{opacity:.28;pointer-events:none}
/* ═══════════════════════════════════════════════════════════
REFINEMENT LAYER
Appended last so it can settle details without touching the
rules above. Three principles held throughout:
· only transform and opacity are animated, never layout,
so nothing here can cost the 3D board a frame;
· every motion is under 320ms and eased, long enough to
read as intentional and short enough never to be waited on;
· everything degrades: reduced motion, no hover, notched
phones and keyboard users are all handled explicitly.
═══════════════════════════════════════════════════════════ */
:root{
/* One easing vocabulary for the whole app instead of ad-hoc curves */
--ease-out:cubic-bezier(.22,1,.36,1); /* entrances, arrivals */
--ease-in:cubic-bezier(.5,0,.75,0); /* exits, dismissals */
--ease-spring:cubic-bezier(.2,1.3,.4,1); /* things that feel alive */
--ring:0 0 0 3px rgba(44,230,160,.5); /* keyboard focus ring */
}
/* ── Input hygiene ──────────────────────────────────────────
Kills the grey flash Android paints over every tap, and stops
iOS from selecting labels when a player taps quickly. */
button,.btn,.tool-btn,.game-row,.wopt,.tok,.fee-pill,.pcard,.slot,.play-card,.chip,.code-copy{
-webkit-tap-highlight-color:transparent;
}
button,.btn,.play-card,.game-row .nm,.gtitle,.sec-h,.stat,.pcard,.slot{
-webkit-user-select:none;user-select:none;
}
/* Anything a player may want to keep stays selectable. */
.code-copy,.cfm-msg,.hud-log .scroll,input,textarea{-webkit-user-select:text;user-select:text}
/* ── Keyboard focus ─────────────────────────────────────────
Visible only for keyboard users, never on mouse or touch. */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)!important;border-radius:12px}
.btn:focus-visible,.tool-btn:focus-visible,.wopt:focus-visible,
.game-row button:focus-visible,.code-copy:focus-visible{
box-shadow:var(--ring),0 0 26px rgba(44,230,160,.28)!important;
}
/* ── Scrollbars ─────────────────────────────────────────────
The default chrome scrollbar broke the finish of every panel. */
*{scrollbar-width:thin;scrollbar-color:rgba(140,160,220,.32) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,160,220,.26);border-radius:99px;
border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,160,220,.45);background-clip:content-box}
/* ── NOTIFICATIONS ──────────────────────────────────────────
A real stack: messages queue downwards instead of landing on
top of each other, and each one carries its own tone. */
.toast-host{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;
transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;
gap:9px;align-items:center;pointer-events:none;width:max-content;max-width:min(440px,92vw)}
/* During a match the round bar owns the top centre, so the stack drops below it. */
.toast-host.in-game{top:calc(74px + env(safe-area-inset-top,0px))}
/* The old rule pinned the toast itself to the viewport. Inside the stack it is
a normal flow item again, so those offsets have to be undone explicitly. */
.toast{position:relative;top:auto;left:auto;right:auto;bottom:auto;
display:flex;align-items:center;gap:11px;
padding:12px 18px 12px 17px;border-radius:14px;overflow:hidden;
pointer-events:auto;cursor:pointer;max-width:100%;
font-weight:700;font-size:13.5px;line-height:1.35;
color:var(--ink);background:linear-gradient(150deg,var(--cream),var(--cream2));
border:3px solid var(--ink);
box-shadow:4px 4px 0 var(--ink2),0 12px 30px rgba(0,0,0,.28);
opacity:0;transform:translateY(-14px) scale(.96);
transition:opacity .24s var(--ease-out),transform .24s var(--ease-out);
animation:none}
.toast.in{opacity:1;transform:translateY(0) scale(1)}
.toast.out{opacity:0;transform:translateY(-10px) scale(.97);
transition:opacity .2s var(--ease-in),transform .2s var(--ease-in)}
.toast .t-tx{flex:1;min-width:0;overflow-wrap:anywhere}
/* Round badge instead of a raw emoji: consistent size, consistent baseline. */
.toast .t-ic{flex:none;width:21px;height:21px;border-radius:50%;display:grid;
place-items:center;font-family:'Sora';font-size:12px;font-weight:800;
color:#fff;background:var(--cmint);border:2px solid var(--ink);
text-shadow:1px 1px 0 rgba(0,0,0,.2)}
.toast.t-err .t-ic{background:var(--ccoral)}
.toast.t-warn .t-ic{background:var(--cyellow);color:var(--ink);text-shadow:none}
.toast.t-info .t-ic{background:var(--cblue)}
/* A coloured spine on the left, readable at a glance before the words are. */
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
background:var(--cmint)}
.toast.t-err::before{background:var(--ccoral)}
.toast.t-warn::before{background:var(--cyellow)}
.toast.t-info::before{background:var(--cblue)}
/* A quiet time bar: tells you it will go away without demanding attention. */
.toast .t-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;
transform-origin:left;background:var(--ink);opacity:.22;
animation:tbar linear forwards}
@keyframes tbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.pulse{animation:tpulse .34s var(--ease-spring)}
@keyframes tpulse{40%{transform:translateY(0) scale(1.045)}}
.toast:hover{filter:brightness(1.07)}
.toast:active{transform:translateY(0) scale(.985)}
@media (max-width:760px){
.toast-host{width:calc(100vw - 24px);max-width:none;gap:8px}
.toast{width:100%;font-size:13px;padding:11px 15px 11px 12px;border-radius:13px}
}
/* ── MODALS ─────────────────────────────────────────────────
The panel now leaves the way it arrived instead of blinking out. */
.modal-wrap{opacity:0;transition:opacity .2s var(--ease-out)}
.modal-wrap.open{opacity:1}
.modal-wrap.closing{opacity:0;transition:opacity .18s var(--ease-in);pointer-events:none}
.modal-wrap.closing .modal{animation:modalOut .19s var(--ease-in) forwards}
@keyframes modalOut{to{transform:scale(.94) translateY(10px);opacity:0}}
@media (max-width:820px){
/* Sheets slide back down rather than scaling away. */
.modal-wrap.closing .modal{animation:sheetDown .21s var(--ease-in) forwards}
@keyframes sheetDown{to{transform:translateY(100%)}}
}
/* A grab handle reads as "this sheet can be dismissed", the standard cue. */
@media (max-width:820px){
.modal-wrap:not(#orderModal) .modal::before{
content:"";display:block;width:38px;height:4px;
margin:9px auto 1px;border-radius:99px;background:rgba(26,22,20,.26)}
}
/* ── CONFIRM DIALOG ─────────────────────────────────────────
Actions read left to right as cancel then commit, the primary
one carries the weight. */
#confirmModal .modal-actions{gap:10px}
#confirmModal .btn{padding:13px 20px;font-size:14px}
#confirmModal .cfm-lead{margin-bottom:2px}
/* ── BUTTONS & MICRO-INTERACTIONS ───────────────────────────
Press states that acknowledge the tap within one frame. */
.btn{transition:transform .16s var(--ease-spring),box-shadow .2s var(--ease-out),filter .16s}
.btn:active:not(:disabled){transform:translateY(3px) scale(.985)}
.small-btn{transition:transform .14s var(--ease-spring),box-shadow .16s var(--ease-out)}
.tool-btn{transition:transform .16s var(--ease-out),background .16s,box-shadow .16s}
.wopt{transition:transform .16s var(--ease-out),background .16s,border-color .16s,box-shadow .16s}
.wopt:active{transform:scale(.985)}
.chip,.bal-chip,.wallet-chip{transition:transform .16s var(--ease-out),box-shadow .16s}
.tok,.fee-pill{transition:transform .15s var(--ease-spring),box-shadow .15s,background .15s}
.tok:active,.fee-pill:active{transform:scale(.94)}
/* The selected token gets one confirming bounce, not a permanent animation. */
.tok.sel,.fee-pill.sel{animation:pickPop .26s var(--ease-spring)}
@keyframes pickPop{40%{transform:scale(1.09)}}
/* ── TABLE LIST ─────────────────────────────────────────────*/
.game-row{animation:rowIn .34s var(--ease-out) backwards;
transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
.game-row:active{transform:translateY(0) scale(.995)}
/* Skeletons keep the list's shape while it loads, so nothing jumps. */
.sk-row{height:66px;border-radius:13px;margin-bottom:10px;
border:3px solid rgba(26,22,20,.18);background:rgba(251,244,226,.5);
position:relative;overflow:hidden}
.sk-row::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
animation:shimmer 1.25s infinite}
.sk-row:nth-child(2)::after{animation-delay:.14s}
.sk-row:nth-child(3)::after{animation-delay:.28s}
@keyframes shimmer{to{transform:translateX(100%)}}
.empty-state{text-align:center;padding:26px 16px 30px;animation:rowIn .4s var(--ease-out)}
.empty-state .es-glyph{font-size:40px;line-height:1;margin-bottom:10px;
animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-7px) rotate(-6deg)}}
.empty-state .es-msg{font-family:'Sora';font-size:16px;color:#fff;
text-shadow:1.5px 1.5px 0 var(--ink)}
.empty-state .es-sub{font-size:12.5px;margin-top:5px;color:rgba(255,255,255,.82);
text-shadow:1px 1px 0 rgba(26,22,20,.5)}
/* While offline the glyph is a spinner instead of a die: honest about waiting. */
.empty-state.waiting .es-glyph{width:26px;height:26px;margin:6px auto 12px;
border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── COPYABLE TABLE CODE ────────────────────────────────────*/
.code-copy{display:inline-flex;align-items:center;gap:7px;font:inherit;
color:inherit;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);
padding:3px 10px;border-radius:9px;font-weight:800;letter-spacing:.04em;
transition:transform .15s var(--ease-spring),background .15s,border-color .15s}
.code-copy:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-1px)}
.code-copy:active{transform:translateY(1px) scale(.97)}
.code-copy .cc-ic{width:13px;height:13px;flex:none;opacity:.75;
border:2px solid currentColor;border-radius:3px;position:relative}
.code-copy .cc-ic::after{content:"";position:absolute;left:-4px;top:-4px;
width:9px;height:9px;border:2px solid currentColor;border-right:0;border-bottom:0;
border-radius:2px 0 0 0}
/* The tick replaces the icon on success: confirmation without a layout shift. */
.code-copy.copied{background:var(--cmint,#2CE6A0);border-color:var(--ink,#1A1614);
color:var(--ink,#04231A);animation:pickPop .3s var(--ease-spring)}
.code-copy.copied .cc-ic{border:0;transform:rotate(45deg) translate(-1px,-2px);opacity:1}
.code-copy.copied .cc-ic::after{left:2px;top:-2px;width:5px;height:10px;
border:solid currentColor;border-width:0 2.5px 2.5px 0;border-radius:0}
/* ── SCREEN TRANSITIONS ─────────────────────────────────────
Screens fade and lift in rather than cutting, which makes the
whole app feel like one surface instead of separate pages. */
.screen.active{animation:screenIn .34s var(--ease-out)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}}
/* The board must never be animated: it is a live 3D canvas. */
#c3d,#fx{animation:none!important}
/* ── HUD POLISH ─────────────────────────────────────────────*/
.hud-top,.pcard,.tool-btn,.roll-plate{will-change:transform}
.pcard{transition:transform .22s var(--ease-spring),box-shadow .22s var(--ease-out),
border-color .22s}
/* The active player's card breathes softly, so a glance is enough to find
whose turn it is. The halo is a separate layer animating opacity only:
animating the card's own box-shadow would repaint it 60 times a second
over the live board. */
.pcard.active::after{content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;box-shadow:inset 0 0 22px -2px var(--pc);opacity:0;
animation:cardGlow 2.6s ease-in-out infinite}
@keyframes cardGlow{50%{opacity:.8}}
#turnTimer{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
/* The last ten seconds are felt, not just read. */
#turnTimer.urgent .ttnum{animation:blink .7s infinite}
/* ── TOUCH TARGETS ──────────────────────────────────────────
Nothing interactive falls below the 44px the platforms ask for. */
@media (max-width:820px) and (pointer:coarse){
.btn{min-height:46px}
.small-btn,.tok,.fee-pill,.code-copy{min-height:38px}
.tool-btn{min-height:44px}
.wopt{min-height:52px}
/* Momentum scrolling that stops at the panel edge instead of dragging
the page behind it. */
.modal .body,.mng-list,.hud-log .scroll,#chatMsgs,.screen{
-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
/* ── MOTION PREFERENCES ─────────────────────────────────────
The blanket rule earlier in this file kills animation entirely;
these keep the app usable in that mode by making state changes
instantaneous rather than invisible. */
@media (prefers-reduced-motion:reduce){
.toast{opacity:1;transform:none}
.toast .t-bar{display:none}
.modal-wrap{opacity:1}
.modal-wrap.closing{opacity:0}
.game-row,.empty-state,.screen.active{opacity:1;transform:none}
}
/* ── BUSY BUTTONS ───────────────────────────────────────────
A disabled button with a changed label gives no sense that
anything is happening. A spinner in front of the text says
the app is working, and the wallet popup is on its way. */
.btn.busy{position:relative;padding-left:44px;opacity:.85;cursor:progress}
.btn.busy::before{content:"";position:absolute;left:18px;top:50%;
width:15px;height:15px;margin-top:-8px;border-radius:50%;
border:2.5px solid rgba(255,255,255,.32);border-top-color:#fff;
animation:spin .7s linear infinite}
.btn.busy::after{display:none} /* no shine sweep while working */
.btn:disabled.busy{opacity:.85} /* stays legible, unlike a plain disable */
/* ── HUB HEADER ─────────────────────────────────────────────
The bar lifts off the page as soon as the content scrolls
under it, the standard cue that it is pinned. */
.hub-top{transition:box-shadow .22s var(--ease-out)}
/* ── LINK & ICON BUTTONS ────────────────────────────────────*/
.social-btn,.tool-btn,.small-btn{transition:transform .16s var(--ease-out),
box-shadow .16s var(--ease-out),background .16s,border-color .16s}
.social-btn:active{transform:scale(.93)}
/* ── SEAT SLOTS ─────────────────────────────────────────────
A seat being filled is the moment the lobby comes alive; it
deserves more than an instant repaint. */
.slot{transition:transform .24s var(--ease-spring),box-shadow .24s var(--ease-out),
background .24s,border-color .24s}
.slot.filled{animation:seatIn .34s var(--ease-spring)}
@keyframes seatIn{from{transform:scale(.9);opacity:.3}}
/* ── DIALOG ACTIONS ON NARROW PHONES ────────────────────────
Side by side under about 360px the labels start truncating,
so they stack with the primary action on top, under the thumb. */
@media (max-width:359px){
#confirmModal .modal-actions{flex-direction:column-reverse;gap:8px}
#confirmModal .modal-actions .btn{width:100%}
}
/* ── PRINT / HIGH CONTRAST SAFETY ───────────────────────────
Forced-colors mode strips backgrounds; borders keep the
layout legible instead of collapsing into one flat block. */
@media (forced-colors:active){
.toast,.modal,.game-row,.pcard,.btn{border:1px solid currentColor}
.toast .t-bar,.btn::after{display:none}
}
/* ═══════════════════════════════════════════════════════════
MOBILE NAVBAR
Rebuilt from scratch. The old one wrapped onto two lines the
moment a wallet address appeared, so the bar changed height
depending on state and the content below jumped with it.
The new one is a fixed 56px row that never wraps and never
scrolls sideways, holding only the two things worth a glance
on a phone: who you are, and whether you are connected.
Everything else moves into a panel behind one button.
Desktop is untouched by design: .hub-more is display:contents
above the breakpoint, which means the wrapper contributes
nothing to layout and the bar renders exactly as before.
═══════════════════════════════════════════════════════════ */
.hub-more,.hub-id{display:contents}
.hub-burger{display:none}
@media (max-width:820px){
.hub-top{
display:grid; /* three fixed zones, no wrapping */
grid-template-columns:auto 1fr auto;
align-items:center;gap:8px;
flex-wrap:nowrap;overflow:visible;
height:calc(56px + env(safe-area-inset-top,0px));
padding:env(safe-area-inset-top,0px) 12px 0;
background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 78%,rgba(248,240,212,.92) 100%);
border-bottom:3px solid var(--ink);
box-shadow:0 3px 0 var(--ink),0 6px 16px rgba(0,0,0,.18)}
/* ── brand ── the mark always shows, the wordmark yields first
so a long wallet address never pushes the bar out of shape. */
.hub-top .hub-logo{min-width:0;gap:9px;font-size:15px;letter-spacing:.02em}
.hub-top
.hub-top .hub-logo .hl-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-top .sp{display:none} /* the grid does the spacing now */
/* ── connection ── the word is redundant next to a coloured dot,
and the dot itself moves onto the menu button. */
.hub-top #netChip{display:none}
.hub-top #hubBal{display:none!important}
/* ── identity ── the one chip that stays, right-aligned with the
menu button. Truncates from the middle of the address rather
than shrinking the font until it is unreadable. */
.hub-top .hub-id{
display:flex;grid-column:2;justify-self:end;align-items:center;gap:6px;
min-width:0;max-width:100%}
.hub-top #hubWallet,.hub-top #hubConnect{
min-width:0;max-width:min(46vw,210px);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
padding:8px 13px;font-size:11.5px;height:36px;
display:flex;align-items:center;flex:0 1 auto}
.hub-top #hubConnect{background:var(--cmint);color:#fff;border-color:var(--ink);
box-shadow:0 3px 0 var(--cmintD),2px 2px 0 var(--ink2);font-weight:800}
.hub-top #hubConnect:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cmintD)}
/* ── menu button ── */
.hub-burger{
display:flex;align-items:center;justify-content:center;position:relative;
grid-column:3;width:40px;height:38px;flex:none;padding:0;
border-radius:11px;background:var(--paper);border:2.5px solid var(--ink);
box-shadow:2px 2px 0 var(--ink2);
transition:transform .16s var(--ease-spring),box-shadow .16s var(--ease-out),
background .16s}
.hub-burger:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink2)}
.hub-burger.open{background:var(--cyellow);box-shadow:1px 1px 0 var(--ink2)}
.hb-bars{display:block;width:17px;height:12px;position:relative}
.hb-bars i{position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;
background:var(--ink);
transition:transform .24s var(--ease-spring),opacity .16s linear}
.hb-bars i:nth-child(1){top:0}
.hb-bars i:nth-child(2){top:4.75px}
.hb-bars i:nth-child(3){top:9.5px}
/* Morphs into a close cross, so the button says what it will do next. */
.hub-burger.open .hb-bars i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.hub-burger.open .hb-bars i:nth-child(2){opacity:0;transform:scaleX(.4)}
.hub-burger.open .hb-bars i:nth-child(3){transform:translateY(-4.75px) rotate(-45deg)}
/* Status dot: grey offline, green and breathing when connected. */
.hb-dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;
border-radius:50%;background:#9AA0AD;border:2px solid var(--ink)}
.hb-dot.on{background:var(--cmint)}
.hb-dot.on::after{content:"";position:absolute;inset:-2px;border-radius:50%;
border:2px solid var(--cmint);opacity:0;animation:dotPing 2.2s ease-out infinite}
@keyframes dotPing{0%{opacity:.75;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.9)}}
/* ── the panel ──
Anchored under the bar on the right, the direction it opens from.
Scaling from the top-right corner is what makes it read as coming
out of the button rather than appearing from nowhere. */
.hub-more{
display:flex;flex-direction:column;gap:2px;
position:absolute;top:calc(100% - 4px);right:12px;z-index:40;
min-width:196px;padding:7px;
background:linear-gradient(150deg,var(--cream),var(--cream2));
border:3px solid var(--ink);border-radius:15px;
box-shadow:5px 5px 0 var(--ink2),0 16px 40px rgba(0,0,0,.3);
transform-origin:top right;
opacity:0;transform:scale(.9) translateY(-8px);
pointer-events:none;visibility:hidden;
transition:opacity .18s var(--ease-out),transform .2s var(--ease-spring),
visibility 0s linear .2s}
.hub-more.open{opacity:1;transform:scale(1) translateY(0);
pointer-events:auto;visibility:visible;transition-delay:0s}
/* Rows inside the panel: full width, label beside the icon, generous
enough to hit with a thumb without aiming. */
.hub-more > *{
display:flex!important;align-items:center;gap:11px;
width:100%!important;height:auto!important;
min-height:44px;padding:9px 12px;margin:0;
border:0!important;border-radius:10px;background:transparent!important;
box-shadow:none!important;color:var(--ink);
font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
text-align:left;justify-content:flex-start;
transition:background .14s linear,transform .14s var(--ease-out)}
.hub-more > *:active{background:rgba(26,22,20,.09)!important;transform:scale(.985)}
.hub-more .social-ic{width:19px;height:19px;flex:none}
.hub-more .hm-lbl{flex:1}
/* A hairline between the links and Settings, grouping like with like. */
.hub-more > *:last-child{position:relative;margin-top:5px}
.hub-more > *:last-child::before{content:"";position:absolute;top:-3px;left:8px;right:8px;
height:2px;background:rgba(26,22,20,.14);border-radius:2px}
}
/* The labels exist only for the panel; in the desktop bar the icons stand
alone exactly as they did before. */
@media (min-width:821px){ .hm-lbl{display:none} }
/* Reduced motion: the panel appears and disappears without the spring, and
the status dot stops pinging. It still opens and closes normally. */
@media (prefers-reduced-motion:reduce){
.hub-more{transform:none}
.hub-more.open{transform:none}
.hb-dot.on::after{display:none}
}
/* ============================================================
SELETTORE PERSONAGGIO, carousel con protagonista
------------------------------------------------------------
Stessa lingua visiva del resto del gioco: carta calda, bordo
inchiostro spesso, ombra piena sotto invece che sfocata.
--pk-accent lo imposta il JS con il colore del personaggio.
============================================================ */
.pk{display:flex;flex-direction:column;gap:12px;--pk-accent:var(--cmint)}
/* ---- protagonista ---- */
.pk-hero{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;
background:var(--paper);
background:linear-gradient(135deg,color-mix(in srgb,var(--pk-accent) 16%,var(--paper)),var(--paper) 68%);
border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink2),3px 3px 0 rgba(0,0,0,.12);
position:relative;overflow:hidden;transition:box-shadow .2s}
/* Barra di accento: l'unico punto in cui il colore del personaggio si vede pieno. */
.pk-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--pk-accent)}
.pk-art{width:132px;height:132px;flex:none;display:grid;place-items:center;margin-left:4px}
.pk-art img{display:block;width:100%!important;height:100%!important;
max-width:100%!important;max-height:100%!important;object-fit:contain;
filter:drop-shadow(0 6px 10px rgba(26,22,20,.28))}
@keyframes pkSwap{
0%{opacity:0;transform:translateX(26px) scale(.82) rotate(4deg)}
100%{opacity:1;transform:none}
}
.pk-art.swap{animation:pkSwap .36s var(--ease-spring)}
.pk-meta{min-width:0;flex:1}
.pk-kicker{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mutink)}
.pk-name{font-size:27px;font-weight:800;color:var(--ink);line-height:1.1;margin:3px 0 8px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
background:var(--cmint);color:#08301E;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink2)}
.pk-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pk-state.busy{background:var(--ccoral);color:#3A0C0C}
/* ---- striscia orizzontale ---- */
.pk-strip-wrap{display:flex;align-items:center;gap:8px}
.pk-nav{flex:none;width:34px;height:44px;border-radius:11px;background:var(--paper);
border:2.5px solid var(--ink);color:var(--ink);font-size:20px;font-weight:800;line-height:1;
box-shadow:0 3px 0 var(--ink2);transition:transform .14s,box-shadow .14s}
.pk-nav:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink2)}
.pk-nav:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink2)}
.pk-strip{flex:1;min-width:0;display:flex;gap:9px;overflow-x:auto;padding:7px 2px 14px;
scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
outline:none}
.pk-strip::-webkit-scrollbar{display:none}
.pk-strip:focus-visible{box-shadow:0 0 0 3px rgba(40,184,112,.4);border-radius:12px}
.pk-thumb{flex:0 0 auto;width:78px;scroll-snap-align:center;display:flex;flex-direction:column;
align-items:center;gap:5px;padding:8px 5px 7px;border-radius:12px;background:#fff;
border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink2);position:relative;
overflow:hidden; /* rete di sicurezza: niente puo' uscire dalla casella */
transition:transform .2s var(--ease-spring),box-shadow .2s,background .2s,opacity .2s}
/* Contenitore dell'artwork. Misure in pixel, non in percentuale: l'immagine sta
dentro uno , e una altezza percentuale su un elemento sostituito dentro
un contenitore inline non ha un riferimento affidabile da cui calcolarsi, per
cui l'immagine tornava alla propria altezza naturale e sbordava. */
.pk-thumb .pk-tart{flex:none;width:var(--pk-tsz,34px);height:var(--pk-tsz,34px);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.pk-thumb .pk-tart img{display:block;
width:var(--pk-tsz,34px)!important;height:var(--pk-tsz,34px)!important;
max-width:var(--pk-tsz,34px)!important;max-height:var(--pk-tsz,34px)!important;
object-fit:contain;padding:0!important;border-radius:4px}
.pk-tname{flex:none;width:100%;text-align:center;line-height:1.15;
font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-thumb:hover:not(.is-taken):not(.is-sel){transform:translateY(-3px);box-shadow:0 6px 0 var(--ink2)}
.pk-thumb.is-sel{transform:translateY(-5px);background:color-mix(in srgb,var(--pk-accent) 26%,#fff);
box-shadow:0 8px 0 var(--ink2),0 0 0 3px var(--pk-accent)}
.pk-thumb.is-sel .pk-tname{color:var(--ink)}
.pk-thumb.is-taken{opacity:.4;filter:grayscale(1);cursor:not-allowed;
transform:none;box-shadow:0 3px 0 var(--ink2)}
.pk-lock{display:none;position:absolute;top:4px;right:5px;font-size:11px;font-weight:800;
color:var(--ccoralD)}
.pk-thumb.is-taken .pk-lock{display:block}
/* ---- variante compatta: piu' selettori nella stessa schermata ---- */
.pk-compact{gap:9px}
.pk-compact .pk-hero{padding:9px 12px;gap:11px;box-shadow:0 4px 0 var(--ink2)}
.pk-compact .pk-art{width:62px;height:62px}
.pk-compact .pk-name{font-size:17px;margin:2px 0 5px}
.pk-compact .pk-kicker{font-size:9px}
.pk-compact .pk-state{font-size:9.5px;padding:3px 8px}
.pk-compact .pk-thumb{width:62px;padding:6px 4px 5px;--pk-tsz:28px}
.pk-compact .pk-tname{font-size:8.5px}
.pk-compact .pk-nav{height:38px;width:28px;font-size:17px}
/* ---- schermi stretti ---- */
@media(max-width:820px){
.pk-hero{padding:11px 12px;gap:12px}
.pk-art{width:96px;height:96px}
.pk-name{font-size:21px;margin:2px 0 7px}
/* Su touch si scorre con il dito: le frecce rubano solo larghezza. */
/* Le frecce restano: su schermi stretti la striscia esce dal bordo e senza
un comando visibile non e' ovvio che ci siano altri personaggi. */
.pk-nav{width:28px;height:40px;font-size:17px;border-radius:10px}
.pk-thumb{width:70px;--pk-tsz:32px}
.pk-compact .pk-art{width:54px;height:54px}
.pk-compact .pk-name{font-size:15px}
}
@media(max-width:380px){
.pk-art{width:78px;height:78px}
.pk-name{font-size:18px}
.pk-nav{width:24px;height:36px;font-size:15px}
.pk-thumb{width:64px;padding:7px 4px 6px;--pk-tsz:30px}
.pk-tname{font-size:8.5px;letter-spacing:.02em}
}
/* Dentro una .pl-row il selettore prende una riga tutta sua: accanto al nome
resterebbe schiacciato sotto i 200px. */
.pl-row .pk{flex:1 0 100%}
/* ============================================================
INVITO AL TAVOLO
Stessa lingua del codice tavolo che sta subito sopra: carta,
bordo inchiostro, ombra piena.
============================================================ */
.invite-row{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.btn-invite{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:11px;
background:var(--cyellow);color:var(--ink);border:2.5px solid var(--ink);
box-shadow:0 3px 0 var(--cyellowD),2px 2px 0 rgba(0,0,0,.12);
font-family:'Sora',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;
transition:transform .14s,box-shadow .14s,background .18s}
.btn-invite:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--cyellowD),2px 2px 0 rgba(0,0,0,.12)}
.btn-invite:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cyellowD)}
.btn-invite.done{background:var(--cmint);box-shadow:0 3px 0 var(--cmintD),2px 2px 0 rgba(0,0,0,.12)}
.btn-invite .iv-ic{font-size:15px;line-height:1}
.invite-hint{margin-top:9px;font-size:11px;font-weight:700;color:var(--mutink);max-width:340px;line-height:1.35}
@media(max-width:820px){
.invite-row{width:100%}
.btn-invite{width:100%;justify-content:center;padding:12px 14px;font-size:13.5px}
.invite-hint{font-size:10.5px;max-width:none}
}
/* ============================================================
INSUFFICIENT FUNDS, one modal for every payment the player
cannot cover: rent, tax, bail, cards, anything added later.
============================================================ */
.debt-lead{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink);margin:2px 0 14px}
.debt-lead b{color:var(--ccoralD,#B83228)}
.debt-figs{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;
background:var(--paper);border:2.5px solid var(--ink);margin-bottom:12px}
.debt-fig{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:700}
.debt-fig span{color:var(--mutink)}
.debt-fig b{font-size:14px}
.debt-fig.miss{border-top:1.5px dashed rgba(26,22,20,.2);padding-top:7px;margin-top:2px}
.debt-fig.miss b{color:#B83228}
.debt-hint{font-size:12.5px;line-height:1.45;color:var(--mutink);margin-bottom:14px}
.debt-actions{display:flex;flex-direction:column;gap:8px}
.debt-actions .btn{width:100%}
.debt-actions .btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}
/* Sticky reminder while the player raises the cash by hand. */
#debtBar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:120;display:none;
align-items:center;gap:10px;padding:9px 12px;border-radius:14px;
background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 8px 0 var(--ink2),0 18px 40px rgba(0,0,0,.28)}
#debtBar.on{display:flex}
#debtBar .db-tx{font-size:12.5px;font-weight:700;color:var(--ink);font-family:'Space Grotesk'}
#debtBar .db-tx b{font-family:'JetBrains Mono';color:#B83228}
#debtBar .db-btn{padding:7px 12px;border-radius:9px;font-size:11.5px;font-weight:800;font-family:'Space Grotesk';
border:2.5px solid var(--ink);background:var(--cyellow);color:var(--ink);box-shadow:0 3px 0 var(--ink2)}
#debtBar .db-btn.pay{background:var(--cmint);color:#fff}
#debtBar .db-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink2)}
#debtBar .db-btn:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:520px){
#debtBar{left:8px;right:8px;transform:none;bottom:10px;justify-content:space-between}
#debtBar .db-tx{font-size:11.5px}
}
/* ════════════════════════════════════════════════════════════
LIVELLI DELLE FINESTRE
------------------------------------------------------------
Ogni .modal-wrap stava sullo stesso piano (z-index 60), quindi a decidere
chi finiva davanti era solo l'ordine nel documento. Il dialogo di conferma
e' scritto piu' in alto della finestra del debito, e cosi' la conferma di
bancarotta compariva dietro, invisibile e non cliccabile: il giocatore
restava fermo senza poter confermare. La conferma e' per definizione
l'ultima cosa aperta, quindi va sempre sopra a tutto il resto.
════════════════════════════════════════════════════════════ */
#tradeSummary{z-index:150}
#confirmModal{z-index:400}
/* I messaggi brevi restano leggibili anche con una conferma aperta. */
.toast{z-index:420}
/* ════════════════════════════════════════════════════════════
ANIMAZIONE DEI PAGAMENTI
Chi paga, chi incassa, quanto. Compare per tutti, non blocca nulla.
════════════════════════════════════════════════════════════ */
#payFx{position:fixed;left:50%;top:14%;transform:translateX(-50%);
z-index:88;display:flex;flex-direction:column;align-items:center;gap:8px;
pointer-events:none;width:max-content;max-width:min(620px,94vw)}
.payfx-row{display:flex;align-items:center;gap:14px;
padding:11px 18px;border-radius:14px;
background:rgba(12,10,22,.92);border:1px solid rgba(255,255,255,.14);
box-shadow:0 12px 34px rgba(0,0,0,.45);
font-size:14px;font-weight:600;white-space:nowrap;
animation:payIn .32s cubic-bezier(.2,1,.3,1)}
.payfx-row.out{animation:payOut .36s ease-in forwards}
.pf-side{display:flex;align-items:center;gap:7px;min-width:0}
.pf-em{font-size:19px;line-height:1}
.pf-name{overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pf-mid{display:flex;flex-direction:column;align-items:center;line-height:1.15;
padding:0 4px}
.pf-arrow{font-size:15px;color:var(--mint,#2CE6A0);animation:pfSlide .9s ease-in-out infinite}
.pf-amt{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:17px;
color:#FFD166;letter-spacing:.2px}
.pf-why{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
color:var(--mut,#9a93ad)}
.pf-from .pf-name{opacity:.95}
@keyframes payIn{from{opacity:0;transform:translateY(-14px) scale(.94)}
to{opacity:1;transform:none}}
@keyframes payOut{to{opacity:0;transform:translateY(-18px) scale(.96)}}
@keyframes pfSlide{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media (max-width:820px){
#payFx{top:auto;bottom:calc(var(--mob-band2,120px) + 74px);gap:6px}
.payfx-row{gap:9px;padding:9px 13px;font-size:12.5px}
.pf-name{max-width:88px}
.pf-amt{font-size:15px}
.pf-em{font-size:16px}
}
/* ════════════════════════════════════════════════════════════
RIEPILOGO DELLO SCAMBIO
Le due parti affiancate, con tutto quello che si sono passate.
════════════════════════════════════════════════════════════ */
.ts-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ts-side{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:13px 14px;min-width:0}
.ts-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;
margin-bottom:2px}
.ts-em{font-size:20px;line-height:1}
.ts-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
color:var(--mut,#9a93ad);margin-bottom:9px}
.ts-props{display:flex;flex-wrap:wrap;gap:6px}
.ts-prop{display:inline-flex;align-items:center;gap:6px;
padding:5px 9px 5px 6px;border-radius:9px;font-size:12px;font-weight:600;
background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16)}
.ts-prop i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.ts-none{font-size:12.5px;color:var(--mut,#9a93ad);font-style:italic}
.ts-cash{margin-top:9px;font-family:'Sora',system-ui,sans-serif;font-weight:800;
font-size:15px;color:#FFD166}
.ts-swap{display:flex;align-items:center;justify-content:center;
font-size:24px;color:var(--mint,#2CE6A0);padding:0 2px}
.modal .ts-side{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.14)}
.modal .ts-prop{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.14)}
.modal .ts-none,.modal .ts-label{color:var(--mutink,#6b6357)}
@media (max-width:640px){
.ts-grid{grid-template-columns:1fr;gap:8px}
.ts-swap{transform:rotate(90deg);padding:2px 0}
}
/* ════════════════════════════════════════════════════════════
AGGIUSTAMENTI DI QUESTA TORNATA
════════════════════════════════════════════════════════════ */
/* Su schermo stretto la modale ha gia' un corpo scorrevole: due contenitori
scorrevoli annidati sono scomodi da usare al dito, quindi qui la lista si
allunga e a scorrere resta solo il corpo della modale. */
@media(max-width:820px){
.mng-list{max-height:none;overflow:visible;padding-right:0}
}
/* Quadratini delle proprieta' nella scheda giocatore: le proprieta' dello
stesso gruppo sono attaccate, fra un gruppo e l'altro c'e' uno stacco. */
.pcard .chip2.gsep{margin-left:7px}
/* Riga del rientro in cima all'elenco dei tavoli. La vede solo chi ha
davvero un posto da riprendere. */
.game-row.mine{border-color:var(--mint,#2CE6A0)}
.game-row.mine .nm small{color:var(--mint,#2CE6A0)}
/* La scheda della proprieta' acquistata deve stare dentro lo schermo anche in
orizzontale su telefono, dove l'altezza e' pochissima. */
@media(max-height:520px){
.acq-art{min-height:70px;padding:6px}
.acq-art img{max-height:30vh}
.acq-name{font-size:18px;padding:9px 12px 2px}
}
/* ============================================================
TRADE DESK, il verdetto sull'offerta
Lo scambio e' l'unica strada per cui la ricchezza passa da un giocatore
all'altro per scelta, quindi e' anche l'unica da sorvegliare: qui si vede
quanto vale ogni lato e perche' un'offerta non puo' partire.
============================================================ */
.tfair{margin:10px 0 2px;padding:9px 12px;border-radius:11px;border:2.5px solid var(--ink);
background:var(--paper);display:flex;flex-direction:column;gap:5px}
.tfair.ok{background:rgba(47,158,64,.10)}
.tfair.bad{background:rgba(184,50,40,.09)}
.tf-bars{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12.5px;font-weight:700}
.tf-vs{font-family:'JetBrains Mono';font-size:10.5px;color:var(--mutink);letter-spacing:.1em}
.tf-msg{font-size:11.5px;line-height:1.4;color:var(--mutink);text-align:center}
.tfair.ok .tf-msg{color:#1F7A33}
.tfair.bad .tf-msg{color:#B83228}
#tradeSendBtn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
@media(max-width:640px){.tf-bars{font-size:11.5px;gap:8px}.tf-msg{font-size:10.5px}}
/* ============================================================
CASH PEEK
I pannelli coprono il tavolo con una sfocatura, e con essa sparivano i
saldi: senza sapere quanto si ha in mano non si puo' rilanciare a un'asta,
valutare uno scambio o decidere cosa vendere per pagare un debito. Questa
striscia vive sopra ogni pannello e ricompare da sola ogni volta che se ne
apre uno. Sta appoggiata al bordo superiore, dove nessuna finestra arriva.
============================================================ */
#cashPeek{position:fixed;top:0;left:0;right:0;z-index:200;display:none;
justify-content:center;align-items:center;gap:7px;
padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
background:linear-gradient(180deg,rgba(26,22,20,.55),transparent);pointer-events:none}
#cashPeek::-webkit-scrollbar{display:none}
#cashPeek.on{display:flex}
.cp-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
background:var(--cream);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink2);
font-family:'Space Grotesk';font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.cp-chip .cp-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pc,#A69A80);border:1.5px solid var(--ink)}
.cp-chip .cp-nm{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.cp-chip .cp-bal{font-family:'JetBrains Mono';font-weight:800;color:var(--cmintD)}
.cp-chip.me{background:var(--cyellow);box-shadow:2px 2px 0 var(--cyellowD)}
.cp-chip.me .cp-bal{color:var(--ink)}
.cp-chip.turn{outline:2.5px solid var(--ink);outline-offset:2px}
.cp-chip.dead{opacity:.4}
.cp-chip.dead .cp-bal{color:var(--mutink)}
@media(max-width:640px){
#cashPeek{justify-content:flex-start;gap:5px;padding-left:8px;padding-right:8px}
.cp-chip{padding:4px 8px;font-size:10.5px;gap:5px}
.cp-chip .cp-nm{max-width:64px}
}