.chocolate-game{--ink:#12324b;--teal:#006b77;--cocoa:#694632;color:var(--ink);border:1px solid #cbdade;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 14px 45px #18304408}.stage-note{display:flex;justify-content:space-between;gap:12px;padding:10px 15px;margin-bottom:18px;background:#fff6db;border:1px solid #ead5a4;border-radius:8px;font-size:12px;color:#674b17}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 30px 14px}.chocolate-game .eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:bold;color:var(--teal);margin:0 0 8px}.collection-heading h2{font-size:25px;margin:0 0 7px;line-height:1.25}.collection-heading p:last-child{margin:0;color:#61717b;font-size:14px}.progress{flex:none;text-align:center;background:#f1f7f6;border:1px solid #d4e2e2;border-radius:14px;padding:12px 18px}.progress strong{display:block;color:var(--teal);font-size:24px}.progress span{font-size:11px}.level-picker{display:flex;gap:8px;padding:4px 30px 20px;flex-wrap:wrap}.chocolate-game button{font:inherit;cursor:pointer;touch-action:manipulation;color:var(--ink);background:white;border:1px solid #b8cdd0;border-radius:8px;min-height:44px;transition:background .15s,border-color .15s}.chocolate-game button:hover:not(:disabled){background:#edf7f5;border-color:#006b77}.chocolate-game button:focus-visible,.chocolate-game summary:focus-visible{outline:3px solid #ad5d16;outline-offset:3px}.chocolate-game button:disabled{cursor:default;color:#778894;background:#f3f6f7;border-color:#dce5e8;opacity:.7}.level-picker button{padding:8px 15px;font-size:13px}.level-picker button[aria-current=true]{color:white;background:var(--ink)}.play-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-top:1px solid #dce3e4}.scene-column{background:#f7f4ee;padding:20px;min-width:0}.workbench{position:relative;aspect-ratio:1;background:#654333 url('assets/workbench.webp') center/cover;border-radius:15px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 30px #1d100850}.box-frame{position:relative;width:82%;padding:10px;background:#124a50;border:4px solid #c7a57a;box-shadow:0 12px 20px #180b0866,inset 0 0 0 2px #f2d5aa;border-radius:9px}.board{display:grid;gap:3px;background:#dac3a2;border:2px solid #79573e;padding:5px;border-radius:3px}.chocolate-game .cell{position:relative;aspect-ratio:1;min-height:0;min-width:0;padding:0;border-radius:3px;border:1px solid #c8b392;background:linear-gradient(135deg,#fcf1d9,#e8d6b6);overflow:visible;isolation:isolate}.cell::after{content:'';position:absolute;inset:9%;border:1px solid #c3ab88;border-radius:50%;opacity:.35;z-index:-1}.cell img{position:absolute;width:90%;height:90%;object-fit:contain;inset:5%;filter:drop-shadow(0 3px 2px #3b1b1140);pointer-events:none}.cell .cell-number{position:absolute;left:3px;top:1px;font-size:9px;color:#785e44;z-index:2}.cell .tray-mark{position:absolute;right:3px;bottom:2px;font-size:10px;font-weight:bold;line-height:15px;min-width:15px;background:#fff8e9;color:#173849;border-radius:3px;box-shadow:0 0 0 1px var(--piece-color);z-index:3}.chocolate-game .cell.occupied{background:#fff0ce;border:2px solid var(--piece-color)}.chocolate-game .cell.ghost{background:#c6ebe2!important;outline:2px dashed #006b77;outline-offset:-4px;z-index:4}.cell.ghost img{opacity:.68}.chocolate-game .cell.invalid{background:#f8d7c7!important;outline-color:#a13928}.cell.invalid img{opacity:.45}.chocolate-game .cell.anchor{box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #173849;z-index:5}.cell.anchor::before{content:'⌜';font-size:20px;position:absolute;top:-3px;left:0;z-index:6;line-height:1;color:#103c46;background:#fff9}.bench-label{position:absolute;bottom:3%;color:#fff1d8;font-size:9px;letter-spacing:1.6px;text-shadow:0 1px 3px #000}.gift-wrap{position:absolute;inset:-6%;z-index:8;pointer-events:none;display:grid;place-items:center;animation:wrap-in .6s ease-out}.gift-wrap[hidden]{display:none}.gift-wrap img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 15px 12px #1b160955)}.gift-wrap span{position:absolute;bottom:10%;background:#fff4d9;color:#25474c;padding:6px 12px;border-radius:30px;font-size:12px;box-shadow:0 3px 10px #2e221833}.box-readout{display:flex;justify-content:space-between;gap:12px;margin:17px 0 8px;font-size:13px}.box-readout span{color:#637780}.board-help{font-size:12px;color:#61717b;margin:8px 0 14px;line-height:1.6}.text-map{font-size:12px}.text-map p{font-size:12px}.chocolate-game summary{cursor:pointer;color:var(--teal);font-size:13px;min-height:30px}.shelf-column{padding:24px;min-width:0}.shelf-title{display:flex;align-items:baseline;gap:10px;justify-content:space-between}.shelf-title h3{font-size:19px;margin:0}.shelf-title>span{font-size:11px;color:#687e87;white-space:nowrap}.microcopy{font-size:13px;color:#61717b;margin:7px 0 15px}.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}.chocolate-game .tray{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 7px;background:#fbf7ef;border-color:#ddd0bb}.tray .tray-label{font-size:12px;font-weight:bold}.tray .tray-status{font-size:10px;color:#697b82}.chocolate-game .tray[aria-pressed=true]{outline:2px solid var(--teal);outline-offset:1px;background:#e7f3ef}.chocolate-game .tray.placed{background:#f0f5f5}.mini-grid{display:grid;width:65px;height:65px;gap:1px;position:relative;border:1px dotted #8f8875;padding:2px;box-sizing:border-box}.mini-grid .mini-cell{display:grid;place-items:center;background:#e6cda7;box-shadow:inset 0 0 0 1px #94724955;border-radius:2px;min-height:0;min-width:0}.mini-cell img{width:100%;height:100%;object-fit:contain}.selection{display:flex;gap:15px;align-items:center;padding:13px;background:#f7f4ec;border-radius:10px;margin-bottom:12px;min-height:100px;box-sizing:border-box}.selection .selected-preview{flex:none;width:70px;display:grid;place-items:center}.selected-preview .mini-grid{width:70px;height:70px}.selection strong{font-size:14px}.selection p{font-size:11px;line-height:1.6;margin:6px 0 0;color:#61717b}.rotate-row,.edit-row{display:flex;gap:8px}.rotate-row button,.edit-row button{padding:8px 10px;flex:1;font-size:12px}.feedback{min-height:60px;box-sizing:border-box;background:#edf5f3;border-left:3px solid #8bada9;padding:12px;margin:14px 0 10px;font-size:12px;line-height:1.5;border-radius:4px}.feedback[data-kind=invalid]{border-color:#a13928;background:#fff1e9}.chocolate-game .place-button{width:100%;background:var(--teal);color:white;border-color:var(--teal);font-weight:bold;padding:12px}.chocolate-game .place-button:hover:not(:disabled){background:#00505b;color:white}.edit-row{margin-top:9px}.hint{margin-top:16px}.hint p{font-size:12px;line-height:1.6}.success{background:#f4edda;border:1px solid #d9c59d;border-radius:12px;padding:18px;margin-top:16px}.success h3{margin:3px 0 8px;font-size:20px;color:#67462e}.success p:not(.eyebrow){font-size:12px}.success>div{display:flex;gap:8px}.success button{padding:8px 10px;font-size:12px}.learning-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.learning-panels details{border:1px solid #cfdddf;border-radius:12px;padding:16px;font-size:13px}.learning-panels summary{cursor:pointer;color:#12324b;font-weight:bold}.save-note{font-size:11px;text-align:center;color:#647a87;margin:24px 0}.learning-panels p{line-height:1.7}@keyframes wrap-in{from{opacity:0;transform:translateY(-12px) scale(1.05)}to{opacity:1;transform:none}}@media(max-width:800px){.play-layout{grid-template-columns:1fr}.shelf{grid-template-columns:repeat(5,minmax(0,1fr))}.shelf-column{padding:22px}.collection-heading{padding:22px 20px 14px}.level-picker{padding:4px 20px 18px}.scene-column{padding:18px}.workbench{max-width:550px;margin:auto}.selection{min-height:95px}.box-readout,.board-help,.text-map{max-width:550px;margin-left:auto;margin-right:auto}}@media(max-width:480px){.collection-heading{padding:22px 18px 13px}.collection-heading h2{font-size:21px}.collection-heading .eyebrow{font-size:9px;line-height:1.7}.progress{padding:10px 12px}.progress strong{font-size:21px}.collection-heading p:last-child{font-size:12px}.level-picker{gap:6px;padding:4px 18px 16px}.level-picker button{padding:7px 10px}.scene-column{padding:14px}.box-frame{width:84%;padding:5px;border-width:3px}.board{padding:3px;gap:2px}.bench-label{font-size:6px;letter-spacing:1px}.cell .cell-number{font-size:7px}.cell .tray-mark{font-size:8px;min-width:11px;line-height:12px;bottom:0;right:0}.shelf-column{padding:20px 17px}.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}.learning-panels{grid-template-columns:1fr}.stage-note{font-size:10px;flex-wrap:wrap}.box-readout{font-size:12px}.board-help{font-size:11px}}@media(prefers-reduced-motion:reduce){.chocolate-game *{animation:none!important;transition:none!important}}

@media(max-width:480px){.shelf{grid-template-columns:repeat(var(--tray-count,3),minmax(0,1fr));gap:5px;margin-bottom:12px}.chocolate-game .tray{padding:6px 2px;gap:5px}.tray .mini-grid{width:44px;height:44px}.tray .tray-label{font-size:10px}.tray .tray-status{font-size:8px;white-space:nowrap}.selection{display:none}.shelf-title h3{font-size:17px}.shelf-column{padding:16px 14px}.microcopy{margin:5px 0 12px;font-size:12px}.feedback{min-height:52px;margin:10px 0 8px;padding:9px;font-size:11px}.hint{margin-top:12px}.text-map{margin-bottom:0}.board-help{margin-bottom:8px}}
@media(max-width:350px){.tray .mini-grid{width:36px;height:36px}.tray .tray-status{font-size:7px}.shelf{gap:4px}.shelf-column{padding:14px 10px}}