@font-face{font-family:'Born2bSporty FS';src:url('./assets/born2bsporty-fs.otf') format('opentype');font-weight:400;font-display:swap}
:root{
  --font:'Born2bSporty FS','Courier New',monospace;
  --page-bg:#142014;--tile:url('./assets/tile-money-normal.png');--muted:#fff4df;--accent:#31ef2b;
  --square-panel:url('./assets/panel-square-normal.png');--round-panel:url('./assets/panel-normal.png');--wide-panel:url('./assets/panel-wide-normal.png');--sky:url('./assets/sky-day.png');--panel-edge:#aa5738;
  --button:#00d719;--tint-normal:url('#button-green-up');--tint-down:url('#button-green-down');--button-sprite:url('./assets/button-base.png');
  --slider-edge:#5a3c2d;--slider-left:#a55f37;--slider-right:#e58955;--slider-thumb:#965032;--slider-thumb-edge:#693823;
  --needs:#ee4a43;--wants:#40d838;--savings:#42d9dc;
}
html[data-theme=hardcore]{
  --page-bg:#17102b;--tile:url('./assets/tile-money-hardcore.png');--muted:#f3e4ff;--accent:#cf9cff;
  --square-panel:url('./assets/panel-square-hardcore.png');--round-panel:url('./assets/panel-hardcore.png');--wide-panel:url('./assets/panel-wide-hardcore.png');--sky:url('./assets/sky-sunset.png');--panel-edge:#4533a3;
  --slider-edge:#412778;--slider-left:#7050ad;--slider-right:#b28aed;--slider-thumb:#9468d2;--slider-thumb-edge:#412778;
  --needs:#c794ff;--wants:#8c00ff;--savings:#5800a0;color-scheme:dark;
}
body{background:var(--page-bg);isolation:isolate;overflow-x:clip}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:var(--mechanic-tile,var(--tile));background-size:256px 256px;background-repeat:repeat;opacity:.19;image-rendering:pixelated}
html[data-theme=hardcore] body::before{opacity:.17}
html[data-mechanic=jobs]{--mechanic-tile:url('./assets/tile-jobs.png')}
html[data-mechanic=saving]{--mechanic-tile:url('./assets/tile-bank.png')}
html[data-mechanic=loans]{--mechanic-tile:url('./assets/tile-bank.png')}
html[data-mechanic=rent]{--mechanic-tile:var(--tile)}
html[data-mechanic=investing]{--mechanic-tile:url('./assets/tile-stocks.png')}
html[data-mechanic=room]{--mechanic-tile:url('./assets/tile-shop.png')}
html[data-mechanic=shop]{--mechanic-tile:url('./assets/tile-shop.png')}
html[data-mechanic=dad]{--mechanic-tile:var(--tile)}
html[data-mechanic=hardcore]{--mechanic-tile:url('./assets/tile-money-hardcore.png')}
/* All type uses a real black stroke, with the fill painted over it. No shadows. */
body,body *{text-shadow:none;box-shadow:none;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.slider-row input::-webkit-slider-runnable-track,.slider-row input::-webkit-slider-thumb{box-shadow:none}
.slider-row input::-moz-range-track,.slider-row input::-moz-range-thumb{box-shadow:none}
h1{ -webkit-text-stroke-width:4px }h2,h3{ -webkit-text-stroke-width:3px }
small,.eyebrow,.nav-item,.pixel-index,.mode-state,.allocation-label,.slider-account,.calculator-note,.site-footer{ -webkit-text-stroke-width:1.6px }
button,a,.nav-tile{transition:none;animation:none;filter:none}
/* Preserve the entire rounded corner, including the curved inner rim.
   208px assets need a 33px cut. The wide 1159x798 assets need 95px. */
.wood,.square-panel,.panel,.intro-section,.story-chapter{
  border:15px solid transparent;border-image-source:var(--square-panel);border-image-slice:60 fill;border-image-width:15px;border-image-repeat:stretch;background:none;
}
.gallery-caption,.about-figure figcaption,.story-aside>p,.story-chapter blockquote{
  border:25px solid transparent;border-image-source:var(--round-panel);border-image-slice:33 fill;border-image-width:25px;border-image-repeat:stretch;background:none;
}
.gallery-caption,.story-chapter blockquote{border-image-source:var(--wide-panel);border-image-slice:95 fill}
.site-header{border-width:0 0 15px;border-image-width:0 0 15px}
/* No backing rectangle. Nine-slice and tint the entire RGBA sprite so the
   transparent corners remain transparent in both states. */
.sprite-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.game-button,.nav-tile,.gallery-choice,.small-button,.store-button,.screen-button{
  position:relative;isolation:isolate;background:none;border:0;color:#fff;
}
.game-button::before,.nav-tile::before,.gallery-choice::before,.small-button::before,.store-button::before,.screen-button::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:9px solid transparent;border-image-source:var(--button-sprite);border-image-slice:36 fill;border-image-width:9px;border-image-repeat:stretch;filter:var(--button-tint,var(--tint-normal));image-rendering:pixelated;
}
/* Selection persists after release. Active presses remain immediate. */
:is(button,a):is(:active,.is-pressed),.gallery-choice.selected,.nav-item.active{
  --button-sprite:url('./assets/button-pressed.png');--button-tint:var(--tint-down);
}
:is(.game-button,.nav-tile,.gallery-choice,.small-button,.store-button,.screen-button,.nav-item):is(:active,.is-pressed,.selected,.active){cursor:default}
:is(.game-button,.nav-tile,.gallery-choice,.small-button,.store-button,.screen-button,.nav-item):is(:active,.is-pressed,.selected,.active) .button-label,
:is(.gallery-choice,.nav-item):is(:active,.is-pressed,.selected,.active) .nav-label,
:is(.gallery-choice,.nav-item):is(:active,.is-pressed,.selected,.active) .choice-label,
:is(.gallery-choice):is(:active,.is-pressed,.selected,.active) .pixel-index,
:is(.game-button,.gallery-choice,.small-button,.store-button,.screen-button):is(:active,.is-pressed,.selected,.active) span[aria-hidden=true],
:is(.store-button):is(:active,.is-pressed,.selected,.active) > span:last-child > :is(span,small),
:is(.store-button):is(:active,.is-pressed,.selected,.active) .store-mark{display:inline-block;transform:scale(.975);transform-origin:center}
:is(.game-button,.nav-tile,.gallery-choice,.small-button,.store-button,.screen-button,.nav-item):is(:active,.is-pressed,.selected,.active){color:rgb(223,223,223)}
/* Pressed icons keep their original colors and are only made slightly darker. */
:is(.game-button,.nav-tile,.gallery-choice,.small-button,.store-button,.nav-item):is(:active,.is-pressed,.selected,.active) img{transform:scale(.95);filter:brightness(.78);transform-origin:center}
button:disabled{--button-sprite:url('./assets/button-base.png');--button-tint:var(--tint-normal)}
.game-button.orange,.game-button.red,.gallery-choice:nth-child(5n+1),.nav-item[data-section=story]{--button:#df4146;--tint-normal:url('#button-red-up');--tint-down:url('#button-red-down')}
.game-button.yellow,.gallery-choice:nth-child(5n+2),.nav-item[data-section=game]{--button:#d6d22d;--tint-normal:url('#button-yellow-up');--tint-down:url('#button-yellow-down')}
.gallery-choice:nth-child(5n+3),.nav-item[data-section=home]{--button:#d636d9;--tint-normal:url('#button-magenta-up');--tint-down:url('#button-magenta-down')}
.gallery-choice:nth-child(5n+4),.nav-item[data-section=about],.store-button.google{--button:#00d719;--tint-normal:url('#button-green-up');--tint-down:url('#button-green-down')}
.gallery-choice:nth-child(5n+5),.nav-item[data-section=play],.small-button,.store-button.apple,.screen-button{--button:#36d4d4;--tint-normal:url('#button-cyan-up');--tint-down:url('#button-cyan-down')}
.gallery-choice[data-gallery="5"],.gallery-choice[href="#/game/shop"]{--button:#ff7e18;--tint-normal:url('#button-orange-up');--tint-down:url('#button-orange-down')}
html[data-theme=hardcore] :is(.game-button,.nav-item,.gallery-choice,.small-button,.store-button,.screen-button,.skip-link){--button:rgb(140,0,255);--tint-normal:url('#button-purple-up');--tint-down:url('#button-purple-down')}
html[data-theme=hardcore] .skip-link{background:rgb(140,0,255)}
.close-dialog{background:none;border:0;padding:0;width:48px;height:48px}
.close-dialog img{width:48px;height:48px;object-fit:contain}
.close-dialog:is(:active,.is-pressed) img{filter:brightness(.75)}
.store-button:disabled{opacity:1}
.player-body{background-image:linear-gradient(#000b,#000b),var(--tile);background-size:auto,256px 256px}
::selection{background:#8c00ff;color:#fff}
/* Only the switch knob moves when difficulty changes. */
.mode-switch{padding:0;min-height:0;width:202px;min-width:202px;background:none;border:0;gap:13px}
.mode-switch-copy{font-size:15px;flex:1;min-width:0}
.mode-state{font-size:10px}
.switch-track{--switch-travel:30px;appearance:none;display:block;flex:none;width:68px;height:36px;padding:0;border:3px solid #071507;border-radius:24px;background:#08a522;cursor:pointer}
.switch-track .switch-knob{width:34px;height:34px;position:absolute;left:0;top:-2px;max-width:none;transform:translateX(0);pointer-events:none}
.switch-track[aria-checked=true]{background:rgb(140,0,255);border-color:#190a32}
.switch-track[aria-checked=true] .switch-knob{left:0;transform:translateX(var(--switch-travel))}
/* The rod stays still. The line pivots at its tip and ends behind the cash. */
.intro-icon.fishing-scene{position:relative;flex:0 0 260px;width:260px;height:220px;overflow:hidden;background:none;image-rendering:pixelated}
.intro-icon .fishing-rod{position:absolute;left:calc(52% - 90px);top:15px;width:96px;height:96px;max-width:none;z-index:2}
.fishing-rig{position:absolute;top:18px;left:calc(52% - 3px);width:0;height:194px;transform-origin:0 0;will-change:transform;animation:cash-swing 1.9s cubic-bezier(.42,0,.58,1) infinite alternate}
.fishing-line{position:absolute;top:0;left:-1px;width:2px;height:154px;background:#f7f1df}
.intro-icon .fishing-cash{position:absolute;left:-42px;top:110px;width:84px;height:84px;max-width:none;transform-origin:50% 12%;will-change:transform;animation:cash-counter-swing 1.9s cubic-bezier(.42,0,.58,1) infinite alternate}
@keyframes cash-swing{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes cash-counter-swing{from{transform:rotate(10deg)}to{transform:rotate(-10deg)}}
.hero-art{position:relative;isolation:isolate}
.download-section{position:relative;isolation:isolate;overflow:hidden}
.download-section::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#0007,#0007),var(--sky);background-position:center;background-size:cover;image-rendering:pixelated;pointer-events:none}
.hero-rays{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.hero-rays::before{content:'';position:absolute;left:50%;top:46%;width:115%;aspect-ratio:1;background:url('./assets/sunrays.png') center/contain no-repeat;image-rendering:pixelated;opacity:.035;z-index:-1;pointer-events:none;animation:sunrays-turn 90s linear infinite}
@keyframes sunrays-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.story-teaser-art{position:relative;padding:24px 18px;background:none}
/* Two small, occasional doodles; the text and screenshots stay still. */
.mechanic-doodle{position:relative;width:66px;height:66px;margin:0 0 18px;pointer-events:none}
.mechanic-doodle img{width:56px;height:56px}
.basket-doodle img{transform-origin:50% 90%;animation:basket-hop 5s linear infinite}
@keyframes basket-hop{0%,55%,70%,100%{transform:translateY(0) rotate(0)}58%{transform:translateY(0) rotate(-8deg)}62%{transform:translateY(-10px) rotate(6deg)}66%{transform:translateY(0) rotate(-4deg)}68%{transform:translateY(-3px) rotate(2deg)}}
.sleepy-doodle img{transform-origin:50% 80%;animation:energy-wakeup 4s linear infinite}
.sleepy-doodle span{position:absolute;top:-5px;right:1px;font-size:16px;animation:sleep-letters 4s linear infinite}
.sleepy-doodle span:last-child{top:-14px;right:-10px;font-size:12px;animation-delay:.35s}
@keyframes energy-wakeup{0%,30%{transform:translateY(3px) rotate(20deg)}35%{transform:translateY(-8px) rotate(-8deg)}40%,62%{transform:translateY(0) rotate(0)}72%,100%{transform:translateY(3px) rotate(20deg)}}
@keyframes sleep-letters{0%,25%,100%{opacity:1;transform:translateY(0) rotate(0)}35%{opacity:0;transform:translateY(-5px) rotate(-8deg)}52%{opacity:1;transform:translateY(-12px) rotate(8deg)}70%{opacity:0;transform:translateY(-18px) rotate(12deg)}}
html[data-page=not-found] body{background:#000}
html[data-page=not-found] body::before,html[data-page=not-found] .site-header,html[data-page=not-found] .site-footer{display:none}
.not-found-page{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 0 50px;max-width:620px}
.not-found-code{position:relative;z-index:1;font-size:17px;color:#aaa;letter-spacing:5px}
.not-found-eye{width:min(100%,400px);height:auto;image-rendering:auto;margin:-30px 0 -45px}
.not-found-page h1{font-size:clamp(34px,6vw,50px);margin-bottom:18px}
.not-found-page p{max-width:470px;font-size:21px}
.not-found-page .game-button{margin-top:28px;min-width:180px}
@media(max-width:850px){.intro-icon.fishing-scene{flex-basis:200px;width:200px;height:210px}}
@media(max-width:600px){
  .wood,.square-panel,.panel,.intro-section,.story-chapter{border-width:12px;border-image-width:12px}
  .site-header{border-width:0 0 12px;border-image-width:0 0 12px}
  .gallery-caption,.about-figure figcaption,.story-aside>p,.story-chapter blockquote{border-width:21px;border-image-width:21px}
  .nav-tile::before{border-width:7px;border-image-width:7px}
  .mode-switch{width:166px;min-width:166px;gap:9px;padding:0}.mode-switch-copy{font-size:13px}.mode-state{font-size:9px}
  .switch-track{width:64px;height:34px;--switch-travel:28px}.switch-track .switch-knob{width:32px;height:32px}
  .intro-icon.fishing-scene{width:100%;max-width:340px;height:220px;margin:0 auto 26px}
  .gallery-view:has(.basket-doodle){display:flex;flex-direction:column;gap:20px}
  .gallery-view:has(.basket-doodle)>img{width:200px}
  .hero-rays::before{width:110%}
}
@media(max-width:360px){.mode-switch-copy{font-size:11px}.mode-state{font-size:8px}.mode-switch{width:154px;min-width:154px;gap:6px}}
.hero-copy>.hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
.hero-copy>.hero-actions .game-button{min-width:205px;min-height:48px;padding:11px 18px}
@media(max-width:600px){
  .hero-copy>.hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-copy>.hero-actions .game-button{flex:0 0 auto;min-width:205px;min-height:48px;padding:11px 18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}