/* Thin Ice on the web. Colours are the Android app's (UI/UiPaint.cs), so the
   two builds read as one game.

   THE APP'S CONSTRUCTION, copied from its screens zoomed in (2026-10-27): every
   control is a dark INK edge, then its fill, then a thin KEYLINE set INSIDE
   with a gap all round. The keyline never touches the edge; putting it there
   was the first thing that looked wrong. Cards wear a light blue outer edge
   instead of ink. Type carries a thin ink ring and no drop. */
:root {
  --ground: #0B2132;
  --card: #254462;
  --row: #1E3A55;
  --edge: #5E8CAD;
  --rim: #4F84AA;          /* a card's light outer edge */
  --ink: #0A1828;
  --accent: #46A7D3;
  --snow: #E8F4FB;
  --dim: #9FBED2;
  --tally: #A6DBF2;
  --warn: #FF8A7A;

  --u: min(1vw, 0.46vh);   /* one design unit: the phone's width / 100 */
  --edge-w: calc(0.55 * var(--u));     /* the ink edge */
  --key-w: calc(0.28 * var(--u));      /* the keyline */
  --key-gap: calc(0.8 * var(--u));     /* edge to keyline */
}

@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(ellipse at 50% 30%, #12304A 0%, var(--ground) 70%) fixed;
  background-color: var(--ground);
  color: var(--snow);
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
  touch-action: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

#errbar {
  position: fixed; inset: 0 0 auto 0; z-index: 99;
  background: #8E1414; color: #fff;
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  padding: 8px 12px; white-space: pre-wrap; word-break: break-all;
}

/* ---- type ---------------------------------------------------------------- */
/* A thin even ring, eight directions. The first version also dropped the ink
   below each letter and ran twice this weight, which the user called "too
   thick" on nearly every screen. */
.ink {
  --o: 0.045em;
  text-shadow:
    var(--o) 0 0 var(--ink), calc(-1 * var(--o)) 0 0 var(--ink),
    0 var(--o) 0 var(--ink), 0 calc(-1 * var(--o)) 0 var(--ink),
    var(--o) var(--o) 0 var(--ink), calc(-1 * var(--o)) var(--o) 0 var(--ink),
    var(--o) calc(-1 * var(--o)) 0 var(--ink), calc(-1 * var(--o)) calc(-1 * var(--o)) 0 var(--ink);
}
.head.ink, .btn.primary.ink, .lvl-num.ink, .big.ink { --o: 0.055em; }

/* White glyphs (the restore arrow) carry a dark edge, as the app's do. */
.inked-img {
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
          drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}

/* ---- the two-line rim ---------------------------------------------------- */
/* --r is each control's corner radius; the keyline's follows it in. */
.rim {
  position: relative;
  border: var(--edge-w) solid var(--ink);
  border-radius: var(--r, 0);
}
.rim::after {
  content: ""; position: absolute; pointer-events: none;
  inset: var(--key-gap);
  border: var(--key-w) solid var(--key, var(--edge));
  border-radius: max(0px, calc(var(--r, 0px) - var(--key-gap) - var(--edge-w)));
}

/* ---- pills: the board's LEVEL, clock and move count ----------------------- */
.pill {
  --r: calc(2.4 * var(--u));
  display: inline-flex; align-items: center; justify-content: center; gap: calc(1.4 * var(--u));
  background: var(--card);
  padding: 0 calc(3.4 * var(--u));
  height: calc(10.5 * var(--u));
  font-size: calc(4.2 * var(--u));
  white-space: nowrap;
}
.pill img { height: 1.2em; position: relative; z-index: 1; }
#clock.low .t { color: var(--warn); }

/* RESTART and PAUSE, under the top rule */
.chip {
  --r: calc(2 * var(--u));
  --key-gap: calc(0.6 * var(--u));
  display: inline-flex; align-items: center; gap: calc(1.4 * var(--u));
  background: var(--card);
  height: calc(8.6 * var(--u));
  padding: 0 calc(3.4 * var(--u));
  font-size: calc(3.3 * var(--u));
}
.chip img { height: 1.25em; }
.chip:disabled { opacity: .42; }

/* square tiles carrying one glyph: the gear, the house */
.tile {
  --r: calc(2.4 * var(--u));
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(10.5 * var(--u)); height: calc(10.5 * var(--u));
  background: var(--card);
}
.tile img { width: 64%; position: relative; z-index: 1; }

/* ---- cards ---------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 10, .82);
  padding: 0 calc(7.7 * var(--u));
}
.card {
  --r: calc(5 * var(--u));
  --key: rgba(94, 140, 173, .55);
  --key-gap: calc(1.4 * var(--u));
  position: relative;
  width: 100%; max-width: calc(85 * var(--u));
  background: var(--card);
  border: calc(0.75 * var(--u)) solid var(--rim);
  border-radius: var(--r);
  box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--ink);
  padding: calc(13 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  text-align: center;
}
.card::after {
  content: ""; position: absolute; pointer-events: none;
  inset: var(--key-gap);
  border: var(--key-w) solid var(--key);
  border-radius: calc(var(--r) - var(--key-gap));
}
.card > * { position: relative; z-index: 1; }

/* the heading hangs in a bar a third above the card's top edge */
.card > .head {
  --r: calc(3 * var(--u));
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -33%);
  min-width: 68%;
  background: var(--card);
  padding: calc(2.4 * var(--u)) calc(5 * var(--u));
  font-size: calc(7.6 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
  z-index: 2;
}
.card > .head.warn { color: var(--warn); }
.rule {
  height: 2px; margin: calc(4 * var(--u)) 4%;
  background: #14293B; box-shadow: 0 1px 0 #3A6585;
}

/* the round badge each ending carries: an ink ring, a lit fill, and an inset
   blue ring with a gap, as on the app */
.badge {
  position: relative;
  width: calc(25 * var(--u)); height: calc(25 * var(--u));
  margin: 0 auto calc(4 * var(--u));
  border-radius: 50%;
  background: linear-gradient(#4A7193, #1D3852);
  border: calc(0.8 * var(--u)) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.badge::after {
  content: ""; position: absolute; inset: calc(1.1 * var(--u));
  border-radius: 50%; border: calc(0.6 * var(--u)) solid var(--accent);
}
.badge img { width: 50%; position: relative; z-index: 1; }
.say { font-size: calc(4 * var(--u)); }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
  --r: calc(3.6 * var(--u));
  --key-gap: calc(0.9 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  width: 100%;
  height: calc(15.8 * var(--u));
  background: var(--card);
  font-size: calc(4.8 * var(--u));
  white-space: nowrap;
}
.btn > * { position: relative; z-index: 1; }
.btn img { height: 1.55em; }
.btn.primary { background: var(--accent); --key: var(--ink); font-size: calc(8 * var(--u)); }
.btn:active { filter: brightness(.86); }
.row { display: flex; gap: calc(2.6 * var(--u)); margin-top: calc(2.6 * var(--u)); }
.row > .btn { flex: 1; min-width: 0; }
/* half-width buttons set their words smaller, and never wrap */
.row > .btn:not(:only-child) { font-size: calc(4.4 * var(--u)); }
.row > .btn:not(:only-child) img { height: 1.35em; }
.row > .btn.long:not(:only-child) { font-size: calc(3.5 * var(--u)); gap: calc(1.3 * var(--u)); }