/* MHFU game font (falls back to sans-serif for glyphs it lacks) */
@font-face{
  font-family:'MHFU';
  src:url('fonts/mhfu_font.ttf') format('truetype');
  font-display:swap;
}

/* Theme variables set at runtime from the chosen colour (see app.js). */
:root{
  --bg:#3e3e3e; --bg1:#000; --grid-bg:#141018; --content-bg:#0e0d11; --panel-bg:#141418;
  --bg2:#333; --nav-bg:#2b2b2b; --accent:#7a7a7a; --accent-hover:#9a9a9a;
  /* Toolbar controls — set per theme in app.js, at a pinned darkness so --text
     reads on them everywhere. These are the pre-theme defaults. */
  --control-bg:#141414; --control-bg-hover:#181818; --control-active:#0e0e0e;
  --text:#f3f3f3; --text-dim:#fff; --line:#ffffff1f;
  --positive:#7fdc7f; --negative:#f07070;
}

*{box-sizing:border-box;scrollbar-color:var(--accent) var(--bg2);scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}

html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:'MHFU',"Segoe UI",system-ui,sans-serif;font-size:14px;color:var(--text);
  background:var(--bg);-webkit-user-select:none;user-select:none;
}
input,select,button,textarea{font-family:inherit}
#app{display:flex;flex-direction:column;height:100vh}
.hidden{display:none !important}
kbd{
  background:#ffffff1a;border:1px solid var(--line);border-radius:3px;
  padding:0 4px;font-size:.85em;font-family:inherit
}

/* ── Title bar ───────────────────────────────────────────────────────── */
.titlebar{display:flex;align-items:center;gap:8px;padding:8px 14px;flex-shrink:0}
.titlebar-header{
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 90%,transparent),color-mix(in srgb,var(--accent) 90%,transparent)),
    url('assets/titlebar-background.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
}
.title-icon{width:30px;height:30px;object-fit:contain}
.titlebar h1{font-size:15px;font-weight:600;margin:0}
.progress-pill{
  background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:10px;padding:5px 12px;font-size:13px;white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.progress-pill.first{margin-left:auto}
.dirty-dot{color:#ffd24a;font-size:11px;vertical-align:middle}
.icon-btn{
  background:transparent;border:none;color:var(--text);font-size:18px;cursor:pointer;
  padding:6px 9px;border-radius:6px;line-height:1
}
.icon-btn:hover{background:#ffffff1a}

.btn{
  background:#ffffff14;color:var(--text);border:1px solid var(--line);border-radius:7px;
  padding:8px 14px;cursor:pointer;font-size:14px
}
.btn:hover{background:#ffffff24}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{background:#6a2020;border-color:#8a3030}
.btn.danger:hover{background:#833030}
/* Save / Save As… / Open. Same --control-bg as the toolbar buttons, not --bg2:
   --bg2 is the lightest value in the scheme, so these came out lighter than the
   titlebar they sit on. */
.btn.tiny{
  padding:5px 10px;font-size:12px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--control-bg) 88%,transparent),color-mix(in srgb,var(--control-bg) 88%,transparent)),
    url('assets/banner-background.png');
  background-position:right
}
.btn.tiny:hover{
  background-image:
    linear-gradient(color-mix(in srgb,var(--control-bg-hover) 88%,transparent),color-mix(in srgb,var(--control-bg-hover) 88%,transparent)),
    url('assets/banner-background.png')
}

.nav-btn{
  font-size:11px;line-height:16px;padding:3px 10px;background:var(--control-bg);
  border:1px solid var(--line);border-radius:4px;color:var(--text);cursor:pointer
}
.nav-btn:not(:disabled):hover{background:var(--control-bg-hover)}
.nav-btn:disabled{opacity:.4;cursor:default}
.mini-select{
  background:var(--control-bg);color:var(--text);border:1px solid var(--line);border-radius:4px;
  padding:3px 6px;font-size:11px
}
.page-indicator{font-variant-numeric:tabular-nums;min-width:96px;text-align:center}
.nav-label{font-size:11px;opacity:.7}

/* ── Layout ──────────────────────────────────────────────────────────── */
.farm-layout{
  display:flex;flex:1;min-height:0;overflow:hidden;
  background-color:var(--content-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--content-bg) 84%,transparent),color-mix(in srgb,var(--content-bg) 84%,transparent)),
    url('assets/rockyTextureDark.png');
  background-repeat:repeat;background-size:auto,200px 200px;
}
.farm-col{display:flex;flex-direction:column;min-height:0;min-width:0}
/* The side columns overflow their height by design and scroll. Without this, flex
   compresses each child to make them fit instead — which squashed the pot's status
   line to two lines and let its text spill over the slots below it. Let the children
   keep their natural height and let the column scroll. */
.arena-col > *,.pot-col > *{flex-shrink:0}

/* The monster and your ore ride at the top of the column while the smithy scrolls
   under them. Same deal as the talisman dock: its own opaque background, because a
   transparent sticky element would let the shop rows show through, and a height cap
   with its own scroll so a tall arena can't bury the shop on a short window. */
.arena-dock{
  position:sticky;top:0;z-index:5;
  max-height:64%;overflow-y:auto;
  background-color:var(--panel-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--panel-bg) 90%,transparent),color-mix(in srgb,var(--panel-bg) 90%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
  box-shadow:0 8px 12px -8px rgba(0,0,0,.75)
}
/* Wider than the pot column: the arena stats spell out their units ("10,000 dmg/click"),
   and at 300px the longest of them wrapped onto a second line from the very first hunt. */
.arena-col{flex:0 0 340px;border-right:1px solid var(--line);overflow-y:auto}
.pot-col{flex:0 0 300px;border-left:1px solid var(--line);overflow-y:auto}
.arena-col,.pot-col{
  background-color:var(--panel-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--panel-bg) 90%,transparent),color-mix(in srgb,var(--panel-bg) 90%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
}
.box-col{flex:1 1 auto}
.panel-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;
  padding:12px 14px 6px;flex-shrink:0
}

/* ── Arena ───────────────────────────────────────────────────────────── */
.arena{padding:6px 12px 14px;text-align:center;position:relative}
.arena-name{font-size:15px;font-weight:700;line-height:1.25;margin:0 0 2px;min-height:38px;
  display:flex;align-items:center;justify-content:center}
.arena-rank{font-size:11px;opacity:.6;margin-bottom:8px}
/* The monster is a button so it's keyboard-reachable and gets a real focus ring;
   the sprite inside carries the variant tint. */
.arena-target{
  position:relative;width:100%;aspect-ratio:1;max-width:210px;margin:0 auto;
  border:1px solid var(--line);border-radius:12px;background:#0c0e12;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  transition:transform .06s,filter .12s
}
.arena-target:hover{filter:brightness(1.12)}
/* A paused monster reads as switched off rather than merely idle — the arena line
   says so too, but the tile is what you are looking at. */
.arena-target.paused{filter:grayscale(.85) brightness(.6);cursor:default}
.arena-target.paused:hover{filter:grayscale(.85) brightness(.6)}
.icon-btn.paused{color:#ffd24a}
.arena-target:active{transform:scale(.97)}
/* A Palico or a hired hunter landing a blow should move the tile the same way your own
   click does — :active only fires for a real pointer press, so their attacks left the
   monster perfectly still while damage poured into it. An animation rather than a class
   toggle, because at thirty attacks a second the hits overlap and a toggle would just
   pin the tile at the pressed size. Restarted per hit by removing and re-adding. */
.arena-target.struck{animation:tilepunch .09s ease-out}
@keyframes tilepunch{
  0%{transform:scale(1)}
  45%{transform:scale(.97)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .arena-target.struck{animation:none}
}
.arena-target img{
  width:82%;height:82%;object-fit:contain;pointer-events:none;
  transition:filter .2s
}
/* The game shows no health bar and no damage figures, so a blow reads as a mark where
   it landed and nothing else — pale yellow for an ordinary hit, pink for a critical.
   Drawn over the sprite rather than filtering it: the sprite's own `filter` carries
   that variant's tint, and a second filter would replace it rather than compose. */
.slash{
  position:absolute;pointer-events:none;z-index:4;
  width:58%;height:4px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#fff3b0 20%,#fffbe6 50%,#fff3b0 80%,transparent);
  box-shadow:0 0 8px rgba(255,240,160,.8);
  animation:slashcut .26s ease-out forwards
}
.slash.crit{
  height:6px;
  background:linear-gradient(90deg,transparent,#ff5ab4 18%,#ffd9ec 50%,#ff5ab4 82%,transparent);
  box-shadow:0 0 12px rgba(255,90,180,.95);
  animation-duration:.34s
}
/* The Palico's contribution — a claw swipe rather than a weapon stroke, so it reads as
   someone else helping rather than as one of your own blows. Three small white marks
   in parallel: the element itself is the middle claw and the two pseudo-elements are
   the outer pair, offset perpendicular to the stroke. They sit inside the parent's
   rotation, so the group stays parallel at whatever angle the swipe landed, and inside
   its transform, so they sweep out together on the same animation.
   The outer two are shorter, because a claw mark that's a perfect rectangle of three
   equal lines reads as a barcode. */
.slash.palico{
  width:26%;height:2px;
  background:linear-gradient(90deg,transparent,#ffffff 22%,#ffffff 78%,transparent);
  box-shadow:0 0 5px rgba(255,255,255,.7);
  animation-duration:.22s
}
.slash.palico::before,.slash.palico::after{
  content:"";position:absolute;left:12%;right:12%;height:2px;
  background:inherit;box-shadow:inherit;border-radius:3px
}
.slash.palico::before{top:-5px}
.slash.palico::after{top:5px}
@keyframes slashcut{
  0%  {opacity:0;transform:translate(-50%,-50%) rotate(var(--a,0deg)) scaleX(.2)}
  30% {opacity:1;transform:translate(-50%,-50%) rotate(var(--a,0deg)) scaleX(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a,0deg)) scaleX(1.12)}
}
/* Still show where the blow landed, just without the sweep. */
@media (prefers-reduced-motion:reduce){
  .slash{animation:slashfade .26s ease-out forwards}
  @keyframes slashfade{0%{opacity:1}100%{opacity:0}}
}

.arena-stats{
  /* Four columns, not two: label, value, label, value. Each pair keeps its own pair of
     columns, so the labels line up down the panel and every figure starts at the same
     x instead of wherever its label happened to end. The label columns take exactly the
     width of the longest name, and so does the first value column — splitting the spare
     room evenly between the two value columns instead gave the left one less than
     "10,000 dmg/click" needs and wrapped it. Only the last column takes the slack. */
  display:grid;grid-template-columns:max-content max-content max-content 1fr;
  gap:5px 12px;font-size:12.5px;opacity:.8;
  margin-top:8px;text-align:left
}
/* The wrappers exist to keep a label and its value together in the markup — and so the
   god charm line can be shown or hidden as one thing. They must not become grid cells
   themselves, or each pair would land in a single column. */
.arena-stats > span{display:contents}
.arena-stats i{font-variant-numeric:tabular-nums}
.arena-stats b{font-weight:400;opacity:.65}

/* ── Ore stock ───────────────────────────────────────────────────────── */
.ore-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;
  padding:0 14px 12px
}
.ore-chip{
  display:flex;align-items:center;gap:4px;padding:3px 5px;border-radius:5px;
  border:1px solid var(--line);background:#00000030;font-size:11px;cursor:pointer;
  font-variant-numeric:tabular-nums;color:var(--text)
}
.ore-chip:hover{background:#ffffff14;border-color:var(--accent-hover)}
/* Buying reads as the opposite of selling: the chip is tinted rather than plain, so a
   glance at the strip tells you which way a click will send your money. */
.ore-chip.buying{border-color:var(--accent-hover);background:#ffffff0f}
.ore-chip.buying:hover{background:#ffffff24}
/* The toggle rides in the Ore stock heading, so the strip gains a second mode without
   costing a row of vertical space in a column that is already tall. */
.ore-title{display:flex;align-items:center;gap:8px}
.ore-mode{margin-left:auto;text-transform:none;letter-spacing:0}
.ore-mode.buying{border-color:var(--accent-hover);color:var(--accent-hover)}
.ore-chip img{width:18px;height:18px;object-fit:contain;image-rendering:auto}
.ore-chip.none{opacity:.35;cursor:default}
.ore-chip.none:hover{background:#00000030;border-color:var(--line)}

/* ── Shop ────────────────────────────────────────────────────────────── */
.shop{padding:0 14px 16px;display:flex;flex-direction:column;gap:6px}
.shop-item{
  border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:#00000030;
  cursor:pointer;text-align:left;color:var(--text);width:100%
}
.shop-item:hover{background:#ffffff12;border-color:var(--accent-hover)}
.shop-item.maxed{opacity:.5;cursor:default}
.shop-item.maxed:hover{background:#00000030;border-color:var(--line)}
/* An employed hire stays live — the row is the switch that stands them down. */
.shop-item.hire .shop-lv{color:var(--positive);font-weight:600}
.shop-item.hire.paused{opacity:.5}
.shop-item.hire.paused .shop-lv{color:#e8b888}
.shop-item.hire.paused .shop-name{text-decoration:line-through;text-decoration-thickness:1px}
.shop-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.shop-name{font-size:12.5px;font-weight:600}
.shop-lv{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums;flex-shrink:0}
.shop-desc{font-size:10.5px;opacity:.6;margin-top:1px;line-height:1.35}
.shop-cost{
  font-size:11px;margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums
}
.shop-cost img{width:15px;height:15px;object-fit:contain;vertical-align:-3px}
.shop-cost .afford{color:var(--positive)}
.shop-cost .short{color:var(--negative)}
/* Prestige closes the smithy list. Gold when it's ready, because it's the same kind of
   event as a god charm — the thing you were working towards, not another purchase. */
.prestige-panel{margin-top:10px;border-top:1px solid var(--line)}
.prestige-panel.ready{border-color:#ffd24a;color:#ffd24a}
.prestige-panel.ready .shop-desc{color:#ffd24a;opacity:.8}
.prestige-panel.ready:hover{background:#ffd24a1a}

/* ── Charm box ───────────────────────────────────────────────────────── */
.box-nav{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 14px;flex-shrink:0;
  border-bottom:1px solid var(--line);font-size:12px;
  background-color:var(--nav-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--nav-bg) 82%,transparent),color-mix(in srgb,var(--nav-bg) 82%,transparent)),
    url('assets/sidebar-background-texture1.png');
  background-size:auto;background-position:left center;background-repeat:repeat;
}
.box-nav .spacer{margin-left:auto}
/* `container-type:size` lets the grid size itself against this box in both axes,
   so the largest square that fits falls out of one min() — no JS measuring. */
.box-grid-area{
  flex:1 1 auto;min-width:0;min-height:0;container-type:size;
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;overflow:auto
}
.box-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:3px;
  width:min(100%,100cqh);aspect-ratio:1;flex-shrink:0;
  align-content:start;user-select:none
}

/* The cell body is the theme colour and rarity is a translucent wash over it,
   matching the Equipment Box. The icon sits above the wash on z-index 1. */
.box-cell{
  position:relative;aspect-ratio:1;min-width:0;padding:4px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:5px;background:var(--grid-bg);
  cursor:pointer;overflow:hidden;
  transition:border-color .12s,filter .12s
}
.box-cell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0
}
.box-cell.filled::after{opacity:1}
.box-cell.empty{
  background:color-mix(in srgb,var(--grid-bg) 55%,#000);
  border-style:dashed;border-color:#ffffff14
}
.box-cell.empty:hover{border-color:var(--accent-hover);background:color-mix(in srgb,var(--grid-bg) 75%,#000)}
.box-cell.filled:hover{border-color:var(--accent-hover);filter:brightness(1.18)}
.box-cell .cell-icon{
  width:85%;height:85%;object-fit:contain;display:block;pointer-events:none;
  position:relative;z-index:1
}
.box-cell.empty .cell-slot{
  font-size:9px;color:#ffffff26;pointer-events:none;font-variant-numeric:tabular-nums
}
.box-cell[draggable="true"]{cursor:grab}
.box-cell.drag-source{opacity:.35;cursor:grabbing}
.box-cell.selected{border-color:#fff !important;box-shadow:inset 0 0 0 1px #fff}
/* A charm that just came out of the pot, so the eye can find it in 500 slots. */
.box-cell.fresh{animation:freshpulse 1.4s ease-out}
@keyframes freshpulse{
  0%,100%{box-shadow:none}
  15%{box-shadow:inset 0 0 0 2px #ffd24a,0 0 10px #ffd24a}
  60%{box-shadow:inset 0 0 0 2px #ffd24a}
}

/* God charm — three slots and both skills at the top of their range. Rare enough
   that it should announce itself across a 100-cell grid, so it gets a slow pulse
   rather than a static border. */
.box-cell.god,.pot-slot.god{border-color:#ffd24a !important;animation:godglow 1.9s ease-in-out infinite}
@keyframes godglow{
  0%,100%{box-shadow:inset 0 0 0 1px #ffd24a,0 0 4px rgba(255,210,74,.45)}
  50%{box-shadow:inset 0 0 0 1px #ffeaa0,0 0 13px rgba(255,210,74,.95)}
}
@media (prefers-reduced-motion:reduce){
  .box-cell.god,.pot-slot.god{
    animation:none;box-shadow:inset 0 0 0 1px #ffd24a,0 0 9px rgba(255,210,74,.8)
  }
}
/* The find gets the loud line; the hunt count sits under it as a quieter footnote. */
.tip-god{
  display:block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.06em;
  line-height:1.3;text-transform:uppercase;color:#ffd24a;
  text-shadow:0 0 6px rgba(255,210,74,.55)
}
.tip-god-found{
  display:block;margin-top:1px;font-size:9.5px;font-weight:400;letter-spacing:.04em;
  line-height:1.3;text-transform:uppercase;color:#ffd24a;opacity:.72
}
.detail-god{text-align:center;margin-bottom:2px}
/* Slots read as three fixed-width characters, so --- / O-- / OO- / OOO stack into a
   column you can scan without reading the number. Monospaced, or the O and the -
   are different widths and the rows stop lining up. */
.slot-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em}
/* The titlebar tally. Same pill as zenny and capacity so the row stays even, but
   wearing the god charm's gold — it's the one number in the bar you'd brag about. */
.god-pill{
  display:inline-flex;align-items:center;gap:5px;
  border-color:#ffd24a;color:#ffd24a;font-weight:700;
  box-shadow:0 0 7px rgba(255,210,74,.35)
}
.god-pill-icon{width:15px;height:15px;object-fit:contain;image-rendering:auto}
/* Prestige is a rank, not a trophy, so it takes the accent rather than the god charm's
   gold — two gold pills side by side would read as one thing. */
.prestige-pill{
  border-color:var(--accent-hover);color:var(--accent-hover);font-weight:700;
  letter-spacing:.02em
}

/* Rarity wash — the game's own box-cell tinting. */
.box-cell.rarity-1::after  { background:rgba(224,224,224,.42) }
.box-cell.rarity-2::after  { background:rgba(192,160,220,.42) }
.box-cell.rarity-3::after  { background:rgba(212,204,  0,.42) }
.box-cell.rarity-4::after  { background:rgba(216,112,144,.42) }
.box-cell.rarity-5::after  { background:rgba( 72,180, 72,.42) }
.box-cell.rarity-6::after  { background:rgba( 56,136,232,.42) }
.box-cell.rarity-7::after  { background:rgba(212, 56, 56,.42) }
.box-cell.rarity-8::after  { background:rgba( 32,184,184,.42) }
.box-cell.rarity-9::after  { background:rgba(232,128, 48,.42) }
.box-cell.rarity-10::after { background:rgba(255, 80,160,.42) }

/* Slot pips along the bottom edge, same idea as the Equipment Box's deco strip:
   bar length reads as capacity, one segment always means one slot. */
.cell-slots{
  position:absolute;left:4px;bottom:3px;height:3px;z-index:2;
  display:flex;gap:2px;pointer-events:none;
  width:calc((100% - 12px) / 3 * var(--slots,3) + (var(--slots,3) - 1) * 2px)
}
.cell-slots span{
  flex:1;border-radius:1px;background:#7fd0ff;box-shadow:0 0 0 1px rgba(0,0,0,.45)
}

/* ── Melding pot ─────────────────────────────────────────────────────── */
.pot{display:flex;flex-direction:column;gap:5px;padding:0 12px 12px}
.pot-row{
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:4px;align-items:center
}
.pot-slot{
  position:relative;aspect-ratio:1;border:1px dashed #ffffff26;border-radius:5px;
  background:color-mix(in srgb,var(--grid-bg) 55%,#000);
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden
}
.pot-slot.filled{border-style:solid;border-color:var(--line);background:var(--grid-bg)}
.pot-slot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0
}
.pot-slot.filled::after{opacity:1}
.pot-slot img{width:80%;height:80%;object-fit:contain;position:relative;z-index:1;pointer-events:none}
.pot-slot.drag-over{border-color:#80c0ff !important;box-shadow:inset 0 0 0 2px #4a8acc}
.pot-slot.rarity-1::after  { background:rgba(224,224,224,.42) }
.pot-slot.rarity-2::after  { background:rgba(192,160,220,.42) }
.pot-slot.rarity-3::after  { background:rgba(212,204,  0,.42) }
.pot-slot.rarity-4::after  { background:rgba(216,112,144,.42) }
.pot-slot.rarity-5::after  { background:rgba( 72,180, 72,.42) }
.pot-slot.rarity-6::after  { background:rgba( 56,136,232,.42) }
.pot-slot.rarity-7::after  { background:rgba(212, 56, 56,.42) }
.pot-slot.rarity-8::after  { background:rgba( 32,184,184,.42) }
.pot-slot.rarity-9::after  { background:rgba(232,128, 48,.42) }
.pot-slot.rarity-10::after { background:rgba(255, 80,160,.42) }

/* The pot resolves one row per hunt, so a row's control is a queue position, not a
   button. "Next hunt" is the one that resolves on the next kill. */
.pot-queue{
  font-size:9.5px;line-height:13px;padding:3px 6px;border-radius:4px;min-width:56px;
  text-align:center;border:1px solid transparent;white-space:nowrap
}
.pot-queue.next{
  background:#1d3a1d;border-color:#3f7a3f;color:#9ce89c;font-weight:600
}
.pot-queue.waiting{background:#00000040;border-color:var(--line);opacity:.75}
.pot-queue.blocked{background:#3a1d1d;border-color:#7a3f3f;color:#e8a0a0}
.pot-queue.idle{opacity:0}
.pot-status{font-size:11px;opacity:.7;min-height:30px;padding:6px 14px 2px;line-height:1.4}
.pot-actions{display:flex;gap:6px;padding:0 12px;flex-wrap:wrap;align-items:center}
/* The row wraps in a 300px column, so the rarity floor and its label travel as one
   piece — a label stranded at the end of one line with its dropdown on the next
   reads as two unrelated controls. */
.pot-filter{display:inline-flex;align-items:center;gap:5px}

/* ── Detail ──────────────────────────────────────────────────────────── */
/* Docked to the top of the pot column, so the pot scrolls beneath it while the charm
   you're inspecting stays readable. It needs its own opaque background — a sticky
   element with a transparent one would let the slots slide through it — and matching
   the column's texture keeps the seam invisible.
   Capped in height so a charm with two skills can't grow tall enough to bury the pot
   on a short window; it scrolls inside itself if it ever gets there. */
.detail-dock{
  position:sticky;top:0;z-index:5;
  max-height:60%;overflow-y:auto;
  background-color:var(--panel-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--panel-bg) 90%,transparent),color-mix(in srgb,var(--panel-bg) 90%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
  box-shadow:0 8px 12px -8px rgba(0,0,0,.75)
}
.detail{
  border-bottom:1px solid var(--line);padding:2px 14px 12px
}
.detail-empty{opacity:.45;font-size:11.5px;text-align:center;padding:12px 0}
.detail-name{font-size:15px;font-weight:700;text-align:center;line-height:1.25;margin:2px 0 6px}
.detail-icon-wrap{
  width:54px;height:54px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:#1c1c24;border:1px solid #3a3a50;margin:0 auto 6px;overflow:hidden
}
.detail-icon-wrap img{width:80%;height:80%;object-fit:contain}
.detail-section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin:12px 0 5px
}
.stat-row{
  display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px;
  border-bottom:1px solid #ffffff0d
}
.stat-row .k{opacity:.7;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-row .v{font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0}
.stat-row .v.pos{color:var(--positive)}
.stat-row .v.neg{color:var(--negative)}
.detail-actions{display:flex;gap:6px;margin:10px 0 0}
.detail-actions .btn{flex:1;padding:6px 8px;font-size:12.5px;text-align:center}

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;background:#000000a8;display:flex;align-items:center;
  justify-content:center;z-index:20;padding:20px
}
/* The confirm is always raised *by* another dialog — Reset Run and Clear browser save
   both come from Settings — and it's first in the markup, so at a shared z-index the
   dialog that opened it paints over the top. It's the only modal that stacks, so it's
   the only one that needs a layer of its own. */
#confirmModal{z-index:25}
.modal-card{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:20px;max-width:560px;width:100%;max-height:82vh;overflow-y:auto}
.modal-card h2{margin:0 0 14px;font-size:18px}
.modal-card p{margin:0 0 10px;line-height:1.45}
.modal-card a{color:color-mix(in srgb, hsl(from var(--accent) calc(h + 180) 75% 60%) 50%, var(--text))}
.modal-card .muted{color:var(--text-dim);font-size:13px;opacity:.75}
.row{display:flex;align-items:center}
.row.gap{gap:8px}
.row.end{justify-content:flex-end}

.help-list{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px;
  align-items:baseline;font-size:13px
}
.help-list dt{white-space:nowrap;opacity:.9}
.help-list dd{margin:0;opacity:.75;line-height:1.4}

.set-section{margin-bottom:18px}
.set-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin-bottom:8px}
.set-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.set-label{flex:1;font-size:13px;display:flex;flex-direction:column;gap:2px}
.set-hint{font-size:11px;opacity:.6;line-height:1.4}
.toggle{
  flex-shrink:0;width:38px;height:21px;padding:0;margin-top:1px;position:relative;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:#ffffff14;
  transition:background .18s,border-color .18s
}
.toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#b9b9b9;transition:transform .18s,background .18s
}
.toggle[aria-checked="true"]{background:var(--accent-hover);border-color:var(--accent-hover)}
.toggle[aria-checked="true"]::after{transform:translateX(17px);background:#fff}
.toggle:hover{filter:brightness(1.15)}
/* Toolbar-sized, to sit level with the 22px nav buttons rather than tower over them. */
.toggle.mini{width:30px;height:17px;margin-top:0;flex-shrink:0}
.toggle.mini::after{width:11px;height:11px;top:2px;left:2px}
.toggle.mini[aria-checked="true"]::after{transform:translateX(13px)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.swatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden}
.swatch.sel{border-color:#fff}
/* Not yet hunted: a placeholder tile, deliberately unreadable as a colour choice. */
.swatch.locked{cursor:default}
.swatch.locked .swatch-icon{opacity:.35;filter:grayscale(1)}
.swatch.locked span{opacity:.6;font-style:italic}
.swatch.locked:hover{filter:none}
.swatch-icon{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:60%;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.swatch span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:1.6;color:#fff;background:rgba(0,0,0,.45)}

/* The variant roster, shown in Help so the tint ladder is legible without
   grinding to G rank to discover it. */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:14px}
.roster-item{text-align:center;font-size:10.5px;line-height:1.3;opacity:.9}
.roster-item img{width:46px;height:46px;object-fit:contain;display:block;margin:0 auto 3px}
.roster-rank{font-size:10px;opacity:.55}

/* The melding fee ladder. One grid for the whole table so the icon, name, fee and
   result each keep their own column and the fees line up as a readable curve. */
.cost-table{
  display:grid;grid-template-columns:auto auto max-content 1fr;
  gap:5px 10px;align-items:center;font-size:12.5px;margin-bottom:16px
}
.cost-row{display:contents}
.cost-row img{width:22px;height:22px;object-fit:contain}
.cost-name{white-space:nowrap;opacity:.9}
.cost-fee{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cost-out{opacity:.75;line-height:1.35}
.cost-note{opacity:.6;font-size:11.5px}
/* Same green/red the smithy uses for "can you pay for this". */
.cost-fee.afford{color:var(--positive)}
.cost-fee.short{color:var(--negative)}
/* The row itself draws no box (display:contents), so opacity has to go on the cells. */
.cost-head{font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.cost-head span{white-space:nowrap;opacity:.55}

/* ── Charm hover card ────────────────────────────────────────────────── */
/* pointer-events:none matters: the card is placed next to the cell you're on, and
   a card that could take the pointer would flicker the moment it overlapped it. */
.charm-tip{
  position:fixed;z-index:45;pointer-events:none;width:212px;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background-color:var(--bg2);
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg2) 92%,transparent),color-mix(in srgb,var(--bg2) 92%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
  box-shadow:0 6px 22px rgba(0,0,0,.6)
}
.tip-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.tip-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:5px;overflow:hidden;
  background:#1c1c24;border:1px solid #3a3a50;display:flex;align-items:center;justify-content:center
}
.tip-icon img{width:82%;height:82%;object-fit:contain}
.tip-name{font-size:13px;font-weight:700;line-height:1.2}
.tip-tier{font-size:10px;opacity:.55;margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.tip-sec{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.5;
  margin:7px 0 3px;border-top:1px solid var(--line);padding-top:5px
}
.tip-row{
  display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:2px 0;
  font-variant-numeric:tabular-nums
}
.tip-row .k{opacity:.8;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip-row .v{flex-shrink:0;font-weight:600}
.tip-row .v.pos{color:var(--positive)}
.tip-row .v.neg{color:var(--negative)}
.tip-none{font-size:11.5px;opacity:.5;font-style:italic;padding:2px 0}
/* Slot pips read as capacity: one dot per slot the charm actually has, so a
   two-slot charm shows two dots rather than two-of-three. */
.tip-pips{display:inline-flex;gap:3px;vertical-align:-1px;margin-right:5px}
.tip-pips i{width:7px;height:7px;border-radius:2px;background:#7fd0ff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
/* Rarity badge, same colours as the cell wash so the tooltip and the grid agree. */
.tip-rarity{padding:1px 7px;border-radius:3px;font-weight:700;font-size:11px}
.tip-rarity.rarity-1 {background:#2a2a2e;color:#e0e0e0}
.tip-rarity.rarity-2 {background:#221e30;color:#c0a0dc}
.tip-rarity.rarity-3 {background:#282600;color:#d4cc00}
.tip-rarity.rarity-4 {background:#281018;color:#d87090}
.tip-rarity.rarity-5 {background:#101e10;color:#48b448}
.tip-rarity.rarity-6 {background:#0c1630;color:#3888e8}
.tip-rarity.rarity-7 {background:#260808;color:#d43838}
.tip-rarity.rarity-8 {background:#041e1e;color:#20b8b8}
.tip-rarity.rarity-9 {background:#281408;color:#e88030}
.tip-rarity.rarity-10{background:#280a1c;color:#ff50a0}

/* ── Banners ─────────────────────────────────────────────────────────── */
.restore-banner,.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.5)
}
.restore-banner{z-index:30;display:flex;align-items:center;gap:10px}
.toast{z-index:40;background:#222;max-width:min(520px,90vw);text-align:center}

@media (max-width:1100px){
  .farm-layout{flex-direction:column;overflow-y:auto}
  .arena-col,.pot-col{flex:none;width:auto;border:none;border-bottom:1px solid var(--line)}
  /* Stacked, the column no longer scrolls on its own, so there is nothing to stick
     to — pinning here would just freeze a panel mid-page. */
  .arena-dock,.detail-dock{position:static;max-height:none;box-shadow:none}
  .box-col{flex:none}
  .box-grid-area{overflow:visible;padding:10px}
  /* Stacked, the grid area has no height of its own to measure against, so
     `100cqh` resolves to zero and the whole grid disappears. Size it from width
     here instead — aspect-ratio:1 still keeps it square. */
  .box-grid{width:min(100%,520px);max-width:100%;margin:0 auto}
  .arena-target{max-width:170px}
}

/* Other MHGU apps modal */
.app-links{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.app-links li{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#ffffff08}
.app-links li.current{opacity:.72}
.app-links a,.app-name{font-weight:600;font-size:14px}
.app-here{font-weight:400;font-size:11px;opacity:.7;border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:7px}
.app-desc{display:block;margin-top:3px;font-size:12px;opacity:.8;line-height:1.4}