/* Link Pairs: a clean light page (Nordic: soft grey-blue ground, white paper grid, bright paths). */
:root{--bg:#EEF1F6;--bg2:#DDE3EC;--paper:#FFFFFF;--ink:#1B2433;--ink-soft:#4D5868;--ink-dim:#7D8796;--line:rgba(27,36,51,.13);
  --blue:#2F6FD0;--blue-lo:#1F4F9E;--grid:#D3DAE4;--gold:#F2B134;--warn:#C9503A;color-scheme:light}
body{background:radial-gradient(120% 90% at 50% 0%,#FAFBFD,var(--bg) 55%,var(--bg2));color:var(--ink);font-size:19px}
.screen{background:none}

/* type and buttons */
.title{font:800 clamp(2.1em,7.5vmin,3.6em)/1.02 var(--sans);color:var(--ink);text-shadow:none;letter-spacing:-.015em;text-wrap:balance}
.pill{font:700 1.15em/1 var(--sans);color:#fff;background:var(--blue);box-shadow:0 2px 0 var(--blue-lo),0 8px 18px rgba(47,111,208,.28);
  min-height:52px;padding:.8em 2.6em;transition:transform .08s,filter .15s}
.pill:hover{filter:brightness(1.07)}
.pill:active{transform:translateY(2px);box-shadow:0 0 0 var(--blue-lo),0 4px 10px rgba(47,111,208,.25)}
.link{color:var(--blue);min-height:44px;font-weight:600;font-size:1em}
.jewel{width:48px;height:48px;border:1px solid var(--line);background:var(--paper);box-shadow:0 1px 3px rgba(20,30,40,.12);transition:transform .08s}
.jewel:active{transform:scale(.94)}
.jewel svg{stroke:var(--ink)}
.jewel:disabled{opacity:.38}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.toggle:focus-visible,.row:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.board.play:focus{outline:none}

/* cards */
.veil{background:rgba(27,36,51,.38)}
.card{background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 50px rgba(20,30,40,.25);color:var(--ink)}
.card h2{font:800 1.5em/1.15 var(--sans);color:var(--ink)}
.card .x{border-color:var(--line);color:var(--ink);width:44px;height:44px}
.card .x svg{stroke:var(--ink)}
.card > .row{margin-top:.45em;min-height:48px;color:var(--ink)}
.card > .row small{color:var(--ink-soft)}
.row{background:var(--bg);border-color:var(--line)}
.choice{border-color:var(--line);background:var(--bg);color:var(--ink);min-width:3em;min-height:44px;font-weight:700;font-size:1.05em}
.choice[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
.choice:disabled{opacity:.45;cursor:default}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em}
.levels .choice{padding:.35em 0;min-width:0}
.toggle{background:#C3CBD6;border-color:var(--line);width:3.2em;height:1.8em}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:var(--blue)}
.toggle[aria-pressed=true]::after{background:#fff;left:1.55em}
.stats{color:var(--ink-soft);gap:1.2em}
.stats b{font:800 1.7em/1.1 var(--sans);color:var(--ink)}
.stats div{text-align:center}
.note{color:var(--ink-soft);margin:.3em 0}
.note.big{font-size:1.15em;color:var(--ink);font-weight:700}
.stars{font-size:2.6em;line-height:1;text-align:center;margin:0 0 .15em;color:var(--gold);letter-spacing:.08em;animation:starpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes starpop{from{transform:scale(.3);opacity:0}}
.card .rows .note{text-align:left;margin:0}
.toast{background:var(--ink);color:#fff;border:0;font-weight:600;max-width:calc(100% - 2em);text-align:center;bottom:max(1.2em,env(safe-area-inset-bottom));pointer-events:none}

/* the tray and the grid (board and home preview share them) */
.tray{position:relative;padding:var(--pad,8px);border-radius:18px;background:linear-gradient(180deg,#E4E9F0,#D6DDE7);
  box-shadow:inset 0 2px 6px rgba(20,30,40,.14),0 1px 0 #fff,0 14px 30px rgba(20,30,40,.12)}
.board{position:relative;left:auto;top:auto;display:block;overflow:visible;-webkit-user-select:none;user-select:none}
.board.play{touch-action:none;cursor:pointer}
.paper{fill:var(--paper)}
.lines{fill:none;stroke:var(--grid);stroke-width:.03}
.cell{opacity:.16;transition:opacity .2s}
.cell.on{opacity:.26}
.line{fill:none;stroke-width:.34;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.line.done{stroke-width:.38;opacity:1}
.line.flash{animation:flash 1s ease-out}
@keyframes flash{0%,35%{stroke-width:.56}}
.dot .pop{transform-box:fill-box;transform-origin:center;transition:transform .14s}
.halo{opacity:0;transition:opacity .2s}
.dot.linked .halo{opacity:.35}
.disc{stroke:rgba(0,0,0,.14);stroke-width:.03}
.glyph{pointer-events:none}
.dot.ding .pop{animation:ding .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes ding{40%{transform:scale(1.28)}}
.head{opacity:.45;pointer-events:none;animation:headpulse .9s ease-in-out infinite alternate}
@keyframes headpulse{to{opacity:.22}}
.ready{fill:none;stroke-width:.07;stroke-dasharray:.16 .1;pointer-events:none;animation:spin 3s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.cursor{fill:none;stroke:var(--ink);stroke-width:.06;stroke-dasharray:.14 .08;pointer-events:none}
.cursor.held{stroke-dasharray:none;stroke-width:.08}
.board.shake{animation:bshake .3s}
@keyframes bshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.board.empties .paper{animation:empties .5s ease-in-out 3}
@keyframes empties{50%{fill:#FFE9B8}}
.board.solved .dot .pop{animation:wave .7s cubic-bezier(.3,1.5,.5,1) var(--w,0ms) both}
.board.solved .cell{opacity:.34}
@keyframes wave{40%{transform:translateY(-.14px) scale(1.25)}}
.board.mini{cursor:default}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* home: preview and words side by side when wide, stacked when tall */
.home{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(1em,5vw,3.2em);padding:1.2em;text-align:center}
.home-art{position:relative;flex:none}
.home-art .tray{--pad:7px}
.thumb-tag{position:absolute;left:50%;bottom:-.8em;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3em .9em;font-size:.82em;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(20,30,40,.1)}
.home-side{display:flex;flex-direction:column;align-items:center;gap:.7em;max-width:22em}
.tagline{color:var(--ink-soft);text-shadow:none;margin:0}
.links{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
@media (orientation:portrait){.home{flex-direction:column;gap:1.7em}}
@media (max-height:440px){.home{padding:.5em 1em}.home .title{font-size:2em}.home-side{gap:.25em}.pill{min-height:48px;padding:.6em 2.2em}.tagline{font-size:.9em}}

/* the game: bar over the board, or beside it on a short wide screen */
#game{display:flex;flex-direction:column}
.bar{width:min(100%,560px);margin:0 auto;padding:max(.5em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .2em max(.6em,env(safe-area-inset-left))}
.status{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:0;text-align:center;gap:.15em}
.lvl-name{font-weight:700;font-size:.92em;color:var(--ink-soft);white-space:nowrap}
.left{font-weight:800;font-size:1.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter{width:7em;height:6px;border-radius:3px;background:rgba(27,36,51,.12);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2F7FE0,#1FA35B);transition:width .2s}
.tools{display:flex;gap:.45em}
.felt{flex:1;position:relative;min-height:0;display:grid;place-items:center;overflow:hidden}
.felt .tray{--pad:clamp(5px,1.2vmin,10px)}
@media (orientation:landscape) and (max-height:540px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;gap:.6em;padding:.5em .3em .5em max(.6em,env(safe-area-inset-left))}
  .bar .tools{flex-direction:column}
  .status{font-size:.85em;max-width:7.5em}
  .meter{width:5.5em}
  .lvl-name,.left{white-space:normal}
  .felt{padding-right:max(0px,env(safe-area-inset-right))}
}
@media (max-height:480px){.card .stats{margin:0;gap:1em}.card .stats b{font-size:1.3em}.card .note{margin:.1em 0}.card .note.big{font-size:1em}.card > .row{margin-top:0}
  .stars{font-size:1.8em}.card .rows{gap:.15em}.card .rows .note{font-size:.88em;line-height:1.3}.card .pill{min-height:44px;padding:.5em 2em}}