/* Scenic edition: the Sakura island from the game is the page, the wiki floats on it in frosted
   glass, and every button is white with the game's navy outline. Loaded after styles.css.
   One look on purpose (a daytime sky), so the light palette wins over any saved dark theme. */
html:root:not([data-x]) {
  --bg: #36b8f5;
  --bg-2: rgba(255, 255, 255, .7);
  --surface: #ffffff;
  --surface-2: #f1f7ff;
  --ink: #131a40;
  --ink-2: #46527f;
  --ink-3: #6f7ca8;
  --line: #1a2150;
  --hair: #d3e1f4;
  --bolt: #ffc928;
  --bolt-2: #ff8a1f;
  --bolt-ink: #3b2400;
  --cyan: #1180f0;
  --cyan-2: #39d0ff;
  --good: #1a9a5b;
  --warn: #c96a05;
  --bad: #d42f40;
  --glass: rgba(255, 255, 255, .66);
  --glass-hi: rgba(255, 255, 255, .92);
  --glass-edge: rgba(255, 255, 255, .95);
  --lift: 0 14px 40px rgba(9, 36, 104, .22);
  --btn-shadow: 0 3px 0 var(--line);
  color-scheme: light;
}

body.scenic { background: var(--bg); }
body.scenic::before { background: var(--glass-hi); }

/* the scenery: a fixed layer (works on phones, unlike background-attachment on body) */
.scene {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 30%, rgba(4, 30, 110, .18) 100%),
    url("img/ui/scenery.webp") center 40% / cover no-repeat,
    var(--bg);
}

/* ---------- top bar: frosted white strip, white buttons ---------- */
.scenic .topbar {
  background: var(--glass-hi);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 2.5px solid var(--line);
}
.scenic .brand .wiki { background: #fff; border: 2px solid var(--line); color: var(--ink); box-shadow: 0 2px 0 var(--line); }
.scenic .search-btn {
  background: #fff; border: 2.5px solid var(--line); box-shadow: var(--btn-shadow); color: var(--ink-2); font-weight: 700;
}
.scenic .search-btn:hover { border-color: var(--line); background: #fbfdff; }
.scenic .search-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.scenic .icon-btn { background: #fff; border: 2.5px solid var(--line); box-shadow: var(--btn-shadow); color: var(--ink); }
.scenic .icon-btn:hover { border-color: var(--line); }
.scenic .play-btn {
  background: #fff; color: var(--ink); border: 2.5px solid var(--line); box-shadow: var(--btn-shadow);
}
.scenic .play-btn svg { color: #20b45a; }
.scenic .play-btn:hover { background: #fbfdff; }
.scenic kbd { background: #fff; }

/* ---------- left rail: a glass card of white buttons ---------- */
.scenic .rail {
  background: transparent; border-right: 0;
  padding: 16px 8px 24px max(14px, env(safe-area-inset-left, 0px));
  display: grid; align-content: start; gap: 12px;
}
.scenic .rail-group, .scenic .rail-foot {
  margin: 0; padding: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 2px solid var(--glass-edge); border-radius: 18px; box-shadow: var(--lift);
  gap: 5px;
}
.scenic .rail-group .eyebrow { padding: 2px 6px 4px; color: var(--ink-2); }
.scenic .rail a {
  background: #fff; border: 2px solid var(--hair); box-shadow: 0 2px 0 var(--hair);
  padding: 6px 10px; border-radius: 12px; transition: transform .08s, border-color .12s;
}
.scenic .rail a:hover { background: #fff; border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.scenic .rail a:active { transform: translateY(2px); box-shadow: none; }
.scenic .rail a.on { background: #fff; border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
.scenic .rail a.on::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex: none; margin-left: 2px; }
.scenic .rail a.on .count { color: var(--ink-2); }
.scenic .rail-foot { border-top: 2px solid var(--glass-edge); padding: 12px 14px; display: grid; }

/* ---------- content: one frosted sheet per page ---------- */
.scenic main#view { padding-block: 18px 40px; }
.scenic .page {
  padding: 26px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 2px solid var(--glass-edge); border-radius: 26px; box-shadow: var(--lift);
}
.scenic .foot {
  margin-top: 16px; padding: 14px 20px; border-top: 0;
  background: var(--glass); color: var(--ink-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 2px solid var(--glass-edge); border-radius: 18px;
}

/* home hero: a clear window onto the same scenery behind the frosted sheet */
.scenic .hero {
  background-image: url("img/ui/scenery.webp") !important;
  background-size: cover; background-position: center 40%; background-attachment: fixed;
}
.scenic .hero::before { background: linear-gradient(180deg, rgba(8, 20, 70, 0) 35%, rgba(8, 16, 52, .72) 100%); }

/* white controls everywhere */
.scenic .btn { background: #fff; border-width: 2.5px; box-shadow: var(--btn-shadow); }
.scenic .btn:hover { background: #fbfdff; }
.scenic .seg { background: #fff; border: 2.5px solid var(--line); box-shadow: var(--btn-shadow); }
.scenic .seg button { color: var(--ink-2); }
.scenic .seg button:hover:not(.on):not(:disabled) { background: var(--surface-2); }
.scenic .chip { background: #fff; border: 2px solid var(--hair); box-shadow: 0 2px 0 var(--hair); color: var(--ink-2); }
.scenic .chip:hover { border-color: var(--line); }
.scenic .chip.on { border-color: var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); }
.scenic .field { background: #fff; border: 2px solid var(--hair); }
.scenic .field:focus { border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.scenic .stat-tile, .scenic .howto, .scenic .tier, .scenic .track .lv, .scenic .update-list li, .scenic .gift { background: #fff; }
.scenic .tbl th { background: #f5f9ff; }
.scenic .note { background: #f2f8ff; }
.scenic .synced { background: rgba(6, 12, 40, .5); }

/* phones and tablets: the rail becomes a frosted drawer */
@media (max-width: 900px) {
  .scenic .rail {
    background: rgba(231, 244, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-right: 2.5px solid var(--line);
    padding: 14px 12px 24px max(12px, env(safe-area-inset-left, 0px));
  }
  .scenic .rail-group, .scenic .rail-foot { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .6); }
  .scenic main#view { padding-block: 12px 28px; }
  .scenic .page { padding: 18px 16px; border-radius: 20px; }
}
@media (max-width: 640px) {
  .scenic main#view { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .scenic .page { padding: 16px 14px; }
  .scenic .hero { background-attachment: scroll; }
}