/* Porchlight: arcade midnight skin (navy + amber). Mobile first. */
:root{--night:#0b1426;--night2:#13213b;--ink:#e8ecf6;--muted:#9aa6c2;--amber:#ffb938;--amber2:#ffd98a;--glow:rgba(255,176,40,.6);
  --blue:#6fd0ff;--blue-glow:rgba(111,208,255,.55);--off:#26324d;--line:#2c3b5c}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% 0%,#1a2b4d 0%,var(--night) 60%) fixed;color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
#main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))}
.top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.back{color:var(--amber2);text-decoration:none;font-weight:600;padding:10px 4px}
.icons{display:flex;gap:6px}
.icons button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--night2);cursor:pointer;font-size:18px}
h1{font-family:Georgia,"Times New Roman",serif;text-align:center;font-size:38px;margin:4px 0 8px;color:var(--amber2);letter-spacing:.5px;text-shadow:0 0 18px rgba(255,185,56,.45)}
.modes{display:flex;justify-content:center;gap:6px}
.modes button,.psizes button{touch-action:manipulation;min-height:44px;padding:8px 16px;border-radius:22px;border:1px solid var(--line);background:var(--night2);cursor:pointer;font-weight:600}
.modes button.on,.psizes button.on{background:var(--amber);color:#1b1206;border-color:var(--amber)}
.sub{text-align:center;color:var(--muted);margin:10px 0 8px;min-height:1.3em}
.rule{text-align:center;margin:-2px auto 10px;max-width:30em;font-size:14px;color:var(--amber2)}
.psizes{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.psizes button{padding:6px 12px}
/* painted street behind the page (Jamie's ChatGPT street pair, 2026-10): the dark street is always there,
   the lit one on top fades out as the porch lights go off (--lit, set by drawBoard) */
#streetArt{position:fixed;inset:0;z-index:0;pointer-events:none}
#streetArt i{position:absolute;inset:0;background-position:center 70%;background-size:cover;background-repeat:no-repeat}
#streetArt .dark{background-image:url(img/street-dark.webp?v=1)}
#streetArt .lit{background-image:url(img/street-lit.webp?v=1);opacity:var(--lit,1);transition:opacity .9s cubic-bezier(.22,.61,.36,1)}
#streetArt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.62) 0%,rgba(11,20,38,.5) 45%,rgba(11,20,38,.8) 100%)}
body.art #sky .moon{display:none}
.street{position:relative;isolation:isolate;background:rgba(5,10,21,.72);backdrop-filter:blur(2px);border:1px solid var(--line);border-radius:18px;padding:6px;display:flex;justify-content:center;
  box-shadow:inset 0 -30px 60px rgba(0,0,0,.35)}
.street::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(15,27,51,.75) 0%,rgba(10,18,36,.75) 100%);z-index:-1;transition:opacity 1.2s;pointer-events:none}
.street.night::before{opacity:0}
#board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;width:100%;
  max-width:min(520px,calc(var(--cols)*84px),calc((100vh - 300px) * var(--cols) / var(--rows,5)));
  max-width:min(520px,calc(var(--cols)*84px),calc((100svh - 300px) * var(--cols) / var(--rows,5)));min-width:min(100%,calc(var(--cols)*44px + (var(--cols) - 1)*3px))}
.bulb{aspect-ratio:1;min-width:0;touch-action:manipulation;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:12px}
.bulb span{width:70%;height:70%;border-radius:50%;border:3px solid #6a789c;background:transparent;transition:background .15s,box-shadow .15s,border-color .15s,transform .1s}
.bulb:active span{transform:scale(.92)}
.bulb.s1 span{background:radial-gradient(circle at 40% 35%,#fff2c8 0%,var(--amber) 55%,#e08a00 100%);border-color:var(--amber2);box-shadow:0 0 18px var(--glow),0 0 40px rgba(255,170,30,.25)}
.bulb.s2 span{background:radial-gradient(circle at 40% 35%,#e9f8ff 0%,var(--blue) 60%,#2a8cc0 100%);border-color:#c7efff;border-radius:24%;box-shadow:0 0 18px var(--blue-glow)}
/* painted bulbs: a 3-frame strip, off / amber / blue (blue keeps its rounded-square ring so it isn't colour alone) */
body.art .bulb span{position:relative;border:0;border-radius:0;background:url(img/bulbs.webp?v=1) 0 0/300% 100% no-repeat;box-shadow:none;transition:transform .1s}
/* Separate artwork layers let quick taps reverse a fade without changing the puzzle state.
   The off frame stays beneath both; blue retains a square ring as a non-colour cue. */
body.art .bulb span::before,body.art .bulb span::after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;background:url(img/bulbs.webp?v=1) 50% 0/300% 100% no-repeat;opacity:0;transition:opacity .28s cubic-bezier(.22,.61,.36,1)}
body.art .bulb span::before{filter:drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 22px rgba(255,170,30,.3))}
body.art .bulb span::after{background-position:100% 0;border:2px solid #c7efff;border-radius:24%;filter:drop-shadow(0 0 10px var(--blue-glow))}
body.art .bulb.s1 span::before,body.art .bulb.s2 span::after{opacity:1}
.bulb.hint span{outline:3px dashed #fff;outline-offset:4px;animation:hint 1.1s ease-in-out infinite}
@keyframes hint{50%{outline-color:var(--amber)}}
.bulb:focus-visible{outline:3px solid var(--blue);outline-offset:-2px}
.bulb:disabled{cursor:default}
.bulb.flip span{animation:flip .24s ease-out}
@keyframes flip{0%{transform:scale(.78)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
/* the win: the street goes dark, the bulb rings fade, the moon and stars come out */
.street.night .bulb span{border-color:rgba(86,100,138,.28);transition:border-color 1.2s}
#sky .moon{position:absolute;right:9%;top:7%;width:46px;height:46px;border-radius:50%;background:#f4ecd2;box-shadow:0 0 30px rgba(244,236,210,.45),inset -10px -6px 0 rgba(0,0,0,.08);opacity:0;transform:translateY(12px);transition:opacity 1.4s,transform 1.4s}
body.night #sky .moon{opacity:.95;transform:none}
.bar{text-align:center;margin:12px 0 6px;color:var(--muted);font-variant-numeric:tabular-nums}
.tools{display:flex;gap:8px;justify-content:center}
.tools button{touch-action:manipulation;flex:1;max-width:140px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--night2);cursor:pointer;font-weight:600}
.tools button:disabled{opacity:.4;cursor:default}
.tools button.primary{background:var(--amber);color:#1b1206;border-color:var(--amber)}
.stuck{text-align:center;margin:16px 0 0;font-size:14px}
.stuck a{color:var(--muted)}
#sky{position:fixed;inset:0;pointer-events:none;z-index:0}
#sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;transition:opacity 1.2s}
body.night #sky i{opacity:.85;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}
/* overlays: overflow-y auto + margin:auto card (the in-app-browser clipping fix) */
.overlay{position:fixed;inset:0;z-index:10;background:rgba(3,7,16,.72);overflow-y:auto;display:flex;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
.overlay[hidden]{display:none}
.panel{margin:auto;width:100%;max-width:420px;background:var(--night2);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.panel h2:focus{outline:none}
.panel h2{font-family:Georgia,serif;color:var(--amber2);margin:0 0 10px;font-size:26px}
.panel p{line-height:1.5;margin:8px 0}
.stars{font-size:30px;letter-spacing:4px;margin:4px 0}
.btns{display:flex;gap:8px;margin:14px 0}
.btns button,.close{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--night);cursor:pointer;font-weight:600;padding:8px 12px}
.btns button.primary{background:var(--amber);color:#1b1206;border-color:var(--amber)}
.close{width:100%;margin-top:12px}
.muted{color:var(--muted);font-size:14px}
.sharebox{width:100%;margin:6px 0 0;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--night);color:var(--ink);font:14px/1.4 system-ui;resize:none}
.stats{display:flex;gap:8px;margin:10px 0}
.stats div{flex:1;text-align:center;background:var(--night);border-radius:12px;padding:10px 4px;font-size:13px;color:var(--muted)}
.stats b{display:block;font-size:24px;color:var(--ink)}
.xpromo{display:block;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:#d7dcf5;font-size:14px;text-align:center;background:linear-gradient(90deg,rgba(255,185,56,.08),rgba(111,208,255,.08))}
.xpromo strong{color:#fff}
@media (max-height:640px){h1{font-size:30px;margin:0 0 6px}.sub{margin:6px 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* consent toast (site-wide pattern) */
#jd-consent{position:fixed;right:18px;bottom:18px;max-width:380px;background:#fff;color:#2D3748;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:16px 18px;font-size:14px;line-height:1.5;z-index:300;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
#jd-consent.jd-show{opacity:1;transform:none}
#jd-consent p{margin:0 0 12px}
#jd-consent a{color:#2B6CB0;text-decoration:underline}
#jd-consent .jd-btns{display:flex;gap:8px;justify-content:flex-end}
#jd-consent button{font:inherit;font-weight:600;border-radius:8px;padding:8px 14px;cursor:pointer;border:1px solid transparent;line-height:1.2}
#jd-consent .jd-accept{background:#2B6CB0;color:#fff}
#jd-consent .jd-decline{background:#EDF2F7;color:#2D3748;border-color:#CBD5E0}
@media (max-width:480px){#jd-consent{right:10px;left:10px;bottom:10px;max-width:none}}

/* Pseudo-elements need their own reduced-motion rule; the earlier * rule covers elements only. */
@media (prefers-reduced-motion:reduce){body.art .bulb span::before,body.art .bulb span::after{transition:none}}