/* Shared site surfaces. Game artwork, video, and drawing paper keep their colors. */
:root{
  --surface:#e3e8d8;--surface-soft:#e7ebdf;--teaser:#e3e8d8;--teaser-line:#cccfc0;
  --notice:#e8decb;--notice-line:#d2c7b0;--hover:#e1e8d6;--rule:#26372e;
  --selected:#26372e;--selected-ink:#f6f7ed;--selected-number:#bddb9b;
  --shadow:#d9decc;--accent:#698b4f;--input-line:#bdc9b1;--preview-label:#5b6953;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151c18;--ink:#e3e8dc;--muted:#a6b39f;--line:#3b493c;
  --green:#bddb9b;--light:#283527;--white:#1c251f;
  --surface:#222e24;--surface-soft:#1d2820;--teaser:#222e24;--teaser-line:#3b493c;
  --notice:#332f24;--notice-line:#5d523c;--hover:#2b392a;--rule:#687762;
  --selected:#bddb9b;--selected-ink:#19231a;--selected-number:#3d5533;
  --shadow:#0d140f;--accent:#b4d08e;--input-line:#55674d;--preview-label:#bfceb0;
}
body{background:var(--paper)}
.site-header{min-height:138px}
.header-note{white-space:nowrap}
.theme-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:11px;line-height:1.5;flex-shrink:0}
.theme-toggle:hover{background:var(--hover)}
:root[data-theme="dark"] .theme-toggle{background:var(--surface);border-color:var(--rule)}
.theme-icon{font-size:21px;line-height:1}
[data-theme="dark"] .signature{filter:brightness(0) saturate(100%) invert(93%) sepia(10%) saturate(270%) hue-rotate(26deg)}
.home-grid{margin-top:30px}
.nav-wrap,.section-heading,.featured,.board-frame{border-color:var(--rule)}
.featured{box-shadow:4px 4px 0 var(--shadow)}
.main-nav>a[aria-current]{background:var(--selected);color:var(--selected-ink)}
.main-nav>a[aria-current] .nav-num{color:var(--selected-number)}
.main-nav>a:hover{background:var(--hover);color:var(--ink)}
.main-nav>a .nav-num{color:var(--muted)}
.main-nav>a[aria-current]:hover .nav-num{color:var(--muted)}
.hello-card,.search-box,.about-card,.board-toolbar{background:var(--surface);border-color:var(--line)}
.hello-card{padding:25px}
.hello-card h2{font-size:25px;margin:0 0 14px}
.hello-card p{max-width:none;margin-bottom:18px}
.tv-teaser{background:var(--teaser);border-color:var(--teaser-line)}
.tv-teaser .mini-tv{margin:2px 0 19px}
.mini-tv{background:#26372e;border-color:#26372e;box-shadow:0 4px 0 var(--line)}
.mini-tv img{border-color:#101c14}
.mini-knobs{color:#bddb9b}
.tv-play{background:#e3e8dcdf;color:#26372e}
.contact-card{display:block;border-top:1px solid var(--rule);margin-top:24px;padding:23px 3px 0}
.contact-card h2{font-size:23px;letter-spacing:-.7px;margin-bottom:11px}
.contact-card h2 span{float:right;font-size:20px}
.contact-card p{font-size:12px;margin:0}
.button{color:var(--ink);border-color:var(--rule)}
.button.dark{background:var(--selected);color:var(--selected-ink)}
.button:hover{background:var(--hover);color:var(--ink)}
.console-banner{background:var(--surface);border-color:var(--line)}
.console-banner img{
  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%
  );
}
.game-art{background:var(--surface-soft);border-color:var(--line)}
.sample-label{color:var(--muted);border-color:var(--line)}
.sample-notice{background:var(--surface);color:var(--preview-label);border-color:var(--accent)}
.page-intro h1{margin-top:0}
.page-intro h1>span:not(.tv-title){color:var(--accent)}
.search-box input{border-color:var(--input-line);color:var(--ink);background:var(--white)}
.search-box input::placeholder{color:var(--muted);opacity:1}
.filter-row button{color:var(--ink);border-color:var(--line)}
.filter-row button[aria-pressed="true"]{background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
.prose a{text-decoration-color:var(--accent)}
.channel{border-color:var(--line)}
.channel[aria-pressed="true"]{background:var(--surface);border-left-color:var(--accent)}
.channel:hover{background:var(--hover)}
.channel-number{color:var(--accent)}
.tv-hardware{background:#2b3b2e;border-color:#18271d;box-shadow:inset 2px 2px 0 #62785a,5px 6px 0 var(--shadow)}
.tv-screen{border-color:#132219;box-shadow:0 0 0 2px #53694a,inset 0 0 25px #000}
.tv-panel{color:#e3e8dc}
.channel-knob{background:radial-gradient(circle at 36% 30%,#d5bb90,#9c7a50);border-color:#513c28;box-shadow:2px 3px 0 #122017;color:#3b2b1c}
.speaker{background:repeating-linear-gradient(0deg,#122017 0 2px,transparent 2px 6px)}
.tv-legs span{background:#233329}
.about-card h2{font-size:25px;margin-bottom:18px}
.board-notice{background:var(--notice);border-color:var(--notice-line)}
.board-frame{background:var(--white);box-shadow:4px 4px 0 var(--shadow);margin-bottom:30px}
.pen-color{border-color:var(--surface)}
.pen-color[aria-pressed="true"]{outline-color:var(--ink)}
.brush-label input{accent-color:var(--accent)}
.board-toolbar .button[aria-pressed="true"]{background:var(--hover)}
.site-footer{border-top:1px solid var(--line);margin-top:38px;padding-top:27px;padding-bottom:30px}
.board-send-row{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:25px 0}
.board-send-row p{font-size:12px;color:var(--ink);margin:0 0 6px}
.board-send-row p.muted{font-size:11px;color:var(--muted);margin:0}
.board-send-row .button{min-width:155px;padding:13px 20px}
.button:disabled{cursor:default;opacity:.45}
.drawing-receipt{padding:18px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);color:var(--ink);font-size:13px;margin-bottom:35px}
@media(max-width:540px){.board-send-row{align-items:stretch;flex-direction:column;gap:18px}.board-send-row .button{width:100%}}
.footer-links{flex-direction:row;align-items:center;gap:24px;font-size:10px}
.footer-links>span{margin:0}
@media(max-width:800px){
  .site-header{min-height:128px}
  .header-note{border-left:0;padding-left:0}
  .site-footer{flex-wrap:nowrap}
  .site-footer .footer-links{width:auto;gap:17px}
}
@media(max-width:540px){
  .site-header{min-height:108px}
  .header-note{display:none}
  .theme-toggle{padding:8px;gap:6px;font-size:9px}
  .theme-icon{font-size:18px}
  .home-grid{margin-top:23px}
  .tv-teaser .mini-tv{margin:4px auto 20px}
  .contact-card{padding:22px 5px 0}
  .site-footer{padding-top:23px;gap:12px}
  .footer-brand{font-size:21px}
  .site-footer .footer-links{gap:12px;font-size:8px}
  .about-card{margin-top:25px}
}