/* Original game art, composed in CSS without modifying the supplied PNGs. */
:root{color-scheme:light;--bg:#f2f5e9;--surface:#fffef9;--deep:#f3f8f3;--line:#d8e3d5;--text:#263e35;--muted:#647569;--mint:#32804a;--orange:#a46414;--purple:#6a61a2}
body{background:radial-gradient(ellipse at 50% 0,#e2f3cb 0,transparent 65%),var(--bg)}
.topbar{background:#fffef9e8;border-bottom-color:#d9e6d1;height:76px}
.brand-mark{object-fit:contain;background:transparent;border-radius:0;image-rendering:pixelated;width:36px;height:36px}
.version{color:#4c7942;border-color:#c6dcae;background:#edf5dc}.local-note span{color:#458856}
main{max-width:1490px;padding:32px 32px 20px}.workspace{grid-template-columns:minmax(295px,1fr) minmax(340px,1.13fr) minmax(290px,1fr);gap:22px}
.workspace-heading{margin-bottom:24px}h1{font-size:32px}.eyebrow{font-size:14px;color:#527b36}
.panel{border-radius:20px;padding:24px;box-shadow:0 4px 16px #35593e05}.panel-title h2{font-size:18px;font-weight:700}.section-number{color:#7b955d;font-size:13px}
.muted,.small,.check-label,.micro-copy{font-size:14px}.badge{background:#fffdf7;font-size:14px;border-color:#d4dfca}.badge.live{color:#287348;border-color:#95bc9b}
.capture-surface{background:#edf3e8;border:1px dashed #adc3a1;min-height:184px}.screen-icon{color:#73966a}.capture-surface h3{font-size:15px}.capture-surface p{font-size:14px}
.button{background:#f1f6e9;border-color:#c3d5b6;color:#36533c;font-size:15px;border-radius:10px}.button:hover{background:#e4efda}.button.primary{background:#477f3d;color:white;border-color:#477f3d;box-shadow:0 3px 0 #315e2a}.button.primary:hover{background:#386d30}
.capture-color-info{background:#f8f9f3;padding:12px}.capture-color-heading span{font-size:12px}.capture-color-info .muted{font-size:13px}
.divider{margin:20px 0}.pieces{gap:10px}.piece-card{padding:10px 8px;background:#f6faef;border-color:#dbe6cd;border-radius:13px}.piece-head{font-size:13px;color:#4d6948;font-weight:600}.piece-preview{height:76px;display:grid;place-items:center}.resource-shape{position:relative;display:block;width:66px;height:66px;flex-shrink:0}.resource-shape img{position:absolute;left:50%;top:50%;height:auto;image-rendering:pixelated}.shape-placeholder{font-size:27px;color:#b7c9af}
.piece-caption{font-size:13px;color:#617553}.piece-editor{font-size:12px;color:#5a7451;text-align:center}.piece-editor summary{cursor:pointer;padding:5px 0}.piece-editor[open] summary{margin-bottom:5px}.piece-grid{gap:2px}.piece-cell{background:#e0e9d7;border:1px solid #ceddc4;min-height:14px}.piece-cell.on{background:transparent url('./assets/moamoa/MoaMoa.board.canvas_blue.png') center/100% 100%;border:0;box-shadow:none}.piece-size{font-size:12px}.piece-size select{background:#fffef9}.piece-card[data-active=false]{opacity:.5}
.board-panel{background:linear-gradient(180deg,#f5faeb,#f9fff8 60%,#f1faf1)}
.game-title-art{width:100%;aspect-ratio:485/113;margin:9px auto 0;background:url('./assets/moamoa/MoaMoa.backgrnd.png') center top/100% auto no-repeat}
.board-toolbar{margin:14px 0 10px;gap:8px}.column-labels,.row-labels{color:#678580;font-size:12px}.column-labels{margin-left:22px;margin-bottom:5px}.board-row{gap:7px}
.board{gap:0;padding:0;border:0;border-radius:0;overflow:visible;position:relative;background-image:url('./assets/moamoa/MoaMoa.backgrnd.png');background-size:186.5384615% 160.8173077%;background-position:21.7777778% 63.6363636%;box-shadow:0 0 0 4px #70d4d2,0 0 0 7px #c6f1e6;isolation:isolate}
.cell{background:transparent;border:0;border-radius:0;color:#423848;font-size:14px;box-shadow:none}.cell.occupied{background:transparent url('./assets/moamoa/MoaMoa.board.canvas_blue.png') center/108% 108% no-repeat;box-shadow:none}
.cell.recommended{background:transparent url('./assets/moamoa/MoaMoa.board.canvas_pink.png') center/108% 108% no-repeat;box-shadow:inset 0 0 0 1px #fff8;color:#493148;text-shadow:0 1px 1px #fff;z-index:1}.cell.recommended::after{content:'';position:absolute;inset:3px;border:1px dashed #633965;border-radius:2px;pointer-events:none}.cell.uncertain{color:#713e0b;background:#ffedb378;outline:2px solid #b67621;outline-offset:-3px}.board.editing .cell:hover{background-color:#ffffff88;outline:2px solid #fff;outline-offset:-2px}
.legend{font-size:13px;margin-top:20px;gap:18px}.legend i{width:16px;height:16px;background-size:100% 100%;border-radius:0}.legend-occupied{background-image:url('./assets/moamoa/MoaMoa.board.canvas_blue.png')}.legend-recommend{background-image:url('./assets/moamoa/MoaMoa.board.canvas_pink.png')}.board-color-note{text-align:center;font-size:12px;color:#668075;margin-top:8px}#board-caption{font-size:14px;margin-top:10px}
.intro{font-size:16px;margin:19px 0}.mini-label{font-size:12px;background:#f3f7ec;border-color:#dce6d0}.result-empty{color:#798774}.result-empty>span{color:#a5bc94}.result-summary{background:#f0f6e8;border-radius:12px;padding:14px 12px;gap:8px}.result-summary strong{font-size:26px;color:#3c673b}.result-summary span{font-size:12px}.step{background:#fffef9;border-color:#dbe5d2;padding:14px 10px;gap:10px}.step.active{background:#f4f9e9;border-color:#7d9f55;box-shadow:inset 3px 0 #7d9f55}.step-index{color:#527339;border-color:#c2d5a7;background:#e8f0d8;width:27px;height:27px}.step strong{font-weight:600;font-size:14px}.step p{font-size:13px}.step .resource-shape{width:42px;height:42px;margin-left:auto}.result-note{font-size:13px}.settings-body{font-size:14px}.rules-link{font-size:13px}
select{background:#fffef9;color:var(--text)}.notice{background:#fff7e5;color:#80602c;border-color:#e7cda1}footer{color:#74816a;font-size:13px}.help-list b{color:#397d46}dialog{border-color:#cbdcbd;box-shadow:0 20px 70px #20321c33}
@media(min-width:1500px){main{padding-top:36px}}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(280px,1fr) minmax(330px,1.1fr)}main{padding:26px 20px}.recommendation-panel{grid-column:1/-1}.board-panel{max-width:520px;justify-self:center;width:100%}}
@media(max-width:650px){.workspace{grid-template-columns:minmax(0,1fr);gap:18px}.recommendation-panel{grid-column:auto}.topbar{height:68px;padding:0 16px}.brand{font-size:18px}.brand-mark{width:30px;height:30px}.version{font-size:10px}main{padding:24px 14px}.panel{padding:20px}.workspace-heading{gap:8px}h1{font-size:27px}.workspace-heading .eyebrow{font-size:12px}.workspace-heading .badge{font-size:12px;white-space:nowrap}.board-panel{max-width:460px}.piece-preview{height:82px}.piece-grid{max-width:100%;}.piece-cell{min-height:17px}.local-note{display:none}}
/* The complete original board is the central UI, with live cells in its native coordinates. */
.workspace{grid-template-columns:minmax(250px,1fr) minmax(400px,485px) minmax(250px,1fr);gap:28px}
.panel,.board-panel{border:0;border-radius:0;box-shadow:none;background:transparent;padding:12px 0}
.source-panel,.recommendation-panel{padding-top:20px}.board-panel>.panel-title,.board-toolbar,.board-panel>.source-bottom,.tray-editor-panel{margin-left:22px;margin-right:22px}
.game-stage{width:100%;position:relative;aspect-ratio:485/669;isolation:isolate;margin-top:-10px}.game-frame{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.game-stage #board-wrap{position:absolute;left:10.1030928%;top:24.0657698%;width:53.6082474%;height:62.1823617%}.game-stage .column-labels,.game-stage .row-labels{display:none}.game-stage .board-row{display:block;width:100%;height:100%}.game-stage .board{width:100%;height:100%;background:none;box-shadow:none;gap:0;padding:0;border:0}
.game-score-note{position:absolute;left:10.5%;top:17.1%;width:79.2%;height:4.2%;border-radius:12px;background:#87603a;color:#fff1d3;display:grid;place-items:center;font-size:clamp(9px,1vw,12px);letter-spacing:-.03em;text-align:center}
#game-tray{position:absolute;left:66.4%;top:27.5%;width:25.4%;height:33.1%;display:grid;grid-template-rows:repeat(3,1fr);gap:0}.game-slot{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}.game-slot-label{font-size:11px;color:#2d6474;font-weight:600}.game-slot .resource-shape{width:50px;height:50px}.game-slot[data-active=false]{opacity:.45}.game-slot .shape-placeholder{color:#3d91a3}
.game-assistant-note{position:absolute;left:66.4%;top:61.4%;width:25.4%;height:23%;border-radius:12px;background:#9af3ef;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:12px;text-align:center;color:#276a76;font-size:13px;line-height:1.8}.game-assistant-note strong{font-size:14px}.game-assistant-note span{font-size:12px}
.board-panel .legend{margin-top:0}.tray-editor-panel{margin-top:16px;border-top:1px solid #d1dfc5;padding-top:14px;font-size:14px;color:#4c6849}.tray-editor-panel>summary{cursor:pointer}.piece-card{border:0;background:transparent;border-radius:0;padding:6px}.piece-preview{height:68px}.pieces{gap:12px}.board-panel .source-bottom{border-top:1px solid #d1dfc5;padding-top:8px}.board-panel #board-caption{min-height:0}.source-panel .capture-surface{min-height:210px}.recommendation-panel .step{background:transparent;border-radius:0;border-width:0 0 1px;padding:18px 4px}.recommendation-panel .step.active{background:#e6f0d8;box-shadow:inset 3px 0 #7d9f55;padding-left:10px;border-radius:4px}.result-summary{background:transparent;border-radius:0;border-top:1px solid #d1dfc5;border-bottom:1px solid #d1dfc5;padding:15px 0}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(260px,1fr) minmax(390px,485px)}.recommendation-panel{grid-column:1/-1}.board-panel{max-width:485px}.game-score-note{font-size:11px}}
@media(max-width:650px){.workspace{grid-template-columns:minmax(0,1fr);gap:28px}.recommendation-panel{grid-column:auto}.panel{padding:0}.game-stage{margin-top:-5px}.board-panel>.panel-title,.board-toolbar,.board-panel>.source-bottom,.tray-editor-panel{margin-left:6px;margin-right:6px}.game-slot .resource-shape{width:40px;height:40px}.game-slot-label{font-size:10px}.game-assistant-note{gap:5px}.game-assistant-note strong{font-size:12px}.game-assistant-note span{font-size:10px}.game-score-note{font-size:9px}.cell{font-size:11px}}
/* Minimal working controls; the game art carries the visual hierarchy. */
.topbar{height:64px}.topbar>.badge{margin-left:auto}.workspace{align-items:start}main{padding-top:22px}.recommendation-panel #solve-button{margin-top:20px}.source-panel .capture-surface{margin-top:20px;min-height:190px}.source-panel .screen-icon{margin:0;color:#7b9a6d}.board-toolbar{margin-bottom:2px}.result-empty{min-height:90px}#board-caption{min-height:0}.game-stage{margin-top:-5px}.legend{font-size:12px}.recommendation-panel .divider{margin-top:18px}
.recommendation-panel .tray-editor-panel{margin:18px 0 22px;padding:0;border:0}.recommendation-panel .tray-editor-panel h3{font-size:13px;color:var(--muted);font-weight:500}.recommendation-panel .pieces{margin-top:8px}.recommendation-panel #solve-button{margin-top:0}.recommendation-panel .piece-preview{height:62px}.recommendation-panel .resource-shape{width:55px;height:55px}.recommendation-panel .step .resource-shape{width:42px;height:42px}
/* One row per piece: select its recommended placement. */
.recommendation-panel .pieces{display:flex;flex-direction:column;gap:0;margin:0}.recommendation-panel .piece-card{display:grid;grid-template-columns:78px 1fr;grid-template-areas:'preview head' 'preview caption';align-items:center;column-gap:14px;row-gap:4px;padding:14px 10px;border-bottom:1px solid #d1dfc5;opacity:1}.recommendation-panel .piece-card.selected{background:#e5efd8;box-shadow:inset 3px 0 #7d9f55}.recommendation-panel .piece-preview{grid-area:preview;background:transparent;border:0;height:auto;min-height:74px;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:#4d6b38}.recommendation-panel .piece-preview:disabled{opacity:1;cursor:default}.piece-order{font-size:12px;font-weight:700;min-height:18px}.piece-head{grid-area:head;margin:0;gap:12px;justify-content:flex-start}.piece-caption{grid-area:caption;text-align:left;margin:0}.piece-editor{grid-area:edit;min-width:48px}.piece-size{grid-area:size;margin:0}.piece-card[data-active=false] .resource-shape{opacity:.4}.piece-editor[open]{grid-column:1/-1;grid-row:3;width:100%;padding:8px 0}.piece-editor[open] .piece-grid{width:150px;margin:auto}.piece-size[open]{grid-column:1/-1;grid-row:4;display:flex;gap:12px;align-items:center}.piece-size[open] label{flex:1}.piece-size[open] summary{min-width:48px}.recommendation-panel .piece-editor summary,.recommendation-panel .piece-size summary{padding:5px 0}.recommendation-panel .tray-editor-panel{margin-bottom:20px}
.ability-cell::before{content:'';position:absolute;left:50%;top:50%;width:207.6923%;height:230.7692%;transform:translate(-50%,-55%);background:var(--ability-image) center/100% 100% no-repeat;pointer-events:none;z-index:2;image-rendering:pixelated}.ability-stock{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}.ability-stock label{display:flex;align-items:center;gap:5px;font-size:12px;flex:1}.ability-stock img,.ability-step img,.reroll-hint img{width:38px;height:42px;object-fit:contain;image-rendering:pixelated}.ability-stock input{width:44px;border:1px solid #bfd0b1;border-radius:5px;padding:5px;background:#fffef9;color:var(--text)}.ability-step,.reroll-hint{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-bottom:1px solid #d1dfc5;background:transparent;font-size:13px}.ability-step.selected{background:#e5efd8;box-shadow:inset 3px 0 #7d9f55}#ability-actions{margin-top:12px}
.spawn-in{position:absolute;left:74%;top:68.7%;width:10%;height:3.5%;padding:0;border:0;background:transparent;color:#2295a9;text-align:center;font-size:15px}.stock-total{position:absolute;left:67%;top:74%;width:25%;text-align:center;color:#2295a9;font-size:15px;line-height:1.1}
#ability-actions{display:contents}.ability-step{min-height:86px;padding:14px 10px}.ability-step img{width:55px;height:60px;margin-right:14px}

.source-panel .capture-surface{margin-top:0}.ability-stock{margin-top:0}.board-toolbar{margin-top:0}.resource-shape img{max-width:none;max-height:none}
.recommendation-panel .piece-card{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.recommendation-panel .piece-card:disabled{cursor:default;opacity:1}
.recommendation-panel .piece-card:not(:disabled):hover{background:#e5efd8}
.recommendation-panel .piece-card:focus-visible{outline:2px solid #477f3d;outline-offset:2px}
/* Keep the header content on the same centered gutter as the workspace. */
.topbar{padding-inline:max(32px,calc((100% - 1490px)/2 + 32px))}
@media(max-width:1100px){.topbar{padding-inline:20px}}
@media(max-width:650px){.topbar{padding-inline:14px}}
.game-stage{container-type:inline-size}
.game-stat{position:absolute;top:18.05%;height:2.7%;display:flex;align-items:center;justify-content:flex-end;color:#fff1c3;font:bold 2.5cqw/1 monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-score{left:23%;width:13.4%}.stat-lines{left:54.4%;width:8%}.stat-best{left:76.5%;width:12.8%}
.spawn-in{left:66.4%;top:68%;width:25.4%;height:2.6%;display:flex;align-items:center;justify-content:center;font:bold 3cqw/1 monospace}
/* The original PNG already contains the slash. Place only its two numbers. */
.stock-total{left:75.4%;top:73.5%;width:7.6%;height:2.6%;display:flex;align-items:center;justify-content:space-between;font:bold 3cqw/1 monospace}
.stock-total>span{width:2.5cqw;text-align:center}