/* Oasis Bloom round 2: level ring, goal bar, powers, hub, modes, album, puzzles. 8px grid. */
#top { gap: 6px; padding: 8px 12px; }
#top .pill { padding: 0 10px 0 3px; gap: 4px; }
#top .pill > img { width: 28px; height: 28px; }
#top .energy { min-width: 0; }
#top .gear { margin-inline-start: auto; flex: none; }
#top .coins { margin-inline-end: 0; }
.lvl { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sand-0); box-shadow: var(--shadow); display: grid; place-items: center; }
.lvl svg { position: absolute; inset: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
html[dir=rtl] .lvl svg { transform: rotate(-90deg) scaleY(-1); }
.lvl circle { fill: none; stroke-width: 4; }
.lvl .tr { stroke: var(--sand-100); }
.lvl .xp { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out); }
.lvl b { position: relative; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pill.energy.surge { background: #FFF1D2; box-shadow: 0 0 0 2px var(--saffron), var(--shadow); }
.pill.energy.surge small { color: #B36A00; font-weight: 800; }

/* goal bar */
#goal { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; }
#goal:empty { display: none; }
.goalbar { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--sand-0); box-shadow: var(--shadow); }
.goalbar .gi { width: 28px; height: 28px; flex: none; }
.goalbar .gr { width: 28px; height: 28px; flex: none; object-fit: contain; }
.goalbar .gl { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.goalbar .gtrack { flex: 1; height: 8px; border-radius: 4px; background: var(--sand-100); overflow: hidden; display: flex; }
.goalbar .gtrack i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #F5C451, var(--saffron)); transition: width .6s var(--ease-out); }
.goalbar .gn { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.goalbar.full { box-shadow: 0 0 0 2px var(--saffron), var(--shadow); }
.goalbar.full .gr { animation: serveBob 1s ease-in-out infinite; }
.goalbar.event .gtrack i { background: linear-gradient(90deg, #E9925B, #C7642F); }
.gback { width: 32px; height: 32px; flex: none; }
.gback .ic { width: 18px; height: 18px; }
html[dir=rtl] .gback .ic { transform: scaleX(-1); }
.gtime { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.gtime .ic { width: 16px; height: 16px; }

/* board: bigger generators, bubbles, power picking */
.it.bubbled > .sp { inset: 18%; width: 64%; height: 64%; z-index: 2; }
.it .bub { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: bobble 2.4s ease-in-out infinite; }
@keyframes bobble { 50% { transform: translateY(-3px) scale(1.03); } }
#app.picking #board .it:not(.gen):not(.sandy):not(.bubbled)::after { content: ''; position: absolute; inset: 6%; border-radius: 14px; box-shadow: 0 0 0 2px rgba(242, 178, 58, .9); pointer-events: none; }
#app[data-pick=wild] #board .it::after { display: none; }
#app[data-pick=wild] #orders .order { box-shadow: 0 0 0 3px #F7B7C9, var(--shadow); animation: serveBob 1s ease-in-out infinite; }
#app.event #play { background: radial-gradient(120% 60% at 50% 0%, #FFF3E2, #F2DCC0 70%); }
#app.event #board .tiles { filter: sepia(.15) saturate(1.1); }

/* small buttons + chips */
.btn.sm { height: 36px; padding: 0 12px; font-size: 14px; border-radius: 12px; gap: 4px; }
.btn.sm img { width: 20px; height: 20px; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn .chip img { width: 22px; height: 22px; }
.chips.sm { gap: 8px; margin: 0; font-size: 14px; flex-wrap: nowrap; }
.chips.sm .chip img { width: 24px; height: 24px; }
.locked { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--ink-3); }
.locked .ic { width: 40px; height: 40px; }
.testnote { margin: 8px 0 0; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.row2 { display: flex; gap: 8px; } .row2 .btn { flex: 1; }
.dot { position: absolute; top: 2px; inset-inline-end: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); border: 2px solid var(--sand-0); }

/* hub */
.sheet.hub { padding-top: 56px; max-height: 88vh; display: flex; flex-direction: column; }
.hubtabs { position: absolute; top: 12px; inset-inline-start: 16px; inset-inline-end: 56px; }
.hubtabs button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--ink-2); height: 32px; min-width: 0; }
.hubtabs .ic { width: 16px; height: 16px; flex: none; }
.hubtabs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubbody { overflow-y: auto; min-height: 0; padding: 8px 2px 2px; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--sand-50); text-align: start; }
.qrow.claimed { opacity: .55; }
.qm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qm b { font-size: 14px; } .qm small { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.qbar { display: flex; height: 8px; border-radius: 4px; background: var(--sand-200); overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--palm); border-radius: 4px; }
.qrow .btn { min-width: 72px; }
.qbonus { margin-top: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: #FFF6DE; }
.qbonus img { width: 40px; height: 40px; } .qbonus b { font-size: 14px; }
.dotsrow { display: inline-flex; gap: 4px; margin-inline-end: auto; } .dotsrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand-200); } .dotsrow i.on { background: var(--palm); }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.slot { min-height: 168px; border-radius: 16px; background: var(--sand-50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; }
.slot.empty { border: 2px dashed var(--sand-200); background: none; }
.slot > img { width: 72px; height: 72px; object-fit: contain; }
.slot.ready > img { animation: serveBob 1s ease-in-out infinite; }
.slot .ct { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.slot .btn { width: 100%; }
.phead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.phead .pt { display: flex; flex-direction: column; text-align: start; } .phead .pt small { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--ink-3); font-weight: 700; } .phead .pt .ic { width: 14px; height: 14px; }
.pbar { flex: 1; height: 10px; border-radius: 5px; background: var(--sand-100); overflow: hidden; display: flex; } .pbar i { background: var(--teal); border-radius: 5px; }
.pnum { font-size: 14px; }
.pcols { display: grid; grid-template-columns: 1fr 32px 1fr; font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 4px; }
.plist { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.prow { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 4px; }
.prow .pn { font-size: 12px; font-weight: 800; color: var(--ink-3); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-100); justify-self: center; }
.prow.reached .pn { background: var(--teal); color: #fff; }
.pcell { position: relative; height: 56px; border-radius: 12px; background: var(--sand-50); display: flex; align-items: center; justify-content: center; }
.pcell .chip { font-size: 13px; } .pcell .chip img { width: 30px; height: 30px; }
.pcell.prem { background: #FFF4DA; }
.pcell.can { box-shadow: 0 0 0 2px var(--palm); animation: serveBob 1.2s ease-in-out infinite; }
.pcell.got { opacity: .5; }
.pcell .done, .pcell .lk { position: absolute; inset-inline-end: 4px; top: 4px; color: var(--palm); } .pcell .lk { color: var(--ink-3); }
.pcell .done .ic, .pcell .lk .ic { width: 14px; height: 14px; }
.buyprem { margin-top: 16px; }

/* powers */
.plist2 { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.prw { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: var(--sand-50); }
.prw .pic { position: relative; width: 56px; height: 56px; flex: none; } .prw .pic img { width: 56px; height: 56px; object-fit: contain; }
.prw .pic em { position: absolute; bottom: -2px; inset-inline-end: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: #fff; font: 700 12px/22px inherit; text-align: center; font-style: normal; padding: 0 4px; }
.prw .pm { flex: 1; min-width: 0; display: flex; flex-direction: column; } .prw .pm b { font-size: 15px; } .prw .pm small { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* modes */
.mcards { display: flex; flex-direction: column; gap: 8px; }
.mcard { position: relative; height: 104px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; padding: 12px 16px; text-align: start; background: var(--sand-50); box-shadow: var(--shadow); }
.mcard .mbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.mcard.garden .mt { background: rgba(255, 252, 246, .9); border-radius: 12px; padding: 4px 12px; }
.mcard .mart { position: absolute; inset-inline-end: 8px; top: 4px; width: 96px; height: 96px; object-fit: contain; }
.mcard.caravan { background: linear-gradient(120deg, #FBE3C6, #F1C79A); }
.mcard.puzzles { background: linear-gradient(120deg, #E0F0EE, #BFE0DA); }
.mcard.off { filter: grayscale(.5); }
.mt { position: relative; display: flex; flex-direction: column; } .mt b { font-size: 18px; } .mt small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); } .mt .ic { width: 14px; height: 14px; }
.mprog { position: absolute; inset: auto 16px 8px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); display: flex; } .mprog i { background: var(--ink-2); border-radius: 3px; }
.mcard .mt { margin-bottom: 8px; }
.mlock { position: absolute; inset: 0; background: rgba(43, 29, 18, .45); display: flex; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 18px; }
.mlock .ic { width: 22px; height: 22px; }

/* profile + album */
.prof { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; text-align: start; }
.bigl { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2BA7A2, var(--teal-d)); color: #fff; box-shadow: 0 4px 0 #0A5552; margin: 0 auto; }
.bigl b { font-size: 32px; font-weight: 800; }
.bigl.up { width: 96px; height: 96px; margin-bottom: 16px; animation: lvlPop .6s var(--ease-out); } .bigl.up b { font-size: 44px; }
@keyframes lvlPop { 0% { transform: scale(.3); } 70% { transform: scale(1.12); } }
.pxm { flex: 1; display: flex; flex-direction: column; gap: 4px; } .pxm small { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.ahead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ahead img { width: 32px; height: 32px; } .ahead small { margin-inline-start: auto; font-weight: 700; color: var(--ink-3); }
.album { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.ah { display: flex; align-items: center; justify-content: space-between; height: 32px; font-size: 13px; } .ah .done { color: var(--palm); } .ah .done .ic { width: 18px; height: 18px; }
.atiles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.at { aspect-ratio: 1; border-radius: 10px; background: var(--sand-50); display: grid; place-items: center; } .at img { width: 88%; height: 88%; object-fit: contain; }
.at.unk img { filter: brightness(0) opacity(.18); }
.unl { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #E4F3F1; color: var(--teal-d); margin-bottom: 16px; } .unl .ic { width: 18px; height: 18px; }
.bubhero { position: relative; display: block; width: 112px; height: 112px; margin: 0 auto 8px; } .bubhero img { position: absolute; inset: 18%; width: 64%; } .bubhero .bubov { inset: 0; width: 100%; animation: bobble 2.4s ease-in-out infinite; }
.opts .chip img { width: 28px; height: 28px; }

.bubinfo { display: flex; justify-content: center; align-items: center; gap: 8px; margin: -4px 0 16px; color: var(--ink2, #6b5a44); }
.bubinfo .exact { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #E6F4DA; color: #3E6B2A; font-weight: 600; font-size: 13px; }
.bubinfo .exact .ic { width: 16px; height: 16px; }
.bubinfo small { font-weight: 600; }

/* reward / chest / level-up reveal */
.reveal { position: relative; display: block; width: 160px; height: 112px; margin: -8px auto 4px; display: grid; place-items: center; }
.reveal .hero-ic, .reveal .bigl.up { position: relative; z-index: 1; margin: 0; }
.reveal .sunb { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .38) 0 10deg, rgba(255, 214, 120, 0) 10deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: sunIn .5s ease-out both, sunTurn 14s linear infinite; }
@keyframes sunIn { from { opacity: 0; transform: scale(.4); } }
@keyframes sunTurn { to { rotate: 360deg; } }
.chips.stag > * { animation: chipIn .38s cubic-bezier(.2, .9, .3, 1.3) both; }
.chips.stag > :nth-child(1) { animation-delay: .28s; } .chips.stag > :nth-child(2) { animation-delay: .38s; } .chips.stag > :nth-child(3) { animation-delay: .48s; }
.chips.stag > :nth-child(4) { animation-delay: .58s; } .chips.stag > :nth-child(n+5) { animation-delay: .66s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .reveal .sunb { animation: none; } .chips.stag > * { animation: none; } }

/* energy refill clock: a small tag under the pill so it never squeezes the number on phones */
#top .pill.energy { position: relative; }
#top .pill.energy small { position: absolute; top: calc(100% - 7px); left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 14px; padding: 0 6px; border-radius: 7px; background: var(--sand-0); box-shadow: 0 1px 2px rgba(60, 40, 15, .18); font-variant-numeric: tabular-nums; white-space: nowrap; }
#top .pill.energy small:empty { display: none; }

/* bubbles: the exact item stays clearly visible inside the bubble */
.it.bubbled > .bub { opacity: .78; }
.bubhero img:first-child { z-index: 1; filter: drop-shadow(0 3px 3px rgba(60, 90, 110, .25)); }
.bubhero .bubov { opacity: .8; }