/* 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; --hover:#2f2f2f; --accent:#7a7a7a; --accent-hover:#9a9a9a;
  --text:#f3f3f3; --text-dim:#ffffff; --line:#ffffff1f; --card:#ffffff0d;
  --titlebar-overlay:rgba(0,0,0,0.18);
}
*{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}

/* Khezu joke: hides everything except the Theme gear icon, which stays live as the
   escape hatch (reopening the modal, which lives outside #app, is unaffected). */
#app.joke-mode .layout{display:none}
#app.joke-mode .titlebar-header{background-image:none}
#app.joke-mode .titlebar>*:not(#themeBtn){display:none}

/* Layout */
.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;
}
.content{flex:1;padding:18px;overflow-y:hidden;min-width:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color: var(--bg1);}

/* 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{  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.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{background:var(--bg1);border-color:#000000;color:#fff;font-weight:600;text-shadow:-1px 0 rgba(0,0,0,0.55),1px 0 rgba(0,0,0,0.55),0 -1px rgba(0,0,0,0.55),0 1px rgba(0,0,0,0.55)}
.btn.accent:hover{background:var(--bg2);border-color:var(#000000)}
.btn.accent:disabled{opacity:.80;cursor:not-allowed}

/* Collapsible panels */
.panel{border:1px solid var(--line);border-radius:8px;overflow:clip;background:var(--bg2)}
.panel-head{
  width:100%;text-align:left;background:transparent;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;
}
.panel-head:hover{background:#ffffff0d}
.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;}
.panel[data-open="true"] .panel-body{display:flex}
.panel-head{
  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-body{
  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;
}

/* 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 .wicon{width:18px;height:18px;object-fit:contain}

.chk:hover {
  color: var(--accent-hover);
}

.chk:hover input[type="checkbox"] {
  accent-color: var(--accent-hover, #9a9a9a);
}

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

.twitch-sync-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-family:inherit}

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

/* Quest pickers */
.quest-pickers{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:18px;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,0.6),1px 0 rgba(0,0,0,0.6),0 -1px rgba(0,0,0,0.6),0 1px rgba(0,0,0,0.6)}
.field select{
  background:var(--bg2);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;font-size:14px;min-width:150px;line-height:1.4;
}
#artLvSel{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px;font-family:inherit;cursor:pointer}


/* Result */
.result-card-wrap{max-width:700px;margin:0 auto}
.result-card{
  background-image:url('assets/result-card-bg.png?v=2');
  background-size:100% 100%;
  aspect-ratio:774/502;
  position:relative;overflow:hidden;
  container-type:inline-size;
}
/* Placeholder sits on the divider line below "Random Hunting" */
.placeholder{
  position:absolute;top:17.43%;left:5%;right:5%;height:9.56%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;margin:0;color:#4D391F;font-size:2.8cqi;
}
.result{position:absolute;inset:0}
/* Quest name on the decorative line below "Random Hunting" */
.rc-title{
  position:absolute;top:17.43%;left:5%;right:5%;height:9.56%;
  display:flex;align-items:center;justify-content:center;
  gap:5px;overflow:hidden;
}
.r-name{font-size:2.8cqi;font-weight:700;color:#4D391F;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key-pill{background:#FF7200;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.hunt-pill{background:#e52222;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.sm-pill{background:#1a7eff;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.egg-pill{background:#c4a07a;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.gathering-pill{background:#22cc44;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.sp-pill{background:#c800ff;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.hyper-pill{background:#f5b400;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.event-pill{background:#6a1fa8;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.arena-pill{background:#1a5fa8;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.prowler-pill{background:#7a4a1e;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
.capture-pill{background:#4a4a4a;color:#fff;font-size:2.4cqi;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);flex-shrink:0}
/* Monster icon in the upper content area, over the dark square */
.rc-icon{position:absolute;top:28.5%;left:43%;width:13%}
.target-icon{width:100%;display:block;object-fit:contain}
.hyper-overlay{position:absolute;top:-6%;left:-6%;width:112%;pointer-events:none}
/* Locale value in the lower-left white box (below the decorative divider) */
.rc-locale{
  position:absolute;top:59.55%;left:7%;width:22%;bottom:2.6%;
  display:flex;flex-direction:column;gap:3px;
}
.r-locale-val{font-size:2.6cqi;font-weight:700;color:#4D391F;line-height:1.3}
.r-sub{font-size:1.4cqi;color:#4D391F;line-height:1.3;margin-top:4px}
/* Main objective text in the "Main Objective" area */
.rc-main{position:absolute;top:62.42%;left:40%;right:2%;color:#4D391F}
.rc-main .r-sub{font-size:2.9cqi;color:#4D391F;margin-top:0}
/* Loadout in the lower-right "Main Objective" area — top is rescaled to the new card
   height like everything else (keeps it pixel-aligned with .rc-main above), but bottom
   is deliberately left at the ORIGINAL 4% value (not rescaled) so this box alone claims
   all the extra height added to the card art, giving Hunter Arts more room. */
.rc-loadout{
  position:absolute;top:65.28%;left:6.5%;right:1.5%;bottom:2.78%;
  display:flex;flex-direction:column;gap:3px;
}
.r-label{font-size:1.4cqi;color:#4D391F;text-transform:uppercase;letter-spacing:.5px}
.r-weapon-row{display:flex;align-items:center;gap:5px}
.weapon-icon{width:3.4cqi;height:3.4cqi;object-fit:contain}
.r-weapon{font-size:2.0cqi;font-weight:700;color:#4D391F}
.r-style{font-size:2.0cqi;font-weight:700;color:#4D391F}
/* Tightened gap/padding (was 3px/3px) so a full 3-line Alchemy/Striker Hunter Arts
   list keeps clear vertical space above the card's bottom edge — shrinking spacing
   rather than repositioning the box, since .rc-main already crowds .rc-loadout's top. */
.arts{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.arts li{font-size:2.6cqi;color:#4D391F;background:rgba(0,0,0,.08);border-radius:3px;padding:2px 6px}
.rc-footer{display:flex;justify-content:flex-end;margin-top:8px}

/* Theme modal */
.modal{position:fixed;inset:0;background:#000000a8;display:flex;align-items:center;justify-content:center;z-index:10}
.modal-card{
  border:1px solid var(--line);border-radius:12px;padding:22px;width:min(420px,90vw);
  background-color:var(--bg2);
  background-image:
    linear-gradient(color-mix(in srgb,var(--bg2) 84%,transparent),color-mix(in srgb,var(--bg2) 84%,transparent)),
    url('assets/rockyTextureDark2.png');
  background-repeat:repeat;background-size:auto,200px 200px}
.modal-card{max-height:85vh;overflow-y:auto}
.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:var(--accent-hover)}
.modal-card .muted{color:var(--text-dim);font-size:13px}
.modal-card ul{margin:0 0 10px;padding-left:18px}
.modal-card li{margin-bottom:5px;line-height:1.4}
#themeModal .modal-card{width:min(420px,90vw)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px;user-select:none;-webkit-user-select:none}
.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)}
.modal-divider{border:none;border-top:1px solid var(--line);margin:14px 0 10px}

/* Twitch Bot modal's command rows — ported from the bot settings page's own styling */
.cmd-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:8px}
.cmd-row code{flex:1;min-width:0;word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
.cmd-row button{flex-shrink:0}
.cmd-desc{font-size:11.5px;color:var(--text-dim);margin:-4px 0 10px;line-height:1.4}
#twitchModalLoggedIn h3{margin-bottom:4px}
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:220px;overflow-y:auto;margin-bottom:12px;user-select:none;-webkit-user-select:none}
.bg-thumb{aspect-ratio:16/9;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)}

/* Challenges */
.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;font-family:inherit}
.ch-edit-text,.ch-edit-chance{border:1px solid transparent;border-radius:5px;padding:2px 5px;font-size:12px;font-family:inherit;transition:background .15s,border-color .15s}
.ch-edit-text{flex:1;min-width:0}
.ch-edit-chance{width:46px;text-align:center}
.ch-edit-text:hover,.ch-edit-text:focus,.ch-edit-chance:hover,.ch-edit-chance:focus{outline:none}
.ch-pct{font-size:12px;opacity:.7;flex-shrink:0}
.r-challlabel{font-size:1.8cqi;color:#ffffff;text-transform:uppercase;letter-spacing:.5px}
.rc-challenges{position:absolute;top:27.99%;left:63%;right:2%;max-height:30.6%;overflow:hidden;background-image:linear-gradient(rgba(84,72,63,0.82),rgba(84,72,63,0.82)),url('assets/challenge-bg.png');background-size:100% 100%;padding:4px 8px 14px;border-radius:6px}
.challenges-list{margin:4px 0 0;padding-left:18px;list-style:disc;font-size:2.2cqi;color:#ffffff}
.challenges-list li{margin-bottom:1px;white-space:nowrap}

/* Blacklist */
.bl-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.bl-add select{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:13px;flex:1;min-width:80px;font-family:inherit}
.bl-list{display:flex;flex-direction:column;gap:4px;background:var(--bg2);}
.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 button{background:transparent;border:none;color:var(--text-hint);cursor:pointer;font-size:16px;padding:0 2px;line-height:1;flex-shrink:0;font-family:inherit}
.bl-tag button:hover{color:red}

/* Combinations math table */
.math-table{border-collapse:collapse;width:100%;margin:0 0 10px;font-size:13px}
.math-table th{text-align:left;color:var(--text-hint);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:2px 10px 2px 0}
.math-table td{padding:3px 10px 3px 0;vertical-align:top}
.math-table td:nth-child(2){white-space:nowrap}
.math-table td:last-child{color:var(--text-hint);font-size:12px}
.math-table tr:last-child td{border-top:1px solid var(--line);padding-top:5px}

/* Mobile */
@media (max-width:760px){
  .layout{flex-direction:column}
  .sidebar{width:auto;border-right:none;border-bottom:1px solid var(--line);max-height:42vh}
}