/* ===========================================================
   Esfi – black & gold theme
   =========================================================== */
@font-face{font-family:'Vazirmatn';src:url('assets/fonts/Vazirmatn-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --bg:#080808;
  --bg-2:#101010;
  --panel:#161616;
  --panel-2:#1e1e1e;
  --panel-3:#111111;
  --line:rgba(224,184,90,.28);
  --line-strong:rgba(224,184,90,.6);
  --text:#f1ead6;
  --muted:#a8a396;
  --gold:#e0b85a;
  --gold-2:#f3d98b;
  --gold-3:#a8812f;
  --cream:#f3ead2;
  --emerald:#1f8a6a;
  --emerald-2:#3fcf9a;
  --teal:#5cc2cc;
  --amber:#e8a24a;
  --red:#e5645f;
  --green:#3fcf9a;
  --radius:14px;
  --font-ui:'Vazirmatn',Tahoma,system-ui,sans-serif;
  --font-tile:'Vazirmatn',Tahoma,system-ui,sans-serif;
  --font-display:'Vazirmatn',Tahoma,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1100px 760px at 50% 38%,#1b1b1b 0%,#101010 55%,#060606 100%) fixed;
  color:var(--text);
  font-family:var(--font-ui);
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit}
.hidden{display:none!important}
svg.ico{width:1em;height:1em;fill:currentColor;display:inline-block}

/* ---------- logo ---------- */
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,#fff2c4 0%,#e0b85a 55%,#a8812f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 8px rgba(224,184,90,.25))}

/* ---------- buttons shared ---------- */
.btn-gold{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;font-weight:800;border-radius:10px;
  box-shadow:0 8px 24px rgba(224,184,90,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ===========================================================
   LOBBY SCREEN
   =========================================================== */
#lobby{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#lobby .topbar{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;color:var(--muted);font-weight:600}
#lobby .topbar .links{display:flex;gap:36px}
#lobby .topbar button{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:18px}
#lobby .topbar button:hover{color:var(--gold-2)}
.lobby-die{width:128px;height:128px;margin-bottom:10px;transform:rotate(-8deg);filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
#lobby .logo{font-size:112px}
#lobby .tag{color:var(--gold);font-size:24px;font-weight:600;margin:10px 0 80px;letter-spacing:.14em;text-transform:uppercase;font-size:18px}
.name-input{width:260px;height:48px;background:rgba(16,16,16,.9);border-radius:10px;border:1px solid var(--line);padding:0 18px;color:var(--cream);font-size:18px;font-weight:700;outline:none;text-align:center}
.name-input:focus{border-color:var(--gold)}
.btn-play{margin-top:20px;width:260px;height:84px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:34px;transition:.15s}
.lobby-actions{display:flex;gap:10px;margin-top:20px}
.btn-sec{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;background:rgba(22,22,22,.92);border:1px solid var(--line-strong);color:var(--gold-2);font-weight:700;font-size:16px;transition:.15s}
.btn-sec:hover{background:#202020;box-shadow:0 0 18px rgba(224,184,90,.25)}
.ad-slot{position:absolute;color:#302e2d;font-weight:700;font-size:18px}

/* ===========================================================
   GAME SCREEN LAYOUT
   =========================================================== */
#game{position:fixed;inset:0;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(300px,1fr);grid-template-rows:minmax(0,1fr);gap:18px;padding:18px 24px 18px 18px;align-items:stretch;overflow:hidden}
.sidebar{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;height:100%;overflow:hidden}
.sidebar .settings{min-height:0}
.panel{background:linear-gradient(165deg,#181818,#111111);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 24px rgba(224,184,90,.04)}
.panel h3{margin:0 0 12px;font-size:20px;font-weight:800;color:var(--gold-2);text-align:center;letter-spacing:.02em}

/* left */
.brand-row{display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 4px}
.brand-row .logo{font-size:50px}
.brand-row .tools{display:flex;gap:16px;color:var(--muted);font-size:22px}
.brand-row .tools button:hover{color:var(--gold-2)}
.share{background:linear-gradient(165deg,#181818,#111111);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px 18px}
.share h3{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold-2);margin:0 0 12px;font-size:20px}
.share-row{display:flex;gap:10px}
.share-row .url{flex:1;min-width:0;background:#0c0c0c;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream)}
.btn-copy{display:flex;align-items:center;gap:8px;background:#090909;border:1px solid var(--line-strong);border-radius:10px;padding:0 18px;font-weight:800;font-size:17px;color:var(--gold-2)}
.btn-copy:hover{background:#141414}
.ad-box{flex:1;display:flex;align-items:center;justify-content:center;color:#302e2d;font-size:19px;min-height:60px}
.chat{height:430px;display:flex;flex-direction:column;padding:0;overflow:hidden}
.chat header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;color:var(--muted)}
.chat header strong{color:var(--gold-2);font-size:19px;font-weight:800}
.chat .msgs{flex:1;overflow:auto;padding:6px 18px;display:flex;flex-direction:column;gap:6px}
.chat .empty{text-align:center;color:var(--muted);margin-top:30px;font-weight:600}
.chat .msg b{color:var(--gold)}
.chat form{display:flex;align-items:center;gap:12px;padding:14px 18px 20px;border-top:1px solid var(--line)}
.chat input{flex:1;background:#0c0c0c;border:1px solid var(--line);border-radius:24px;padding:14px 20px;color:var(--cream);outline:none}
.chat input:focus{border-color:var(--gold)}
.chat input::placeholder{color:var(--muted)}
.chat .send{width:46px;height:46px;border-radius:50%;background:#181818;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--gold-2)}

/* ===========================================================
   BOARD  (all inner sizes are in em, relative to the board)
   =========================================================== */
.board-wrap{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}
.board{
  --s:min(calc(100vh - 24px),calc(100dvh - 24px),calc(100vw - 640px));
  width:var(--s);height:var(--s);min-width:340px;min-height:340px;
  font-size:calc(var(--s) / 64);
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.75fr) repeat(9,minmax(0,1fr)) minmax(0,1.75fr);
  grid-template-rows:minmax(0,1.75fr) repeat(9,minmax(0,1fr)) minmax(0,1.75fr);
  gap:.4em;padding:.5em;
  background:
    radial-gradient(60% 50% at 30% 35%,rgba(224,184,90,.08),transparent 70%),
    radial-gradient(50% 45% at 72% 62%,rgba(224,184,90,.06),transparent 70%),
    linear-gradient(160deg,#141414,#090909);
  border-radius:1.1em;
  box-shadow:0 0 0 .12em rgba(224,184,90,.55),0 0 1.8em rgba(224,184,90,.22),0 2em 5em rgba(0,0,0,.7);
}
.board .center{grid-area:2/2/11/11;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.6em;padding-top:5.5em;overflow:hidden}
.worldmap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board[data-map="middle-east"]{grid-template-columns:minmax(0,2fr) repeat(11,minmax(0,1fr)) minmax(0,2fr);grid-template-rows:minmax(0,2fr) repeat(11,minmax(0,1fr)) minmax(0,2fr);background:radial-gradient(ellipse at 55% 65%,#242016,#0c0c0c 70%,#050505);gap:.32em}
.board[data-map="middle-east"] .center{grid-area:2/2/13/13;padding-top:3.8em}
.board[data-map="middle-east"] .worldmap{object-fit:contain;opacity:.9;-webkit-mask-image:radial-gradient(ellipse at 52% 52%,#000 35%,#000b 65%,transparent 98%);mask-image:radial-gradient(ellipse at 52% 52%,#000 35%,#000b 65%,transparent 98%)}
.board[data-map="middle-east"] .tile{background:linear-gradient(155deg,rgba(224,184,90,.12),transparent 45%),radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--c) 30%,transparent),transparent 75%),#111111;box-shadow:inset 0 0 1em #cba85c16,0 0 .5em #cba85c26;border-color:#bfa36a;border-radius:.65em}
.board[data-map="middle-east"] .tile.oil{background:linear-gradient(145deg,#463c24,#161616);--c:#e0b85a}
.board[data-map="middle-east"] .tile.airport{background:linear-gradient(145deg,#303033,#111111);--c:#7fcbd0}
.board[data-map="middle-east"] .tile .name{font-size:clamp(9px,.9em,14px);line-height:1.1;overflow-wrap:anywhere}
.board[data-map="middle-east"] .tile .price{font-size:clamp(8px,.82em,13px);padding:.12em .35em}
.board[data-map="middle-east"] .t-left .name,.board[data-map="middle-east"] .t-right .name{font-size:clamp(9px,.86em,13px)}
.board[data-map="middle-east"] .t-left .art,.board[data-map="middle-east"] .t-right .art{flex-basis:36%;width:36%}
.board[data-map="middle-east"] .t-top,.board[data-map="middle-east"] .t-bottom{padding:.3em .15em;gap:.15em}
.board[data-map="middle-east"] .t-top.has-flag{padding-bottom:.9em}
.board[data-map="middle-east"] .t-bottom.has-flag{padding-top:.9em}
.board[data-map="middle-east"] .flag{width:1.65em;height:1.65em;border-width:.1em}
.board[data-map="middle-east"] .t-top .flag{bottom:-.8em}
.board[data-map="middle-east"] .t-bottom .flag{top:-.8em}
.board[data-map="middle-east"] .t-left .flag{right:-.8em}
.board[data-map="middle-east"] .t-right .flag{left:-.8em}
.board[data-map="middle-east"] .corner .name{font-size:1.12em;color:#f3d98b}
.board[data-map="middle-east"] .tile.owned{box-shadow:var(--neon)}
.board[data-map="middle-east"] .center .status{background:#080808cc;border:1px solid #cba85c26;border-radius:2em;padding:.35em .9em}
.board[data-map="middle-east"] .glog{background:none;padding:.35em .6em}
.board[data-map="middle-east"] .gl{align-self:center;max-width:100%;padding:.2em .7em;border-radius:1em;background:linear-gradient(90deg,transparent,#080808cc 20%,#080808cc 80%,transparent);text-shadow:0 2px 4px #000}
.tile:focus-visible{outline:3px solid #fff0b7;outline-offset:2px;z-index:8}
#optMap{max-width:54%;font-size:12px}
@media(max-width:640px){.board[data-map="middle-east"] .tile:not(.corner) .name{font-size:.86em}.board[data-map="middle-east"] .tile .price{font-size:.82em}}
.center>*:not(.worldmap){position:relative;z-index:1}

/* ---------- tiles ---------- */
.tile{
  --c:#3fcf9a;
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
  background:
    linear-gradient(160deg,rgba(255,255,255,.1),transparent 38%),
    radial-gradient(120% 90% at 50% 120%,color-mix(in srgb,var(--c) 28%,transparent),transparent 62%),
    linear-gradient(165deg,#323232 0%,#1e1e1e 42%,#141414 100%);
  border:.1em solid rgba(236,196,98,.88);
  border-radius:.8em;
  box-shadow:inset 0 0 1.6em rgba(224,184,90,.16),0 0 .9em rgba(224,184,90,.3),0 .3em .6em rgba(0,0,0,.5);
  color:var(--text);font-family:var(--font-tile);
}
.tile::before{content:"";position:absolute;inset:.3em;border:.07em solid rgba(236,196,98,.2);border-radius:.55em;pointer-events:none}
.tile .name{font-weight:800;font-size:.88em;line-height:1.06;color:#fff;text-align:center;text-shadow:0 .08em .2em rgba(0,0,0,.7)}
.tile .name.sm{font-size:.76em}
.tile .price{display:inline-flex;align-items:center;gap:.3em;padding:.16em .55em .16em .3em;border-radius:1em;background:rgba(0,0,0,.65);
  border:.07em solid rgba(236,196,98,.35);font-weight:800;font-size:.86em;color:var(--gold-2);line-height:1.1;white-space:nowrap}
.tile .price::before{content:"$";display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:#171717;font-size:.78em;font-weight:900}
.tile .sub{font-size:.9em;font-weight:800;color:var(--gold-2)}
.tile .art{flex:1 1 0;min-height:0;min-width:0;width:100%;filter:drop-shadow(0 .12em .3em rgba(0,0,0,.45))}
.tile .txt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;min-width:0}

/* top / bottom: name, picture, price – flag overlaps the outer-facing edge */
.t-top,.t-bottom{flex-direction:column;align-items:center;justify-content:space-between;padding:.6em .25em;gap:.25em}
.t-top.has-flag{padding-bottom:1.4em}
.t-bottom.has-flag{padding-top:1.4em}
.t-top .flag{bottom:-1.15em;left:50%;transform:translateX(-50%)}
.t-bottom .flag{top:-1.15em;left:50%;transform:translateX(-50%)}

/* left / right: picture beside name + price – flag overlaps the inner edge */
.t-left,.t-right{flex-direction:row;align-items:center;justify-content:center;gap:.2em;padding:.4em .4em}
.t-left{padding-right:1.25em}
.t-right{padding-left:1.25em}
.t-left .art,.t-right .art{flex:0 0 41%;width:41%;height:94%}
.t-left .txt,.t-right .txt{flex:1 1 0}
.t-left .name,.t-right .name{font-size:.74em}
.t-left .name.sm,.t-right .name.sm{font-size:.62em}
.t-left .price,.t-right .price{font-size:.72em}
.t-left .flag,.t-right .flag{width:2.1em;height:2.1em}
.t-left .flag{right:-1.05em;top:50%;transform:translateY(-50%)}
.t-right .flag{left:-1.05em;top:50%;transform:translateY(-50%)}
.t-left.stack{flex-direction:column;padding:.45em .3em}
.t-left.stack .art{flex:1 1 0;width:100%;height:auto}

/* special tiles */
.surprise .name,.treasure .name{color:#f3c262}
.water,.power{background:
    linear-gradient(160deg,rgba(255,255,255,.14),transparent 38%),
    linear-gradient(165deg,#494437 0%,#27251f 45%,#141414 100%)}
.tax .sub{color:#f3d98b}

/* corners */
.corner{border-radius:.95em;flex-direction:column;justify-content:center;gap:.3em;padding:.55em .45em;text-align:center}
.corner .name{font-size:1.02em;font-weight:800;color:#fff}
.corner .art{flex:1 1 0;min-height:0;width:84%}
.corner.start{background:
    linear-gradient(160deg,rgba(255,255,255,.12),transparent 38%),
    linear-gradient(165deg,#49402a 0%,#222222 55%,#141414 100%);
  border-color:#f3d98b;box-shadow:inset 0 0 1.6em rgba(224,184,90,.26),0 0 1.5em rgba(224,184,90,.42),0 .3em .6em rgba(0,0,0,.5)}
.corner.start .big{font-family:var(--font-display);font-weight:900;font-size:1.85em;letter-spacing:.03em;line-height:1;
  background:linear-gradient(180deg,#fff2c4,#e0b85a 60%,#b78a2b);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .1em .15em rgba(0,0,0,.5))}
.corner.start .art{flex:0 0 58%;width:58%}
.corner.prison small{font-size:.92em;color:#f3d98b;font-weight:800}
.corner.prison .art{width:70%}

/* circular flags (SVG symbols) */
.flag{position:absolute;width:2.3em;height:2.3em;border-radius:50%;border:.15em solid #fff;background:#fff;box-shadow:0 .25em .6em rgba(0,0,0,.55);z-index:5}

/* country sets (soft tile glow + x2-rent grouping) */
.g-br{--c:#2fbf6a}.g-il{--c:#4a9bf0}.g-it{--c:#6fcf6a}.g-de{--c:#e0b020}
.g-cn{--c:#e5645f}.g-fr{--c:#6a8bff}.g-gb{--c:#9a8be0}.g-us{--c:#e8754a}

/* ---------- dice + center ---------- */
.dice{--die-size:5.6em;--die-depth:2.8em;display:flex;gap:2.4em;perspective:65em;perspective-origin:50% 30%;transform-style:preserve-3d;padding-top:.5em}
.die{position:relative;flex:0 0 7.4em;width:7.4em;height:8.2em;transform-style:preserve-3d}
.die-lift{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,0,0) scale3d(1,1,1)}
.die-view{position:absolute;width:var(--die-size);height:var(--die-size);left:.9em;top:.9em;transform-style:preserve-3d;transform:rotateX(-52deg) rotateY(-24deg)}
.die:nth-child(2) .die-view{transform:rotateX(-52deg) rotateY(24deg)}
.die-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
.die[data-v="2"] .die-cube{transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg)}
.die-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:10%;padding:18%;border-radius:9%;border:.06em solid var(--df-bd,#f5e9c9);background:linear-gradient(145deg,var(--df-a,#fffae9) 0%,var(--df-b,#f0e5c9) 48%,var(--df-c,#d0bd92) 100%);box-shadow:inset .13em .13em .25em var(--df-hi,#fffdf5),inset -.16em -.18em .35em var(--df-lo,#987b4a5c);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.die-face[data-face="1"]{transform:rotateX(90deg) translateZ(var(--die-depth))}
.die-face[data-face="6"]{transform:rotateX(-90deg) translateZ(var(--die-depth))}
.die-face[data-face="2"]{transform:translateZ(var(--die-depth))}
.die-face[data-face="5"]{transform:rotateY(180deg) translateZ(var(--die-depth))}
.die-face[data-face="3"]{transform:rotateY(90deg) translateZ(var(--die-depth))}
.die-face[data-face="4"]{transform:rotateY(-90deg) translateZ(var(--die-depth))}
.die-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#fff9db99,transparent 65%);opacity:0}
.die-face i{display:block;width:100%;height:100%;aspect-ratio:1;border-radius:50%;place-self:center;background:transparent}
.die-face i.on{background:radial-gradient(circle at 65% 70%,var(--pip-a,#4e412e) 0%,var(--pip-b,#211e19) 65%,var(--pip-c,#0c1210) 100%);box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim,#fff9e7)}
.die-shadow{position:absolute;left:.6em;bottom:-.15em;width:6.2em;height:1.35em;border-radius:50%;background:radial-gradient(ellipse,#000c 15%,#0007 48%,transparent 72%);filter:blur(.2em);opacity:.32;transform:scale(.88);pointer-events:none}
.die.is-rolling .die-cube,.die.is-rolling .die-lift{will-change:transform}
.die.is-revealed .die-face.is-result::after{animation:die-reveal .32s ease-out both}
@keyframes die-reveal{0%{opacity:0}30%{opacity:.45}100%{opacity:0}}
html.rm .die-face::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.die-face::after{animation:none!important}}
.btn-start{display:flex;align-items:center;gap:.6em;padding:.7em 1.8em;border-radius:.6em;background:linear-gradient(180deg,#1b1b1b,#111111);
  border:.14em solid var(--gold);color:var(--cream);font-size:1.4em;font-weight:800;box-shadow:0 0 1.2em rgba(224,184,90,.3),inset 0 0 .8em rgba(224,184,90,.12);transition:.15s}
.btn-start:hover{background:linear-gradient(180deg,#272524,#181615);box-shadow:0 0 1.8em rgba(224,184,90,.5)}
.btn-start.accent{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.center .status{color:var(--muted);font-size:1.05em;font-weight:600;text-align:center;min-height:1.4em}
.center .actions{display:flex;gap:.8em}

/* player tokens */
.token{width:2.4em;height:2.4em;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.4),transparent 48%),var(--p);border:.16em solid #fff;box-shadow:0 .2em .5em rgba(0,0,0,.6)}
.token.abs{position:absolute;z-index:6;transition:left .21s linear,top .21s linear}
.token.moving{z-index:9;transition:none}

/* ===========================================================
   RIGHT SIDEBAR
   =========================================================== */
.host-card{display:flex;align-items:center;gap:8px;padding:14px 14px;flex-wrap:nowrap}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6dd92,#b78a2b);display:grid;place-items:center;font-weight:900;color:#141414}
.host-card .nm{font-weight:800;font-size:17px;color:var(--cream)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-weight:800;font-size:15px}
.chip.host{background:rgba(224,184,90,.15);color:var(--gold-2);border:1px solid var(--line)}
.chip.btn{background:transparent;border:1px solid var(--line);color:var(--cream);font-size:13px;margin-left:auto;white-space:nowrap;padding:5px 9px}
.icon-btn{width:34px;height:34px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;color:var(--cream)}
.settings{flex:1;overflow:auto;padding:22px 22px 12px}

.settings h3{font-size:19px;margin-bottom:20px}
.setting{display:flex;align-items:center;gap:16px;padding:14px 0}
.setting>.ic{width:26px;color:var(--gold);font-size:22px;text-align:center}
.setting .tx{flex:1}
.setting .tx b{display:block;font-weight:800;font-size:18px;color:var(--cream)}
.setting .tx span{display:block;color:var(--muted);font-size:15px;line-height:1.2;margin-top:2px}
.setting .tx .badge-beta{display:inline-block;margin-top:0;background:var(--gold);color:#141414;font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}
.setting select{background:#0c0c0c;color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-weight:800;font-size:18px;outline:none}
.setting .map{text-align:right}
.setting .map b{font-size:18px;color:var(--cream)}
.setting .map a{color:var(--gold-2);font-weight:800;font-size:14px;text-decoration:none;cursor:pointer}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0 24px}

/* toggle switch */
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:2}
.switch .trk{position:absolute;inset:0;background:#1e1e1e;border:1px solid var(--line);border-radius:30px;transition:.2s}
.switch .trk::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:var(--cream);transition:.2s}
.switch input:checked+.trk{background:linear-gradient(180deg,#e0b85a,#b78a2b);border-color:var(--gold)}
.switch input:checked+.trk::after{transform:translateX(22px);background:#141414}

/* player dashboard */
.dash{display:flex;flex-direction:column;gap:10px}
.pcard{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:#161616;border:1.5px solid rgba(224,184,90,.18)}
.pcard.active{border-color:var(--p);box-shadow:0 0 18px color-mix(in srgb,var(--p) 40%,transparent)}
.pcard .row{display:flex;align-items:center;gap:10px}
.pcard .dot{width:16px;height:16px;border-radius:50%;background:var(--p);border:2px solid #fff}
.pcard .money{margin-left:auto;font-weight:900;color:var(--emerald-2);font-size:20px}
.pcard .props{display:flex;flex-wrap:wrap;gap:4px}
.pcard .props i{width:14px;height:14px;border-radius:3px;background:var(--c)}

/* ===========================================================
   MODALS & TOASTS
   =========================================================== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:50;animation:fade .2s}
.modal{width:min(430px,92vw);background:linear-gradient(165deg,#202020,#121212);border:1px solid var(--gold);border-radius:18px;padding:26px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 30px rgba(224,184,90,.18);animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
.modal h2{margin:0 0 6px;font-size:26px;color:var(--gold-2);font-family:var(--font-display)}
.modal p{color:var(--muted);margin:0 0 18px}
.modal .amount{font-size:40px;font-weight:900;margin:8px 0 18px}
.modal .amount.neg{color:var(--red)}.modal .amount.pos{color:var(--emerald-2)}
.modal .btns{display:flex;gap:10px;justify-content:center}
.modal .btns button{flex:1;padding:12px;border-radius:10px;font-weight:800;background:#181818;border:1px solid var(--line-strong);color:var(--cream)}
.modal .btns .primary{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);background:#171717;border:1px solid var(--gold);color:var(--cream);padding:12px 22px;border-radius:12px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 20px rgba(224,184,90,.15);z-index:60;animation:toastio 1.9s cubic-bezier(.2,.9,.3,1) both}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.85);opacity:0}}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1200px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  #game{position:static;display:flex;flex-direction:column;align-items:stretch;overflow:visible;height:auto;min-height:100vh;padding:10px 8px 24px;gap:12px}
  .sidebar{height:auto;overflow:visible}
  .board-wrap{order:-2;height:auto;width:100%;justify-content:center;align-items:flex-start}
  .board{--s:min(calc(100vw - 16px),calc(100dvh - 16px));min-width:0;min-height:0;flex:none}
  .board-wrap + .sidebar{order:-1}
  .chat{height:300px}
}

/* ===========================================================
   CLICKABLE TILES + TILE WINDOW
   =========================================================== */
.tile{cursor:pointer;transition:filter .15s,transform .15s}
.tile:hover{filter:brightness(1.14);z-index:3}
.tile .lv{position:absolute;top:-.6em;right:-.4em;z-index:7;display:flex;align-items:center;gap:.15em;padding:.12em .45em;border-radius:1em;
  background:#0e0e0e;border:.09em solid #f3d98b;color:#f3d98b;font-weight:900;font-size:.8em;line-height:1.2;box-shadow:0 .2em .4em rgba(0,0,0,.55)}
.tile .lv svg{width:1.15em;height:1.15em;fill:currentColor}
.tile .lv.hotel{color:#ff9a8a;border-color:#ff9a8a}
.overlay.tile-ov{z-index:55}
.tile-modal{width:min(470px,94vw);max-height:92vh;overflow:auto;text-align:left;padding:0}
.tm-head{display:flex;align-items:center;gap:14px;padding:18px 22px 12px;background:linear-gradient(165deg,rgba(224,184,90,.2),transparent);border-bottom:1px solid var(--line)}
.tm-art{width:100px;height:88px;flex:none;filter:drop-shadow(0 .2em .4em rgba(0,0,0,.5))}
.tm-title h2{margin:0;font-size:27px;color:var(--gold-2);font-family:var(--font-display)}
.tm-sub{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:800;margin-top:6px}
.tm-flag{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#fff}
.tm-body{padding:14px 22px 20px}
.tm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;background:#0e0e0e;border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--cream)}
.tm-chip b{color:var(--gold-2)}
.tm-chip.warn{color:#ff9a8a;border-color:#ff9a8a}
.tm-chip .dot{width:12px;height:12px;border-radius:50%;background:var(--p);border:2px solid #fff}
.tm-rents{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px}
.tm-row{display:flex;justify-content:space-between;padding:8px 14px;font-weight:700;color:var(--muted);border-bottom:1px solid rgba(224,184,90,.12)}
.tm-row:last-child{border:0}
.tm-row b{color:var(--cream)}
.tm-row.cur{background:rgba(224,184,90,.16);color:var(--gold-2)}
.tm-row.cur b{color:var(--gold-2)}
.tm-note{color:var(--muted);font-size:13px;margin:6px 0 14px;font-weight:600}
.tm-text{color:var(--cream);line-height:1.5;font-weight:600;margin:4px 0 14px}
.tm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.tm-actions button{padding:12px 10px;border-radius:10px;font-weight:800;background:#181818;border:1px solid var(--line-strong);color:var(--cream)}
.tm-actions button:hover:not(:disabled){filter:brightness(1.2)}
.tm-actions button.primary{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.tm-actions button.danger{background:#5a2330;border-color:#c25a6a}
.tm-actions button.danger.armed{background:#b3283f;border-color:#ff8a9a;color:#fff}
.tm-actions button:disabled{opacity:.38;cursor:not-allowed}
.tm-hint{margin-top:10px;color:#f3c262;font-size:13px;font-weight:700;min-height:1.2em}
.tm-close{width:100%;margin-top:10px;padding:12px;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--cream);font-weight:800}
.tm-close:hover{background:rgba(255,255,255,.05)}

/* ----- owned properties list (right sidebar) ----- */
.pcard .props{gap:5px}
.pcard .oc{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:99px;background:#101010;border:1px solid rgba(224,184,90,.25);cursor:pointer;max-width:100%}
.pcard .oc:hover{border-color:var(--gold);background:#171717}
.pcard .oc .fl{width:18px;height:18px;border-radius:50%;flex:none;overflow:hidden}
.pcard .oc .fl.ic{padding:3px;background:#1b1b1b;color:var(--gold-2)}
.pcard .oc em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .oc b{font-size:11px;color:var(--gold-2);background:#000a;border-radius:99px;padding:0 5px}
.pcard .oc.mort{opacity:.4}

/* sound toggle */
button[aria-label="Sound"].muted{opacity:.45;position:relative}
button[aria-label="Sound"].muted::after{content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:currentColor;transform:rotate(-40deg);border-radius:2px}
button[aria-label="Sound"]{cursor:pointer}

/* little cartoon eyes (tokens + the selected swatch in the picker) */
.token::before,.token::after,.pk-sw.sel::before,.pk-sw.sel::after{
  content:"";position:absolute;top:40%;width:28%;height:28%;border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 62%,#10161a 0 58%,#fff 62%);
  box-shadow:0 0 .06em rgba(0,0,0,.35);
  animation:blink 5s infinite;
}
.token::before,.pk-sw.sel::before{left:19%}
.token::after,.pk-sw.sel::after{right:19%}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

.eyed{position:relative}
.eyed::before,.eyed::after{content:"";position:absolute;top:34%;width:28%;height:32%;border-radius:50%;background:radial-gradient(circle at 62% 58%,#0e0e0e 0 36%,#fff 40%);animation:blink 4.6s infinite}
.eyed::before{left:20%}.eyed::after{right:20%}

/* ===========================================================
   LOADING SCREEN
   =========================================================== */
#loader{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(1100px 760px at 50% 40%,#1b1b1b 0%,#101010 55%,#060606 100%);
  opacity:1;transition:opacity .9s ease;animation:fade .25s;
}
#loader.fade{opacity:0;pointer-events:none}
.ld-ring{width:84px;height:84px;border-radius:50%;border:5px solid rgba(224,184,90,.18);border-top-color:var(--gold);border-right-color:var(--gold-2);animation:spin .9s linear infinite;box-shadow:0 0 30px rgba(224,184,90,.18)}
.ld-logo{font-family:var(--font-display);font-weight:900;font-size:44px;letter-spacing:.06em;color:var(--gold-2);text-shadow:0 0 24px rgba(224,184,90,.35)}
.ld-text{color:var(--muted);font-weight:700;font-size:17px;letter-spacing:.08em}
.ld-text span{animation:dots 1.2s infinite;opacity:.2}
.ld-text span:nth-child(2){animation-delay:.2s}.ld-text span:nth-child(3){animation-delay:.4s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dots{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ===========================================================
   APPEARANCE PICKER (sits on top of the board, sizes in em)
   =========================================================== */
.picker{
  position:absolute;inset:0;z-index:20;border-radius:1.1em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2em;
  background:rgba(0,0,0,.8);
  animation:fade .45s ease;
}
.picker.out{opacity:0;transition:opacity .25s ease;pointer-events:none}
.picker h3{margin:0;font-size:1.7em;font-weight:700;color:var(--cream)}
.pk-grid{display:grid;grid-template-columns:repeat(4,5em);gap:1.1em 1.6em;place-items:center}
.pk-sw{
  position:relative;width:3.8em;height:3.8em;border-radius:50%;background:var(--c);padding:0;
  transition:width .18s,height .18s,box-shadow .18s,filter .18s;filter:saturate(.95);
}
.pk-sw:hover{width:4.3em;height:4.3em;filter:none}
.pk-sw.sel{width:5em;height:5em;filter:none;box-shadow:0 0 0 .22em rgba(255,255,255,.9),0 0 1.6em color-mix(in srgb,var(--c) 70%,transparent)}
.pk-join{
  display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.3em;border-radius:.5em;font-size:1.6em;font-weight:800;
  background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border:1px solid #fff2c4;
  box-shadow:0 .3em 1em rgba(0,0,0,.4);transition:transform .12s,filter .12s;
}
.pk-join:hover{transform:translateY(-.08em);filter:brightness(1.06)}

/* ===== game log under the dice ===== */
.glog{flex:1;min-height:0;width:92%;display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;overflow:hidden;padding-bottom:1em;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,#000 55%)}
.gl{display:block;font-size:1.05em;color:var(--text);text-align:center;animation:glin .35s ease both;line-height:1.5;animation:glin .45s cubic-bezier(.2,1.2,.3,1) both,glflash 1.2s ease .1s}
@keyframes glin{0%{opacity:0;transform:translateY(1.4em) scale(.92);filter:blur(3px)}60%{opacity:1;filter:none}100%{transform:none}}
@keyframes glflash{0%{text-shadow:0 0 0 transparent}25%{text-shadow:0 0 .9em rgba(243,217,139,.75)}100%{text-shadow:none}}
.gl .gp,.gl .gt{display:inline-flex;align-items:center;gap:.35em;vertical-align:middle;margin:0 .1em}
.gl b{color:#fff;font-weight:800}
.gl .pd{width:1.3em;height:1.3em;border-radius:50%;background:var(--p);display:inline-block;flex:none}
.gl .gf{width:1.2em;height:1.2em;border-radius:50%;flex:none;overflow:hidden}
.gl .gf.ic{padding:.18em;background:#1b1b1b;color:var(--gold-2)}
#btnBuy{padding:.7em 1.4em}

/* ===== right panel (in-game) ===== */
.pcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 14px;background:transparent;border:0;border-left:3px solid transparent;border-radius:10px}
.pcard.active{border-left-color:var(--p);background:rgba(255,255,255,.04);box-shadow:none}
.pcard.out{opacity:.35}
.pcard .av{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.35),transparent 50%),var(--p)}
.pcard .who{display:flex;align-items:center;gap:8px;min-width:0}
.pcard .who b{font-size:17px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .ti{width:16px;height:16px;color:#8ea3c8;flex:none}.pcard .ti.crown{color:var(--gold)}
.pcard .tag{font-size:11px;font-weight:800;color:var(--gold-2);background:#0007;border-radius:99px;padding:1px 7px}
.pcard .mn{text-align:right;position:relative;min-width:70px}
.pcard .money{font-size:19px;font-weight:800;color:#fff}
.pcard .delta{display:block;position:absolute;right:0;top:100%;margin-top:-3px;font-size:12px;font-weight:900;animation:dl 2.6s ease both}
.delta.up{color:#5be39b}.delta.dn{color:#ff6b6b}
@keyframes dl{0%{opacity:0;transform:translateY(-4px)}10%,70%{opacity:1;transform:none}100%{opacity:0}}
#dashboard.dash{display:flex;flex-direction:column;gap:2px}
.bk-row{display:flex;justify-content:flex-end}
.btn-bankrupt{border:0;cursor:pointer;background:#d9534f;color:#fff;font-weight:800;padding:9px 16px;border-radius:8px;font-size:15px}
.trade-modal{position:relative;width:min(650px,94vw);max-height:90dvh;overflow-y:auto;font-family:var(--font-ui);text-align:start;background:linear-gradient(145deg,#191816,#100f0d);border:1px solid var(--line);box-shadow:0 24px 100px #000b;padding:28px}
.trade-modal[data-stage="choose"]{width:min(360px,94vw)}
.trade-modal h2{text-align:center;font-family:inherit;font-size:20px;padding:0 25px;color:var(--gold-2)}
.trade-modal .trade-close{position:absolute;inset-inline-end:8px;top:8px;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line);background:#0c0c0c;color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
.trade-players{display:grid;gap:12px;margin:20px 0}
.trade-players button{padding:14px;border:1px solid transparent;border-radius:10px;background:#29261f;color:var(--text);cursor:pointer;font:inherit;font-weight:800}
.trade-players button:hover{background:#363024;border-color:var(--gold)}
.trade-person{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%}
.trade-person b{overflow-wrap:anywhere}
.trade-person .pd{display:inline-block;width:19px;height:19px;border-radius:50%;background:var(--p);flex:none}
.trade-sides{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:10px;margin:24px 0}
.trade-sides fieldset{min-width:0;border:0;padding:10px 0;background:transparent;text-align:center}
.trade-sides legend{color:var(--text);font-weight:800;padding:0 4px;margin:auto;max-width:100%}
.trade-exchange{align-self:stretch;text-align:center;padding-top:12px;border-radius:20px;background:linear-gradient(#e0b85a20,transparent);color:var(--gold-2);font-size:24px}
.trade-sides ul{padding-inline-start:22px;line-height:1.9}
.trade-slider{direction:ltr;margin-top:18px}
.trade-slider input{width:100%;margin:0;accent-color:var(--gold);cursor:pointer}
.trade-limits{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.trade-cash{display:flex;align-items:center;justify-content:center;gap:3px;width:fit-content;max-width:100%;margin:8px auto 0;padding:4px 10px;border-radius:30px;background:var(--gold);color:#1b1405;direction:ltr;font-weight:800}
.trade-cash input{min-width:0;width:85px;max-width:100%;padding:0;border:0;background:transparent;color:inherit;direction:ltr;text-align:center;font:inherit}
.trade-cash .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trade-assets{overflow-y:auto;margin-top:18px;font-size:13px;text-align:start}
.trade-assets label{display:flex;align-items:center;gap:8px;padding:9px 2px;border-top:1px solid var(--line);cursor:pointer}
.trade-assets input{accent-color:var(--gold);flex:none}
.trade-assets small{margin-inline-start:auto;color:var(--gold-2)}
#tradeNotice{margin:12px 0;color:var(--muted);line-height:1.8;font-size:13px;text-align:center}
#tradeError{min-height:1.5em;color:#ffaaaa;font-size:13px}
.trade-modal .btns{justify-content:center;flex-wrap:wrap}
.trade-modal .btns:empty{display:none}
.trade-modal[data-stage="compose"] .btns .primary::before{content:'➤';display:inline-block;margin-inline-end:8px}
.trade-card{width:100%;display:grid;gap:8px;padding:12px;margin-top:12px;border-radius:10px;border:1px solid var(--line);background:#ffffff05;color:var(--text);text-align:start;cursor:pointer;font:inherit;font-size:13px}
.trade-card:hover,.trade-card:focus-visible{background:#e0b85a16;border-color:var(--gold)}
.trade-card.unread{border-color:var(--gold);background:#e0b85a10}
.trade-card-status{color:var(--gold-2)}
.trade-card.unread .trade-card-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-inline-end:7px}
.trade-card-people{display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.trade-card small{color:var(--muted);font-weight:400}
.trade-modal button:disabled{opacity:.5;cursor:wait}
.trade-modal :focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
@media(max-width:400px){.trade-sides{grid-template-columns:1fr}.trade-exchange{padding:0;height:28px}.trade-modal{padding:18px}.trade-assets{max-height:130px}}
.btn-bankrupt:hover{filter:brightness(1.1)}
#gamePanels{display:flex;flex-direction:column;gap:14px}
#gamePanels.hidden{display:none}
.panel.trades{padding:12px;color:var(--muted);font-weight:800;font-size:15px}
.panel.trades header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.btn-create{border:0;cursor:pointer;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1b1405;font-weight:900;padding:8px 10px;border-radius:8px}
.panel.myprops{padding:0;overflow:hidden;min-height:0}
.panel.myprops h4{margin:0;padding:14px;text-align:center;color:var(--muted);font-size:18px;font-weight:800}
#mpList{display:flex;flex-direction:column;max-height:44vh;overflow:auto}
.mp{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(255,255,255,.05);cursor:pointer;font-weight:700;color:var(--cream);border-top:1px solid rgba(0,0,0,.25)}
.mp:hover{background:rgba(224,184,90,.12)}
.mp .fl{width:20px;height:20px;border-radius:50%;flex:none;overflow:hidden}
.mp .fl.ic{padding:4px;background:#1b1b1b;color:var(--gold-2)}
.mp span{flex:1}.mp b{font-size:13px;color:var(--gold-2)}.mp.mort{opacity:.4}
.mp-empty{padding:14px;text-align:center;color:var(--muted);font-weight:600}

/* ===== button entrance animations ===== */
.actions .btn-start:not(.hidden){animation:btnin .5s cubic-bezier(.2,1.6,.35,1) both}
.actions .btn-start:not(.hidden):nth-child(2){animation-delay:.04s}
.actions .btn-start:not(.hidden):nth-child(3){animation-delay:.09s}
.actions .btn-start:not(.hidden):nth-child(4){animation-delay:.14s}
.actions .btn-start:not(.hidden):nth-child(5){animation-delay:.19s}
@keyframes btnin{0%{opacity:0;transform:translateY(1.1em) scale(.7)}100%{opacity:1;transform:none}}
#btnBuy:not(.hidden),#btnRoll:not(.hidden){animation:btnin .5s cubic-bezier(.2,1.6,.35,1) both,btnglow 1.8s ease-in-out .6s infinite}
@keyframes btnglow{0%,100%{box-shadow:0 0 1.2em rgba(224,184,90,.3)}50%{box-shadow:0 0 2.2em rgba(243,217,139,.75)}}
.btn-start{transition:transform .15s,box-shadow .15s,background .15s}
.btn-start:hover{transform:translateY(-.12em)}
.btn-start:active{transform:scale(.95)}
#btnBuy:not(.hidden):hover,#btnRoll:not(.hidden):hover{animation-play-state:running,paused}
.bk-row,.panel.trades,.panel.myprops{animation:btnin .5s cubic-bezier(.2,1.2,.35,1) both}
.panel.trades{animation-delay:.06s}.panel.myprops{animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.actions .btn-start,.gl{animation:none!important}}

/* ===== account UI ===== */
.user-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:rgba(22,22,22,.92);border:1px solid var(--line-strong);color:var(--cream);font-weight:800}
.user-chip .uc-dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:var(--gold)}
.user-chip small{color:var(--muted);font-weight:700}
.user-chip button{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);color:var(--gold-2);font-size:18px}
#lobby .topbar .user-chip button:hover{background:rgba(224,184,90,.15)}
.name-input[readonly]{opacity:.85;border-style:dashed}
/* floating login window */
.auth-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;
  background:radial-gradient(60% 55% at 50% 45%,rgba(35,32,24,.55),rgba(0,0,0,.88));animation:fade .3s}
.auth-backdrop.out{opacity:0;transition:opacity .26s;pointer-events:none}
.auth-float{position:relative;width:min(430px,100%);max-height:94vh;overflow:auto;padding:30px 30px 26px;border-radius:24px;text-align:center;
  font-family:'Vazirmatn','Tahoma','Nunito',system-ui,sans-serif;color:var(--cream);
  background:linear-gradient(160deg,rgba(30,30,30,.97),rgba(10,10,10,.98));border:1px solid rgba(243,217,139,.55);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 60px rgba(224,184,90,.18),inset 0 1px 0 rgba(255,255,255,.12);
  animation:authin .55s cubic-bezier(.2,1.25,.35,1) both,authfloat 6s ease-in-out .6s infinite}
@keyframes authin{from{opacity:0;transform:translateY(40px) scale(.9)}}
@keyframes authfloat{50%{transform:translateY(-6px)}}
.auth-float:hover,.auth-float:focus-within{animation-play-state:running,paused}
.auth-float.shake{animation:authshake .4s}
@keyframes authshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.auth-x{position:absolute;top:12px;left:14px;width:34px;height:34px;border-radius:10px;font-size:24px;line-height:1;color:var(--muted)}
.auth-x:hover{background:rgba(255,255,255,.08);color:#fff}
.auth-logo{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;background:linear-gradient(180deg,#fff2c4,#e0b85a 60%,#a8812f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(224,184,90,.3))}
.auth-float h2{margin:10px 0 4px;font-size:22px;font-weight:800;color:#fff}
.auth-sub{margin:0 0 18px;color:var(--muted);font-weight:600;font-size:14px;line-height:1.8}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#0c0c0c;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:18px}
.auth-tabs button{padding:10px;border-radius:9px;font-weight:800;color:var(--muted);font-family:inherit;transition:.2s}
.auth-tabs button.on{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414}
.auth-pane{text-align:right}
.auth-pane.hidden,.auth-pane [hidden]{display:none}
.auth-float label{display:block;color:var(--muted);font-weight:800;font-size:13.5px;margin-bottom:14px}
.auth-float input{display:block;width:100%;margin-top:7px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(8,8,8,.9);color:#fff;font-family:inherit;font-size:17px;font-weight:700;outline:none;transition:border-color .2s,box-shadow .2s}
.auth-float input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,184,90,.18)}
.auth-float input[dir=ltr]{text-align:left}
.auth-float input.otp{text-align:center;letter-spacing:.7em;font-size:24px;padding-left:1.2em}
.auth-hint{margin:-4px 0 12px;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.8}
.auth-ch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.auth-ch button{padding:9px 6px;border-radius:10px;border:1px solid var(--line);background:#0c0c0c;color:var(--muted);font-weight:800;font-size:13px;font-family:inherit;transition:.2s}
.auth-ch button.on{border-color:var(--gold);color:var(--gold-2);background:#161616}
.auth-err{min-height:1.4em;color:#ff8f8f;font-weight:800;font-size:13.5px;margin:0 0 10px}
.auth-go{width:100%;padding:14px;border-radius:12px;font-family:inherit;font-weight:800;font-size:17px;color:#141414;background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);box-shadow:0 8px 22px rgba(224,184,90,.28);transition:transform .15s,filter .15s}
.auth-go:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07)}
.auth-go:disabled{opacity:.6;cursor:wait}
.auth-row{display:flex;justify-content:space-between;margin-top:12px}
.auth-link{color:var(--gold-2);font-weight:800;font-size:13.5px;font-family:inherit}
.auth-link:disabled{color:var(--muted);cursor:not-allowed}
.steps{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
.steps i{width:34px;height:5px;border-radius:5px;background:#2a2827;transition:background .3s}
.steps i.on{background:var(--gold)}
.lb-box{width:min(480px,94vw);text-align:right;font-family:'Vazirmatn','Tahoma',system-ui,sans-serif}
.lb-box h2{text-align:center}
.lb-list{max-height:55vh;overflow:auto;margin-bottom:16px}
.lb-row{display:grid;grid-template-columns:28px 18px 1fr auto;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line);color:var(--cream)}
.lb-row i{width:18px;height:18px;border-radius:50%;border:2px solid #fff}
.lb-row small{grid-column:3/5;color:var(--muted);font-weight:700;margin-top:-6px}
.lb-row .lb-n{color:var(--gold-2);font-weight:900}
.lb-row:nth-child(1) .lb-n{font-size:20px}
.lb-empty{text-align:center;color:var(--muted);font-weight:700}
.pl-row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--cream)}
.pl-row i{width:18px;height:18px;border-radius:50%;border:2px solid #fff}
.pl-row b{font-weight:800}
.pl-row small{grid-column:2/3;color:var(--muted);font-weight:700;margin-top:-6px}
.pl-row .pl-cnt{color:var(--gold-2);font-weight:900;margin-inline-end:8px}
.pl-row button{grid-row:1/3;grid-column:3;padding:8px 18px;border-radius:12px;font-family:inherit;font-weight:800;cursor:pointer;background:linear-gradient(180deg,var(--gold-2),var(--gold,#e0b85a));color:#1a1405;border:0}
.pl-row button:hover{filter:brightness(1.08)}

/* ===== main menu ===== */
#lobby{font-family:'Vazirmatn','Tahoma','Nunito',system-ui,sans-serif;overflow:auto;justify-content:flex-start;padding:70px 16px 140px}
#lobby .topbar{z-index:3}
#lobby .topbar .links{display:flex;align-items:center;gap:12px}
#lobby .lobby-die{width:92px;height:92px;margin:10px 0 4px;flex:none}
#lobby .logo{font-size:84px}
#lobby .tag{margin:6px 0 18px;font-size:15px}
.menu-hello{margin:0 0 12px;color:var(--gold-2);font-weight:800;font-size:18px;z-index:1}
#lobby .name-input{margin-bottom:14px;z-index:1}
.menu{display:flex;flex-direction:column;gap:12px;width:min(420px,100%);z-index:1}
.m-btn{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border-radius:16px;text-align:right;font-family:inherit;transition:transform .18s,filter .18s,box-shadow .18s}
.m-btn .ico{font-size:34px;flex:none}
.m-btn span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.m-btn b{font-size:20px;font-weight:800}
.m-btn small{font-size:13px;font-weight:600;opacity:.8}
.m-main{padding:20px 22px}
.m-main b{font-size:25px}
.m-main .ico{font-size:44px}
.m-sec{background:rgba(22,22,22,.92);border:1px solid var(--line-strong);color:var(--gold-2)}
.m-sec small{color:var(--muted)}
.m-btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
.m-sec:hover{box-shadow:0 0 22px rgba(224,184,90,.25)}
.m-btn:active{transform:scale(.98)}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border-radius:16px;background:rgba(22,22,22,.85);border:1px solid var(--line);color:var(--cream);font-family:inherit;transition:transform .18s,border-color .18s,background .18s}
.m-tile .ico{font-size:30px;color:var(--gold)}
.m-tile b{font-size:15px;font-weight:800}
.m-tile:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(36,33,25,.95)}
.menu-foot{margin-top:18px;color:#3a3837;font-weight:700;font-size:12px;z-index:1}
.menu>*{animation:menuin .55s cubic-bezier(.2,1.2,.35,1) both}
.menu>:nth-child(2){animation-delay:.06s}.menu>:nth-child(3){animation-delay:.12s}
@keyframes menuin{from{opacity:0;transform:translateY(22px)}}
.btn-acc{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414!important;font-weight:800;font-family:inherit}
.btn-acc:hover{filter:brightness(1.08)}
.srv-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(0,0,0,.3);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted);cursor:default}
.srv-pill i{width:9px;height:9px;border-radius:50%;background:#e6b94a;box-shadow:0 0 8px currentColor}
.srv-pill.on i{background:#4ee08e}
.srv-pill.off{cursor:pointer;color:#ffb3b3;border-color:rgba(255,120,120,.4)}.srv-pill.off i{background:#ff6b6b}
.user-chip .uc-main{display:flex;align-items:center;gap:10px;width:auto;height:auto;border:0;font-size:inherit;color:inherit;padding:0 4px;font-family:inherit}
.user-chip .uc-main:hover{color:var(--gold-2)}
.m-card{width:min(440px,94vw);text-align:right;font-family:'Vazirmatn','Tahoma',system-ui,sans-serif;max-height:92vh;overflow:auto}
.m-card h2{text-align:center;font-family:inherit;font-size:24px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line)}
.set-row b{display:block;color:var(--cream);font-size:16px}.set-row small{color:var(--muted);font-weight:600}
.set-row input[type=range]{width:150px;accent-color:#e0b85a}
.help-body p{margin:0 0 12px;color:var(--cream);line-height:1.95;font-weight:600;font-size:14.5px}
.help-body b{color:var(--gold-2)}
.help-card .help-body{max-height:52vh;overflow:auto;padding-left:6px;margin-bottom:14px}
.prof-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.prof-head b{display:block;font-size:20px;color:#fff}.prof-head small{color:var(--muted);direction:ltr;display:inline-block}
.prof-av{width:54px;height:54px;border-radius:50%;border:3px solid #fff;flex:none}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.prof-stats div{background:#0c0c0c;border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center}
.prof-stats b{display:block;font-size:20px;color:var(--gold-2)}.prof-stats small{color:var(--muted);font-weight:700;font-size:12px}
.prof-lab{margin:0 0 10px;color:var(--muted);font-weight:800;font-size:13px}
.prof-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px;place-items:center}
.prof-sw .pk-sw{width:36px;height:36px}.prof-sw .pk-sw:hover{width:40px;height:40px}.prof-sw .pk-sw.sel{width:42px;height:42px}
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media (max-width:520px){#lobby .logo{font-size:64px}#lobby .topbar{left:12px;right:12px;top:14px}.srv-pill span{display:none}}
#lobby>*{flex-shrink:0}

/* ===== navigation bar ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:5;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
  font-family:'Vazirmatn','Tahoma','Nunito',system-ui,sans-serif;
  background:linear-gradient(180deg,rgba(20,20,20,.96),rgba(8,8,8,.92));
  border-bottom:1px solid rgba(224,184,90,.3);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.navbar::after{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#f3d98b,transparent);opacity:.8}
.nav-brand{display:flex;align-items:center;gap:10px;flex:none}
.nav-brand svg{width:34px;height:34px;transform:rotate(-8deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.nav-brand .logo{font-size:30px}
.nav-links{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links button{position:relative;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;color:var(--cream);font-weight:700;font-size:15px;font-family:inherit;transition:color .2s,background .2s}
.nav-links button .ico{font-size:18px;color:var(--gold);transition:transform .2s}
.nav-links button::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--gold-2);transform:scaleX(0);transition:transform .22s}
.nav-links button:hover{background:rgba(224,184,90,.1);color:#fff}
.nav-links button:hover::after{transform:scaleX(1)}
.nav-links button:hover .ico{transform:translateY(-2px) scale(1.1)}
.nav-end{display:flex;align-items:center;gap:10px;flex:none}
.nav-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(22,22,22,.85);color:var(--gold-2);font-size:20px;transition:.2s}
.nav-ic:hover{border-color:var(--gold);background:rgba(224,184,90,.14);box-shadow:0 0 14px rgba(224,184,90,.25)}
.navbar .btn-acc{padding:9px 18px;box-shadow:0 4px 16px rgba(224,184,90,.28)}
.navbar .user-chip{padding:5px 6px 5px 12px;border-radius:12px;background:rgba(22,22,22,.85)}
#lobby{padding-top:96px}
@media (max-width:900px){
  .nav-links{position:static;transform:none;margin-inline:auto}
  .nav-links button span{display:none}.nav-links button{padding:10px 12px}
  .nav-brand .logo{display:none}
}
@media (max-width:560px){.navbar{padding:0 10px;gap:6px}.navbar .btn-acc span,.srv-pill span,.user-chip small{display:none}.navbar .btn-acc{padding:10px 12px}}
#lobby .navbar .logo{font-size:30px;line-height:1}
.navbar button:focus{outline:none}
.navbar button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
@media (max-width:900px){#lobby .navbar .logo{display:none}}

/* ===== themed scrollbars ===== */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--gold) rgba(8,8,8,.6)}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(8,8,8,.75),rgba(22,22,22,.75));border-radius:10px;box-shadow:inset 0 0 0 1px rgba(224,184,90,.12)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-2),var(--gold) 50%,var(--gold-3));border-radius:10px;border:2px solid rgba(8,8,8,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff2c4,var(--gold-2) 50%,var(--gold));box-shadow:0 0 8px rgba(224,184,90,.45),inset 0 1px 0 rgba(255,255,255,.5)}
::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,var(--gold),var(--gold-3))}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none}
.chat .msgs::-webkit-scrollbar,#mpList::-webkit-scrollbar,.lb-list::-webkit-scrollbar,.help-card .help-body::-webkit-scrollbar{width:7px}

/* ===== lobby background ===== */
.lobby-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 800px at 50% 30%,#1b1b1b 0%,#101010 50%,#050505 100%)}
.lb-aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.lb-a1{width:620px;height:620px;left:-160px;top:8%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);animation:lbDrift1 26s ease-in-out infinite alternate}
.lb-a2{width:560px;height:560px;right:-140px;top:30%;background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 70%);animation:lbDrift2 32s ease-in-out infinite alternate}
.lb-a3{width:520px;height:380px;left:50%;top:-140px;margin-left:-260px;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);opacity:.35;animation:lbDrift3 22s ease-in-out infinite alternate}
@keyframes lbDrift1{to{transform:translate(160px,-70px) scale(1.15)}}
@keyframes lbDrift2{to{transform:translate(-180px,60px) scale(.9)}}
@keyframes lbDrift3{to{transform:translate(0,40px) scale(1.2)}}
.lb-floor{--tile:72px;position:absolute;left:-50%;right:-50%;bottom:-2px;height:52vh;transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 88%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 88%)}
.lb-floor::before{content:"";position:absolute;left:0;right:0;top:calc(var(--tile) * -1);bottom:0;will-change:transform;
  background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);
  background-size:var(--tile) var(--tile);background-position:center bottom;animation:lbFloor 9s linear infinite}
@keyframes lbFloor{to{transform:translateY(var(--tile))}}
.lobby-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40vh;background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.08),transparent 70%)}
.lb-dust i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.5);opacity:0;animation:lbRise var(--d) linear infinite;animation-delay:var(--w)}
@keyframes lbRise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}60%{transform:translate(24px,-60vh);opacity:.5}100%{transform:translate(-14px,-105vh);opacity:0}}
.lb-vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.65) 100%)}
.lb-halo{position:absolute;top:60px;left:50%;width:560px;height:340px;margin-left:-280px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.12),rgba(255,255,255,.04) 55%,transparent);animation:lbPulse 6s ease-in-out infinite}
@keyframes lbPulse{50%{opacity:.6;transform:scale(1.06)}}
@media (max-width:560px){.lb-aurora{filter:blur(70px)}.lb-a1,.lb-a2{width:380px;height:380px}.lb-halo{width:360px;margin-left:-180px}.lb-floor{--tile:48px}}
@media (prefers-reduced-motion:reduce){.lobby-bg *,.lb-halo{animation:none!important}}

/* ===== tile popover (side window) ===== */
.overlay.tile-ov{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:block;pointer-events:none;animation:none}
.tile-modal{position:fixed;pointer-events:auto;width:270px;max-height:calc(100vh - 16px);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.65),0 0 22px rgba(224,184,90,.18)}
.tile-modal .tm-head{padding:12px 14px 8px;gap:10px}
.tile-modal .tm-art{width:54px;height:48px}
.tile-modal .tm-title h2{font-size:19px}
.tile-modal .tm-sub{margin-top:3px;font-size:13px}
.tile-modal .tm-flag{width:18px;height:18px}
.tile-modal .tm-body{padding:10px 14px 14px}
.tile-modal .tm-chips{gap:6px;margin-bottom:8px}
.tile-modal .tm-chip{padding:4px 9px;font-size:12.5px}
.tile-modal .tm-row{padding:6px 10px;font-size:13px}
.tile-modal .tm-note{font-size:11.5px;margin:4px 0 10px}
.tile-modal .tm-text{font-size:13.5px;margin:2px 0 6px}
.tile-modal .tm-actions{gap:6px}
.tile-modal .tm-actions button{padding:8px 6px;font-size:12.5px}
.tile-modal .tm-hint{font-size:12px;margin-top:8px}
.tm-x{position:absolute;top:6px;right:8px;width:26px;height:26px;border-radius:8px;color:var(--muted);font-size:20px;line-height:1;display:grid;place-items:center}
.tm-x:hover{background:rgba(255,255,255,.08);color:var(--gold-2)}
.tile.tile-sel{outline:2px solid var(--gold-2);outline-offset:-2px;filter:brightness(1.15);z-index:2}

/* ---------- motion polish ---------- */
@keyframes landflash{0%{box-shadow:inset 0 0 0 .2em rgba(243,217,139,0)}25%{box-shadow:inset 0 0 0 .2em rgba(243,217,139,.75),0 0 1.4em rgba(243,217,139,.45)}100%{box-shadow:inset 0 0 0 .2em rgba(243,217,139,0),0 0 0 rgba(243,217,139,0)}}
@keyframes boughtring{0%{box-shadow:0 0 0 0 var(--o,#f3d98b);filter:brightness(1.5)}45%{box-shadow:0 0 0 .5em transparent,inset 0 0 1.6em var(--o,#f3d98b);filter:brightness(1.2)}100%{box-shadow:0 0 0 .9em transparent;filter:none}}
.tile.bought{animation:boughtring .9s ease-out;z-index:4}
@keyframes toastio{0%{opacity:0;transform:translate(-50%,14px) scale(.94)}12%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
.pcard{transition:background .35s,border-color .35s,opacity .35s}
@media (prefers-reduced-motion:reduce){.tile.bought,.toast,.tile.land{animation:none!important}}
.tile .art{transition:transform .2s ease,filter .2s ease;filter:drop-shadow(0 .2em .2em #0008)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){html:not(.rm) .tile:hover .art{transform:translateY(-.15em) scale(1.06);filter:drop-shadow(0 .35em .3em #0009) brightness(1.12)}}
.btn-start:active{translate:0 2px;filter:brightness(1.12)}
.tile.land::after{content:"";position:absolute;inset:2px;border:2px solid #ffe3a4;border-radius:inherit;pointer-events:none;animation:arrival-ring .65s ease-out both}
@keyframes arrival-ring{0%{opacity:1;scale:.85}100%{opacity:0;scale:1.18}}
.board-burst{position:absolute;z-index:12;pointer-events:none;width:0;height:0}
.board-burst i{position:absolute;width:.45em;height:.45em;left:-.225em;top:-.225em;border-radius:2px;background:var(--spark);box-shadow:0 0 .45em var(--spark);animation:purchase-spark .8s cubic-bezier(.16,.7,.35,1) both}
@keyframes purchase-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(140deg) scale(.35)}}
@media(min-width:1201px){
  #game{--board-fit:min(calc(100vw - 518px),calc(100dvh - 24px));grid-template-columns:minmax(220px,1fr) minmax(0,var(--board-fit)) minmax(250px,1fr);gap:12px;padding:12px}
  #game>.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#77613b transparent;gap:10px}
  #game .panel{padding:12px}
  #game .chat{padding:0}
  #game .share{padding:10px}
  #game .share h3{font-size:17px}
  #game .brand-row .logo{font-size:42px}
  #game .brand-row .tools{gap:10px}
  #game .setting{gap:8px}
  #game .board-wrap{overflow:visible;align-items:center;justify-content:center}
  #game .board{--s:var(--board-fit);min-width:0;min-height:0;flex:none;margin:auto}
}
html.rm .tile .art{transition:none}
#languageControl{position:fixed;top:12px;right:12px;z-index:110;font-family:var(--font-ui);color:var(--gold-2)}
.navbar{padding-left:24px;padding-right:300px}
#game{direction:ltr;padding-top:62px}
.board,#dice,.flag,.token{direction:ltr}
html[lang="fa"] .sidebar,html[lang="fa"] .center,html[lang="fa"] .tile .txt,html[lang="fa"] .tile .name,html[lang="fa"] .modal,html[lang="fa"] .tile-modal{direction:rtl}
html[lang="en"] .sidebar,html[lang="en"] .modal,html[lang="en"] .tile-modal{direction:rtl}
.modal .info,.prow,.trade-modal,.tm-text,.tm-note,.tm-hint,.m-card,.m-btn,.auth-pane,.lb-box{text-align:start}
.tile .price,.money,.share-row .url,.bidinput{direction:ltr;unicode-bidi:isolate}
.who>b,.prof-head b,.msg>b{unicode-bidi:plaintext}
html[lang="fa"] .tag{letter-spacing:0}
html[lang="fa"] .setting .tx b{font-size:16px}
html[lang="fa"] .board .tile .name{line-height:1.45;overflow-wrap:anywhere}
html[lang="fa"] .board .tile .name.sm{line-height:1.25}
html[lang="fa"] .board[data-map="middle-east"] .tile .name{font-size:clamp(7px,.78em,13px);line-height:1.4}
html[lang="fa"] .board .corner .name{font-size:1.05em}
html[lang="fa"] .btn-start{font-size:1.2em}
html[lang="fa"] .trades{text-align:right}
html[lang="fa"] .user-chip,html[lang="fa"] .chip,html[lang="fa"] .share h3{font-family:var(--font-ui)}
@media(min-width:1201px){#game{--board-fit:min(calc(100vw - 518px),calc(100dvh - 74px))}}
@media(max-width:1400px){.navbar .srv-pill span{display:none}}
@media(max-width:1200px){#game .board{--s:min(calc(100vw - 16px),calc(100dvh - 74px))}}
@media(max-width:560px){.navbar{padding-left:8px;padding-right:150px;gap:4px}.nav-links{display:none}.nav-end{gap:5px}#languageControl{right:8px}#languageButton{padding:6px 9px;min-width:0}#languageCurrent,.lang-caret{display:none}.nav-brand svg{width:27px;height:27px}.navbar .user-chip{max-width:145px}.navbar .uc-main{min-width:0}.navbar #ucName{max-width:65px;overflow:hidden;text-overflow:ellipsis}html[lang="fa"] .board[data-map="middle-east"] .tile .name{font-size:clamp(7px,.76em,12px)}}
html.rm .tile.land::after,html.rm .board-burst{display:none}
html.rm .tile.bought,html.rm .tile.land{animation:none!important}
@media(prefers-reduced-motion:reduce){.tile .art{transition:none}.tile.land::after,.board-burst{display:none}}

/* ---- language picker ---- */
#languageButton{display:flex;align-items:center;gap:7px;min-width:122px;min-height:38px;padding:6px 11px;background:#111;border:1px solid var(--gold);border-radius:10px;color:var(--gold-2);box-shadow:0 3px 12px #0006;font:700 14px var(--font-ui);cursor:pointer;transition:background .18s,box-shadow .18s,transform .12s}
#languageButton:hover{background:#1c1913;box-shadow:0 4px 16px #0008}
#languageButton:active{transform:scale(.97)}
#languageButton:focus-visible,#languageMenu li:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
#languageCurrent{flex:1;text-align:start;white-space:nowrap}
.lang-globe{width:18px;height:18px;flex:none}
.lang-caret{width:14px;height:14px;flex:none;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
#languageControl.open .lang-caret{transform:rotate(180deg)}
#languageMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;width:max-content;margin:0;padding:5px;list-style:none;background:#14120f;border:1px solid var(--gold);border-radius:12px;box-shadow:0 14px 40px #000c;opacity:0;transform:translateY(-8px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
#languageMenu[hidden]{display:none}
#languageControl.open #languageMenu{opacity:1;transform:none;pointer-events:auto}
#languageMenu li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--cream,#f3ead2);font:700 14px var(--font-ui);cursor:pointer;white-space:nowrap;user-select:none;transition:background .12s}
#languageMenu li:hover,#languageMenu li:focus{background:#e0b85a22;outline:0}
#languageMenu li[aria-selected="true"]{color:var(--gold-2);background:#e0b85a14}
#languageMenu li>span:nth-child(2){flex:1}
.lang-code{display:inline-grid;place-items:center;width:28px;height:22px;border-radius:6px;background:#2a261c;color:var(--gold-2);font-size:11px;letter-spacing:.04em}
.lang-tick{width:16px;height:16px;flex:none;opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
#languageMenu li[aria-selected="true"] .lang-tick{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#languageMenu,.lang-caret,.lang-tick{transition:none}}

/* ---- prices in green ---- */
.tile .price,.board[data-map] .tile .price{color:#4ade80;border-color:rgba(74,222,128,.45);text-shadow:0 0 .5em rgba(34,197,94,.35)}
.tile .price::before{background:linear-gradient(180deg,#4ade80,#16a34a);color:#06210f}

/* ---- trade: country picker ---- */
.trade-assets{display:grid;gap:10px;max-height:260px;padding-inline-end:2px}
.trade-country{border:1px solid var(--line);border-radius:12px;background:#ffffff05;overflow:hidden}
.trade-country-head{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:#ffffff08;color:var(--text);font:800 13px var(--font-ui);cursor:pointer;text-align:start;transition:background .15s}
.trade-country-head:hover{background:#e0b85a18}
.trade-country-head .all{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--gold-2);opacity:.85}
.trade-flag{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid #fff;background:#fff;box-shadow:0 2px 6px #0008;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.trade-flag.other{display:grid;place-items:center;border-color:var(--gold);background:#2a261c;color:var(--gold-2);font-size:13px}
.trade-country-items{display:flex;flex-wrap:wrap;gap:7px;padding:9px}
.trade-asset{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:7px 11px 7px 8px;border-radius:999px;border:1.5px solid var(--line);background:#26231c;color:var(--text);font:700 13px var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s,border-color .18s,box-shadow .2s,transform .15s}
.trade-asset:hover{border-color:var(--gold);transform:translateY(-1px)}
.trade-asset:active{transform:scale(.94)}
.trade-asset i.dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--gold));flex:none}
.trade-asset small{color:#4ade80;font-weight:800}
.trade-asset[aria-pressed="true"]{background:linear-gradient(135deg,#e0b85a,#c9962c);border-color:#fff3c4;color:#1b1405;box-shadow:0 0 0 3px #e0b85a40,0 6px 16px #e0b85a33}
.trade-asset[aria-pressed="true"] small{color:#14532d}
.trade-asset[aria-pressed="true"]::after{content:'✓';font-weight:900;margin-inline-start:2px}
.trade-asset.pop{animation:trade-pop .42s cubic-bezier(.3,1.5,.5,1)}
.trade-asset .rip{position:absolute;border-radius:50%;background:#fff;opacity:.55;transform:scale(0);pointer-events:none;animation:trade-rip .55s ease-out forwards}
.trade-country.spin .trade-flag{transform:rotate(360deg) scale(1.18)}
@keyframes trade-pop{0%{transform:scale(.88)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes trade-rip{to{transform:scale(1);opacity:0}}
.trade-empty{margin:0;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.trade-asset,.trade-flag{transition:none}.trade-asset.pop,.trade-asset .rip{animation:none}}

/* ---- neon hover ring on buttons (static gold) ---- */
:root{--neon:#ffd978}
:is(button,.btn,.btn-start,.btn-gold,.btn-sec,.btn-acc,.btn-copy,.btn-create,.m-btn,.icon-btn,.chip.btn,.trade-card,.oc,.pk-join):not(:disabled):not(.hidden):hover,
:is(button,.btn,.m-btn,.trade-card):not(:disabled):focus-visible{
  border-color:var(--neon);
  box-shadow:0 0 0 1.5px var(--neon),0 0 8px 1px var(--neon),0 0 20px 3px color-mix(in srgb,var(--neon) 50%,transparent),inset 0 0 8px color-mix(in srgb,var(--neon) 30%,transparent);
  transition:box-shadow .2s,transform .15s,background .2s,border-color .2s;
}
:is(button,.btn,.btn-start,.m-btn):not(:disabled):active{transform:translateY(1px) scale(.98)}

/* ---- C coins ---- */
.coin-c{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c230 55%,#b8860b);color:#4a3200;font:900 14px var(--font-ui);box-shadow:inset 0 0 0 2px #fff3b088,0 2px 6px #0007}
.coin-c.big{width:46px;height:46px;font-size:26px}
.coin-chip{position:fixed;top:12px;right:154px;z-index:109;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:5px 8px 5px 6px;border-radius:999px;border:1px solid var(--gold);background:#111;color:var(--gold-2);font:800 14px var(--font-ui);cursor:pointer}
.coin-chip b{direction:ltr;min-width:1ch}
.coin-plus{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1b1405;font-size:16px;line-height:1}
.shop-card{width:min(520px,94vw)}
.shop-bal{display:flex;align-items:center;gap:12px;justify-content:center;margin:14px 0}
.shop-bal small{display:block;color:var(--muted);font-size:12px}
.shop-bal b{font-size:26px;color:var(--gold-2)}
.shop-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.shop-pack{display:grid;justify-items:center;gap:6px;padding:14px 8px;border-radius:12px;border:1.5px solid var(--line);background:#26231c;color:var(--text);font:inherit;cursor:pointer;transition:transform .15s,border-color .2s,background .2s}
.shop-pack:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold);background:#2f2b20}
.shop-pack b{font-size:20px;color:var(--gold-2)}
.shop-pack small{color:#4ade80;font-weight:800}
.shop-pack:disabled{opacity:.55;cursor:wait}
.shop-pack.busy{border-color:var(--gold)}
.shop-msg{margin:6px 0;padding:9px 12px;border-radius:10px;font-size:13px;text-align:center}
.shop-msg.ok{background:#16a34a22;color:#4ade80}.shop-msg.warn,.shop-msg.info{background:#e0b85a1c;color:var(--gold-2)}.shop-msg.bad{background:#dc262622;color:#f87171}
.shop-note{text-align:center;color:var(--muted);font-size:12px;margin:6px 0 0}
@media(max-width:560px){.coin-chip{right:62px;padding:4px 7px 4px 4px;gap:5px;font-size:13px}.coin-chip .coin-plus{display:none}}

/* ---- item store ---- */
.m-tile.wide{grid-column:1/-1;flex-direction:row;justify-content:center;gap:12px;padding:16px}
.coin-c.sm{width:18px;height:18px;font-size:11px;box-shadow:none}
.store-card{width:min(640px,95vw);max-height:92dvh;overflow-y:auto}
.store-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.store-top .shop-bal{margin:8px 0}
.store-buyc{padding:9px 14px;border-radius:10px;border:1px solid var(--gold);background:#1b1810;color:var(--gold-2);font:800 14px var(--font-ui);cursor:pointer}
.store-tabs{display:flex;gap:6px;margin:10px 0;padding:4px;border-radius:12px;background:#0d0c0a;border:1px solid var(--line)}
.store-tabs button{flex:1;padding:9px 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:800 14px var(--font-ui);cursor:pointer;transition:background .15s,color .15s}
.store-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0}
.st-item{display:grid;gap:8px;justify-items:center;padding:12px 8px;border-radius:12px;border:1.5px solid var(--line);background:#211e17;transition:border-color .2s,transform .15s}
.st-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.st-item.equipped{border-color:#4ade80;box-shadow:0 0 0 2px #4ade8030}
.st-prev{display:grid;place-items:center;height:56px;width:100%}
.st-prev .token{position:relative;font-size:19px;transition:none}
.st-name{font-weight:800;font-size:13px;text-align:center}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 6px;border-radius:9px;border:1px solid var(--line);background:#2d2a21;color:var(--text);font:800 13px var(--font-ui);cursor:pointer}
.st-btn.buy{background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405;border-color:#fff3c4}
.st-btn.buy s{opacity:.6;font-size:11px}
.st-btn.on{background:#16a34a22;color:#4ade80;border-color:#4ade8060}
.st-btn.lock{opacity:.5;cursor:not-allowed}
.vip-hero{display:grid;justify-items:center;gap:8px;padding:14px 6px;text-align:center}
.vip-big{width:64px;height:64px;color:var(--gold-2);filter:drop-shadow(0 0 14px #f2c23099)}
.vip-hero h3{margin:0;color:var(--gold-2);font-size:20px}
.vip-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.vip-list li::before{content:'✓';color:#4ade80;font-weight:900;margin-inline-end:8px}
.vip-on{margin:0;color:#4ade80;font-weight:800}
.vip-buy{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;border:1px solid #fff3c4;background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405;font:800 16px var(--font-ui);cursor:pointer}
.vip-buy small{font-weight:700}
.vip-badge{width:1.1em;height:1.1em;flex:none;color:#f2c230;vertical-align:-.15em;margin-inline-start:.3em;filter:drop-shadow(0 0 4px #f2c23099)}
.pcard .vip-badge{width:16px;height:16px}

/* ---- token skins (the player's colour stays on the rim) ---- */
.token[class*="skin-"],.pcard .av[class*="skin-"]{border-color:var(--p)}
.token.skin-gold,.pcard .av.skin-gold,.gl .pd.skin-gold{background:radial-gradient(circle at 34% 28%,#fff6c4,transparent 45%),linear-gradient(145deg,#ffe58a,#d9a521 55%,#8a5e00);filter:drop-shadow(0 0 .35em #f2c230aa)}
.token.skin-ice,.pcard .av.skin-ice,.gl .pd.skin-ice{background:radial-gradient(circle at 34% 28%,#fff,transparent 45%),linear-gradient(145deg,#e9fbff,#7fd0f5 60%,#3b8fc4);filter:drop-shadow(0 0 .35em #7fd0f5aa)}
.token.skin-emerald,.pcard .av.skin-emerald,.gl .pd.skin-emerald{background:radial-gradient(circle at 34% 28%,#d6ffe6,transparent 45%),linear-gradient(145deg,#7dffb0,#16a864 55%,#07623a);filter:drop-shadow(0 0 .35em #16a864aa)}
.token.skin-neon,.pcard .av.skin-neon,.gl .pd.skin-neon{background:radial-gradient(circle,#0e2238 30%,#050a14);box-shadow:inset 0 0 .7em #22e6ff,0 0 .6em #22e6ff;animation:skin-pulse 2.2s ease-in-out infinite}
.token.skin-fire,.pcard .av.skin-fire,.gl .pd.skin-fire{background:radial-gradient(circle at 50% 70%,#fff3a0,#ff9d1c 40%,#e0361b 75%,#7a0f0f);animation:skin-fire 1s ease-in-out infinite alternate}
.token.skin-galaxy,.pcard .av.skin-galaxy,.gl .pd.skin-galaxy{background:radial-gradient(circle at 25% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 2px),radial-gradient(circle at 55% 20%,#ffd1ff 0 1px,transparent 2px),radial-gradient(circle at 40% 40%,#8b5cf6,#312e81 60%,#0b0720);filter:drop-shadow(0 0 .35em #8b5cf6aa)}
.token.skin-royal,.pcard .av.skin-royal,.gl .pd.skin-royal{background:radial-gradient(circle at 34% 28%,#e9d5ff,transparent 45%),linear-gradient(145deg,#a855f7,#5b21b6 60%,#2e1065);border-color:#ffd978;filter:drop-shadow(0 0 .45em #ffd978aa)}
@keyframes skin-pulse{50%{box-shadow:inset 0 0 .35em #22e6ff,0 0 1em #22e6ff}}
@keyframes skin-fire{from{filter:drop-shadow(0 0 .25em #ff7a1a)}to{filter:drop-shadow(0 0 .6em #ff3d00)}}

/* ---- name effects ---- */
b.fx-gold,b.fx-ice,b.fx-fire,b.fx-rainbow,b.fx-royal{background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:fx-slide 3.2s linear infinite}
b.fx-gold{background-image:linear-gradient(90deg,#b8860b,#fff1a8,#f2c230,#fff1a8,#b8860b)}
b.fx-ice{background-image:linear-gradient(90deg,#7fd0f5,#fff,#9be2ff,#fff,#7fd0f5)}
b.fx-fire{background-image:linear-gradient(90deg,#ff3d00,#ffb300,#fff176,#ffb300,#ff3d00);animation-duration:1.8s}
b.fx-rainbow{background-image:linear-gradient(90deg,#ff4d4d,#ffb84d,#ffee4d,#4dff88,#4dc3ff,#b04dff,#ff4d4d);animation-duration:4s}
b.fx-royal{background-image:linear-gradient(90deg,#a855f7,#ffd978,#a855f7,#ffd978,#a855f7)}
b.fx-neon{color:#fff!important;text-shadow:0 0 4px #22e6ff,0 0 10px #22e6ff,0 0 20px #0ab3d1}
@keyframes fx-slide{from{background-position:0 0}to{background-position:183.3333% 0}}   /* exactly one gradient period (2.2 × width) → seamless loop */
.fx-demo{font-size:17px}
@media(prefers-reduced-motion:reduce){b[class*="fx-"],.token[class*="skin-"],.pcard .av[class*="skin-"]{animation:none!important}}

@media(max-width:560px){
  #languageButton{min-width:0;padding:6px 9px}
  #languageCurrent,.lang-caret{display:none}
  .coin-chip{right:62px}
}
.pcard .who{flex-wrap:wrap;row-gap:2px}
.pcard .who b{min-width:4ch;max-width:100%}

/* layout never mirrors when the language changes; only the text itself follows its own script */
html[lang="en"] :is(button,.m-btn small,.m-btn b,.m-tile b,.nav-links span,.modal h2,.modal p,.modal small,.modal label,.shop-msg,.st-name,.store-tabs button,.pcard .who,.tm-text,.tm-note,.tm-hint,.setting .tx,.prow span,.lb-row span,.tag,.menu-hello,.tag){unicode-bidi:plaintext}
.nav-links{position:static;transform:none;margin:0 auto}
html[lang="en"] .nav-links button{padding:10px 11px;font-size:14px}
html[lang="en"] :is(.user-chip small,#ucStats,.srv-pill span,.chip,.money,.delta,.lb-row,.prof-stats small,.shop-bal small,.shop-pack small,.store-grid,.vip-hero,input,textarea){unicode-bidi:plaintext}
html[lang="en"] ::placeholder{unicode-bidi:plaintext}
@media(max-width:1180px){.nav-links button span{display:none}.nav-links button{padding:10px 12px}}
@media(max-width:1400px){.navbar .user-chip small{display:none}.navbar{gap:8px}}

/* ---- map picker (host) ---- */
.map-pick{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--gold);background:#0c0c0c;color:var(--gold-2);font:800 16px var(--font-ui);cursor:pointer;transition:.15s}
.map-pick .ico{font-size:18px;color:var(--gold)}
.map-pick:hover{background:rgba(224,184,90,.12);box-shadow:0 0 14px rgba(224,184,90,.25)}
#optMap:disabled+.map-pick{opacity:.55;cursor:not-allowed;box-shadow:none;background:#0c0c0c}
.mp-box{width:min(920px,96vw);max-height:92vh;overflow:auto;text-align:start;padding:22px 26px}
.mp-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mp-head h2{margin:0;flex:1;text-align:start}
.mp-bal{display:inline-flex;align-items:center;gap:8px;color:var(--gold-2);font-weight:800}
.mp-bal b{direction:ltr;font-size:18px}
.mp-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#181818;color:var(--gold-2);font-size:22px;line-height:1;cursor:pointer}
.mp-x:hover{border-color:var(--gold);background:rgba(224,184,90,.12)}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mp-card{display:grid;justify-items:center;gap:12px;padding:20px 14px 16px;border-radius:14px;border:1.5px solid var(--line);background:#211e17;transition:border-color .2s,transform .15s,box-shadow .2s}
.mp-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.mp-card.sel{border-color:var(--gold);background:linear-gradient(165deg,#3a3017,#211e17);box-shadow:0 0 0 2px rgba(224,184,90,.22),0 0 30px rgba(224,184,90,.2)}
.mp-thumb svg{width:132px;height:132px;display:block}
.mp-name{font-weight:800;font-size:18px;color:var(--cream)}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:128px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:#2d2a21;color:var(--cream);font:800 15px var(--font-ui);cursor:pointer}
.mp-btn.use{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.mp-btn.buy{background:linear-gradient(180deg,#c9962c,#8f6a1b);color:#fff7dc;border-color:#e0b85a}
.mp-btn.buy s{opacity:.65;font-size:12px}
.mp-btn.on{background:#16a34a22;color:#4ade80;border-color:#4ade8060;cursor:default}
.mp-btn.lock{opacity:.5;cursor:not-allowed}
.mp-prev{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font:700 13px var(--font-ui);cursor:pointer}
.mp-prev svg{width:15px;height:15px}
.mp-prev:hover{color:var(--gold-2);border-color:var(--gold)}
.mp-pv-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mp-pv-head h3{margin:0;flex:1;color:var(--gold-2);font-size:20px}
.mp-pv-head small{color:var(--muted);font-weight:700}
.mp-back{padding:7px 14px;border-radius:9px;border:1px solid var(--line-strong);background:#181818;color:var(--gold-2);font:800 14px var(--font-ui);cursor:pointer}
.mp-back:hover{border-color:var(--gold)}
.mp-pv-board{direction:ltr;display:grid;gap:3px;width:min(620px,100%);aspect-ratio:1;margin:0 auto;padding:8px;border-radius:14px;background:#15120c;border:1px solid var(--line)}
.mp-cell{display:grid;place-items:center;border-radius:4px;background:var(--c,#3a3424);overflow:hidden;padding:1px;text-align:center;min-width:0}
.mp-cell.sp{opacity:.8}
.mp-cell span{font-size:clamp(6px,1.1vw,10px);font-weight:800;line-height:1.05;color:#12100a;overflow:hidden;max-width:100%;overflow-wrap:anywhere}
.mp-cell.sp span{color:var(--cream)}
.mp-pv-center{display:grid;place-items:center;align-content:center;gap:8px;border-radius:12px;border:1px dashed var(--line);color:var(--gold-2);font-weight:800;text-align:center}
.mp-pv-center svg{width:min(90px,26%);height:auto}
.mp-pv-foot{display:flex;justify-content:center;margin-top:14px}
@media(max-width:560px){.mp-box{padding:16px}.mp-thumb svg{width:110px;height:110px}}

/* ---- dice skins (each player's dice use their own colours; free: onyx, ocean, ruby) ---- */
.die-onyx{--df-a:#454545;--df-b:#262626;--df-c:#101010;--df-bd:#5a5a5a;--df-hi:#ffffff2a;--df-lo:#000000b0;--pip-a:#fff2c4;--pip-b:#e0b85a;--pip-c:#a8812f;--pip-rim:#00000077}
.die-ocean{--df-a:#d6ecff;--df-b:#8fc1f2;--df-c:#4f8fd0;--df-bd:#e2f2ff;--df-hi:#f4faff;--df-lo:#1d4a8a66;--pip-a:#2c4c78;--pip-b:#14284a;--pip-c:#0a1630;--pip-rim:#e8f4ff}
.die-ruby{--df-a:#ffa6a6;--df-b:#d84a4a;--df-c:#8f1d1d;--df-bd:#ffd0d0;--df-hi:#ffe6e6;--df-lo:#4a0a0a66;--pip-a:#fffdf0;--pip-b:#f0e5c9;--pip-c:#cdb98a;--pip-rim:#00000066}
.die-gold{--df-a:#fff1b8;--df-b:#f0c648;--df-c:#a8761a;--df-bd:#fff5cf;--df-hi:#fffbe6;--df-lo:#6b4a0a66}
.die-emerald{--df-a:#b8f0d4;--df-b:#3fbf8a;--df-c:#14684a;--df-bd:#d4ffea;--df-hi:#eafff4;--df-lo:#05382666;--pip-a:#f4fff9;--pip-b:#d6f5e6;--pip-c:#9bd4b8;--pip-rim:#02201688}
.die-neon{--df-a:#2c1c52;--df-b:#1a1033;--df-c:#0d0820;--df-bd:#8a5cff;--df-hi:#8a5cff44;--df-lo:#000000cc;--pip-a:#e0ffff;--pip-b:#19f0ff;--pip-c:#0a8fb0;--pip-rim:#19f0ffaa}
.die-fire{--df-a:#ffd08a;--df-b:#ff7a2e;--df-c:#b0200e;--df-bd:#ffd9a8;--df-hi:#fff0d6;--df-lo:#5a0d0066;--pip-a:#5a1a0a;--pip-b:#2a0a04;--pip-c:#120402;--pip-rim:#ffd9a8}
.die-galaxy{--df-a:#6b5bd6;--df-b:#3a2a8c;--df-c:#150f45;--df-bd:#b8a8ff;--df-hi:#c8bcff55;--df-lo:#000000bb;--pip-a:#ffffff;--pip-b:#e8e1ff;--pip-c:#b9a8ff;--pip-rim:#8a7aff99}

.dp{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:10%;padding:16%;width:50px;height:50px;border-radius:10px;border:1px solid var(--df-bd,#f5e9c9);background:linear-gradient(145deg,var(--df-a,#fffae9) 0%,var(--df-b,#f0e5c9) 48%,var(--df-c,#d0bd92) 100%);box-shadow:inset 2px 2px 4px var(--df-hi,#fffdf5),inset -2px -3px 5px var(--df-lo,#987b4a5c),0 4px 10px #0008;transform:rotate(-8deg)}
.dp i{display:block;border-radius:50%;place-self:center;width:100%;aspect-ratio:1}
.dp i.on{background:radial-gradient(circle at 65% 70%,var(--pip-a,#4e412e) 0%,var(--pip-b,#211e19) 65%,var(--pip-c,#0c1210) 100%);box-shadow:inset 1px 1px 2px #0009,0 1px 1px var(--pip-rim,#fff9e7)}

/* ---- appearance picker: tabs + skin / dice cards (paid ones are locked until bought) ---- */
.pk-tabs{display:flex;gap:.4em;padding:.3em;border-radius:.8em;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);font-family:'Vazirmatn','Tahoma',system-ui,sans-serif}
.pk-tabs button{padding:.45em 1.1em;border:0;border-radius:.6em;background:transparent;color:#cfc6ad;font:800 .95em/1 inherit;cursor:pointer;transition:background .15s,color .15s}
.pk-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405}
.pk-items{max-width:min(46em,92%);max-height:46%;overflow:auto;font-family:'Vazirmatn','Tahoma',system-ui,sans-serif;direction:rtl}
.pk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.6em,1fr));gap:.7em}
.pk-it{position:relative;display:grid;justify-items:center;gap:.35em;padding:.7em .4em;border-radius:.8em;border:.12em solid rgba(255,255,255,.14);background:rgba(20,18,13,.82);color:var(--cream);cursor:pointer;font-family:inherit;transition:border-color .15s,transform .12s}
.pk-it:hover{border-color:#e0b85a;transform:translateY(-.15em)}
.pk-it.sel{border-color:#4ade80;box-shadow:0 0 0 .15em #4ade8035}
.pk-it b{font-size:.82em}
.pk-prev{position:relative;display:grid;place-items:center;height:3.4em;width:100%}
.pk-prev .token{position:relative;font-size:1.25em;transition:none}
.pk-prev .dp{width:2.9em;height:2.9em}
.pk-it.locked .pk-prev>:not(.pk-lock){filter:grayscale(.75) brightness(.6)}
.pk-lock{position:absolute;width:1.2em;height:1.2em;color:#f0d48a;filter:drop-shadow(0 .1em .2em #000)}
.pk-tag{font-size:.72em;font-weight:800;padding:.2em .6em;border-radius:.6em;background:#2d2a21;color:#e8dfc4;display:inline-flex;align-items:center;gap:.35em}
.pk-tag.on{background:#16a34a22;color:#4ade80}.pk-tag.lock{opacity:.8}
.pk-tag.buy{background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405}
.pk-note{margin:.8em 0 0;text-align:center;font-size:.78em;color:#bdb49b}
.pk-empty{text-align:center;color:var(--cream);display:grid;gap:.8em;justify-items:center}
.pk-login{padding:.5em 1.2em;border-radius:.6em;border:1px solid #fff3c4;background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405;font:800 1em inherit;cursor:pointer}

/* ---- profile: collection showcase ---- */
.prof-card{width:min(560px,94vw)}
.col-head{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.col-head .prof-lab{margin:0;font-size:15px;color:var(--gold-2)}
.col-vip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:#f2c23022;border:1px solid #f2c23066;color:#f2c230;font-weight:800;font-size:12px}
.col-total{margin:8px 0 12px}
.col-bar{height:10px;border-radius:99px;background:#0c0c0c;border:1px solid var(--line);overflow:hidden}
.col-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9962c,#f0d48a);border-radius:99px;transition:width .5s}
.col-total small{display:block;margin-top:5px;color:var(--muted);font-weight:700;font-size:12px}
.col-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.col-sum div{background:#0c0c0c;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.col-sum b{display:block;font-size:20px;color:var(--gold-2)}.col-sum b span{font-size:13px;color:var(--muted)}
.col-sum small{color:var(--muted);font-weight:700;font-size:12px}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-bottom:12px}
.col-it{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:10px;border:1.5px solid var(--line);background:#161410;color:var(--text);cursor:pointer;font-family:inherit}
.col-it:hover{border-color:var(--gold)}
.col-it.on{border-color:#4ade80;box-shadow:0 0 0 2px #4ade8030}
.col-it:not(.own){opacity:.5}.col-it:not(.own) .col-prev{filter:grayscale(.8) brightness(.65)}
.col-it.own{background:#211e17}
.col-prev{display:grid;place-items:center;height:42px;width:100%}
.col-prev .token{position:relative;font-size:15px;transition:none}
.col-prev .dp{width:38px;height:38px}
.col-prev .fx-demo{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-it small{font-size:11px;font-weight:700;text-align:center;line-height:1.3}
.col-it em{position:absolute;top:2px;inset-inline-start:5px;font-style:normal;color:#4ade80;font-weight:900;font-size:12px}
.col-it .pk-lock{top:6px;inset-inline-end:6px;width:14px;height:14px}

/* ---- support / tickets / reports / admin ---- */
.pcard{position:relative}
.rep-btn{position:absolute;top:6px;inset-inline-end:8px;border:0;background:transparent;color:#8a8472;font-size:15px;cursor:pointer;opacity:.55;padding:2px 5px;border-radius:6px}
.rep-btn:hover{opacity:1;color:#ff8a7a;background:#ff8a7a18}
.m-tile{position:relative}
.tile-badge{position:absolute;top:8px;inset-inline-end:10px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#ef4444;color:#fff;font:800 12px/20px var(--font-ui);font-style:normal;text-align:center}
.sup-card{width:min(600px,94vw)}
.sup-form{display:grid;gap:10px;margin:8px 0}
.sup-form label{display:grid;gap:5px;color:var(--muted);font-weight:800;font-size:13px}
.sup-card :is(input,select,textarea),#repRoot :is(input,select,textarea){width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0c0c0c;color:var(--text);font:600 14px var(--font-ui);resize:vertical;box-sizing:border-box}
.sup-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:10px 0}
.sup-actions button{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#2d2a21;color:var(--text);font:800 13px var(--font-ui);cursor:pointer}
.sup-actions .primary{background:linear-gradient(180deg,#f0d48a,#c9962c);color:#1b1405;border-color:#fff3c4}
.sup-actions .danger{background:#7f1d1d;border-color:#ef4444;color:#fff}
.tk-list,.rp-list{display:grid;gap:8px;margin:10px 0;max-height:46vh;overflow:auto}
.tk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#161410;color:var(--text);cursor:pointer;text-align:right;font-family:inherit}
.tk-row:hover{border-color:var(--gold)}
.tk-row b,.tk-head b{display:block;font-size:14px}.tk-row small,.tk-head small,.rp-item small{display:block;color:var(--muted);font-weight:700;font-size:12px;margin-top:3px}
.tk-st{font-style:normal;font-weight:800;font-size:12px;padding:3px 10px;border-radius:99px;white-space:nowrap;background:#2d2a21;color:#e8dfc4}
.tk-st.open{background:#f59e0b22;color:#fbbf24}.tk-st.answered{background:#16a34a22;color:#4ade80}.tk-st.closed{background:#ef444422;color:#f87171}
.tk-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 10px}
.tk-thread{display:grid;gap:8px;max-height:36vh;overflow:auto;margin-bottom:10px}
.tk-msg{padding:10px 12px;border-radius:12px;background:#1d1a14;border:1px solid var(--line);max-width:88%}
.tk-msg.adm{background:#1b2a1f;border-color:#2f6b45;justify-self:start}
.tk-msg:not(.adm){justify-self:end}
.tk-msg small{color:var(--muted);font-weight:700;font-size:11px}
.tk-msg p{margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.8}
.adm-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.adm-chips button{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:#161410;color:var(--muted);font:800 12px var(--font-ui);cursor:pointer}
.adm-chips button.on{background:#f0d48a;color:#1b1405;border-color:#fff3c4}
.rp-item{padding:12px;border-radius:12px;border:1px solid var(--line);background:#161410;display:grid;gap:6px}
.rp-top{display:flex;align-items:center;gap:8px}.rp-top b{font-size:15px;margin-inline-end:auto}
.rp-item p{margin:0;white-space:pre-wrap;word-break:break-word;font-size:13.5px}
.rp-note{color:#fbbf24!important}
.rp-note-in{font-size:12px!important;padding:7px 10px!important}

/* ---- lobby promo (right side, static: nothing moves) ---- */
.promo{position:fixed;right:24px;top:50%;transform:translateY(-50%);width:276px;z-index:2;padding:12px;display:grid;gap:8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(30,27,20,.92),rgba(14,13,10,.92));border:1px solid rgba(224,184,90,.35);box-shadow:0 18px 50px rgba(0,0,0,.55);
  font-family:'Vazirmatn','Tahoma',system-ui,sans-serif;text-align:start;transition:opacity .25s,visibility .25s}
.promo-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;border:1px solid rgba(224,184,90,.2);background:#17140e;color:var(--cream);font-family:inherit;cursor:pointer;text-align:start;transition:border-color .2s,background .2s}
.promo-card:hover{border-color:var(--gold);background:#1f1b12}
.promo-art{flex:none;width:58px;display:flex;align-items:center;justify-content:center;gap:4px}
.promo-art .token{position:relative;font-size:15px;transition:none}
.promo-art .dp{width:38px;height:38px;transform:none}
.promo-ic{width:38px;height:38px;color:var(--gold-2);filter:drop-shadow(0 0 8px #f2c23077)}
.promo-tx{display:grid;gap:3px;min-width:0}
.promo-tx b{font-size:14px;color:var(--gold-2);font-weight:800}
.promo-tx small{font-size:12px;line-height:1.6;color:#cfc6ad;font-weight:600}
.promo-coin{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border-radius:10px;border:1px dashed rgba(224,184,90,.5);background:transparent;color:var(--gold-2);font:800 12px var(--font-ui);cursor:pointer}
.promo-coin:hover{background:rgba(224,184,90,.1)}
.promo-ad{display:grid;gap:4px;place-items:center;text-align:center;padding:16px 10px;border-radius:12px;border:2px dashed rgba(224,184,90,.45);background:repeating-linear-gradient(135deg,rgba(224,184,90,.05) 0 10px,transparent 10px 20px);color:var(--gold-2);text-decoration:none}
.promo-ad b{font-size:14px;font-weight:800}.promo-ad small{font-size:11.5px;color:#a79f88;font-weight:600}
.promo-ad:hover{border-color:var(--gold);background-color:rgba(224,184,90,.08)}
#lobby.pl-open>.promo{visibility:hidden;opacity:0}
@media (max-width:1180px){.promo{display:none}}
@media (max-height:700px){.promo{display:none}}

/* ---- site footer (copyright + contact) ---- */
.site-foot{z-index:1;width:min(640px,100%);margin-top:34px;padding:18px 18px 16px;border-top:1px solid rgba(224,184,90,.25);text-align:center;display:grid;gap:8px;justify-items:center;font-family:'Vazirmatn','Tahoma',system-ui,sans-serif}
.sf-brand{display:flex;align-items:center;gap:10px;color:var(--gold-2);font-weight:800;direction:ltr}
.sf-brand span{color:#6b6657;font-size:12px;font-weight:700}
.site-foot p{margin:0;color:#9b9582;font-size:12.5px;line-height:1.9;font-weight:600}
.site-foot p b{color:var(--gold-2)}
.site-foot .sf-rules{color:#7d7867;font-size:11.5px}
.sf-contact{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:7px 16px;border-radius:99px;border:1px solid rgba(224,184,90,.45);color:var(--gold-2);font-weight:800;font-size:13px;text-decoration:none;transition:background .15s,transform .15s}
.sf-contact:hover{background:rgba(224,184,90,.12);transform:translateY(-1px)}
.sf-contact .ico{width:16px;height:16px}

/* ---- public lobbies: desktop = side drawer from the left (page content slides right); phone = bottom sheet ---- */
#plRoot{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:block;pointer-events:none;animation:none}
#plRoot.hidden{display:none}
#plRoot .pl-drawer{position:fixed;left:16px;top:82px;bottom:16px;width:min(380px,calc(100vw - 32px));margin:0;max-height:none;display:flex;flex-direction:column;pointer-events:auto;animation:none;
  transform:translateX(-125%);opacity:0;transition:transform .42s cubic-bezier(.2,.9,.25,1),opacity .3s}
#plRoot.open .pl-drawer{transform:none;opacity:1}
#plRoot .pl-drawer h2{margin:0 0 10px;font-size:22px}
#plRoot .lb-list{flex:1;max-height:none;min-height:0;overflow:auto;overscroll-behavior:contain}
#plRoot .pl-drawer .btns{margin-top:auto}
.pl-grip{display:none}
#lobby>:is(.logo,.tag,.menu-hello,.name-input,.menu,.site-foot){transition:translate .45s cubic-bezier(.2,.9,.25,1)}
#lobby.pl-open>:is(.logo,.tag,.menu-hello,.name-input,.menu,.site-foot){translate:210px 0}
#lobby.pl-open>.promo{visibility:hidden;opacity:0}
.pl-row button{min-height:38px;padding:6px 16px}
@media (max-width:900px){
  #lobby.pl-open>:is(.logo,.tag,.menu-hello,.name-input,.menu,.site-foot){translate:none}
  #plRoot{pointer-events:auto;background:rgba(0,0,0,.7);opacity:0;transition:opacity .3s}
  #plRoot.open{opacity:1}
  #plRoot .pl-drawer{left:0;right:0;top:auto;bottom:0;width:100%;height:auto;max-height:78vh;border-radius:22px 22px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(105%);border-bottom:0}
  #plRoot.open .pl-drawer{transform:none}
  .pl-grip{display:block;width:42px;height:5px;border-radius:99px;background:#4a4636;margin:0 auto 12px}
  #plRoot .lb-list{max-height:52vh}
  .pl-row{padding:14px 6px}
  .pl-row button{min-height:44px;padding:8px 22px;font-size:15px}
}

/* game-log lines coloured by action: buy = green, sell = red, mortgage = amber, unmortgage = blue, upgrade = teal */
.gl.k-buy{color:#6dff8a;text-shadow:0 0 .8em rgba(60,200,100,.35)}
.gl.k-sell{color:#ff7b7b;text-shadow:0 0 .8em rgba(220,70,70,.35)}
.gl.k-mortgage{color:#ffc857;text-shadow:0 0 .8em rgba(255,190,60,.3)}
.gl.k-unmortgage{color:#6ab7ff;text-shadow:0 0 .8em rgba(80,150,255,.3)}
.gl.k-upgrade{color:#5eead4;text-shadow:0 0 .8em rgba(40,200,180,.3)}

/* ---------- neon ownership ring (owner colour in --o) ---------- */
.tile.owned{--neon:
  inset 0 0 0 .13em color-mix(in srgb,var(--o) 55%,#fff),
  inset 0 0 .45em .05em var(--o),
  inset 0 0 1.4em color-mix(in srgb,var(--o) 55%,transparent),
  0 0 .3em var(--o),
  0 0 1em color-mix(in srgb,var(--o) 75%,transparent),
  0 0 2.1em color-mix(in srgb,var(--o) 35%,transparent)}
/* the flag that sticks out of an owned tile glows in the same colour */
.tile.owned .flag{border-color:var(--o);box-shadow:0 .25em .6em rgba(0,0,0,.55),0 0 .45em var(--o),0 0 1.1em color-mix(in srgb,var(--o) 70%,transparent)}
/* ownership claim: the neon ring + tint is drawn from the top edge to the bottom, then hands over to the permanent .owned ring */
.tile .claim{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--o) 42%,transparent),color-mix(in srgb,var(--o) 8%,transparent) 70%,transparent);
  box-shadow:
    inset 0 0 0 .13em color-mix(in srgb,var(--o) 55%,#fff),
    inset 0 0 .45em .05em var(--o),
    inset 0 0 1.4em color-mix(in srgb,var(--o) 55%,transparent),
    0 0 .3em var(--o),
    0 0 1em color-mix(in srgb,var(--o) 75%,transparent),
    0 0 2.1em color-mix(in srgb,var(--o) 35%,transparent)}
.tile.owned.claiming,.board[data-map] .tile.owned.claiming{box-shadow:inset 0 0 1.6em rgba(224,184,90,.16),0 0 .9em rgba(224,184,90,.3),0 .3em .6em rgba(0,0,0,.5)}
html.rm .tile .claim{display:none}
@media (prefers-reduced-motion:reduce){.tile .claim{display:none}}

/* VIP crown: the symbol has no fill of its own, so it rendered black on the dark UI */
.vip-badge,.pcard .ti.crown,.vip-big{fill:currentColor;stroke:rgba(90,55,0,.75);stroke-width:.5;stroke-linejoin:round;overflow:visible}
.vip-badge{color:#ffd23f;filter:drop-shadow(0 0 3px #ffb70099) drop-shadow(0 1px 1px #0009)}
.vip-big{color:#ffd23f}

/* game-log lines coloured by action */
.gl.k-pay{color:#ff9e7a;text-shadow:0 0 .8em rgba(255,120,80,.3)}
.gl.k-collect{color:#f3d98b;text-shadow:0 0 .8em rgba(243,217,139,.3)}

/* =====================================================================
   SKIN ANIMATIONS – token skins (.skin-*) and dice skins (.die-*)
   Everything below only animates paint (background-position / filter / box-shadow / scale),
   so it never fights the JS that moves tokens (left/top) or tumbles dice (transform).
   ===================================================================== */
@property --sk-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes sk-ang{to{--sk-ang:360deg}}
@keyframes sk-sheen{0%,28%{background-position:110% 0,0 0,0 0}72%,100%{background-position:-10% 0,0 0,0 0}}
@keyframes sk-hue{to{filter:hue-rotate(360deg)}}
@keyframes sk-breathe{50%{scale:1.06}}
@keyframes sk-glow-gold{0%,100%{filter:drop-shadow(0 0 .28em #f2c230aa)}50%{filter:drop-shadow(0 0 .7em #ffd84add)}}
@keyframes sk-glow-ice{0%,100%{filter:drop-shadow(0 0 .25em #7fd0f5aa)}50%{filter:drop-shadow(0 0 .65em #d9f6ffdd)}}
@keyframes sk-glow-em{0%,100%{filter:drop-shadow(0 0 .25em #16a864aa)}50%{filter:drop-shadow(0 0 .65em #7dffb0dd)}}
@keyframes sk-glow-royal{0%,100%{filter:drop-shadow(0 0 .35em #a855f7aa)}50%{filter:drop-shadow(0 0 .75em #ffd978ee)}}
@keyframes sk-glow-gal{from{filter:drop-shadow(0 0 .3em #8b5cf6aa)}to{filter:drop-shadow(0 0 .75em #e879f9dd)}}
@keyframes sk-flame{0%{background-position:0 100%,0 0}100%{background-position:0 0,0 0}}
@keyframes sk-stars{to{background-position:1.3em 1.3em,-1.7em 0,0 2.1em,0 0}}

/* gold – a bright glint sweeps across the metal every few seconds */
.token.skin-gold,.pcard .av.skin-gold,.gl .pd.skin-gold{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) 110% 0/250% 100% no-repeat,
    radial-gradient(circle at 34% 28%,#fff6c4,transparent 45%),linear-gradient(145deg,#ffe58a,#d9a521 55%,#8a5e00);
  animation:sk-sheen 3s ease-in-out infinite,sk-glow-gold 3s ease-in-out infinite}
/* ice – frosty glint + a cold glow that breathes */
.token.skin-ice,.pcard .av.skin-ice,.gl .pd.skin-ice{
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 110% 0/250% 100% no-repeat,
    radial-gradient(circle at 70% 28%,#fff 0 1px,transparent 2.4px),radial-gradient(circle at 30% 70%,#fff 0 1px,transparent 2.2px),
    radial-gradient(circle at 34% 28%,#fff,transparent 45%),linear-gradient(145deg,#e9fbff,#7fd0f5 60%,#3b8fc4);
  animation:sk-sheen 3.8s ease-in-out infinite,sk-glow-ice 3.8s ease-in-out infinite,sk-breathe 3.8s ease-in-out infinite}
.token.skin-ice,.pcard .av.skin-ice,.gl .pd.skin-ice{background-position:110% 0,0 0,0 0,0 0,0 0}
/* emerald – a gem facet catches the light and turns around the stone */
.token.skin-emerald,.pcard .av.skin-emerald,.gl .pd.skin-emerald{--sk-ang:0deg;
  background:conic-gradient(from var(--sk-ang),transparent 0 58%,rgba(255,255,255,.7) 70%,transparent 82%),
    radial-gradient(circle at 34% 28%,#d6ffe6,transparent 45%),linear-gradient(145deg,#7dffb0,#16a864 55%,#07623a);
  animation:sk-ang 3.4s linear infinite,sk-glow-em 3.4s ease-in-out infinite}
/* royal – golden sparkle circling a purple jewel, glow alternates purple ↔ gold */
.token.skin-royal,.pcard .av.skin-royal,.gl .pd.skin-royal{--sk-ang:0deg;
  background:conic-gradient(from var(--sk-ang),transparent 0 62%,rgba(255,217,120,.85) 72%,transparent 82%),
    radial-gradient(circle at 34% 28%,#e9d5ff,transparent 45%),linear-gradient(145deg,#a855f7,#5b21b6 60%,#2e1065);
  animation:sk-ang 4.2s linear infinite,sk-glow-royal 2.6s ease-in-out infinite,sk-breathe 2.6s ease-in-out infinite}
/* neon – the pulse stays, and the whole tube slowly cycles through colours */
.token.skin-neon,.pcard .av.skin-neon,.gl .pd.skin-neon{animation:skin-pulse 2.2s ease-in-out infinite,sk-hue 9s linear infinite}
/* fire – flames lick upwards from the bottom of the token */
.token.skin-fire,.pcard .av.skin-fire,.gl .pd.skin-fire{
  background:linear-gradient(to top,rgba(255,246,170,.95),rgba(255,157,28,0) 72%) 0 0/100% 230% no-repeat,
    radial-gradient(circle at 50% 70%,#fff3a0,#ff9d1c 40%,#e0361b 75%,#7a0f0f);
  animation:sk-flame 1.15s ease-in-out infinite alternate,skin-fire 1s ease-in-out infinite alternate}
/* galaxy – three layers of stars drifting at different speeds + a pulsing nebula glow */
.token.skin-galaxy,.pcard .av.skin-galaxy,.gl .pd.skin-galaxy{
  background:radial-gradient(circle at 25% 30%,#fff 0 1px,transparent 2px) 0 0/1.3em 1.3em,
    radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 2px) 0 0/1.7em 1.7em,
    radial-gradient(circle at 55% 20%,#ffd1ff 0 1px,transparent 2px) 0 0/2.1em 2.1em,
    radial-gradient(circle at 40% 40%,#8b5cf6,#312e81 60%,#0b0720);
  animation:sk-stars 6s linear infinite,sk-glow-gal 2.4s ease-in-out infinite alternate}

/* ---------------------------- dice ---------------------------- */
@keyframes dk-sweep{0%,35%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@keyframes dk-rise-ocean{to{background-position:0 -1.8em,0 -2.4em}}
@keyframes dk-scan{0%{background-position:0 130%}100%{background-position:0 -30%}}
@keyframes dk-flame{0%{background-position:0 100%}100%{background-position:0 0}}
@keyframes dk-stars{to{background-position:1.5em 1.5em,-2em 0,0 2.5em}}
@keyframes dk-twinkle{from{opacity:.55}to{opacity:1}}
@keyframes dk-neon{
  from{border-color:#8a5cff;box-shadow:inset .13em .13em .25em var(--df-hi),inset -.16em -.18em .35em var(--df-lo),0 0 .3em #8a5cff88}
  to{border-color:#19f0ff;box-shadow:inset .13em .13em .25em var(--df-hi),inset -.16em -.18em .35em var(--df-lo),0 0 .75em #19f0ffcc}}
@keyframes dk-pip-neon{
  from{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .22em #19f0ff77}
  to{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .55em #19f0ffee}}
@keyframes dk-pip-fire{
  from{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .2em #ff9d1c88}
  to{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .5em #ffcf5aee}}
@keyframes dk-pip-gal{
  from{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .15em #b9a8ff66}
  to{box-shadow:inset .08em .1em .14em #0009,0 .045em .025em var(--pip-rim),0 0 .45em #e0d6ffee}}

/* a glossy layer on every face; each skin below fills it with its own effect (pips stay on top) */
.dp{position:relative}
.die-face i,.dp i{position:relative;z-index:1}
.die[class*="die-"] .die-face::before,.dp[class*="die-"]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}

.die-onyx .die-face::before,.dp.die-onyx::before{background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%) 130% 0/300% 100% no-repeat;animation:dk-sweep 5s ease-in-out infinite}
.die-ruby .die-face::before,.dp.die-ruby::before{background:linear-gradient(115deg,transparent 40%,rgba(255,235,235,.6) 50%,transparent 60%) 130% 0/300% 100% no-repeat;animation:dk-sweep 3.6s ease-in-out infinite}
.die-gold .die-face::before,.dp.die-gold::before{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) 130% 0/300% 100% no-repeat;animation:dk-sweep 2.8s ease-in-out infinite}
.die-ocean .die-face::before,.dp.die-ocean::before{
  background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.6) 0 .09em,transparent .2em) 0 0/1.8em 1.8em,
    radial-gradient(circle at 70% 40%,rgba(255,255,255,.45) 0 .07em,transparent .17em) 0 0/2.4em 2.4em;animation:dk-rise-ocean 5s linear infinite}
.die-emerald .die-face::before,.dp.die-emerald::before{--sk-ang:0deg;
  background:conic-gradient(from var(--sk-ang),transparent 0 58%,rgba(255,255,255,.45) 70%,transparent 82%);animation:sk-ang 4s linear infinite}
.die-neon .die-face,.dp.die-neon{animation:dk-neon 1.9s ease-in-out infinite alternate}
.die-neon .die-face::before,.dp.die-neon::before{background:linear-gradient(to bottom,transparent 44%,rgba(25,240,255,.42) 50%,transparent 56%) 0 130%/100% 300% no-repeat;animation:dk-scan 2.6s linear infinite}
.die-neon .die-face i.on,.dp.die-neon i.on{animation:dk-pip-neon 1.5s ease-in-out infinite alternate}
.die-fire .die-face::before,.dp.die-fire::before{background:linear-gradient(to top,rgba(255,226,122,.8),rgba(255,90,31,.38) 45%,transparent 78%) 0 0/100% 230% no-repeat;animation:dk-flame .95s ease-in-out infinite alternate}
.die-fire .die-face i.on,.dp.die-fire i.on{animation:dk-pip-fire 1s ease-in-out infinite alternate}
.die-galaxy .die-face::before,.dp.die-galaxy::before{
  background:radial-gradient(circle at 20% 30%,#fff 0 .05em,transparent .11em) 0 0/1.5em 1.5em,
    radial-gradient(circle at 65% 65%,#fff 0 .045em,transparent .1em) 0 0/2em 2em,
    radial-gradient(circle at 50% 15%,#ffd1ff 0 .05em,transparent .11em) 0 0/2.5em 2.5em;
  animation:dk-stars 7s linear infinite,dk-twinkle 2.2s ease-in-out infinite alternate}
.die-galaxy .die-face i.on,.dp.die-galaxy i.on{animation:dk-pip-gal 2s ease-in-out infinite alternate}

/* reduced motion: static versions (also for the in-game "reduce motion" switch) */
@media (prefers-reduced-motion:reduce){
  .die-face,.die-face::before,.die-face i.on,.dp,.dp::before,.dp i.on{animation:none!important}
}
html.rm .token[class*="skin-"],html.rm .pcard .av[class*="skin-"],html.rm .die-face,html.rm .die-face::before,html.rm .die-face i.on,
html.rm .dp,html.rm .dp::before,html.rm .dp i.on{animation:none!important}

/* ---------- spectators ---------- */
.share-hint{margin:.5em 0 0;font-size:.78em;opacity:.72;line-height:1.5}
.spec-list{margin:.4em 0 0;font-size:.8em;color:#9fd2ff}
#specBanner{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:70;max-width:min(92vw,560px);padding:9px 16px;border-radius:999px;
  background:rgba(20,26,44,.92);border:1px solid #5aa9ff88;color:#dff0ff;font-size:.88rem;font-weight:700;text-align:center;box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 14px #5aa9ff44;pointer-events:none}
#specBanner.hidden{display:none}
body.spectating #btnRoll,body.spectating #btnEnd,body.spectating #btnProps,body.spectating #btnBankrupt,body.spectating #btnTrade,
body.spectating #btnStart,body.spectating #pkJoin{display:none!important}
body.spectating .host-card .chip.host{display:none}

/* =====================================================================
   SIMPLE NEON THEME  (body[data-theme="neon"]) – works on every map
   black everywhere · tiles = a neon outline in the colour of their country/group · only the flag (no artwork, no price)
   ===================================================================== */
#btnTheme.on{color:#7ff6ff;filter:drop-shadow(0 0 .35em #19f0ff)}
body[data-theme="neon"],body[data-theme="neon"] #game,body[data-theme="neon"] .board-wrap{background:#000!important}
body[data-theme="neon"] .board,body[data-theme="neon"] .board[data-map]{background:#000!important;box-shadow:none!important}
body[data-theme="neon"] .board .worldmap,body[data-theme="neon"] .board .center::before,body[data-theme="neon"] .board .center::after{display:none!important}
body[data-theme="neon"] .tile,body[data-theme="neon"] .board[data-map] .tile{background:#000!important;--nc:var(--c,#7fcbd0);filter:none}
body[data-theme="neon"] .tile::before,body[data-theme="neon"] .tile::after{display:none}
body[data-theme="neon"] .tile:not(.owned),body[data-theme="neon"] .board[data-map] .tile:not(.owned){
  box-shadow:inset 0 0 0 .1em color-mix(in srgb,var(--nc) 60%,#fff),inset 0 0 .7em color-mix(in srgb,var(--nc) 45%,transparent),
             0 0 .4em var(--nc),0 0 1.2em color-mix(in srgb,var(--nc) 55%,transparent)!important}
body[data-theme="neon"] .tile .price{display:none}
body[data-theme="neon"] .tile .art{filter:grayscale(1) brightness(1.5) drop-shadow(0 0 .3em var(--nc));opacity:.55}
body[data-theme="neon"] .tile:not(.has-flag) .art{opacity:.9}
body[data-theme="neon"] .tile .name{color:color-mix(in srgb,var(--nc) 40%,#fff);text-shadow:0 0 .5em var(--nc);font-weight:700}
body[data-theme="neon"] .tile .flag,body[data-theme="neon"] .board[data-map] .tile .flag{width:2.1em;height:2.1em;border-width:.12em;border-color:var(--nc);
  box-shadow:0 0 .5em var(--nc),0 0 1.1em color-mix(in srgb,var(--nc) 70%,transparent)}
body[data-theme="neon"] .tile.owned .flag{border-color:var(--o)}
body[data-theme="neon"] .board .center{background:#000}
.brand-row{flex-wrap:wrap;row-gap:.3em}
.brand-row .tools{gap:.15em}

/* prison corner: cell (outer corner) + corridor (L strip for pieces passing by) */
.corner.prison{position:relative;overflow:hidden;padding:0}
.corner.prison:has(.pcell)>:not(.pcell):not(.pway){display:none}
.corner.prison .pcell{position:absolute;width:64%;height:64%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;border-radius:.5em;border:.14em solid #f3d98b;background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 .28em,rgba(243,217,139,.18) .28em .5em),#15131a;font-style:normal;z-index:1}
.corner.prison .pcell svg{width:46%;flex:0 1 auto;min-height:0;opacity:.9}
.corner.prison .pcell b,.corner.prison .pway b{font-size:.72em;font-weight:800;color:#f3d98b;line-height:1}
.corner.prison .pway{position:absolute;inset:0;display:flex;font-style:normal;background:rgba(243,217,139,.07);z-index:0}
.corner.prison .pway b{position:absolute;opacity:.75;font-size:.6em;white-space:nowrap}
.corner.prison[data-c$="r"] .pcell{right:5%}.corner.prison[data-c$="l"] .pcell{left:5%}
.corner.prison[data-c^="t"] .pcell{top:5%}.corner.prison[data-c^="b"] .pcell{bottom:5%}
.corner.prison[data-c^="t"] .pway b{bottom:4%}.corner.prison[data-c^="b"] .pway b{top:4%}
.corner.prison[data-c$="r"] .pway b{left:6%}.corner.prison[data-c$="l"] .pway b{right:6%}

/* ad slots: big banner on the home page + in-game box (both open captagon.ir; the home banner also has a support-ticket shortcut) */
.ad-tag{position:absolute;top:6px;inset-inline-start:8px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#a79f88;border:1px solid rgba(224,184,90,.35);border-radius:6px;padding:1px 6px}
.ad-wide{width:min(100%,720px);margin:18px auto 0;display:grid;gap:8px}
.ad-wide-main{position:relative;display:grid;place-items:center;gap:6px;min-height:130px;padding:26px 14px 16px;text-align:center;text-decoration:none;color:#f3d98b;border-radius:16px;border:2px dashed rgba(224,184,90,.55);background:repeating-linear-gradient(135deg,rgba(224,184,90,.06) 0 12px,transparent 12px 24px),rgba(20,18,12,.6);transition:border-color .2s,background-color .2s,transform .2s}
.ad-wide-main b{font-size:20px;font-weight:900}.ad-wide-main small{font-size:12.5px;color:#a79f88;font-weight:600}
.ad-wide-main:hover{border-color:var(--gold,#e0b85a);transform:translateY(-2px)}
.ad-wide-sup{background:none;border:0;color:#9fb7d9;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:4px}
.ad-box.ad-game{position:relative;flex-direction:column;gap:4px;min-height:140px;padding:24px 10px 12px;text-decoration:none;color:#f3d98b;text-align:center;border-radius:12px;border:2px dashed rgba(224,184,90,.5);background:repeating-linear-gradient(135deg,rgba(224,184,90,.06) 0 10px,transparent 10px 20px)}
.ad-box.ad-game b{font-size:16px;font-weight:900}.ad-box.ad-game small{font-size:12px;color:#a79f88}
.ad-box.ad-game:hover{border-color:var(--gold,#e0b85a)}

.adm-find{display:flex;gap:6px;margin-bottom:8px}.adm-find input{flex:1;min-width:0}
.adm-users{display:grid;gap:6px}.adm-user{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(224,184,90,.25)}
.adm-user span{display:grid;gap:2px}.adm-user small{opacity:.65}

/* ---- reconnect button (top right, next to the language switch) ---- */
#btnReconnect{position:fixed;top:12px;right:148px;z-index:110;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 13px;border-radius:10px;
  border:1px solid var(--gold,#e0b85a);background:#111;color:var(--gold-2,#e0b85a);font:700 14px var(--font-ui,inherit);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .15s,background .15s}
#btnReconnect svg{width:17px;height:17px;flex:none}
#btnReconnect:hover{background:rgba(40,48,76,.96);transform:translateY(-1px)}
#btnReconnect:active{transform:none}
#btnReconnect.hidden{display:none!important}
@media(max-width:560px){#btnReconnect{right:64px;padding:6px 10px;font-size:13px}}

/* neon: livelier tiles – the artwork is back as a dim glowing silhouette, a faint tinted glow fills the face, flags are full size like the main mode */
body[data-theme="neon"] .tile,body[data-theme="neon"] .board[data-map] .tile{
  background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--nc) 16%,#000) 0,#000 78%)!important}
body[data-theme="neon"] .tile:not(.owned),body[data-theme="neon"] .board[data-map] .tile:not(.owned){
  box-shadow:inset 0 0 0 .1em color-mix(in srgb,var(--nc) 60%,#fff),inset 0 .5em 1em -.2em rgba(0,0,0,.9),inset 0 0 .9em color-mix(in srgb,var(--nc) 38%,transparent),
             0 .25em .6em rgba(0,0,0,.85),0 0 .4em var(--nc),0 0 1.2em color-mix(in srgb,var(--nc) 55%,transparent)!important}
body[data-theme="neon"] .tile .flag,body[data-theme="neon"] .board[data-map] .tile .flag{width:2.3em;height:2.3em;border-width:.14em;
  box-shadow:0 .2em .5em rgba(0,0,0,.8),0 0 .5em var(--nc),0 0 1.1em color-mix(in srgb,var(--nc) 70%,transparent)}
body[data-theme="neon"] .tile.t-left .flag,body[data-theme="neon"] .tile.t-right .flag{width:2.1em;height:2.1em}

/* login form: "remember me" */
.auth-remember{display:flex!important;align-items:center;gap:.55em;margin:.2em 0 .1em;cursor:pointer;font-size:.92em;user-select:none}
.auth-remember input{width:1.15em;height:1.15em;accent-color:#e0b85a;margin:0;flex:none}
.auth-remember small{opacity:.65;font-size:.82em}

/* red "back to the main page" button in the game */
.icon-btn.leave-red{background:linear-gradient(180deg,#e04545,#b72424);border-color:#ff7a7a;color:#fff;box-shadow:0 0 .8em rgba(224,69,69,.45)}
.icon-btn.leave-red:hover{background:linear-gradient(180deg,#f05a5a,#c92c2c)!important;box-shadow:0 0 1.1em rgba(240,90,90,.7)}

.tk-sys{display:grid;justify-items:center;gap:2px;margin:8px 0;text-align:center}
.tk-sys span{font-size:12.5px;font-weight:700;color:#f3d98b;background:rgba(224,184,90,.1);border:1px solid rgba(224,184,90,.3);border-radius:999px;padding:4px 12px}
.tk-sys small{font-size:10.5px;opacity:.55}
.tk-head small{display:block;opacity:.75;font-size:12px;margin-top:2px}

/* admin badge, clan tag, public profile, clans */
.adm-badge{display:inline-flex;align-items:center;gap:.25em;margin-inline-start:.4em;padding:.05em .5em .05em .35em;border-radius:999px;font-size:.72em;font-weight:900;color:#2a1600;background:linear-gradient(180deg,#ffe38a,#e0a92a);box-shadow:0 0 .6em rgba(242,194,48,.55);vertical-align:.08em;white-space:nowrap}
.adm-badge svg{width:1.15em;height:1.15em;fill:#2a1600}
.clan-tag{display:inline-block;margin-inline-end:.35em;font-weight:900;font-size:.85em;color:#7fe3ee;letter-spacing:.03em;direction:ltr;unicode-bidi:isolate}
.clan-tag.big{font-size:1.5em;color:#7fe3ee}
.lb-row{width:100%;text-align:inherit;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.lb-row:hover{background:rgba(224,184,90,.08)}
.pv-box{width:min(94vw,420px)}
.pv-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pv-head .token{position:relative;flex:none;width:56px;height:56px;font-size:23px}
.pv-id{display:grid;gap:3px}.pv-name{font-size:1.25em;font-weight:900}.pv-id small{opacity:.65}
.pv-clan{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:10px;border:1px solid rgba(127,227,238,.35);background:rgba(127,227,238,.07);color:#cdeff3;cursor:pointer;font:inherit}
.pv-clan b{color:#7fe3ee}.pv-clan small{margin-inline-start:auto;opacity:.7}.pv-noclan{opacity:.55;font-size:.9em}
.pv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.pv-stats div{display:grid;gap:2px;text-align:center;padding:10px 4px;border-radius:10px;border:1px solid rgba(224,184,90,.25)}
.pv-stats b{font-size:1.05em;color:#f3d98b}.pv-stats small{font-size:.72em;opacity:.7}
.cl-intro{opacity:.8;font-size:.9em;margin:0 0 8px}
.cl-create{display:grid;gap:6px;margin-bottom:10px}
.cl-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.cl-head div{display:grid;gap:2px}.cl-head small,.cl-desc{opacity:.7;font-size:.85em}
.cl-members,.cl-list{display:grid;gap:6px;margin:8px 0;max-height:38vh;overflow:auto}
.cl-m,.cl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid rgba(224,184,90,.22)}
.cl-who{display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:start;min-width:0}
.cl-who i{width:12px;height:12px;border-radius:50%;flex:none}
.cl-lead{font-style:normal;font-size:.75em;color:#f2c230}

[data-action="music"]{opacity:.55}[data-action="music"].on{opacity:1;color:#f3d98b}
#setMood{background:#1a1a1a;color:#f3d98b;border:1px solid rgba(224,184,90,.4);border-radius:8px;padding:6px 10px;font:inherit}

.rules-card{width:min(94vw,640px)}
.rules-body{max-height:62vh;overflow:auto;text-align:start;line-height:1.9;font-size:.93em;padding-inline-end:6px}
.rules-body h3{margin:14px 0 4px;color:#f3d98b;font-size:1.02em}
.rules-body ul{margin:0;padding-inline-start:20px}.rules-body li{margin:3px 0;opacity:.9}
.rules-lead{opacity:.85;margin-top:0}.rules-foot{margin-top:14px;opacity:.7}.rules-foot a{color:#7fe3ee}
.sf-rules-btn{background:none;border:0;color:#f3d98b;text-decoration:underline;cursor:pointer;font:inherit;font-weight:700;padding:4px 0}
.auth-terms{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:.88em}.auth-terms input{width:auto!important;margin:0}
.auth-terms .auth-link{padding:0;text-decoration:underline}

/* ---- VIP-only items: say clearly that VIP membership AND coins are both required ---- */
.st-vipreq{display:grid;gap:4px;justify-items:center;text-align:center;padding:7px 6px;border-radius:9px;border:1px dashed var(--gold);background:rgba(224,184,90,.08);width:100%}
.st-vipreq b{color:var(--gold-2);font-size:13px}
.st-vipreq small{font-size:11px;line-height:1.55;color:#d9cfb2;display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.st-btn.vipgo{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.pk-tag.lock{display:inline-grid;justify-items:center;gap:.15em;opacity:1;border:1px dashed var(--gold);background:rgba(224,184,90,.1);color:var(--gold-2)}
.pk-tag.lock b{font-weight:800}
.pk-vipc{display:inline-flex;align-items:center;gap:.3em;color:#e8dfc4;font-weight:800}

/* ---- create-lobby dialog ---- */
.mk-box{width:min(640px,96vw)}
.mk-h{margin:16px 0 8px;color:var(--gold-2);font-size:15px;font-weight:800;text-align:start}
.mk-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mk-card{cursor:pointer}
.mk-card.locked{cursor:default;opacity:.92}
.mk-card .mp-thumb svg{width:104px;height:104px}
.mk-pick{display:inline-block;min-width:110px;text-align:center;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#2d2a21;color:var(--cream);font:800 14px var(--font-ui)}
.mk-pick.on{background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;border-color:#fff2c4}
.mk-seg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mk-seg button{display:grid;gap:5px;justify-items:center;text-align:center;padding:12px 10px;border-radius:12px;border:1.5px solid var(--line);background:#211e17;color:var(--cream);font-family:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mk-seg button b{font-size:16px;font-weight:800}
.mk-seg button small{font-size:12px;line-height:1.55;color:var(--muted)}
.mk-seg button:hover{border-color:var(--gold)}
.mk-seg button.on{border-color:var(--gold);background:linear-gradient(165deg,#3a3017,#211e17);box-shadow:0 0 0 2px rgba(224,184,90,.22),0 0 24px rgba(224,184,90,.16)}
.mk-seg button.on b{color:var(--gold-2)}
@media(max-width:520px){.mk-seg{grid-template-columns:1fr}}

/* ---- profiles: badges, stats, bio, privacy ---- */
.pf-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.pf-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:#16130c;color:var(--gold-2);font-size:12px;font-weight:800;cursor:default}
.pf-nobadge{color:var(--muted);font-weight:700}
.pf-stats{margin-bottom:12px}
.pf-recent{display:grid;gap:6px;margin-bottom:16px}
.pf-game{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#0c0c0c;border:1px solid var(--line)}
.pf-game.w b{color:#4ade80}.pf-game.l b{color:#f87171}
.pf-game span{color:var(--gold-2);font-weight:800}.pf-game small{color:var(--muted);font-weight:700}
.pf-bio textarea{width:100%;box-sizing:border-box;resize:none;min-height:62px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0c0c0c;color:var(--cream);font:inherit;line-height:1.7}
.pf-bio textarea:focus{outline:none;border-color:var(--gold)}
.pf-bio-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 16px}
.pf-bio-row small{color:var(--muted);font-weight:700}
.pf-save{padding:7px 18px;border-radius:10px;border:1px solid #fff2c4;background:linear-gradient(180deg,#f6dd92,#d4a43c 60%,#b78a2b);color:#141414;font:800 14px var(--font-ui);cursor:pointer}
.pf-save:disabled{opacity:.6;cursor:wait}
.pf-priv{display:grid;gap:8px;margin-bottom:16px}
.pf-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0c0c0c}
.pf-tx{flex:1;display:grid;gap:2px;min-width:0}.pf-tx b{font-size:14px;color:var(--cream)}.pf-tx small{color:var(--muted);font-size:12px;line-height:1.55}
.pf-row select{max-width:46%;padding:8px 10px;border-radius:10px;border:1px solid var(--gold);background:#0c0c0c;color:var(--gold-2);font:800 13px var(--font-ui)}
.pv-bio{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0c0c0c;color:var(--cream);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.pv-private{margin:14px 0;padding:14px;border-radius:12px;border:1px dashed var(--line);color:var(--muted);text-align:center;font-weight:700;line-height:1.8}
.pv-private.small{padding:10px;margin:10px 0}
.pv-seen{margin:12px 0 0;color:var(--muted);font-size:.85em;font-weight:700}
.pv-report{margin-top:12px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 12px var(--font-ui);cursor:pointer}
.pv-report:hover{color:#f87171;border-color:#f87171}
.pv-box .prof-stats{margin-top:12px}

#modalBox{position:relative}
#modalBox .m-x{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;padding:0;border-radius:50%;line-height:1}
.pcard .debt-warn{font:inherit;font-size:11px;font-weight:900;color:#1a0f00;background:#ffb020;border:0;border-radius:99px;padding:2px 8px;cursor:pointer;animation:debtpulse 1.2s ease-in-out infinite}
@keyframes debtpulse{50%{box-shadow:0 0 0 5px rgba(255,176,32,.3)}}

.trade-modal .btns button.trade-ok{background:#1f9d57;border-color:#1f9d57;color:#fff}
.trade-modal .btns button.trade-no{background:#d03a3a;border-color:#d03a3a;color:#fff}
.trade-modal .btns button.trade-edit{background:transparent;border:1px solid var(--gold);color:var(--gold-2)}
.trade-flags{display:inline-flex;gap:4px;align-items:center}
.trade-flag.mini{width:20px;height:20px;border-radius:50%;flex:none;overflow:hidden;font-size:12px;display:inline-grid;place-items:center}

/* ===== main menu redesign: one hero action, two lobby cards side by side, compact utility grid ===== */
.menu{width:min(460px,100%);gap:10px}
.menu .m-main{padding:18px 20px;border-radius:18px;box-shadow:0 10px 34px rgba(224,184,90,.22)}
.menu .m-main b{font-size:23px}.menu .m-main .ico{font-size:40px}
.m-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-row .m-btn{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 13px;border-radius:16px}
.m-row .m-btn .ico{font-size:28px;color:var(--gold)}
.m-row .m-btn b{font-size:16px}
.m-row .m-btn small{font-size:11.5px;line-height:1.5}
.m-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}
.m-tile{padding:12px 4px 10px;gap:6px;border-radius:14px;min-width:0}
.m-tile .ico{font-size:22px}
.m-tile b{font-size:12px;font-weight:700;text-align:center;line-height:1.4}
.m-tile.wide{grid-column:1/-1;flex-direction:row;padding:12px;border-color:rgba(224,184,90,.45);background:linear-gradient(90deg,rgba(224,184,90,.14),rgba(224,184,90,.04))}
.m-tile.wide b{font-size:13.5px;color:var(--gold-2)}
.ad-wide-main{min-height:84px;padding:20px 12px 12px}
@media(max-width:380px){.m-grid{grid-template-columns:repeat(2,1fr)}}

.pcard .money.neg{color:#ff5a5a}
.pcard .tag.typing{color:#9fd0ff;background:#12263a;display:inline-flex;align-items:center;gap:1px}
.pcard .tag.typing i{font-style:normal;animation:tdot 1.2s infinite}
.pcard .tag.typing i:nth-child(2){animation-delay:.2s}.pcard .tag.typing i:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,60%,100%{opacity:.2}30%{opacity:1}}

/* leaderboard rows: the outer neon glow was clipped by the scrolling list and slid under neighbouring rows → keep the highlight inside the row */
.lb-list{padding:2px 4px}
.lb-row,.lb-row:hover,.lb-row:focus-visible{border-radius:10px;border:0;border-bottom:1px solid var(--line);transform:none;position:relative}
.lb-list .lb-row:hover,.lb-list .lb-row:focus-visible{z-index:1;background:rgba(224,184,90,.1);border-bottom-color:var(--neon);box-shadow:inset 0 0 0 1.5px var(--neon),inset 0 0 14px color-mix(in srgb,var(--neon) 25%,transparent)!important}

/* low-power devices (auto-detected in game.js): no decorative looping animations */
html.lite .token[class*="skin-"],html.lite .pcard .av[class*="skin-"],html.lite .die-face,html.lite .die-face::before,html.lite .die-face i.on,
html.lite .dp,html.lite .dp::before,html.lite .dp i.on,html.lite .lobby-bg *,html.lite .lb-halo{animation:none!important}
html.lite .lobby-bg .lb-dust{display:none}