/* Palette, bevels and title gradient match core.py and ui_styles.py (XP). */
:root { color-scheme: light; --xp-body: #d4d0c8; --xp-button: #ece9d8; --xp-text: #000; }
body { background:#3a6ea5; color:#fff; font-family:Tahoma,Arial,sans-serif; }
body:before,.desktop-noise { display:none; }
.site-header { min-height:66px; background:#d4d0c8; padding:10px 15px; margin:16px auto 0; border:2px solid; border-color:#fff #404040 #404040 #fff; color:#000; box-shadow:none; }
.brand { font-family:Tahoma,Arial,sans-serif; font-size:16px; letter-spacing:0; }
.brand-light { color:#000; font-weight:700; }
.brand-mark { border-radius:0; box-shadow:none; padding:0; object-fit:contain; }
.site-header nav { gap:8px; }
.nav-link,.header-steam { color:#000; font-family:Tahoma,Arial,sans-serif; background:#ece9d8; border:2px solid; border-color:#fff #808080 #808080 #fff; border-radius:0; padding:8px 12px; box-shadow:inset 0 0 0 1px #a0a0a0; font-size:12px; }
.nav-link.active { color:#000; font-weight:700; }
.nav-link span { display:none; }
.header-steam span { color:#000; }
main { max-width:1176px; }
.intro { margin:23px 0 20px; }
.intro h1 { font:700 28px Tahoma,Arial,sans-serif; letter-spacing:0; margin:0 0 10px; }
.intro .eyebrow { margin-bottom:8px; color:#e6eefb; font-size:9px; letter-spacing:.5px; }
.intro-text { color:#e6eefb; font-size:12px; }
.edition { color:#e6eefb; }
.edition>span:first-child { background:#ece9d8; color:#000; border:1px solid #fff; border-radius:0; }
.edition-line b { color:#e6eefb; }
.workspace { gap:12px; grid-template-columns:minmax(0,1.85fr) minmax(310px,1fr); }
.window,dialog { background:#d4d0c8; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; border-radius:0; box-shadow:none; }
.game-window { position:relative; }
.titlebar,.titlebar.secondary { background:linear-gradient(90deg,#0a246a,#a6caf0); padding:6px 8px; min-height:31px; border:1px solid #282828; font:700 13px Tahoma,Arial,sans-serif; color:#fff; text-shadow:none; }
.titlebar .tiny-icon { color:#fff; }
.titlebar button { font-family:Tahoma,Arial,sans-serif; background:#ece9d8; color:#000; border:2px solid; border-color:#fff #808080 #808080 #fff; border-radius:0; height:20px; width:22px; box-shadow:none; }
.window-controls button:last-child,dialog .titlebar>button { background:#d44030; color:#fff; border-color:#ffa0a0 #5a1414 #5a1414 #ffa0a0; }
.menubar { background:#d4d0c8; border-bottom:1px solid #808080; gap:16px; font:12px Tahoma,Arial,sans-serif; padding:9px 11px; }
.menubar button,.menubar button span { color:#000; font-size:11px; }
.web-tag { background:#ece9d8; color:#505050; border-color:#808080; }
.stats-row { background:#d4d0c8; padding:17px 15px; gap:6px; }
.stats-row>div+div { border-color:#808080; padding-left:20px; }
.stats-row strong { color:#000; font:700 26px Tahoma,Arial,sans-serif; letter-spacing:0; }
.stats-row>div:first-child strong { font-size:32px; }
.stat-label,.stat-detail { color:#505050; font-family:Tahoma,Arial,sans-serif; letter-spacing:0; font-size:11px; }
.neuron-stage { height:405px; background:#d4d0c8; border:2px solid; border-color:#808080 #fff #fff #808080; margin:0 9px 10px; overflow:hidden; }
.neuron-stage:before,.orbit,.stage-symbol { display:none; }
.stage-top,.stage-bottom { color:#505050; font-family:Tahoma,Arial,sans-serif; font-size:10px; letter-spacing:0; }
.stage-top>span:last-child { border:1px solid #808080; background:#ece9d8; color:#000; font-size:11px; padding:4px 7px; }
.stage-top i { background:#1c8c46; }
.stage-bottom b { color:#1c8c46; }
.neuron { width:320px; height:320px; top:36px; left:50%; margin-left:-140px; filter:none; border-radius:50%; box-shadow:none; }
.neuron canvas { display:block; width:320px; height:320px; }
.neuron:hover { transform:none; }
.neuron:active,.neuron.pulse { transform:scale(.97); }
.click-hint { bottom:37px; left:43%; right:8px; font:12px Tahoma,Arial,sans-serif; letter-spacing:0; color:#000; }
.click-hint>span { font:11px Tahoma,Arial,sans-serif; color:#505050; }
kbd { background:#ece9d8; border:1px solid #808080; box-shadow:1px 1px #fff; color:#000; }
.clippy-row { position:absolute; left:12px; bottom:58px; width:200px; height:210px; padding:0; background:none; display:block; pointer-events:none; }
.clippy { width:200px; height:210px; min-width:200px; pointer-events:auto; }
.clippy canvas { width:200px; height:210px; display:block; }
.clippy:hover { transform:none; }
.clippy { touch-action:none; cursor:grab; }.clippy.grabbing { cursor:grabbing; }
.clippy-bubble { position:absolute; left:4px; top:-43px; width:215px; background:#ffffe1; border:1px solid #000; border-radius:6px; padding:8px 10px; box-shadow:2px 2px 0 #0002; }
.clippy-bubble:before { background:#ffffe1; border-color:#000; left:95px; top:auto; bottom:-5px; }
.clippy-bubble>span { font:700 10px Tahoma,Arial,sans-serif; color:#000; letter-spacing:0; }
.clippy-bubble i { display:none; }
.clippy-bubble p { font:11px Tahoma,Arial,sans-serif; color:#000; line-height:1.5; }
.clippy-bubble { pointer-events:auto; }
.clippy-bubble>span { display:block; padding-right:22px; }
.clippy-speech-close { position:absolute; top:3px; right:3px; width:22px; height:22px; padding:0; border:0; background:transparent; color:#000; font:18px Tahoma,Arial,sans-serif; line-height:22px; }
.clippy-speech-close:hover { background:#0001; }
#boss-start { position:absolute; bottom:5px; right:0; pointer-events:auto; }
.window-status { color:#505050; background:#d4d0c8; border-top:1px solid #808080; padding:8px; font:10px Tahoma,Arial,sans-serif; letter-spacing:0; }
.window-status>span+span { border-color:#808080; }
.window-status .status-dot { background:#1c8c46; }
.side-stack { gap:12px; }
.main-menu { padding:20px 16px 16px; }
.xp-system-info { margin:0 0 26px; display:grid; gap:9px; font:12px Tahoma,Arial,sans-serif; }
.xp-system-info strong { font-size:18px; margin-bottom:5px; }
.xp-system-info progress { width:100%; height:12px; border:1px solid #808080; }
.xp-system-info small { font-size:11px; color:#505050; }
.xp-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.xp-menu-grid button,.xp-back,.modal-button,.small-button,.upgrade-buy,.rebirth button,.tabs button,.section-heading>button,.achievement,.copy-code,.bottom-cards>button,.full-version a {
  border:2px solid; border-color:#fff #808080 #808080 #fff; background:#ece9d8; color:#000; border-radius:0; box-shadow:inset 0 0 0 1px #a0a0a0; font-family:Tahoma,Arial,sans-serif;
}
.xp-menu-grid button { min-height:50px; padding:8px 3px; font-size:13px; }
.xp-menu-grid .wide-button { grid-column:1/-1; }
button:not(:disabled):active,.xp-menu-grid button:active { border-color:#808080 #fff #fff #808080; }
.xp-menu-grid button:hover,.upgrade-buy:not(:disabled):hover { background:#f4f2e6; }
.xp-back { width:calc(100% - 32px); margin:16px 16px 0; padding:9px; font-size:13px; }
.shop-heading { padding-top:16px; }.shop-heading h2 { font:700 15px Tahoma,Arial,sans-serif; color:#000; }
.shop-heading>span,.upgrade-info small { color:#505050; }
.upgrade { border-color:#aaa; min-height:61px; }
.upgrade-icon { color:#000; background:#ece9d8; border:1px solid #808080; border-radius:0; }
.upgrade-info strong { font:12px Tahoma,Arial,sans-serif; }
.upgrade-info strong span { background:none; color:#505050; font-size:9px; }
.upgrade-info small { font:10px Tahoma,Arial,sans-serif; line-height:1.4; }
.upgrade-buy { padding:10px 7px; font-size:11px; }
.upgrade-buy:disabled { color:#808080; background:#e0e0e0; border-color:#fff #808080 #808080 #fff; }
.rebirth { background:#d4d0c8; border-color:#808080; }.rebirth-icon,.rebirth small { color:#505050; }
.rebirth button:disabled { color:#808080; background:#e0e0e0; }
progress::-webkit-progress-bar { background:#fff; }progress::-webkit-progress-value { background:#1c8c46; }progress::-moz-progress-bar { background:#1c8c46; }
.full-version { border:2px solid; border-color:#fff #404040 #404040 #fff; background:#ece9d8; color:#000; border-radius:0; padding:16px; }
.full-version:after { display:none; }.full-version h2 { font:700 18px Tahoma,Arial,sans-serif; color:#000; letter-spacing:0; }
.full-version p,.promo-footnote,.promo-label { color:#505050; font-family:Tahoma,Arial,sans-serif; letter-spacing:0; }
.full-version a { font-size:12px; padding:11px; }.full-version a:hover { background:#f4f2e6; }
.leaderboard-section { margin-top:28px; }.section-heading h2 { font:700 22px Tahoma,Arial,sans-serif; letter-spacing:0; }
.section-heading .eyebrow { color:#e6eefb; }.section-heading>button { padding:7px 12px; }
.leaderboard-frame { background:#d4d0c8; border:2px solid; border-color:#fff #404040 #404040 #fff; border-radius:0; color:#000; }
.leaderboard-toolbar { background:#d4d0c8; border-color:#808080; }.leaderboard-toolbar>span { color:#505050; font-family:Tahoma,Arial,sans-serif; letter-spacing:0; }
.tabs button { color:#000; font-size:12px; }.tabs button.selected { background:#fff; color:#000; border-color:#808080 #fff #fff #808080; }
th { background:#ece9d8; font:11px Tahoma,Arial,sans-serif; color:#000; letter-spacing:0; border-color:#808080; }
td,td:first-child,td:last-child,td:nth-child(3) { font:12px Tahoma,Arial,sans-serif; color:#000; border-color:#aaa; }
tr.current { background:#eaf1fb; }tr.current td:first-child { color:#000; }td small { color:#0a246a; border-color:#a6caf0; }
.leader-empty { color:#505050; }.your-rank { background:#ece9d8; color:#505050; }.your-rank>span:first-child,.your-rank strong,.your-rank>b { color:#000; }
.bottom-cards>button { color:#000; }.bottom-cards>button:hover { background:#f4f2e6; }.bottom-cards button span:not(.support-heart),.bottom-cards p,.bottom-cards b { color:#505050; }.support-heart { color:#d44030; }
.bottom-cards h3 { font:700 15px Tahoma,Arial,sans-serif; }.archive-card img { filter:none; opacity:1; }
footer { background:#d4d0c8; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; padding:13px 12px; margin-bottom:16px; }
#hidden-404 { color:#505050; }dialog::backdrop { background:#0005; backdrop-filter:none; }
#modal-body h2 { font:700 22px Tahoma,Arial,sans-serif; letter-spacing:0; }#modal-body p,#modal-body .modal-kicker { color:#505050; }
.modal-button.secondary-button { color:#000; background:#ece9d8; }.modal-form input { border:2px solid; border-color:#808080 #fff #fff #808080; background:#fff; color:#000; border-radius:0; }
.modal-form label { color:#505050; }.achievement { opacity:1; background:#e0e0e0; }.achievement.unlocked { background:#ece9d8; border-color:#fff #808080 #808080 #fff; }.achievement>span { color:#505050; }
.copy-code { color:#000; }.toast { background:#ffffe1; color:#000; border:1px solid #000; border-radius:3px; }
.float-iq { color:#0078d7; text-shadow:none; font-family:Tahoma,Arial,sans-serif; }.float-iq.critical { color:#b43c3c; }
/* Keep gameplay feedback active when desktop decorative motion is disabled. */
@media(prefers-reduced-motion:reduce) {
  .float-iq { animation:float-up .9s forwards!important; }
  .neuron { transition:transform .12s!important; }
}
.boss-panel { background:#ece9d8; border-color:#808080; bottom:35px; left:235px; }.boss-panel small { color:#505050; }
body.secret-mode .neuron-stage { background:#d4d0c8; }
.skin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.skin-option { background:#ece9d8; border:2px solid; border-color:#fff #808080 #808080 #fff; color:#000; padding:7px; font-size:11px; }
.skin-option.selected { background:#fff; border-color:#0078d7; }.skin-option img { display:block; width:74px; height:74px; margin:auto; }.skin-option span { display:block; margin:5px 0; line-height:1.3; }
.guest-note { color:#505050; font-size:11px; }.settings-buttons { display:grid; gap:10px; }
.skin-status { display:block; font-size:11px; line-height:1.4; }.skin-option:disabled { opacity:.7; cursor:default; }.skin-option.selected:disabled { opacity:1; }
.wallet { padding:9px; background:#ece9d8; border:1px solid #808080; }.wallet strong { color:#000; }
.shop-tools { padding:0 12px 12px; }.shop-wallet { margin:0 0 10px; font-size:12px; }.shop-tools .xp-back { margin:0; width:100%; }
.terminal-screen #terminal-output { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; }
.terminal-shortcuts { display:flex; flex-wrap:wrap; gap:8px; }.save-key { display:block; width:100%; margin:10px 0; padding:8px; border:2px inset #fff; background:#fff; color:#000; font:12px monospace; }
.terminal-screen #terminal-key { border:1px solid #808080; padding:10px; margin:12px 0; background:#ece9d8; color:#000; }
.language-content { padding:25px; text-align:center; }.language-content h2 { font:700 23px Tahoma,Arial,sans-serif; line-height:1.6; }.language-content h2 span { font-size:18px; }.language-content p,.language-content small { color:#404040; line-height:1.7; }.language-buttons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }.language-buttons .modal-button { padding:14px; margin:0; }
body.embedded .site-header,body.embedded .intro,body.embedded .bottom-cards,body.embedded footer,body.embedded .full-version { display:none; }
body.embedded main { padding:16px; max-width:none; }body.embedded .workspace { margin-top:0; }body.embedded .leaderboard-section { margin-bottom:16px; }
html.embedded-page,body.embedded { overflow:hidden; }
body.embedded dialog { position:fixed; top:var(--embed-visible-top,12px); bottom:auto; margin:0 auto; max-height:var(--embed-visible-height,calc(100vh - 24px)); overflow:auto; }
body.embedded .toasts { top:var(--embed-visible-bottom,calc(100vh - 12px)); bottom:auto; transform:translateY(-100%); }
@media(max-width:720px) { body.embedded main { padding:8px; }.language-content { padding:18px; } }
@media(max-width:900px) { .workspace { grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr); }.neuron { margin-left:-115px; }.clippy-bubble { width:180px; }.clippy-row { left:4px; } }
@media(max-width:720px) {
  .site-header { min-height:60px; margin:8px 8px 0; padding:8px; }.brand { font-size:12px; }.brand-mark { width:30px; height:30px; }.header-steam { padding:7px; font-size:10px; }
  main { padding:0 10px; }.intro { margin:20px 0 18px; }.intro h1 { font-size:25px; }.intro-text { max-width:245px; font-size:11px; }
  .workspace { grid-template-columns:1fr; gap:12px; }.neuron-stage { height:435px; margin:0 5px 6px; }
  .neuron { top:17px; left:50%; margin-left:-145px; width:290px; height:290px; }.neuron canvas { width:290px; height:290px; }
  .clippy-row { left:1px; bottom:48px; width:150px; height:158px; }.clippy,.clippy canvas { width:150px; height:158px; min-width:150px; }
  .clippy-bubble { top:20px; left:145px; width:min(165px,calc(100vw - 200px)); padding:8px; }.clippy-bubble:before { top:35px; bottom:auto; left:-5px; }.clippy-bubble p { font-size:10px; }
  #boss-start { bottom:2px; left:105px; right:auto; font-size:10px; }.click-hint { left:37%; bottom:36px; font-size:10px; }.click-hint>span { font-size:9px; }
  .stage-top,.stage-bottom { left:9px; right:9px; font-size:8px; }.stage-top>span:last-child { font-size:9px; }
  .window-status { font-size:8px; }.stat-label,.stat-detail { font-size:9px; }.stats-row { padding:15px 10px; }.stats-row>div+div { padding-left:12px; }
  .main-menu { padding:16px; }.xp-system-info { margin-bottom:18px; }.xp-menu-grid button { min-height:48px; }.full-version { padding:16px; }
  .boss-panel { left:9px; bottom:172px; right:9px; }.leaderboard-toolbar>span { font-size:8px; }th { font-size:9px; }th:last-child { font-size:8px; }td,td:first-child,td:last-child,td:nth-child(3) { font-size:11px; }
  .bottom-cards { margin-bottom:22px; }footer { margin:0 8px 8px; padding:10px; }.skin-option img { width:62px; height:62px; }
}
