/* Shared art direction: dark arcade panels, tactile toy assets, readable states. */
:root { --arc-ink:#101522; --arc-panel:#192334; --arc-border:#35445b; --arc-text:#f0f5fb; --arc-muted:#b0bfd3; --arc-mint:#9aefb1; }
body { background:var(--arc-ink); background-image:radial-gradient(ellipse at 48% 38%,#223f3833,transparent 65%); color:var(--arc-text); }
#game { grid-template-columns:250px minmax(0,1fr) 350px; }
.panel { background:linear-gradient(145deg,#1b2638,#141d2c); border-color:var(--arc-border); }
.panel-title { color:#c2d0e2; letter-spacing:1.5px; border-color:#364258; }
.stat-row .stat-label,#big-rps,#lifetime-stats { color:var(--arc-muted); }
.stat-row .stat-value { color:#eef6ff; }
#news-bar { background:#172131; border-bottom:1px solid #354258; }
#news-text { color:#bac9dd; font-style:normal; letter-spacing:.2px; }
#click-area { padding:22px 18px 16px; justify-content:flex-start; gap:8px; min-width:0; overflow-y:auto; }
#click-title { position:static; margin:0 0 2px; flex-shrink:0; }
.click-title-name { font-size:clamp(1.25rem,2.3vw,2rem); white-space:normal; overflow-wrap:anywhere; color:var(--arc-mint); text-shadow:none; letter-spacing:-.6px; }
.click-title-subtitle { font-size:.74rem; line-height:1.45; font-style:normal; color:#b9c7d8; letter-spacing:0; max-width:380px; }
#big-counter { margin:0; flex-shrink:0; }
.big-robux-num { font-size:clamp(2.5rem,4.2vw,3.7rem); line-height:1.1; color:#f0fff4; text-shadow:0 2px 0 #0d1613; overflow-wrap:anywhere; }
#big-rps,#hero-click-power { display:inline-block; font-size:.75rem; background:#233a32; color:#b8f7c9; border:1px solid #426552; padding:3px 10px; border-radius:20px; margin:7px 2px 0; }
#robux-wrap { width:260px; height:260px; margin:0; flex-shrink:0; isolation:isolate; }
#robux-btn { filter:drop-shadow(0 12px 12px #0005); }
#robux-btn:hover { filter:drop-shadow(0 12px 18px #7dec9b33); }
#robux-btn.pressed,#robux-btn:active { transform:translateY(4px) scale(.96); }
.art-sprite { display:block; position:relative; width:100%; height:100%; }
.art-sprite>img,.art-fallback { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.art-sprite>img { opacity:0; }
.art-ready>img { opacity:1; }
.art-ready>.art-fallback { visibility:hidden; }
.art-fallback>svg { width:100%; height:100%; }
#arcade-world { width:min(290px,100%); height:64px; position:relative; flex-shrink:0; margin-top:-20px; pointer-events:none; }
.world-base { position:absolute; inset:32px 6px 0; background:linear-gradient(#728c71,#354f42 45%,#223b31); border-radius:50%; border-top:3px solid #a3c29c; box-shadow:0 8px 12px #0005; }
.world-buildings { position:relative; display:flex; justify-content:center; align-items:flex-end; height:54px; }
.world-building { display:block; width:54px; height:54px; filter:drop-shadow(0 3px 2px #0007); }
#arcade-world[data-stage="workshop"] .world-base { border-top-color:#abdd9c; box-shadow:0 8px 12px #0005,0 0 24px #9be7a21a; }
#arcade-world[data-stage="arcade"] .world-base { background:linear-gradient(#8b8ac0,#465477); border-top-color:#c6bcef; }
#arcade-world.world-prestige .world-base { border-top-color:#ffe09a; box-shadow:0 0 20px #ffda792b; }
#hero-goal { width:min(360px,100%); padding:11px 14px; border:1px solid #435b51; background:linear-gradient(120deg,#233a32,#1c2c29); border-radius:13px; flex-shrink:0; }
#hero-goal[hidden] { display:none; }
.hero-goal-title { font-size:.82rem; font-weight:650; color:#edfff1; }
.hero-goal-status { color:#bed1c8; font-size:.7rem; line-height:1.4; margin-top:5px; overflow-wrap:anywhere; }
.progress-hint-bar { background:#111f21; border-radius:6px; overflow:hidden; height:5px; margin-top:6px; }
.progress-hint-fill { background:linear-gradient(90deg,#60be82,#b7f2bc); border-radius:6px; }
.progress-hint { border:1px solid #34465a; background:#202b3d; border-radius:10px; }
.progress-hint-status { color:#b4c3d6; line-height:1.45; }
#lifetime-stats { margin:4px 0 0; font-size:.67rem; flex-wrap:wrap; gap:12px; justify-content:center; }
#more-games-btn { margin-top:3px; padding:9px 18px; font-size:.7rem; min-height:38px; border-color:#40536a; background:#1c293a; }
.shop-tab { color:#b6c5da; min-height:44px; letter-spacing:.5px; }
.shop-tab.active { color:#e1ffea; border-color:#9aefb1; background:#25372f; }
.buy-btn { min-height:34px; border-radius:8px; }
.building-card { border-radius:13px; border:1px solid #3a485e; background:linear-gradient(120deg,#243247,#1c283a); padding:11px 10px; gap:10px; min-height:82px; box-shadow:0 3px 0 #0c1421; transition:background .12s,border-color .12s,transform .12s; }
.building-card.locked,.building-card.unaffordable { opacity:1; }
.building-card.affordable { background:linear-gradient(110deg,#294237,#20382f); border-color:#639c75; box-shadow:0 3px 0 #101d17; }
.building-card.affordable:hover { background:#304f3e; border-color:#a5edb8; transform:translateY(-1px); }
.building-icon { width:64px; height:64px; flex:0 0 64px; border:0; background:transparent; }
.building-name { color:#eef5ff; font-size:.85rem; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
.building-info { min-width:0; }
.building-cost { color:#c0cbdd; font-size:.83rem; }
.building-card.affordable .building-cost { color:#b6f5c5; }
.building-owned { color:#bacadf; font-size:1.3rem; min-width:24px; }
.building-card.affordable .building-owned { color:#d0f4d7; }
.tier-dot.locked { opacity:1; border-color:#708099; }
#upgrades-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shop-empty { grid-column:1 / -1; color:#bccbe0; font-style:normal; font-size:.9rem; padding:32px 20px; line-height:1.6; text-align:center; width:100%; }
.upgrade-card { border-radius:12px; border-color:#40516b; background:linear-gradient(145deg,#2c3950,#1e293b); overflow:hidden; }
.upgrade-card.unaffordable { opacity:1; }
.upgrade-card-icon { background:radial-gradient(circle,#43547855,transparent); padding:10px; }
.upgrade-price { color:#c7d4e5; padding:7px; font-size:.75rem; }
.upgrade-card.affordable { border-color:#85bb92; }
.upgrade-card.affordable .upgrade-price { color:#bcf6c9; background:#263f33; }
.upgrade-tier-badge { background:#665284; color:#f7eeff; border-radius:0 0 0 8px; }
.achievement-badge { background:linear-gradient(145deg,#2a3548,#182233); border:1px solid #506078; border-radius:10px; padding:6px; }
.achievement-badge.locked { opacity:.7; filter:grayscale(.7); }
.achievement-badge.unlocked { border-color:#d8b869; background:linear-gradient(145deg,#4a422a,#252c2e); box-shadow:inset 0 1px 0 #fbe3a34a; }
/* Reuse one illustration across ranks; frames and studs cost no image bytes. */
.achievement-badge { position:relative; padding:5px 5px 9px; border-radius:12px; --medal:#cf956e; }
.achievement-badge[data-tier="silver"] { --medal:#c1d6e7; }
.achievement-badge[data-tier="gold"] { --medal:#f6cc66; }
.achievement-badge.unlocked { border:2px solid var(--medal); background:radial-gradient(ellipse at top,#ffffff18,transparent 75%),#253347; box-shadow:inset 0 -4px 0 #0004,0 2px 5px #0003; }
.achievement-badge::after { content:""; position:absolute; bottom:3px; left:calc(50% - 2px); width:4px; height:3px; border-radius:1px; background:var(--medal); }
.achievement-badge[data-tier="silver"]::after { left:calc(50% - 5px); box-shadow:6px 0 var(--medal); }
.achievement-badge[data-tier="gold"]::after { box-shadow:-6px 0 var(--medal),6px 0 var(--medal); }
.achievement-badge.locked { opacity:1; filter:none; border:2px solid #435166; background:#1a2433; }
.achievement-badge.locked .art-sprite { filter:grayscale(1); opacity:.38; }
.achievement-badge.locked::after { opacity:.35; }
.achievement-badge:focus-visible { outline:3px solid #beffd0; outline-offset:3px; }
.ach-toast[data-tier="bronze"] { border-color:#cf956e; }
.ach-toast[data-tier="silver"] { border-color:#c1d6e7; }
.ach-toast[data-tier="gold"] { border-color:#f6cc66; }
.beanstalk-card { border-radius:13px; background:linear-gradient(140deg,#343148,#242738); border-color:#696080; }
.beanstalk-card.locked-prestige { opacity:1; }
.beanstalk-card-name { color:#f1e7ff; }
.beanstalk-card-effect,.beanstalk-card-flavor { color:#c3bbd7; }
.prestige-btn { border-radius:13px; background:linear-gradient(110deg,#48405b,#282b43); border-color:#aaa0c5; }
.ach-toast { position:fixed; inset-inline-start:16px; bottom:48px; z-index:1500; width:min(310px,calc(100vw - 32px)); padding:14px; display:flex; gap:12px; align-items:center; background:#26352c; color:#f0fff3; border:1px solid #aec981; border-radius:15px; box-shadow:0 12px 28px #0007; pointer-events:none; }
.ach-toast-icon { width:42px; height:42px; flex-shrink:0; }
.ach-toast-label { color:#d6d99f; font-size:.65rem; letter-spacing:.5px; }
.ach-toast-name { font-size:.88rem; font-weight:700; }
.ach-toast-desc { color:#c1d0c6; font-size:.72rem; line-height:1.4; }
.golden-robux { filter:drop-shadow(0 0 12px #ffd77766); }
.settings-btn,.modal-btn,.upgrade-filter-btn { border-radius:9px; }
.modal { background:#1b2638; border-color:#4e627d; border-radius:18px; }
button:focus-visible,[role="button"]:focus-visible { outline:3px solid #beffd0; outline-offset:3px; }
#brand-footer { background:#141e2d; border-color:#39465a; color:#b3c0d1; }
[dir="rtl"] #stats-panel { border-right:0; border-left:1px solid var(--arc-border); }
[dir="rtl"] #shop-panel { border-left:0; border-right:1px solid var(--arc-border); }
@media(min-width:981px) and (max-height:760px) {
  #click-area { gap:5px; padding-top:12px; }
  #robux-wrap { width:220px; height:220px; }
  .big-robux-num { font-size:2.7rem; }
  #arcade-world { height:54px; }
}
@media(max-width:1100px) and (min-width:981px) { #game { grid-template-columns:220px minmax(0,1fr) 310px; } .building-icon { width:54px;height:54px;flex-basis:54px; } }
@media(max-width:980px) {
  #game { display:block; }
  #click-area { padding:22px 16px 24px; min-height:calc(100dvh - 146px); gap:9px; overflow:visible; }
  .click-title-name { font-size:1.5rem; }
  .click-title-subtitle { font-size:.7rem; }
  .big-robux-num { font-size:2.7rem; }
  #robux-wrap { width:220px; height:220px; margin:0; }
  #arcade-world { margin-top:-17px; }
  #hero-goal { max-width:360px; }
  #lifetime-stats { font-size:.67rem; margin:3px 0; }
  #shop-panel,#stats-panel { padding:14px; }
  .building-icon { width:64px; height:64px; flex-basis:64px; }
  .building-name { font-size:.92rem; }
  .shop-sticky-header { background:#182334; }
  #upgrades-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ach-toast { inset-inline-start:12px; bottom:calc(126px + env(safe-area-inset-bottom,0px)); width:calc(100vw - 24px); max-width:400px; padding:10px 12px; }
  .ach-toast-desc { display:none; }
  .ach-toast-icon { width:32px;height:32px; }
  #mobile-tab-bar { background:#182334; border-color:#4c6077; }
  .mobile-tab.active { background:#253d32; color:#b7f6c7; }
  .upgrade-filter-btn { min-height:36px; }
  .settings-btn { min-height:44px; }
}
@media(max-width:400px) { #upgrades-list { grid-template-columns:repeat(3,minmax(0,1fr)); } #robux-wrap { width:200px;height:200px; } }
@media(prefers-reduced-motion:reduce) { #robux-btn,.building-card { transition:none; } #robux-btn.pressed { transform:none; } .world-building,.building-card.bought { animation:none; } }

/* A small toy plaza: geometry and stage decorations add no texture downloads. */
#arcade-world { width:min(330px,100%); height:104px; margin-top:-16px; }
.world-base { inset:auto 9px 12px; height:44px; border-radius:9px; transform:skewX(-12deg); border:2px solid #87b780; border-bottom:7px solid #314e38; background:repeating-linear-gradient(90deg,transparent 0 28px,#b7e5a424 28px 30px),repeating-linear-gradient(0deg,#5c8054 0 13px,#abc69866 13px 15px); box-shadow:0 8px 0 #243529,0 13px 12px #0005; }
.world-path { position:absolute; bottom:17px; left:28%; width:44%; height:12px; transform:skewX(-12deg); background:repeating-linear-gradient(90deg,#b5b29b 0 17px,#687663 17px 20px); border-bottom:3px solid #6a7461; border-radius:2px; }
.world-buildings { position:absolute; inset:auto 22px 28px; height:56px; }
.world-building { flex:0 1 54px; min-width:0; }
.world-hedge { position:absolute; bottom:30px; width:22px; height:18px; background:#60af60; border-top:5px solid #93d575; border-right:5px solid #397347; border-bottom:5px solid #304c31; border-radius:3px; }
.hedge-left { left:12px; }.hedge-right { right:12px; }
.world-lamp { display:none; position:absolute; width:5px; height:30px; bottom:46px; background:#617580; border-right:2px solid #2e4653; }
.lamp-left { left:27px; }.lamp-right { right:27px; }
.world-lamp::before { content:""; position:absolute; width:12px; height:11px; left:-4px; top:-4px; background:#deefb1; border:2px solid #4e6267; border-radius:3px; }
#arcade-world[data-stage="workshop"] .world-lamp,#arcade-world[data-stage="arcade"] .world-lamp { display:block; }
#arcade-world[data-stage="workshop"] .world-base { border-top-color:#b4db9b; }
#arcade-world[data-stage="arcade"] .world-base { background:repeating-linear-gradient(90deg,transparent 0 28px,#c4bbff33 28px 30px),repeating-linear-gradient(0deg,#616592 0 13px,#b7acf366 13px 15px); border-color:#a8a1d9; border-bottom-color:#414464; }
#arcade-world[data-stage="arcade"] .world-lamp::before { background:#a5f5d9; box-shadow:0 0 10px #7dffc980; }
.world-garden { display:none; position:absolute; bottom:26px; left:-1px; width:86px; height:86px; z-index:1; }
#arcade-world.world-prestige .world-garden { display:block; }
#arcade-world.world-prestige .world-buildings { left:73px; right:20px; }
#arcade-world.world-prestige .world-building { height:46px; }
#arcade-world.world-prestige .hedge-left,#arcade-world.world-prestige .lamp-left { display:none; }
#arcade-world.world-prestige .world-base { border-color:#dfbd66; border-bottom-color:#76603a; box-shadow:0 8px 0 #493e29,0 0 18px #ffdf7526; }
#arcade-world.world-prestige[data-garden="canopy"] .world-garden { width:104px; height:104px; left:-7px; }
.prestige-btn { display:grid; grid-template-columns:64px minmax(0,1fr); gap:4px 8px; padding:12px; background:linear-gradient(130deg,#284a37,#172b29); border-color:#c3ab65; }
.prestige-tree { width:64px; height:80px; grid-row:1/3; }
.prestige-btn-label { align-self:end; text-align:start; line-height:1.45; }
.prestige-btn-yield { grid-column:2; align-self:start; white-space:normal; overflow-wrap:anywhere; text-align:start; font-size:.9rem; }
.prestige-token { display:inline-block; vertical-align:middle; width:26px; height:26px; margin-inline-start:8px; }
.beanstalk-card { background:linear-gradient(140deg,#2c4039,#1d2c2b); border-color:#58755f; }
.beanstalk-card.affordable { border-color:#d5bb6b; }
.beanstalk-card.owned { border-color:#80bc8b; }
.beanstalk-card-icon { width:44px; height:44px; flex:0 0 44px; }
@media(min-width:981px) and (max-height:760px) { #arcade-world { height:88px; } }