/* Oasis Bloom — components: pills, orders, nav, info bar, oasis panel, sheets, splash, tutorial. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--sand-0);
  box-shadow: var(--shadow); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; position: relative; }
.pill > img { width: 30px; height: 30px; margin-inline-start: -2px; }
.pill small { font-size: 12px; color: var(--ink-3); font-weight: 600; min-width: 0; }
.pill .plus { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; margin-inline-start: 2px; }
.pill .plus .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.pill.energy.low b { color: #B4421F; }
.pill.back { padding: 0 16px 0 10px; font-weight: 600; }
#top .coins { margin-inline-end: auto; }
#top .energy { min-width: 96px; }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-0); box-shadow: var(--shadow); color: var(--ink); }

/* orders */
.order { position: relative; flex: 1 1 0; min-width: 0; max-width: 168px; background: var(--sand-0); border-radius: var(--r-m); box-shadow: var(--shadow);
  padding: 8px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px solid transparent; transition: border-color .2s, background .2s; }
.order .want { display: flex; gap: 2px; justify-content: center; }
.order .w { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--sand-50); display: grid; place-items: center; }
.order .w img { width: 38px; height: 38px; object-fit: contain; }
.order .tick { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--palm); color: #fff; display: none; place-items: center; border: 2px solid var(--sand-0); }
.order .tick .ic { width: 11px; height: 11px; stroke-width: 3.5; }
.order .w.have .tick { display: grid; }
.order .rew { display: flex; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); align-items: center; font-variant-numeric: tabular-nums; }
.order .rew span { display: inline-flex; align-items: center; gap: 2px; }
.order .rew img { width: 18px; height: 18px; }
.order .serve { position: absolute; inset: auto 8px -14px; height: 30px; border-radius: 999px; background: var(--palm); color: #fff; font-weight: 700; font-size: 14px;
  display: none; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 3px 0 #2C6A28; }
.order .serve .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.order.ready { border-color: var(--palm); background: #FBFFF7; }
.order.ready .serve { display: flex; animation: serveBob 1.2s ease-in-out infinite; }
@keyframes serveBob { 50% { transform: translateY(-2px); } }
.order.golden { background: linear-gradient(#FFF7E0, #FFF1CC); border-color: #EBC46A; }
.order.golden .w { background: #FFF9EA; }

/* nav */
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; height: 52px; justify-content: center; color: var(--ink-2); border-radius: 14px; }
.tab .lbl { font-size: 12px; font-weight: 600; }
.tab:active { transform: scale(.94); }
.tab .dot { position: absolute; top: 4px; inset-inline-end: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); border: 2px solid var(--sand-100); }
.tab .count { position: absolute; top: 0; inset-inline-end: 8px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--saffron); color: var(--ink); font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; padding: 0 4px; }
.tab .count:empty { display: none; }

/* info bar */
#info { display: flex; align-items: center; gap: 8px; background: var(--sand-0); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 0 8px; }
#info .big { width: 44px; height: 44px; object-fit: contain; }
#info .meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
#info .meta b { font-size: 15px; white-space: nowrap; }
#info .meta small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
#info .chain { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; color: var(--ink-3); }
#info .chain img { width: 34px; height: 34px; object-fit: contain; }
#info .chain .ic { width: 18px; height: 18px; }
#info .chain .ic { transform: scaleX(-1); }
html[dir=rtl] #info .chain .ic { transform: none; }
#info .chain img.max { filter: grayscale(1); opacity: .35; width: 26px; height: 26px; }
#info .sell, #info .collect { height: 36px; padding: 0 12px; border-radius: 999px; background: var(--sand-100); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
#info .sell img { width: 18px; height: 18px; }
#info .hintline { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink-2); font-size: 14px; }
#info .hintline img { width: 20px; height: 20px; }

/* buttons */
.btn { height: 48px; padding: 0 24px; border-radius: 14px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s; }
.btn:active:not(:disabled) { transform: scale(.96) translateY(2px); }
.btn.primary { background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-d); }
.btn.primary:disabled { background: #B9C9C5; box-shadow: 0 4px 0 #9DB0AB; cursor: default; }
.btn.ghost { background: var(--sand-100); color: var(--ink-2); }
.btn.danger { background: #C2492B; color: #fff; box-shadow: 0 4px 0 #94341D; }
.btn.soft { background: var(--sand-100); height: 40px; padding: 0 12px; }
.btn.wide { width: 100%; }

/* oasis */
#oasis canvas { position: absolute; inset: 0; }
#oasis .cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#oasis .pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 252, 246, .72); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: var(--shadow); }
.pin .ic { width: 18px; height: 18px; }
.pin.next { width: auto; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--sand-0); display: flex; gap: 4px; font-weight: 700; font-size: 18px; color: var(--ink);
  animation: pinBob 1.6s ease-in-out infinite; box-shadow: 0 0 0 6px rgba(255, 252, 246, .35), var(--shadow); }
.pin.next img { width: 32px; height: 32px; }
@keyframes pinBob { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.opanel { position: absolute; inset: auto 12px calc(12px + var(--safe-b)); background: var(--sand-0); border-radius: var(--r-l); box-shadow: 0 10px 30px rgba(60, 40, 15, .22); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.prog { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.prog .bar { flex: 1; height: 10px; border-radius: 5px; background: var(--sand-100); overflow: hidden; }
.prog .bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #5DA84F, var(--palm)); transition: width .8s var(--ease-out); }
html[dir=rtl] .prog .bar i { margin-inline-start: auto; background: linear-gradient(-90deg, #5DA84F, var(--palm)); }
.nextr { display: flex; align-items: center; gap: 12px; }
.nextr .nicon { width: 40px; height: 40px; }
.nmeta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.nmeta b { font-size: 18px; }
.nmeta small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.nmeta small img { width: 18px; height: 18px; display: inline-block; }
#app.wide .opanel { inset: auto 24px 24px; }

/* sheets */
#sheet { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center; background: rgba(43, 29, 18, .42); padding: 16px; padding-bottom: calc(16px + var(--safe-b)); }
#sheet.on { display: flex; }
@media (min-width: 700px) { #sheet { align-items: center; } }
.sheet { position: relative; width: 100%; max-width: 420px; background: var(--sand-0); border-radius: var(--r-l); padding: 24px 20px 20px; box-shadow: 0 20px 50px rgba(40, 25, 10, .3); text-align: center; }
.sheet h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; }
.sheet .x { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; box-shadow: none; background: var(--sand-50); }
.rows { display: flex; flex-direction: column; gap: 4px; text-align: start; }
.row { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px; border-radius: 14px; background: var(--sand-50); font-weight: 600; width: 100%; }
.row span { flex: 1; text-align: start; }
.row.danger { color: #A63C22; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: #D9CDB8; position: relative; transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s var(--ease-out); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.toggle.on .sw { background: var(--teal); }
.toggle.on .sw::after { inset-inline-start: 21px; }
.seg { display: flex; background: var(--sand-100); border-radius: 10px; padding: 3px; }
.seg button { min-width: 44px; height: 32px; border-radius: 8px; font-weight: 700; }
.seg button.on { background: var(--sand-0); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.btns { display: flex; gap: 12px; justify-content: center; }
.btns .btn { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip img { width: 28px; height: 28px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 4px 0 20px; font-size: 18px; }
.chips .chip img { width: 40px; height: 40px; }
.hero-ic { width: 96px; height: 96px; margin: -8px auto 8px; }
.hero-ic.burst { animation: heroIn .6s var(--ease-out); }
@keyframes heroIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15); } }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.day { position: relative; border-radius: 14px; background: var(--sand-50); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid transparent; }
.day small { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.day img { width: 40px; height: 40px; object-fit: contain; }
.day b { font-size: 13px; min-height: 18px; }
.day.today { border-color: var(--saffron); background: #FFF6DE; }
.day.big { grid-column: span 2; }
.day.big img { width: 52px; height: 52px; }
.day .done { position: absolute; inset: 0; border-radius: 12px; background: rgba(251, 244, 230, .7); display: grid; place-items: center; color: var(--palm); }
.day .done .ic { width: 32px; height: 32px; stroke-width: 3; }
.offers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.offers.two { display: grid; grid-template-columns: repeat(3, 1fr); }
.offers.two .offer { flex-direction: column; gap: 8px; padding: 12px 8px; }
.offer { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--sand-50); border-radius: 14px; padding: 8px 8px 8px 12px; }
.offer .what { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.offer.hero { background: #FFF4D9; border: 2px solid #EBC46A; }
.offer .what b { width: 100%; text-align: start; }
.offer .cs { display: flex; gap: 12px; flex-wrap: wrap; }
.offer.hero .what { gap: 4px; }
.offer .btn { height: 40px; min-width: 88px; padding: 0 12px; font-size: 15px; }
.noads { position: relative; display: inline-grid; place-items: center; color: var(--ink-2); }
.noads s { position: absolute; width: 30px; height: 2.5px; background: #B4421F; transform: rotate(-35deg); border-radius: 2px; }
.testnote { margin: 8px 0 0; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }
html[dir=rtl] .testnote { letter-spacing: 0; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-radius: 14px; background: var(--sand-50); font-weight: 700; }
.opt span { flex: 1; text-align: start; }
.opt > img { width: 36px; height: 36px; }
.opt.ad { background: #E4F3F1; color: var(--teal-d); }
.opt:disabled { opacity: .45; }
.ad-box { height: 220px; display: grid; place-items: center; background: #1E1A15; border-radius: 16px; color: #fff; position: relative; }
.ad-box .tag { position: absolute; top: 12px; inset-inline-start: 12px; font-size: 12px; font-weight: 700; opacity: .7; }
.ad-box .ring { width: 72px; height: 72px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; display: grid; place-items: center; animation: spin 1s linear infinite; }
.ad-box .ring b { animation: spin 1s linear infinite reverse; font-size: 24px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* splash */
#splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--sand-100); }
#splash .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
#splash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(43, 29, 18, 0) 40%, rgba(43, 29, 18, .45)); }
#splash .card { position: relative; z-index: 1; margin-top: 30vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#splash .logo { width: 96px; height: 96px; animation: genIdle 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(40, 25, 10, .35)); }
#splash .title { margin: 0 0 16px; font-size: 40px; line-height: 1.1; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(40, 25, 10, .45); }
#splash .play { height: 60px; min-width: 200px; font-size: 20px; border-radius: 18px; }
#splash .lang { position: absolute; top: calc(16px + var(--safe-t)); inset-inline-end: 16px; z-index: 2; padding: 0 16px; }

/* tutorial */
#tut { position: fixed; inset: 0; z-index: 48; pointer-events: none; display: none; }
#tut.on { display: block; }
#tut .hand { position: absolute; width: 56px; height: 56px; filter: drop-shadow(0 6px 8px rgba(40, 25, 10, .3)); }
#tut .tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }