/* Lights Out: a calm light page, a deep night-blue board, warm amber lights. */
:root{
  --deck:#18202E;--deck-hi:#222C3D;--off:#2B364A;--off-hi:#34415A;--lamp:#FFC85A;--lamp-hi:#FFE6A3;--lamp-lo:#F09A2E;--star:#F2B227;
}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.2em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.4em;height:4.4em;border-radius:1em;box-shadow:0 6px 18px rgba(24,32,46,.25)}
.title{font:800 clamp(2.3em,10vw,3.6em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.12em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.9em;width:min(26em,100%)}
.stepper{display:flex;align-items:center;gap:.6em;width:100%;justify-content:center}
.step{width:56px;height:56px;border-radius:16px;border:1px solid var(--hair);background:var(--panel);font-size:2em;line-height:1;font-weight:700;color:var(--ink);padding:0 0 .12em;flex:none}
.step:disabled{opacity:.35;cursor:default}
.step:active:not(:disabled){transform:translateY(1px)}
.step:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}
.step-mid{flex:1;max-width:14em;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:.35em .6em;line-height:1.2}
.step-mid b{font-size:1.35em}
.step-mid small{color:var(--ink-soft);font-size:.85em}
.stars{color:var(--star);font-size:1.15em;letter-spacing:.12em}
.stars.none{color:#C9D1DB}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.6em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.3em}
  .home-body{gap:.5em;flex:0 1 22em}
  .step-mid{min-height:64px}
  .home .pill{padding:.5em 2em}
  .links .link{min-height:44px;padding:.2em .5em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:max(.5em,env(safe-area-inset-top)) .7em .3em;width:min(34em,100%);margin:0 auto}
.felt{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:6px}
.dock{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.4em .6em max(.6em,env(safe-area-inset-bottom))}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg,.tool svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.readout{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;min-width:5.6em;padding:0 .9em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);line-height:1.1}
.readout span{font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums}
.readout small{color:var(--ink-soft);font-size:.8em}
.readout.moves.over span{color:var(--lamp-lo)}
.tool{display:flex;align-items:center;gap:.4em;min-height:48px;padding:0 1em;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font-weight:700}
.tool:disabled{opacity:.42;cursor:default}
.tool:active:not(:disabled),.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible,.tool:focus-visible,.board:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}

/* the board: a night-blue deck of lamps */
.board{--cs:60px;--gap:calc(var(--cs)*.14);position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--cs));grid-auto-rows:var(--cs);gap:var(--gap);
  padding:calc(var(--cs)*.25);border-radius:calc(var(--cs)*.32);background:linear-gradient(180deg,var(--deck-hi),var(--deck));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 34px rgba(24,32,46,.32);touch-action:none;user-select:none;-webkit-user-select:none}
.cell{position:relative;border-radius:calc(var(--cs)*.22);cursor:pointer;background:var(--off);
  box-shadow:inset 0 calc(var(--cs)*-.05) 0 rgba(0,0,0,.28),inset 0 calc(var(--cs)*.03) 0 rgba(255,255,255,.05);
  transition:background-color .16s ease-out,box-shadow .2s ease-out}
.cell .glass{position:absolute;inset:14%;border-radius:calc(var(--cs)*.16);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.1),transparent 60%);pointer-events:none;transition:opacity .2s}
.cell.on{background:radial-gradient(circle at 50% 45%,var(--lamp-hi),var(--lamp) 55%,var(--lamp-lo));
  box-shadow:0 0 calc(var(--cs)*.32) rgba(255,190,80,.55),inset 0 calc(var(--cs)*-.05) 0 rgba(160,80,0,.35),inset 0 calc(var(--cs)*.04) 0 rgba(255,255,255,.55)}
.cell.on .glass{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),transparent 55%)}
@media (hover:hover){.cell:hover{filter:brightness(1.12)}}
.cell.hit{animation:hit .22s cubic-bezier(.3,1.5,.5,1)}
@keyframes hit{0%{transform:scale(.86)}100%{transform:scale(1)}}
.cell.flip{animation:flip .26s ease-out}
@keyframes flip{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.cell.cur{outline:3px solid #fff;outline-offset:2px}
.cell.hinted::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--cs)*.26);box-shadow:0 0 0 3px #7FB2FF,0 0 16px #7FB2FF;animation:pulse 1.1s ease-in-out infinite;pointer-events:none}
@keyframes pulse{50%{opacity:.35}}
.cell.glow{animation:hit .3s cubic-bezier(.3,1.5,.5,1)}
.board.won .cell{animation:wave .9s ease-out both;animation-delay:calc(var(--d)*60ms)}
@keyframes wave{0%{background:var(--off)}35%{background:var(--lamp-hi);box-shadow:0 0 calc(var(--cs)*.5) rgba(255,210,120,.8);transform:scale(1.06)}100%{background:var(--off);transform:scale(1)}}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* a phone on its side, or a short frame: the bar and tools at the sides */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;padding:.5em .4em .5em max(.6em,env(safe-area-inset-left));gap:.5em}
  .readout{min-width:6.4em}
  .dock{flex-direction:column;padding:.5em max(.6em,env(safe-area-inset-right)) .5em .4em;gap:.5em}
  .tool{min-width:6.6em;justify-content:flex-start}
}
@media (max-width:360px){.tool span{display:none}.tool{padding:0 .9em}}

/* cards */
.card.result h2{color:var(--lamp-lo)}
.big-stars{display:flex;justify-content:center;gap:.25em;font-size:2.6em;line-height:1;margin:.05em 0 .25em}
.big-stars span{color:#D6DDE6}
.big-stars .got{color:var(--star);animation:star .45s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--k)*140ms);text-shadow:0 2px 8px rgba(242,178,39,.45)}
@keyframes star{from{transform:scale(0) rotate(-40deg)}}
.how p{margin:.25em 0}
.how-art{display:grid;place-items:center;margin:.1em 0 .6em}
.mini{display:grid;grid-template-columns:repeat(3,2.2em);grid-auto-rows:2.2em;gap:.3em;padding:.35em;background:var(--deck);border-radius:.6em}
.mini span{border-radius:.45em;background:var(--off)}
.mini .on{background:radial-gradient(circle,var(--lamp-hi),var(--lamp) 60%,var(--lamp-lo));box-shadow:0 0 10px rgba(255,190,80,.5)}
.mini .tapped{outline:2px solid #fff;outline-offset:1px}
@media (max-height:420px){.how-art{display:none}}
/* short screens: cards stay whole, their buttons side by side */
@media (max-height:520px){
  .card{padding:.8em 1em .8em;width:min(34em,100%)}
  .card h2{font-size:1.3em;margin:0 0 .35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.45em 1.4em;font-size:1.05em}
  .card .stats{margin:.1em 0 .2em}
  .card .note{margin:.15em 0}
  .big-stars{font-size:2em;margin:0}
  .how{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;font-size:.92em}
  .how .note{grid-column:1/-1}
  .rows{gap:.35em}
  .card .row{min-height:44px;padding:.35em .8em}
}