.game-surface{margin-top:24px}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,420px);aspect-ratio:1;background:#45544c;padding:8px;border-radius:8px;touch-action:none;margin:16px 0}.tile{display:flex;align-items:center;justify-content:center;background:#e3e9e5;color:#263a30;font-size:28px;font-weight:700;border-radius:4px;min-width:0}.tile.filled{background:#b6e0c7}.tile[data-level="3"],.tile[data-level="4"]{background:#f5d77e}.tile[data-level="5"],.tile[data-level="6"]{background:#ed9c9c}.tile[data-level="7"],.tile[data-level="8"],.tile[data-level="9"],.tile[data-level="10"],.tile[data-level="11"]{background:#90c9e7;font-size:24px}.chess-layout{display:grid;grid-template-columns:minmax(0,520px) minmax(220px,1fr);gap:28px}.chess-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;width:100%;border:2px solid #46594e}.chess-square{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;min-width:0;font-size:38px}.chess-square.light{background:#e9ede8}.chess-square.dark{background:#6a907d}.chess-square.selected{box-shadow:inset 0 0 0 4px #e9b536}.chess-square.legal{box-shadow:inset 0 0 0 3px #c4585e}.chess-square small{position:absolute;bottom:1px;left:2px;font-size:9px;color:#24352b}.white-piece{color:#fff;text-shadow:0 1px 2px #000,1px 0 #000,-1px 0 #000}.black-piece{color:#17231c}.game-moves{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}.game-analysis{white-space:pre-wrap;overflow-wrap:anywhere}.game-surface .button-row{flex-wrap:wrap;gap:8px}.game-surface label{display:flex;align-items:center;gap:8px}@media(max-width:700px){.chess-layout{grid-template-columns:minmax(0,1fr)}.chess-square{font-size:28px}}
.analysis-toggle{display:inline-flex!important;margin-right:12px}.win-rate{display:inline-block;vertical-align:middle;width:min(100%,310px);margin:10px 0}.win-rate-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:5px}.win-rate-label small{font-size:11px;opacity:.75}.win-rate-track{height:16px;background:#26342e;border:1px solid #7a8c80;border-radius:4px;overflow:hidden}.win-rate-white{height:100%;background:#f7faf8;transition:width .3s ease}.win-rate.pending{opacity:.65}.promotion-dialog{padding:8px;border:1px solid #82958b;border-radius:8px;background:#f4f8f5;color:#17231c;max-width:calc(100vw - 24px)}.promotion-dialog::backdrop{background:rgb(0 0 0 / .3)}.promotion-options{display:grid;grid-template-columns:repeat(4,52px);gap:4px}.promotion-options button{height:56px;width:52px;padding:0;font-size:36px;border:1px solid #9aaa9f;border-radius:4px;background:#fff;color:#17231c}.promotion-options button:hover,.promotion-options button:focus-visible{background:#b6e0c7;outline:2px solid #316a4c;outline-offset:0}
.game-surface button:not(.chess-square):not(.promotion-options button){min-height:40px;padding:8px 14px;border:1px solid var(--line,#bac8c0);border-radius:6px;background:var(--surface,#fff);color:var(--ink,#24372d);font-weight:600;cursor:pointer;box-shadow:none}.game-surface button.primary{background:var(--sky,#268fd2);color:#fff;border-color:transparent}.game-surface button.danger{color:#b63743;border-color:#dfa7ad}.game-surface button:not(.chess-square):hover:not(:disabled){border-color:#428263;background:#e2f0e8;color:#1e563c}.game-surface button:focus-visible{outline:2px solid #268fd2;outline-offset:2px}.game-surface button:disabled{opacity:.45;cursor:not-allowed;transform:none}.game-surface #joinRoom{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.game-surface #joinRoom input{width:150px;min-width:0}.chess-color-options{display:flex;gap:0;padding:0;border:0;margin:0;min-width:0}.chess-color-options legend{font-size:12px;margin-bottom:4px}.chess-color-options label{position:relative;display:block!important}.chess-color-options input{position:absolute;opacity:0;width:1px;height:1px}.chess-color-options span{display:flex;align-items:center;justify-content:center;min-height:40px;min-width:66px;padding:6px 10px;border:1px solid #bac8c0;cursor:pointer}.chess-color-options label:first-of-type span{border-radius:6px 0 0 6px}.chess-color-options label:last-of-type span{border-radius:0 6px 6px 0}.chess-color-options input:checked+span{background:#d3eadd;border-color:#428263;color:#204e36}.chess-color-options input:focus-visible+span{outline:2px solid #268fd2;outline-offset:2px}
.chess-square>span{display:flex;width:90%;height:90%;align-items:center;justify-content:center;text-shadow:none}.cute-piece{display:block;width:100%;height:100%;max-height:64px;filter:none}.promotion-options .cute-piece{width:48px;height:52px}.chess-square small{z-index:1}@media(max-width:700px){.chess-square>span{width:100%;height:100%}.cute-piece{max-height:none}.chess-square small{font-size:8px}}
.game-surface .analysis-toggle{white-space:nowrap;width:auto;min-width:110px;gap:8px;flex-wrap:nowrap}.game-surface .analysis-toggle input{width:18px;height:18px;flex:0 0 18px;margin:0}
.chess-square.king-in-check{outline:2px solid rgb(194 87 96 / .55);outline-offset:-3px}.king-in-check .cute-piece{animation:king-check-breathe 2.4s ease-in-out infinite}.king-checkmated .cute-piece{transform:translate(3%,8%) rotate(78deg) scale(.9);transform-origin:50% 65%;animation:king-fall .55s ease-out both}.chess-square.king-checkmated{outline:2px solid rgb(151 70 79 / .6);outline-offset:-3px}@keyframes king-check-breathe{0%,100%{filter:drop-shadow(0 0 0 rgb(194 87 96 / 0))}50%{filter:drop-shadow(0 0 3px rgb(194 87 96 / .45))}}@keyframes king-fall{from{transform:rotate(0) scale(1)}to{transform:translate(3%,8%) rotate(78deg) scale(.9)}}@media(prefers-reduced-motion:reduce){.king-in-check .cute-piece,.king-checkmated .cute-piece{animation:none}}
.chess-clocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.chess-clocks>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #aebfb3;border-radius:6px;min-width:0}.chess-clocks strong{font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap}.chess-clocks .running{background:#d9ecdf;color:#204e36;border-color:#428263}.chess-clocks .low-time{color:#b33948}.clock-setting{align-self:end;flex-direction:column;align-items:flex-start!important;font-size:12px}.clock-setting select{min-height:40px;max-width:100%;font-size:14px}
.ddz-table{background:#dceefa;border:1px solid #a9cef1;border-radius:8px;padding:18px;color:#263d64}.ddz-opponents{display:flex;justify-content:space-between;gap:12px}.ddz-player{display:flex;flex-direction:column;gap:8px;align-items:center;padding:8px;border:2px solid transparent;border-radius:6px;font-size:13px}.ddz-player.turn{border-color:#458bd7;background:#eff8ff}.ddz-back{display:inline-block;width:42px;height:62px;border:2px solid white;border-radius:5px;background-image:url('/assets/fox-cards-reference.png');background-size:500% 200%;background-position:100% 100%}.ddz-center{text-align:center;min-height:230px}.ddz-bottom{display:flex;gap:5px;align-items:center;justify-content:center;margin:10px 0}.ddz-trick{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;min-height:110px;margin:12px 0}.ddz-card{display:inline-block;position:relative;width:72px!important;height:108px!important;min-height:0!important;flex:0 0 72px;padding:0!important;border:1px solid #87b9ed!important;border-radius:6px!important;background:#fff!important;color:#142c61!important;overflow:hidden;vertical-align:middle;box-shadow:0 2px 4px #4973a522!important}.ddz-card.red{color:#d63255!important}.ddz-art{position:absolute;inset:4px;background-image:url('/assets/fox-cards-reference.png');background-size:500% 200%;background-position:calc(var(--col)*25%) calc(var(--row)*100%);clip-path:inset(15% 12% 15% 12%)}.ddz-corner{position:absolute;top:1px;left:2px;display:flex;flex-direction:column;background:#fff;font-size:20px;font-weight:bold;line-height:1.05;padding:2px;min-width:18px}.ddz-corner small{font-size:15px}.ddz-value{position:absolute;bottom:1px;right:2px;background:white;font-size:13px;padding:2px}.ddz-hand{display:flex;overflow-x:auto;padding:22px 3px 10px;min-height:145px;isolation:isolate}.ddz-hand .ddz-card{margin-right:-39px;cursor:pointer}.ddz-hand .ddz-card:last-child{margin-right:0}.ddz-hand .ddz-card.picked{transform:translateY(-16px);border:2px solid #286ac1!important}.ddz-hand .ddz-card:disabled{opacity:1;cursor:default}.ddz-log{font-size:12px;min-height:32px;overflow-wrap:anywhere}.ddz-actions{justify-content:center}.ddz-self>strong{font-size:14px}@media(max-width:600px){.ddz-table{padding:8px}.ddz-player{font-size:11px;padding:4px}.ddz-center{min-height:215px}.ddz-hand .ddz-card{margin-right:-44px}.ddz-trick .ddz-card{width:48px!important;height:74px!important;flex-basis:48px}.ddz-bottom .ddz-card{width:38px!important;height:56px!important;flex-basis:38px}.ddz-bottom .ddz-corner{font-size:12px}.ddz-bottom .ddz-corner small{font-size:10px}.ddz-bottom .ddz-value{font-size:9px}}