/* ═══════════════════════════════════════════════════════════════════════════
   GOKURAKUGAI 極楽街 — CORE DESIGN SYSTEM  (assets/css/gkg-core.css)
   "Third Avenue after dark": a night-time Chinatown street drawn as a manga page.
   Lantern red · black ink · ivory paper · brass-knot gold. Screentone, torn tape,
   key-fret frames, auspicious-cloud brocade, hard offset "print" shadows.

   Loaded by EVERY page, before the page's own stylesheet.
   Dark = "Night Street" (default).  Light = "Manga Page" (data-theme="light" on <html>).
   Legacy variable names (--accent, --surface, --text-dim …) are kept as aliases so
   older inline styles and JS-built markup keep working.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* type */
  --f-display:'Anton','Dela Gothic One','Zen Kaku Gothic New',Impact,'Arial Narrow Bold',sans-serif;
  --f-jp:'Dela Gothic One','Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --f-brush:'Ma Shan Zheng','Dela Gothic One',cursive;
  --f-body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-label:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* brand palette (theme independent) */
  --red:#D4222C;--red-hot:#F0392F;--red-deep:#7E0F18;--red-dark:#4A0A10;
  --ember:#FF8A2B;--gold:#E2B24A;--gold-l:#F3CD72;--gold-d:#A87A1E;
  --olive:#7A8160;--lav:#A99BFF;--ice:#8FD0EE;--paper:#F1E8D8;--paper-2:#E6D9C0;--ink:#14100F;--ink-0:#070506;
  --ok:#57F287;--warn:#FEE75C;--bad:#ED4245;--blurple:#5865F2;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);--ease-snap:cubic-bezier(.3,1.4,.5,1);
  /* geometry */
  --maxw:1240px;--gutter:clamp(1rem,3vw,2rem);--nav-h:56px;
  /* torn paper edges (clip-path values) */
  --torn-a:polygon(0.0% 1.7%, 2.94% 3.8%, 5.88% 2.6%, 8.82% 4.2%, 11.76% 4.4%, 14.71% 0.5%, 17.65% 0.1%, 20.59% 5.9%, 23.53% 1.8%, 26.47% 1.6%, 29.41% 7.0%, 32.35% 3.3%, 35.29% 5.9%, 38.24% 3.3%, 41.18% 4.5%, 44.12% 1.1%, 47.06% 4.4%, 50.0% 6.1%, 52.94% 3.7%, 55.88% 5.2%, 58.82% 4.7%, 61.76% 0.4%, 64.71% 5.3%, 67.65% 4.1%, 70.59% 2.1%, 73.53% 0.2%, 76.47% 6.1%, 79.41% 3.3%, 82.35% 5.0%, 85.29% 6.2%, 88.24% 5.0%, 91.18% 6.4%, 94.12% 2.8%, 97.06% 5.6%, 100.0% 3.1%, 100.0% 93.5%, 97.06% 93.8%, 94.12% 99.3%, 91.18% 99.0%, 88.24% 98.5%, 85.29% 93.2%, 82.35% 96.9%, 79.41% 95.6%, 76.47% 97.9%, 73.53% 96.4%, 70.59% 97.3%, 67.65% 97.5%, 64.71% 95.9%, 61.76% 95.9%, 58.82% 93.7%, 55.88% 95.2%, 52.94% 93.5%, 50.0% 94.0%, 47.06% 93.1%, 44.12% 95.3%, 41.18% 98.9%, 38.24% 94.0%, 35.29% 93.2%, 32.35% 93.7%, 29.41% 96.0%, 26.47% 95.0%, 23.53% 98.5%, 20.59% 94.2%, 17.65% 96.0%, 14.71% 98.0%, 11.76% 99.6%, 8.82% 94.0%, 5.88% 93.1%, 2.94% 99.4%, 0.0% 94.4%); --torn-b:polygon(0.0% 4.1%, 2.94% 5.0%, 5.88% 8.3%, 8.82% 4.2%, 11.76% 4.6%, 14.71% 5.3%, 17.65% 1.7%, 20.59% 4.6%, 23.53% 5.7%, 26.47% 7.1%, 29.41% 0.8%, 32.35% 2.7%, 35.29% 0.8%, 38.24% 7.3%, 41.18% 6.2%, 44.12% 0.4%, 47.06% 8.8%, 50.0% 8.7%, 52.94% 5.9%, 55.88% 5.5%, 58.82% 1.4%, 61.76% 0.1%, 64.71% 4.8%, 67.65% 0.5%, 70.59% 1.7%, 73.53% 2.2%, 76.47% 0.3%, 79.41% 4.2%, 82.35% 4.0%, 85.29% 7.6%, 88.24% 4.7%, 91.18% 5.8%, 94.12% 4.5%, 97.06% 6.0%, 100.0% 4.1%, 100.0% 98.6%, 97.06% 95.0%, 94.12% 95.0%, 91.18% 95.8%, 88.24% 96.5%, 85.29% 98.4%, 82.35% 98.9%, 79.41% 98.6%, 76.47% 99.6%, 73.53% 96.2%, 70.59% 98.0%, 67.65% 95.8%, 64.71% 98.1%, 61.76% 95.2%, 58.82% 95.8%, 55.88% 100.0%, 52.94% 99.0%, 50.0% 95.4%, 47.06% 97.7%, 44.12% 95.1%, 41.18% 98.0%, 38.24% 99.6%, 35.29% 96.9%, 32.35% 96.1%, 29.41% 98.7%, 26.47% 99.6%, 23.53% 98.3%, 20.59% 95.2%, 17.65% 96.2%, 14.71% 99.4%, 11.76% 98.8%, 8.82% 99.5%, 5.88% 99.7%, 2.94% 96.0%, 0.0% 99.1%); --torn-c:polygon(0.0% 2.7%, 4.55% 1.7%, 9.09% 4.2%, 13.64% 1.4%, 18.18% 2.6%, 22.73% 1.7%, 27.27% 2.1%, 31.82% 4.9%, 36.36% 0.5%, 40.91% 2.2%, 45.45% 1.1%, 50.0% 1.7%, 54.55% 5.0%, 59.09% 1.6%, 63.64% 3.0%, 68.18% 2.1%, 72.73% 3.7%, 77.27% 2.2%, 81.82% 0.9%, 86.36% 2.2%, 90.91% 2.0%, 95.45% 4.0%, 100.0% 2.8%, 100.0% 98.2%, 95.45% 93.9%, 90.91% 97.3%, 86.36% 95.4%, 81.82% 98.0%, 77.27% 96.3%, 72.73% 92.9%, 68.18% 95.4%, 63.64% 93.2%, 59.09% 93.2%, 54.55% 94.7%, 50.0% 94.2%, 45.45% 96.4%, 40.91% 94.4%, 36.36% 93.0%, 31.82% 99.1%, 27.27% 91.6%, 22.73% 96.7%, 18.18% 98.7%, 13.64% 98.6%, 9.09% 96.9%, 4.55% 99.4%, 0.0% 96.4%);
  /* decorative graphics */
  --g-cloud:url("/assets/ui/cloud.svg");
  --g-knot:url("/assets/ui/knot-gold.svg");
  --g-frame:url("/assets/ui/frame-gold.svg");
}
/* dark = Night Street (default) */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C0A0B;--bg2:#120E10;--surface:#171214;--surface2:#1F181B;--surface3:#2A2024;
  --text:#F3E9D9;--text-dim:#CDBFAA;--text-muted:#9A8B79;
  --accent:#FF5A4D;--accent2:#FFA24A;--accent-fill:#D4222C;--on-accent:#FFF6EA;
  --line:rgba(243,233,217,.16);--line-strong:rgba(243,233,217,.55);
  --hard:#8E1119;--hard-2:rgba(226,178,74,.9);
  --tone:rgba(255,255,255,.55);
  --nav-bg:rgba(12,10,11,.94);--card-bg:rgba(23,18,20,.94);
  --in-bg:#100C0D;--in-border:rgba(243,233,217,.3);--tag-bg:rgba(212,34,44,.14);
  --modal-bg:rgba(7,5,6,.82);
  --glow:0 0 26px rgba(255,90,60,.30);--glow2:0 0 44px rgba(255,90,60,.20);
  --cloud-c:#D4222C;--cloud-o:.075;
  --header-bg:url('/assets/images/header-bg-dark.jpg');
  --frame:url("/assets/ui/frame-gold.svg");--knot:url("/assets/ui/knot-gold.svg");
  --paper-ink:#14100F;--paper-tape:#F1E8D8;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#F2EADB;--bg2:#EADFCB;--surface:#FBF6EC;--surface2:#F4EBDA;--surface3:#E8DBC2;
  --text:#16100F;--text-dim:#43342F;--text-muted:#6D5C52;
  --accent:#B3141F;--accent2:#D4222C;--accent-fill:#C21D27;--on-accent:#FFF6EA;
  --line:rgba(22,16,15,.22);--line-strong:#16100F;
  --hard:#16100F;--hard-2:#16100F;
  --tone:rgba(22,16,15,.8);
  --nav-bg:rgba(242,234,219,.95);--card-bg:rgba(251,246,236,.96);
  --in-bg:#FFFBF2;--in-border:rgba(22,16,15,.4);--tag-bg:rgba(179,20,31,.09);
  --modal-bg:rgba(22,16,15,.7);
  --glow:0 0 0 transparent;--glow2:0 0 0 transparent;
  --cloud-c:#B3141F;--cloud-o:.085;
  --header-bg:url('/assets/images/header-bg-light.jpg');
  --frame:url("/assets/ui/frame-ink.svg");--knot:url("/assets/ui/knot-ink.svg");
  --paper-ink:#14100F;--paper-tape:#14100F;
}
/* legacy aliases — older markup/inline styles still reference these */
:root,[data-theme="dark"],[data-theme="light"]{
  --text-d:var(--text-dim);--text-m:var(--text-muted);
  --hr:var(--line);--border:var(--line);--bh:var(--line-strong);
  --crimson:var(--red-deep);--crimson-deep:var(--red-dark);--crimson-bright:var(--red-hot);
  --gold-light:var(--gold-l);--topbar-bg:var(--nav-bg);--toggle-bg:var(--tag-bg);--toggle-hov:var(--line);
  --surface-2:var(--surface2);--disc:var(--accent);--border-img:none;
}
[data-theme="light"]{--gold:#9A6B12;--gold-l:#B5811F;--gold-d:#7A5410;}

/* ── 2 · BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--red) var(--bg2);background:var(--bg)}
body{
  font-family:var(--f-body);font-size:1rem;line-height:1.7;color:var(--text);background:var(--bg);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1100px 460px at 50% -140px,rgba(212,34,44,.26),transparent 72%);
  background-repeat:no-repeat;transition:background-color .35s,color .35s;
}
[data-theme="light"] body{background-image:radial-gradient(1000px 420px at 50% -160px,rgba(212,34,44,.13),transparent 72%)}
/* fixed brocade of auspicious clouds, tinted by theme */
html::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--cloud-c);opacity:var(--cloud-o);
  -webkit-mask:var(--g-cloud) 0 0/150px 95px repeat;mask:var(--g-cloud) 0 0/150px 95px repeat}
/* screentone grain drifting in from the page edges */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle,var(--tone) 0 .9px,transparent 1.3px) 0 0/6px 6px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,transparent 52%,#000 130%);mask-image:radial-gradient(ellipse at 50% 40%,transparent 52%,#000 130%)}
[data-theme="light"] body::after{opacity:.16}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--red);border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--red-hot)}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
img{height:auto}
p{line-height:1.8}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── 3 · TYPE HELPERS ───────────────────────────────────────────────────── */
.gk-display{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.98}
.gk-label{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem}
.gk-jp{font-family:var(--f-jp)}
.gk-vert{writing-mode:vertical-rl;text-orientation:upright}
.gk-print{text-shadow:3px 3px 0 var(--hard)}            /* mis-registered print shadow */

/* ── 4 · SIGNATURE ELEMENTS ─────────────────────────────────────────────── */
/* red square kanji stamp — echoes the 極 楽 街 title blocks */
.gk-stamp{display:inline-grid;place-items:center;width:1.9em;height:1.9em;background:var(--red);color:#fff;font:400 1em/1 var(--f-jp);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--hard-2);flex-shrink:0}
.gk-stamps{display:inline-flex;gap:.32rem;font-size:1.05rem}
/* torn tape label */
.gk-tape{position:relative;display:inline-block;padding:.5em 1.2em .55em;background:var(--paper-tape);color:var(--paper-ink);
  font:400 1rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.05em;clip-path:var(--torn-a);transform:rotate(-1.4deg)}
.gk-tape.red{background:var(--red);color:#fff}
/* knot divider */
.gk-divider{display:flex;align-items:center;gap:1rem;margin:2.2rem 0;color:var(--line-strong)}
.gk-divider::before,.gk-divider::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,currentColor 20%,currentColor 80%,transparent);opacity:.55}
.gk-divider i{display:block;width:72px;height:28px;background:var(--knot) center/contain no-repeat;flex-shrink:0}
/* key-fret frame (border-image, 9-slice) */
.gk-frame{border:24px solid transparent;border-image:var(--frame) 24/24px stretch;padding:0}
/* manga caption box */
.gk-caption{background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:.9rem 1rem;box-shadow:4px 4px 0 var(--hard)}
/* panel with hard offset shadow */
.gk-panel{position:relative;background:var(--card-bg);border:2px solid var(--line-strong);box-shadow:6px 6px 0 var(--hard)}
/* screentone corner shading */
.gk-tone{position:relative;isolation:isolate}
.gk-tone::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background:radial-gradient(circle,var(--tone) 0 1.15px,transparent 1.6px) 0 0/7px 7px;
  -webkit-mask-image:linear-gradient(155deg,transparent 40%,#000);mask-image:linear-gradient(155deg,transparent 40%,#000)}
/* radial speed lines */
.gk-speed{position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%,#fff 0 .55deg,transparent .55deg 3.1deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 24%,#000 72%);mask-image:radial-gradient(circle at 50% 50%,transparent 24%,#000 72%)}
/* lantern swing */
.gk-lantern{display:inline-block;width:28px;aspect-ratio:44/76;background:url("/assets/ui/lantern.svg") center/contain no-repeat;transform-origin:50% 0;animation:gk-swing 4.6s ease-in-out infinite}
@keyframes gk-swing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
/* loading spinner (lantern) and ring */
.gk-spinner{display:inline-block;width:34px;height:60px;background:url("/assets/ui/lantern.svg") center/contain no-repeat;transform-origin:50% 0;animation:gk-swing 1.4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,120,50,.55))}
.gk-ring{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:gk-spin .8s linear infinite}
@keyframes gk-spin{to{transform:rotate(360deg)}}
/* scroll-driven entrance (progressive enhancement; no JS) */
@keyframes gk-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.gk-rise{animation:gk-rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}

/* ── 5 · BUTTONS ───────────────────────────────────────────────────────── */
.btn,.gk-btn{
  --b-bg:transparent;--b-fg:var(--text);--b-bd:var(--line-strong);--b-sh:var(--hard);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.45rem;font:700 .86rem/1 var(--f-label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--b-fg);background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:color .15s,transform .12s var(--ease)}
.btn::before,.gk-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--b-bg);border:2px solid var(--b-bd);
  transform:skewX(-9deg);box-shadow:4px 4px 0 var(--b-sh);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .15s}
.btn:hover::before,.gk-btn:hover::before{transform:skewX(-9deg) translate(-2px,-2px);box-shadow:6px 6px 0 var(--b-sh)}
.btn:active::before,.gk-btn:active::before{transform:skewX(-9deg) translate(3px,3px);box-shadow:1px 1px 0 var(--b-sh)}
.btn:hover,.gk-btn:hover{--b-bg:var(--text);--b-fg:var(--bg)}
.btn-p,.gk-btn.primary{--b-bg:var(--accent-fill);--b-fg:var(--on-accent);--b-bd:var(--ink-0);--b-sh:var(--gold)}
[data-theme="light"] .btn-p,[data-theme="light"] .gk-btn.primary{--b-sh:var(--ink)}
.btn-p:hover,.gk-btn.primary:hover{--b-bg:var(--red-hot);--b-fg:#fff}
.btn-dc,.gk-btn.discord{--b-bg:var(--blurple);--b-fg:#fff;--b-bd:var(--ink-0);--b-sh:var(--hard)}
.btn-dc:hover,.gk-btn.discord:hover{--b-bg:#6F7BFF;--b-fg:#fff}
.btn-sm{padding:.55rem 1rem;font-size:.74rem}
.btn[disabled],.btn.disabled,.gk-btn[disabled]{opacity:.45;pointer-events:none}
.btn svg,.gk-btn svg{flex-shrink:0}

/* ── 6 · FORMS (generic recipe) ─────────────────────────────────────────── */
.gk-field label,.gk-label-tape{display:inline-block;font:700 .74rem/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.gk-input,.gk-field input,.gk-field select,.gk-field textarea{
  width:100%;background:var(--in-bg);color:var(--text);border:2px solid var(--in-border);border-radius:0;
  font:400 1rem/1.5 var(--f-body);padding:.75rem 1rem;transition:border-color .15s,box-shadow .15s}
.gk-input:focus,.gk-field input:focus,.gk-field select:focus,.gk-field textarea:focus{outline:none;border-color:var(--red);box-shadow:4px 4px 0 var(--hard)}
::placeholder{color:var(--text-muted);opacity:.85}

/* ── 7 · UTILITY ────────────────────────────────────────────────────────── */
.gk-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.gk-hide{display:none!important}
@media print{html::before,body::after{display:none!important}}