/* Grump the Baby Destroyer -- crayon-bright menus, grim in-game HUD. */

:root {
  --ink: #efe9dc;
  --dim: #9a9384;
  --paper: #f4efe0;
  --green: #6f8f5a;
  --green-deep: #35462f;
  --red: #c4342a;
  --amber: #e5a83a;
  --blue: #5b8fd0;
  --panel: rgba(14, 17, 14, 0.9);
  --edge: rgba(160, 175, 145, 0.22);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #07090a; color: var(--ink);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

button {
  font-family: var(--font); font-weight: 600; font-size: 15px;
  color: var(--ink); background: rgba(40, 48, 38, 0.85);
  border: 1px solid var(--edge); border-radius: 10px;
  padding: 11px 20px; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
button:hover { background: rgba(66, 82, 58, 0.95); border-color: rgba(190, 210, 170, 0.5); }
button:active { transform: translateY(1px); }
button.big { background: var(--green); border-color: #90b07a; color: #0d130c; }
button.big:hover { background: #82a668; }
button.mini { padding: 4px 10px; font-size: 12px; margin-left: 10px; }

input, select {
  font-family: var(--font); font-size: 15px; color: var(--ink);
  background: rgba(10, 14, 10, 0.8); border: 1px solid var(--edge);
  border-radius: 8px; padding: 9px 12px; min-width: 150px;
}
input[type=range] { padding: 0; }
input[type=checkbox] { min-width: 0; width: 18px; height: 18px; accent-color: var(--green); }

/* ============================================================== screens */

.screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 24px; overflow-y: auto;
  background:
    radial-gradient(1100px 700px at 50% 8%, rgba(70, 92, 56, 0.30), transparent 65%),
    linear-gradient(180deg, #0d1210 0%, #070907 100%);
}
.screen h3 { font-family: var(--display); font-size: 34px; margin: 0; letter-spacing: .5px; }
.screen h4 { font-family: var(--display); font-size: 19px; margin: 0 0 8px; color: var(--amber); }
.lead { color: var(--dim); margin: -8px 0 6px; max-width: 520px; text-align: center; font-size: 14px; }

.titlewrap { text-align: center; line-height: 1; }
.kicker { font-size: 13px; letter-spacing: .38em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.titlewrap h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(64px, 16vw, 150px); margin: 0; letter-spacing: 6px;
  color: #e9e2cf;
  text-shadow: 0 0 26px rgba(196, 52, 42, .45), 0 6px 0 #23301f, 0 10px 30px rgba(0,0,0,.7);
}
.titlewrap h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 4.6vw, 40px); margin: 2px 0 0;
  color: var(--red); letter-spacing: 3px; text-transform: lowercase;
}
.titlewrap .sub { margin-top: 18px; color: var(--dim); font-size: 15px; letter-spacing: .04em; }

.menubtns { display: flex; flex-direction: column; gap: 10px; width: min(320px, 82vw); margin-top: 10px; }
.menubtns button { width: 100%; }
.foot { position: absolute; bottom: 18px; color: #5d6357; font-size: 12px; text-align: center; padding: 0 20px; }

.row { display: flex; align-items: center; gap: 14px; width: min(520px, 90vw); justify-content: space-between; }
.row label { color: var(--dim); font-size: 14px; }
.row span { min-width: 46px; text-align: right; color: var(--amber); font-variant-numeric: tabular-nums; font-size: 14px; }
.btnrow { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.err { color: #e07a6a; font-size: 13px; min-height: 18px; text-align: center; }

.codebox {
  background: rgba(10, 14, 10, .8); border: 1px dashed var(--edge);
  border-radius: 10px; padding: 12px 18px; font-size: 15px; color: var(--dim);
}
.codebox b { font-family: var(--display); font-size: 30px; letter-spacing: 8px; color: var(--amber); margin-left: 8px; vertical-align: middle; }

.howgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; max-width: 1000px; width: 100%;
}
.howgrid ul { margin: 0; padding-left: 18px; color: #c9c3b4; font-size: 13.5px; line-height: 1.65; }
.howgrid li + li { margin-top: 5px; }
.howgrid b { color: var(--ink); }
table.keys { width: 100%; font-size: 13px; color: #c9c3b4; border-collapse: collapse; }
table.keys td { padding: 3px 0; }
table.keys td:first-child {
  width: 92px; color: var(--amber); font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}

/* ============================================================== overlays */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 6, 5, .72); backdrop-filter: blur(3px);
}

.dlgbox {
  width: min(700px, 94vw); background: var(--panel);
  border: 1px solid rgba(150, 180, 120, .3); border-radius: 16px;
  padding: 26px 28px; box-shadow: 0 30px 90px rgba(0,0,0,.75);
}
.dlgbox .who {
  font-family: var(--display); font-size: 14px; letter-spacing: .34em;
  color: var(--green); margin-bottom: 10px;
}
.qtext { font-family: var(--display); font-size: 25px; line-height: 1.35; margin-bottom: 20px; }
.answers { display: flex; flex-direction: column; gap: 9px; }
.answers button { text-align: left; width: 100%; font-weight: 400; }
.answers button b { color: var(--amber); margin-right: 10px; font-family: ui-monospace, monospace; }
.reply {
  margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--red);
  background: rgba(196, 52, 42, .09); font-size: 15px; line-height: 1.55; font-style: italic;
}
.meter { margin-top: 18px; }
.meter label { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.mbar { height: 7px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.mbar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--amber) 55%, var(--red)); transition: width .5s ease; }

.paper {
  width: min(560px, 92vw); background: var(--paper); color: #2a241a;
  border-radius: 6px; padding: 34px 38px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
  transform: rotate(-.5deg);
}
.paper h4 { font-family: var(--display); font-size: 27px; margin: 0 0 14px; color: #8a3a2a; }
.paper p { font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.paper button { background: #8a3a2a; border-color: #8a3a2a; color: #fff; }

.dawnbox, .overbox, .pausebox, .loadbox {
  width: min(560px, 94vw); background: var(--panel);
  border: 1px solid var(--edge); border-radius: 16px;
  padding: 30px 32px; text-align: center;
}
.dawnkicker { font-size: 12px; letter-spacing: .34em; color: var(--amber); margin-bottom: 10px; }
.dawnbox h3, .overbox h2 { font-family: var(--display); margin: 0 0 16px; }
.overbox h2 { font-size: 46px; color: var(--red); letter-spacing: 4px; }
#dawn-lines, #over-stats { text-align: left; font-size: 14px; line-height: 1.9; color: #c9c3b4; margin-bottom: 20px; }
#dawn-lines .good { color: #9fd07a; }
#dawn-lines .bad { color: #e07a6a; }
#over-sub { color: var(--dim); font-size: 15px; margin-bottom: 18px; font-style: italic; }
.loadbox { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--green);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================== HUD */

#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-size: 14px; }

#vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.82) 100%);
  opacity: .55; transition: opacity .5s ease;
}
#flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#flash.hurt { background: radial-gradient(ellipse at center, transparent 30%, rgba(180,20,10,.6) 100%); animation: fade .55s ease-out; }
#flash.blackout { background: #000; animation: fade 1.1s ease-out; }
#flash.spotted { background: radial-gradient(ellipse at center, transparent 45%, rgba(230,180,60,.45) 100%); animation: fade .7s ease-out; }
#flash.cry { background: radial-gradient(ellipse at center, transparent 35%, rgba(120,140,220,.35) 100%); animation: fade .9s ease-out; }
#flash.grump { background: radial-gradient(ellipse at center, rgba(180,20,10,.4) 0%, rgba(40,0,0,.9) 100%); animation: fade 1.4s ease-out; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

#crosshair {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(0,0,0,.9);
  transition: transform .12s ease, background .12s ease;
}
#crosshair.active { transform: scale(1.9); background: var(--amber); }

#topbar {
  position: absolute; top: 16px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 12px; align-items: center;
}
#clock {
  display: flex; align-items: baseline; gap: 12px;
  background: rgba(8, 11, 9, .72); border: 1px solid var(--edge);
  border-radius: 999px; padding: 7px 20px;
}
#phase { font-family: var(--display); font-size: 15px; letter-spacing: .18em; }
#timeleft { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: var(--amber); }
#clock.night #phase { color: var(--blue); }
#clock.warn #timeleft { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#powerpill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 11, 9, .72); border: 1px solid var(--edge);
  border-radius: 999px; padding: 7px 16px; font-size: 12px; letter-spacing: .12em;
}
#powerpill .dot { width: 8px; height: 8px; border-radius: 50%; background: #6fd06f; box-shadow: 0 0 8px #6fd06f; }
#powerpill.off .dot { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse .8s infinite; }
#powerpill.off { color: var(--red); }

#objectives {
  position: absolute; top: 66px; right: 18px; width: 250px;
  background: rgba(8, 11, 9, .62); border: 1px solid var(--edge);
  border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.7;
  color: #c9c3b4; opacity: 0; transition: opacity .25s ease;
}
#objectives.show { opacity: 1; }
#objectives h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: .2em; color: var(--amber); font-weight: 700; }
#objectives .done { color: #6f7a66; text-decoration: line-through; }
#objectives .warn { color: var(--red); }

#prompt {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: rgba(8, 11, 9, .82); border: 1px solid var(--edge);
  border-radius: 12px; padding: 10px 16px; min-width: 260px; max-width: 460px;
}
.pkey {
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px;
  background: rgba(230, 200, 120, .16); border: 1px solid rgba(230, 200, 120, .45);
  color: var(--amber); border-radius: 6px; padding: 4px 9px; flex: none;
}
.ptext { display: flex; flex-direction: column; gap: 2px; }
.ptext em { font-style: normal; font-size: 11.5px; color: var(--dim); }
#promptbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 0 0 12px 12px; overflow: hidden; }
#promptbar i { display: block; height: 100%; width: 0%; background: var(--amber); }
#promptextra {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 8px; white-space: nowrap; font-size: 12px; color: var(--dim);
  background: rgba(8, 11, 9, .82); border: 1px solid var(--edge);
  border-radius: 8px; padding: 5px 11px;
}
#promptextra b { color: var(--amber); font-family: ui-monospace, monospace; }

#bars { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; width: 168px; }
.bar {
  position: relative; height: 13px; border-radius: 7px;
  background: rgba(8, 11, 9, .72); border: 1px solid var(--edge); overflow: hidden;
}
.bar span { display: block; height: 100%; width: 100%; transition: width .2s ease; }
.bar label { position: absolute; right: 6px; top: -1px; font-size: 10px; opacity: .8; }
#bar-health span { background: linear-gradient(90deg, #a02a22, #d8564a); }
#bar-stam span { background: linear-gradient(90deg, #a08a22, #e0c44a); }
#bar-food span { background: linear-gradient(90deg, #7a5a2a, #c4903a); }
#bar-fear span { background: linear-gradient(90deg, #2a3a7a, #6a7ad8); }

#hands {
  position: absolute; right: 18px; bottom: 88px;
  background: rgba(8, 11, 9, .72); border: 1px solid var(--edge);
  border-radius: 12px; padding: 9px 14px; font-size: 13px; min-width: 130px; text-align: center;
}
#hands .empty { color: #5d6357; }
#hands b { color: var(--amber); }

#hotbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 7px; }
.slot {
  width: 52px; height: 52px; border-radius: 10px; position: relative;
  background: rgba(8, 11, 9, .72); border: 1px solid var(--edge);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.slot.sel { border-color: var(--amber); background: rgba(229, 168, 58, .16); }
.slot .num { position: absolute; top: 2px; left: 5px; font-size: 9px; color: #5d6357; }
.slot .nm { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 8px; color: var(--dim); text-align: center; }

#subtitle {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  font-size: 14px; color: #cfc8b6; text-shadow: 0 2px 8px #000;
  opacity: 0; transition: opacity .3s ease; max-width: 70vw; text-align: center;
}
#subtitle.show { opacity: 1; }

#bigline {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  font-family: var(--display); font-size: clamp(26px, 5vw, 54px);
  letter-spacing: 5px; color: var(--red); text-shadow: 0 0 30px rgba(196,52,42,.6), 0 4px 12px #000;
  opacity: 0; text-align: center; white-space: pre-line;
}
#bigline.show { animation: bigin 2.6s ease-out; }
@keyframes bigin {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

#toasts { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast {
  background: rgba(8, 11, 9, .85); border: 1px solid var(--edge);
  border-radius: 999px; padding: 7px 18px; font-size: 13px;
  animation: toastin .35s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translateY(-8px); } }

#chatlog { position: absolute; left: 18px; top: 76px; width: 300px; font-size: 12.5px; line-height: 1.6; color: #c9c3b4; text-shadow: 0 1px 4px #000; }
#chatbox {
  position: absolute; left: 18px; bottom: 120px; display: flex; gap: 8px; align-items: center;
  background: rgba(8, 11, 9, .85); border: 1px solid var(--edge); border-radius: 10px;
  padding: 6px 12px; pointer-events: auto;
}
#chatbox input { background: none; border: none; outline: none; width: 300px; padding: 2px; }

#hidebadge {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  background: rgba(8, 11, 9, .82); border: 1px solid var(--edge);
  border-radius: 999px; padding: 7px 18px; font-size: 12px; letter-spacing: .16em; color: var(--blue);
}
#hidebadge b { color: var(--amber); }

/* Hiding narrows the view to slats. */
#hud.hiding #vignette { opacity: 1; background: radial-gradient(ellipse 55% 60% at center, transparent 20%, rgba(0,0,0,.97) 78%); }
#hud.peeking #vignette { opacity: .8; background: radial-gradient(ellipse 75% 78% at center, transparent 35%, rgba(0,0,0,.92) 85%); }
#hud.downed #vignette { opacity: 1; background: radial-gradient(ellipse at center, transparent 8%, rgba(90,0,0,.9) 70%); }

@media (max-width: 640px) {
  #objectives { display: none; }
  #chatlog { width: 180px; }
  .slot { width: 42px; height: 42px; font-size: 17px; }
}

/* ============================================================ quests & dread */

#quests {
  position: absolute; left: 18px; top: 66px; width: 270px;
  background: rgba(8, 11, 9, .62); border: 1px solid var(--edge);
  border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #d8d2c2;
}
#quests:empty { display: none; }
#quests h5 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .2em; color: var(--amber); font-weight: 700; text-transform: uppercase; }
#quests .q { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: center; margin: 4px 0; }
#quests .qbox {
  width: 14px; height: 14px; border: 1.5px solid rgba(230, 200, 120, .6); border-radius: 3px;
  font-size: 11px; line-height: 12px; text-align: center; color: #9fd07a;
}
#quests .qt em { font-style: normal; color: var(--amber); font-variant-numeric: tabular-nums; }
#quests .qbar { grid-column: 2; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-top: 2px; }
#quests .qbar i { display: block; height: 100%; background: var(--amber); }
#quests .q.done { color: #7a8470; }
#quests .q.done .qt { text-decoration: line-through; }
#quests .q.done .qbox { border-color: #6f8f5a; }
#chatlog { top: auto; bottom: 170px; }

#modline {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .24em; color: #b8a0e0; text-transform: uppercase;
  text-shadow: 0 1px 6px #000;
}

/* Static that thickens as Grump gets close. Noise tile is generated in ui.js. */
#static {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  mix-blend-mode: screen; background-size: 256px 256px;
  animation: staticjump .12s steps(1) infinite;
}
@keyframes staticjump {
  0% { background-position: 0 0; } 25% { background-position: -83px 41px; }
  50% { background-position: 57px -112px; } 75% { background-position: -140px -29px; }
}
#hud.turned #vignette { background: radial-gradient(ellipse at center, transparent 38%, rgba(40,0,0,.88) 100%); }

#pause-coop { color: var(--dim); font-size: 13px; margin: -4px 0 12px; font-style: italic; }
.dawnbox .quests-done { text-align: left; font-size: 13px; color: #c9c3b4; margin: -8px 0 16px; line-height: 1.7; }

/* ================================================================= map */

#minimap {
  position: absolute; right: 18px; top: 14px; width: 170px; height: 170px;
  border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
#objectives { top: 196px; }
#bigmap {
  position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 5;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(4, 6, 5, .78); backdrop-filter: blur(2px);
}
#bigmap .maphead { display: flex; gap: 16px; align-items: baseline; font-size: 12px; color: var(--dim); letter-spacing: .12em; }
#bigmap .maphead b { font-family: var(--display); font-size: 20px; letter-spacing: .3em; color: var(--ink); }
#bigmapc { border-radius: 10px; border: 1px solid var(--edge); background: rgba(8, 11, 9, .9); max-width: 92vw; }
#bigmap .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; max-width: 92vw; font-size: 12px; color: #c9c3b4; }
#bigmap .legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg.you { background: #fff; } .lg.friend { background: #5b8fd0; } .lg.kid { background: #f09040; }
.lg.safe { background: #7ad07a; } .lg.food { background: #7ad07a; width: 6px; height: 6px; }
.lg.fuel { background: #e0604a; border-radius: 1px; } .lg.part { background: #b8c0c8; border-radius: 1px; }
.lg.quest { background: #f0c060; transform: rotate(45deg); border-radius: 1px; }
.lg.mess { background: none; border: 2px solid #c07ae0; border-radius: 1px; width: 8px; height: 8px; }
.lg.gen { background: #f0d040; transform: rotate(45deg); border-radius: 0; }
.lg.want { background: none; border: 2px solid #e5a83a; border-radius: 2px; }
.lg.lock { background: #c4342a; border-radius: 1px; }
@media (max-width: 640px) { #minimap { width: 110px; height: 110px; } }
.lg.teacher { background: #e8c060; }
.lead a { color: #ffd23f; font-weight: bold; }

/* cutscenes */
#letterbox { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .6s ease; }
#letterbox i:first-child { top: 0; }
#letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 11vh; }
#hud.cinematic #prompt, #hud.cinematic #hotbar, #hud.cinematic #minimap, #hud.cinematic #quests,
#hud.cinematic #objectives, #hud.cinematic #bars, #hud.cinematic #toasts, #hud.cinematic #modline, #hud.cinematic #hands, #hud.cinematic #crosshair,
#hud.cinematic #clock, #hud.cinematic #powerpill { opacity: 0; transition: opacity .4s; }
#hud.cinematic #subtitle { bottom: calc(11vh + 18px); z-index: 5; font-size: 16px; }
#hud.cinematic #bigline { z-index: 5; }

.lg.lunch { background: #6ad0b0; }
.lg.gymt { background: #ff5a3a; }

/* minigames */
#minigame { background: rgba(0, 0, 0, .55); z-index: 30; }
.mgbox { background: #1d201b; border: 3px solid #e5a83a; border-radius: 14px; padding: 12px 14px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); width: min(600px, 96vw); }
.mghead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mghead b { font-family: var(--display); letter-spacing: 3px; font-size: 22px; color: #ffd23f; }
#mg-timer { font: bold 20px "Trebuchet MS", sans-serif; color: #e8e2d0; }
#mg-timer.low { color: #ff6a4a; }
#mg-canvas { width: 100%; height: auto; display: block; border-radius: 8px; background: #000; touch-action: none; }
#mg-help { margin-top: 8px; color: #cfc8b6; font-size: 13px; line-height: 1.4; }
#mg-help b { color: #ffd23f; }