:root{font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#163451;background:#f7f8fa;font-synthesis:none;--navy:#123454;--teal:#087b77;--line:#e1e7ed;--muted:#6a7b8b}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:white;color:var(--navy);font-size:13px;font-weight:600;transition:background .15s,box-shadow .15s}button:hover{background:#f0f5f8}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #1a9b94;outline-offset:3px}button.primary{background:var(--teal);border-color:var(--teal);color:white}button.primary:hover{background:#076963}.masthead{max-width:1800px;margin:auto;padding:20px 36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--navy);font-size:17px;font-weight:700;letter-spacing:-.3px}.brand-mark{width:42px;height:42px;background:var(--navy);border-radius:13px;color:white;font-size:35px;line-height:37px;text-align:center;letter-spacing:-3px;padding-right:4px}.brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:1.4px;color:var(--muted);font-weight:600}.help-button{border:0;background:transparent;color:var(--muted);font-size:13px;display:flex;gap:9px;align-items:center}main{max-width:1800px;margin:auto;padding:26px 36px 15px}.intro{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:var(--teal);margin:0 0 8px}h1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0;font-weight:700}.intro-note{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.tabs{display:flex;gap:12px;margin-bottom:20px}.tabs button{flex:1;display:flex;align-items:center;text-align:left;gap:13px;padding:15px 17px;border-radius:12px;font-size:14px;min-width:0;box-shadow:0 1px 2px #12345404}.tabs button[aria-selected=true]{border:1.5px solid var(--teal);background:#edf7f5;box-shadow:0 0 0 2px #087b7706}.tab-number{border:1px solid #d8e2e9;color:#7a8d9d;border-radius:8px;padding:8px;font-size:12px;letter-spacing:1px;font-weight:700}.tabs button[aria-selected=true] .tab-number{background:var(--teal);color:white;border-color:var(--teal)}.tabs small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:5px}.tab-count{margin-left:auto;color:var(--muted);font-size:11px;background:#ffffffa8;border-radius:5px;padding:4px 6px;white-space:nowrap}.workspace{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #16345104}.workbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:19px 24px;border-bottom:1px solid var(--line)}h2{font-size:18px;letter-spacing:-.4px;margin:0 0 5px}.workbar p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}.actions{display:flex;gap:8px;flex-shrink:0}.icon-button{font-size:21px;line-height:18px;padding:9px 11px;min-width:36px}.play-area{display:grid;grid-template-columns:258px minmax(0,1fr)}.reserve{padding:20px 16px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:#fbfcfd}.reserve-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.reserve-heading h3{font-size:15px;margin:0}.reserve-heading span{font-size:11px;color:var(--muted)}.search{display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:20px;line-height:1}.search input{border:0;outline:none;min-width:0;width:100%;font-size:12px;color:var(--navy);background:transparent}.filters{display:flex;gap:3px;margin:12px 0}.filters button{font-size:10px;padding:6px 8px;border:0;background:transparent;color:var(--muted)}.filters button[aria-pressed=true]{background:#e7efef;color:#08736e}.reserve-tip{font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 12px}.piece-bank{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;overflow-y:auto;max-height:490px;padding:2px 4px 8px 2px;min-height:180px;scrollbar-width:thin}.piece-card{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 6px 7px;min-height:100px;border-radius:9px;box-shadow:0 2px 5px #16345104;touch-action:none;user-select:none;-webkit-user-select:none}.piece-card img{display:block;width:100%;height:66px;object-fit:contain;pointer-events:none}.piece-card .caption{font-size:9px;line-height:1.3;margin-top:6px;font-weight:500;color:#526c80;max-width:100%;overflow-wrap:anywhere}.piece-card[data-category=text]{grid-column:1/-1;min-height:68px}.piece-card[data-category=text] img{height:48px}.piece-card[data-category=text] .caption{display:none}.piece-card.selected{border-color:var(--teal);box-shadow:0 0 0 2px #0a8e862f;background:#edf7f5}.bank-empty{grid-column:1/-1;align-self:center;text-align:center;font-size:12px;line-height:1.6;color:var(--muted);padding:24px 0}.reserve-bottom{padding-top:16px;margin-top:auto}.reserve-bottom>span{font-size:11px}.progress-track{height:4px;border-radius:4px;background:#e7edf0;overflow:hidden;margin:9px 0}.progress-track>span{display:block;height:100%;width:0;background:var(--teal);transition:width .3s}.reserve-bottom small{font-size:9px;color:var(--muted)}.board-area{min-width:0;padding:14px 20px 16px;display:flex;flex-direction:column}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px}.toggle{font-size:11px;display:flex;align-items:center;gap:8px;color:#536d82;cursor:pointer}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.switch{display:inline-flex;align-items:center;width:28px;height:16px;border-radius:20px;background:#b8c5cd;padding:2px}.switch:before{content:"";width:12px;height:12px;background:white;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px #0002}.toggle input:checked+.switch{background:var(--teal)}.toggle input:checked+.switch:before{transform:translateX(12px)}.toggle input:focus-visible+.switch{outline:3px solid var(--teal);outline-offset:3px}.board-format{color:#95a1ac;font-size:9px;letter-spacing:1.5px}.board-toolbar .icon-button{border:0;font-size:24px;padding:4px 7px}.board-shell{border:1px solid #dde5ec;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px #16345105;background:white}.board{position:relative;width:100%;aspect-ratio:4961/3508;overflow:hidden;user-select:none;-webkit-user-select:none}.board>img{display:block;width:100%;height:100%;pointer-events:none}.board #targets,.board #placed{position:absolute;inset:0;pointer-events:none}.target{position:absolute;border:0;padding:0;margin:0;border-radius:6px;background:transparent;color:transparent;opacity:0;pointer-events:none;font-size:9px}.board.has-selection .target{pointer-events:auto;opacity:1;border:1px dashed #008d8430}.board.has-selection .target:hover,.target:focus-visible{background:#008d841a}.placed-piece{position:absolute;display:block;border:0;background:transparent;padding:0;margin:0;border-radius:4px;touch-action:none;cursor:grab;pointer-events:auto;min-width:0}.placed-piece:hover{background:transparent;filter:drop-shadow(0 0 2px #0b75677f)}.placed-piece img{display:block;width:100%;height:100%;pointer-events:none}.placed-piece.selected{outline:2px solid var(--teal);outline-offset:2px;z-index:500!important}.placed-piece.correct{outline:2px solid #2b9d60;outline-offset:1px}.placed-piece.incorrect{outline:2px solid #e59828;outline-offset:1px}.placed-piece.correct:after,.placed-piece.incorrect:after{position:absolute;right:-5px;top:-5px;border-radius:50%;width:16px;height:16px;font-size:10px;line-height:16px;text-align:center;color:white;background:#2b9d60;content:"✓"}.placed-piece.incorrect:after{background:#e59828;content:"!"}.board-status{display:flex;align-items:center;gap:8px;min-height:42px;margin-top:8px}.status-dot{width:6px;height:6px;flex-shrink:0;background:var(--teal);border-radius:50%}.board-status p{font-size:11px;line-height:1.5;color:#60768a;margin:0}.board-status button{font-size:10px;padding:5px 8px;margin-left:auto;flex-shrink:0}.oral{border-top:1px solid #edf0f4;padding-top:12px;color:var(--muted);font-size:11px}.oral summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:600;color:#526b7f}.oral summary::-webkit-details-marker{display:none}.oral ol{padding-left:20px;line-height:1.8;color:#355571}.oral p{font-size:10px;line-height:1.6}footer{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#8192a0;margin:17px 4px 0}.drag-ghost{position:fixed;pointer-events:none;z-index:10000;opacity:.9;filter:drop-shadow(0 5px 6px #16345133);user-select:none}.drag-ghost img{display:block;width:100%;height:100%}body.is-dragging{cursor:grabbing}dialog{border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--navy);box-shadow:0 20px 90px #12345433;width:min(1160px,94vw);max-height:94vh}dialog::backdrop{background:#102d4bd0;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.dialog-heading .icon-button{border:0}.dialog-heading h2{margin:0}.correction-dialog>img{display:block;width:100%;max-height:74vh;object-fit:contain}.dialog-note{font-size:12px;color:var(--muted);text-align:center;margin-bottom:0}.help-dialog{width:min(600px,92vw)}.help-dialog ol{padding-left:22px;font-size:14px;line-height:1.65}.help-dialog li{margin:12px 0}.help-dialog p{font-size:12px;color:var(--muted);line-height:1.7}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.board-area:fullscreen{background:white;padding:20px;overflow:auto;align-items:center}.board-area:fullscreen>*{width:100%;max-width:calc((100vh - 150px)*1.4142)}.board-area:fullscreen .oral{display:none}.board-area:fullscreen .board-shell{flex-shrink:0}.board-area:fullscreen .board-status{width:100%}.board-area:fullscreen .board-format{display:none}
@media(min-width:1600px){.play-area{grid-template-columns:290px minmax(0,1fr)}.piece-bank{max-height:660px}.piece-card img{height:82px}.piece-card{min-height:120px}.piece-card .caption{font-size:10px}.reserve-tip{font-size:11px}}
@media(max-width:1100px){main{padding:22px 20px 15px}.masthead{padding:17px 20px}.play-area{grid-template-columns:220px minmax(0,1fr)}.board-area{padding:12px}.workbar{padding:16px}.tabs button{font-size:12px;gap:9px;padding:12px}.tab-count{display:none}.tab-number{padding:7px}.piece-bank{max-height:390px}.reserve{padding:16px 12px}.workbar p{max-width:380px}.actions button{font-size:11px;padding:9px}.board-status{flex-wrap:wrap}.board-status button{margin-left:14px}.intro-note{font-size:12px}}
@media(max-width:740px){main{padding:18px 12px 14px}.masthead{padding:13px 15px}.brand{font-size:15px}.brand small{font-size:7px;letter-spacing:1px}.brand-mark{width:35px;height:35px;font-size:29px;line-height:32px}.help-button{padding:6px}.help-button span{display:none}.intro{margin-bottom:19px}.intro-note{display:none}h1{font-size:25px}.eyebrow{font-size:9px}.tabs{gap:5px;margin-bottom:12px}.tabs button{flex-direction:column;align-items:flex-start;gap:7px;font-size:11px;padding:10px 9px;line-height:1.4;border-radius:9px}.tab-number{padding:2px 5px;font-size:9px}.tabs small{font-size:8px;margin-top:3px}.workbar{align-items:flex-start;flex-direction:column;gap:10px;padding:14px}.workbar h2{font-size:16px}.workbar p{font-size:11px}.actions{width:100%}.actions .icon-button{margin-left:auto}.play-area{display:flex;flex-direction:column-reverse}.board-area{padding:10px 8px}.board-format{display:none}.board-toolbar{padding-bottom:9px}.board-status p{font-size:10px}.reserve{border:0;border-top:1px solid var(--line);padding:14px 12px}.reserve-heading{margin-bottom:10px}.search{max-width:360px}.filters{margin:10px 0}.reserve-tip{margin-bottom:10px}.piece-bank{grid-template-columns:repeat(4,1fr);max-height:300px;min-height:100px}.piece-card{min-height:84px;padding:6px 4px}.piece-card img{height:54px}.piece-card .caption{font-size:8px}.piece-card[data-category=text]{grid-column:span 2}.piece-card[data-category=text] img{height:44px}.reserve-bottom{padding-top:10px}footer{flex-direction:column;gap:6px;font-size:8px}.oral{font-size:10px}.dialog-heading h2{font-size:15px}.help-dialog ol{font-size:12px}.board-area:fullscreen{padding:10px}.board-area:fullscreen>*{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(pointer:coarse){.piece-card{touch-action:none;-webkit-touch-callout:none}.piece-bank{touch-action:pan-y}}
.board-area{align-self:start;width:100%}
.board-shell{align-self:center}
@media(min-width:900px) and (max-height:1000px){
 .masthead{padding:10px 24px}.brand{font-size:15px}.brand-mark{width:34px;height:34px;line-height:31px;font-size:29px}.brand small{font-size:8px;margin-top:4px}
 main{padding:12px 24px 10px}.intro{display:none}.tabs{margin-bottom:12px;gap:10px}.tabs button{padding:10px 13px;font-size:12px}.tabs small{font-size:10px;margin-top:3px}.tab-number{padding:6px}
 .workbar{padding:12px 18px}.workbar h2{font-size:16px}.workbar p{font-size:11px}.actions button{padding:8px 12px;font-size:12px}
 .board-area{padding:10px 14px 12px}.board-toolbar{padding-bottom:9px}.board-status{min-height:30px;margin-top:5px}.oral{padding-top:8px}footer{margin-top:10px;font-size:8px}
 .reserve{padding-top:16px;padding-bottom:12px}.reserve-heading{margin-bottom:10px}.reserve-tip{margin-bottom:9px}.reserve-bottom{padding-top:10px}
}
.workspace:is(:fullscreen,.expanded){height:100dvh;width:100dvw;border:0;border-radius:0;background:white;display:flex;flex-direction:column;overflow:hidden}
.workspace:is(:fullscreen,.expanded) .workbar{padding:10px 16px;flex-shrink:0}.workspace:is(:fullscreen,.expanded) .play-area{flex:1;min-height:0}.workspace:is(:fullscreen,.expanded) .reserve{min-height:0}
.workspace:is(:fullscreen,.expanded) .board-area{min-height:0;padding:10px 16px}.workspace:is(:fullscreen,.expanded) .oral{display:none}.workspace:is(:fullscreen,.expanded) .board-status{min-height:30px;margin-top:5px}
.workspace.expanded{position:fixed;inset:0;z-index:2000}.expanded-view{overflow:hidden}