/* shared additions: server / language switches, load failure, small links */
.sws{display:flex;gap:8px;margin-left:10px;flex:0 0 auto}
.sw{display:inline-flex;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.sw a{font-size:12px;padding:4px 9px;color:var(--mut);white-space:nowrap}
.sw a+a{border-left:1px solid var(--line2)}
.sw a:hover{color:var(--txt)}
.sw a.on{color:var(--cy);background:rgba(51,225,154,.08)}
.fail{color:#ffb454;margin-top:20px;font-size:14px}
.fail small{color:#61766a;margin-left:6px}
.empty{padding:18px 4px;color:#61766a;font-size:13.5px;margin:0}
a.more{font-size:12.5px;color:var(--cy);border-bottom:1px solid var(--cy-dim)}
nav.top{margin-left:auto}
@media (max-width:640px){
  header{flex-wrap:wrap;row-gap:8px}
  .sws{margin-left:auto}
  nav.top{order:3;margin-left:0;width:100%}
  nav.top a{padding:6px 10px 6px 0 !important;display:inline-block !important}
  .sw a{padding:4px 7px;font-size:11.5px}
}
/* English category names are longer than the two-letter Korean ones */
.drow{grid-template-columns:auto minmax(0,1fr) auto auto !important}
.dcat{padding:1px 7px !important;min-width:44px;white-space:nowrap}
@media (max-width:480px){.drow{grid-template-columns:auto minmax(0,1fr) auto !important}}

/* ---- main site header + tab rows on the DB pages (markup and base CSS come from site_shell.js) ---- */
:root{--panel2:#0a0f14;--panel3:#121b22;--mono:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;--pixel:'Pretendard',monospace;--radius:2px;--hot:#ff5f57;--mag:#ff5c8a;--good:#33e19a}
.shh{flex-wrap:wrap;gap:12px !important;padding:10px 0 9px !important}
.shh .shdl{margin-left:auto;background:var(--cy);color:#02160e;font-weight:800;font-size:13px;padding:8px 16px;border-radius:2px;white-space:nowrap;order:9}
.shh .shdl:hover{background:#5cf0b4}
.shh .langsw{display:none !important}          /* the DB bar below has its own language switch */
.shh .idsearch{margin-left:auto !important}
.shh .idsearch+* {margin-left:0}
.shh .idsearch~.shdl{margin-left:0}
nav.tabs{margin-bottom:0 !important;border-bottom:1px solid var(--line)}
nav.tabs .pico{width:15px;height:15px;margin-right:6px;vertical-align:-2px;image-rendering:pixelated}
.dbbar{display:flex;align-items:center;gap:12px;padding:4px 0 4px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.dbbar .mock{font-size:11px;color:var(--am);border:1px solid rgba(255,180,84,.4);padding:1px 7px;letter-spacing:.04em;flex:0 0 auto}
.dbbar nav.top{margin-left:0;display:flex;gap:2px}
.dbbar nav.top a{padding:5px 11px;font-size:13.5px;color:var(--mut);border-bottom:2px solid transparent}
.dbbar nav.top a:hover{color:var(--txt2)}
.dbbar nav.top a.on{color:var(--txt);border-bottom-color:var(--cy)}
.dbbar .sws{margin-left:auto}
@media (max-width:760px){
  .shh .idsearch{order:4;flex:1 1 100%;margin-left:0 !important}
  .shh .idsearch input{flex:1;width:auto !important}
  .shh .shdl{order:2;margin-left:auto !important}
  .dbbar{flex-wrap:wrap;gap:6px 10px}
  .dbbar nav.top{order:3;width:100%}
  .dbbar nav.top a{display:inline-block !important;padding:5px 12px 5px 0 !important}
}
.shh{padding:7px 0 6px !important}
.shh .mark{width:38px;height:38px}.shh .mark img{width:36px;height:36px}
/* tabs are links here (buttons on the main page): centre the label in the fixed-height row */
nav.tabs a{display:inline-flex;align-items:center;text-decoration:none}
nav.tabs .tr1 a{height:46px}
nav.tabs .tr2 a{height:38px}
.topline{margin-bottom:6px !important}

/* dungeon page: lore from the game data */
.lore{margin:-6px 0 16px;padding:12px 16px;border-left:2px solid var(--cy-dim);background:var(--panel);color:var(--txt2);font-size:13.5px;line-height:1.7;max-width:86ch}
.lore b{display:block;font-size:11.5px;color:var(--mut);letter-spacing:.06em;font-weight:600;margin-bottom:4px}

/* home: unlocked category tiles in the tile row */
a.fr-on>.pico{opacity:1;filter:none}
a.fr-on .lk b{color:var(--txt)}
a.fr-on footer .go2{color:var(--cy);font-style:normal;font-weight:600}
a.fr-on footer i{color:var(--txt2)}
a.fr-on::after{background:var(--cy-dim)}
a.fr-on:hover::after{background:var(--cy)}