:root{color-scheme:dark;font-family:Inter,"Segoe UI","Yu Gothic UI",sans-serif;background:#10171a;color:#edf2f0;--muted:#a8b7b4;--line:#354441;--accent:#b4ef87}*{box-sizing:border-box}body{margin:0}header{padding:26px 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent)}h1{margin:6px 0 0;font-size:30px}h1 span{font-size:12px;color:var(--muted);margin-left:18px;letter-spacing:2px}.badge{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:9px 14px}main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;max-width:1560px;margin:auto;padding:30px 4%}h2{font-size:18px;margin:0 0 10px}p{line-height:1.65;margin:5px 0 16px;color:var(--muted);font-size:14px}.sectionhead{display:flex;justify-content:space-between;align-items:start;gap:12px}.toolbar{display:flex;flex-wrap:wrap;gap:6px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #45564f;border-radius:7px;padding:9px 12px;background:#23322d;color:#eff8f0;font-size:14px}button:hover{background:#344a3e}button:disabled{opacity:.4;cursor:default}button.active{outline:2px solid var(--accent);outline-offset:1px}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d8ffb8;outline-offset:2px}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0 20px}.palette button{text-align:left;padding:12px 8px;background:#1c2925;border-top:3px solid var(--cell);min-width:0}.palette b{display:block;font-size:13px;margin-bottom:6px}.palette small{font-size:12px;display:block;color:var(--muted);line-height:1.7}.boardwrap{background:#132722;border:1px solid #53765a;border-radius:12px;padding:12px;overflow:auto}.board{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:3px;position:relative;min-width:510px}.tile{aspect-ratio:1;border:1px solid #53734c;border-radius:4px;background:#345437;padding:0;color:#d0deba;font-size:12px;position:relative;min-width:0}.tile.lock{background:#253d32;border-color:#355447;color:#7c9474}.tile.void{visibility:hidden;pointer-events:none}.tile.unit{background:color-mix(in srgb,var(--cell) 70%,#15221e);color:#14211b;border-color:var(--cell);font-weight:800;font-size:14px}.tile.adjacent{box-shadow:inset 0 0 0 2px #e3c3ff}.tile.preview{outline:2px solid white;z-index:2}.tile.bad{outline-color:#fa817c}.target{position:absolute;left:39%;top:33%;width:21%;height:32%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#d9f1ae;border:1px dashed #62784a;border-radius:45%;font-size:14px;background:#20372b}.target strong{font-size:20px;letter-spacing:2px}.boardfoot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--muted)}.adjkey{color:#e3c3ff}#message{min-height:24px;margin-top:10px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:18px 0;gap:18px;margin-bottom:28px}.metrics span,.totals span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.metrics strong{font-size:27px;font-variant-numeric:tabular-nums}.result{padding:20px;background:#18231f;border:1px solid var(--line);border-radius:10px}.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 10px}.totals strong{font-size:23px;font-variant-numeric:tabular-nums}#bestTotal,#gain{color:var(--accent)}#chart{display:block;width:100%;height:auto;min-height:160px}.legend{display:flex;gap:24px;font-size:13px;margin-bottom:20px;color:#89b7ce}.legend span+span{color:var(--accent)}aside{display:flex;flex-direction:column;gap:18px}.panel{padding:20px;border:1px solid var(--line);border-radius:10px;background:#1a2521}.panel label{display:block;font-size:14px;margin:14px 0;color:#cad5ce}input[type=number],select{display:block;width:100%;min-width:0;background:#101b16;border:1px solid #46554c;border-radius:6px;color:#eff4ee;padding:10px;margin-top:7px;font-size:15px}input[type=checkbox]{accent-color:var(--accent)}.primary{width:100%;font-weight:bold;color:#182515;background:var(--accent);border-color:var(--accent);padding:13px}.primary:hover{background:#cff8b1}.hint{font-size:13px;margin-top:12px}progress{width:100%;accent-color:var(--accent);margin-top:12px}.tablehead,.cellrow{display:grid;grid-template-columns:48px 1fr 1fr;gap:9px;align-items:center;font-size:13px}.cellrow input{padding:8px}.cellrow b{color:var(--cell)}.panel .check{display:flex;align-items:center;gap:8px;font-size:13px}summary{cursor:pointer;font-weight:bold;font-size:16px}ul{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.7}li{margin:10px 0}footer{color:var(--muted);text-align:center;font-size:12px;padding:24px} [hidden]{display:none!important}@media(max-width:1050px){main{grid-template-columns:minmax(0,1fr);padding:20px}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sectionhead{flex-wrap:wrap}}@media(max-width:600px){header{padding:20px}.badge{display:none}main{padding:14px}.palette{gap:4px}.palette b{font-size:12px}.palette small{font-size:12px}.palette button{padding:9px 4px}.boardwrap{padding:7px}.boardfoot{flex-wrap:wrap}.metrics strong{font-size:21px}.totals strong{font-size:18px}.result{padding:12px}aside{display:flex}.toolbar button{font-size:13px}.target strong{font-size:16px}}

.palette b{margin-bottom:0} @media(max-width:600px){h1{font-size:24px}h1 span{display:block;margin:6px 0 0}}

.palette button{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.palette .cell-illustration{width:36px;height:36px;flex-shrink:0}.palette .art-1{width:50px;height:25px}.palette .art-2{width:16px;height:46px}.cell-art{position:absolute;inset:2px;pointer-events:none;z-index:1}.cell-art svg{display:block;width:100%;height:100%;image-rendering:pixelated}.cell-illustration{overflow:hidden;pointer-events:none;image-rendering:pixelated}.art-0{clip-path:ellipse(46% 47% at 50% 50%)}.art-1{clip-path:inset(3% 1% round 40%)}.art-2{clip-path:inset(1% 4% round 25%)}.art-3{clip-path:polygon(35% 0,65% 0,65% 34%,100% 34%,100% 66%,65% 66%,65% 100%,35% 100%,35% 66%,0 66%,0 34%,35% 34%)}.art-4{clip-path:inset(2% round 14%)}.tile.unit{background:#345437;border-color:#53734c}.tile.preview{outline-offset:-2px;z-index:2;background:transparent}.tile.adjacent{box-shadow:inset 0 0 0 2px #e3c3ff}

.section-outline{display:none;position:absolute;inset:0;pointer-events:none;border:2px solid white;border-radius:6px;z-index:5}.board.editing .section-outline{display:block}.board.editing .cell-art{opacity:.45}

.palette{margin-bottom:12px}.operation-message{margin:0 0 18px;padding:12px 16px;background:#20332a;border:1px solid #688267;border-left:4px solid #b4ef87;border-radius:8px;min-height:86px}.message-label{display:block;color:#b4ef87;font-size:12px;font-weight:700;letter-spacing:.08em}.operation-message #message{margin:5px 0 0;min-height:24px;color:#f0f6ee;font-size:14px;line-height:1.7;overflow-wrap:anywhere}

.boardwrap{background:#0d1324;border-color:#29324b}.tile{background:#191e30;border-color:#2e354a}.tile.lock{background:#101526;border-color:#1d2437}.tile.unit{background:#191e30;border-color:#2e354a}.cell-art{inset:0}.cell-illustration.art-0,.cell-illustration.art-1,.cell-illustration.art-2,.cell-illustration.art-4{clip-path:inset(0 round 3px)}.cell-illustration.art-3{clip-path:polygon(33.333% 0,66.667% 0,66.667% 33.333%,100% 33.333%,100% 66.667%,66.667% 66.667%,66.667% 100%,33.333% 100%,33.333% 66.667%,0 66.667%,0 33.333%,33.333% 33.333%)}.operation-message{min-height:145px}.operation-message #message{white-space:pre-line}.target{background:#151c2c;border-color:#43506a}.palette .art-1{width:60px;height:30px}.palette .art-2{width:18px;height:54px}

.cell-illustration.art-0,.cell-illustration.art-1,.cell-illustration.art-2,.cell-illustration.art-3,.cell-illustration.art-4{clip-path:none}

/* Original board palette; only tiles belonging to one cell join together. */
.boardwrap{background:#132722;border-color:#53765a}
.tile,.tile.unit{background:#345437;border-color:#53734c}
.tile.lock{background:#253d32;border-color:#355447}
.target{background:#20372b;border-color:#62784a}
.tile.unit{aspect-ratio:auto;min-height:0}
.tile.adjacent{box-shadow:none;border-color:#e3c3ff}
.tile.join-left{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.tile.join-right{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-3px}
.tile.join-top{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.tile.join-bottom{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-3px}
.board{grid-template-rows:repeat(10,minmax(0,1fr));aspect-ratio:18 / 10}
.tile.preview{background:#345437}

.tablehead,.cellrow{grid-template-columns:48px minmax(0,1fr)}

.placement-preview{position:absolute;pointer-events:none;z-index:6;background:none}.placement-preview svg{display:block;width:100%;height:100%;overflow:visible}.placement-preview path{fill:none;stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:round}.placement-preview.bad path{stroke:#fa817c}

/* Clip off-board hover outlines without creating a scrolling surface. */
.board{overflow:clip;touch-action:none;user-select:none;-webkit-user-select:none}

#timingResult{white-space:pre-line}

.history-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.history-row small{display:block;color:var(--muted);margin-top:5px}.history-row button{flex-shrink:0}

.cell-art.drag-source{opacity:.2}.placement-preview.moving-preview .cell-illustration{position:absolute;inset:0;width:100%;height:100%;opacity:.9;filter:drop-shadow(0 3px 3px #0008)}.placement-preview .preview-outline{position:relative;z-index:1}.placement-preview.moving-preview.bad .cell-illustration{opacity:.5}

.cell-effects{padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:#1a2922;margin-bottom:12px;min-height:0}.cell-effects p{margin:0;white-space:pre-line;font-size:14px;line-height:1.7}.action-status{font-size:13px;color:var(--muted);min-height:20px;margin:6px 0 12px}.secondary{width:100%;margin:4px 0 10px}.legend .stronk-key{color:#ff9b45}.legend{display:flex;flex-wrap:wrap;gap:12px}.panel h2{margin-bottom:12px}#timingResult{padding-top:8px;border-top:1px solid var(--line)}

#cancel{margin-top:12px}