/* Phosphor, brushed metal, and a little pirate radio. */
:root{--signal:#426b35;--signal-bright:#c5f48e;--glow:rgba(105,157,70,.15);--pattern:rgba(57,91,56,.12)}
:root[data-theme="dark"]{--paper:#0e1916;--ink:#e4eddc;--muted:#a6bcae;--line:#345247;--surface:#192d25;--surface-soft:#14271f;--rule:#476a56;--signal:#c5f48e;--accent:#b8e583;--glow:rgba(125,232,125,.12);--pattern:rgba(160,221,173,.11)}
:root{--header-glow:rgba(105,157,70,.1275)}
:root[data-theme="dark"]{--header-glow:rgba(125,232,125,.102)}
body{background:radial-gradient(ellipse at 5% 0%,var(--header-glow),transparent 44%),radial-gradient(ellipse at 95% 35%,rgba(37,148,125,.09),transparent 45%),radial-gradient(var(--pattern) .7px,transparent .9px),var(--paper);background-size:auto,auto,8px 8px,auto;background-attachment:fixed}
.site-header::before{content:"";position:absolute;inset:0 -30px;pointer-events:none;background:radial-gradient(ellipse closest-side at 25% 50%,var(--header-glow),transparent)}
.wordmark{position:relative;transform:rotate(-2deg)}
[data-theme="dark"] .wordmark{filter:drop-shadow(0 0 17px #b4ff7825)}
.header-note{font-family:'Courier New',monospace;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--signal)}
.header-note::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.nav-wrap{background:linear-gradient(100deg,var(--surface),var(--paper));border-top-color:var(--line);border-bottom-color:var(--line);box-shadow:0 8px 30px #00000008}
.main-nav>a{position:relative;border-right-color:var(--line);transition:background .2s,color .2s}
.main-nav>a[aria-current]{background:linear-gradient(125deg,#d2f5aa,#8fbd79);color:#14291b;box-shadow:inset 0 -3px 0 #e4ffc4,0 0 26px #a5ed6a18}
.main-nav>a[aria-current] .nav-num{color:#345629}
.theme-toggle{border-radius:5px;background:var(--surface);box-shadow:inset 0 1px 0 #ffffff0c}
.section-heading{border-color:var(--line)}
.section-heading h2>span{color:var(--signal)}
.section-heading h2{letter-spacing:-.7px}
.featured{border-radius:8px;overflow:hidden;border-color:var(--line);background:var(--surface-soft);box-shadow:0 15px 45px #00000018,0 0 35px var(--glow)}
.featured-caption{background:linear-gradient(115deg,var(--surface),var(--surface-soft));border-top:1px solid var(--line)}
.hello-card,.tv-teaser,.about-card,.search-box{border-radius:8px;background:linear-gradient(135deg,var(--surface),var(--surface-soft));border-color:var(--line);box-shadow:inset 0 1px 0 #ffffff0b,0 7px 25px #00000009}
.hello-card{position:relative;overflow:hidden;border-top:2px solid var(--accent)}
.hello-card::after{content:"+";position:absolute;right:17px;top:10px;font:20px 'Courier New',monospace;color:var(--accent);opacity:.65}
.tv-teaser{transition:border-color .2s,box-shadow .2s}
.tv-teaser:hover{border-color:var(--accent);box-shadow:0 0 25px var(--glow)}
.contact-card{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 7px 7px 0;padding:20px;background:linear-gradient(100deg,var(--surface),transparent)}
.button{border-radius:4px}
.button.dark{background:linear-gradient(120deg,#d3f4ae,#9ac77c);color:#17291c;border-color:#9bc67f;box-shadow:0 0 18px var(--glow)}
.button.dark:hover{background:#ddffc2;color:#17291c}
.post-row{border-color:var(--line)}
.post-copy h3 a:hover,.text-link:hover,.footer-links a:hover{color:var(--signal)}
.post-date{color:var(--signal)}
.game-art{border-radius:8px;background:radial-gradient(ellipse at 50% 20%,var(--glow),transparent 75%),var(--surface-soft)}
.site-footer{border-image:linear-gradient(90deg,var(--accent),var(--line),transparent) 1}
.terminal{margin-top:24px;min-width:0;border:1px solid #486443;border-radius:8px;background:#09150f;color:#c6edab;box-shadow:0 12px 30px #00000024,0 0 22px #b5f37d08;overflow:hidden;font:11px/1.65 'Courier New',monospace}
.terminal-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;background:linear-gradient(110deg,#2b4230,#16291f);border-bottom:1px solid #39563b;color:#d3e7be;font-size:9px;letter-spacing:1.2px}
.terminal-led{width:6px;height:6px;border-radius:50%;background:#c5f48e;box-shadow:0 0 9px #c5f48e}
.terminal-bar span:last-child{margin-left:auto;color:#8ea67c;font-size:8px}
.terminal-screen{position:relative;padding:15px;background:repeating-linear-gradient(0deg,transparent 0 3px,#b7f19404 3px 4px),radial-gradient(ellipse at 50% 0,#234b2026,transparent 80%)}
.terminal-output{height:220px;overflow:auto;overflow-wrap:anywhere;scrollbar-color:#3c613b #0b1910;scrollbar-width:thin;padding-right:5px;white-space:pre-wrap}
.terminal-line{margin:0 0 9px;color:#b6cba9;font:inherit}
.terminal-art{margin:0 0 10px;font:12px/1.15 'Courier New',monospace;letter-spacing:0;white-space:pre;overflow-wrap:normal;color:#c6edab;text-shadow:0 0 10px #b8ff8018}
.terminal-line.command{color:#d6ffaf}.terminal-line.brand{color:#d6ffaf;font-weight:bold;letter-spacing:1.5px;text-shadow:0 0 12px #b8ff8044}.terminal-line a{color:#d6ffaf;text-decoration:underline;text-underline-offset:3px}
.terminal-form{display:flex;align-items:center;gap:7px;border-top:1px solid #2c442c;padding-top:12px;margin-top:8px}
.terminal-form label{color:#a7d67e;white-space:nowrap;font-size:10px}
.terminal-form input{font:inherit;color:#dcffc0;background:transparent;border:0;outline:none;min-width:0;width:100%;padding:4px 0;caret-color:#c5f48e;border-radius:0}
.terminal-form input:focus-visible{outline:1px solid #729c59;outline-offset:3px}
.terminal-form button{background:transparent;color:#c5f48e;border:1px solid #395337;border-radius:3px;padding:3px 7px;font:inherit}
.terminal-shortcuts{display:flex;gap:14px;padding:9px 15px;border-top:1px solid #283e2c;background:#102017}
.terminal-shortcuts button{padding:0;border:0;background:transparent;color:#a4bd91;font:10px 'Courier New',monospace;text-decoration:underline;text-underline-offset:3px}
.terminal button:hover{color:#e4ffd0}.terminal button:focus-visible{outline-color:#c5f48e}
.contact-terminal{max-width:620px;margin:45px 0}.contact-terminal .terminal-output{height:220px}
@media(max-width:800px){.home-aside>.terminal{margin-top:24px}.home-aside>.contact-card{align-self:start}}
@media(max-width:540px){body{background-attachment:scroll}.site-header::before{inset:0}.terminal{margin-top:24px;font-size:12px}.terminal-form input{font-size:16px}.contact-card{padding:20px}.contact-terminal{max-width:100%}}

.terminal-hint{font:10px/1.6 "Courier New",monospace;color:#99b882;margin:12px 0 0;white-space:pre-wrap}.terminal-hint:empty{display:none}.terminal-shortcuts{flex-wrap:wrap;gap:10px}

/* Projects occupy the main library; cartridge covers belong to Damicom. */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:0 0 45px}
.project-card{min-width:0;display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.project-card:hover{border-color:var(--accent);color:var(--ink);box-shadow:0 10px 28px #00000016}
.project-art{aspect-ratio:16/9;overflow:hidden;background:radial-gradient(ellipse at center,#557d4933,transparent 80%),var(--surface-soft);border-bottom:1px solid var(--line)}
.project-art img{width:100%;height:100%;object-fit:cover}
.project-card--collection .project-art img{object-fit:contain;padding:20px}
.project-copy{padding:25px 28px 27px}.project-copy h2{font-size:34px;margin:10px 0}.project-copy h2>span{float:right;font-size:25px;color:var(--accent)}
.project-copy p{font-size:14px;margin-bottom:22px}.project-copy .eyebrow{font-size:9px;color:var(--muted)}.project-action{font-size:12px;font-weight:bold;color:var(--accent)}
.more-games{display:flex;gap:12px;margin:8px 0 28px}.more-games>a{flex:1;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 20px;border:1px solid var(--line);border-left:2px solid var(--accent);background:var(--surface-soft);border-radius:4px}.more-games strong{font-size:16px}.more-games .tiny{font-size:8px;color:var(--muted)}
.game-breadcrumbs{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}.game-breadcrumbs a{text-decoration:underline;text-underline-offset:4px}.game-breadcrumbs [aria-current]{color:var(--ink)}
.game-page-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.collection-shelf{margin-top:45px}.player-requirements{font:11px/1.6 'Courier New',monospace;margin:0 0 15px;color:var(--muted)}
.game-page-player--standalone{width:100%;max-width:none}
.game-window.game-window--standalone{position:relative;width:100%;height:auto;aspect-ratio:16/9;min-height:420px;background:#102c31}
.game-window--standalone iframe{position:absolute;inset:0}
.game-window--standalone iframe:fullscreen{position:fixed;width:100vw;height:100vh;height:100dvh;border:0;background:#102c31}
.fullscreen-status{max-width:280px;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:800px){.project-grid{gap:20px}.project-copy{padding:20px}.project-copy h2{font-size:29px}.game-page-title{gap:20px;flex-wrap:wrap}.game-page-actions{margin-bottom:10px}}
@media(max-width:600px){.project-grid{grid-template-columns:1fr}.project-copy{padding:22px}.more-games>a{align-items:start;flex-direction:column;gap:6px}.game-window.game-window--standalone{min-height:380px;aspect-ratio:4/3}.game-page-actions .button{white-space:normal}.game-breadcrumbs{line-height:1.8}}
@media(prefers-reduced-motion:reduce){.project-card{transition:none}}

/* Mobile navigation wraps into clear, touch-sized rows instead of scrolling sideways. */
@media(max-width:800px){
  .main-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;padding:0 16px}
  .main-nav>a,.main-nav .search-nav{min-width:0;min-height:48px;margin:0;padding:10px 4px;justify-content:center;gap:4px;text-align:center}
}
@media(max-width:540px){
  .main-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .main-nav>a:nth-child(n+4){border-top:1px solid var(--line)}
  .main-nav>a:nth-child(4){border-left:1px solid var(--line)}
}

/* Decorative glows may extend beyond the viewport; they should not create sideways scrolling. */
@media(max-width:1100px){body{overflow-x:clip}}

/* Flat, full-width mastheads for both themes. */
:root[data-theme="light"]{--header-glow:transparent}
:root[data-theme="light"] .site-header::before{inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:#fafbf7}
:root[data-theme="light"] .header-note,:root[data-theme="light"] .theme-toggle{position:relative}

:root[data-theme="dark"]{--header-glow:transparent}
:root[data-theme="dark"] .site-header::before{inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:#141a17}
:root[data-theme="dark"] .header-note,:root[data-theme="dark"] .theme-toggle{position:relative}
:root[data-theme="dark"] .wordmark{filter:none}
@media(max-width:800px){.main-nav .search-nav{border-left:0}}

/* The one-button game is a portrait cabinet, not a widescreen player. */
.game-window.game-window--standalone[data-game-id="ball-takes-risk"]{width:min(100%,552px);height:auto;aspect-ratio:552/840;min-height:0;margin:0 auto;background:#f2eee3}

/* The Damicom card composes the site cabinet and a real game screen on the themed background. */
.project-card--collection .project-art{display:flex;align-items:center;justify-content:center}
.damicom-thumb{position:relative;width:min(88%,510px);aspect-ratio:3/2;flex:none}
.project-card--collection .project-art .damicom-thumb-cabinet{display:block;width:100%;height:100%;padding:0;object-fit:fill;clip-path:polygon(2.58% 3.5%,97.42% 3.5%,97.42% 88.9%,95.2% 88.9%,94.85% 93.2%,94.5% 95.9%,90.05% 95.9%,89.5% 93.5%,10.75% 93.5%,10% 95.9%,5.55% 95.9%,5.2% 92.5%,5% 88.9%,2.58% 88.9%)}
.project-card--collection .project-art .damicom-thumb-screen{position:absolute;left:10.4%;top:13.7%;width:65.9%;height:65.4%;border-radius:4.5% / 5.5%;overflow:hidden;background:#07120e}
.project-card--collection .project-art .damicom-thumb-screen img{position:absolute;max-width:none;width:192.69%;height:163.71%;left:-18.19%;top:-23.22%;padding:0;object-fit:fill}

/* Prevent the full-bleed header from introducing a horizontal page scrollbar. */
html{overflow-x:clip}

/* Quiet, distinct labels for platforms and inputs. */
.game-tags{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 16px}
.game-tag{display:inline-flex;align-items:center;border:1px solid transparent;border-radius:4px;padding:3px 7px;font:600 10px/1.4 Arial,sans-serif;letter-spacing:.1px;white-space:nowrap}
.game-tag--platform{background:#e3efda;border-color:#bdcfb0;color:#365a37}
.game-tag--input{background:#e9e5d9;border-color:#d2c7af;color:#655039}
[data-theme="dark"] .game-tag--platform{background:#283d2c;border-color:#496849;color:#c7e6b3}
[data-theme="dark"] .game-tag--input{background:#39352b;border-color:#716347;color:#ead9ad}
.game-filter{margin:0 0 22px;padding:13px 16px;background:var(--surface-soft);border:1px solid var(--line);border-radius:6px}
.game-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 9px/1.5 'Courier New',monospace;letter-spacing:1px;color:var(--muted)}
#clear-game-filters{border:0;background:none;color:var(--ink);font:11px Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;padding:4px}
#clear-game-filters:disabled{opacity:.45;text-decoration:none}
.game-filter-groups{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:7px}
.game-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.filter-label{font:9px 'Courier New',monospace;letter-spacing:.5px;color:var(--muted);margin-right:3px}
.game-filter .game-tag{cursor:pointer;min-height:28px}
.game-filter .game-tag[aria-pressed="true"]{outline:2px solid var(--signal);outline-offset:1px}
.game-filter .game-tag:hover{filter:brightness(.96)}
[data-theme="dark"] .game-filter .game-tag:hover{filter:brightness(1.2)}
.game-filter-status{font:10px/1.5 'Courier New',monospace;color:var(--muted);margin:6px 0 0}
.game-filter-status:empty{display:none}
.game-filter-empty{margin:20px 0 45px;color:var(--muted)}
.project-copy .game-tags{margin:0 0 17px}
.game-page-title + .player-requirements{margin-bottom:0}
.game-page-player{margin-top:4px}
.about-layout.about-layout--single{grid-template-columns:minmax(0,700px)}
.credits-list{max-width:820px;margin:0 0 60px}.credit-section{padding:24px 0;border-top:1px solid var(--line);scroll-margin-top:20px}.credit-section h2{margin:0 0 12px;font-size:23px}.credit-section p{font-size:14px;line-height:1.75;margin:0 0 12px}.credit-section ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}.credit-section a,.game-credits-link{text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:600}.game-credits-link{display:inline-block;margin-top:2px}
/* The PC Engine cabinet is authored for an 832 × 656 frame. */
.game-window.game-window--standalone[data-game-id="yarn-patrol"]{width:min(100%,832px);height:auto;aspect-ratio:832/656;min-height:0;margin:0 auto;background:#071726}
.game-window.game-window--standalone[data-game-id="pyro-turbofire"]{width:100%;height:1500px;aspect-ratio:auto;min-height:0;background:#172b20}
.project-card[href="/games/yarn-patrol/"] .project-art img{object-position:center top}
/* Keep the compact cabinet's 832:656 geometry and reserve two touch-control rows. */
@media(max-width:600px), (pointer:coarse) and (max-width:1000px){
 .game-window.game-window--standalone[data-game-id="yarn-patrol"]{aspect-ratio:auto}
 .game-window.game-window--standalone[data-game-id="yarn-patrol"]::before{content:"";display:block;padding-top:78.846154%;height:254px}
 .game-page-player:has(.game-window[data-game-id="yarn-patrol"]){width:calc(100% + 20px);margin-left:-10px}
}
@media(max-height:600px) and (orientation:landscape){
 .game-window.game-window--standalone[data-game-id="yarn-patrol"]{aspect-ratio:auto;height:calc(100dvh - 20px)}
 .game-window.game-window--standalone[data-game-id="yarn-patrol"]::before{display:none}
 /* Keep the emulator's viewport at its original height while clipping only its empty lower margin. */
 @supports (width:1cqw){
  .game-page-player:has(.game-window[data-game-id="yarn-patrol"]){container-type:inline-size}
  .game-window.game-window--standalone[data-game-id="yarn-patrol"]{height:calc(min(624px, 75cqw, (100dvh - 20px) * .9512195122) + 8.5px)}
  .game-window.game-window--standalone[data-game-id="yarn-patrol"] iframe{height:calc(100dvh - 20px)}
 }
}

/* Surround the desktop cabinet with Yarn Patrol's promotional art. */
@media (min-width:1001px) and (min-height:601px), (min-width:601px) and (min-height:601px) and (pointer:fine){
 .game-page-player:has(.game-window[data-game-id="yarn-patrol"]){background:linear-gradient(#07111a55,#07111a55), #071726 url("/assets/yarn-patrol-background.png") 70% 25% / 125% auto no-repeat}
}

/* Compact homepage game tray: no sideways scrolling, with a flexible last row. */
.more-games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.more-games>a{grid-column:span 2;min-width:0;min-height:88px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px}
.more-games strong{font-size:15px;line-height:1.35;overflow-wrap:break-word}
.more-games>a:last-child:nth-child(3n+1){grid-column:span 6}
.more-games>a:last-child:nth-child(3n+2){grid-column:span 4}
@media(max-width:600px){.more-games>a{grid-column:span 3;min-height:84px;padding:13px}.more-games>a:last-child:nth-child(n){grid-column:span 3}.more-games>a:last-child:nth-child(odd){grid-column:span 6}}

/* Align the sidebar cards with the featured game rather than its heading. */
@media(min-width:801px){.home-aside{padding-top:54px}}