/* Game palette: eight opaque colors, shared by the UI and supplied piece art. */
@font-face{font-family:RetroPixel;src:url('/AnimeChess/assets/fonts/Minecraft.otf') format('opentype');font-weight:400;font-display:block}
@font-face{font-family:RetroPixel;src:url('/AnimeChess/assets/fonts/Minecraft-Bold.otf') format('opentype');font-weight:700 900;font-display:block}
:root{--ink:#142630;--panel:#233e48;--teal:#3e6970;--sage:#83aaa0;--paper:#e9e1c4;--gold:#f2cc4d;--red:#ce6257;--black:#000000;color:var(--paper);background:var(--ink);font:16px RetroPixel,monospace;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background-color:var(--ink);background-image:repeating-conic-gradient(var(--panel) 0 25%,var(--ink) 0 50%);background-size:8px 8px}button,input,select{font:inherit}button,summary{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border-radius:0}button:disabled{cursor:default}a,button,input,select,summary{outline-offset:6px}:focus-visible{outline:3px solid var(--gold)}[hidden]{display:none!important}
#stage{position:relative;isolation:isolate;max-width:1100px;min-height:100svh;margin:auto;background:var(--ink);border-inline:6px solid var(--panel)}
.topbar{height:58px;padding:14px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--panel);box-shadow:0 4px var(--black);position:relative;z-index:8}
.maker{font-size:19px;font-weight:700;letter-spacing:2px;color:var(--paper);text-shadow:2px 2px var(--black)}
.menu-toggle{min-height:28px;padding:4px 18px;background:var(--teal);color:var(--paper);font-size:13px;font-weight:700;--edge:var(--ink)}
.menu-toggle:hover{background:var(--sage);color:var(--ink)}
.title-screen{position:relative;min-height:calc(100svh - 58px);display:grid;place-items:center;padding:30px 20px 60px;overflow:hidden}
.title-screen:before{content:"";position:absolute;bottom:-100px;left:-15%;width:130%;height:280px;background:repeating-conic-gradient(var(--teal) 0 25%,var(--panel) 0 50%);background-size:64px 64px;transform:perspective(280px) rotateX(55deg);transform-origin:center bottom;border-top:8px solid var(--sage);z-index:-1}
.title-content{width:100%;max-width:500px;text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{font-size:13px;letter-spacing:2px;color:var(--sage);margin:0 0 22px}
h1{font-size:76px;line-height:.95;letter-spacing:5px;font-weight:900;margin:0;color:var(--paper);text-shadow:4px 4px var(--black),8px 8px var(--teal)}h1 span{display:block;color:var(--gold)}
.title-duel{display:flex;align-items:end;justify-content:center;gap:24px;margin:24px 0 26px;height:92px}.title-duel>.sprite{width:96px;height:96px;filter:none}.duel-vs{align-self:center;color:var(--sage);font-size:22px;font-weight:700;text-shadow:2px 2px var(--black)}
.menu-card{background:var(--panel);padding:24px 28px 18px;width:310px;max-width:calc(100vw - 72px)}
.pixel-button{width:100%;min-height:44px;padding:10px 16px;margin:8px 0 20px;background:var(--teal);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;font-weight:700;letter-spacing:1px;--edge:var(--ink);--button-light:var(--sage);--button-dark:var(--ink)}
.pixel-button.primary{background:var(--gold);color:var(--ink);--button-light:var(--paper);--button-dark:var(--teal)}
.pixel-button:hover{background:var(--paper);color:var(--ink)}.pixel-button:active{transform:translateY(3px)}
#playCpu:before{content:"";width:0;height:0;border-block:6px solid transparent;border-left:8px solid var(--ink)}
.coming-soon{font-size:12px;color:var(--sage);margin:4px 0 0;line-height:1.5}.coming-soon small{font-size:10px;display:block;color:var(--teal)}
.title-bottom{position:absolute;bottom:22px;left:0;width:100%;text-align:center;font-size:12px;color:var(--sage);text-shadow:2px 2px var(--ink)}
.game-screen{--board-size:min(calc(100svh - 174px),550px);padding:24px 22px 20px}
.match-shell{width:calc(var(--board-size) + 276px);max-width:100%;margin:auto;display:grid;grid-template-columns:calc(var(--board-size) + 16px) 220px;gap:24px 40px;align-items:start}
.board-col{grid-column:1;grid-row:1 / span 2;min-width:0}
.status-panel{grid-column:2;grid-row:1;align-self:end;min-height:106px;background:var(--panel);padding:18px 16px 16px}
.status-panel strong{font-size:20px;color:var(--gold);display:block;font-weight:700}.status-panel p{font-size:14px;line-height:1.5;margin:10px 0 0}#moveCount{display:block;color:var(--sage);font-size:12px;margin-top:14px}
.board-label{height:24px;display:flex;align-items:center;justify-content:space-between;padding-inline:5px;font-size:14px;font-weight:700;color:var(--sage);letter-spacing:1px}
.board-label span:last-child{color:var(--paper)}
.chess-frame{width:100%;aspect-ratio:1;padding:6px;border:4px solid var(--sage);background:var(--panel);box-shadow:5px 5px var(--black);display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 26px;gap:4px}
.board{position:relative;grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%;border:1px solid var(--ink);touch-action:manipulation}
.board-ranks,.board-files{display:grid;min-width:0;min-height:0;color:var(--paper);font-size:22px;font-weight:900;line-height:1;pointer-events:none;user-select:none}.board-ranks{grid-column:1;grid-row:1;grid-template-rows:repeat(8,minmax(0,1fr));padding-block:1px}.board-files{grid-column:2;grid-row:2;grid-template-columns:repeat(8,minmax(0,1fr));padding-inline:1px;text-transform:uppercase}.board-ranks span,.board-files span{display:grid;place-items:center}
.square{position:relative;padding:0;margin:0;min-width:0;min-height:0;border:0;display:grid;place-items:center}.square.light{background:var(--paper)}.square.dark{background:var(--teal)}.square.last{background:var(--red)}.square.selected{z-index:4}
.square.selected:after{content:"";position:absolute;left:29%;bottom:12%;width:42%;height:12%;border-radius:50%;background:var(--ink);z-index:1;pointer-events:none}
.square.check{background:var(--gold);box-shadow:inset 0 0 0 4px var(--ink)}.square.check:before{content:"!";position:absolute;right:3%;top:0;color:var(--ink);font-size:15px;z-index:4}
.square.target:after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:var(--gold);z-index:1;pointer-events:none}.square.capture:after{content:"";position:absolute;inset:7%;border:3px solid var(--gold);border-radius:50%;z-index:3;pointer-events:none}.square:hover{box-shadow:inset 0 0 0 2px var(--sage)}.square:focus-visible{z-index:5;outline-offset:-4px}
.sprite{display:block;flex:none;object-fit:contain;image-rendering:pixelated;user-select:none;-webkit-user-drag:none}
.square .sprite{height:16px;width:16px;position:absolute;z-index:2;pointer-events:none;transition:transform 140ms ease-out}.square.selected .sprite{transform:translateY(calc(-1 * var(--piece-lift,4px)))}.board>.moving-piece,.board>.move-victim{position:absolute;pointer-events:none}.board>.moving-piece{z-index:12}.board>.move-victim{z-index:3}.square.move-hidden>.sprite{visibility:hidden}
.match-toolbar{position:relative;grid-column:2;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;gap:22px;min-width:0;margin:2px 6px 0}
.board-actions{display:flex;gap:20px;width:100%}.tiny-button,.match-details summary{min-height:38px;padding:8px 16px;font-size:14px;color:var(--paper);background:var(--teal);font-weight:700;--edge:var(--panel);--button-dark:var(--ink)}
.tiny-button:disabled{color:var(--sage);background:var(--panel)}.tiny-button:hover:not(:disabled),.match-details summary:hover{background:var(--sage);color:var(--ink)}.tiny-button:active{transform:translateY(2px)}
.match-details summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;user-select:none}.match-details summary::-webkit-details-marker{display:none}.match-details summary>span:not(.bit-border){color:var(--gold);font-size:20px;line-height:1}.match-details[open] summary>span:not(.bit-border){transform:rotate(45deg)}
.details-content{position:absolute;z-index:7;top:calc(100% + 20px);right:0;width:260px;max-height:310px;overflow:auto;background:var(--panel);padding:20px}
.details-content h3{font-size:12px;color:var(--sage);margin:0 0 8px}.details-content h3:not(:first-child){margin-top:18px}.capture-strip{min-height:28px;display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:14px}.capture-strip .sprite{width:32px;height:32px}.moves{max-height:140px;overflow-y:auto;display:grid;grid-template-columns:1fr;gap:6px;font-size:16px;line-height:1.5}.moves:empty:after{content:"No moves yet.";color:var(--sage);font-size:14px}.move-pair b{color:var(--gold);display:inline-block;min-width:28px}.move-pair span{color:var(--paper);display:inline-block;min-width:66px}.move-pair i{color:var(--sage);font-style:normal}.details-tip{font-size:12px;line-height:1.5;color:var(--sage);border-top:2px solid var(--teal);padding-top:14px;margin:16px 0 0}
.options-shade,.dialog-backdrop{position:fixed;z-index:10;inset:0;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%);background-size:4px 4px}
.options-panel{position:fixed;z-index:11;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 52px));max-height:calc(100svh - 48px);overflow:auto;background:var(--panel);padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.options-title{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--teal);padding-bottom:14px;margin-bottom:0}.options-title h2{font-size:24px;color:var(--gold);margin:0}.options-title button{width:28px;height:28px;background:var(--teal);color:var(--paper);font-size:16px;--edge:var(--ink)}
.setting-label{font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}.setting-label output{color:var(--gold)}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:0;background:var(--panel);cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--teal);border:2px solid var(--ink)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:24px;margin-top:-10px;background:var(--gold);border:2px solid var(--ink);border-radius:0}input[type=range]::-moz-range-track{height:4px;background:var(--teal);border:2px solid var(--ink)}input[type=range]::-moz-range-thumb{width:12px;height:20px;background:var(--gold);border:2px solid var(--ink);border-radius:0}
select{appearance:none;border-radius:0;width:100%;padding:10px;background:var(--ink);color:var(--paper);border:3px solid var(--sage);font-size:16px}.pixel-button.mini{font-size:14px;min-height:38px;margin:6px 0}.options-foot{font-size:11px;color:var(--sage);text-align:center;line-height:1.4;margin:2px 0 0}.asset-credit{display:block;color:var(--sage);margin-top:5px;text-underline-offset:3px}.asset-credit:hover{color:var(--paper)}
.dialog-backdrop{z-index:12;display:grid;place-items:center;padding:26px}.dialog-box{width:min(440px,100%);padding:26px;background:var(--panel);text-align:center;display:flex;flex-direction:column;gap:18px}.dialog-box .eyebrow{margin:0}.dialog-box h3{font-size:30px;color:var(--gold);margin:0}.dialog-box p{font-size:16px;line-height:1.5;margin:0}.dialog-box .pixel-button{margin:6px 0}.promotion-choices{display:flex;justify-content:center;gap:8px}.promotion-choices button{display:grid;place-items:center;width:64px;height:64px;border:3px solid var(--sage);background:var(--teal)}.promotion-choices button:hover{border-color:var(--gold);background:var(--gold)}.promotion-choices .sprite{width:48px;height:48px}
.critical-error{position:fixed;z-index:25;bottom:24px;left:5%;width:90%;background:var(--gold);border:3px solid var(--ink);color:var(--ink);padding:20px;text-align:center;line-height:1.5}
@media(max-width:800px){
 #stage{border-inline-width:4px}.topbar{height:52px;padding:12px 22px}.maker{font-size:16px;letter-spacing:1px}.menu-toggle{font-size:12px;padding:4px 12px;min-height:26px}
 .title-screen{min-height:calc(100svh - 52px);padding:28px 20px 60px}h1{font-size:64px;letter-spacing:4px}.eyebrow{font-size:12px;margin-bottom:20px}.title-duel{height:76px;margin:20px 0}.title-duel>.sprite{width:80px;height:80px}.menu-card{padding:20px 24px 16px;width:290px}.pixel-button{font-size:16px;min-height:42px}.title-bottom{font-size:11px}
 .game-screen{--board-size:min(calc(100vw - 60px),calc(100svh - 314px));padding:24px 20px 28px}.match-shell{width:calc(var(--board-size) + 16px);display:flex;flex-direction:column;gap:16px}.status-panel{align-self:stretch;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}.status-panel strong{font-size:18px}.status-panel p{font-size:12px;line-height:1.4;margin:5px 0 0}#moveCount{font-size:11px;white-space:nowrap;margin:0}.board-col{width:100%}.board-label{font-size:12px}.chess-frame{border-width:3px}.board-ranks,.board-files{font-size:20px}
 .match-toolbar{align-self:stretch;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:14px;margin:0 6px}.board-actions{width:auto;gap:18px}.tiny-button,.match-details summary{font-size:12px;padding:8px 12px;min-height:36px}.match-details summary{gap:8px}.details-content{top:auto;bottom:calc(100% + 18px);width:min(280px,calc(100vw - 80px));max-height:340px}.options-panel{padding:20px;gap:14px}.promotion-choices button{width:54px;height:54px}.promotion-choices .sprite{width:48px;height:48px}
}
@media(max-height:600px) and (min-width:801px){.game-screen{--board-size:min(calc(100svh - 180px),460px);padding-top:16px}.topbar{height:50px}.title-screen{min-height:calc(100svh - 50px);padding-top:20px;padding-bottom:42px}.title-content{max-width:700px;display:grid;grid-template-columns:1fr 280px;gap:16px 48px}.title-content .eyebrow{grid-column:1 / -1;margin:0}h1{font-size:62px;grid-column:1;grid-row:2}.title-duel{grid-column:1;grid-row:3;margin:0;height:64px}.title-duel>.sprite{width:68px;height:68px}.menu-card{grid-column:2;grid-row:2 / span 2;width:280px}.title-bottom{bottom:14px}}
@media(max-height:500px) and (min-aspect-ratio:3/2){
 .topbar{height:40px;padding-block:8px}.maker{font-size:14px}.menu-toggle{min-height:22px;font-size:11px}
 .title-screen{min-height:calc(100svh - 40px);padding:20px 32px 44px}.title-content{max-width:600px;display:grid;grid-template-columns:1fr 240px;gap:12px 36px}.title-content .eyebrow{grid-column:1 / -1;font-size:10px;margin:0}h1{font-size:48px;grid-column:1;grid-row:2}.title-duel{grid-column:1;grid-row:3;margin:0;height:56px}.title-duel>.sprite{width:56px;height:56px}.duel-vs{font-size:16px}.menu-card{grid-column:2;grid-row:2 / span 2;width:240px;padding:16px 20px 10px}.menu-card .pixel-button{min-height:34px;font-size:14px;margin:6px 0 18px}.coming-soon{font-size:10px}.title-bottom{bottom:12px}
 .game-screen{--board-size:min(calc(100svh - 128px),46vw);padding:12px 18px}.match-shell{width:calc(var(--board-size) + 246px);display:grid;grid-template-columns:calc(var(--board-size) + 16px) 200px;gap:18px 30px}.board-col{grid-column:1;grid-row:1 / span 2}.status-panel{grid-column:2;grid-row:1;align-self:end;display:block;padding:14px;min-height:90px}.status-panel strong{font-size:18px}.status-panel p{font-size:12px}#moveCount{margin-top:10px}.match-toolbar{grid-column:2;grid-row:2;align-self:start;flex-wrap:wrap;margin:0 6px;gap:20px}.board-actions{width:100%;gap:18px}.tiny-button,.match-details summary{font-size:12px;min-height:32px;padding:6px 12px}.details-content{top:calc(100% + 18px);bottom:auto;width:240px;right:0;max-height:170px}.options-panel{max-height:calc(100svh - 32px);padding:18px;gap:12px}.options-foot{font-size:10px}
}
@media(max-width:350px){h1{font-size:54px}.game-screen{padding-inline:16px}.tiny-button,.match-details summary{font-size:11px;padding-inline:10px}.board-actions{gap:16px}.board-ranks,.board-files{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.square .sprite{transition:none}}
@media(max-height:700px) and (max-width:800px) and (max-aspect-ratio:1/1){.title-screen{padding-block:22px 48px}h1{font-size:52px}.title-content .eyebrow{font-size:10px;margin-bottom:14px}.title-duel{height:50px;margin:14px 0}.title-duel>.sprite{width:56px;height:56px}.menu-card{padding:14px 22px 12px}.menu-card .pixel-button{min-height:34px;font-size:14px;margin:6px 0 16px}.coming-soon{font-size:10px}.title-bottom{bottom:14px}}

.mode-screen{min-height:calc(100svh - 58px);padding:42px 38px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.mode-screen .eyebrow{margin:0}.mode-screen h2{font-size:32px;color:var(--gold);margin:0 0 8px}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:880px;width:100%}.mode-button{background:var(--panel);color:var(--paper);padding:22px 16px;min-height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-inline:0}.mode-button b{font-size:20px;line-height:1.3}.mode-button span{font-size:14px;color:var(--sage)}.mode-button small{font-size:12px;color:var(--gold)}.mode-button:disabled{background:var(--ink);color:var(--teal);cursor:default}.mode-button:disabled small{color:var(--sage)}.mode-button:not(:disabled):hover{background:var(--teal)}.mode-note{font-size:13px;color:var(--sage);margin:0}.mode-screen>.pixel-button{width:240px;margin:8px 0}.mode-badge{color:var(--gold);font-size:12px;letter-spacing:2px;margin:0 auto 12px;max-width:calc(var(--board-size) + 276px)}
.note-actions{grid-column:2;grid-row:2;background:var(--panel);padding:16px 12px;align-self:start}.note-action-buttons{display:flex;flex-wrap:wrap;gap:12px}.note-action-buttons button{font-size:12px;padding:8px;flex:1;border:2px solid var(--sage)}.note-action-buttons button[aria-pressed=true]{background:var(--gold);color:var(--ink)}#noteTarget{font-size:12px;color:var(--gold);line-height:1.4;margin:14px 0}.note-help{font-size:13px;line-height:1.5}.note-help summary{color:var(--sage);cursor:pointer}.note-help p{margin:10px 0}.game-screen[data-mode=note] .board-col{grid-row:1 / span 3}.game-screen[data-mode=note] .match-toolbar{grid-row:3}
.note-user>.sprite{outline:2px solid var(--red);outline-offset:2px}.role-badge,.mark-badge{position:absolute;z-index:5;font-size:12px;font-weight:700;background:var(--ink);color:var(--red);line-height:1;padding:2px;pointer-events:none}.role-badge{left:2px;bottom:2px}.mark-badge{right:2px;top:2px;color:var(--gold)}.note-history{font-size:13px;line-height:1.5}.note-scene-layer{position:absolute;inset:0;overflow:hidden;z-index:15;pointer-events:none}.note-scene-layer>.scene-pawn{position:absolute;z-index:3;pointer-events:none}.note-hole{position:absolute;background:var(--black);z-index:1}.note-beam{position:absolute;background:var(--gold);border-inline:4px solid var(--paper);z-index:1;transform-origin:top center}.note-cinematic{position:fixed;top:35%;left:0;width:100%;padding:28px max(24px,calc((100vw - 800px)/2));z-index:14;display:flex;gap:24px;align-items:center;justify-content:center;background:var(--black);color:var(--paper);border-block:4px solid var(--red);pointer-events:none}.note-cinematic h2{font-size:30px;margin:8px 0;color:var(--paper)}.note-cinematic p{font-size:15px;margin:4px 0;line-height:1.4}#noteSceneTitle{color:var(--red);font-size:14px}#noteScenePawn>.sprite{width:80px;height:80px}
@media(max-width:800px){.mode-screen{padding:26px 26px;gap:18px}.mode-screen h2{font-size:26px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mode-button{min-height:124px;padding:14px 8px;gap:10px}.mode-button b{font-size:17px}.mode-button span{font-size:12px}.mode-note{font-size:12px}.mode-badge{margin-bottom:14px}.game-screen{--board-size:min(calc(100vw - 60px),calc(100svh - 340px))}.game-screen[data-mode=note]{--board-size:min(calc(100vw - 60px),calc(100svh - 370px))}.note-actions{width:100%;order:3}.note-actions .note-help{font-size:12px}.game-screen[data-mode=note] .board-col{order:1}.game-screen[data-mode=note] .status-panel{order:0}.game-screen[data-mode=note] .match-toolbar{order:2}.note-action-buttons{gap:14px}.note-action-buttons button{min-height:36px;font-size:14px}.note-cinematic{top:30%;padding:20px;gap:16px}.note-cinematic h2{font-size:24px}.note-cinematic p{font-size:13px}#noteScenePawn>.sprite{width:56px;height:56px}}
@media(max-height:500px) and (min-aspect-ratio:3/2){.mode-screen{padding:24px;min-height:calc(100svh - 40px);gap:12px}.mode-screen .eyebrow,.mode-note{display:none}.mode-screen h2{font-size:22px;margin:0}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mode-button{min-height:80px;padding:10px 8px;gap:6px}.mode-button b{font-size:15px}.mode-button span,.mode-button small{font-size:11px}.mode-screen>.pixel-button{min-height:30px;font-size:13px;margin:4px 0}.mode-badge{margin-bottom:8px}.game-screen,.game-screen[data-mode=note]{--board-size:min(calc(100svh - 152px),46vw)}.game-screen[data-mode=note] .match-shell{display:grid;grid-template-columns:calc(var(--board-size) + 16px) 200px;gap:14px 30px}.game-screen[data-mode=note] .status-panel{grid-row:1}.game-screen[data-mode=note] .note-actions{grid-row:2;font-size:11px;padding:10px}.game-screen[data-mode=note] .match-toolbar{grid-row:3;gap:8px}.game-screen[data-mode=note] .status-panel{min-height:60px;padding:10px}.game-screen[data-mode=note] .status-panel p{font-size:10px}.game-screen[data-mode=note] .status-panel strong{font-size:15px}.note-actions button{font-size:11px;min-height:30px}.note-actions #noteTarget{font-size:10px;margin:8px 0}.note-help{font-size:11px}.note-cinematic{top:20%}.game-screen[data-mode=note] .match-shell{align-items:start}.note-actions .note-help[open]{max-height:130px;overflow:auto}}

#noteScenePawn{flex:none;background:var(--paper);padding:8px;border:4px solid var(--teal)}
@media(max-height:500px) and (min-aspect-ratio:3/2){
 .game-screen[data-mode=note] .match-shell{gap:10px 30px}
 .game-screen[data-mode=note] .status-panel{min-height:0;padding:8px}.game-screen[data-mode=note] .status-panel p{line-height:1.25;max-height:2.5em;overflow:hidden;margin-top:4px}.game-screen[data-mode=note] #moveCount{margin-top:6px}
 .game-screen[data-mode=note] .note-actions{padding:8px}.game-screen[data-mode=note] .note-actions button{min-height:28px;padding:5px;font-size:10px}.game-screen[data-mode=note] #noteTarget{margin:5px 0;font-size:9px}.game-screen[data-mode=note] .note-help{font-size:10px}
 .game-screen[data-mode=note] .match-toolbar{flex-wrap:nowrap;gap:18px;margin-top:0}.game-screen[data-mode=note] .board-actions{width:auto}.game-screen[data-mode=note] .tiny-button,.game-screen[data-mode=note] .match-details summary{min-height:28px;padding:5px 10px;font-size:11px}
}

/* Ball Monsters: same eight palette colors and original individual piece sprites. */
.game-screen[data-mode=monsters]{--board-size:min(calc(100svh - 240px),500px)}
.game-screen[data-mode=monsters] .match-shell{width:calc(var(--board-size) + 396px);grid-template-columns:calc(var(--board-size) + 16px) 340px;grid-template-rows:auto auto;gap:18px 40px}
.game-screen[data-mode=monsters] .status-panel{display:none}.game-screen[data-mode=monsters] .board-col{grid-row:1}.monster-panel{grid-column:2;grid-row:1 / span 2;align-self:start;background:var(--panel);padding:14px;min-width:0;width:100%;max-height:calc(100svh - 150px);overflow:auto}.monster-prompt{font-size:13px;font-weight:700;color:var(--gold);margin:0 0 10px;line-height:1.4}.monster-side{font-size:10px;color:var(--sage);display:block;margin-bottom:4px}
.game-screen[data-mode=monsters] .match-toolbar{grid-column:1;grid-row:2;justify-content:space-between;flex-wrap:nowrap;gap:20px;margin-top:0}.game-screen[data-mode=monsters] .board-actions{width:auto}.game-screen[data-mode=monsters] .details-tip{display:none}
.monster-health-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}.monster-health{min-width:0}.monster-identity{display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.2}.monster-identity b{font-size:14px;color:var(--paper)}.monster-identity span{color:var(--sage);font-size:11px}.hp-track{height:8px;background:var(--ink);border:1px solid var(--black);margin:5px 0}.hp-fill{display:block;height:100%;background:var(--sage)}.hp-fill.low{background:var(--red)}.monster-stats,.monster-effects{display:block;font-size:9px;line-height:1.5;color:var(--sage)}.monster-effects{color:var(--gold);min-height:14px}
.monster-attacks{display:grid;grid-template-columns:1fr 1fr;gap:6px}.monster-attack{background:var(--ink);border:2px solid var(--teal);padding:8px;text-align:left;min-height:94px;color:var(--paper);display:flex;flex-direction:column;gap:5px}.monster-attack b{font-size:13px;line-height:1.2}.attack-stats{font-size:10px;color:var(--gold)}.monster-attack small{font-size:10px;line-height:1.3;color:var(--sage)}.monster-attack:hover:not(:disabled){border-color:var(--sage)}.monster-attack[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}.monster-attack:disabled{color:var(--teal);border-color:var(--teal);background:var(--panel)}.monster-attack:disabled small,.monster-attack:disabled .attack-stats{color:var(--teal)}
.monster-panel .pixel-button{font-size:14px;min-height:32px;margin:16px 4px 12px;width:calc(100% - 8px);padding:7px}.monster-panel .pixel-button:disabled{background:var(--teal);color:var(--sage);--button-light:var(--sage)}.monster-lock{font-size:9px;color:var(--gold);text-align:center;line-height:1.5;margin:0}.monster-help{font-size:12px;margin-top:10px}.monster-help summary{font-size:10px}
.board[data-mode=monsters] .active-monster{box-shadow:inset 0 0 0 3px var(--gold)}.board[data-mode=monsters] .trainer-square{box-shadow:inset 0 0 0 2px var(--sage)}.board[data-mode=monsters] .reserve-square .sprite{opacity:1}.square.fainted>.sprite{visibility:hidden}.square.fainted .switch-target:before{content:"";position:absolute;z-index:3;inset:4%;border:2px solid var(--gold);border-radius:50%;pointer-events:none}
.monster-cinematic{position:fixed;z-index:9;inset:64px 12px 16px;display:grid;place-items:center;pointer-events:none;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%);background-size:4px 4px}.monster-cinema-frame{width:min(680px,calc(100vw - 48px));max-height:100%;overflow:hidden;background:var(--black);padding:26px;color:var(--paper)}.monster-cinema-frame>.eyebrow{text-align:center;margin:0 0 20px;color:var(--gold)}.monster-cinema-status{display:grid;grid-template-columns:1fr 36px 1fr;gap:12px;align-items:center}.cinema-vs{text-align:center;color:var(--gold);font-size:16px}.cinema-health .monster-identity{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}.cinema-health .monster-identity b{font-size:18px}.cinema-health .monster-identity span{font-size:13px}.cinema-health .hp-track{height:12px;background:var(--panel)}.cinema-health .monster-stats{font-size:11px}.cinema-health .monster-effects{font-size:11px;min-height:16px}.monster-arena{height:220px;position:relative;background:repeating-conic-gradient(var(--panel) 0 25%,var(--ink) 0 50%) center bottom / 48px 48px;border-bottom:4px solid var(--teal);margin:20px 0}.monster-actor{position:absolute;bottom:32px;width:128px;height:128px;display:grid;place-items:center;background:var(--paper);border:4px solid var(--teal);box-shadow:8px 8px var(--black);z-index:2}.monster-actor .sprite{width:112px;height:112px}.monster-actor.own{left:8%}.monster-actor.rival{right:8%}.monster-actor.is-fainted{opacity:0}.monster-impact{position:absolute;z-index:4;left:5%;top:12px;font-size:30px;color:var(--gold);text-shadow:3px 3px var(--black)}.monster-impact[data-side=b]{left:auto;right:5%}.monster-narration{min-height:3em;margin:0;font-size:20px;line-height:1.5;text-align:center;color:var(--paper)}

@media(max-width:1000px) and (min-width:801px){.game-screen[data-mode=monsters]{--board-size:min(calc(100svh - 240px),calc(100vw - 430px))}.game-screen[data-mode=monsters] .match-shell{gap:18px 30px}}
@media(max-width:800px){
 .game-screen[data-mode=monsters]{--board-size:min(calc(100vw - 60px),max(230px,calc(100svh - 550px)));padding-top:14px}.game-screen[data-mode=monsters] .match-shell{display:flex;width:min(calc(100vw - 48px),376px);gap:12px}.game-screen[data-mode=monsters] .board-col{order:1;width:calc(var(--board-size) + 16px);align-self:center}.game-screen[data-mode=monsters] .monster-panel{order:2;max-height:none;overflow:visible;padding:10px}.game-screen[data-mode=monsters] .match-toolbar{order:3;align-self:stretch}
 .monster-attack{min-height:80px;padding:7px;gap:4px}.monster-attack b{font-size:12px}.monster-attack small{font-size:10px}.monster-health-pair{margin-bottom:8px;gap:10px}.monster-panel .pixel-button{margin:13px 4px 10px}.monster-help{margin-top:8px}
 .monster-cinematic{inset:60px 8px 12px}.monster-cinema-frame{padding:18px 14px}.monster-cinema-status{grid-template-columns:1fr 20px 1fr;gap:8px}.cinema-health .monster-identity b{font-size:15px}.cinema-health .monster-identity span{font-size:11px}.cinema-health .monster-stats,.cinema-health .monster-effects{font-size:9px}.monster-arena{height:190px}.monster-actor{width:96px;height:96px;bottom:30px}.monster-actor .sprite{width:80px;height:80px}.monster-actor.own{left:4%}.monster-actor.rival{right:4%}.monster-narration{font-size:17px}.monster-impact{font-size:24px}.monster-cinema-frame>.eyebrow{margin-bottom:12px}
}
@media(max-height:500px) and (min-aspect-ratio:3/2){
 .game-screen[data-mode=monsters]{--board-size:min(max(166px,calc(100svh - 192px)),40vw);padding:12px 18px}.game-screen[data-mode=monsters] .match-shell{display:grid;width:calc(var(--board-size) + 366px);grid-template-columns:calc(var(--board-size) + 16px) 310px;grid-template-rows:calc(var(--board-size) + 64px) min-content;gap:12px 24px}.game-screen[data-mode=monsters] .board-col{width:100%;grid-column:1;grid-row:1}.game-screen[data-mode=monsters] .monster-panel{grid-column:2;grid-row:1 / span 2;max-height:calc(100svh - 108px);overflow:auto;padding:10px}.game-screen[data-mode=monsters] .match-toolbar{grid-column:1;grid-row:2}.game-screen[data-mode=monsters] .tiny-button,.game-screen[data-mode=monsters] .match-details summary{min-height:26px;padding:5px 10px;font-size:11px}
 .monster-prompt{font-size:11px;margin-bottom:6px}.monster-stats,.monster-effects{display:none}.cinema-health .monster-stats,.cinema-health .monster-effects{display:block}.monster-attack{min-height:65px;padding:6px;gap:3px}.monster-attack b{font-size:11px}.monster-attack small,.attack-stats{font-size:9px}.monster-panel .pixel-button{min-height:28px;margin-top:12px;padding:5px}.monster-health-pair{margin-bottom:6px}.monster-lock{font-size:8px}.monster-help{margin-top:6px}
 .monster-cinematic{inset:48px 12px 10px}.monster-cinema-frame{width:min(640px,calc(100vw - 64px));padding:12px 20px}.monster-cinema-frame>.eyebrow{display:none}.monster-arena{height:126px;margin:8px 0}.monster-actor{width:88px;height:88px;bottom:12px}.monster-actor .sprite{width:80px;height:80px}.monster-narration{min-height:2em;font-size:16px;line-height:1.2}
}
@media(max-height:500px) and (min-aspect-ratio:3/2) and (max-width:650px){.game-screen[data-mode=monsters]{--board-size:min(max(166px,calc(100svh - 192px)),calc(100vw - 344px))}.game-screen[data-mode=monsters] .match-shell{width:calc(var(--board-size) + 300px);grid-template-columns:calc(var(--board-size) + 16px) 260px}}

/* Suggestions and Alien Wishes retain the game palette. */
#suggestionForm{max-height:calc(100svh - 40px);overflow:auto;gap:14px}#suggestionForm label{font-size:13px;text-align:left}#suggestionText{resize:vertical;min-height:110px;width:100%;background:var(--ink);color:var(--paper);border:3px solid var(--sage);font:16px RetroPixel,monospace;padding:12px;line-height:1.5}#suggestionCount{font-size:12px;color:var(--sage);text-align:right}#suggestionStatus{font-size:13px;min-height:2.8em}#suggestionSubmit:disabled{background:var(--teal);color:var(--sage)}
.wishes-panel{grid-column:2;grid-row:2;align-self:start;padding:16px 12px;background:var(--panel);min-width:0}.game-screen[data-mode=wishes] .board-col{grid-row:1 / span 3}.game-screen[data-mode=wishes] .status-panel{display:none}.game-screen[data-mode=wishes] .match-toolbar{grid-row:3}.game-screen[data-mode=wishes] .details-tip{display:none}.game-screen[data-mode=wishes] .board-actions{width:auto}.game-screen[data-mode=wishes] .match-toolbar{flex-wrap:nowrap;justify-content:space-between}
.wishes-panel h2{color:var(--gold);font-size:14px;line-height:1.4;margin:0 0 8px}#wishesMessage{font-size:12px;line-height:1.5;min-height:3em;margin:0 0 14px}.wishes-identity{display:flex;align-items:center;gap:10px;padding-block:10px;border-block:2px solid var(--teal);margin-bottom:12px;min-height:70px}.wishes-identity h3{font-size:15px;margin:0 0 6px;color:var(--paper);line-height:1.4}.wishes-identity p{font-size:10px;line-height:1.5;margin:4px 0;color:var(--sage)}#wishesPortrait{flex:none}#wishesPortrait .sprite{width:48px;height:48px;background:var(--paper)}#wishesUsage{color:var(--gold)}
.wishes-commands{display:grid;gap:8px}.fighter-command{display:flex;flex-direction:column;gap:6px;background:var(--ink);border:2px solid var(--teal);padding:10px;color:var(--paper);text-align:left;line-height:1.4}.fighter-command b{font-size:14px}.fighter-command small{font-size:11px;color:var(--sage)}.fighter-command[aria-pressed=true]{border-color:var(--gold)}.fighter-command:disabled{background:var(--panel);color:var(--teal)}.fighter-command:disabled small{color:var(--teal)}.wishes-panel .pixel-button{font-size:12px;min-height:34px;margin:16px 4px;width:calc(100% - 8px)}.wishes-panel .pixel-button:disabled{background:var(--teal);color:var(--sage)}.wishes-form-limit{color:var(--gold);font-size:9px;line-height:1.5;margin:10px 0}.wishes-help{font-size:12px}.wishes-help summary{font-size:11px}
.fighter-health{position:absolute;z-index:5;bottom:2px;left:10%;width:80%;height:4px;border:1px solid var(--ink);background:var(--ink);pointer-events:none}.fighter-health i{display:block;height:100%;background:var(--sage)}.fighter-health i.low{background:var(--red)}.fighter-square.transformed{outline:2px solid var(--gold);outline-offset:-3px}.fighter-square.spent{box-shadow:inset 0 0 0 2px var(--ink)}.fighter-square.charging:before{content:"";position:absolute;inset:6%;border:2px dashed var(--gold);pointer-events:none;z-index:4}.square.charge-warning{background-image:repeating-linear-gradient(135deg,transparent 0 7px,var(--red) 7px 10px)}.square.ki-preview{box-shadow:inset 0 0 0 3px var(--gold)}.square.aimed{outline:3px solid var(--gold);outline-offset:-4px;z-index:5}.wishes-fx{position:absolute;inset:0;z-index:16;pointer-events:none;overflow:hidden}.wishes-fx svg{position:absolute;inset:0;width:100%;height:100%}.wishes-beam{stroke:var(--gold);stroke-width:8;stroke-linecap:square}.wishes-spark{position:absolute;width:18px;height:18px;border:4px solid var(--gold);background:var(--paper);font-size:20px;color:var(--ink);line-height:1}.wishes-damage{position:absolute;font-size:22px;color:var(--gold);text-shadow:2px 2px var(--black);z-index:5}.wishes-power-up{box-shadow:inset 0 0 0 4px var(--gold)}
@media(min-width:801px){.game-screen[data-mode=wishes]{--board-size:min(calc(100svh - 210px),520px)}.game-screen[data-mode=wishes] .match-shell{width:calc(var(--board-size) + 376px);grid-template-columns:calc(var(--board-size) + 16px) 320px;grid-template-rows:auto auto;gap:20px 40px}.game-screen[data-mode=wishes] .board-col{grid-row:1}.game-screen[data-mode=wishes] .wishes-panel{grid-row:1 / span 2;max-height:calc(100svh - 145px);overflow:auto}.game-screen[data-mode=wishes] .match-toolbar{grid-column:1;grid-row:2}}
@media(max-width:1000px) and (min-width:801px){.game-screen[data-mode=wishes]{--board-size:min(calc(100svh - 240px),calc(100vw - 410px))}.game-screen[data-mode=wishes] .match-shell{gap:20px 30px}}
@media(max-width:800px){.game-screen[data-mode=wishes]{--board-size:min(calc(100vw - 60px),360px)}.game-screen[data-mode=wishes] .wishes-panel{width:100%;order:2}.game-screen[data-mode=wishes] .board-col{order:1}.game-screen[data-mode=wishes] .match-toolbar{order:3}.wishes-commands{grid-template-columns:1fr 1fr}.transform-command{grid-column:1 / -1}.wishes-panel h2{font-size:14px}.fighter-command b{font-size:12px}.fighter-command small{font-size:10px}}
@media(max-height:500px) and (min-aspect-ratio:3/2){.game-screen[data-mode=wishes]{--board-size:min(max(170px,calc(100svh - 180px)),40vw);padding:12px 18px}.game-screen[data-mode=wishes] .match-shell{display:grid;width:calc(var(--board-size) + 346px);grid-template-columns:calc(var(--board-size) + 16px) 300px;grid-template-rows:calc(var(--board-size) + 64px) auto;gap:12px 24px}.game-screen[data-mode=wishes] .board-col{grid-row:1}.game-screen[data-mode=wishes] .wishes-panel{grid-column:2;grid-row:1 / span 2;max-height:calc(100svh - 108px);overflow:auto;padding:10px}.game-screen[data-mode=wishes] .match-toolbar{grid-column:1;grid-row:2}.wishes-commands{grid-template-columns:1fr 1fr}.fighter-command{padding:6px}.fighter-command b{font-size:11px}.fighter-command small{font-size:9px}.wishes-identity h3{font-size:13px}.wishes-identity{margin-bottom:8px;padding:6px 0}#wishesMessage{font-size:10px;margin-bottom:6px;min-height:0}.wishes-panel h2{font-size:12px}.wishes-form-limit{font-size:8px}}
@media(max-height:500px) and (min-aspect-ratio:3/2) and (max-width:650px){.game-screen[data-mode=wishes]{--board-size:min(170px,calc(100vw - 340px))}.game-screen[data-mode=wishes] .match-shell{grid-template-columns:calc(var(--board-size) + 16px) 260px;width:calc(var(--board-size) + 300px)}}

/* Sprite sheets render on a small palette-quantized canvas, scaled with nearest pixels. */
.sprite-vfx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:16;pointer-events:none;image-rendering:pixelated;user-select:none}.monster-battle-fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}.monster-arena{isolation:isolate}
/* Reserve a full native sprite plus its HP strip on short screens. */
@media(max-height:500px) and (min-aspect-ratio:3/2){.game-screen[data-mode=wishes]{--board-size:max(232px,min(calc(100svh - 180px),40vw))}}
@media(max-height:500px) and (min-aspect-ratio:3/2) and (max-width:650px){.game-screen[data-mode=wishes]{--board-size:232px;padding-inline:12px}.game-screen[data-mode=wishes] .match-shell{width:532px;max-width:100%;grid-template-columns:248px minmax(0,260px);gap:12px 24px}}

/* Multiplayer lobby uses the same palette, type and stepped frames as the game. */
.online-screen{padding:32px 28px 44px;max-width:850px;margin:auto;min-height:calc(100svh - 58px)}.online-screen>.eyebrow{text-align:center;margin-bottom:12px}.online-screen>h2{text-align:center;font-size:30px;color:var(--gold);margin:0 0 28px}.online-entry{max-width:400px;margin:30px auto;background:var(--panel);padding:24px}.online-entry form{display:flex;flex-direction:column;gap:18px}.online-entry label{font-size:14px;color:var(--sage)}.online-entry input{width:100%;font:16px RetroPixel,monospace;padding:12px;border:3px solid var(--sage);background:var(--ink);color:var(--paper);border-radius:0}.online-entry .pixel-button{margin:6px 0}.online-entry p{font-size:12px;color:var(--sage);line-height:1.5;margin-top:18px}.online-status{min-height:3em;font-size:14px;line-height:1.5;color:var(--gold);margin:24px 0}.online-screen>.pixel-button{width:240px;max-width:100%;margin:24px auto 0}.online-lobby>p{font-size:13px;color:var(--sage);line-height:1.5}.online-heading{font-size:15px;color:var(--gold);margin:28px 0 16px}.online-people,.online-matches{display:grid;gap:10px}.online-player,.online-match{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:var(--panel);border:2px solid var(--teal);color:var(--paper);padding:16px;min-width:0}.online-player b,.online-match b{font-size:17px;overflow-wrap:anywhere;min-width:0}.online-player small,.online-match span{font-size:11px;color:var(--gold);line-height:1.5;text-align:right}.online-player:hover:not(:disabled),.online-match:hover{border-color:var(--gold)}.online-player:disabled{color:var(--sage)}.online-player:disabled small{color:var(--teal)}.online-match{flex-direction:column;align-items:flex-start;gap:8px}.online-empty{font-size:14px;line-height:1.6;color:var(--sage)}.online-invitation,.online-choose{background:var(--panel);padding:20px 16px;margin:24px 0}.online-invitation h3,.online-choose h3{font-size:18px;line-height:1.5;color:var(--gold);margin:0 0 12px}.online-invitation p,.online-choose p{font-size:13px;line-height:1.5}.online-invite-actions{display:flex;flex-wrap:wrap;gap:22px;margin:20px 4px 4px}.online-mode-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 24px}.online-mode-choice{border:2px solid var(--sage);padding:14px 8px;min-height:52px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14px}.online-mode-choice:hover{border-color:var(--gold);color:var(--gold)}.online-network-alert{position:fixed;z-index:24;bottom:14px;left:5%;width:90%;margin:0;padding:14px;background:var(--panel);border:3px solid var(--gold);color:var(--gold);font-size:13px;line-height:1.5;text-align:center}.online-match-info{font-size:12px;color:var(--sage);line-height:1.5;margin:0 auto 18px;max-width:900px}.online-match-info:empty{display:none}.online-back{margin:0 6px 22px}.game-screen[data-online=true] .status-panel{display:block!important;grid-column:1 / -1;grid-row:1;padding:12px;min-height:0}.game-screen[data-online=true] .status-panel strong{font-size:16px}.game-screen[data-online=true] .status-panel p{font-size:12px}.game-screen[data-online=true] .board-col{grid-column:1;grid-row:2!important}.game-screen[data-online=true] .match-toolbar{grid-column:1;grid-row:3!important}.game-screen[data-online=true] .note-actions,.game-screen[data-online=true] .monster-panel,.game-screen[data-online=true] .wishes-panel{grid-column:2;grid-row:2 / span 2!important}.game-screen[data-online=true] .match-shell{height:auto!important;grid-template-rows:auto auto auto!important}.game-screen[data-online=true] .monster-panel{height:auto!important;max-height:calc(100svh - 150px)}
@media(max-width:800px){.online-screen{padding:26px 22px}.online-screen>h2{font-size:25px;margin-bottom:22px}.online-entry{padding:22px 18px;margin:22px 4px}.online-player{padding:14px 10px;gap:10px}.online-player b{font-size:16px}.online-player small{font-size:10px}.online-mode-choice{font-size:12px}.online-match-info{font-size:11px}.online-back{font-size:12px}.game-screen[data-online=true] .status-panel{align-self:stretch;order:0}.game-screen[data-online=true] .board-col{order:1}.game-screen[data-online=true] .match-toolbar{order:3}.game-screen[data-online=true] .note-actions,.game-screen[data-online=true] .monster-panel,.game-screen[data-online=true] .wishes-panel{order:2}}
@media(max-height:500px) and (min-aspect-ratio:3/2){.online-screen{padding:20px 26px}.online-screen>.eyebrow{display:none}.online-screen>h2{font-size:23px;margin-bottom:20px}.online-player{padding:12px}.online-entry{margin:0 auto;padding:16px 20px}.online-entry form{gap:12px}.online-entry p{font-size:10px;margin-top:12px}.online-mode-choices{grid-template-columns:repeat(4,1fr)}.online-match-info{font-size:10px}.game-screen[data-online=true] .status-panel p{display:none}.game-screen[data-online=true] .note-actions,.game-screen[data-online=true] .monster-panel,.game-screen[data-online=true] .wishes-panel{max-height:calc(100svh - 110px);overflow:auto}}