@charset "UTF-8";
/* Every theme owns its full palette, including its header/sidebar "chrome"
   tone (the --wood-* vars — named for the original wood-plank look, but
   really just "chrome" now that other themes use lacquer/metal/etc for the
   same role) so a theme like Qi's Room or the Casino can look genuinely
   different in the header too, not just recolor the parchment cards.
   Pixelify Sans is reserved for "signage" moments (titles, scores, big
   numbers); body text stays a plain sans so checklists read easily small. */
:root{
  --font-display:'Pixelify Sans',Georgia,serif;
}
/* ── Light ("Harvest Day") ── */
:root,
:root[data-theme="light"] {
  /* Tells the browser to render native widgets it draws itself — number
     input spin arrows chief among them — in a light-appropriate style
     instead of always defaulting to light regardless of our theme. */
  color-scheme:light;
  --bg:#f6ecc9;--surface:linear-gradient(180deg,#f9edc9,#eeda9c);--surface2:#e8d197;--border:#b58a4e;
  --text:#3a2510;--muted:#7c5a34;--accent:#4c8a34;--afg:#fbf3dd;
  --pbg:#dcc38e;--pfill:#4c8a34;--gold:#cf9420;--warn-text:#7a4a08;--danger:#a8342a;
  --spring:#5c9a3c;--summer:#d99a2b;--fall:#c0602a;--winter:#4a7fae;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#a8d8ec 0%,#eee6c8 220%);
  --wood-dark:#7a5636;--wood-mid:#a87a48;--wood-light:#c99a5e;
  --wood-grain:rgba(0,0,0,.10);--wood-border:#4a3220;
  --wood-text:#fbf1d8;--wood-muted:#e8d2a4;
  --chip-cc-bg:#d9edc4;--chip-cc-bd:#5c9a3c;--chip-cc-tx:#2c5a18;
  --chip-ql-bg:#f5e2b8;--chip-ql-bd:#c68a1f;--chip-ql-tx:#7a4c08;
  --chip-rc-bg:#d3e3ee;--chip-rc-bd:#3f6f9c;--chip-rc-tx:#1c3c58;
  --chip-pr-bg:#ece2c8;--chip-pr-bd:#8a6f48;--chip-pr-tx:#3a2e18;
  --chip-ot-bg:#f0d9e4;--chip-ot-bd:#b4507e;--chip-ot-tx:#701a40;
  --cal-day-bg:#e9d8ab;--cal-day-hover:#d8c495;
  --accent-rgb:76,138,52;--gold-rgb:207,148,32;
  --shadow:0 1px 2px rgba(58,38,20,.10),0 6px 16px rgba(58,38,20,.14);
  --shadow-hover:0 2px 6px rgba(58,38,20,.14),0 12px 28px rgba(58,38,20,.20);
  --shadow-sm:0 1px 3px rgba(58,38,20,.16);
}
/* ── Dark ("Lantern Night") ── */
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#2e2013;--surface:linear-gradient(180deg,#6b4c2c,#4a331d);--surface2:#3d2c1a;--border:#a37f52;
  --text:#f5e6c4;--muted:#c2a578;--accent:#7cc264;--afg:#14100a;
  --pbg:#3d2c1a;--pfill:#7cc264;--gold:#e6ac3f;--warn-text:#e6ac3f;--danger:#e2564f;
  --spring:#7cc264;--summer:#e6ac3f;--fall:#e2703a;--winter:#5b98d6;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#0c1130 0%,#173259 55%,#20505a 100%);
  --wood-dark:#7a5636;--wood-mid:#a87a48;--wood-light:#c99a5e;
  --wood-grain:rgba(0,0,0,.10);--wood-border:#4a3220;
  --wood-text:#fbf1d8;--wood-muted:#e8d2a4;
  --chip-cc-bg:#203218;--chip-cc-bd:#4c8a34;--chip-cc-tx:#8fd86c;
  --chip-ql-bg:#332608;--chip-ql-bd:#c68a1f;--chip-ql-tx:#f0c060;
  --chip-rc-bg:#122430;--chip-rc-bd:#3f6f9c;--chip-rc-tx:#7fb4dc;
  --chip-pr-bg:#2c2418;--chip-pr-bd:#8a7048;--chip-pr-tx:#d0bf94;
  --chip-ot-bg:#301224;--chip-ot-bd:#b4507e;--chip-ot-tx:#ec8cb4;
  --cal-day-bg:#3d2c1a;--cal-day-hover:#4a3620;
  --accent-rgb:124,194,100;--gold-rgb:230,172,63;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.4);
  --shadow-hover:0 2px 6px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
}
/* ── Light ("Ginger Island") — the jungle exterior by day ── */
:root[data-theme="ginger-day"] {
  color-scheme:light;
  --bg:#f2e6bc;--surface:linear-gradient(180deg,#f7f0d0,#e8dba0);--surface2:#e0d190;--border:#a8863e;
  --text:#33421c;--muted:#4a5a2c;--accent:#3a9c4a;--afg:#fdf9e4;
  --pbg:#d8cf94;--pfill:#3a9c4a;--gold:#d4a017;--warn-text:#7a5410;--danger:#c0392b;
  --spring:#5c9a3c;--summer:#d99a2b;--fall:#c0602a;--winter:#2a9c9c;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#7ec8e3 0%,#a8e0c8 60%,#e8dba0 160%);
  --wood-dark:#8a6a2e;--wood-mid:#b8944a;--wood-light:#d8b86a;
  --wood-grain:rgba(0,0,0,.10);--wood-border:#4a3a18;
  --wood-text:#fdf6e0;--wood-muted:#e8d4a0;
  --chip-cc-bg:#d4f0c4;--chip-cc-bd:#3a9c4a;--chip-cc-tx:#1c5c28;
  --chip-ql-bg:#f5e6b8;--chip-ql-bd:#d4a017;--chip-ql-tx:#7a5808;
  --chip-rc-bg:#c8ecec;--chip-rc-bd:#2a8c9c;--chip-rc-tx:#134c58;
  --chip-pr-bg:#ece2c0;--chip-pr-bd:#8a7048;--chip-pr-tx:#3a2e18;
  --chip-ot-bg:#f8d8e8;--chip-ot-bd:#d45090;--chip-ot-tx:#7a1848;
  --cal-day-bg:#e0d190;--cal-day-hover:#cfc182;
  --accent-rgb:58,156,74;--gold-rgb:212,160,23;
  --shadow:0 1px 2px rgba(40,50,20,.10),0 6px 16px rgba(40,50,20,.14);
  --shadow-hover:0 2px 6px rgba(40,50,20,.14),0 12px 28px rgba(40,50,20,.20);
  --shadow-sm:0 1px 3px rgba(40,50,20,.16);
}
/* ── Dark ("Qi's Walnut Room") — the mysterious purple chamber by night ── */
:root[data-theme="qi-room"] {
  color-scheme:dark;
  --bg:#150c1e;--surface:linear-gradient(180deg,#3a2050,#241333);--surface2:#1c1028;--border:#8a4fc0;
  --text:#ecdcf5;--muted:#a888c8;--accent:#3ddc97;--afg:#150c1e;
  --pbg:#241333;--pfill:#3ddc97;--gold:#e8b03c;--warn-text:#e8b03c;--danger:#e8446a;
  --spring:#3ddc97;--summer:#e8b03c;--fall:#e8446a;--winter:#6a8fe8;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#0a0614 0%,#1c0f2e 45%,#2e1440 100%);
  --wood-dark:#1c0f28;--wood-mid:#3a1f52;--wood-light:#5c3878;
  --wood-grain:rgba(200,120,255,.14);--wood-border:#0c0614;
  --wood-text:#f0e0fa;--wood-muted:#c8a8e0;
  --chip-cc-bg:#1c3024;--chip-cc-bd:#3ddc97;--chip-cc-tx:#7ef0b8;
  --chip-ql-bg:#302008;--chip-ql-bd:#e8b03c;--chip-ql-tx:#f5c868;
  --chip-rc-bg:#1c1c38;--chip-rc-bd:#6a8fe8;--chip-rc-tx:#a0b8f5;
  --chip-pr-bg:#241830;--chip-pr-bd:#8a6ab0;--chip-pr-tx:#d0b8e8;
  --chip-ot-bg:#380c24;--chip-ot-bd:#e8446a;--chip-ot-tx:#f590a8;
  --cal-day-bg:#241333;--cal-day-hover:#2e1a40;
  --accent-rgb:61,220,151;--gold-rgb:232,176,60;
  --shadow:0 1px 2px rgba(10,0,20,.4),0 6px 18px rgba(10,0,20,.45);
  --shadow-hover:0 2px 6px rgba(10,0,20,.45),0 14px 32px rgba(10,0,20,.55);
  --shadow-sm:0 1px 3px rgba(10,0,20,.4);
}
/* ── Light ("Oasis Sands") — the desert outside Sandy's shop by day ── */
:root[data-theme="oasis-day"] {
  color-scheme:light;
  --bg:#f0dcb0;--surface:linear-gradient(180deg,#f5e8c8,#e8d09c);--surface2:#dcc088;--border:#b06838;
  --text:#4a2818;--muted:#6a4428;--accent:#2a9c9c;--afg:#fdf3dc;
  --pbg:#d8bc84;--pfill:#2a9c9c;--gold:#c8901e;--warn-text:#8a5010;--danger:#b0402a;
  --spring:#5c9a3c;--summer:#d99a2b;--fall:#b0402a;--winter:#2a9c9c;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#a8d8ec 0%,#e8d4a0 200%);
  --wood-dark:#7a4426;--wood-mid:#a8663c;--wood-light:#c8905a;
  --wood-grain:rgba(0,0,0,.12);--wood-border:#4a2814;
  --wood-text:#faeed0;--wood-muted:#e0c090;
  --chip-cc-bg:#c8ece0;--chip-cc-bd:#2a9c7c;--chip-cc-tx:#145c48;
  --chip-ql-bg:#f5e2b0;--chip-ql-bd:#c8901e;--chip-ql-tx:#7a5808;
  --chip-rc-bg:#c8e4ec;--chip-rc-bd:#2a7c9c;--chip-rc-tx:#134458;
  --chip-pr-bg:#ece0c4;--chip-pr-bd:#8a6840;--chip-pr-tx:#3a2814;
  --chip-ot-bg:#f8dce0;--chip-ot-bd:#c8506c;--chip-ot-tx:#7a1830;
  --cal-day-bg:#dcc088;--cal-day-hover:#cdb078;
  --accent-rgb:42,156,156;--gold-rgb:200,144,30;
  --shadow:0 1px 2px rgba(60,30,10,.10),0 6px 16px rgba(60,30,10,.14);
  --shadow-hover:0 2px 6px rgba(60,30,10,.14),0 12px 28px rgba(60,30,10,.20);
  --shadow-sm:0 1px 3px rgba(60,30,10,.16);
}
/* ── Dark ("Sandy's Casino") — black lacquer, gold trim, neon signage ── */
:root[data-theme="casino-night"] {
  color-scheme:dark;
  --bg:#160e0a;--surface:linear-gradient(180deg,#5c1c22,#3a1016);--surface2:#2a0c10;--border:#c8942e;
  --text:#f5e0c0;--muted:#c09068;--accent:#2a9c5c;--afg:#160e0a;
  --pbg:#2a0c10;--pfill:#2a9c5c;--gold:#e8b830;--warn-text:#e8b830;--danger:#e83030;
  --spring:#2a9c5c;--summer:#e8b830;--fall:#e83030;--winter:#4a7cc8;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#0a0608 0%,#2a0e10 55%,#4a1614 100%);
  --wood-dark:#0e0808;--wood-mid:#241614;--wood-light:#3a241e;
  --wood-grain:rgba(232,184,48,.16);--wood-border:#050302;
  --wood-text:#f5e0c0;--wood-muted:#d8b878;
  --chip-cc-bg:#163020;--chip-cc-bd:#2a9c5c;--chip-cc-tx:#6ce09c;
  --chip-ql-bg:#302206;--chip-ql-bd:#e8b830;--chip-ql-tx:#f5cc60;
  --chip-rc-bg:#101c30;--chip-rc-bd:#4a7cc8;--chip-rc-tx:#8ab0ec;
  --chip-pr-bg:#241a12;--chip-pr-bd:#a07848;--chip-pr-tx:#e0c090;
  --chip-ot-bg:#300c14;--chip-ot-bd:#e83030;--chip-ot-tx:#f58080;
  --cal-day-bg:#2a0c10;--cal-day-hover:#3a1216;
  --accent-rgb:42,156,92;--gold-rgb:232,184,48;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.55);
  --shadow-hover:0 2px 6px rgba(0,0,0,.55),0 14px 32px rgba(0,0,0,.65);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
}
/* ── Dark ("Midnight Mine") — true near-black stone, gem-colored pops ── */
:root[data-theme="midnight-mine"] {
  color-scheme:dark;
  --bg:#0a0a0d;--surface:linear-gradient(180deg,#1a1b21,#131319);--surface2:#17181d;--border:#35373f;
  --text:#e8e8ec;--muted:#8b8d97;--accent:#34d399;--afg:#08080a;
  --pbg:#1c1d23;--pfill:#34d399;--gold:#f0b429;--warn-text:#ffca58;--danger:#f0453f;
  --spring:#34d399;--summer:#f0b429;--fall:#e2593a;--winter:#4f8fe0;
  --body-bg:var(--bg);
  --sky:linear-gradient(180deg,#020203 0%,#0d0e14 55%,#141520 100%);
  --wood-dark:#08080a;--wood-mid:#16171c;--wood-light:#232430;
  --wood-grain:rgba(255,255,255,.04);--wood-border:#000000;
  --wood-text:#ececed;--wood-muted:#9496a0;
  --chip-cc-bg:#0f2620;--chip-cc-bd:#34d399;--chip-cc-tx:#7ce8bc;
  --chip-ql-bg:#241b06;--chip-ql-bd:#f0b429;--chip-ql-tx:#f5cc6a;
  --chip-rc-bg:#0c1c2c;--chip-rc-bd:#4f8fe0;--chip-rc-tx:#8ab8ec;
  --chip-pr-bg:#1c1a22;--chip-pr-bd:#8a7ab0;--chip-pr-tx:#c8b8e0;
  --chip-ot-bg:#2c0e14;--chip-ot-bd:#e2453f;--chip-ot-tx:#f28a86;
  --cal-day-bg:#17181d;--cal-day-hover:#202128;
  --accent-rgb:52,211,153;--gold-rgb:240,180,41;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.65);
  --shadow-hover:0 2px 8px rgba(0,0,0,.7),0 16px 36px rgba(0,0,0,.75);
  --shadow-sm:0 1px 3px rgba(0,0,0,.6);
}
/* ── Light ("Spring Farm") — new grass, blossoms, and a clear valley sky ── */
:root[data-theme="spring-farm"] {
  color-scheme:light;
  --bg:#e8f0c6;--surface:linear-gradient(180deg,#fff8dc,#e8efb5);--surface2:#d9e5a6;--border:#87a84d;
  --text:#294524;--muted:#627044;--accent:#4e9f45;--afg:#fffbea;
  --pbg:#c4d596;--pfill:#4e9f45;--gold:#d9a62e;--warn-text:#86580e;--danger:#bc493f;
  --spring:#4e9f45;--summer:#d9a62e;--fall:#c76735;--winter:#4b88b5;
  --body-bg:var(--bg);--sky:linear-gradient(180deg,#8fd3e8 0%,#c8e8dc 52%,#e8f0c6 135%);
  --wood-dark:#68452e;--wood-mid:#946647;--wood-light:#bd8960;--wood-grain:rgba(74,42,25,.12);--wood-border:#432b20;
  --wood-text:#fff5dc;--wood-muted:#ead4aa;
  --chip-cc-bg:#d8edbc;--chip-cc-bd:#57943c;--chip-cc-tx:#2f5c22;
  --chip-ql-bg:#f4e1ad;--chip-ql-bd:#c89022;--chip-ql-tx:#744b09;
  --chip-rc-bg:#d1e4ed;--chip-rc-bd:#4c83a4;--chip-rc-tx:#28506b;
  --chip-pr-bg:#ece1c4;--chip-pr-bd:#8f7149;--chip-pr-tx:#4b3926;
  --chip-ot-bg:#f2d7e5;--chip-ot-bd:#b55f88;--chip-ot-tx:#71304f;
  --cal-day-bg:#d9e5a6;--cal-day-hover:#c8da91;--accent-rgb:78,159,69;--gold-rgb:217,166,46;
  --shadow:0 2px 4px rgba(48,76,34,.10),0 8px 20px rgba(48,76,34,.14);
  --shadow-hover:0 4px 8px rgba(48,76,34,.14),0 14px 32px rgba(48,76,34,.20);--shadow-sm:0 2px 5px rgba(48,76,34,.16)
}
/* ── Light ("Autumn Harvest") — pumpkins, maple leaves, and warm soil ── */
:root[data-theme="autumn-harvest"] {
  color-scheme:light;
  --bg:#e3aa69;--surface:linear-gradient(180deg,#f4d39a,#dfa15f);--surface2:#cf8a50;--border:#94472f;
  --text:#442419;--muted:#75452f;--accent:#a9432c;--afg:#fff3dc;
  --pbg:#bd7445;--pfill:#a9432c;--gold:#e0a52d;--warn-text:#754208;--danger:#922f2a;
  --spring:#629646;--summer:#dda029;--fall:#b84e2f;--winter:#517fa8;
  --body-bg:var(--bg);--sky:linear-gradient(180deg,#d88955 0%,#bc5d3e 48%,#6f3428 145%);
  --wood-dark:#53291f;--wood-mid:#78402d;--wood-light:#a65e3b;--wood-grain:rgba(45,18,12,.16);--wood-border:#351912;
  --wood-text:#ffe9c2;--wood-muted:#e5bc87;
  --chip-cc-bg:#cbd99d;--chip-cc-bd:#66823a;--chip-cc-tx:#374d20;
  --chip-ql-bg:#f0cc83;--chip-ql-bd:#ae7418;--chip-ql-tx:#67400a;
  --chip-rc-bg:#c5d3dc;--chip-rc-bd:#50758e;--chip-rc-tx:#29475a;
  --chip-pr-bg:#ddc098;--chip-pr-bd:#806044;--chip-pr-tx:#4b3425;
  --chip-ot-bg:#e5b2ba;--chip-ot-bd:#994b5b;--chip-ot-tx:#642937;
  --cal-day-bg:#cf8a50;--cal-day-hover:#be7943;--accent-rgb:169,67,44;--gold-rgb:224,165,45;
  --shadow:0 2px 4px rgba(65,26,17,.14),0 8px 20px rgba(65,26,17,.18);
  --shadow-hover:0 4px 9px rgba(65,26,17,.18),0 15px 34px rgba(65,26,17,.25);--shadow-sm:0 2px 5px rgba(65,26,17,.18)
}
/* ── Light ("Junimo Community Center") — bundle parchment and forest magic ── */
:root[data-theme="junimo-center"] {
  color-scheme:light;
  --bg:#a9c47c;--surface:linear-gradient(180deg,#eee2b8,#c9d28e);--surface2:#b5c578;--border:#6e7940;
  --text:#263d2a;--muted:#5b6746;--accent:#3f9552;--afg:#fff9dc;
  --pbg:#9eb066;--pfill:#3f9552;--gold:#d4a72f;--warn-text:#77560d;--danger:#a83c3c;
  --spring:#50a95e;--summer:#d6a62f;--fall:#bb6536;--winter:#4f88aa;
  --body-bg:var(--bg);--sky:linear-gradient(180deg,#75b98b 0%,#52795a 58%,#304f3e 150%);
  --wood-dark:#3b3224;--wood-mid:#66543a;--wood-light:#8d774f;--wood-grain:rgba(24,40,26,.14);--wood-border:#282116;
  --wood-text:#f4e8bf;--wood-muted:#cfc096;
  --chip-cc-bg:#cde5ad;--chip-cc-bd:#4d8b43;--chip-cc-tx:#285528;
  --chip-ql-bg:#ead79b;--chip-ql-bd:#bd8c24;--chip-ql-tx:#6c4c0c;
  --chip-rc-bg:#bfd7d5;--chip-rc-bd:#4e7e7e;--chip-rc-tx:#285253;
  --chip-pr-bg:#d8cba4;--chip-pr-bd:#81734e;--chip-pr-tx:#473e2a;
  --chip-ot-bg:#ddc2d5;--chip-ot-bd:#91617e;--chip-ot-tx:#58374d;
  --cal-day-bg:#b5c578;--cal-day-hover:#a5b768;--accent-rgb:63,149,82;--gold-rgb:212,167,47;
  --shadow:0 2px 4px rgba(30,58,35,.12),0 8px 20px rgba(30,58,35,.17);
  --shadow-hover:0 4px 8px rgba(30,58,35,.16),0 15px 34px rgba(30,58,35,.23);--shadow-sm:0 2px 5px rgba(30,58,35,.17)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;color:var(--text);min-height:100vh;font-size:15px;line-height:1.5;
  background:var(--sky)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:.02em}
::selection{background:rgba(var(--accent-rgb),.35)}
:root{scrollbar-color:var(--border) var(--surface2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--surface2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:3px solid var(--surface2)}
/* The nav sidebar sits on wood chrome, not parchment, so its scrollbar
   (and, natively, its select-arrow-less number inputs) need the wood
   tokens instead of the parchment ones every other scrollbar uses. */
.nav-wrap{scrollbar-color:var(--wood-light) var(--wood-dark)}
.nav::-webkit-scrollbar-track{background:var(--wood-dark)}
.nav::-webkit-scrollbar-thumb{background:var(--wood-light);border-color:var(--wood-dark)}
/* Native <select> arrows ignore theme colors entirely by default; drawn
   as two CSS gradient wedges instead of an image so the color can stay a
   plain var() and follow whichever theme (or palette added later) is
   active. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* Number-input spin arrows are drawn by the OS/browser chrome itself — no
   CSS property can recolor the glyph, only color-scheme's blanket light/dark
   guess (already set above), which still doesn't match a specific theme's
   palette. Removing them is more consistent than a stray unthemed widget;
   typing a value or using the keyboard's own ↑/↓ still works either way. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.app{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"hd""nav""main";height:100vh;height:100dvh}
/* Grid items default to a content-based min-width, which silently widens the
   whole page instead of letting internal overflow (e.g. the horizontally
   scrolling mobile nav) do its job. */
.app>*{min-width:0;min-height:0}
@media(min-width:700px){.app{grid-template-columns:222px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"hd hd""nav main"}}
.hd{grid-area:hd;position:relative;padding:.85rem 1.25rem;color:var(--wood-text);
  background:linear-gradient(180deg,var(--wood-light),var(--wood-mid) 55%,var(--wood-dark));
  border-bottom:4px solid var(--wood-border);
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 4px 10px rgba(0,0,0,.35)}
.hd::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--wood-grain) 0 1px,transparent 1px 8px),
             linear-gradient(180deg,rgba(255,255,255,.10),transparent 45%)}
.hd-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.hd-title{display:flex;flex-direction:column;align-items:center;font-family:var(--font-display);font-size:1.5rem;color:var(--wood-text);letter-spacing:.02em}
/* Gold text on the header's own wood tone can land almost illegible in
   themes whose lightest wood stop is itself golden-tan (Harvest Day,
   Ginger Island, Oasis Sands measure under 1.1:1 contrast there) — a thin
   dark outline guarantees separation from the background regardless of
   how close the two hues land, without giving up the gold identity. */
.hd-title em{color:var(--gold);font-style:normal;
  text-shadow:0 1px 2px rgba(0,0,0,.55);-webkit-text-stroke:.5px var(--wood-border)}
.hd-logo{width:1.3em;height:1.3em;vertical-align:-.28em;margin-right:.15rem;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
.hd-tagline{font-size:.62rem;font-weight:400;letter-spacing:.03em;color:var(--wood-muted);margin-top:.15rem}
/* Read-only in-game date badge — set only from a save upload (see
   applySaveReport, save-parser.js), never editable here. Hidden until the
   first upload since there's nothing real to show before then. */
.ig-date-badge{display:none;align-items:center;gap:.5rem;background:rgba(0,0,0,.22);
  border:2px solid var(--wood-border);border-radius:99px;padding:.25rem .8rem .25rem .25rem;cursor:default;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.25)}
.ig-date-badge.show{display:flex}
.ig-date-icon{display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;border-radius:50%;
  font-size:1.05rem;flex-shrink:0;border:2px solid var(--gold);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);
  animation:ig-date-bob 2.6s ease-in-out infinite}
@keyframes ig-date-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.ig-date-icon.sp{background:var(--spring)}.ig-date-icon.su{background:var(--summer)}
.ig-date-icon.fa{background:var(--fall)}.ig-date-icon.wi{background:var(--winter)}
.ig-date-text{display:flex;flex-direction:column;line-height:1.05}
.ig-date-day{font-family:var(--font-display);font-weight:700;font-size:.78rem;color:var(--wood-text)}
.ig-date-year{font-size:.62rem;color:var(--wood-muted);font-weight:600;letter-spacing:.02em}
.score-badge{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--afg);font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent),var(--pfill));padding:.35rem .9rem;border-radius:99px;
  border:2px solid var(--gold);box-shadow:var(--shadow-sm),inset 0 0 0 2px rgba(0,0,0,.2)}
.search-wrap{position:relative;display:flex;align-items:center}
.search-toggle-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2.2rem;height:2.2rem;
  border:2px solid var(--wood-border);border-radius:8px;background:rgba(0,0,0,.18);color:var(--wood-text);cursor:pointer;font-size:1rem;
  transition:border-color .15s,background .15s}
.search-toggle-btn:hover{border-color:var(--gold);background:rgba(0,0,0,.3)}
.search-wrap.expanded .search-toggle-btn{border-color:var(--gold);background:rgba(0,0,0,.3)}
.search-input{width:0;min-width:0;padding:.5rem 0;margin-left:0;border:2px solid transparent;border-radius:8px;
  background:var(--surface);color:var(--text);font-size:.85rem;opacity:0;pointer-events:none;
  transition:width .22s ease,opacity .18s ease,padding .22s ease,margin-left .22s ease}
.search-wrap.expanded .search-input{width:min(260px,60vw);padding:.5rem .75rem;margin-left:.5rem;opacity:1;border-color:var(--wood-border);pointer-events:auto}
.search-input:focus{outline:none;border-color:var(--gold)}
.search-results{position:absolute;top:calc(100% + .3rem);left:0;min-width:280px;max-width:calc(100vw - 2.5rem);background:var(--surface);border:2px solid var(--border);border-radius:8px;box-shadow:var(--shadow-hover);max-height:360px;overflow-y:auto;z-index:150;display:none}
.search-results.show{display:block}
.search-result-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;cursor:pointer;border-bottom:1px solid var(--surface2)}
.search-result-row:hover,.search-result-row.active{background:var(--surface2)}
.search-result-row:last-child{border-bottom:none}
.search-result-name{flex:1;font-size:.85rem;color:var(--text)}
.search-result-tag{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.search-empty{padding:.65rem;font-size:.82rem;color:var(--muted);font-style:italic}
.pbar{position:relative;height:10px;background:rgba(0,0,0,.35);border-radius:99px;overflow:hidden;margin-top:.6rem;box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.08)}
.pfill{position:relative;height:100%;background:linear-gradient(90deg,var(--pfill),var(--gold));border-radius:99px;transition:width .4s ease}
.nav-wrap{grid-area:nav;position:relative;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,var(--wood-mid),var(--wood-dark));border-right:4px solid var(--wood-border)}
.nav-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--wood-grain) 0 1px,transparent 1px 9px)}
.nav{position:relative;z-index:1;padding:.5rem;display:flex;flex-direction:row;gap:.2rem;overflow-x:auto}
.nav-footer{position:relative;z-index:1;padding:.5rem;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
@media(min-width:700px){
  .nav{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:.75rem .5rem;flex:1;min-height:0}
  .nav-footer{padding:.75rem .5rem}
}
.nav-group-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--wood-muted);padding:.35rem .6rem .3rem;margin-top:.4rem}
.save-upload-btn{color:var(--gold);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-text-stroke:.4px var(--wood-border)}
.nb{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border:none;background:transparent;cursor:pointer;border-radius:8px;font-size:.83rem;color:var(--wood-muted);white-space:nowrap;text-align:left;width:100%;transition:background .15s,color .15s,transform .15s}
.nb:hover{background:rgba(0,0,0,.22);color:var(--wood-text)}
.nb.on{background:linear-gradient(135deg,var(--accent),var(--pfill));color:var(--afg);font-weight:600;box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(255,255,255,.15);transform:translateX(2px)}
.nb-icon{font-size:1.05rem;width:1.3rem;text-align:center;flex-shrink:0}
.nb-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.nb-ring{--pct:0;width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(currentColor calc(var(--pct)*1%), rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  opacity:.9}
.nb.on .nb-ring{color:var(--afg);opacity:1}
.nb:not(.on) .nb-ring{color:var(--gold)}
.nb-check{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;background:var(--pfill);color:#fff}
.nb.on .nb-check{background:var(--afg);color:var(--accent)}
.hamburger-wrap{position:relative;flex-shrink:0}
.nb.hamburger-btn{width:2.4rem;justify-content:center;border:2px solid var(--wood-border);font-size:1rem}
.hamburger-dropdown{position:absolute;bottom:calc(100% + 6px);left:0;min-width:190px;background:var(--surface);
  border:2px solid var(--border);border-radius:8px;box-shadow:var(--shadow-hover);padding:.35rem;display:none;z-index:150}
.hamburger-dropdown.show{display:block}
.menu-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:6px;color:var(--text);
  text-decoration:none;font-size:.83rem;cursor:pointer;white-space:nowrap}
.menu-item:hover{background:var(--surface2)}
/* Theme picker modal — a grid of saved palettes (currently Harvest Day /
   Lantern Night), each rendered as a live-colored mini mockup (sky +
   parchment card + accent bar) built from hardcoded per-theme hex values
   in THEMES rather than CSS vars, since the swatch has to show what a
   theme looks like regardless of which theme is currently active. */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}
.theme-pick{border:2px solid var(--border);border-radius:12px;padding:.6rem;cursor:pointer;
  background:var(--surface2);transition:border-color .15s,transform .15s,box-shadow .15s}
.theme-pick:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.theme-pick.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.theme-swatch{height:64px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.theme-swatch-card{width:72%;height:72%;border-radius:6px;border:2px solid;display:flex;flex-direction:column;
  gap:5px;justify-content:center;padding:0 8px}
.theme-swatch-bar{height:6px;border-radius:3px;width:65%}
.theme-swatch-line{height:4px;border-radius:2px;width:85%;opacity:.5}
.theme-pick-name{margin-top:.55rem;font-size:.85rem;font-weight:600;text-align:center;color:var(--text)}
.theme-pick-check{margin-top:.15rem;font-size:.72rem;color:var(--accent);text-align:center;font-weight:700}
.ui-mode-picker{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem;margin-bottom:1rem;
  border:2px solid var(--border);border-radius:12px;background:var(--surface2)}
.ui-mode-copy{min-width:0;flex:1}
.ui-mode-label,.theme-section-label{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--text)}
.ui-mode-description{font-size:.72rem;color:var(--muted);line-height:1.35;margin-top:.15rem;max-width:310px}
.theme-section-label{margin:.15rem 0 .55rem}
.ui-mode-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:0 0 210px;padding:3px;
  border:1px solid var(--border);border-radius:99px;background:var(--bg);isolation:isolate}
.ui-mode-thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;
  background:linear-gradient(135deg,var(--accent),var(--pfill));box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
:root[data-ui="modern"] .ui-mode-thumb{transform:translateX(100%)}
.ui-mode-option{border:0;background:transparent;color:var(--muted);padding:.45rem .65rem;border-radius:99px;cursor:pointer;
  font-size:.78rem;font-weight:700;white-space:nowrap;transition:color .2s}
.ui-mode-option.active{color:var(--afg)}
.main{grid-area:main;padding:1.25rem;overflow-y:auto;min-height:0;
  background:radial-gradient(ellipse 500px 300px at 15% 10%,rgba(0,0,0,.035),transparent 60%),
             radial-gradient(ellipse 420px 260px at 85% 30%,rgba(0,0,0,.03),transparent 60%),
             radial-gradient(ellipse 600px 400px at 50% 95%,rgba(0,0,0,.03),transparent 60%)}
.dash-hero{position:relative;overflow:hidden;text-align:center;background:var(--surface);border:4px solid var(--wood-border);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;margin-bottom:1rem;
  box-shadow:var(--shadow),inset 0 0 0 3px var(--border),inset 0 1px 0 rgba(255,255,255,.3)}
.dash-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(var(--gold-rgb),.18),transparent 65%);}
.dash-hero-num{position:relative;font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-hero-sub{position:relative;font-size:.85rem;color:var(--muted);margin:.4rem 0 .9rem}
.dash-hero-bar{max-width:420px;margin:0 auto;height:10px}
.card{background:var(--surface);border:4px solid var(--wood-border);border-radius:18px;padding:1.1rem;margin-bottom:1rem;
  box-shadow:var(--shadow),inset 0 0 0 3px var(--border),inset 0 1px 0 rgba(255,255,255,.3)}
.card-title{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;font-size:1.05rem;margin-bottom:.75rem;color:var(--text);display:flex;align-items:center;gap:.5rem}
.card-title.cat-toggle{cursor:pointer;user-select:none;justify-content:flex-start}
.card-title.cat-toggle:hover{color:var(--accent)}
.cat-chevron{display:inline-block;flex-shrink:0;font-size:.8em;color:var(--muted);transition:transform .18s ease}
.cat-chevron.collapsed{transform:rotate(-90deg)}
.cat-body.collapsed{display:none}
.card.cat-collapsed{padding-bottom:.55rem}
.card.cat-collapsed .card-title{margin-bottom:0}
.section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1rem;align-items:start}
/* Shared row treatment for every checklist/list-row variant across tabs
   (checklist items, NPC gift rows, monster kill counters, quantity
   trackers) so padding/radius/hover feel identical no matter which tab
   you're on — only the per-row content differs. */
.ci,.npc-row,.monster-row,.qty-row{display:flex;align-items:center;padding:.5rem;margin:0 -.5rem;border-radius:9px;border-bottom:1px solid var(--surface2);transition:background .15s}
.ci:hover,.npc-row:hover,.monster-row:hover,.qty-row:hover{background:var(--surface2)}
.ci:last-child,.npc-row:last-child,.monster-row:last-child,.qty-row:last-child{border-bottom:none}
.ci{gap:.65rem;cursor:pointer}
/* Checkboxes render as a CSS-drawn star instead of using an image asset.
   Muted = not done; the gold gradient = done. */
.ci input[type=checkbox],.stardrop-item input[type=checkbox]{appearance:none;-webkit-appearance:none;width:21px;height:21px;flex-shrink:0;
  border:none;background:var(--muted);cursor:pointer;position:relative;
  clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,4% 35%,39% 35%);
  transition:background .15s,transform .1s}
.ci input[type=checkbox]:hover,.stardrop-item input[type=checkbox]:hover{background:var(--accent)}
.ci input[type=checkbox]:active,.stardrop-item input[type=checkbox]:active{transform:scale(.85)}
.ci input[type=checkbox]:checked,.stardrop-item input[type=checkbox]:checked{
  background:linear-gradient(135deg,var(--accent),var(--gold));
  animation:starpop .3s ease}
@keyframes starpop{0%{transform:scale(.5) rotate(-18deg)}55%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.ci label{cursor:pointer;flex:1;font-size:.85rem;line-height:1.35}
.ci.done,.stardrop-item.done{animation:popcheck .3s ease}
.ci.done label,.stardrop-item.done>div{text-decoration:line-through;opacity:.55}
/* Grandpa's Evaluation: a criterion that's true in the save but not yet
   confirmed by an actual shrine evaluation (see applySaveReport,
   save-parser.js) gets the same solid star as "done", just in a fixed cool
   blue instead of gold — a deliberately theme-independent color (like the
   Seasonal Planner's event-type dots) rather than var(--warn-text), which
   coincides exactly with var(--gold) in several themes and would otherwise
   render visually identical to a real confirmed star. The checkbox itself
   stays unchecked (doesn't count toward the pts/candle total) until the
   player manually confirms it or a later upload shows the shrine has
   actually caught up. */
.ci.grandpa-pending input[type=checkbox]{
  background:linear-gradient(135deg,#4a90c2,#2a5888)}
.ci.grandpa-pending label{font-style:italic}
.meta{font-size:.75rem;color:var(--muted)}
@keyframes popcheck{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
.icon-tile,.icon-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface2);border:2px solid var(--border);overflow:hidden}
.icon-tile{border-radius:6px}
.icon-circle{border-radius:50%}
img.icon-tile,img.icon-circle{object-fit:cover;object-position:top center;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
.icon-fallback{line-height:1;background:var(--surface2)}
.chip{display:inline-block;padding:.1rem .45rem;border-radius:99px;font-size:.72rem;font-weight:600;margin-left:.3rem;vertical-align:middle}
.sp{background:var(--spring);color:#fff}.su{background:var(--summer);color:#fff}
.fa{background:var(--fall);color:#fff}.wi{background:var(--winter);color:#fff}
.all{background:var(--muted);color:#fff}
.prow-pct{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3rem;text-align:right}
.prow-bar{flex:0 0 80px;height:7px;background:var(--pbg);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.prow-fill{height:100%;background:linear-gradient(90deg,var(--pfill),var(--gold));border-radius:3px;transition:width .3s}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:.85rem;margin-bottom:1.25rem}
.cat-tile{background:var(--surface);border:3px solid var(--border);border-radius:14px;padding:.9rem 1rem;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.3);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--gold)}
.cat-tile-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.cat-tile-icon{font-size:1.15rem}
.cat-tile-name{font-size:.85rem;font-weight:600;color:var(--text)}
.cat-tile-mid{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.4rem}
.cat-tile-pct{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.cat-tile-weight{font-size:.7rem;color:var(--muted)}
.cat-tile .prow-bar{flex:none;width:100%;height:7px;margin-bottom:.4rem}
.cat-tile .prow-pct{display:block;text-align:left;min-width:0}
.hearts{display:flex;gap:2px;flex-wrap:wrap}
.heart{width:20px;height:20px;cursor:pointer;border:none;background:none;font-size:16px;padding:0;line-height:1;opacity:.25;color:#e03040;transition:opacity .15s}
.heart.filled{opacity:1}
.npc-row{gap:.7rem;flex-wrap:wrap;cursor:pointer}
.npc-row.done{background:linear-gradient(90deg,rgba(var(--accent-rgb),.10),transparent)}
.npc-name{min-width:90px;font-size:.88rem;font-weight:600}
.npc-gift{font-size:.75rem;color:var(--muted);flex:1}
.npc-type{font-size:.72rem;font-style:italic;color:var(--muted)}
.qty-row{gap:.6rem;font-size:.85rem}
.qty-row label{flex:1}
.qty-input{width:60px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);padding:.2rem .4rem;font-size:.85rem;font-variant-numeric:tabular-nums}
.qty-target{color:var(--muted);font-size:.78rem}
.done-qty{opacity:.5}
.rbtn{padding:.35rem .9rem;border:2px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:.85rem}
.rbtn.on{border-color:var(--gold);background:linear-gradient(135deg,var(--accent),var(--pfill));color:var(--afg);font-weight:600}
/* Segmented slider toggle — a pill-shaped group of mutually-exclusive
   options with an animated thumb behind the active one. Selection state
   must never rely on text color alone (emoji-only labels ignore `color`
   entirely), so the thumb's background position/width is the real signal. */
.seg{position:relative;display:flex;border-radius:99px;background:var(--surface2);border:1px solid var(--border);padding:2px}
.seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--pfill));box-shadow:var(--shadow-sm);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1)}
.seg-btn{position:relative;z-index:1;flex:1;border:none;background:transparent;padding:.35rem .8rem;border-radius:99px;cursor:pointer;font-size:.85rem;color:var(--muted);text-align:center;white-space:nowrap;transition:color .2s ease}
.seg-btn.on{color:var(--afg);font-weight:600}
.menu-item.admin-bell{position:relative}
.bell-badge{position:absolute;top:50%;right:.4rem;transform:translateY(-50%);min-width:16px;height:16px;padding:0 3px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:.65rem;font-weight:700;line-height:16px;text-align:center}
.nb.hamburger-btn{position:relative}
.hamburger-dot{position:absolute;top:.3rem;right:.4rem;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--wood-mid);display:none}
.hamburger-dot.show{display:block}
.hide-completed-toggle{display:inline-flex;align-items:center;gap:.55rem}
.toggle-switch{position:relative;display:inline-block;width:34px;height:19px;flex-shrink:0;border-radius:99px;
  background:var(--surface2);border:1px solid var(--border);transition:background .18s,border-color .18s}
.toggle-knob{position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:var(--muted);
  transition:transform .18s cubic-bezier(.4,0,.2,1),background .18s}
.hide-completed-toggle.on .toggle-switch{background:linear-gradient(135deg,var(--accent),var(--pfill));border-color:var(--gold)}
.hide-completed-toggle.on .toggle-knob{transform:translateX(15px);background:var(--afg)}
.hd-top .theme-btn{background:rgba(0,0,0,.18);border-color:var(--wood-border);color:var(--wood-text)}
.hd-top .theme-btn:hover{background:rgba(0,0,0,.3);border-color:var(--gold)}
#farm-picker-btn{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-top .toggle-switch{background:rgba(0,0,0,.25);border-color:var(--wood-border)}
.hd-top .toggle-knob{background:var(--wood-muted)}
.hd-top .hide-completed-toggle.on .toggle-switch{border-color:var(--gold)}
.seasonal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:.75rem;margin-bottom:1rem}
.seasonal-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:1.25rem;align-items:start}
/* Grid items default to a content-based min-width (same issue fixed for
   .app>* in the layout rules above) — without this, a nested grid like the
   calendar refuses to shrink below its own content size and overlaps its
   sibling column instead of wrapping to a new row on narrow viewports. */
.section-grid>*,.cat-tiles>*,.seasonal-grid>*,.seasonal-split>*,.summary-grid>*{min-width:0}
.season-card{border-radius:8px;padding:.85rem;border:2px solid transparent}
.season-card.spring{background:rgba(92,154,60,.12);border-color:var(--spring)}
.season-card.summer{background:rgba(217,154,43,.12);border-color:var(--summer)}
.season-card.fall{background:rgba(192,96,42,.12);border-color:var(--fall)}
.season-card.winter{background:rgba(74,127,174,.12);border-color:var(--winter)}
.season-card h3{font-size:.95rem;margin-bottom:.5rem}
.season-card ul{list-style:none;padding:0}
.season-card li{font-size:.8rem;padding:.15rem 0;color:var(--muted);display:flex;gap:.4rem}
.season-card li::before{content:"›";color:var(--accent)}
.urgent{color:var(--danger)!important;font-weight:600}
/* A separate token from --gold (which is tuned for decorative borders/fills,
   not body text) — on the light themes, gold text sat at ~2.3:1 contrast
   against the parchment card surface, well under the 4.5:1 body-text
   minimum; --warn-text is a darker amber chosen to actually pass on each
   theme's own card surface. */
.warn-text{color:var(--warn-text)!important;font-weight:600}
.tabs-inner{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;border-bottom:2px solid var(--border);padding-bottom:.5rem}
.itab{padding:.3rem .75rem;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;border-radius:4px 4px 0 0}
.itab.on{background:var(--surface2);color:var(--text);font-weight:600}
.monster-row{gap:.75rem}
.monster-name{flex:1;font-size:.88rem}
.monster-pbar{flex:0 0 100px;height:8px;background:var(--pbg);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.monster-pfill{height:100%;background:linear-gradient(90deg,var(--fall),var(--gold));border-radius:4px}
.monster-count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
.monster-input{width:70px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);padding:.2rem .4rem;font-size:.82rem;text-align:right}
.stardrop-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--surface2)}
.stardrop-item:last-child{border-bottom:none}
.theme-btn{padding:.3rem .6rem;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;cursor:pointer;font-size:.8rem}
#hide-completed-btn,#feedback-btn,#theme-btn,#reset-btn{border-radius:99px;padding:.3rem .85rem}
/* Filled solid (not just red text/outline) so it stays legible against every
   theme's header chrome, including the darker ones where a danger-colored
   outline on a near-black button barely registered. */
#reset-btn{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
#reset-btn:hover{filter:brightness(1.1)}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:.75rem;margin-bottom:1rem}
.scard{background:var(--surface2);border:3px solid var(--border);border-radius:14px;padding:.9rem .75rem;text-align:center;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.scard-icon{font-size:1.5rem;line-height:1;margin-bottom:.2rem}
.scard-num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.scard-label{font-size:.78rem;color:var(--muted)}
.note{font-size:.8rem;color:var(--muted);font-style:italic;padding:.4rem .6rem;background:var(--surface2);border-radius:4px;margin-bottom:.75rem}
.divider{height:1px;background:var(--border);margin:1rem 0;opacity:.4}
.fish-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
.ff{padding:.2rem .6rem;border:1px solid var(--border);border-radius:99px;background:transparent;color:var(--muted);cursor:pointer;font-size:.78rem}
.ff.on{font-weight:700;color:var(--accent);border-color:var(--accent)}
.bundle-complete{font-size:.78rem;color:var(--pfill);font-weight:600;margin-left:.5rem}
.ctag{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.7rem;font-weight:600;margin:.15rem .15rem 0 0;white-space:nowrap;border:1px solid}
.chip-cc{background:var(--chip-cc-bg);border-color:var(--chip-cc-bd);color:var(--chip-cc-tx)}
.chip-ql{background:var(--chip-ql-bg);border-color:var(--chip-ql-bd);color:var(--chip-ql-tx)}
.chip-rc{background:var(--chip-rc-bg);border-color:var(--chip-rc-bd);color:var(--chip-rc-tx)}
.chip-pr{background:var(--chip-pr-bg);border-color:var(--chip-pr-bd);color:var(--chip-pr-tx)}
.chip-ot{background:var(--chip-ot-bg);border-color:var(--chip-ot-bd);color:var(--chip-ot-tx)}
.modal-overlay{position:fixed;inset:0;background:rgba(10,7,4,.72);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}
.modal-card{max-width:420px;width:100%;max-height:80vh;overflow-y:auto;margin-bottom:0}
.modal-card.wide{max-width:560px}
.dropzone{border:2px dashed var(--border);border-radius:8px;padding:2rem 1rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--accent)}
.dropzone.drag-over{border-color:var(--accent);background:var(--surface2)}
.save-location-guide{margin-top:.85rem;border:1px solid var(--border);border-radius:10px;background:var(--surface2);overflow:hidden}
.save-location-guide summary{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;cursor:pointer;list-style:none;
  color:var(--text);font-size:.82rem;font-weight:700;user-select:none}
.save-location-guide summary::-webkit-details-marker{display:none}
.save-location-guide summary:hover{color:var(--accent)}
.save-guide-chevron{margin-left:auto;color:var(--muted);font-size:1rem;transition:transform .2s}
.save-location-guide[open] .save-guide-chevron{transform:rotate(180deg)}
.save-guide-body{padding:0 .8rem .8rem;border-top:1px solid var(--border)}
.save-guide-intro{font-size:.75rem;line-height:1.45;color:var(--muted);padding:.7rem 0}
.save-platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.save-platform{min-width:0;padding:.6rem;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.save-platform-name{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:750;color:var(--text);margin-bottom:.3rem}
.save-platform-step,.save-platform-note{font-size:.68rem;color:var(--muted);line-height:1.4}
.save-platform code{display:block;margin-top:.3rem;padding:.3rem .4rem;border-radius:5px;background:var(--bg);color:var(--accent);
  font:600 .66rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;user-select:all}
.save-platform-note{margin-top:.35rem}
.save-platform-note code{display:inline;padding:.08rem .2rem;font-size:.62rem}
.save-platform.console{border-style:dashed}
.save-guide-tip{margin-top:.6rem;font-size:.68rem;color:var(--muted);font-style:italic}
.upload-summary-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem}
.upload-summary-list li{display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .55rem;border-radius:8px;background:var(--surface2);
  color:var(--text);font-size:.82rem;line-height:1.4}
.upload-summary-dot{display:flex;align-items:center;justify-content:center;flex:0 0 18px;height:18px;margin-top:.05rem;border-radius:50%;
  background:var(--accent);color:var(--afg);font-size:.65rem;font-weight:900}
.upload-summary-note{margin-top:.75rem;padding:.6rem .7rem;border-radius:8px;background:var(--surface2);color:var(--muted);font-size:.74rem;line-height:1.4}
.upload-summary-error{padding:.75rem;border-radius:8px;background:rgba(190,45,45,.12);border:1px solid var(--danger);color:var(--danger);font-size:.82rem}
.welcome-choices{display:flex;gap:.85rem;margin-top:1.1rem;flex-wrap:wrap}
.welcome-choice{flex:1 1 180px;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;padding:1.5rem 1rem;border:2px solid var(--border);border-radius:12px;background:var(--surface2);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.welcome-choice:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.welcome-choice-img{width:64px;height:64px;font-size:2.4rem}
.welcome-choice-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.welcome-choice-sub{font-size:.78rem;color:var(--muted);line-height:1.3}
.welcome-choice.continue:hover{border-color:var(--accent)}
.welcome-choice.start-new:hover{border-color:var(--danger)}

/* ── Notes sidebar ──
   A docked drawer (not a modal — no backdrop) so it can stay open while
   browsing the rest of the app. z-index sits below .modal-overlay (100) on
   purpose, so an actual dialog (goal picker, reset confirm, ...) still wins
   if one happens to open while notes are out. */
.notes-tab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:90;
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:center;gap:.35rem;
  background:var(--surface);color:var(--text);border:2px solid var(--border);border-right:none;
  border-radius:10px 0 0 10px;padding:.7rem .45rem;font-size:.8rem;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow);transition:right .25s ease,background .15s}
.notes-tab:hover{background:var(--surface2)}
.notes-tab.shifted{right:min(340px,90vw)}
.notes-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(340px,90vw);
  background:var(--surface);border-left:3px solid var(--border);box-shadow:var(--shadow-hover);
  z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
.notes-panel.open{transform:translateX(0)}
.notes-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
.notes-panel-body{flex:1;overflow-y:auto;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.75rem;min-height:0}
.notes-add textarea{width:100%;min-height:70px;resize:vertical;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--text);padding:.5rem .6rem;font-size:.85rem;font-family:inherit}
.notes-add textarea:focus{outline:none;border-color:var(--accent)}
#notes-list{display:flex;flex-direction:column;gap:.6rem}
.note-item{background:var(--surface2);border-radius:8px;padding:.6rem .7rem;position:relative}
.note-item-text{font-size:.85rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;padding-right:1.6rem}
.note-item-date{font-size:.68rem;color:var(--muted);margin-top:.35rem}
.note-item-del{position:absolute;top:.4rem;right:.4rem;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:.85rem;padding:.15rem .35rem;border-radius:4px;line-height:1}
.note-item-del:hover{color:var(--danger);background:var(--surface)}
.notes-panel-footer{padding:.75rem 1rem;border-top:1px solid var(--border);flex-shrink:0}

/* ── Modern UI ──────────────────────────────────────────────────────
   A second interface language layered over every existing color palette.
   Palette variables remain the source of truth; only shape, spacing,
   texture, typography hierarchy, and motion change here. */
:root[data-ui="modern"]{
  --modern-radius:16px;--modern-radius-lg:24px;
  --shadow:0 8px 30px rgba(0,0,0,.16);--shadow-hover:0 16px 42px rgba(0,0,0,.24);
  --shadow-sm:0 4px 14px rgba(0,0,0,.14)
}
:root[data-ui="modern"] body{font-size:15px;background:var(--body-bg)}
:root[data-ui="modern"] .app{gap:0}
:root[data-ui="modern"] .hd{padding:1rem 1.4rem;border:0;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);
  background:color-mix(in srgb,var(--surface2) 88%,transparent);color:var(--text);box-shadow:0 8px 30px rgba(0,0,0,.10);backdrop-filter:blur(18px)}
:root[data-ui="modern"] .hd::before,:root[data-ui="modern"] .nav-wrap::before{display:none}
:root[data-ui="modern"] .hd-title{align-items:flex-start;color:var(--text);font-size:1.65rem}
:root[data-ui="modern"] .hd-title em{color:var(--accent);text-shadow:none;-webkit-text-stroke:0}
:root[data-ui="modern"] .hd-logo{filter:drop-shadow(0 4px 7px rgba(var(--gold-rgb),.32))}
:root[data-ui="modern"] .hd-tagline{color:var(--muted)}
:root[data-ui="modern"] .hd-top .theme-btn,:root[data-ui="modern"] .search-toggle-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm)}
:root[data-ui="modern"] .hd-top .theme-btn:hover,:root[data-ui="modern"] .search-toggle-btn:hover{background:var(--surface2);border-color:var(--accent);transform:translateY(-1px)}
:root[data-ui="modern"] .ig-date-badge{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
:root[data-ui="modern"] .ig-date-day{color:var(--text)}
:root[data-ui="modern"] .ig-date-year{color:var(--muted)}
:root[data-ui="modern"] .score-badge{border:0;padding:.45rem 1rem;box-shadow:0 7px 20px rgba(var(--accent-rgb),.28)}
:root[data-ui="modern"] .pbar{height:6px;background:color-mix(in srgb,var(--pbg) 75%,transparent);box-shadow:none}
:root[data-ui="modern"] .nav-wrap{background:color-mix(in srgb,var(--surface2) 92%,var(--bg));border:0;border-right:1px solid var(--border)}
:root[data-ui="modern"] .nav-group-label{color:var(--muted);padding-left:.75rem}
:root[data-ui="modern"] .nb{color:var(--muted);border-radius:12px;padding:.58rem .7rem}
:root[data-ui="modern"] .nb:hover{background:var(--surface);color:var(--text);transform:translateX(2px)}
:root[data-ui="modern"] .nb.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm);transform:none;outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
:root[data-ui="modern"] .nb.on::before{content:'';width:4px;height:18px;border-radius:99px;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.5)}
:root[data-ui="modern"] .nav-footer{border-color:var(--border)}
:root[data-ui="modern"] .save-upload-btn{color:var(--accent);text-shadow:none;-webkit-text-stroke:0}
:root[data-ui="modern"] .main{padding:1.6rem;background:
  radial-gradient(circle at 12% 4%,rgba(var(--accent-rgb),.14),transparent 28rem),
  radial-gradient(circle at 88% 95%,rgba(var(--gold-rgb),.10),transparent 34rem),var(--body-bg)}
:root[data-ui="modern"] .card,:root[data-ui="modern"] .dash-hero{border:1px solid color-mix(in srgb,var(--border) 68%,transparent);border-radius:var(--modern-radius-lg);
  box-shadow:var(--shadow);background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 92%,white 8%),color-mix(in srgb,var(--surface2) 88%,var(--bg) 12%));backdrop-filter:blur(10px)}
:root[data-ui="modern"] .dash-hero{padding:2rem 1.5rem}
:root[data-ui="modern"] .dash-hero::before{background:radial-gradient(circle at 50% -40%,rgba(var(--accent-rgb),.35),transparent 58%)}
:root[data-ui="modern"] .dash-hero-num{font-size:3.5rem}
:root[data-ui="modern"] .card-title{font-size:1.12rem}
:root[data-ui="modern"] .cat-tile,:root[data-ui="modern"] .scard{border:1px solid var(--border);border-radius:var(--modern-radius);box-shadow:var(--shadow-sm)}
:root[data-ui="modern"] .cat-tile:hover,:root[data-ui="modern"] .scard:hover{border-color:var(--accent);transform:translateY(-4px)}
:root[data-ui="modern"] .ci,:root[data-ui="modern"] .npc-row,:root[data-ui="modern"] .monster-row,:root[data-ui="modern"] .qty-row{border-bottom:0;margin:.15rem 0;padding:.58rem .65rem}
:root[data-ui="modern"] .ci:hover,:root[data-ui="modern"] .npc-row:hover,:root[data-ui="modern"] .monster-row:hover,:root[data-ui="modern"] .qty-row:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface2))}
:root[data-ui="modern"] .ci.done,:root[data-ui="modern"] .stardrop-item.done,:root[data-ui="modern"] .npc-row.done,:root[data-ui="modern"] .monster-row.done{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.07));
  box-shadow:inset 4px 0 0 var(--accent);outline:1px solid rgba(var(--accent-rgb),.2)}
:root[data-ui="modern"] .ci.done label,:root[data-ui="modern"] .stardrop-item.done>div{
  opacity:.78;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-decoration-skip-ink:none}
:root[data-ui="modern"] .ci.done input[type=checkbox],:root[data-ui="modern"] .stardrop-item.done input[type=checkbox]{
  filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.55));transform:scale(1.08)}
:root[data-ui="modern"] .npc-row.done .npc-name,:root[data-ui="modern"] .monster-row.done .monster-name{color:var(--accent)}
:root[data-ui="modern"] .theme-btn,:root[data-ui="modern"] .rbtn,:root[data-ui="modern"] .ff{border-radius:99px}
:root[data-ui="modern"] .modal-overlay{backdrop-filter:blur(8px);background:rgba(5,8,12,.62)}
:root[data-ui="modern"] .modal-card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 86%,white 14%),color-mix(in srgb,var(--bg) 78%,var(--surface2) 22%));
  border:1px solid color-mix(in srgb,var(--border) 75%,transparent);box-shadow:0 26px 80px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06)}
:root[data-ui="modern"] .modal-card>.card-title{margin:-.2rem -.2rem 1rem;padding-bottom:.8rem;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
:root[data-ui="modern"] .upload-modal-card{border-top:4px solid var(--accent)}
:root[data-ui="modern"] .upload-modal-card .dropzone{background:rgba(var(--accent-rgb),.08);border-color:color-mix(in srgb,var(--accent) 68%,var(--border))}
:root[data-ui="modern"] .upload-modal-card .dropzone:hover{background:rgba(var(--accent-rgb),.15);box-shadow:inset 0 0 0 1px var(--accent)}
:root[data-ui="modern"] .upload-summary-card.is-success{border-top:4px solid var(--accent)}
:root[data-ui="modern"] .upload-summary-card.is-error{border-top:4px solid var(--danger)}
:root[data-ui="modern"] .upload-summary-list li{background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.16)}
:root[data-ui="modern"] .upload-summary-note{background:color-mix(in srgb,var(--bg) 72%,var(--surface2));border-left:3px solid var(--gold);color:var(--text)}
:root[data-ui="modern"] .theme-pick{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:.7rem}
:root[data-ui="modern"] .theme-pick.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
:root[data-ui="modern"] .theme-swatch{border-radius:12px}
:root[data-ui="modern"] .notes-panel{background:color-mix(in srgb,var(--surface2) 95%,transparent);backdrop-filter:blur(18px)}
:root[data-ui="modern"] .save-location-guide{border-radius:16px;background:color-mix(in srgb,var(--surface2) 88%,transparent)}
:root[data-ui="modern"] .save-platform{border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.08)}

@media(max-width:699px){
  .ui-mode-picker{align-items:stretch;flex-direction:column}
  .ui-mode-toggle{flex-basis:auto;width:100%}
  .save-platform-grid{grid-template-columns:1fr}
  :root[data-ui="modern"] .hd{padding:.8rem 1rem}
  :root[data-ui="modern"] .hd-title{font-size:1.35rem}
  :root[data-ui="modern"] .main{padding:1rem}
  :root[data-ui="modern"] .nav-wrap{border-right:0;border-bottom:1px solid var(--border)}
  :root[data-ui="modern"] .nb.on::before{display:none}
}

/* ── Mobile (<700px) ──
   Placed last so it wins the cascade against same-specificity rules above
   without needing !important. Desktop layout (>=700px) is untouched. */
@media(max-width:699px){
  .nb-label{display:none}
  .nav-group-label{display:none}
  .nb{width:auto;padding:.65rem}
  /* Smaller cards fit two per row on a phone instead of one oversized card
     per row; wider checklist/bundle cards (.section-grid) keep their
     minimum since they hold multi-line item rows that need the room. */
  .summary-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
  .cat-tiles{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
  /* Bigger touch targets for small controls. */
  .theme-btn{padding:.5rem .75rem;font-size:.85rem}
  .ff{padding:.4rem .75rem;font-size:.82rem}
  .rbtn{padding:.55rem 1rem}
  .ci{padding:.6rem .5rem}
  .ci input[type=checkbox],.stardrop-item input[type=checkbox]{width:24px;height:24px}
  .heart{width:26px;height:26px;font-size:20px}
}
/* ── Events + Grange Display calculator ─────────────────────────── */
.events-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.event-pills{display:flex;gap:.4rem;overflow-x:auto;padding:.15rem 0 .7rem;scrollbar-width:thin}
.event-pill{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:.38rem .62rem;display:flex;align-items:center;gap:.3rem;white-space:nowrap;cursor:pointer;font:inherit;font-size:.76rem}
.event-pill:hover,.event-pill.on{border-color:var(--accent);color:var(--text);background:var(--surface2)}
.event-hero{display:flex;align-items:center;gap:1rem}
.event-hero-icon{font-size:3rem;line-height:1;flex:0 0 auto}
.event-hero p{font-size:.9rem;line-height:1.5;margin:.4rem 0 0}
.event-meta{display:flex;gap:.75rem;flex-wrap:wrap;color:var(--muted);font-size:.78rem}
.event-note{border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface));border-radius:9px;padding:.65rem .8rem;font-size:.82rem;line-height:1.45;margin-bottom:.75rem}
.event-guide-grid{align-items:start}
.event-checklist{display:flex;flex-direction:column;gap:.5rem}
.event-action{display:flex;gap:.5rem;font-size:.86rem;line-height:1.4}
.event-action>span:first-child{color:var(--accent);font-size:1rem;line-height:1.2}
.grange-score{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:.7rem .9rem;margin:.75rem 0}
.grange-score.win{border-color:var(--accent)}
.grange-score.close{border-color:var(--gold)}
.grange-score-num{font-size:2rem;font-weight:800;color:var(--gold)}
.grange-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.65rem}
.grange-breakdown span{background:var(--surface2);border-radius:7px;padding:.45rem;text-align:center;font-size:.75rem;color:var(--muted)}
.grange-breakdown strong{display:block;color:var(--text);font-size:.95rem;margin-top:.1rem}
.grange-advice{font-size:.82rem;line-height:1.45;border-left:3px solid var(--gold);padding:.5rem .65rem;background:var(--surface2);margin:.6rem 0 .8rem}
.grange-advice.win{border-color:var(--accent)}
.grange-table-head,.grange-slot{display:grid;grid-template-columns:minmax(115px,1.2fr) minmax(125px,1fr) minmax(105px,.75fr) minmax(95px,.7fr) 34px;gap:.45rem;align-items:center}
.grange-table-head{padding:0 0 .3rem 30px;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.03em}
.grange-slots{display:flex;flex-direction:column;gap:.38rem}
.grange-slot{position:relative;padding:.42rem;border:1px solid var(--border);border-radius:8px;background:var(--surface2);padding-left:30px}
.grange-slot.filled{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.grange-slot-label{position:absolute;left:.45rem;color:var(--muted);font-size:.7rem}
.grange-slot input{border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);padding:.38rem .45rem;font-size:.8rem;min-width:0;width:100%}
.grange-price{display:flex;align-items:center;gap:.25rem;min-width:0;color:var(--muted);font-size:.76rem}
.grange-item-points{text-align:center;color:var(--gold)}
@media(max-width:760px){
  .event-pill span{display:none}
  .event-pill{font-size:1rem;padding:.35rem .5rem}
  .event-hero{align-items:flex-start}
  .event-hero-icon{font-size:2.2rem}
  .grange-breakdown{grid-template-columns:repeat(2,1fr)}
  .grange-table-head{display:none}
  .grange-slot{grid-template-columns:1fr 1fr;padding-left:30px}
  .grange-item-points{position:absolute;right:.5rem;top:.5rem;background:var(--surface);border-radius:999px;padding:.15rem .4rem}
}