:root {
  --paper: #efece4;
  --paper-2: #e4e0d5;
  --ink: #1c1c1f;
  --ink-2: #55555c;
  --ink-3: #8a8a92;
  --blue: #2f7bff;
  --red: #ff3b4e;
  --green: #1fc160;
  --yellow: #ffc93c;
  --purple: #9b5de5;
  --gold: #e8a400;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;              /* the visible height on phones, whether the address bar shows or not */
  background: #0b0b0d;
  overflow: hidden;
  font-family: var(--font);
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage { position: relative; }
canvas {
  display: block;
  cursor: none;
  touch-action: none;          /* touches drive the game, never scroll or zoom the page */
}

/* ---------- overlay on top of the canvas ---------- */
#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#overlay > * { pointer-events: auto; }
#overlay[hidden] { display: none; }
.corner {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.corner.left { right: auto; left: 10px; }
.corner.bottom { top: auto; bottom: 10px; }
.btn.support { background: #fff4d6; color: var(--ink); text-decoration: none; }
.chip, .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 14px var(--font);
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn.small { font-size: 12px; padding: 4px 10px; box-shadow: 2px 2px 0 var(--ink); }
.chip { cursor: default; padding: 4px 6px 4px 4px; }
.chip img, .avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--paper-2); flex: none;
}
.chip .out {
  border: 0; background: none; font: 600 12px var(--font); color: var(--ink-2);
  cursor: pointer; padding: 2px 6px; text-decoration: underline;
}
.btn svg { flex: none; }
.btn.gold { background: var(--yellow); }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(10, 10, 12, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  padding: 16px;
}
.modal {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink);
  width: min(980px, 100%);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 3px solid var(--ink);
  background: #fff;
}
.modal-head h2 { margin: 0; font-size: 22px; flex: 1; }
.modal-body { padding: 16px 18px 20px; overflow: auto; }
.close {
  border: 2px solid var(--ink); background: #fff; border-radius: 50%;
  width: 34px; height: 34px; font: 800 16px var(--font); cursor: pointer;
}
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.tab {
  border: 2px solid var(--ink); background: #fff; border-radius: 999px;
  padding: 6px 14px; font: 700 13px var(--font); cursor: pointer; color: var(--ink);
}
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.level-pick { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.level-pick select {
  font: 700 14px var(--font); padding: 6px 10px; border: 2px solid var(--ink);
  border-radius: 10px; background: #fff; color: var(--ink); max-width: 260px;
}
.boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) { .boards { grid-template-columns: 1fr; } }
.board {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.board h3 {
  margin: 0; padding: 10px 12px; font-size: 15px;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.board h3 .swatch { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); }
.board h3 small { font-weight: 500; color: var(--ink-2); font-size: 12px; margin-left: auto; }
.board ol { list-style: none; margin: 0; padding: 4px 0; }
.board li {
  display: grid;
  grid-template-columns: 28px 26px 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 12px;
  font-size: 14px;
}
.board li.me { background: #fff6d6; font-weight: 700; }
.board li .rank { font-weight: 800; color: var(--ink-2); text-align: right; }
.board li .rank.first { color: var(--gold); }
.board li .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .val { font-variant-numeric: tabular-nums; font-weight: 700; }
.board .empty { padding: 18px 12px; color: var(--ink-2); font-size: 14px; text-align: center; }
.board .mine {
  border-top: 2px dashed var(--ink-3);
  padding: 8px 12px; font-size: 13px; color: var(--ink-2);
}
.note { color: var(--ink-2); font-size: 13px; margin: 12px 2px 0; }
.error {
  background: #fff; border: 2px solid var(--red); color: var(--ink);
  border-radius: 12px; padding: 12px 14px; font-size: 14px;
}
.stars { color: var(--gold); letter-spacing: 1px; }

/* ---------- character picker ---------- */
.star-count { font: 700 15px var(--font); margin-right: 6px; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.char {
  display: grid; justify-items: center; gap: 4px; padding: 10px 10px 12px;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; cursor: pointer;
  font: inherit; color: var(--ink); text-align: center; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.char:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.char:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.char canvas { width: 100%; height: 120px; display: block; background: var(--paper); border-radius: 10px; }
.char.selected { background: #fff6d6; box-shadow: 3px 3px 0 var(--gold); border-color: var(--gold); }
.char.locked { cursor: not-allowed; background: var(--paper-2); box-shadow: none; }
.char.locked:hover { transform: none; }
.char-name { font: 700 15px var(--font); }
.char-sub { font-size: 12px; color: var(--ink-2); min-height: 2.6em; }

/* ---------- store ---------- */
.modal.store { width: min(1080px, 100%); max-height: min(92vh, 820px); }
.balance {
  display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--font);
  background: #eaf5ff; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px 3px 6px; font-variant-numeric: tabular-nums;
}
.balance .drop-icon { width: 18px; height: 22px; display: block; }
.store-body { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.35fr; overflow: auto; }
@media (max-width: 820px) { .store-body { grid-template-columns: 1fr; } }
.store-stage { padding: 14px; border-right: 3px solid var(--ink); display: grid; gap: 10px; align-content: start; background: var(--paper); }
@media (max-width: 820px) { .store-stage { border-right: 0; border-bottom: 3px solid var(--ink); } }
.store-stage .stage { width: 100%; aspect-ratio: 4 / 3.3; display: block; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.store-stage .note { margin: 0; }
.trying { font: 700 13px var(--font); background: #fff6d6; border: 2px dashed var(--gold); border-radius: 10px; padding: 6px 10px; }
.trying[hidden] { display: none; }
.store-shop { padding: 14px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.store-shop .tabs { margin: 0; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item {
  display: grid; gap: 6px; padding: 8px 8px 10px; text-align: center; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; transition: transform 0.08s, box-shadow 0.08s;
}
.item:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.item.trying-on { outline: 3px dashed var(--gold); outline-offset: 2px; }
.item.is-equipped { background: #effaf3; }
.item canvas { width: 100%; aspect-ratio: 1.35 / 1; display: block; background: var(--paper); border-radius: 10px; }
.item-name { font: 700 14px var(--font); }
.rarity { font: 800 10px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.r-common { color: #6b6b73; } .r-rare { color: #2f7bff; } .r-epic { color: #9b5de5; } .r-legend { color: var(--gold); }
.buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 12.5px var(--font);
  border: 2px solid var(--ink); border-radius: 999px; padding: 5px 10px; background: #2f9bff; color: #fff; cursor: pointer;
}
.buy.owned { background: #fff; color: var(--ink); }
.buy.equipped { background: #138a4b; color: #fff; border-color: #138a4b; }
.buy.poor { background: var(--paper-2); color: var(--ink-2); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .item { transition: none; } }

/* ---------- small screens (phones held sideways) and touch devices ---------- */
body.touch .btn small { display: none; }               /* keyboard shortcuts mean nothing on a touchscreen */
@media (orientation: portrait) { body.touch #overlay { display: none; } }   /* the game asks you to turn the phone */
@media (max-width: 900px), (max-height: 500px) {
  .corner { gap: 6px; top: 6px; right: 6px; }
  .corner.left { left: 6px; }
  .corner.bottom { bottom: 6px; }
  .chip, .btn { font-size: 12px; padding: 4px 9px; gap: 5px; box-shadow: 2px 2px 0 var(--ink); }
  .btn small { display: none; }
  .chip img, .avatar { width: 20px; height: 20px; }
}

/* ---------- touch buttons, see-through, at the screen edges (size: touchButtonSize() in main.js) ---------- */
#touchpad { display: none; }
#touchpad.show { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.tbtn {
  position: absolute; bottom: 14px;
  width: var(--tb); height: var(--tb); border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.55); font: 900 calc(var(--tb) * 0.36) var(--font);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  user-select: none; -webkit-user-select: none;
  transition: transform 0.05s, background 0.05s;
}
.tbtn small { font-size: calc(var(--tb) * 0.16); letter-spacing: 0.05em; margin-top: -2px; }
.tbtn.on { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.6); transform: scale(0.94); }
.tbtn[data-k="ArrowLeft"] { left: 8px; }
.tbtn[data-k="ArrowRight"] { left: calc(var(--tb) + 18px); }
.tbtn.jump { right: 10px; }

/* touch devices: no zooming, double-tap zoom or page scrolling while playing (windows can still scroll) */
body.touch { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.touch .modal-back { touch-action: pan-y; }

/* ---------- color palette (touch): a button above JUMP; the level's colors fan out from it ---------- */
.palette {
  position: absolute; right: calc(10px + var(--tb) * 0.09); bottom: calc(14px + var(--tb) * 1.72);
  width: calc(var(--tb) * 0.82); height: calc(var(--tb) * 0.82);
  pointer-events: none;
}
.pal-btn {
  position: absolute; inset: 0; border-radius: 50%;
  /* the current color in the middle, a ring of the level's colors around it */
  background: radial-gradient(circle, var(--cur) 0 52%, rgba(255,255,255,0.9) 53% 58%, transparent 59%), var(--ring);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  display: grid; place-items: center; font-size: calc(var(--tb) * 0.3);
  transition: transform 0.15s;
  opacity: 0.92;
}
.palette.open .pal-btn { transform: scale(0.88) rotate(-30deg); opacity: 1; }
.pal-opt {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--tb) * 0.54); height: calc(var(--tb) * 0.54);
  margin: calc(var(--tb) * -0.27) 0 0 calc(var(--tb) * -0.27);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55), transparent 42%), var(--hex);
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  display: grid; place-items: center; font-size: calc(var(--tb) * 0.26);
  transform: translate(0, 0) scale(0.2); opacity: 0;
  transition: transform 0.18s cubic-bezier(.3,1.6,.5,1), opacity 0.12s;
}
.palette.open .pal-opt { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
.palette.open .pal-opt.current { border-color: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,0.5), 0 3px 10px rgba(0,0,0,0.5); }
.palette.open .pal-opt.hover { transform: translate(var(--dx), var(--dy)) scale(1.22); }
.pal-btn { color: #fff; font-weight: 900; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.palette:not(.open) .pal-btn:not(:empty) { font-size: calc(var(--tb) * 0.2); }

.tbtn.small { width: calc(var(--tb) * 0.78); height: calc(var(--tb) * 0.78); font-size: calc(var(--tb) * 0.3); bottom: calc(14px + var(--tb) + 10px); }
.tbtn[data-k="ArrowUp"] { left: calc(8px + var(--tb) * 0.11); }
.tbtn[data-k="ArrowDown"] { left: calc(var(--tb) * 1.11 + 18px); }
/* phones and tablets: the game goes full screen by itself when a level starts (where the browser allows) */
body.touch .btn[data-act="full"] { display: none; }

/* signed in: a round picture; the menu with Sign out opens under it */
.account { position: relative; }
.avatar-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink);
  display: grid; place-items: center; transition: transform 0.08s, box-shadow 0.08s;
}
.avatar-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.avatar-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.avatar-btn .avatar { width: 100%; height: 100%; border-radius: 0; }
.avatar-btn .initial { font: 800 18px var(--font); color: var(--ink); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 3;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 12px; display: grid; gap: 10px; min-width: 190px; max-width: 260px;
}
.account-menu[hidden] { display: none; }
.account-menu .who { display: grid; gap: 2px; font: 600 13px var(--font); color: var(--ink); }
.account-menu .who small { color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .btn { justify-self: start; }
@media (max-width: 900px), (max-height: 500px) { .avatar-btn { width: 32px; height: 32px; box-shadow: 2px 2px 0 var(--ink); } }

/* ---------- store on phones and tablets: items only; the try-on preview opens as a pop-up ---------- */
.modal-back canvas { touch-action: pan-y; }            /* swipes that start on a picture still scroll */
.sheet-info { display: none; }
body.touch .store-body { grid-template-columns: 1fr; }
body.touch .store-stage { display: none; }
body.touch .store-stage.open {
  display: grid; position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(600px, 92vw); max-height: 92vh; overflow: auto;
  grid-template-columns: 1.25fr 1fr; align-items: center; gap: 14px;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
}
body.touch .store-stage.open .stage { max-height: 70vh; }
body.touch .store-stage.open .note, body.touch .store-stage.open .trying { display: none; }
body.touch .store-stage.open .sheet-info { display: grid; gap: 10px; justify-items: start; align-content: center; }
.sheet-info h3 { margin: 0; font: 800 20px var(--font); color: var(--ink); }
.sheet-info .buy { font-size: 14px; }
@media (orientation: portrait) { body.touch .store-stage.open { grid-template-columns: 1fr; } }
.sheet-back { position: fixed; inset: 0; z-index: 29; background: rgba(10, 10, 12, 0.55); }
.sheet-back[hidden] { display: none; }

/* ---------- splash: "Tap to start" (splash.js) ---------- */
#splash {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 45%, #f6f3ec 0%, #efece4 55%, #e2ddd0 100%);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.55s ease;
}
#splash.sp-out { opacity: 0; pointer-events: none; }
#splash:focus-visible { outline: none; }
/* watercolor splotches drifting behind everything */
.sp-blob { position: absolute; width: 32vmax; height: 32vmax; opacity: 0.9; border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; animation: sp-morph 9s ease-in-out infinite alternate; }
.sp-blob.b1 { background: #2f7bff; left: -13vmax; top: -12vmax; }
.sp-blob.b2 { background: #ff3b4e; right: -13vmax; top: -8vmax; width: 29vmax; height: 29vmax; animation-delay: -2s; }
.sp-blob.b3 { background: #1fc160; left: 34%; bottom: -24vmax; width: 26vmax; height: 26vmax; animation-delay: -4s; }
.sp-blob.b4 { background: #ffc93c; left: -10vmax; bottom: -12vmax; width: 22vmax; height: 22vmax; animation-delay: -6s; }
.sp-blob.b5 { background: #9b5de5; right: -9vmax; bottom: -11vmax; width: 24vmax; height: 24vmax; animation-delay: -1s; }
@keyframes sp-morph {
  0% { border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; transform: translate(2vmax, 1.5vmax) rotate(18deg) scale(1.06); }
}
/* paint dripping from the top edge */
.sp-drips { position: absolute; left: 0; right: 0; top: 0; height: 0; display: flex; justify-content: space-around; z-index: 1; }
.sp-drips i {
  width: clamp(10px, 1.6vmax, 22px); height: var(--len, 60px); border-radius: 0 0 999px 999px; transform-origin: top;
  animation: sp-drip 3.6s ease-in-out infinite alternate; position: relative;
}
.sp-drips i::after { content: ''; position: absolute; left: 50%; bottom: -35%; width: 130%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: inherit; }
.sp-drips i:nth-child(5n+1) { background: #2f7bff; } .sp-drips i:nth-child(5n+2) { background: #ff3b4e; }
.sp-drips i:nth-child(5n+3) { background: #1fc160; } .sp-drips i:nth-child(5n+4) { background: #ffc93c; } .sp-drips i:nth-child(5n) { background: #9b5de5; }
.sp-drips i:nth-child(1) { --len: 7vmin; } .sp-drips i:nth-child(2) { --len: 12vmin; animation-delay: -1s; } .sp-drips i:nth-child(3) { --len: 5vmin; animation-delay: -2s; }
.sp-drips i:nth-child(4) { --len: 10vmin; animation-delay: -0.5s; } .sp-drips i:nth-child(5) { --len: 6vmin; animation-delay: -2.5s; } .sp-drips i:nth-child(6) { --len: 14vmin; animation-delay: -1.5s; }
.sp-drips i:nth-child(7) { --len: 8vmin; animation-delay: -3s; } .sp-drips i:nth-child(8) { --len: 11vmin; animation-delay: -0.8s; } .sp-drips i:nth-child(9) { --len: 6vmin; animation-delay: -2.2s; }
.sp-drips i:nth-child(10) { --len: 13vmin; animation-delay: -1.2s; } .sp-drips i:nth-child(11) { --len: 7vmin; animation-delay: -2.8s; } .sp-drips i:nth-child(12) { --len: 9vmin; animation-delay: -0.3s; }
@keyframes sp-drip { from { transform: scaleY(0.75); } to { transform: scaleY(1.15); } }
/* the middle: title, a little scene, the start button */
.sp-main { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(4px, 1.4vmin, 14px); padding: 16px; text-align: center; }
.sp-title {
  margin: 0; font: 900 clamp(44px, 13vmin, 132px)/0.92 var(--font); letter-spacing: 0.01em; color: #fff;
  -webkit-text-stroke: clamp(4px, 1.1vmin, 9px) var(--ink); paint-order: stroke fill;
  text-shadow: clamp(4px, 0.9vmin, 8px) clamp(5px, 1vmin, 9px) 0 var(--ink);
  animation: sp-bob 3s ease-in-out infinite;
}
@keyframes sp-bob { 50% { transform: translateY(-0.6vmin) rotate(-0.6deg); } }
.sp-tag { margin: 0; font: 800 clamp(14px, 2.6vmin, 24px) var(--font); color: var(--ink); }
.sp-scene { width: min(64vw, 30vmin * 2.4, 460px); height: clamp(70px, 17vmin, 150px); display: block; }
.sp-start {
  width: clamp(64px, 15vmin, 120px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: clamp(3px, 0.6vmin, 5px) solid var(--ink); box-shadow: 0.6vmin 0.8vmin 0 var(--ink);
  animation: sp-colors 5s linear infinite, sp-pulse 1.4s ease-in-out infinite;
}
.sp-play { width: 0; height: 0; margin-left: 12%; border-style: solid; border-color: transparent transparent transparent #fff;
  border-width: clamp(13px, 3.2vmin, 26px) 0 clamp(13px, 3.2vmin, 26px) clamp(21px, 5.2vmin, 42px); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
@keyframes sp-colors { 0%, 100% { background: #2f7bff; } 20% { background: #ff3b4e; } 40% { background: #1fc160; } 60% { background: #ffc93c; } 80% { background: #9b5de5; } }
@keyframes sp-pulse { 50% { transform: scale(1.08); } }
.sp-label { margin: 0; font: 900 clamp(16px, 3.4vmin, 30px) var(--font); color: var(--ink); letter-spacing: 0.02em; }
.sp-foot { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0; text-align: center; z-index: 2; font: 700 clamp(11px, 1.8vmin, 15px) var(--font); color: var(--ink-2); }
/* leaving: five colors flood out from the tap */
.sp-burst i { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; z-index: 5; transform: scale(0); animation: sp-flood 0.6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sp-flood { to { transform: scale(var(--s, 300)); } }
@media (prefers-reduced-motion: reduce) { #splash *, #splash { animation: none !important; transition: none !important; } }

/* ☰ menu and ↺ restart: small, above ▲ ▼ (kept away from the top edge, which itch.io's toolbar can cover) */
.tbtn.mini { width: calc(var(--tb) * 0.6); height: calc(var(--tb) * 0.6); font-size: calc(var(--tb) * 0.3); bottom: calc(14px + var(--tb) * 1.78 + 22px); }
.tbtn[data-k="Escape"] { left: calc(8px + var(--tb) * 0.2); }
.tbtn[data-k="KeyR"] { left: calc(var(--tb) * 1.2 + 18px); }

/* ---------- joystick (instead of ◀ ▶ ▲ ▼; #dpad in the address brings the buttons back) ---------- */
.joy { display: none; }
#touchpad.joystick .tbtn[data-k^="Arrow"] { display: none; }
#touchpad.joystick .joy {
  display: block; position: absolute; left: 10px; bottom: 12px;
  width: calc(var(--tb) * 1.75); height: calc(var(--tb) * 1.75); border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);          /* minimal: just a ring and its knob */
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: calc(var(--tb) * 0.78); height: calc(var(--tb) * 0.78); margin: calc(var(--tb) * -0.39) 0 0 calc(var(--tb) * -0.39);
  border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.08s ease-out;
}
.joy.on .joy-knob { background: rgba(255, 255, 255, 0.34); transition: none; }
/* ☰ and ↺ sit just above the joystick */
#touchpad.joystick .tbtn.mini { bottom: calc(12px + var(--tb) * 1.75 + 12px); }
#touchpad.joystick .tbtn[data-k="Escape"] { left: 12px; }
#touchpad.joystick .tbtn[data-k="KeyR"] { left: calc(22px + var(--tb) * 0.6); }

/* ---------- control schemes (🎮 Controls on the menu) ---------- */
#touchpad .joy.joy-r { display: none; left: auto; right: 10px; }
#touchpad[data-scheme^="twin"] .joy.joy-r { display: block; }
/* the palette sits above the right stick */
#touchpad[data-scheme^="twin"] .palette { right: calc(10px + var(--tb) * 0.465); bottom: calc(12px + var(--tb) * 1.75 + 16px); }
/* Twin Tap: jumping is a tap on the right stick */
#touchpad[data-scheme="twintap"] .tbtn.jump { display: none; }
/* Twin Stick: a JUMP button just left of the right stick */
#touchpad[data-scheme="twinstick"] .tbtn.jump {
  right: calc(10px + var(--tb) * 1.75 + 12px); bottom: 14px;
  width: calc(var(--tb) * 0.9); height: calc(var(--tb) * 0.9); font-size: calc(var(--tb) * 0.3);
}
/* the picker */
.ctl-list { display: grid; gap: 12px; }
.ctl {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; text-align: left; width: 100%;
  padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer;
  font: 600 14px var(--font); box-shadow: 3px 3px 0 var(--ink);
}
.ctl[aria-checked="true"] { background: #fff6d6; border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.ctl h3 { margin: 0 0 4px; font: 800 17px var(--font); }
.ctl p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.ctl .chk { font-size: 12px; font-weight: 800; color: #138a4b; }
.ctl-pic { position: relative; height: 76px; border-radius: 10px; background: #1c1c1f; overflow: hidden; }
.ctl-pic::before { content: ''; position: absolute; left: 18%; right: 18%; top: 10%; bottom: 10%; background: #efece4; border-radius: 3px; }
.ctl-pic i { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.15);
  display: grid; place-items: center; font: 800 9px var(--font); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.ctl-pic .stick { width: 34px; height: 34px; bottom: 4px; }
.ctl-pic .stick.l { left: 4px; } .ctl-pic .stick.r { right: 4px; }
.ctl-pic .btn-j { width: 22px; height: 22px; bottom: 6px; }
.ctl-pic .tap { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); font-size: 18px; }
@media (max-width: 520px) { .ctl { grid-template-columns: 1fr; } }

/* ---------- achievements ---------- */
#ach-toasts { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; pointer-events: none; width: min(420px, 92vw); }
.ach-toast {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 16px; background: #1c1c1f; color: #fff;
  border: 3px solid var(--tier, #ffd166); box-shadow: 0 6px 18px rgba(0,0,0,0.35), 4px 4px 0 var(--tier, #ffd166);
  animation: ach-in 0.45s cubic-bezier(.2,1.4,.4,1) both;
}
.ach-toast.t-easy { --tier: #1fc160; } .ach-toast.t-medium { --tier: #2f7bff; } .ach-toast.t-hard { --tier: #9b5de5; } .ach-toast.t-funny { --tier: #ff8c1a; }
.ach-toast.out { animation: ach-out 0.45s ease forwards; }
.ach-toast .ach-icon { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #ffe9a8, #ffc93c); box-shadow: 0 0 0 3px #fff2; }
.ach-toast small { display: block; font: 800 10px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: #ffd166; }
.ach-toast b { display: block; font: 900 17px var(--font); }
.ach-toast em { display: block; font: 600 12.5px var(--font); font-style: normal; color: rgba(255,255,255,0.75); }
@keyframes ach-in { from { transform: translateY(-120%) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ach-out { to { transform: translateY(-120%); opacity: 0; } }
/* the window */
.ach-total { font: 700 14px var(--font); color: var(--ink-2); margin-left: auto; margin-right: 10px; }
.ach-total b { color: var(--ink); font-size: 18px; }
.ach-progress { height: 12px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--ink); overflow: hidden; }
.ach-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2f7bff, #9b5de5, #ff3b4e, #ffc93c, #1fc160); }
.ach-tier { margin: 18px 0 8px; font: 800 17px var(--font); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ach-tier::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--tier); }
.ach-tier small { font-weight: 600; color: var(--ink-2); font-size: 12px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ach {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; opacity: 0.62; filter: grayscale(0.85);
}
.ach.done { opacity: 1; filter: none; border-color: var(--tier); box-shadow: 3px 3px 0 var(--tier); }
.ach-badge { font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); }
.ach.done .ach-badge { background: radial-gradient(circle, #fff6d6, #ffd166); }
.ach-text { display: grid; gap: 2px; min-width: 0; }
.ach-text b { font: 800 14px var(--font); color: var(--ink); }
.ach-text small { font: 600 12px var(--font); color: var(--ink-2); }
.ach-bar { height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: 3px; }
.ach-bar i { display: block; height: 100%; background: var(--tier); }
.ach-num { font-size: 11px !important; }
.ach-reward { font: 800 12px var(--font); color: var(--ink-2); white-space: nowrap; }
.ach.done .ach-reward { color: #138a4b; font-size: 18px; }
.corner.bottom { gap: 8px; }

/* ---------- settings ---------- */
.set-sec + .set-sec { margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(28,28,31,0.18); }
.set-sec h3 { margin: 0 0 10px; font: 800 16px var(--font); }
.set-sec h3 small { font-weight: 600; font-size: 12.5px; color: var(--ink-2); margin-left: 6px; }
.set-sec .note { margin: 8px 0 0; }
kbd { font: 800 11px var(--font); border: 1.5px solid currentColor; border-bottom-width: 3px; border-radius: 5px; padding: 0 5px; opacity: 0.7; }
.set-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.set-opt {
  display: grid; justify-items: center; align-content: start; gap: 3px; text-align: center; padding: 10px 8px;
  border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer;
  font: 600 13px var(--font); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.08s;
}
.set-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.set-opt[aria-checked="true"] { background: #fff6d6; border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.set-opt b { font: 800 15px var(--font); }
.set-opt small { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.set-ico { font-size: 24px; line-height: 1.1; }
.set-opt .ctl-pic { width: 100%; height: 58px; }
.set-switches { display: flex; flex-wrap: wrap; gap: 10px; }
.switch {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 14px var(--font);
}
.switch i { width: 36px; height: 20px; border-radius: 999px; background: #c9c5bb; position: relative; transition: background 0.15s; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: left 0.15s; }
.switch[aria-checked="true"] i { background: var(--green); }
.switch[aria-checked="true"] i::after { left: 18px; }
body.touch .settings .modal-body { padding: 12px 14px 14px; }
body.touch .set-sec + .set-sec { margin-top: 10px; padding-top: 10px; }
@media (max-height: 500px) {
  .set-opt { padding: 7px 6px; }
  .set-opt small { display: none; }
  .set-ico { font-size: 20px; }
  .set-opt .ctl-pic { height: 44px; }
  .set-sec h3 { margin-bottom: 7px; font-size: 15px; }
}

/* ---------- the ghost question ---------- */
.ghost-intro .modal-body { text-align: center; padding: 18px 20px 16px; }
.gi-scene { width: 100%; height: auto; max-height: 110px; aspect-ratio: 400 / 110; background: #efece4; border: 2px solid var(--ink); border-radius: 12px; }
.ghost-intro h2 { margin: 12px 0 6px; font-size: 22px; }
.ghost-intro p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.4; }
.gi-actions { display: grid; gap: 8px; justify-items: center; }
.gi-actions .btn.big { font-size: 17px; padding: 11px 20px; }
.ghost-intro .note { margin: 10px 0 0; font-size: 12.5px; }
@media (max-height: 500px) {
  .gi-scene { max-height: 70px; }
  .ghost-intro h2 { font-size: 19px; margin-top: 8px; }
  .ghost-intro p { font-size: 13.5px; margin-bottom: 8px; }
  .gi-actions { grid-auto-flow: column; justify-content: center; }
}

/* ---------- story: the opening comic ---------- */
#story {
  position: fixed; inset: 0; z-index: 110; background: #0b0b0d; display: grid; place-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; transition: opacity 0.45s;
}
#story.st-out { opacity: 0; pointer-events: none; }
#story canvas { width: min(100vw, calc(100dvh * 960 / 544)); aspect-ratio: 960 / 544; display: block; }
#story .st-caption {
  position: absolute; left: 50%; top: max(12px, calc(50dvh - min(100vw, calc(100dvh * 960 / 544)) * 544 / 960 / 2 + 14px)); transform: translateX(-50%) rotate(-0.6deg);
  margin: 0; max-width: min(720px, 86vw); min-height: 1.3em; padding: 10px 18px; background: #fffdf7; color: #1c1c1f;
  border: 3px solid #1c1c1f; border-radius: 6px; box-shadow: 4px 4px 0 #1c1c1f;
  font: 800 clamp(13px, 1.9vw, 24px) var(--font); text-align: center; line-height: 1.3;
}
#story .st-caption:empty { visibility: hidden; }
#story .st-skip {
  position: absolute; top: 12px; right: 12px; font: 800 14px var(--font); color: #1c1c1f; background: rgba(255,255,255,0.85);
  border: 2px solid #1c1c1f; border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
#story .st-next { position: absolute; bottom: 16px; right: 18px; font: 800 14px var(--font); color: #1c1c1f; background: rgba(255,255,255,0.85);
  border-radius: 999px; padding: 4px 12px; opacity: 0; transition: opacity 0.3s; }
#story .st-next.on { opacity: 1; animation: st-pulse 1.4s ease-in-out infinite; }
@keyframes st-pulse { 50% { transform: translateX(4px); } }
#story .st-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
#story .st-dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #1c1c1f; background: rgba(255,255,255,0.7); }
#story .st-dots i.on { background: #1c1c1f; }
@media (prefers-reduced-motion: reduce) { #story .st-next.on { animation: none; } }