/* Bark Raiders — dusk-in-the-ruins palette: concrete dust, moss, loot amber, portal cyan */
:root {
  --ink: #0e110f;
  --panel: rgba(18, 22, 19, 0.92);
  --panel-2: #1d231e;
  --line: #3a4236;
  --sand: #ece2c8;
  --dust: #a39a83;
  --moss: #86a95c;
  --amber: #ffb43d;
  --portal: #4fd6ff;
  --danger: #ff5f4a;
  --display: "Saira Stencil One", "Impact", "Arial Narrow", sans-serif;
  --ui: "Chakra Petch", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--sand);
  font: 15px/1.45 var(--ui);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
[hidden] { display: none !important; }
button { touch-action: manipulation; }

#game, #game3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.screen {
  position: fixed; inset: 0;
  overflow-y: auto;
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  touch-action: pan-y;
}
.screen.dim { background: rgba(8, 10, 9, 0.72); display: grid; place-items: center; }

/* Title */
#title { display: grid; align-items: center; background: linear-gradient(90deg, rgba(8,10,9,.9) 0%, rgba(8,10,9,.55) 55%, rgba(8,10,9,0) 100%); }
.title-card { max-width: 560px; display: grid; gap: 14px; justify-items: start; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); font-weight: 600; }
.logo {
  margin: 0; font: 400 clamp(64px, 14vw, 128px)/.86 var(--display);
  text-transform: uppercase; color: var(--sand);
  text-shadow: 0 0 40px rgba(255, 180, 61, .25), 4px 4px 0 #000;
}
.tagline { margin: 0; font-size: 20px; font-weight: 700; color: var(--amber); letter-spacing: .02em; }
.lede { margin: 0; color: var(--dust); max-width: 42ch; }
/* Subgrid, so the step names' column fits the longest one in any language */
.flow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 26px minmax(92px, auto) 1fr; gap: 8px; counter-reset: step; }
.flow li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; counter-increment: step; color: var(--dust); font-size: 14px; }
.flow li::before { content: counter(step); font: 18px var(--display); color: var(--portal); }
.flow b { color: var(--sand); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 13px; color: var(--dust); }
.keys div { display: flex; gap: 6px; align-items: center; }
.keys dt { font-weight: 700; color: var(--sand); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; background: var(--panel-2); }
.keys dd { margin: 0; }
.keys--touch dt { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 11px; }
.keys--touch .ico { width: 20px; height: 20px; }
.lang { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--dust); }
.lang select { font: 600 13px var(--ui); color: var(--sand); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; cursor: pointer; }
.lang select:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
/* Save slots: a card each, the one in play lit in amber */
.slots { display: grid; gap: 8px; justify-items: start; width: 100%; }
.slot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.slot {
  display: grid; gap: 2px; align-content: start; text-align: left; min-width: 0; padding: 8px 10px; cursor: pointer;
  font: 13px var(--ui); color: var(--dust); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px;
}
.slot:hover { border-color: var(--dust); }
.slot:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.slot[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.slot b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.slot[aria-pressed="true"] b { color: var(--amber); }
.slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .who { color: var(--sand); font-weight: 700; }
.slot .mode { color: var(--moss); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.title-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* Buttons */
.btn {
  font: 700 15px var(--ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand); background: var(--panel-2); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 4px; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn:hover { border-color: var(--dust); }
.btn:focus-visible, .tb:focus-visible, .card:focus-visible, .zone:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.btn.primary { background: var(--amber); color: #1b1408; border-color: var(--amber); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Den */
#den { background: rgba(10, 12, 11, .86); padding-bottom: 96px; }
.den-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto 14px; }
.den-bar h2 { margin: 0; font: 40px/1 var(--display); text-transform: uppercase; flex: 1; }
.purse { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--amber); font-variant-numeric: tabular-nums; }
.bone-ico {
  width: 22px; height: 10px; background: var(--amber); border-radius: 4px; position: relative; display: inline-block;
}
.bone-ico::before, .bone-ico::after {
  content: ""; position: absolute; top: -3px; width: 8px; height: 16px; border-radius: 4px;
  background: radial-gradient(circle at 50% 25%, var(--amber) 3.6px, transparent 4px), radial-gradient(circle at 50% 75%, var(--amber) 3.6px, transparent 4px);
}
.bone-ico::before { left: -4px; }
.bone-ico::after { right: -4px; }
.den-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 1200px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.panel h3 { margin: 4px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.cards { display: grid; gap: 8px; }
.card {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px;
  color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.card.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.card.locked { opacity: .78; }
.card canvas { width: 48px; height: 48px; }
.card .nm { font-weight: 700; }
.card .sub { font-size: 12px; color: var(--dust); }
.card .perk { font-size: 12px; color: var(--sand); }
.card .tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); white-space: nowrap; }
.card.sel .tag { color: var(--amber); }
.rows { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; }
.row .nm { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.row .sub { font-size: 12px; color: var(--dust); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 8px; height: 8px; border: 1px solid var(--dust); transform: rotate(45deg); display: inline-block; }
.pips i.on { background: var(--amber); border-color: var(--amber); }
.pips i.next { border-color: var(--portal); animation: mc-blink 1s ease-in-out infinite; }
/* The vest or upgrade the machine is set to */
.row.on, .card.on { border-color: var(--portal); }
/* A recipe under a vest or upgrade: each material, with how many there are of how many it takes (red if
   short), then the bones */
.recipe { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; font-size: 12px; color: var(--sand); }
.recipe span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.recipe .ico { width: 15px; height: 15px; color: var(--c); }
.recipe b { font-variant-numeric: tabular-nums; }
.recipe span:last-child { color: var(--amber); }
.recipe .short b { color: var(--danger); }

/* The Make-o-Matic, the machine the dog's human left (ui.js): a hopper on top that materials are dragged into,
   the body with its blueprint screen, cogs, bone slot and lever, and the chute the gear drops out of. The
   hopper lights up (.over) while a material's dragged over it; .run shakes the machine and spins its cogs. */
.machine { position: relative; display: grid; justify-items: center; scroll-margin-top: 64px; }
.mc-hopper {
  width: 94%; min-height: 84px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px;
  padding: 12px 19% 16px; clip-path: polygon(0 0, 100% 0, 81% 100%, 19% 100%);
  background: repeating-linear-gradient(transparent 0 11px, rgba(0, 0, 0, .14) 11px 12px), linear-gradient(#59644f, #2e352b 70%, #1c211b);
  border-top: 4px solid #7a8670; transition: background .15s;
}
.mc-hopper.over { background: linear-gradient(#8a7438, #4a3e1e 70%, #2a2412); border-top-color: var(--amber); }
.mc-slot {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--c) 70%, transparent); border-radius: 5px; background: rgba(0, 0, 0, .4); color: var(--c);
}
.mc-slot .ico { width: 26px; height: 26px; opacity: .3; }
.mc-slot b {
  position: absolute; right: -7px; bottom: -6px; min-width: 22px; height: 15px; padding: 0 3px; border-radius: 8px;
  border: 1px solid var(--c); background: var(--ink); color: var(--sand); font: 700 10px/13px var(--ui); text-align: center;
}
.mc-slot.part, .mc-slot.fill { border-style: solid; background: color-mix(in srgb, var(--c) 18%, rgba(0, 0, 0, .4)); }
.mc-slot.part .ico { opacity: .7; }
.mc-slot.fill .ico { opacity: 1; }
.mc-slot.fill b { background: var(--c); color: var(--ink); }
.mc-slot:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.machine.run .mc-slot .ico { animation: mc-drop .5s ease-in forwards; }
.mc-body {
  position: relative; width: 100%; display: grid; gap: 8px; padding: 12px 14px 10px; border: 2px solid #59644f; border-radius: 8px;
  background:
    radial-gradient(circle at 8px 8px, #9aa38c 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 8px) 8px, #9aa38c 2px, transparent 2.6px),
    radial-gradient(circle at 8px calc(100% - 8px), #9aa38c 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #9aa38c 2px, transparent 2.6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(#3d4539, #252a23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45);
}
.machine.run .mc-body { animation: mc-shake .11s linear infinite; }
/* The plate between its lamps: the hopper's lamp is amber as it fills and green once it's full; the bones'
   is green with enough and red without. Both flash while it runs. */
.mc-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.mc-lamp {
  width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1px solid #151a14;
  background: radial-gradient(circle at 35% 35%, #4a5246, #20251f); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .5);
}
.mc-lamp.part { background: radial-gradient(circle at 35% 35%, #ffe0a0, var(--amber) 60%, #8a5a10); box-shadow: 0 0 8px var(--amber); animation: mc-lamp 1.2s ease-in-out infinite; }
.mc-lamp.on { background: radial-gradient(circle at 35% 35%, #e4ffc0, #7fdc4a 60%, #2f6a1a); box-shadow: 0 0 8px #7fdc4a; }
.mc-lamp.no { background: radial-gradient(circle at 35% 35%, #ffc0b0, var(--danger) 60%, #8a2a1e); box-shadow: 0 0 8px var(--danger); }
.machine.run .mc-lamp { animation: mc-lamp .18s steps(2) infinite; }
/* Vents out of each side, puffing steam while it runs */
.mc-vent {
  position: absolute; top: 42%; width: 9px; height: 22px; border: 1px solid #151a14;
  background: linear-gradient(#6e767c, #c0c6ca 40%, #4a5054);
}
.mc-vent.l { left: -10px; border-radius: 4px 0 0 4px; }
.mc-vent.r { right: -10px; border-radius: 0 4px 4px 0; }
.mc-vent::before, .mc-vent::after {
  content: ""; position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(236, 226, 200, .75), rgba(236, 226, 200, 0) 70%); pointer-events: none;
}
.mc-vent.l::before, .mc-vent.l::after { right: 4px; --dx: -26px; }
.mc-vent.r::before, .mc-vent.r::after { left: 4px; --dx: 26px; }
.machine.run .mc-vent::before { animation: mc-steam .6s ease-out infinite; }
.machine.run .mc-vent::after { animation: mc-steam .6s ease-out .3s infinite; }
.mc-plate {
  justify-self: center; padding: 2px 12px 0; border-radius: 3px; background: #c9a24a; color: #2a1e0a;
  font: 20px/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .15);
}
/* The screen: a blueprint's grid behind scanlines, and a bar along its foot while the machine runs (--run,
   which ui.js sets to how long that is) */
.mc-screen {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 2px; min-height: 46px; padding: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(79, 214, 255, .07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(rgba(79, 214, 255, .07) 0 1px, transparent 1px 12px),
    radial-gradient(ellipse at center, #0f2230, #071017);
  border: 2px solid #151c15; border-radius: 4px; box-shadow: inset 0 0 14px rgba(79, 214, 255, .18), 0 1px 0 rgba(255, 255, 255, .08);
}
.mc-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px);
}
.mc-screen::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--portal); box-shadow: 0 0 8px var(--portal);
}
.machine.run .mc-screen::before { animation: mc-progress var(--run, 1.4s) linear forwards; }
.mc-nav { display: grid; place-items: center; height: 34px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--portal); cursor: pointer; }
.mc-nav .ico { width: 18px; height: 18px; }
.mc-nav:disabled { opacity: .2; cursor: default; }
.mc-nav:focus-visible { outline: 2px solid var(--portal); outline-offset: -2px; }
.mc-plan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-width: 0; text-align: center;
  color: var(--portal); font-weight: 700; font-size: 14px; line-height: 1.2; text-shadow: 0 0 6px rgba(79, 214, 255, .5);
}
.mc-plan .ico { width: 20px; height: 20px; flex: none; }
.mc-plan .pips i { border-color: rgba(79, 214, 255, .6); }
.mc-plan .pips i.on { background: var(--portal); border-color: var(--portal); }
.mc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mc-gears { width: 56px; height: 40px; }
.mc-gears path { fill: #7a8670; fill-rule: evenodd; transform-box: fill-box; transform-origin: center; }
.mc-gears .g2 { fill: #a8916a; }
.machine.ready .mc-gears .g1 { animation: mc-spin 6s linear infinite; }
.machine.ready .mc-gears .g2 { animation: mc-spin 4.5s linear infinite reverse; }
.machine.run .mc-gears .g1 { animation: mc-spin .7s linear infinite; }
.machine.run .mc-gears .g2 { animation: mc-spin .55s linear infinite reverse; }
/* The gauge, beside the bones it costs. Its needle swings across the dial as the hopper fills (--f, 0 to 1),
   and judders at the top while it runs. */
.mc-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; min-width: 0; }
.mc-gauge { width: 60px; height: 40px; flex: none; }
.mc-gauge .face { fill: #d9ceb0; stroke: #59644f; stroke-width: 1.5; }
.mc-gauge .arc, .mc-gauge .ticks path { fill: none; stroke: #2a2f28; stroke-width: 1; }
.mc-gauge .red { fill: none; stroke: var(--danger); stroke-width: 2.5; }
.mc-gauge .needle {
  fill: #b8321f; transform-box: view-box; transform-origin: 30px 34px;
  transform: rotate(calc(-90deg + var(--f, 0) * 180deg)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.mc-gauge .hub { fill: #3d4539; stroke: #151a14; stroke-width: 1; }
.machine.run .mc-gauge .needle { animation: mc-needle .12s linear infinite alternate; }
.mc-cost {
  justify-self: center; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px;
  background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(255, 180, 61, .25);
  color: var(--amber); font: 700 18px var(--ui); font-variant-numeric: tabular-nums;
}
.mc-cost:empty { visibility: hidden; }
.mc-cost.short { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 95, 74, .35); }
.mc-cost .bone, .recipe .bone { width: 14px; height: 7px; fill: currentColor; transform: rotate(-30deg); }
/* The lever: a handle leaning back on its pivot, which swings forward while the machine runs */
.mc-lever { position: relative; width: 44px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; }
.mc-lever::before {
  content: ""; position: absolute; left: 11px; bottom: 0; width: 22px; height: 12px;
  border: 1px solid #59644f; border-radius: 5px 5px 2px 2px; background: #1c211b;
}
.mc-lever i {
  position: absolute; left: 19px; bottom: 6px; width: 6px; height: 42px; border-radius: 3px; transform-origin: 50% 39px;
  background: linear-gradient(90deg, #6e767c, #d0d6da, #6e767c); transform: rotate(-28deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.mc-lever i::after {
  content: ""; position: absolute; left: -6px; top: -12px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffb3a0, var(--danger) 55%, #8a2a1e);
}
.mc-lever.ready i { animation: mc-nudge 1.4s ease-in-out infinite; }
.mc-lever.ready i::after { box-shadow: 0 0 10px 2px rgba(255, 95, 74, .6); }
.machine.run .mc-lever i { transform: rotate(32deg); animation: none; }
.mc-lever:disabled { cursor: default; opacity: .5; }
.mc-lever:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; border-radius: 4px; }
.mc-say { margin: 0; min-height: 1.45em; text-align: center; font-size: 12px; color: var(--dust); }
.mc-say.ok { color: var(--moss); font-weight: 700; }
.mc-say.no { color: var(--danger); }
.mc-note { margin-top: 6px; text-align: center; }
/* Hazard stripes along the body's foot, over the chute */
.mc-stripe {
  display: block; height: 8px; margin: 0 -14px -10px; border-radius: 0 0 6px 6px; opacity: .85;
  background: repeating-linear-gradient(-45deg, #c9a24a 0 7px, #1c1a14 7px 14px);
}
.mc-chute {
  width: 64%; min-height: 70px; display: grid; place-items: center; padding: 10px 8px 8px; border-radius: 0 0 6px 6px;
  background: linear-gradient(#0b0d0b, #1d231c 40%, #2a3027); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  transition: box-shadow .3s;
}
.machine.run .mc-chute { box-shadow: inset 0 14px 18px -6px rgba(255, 180, 61, .45); }
.mc-spark { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 6px currentColor; z-index: 1; }
.mc-item {
  display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--amber); border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 14%, var(--panel-2)); color: var(--sand); font: inherit; text-align: left; cursor: pointer;
}
.mc-item .ico { width: 28px; height: 28px; flex: none; color: var(--amber); }
.mc-item b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mc-item small { display: block; font-size: 11px; color: var(--dust); }
.mc-item.pop { animation: mc-pop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mc-drop { to { transform: translateY(34px) scale(.3); opacity: 0; } }
@keyframes mc-shake { 25% { transform: translate(1px, -1px) rotate(.3deg); } 75% { transform: translate(-1px, 1px) rotate(-.3deg); } }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-nudge { 50% { transform: rotate(-18deg); } }
@keyframes mc-pop { from { transform: translateY(-46px) scale(.5); opacity: 0; } }
@keyframes mc-blink { 50% { background: rgba(79, 214, 255, .6); } }
@keyframes mc-lamp { 50% { filter: brightness(.55); } }
@keyframes mc-steam { from { transform: translate(0, 0) scale(.4); opacity: .9; } to { transform: translate(var(--dx), -18px) scale(1.6); opacity: 0; } }
@keyframes mc-progress { to { width: 100%; } }
@keyframes mc-needle { from { transform: rotate(80deg); } to { transform: rotate(88deg); } }
/* The stash, under the machine: a chip per material with how many are left to drag in. Those the blueprint
   still wants are ringed; with none left, a chip fades. touch-action keeps a drag from scrolling the den. */
.stash { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.mat {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 6px 3px 5px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--sand); font: inherit;
  cursor: grab; touch-action: none;
}
.mat canvas { width: 36px; height: 36px; }
.mat .nm { font-size: 10px; line-height: 1.15; text-align: center; color: var(--c); overflow-wrap: anywhere; }
.mat b { position: absolute; top: 3px; right: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mat.want { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.mat.none { opacity: .38; cursor: pointer; }
.mat:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.mat-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; pointer-events: none;
  border: 1.5px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, var(--ink)); color: var(--c);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
}
.mat-ghost .ico { width: 30px; height: 30px; }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
/* Long one-word names (Krankenhaushügel) break with a hyphen, in the page's language, rather than run out
   of the button; anything still too long breaks anywhere */
.zone {
  font: 600 12px/1.2 var(--ui); color: var(--sand); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 6px; cursor: pointer; text-align: left; min-height: 46px;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
}
.zone b { display: block; font: 16px var(--display); color: var(--dust); }
.zone.sel { border-color: var(--portal); box-shadow: inset 0 0 0 1px var(--portal); }
.zone.sel b { color: var(--portal); }
.zone:disabled { opacity: .35; cursor: not-allowed; }
/* A wild zone's threat and twist (wildTag), along the foot of its button: the pips moss, then amber, then red
   as it climbs, and the twist in portal blue */
.zone:has(.wild-tag) { display: flex; flex-direction: column; }
.wild-tag { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 5px; }
.wild-tag .ico { width: 15px; height: 15px; color: var(--portal); }
.threat { --c: var(--moss); }
.threat[data-n="3"] { --c: var(--amber); }
.threat[data-n="4"], .threat[data-n="5"] { --c: var(--danger); }
.threat i { width: 6px; height: 6px; }
.threat i.on { background: var(--c); border-color: var(--c); }
/* The Training Ground, above the zones: a whole row, marked out in moss */
.train {
  display: grid; gap: 2px; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  font: 12px/1.35 var(--ui); color: var(--dust); background: var(--panel-2); border: 1px dashed var(--moss); border-radius: 4px;
}
.train-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.train b { font: 16px var(--display); text-transform: uppercase; color: var(--moss); }
.train:hover { border-style: solid; }
.train.sel { border-style: solid; box-shadow: inset 0 0 0 1px var(--moss); }
.train:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.train-tag {
  padding: 2px 7px; border-radius: 3px; background: var(--amber); color: #1b1408;
  font: 700 10px/1.3 var(--ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase;
}
.zone-info { font-size: 13px; color: var(--dust); background: var(--panel-2); border-left: 2px solid var(--portal); padding: 8px 10px; }
.zone-info b { color: var(--sand); }
.hoard { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.hoard .it { font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; display: flex; justify-content: space-between; gap: 6px; }
.hoard .it { align-items: center; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hoard .it canvas { width: 32px; height: 32px; flex: none; }
.hoard .it .nm { flex: 1; }
.hoard .it.none { opacity: .35; }
/* Not found yet: just its shape */
.hoard .it.none canvas { filter: brightness(0); }
.hoard .ct { font-variant-numeric: tabular-nums; color: var(--dust); }
/* The shelf over the Collection tab: a tile for the hoard and each collection, with how far it's got. One
   whose find is out today has a dot (.out), a complete one a tick (.done). On a narrow screen it scrolls
   sideways, as the page under it swipes. */
.shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 6px;
  overflow-x: auto; touch-action: pan-x; scrollbar-width: none; padding: 6px 2px 2px; margin: -6px -2px 0;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf-tile {
  position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 10px 8px 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; color: var(--dust); font: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.shelf-tile .ico { width: 26px; height: 26px; }
.shelf-tile .nm { max-width: 100%; font: 700 11px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-tile .ct { font-size: 11px; font-variant-numeric: tabular-nums; }
.shelf-tile .fold-bar { width: 80%; height: 4px; }
.shelf-tile:hover { color: var(--sand); }
.shelf-tile[aria-selected="true"] { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--panel-2)); }
.shelf-tile:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.shelf-tile.out::after, .shelf-tile.done::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--ink), 0 0 8px var(--amber); animation: shelf-ping 1.6s ease-in-out infinite;
}
.shelf-tile.done::after { content: "✓"; width: 16px; height: 16px; font: 700 11px/16px var(--ui); text-align: center; color: var(--ink); background: var(--moss); box-shadow: 0 0 0 2px var(--ink); animation: none; }
.shelf-tile.done .fold-bar i { background: var(--moss); }
@keyframes shelf-ping { 50% { transform: scale(.7); opacity: .6; } }
.shelf-body { min-height: 240px; touch-action: pan-y; }
.shelf-body section { display: grid; gap: 10px; align-content: start; }
/* A collection's head: a ring round its icon filling as it's found, then what today's find is up to */
.coll-head { display: flex; align-items: center; gap: 12px; }
.coll-head h3 { margin: 0 0 2px; }
.coll-ring {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; color: var(--amber);
  background: radial-gradient(closest-side, var(--panel-2) 80%, transparent 82%), conic-gradient(var(--amber) calc(var(--f) * 360deg), rgba(255, 255, 255, .08) 0);
}
.coll-ring .ico { width: 24px; height: 24px; }
.coll-note { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--dust); background: var(--panel-2); border-left: 2px solid var(--line); border-radius: 0 4px 4px 0; }
.coll-note.out { color: var(--sand); border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--panel-2)); }
.coll-note.today, .coll-note.done { border-left-color: var(--moss); }
.coll-note.done { color: var(--moss); font-weight: 700; }
/* The collections: each a fold per maker, its summary a progress bar after the fold's arrow (::before, which
   takes a column of its own), green once it's all found. Found items show their face; the rest are dashed
   rings in their grade's colour (--c). */
.folds details.full .fold-bar i { background: var(--moss); }
.folds details.full summary b { color: var(--moss); }
.folds { display: grid; gap: 6px; }
.folds details { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; }
.folds summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(40px, 120px) auto; gap: 10px; align-items: center;
  padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none;
}
.folds summary::-webkit-details-marker { display: none; }
.folds summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--dust); }
.folds details[open] summary::before { content: "▾"; }
.folds summary b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folds summary span { font-variant-numeric: tabular-nums; color: var(--dust); font-weight: 400; }
.fold-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fold-bar i { display: block; height: 100%; background: var(--amber); }
.fold-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; padding: 2px 10px 10px; }
.fk { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1.5px var(--c); }
.fk canvas { display: block; width: 100%; height: 100%; }
.fk.none { box-shadow: none; border: 1.5px dashed var(--c); opacity: .4; }
.fk:focus-visible { outline: 2px solid var(--portal); outline-offset: 2px; }
.stats { margin: 0; font-size: 12px; color: var(--dust); }
.den-foot {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: rgba(10, 12, 11, .96); border-top: 1px solid var(--line);
}
.loadout-sum { flex: 1; min-width: 0; font-size: 13px; color: var(--dust); }
.loadout-sum b { color: var(--sand); }
.den-foot .btn.primary { font-size: 18px; padding: 12px 34px; }

/* Results / pause */
.result-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; max-width: 460px; width: 100%; display: grid; gap: 10px; }
.result-card h2 { margin: 0; font: 46px/1 var(--display); text-transform: uppercase; }
.result-card h2.win { color: var(--portal); }
.result-card h2.lose { color: var(--danger); }
.res-sub { margin: 0; color: var(--dust); }
.res-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
.res-items li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 4px 8px; background: var(--panel-2); border-radius: 3px; }
.res-items li.lost { text-decoration: line-through; opacity: .6; }
.res-items .v { font-variant-numeric: tabular-nums; color: var(--dust); }
.res-total { margin: 0; font-weight: 700; font-size: 18px; color: var(--amber); font-variant-numeric: tabular-nums; }
.res-cta { margin: 4px 0 0; font-size: 13px; color: var(--dust); }
.res-cta a { color: var(--portal); font-weight: 600; }
.fine { margin: 0; font-size: 12px; color: var(--dust); }
/* The new save's mode dialog: a button apiece, its name over what it means */
.mode-pick { display: grid; gap: 8px; margin: 0; }
.mode-pick .btn { display: grid; gap: 4px; text-align: left; }
.mode-pick .btn span { font: 400 13px/1.4 var(--ui); letter-spacing: 0; text-transform: none; color: var(--dust); }

/* What's new, and the Training Ground's question and Deploy's loadout (.ask): a modal <dialog> holding a
   .result-card. No display on the dialog itself, or it shows while closed. */
.news, .ask { width: 460px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); padding: 0; border: 0; background: none; color: inherit; overscroll-behavior: contain; touch-action: pan-y; }
.news::backdrop, .ask::backdrop { background: rgba(8, 10, 9, .72); }
.news-list { display: grid; max-height: 50vh; overflow-y: auto; touch-action: pan-y; }
/* Each release is a <details>, opened and closed by its heading (version, then date) with a chevron at the
   right. A rule between releases, and a row tall enough to tap. */
.news-list details + details { border-top: 1px solid var(--line); }
.news-list summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px 9px 0; cursor: pointer; list-style: none; border-radius: 3px; }
.news-list summary::-webkit-details-marker { display: none; }
.news-list summary::after { content: ''; flex: none; width: 6px; height: 6px; border: solid var(--dust); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.news-list details[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.news-list summary:focus-visible { outline: 2px solid var(--portal); outline-offset: -2px; }
.news-list h3 { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.news-list h3 span { color: var(--dust); }
.news-list summary:hover h3 span { color: var(--sand); }
.news-list ul { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--dust); }
.news-list li + li { margin-top: 6px; }
.news-list li::marker { color: var(--amber); }
.news-list b { color: var(--sand); }
/* While more news lies below, the list fades out at the bottom and an arrow bounces at its right; tapping it
   scrolls on. Clear of the scrollbar. */
.news-wrap { position: relative; }
.news-list.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
.news-more { position: absolute; right: 16px; bottom: 4px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--amber); border-radius: 50%; background: var(--ink); color: var(--amber); cursor: pointer; animation: news-bounce 1.1s ease-in-out infinite; }
.news-more .ico { width: 20px; height: 20px; }
@keyframes news-bounce { 50% { transform: translateY(5px); } }

/* Deploy's loadout (an .ask): the leader turning in a strip across the top, big enough to make out its gear,
   and dragged round sideways (a page can still scroll up and down over it); then its name and gear, its
   upgrades as chips, and the Sixth Sense switch, lit portal blue while it's on */
.lo-art {
  width: 100%; aspect-ratio: 416 / 190; display: block; border-radius: 8px; border: 1px solid var(--line); cursor: grab; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--amber) 30%, var(--panel-2)), #0b0d0c 72%);
}
.lo-art:active { cursor: grabbing; }
@media (max-height: 600px) { .lo-art { height: 130px; } }
.lo-dog { display: grid; gap: 3px; min-width: 0; }
.lo-plate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.loadout h2 { font-size: 38px; color: var(--amber); }
.loadout h3 { margin: 4px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.lo-sub { font-size: 13px; color: var(--dust); }
.lo-ups { display: flex; flex-wrap: wrap; gap: 6px; }
/* Gear to take or leave: what's taken is lit, what's left at home is struck through */
.lo-ups > * { display: flex; gap: 7px; align-items: center; font: inherit; font-size: 13px; color: var(--sand); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.lo-ups button { cursor: pointer; }
.lo-ups [aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.lo-ups [aria-pressed="false"] { color: var(--dust); border-style: dashed; text-decoration: line-through; }
.lo-ups [aria-pressed="false"] .pips { opacity: .5; }
.lo-ups .none { color: var(--dust); border-style: dashed; }
.lo-ups i.sw { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.lo-sense {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
}
.lo-sense:has(input:checked) { border-color: var(--portal); box-shadow: inset 0 0 0 1px var(--portal); }
.lo-sense:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* On and not to be turned off: before the Training Ground, where it's always free */
.lo-sense:has(input:checked:disabled) { opacity: 1; cursor: default; }
.lo-sense input { width: 20px; height: 20px; margin: 0; accent-color: var(--portal); }
.lo-sense span { display: grid; }
.lo-sense small { font-size: 12px; color: var(--dust); }
/* How many Sixth Senses the leader has, in the den's upgrade list */
.stock { font-size: 12px; color: var(--portal); font-variant-numeric: tabular-nums; }

/* The den's trading card: a modal <dialog>, framed in --accent (amber, or the item's rarity) */
.tcard-dlg { width: 340px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); padding: 0; border: 0; background: none; color: inherit; overscroll-behavior: contain; }
.tcard-dlg::backdrop { background: rgba(8, 10, 9, .78); }
.tcard {
  --accent: var(--amber);
  position: relative; display: grid; gap: 10px; padding: 12px; border-radius: 14px;
  border: 3px solid var(--accent); background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 50px rgba(0, 0, 0, .55);
}
.tcard-x { position: absolute; top: 18px; right: 18px; z-index: 1; background: rgba(8, 10, 9, .55); }
.tcard-art {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 30%, var(--panel-2)), #0b0d0c 78%);
}
/* Dragged round sideways, as Deploy's is */
.tcard-art canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.tcard-art canvas:active { cursor: grabbing; }
.tcard-badge {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 3px; background: var(--accent); color: #1b1408;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tcard-badge:empty { display: none; }
.tcard-plate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tcard-plate h2 { margin: 0; font: 30px/1 var(--display); text-transform: uppercase; color: var(--accent); }
.tcard-plate span { font-size: 13px; color: var(--dust); }
.tcard-perk { font-size: 13px; color: var(--sand); display: grid; gap: 4px; }
.tcard-perk:empty { display: none; }
.tcard-stats { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 12px; }
.tcard-stats dt { color: var(--dust); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.tcard-stats dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; color: var(--sand); }
.tcard-stats .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tcard-stats .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tcard-go { width: 100%; font-size: 16px; padding: 11px; }
/* A buy waiting on its second tap */
.btn.arm { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 0; bottom: 0; width: 50%; height: 60%; pointer-events: auto; }
#stick-base, #stick-knob { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
#stick-base { width: 110px; height: 110px; border: 2px solid rgba(236, 226, 200, .35); background: rgba(0, 0, 0, .2); }
#stick-knob { width: 50px; height: 50px; background: rgba(236, 226, 200, .5); }
#stick.on #stick-base, #stick.on #stick-knob { opacity: 1; }
.tb {
  position: relative; display: grid; place-items: center; padding: 0;
  font: 700 12px var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--sand);
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(236, 226, 200, .4); background: rgba(14, 17, 15, .55);
  touch-action: none;
}
/* .ico is shared with the title's touch legend */
.ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: currentColor; stroke: none; }

/* Action ring, 2 × RING.outer (input.js) across. Each .rb is a point at its centre, which ui.js gives
   --x/--y (the icon's spot) and --kx/--ky (the key's, on the outer edge); the parts sit centred on those. */
#ring {
  position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 160px; height: 160px; touch-action: none; cursor: pointer;
}
.rb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; color: var(--sand); pointer-events: none; }
.rb > * { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.rb > .seg { left: -80px; top: -80px; width: 160px; height: 160px; transform: none; overflow: visible; }
.rb .ico { width: 24px; height: 24px; }
.seg .shape { fill: rgba(14, 17, 15, .55); stroke: rgba(236, 226, 200, .4); stroke-width: 2; }
.rb[data-act="dig"] .shape { fill: rgba(255, 180, 61, .3); stroke: var(--amber); }
.rb.on .shape { fill: rgba(255, 180, 61, .55); }
/* Meter over the outer edge, clockwise; ui.js sets the dash length */
.seg .meter { fill: none; stroke: var(--sand); stroke-width: 4; stroke-dasharray: 0 1; }
.rb[data-act="pack"] .meter { stroke: var(--amber); }
.rb.full .meter, .rb.low .meter { stroke: var(--danger); }
.rb.wait .ico { opacity: .4; }
.rb.off { opacity: .45; }
/* Dig's wedge turns into Bite with a cat in reach */
/* Important, as the coach and the tutorial show every caption */
.rb:not(.bite) > .alt, .rb.bite > .ico:not(.alt), .rb.bite > .cap:not(.alt) { display: none !important; }
.rb.bite > .ico.alt { display: block; }
.rb.bite .shape { fill: rgba(255, 95, 74, .3); stroke: var(--danger); }
.rb.bite.on .shape { fill: rgba(255, 95, 74, .55); }
.rb .badge {
  left: calc(var(--x) + 12px); top: calc(var(--y) - 12px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--amber); color: #1b1408; font: 700 12px/20px var(--ui); font-variant-numeric: tabular-nums;
}
.rb .pill {
  top: calc(var(--y) + 20px);
  display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 9px;
  background: var(--ink); border: 1px solid var(--amber); color: var(--amber);
  font: 700 11px/1 var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rb .bone, .pack-panel .bone { width: 12px; height: 6px; fill: currentColor; transform: rotate(-30deg); }
.rb kbd {
  display: none; left: var(--kx); top: var(--ky); min-width: 18px; height: 16px; padding: 0 4px; border-radius: 3px;
  background: var(--ink); border: 1px solid rgba(236, 226, 200, .55); box-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  font: 700 10px/14px var(--ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap;
}
.rb.on kbd { background: var(--amber); border-color: var(--amber); color: #1b1408; }
#ring.keys kbd { display: block; }
/* Pack editor: docked left so the dog stays in view, since the raid keeps running underneath */
.pack-panel {
  position: fixed; top: 64px; left: max(14px, env(safe-area-inset-left, 0px));
  width: min(340px, calc(100% - 28px)); max-height: calc(100% - 160px);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px;
  touch-action: pan-y;
}
.pack-head { display: flex; align-items: center; gap: 10px; }
.pack-head h2 { margin: 0; flex: 1; font: 28px/1 var(--display); text-transform: uppercase; }
.btn.ico-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.btn.ico-btn .ico { width: 18px; height: 18px; }
/* Slot strip: a cell per slot (--cap); an item's block spans its weight (--w), ticked between its slots */
.pack-strip { --g: 3px; display: grid; grid-template-columns: repeat(var(--cap), minmax(0, 1fr)); gap: var(--g); height: 36px; margin-top: 4px; }
.pack-strip.tight { --g: 2px; }
.pack-strip i { border: 1px dashed var(--line); border-radius: 3px; background: rgba(0, 0, 0, .35); }
.pack-strip b {
  --tick: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent) 1px, transparent 0);
  grid-column: span var(--w); display: grid; place-items: center; min-width: 0;
  color: var(--c); border: 1px solid var(--c); border-radius: 3px;
  background: var(--tick) calc(var(--g) / -2 - .5px) 3px / calc((100% + var(--g)) / var(--w)) 5px repeat-x,
    var(--tick) calc(var(--g) / -2 - .5px) calc(100% - 3px) / calc((100% + var(--g)) / var(--w)) 5px repeat-x,
    color-mix(in srgb, var(--c) 20%, transparent);
  background-origin: border-box; cursor: pointer;
  transition: opacity .12s;
}
.pack-strip .ico { width: 20px; height: 20px; max-width: calc(100% - 4px); }
.pack-strip b.worst { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pack-strip.dim b:not(.hl) { opacity: .4; }
.pack-strip b.hl { color: var(--sand); border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); background-color: color-mix(in srgb, var(--c) 34%, transparent); }
.pack-panel.full .pack-strip { outline: 1.5px solid var(--danger); outline-offset: 3px; border-radius: 3px; }
.pack-load { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
#pack-weight { color: var(--dust); }
#pack-weight b { color: var(--sand); }
#pack-risk { display: flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 700; }
.pack-panel.full #pack-weight, .pack-panel.full #pack-weight b { color: var(--danger); }
.pack-items { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; }
/* Rows echo the strip: rarity-tinted icon tile, then a pip per slot */
.pack-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 10px; padding: 6px; transition: border-color .12s; }
.pack-row.hl { border-color: var(--sand); background: #252c25; }
.pack-row .nm { display: block; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-row .sub { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pack-row.hl .btn { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.pack-tile {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.pack-tile .ico { width: 24px; height: 24px; }
.pack-tile b {
  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 15px; padding: 0 4px; border-radius: 8px;
  border: 1px solid var(--c); background: var(--ink); font: 700 10px/13px var(--ui); text-align: center;
}
.pack-slots, .pack-slots span { display: inline-flex; gap: 2px; }
.pack-slots { gap: 5px; }
.pack-slots i { width: 8px; height: 8px; border-radius: 1.5px; background: var(--dust); }
.pack-row.hl .pack-slots i { background: var(--sand); }
.pack-worst {
  padding: 0 6px; border: 1px solid var(--danger); border-radius: 7px; background: rgba(255, 95, 74, .15);
  color: var(--danger); font-size: 10px; font-weight: 700; line-height: 13px;
}
.pack-v { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.pack-v b { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.pack-v small { font-size: 10px; color: var(--dust); }
.pack-v .bone { color: var(--dust); }
/* A material's tag where loot shows its bones, and how many are in the stash at home */
.pack-mat b { gap: 4px; font-size: 12px; }
.pack-mat .ico { width: 14px; height: 14px; color: var(--moss); }
/* Kibble's value lines up with the rows' (drop button + gap to the right of it) */
.pack-kibble { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 7px 0; border-top: 1px dashed var(--line); font-size: 13px; color: var(--dust); }
.pack-kibble > .ico { justify-self: center; width: 20px; height: 20px; color: #c08850; }
.pack-kibble b { color: var(--sand); }
.pack-kibble .pack-v { margin-right: 42px; }
/* The day's collection finds, in their grade's colour. Their wrapper steps aside, so each is spaced as kibble is */
#pack-finds { display: contents; }
.pack-find > .ico, .pack-find b { color: var(--c); }
@media (pointer: coarse) { .pack-panel { max-height: max(200px, calc(100% - 264px)); } }

/* Top left, with the timer drawn beside it (drawHud) */
#tpause { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px)); width: 40px; height: 40px; pointer-events: auto; }

/* Touch walkthrough: dims the frozen raid under the controls, which show captions and ignore taps while it's up */
#coach { position: fixed; inset: 0; background: rgba(8, 10, 9, .72); cursor: pointer; }
.coach-move {
  position: absolute; left: 0; bottom: 0; width: 50%; height: 60%; /* the #stick area */
  display: grid; place-content: center; justify-items: center; gap: 12px;
  border: 2px dashed rgba(79, 214, 255, .35); border-width: 2px 2px 0 0; background: rgba(79, 214, 255, .06);
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.coach-move small { margin-top: -6px; font-size: 11px; font-weight: 600; color: var(--dust); }
.coach-stick { position: relative; width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(236, 226, 200, .5); background: rgba(0, 0, 0, .2); }
.coach-stick i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(236, 226, 200, .6); animation: coach-stick 2.4s ease-in-out infinite; }
@keyframes coach-stick { 25% { transform: translate(22px, -14px); } 50% { transform: none; } 75% { transform: translate(-20px, 12px); } }
/* Below the HUD's top row */
.coach-go {
  position: absolute; left: 50%; top: calc(128px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  width: min(320px, calc(100% - 32px)); margin: 0; text-align: center; color: var(--dust); font-size: 14px;
}
.coach-go b { display: block; margin-bottom: 4px; font: 34px/1 var(--display); text-transform: uppercase; color: var(--amber); }
.cap {
  display: none; position: absolute; z-index: 1;
  padding: 2px 6px; border-radius: 3px; background: var(--amber); color: #1b1408;
  font: 700 11px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap;
}
.tb .cap { left: 50%; bottom: -9px; transform: translateX(-50%); }
.rb .cap { top: calc(var(--y) + 14px); }
.cap small { display: block; font-size: 9px; font-weight: 600; text-transform: lowercase; }
#coach:not([hidden]) ~ #touch *, #coach:not([hidden]) ~ #ring { pointer-events: none; }
#coach:not([hidden]) ~ #ring .rb { opacity: 1; }
#coach:not([hidden]) ~ :is(#touch, #ring) .cap { display: block; }
#coach:not([hidden]) ~ #ring .pill { visibility: hidden; }

/* Training Ground tutorial: a card over the running raid, which training.js places clear of the HUD
   (left, top, width). It turns moss for a moment when a step's done. */
.tut {
  position: fixed; display: grid; gap: 6px; padding: 10px 12px 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: border-color .2s;
}
.tut-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-step { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tut-end { padding: 2px 0; border: 0; background: none; font: 600 11px var(--ui); color: var(--dust); text-decoration: underline; cursor: pointer; }
.tut-end:hover { color: var(--sand); }
.tut-text { margin: 0; font-size: 14px; line-height: 1.45; }
.tut-text b { color: var(--sand); }
.tut-text kbd, .tut-ico {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0 2px; padding: 0 5px; vertical-align: -5px;
  border: 1px solid rgba(236, 226, 200, .55); border-radius: 4px; background: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  font: 700 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sand);
}
.tut-ico { width: 26px; height: 26px; padding: 0; border-radius: 50%; vertical-align: -8px; }
.tut-ico .ico { width: 18px; height: 18px; }
.tut-foot { display: flex; align-items: center; gap: 12px; }
.tut-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tut-track i { display: block; height: 100%; background: var(--amber); transition: width .3s; }
.tut.done { border-left-color: var(--moss); }
.tut.done .tut-step { color: var(--moss); }
/* In the middle of the #stick area */
.tut-stick { position: fixed; left: 25%; bottom: 30%; transform: translate(-50%, 50%); pointer-events: none; }
/* The step's ring button pulses, captioned as in the touch walkthrough; on touch, so does pause */
.rb.tut-lit .shape { stroke: var(--amber); animation: tut-pulse 1s ease-in-out infinite; }
.rb.tut-lit .cap { display: block; }
.tb.tut-lit { border-color: var(--amber); animation: tut-pulse 1s ease-in-out infinite; }
@keyframes tut-pulse { 50% { fill: rgba(255, 180, 61, .45); box-shadow: 0 0 0 4px rgba(255, 180, 61, .35); } }

/* Den tabs: one panel shows at a time, picked from a bar that stays at the top */
.den-tabs {
  display: flex; gap: 4px; position: sticky; top: 0; z-index: 2; max-width: 1200px; margin: 0 auto 10px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.den-tabs button {
  flex: 1; min-width: 0; padding: 9px 4px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: 700 12px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dust);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.den-tabs button:hover { color: var(--sand); }
.den-tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }
.den-tabs button:focus-visible { outline: 2px solid var(--portal); outline-offset: -2px; }
.den-grid > .panel:not(.on) { display: none; }
/* The Gear tab: the machine and its stash, then the gear it builds, side by side when there's room. With the
   whole width to themselves, the dogs and vests spread across it too. */
.panel.gear > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (min-width: 900px) {
  .den-tabs button { padding: 11px 4px; font-size: 13px; }
  .panel.gear { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; }
  #dog-list, #vest-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (max-width: 520px) {
  .flow li { grid-template-columns: 22px 1fr; }
  .flow li span { grid-column: 2; }
  .den-bar h2 { font-size: 32px; }
}
/* The dog's face on the HUD: face.css styles it, drawHud places it */
#face { position: fixed; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .coach-stick i, .rb.tut-lit .shape, .tb.tut-lit, .news-more, .pips i.next, .mc-lever.ready i, .machine.run .mc-body,
  .shelf-tile.out::after, .mc-lamp, .machine.run .mc-lamp, .machine .mc-gears path, .machine.run .mc-vent::before, .machine.run .mc-vent::after { animation: none; }
}