:root{
  --bg:#F0E0D6; --paper:#FFFDF7; --ink:#222; --green:#789922;
  --scribble:"Patrick Hand",system-ui; --sans:"Inter",ui-sans-serif;
  --radius:14px; --shadow:0 2px 0 #0001,0 8px 24px #0002
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
.container{width:min(1200px,100%);margin:0 auto}
.scribble{font-family:var(--scribble)}
.banner-top-img{width:100%;max-width:100%;height:auto;display:block}
.site-header{position:sticky;top:0;z-index:30}
.topbar{background:var(--paper);border-bottom:4px solid var(--green);box-shadow:var(--shadow)}
.topbar-inner{width:min(1200px,92vw);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.6rem .4rem}
.brand{font-size:clamp(30px,5vw,46px);text-decoration:none;color:var(--ink)}
.top-links{display:grid;grid-auto-flow:column;gap:.7rem}
.nav-link{background:var(--bg);padding:1rem 1.2rem;border:3px solid var(--green);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:800;box-shadow:3px 3px 0 #0002;font-size:1.15rem}
.hero{background:var(--paper);border-bottom:4px solid var(--green)}
.hero-inner{display:grid;gap:2rem;grid-template-columns:1.1fr 1fr;align-items:center;width:min(1200px,92vw);margin:1.2rem auto}
.hero-gif{border:4px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;width:100%;height:auto;max-width:640px}
h1{font-size:clamp(36px,6.2vw,64px);margin:.2rem 0}
.tagline{opacity:.9;font-size:clamp(16px,2.4vw,22px);margin:.3rem 0 1.2rem}
.ca-box{margin:.6rem 0 1rem;padding:1rem;background:var(--bg);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow)}
.ca-row{display:flex;gap:.8rem;margin-top:.6rem;align-items:center}
.ca-input{flex:1;padding:1.1rem;border:2px dashed var(--green);background:#fff;border-radius:12px;font-size:1.1rem;user-select:all}
.btn{padding:1.05rem 1.25rem;border:3px solid var(--ink);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:800;display:inline-block;box-shadow:4px 4px 0 #000;background:#fff;font-size:1.12rem}
.btn.xl{padding:1.05rem 1.3rem;font-size:1.18rem}
.lore{padding:1.2rem 0 .8rem}
.lore .container>h2{font-size:clamp(30px,4.6vw,44px);margin:.2rem 0 .6rem}
.lore-card{margin:.8rem 0;border:5px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.kym-cta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.kym-text{margin:0}

.community{padding:.8rem 0 1.6rem;border-top:4px solid var(--green);background:var(--paper)}
.community .container>h2{font-size:clamp(30px,4.6vw,44px);margin:.2rem 0 .4rem}
.community-card{background:var(--bg);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);margin:.8rem 0}
.community-card-inner{padding:1rem}
.community-timeline{width:100%;max-width:100%}
.community-embed{width:100%;max-width:100%;overflow:hidden;border-radius:12px;}
.community-iframe{width:100%;height:560px;border:none;}
@media (max-width:820px){.community-iframe{height:480px;}}


.pfp{padding:.8rem 0 1.6rem;border-top:4px solid var(--green);background:var(--paper)}
.pfp .container>h2{font-size:clamp(30px,4.6vw,44px);margin:.2rem 0 .4rem}
.pfp-copy{margin:0 0 .8rem}
.pfp-container{width:min(1200px,92vw)}
.pfp-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:1.1rem;align-items:start}
.pfp-controls{background:var(--bg);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none}
.pfp-controls-inner{padding:1rem}
.traits-list{display:grid;gap:.9rem}
.trait{display:flex;gap:1rem;align-items:center}
.trait label{min-width:190px;font-size:1.12rem}
.trait select{flex:1;padding:1rem;border:2px solid var(--green);border-radius:12px;background:#fff;font-size:1.12rem}
.pfp-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1rem}
.pfp-tip{opacity:.85;font-size:1rem;margin:.6rem 0 0}
.pfp-preview{width:100%;overflow:visible}
.canvas-wrap{position:relative;width:100%;border:3px dashed var(--green);border-radius:12px;background:#fff}
#pfp-canvas{width:100%;height:auto;display:block;border:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#pfp-save-img,#pfp-save-overlay{position:absolute;inset:0;width:100%;height:auto;display:none;z-index:9;object-fit:contain;background:transparent}
html{scroll-behavior:smooth}
#token,#links,#lore-top,#pfp{scroll-margin-top:92px}
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:.4rem}
.site-footer .container{width:min(1000px,94vw)}

@media (max-width:820px){
  .topbar-inner{grid-template-columns:1fr}
  .top-links{grid-template-columns:repeat(2, minmax(0,1fr));grid-auto-flow:row}
  .nav-link{text-align:center;font-size:1.15rem;padding:1rem 1.2rem}
  .brand{font-size:44px}
  .hero-inner{grid-template-columns:1fr}
  .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfp-grid{grid-template-columns:1fr}
  .pfp-container{width:100%;padding:0 12px}
  .canvas-wrap{width:100%}
  #pfp-canvas,#pfp-save-img,#pfp-save-overlay{width:100%}
}


/* v16.4 mobile edge-to-edge fix & safe-area insets */
@media (max-width: 820px){
  .container{width:100%; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));}
  .pfp-container{width:100%; max-width:100%; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));}
  .pfp-grid{grid-template-columns:1fr; gap: 12px}
  .pfp-preview, .canvas-wrap{width:100%; max-width:100%; overflow:hidden}
  #pfp-canvas, #pfp-save-img, #pfp-save-overlay{display:block; width:100%; max-width:100%; height:auto}
  html, body{overflow-x:hidden}
}

/* +10px font size bump for buttons/links */
.btn{font-size: calc(1.12rem + 10px)}
.nav-link{font-size: calc(1.15rem + 10px)}


/* v17: edge-to-edge, safe-area aware stage (square), no horizontal bleed */
#stage, .stage{
  width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
#stage canvas, .stage canvas{
  width: 100%;
  height: 100%;
  display: block;
}
/* v17: overlay for iOS long-press save (no label text) */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay.hidden{ display:none; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }
/* v17: copy button no layout shift */
.copy-btn{ position:relative; min-width:110px; }
.copy-btn .copy-done{ display:none; }
.copy-btn.copied .copy-idle{ display:none; }
.copy-btn.copied .copy-done{ display:inline; }



/* v17.1: ensure stage is edge-to-edge and never cut off (safe-area aware) */
#stage, .stage{
  width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  max-width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
}
#stage canvas, .stage canvas{ width:100%; height:100%; display:block; }

/* v17.1: kill any legacy label or ::before content that prints "Save Image Overlay" */
#stage::before, .stage::before{ content: none !important; }
#saveImageOverlay, .save-image-overlay, .saveImageOverlay, .save-label{ display:none !important; }

/* v17.1: clean, textless overlay for iOS long-press */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay.hidden{ display:none; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }

/* v17.1: copy button stability (no width shift) */
.copy-btn{ position:relative; min-width:110px; }
.copy-btn .copy-done{ display:none; }
.copy-btn.copied .copy-idle{ display:none; }
.copy-btn.copied .copy-done{ display:inline; }



/* ===== v17.2: stage sizing - safe-area aware, no cut-off ===== */
#stage, .stage{
  width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  max-width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
  margin-inline: auto;
}
#stage canvas, .stage canvas{ width:100%; height:100%; display:block; }

/* Remove any legacy label/pseudo content that printed "Save Image Overlay" */
#stage::before, .stage::before{ content: none !important; }
#saveImageOverlay, .save-image-overlay, .saveImageOverlay, .save-label{ display:none !important; }

/* v17.2: clean overlay for iOS long-press */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay.hidden{ display:none; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }

/* v17.2: enlarge likely handle hit areas (theme-safe; only if such classes exist) */
.handle, .corner, .resize-handle, .ui-handle, .selection-handle, .transform-handle{
  min-width: 18px; min-height: 18px;
  width:auto; height:auto;
  touch-action:none;
}



/* ===== v17.3: stage sizing — safe-area aware; use svw fallback to prevent right cut-off ===== */
#stage, .stage{
  width: min(1000px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  max-width: calc(100% - 24px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
  margin-inline: auto;
}
@supports not (width: 1svw){
  #stage, .stage{
    width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
  }
}
#stage canvas, .stage canvas{ width:100%; height:100%; display:block; }

/* v17.3: nuke any legacy labels or helper lines that render "Save Image" or horizontal rules inside stage */
#stage::before, .stage::before{ content: none !important; }
#stage :where([id*="save"], [class*="save"]){ display:none !important; }
#stage hr{ display:none !important; }

/* v17.3: overlay remains textless; ensure it sits above everything but never blocks reset after events */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay.hidden{ display:none; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }

/* v17.3: improve tiny-handle hit area on desktop without changing look */
.handle, .corner, .resize-handle, .ui-handle, .selection-handle, .transform-handle{
  min-width: 18px; min-height: 18px;
  width:auto; height:auto;
  touch-action:none;
}
html, body{ overflow-x:hidden; } /* forbid horizontal bleed */



/* ===== v17.4: bulletproof stage sizing + artifact suppression ===== */
:root{ --fsjal-side-gap: 16px; } /* keeps look while ensuring no cut-off */

#stage, .stage{
  width: min(1000px, calc(100dvw - 2*var(--fsjal-side-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: calc(100% - 2*var(--fsjal-side-gap));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
@supports not (width: 1dvw){
  #stage, .stage{ width: min(1000px, calc(100svw - 2*var(--fsjal-side-gap) - env(safe-area-inset-left) - env(safe-area-inset-right))); }
}
@supports not (width: 1svw){
  #stage, .stage{ width: min(1000px, calc(100vw - 2*var(--fsjal-side-gap))); }
}

#stage canvas, .stage canvas{ width:100%; height:100%; display:block; }

/* Nuke ANY legacy labels/lines inside the stage (Save Image, overlays, hr rules) */
#stage::before, .stage::before{ content:none !important; }
#stage :where([id*="save"], [class*="save"], [aria-label*="save"], [title*="save"]){ display:none !important; }
#stage hr, #stage .rule, #stage .grid-line{ display:none !important; }

/* Overlay remains textless */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay.hidden{ display:none; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }

/* Desktop handle hit-area enlargement (no visual change) */
.handle, .corner, .resize-handle, .ui-handle, .selection-handle, .transform-handle{
  min-width:18px; min-height:18px; width:auto; height:auto; touch-action:none;
}

html, body{ overflow-x:hidden; }



/* ===== v17.4b: broaden selectors to guarantee results across markup variants ===== */

/* Any figure that contains the generator canvas should size edge-to-edge and hide helper labels/lines */
figure:has(canvas){
  width: min(1000px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 36px));
  max-width: calc(100% - 20px);
  margin-inline:auto;
  box-sizing:border-box;
  overflow:hidden;
  aspect-ratio:1/1;
}
@supports not (width: 1svw){
  figure:has(canvas){
    width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 36px));
  }
}
figure:has(canvas) > figcaption,
figure:has(canvas) hr,
figure:has(canvas) [id*="save"],
figure:has(canvas) [class*="save"]{
  display:none !important;
}
figure:has(canvas) canvas{ width:100%; height:100%; display:block; }

/* Absolutely prevent horizontal scrolling caused by the generator on mobile */
html, body{ overflow-x:hidden; }



/* ===== v17.5: universal stage & handle support ===== */
figure:has(canvas), #stage, .stage{
  width: min(1000px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px));
  max-width: calc(100% - 20px);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
  margin-inline: auto;
}
@supports not (width: 1svw){
  figure:has(canvas), #stage, .stage{
    width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px));
  }
}
figure:has(canvas) canvas, #stage canvas, .stage canvas{ width:100%; height:100%; display:block; }

/* purge legacy labels/lines in the square */
figure:has(canvas) > figcaption,
figure:has(canvas) hr,
#stage hr, .stage hr{ display:none !important; }
figure:has(canvas) [id*="save" i], figure:has(canvas) [class*="save" i],
#stage [id*="save" i], #stage [class*="save" i],
.stage [id*="save" i], .stage [class*="save" i]{ display:none !important; }

/* generous handle hit area for any class naming that implies handle/corner/rotate */
*[class*="handle" i], *[class*="corner" i], *[class*="rotate" i]{
  min-width:24px; min-height:24px; touch-action:none; z-index: 3000;
}
html, body{ overflow-x:hidden; }



/* ===== v17.7 adjustments ===== */
html, body { margin: 0; padding: 0; overflow-x: hidden; }

/* Keep header sticky at all times */
.site-header, .topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Make container centered and padded on mobile */
.container{
  max-width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 3vw, 24px);
  padding-right: clamp(12px, 3vw, 24px);
  box-sizing: border-box;
}

/* Prevent any child from pushing layout horizontally */
* { box-sizing: border-box; }
img, canvas, video { max-width: 100%; height: auto; }

/* Balance top links / hero navigation buttons */
.top-links, .hero-cta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 20px);
  align-items: stretch;
  justify-items: stretch;
}
.top-links .nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Trait selects stay within screen */
.traits-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.traits-list .trait select{
  width: 100%;
  max-width: 100%;
}

/* PFP preview box survives any overflow and keeps the dashed border visible */
.pfp-preview .canvas-wrap{
  width: 100%;
  max-width: min(92vw, 420px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
}

/* Save overlay improvements: no accidental white background and always dismissible */
.save-overlay{ position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:2000; }
.save-overlay img{ max-width:min(94vw,1000px); max-height:calc(94vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius:12px; background:#fff; margin:auto; }
.save-overlay.show{ display: flex; }
.hidden{ display: none !important; }

/* Kill any legacy ::before labels that could render "Save Image" or lines */
#stage::before, .stage::before, .canvas-wrap::before{ content: none !important; display: none !important; }

/* Keep trait selects within bounds on mobile */
.traits-list .trait select { max-width: 100%; width: 100%; }
.traits-list .trait { width: 100%; }

/* Lock copy button width to avoid layout shift on 'Copied!' */
.ca-row { display: flex; gap: 12px; align-items: stretch; }
.ca-input { flex: 1 1 auto; min-width: 0; }
.btn.copy { flex: 0 0 7.5rem; white-space: nowrap; text-align: center; }

/* Responsive canvas wrapper */
.canvas-wrap { width: min(100%, 1000px); max-width: 1000px; aspect-ratio: 1/1; margin: 0 auto; box-sizing: border-box; }

/* Fullscreen save overlay for long-press */
.save-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.98); display: none; place-items: center; z-index: 9999; padding: 16px; }
.save-overlay:not(.hidden) { display: grid; }
.save-overlay img { width: min(94vw, 94vh); height: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: default; }
.save-overlay.hidden { display: none; }

.site-header { position: sticky; top: 0; z-index: 100; }

.pfp-preview { overflow: visible; }


/* v17_10 patches */
html, body {
  overflow-x: hidden;           /* stop rightward shifts on mobile */
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;                /* sticky header restored */
}

.container, .hero-inner, .pfp-container {
  margin-left: auto;
  margin-right: auto;           /* ensure center aligned */
  max-width: 1100px;
}

.pfp .pfp-grid {
  align-items: flex-start;
}

.canvas-wrap {
  margin: 0 auto;               /* center canvas in its column */
  touch-action: none;            /* helps avoid accidental horizontal scroll */
}

/* Keep "Copy" button width stable so "Copied!" doesn't widen layout */
.btn.copy {
  min-width: 96px;
  text-align: center;
  white-space: nowrap;
}

.ca-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}

/* Trait list & selects never overflow the viewport */
.traits-list {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.traits-list .trait select {
  width: 100%;
  max-width: 100%;
}

/* Save overlay with dismiss background + big X button */
.save-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
}
.save-overlay.hidden { display: none; }
.save-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  height: auto;
  width: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  image-rendering: auto;
}
.save-overlay .save-close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.9);
  border-radius: 6px;
  color: #111;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(0,0,0,0.1);
}


/* FSJAL v18: ensure transform/guideline overlays can be hidden */
.guides-hidden .transform-guides,
.guides-hidden .transform-box,
.guides-hidden .drag-guides,
.guides-hidden .resize-handles,
[data-guides-hidden="1"] { display: none !important; }


/* FSJAL v18.2: make sure the overlay close button is on top & tappable */
#saveOverlay{ position:fixed; inset:0; }
#saveClose{ position:absolute; top:10px; right:12px; z-index:5; background:#000; color:#fff; border:none; border-radius:8px; padding:.5rem .7rem; font-weight:700; }

/* v19: ensure close button sits above image */
#saveClose{ z-index:50; }

/* v19.1: center popup, respect safe area for close button */
#saveClose{ position:absolute; top:calc(env(safe-area-inset-top) + 10px); right:12px; z-index:60; }

/* v19.9: desktop canvas sizing - substantially smaller on desktop */
@media (min-width: 821px){
  /* Desktop: keep generator fully visible and prevent giant preview */
  .pfp-grid{ grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .pfp-preview{ display:flex; justify-content:center; }
  .pfp-preview .canvas-wrap{
    width: 100%;
    max-width: min(520px, 42vw);
  }
}
.community-link{
  display:inline-block;
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:2px solid var(--green);
  background:var(--paper);
  font-weight:600;
  text-decoration:none;
}
.community-link:hover{
  background:var(--green);
  color:#000;
}

/* Desktop/layout fix: prevent the PFP generator columns from pushing content off-screen */
.pfp-controls, .pfp-preview{ min-width: 0; }

@media (max-width: 1100px){
  .pfp-grid{ grid-template-columns: 1fr; }
  .pfp-preview .canvas-wrap{ max-width: min(92vw, 520px); }
}