/* shared/rm.css: base look for the shared components. Load with <link rel="stylesheet" href="../shared/rm.css">.
 * Games theme it by overriding the custom properties below (on :root or a container), or with more specific rules.
 * Keep sizes (>= 60px targets), the single neutral answer-button colour, and the lockout/reveal states. */
:root{
  --rm-ink:#2b2340;           /* text on buttons and panels */
  --rm-font:system-ui,-apple-system,"Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;
  --rm-btn-bg:#fffaf0;        /* ONE neutral colour for every answer button (rule 3: colours carry no answer) */
  --rm-btn-edge:#d9c9a8;      /* the 3D bottom edge */
  --rm-btn-size:64px;         /* min height/width of answer buttons */
  --rm-good:#7fe0b8; --rm-oops:#ffc2b0; --rm-reveal:#ffe27a;
  --rm-panel-bg:#fffaf0; --rm-accent:#8f7bff;
  --rm-staff-ink:#1d1830; --rm-staff-line:#1d1830; --rm-staff-paper:#fff;
}

/* ---------- generic button ---------- */
.rm-btn{font-family:var(--rm-font);color:var(--rm-ink);background:var(--rm-btn-bg);border:0;border-radius:16px;
  box-shadow:0 5px 0 var(--rm-btn-edge);min-height:var(--rm-btn-size);min-width:var(--rm-btn-size);font-size:30px;font-weight:800;
  touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .06s,filter .15s,opacity .15s}
.rm-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rm-btn-edge)}
.rm-btn.rm-small{min-height:48px;min-width:48px;font-size:20px;padding:0 14px}

/* ---------- letters: A–G in one row, alphabetical, all the same colour ---------- */
.rm-letters{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;padding:8px 6px 12px}
.rm-letters .rm-letter{flex:1 1 0;max-width:120px;height:clamp(64px,12vh,110px);font-size:clamp(28px,5vh,44px);position:relative;padding:0}
.rm-letters .rm-letter.rm-acc{font-size:clamp(24px,4vh,36px)}
@media (max-width:520px){.rm-letters{flex-wrap:wrap}.rm-letters .rm-letter{flex:0 0 calc(25% - 10px);max-width:none}}

/* ---------- piano keyboard ---------- */
.rm-mode-keyboard{height:clamp(140px,26vh,230px);padding:4px 6px 10px}
.rm-kb .rm-wk{margin:0 1.5px;border:0;border-radius:0 0 12px 12px;background:linear-gradient(#fff,#f3eee4);box-shadow:0 5px 0 #c9bba0,inset 0 0 0 1px #d8ccb6;
  display:flex;align-items:flex-end;justify-content:center;padding:0 0 10px;font-family:var(--rm-font);color:var(--rm-ink);touch-action:manipulation}
.rm-kb .rm-bk{height:60%;border:0;border-radius:0 0 9px 9px;background:linear-gradient(#4b4560,#1c1828);box-shadow:0 4px 0 #0d0a16;touch-action:manipulation}
.rm-kb .rm-klab{font-size:clamp(11px,1.8vh,15px);font-weight:700;opacity:.55;pointer-events:none}
.rm-kb .rm-klab.rm-hint{opacity:.4}
.rm-kb .rm-wk:active{background:#ece6d8}.rm-kb .rm-bk:active{background:#2c2840}

/* ---------- violin fingerboard: G D A E strings, fingers 0–4 top to bottom ---------- */
.rm-fb{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px;padding:8px 18px 12px;border-radius:18px;
  background:linear-gradient(90deg,#2a1d13,#4a3424 50%,#2a1d13);position:relative}
.rm-fb .rm-sname{text-align:center;font:800 22px var(--rm-font);color:#ffd36b}
.rm-fbtn{height:60px;border-radius:30px;border:3px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;
  font:800 24px var(--rm-font);position:relative;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:6px}
.rm-fbtn.rm-open{background:rgba(255,211,107,.2);border-color:rgba(255,211,107,.65)}
.rm-fbtn small{font-size:13px;font-weight:700;opacity:.8}
.rm-fbtn .rm-hint{font-size:15px;opacity:.6}
.rm-fbtn:disabled{opacity:.25}

/* ---------- preview (RM.input.preview): the intro's "where these notes are" picture ---------- */
.rm-preview .rm-show{background:linear-gradient(#ffe590,#ffc93d)!important;color:#4a3b63}
.rm-preview .rm-letter:not(.rm-show){opacity:.35}
.rm-preview .rm-kb .rm-bk.rm-show{box-shadow:0 4px 0 #b8860b}
.rm-preview .rm-fbtn.rm-show{border-color:#fff3c4}
.rm-preview .rm-show .rm-klab{display:none}
.rm-preview .rm-pvl{font:800 clamp(12px,2vh,17px) var(--rm-font);color:#4a3b63;pointer-events:none;white-space:nowrap}
.rm-preview .rm-bk .rm-pvl{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:clamp(10px,1.6vh,14px)}
.rm-preview .rm-fbtn .rm-pvl{font-size:15px}
.rm-preview.rm-mode-keyboard{height:clamp(100px,17vh,170px)}
.rm-preview .rm-fb{gap:5px 14px;padding:6px 16px 8px}
.rm-preview .rm-fbtn{height:clamp(34px,5.6vh,50px);font-size:20px}
.rm-preview .rm-letters .rm-letter{height:clamp(48px,8vh,72px)}
.rm-preview .rm-ping{animation:rm-ping .55s ease-out}
@keyframes rm-ping{0%{transform:translateY(0)}35%{transform:translateY(-8px) scale(1.06)}100%{transform:none}}

/* ---------- mic ---------- */
.rm-micbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;font-family:var(--rm-font);color:var(--rm-ink)}
.rm-micsay{font-size:24px;font-weight:800}
.rm-microw{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.rm-micreveal:empty{display:none}
.rm-micwrong{border:0;border-radius:16px;background:#fff3d6;color:var(--rm-ink);box-shadow:0 4px 0 #e6c98f;font:800 22px var(--rm-font);padding:10px 22px;min-height:60px;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-micwrong:active{transform:translateY(3px);box-shadow:0 1px 0 #e6c98f}
.rm-micwrong[hidden]{display:none}
.rm-micreveal{display:flex;align-items:center;gap:12px;font-size:22px}
.rm-micdiag{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.rm-micmeter{position:relative;width:100%;max-width:360px;height:16px;border-radius:8px;background:rgba(0,0,0,.12);overflow:hidden}
.rm-micmeter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7fe0c3,#8f7bff,#ff8fb8)}
.rm-micmeter b{position:absolute;top:0;bottom:0;width:3px;background:#e0533d;left:0}
.rm-michear{font-size:22px;font-weight:800}.rm-micstat{font:13px ui-monospace,Menlo,monospace;opacity:.75}

/* ---------- answer states (same in every game) ---------- */
.rm-input.rm-locked .rm-letter,.rm-input.rm-locked .rm-wk,.rm-input.rm-locked .rm-bk,.rm-input.rm-locked .rm-fbtn{filter:grayscale(.7) brightness(.82);opacity:.55}
.rm-input.rm-revealing button:not(.rm-reveal){opacity:.45}
.rm-input .rm-reveal{animation:rm-pulse .55s ease-in-out infinite alternate;background:var(--rm-reveal)!important;opacity:1!important;z-index:3}
.rm-input .rm-good{background:var(--rm-good)!important}
.rm-input .rm-oops{background:var(--rm-oops)!important}
.rm-input .rm-wiggle{animation:rm-wiggle .3s}
@keyframes rm-pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes rm-wiggle{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- nav: home button, badge, gear, top bar ---------- */
.rm-home,.rm-badge,.rm-gear{font-family:var(--rm-font);color:var(--rm-ink);background:rgba(255,255,255,.9);border:0;border-radius:32px;
  min-height:60px;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 14px;font-size:20px;font-weight:800;text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.15);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rm-home .rm-ico,.rm-badge .rm-ico{font-size:28px}
.rm-gear{min-width:60px;justify-content:center;padding:0;font-size:30px;cursor:pointer}
.rm-home.rm-fixed{position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));z-index:50}
.rm-gear.rm-fixed{position:fixed;right:calc(12px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:50}
.rm-badge.rm-fixed{position:fixed;right:calc(84px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:50}
.rm-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;pointer-events:none}
.rm-bar>*{pointer-events:auto}.rm-bar-r{display:flex;gap:10px;align-items:center}
.rm-bar.rm-fixed{position:fixed;left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);z-index:50}
@media (max-width:520px){.rm-home .rm-txt{display:none}.rm-home{padding:0 16px}.rm-badge .rm-txt{display:none}}

/* ---------- settings panel ---------- */
.rm-overlay{position:fixed;inset:0;z-index:100;background:rgba(20,14,40,.6);display:none;align-items:center;justify-content:center;padding:14px;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.rm-overlay.on{display:flex}
/* The panel scrolls when it is taller than the screen (phones, landscape iPad): a hard max-height in viewport units
   (100% of a flex container is unreliable on iOS), pan-y so touches scroll it, and overscroll contained to the panel. */
.rm-panel{position:relative;box-sizing:border-box;background:var(--rm-panel-bg);color:var(--rm-ink);font-family:var(--rm-font);border-radius:28px;padding:18px 22px;
  width:100%;max-width:640px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  -webkit-overflow-scrolling:touch;box-shadow:0 20px 50px rgba(0,0,0,.4);scrollbar-width:thin;scrollbar-gutter:stable}
.rm-panel::-webkit-scrollbar{width:10px}.rm-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:5px}
.rm-end{height:12px}
.rm-panel h2{margin:4px 0 8px;font-size:30px}.rm-panel h3{margin:14px 0 2px;font-size:22px}
.rm-close{position:absolute;right:14px;top:12px;width:60px;height:60px;border-radius:30px;border:0;background:#efe6d6;font-size:26px;color:var(--rm-ink)}
.rm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:2px dashed #eadcc2;font-size:20px;font-weight:700}
.rm-row.rm-col{flex-direction:column;align-items:stretch}
.rm-row small{display:block;font-size:14px;font-weight:500;opacity:.7}
.rm-seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rm-segb,.rm-tog{min-height:56px;min-width:64px;border-radius:28px;border:0;background:#ece3f7;color:var(--rm-ink);font:700 18px var(--rm-font);padding:0 14px;
  display:inline-flex;align-items:center;gap:6px;touch-action:manipulation}
.rm-segb .rm-ico{font-size:22px}
.rm-segb.on,.rm-tog.on{background:var(--rm-good);box-shadow:inset 0 0 0 3px rgba(0,0,0,.08)}
.rm-segb:disabled{opacity:.35}
.rm-range{flex:1;max-width:280px;height:40px;accent-color:var(--rm-accent)}
.rm-row.rm-sub{border-bottom:0;padding:0}
.rm-diag{width:100%;margin-top:8px}.rm-diag[hidden]{display:none}