:root{color-scheme:dark;--paper:#000;--ink:#fff;--muted:#888;--line:#444;--panel:#000;--accent:#fff;--grid:#ffffff0b;--heading:#000}

*{box-sizing:border-box}body{margin:0;background-color:var(--paper);background-image:var(--syntris-background,none);background-position:center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat;color:var(--ink);font:15px/1.5 Arial,sans-serif}a{color:var(--accent)}button,input{font:inherit}button{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:7px 11px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.practice{max-width:1400px;padding:28px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);background:var(--panel);padding:18px 24px;margin-bottom:24px}.intro h1{font:32px Georgia,serif;margin:0}.intro p{margin:5px 0}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted)}.edition{font-size:12px;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(460px,1.1fr) minmax(400px,1fr);gap:32px;align-items:start}.game-layout{display:grid;grid-template-columns:minmax(85px,120px) minmax(200px,300px) minmax(70px,100px);gap:12px;justify-content:center}.panel,.board-panel{border:1px solid var(--line);background:var(--panel);min-width:0}.panel h2,.board-panel h2{font-size:13px;padding:6px 9px;margin:0;background:var(--heading);border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.board-panel h2 span{font-size:11px;font-weight:normal;color:var(--muted)}canvas{display:block;width:100%;height:auto}.board-wrap{position:relative}.board-wrap canvas{background:var(--paper)}#overlay{position:absolute;inset:0;background:var(--paper);opacity:.96;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}#overlay[hidden]{display:none}.left-rail{display:flex;flex-direction:column;gap:18px}.target{margin-top:auto}.empty-board{aspect-ratio:1/2;background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:10% 5%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:11px;padding:8px}.empty-board small{font-size:10px}.stats{display:flex;justify-content:space-between;padding:5px 10px;font-size:12px;border-top:1px solid var(--line)}.stats b{margin-left:10px}.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.toolbar button{font-size:12px}.game-note{font-size:12px;color:var(--muted)}.suggestions>h2{font:23px Georgia,serif;margin:0 0 6px}.suggestions>h2 span{font:11px Arial,sans-serif;color:var(--muted);margin-left:10px}.suggestions>p{font-size:12px;color:var(--muted);margin:0 0 18px}.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.setup-grid h3{font-size:11px;margin:0;padding:6px;background:var(--heading);border-bottom:1px solid var(--line)}.controls{margin-top:26px;border-top:1px solid var(--line);padding-top:15px;font-size:13px;color:var(--muted)}.controls summary{cursor:pointer;font-weight:bold;color:var(--ink)}#key-guide{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}kbd{font:12px monospace;border:1px solid var(--line);padding:2px 5px;color:var(--ink);background:var(--panel)}dialog{max-width:560px;width:calc(100% - 30px);max-height:90vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:24px}dialog::backdrop{background:#0009}dialog h2{margin-top:0}#bindings{display:grid;grid-template-columns:1fr 1fr;gap:8px}#bindings label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.settings-values{display:grid;gap:10px;margin:20px 0}.settings-values label{display:flex;justify-content:space-between;gap:12px}input{width:85px;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:4px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}#settings-error{color:var(--accent);font-size:13px}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.suggestions{max-width:640px;width:100%;margin:auto}.game-layout{grid-template-columns:minmax(70px,110px) minmax(180px,280px) minmax(65px,95px)}}@media(max-width:550px){.practice{padding:12px}.intro{padding:15px}.intro h1{font-size:26px}.edition{display:none}.game-layout{gap:6px;grid-template-columns:64px minmax(150px,1fr) 60px}.panel h2,.board-panel h2{padding:4px;font-size:11px}.target h2{font-size:10px}.setup-grid{gap:8px}.setup-grid h3{min-height:42px}#bindings{grid-template-columns:1fr}.dialog-actions{flex-wrap:wrap}}

#top-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;min-height:64px;padding:12px 28px;border-bottom:1px solid #444;background:#000;color:#fff;font:18px Georgia,serif}.nav-item{color:#fff;text-decoration:none;letter-spacing:.05em}.nav-item:hover{text-decoration:underline}.nav-item-right{margin-left:auto;font-size:14px}.board-wrap{overflow:hidden;border-top:2px solid #fff}#board{aspect-ratio:1/2;display:block}.board-panel{overflow:hidden}

#board{aspect-ratio:5/9}

body,button,input,#top-bar,dialog{font-family:"Microsoft Sans Serif",sans-serif}#board{aspect-ratio:5/11}.board-wrap{border-top:0}.workspace{align-items:stretch}.suggestions{display:flex;min-height:0}.setup-grid{flex:1;grid-template-rows:repeat(2,minmax(0,1fr));width:100%}.setup-grid>.panel{display:flex;flex-direction:column}.setup-grid .empty-board{aspect-ratio:auto;flex:1;min-height:0}.setup-grid h3{flex-shrink:0}@media(max-width:1000px){.suggestions{min-height:500px}}

.left-rail{gap:10px}.target{margin-top:0}.target .empty-board{min-height:260px}.left-rail>button{width:100%;font-size:11px}.game-layout{grid-template-columns:minmax(100px,140px) minmax(200px,300px) minmax(70px,100px)}.session-stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px;padding:10px 12px;border:1px solid #555;font-size:13px;font-variant-numeric:tabular-nums}.session-stats b{margin-left:8px}@media(max-width:550px){.game-layout{grid-template-columns:80px minmax(140px,1fr) 60px}.target .empty-board{min-height:180px}.stats{font-size:10px;padding:5px}.stats b{margin-left:3px}}

.left-rail .session-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 8px;border:0;padding:4px 0;margin:0;font-size:11px}.left-rail .session-stats>span{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 0 30px}.left-rail .session-stats b{margin:0}.toolbar{display:grid;grid-template-columns:minmax(100px,140px) minmax(200px,300px) minmax(70px,100px);gap:12px;justify-content:center}.board-controls{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}@media(max-width:1000px) and (min-width:551px){.toolbar{grid-template-columns:minmax(100px,140px) minmax(200px,300px) minmax(70px,100px)}}@media(max-width:550px){.toolbar{grid-template-columns:80px minmax(140px,1fr) 60px;gap:6px}}

#guide{width:min(620px,calc(100% - 30px));max-width:620px;padding:10px}#guide .guide-page{padding:12px;background:#fff;color:#000;border:2px solid;border-color:#808080 #fff #fff #808080;margin-bottom:12px}#guide .guide-page p{margin:0 0 16px;line-height:1.55}#guide .guide-page p:last-child{margin-bottom:0}#guide .dialog-actions{padding:0 4px 4px}

/* DT-Cannon guidance retains the existing window layout. */
.empty-board:has(canvas){padding:0;overflow:hidden}.empty-board canvas{width:100%;height:100%;object-fit:contain;max-height:400px}.target .empty-board{height:260px}.target canvas[hidden]{display:none}#training-step,.build-chance{font-size:11px;line-height:1.4;margin:0;padding:5px;color:#000}#training-step:empty{display:none}.build-chance[hidden]{display:none}.setup-grid h3{min-height:24px}

#placement-instructions{font-size:11px;padding:0 5px 5px}#placement-instructions[hidden]{display:none}#placement-instructions summary{cursor:pointer}#placement-path{margin:4px 0;overflow-wrap:anywhere}

.settings-values input[type="checkbox"]{width:18px;height:18px;accent-color:#000080}.settings-values input:disabled{opacity:.5}

/* Temporarily hide textual walkthrough; retain the target display and ghosts. */
.target #training-step,.target #placement-instructions{display:none}

.stats.is-perfect-clear{justify-content:center}.stats.is-perfect-clear>span{display:none}#perfect-clear[hidden]{display:none}#perfect-clear{font-weight:900;letter-spacing:.04em;text-align:center}

/* Analyzer updates change content, never the surrounding game geometry. */
html{scrollbar-gutter:stable}
.suggestions{min-width:0}
.setup-grid{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
.setup-grid>.panel{min-height:0}
.setup-grid h3{height:26px;min-height:26px;max-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-grid .empty-board{position:relative}
.setup-grid .empty-board canvas{position:absolute;inset:0;max-height:none}
.setup-grid .build-chance{height:57px;min-height:57px;max-height:57px;flex-shrink:0;overflow:auto;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.setup-grid .build-chance[hidden]{display:block;visibility:hidden}

/* Keep suggestion playfields at the same 10x20 geometry as their canvases. */
.setup-grid{grid-template-rows:repeat(2,auto);align-content:start}
.setup-grid .empty-board{aspect-ratio:1/2;flex:none}
.setup-grid .empty-board canvas{width:100%;height:100%;object-fit:fill}

.suggestions{flex-direction:column}
.mode-selector{display:flex;justify-content:center;align-items:center;gap:8px;padding-top:14px;flex-shrink:0}
.mode-selector button{min-width:82px}
.mode-selector button[aria-pressed="true"]{font-weight:bold}
.mode-selector button[aria-pressed="true"]::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;border-bottom:1px dotted #000}
@media(max-width:550px){.mode-selector{gap:5px;padding-top:10px}.mode-selector button{min-width:0;flex:1}}

/* Keep the complete two-row suggestion area and its mode controls in view. */
@media(min-width:1181px){
 .practice{max-width:1180px;padding:24px}
 .workspace{grid-template-columns:600px 500px;gap:20px}
 .suggestions{width:500px;justify-self:end}
 .setup-grid{gap:10px}
}
@media(min-width:1001px) and (max-width:1180px){
 .workspace{grid-template-columns:1fr}
 .suggestions{max-width:500px;width:100%;margin:24px auto 0}
}

/* Two stable rows: Analysis sits directly below Ghosts, left of Resume. */
.board-controls{display:grid;grid-template-columns:max-content max-content max-content;justify-content:center;gap:6px}
.board-controls button{font-size:11px;padding-left:6px;padding-right:6px}
@media(max-width:550px){.board-controls{gap:3px}.board-controls button{font-size:9px;padding-left:3px;padding-right:3px}}

.background-setting{display:grid;gap:7px;margin:8px 0;padding:9px}.background-setting input{width:100%;padding:2px}.background-setting small{font-size:11px}.background-setting button{justify-self:start}#background-name{font-size:11px;overflow-wrap:anywhere}
#guide-progress{margin:0 4px;text-align:left;font-size:11px;font-variant-numeric:tabular-nums}#guide-step-title{margin:0 0 8px;font-size:15px}#guide::backdrop{background:transparent}.guide-active::before{content:"";position:fixed;inset:0;z-index:100;background:#000c;pointer-events:none}.guide-highlight{position:relative;z-index:101;animation:guide-glow 1.15s ease-in-out infinite alternate;outline:3px solid #fff;outline-offset:4px}@keyframes guide-glow{from{filter:brightness(1.15);box-shadow:0 0 8px 3px #fff,0 0 18px 7px #168cff}to{filter:brightness(1.7);box-shadow:0 0 15px 6px #fff,0 0 34px 14px #168cff}}
@media(prefers-reduced-motion:reduce){.guide-highlight{animation:none;filter:brightness(1.45);box-shadow:0 0 15px 6px #fff,0 0 30px 12px #168cff}}
.syntris-footer{max-width:1180px;margin:4px auto 28px;padding:0 24px;text-align:center;color:#aaa;font-size:12px}.settings-values input[type="range"]{width:120px;padding:0}.settings-values input[type="checkbox"]{flex:0 0 auto}

.edit-palette[hidden]{display:none}.edit-mode .suggestions{min-height:420px;align-items:center;justify-content:center}.edit-mode .setup-grid,.edit-mode .mode-selector,.edit-mode .target,.edit-mode #placements{display:none}.edit-palette{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;background:#000;border:1px solid #888;box-shadow:inset 1px 1px #444;max-width:100%;flex-wrap:wrap}.edit-palette button{--piece-color:#fff;width:30px;height:30px;min-height:30px;padding:0;background:var(--piece-color);border:1px solid #ddd;box-shadow:inset 1px 1px #fff6,inset -1px -1px #0008}.edit-palette button::before{display:none}.edit-palette button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}.edit-palette [data-edit-piece="I"]{--piece-color:#9fd6e8}.edit-palette [data-edit-piece="O"]{--piece-color:#f5d358}.edit-palette [data-edit-piece="T"]{--piece-color:#d7b0f4}.edit-palette [data-edit-piece="S"]{--piece-color:#9bd091}.edit-palette [data-edit-piece="Z"]{--piece-color:#ee6f7a}.edit-palette [data-edit-piece="J"]{--piece-color:#67a7ff}.edit-palette [data-edit-piece="L"]{--piece-color:#f4b578}.edit-mode #board{cursor:crosshair;touch-action:none}
.next-rail{display:flex;flex-direction:column;gap:10px;min-width:0}.next-rail #edit{width:100%}