:root {
  --gold: #ffe08a;
  --ink: #f7f4ee;
  --plate: rgba(14, 22, 38, 0.82);
  --danger: #ff5d73;
  --mono: "Fira Mono", "Liberation Mono", "Noto Sans Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #c5d4e4;
  overflow: hidden;
}

body {
  cursor: crosshair;
  user-select: none;
}

#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(16, 28, 44, 0.38), transparent 24%),
    linear-gradient(to top, rgba(16, 28, 44, 0.16), transparent 18%);
}

#world {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --threat: 0;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.28) 100%),
    radial-gradient(ellipse at center, transparent 36%, rgba(150, 0, 30, calc(var(--threat) * 0.72)) 100%);
}

#vignette.flash {
  animation: hurt 0.38s ease-out;
}

@keyframes hurt {
  0% { box-shadow: inset 0 0 90px 36px rgba(255, 40, 70, 0.72); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 40, 70, 0); }
}

#hud {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 18px 22px 0;
  pointer-events: none;
  color: var(--ink);
  font-family: "Fira Sans", "Liberation Sans", sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat.lives { align-items: flex-end; }

.k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
}

#score {
  font-family: "Fira Sans Compressed", "Fira Sans", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

#lives {
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--danger);
}

#mid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#modeline {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

#modechip {
  min-height: 1em;
  font-family: "Fira Sans", "Liberation Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
  color: #9fd4ff;
}

#pausebtn {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.4em 0.75em;
  border: 2px solid #9fd4ff;
  border-radius: 999px;
  background: rgba(14, 22, 38, 0.55);
  color: #9fd4ff;
  font: 700 12px "Fira Sans", "Liberation Sans", sans-serif;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

#pausebtn:hover,
#pausebtn:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

#back {
  position: absolute;
  z-index: 220;
  left: 18px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0 0 1px 2px;
  border: 2px solid #9fd4ff;
  border-radius: 999px;
  background: rgba(14, 22, 38, 0.55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#back:hover,
#back:focus-visible {
  border-color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(255, 224, 138, 0.85));
}

#combo {
  margin-top: 2px;
  min-width: 8ch;
  text-align: center;
  font-family: "Fira Sans Compressed", "Fira Sans", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

#title, #notice {
  position: absolute;
  z-index: 180;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  pointer-events: none;
}

#notice {
  z-index: 400;
}

#title {
  top: 0;
  padding: 5vh 16px 8vh;
  background: linear-gradient(to bottom, rgba(18, 30, 46, 0.5), rgba(18, 30, 46, 0.12) 72%, transparent);
}

#title h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  margin: 0;
  font-family: "Fira Sans Compressed", "Fira Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 10vw, 118px);
  line-height: 0.85;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 #24344a, 0 16px 28px rgba(12, 22, 36, 0.35);
}

#title .line,
#title .of {
  display: block;
  margin: 0;
  text-box-trim: trim-both;
}

#title .line {
  line-height: 0.85;
  text-box-edge: cap alphabetic;
}

#title .line:first-child {
  text-box-edge: cap text;
}

#title .of {
  font-family: "Fira Sans", "Liberation Sans", sans-serif;
  font-weight: 650;
  font-style: italic;
  font-size: 0.26em;
  line-height: 1;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  text-box-edge: cap alphabetic;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

#blurb, #bestline, #modehelp, #notice p {
  margin: 12px auto 0;
  max-width: 34rem;
  font-family: "Fira Sans", "Liberation Sans", sans-serif;
  font-weight: 650;
  font-size: 18px;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

#bestline { color: var(--gold); }

#notice.top { top: 0; padding: 6vh 16px 0; }
#notice.over {
  text-align: left;
  padding: 4.5vh 0 0 4vw;
}
#notice.center {
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}

#notice .card {
  background: rgba(14, 22, 38, 0.78);
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 22px 32px 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

#notice.top .card {
  display: inline-block;
  background: rgba(14, 22, 38, 0.55);
}

#notice.over .card {
  width: min(46rem, calc(100vw - 13.5rem));
  max-width: calc(100vw - 13.5rem);
  text-align: left;
  container-type: inline-size;
}

#wordlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.28rem 1.2rem;
  margin: 16px 0 0;
  padding: 2px 4px 0 0;
  max-height: min(52vh, 26rem);
  overflow: auto;
  list-style: none;
  text-align: left;
  pointer-events: auto;
  font-family: var(--mono);
  font-weight: 650;
  font-size: 17px;
  line-height: 1.35;
}

@container (min-width: 22rem) {
  #wordlist { grid-template-columns: 1fr 1fr; }
}

@container (min-width: 36rem) {
  #wordlist { grid-template-columns: 1fr 1fr 1fr; }
}

#wordlist li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.4em;
  min-width: 0;
}

#wordlist a {
  color: white;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
  cursor: pointer;
  min-width: 0;
}

#wordlist .hear {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0 0 0 0.12rem;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: transparent;
  color: white;
  font: 700 0.62rem/1 "Fira Sans", "Liberation Sans", sans-serif;
  cursor: pointer;
}

#wordlist .hear:hover,
#wordlist .hear:focus-visible,
#wordlist .hear[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
}

#wordlist a:hover,
#wordlist a:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

#wordlist .lvl {
  margin-right: 0;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9fd4ff;
  text-decoration: none;
}

#wordlist .gloss {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  color: var(--gold);
}

#wordlist .dot { color: rgba(255, 255, 255, 0.55); }

#pausemenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  pointer-events: auto;
}

#switchmode,
#pausemenu button {
  display: inline-block;
  min-width: 9em;
  margin-top: 16px;
  padding: 0.35em 0.85em;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: transparent;
  color: white;
  font: 700 16px "Fira Sans", "Liberation Sans", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  pointer-events: auto;
}

#pausemenu button { margin-top: 0; }

#switchmode:hover,
#switchmode:focus-visible,
#pausemenu button:hover,
#pausemenu button:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

#notice h2 {
  margin: 0;
  font-family: "Fira Sans Compressed", "Fira Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.9;
  text-shadow: 0 3px 0 #24344a;
}

[hidden] { display: none !important; }

.actor {
  position: absolute;
  width: 0;
  height: 0;
}

.shadow {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -35%);
  background: radial-gradient(ellipse at center, rgba(20, 16, 30, 0.42), rgba(20, 16, 30, 0) 70%);
  pointer-events: none;
}

.sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: 50% 100%;
  overflow: visible;
  pointer-events: none;
}

.sprite img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.28));
}

.actor.active .sprite img {
  filter:
    drop-shadow(0 0 6px #ffe14a)
    drop-shadow(0 0 16px rgba(255, 196, 20, 1))
    drop-shadow(0 0 28px rgba(255, 170, 0, 0.9))
    drop-shadow(0 14px 10px rgba(0, 0, 0, 0.35));
}

.actor.menu .plate-anchor,
.actor.menu .plate {
  pointer-events: auto;
  cursor: pointer;
}

.actor.menu:hover .plate { border-color: var(--gold); }

.plate-anchor {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
}

.stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.14em;
}

.plate {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: 0.1em 0.4em 0.14em;
  background: var(--plate);
  border: 0.12em solid #fff;
  border-radius: 0.28em;
  color: white;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.plate .lvl {
  margin-right: 0.4em;
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: #9fd4ff;
  text-transform: none;
}
.plate .done {
  color: #ffe14a;
  text-shadow: 0 0 0.18em rgba(255, 196, 0, 0.95);
}
.plate .next {
  color: #fff4cc;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
}
.plate .rest { color: rgba(255, 255, 255, 0.92); }
.plate .next.bad { color: var(--danger); text-decoration-color: var(--danger); }

.plate.clue {
  border-color: #9fd4ff;
  background: rgba(14, 32, 54, 0.88);
  text-transform: none;
}

.plate.filling {
  align-items: center;
  letter-spacing: 0;
  padding: 0.16em 0.3em;
}

.holes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
}

.slot {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.72em;
  height: 1.18em;
  padding: 0 0.05em;
  border: 0.08em solid rgba(255, 255, 255, 0.82);
  border-radius: 0.22em;
  line-height: 1;
}

.slot .ch { visibility: hidden; }

.slot.open .ch {
  visibility: visible;
  color: rgba(255, 255, 255, 0.92);
}

.slot.open:not(.hot):not(.filled) {
  border-color: rgba(255, 255, 255, 0.38);
}

.slot.filled .ch {
  visibility: visible;
  color: #ffe14a;
  text-shadow: 0 0 0.18em rgba(255, 196, 0, 0.95);
}

.slot.filled { border-color: rgba(255, 225, 74, 0.45); }

.slot.hot {
  border-color: var(--gold);
  background: rgba(255, 224, 138, 0.16);
}

.slot.bad {
  border-color: var(--danger);
  background: rgba(255, 93, 115, 0.24);
}

.plate.active {
  background: #ffe14a;
  color: #16110a;
  border-color: #16110a;
  box-shadow:
    0 0 0 0.14em #16110a,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.plate.active .lvl,
.plate.active .done,
.plate.active .next,
.plate.active .rest,
.plate.active .clue-text,
.plate.active .slot .ch {
  color: #16110a;
  text-shadow: none;
}

.plate.active .next {
  text-decoration-color: #16110a;
}

.plate.active .next.bad {
  color: var(--danger);
  text-decoration-color: var(--danger);
}

.plate.active .slot {
  border-color: #16110a;
}

.plate.active .slot.hot {
  background: rgba(22, 17, 10, 0.12);
}

.plate.active .slot.filled {
  border-color: #16110a;
}

.plate.danger {
  border-color: var(--danger);
  animation: danger 0.42s ease-in-out infinite;
}

@keyframes danger {
  50% { background: rgba(110, 16, 32, 0.9); }
}

.plate.tap { animation: tap 0.12s ease-out; }
.plate.shake { animation: shake 0.18s linear; }

@keyframes tap {
  50% { transform: scale(1.07); }
}

@keyframes shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.floater {
  position: absolute;
  z-index: 40;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-family: "Fira Sans Compressed", "Fira Sans", sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.03em;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  animation: floatup 0.7s ease-out forwards;
}

@keyframes floatup {
  to { transform: translate(-50%, -140%); opacity: 0; }
}

.bit {
  position: absolute;
  z-index: 35;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  animation: burst 0.45s ease-out forwards;
}

@keyframes burst {
  to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .plate.danger, .floater, .bit, #vignette.flash { animation: none; }
}