/* Stone Vault only, on top of kit/midnight.css and kit/arcade.css. The Crystal Deep look: every colour of the game, on the canvas
   too, is in this block. js/art.js reads the pieces' colours from here. */
:root {
  --bg-0: #040208; --bg-1: #07040e; --bg-2: #0c0716;
  --ink: #f3ecff; --ink-soft: #bfaee0;
  --edge: rgba(120, 82, 190, 0.8); --edge-bright: rgba(176, 120, 240, 0.95);
  --glow: rgba(120, 60, 220, 0.22); --glow-strong: rgba(150, 70, 240, 0.4); --sheen: rgba(210, 180, 255, 0.1);
  --glass: linear-gradient(180deg, #120a20, #0a0614);
  --sheet: linear-gradient(180deg, rgba(30, 16, 56, 0.98), rgba(10, 6, 22, 0.98));
  --veil: rgba(3, 1, 8, 0.72);
  --scroll: rgba(150, 100, 230, 0.5);
  --f1: #6d5a94; --f2: #594a7c; --f3: #4b3d6b; --f4: #41355f; --f5: #372d52; --f6: #2d2546;
  --amber: #e35ad8; --amber-rgb: 227, 90, 216; --go-ink: #ffe0fb; --focus: #ffd5fb; --warn: #ff9ab8;
  --hover: 1.25; --press: 0.85;

  /* parts of the screen */
  --crystal-glow: rgba(255, 196, 60, 0.75);
  --heart: #ff2d92; --heart-glow: rgba(255, 45, 146, 0.65); --heart-off: rgba(191, 174, 224, 0.26);
  --pad-a: #4a3573; --pad-b: #2a1c47; --pad-edge: rgba(150, 118, 210, 0.9); --pad-held-a: #6a4ca3; --pad-held-b: #3f2a6a; --pad-hint: #7fd8ff;
  --hub: #231639;
  --use-ring: #d94fdc; --use-glow: rgba(217, 79, 220, 0.55); --use-a: #3a1140; --use-b: #190820; --use-held: #5c1c66;

  /* the rock, from where the light strikes to deep shadow */
  --rock-1: #9a4ce4; --rock-2: #7030c2; --rock-3: #5222a0; --rock-4: #391778; --rock-5: #210c48; --rock-bounce: #a82a88; --rock-far: #0b0614;
  --floor-a: #24202d; --floor-b: #1e1a26; --floor-line: #0d0b12; --floor-lit: rgba(255, 255, 255, 0.05); --contact: rgba(2, 0, 6, 0.75);
  --earth-a: #a56f40; --earth-b: #85582c; --earth-lip: #6b4324; --earth-lip-b: #3e2512; --pebble: #71667b; --pebble-hi: #9a8fa5; --speck: #cf9d69; --dust: #b58652;
  /* boulders */
  --rock-shadow: rgba(0, 0, 0, 0.6); --ball-a: #5a5569; --ball-b: #2e2a38; --ball-c: #15121b; --ball-face: rgba(255, 255, 255, 0.05); --ball-dark: rgba(0, 0, 0, 0.3); --ball-rim: #f2eeff; --ball-rim-hot: #ffb35c;
  /* gems */
  --pink-1: #ffc4ec; --pink-2: #ff6fcb; --pink-3: #f92ba8; --pink-4: #ff4bb9; --pink-5: #d3128c; --pink-6: #960a63; --pink-glow: rgba(255, 45, 170, 0.55);
  --ice-1: #e3fbff; --ice-2: #9becff; --ice-3: #45c8fb; --ice-4: #70d9ff; --ice-5: #1e96e2; --ice-6: #0e5fae; --ice-glow: rgba(60, 190, 255, 0.55);
  --sparkle: #ffffff;
  /* key, door, gate */
  --gold-a: #ffe9a3; --gold-b: #f1b53c; --gold-c: #a86c14; --gold-glow: rgba(255, 196, 70, 0.4);
  --arch-a: #6f6684; --arch-b: #3a3448; --arch-c: #1f1b28; --iron-a: #5a5668; --iron-b: #2c2935; --iron-c: #15131b; --plank: #39343f; --plank-b: #27232c; --bolt: #a9a3b8; --keyhole: #08060c;
  --gate-in: #05030a; --gate-light: rgba(150, 225, 255, 0.85); --gate-core: #e8fbff; --bar-a: #a29cb4; --bar-b: #4d485c;
  /* spikes and fire */
  --plate-a: #2b2835; --plate-b: #1a1822; --plate-edge: rgba(150, 140, 175, 0.35); --hole: #06050a; --spike-a: #e6e3ef; --spike-b: #8f8aa0; --spike-c: #3d3a49; --warn-hot: #ff8a2a; --warn-glow: rgba(255, 130, 40, 0.55);
  --brick-a: #8c4b2f; --brick-b: #6a3520; --brick-line: #2c130a; --brick-top: #a96440; --mouth: #120604;
  --fire-1: #ff3d0a; --fire-2: #ff8a12; --fire-3: #ffd23f; --fire-4: #fff6d0; --fire-glow: rgba(255, 110, 20, 0.5);
  /* the explorer */
  --line: #0e0912; --hood-a: #b33358; --hood-b: #84203f; --hood-c: #4e1128; --face: #2a1419; --skin: #d9a07a; --eye: #ffe9c9;
  --tunic: #3a2433; --pack-a: #a97741; --pack-b: #734a22; --strap: #3f2713; --roll: #c29a62; --buckle: #e6c27a; --trouser: #2b2331; --boot-a: #62402a; --boot-b: #362212;
  --lamp-frame: #2e2a24; --lamp-glass: #ffc24a; --lamp-hot: #fff3bd; --pool-a: rgba(255, 170, 70, 0.42); --pool-b: rgba(255, 130, 40, 0.15);
  --shadow: rgba(0, 0, 0, 0.5);
  --hint: #7fd8ff; --hint-glow: rgba(100, 210, 255, 0.7); --hurt: rgba(255, 50, 80, 0.55); --fade: #040208;

  /* sizes: the room gets its room, then the pad grows on tall phones */
  --gut: calc(10 * var(--u));
  --board-w: calc(1024 * var(--u) - 2 * var(--gut));
  --board-h: calc(var(--board-w) * 13 / 11);
  --pad: clamp(max(calc(110 * var(--u)), 44px), calc((100vh - 130px - var(--board-h) - 24px) / 3), max(calc(110 * var(--u)), 62px));
  --use-size: max(calc(208 * var(--u)), calc(var(--pad) * 1.7));
}
@supports (height: 1dvh) {
  :root { --pad: clamp(max(calc(110 * var(--u)), 44px), calc((100dvh - 130px - var(--board-h) - 24px) / 3), max(calc(110 * var(--u)), 62px)); }
}
body.playing { touch-action: none; }

.screen { padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) var(--gut) 0; gap: calc(10 * var(--u)); }

/* Top line: four plates in a row, as in the sample */
.top { flex: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: max(calc(14 * var(--u)), 4px); }
.bar { width: auto; height: max(calc(70 * var(--u)), 40px); padding: 0 max(calc(14 * var(--u)), 6px) 0 0; justify-content: flex-start; gap: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); border-width: max(1px, calc(3 * var(--u))); box-shadow: none; }
.bar h1 { font-size: max(calc(46 * var(--u)), 15px); white-space: nowrap; }
.bar .icon svg { width: max(calc(44 * var(--u)), 22px); height: max(calc(44 * var(--u)), 22px); }
.stats { grid-template-columns: auto minmax(0, 1fr) auto; gap: max(calc(14 * var(--u)), 4px); }
.stats .plate { height: max(calc(70 * var(--u)), 40px); padding: 0 max(calc(16 * var(--u)), 6px); font-size: max(calc(36 * var(--u)), 13px); white-space: nowrap; border-radius: calc(8 * var(--u)); border-width: max(1px, calc(3 * var(--u))); box-shadow: none; }
#gemsPlate.done { color: var(--go-ink); border-color: var(--amber); }
.hearts { gap: max(calc(8 * var(--u)), 2px); }
.hearts svg { display: block; width: max(calc(38 * var(--u)), 14px); height: auto; fill: var(--heart); filter: drop-shadow(0 0 calc(4 * var(--u)) var(--heart-glow)); transition: fill 0.25s ease; }
.hearts svg.off { fill: var(--heart-off); filter: none; }

/* One slim line under the top: the tip or warning, and the extras the sample had no room for */
.tools { flex: none; width: 100%; min-height: max(calc(66 * var(--u)), 40px); display: flex; align-items: center; gap: max(calc(10 * var(--u)), 4px); grid-area: tray; }
.say { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 calc(8 * var(--u)); font-size: max(calc(31 * var(--u)), 12.5px); line-height: 1.15; color: var(--ink-soft); }
.say.warn { color: var(--warn); }
.say.good { color: var(--go-ink); }
.keys { flex: none; display: flex; align-items: center; gap: 3px; font-size: max(calc(32 * var(--u)), 13px); color: var(--gold-b); }
.keys[hidden] { display: none; }
.keys svg { width: max(calc(52 * var(--u)), 24px); height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.keys b { font-weight: 400; }
.tool { flex: none; display: grid; place-items: center; width: max(calc(66 * var(--u)), 40px); height: max(calc(66 * var(--u)), 40px); padding: 0; color: var(--ink); cursor: pointer; border: max(1px, calc(3 * var(--u))) solid var(--edge); border-radius: calc(10 * var(--u)); background: var(--glass); transition: filter 0.15s ease; }
.tool:hover:not(:disabled) { filter: brightness(var(--hover)); }
.tool:active:not(:disabled) { filter: brightness(var(--press)); }
.tool:disabled { opacity: 0.38; cursor: default; }
.tool svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool.pulse { color: var(--go-ink); border-color: var(--amber); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse {
  50% { box-shadow: 0 0 calc(22 * var(--u)) rgba(var(--amber-rgb), 0.8); }
}

.stage { flex: 100 1 0; width: 100%; max-height: var(--board-h); }

/* Pad and Use button: heavy faceted keys as in the sample */
.controls { flex: 1 0 auto; padding: calc(8 * var(--u)) calc(44 * var(--u)) max(calc(14 * var(--u)), env(safe-area-inset-bottom)); }
.dpad { grid-template: repeat(3, var(--pad)) / repeat(3, var(--pad)); gap: max(2px, calc(6 * var(--u))); }
.dpad .hold { --c: 22%; position: relative; color: var(--ink); cursor: pointer; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate; }
.dpad .hold::before, .dpad .hold::after, .hub::before, .hub::after { content: ""; position: absolute; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.dpad .hold::before { inset: 0; z-index: -2; background: var(--pad-edge); }
.dpad .hold::after { inset: max(1.5px, calc(3 * var(--u))); z-index: -1; background: linear-gradient(180deg, var(--pad-a), var(--pad-b)); }
.dpad .hold svg { width: 56%; height: 56%; fill: currentColor; stroke: none; }
.dpad .hold.held { filter: none; }
.dpad .hold.held::after { background: linear-gradient(180deg, var(--pad-held-a), var(--pad-held-b)); }
.dpad .hold.hinted { color: var(--pad-hint); }
.dpad .hold.hinted::before { background: var(--pad-hint); }
.hub { --c: 18%; position: relative; grid-area: 2 / 2; isolation: isolate; }
.hub::after { inset: 8%; background: var(--hub); }

.hold.round.use { position: relative; width: var(--use-size); height: var(--use-size); color: var(--ink); font-size: calc(var(--use-size) * 0.32); border: max(2px, calc(6 * var(--u))) solid var(--use-ring); background: radial-gradient(circle at 50% 38%, var(--use-a), var(--use-b)); box-shadow: 0 0 calc(24 * var(--u)) var(--use-glow), inset 0 0 calc(18 * var(--u)) var(--use-glow); }
.hold.round.use.held { filter: none; background: radial-gradient(circle at 50% 38%, var(--use-held), var(--use-a)); }
.hold.round.use.hinted { color: var(--pad-hint); border-color: var(--pad-hint); }

/* Level list and cards */
.list-screen .bar { width: 100%; justify-content: space-between; padding: 0 calc(16 * var(--u)); height: max(calc(84 * var(--u)), 44px); }
.list-screen .count { height: max(calc(60 * var(--u)), 30px); }
.lv { border-radius: calc(12 * var(--u)); }
.marks svg.lit, .big-crystals svg.lit { filter: drop-shadow(0 0 calc(5 * var(--u)) var(--crystal-glow)); }
.sheet { border-radius: calc(18 * var(--u)); }
.sheet .btn { white-space: nowrap; }
.big-crystals[hidden] { display: none; }

/* Wide screens: the kit's two columns */
@media (min-aspect-ratio: 5/4) {
  :root { --pad: max(calc(104 * var(--u)), 44px); --use-size: max(calc(230 * var(--u)), 88px); }
  .top { display: contents; }
  .bar { width: 100%; height: max(calc(84 * var(--u)), 44px); padding: 0 calc(20 * var(--u)) 0 calc(8 * var(--u)); }
  .stats { grid-template-columns: 1fr 1.5fr 1fr; gap: calc(16 * var(--u)); }
  .stats .plate { height: max(calc(70 * var(--u)), 34px); }
  .stage { max-height: none; }
  .controls { padding: calc(8 * var(--u)) 0 0; }
  .screen.list-screen { gap: calc(18 * var(--u)); }
}
/* A phone held sideways: one thumb each side of the room */
@media (min-aspect-ratio: 5/4) and (max-height: 540px) {
  :root {
    --pad: clamp(40px, min(calc((100vh - 24px) / 3.4), 6.6vw), 56px);
    --board: min(calc(100vh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc(100vw - 3 * var(--pad) - 250px));
    --panel: calc(100vw - var(--board) - 3 * var(--pad) - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --u: calc(var(--panel) / 900);
    --use-size: clamp(70px, calc(100vh * 0.25), 104px);
  }
  @supports (height: 1dvh) {
    :root { --board: min(calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc(100vw - 3 * var(--pad) - 250px)); }
  }
  .screen:not(.list-screen) {
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    grid-template-columns: calc(3 * var(--pad) + 12px) var(--board) var(--panel);
    grid-template-rows: 1fr auto auto max-content auto 1fr;
    grid-template-areas: "dpad board ." "dpad board bar" "dpad board stats" "dpad board tray" "dpad board use" "dpad board .";
    column-gap: 8px;
    row-gap: 6px;
  }
  .controls { display: contents; }
  .dpad { grid-area: dpad; align-self: center; }
  .hold.round.use { grid-area: use; justify-self: center; }
  .bar { height: 40px; }
  .bar h1 { font-size: clamp(14px, calc(var(--panel) * 0.075), 20px); }
  .stats { gap: 4px; }
  .stats .plate { height: 32px; font-size: clamp(12px, calc(var(--panel) * 0.042), 14px); padding: 0 4px; }
  .hearts svg { width: clamp(11px, calc(var(--panel) * 0.04), 15px); }
  .say { font-size: 12px; padding: 0 2px; flex: 1 0 100%; text-align: center; }
  .tools { flex-wrap: wrap; justify-content: center; gap: 4px 6px; min-height: 0; }
  .tool { width: 40px; height: 40px; }
}

/* the pause card holds Resume, Levels, Restart and Quit */
.pause-card .pair.four { grid-template-columns: repeat(2, 1fr); }