:root{--paper:#f4ead6;--paper-deep:#e8dcc2;--ink:#2f2a25;--cinnabar:#a8322d;--indigo:#24405c;--jade:#2f5d50;--gold:#c8a24a;--line:#2f5d50a6;--shadow:0 2px 14px #2f2a251f;--page-max:1148px;--header-h:104px}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Noto Serif SC,Songti SC,SimSun,serif;line-height:1.6}a{color:var(--indigo)}.app-header{border-bottom:2px solid var(--paper-deep);max-width:var(--page-max);flex-wrap:wrap;align-items:baseline;gap:24px;margin-inline:auto;padding:32px 24px 16px;display:flex}.app-header h1{letter-spacing:2px;margin:0;font-size:26px}.app-header nav{gap:24px;margin-left:auto;display:flex}.app-header nav a{color:var(--jade);text-decoration:none}.app-header nav a[data-active=true]{color:var(--cinnabar);font-weight:700}.champion-tag{color:var(--indigo);border:1px solid var(--paper-deep);border-radius:999px;padding:4px 14px;font-size:14px}.layout{max-width:var(--page-max);grid-template-columns:minmax(360px,640px) minmax(320px,420px);justify-content:center;align-items:start;gap:40px;margin-inline:auto;padding:40px 24px;display:grid}@media (width>=1101px){.layout{min-height:calc(100dvh - var(--header-h));align-content:safe center;padding:24px}.board-stage .board{width:min(100%, calc((100dvh - 268px) * var(--board-ratio)));height:auto;margin-inline:auto}.panel{max-height:calc(100dvh - var(--header-h) - 80px);overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px;overflow-y:auto}}@media (width<=1100px){.layout{grid-template-columns:1fr}}.board{width:100%;height:auto;box-shadow:var(--shadow);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:8px;display:block}.board-stage{--board-ratio:.904;flex-direction:column;gap:16px;display:flex}.board-wrap{min-width:0}.stage-foot{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.board-stage[data-fullscreen=true]{z-index:60;background:var(--paper);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;position:fixed;inset:0}.board-stage[data-fullscreen=true] .board-wrap{flex:1;place-items:center;min-height:0;display:grid}.board-stage[data-fullscreen=true] .board{width:min(100%, calc((100dvh - 108px) * var(--board-ratio)));height:auto;max-height:100%;box-shadow:none}.stage-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.stage-bar-info{flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;display:flex}.board-bg{fill:#f7eeda;stroke:var(--gold);stroke-width:3px}.board-lines line{stroke:var(--line);stroke-width:1.4px}.river-text{fill:var(--jade);letter-spacing:8px;opacity:.55;font-size:30px}.piece{fill:#fbf5e6;stroke-width:2.5px}.piece-r{stroke:var(--cinnabar)}.piece-b{stroke:var(--indigo)}.piece-text{font-size:26px;font-weight:700}.piece-text-r{fill:var(--cinnabar)}.piece-text-b{fill:var(--indigo)}.mark-last{fill:none;stroke:var(--gold);stroke-width:2.5px;animation:1.1s ease-in-out infinite last-pulse}.mark-last-here{stroke:var(--cinnabar);animation-duration:.9s}@keyframes last-pulse{0%,to{opacity:.25;stroke-width:1.6px}50%{opacity:1;stroke-width:4px}}@media (prefers-reduced-motion:reduce){.mark-last,.mark-last-here{opacity:1;stroke-width:3.5px;animation:none}.mark-check{animation:none}}.mark-selected{fill:none;stroke:var(--jade);stroke-width:2.5px}.mark-check{fill:none;stroke:var(--cinnabar);stroke-width:3px;stroke-dasharray:6 4;animation:.85s ease-in-out infinite check-pulse}@keyframes check-pulse{0%,to{opacity:.35}50%{opacity:1}}.check-text{fill:var(--cinnabar);letter-spacing:2px;font-size:22px;font-weight:700}.banner-check{border:2px solid var(--cinnabar);color:var(--cinnabar);letter-spacing:2px;border-radius:999px;align-items:center;gap:8px;padding:6px 16px;font-weight:700;display:inline-flex}.countdown{font-variant-numeric:tabular-nums;color:var(--cinnabar);font-weight:700}.mark-target{fill:#2f5d509e}.mark-target-ring{fill:none;stroke:var(--jade);stroke-width:1.6px;stroke-dasharray:4 4}.board-stage[data-fullscreen=true]{overscroll-behavior:none}.panel{flex-direction:column;gap:32px;display:flex}.card{border:1px solid var(--paper-deep);box-shadow:var(--shadow);background:#fdf8ec;border-radius:10px;padding:24px 28px}.card h2{letter-spacing:1px;color:var(--jade);margin:0 0 20px;font-size:18px}.row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}button{border:1px solid var(--jade);color:var(--jade);cursor:pointer;background:#fffaf0;border-radius:6px;padding:10px 22px;font-family:inherit;font-size:15px}button:hover:not(:disabled){background:var(--jade);color:#fffaf0}button:disabled{opacity:.45;cursor:not-allowed}button.primary{border-color:var(--cinnabar);color:var(--cinnabar);font-weight:700}button.primary:hover:not(:disabled){background:var(--cinnabar);color:#fffaf0}button.danger{border-color:var(--cinnabar);color:var(--cinnabar);font-weight:700}button.danger:hover:not(:disabled){background:var(--cinnabar);color:#fffaf0}input{border:1px solid var(--paper-deep);color:var(--ink);background:#fffdf6;border-radius:6px;min-width:200px;padding:10px 14px;font-family:inherit;font-size:15px}.muted{color:#2f2a259e;font-size:14px}.notice{color:var(--cinnabar);font-size:14px}.clocks{font-variant-numeric:tabular-nums;gap:32px;display:flex}.clock{border:1px solid var(--paper-deep);background:#fffdf6;border-radius:6px;padding:8px 18px}.clock[data-active=true]{border-color:var(--gold);font-weight:700}.moves{grid-template-columns:44px 1fr 1fr;gap:4px 12px;max-height:320px;font-size:15px;display:grid;overflow:auto}.moves .cell{cursor:pointer;border-radius:4px;padding:4px 6px}.moves .cell[data-active=true]{background:var(--paper-deep);font-weight:700}.moves .num{color:#2f2a2580;text-align:right}.badge{border:1px solid;border-radius:999px;margin-left:8px;padding:1px 8px;font-size:12px}.badge-blunder{color:var(--cinnabar);font-weight:700}.badge-inaccuracy{color:#b07d2a}.badge-good,.badge-best{color:var(--jade)}.queue-list{flex-direction:column;gap:10px;font-size:15px;display:flex}.queue-list .invited{color:var(--cinnabar);font-weight:700}.chat{flex-direction:column;gap:20px;max-height:260px;display:flex;overflow:auto}.chat .msg{border-bottom:1px dashed var(--paper-deep);padding-bottom:8px;font-size:14px}.chat .who{color:var(--indigo);margin-right:8px;font-weight:700}.thinking{color:var(--jade);min-height:22px;font-size:14px}.controls{flex-wrap:wrap;align-items:center;gap:16px;display:flex}input[type=range]{flex:1;min-width:0}.graph{width:100%;height:96px}.graph path{fill:none;stroke:var(--indigo);stroke-width:1.6px}.graph .zero{stroke:var(--paper-deep);stroke-width:1px}.graph circle.blunder{fill:var(--cinnabar)}.graph circle.inaccuracy{fill:var(--gold)}table.stats{border-collapse:collapse;width:100%;font-size:14px}table.stats th,table.stats td{border-bottom:1px solid var(--paper-deep);text-align:left;padding:8px 12px}table.stats th{color:var(--jade);font-weight:700}.win-r{color:var(--cinnabar);font-weight:700}.win-b{color:var(--indigo);font-weight:700}select{border:1px solid var(--paper-deep);color:var(--ink);background:#fffdf6;border-radius:6px;padding:9px 12px;font-family:inherit;font-size:15px}.single{max-width:var(--page-max);padding:40px 24px calc(48px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:24px;margin-inline:auto;display:flex}.single .card{width:100%;max-width:860px;margin-inline:auto}.single p{max-width:78ch}.single h3{color:var(--jade);letter-spacing:1px;margin:28px 0 8px;font-size:16px}.single ul{margin:8px 0;padding-left:22px}.game-list{flex-direction:column;gap:10px;margin:0;padding:0;font-size:15px;list-style:none;display:flex}.game-list li{border-bottom:1px dashed var(--paper-deep);padding-bottom:8px}.game-list a{text-decoration:none;display:block}.game-list a:hover strong{color:var(--cinnabar)}.game-list li[data-current=true]{background:var(--paper-deep);border-bottom:none;border-radius:6px;padding:6px 8px}.game-when{float:right;color:#2f2a2580;font-variant-numeric:tabular-nums;margin-left:12px;font-size:13px}.panel-tabs{flex-wrap:wrap;gap:8px;display:none}@media (width<=760px){.app-header{gap:10px;padding:14px 16px 10px}.app-header h1{letter-spacing:1px;font-size:19px}.app-header>.muted{display:none}.app-header nav{gap:16px}.layout{padding:12px 10px calc(24px + env(safe-area-inset-bottom,0px));grid-template-columns:1fr;gap:14px}.card{border-radius:8px;padding:16px 14px}.panel{gap:14px}.panel-tabs{display:flex}.panel [data-tab-hidden=true]{display:none}.row{gap:10px}input{flex:1;min-width:0}button{padding:11px 16px;font-size:15px}.moves{max-height:260px;font-size:16px}.clocks,.stage-foot .clock{font-size:15px}.controls{gap:8px}table.stats{font-size:13px}table.stats th,table.stats td{padding:6px 8px}.single{padding:12px 10px calc(24px + env(safe-area-inset-bottom,0px));gap:14px}.single .card{padding:16px 14px;overflow-x:auto}.app-header nav{gap:12px;font-size:14px}.game-when{float:none;margin-left:0;display:block}.game-list{font-size:15px}}@media (width<=900px) and (orientation:landscape) and (height<=560px){.layout{grid-template-columns:minmax(0,1fr) 280px;gap:10px;padding:6px}.app-header{gap:10px;padding:6px 10px 4px}.app-header h1{font-size:16px}.app-header>.muted{display:none}.champion-tag{padding:2px 10px;font-size:12px}.card{border-radius:8px;padding:8px 10px}.panel{gap:10px}.panel-tabs{display:flex}.panel [data-tab-hidden=true]{display:none}.board-stage .board{width:min(100%, calc((100dvh - 132px) * var(--board-ratio)));height:auto}.board-stage .stage-foot{gap:10px}}
