/* Zelda Xtreme: modern theme (light, dark and Twilight). Loaded by header.php on every page except the interactive maps.
   Overrides css/stylesheet.css. Dark theme = :root[data-theme="dark"]. */

:root {
  --zx-bg: #f4f1ea;          /* warm parchment page background */
  --zx-card: #ffffff;
  --zx-ink: #1f2430;         /* headings */
  --zx-text: #3b4150;        /* body text */
  --zx-muted: #7a7f8c;
  --zx-line: #e7e2d8;
  --zx-red: #e5262d;         /* logo red */
  --zx-orange: #e27a3e;      /* old accent, now unused */
  --zx-green: #2b7a4b;       /* Hylian forest green: links, menus, buttons */
  --zx-green-dark: #1d5a36;
  --zx-green-tint: #ecf4ed;
  --zx-gold: #b8902f;        /* Triforce gold: icons and small details */
  --zx-gold-tint: #f6f0de;
  --zx-link: #23704a;
  --zx-radius: 14px;
  --zx-shadow: 0 1px 2px rgba(31, 36, 48, .06), 0 8px 24px rgba(31, 36, 48, .08);
}

/* ---- base ---- */
body, .site_wrap { background: var(--zx-bg); }
body { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--zx-text); -webkit-font-smoothing: antialiased; }
.site_wrap a { color: var(--zx-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site_wrap a:hover { color: var(--zx-green-dark); text-decoration: underline; }
.site_wrap p { line-height: 1.7; }

/* ---- breadcrumb / search bar under the header: lighter, glassy ---- */
#position { height: 45px; background: rgba(9, 17, 32, .55); -webkit-backdrop-filter: blur(.6px); backdrop-filter: blur(.6px);
  border-bottom: 0; box-shadow: inset 0 -2px 0 var(--zx-green); }
#position ul li, #position ul li a { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
#position ul li, #position ul li a { font-family: Inter, sans-serif; font-weight: 500; letter-spacing: .01em; }

/* ---- search: a small see-through button that grows into a round, frosted search field ---- */
#position .sb-search { height: 32px !important; min-width: 32px; width: 32px !important; margin: 6px 4px 0 0 !important; box-sizing: border-box; border-radius: 16px;
  background: transparent; border: 1px solid transparent; transition: width .35s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease !important; }
#position .sb-search:hover { background: rgba(0, 0, 0, .3); }
#position .sb-search.sb-search-open { width: 260px !important; background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
#position .sb-search .sb-icon-search, #position .sb-search.sb-search-open .sb-icon-search { background: transparent !important; width: 32px; height: 30px; line-height: 30px;
  font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
#position .sb-search-input { height: 30px; background: transparent !important; color: #fff; font: 500 14px Inter, sans-serif; padding: 0 36px 0 14px;
  opacity: 0; transition: opacity .25s ease .1s; }
#position .sb-search.sb-search-open .sb-search-input { opacity: 1; }
#position .sb-search-input::placeholder { color: rgba(255, 255, 255, .7); }
#position .sb-search-submit { width: 32px; height: 30px; line-height: 30px; }

/* ---- dropdown menus: rounded floating panels ---- */
.main-menu > ul > li.submenu > ul, .main-menu .menu-wrapper { border: 0 !important; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 20, 30, .08), 0 18px 40px rgba(15, 20, 30, .22); margin-top: 0; animation: zxMenuIn .18s ease-out; }  /* no gap: hover must reach the panel */
.main-menu > ul > li.submenu > ul { padding: 6px !important; min-width: 220px; }
/* same frosted parchment glass as the scrolled header */
.main-menu > ul > li.submenu > ul, .main-menu .menu-wrapper { background: rgba(250, 247, 240, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .7) !important; }
.main-menu .menu-wrapper .col-md-12, .main-menu .menu-wrapper ul, .main-menu > ul > li.submenu > ul li { background: transparent !important; }
@keyframes zxMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.main-menu ul li.submenu > ul:before, .main-menu .menu-wrapper:before { display: none !important; }  /* old pointer triangle */
.main-menu > ul > li.submenu > ul li { border: 0 !important; }
.main-menu > ul > li.submenu > ul li a { font: 500 14px Inter, sans-serif; color: var(--zx-ink) !important; padding: 9px 12px !important; border: 0 !important;
  border-radius: 9px; transition: background .15s, color .15s; }
.main-menu ul ul li:hover > a, .main-menu ul ul li:hover a > .sub_nav_icon { background-color: transparent !important; }   /* old purple (#694264) hover */
.main-menu > ul > li.submenu > ul li:hover > a, .main-menu > ul > li.submenu > ul li a:hover { background: var(--zx-green-tint) !important; color: var(--zx-green) !important; }
.main-menu .sub_nav_icon { background: none !important; width: 18px; margin-right: 8px; transition: color .15s, transform .15s; }
/* each menu icon gets its own colour, and turns green on hover */
.main-menu ul ul li:nth-child(8n+1) .sub_nav_icon { color: #3a7bd5 !important; }
.main-menu ul ul li:nth-child(8n+2) .sub_nav_icon { color: #d64545 !important; }
.main-menu ul ul li:nth-child(8n+3) .sub_nav_icon { color: #8e5cc4 !important; }
.main-menu ul ul li:nth-child(8n+4) .sub_nav_icon { color: #e0981f !important; }
.main-menu ul ul li:nth-child(8n+5) .sub_nav_icon { color: #2a9d8f !important; }
.main-menu ul ul li:nth-child(8n+6) .sub_nav_icon { color: #c2577f !important; }
.main-menu ul ul li:nth-child(8n+7) .sub_nav_icon { color: #4f6fae !important; }
.main-menu ul ul li:nth-child(8n+8) .sub_nav_icon { color: #b8902f !important; }
.main-menu ul ul li:hover .sub_nav_icon, .main-menu ul ul li a:hover .sub_nav_icon { color: var(--zx-green) !important; transform: scale(1.1); }
.main-menu .menu-wrapper { padding: 14px 16px 6px !important; }
.main-menu .menu-wrapper h3 { font: 700 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--zx-muted);
  border: 0 !important; margin: 4px 4px 2px; padding: 0; }
/* Games tiles: the icon gets its own box above the name, so long names can't run into it */
#game_nav li, #game_nav2 li { background-image: none !important; height: auto !important; width: 78px; margin: 0 2px 6px !important; vertical-align: top; border-radius: 10px; transition: background .15s; }
#game_nav li::before, #game_nav2 li::before { content: ""; display: block; height: 60px; background-repeat: no-repeat; background-position: inherit;
  background-image: url("https://www.zeldaxtreme.com/img/game_nav.png"); }
#game_nav2 li::before { background-image: url("https://www.zeldaxtreme.com/img/game_nav2.png"); }
#game_nav li.game_eow::before, #game_nav li.game_totk::before { background-image: none; }   /* no icon in the sprite for these yet */
#game_nav li a, #game_nav2 li a { display: block !important; width: auto !important; height: auto !important; padding: 0 2px 8px !important; font: 500 11.5px/1.25 Inter, sans-serif;
  color: var(--zx-ink) !important; text-align: center; }
/* hover: the tile rises and glows (background-color only: the 'background' shorthand would reset the sprite position) */
#game_nav li::before, #game_nav2 li::before { transition: transform .18s ease, filter .18s ease; }
#game_nav li:hover, #game_nav2 li:hover { background-color: transparent; }
#game_nav li:hover::before, #game_nav2 li:hover::before { transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 0 6px rgba(255, 214, 102, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .22)); }
#game_nav li:hover > a, #game_nav2 li:hover > a { color: var(--zx-green) !important; }
#game_nav2 { overflow: visible; }
#game_nav ul, #game_nav2 ul { display: flex; flex-wrap: wrap; padding-left: 0; margin: 0; }

/* Downloads (the last dropdown) opens towards the left so it stays on screen */
.main-menu > ul > li.submenu:nth-last-child(2) > ul { left: auto !important; right: 0 !important; }

/* Forums: a small pill button instead of a plain link (desktop menu only) */
@media (min-width: 992px) {
  .main-menu > ul > li > a.sidemenu { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 3px 12px 3px 10px !important; line-height: 20px;
    border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .45); color: #fff !important;
    transition: background .2s, border-color .2s; }
  .main-menu > ul > li > a.sidemenu::before { content: ""; display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-right: 6px; background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9c96a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.8A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
  .main-menu > ul > li > a.sidemenu .header_dropdown_menu, .main-menu > ul > li > a.sidemenu .header_dropdown_menu:hover { display: inline !important; color: #fff !important;
    font-size: 13.5px; font-weight: 600; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0; }   /* old red hover box */
  .main-menu > ul > li > a.sidemenu:hover { background: var(--zx-green); border-color: var(--zx-green); }
}

/* ---- header after scrolling: a light frosted bar that floats just below the top, with rounded corners ---- */
header.sticky { top: 10px !important; left: 14px !important; right: 14px !important; width: auto !important; height: 58px !important; border-radius: 16px;
  background: rgba(250, 247, 240, .82) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .7) !important; box-shadow: 0 1px 2px rgba(31, 36, 48, .08), 0 10px 30px rgba(31, 36, 48, .16); }
header.sticky .show-submenu, header.sticky .show-submenu-mega, header.sticky .sidemenu { color: var(--zx-ink) !important; font-weight: 500; }
header.sticky .logo { width: 39px !important; height: 42px !important; margin: -8px 40px 0 !important; }   /* centred in the 58px bar */
header.sticky .main-menu ul li:hover > .show-submenu, header.sticky .main-menu ul li:hover > .show-submenu-mega,
header.sticky .show-submenu:hover, header.sticky .show-submenu-mega:hover { color: var(--zx-green) !important; }
header.sticky .main-menu > ul > li > a.sidemenu { background: var(--zx-green); border-color: var(--zx-green); position: relative; top: -1px; }
header.sticky .main-menu > ul > li > a.sidemenu::before { filter: brightness(1.4); }
header.sticky .main-menu > ul > li > a.sidemenu:hover { background: var(--zx-green-dark); border-color: var(--zx-green-dark); color: #fff !important; }
header.sticky .cmn-toggle-switch span, header.sticky .cmn-toggle-switch span::before, header.sticky .cmn-toggle-switch span::after,
header.sticky .cmn-toggle-switch2 span, header.sticky .cmn-toggle-switch2 span::before, header.sticky .cmn-toggle-switch2 span::after { background: var(--zx-ink) !important; }

/* ---- page frame: no more boxed container, content sits on cards ---- */
#full_container { background: transparent; border: 0; box-shadow: none; margin-top: 34px; }
#full_container > .container { padding-top: 0; }

/* ---- news posts as cards: image on top, then title, date, text ---- */
.post { display: flex; flex-direction: column; background: var(--zx-card); border-radius: var(--zx-radius);
  box-shadow: var(--zx-shadow); overflow: hidden; margin: 0 0 28px; padding: 0 0 8px; }
.post > img, .post > a:has(> img) { order: -1; display: block; }
.post > img, .post > a > img { width: 100%; height: auto; aspect-ratio: 795 / 330; object-fit: cover; margin: 0; transition: transform .4s ease; }
.post > a:has(> img) { overflow: hidden; }
.post > a:hover > img { transform: scale(1.02); }
.post > h2.mainnewsheaderposth2 { font-family: Inter, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.25; letter-spacing: -.015em;
  color: var(--zx-ink); margin: 22px 28px 6px; }
.post > p { margin: 0 28px 14px; font-size: 16.5px; }
.post > p:empty { display: none; }
/* the orange bar becomes a quiet line of meta under the title */
.post_info { background: transparent !important; color: var(--zx-muted) !important; padding: 0 !important; margin: 0 28px 16px;
  font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 14px; }
.post_info::before, .post_info::after { display: none !important; }   /* old clearfix, would be an empty flex item */
.post_info .post-left, .post_info .post-right { float: none; margin: 0; padding: 0; }
.post_info .post-left li { display: inline-flex; align-items: center; padding: 0; margin: 0; }
.post_info .post-left ul { margin: 0; padding: 0; }
.post_info .post-left li { color: var(--zx-muted); }
.post_info [class^="icon-"] { color: var(--zx-gold); margin-right: 4px; }
.post_info .post-right { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--zx-gold-tint); color: #7d6420; }
.post_info .post-right [class^="icon-"] { color: var(--zx-gold); margin: 0; }
/* the newest post gets a little more presence */
.col-md-9 > .post:first-of-type > h2.mainnewsheaderposth2 { font-size: 32px; margin-top: 26px; }
.col-md-9 > .post:first-of-type::before { content: "Latest"; order: -2; position: absolute; margin: 16px 0 0 16px; z-index: 2;
  background: var(--zx-red); color: #fff; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.col-md-9 > .post:first-of-type { position: relative; }
.posthr { display: none; }

/* ---- sidebar: widgets as cards ---- */
#sidebar .widget { background: var(--zx-card); border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); padding: 18px 20px; margin-bottom: 22px; }
#sidebar .widget hr { display: none; }
#sidebar .socialbuttons { padding: 14px; }
.rrssb-buttons li a { border-radius: 10px !important; }
#poll h4 { font-family: Inter, sans-serif; font-weight: 700; font-size: 17px; color: var(--zx-ink); line-height: 1.35; margin: 0 0 12px; }
#poll .td_pub_option { padding: 7px 10px; border-radius: 8px; margin: 0 -10px; transition: background .15s; }
#poll .td_pub_option:hover { background: var(--zx-green-tint); }
#poll .td_pub_option label { font-weight: 500; color: var(--zx-text); cursor: pointer; }
#ezp_submit_vote, #ezp_view_results { display: inline-block; font: 600 14px Inter, sans-serif; border-radius: 9px; padding: 8px 16px;
  border: 1px solid transparent; box-shadow: none; text-shadow: none; text-decoration: none !important; transition: filter .15s, background .15s; }
#ezp_submit_vote { background: var(--zx-green) !important; border-color: var(--zx-green) !important; color: #fff !important; }
#ezp_view_results { background: #fff !important; border-color: #d9d3c7 !important; color: var(--zx-ink) !important; }
#ezp_submit_vote:hover { filter: brightness(1.07); }
#ezp_view_results:hover { background: var(--zx-green-tint) !important; }

/* ---- footer ---- */
footer { background: #161a22; padding: 34px 0 22px; margin-top: 30px; }
#social_footer ul li a { width: 42px; height: 42px; line-height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #e6e8ec !important; transition: background .2s, transform .2s; }
#social_footer ul li a span { color: #e6e8ec; }
#social_footer ul li a:hover { transform: translateY(-2px); }
#social_footer a[title="Facebook"]:hover { background: #1877f2; }
#social_footer a[title="Twitter"]:hover { background: #1da1f2; }
#social_footer a[title="Vimeo"]:hover { background: #17a589; }
#social_footer a[title="Youtube"]:hover { background: #ff0000; }
#social_footer p { color: #8a909c; font-size: 13px; margin-top: 14px; }

/* ---- small screens ---- */
@media (max-width: 767px) {
  #full_container { margin-top: 18px; }
  .post { border-radius: 12px; margin-bottom: 18px; }
  .post > h2.mainnewsheaderposth2, .col-md-9 > .post:first-of-type > h2.mainnewsheaderposth2 { font-size: 22px; margin: 16px 18px 6px; }
  .post > p { margin: 0 18px 12px; font-size: 16px; }
  .post_info { margin: 0 18px 12px; }
}

/* =====================================================================
   Theme switch button (next to Forums)
   ===================================================================== */
.main-menu > ul > li.zx-theme-li { vertical-align: middle; }
.zx-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 8px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .35); color: #f3e3a8; cursor: pointer;
  transition: background .2s, border-color .2s, transform .3s; vertical-align: middle; }
.zx-theme-toggle:hover { background: var(--zx-green); border-color: var(--zx-green); transform: rotate(-18deg); }
.zx-theme-toggle .zx-sun { display: none; }
:root[data-theme="dark"] .zx-theme-toggle .zx-sun { display: block; }
:root[data-theme="dark"] .zx-theme-toggle .zx-moon { display: none; }
header.sticky .zx-theme-toggle { background: transparent; border-color: rgba(31, 36, 48, .2); color: var(--zx-ink); position: relative; top: -1px; }
header.sticky .zx-theme-toggle:hover { background: var(--zx-green); border-color: var(--zx-green); color: #fff; }
@media (max-width: 991px) { .zx-theme-toggle { margin: 10px 15px; border-color: rgba(31, 36, 48, .25); color: var(--zx-ink); background: transparent; } }
/* smooth colour change only while switching (not on page load) */
.zx-theming, .zx-theming * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }

/* =====================================================================
   DARK THEME: "Hyrule at night": deep forest teal, stone cards with a
   faint Triforce-gold edge, parchment text, glowing green and gold.
   ===================================================================== */
:root[data-theme="dark"] {
  --zx-bg: #10140f;
  --zx-card: #191f18;
  --zx-ink: #f0e7cf;          /* parchment */
  --zx-text: #c8cfc7;
  --zx-muted: #8e9c95;
  --zx-line: #2b3429;
  --zx-green: #5ec486;        /* Kokiri / Master Sword glow */
  --zx-green-dark: #86d9a5;
  --zx-green-tint: rgba(94, 196, 134, .14);
  --zx-gold: #dcb45c;         /* Triforce gold */
  --zx-gold-tint: rgba(220, 180, 92, .14);
  --zx-link: #7fd29d;
  --zx-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .38);
  --zx-glass: rgba(21, 27, 20, .86);
  --zx-head: #f2d88c;         /* titles: warm gold-cream */
  color-scheme: dark;
}
/* both pinned to the window, so the wrapper and the body line up exactly (no band above the footer) */
:root[data-theme="dark"] body, :root[data-theme="dark"] .site_wrap { background: radial-gradient(1200px 640px at 50% -8%, #22301f 0%, rgba(16, 20, 15, 0) 70%) fixed, var(--zx-bg); }
:root[data-theme="dark"] body, :root[data-theme="dark"] .site_wrap p, :root[data-theme="dark"] .site_wrap li { color: var(--zx-text); }

/* cards: dark stone with a hairline of gold */
:root[data-theme="dark"] .post, :root[data-theme="dark"] #sidebar .widget { background: linear-gradient(180deg, #1c281c, #162017);
  box-shadow: var(--zx-shadow), inset 0 0 0 1px rgba(150, 200, 120, .14); }
:root[data-theme="dark"] .post > h2.mainnewsheaderposth2, :root[data-theme="dark"] #poll h4 { color: var(--zx-head); }
:root[data-theme="dark"] .post_info .post-right { background: var(--zx-gold-tint); color: #ecd18a; }
:root[data-theme="dark"] .post > img, :root[data-theme="dark"] .post > a > img { filter: brightness(.92) saturate(1.05); }
:root[data-theme="dark"] .col-md-9 > .post:first-of-type::before { box-shadow: 0 0 12px rgba(229, 38, 45, .55); }
:root[data-theme="dark"] .site_wrap a:hover { color: var(--zx-green-dark); }

/* poll */
:root[data-theme="dark"] #poll .td_pub_option label { color: var(--zx-text); }
:root[data-theme="dark"] #poll input[type="radio"], :root[data-theme="dark"] #poll input[type="checkbox"] { accent-color: var(--zx-green); }
:root[data-theme="dark"] #ezp_submit_vote { background: #2f8a57 !important; border-color: #2f8a57 !important; box-shadow: 0 0 14px rgba(94, 196, 134, .25) !important; }
:root[data-theme="dark"] #ezp_view_results { background: transparent !important; border-color: #3a4c54 !important; color: var(--zx-ink) !important; }
:root[data-theme="dark"] #ezp_view_results:hover { background: var(--zx-green-tint) !important; }

/* breadcrumb bar: a little deeper */
:root[data-theme="dark"] #position { background: rgba(8, 11, 7, .62); }
:root[data-theme="dark"] .parallax-slider { filter: brightness(.78); }   /* header art a touch darker at night */

/* dropdowns + scrolled header: night glass */
:root[data-theme="dark"] .main-menu > ul > li.submenu > ul, :root[data-theme="dark"] .main-menu .menu-wrapper {
  background: var(--zx-glass) !important; border-color: rgba(220, 180, 92, .16) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .main-menu > ul > li.submenu > ul li a, :root[data-theme="dark"] #game_nav li a, :root[data-theme="dark"] #game_nav2 li a { color: var(--zx-ink) !important; }
:root[data-theme="dark"] .main-menu > ul > li.submenu > ul li:hover > a, :root[data-theme="dark"] #game_nav li:hover > a, :root[data-theme="dark"] #game_nav2 li:hover > a { color: var(--zx-green-dark) !important; }
:root[data-theme="dark"] .main-menu .menu-wrapper h3 { color: var(--zx-gold); }
:root[data-theme="dark"] #game_nav li::before, :root[data-theme="dark"] #game_nav2 li::before { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
:root[data-theme="dark"] #game_nav li:hover::before, :root[data-theme="dark"] #game_nav2 li:hover::before {
  filter: drop-shadow(0 0 8px rgba(255, 214, 102, .95)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
:root[data-theme="dark"] header.sticky { background: var(--zx-glass) !important; border-color: rgba(220, 180, 92, .18) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] header.sticky .show-submenu, :root[data-theme="dark"] header.sticky .show-submenu-mega { color: var(--zx-ink) !important; }
:root[data-theme="dark"] header.sticky .main-menu ul li:hover > .show-submenu, :root[data-theme="dark"] header.sticky .main-menu ul li:hover > .show-submenu-mega { color: var(--zx-green-dark) !important; }
:root[data-theme="dark"] header.sticky .main-menu > ul > li > a.sidemenu { background: #2f8a57; border-color: #2f8a57; }
:root[data-theme="dark"] header.sticky .zx-theme-toggle { border-color: rgba(240, 231, 207, .25); color: #f3e3a8; }
:root[data-theme="dark"] header.sticky .cmn-toggle-switch span, :root[data-theme="dark"] header.sticky .cmn-toggle-switch span::before,
:root[data-theme="dark"] header.sticky .cmn-toggle-switch span::after { background: var(--zx-ink) !important; }

/* footer */
:root[data-theme="dark"] footer { background: #0a0d09; box-shadow: inset 0 1px 0 rgba(220, 180, 92, .12); }

/* phone menu: forest green top instead of the old bright green, and a night version */
@media (max-width: 991px) {
  .main-menu .zx-theme-li { display: block; }
  :root[data-theme="dark"] .main-menu { background: #151a14 !important; }
  :root[data-theme="dark"] .main-menu ul li, :root[data-theme="dark"] .main-menu ul li a { border-color: var(--zx-line) !important; color: var(--zx-ink) !important; background: transparent; }
  :root[data-theme="dark"] .main-menu ul ul, :root[data-theme="dark"] .main-menu .menu-wrapper { background: #10140f !important; }
  :root[data-theme="dark"] .zx-theme-toggle { color: #f3e3a8; border-color: rgba(240, 231, 207, .3); }
  :root[data-theme="dark"] #close_in { color: #fff; }
}

/* phone menu: plain lists, no floating-panel card, no hover outlines, games as text links without icons */
@media (max-width: 991px) {
  .main-menu > ul > li.submenu > ul, .main-menu .menu-wrapper { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: transparent !important; margin: 0 !important; padding: 4px 0 8px !important; }
  .main-menu .menu-wrapper .col-md-12, .main-menu .menu-wrapper #game_nav, .main-menu .menu-wrapper #game_nav2 { border: 0 !important; width: auto !important; padding: 0 !important; }
  .main-menu .menu-wrapper h3 { margin: 10px 15px 4px !important; }
  #game_nav ul, #game_nav2 ul { display: block !important; padding: 0 !important; }
  #game_nav li, #game_nav2 li { display: block !important; width: auto !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: transparent !important; }
  #game_nav li::before, #game_nav2 li::before { display: none !important; }
  #game_nav li a, #game_nav2 li a { text-align: left !important; font-size: 15px !important; padding: 9px 15px 9px 28px !important; border-bottom: 1px solid var(--zx-line) !important; }
  #game_nav li:hover > a, #game_nav2 li:hover > a { background: var(--zx-green-tint) !important; }
  .main-menu > ul > li.submenu > ul li a { border-radius: 0 !important; padding-left: 28px !important; }
  .main-menu ul ul, .main-menu ul ul li, .main-menu .menu-wrapper, #game_nav li a, #game_nav2 li a { border-left: 0 !important; border-right: 0 !important; }
  .main-menu .show-submenu, .main-menu .show-submenu-mega, .main-menu .show-submenu:focus, .main-menu .show-submenu-mega:focus { color: var(--zx-ink) !important; background: transparent !important; }
}

/* =====================================================================
   Sun's Song: when the theme switches, the header banner (or the floating
   bar, once you have scrolled) becomes a little sky: the sun and moon trade
   places on an arc, day and night crossfade, and ocarina notes drift up.
   Sizes come from --h (the box height), set by the script.
   ===================================================================== */
.zx-sunsong { position: absolute; pointer-events: none; overflow: hidden; opacity: 0; z-index: 5; animation: zxSkyIn 1.9s ease-in-out forwards; }
header.sticky .zx-sunsong { inset: 0; z-index: -1; border-radius: inherit; }
header.sticky { isolation: isolate; }
.zx-sunsong .sky { position: absolute; inset: 0; }
.zx-sunsong .day { background: linear-gradient(#6fb0ec 0%, #a9d3f2 60%, #f6e2b0 100%); }
.zx-sunsong .night { background: linear-gradient(#070b16 0%, #142033 55%, #2a3a2c 100%); }
.zx-sunsong .night::before { content: ""; position: absolute; inset: 0 0 30% 0; opacity: .9;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 43% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 71% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 45%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 65% 42%, #fff 50%, transparent 51%); }
.zx-sunsong .dusk { background: radial-gradient(120% 70% at 50% 100%, rgba(255, 140, 60, .75), rgba(255, 120, 80, 0) 70%); opacity: 0; animation: zxDuskGlow 1.9s ease-in-out forwards; }
.zx-sunsong.to-dark .night { opacity: 0; animation: zxFadeIn 1.9s ease-in-out forwards; }
.zx-sunsong.to-light .day  { opacity: 0; animation: zxFadeIn 1.9s ease-in-out forwards; }
.zx-sunsong .hills { position: absolute; left: 0; bottom: -1px; width: 100%; height: 30%; }
header.sticky .zx-sunsong .hills { height: 34%; }
/* the sun and moon are moved along their arcs by the script; font-size = their diameter, so the glow scales */
.zx-sunsong .orb { position: absolute; left: 0; top: 0; width: 1em; height: 1em; border-radius: 50%; will-change: transform; }
.zx-sunsong .sun { background: radial-gradient(circle, #fff7d1 0 45%, #ffd35a 70%, #ffbf3a 100%);
  box-shadow: 0 0 .55em .15em rgba(255, 205, 90, .6), 0 0 1.3em .45em rgba(255, 190, 70, .25); }
.zx-sunsong .moon { background: transparent; box-shadow: inset -.27em .11em 0 0 #f4ecd2; filter: drop-shadow(0 0 .15em rgba(240, 232, 200, .55)); }
.zx-sunsong .note { position: absolute; bottom: 28%; font: 700 calc(var(--h) * .2) / 1 Georgia, serif; opacity: 0; animation: zxNote 1.6s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
header.sticky .zx-sunsong .note { display: none; }
@keyframes zxSkyIn { 0% { opacity: 0; } 15% { opacity: .96; } 80% { opacity: .96; } 100% { opacity: 0; } }
@keyframes zxFadeIn { 0%, 30% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes zxDuskGlow { 0%, 20% { opacity: 0; } 50% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes zxNote { 0% { opacity: 0; transform: translateY(0) rotate(-8deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--h) * -.6)) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .zx-sunsong { display: none; } }

/* =====================================================================
   Phone / tablet menu: a frosted drawer that slides in from the right
   (the site's script still just toggles .show; we only restyle it)
   ===================================================================== */
@media (max-width: 991px) {
  .layer { background: rgba(12, 14, 10, .45) !important; opacity: 1 !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .main-menu { left: auto !important; right: 0; width: min(86vw, 360px) !important; height: 100% !important; top: 0; bottom: 0;
    transform: translateX(105%); opacity: 1 !important; visibility: hidden; transition: transform .32s cubic-bezier(.3, .7, .2, 1), visibility .32s !important;
    background: rgba(250, 247, 240, .95) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-radius: 22px 0 0 22px; box-shadow: -10px 0 40px rgba(0, 0, 0, .28); padding: 0 0 24px !important; overflow-y: auto; }
  .main-menu.show { transform: none; visibility: visible; }
  :root[data-theme="dark"] .main-menu { background: rgba(20, 26, 19, .96) !important; box-shadow: -10px 0 40px rgba(0, 0, 0, .6), inset 1px 0 0 rgba(150, 200, 120, .12); }

  /* top of the drawer: small logo + title, round close button */
  #header_menu { background: transparent !important; display: flex !important; align-items: center; gap: 10px; height: auto !important;
    padding: 18px 20px 14px !important; text-align: left !important; border-bottom: 1px solid var(--zx-line); }
  #header_menu img.header_image { width: 30px !important; height: 33px !important; margin: 0 !important; }
  #header_menu::after { content: "Menu"; font: 800 19px Inter, sans-serif; color: var(--zx-ink); letter-spacing: -.01em; }
  a#close_in { top: 16px !important; right: 16px !important; width: 36px !important; height: 36px !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center; background: rgba(31, 36, 48, .07); color: var(--zx-ink) !important; transition: background .2s; }
  a#close_in:hover { background: var(--zx-green-tint); }
  a#close_in span { font-size: 15px; color: inherit !important; }
  :root[data-theme="dark"] a#close_in { background: rgba(240, 231, 207, .08); color: var(--zx-ink) !important; }

  /* rows */
  .main-menu > ul { padding: 8px 10px 0 !important; }
  .main-menu > ul > li { display: block !important; border: 0 !important; }
  .main-menu > ul > li > a { display: flex !important; align-items: center; justify-content: space-between; padding: 13px 12px !important;
    font: 600 16px Inter, sans-serif !important; color: var(--zx-ink) !important; border-radius: 12px; border: 0 !important; }
  .main-menu > ul > li > a:active, .main-menu > ul > li > a:hover { background: var(--zx-green-tint) !important; }
  .main-menu > ul > li > a.show-submenu::after, .main-menu > ul > li > a.show-submenu-mega::after,
  .main-menu ul li:hover > .show-submenu::after, .main-menu ul li:hover > .show-submenu-mega::after {
    content: "" !important; font-family: inherit !important; width: 8px; height: 8px; margin: 0 4px 3px 0 !important; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity: .55; transition: transform .25s; }
  .main-menu > ul > li > a.show-submenu:has(+ ul.show_normal)::after, .main-menu > ul > li > a.show-submenu-mega:has(+ .menu-wrapper.show_mega)::after { transform: rotate(-135deg); margin-bottom: -3px !important; }
  .main-menu > ul > li > a:has(+ ul.show_normal), .main-menu > ul > li > a:has(+ .menu-wrapper.show_mega) { color: var(--zx-green) !important; }

  /* an open section sits in a soft tinted area */
  .main-menu > ul > li.submenu > ul.show_normal, .main-menu > ul > li > .menu-wrapper.show_mega { background: rgba(43, 122, 75, .06) !important; border-radius: 14px !important;
    margin: 2px 2px 8px !important; padding: 6px !important; position: static !important; }
  :root[data-theme="dark"] .main-menu > ul > li.submenu > ul.show_normal, :root[data-theme="dark"] .main-menu > ul > li > .menu-wrapper.show_mega { background: rgba(94, 196, 134, .07) !important; }
  .main-menu > ul > li.submenu > ul li a { padding: 10px 12px !important; border-radius: 10px !important; font: 500 15px Inter, sans-serif !important; border: 0 !important; }
  .main-menu .menu-wrapper h3 { margin: 8px 8px 4px !important; }
  #game_nav ul, #game_nav2 ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 4px; }
  #game_nav li a, #game_nav2 li a { padding: 9px 8px !important; font: 500 14px/1.3 Inter, sans-serif !important; border: 0 !important; border-radius: 10px; }

  /* bottom: Forums as a full-width button, theme switch with a label */
  .main-menu > ul > li > a.sidemenu { justify-content: center; gap: 8px; margin: 14px 2px 0; padding: 12px !important; border-radius: 12px; background: var(--zx-green) !important; color: #fff !important; }
  .main-menu > ul > li > a.sidemenu .header_dropdown_menu { color: #fff !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .main-menu > ul > li > a.sidemenu::before { content: ""; width: 15px; height: 15px; background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.8A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
  .main-menu .zx-theme-li { padding: 10px 2px 0; }
  .main-menu .zx-theme-toggle { width: 100% !important; height: 46px !important; margin: 0 !important; border-radius: 12px !important; gap: 8px;
    background: transparent !important; border: 1px solid var(--zx-line) !important; color: var(--zx-ink) !important; font: 600 15px Inter, sans-serif; transform: none !important; }
  .main-menu .zx-theme-toggle::after { content: "Dark theme"; }
  :root[data-theme="dark"] .main-menu .zx-theme-toggle::after { content: "Light theme"; }
  .main-menu .zx-theme-toggle svg { color: var(--zx-gold); }
  :root[data-theme="dark"] .main-menu > ul > li > a.sidemenu { background: #2f8a57 !important; }
  /* tap targets: everything at least 44px tall */
  a#close_in { position: absolute !important; width: 44px !important; height: 44px !important; top: 12px !important; right: 12px !important;
    left: auto !important; bottom: auto !important; margin: 0 !important; float: none !important; z-index: 2; }   /* old tablet rule moved it under the title */
  #header_menu { position: relative !important; padding-right: 70px !important; }
  #header_menu img.header_image { position: static !important; display: block !important; transform: none !important; }
  .main-menu > ul > li.submenu > ul li a { display: flex !important; align-items: center; min-height: 44px; box-sizing: border-box; }
  #game_nav li a, #game_nav2 li a { display: flex !important; align-items: center; min-height: 44px; box-sizing: border-box; }
  .main-menu > ul > li > a { min-height: 48px; box-sizing: border-box; }
  .main-menu .zx-theme-toggle { height: 48px !important; }
  .main-menu > ul > li > a.sidemenu { min-height: 48px; }
  :root[data-theme="dark"] .main-menu .menu-wrapper ul, :root[data-theme="dark"] .main-menu .menu-wrapper .col-md-12 { background: transparent !important; }
}

/* The scrolled header's glass lives on a ::before layer. A backdrop-filter on the header itself would make it the
   containing block for position:fixed children, trapping the phone menu drawer inside the 58px bar. */
header.sticky { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(250, 247, 240, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
:root[data-theme="dark"] header.sticky { background: transparent !important; }
:root[data-theme="dark"] header.sticky::before { background: var(--zx-glass); }
@media (max-width: 991px) {
  header.sticky #mobile_logo_small { width: 39px !important; height: 42px !important; margin-top: -3px !important; }
}

/* search box above the breadcrumb list (on phones the list spans the bar and swallowed taps on the open field) */
#position .sb-search { position: relative; z-index: 20; }
/* phone menu: dragging on the dimmed backdrop doesn't scroll the page, and scrolling the drawer doesn't spill onto it.
   (Hiding the page's overflow instead would reset the page to the top.) */
@media (max-width: 991px) { .main-menu { overscroll-behavior: contain; } .layer { touch-action: none; } }

/* =====================================================================
   Menu button (phones/tablets): round frosted button with two rounded
   lines of different lengths that turn into an X while the menu is open
   ===================================================================== */
@media (max-width: 991px) {
  .cmn-toggle-switch.cmn-toggle-switch__htx { --zx-mb-line: #fff; width: 44px !important; height: 44px !important; top: 4px !important; right: 12px !important;
    border-radius: 50%; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .35); box-sizing: border-box;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s, transform .2s; }
  .cmn-toggle-switch.cmn-toggle-switch__htx:active { transform: scale(.94); }
  .cmn-toggle-switch.cmn-toggle-switch__htx span { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; width: 18px !important; height: 0 !important;
    margin: 0 0 0 -9px !important; background: transparent !important; font-size: 0 !important; color: transparent !important; overflow: visible !important; }
  .cmn-toggle-switch.cmn-toggle-switch__htx span::before, .cmn-toggle-switch.cmn-toggle-switch__htx span::after {
    content: "" !important; position: absolute !important; left: auto !important; right: 0 !important; height: 2.4px !important; border-radius: 2px;
    background: var(--zx-mb-line) !important; transition: top .25s ease, bottom .25s ease, width .25s ease, transform .25s ease !important; transition-delay: 0s !important; }
  .cmn-toggle-switch.cmn-toggle-switch__htx span::before { width: 18px !important; top: -5px !important; bottom: auto !important; }
  .cmn-toggle-switch.cmn-toggle-switch__htx span::after  { width: 11px !important; bottom: -5px !important; top: auto !important; }
  .cmn-toggle-switch.cmn-toggle-switch__htx:hover span::after { width: 18px !important; }
  .cmn-toggle-switch.cmn-toggle-switch__htx.active span::before { top: -1.2px !important; transform: rotate(45deg); }
  .cmn-toggle-switch.cmn-toggle-switch__htx.active span::after  { bottom: -1.2px !important; width: 18px !important; transform: rotate(-45deg); }
  /* in the floating bar after scrolling */
  header.sticky .cmn-toggle-switch.cmn-toggle-switch__htx { --zx-mb-line: var(--zx-ink); background: rgba(31, 36, 48, .06); border-color: rgba(31, 36, 48, .12);
    -webkit-backdrop-filter: none; backdrop-filter: none; top: -4px !important; right: 8px !important; }
  :root[data-theme="dark"] header.sticky .cmn-toggle-switch.cmn-toggle-switch__htx { --zx-mb-line: var(--zx-ink); background: rgba(240, 231, 207, .07); border-color: rgba(240, 231, 207, .16); }
}

/* =====================================================================
   CONTENT PAGES (guides, game pages, search, forms): the main column is a
   card like the news posts, plus dark versions of the older page parts.
   ===================================================================== */
.site_wrap .col-md-9:not(:has(> .post)) { background: var(--zx-card); border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); padding: 26px 30px 18px; margin-bottom: 28px; }
:root[data-theme="dark"] .site_wrap .col-md-9:not(:has(> .post)) { background: linear-gradient(180deg, #1c281c, #162017); box-shadow: var(--zx-shadow), inset 0 0 0 1px rgba(150, 200, 120, .14); }
@media (max-width: 767px) { .site_wrap .col-md-9:not(:has(> .post)) { padding: 18px 16px 10px; border-radius: 12px; } }
.site_wrap .col-md-9 h1, .site_wrap .col-md-9 h2, .site_wrap .col-md-9 h3, .site_wrap .col-md-9 h4 { color: var(--zx-ink); font-family: Inter, sans-serif; letter-spacing: -.01em; }
.site_wrap .col-md-9 h3 { font-weight: 700; }
:root[data-theme="dark"] .site_wrap .col-md-9 h1, :root[data-theme="dark"] .site_wrap .col-md-9 h2,
:root[data-theme="dark"] .site_wrap .col-md-9 h3, :root[data-theme="dark"] .site_wrap .col-md-9 h4 { color: var(--zx-head); }
:root[data-theme="dark"] .site_wrap strong, :root[data-theme="dark"] .site_wrap b { color: var(--zx-ink); }
:root[data-theme="dark"] .site_wrap hr { border-color: var(--zx-line); }

/* breadcrumb links: Triforce gold instead of orange */
#position ul li a { color: #f2d88c !important; }
#position ul li a:hover { color: #fff !important; }

/* game overview fact card (release dates, developer, game, ratings, reviews) */
.game_info_div.zx-facts { float: left; width: 248px; max-width: none; margin: 2px 26px 18px 0; padding: 4px 0; background: var(--zx-bg) !important;
  border-radius: 14px; box-shadow: inset 0 0 0 1px var(--zx-line); color: var(--zx-text); font: 13px/1.45 Inter, sans-serif; }
.zx-facts .zx-fsec { padding: 12px 16px 10px; }
.zx-facts .zx-fsec + .zx-fsec { border-top: 1px solid var(--zx-line); }
.zx-facts h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px !important; padding: 0 !important; background: none !important; border: 0 !important;
  color: var(--zx-green) !important; font: 700 10.5px Inter, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
.zx-facts h3::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--zx-gold); transform: rotate(45deg); border-radius: 1px; }
.zx-facts .zx-fgroup ~ .zx-fgroup { margin-top: 10px; }
.zx-facts .zx-fplat { color: var(--zx-ink); font-weight: 650; font-size: 12.5px; margin-bottom: 4px; }
.zx-facts dl { display: grid; grid-template-columns: fit-content(80px) 1fr; gap: 4px 12px; margin: 0; }
.zx-facts dl > div { display: contents; }
.zx-facts dt { color: var(--zx-muted); font-weight: 500; font-size: 12px; padding-top: 1px; }
.zx-facts dd { color: var(--zx-ink); margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.zx-facts .zx-fnote dd { grid-column: 1 / -1; color: var(--zx-text); }
/* release dates: each platform is a small block with a region chip per date */
.zx-facts .zx-fsec:first-child .zx-fgroup { background: var(--zx-card); border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(31, 36, 48, .05); }
.zx-facts .zx-fsec:first-child dt { justify-self: start; font: 600 10.5px/1.6 Inter, sans-serif; letter-spacing: .03em; color: var(--zx-green); background: var(--zx-green-tint);
  border-radius: 6px; padding: 0 6px; }
.zx-facts .zx-fsec:first-child dl { grid-template-columns: 62px 1fr; }
.zx-facts .zx-fsec:first-child dd { font-variant-numeric: tabular-nums; font-size: 12.5px; }
:root[data-theme="dark"] .game_info_div.zx-facts { background: rgba(0, 0, 0, .2) !important; }
:root[data-theme="dark"] .zx-facts .zx-fsec:first-child .zx-fgroup { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--zx-line); }
:root[data-theme="dark"] .zx-facts .zx-fplat { color: var(--zx-head); }
.zx-facts + .game_text { float: none; width: auto; }   /* text wraps around the card and runs full width below it */
@media (max-width: 767px) {
  .game_info_div.zx-facts { float: none; width: auto; margin: 0 0 20px; }
  .zx-facts .zx-fsec { padding: 12px 14px 10px; }
  .zx-facts .zx-fsec:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .zx-facts .zx-fsec:first-child h3 { grid-column: 1 / -1; margin-bottom: 0 !important; }
  .zx-facts .zx-fsec:first-child .zx-fgroup ~ .zx-fgroup { margin-top: 0; }
  .zx-facts dl { grid-template-columns: fit-content(120px) 1fr; }
  .zx-facts .zx-fsec:first-child dl { grid-template-columns: 62px 1fr; }
  .zx-facts .zx-fsec:first-child { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
  .zx-facts .zx-fsec:not(:first-child) dt { min-width: 92px; }
}

/* game sidebar menu: a card */
#sidebar .game_info { background: var(--zx-card); border-radius: var(--zx-radius); box-shadow: var(--zx-shadow); padding: 16px 18px 10px; margin-bottom: 22px; }
:root[data-theme="dark"] #sidebar .game_info { background: linear-gradient(180deg, #1c281c, #162017); box-shadow: var(--zx-shadow), inset 0 0 0 1px rgba(150, 200, 120, .14); }
#sidebar .gamelogoinfo { text-align: left; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--zx-line); }
#sidebar .gamelogoinfo a, #sidebar .gamelogoinfo a strong { color: var(--zx-ink) !important; font: 800 16px Inter, sans-serif; text-decoration: none !important; }
:root[data-theme="dark"] #sidebar .gamelogoinfo a, :root[data-theme="dark"] #sidebar .gamelogoinfo a strong { color: var(--zx-head) !important; }
#sidebar .gamelogoinfo img { max-width: 100%; height: auto; }
#sidebar .game_info .submenu > a { color: var(--zx-muted) !important; font: 700 11px Inter, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
#sidebar .game_info .submenu > a i { display: none; }
:root[data-theme="dark"] #sidebar .game_info .submenu > a { color: var(--zx-gold) !important; }
#sidebar .gamecat a { color: var(--zx-text) !important; display: block; padding: 4px 8px; margin: 0 -8px 0 0; border-radius: 8px; text-decoration: none !important; transition: background .15s, color .15s; }
#sidebar .gamecat a:hover { background: var(--zx-green-tint); color: var(--zx-green) !important; }
#sidebar .gamemenu .gamecat, #sidebar .gamemenu .gamecat:hover { background-position: 6px 50%; }   /* boomerang centred on the padded link */

/* forms (contact page etc.) */
.site_wrap .col-md-9 label { color: var(--zx-ink); font-weight: 600; }
.site_wrap .col-md-9 .form-control, .site_wrap .col-md-9 input[type="text"], .site_wrap .col-md-9 input[type="email"], .site_wrap .col-md-9 textarea, .site_wrap .col-md-9 select {
  border-radius: 10px; border: 1px solid var(--zx-line); box-shadow: none; font-family: Inter, sans-serif; }
.site_wrap .col-md-9 .form-control:focus, .site_wrap .col-md-9 textarea:focus { border-color: var(--zx-green); box-shadow: 0 0 0 3px var(--zx-green-tint); }
:root[data-theme="dark"] .site_wrap .col-md-9 .form-control, :root[data-theme="dark"] .site_wrap .col-md-9 input[type="text"], :root[data-theme="dark"] .site_wrap .col-md-9 input[type="email"],
:root[data-theme="dark"] .site_wrap .col-md-9 textarea, :root[data-theme="dark"] .site_wrap .col-md-9 select { background: rgba(0, 0, 0, .25); color: var(--zx-ink); }
.site_wrap .btn-primary, .site_wrap .btn-success { background: var(--zx-green) !important; border-color: var(--zx-green) !important; border-radius: 10px; font-weight: 600; }
:root[data-theme="dark"] .site_wrap .btn-primary, :root[data-theme="dark"] .site_wrap .btn-success { background: #2f8a57 !important; border-color: #2f8a57 !important; }
:root[data-theme="dark"] .site_wrap ::placeholder { color: var(--zx-muted); }

/* plain tables */
:root[data-theme="dark"] .site_wrap table { color: var(--zx-text); border-color: var(--zx-line); }
:root[data-theme="dark"] .site_wrap table td, :root[data-theme="dark"] .site_wrap table th { border-color: var(--zx-line) !important; }

/* search results page */
.zxs-form input[type="search"] { border-radius: 10px !important; border-color: var(--zx-line) !important; }
.zxs-form button { background: var(--zx-green) !important; border-radius: 10px !important; }
.zxs-pages span { background: var(--zx-green) !important; border-color: var(--zx-green) !important; }
.zxs-sec { background: var(--zx-gold-tint) !important; color: #7d6420 !important; }
.zxs-u { color: var(--zx-green) !important; }
:root[data-theme="dark"] .zxs-form input[type="search"] { background: rgba(0, 0, 0, .25) !important; color: var(--zx-ink); }
:root[data-theme="dark"] .zxs-form button, :root[data-theme="dark"] .zxs-pages span { background: #2f8a57 !important; border-color: #2f8a57 !important; }
:root[data-theme="dark"] .zxs-r { border-color: var(--zx-line) !important; }
:root[data-theme="dark"] .zxs-r p { color: var(--zx-text) !important; }
:root[data-theme="dark"] .zxs-r mark { background: rgba(220, 180, 92, .28) !important; color: var(--zx-ink) !important; }
:root[data-theme="dark"] .zxs-sec { color: #ecd18a !important; }
:root[data-theme="dark"] .zxs-pages a { border-color: var(--zx-line) !important; }

/* Ocarina of Time (Remake) guide parts (jump bar, change boxes, tables, cards, checklists) */
:root[data-theme="dark"] .zx-toc { background: rgba(0, 0, 0, .22); }
:root[data-theme="dark"] .zx-toc b { color: var(--zx-muted); }
:root[data-theme="dark"] .zx-toc a { background: rgba(255, 255, 255, .04); border-color: var(--zx-line); color: var(--zx-text) !important; }
:root[data-theme="dark"] .zx-toc a:hover { border-color: var(--zx-green); color: var(--zx-green-dark) !important; }
:root[data-theme="dark"] .zx-changes { background: rgba(200, 100, 30, .1); }
:root[data-theme="dark"] .zx-gs th { color: var(--zx-muted); }
:root[data-theme="dark"] .zx-gs th, :root[data-theme="dark"] .zx-gs td { border-color: var(--zx-line) !important; }
:root[data-theme="dark"] .zx-gs tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .zx-h { border-color: var(--zx-line); }
:root[data-theme="dark"] ul.zx-cards > li, :root[data-theme="dark"] .zx-boss, :root[data-theme="dark"] .zx-trial { background: rgba(0, 0, 0, .2); border-color: var(--zx-line); box-shadow: none; }
:root[data-theme="dark"] .zx-boss .zx-bring { background: rgba(0, 0, 0, .2); border-color: var(--zx-line); }
:root[data-theme="dark"] .zx-progress { background: #182218; border-color: var(--zx-line); }
:root[data-theme="dark"] .zx-progress .zx-bar { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .zx-progress button { border-color: var(--zx-line); color: var(--zx-muted); }
:root[data-theme="dark"] ol.zx-tracked > li:hover, :root[data-theme="dark"] .zx-track tr:hover td { background: rgba(94, 196, 134, .08); }
:root[data-theme="dark"] .zx-chip { background: rgba(255, 255, 255, .08); color: var(--zx-text); }
:root[data-theme="dark"] .zx-young { background: rgba(94, 196, 134, .16); color: #9fe0b6; }
:root[data-theme="dark"] .zx-adult { background: rgba(110, 160, 230, .16); color: #a9c8f3; }
:root[data-theme="dark"] .zx-day { background: rgba(240, 200, 80, .16); color: #f2d88c; }
:root[data-theme="dark"] .zx-any { background: rgba(255, 255, 255, .07); color: var(--zx-muted); }

/* sidebar menu chevrons: green instead of the old red */
#sidebar .gamecat a::before, #sidebar .gamecat::before { color: var(--zx-green) !important; }

/* =====================================================================
   Game pages on phones: the game's own menu is a frosted drawer from the
   left (the main menu comes from the right), opened by a round list button
   ===================================================================== */
@media (max-width: 991px) {
  #sidebar .game_info { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .gamemenu { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: min(86vw, 360px) !important; height: 100% !important;
    z-index: 99999 !important; transform: translateX(-105%); visibility: hidden; opacity: 1 !important; transition: transform .32s cubic-bezier(.3, .7, .2, 1), visibility .32s !important;
    background: rgba(250, 247, 240, .96) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-radius: 0 22px 22px 0; box-shadow: 10px 0 40px rgba(0, 0, 0, .28); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 24px !important; }
  .gamemenu.show { transform: none; visibility: visible; }
  :root[data-theme="dark"] .gamemenu { background: rgba(20, 26, 19, .97) !important; box-shadow: 10px 0 40px rgba(0, 0, 0, .6), inset -1px 0 0 rgba(150, 200, 120, .12); }
  .gamemenu #header_game_menu { position: relative; background: transparent !important; padding: 20px 64px 14px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--zx-line); text-align: left; height: auto !important; }
  .gamemenu #header_game_menu a, .gamemenu #header_game_menu a strong { color: var(--zx-ink) !important; font: 800 18px/1.25 Inter, sans-serif !important; text-decoration: none !important; }
  :root[data-theme="dark"] .gamemenu #header_game_menu a, :root[data-theme="dark"] .gamemenu #header_game_menu a strong { color: var(--zx-head) !important; }
  .gamemenu #header_game_menu img { max-height: 54px; width: auto; }
  a#close_in2 { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; width: 44px !important; height: 44px !important; margin: 0 !important; z-index: 2;
    border-radius: 50%; display: flex !important; align-items: center; justify-content: center; background: rgba(31, 36, 48, .07); color: var(--zx-ink) !important; }
  a#close_in2 i { color: inherit !important; font-size: 15px; }
  :root[data-theme="dark"] a#close_in2 { background: rgba(240, 231, 207, .08); }
  .gamemenu > ul { padding: 6px 10px 0 !important; margin: 0 !important; }
  .gamemenu > ul > li { display: block !important; border: 0 !important; }
  /* every section shown open: the headings are just labels */
  .gamemenu li.submenu > a { pointer-events: none; display: block !important; padding: 14px 12px 4px !important; color: var(--zx-muted) !important; background: none !important;
    font: 700 11px Inter, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; border: 0 !important; }
  :root[data-theme="dark"] .gamemenu li.submenu > a { color: var(--zx-gold) !important; }
  .gamemenu li.submenu > a i, .gamemenu li.submenu > a::after { display: none !important; }
  .gamemenu .gamecatlist { display: block !important; visibility: visible !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .gamemenu .gamecat { display: block !important; border: 0 !important; }
  .gamemenu .gamecat a { display: flex !important; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px !important; margin: 0 !important; border-radius: 10px;
    font: 500 15px Inter, sans-serif !important; color: var(--zx-ink) !important; border: 0 !important; background: none; }
  .gamemenu .gamecat a:hover, .gamemenu .gamecat a:active { background: var(--zx-green-tint) !important; color: var(--zx-green) !important; }
  .gamemenu .gamecat a::before { display: none !important; }

  /* the button that opens it: round and frosted like the main menu button, with a list icon */
  .cmn-toggle-switch2 { width: 44px !important; height: 44px !important; top: 4px !important; left: 12px !important; border-radius: 50%; box-sizing: border-box;
    background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); --zx-mb-line: #fff; }
  .cmn-toggle-switch2 span { display: none !important; }
  .cmn-toggle-switch2::before { content: ""; position: absolute; inset: 0; margin: auto; width: 19px; height: 19px; background: var(--zx-mb-line);
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4' cy='6' r='1.3' fill='black'/%3E%3Ccircle cx='4' cy='12' r='1.3' fill='black'/%3E%3Ccircle cx='4' cy='18' r='1.3' fill='black'/%3E%3C/svg%3E");
            mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4' cy='6' r='1.3' fill='black'/%3E%3Ccircle cx='4' cy='12' r='1.3' fill='black'/%3E%3Ccircle cx='4' cy='18' r='1.3' fill='black'/%3E%3C/svg%3E"); }
  header.sticky .cmn-toggle-switch2 { --zx-mb-line: var(--zx-ink); background: rgba(31, 36, 48, .06); border-color: rgba(31, 36, 48, .12); -webkit-backdrop-filter: none; backdrop-filter: none; top: -4px !important; left: 8px !important; }
  :root[data-theme="dark"] header.sticky .cmn-toggle-switch2 { background: rgba(240, 231, 207, .07); border-color: rgba(240, 231, 207, .16); }
}

/* poll: each answer is a row (box + text); long answers wrap inside the card instead of spilling out of it */
#poll .td_pub_option { display: flex; align-items: flex-start; gap: 8px; }
#poll .td_pub_option { position: relative; }
#poll .td_pub_option input { position: absolute !important; left: 10px; top: 7px; width: 16px !important; height: 18px !important; margin: 0 !important; opacity: 0; z-index: 1; cursor: pointer; }   /* invisible real radio: no space taken, sits over the drawn box */
#poll .td_pub_option label { display: flex !important; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0 !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
#poll .td_pub_option label > span { flex: none; margin: 1px 0 0 !important; }   /* the drawn tick box stays left; the text wraps beside it */
#poll h4, #poll .ezp_block { overflow-wrap: anywhere; }
#sidebar .widget { overflow: hidden; }

/* smaller screens: the sidebar drops under the content; show the poll there too, above the share buttons */
@media (max-width: 991px) {
  #sidebar { display: flex; flex-direction: column; }
  #sidebar .zx-poll-widget { order: -1; }
}

/* =====================================================================
   TWILIGHT REALM theme + Light/Dark/Twilight picker.
   Twilight = data-theme="dark" plus html.zx-twilight (saved as zx-theme = "twilight").
   ===================================================================== */

:root.zx-twilight {
  --zx-bg: #120a14;
  --zx-card: #1a0f1c;
  --zx-ink: #f6e2c8;            /* warm twilight cream */
  --zx-text: #d9c6c0;
  --zx-muted: #a08a98;
  --zx-line: #3a2338;
  --zx-head: #ffb054;           /* twilight orange titles */
  --zx-green: #39d6b4;          /* Twili teal glow (replaces green as the accent) */
  --zx-green-dark: #7af0d6;
  --zx-green-tint: rgba(57, 214, 180, .13);
  --zx-gold: #f0902c;
  --zx-gold-tint: rgba(240, 144, 44, .15);
  --zx-link: #5fe6c8;
  --zx-glass: rgba(26, 13, 26, .84);
  --zx-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .5);
}

/* sky: amber at the top falling into purple-black */
/* body and wrapper share one window-pinned sky, so the wrapper covers the header art below the bar */
:root.zx-twilight body, :root.zx-twilight .site_wrap {
  background: linear-gradient(180deg, #5a2a12 0%, #3a1622 22%, #1d0c1f 48%, #120a14 75%) fixed !important; }
#zx-twilight-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
:root.zx-twilight #full_container, :root.zx-twilight footer { position: relative; }   /* above the particle canvas (it comes first in <body>) without a stacking context that would trap the phone drawers */

/* header art tinted to twilight, with an amber-to-shadow dusk wash over the banner */
:root.zx-twilight #short { position: relative; }
:root.zx-twilight #short::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 128, 32, .28) 0%, rgba(150, 50, 40, .25) 55%, rgba(40, 10, 40, .55) 100%); }
:root.zx-twilight .parallax-slider { filter: sepia(.55) saturate(1.5) hue-rotate(-18deg) brightness(.62) contrast(1.12) !important; }
:root.zx-twilight #position { background: rgba(20, 6, 18, .6); box-shadow: inset 0 -2px 0 #f0902c; }
:root.zx-twilight #position ul li a { color: #ffc27a !important; }

/* cards: dark shadow-stone with an amber edge and a faint teal inner glow */
:root.zx-twilight .post, :root.zx-twilight #sidebar .widget, :root.zx-twilight .site_wrap .col-md-9:not(:has(> .post)), :root.zx-twilight #sidebar .game_info {
  background: linear-gradient(180deg, rgba(34, 16, 34, .92), rgba(20, 10, 22, .94)) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: var(--zx-shadow), inset 0 0 0 1px rgba(240, 144, 44, .22), inset 0 0 28px rgba(57, 214, 180, .05) !important; }
:root.zx-twilight .post > h2.mainnewsheaderposth2 { color: var(--zx-head); text-shadow: 0 0 18px rgba(255, 140, 40, .25); }
:root.zx-twilight .col-md-9 > .post:first-of-type::before { background: #f0902c; color: #1a0a10; box-shadow: 0 0 14px rgba(240, 144, 44, .6); }
:root.zx-twilight .post > img, :root.zx-twilight .post > a > img { filter: sepia(.25) saturate(1.15) brightness(.88); }
:root.zx-twilight .post_info .post-right { background: rgba(57, 214, 180, .12); color: #8ff3dc; }

/* buttons, poll */
:root.zx-twilight #ezp_submit_vote { background: linear-gradient(#f39a3a, #d8701c) !important; border-color: #d8701c !important; color: #1a0a10 !important;
  box-shadow: 0 0 16px rgba(240, 144, 44, .35) !important; }
:root.zx-twilight #ezp_view_results { background: transparent !important; border-color: #5a3550 !important; color: var(--zx-ink) !important; }
:root.zx-twilight #poll input[type="radio"], :root.zx-twilight #poll input[type="checkbox"] { accent-color: #39d6b4; }

/* glassy menus and floating header in shadow purple */
:root.zx-twilight .main-menu > ul > li.submenu > ul, :root.zx-twilight .main-menu .menu-wrapper, :root.zx-twilight header.sticky::before { background: var(--zx-glass) !important; }
:root.zx-twilight .main-menu > ul > li.submenu > ul, :root.zx-twilight .main-menu .menu-wrapper { border-color: rgba(240, 144, 44, .25) !important; }
:root.zx-twilight .main-menu .menu-wrapper h3 { color: #ffb054; }
:root.zx-twilight header.sticky .main-menu > ul > li > a.sidemenu, :root.zx-twilight .main-menu > ul > li > a.sidemenu:hover { background: #d8701c !important; border-color: #d8701c !important; }
:root.zx-twilight #game_nav li:hover::before { filter: drop-shadow(0 0 8px rgba(57, 214, 180, .95)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
@media (max-width: 991px) { :root.zx-twilight .main-menu, :root.zx-twilight .gamemenu { background: rgba(24, 11, 24, .97) !important; } }

/* footer */
:root.zx-twilight footer { background: #0b050c; box-shadow: inset 0 1px 0 rgba(240, 144, 44, .25); }
:root.zx-twilight #social_footer ul li a { background: rgba(240, 144, 44, .1); }


/* more of the site in twilight (places where the dark theme sets its green directly) */
:root.zx-twilight .site_wrap .btn-primary, :root.zx-twilight .site_wrap .btn-success,
:root.zx-twilight .zxs-form button, :root.zx-twilight .zxs-pages span { background: #d8701c !important; border-color: #d8701c !important; color: #1a0a10 !important; }
:root.zx-twilight .zxs-r mark { background: rgba(240, 144, 44, .3) !important; }
:root.zx-twilight .zxs-sec { background: rgba(57, 214, 180, .12) !important; color: #8ff3dc !important; }
:root.zx-twilight .zx-changes { background: rgba(240, 144, 44, .1); }
:root.zx-twilight .zx-progress { background: #1e0f1e; }
:root.zx-twilight .zx-progress .zx-fill { background: linear-gradient(90deg, #f39a3a, #d8701c); }
:root.zx-twilight .zx-count, :root.zx-twilight ul.zx-cards.zx-num > li:before { background: #d8701c; }
:root.zx-twilight .zx-gs th { border-bottom-color: #d8701c; }
:root.zx-twilight .zx-token { box-shadow: 0 0 10px rgba(240, 144, 44, .4); }
:root.zx-twilight #sidebar .gamecat a::before, :root.zx-twilight #sidebar .gamecat::before { color: var(--zx-gold) !important; }
@media (max-width: 991px) {
  :root.zx-twilight .main-menu > ul > li > a.sidemenu { background: #d8701c !important; color: #1a0a10 !important; }
  :root.zx-twilight .main-menu > ul > li > a.sidemenu .header_dropdown_menu { color: #1a0a10 !important; }
  :root.zx-twilight .main-menu > ul > li.submenu > ul.show_normal, :root.zx-twilight .main-menu > ul > li > .menu-wrapper.show_mega { background: rgba(240, 144, 44, .07) !important; }
}

/* =====================================================================
   Theme picker: the round button opens a small frosted menu (desktop);
   in the phone drawer it's a three-part selector
   ===================================================================== */
.zx-theme-li { position: relative; }
.zx-theme-toggle .zx-sun, .zx-theme-toggle .zx-moon, .zx-theme-toggle .zx-tw { display: none !important; }
:root[data-theme="light"] .zx-theme-toggle .zx-sun { display: block !important; }
:root[data-theme="dark"]:not(.zx-twilight) .zx-theme-toggle .zx-moon { display: block !important; }
:root.zx-twilight .zx-theme-toggle .zx-tw { display: block !important; }
.zx-theme-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; padding: 6px; border-radius: 14px; z-index: 50;
  background: rgba(250, 247, 240, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 2px 6px rgba(15, 20, 30, .08), 0 18px 40px rgba(15, 20, 30, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; }
.zx-theme-li.open .zx-theme-menu { opacity: 1; visibility: visible; transform: none; }
:root[data-theme="dark"] .zx-theme-menu { background: var(--zx-glass); border-color: rgba(220, 180, 92, .16); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
:root.zx-twilight .zx-theme-menu { border-color: rgba(240, 144, 44, .25); }
.zx-theme-menu button, .zx-theme-seg button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--zx-ink); font: 500 14px Inter, sans-serif; cursor: pointer; text-align: left; }
.zx-theme-menu button:hover { background: var(--zx-green-tint); color: var(--zx-green); }
.zx-theme-menu button svg, .zx-theme-seg button svg { flex: none; color: var(--zx-gold); }
.zx-theme-menu button[aria-checked="true"]::after { content: ""; margin-left: auto; width: 6px; height: 11px; border: solid var(--zx-green); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.zx-theme-seg { display: none; }
@media (max-width: 991px) {
  .main-menu .zx-theme-toggle, .zx-theme-menu { display: none !important; }
  .zx-theme-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--zx-line); }
  .zx-theme-seg button { justify-content: center; gap: 6px; min-height: 44px; padding: 0 6px; font-size: 14px; }
  .zx-theme-seg button[aria-checked="true"] { background: var(--zx-green-tint); color: var(--zx-green); font-weight: 700; }
}

/* =====================================================================
   Twilight veil: plays in the header (banner, or the floating bar) when
   switching into or out of Twilight; light <-> dark keeps the Sun's Song
   ===================================================================== */
.zx-veil { position: absolute; pointer-events: none; overflow: hidden; z-index: 5; animation: zxVeilBox 1.9s ease-in-out forwards; }
header.sticky .zx-veil { inset: 0; z-index: -1; border-radius: inherit; clip-path: inset(0 round 16px); contain: paint; }   /* keep the squares inside the rounded bar */
.zx-veil .vsky { position: absolute; inset: 0; }
.zx-veil .vsky.tw { background: linear-gradient(180deg, #7a3612 0%, #4a1a26 45%, #1d0c1f 100%); }
.zx-veil .vsky.day { background: linear-gradient(#6fb0ec 0%, #a9d3f2 60%, #f6e2b0 100%); }
.zx-veil .vsky.night { background: linear-gradient(#070b16 0%, #142033 55%, #2a3a2c 100%); }
.zx-veil.in .vsky.tw { animation: zxVeilFadeIn 1.9s ease-in-out forwards; }
.zx-veil.out .vsky.tw { animation: zxVeilFadeOut 1.9s ease-in-out forwards; }
.zx-veil .sq { position: absolute; bottom: -12%; background: #07040a; }
.zx-veil .sq.g { box-shadow: 0 0 0 1px rgba(70, 230, 195, .6), 0 0 8px rgba(70, 230, 195, .5); }
.zx-veil.in .sq { opacity: 0; animation: zxSqRise var(--d) cubic-bezier(.3, .2, .4, 1) var(--w) forwards; }
.zx-veil.out .sq { bottom: auto; animation: zxSqFade var(--d) ease-in var(--w) forwards; }
@keyframes zxVeilBox { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zxVeilFadeIn { 0%, 15% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes zxVeilFadeOut { 0%, 30% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes zxSqRise { 0% { opacity: 0; transform: translateY(0) rotate(0); } 18% { opacity: .95; }
  80% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--h) * -1.05)) rotate(var(--r)); } }
@keyframes zxSqFade { 0% { opacity: .95; transform: translateY(0) scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(calc(var(--h) * -.45)) scale(.15) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .zx-veil { display: none; } }

/* phones: the game sidebar holds the fixed game-menu drawer; a backdrop-filter here would trap it */
@media (max-width: 991px) {
  :root.zx-twilight #sidebar .game_info { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Smaller page header on phones and tablets: the breadcrumb bar sits over the bottom of the art, like on desktop */
@media (max-width: 991px) {
  .parallax-window#short { height: 200px !important; min-height: 0 !important; }
  #short #subheader { height: 200px !important; }
  #short #sub_content { padding: 48px 64px 45px; }
  #short + #position { margin-top: -45px !important; position: relative; }
}
@media (max-width: 767px) {
  .parallax-window#short { height: 176px !important; }
  #short #subheader { height: 176px !important; }
  #short #sub_content h1 { font-size: 28px; line-height: 1.15; margin: 0; }
}

/* fact card: on phones only the first release platform shows until "Show all" is tapped */
.zx-fmore { display: none; }
@media (max-width: 767px) {
  .zx-facts .zx-fsec:first-child .zx-fmore-cb:not(:checked) ~ .zx-fgroup { display: none; }
  .zx-fmore { display: block; grid-column: 1 / -1; margin: 0; padding: 7px 0 2px; color: var(--zx-link); font: 600 13px Inter, sans-serif; cursor: pointer; }
  .zx-fmore::after { content: "Show all " attr(data-n) " releases \25BE"; }
  .zx-fmore-cb:checked ~ .zx-fmore::after { content: "Show fewer \25B4"; }
}

/* When the sidebar drops below the content (tablets/phones), its cards line up with the content card */
@media (max-width: 991px) { .site_wrap #sidebar { padding-left: 0 !important; padding-right: 0 !important; } }

/* stylesheet.css gives .container overflow-x:hidden, which cut the content card's shadow off in a straight line on the left.
   Clip sideways overflow on the full-width .site_wrap instead, where the shadow has room. */
#full_container > .container { overflow-x: visible; }
.site_wrap { overflow-x: clip; }
.zx-facts dt { align-self: start; }
/* phones: the few tables wider than the card scroll sideways inside it instead of running off the edge */
@media (max-width: 767px) {
  .site_wrap .col-md-9 table.zx-track, .site_wrap .col-md-9 table.gs_table2, .site_wrap .col-md-9 table.zx-cardtable { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site_wrap .col-md-9 table.zx-track > tbody, .site_wrap .col-md-9 table.gs_table2 > tbody, .site_wrap .col-md-9 table.zx-cardtable > tbody { display: table; width: 100%; }
}

/* phones: picture + description tables (bosses, characters, items...) stack the picture above its text instead of squeezing the text into a sliver */
@media (max-width: 767px) {
  .site_wrap .col-md-9 table.gs_table2:has(h3) { display: block; overflow: visible; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) > tbody { display: block; width: auto; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) tr { display: block; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) td { display: block; width: auto !important; max-width: none !important; padding: 6px 0 !important; height: auto !important; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) td:not(:has(h3)) { text-align: center; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) td:not(:has(h3)) img { width: auto; max-width: 70%; height: auto; max-height: 220px; }
  .site_wrap .col-md-9 table.gs_table2:has(h3) td h3 { margin-top: 4px; }
}
#feedbackForm textarea { min-height: 200px; resize: vertical; }

/* Zelda Cards page: sign-in box and card form */
.zx-cardbox { background: var(--zx-bg); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--zx-line); padding: 18px 20px; margin: 18px 0 26px; }
.zx-cardbox h3 { margin: 4px 0 10px; }
.zx-cardwho { font-size: 14px; color: var(--zx-muted); }
.zx-cardnote { font-size: 13.5px; color: var(--zx-muted); }
.zx-cardform label { display: block; font-weight: 600; color: var(--zx-ink); margin: 0 0 12px; font-size: 14px; }
.zx-cardform input[type="text"], .zx-cardform select { display: block; width: 100%; max-width: 380px; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--zx-line);
  border-radius: 10px; background: var(--zx-card); color: var(--zx-ink); font: 500 15px Inter, sans-serif; box-sizing: border-box; }
.zx-cardform input[type="text"]:focus, .zx-cardform select:focus { outline: 0; border-color: var(--zx-green); box-shadow: 0 0 0 3px var(--zx-green-tint); }
:root[data-theme="dark"] .zx-cardbox { background: rgba(0, 0, 0, .2); }
:root[data-theme="dark"] .zx-cardform input[type="text"], :root[data-theme="dark"] .zx-cardform select { background: rgba(0, 0, 0, .25); }
.zx-cardbox a.btn, .zx-cardbox a.btn:hover { color: #fff !important; text-decoration: none !important; }