/* Notebook concept for quiz-local.html / privacy-local.html. Pages keep their own inline CSS; this only swaps the palette and adds the notebook touches. Local only. */
html[data-theme="dark"]{color-scheme:dark;--paper:#0f1416;--ink:#f1f0e9;--muted:#b6c1c2;--line:#3c4b50;--accent:#e6b681;--white:#151b1d;--ok:#7fc49a;--bad:#f08a7c;--easy:#7fc49a;--normal:#e6b681;--hard:#f08a7c;--hardcore:#c2185b;--marathon:#5aa9e6;--lyrics:#c792ea}
html[data-theme="light"]{color-scheme:light;--paper:#f3f0e7;--ink:#17262b;--muted:#5e7175;--line:#c9d2cf;--accent:#a96132;--white:#faf9f3;--ok:#28734a;--bad:#ad3e38;--easy:#28734a;--normal:#985128;--hard:#ad3e38;--hardcore:#9c1048;--marathon:#1f6aa5;--lyrics:#7b3fa0}

body.local-page{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
html[data-theme="dark"] body.local-page{--grid:#b9d1d10a}
html[data-theme="light"] body.local-page{--grid:#95a9ad14}

/* header: logo + theme toggle */
.local-page header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px)}
.local-page .brand-logo{display:block;width:44px;height:34px;object-fit:contain;padding-right:14px;border-right:1px solid var(--line);filter:brightness(0) invert(1);opacity:.92}
html[data-theme="light"] .local-page .brand-logo{filter:none}
.local-page .local-nav{display:flex;align-items:center;gap:12px;font-size:12px}
.local-page .theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:2px;background:var(--white);font:12px ui-monospace,Consolas,monospace}
.local-page .theme-toggle:hover{border-color:var(--accent)}
@media(max-width:560px){.local-page .theme-label{display:none}}

/* notebook shapes: square corners and hard offset shadows on panels/buttons (avatars stay round) */
.local-page :is(button,input,select,textarea,.level,.board,.account,.avatar-picker,.result,.question,.panel,table,.card,section.note,.note):not(.avatar-btn):not(.avatar-picker button){border-radius:3px}
.local-page .level,.local-page .board,.local-page .account{background:var(--white);border:1px solid var(--line);box-shadow:5px 6px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.local-page .primary{border-radius:3px;box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 18%,transparent);letter-spacing:.06em}
html[data-theme="light"] .local-page .primary{color:#fff9f2}
.local-page h1{letter-spacing:.01em}

/* leaderboard podium colours readable on paper */
html[data-theme="light"] .local-page :is(.lb3-list,.board-list) li:nth-child(1):not(.empty){--medal:#9a6a00;--halo:#e3b23c}
html[data-theme="light"] .local-page :is(.lb3-list,.board-list) li:nth-child(2):not(.empty){--medal:#5d6b73;--halo:#aebcc5}
html[data-theme="light"] .local-page :is(.lb3-list,.board-list) li:nth-child(3):not(.empty){--medal:#9a4f22;--halo:#e09a68}
html[data-theme="light"] .local-page :is(.lb3-list,.board-list) li:nth-child(-n+3):not(.empty) b{text-shadow:0 0 .5px var(--medal),0 1px 6px color-mix(in srgb,var(--halo) 35%,transparent);animation:none}
html[data-theme="light"] .local-page :is(.lb3-list,.board-list) li:nth-child(-n+3):not(.empty)::before{text-shadow:none}
html[data-theme="light"] .local-page .lb3-list li img{background:#e3e8e6}
html[data-theme="light"] .local-page .lb3-col.lv-easy{--lv:#28734a}
html[data-theme="light"] .local-page .lb3-col.lv-normal{--lv:#985128}
html[data-theme="light"] .local-page .lb3-col.lv-hard{--lv:#ad3e38}

/* Yorushika Thai Fans credit box (same look as the home page notes) */
.local-page .thaifans-credit{margin:22px 0 4px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--white);font-size:13px;color:var(--muted);box-shadow:5px 6px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.local-page .thaifans-credit p{margin:0 0 6px}.local-page .thaifans-credit p:last-child{margin:0}
.local-page .thaifans-credit b{color:var(--ink);font-size:12px;letter-spacing:.04em}
.local-page .thaifans-credit a{color:var(--accent)}
.local-page .thaifans-team{margin:12px 0 14px}
.local-page .thaifans-team>span{display:block;margin-bottom:8px;font:600 11px ui-monospace,Consolas,monospace;letter-spacing:.14em;color:var(--accent)}
.local-page .thaifans-team ul{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;list-style:none}
.local-page .thaifans-team li{padding:6px 16px 8px;border:1px solid var(--line);background:var(--paper);box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 22%,transparent);font:400 clamp(20px,2.4vw,28px)/1.2 'Sriracha','Segoe Print',cursive;color:var(--ink);transform:rotate(-1deg)}
.local-page .thaifans-team li:nth-child(even){transform:rotate(1deg)}
@font-face{font-family:'Sriracha';src:url('assets/fonts/Sriracha-Regular.ttf') format('truetype');font-display:swap}

/* New 余白 stamp mark in the header, light/dark files swap with the theme */
.local-page .brand-logo{width:auto;height:36px;filter:none;opacity:1}
.local-page .brand-logo-light{display:none}
html[data-theme="light"] .local-page .brand-logo-light{display:block}
html[data-theme="light"] .local-page .brand-logo-dark{display:none}

/* Quiz level cards: the chosen one is unmistakable (lifted, coloured outline + glow, tinted, "เลือกอยู่" tag); the rest step back */
.local-page .level{transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,border-color .18s ease;opacity:.62}
.local-page .level:hover,.local-page .level:focus-visible{opacity:.9}
.local-page .level[aria-pressed=true]{opacity:1;transform:translateY(-4px);border:2px solid var(--c);
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 20%,var(--white)),var(--white) 70%);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),6px 8px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.local-page .level[aria-pressed=true]::before{height:5px;opacity:1}
.local-page .level[aria-pressed=true]::after{content:'✓ เลือกอยู่';position:absolute;right:12px;bottom:12px;padding:2px 10px;border-radius:999px;background:var(--c);color:#111;font:700 12px/1.6 'Leelawadee UI',sans-serif}
@media(prefers-reduced-motion:reduce){.local-page .level,.local-page .level[aria-pressed=true]{transition:none;transform:none}}
.local-page .level-marathon[aria-pressed=true]::after{top:12px;bottom:auto}

/* NEW tag on the newest quiz modes (HARDCORE, MARATHON); delete the <i class="new"> markup when they stop being new */
.new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--c,var(--lv));color:#fff;font:800 10px/1.5 'Leelawadee UI',sans-serif;font-style:normal;letter-spacing:.08em;vertical-align:middle;animation:new-pulse 1.8s ease-in-out infinite}
@keyframes new-pulse{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.new{animation:none}}
/* quiz cards: NEW sits in the top-left corner (cards clip overflow), clear of the title and the "เลือกอยู่" tag */
.local-page .level .new{position:absolute;top:10px;left:14px;margin:0;padding:2px 9px;font-size:11px;box-shadow:0 2px 6px rgb(0 0 0/.35)}

/* match the home page (notebook.css): same dark backdrop, handwritten headings, solid mode colour bars */
html[data-theme="dark"] body.local-page{background-color:#0b0d0e;background-image:radial-gradient(circle at 65% -20%,#394247 0,transparent 43rem),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(115deg,#0a0c0d,#15191b 52%,#090b0c);background-size:auto,28px 28px,28px 28px,auto;background-attachment:fixed}
.local-page h1,.local-page .board h2{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-weight:500;transform:rotate(-1deg)}
.local-page .level::before{opacity:1}
html{font-variant-emoji:text}