/* ===========================
   Overcooked! 2 Cheat Sheet
   styles.css
   =========================== */

:root {
  --oc-red: #e74c3c;
  --oc-orange: #e67e22;
  --oc-yellow: #f1c40f;
  --oc-dark: #2c3e50;
  --oc-bg: #fdf6ec;
  --oc-card: #fff;
  --shadow: 0 2px 8px rgba(0,0,0,.15);
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--oc-bg); color: var(--oc-dark); }

/* ===== HEADER ===== */
header {
  background: linear-gradient(135deg, var(--oc-red), var(--oc-orange));
  color: white; padding: 0 24px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 24px; height: 56px; }
header h1 { display: flex; align-items: center; gap: 10px; font-size: 1.3em; white-space: nowrap; }
.site-logo {
  width: 32px; height: 32px; border-radius: 8px; display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
nav { display: flex; gap: 8px; margin-left: auto; }
.nav-btn {
  background: rgba(255,255,255,.2); color: white; border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: .9em; transition: .2s;
}
.nav-btn:hover, .nav-btn.active {
  background: white; color: var(--oc-red); border-color: white;
}

/* ===== VIEWS ===== */
.view { display: none; }
.view.active { display: block; }

/* ===== WORLD MAP ===== */
.worldmap-container { max-width: 1400px; margin: 0 auto; padding: 20px; display: block; }
.worldmap-bg {
  position: relative; width: 100%; min-height: 860px;
  background:
    /* 世界地圖背景：海洋 + 雲層漸層 */
    radial-gradient(ellipse 60% 20% at 50% 5%, rgba(255,255,255,.5) 0%, transparent 100%),
    linear-gradient(180deg,
      #87ceeb 0%,     /* 天空 */
      #5da8d4 8%,
      #4a9c6d 15%,    /* 綠色大陸 (World 1) */
      #6bb56b 22%,
      #8b9d4e 30%,    /* 混合 (World 2/3) */
      #c4a44a 40%,    /* 沙漠/岩石 (World 4) */
      #7d8c6e 52%,    /* 礦坑 (World 5) */
      #4a6b8c 68%,    /* 峽谷/水流 (World 6) */
      #3a4a6e 100%    /* Kevin地下城 */
    );
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
#worldmap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#level-nodes { position: absolute; inset: 0; }

/* World sections overlay */
.world-zone {
  position: absolute; border: 2px dashed rgba(255,255,255,.4);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: rgba(255,255,255,.7); font-size: .8em; pointer-events: none;
}

/* Level node */
.level-node {
  position: absolute; width: 54px; height: 54px; transform: translate(-50%, -50%);
  cursor: pointer; z-index: 10;
}
.level-node .node-circle {
  width: 100%; height: 100%; border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
  background: #888;
}
.level-node .node-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.level-node:hover .node-circle { transform: scale(1.35); box-shadow: 0 4px 20px rgba(0,0,0,.7); z-index: 20; }
.level-node:focus-visible { outline: 3px solid var(--oc-yellow); outline-offset: 6px; border-radius: 50%; }
.level-node .node-label {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: white; font-size: 10px; font-weight:600;
  padding: 2px 6px; border-radius: 8px; white-space: nowrap; pointer-events: none;
}

/* World row label on map */
.world-row-label {
  position: absolute; left: 1%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color: white; font-size: 10px;
  padding: 2px 6px; border-radius: 6px; pointer-events: none;
  white-space: nowrap; z-index: 5; max-width: 165px; overflow: hidden; text-overflow: ellipsis;
}

/* World map level list is intentionally map-only; details open from nodes. */
#world-tabs { display: flex; flex-direction: column; gap: 8px; }
.world-panel {
  background: var(--oc-card); border-radius: 8px; padding: 14px;
  box-shadow: var(--shadow); margin-bottom: 12px; border-top: 3px solid var(--oc-orange);
}
.world-panel h2 { font-size: 1em; margin-bottom: 6px; color: var(--oc-dark); }
.world-panel p { color: #777; font-size: .82em; line-height: 1.45; }
.world-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.world-metric { background: #f8f8f8; border-radius: 8px; padding: 8px; }
.world-metric strong { display:block; font-size: 1.2em; color: var(--oc-dark); }
.world-metric span { display:block; font-size: .72em; color:#888; margin-top:2px; }
.world-selected-panel { display: grid; gap: 9px; }
.world-selected-kicker { color:#777; font-size:.76em; font-weight:800; line-height:1.25; }
.world-selected-panel h2 { margin:0; font-size:1.22em; overflow-wrap:anywhere; }
.world-selected-meta { display:flex; gap:6px; flex-wrap:wrap; }
.world-selected-meta span {
  background:#f7f7f7; border:1px solid #e7e7e7; color:#666;
  border-radius:999px; padding:3px 8px; font-size:.76em; font-weight:700;
}
.world-selected-grid { display:grid; grid-template-columns: 88px minmax(0, 1fr); gap:8px; }
.world-selected-grid div {
  background:#f8f8f8; border-radius:8px; padding:8px; min-width:0;
}
.world-selected-grid strong {
  display:block; color:var(--oc-dark); font-size:1.05em;
  white-space:normal; overflow-wrap:anywhere; line-height:1.2;
}
.world-selected-grid span { display:block; color:#888; font-size:.72em; margin-top:3px; }
.world-selected-line {
  display:grid; grid-template-columns:54px minmax(0, 1fr); gap:8px;
  font-size:.8em; line-height:1.35; color:#666;
}
.world-selected-line strong { color:var(--oc-dark); }
.world-selected-line span { overflow-wrap:anywhere; }
.world-selected-source {
  color:#6b9083; background:#f0fbf7; border:1px solid #cce8df;
  border-radius:7px; padding:6px 8px; font-size:.76em; font-weight:800;
}
.world-tab-heading {
  color:#7d6d5c; font-size:.78em; font-weight:900; letter-spacing:0;
  margin:4px 2px -2px;
}
.world-tab {
  background: var(--oc-card); border-radius: 8px; padding: 10px 12px;
  border: 1px solid #eee; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex; align-items: center; gap: 10px; transition: .2s;
  width: 100%; text-align: left; color: var(--oc-dark); cursor: pointer; font: inherit;
}
.world-tab:hover { border-color: #ddd; transform: translateY(-1px); }
.world-tab.active { border-color: var(--oc-orange); box-shadow: 0 0 0 2px rgba(230,126,34,.16), 0 1px 4px rgba(0,0,0,.08); }
.world-tab:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 2px; }
.world-tab .wt-color { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.world-tab .wt-name { font-size: .9em; font-weight: 600; }
.world-tab .wt-count { margin-left: auto; font-size: .8em; color: #888; }

/* ===== DLC GRID ===== */
.dlc-dashboard {
  max-width: 1400px; margin: 20px auto 0; padding: 0 20px;
}
.dlc-overview {
  background: var(--oc-card); border-radius: 8px; box-shadow: var(--shadow);
  padding: 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:3px solid var(--oc-orange);
}
.section-eyebrow {
  color:#9a7a5c; font-size:.72em; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
}
.dlc-overview h2 { margin-top:2px; font-size:1.35em; color:var(--oc-dark); }
.dlc-overview-metrics { display:grid; grid-template-columns: repeat(4, minmax(86px, 1fr)); gap:10px; }
.dlc-overview-metrics div {
  background:#f8f8f8; border:1px solid #eee; border-radius:8px; padding:9px 10px; min-width:0;
}
.dlc-overview-metrics strong { display:block; color:var(--oc-dark); font-size:1.2em; }
.dlc-overview-metrics span { display:block; color:#777; font-size:.75em; margin-top:2px; }
.dlc-jump-list {
  flex-basis:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:8px;
  padding:4px 1px 2px;
}
.dlc-jump-chip {
  display:grid;
  gap:2px;
  min-width:0;
  align-content:start;
  min-height:58px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--dlc-color) 45%, #ffffff);
  border-left:5px solid var(--dlc-color);
  background:color-mix(in srgb, var(--dlc-color) 12%, #ffffff);
  color:var(--oc-dark);
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.dlc-jump-chip:hover, .dlc-jump-chip:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  background:color-mix(in srgb, var(--dlc-color) 18%, #ffffff);
  outline:none;
}
.dlc-jump-chip span {
  font-weight:900;
  line-height:1.2;
  white-space:normal;
  overflow:visible;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.dlc-jump-chip small { color:#666; font-size:.74em; }
.dlc-grid { max-width: 1400px; margin: 20px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 30px; }
.dlc-section { background: var(--oc-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition:box-shadow .18s ease, transform .18s ease; }
.dlc-section.jump-highlight { box-shadow:0 0 0 4px rgba(230,126,34,.2), 0 8px 24px rgba(0,0,0,.18); transform:translateY(-2px); }
.dlc-header {
  padding: 14px 20px; color: white; display: flex; align-items: center; gap: 12px;
}
.dlc-header-title { display:grid; gap:2px; min-width:0; }
.dlc-header h2 { font-size: 1.1em; line-height:1.2; overflow-wrap:anywhere; }
.dlc-header-title span { font-size:.82em; opacity:.85; }
.dlc-header-metrics { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.dlc-header-metrics span {
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.32);
  border-radius:999px; padding:3px 8px; font-size:.76em; font-weight:800; transition:background .16s ease, transform .16s ease;
}
.dlc-header-metrics span:hover { background:rgba(255,255,255,.34); transform:translateY(-1px); }
.dlc-levels-grid {
  padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px;
}

/* ===== LEVEL CARD ===== */
.level-card {
  background: #f8f8f8; border-radius: 8px; overflow: hidden;
  cursor: pointer; border: 2px solid transparent; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.level-card:hover { border-color: var(--oc-orange); transform: translateY(-2px); box-shadow:0 0 0 3px rgba(230,126,34,.13), var(--shadow); background:#fffdf8; }
.level-card:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 3px; }
.lc-img-wrap { position:relative; background:#ddd; }
.level-card .lc-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #ddd; display: block; }
.level-card .lc-img-placeholder { width: 100%; aspect-ratio: 4/3; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 2em; }
.level-card .lc-info { padding: 9px; display:grid; gap:7px; }
.level-card .lc-name { font-size: .85em; font-weight: 700; margin-bottom: 3px; overflow-wrap: anywhere; line-height: 1.2; }
.level-card .lc-meta { display:flex; gap:5px; flex-wrap:wrap; min-height:22px; align-items:flex-start; }
.level-card .lc-meta span {
  background:#fff; border:1px solid #e2e2e2; border-radius:999px; color:#666;
  padding:2px 6px; font-size:.7em; font-weight:700; line-height:1.25; white-space:nowrap;
}
.level-card .lc-meta .level-type-badge {
  color:#fff;
  border-color:transparent;
}
.level-card .lc-meta .level-type-badge.score { background:#3f7fbd; }
.level-card .lc-meta .level-type-badge.horde { background:#9b4c88; }
.level-card .lc-stars { display: flex; gap: 2px; font-size: .7em; color: #888; }
.lc-stars span { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 1px 4px; }

/* ===== BASE GAME CARDS ===== */
.base-grid { max-width:1400px; margin:20px auto; padding:0 20px; display:flex; flex-direction:column; gap:26px; }
.base-overview { margin:0; }
.base-section {
  background:var(--oc-card); border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.05);
}
.base-section-header {
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:16px 18px; border-top:4px solid var(--world-color); border-bottom:1px solid #eee;
}
.base-section-header h2 { margin:2px 0 0; color:var(--oc-dark); font-size:1.1em; }
.base-section-header > span { color:#777; font-size:.82em; background:#f7f7f7; border:1px solid #e5e5e5; border-radius:999px; padding:4px 9px; white-space:nowrap; }
.base-levels-grid { padding:14px; }
.base-level-card .lc-img, .base-level-card .lc-img-placeholder { aspect-ratio:16/9; }
.lc-save-meta { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:2px; }
.save-slot-mini {
  border-radius:999px; padding:2px 6px; font-size:.68em; line-height:1.25; font-weight:900;
  border:1px solid #ddd; background:#fff; color:#777;
}
.save-slot-mini.done { border-color:#bce7c9; background:#eaf8ee; color:#147343; }
.save-slot-mini.seen { border-color:#cfe1ef; background:#eef7fd; color:#2f6686; }
.save-slot-mini.locked { border-color:#e5d5b4; background:#fff8e6; color:#8a641b; }
.save-slot-mini.slot-1 { --slot-color:#e67e22; border-left:4px solid var(--slot-color); box-shadow:inset 0 0 0 999px rgba(230,126,34,.08); }
.save-slot-mini.slot-2 { --slot-color:#3498db; border-left:4px solid var(--slot-color); box-shadow:inset 0 0 0 999px rgba(52,152,219,.08); }
.save-slot-mini.slot-3 { --slot-color:#27ae60; border-left:4px solid var(--slot-color); box-shadow:inset 0 0 0 999px rgba(39,174,96,.08); }
.save-slot-mini.max-star {
  position:relative;
  padding-right:22px;
  border-color:var(--slot-color, #f4c542);
  background:color-mix(in srgb, var(--slot-color, #f4c542) 16%, #ffffff);
  color:#24313f;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--slot-color, #f4c542) 24%, transparent), 0 2px 8px rgba(0,0,0,.12);
}
.save-slot-mini.max-star::after {
  content:"👑";
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-52%);
  font-size:.9em;
}

/* ===== RECIPE GRID ===== */
.recipe-summary {
  max-width: 1400px; margin: 20px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.recipe-summary-card {
  background: var(--oc-card); border-radius: 8px; box-shadow: var(--shadow);
  padding: 12px 14px; border-top: 3px solid var(--oc-orange);
}
.recipe-summary-card strong { display:block; font-size: 1.35em; color: var(--oc-dark); }
.recipe-summary-card span { display:block; color:#777; font-size:.82em; margin-top:3px; }
.recipe-filter {
  max-width: 1400px; margin: 16px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: minmax(170px, .8fr) minmax(250px, 1.15fr) minmax(260px, 2fr); gap: 12px;
}
.recipe-filter select, .recipe-filter input {
  padding: 8px 12px; border: 2px solid #ddd; border-radius: 8px; font-size: .9em;
  background: white; cursor: pointer;
}
.recipe-filter input { min-width: 200px; cursor: text; }
.recipe-category-bar {
  max-width: 1400px; margin: 12px auto 0; padding: 0 20px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width: thin;
}
.recipe-category-pill {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  border:1px solid #e0d8cf; background:#fff; color:var(--oc-dark);
  border-radius:999px; padding:6px 10px; cursor:pointer; font:inherit; font-size:.82em;
  box-shadow:0 1px 3px rgba(0,0,0,.06); white-space:nowrap;
}
.recipe-category-pill:hover, .recipe-category-pill:focus-visible {
  border-color:var(--oc-orange); background:#fff8ed; outline:none;
}
.recipe-category-pill.active {
  border-color:var(--oc-orange); box-shadow:0 0 0 2px rgba(230,126,34,.14), 0 1px 3px rgba(0,0,0,.06);
}
.category-thumb {
  width:28px; height:28px; object-fit:contain; border-radius:6px; background:#f4f4f4;
  border:1px solid #eee; flex-shrink:0;
}
.category-thumb-all, .category-thumb-missing {
  display:inline-flex; align-items:center; justify-content:center; font-size:.72em; font-weight:900; color:#777;
}
.recipe-related {
  max-width: 1400px; margin: 14px auto 0; padding: 14px 16px;
  background: #fff; border: 1px solid #ece4dc; border-left: 4px solid var(--oc-orange);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.recipe-related.hidden { display:none; }
.recipe-related-header {
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:12px;
}
.recipe-related-eyebrow { font-size:.72em; text-transform:uppercase; color:#9a7a5c; font-weight:700; letter-spacing:.04em; }
.recipe-related-title { color:var(--oc-dark); font-weight:800; font-size:1.15em; line-height:1.2; overflow-wrap:anywhere; }
.recipe-related-counts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; color:#777; font-size:.82em; }
.recipe-related-counts span { background:#f7f7f7; border:1px solid #e5e5e5; border-radius:999px; padding:3px 8px; white-space:nowrap; }
.recipe-related-columns { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.recipe-related h3 { margin:0 0 8px; font-size:.9em; color:var(--oc-dark); }
.recipe-related-empty { color:#777; margin-top:4px; }
.related-chip-list { display:flex; gap:7px; flex-wrap:wrap; align-items:center; min-width:0; }
.related-chip {
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  border:1px solid #ddd; border-radius:999px; background:#fafafa; color:var(--oc-dark);
  padding:5px 9px; font:inherit; font-size:.82em; cursor:pointer; line-height:1.2;
}
.related-chip:hover, .related-chip:focus-visible { border-color:var(--oc-orange); background:#fff8ed; outline:none; }
.level-related-chip {
  border-radius:8px;
  flex-direction:column;
  align-items:flex-start;
  border-color:color-mix(in srgb, var(--chip-color, var(--oc-orange)) 45%, #ffffff);
  border-left:5px solid var(--chip-color, var(--oc-orange));
  background:color-mix(in srgb, var(--chip-color, var(--oc-orange)) 11%, #ffffff);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.level-related-chip:hover, .level-related-chip:focus-visible {
  background:color-mix(in srgb, var(--chip-color, var(--oc-orange)) 18%, #ffffff);
  box-shadow:0 5px 14px rgba(0,0,0,.12);
  transform:translateY(-1px);
  outline:none;
}
.level-related-chip span { max-width:100%; overflow-wrap:anywhere; font-weight:700; }
.level-related-chip small { color:#777; font-size:.76em; }
.related-more { color:#888; font-size:.82em; padding:4px 2px; }
#recipe-grid { max-width: 1400px; margin: 16px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.recipe-card {
  background: var(--oc-card); border-radius: 8px; padding: 14px; box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.05); cursor: pointer; transition: .16s ease;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.recipe-card:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 3px; }
.recipe-card.missing-image { background: linear-gradient(180deg, #fff, #fff8f5); }
.recipe-card h3 { font-size: 1em; margin-bottom: 8px; color: var(--oc-dark); }
.recipe-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 42px; }
.recipe-card-title h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.friendly-name { display:inline-flex; flex-direction:column; gap:1px; min-width:0; line-height:1.15; }
.friendly-name > span:first-child { font-weight:800; color:var(--oc-dark); overflow-wrap:anywhere; }
.zh-name { color:#8a5a23; font-size:.82em; font-weight:700; }
.raw-name { color:#999; font-size:.72em; font-weight:600; overflow-wrap:anywhere; }
.recipe-open-indicator {
  margin-left:auto; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f7f7f7; border:1px solid #e2e2e2; color:#777; flex-shrink:0;
}
.recipe-card:hover .recipe-open-indicator { background: var(--oc-orange); border-color: var(--oc-orange); color:white; }
.recipe-card .recipe-dlc { font-size: .75em; color: #888; margin-bottom: 8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.recipe-tag { border:1px solid #e6e6e6; background:#fafafa; border-radius:999px; padding:2px 7px; }
.recipe-missing-note { color:#b45b32; border-color:#f1c7b3; background:#fff3ed; }
.recipe-raw-steps {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #777;
  font-family: inherit; font-size: .82em; line-height: 1.4;
}
.recipe-steps { display: flex; flex-direction: column; gap: 4px; }
.recipe-step { font-size:.82em; background:#f5f5f5; border-radius:6px; padding:5px 8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.recipe-step span:not(.step-imgs) { min-width:0; overflow-wrap:anywhere; line-height:1.25; }
.step-imgs { display:inline-flex; gap:3px; align-items:center; flex-shrink:0; }
.step-icon-img { width:22px; height:22px; object-fit:contain; border-radius:3px; background:#fff; padding:1px; box-shadow:0 0 0 1px #ddd; }

.recipe-flow-step {
  background:#f5f5f5; border-radius:6px; padding:6px 8px; font-size:.82em;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.flow-main { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; min-width:0; }
.flow-items, .flow-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.prepared-component {
  display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; max-width:100%;
  background:rgba(255,255,255,.55); border:1px dashed #ddd; border-radius:8px; padding:2px;
}
.ingredient-chip, .tool-chip {
  position:relative; display:inline-flex; align-items:center; gap:4px; min-width:0;
  background:#fff; border:1px solid #e2e2e2; border-radius:6px; padding:2px 5px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  max-width:100%;
}
.recipe-card .ingredient-chip { cursor: pointer; }
.recipe-card .ingredient-chip:hover { border-color: var(--oc-orange); background:#fff8ed; }
.ingredient-chip span:last-child, .tool-chip span:last-child {
  min-width:0; max-width:100%; white-space:nowrap; overflow-wrap:normal; word-break:keep-all; line-height:1.15;
}
.ingredient-chip .friendly-name { flex-direction:row; align-items:baseline; gap:4px; }
.ingredient-chip .zh-name { font-size:.8em; color:#9a6a2a; }
.flow-icon { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.tool-chip { background:#fff8ed; border-color:#efd2aa; font-weight:600; color:#6f4717; }
.tool-time {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; padding:1px 4px; border-radius:999px;
  background:#f3e1c8; color:#6f4717; font-size:.78em; font-weight:700;
}
.plate-chip { background:#eef9f1; border-color:#b8dfc1; color:#246b35; }
.plate-icon { font-size:20px; line-height:1; }
.tool-icon { width:26px; height:26px; }
.flow-plus, .flow-arrow { color:#888; font-weight:700; flex-shrink:0; align-self:center; }
.flow-arrow.mini { font-size:.82em; color:#aaa; }
.flow-caption { color:#777; font-size:.86em; padding-left:2px; }
.prep-badge {
  position:absolute; left:17px; top:-5px; min-width:15px; height:15px; border-radius:50%;
  background:#fff; border:1px solid #ddd; display:flex; align-items:center; justify-content:center;
  font-size:9px; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* Recipe card with image */
.mc-recipe-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0; }
.mc-recipe-header h4 { margin:0; font-size:.95em; color:var(--oc-dark); min-width:0; overflow-wrap:anywhere; line-height:1.2; }
.recipe-meal-img { width:40px; height:40px; object-fit:contain; border-radius:6px; background:#f0f0f0; border:1px solid #eee; flex-shrink:0; }
.recipe-meal-missing { display:flex; align-items:center; justify-content:center; color:#aaa; font-weight:700; }
.recipe-score { margin-left:auto; font-size:.75em; color:#888; background:#fff; border:1px solid #ddd; border-radius:6px; padding:2px 6px; white-space:nowrap; }
.recipe-detail-hero { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
.recipe-detail-img { width:76px; height:76px; object-fit:contain; border-radius:8px; background:#f2f2f2; border:1px solid #eee; flex-shrink:0; }
.recipe-detail-title h2 { margin:0 0 6px; font-size:1.35em; overflow-wrap:anywhere; }
.recipe-detail-meta { color:#777; font-size:.85em; display:flex; gap:8px; flex-wrap:wrap; }
.recipe-appears { margin-top:16px; padding-top:14px; border-top:1px solid #eee; }
.recipe-appears h3 { margin:0 0 8px; color:var(--oc-dark); }
.recipe-related-close {
  width:30px; height:30px; border:0; border-radius:50%; background:#eee; color:var(--oc-dark);
  cursor:pointer; font-size:1.25em; line-height:1; font-weight:900;
}
.recipe-related-close:hover, .recipe-related-close:focus-visible { background:var(--oc-red); color:#fff; outline:none; }
.level-related-chip.base { --chip-color:#3498db; }
.level-related-chip.dlc { --chip-color:#e67e22; }
.recipe-warning {
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #f1d28d;
  border-left:4px solid #f39c12;
  background:#fff8e8;
  color:#7a5620;
  font-size:.86em;
  line-height:1.45;
}
.recipe-source-note,
.empty-recipe-note {
  font-size:.82em;
  color:#777;
  margin-bottom:8px;
}
.empty-recipe-note {
  grid-column:1 / -1;
  border:1px dashed #ddd;
  border-radius:8px;
  background:#fafafa;
  padding:12px;
}

/* ===== SAVE LOADER ===== */
.save-panel { max-width:1200px; margin:20px auto; padding:0 20px; display:grid; gap:16px; }
.save-hero, .save-status, .save-card {
  background:var(--oc-card); border-radius:8px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
}
.save-hero { padding:18px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:18px; }
.save-hero h2 { margin:2px 0 8px; color:var(--oc-dark); }
.save-hero p { margin:0; color:#666; line-height:1.5; }
.save-browser-note { margin-top:8px !important; font-size:.86em; color:#85632a !important; }
.save-paths { display:grid; gap:7px; color:#666; font-size:.86em; }
.save-paths span { min-width:0; overflow-wrap:anywhere; }
.save-paths code { font-size:.9em; overflow-wrap:anywhere; white-space:normal; }
.save-macos-guide {
  background:var(--oc-card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:14px;
  display:grid;
  gap:12px;
}
.save-macos-guide-header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  color:var(--oc-dark);
}
.save-macos-steps {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.save-macos-steps figure {
  margin:0;
  display:grid;
  gap:8px;
}
.save-macos-steps img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  border-radius:7px;
  border:1px solid rgba(0,0,0,.1);
  background:#f5f5f5;
  cursor:zoom-in;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.save-macos-steps img:hover,
.save-macos-steps img:focus-visible {
  border-color:var(--oc-orange);
  box-shadow:0 0 0 3px rgba(230, 126, 34, .22);
  transform:translateY(-1px);
  outline:none;
}
.save-actions { display:flex; gap:12px; flex-wrap:wrap; }
.save-button {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 16px; border-radius:8px; background:var(--oc-orange);
  color:white; font-weight:800; cursor:pointer; box-shadow:var(--shadow); border:0; font:inherit;
}
.save-button.secondary { background:#fff; color:var(--oc-dark); border:1px solid #ddd; }
.save-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.visually-hidden-file-input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.save-status { padding:12px 14px; color:#666; }
.save-summary-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.save-card {
  padding:14px;
  border-top:3px solid var(--oc-orange);
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-items:center;
  justify-items:center;
  text-align:center;
}
.save-card-art {
  width:min(100%, 210px);
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:7px;
  background:#f4f4f4;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.save-card-body { min-width:0; }
.save-card.slot-1 { --slot-color:#e67e22; border-top-color:var(--slot-color); }
.save-card.slot-2 { --slot-color:#3498db; border-top-color:var(--slot-color); }
.save-card.slot-3 { --slot-color:#27ae60; border-top-color:var(--slot-color); }
.save-card h3 { margin:0 0 3px; color:var(--oc-dark); }
.save-card h3 { overflow-wrap:normal; word-break:normal; }
.save-card small { color:#888; overflow-wrap:anywhere; }
.save-metrics { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:2px; }
.save-metrics span {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#f7f7f7; border:1px solid #e5e5e5; border-radius:8px; padding:7px 9px; color:#666; font-size:.84em;
}
.save-metrics b { color:#777; font-size:.78em; text-transform:uppercase; letter-spacing:.03em; }
.save-metrics strong { color:var(--oc-dark); font-size:1.05em; }
.save-metrics .max-star {
  border-color:var(--slot-color, #f4c542);
  background:color-mix(in srgb, var(--slot-color, #f4c542) 14%, #ffffff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--slot-color, #f4c542) 20%, transparent);
}
.save-metrics .max-star b::after { content:" 👑"; }
.save-metrics .max-star strong { color:#24313f; }
.save-card-note { grid-column:1 / -1; margin:0; color:#8a6b32; font-size:.78em; line-height:1.4; }
.save-error { border-top-color:#c0392b; }
.save-error p { color:#a33; margin:8px 0 0; overflow-wrap:anywhere; }
.app-toast {
  position:fixed;
  top:64px;
  right:18px;
  z-index:1000;
  max-width:min(420px, calc(100vw - 36px));
  padding:11px 14px;
  border-radius:8px;
  background:var(--oc-dark);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  font-weight:800;
  line-height:1.35;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.app-toast.show {
  opacity:1;
  transform:translateY(0);
}
.save-overview-strip {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:12px 0 4px;
}
.save-overview-pill {
  min-width:160px;
  display:grid;
  gap:2px;
  padding:9px 11px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
}
.save-overview-pill strong {
  color:var(--oc-dark);
  font-size:.88em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.save-overview-pill span {
  color:var(--oc-orange);
  font-weight:800;
}

/* Character sections */
.char-group { margin-bottom:32px; }
.char-group-title { font-size:1.1em; color:var(--oc-dark); margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid #eee; }
.char-subgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }

/* DLC level placeholder */
.lc-img-placeholder { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#ddd,#eee); display:flex; align-items:center; justify-content:center; font-size:1.8em; color:#aaa; }
.step-icon { font-size: 1em; margin-right: 4px; }

/* ===== CHARACTER GRID ===== */
#character-grid { max-width: 1400px; margin: 20px auto; padding: 0 20px; }
.character-source-note {
  max-width: 980px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #eadfce;
  border-left: 4px solid var(--oc-orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
  color: #566;
}
.character-source-note strong { color: var(--oc-dark); }
.character-source-note a { color: var(--oc-red); font-weight: 700; }
.chef-card { background: var(--oc-card); border-radius: var(--radius); padding: 10px; text-align: center; box-shadow: var(--shadow); transition: .2s; }
.chef-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.local-chef-card { cursor: zoom-in; }
.local-chef-card:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 3px; }
.chef-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 2px solid #eee; display: block; margin: 0 auto 6px; background: #f0f0f0; }
.chef-img-zoomable { cursor: zoom-in; }
.fandom-chef-card .chef-img { object-fit: contain; background: #f8fafc; }
.chef-source-link { display: block; }
.chef-name { font-size: .8em; font-weight: 600; }
.chef-dlc { font-size: .72em; color: #999; }
.character-archive {
  max-width: 1400px;
  margin: 26px auto;
  padding: 12px 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid #e5e0d8;
  border-radius: var(--radius);
}
.character-archive summary { cursor: pointer; font-weight: 800; color: var(--oc-dark); }
.character-archive p { margin: 8px 0 14px; color: #777; }
.archived-chef-card { opacity: .88; }

/* ===== ACHIEVEMENTS ===== */
#achievement-grid { max-width: 1400px; margin: 20px auto; padding: 0 20px; }
.achievement-hero {
  background: var(--oc-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
  border-left: 4px solid var(--oc-orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.achievement-hero h2 { font-size: 1.25em; margin-bottom: 5px; }
.achievement-hero p { color: #666; font-size: .9em; line-height: 1.45; margin-bottom: 8px; }
.achievement-hero a { color: var(--oc-red); font-weight: 800; text-decoration: none; }
.achievement-hero a:hover { text-decoration: underline; }
.achievement-source { color:#666; font-size:.88em; line-height:1.45; }
.achievement-stats { display: grid; grid-template-columns: minmax(120px, 1fr); gap: 10px; min-width: 150px; }
.achievement-stats div {
  background: #fff8ed;
  border: 1px solid #f0d7b3;
  border-radius: 8px;
  padding: 10px 12px;
}
.achievement-stats strong { display:block; font-size: 1.35em; color: var(--oc-dark); }
.achievement-stats span { display:block; margin-top:2px; color:#777; font-size:.78em; }
.achievement-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.achievement-card {
  background: var(--oc-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
  transition: transform .16s ease, box-shadow .16s ease;
}
.achievement-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.achievement-icon {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eee;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.12);
}
.achievement-body { min-width: 0; flex: 1; }
.achievement-title-row { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.achievement-title-row h3 {
  font-size: .94em;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--oc-dark);
}
.achievement-card p {
  color: #666;
  font-size: .8em;
  line-height: 1.35;
  margin: 6px 0 0;
}
.achievement-card.achieved {
  border-color:#bce7c9;
  box-shadow:0 0 0 2px rgba(46, 204, 113, .12), var(--shadow);
}
.achievement-state {
  flex:0 0 auto; border-radius:999px; border:1px solid #ddd; background:#fff;
  color:#777; font-size:.68em; font-weight:900; padding:2px 6px; white-space:nowrap;
}
.achievement-card.achieved .achievement-state {
  border-color:#bce7c9; background:#eaf8ee; color:#147343;
}

/* ===== MODAL ===== */
.modal { position: fixed; inset: 0; z-index: 200; }
.modal.hidden { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.modal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--oc-card); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.4);
  width: min(1080px, 95vw); max-height: 88vh; overflow-y: auto;
}
.modal-close {
  position: sticky; top: 10px; float: right; margin: 10px 10px 0 0;
  background: #eee; border: none; border-radius: 50%; width: 32px; height: 32px;
  font-size: 1.1em; cursor: pointer; z-index: 1;
}
.modal-close:hover { background: var(--oc-red); color: white; }
.modal-content { padding: 24px; clear: both; }

/* Modal content sections */
.mc-header { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; }
.mc-preview { width: 220px; flex-shrink: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.mc-preview img { width: 100%; display: block; }
.preview-zoomable { cursor: zoom-in; }
.mc-title h2 { font-size: 1.5em; color: var(--oc-dark); margin-bottom: 8px; }
.mc-title .mc-world { color: var(--oc-orange); font-weight: 600; font-size: .9em; margin-bottom: 12px; }

/* Score table */
.score-section h3, .recipe-section h3 {
  font-size: 1em; font-weight: 700; color: var(--oc-dark);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid #eee;
}
.score-table { width: 100%; border-collapse: collapse; font-size: .9em; margin-bottom: 16px; }
.score-table th { background: var(--oc-dark); color: white; padding: 8px 12px; text-align: left; }
.score-table td { padding: 7px 12px; border-bottom: 1px solid #eee; }
.score-table tr:hover td { background: #fafafa; }
.star-1 { color: #cd7f32; } .star-2 { color: #aaa; } .star-3 { color: #f1c40f; } .star-4 { color: #2ecc71; }
.horde-target {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f4f8fb; border: 1px solid #d8e6ee; border-radius: 8px;
  padding: 12px 14px; color: var(--oc-dark);
}
.horde-target strong { color: #16a085; font-size: 1.05em; }
.horde-target span { color: #666; font-size: .9em; }
.unlock-condition {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid #b7e3d4;
  border-left: 4px solid #16a085;
  border-radius: 8px;
  background: #f0fbf7;
  color: var(--oc-dark);
  font-size: .86em;
  line-height: 1.45;
}
.unlock-condition-title {
  font-weight: 900; margin-bottom: 5px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.confidence-badge {
  display:inline-flex; align-items:center; min-height:22px; padding:2px 8px;
  border-radius:999px; font-size:.78em; font-weight:900; border:1px solid transparent;
}
.confidence-verified { color:#126b43; background:#e7f8ed; border-color:#bce7c9; }
.confidence-source { color:#285a7a; background:#edf7fd; border-color:#c6e3f3; }
.confidence-needs-check { color:#8a5b1c; background:#fff6df; border-color:#ecd49f; }
.unlock-extra { color: #555; }
.unlock-source { margin-top: 4px; color: #6b9083; font-size: .86em; }
.save-progress {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d8e6ee;
  border-left: 4px solid #3498db;
  border-radius: 8px;
  background: #f4f9fc;
}
.save-progress-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.save-progress-head h3 { margin:0; color:var(--oc-dark); font-size:.98em; }
.save-progress-head span { color:#5b7890; font-size:.78em; font-weight:900; }
.save-slot-list { display:grid; gap:7px; }
.save-slot-row {
  display:grid; grid-template-columns: minmax(120px, 1.2fr) repeat(3, minmax(70px, auto));
  gap:8px; align-items:center; background:#fff; border:1px solid #e0edf4;
  border-radius:7px; padding:7px 9px; font-size:.82em; color:#555;
}
.save-slot-row strong { color:var(--oc-dark); }
.save-slot-row.completed { border-color:#bce7c9; background:#f5fcf7; }
.save-slot-row.slot-1 { --slot-color:#e67e22; border-left:4px solid var(--slot-color); }
.save-slot-row.slot-2 { --slot-color:#3498db; border-left:4px solid var(--slot-color); }
.save-slot-row.slot-3 { --slot-color:#27ae60; border-left:4px solid var(--slot-color); }
.save-slot-row.max-star {
  border-color:var(--slot-color, #f4c542);
  background:color-mix(in srgb, var(--slot-color, #f4c542) 12%, #ffffff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--slot-color, #f4c542) 18%, transparent);
}
.save-slot-row.max-star strong::after { content:" 👑"; }
.source-details {
  margin: 0 0 12px;
  border: 1px solid #e7e1d8;
  border-radius: 8px;
  background: #fffaf2;
  color: #6e6255;
  font-size: .78em;
}
.source-details summary {
  cursor: pointer;
  padding: 8px 10px;
  font-weight: 800;
  color: var(--oc-dark);
}
.source-details div {
  padding: 0 10px 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Recipe cards in modal */
.mc-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: stretch; }
.mc-recipe-card { background: #f8f8f8; border-radius: 8px; padding: 12px; min-width:0; overflow:hidden; }
.mc-recipe-card h4 { font-size: .95em; margin-bottom: 8px; color: var(--oc-dark); }
.step-row { display: flex; align-items: flex-start; gap: 6px; font-size: .82em; margin-bottom: 4px; }
.step-row .step-icon { flex-shrink: 0; font-size: 1.1em; }
.step-row .step-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }

/* Image lightbox */
.image-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.image-lightbox.hidden { display: none; }
.image-lightbox img {
  max-width: min(1200px, 94vw); max-height: 90vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.55); background: #111;
}
.image-lightbox-close {
  position: absolute; top: 18px; right: 20px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.9);
  color: var(--oc-dark); font-size: 1.4em; cursor: pointer;
}
.image-lightbox-close:hover { background: var(--oc-red); color: white; }

/* Responsive */
@media (max-width: 768px) {
  header { padding: 8px 14px; }
  .header-inner { height: auto; flex-wrap: wrap; gap: 8px 12px; }
  header h1 { width: 100%; font-size: 1.08em; }
  nav {
    width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex: 0 0 auto; }
  .worldmap-container { flex-direction: column; }
  #world-tabs { flex-direction: row; flex-wrap: wrap; }
  .dlc-overview { flex-direction:column; align-items:stretch; }
  .dlc-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlc-header { align-items:flex-start; flex-direction:column; }
  .dlc-header-metrics { margin-left:0; justify-content:flex-start; }
  .dlc-levels-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .recipe-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-filter { grid-template-columns: 1fr; }
  .save-hero { grid-template-columns:1fr; }
  .save-macos-guide-header { flex-direction:column; gap:4px; }
  .save-macos-steps { grid-template-columns:1fr; }
  .save-slot-row { grid-template-columns: 1fr 1fr; }
  .recipe-related { margin-left:20px; margin-right:20px; }
  .recipe-related-header { flex-direction:column; }
  .recipe-related-counts { justify-content:flex-start; }
  .recipe-related-columns { grid-template-columns:1fr; }
  .achievement-hero { flex-direction: column; align-items: stretch; }
  .achievement-stats { min-width: 0; }
  .mc-header { flex-direction: column; }
  .mc-preview { width: 100%; }
}