/* Glim’s Light Workshop (dist/light-view.js). Shapes carry every meaning; the warm glow is extra. */
.light-screen{--edge:clamp(26px,8vw,58px);--page-pad:72px;--glow-step:.28s;max-width:980px;margin:auto}
/* Squares shrink with the number of columns so a 3×3 to 6×6 board always fits the screen width (30px to 92px; a 6×6 board on a narrow phone is the only one near the minimum). */
.light-board{--cell:clamp(30px,calc((100vw - var(--page-pad) - 2 * var(--edge) - 24px - 4px * var(--cols)) / var(--cols)),92px)}
.light-intro{display:flex;align-items:center;gap:14px;margin:8px 0}.light-glim{width:clamp(70px,14vw,104px);height:auto;flex:none}
.light-says{font-size:19px;line-height:1.45;margin:0;background:#fff;border:1px solid #d7e7de;border-radius:18px;padding:12px 16px}
.light-how{color:var(--muted);margin:6px 0 14px}
.light-play{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.light-board{display:grid;gap:4px;padding:8px;background:#efe6d2;border-radius:20px;border:2px solid #d9c9a6;touch-action:manipulation}
.light-cell{position:relative;display:grid;place-items:center;padding:0;border:2px solid #c9b58c;border-radius:12px;background:#fbf6ea;min-width:0}
.light-cell:hover{border-color:#a68a52}.light-cell.is-fixed{background:#f3ead6}.light-cell.is-rock{background:#ebe4d6;cursor:default}
.light-piece{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.light-piece .channel-bed{stroke:#8a6b3f;stroke-width:30}.light-piece .channel-line{stroke:#fff6dc;stroke-width:12}
.light-piece .channel-glow{stroke:#ffcb3d;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.light-cell.lit .channel-glow{opacity:1;stroke-dashoffset:0;filter:drop-shadow(0 0 5px #ffd95a)}
.light-screen.is-glowing .light-cell.lit .channel-glow{animation:light-flow var(--glow-step) linear calc(var(--i)*var(--glow-step)) both}
@keyframes light-flow{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}
.light-piece.ghost{opacity:.45}.light-piece.ghost .channel-bed{stroke:#087f75;stroke-dasharray:8 8}.light-piece.ghost .channel-line{stroke:none}
.light-turn{position:absolute;right:4px;top:4px;width:18px;height:18px;fill:none;stroke:#8a6b3f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.light-pin{position:absolute;right:5px;top:5px;width:20px;height:20px;fill:#5d4a2c;stroke:#fff;stroke-width:2.5}
.light-rock{width:86%;height:86%}.light-rock path{fill:#9a948a;stroke:#6e675d;stroke-width:3}.light-rock .rock-mark{stroke:#6e675d;stroke-width:3;fill:none}
/* Where the glow stopped: a dashed ring and a notch on the side it was going (shape, not colour). */
.light-cell.glow-stop{border-style:dashed;border-color:#c05a2a}.stop-mark{position:absolute;inset:8%;border:3px dashed #c05a2a;border-radius:50%}
.light-cell.glow-stop::after{content:'';position:absolute;width:0;height:0;border:9px solid transparent}
.light-cell.glow-stop-0::after{top:-2px;border-top-color:#c05a2a}.light-cell.glow-stop-1::after{right:-2px;border-right-color:#c05a2a}.light-cell.glow-stop-2::after{bottom:-2px;border-bottom-color:#c05a2a}.light-cell.glow-stop-3::after{left:-2px;border-left-color:#c05a2a}
.light-edge{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0}
.light-pebble{width:70%;max-height:78%}.light-pebble ellipse{fill:#ffe27a;stroke:#d9a520;stroke-width:4;filter:drop-shadow(0 0 6px #ffd95a)}.light-pebble .pebble-shine{fill:#fff8d8;stroke:none}
.light-arrow{position:absolute;width:42%;fill:none;stroke:#8a6b3f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.light-arrow.arrow-0{transform:rotate(-90deg)}.light-arrow.arrow-2{transform:rotate(90deg)}.light-arrow.arrow-3{transform:rotate(180deg)}
.light-arrow{bottom:-6%}
/* Shining down or up (From above): the arrow sits beside the pebble, not on it. */
.light-arrow.arrow-0,.light-arrow.arrow-2{bottom:auto;top:50%;right:-8%;width:34%;margin-top:-17%}
.light-goal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(.7) brightness(.72);transition:filter .4s}
.light-goal.lit img{filter:drop-shadow(0 0 12px #ffd95a)}
.light-screen.is-glowing .light-goal.lit img{animation:light-jar .5s ease-out calc(var(--i)*var(--glow-step)) both}
@keyframes light-jar{from{filter:grayscale(.7) brightness(.72)}to{filter:drop-shadow(0 0 12px #ffd95a)}}
.light-side{display:grid;gap:14px;flex:1;min-width:230px}
.light-tray{display:flex;flex-wrap:wrap;gap:10px}
.light-tray-piece{display:flex;align-items:center;gap:10px;min-height:64px;padding:6px 14px 6px 6px;border:2px solid #c9b58c;border-radius:14px;background:#fbf6ea}
.light-tray-piece .light-piece{position:relative;width:52px;height:52px}
.light-tray-piece.selected{border-color:#087f75;box-shadow:0 0 0 3px #087f75 inset;transform:translateY(-2px)}
.light-tray-piece:disabled{opacity:.55}
.light-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.light-controls .button.selected{box-shadow:0 0 0 3px #087f75 inset}
.light-feedback{border-radius:16px;padding:12px 16px;margin:14px 0;background:#fff3d5;font-size:18px}.light-feedback.success{background:#eefaf4}.light-feedback p{margin:0}
.light-hint{margin:14px 0}
.light-sizes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}.light-sizes .button{min-height:56px}.light-size-note{color:var(--muted);margin:0 0 14px}.light-sizes .button.selected{box-shadow:0 0 0 3px #087f75 inset}
.light-own-card{border-style:dashed}
.light-success{margin:14px 0}.light-screen.is-glowing .light-success{animation:light-appear .4s ease-out calc(var(--n)*var(--glow-step)) both}
@keyframes light-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.light-success-art{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.light-success-art .light-glim{width:110px}
.light-lighthouse{position:relative;display:flex;align-items:center;width:min(200px,100%)}.light-lighthouse img{width:96px;height:auto}
.light-lighthouse svg{width:100px;fill:none;stroke:#e0a21c;stroke-width:4;stroke-dasharray:2 7;stroke-linecap:round}.light-lighthouse .signal-gap{stroke:#c9b58c;stroke-dasharray:1 10}
.light-routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:16px 0}
.light-done-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;font-size:13px}
.light-invite{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:18px 0;padding:18px;border-radius:20px;background:#fff8e6;border:1px solid #ecd9a8}.light-invite h2,.light-invite h3{margin:0 0 4px}.light-invite p{margin:0 0 10px}
.light-invite.in-dialog{margin:16px 0 0}

@media(max-width:700px),(orientation:portrait) and (max-width:1100px){.light-play{flex-direction:column}}
@media(max-width:700px){.light-says{font-size:17px}}
/* Tablets and wider: squares also shrink so the whole board, jar included, fits the screen height
   (in portrait the tray and Try it sit under the board, so they need room too). Phones scroll instead. */
@media(min-width:701px){.light-board{--cell:clamp(30px,min(calc((100vw - var(--page-pad) - 2 * var(--edge) - 24px - 4px * var(--cols)) / var(--cols)),max(var(--floor,52px),calc((100svh - var(--chrome) - 2 * var(--edge) - 24px - 4px * var(--rows)) / var(--rows)))),92px)}.light-screen{--chrome:330px}.light-screen.is-own{--chrome:400px;--floor:44px}}
@media(min-width:701px) and (orientation:portrait){.light-screen{--chrome:560px}.light-screen.is-own{--chrome:630px}}
/* Bigger free boards would make squares too small to tap on a phone (a board already that size keeps its button). */
@media(max-width:420px){.light-sizes [data-size="6"]:not(.selected){display:none}}
@media(max-width:340px){.light-sizes [data-size="5"]:not(.selected){display:none}}
@media(max-width:1000px){.light-screen{--page-pad:48px}}
@media(max-width:700px){.light-screen{--page-pad:36px}}
@media(max-width:360px){.light-board{padding:4px;gap:3px}.light-screen{--edge:26px}}
@media(prefers-reduced-motion:reduce){.light-board .channel-glow,.light-success,.light-goal img{animation:none!important}}