/* ===========================================================================
 * MET Gnome Lite: styles (update 2026.10.22.1)
 * ---------------------------------------------------------------------------
 * The practice page's palette (ink, gold, cream; Fredoka headings, Nunito
 * text). Phone first, on a music stand: one column, a huge tempo, a huge
 * Start, the gnome big enough to see from a chair.
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
:root { --ink: #211a15; --panel: #2b221b; --panel2: #352a21; --edge: #5b4632; --gold: #f4c542; --gold-d: #b8912a; --cream: #fdf3e0; --dim: #b9a992; --green: #7fc46a; --red: #e5484d; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
html, body { margin: 0; background: var(--ink); color: var(--cream); font: 16px/1.4 'Nunito', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
select, input[type=number] { font: inherit; color: var(--cream); background: var(--panel2); border: 1px solid var(--edge); border-radius: 10px; padding: 6px 8px; }
.small { font-size: 13px; color: var(--dim); }

#bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px; background: rgba(33, 26, 21, .96); border-bottom: 2px solid var(--edge); }
#home { color: var(--gold); text-decoration: none; font: 700 22px 'Fredoka', sans-serif; padding: 0 4px; }
#bar h1 { margin: 0; font: 600 18px 'Fredoka', sans-serif; white-space: nowrap; }
#bar h1 b { color: var(--gold); }
#tabs { margin-left: auto; display: flex; gap: 4px; background: var(--panel); border-radius: 999px; padding: 3px; }
#tabs button { padding: 7px 12px; border-radius: 999px; font: 600 14px 'Fredoka', sans-serif; color: var(--dim); }
#tabs button.on { background: var(--gold); color: var(--ink); }
@media (max-width: 400px) { #bar h1 { font-size: 15px; } #tabs button { padding: 6px 9px; font-size: 13px; } }

.pane { display: none; max-width: 560px; margin: 0 auto; padding: 12px 14px calc(30px + var(--safe-b)); }
.pane.on { display: block; }

/* ---------- the gnome on its stage ---------- */
#stage { position: relative; height: 220px; border-radius: 22px; background: radial-gradient(circle at 50% 85%, #4a3a2a, #241c16 70%); border: 2px solid var(--edge); overflow: hidden; }
#stage.bossFight { background: radial-gradient(circle at 50% 85%, #6b2a22, #241c16 70%); border-color: var(--red); }
#gnomeBox { position: absolute; left: 50%; bottom: 34px; width: 120px; height: 150px; margin-left: -60px; transition: opacity .12s; will-change: transform; }
#gnomeBox.hidden { opacity: .08; }
#gnomeImg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
#gnomeShadow { position: absolute; left: 50%; bottom: -10px; width: 80px; height: 14px; margin-left: -40px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
#bubble { position: absolute; left: 50%; top: 12px; transform: translateX(-50%) scale(.8); opacity: 0; padding: 6px 14px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 16px 'Fredoka', sans-serif; transition: .2s; white-space: nowrap; }
#bubble.on { opacity: 1; transform: translateX(-50%) scale(1); }
#bubble.gold { background: var(--gold); }
#bubble.bad { background: #f3d2c8; }
#countNum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 150px 'Fredoka', sans-serif; color: rgba(253, 243, 224, .28); pointer-events: none; opacity: 0; }
#countNum.on { animation: count .5s ease-out; }
@keyframes count { from { opacity: 1; transform: scale(1.15); } to { opacity: 0; transform: scale(.9); } }
#dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 10px; }
#dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(253, 243, 224, .18); transition: background .05s; }
#dots i.on { background: var(--cream); }
#dots i.on.one { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
#gnomeRow { position: absolute; left: 12px; top: 12px; display: flex; gap: 4px; }
#gnomeRow i { width: 16px; height: 22px; background: rgba(253, 243, 224, .15); clip-path: polygon(50% 0, 100% 60%, 85% 100%, 15% 100%, 0 60%); }
#gnomeRow i.on { background: var(--gold); }
#gnomeRow i.minion.on { background: #c97a4a; }
.spark { position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: spark .9s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---------- tempo ---------- */
#tempoBox { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
.round { width: 64px; height: 64px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--edge); font: 600 34px 'Fredoka', sans-serif; line-height: 1; }
.round:active { background: var(--edge); }
#bpmWrap { display: flex; flex-direction: column; align-items: center; min-width: 130px; }
#bpm { font: 700 72px/1 'Fredoka', sans-serif; letter-spacing: -.02em; }
#bpmWrap small { font: 600 13px 'Fredoka', sans-serif; color: var(--dim); letter-spacing: .2em; }
#bpmSlide { width: 100%; margin: 12px 0 4px; accent-color: var(--gold); }

/* ---------- the gnome's own controls ---------- */
#gnomePanel { margin-top: 8px; }
.judge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.judge button { padding: 18px 8px; border-radius: 16px; font: 700 20px 'Fredoka', sans-serif; }
.judge .great { background: var(--green); color: #12260c; box-shadow: 0 4px 0 #4f7d43; }
.judge .needs { background: #e8a37d; color: #3a1a0c; box-shadow: 0 4px 0 #a5613f; }
.judge button:active { transform: translateY(2px); box-shadow: none; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.mini { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--dim); }
.mini input[type=number] { width: 66px; }
.wide { display: block; width: 100%; margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--edge); font: 600 16px 'Fredoka', sans-serif; }
.wide.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--gold-d); }
.recState { margin: 8px 0 0; font: 600 16px 'Fredoka', sans-serif; text-align: center; }
.verbCard { margin-top: 8px; padding: 16px; border-radius: 18px; background: #f6ecd6; color: var(--ink); border: 4px solid #c9b48a; min-height: 120px; }
.verbCard.flip { animation: vflip .45s ease-out; }
@keyframes vflip { from { transform: perspective(800px) rotateY(90deg); } to { transform: none; } }
.verbCard h3 { margin: 2px 0 8px; font: 700 24px 'Fredoka', sans-serif; }
.verbCard b { display: block; margin-top: 8px; font: 700 12px 'Fredoka', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #7a5a3a; }
.verbCard p { margin: 2px 0 0; font-size: 17px; }
.verbCard ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.verbCard .lvl { font: 700 11px 'Fredoka', sans-serif; padding: 3px 9px; border-radius: 999px; background: #e6d7b5; }
.verbCard .small { color: #6d5843; }

.big { display: block; width: 100%; margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--gold); color: var(--ink); font: 700 24px 'Fredoka', sans-serif; box-shadow: 0 4px 0 var(--gold-d); }
.big:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gold-d); }
.big.on { background: #e8a37d; box-shadow: 0 4px 0 #a5613f; }

#pick h2, details summary { font: 600 17px 'Fredoka', sans-serif; color: var(--gold); margin: 18px 0 6px; }
#gnomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
#gnomes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--edge); font: 600 13px 'Fredoka', sans-serif; }
#gnomes button img { width: 44px; height: 52px; object-fit: contain; }
#gnomes button.on { border-color: var(--gold); background: #4a3a22; }
details { margin-top: 12px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 4px 14px 12px; }
details summary { cursor: pointer; margin: 8px 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(91, 70, 50, .5); }
.row label { font-size: 15px; }
.row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gold); }
.row input[type=range] { width: 50%; accent-color: var(--gold); }
button.small { padding: 8px 18px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--edge); font: 600 15px 'Fredoka', sans-serif; }

/* ---------- the tuner ---------- */
#modes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
#modes button { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--edge); font: 600 14px 'Fredoka', sans-serif; color: var(--dim); }
#modes button.on { border-color: var(--gold); color: var(--cream); }
#readout { margin-top: 12px; text-align: center; }
#note { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
#noteName { font: 700 84px/1 'Fredoka', sans-serif; }
#noteOct { font: 600 26px 'Fredoka', sans-serif; color: var(--dim); }
#readout.good #noteName { color: var(--green); }
#readout.near #noteName { color: var(--gold); }
#readout.off #noteName { color: #f08a7a; }
#cents { font-size: 15px; color: var(--dim); min-height: 1.4em; }
#needle { position: relative; height: 26px; margin: 10px 0 0; border-radius: 13px; background: linear-gradient(90deg, rgba(229, 72, 77, .35), rgba(244, 197, 66, .3) 35%, rgba(127, 196, 106, .45) 45% 55%, rgba(244, 197, 66, .3) 65%, rgba(229, 72, 77, .35)); }
#needle .zone { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; border-left: 2px solid rgba(127, 196, 106, .9); border-right: 2px solid rgba(127, 196, 106, .9); }
#needleBar { position: absolute; top: -6px; bottom: -6px; width: 6px; margin-left: -3px; left: 50%; border-radius: 3px; background: var(--cream); box-shadow: 0 0 8px rgba(0, 0, 0, .6); transition: left .08s linear; }
#scope { display: block; width: 100%; height: min(52vh, 380px); margin-top: 14px; border-radius: 18px; border: 2px solid var(--edge); background: #17120f; }
#scope.short { height: 90px; }
#droneBox { margin-top: 12px; }
#droneNotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
#droneNotes button { padding: 12px 0; border-radius: 12px; background: var(--panel2); border: 2px solid var(--edge); font: 600 17px 'Fredoka', sans-serif; }
#droneNotes button.on { border-color: var(--gold); background: #4a3a22; }
.row.a4 { margin-top: 12px; justify-content: flex-start; }
.row.a4 input { width: 90px; }

#toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%) translateY(20px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 700; transition: .25s; max-width: 92vw; text-align: center; z-index: 50; }
#toast.on { opacity: 1; transform: translateX(-50%); }
.lvls { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lvls button { padding: 7px 12px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--edge); font: 600 13px 'Fredoka', sans-serif; color: var(--dim); }
.lvls button.on { border-color: var(--gold); color: var(--cream); }