/* Optional Retro Pixel UI. Everything is scoped; Original remains available. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Pixelify+Sans:wght@400;500;600;700&display=swap');

html[data-debug-theme="retro-pixel"] {
  --bg-main:#071827; --bg-panel:#0B2236; --bg-panel-light:#12314A;
  --border-main:#B78328; --border-highlight:#E0A932;
  --text-main:#F1E8D2; --text-secondary:#A9BAC5;
  --yellow:#F4BE3A; --blue:#4777B8; --green:#4B783E;
  --purple:#744A88; --red:#A54F55;
  --page-bg:var(--bg-main); --surface-dark:var(--bg-panel);
  --accent:var(--yellow); --accent-light:#ffcf59;
  --ink:var(--text-main); --muted:var(--text-secondary);
  --gold:var(--yellow); --panel:var(--bg-panel); --navy:var(--bg-main);
  --font-pixel:'Pixelify Sans','DM Mono',monospace;
  --font-body:'Inter','Space Grotesk',sans-serif;
}
.icon-16,.icon-24 { display:inline-block; flex:none; vertical-align:middle; image-rendering:pixelated; }
.icon-16 { width:16px; height:16px; }
.icon-24 { width:24px; height:24px; }
.brand-icon,.tier-example,.tier-description { display:none; }

html[data-debug-theme="retro-pixel"] body { font-family:var(--font-body); background:var(--bg-main); }
html[data-debug-theme="retro-pixel"] :is(button,.brand,.grave-brand,.section-label,h2,h3,h4,.panel-kicker,.credits-heading,.credit-rip,.credit-item strong,.showcase-tier>span,.showcase-tier>strong,.flow-header,.project-form label,.selected-tier,.obituary-rip,.obituary h1,.buried) { font-family:var(--font-pixel); letter-spacing:.035em; }
html[data-debug-theme="retro-pixel"] img { image-rendering:pixelated; }
html[data-debug-theme="retro-pixel"] :is(button,input,textarea,.share-card-stone) { border-radius:0; }
html[data-debug-theme="retro-pixel"] :is(.panel,.detail-panel,.bury-modal,.share-card,.share-options,.burial-toast,.how-to,.resting-places) {
  background:var(--bg-panel); border:2px solid var(--border-main);
  box-shadow:inset 0 0 0 1px #294154,0 4px 0 #04111d; color:var(--text-main);
}
html[data-debug-theme="retro-pixel"] :is(.detail-panel,.bury-modal,.share-card) { border-top-color:var(--border-highlight); }
html[data-debug-theme="retro-pixel"] :is(.bury-button,.section-cta,.primary-flow,.flower-button) {
  border:2px solid var(--border-highlight); background:var(--yellow); color:var(--bg-main);
  box-shadow:inset 0 0 0 1px #ffe093,0 3px 0 #77501d;
  font-size:16px; font-weight:600; padding:10px 16px; min-height:42px;
}
html[data-debug-theme="retro-pixel"] :is(.bury-button,.section-cta,.primary-flow,.flower-button):hover { background:#ffd469; transform:translateY(-1px); }
html[data-debug-theme="retro-pixel"] :is(button,a,input,textarea):focus-visible { outline:2px solid var(--yellow); outline-offset:3px; }
html[data-debug-theme="retro-pixel"] .topbar { background:var(--bg-panel); backdrop-filter:none; border-bottom:2px solid var(--border-main); box-shadow:inset 0 -3px 0 #12314a; }
html[data-debug-theme="retro-pixel"] .brand { display:flex; align-items:center; font-size:30px; letter-spacing:0; line-height:1; }
html[data-debug-theme="retro-pixel"] .brand-icon { display:inline-block; margin-right:10px; background:url('assets/art-generated/grave-1/processed-v2/clean.png') center/contain no-repeat; image-rendering:pixelated; }
html[data-debug-theme="retro-pixel"] .tagline { font-family:var(--font-body); font-size:11px; margin-top:5px; }
html[data-debug-theme="retro-pixel"] .buried { font-size:15px; right:280px; }
html[data-debug-theme="retro-pixel"] .buried b { color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .bury-button span { opacity:1; }
/* Borders only: no changes to world dimensions, translation or texture. */
html[data-debug-theme="retro-pixel"] .page-shell .viewport,
html.page-shell[data-debug-theme="retro-pixel"] .viewport { border:2px solid var(--border-main); border-top:0; }
html[data-debug-theme="retro-pixel"] .map-hint { background:var(--bg-panel); border:1px solid var(--border-main); color:var(--text-secondary); font:12px var(--font-pixel); padding:7px 14px; }
html[data-debug-theme="retro-pixel"] .memorial-credits { width:min(350px,24vw); background:var(--bg-panel); border-left:2px solid var(--border-main); padding:24px 18px 18px; mask-image:none; }
html[data-debug-theme="retro-pixel"] .credits-heading { font-size:15px; padding:0 0 16px; border-bottom:1px solid var(--border-main); }
html[data-debug-theme="retro-pixel"] .credits-viewport { padding-left:0; mask-image:linear-gradient(transparent,#000 4%,#000 93%,transparent); }
html[data-debug-theme="retro-pixel"] .credit-item { padding:26px 14px 30px; border-bottom:1px solid #294154; border-radius:0; }
html[data-debug-theme="retro-pixel"] .credit-rip { font-size:14px; color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .credit-item strong { font-size:23px; line-height:1.1; color:var(--text-main); }
html[data-debug-theme="retro-pixel"] .credit-item small { font:12px var(--font-body); color:var(--text-secondary); }
html[data-debug-theme="retro-pixel"] .credit-item em { font:italic 13px/1.6 var(--font-body); color:var(--text-secondary); }
html[data-debug-theme="retro-pixel"] .credit-item:hover { background:var(--bg-panel-light); box-shadow:inset 3px 0 var(--yellow); }
html[data-debug-theme="retro-pixel"] :is(.world .grave-inscription,.world .grave-caption) { font-family:var(--font-pixel); }
html[data-debug-theme="retro-pixel"] .world .grave.selected { filter:brightness(1.12); }
html[data-debug-theme="retro-pixel"] :is(.how-to,.resting-places) { max-width:1280px; width:calc(100% - 64px); margin:32px auto; padding:28px; }
html[data-debug-theme="retro-pixel"] .section-label { font-size:19px; line-height:1.2; color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .burial-steps { margin-top:22px; border:1px solid var(--border-main); }
html[data-debug-theme="retro-pixel"] .burial-step { padding:24px; gap:16px; }
html[data-debug-theme="retro-pixel"] .burial-step+.burial-step { border-left:1px solid var(--border-main); padding-left:24px; }
html[data-debug-theme="retro-pixel"] .burial-step>span { display:grid; place-items:center; align-self:start; width:36px; height:36px; border:1px solid var(--border-main); background:var(--bg-panel-light); font:20px var(--font-pixel); color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .burial-step h2 { font-size:19px; }
html[data-debug-theme="retro-pixel"] .burial-step p { font:12px/1.6 var(--font-body); }
html[data-debug-theme="retro-pixel"] .resting-heading { align-items:center; }
html[data-debug-theme="retro-pixel"] .resting-heading p { font:13px/1.6 var(--font-body); }
html[data-debug-theme="retro-pixel"] .tier-showcase { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; margin-top:26px; border:1px solid var(--border-main); overflow:visible; }
html[data-debug-theme="retro-pixel"] .showcase-tier { display:flex; flex-direction:column; position:relative; padding:18px 10px; border-left:1px solid var(--border-main); background:var(--bg-main); }
html[data-debug-theme="retro-pixel"] .showcase-tier:first-child { border-left:0; }
html[data-debug-theme="retro-pixel"] .showcase-tier:hover { background:var(--bg-panel-light); box-shadow:inset 0 3px var(--yellow); }
html[data-debug-theme="retro-pixel"] .showcase-tier>span { order:-2; align-self:center; min-width:76px; margin:0 0 10px; padding:5px 12px; color:var(--text-main); font-size:24px; border:1px solid #94ae88; background:var(--green); }
html[data-debug-theme="retro-pixel"] .tier-funeral>span { background:var(--blue); border-color:#7da0d1; }
html[data-debug-theme="retro-pixel"] .tier-monument>span { background:var(--border-main); border-color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .tier-mausoleum>span { background:var(--purple); border-color:#b584c7; }
html[data-debug-theme="retro-pixel"] .showcase-tier>strong { order:-1; margin:0; min-height:36px; font-size:17px; }
html[data-debug-theme="retro-pixel"] .showcase-art { height:256px; flex:none; }
html[data-debug-theme="retro-pixel"] .showcase-art img { max-width:100%; filter:none; object-fit:contain; }
html[data-debug-theme="retro-pixel"] .tier-grave img { width:80px; }
html[data-debug-theme="retro-pixel"] .tier-funeral img { width:128px; }
html[data-debug-theme="retro-pixel"] .tier-monument img { width:192px; }
html[data-debug-theme="retro-pixel"] .tier-mausoleum img { width:256px; }
html[data-debug-theme="retro-pixel"] .tier-example { display:block; margin-top:15px; font:16px var(--font-pixel); color:var(--text-main); }
html[data-debug-theme="retro-pixel"] .tier-description { display:block; margin:8px 0 0; font:11px/1.6 var(--font-body); color:var(--text-secondary); }
html[data-debug-theme="retro-pixel"] .site-footer { border-top:2px solid var(--border-main); background:var(--bg-panel); padding-top:26px; padding-bottom:26px; }
html[data-debug-theme="retro-pixel"] .site-footer .brand { font-size:25px; }
html[data-debug-theme="retro-pixel"] .site-footer nav a { font:15px var(--font-pixel); }
html[data-debug-theme="retro-pixel"] .site-footer small { color:var(--text-secondary); font:11px var(--font-body); }
html[data-debug-theme="retro-pixel"] .tier-option { position:relative; border:1px solid var(--border-main); background:var(--bg-main); padding:16px; }
html[data-debug-theme="retro-pixel"] .tier-option:hover { background:var(--bg-panel-light); border-color:var(--yellow); box-shadow:inset 3px 0 var(--yellow); }
html[data-debug-theme="retro-pixel"] .tier-option:hover:after { content:'◀'; position:absolute; right:5px; top:5px; color:var(--yellow); font-size:12px; }
html[data-debug-theme="retro-pixel"] .tier-label strong { font-size:19px; }
html[data-debug-theme="retro-pixel"] .tier-label small { font:11px/1.5 var(--font-body); }
html[data-debug-theme="retro-pixel"] .tier-option[data-tier="1"] { border-top:3px solid var(--green); }
html[data-debug-theme="retro-pixel"] .tier-option[data-tier="10"] { border-top:3px solid var(--blue); }
html[data-debug-theme="retro-pixel"] .tier-option[data-tier="100"] { border-top:3px solid var(--border-highlight); }
html[data-debug-theme="retro-pixel"] .tier-option[data-tier="1000"] { border-top:3px solid var(--purple); }
html[data-debug-theme="retro-pixel"] .bury-modal { max-height:calc(100dvh - 32px); overflow-y:auto; }
html[data-debug-theme="retro-pixel"] :is(.detail-panel h2,.bury-modal h2) { font-size:32px; letter-spacing:0; }
html[data-debug-theme="retro-pixel"] :is(.panel-kicker,.detail-panel h3,.obituary-preview h4,.project-form label,.flow-header,.selected-tier) { font-size:13px; color:var(--yellow); }
html[data-debug-theme="retro-pixel"] :is(.project-form input,.project-form textarea,.obituary-preview) { background:var(--bg-main); border:1px solid var(--border-main); color:var(--text-main); font-family:var(--font-body); }
html[data-debug-theme="retro-pixel"] :is(.modal-intro,.detail-panel p,.share-card p,.obituary-preview p) { color:var(--text-main); font-family:var(--font-body); }
html[data-debug-theme="retro-pixel"] .quote { color:var(--text-secondary)!important; }
html[data-debug-theme="retro-pixel"] :is(.remains,.toast-actions button,.grave-actions a,.grave-actions button,.share-options a,.share-options button) { background:var(--bg-panel-light); border:1px solid var(--border-main); color:var(--text-main); font:14px var(--font-pixel); border-radius:0; }
html[data-debug-theme="retro-pixel"] :is(.remains,.toast-actions button,.grave-actions a,.grave-actions button,.share-options a,.share-options button):hover { border-color:var(--yellow); background:var(--bg-panel); }
html[data-debug-theme="retro-pixel"] .share-card-stone { background:var(--bg-panel-light); border:2px solid var(--border-main); box-shadow:none; }
html[data-debug-theme="retro-pixel"] .share-card-stone small { color:var(--text-secondary); }
html[data-debug-theme="retro-pixel"] .close { color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .grave-topbar { background:var(--bg-panel); border-bottom:2px solid var(--border-main); }
html[data-debug-theme="retro-pixel"] .obituary { background:var(--bg-panel); border:2px solid var(--border-main); box-shadow:inset 0 0 0 1px #294154; padding:32px; width:100%; }
html[data-debug-theme="retro-pixel"] .obituary h1 { font-size:clamp(36px,5vw,64px); letter-spacing:0; line-height:1; }
html[data-debug-theme="retro-pixel"] .obituary :is(h2,.obituary-rip) { font-size:16px; color:var(--yellow); }
html[data-debug-theme="retro-pixel"] .obituary p { font-size:15px; }
html[data-debug-theme="retro-pixel"] .grave-actions .flower-button { background:var(--yellow); color:var(--bg-main); }
html[data-debug-theme="retro-pixel"] :is(.debug-theme-toggle,.debug-theme-panel) { background:var(--bg-panel); border:1px solid var(--border-main); box-shadow:0 3px 0 #04111d; font-family:var(--font-pixel); }
html[data-debug-theme="retro-pixel"] .debug-theme-option { font:12px var(--font-pixel); }
html[data-debug-theme="retro-pixel"] .debug-theme-panel { width:220px; }

@media(max-width:1000px) {
  html[data-debug-theme="retro-pixel"] .burial-steps { grid-template-columns:1fr; }
  html[data-debug-theme="retro-pixel"] .burial-step+.burial-step { border-left:0; border-top:1px solid var(--border-main); }
  html[data-debug-theme="retro-pixel"] .tier-showcase { display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
  html[data-debug-theme="retro-pixel"] .showcase-tier { flex:0 0 272px; scroll-snap-align:start; }
}
@media(max-width:800px) {
  html[data-debug-theme="retro-pixel"] .topbar { padding:0 14px; }
  html[data-debug-theme="retro-pixel"] .brand { font-size:25px; }
  html[data-debug-theme="retro-pixel"] .bury-button { right:14px; font-size:14px; padding:8px 10px; }
  html[data-debug-theme="retro-pixel"] .memorial-credits { display:none; }
  html[data-debug-theme="retro-pixel"] :is(.how-to,.resting-places) { width:calc(100% - 24px); margin:20px auto; padding:18px; }
  html[data-debug-theme="retro-pixel"] .section-label { font-size:17px; }
  html[data-debug-theme="retro-pixel"] .burial-step { padding:18px; }
  html[data-debug-theme="retro-pixel"] .resting-heading { align-items:stretch; }
  html[data-debug-theme="retro-pixel"] .map-hint { font-size:10px; padding:7px 8px; }
  html[data-debug-theme="retro-pixel"] .obituary { padding:24px 20px; }
  html[data-debug-theme="retro-pixel"] .toast-actions { flex-wrap:wrap; }
  html[data-debug-theme="retro-pixel"] .burial-toast { gap:8px; padding:12px; }
}