:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#071f28;color:#fff;--stage-width:min(100vw,calc((100svh - 12px)*941/1672));--unit:calc(var(--stage-width)/941)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#164849,#051b25 80%)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{cursor:default}button:hover:enabled{filter:brightness(1.09)}button:active:enabled{transform:scale(.97)}.ambient{position:fixed;inset:-50px;background:url('/public/assets/background-park.webp') center/cover;filter:blur(36px) brightness(.22) saturate(.7);opacity:.65;pointer-events:none}
#game-layout{position:relative;width:100%;height:100%;container-type:inline-size}
#stage{width:var(--stage-width);height:calc(var(--stage-width)*1672/941);position:relative;isolation:isolate;overflow:hidden;border-radius:16px;box-shadow:0 20px 100px #0008;container-type:inline-size;background:#029ad6}#scenery,#interface-art{position:absolute;inset:0;pointer-events:none}#scenery img,#interface-art img,.art-button{position:absolute;user-select:none;-webkit-user-drag:none}.art-button{border:0;background:transparent;padding:0}.flag-pole{clip-path:polygon(0 0,37% 0,37% 68%,100% 68%,100% 100%,0 100%)}.scenery-art{position:absolute;pointer-events:none;user-select:none}.flag-cloth{transform:none;animation:none}
#balance{position:absolute;left:59%;top:2%;width:30.4%;height:3.3%;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:4px}#balance-value{font-size:4.3cqw;font-weight:900;color:#ffe342;text-shadow:0 2px 0 #7f5007;white-space:nowrap}#scratch-board{position:absolute;left:8.3953%;top:57.9545%;width:83.4219%;height:17.4641%;touch-action:none}#scratch-board canvas{display:block;width:100%!important;height:100%!important;touch-action:none}#scratch-board.locked{pointer-events:none}#max-win{position:absolute;left:30.5%;top:76.04%;height:3.1%;width:39.5%;display:flex;align-items:center;justify-content:center;gap:1.2cqw;background:linear-gradient(90deg,#5b189b,#62149b 50%,#531190);border-radius:9px;color:#e6d6ff;font-size:3.2cqw;font-weight:bold;white-space:nowrap;box-shadow:0 0 8px #651d97}#max-win strong{color:#ffe900;font-size:4cqw}#price-selector{position:absolute;left:27.2%;top:81%;width:45.16%;height:5.62%}#price{position:absolute;left:22%;top:24%;width:57%;height:52%;background:transparent;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:4.4cqw;white-space:nowrap}#minus{left:0;top:0;width:24%;height:100%;border-radius:50%}#plus{right:0;top:0;width:24%;height:100%;border-radius:50%}#price-selector button:disabled{filter:saturate(.35) brightness(.8)}#action{position:absolute;left:15.41%;top:86.6%;width:69.61%;height:8.49%;background:transparent;border:0;padding:0;color:#5a1d00;font-size:4.8cqw;font-weight:900;text-shadow:0 1px #ffdd3b}#action-label{position:absolute;left:8%;top:24%;width:84%;height:48%;display:flex;align-items:center;justify-content:center;background:transparent;white-space:nowrap;border-radius:8px}#action:disabled{filter:brightness(.85)}#result{position:absolute;left:8%;top:80.4%;width:84%;height:5.9%;display:none;align-items:center;justify-content:center;text-align:center;font-size:3.5cqw;font-weight:bold;text-shadow:0 2px 4px #16033b;background:linear-gradient(90deg,transparent,#30104de8 20%,#30104de8 80%,transparent);border-radius:9px;line-height:1.25}#result.win{color:#ffea74}.desktop-note,.desktop-meta{position:fixed;z-index:0;color:#e4f7ed}.desktop-note{left:6%;top:39%;max-width:27vw}.desktop-note h1{font-size:clamp(32px,5vw,82px);margin:14px 0;font-weight:500;letter-spacing:-.07em}.desktop-note p{font-size:17px;line-height:1.7;color:#bed1cc;margin-bottom:46px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#e9cb75;line-height:1.8}.demo-label{font-size:9px;letter-spacing:.16em;color:#a5bcb7;border:1px solid #ffffff26;padding:10px 13px;border-radius:5px}.desktop-meta{right:5%;top:45%;width:19%}.desktop-meta>span{font-size:12px;letter-spacing:.06em;color:#efd68b}.tiny-line{display:block;width:35px;height:1px;background:#d9c88a77;margin:18px 0}.desktop-meta p{color:#bbcec8;line-height:1.8;font-size:14px}.desktop-meta button{background:none;border:0;padding:10px 0;color:#e7d692;font-size:12px}.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:linear-gradient(#05284055,#180d42cc);backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.modal{position:relative;background:linear-gradient(150deg,#542688f5,#261341fa);border:1px solid #dcb957;border-radius:20px;padding:30px 25px;color:#f7edff;box-shadow:0 25px 90px #0008;width:100%;font-size:14px;line-height:1.6}.welcome-card{width:84%;text-align:center;padding:32px 20px}.welcome-card h1{color:#ffdf65;font-size:clamp(34px,11cqw,68px);line-height:1.2;letter-spacing:-.045em;margin:10px 0 15px;text-shadow:0 3px #702742}.welcome-card p{color:#e2cfee;font-size:clamp(12px,3.3cqw,18px);line-height:1.7}.welcome-rule{display:flex;flex-direction:column;gap:2px;margin:24px 0;color:#ffdd75}.welcome-rule b{font-size:20px}.welcome-rule span{font-size:12px;color:#dfc9ee}.gold-button{border:1px solid #fff187;border-radius:12px;background:linear-gradient(#ffdf58,#ffb81d);box-shadow:0 4px 0 #b56610;color:#542802;min-height:46px;width:100%;font-size:15px;font-weight:800;padding:12px 14px}.text-button{background:none;color:#ead7ff;border:0;padding:16px;display:block;width:100%;font-size:13px}.modal small{display:block;font-size:10px;color:#c2a8d2;text-align:center;margin-top:14px}dialog{background:transparent;color:inherit;border:0;padding:0;max-width:min(440px,94vw);width:440px;max-height:90svh;border-radius:20px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#071722b8;backdrop-filter:blur(7px)}dialog .modal{border-radius:20px;padding:28px 25px}.modal h2{font-size:27px;color:#ffe39a;margin:8px 0 18px;line-height:1.2}.modal ol{padding-left:20px}.modal li{padding-left:3px;margin:7px 0}.modal p{margin:14px 0}.close{position:absolute;right:12px;top:9px;font-size:28px;color:#dcc7ed;background:none;border:0;width:34px;height:34px}.coefficients{display:flex;gap:6px;justify-content:space-between;margin:20px 0}.coefficients span{display:grid;place-items:center;background:#ffffff0c;border:1px solid #a780c6;border-radius:7px;flex:1;min-height:38px;color:#ffdf80;font-weight:bold;font-size:15px}.example{background:#ffffff09;padding:10px;border-radius:8px;font-size:12px}details{font-size:12px;color:#dbc5e8;margin:18px 0}summary{cursor:pointer;color:#e8d096}#loading{position:absolute;inset:0;background:#163242;color:#ffe691;display:grid;place-items:center;z-index:20;font-size:14px}#loading[hidden]{display:none}@media(max-width:1100px){.desktop-note,.desktop-meta{display:none}}@media(max-width:600px){:root{--stage-width:min(100vw,calc(100svh*941/1672))}#stage{border-radius:0;box-shadow:none}dialog .modal{font-size:13px;padding:25px 22px}.modal h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}



.control-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}#price-selector,#action-label{background:transparent}

#sound img{position:absolute;inset:0;pointer-events:none;transition:filter 160ms ease}#sound[aria-pressed="false"] img{filter:grayscale(1) brightness(.94)}#sound[aria-pressed="true"] img{filter:none}#sound:active:enabled{transform:scale(.94)}

.sound-muted{position:absolute;left:25%;top:22%;width:50%;height:45%;pointer-events:none;opacity:1;transition:opacity 160ms ease}#sound[aria-pressed="true"] .sound-muted{opacity:0}

#scratch-board{overflow:hidden;border-radius:10px}#purchase-cover{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;text-align:center;border:0;border-radius:0;background:linear-gradient(145deg,#6d36a6,#3f126d);box-shadow:none;color:#f8eaff;font-size:4.4cqw;font-weight:800;line-height:1.45;text-shadow:0 2px 3px #210936;transform-origin:center}#purchase-cover span{position:relative}#purchase-cover[hidden]{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

#sound{isolation:isolate}.sound-muted{z-index:1}


/* The painted buttons live inside the hit targets, including their disabled state. */
#minus .control-art,#plus .control-art{width:102%;left:-1%}
#price-selector button{transition:filter 150ms ease;touch-action:manipulation}
#price-selector button:disabled{filter:grayscale(1) brightness(.94)}
#price-selector button:active:enabled{transform:translateY(2px) scale(.90)}
@media(max-width:900px) and (orientation:portrait){
  :root{--stage-width:min(100vw,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*941/1672));--layout-offset:max(0px,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--stage-width)*1672/941)/2))}
  html,body{width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
  body{height:100dvh}
  .ambient{display:none}
  #stage{width:100vw;height:100dvh;border-radius:0;box-shadow:none;background:#079cc6 url('/public/assets/background-park.webp') center/100% 100% no-repeat}
  #game-layout{position:absolute;width:var(--stage-width);height:calc(var(--stage-width)*1672/941);left:50%;top:calc(50% + (env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))/2);transform:translate(-50%,-50%)}
  #home,#help,#sound,#balance,#topup,#art-home,#art-help,#art-balance{translate:0 calc(-1*var(--layout-offset))}
  #art-ticket-frame,#scratch-board,#max-win,#price-selector,#action,#result,#art-age{translate:0 var(--layout-offset)}
  .desktop-note,.desktop-meta{display:none}
}

#viewport-backdrop{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:900px) and (orientation:portrait){
  #stage{background:#029ad6}
  #viewport-backdrop{display:block}
  #art-background{visibility:hidden}
}
@media(max-width:900px) and (orientation:portrait){
  #welcome{top:calc(-1*var(--layout-offset) - env(safe-area-inset-top,0px));bottom:calc(-1*var(--layout-offset) - env(safe-area-inset-bottom,0px));left:calc((var(--stage-width) - 100vw)/2);right:calc((var(--stage-width) - 100vw)/2)}
}
/* Keep the accessible amount in the DOM; align its painted ink to the plaque. */
#balance-value{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#balance-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
