/* ============================================================
   THE BURROW — preset 2
   Art direction: Courage the Cowardly Dog / Rugrats.
   Thick ink outlines, lumpy hand-drawn shapes, muted-saturated
   palette, nothing glossy. Deliberately shares NOTHING with
   preset 1's stylesheet.
   ============================================================ */

:root{
  --ink:#2a1c30;          /* outline black, warmed */
  --ink-soft:#5b4763;
  --paper:#f3e3cd;        /* cream */
  --paper-dim:#e2cdb2;
  --wall:#6d4a7d;         /* plum wall */
  --wall-dk:#4e3359;
  --floor:#c98b5e;        /* warm boards */
  --gum:#ff8fb8;          /* bubblegum */
  --gum-dk:#e06d99;
  --sage:#8fae86;
  --mustard:#e6b34a;
  --rust:#c8603f;
  --danger:#a84a2e;       /* rust, darkened until cream on it measures 4.53:1 */
  --sky:#7fc4d4;
  --bad:#7b6a54;          /* blight brown-grey */
  --shadow:0 3px 0 var(--ink);
}

*{box-sizing:border-box}

/* :WHY? [hidden] NEEDS !important HERE, AND IT IS NOT PARANOIA.
   The UA stylesheet's [hidden]{display:none} is USER-AGENT origin, so any
   author rule that sets display beats it. Every panel in this game (.boot
   grid, .world, .dock flex, .sheet, .scrim, .toast) sets display, which
   silently defeated the hidden attribute: el.hidden = true reported true in
   the DOM while the element stayed painted over the whole screen. The boot
   overlay sat on top of a fully working room and the game looked dead.
   Do not remove this without giving every one of those panels its own
   display:none state. */
[hidden]{display:none !important}

html,body{margin:0;padding:0}

body{
  min-height:100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #3a2745 0%, #2b1d33 60%, #221729 100%);
  color:var(--paper);
  font-family:ui-rounded,'Hiragino Maru Gothic ProN',Quicksand,Verdana,system-ui,sans-serif;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* ponytail: dock is fixed; keep the world clear of it */
  padding-bottom:78px;
  /* the room centres in whatever height is left, so a tall phone does not
     leave two thirds of the screen empty under it */
  display:flex;
  flex-direction:column;
}

/* ---------- creature + scenery motion ----------
   Lives here, not inside the room's <svg>, so the creature also breathes
   and blinks in the creature maker and the Creature panel, which are
   separate SVG documents that never saw the room's <style> block. */
.breathe{animation:bre 3.4s ease-in-out infinite}
@keyframes bre{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.035) scaleX(.985)}}
.blink{animation:bl 5.2s infinite}
@keyframes bl{0%,95.5%,100%{transform:scaleY(1)}97.5%{transform:scaleY(.08)}}
.sway{animation:sw 4.6s ease-in-out infinite;transform-origin:center bottom}
@keyframes sw{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

button{font-family:inherit;font-weight:800;cursor:pointer}

/* ---------- shared chunky button ---------- */
.btn{
  border:3px solid var(--ink);
  border-radius:14px;
  padding:11px 18px;
  font-size:15px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn-go{background:var(--gum);width:100%;margin-top:14px;font-size:17px;padding:14px}
.btn-sm{padding:7px 12px;font-size:13px;border-width:2.5px;box-shadow:0 2px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 2px 0 var(--ink);transform:none}

/* ============ BOOT / creature maker ============ */
.boot{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:18px;
  background:radial-gradient(90% 70% at 50% 30%, #4a3157 0%, #241830 70%);
  overflow-y:auto;
}
.boot-card{
  width:min(430px,100%);
  background:var(--paper);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:22px;
  box-shadow:0 6px 0 var(--ink);
  padding:20px;
  text-align:center;
}
.boot-kicker{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.boot-title{margin:4px 0 12px;font-size:26px;line-height:1.1}
.boot-stage{
  background:var(--wall);
  border:3px solid var(--ink);
  border-radius:16px;
  padding:6px;
  margin-bottom:14px;
}
.boot-stage svg{display:block;width:100%;height:auto;max-height:210px}

.knobs{display:grid;gap:10px}
.knob{text-align:left}
.knob-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{
  border:3px solid var(--ink);
  border-radius:11px;
  background:var(--paper-dim);
  padding:6px 11px;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  line-height:1;
}
.sw[aria-pressed="true"]{background:var(--gum);box-shadow:inset 0 0 0 2px var(--paper)}
.sw.dot{width:34px;height:34px;padding:0;border-radius:50%}

.namefield{display:block;text-align:left;margin-top:14px}
.namefield span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.namefield input{
  width:100%;margin-top:5px;
  border:3px solid var(--ink);border-radius:12px;
  padding:11px 13px;font:800 16px/1 inherit;color:var(--ink);
  background:#fff;
}
.namefield input:focus-visible{outline:3px solid var(--gum);outline-offset:2px}

/* ============ HUD ============ */
.hud{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:560px;margin:0 auto;padding:14px 16px 8px;
}
.hud-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.lvl{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:var(--mustard);color:var(--ink);
  border:3px solid var(--ink);border-radius:50%;
  font-size:17px;box-shadow:0 3px 0 var(--ink);
}
.xpwrap{flex:1;min-width:0}
.xpbar{
  height:13px;background:var(--wall-dk);
  border:3px solid var(--ink);border-radius:99px;overflow:hidden;
}
.xpbar i{display:block;height:100%;width:0;background:var(--sage);transition:width .45s cubic-bezier(.2,1.2,.4,1)}
.xplabel{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.06em;color:#cbb6d6}

.hud-right{display:flex;gap:8px;flex:none}
.stat{
  display:flex;align-items:center;gap:5px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-radius:12px;
  padding:5px 9px;font-size:14px;box-shadow:0 3px 0 var(--ink);
}
.stat .gumdot{width:13px;height:13px;border-radius:50%;background:var(--gum);border:2.5px solid var(--ink)}
.stat.streak{background:var(--rust);color:var(--paper)}
.stat.streak .flame{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.95}

/* ============ WORLD ============ */
.world{
  width:100%;max-width:560px;margin:0 auto;padding:0 16px;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.areaname{
  text-align:center;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#bfa6cc;margin:2px 0 8px;
}
.roomframe{
  position:relative;
  border:4px solid var(--ink);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 6px 0 var(--ink);
  background:var(--wall);
}
.roomframe svg{display:block;width:100%;height:auto}

.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float{
  position:absolute;
  font-size:15px;font-weight:900;color:var(--paper);
  text-shadow:0 2px 0 var(--ink),0 0 6px rgba(0,0,0,.5);
  animation:floatUp 1.1s ease-out forwards;
  white-space:nowrap;
}
@keyframes floatUp{
  0%{transform:translateY(0) scale(.7);opacity:0}
  25%{transform:translateY(-10px) scale(1.15);opacity:1}
  100%{transform:translateY(-52px) scale(1);opacity:0}
}

/* poof when a blight is cleared */
.poof{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--paper);
  border:2px solid var(--ink);animation:poof .55s ease-out forwards}
@keyframes poof{
  0%{transform:translate(0,0) scale(.4);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}
}

.roomframe.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  50%{transform:translate(4px,-2px)}
  75%{transform:translate(-2px,-2px)}
}

/* clickable things in the scene */
#room .hot{cursor:pointer}
#room .hot:hover{filter:brightness(1.12)}

.barklog{
  min-height:2.6em;margin:11px 4px 0;text-align:center;
  font-size:14px;line-height:1.35;color:#e7d6c0;
}
.barklog b{color:var(--gum)}

/* ============ DOCK ============ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:8px;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,#221729 40%);
}
.tab{
  position:relative;
  flex:1;max-width:150px;
  border:3px solid var(--ink);border-radius:14px;
  background:var(--paper);color:var(--ink);
  padding:11px 6px;font-size:14px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .08s ease,box-shadow .08s ease;
}
.tab:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.tab[aria-pressed="true"]{background:var(--gum)}
.pip{
  position:absolute;top:-6px;right:-6px;
  width:15px;height:15px;border-radius:50%;
  background:var(--rust);border:2.5px solid var(--ink);
}

/* ============ SHEET ============ */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(20,12,26,.6)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-height:78dvh;overflow-y:auto;
  background:var(--paper);color:var(--ink);
  border-top:4px solid var(--ink);
  border-radius:22px 22px 0 0;
  padding:20px 18px calc(26px + env(safe-area-inset-bottom));
  animation:sheetUp .22s ease-out;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:600px){
  .sheet{max-width:560px;margin:0 auto;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
}
.sheet-x{
  position:absolute;top:12px;right:14px;
  width:34px;height:34px;line-height:1;
  border:3px solid var(--ink);border-radius:50%;
  background:var(--paper-dim);color:var(--ink);font-size:20px;
}
.sheet h2{margin:0 0 3px;font-size:21px}
.sheet .sub{margin:0 0 16px;font-size:12.5px;color:var(--ink-soft);font-weight:700}

/* quest rows */
.qgroup{margin-bottom:18px}
.qhead{
  display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.qhead .chip{
  border:2.5px solid var(--ink);border-radius:8px;
  padding:2px 7px;font-size:10px;letter-spacing:.06em;color:var(--ink);
}
.chip.req{background:var(--rust);color:var(--paper)}
.chip.bon{background:var(--mustard)}

.quest{
  display:flex;align-items:center;gap:10px;
  border:3px solid var(--ink);border-radius:14px;
  background:#fff;padding:10px 11px;margin-bottom:9px;
  box-shadow:0 3px 0 var(--ink);
}
.quest.done{background:var(--paper-dim);opacity:.6}
.quest.done .qtext{text-decoration:line-through}
.qtext{flex:1;font-size:14.5px;line-height:1.3;word-break:break-word}
.qreward{font-size:11px;color:var(--ink-soft);white-space:nowrap}
.qdo{
  flex:none;width:34px;height:34px;border-radius:10px;
  border:3px solid var(--ink);background:var(--sage);
  color:var(--ink);font-size:17px;line-height:1;
}
.ghosttick{opacity:.32}
.qdel{flex:none;border:none;background:none;color:var(--ink-soft);font-size:19px;padding:0 2px}

.qadd{display:flex;gap:7px;margin-top:4px}
.qadd input{
  flex:1;min-width:0;border:3px solid var(--ink);border-radius:12px;
  padding:10px 12px;font:800 14px/1 inherit;color:var(--ink);background:#fff;
}
.qadd input:focus-visible{outline:3px solid var(--gum);outline-offset:2px}

/* shop */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.item{
  border:3px solid var(--ink);border-radius:14px;background:#fff;
  padding:10px;box-shadow:0 3px 0 var(--ink);text-align:center;
}
.item svg{display:block;width:100%;height:62px;margin-bottom:6px}
.item .iname{font-size:13px;line-height:1.25;margin-bottom:2px}
.item .icost{font-size:11.5px;color:var(--ink-soft);margin-bottom:7px}
.item.owned{background:var(--paper-dim)}
.item.locked{opacity:.55}

/* toast */
.toast{
  position:fixed;left:50%;top:64px;transform:translateX(-50%);
  z-index:70;
  background:var(--mustard);color:var(--ink);
  border:4px solid var(--ink);border-radius:16px;
  padding:12px 20px;font-size:16px;text-align:center;
  box-shadow:0 5px 0 var(--ink);
  animation:pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{0%{transform:translateX(-50%) scale(.5);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* start over — deliberately at the bottom of the me panel, behind a rule,
   so nobody's thumb finds it on the way to a hat */
.danger{
  margin-top:26px;padding-top:16px;
  border-top:3px dashed var(--ink);
  text-align:left;
}
.danger-note{
  margin:0 0 11px;font-size:12.5px;line-height:1.45;
  color:var(--ink-soft);font-weight:700;
}
.danger-note b{color:var(--ink)}
.reset{width:100%;background:var(--paper-dim);color:var(--ink)}

/* :WHY? THE ARMED STATE USES --danger, NOT --rust. Measured: cream on --rust
   is 3.21:1, and this button is 15px, which WCAG counts as normal text needing
   4.5:1. --danger is the same hue darkened until it measures 4.53:1. --rust
   stays as it is because it is used elsewhere and this is not the place to
   restyle the whole game. */
.reset.armed{background:var(--danger);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}