.alp-page { width:100%; min-width:0; max-width:1120px; margin:auto; padding:8px 0 20px; }
.alp-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:8px; align-items:end; max-width:570px; margin:auto; }
.alp-controls label,.alp-options label { display:flex; flex-direction:column; gap:3px; font-size:12px; min-width:0; }
.alp-controls select,.alp-controls .btn { min-width:0; width:100%; min-height:44px; }
.alp-controls #alpReset { padding:4px; font-size:23px; }
.alp-status { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 8px; }
#alpProgress { color:var(--accent); font-size:14px; font-weight:800; }
.alp-help { display:flex; gap:6px; }
.alp-help .btn { padding:5px 10px; min-height:44px; }
.alp-workspace { min-width:0; display:grid; grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr); gap:16px; align-items:start; }
.alp-board { background:#fff5df; border:1px solid #516981; border-radius:22px; overflow:hidden; }
#alpStage { display:block; width:100%; height:auto; aspect-ratio:760/540; touch-action:none; }
.alp-silhouette { fill:#d5dee0; stroke:#637989; stroke-width:5px; stroke-linejoin:round; }
.alp-slot { cursor:pointer; outline:none; }
.alp-slot-fill { fill-opacity:0; stroke:transparent; stroke-width:3px; }
#alpStage[data-level="normal"] .alp-slot-fill { fill-opacity:.06; stroke:#9aaab2; }
.alp-slot-letter { opacity:0; fill:#294b60; font:900 36px Verdana,sans-serif; pointer-events:none; }
.show-guide .alp-slot-fill { fill-opacity:.32!important; stroke:#6f8a97!important; }
.show-guide .alp-slot-letter { opacity:.65; }
.alp-slot.is-placed { pointer-events:none; }
.alp-slot.is-placed .alp-slot-letter { opacity:0; }
.alp-slot.is-hinted .alp-slot-fill,.alp-slot:focus-visible .alp-slot-fill { fill-opacity:.65!important; stroke:#a76a00!important; stroke-width:8px; }
#alpStage.drop-ready { box-shadow:inset 0 0 0 4px #42bca9; }
.alp-inventory { min-width:0; }
.alp-inventory h2 { font-size:14px; line-height:1.35; margin:0 0 6px; }
.alp-bank { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:72px; gap:6px; max-height:420px; overflow:auto; padding:4px; background:#152536; border:1px solid #4d6278; border-radius:14px; touch-action:pan-y; overscroll-behavior:contain; }
.alp-piece { position:relative; border:2px solid #647e94; border-radius:13px; background:#fffaf0; padding:4px; cursor:grab; min-height:44px; min-width:44px; touch-action:pan-y; color:#153e50; }
.alp-piece svg { display:block; width:100%; height:100%; pointer-events:none; }
.alp-piece-letter { position:absolute; left:3px; top:2px; display:grid; place-items:center; min-width:27px; height:29px; padding:1px; border-radius:7px; background:#fffef7e6; font:900 23px Verdana,sans-serif; pointer-events:none; }
.alp-piece[aria-pressed="true"] { border-color:#ffce5b; box-shadow:0 0 0 2px #ffce5b; }
.alp-piece:focus-visible { outline:3px solid #ffce5b; outline-offset:2px; }
.alp-piece:disabled { opacity:.27; cursor:default; }
.alp-bank-note { color:var(--muted); font-size:11px; line-height:1.4; margin:7px 0 0; }
.alp-feedback { min-height:40px; margin:8px 0 0; text-align:center; line-height:1.4; font-size:14px; }
.alp-feedback.error { color:#ffabab; }.alp-feedback.success,.alp-feedback.victory { color:#89e3cc; font-weight:800; }
.alp-drag-ghost { position:fixed; width:110px; height:100px; transform:translate(-50%,-50%); pointer-events:none; z-index:1000; filter:drop-shadow(0 4px 5px #0006); }
.alp-drag-ghost svg { width:100%; height:100%; }
.alp-placed-piece { animation:alp-place .22s ease-out; transform-box:fill-box; transform-origin:center; }
@keyframes alp-place { from { opacity:.5; transform:scale(.92); } to { opacity:1; transform:none; } }
.alp-options { border:1px solid #4d6278; border-radius:12px; margin-top:8px; padding:8px 10px; }
.alp-options summary { cursor:pointer; min-height:24px; font-size:13px; font-weight:700; }
.alp-options-content { display:flex; flex-wrap:wrap; gap:12px; padding-top:10px; }
.alp-options label { flex:1 1 160px; }.alp-options select { min-height:44px; }
@media(max-width:899px) {
 .alp-workspace { display:block; }
 .alp-status { margin-top:8px; }
 #alpProgress { font-size:12px; }
 .alp-help .btn { font-size:12px; padding:4px 8px; }
 .alp-inventory { margin-top:8px; }
 .alp-bank { grid-template-columns:none; grid-template-rows:repeat(2,64px); grid-auto-flow:column; grid-auto-columns:64px; height:146px; max-height:none; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; }
 .alp-piece { touch-action:pan-x; }
 .alp-inventory h2 { font-size:12px; }
 .alp-feedback { font-size:13px; min-height:36px; }
}
@media(prefers-reduced-motion:reduce) { .alp-placed-piece { animation:none; } }