:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg1:#dfe6fb;--bg2:#f3e9fb;--panel:#fff;--ink:#1f2544;--muted:#646c93;--line:#d3d9ef;--btn:#1f2544;--btnink:#fff}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg1:#171b33;--bg2:#241a3d;--panel:#262d4d;--ink:#eef0fb;--muted:#a3abd0;--line:#39426a;--btn:#ffd23f;--btnink:#1f2544}}
:root[data-theme="dark"]{--bg1:#171b33;--bg2:#241a3d;--panel:#262d4d;--ink:#eef0fb;--muted:#a3abd0;--line:#39426a;--btn:#ffd23f;--btnink:#1f2544}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--ink);font:500 17px/1.4 "Baloo 2",system-ui,sans-serif}
main{max-width:1020px;margin:0 auto;padding:18px 16px 40px;display:grid;grid-template-columns:minmax(0,640px) minmax(250px,1fr);gap:22px;align-items:start}
@media(max-width:820px){main{grid-template-columns:1fr}}
h1{grid-column:1/-1;margin:0;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;font-weight:800;letter-spacing:.02em}
.game-topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.game-topbar h1{flex:1;min-width:0}
.game-wallet-balance{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 4px 12px rgba(20,25,70,.12);font-size:1.08rem}
.game-wallet-balance strong{font-variant-numeric:tabular-nums}
.coin-wallet-pulse{animation:coin-wallet-pulse .48s cubic-bezier(.2,1.35,.4,1)}
@keyframes coin-wallet-pulse{50%{transform:scale(1.1);box-shadow:0 0 0 5px rgba(255,210,63,.38),0 6px 18px rgba(245,180,35,.28)}}
.coin-transfer-layer{position:fixed;inset:0;z-index:10000;overflow:hidden;pointer-events:none}
.coin-transfer-layer span{position:absolute;display:block;font:700 21px/1 system-ui,sans-serif;filter:drop-shadow(0 3px 3px rgba(30,25,10,.38));will-change:transform,opacity}
.wrap{position:relative;border-radius:22px;padding:10px;background:var(--panel);box-shadow:0 18px 40px rgba(20,25,70,.28),0 0 0 3px var(--ink)}
canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:14px;touch-action:manipulation}
.board-players{position:absolute;inset:10px;z-index:2;pointer-events:none}
.wrap.is-showing-chance-card .board-players,.wrap.is-showing-chance-card .live-chat-reactions,.wrap.is-showing-chance-card .game-toast{visibility:hidden}
.live-chat-reactions{position:absolute;inset:10px;z-index:4;overflow:hidden;border-radius:14px;pointer-events:none}
.live-chat-reaction{position:absolute;left:var(--reaction-x);top:var(--reaction-y);display:grid;place-items:center;width:48px;height:48px;border:2px solid rgba(255,255,255,.96);border-radius:50%;background:var(--reaction-color);box-shadow:0 4px 16px rgba(15,20,45,.45);font:700 27px/1 system-ui,sans-serif;will-change:transform,opacity;animation:player-chat-reaction-flow 2.8s cubic-bezier(.16,.72,.16,1) forwards}
@keyframes player-chat-reaction-flow{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(calc(-50% + var(--reaction-drift)),calc(-50% + var(--reaction-rise))) scale(.78)}}
.game-toast{position:absolute;z-index:6;top:14px;left:50%;max-width:calc(100% - 28px);padding:8px 18px;border:2px solid rgba(255,255,255,.9);border-radius:999px;background:var(--toast-color,#273052);color:#fff;box-shadow:0 5px 16px rgba(10,14,40,.42);font:800 clamp(.82rem,2.7vw,1.12rem)/1.2 "Baloo 2",sans-serif;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.35);overflow-wrap:anywhere;opacity:0;pointer-events:none;transform:translate(-50%,-10px) scale(.94)}
.game-toast.is-visible{animation:game-toast-in .22s cubic-bezier(.2,1.3,.4,1) both}
@keyframes game-toast-in{to{opacity:1;transform:translate(-50%,0) scale(1)}}
.board-players.choosing-target .board-player,.board-players.choosing-target .board-player *{pointer-events:none}
.board-player{--player-color:#e04b4b;--player-dark:#a82525;position:absolute;width:35%;height:clamp(42px,10%,60px);max-width:210px;max-height:60px;display:flex;align-items:center;gap:clamp(3px,1%,8px);padding:clamp(3px,1%,7px);border:2px solid var(--player-color);border-radius:13px;background:rgba(255,255,255,.9);box-shadow:0 4px 9px rgba(20,25,70,.2);pointer-events:auto;transition:transform .18s,box-shadow .18s}
.board-player:not(.radial){display:grid;grid-template-columns:clamp(24px,4.6vw,33px) minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(3px,1%,8px)}
.match-profile-action{position:absolute;z-index:8;top:calc(100% + 5px);left:50%;max-width:calc(100vw - 40px);padding:5px 9px;border:1px solid rgba(255,255,255,.9);border-radius:9px;background:#252c4c;color:#fff;font:800 11px/1.2 "Baloo 2",sans-serif;white-space:nowrap;box-shadow:0 4px 12px rgba(10,14,40,.35);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s}
.board-player:hover .match-profile-action,.board-player:focus .match-profile-action,.board-player:focus-within .match-profile-action{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.match-profile-action:disabled{background:#2f9e5b;color:#fff;opacity:1;visibility:visible;pointer-events:none}
.board-player.radial .match-profile-action{transform:translateX(-50%) rotate(var(--radial-counter-angle)) translateY(-3px)}
.board-player.radial:hover .match-profile-action,.board-player.radial:focus .match-profile-action,.board-player.radial:focus-within .match-profile-action{transform:translateX(-50%) rotate(var(--radial-counter-angle))}
.board-player.p0{left:2%;top:2%}.board-player.p1{right:2%;top:2%}.board-player.p2{right:2%;top:61%}.board-player.p3{left:2%;top:61%}
.board-player.is-turn{z-index:1;transform:scale(1.035);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 18px var(--player-color),0 6px 14px rgba(20,25,70,.28)}
.board-player.radial{max-width:none;max-height:none;gap:2px;padding:2px;border-radius:9px;transform:translate(-50%,-50%) rotate(var(--radial-angle))}
.board-player.radial.is-turn{transform:translate(-50%,-50%) rotate(var(--radial-angle)) scale(1.06)}
.board-player.radial .board-player-face{width:var(--radial-face);height:var(--radial-face);border-width:1px}
.board-player.radial .board-die{width:var(--radial-die);height:var(--radial-die);padding:2px;border-width:1.5px;border-radius:6px;gap:0}
.board-player.radial .board-die i{width:3px;height:3px}
.board-player-face{display:grid;place-items:center;flex:0 0 auto;width:clamp(24px,4.6vw,33px);height:clamp(24px,4.6vw,33px);border:2px solid #fff;border-radius:50%;overflow:hidden;background:var(--player-color);box-shadow:0 2px 5px rgba(0,0,0,.22)}
.board-player:not(.radial) .board-player-face{grid-column:1;grid-row:1/3}
.board-player-face .avatar,.board-player-face svg{display:block;width:100%!important;height:100%!important}
.board-player-name{min-width:0;max-width:100%;overflow:hidden;color:var(--player-dark);font-size:clamp(.56rem,1.4vw,.8rem);font-weight:800;line-height:1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.board-player:not(.radial) .board-player-name{grid-column:2;grid-row:1;align-self:end}
.board-chat-preview{min-width:0;flex:1 1 0;overflow:hidden;padding:4px 7px;border-radius:8px;background:color-mix(in srgb,var(--player-color) 16%,white);color:var(--player-dark);font-size:clamp(.52rem,1.1vw,.72rem);font-weight:800;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.board-player:not(.radial) .board-chat-preview{grid-column:2;grid-row:2;align-self:start;width:100%;padding:3px 6px}
.board-chat-preview.is-empty{visibility:hidden}
.board-chat-preview.radial{position:absolute;z-index:3;left:50%;top:calc(50% - 30px);display:grid;place-items:center;width:76px;height:30px;max-width:none;overflow:hidden;padding:3px 5px;border:1px solid var(--player-color);border-radius:8px;background:var(--panel);box-shadow:0 3px 9px rgba(20,25,70,.22);transform:translate(-50%,-50%) rotate(var(--radial-counter-angle));font-size:9px;line-height:1.1;text-align:center;white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.board-die{grid-column:3;grid-row:1/3;align-self:center;flex:0 0 auto;width:clamp(28px,5.5vw,38px);height:clamp(28px,5.5vw,38px);min-width:0;padding:clamp(3px,.8vw,5px);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:1px;border:2px solid var(--player-color);border-radius:10px;background:#fff;color:#1f2544;box-shadow:0 3px 0 rgba(0,0,0,.2);pointer-events:auto}
.board-die i{width:clamp(3px,.8vw,6px);height:clamp(3px,.8vw,6px);align-self:center;justify-self:center;border-radius:50%;background:transparent}
.board-die i.on{background:#1f2544}
.board-die:disabled{opacity:.58}
.board-die:not(:disabled){cursor:pointer}
.board-die.rolling{animation:tumble .88s ease-in-out}
#win{position:absolute;inset:10px;z-index:3;border-radius:14px;background:rgba(20,25,60,.72);display:grid;place-content:center;justify-items:center;gap:12px;color:#fff;text-align:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
#win[hidden]{display:none}#win h2{margin:0;font-size:2.4rem}
#winDetails{max-width:min(86%,440px);margin:0;color:#eef0fb;font-weight:700}
.win-reward{position:relative;isolation:isolate;display:flex;align-items:center;justify-self:center;gap:10px;min-width:min(100%,250px);padding:9px 16px;border:1px solid rgba(255,255,255,.75);border-radius:16px;background:linear-gradient(135deg,#ffe785,#ffc632);color:#202544;box-shadow:0 5px 0 rgba(125,78,0,.28),0 9px 24px rgba(0,0,0,.2)}
.win-reward[hidden]{display:none}
.win-reward.playing{animation:win-reward-pop .45s cubic-bezier(.2,1.5,.4,1) both}
.win-reward-icon{position:relative;z-index:1;font-size:2rem;filter:drop-shadow(0 2px 1px rgba(80,50,0,.25));animation:win-coin-spin .8s ease-out both}
.win-reward-copy{position:relative;z-index:1;display:grid;text-align:left;line-height:1.15}
.win-reward-copy strong{font-size:1.1rem}
.win-reward-copy small{margin-top:3px;font-size:.78rem;font-weight:700}
.win-coin-burst{position:absolute;inset:0;pointer-events:none}
.win-coin-burst span{position:absolute;left:50%;top:50%;font-size:1rem;opacity:0;animation:win-coin-fly .9s ease-out var(--coin-delay) both}
@keyframes win-reward-pop{from{opacity:0;transform:scale(.65) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes win-coin-spin{from{transform:translateY(8px) rotate(-100deg) scale(.5)}to{transform:translateY(0) rotate(0) scale(1)}}
@keyframes win-coin-fly{0%{opacity:0;transform:translate(-50%,10px) scale(.35) rotate(-40deg)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--coin-dx)),calc(-50% - 48px + var(--coin-dy))) scale(.75) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.win-reward.playing,.win-reward-icon,.win-coin-burst span,.coin-wallet-pulse{animation:none}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.side{display:grid;gap:14px;align-content:start}
.turn-panel{display:grid;grid-template-rows:54px 72px 78px 72px;align-content:start;min-height:330px}
.home-modes-back{display:block;width:min(100%,300px);min-height:46px;margin:16px auto 0;padding:9px 14px;border:2px solid rgba(255,255,255,.88);border-radius:13px;background:linear-gradient(135deg,#ffe36b,#ffc629);color:#202544;box-shadow:0 4px 0 #ad7800,0 7px 16px rgba(20,25,70,.2);font-weight:800}
.home-modes-back:hover{filter:brightness(1.06);transform:translateY(-1px)}
.music-track-control{display:grid;gap:5px;margin-top:10px;color:var(--muted);font-size:.78rem;font-weight:700}
.music-track-control select{padding:7px 30px 7px 10px;border-radius:10px;font:inherit}
.music-volume-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;margin-top:10px;color:var(--muted);font-size:.78rem;font-weight:700}
.music-volume-control output{min-width:3.5em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.music-volume-control input{grid-column:1/-1;width:100%;height:24px;margin:0;accent-color:#ffd23f;cursor:pointer;touch-action:pan-x}
.exit-match-button{display:block;width:100%;min-height:46px;margin-top:10px;background:linear-gradient(135deg,#ffe36b,#ffc629);color:#202544;box-shadow:0 4px 0 #ad7800,0 7px 16px rgba(20,25,70,.2);font-weight:800}
.exit-match-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.card{background:var(--panel);border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(20,25,70,.14)}
.game-chat{min-width:0}
.game-chat-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.game-chat-header .hd{font-size:1.25rem;font-weight:800;line-height:1.15}
.game-chat-caption{display:block;margin-top:2px;color:var(--muted);font-size:.78rem;font-weight:600}
.game-chat-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#e5f8ed;color:#187440;font:800 .62rem/1.4 system-ui,sans-serif;letter-spacing:.06em}
.game-chat-messages{display:grid;align-content:start;gap:8px;width:100%;height:90px;min-height:90px;max-height:90px;overflow-x:hidden;overflow-y:auto;margin:10px 0;padding:9px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 75%,var(--bg1));scrollbar-width:thin;overscroll-behavior:contain;scroll-behavior:smooth}
.game-chat-empty{align-self:center;justify-self:center;margin:0;color:var(--muted);font-size:.82rem;text-align:center}
.game-chat-message{display:flex;align-items:flex-start;gap:7px;min-width:0}
.game-chat-avatar{flex:0 0 22px;width:22px;height:22px;overflow:hidden;border:1px solid var(--chat-color);border-radius:50%;background:var(--chat-color)}
.game-chat-avatar .avatar,.game-chat-avatar svg{display:block;width:100%!important;height:100%!important}
.game-chat-message-copy{min-width:0;font-size:.8rem;line-height:1.2}
.game-chat-message-copy strong{display:block;font-size:.72rem}
.game-chat-message-copy p{margin:1px 0 0;color:var(--ink);overflow-wrap:anywhere}
.game-chat-quick{display:grid;gap:6px;margin:8px 0}
.game-chat-quick-messages,.game-chat-quick-emojis{display:flex;flex-wrap:wrap;gap:5px}
.game-chat-quick button{box-shadow:none;transition:transform .12s,filter .12s}
.game-chat-quick button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.game-chat-quick button:disabled{opacity:.5;cursor:not-allowed}
.game-chat-quick-messages button{padding:4px 8px;border-radius:999px;background:var(--bg1);color:var(--ink);font-size:.72rem;line-height:1.2}
.game-chat-quick-emojis button{display:grid;place-items:center;flex:0 0 32px;width:32px;height:30px;padding:2px;border-radius:9px;background:var(--bg1);color:var(--ink);font-size:1rem;line-height:1}
.game-chat-quick-emojis button:active:not(:disabled){transform:none;box-shadow:none}
.game-chat-form{display:grid;gap:7px}
.game-chat-sender{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:700}
.game-chat-sender select{min-width:0;max-width:calc(100% - 62px);padding:5px 26px 5px 9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.8rem}
.game-chat-recipient{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:700}
.game-chat-recipient select{min-width:0;flex:1;padding:5px 26px 5px 9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.8rem}
.game-chat-private-label{display:block;margin-top:1px;color:var(--muted);font-size:.68rem;font-weight:700}
.game-chat-compose{display:flex;gap:7px;min-width:0}
.game-chat-compose input{flex:1 1 auto;min-width:0;width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;line-height:1.2}
.game-chat-compose button{flex:0 0 auto;padding:7px 13px;border-radius:10px;font-size:.85rem}
.game-chat-form :disabled{opacity:.55;cursor:not-allowed}
#turn{min-width:0;font-size:1.4rem;font-weight:800;line-height:1.15;display:flex;align-items:center;gap:10px}
#who{min-width:0;overflow-wrap:anywhere}
#turnTimer{display:grid;place-items:center;flex:0 0 auto;min-width:42px;height:34px;margin-left:auto;padding:2px 8px;border-radius:999px;background:#ffd23f;color:#1f2544;font-size:.9rem;font-weight:800;line-height:1;box-shadow:0 3px 0 rgba(0,0,0,.2)}
#turnTimer[hidden]{display:none}
#turnTimer.urgent{background:#c83d4c;color:#fff;animation:turn-timer-pulse .65s ease-in-out infinite alternate}
@keyframes turn-timer-pulse{to{transform:scale(1.08)}}
#dot{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 3px var(--panel),0 0 0 5px currentColor;transition:background .3s}
#hint{min-width:0;color:var(--muted);margin:4px 0 0;min-height:2.8em;overflow-wrap:anywhere}
.diceRow{display:flex;align-items:center;gap:16px;min-height:78px;margin-top:12px}
#die{flex:0 0 78px;width:78px;height:78px;border-radius:18px;border:4px solid var(--ink);background:#fff;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;box-shadow:0 6px 0 rgba(0,0,0,.18);transition:border-color .3s}
#die i{border-radius:50%;margin:auto;width:13px;height:13px;background:transparent}
#die i.on{background:#1f2544}
#game[data-dice-skin="gold"] #die,#game[data-dice-skin="gold"] .board-die{background:#fff1bd}
#game[data-dice-skin="gold"] #die i.on,#game[data-dice-skin="gold"] .board-die i.on{background:#8b5b00}
#game[data-dice-skin="ruby"] #die,#game[data-dice-skin="ruby"] .board-die{background:#ffe5e8}
#game[data-dice-skin="ruby"] #die i.on,#game[data-dice-skin="ruby"] .board-die i.on{background:#a82525}
#game[data-dice-skin="jade"] #die,#game[data-dice-skin="jade"] .board-die{background:#e4fff0}
#game[data-dice-skin="jade"] #die i.on,#game[data-dice-skin="jade"] .board-die i.on{background:#1a6b3b}
#die.roll{animation:tumble .88s ease-in-out}
@keyframes tumble{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-26px) rotate(200deg) scale(1.12)}60%{transform:translateY(0) rotate(400deg)}80%{transform:translateY(-8px) rotate(520deg)}100%{transform:rotate(720deg)}}
button,select{font:inherit;font-weight:700;border-radius:12px;border:0;padding:11px 20px;cursor:pointer}
button{background:var(--btn);color:var(--btnink);box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
button:disabled{opacity:.4;cursor:not-allowed}
#roll{flex:1;font-size:1.15rem;padding:16px}
.game-guide-target{position:relative;z-index:1;outline:4px solid #fff;outline-offset:4px;box-shadow:0 0 0 9px rgba(255,210,63,.42),0 0 28px 12px rgba(255,210,63,.8)!important;animation:game-guide-pulse 1s ease-in-out infinite alternate}
@keyframes game-guide-pulse{to{filter:brightness(1.3);transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.game-guide-target{animation:none}}
.game-guide[hidden]{display:none}
.game-guide{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:12px;background:rgba(12,16,38,.12)}
.game-guide-card{position:absolute;left:var(--guide-x,50%);top:var(--guide-y,50%);transform:translate(-50%,-50%);width:min(calc(100vw - 24px),500px);padding:26px;border:2px solid #ffd23f;border-radius:24px;background:var(--panel);color:var(--ink);text-align:center;box-shadow:0 22px 70px rgba(0,0,0,.48);animation:game-guide-card-in .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes game-guide-card-in{from{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.game-guide-face{width:76px;height:76px;object-fit:cover;border:3px solid #ffd23f;border-radius:50%;background:var(--bg1);box-shadow:0 5px 16px rgba(10,15,40,.28)}
.game-guide-label{margin:8px 0 0;color:#e07a1f;font-size:.86rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.game-guide-card h2{margin:2px 0 8px;font-size:clamp(1.45rem,5vw,2rem);line-height:1.1}
.game-guide-card>p:last-of-type{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.game-guide-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.game-guide-actions button{min-width:132px}
.game-guide-skip{border:1px solid var(--line);background:transparent;color:var(--ink);box-shadow:none}
.game-guide-start{background:#ffd23f;color:#1f2544}
.home-guide{z-index:1001;background:rgba(12,16,38,.48)}
.home-guide-card{width:min(calc(100vw - 24px),520px)}
.home-guide-launch{margin-top:8px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--btn) 55%,transparent);border-radius:999px;background:transparent;color:var(--btn);box-shadow:none;font-size:.82rem;font-weight:800}
.home-guide-launch:hover{background:color-mix(in srgb,var(--btn) 12%,transparent)}
.home-guide-target{position:relative;z-index:1;outline:4px solid #fff;outline-offset:4px;box-shadow:0 0 0 9px rgba(255,210,63,.38),0 0 26px 10px rgba(255,210,63,.7)!important;animation:game-guide-pulse 1s ease-in-out infinite alternate}
@media(max-width:480px){.game-guide-card{padding:21px 17px}.game-guide-actions{gap:8px}.game-guide-actions button{min-width:0;flex:1;padding:11px 12px}}
select{background:var(--bg1);color:var(--ink);width:100%;border:2px solid var(--line)}
:focus-visible{outline:3px solid #2b6fd6;outline-offset:2px}
.pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;transition:background .3s}
.pl.done{opacity:.72}
.pl.on{background:var(--bg1)}
.pl i{width:18px;height:18px;border-radius:50%}
.pl b{margin-left:auto;display:flex;gap:4px}
.pl b u{width:11px;height:11px;border-radius:50%;border:2px solid var(--muted);opacity:.6}
.pl b u.f{background:currentColor;border-color:currentColor;opacity:1}
.pl-rank{padding:2px 7px;border-radius:999px;background:var(--ink);color:var(--panel);font-size:.75rem;font-weight:800;white-space:nowrap}
#hist{display:flex;gap:6px;flex-wrap:wrap;min-height:30px}#hist i{font-style:normal;width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;font-weight:700;animation:pop .3s}.hd{font-weight:800;margin-bottom:6px}
#log{min-width:0;color:var(--muted);min-height:2.8em;margin:8px 0 0;overflow-wrap:anywhere;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){#die.roll{animation:none}}
@media (prefers-reduced-motion:reduce){.board-die.rolling{animation:none}}
[hidden]{display:none!important}
#bgc{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity .4s}
main{position:relative;z-index:1}
#menu{position:fixed;inset:0;z-index:20;overflow:auto;display:grid;place-items:center;padding:56px 10px;background:transparent}
.mwrap{width:100%;max-width:420px;text-align:center;padding:20px 16px;border-radius:28px;background:var(--panel);background:color-mix(in srgb,var(--panel) 58%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 18px 40px rgba(20,25,70,.18)}
.scr{display:grid;gap:14px;min-width:0;animation:pop .35s cubic-bezier(.2,1.3,.4,1)}
.scr>*{min-width:0;max-width:100%}
.logo{margin:0;font-size:clamp(4rem,18vw,6rem);font-weight:800;line-height:1;letter-spacing:.04em;text-shadow:0 4px 0 rgba(0,0,0,.12)}
.pawns{display:flex;justify-content:center;gap:14px;margin:4px 0 14px}
.pawns i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,rgba(0,0,0,.35) 140%);border:3px solid #fff;box-shadow:0 5px 8px rgba(0,0,0,.25);animation:bob 1.2s ease-in-out infinite}
.pawns i:nth-child(2){animation-delay:.15s}.pawns i:nth-child(3){animation-delay:.3s}.pawns i:nth-child(4){animation-delay:.45s}
@keyframes bob{50%{transform:translateY(-12px)}}
.big{font-size:1.35rem;padding:18px}
.big.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
#menu h2{margin:0 0 4px;font-size:2rem}
.seg{display:flex;gap:6px;background:var(--bg1);padding:4px;border-radius:14px}
.seg button{flex:1;box-shadow:none;background:transparent;color:var(--ink);padding:9px 12px}
.seg button.on{background:var(--btn);color:var(--btnink)}
.row{flex-wrap:wrap;display:flex;align-items:center;gap:12px;background:var(--panel);padding:10px 14px;border-radius:14px;text-align:left}
.row>span{flex:1;font-weight:700}.row .seg{min-width:160px}
.settings-volume-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.settings-volume-row label{font-weight:700}
.settings-volume-row output{min-width:3.5em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.settings-volume-row input{grid-column:1/-1;width:100%;height:24px;margin:0;accent-color:#ffd23f;cursor:pointer;touch-action:pan-x}
.seat i{width:22px;height:22px;border-radius:50%}.seat.off{opacity:.45}.seat em{color:var(--muted);font-style:normal}
.seat-name{display:flex;align-items:center;gap:8px;flex:1 1 190px;min-width:0;color:var(--muted);font-size:.85rem;font-weight:700}
.seat-name input{flex:1;min-width:0;width:100%;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:500}
.back{background:transparent;color:var(--muted);box-shadow:none}
@media (prefers-reduced-motion:reduce){.pawns i,.scr{animation:none}}
.logo.sm{font-size:clamp(3.4rem,15vw,4.6rem)}.tag{margin:0 0 4px;color:var(--muted)}
.tagline{margin:-8px 0 10px;color:#e07a1f;font-weight:800;letter-spacing:.03em}.tagline b{color:#e07a1f}
.soc{display:flex;align-items:center;gap:14px;justify-content:center;font-size:1.1rem;padding:14px;color:#fff}
.soc b{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.95);color:#1f2544;display:grid;place-items:center;font-size:1rem}
.soc span{min-width:0;text-align:center}
.google-g{display:block;width:19px;height:19px}
.google-signin-error,.facebook-signin-error{text-align:center;font-size:.82rem;overflow-wrap:anywhere}
.google-signin-error:empty,.facebook-signin-error:empty{display:none}
.soc.g{background:#1a73e8}.soc.f{background:#1877f2}.soc.e{background:#6a4bd8}
.or{display:flex;align-items:center;gap:10px;color:var(--muted)}.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.fine{margin:0;color:var(--muted);font-size:.92rem}.err{margin:0;color:#d23b3b;min-height:1.3em;font-weight:700;text-align:left}.err.google-signin-error,.err.facebook-signin-error{min-height:0}.auth-success{margin:0;color:#187440;font-size:.9rem;font-weight:700;text-align:left}
.link{background:none;color:var(--ink);box-shadow:none;padding:2px 4px;text-decoration:underline;font-size:inherit}.link.r{justify-self:end}
.field{display:grid;gap:6px;text-align:left;font-weight:700}
.field input{font:inherit;font-weight:500;padding:13px 14px;border-radius:12px;border:2px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);width:100%}
.pw{display:flex;gap:8px}.eye{box-shadow:none;background:var(--bg1);color:var(--ink);padding:0 14px;font-size:.9rem}
.meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden}.meter i{display:block;height:100%;width:0;transition:width .25s,background .25s}
.chk{display:flex;gap:10px;align-items:center;text-align:left}.chk input{width:20px;height:20px}
.chk a,.site-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-legal-links{display:flex;justify-content:center;margin-top:12px;color:var(--muted);font-size:.82rem}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.avb{padding:4px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 3px var(--line)}.avb.on{box-shadow:0 0 0 4px var(--ink)}
.avatar{display:inline-block;border-radius:50%;overflow:hidden;vertical-align:middle}
.me{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);padding:10px 12px;border-radius:16px;text-align:left}
.mechip{display:flex;align-items:center;gap:10px}.mechip-details{min-width:0}.mechip-name-row{display:flex;align-items:center;gap:7px}.mechip b{display:block;line-height:1.1}.mechip small{color:var(--muted)}.mechip-edit{padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg1);color:var(--ink);font:700 .78rem/1.2 "Baloo 2",sans-serif;cursor:pointer}.mechip-edit:hover,.mechip-edit:focus-visible{border-color:var(--yellow);outline:none}.mebtns{display:grid;grid-template-columns:repeat(4,minmax(82px,1fr));grid-auto-flow:row;justify-items:stretch;gap:6px;font-size:.85rem}
.mebtns #bInventory,.mebtns #bFriends,.mebtns #bMarket,.mebtns #bOut{min-width:82px;min-height:42px;padding:8px 10px;border-radius:10px;background:var(--bg1);font-size:.9rem;font-weight:800;text-align:center;text-decoration:none}
.mebtns #bUp{grid-column:1/-1}
#tip{position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);background:var(--ink);color:var(--bg1);padding:12px 18px;border-radius:14px;z-index:40;max-width:min(92vw,420px);text-align:center;transition:transform .3s}#tip.on{transform:translate(-50%,0)}
.server-reconnect-status{width:min(100%,560px);margin:10px auto 0;padding:12px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 8px 28px rgba(20,25,70,.16);text-align:center}
.reconnect-match-button{display:block;width:min(100%,420px);margin:16px auto 0}
.reconnect-match-button[hidden]{display:none}

/* Post-login game mode page */
#menu.mode-open>.mwrap{max-width:960px;padding:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:left}
.mwrap-wide{width:100%;max-width:920px;padding:22px;background:var(--panel);background:color-mix(in srgb,var(--panel) 88%,transparent);border:2px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:24px;box-shadow:0 18px 40px rgba(20,25,70,.18)}
.mode-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mode-topbar .me{flex:1;min-width:0}
.mode-topbar .mebtns{grid-template-columns:repeat(4,minmax(82px,1fr));grid-auto-flow:row;justify-items:stretch}
.mode-settings{flex:0 0 auto;font-size:.95rem;padding:10px 16px}
.mode-heading{margin:24px 0 18px}
.mode-brand{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0 0 4px;line-height:1}
.mode-brand-ludo{font-size:clamp(1.7rem,4vw,2.25rem);font-weight:800;letter-spacing:.035em;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.mode-brand-ludo span:nth-child(1){color:#e04b4b}.mode-brand-ludo span:nth-child(2){color:#2f9e5b}.mode-brand-ludo span:nth-child(3){color:#f2b705}.mode-brand-ludo span:nth-child(4){color:#2b6fd6}
.mode-brand-chance{color:#e07a1f;font-size:1.05rem;font-weight:800;letter-spacing:.03em}
.mode-heading h1{font-size:clamp(2rem,5vw,3rem);line-height:1.05}
.mode-heading .tag{margin:8px 0 0}
.player-dashboard{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(120px,.55fr));gap:10px;margin:0 0 14px}
.level-panel,.wallet-card{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 12px rgba(20,25,70,.08)}
.level-badge{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:var(--btn);color:var(--btnink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.16);font-size:1.3rem;font-weight:800}
.level-progress{display:grid;gap:5px;flex:1;min-width:0}
.level-title-row,.xp-caption{display:flex;align-items:center;justify-content:space-between;gap:8px}
.level-title-row strong{font-size:1.05rem}
.level-title-row span{color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.07em}
.xp-track{height:9px;overflow:hidden;border-radius:99px;background:var(--line)}
.xp-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f9e5b,#f2b705);transition:width .35s ease}
.xp-caption small{color:var(--muted);font-size:.72rem}
.progress-reward-note{color:var(--muted);font-size:.69rem;line-height:1.2}
.wallet-card{justify-content:center;gap:10px}
.wallet-add{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin-left:auto;padding:0;border-radius:50%;font-size:1.45rem;line-height:1;font-weight:800}
.wallet-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:var(--bg1);font-size:1.35rem}
.wallet-copy{display:grid;gap:1px}
.wallet-copy small{color:var(--muted);font-size:.78rem;font-weight:700}
.wallet-copy strong{font-size:1.25rem;line-height:1.05;font-weight:800}
.diamonds-card .wallet-icon{background:rgba(106,75,216,.12)}
.inventory-panel{margin:0 0 16px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 12px rgba(20,25,70,.08)}
.inventory-screen{width:100%;max-width:920px;margin:0 auto}
.inventory-screen .inventory-panel{margin:0}
.inventory-screen #bBackInventory,.friends-screen #bBackFriends,.market-screen #bBackMarket{justify-self:start}
.inventory-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.inventory-header .tagline{margin:0;color:#e07a1f;font-size:.76rem}
.inventory-header h2{margin:0;font-size:1.6rem;line-height:1.1}
.inventory-header .fine{margin-top:4px}
.inventory-count{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:var(--bg1);color:var(--muted);font-size:.78rem;font-weight:800}
.inventory-tabs{display:flex;gap:6px;padding:4px;border-radius:13px;background:var(--bg1)}
.inventory-tabs button{flex:1;padding:8px 10px;background:transparent;color:var(--muted);box-shadow:none;font-size:.9rem}
.inventory-tabs button[aria-selected="true"]{background:var(--btn);color:var(--btnink);box-shadow:0 2px 5px rgba(20,25,70,.16)}
.inventory-content{margin-top:14px}
.inventory-profile-layout{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(0,1.4fr);gap:16px;align-items:start}
.inventory-preview{display:grid;justify-items:center;gap:8px;padding:16px 10px;border-radius:14px;background:var(--bg1);text-align:center}
.inventory-preview .avatar{width:72px!important;height:72px!important;box-shadow:0 4px 12px rgba(20,25,70,.18)}
.inventory-preview .fine{font-size:.8rem}
.profile-photo img{display:block;width:100%;height:100%;object-fit:cover}
.inventory-profile-form{display:grid;gap:10px;min-width:0}
.inventory-profile-form .field{gap:5px;font-size:.9rem}
.inventory-profile-form input{min-width:0;padding:9px 11px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:500}
.inventory-password-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;align-items:center;margin-top:8px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg1)}
.inventory-password-google{grid-template-columns:1fr;align-items:stretch}
.inventory-password-panel>div{display:grid;gap:4px;min-width:0}
.inventory-password-panel>div strong{font-size:.92rem}
.inventory-password-panel>div small{color:var(--muted);font-size:.78rem;line-height:1.4}
.inventory-password-email{overflow-wrap:anywhere;font-weight:700}
.inventory-password-panel button{padding:9px 12px;font-size:.82rem}
.inventory-password-google button{width:100%}
.inventory-password-status{grid-column:1/-1;margin:0;color:var(--muted);font-size:.82rem}
.inventory-password-status:empty{display:none}
.inventory-password-status.success{color:#2eaa68}
.inventory-password-status.error{color:#e45b63}
.inventory-upload-field{display:grid;gap:5px}
.inventory-upload-field>span{font-size:.9rem;font-weight:700}
.inventory-upload-control{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.inventory-profile-form .inventory-photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.inventory-upload-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 14px;border-radius:12px;background:var(--btn);color:var(--btnink);box-shadow:0 4px 0 rgba(0,0,0,.25);font-weight:800;cursor:pointer;transition:transform .08s,box-shadow .08s}
.inventory-upload-button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.inventory-photo-input:focus-visible+.inventory-upload-button{outline:3px solid #2b6fd6;outline-offset:3px}
.inventory-photo-name{min-width:0;overflow:hidden;color:var(--muted);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.inventory-remove-photo{min-height:38px;padding:7px 11px;border:1px solid rgba(220,77,87,.45);border-radius:10px;background:rgba(220,77,87,.08);color:#c63e4a;font:800 .82rem/1.2 "Baloo 2",sans-serif;cursor:pointer}.inventory-remove-photo:hover:not(:disabled){background:#c63e4a;color:#fff}.inventory-remove-photo:disabled{opacity:.55;cursor:default}
.inventory-intro{margin:0 0 10px}
.inventory-avatar-label{margin:14px 0 7px;color:var(--muted);font-size:.82rem;font-weight:800}
.inventory-avatar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.inventory-avatar{display:grid;place-items:center;padding:4px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 2px var(--line)}
.inventory-avatar .avatar{width:34px!important;height:34px!important}
.inventory-avatar[aria-pressed="true"]{box-shadow:0 0 0 3px #e07a1f}
.inventory-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}
.inventory-item{display:grid;gap:8px;align-content:start;min-height:112px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg1)}
.inventory-item-icon{font-size:1.45rem;line-height:1}
.inventory-animation-preview{position:relative;display:grid;place-items:center;height:58px;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,#ffd23f 38%,var(--panel)),var(--panel) 72%);font-size:1.8rem}
.inventory-animation-preview span{position:relative;z-index:1;filter:drop-shadow(0 2px 3px rgba(20,25,70,.25))}
.inventory-animation-preview.classic span{animation:inventory-impact 1.5s ease-in-out infinite}
.inventory-animation-preview.gun::before{position:absolute;z-index:2;top:45%;left:68%;width:10px;height:10px;border-radius:50%;background:#fff7c2;box-shadow:0 0 8px 5px #ff9e22;content:"";opacity:0;animation:inventory-gun-flash 1.6s steps(2,end) infinite}
.inventory-animation-preview.gun::after{position:absolute;top:52%;left:28%;width:44%;height:3px;background:linear-gradient(90deg,transparent,#fff7c2,#f57c1f);content:"";opacity:0;transform:scaleX(0);transform-origin:left;animation:inventory-gun-shot 1.6s ease-out infinite}
.inventory-animation-preview.chainsaw{background:radial-gradient(circle at 50% 55%,color-mix(in srgb,#f07824 42%,var(--panel)),var(--panel) 72%)}
.inventory-animation-preview.chainsaw span{animation:inventory-chainsaw .12s ease-in-out infinite alternate}
.inventory-animation-preview.chainsaw::before{position:absolute;top:53%;left:17%;width:39%;height:6px;border:1px solid #738096;border-radius:5px;background:linear-gradient(#eef3ff,#9daac0);box-shadow:0 0 7px #f0a64b;content:"";transform-origin:right;animation:inventory-chain-blade .12s ease-in-out infinite alternate}
.inventory-animation-preview.chainsaw::after{position:absolute;top:34%;right:23%;width:8px;height:8px;border-radius:50%;background:#fff1a8;box-shadow:-9px 17px 0 -2px #ffc05a,8px -7px 0 -3px #fff;content:"";opacity:0;animation:inventory-chain-sparks .9s ease-out infinite}
@keyframes inventory-impact{0%,65%,100%{transform:translateY(0) scale(1)}76%{transform:translateY(-5px) scale(1.14)}86%{transform:translateY(1px) scale(.94)}}
@keyframes inventory-gun-flash{0%,70%,100%{opacity:0;transform:scale(.4)}76%{opacity:1;transform:scale(1.35)}84%{opacity:0;transform:scale(.7)}}
@keyframes inventory-gun-shot{0%,70%,100%{opacity:0;transform:scaleX(0)}73%{opacity:1;transform:scaleX(1)}82%{opacity:0;transform:scaleX(.65)}}
@keyframes inventory-chainsaw{from{transform:translateY(-1px) rotate(-3deg)}to{transform:translateY(1px) rotate(3deg)}}
@keyframes inventory-chain-blade{from{transform:rotate(-1deg)}to{transform:rotate(1deg)}}
@keyframes inventory-chain-sparks{0%,58%,100%{opacity:0;transform:scale(.45)}68%{opacity:1;transform:scale(1.2)}82%{opacity:0;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.inventory-animation-preview span,.inventory-animation-preview::before,.inventory-animation-preview::after{animation:none}}
.map-swatch{display:block;height:42px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,var(--map-a),var(--map-b))}
.inventory-item strong{font-size:.95rem}
.inventory-item small{color:var(--muted);font-size:.78rem}
.inventory-item button{width:100%;padding:8px 10px;font-size:.82rem}
.inventory-animation-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:auto}
.inventory-animation-actions button{min-width:0;padding:8px 5px;white-space:normal}
.inventory-animation-preview-button{background:var(--panel);color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.16)}
.inventory-empty{margin:0;padding:15px;border-radius:14px;background:var(--bg1);color:var(--muted);font-size:.9rem}
.inventory-coming-soon{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:12px;padding:13px 15px;border:1px dashed color-mix(in srgb,#e07a1f 58%,var(--line));border-radius:14px;background:linear-gradient(110deg,color-mix(in srgb,#e07a1f 9%,var(--panel)),var(--bg1))}
.inventory-coming-soon-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,#e07a1f 15%,var(--panel));font-size:1.35rem}
.inventory-coming-soon-copy{display:grid;flex:1;gap:2px;min-width:140px}
.inventory-coming-soon-copy strong{font-size:.9rem}
.inventory-coming-soon-copy small{color:var(--muted);font-size:.8rem}
.inventory-coming-soon-badge{margin-left:auto;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,#e07a1f 14%,var(--panel));color:#a84d15;font-size:.72rem;font-weight:800;white-space:nowrap}
.market-note{margin:12px 0;color:var(--muted);font-size:.86rem}
.market-region-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:.84rem;font-weight:800}
.market-region-field select{max-width:440px;margin-left:auto;padding:8px 10px;font-size:.86rem}
.market-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.market-pack{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg1)}
.market-pack-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--panel);font-size:1.45rem}
.market-pack-copy{display:grid;gap:2px;min-width:0}
.market-pack-copy small{color:var(--muted);font-size:.78rem}
.market-pack button{grid-column:1/-1;width:100%;padding:9px 12px}
.friend-code-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid color-mix(in srgb,#e07a1f 28%,var(--line));border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,#e07a1f 12%,var(--panel)),var(--bg1))}
.friend-code-copy{display:grid;gap:3px}.friend-code-copy small{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.friend-code-copy strong{font-size:2.2rem;line-height:1.05;letter-spacing:.16em;font-weight:800}.friend-code-copy span{color:var(--muted);font-size:.86rem}
.friend-code-actions{display:flex;gap:8px}.friend-code-actions button{padding:9px 13px;font-size:.9rem;white-space:nowrap}
.friend-demo-note{margin:10px 0 14px;padding:9px 12px;border-radius:11px;background:var(--bg1);color:var(--muted);font-size:.82rem}
.friend-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.friend-search-form .field{gap:5px;color:var(--muted);font-size:.88rem;font-weight:800}.friend-search-form input{width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600;letter-spacing:normal}.friend-search-form button{min-height:43px;padding:9px 18px;white-space:nowrap}.friend-search-form button:disabled{opacity:.65;cursor:wait}
.friend-search-results{display:grid;gap:7px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg1)}.friend-search-result{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.friend-search-result .friend-row-copy{flex:1;min-width:0}.friend-search-result button{min-width:105px;padding:7px 10px;font-size:.78rem;white-space:nowrap}.friend-search-result button:disabled{opacity:.68;cursor:default}.friend-search-presence{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.72rem}.friend-search-presence::before{width:7px;height:7px;border-radius:50%;background:#8790a8;content:""}.friend-search-presence.online{color:#23834b}.friend-search-presence.online::before{background:#36c77a}
.friend-add-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.friend-add-form .field{gap:5px;color:var(--muted);font-size:.88rem;font-weight:800}.friend-add-form input{width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600;letter-spacing:.12em}.friend-add-form button{min-height:43px;padding:9px 14px;white-space:nowrap}
.friend-action-message{min-height:1.35em;margin:7px 2px;color:var(--muted);font-size:.84rem}.friend-action-message.error{color:#b42318}.friend-action-message.success{color:#187440}
.friend-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:6px}
.friend-list-panel{min-width:0;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--bg1)}.friend-list-panel h3{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:1rem}.friend-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--btn);color:var(--btnink);font-size:.72rem}
.friend-list{display:grid;gap:7px}.friend-empty{margin:0;padding:11px;border-radius:10px;background:var(--panel);color:var(--muted);font-size:.82rem;text-align:center}
.friend-row{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.friend-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--friend-color,var(--btn));color:#fff;font-size:.84rem;font-weight:800}.friend-row-copy{display:grid;flex:1;min-width:0}.friend-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.friend-row-copy small{color:var(--muted);font-size:.73rem}.friend-row-actions{display:flex;gap:5px}.friend-row-actions button{padding:6px 8px;font-size:.72rem}.friend-row-actions .friend-reject,.friend-row-actions .friend-remove{background:var(--bg1);color:var(--ink)}
.wallet-dialog{width:min(92vw,440px);max-width:none;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(10,15,40,.35)}
.wallet-dialog::backdrop{background:rgba(13,17,38,.66);backdrop-filter:blur(3px)}
.wallet-dialog h2{margin:0 0 6px;font-size:1.65rem}
.wallet-dialog-actions{display:grid;gap:9px;margin-top:18px}
.wallet-dialog-actions .back{padding:8px}
.settings-report-button{margin-top:4px}
.report-issue-dialog{max-height:90vh;overflow-y:auto}
.report-issue-dialog form{display:grid;gap:12px}
.report-issue-dialog .fine{margin:0;color:var(--muted)}
.report-issue-field{display:grid;gap:5px;color:var(--ink);font-size:.88rem;font-weight:800}
.report-issue-field>span{color:var(--muted);font-weight:500}
.report-issue-field input,.report-issue-field select,.report-issue-field textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg1);color:var(--ink);font:inherit;font-size:.9rem;font-weight:600}
.report-issue-field textarea{resize:vertical;min-height:110px;line-height:1.4}
.report-issue-field input:focus,.report-issue-field select:focus,.report-issue-field textarea:focus{outline:2px solid var(--btn);outline-offset:1px}
.report-issue-status{min-height:1.35em;margin:0;color:var(--muted);font-size:.82rem}
.report-issue-dialog .wallet-dialog-actions{margin-top:0}
.exit-confirm-button{background:#c83d4c;color:#fff;box-shadow:0 4px 0 rgba(96,15,28,.55)}
.capture-preview-dialog{width:min(92vw,560px);max-width:none;max-height:92vh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(10,15,40,.4)}
.capture-preview-dialog::backdrop{background:rgba(13,17,38,.72);backdrop-filter:blur(3px)}
.capture-preview-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.capture-preview-header h2{margin:0;font-size:1.4rem}
.capture-preview-close{flex:0 0 38px;width:38px;height:38px;padding:0;background:var(--bg1);color:var(--ink);font-size:1.5rem;line-height:1}
#capturePreviewCanvas{display:block;width:min(100%,480px);height:auto;margin:12px auto;border:1px solid var(--line);border-radius:15px;background:#1a1e3e}
.capture-preview-dialog>.fine{margin:0;text-align:center;font-size:.82rem}
.chance-rules-dialog{width:min(92vw,540px);max-width:none;max-height:min(86vh,760px);overflow-y:auto;padding:22px;border:2px solid #e07a1f;border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(10,15,40,.4)}
.chance-rules-dialog::backdrop{background:rgba(13,17,38,.68);backdrop-filter:blur(3px)}
.chance-rules-header{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:16px}
.chance-rules-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff0d7;color:#e07a1f;font-size:1.65rem}
.chance-rules-header h2{margin:0;font-size:1.55rem;line-height:1.1}
.chance-rules-header p{margin:5px 0 0;color:var(--muted);font-size:.9rem;line-height:1.3}
.chance-rule-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:chance-rule}
.chance-rule-list li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--bg1)}
.chance-rule-number{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#e07a1f;color:#fff;font-weight:800}
.chance-rule-list strong{display:block;font-size:.95rem;line-height:1.2}
.chance-rule-list p{margin:3px 0 0;color:var(--muted);font-size:.84rem;line-height:1.3}
.chance-rules-note{margin:14px 0 12px;padding:10px 12px;border-radius:12px;background:#fff0d7;color:#75420e;font-weight:800;font-size:.9rem}
.chance-rules-close{display:block;width:100%;padding:9px 14px}
.player-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);align-items:center;gap:8px 16px;margin:0 0 16px;padding:12px 14px;background:var(--bg1);border:1px solid var(--line);border-radius:16px}
.picker-label{display:grid;gap:1px;font-weight:800}
.picker-label small{color:var(--muted);font-size:.82rem;font-weight:500}
.player-counts{width:100%;justify-content:space-between}
.player-counts button{min-width:42px;padding:8px 10px}
.player-colors{display:flex;align-items:center;justify-content:space-between;gap:clamp(1px,1.1vw,8px);width:100%}
.player-color-chip{display:grid;place-items:center;flex:1 1 38px;width:100%;min-width:28px;max-width:42px;height:38px;padding:2px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none;transition:transform .12s,border-color .12s,box-shadow .12s}
.player-color-chip span{display:block;width:clamp(18px,3vw,26px);height:clamp(18px,3vw,26px);border:3px solid rgba(255,255,255,.95);border-radius:50%;background:var(--player-swatch);box-shadow:inset 0 1px 4px rgba(0,0,0,.3),0 2px 4px rgba(20,25,70,.2)}
.player-color-chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 18%,transparent);transform:scale(1.08)}
.player-color-chip:hover{transform:translateY(-1px)}
.player-color-chip[aria-pressed="true"]:hover{transform:translateY(-1px) scale(1.08)}
.player-count-notice{grid-column:1/-1;justify-self:end;width:fit-content;max-width:100%;margin:0;padding:5px 9px;border:1px solid color-mix(in srgb,#e07a1f 32%,var(--line));border-radius:10px;background:color-mix(in srgb,#e07a1f 10%,var(--panel));color:var(--ink);font-size:.78rem;font-weight:700;line-height:1.25}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.mode-card{display:flex;align-items:center;gap:12px;width:100%;min-height:92px;padding:14px;text-align:left;background:var(--panel);color:var(--ink);border:2px solid var(--line);box-shadow:0 5px 0 rgba(20,25,70,.11);transition:border-color .15s,transform .15s,box-shadow .15s}
.mode-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 7px 0 rgba(20,25,70,.12)}
.mode-card[aria-pressed="true"]{border-color:#e07a1f;box-shadow:0 5px 0 rgba(224,122,31,.2)}
.mode-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;background:var(--bg1);font-size:1.55rem}
.mode-copy{display:grid;flex:1;gap:2px;min-width:0}
.mode-copy strong{font-size:1.05rem;line-height:1.15}
.mode-copy small{color:var(--muted);font-size:.83rem;font-weight:500}
.mode-arrow{color:var(--muted);font-size:1.7rem;line-height:1}
.mode-detail{margin-top:14px;padding:16px 18px;background:var(--panel);border:2px solid var(--line);border-radius:16px;animation:pop .25s ease-out;scroll-margin-block:12px}
#setup{scroll-margin-block:12px}
.mode-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mode-detail-head h2{margin:0;font-size:1.45rem}
.mode-detail-head .fine{margin-top:2px}
.mode-detail-pawn{color:#e07a1f;font-size:1.8rem;text-shadow:0 2px 0 rgba(0,0,0,.1)}
.mode-notice{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg1);color:var(--muted);font-size:.9rem}
.matchmaking-panel{display:grid;gap:12px;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg1)}
.matchmaking-state{display:flex;align-items:center;gap:12px;min-height:42px}
.matchmaking-state strong{display:block;color:var(--ink)}
.matchmaking-state p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.matchmaking-spinner{display:none;flex:0 0 30px;width:30px;height:30px;border:3px solid color-mix(in srgb,var(--muted) 28%,transparent);border-top-color:#e07a1f;border-radius:50%}
.matchmaking-panel.searching .matchmaking-spinner{display:block;animation:matchmaking-spin .8s linear infinite}
.matchmaking-actions{display:flex;gap:9px;flex-wrap:wrap}
.matchmaking-actions button{min-width:150px}
.matchmaking-panel .err{margin:0}
.team-matchup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.team-match-card{display:grid;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.team-match-card h3{margin:0;color:var(--ink);font-size:.9rem;line-height:1.1}
.team-match-player{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;padding:5px 8px;border-radius:9px;background:var(--bg1);font-size:.82rem;font-weight:800}
.team-match-player .avatar{flex:0 0 auto;border-radius:50%;overflow:hidden}
.team-match-player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-match-player.waiting{color:var(--muted);font-weight:600}
.team-match-card.team-one{border-color:color-mix(in srgb,#e04b4b 40%,var(--line))}
.team-match-card.team-two{border-color:color-mix(in srgb,#2b6fd6 40%,var(--line))}
.team-invite-panel{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.team-party-members{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.team-party-member{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:var(--bg1);font-size:.78rem}
.team-party-member .avatar{border-radius:50%;overflow:hidden}.team-party-member.pending{color:var(--muted)}.team-party-avatar{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--btn);color:var(--btnink);font-weight:800}
.party-color-dot{display:inline-block;flex:0 0 12px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:var(--party-color);box-shadow:0 0 0 1px rgba(30,40,70,.2)}
.invite-color-picker{display:grid;gap:7px;margin:12px 0}.invite-color-picker>small{color:var(--muted);font-weight:700}.invite-color-options{display:flex;flex-wrap:wrap;gap:8px}.invite-color-picker .player-color-chip{flex:0 0 38px}.invite-color-picker .player-color-chip:disabled{opacity:.3}
.team-online-friends{display:grid;gap:6px}.team-online-friend{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:var(--bg1)}.team-online-friend>span:nth-child(2){display:grid;flex:1;min-width:0}.team-online-friend strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.team-online-friend small{color:#23834b;font-size:.72rem}.team-online-friend button{padding:6px 10px;font-size:.78rem}
.play-invite-panel{display:grid;gap:10px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.play-invite-panel[hidden]{display:none}.play-invite-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.play-invite-heading>div{min-width:0}.play-invite-heading strong{font-size:.95rem}.play-invite-heading .fine{margin:3px 0 0}.play-invite-count{color:var(--muted);font-size:.78rem;white-space:nowrap}.play-invite-friends{display:grid;gap:6px}.play-invite-friend{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--bg1)}.play-invite-friend .team-party-avatar{flex:0 0 28px}.play-invite-friend>span:nth-child(2){display:grid;flex:1;min-width:0}.play-invite-friend strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.play-invite-friend small{color:var(--muted);font-size:.72rem}.play-invite-friend small.online{color:#23834b}.play-invite-friend button{padding:6px 11px;font-size:.78rem}.play-invite-friend button:disabled{opacity:.65;cursor:default}
[data-player-count][hidden]{display:none!important}
@media(max-width:420px){.team-matchup{grid-template-columns:1fr}}
@keyframes matchmaking-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.matchmaking-panel.searching .matchmaking-spinner{animation-duration:2.4s}}
.economy-note{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,rgba(255,210,63,.14),rgba(224,122,31,.08));color:var(--ink);font-weight:700;line-height:1.45}
.room-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin-top:14px}
.room-panel .field{min-width:0}
.room-panel input{text-transform:uppercase;letter-spacing:.12em}
.room-actions{display:flex;gap:8px}
.room-actions button{white-space:nowrap}
.private-room-capacity{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:700}
.private-room-capacity select{min-width:150px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.room-panel .err{grid-column:1/-1}
@media(max-width:620px){
  .game-topbar{gap:6px}
  .game-topbar h1{font-size:clamp(1.8rem,8vw,3.4rem)}
  .game-wallet-balance{gap:5px;padding:7px 8px;font-size:.9rem}
  #menu.mode-open{place-items:start center;padding:18px 10px}
  .mwrap-wide{padding:16px;border-radius:20px}
  .mode-topbar{align-items:flex-start;flex-wrap:wrap}
  .mode-topbar .me{padding:8px;gap:6px}
  .mechip{gap:6px}
  .mode-topbar .mebtns{font-size:.75rem}
  .mode-topbar .me{display:grid;grid-template-columns:minmax(0,1fr);flex:1 1 100%}
  .mode-topbar .mebtns{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .mode-settings{margin-left:auto}
  .mebtns #bInventory,.mebtns #bFriends,.mebtns #bMarket,.mebtns #bOut{min-width:0;min-height:40px;padding:7px 5px;font-size:.78rem;white-space:nowrap}
  .mode-settings{padding:9px 11px}
  .mode-heading{margin:18px 0 14px}
  .player-dashboard{grid-template-columns:1fr 1fr}
  .level-panel{grid-column:1/-1}
  .wallet-card{justify-content:flex-start;gap:5px;padding:7px}
  .wallet-add{flex-basis:30px;width:30px;height:30px;font-size:1.2rem}
  .wallet-icon{flex-basis:28px;height:28px;font-size:1rem}
  .wallet-copy strong{font-size:.95rem}
  .xp-caption small{font-size:.67rem}
  .player-picker{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:8px}
  .player-counts{flex-basis:auto;width:100%}
  .player-counts button{min-width:0;padding:8px 6px}
  .player-count-notice{grid-column:1;justify-self:start}
  .inventory-panel{padding:14px}
  .inventory-header{align-items:flex-start}
  .friend-code-card{align-items:stretch;flex-direction:column;padding:14px}
  .friend-code-actions{display:grid;grid-template-columns:1fr 1fr}
  .friend-code-actions button{min-width:0;white-space:normal}
  .friend-search-form{grid-template-columns:1fr}
  .friend-search-result{flex-wrap:wrap}.friend-search-result .friend-row-copy{flex-basis:calc(100% - 52px)}.friend-search-result button{width:100%}
  .friend-add-form{grid-template-columns:1fr}
  .inventory-count{font-size:.68rem}
  .inventory-profile-layout{grid-template-columns:1fr}
  .inventory-password-panel{grid-template-columns:1fr}
  .inventory-password-panel button{width:100%}
  .inventory-preview{grid-template-columns:auto 1fr;justify-items:start;text-align:left}
  .inventory-preview .fine{align-self:center}
  .inventory-avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .inventory-tabs button{padding:8px 5px;font-size:.8rem}
  .mode-grid{grid-template-columns:1fr}
  .mode-card{min-height:76px}
  .room-panel{grid-template-columns:1fr}
  .room-actions{display:grid;grid-template-columns:1fr 1fr}
  .private-room-capacity{align-items:stretch;flex-direction:column}
}

/* Keep ads separate from navigation and game controls. */
.home-ad{margin:40px auto 16px;padding:18px 0 0;border-top:1px solid #ffffff25;width:100%;min-width:0;text-align:center;}
.home-ad-label{display:block;margin-bottom:12px;font:11px/1.5 sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.65;}
.home-ad-preview{display:grid;place-items:center;min-height:100px;border:1px dashed #ffffff40;border-radius:12px;background:#ffffff05;color:inherit;opacity:.65;font:14px/1.5 sans-serif;}
.home-ad [hidden],.home-ad[hidden]{display:none!important;}

.board-column{min-width:0;}
.match-ad{margin:24px 0 0;padding:0;border:0;}
.match-ad .home-ad-preview{min-height:90px;}

/* Let the board use nearly the whole phone width in portrait, while keeping it
   square and reserving a side-by-side layout for short landscape screens. */
@media(max-width:620px){
  #game{width:100%;padding:12px max(6px,env(safe-area-inset-right,0px)) 24px max(6px,env(safe-area-inset-left,0px));gap:12px}
  #game .board-column,#game .side{width:100%;min-width:0}
  #game .wrap{width:100%;max-width:100%;padding:clamp(4px,1.3vw,8px);border-radius:18px}
  #game canvas{width:100%;height:auto;aspect-ratio:1}
}
@media(max-width:900px) and (max-height:600px) and (orientation:landscape){
  #game{width:100%;padding:8px max(8px,env(safe-area-inset-right,0px)) 16px max(8px,env(safe-area-inset-left,0px));grid-template-columns:minmax(0,1.15fr) minmax(190px,.8fr);gap:12px;align-items:start}
  #game .game-topbar{grid-column:1/-1}
  #game .board-column,#game .side{width:100%;min-width:0}
  #game .wrap{padding:clamp(4px,1vw,7px)}
  #game .turn-panel{grid-template-rows:54px 96px 78px 96px;min-height:380px}
  #game #turn{font-size:1rem}
  #game .diceRow{gap:8px}
  #game #roll{min-width:0;padding:10px 4px;font-size:.92rem;line-height:1.15}
}

.ad-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:36px;}
.ad-heading .home-ad-label{margin:0;}
.ad-dismiss{display:grid;place-items:center;min-width:36px;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);font:24px/1 sans-serif;cursor:pointer;box-shadow:none;}
.ad-dismiss:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.home-ad.ad-dismissed{display:none!important;}

.board-player-face .profile-photo,.board-player-face .profile-photo img{width:100%!important;height:100%!important;}
.profile-photo img{display:block;object-fit:cover;}
.game-chat-avatar .profile-photo{overflow:hidden;border-radius:50%;}