:root {
  --ink: #082433;
  --paper: #f4fbff;
  --line: rgba(8, 36, 51, 0.18);
  --accent: #0b6e8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  color: var(--ink);
  background: #9fd4ea;
}
body[data-zone="sunlight"] { background: linear-gradient(#b7e3f5, #7ec8e3 70%); color: #082433; --paper: #f7fcff; --accent: #0b6e8a; }
body[data-zone="twilight"] { background: linear-gradient(#1e4d73, #163a58); color: #e7f4ff; --paper: #12324d; --ink: #e7f4ff; --accent: #8fd0ea; --line: rgba(231, 244, 255, 0.2); }
body[data-zone="midnight"] { background: linear-gradient(#0c2340, #08182c); color: #d5e6f5; --paper: #0d2036; --ink: #d5e6f5; --accent: #9ec4e6; --line: rgba(213, 230, 245, 0.18); }
body[data-zone="abyssal"] { background: linear-gradient(#071422, #050d16); color: #c9d7e4; --paper: #0a1622; --ink: #c9d7e4; --accent: #b7c6d4; --line: rgba(201, 215, 228, 0.16); }
body[data-zone="hadal"] { background: #03070d; color: #d7e0e8; --paper: #0b1016; --ink: #d7e0e8; --accent: #e7d7a1; --line: rgba(215, 224, 232, 0.16); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app { min-height: 100%; }
.screen { max-width: 760px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.top, .readout, .field, .actions, .modes { display: flex; gap: 8px; align-items: center; }
.top { justify-content: space-between; }
.mark { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 0.03em; }
.sub, .legal, .stats, .qlabel, .msg, .summary { margin: 0; }
.sub, .stats, .qlabel { font-family: system-ui, sans-serif; font-size: 12px; opacity: 0.85; }
.legal { font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.4; border-left: 3px solid var(--accent); padding: 6px 8px; background: var(--paper); }
.modes button, .actions button, .field button {
  font-family: system-ui, sans-serif;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
}
.modes button[aria-pressed="true"], .go { background: var(--ink); color: var(--paper); }
.layout { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: stretch; }
.gauge {
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  min-height: 280px;
}
.fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: rgba(8, 20, 32, 0.45);
}
.tick, .floor {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  z-index: 1;
}
.tick { top: 4px; }
.floor { bottom: 4px; }
.main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.depth { margin: 0; font-size: 28px; line-height: 1; }
.zone { margin: 0 0 0 auto; font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.pips { display: flex; gap: 6px; }
.pip { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 1px solid var(--line); }
.pip.now { background: var(--accent); }
.pip.plankton { background: #3cbf7a; }
.pip.clever { background: #e2c14a; }
.pip.schooler { background: #3d7edb; }
.pip.rare { background: #8a5cd6; }
.pip.deep { background: #e08a3c; }
.pip.krillion { background: #d64545; }
.pip.miss { background: #d7dde3; }
.prompt { margin: 0; font-size: clamp(22px, 4vw, 32px); line-height: 1.15; }
.timer { display: flex; align-items: center; gap: 8px; }
.clock { font-family: system-ui, sans-serif; font-weight: 700; min-width: 3ch; }
.track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.barfill { display: block; height: 100%; width: 100%; background: var(--accent); }
.field { align-items: stretch; }
.field input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #082433;
  font-family: system-ui, sans-serif;
}
label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ask { position: relative; }
.msg { min-height: 1.3em; font-family: system-ui, sans-serif; font-size: 14px; }
.msg.bad { color: #9a3b2f; }
body[data-zone="twilight"] .msg.bad,
body[data-zone="midnight"] .msg.bad,
body[data-zone="abyssal"] .msg.bad,
body[data-zone="hadal"] .msg.bad { color: #ffb4a8; }
.log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-family: system-ui, sans-serif; font-size: 13px; }
.log li { background: var(--paper); border-radius: 8px; padding: 4px 8px; }
.result { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-radius: 14px; padding: 12px; }
.result[hidden] { display: none; }
.band { margin: 0; font-size: 32px; line-height: 1; }
.summary { font-family: system-ui, sans-serif; }
textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 8px;
  background: #fff;
  color: #082433;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  resize: vertical;
}
.again { align-self: flex-start; border-radius: 999px; padding: 8px 12px; }
.shake { animation: shake .35s linear; }
@keyframes shake {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}
@media (max-width: 560px) {
  .layout { grid-template-columns: 28px 1fr; }
  .gauge { min-height: 220px; }
}