/* ── GARY.EXE — Shared JRPG Styles ────────────────────── */

/* ── DESIGN TOKENS ── */
:root {
  --ink:          #161412;
  --ink-soft:     #2A2520;
  --paper:        #F7F4EE;
  --warm:         #ECE6DA;
  --espresso:     #1E140C;
  --espresso-2:   #2A1D11;
  --clay:         #C17D4A;
  --clay-deep:    #9A5A2C;
  --clay-deeper:  #7E4720;
  --clay-soft:    #E8B98A;
  --clay-tint:    rgba(193,125,74,0.10);
  --clay-dim2:    rgba(193,125,74,0.20);
  --clay-text:    var(--clay-deep);
  --clay-lt:      var(--clay-soft);
  --clay-dim:     var(--clay-tint);
  --court:        #2F5A40;
  --court-soft:   #6FA487;
  --court-tint:   rgba(47,90,64,0.08);
  --court-lt:     var(--court-tint);
  --slate:        #8A8880;
  --rule-c:       rgba(22,20,18,0.10);
  --rule:         1px solid var(--rule-c);
  --font-display: 'Fraunces','Playfair Display',Georgia,serif;
  --font-body:    'Inter',-apple-system,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono','Fira Code',monospace;
  --font-pixel:   'Press Start 2P',monospace;
  --radius-sm:    4px;
  --radius:       8px;
  --maxw:         1040px;
  --focus-ring:   0 0 0 2px var(--paper), 0 0 0 4px var(--clay-deep);
  --ease-out:     cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:  cubic-bezier(0.77,0,0.175,1);
  --bg:           var(--paper);
  --bg2:          var(--warm);
  --bg3:          #FDFBF8;
  --text:         var(--ink);
  --text-2:       #4A453E;
  --text-muted:   #4A453E;
  --text-3:       #6B645B;
  --text-faint:   #6B645B;
  --text-4:       #8A8278;
  --text-on-dark:   #F7F4EE;
  --text-on-dark-2: rgba(247,244,238,0.74);
  --text-on-dark-3: rgba(247,244,238,0.55);
  --text-on-dark-4: rgba(247,244,238,0.35);
  --border:       rgba(22,20,18,0.10);
  --border-strong:rgba(22,20,18,0.18);
  --nav-bg:       rgba(247,244,238,0.96);
  --card-bg:      #FDFBF8;
  --hero-bg:      var(--espresso);
  --hero-text:    var(--paper);
  --tag-bg:       var(--clay-tint);
  --tag-text:     #7A3D10;
}

[data-theme="dark"] {
  --bg:           #1A1210;
  --bg2:          #221710;
  --bg3:          #2C1E14;
  --text:         #F0EBE3;
  --text-2:       #C8B49A;
  --text-muted:   #C8B49A;
  --text-3:       #9A8878;
  --text-faint:   #9A8878;
  --text-4:       #6B6055;
  --border:       rgba(193,125,74,0.12);
  --border-strong:rgba(193,125,74,0.22);
  --nav-bg:       rgba(26,18,16,0.96);
  --card-bg:      #2C1E14;
  --hero-bg:      #0E0A08;
  --hero-text:    var(--paper);
  --tag-bg:       rgba(193,125,74,0.15);
  --tag-text:     #F0C88A;
  --rule-c:       rgba(193,125,74,0.12);
  --rule:         1px solid var(--rule-c);
  --slate:        #9A9088;
  --warm:         #2C1E14;
  --ink:          #F0EBE3;
  --clay-deep:    #C17D4A;
  --clay-text:    #C17D4A;
}

/* ── RESET + BASE ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:300;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── IRIS CANVAS (WebGL theme transition) ── */
#iris-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;}
body.iris-active{background:transparent!important;}
/* Keep page content above the iris canvas (z-index:0) so panels float during the transition */
#main-content{position:relative;z-index:1;}

/* ── PAGE CURTAIN (navigation transition) ── */
#page-curtain{
  position:fixed;inset:0;background:#000;z-index:9999;pointer-events:none;
  animation:curtainEnter 300ms ease forwards;
}
@keyframes curtainEnter{from{opacity:1}to{opacity:0}}
#page-curtain.exiting{
  animation:curtainExit 220ms ease forwards;
  pointer-events:all;
}
@keyframes curtainExit{from{opacity:0}to{opacity:1}}

/* ── SCANLINES ── */
.scanlines{
  position:fixed;inset:0;
  background:repeating-linear-gradient(to bottom,transparent,transparent 3px,rgba(0,0,0,0.05) 3px,rgba(0,0,0,0.05) 4px);
  pointer-events:none;z-index:2;
}

/* ── HUD BAR ── */
.hud-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(20,12,6,0.97);
  border-bottom:2px solid var(--clay);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:52px;
}
.hud-logo{
  font-family:var(--font-pixel);font-size:0.8rem;
  color:var(--clay);letter-spacing:0.05em;
  text-decoration:none;
  text-shadow:1px 1px 0 rgba(122,71,32,0.6);
}
@keyframes hudGlitch{
  0%  {clip-path:inset(0 0 0 0);transform:none;}
  20% {clip-path:inset(18% 0 62% 0);transform:translateX(3px);}
  40% {clip-path:inset(54% 0 22% 0);transform:translateX(-2px);}
  60% {clip-path:inset(28% 0 44% 0);transform:translateX(1px);}
  80% {clip-path:inset(0 0 0 0);transform:translateX(-1px);}
  100%{clip-path:inset(0 0 0 0);transform:none;}
}
@media(prefers-reduced-motion:no-preference){
  .hud-logo:hover{animation:hudGlitch 180ms ease-out;}
}
.hud-right{display:flex;align-items:center;gap:1rem;}
.hud-ver{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.15em;color:rgba(247,244,238,0.38);}
.hud-back{
  font-family:var(--font-pixel);font-size:0.55rem;color:var(--clay);
  text-decoration:none;letter-spacing:0.06em;
  padding:0.3rem 0.6rem;border:1.5px solid var(--clay);
  min-height:44px;display:inline-flex;align-items:center;
  transition:background 0.15s,color 0.15s;cursor:pointer;background:none;
}
.hud-back:hover,.hud-back:focus-visible{background:var(--clay);color:var(--espresso);outline:none;}
.hud-back:active{transform:scale(0.92);}
.hud-page-name{
  font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(247,244,238,0.5);
}

/* ── THEME TOGGLE ── */
.theme-toggle{
  width:48px;height:24px;border-radius:100px;
  border:1.5px solid rgba(193,125,74,0.5);
  background:rgba(193,125,74,0.10);
  cursor:pointer;position:relative;
  display:flex;align-items:center;padding:0 4px;justify-content:space-between;
}
/* expand tap area to 44px without visual change */
.theme-toggle::before{content:'';position:absolute;inset:-10px;}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.theme-toggle .t-icon{width:12px;height:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.3s;position:relative;z-index:1;pointer-events:none;}
.theme-toggle .t-icon svg{width:9px;height:9px;display:block}
.theme-toggle .t-sun{opacity:1}
.theme-toggle .t-moon{opacity:0.55}
[data-theme="dark"] .theme-toggle .t-sun{opacity:0.55}
[data-theme="dark"] .theme-toggle .t-moon{opacity:1}
.theme-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--clay);transition:transform 0.3s ease;z-index:0;}
[data-theme="dark"] .theme-toggle::after{transform:translateX(24px)}

/* ── PIXEL BOX (shared card chrome) ── */
.pixel-box{
  border:2px solid var(--clay);
  background:var(--espresso);
  box-shadow:3px 3px 0 rgba(193,125,74,0.20);
}

/* ── SITE FOOTER ── */
.site-footer{
  text-align:center;font-family:var(--font-mono);font-size:0.62rem;
  letter-spacing:0.2em;color:var(--text-3);
  line-height:2.1;
  padding:1.5rem 2rem;border-top:1px solid rgba(193,125,74,0.1);
  position:relative;z-index:1;
  background:var(--bg);
}
.site-footer em{color:var(--clay);font-style:normal;}
.site-footer .footer-nav{
  display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;
  flex-wrap:wrap;vertical-align:middle;
}
.site-footer a{
  min-height:24px;display:inline-flex;align-items:center;
  padding:0.1rem 0.28rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.22em;
}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--clay);}

/* Analytics consent */
.consent-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:10000;
  max-width:720px;margin:0 auto;padding:1rem;
  background:rgba(30,20,12,0.98);color:var(--paper);
  border:2px solid var(--clay);box-shadow:4px 4px 0 rgba(0,0,0,0.28);
  display:none;gap:1rem;align-items:center;justify-content:space-between;
}
.consent-banner.visible{display:flex;}
.consent-copy{font-size:0.82rem;line-height:1.55;color:rgba(247,244,238,0.78);max-width:44rem;}
.consent-copy strong{
  display:block;margin-bottom:0.2rem;
  font-family:var(--font-pixel);font-size:0.48rem;letter-spacing:0.1em;color:var(--clay-soft);
}
.consent-actions{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;}
.consent-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.25rem;border:1.5px solid var(--clay);padding:0.5rem 0.72rem;
  background:transparent;color:var(--clay-soft);cursor:pointer;
  font-family:var(--font-pixel);font-size:0.42rem;letter-spacing:0.08em;
  text-decoration:none;box-sizing:border-box;
}
.consent-btn.primary{background:var(--clay);color:var(--espresso);}
.consent-btn:hover,.consent-btn:focus-visible{background:var(--clay-soft);color:var(--espresso);outline:none;}

/* Privacy page */
.privacy-page .page-content{max-width:880px;}
.privacy-panel{
  border:2px solid var(--clay);background:var(--card-bg);color:var(--text);
  box-shadow:4px 4px 0 rgba(193,125,74,0.14);padding:clamp(1.25rem,4vw,2.5rem);
}
[data-theme="dark"] .privacy-panel{background:rgba(22,14,8,0.95);}
.privacy-panel h2{
  font-family:var(--font-display);font-size:1.35rem;font-weight:400;
  color:var(--text);line-height:1.25;margin:2rem 0 0.65rem;
}
.privacy-panel h2:first-child{margin-top:0;}
.privacy-panel p,.privacy-panel li{font-size:0.92rem;line-height:1.75;color:var(--text-2);}
.privacy-panel ul{padding-left:1.2rem;margin:0.45rem 0 0;}
.privacy-panel a{
  min-height:24px;display:inline-flex;align-items:center;
  text-decoration:underline;text-underline-offset:0.22em;color:var(--clay-deep);
}
.privacy-note{
  margin:0 0 1.4rem;padding:0.9rem 1rem;border:1px solid rgba(193,125,74,0.28);
  background:var(--tag-bg);font-family:var(--font-mono);font-size:0.76rem;color:var(--text-2);
}
.form-privacy-note{
  font-family:var(--font-mono);font-size:0.66rem;line-height:1.55;
  color:var(--clay-deeper);margin-top:-0.2rem;
}
.form-privacy-note a{
  min-height:24px;display:inline-flex;align-items:center;
  text-decoration:underline;text-underline-offset:0.18em;color:var(--clay-deeper);
}

/* ── PAGE HERO (inner pages) ── */
.page-hero{padding:7rem 2rem 2rem;max-width:var(--maxw);margin:0 auto;}
.page-hero-title{display:flex;align-items:center;gap:0.65rem;margin-bottom:0.5rem;}
.page-hero-title .page-game-title{margin-bottom:0;}
.page-title-icon{display:flex;align-items:center;flex-shrink:0;}
.page-title-icon svg{image-rendering:pixelated;}
.page-game-title{
  font-family:var(--font-pixel);font-size:clamp(1rem,2.8vw,1.6rem);
  color:var(--clay);letter-spacing:0.05em;
  text-shadow:2px 2px 0 rgba(122,71,32,0.5);margin-bottom:0.5rem;
}
.page-real-title{
  font-family:var(--font-display);font-size:0.9rem;font-style:italic;
  color:var(--text-3);letter-spacing:0.1em;
}
.page-content{max-width:var(--maxw);margin:0 auto;padding:0.5rem 2rem 5rem;}

/* ── INNER PAGE SECTION CHROME ── */
.sec-tag-rpg{
  font-family:var(--font-pixel);font-size:0.5rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--clay);margin-bottom:0.85rem;
  display:flex;align-items:center;gap:0.6rem;
}
.sec-tag-rpg::before{content:'▶';font-size:0.45rem;opacity:0.7;}
h2.sec-title-rpg{
  font-family:var(--font-display);font-weight:400;font-size:1.8rem;
  line-height:1.2;margin-bottom:0.85rem;letter-spacing:0.01em;
  color:var(--text);
}
.sec-body-rpg{font-size:0.88rem;color:var(--text-2);max-width:640px;line-height:1.85;margin-bottom:2.5rem;}

/* ── TAGS ── */
.tag{display:inline-block;background:var(--tag-bg);color:var(--tag-text);font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;font-weight:400;padding:0.2rem 0.65rem;border-radius:100px;margin:0.2rem 0.15rem 0 0;transition:background 0.15s,transform 0.15s;}
.tag:hover{background:rgba(193,125,74,0.18);transform:scale(1.04);cursor:default;}
.tag-court{background:rgba(47,90,64,0.12);color:var(--court-soft);}
.tag-court:hover{background:rgba(47,90,64,0.22);}

/* ── SCROLL REVEALS ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 550ms var(--ease-out),transform 550ms var(--ease-out)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:60ms}
.reveal-d2{transition-delay:120ms}
.reveal-d3{transition-delay:180ms}
.reveal-d4{transition-delay:240ms}

/* ── SKIP LINK ── */
.skip-link{position:absolute;left:-9999px;top:1rem;background:var(--clay);color:var(--espresso);padding:.5rem 1rem;font-size:14px;font-weight:500;z-index:999}
.skip-link:focus{left:1rem}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .reveal{opacity:1;transform:none}
  #page-curtain{animation:none;opacity:0;}
}
html.gl-rm *,html.gl-rm *::before,html.gl-rm *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
html.gl-rm .reveal{opacity:1;transform:none}
html.gl-rm #page-curtain{animation:none;opacity:0;}

/* ── RESPONSIVE ── */
@media(max-width:760px){
  .hud-bar{padding:0 1rem;}
  .hud-logo{font-size:0.62rem;}
  .page-hero{padding:5.5rem 1.5rem 1.5rem;}
  .page-content{padding:0.5rem 1.5rem 4rem;}
  .consent-banner{align-items:flex-start;flex-direction:column;}
  .consent-actions{width:100%;justify-content:flex-start;}
  .consent-btn{flex:1;min-width:7.5rem;}
}