/* Bridges Islands: a calm light sea (Nordic: soft blue-grey, sand islands, warm wooden bridges). */
:root{--bg:#E6EFF3;--bg2:#D3E2E9;--paper:#FFFFFF;--ink:#17324A;--ink-soft:#4A5F70;--ink-dim:#7A8C99;--line:rgba(23,50,74,.14);
  --blue:#2C7DA0;--blue-lo:#1D5C78;--sea:#BFDDE8;--sea2:#A9CFDE;--sand:#FFF8EC;--shore:#E3C58C;--wood:#7A5233;--wood-hi:#A8774E;
  --green:#3FA47A;--green-sand:#DDF2E3;--warn:#C9503A;--warn-sand:#FBE1DA;--gold:#F2B134;color-scheme:light}
body{background:radial-gradient(120% 90% at 50% 0%,#F6FAFC,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(44,125,160,.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(44,125,160,.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(23,50,74,.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:#C3CDD4;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 sea (board and home preview share them) */
.tray{position:relative;padding:var(--pad,8px);border-radius:18px;background:linear-gradient(180deg,#D9E6EC,#C8D8E0);
  box-shadow:inset 0 2px 6px rgba(20,30,40,.18),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}
.sea{fill:var(--sea)}
.dots circle{fill:rgba(23,50,74,.22)}
.plank{fill:none;stroke:var(--wood);stroke-width:.11;stroke-linecap:round}
.plank.new{stroke-dasharray:1 1;animation:draw .2s ease-out}
@keyframes draw{from{stroke-dashoffset:1}}
.plank.hinted{animation:hinted 1.1s ease-out}
@keyframes hinted{0%,40%{stroke:var(--gold);stroke-width:.2}}
.plank.warn{animation:warn .55s ease-in-out 2}
@keyframes warn{50%{stroke:var(--warn);stroke-width:.18}}
.plank.ghosty{stroke:var(--blue);opacity:.55;stroke-dasharray:.05 .05;stroke-width:.09}
.island{cursor:pointer}
.island .pop{transform-box:fill-box;transform-origin:center;transition:transform .14s}
.shore{fill:var(--shore);transition:fill .2s}
.sand{fill:var(--sand);transition:fill .2s}
.num{font:800 .48px/1 var(--sans);fill:var(--ink);pointer-events:none}
.island.full .shore{fill:var(--green)}
.island.full .sand{fill:var(--green-sand)}
.island.over .shore{fill:var(--warn)}
.island.over .sand{fill:var(--warn-sand)}
.island.over .num{fill:var(--warn)}
.island.nb .shore{stroke:var(--blue);stroke-width:.04;stroke-dasharray:.08 .07}
.island.sel .pop{transform:scale(1.1)}
.island.sel .shore{stroke:var(--blue);stroke-width:.09;stroke-dasharray:none}
.island.cur .shore{stroke:var(--ink);stroke-width:.06;stroke-dasharray:.1 .06}
.island.sel.cur .shore{stroke:var(--blue);stroke-width:.09;stroke-dasharray:none}
.island.ding .pop{animation:ding .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes ding{40%{transform:scale(1.22)}}
.island.shake .pop{animation:ishake .3s}
@keyframes ishake{25%{transform:translateX(-.08px)}75%{transform:translateX(.08px)}}
.island.apart .pop{animation:apart .5s ease-in-out 3}
@keyframes apart{50%{transform:scale(.86);opacity:.7}}
.board.shake{animation:bshake .3s}
@keyframes bshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.board.solved .island .pop{animation:wave .7s cubic-bezier(.3,1.5,.5,1) var(--w,0ms) both}
.board.solved .plank{stroke:var(--wood-hi);transition:stroke .4s}
@keyframes wave{40%{transform:translateY(-.14px) scale(1.18)}}
.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}
.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}
.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}
  .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}}