.lumiere { max-width:560px; padding-top:16px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
.lumiere .game-header .eyebrow { margin:6px 0 4px; }
.lumiere .game-header h1 { font-size:clamp(2.4rem,8vw,3rem); }
.lumiere .game-header .intro { font-size:.85rem; margin:6px 0 4px; }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.75rem; color:var(--muted); }
.level-picker { min-width:0; flex:1; }
.level-picker select { width:100%; font:inherit; font-weight:700; border:0; background:transparent; color:var(--ink); min-height:44px; text-overflow:ellipsis; padding:0 4px; }
.room-heading output { flex-shrink:0; }
.lumiere .status { font-size:.85rem; margin:2px 0 12px; }
.room { position:relative; border:5px solid #58516e; border-radius:22px; overflow:hidden; box-shadow:0 5px 0 #dcd7cd; background:#252a49; }
#light-board { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); aspect-ratio:1; }
.light-cell { position:relative; min-width:0; min-height:0; padding:7%; display:grid; place-items:center; background:transparent; border:0; border-right:1px solid #414362; border-bottom:1px solid #414362; border-radius:0; touch-action:none; }
.light-cell:nth-child(even) { background:#ffffff03; }
.light-cell svg { width:100%; height:100%; position:relative; z-index:2; pointer-events:none; }
.light-cell:focus-visible { outline:3px solid #ffda7a; outline-offset:-5px; z-index:3; }
.light-cell.selected::after { content:''; position:absolute; inset:6px; border:2px dashed #ffda7a; border-radius:14px; }
.light-cell.hinted { background:#ffda7a16; }
.hint-mark { font-size:2rem; color:#ffda7a; border:2px dashed #c9ae78; border-radius:12px; width:80%; height:80%; display:grid; place-items:center; }
.light-cell.destination { box-shadow:inset 0 0 0 2px #a3dce955; }
.light-cell.drop-target { background:#ffda7a33; box-shadow:inset 0 0 0 3px #ffda7a; }
.light-cell.illuminated { background:radial-gradient(circle,#ffda7a66,transparent 72%); }
.light-cell.illuminated svg { animation:ghost-wake .35s ease-out both; }
#rays { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#rays polyline { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ray-glow { stroke:#ffc85b; stroke-width:14; opacity:.23; }
.ray-core { stroke:#ffe9a5; stroke-width:4; stroke-dasharray:1; animation:light-travel .24s ease-out both; }
.room.solved { border-color:#b99a57; }
.inventory { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:6px 12px 6px 8px; border:1px solid #dcdccd; border-radius:20px; background:#fffdf8; }
.inventory.drop-target { outline:3px dashed var(--orange); }
.supply { display:flex; align-items:center; gap:10px; min-height:64px; padding:4px 12px 4px 4px; color:var(--ink); background:transparent; border:2px solid transparent; border-radius:14px; font-size:.9rem; font-weight:700; touch-action:none; }
.supply[aria-pressed="true"] { border-color:var(--orange); background:#f4dfc94d; }
.supply[aria-disabled="true"] .reserve-icon { opacity:.35; }
.reserve-icon { display:block; width:50px; height:50px; }
.reserve-icon svg { width:100%; height:100%; }
.reserve-help { font-size:.75rem; color:var(--muted); line-height:1.5; }
.piece-actions { display:flex; justify-content:center; gap:8px; margin:14px 0 0; }
.piece-actions .quiet { padding:10px 12px; font-size:.8rem; }
.piece-actions [aria-pressed="true"] { background:#f4dfc9; }
.light-help { color:var(--muted); text-align:center; font-size:.75rem; line-height:1.6; margin:16px 4px 0; }
.prism-help { font-size:.8rem; line-height:1.5; color:#654775; text-align:center; margin:12px 4px 0; }
#play-area { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.drag-piece { position:fixed; width:68px; height:68px; transform:translate(-50%,-70%); z-index:20; pointer-events:none; filter:drop-shadow(0 5px 5px #0005); }
.drag-piece svg { width:100%; height:100%; }
.light-completion { text-align:center; padding:18px 12px; margin-top:14px; border-radius:20px; background:#f4e7c6; animation:ghost-wake .3s ease-out; }
.light-completion h2 { font-size:1.35rem; margin:0 0 12px; }
.light-completion .primary { font-size:.9rem; padding:12px 18px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes light-travel { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes ghost-wake { from { transform:translateY(3px) scale(.94); } to { transform:translateY(0) scale(1); } }
@media(max-width:360px) { .lumiere { padding:10px 12px 18px; } .lumiere .game-header .intro { font-size:.8rem; margin-bottom:8px; } .room { border-width:4px; } .piece-actions { gap:5px; } .piece-actions .quiet { padding-inline:10px; } .reserve-help { font-size:.7rem; } .supply { gap:5px; padding-right:4px; font-size:.8rem; } .reserve-icon { width:42px; height:42px; } .inventory { gap:4px; padding-right:6px; } }