/* Immersive, sculpted table. Loaded after the existing visual themes. */
.focus-dock{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.focus-mode{overflow:hidden;padding:0!important}
body.focus-mode .topbar,body.focus-mode .rail,body.focus-mode #room-heading,body.focus-mode .mobile-navigation,body.focus-mode footer,body.focus-mode #seo-information{display:none!important}
body.focus-mode #game-room{display:block;position:fixed;inset:0;z-index:80;max-width:none;margin:0;width:100%;height:100dvh;padding:0;background:radial-gradient(ellipse at 50% 38%,#fffef6,#eaf0e1 70%,#dae5d3);isolation:isolate}
body.focus-mode .arena{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;border-radius:0;background:transparent;overflow:hidden}
body.focus-mode .arena-top{width:min(100%,1000px);padding:0;border:0;min-height:38px;flex-shrink:0}
body.focus-mode .mini-board{min-width:34px;min-height:34px;width:34px;height:34px;font-size:25px;padding:3px;border-radius:10px}
body.focus-mode .mini-board svg{width:23px;height:23px}
body.focus-mode .game-title{gap:9px}
body.focus-mode .game-title h2{font-size:15px;line-height:1.3}
body.focus-mode #arena-subtitle{font-size:9px}
body.focus-mode .session-invite-button{min-height:36px;padding:6px 10px;font-size:11px}
body.focus-mode .player-row{width:var(--focus-board-size, min(70vh,90vw));max-width:none;padding:0;margin:0;min-height:40px;gap:9px;flex-shrink:0}
body.focus-mode .player-row .avatar{width:34px;height:34px;border-radius:11px}
body.focus-mode .player-row strong{font-size:12px}
body.focus-mode .player-row small{display:block;font-size:10px!important;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;margin:2px 0 0}
body.focus-mode .clock{min-width:68px;font-size:19px;padding:4px 9px;border:1px solid #d0ddc4;border-bottom:3px solid #b5c5a8;border-radius:11px}
body.focus-mode .piece-counter{font-size:12px}
body.focus-mode .tiny-piece{width:13px;height:13px}
body.focus-mode .board-tools,body.focus-mode .arena-extras,body.focus-mode .arena-progress{display:none!important}
body.focus-mode .board-wrap{width:var(--focus-board-size,min(70vh,90vw));max-width:none;min-height:0!important;flex-shrink:0;margin:0;align-self:center}
body.focus-mode .board-border{padding:10px;border-radius:17px;border:1px solid #a7bc96;border-bottom:6px solid #8ca57c;background:linear-gradient(135deg,#f4f3dc,#c4d3ae);box-shadow:0 18px 36px #244c3426,inset 0 2px 0 #fff9!important;overflow:hidden}
body.focus-mode .board{min-width:0!important;width:100%;margin:0}
body.focus-mode .board.chess-board .piece{font-size:clamp(22px,6.5vh,74px)}
body.focus-mode .board.tictactoe-board .piece{font-size:clamp(32px,13vh,95px)}
body.focus-mode .board.hex-board{max-width:75%;margin-inline:auto}
body.focus-mode .board.mancala-board{aspect-ratio:1.7!important;grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;padding:12px;gap:6px}
body.focus-mode .arena-bottom{width:var(--focus-board-size,min(70vh,90vw));max-width:none;padding:0;min-height:26px;flex-shrink:0;gap:8px;border:0;font-size:10px}
body.focus-mode .arena-bottom>span{font-size:10px;line-height:1.3}
body.focus-mode .arena-bottom button{min-height:30px;padding:3px 6px;font-size:10px}
body.focus-mode .arena-bottom svg{width:16px;height:16px}
body.focus-mode .focus-dock{display:flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;margin-top:auto;padding:7px 10px;border:1px solid #d0dec5;border-bottom:4px solid #b4c7a2;border-radius:23px;background:linear-gradient(150deg,#fffef5f5,#e5eedbfa);box-shadow:0 9px 24px #284b3120,inset 0 1px 0 #fff!important;backdrop-filter:blur(16px)}
.focus-dock button{position:relative;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:9px;border:1px solid #c6d5ba;border-bottom:4px solid #a4bb93;border-radius:14px;background:linear-gradient(145deg,#fffef5,#e3edda);color:#315840;transition:transform .16s,background .16s;box-shadow:inset 0 1px 0 #fff!important}
.focus-dock button svg{width:21px;height:21px;pointer-events:none}
.focus-dock button:hover:not(:disabled){transform:translateY(-2px);background:#f7f9ed}
.focus-dock button:active:not(:disabled){transform:translateY(2px);border-bottom-width:1px}
.focus-dock button[aria-pressed=true],.focus-dock button[aria-expanded=true]{background:linear-gradient(145deg,#4c8258,#25533a);color:#fff;border-color:#224a32;border-bottom-color:#143522}
.focus-dock button:focus-visible,.focus-mode .reaction-bar button:focus-visible{outline:3px solid #c59646;outline-offset:3px}
#focus-unread{position:absolute;top:-5px;inset-inline-end:-4px;background:#ac513e;color:#fff;border:2px solid #fff;border-radius:50%;min-width:20px;height:20px;font-size:10px;display:grid;place-items:center}
#focus-unread[hidden]{display:none}
body.focus-mode .reaction-bar{display:none;position:absolute;z-index:8;bottom:calc(88px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);grid-template-columns:repeat(8,44px);gap:6px;margin:0;padding:10px;border:1px solid #c6d6b5;border-bottom:5px solid #9db68a;border-radius:22px;background:linear-gradient(135deg,#fffef6,#e9f0dd);box-shadow:0 12px 32px #29492e30!important}
body.focus-mode.focus-reactions-open .reaction-bar{display:grid}
body.focus-mode .reaction-bar button{width:44px;height:46px;min-height:44px;font-size:27px;padding:3px;border:1px solid #d7dfc7;border-bottom:3px solid #bccda6;border-radius:13px;background:linear-gradient(#fffef8,#ecf1dd);transition:transform .15s}
body.focus-mode .reaction-bar button:hover:not(:disabled){transform:translateY(-4px) rotate(-6deg)}
body.focus-mode .reaction-bar button:active:not(:disabled){transform:translateY(2px)}
body.focus-mode #reaction-stage{z-index:4;pointer-events:none}
body.focus-mode .social-panel{display:none!important}
body.focus-mode.mobile-chat-open .social-panel{display:flex!important;flex-direction:column;position:fixed;z-index:102;inset:auto 18px calc(90px + env(safe-area-inset-bottom)) auto;width:min(370px,calc(100vw - 28px));height:min(620px,calc(100dvh - 116px));max-height:none;padding:12px;gap:8px;border:1px solid #c6d7b9;border-bottom:5px solid #a9bf98;border-radius:24px;background:#f6f9ef;overflow:auto;box-shadow:0 18px 60px #193d3738!important;transform:none;visibility:visible;opacity:1}
body.focus-mode .social-panel .chat-card{display:flex;flex:1;flex-direction:column;min-height:120px;margin:0}
body.focus-mode .social-panel .chat-heading{padding:10px;font-size:12px}
body.focus-mode .social-panel .chat-heading h2{font-size:13px}
body.focus-mode .social-panel .privacy-note,body.focus-mode .social-panel .little-note,body.focus-mode .social-panel .voice-card>div{display:none}
body.focus-mode .social-panel .messages{flex:1;height:auto;min-height:60px;padding:12px;overflow:auto}
body.focus-mode .social-panel .chat-composer{padding:10px}
body.focus-mode .social-panel .chat-composer input{min-height:44px}
body.focus-mode .social-panel .voice-card{display:contents}
body.focus-mode .social-panel #voice-button{display:none}
body.focus-mode .social-panel .voice-statuses{font-size:10px}
body.focus-mode .social-panel #voice-listen{min-height:44px}
body.focus-mode .mobile-chat-close{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;width:100%;min-height:44px;border:1px solid #ceddc3;border-bottom:3px solid #b5cba5;border-radius:13px;background:#e9f1df;color:#315840;font-size:12px}
body.focus-mode.mobile-chat-open #chat-backdrop{display:block;position:fixed;inset:0;z-index:101;background:#143b2b35;backdrop-filter:blur(2px);border:0}
body.focus-mode .share-panel{position:absolute;z-index:9;top:60px;inset-inline-end:16px;width:min(460px,calc(100% - 32px));margin:0;box-shadow:0 12px 32px #29492e30!important}
body.focus-mode .toast{z-index:150;bottom:100px}
@media(max-width:600px){
 body.focus-mode .arena{gap:5px;padding-top:calc(8px + env(safe-area-inset-top));padding-inline:10px}
 body.focus-mode .board-border{padding:7px;border-radius:13px;border-bottom-width:5px}
 body.focus-mode .focus-dock{gap:7px;padding:6px 9px;border-radius:20px}
 body.focus-mode .reaction-bar{grid-template-columns:repeat(4,44px)}
 body.focus-mode.mobile-chat-open .social-panel{inset:auto 10px calc(86px + env(safe-area-inset-bottom));width:auto;height:min(540px,calc(100dvh - 106px));border-radius:22px}
 body.focus-mode .player-row small{display:block}
 body.focus-mode .board.mancala-board{aspect-ratio:1.2!important;grid-template-rows:repeat(2,minmax(0,1fr)) minmax(42px,.7fr);padding:8px}
}
@media(max-height:520px) and (min-width:601px){
 body.focus-mode .arena{padding:8px 76px;gap:3px}
 body.focus-mode .arena-top{position:absolute;top:10px;left:14px;right:14px;width:auto;pointer-events:none}
 body.focus-mode .arena-top button{pointer-events:auto}
 body.focus-mode .arena-top .game-title{max-width:140px;align-items:flex-start}
 body.focus-mode .arena-top .mini-board,body.focus-mode #arena-subtitle{display:none}
 body.focus-mode .focus-dock{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);flex-direction:column;margin:0}
 body.focus-mode .reaction-bar{left:auto;right:78px;bottom:20px;transform:none;grid-template-columns:repeat(2,44px)}
 body.focus-mode .player-row{min-height:32px}
 body.focus-mode .player-row .avatar{width:28px;height:28px}
 body.focus-mode .player-row small{display:none}
 body.focus-mode.mobile-chat-open .social-panel{bottom:10px;right:78px;height:calc(100dvh - 20px)}
}
@media(prefers-reduced-motion:reduce){.focus-dock button,body.focus-mode .reaction-bar button{transition:none}}

/* Raised destructive action, including the immersive table footer. */
#leave-button,body.focus-mode .arena-bottom #leave-button,.round-actions .danger-button{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:11px 20px;
 border:1px solid #a33834;border-bottom:5px solid #7c2828;border-radius:14px;
 background:linear-gradient(145deg,#d96a5a,#b83f3a);color:#fff;font-size:14px;font-weight:700;line-height:1.4;
 box-shadow:inset 0 1px 0 #ffffff45,0 5px 12px #86312c20!important;
 transition:transform .15s,filter .15s;
}
#leave-button svg,body.focus-mode .arena-bottom #leave-button svg,.round-actions .danger-button svg{width:20px;height:20px;flex-shrink:0}
#leave-button:hover:enabled,.round-actions .danger-button:hover:enabled{filter:brightness(1.08);transform:translateY(-2px)}
#leave-button:active:enabled,.round-actions .danger-button:active:enabled{transform:translateY(2px);border-bottom-width:2px}
#leave-button:focus-visible,.round-actions button:focus-visible{outline:3px solid #d4a148;outline-offset:4px}
body.focus-mode .arena-bottom{min-height:50px}
.round-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:12px;width:100%;margin-top:18px}
.welcome-card .round-actions>button,#round-result-dialog .round-actions>button{
 display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;min-width:0;min-height:56px;
 margin:0;padding:12px 10px;border-radius:14px;font-size:15px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;
}
.round-actions .primary-button{border:1px solid #285537;border-bottom:5px solid #173d28;background:linear-gradient(145deg,#50835b,#2a5e3d);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 5px 12px #25492e20!important}
.round-actions .primary-button:hover:enabled{transform:translateY(-2px);filter:brightness(1.08)}
.round-actions .primary-button:active:enabled{transform:translateY(2px);border-bottom-width:2px}
.round-actions svg{width:20px;height:20px;flex-shrink:0}
#round-result-dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:30px;border:1px solid #c0d2ad;border-bottom:6px solid #9db78b;border-radius:24px}
#round-result-dialog .dialog-close{z-index:3}
@media(max-width:600px){
 .round-actions{gap:10px}
 .welcome-card .round-actions>button,#round-result-dialog .round-actions>button{min-height:54px;font-size:14px;padding:12px 8px;gap:6px}
 #leave-button,body.focus-mode .arena-bottom #leave-button{min-height:48px;padding:10px 16px;font-size:13px}
 #round-result-dialog{width:calc(100vw - 20px);max-width:none;padding:22px!important}
}
@media(prefers-reduced-motion:reduce){#leave-button,.round-actions button{transition:none}}

/* The winning identity uses the same chosen sticker as the profile chip. */
#round-result-dialog .result-winner-avatar,.welcome-card .result-winner-avatar{
 position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin:0 auto 12px;
 border:1px solid #cbb66d;border-bottom:5px solid #b29549;border-radius:27px;
 background:radial-gradient(circle at 35% 25%,#fffceb,#e7d494);
 box-shadow:inset 0 2px 0 #fff9,0 10px 22px #80612d26!important;
}
.result-winner-avatar .sticker-avatar{width:82px;height:82px;object-fit:contain;animation:winner-sticker-float 2.6s ease-in-out infinite}
.result-winner-avatar>svg{position:absolute;inset:auto -8px -6px auto;width:31px;height:33px;padding:6px;border:1px solid #c4a44d;border-bottom:3px solid #a38339;border-radius:11px;background:linear-gradient(#fff2b8,#dfc477);color:#806122}
.result-winner-name{display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%;font-size:22px;font-weight:800;line-height:1.5;color:#28573b;overflow-wrap:anywhere;unicode-bidi:plaintext}
.result-winner-name .country-flag{flex-shrink:0}
@keyframes winner-sticker-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.result-winner-avatar .sticker-avatar{animation:none}}

/* Shared modern sheets: a single surface, clear header and consistent spacing. */
html body dialog[open],html body dialog#profile-dialog[open]{
 --sheet-pad:36px;box-sizing:border-box;position:fixed!important;inset:0!important;
 margin:auto!important;width:min(720px,calc(100vw - 64px))!important;max-width:calc(100vw - 64px)!important;
 max-height:calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
 padding:0!important;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
 border:1px solid #bfd0af!important;border-top:2px solid #cfddc0!important;border-bottom:6px solid #9bb486!important;
 border-radius:30px!important;background:linear-gradient(150deg,#fffef8,#f0f6e8)!important;color:#244f36;
 box-shadow:0 28px 90px #153b2a40,inset 0 2px 0 #fff!important;
 animation:modern-sheet-enter .22s ease-out;
}
html body dialog[open]::backdrop{background:#153c2d91;backdrop-filter:blur(7px)}
html body dialog[open]>.sheet-handle{
 display:flex;position:absolute;inset:13px 0 auto;align-items:center;justify-content:center;
 height:18px;min-height:0;margin:0;padding:0;background:transparent;z-index:1;border:0;box-shadow:none!important;
}
html body dialog[open]>.sheet-handle span{display:block;width:44px;height:5px;border:1px solid #adbf9a;border-bottom:2px solid #9aaf85;border-radius:99px;background:linear-gradient(#d5e0c9,#bacda8)}
html body dialog[open] .dialog-close{
 position:absolute!important;inset:20px 20px auto auto!important;float:none!important;margin:0!important;
 display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;z-index:10;
 border:1px solid #bfd0ac;border-bottom:4px solid #9db687;border-radius:14px;
 background:linear-gradient(145deg,#fffef4,#e5eed8);color:#315a3b;box-shadow:inset 0 1px 0 #fff!important;
}
html[dir=rtl] body dialog[open] .dialog-close{inset:20px auto auto 20px!important}
html body dialog[open] .dialog-close svg{width:21px;height:21px}
html body dialog[open] .dialog-close:hover{transform:translateY(-1px);filter:brightness(1.03)}
html body dialog[open] .dialog-close:active{transform:translateY(2px);border-bottom-width:2px}
html body dialog[open] h2{font-size:27px!important;line-height:1.45!important;margin:0 0 16px!important;padding-inline:0;overflow-wrap:anywhere;text-wrap:balance}
html body dialog[open]>p{margin:0 0 24px;font-size:16px;line-height:1.8}
html body dialog[open] .dialog-symbol{margin:0 0 18px;width:60px;height:60px;border-radius:18px}
html body dialog[open] .dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
html body dialog[open] .dialog-actions>button{min-width:0;min-height:52px;justify-content:center}
html body #round-result-dialog[open]{width:min(640px,calc(100vw - 64px))!important}
html body #round-result-dialog[open] .welcome-card{width:100%!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0;border:0;border-radius:0;background:transparent!important;overflow:visible;box-shadow:none!important}
html body #round-result-dialog[open] h2{margin:18px 0 14px!important;padding-inline:12px}
html body #round-result-dialog[open] .welcome-card>p{margin:0 0 24px;font-size:16px;line-height:1.8}
html body #round-result-dialog[open] .round-actions{margin-top:24px}
html body #round-result-dialog[open] .round-actions>button{min-height:58px;font-size:16px}
html body dialog[open] .country-list{max-height:min(280px,35dvh)}
@keyframes modern-sheet-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(max-width:600px){
 html body dialog[open],html body dialog#profile-dialog[open],html body #round-result-dialog[open]{
  --sheet-pad:22px;inset:auto 0 0!important;margin:0 auto!important;width:100%!important;max-width:100%!important;
  max-height:calc(100dvh - max(20px,env(safe-area-inset-top)))!important;
  padding:0!important;
  border-radius:28px 28px 0 0!important;border-bottom:0!important;scrollbar-gutter:auto;
 }
 html body dialog[open] .dialog-close{inset:16px 18px auto auto!important}
 html[dir=rtl] body dialog[open] .dialog-close{inset:16px auto auto 18px!important}
 html body dialog[open]>.sheet-handle{top:12px}
 html body dialog[open] h2{font-size:23px!important;line-height:1.5!important;margin-bottom:14px!important}
 html body dialog[open]>p{font-size:14px;line-height:1.8;margin-bottom:20px}
 html body dialog[open] .dialog-symbol{width:52px;height:52px;margin-bottom:16px}
 html body #round-result-dialog[open] .welcome-card>p{font-size:14px;margin-bottom:20px}
 html body #round-result-dialog[open] .round-actions{margin-top:20px}
 html body #round-result-dialog[open] .round-actions>button{min-height:54px;font-size:14px}
 html body dialog[open] .country-list{max-height:230px}
}
@media(prefers-reduced-motion:reduce){html body dialog[open]{animation:none}}

/* Immersive chat is an opaque full viewport; its old backdrop must not cover it. */
body.focus-mode.mobile-chat-open #chat-backdrop{display:none!important;backdrop-filter:none;background:none}
body.focus-mode.mobile-chat-open aside.social-panel{
 position:fixed;inset:var(--focus-chat-top,0px) 0 auto;z-index:102;display:flex!important;
 width:100%;max-width:none;height:var(--focus-chat-height,100dvh);max-height:none;box-sizing:border-box;
 padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
 margin:0;gap:12px;align-items:center;border:0;border-radius:0;
 background:linear-gradient(145deg,#fffef7,#edf4e5);backdrop-filter:none;filter:none;
 overflow:hidden;transform:none;box-shadow:none!important;
}
body.focus-mode.mobile-chat-open .social-panel .mobile-chat-close{
 width:100%;max-width:960px;min-height:48px;flex-shrink:0;font-size:14px;
 background:linear-gradient(145deg,#fdfef5,#e0ebd5);border-bottom:4px solid #a6bd92;border-radius:15px;
}
body.focus-mode.mobile-chat-open .social-panel .chat-card{
 display:flex;flex:1 1 0;min-height:0;width:100%;max-width:960px;overflow:hidden;
 border:1px solid #c4d5b6;border-bottom:4px solid #abc398;border-radius:22px;
 background:#fffef8;box-shadow:0 8px 24px #27482e12!important;
}
body.focus-mode.mobile-chat-open .social-panel .chat-heading{padding:16px 20px;flex-shrink:0}
body.focus-mode.mobile-chat-open .social-panel .chat-heading h2{font-size:16px}
body.focus-mode.mobile-chat-open .social-panel .messages{flex:1 1 0;min-height:0;padding:20px;overscroll-behavior:contain;overflow-y:auto;scrollbar-width:thin}
body.focus-mode.mobile-chat-open .social-panel .chat-composer{flex-shrink:0;padding:16px 20px;background:#f0f6e8;border-top:1px solid #dae5d0}
body.focus-mode.mobile-chat-open .social-panel .chat-composer input{min-width:0;min-height:50px;font-size:16px;background:#fff;color:#244f36;border:1px solid #c2d1b6;border-bottom:3px solid #aec49c;border-radius:13px;padding:12px}
body.focus-mode.mobile-chat-open .social-panel .chat-composer form button{width:50px;height:50px;min-height:50px;flex-shrink:0;border-radius:13px}
body.focus-mode.mobile-chat-open .social-panel .bubble{font-size:15px;line-height:1.7;max-width:85%;overflow-wrap:anywhere}
body.focus-mode.mobile-chat-open .social-panel .voice-card{margin:0}
@media(max-width:600px),(max-height:520px){
 body.focus-mode.mobile-chat-open aside.social-panel{padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
 body.focus-mode.mobile-chat-open .social-panel .chat-heading{padding:10px 12px}
 body.focus-mode.mobile-chat-open .social-panel .chat-composer{padding:10px}
 body.focus-mode.mobile-chat-open .social-panel .messages{padding:12px}
 body.focus-mode.mobile-chat-open .social-panel .mobile-chat-close{min-height:44px;font-size:12px}
 body.focus-mode.mobile-chat-open .social-panel .chat-card{border-radius:17px}
}
@media(max-height:420px){body.focus-mode.mobile-chat-open .social-panel .quick-messages{display:none}}

/* A reserved page scrollbar must not leave a strip beside immersive views. */
html:has(>body.focus-mode){overflow:hidden;scrollbar-gutter:auto!important}
body.focus-mode.mobile-chat-open aside.social-panel{width:100vw}

/* Fullscreen chat contains only the conversation and its composer. */
body.focus-mode.mobile-chat-open aside.social-panel .voice-card{display:none!important}

/* Empty decorative badges should not leave a blank tile. */
.welcome-symbol:empty{display:none!important}

/* Shared tactile treatment for controls; board cells retain their game styling. */
html body button:not(:where(#board *, .sticker-picker *, .promotion-options *)){
 border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:color-mix(in srgb,currentColor 25%,#7f9e6d);
 box-shadow:inset 0 1px 0 #ffffff45,0 3px 0 #24472e0c!important;
 transition:translate .15s,filter .15s,background .18s;
}
html body button:not(:where(#board *, .sticker-picker *, .promotion-options *)):hover:enabled{filter:brightness(1.04)}
html body button:not(:where(#board *, .sticker-picker *, .promotion-options *)):active:enabled{translate:0 2px}
html body button:focus-visible{outline:3px solid #c59a45;outline-offset:3px}
html body #invitation-dialog[open]{width:min(660px,calc(100vw - 64px))!important}
#invitation-dialog .invitation-card{width:100%!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0;background:transparent!important;border:0;border-radius:0;overflow:visible;text-align:center}
.welcome-card .invitation-symbol{display:grid;place-items:center;width:78px;height:80px;margin:0 auto 20px;border:1px solid #bfd0a3;border-bottom:5px solid #9ab37d;border-radius:24px;background:linear-gradient(140deg,#faf8dc,#dce9bd);color:#41673c;box-shadow:inset 0 2px 0 #fff9,0 8px 18px #49603916!important}
.invitation-symbol svg{width:36px;height:36px}
#invitation-dialog h2{margin:0 0 16px!important}
#invitation-dialog .invitation-card>p{font-size:16px;line-height:1.8;margin:0 0 24px}
.invitation-link{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:52px;margin:0 0 16px;padding:13px 15px;border:1px solid #c5d4b8;border-bottom:3px solid #b0c49f;border-radius:14px;background:#fffef9;color:#365b40;font:14px/1.5 'DM Sans',sans-serif;text-overflow:ellipsis;cursor:text}
.invitation-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%}
.welcome-card .invitation-actions>button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;width:100%;min-height:56px;margin:0;padding:12px 10px;border:1px solid #285537;border-bottom:5px solid #173d28;border-radius:15px;font-size:15px;font-weight:700;line-height:1.5;white-space:normal;background:linear-gradient(145deg,#50835b,#2a5e3d);color:#fff}
.welcome-card .invitation-actions>.secondary-button{background:linear-gradient(145deg,#fbfcee,#e0ebd1);color:#355b3e;border-color:#bed0a9;border-bottom-color:#98b280}
.invitation-actions svg{width:21px;height:21px;flex-shrink:0}
.welcome-card .invitation-note{display:block;margin-top:20px;font-size:12px;line-height:1.8;color:#6c805e}
.invitation-share-options{display:flex;gap:12px;justify-content:center;margin-top:16px}
.invitation-share-options[hidden]{display:none}
.invitation-share-options a{flex:1;padding:12px;border:1px solid #c1d2af;border-bottom:4px solid #a3bb8e;border-radius:12px;background:linear-gradient(#f9fbed,#e5efd9);color:#31573d;text-align:center;font-size:14px;text-decoration:none}
@media(max-width:600px){html body #invitation-dialog[open]{width:100%!important}.invitation-actions{gap:10px}.welcome-card .invitation-actions>button{min-height:54px;font-size:14px;gap:7px}#invitation-dialog .invitation-card>p{font-size:14px;margin-bottom:20px}.invitation-link{font-size:13px}.welcome-card .invitation-symbol{width:68px;height:70px;border-radius:21px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){html body button{transition:none!important}}

.welcome-card .invitation-actions>.secondary-button{border-bottom-width:5px!important}

/* Game-ready card shares the invitation sheet's sculpted, calm surfaces. */
.board-overlay:has(.ready-card){padding:16px;background:#264d3c42;backdrop-filter:blur(5px);border-radius:15px}
.welcome-card.ready-card{box-sizing:border-box!important;width:min(460px,100%)!important;max-width:100%;padding:30px 28px!important;border:1px solid #c3d2b3;border-top:2px solid #e5ecd9;border-bottom:6px solid #9db686;border-radius:26px;background:linear-gradient(145deg,#fffef7,#edf4e4)!important;box-shadow:inset 0 2px 0 #fff,0 16px 36px #173c292b!important;text-align:center}
.welcome-card.ready-card .ready-symbol{display:grid;place-items:center;width:74px;height:78px;margin:0 auto 22px;border:1px solid #c0cf9f;border-bottom:5px solid #9eb47a;border-radius:23px;background:linear-gradient(140deg,#fbf8d9,#dce8ba);color:#42653b;box-shadow:inset 0 2px 0 #fff9,0 7px 16px #49603916!important}
.ready-symbol svg{width:36px;height:36px;stroke-width:1.7}
.welcome-card.ready-card h2{margin:0 0 14px;padding:0;font-size:26px;line-height:1.4;letter-spacing:-.4px;text-wrap:balance;color:#244f36}
.welcome-card.ready-card p{margin:0 0 24px;font-size:15px;line-height:1.85;color:#617458;text-wrap:pretty}
.welcome-card.ready-card>.primary-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin:0;padding:14px 16px;border:1px solid #285537;border-bottom:5px solid #173d28;border-radius:15px;background:linear-gradient(145deg,#50835b,#2a5e3d);font-size:16px;line-height:1.5;font-weight:700;color:#fff;box-shadow:inset 0 1px 0 #fff5,0 6px 12px #25492e1c!important}
.welcome-card.ready-card>.primary-button svg{width:21px;height:21px;flex-shrink:0}
.welcome-card.ready-card .ready-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 0;font-size:11px;line-height:1.6;color:#6e805f}
.ready-note svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:600px){
 .board-overlay:has(.ready-card){padding:10px}
 .welcome-card.ready-card{padding:23px 18px!important;border-radius:23px}
 .welcome-card.ready-card .ready-symbol{width:62px;height:65px;border-radius:20px;margin-bottom:17px}
 .ready-symbol svg{width:30px;height:30px}
 .welcome-card.ready-card h2{font-size:22px;margin-bottom:12px}
 .welcome-card.ready-card p{font-size:13px;line-height:1.75;margin-bottom:20px}
 .welcome-card.ready-card>.primary-button{min-height:54px;font-size:14px;padding:12px}
 .welcome-card.ready-card .ready-note{font-size:10px;margin-top:15px;gap:5px}
}
@media(max-height:520px){
 .focus-mode .welcome-card.ready-card{padding:16px!important}
 .focus-mode .welcome-card.ready-card .ready-symbol{width:42px;height:44px;border-radius:14px;margin-bottom:10px}
 .focus-mode .ready-symbol svg{width:23px;height:23px}
 .focus-mode .welcome-card.ready-card h2{font-size:18px;margin-bottom:8px}
 .focus-mode .welcome-card.ready-card p{font-size:12px;margin-bottom:12px;line-height:1.6}
 .focus-mode .welcome-card.ready-card>.primary-button{min-height:46px;font-size:13px;padding:9px}
 .focus-mode .welcome-card.ready-card .ready-note{margin-top:10px;font-size:9px}
}

body:not(.focus-mode) .board-wrap:has(.ready-card){min-height:440px!important}
body:not(.focus-mode) .welcome-card.ready-card{max-height:none!important}
@media(max-width:360px){
 .welcome-card.ready-card{padding:19px 14px!important}
 .welcome-card.ready-card .ready-symbol{width:54px;height:57px;margin-bottom:14px}
 .welcome-card.ready-card h2{font-size:20px;line-height:1.4}
 .welcome-card.ready-card p{font-size:12px;line-height:1.7;margin-bottom:17px}
 .welcome-card.ready-card .ready-note{font-size:9px}
}

.guest-entry{display:grid;gap:10px;margin:0 0 24px;padding:16px;border:1px solid #c6d6b6;border-bottom:4px solid #adc695;border-radius:18px;background:linear-gradient(145deg,#fbf9e9,#e6efd8)}
#account-guest{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;font-size:15px;font-weight:700;border-radius:14px}
#account-guest[hidden],#account-upgrade[hidden],#account-switch[hidden]{display:none!important}
.guest-entry:has(#account-guest[hidden]){display:none}
.guest-entry p{font-size:12px;line-height:1.8;margin:0;text-align:center;color:#627956}
#account-upgrade,#account-switch{width:100%;justify-content:center;min-height:50px;margin-top:12px}
@media(max-width:600px){.guest-entry{padding:13px;margin-bottom:20px}.guest-entry p{font-size:11px}#account-guest{font-size:14px}}

.guest-entry[hidden],#account-form .account-field[hidden],#account-password-hint[hidden],#account-remember[hidden]{display:none!important}
.welcome-card.searching-card .search-loading{background:linear-gradient(140deg,#f2f7e5,#dbe9cc);border-color:#bdcfaa;border-bottom-color:#95b47e;color:#3b6844}
.search-loading svg{animation:matchmaking-spin 1.2s linear infinite;transform-origin:center}
.welcome-card.searching-card>.primary-button{background:linear-gradient(145deg,#fcfdf1,#e3ecd8);color:#395d40;border-color:#bacdab;border-bottom-color:#9bb583}
@keyframes matchmaking-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.search-loading svg{animation:none}}

@media(max-height:520px){
 .focus-mode .welcome-card.searching-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:14px!important}
 .focus-mode .welcome-card.searching-card .search-loading{width:34px;height:37px;margin:0;border-radius:12px}
 .focus-mode .searching-card .search-loading svg{width:22px;height:22px}
 .focus-mode .welcome-card.searching-card h2{font-size:16px;line-height:1.35;text-align:start;margin:0}
 .focus-mode .welcome-card.searching-card p{grid-column:1/-1;font-size:11px;line-height:1.5;margin:0}
 .focus-mode .welcome-card.searching-card>.primary-button{grid-column:1/-1;min-height:44px;margin:0;padding:8px}
}

@media(max-height:520px){
 .focus-mode .board-overlay:has(.searching-card){position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px 80px}
 .focus-mode .welcome-card.searching-card{width:min(420px,100%)!important;max-height:calc(100dvh - 32px)!important}
}

.audio-playback-prompt{position:fixed;z-index:160;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:flex;align-items:center;justify-content:center;gap:10px;max-width:calc(100vw - 28px);min-height:52px;padding:12px 20px;border-radius:16px;box-shadow:0 9px 28px #21452b36!important}
.audio-playback-prompt[hidden]{display:none!important}
.audio-playback-prompt svg{width:22px;height:22px;flex-shrink:0}

.focus-dock [data-listen-quick]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.focus-mode .focus-dock{gap:7px}
@media(max-width:360px){body.focus-mode .focus-dock{gap:4px;padding-inline:7px}.focus-dock button{width:42px;height:44px;padding:8px}}
.arena-listening{display:flex;align-items:center;justify-content:center;gap:8px}
.arena-listening svg{width:20px;height:20px;flex-shrink:0}
[data-listen-quick][aria-pressed=false]{color:#985241}

@media(max-width:600px){.arena-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.arena-extras>button{min-width:0;min-height:48px;justify-content:center;white-space:normal}.arena-listening span{font-size:11px}}

/* Route visibility is correct before JavaScript and cannot be overridden by layouts. */
#lobby[hidden],#game-room[hidden],#room-heading[hidden]{display:none!important}
body.in-room #lobby{display:none!important}

.startup-error{position:fixed;z-index:500;inset:20px 20px auto;max-width:600px;margin-inline:auto;padding:22px;border:1px solid #c1d1b0;border-bottom:5px solid #9eb789;border-radius:20px;background:#f8fbef;color:#264f37;box-shadow:0 12px 35px #173d2b30!important;text-align:center}
.startup-error p{margin:0 0 16px;font-size:15px;line-height:1.8}
.startup-error button{min-height:48px}

/* A fixed header row and a separately scrolling body for every modal. */
html body dialog[open],html body dialog#profile-dialog[open]{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden;scrollbar-gutter:auto}
html body dialog[open]>.sheet-header{position:relative;display:flex;align-items:center;gap:14px;flex-shrink:0;width:100%;box-sizing:border-box;padding:30px var(--sheet-pad,36px) 18px;border-bottom:1px solid #d8e3cd;background:linear-gradient(145deg,#fffef8,#edf4e4);z-index:12}
.sheet-header>.sheet-heading{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
html body dialog[open] .sheet-header .dialog-close{position:static!important;inset:auto!important;margin:0!important;float:none!important;flex-shrink:0;width:44px;height:46px;min-height:44px;display:grid;place-items:center}
html body dialog[open] .sheet-header .dialog-symbol,html body dialog[open] .sheet-header .account-emblem{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;margin:0!important;padding:0;border-radius:15px;background:linear-gradient(145deg,#f6f7df,#dfeacc);border:1px solid #bfd0a8;border-bottom:4px solid #9eb580;color:#41683d}
.sheet-header .account-emblem strong{display:none}
.sheet-header .account-emblem img{width:40px;height:40px;object-fit:contain}
.sheet-header .dialog-symbol svg{width:25px;height:25px}
html body dialog[open] .sheet-header .sheet-title{margin:0!important;padding:0!important;font-size:21px!important;line-height:1.4!important;text-align:start;font-weight:700;overflow-wrap:anywhere;text-wrap:balance}
html body dialog[open] .sheet-header>.sheet-handle{position:absolute;inset:8px 64px auto;display:flex;align-items:center;justify-content:center;height:14px;margin:0;padding:0;background:transparent}
.sheet-header>.sheet-handle span{display:block;width:44px;height:5px;border:1px solid #adbf9a;border-bottom:2px solid #9aaf85;border-radius:99px;background:linear-gradient(#d5e0c9,#bacda8)}
html body dialog[open]>.sheet-body{flex:1 1 auto;min-height:0;box-sizing:border-box;width:100%;padding:24px var(--sheet-pad,36px) 30px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b5c8a4 transparent}
html body dialog[open] .sheet-body>p:first-child{margin-top:0}
html body #round-result-dialog[open] .sheet-header .sheet-title{margin:0!important}
@media(max-width:600px){
 html body dialog[open]>.sheet-header{padding:26px 20px 14px;gap:10px}
 .sheet-header>.sheet-heading{gap:10px}
 html body dialog[open] .sheet-header .sheet-title{font-size:17px!important;line-height:1.4!important}
 html body dialog[open] .sheet-header .dialog-symbol,html body dialog[open] .sheet-header .account-emblem{width:44px;height:46px;border-radius:14px}
 html body dialog[open]>.sheet-body{padding:20px 22px calc(24px + env(safe-area-inset-bottom))}
}

#confirm-accept{background:linear-gradient(145deg,#d96a5a,#b83f3a)!important;border:1px solid #a33834!important;border-bottom:5px solid #7c2828!important;color:#fff!important}

/* Selected dock controls retain contrast even while hovered or touched. */
body.focus-mode .focus-dock button:hover:not(:disabled){background:linear-gradient(145deg,#fffef5,#e3edda);color:#315840}
body.focus-mode .focus-dock button:is([aria-pressed="true"],[aria-expanded="true"]),
body.focus-mode .focus-dock button:is([aria-pressed="true"],[aria-expanded="true"]):is(:hover,:focus,:active){
 background:linear-gradient(145deg,#4c8258,#25533a)!important;color:#fff!important;
 border-color:#224a32!important;border-bottom-color:#143522!important;
 box-shadow:inset 0 1px 0 #ffffff38,0 3px 0 #153b2614!important;
}
body.focus-mode .focus-dock button:disabled{background:linear-gradient(145deg,#f1f4e9,#e0e8d7);color:#829279;opacity:.65}
.rank-result .rank-matches{font-size:11px;color:#718369;line-height:1.5}
@media(max-width:600px){.rank-result .rank-matches{font-size:10px}}

.rank-stats .rank-stat+ .rank-stat::before{content:' · '}
.rank-result .rank-stats{display:block;white-space:nowrap;font-size:11px;line-height:1.6;color:#62795f}
.ranking-row .rank-nickname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-row>strong .country-flag{flex-shrink:0}
@media(max-width:600px){
 #ranking-list{gap:10px;margin:16px 0}
 .ranking-row{display:grid;grid-template-columns:24px 40px minmax(0,1fr);gap:5px 9px;align-items:center;padding:11px;border-radius:17px;border-bottom:3px solid #c7d6b8;box-shadow:inset 0 1px 0 #fff}
 .ranking-row:first-child{border-bottom-color:#d1b569}
 .ranking-row .rank-number{grid-column:1;grid-row:1/3;min-width:0;font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
 .ranking-row .rank-face{display:block;grid-column:2;grid-row:1/3;width:40px;height:40px}
 .ranking-row>strong{grid-column:3;grid-row:1;display:flex;flex-wrap:nowrap;gap:6px;min-width:0;font-size:13px;line-height:1.5}
 .ranking-row .rank-result{display:flex;grid-column:3;grid-row:2;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%;padding:0;margin:0;border:0;font-variant-numeric:tabular-nums}
 .ranking-row .rank-result>b{min-width:0;font-size:14px;line-height:1.5;white-space:nowrap;color:#315d3e}
 .ranking-row .rank-result>.rank-stats{display:block;min-width:0;margin:0;padding:0;border:0;font-size:11px;line-height:1.6;white-space:nowrap;text-align:end}
 .ranking-row .rank-stat{display:block}
 .ranking-row .rank-stat+ .rank-stat::before{content:none}
}
@media(max-width:360px){
 .ranking-row{grid-template-columns:22px 36px minmax(0,1fr);gap:4px 8px;padding:9px}
 .ranking-row .rank-face{width:36px;height:36px}
 .ranking-row .rank-result{gap:5px}
 .ranking-row .rank-result>b{font-size:13px}
 .ranking-row .rank-result>.rank-stats{font-size:10px}
}

/* Empty winner badges must not leave an extra title margin on drawn rounds. */
html body #round-result-dialog[open] .welcome-card:has(>.welcome-symbol:empty)>h2{margin-top:0!important}

/* Game filters and compact opponent cards share clear, tactile controls. */
.bot-game-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px}
.bot-game-tabs button svg{width:19px;height:19px;stroke-width:1.8;flex-shrink:0}
.bot-card{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:6px 10px;direction:ltr}
.bot-card .bot-face{grid-column:1;grid-row:1/3;width:44px;height:44px}
.bot-card .bot-identity{grid-column:2;grid-row:1;min-width:0}
.bot-card .bot-identity strong{font-size:15px;gap:6px;overflow-wrap:anywhere}
.bot-card .bot-available{grid-column:2;grid-row:2;min-width:0}
.bot-card .bot-challenge{grid-column:3;grid-row:1/3;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;max-width:none;padding:10px 12px!important;white-space:nowrap;font-size:12px}
.bot-card .bot-challenge svg{width:16px;height:16px;flex-shrink:0}
html[dir=rtl] .bot-card .bot-identity,html[dir=rtl] .bot-card .bot-available{direction:rtl;text-align:start}
@media(max-width:600px){.bot-card{grid-template-columns:40px minmax(0,1fr) auto;gap:6px 8px;padding:13px}.bot-card .bot-face{width:40px;height:40px}.bot-card .bot-challenge{padding:10px!important;font-size:11px;gap:5px}.bot-card .bot-identity strong{font-size:14px}.bot-game-tabs button{gap:7px}.bot-game-tabs button svg{width:18px;height:18px}}

/* Right-hand invitation actions become icon-only on phones. */
.bot-card .bot-available{font-size:11px}
@media(max-width:900px){
 .bot-card .bot-challenge{width:46px;height:46px;min-width:46px;min-height:46px;padding:10px!important;gap:0}
 .bot-card .bot-challenge>.invite-label{display:none}
 .bot-card .bot-challenge svg{width:20px;height:20px}
}

/* Arabic identities remain a single balanced row without separating the flag. */
.bot-card .bot-identity strong{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;gap:7px}
.bot-card .card-nickname{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.bot-card .bot-identity .country-flag{display:block;flex:0 0 23px;width:23px;height:18px;max-width:none;object-fit:cover}
html[dir=rtl] .bot-card .bot-identity{direction:rtl;text-align:right}
html[dir=rtl] .bot-card .bot-identity strong{direction:rtl;justify-content:flex-start}
html[dir=rtl] .bot-card .bot-available{direction:rtl;justify-content:flex-start}

/* A quiet, structured footer in the same sculpted visual language. */
footer.site-footer{display:block!important;margin:42px 0 26px;padding:0;border:1px solid #cbd9bf;border-top:2px solid #e2e9d7;border-bottom:6px solid #a9bd96;border-radius:26px;background:linear-gradient(145deg,#fffef7,#edf3e5);color:#35563e;box-shadow:inset 0 2px 0 #fff9,0 12px 30px #29492c0d!important;font-size:13px;overflow:hidden}
.site-footer .footer-main{display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:32px;padding:32px}
.site-footer .footer-brand,.site-footer .footer-games{min-width:0}
.site-footer .footer-logo{display:inline-flex;align-items:center;min-height:46px;margin-bottom:18px}
.site-footer .footer-logo img{display:block;width:158px;height:46px;object-fit:contain}
.site-footer .footer-tagline{max-width:290px;margin:0 0 12px;font-size:21px;font-weight:700;line-height:1.5;text-wrap:balance;color:#254f36}
.site-footer .footer-intro{max-width:300px;margin:0;font-size:13px;line-height:1.9;color:#6a7f5e}
.site-footer h2{margin:0 0 18px;font-size:15px;line-height:1.6;font-weight:700;color:#2b5639}
.site-footer .footer-game-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.site-footer .footer-game-links a{display:flex;align-items:center;gap:9px;min-width:0;min-height:42px;padding:8px 10px;border:1px solid transparent;border-radius:11px;color:#54734b;text-decoration:none;font-size:13px;line-height:1.5;transition:background .15s,border-color .15s}
.site-footer .footer-game-links a:hover{background:#fafff3;border-color:#ceddc0}
.site-footer .footer-game-links svg{width:18px;height:18px;flex-shrink:0;color:#648353}
.site-footer .footer-game-links span{min-width:0;overflow-wrap:anywhere}
.site-footer .footer-app{min-width:0;padding:20px;border:1px solid #cbd9b9;border-bottom:4px solid #b2c69d;border-radius:20px;background:linear-gradient(135deg,#f6f7e5,#e1ebce)}
.site-footer .footer-app-icon{display:grid;place-items:center;width:42px;height:44px;margin-bottom:14px;border:1px solid #bdcda0;border-bottom:4px solid #a2b783;border-radius:13px;background:linear-gradient(#fffce8,#e3eabf);color:#547141}
.site-footer .footer-app-icon svg{width:23px;height:23px}
.site-footer .footer-app h2{font-size:16px;margin-bottom:9px}
.site-footer .footer-app p{margin:0 0 16px;font-size:12px;line-height:1.8;color:#71835d}
.site-footer #footer-install{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:10px 12px;font-size:12px;border-radius:12px}
.site-footer #footer-install svg{width:18px;height:18px;flex-shrink:0}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 32px;border-top:1px solid #d5e0c9;background:#e6eddd80}
.site-footer .footer-bottom>small{display:flex;flex-wrap:wrap;gap:7px 13px;font-size:11px;line-height:1.8;color:#728266}
.site-footer .footer-notes{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.site-footer .footer-notes>span,.site-footer #footer-rules{display:inline-flex;align-items:center;gap:6px;font-size:11px;line-height:1.6;color:#617b53}
.site-footer .footer-notes svg{width:16px;height:16px;flex-shrink:0}
.site-footer #footer-rules{min-height:38px;padding:7px 10px;border:1px solid #cad9ba;border-bottom:3px solid #b0c39b;border-radius:10px;background:linear-gradient(#f9fbee,#e4edd7)}
@media(max-width:1100px){.site-footer .footer-main{grid-template-columns:1fr 1fr;gap:24px}.site-footer .footer-brand{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.site-footer .footer-logo{grid-column:1;margin-bottom:12px}.site-footer .footer-tagline{grid-column:1}.site-footer .footer-intro{grid-column:2;grid-row:1/3;align-self:center}.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}}
@media(max-width:600px){footer.site-footer{margin:28px 0 20px;border-radius:22px}.site-footer .footer-main{grid-template-columns:1fr;gap:24px;padding:24px 20px}.site-footer .footer-brand{display:block;grid-column:auto}.site-footer .footer-logo{margin-bottom:14px}.site-footer .footer-tagline{font-size:20px;max-width:none}.site-footer .footer-intro{max-width:none;font-size:12px}.site-footer .footer-game-links{gap:6px 10px}.site-footer .footer-game-links a{padding:8px 4px;min-height:44px;font-size:13px}.site-footer .footer-app{padding:18px}.site-footer .footer-bottom{padding:16px 20px;gap:12px}.site-footer .footer-notes{justify-content:flex-start;gap:10px 14px}.site-footer .footer-notes>span,.site-footer #footer-rules{font-size:10px}}
html[dir=rtl] .site-footer{text-align:right}
@media(prefers-reduced-motion:reduce){.site-footer .footer-game-links a{transition:none}}

/* Sculpted chess silhouettes sit directly on the squares without background tiles. */
.board.chess-board .piece,
.board.chess-board .piece.white,
.board.chess-board .piece.black{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;text-shadow:none!important;width:90%;height:100%;overflow:visible;pointer-events:none}
.board.chess-board .piece::before,.board.chess-board .piece::after{display:none!important}
.board.chess-board .piece .chess-asset{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 1px #765b3740) drop-shadow(0 4px 3px #153e2730);transition:transform .18s ease,filter .18s ease}
.board.chess-board .piece.black .chess-asset{filter:brightness(.48) sepia(.6) saturate(1.3) hue-rotate(75deg) drop-shadow(0 2px 1px #0f2d2180) drop-shadow(0 4px 3px #153e2740)}
@media(hover:hover){.board.chess-board .square.legal:hover .chess-asset{transform:translateY(-2px) scale(1.035)}}
@media(prefers-reduced-motion:reduce){.board.chess-board .piece .chess-asset{transition:none}}

/* Keep ordinary board colours instead of yellow move trails. */
.board .square.selected{outline:2px solid #315840;outline-offset:-3px;box-shadow:none!important}
.board .square:focus-visible{outline:2px solid #315840;outline-offset:-3px}

/* Chess input and movement stay visually steady; depth comes from the artwork. */
.board.chess-board .square .piece,.board.chess-board .square .chess-asset{animation:none!important;transition:none!important;transform:none!important}
.result-summary-button[hidden]{display:none!important}

.board-overlay[hidden]{display:none!important}

/* Desktop table: use the full height immediately, with controls beside the board. */
@media(min-width:1100px) and (min-height:600px){
 body.focus-mode .arena{--focus-rail:clamp(140px,12vw,210px);justify-content:center;gap:0;padding:16px calc(var(--focus-rail) + 32px)}
 body.focus-mode .board-wrap{transition:none!important}
 body.focus-mode .arena-top{position:absolute;inset:24px auto auto 16px;width:var(--focus-rail);flex-direction:column;align-items:flex-start;gap:18px}
 body.focus-mode .game-title h2{font-size:19px}
 body.focus-mode #arena-subtitle{font-size:11px}
 body.focus-mode .session-invite-button{font-size:13px;min-height:44px}
 body.focus-mode .player-row{position:absolute;left:16px;width:var(--focus-rail);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
 body.focus-mode .player-row.opponent{top:28%}
 body.focus-mode .player-row.self{bottom:25%}
 body.focus-mode .player-row>div:nth-child(2){min-width:0;max-width:100%}
 body.focus-mode .player-row strong{font-size:15px;overflow-wrap:anywhere}
 body.focus-mode .player-row small{font-size:12px!important;white-space:normal;max-width:100%}
 body.focus-mode .player-row .avatar{width:42px;height:42px}
 body.focus-mode .clock{font-size:25px;min-width:86px}
 body.focus-mode .arena-bottom{position:absolute;left:16px;bottom:24px;width:var(--focus-rail);flex-direction:column;align-items:flex-start;gap:14px}
 body.focus-mode .arena-bottom>span{font-size:12px}
 body.focus-mode .focus-dock{position:absolute;right:28px;top:50%;transform:translateY(-50%);flex-direction:column;margin:0;padding:12px;gap:12px}
 body.focus-mode .focus-dock button{width:54px;height:54px}
 body.focus-mode .reaction-bar{left:auto;right:104px;bottom:24px;transform:none;grid-template-columns:repeat(4,44px)}
}

/* Thumb-friendly phone table, with one consistent row of game tools. */
@media(max-width:600px){
 body.focus-mode .arena{gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom))}
 body.focus-mode .arena-top{min-height:44px;gap:10px;align-items:center}
 body.focus-mode .game-title{min-width:0}
 body.focus-mode .game-title h2{font-size:16px}
 body.focus-mode #arena-subtitle{display:none}
 body.focus-mode .session-invite-button{min-height:46px;min-width:46px;padding:10px;font-size:12px;border-radius:14px}
 body.focus-mode .player-row{box-sizing:border-box;width:100%;max-width:440px;display:flex;gap:8px;min-height:52px;padding:6px 8px;border:1px solid #d6e0ca;border-radius:15px;background:linear-gradient(135deg,#fffdf5,#edf3e5)}
 body.focus-mode .player-row>div:nth-child(2){min-width:0;flex:1}
 body.focus-mode .player-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
 body.focus-mode .player-row small{font-size:11px!important;max-width:100%;margin-top:3px}
 body.focus-mode .player-row .avatar{width:36px;height:36px;flex-shrink:0}
 body.focus-mode .clock{min-width:64px;font-size:20px;padding:5px 7px;flex-shrink:0}
 body.focus-mode .piece-counter{font-size:11px;gap:3px}
 body.focus-mode .arena-bottom{width:100%;max-width:440px;min-height:50px;gap:8px}
 body.focus-mode .arena-bottom>span{min-width:0;font-size:11px;overflow-wrap:anywhere}
 body.focus-mode .arena-bottom>div{display:flex;align-items:center;gap:6px;flex-shrink:0}
 body.focus-mode .arena-bottom button{min-height:48px;min-width:48px;font-size:13px;border-radius:14px}
 body.focus-mode .arena-bottom svg{width:22px;height:22px}
 body.focus-mode .focus-dock{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));box-sizing:border-box;width:100%;max-width:440px;gap:4px;padding:7px 6px;border-radius:20px;margin-top:auto}
 body.focus-mode .focus-dock button{width:100%;height:56px;min-height:56px;min-width:44px;padding:8px;border-radius:14px;touch-action:manipulation}
 body.focus-mode .focus-dock button svg{width:25px;height:25px}
 body.focus-mode .reaction-bar{bottom:calc(96px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,52px);gap:8px;padding:12px}
 body.focus-mode .reaction-bar button{width:52px;height:54px;font-size:30px}
 body.focus-mode .board-wrap{transition:none!important}
 body.focus-mode.mobile-chat-open .social-panel .mobile-chat-close{min-height:50px;font-size:14px}
 body.focus-mode.mobile-chat-open .social-panel .chat-composer form button{min-width:50px;min-height:50px}
}
@media(max-width:360px){body.focus-mode .player-row .piece-counter{display:none}body.focus-mode .player-row small{font-size:10px!important}}
@media(max-width:319px){body.focus-mode .focus-dock{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:601px) and (max-width:1099px) and (max-height:520px){
 body.focus-mode .focus-dock{gap:6px;padding:6px}
 body.focus-mode .focus-dock button{width:48px;height:44px;min-height:44px;padding:8px}
 body.focus-mode .focus-dock button svg{width:24px;height:24px}
}

@media(min-width:601px) and (max-width:1099px) and (max-height:520px){
 body.focus-mode .arena{justify-content:center;gap:0;padding:8px 84px 8px 176px}
 body.focus-mode .arena-top{inset:10px 12px auto;width:auto}
 body.focus-mode .player-row{position:absolute;left:12px;width:148px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:5px 8px;padding:6px;border:1px solid #d6e0ca;border-radius:14px;background:#f2f6e9}
 body.focus-mode .player-row.opponent{top:70px}
 body.focus-mode .player-row.self{bottom:74px}
 body.focus-mode .player-row>div:nth-child(2){min-width:0}
 body.focus-mode .player-row strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
 body.focus-mode .player-row .piece-counter{display:none}
 body.focus-mode .player-row .clock{grid-column:2;font-size:20px;min-width:0;justify-self:start}
 body.focus-mode .arena-bottom{position:absolute;left:12px;bottom:10px;width:148px;min-height:48px}
 body.focus-mode .arena-bottom>span{display:none}
 body.focus-mode .arena-bottom>div{display:flex;gap:6px}
 body.focus-mode .arena-bottom button{min-width:44px;min-height:44px}
 body.focus-mode .focus-dock{right:10px;inset-inline-end:auto}
}

.invitation-card .invitation-timer{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px 12px;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:18px 0;padding:12px 16px;border:1px solid #becfa8;border-bottom:5px solid #94af7d;border-radius:20px;background:linear-gradient(145deg,#fffef4,#edf4df 55%,#dfeacb);box-shadow:inset 0 2px 0 #fff,0 5px 0 #31542b08;text-align:start;color:#315d3e}
.invitation-timer-icon{grid-column:1;grid-row:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:conic-gradient(#547d46 var(--invite-progress,100%),#d7e2c9 0);position:relative;isolation:isolate}
.invitation-timer-icon::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#f7faed;z-index:-1}
.invitation-timer-icon svg{width:23px;height:23px}
.invitation-timer-content{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:1px;min-width:0;text-align:center}
.invitation-timer-label{font-size:11px;font-weight:600}
.invitation-timer time{display:block;width:max-content;font-size:28px;font-weight:800;line-height:1.2;letter-spacing:1px;font-variant-numeric:tabular-nums}
.invitation-timer-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.invitation-timer progress{grid-column:1/-1;grid-row:2;width:100%;height:4px;appearance:none;border:0;border-radius:10px;overflow:hidden;background:#d4dfc5;accent-color:#547d46}
.invitation-timer progress::-webkit-progress-bar{background:#d4dfc5;border-radius:10px}.invitation-timer progress::-webkit-progress-value{background:#547d46;border-radius:10px}.invitation-timer progress::-moz-progress-bar{background:#547d46;border-radius:10px}
.invitation-timer[data-urgent=true]{color:#8e572c;border-color:#ddc7a0;background:linear-gradient(135deg,#fff8e7,#f3e5c7)}
.invitation-timer[data-urgent=true] .invitation-timer-icon{background:conic-gradient(#b5833d var(--invite-progress,100%),#e5d7b8 0)}
.invitation-timer[data-urgent=true] progress{accent-color:#b5833d}.invitation-timer[data-urgent=true] progress::-webkit-progress-value{background:#b5833d}.invitation-timer[data-urgent=true] progress::-moz-progress-bar{background:#b5833d}
.invitation-timer::after{content:"";grid-column:3;grid-row:1;justify-self:center;width:30px;height:32px;border:2px solid #f9ebbd;border-bottom:5px solid #aa8b4c;border-radius:50%;background:radial-gradient(ellipse at 30% 20%,#fff8d4,#e5cb87 65%,#c3a264);box-shadow:inset 0 0 0 4px #fff1bf66,0 4px 7px #35502b1a;transform:rotate(-12deg)}
@media(max-width:600px){.invitation-card .invitation-timer{grid-template-columns:40px minmax(0,1fr) 32px;gap:7px 8px;margin:16px 0;padding:11px 12px}.invitation-timer-icon{width:40px;height:40px}.invitation-timer time{font-size:28px}.invitation-timer::after{width:26px;height:28px}}

.track-delete{display:grid;place-items:center;flex-shrink:0;width:44px;height:46px;min-height:44px;padding:9px;border:1px solid #d8b9aa;border-bottom:4px solid #bb8974;border-radius:13px;background:linear-gradient(145deg,#fff8f1,#f3e2d5);color:#9a4b36}
.track-delete svg{width:20px;height:20px}.track-delete:hover:not(:disabled){background:#f7dcd0}.track-delete:active:not(:disabled){transform:translateY(2px)}.track-delete:disabled{opacity:.5}
.music-library-status{font-size:12px;line-height:1.6;margin:0;color:#775937}.music-library-status[hidden]{display:none}.music-library-limits{font-size:11px;line-height:1.6;color:#718263;text-align:center}.music-upload[aria-busy=true]{opacity:.65;cursor:progress}
@media(max-width:600px){.playlist-row:has(.track-delete){gap:8px;padding:10px}.playlist-row:has(.track-delete) .track-cover{width:32px;height:36px}.playlist-row:has(.track-delete) .playlist-title{font-size:13px}.playlist-row:has(.track-delete) .track-play{width:42px}.track-delete{width:44px;height:46px}}

#music-remove[hidden]{display:none!important}

.music-delete-name{display:block;margin:18px 0 24px;padding:14px 16px;border:1px solid #d3dfc7;border-bottom:3px solid #bdcfae;border-radius:15px;background:linear-gradient(145deg,#fffdf4,#edf4e3);color:#31573a;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
#music-delete-dialog .dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#music-delete-dialog .dialog-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;min-width:0}
#music-delete-dialog .danger-button{border:1px solid #a83f35;border-bottom:5px solid #87362e;border-radius:14px;background:linear-gradient(145deg,#db6556,#b84338);color:#fff;font-weight:700}
#music-delete-dialog .danger-button svg{width:21px;height:21px}