/* MELA Wiki - shared styles (loaded by all pages). Must sit alongside the HTML files (and the fonts/ folder). */
/* Theme grounded in MELA's in-game "Class Board": warm wood-toned palette, pixel/arcade headers, clean panels. */

@font-face{font-family:"RoundHead";src:url("fonts/baloo2-bold.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"RoundHead";src:url("fonts/baloo2-semibold.woff2") format("woff2");font-weight:600;font-display:swap;}

:root{
  /* Pixel font for short Latin chrome; rounded warm fallback covers translated (CJK/Thai) text. */
  --font-display:"RoundHead",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  /* Warm board accents sampled from the game */
  --amber:#f3cd6b;
  --cyan:#5cc8f0;
  --cool-line:rgba(92,200,240,.22);
  --board-edge:rgba(60,90,140,.4);
}

html,body{height:100%;overflow:hidden;font-family:var(--font-body);color:var(--text);
  background:
    radial-gradient(1000px 520px at 14% -6%,#16243f 0%,var(--bg) 58%),
    var(--bg);
}

.shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh}

/* Title — pixel arcade lettering, like "CLASS BOARD" */
.sideTitle{padding:14px 12px 16px;border-bottom:1px solid var(--border);position:relative;text-align:center}
.sideTitle img{display:block;width:100%;max-width:160px;margin:0 auto;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.sideTitle span{display:block;margin-top:9px;font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;color:var(--cyan);opacity:.85}
.sideTitle::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:54px;height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 7px rgba(92,200,240,.5)}

.navLinks{flex:1;overflow-y:auto;padding:12px 10px}
.navLinks a{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:9px 13px;color:var(--muted);text-decoration:none;transition:color .15s,background .15s;
  margin-bottom:3px;border-left:3px solid transparent;border-radius:0 7px 7px 0}
.navLinks a:hover{background:rgba(92,200,240,.06);color:var(--text)}
.navLinks a.active{background:linear-gradient(90deg,rgba(92,200,240,.16),transparent);color:var(--cyan);
  border-left-color:var(--cyan)}
.navLinks a.disabled{opacity:.3;pointer-events:none}

.sideLang{padding:11px 10px;border-top:1px solid var(--border)}
.langBtn{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px 0;border:1px solid transparent;
  border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;opacity:.5;
  flex:1 1 0;min-width:0;text-align:center}
.langBtn:hover{opacity:.85}
.langBtn.active{opacity:1;color:#04101a;background:var(--cyan);box-shadow:0 2px 0 rgba(0,0,0,.3)}

.mainContent{flex:1;min-width:0}

@media(max-width:800px){:root{--nav-w:0px}.shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:10px 8px 40px}}
@media(max-width:800px){.sidebarToggle{display:flex}}
.sidebar.overlay{display:flex!important;position:fixed;top:0;left:0;z-index:300;width:200px;height:100vh;box-shadow:6px 0 26px rgba(0,0,0,.6)}
.sidebarBackdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:250;background:rgba(8,5,3,.55)}
.sidebarBackdrop.show{display:block}

@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.detailPanel.visible{display:block;animation:fadeIn .22s ease forwards}
.detailMeta h2{font-family:var(--font-display);font-weight:700;font-size:var(--heading-size,19px);letter-spacing:.01em;margin:0}
.detailMeta .badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}

/* Filters — rounded warm pills with a soft inset, arcade label */
.filterLabel{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);opacity:.6;margin-top:7px;text-align:center;width:100%}
.filterLabel:first-child{margin-top:0}
.filterBtnGroup{display:flex;flex-direction:column;gap:4px}
.filterBtn{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;
  padding:5px 13px;border-radius:999px;cursor:pointer;transition:all .16s;border:1.5px solid;opacity:.55;background:transparent}
.filterBtn:hover{opacity:.92}
.filterBtn.active{opacity:1;background:var(--fb-bg);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.filterSep{height:1px;width:100%;background:var(--border);margin:3px 0}
.filterClear{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;padding:4px 13px;
  border:1.5px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
  transition:all .15s;opacity:.55;align-self:center;margin-top:5px}
.filterClear:hover{opacity:.9;color:var(--cyan);border-color:var(--cool-line)}

.searchBox{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:9px;background:rgba(12,7,5,.5);
  color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;box-sizing:border-box;margin-top:5px;
  transition:border-color .15s,box-shadow .15s}
.searchBox::placeholder{color:var(--muted);opacity:.5}
.searchBox:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(92,200,240,.14)}

/* Keyword inline colors (game-meaningful — unchanged) */
.kw{cursor:pointer;border-bottom:1px dotted;transition:all .15s;white-space:nowrap}
.kw:hover{filter:brightness(1.4)}
.kw.t-skill{color:var(--kw-skill);border-bottom-color:rgba(245,197,66,.4)}
.kw.t-buff{color:var(--kw-buff);border-bottom-color:rgba(107,238,170,.4)}
.kw.t-debuff{color:var(--kw-debuff);border-bottom-color:rgba(255,155,107,.4)}
.kw.t-proj{color:var(--kw-proj);border-bottom-color:rgba(212,160,255,.4)}
.kw.t-holy{color:#fff4b0;border-bottom-color:rgba(255,244,176,.4)}
.kw.t-impact{color:#ffa05a;border-bottom-color:rgba(255,160,90,.4)}
.kw.t-fire{color:#ff7b5a;border-bottom-color:rgba(255,123,90,.4)}
.kw.t-ice{color:#5ae1ff;border-bottom-color:rgba(90,225,255,.4)}
.kw.t-lightning{color:#ffe05a;border-bottom-color:rgba(255,224,90,.4)}
.kwp{white-space:nowrap}
.kwp.t-skill{color:var(--kw-skill)}
.kwp.t-buff{color:var(--kw-buff)}
.kwp.t-debuff{color:var(--kw-debuff)}
.kwp.t-proj{color:var(--kw-proj)}
.kwp.t-holy{color:#fff4b0}
.kwp.t-impact{color:#ffa05a}
.kwp.t-fire{color:#ff7b5a}
.kwp.t-ice{color:#5ae1ff}
.kwp.t-lightning{color:#ffe05a}

/* Tooltip — warm frame, rounded title */
.tooltip.visible{opacity:1}
.tooltip .tt-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tooltip .tt-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.tooltip .tt-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--cyan)}