/* MHFU game font (falls back to sans-serif for glyphs it lacks, e.g. ★ — © ) */
@font-face{
  font-family:'MHFU';
  src:url('fonts/mhfu_font.ttf') format('truetype');
  font-display:swap;
}
/* Theme variables are set at runtime from the chosen color (see app.js). */
:root{
  --bg:#3e3e3e; --bg1:#000000; --bg2:#333; --content-bg:#2b2b2b; --panel-bg:#1f1f1f; --input-bg:#1a1a1a;
  --hover:#2f2f2f; --accent:#7a7a7a; --accent-hover:#9a9a9a;
  --text:#f3f3f3; --text-dim:#ffffff; --line:#ffffff1f;
}
*{box-sizing:border-box;scrollbar-color:var(--accent) var(--bg2);scrollbar-width:thin}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
input,select,button,textarea{font-family:inherit}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:'MHFU',"Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px;
  user-select:none; -webkit-user-select:none;
}
#app{display:flex;flex-direction:column;height:100vh}
.hidden{display:none !important}

/* Title bar */
.titlebar{display:flex;align-items:center;gap:10px;padding:8px 14px}
.titlebar-header{
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 90%,transparent),color-mix(in srgb,var(--accent) 90%,transparent)),
    url('assets/titlebar-background.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
}
.title-icon{width:32px;height:32px;object-fit:contain}
.titlebar h1{font-size:15px;font-weight:600;margin:0;flex:1}
.icon-btn{
  background:transparent;border:none;color:var(--text);font-size:18px;
  cursor:pointer;padding:6px 9px;border-radius:6px;line-height:1;
}
.icon-btn:hover{background:#ffffff1a}

/* Layout — filters | result */
.layout{display:flex;flex:1;min-height:0}
.sidebar{
  width:300px;flex-shrink:0;padding:12px;overflow-y:scroll;scrollbar-gutter:stable;
  display:flex;flex-direction:column;gap:8px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 90%,transparent),color-mix(in srgb,var(--accent) 90%,transparent)),
    url('assets/sidebar-background-texture1.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
}
/* The Hunting Log's editor pane: rocky texture under a --content-bg tint. A solid colour
   picked under Theme > Content Background replaces the whole background (app.js). */
.content{
  flex:1;min-width:0;padding:18px;overflow-y:auto;
  background-color:var(--content-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--content-bg) 84%,transparent),color-mix(in srgb,var(--content-bg) 84%,transparent)),
    url('assets/rockyTextureDark.png');
  background-repeat:repeat;background-size:auto,200px 200px;
}

/* Buttons */
.btn{
  background:#ffffff14;color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:8px 14px;cursor:pointer;font-size:14px;
}
.btn:hover{background:#ffffff24}
.btn.block{width:100%}
.btn.tiny{padding:3px 10px;font-size:12px}
.btn.block,.btn.tiny{
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg2) 80%,transparent),color-mix(in srgb,var(--bg2) 80%,transparent)),
    url('assets/banner-background.png');
  background-position:right;
}
.btn.accent{
  border-color:#000;color:#fff;font-weight:600;
  text-shadow:-1px 0 rgba(0,0,0,.55),1px 0 rgba(0,0,0,.55),0 -1px rgba(0,0,0,.55),0 1px rgba(0,0,0,.55);
}
/* Must stay after .btn.block,.btn.tiny — same specificity, so source order lets the flat
   fill beat the banner texture on a button carrying both classes. */
.btn.accent{background:var(--bg1);background-image:none}
.btn.accent:hover{background:var(--bg2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:#ffffff14}
.btn.accent:disabled:hover{background:var(--bg1)}

/* Collapsible panels */
.panel{border:1px solid var(--line);border-radius:8px;overflow:clip;background:var(--bg2)}
.panel-head{
  width:100%;text-align:left;border:none;color:var(--text);
  padding:10px 26px;font-size:30px;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg2) 80%,transparent),color-mix(in srgb,var(--bg2) 80%,transparent)),
    url('assets/banner-background.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
}
.panel-head:hover{filter:brightness(1.1)}
.chev{transition:transform .15s;font-size:20px;font-weight:700;color:transparent}
.panel[data-open="true"] .chev{transform:rotate(180deg)}
.panel-body{
  display:none;padding:6px 12px 12px;flex-direction:column;gap:4px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg1) 60%,transparent),color-mix(in srgb,var(--bg1) 60%,transparent)),
    url('assets/panel-body-bg.png');
  background-size:contain 100%;background-position:left center;background-repeat:repeat;
}
.panel[data-open="true"] .panel-body{display:flex}

/* Checkboxes */
.chk{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;line-height:1.3}
.chk input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0}
.chk:has(input:disabled){opacity:.45;cursor:default}
.chk:has(input:disabled) input{cursor:default}
.chk:hover{color:var(--accent-hover)}
.chk:hover input[type="checkbox"]{accent-color:var(--accent-hover)}
.chk .wicon{width:20px;height:20px;object-fit:contain}
.sub-toggles{margin-left:18px;display:flex;flex-direction:column;gap:4px}

.hint{color:var(--text-dim);opacity:.75;font-size:12px;margin:4px 0}
.row{display:flex;align-items:center}
.row.gap{gap:8px}.row.end{justify-content:flex-end}

/* Checkbox trees (quest levels, monsters) */
.tree{max-height:300px;overflow-y:auto;padding-right:4px}
.agrp{margin-top:2px}
.agrp .akids{margin-left:18px;display:none;flex-direction:column}
.agrp.open>.akids{display:flex}
.agrp .akids>.chk{margin-left:22px}
.ahead{display:flex;align-items:center}
.ahead input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0;margin:0 2px}
.twist{cursor:pointer;width:22px;display:inline-block;text-align:center;color:var(--accent);font-size:18px;font-weight:700}
.twist:hover{filter:brightness(1.4)}
.grp-name{cursor:pointer;font-weight:600;flex:1;padding:3px 0 3px 6px;line-height:1.3}
.grp-name:hover{color:var(--accent-hover)}
.chk input:indeterminate{opacity:.7}

/* Challenges */
.panel-body input[type="text"],.panel-body input[type="number"]{background:var(--input-bg);color:var(--text);border:1px solid var(--line)}
.ch-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.ch-add input[type="text"]{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:13px}
#chChance{width:52px}
.ch-count{margin:2px 0 6px;font-size:12px}
#challengeCount{width:40px}
.panel-body .ch-edit-text,.panel-body .ch-edit-chance{border-color:transparent;border-radius:5px;padding:2px 5px;font-size:12px}
.panel-body .ch-edit-text:hover,.panel-body .ch-edit-text:focus,.panel-body .ch-edit-chance:hover,.panel-body .ch-edit-chance:focus{border-color:var(--line)}
.ch-edit-text{flex:1;min-width:0}
.ch-edit-chance{width:46px;text-align:center}
.ch-edit-text:focus,.ch-edit-chance:focus{outline:none}
.ch-pct{font-size:12px;opacity:.7;flex-shrink:0}
.bl-list{display:flex;flex-direction:column;gap:4px}
.bl-tag{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#ffffff0f;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:13px}
.bl-tag .chk{flex-shrink:0}
.bl-tag button{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:0 2px;line-height:1;flex-shrink:0}
.bl-tag button:hover{color:red}

/* Quest pickers */
.quest-pickers{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:center}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim);text-shadow:-1px 0 rgba(0,0,0,.6),1px 0 rgba(0,0,0,.6),0 -1px rgba(0,0,0,.6),0 1px rgba(0,0,0,.6)}
.field select{
  background:var(--input-bg);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;font-size:14px;min-width:150px;line-height:1.4;
}
.pool-count{text-align:center;font-size:12px;opacity:.75;margin:8px 0 14px;min-height:1em;
  text-shadow:-1px 0 rgba(0,0,0,.6),1px 0 rgba(0,0,0,.6),0 -1px rgba(0,0,0,.6),0 1px rgba(0,0,0,.6)}

/* ── Result card (card.js draws it; stream-view.html reuses it as-is) ──────────── */
/* The GU randomizer's card is a screenshot of MHGU's own quest card, so 4U (like 3U) gets one
   built from the shared textures instead: the Hunting Log's quest header over a panel-textured body. */
.result-card-wrap{max-width:640px;margin:0 auto}
.result-card{border:1px solid var(--line);border-radius:10px;overflow:clip;background:var(--panel-bg)}
.rc-placeholder{margin:0;padding:48px 24px;text-align:center;opacity:.8}
.rc-head{
  display:flex;align-items:center;gap:14px;padding:12px 16px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--content-bg) 88%,transparent),color-mix(in srgb,var(--content-bg) 88%,transparent)),
    url('assets/banner-background-plain.png');
  background-size:auto 100%;background-position:left center;background-repeat:repeat;
  border-bottom:1px solid var(--line);
}
.rc-icon{width:72px;height:72px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.rc-headtext{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.rc-rank{font-size:12px;opacity:.8;letter-spacing:.5px}
.rc-name{font-size:20px;font-weight:700;line-height:1.25;margin-top:2px}
.rc-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:6px}
.rc-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding:14px 16px 16px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--panel-bg) 70%,transparent),color-mix(in srgb,var(--panel-bg) 70%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px;
}
.rc-field{min-width:0}
.rc-main,.rc-loadout,.rc-challenges{grid-column:1 / -1}
.rc-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;opacity:.7;margin-bottom:3px;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.rc-value{font-size:15px;line-height:1.35}
.rc-main .rc-value{font-size:17px;font-weight:600}
.rc-weapon-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px}
.rc-weapon-icon{width:34px;height:34px;object-fit:contain}
.rc-weapon{font-size:16px;font-weight:700}
.rc-weapon.chip{
  color:#fff;padding:3px 14px;border-radius:999px;
  text-shadow:-1px 0 rgba(0,0,0,.55),1px 0 rgba(0,0,0,.55),0 -1px rgba(0,0,0,.55),0 1px rgba(0,0,0,.55);
}
.rc-weapon-name{font-size:15px;opacity:.9}
.rc-challenge-list{margin:4px 0 0;padding-left:20px;font-size:15px;line-height:1.45}
.rc-footer{display:flex;justify-content:flex-end;margin-top:8px}

.pill{
  color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.pill-key{background:#FF7200}
.pill-urgent{background:#a3122a}
.pill-hunt{background:#e52222}
.pill-sm{background:#1a7eff}
.pill-egg{background:#c4a07a}
.pill-gathering{background:#22cc44}
.pill-repel{background:#6a1fa8}
.pill-arena{background:#1a5fa8}
.pill-capture{background:#4a4a4a}
.pill-frenzy{background:#b0157a}
.pill-apex{background:#7a0c0c}

/* Modals */
.modal{position:fixed;inset:0;background:#000000a8;display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.modal-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:20px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto}
.modal-card.narrow{max-width:340px}
.modal-card h2{margin:0 0 16px;font-size:18px}
.modal-card p{margin:0 0 10px;line-height:1.45}
.modal-card a{color:color-mix(in srgb, hsl(from var(--accent) calc(h + 180) 75% 60%) 50%, var(--text))}
.modal-card .muted{color:var(--text-dim);font-size:13px;opacity:.75}
.modal-card ul{margin:0 0 10px;padding-left:18px}
.modal-card li{margin-bottom:5px;line-height:1.4}
.modal-divider{border:none;border-top:1px solid var(--line);margin:14px 0 10px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.swatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden}
.swatch.sel{border-color:#fff}
.swatch-icon{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:60%;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.swatch span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.45)}
.bg-title{font-size:13px;font-weight:600;margin:0 0 8px}
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:240px;overflow-y:auto;margin-bottom:12px;padding-right:4px;user-select:none;-webkit-user-select:none}
.bg-thumb{aspect-ratio:2/1;border-radius:6px;border:2px solid transparent;cursor:pointer;background-size:cover;background-position:center}
.bg-thumb.sel{border-color:#fff}
.bg-thumb.none-thumb{background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-dim)}

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

/* Narrow screens: filters stack above the result */
@media (max-width:760px){
  .layout{flex-direction:column}
  .sidebar{width:auto;border-bottom:1px solid var(--line);max-height:42vh}
  .panel-head{font-size:22px}
  .content{padding:14px}
  .field select{min-width:0;width:100%}
  .quest-pickers .field{flex:1 1 30%}
  .rc-body{grid-template-columns:minmax(0,1fr)}
  .rc-icon{width:56px;height:56px}
  .rc-name{font-size:17px}
}