/* Level up (/level) — Hunting Grounds: level control, mob tooltip cards, ranked list, maps, bosses, treasure hunt. */
.scene.map{--bgy:30%}
#farm{scroll-margin-top:16px}

/* ---------- level control ---------- */
.lvwin{margin-top:-74px;z-index:12;max-width:980px}
.lv-ctl{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"badge in chips" "badge note note";gap:6px 22px;align-items:center;padding:14px 20px 14px 16px}
.lv-badge{grid-area:badge;position:relative;width:118px;height:96px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;
  background:radial-gradient(120% 90% at 30% 20%,#4e5d8c,#1d2340);box-shadow:inset 0 0 0 2px #8fa3dc,0 4px 0 var(--ink);color:#fff;overflow:hidden}
.lv-badge::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-16px;height:30px;background:radial-gradient(closest-side,rgba(255,211,107,.45),transparent)}
.lv-badge small{position:absolute;top:8px;left:11px;font:800 13px var(--f-game);color:var(--gold-ink);letter-spacing:.06em}
.lv-badge span{font:800 54px/1 var(--f-game);margin-top:12px;-webkit-text-stroke:2px #11152a;paint-order:stroke fill;text-shadow:0 3px 0 #11152a;color:#fff7d6}
.lv-badge.any span{font-size:34px}
.lv-in{grid-area:in;display:grid;gap:6px}
.lv-in label{font:800 13px var(--f-game);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lv-step{display:flex;gap:6px;align-items:center}
.lv-step .field{width:118px;padding:2px 4px 2px 12px}
.lv-step .field input{font:800 22px var(--f-game);padding:5px 0 2px;-moz-appearance:textfield;appearance:textfield}
.lv-step .field input::-webkit-outer-spin-button,.lv-step .field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lv-step .btn{min-width:46px;min-height:40px}
.lv-chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-self:end}
.lv-chips>span{font:700 13px var(--f-ui);color:var(--ink-3);margin-right:2px}
.lv-chips button[aria-pressed]{min-width:46px;min-height:40px;font:800 16px var(--f-game);color:var(--ink);background:linear-gradient(#fffdf5,#efe3c5);border:2px solid var(--ink);border-radius:9px;padding:4px 10px 1px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.lv-chips button[aria-pressed]:hover{background:linear-gradient(#fff6d9,#ffd98a)}
.lv-chips button[aria-pressed=true]{background:linear-gradient(#8fdc8a,#3f9a4c 60%,#2a7a3a);color:#fff;text-shadow:0 1.5px 0 #1d4a22;transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.lv-chips button.all{font-size:14px}
.lv-note{grid-area:note;margin:0;font-size:13px;color:var(--ink-3)}

/* ---------- headings ---------- */
.lv-head{margin:38px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 24px}
.lv-head .sec-lede{margin-bottom:20px}
.lv-legend{display:flex;gap:16px;margin:0 0 22px;font:700 13px var(--f-ui);color:#e1cfb0;white-space:nowrap}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.4)}
.sw.m{background:linear-gradient(#ffe48a,#e2a514)}
.sw.d{background:linear-gradient(#a8e6ff,#3d9be0)}

/* ---------- top 3: mob tooltips ---------- */
.lv-top{display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:auto auto;gap:18px}
.lv-top>.empty,.lv-top>.lv-empty{grid-column:1/-1}
.mobcard{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"stage h" "stage meta" "stage worth" "stage split" "kv kv" "hr hr" "best best" "where where";gap:2px 14px;padding:14px 16px 14px;align-content:start;
  border-radius:9px;transition:transform var(--dur-fast) var(--ease-out)}
.mobcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 3px rgba(255,211,107,.35),0 16px 28px rgba(0,0,0,.4)}
.mobcard.pop{animation:mobpop var(--dur-slow) var(--ease-out) both}
@keyframes mobpop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.mobcard .rk{position:absolute;z-index:2;top:-10px;left:-10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font:800 16px/1 var(--f-game);color:#3a2604;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#f2b81c 60%,#b8800c);border:2px solid #24170d;box-shadow:0 2px 0 #24170d}
.mobcard .stage{grid-area:stage;position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:104px;padding-bottom:16px;border-radius:7px;
  background:radial-gradient(90% 70% at 50% 40%,rgba(143,163,220,.25),transparent 70%)}
.mobcard .stage::after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,#6fbf3a,#3c7a22 60%,transparent 75%);opacity:.9}
.mobcard .stage img{position:relative;z-index:1;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.mobcard h3{grid-area:h;margin:2px 0 0;font:800 21px/1.1 var(--f-game);color:var(--gold-ink)}
.mobcard .meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0;font-size:12.5px;color:var(--tip-dim)}
.lvtag{font:800 12.5px var(--f-game);padding:1px 7px 0;border-radius:5px;background:rgba(143,163,220,.22);color:#fff}
.lvtag.ok{background:#2e8a4a}.lvtag.hi{background:#c0512a}.lvtag.lo{background:#5a6488}
.mobcard .worth{grid-area:worth;display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;margin:6px 0 2px}
.mobcard .worth b{font:800 40px/1 var(--f-game);color:#fff;letter-spacing:-.01em}
.mobcard .worth .coin{width:22px;height:22px;align-self:center}
.mobcard .worth small{font-size:12.5px;color:var(--tip-dim)}
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.45);min-width:0}
.split i{display:block;height:100%}
.split .m{background:linear-gradient(#ffe48a,#e2a514)}
.split .d{background:linear-gradient(#a8e6ff,#3d9be0)}
.mobcard .split{grid-area:split;margin:2px 0 6px}
.mobcard .kv{grid-area:kv;margin-top:8px;font-size:13px}
.mobcard hr{grid-area:hr;width:100%;border:0;border-top:1px dashed rgba(143,163,220,.4);margin:10px 0 8px}
.mobcard .best,.mobcard .where{margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;min-width:0}
.mobcard .best{grid-area:best}
.mobcard .where{grid-area:where;margin-top:6px;color:var(--tip-dim);font-size:12.5px;flex-wrap:wrap;gap:2px 8px}
.mobcard .best small,.mobcard .where small{flex:none;width:72px;font:800 11px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--tip-dim)}
.mobcard .best a{display:flex;align-items:center;gap:6px;min-width:0;color:#9fe0ff;font-weight:700;text-decoration:none}
.mobcard .best a:hover span{text-decoration:underline}
.mobcard .best a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobcard .best img{width:24px;height:24px;flex:none;background:rgba(255,255,255,.08);border-radius:4px}
.mobcard .best .none{color:var(--tip-dim)}
.mobcard .where em{font-style:normal;color:#fff}
/* #1: the big one */
.mobcard.first{grid-row:span 2;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "h" "meta" "worth" "split" "kv" "hr" "best" "where";border-color:var(--gold-ink);
  background:radial-gradient(120% 60% at 50% 0,rgba(255,211,107,.12),transparent 60%),var(--tip)}
.mobcard.first .stage{min-height:150px;margin:-2px -4px 8px;background:radial-gradient(70% 80% at 50% 45%,rgba(255,211,107,.22),transparent 70%)}
.mobcard.first .stage::before{content:"Top pick";position:absolute;top:6px;right:6px;font:800 11px var(--f-game);letter-spacing:.12em;text-transform:uppercase;color:#3a2604;background:var(--gold-ink);padding:2px 8px 0;border-radius:4px}
.mobcard.first h3{font-size:28px}
.mobcard.first .worth b{font-size:56px}
.mobcard.first .split{height:12px}

/* empty state */
.lv-empty .pad{display:grid;gap:8px;justify-items:start}
.lv-empty b{font:800 22px/1.15 var(--f-game)}
.lv-empty p{margin:0;color:var(--ink-2)}
.lv-chips.near{justify-self:start;gap:8px}

/* ---------- ranked list (4–12) ---------- */
.lv-rows,.lv-maps,.lv-treasure{list-style:none;margin:0;padding:8px}
.lv-rows li{display:grid;grid-template-columns:24px 56px minmax(0,1fr) 150px 96px;align-items:center;gap:12px;padding:6px 8px;border-radius:7px}
.lv-rows li:nth-child(odd),.lv-maps li:nth-child(odd){background:rgba(200,183,143,.16)}
.lv-rows li:hover,.lv-maps li:hover{background:#ffeec6}
.lv-rows .rk{font:800 15px var(--f-game);color:var(--ink-3);text-align:center}
.sp{height:48px;display:grid;place-items:center}
.sp img{max-width:56px;max-height:48px;object-fit:contain}
.lv-rows .n,.lv-maps .n{font-weight:700;font-size:15px;line-height:1.2;min-width:0}
.lv-rows .n small,.lv-maps .n small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-rows .n small .lvtag{font-size:11.5px;color:#fff;background:#8a7d9a}
.lv-rows .n small .lvtag.ok{background:#2e8a4a}.lv-rows .n small .lvtag.hi{background:#c0512a}.lv-rows .n small .lvtag.lo{background:#7a83a6}
.lv-rows .split{background:#e9dfc6;border-color:var(--win-line)}
.lv-rows .pr,.lv-maps .pr{text-align:right;font:800 19px/1.05 var(--f-game);white-space:nowrap}
.lv-rows .pr small,.lv-maps .pr small{display:block;font:700 11.5px var(--f-ui);color:var(--ink-3)}
.lv-rows .pr .coin,.lv-maps .pr .coin{width:14px;height:14px}

/* ---------- side: maps + bosses ---------- */
.lv-side{position:sticky;top:16px}
.lv-sub{margin:10px 16px 0}
.lv-maps li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;grid-template-areas:"mm n pr" "mm bar bar";align-items:center;gap:2px 10px;padding:7px 8px;border-radius:7px}
.lv-maps .mm{grid-area:mm;display:flex;align-items:flex-end;justify-content:center;gap:0;height:38px}
.lv-maps .mm img{max-width:34px;max-height:34px;object-fit:contain;margin-left:-8px}
.lv-maps .mm img:first-child{margin-left:0}
.lv-maps .n{grid-area:n;font-size:14.5px}
.lv-maps .pr{grid-area:pr;font-size:17px}
.mbar{grid-area:bar;height:5px;border-radius:3px;background:#e9dfc6;overflow:hidden}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb15c,#d9541a)}
.mbar.boss i{background:linear-gradient(90deg,#c7b2f0,#6a4fae)}
.lv-bosses li{grid-template-columns:62px minmax(0,1fr) auto}
.lv-bosses .sp{grid-area:mm;height:44px}
.lv-bosses .sp img{max-width:56px;max-height:44px}
.lv-maps .empty{display:block;padding:16px}

/* ---------- treasure hunt ---------- */
.lv-treasure-sec{margin-top:54px}
.lv-treasure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.lv-treasure a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"slot n pr" "by by by";gap:6px 10px;align-items:center;height:100%;padding:10px 12px;border-radius:9px;text-decoration:none;color:inherit;
  background:#fff;border:1.5px solid var(--win-line);box-shadow:0 2px 0 rgba(36,32,46,.12);transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lv-treasure a:hover{transform:translateY(-2px);border-color:var(--maple)}
.lv-treasure .slot{grid-area:slot;width:46px;height:46px;background:radial-gradient(circle,#fff8e2,#f1e2b8)}
.lv-treasure .n{grid-area:n;font-weight:700;font-size:14.5px;line-height:1.2;min-width:0}
.lv-treasure .n small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px}
.lv-treasure .pr{grid-area:pr;font:800 20px var(--f-game);white-space:nowrap}
.lv-treasure .pr .coin{width:15px;height:15px}
.lv-treasure .by{grid-area:by;display:flex;align-items:flex-end;gap:4px;padding-top:6px;border-top:1px dashed var(--win-line);min-width:0}
.lv-treasure .by img{max-width:30px;max-height:30px;object-fit:contain;flex:none}
.lv-treasure .by small{margin-left:4px;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
.lv-treasure .jackpot a{background:linear-gradient(#fff6d6,#ffe7a6);border-color:var(--gold)}
.lv-treasure .jackpot .pr{color:var(--maple)}

.m-more{display:none}

/* ---------- mobile ---------- */
@media (max-width:1100px) and (min-width:821px){
  .lv-top{grid-template-columns:minmax(0,1fr)}
  .mobcard.first{grid-row:auto}
  .lv-treasure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-rows li{grid-template-columns:24px 50px minmax(0,1fr) 90px}
  .lv-rows .split{display:none}
}
@media (max-width:820px){
  .lvwin{margin-top:-40px}
  #farm{scroll-margin-top:60px}
  .lv-ctl{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge in" "chips chips" "note note";gap:10px 14px;padding:12px}
  .lv-badge{width:92px;height:80px}
  .lv-badge span{font-size:42px}
  .lv-badge.any span{font-size:28px}
  .lv-step .field{width:auto;flex:1;min-width:0}
  .lv-chips{justify-self:stretch}
  .lv-chips>span{flex-basis:100%}
  .lv-chips button[aria-pressed]{flex:1 1 0;min-width:0;padding:4px 4px 1px}
  .lv-chips button.all{flex:1 1 100%}
  .lv-head{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .lv-legend{margin-top:-8px}
  .lv-top{grid-template-columns:minmax(0,1fr);gap:16px}
  .mobcard.first{grid-row:auto}
  .mobcard{grid-template-columns:84px minmax(0,1fr);padding:12px}
  .mobcard .stage{min-height:84px}
  .mobcard.first .worth b{font-size:46px}
  .mobcard .worth b{font-size:34px}
  .lv-rows li{grid-template-columns:22px 48px minmax(0,1fr) 74px;gap:8px;padding:6px 4px}
  .lv-rows .split{display:none}
  .lv-rows .pr,.lv-maps .pr{font-size:17px}
  .lv-side{position:static}
  .lv-treasure{grid-template-columns:minmax(0,1fr)}
  .m-clip>li:nth-child(n+6){display:none}
  .lv-rows.m-clip>li:nth-child(n+5){display:none}
  .m-more{display:flex;margin:0 auto 14px}
  .m-more[hidden]{display:none}
}
/* reserve space for the data-driven bits above the fold (no layout shift when they fill in) */
.lv-note{min-height:1.45em}
#lv-lede{min-height:2.9em}
.lv-chips:not(:has(button)){min-height:40px}
@media (max-width:820px){.lv-chips:not(:has(button)){min-height:108px}}
@media (max-width:820px){#lv-lede{min-height:4.35em}}
@media (min-width:821px){#lv-maps:empty{min-height:520px}}
/* long monster details: wrap to a second line instead of cutting the drop name (phones + the narrow Bosses/Richest maps column) */
.lv-rows .n small,.lv-maps .n small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}