/* A single thumb-friendly play surface, even on a wide screen. */
:root{--accent:#7cf2d0;--ink:#eef5ff;--muted:#a5b5ca;--note-image:url('assets/banknote-50000.png')}
body{background:#080e18;color:var(--ink)}body header,body.counting header{height:60px;max-width:520px;margin:auto;padding:10px 20px;border-color:#ffffff0c}.brand{font-size:18px}.brand span{background:var(--accent);color:#10261e}.small{display:none}
body main,body.counting main{display:flex;flex-direction:column;max-width:520px;margin:auto;padding:0;gap:0}body .play,body.counting .play{background:#101827;border:0;border-radius:0;min-height:0;box-shadow:none;overflow:visible}body aside{padding:18px 20px;background:#101827;order:2}aside .eyebrow,aside .intro{display:none}aside h1{font-size:22px;margin:0 0 20px;letter-spacing:-.5px}body.counting aside{display:none}.privacy{font-size:12px}input,select{background:#1b293d;border-color:#3c4d65;color:var(--ink);min-height:46px}.primary,.count-bottom button{background:var(--accent)}
body .toolbar,body.counting .toolbar,body.game .toolbar{padding:8px 16px 12px;display:flex;flex-wrap:wrap;gap:8px}.modes{width:100%;padding:4px;background:#080f1d;border-radius:14px}.modes button{flex:1;min-height:44px;font-size:14px!important;padding:8px!important;border-radius:10px}.modes button[aria-pressed=true]{background:#26364c;color:#fff}.toolbar .text-button{margin-left:auto;min-height:36px;color:var(--muted);font-size:14px!important}.stage-head,body.counting .stage-head{padding:14px 20px}.stage-head h2,body.counting .stage-head h2{font-size:26px}.pill{font-size:12px}
body #world,body.counting #world,body.game #world{height:max(490px,calc(100svh - 210px));min-height:490px;background:radial-gradient(ellipse at 50% 40%,#243649,#101827 73%);border-top:0}body:not(.counting) #world{height:350px;min-height:350px}body #countPanel{padding:20px;overflow:hidden}body.counting #note,body.counting #countPanel .stack-note,body.counting #countPanel .counted-sheet{width:88%;height:auto;aspect-ratio:2.15;margin-left:-44%;margin-top:0;top:37%;padding:0;transform-origin:35% 65%}
body.game #note,body.game #countPanel .stack-note,body.game #countPanel .counted-sheet{top:34%}#note,#countPanel .stack-note,#countPanel .counted-sheet,body.counting #note,body.counting #countPanel .stack-note,body.counting #countPanel .counted-sheet{background-image:var(--note-image)}.paper-strip-window .paper-copy{aspect-ratio:auto!important}
#gameHud{top:8px;left:22px;right:22px;gap:16px}#gameHud span{font-size:14px;color:var(--muted)}#gameHud strong{display:block;margin:6px 0 0;font-size:30px;color:#fff}#gameHud span:last-child{text-align:right}#gameTools{bottom:20px;left:20px;right:20px}#gameTools p{font-size:16px;line-height:1.65;margin:0 0 16px}#gameTools small{font-size:14px;color:var(--muted)}#gameTools>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}#gameTools button{min-height:54px;background:var(--accent);color:#10261e;border:0;font-size:15px;padding:13px 8px}#gameTools #gameTap{grid-column:1/3;grid-row:2;min-height:44px;background:#1d2c40;color:var(--ink);font-weight:500}#gameTools #gameRoll{background:#30445c;color:#fff}
.count-stats strong{font-size:20px}#complete{color:var(--muted);font-size:14px;padding:0 16px}#bundleProgress{top:86px;color:var(--muted);font-size:14px}#countProgress{top:112px}.count-bottom{left:18px;right:18px;gap:8px}.count-bottom select{min-width:0;width:55%;font-size:14px}.count-bottom button{font-size:14px;padding:10px}footer{background:#101827;color:var(--muted);padding:16px 20px}
#gameResult,#wrapDialog,dialog{background:#142238;color:#eef5ff;border:1px solid #3d536d;border-radius:24px;width:min(94vw,480px);max-height:90dvh;overflow:auto;padding:24px}#gameFailure,#recordNotice,#gameRecords{color:var(--muted)}#finalScore{color:var(--accent);font-size:36px}#gameRetry,#finishWrap,#wrapChoices button{background:var(--accent);color:#10261e;min-height:48px;border:0}#gameWrap{background:#101827f5;color:#fff}#gameWrap h2{font-size:26px}.wrap-cash,.saved-cash{background-image:var(--note-image)}.wrap-preview.roll .wrap-cash,.saved-cash.roll{background-image:linear-gradient(90deg,#0008,transparent 35%,#fff4 55%,#0009),var(--note-image)}button:active:not(:disabled){filter:brightness(.91)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-color:var(--accent)}
@media(min-width:600px){body{padding:24px 0}body header{border:1px solid #26354a;border-bottom:0;border-radius:28px 28px 0 0}body main{border:1px solid #26354a;border-top:0;border-radius:0 0 28px 28px;overflow:hidden}body #world,body.counting #world,body.game #world{height:560px;min-height:560px}body:not(.counting) #world{height:360px;min-height:360px}}
@media(max-height:700px) and (max-width:599px){body #world,body.counting #world,body.game #world{min-height:460px}body.game #note,body.game #countPanel .stack-note{top:30%}}
.header-actions{display:flex;gap:6px}.header-actions button{font-size:12px;background:transparent;color:#c5d3e6;border:1px solid #3a4b62;border-radius:9px;padding:8px;min-height:40px}.header-actions button[aria-pressed=true]{color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#playSettings{display:flex;gap:8px;align-items:center;padding:0 18px 10px}#currency{flex:1;min-width:0;font-size:14px;border-radius:12px}#hapticToggle{font-size:12px;border:0;background:none;color:var(--muted);padding:4px;min-height:44px}#reset{font-size:0!important;min-width:40px;min-height:44px;margin:0}#reset:before{content:'↻';font-size:25px}#challengeTabs{display:flex;padding:0 18px;gap:8px}#challengeTabs[hidden],#challengeCaption[hidden],#friendBanner[hidden]{display:none}#challengeTabs button{flex:1;border:1px solid #3b4c63;border-radius:10px;background:transparent;color:#a5b5ca;min-height:40px;font-size:14px}#challengeTabs button[aria-pressed=true]{background:#213c40;border-color:var(--accent);color:var(--accent)}#challengeCaption,#friendBanner{font-size:12px;line-height:1.6;color:var(--muted);padding:0 18px;margin:10px 0}#friendBanner{color:var(--accent)}#gestureHint{position:absolute;top:67%;left:0;right:0;text-align:center;color:var(--muted);font-size:14px;pointer-events:none}body.game #gestureHint{top:65%}body:not(.game) #gestureHint{display:none}
body.game #world{height:calc(100svh - 262px);min-height:450px}body.counting:not(.game) #world{height:calc(100svh - 244px);min-height:440px}#gameTools{bottom:max(16px,env(safe-area-inset-bottom))}#shareCard{width:100%;height:auto;max-height:280px;object-fit:contain;border-radius:14px;margin:16px 0;touch-action:auto}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-actions button,.secondary{background:#263b54;border:1px solid #48627d;border-radius:10px;color:#f0f5ff;padding:12px;min-height:46px;font-size:14px}#shareResult{grid-column:1/3;background:var(--accent);border:0;color:#10261e;font-weight:700}#shareStatus,#resultChallenge,#friendResult{font-size:14px;line-height:1.6;color:var(--muted)}#friendResult{color:var(--accent)}#shareStatus input{font-size:14px;letter-spacing:0}#gameResult .secondary{width:100%;margin-top:8px}#recordsDialog p,#allRecords{color:var(--muted);font-size:14px;line-height:1.8}#gameResult h2{margin-top:0}#finalScore{margin:14px 0}
@media(min-width:600px){body.game #world,body.counting:not(.game) #world{height:540px}}
@media(max-width:350px){body header{padding:10px 14px}.brand{font-size:16px;gap:6px}.header-actions{gap:4px}.header-actions button{padding:6px}.brand span{width:28px;height:28px}#gameTools{left:14px;right:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0s!important;transition-duration:0s!important}}
/* Keep the full banknote above the thumb controls on compact screens. */
body.game #world{min-height:500px}body.game #note,body.game #countPanel .stack-note,body.game #countPanel .counted-sheet{top:116px;width:min(88%,420px);margin-left:calc(min(88%,420px)/-2)}body.game #gestureHint{top:82px;margin:0;font-size:12px}#gameHud strong{font-size:28px}#gameTools p{line-height:1.5}body.game #gameTools{bottom:max(16px,env(safe-area-inset-bottom))}#countProgress,body.counting #countProgress{top:110px}body.counting #complete{font-size:14px;bottom:4px}.paper-strip-window .paper-copy{margin-left:0!important}
/* Flow-based game layout grows with text rather than overlapping fixed coordinates. */
#noteStage{position:absolute;inset:0;perspective:1000px;isolation:isolate;pointer-events:none}#noteStage #note{pointer-events:auto}body.game #countPanel{display:flex;flex-direction:column;gap:14px;padding:8px 20px max(18px,env(safe-area-inset-bottom));overflow:visible}body.game #gameHud{position:static;order:0;flex-shrink:0}body.game #gestureHint{position:static;order:1;margin:0;font-size:14px;flex-shrink:0}body.game #noteStage{position:relative;inset:auto;order:2;flex:1 0 220px;width:100%;min-width:0}body.game #gameTools{position:static;order:3;flex-shrink:0;width:100%}body.game #note,body.game #countPanel .stack-note,body.game #countPanel .counted-sheet{width:min(95%,420px);margin-left:calc(min(95%,420px)/-2);top:50%;margin-top:calc(min(95%,420px)/-4.3)}body.game #world{height:auto;min-height:calc(100svh - 262px);overflow:hidden}body.game #countPanel{position:relative;inset:auto;min-height:inherit}body.game #gameTools small{display:inline-block}body.game #gameTools>div{width:100%}.header-actions button,#hapticToggle{font-size:14px;min-height:44px}#challengeCaption,#friendBanner{font-size:14px}.brand{white-space:nowrap}body header,body.counting header{height:auto;min-height:60px;flex-wrap:wrap;gap:8px}.header-actions{margin-left:auto}body.game #noteStage .paper-copy{margin-top:0!important}#gameWrap{border-radius:0}
@media(min-width:600px){body.game #world{min-height:540px}}
#gameTools #gameFinish{grid-column:1/3;grid-row:3;background:transparent;color:var(--muted);font-size:14px;font-weight:400;min-height:44px;padding:8px;border:1px solid #34465e}#gameTools #gameFinish:disabled{opacity:.45}#gameTools>div{row-gap:8px}
#gameTools #gameTap{grid-column:1;grid-row:2}#gameTools #gameFinish{grid-column:2;grid-row:2}
#assetStatus{margin:0 18px 12px;padding:12px;border:1px solid #405771;border-radius:12px;color:var(--muted);font-size:14px;line-height:1.6}#assetStatus[hidden],#retryAsset[hidden]{display:none}#retryAsset{display:block;min-height:44px;padding:8px 12px;margin-top:8px;background:#263b54;border:1px solid #52718c;color:#fff;border-radius:8px}.asset-pending #note,.asset-pending #noteStack{visibility:hidden}.asset-pending #canvas{opacity:.25}

/* The physics canvas is a background, never part of the game layout. */
#world > #canvas{position:absolute;inset:0;width:100%;height:100%}
#world > #canvas[hidden]{display:none}

/* Money is the main screen; configuration lives in its own sheet. */
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.settings-heading h2{margin:0;font-size:24px}
#settingsDialog button{min-height:44px}
#closeSettings{background:#263b54;color:var(--ink);border:1px solid #48627d;border-radius:10px;padding:8px 14px}
.settings-help{font-size:14px;line-height:1.6;color:var(--muted)}
#settingsDialog h3{font-size:16px;margin:24px 0 12px}
body #settingsDialog .toolbar,body #settingsDialog #playSettings{padding:0;margin:0 0 12px}
#settingsDialog .modes{min-width:0}
#settingsDialog #challengeTabs{padding:0;margin-top:20px}
#settingsDialog #challengeCaption,#settingsDialog #friendBanner{padding:0}
.sound-setting{margin:8px 0 16px}
#settingsDialog #soundToggle{background:#263b54;color:var(--ink);border:1px solid #48627d;border-radius:10px;padding:8px 14px}
body #settingsDialog aside{display:block;padding:20px 0;background:none}
body.game #settingsDialog aside{display:none}
#settingsDialog aside h1{font-size:20px}
#returnToMoney{margin-top:20px}
body.game #world{min-height:calc(100svh - 76px)}
body.counting:not(.game) #world{height:calc(100svh - 160px)}
body:not(.counting) #world{height:calc(100svh - 190px);min-height:350px}
body.game #countPanel{gap:12px}
@media(min-width:600px){body.game #world{min-height:640px}body.counting:not(.game) #world{height:620px}body:not(.counting) #world{height:580px}}

#countPile{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.pile-sheet,.pile-bundle{position:absolute;display:block;background:var(--note-image) center/100% 100%;border:1px solid #ab936a;box-shadow:1px 3px 5px #0006;transform-origin:top left}
.pile-bundle{width:110px;height:52px;box-shadow:0 3px #c5bb9d,0 5px #807660,0 8px 9px #0006;transform:rotate(-5deg);transition:right .35s,bottom .35s}
.pile-band{position:absolute;inset:-2px 39%;background:#f4edda;border:1px solid #d2c8af}
.pile-bundle.roll{width:90px;border-radius:45%;background-image:linear-gradient(90deg,#0007,transparent,#fff5,#0008),var(--note-image)}
.pile-rubber{position:absolute;inset:-2px 44%;border:3px solid #ac7144;border-radius:45%;background:#bb8550}
body.game #noteStage{min-height:300px;flex-basis:300px}
body.game #note,body.game #countPanel .stack-note,body.game #countPanel .counted-sheet{top:35%}

#countPile .pile-sheet,#countPile .pile-bundle{pointer-events:auto;touch-action:none;cursor:grab}
#countPile .pile-sheet:active,#countPile .pile-bundle:active{cursor:grabbing}

/* Reserve vertical room for a visibly growing, full-width cash pile. */
body.game #noteStage{min-height:380px;flex-basis:380px}
body.game #note,body.game #countPanel .stack-note,body.game #countPanel .counted-sheet{top:26%}

/* Low-angle paper edges, with a glimpse of the printed top surface. */
#countPile .pile-sheet{border:0;border-bottom:1px solid #a59570;background-image:var(--note-image);background-size:100% 100%;box-shadow:0 1px #ece4cd,0 2px 2px #0005}
#countPile .pile-sheet:after{content:'';position:absolute;inset:-12px 0;touch-action:none}

#startDialog{padding:26px;max-width:460px}#startDialog h1{font-size:28px;line-height:1.4;margin:12px 0}#startDialog>p{font-size:14px;color:var(--muted);line-height:1.65}#startDialog .eyebrow{display:block}#startDialog .start-choice{width:100%;text-align:left;padding:20px;margin:10px 0;border:1px solid #48627d;border-radius:16px;background:#24364c;color:var(--ink)}.start-choice strong,.start-choice span{display:block}.start-choice strong{font-size:19px;margin-bottom:8px}.start-choice span{font-size:14px;line-height:1.6;color:#c6d3e5}#startDialog #startChallenge{border-color:var(--accent)}#startDialog .secondary{width:100%;margin-top:12px}#startDialog a{display:inline-block;min-height:44px;color:var(--accent);font-size:14px;padding:12px 0}#openStart{white-space:nowrap}.header-actions{flex-wrap:wrap}.header-actions button{font-size:13px}body header .brand{font-size:16px}
