/* ============================================================
   ROENTGEN'S REALM — css/style.css  (OWNER: engine agent)
   Dark teal-accent "scanner" aesthetic. Battle agent injects its
   own <style>; everything else is styled here with rr- prefixes.
   ============================================================ */

:root{
  --rr-bg:#060d11;
  --rr-panel:#0b181f;
  --rr-panel2:#0e222b;
  --rr-edge:#1e4049;
  --rr-edge-hi:#2c5f6b;
  --rr-teal:#41e6c3;
  --rr-teal-dim:#1f7a68;
  --rr-teal-glow:rgba(65,230,195,.35);
  --rr-text:#d8efe9;
  --rr-text-dim:#82a8a0;
  --rr-gold:#ffd166;
  --rr-danger:#ff6b6b;
  --rr-font:'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  --rr-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:var(--rr-bg); color:var(--rr-text); font-family:var(--rr-font); }

#app{ position:fixed; inset:0; overflow:hidden; }
#game-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
  background:#04090c; image-rendering:auto; }

#hud-root,#dialog-root,#menu-root,#touch-root{ position:absolute; inset:0; pointer-events:none; }
#hud-root *,#dialog-root *,#menu-root *,#touch-root *{ pointer-events:auto; }
.hidden{ display:none !important; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--rr-panel); }
::-webkit-scrollbar-thumb{ background:var(--rr-edge-hi); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:var(--rr-teal-dim); }

/* ------------------------------------------------ buttons */
.rr-btn{
  font-family:var(--rr-font); font-size:15px; font-weight:600; letter-spacing:.4px;
  color:var(--rr-text); background:linear-gradient(180deg,var(--rr-panel2),var(--rr-panel));
  border:1px solid var(--rr-edge-hi); border-radius:8px; padding:9px 18px;
  cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.rr-btn:hover{ border-color:var(--rr-teal); box-shadow:0 0 12px var(--rr-teal-glow); }
.rr-btn:active{ transform:translateY(1px) scale(.98); }
.rr-btn:disabled{ opacity:.4; cursor:default; box-shadow:none; border-color:var(--rr-edge); }
.rr-btn.rr-primary{
  background:linear-gradient(180deg,#16695c,#0e4a40); border-color:var(--rr-teal);
  color:#eafff9; box-shadow:0 0 14px var(--rr-teal-glow);
}
.rr-btn.rr-danger{ border-color:#7a3a3a; }
.rr-btn.rr-danger:hover{ border-color:var(--rr-danger); box-shadow:0 0 12px rgba(255,107,107,.3); }

/* ------------------------------------------------ HUD */
.rr-hud{
  position:absolute; top:10px; left:10px; min-width:230px; max-width:330px;
  background:linear-gradient(180deg,rgba(11,24,31,.92),rgba(8,18,23,.88));
  border:1px solid var(--rr-edge-hi); border-radius:10px; padding:8px 12px 9px;
  box-shadow:0 4px 18px rgba(0,0,0,.5), inset 0 0 24px rgba(65,230,195,.04);
  user-select:none; backdrop-filter:blur(3px);
}
.rr-hud-world{ font-size:14px; font-weight:700; letter-spacing:.6px; color:var(--rr-teal);
  text-shadow:0 0 10px var(--rr-teal-glow); margin-bottom:5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.rr-hud-row{ display:flex; align-items:center; gap:8px; }
.rr-lv{ font-family:var(--rr-mono); font-size:12px; font-weight:700; color:var(--rr-gold);
  background:rgba(255,209,102,.08); border:1px solid rgba(255,209,102,.3);
  border-radius:5px; padding:1px 6px; white-space:nowrap; }
.rr-hpbar{ position:relative; flex:1; height:16px; background:#091115;
  border:1px solid var(--rr-edge-hi); border-radius:8px; overflow:hidden; }
.rr-hpfill{ position:absolute; inset:0; width:100%;
  background:linear-gradient(90deg,#1fbf8f,#41e6c3);
  transition:width .35s ease, background .35s ease; }
.rr-hpfill.rr-hp-mid{ background:linear-gradient(90deg,#c9a227,#ffd166); }
.rr-hpfill.rr-hp-low{ background:linear-gradient(90deg,#b03a3a,#ff6b6b); }
.rr-hptext{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--rr-mono); font-size:10.5px; font-weight:700; color:#eafff9;
  text-shadow:0 1px 2px rgba(0,0,0,.8); letter-spacing:.5px; }
.rr-hud-row2{ display:flex; align-items:center; gap:12px; margin-top:5px;
  font-family:var(--rr-mono); font-size:12.5px; color:var(--rr-text); }
.rr-hud-row2 .rr-sigils{ color:var(--rr-teal); }
.rr-hud-row2 .rr-photons{ color:var(--rr-gold); }
.rr-hud-btns{ position:absolute; top:10px; right:10px; display:flex; gap:8px; }
.rr-round-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--rr-edge-hi);
  background:rgba(11,24,31,.9); color:var(--rr-teal); font-size:17px; font-weight:700;
  cursor:pointer; transition:box-shadow .12s, border-color .12s;
}
.rr-round-btn:hover{ border-color:var(--rr-teal); box-shadow:0 0 12px var(--rr-teal-glow); }

/* ------------------------------------------------ toasts */
.rr-toasts{ position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center; z-index:40;
  pointer-events:none; max-width:min(92vw,560px); }
.rr-toast{
  background:linear-gradient(180deg,rgba(14,34,43,.96),rgba(9,20,26,.96));
  border:1px solid var(--rr-teal-dim); border-left:3px solid var(--rr-teal);
  color:var(--rr-text); border-radius:8px; padding:9px 16px; font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 18px rgba(65,230,195,.08);
  animation:rrToastIn .25s ease; text-align:center; pointer-events:none;
}
.rr-toast b{ color:var(--rr-teal); }
.rr-toast.rr-out{ animation:rrToastOut .3s ease forwards; }
@keyframes rrToastIn{ from{ opacity:0; transform:translateY(-12px) scale(.95);} to{ opacity:1; transform:none; } }
@keyframes rrToastOut{ to{ opacity:0; transform:translateY(-8px) scale(.97); } }

/* ------------------------------------------------ dialog */
.rr-dialog-wrap{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:min(94vw,720px); display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:30;
}
.rr-art{
  background:#05080b; border:1px solid var(--rr-edge-hi); border-radius:10px;
  padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 24px rgba(65,230,195,.07);
  animation:rrPanelIn .22s ease;
}
.rr-art canvas{ display:block; border-radius:6px; }
.rr-dialog{
  position:relative; width:100%; min-height:96px;
  background:linear-gradient(180deg,rgba(12,26,33,.97),rgba(7,16,21,.97));
  border:1px solid var(--rr-edge-hi); border-radius:12px;
  padding:14px 44px 14px 16px; display:flex; gap:14px; align-items:flex-start;
  box-shadow:0 10px 34px rgba(0,0,0,.6), inset 0 0 30px rgba(65,230,195,.04);
  cursor:pointer; animation:rrPanelIn .18s ease; user-select:none;
}
@keyframes rrPanelIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.rr-portrait{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #173b46, #0a161c);
  border:2px solid var(--rr-teal-dim); display:flex; align-items:center; justify-content:center;
  font-size:32px; box-shadow:0 0 14px rgba(65,230,195,.15);
}
.rr-dlg-main{ flex:1; min-width:0; }
.rr-name{ font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--rr-teal); margin-bottom:5px; text-shadow:0 0 8px var(--rr-teal-glow); }
.rr-text{ font-size:16px; line-height:1.5; min-height:48px; white-space:pre-wrap; }
.rr-dialog.rr-narrator .rr-text{ font-style:italic; color:#bfe2da; text-align:center; padding-top:8px; }
.rr-next{ position:absolute; right:14px; bottom:10px; color:var(--rr-teal); font-size:15px;
  animation:rrBlink 1s ease infinite; }
@keyframes rrBlink{ 0%,100%{ opacity:1; transform:translateY(0);} 50%{ opacity:.25; transform:translateY(3px);} }

/* ------------------------------------------------ choices */
.rr-choices{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%;
  animation:rrPanelIn .18s ease;
}
.rr-choice{
  font-family:var(--rr-font); font-size:15px; font-weight:600; color:var(--rr-text);
  background:linear-gradient(180deg,var(--rr-panel2),var(--rr-panel));
  border:1px solid var(--rr-edge-hi); border-radius:10px; padding:10px 20px; cursor:pointer;
  transition:border-color .1s, box-shadow .1s, transform .08s;
}
.rr-choice.rr-sel{
  border-color:var(--rr-teal); box-shadow:0 0 14px var(--rr-teal-glow);
  background:linear-gradient(180deg,#14564b,#0d3d36); color:#eafff9; transform:translateY(-1px);
}
.rr-choice-prompt{
  background:rgba(7,16,21,.96); border:1px solid var(--rr-edge-hi); border-radius:10px;
  padding:10px 18px; font-size:15px; text-align:center; width:100%;
}
.rr-choice-prompt b{ color:var(--rr-teal); }

/* ------------------------------------------------ overlays / menu */
.rr-overlay{
  position:absolute; inset:0; background:rgba(3,8,11,.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:50;
  animation:rrFade .18s ease;
}
@keyframes rrFade{ from{ opacity:0; } to{ opacity:1; } }
.rr-menu{
  width:min(94vw,640px); max-height:min(86vh,640px); display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0d1e26,#081218);
  border:1px solid var(--rr-edge-hi); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.7), 0 0 40px rgba(65,230,195,.06);
  animation:rrPanelIn .2s ease;
}
.rr-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--rr-edge);
  font-weight:700; letter-spacing:1px; color:var(--rr-teal); font-size:15px;
  text-transform:uppercase; text-shadow:0 0 10px var(--rr-teal-glow);
}
.rr-x{ background:none; border:1px solid var(--rr-edge-hi); border-radius:6px; color:var(--rr-text-dim);
  font-size:14px; width:30px; height:30px; cursor:pointer; }
.rr-x:hover{ color:var(--rr-danger); border-color:var(--rr-danger); }
.rr-tabs{ display:flex; border-bottom:1px solid var(--rr-edge); background:rgba(5,11,15,.6); flex-wrap:wrap; }
.rr-tab{
  flex:1; min-width:90px; padding:10px 4px; background:none; border:none; cursor:pointer;
  color:var(--rr-text-dim); font-family:var(--rr-font); font-size:13.5px; font-weight:600;
  letter-spacing:.4px; border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.rr-tab:hover{ color:var(--rr-text); }
.rr-tab.rr-on{ color:var(--rr-teal); border-bottom-color:var(--rr-teal);
  text-shadow:0 0 8px var(--rr-teal-glow); }
.rr-menu-body{ overflow-y:auto; padding:16px; flex:1; }
.rr-menu-body h3{ margin:14px 0 8px; font-size:13px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--rr-text-dim); border-bottom:1px solid var(--rr-edge); padding-bottom:5px; }
.rr-menu-body h3:first-child{ margin-top:0; }

/* status tab */
.rr-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rr-stat{
  background:rgba(10,22,28,.7); border:1px solid var(--rr-edge); border-radius:9px;
  padding:10px 12px;
}
.rr-stat .rr-k{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--rr-text-dim); }
.rr-stat .rr-v{ font-family:var(--rr-mono); font-size:18px; font-weight:700; color:var(--rr-text); margin-top:3px; }
.rr-xpbar{ height:9px; background:#091115; border:1px solid var(--rr-edge); border-radius:5px;
  overflow:hidden; margin-top:6px; }
.rr-xpfill{ height:100%; background:linear-gradient(90deg,#7b5fd9,#b69cff); }
.rr-badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.rr-badge{
  width:46px; height:46px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:rgba(255,209,102,.07); border:1px solid rgba(255,209,102,.35);
  box-shadow:0 0 10px rgba(255,209,102,.12);
}
.rr-badge.rr-locked{ filter:grayscale(1); opacity:.28; border-color:var(--rr-edge); box-shadow:none; }

/* codex / lists */
.rr-list-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:rgba(10,22,28,.65); border:1px solid var(--rr-edge); border-radius:9px;
  padding:9px 12px; margin-bottom:7px; color:var(--rr-text); cursor:pointer;
  font-family:var(--rr-font); font-size:14.5px; transition:border-color .1s, box-shadow .1s;
}
.rr-list-row:hover{ border-color:var(--rr-teal-dim); box-shadow:0 0 10px rgba(65,230,195,.1); }
.rr-list-row .rr-emo{ font-size:20px; flex:0 0 auto; }
.rr-list-row .rr-main{ flex:1; min-width:0; }
.rr-list-row .rr-sub{ display:block; font-size:12px; color:var(--rr-text-dim); margin-top:2px; line-height:1.35; }
.rr-list-row.rr-locked{ opacity:.45; cursor:default; }
.rr-list-row.rr-locked:hover{ border-color:var(--rr-edge); box-shadow:none; }
.rr-list-row .rr-go{ color:var(--rr-teal); font-size:13px; flex:0 0 auto; }
.rr-count{ font-family:var(--rr-mono); font-size:11.5px; color:var(--rr-text-dim); float:right; }

/* shop */
.rr-shop-balance{ text-align:center; font-family:var(--rr-mono); font-size:15px; color:var(--rr-gold);
  padding:8px; border-bottom:1px solid var(--rr-edge); background:rgba(255,209,102,.04); }
.rr-price{ font-family:var(--rr-mono); color:var(--rr-gold); font-weight:700; white-space:nowrap; }
.rr-own{ font-family:var(--rr-mono); font-size:11.5px; color:var(--rr-text-dim); white-space:nowrap; }

/* ------------------------------------------------ title screen */
.rr-title{
  position:absolute; inset:0; z-index:60; overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, #0d2630 0%, #071219 55%, #04090c 100%);
  display:flex; align-items:center; justify-content:center;
}
.rr-title::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(65,230,195,.025) 0 1px, transparent 1px 4px);
}
.rr-title-scan{
  position:absolute; left:0; right:0; height:90px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(65,230,195,.10), transparent);
  animation:rrScan 5s linear infinite;
}
@keyframes rrScan{ from{ top:-15%; } to{ top:110%; } }
.rr-title-inner{ position:relative; text-align:center; padding:20px; animation:rrPanelIn .5s ease; }
.rr-title-emoji{ font-size:64px; animation:rrFloat 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 24px rgba(65,230,195,.5)); }
@keyframes rrFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.rr-title-inner h1{
  margin:12px 0 4px; font-size:clamp(24px,7vw,52px); letter-spacing:clamp(2px,1vw,5px); color:#eafff9;
  text-shadow:0 0 24px var(--rr-teal-glow), 0 2px 0 #0a2a26;
  font-weight:800;
}
.rr-title-sub{ color:var(--rr-teal); letter-spacing:3px; font-size:clamp(12px,2.4vw,16px);
  text-transform:uppercase; margin:0 0 6px; text-shadow:0 0 12px var(--rr-teal-glow); }
.rr-title-tag{ color:var(--rr-text-dim); font-size:14px; margin:0 0 30px; }
.rr-title-btns{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.rr-title-btns .rr-btn{ width:240px; font-size:16px; padding:12px 18px; }
.rr-title-foot{ margin-top:26px; color:var(--rr-text-dim); font-size:12px; font-family:var(--rr-mono);
  letter-spacing:.5px; }

/* ending */
.rr-ending{ position:absolute; inset:0; z-index:60; overflow-y:auto;
  background:radial-gradient(ellipse at 50% 30%, #16323d 0%, #071219 60%, #04090c 100%);
  display:flex; align-items:center; justify-content:center; text-align:center; }
.rr-ending-inner{ padding:30px; max-width:560px; animation:rrPanelIn .6s ease; }
.rr-ending-inner .rr-big{ font-size:70px; animation:rrFloat 3s ease-in-out infinite; }
.rr-ending-inner h1{ color:var(--rr-gold); letter-spacing:4px; font-size:clamp(26px,5vw,42px);
  text-shadow:0 0 30px rgba(255,209,102,.4); margin:10px 0; }
.rr-ending-inner p{ color:var(--rr-text); line-height:1.6; }
.rr-credits{ margin:22px 0; color:var(--rr-text-dim); font-size:13.5px; line-height:2; }
.rr-credits b{ color:var(--rr-teal); }

/* ------------------------------------------------ touch controls */
.rr-dpad{
  position:absolute; left:18px; bottom:20px; width:150px; height:150px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:4px; z-index:35; opacity:.85;
}
.rr-dbtn{
  background:rgba(11,24,31,.85); border:1px solid var(--rr-edge-hi); border-radius:10px;
  color:var(--rr-teal); font-size:19px; display:flex; align-items:center; justify-content:center;
  user-select:none; touch-action:none;
}
.rr-dbtn:active,.rr-dbtn.rr-held{ background:rgba(31,122,104,.7); border-color:var(--rr-teal); }
.rr-ab{ position:absolute; right:18px; bottom:26px; display:flex; gap:14px; align-items:flex-end; z-index:35; opacity:.9; }
.rr-abtn{
  width:62px; height:62px; border-radius:50%; border:2px solid var(--rr-teal-dim);
  background:rgba(11,24,31,.85); color:var(--rr-teal); font-size:19px; font-weight:800;
  display:flex; align-items:center; justify-content:center; user-select:none; touch-action:none;
}
.rr-abtn.rr-b{ width:52px; height:52px; color:var(--rr-text-dim); border-color:var(--rr-edge-hi); }
.rr-abtn:active{ background:rgba(31,122,104,.7); border-color:var(--rr-teal); }

/* ------------------------------------------------ misc fx */
.rr-shake{ animation:rrShake .4s ease; }
@keyframes rrShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-7px,2px); } 40%{ transform:translate(6px,-3px); }
  60%{ transform:translate(-5px,-2px); } 80%{ transform:translate(4px,2px); }
}
.rr-settings-row{ display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,22,28,.65); border:1px solid var(--rr-edge); border-radius:9px;
  padding:11px 14px; margin-bottom:10px; font-size:14.5px; }
.rr-kbd{ font-family:var(--rr-mono); font-size:12px; background:#0a161c; border:1px solid var(--rr-edge-hi);
  border-bottom-width:2px; border-radius:5px; padding:1px 7px; color:var(--rr-teal); }

/* ------------------------------------------------ E6: HUD XP bar */
.rr-hud-xp{ height:5px; background:#091115; border:1px solid var(--rr-edge);
  border-radius:3px; overflow:hidden; margin-top:6px; }
.rr-hud-xpfill{ height:100%; width:0;
  background:linear-gradient(90deg,#7b5fd9,#b69cff);
  transition:width .55s cubic-bezier(.22,1,.36,1); }
.rr-hud-xpfill.rr-xp-bump{ animation:rrXpBump .55s ease; }
@keyframes rrXpBump{
  0%{ filter:brightness(1); box-shadow:none; }
  30%{ filter:brightness(2.1); box-shadow:0 0 12px #b69cff; }
  100%{ filter:brightness(1); box-shadow:none; }
}
.rr-hud-xplabel{ font-family:var(--rr-mono); font-size:10px; letter-spacing:.6px;
  color:var(--rr-text-dim); margin-top:3px; text-transform:uppercase; }

/* ------------------------------------------------ E3/E4/E5/E11: HUD chips */
.rr-chips{ position:absolute; top:10px; left:352px; display:flex; gap:7px; flex-wrap:wrap;
  max-width:calc(100vw - 470px); }
.rr-chip{
  font-family:var(--rr-mono); font-size:12.5px; font-weight:700; color:var(--rr-text);
  background:rgba(11,24,31,.9); border:1px solid var(--rr-edge-hi); border-radius:14px;
  padding:5px 11px; cursor:pointer; white-space:nowrap; user-select:none;
  transition:border-color .12s, box-shadow .12s;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.rr-chip:hover{ border-color:var(--rr-teal); box-shadow:0 0 10px var(--rr-teal-glow); }
.rr-chip.rr-pulse{ animation:rrChipPulse 1.6s ease-in-out infinite; border-color:var(--rr-teal); }
@keyframes rrChipPulse{
  0%,100%{ box-shadow:0 0 0 rgba(65,230,195,0); transform:scale(1); }
  50%{ box-shadow:0 0 14px var(--rr-teal-glow); transform:scale(1.08); }
}
.rr-chip-streak{ color:#ffb05e; }
.rr-chip-nem{ color:#ff8a8a; border-color:#6b2f3a; }

/* ------------------------------------------------ E3: daily case overlay */
.rr-daily-body{ text-align:center; }
.rr-daily-shade{ font-size:54px; filter:drop-shadow(0 0 22px rgba(140,110,220,.5));
  animation:rrFloat 3s ease-in-out infinite; }
.rr-daily-name{ font-size:20px; font-weight:800; letter-spacing:3px; color:#cdb6ff;
  text-shadow:0 0 16px rgba(150,120,230,.5); margin:6px 0 2px; }
.rr-daily-kingdom{ color:var(--rr-teal); font-size:15px; margin-bottom:8px; }
.rr-daily-rules{ font-family:var(--rr-mono); font-size:12.5px; color:var(--rr-text-dim);
  margin:6px 0; letter-spacing:.4px; }
.rr-daily-streak{ font-size:14px; color:#ffb05e; margin:4px 0 10px; }
.rr-daily-note{ font-size:13px; color:var(--rr-text-dim); background:rgba(10,22,28,.65);
  border:1px solid var(--rr-edge); border-radius:8px; padding:8px 12px; margin:8px auto;
  max-width:440px; line-height:1.45; }
.rr-daily-score{ font-family:var(--rr-mono); font-size:44px; font-weight:800; color:var(--rr-gold);
  text-shadow:0 0 24px rgba(255,209,102,.4); margin:4px 0; }
.rr-daily-start{ margin-top:8px; font-size:17px; padding:12px 30px; }
.rr-daily .rr-btn{ margin:5px 4px 0; }

/* daily code row */
.rr-code-row{ display:flex; gap:8px; align-items:center; justify-content:center; margin:8px 0; }
.rr-code{ font-family:var(--rr-mono); font-size:14px; letter-spacing:1px; color:var(--rr-teal);
  background:#06141a; border:1px dashed var(--rr-teal-dim); border-radius:7px;
  padding:7px 12px; user-select:all; }

/* ------------------------------------------------ E5/E8: progress bars, quests */
.rr-prog{ display:block; height:7px; background:#091115; border:1px solid var(--rr-edge);
  border-radius:4px; overflow:hidden; margin-top:6px; }
.rr-progfill{ display:block; height:100%;
  background:linear-gradient(90deg,var(--rr-teal-dim),var(--rr-teal));
  transition:width .4s ease; }
.rr-quest{ background:rgba(10,22,28,.65); border:1px solid var(--rr-edge); border-radius:9px;
  padding:10px 13px; margin-bottom:8px; }
.rr-quest-label{ font-size:14.5px; }
.rr-quest-label .rr-count{ float:right; margin-top:2px; }
.rr-quest.rr-quest-done{ border-color:var(--rr-teal-dim); }
.rr-quest.rr-quest-done .rr-quest-label{ color:var(--rr-teal); }
.rr-quest.rr-quest-done .rr-progfill{ background:linear-gradient(90deg,#1fbf8f,#41e6c3); }

/* E8 — locked kingdom: boss emoji as a black silhouette */
.rr-silhouette{ filter:brightness(0); opacity:.85; }

@media (max-width:700px){
  .rr-hud{ min-width:0; max-width:62vw; padding:6px 9px; }
  .rr-text{ font-size:14.5px; }
  .rr-portrait{ width:44px; height:44px; font-size:25px; }
  .rr-stat-grid{ grid-template-columns:1fr; }
  .rr-dialog-wrap{ bottom:96px; }
  .rr-chips{ left:10px; top:auto; bottom:200px; max-width:60vw; }
  .rr-hud-xplabel{ display:none; }
}