/* Slitherlink Loop: home, the bar, the board. Calm paper, firm dots, big
   numbers; the loop is the one strong colour on the page. */
:root{--dot:#18262F;--loop:#2C6E91;--fill:#D9EAF2;--x:#9AA6AE}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.2em;height:4.2em;border-radius:1em;box-shadow:0 6px 18px rgba(24,38,47,.2)}
.title{font:800 clamp(2.1em,8.6vw,3.4em)/1.05 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(30em,100%)}
.levels{display:grid;grid-template-columns:repeat(5,1fr);width:min(29em,100%)}
.levels .choice{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;min-width:0;padding:.45em .3em}
.levels .choice b{font-size:.92em}
.levels .choice small{font-size:.75em;opacity:.85;font-weight:500}
.row .go{font-size:1.6em;line-height:1;color:var(--ink-dim)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (max-width:520px){.levels{grid-template-columns:repeat(3,1fr)}}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.4em;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.1em}
  .home-body{gap:.5em;flex:0 1 24em}
  .levels{grid-template-columns:repeat(5,1fr)}
  .levels .choice{padding:.3em .2em}
  .home .pill{padding:.5em 2em}
  .links .link{min-height:40px;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(36em,100%);margin:0 auto}
.felt{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:4px;position:relative}
.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,.readout 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;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.1em}
.readout small{color:var(--ink-soft);font-size:.8em;white-space:nowrap}
.readout.clock{flex-direction:row;gap:.35em;min-width:5.2em;font-variant-numeric:tabular-nums}
.readout.clock svg{width:20px;height:20px;stroke:var(--ink-soft)}
.tool{display:flex;align-items:center;gap:.4em;min-height:48px;padding:0 1.05em;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)}
.tool.mode .m-x{display:none}
.tool.mode[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tool.mode[aria-pressed=true] svg{stroke:#fff}
.tool.mode[aria-pressed=true] .m-x{display:inline}
.tool.mode[aria-pressed=true] .m-line{display:none}
.icon-btn:focus-visible,.tool:focus-visible,.board:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}
.making{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--ink-soft);font-weight:700;font-size:1.1em;pointer-events:none}

/* the board: one SVG, units are cells; dots, numbers, lines and crosses */
.board{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:16px;background:var(--panel);
  box-shadow:0 0 0 1px var(--hair),0 10px 28px rgba(24,38,47,.12);cursor:pointer}
.board svg{display:block;width:100%;height:100%;overflow:visible}
.board .fillc{fill:var(--fill);opacity:0;transition:opacity .3s}
.board.won .fillc{opacity:1;transition:opacity .35s calc(var(--k) * 18ms)}
.board .clue{font:700 62px/1 var(--sans);fill:var(--ink);text-anchor:middle;dominant-baseline:central;transition:fill .2s}
.board .clue.done{fill:#9AA9B1}
.board .clue.bad{fill:var(--bad)}
.board .clue.pop{animation:cpop .3s cubic-bezier(.3,1.6,.5,1)}
.board .clue.shake{animation:cshake .32s}
@keyframes cpop{40%{transform:scale(1.28)}}
@keyframes cshake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.board .clue{transform-box:fill-box;transform-origin:center}
.board .ln{stroke:var(--loop);stroke-width:13;stroke-linecap:round;fill:none;opacity:0}
.board .on .ln{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}
.board .on.fresh .ln{animation:draw .14s ease-out}
@keyframes draw{from{stroke-dashoffset:1}}
.board .xx{stroke:var(--x);stroke-width:5.5;stroke-linecap:round;fill:none;opacity:0;transition:opacity .12s}
.board .x .xx{opacity:1}
.board .hl .ln{stroke:var(--gold)}
.board .hl{animation:hl 1.1s ease-out}
@keyframes hl{0%,60%{filter:drop-shadow(0 0 12px var(--gold))}}
.board .ghost{stroke:var(--gold);stroke-width:24;stroke-linecap:round;opacity:0;fill:none}
.board .ghost.show{animation:ghost 1.2s ease-out}
@keyframes ghost{0%,50%{opacity:.75}100%{opacity:0}}
.board .dot{fill:var(--dot)}
.board .dot.bad{fill:var(--bad)}
.board .cursor{fill:none;stroke:var(--accent-hi);stroke-width:6;opacity:0}
.board .cursor.show{opacity:1}
.board .cursor.pen{stroke:var(--gold);stroke-width:9}
.board .trace{fill:none;stroke:var(--gold);stroke-width:17;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.board.won .on .ln{stroke:#1E5272}
.board.won .trace{opacity:1;animation:trace 1.1s ease-in-out both}
@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.board.won .clue{fill:var(--ink)}

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

/* 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.6em}
  .dock{flex-direction:column;padding:.5em max(.6em,env(safe-area-inset-right)) .5em .4em;gap:.5em}
  .tool{min-width:6.4em;justify-content:flex-start}
}
@media (max-width:360px){.tool span{display:none}.tool{padding:0 .9em}}

/* cards */
.card.result h2{color:var(--accent)}
.row .time{font-weight:800;font-variant-numeric:tabular-nums}
.how p{margin:.25em 0}
.how-art{display:grid;place-items:center;margin:.1em 0 .6em}
.how-art svg{width:9em;height:auto}
@media (max-height:480px){.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}
  .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}
}