/* ============================================================
   DINO RAMPAGE — voxel island HUD
   Mobile-first portrait, scales up to desktop.
   ============================================================ */

:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ink:#120d08;
  --panel:rgba(24,17,11,.82);
  --panel-hi:rgba(58,42,27,.9);
  --stroke:rgba(255,236,199,.22);
  --gold:#ffc63f;
  --gold-dk:#b8791a;
  --meat:#e05236;
  --gem:#a44bff;
  --hp:#e8433a;
  --food:#ffbe3d;
  --rage:#e0301f;

  --u: 1px; /* scale unit, tuned by JS on big screens */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  overflow:hidden; background:#0b1410;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:#fff;
  -webkit-user-select:none; user-select:none;
  touch-action:none; overscroll-behavior:none;
}

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

.hidden{ display:none !important; }

/* ============================ HUD shell ============================ */
#hud{ position:fixed; inset:0; pointer-events:none; z-index:10; }
#hud button{ pointer-events:auto; }

/* ============================ top bar ============================ */
.topbar{
  position:absolute; left:0; right:0; top:calc(var(--safe-t) + 8px);
  padding:0 calc(var(--safe-l) + 9px) 0 calc(var(--safe-r) + 9px);
  display:flex; align-items:center; gap:7px; justify-content:space-between;
}

.chip{
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 9px 0 4px;
  background:linear-gradient(180deg,rgba(46,33,21,.94),rgba(20,14,9,.94));
  border:1.5px solid rgba(255,229,178,.20);
  border-radius:18px;
  box-shadow:0 3px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
}

.chip-num{
  font-weight:800; font-size:15px; letter-spacing:.4px;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
}

.icon{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%, #4b3521, #241811);
  border:1.5px solid rgba(255,229,178,.18);
}
.icon svg{ width:19px; height:19px; display:block; }
.icon-gem{ background:radial-gradient(circle at 34% 28%, #402a5c, #1c1226); }

/* -- level + xp -- */
.chip-xp{ flex:1 1 auto; min-width:0; max-width:190px; padding:0 8px 0 3px; gap:5px; }

.lvl-badge{
  position:relative; width:27px; height:30px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#ffd158,#d8901c);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
.lvl-badge::after{
  content:""; position:absolute; inset:2.5px;
  background:linear-gradient(180deg,#3a2410,#191009);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.lvl-badge i{
  position:relative; z-index:2; font-style:normal; font-weight:900;
  font-size:15px; color:#ffd97a; text-shadow:0 1.5px 0 #000;
}

.xp-track{
  position:relative; flex:1 1 auto; height:16px; min-width:52px;
  background:#180f07; border:1.5px solid rgba(255,229,178,.16);
  border-radius:9px; overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.xp-fill{
  position:absolute; inset:1px auto 1px 1px; width:0%;
  background:linear-gradient(180deg,#ffd85e,#f0a020 55%,#c67210);
  border-radius:8px; transition:width .28s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 0 8px rgba(255,180,60,.5);
}
.xp-text{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:10.5px; font-weight:800; letter-spacing:.3px;
  text-shadow:0 1.5px 0 rgba(0,0,0,.85); font-variant-numeric:tabular-nums;
}

/* -- gems -- */
.chip-gem{ padding-right:4px; }
.plus{
  width:24px; height:24px; margin-left:2px; border:none; border-radius:7px;
  background:linear-gradient(180deg,#5ddc5a,#2a9b34);
  box-shadow:0 2px 0 #16621d, inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff; font-size:17px; font-weight:900; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding-bottom:2px;
}
.plus:active{ transform:translateY(2px); box-shadow:0 0 0 #16621d; }

/* ============================ vitals ============================ */
.vitals{
  position:absolute; left:calc(var(--safe-l) + 11px); top:calc(var(--safe-t) + 50px);
  display:flex; flex-direction:column; gap:5px; width:132px;
}
.vbar{ display:flex; align-items:center; gap:5px; }
.vico{ width:15px; height:15px; flex:0 0 auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)); }
.vico svg{ width:100%; height:100%; display:block; }
.vtrack{
  position:relative; flex:1 1 auto; height:9px;
  background:rgba(12,8,5,.8); border:1.5px solid rgba(255,229,178,.18);
  border-radius:6px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.vtrack b{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  border-radius:5px; transition:width .18s linear;
}
#hp-fill{ background:linear-gradient(180deg,#ff7d63,#d32b22); box-shadow:0 0 6px rgba(230,60,45,.45); }
#food-fill{ background:linear-gradient(180deg,#ffd979,#e59413); box-shadow:0 0 6px rgba(240,160,40,.4); }
.vbar.low #hp-fill{ animation:hpPulse .55s ease-in-out infinite; }
@keyframes hpPulse{ 50%{ filter:brightness(1.85); } }

/* ============================ radar ============================ */
.radar{
  position:absolute; right:calc(var(--safe-r) + 11px); top:calc(var(--safe-t) + 50px);
  width:76px; height:76px; border-radius:50%;
  background:rgba(10,16,12,.62);
  border:2px solid rgba(255,229,178,.22);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 14px rgba(0,0,0,.55);
  overflow:hidden;
}
.radar canvas{ width:100%; height:100%; display:block; }
.radar-ring{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.45) 100%);
}

/* ============================ objective ============================ */
.objective{
  position:absolute; left:calc(var(--safe-l) + 11px); top:calc(var(--safe-t) + 84px);
  display:flex; align-items:center; gap:6px;
  padding:4px 10px 4px 4px; max-width:210px;
  background:linear-gradient(180deg,rgba(46,33,21,.9),rgba(18,12,8,.9));
  border:1.5px solid rgba(255,229,178,.18); border-radius:16px;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
  transition:opacity .3s, transform .3s;
}
.objective.done{ animation:objDone .5s ease; }
@keyframes objDone{ 40%{ transform:scale(1.09); filter:brightness(1.6);} }
.obj-skull{ width:22px; height:22px; flex:0 0 auto; }
.obj-skull svg{ width:100%; height:100%; display:block; }
.obj-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.obj-body b{ font-size:10.5px; font-weight:800; letter-spacing:.4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-shadow:0 1.5px 0 rgba(0,0,0,.7); }
.obj-track{ position:relative; height:5px; width:120px; background:rgba(10,7,4,.85);
  border-radius:3px; overflow:hidden; }
.obj-track i{ position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,#ff9d3a,#ffd76a); border-radius:3px; transition:width .25s; }

/* ============================ combo / toasts ============================ */
.combo{
  position:absolute; left:50%; top:26%; transform:translate(-50%,0) scale(.6);
  font-size:30px; font-weight:900; letter-spacing:1.5px; opacity:0;
  color:#ffdf7a; text-shadow:0 3px 0 #7a2a10, 0 0 22px rgba(255,140,40,.85);
  white-space:nowrap;
}
.combo.pop{ animation:comboPop .62s cubic-bezier(.2,1.4,.4,1); }
@keyframes comboPop{
  0%{ opacity:0; transform:translate(-50%,10px) scale(.5) rotate(-6deg); }
  25%{ opacity:1; transform:translate(-50%,-4px) scale(1.18) rotate(2deg); }
  70%{ opacity:1; transform:translate(-50%,-8px) scale(1) rotate(0); }
  100%{ opacity:0; transform:translate(-50%,-30px) scale(.95); }
}

.toasts{
  position:absolute; left:50%; top:38%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px; width:86%;
}
.toast{
  padding:5px 13px; border-radius:14px; font-size:12.5px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(180deg,rgba(52,36,22,.94),rgba(20,13,8,.94));
  border:1.5px solid rgba(255,229,178,.24);
  text-shadow:0 1.5px 0 rgba(0,0,0,.8); box-shadow:0 3px 0 rgba(0,0,0,.4);
  animation:toastIn 2.1s ease forwards; white-space:nowrap;
}
.toast.gold{ border-color:rgba(255,205,90,.6); color:#ffd76a; }
.toast.bad{ border-color:rgba(255,90,70,.55); color:#ff9a86; }
@keyframes toastIn{
  0%{ opacity:0; transform:translateY(12px) scale(.9); }
  12%{ opacity:1; transform:translateY(0) scale(1); }
  78%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-14px) scale(.96); }
}

/* ============================ floating world text ============================ */
.fx-layer{ position:absolute; inset:0; overflow:hidden; }
.fxt{
  position:absolute; left:0; top:0; font-weight:900; font-size:16px;
  letter-spacing:.5px; text-shadow:0 2px 0 rgba(0,0,0,.75); will-change:transform,opacity;
  transform:translate(-50%,-50%); white-space:nowrap;
}

/* ============================ joystick ============================ */
.joy{
  position:absolute; left:calc(var(--safe-l) + 22px); bottom:calc(var(--safe-b) + 30px);
  width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(28,20,13,.42), rgba(14,10,6,.55));
  border:2.5px solid rgba(255,244,220,.42);
  box-shadow:inset 0 0 18px rgba(0,0,0,.45), 0 3px 0 rgba(0,0,0,.28);
  pointer-events:auto; touch-action:none;
}
.joy-knob{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:radial-gradient(circle at 38% 32%, #ffffff, #d9d2c4 70%, #b3ab9c);
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 -3px 6px rgba(0,0,0,.16);
  will-change:transform;
}
.joy-arrow{
  position:absolute; width:0; height:0; opacity:.72;
  border-left:6px solid transparent; border-right:6px solid transparent;
}
.joy-arrow.up{ top:8px; left:50%; margin-left:-6px; border-bottom:9px solid #fff; }
.joy-arrow.down{ bottom:8px; left:50%; margin-left:-6px; border-top:9px solid #fff; }
.joy-arrow.left{ left:8px; top:50%; margin-top:-6px;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-right:9px solid #fff; border-left:0; }
.joy-arrow.right{ right:8px; top:50%; margin-top:-6px;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:9px solid #fff; border-right:0; }

/* ============================ action buttons ============================ */
.actions{
  position:absolute; right:calc(var(--safe-r) + 18px); bottom:calc(var(--safe-b) + 26px);
  width:120px; height:150px; pointer-events:none;
}
.abtn{
  position:absolute; border:none; padding:0; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; pointer-events:auto; touch-action:none;
  transition:transform .07s ease;
}
.abtn:active{ transform:scale(.93); }
.abtn-glyph{ position:relative; z-index:3; display:block; }
.abtn-glyph svg{ display:block; }

.abtn-rage{
  right:0; top:0; width:82px; height:82px;
  background:radial-gradient(circle at 42% 32%, #f0574a, #a5140c 62%, #63080a);
  border:4px solid #150c0a;
  box-shadow:0 4px 0 rgba(0,0,0,.5), 0 0 22px rgba(210,40,25,.55),
             inset 0 2px 0 rgba(255,255,255,.22);
}
.abtn-rage .abtn-glyph svg{ width:44px; height:44px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.abtn-rage.ready{ animation:rageReady 1.15s ease-in-out infinite; }
@keyframes rageReady{
  0%,100%{ box-shadow:0 4px 0 rgba(0,0,0,.5), 0 0 20px rgba(210,40,25,.5), inset 0 2px 0 rgba(255,255,255,.22); }
  50%{ box-shadow:0 4px 0 rgba(0,0,0,.5), 0 0 40px rgba(255,90,50,.95), inset 0 2px 0 rgba(255,255,255,.3); }
}
.abtn-rage.cooling{ filter:saturate(.25) brightness(.62); }
/* radial charge meter */
.abtn-fill{
  position:absolute; inset:-4px; border-radius:50%; z-index:1; pointer-events:none;
  background:conic-gradient(from 180deg, #ffd35e calc(var(--p,0) * 1%), rgba(0,0,0,.62) 0);
  -webkit-mask:radial-gradient(circle, transparent 0 60%, #000 61% 100%);
          mask:radial-gradient(circle, transparent 0 60%, #000 61% 100%);
}

.abtn-bite{
  right:70px; top:82px; width:62px; height:62px;
  background:radial-gradient(circle at 42% 32%, #4a4340, #211c1a 65%, #100d0c);
  border:4px solid #0d0908;
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.14);
}
.abtn-bite .abtn-glyph svg{ width:34px; height:34px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.abtn-bite.cooling{ filter:brightness(.55); }

.iconbtn{
  position:absolute; right:calc(var(--safe-r) + 11px); top:calc(var(--safe-t) + 134px);
  width:32px; height:32px; border-radius:10px; border:1.5px solid rgba(255,229,178,.2);
  background:rgba(20,14,9,.8); color:#e8dcc4; display:grid; place-items:center; cursor:pointer;
}
.iconbtn svg{ width:17px; height:17px; }

/* ============================ damage / rage vignettes ============================ */
.hurt{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(190,20,10,.82) 100%);
  transition:opacity .16s ease-out;
}
.rage-vignette{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 55%, transparent 34%, rgba(255,70,20,.5) 100%);
  transition:opacity .35s ease;
}
.rage-vignette.on{ opacity:1; animation:rageThrob 1.1s ease-in-out infinite; }
@keyframes rageThrob{ 50%{ opacity:.66; } }

/* ============================ screens ============================ */
.screen{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  padding:calc(var(--safe-t) + 16px) 18px calc(var(--safe-b) + 16px);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(90,44,16,.42), transparent 62%),
    rgba(8,6,4,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

/* loading */
.loadbox{ text-align:center; width:min(320px,84vw); }
.load-title{
  font-size:26px; font-weight:900; letter-spacing:3px; color:#ffd66e;
  text-shadow:0 3px 0 #6d2a0d, 0 0 24px rgba(255,150,50,.5); margin-bottom:16px;
}
.load-track{
  height:12px; background:#150e08; border:2px solid rgba(255,229,178,.2);
  border-radius:8px; overflow:hidden; box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.load-track i{ display:block; height:100%; width:0%;
  background:linear-gradient(180deg,#ffd85e,#e88a1c); transition:width .2s; }
.load-text{ margin-top:10px; font-size:12px; opacity:.75; letter-spacing:.6px; }

/* title */
.title-wrap{ text-align:center; width:min(360px,90vw); }
.title-kicker{
  font-size:12px; letter-spacing:6px; font-weight:800; color:#c9b58a; margin-bottom:2px;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.title-main{ margin:0 0 6px; line-height:.94; display:flex; flex-direction:column; }
.title-main span{
  font-size:44px; font-weight:900; letter-spacing:3px; color:#f6e4bd;
  text-shadow:0 4px 0 #4a2a10, 0 6px 14px rgba(0,0,0,.6);
}
.title-main .title-rage{
  font-size:52px; color:#ff7043;
  text-shadow:0 4px 0 #6d1608, 0 0 30px rgba(255,90,30,.75);
}
.title-sub{ font-size:13.5px; color:#d8c9a8; margin:0 0 22px; letter-spacing:.6px; }

.bigbtn{
  display:block; width:100%; max-width:290px; margin:0 auto; padding:15px 20px;
  font-size:18px; font-weight:900; letter-spacing:2px; color:#2a1405; cursor:pointer;
  background:linear-gradient(180deg,#ffd964,#eda01c 60%,#c9760f);
  border:3px solid #40230a; border-radius:16px;
  box-shadow:0 5px 0 #40230a, 0 8px 18px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.bigbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 #40230a, 0 3px 8px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.bigbtn.revive{ background:linear-gradient(180deg,#c78cff,#8b2fe0 60%,#5f16a8); color:#fff;
  border-color:#2d0d4e; box-shadow:0 5px 0 #2d0d4e, 0 8px 18px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
  margin-bottom:10px; text-shadow:0 2px 0 rgba(0,0,0,.5); }
.bigbtn.revive i{ font-style:normal; }
.ghostbtn{
  display:block; width:100%; max-width:290px; margin:10px auto 0; padding:11px;
  font-size:13px; font-weight:800; letter-spacing:1.4px; cursor:pointer;
  background:transparent; color:#cbbb99; border:2px solid rgba(255,229,178,.26); border-radius:13px;
}

.helpgrid{ margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.helpgrid div{
  background:rgba(255,240,210,.06); border:1.5px solid rgba(255,229,178,.14);
  border-radius:12px; padding:8px 11px; text-align:left;
}
.helpgrid b{ display:block; font-size:11px; letter-spacing:1.6px; color:#ffcf6a; margin-bottom:3px; }
.helpgrid span{ font-size:11.5px; color:#cdbfa4; line-height:1.5; }
.helpgrid em{
  font-style:normal; font-weight:800; color:#f0e0be;
  background:rgba(255,229,178,.12); border:1px solid rgba(255,229,178,.2);
  border-radius:5px; padding:0 5px; margin:0 1px; white-space:nowrap;
}

/* level up */
.lvlwrap{ text-align:center; width:min(370px,92vw); }
.lvl-burst{
  font-size:15px; font-weight:900; letter-spacing:5px; color:#ffd66e;
  text-shadow:0 2px 0 #6d2a0d, 0 0 20px rgba(255,160,50,.7);
}
.lvl-form{
  font-size:36px; font-weight:900; letter-spacing:2px; color:#fff3d6; margin:2px 0 3px;
  text-shadow:0 4px 0 #5b2c0d, 0 0 26px rgba(255,140,40,.55);
  animation:formPop .55s cubic-bezier(.2,1.5,.4,1);
}
@keyframes formPop{ 0%{ transform:scale(.5) rotate(-7deg); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.lvl-hint{ font-size:12px; letter-spacing:1.6px; color:#c4b493; margin-bottom:14px; }

.perks{ display:flex; flex-direction:column; gap:9px; }
.perk{
  display:flex; align-items:center; gap:11px; padding:11px 13px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,rgba(58,41,25,.95),rgba(24,16,10,.95));
  border:2px solid rgba(255,229,178,.22); border-radius:15px;
  box-shadow:0 4px 0 rgba(0,0,0,.45); color:#fff;
  transition:transform .1s, border-color .15s;
}
.perk:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.perk .pico{
  width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  font-size:21px; background:radial-gradient(circle at 36% 30%, #6a4a29, #2b1c10);
  border:1.5px solid rgba(255,229,178,.24);
}
.perk .ptxt b{ display:block; font-size:14.5px; letter-spacing:.7px; color:#ffd06a; margin-bottom:2px; }
.perk .ptxt span{ font-size:11.5px; color:#cfc0a4; line-height:1.35; }

/* pause */
.pausewrap{ text-align:center; width:min(320px,86vw); }
.pausewrap h2{ font-size:30px; font-weight:900; letter-spacing:5px; margin:0 0 18px; color:#f2e2be;
  text-shadow:0 3px 0 #4a2a10; }
.pauserow{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:9px;
  background:rgba(255,240,210,.06); border:1.5px solid rgba(255,229,178,.16); border-radius:13px;
  font-size:13.5px; font-weight:700; letter-spacing:.8px;
}
.toggle{
  min-width:60px; padding:6px 12px; border-radius:9px; cursor:pointer; font-weight:900; font-size:12px;
  letter-spacing:1.2px; border:2px solid #40230a; color:#2a1405;
  background:linear-gradient(180deg,#ffd964,#eda01c); box-shadow:0 3px 0 #40230a;
}
.toggle.off{ background:linear-gradient(180deg,#6b6259,#3f3931); color:#ded3c0; border-color:#211c17;
  box-shadow:0 3px 0 #211c17; }
.pausewrap .bigbtn{ margin-top:14px; }

/* game over */
.overwrap{ text-align:center; width:min(340px,90vw); }
.over-skull{ width:70px; height:70px; margin:0 auto 6px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.over-skull svg{ width:100%; height:100%; }
.overwrap h2{ font-size:27px; font-weight:900; letter-spacing:3px; margin:0 0 14px; color:#ffb098;
  text-shadow:0 3px 0 #5e1508, 0 0 22px rgba(255,80,40,.4); }
.overstats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px;
}
.overstats div{
  background:rgba(255,240,210,.06); border:1.5px solid rgba(255,229,178,.14);
  border-radius:12px; padding:9px 6px;
}
.overstats b{ display:block; font-size:19px; font-weight:900; color:#ffd06a;
  text-shadow:0 2px 0 rgba(0,0,0,.6); font-variant-numeric:tabular-nums; }
.overstats span{ font-size:10px; letter-spacing:1.2px; color:#bfb094; text-transform:uppercase; }

/* rotate note */
.rotate-note{
  position:fixed; inset:auto 0 calc(var(--safe-b) + 6px) 0; z-index:60; display:none;
  text-align:center; font-size:11px; letter-spacing:1px; color:#e2cfa6; opacity:.8;
}

/* ============================ responsive ============================ */
/* Bigger phones / tablets — scale the touch furniture up a bit */
@media (min-width:430px) and (max-aspect-ratio:3/4){
  .joy{ width:134px; height:134px; }
  .joy-knob{ width:58px; height:58px; margin:-29px 0 0 -29px; }
  .abtn-rage{ width:92px; height:92px; }
  .abtn-bite{ width:68px; height:68px; right:78px; top:92px; }
  .actions{ width:132px; height:164px; }
  .chip{ height:38px; }
  .chip-num{ font-size:16.5px; }
}

/* Landscape / desktop — spread controls to the corners, shrink the stick */
@media (min-aspect-ratio:1/1){
  .topbar{ padding-left:calc(var(--safe-l) + 16px); padding-right:calc(var(--safe-r) + 16px); }
  .chip-xp{ max-width:230px; }
  .vitals{ width:168px; }
  .radar{ width:92px; height:92px; }
  .joy{ left:calc(var(--safe-l) + 28px); bottom:calc(var(--safe-b) + 28px); opacity:.9; }
  .actions{ right:calc(var(--safe-r) + 26px); bottom:calc(var(--safe-b) + 24px); }
  .title-main span{ font-size:56px; }
  .title-main .title-rage{ font-size:66px; }
  .helpgrid{ flex-direction:row; }
  .helpgrid div{ flex:1; }
  .perks{ }
}

/* Desktop with a mouse: the on-screen stick is optional furniture */
body.has-mouse .joy{ opacity:.34; }
body.has-mouse .joy:hover{ opacity:.85; }

/* Touch devices should never show a hover-only affordance */
@media (hover:none){ body.has-mouse .joy{ opacity:.9; } }