@font-face {
  font-family: AqueleOT;
  src: url('/fonts/breathe-fire.woff') format('woff');
  font-display: swap;
}

:root {
  color-scheme: dark;
  --idle-bg: #061013;
  --idle-deep: #081624;
  --idle-panel: #10232a;
  --idle-panel-raised: #173039;
  --idle-border: #36545b;
  --idle-text: #f5f7ef;
  --idle-muted: #bed0cd;
  --idle-gold: #f1d21b;
  --idle-green: #9af561;
  --idle-danger: #ff8983;
  --idle-warning: #ffc979;
  --idle-radius: 14px;
  --idle-shadow: 0 18px 42px rgb(0 0 0 / 22%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.idle-app {
  margin: 0;
  min-width: 320px;
  color: var(--idle-text);
  background: radial-gradient(ellipse at 70% -20%, #19444c 0, transparent 48%),
    linear-gradient(160deg, #091923 0, #061013 80%);
  font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.idle-app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/idle-assets/ui/background_dark.png') repeat;
  opacity: .09;
  pointer-events: none;
}

.idle-app a { color: var(--idle-gold); text-underline-offset: .2em; }
.idle-app a:hover { color: #fff0a0; }
.idle-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--idle-gold);
  outline-offset: 3px;
}
.idle-app :where(button, input, select, textarea) { font: inherit; }
.idle-app img { max-width: 100%; }
.idle-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.idle-skip { position: absolute; z-index: 30; left: 1rem; top: -6rem; padding: .65rem 1rem; background: var(--idle-gold); color: var(--idle-bg) !important; }
.idle-skip:focus { top: 1rem; }

.idle-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; position: relative; }
.idle-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; z-index: 10;
  display: flex; flex-direction: column; padding: 24px 16px 20px;
  background: linear-gradient(180deg, #112731 0%, #0a1a21 62%, #07141a 100%);
  border-right: 1px solid var(--idle-border); box-shadow: 10px 0 36px rgb(0 0 0 / 17%);
  overflow-y: auto;
}
.idle-brand { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 5px 6px 16px; color: var(--idle-text) !important; text-decoration: none; border-bottom: 1px solid #39535a; }
.idle-brand img { flex: 0 0 auto; filter: drop-shadow(0 2px 10px rgb(241 210 27 / 18%)); }
.idle-brand strong { display: block; font: 1.5rem/1 AqueleOT, Georgia, serif; letter-spacing: .035em; color: var(--idle-gold); white-space: nowrap; }
.idle-brand small { display: block; margin-top: 4px; color: var(--idle-muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.idle-menu { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; }
.idle-menu-label { padding: 20px 11px 6px; color: #9eb7b5; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.idle-menu a, .idle-sidebar-bottom a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px;
  border: 1px solid transparent; border-radius: 9px; color: #dce9e7; text-decoration: none;
  font-size: .9rem; font-weight: 600; transition: background-color .15s ease, border-color .15s ease;
}
.idle-menu a span { width: 20px; flex: 0 0 20px; text-align: center; color: var(--idle-green); font-size: 1.1rem; }
.idle-menu a:hover, .idle-sidebar-bottom a:hover { color: #fff; background: #25434a; }
.idle-menu a.is-current, .idle-sidebar-bottom a.is-current { color: var(--idle-gold); background: #243840; border-color: #786f35; box-shadow: inset 3px 0 var(--idle-gold); }
.idle-sidebar-bottom { display: grid; gap: 4px; margin-top: auto; padding-top: 22px; border-top: 1px solid #39535a; }
.idle-sidebar-bottom a { font-size: .82rem; }

.idle-main-column { min-width: 0; }
.idle-topbar {
  min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(20px, 3.5vw, 52px); border-bottom: 1px solid var(--idle-border);
  background: rgb(8 22 36 / 90%); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 8;
}
.idle-topbar-title { display: grid; min-width: 0; }
.idle-topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.idle-eyebrow { color: var(--idle-green); font-size: .63rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.idle-topbar-actions { display: flex; align-items: center; gap: 14px; }
.idle-character-link { display: flex; gap: 7px; align-items: baseline; color: var(--idle-muted) !important; text-decoration: none; white-space: nowrap; font-size: .78rem; }
.idle-character-link strong { max-width: 160px; overflow: hidden; color: var(--idle-gold); font-size: .88rem; text-overflow: ellipsis; }
.idle-character-link small { flex: none; }
.idle-language { display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--idle-border); border-radius: 9px; background: #071821; }
.idle-language button { width: 39px; min-height: 34px; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: var(--idle-muted); font-size: .74rem; font-weight: 800; cursor: pointer; }
.idle-language button[aria-current="true"] { background: var(--idle-gold); color: var(--idle-bg); }
.idle-menu-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--idle-border); border-radius: 8px; background: var(--idle-panel); color: var(--idle-gold); cursor: pointer; }
.idle-app .idle-menu-toggle { display: none; border-color: #d8bc21; background: var(--idle-gold); color: var(--idle-bg); }
.idle-content { width: 100%; padding: 0 clamp(18px, 3.5vw, 52px) 72px; }
.idle-content > main.container { width: min(100%, 1290px); margin: 0 auto; padding: 30px 0 0; }

.idle-character-sheet { --sheet-line: #36515c; }
.idle-character-sheet .idle-page-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.idle-character-sheet .idle-page-heading > a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 1px solid #657f70; border-radius: 9px; text-decoration: none; white-space: nowrap; }
/* Jump links to sections of one page, not tabs: none of them is "current". */
.idle-sheet-tabs { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px !important; }
.idle-sheet-tabs a { flex: 1 1 8.5rem; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 12px; border: 1px solid #46636a; border-radius: 10px; background: #102830; color: #e5eeea; text-align: center; text-decoration: none; font-weight: 700; }
.idle-sheet-tabs a:hover, .idle-sheet-tabs a:focus-visible { border-color: #baa747; background: #263d3c; color: #ffe7a1; }
.idle-sheet-tabs span { margin-left: 5px; padding: 1px 6px; border-radius: 20px; background: #355b60; font-size: .76rem; }
.idle-character-sheet .idle-sheet-hero { display: flex; align-items: center; gap: 20px; margin: 0 0 14px; padding: 22px; border: 1px solid #62785c; border-radius: 14px; background: radial-gradient(circle at 0 0, rgb(88 129 98 / 25%), transparent 45%), linear-gradient(125deg, #1b3b3d, #10252e); }
.idle-sheet-avatar { display: grid; flex: 0 0 104px; width: 104px; height: 104px; place-items: center; border: 1px solid #638474; border-radius: 12px; background: #0b212a; box-shadow: inset 0 0 22px rgb(88 150 118 / 12%); }
.idle-sheet-avatar img { image-rendering: pixelated; }
.idle-sheet-avatar span { font-size: 2.7rem; }
.idle-sheet-identity { min-width: 145px; }
.idle-content .idle-sheet-identity h2 { margin: 0 0 4px; color: #f5f2e5; font: 800 1.6rem/1.15 system-ui, sans-serif; overflow-wrap: anywhere; }
.idle-sheet-identity p { margin: 0 0 4px !important; color: var(--idle-muted); }
.idle-sheet-identity strong { color: var(--idle-green); font-size: .88rem; }
.idle-sheet-vitals { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 12px; flex: 1; margin-left: auto; }
.idle-sheet-vitals div { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid rgb(160 197 171 / 14%); border-radius: 9px; background: rgb(5 22 27 / 35%); }
.idle-sheet-vitals span, .idle-sheet-stat-grid span { color: var(--idle-muted); font-size: .74rem; }
.idle-sheet-vitals strong { color: #f4f5ef; font-variant-numeric: tabular-nums; }
.idle-sheet-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 14px; align-items: stretch; }
.idle-sheet-skills { grid-area: 1 / 1; }
.idle-sheet-combat { grid-area: 1 / 2 / 3 / 3; }
.idle-sheet-progression { grid-area: 2 / 1; }
.idle-sheet-protections { grid-area: 3 / 1; }
.idle-sheet-equipment { grid-area: 3 / 2; }
.idle-sheet-bonuses { grid-area: 4 / 1; }
.idle-sheet-imbuements { grid-area: 4 / 2; }
.idle-sheet-deaths { grid-area: 5 / 1 / 6 / 3; }
.idle-character-sheet .idle-sheet-grid > section.idle-sheet-panel { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--sheet-line); border-radius: 12px; background: linear-gradient(150deg, #17343a, #102831); }
.idle-character-sheet .idle-sheet-panel h2 { margin: 0 0 13px; color: #f5e9bc; font: 800 1.04rem/1.3 system-ui, sans-serif; }
.idle-sheet-panel h2 small { margin-left: 4px; color: var(--idle-green); }
.idle-sheet-lead { margin: -4px 0 14px !important; color: var(--idle-muted); font-size: .81rem; }
.idle-sheet-table-head, .idle-sheet-skill-row { display: grid; grid-template-columns: minmax(95px, 1fr) 44px minmax(90px, .9fr); align-items: center; gap: 8px; padding: 7px 0; }
.idle-sheet-table-head { color: var(--idle-muted); font-size: .7rem; }
.idle-sheet-skill-row { border-top: 1px solid #34505a; font-size: .82rem; }
.idle-sheet-skill-row strong { font-variant-numeric: tabular-nums; }
.idle-sheet-skill-progress { display: flex; align-items: center; gap: 7px; }
.idle-character-sheet .idle-sheet-skill-progress progress { flex: 1; width: 100%; min-width: 0; height: 8px; accent-color: var(--idle-green); }
.idle-sheet-skill-progress small { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.idle-sheet-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.idle-sheet-stat-grid div { display: grid; gap: 3px; min-width: 0; padding: 12px; border: 1px solid #304d53; border-radius: 9px; background: #0d242c; }
.idle-sheet-stat-grid .idle-sheet-stat-feature { border-color: #6d7040; background: #233939; }
.idle-sheet-stat-grid strong { overflow-wrap: anywhere; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.idle-sheet-stat-feature strong { color: var(--idle-gold); }
.idle-sheet-panel-note { margin: 14px 0 0 !important; color: var(--idle-muted); font-size: .77rem; }
.idle-sheet-alert { padding: 9px 11px; border-left: 3px solid var(--idle-warning); color: var(--idle-warning); background: #342d24; font-size: .82rem; }
.idle-sheet-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: .8rem; }
.idle-sheet-actions a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid #647c64; border-radius: 8px; text-decoration: none; }
.idle-sheet-protection, .idle-sheet-bonus, .idle-sheet-death { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #34505a; font-size: .83rem; }
.idle-sheet-protection strong { color: var(--idle-green); }
.idle-sheet-progress-label { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 6px; font-size: .83rem; }
.idle-character-sheet .idle-sheet-progression progress { width: 100%; max-width: none; height: 10px; accent-color: var(--idle-gold); }
.idle-sheet-progression small { display: block; color: var(--idle-muted); font-size: .75rem; }
.idle-sheet-bonus-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid #607565; border-bottom: 0; font-weight: 700; }
.idle-sheet-bonus-total strong { color: var(--idle-green); }
.idle-sheet-death time { color: var(--idle-muted); white-space: nowrap; font-size: .73rem; }
.idle-sheet-empty { color: var(--idle-muted); font-size: .84rem; }
.idle-sheet-item-list { display: grid; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; }
.idle-sheet-item-list li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin: 0 !important; padding: 8px 0; border-bottom: 1px solid #34505a; font-size: .83rem; }
.idle-sheet-item-list li > span:first-child { color: var(--idle-muted); }
.idle-sheet-item-list strong { text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.idle-sheet-item-list em { margin-left: 3px; color: var(--idle-green); font-style: normal; }
.idle-sheet-item-list small { display: block; color: var(--idle-muted); font-size: .72rem; }
.idle-sheet-item-list .idle-sheet-item-effect { text-align: right; white-space: nowrap; }
@media (max-width: 1080px) { .idle-character-sheet .idle-sheet-hero { flex-wrap: wrap; } .idle-sheet-vitals { flex: 1 0 100%; width: 100%; min-width: 0; margin-left: 0; } }
@media (max-width: 760px) { .idle-character-sheet .idle-page-heading { align-items: start; flex-direction: column; } .idle-sheet-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .idle-sheet-grid { grid-template-columns: minmax(0, 1fr); } .idle-sheet-grid > .idle-sheet-panel { grid-area: auto; } }
@media (max-width: 480px) { .idle-character-sheet .idle-sheet-hero { padding: 16px; } .idle-sheet-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .idle-sheet-vitals span { font-size: .68rem; } .idle-sheet-table-head, .idle-sheet-skill-row { grid-template-columns: minmax(86px, 1fr) 34px minmax(75px, .8fr); gap: 5px; } .idle-sheet-item-list li { flex-wrap: wrap; } .idle-sheet-item-list strong, .idle-sheet-item-list .idle-sheet-item-effect { text-align: left; white-space: normal; } .idle-sheet-death { align-items: start; flex-direction: column; gap: 0; } }

.idle-content main h1 { font: clamp(2.1rem, 3.8vw, 3.2rem)/1.05 AqueleOT, Georgia, serif; color: var(--idle-gold); letter-spacing: .035em; margin: 0 0 16px; text-shadow: 0 2px 14px rgb(0 0 0 / 55%); }
.idle-content main h2 { font: 1.34rem/1.25 Georgia, serif; color: #fff1ad; margin: 0 0 14px; }
.idle-content main h3 { font-size: 1rem; color: var(--idle-green); margin: 18px 0 10px; }
.idle-content main h2.idle-character-heading { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 8px; }
.idle-character-heading small { color: var(--idle-muted); font: 700 .8rem/1.2 system-ui, sans-serif; }
.idle-character-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.idle-content main > section.idle-character-create { padding: 0; }
.idle-character-create details { padding: 14px 18px; }
.idle-character-create summary { color: var(--idle-gold); font-weight: 700; cursor: pointer; }
.idle-character-create details[open] summary { margin-bottom: 12px; }
.idle-character-create p, .idle-character-limit { color: var(--idle-muted); font-size: .88rem; }
.idle-content main p { margin: .6rem 0 1rem; }
.idle-content main > p { color: var(--idle-muted); }
.idle-content main > section, .idle-content main > article {
  background: linear-gradient(150deg, rgb(20 45 51 / 96%), rgb(12 30 37 / 98%));
  border: 1px solid var(--idle-border); border-radius: var(--idle-radius);
  box-shadow: var(--idle-shadow); padding: clamp(18px, 2.4vw, 28px); margin: 22px 0;
}
.idle-content main > section:target { border-color: var(--idle-gold); }
.idle-content main > nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.idle-content main > section > :last-child { margin-bottom: 0; }
.idle-content main ul { padding-left: 1.3rem; }
.idle-content main li { margin: .4rem 0; }
.idle-content main small { color: var(--idle-muted); }

/* Default button. `:where()` keeps it at (0,1,0) and `.btn` at (0,2,0), so component rules
   such as `.idle-app .idle-workflow-steps button` or `.btn-outline-primary` can restyle it;
   the previous (0,3,2) selector painted every button gold. */
.idle-app :where(button:not(.idle-language button):not(.idle-menu-toggle)), .idle-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; max-width: 100%; padding: .58rem 1rem;
  border: 1px solid #d8bc21; border-radius: 8px; background: var(--idle-gold);
  color: #081624; text-align: center; text-decoration: none; font-weight: 800; line-height: 1.25; cursor: pointer;
}
.idle-app :where(button:not(.idle-language button):not(.idle-menu-toggle)):hover, .idle-app .btn:hover { background: #ffea77; color: #081624; }
.idle-app :is(.btn-outline-primary, .btn-secondary) { background: transparent; color: var(--idle-gold); }
.idle-app :is(.btn-outline-primary, .btn-secondary):hover { background: #3b3c27; color: #fff; }
.idle-app .btn-danger { background: #c34d4a; border-color: #e1766f; color: white; }
.idle-app button:disabled, .idle-app .btn:disabled { opacity: .55; cursor: not-allowed; }
.idle-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  display: block; width: 100%; min-width: 0; min-height: 43px; padding: .55rem .7rem;
  border: 1px solid #5d787e; border-radius: 7px; background: #071a21; color: var(--idle-text);
}
.idle-app :is(input, select, textarea)::placeholder { color: #a8b9b8; }
.idle-app input[type="checkbox"], .idle-app input[type="radio"] { width: 18px; height: 18px; accent-color: var(--idle-gold); vertical-align: middle; }
.idle-app label { display: inline-flex; flex-direction: column; gap: 5px; min-width: 160px; color: #e1e9e4; font-size: .85rem; font-weight: 650; }
.idle-app label:has(> input[type="checkbox"]), .idle-app label:has(> input[type="radio"]) { display: inline-flex; flex-direction: row; align-items: center; min-width: 0; }
.idle-app form { max-width: 100%; }
.idle-content main section > form, .idle-content main article > form { margin: 14px 0; }
.idle-content main form > label { margin: 0 12px 12px 0; }
.idle-content main form > button { margin: 5px 8px 5px 0; }
.idle-content main form > label.d-block { display: flex; width: 100%; }
.idle-content main form > label.d-block input { max-width: 240px; }
.idle-content main form:has(> input[name="quantity"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.idle-content main form:has(> input[name="quantity"]) input[name="quantity"] { width: 120px; }
.idle-content main form > input[type="number"] { display: inline-block; width: auto; max-width: 135px; }
.idle-app .alert { display: block; padding: 14px 16px; margin: 18px 0; border: 1px solid #537c87; border-radius: 9px; background: #163742; color: #edf8ff; }
.idle-app .alert-warning { border-color: #9b7435; background: #3a301f; color: #ffe5ad; }
.idle-app .alert-success { border-color: #5d9160; background: #1c382e; color: #d8ffcd; }
.idle-app .alert-info { border-color: #527d87; background: #173641; }
.idle-app .card { background: #0e232b; border: 1px solid var(--idle-border); border-radius: 10px; height: 100%; }
.idle-app .card-body { padding: 18px; }
.idle-app .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.idle-app .row > * { min-width: 0; }
.idle-app :is(.h5, h3.h5) { font-size: 1rem; }
.idle-app .d-block { display: block; }
.idle-app .mb-2 { margin-bottom: .5rem; }.idle-app .mb-3 { margin-bottom: 1rem; }.idle-app .mb-4 { margin-bottom: 1.5rem; }
.idle-app .mt-3 { margin-top: 1rem; }.idle-app .mt-4 { margin-top: 1.5rem; }.idle-app .h-100 { height: 100%; }
.idle-app details { margin: 14px 0; padding: 12px 15px; border: 1px solid var(--idle-border); border-radius: 8px; background: #0a2027; }
.idle-app summary { cursor: pointer; font-weight: 700; color: var(--idle-gold); }
.idle-app table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 15px 0 22px; scrollbar-color: #657c7d #0c2229; }
.idle-app table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid #37545b; text-align: left; vertical-align: top; }
.idle-app table th { color: #f3e6ab; font-size: .8rem; white-space: nowrap; }
.idle-app table tbody tr:nth-child(even) { background: rgb(255 255 255 / 3%); }
.idle-app .idle-sprite { display: inline-block; vertical-align: middle; image-rendering: pixelated; margin-right: .3em; }
.idle-app progress { display: block; width: min(100%, 420px); height: 10px; margin-top: 7px; accent-color: var(--idle-green); }

.idle-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px;
  min-height: 162px; padding: 24px clamp(22px, 3vw, 36px); margin: 0 0 20px;
  border: 1px solid #706b35; border-radius: var(--idle-radius);
  background: radial-gradient(circle at 88% 18%, rgb(96 127 72 / 30%), transparent 38%),
    linear-gradient(112deg, #1b3540 0%, #10282e 65%, #183133 100%);
  box-shadow: var(--idle-shadow); overflow: hidden;
}
.idle-hero h1 { margin: 0 0 8px !important; }.idle-hero p { margin: 0; color: var(--idle-muted); }
.idle-hero::after { content: '✦'; color: rgb(241 210 27 / 16%); font-size: 9rem; line-height: 1; justify-self: end; }
.idle-hero.has-outfit::after { display: none; }
.idle-home-outfit { display: grid; grid-template-rows: 96px auto; place-items: center; justify-self: center; gap: 3px; min-width: 116px; padding: 8px; border: 1px solid rgb(241 210 27 / 38%); border-radius: 9px; background: rgb(9 30 34 / 50%); color: var(--idle-gold) !important; text-decoration: none; }
.idle-home-outfit:hover { border-color: var(--idle-gold); }.idle-home-outfit img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }.idle-home-outfit small { font-size: .73rem; }
@media (max-width: 540px) { .idle-hero.has-outfit { grid-template-columns: minmax(0, 1fr) 94px; gap: 8px; }.idle-home-outfit { grid-template-rows: 76px auto; min-width: 0; padding: 5px; }.idle-home-outfit img { width: 76px; height: 76px; } }
.idle-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 20px; }
.idle-stat { min-width: 135px; padding: 10px 15px; border: 1px solid var(--idle-border); border-radius: 9px; background: #102931; }
.idle-stat span { display: block; color: var(--idle-muted); font-size: .74rem; }.idle-stat strong { display: block; color: var(--idle-gold); font-size: 1.14rem; }
.idle-equipment-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: 'necklace head backpack' 'hand armor shield' 'ring legs ammo' '. feet .';
  gap: 10px; width: min(100%, 600px); margin: 18px auto 0; padding: 18px;
  border: 1px solid #3d5b60; border-radius: 13px;
  background: radial-gradient(ellipse at center, #173238, #0a1e25 75%);
}
.idle-equipment-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; min-height: 176px; padding: 10px;
  border: 1px solid #516b6b; border-radius: 9px; background: #091e25;
  text-align: center;
}
.idle-equipment-slot.is-empty { border-style: dashed; background: rgb(9 30 37 / 58%); }
.idle-equipment-slot.is-equipped { border-color: #8c8446; box-shadow: inset 0 0 0 1px rgb(241 210 27 / 8%); }
.idle-equipment-slot--necklace { grid-area: necklace; }
.idle-equipment-slot--head { grid-area: head; }
.idle-equipment-slot--backpack { grid-area: backpack; }
.idle-equipment-slot--hand { grid-area: hand; }
.idle-equipment-slot--armor { grid-area: armor; }
.idle-equipment-slot--shield { grid-area: shield; }
.idle-equipment-slot--ring { grid-area: ring; }
.idle-equipment-slot--legs { grid-area: legs; }
.idle-equipment-slot--ammo { grid-area: ammo; }
.idle-equipment-slot--feet { grid-area: feet; }
.idle-equipment-slot-name { color: #e1d69e; font-size: .72rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.idle-equipment-slot .idle-slot-icon {
  display: grid; place-items: center; align-self: center;
  flex: 0 0 64px; width: 64px; height: 64px;
}
.idle-equipment-slot .idle-slot-icon .idle-sprite {
  display: block; margin: 0; transform: scale(2); transform-origin: center;
}
.idle-equipment-item { max-width: 100%; color: var(--idle-text); font-size: .77rem; line-height: 1.25; overflow-wrap: anywhere; }
.idle-equipment-empty { color: #8fa6a5; font-size: .72rem; }
.idle-equipment-slot form { width: 100%; margin: auto 0 0 !important; }
#idle-equipment .idle-equipment-slot button { width: 100%; min-height: 36px; margin: 0; padding: 5px 7px; font-size: .73rem; }
.idle-inventory-row { display: grid; grid-template-columns: 36px minmax(130px, 1fr) auto minmax(180px, auto); align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--idle-border); }
.idle-inventory-row > .idle-sprite, .idle-content main .idle-item-row > .idle-sprite { justify-self: center; margin: 0; }
.idle-inventory-row strong { overflow-wrap: anywhere; }.idle-inventory-row form { display: flex; align-items: center; gap: 8px; margin: 0 !important; }
.idle-inventory-row form input[type="number"] { width: 85px !important; }
.idle-prep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.idle-prep-grid > * { min-width: 0; }
.idle-content main .idle-step { display: inline-block; padding: 3px 9px; margin-bottom: 10px; border: 1px solid #897b39; border-radius: 30px; color: var(--idle-gold); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.idle-content main .idle-item-row { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(88px, 120px) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--idle-border); border-radius: 9px; background: #0b252c; }
.idle-content main .idle-item-row input[type="number"] { width: 100%; }
.idle-form-group { margin: 18px 0 !important; }
.idle-form-group summary { margin-bottom: 12px; }
.idle-supply-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(95px, 130px)); align-items: end; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--idle-border); }
.idle-supply-row strong { overflow-wrap: anywhere; }.idle-supply-row small { display: block; font-weight: 400; }
.idle-supply-row label { display: flex; min-width: 0; margin: 0 !important; }
.idle-supply-groups > h4 { margin: 0 0 5px; color: var(--idle-gold); }
.idle-supply-more { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--idle-border); border-radius: 8px; background: #102a32; }
.idle-supply-more summary { margin: 0; color: var(--idle-text); cursor: pointer; font-weight: 700; }
.idle-supply-more summary small { color: var(--idle-muted); font-weight: 500; }
.idle-supply-more[open] summary { margin-bottom: 10px; }
.idle-loot-count { margin-left: 7px; color: var(--idle-muted); font-size: .76rem; font-weight: 500; }
.idle-loot-intro { color: var(--idle-muted); font-size: .84rem; }
.idle-loot-capacity { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 10px 0 14px; padding: 11px 13px; border: 1px solid var(--idle-border); border-radius: 8px; background: #122e34; font-size: .83rem; }
.idle-loot-capacity strong { color: var(--idle-gold); }
.idle-loot-capacity small { flex-basis: 100%; color: var(--idle-muted); }
.idle-loot-capacity.is-over-capacity { border-color: #dd815b; }
.idle-loot-capacity.is-over-capacity small { color: #ffd0af; }
.idle-loot-bulk { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.idle-app .idle-loot-bulk button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--idle-border); border-radius: 7px; background: #17353c; color: var(--idle-gold); font-size: .78rem; }
.idle-app .idle-loot-bulk button:hover { border-color: var(--idle-gold); }
.idle-loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: 10px; }
.idle-loot-card { min-width: 0; border: 1px solid var(--idle-border); border-radius: 9px; background: #102b33; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.idle-loot-card:has(.idle-loot-keep:checked) { border-color: var(--idle-gold); box-shadow: inset 0 0 0 1px rgb(241 210 27 / 35%); }
.idle-loot-card:focus-within { outline: 2px solid var(--idle-gold); outline-offset: 2px; }
.idle-app .idle-loot-card .idle-loot-main { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 70px; margin: 0; padding: 12px; cursor: pointer; }
.idle-loot-main:hover { background: rgb(255 255 255 / 5%); }
.idle-loot-main .idle-sprite { flex: none; margin: 0; }
.idle-loot-copy { display: grid; gap: 3px; min-width: 0; }
.idle-loot-copy strong { overflow-wrap: anywhere; font-size: .86rem; line-height: 1.25; }
.idle-loot-state { color: var(--idle-muted); font-size: .72rem; }
.idle-loot-state-keep { display: none; }
.idle-loot-card:has(.idle-loot-keep:checked) .idle-loot-state-keep { display: block; color: var(--idle-gold); }
.idle-loot-card:has(.idle-loot-keep:checked) .idle-loot-state-ignore { display: none; }
.idle-loot-controls { display: none; gap: 8px; padding: 0 12px 12px; }
.idle-loot-card:has(.idle-loot-keep:checked) .idle-loot-controls { display: grid; }
.idle-app .idle-loot-card .idle-loot-cap-label, .idle-app .idle-loot-card .idle-loot-limit { width: 100%; min-width: 0; margin: 0; }
.idle-app .idle-loot-card .idle-loot-limit { display: none; }
.idle-app .idle-loot-card:has(.idle-loot-cap:checked) .idle-loot-limit { display: flex; }
.idle-live-page { padding-top: 12px !important; }
.idle-live-topline { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 18px; margin: 0 0 10px; }
.idle-live-topline h1 { margin: 2px 0 0; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
.idle-live-topline [data-live-clock] { color: var(--idle-gold); font-weight: 750; }
.idle-live-toolbar { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: calc(100% - 20px); padding: 7px; border: 1px solid #698074; border-radius: 9px; background: rgb(5 18 20 / 84%); }
.idle-live-toolbar button { min-height: 38px; padding: 5px 10px; font-size: .8rem; }
.idle-app .idle-live-toolbar label { display: inline-flex; flex-direction: row; align-items: center; min-width: 0; margin: 0; color: #fff4c4; font-size: .8rem; }
.idle-live-stage { position: relative; overflow: hidden; border: 1px solid #6b7870; border-radius: 12px; background: #0b1820; }
.idle-live-stage canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.idle-live-map-source { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: min(48%, 270px); padding: 5px 8px; border-radius: 5px; background: rgb(5 18 20 / 82%); color: #fff4c4; font: 700 11px sans-serif; }
.idle-live-map-source[hidden] { display: none; }
.idle-live-debug { position: absolute; z-index: 3; top: 62px; left: 10px; max-width: min(42%, 320px); margin: 0; padding: 6px 8px; overflow: hidden; border-radius: 5px; background: rgb(0 0 0 / 82%); color: #d5ffc5; font: 10px/1.3 monospace; pointer-events: none; white-space: pre; }
.idle-live-stage canvas[data-live-canvas] { cursor: crosshair; touch-action: none; }
.idle-live-stage canvas[data-live-canvas]:focus-visible { outline: 3px solid var(--idle-gold); outline-offset: -3px; }
.idle-temple-controls { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 42px); gap: 4px; padding: 6px; border: 1px solid #698074; border-radius: 9px; background: rgb(5 18 20 / 84%); touch-action: none; }
.idle-temple-controls button { min-width: 0; min-height: 0; padding: 0; border: 1px solid #82988a; border-radius: 5px; background: #15343a; color: #fff4c4; font: 700 24px/1 sans-serif; touch-action: none; }
.idle-temple-controls button:active { background: #34615f; }
.idle-temple-up { grid-column: 2; grid-row: 1; }
.idle-temple-left { grid-column: 1; grid-row: 2; }
.idle-temple-down { grid-column: 2; grid-row: 2; }
.idle-temple-right { grid-column: 3; grid-row: 2; }
.idle-live-page[data-live-training="true"] canvas[data-live-canvas] { cursor: default; touch-action: auto; }
.idle-live-page[data-live-training="true"] .idle-temple-controls { display: none; }
.idle-training-indicator { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: calc(100% - 220px); padding: 8px 11px; border: 1px solid #82988a; border-radius: 7px; background: rgb(5 18 20 / 84%); color: #fff4c4; font-size: .82rem; font-weight: 750; }
.idle-training-indicator[hidden] { display: none; }
.idle-live-vitals { position: absolute; z-index: 2; bottom: 10px; left: 10px; display: grid; grid-template-columns: 105px 130px; align-items: center; gap: 4px 8px; padding: 7px 9px; border: 1px solid #63716a; border-radius: 6px; background: rgb(5 18 20 / 88%); color: #f5f5e8; font: 700 11px sans-serif; }
.idle-live-vitals span { display: flex; justify-content: space-between; gap: 4px; }
.idle-live-vitals > i { display: block; height: 9px; border: 1px solid #a5a5a0; background: #181b1b; }
.idle-live-vitals > i > i { display: block; height: 100%; width: 100%; background: #33b52c; }
.idle-live-vitals > i:last-child > i { background: #389bc9; }
.idle-live-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgb(4 15 19 / 88%); color: #fff4c4; font-size: 1.1rem; font-weight: 750; text-align: center; }
.idle-live-message[hidden] { display: none; }
.idle-live-message a { color: var(--idle-gold); }
.idle-live-milestones { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0; padding: 9px 12px; border: 1px solid var(--idle-border); border-radius: 7px; background: #102b33; color: var(--idle-text); font-size: .82rem; }
.idle-live-milestones[hidden] { display: none; }
.idle-live-milestones strong { color: var(--idle-gold); }
.idle-live-milestones ol { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 0; padding-left: 20px; color: var(--idle-muted); }
.idle-live-milestones li { padding-left: 2px; }
.idle-live-event { position: absolute; z-index: 2; top: 58px; left: 10px; max-width: min(60%, 420px); padding: 7px 10px; border: 1px solid var(--idle-gold); border-radius: 7px; background: rgb(5 18 20 / 90%); color: #fff4c4; font: 700 12px sans-serif; pointer-events: none; }
.idle-live-event[hidden] { display: none; }
.idle-live-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 12px 0; }
.idle-live-meta p { max-width: 75ch; margin: 0; color: var(--idle-muted); font-size: .86rem; }
.idle-live-meta form { flex: 0 0 auto; margin: 0; }
.idle-live-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.idle-live-details section { min-width: 0; padding: 14px; border: 1px solid var(--idle-border); border-radius: 9px; background: #102b33; }
.idle-live-details h2 { margin: 0 0 12px; font-size: .95rem; }
.idle-live-tags { display: flex; flex-wrap: wrap; gap: 7px; color: var(--idle-muted); }
.idle-live-tags > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 8px; border: 1px solid #456169; border-radius: 7px; background: #0a2027; color: var(--idle-text); font-size: .79rem; overflow-wrap: anywhere; }
.idle-live-tags .idle-sprite { width: 32px; height: 32px; }
.idle-live-tags .idle-live-ability-icon { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; overflow: hidden; border: 1px solid #4a666d; border-radius: 5px; background: radial-gradient(circle, #294750, #10252d); color: #f2d77d; font-size: 1.25rem; line-height: 1; }
.idle-live-ability-icon canvas { width: 30px; height: 30px; image-rendering: pixelated; }
@media (max-width: 700px) {
  .idle-live-topline { align-items: start; }
  .idle-live-topline [data-live-clock] { font-size: .82rem; }
  .idle-live-toolbar { top: 6px; right: 6px; max-width: calc(100% - 12px); gap: 6px; }
  .idle-live-meta { align-items: start; flex-direction: column; }
  .idle-live-details { grid-template-columns: 1fr; }
  .idle-live-stage canvas { width: 200%; max-width: none; margin-left: -50%; }
  .idle-live-map-source { top: auto; bottom: 66px; max-width: calc(100% - 20px); }
  .idle-live-vitals { grid-template-columns: 65px 90px; bottom: 6px; left: 6px; padding: 5px; font-size: 10px; }
  .idle-training-indicator { top: 58px; max-width: calc(100% - 20px); }
}
.idle-return-limits { margin: 20px 0; padding: 16px; border: 1px solid var(--idle-border); border-radius: 8px; background: #0c252c; }
.idle-delivery-intro { color: var(--idle-muted); }
.idle-content main .idle-delivery-hunt { margin: 16px 0 0; padding: 18px; border: 1px solid var(--idle-border); border-radius: 11px; background: #0b2229; }
.idle-delivery-hunt-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--idle-border); }
.idle-delivery-hunt-heading strong { color: #fff1ad; font-size: 1rem; }
.idle-delivery-hunt-heading span { color: var(--idle-muted); font-size: .8rem; }
.idle-delivery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-top: 16px; }
.idle-app .idle-delivery-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 170px; margin: 0; padding: 12px; border: 1px solid #446168; border-radius: 10px; background: linear-gradient(160deg, #15343b, #0c252c); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.idle-delivery-item:hover, .idle-delivery-item:focus-within { border-color: #b4a64d; }
.idle-delivery-item:has(input:checked) { border-color: var(--idle-gold); box-shadow: inset 0 0 0 1px var(--idle-gold), 0 0 16px rgb(241 210 27 / 12%); }
.idle-delivery-item-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.idle-delivery-quantity { padding: 2px 7px; border: 1px solid #587078; border-radius: 6px; color: var(--idle-text); background: #0b2229; font-size: .78rem; font-weight: 800; }
.idle-delivery-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border: 1px solid #426168; border-radius: 10px; background: radial-gradient(circle, #2b4850, #10282e 70%); }
.idle-delivery-icon .idle-sprite { margin: 0; transform: scale(1.6); transform-origin: center; }
.idle-delivery-item strong { width: 100%; color: var(--idle-text); font-size: .82rem; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.idle-delivery-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 18px; }
.idle-app .idle-delivery-actions label { min-width: 180px; margin: 0; }
.idle-delivery-actions button { margin: 0; }
.idle-app :is(button:not(.idle-language button):not(.idle-menu-toggle), .btn).idle-delivery-discard { border-color: #c87875; background: #3a2426; color: #ffe5e1; }
.idle-app :is(button:not(.idle-language button):not(.idle-menu-toggle), .btn).idle-delivery-discard:hover { background: #6a3437; color: #fff; }

.idle-auth-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 480px); align-items: center; gap: clamp(32px, 7vw, 110px); width: min(1120px, calc(100% - 40px)); min-height: 100vh; margin: auto; padding: 48px 0; }
.idle-auth-intro .idle-brand { width: fit-content; margin-bottom: 56px; padding-right: 24px; }
.idle-auth-intro h1 { max-width: 620px; color: var(--idle-gold); font: clamp(2.7rem, 6vw, 5rem)/1.02 AqueleOT, Georgia, serif; margin: 0 0 24px; }
.idle-auth-intro p { max-width: 540px; color: var(--idle-muted); font-size: 1.15rem; }
.idle-auth-card { padding: clamp(24px, 4vw, 42px); border: 1px solid #74713d; border-radius: 16px; background: linear-gradient(155deg, #18343b, #0b2029); box-shadow: var(--idle-shadow); }
.idle-auth-card .idle-step { display: inline-block; margin-bottom: 14px; color: var(--idle-green); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.idle-auth-card h1 { margin: 0 0 8px; color: var(--idle-gold); font: 2.25rem/1.12 AqueleOT, Georgia, serif; }
.idle-auth-card p { color: var(--idle-muted); margin: 0 0 24px; }
.idle-auth-form { display: grid; gap: 18px; }
.idle-auth-form label { display: flex; flex-direction: column; width: 100%; }
.idle-auth-form .idle-check { flex-direction: row; align-items: center; }
.idle-auth-form button { width: 100%; }
.idle-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 26px; font-size: .9rem; }
.idle-validation { color: var(--idle-danger); font-size: .85rem; }
.idle-validation:empty { display: none; }

@media (max-width: 1199px) {
  .idle-shell { grid-template-columns: 212px minmax(0, 1fr); }
  .idle-sidebar { padding-inline: 10px; }.idle-menu a { padding-inline: 9px; }
  .idle-app .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .idle-auth-shell { grid-template-columns: 1fr; gap: 26px; width: min(520px, calc(100% - 32px)); min-height: 100vh; padding: 25px 0; }
  .idle-auth-intro .idle-brand { margin-bottom: 16px; }.idle-auth-intro h1 { font-size: 2.25rem; }.idle-auth-intro p { font-size: .94rem; }
  .idle-shell { display: block; }
  .idle-sidebar { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); height: 100dvh; transform: translateX(-105%); transition: transform .2s ease; }
  .idle-shell.is-open .idle-sidebar { transform: translateX(0); }
  .idle-shell.is-open::after { content: ''; position: fixed; inset: 0; z-index: 9; background: rgb(0 0 0 / 65%); }
  .idle-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 44px; }
  .idle-topbar { min-height: 65px; padding: 9px 18px; gap: 12px; }
  .idle-topbar-title { margin-right: auto; }.idle-topbar-title strong { font-size: .91rem; }
  .idle-character-link { display: none; }
  .idle-content { padding-inline: 18px; }
  .idle-prep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .idle-inventory-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .idle-inventory-row form { grid-column: 1 / -1; flex-wrap: wrap; }
  .idle-content main .idle-item-row { grid-template-columns: auto 1fr; }
  .idle-content main .idle-item-row > input, .idle-content main .idle-item-row > button { grid-column: 1 / -1; width: 100%; }
  .idle-supply-row { grid-template-columns: 1fr 1fr; }
  .idle-supply-row strong { grid-column: 1 / -1; }
  .idle-content > main.container { padding-top: 18px; }
  .idle-app .row { grid-template-columns: 1fr; }
  .idle-equipment-grid { gap: 6px; padding: 8px; }
  .idle-equipment-slot { min-height: 176px; padding: 8px 5px; }
  .idle-equipment-slot-name { font-size: .65rem; }
  .idle-equipment-item { font-size: .69rem; }
  #idle-equipment .idle-equipment-slot button { min-height: 40px; padding-inline: 3px; font-size: .65rem; }
  .idle-content main > section { padding: 17px; margin: 14px 0; }
  .idle-content main form > label { display: flex; width: 100%; margin-right: 0; }
  .idle-content main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { width: 100%; }
  .idle-content main form > button { width: 100%; margin-right: 0; }
  .idle-delivery-actions label, .idle-delivery-actions button { width: 100%; }
  .idle-content main table { white-space: nowrap; }
  .idle-topbar { padding-inline: 12px; }.idle-content { padding-inline: 12px; }
  .idle-hero { min-height: 126px; padding: 18px; }.idle-hero::after { display: none; }
}
@media (max-width: 420px) {
  .idle-equipment-grid { gap: 4px; padding: 5px; }
  .idle-equipment-slot { padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Character collections and enhancement workflows */
.idle-page-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin: 12px 0 20px; }
.idle-page-heading h1, .idle-page-heading h2 { margin-bottom: 6px !important; }
.idle-page-heading p { max-width: 68ch; margin: 0 !important; color: var(--idle-muted); }
.idle-page-total { display: grid; justify-items: end; color: var(--idle-muted); font-size: .78rem; }
.idle-page-total strong { color: var(--idle-gold); font-size: 1.5rem; line-height: 1.1; }
.idle-feature-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; margin: 18px 0 24px !important; border: 1px solid var(--idle-border); border-radius: 10px; background: #0d242b; }
.idle-feature-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 7px; color: var(--idle-muted); text-decoration: none; font-weight: 700; }
.idle-feature-tabs a.is-current { color: var(--idle-bg); background: var(--idle-gold); }
.idle-feature-tabs a:not(.is-current):hover { background: var(--idle-panel-raised); }
.idle-subfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.idle-subfilters a { padding: 8px 13px; border: 1px solid var(--idle-border); border-radius: 7px; color: var(--idle-muted); text-decoration: none; }
.idle-subfilters a[aria-current="page"] { border-color: var(--idle-gold); color: var(--idle-gold); background: #2b3024; }
.idle-search-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 16px 0 !important; }
.idle-search-form label { width: 100%; margin: 0 !important; color: var(--idle-muted); font-size: .85rem; }
.idle-search-form input { flex: 1 1 220px; min-width: 0; }
.idle-search-form button { flex: 0 0 auto; }
.idle-empty { padding: 30px 18px; border: 1px dashed var(--idle-border); border-radius: 9px; color: var(--idle-muted); text-align: center; }
.idle-info { padding: 10px 12px; border-left: 3px solid var(--idle-gold); background: #203137; color: var(--idle-muted); }
.idle-creature-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 12px; }
.idle-creature-card { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 15px 10px; border: 1px solid var(--idle-border); border-radius: 10px; background: var(--idle-panel); color: var(--idle-text) !important; text-align: center; text-decoration: none; }
.idle-creature-card:hover, .idle-creature-card.is-selected { border-color: var(--idle-gold); background: var(--idle-panel-raised); }
.idle-creature-card > span:not(.idle-creature-art) { color: var(--idle-muted); font-size: .78rem; }
.idle-creature-card strong { font-size: .95rem; }
.idle-creature-art { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 5px; border-radius: 8px; background: radial-gradient(circle, #33515a 0, #132a32 70%); }
.idle-creature-art .idle-sprite { transform: scale(1.8); image-rendering: pixelated; }
.idle-creature-card progress { width: 100%; height: 8px; accent-color: var(--idle-gold); }
.idle-creature-detail { display: flex; gap: 18px; align-items: center; margin-top: 18px !important; }
.idle-creature-detail > .idle-sprite { flex: none; transform: scale(1.7); margin: 24px; }
.idle-creature-detail h2 { margin: 0 0 5px !important; }
.idle-creature-detail p { margin: 4px 0 !important; }
.idle-creature-detail > div { min-width: 0; }
.idle-bestiary-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.idle-bestiary-filters a { padding: 9px 12px; border: 1px solid var(--idle-border); border-radius: 8px; color: var(--idle-text); text-decoration: none; }
.idle-bestiary-filters a[aria-current='page'] { border-color: var(--idle-gold); background: #30443e; color: var(--idle-gold); }
.idle-bestiary-filters small { margin-left: 5px; color: var(--idle-muted); }
.idle-bestiary-hunts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.idle-bestiary-hunts a { display: grid; gap: 2px; padding: 7px 10px; border: 1px solid var(--idle-border); border-radius: 7px; text-decoration: none; }
.idle-bestiary-hunts small { color: var(--idle-muted); }
.idle-boss-page-link { margin: 0 0 18px; }
.idle-boss-feature { scroll-margin-top: 150px; }
.idle-content main > section.idle-boss-feature { margin: 0 0 28px; padding: clamp(18px, 2.5vw, 30px); border: 1px solid #7c7040; border-radius: 15px; background: radial-gradient(circle at 6% 5%, rgb(124 100 37 / 22%), transparent 35%), linear-gradient(135deg, #142e35, #0c222a 68%); box-shadow: var(--idle-shadow); }
.idle-boss-feature-top { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(18px, 2.5vw, 30px); align-items: center; }
.idle-boss-portrait { position: relative; display: grid; place-items: center; min-height: 190px; overflow: hidden; border: 1px solid #806f38; border-radius: 12px; background: radial-gradient(circle, #47615a 0, #213d3f 38%, #0b1d25 78%); }
.idle-boss-portrait::before { content: ''; position: absolute; width: 140px; height: 140px; border: 1px solid rgb(241 210 27 / 26%); border-radius: 50%; box-shadow: 0 0 36px rgb(241 210 27 / 12%); }
.idle-boss-portrait .idle-sprite { position: relative; margin: 0; transform: scale(4); image-rendering: pixelated; }
.idle-boss-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.idle-boss-tags span { padding: 4px 9px; border: 1px solid #68736a; border-radius: 999px; color: #e6e8cc; font-size: .73rem; font-weight: 750; }
.idle-boss-tags .is-ready { border-color: #628c5b; color: #baf2a2; }.idle-boss-tags .is-waiting { border-color: #997343; color: #ffe0a4; }
.idle-content main .idle-boss-intro h2 { margin: 0 0 8px !important; color: var(--idle-gold); font-family: AqueleOT, Georgia, serif; font-size: clamp(2rem, 3vw, 3.2rem); }
.idle-boss-description { max-width: 70ch; margin: 0 0 18px !important; color: #d9e2dc; font-size: 1rem; line-height: 1.55; }
.idle-boss-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.idle-boss-facts > div { min-width: 0; padding: 10px 12px; border: 1px solid #43636a; border-radius: 8px; background: rgb(5 24 30 / 58%); }
.idle-boss-facts small { display: block; color: var(--idle-muted); font-size: .71rem; }.idle-boss-facts strong { display: block; color: #fff4be; font-size: 1.08rem; }
.idle-boss-intelligence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.idle-boss-intelligence-card { min-width: 0; padding: 15px; border: 1px solid #3a5960; border-radius: 9px; background: rgb(7 27 34 / 62%); }
.idle-content main .idle-boss-intelligence-card h3 { margin: 0 0 8px !important; color: #f7dfa0; font-size: 1.05rem; }.idle-boss-intelligence-card p { margin: 0 0 8px !important; color: var(--idle-muted); font-size: .83rem; }.idle-boss-intelligence-card p strong { color: #f2e5b6; }.idle-boss-intelligence-card > small { display: block; margin-top: 10px; color: var(--idle-muted); }
.idle-boss-chips { display: flex; flex-wrap: wrap; gap: 6px; }.idle-boss-chips span { padding: 5px 8px; border-radius: 6px; background: #294146; color: #f0f6eb; font-size: .76rem; }
.idle-boss-loot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.idle-boss-loot > span { display: flex; align-items: center; gap: 5px; min-width: 0; color: #e2ece5; font-size: .76rem; }.idle-boss-loot .idle-sprite { margin: 0; }
.idle-boss-preparation { margin-top: 18px; padding-top: 18px; border-top: 1px solid #51666a; }.idle-boss-preparation h3 { margin: 0 0 10px !important; }.idle-boss-preparation fieldset { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid #4b6468; border-radius: 8px; }.idle-boss-preparation legend { padding: 0 5px; color: #f2e3ae; font-weight: 750; }.idle-boss-preparation label { flex: 1 1 180px; margin: 0 !important; }.idle-boss-preparation input[type="number"] { max-width: 160px; }
.idle-boss-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }.idle-boss-section-heading h2 { margin: 0 !important; }.idle-boss-section-heading p { margin: 0 !important; color: var(--idle-muted); font-size: .86rem; }
.idle-boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
.idle-boss-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border: 1px solid #3e5b60; border-radius: 10px; background: #0d2730; color: var(--idle-text) !important; text-decoration: none; }
.idle-boss-card:hover, .idle-boss-card.is-selected { border-color: var(--idle-gold); background: #19373d; }.idle-boss-card.is-selected { box-shadow: inset 3px 0 var(--idle-gold); }
.idle-boss-card-art { display: grid; flex: 0 0 72px; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1px solid #48616a; border-radius: 8px; background: radial-gradient(circle, #365553, #10252e 72%); }.idle-boss-card-art .idle-sprite { margin: 0; transform: scale(1.8); }
.idle-boss-card-copy { display: grid; gap: 4px; min-width: 0; }.idle-boss-card-copy strong { line-height: 1.18; }.idle-boss-card-copy small { color: var(--idle-muted); font-size: .74rem; line-height: 1.25; }
.idle-bosstiary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.idle-bosstiary-card { min-width: 0; padding: 17px; border: 1px solid #425e63; border-radius: 11px; background: #102a32; }.idle-bosstiary-card-top { display: flex; align-items: center; gap: 14px; }.idle-content main .idle-bosstiary-card-top h2 { margin: 2px 0 0 !important; font-size: 1.28rem; }.idle-bosstiary-card-top small { color: var(--idle-muted); }.idle-bosstiary-card > p { margin: 12px 0 !important; color: #d3dfd8; font-size: .84rem; }.idle-bosstiary-counts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--idle-muted); font-size: .82rem; }.idle-bosstiary-counts strong { color: #f8e7a0; }.idle-bosstiary-card progress { width: 100%; margin: 11px 0 4px; }.idle-bosstiary-card > small { display: block; color: var(--idle-muted); }.idle-bosstiary-card > a { display: inline-block; margin-top: 12px; }
@media (max-width: 900px) { .idle-boss-intelligence { grid-template-columns: 1fr 1fr; }.idle-bosstiary-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .idle-boss-feature-top { grid-template-columns: 1fr; }.idle-boss-portrait { min-height: 145px; }.idle-boss-portrait .idle-sprite { transform: scale(3.2); }.idle-boss-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }.idle-boss-intelligence { grid-template-columns: 1fr; }.idle-boss-grid { grid-template-columns: 1fr; } }
.idle-enhancement-section { margin-top: 12px !important; }
.idle-charm-layout, .idle-enhancement-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: 18px; align-items: start; }
.idle-charm-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.idle-charm-card, .idle-item-result { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px; border: 1px solid var(--idle-border); border-radius: 8px; background: #0d2830; color: var(--idle-text) !important; text-decoration: none; }
.idle-charm-card:hover, .idle-item-result:hover, .idle-charm-card.is-selected, .idle-item-result.is-selected { border-color: var(--idle-gold); background: #244047; }
.idle-charm-card img { flex: none; object-fit: contain; image-rendering: pixelated; }
.idle-charm-card span:not(.idle-charm-assigned), .idle-item-result span:not(.idle-sprite) { display: grid; min-width: 0; }
.idle-charm-card strong, .idle-item-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idle-charm-card small, .idle-item-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.idle-charm-assigned { margin-left: auto; color: var(--idle-green); }
.idle-charm-detail, .idle-item-picker, .idle-item-detail { min-width: 0; padding: 16px; border: 1px solid var(--idle-border); border-radius: 10px; background: #0d242c; }
.idle-charm-detail { position: sticky; top: 96px; }
.idle-charm-detail-heading, .idle-selected-item { display: flex; align-items: center; gap: 14px; }
.idle-charm-detail-heading img { flex: none; image-rendering: pixelated; }
.idle-charm-detail-heading h3, .idle-selected-item h3 { margin: 0 !important; }
.idle-tier-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.idle-tier-track > div { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--idle-border); border-radius: 6px; opacity: .75; font-size: .75rem; }
.idle-tier-track > div.is-owned { border-color: var(--idle-gold); opacity: 1; }
.idle-tier-track small { font-size: .7rem; }
.idle-assignment { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 12px 0; border-radius: 7px; background: #203c42; }
.idle-creature-choices, .idle-prey-candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.idle-creature-choices label, .idle-prey-candidates label { display: grid; justify-items: center; align-items: center; gap: 5px; min-width: 0; padding: 8px 3px; border: 1px solid var(--idle-border); border-radius: 7px; background: #132d35; text-align: center; font-size: .74rem; cursor: pointer; }
.idle-prey-candidates label { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px auto auto; align-content: start; padding: 8px 6px; }
.idle-prey-candidates label input { position: absolute; top: 8px; left: 8px; }
.idle-prey-candidates label > .idle-sprite { grid-row: 1; justify-self: center; margin: 0; }
.idle-prey-candidates label > span:not(.idle-sprite), .idle-prey-candidates label > small { display: block; width: 100%; min-width: 0; overflow-wrap: normal; white-space: normal; line-height: 1.25; }
.idle-prey-candidates label > small { color: var(--idle-muted); }
.idle-prey-balance { display: flex; flex-wrap: wrap; gap: 8px; }
.idle-creature-choices label:has(input:checked), .idle-prey-candidates label:has(input:checked) { border-color: var(--idle-gold); background: #2c3d37; }
.idle-creature-choices input, .idle-prey-candidates input { justify-self: start; }
.idle-prey-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.idle-prey-slot { min-width: 0; padding: 16px; border: 1px solid var(--idle-border); border-radius: 10px; background: #102a31; }
.idle-prey-slot header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--idle-border); }
.idle-prey-slot header .idle-step { margin: 0 !important; }.idle-prey-slot h3 { flex: 1; margin: 0 !important; }.idle-status { color: var(--idle-green); font-size: .76rem; }
.idle-prey-slot fieldset, .idle-charm-detail fieldset { min-width: 0; margin: 10px 0; padding: 0; border: 0; }
.idle-prey-slot legend, .idle-charm-detail legend { font-size: .82rem; color: var(--idle-muted); }
.idle-prey-slot form { margin: 10px 0 !important; }
.idle-prey-slot form button { width: 100%; }
.idle-prey-active { display: flex; gap: 13px; align-items: center; min-height: 130px; }.idle-prey-active > span { flex: none; margin: 10px; transform: scale(1.4); }
.idle-prey-active > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }.idle-prey-active > div span { color: var(--idle-muted); font-size: .8rem; overflow-wrap: anywhere; }
.idle-prey-slot button { white-space: normal; overflow-wrap: anywhere; }
.idle-prey-rerolls { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--idle-border); }
.idle-prey-rerolls form { margin: 0 !important; }
.idle-workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 24px; }
.idle-app .idle-workflow-steps button { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 52px; padding: 9px 11px; border: 1px solid var(--idle-border); border-radius: 9px; background: #122b32; color: var(--idle-muted); text-align: left; font-size: .8rem; font-weight: 700; }
.idle-workflow-steps button span { display: grid; flex: none; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; font-size: .76rem; }
.idle-app .idle-workflow-steps button.is-current { border-color: var(--idle-gold); background: #293b37; color: var(--idle-gold); box-shadow: inset 0 0 0 1px #d4b73b55; }
.idle-app .idle-workflow-steps button.is-complete { border-color: #527766; color: var(--idle-green); }
.idle-app .idle-workflow-steps button:disabled { opacity: .62; cursor: default; }
.idle-hunt-flow.is-enhanced [data-hunt-stage][hidden] { display: none !important; }
.idle-hunt-flow form { margin: 0; }
.idle-hunt-stage { min-width: 0; }
.idle-hunt-stage > h3:first-child { margin: 0 0 12px; color: #fff1ad; }
.idle-hunt-stage-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--idle-border); }
.idle-hunt-stage-actions button:last-child { margin-left: auto; }
.idle-spell-choices { display: grid; gap: 10px; }
.idle-spell-mode { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--idle-border); border-radius: 8px; background: #17353c; cursor: pointer; }
.idle-spell-mode input { grid-row: span 2; }
.idle-spell-mode small { color: var(--idle-muted); }
.idle-spell-list { display: none; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; padding: 12px; border: 1px solid var(--idle-border); border-radius: 8px; }
.idle-spell-choices:has(input[name="spellMode"][value="custom"]:checked) .idle-spell-list { display: grid; }
.idle-spell-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid var(--idle-border); border-radius: 7px; background: #122b32; cursor: pointer; }
.idle-spell-bulk { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.idle-spell-bulk button { padding: 7px 12px; border: 1px solid var(--idle-border); border-radius: 7px; background: #17353c; color: var(--idle-text); }
.idle-spell-bulk button:hover { border-color: var(--idle-gold); }
.idle-spell-option .idle-spell-icon { flex: 0 0 32px; width: 32px; height: 32px; margin: 2px; border-radius: 2px; background-image: url('/idle-assets/spells/spell-icons-32x32.png'); background-repeat: no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 2px #4a666d; }
.idle-spell-option .idle-spell-copy { display: grid; gap: 3px; }
.idle-spell-option .idle-spell-cast { color: var(--idle-gold); font-size: .86rem; font-weight: 600; }
.idle-spell-option small { color: var(--idle-muted); }
.idle-spell-list > p { grid-column: 1 / -1; }
@media (max-width: 680px) { .idle-app .idle-workflow-steps button { flex-direction: column; align-items: flex-start; min-height: 68px; font-size: .73rem; } }
.idle-item-results { display: grid; gap: 6px; max-height: 500px; overflow-y: auto; }
.idle-item-picker > p { color: var(--idle-muted); font-size: .8rem; }
.idle-selected-item { padding: 12px; margin-bottom: 12px; border: 1px solid var(--idle-border); border-radius: 8px; background: #17353c; }
.idle-selected-item > .idle-sprite { flex: none; margin: 7px; transform: scale(1.3); }.idle-selected-item p { margin: 2px 0 !important; color: var(--idle-muted); font-size: .8rem; }
.idle-imbuement-slot { padding: 12px 0; border-top: 1px solid var(--idle-border); }.idle-imbuement-slot h4 { margin: 0 0 6px; color: var(--idle-gold); }
.idle-imbuement-slot form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }.idle-imbuement-slot form label { min-width: 150px; flex: 1; }
.idle-imbuement-selected-effect { flex-basis: 100%; margin: 0 !important; padding: 9px 11px; border-left: 3px solid var(--idle-gold); background: #19343a; color: var(--idle-text); font-size: .82rem; }
.idle-forge-resources { margin-top: 16px; padding: 15px; border: 1px solid var(--idle-border); border-radius: 8px; }.idle-resource-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.idle-market-results { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
.idle-market-search > form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }.idle-market-search > form label { width: 100%; }
.idle-market-search > form input { flex: 1 1 240px; }
.idle-tier-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }.idle-tier-filter label { width: 110px; }
.idle-app button:disabled { opacity: .5; cursor: not-allowed; }
.idle-app .idle-button-danger { border-color: #a45c5b !important; color: #ffe1dc !important; background: #43272b !important; }
@media (max-width: 1100px) { .idle-prey-slots { grid-template-columns: 1fr; }.idle-charm-layout, .idle-enhancement-workspace { grid-template-columns: 1fr; }.idle-charm-detail { position: static; } }
@media (max-width: 600px) { .idle-charm-catalog, .idle-market-results { grid-template-columns: 1fr; }.idle-creature-album { grid-template-columns: repeat(2, minmax(0, 1fr)); }.idle-page-total { justify-items: start; }.idle-prey-candidates { grid-template-columns: repeat(3, minmax(0, 1fr)); }.idle-tier-track { grid-template-columns: 1fr 1fr 1fr; }.idle-feature-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.idle-search-form button { width: 100%; } }
@media (max-width: 390px) { .idle-creature-album { grid-template-columns: 1fr 1fr; }.idle-prey-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Outfit and mount editor */
.idle-appearance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 370px); gap: 18px; align-items: start; }
.idle-appearance-catalog, .idle-appearance-editor { min-width: 0; padding: 16px; border: 1px solid var(--idle-border); border-radius: 10px; background: #10272e; }
.idle-appearance-catalog > p { color: var(--idle-muted); font-size: .82rem; }
.idle-appearance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.idle-app .idle-appearance-option { display: grid !important; justify-items: center; gap: 3px; min-width: 0; min-height: 148px; padding: 10px !important; border: 1px solid var(--idle-border) !important; border-radius: 8px; background: #15343c !important; color: var(--idle-text) !important; text-align: center; }
.idle-app .idle-appearance-option.is-selected { border-color: var(--idle-gold) !important; box-shadow: inset 0 0 0 1px var(--idle-gold); }
.idle-app .idle-appearance-option:disabled { opacity: .82; cursor: not-allowed; }
.idle-appearance-option img { display: block; width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }
.idle-appearance-option strong { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .83rem; }
.idle-appearance-option small { font-size: .7rem; }
.idle-appearance-none { display: grid; place-items: center; width: 76px; height: 76px; font-size: 2rem; }
.idle-appearance-editor { position: sticky; top: 96px; }
.idle-appearance-preview { display: grid; justify-items: center; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--idle-border); }
.idle-appearance-preview-stage { display: grid; place-items: center; width: 220px; height: 168px; overflow: hidden; border: 1px solid var(--idle-border); border-radius: 9px; background: radial-gradient(circle, #315059, #122c35 75%); }
.idle-appearance-preview-stage img { display: block; width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.idle-appearance-preview > strong { font-size: 1.05rem; }.idle-appearance-preview > span:last-child { color: var(--idle-muted); font-size: .82rem; }
.idle-appearance-editor fieldset { min-width: 0; margin: 14px 0; padding: 0; border: 0; }.idle-appearance-editor legend { padding: 0; color: var(--idle-gold); font-weight: 700; }
.idle-appearance-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.idle-app .idle-appearance-parts button { min-width: 0; padding: 6px 3px !important; border-color: var(--idle-border) !important; background: #1a3b43 !important; color: var(--idle-text) !important; font-size: .72rem; }
.idle-app .idle-appearance-parts button.is-selected { border-color: var(--idle-gold) !important; color: var(--idle-gold) !important; }
.idle-color-palette { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 3px; }
.idle-app .idle-color-palette button { display: block; min-width: 0; width: 100%; min-height: 21px; padding: 0 !important; border: 1px solid #4c5960 !important; border-radius: 3px; }
.idle-app .idle-color-palette button.is-selected { outline: 2px solid var(--idle-gold); outline-offset: 1px; }
.idle-appearance-addons { display: flex; flex-wrap: wrap; gap: 12px; }.idle-appearance-addons legend { width: 100%; }.idle-appearance-addons label { margin: 0 !important; }
.idle-appearance-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 12px; border-top: 1px solid var(--idle-border); }
.idle-appearance-actions a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1040px) { .idle-appearance-layout { grid-template-columns: 1fr; }.idle-appearance-editor { position: static; } }
@media (max-width: 480px), (pointer: coarse) { .idle-color-palette { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }.idle-app .idle-color-palette button { min-height: 35px; } }
.idle-outfit-link { display: flex; align-items: center; gap: 16px; width: min(100%, 560px); padding: 12px; margin: 18px 0; border: 1px solid var(--idle-border); border-radius: 10px; background: #17343c; color: var(--idle-text) !important; text-decoration: none; }
.idle-outfit-link:hover { border-color: var(--idle-gold); }.idle-outfit-link > span:last-child { margin-left: auto; color: var(--idle-gold); font-size: 1.4rem; }
.idle-outfit-link strong, .idle-outfit-link small { display: block; }.idle-outfit-link small { color: var(--idle-muted); }
.idle-outfit-art { display: grid; place-items: center; flex: none; width: 98px; height: 98px; border-radius: 7px; background: radial-gradient(circle, #31515a, #112932); }
.idle-outfit-art img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }

/* Training, skills and Store */
.idle-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; margin-bottom: 25px; }
.idle-skill-grid > div, .idle-buff-grid > div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--idle-border); border-radius: 8px; background: #132d35; }
.idle-skill-grid strong { color: var(--idle-gold); font-size: 1.3rem; }.idle-skill-grid small { color: var(--idle-muted); }
.idle-buff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }.idle-buff-grid span, .idle-buff-grid small { color: var(--idle-muted); font-size: .8rem; }
.idle-training-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; }
.idle-training-skills label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 !important; padding: 12px; border: 1px solid var(--idle-border); border-radius: 8px; background: #142f36; cursor: pointer; }
.idle-training-skills label:has(input:checked) { border-color: var(--idle-gold); background: #293b36; }.idle-training-skills strong { color: var(--idle-gold); font-size: 1.2rem; }
.idle-training-form fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }.idle-training-form legend { margin-bottom: 10px; color: var(--idle-gold); font-weight: 700; }
.idle-training-duration { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }.idle-training-duration label { display: grid; gap: 4px; min-width: 160px; }.idle-training-duration p { color: var(--idle-muted); }
.idle-training-active progress { display: block; width: min(100%, 500px); height: 12px; margin: 13px 0; accent-color: var(--idle-gold); }
.idle-training-estimate { margin: 0 0 16px; padding: 13px 15px; border: 1px solid var(--idle-border); border-radius: 9px; background: #102a32; }
.idle-training-estimate strong { color: var(--idle-gold); }
.idle-training-estimate p { margin: 5px 0 !important; font-size: 1rem; }
.idle-training-estimate p[hidden] { display: none; }
.idle-training-estimate small { color: var(--idle-muted); }
.idle-training-total { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 12px 0 !important; }
.idle-training-total strong { color: var(--idle-gold); font-size: 1.25rem; }
.idle-training-live-link { display: inline-flex; margin: 0 10px 12px 0; }
.idle-training-confirm { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--idle-gold); border-radius: 12px; background: #102a31; color: var(--idle-text); box-shadow: 0 24px 60px #000b; }
.idle-training-confirm::backdrop { background: #020a0dcc; }
.idle-training-confirm h3 { margin: 0 0 12px; color: var(--idle-gold); }
.idle-training-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.idle-site-confirm { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--idle-gold); border-radius: 12px; background: #102a31; color: var(--idle-text); box-shadow: 0 24px 60px #000b; }
.idle-site-confirm::backdrop { background: #020a0dcc; }
.idle-site-confirm h3 { margin: 0 0 12px; color: var(--idle-gold); }
.idle-site-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.idle-store-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.idle-store-offer { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid var(--idle-border); border-radius: 9px; background: #112e36; }
.idle-store-offer > img { image-rendering: pixelated; object-fit: contain; }.idle-store-offer h3 { margin: 0 0 4px !important; }.idle-store-offer p { color: var(--idle-muted); font-size: .82rem; }.idle-store-offer strong { color: var(--idle-gold); }.idle-store-offer small { margin-left: 8px; }
.idle-store-offer form { grid-column: 1 / -1; margin: 0 !important; }.idle-store-offer form button { width: 100%; }
.idle-store .idle-subfilters a { display: inline-flex; align-items: center; gap: 6px; }.idle-store .idle-subfilters img { object-fit: contain; image-rendering: pixelated; }
.idle-history-pages { display: flex; gap: 15px; margin-top: 12px; }
.idle-appearance-entry { min-width: 0; }.idle-appearance-entry > .idle-appearance-option { width: 100%; }
.idle-appearance-entry > form { margin: 5px 0 0 !important; }.idle-appearance-entry > form button { width: 100%; }
.idle-imbuement-recipes { margin-top: 10px; padding: 9px; border: 1px solid var(--idle-border); border-radius: 7px; }
.idle-imbuement-recipes > article { padding: 9px 0; border-top: 1px solid var(--idle-border); }.idle-imbuement-recipes h5 { margin: 0 0 5px; color: var(--idle-gold); }
.idle-imbuement-recipe { display: grid; gap: 4px; padding: 7px; background: #143039; }.idle-imbuement-recipe > span { color: var(--idle-muted); font-size: .8rem; }
.idle-imbuement-recipe ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }.idle-imbuement-recipe li { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; }
.idle-market-owned { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 10px 0; padding: 9px; border: 1px solid var(--idle-border); border-radius: 7px; }
.idle-market-owned legend { color: var(--idle-gold); font-size: .86rem; }.idle-market-owned label { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--idle-border); border-radius: 5px; cursor: pointer; }
.idle-market-owned label:has(input:checked) { border-color: var(--idle-gold); background: #293b36; }.idle-market-owned [hidden] { display: none; }
.idle-hunt-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 12px 0 18px; }
.idle-hunt-card { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 66px; padding: 10px; border: 1px solid var(--idle-border); border-radius: 8px; background: #153139; color: var(--idle-text) !important; text-decoration: none; }
.idle-hunt-card:hover, .idle-hunt-card.is-selected { border-color: var(--idle-gold); background: #293d3b; }.idle-hunt-card > .idle-sprite { flex: none; }
.idle-hunt-card > span:not(.idle-sprite) { display: grid; min-width: 0; }.idle-hunt-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.idle-hunt-card small { color: var(--idle-muted); font-size: .76rem; }
.idle-hunt-card em { align-self: start; margin-left: auto; color: var(--idle-gold); font-size: .7rem; font-style: normal; }
@media (max-width: 600px) { .idle-buff-grid, .idle-store-offers { grid-template-columns: 1fr; }.idle-training-skills { grid-template-columns: 1fr 1fr; }.idle-training-skills label { grid-template-columns: 1fr auto; }.idle-training-skills label input { grid-column: 1 / -1; } }
@media (max-width: 600px) { .idle-creature-detail { align-items: flex-start; }.idle-creature-detail > .idle-sprite { margin: 18px 10px; }.idle-bestiary-filters a { flex: 1 1 auto; text-align: center; } }

/* Ephemeral chat and account VIP list */
/* Social uses the same deep teal, gold and green visual language as the game. */
.idle-social[hidden], .idle-social [hidden] { display: none !important; }
.idle-social { position: fixed; z-index: 55; right: 16px; bottom: 16px; color: var(--idle-text); font: 13px/1.4 system-ui, sans-serif; }
.idle-social-dock { display: grid; justify-items: end; gap: 8px; width: min(370px, calc(100vw - 24px)); }
.idle-social-chat { display: flex; flex-direction: column; width: 100%; height: min(540px, calc(100dvh - 110px)); overflow: hidden; border: 1px solid #608075; border-top: 3px solid var(--idle-gold); border-radius: 14px; background: linear-gradient(155deg, #15333a, #0b2028 72%); box-shadow: 0 22px 55px #0009; }
.idle-social-chat-head { display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 8px 10px; border-bottom: 1px solid #35545a; }
.idle-social-mark { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid #a89434; border-radius: 9px; background: #293d36; color: var(--idle-gold); font-size: 18px; }
.idle-social-chat-title { display: grid; gap: 0; margin-right: auto; line-height: 1.1; }
.idle-social-chat-title small, .idle-social-vip-head small { color: var(--idle-green); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.idle-social-chat-title strong { color: #fff2bd; font: 700 16px/1.15 Georgia, serif; }
.idle-social-connection { display: inline-flex; align-items: center; gap: 5px; color: var(--idle-muted); font-size: 10px; white-space: nowrap; }
.idle-social-connection::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8c9c99; }
.idle-social-connection.is-online::before { background: var(--idle-green); box-shadow: 0 0 7px #9af56199; }
.idle-app .idle-social-icon { flex: none; min-width: 28px; width: 28px; height: 28px; min-height: 28px; padding: 0 !important; border: 1px solid #587278 !important; border-radius: 7px !important; background: #142c32 !important; color: var(--idle-text) !important; font-size: 17px; line-height: 1; }
.idle-app .idle-social-vip-shortcut { width: 34px; font-size: 10px; letter-spacing: .04em; }
.idle-app .idle-social-icon:hover { border-color: var(--idle-gold) !important; background: #294045 !important; }
.idle-social-tabs { display: flex; gap: 4px; padding: 7px 10px; border-bottom: 1px solid #2d4a50; }
.idle-app .idle-social-tabs button { min-height: 29px; padding: 4px 12px !important; border: 1px solid transparent !important; border-radius: 999px !important; background: transparent !important; color: var(--idle-muted) !important; font-size: 11px; font-weight: 700; }
.idle-app .idle-social-tabs button[aria-selected='true'] { border-color: #927f30 !important; background: #344235 !important; color: #ffec9d !important; }
.idle-social-tabs span, .idle-social-badge { display: inline-block; min-width: 17px; padding: 0 4px; border-radius: 999px; background: var(--idle-gold); color: #102327; font-size: 10px; text-align: center; }
.idle-social-private-target { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-bottom: 1px solid #2d4a50; }
.idle-social-private-target label { min-width: auto; color: var(--idle-muted); font-size: 11px; white-space: nowrap; }
.idle-app .idle-social-private-target select { width: 100%; min-height: 29px; padding: 3px 7px; border-color: #557278; border-radius: 6px; background: #081c22; color: var(--idle-text); font-size: 11px; }
.idle-social-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 9px 12px; scrollbar-color: #59766c #0b2228; }
.idle-social-message { margin: 0 0 6px; overflow-wrap: anywhere; line-height: 1.45; }
.idle-social-message time { color: #9cb1ad; font-size: 10px; font-variant-numeric: tabular-nums; }
.idle-social-message strong { color: var(--idle-green); font-weight: 800; }
.idle-social-message.is-own strong { color: #ffe07a; }
.idle-social-message.is-private strong { color: #b7d9dc; }
.idle-social-empty { margin: 20px 8px; color: #aabfbb; font-size: 11px; text-align: center; }
.idle-social-feedback, .idle-social-vip-feedback { margin: 0; padding: 6px 10px; border-left: 3px solid var(--idle-warning); background: #352b22; color: #ffe0b5; font-size: 11px; }
.idle-social-composer { display: flex; flex: none; gap: 6px; padding: 9px; border-top: 1px solid #3d5d5d; background: #0d252c; }
.idle-app .idle-social-composer input { flex: 1; width: 100%; height: 35px; min-height: 35px; padding: 5px 8px; border-color: #567479; border-radius: 7px; background: #071a20; color: var(--idle-text); font-size: 11px; }
.idle-app .idle-social-composer button, .idle-app .idle-social-vip-add button { min-height: 35px !important; padding: 5px 11px !important; border: 1px solid #d3b917 !important; border-radius: 7px !important; background: var(--idle-gold) !important; color: #102327 !important; font-size: 11px; font-weight: 800; }
.idle-app .idle-social-composer button:hover, .idle-app .idle-social-vip-add button:hover { background: #ffe76a !important; }
.idle-social-launchers { display: flex; justify-content: flex-end; gap: 7px; }
.idle-app .idle-social-launchers button { min-height: 39px !important; padding: 7px 12px !important; border: 1px solid #657f6f !important; border-radius: 9px !important; background: #163039 !important; color: #fff2bd !important; box-shadow: 0 7px 22px #0008; font-size: 11px; }
.idle-app .idle-social-launchers button:hover { border-color: var(--idle-gold) !important; background: #27443e !important; }
.idle-social-launchers button > span:first-child { color: var(--idle-green); }
.idle-social-online-count { color: var(--idle-green); }
.idle-app:has(.idle-live-stage) .idle-social:not(.is-vip-open) { left: auto; right: 16px; }
.idle-social.is-vip-open { inset: 0; width: 100%; height: 100dvh; z-index: 100; }
.idle-social.is-vip-open .idle-social-dock { visibility: hidden; }
.idle-social-vip-backdrop { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: flex-end; background: #02090ccc; }
.idle-social-vip { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(430px, 100vw); height: 100%; overflow: hidden; border-left: 1px solid #a78f2e; background: radial-gradient(circle at 100% 0, #244646, transparent 42%), linear-gradient(160deg, #112b32, #081b23); box-shadow: -22px 0 55px #0009; }
.idle-social-vip-head { display: flex; align-items: flex-start; gap: 14px; padding: 26px 24px 20px; border-bottom: 1px solid #46605b; }
.idle-social-vip-head > div { flex: 1; }
.idle-social-vip-head h2 { margin: 5px 0 0; color: #ffe385; font: 700 26px/1.1 Georgia, serif; }
.idle-social-vip-body { min-height: 0; overflow: auto; padding: 22px 24px; }
.idle-social-vip-body > p:first-child { margin: 0 0 24px; color: var(--idle-muted); font-size: 13px; }
.idle-social-vip-add { display: grid; gap: 8px; }
.idle-social-vip-add label { min-width: 0; color: #d9e5dd; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.idle-social-vip-add-row { display: flex; gap: 7px; }
.idle-app .idle-social-vip-add input { flex: 1; min-width: 0; min-height: 39px; padding: 7px 9px; border-color: #5c797a; border-radius: 7px; background: #071a20; color: var(--idle-text); font-size: 12px; }
.idle-social-search-results { margin: 5px 76px 8px 0; overflow: hidden; border: 1px solid #58706d; border-radius: 8px; background: #173138; }
.idle-app .idle-social-search-results button { display: block; width: 100%; min-height: 35px; padding: 6px 10px !important; border: 0 !important; border-bottom: 1px solid #3d5856 !important; border-radius: 0 !important; background: transparent !important; color: var(--idle-text) !important; text-align: left; font-size: 12px; }
.idle-app .idle-social-search-results button:hover { background: #2a4946 !important; }
.idle-social-vip-feedback { margin-top: 8px; }
.idle-social-vip-list { display: grid; align-content: start; gap: 8px; margin-top: 22px; }
.idle-social-vip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 56px; padding: 10px; border: 1px solid #3e5a58; border-radius: 9px; background: #143039; }
.idle-social-vip-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #718984; }
.idle-social-vip-dot.is-online { background: var(--idle-green); box-shadow: 0 0 8px #9af56188; }
.idle-social-vip-row strong { flex: 1; min-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.idle-social-vip-row small { color: var(--idle-muted); font-size: 11px; }
.idle-app .idle-social-vip-row button { min-height: 29px !important; padding: 5px 8px !important; border: 1px solid #8d7f3d !important; border-radius: 6px !important; background: #2d403a !important; color: #fff1b4 !important; font-size: 10px; }
.idle-app .idle-social-vip-row button:last-child { border-color: #71645d !important; background: #2d2928 !important; color: #e5c9b8 !important; }
.idle-social-vip-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 22px; border: 1px dashed #54726b; border-radius: 12px; background: #10262d; text-align: center; }
.idle-social-vip-empty > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border: 1px solid #8c813a; border-radius: 50%; color: var(--idle-gold); font-size: 22px; }
.idle-social-vip-empty strong { color: #ffe6a2; font: 700 16px Georgia, serif; }
.idle-social-vip-empty p { max-width: 270px; margin: 0; color: var(--idle-muted); font-size: 12px; }
.idle-social-vip-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #46605b; color: #d2e3d7; font-size: 11px; }
.idle-social-vip-foot-note { color: var(--idle-green); }
@media (max-width: 720px) { .idle-social, .idle-app:has(.idle-live-stage) .idle-social:not(.is-vip-open) { left: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .idle-social-chat { height: min(390px, calc(100dvh - 90px)); } .idle-app .idle-social-launchers button { min-height: 44px !important; } .idle-social-vip { width: min(430px, 100vw); } }
@media (max-width: 390px) { .idle-social-dock { width: calc(100vw - 24px); } .idle-social-vip-head { padding: 20px 16px; } .idle-social-vip-body { padding: 18px 16px; } .idle-social-vip-foot { padding-inline: 16px; } .idle-social-vip-row small { display: none; } }

/* Hunt discovery and the focused mobile conversation view. */
.idle-hero-action { display: inline-flex; align-items: center; margin-top: 16px; }
.idle-character-switch { position: relative; max-width: 230px; }
.idle-character-switch summary { max-width: 230px; overflow: hidden; padding: 8px 11px; border: 1px solid var(--idle-border); border-radius: 8px; color: var(--idle-gold); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
.idle-character-switch summary small { margin-left: 5px; color: var(--idle-muted); }
.idle-character-switch nav { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; min-width: 215px; padding: 6px; border: 1px solid #7a784c; border-radius: 9px; background: #102a32; box-shadow: var(--idle-shadow); }
.idle-character-switch nav a { display: flex; justify-content: space-between; gap: 12px; padding: 9px; border-radius: 5px; color: var(--idle-text); text-decoration: none; white-space: nowrap; }
.idle-character-switch nav a:hover, .idle-character-switch nav a[aria-current='page'] { background: #30443e; color: var(--idle-gold); }
.idle-character-tools { margin-top: 30px !important; }
.idle-report-details summary { color: var(--idle-gold); cursor: pointer; font-weight: 700; }
.idle-report-details summary small { margin-left: 9px; color: var(--idle-muted); font-weight: 400; }
.idle-hunt-picker { margin: 17px 0 22px; }
.idle-hunt-picker-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.idle-hunt-picker-heading strong { color: #fff1ad; font-size: 1rem; }
.idle-hunt-picker-heading p { margin: 3px 0 0 !important; color: var(--idle-muted); font-size: .82rem; }
.idle-hunt-picker-heading > small { flex: none; padding: 5px 9px; border-radius: 99px; background: #30443e; color: var(--idle-green) !important; }
.idle-hunt-picker .idle-hunt-catalog { margin: 12px 0; }
.idle-hunt-all { border-top: 1px solid var(--idle-border); padding-top: 10px; }
.idle-hunt-all summary { width: fit-content; color: var(--idle-gold); cursor: pointer; font-weight: 700; }
.idle-hunt-all summary small { color: var(--idle-muted); font-weight: 400; }
.idle-hunt-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.idle-hunt-filters label { display: grid; gap: 5px; flex: 1 1 180px; min-width: 0; color: var(--idle-muted); font-size: .76rem; }
.idle-hunt-filters input, .idle-hunt-filters select { width: 100%; min-height: 40px; }
.idle-hunt-card[hidden], .idle-hunt-empty[hidden] { display: none !important; }
.idle-hunt-empty { color: var(--idle-muted); }
.idle-preview-zero-xp { margin: 12px 0; padding: 12px 14px; border: 1px solid #a57f42; border-left: 4px solid var(--idle-warning); border-radius: 7px; background: #342d27; }
.idle-preview-zero-xp strong { color: #ffe0ab; }.idle-preview-zero-xp p { margin: 5px 0 !important; }.idle-preview-zero-xp a { color: #ffe385; }
.idle-preview-details { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--idle-border); border-radius: 7px; }
.idle-preview-details summary { cursor: pointer; color: var(--idle-gold); font-weight: 700; }
@media (max-width: 720px) {
  .idle-app.idle-chat-open { overflow: hidden; }
  .idle-character-switch { max-width: min(42vw, 180px); }
  .idle-character-switch summary { max-width: min(42vw, 180px); font-size: .77rem; }
  .idle-character-switch summary small { display: none; }
  .idle-social.is-chat-open:not(.is-vip-open), .idle-app:has(.idle-live-stage) .idle-social.is-chat-open:not(.is-vip-open) { inset: var(--idle-chat-viewport-top, 0px) 0 auto; width: 100vw; height: var(--idle-chat-viewport-height, 100dvh); z-index: 100; }
  .idle-social.is-chat-open:not(.is-vip-open) .idle-social-dock { width: 100%; height: 100%; }
  .idle-social.is-chat-open:not(.is-vip-open) .idle-social-chat { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .idle-social.is-chat-open:not(.is-vip-open) .idle-social-launchers { display: none; }
  .idle-social.is-chat-open:not(.is-vip-open) .idle-social-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
.idle-party-panel { display: grid; gap: .8rem; }
.idle-party-panel > p { margin: 0; }
.idle-party-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin: 0; }
.idle-party-panel label { display: grid; gap: .3rem; }
.idle-party-members { display: grid; gap: .55rem; list-style: none; margin: .25rem 0; padding: 0; }
.idle-party-members li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .65rem .8rem; border: 1px solid var(--bs-border-color, #514b45); border-radius: .5rem; }
.idle-party-members li strong { min-width: 8rem; }
.idle-party-invite { display: grid; gap: .35rem; padding: .8rem; border: 1px solid var(--bs-border-color, #514b45); border-radius: .5rem; }
.idle-party-invite p { margin: 0; }
.idle-party-invite-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .3rem; }
.idle-party-panel form > small { flex-basis: 100%; }

/* Hunt page: last result per destination, equipment summary, report actions and history. */
.idle-hunt-card small.idle-hunt-card-last { color: var(--idle-green); font-size: .72rem; }
.idle-equipped-summary { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--idle-border); border-radius: 9px; background: #0d262d; }
.idle-equipped-summary ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px 12px; margin: 8px 0 !important; padding: 0 !important; list-style: none; }
.idle-equipped-summary li { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 !important; font-size: .82rem; }
.idle-equipped-summary li > span:last-child { display: grid; min-width: 0; }
.idle-equipped-summary li small { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.idle-equipped-summary .idle-sprite { flex: none; margin: 0; }
.idle-time-help { margin: 0 0 14px !important; font-size: .82rem; }
.idle-time-help p { margin: 8px 0 0 !important; color: var(--idle-muted); }
.idle-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.idle-hunt-history ul { margin: 8px 0 0 !important; padding: 0 !important; list-style: none; }
.idle-hunt-history li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 !important; padding: 8px 0; border-bottom: 1px solid var(--idle-border); font-size: .82rem; }
.idle-hunt-history li > span { color: var(--idle-text); font-variant-numeric: tabular-nums; }

/* Equipment: attributes, comparison with the equipped item, and unequip as a secondary action. */
.idle-equipment-stats { color: var(--idle-muted); font-size: .68rem; line-height: 1.25; }
.idle-inventory-name { display: grid; gap: 2px; min-width: 0; }
.idle-inventory-name small { color: var(--idle-muted); font-size: .74rem; }
.idle-inventory-note em { color: var(--idle-warning); font-size: .74rem; font-style: normal; }
#idle-equipment .idle-equipment-slot button { border: 1px solid #516b6b; background: transparent; color: #c9d8d4; font-weight: 650; }
#idle-equipment .idle-equipment-slot button:hover { border-color: var(--idle-gold); background: #1d3a3a; color: #fff; }

/* Gold shop rows and Store guidance. */
.idle-shop-item { display: grid; gap: 2px; min-width: 0; }
.idle-shop-item small { color: var(--idle-muted); font-size: .76rem; }
.idle-shop-item em { color: var(--idle-warning); font-size: .74rem; font-style: normal; }
.idle-store-buy-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.idle-store-buy-coins small { color: var(--idle-muted); }
.idle-store-premium { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #6d7040; border-radius: 10px; background: #1c3433; }
.idle-store-premium ul { margin: 8px 0 0 !important; padding-left: 1.2rem !important; columns: 2 220px; }
.idle-store-premium li { margin: .2rem 0 !important; font-size: .84rem; }
.idle-store-offer form small { display: block; margin-top: 4px; color: var(--idle-muted); font-size: .74rem; }

/* Account: what each character is doing. */
.idle-account-characters a span { grid-row: 1 / 4 !important; }
.idle-account-activity { font-size: .74rem; font-style: normal; color: var(--idle-green); }
.idle-account-activity--hunting, .idle-account-activity--huntwaiting { color: var(--idle-gold); }
.idle-account-activity--training { color: #9fd4ff; }

/* Character creation: vocations as cards with per-level gains. */
.idle-create-character small { color: var(--idle-muted); font-size: .74rem; font-weight: 500; }
.idle-vocation-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 6px 0 14px; padding: 0; border: 0; }
.idle-vocation-choice legend { margin-bottom: 6px; color: #e1e9e4; font-size: .85rem; font-weight: 650; }
.idle-app .idle-vocation-choice label { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--idle-border); border-radius: 9px; background: #0d262d; cursor: pointer; }
.idle-app .idle-vocation-choice label:has(input:checked) { border-color: var(--idle-gold); background: #233939; }
.idle-vocation-choice label > span { display: grid; gap: 3px; }
.idle-vocation-gains { color: var(--idle-green) !important; }

/* How to play. */
.idle-how-to-play ol { padding-left: 1.3rem; }
.idle-how-to-play li { margin: .45rem 0; }

/* Master-detail on narrow screens (and inside HUD windows): the detail becomes a drawer
   pinned to the bottom, so preview, price and the main action stay visible while the
   list scrolls. */
@media (max-width: 1040px) {
  .idle-appearance-layout { display: flex; flex-direction: column; align-items: stretch; }
  .idle-appearance-editor { position: sticky; bottom: 0; z-index: 3; max-height: 52vh; overflow-y: auto; box-shadow: 0 -14px 30px rgb(0 0 0 / 55%); }
  .idle-appearance-editor form { display: flex; flex-direction: column; }
  .idle-appearance-editor .idle-appearance-actions { order: -1; }
}
@media (max-width: 1100px) {
  .idle-charm-layout { display: flex; flex-direction: column; align-items: stretch; }
  .idle-charm-detail { position: sticky; top: auto; bottom: 0; z-index: 3; max-height: 50vh; overflow-y: auto; box-shadow: 0 -14px 30px rgb(0 0 0 / 55%); }
}

/* Confirmation dialogs: cancelling is the secondary choice. */
.idle-app.idle-site-confirm .idle-site-confirm-actions button[data-idle-confirm-cancel],
.idle-app .idle-training-confirm .idle-training-confirm-actions button[data-training-cancel] {
  border-color: #657f70; background: transparent; color: #e8f0e9;
}
.idle-app.idle-site-confirm .idle-site-confirm-actions button[data-idle-confirm-cancel]:hover,
.idle-app .idle-training-confirm .idle-training-confirm-actions button[data-training-cancel]:hover { border-color: var(--idle-gold); background: #1d3a3a; color: #fff; }

/* Minimum readable sizes for labels (11px eyebrows and stat captions were too small). */
.idle-content main .idle-step { font-size: .74rem; }
.idle-eyebrow { font-size: .7rem; }
.idle-stat span, .idle-sheet-vitals span, .idle-sheet-stat-grid span { font-size: .78rem; }
.idle-sheet-table-head { font-size: .76rem; }
.idle-app .idle-workflow-steps button { font-size: .84rem; }

/* Creature sprites on hunt cards read better slightly larger. */
.idle-hunt-card > .idle-sprite { margin: 0 6px; transform: scale(1.4); transform-origin: center; }
@media (max-width: 680px) { .idle-app .idle-workflow-steps button { font-size: .76rem; } }

/* Outfit portraits are 64x64 with the character in the bottom-right 32x32 quadrant
   (Tibia layout). Drawn at 3x, the figure's centre sits at 75% of the image, so
   anchoring that point to the middle of the box centres a 96px figure.
   A mounted outfit fills the whole frame, so only unmounted portraits ("mount=0") zoom in. */
.idle-sheet-avatar, .idle-outfit-art { position: relative; overflow: hidden; }
.idle-sheet-avatar img[src*="mount=0&"], .idle-outfit-art img[src*="mount=0&"] {
  position: absolute; left: 50%; top: 50%;
  width: 192px !important; height: 192px !important; max-width: none !important;
  transform: translate(-75%, -75%); image-rendering: pixelated;
}