/* ============================================================
   CLAWD JUMP — UI layer
   Canvas draws the world; every glyph you read is DOM.
   ============================================================ */

:root{
  /* palette */
  --ink:#07060B;
  --ink-2:#0E0C16;
  --ink-3:#171426;
  --paper:#F6F1EA;
  --muted:#9A94AE;
  --muted-2:#6B6584;

  --clawd:#E8825C;
  --clawd-hi:#FFB088;
  --clawd-lo:#C1523F;
  --azure:#5BD8E0;
  --azure-hi:#A8F2F5;
  --violet:#8B7BF0;
  --gold:#F4C95D;
  --danger:#FF5C6E;

  /* type */
  --f-ui:"Outfit","Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",system-ui,sans-serif;
  --f-num:"Outfit","Noto Sans KR",ui-monospace,"SF Mono",monospace;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);

  --pad: max(1.25rem, env(safe-area-inset-left));
}

*,*::before,*::after{box-sizing:border-box}
/* class-level `display` outranks the UA [hidden] rule — make `hidden` win. */
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:var(--f-ui);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
h1,h2,h3,p{margin:0}

/* ---------- canvas stage ---------- */
#stage{position:fixed;inset:0;display:grid;place-items:center;background:#07060B}
#world{
  display:block;
  width:100%;height:100%;
  /* the renderer letterboxes internally, so the element fills the viewport */
}

/* ---------- UI shell ---------- */
#ui{position:fixed;inset:0;pointer-events:none;z-index:10;container-type:size}

.screen{
  position:absolute;inset:0;
  display:none;
  opacity:0;
  pointer-events:none;
}
.screen.is-active{display:flex;pointer-events:auto;animation:screenIn .42s var(--e-out) forwards}
.screen.is-leaving{display:flex;pointer-events:none;animation:screenOut .26s var(--e-in-out) forwards}
@keyframes screenIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes screenOut{from{opacity:1}to{opacity:0;transform:scale(.99)}}

/* HUD must never eat clicks except on its own controls */
.screen--hud{pointer-events:none !important}
.screen--hud.is-active{animation:none;opacity:1}
.screen--hud *{pointer-events:auto}
.screen--hud .hud__top,.screen--hud .hud__toast,.screen--hud .hud__banner,.screen--hud .hud__dash{pointer-events:none}

/* ============================================================
   BOOT
   ============================================================ */
.screen--boot{
  flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:radial-gradient(120% 90% at 50% 40%,#15121F 0%,#07060B 70%);
}
.boot__glyph{width:104px;height:104px;filter:drop-shadow(0 8px 30px rgba(232,130,92,.35))}
.boot__ring{transform-origin:60px 60px;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot__label{
  font-weight:900;letter-spacing:.42em;font-size:.78rem;
  color:var(--muted);text-indent:.42em;
}
.boot__bar{width:min(240px,54vw);height:3px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--clawd),var(--gold));
  transition:width .3s var(--e-out)}
.boot__hint{font-size:.75rem;color:var(--muted-2);letter-spacing:.05em;min-height:1.2em}

/* ============================================================
   TITLE
   ============================================================ */
.screen--title{
  flex-direction:column;justify-content:center;
  padding:clamp(1.5rem,5vh,4rem) var(--pad);
  gap:clamp(1.2rem,4vh,2.6rem);
  background:linear-gradient(105deg,rgba(7,6,11,.94) 0%,rgba(7,6,11,.72) 42%,rgba(7,6,11,.12) 78%);
}
.title__brand{max-width:52rem}
.title__kicker{
  font-size:.7rem;font-weight:700;letter-spacing:.36em;color:var(--clawd);
  margin-bottom:.7rem;
  animation:fadeUp .7s .05s var(--e-out) both;
}
.title__logo{
  display:flex;flex-direction:column;line-height:.86;
  font-weight:900;letter-spacing:-.045em;
  font-size:clamp(3.4rem,11.5vw,9rem);
}
.title__logo span{
  color:var(--paper);
  animation:fadeUp .8s .1s var(--e-out) both;
}
.title__logo em{
  font-style:normal;
  background:linear-gradient(96deg,var(--clawd-hi),var(--clawd) 34%,var(--gold) 68%,var(--clawd-hi));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fadeUp .8s .18s var(--e-out) both, shimmer 7s 1s linear infinite;
}
@keyframes shimmer{to{background-position:220% 0}}
.title__sub{
  margin-top:1rem;font-size:clamp(.72rem,1.6vw,.95rem);font-weight:600;
  letter-spacing:.5em;color:var(--muted);
  animation:fadeUp .8s .26s var(--e-out) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.title__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.76rem;color:var(--muted-2);
  animation:fadeUp .8s .5s var(--e-out) both;
}
.title__foot .sep{opacity:.5}
.kbd{
  display:inline-block;padding:.16rem .44rem;border-radius:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-size:.7rem;font-weight:600;color:#CFC9DC;
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}

/* ---------- menu ---------- */
.menu{display:flex;flex-direction:column;gap:.15rem;max-width:24rem}
.menu__item{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.72rem .9rem .72rem 1.1rem;
  border-radius:11px;
  font-size:1.06rem;font-weight:600;letter-spacing:-.01em;
  color:#CEC8DC;
  transition:color .18s, background .18s, transform .28s var(--e-out);
  animation:fadeUp .6s var(--e-out) both;
}
.menu__item:nth-child(1){animation-delay:.30s}
.menu__item:nth-child(2){animation-delay:.36s}
.menu__item:nth-child(3){animation-delay:.42s}
.menu__item:nth-child(4){animation-delay:.48s}
.menu__item:nth-child(5){animation-delay:.54s}
.menu__item small{font-size:.72rem;font-weight:400;color:var(--muted-2);letter-spacing:0}
.menu__item::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:99px;background:var(--clawd);
  transition:height .3s var(--e-back);
}
.menu__item:hover,.menu__item:focus-visible,.menu__item.is-cursor{
  outline:none;color:#fff;background:rgba(255,255,255,.055);transform:translateX(6px);
}
.menu__item:hover::before,.menu__item:focus-visible::before,.menu__item.is-cursor::before{height:60%}
.menu__item:hover small,.menu__item.is-cursor small{color:#A9A2C0}
.menu__item[disabled]{opacity:.32;cursor:not-allowed;transform:none}
.menu--compact .menu__item{padding:.55rem .8rem .55rem 1rem;font-size:.95rem;animation:none}

/* ============================================================
   LEVEL SELECT
   ============================================================ */
.screen--select{
  flex-direction:column;gap:1rem;
  padding:clamp(1.2rem,4vh,2.4rem) var(--pad);
  background:linear-gradient(180deg,rgba(7,6,11,.96),rgba(7,6,11,.82));
  overflow:hidden;
}
.sel__head{display:flex;align-items:center;gap:1rem}
.sel__head h2{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;letter-spacing:-.02em}
.sel__head p{font-size:.78rem;color:var(--muted-2);margin-top:.15rem}
.icon-btn{
  width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:50%;text-align:center;
  display:grid;place-items:center;font-size:1.5rem;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .18s, transform .18s var(--e-back);
}
.icon-btn:hover,.icon-btn:focus-visible{background:rgba(255,255,255,.14);transform:scale(1.07);outline:none}

.sel__biomes{display:flex;flex-direction:column;gap:1.15rem;overflow-y:auto;padding-bottom:1rem;scrollbar-width:thin}
.biome__name{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.45rem;
  font-size:.74rem;font-weight:700;letter-spacing:.26em;
}
.biome__name b{font-size:1.02rem;letter-spacing:-.01em;font-weight:800}
.biome__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:.8rem;max-width:58rem}

.card{
  position:relative;text-align:left;
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:var(--ink-2);
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out), border-color .25s;
  isolation:isolate;
}
.card canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9;transition:opacity .35s,transform 4s var(--e-out)}
.card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,4,9,.95) 0%,rgba(5,4,9,.45) 46%,rgba(5,4,9,0) 78%);
}
.card:hover,.card:focus-visible,.card.is-cursor{
  outline:none;transform:translateY(-5px);border-color:rgba(255,255,255,.24);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.9);
}
.card:hover canvas,.card.is-cursor canvas{opacity:1;transform:scale(1.05)}
.card__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:.85rem .9rem}
.card__idx{font-size:.66rem;font-weight:700;letter-spacing:.22em;color:var(--clawd)}
.card__title{font-size:1rem;font-weight:700;margin:.15rem 0 .35rem}
.card__meta{display:flex;gap:.55rem;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.card__stars{position:absolute;z-index:2;top:.7rem;right:.75rem;display:flex;gap:.18rem}
.star{width:.7rem;height:.7rem;opacity:.22}
.star.on{opacity:1;filter:drop-shadow(0 0 6px rgba(244,201,93,.8))}
.card__lock{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:rgba(5,4,9,.74);backdrop-filter:blur(3px) saturate(.4);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;color:#8C85A6;
}
.card__lock svg{width:1.5rem;height:1.5rem;opacity:.75}
.card[disabled]{cursor:not-allowed}

/* ============================================================
   HUD
   ============================================================ */
.screen--hud{padding:calc(.85rem + env(safe-area-inset-top)) var(--pad) 0}
.hud__top{position:absolute;left:var(--pad);right:var(--pad);top:calc(.85rem + env(safe-area-inset-top));
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.hud__left{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.hud__right{display:flex;flex-direction:column;gap:.2rem;align-items:flex-end}

.hud__hearts{display:flex;gap:.24rem}
.heart{
  width:1rem;height:1rem;
  background:var(--clawd);
  clip-path:path("M8 14.5S1 10.2 1 5.7A4.2 4.2 0 0 1 8 3a4.2 4.2 0 0 1 7 2.7c0 4.5-7 8.8-7 8.8z");
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition:opacity .2s, transform .3s var(--e-back), background .2s;
}
.heart.off{background:#3A3450;opacity:.7;transform:scale(.82)}
.heart.pulse{animation:heartPulse .5s var(--e-back)}
@keyframes heartPulse{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

.hud__chip{
  display:flex;align-items:center;gap:.35rem;
  padding:.22rem .55rem .22rem .4rem;border-radius:99px;
  background:rgba(10,8,18,.5);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.hud__chip em{font-style:normal;font-weight:500;font-size:.7rem;color:var(--muted)}
.hud__chip i{width:.62rem;height:.62rem;border-radius:2px;rotate:45deg;display:block}
.hud__chip--shard i{background:var(--azure);box-shadow:0 0 9px var(--azure)}
.hud__chip--relic i{background:var(--gold);box-shadow:0 0 9px var(--gold);border-radius:50%;rotate:0deg}
.hud__chip.bump{animation:chipBump .34s var(--e-back)}
@keyframes chipBump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

.hud__timer{font-family:var(--f-num);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hud__level{font-size:.66rem;font-weight:700;letter-spacing:.2em;color:var(--muted)}

.hud__dash{
  position:absolute;left:var(--pad);bottom:calc(1rem + env(safe-area-inset-bottom));
  width:5.2rem;height:3px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;
  opacity:0;transition:opacity .25s;
}
.hud__dash.show{opacity:1}
.hud__dash i{display:block;height:100%;width:100%;border-radius:99px;background:var(--azure);
  box-shadow:0 0 10px var(--azure);transform-origin:left;transition:none}

.hud__toast{
  position:absolute;left:50%;top:22%;translate:-50% 0;
  font-size:1rem;font-weight:700;letter-spacing:.02em;text-align:center;
  opacity:0;
}
.hud__toast.show{animation:toast 1.6s var(--e-out) forwards}
@keyframes toast{
  0%{opacity:0;transform:translateY(10px) scale(.94)}
  14%{opacity:1;transform:none}
  76%{opacity:1}
  100%{opacity:0;transform:translateY(-8px)}
}
.hud__banner{
  position:absolute;left:0;right:0;top:38%;text-align:center;
  font-size:clamp(1.6rem,5vw,3rem);font-weight:900;letter-spacing:-.03em;
  opacity:0;
}
.hud__banner.show{animation:banner 2.1s var(--e-out) forwards}
@keyframes banner{
  0%{opacity:0;letter-spacing:.3em;filter:blur(10px)}
  18%{opacity:1;letter-spacing:-.03em;filter:blur(0)}
  70%{opacity:1}
  100%{opacity:0;filter:blur(6px)}
}
.hud__pause{
  position:absolute;right:var(--pad);bottom:calc(1rem + env(safe-area-inset-bottom));text-align:center;
  width:2.3rem;height:2.3rem;border-radius:50%;font-size:.6rem;letter-spacing:.1em;
  display:grid;place-items:center;color:#D8D2E4;
  background:rgba(10,8,18,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  transition:color .2s,background .2s,transform .2s var(--e-back);
}
.hud__pause:hover{color:#fff;background:rgba(255,255,255,.16);transform:scale(1.08)}

/* touch controls */
.hud__touch{position:absolute;inset:auto 0 0 0;height:42%;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 var(--pad) calc(1.1rem + env(safe-area-inset-bottom))}
.tpad{position:relative;width:7.5rem;height:7.5rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12)}
.tpad i{position:absolute;left:50%;top:50%;translate:-50% -50%;width:2.9rem;height:2.9rem;border-radius:50%;
  background:rgba(232,130,92,.55);border:1px solid rgba(255,255,255,.25)}
.tbtns{display:flex;gap:.7rem;align-items:flex-end}
.tbtn{width:4.4rem;height:4.4rem;border-radius:50%;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.tbtn--jump{width:5.4rem;height:5.4rem;background:rgba(232,130,92,.24);border-color:rgba(232,130,92,.5)}
.tbtn--dash{background:rgba(91,216,224,.18);border-color:rgba(91,216,224,.45)}
.tbtn:active{transform:scale(.93);filter:brightness(1.4)}

/* ============================================================
   MODALS
   ============================================================ */
.screen--modal{align-items:center;justify-content:center;padding:var(--pad);
  background:rgba(5,4,9,.72);backdrop-filter:blur(14px) saturate(.85)}
.modal{
  width:min(26rem,100%);max-height:88vh;overflow-y:auto;
  padding:1.5rem 1.5rem 1.1rem;border-radius:20px;
  background:linear-gradient(170deg,rgba(30,26,46,.96),rgba(14,12,22,.97));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  animation:modalIn .4s var(--e-out) both;
  scrollbar-width:thin;
}
.modal--wide{width:min(34rem,100%)}
.modal--text{font-size:.86rem;line-height:1.7;color:#BDB7CE}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.9rem}
.modal__stats{display:flex;gap:1.2rem;margin-bottom:1rem;font-size:.78rem;color:var(--muted)}
.modal__stats b{display:block;font-size:1.1rem;color:var(--paper);font-variant-numeric:tabular-nums}

/* results */
.res__rank{
  float:right;margin:-.3rem 0 .3rem .8rem;
  width:3.6rem;height:3.6rem;border-radius:18px;display:grid;place-items:center;
  font-size:2rem;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(150deg,var(--clawd-hi),var(--clawd-lo));
  color:#1A0E0A;box-shadow:0 12px 30px -10px rgba(232,130,92,.7);
  animation:rankIn .6s .1s var(--e-back) both;
}
.res__rank[data-rank="S"]{background:linear-gradient(150deg,#FFE9A8,var(--gold));box-shadow:0 12px 34px -8px rgba(244,201,93,.8)}
.res__rank[data-rank="A"]{background:linear-gradient(150deg,var(--azure-hi),var(--azure));box-shadow:0 12px 30px -10px rgba(91,216,224,.7);color:#08262A}
.res__rank[data-rank="C"],.res__rank[data-rank="B"]{background:linear-gradient(150deg,#CFC9DC,#8B85A3);color:#15121F;box-shadow:none}
@keyframes rankIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
.res__rows{display:flex;flex-direction:column;gap:.05rem;margin:.4rem 0 1rem;clear:both}
.res__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.42rem .1rem;border-bottom:1px solid rgba(255,255,255,.055);font-size:.86rem}
.res__row span{color:var(--muted)}
.res__row b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600}
.res__row.best b{color:var(--gold)}
.res__stars{display:flex;gap:.5rem;margin-bottom:1rem}
.res__stars .star{width:1.4rem;height:1.4rem}
.res__stars .star.on{animation:starPop .5s var(--e-back) both}
.res__stars .star:nth-child(2).on{animation-delay:.12s}
.res__stars .star:nth-child(3).on{animation-delay:.24s}
@keyframes starPop{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}

/* settings */
.tabs{display:flex;gap:.2rem;margin-bottom:1rem;padding:.2rem;border-radius:11px;background:rgba(0,0,0,.3)}
.tab{flex:1;padding:.45rem .3rem;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--muted);text-align:center;
  transition:background .2s,color .2s}
.tab.is-active{background:rgba(255,255,255,.1);color:#fff}
.pane{display:none;flex-direction:column;gap:.15rem;margin-bottom:1rem}
.pane.is-active{display:flex}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .1rem;
  border-bottom:1px solid rgba(255,255,255,.05)}
.row__label{font-size:.86rem;font-weight:500}
.row__label small{display:block;font-size:.68rem;color:var(--muted-2);font-weight:400;margin-top:.1rem}
.row__ctl{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
.switch{width:2.6rem;height:1.4rem;border-radius:99px;background:#332E48;position:relative;transition:background .22s}
.switch::after{content:"";position:absolute;top:.17rem;left:.17rem;width:1.06rem;height:1.06rem;border-radius:50%;
  background:#fff;transition:transform .24s var(--e-back)}
.switch[aria-checked="true"]{background:var(--clawd)}
.switch[aria-checked="true"]::after{transform:translateX(1.2rem)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:7.5rem;height:3px;border-radius:99px;
  background:rgba(255,255,255,.16);outline:none
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:.95rem;height:.95rem;border-radius:50%;
  background:var(--clawd);box-shadow:0 0 0 4px rgba(232,130,92,.18);cursor:pointer;transition:transform .18s var(--e-back)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
input[type=range]::-moz-range-thumb{width:.95rem;height:.95rem;border:0;border-radius:50%;background:var(--clawd);cursor:pointer}
.row__val{font-family:var(--f-num);font-size:.76rem;color:var(--muted);width:2.6rem;text-align:right;
  font-variant-numeric:tabular-nums}
.seg{display:flex;gap:.15rem;padding:.15rem;border-radius:9px;background:rgba(0,0,0,.32)}
.seg button{padding:.28rem .58rem;border-radius:6px;font-size:.74rem;font-weight:600;color:var(--muted);text-align:center}
.seg button.on{background:rgba(255,255,255,.12);color:#fff}
.bindbtn{min-width:5.4rem;padding:.3rem .55rem;border-radius:8px;font-size:.74rem;font-weight:600;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-family:var(--f-num)}
.bindbtn.listening{background:var(--clawd);color:#1A0E0A;animation:pulse 1s infinite}
.bindbtn--clash{background:rgba(255,92,110,.25);border-color:rgba(255,92,110,.6);color:#FFB3BC}
@keyframes pulse{50%{opacity:.6}}

.credits h3{font-size:.7rem;letter-spacing:.22em;color:var(--clawd);margin:1.1rem 0 .35rem;font-weight:700}
.credits h3:first-child{margin-top:0}
.credits ul{margin:0;padding-left:1.1rem}
.credits li{margin:.16rem 0}
.credits code{font-family:var(--f-num);font-size:.82em;color:var(--azure-hi);background:rgba(91,216,224,.09);
  padding:.05rem .3rem;border-radius:4px}

.err__msg{
  margin:.2rem 0 1rem;padding:.6rem .7rem;border-radius:9px;
  background:rgba(255,92,110,.09);border:1px solid rgba(255,92,110,.28);
  font-family:var(--f-num);font-size:.74rem;line-height:1.5;color:#FFB3BC;
  word-break:break-word;max-height:8rem;overflow-y:auto;
}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* nag */
.nag{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(5,4,9,.94);
  pointer-events:auto;font-size:1rem;font-weight:600;text-align:center;padding:2rem}

/* ============================================================
   RESPONSIVE / MOTION
   ============================================================ */
@media (max-width:640px){
  .title__foot{display:none}
  .menu__item small{display:none}
  .hud__timer{font-size:1.15rem}
  .biome__cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@container (max-height:420px){
  .screen--title{gap:.7rem}
  .title__sub{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}