/* ============================================================
   THE FONTS, SHIPPED WITH THE GAME
   ------------------------------------------------------------
   Inside the game, not fetched from Google: a mobile game gets
   demonstrated on whatever wifi is in the room, and gets packaged into
   an app with no reason to need a network at all. Latin only.
     Bungee         the loud words - scores, tray names, buttons
     Kalam          handwriting - the cards, and everything you read
     IBM Plex Mono  typed labels and tags
   ============================================================ */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/bungee-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/kalam-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/kalam-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ============================================================
   Task Sorter - the sheets over the stage
   ------------------------------------------------------------
   Almost nothing in the game is HTML any more: it is drawn on the
   canvas (js/stage.js). What is left here is the handful of things
   HTML is genuinely better at - a list you scroll, a box you type in,
   a book you page through - styled to look like they belong to the
   same game as the canvas under them. The same rule as the drawn
   panels: a body, a bright lip on top, and a HARD block of shadow
   under it, stamped out of plastic rather than floated on a blur.
   ============================================================ */
:root {
  --ink: #0a0e1a;
  --ink-2: #121a2e;
  --ink-3: #1c2742;
  --ink-4: #293755;
  --line: #3a4a6d;
  --sink: #060a14;
  --tx-hi: #ffffff;
  --tx: #cdd8ec;
  --tx-dim: #8a9ac0;
  --arcade: 'Bungee', Impact, sans-serif;
  --round: 'Kalam', 'Comic Sans MS', cursive;
  --now: #e0524a;
  --later: #4a86c4;
  --give: #f2a03d;
  --drop: #8a929e;
  --good: #5cc46a;
  --gold: #f2c14e;
  --spring: cubic-bezier(.2, .9, .25, 1);
  --snap: cubic-bezier(.34, 1.56, .5, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #b9895a;
  color: var(--tx);
  font-family: var(--round);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* The two canvases fill the screen. The bottom one takes every touch
   that the sheets do not; the top one takes none at all. */
#stage, #fx {
  position: fixed; left: 0; top: 0;
  width: 100vw; height: 100vh;
  display: block;
}
#stage { z-index: 0; touch-action: none; }
#fx { z-index: 50; pointer-events: none; }

/* The sheet layer passes touches straight through to the stage until a
   sheet is actually open. */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#ui > * { pointer-events: auto; }

.scrim {
  position: absolute; inset: 0;
  background: rgba(4, 6, 14, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease; }

/* ---------------- sprites ----------------
   js/sprites.js paints 16x16 art as a background, and js/pets.js plays
   a pet as a sheet slid sideways inside a frame. */
.px-art {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}
.pet-art { display: flex; align-items: center; justify-content: center; overflow: visible; background: none; }
.ink-art { image-rendering: auto; }
.pet-ink { display: block; flex: 0 0 auto; background: no-repeat center bottom / contain; pointer-events: none; transform-origin: 50% 100%; animation: pet-bob 1.2s ease-in-out infinite; }
@keyframes pet-bob { 50% { transform: translateY(-6%) scale(1.03, .97); } }
@media (prefers-reduced-motion: reduce) { .pet-ink { animation: none; } }
.pet-frame { display: block; flex: 0 0 auto; background-repeat: no-repeat; pointer-events: none; image-rendering: pixelated; }

/* ---------------- buttons ----------------
   The HTML twin of the canvas button: a gradient body, a bright lip,
   and a hard shadow it sinks into when you press it. */
.gbtn {
  --c1: #2b3a5c; --c2: #1c2742; --sink-c: #060a14; --t: #e6eefc;
  font: 400 12px/1.2 var(--arcade);
  /* Upper case, like every button drawn on the canvas. The pixel font's
     lower case is a different, smaller-looking alphabet, and mixing the
     two made the sheets look like a second game. */
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  color: var(--t);
  border: 0; border-radius: 14px;
  padding: 15px 18px;
  background: linear-gradient(var(--c1), var(--c2));
  box-shadow: 0 5px 0 var(--sink-c), inset 0 2px 0 rgba(255,255,255,.22), inset 0 0 0 2px rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .12s var(--spring), box-shadow .12s var(--spring), filter .15s;
  touch-action: manipulation;
}
.gbtn:hover { filter: brightness(1.08); }
.gbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sink-c), inset 0 2px 0 rgba(255,255,255,.18); }
.gbtn:disabled { opacity: .5; cursor: default; }
.gbtn-gold { --c1: #ffd76a; --c2: #f0a93a; --sink-c: #8a5a16; --t: #3a2208; }
.gbtn-blue { --c1: #5b8fd8; --c2: #3b64a8; --sink-c: #1a2f55; --t: #fff; }
.gbtn-red { --c1: #e8685f; --c2: #b03a33; --sink-c: #4a1210; --t: #fff; }
.gbtn-dark { --c1: #2b3a5c; --c2: #1c2742; --sink-c: #060a14; --t: #e6eefc; }
.gbtn-sm { padding: 11px 14px; font-size: 10px; border-radius: 12px; }

/* ---------------- sheets ----------------
   Up from the bottom with a little overshoot, over the world that keeps
   moving behind them. */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  max-height: calc(100% - 64px - var(--safe-t));
  display: flex; flex-direction: column;
  background: linear-gradient(#1f2c50, #121a34);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -2px 0 rgba(255,255,255,.12), 0 -18px 40px rgba(0,0,0,.45);
  padding: 8px 16px calc(14px + var(--safe-b));
  transform: translateY(105%);
  transition: transform .42s var(--snap), visibility 0s linear .42s;
  visibility: hidden;
}
.sheet.is-open { transform: translateY(0); visibility: visible; transition: transform .42s var(--snap); }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 2px auto 10px; flex: 0 0 auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin: 0 0 10px; }
.sheet-head h2 { font: 400 14px/1 var(--arcade); color: #fff; margin: 0; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.sheet-x {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  font-size: 26px; line-height: 1; color: #e6eefc;
  background: linear-gradient(#2b3a5c, #1c2742);
  box-shadow: 0 4px 0 #060a14, inset 0 2px 0 rgba(255,255,255,.18);
  cursor: pointer; transition: transform .12s var(--spring);
}
.sheet-x:active { transform: translateY(3px) scale(.95); }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1 1 auto; margin: 0 -16px; padding: 0 16px 6px; touch-action: pan-y; }
.sheet-h { font: 400 9px/1 var(--arcade); color: var(--tx-dim); margin: 18px 0 10px; letter-spacing: .04em; text-transform: uppercase; }
.block:first-child .sheet-h { margin-top: 4px; }

/* ---------------- gear ---------------- */
.sheet-gear { height: min(58%, 560px); }
.gear-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.name-field {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: rgba(0,0,0,.3); border-radius: 12px; padding: 6px 10px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.3);
}
.name-k { font: 400 8px/1 var(--arcade); color: var(--tx-dim); }
.hero-name {
  width: 120px; border: 0; outline: 0; background: transparent;
  font: 700 17px/1.2 var(--round); color: #fff;
  -webkit-user-select: text; user-select: text;
}
.hero-name::placeholder { color: rgba(255,255,255,.35); font-style: italic; }
.hero-worn { margin: 0; font-size: 13px; font-weight: 600; color: var(--tx); flex: 1 1 auto; line-height: 1.3; }
.hero-worn.is-empty { color: var(--tx-dim); font-style: italic; }
.hero-set {
  flex: 0 0 auto; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.22); font-size: 13px; color: var(--tx-dim);
}
.hero-set b { font: 400 9px/1 var(--arcade); color: var(--tx-dim); }
.hero-set em { font-style: normal; color: var(--gold); font-weight: 700; }
.hero-set.is-on { background: linear-gradient(90deg, rgba(242,193,78,.25), rgba(242,193,78,.08)); box-shadow: inset 0 0 0 2px rgba(242,193,78,.5); animation: set-glow 2.2s ease-in-out infinite; }
.hero-set.is-on b { color: var(--gold); }
@keyframes set-glow { 50% { box-shadow: inset 0 0 0 2px rgba(242,193,78,.9), 0 0 18px rgba(242,193,78,.25); } }

.shop-tabs { display: flex; gap: 6px; flex: 0 0 auto; margin: 12px 0 0; padding: 4px; background: rgba(0,0,0,.3); border-radius: 14px; }
.shop-tabs button {
  flex: 1 1 0; border: 0; border-radius: 10px; padding: 11px 4px;
  font: 400 10px/1 var(--arcade); color: var(--tx-dim); background: transparent;
  cursor: pointer; transition: background .2s, color .2s, transform .12s var(--spring);
}
.shop-tabs button:active { transform: scale(.96); }
.shop-tabs button.is-on { background: linear-gradient(#ffd76a, #f0a93a); color: #3a2208; box-shadow: 0 3px 0 #8a5a16; }
.shop-blurb { flex: 0 0 auto; margin: 10px 2px 8px; font-size: 13px; color: var(--tx-dim); font-weight: 600; }

.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 10px; border: 0; border-radius: 16px;
  background: linear-gradient(#2b3a5c, #1c2742);
  box-shadow: 0 5px 0 #060a14, inset 0 2px 0 rgba(255,255,255,.12);
  color: var(--tx); font-family: var(--round); cursor: pointer;
  transition: transform .14s var(--spring), box-shadow .14s var(--spring), filter .2s;
  animation: tile-in .4s var(--snap) both;
}
/* The shelf fills in one tile after another rather than all at once. */
.shop-tile:nth-child(1) { animation-delay: .02s; } .shop-tile:nth-child(2) { animation-delay: .05s; }
.shop-tile:nth-child(3) { animation-delay: .08s; } .shop-tile:nth-child(4) { animation-delay: .11s; }
.shop-tile:nth-child(5) { animation-delay: .14s; } .shop-tile:nth-child(6) { animation-delay: .17s; }
.shop-tile:nth-child(7) { animation-delay: .2s; } .shop-tile:nth-child(8) { animation-delay: .23s; }
.shop-tile:nth-child(9) { animation-delay: .26s; } .shop-tile:nth-child(n+10) { animation-delay: .29s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.shop-tile:hover { filter: brightness(1.1); }
.shop-tile:hover .shop-art { transform: translateY(-4px) scale(1.06); }
.shop-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 #060a14; }
.shop-stand { position: relative; width: 100%; height: 58px; display: flex; align-items: flex-end; justify-content: center; }
.shop-stand::after { content: ''; position: absolute; bottom: 2px; width: 46px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.35); }
.shop-art { position: relative; z-index: 1; width: 46px; height: 46px; transition: transform .25s var(--snap); }
.shop-tile b { font-size: 13px; font-weight: 700; color: #fff; text-align: center; line-height: 1.15; min-height: 1.15em; }
.shop-tile small { font-size: 11px; color: var(--tx-dim); text-align: center; white-space: pre-line; line-height: 1.2; min-height: 2.4em; }
.shop-tag {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  font: 400 9px/1 var(--arcade); color: #3a2208; text-transform: uppercase;
  background: linear-gradient(#ffd76a, #f0a93a); padding: 6px 8px; border-radius: 8px;
  box-shadow: 0 2px 0 #8a5a16;
}
.shop-coin { width: 12px; height: 12px; }
.shop-tag.is-worn { background: linear-gradient(#76d483, #3e9d52); color: #0f2a14; box-shadow: 0 2px 0 #1d4d28; }
.shop-tag.is-use { background: linear-gradient(#5b8fd8, #3b64a8); color: #fff; box-shadow: 0 2px 0 #1a2f55; }
.shop-tag.is-blank { background: rgba(255,255,255,.08); color: var(--tx-dim); box-shadow: none; }
.shop-tag.is-sealed { background: rgba(0,0,0,.35); color: var(--tx-dim); box-shadow: none; font-size: 8px; line-height: 1.3; text-align: center; }
.shop-tile.is-worn:not(.is-blank) { background: linear-gradient(#2f5a3e, #1d3a28); box-shadow: 0 5px 0 #0c1c12, inset 0 0 0 2px rgba(118,212,131,.65); }
.shop-tile.is-sealed .shop-art { filter: brightness(0) opacity(.5); }
.shop-tile.is-broke .shop-tag { filter: grayscale(.6) brightness(.85); }
.shop-tile.is-nope { animation: nope .4s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-bottom: 6px; }
.stat-row { font-size: 12px; }
.stat-head { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.stat-head b { font-weight: 700; color: #fff; }
.stat-head span { color: var(--gold); font-weight: 700; }
.stat-row.is-risk .stat-head span { color: #ff9a8a; }
.stat-track { height: 8px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; }
.stat-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f0a93a, #ffd76a); transition: width .45s var(--spring); }
.stat-row.is-risk .stat-fill { background: linear-gradient(90deg, #b03a33, #ff7a6a); }
.stat-hint { display: none; }

/* ---------------- settings ---------------- */
.sheet-settings { max-height: calc(88% - var(--safe-t)); }
.acct-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.35; }
.acct-fields { display: flex; flex-direction: column; gap: 8px; }
.acct-fields input {
  border: 0; outline: 0; border-radius: 12px; padding: 13px 14px;
  font: 600 16px var(--round); color: #fff; background: rgba(0,0,0,.35);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.35);
  -webkit-user-select: text; user-select: text;
}
.acct-fields input:focus { box-shadow: inset 0 2px 0 rgba(0,0,0,.35), 0 0 0 2px var(--gold); }
.acct-buttons { display: flex; gap: 10px; margin-top: 12px; }
.acct-buttons .gbtn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 10px; }
.acct-privacy { font-size: 12px; color: var(--tx-dim); margin: 10px 0 0; }
.acct-in { display: flex; align-items: center; gap: 10px; }
.acct-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.acct-who { flex: 1 1 auto; font-size: 14px; }
.acct-msg { margin: 10px 0 0; font-size: 13px; color: var(--tx); }
.acct-msg.is-good { color: #8fe39b; }
.acct-msg.is-busy { color: var(--tx-dim); }

.theme-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.theme-chip {
  border: 0; border-radius: 14px; padding: 6px 6px 8px; cursor: pointer;
  background: rgba(0,0,0,.3); color: var(--tx); font: 600 12px var(--round);
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  transition: transform .14s var(--spring), box-shadow .2s;
}
.theme-chip:active { transform: scale(.95); }
.theme-swatch { height: 46px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.theme-chip.is-worn { box-shadow: 0 0 0 3px var(--gold); }

.row-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; border-radius: 14px; padding: 13px 14px; margin: 0 0 8px; cursor: pointer;
  background: rgba(0,0,0,.25); color: var(--tx); text-align: left; font-family: var(--round);
  transition: background .2s, transform .12s var(--spring);
}
.row-btn:hover { background: rgba(0,0,0,.35); }
.row-btn:active { transform: scale(.98); }
.row-btn b { display: block; font-size: 15px; color: #fff; }
.row-btn small { display: block; font-size: 12px; color: var(--tx-dim); margin-top: 2px; }
.row-btn .go { font-size: 20px; color: var(--tx-dim); transition: transform .2s var(--spring); }
.row-btn:hover .go { transform: translateX(4px); }
.switch { position: relative; width: 50px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.14); flex: 0 0 auto; transition: background .25s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #e6eefc; box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .3s var(--snap); }
.switch.is-on { background: var(--good); }
.switch.is-on .knob { transform: translateX(22px); }
.block.is-danger { margin-top: 10px; padding-bottom: 6px; }

/* ---------------- the guide book ----------------
   Pages side by side in a strip, slid one page at a time. */
.book {
  position: absolute; left: 50%; top: calc(50% + var(--safe-t) / 2);
  width: min(94vw, 520px); height: min(86%, 680px);
  display: flex; flex-direction: column;
  background: linear-gradient(#2a3a62, #18234a);
  border-radius: 22px; padding: 14px 16px 14px;
  box-shadow: 0 7px 0 #060a14, inset 0 2px 0 rgba(255,255,255,.18), 0 30px 60px rgba(0,0,0,.5);
  transform: translate(-50%, -46%) scale(.9); opacity: 0; visibility: hidden;
  transition: transform .4s var(--snap), opacity .25s ease, visibility 0s linear .4s;
}
.book.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition: transform .4s var(--snap), opacity .2s ease; }
.pages { flex: 1 1 auto; position: relative; overflow: hidden; border-radius: 14px; background: #fbf3e0; box-shadow: inset 0 0 0 3px rgba(120,90,40,.25); }
.page {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 20px 20px 24px; color: #2a1e10; font-size: 16px; line-height: 1.45;
  transition: transform .45s var(--spring), opacity .3s ease;
}
.page p { margin: 0 0 12px; }
.page b { color: #1a1208; }
.page.is-left { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.page.is-right { transform: translateX(30%); opacity: 0; pointer-events: none; }
.guide-intro { font-size: 18px; }
.guide-h { font: 400 11px/1.3 var(--arcade); color: #8a5a16; margin: 6px 0 12px; }
.guide-ol, .guide-ul { margin: 0 0 12px; padding-left: 22px; }
.guide-ol li, .guide-ul li { margin: 0 0 8px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-box { border-radius: 14px; padding: 12px; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.guide-box b { display: block; font: 400 10px/1.2 var(--arcade); margin: 6px 0 4px; }
.guide-box small { display: block; font-size: 12px; opacity: .9; }
.guide-box p { font-size: 13px; margin: 6px 0 0; line-height: 1.3; }
.guide-ico { display: block; width: 26px; height: 26px; }
.box-now { background: linear-gradient(#e8685f, #b03a33); }
.box-later { background: linear-gradient(#5b8fd8, #3b64a8); }
.box-give { background: linear-gradient(#f7b25a, #c97a1e); }
.box-drop { background: linear-gradient(#9aa2ae, #6a7280); }
.guide-note { background: rgba(138,90,22,.12); border-radius: 14px; padding: 14px; margin: 0 0 12px; }
.guide-note > b { display: block; font: 400 10px/1.3 var(--arcade); color: #8a5a16; margin-bottom: 8px; }
.book-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; flex: 0 0 auto; }
.dots { display: flex; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: transform .25s var(--snap), background .25s; }
.dots i.is-on { background: var(--gold); transform: scale(1.3); }

/* ---------------- what you missed ---------------- */
.sheet-review { max-height: calc(86% - var(--safe-t)); }
.review-note { margin: 0 0 12px; font-size: 13px; color: var(--tx-dim); flex: 0 0 auto; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.review-row { background: #fbf3e0; color: #2a1e10; border-radius: 16px; padding: 14px; box-shadow: 0 5px 0 rgba(0,0,0,.35); animation: tile-in .4s var(--snap) both; }
.review-row:nth-child(2) { animation-delay: .05s; } .review-row:nth-child(3) { animation-delay: .1s; }
.review-row:nth-child(4) { animation-delay: .15s; } .review-row:nth-child(n+5) { animation-delay: .2s; }
.review-task { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.review-times { margin-left: 8px; font: 400 9px/1 var(--arcade); color: #b03a33; }
.review-answers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.review-chip { font: 400 9px/1 var(--arcade); padding: 6px 8px; border-radius: 8px; text-transform: uppercase; }
.review-chip.is-wrong { background: #b03a33; color: #fff; }
.review-chip.is-hidden { background: rgba(60,40,20,.12); color: #8a6a3a; }
.review-why { margin: 0; font-size: 14px; color: #5a4628; line-height: 1.4; }

/* ---------------- dialog ---------------- */
.dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,6,14,.6); animation: fade-in .2s ease; z-index: 5; }
@keyframes fade-in { from { opacity: 0; } }
.dialog-card {
  width: min(100%, 380px); padding: 22px 20px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(#2a3a62, #18234a);
  box-shadow: 0 7px 0 #060a14, inset 0 2px 0 rgba(255,255,255,.18);
  animation: pop-in .42s var(--snap);
}
@keyframes pop-in { from { opacity: 0; transform: scale(.7) translateY(20px); } }
.dialog-ico { display: block; width: 44px; height: 44px; margin: 0 auto 10px; }
.dialog-title { font: 400 14px/1.3 var(--arcade); color: #fff; margin: 0 0 12px; }
.dialog-lines p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; color: var(--tx); }
.dialog-lines b { color: #fff; }
.dialog-buttons { display: flex; gap: 10px; margin-top: 14px; }
.dialog-buttons .gbtn { flex: 1 1 0; }
.dialog.is-danger #dialog-ok { --c1: #e8685f; --c2: #b03a33; --sink-c: #4a1210; --t: #fff; }

.c-now { color: var(--now); font-style: normal; font-weight: 700; }
.c-later { color: var(--later); font-style: normal; font-weight: 700; }
.c-give { color: #c97a1e; font-style: normal; font-weight: 700; }
.c-drop { color: #6a7280; font-style: normal; font-weight: 700; }

/* ---------------- toast ---------------- */
.toast {
  position: absolute; left: 50%; top: calc(66px + var(--safe-t));
  transform: translate(-50%, -20px) scale(.9); opacity: 0;
  padding: 11px 16px; border-radius: 14px; max-width: 90vw; text-align: center;
  font: 700 14px/1.3 var(--round); color: #fff;
  background: rgba(16,24,48,.96); box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.12);
  pointer-events: none !important;
  transition: transform .3s var(--snap), opacity .2s ease;
  z-index: 6;
}
.toast.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast.is-good { box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(118,212,131,.7); }
.toast.is-bad { box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(224,82,74,.75); }

/* ---------------- the review's hidden answer ----------------
   A button now: tap it to turn it over. */
button.review-chip { border: 0; cursor: pointer; font-family: var(--arcade); transition: transform .3s var(--snap), background .25s, color .25s; }
button.review-chip.is-hidden:hover { background: rgba(60,40,20,.2); }
button.review-chip.is-shown { color: #fff; animation: chip-flip .4s var(--snap); }
button.review-chip.is-shown.box-now { background: var(--now); }
button.review-chip.is-shown.box-later { background: var(--later); }
button.review-chip.is-shown.box-give { background: #c97a1e; }
button.review-chip.is-shown.box-drop { background: #6a7280; }
@keyframes chip-flip { from { transform: rotateX(90deg) scale(.8); } }

/* ---------------- the special cards, in the guide book ---------------- */
.guide-specials { list-style: none; padding-left: 0; }
.guide-specials li { display: flex; gap: 10px; align-items: baseline; }
.sp-chip { flex: 0 0 52px; text-align: center; font: 400 8px/1 var(--arcade); padding: 6px 0; border-radius: 7px; color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sp-gold { background: linear-gradient(#ffd76a, #e8a33a); color: #3a2208; }
.sp-ice { background: linear-gradient(#bfe6ff, #5b8fd8); }
.sp-fuse { background: linear-gradient(#ffb43a, #e0524a); }
.sp-swap { background: linear-gradient(#9aa2ae, #4a5d86); }

/* ---------------- missions ---------------- */
.sheet-missions { max-height: calc(88% - var(--safe-t)); }
.mission-lead { margin: 0 0 12px; font-size: 13px; color: var(--tx-dim); }
.mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mission {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(#2b3a5c, #1c2742); box-shadow: 0 5px 0 #060a14, inset 0 2px 0 rgba(255,255,255,.1);
  animation: tile-in .4s var(--snap) both; animation-delay: calc(var(--i, 0) * .06s);
  transition: transform .2s var(--spring);
}
.mission:hover { transform: translateY(-2px); }
.mission:hover .mission-ico { transform: rotate(-12deg) scale(1.1); }
.mission-ico { flex: 0 0 auto; width: 30px; height: 30px; transition: transform .3s var(--snap); }
.mission-body { flex: 1 1 auto; min-width: 0; }
.mission-body b { display: block; font-size: 15px; color: #fff; line-height: 1.25; }
.mission-body small { display: block; margin-top: 4px; font-size: 12px; color: var(--tx-dim); }
.mission-bar { display: block; height: 8px; margin-top: 7px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; }
.mission-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f0a93a, #ffd76a); animation: bar-in .9s var(--spring) both; animation-delay: calc(var(--i, 0) * .06s + .15s); transform-origin: left; }
@keyframes bar-in { from { transform: scaleX(0); } }
.mission-reward { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--arcade); color: var(--gold); }
.mission-reward .shop-coin { width: 16px; height: 16px; }

.badge-count { margin-left: 6px; color: var(--gold); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding-bottom: 8px; }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 6px 10px; border-radius: 16px; background: rgba(0,0,0,.25);
  animation: tile-in .4s var(--snap) both; animation-delay: calc(var(--i, 0) * .03s);
  transition: transform .2s var(--spring), background .2s;
}
.badge-ico { width: 34px; height: 34px; filter: grayscale(1) brightness(.45); transition: transform .3s var(--snap), filter .3s; }
.badge b { font-size: 12px; color: var(--tx-dim); line-height: 1.15; }
.badge small { font-size: 10.5px; color: var(--tx-dim); line-height: 1.2; opacity: .8; }
.badge.is-got { background: linear-gradient(rgba(242,193,78,.22), rgba(242,193,78,.06)); box-shadow: inset 0 0 0 2px rgba(242,193,78,.55); }
.badge.is-got .badge-ico { filter: none; }
.badge.is-got b { color: #fff; }
.badge:hover { transform: translateY(-3px); }
.badge.is-got:hover .badge-ico { transform: scale(1.15) rotate(-8deg); }

/* ---------------- my list ---------------- */
.sheet-mine { max-height: calc(90% - var(--safe-t)); }
.mine-lead { margin: 0 0 10px; font-size: 14px; color: var(--tx); flex: 0 0 auto; line-height: 1.35; }
.mine-add { display: flex; gap: 8px; flex: 0 0 auto; margin: 0 0 12px; }
.mine-add input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; border-radius: 12px; padding: 12px 14px;
  font: 600 16px var(--round); color: #fff; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 0 rgba(0,0,0,.35);
  -webkit-user-select: text; user-select: text; transition: box-shadow .2s;
}
.mine-add input:focus { box-shadow: inset 0 2px 0 rgba(0,0,0,.35), 0 0 0 2px var(--gold); }
.mine-add input::placeholder { color: rgba(255,255,255,.35); }
.mine-empty { margin: 6px 2px 12px; font-size: 14px; color: var(--tx-dim); line-height: 1.4; }
.mine-group { margin: 0 0 14px; border-radius: 16px; padding: 10px 10px 6px; background: rgba(0,0,0,.22); animation: tile-in .4s var(--snap) both; }
.mine-group h4 { margin: 0 0 8px; display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
.mine-group h4 b { font: 400 10px/1 var(--arcade); color: #fff; text-transform: uppercase; }
.mine-group h4 small { font-size: 12px; font-weight: 600; color: var(--tx-dim); }
.mine-group.box-now { box-shadow: inset 4px 0 0 var(--now); }
.mine-group.box-later { box-shadow: inset 4px 0 0 var(--later); }
.mine-group.box-give { box-shadow: inset 4px 0 0 var(--give); }
.mine-group.box-drop { box-shadow: inset 4px 0 0 var(--drop); }
.mine-group.box-now h4 b { color: #ff9a8a; }
.mine-group.box-later h4 b { color: #9fc4f4; }
.mine-group.box-give h4 b { color: #ffc77a; }
.mine-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 0 4px; border-radius: 12px;
  background: #fbf3e0; color: #2a1e10; box-shadow: 0 3px 0 rgba(0,0,0,.3);
  animation: tile-in .35s var(--snap) both; animation-delay: calc(var(--i, 0) * .04s);
  transition: opacity .2s, transform .2s var(--spring);
}
.mine-row:hover { transform: translateX(3px); }
.mine-row.is-new { animation: row-new .55s var(--snap) both; }
@keyframes row-new { from { opacity: 0; transform: translateY(-12px) scale(.9); } 60% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 0 3px var(--gold); } }
.mine-row.is-gone { opacity: 0; transform: translateX(40px) scale(.95); }
.mine-tick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 0; cursor: pointer;
  background: rgba(60,40,20,.12); box-shadow: inset 0 0 0 2px rgba(60,40,20,.3);
  position: relative; transition: background .2s, transform .2s var(--snap);
}
.mine-tick:active { transform: scale(.85); }
.mine-row.is-done .mine-tick { background: var(--good); box-shadow: none; }
.mine-row.is-done .mine-tick::after {
  content: ''; position: absolute; left: 8px; top: 4px; width: 7px; height: 13px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); animation: tick-in .3s var(--snap);
}
@keyframes tick-in { from { transform: rotate(45deg) scale(0); } }
.mine-text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; transition: color .2s; }
.mine-row.is-done .mine-text { text-decoration: line-through; color: #9a8a6a; }
.mine-x { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #a08a6a; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--snap); }
.mine-x:hover { background: rgba(176,58,51,.12); color: #b03a33; transform: rotate(90deg); }
.mine-clear { margin: 2px auto 10px; display: block; }
.mine-foot { flex: 0 0 auto; padding-top: 10px; }
.mine-foot .gbtn { width: 100%; font-size: 13px; }

/* ---------------- bigger text ----------------
   Settings > Bigger text. The canvas reads the same setting for the
   cards and trays; this is the same for the sheets. */
body.big-text .sheet, body.big-text .book, body.big-text .dialog-card { font-size: 112%; }
body.big-text .page { font-size: 18px; }
body.big-text .row-btn b, body.big-text .mission-body b, body.big-text .review-task, body.big-text .mine-text { font-size: 17px; }
body.big-text .row-btn small, body.big-text .review-why, body.big-text .shop-tile small, body.big-text .mine-group h4 small { font-size: 14px; }
body.big-text .dialog-lines p { font-size: 17px; }

/* ============================================================
   DESK DAY
   ------------------------------------------------------------
   The sheets are paper on the same desk the game is drawn on (see
   js/desk.js and the Task Sorter game look canvas): a sheet is kraft
   paper slid up over the cork, the things on it are cream index cards,
   buttons are card and tickets, and everything casts the same hard
   brown shadow the canvas does - no glow, no gloss, no rounded app
   cards. Ink is dark brown; handwriting is Kalam; the loud words are
   Bungee; labels are typed in IBM Plex Mono.
   ============================================================ */
:root {
  --ink: #2a1e12;
  --ink-soft: #5a4630;
  --paper: #fffdf6;
  --kraft: #e6d6b4;
  --kraft-dark: #c9b48a;
  --desk-shadow: rgba(46, 24, 6, .42);
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  /* the fibres in a sheet of kraft paper */
  --fibre: radial-gradient(rgba(120, 84, 40, .14) 1px, transparent 1.4px) 0 0 / 7px 7px, radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.4px) 3px 4px / 11px 11px;
  /* blue rules and a red margin, for anything that is an index card */
  --ruled: linear-gradient(90deg, transparent 0 18px, rgba(224, 120, 120, .7) 18px 19.5px, transparent 19.5px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(140, 175, 220, .5) 25px 26.2px);
}

/* ---- the sheet: kraft paper with a strip of tape at the top ---- */
.sheet {
  border-radius: 0;
  background: var(--fibre), var(--kraft);
  color: var(--ink);
  box-shadow: 0 -4px 0 var(--desk-shadow);
}
.sheet::before {
  content: ''; position: absolute; left: 50%; top: -9px; width: 110px; height: 22px; transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(240, 226, 190, .92); box-shadow: 0 1px 0 rgba(46, 24, 6, .15);
}
.sheet-grip { display: none; }
.sheet-head h2 { font: 400 17px/1 'Bungee', sans-serif; color: var(--ink); text-shadow: none; letter-spacing: .01em; }
.sheet-x {
  border-radius: 0; color: var(--ink); background: var(--paper);
  box-shadow: 2px 3px 0 var(--desk-shadow); transform: rotate(3deg);
}
.sheet-x:active { transform: rotate(3deg) translate(2px, 2px); box-shadow: 0 1px 0 var(--desk-shadow); }
.sheet-h { font: 600 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .12em; }

/* ---- buttons: card, with the bottom edge of the card showing ---- */
.gbtn {
  font: 400 13px/1.1 'Bungee', sans-serif; letter-spacing: .02em;
  border-radius: 0; color: var(--t);
  background: var(--c1);
  box-shadow: inset 0 -4px 0 var(--c2), 2px 4px 0 var(--desk-shadow);
  padding: 14px 18px 16px;
}
.gbtn:active { transform: translate(2px, 3px); box-shadow: inset 0 -2px 0 var(--c2), 0 1px 0 var(--desk-shadow); }
.gbtn-sm { padding: 10px 14px 12px; font-size: 11px; }
.gbtn-gold { --c1: #ffd76a; --c2: #e8a33a; --t: var(--ink); }
.gbtn-blue { --c1: #4a86c4; --c2: #2f5f96; --t: #fff; }
.gbtn-red { --c1: #e0524a; --c2: #a8322b; --t: #fff; }
.gbtn-dark { --c1: #f1e8d2; --c2: #cbbd98; --t: var(--ink); }

/* ---- the shop: each item on an index card ---- */
.shop-tabs { background: transparent; padding: 0; gap: 4px; border-bottom: 3px solid var(--kraft-dark); border-radius: 0; }
.shop-tabs button {
  border-radius: 0; color: var(--ink-soft); background: var(--kraft-dark);
  font: 400 11px/1 'Bungee', sans-serif;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.shop-tabs button.is-on { background: #ffd76a; color: var(--ink); box-shadow: none; }
.shop-blurb { color: var(--ink-soft); font-weight: 700; }
.shop-tile {
  border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 2px 4px 0 var(--desk-shadow);
}
.shop-tile:nth-child(3n+1) { transform: rotate(-1deg); }
.shop-tile:nth-child(3n+2) { transform: rotate(.8deg); }
.shop-tile:nth-child(3n) { transform: rotate(-.4deg); }
.shop-tile:hover { filter: none; transform: rotate(0) translateY(-3px); }
.shop-tile:active { transform: translate(2px, 3px); box-shadow: 0 1px 0 var(--desk-shadow); }
.shop-tile b { color: var(--ink); }
.shop-tile small { color: var(--ink-soft); }
.shop-stand::after { background: rgba(46, 24, 6, .2); border-radius: 50%; }
.shop-tile.is-worn:not(.is-blank) { background: #e4f3dc; box-shadow: 2px 4px 0 var(--desk-shadow), inset 0 0 0 3px #3e9d52; }
.shop-tag { border-radius: 0; font: 400 10px/1 'Bungee', sans-serif; color: var(--ink); background: #ffd76a; box-shadow: 1px 2px 0 var(--desk-shadow); }
.shop-tag.is-worn { background: #3e9d52; color: #fff; box-shadow: 1px 2px 0 var(--desk-shadow); }
.shop-tag.is-use { background: #4a86c4; color: #fff; box-shadow: 1px 2px 0 var(--desk-shadow); }
.shop-tag.is-blank { background: var(--kraft); color: var(--ink-soft); }
.shop-tag.is-sealed { background: var(--kraft); color: var(--ink-soft); font: 600 9px/1.3 var(--mono); }
.name-field { border-radius: 0; background: var(--paper); box-shadow: 2px 3px 0 var(--desk-shadow); }
.name-k { font: 600 9px/1 var(--mono); color: #c2412f; }
.hero-name { color: #1f2a44; font-family: 'Kalam', cursive; }
.hero-name::placeholder { color: rgba(42, 30, 18, .35); }
.hero-worn { color: var(--ink-soft); font-weight: 700; }
.hero-set { border-radius: 0; background: rgba(255, 253, 246, .55); color: var(--ink-soft); }
.hero-set b { font: 400 10px/1 'Bungee', sans-serif; color: var(--ink-soft); }
.hero-set.is-on { background: #fff2a8; box-shadow: 2px 3px 0 var(--desk-shadow); animation: none; }
.hero-set.is-on b, .hero-set em { color: #a8641a; }
.stat-head b { color: var(--ink); }
.stat-head span { color: #a8641a; }
.stat-track { border-radius: 0; background: rgba(46, 24, 6, .15); }
.stat-fill { border-radius: 0; background: #e8a33a; }
.stat-row.is-risk .stat-fill { background: #e0524a; }

/* ---- settings ---- */
.acct-fields input, .mine-add input {
  border-radius: 0; color: #1f2a44; background: var(--ruled), var(--paper);
  font-family: 'Kalam', cursive; font-weight: 700;
  box-shadow: 2px 3px 0 var(--desk-shadow);
}
.acct-fields input:focus, .mine-add input:focus { box-shadow: 2px 3px 0 var(--desk-shadow), inset 0 0 0 2px #e8a33a; }
.acct-fields input::placeholder, .mine-add input::placeholder { color: rgba(42, 30, 18, .4); }
.acct-lead, .acct-who, .acct-msg { color: var(--ink); }
.acct-privacy { color: var(--ink-soft); }
.acct-dot { border-radius: 50%; }
.row-btn {
  border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 2px 3px 0 var(--desk-shadow);
}
.row-btn:hover { background: #fffaf0; }
.row-btn b { color: var(--ink); }
.row-btn small { color: var(--ink-soft); }
.row-btn .go { color: var(--ink-soft); }
.theme-chip { border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 2px 3px 0 var(--desk-shadow); }
.theme-chip.is-worn { box-shadow: 2px 3px 0 var(--desk-shadow), inset 0 0 0 3px #c2412f; }
.theme-swatch { border-radius: 0; box-shadow: none; }
/* a switch is a little sliding card */
.switch { border-radius: 0; background: var(--kraft-dark); box-shadow: inset 0 2px 0 rgba(46, 24, 6, .25); }
.switch .knob { border-radius: 0; background: var(--paper); box-shadow: 1px 2px 0 var(--desk-shadow); }
.switch.is-on { background: #3e9d52; }

/* ---- the guide book: a notebook ---- */
.book { border-radius: 0; background: var(--fibre), #8a5a32; box-shadow: 4px 8px 0 var(--desk-shadow); }
.book .sheet-head h2 { color: #fff4dd; }
.pages { border-radius: 0; background: var(--paper); box-shadow: inset 4px 0 0 rgba(224, 120, 120, .6); }
.page { color: var(--ink); }
.guide-h { font: 400 13px/1.3 'Bungee', sans-serif; color: #c2412f; }
.guide-box { border-radius: 0; box-shadow: 2px 3px 0 var(--desk-shadow); }
.guide-box b { font: 400 12px/1.2 'Bungee', sans-serif; }
.guide-note { border-radius: 0; background: #fff2a8; box-shadow: 2px 3px 0 var(--desk-shadow); }
.guide-note > b { font: 400 12px/1.3 'Bungee', sans-serif; color: #a8562a; }
.sp-chip { border-radius: 0; font: 400 10px/1 'Bungee', sans-serif; }
.dots i { border-radius: 50%; background: rgba(255, 244, 220, .35); }
.dots i.is-on { background: #ffd76a; }

/* ---- what you missed, missions, badges, my list ---- */
.review-note, .mission-lead { color: var(--ink-soft); font-weight: 700; }
.review-row { border-radius: 0; background: var(--ruled), var(--paper); box-shadow: 2px 4px 0 var(--desk-shadow); }
.review-chip { border-radius: 0; font: 600 10px/1 var(--mono); }
.review-chip.is-wrong { background: #c2412f; }
.review-chip.is-hidden { background: var(--kraft); color: var(--ink-soft); }
.review-times { font: 400 11px/1 'Bungee', sans-serif; color: #c2412f; }
.mission {
  border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 2px 4px 0 var(--desk-shadow);
}
.mission:nth-child(odd) { transform: rotate(-.5deg); }
.mission:nth-child(even) { transform: rotate(.5deg); }
.mission:hover { transform: translateY(-2px); }
.mission-body b { color: var(--ink); }
.mission-body small { color: var(--ink-soft); font: 600 10px/1 var(--mono); }
.mission-bar { border-radius: 0; background: rgba(46, 24, 6, .12); height: 8px; }
.mission-bar i { border-radius: 0; background: #c2412f; }
.mission-reward { font: 400 13px/1 'Bungee', sans-serif; color: #a8641a; }
.badge-count { color: #c2412f; }
.badge { border-radius: 0; background: rgba(255, 253, 246, .5); box-shadow: none; }
.badge b, .badge small { color: var(--ink-soft); }
.badge-ico { filter: grayscale(1) opacity(.35); }
/* an earned badge is a gold sticker, stuck on at an angle */
.badge.is-got { background: var(--paper); box-shadow: 2px 3px 0 var(--desk-shadow), inset 0 0 0 3px #e8a33a; transform: rotate(-1.5deg); }
.badge.is-got:nth-child(even) { transform: rotate(1.5deg); }
.badge.is-got b { color: var(--ink); }
.mine-lead, .mine-empty { color: var(--ink); }
.mine-group { border-radius: 0; background: rgba(255, 253, 246, .45); }
.mine-group h4 b { font: 400 12px/1 'Bungee', sans-serif; color: var(--ink); }
.mine-group h4 small { color: var(--ink-soft); }
.mine-group.box-now h4 b { color: #c2412f; }
.mine-group.box-later h4 b { color: #2f5f96; }
.mine-group.box-give h4 b { color: #a8641a; }
.mine-row { border-radius: 0; background: var(--paper); box-shadow: 2px 3px 0 var(--desk-shadow); }
.mine-tick { border-radius: 0; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-soft); }
.mine-text { color: #1f2a44; }

/* ---- dialog, toast ---- */
.dialog { background: rgba(30, 16, 4, .55); }
.dialog-card { border-radius: 0; background: var(--ruled), var(--paper); color: var(--ink); box-shadow: 4px 8px 0 var(--desk-shadow); position: relative; }
.dialog-card::before {
  content: ''; position: absolute; left: 50%; top: -10px; width: 96px; height: 22px; transform: translateX(-50%) rotate(2deg);
  background: rgba(255, 150, 180, .82);
}
.dialog-title { font: 400 17px/1.3 'Bungee', sans-serif; color: var(--ink); }
.dialog-lines p { color: var(--ink-soft); font-weight: 700; }
.dialog-lines b { color: var(--ink); }
.toast { border-radius: 0; background: rgba(240, 226, 190, .97); color: var(--ink); box-shadow: 2px 3px 0 var(--desk-shadow); }
.toast.is-good { box-shadow: 2px 3px 0 var(--desk-shadow), inset 4px 0 0 #3e9d52; }
.toast.is-bad { box-shadow: 2px 3px 0 var(--desk-shadow), inset 4px 0 0 #c2412f; }

/* Every line in the pixel font is upper case, as it is on the canvas:
   its lower case is a smaller, different-looking alphabet. */
.dialog-title, .guide-h, .guide-note > b, .guide-box b, .hero-set b, .name-k,
.mine-group h4 b, .badge-count, .review-times { text-transform: uppercase; }

/* Somebody who asked for less motion gets none of the bouncing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}