/* A playable Skirr board in the Tidepool look (TidepoolTheme.swift colours,
   GameScene+HUD/Toast sizes). Follows the page theme; .sk-dark / .sk-light force one. */

.sk {
  --sk-board: #dbe7ec;
  --sk-hidden: #ffffff;
  --sk-hidden-side: #c3d3da;
  --sk-hairline: #cfdde3;
  --sk-letter: #fff4dc;
  --sk-letter-side: #dcc48d;
  --sk-found: #2f8f83;
  --sk-found-ink: #ffffff;
  --sk-found-side: #1f6b61;
  --sk-azure: #2a86e0;
  --sk-azure-side: #1b5792;
  --sk-skull: #b0132b;
  --sk-skull-side: #7d0c1d;
  --sk-empty: #c3d6de;
  --sk-hud: #3b4a55;
  --sk-more: #f1a23b;
  --sk-more-side: #b8741f;
  --sk-more-ink: #0f1d26;  /* dark in both modes: 8.2:1 on orange (app a0ca43f) */
  --sk-unused: #a9b7be;
  --sk-heart: #e2574c;
  --sk-missed: #f8efdc;
  --sk-missed-ink: #909492;
  --sk-key-ink: #3b4a55;
  --sk-gold: #f2c14e;
  --sk-veil: rgba(238, 244, 246, .86);
  --sk-shadow: rgba(20, 40, 55, .28);
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  color: var(--sk-hud);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.sk.sk-dark {
  --sk-board: #172a35; --sk-hidden: #24404f; --sk-hidden-side: #0b161d; --sk-hairline: #2f4b5b;
  --sk-letter: #f3e6c6; --sk-letter-side: #b19c6a;
  --sk-found: #3fb3a3; --sk-found-ink: #0f1d26; --sk-found-side: #24736a;
  --sk-azure: #4ea2f5; --sk-azure-side: #33699f;
  --sk-skull: #d12a43; --sk-skull-side: #8f1427;
  --sk-empty: #2a4a5b; --sk-hud: #cfe0e7;
  --sk-unused: #4d6674; --sk-heart: #ef6a5e;
  --sk-missed: #4e5959; --sk-missed-ink: #d8cdb0; --sk-key-ink: #e3eef2;
  --sk-veil: rgba(15, 29, 38, .84); --sk-shadow: rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sk:not(.sk-light) {
    --sk-board: #172a35; --sk-hidden: #24404f; --sk-hidden-side: #0b161d; --sk-hairline: #2f4b5b;
    --sk-letter: #f3e6c6; --sk-letter-side: #b19c6a;
    --sk-found: #3fb3a3; --sk-found-ink: #0f1d26; --sk-found-side: #24736a;
    --sk-azure: #4ea2f5; --sk-azure-side: #33699f;
    --sk-skull: #d12a43; --sk-skull-side: #8f1427;
    --sk-empty: #2a4a5b; --sk-hud: #cfe0e7;
    --sk-unused: #4d6674; --sk-heart: #ef6a5e;
    --sk-missed: #4e5959; --sk-missed-ink: #d8cdb0; --sk-key-ink: #e3eef2;
    --sk-veil: rgba(15, 29, 38, .84); --sk-shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] .sk:not(.sk-light) {
  --sk-board: #172a35; --sk-hidden: #24404f; --sk-hidden-side: #0b161d; --sk-hairline: #2f4b5b;
  --sk-letter: #f3e6c6; --sk-letter-side: #b19c6a;
  --sk-found: #3fb3a3; --sk-found-ink: #0f1d26; --sk-found-side: #24736a;
  --sk-azure: #4ea2f5; --sk-azure-side: #33699f;
  --sk-skull: #d12a43; --sk-skull-side: #8f1427;
  --sk-empty: #2a4a5b; --sk-hud: #cfe0e7;
  --sk-unused: #4d6674; --sk-heart: #ef6a5e;
  --sk-missed: #4e5959; --sk-missed-ink: #d8cdb0; --sk-key-ink: #e3eef2;
  --sk-veil: rgba(15, 29, 38, .84); --sk-shadow: rgba(0, 0, 0, .5);
}

/* HUD: a square button on the left, the score pill in the middle (as tall as
   the button, digits about 60% of it), then a row of ten hearts. */
.sk-hud { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; }
.sk-again {
  all: unset; box-sizing: border-box; cursor: pointer; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; background: var(--sk-hidden); color: var(--sk-hud);
  box-shadow: 0 3px 0 var(--sk-hidden-side); transition: transform .12s, box-shadow .12s;
}
.sk-again svg { width: 22px; height: 22px; }
.sk-again:active { transform: translateY(3px); box-shadow: none; }
.sk-again:focus-visible { outline: 3px solid var(--sk-azure); outline-offset: 2px; }
.sk-score {
  justify-self: center; height: 46px; display: grid; place-items: center; padding: 0 16px; border-radius: 13px;
  background: var(--sk-hidden); color: var(--sk-found);
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif; font-weight: 600; font-size: 28px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.sk-hearts { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3%; padding: 0 2px; }
.sk-hearts svg { width: 100%; max-width: 32px; justify-self: center; color: var(--sk-heart); transition: opacity .35s, transform .35s; }
.sk-hearts svg.is-lost { opacity: .22; }
.sk-hearts svg.is-pop { animation: sk-beat .5s ease-out; }
@keyframes sk-beat { 40% { transform: scale(1.35); } }

/* Board */
.sk-wrap { position: relative; container-type: inline-size; }
.sk-board {
  --cols: 7;
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2.2cqw; padding: 3cqw;
  background: var(--sk-board); border-radius: 20px;
  position: relative; touch-action: manipulation;
}
/* As GameBoardTileComponent draws them: a covered tile is flat with a 1pt
   hairline; a revealed tile sits on its solid side, the same rounded tile
   4pt lower (about 9% of a tile) in the side colour under 8% black. */
.sk-t {
  all: unset; box-sizing: border-box; position: relative;
  aspect-ratio: 1; border-radius: 16%;
  display: grid; place-items: center;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif; font-weight: 600;
  font-size: calc(54cqw / var(--cols)); line-height: 1;
  --side-h: .125em;
  background: var(--sk-hidden); color: var(--sk-hud);
  box-shadow: inset 0 0 0 1px var(--sk-hairline);
  cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.sk-t:focus-visible { outline: 3px solid var(--sk-azure); outline-offset: 2px; }
.sk-t svg { width: 60%; height: 60%; transition: opacity .25s; }
.sk-t.is-reach { box-shadow: inset 0 0 0 1px var(--sk-hairline), 0 0 0 .07em var(--sk-azure); }
.sk-t.is-empty { background: transparent; box-shadow: inset 0 0 0 .05em var(--sk-empty); cursor: default; }
.sk-t.is-empty.is-reach { box-shadow: inset 0 0 0 .07em var(--sk-azure); }
.sk-t.is-blank { background: var(--sk-letter); box-shadow: 0 var(--side-h) 0 color-mix(in srgb, var(--sk-letter-side) 92%, #000); }
.sk-t.is-found { background: var(--sk-found); color: var(--sk-found-ink); box-shadow: 0 var(--side-h) 0 color-mix(in srgb, var(--sk-found-side) 92%, #000); }
.sk-t.is-spy, .sk-t.is-shape { background: var(--sk-azure); color: #fff; box-shadow: 0 var(--side-h) 0 color-mix(in srgb, var(--sk-azure-side) 92%, #000); }
.sk-t.is-skull { background: var(--sk-skull); color: #fff; box-shadow: 0 var(--side-h) 0 color-mix(in srgb, var(--sk-skull-side) 92%, #000); }
.sk-t.is-missed { background: var(--sk-missed); color: var(--sk-missed-ink); box-shadow: none; }
.sk-t.is-spent svg { opacity: 0; }
.sk-t.is-rise { animation: sk-rise .5s cubic-bezier(.2, .8, .3, 1); z-index: 1; }
.sk-t.is-hop { animation: sk-hop .3s ease-out; }
.sk-t.is-shake { animation: sk-shake .4s; }
.sk-board.is-done .sk-t { cursor: default; }
/* TidepoolEffects.rise: sunk by its own side at 0.6, up past rest at 1.06 by
   60% with a soft drop shadow, then settles. */
@keyframes sk-rise {
  0% { transform: translateY(var(--side-h)) scale(.6); filter: none; }
  60% { transform: translateY(-.3em) scale(1.06); filter: drop-shadow(0 .25em .3em rgba(20, 40, 55, .28)); animation-timing-function: ease-in-out; }
  100% { transform: none; filter: none; }
}
@keyframes sk-hop { 45% { transform: translateY(-25%); } }
@keyframes sk-shake { 20%, 60% { transform: translateX(-6%); } 40%, 80% { transform: translateX(6%); } }

.sk-ping {
  position: absolute; pointer-events: none; border-radius: 50%;
  border: 3px solid var(--sk-azure); opacity: .9;
  transform: translate(-50%, -50%) scale(.2);
  animation: sk-ping .7s ease-out forwards;
}
@keyframes sk-ping { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* "+1" / "−1" and a heart floating off a tile */
.sk-delta {
  position: absolute; pointer-events: none; z-index: 3; display: flex; align-items: center; gap: .1em;
  transform: translate(-50%, -50%); font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: 1;
  animation: sk-float .95s ease-out forwards;
}
.sk-delta.is-up { color: var(--sk-found); }
.sk-delta.is-down { color: var(--sk-skull); }
.sk-delta svg { width: .9em; height: .9em; color: var(--sk-heart); }
@keyframes sk-float { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; } 15% { transform: translate(-50%, -70%) scale(1); } 55% { opacity: 1; } 100% { transform: translate(-50%, -260%); opacity: 0; } }
.sk-spark { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--sk-gold); pointer-events: none; z-index: 2; animation: sk-spark .65s ease-out forwards; }
@keyframes sk-spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

/* The level title as the board comes in: "Level" over a big number in the score's colour. */
.sk-title {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: .9; opacity: 0; container-type: inline-size;
}
.sk-title small { font-size: 11cqw; color: var(--sk-hud); }
.sk-title b { font-size: 33cqw; color: var(--sk-found); font-weight: 600; }
.sk-title b.is-word { font-size: 15cqw; }
.sk-title.is-on { animation: sk-title 1.5s ease-out; }
@keyframes sk-title { 0% { opacity: 0; transform: scale(.9); } 15%, 60% { opacity: .82; transform: none; } 100% { opacity: 0; } }

/* Toast: a capsule sized to its text, over the bottom of the board, with a
   small tile saying what it's about. Touches pass through it. */
.sk-toast {
  position: absolute; left: 50%; bottom: 12px; z-index: 4; max-width: 92%; width: max-content;
  display: flex; align-items: center; gap: 10px;
  background: var(--sk-hidden); color: var(--sk-hud); border: 1px solid var(--sk-hairline);
  border-radius: 18px; padding: 8px 15px 8px 8px;
  font-weight: 700; font-size: 16.5px; line-height: 1.25; text-wrap: balance;
  box-shadow: 0 6px 18px var(--sk-shadow);
  opacity: 0; transform: translateX(-50%) scale(.85); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.sk-toast.is-on { opacity: 1; transform: translateX(-50%); animation: sk-toast .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sk-toast { 0% { transform: translateX(-50%) scale(.7); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
.sk-toast i {
  flex: none; width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; color: #fff;
  font-style: normal; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 18px;
}
.sk-toast i svg { width: 72%; height: 72%; }
.sk-toast i.t-info, .sk-toast i.t-spy { background: var(--sk-azure); }
.sk-toast i.t-found { background: var(--sk-found); color: var(--sk-found-ink); }
.sk-toast i.t-skull { background: var(--sk-skull); }
.sk-toast i.t-heart { background: var(--sk-heart); }
.sk-toast i.t-more { background: var(--sk-more); color: var(--sk-more-ink); }
.sk-toast i.t-blank { background: var(--sk-letter); box-shadow: 0 3px 0 color-mix(in srgb, var(--sk-letter-side) 92%, #000); }
.sk-toast i.t-heart svg { width: 60%; height: 60%; }

/* End card */
.sk-over {
  position: absolute; inset: 0; border-radius: 20px; z-index: 5; container-type: inline-size;
  display: grid; place-content: center; text-align: center; gap: 4px;
  background: var(--sk-veil); animation: sk-fade .4s ease-out;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: 1;
}
.sk-over[hidden] { display: none; }
.sk-over.is-fading { opacity: 0; transition: opacity .5s ease-in; }
.sk-over small { font-size: 12cqw; color: var(--sk-hud); }
.sk-over b { font-size: 17cqw; font-weight: 600; color: var(--sk-found); }
.sk-over b.is-gold { color: var(--sk-gold); }
.sk-over b.is-bad { color: var(--sk-skull); }
.sk-over button {
  all: unset; cursor: pointer; margin: 18px auto 0; padding: 11px 24px; border-radius: 14px;
  background: var(--sk-found); color: var(--sk-found-ink); font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 0 var(--sk-found-side);
}
.sk-over .sk-store { margin-top: 14px; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 15px; color: var(--sk-azure); }
.sk-over button:focus-visible { outline: 3px solid var(--sk-azure); outline-offset: 3px; }
@keyframes sk-fade { from { opacity: 0; } }

/* "Try again" after a lost board: pops up over the board's foot, where the toasts go. */
.sk-retry {
  all: unset; box-sizing: border-box; cursor: pointer; position: absolute; left: 50%; bottom: 12px; z-index: 6;
  transform: translateX(-50%); padding: 12px 26px; border-radius: 16px;
  background: var(--sk-found); color: var(--sk-found-ink);
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 17px; white-space: nowrap;
  box-shadow: 0 4px 0 var(--sk-found-side), 0 8px 22px var(--sk-shadow);
  animation: sk-toast .45s cubic-bezier(.3, 1.6, .5, 1);
}
.sk-retry[hidden] { display: none; }
.sk-retry:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 1px 0 var(--sk-found-side); }
.sk-retry:focus-visible { outline: 3px solid var(--sk-azure); outline-offset: 3px; }

.sk-hint { text-align: center; font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: 1.1rem; min-height: 1.3em; margin-top: 4px; }

/* Keyboard: Fredoka Medium keys with a 3pt side; orange keys carry a count badge. */
.sk-keys { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.sk-row { display: flex; justify-content: center; gap: 1.2%; }
.sk-k {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  flex: 0 0 8.8%; aspect-ratio: .86; border-radius: 26%;
  display: grid; place-items: center;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif; font-weight: 500; font-size: clamp(.8rem, 5cqw, 1.5rem);
  background: var(--sk-hidden); color: var(--sk-key-ink);
  box-shadow: 0 3px 0 var(--sk-hidden-side);
  transition: transform .15s, background-color .2s, box-shadow .2s;
}
.sk-k:hover { transform: translateY(-2px); }
.sk-k:active { transform: translateY(3px); box-shadow: none; }
.sk-k:focus-visible { outline: 3px solid var(--sk-azure); outline-offset: 2px; }
.sk-k.is-more { background: var(--sk-more); color: var(--sk-more-ink); box-shadow: 0 3px 0 var(--sk-more-side); }
.sk-k.is-all { background: var(--sk-found); color: var(--sk-found-ink); box-shadow: none; }
.sk-k.is-unused { background: color-mix(in srgb, var(--sk-hidden) 45%, transparent); color: var(--sk-unused); box-shadow: none; }
.sk-k:disabled { cursor: default; transform: none; }
/* The picked key (KeyboardTileNode.isCurrent, Mark): a short white bar under
   its letter. A white key turns azure on its usual side; an orange key keeps
   its face and stands 2pt up on a deeper (5pt) azure side. */
.sk-k.is-sel { background: var(--sk-azure); color: #fefefe; box-shadow: 0 3px 0 var(--sk-azure-side); }
.sk-k.is-cur.is-more { box-shadow: 0 5px 0 var(--sk-azure-side); transform: translateY(-2px); }
.sk-k.is-cur.is-more:active { transform: translateY(3px); box-shadow: none; }
.sk-k.is-cur.is-sel::after, .sk-k.is-cur.is-more::after {
  content: ""; position: absolute; left: 28%; width: 44%; bottom: 4px; height: 3px; border-radius: 2px; background: #fefefe;
}
.sk-k i {
  position: absolute; top: -18%; right: -16%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--sk-key-ink); color: var(--sk-hidden);
  font-style: normal; font-size: .62em; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sk *, .sk-ping { animation: none !important; transition: none !important; }
  .sk-toast.is-on { opacity: 1; }
}