:root{color-scheme:dark;font:12px 'Segoe UI',Arial,sans-serif;color:#ceccc3;background:#111;--panel:#1a1a1a;--border:#383838;--control:#2d2e2f}*,*::before,*::after{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px 12px}button,input{font:inherit;color:inherit}button{border:1px solid #48494a;border-radius:6px;background:var(--control);min-height:32px;cursor:pointer}button:hover:enabled{background:#3b3c3d;border-color:#626465}button:disabled{cursor:default;color:#777;opacity:.6}button:focus-visible,input:focus-visible{outline:2px solid #bfbcb0;outline-offset:2px}input{width:100%;min-width:0;border:1px solid transparent;border-radius:6px;background:#2b2b2b;padding:6px 8px;min-height:30px}input:focus{border-color:#727272;outline:none}h1,h2,p{margin:0}h1{font-size:11px;font-weight:600;flex:1}h2{font-size:12px}#panel{width:400px;max-width:100%;background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:0 8px 8px;box-shadow:none}header{height:37px;display:flex;align-items:center;border-bottom:1px solid #343434;margin-bottom:8px;gap:4px}.icon{border:0;background:transparent;font-size:19px;min-height:26px;width:26px;padding:0}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tiles button{aspect-ratio:1;min-width:0;padding:4px}.tiles img{width:100%;height:100%;object-fit:contain}.tiles button:disabled{opacity:.35}#lobby{height:382px;display:flex;flex-direction:column;gap:8px}.lobby-content{min-height:0;min-width:0;flex:1;display:flex;flex-direction:column;gap:8px;overflow-x:hidden;overflow-y:auto}#expand,form>button{width:100%;flex-shrink:0}#create{min-width:0;padding:8px;border:1px solid var(--border);border-radius:5px;background:#202020;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.slice{min-width:0;overflow:hidden;position:relative;isolation:isolate;display:flex;background:#2d2e2f;border:1px solid #48494a;border-radius:6px;padding:1px}.slice button{position:relative;z-index:1;flex:1;min-width:0;border:1px solid transparent;background:transparent;font-weight:700;min-height:28px}.slice::before{content:"";position:absolute;z-index:0;top:1px;bottom:1px;left:1px;width:calc((100% - 2px)/2);background:#494a48;border:1px solid #777973;border-radius:5px;transition:transform 180ms ease}.slice.second::before{transform:translateX(100%)}.slice button:hover:enabled{background:transparent;border-color:transparent}.slice button:focus-visible{outline-offset:-3px}.name-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;min-width:0;gap:8px}.visitors{width:72px;flex-shrink:0}.visitors img,.join img{width:16px;height:16px;filter:brightness(0) saturate(100%) invert(86%) sepia(9%) saturate(125%)}.visitors button{padding:0}.find-row{display:flex;gap:8px;flex-shrink:0;min-width:0}.find-row input{flex:1}#refresh{width:78px;min-height:30px;flex-shrink:0}#rooms{flex:1;min-height:44px;overflow:auto;border:1px solid var(--border);border-radius:5px;background:#202020;padding:3px}.room-tag{height:88px;margin-bottom:3px;display:flex;border:1px solid var(--border);border-radius:5px;background:#232323;overflow:hidden}.details{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:8px 12px}.room-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{font-weight:700;color:#76c99a}.status.private{color:#ed7878}.counts{font-size:11px}.room-controls{width:36px;flex-shrink:0;display:flex;flex-direction:column}.room-controls .join+ .join{border-top:1px solid var(--border)}.join{width:36px;flex:1;min-height:0;border:0;border-left:1px solid var(--border);border-radius:0;flex-shrink:0}.empty{padding:16px;color:#999}.back{width:100%;min-height:24px;height:24px;font-size:10px;flex-shrink:0}.credit{margin-top:20px;font-size:10px;letter-spacing:2px;color:#696966}#panel.playing{width:718px}#board-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#1a1a1a}canvas{display:block;width:100%;height:100%;touch-action:none}#actions{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:18px}#actions button{pointer-events:auto}#actions .pixel{border:0;background:transparent;padding:6px;color:#ceccc3;max-width:100%}#actions .pixel:disabled{opacity:1}#action{min-height:45px}#result{min-height:0}#rematch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,360px);gap:12px}#actions svg{display:block;max-width:100%;height:auto;image-rendering:pixelated}#notice{color:#ed7878;padding:8px 0 0;line-height:1.5}#key-error{color:#ed7878;min-height:14px}.hint{font-size:10px;color:#777;padding-top:8px}dialog{width:320px;max-width:calc(100% - 32px);padding:12px;background:var(--panel);color:#ceccc3;border:1px solid var(--border);border-radius:7px}dialog::backdrop{background:#0009}dialog form{display:flex;flex-direction:column;gap:10px}[hidden]{display:none!important}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#777;border-radius:4px}@media(max-width:600px){body{padding:12px 8px;justify-content:flex-start}#panel.playing{width:100%}.credit{margin-top:14px}#actions{gap:12px}.hint{font-size:9px}}
#panel.licensing{width:500px;font-size:10px}#panel.licensing header{height:35px}#panel.licensing h1{font-size:10px}#license-form>label{display:block;height:12px;margin-bottom:4px;color:#a6a6a6}.license-input-row{display:flex;align-items:center;gap:8px}.license-input-row input{height:22px;min-height:22px;padding:2px 4px;border:1px solid #383838;border-radius:4px;background:#101010;font-size:10px;flex:1}.license-input-row button{height:24px;min-height:24px;font-size:10px;border-radius:4px;padding:0 4px}#license-submit{width:112px;flex-shrink:0}#license-signout{width:80px;flex-shrink:0}#license-submit.active,#license-submit.active:disabled{color:#6de069;border-color:#6de069;background:#2f3b2e;opacity:1}#license-submit.denied,#license-submit.denied:disabled{color:#dd5c5c;border-color:#dd5c5c;background:#3b2d2d;opacity:1}.license-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;height:48px;gap:16px}.license-footer img{width:146px;height:48px;object-fit:contain}.license-footer dl{margin:0;display:grid;grid-template-columns:84px 146px;column-gap:4px;row-gap:4px}.license-footer dt,.license-footer dd{margin:0;height:18px;display:flex;align-items:center}.license-footer dd{justify-content:flex-end;font-size:9px}#license-detail,#license-error{margin-top:8px;line-height:1.5;overflow-wrap:anywhere}#license-detail{color:#a6a6a6}#license-error{color:#dd5c5c}#license-conflict{display:flex;flex-direction:column;gap:8px;line-height:1.5;margin-top:8px}@media(max-width:480px){.license-input-row{flex-wrap:wrap}.license-input-row input{flex-basis:100%}.license-footer{height:auto;align-items:flex-start;flex-wrap:wrap}.license-footer dl{flex:1;grid-template-columns:auto auto}.license-footer img{width:120px;height:40px}}

#board-wrap.obscured canvas{filter:blur(1.5px) brightness(.82)}

h1{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#match-controls{position:absolute;top:8px;left:8px;right:8px;z-index:2;pointer-events:none}#match-controls>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}#match-controls button{pointer-events:auto;justify-self:start}#match-controls #offer-draw{justify-self:center}#match-controls button,#draw-response button{min-height:24px;padding:0 4px;background:transparent;border:0;color:#ceccc3}#match-controls button:hover:enabled,#match-controls button:focus-visible,#draw-response button:hover:enabled,#draw-response button:focus-visible{color:#ebeae4}#match-controls button:disabled,#draw-response button:disabled{color:#777;opacity:1}#match-controls svg,#draw-response svg{display:block;height:14px;width:auto;image-rendering:pixelated}#actions button:disabled{pointer-events:none}

#draw-response{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:max-content;z-index:3;max-width:calc(100% - 16px);padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#232323;border:1px solid var(--border);border-radius:6px}#draw-response>div{display:flex;gap:12px}

#rematch svg{height:21px;width:auto;max-width:none;margin:auto}#draw-response #accept-draw{color:#76c99a}#draw-response #decline-draw{color:#ed7878}#draw-response #accept-draw:hover:enabled{color:#a3e7bf}#draw-response #decline-draw:hover:enabled{color:#ffaaaa}#draw-response button:disabled{opacity:.5}@media(max-width:400px){#rematch svg{height:14px}}

#chat{background:transparent;border:0;position:absolute;bottom:8px;right:8px;z-index:4;width:32px;min-height:32px;height:32px;padding:6px;border-radius:5px}#chat:hover:enabled{background:transparent;border:0}#chat img{width:18px;height:18px;filter:invert(.8)}#sticker-picker{display:flex;flex-direction:column;max-height:calc(100% - 54px);position:absolute;bottom:46px;right:8px;z-index:5;width:292px;max-width:calc(100% - 16px);padding:6px;background:var(--panel);border:1px solid var(--border);border-radius:6px}.sticker-tabs{flex-shrink:0;display:flex;align-items:center;gap:4px;margin-bottom:4px;overflow-x:auto}.sticker-tabs button{width:36px;min-height:30px;height:30px;padding:2px 6px;border:0;border-bottom:2px solid transparent;border-radius:4px 4px 0 0;background:transparent}.sticker-tabs button[aria-selected=true]{border-bottom-color:#ceccc3;background:var(--control)}.sticker-tabs img{display:block;width:24px;height:24px;object-fit:contain}#sticker-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;max-height:278px;overflow-y:auto}#sticker-grid button{position:relative;overflow:hidden;padding:0;min-height:0;aspect-ratio:1;border:0;background:transparent}#sticker-grid img{position:absolute;left:-12.5%;top:-12.5%;display:block;width:125%;height:125%;object-fit:contain}#sticker-toasts{position:absolute;inset:0;z-index:4;pointer-events:none}.sticker-toast{position:absolute;background:transparent;border:0}.sticker-art{position:relative;width:90%;height:90%;overflow:hidden;margin:5% auto}.sticker-toast img{position:absolute;left:-12.5%;top:-12.5%;display:block;width:125%;height:125%;object-fit:contain}.sticker-toast.incoming{transform-origin:top left}.sticker-pop{transform-origin:top right;animation:sticker-pop 380ms cubic-bezier(.2,.85,.3,1.25)}@keyframes sticker-pop{0%{opacity:0;transform:translateY(-12px) scale(.45)}65%{opacity:1;transform:translateY(3px) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.sticker-pop{animation:none}}

#sticker-picker,#sticker-toasts,#chat{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

#music img{width:16px;height:16px;filter:brightness(0) saturate(100%) invert(86%) sepia(9%) saturate(125%);vertical-align:middle}

#panel.xiangqi{--xiangqi-ink:#302016}
#panel.xiangqi #match-controls{top:0;height:70px}
#panel.xiangqi #match-controls>div{height:100%}
#panel.xiangqi #match-controls button{position:relative;align-self:start;width:min(140px,100%);height:auto;aspect-ratio:2;min-height:0;padding:0;border:0;border-radius:0;font-family:"Polystuff Ma Shan Zheng";font-size:21px;background:transparent;color:var(--xiangqi-ink);opacity:1;isolation:isolate}
#panel.xiangqi #match-controls button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/games/xiangqi/blank-frame-red.webp?v=527df9d36808054f') center/100% 100% no-repeat}
#panel.xiangqi.black-turn #match-controls button::before{background-image:url('/games/xiangqi/blank-frame-black.webp?v=d40f3f7d04298b73');transform:translate(.9019166%,-1.1273957%)}
#panel.xiangqi #match-controls #offer-draw{grid-column:3;justify-self:end}
:is(button.icon,#chat):is(:hover,:focus,:focus-visible,:active){background:transparent;border:0;outline:0;box-shadow:none}
.join:is(:hover,:focus,:focus-visible,:active){background:var(--control);border-color:var(--border);outline:0;box-shadow:none}
.visitors button:is(:hover,:focus,:focus-visible,:active),.sticker-tabs button:is(:hover,:focus,:focus-visible,:active),#sticker-grid button:is(:hover,:focus,:focus-visible,:active){background:transparent;border-color:transparent;outline:0;box-shadow:none}
.sticker-tabs button[aria-selected=true]:is(:hover,:focus,:focus-visible,:active){background:var(--control);border-bottom-color:#ceccc3}
#close:hover:enabled,#close:focus-visible{color:#ed7878}

#ready-hint{margin:10px 0 0;color:#ceccc3;pointer-events:none}
#panel.xiangqi #board-wrap{aspect-ratio:auto}#panel.xiangqi #board-wrap::before{content:"";display:block;padding-top:calc(100% + 72px)}#panel.xiangqi #board-wrap canvas{position:absolute;inset:0;filter:none}
#actions.brush{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);gap:0;width:min(72%,240px);height:auto;aspect-ratio:1;justify-content:center;background:url('/games/xiangqi/black-paint-circle.webp?v=42716b0c3ef2b6ff') center/100% 100% no-repeat}
#actions.brush.brush-waiting{width:min(72%,430px);aspect-ratio:3;background-image:url('/games/xiangqi/black-paint-long.webp?v=4d86d1a8457b2cbd')}
#actions.brush #action{font-family:"Polystuff Ma Shan Zheng";font-size:clamp(36px,9vw,67px);color:#fff;opacity:1;white-space:pre;width:100%;overflow:visible}
#actions.brush-waiting #action{font-size:clamp(26px,6vw,45px)}
.brush-impact{display:inline-block;animation:brush-impact 330ms ease-out both}
@keyframes brush-impact{0%{transform:translateY(-55px) scale(1.8);opacity:0}65%{transform:translateY(2px) scale(.9);opacity:1}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.brush-impact{animation:none}}
#cookie-choice{position:fixed;right:16px;bottom:16px;z-index:50;width:min(350px,calc(100vw - 32px));padding:16px;background:#202020;border:1px solid #444;border-radius:8px;box-shadow:0 8px 32px #0008;font-size:12px;line-height:1.5}
#cookie-choice h2{font-size:12px;margin:0 0 8px}#cookie-choice p{margin:0 0 12px}#cookie-choice>div{display:flex;gap:8px}#cookie-choice button{flex:1;font-size:10px}


@font-face{font-family:"Polystuff Ma Shan Zheng";src:url("/games/xiangqi/fonts/ma-shan-zheng.ttf?v=9361d9ac2f2af009") format("truetype");font-weight:400;font-style:normal;font-display:block}

html,body,body *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}
#panel.xiangqi #actions.brush{width:min(90%,280px);gap:8px}
#panel.xiangqi #actions.brush.brush-waiting{width:min(90%,430px)}
#panel.xiangqi #actions.brush #action{font-size:clamp(30px,6vw,40px);padding:0}
#panel.xiangqi #actions.brush #action .brush-impact{font-size:clamp(40px,9vw,67px)}
#panel.xiangqi #actions.brush-waiting #action{font-size:clamp(26px,6vw,45px)}
#panel.xiangqi #actions.brush-plain{width:min(90%,430px);aspect-ratio:3;background-image:url('/games/xiangqi/black-paint-long.webp?v=4d86d1a8457b2cbd');animation:ink-impact 550ms ease-out both}
#panel.xiangqi #actions.brush-rematch:not(.brush-waiting){width:min(90%,320px);animation:ink-impact 550ms ease-out both}
#panel.xiangqi #ready-hint{margin:0;font-family:"Polystuff Ma Shan Zheng";font-size:22px;color:#fff}
#panel.xiangqi #rematch{width:min(90%,260px);gap:8px}
#panel.xiangqi #rematch button{font-family:"Polystuff Ma Shan Zheng";font-size:24px;color:#fff}
#panel.xiangqi #actions.brush-result{width:min(90%,560px);aspect-ratio:3/2;background:none}
#panel.xiangqi #actions.result-win{background-image:url('/games/xiangqi/win.webp?v=08045babf0596e2d');background-size:100% 100%}
#panel.xiangqi #actions.result-lose{background-image:url('/games/xiangqi/lose.webp?v=6d1ea3a0d81c37a3');background-size:100% 100%}
#panel.xiangqi #result{font-family:"Polystuff Ma Shan Zheng";font-size:clamp(30px,7vw,46px);color:#fff;text-shadow:0 2px 6px #000}
#panel.xiangqi #actions.result-win #result,#panel.xiangqi #actions.result-lose #result{font-size:clamp(40px,9vw,64px)}
#panel.xiangqi #draw-response{width:min(480px,calc(100% - 24px));aspect-ratio:3;min-height:0;padding:0;justify-content:center;background:transparent url('/games/xiangqi/ask-for-draw.webp?v=1e421392610712c3') center/100% 100% no-repeat;border:0;border-radius:0;gap:2px;box-shadow:none}
#panel.xiangqi #draw-caption{font-family:"Polystuff Ma Shan Zheng";font-size:clamp(15px,3vw,22px);color:#302016;text-align:center;white-space:normal}
#panel.xiangqi #draw-response button{font-family:"Polystuff Ma Shan Zheng";font-size:22px;min-height:24px}
#panel.xiangqi #draw-response #accept-draw{color:#267245}#panel.xiangqi #draw-response #decline-draw{color:#a32e2e}
#panel.xiangqi #draw-response>div,#panel.xiangqi #draw-caption{width:74%;margin:0 auto}#panel.xiangqi #draw-response>div{justify-content:space-evenly}
#panel.xiangqi #rematch #stop{grid-column:2}

#panel.xiangqi .waiting-word{display:inline-block;position:relative;padding-right:1em}
#panel.xiangqi .waiting-dots{position:absolute;right:0;top:0;display:flex;width:1em}
#panel.xiangqi .waiting-dots span{display:block;width:33.333%;text-align:center}

#panel.xiangqi #actions.result-draw{background-image:url('/games/xiangqi/draw.webp?v=13564b35878dceee');background-size:100% 100%}

#panel.xiangqi #actions.brush-waiting{animation:ink-reveal 1000ms ease-out both}
#panel.xiangqi #actions.result-win{animation:ink-win 700ms linear both;animation-play-state:paused}
#panel.xiangqi #actions.result-lose{animation:ink-fall 550ms ease-out both}
#panel.xiangqi #actions.result-draw{animation:ink-settle 550ms ease-out both}
@keyframes ink-reveal{from{clip-path:polygon(0% 0%,-13.00% 0.000%,-11.18% 3.125%,-9.36% 6.250%,-7.55% 9.375%,-5.73% 12.500%,-3.91% 15.625%,-12.09% 18.750%,-10.27% 21.875%,-8.45% 25.000%,-6.64% 28.125%,-4.82% 31.250%,-13.00% 34.375%,-11.18% 37.500%,-9.36% 40.625%,-7.55% 43.750%,-5.73% 46.875%,-3.91% 50.000%,-12.09% 53.125%,-10.27% 56.250%,-8.45% 59.375%,-6.64% 62.500%,-4.82% 65.625%,-13.00% 68.750%,-11.18% 71.875%,-9.36% 75.000%,-7.55% 78.125%,-5.73% 81.250%,-3.91% 84.375%,-12.09% 87.500%,-10.27% 90.625%,-8.45% 93.750%,-6.64% 96.875%,-4.82% 100.000%,0% 100%)}to{clip-path:polygon(0% 0%,103.00% 0.000%,104.82% 3.125%,106.64% 6.250%,108.45% 9.375%,110.27% 12.500%,112.09% 15.625%,103.91% 18.750%,105.73% 21.875%,107.55% 25.000%,109.36% 28.125%,111.18% 31.250%,103.00% 34.375%,104.82% 37.500%,106.64% 40.625%,108.45% 43.750%,110.27% 46.875%,112.09% 50.000%,103.91% 53.125%,105.73% 56.250%,107.55% 59.375%,109.36% 62.500%,111.18% 65.625%,103.00% 68.750%,104.82% 71.875%,106.64% 75.000%,108.45% 78.125%,110.27% 81.250%,112.09% 84.375%,103.91% 87.500%,105.73% 90.625%,107.55% 93.750%,109.36% 96.875%,111.18% 100.000%,0% 100%)}}
@keyframes ink-impact{0%{transform:translate(-50%,calc(-50% - 45px)) scale(1.65);opacity:0}65%{transform:translate(-50%,-50%) scale(.94);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes ink-win{0%{transform:translate(-50%,calc(-50% - 90px)) scale(2.6);opacity:0}12%{opacity:1}50%{transform:translate(-50%,calc(-50% + 5px)) scale(.86)}64%{transform:translate(-50%,calc(-50% - 4px)) scale(1.12)}80%{transform:translate(-50%,calc(-50% + 1px)) scale(.97)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes ink-fall{0%{transform:translate(-50%,calc(-50% - 28px)) scale(.88);opacity:0}65%{transform:translate(-50%,calc(-50% + 3px)) scale(1.02);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes ink-settle{0%{transform:translate(-50%,-50%) scale(.76);opacity:0}70%{transform:translate(-50%,-50%) scale(1.03);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){#panel.xiangqi #actions.brush{animation:none}}

#sound-control{position:relative;display:flex;align-items:center;flex-shrink:0}
#volume-popover{position:absolute;right:100%;top:50%;transform:translateY(-50%);width:164px;padding:6px 7px;background:transparent;border:0;display:flex;align-items:center;gap:6px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 120ms ease,visibility 120ms;z-index:5}
#sound-control.volume-open #volume-popover{visibility:visible;opacity:1;pointer-events:auto}
#volume-value{width:32px;flex-shrink:0;text-align:right;font-size:10px;color:#ceccc3;font-variant-numeric:tabular-nums}
#volume{appearance:none;-webkit-appearance:none;width:112px;min-width:0;height:18px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;accent-color:#ceccc3}
#volume::-webkit-slider-runnable-track{height:3px;background:#666;border-radius:2px}
#volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;margin-top:-2px;border:0;border-radius:50%;background:#ceccc3}
#volume::-moz-range-track{height:3px;background:#666;border-radius:2px}#volume::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#ceccc3}

@font-face{font-family:"Polystuff Vidaloka";src:url('/games/chess/fonts/Vidaloka-Regular.ttf?v=197c6b38e07665d7') format('truetype');font-weight:400;font-style:normal;font-display:block}
#panel.chess #match-controls button{font-family:"Polystuff Vidaloka";font-size:17px;aspect-ratio:1920/819}
#panel.chess #match-controls button::before,#panel.chess.black-turn #match-controls button::before{background-image:url('/games/chess/blank-frame.webp?v=40c1c1ac0cf08484');transform:none}
#panel.chess #actions.brush{background-image:url('/games/chess/mark-start.webp?v=1fd5a1734923df3f')}
#panel.chess #actions.brush-waiting,#panel.chess #actions.brush-plain{background-image:url('/games/chess/waiting.webp?v=2a20b7702b0d6e72')}
#panel.chess #actions.brush #action,#panel.chess #ready-hint,#panel.chess #rematch button,#panel.chess #draw-caption,#panel.chess #draw-response button,#panel.chess #result{font-family:"Polystuff Vidaloka"}
#panel.chess #actions.brush #action,#panel.chess #ready-hint,#panel.chess #rematch button{color:#fff3d4}
#panel.chess #actions.brush-waiting #action,#panel.chess #actions.brush-plain #action{color:#302016;font-size:clamp(24px,5vw,36px)}
#panel.chess #actions.result-win{background-image:url('/games/chess/win.webp?v=14821f51cd7ca4f5')}
#panel.chess #actions.result-lose{background-image:url('/games/chess/lose.webp?v=dfbebc03e2033b2d');animation-play-state:paused}
#panel.chess #actions.result-draw{background-image:url('/games/chess/draw.webp?v=13eeb0569803a522');animation-play-state:paused}
#panel.chess #actions.brush-result #result{position:absolute;top:calc(100% - 22px);left:0;width:100%;height:55px;margin:0;line-height:55px;text-align:center;font-size:clamp(28px,6vw,38px);color:#f8e5bb}
#panel.chess #draw-response{background-image:url('/games/chess/ask-for-draw.webp?v=7298ba7a9fc82741')}
#chess-choice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;width:min(560px,calc(100% - 24px));aspect-ratio:3;padding:0;border:0;background:transparent url('/games/chess/ask-for-draw.webp?v=7298ba7a9fc82741') center/100% 100% no-repeat;color:#302016;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px;box-shadow:none}
#chess-choice-title,#chess-choice-options,#chess-choice-cancel{position:relative;left:23%;width:63%;margin:0}
#chess-choice-title{font:clamp(16px,4vw,24px) "Polystuff Vidaloka";margin-bottom:4px;line-height:1.1}
#chess-choice-options{display:flex;gap:6px;flex-wrap:nowrap}
#chess-choice button{flex:1;background:transparent;color:#302016;border:0;padding:0;min-height:20px;font:clamp(11px,2.9vw,18px) "Polystuff Vidaloka"}
#chess-choice button:hover{color:#a32e2e}
#chess-choice #chess-choice-cancel{flex:0;font-size:clamp(11px,2.5vw,14px);color:#6c5540}

#panel.chess #board-wrap.obscured canvas{filter:blur(1.5px) brightness(.90)}
#panel.chess #actions.brush:not(.brush-result):not(.brush-waiting):not(.brush-plain){width:min(90%,320px);aspect-ratio:1230/1278}
#panel.chess #actions.brush #action,#panel.chess #ready-hint,#panel.chess #rematch button{color:#302016}

@font-face{font-family:"Polystuff Caveat";src:url('/games/numberhunt/fonts/Caveat-VariableFont_wght.ttf?v=2849e2b28ab6c60e') format('truetype');font-weight:400 700;font-display:block}
#panel.numberhunt #hunt-score{margin:0;color:#ceccc3}
#panel.numberhunt #actions{gap:12px}
/* Center the eye icons inside the VISITORS switch and room JOIN buttons instead of on the text baseline. */
.visitors button,.join{display:flex;align-items:center;justify-content:center}
.visitors img,.join img{display:block;flex:none}

/* Phones: larger touch targets during matches and a taller room browser. */
@media(pointer:coarse){#match-controls button,#draw-response button{min-height:36px;padding:0 10px}#chat{width:40px;height:40px;min-height:40px;padding:10px 11px}button,input{touch-action:manipulation}}
@media(max-width:600px){#lobby{height:calc(100dvh - 90px);min-height:382px;max-height:640px}#panel.playing{padding:0 6px 6px}}
/* Phones: the Tic Tac Toe board fills the screen like the lobby. */
@media(max-width:600px){#panel.playing.tictactoe{height:calc(100dvh - 24px);display:flex;flex-direction:column}#panel.tictactoe #room{flex:1;min-height:0;display:flex;flex-direction:column}#panel.tictactoe #board-wrap{flex:1;min-height:0;aspect-ratio:auto;border-radius:5px}body:has(#panel.playing.tictactoe) .credit{display:none}}
/* Phones held sideways: the board becomes a wide rectangle that fills the screen. */
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){body{padding:4px 8px;justify-content:flex-start}#panel.playing.tictactoe{width:100%;height:calc(100dvh - 8px);display:flex;flex-direction:column}#panel.tictactoe #room{flex:1;min-height:0;display:flex;flex-direction:column}#panel.tictactoe #board-wrap{flex:1;min-height:0;aspect-ratio:auto;border-radius:5px}#panel.tictactoe .hint{display:none}body:has(#panel.playing.tictactoe) .credit{display:none}#lobby{height:calc(100dvh - 60px);min-height:0}}
/* PvE rooms: NPC settings replace the sticker chat in the bottom-right corner. */
#npc-settings{background:transparent;border:0;position:absolute;bottom:8px;right:8px;z-index:4;width:32px;min-height:32px;height:32px;padding:7px;border-radius:5px}#npc-settings img{width:18px;height:18px;filter:invert(.8)}#npc-settings:is(:hover,:focus,:focus-visible,:active){background:transparent;border:0;outline:0;box-shadow:none}#npc-settings:hover img,#npc-settings[aria-expanded=true] img{filter:invert(1)}
#npc-panel{position:absolute;bottom:46px;right:8px;z-index:5;width:180px;padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:6px;font-family:'Segoe UI',Arial,sans-serif}#npc-panel p{margin:0;font-size:10px;font-weight:700;letter-spacing:.6px;color:#a6a6a6}#npc-levels{display:flex;flex-direction:column;gap:4px}#npc-levels button{min-height:30px;font-size:11px;font-weight:700;letter-spacing:.4px;color:#ceccc3;background:var(--control);border:1px solid #48494a}#npc-levels button[aria-pressed=true]{color:#fff;border-color:#47b3f5;background:linear-gradient(#183a54,#114669);box-shadow:inset 0 0 9px #59c3ff48}#npc-levels button:disabled{opacity:.6}
@media(pointer:coarse){#npc-settings{width:40px;height:40px;min-height:40px;padding:11px}#npc-panel{bottom:54px}#npc-levels button{min-height:38px}}
/* Chess and Xiangqi: a pulsing CHECK! warning while a king/general is attacked. */
#check-alert{position:absolute;left:50%;bottom:12px;z-index:3;transform:translateX(-50%);margin:0;padding:6px 14px;border:1px solid #ff6b5e;border-radius:6px;background:#3a0f0fe6;color:#ffd9d4;font:700 13px 'Segoe UI',Arial,sans-serif;letter-spacing:1px;white-space:nowrap;pointer-events:none;box-shadow:0 0 14px #ff3b3b88;animation:check-pulse 900ms ease-in-out infinite}@keyframes check-pulse{0%,100%{box-shadow:0 0 6px #ff3b3b55;opacity:.85}50%{box-shadow:0 0 20px #ff3b3bcc;opacity:1}}@media(prefers-reduced-motion:reduce){#check-alert{animation:none}}
/* Hub tiles shrink with the screen (logos never widen the grid). */
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles img{min-width:0}
/* Xiangqi: CHECK! sits on the river, where no pieces stand. */
#panel.xiangqi #check-alert{bottom:auto;top:57%;transform:translate(-50%,-50%)}
/* ROOM NAME spans the row when the VISITORS switch is hidden (PvE). */
.name-row:has(>.visitors[hidden]){grid-template-columns:minmax(0,1fr)}
#panel.chess #check-alert{top:auto;bottom:6px;transform:translateX(-50%)}
/* Bomber's room browser uses the phone height like the other lobbies. */
@media(max-width:600px){#bomber-lobby{height:calc(100dvh - 90px);min-height:382px;max-height:700px}}@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){#bomber-lobby{height:calc(100dvh - 60px);min-height:0}}/* Title bar follows the Polystuff tool header: 35px, 10px bold title, 1px #313131 rule inset 12px from the window edge. */
header{height:35px;border-bottom:0;position:relative}
header::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:1px;background:#313131;pointer-events:none}
h1{font-size:10px;font-weight:700;color:#ceccc3}
/* Volume and NPC settings share the board's top-right corner; Chess and Xiangqi keep it below the DRAW frame.
   Click the speaker to mute, hover it for the 0-100% slider. */
#sound-control{position:absolute;top:8px;right:8px;z-index:6;display:block}
#music{width:32px;min-height:32px;height:32px;padding:7px;border:0;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center}
#music img{width:18px;height:18px;filter:invert(.8);vertical-align:baseline}
#music:is(:hover,:focus,:focus-visible,:active){background:transparent;border:0;outline:0;box-shadow:none}
#music:hover img,#sound-control.volume-open #music img{filter:invert(1)}
#volume-popover{left:auto;right:0;top:calc(100% + 6px);transform:none;width:180px;padding:8px;flex-direction:column;align-items:stretch;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:6px;font-family:'Segoe UI',Arial,sans-serif}
#volume-popover::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
#volume-popover p{margin:0;font-size:10px;font-weight:700;letter-spacing:.6px;color:#a6a6a6}
.volume-row{display:flex;align-items:center;gap:6px}
.volume-row #volume{flex:1;width:auto}
#npc-settings{top:8px;bottom:auto;right:44px}
#npc-panel{top:46px;bottom:auto}
#panel.xiangqi #sound-control,#panel.xiangqi #npc-settings{top:78px}
#panel.xiangqi #npc-panel{top:116px}
@media(pointer:coarse){#music{width:40px;height:40px;min-height:40px;padding:11px}
#npc-settings{right:52px}
#npc-panel{top:54px}
#panel.xiangqi #npc-panel{top:124px}
}