:root{color:#17211f;background:#f2f6f2;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}button:focus-visible{outline:3px solid #d4af37;outline-offset:3px}.app-shell{min-height:100vh;padding:24px}.app-header{align-items:center;display:flex;gap:18px;justify-content:space-between;margin:0 auto 18px;max-width:1320px}.app-header h1,.reference-panel h2,.tray-panel h2{margin:0}.app-header h1{font-size:34px;line-height:1}.app-header img{height:56px;object-fit:contain}.eyebrow{color:#157b77;font-size:12px;font-weight:800;letter-spacing:0;margin:0 0 6px;text-transform:uppercase}.level-bar,.play-layout{margin:0 auto;max-width:1320px}.level-bar{align-items:center;background:#fff;border:1px solid #dfe8df;border-radius:8px;display:flex;gap:16px;justify-content:space-between;padding:12px}.level-summary{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.level-summary span{background:#e9f4f1;border-radius:6px;color:#17645f;font-weight:800;padding:7px 10px}.level-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.level-group{align-items:center;display:flex;gap:6px}.level-group h3{color:#53615d;font-size:12px;margin:0;min-width:32px}.level-group-buttons{display:flex;flex-wrap:wrap;gap:6px}.level-button,.action-buttons button{border:1px solid #cbd8cf;border-radius:8px;background:#fff;color:#17211f;cursor:pointer;font-weight:800;min-height:38px;padding:8px 12px}.level-button[data-active=true],.action-buttons .primary{background:#156e69;border-color:#156e69;color:#fff}.play-layout{display:grid;gap:18px;grid-template-columns:minmax(220px,300px) minmax(460px,1fr) minmax(280px,360px);margin-top:18px}.reference-panel,.tray-panel,.board-panel{background:#fff;border:1px solid #dfe8df;border-radius:8px}.reference-panel,.tray-panel{padding:16px}.reference-panel p,.tray-panel p{color:#596763;font-size:14px;line-height:1.45;margin:6px 0 0}.panel-heading{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.reference-image-button{background:transparent;border:0;cursor:zoom-in;display:block;margin-top:14px;padding:0;position:relative;width:100%}.reference-image-button img{border-radius:6px;display:block;width:100%}.zoom-hint{background:#17211fd6;border-radius:6px;color:#fff;font-size:13px;font-weight:900;padding:6px 9px}.card-dialog,.answer-dialog{border:0;border-radius:8px;box-shadow:0 24px 80px #0e1c1957;max-width:min(92vw,760px);padding:14px;width:fit-content}.card-dialog::backdrop,.answer-dialog::backdrop{background:#0c161494}.dialog-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.dialog-header button,.success-message button,.dialog-actions button{background:#156e69;border:0;border-radius:8px;color:#fff;cursor:pointer;font-weight:900;padding:8px 12px}.card-dialog-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.answer-dialog{max-width:min(92vw,420px)}.answer-dialog p{color:#52605d;line-height:1.5;margin:0 0 14px}.dialog-actions{display:flex;justify-content:flex-end}.dialog-actions .danger{background:#b83c30}.card-dialog-image-wrap{max-height:78vh;max-width:100%;overflow:auto}.card-dialog img{border-radius:6px;display:block;max-width:none;transform-origin:top left;width:calc(min(86vw,720px) * var(--card-zoom, 1))}.board-panel{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:560px;padding:18px}.board{--slot-size: 48px;background:linear-gradient(135deg,rgba(21,110,105,.14),transparent 48%),#eff7f5;border:2px solid #bed3cd;border-radius:8px;height:360px;position:relative;touch-action:none;width:360px}.board[data-dragging=true]{background:radial-gradient(circle at 50% 46%,rgba(212,175,55,.18),transparent 46%),linear-gradient(135deg,rgba(21,110,105,.14),transparent 48%),#eff7f5}.board-slot,.jewel-piece.placed,.clue-marker,.board-drop-preview{height:var(--slot-size);position:absolute;transform:translate(-50%,-50%);width:var(--slot-size)}.board-slot{background:#fff;border:2px solid #1e2a28;box-shadow:inset 0 0 0 1px #ccd8d5;transform:translate(-50%,-50%) rotate(45deg)}.board-slot:after{border:1px dashed rgba(30,42,40,.24);content:"";top:12px;right:12px;bottom:12px;left:12px;position:absolute}.board-slot[data-preview=true][data-preview-state=valid]{background:#d3f5e4;border-color:#16845e;box-shadow:0 0 0 5px #16845e29,0 0 18px #16845e42,inset 0 0 0 1px #ccd8d5}.board-slot[data-preview=true][data-preview-state=blocked]{background:#ffe1df;border-color:#c64536;box-shadow:0 0 0 5px #c6453624,0 0 18px #c6453638,inset 0 0 0 1px #ccd8d5}.board-slot[data-check-state=wrong]{border-color:#c64536;box-shadow:0 0 0 5px #c645362e,inset 0 0 0 1px #ccd8d5}.board-slot[data-check-state=clue]{border-color:#d19715;box-shadow:0 0 0 5px #d1971538,inset 0 0 0 1px #ccd8d5}.clue-marker{align-items:center;border:0;display:flex;justify-content:center;pointer-events:none;transform:translate(-50%,-50%) rotate(45deg);z-index:2}.clue-marker.color:before{background:var(--clue-color);border:2px solid rgba(23,33,31,.34);content:"";height:74%;width:74%}.clue-marker.shape:before{background:#ffffff9e;border:2px solid #c9d0cc;content:"";top:18px;right:18px;bottom:18px;left:18px;position:absolute}.clue-marker.shape:after{background:#c8cfcc;content:"";height:34px;position:relative;transform:rotate(-45deg);width:34px;z-index:1}.clue-marker[data-shape=round]:after{border-radius:999px}.clue-marker[data-shape=triangle]:after{background:transparent;border-bottom:34px solid #c8cfcc;border-left:20px solid transparent;border-right:20px solid transparent;height:0;width:0}.clue-marker[data-shape=octagon]:after{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}.clue-marker[data-clue=yellow]{--clue-color: #ffd728}.clue-marker[data-clue=orange]{--clue-color: #f17121}.clue-marker[data-clue=green]{--clue-color: #95c83d}.clue-marker[data-clue=blue]{--clue-color: #35bfd4}.jewel-piece{align-items:center;background:transparent;border:0;cursor:grab;display:grid;justify-items:center;padding:0;touch-action:none}.jewel-piece:active{cursor:grabbing}.jewel-piece img{border-radius:50%;display:block;filter:drop-shadow(0 8px 10px rgba(7,28,25,.18));height:66px;object-fit:contain;pointer-events:none;transition:transform .15s ease;width:66px}.jewel-piece span{align-items:center;border-radius:999px;display:inline-flex;font-size:11px;font-weight:900;height:20px;justify-content:center;margin-top:-12px;min-width:20px;padding:0 5px;pointer-events:none}.piece-id{background:#17211f;color:#fff}.tray-piece .piece-id{display:none}.piece-shape{background:#e9f4f1;color:#17645f;font-size:10px;height:18px;margin-top:2px}.tray-piece[data-selected=true] img{outline:3px solid #d4af37;outline-offset:3px}.jewel-piece.ghost{filter:drop-shadow(0 18px 22px rgba(7,28,25,.26));opacity:.86;z-index:30}.jewel-piece[data-fixed=true]{cursor:default}.jewel-piece.placed span{display:none}.jewel-piece.placed{z-index:10}.jewel-piece.placed[data-dragging-source=true]{opacity:.24;transform:translate(-50%,-50%) scale(.86)}.jewel-piece.placed img{height:40px;width:40px}.board-drop-preview{align-items:center;display:flex;justify-content:center;opacity:.72;pointer-events:none;z-index:12}.board-drop-preview img{display:block;filter:drop-shadow(0 8px 10px rgba(7,28,25,.22));height:40px;object-fit:contain;transform:scale(.96);width:40px}.board-drop-preview[data-preview-state=valid] img{animation:dropPreviewPulse .7s ease-in-out infinite alternate}.board-drop-preview[data-preview-state=blocked]{filter:grayscale(.25) sepia(.3) saturate(1.2) hue-rotate(310deg);opacity:.42}.drag-source-hidden{opacity:.18}@keyframes dropPreviewPulse{0%{transform:scale(.9)}to{transform:scale(1.04)}}.tray-header{display:grid;gap:14px}.action-buttons{display:flex;flex-wrap:wrap;gap:8px}.tray{display:grid;gap:14px;margin-top:18px}.tray-group{border:1px solid #dfe8df;border-radius:8px;padding:10px}.tray-group-toggle{background:transparent;border:0;color:#31423e;font-weight:900;margin:0 0 8px;padding:0;text-align:left}.tray-group-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}.tray-piece{border:1px solid #dfe8df;border-radius:8px;min-height:64px}.tray-piece img{height:40px;width:40px}.tray-piece:hover,.level-button:hover,.action-buttons button:hover{border-color:#16845e}.status-text,.success-message{border-radius:8px;font-weight:800;padding:12px}.status-text{background:#f5f0df;color:#5f4e19;display:grid;gap:6px;min-height:44px}.status-text span{display:block}.success-message{align-items:center;background:#dff8eb;color:#126044;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:14px;width:min(100%,520px)}.success-message[hidden]{display:none}@media (max-width: 1120px){.play-layout{grid-template-columns:1fr}.reference-panel{order:1}.board-panel{order:2}.tray-panel{order:3}.board-panel{min-height:auto}.reference-image-button img{margin-inline:auto;max-width:420px}}@media (max-width: 640px){.app-shell{padding:8px}.app-header,.level-bar{align-items:flex-start;flex-direction:column}.app-header{gap:6px;margin-bottom:8px}.app-header h1{font-size:22px}.app-header img,.eyebrow{display:none}.level-bar{gap:8px;padding:8px}.level-summary{gap:6px}.level-summary span,.level-button,.action-buttons button{min-height:30px;padding:5px 8px}.level-buttons{gap:6px;justify-content:flex-start}.level-group{align-items:flex-start;flex-direction:column}.level-group h3{min-width:0}.play-layout{align-items:start;display:grid;gap:8px;grid-template-columns:1fr;margin-top:8px}.reference-panel{order:1}.board-panel{order:2}.tray-panel{order:3}.panel-heading{align-items:center;display:flex}.reference-panel h2,.tray-panel h2{font-size:15px}.reference-panel p,.tray-panel p{display:none}.tray-panel .status-text{display:block}.reference-image-button{margin-top:8px}.reference-image-button img{max-height:220px;max-width:100%;object-fit:contain}.zoom-hint{font-size:10px;padding:4px 6px}.board{--slot-size: 38px;height:280px;width:280px}.jewel-piece img{height:38px;width:38px}.tray-piece img,.jewel-piece.placed img,.board-drop-preview img{height:32px;width:32px}.reference-panel,.tray-panel,.board-panel{padding:8px}.board-panel{min-height:296px}.tray{display:grid;gap:5px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}.tray-header{align-items:center;display:grid;gap:8px;grid-template-columns:auto 1fr}.action-buttons{gap:6px;justify-content:flex-end}.tray-group-grid{display:grid;gap:5px;grid-template-columns:repeat(3,minmax(34px,1fr));overflow:visible}.tray-group{padding:5px}.tray-piece{min-height:40px;min-width:0}.tray-piece img{height:34px;width:34px}.jewel-piece span{font-size:9px;height:16px;margin-top:-8px;min-width:16px;padding:0 4px}.tray-piece .piece-shape{display:none}.status-text{grid-column:1 / -1;margin:8px 0 10px;min-height:0;padding:8px}.card-dialog{max-width:96vw;padding:10px}.dialog-header{align-items:flex-start}.card-dialog-tools{gap:6px}.card-dialog-tools button{padding:6px 8px}.card-dialog-image-wrap{max-height:74vh}.card-dialog img{width:calc(92vw * var(--card-zoom, 1))}.clue-marker.shape:before{top:13px;right:13px;bottom:13px;left:13px}.clue-marker.shape:after{height:24px;width:24px}.clue-marker[data-shape=triangle]:after{border-bottom-width:24px;border-left-width:14px;border-right-width:14px}}