:root {
  --bg:        #0e0f13;
  --bg-2:      #15171d;
  --panel:     #1b1e26;
  --panel-2:   #21252f;
  --border:    #2a2f3a;
  --text:      #e7e9ee;
  --muted:     #9aa0ad;
  --faint:     #6b7280;
  --accent:    #7c9cff;
  --accent-2:  #ffcf6b;
  --good:      #6bd88a;
  --bad:       #ff7a7a;

  --rar-common:    #b8bec9;
  --rar-uncommon:  #6bd88a;
  --rar-rare:      #5aa9ff;
  --rar-epic:      #c77dff;
  --rar-legendary: #ffb347;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --maxw: 1180px;
  --page-bg: radial-gradient(1200px 600px at 70% -10%, #1a1d29 0%, #0e0f13 55%);
  --header-bg: rgba(14,15,19,.82);
  --on-accent: #0e0f13;
}

:root[data-theme="light"] {
  --bg:        #f4f6f9;
  --bg-2:      #e9edf3;
  --panel:     #ffffff;
  --panel-2:   #f1f4f8;
  --border:    #dce0e8;
  --text:      #1a1d26;
  --muted:     #5b616e;
  --faint:     #949aa6;
  --accent:    #3f63d0;
  --accent-2:  #c9821a;
  --good:      #2e9e57;
  --bad:       #d24747;

  --rar-common:    #767d8a;
  --rar-uncommon:  #2e9e57;
  --rar-rare:      #2f7fd9;
  --rar-epic:      #9b4fd0;
  --rar-legendary: #c9821a;

  --shadow: 0 6px 22px rgba(30,40,70,.12);
  --page-bg: radial-gradient(1200px 600px at 70% -10%, #e9eef7 0%, #f4f6f9 55%);
  --header-bg: rgba(255,255,255,.82);
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  background: var(--page-bg) fixed;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ---- header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: .3px; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #10121a; font-weight: 900; font-size: .95rem;
}
.brand small { color: var(--muted); font-weight: 500; }
.nav-links { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.nav-links a {
  color: var(--muted); padding: .35rem .6rem; border-radius: 8px; font-size: .9rem;
}
.nav-links a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.nav-links a.active { color: var(--text); background: var(--panel-2); }

/* ---- layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 1rem 4rem; }
.page-head { margin: .5rem 0 1.4rem; }
.page-head h1 { margin: 0 0 .2rem; font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.page-head p { margin: 0; color: var(--muted); }
.crumb { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }

/* ---- hub hero ---- */
.hero {
  text-align: center; padding: 2.6rem 1rem 1.4rem;
}
.hero h1 { font-size: clamp(2.2rem, 7vw, 4rem); margin: 0 0 .3rem; letter-spacing: -.5px; }
.hero .grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 620px; margin: .4rem auto 0; }

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .7rem; max-width: 900px; margin: 1.8rem auto 0;
}
.stat-strip .stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem .6rem; text-align: center;
}
.stat .n { font-size: 1.5rem; font-weight: 800; }
.stat .l { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }

/* ---- section grid of hub cards ---- */
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.hub-card {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem; transition: .15s ease; color: var(--text);
}
.hub-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.hub-card .ico { font-size: 1.7rem; }
.hub-card h3 { margin: .5rem 0 .2rem; }
.hub-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.hub-card .count { color: var(--accent-2); font-weight: 700; font-size: .82rem; }

/* ---- toolbar (search + filters) ---- */
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.toolbar input[type="search"], .toolbar select {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: .55rem .8rem; border-radius: 10px; font-size: .92rem; outline: none;
}
.toolbar input[type="search"] { min-width: 220px; flex: 1; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--accent); }
.chiprow { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  padding: .35rem .7rem; border-radius: 999px; font-size: .82rem; cursor: pointer;
}
.chip.active { background: var(--accent); color: #10121a; border-color: var(--accent); font-weight: 700; }
.result-count { color: var(--faint); font-size: .85rem; margin-left: auto; }

/* ---- entity card grid ---- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem;
}
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: .15s ease; color: var(--text); display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.thumb {
  aspect-ratio: 1 / 1; background: var(--bg-2); display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; padding: 10%; }
.thumb .ph { color: var(--faint); font-size: 1.8rem; font-weight: 800; }
.card .body { padding: .6rem .7rem .75rem; }
.card .body h4 { margin: 0 0 .25rem; font-size: .95rem; }
.card .meta { color: var(--muted); font-size: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 6px; font-size: .72rem;
  border: 1px solid var(--border); color: var(--muted);
}
.card.rar { border-top: 3px solid var(--border); }

/* ---- detail ---- */
.detail { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem; align-items: start; }
.detail .portrait {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
}
.detail .portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; padding: 8%; }
.detail h1 { margin: 0 0 .3rem; }
.tags { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 1rem; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .7rem; margin: 1rem 0; }
.statbox { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; }
.statbox .k { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; }
.statbox .v { font-size: 1.2rem; font-weight: 800; }

table.data { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .92rem; }
table.data th, table.data td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
table.data th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; }
table.data tr:hover td { background: var(--panel); }

.pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem;
  border-radius: 999px; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--border);
}

.section-title { margin: 1.8rem 0 .6rem; font-size: 1.05rem; color: var(--text); border-left: 3px solid var(--accent); padding-left: .6rem; }

.effect-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.effect-list .fx { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: .3rem .6rem; font-size: .85rem; }

/* ---- prose (guide / faq / patch) ---- */
.prose { max-width: 760px; }
.prose h2 { margin: 2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.prose h3 { margin: 1.4rem 0 .4rem; }
.prose p, .prose li { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose code { background: var(--panel-2); padding: .1rem .4rem; border-radius: 6px; font-size: .9em; }
.callout {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: .9rem 1.1rem; margin: 1rem 0;
}
.faq-q { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin: .7rem 0; }
.faq-q h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.faq-q p { margin: 0; color: var(--text); }

.patch { border-left: 2px solid var(--border); padding-left: 1.2rem; margin-left: .3rem; }
.patch .rel { position: relative; padding-bottom: 1.4rem; }
.patch .rel::before {
  content: ""; position: absolute; left: -1.58rem; top: .35rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
}
.patch .rel h3 { margin: 0; }
.patch .rel .date { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ---- misc ---- */
.notice {
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; color: var(--muted); text-align: center;
}
.notice strong { color: var(--text); }
.back { display: inline-block; margin-bottom: 1rem; color: var(--muted); }
.empty { color: var(--faint); text-align: center; padding: 3rem 1rem; }
.footer { border-top: 1px solid var(--border); color: var(--faint); font-size: .85rem;
  text-align: center; padding: 2rem 1rem; margin-top: 2rem; }
.footer a { color: var(--muted); }

/* ---- portal (app list) ---- */
.app-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; max-width: 900px; margin: 1.5rem auto 0;
}
.app-tile {
  display: flex; align-items: center; gap: 1rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; transition: .15s ease; position: relative; overflow: hidden;
}
.app-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--tile-accent, var(--accent));
}
.app-tile:hover { transform: translateY(-3px); border-color: var(--tile-accent, var(--accent));
  box-shadow: var(--shadow); text-decoration: none; }
.app-icon {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-2), var(--panel-2));
  border: 1px solid var(--border); display: grid; place-items: center;
}
.app-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8%; image-rendering: auto; }
.app-icon span { font-size: 2rem; }
.app-info { flex: 1; min-width: 0; }
.app-info h2 { margin: 0 0 .2rem; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.app-info p { margin: 0; color: var(--muted); font-size: .9rem; }
.app-status {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tile-accent, var(--accent)); border: 1px solid var(--border);
  padding: .05rem .4rem; border-radius: 999px;
}
.app-go { color: var(--faint); font-size: 1.4rem; flex: 0 0 auto; transition: .15s ease; }
.app-tile:hover .app-go { color: var(--tile-accent, var(--accent)); transform: translateX(3px); }

/* back-to-portal link in app header */
.nav .portal-back {
  color: var(--faint); font-size: .8rem; margin-right: .2rem; white-space: nowrap;
}
.nav .portal-back:hover { color: var(--text); text-decoration: none; }

/* ---- tabs (Normal / Hard) ---- */
.tabs { display: flex; gap: .4rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
.tab {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  padding: .45rem 1.1rem; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: .12s ease;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- theme toggle ---- */
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
  transition: .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---- map artwork ---- */
.map-art {
  margin: .4rem 0 1.3rem; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
}
.map-art img { width: 100%; max-height: 72vh; object-fit: contain; display: block; }

@media (max-width: 640px) {
  .detail { grid-template-columns: 1fr; }
  .detail .portrait { max-width: 240px; margin: 0 auto; }
  .nav-links { width: 100%; overflow-x: auto; }
  .app-list { grid-template-columns: 1fr; }
}

/* ---- World route graph (Maps page) ---- */
.route { display:flex; flex-direction:column; align-items:center; margin:1.25rem 0; }
.route-tier { display:flex; justify-content:center; }
.route-branches { display:flex; justify-content:center; gap:1.25rem; flex-wrap:wrap; align-items:flex-start; }
.branch { display:flex; flex-direction:column; align-items:center; }
.branch-label { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:.4rem; }
.route-down { width:2px; height:26px; background:var(--border); }
.route-down.sm { height:20px; }
.route-down.dashed { background:repeating-linear-gradient(var(--border) 0 4px, transparent 4px 8px); }
.route-gate { margin-top:26px; }
.route-note { text-align:center; color:var(--faint); font-size:.85rem; margin-top:1rem; }
.wnode { display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none;
  width:152px; padding:.9rem .75rem; border-radius:var(--radius); background:var(--panel);
  border:1px solid var(--border); border-top:3px solid var(--wc,var(--accent)); color:var(--text);
  box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s ease; }
.wnode:hover { transform:translateY(-3px); border-color:var(--wc,var(--accent)); }
.wnode .wicon { font-size:1.9rem; line-height:1; }
.wnode .wname { font-weight:700; font-size:1.02rem; }
.wnode .wmeta { font-size:.78rem; color:var(--muted); text-align:center; }
.wnode.locked { opacity:.55; cursor:default; box-shadow:none; }
.wnode.secret { border-style:dashed; background:var(--panel-2); }
@media (max-width:640px){ .route-branches{ gap:.75rem; } .wnode{ width:44vw; max-width:170px; } }

/* ---- World map: spatial compass layout ---- */
.worldmap { overflow-x:auto; padding:1.25rem 0 .5rem; }
.wm-grid {
  display:grid; width:max-content; margin:0 auto; align-items:center; justify-items:center; gap:6px;
  grid-template-columns: auto 30px auto 30px auto 30px auto 30px auto;
  grid-template-rows: auto 24px auto 24px auto;
  grid-template-areas:
    ".    .  .    .  .      .  uw   .  ."
    ".    .  .    .  .      .  vu   .  ."
    "void h1 volc h2 forest h3 gl   h4 desert"
    ".    .  .    .  .      .  vd   .  ."
    ".    .  .    .  .      .  gate .  .";
}
.wm-cell { display:flex; }
.wm-conn.h { width:100%; height:2px; background:var(--border); align-self:center; }
.wm-conn.v { height:100%; min-height:24px; width:2px; background:var(--border); justify-self:center; }
.wm-conn.dashed { background:repeating-linear-gradient(90deg,var(--border) 0 5px,transparent 5px 10px); }
/* Mobile: keep the real compass (with connectors) but shrink nodes; .worldmap scrolls
   horizontally so the layout stays connected instead of collapsing to a straight list. */
@media (max-width:640px){
  .worldmap { padding-bottom:.75rem; }
  .wm-grid { gap:4px; grid-template-columns: auto 16px auto 16px auto 16px auto 16px auto; }
  .worldmap .wnode { width:108px; padding:.6rem .45rem; gap:.1rem; }
  .worldmap .wnode .wicon { font-size:1.5rem; }
  .worldmap .wnode .wname { font-size:.88rem; }
  .worldmap .wnode .wmeta { font-size:.68rem; }
  .mtier .mnode { flex-basis:150px; }
}

/* ---- side ad rails (AdSense-ready 3-column layout) ---- */
.ad-rail { display:none; }
@media (min-width:1600px){
  .ad-rail { display:block; position:fixed; top:88px; width:160px; z-index:15; }
  .ad-rail.left  { left:24px; }
  .ad-rail.right { right:24px; }
}
.ad-ph { width:160px; height:600px; border:1px dashed var(--border); border-radius:12px;
  background:var(--panel); display:grid; place-items:center; }
.ad-ph span { color:var(--faint); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg); }

/* ---- per-world map chain (travel order) ---- */
.mchain { display:flex; flex-direction:column; align-items:center; margin:1rem 0; }
.mnode { display:flex; align-items:center; gap:.8rem; width:100%; max-width:480px; text-decoration:none;
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--wc,var(--accent));
  border-radius:var(--radius); padding:.55rem .8rem; color:var(--text); box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease; }
.mnode:hover { transform:translateY(-2px); border-color:var(--wc,var(--accent)); }
.mnode .thumb { width:56px; height:56px; flex:0 0 56px; aspect-ratio:auto; border-radius:10px; border:1px solid var(--border); }
.mnode .thumb img { padding:2px; }
.mnode-body { flex:1; min-width:0; }
.mnode-body h4 { margin:0 0 .12rem; font-size:.98rem; }
.mnode-body .meta { color:var(--muted); font-size:.82rem; }
.mnode .app-go { color:var(--faint); font-size:1.15rem; }

/* ---- mobile nav ---- */
.nav-toggle { display:none; margin-left:auto; background:var(--panel); border:1px solid var(--border);
  color:var(--text); border-radius:8px; font-size:1.2rem; line-height:1; padding:.35rem .6rem; cursor:pointer; }
@media (max-width:760px){
  .nav-toggle { display:inline-block; }
  .nav-links { display:none; flex-basis:100%; flex-direction:column; margin-left:0; margin-top:.5rem; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.6rem .5rem; }
}

/* ---- loading + back-to-top ---- */
.loading { text-align:center; padding:4rem 1rem; color:var(--muted); }
.spinner { width:34px; height:34px; margin:0 auto 1rem; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:tw-spin .8s linear infinite; }
@keyframes tw-spin { to { transform:rotate(360deg); } }
.to-top { position:fixed; left:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); border:none; font-size:1.3rem; cursor:pointer;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s ease; z-index:40; }
.to-top.show { opacity:1; pointer-events:auto; transform:none; }

/* ---- breadcrumb + detail prev/next ---- */
.crumb { color:var(--muted); font-size:.85rem; margin-bottom:.6rem; }
.crumb a { color:var(--muted); } .crumb a:hover { color:var(--text); }
.crumb span { color:var(--text); }
.detail-nav { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
.detail-nav .pn { display:flex; gap:.5rem; }
.detail-nav .pn a, .detail-nav .pn .pn-off { font-size:.85rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:8px; }
.detail-nav .pn a { color:var(--text); background:var(--panel); }
.detail-nav .pn a:hover { border-color:var(--accent); text-decoration:none; }
.detail-nav .pn .pn-off { color:var(--faint); opacity:.5; }

/* ---- home global search ---- */
.home-search { max-width:620px; margin:1.4rem auto 0; }
.home-search input { width:100%; background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:.7rem 1rem; border-radius:12px; font-size:1rem; outline:none; }
.home-search input:focus { border-color:var(--accent); }
.g-results { margin-top:.6rem; }
.g-grp { margin-bottom:.5rem; }
.g-grp h4 { margin:.3rem 0; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.g-grp a { display:inline-block; margin:.15rem .3rem .15rem 0; padding:.3rem .6rem; background:var(--panel);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.88rem; }
.g-grp a:hover { border-color:var(--accent); text-decoration:none; }
.g-empty { color:var(--faint); font-size:.9rem; }

/* ---- tier badge ---- */
.badge.tier { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }

/* ---- item sets ---- */
.set-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.set-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.set-card h3 { margin:0 0 .6rem; font-size:1.05rem; }
.set-count { color:var(--faint); font-size:.78rem; font-weight:400; }

/* ---- per-world map tiers (branching) ---- */
.mtier { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; width:100%; }
.mtier .mnode { max-width:300px; flex:1 1 210px; }

/* ---- achievements ---- */
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.8rem; }
.ach-card { display:flex; gap:.7rem; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:.8rem .9rem; }
.ach-ico { font-size:1.6rem; line-height:1; flex:0 0 auto; }
.ach-body { flex:1; min-width:0; }
.ach-body h4 { margin:0 0 .2rem; font-size:.98rem; }
.ach-body p { margin:0 0 .5rem; color:var(--muted); font-size:.85rem; }
.ach-foot { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.ach-reward { display:inline-block; padding:.15rem .5rem; border-radius:6px; font-size:.78rem;
  font-weight:700; background:var(--panel-2); color:var(--good); border:1px solid var(--border); }
.ach-reward.unlock { color:var(--accent-2); }