/* Gram Bazar Run - Araf Studio Games */
:root{
  --ink:#24160f;
  --yellow:#ffd43b;
  --green:#4cc13a;
  --blue:#2fb1ff;
  --red:#ff5a4f;
  --sky:#8fdcff;
  --paddy:#7ed957;
  --fh:'Luckiest Guy','Fredoka','Comic Sans MS','Chalkboard SE',cursive;
  --fb:'Fredoka','Baloo Da 2','Comic Sans MS','Chalkboard SE',sans-serif;
  --fn:'Baloo Da 2','Noto Sans Bengali','Kalpurush','Nirmala UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#0f3320;overflow:hidden;font-family:var(--fb);color:var(--ink);touch-action:none;overscroll-behavior:none}
.hidden{display:none!important}

#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;overflow:hidden;background:var(--sky);box-shadow:0 0 0 4000px #0f3320}
#cv{position:absolute;left:0;top:0;width:1280px;height:720px;display:block}
#ui{position:absolute;inset:0;pointer-events:none}
#ui button,#ui input,#ui a,.modal .card,#tasks{pointer-events:auto}

/* ---------- shared bits ---------- */
.panel{background:#fff;border:5px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:12px 18px}
.chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:5px 18px 5px 8px;font-size:30px;font-weight:700;box-shadow:0 5px 0 var(--ink);min-height:52px}
.coinIcon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink);font-family:var(--fn);font-weight:800;font-size:26px;line-height:1;padding-bottom:4px;color:#7a4400}
.round{width:56px;height:56px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-family:var(--fh);font-size:26px;color:var(--ink);cursor:pointer;padding:0}
.round:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.round.off{background:#c9c9c9}

.btn{font-family:var(--fh);font-size:36px;letter-spacing:1px;color:#fff;background:var(--green);border:5px solid var(--ink);border-radius:22px;padding:10px 40px 14px;box-shadow:0 8px 0 var(--ink);cursor:pointer;
  text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--ink)}
.btn.big{font-size:52px;padding:12px 60px 18px}
.btn.blue{background:var(--blue)}
.btn.red{background:var(--red)}
.btn.yellow{background:var(--yellow);color:#fff}

.logo{text-align:center;position:relative}
.logo-top{font-family:var(--fh);font-size:118px;line-height:1;color:var(--yellow);-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;text-shadow:0 10px 0 var(--ink);letter-spacing:2px}
.logo-ribbon{display:inline-block;margin-top:6px;font-family:var(--fh);font-size:44px;color:#fff;background:var(--red);border:5px solid var(--ink);border-radius:14px;padding:2px 34px 8px;transform:rotate(-3deg);box-shadow:0 6px 0 var(--ink);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.logo-bn{font-family:var(--fn);font-weight:800;font-size:38px;color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;margin-top:10px}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.screen button{pointer-events:auto}

/* ---------- loading ---------- */
#loading{background:linear-gradient(#5cc8ff 0%,#b8ecff 55%,#7ed957 55.2%,#4fb043 100%);z-index:30;pointer-events:auto}
.load-sun{position:absolute;right:170px;top:70px;width:150px;height:150px;border-radius:50%;background:#ffe066;border:6px solid var(--ink);box-shadow:0 0 0 22px rgba(255,224,102,.35)}
.load-hills{position:absolute;left:0;right:0;top:330px;height:120px;background:
  radial-gradient(ellipse 260px 90px at 12% 100%,#3f9d4d 98%,transparent 100%),
  radial-gradient(ellipse 320px 110px at 40% 100%,#4bb05a 98%,transparent 100%),
  radial-gradient(ellipse 280px 90px at 72% 100%,#3f9d4d 98%,transparent 100%),
  radial-gradient(ellipse 240px 80px at 96% 100%,#4bb05a 98%,transparent 100%)}
.load-box{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:760px}
.bar{position:relative;height:50px;background:#fff;border:6px solid var(--ink);border-radius:30px;box-shadow:0 6px 0 var(--ink);overflow:visible}
.bar .fill{height:100%;width:0%;background:repeating-linear-gradient(45deg,#ffd43b 0 20px,#ffb800 20px 40px);border-radius:22px;background-size:56px 56px;animation:stripe 1s linear infinite}
.bar-coin{position:absolute;top:-16px;left:0;width:54px;height:54px;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);font-family:var(--fn);font-weight:800;font-size:36px;text-align:center;line-height:44px;color:#7a4400;transform:translateX(-50%);animation:spin 1s linear infinite}
@keyframes stripe{to{background-position:56px 0}}
@keyframes spin{0%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(.2)}100%{transform:translateX(-50%) scaleX(1)}}
.load-row{display:flex;justify-content:space-between;margin-top:16px;font-size:26px;font-weight:600;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.load-credit{position:absolute;bottom:22px;font-family:var(--fh);font-size:26px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
#loading .logo{margin-top:-120px}

/* ---------- menu ---------- */
#menu{justify-content:flex-start;padding-top:38px;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,40,10,.32) 100%)}
.menu-btns{display:flex;flex-direction:column;gap:22px;align-items:center;margin-top:34px}
.menu-btns .btn{min-width:400px}
.menu-full{position:absolute;right:24px;top:22px;pointer-events:auto}
.menu-credit{position:absolute;bottom:18px;font-family:var(--fh);font-size:24px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}

/* ---------- HUD ---------- */
#hud,#rhud{position:absolute;left:20px;top:18px}
#tasks{width:340px;padding:8px 14px 10px}
.panel-title{font-family:var(--fh);font-size:30px;color:var(--red);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;margin-bottom:4px}
#taskList{list-style:none;margin:0;padding:0}
#taskList li{display:flex;align-items:flex-start;gap:10px;padding:4px 8px;border-radius:12px;font-size:20px;font-weight:600;line-height:1.15;opacity:.55}
#taskList li small{display:block;font-size:16px;font-weight:500;opacity:.8}
#taskList li .box{flex:0 0 26px;height:26px;margin-top:1px;border:4px solid var(--ink);border-radius:8px;background:#fff;position:relative}
#taskList li:not(.cur) small{display:none}
#taskList li.cur{opacity:1;background:var(--yellow);border:3px solid var(--ink);padding:5px 6px}
#taskList li.done{opacity:.9}
#taskList li.done .box{background:var(--green)}
#taskList li.done .box::after{content:'';position:absolute;left:5px;top:0;width:8px;height:15px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
#taskList li.done span.t{text-decoration:line-through}

#rhud{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#hearts{padding:5px 14px;gap:8px}
.heart{width:36px;height:34px;position:relative;display:inline-block}
.heart svg{width:100%;height:100%}
.heart.lost{filter:grayscale(1) brightness(1.7);opacity:.6}
#goalBox{font-size:24px;font-weight:600;padding:6px 16px}
#slots{display:inline-flex;gap:6px;margin-left:6px}
.slot{width:32px;height:32px;border-radius:50%;border:4px solid var(--ink);background:#ddd;position:relative}
.slot.on{background:var(--c,#f5c26b);animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
.slot.on::after{content:'';position:absolute;left:6px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:8px 0 0 var(--ink)}
@keyframes pop{0%{transform:scale(.2)}100%{transform:scale(1)}}

#topRight{position:absolute;top:18px;right:20px;display:flex;gap:12px;align-items:center}
#moneyVal,#rcoinVal{min-width:54px;text-align:left}

#bigBtn{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:64px;animation:bigpulse 1.1s ease-in-out infinite}
#bigBtn:hover,#bigBtn:active{animation:none}
@keyframes bigpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

#choices{position:absolute;left:0;right:0;bottom:34px;display:flex;gap:26px;justify-content:center;padding:0 30px}
.choice{width:560px;text-align:left;background:#fff;border:5px solid var(--ink);border-radius:22px;box-shadow:0 7px 0 var(--ink);padding:12px 20px 12px;cursor:pointer;font-family:var(--fb);color:var(--ink);transition:transform .08s,box-shadow .08s,background .1s;animation:rise .45s cubic-bezier(.2,1.4,.4,1) both}
.choice:nth-child(2){animation-delay:.1s}
.choice:hover{background:var(--yellow);transform:translateY(-3px);box-shadow:0 10px 0 var(--ink)}
.choice:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.choice .en{display:block;font-size:29px;font-weight:700;line-height:1.1}
.choice .bn{display:block;font-family:var(--fn);font-size:23px;font-weight:500;margin-top:4px;opacity:.85}
.choice .no{display:inline-block;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:50%;width:34px;height:34px;text-align:center;line-height:28px;font-family:var(--fh);font-size:22px;margin-right:10px;vertical-align:middle}
@keyframes rise{0%{transform:translateY(120px);opacity:0}100%{transform:none;opacity:1}}

#toast{position:absolute;top:18px;left:50%;width:500px;margin-left:-250px;text-align:center;background:var(--yellow);border:5px solid var(--ink);border-radius:22px;box-shadow:0 7px 0 var(--ink);padding:10px 18px 12px;transform:translateY(-200px);transition:transform .55s cubic-bezier(.2,1.4,.4,1);pointer-events:none;z-index:5}
#toast.show{transform:translateY(0)}
#toastTitle{font-family:var(--fh);font-size:32px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
#toastText{font-size:23px;font-weight:600;margin-top:2px}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;background:rgba(20,12,6,.55);display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:auto}
.card{width:640px;background:#fff;border:6px solid var(--ink);border-radius:30px;box-shadow:0 10px 0 var(--ink);padding:24px 34px 30px;text-align:center;animation:card .4s cubic-bezier(.2,1.5,.4,1)}
.card.wide{width:760px}
@keyframes card{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.card h2{margin:0 0 14px;font-family:var(--fh);font-weight:400;font-size:58px;color:var(--yellow);-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.card h2.gold{font-size:64px}
.card p{font-size:24px;font-weight:500;margin:8px 0 16px;line-height:1.3}
.card .hint{font-size:19px;opacity:.7;margin:12px 0 14px}
.row{display:flex;align-items:center;gap:18px;margin:14px 0;text-align:left}
.row label{flex:0 0 150px;font-size:28px;font-weight:700}
.row b{flex:0 0 56px;font-size:26px;text-align:right}
.row input[type=range]{flex:1}
.stack{display:flex;flex-direction:column;gap:18px;align-items:center;margin-top:10px}
.stack.row2{flex-direction:row;justify-content:center;gap:24px}
.stack .btn{min-width:330px}
.stack.row2 .btn{min-width:0}

input[type=range]{-webkit-appearance:none;appearance:none;height:24px;background:linear-gradient(90deg,var(--green),var(--yellow));border:4px solid var(--ink);border-radius:14px;outline:none;touch-action:pan-x}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;border-radius:50%;background:#fff;border:5px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:5px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer}
.segs{display:flex;gap:10px;flex:1}
.seg{flex:1;font-family:var(--fb);font-weight:700;font-size:24px;color:var(--ink);background:#eee;border:4px solid var(--ink);border-radius:14px;padding:6px 8px 8px;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.seg.on{background:var(--green);color:#fff;text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.seg.one{flex:1}
.seg.muted{background:var(--red);color:#fff}

.about-name{font-family:var(--fh);font-size:42px;color:var(--blue);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;margin:6px 0 6px}
.about-link{display:inline-block;margin-top:4px;font-size:30px;font-weight:700;color:#fff;background:var(--blue);border:5px solid var(--ink);border-radius:16px;padding:6px 22px 8px;text-decoration:none;box-shadow:0 5px 0 var(--ink)}
#endStats{display:flex;gap:16px;justify-content:center;margin:12px 0 20px}
.stat{flex:1;background:#fff8c9;border:5px solid var(--ink);border-radius:20px;padding:8px 6px 10px;box-shadow:0 5px 0 var(--ink)}
.stat b{display:block;font-family:var(--fh);font-weight:400;font-size:44px;color:var(--red);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.stat span{font-size:20px;font-weight:600}

#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .55s ease;z-index:40}
#fade.on{opacity:1;pointer-events:auto}

/* ---------- touch controls ---------- */
#touch{position:absolute;left:0;right:0;bottom:0;height:200px;display:none;justify-content:space-between;align-items:flex-end;padding:0 34px 26px;z-index:3;pointer-events:none}
body.touch #touch{display:flex}
body[data-mode="menu"] #touch,body[data-mode="loading"] #touch,body[data-mode="shop"] #touch,body[data-mode="ending"] #touch{display:none!important}
.t-left,.t-right{display:flex;gap:22px}
.tbtn{width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.72);border:6px solid var(--ink);font-size:46px;color:var(--ink);box-shadow:0 7px 0 var(--ink);pointer-events:auto;font-family:sans-serif;padding:0;touch-action:none}
.tbtn.held,.tbtn:active{background:var(--yellow);transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
body:not([data-mode="runner"]) .runner-only{display:none}
body[data-mode="world"] .t-right{gap:0}

/* ---------- rotate notice ---------- */
#rotate{position:fixed;inset:0;background:#123d22;color:#fff;z-index:100;display:none;align-items:center;justify-content:center;text-align:center;font-family:var(--fh);font-size:30px;letter-spacing:1px}
#rotate.show{display:flex}
.rot-card{display:flex;flex-direction:column;align-items:center;gap:26px}
.rot-phone{width:70px;height:120px;border:8px solid #fff;border-radius:16px;animation:rot 2.2s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

@media (prefers-reduced-motion:reduce){#bigBtn{animation:none}.bar .fill{animation:none}}

#settings,#about{z-index:25}

/* Optional offline fonts: put these files in the fonts/ folder (see README.txt) */
@font-face{font-family:'Luckiest Guy';src:local('Luckiest Guy'),url('../fonts/LuckiestGuy-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Fredoka';font-weight:300 700;src:local('Fredoka'),url('../fonts/Fredoka-Variable.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Baloo Da 2';font-weight:400 800;src:local('Baloo Da 2'),url('../fonts/BalooDa2-Variable.ttf') format('truetype');font-display:swap}