/* ================= Story games ================= */
.hidden { display: none !important; }
.gone { opacity: 0; transform: scale(.4); pointer-events: none; transition: .3s; }
.picked { outline: 4px solid #f6c64e; outline-offset: 3px; transform: translateY(-6px) scale(1.04); }
.chipb { border: 3px solid #e8d9bf; background: #fff; border-radius: 999px; padding: 6px 14px; font: 800 .95rem var(--f-body); cursor: pointer; color: #27385f; }
.chipb.on { border-color: #2e9d7d; background: #e6f6ef; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #e8d9bf; cursor: pointer; }
.sw.on { box-shadow: 0 0 0 4px #27385f; transform: scale(1.1); }
.sw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.g-btn.ghostb { background: #fff; color: #27385f; box-shadow: 0 5px 0 #e0d2b8; border: 2px solid #e8d9bf; }
.stage.tall.playing { min-height: max(420px, 62cqw); }

/* envelope */
.env-game { display: grid; place-items: center; min-height: 40cqw; }
.env3 { border: 0; background: none; cursor: pointer; width: min(520px, 80cqw); padding: 0; animation: floatY 3s ease-in-out infinite; }
.env3 svg { width: 100%; display: block; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .2)); }
@keyframes floatY { 50% { transform: translateY(-10px) rotate(-1deg); } }
.e3-flap { transform-box: fill-box; transform-origin: 50% 0; transition: transform .7s ease .2s; }
.env3.open .e3-flap { transform: scaleY(-1); }
.e3-seal { transition: transform .4s, opacity .4s; }
.env3.open .e3-seal { opacity: 0; }
.e3-letter { transition: transform .8s ease .6s; }
.env3.open .e3-letter { transform: translateY(-120px); }
.env3.gone { display: none; }
.letter-card { background: #fffdf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40' stroke='%23f0e2c8' stroke-width='1.5'/%3E%3C/svg%3E"); border-radius: 18px; padding: 22px 26px; width: min(640px, 94%); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); border: 3px solid #e9cfa4; font-family: Caveat, var(--f-body); font-size: clamp(1.45rem, 3.2cqw, 2.1rem); line-height: 1.35; color: #4a2a22; animation: unroll .7s cubic-bezier(.3, 1.3, .5, 1); position: relative; }
html[dir="rtl"] .letter-card { font-family: 'Aref Ruqaa', var(--f-body); font-size: clamp(1.05rem, 2.3cqw, 1.45rem); }
@keyframes unroll { from { transform: scaleY(.2) translateY(60px); opacity: 0; } }
.letter-card p { margin: 6px 0; }
.lc-head { display: flex; justify-content: space-between; align-items: center; }
.lc-face { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; border: 3px solid #b96a82; background: #fff; }
.lc-face svg { width: 100%; height: 100%; }
.lc-logo { width: 60px; }
.lc-hello { font-weight: 700; font-size: 1.15em; }
.lc-sign { text-align: end; color: #b2384a; font-weight: 700; }
.letter-card .g-btn { display: block; margin: 12px auto 0; font-family: var(--f-body); }

/* avatar maker */
.av-maker { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 16px; align-items: start; }
.av-preview { text-align: center; position: sticky; top: 10px; background: radial-gradient(circle at 50% 40%, #fff, #fdf0dc) !important; }
.av-fig { height: clamp(220px, 34cqw, 380px); width: auto; }
.av-name { font: 900 1.4rem var(--f-body); color: #27385f; margin-top: 4px; }
.av-opts { display: flex; flex-direction: column; gap: 4px; }
.av-row b { display: block; font-size: .95rem; color: #27385f; margin-top: 4px; }
.av-hairs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.av-h { border: 3px solid #e8d9bf; background: #fff8ec; border-radius: 16px; padding: 2px; cursor: pointer; aspect-ratio: 1; }
.av-h svg { width: 100%; height: 100%; }
.av-h.on { border-color: #2e9d7d; background: #e6f6ef; transform: scale(1.06); }
.av-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.av-in input { flex: 1; min-width: 140px; font: 800 1.15rem var(--f-body); padding: 10px 14px; border-radius: 14px; border: 3px solid #e8d9bf; }
.av-opts .g-btn { align-self: center; font-size: 1.25rem; padding: 14px 30px; }

/* friends memory */
.fr-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2cqw, 20px); margin-bottom: 16px; }
.fr-seat { background: rgba(255, 253, 247, .95); border-radius: 22px; padding: 10px; text-align: center; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); border: 3px dashed #e8d9bf; position: relative; min-height: 210px; }
.fr-seat.done { border-style: solid; border-color: #2e9d7d; }
.fr-face { width: 72%; margin: 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fdf0dc; }
.fr-face svg { width: 100%; height: 100%; }
.fr-tag { font: 900 1.1rem var(--f-body); color: #27385f; margin: 4px 0; min-height: 1.4em; }
.fr-cup { height: 70px; display: grid; place-items: center; position: relative; }
.fr-cup svg { height: 70px; animation: popIn .4s; }
.fr-cup .heart { position: absolute; top: -6px; right: 10%; color: #e0566f; font-size: 1.4rem; animation: emoPop 1.6s forwards; }
.fr-tray { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fr-item { border: 3px solid #e8d9bf; background: #fff; border-radius: 18px; padding: 6px 10px; cursor: grab; font: 800 .9rem var(--f-body); color: #27385f; box-shadow: 0 6px 0 #e0d2b8; display: flex; flex-direction: column; align-items: center; touch-action: none; }
.fr-item .drink-svg { height: 80px; }
.fr-item.name-tag { font-size: 1.2rem; padding: 12px 20px; background: #fff3c4; flex-direction: row; }

/* voyage */
.voyage { position: relative; }
.vy-map { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.vy-svg { display: block; }
.vy-hit { cursor: pointer; }
.vy-hit.next { animation: hitPulse 1.6s infinite; stroke: #fff; stroke-width: 8; stroke-dasharray: 20 16; fill: rgba(255, 255, 255, .12); }
@keyframes hitPulse { 50% { stroke-opacity: .2; } }
.vy-balloon { transition: transform 2s cubic-bezier(.45, 0, .2, 1); }
.balloon-g { animation: floatY 2.6s ease-in-out infinite; }
.vy-letters { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.vy-letters span { width: clamp(34px, 5cqw, 52px); aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; font: 900 clamp(1.1rem, 2.6cqw, 1.8rem) var(--f-body); background: rgba(255, 255, 255, .7); color: #b9b2a6; border: 3px dashed #fff; }
.vy-letters span.lit { background: var(--c); color: #fff; border: 3px solid #fff; animation: popIn .5s cubic-bezier(.3, 1.8, .5, 1); box-shadow: 0 0 18px var(--c); }
.vy-panel { position: absolute; inset: 4% 3%; background: rgba(255, 253, 247, .98); border-radius: 26px; border: 5px solid var(--c); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); padding: 14px; overflow: auto; animation: popIn .4s; z-index: 5; }
.voyage.in-game .vy-map { min-height: 520px; }
.vy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vy-k { width: 44px; height: 44px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; font: 900 1.6rem var(--f-body); }
.vy-head b { font: 900 1.4rem var(--f-body); color: var(--c); }

/* mix */
.mix { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "goal goal" "flask pots" "flask btn"; gap: 10px; align-items: center; justify-items: center; }
.mix-goal { grid-area: goal; font: 800 1.2rem var(--f-body); display: flex; align-items: center; gap: 10px; }
.mix-goal .blob { width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: inline-block; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .12); }
.mix-flask { grid-area: flask; width: min(260px, 40cqw); }
.mix-liq { transition: y .8s ease, fill .8s ease; }
.mix-bub circle { opacity: 0; }
.mix-flask.boil .mix-bub circle { animation: bubUp2 1.2s infinite; }
@keyframes bubUp2 { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-120px); } }
.mix-pots { grid-area: pots; display: flex; gap: 10px; }
.mix-pot { border: 0; background: none; cursor: pointer; width: 80px; transition: transform .2s; }
.mix-pot:hover { transform: translateY(-6px) rotate(-8deg); }
.mix .g-btn { grid-area: btn; }

/* gears */
.gears { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gears-svg { max-width: 860px; }
.spin { transform-box: fill-box; transform-origin: center; }
.spin.cw { animation: rot 2s linear infinite; }
.spin.ccw { animation: rot 2s linear infinite reverse; }
@keyframes rot { to { transform: rotate(360deg); } }
.whisk { transform-box: fill-box; transform-origin: 50% 0; }
.whisk.go { animation: whisk .3s linear infinite; }
@keyframes whisk { 50% { transform: scaleX(-1); } }
.bowl-milk { transition: fill 1.2s; }
.peg.over, .peg:hover { fill: rgba(246, 198, 78, .4); }
.gear-tray { display: flex; gap: 14px; }
.gear-pc { width: 92px; border: 0; background: none; cursor: grab; touch-action: none; animation: floatY 2.4s ease-in-out infinite; }
.gear-q { display: flex; gap: 10px; align-items: center; font-size: 1.1rem; background: #fff; border-radius: 16px; padding: 8px 14px; }
.gear-q .chipb { font-size: 1.6rem; padding: 2px 18px; }

/* market */
.market { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.mk-stall { text-align: center; }
.mk-stall svg { max-height: 150px; }
.mk-price { display: flex; flex-direction: column; gap: 2px; font-weight: 800; }
.mk-price b { font-size: 1.6rem; color: #a9803a; }
.mk-price i { font-style: normal; font-size: 1.6rem; letter-spacing: 2px; }
.mk-pot { text-align: center; border: 4px dashed #e2a03a !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-in { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 50px; }
.mk-in .mini svg { width: 40px; }
.mk-sum { font: 900 2rem var(--f-body); color: #27385f; }
.mk-purse { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mk-coin { width: 62px; height: 62px; border: 0; background: none; cursor: grab; touch-action: none; transition: transform .2s; }
.mk-coin:hover { transform: translateY(-4px) rotate(10deg); }
.mk-coin svg { width: 100%; filter: drop-shadow(0 4px 0 #a9803a); }
.market .g-row { grid-column: 1 / -1; }

/* zellige */
.zel { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.zel-svg { width: min(400px, 70cqw); }
.zc.paint { cursor: pointer; }
.zc.paint:hover rect { fill: #fff8dc; }
.zel-svg.shine { animation: yesA .6s 2; filter: drop-shadow(0 0 16px #f6c64e); }
.zel-side { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.zel-mirror { font: 900 1.1rem var(--f-body); color: #e0566f; }
.zel-pal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zp { width: 58px; height: 58px; border-radius: 16px; border: 4px solid #fff; background: var(--pc); box-shadow: 0 0 0 3px #e8d9bf; cursor: pointer; font-size: 1.4rem; }
.zp.erase { background: #fff; }
.zp.on { box-shadow: 0 0 0 5px #27385f; transform: scale(1.08); }

/* order glasses */
.order { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ord-slots { display: flex; gap: 10px; }
.ord-slot { width: clamp(64px, 11cqw, 100px); height: clamp(130px, 20cqw, 200px); border: 4px dashed #c9b8e8; border-radius: 18px; display: grid; place-items: end center; position: relative; background: rgba(255, 255, 255, .6); }
.ord-slot > span { position: absolute; top: -14px; background: #8a6ad0; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 900; }
.ord-slot.full { border-style: solid; border-color: #8a6ad0; }
.ord-tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
.ord-g { width: clamp(60px, 10cqw, 92px); border: 0; background: none; cursor: grab; touch-action: none; padding: 0; }
.ord-g svg { width: 100%; display: block; }

/* cleaning */
.clean { display: flex; flex-direction: column; gap: 10px; }
.cl-frame { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.cl-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 1s; }
.cl-frame canvas.gone { opacity: 0; }
.cl-bar { height: 16px; background: #fff; border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 2px #e8d9bf; }
.cl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fd2b8, #2e9d7d); transition: width .2s; }
.puff { position: absolute; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: rgba(200, 190, 175, .8); pointer-events: none; animation: puff .7s forwards; }
@keyframes puff { to { transform: translate(20px, -40px) scale(2.4); opacity: 0; } }

/* hidden objects */
.find { display: flex; flex-direction: column; gap: 12px; }
.fd-frame { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); aspect-ratio: 16 / 9; }
.fd-svg { width: 100%; height: 100%; display: block; }
.fd-count { position: absolute; top: 10px; inset-inline-start: 10px; }
.hid-obj { cursor: pointer; transition: filter .3s; outline: none; }
.hid-obj:hover { filter: drop-shadow(0 0 8px #fff3a0); }
.hid-obj.hint { animation: wig .4s 4; }
.hid-obj.found { filter: drop-shadow(0 0 14px #f6c64e); animation: yesA .5s; }
.fd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fd-card { background: #fff; border-radius: 16px; padding: 10px 12px; border-inline-start: 8px solid var(--mc); box-shadow: 0 6px 14px rgba(0, 0, 0, .1); animation: popIn .4s; }
.fd-card .n { float: inline-end; font-weight: 900; color: var(--mc); }
.fd-card b { display: block; }
.fd-card small { font-weight: 700; color: #5b5470; }

/* tasks (lv2) */
.tasks { display: flex; flex-direction: column; gap: 14px; }
.tk-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tk-mod { background: #fff; border-radius: 18px; padding: 10px; border-top: 8px solid var(--mc); min-height: 110px; box-shadow: 0 6px 14px rgba(0, 0, 0, .1); }
.tk-in .tk-card { margin-top: 6px; font-size: .85rem; }
.tk-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tk-card { border: 3px solid #e8d9bf; background: #fff8ec; border-radius: 14px; padding: 10px 14px; font: 800 1rem var(--f-body); cursor: grab; touch-action: none; color: #27385f; }

@media (max-width: 700px) {
  .av-maker { grid-template-columns: 1fr; }
  .av-preview { position: static; }
  .av-fig { height: 200px; }
  .av-hairs { grid-template-columns: repeat(3, 1fr); }
  .fr-table { grid-template-columns: repeat(2, 1fr); }
  .mix { grid-template-columns: 1fr; grid-template-areas: "goal" "flask" "pots" "btn"; }
  .market { grid-template-columns: 1fr; }
  .vy-panel { position: relative; inset: auto; margin-top: 10px; }
  .voyage.in-game .vy-map { display: none; }
  .ord-slots { gap: 6px; }
}
.vy-body { min-height: 82%; display: grid; place-items: center; }
.vy-body > * { width: 100%; }
.mix-flask { width: min(340px, 46cqw); }
.mix-pot { width: clamp(80px, 11cqw, 120px); }
.ord-g { width: clamp(70px, 12cqw, 110px); }
.ord-slot { width: clamp(76px, 13cqw, 120px); height: clamp(150px, 24cqw, 240px); }
.mk-coin { width: clamp(60px, 8cqw, 84px); height: clamp(60px, 8cqw, 84px); }
.gear-pc { width: clamp(90px, 12cqw, 130px); }

/* ---- intro 2 ---- */
.sign-maker { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.sm-preview { animation: floatY 3s ease-in-out infinite; }
.sm-preview.hang { animation: hang 1s ease; }
@keyframes hang { 0% { transform: translateY(-60px) rotate(-6deg); } 60% { transform: translateY(8px) rotate(3deg); } 100% { transform: none; } }
.sign-svg { width: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25)); }
.sm-opts { display: flex; flex-direction: column; gap: 4px; }
.sm-opts > b { color: #27385f; margin-top: 4px; }
.sm-in { font: 800 1.1rem var(--f-body); padding: 10px 14px; border-radius: 14px; border: 3px solid #e8d9bf; }
.em2 { width: 54px; height: 54px; border-radius: 14px; border: 3px solid #e8d9bf; background: #fff; cursor: pointer; padding: 4px; }
.em2.on { border-color: #2e9d7d; background: #e6f6ef; }
.em2 svg { width: 100%; height: 100%; }
.sm-opts .g-btn { margin-top: 8px; align-self: center; }

.roles2 { display: flex; flex-direction: column; gap: 14px; }
.rl-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rl-p { background: rgba(255, 253, 247, .96); border-radius: 22px; padding: 10px; text-align: center; border: 3px dashed #e8d9bf; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); cursor: pointer; }
.rl-p.done { border-style: solid; border-color: #d8b064; }
.rl-face { width: 74%; margin: 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fdf0dc; position: relative; }
.rl-face svg { width: 100%; height: 100%; }
.act-pop { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; background: rgba(255, 255, 255, .6); animation: popIn .4s; }
.rl-badge { min-height: 34px; margin-top: 6px; }
.badge-on { display: inline-block; background: var(--rc); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 900; animation: popIn .4s; }
.rl-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rl-b { border: 0; background: #fff; border-radius: 20px; padding: 10px 16px; box-shadow: 0 6px 0 var(--rc); border: 3px solid var(--rc); cursor: grab; touch-action: none; display: flex; flex-direction: column; align-items: center; font: 800 1rem var(--f-body); color: #27385f; }
.rl-b span { font-size: 2rem; }
.rl-b small { font-weight: 700; color: #5b5470; }
.rl-sit { background: #fff; border-radius: 22px; padding: 16px; text-align: center; font-size: 1.25rem; border: 4px solid #f6c64e; box-shadow: 0 10px 20px rgba(0, 0, 0, .12); }
.sit-ic { font-size: 3rem; display: block; }

.jugg { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px; align-items: center; position: relative; }
.jg-order { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 1.2rem; }
.jo-face { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: #fdf0dc; border: 4px solid #f6c64e; }
.jo-face svg { width: 100%; height: 100%; }
.jg-jug svg { width: 100%; max-height: 380px; }
.jg-ctrl { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.g-btn.big { font-size: 1.2rem; padding: 18px 16px; }
.g-btn.holding { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 #121b33; background: #3e5488; }
.jg-dots { display: flex; gap: 8px; justify-content: center; }
.jg-dots i, .round-dots i { width: 22px; height: 22px; border-radius: 50%; background: #e6dccb; display: inline-block; }
.jg-dots i.on { background: #2e9d7d; box-shadow: 0 0 0 3px #bfe9d4; }
.jg-spill { position: absolute; bottom: -10px; left: 36%; width: 160px; animation: popIn .4s; }
.jg-spill::before { content: ''; position: absolute; left: -30px; right: -30px; bottom: 6px; height: 24px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 3px #e9dcc6; z-index: -1; }

.thermog { display: grid; grid-template-columns: 130px 1fr; grid-template-areas: "th items" "th sort" "quiz quiz"; gap: 14px; }
.th-big { grid-area: th; text-align: center; cursor: grab; touch-action: none; background: rgba(255, 255, 255, .9); border-radius: 22px; padding: 8px; align-self: start; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
.th-svg svg { width: 100%; max-height: 300px; }
.th-read { font: 900 1.6rem var(--f-body); color: #27385f; }
.th-items { grid-area: items; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.th-it { background: rgba(255, 253, 247, .96); border-radius: 20px; padding: 8px; text-align: center; box-shadow: 0 6px 14px rgba(0, 0, 0, .1); border: 3px solid transparent; cursor: pointer; touch-action: none; }
.th-it.active { border-color: #e8455f; }
.th-it.done { border-color: #d8b064; }
.th-art svg { height: 86px; width: auto; }
.th-it b { display: block; font-size: .95rem; }
.th-val { font: 900 1.3rem var(--f-body); color: #e8455f; }
.th-sort { grid-area: sort; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.th-bin { border-radius: 22px; padding: 10px; text-align: center; background: linear-gradient(#ffe3d6, #ffc2a8); border: 4px dashed #e8455f; min-height: 140px; }
.th-bin.cold { background: linear-gradient(#e6f4ff, #c2e2ff); border-color: #4f8fd8; }
.th-bin > span { font-size: 2rem; }
.th-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.th-in .th-it, .th-slot .th-it { padding: 4px; }
.th-in .th-art svg, .th-slot .th-art svg { height: 50px; }
.th-sort:has(.th-line) { grid-template-columns: 1fr; }
.th-line { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #c2e2ff, #ffe9a8, #ffb3a0); border-radius: 22px; padding: 10px; font-size: 1.6rem; }
.th-slots { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.th-slot { min-height: 110px; border-radius: 14px; border: 3px dashed rgba(39, 56, 95, .4); background: rgba(255, 255, 255, .5); }
.th-quiz { grid-area: quiz; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; border-radius: 18px; padding: 12px; font-size: 1.15rem; border: 4px solid #e8455f; animation: popIn .3s; }
.th-quiz .chipb { font-size: 1.3rem; }

.till { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-areas: "cust counter" "pad pad"; gap: 14px; }
.tl-cust { grid-area: cust; display: flex; align-items: center; gap: 12px; position: relative; font-size: 1.2rem; }
.tl-face { flex: none; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: #fdf0dc; border: 4px solid #f6c64e; }
.tl-face svg { width: 100%; height: 100%; }
.tl-thanks { position: absolute; top: -10px; inset-inline-end: 10px; background: #e0708f; color: #fff; font-weight: 900; padding: 6px 14px; border-radius: 999px; animation: popIn .4s; }
.tl-counter { grid-area: counter; background: linear-gradient(#c98d5c, #8f5a36) !important; color: #fff8ec; text-align: center; min-height: 150px; }
.tl-coins { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 70px; padding: 6px; }
.tl-c svg { width: 52px; transform: rotate(var(--r, 0deg)); animation: popIn .3s; }
.tl-sum { font: 900 1.8rem var(--f-body); }
.tl-pad { grid-area: pad; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 1.15rem; }
.numpad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.np { width: 56px; height: 56px; border-radius: 16px; border: 0; background: #fff; box-shadow: 0 5px 0 #e0d2b8; font: 900 1.6rem var(--f-body); color: #27385f; cursor: pointer; }
.tl-purse { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tl-p { width: 66px; height: 66px; border: 0; background: none; cursor: grab; touch-action: none; }
.tl-p svg { width: 100%; filter: drop-shadow(0 4px 0 #a9803a); }

.drawg { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.dg-table { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.dg-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; align-items: center; font-weight: 800; }
.dg-slot { min-height: 44px; border-radius: 12px; border: 3px dashed #e8d9bf; background: #fffdf7; }
.dg-uses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dg-use { border: 2px solid #e8d9bf; background: #fff3c4; border-radius: 12px; padding: 6px 10px; font: 800 .9rem var(--f-body); cursor: grab; touch-action: none; }
.dg-page { flex: 2 1 420px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dg-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; background: #fff; border-radius: 18px; padding: 8px; }
.dg-st { width: 44px; height: 44px; border-radius: 12px; border: 2px solid #e8d9bf; background: #fff8ec; font-size: 1.4rem; cursor: pointer; }
.dg-st.on { border-color: #2e9d7d; background: #e6f6ef; }
.dg-paper { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #fffdf6 repeating-linear-gradient(0deg, transparent 0 34px, #e9ddc6 34px 36px); border-radius: 16px; box-shadow: 0 10px 22px rgba(0, 0, 0, .15); border-inline-start: 18px solid #c9604f; }
.dg-title { position: absolute; top: 8px; inset-inline-start: 14px; font: 700 1.1rem Caveat, var(--f-body); color: #9c7f63; pointer-events: none; }
.dg-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

@media (max-width: 700px) {
  .sign-maker { grid-template-columns: 1fr; }
  .rl-people { grid-template-columns: repeat(2, 1fr); }
  .jugg { grid-template-columns: 1fr; }
  .thermog { grid-template-columns: 90px 1fr; }
  .th-items { grid-template-columns: repeat(2, 1fr); }
  .th-slots { grid-template-columns: repeat(3, 1fr); }
  .till { grid-template-columns: 1fr; grid-template-areas: "cust" "counter" "pad"; }
  .numpad { grid-template-columns: repeat(5, 1fr); }
}

/* ============ s1 · Café lait au chocolat ============ */
.gl-svg { width: 100%; height: 100%; overflow: visible; }
.gl-svg .steam, .cp-art .steam { animation: steamUp 2.2s ease-in-out infinite; }
.gl-svg .swirl { animation: swirlSpin 1.2s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes steamUp { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes swirlSpin { to { transform: rotate(360deg); } }
.mini-gl { display: inline-block; width: 1.6em; height: 2.1em; vertical-align: middle; }

/* recipe lv1 */
.rc { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.rc-card { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 1.15rem; max-width: 560px; }
.rc-rule { font: 900 1.7rem var(--f-body); color: #27385f; display: flex; align-items: center; gap: 8px; }
.rc-queue { display: flex; gap: 14px; }
.rc-cust { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #fdf0dc; border: 4px solid #f6c64e; animation: bob 2.4s ease-in-out infinite; }
.rc-cust:nth-child(2) { animation-delay: .3s; } .rc-cust:nth-child(3) { animation-delay: .6s; }
.rc-cust svg { width: 100%; height: 100%; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.numpad.small { grid-template-columns: repeat(5, 1fr); }
.np.yes { background: #e6f6ef; box-shadow: 0 5px 0 #2e9d7d; }
.np.nope { animation: shake .4s; background: #ffe9ee; }
.rc-work { display: grid; grid-template-columns: 150px 1fr 1fr 1.1fr; grid-template-areas: "stock jug glass ctrl" "tray tray tray tray"; gap: 12px; align-items: center; }
.rc-work.two { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "jug ctrl pot"; }
.rc-stock { grid-area: stock; display: flex; flex-direction: column; gap: 6px; font-size: .95rem; text-align: center; }
.rc-stock div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rc-stock svg { width: 34px; height: 52px; flex: none; }
.rc-stock span { font-size: .95rem; letter-spacing: -2px; }
.rc-jug { grid-area: jug; }
.rc-jug svg { width: 100%; max-height: 340px; }
.rc-glass { grid-area: glass; position: relative; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; }
.rc-gl { width: 100%; height: 260px; }
.rc-glass.yes .rc-gl, .sv-glass.yes { animation: popIn .5s; }
.rc-stir-ring { width: 80%; height: 14px; border-radius: 999px; background: #f0e6d6; overflow: hidden; margin-top: 6px; }
.rc-stir-ring i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f6c64e, #9a5a36); transition: width .1s; }
.rc-stir-ring:not(.hidden)::before { content: '🥄 ↻'; position: absolute; top: 10px; inset-inline-end: 6px; font-size: 1.8rem; animation: swirlSpin 2s linear infinite; }
.rc-ctrl { grid-area: ctrl; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.rc-n { font: 900 1.3rem var(--f-body); text-align: center; color: #27385f; }
.rc-tin { display: flex; align-items: center; gap: 8px; border: 4px solid #9a5a36; background: #fff3e4; border-radius: 20px; padding: 8px 12px; font: 900 1.1rem var(--f-body); color: #5a2b15; cursor: pointer; box-shadow: 0 6px 0 #c7966a; animation: popIn .4s; }
.rc-tin svg { width: 50px; height: 70px; }
.rc-tin.yes svg { animation: tip .5s; }
@keyframes tip { 40% { transform: rotate(-35deg) translateY(-6px); } }
.rc-tray { grid-area: tray; display: flex; gap: 12px; justify-content: center; }
.rc-done { width: 70px; height: 96px; border-radius: 16px; border: 3px dashed #e0d2b8; background: rgba(255, 255, 255, .5); }
.rc-done:not(:empty) { border-style: solid; border-color: #2e9d7d; background: #e6f6ef; }
.rc-q { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
.rc-qc { display: flex; flex-direction: column; gap: 14px; font-size: 1.3rem; text-align: center; }
.rc-qc .g-btn { font-size: 1.3rem; }
/* recipe lv2 */
.rc2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.rc2 .rc-card { grid-column: 1 / 2; }
.rc2 .rc-rule { font-size: 1.25rem; }
.x2 { display: flex; flex-direction: column; align-items: center; font: 900 2rem var(--f-body); color: #27385f; gap: 2px; }
.x2-m { background: #f6c64e; border-radius: 999px; padding: 2px 16px; font-size: 1.4rem; }
.x2-out { color: #e0708f; }
.x2.go { animation: popIn .6s; }
.rc-fill { display: flex; flex-direction: column; gap: 10px; font-size: 1.1rem; font-weight: 800; }
.rc-fill label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-fill small { font-weight: 600; opacity: .7; }
.rc-pot { grid-area: pot; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rc-pot svg { width: 100%; max-width: 220px; }
.pot-ml { font: 900 1.6rem var(--f-body); color: #27385f; }
.pot-bar { width: 90%; height: 16px; border-radius: 999px; background: #f0e6d6; overflow: hidden; }
.pot-bar i { display: block; height: 100%; width: 0; background: #fffaf0; box-shadow: inset 0 0 0 2px #9ec3df; transition: width .5s; }
.rc-q2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sh2 { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 1.05rem; }
.sh2 svg { width: 70px; height: 100px; }

/* cups heat test */
.cups { display: flex; flex-direction: column; gap: 14px; }
.cp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cp { position: relative; display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto 1fr auto; grid-template-areas: "tag tag" "art th" "read read"; background: rgba(255, 253, 247, .95); border-radius: 22px; padding: 10px; box-shadow: 0 8px 20px rgba(39, 56, 95, .15); border: 3px solid transparent; cursor: pointer; transition: transform .15s; }
.cp:hover { transform: translateY(-3px); }
.cp-tag { grid-area: tag; text-align: center; font: 900 1rem var(--f-body); background: #fff3c4; border: 2px dashed #d8b064; border-radius: 12px; padding: 4px; min-height: 30px; }
.cp.named .cp-tag { border-style: solid; background: #e6f6ef; border-color: #2e9d7d; }
.cp-art { grid-area: art; }
.cp-art svg { width: 100%; max-height: 170px; }
.cp-th { grid-area: th; }
.cp-th svg { width: 100%; max-height: 180px; }
.cp-read { grid-area: read; text-align: center; font: 900 1.3rem var(--f-body); min-height: 1.6em; color: #c0433f; }
.cp-star { position: absolute; top: -16px; inset-inline-end: -10px; font-size: 2.4rem; animation: popIn .4s; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
.cp.ranked { opacity: .6; border-color: #2e9d7d; }
.cups:not(.heatvision) .cp .heat { display: none; }
.cups.heatvision .cp { background: #1d2140; }
.cups.heatvision .cp-read { color: #ffd27a; }
.cp-panel { min-height: 120px; display: flex; justify-content: center; align-items: center; }
.cp-labels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cp-l { border: 3px solid #d8b064; background: #fff8ec; border-radius: 16px; padding: 10px 16px; font: 900 1.15rem var(--f-body); cursor: grab; touch-action: none; color: #27385f; box-shadow: 0 5px 0 #e0d2b8; }
.cp-q { font: 900 1.4rem var(--f-body); color: #27385f; background: #fff; padding: 10px 20px; border-radius: 999px; }
.tm { display: flex; gap: 20px; align-items: center; background: rgba(255, 253, 247, .96); border-radius: 24px; padding: 12px 20px; }
.tm-clock { width: 170px; height: 170px; touch-action: none; cursor: grab; }
.tm-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 240px; }
.tm-min { font: 900 2rem var(--f-body); color: #e8455f; }
.tm-side .g-btn { font-size: 1.6rem; padding: 6px 26px; }
.hv { font-weight: 800; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.hv input { width: 22px; height: 22px; }
.pod { display: flex; gap: 10px; align-items: flex-end; }
.pod-s { width: 130px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-radius: 14px 14px 0 0; background: #f6c64e; color: #27385f; font-weight: 900; padding: 6px; text-align: center; }
.pod-s b { font-size: 1.6rem; }
.pod-s span { font-size: .95rem; min-height: 1.3em; }
.pod-s.s1 { height: 120px; background: #f6c64e; } .pod-s.s2 { height: 96px; background: #d9dee8; } .pod-s.s3 { height: 78px; background: #e2a873; } .pod-s.s4 { height: 62px; background: #eee3d2; }
.cp-table table { border-collapse: collapse; font-weight: 800; }
.cp-table td, .cp-table th { padding: 4px 10px; text-align: center; border-bottom: 2px solid #f0e6d6; }
.cp-table input.n { width: 64px; }
.cp-table .g-btn { margin-top: 8px; }
.big-idea { font-size: 1.15rem; max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.big-idea small { opacity: .7; font-weight: 600; }

/* surprise lab */
.lab2g { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.lb-glass { position: relative; display: flex; flex-direction: column; align-items: center; touch-action: none; cursor: grab; }
.lb-glass .g-svg { width: 100%; max-height: 360px; }
.lb-side { display: flex; flex-direction: column; gap: 12px; font-size: 1.2rem; text-align: center; }
.lb-clock { font: 900 2rem var(--f-body); color: #27385f; }
.lb-q { display: flex; flex-direction: column; gap: 10px; animation: popIn .4s; }
.lb-q .chipb { font-size: 1.15rem; padding: 10px 16px; border-radius: 18px; }
.g-col { display: flex; flex-direction: column; gap: 8px; }
.phg { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ph-strips { display: flex; gap: 14px; }
.ph-strip { width: 34px; height: 110px; border: 0; border-radius: 6px; background: linear-gradient(#fff 0 30%, #f3d27a 30%); box-shadow: 0 4px 0 #d8b064, 0 0 0 2px #e8d9bf; cursor: grab; touch-action: none; }
.ph-cups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.ph-cup { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 253, 247, .95); border-radius: 22px; padding: 10px; box-shadow: 0 8px 20px rgba(39, 56, 95, .15); font-size: 1.05rem; text-align: center; }
.ph-cup svg { width: 100%; max-height: 150px; }
.ph-res { display: flex; align-items: center; gap: 6px; font-weight: 900; min-height: 64px; }
.ph-res i { display: block; width: 22px; height: 60px; border-radius: 4px; animation: popIn .5s; box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0, 0, 0, .2); }
.ph-scale { display: flex; border-radius: 999px; overflow: hidden; width: min(560px, 100%); }
.ph-scale span { flex: 1; background: var(--z); color: #fff; text-align: center; font-weight: 900; padding: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* souk */
.shop { display: flex; flex-direction: column; gap: 14px; }
.sh-items { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 120px; }
.sh-it { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; padding: 8px; border-radius: 20px; border: 3px solid #e8d9bf; background: #fffdf7; font: 800 1rem var(--f-body); color: #27385f; cursor: grab; touch-action: none; box-shadow: 0 6px 0 #e0d2b8; }
.sh-it svg { width: 80px; height: 80px; }
.pr { background: #f6c64e; border-radius: 999px; padding: 0 10px; font-weight: 900; }
.sh-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sh-bin { min-height: 150px; border-radius: 24px; border: 4px dashed #2e9d7d; background: rgba(230, 246, 239, .9); padding: 10px; text-align: center; font-size: 1.2rem; }
.sh-bin.bonus { border-color: #e0708f; background: rgba(255, 233, 238, .9); }
.sh-in { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sh-in .sh-it, .bk-in .sh-it { width: 96px; box-shadow: none; }
.sh-in .sh-it svg, .bk-in .sh-it svg { width: 56px; height: 56px; }
.cmp { display: flex; gap: 20px; align-items: center; justify-content: center; }
.cmp-it { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 220px; font: 800 1.2rem var(--f-body); color: #27385f; cursor: pointer; }
.cmp-it svg { width: 130px; height: 130px; }
.coins { font-size: 1.5rem; letter-spacing: -4px; }
.vs { font-size: 3rem; }
.buy { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }
.buy-side { display: flex; flex-direction: column; gap: 12px; }
.wallet { text-align: center; font-size: 1.1rem; }
.w-coins { font-size: 1.6rem; letter-spacing: -6px; min-height: 2rem; }
.w-n { font: 900 1.3rem var(--f-body); color: #a9803a; }
.basket { min-height: 160px; text-align: center; font-size: 1.1rem; border: 4px dashed #d8b064 !important; }
.bk-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.sell { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: center; }
.sl-c { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 1.6rem; }
.sl-q { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 1.2rem; text-align: center; }
.sl-give { display: flex; gap: 10px; }
.sl-t { width: 62px; height: 62px; border-radius: 50%; border: 3px dashed #d8b064; background: #fff; font-size: 2.2rem; cursor: pointer; opacity: .45; transition: .2s; }
.sl-t.on { opacity: 1; border-style: solid; background: #fff3c4; transform: translateY(-6px); }
.sl-n { font: 900 2.2rem var(--f-body); color: #a9803a; }
.bud { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: center; }
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pc { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: .95rem; }
.pc svg { width: 60px; height: 86px; }
.bud2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; align-items: start; }
.opts { display: flex; flex-direction: column; gap: 10px; font-size: 1.15rem; }
.tog { display: flex; align-items: center; gap: 8px; font-weight: 800; padding: 8px 12px; border-radius: 16px; border: 3px solid #e8d9bf; background: #fff; cursor: pointer; }
.tog:has(input:checked) { border-color: #e0708f; background: #ffe9ee; }
.tog input { width: 22px; height: 22px; }
.tog svg { width: 40px; height: 50px; }
.calc { display: flex; flex-direction: column; gap: 10px; font-size: 1.15rem; font-weight: 800; }
.calc .per { color: #e0708f; font-weight: 900; }
.bbar { position: relative; height: 22px; border-radius: 999px; background: #f0e6d6; overflow: visible; }
.bbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #2e9d7d; transition: width .3s, background .3s; }
.bbar i.over { background: #e0566f; }
.bline { position: absolute; top: -6px; bottom: -6px; width: 4px; background: #27385f; border-radius: 2px; }
.pay2 { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.notes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 70px; }
.note { width: 96px; height: 54px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #9fd9b9, #5fb58b); box-shadow: 0 4px 0 #3d8a65, inset 0 0 0 3px rgba(255, 255, 255, .5); cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; }
.note[data-v="5"] { background: linear-gradient(135deg, #b9d0f5, #6f93d8); box-shadow: 0 4px 0 #46679f, inset 0 0 0 3px rgba(255, 255, 255, .5); }
.note[data-v="2"], .note[data-v="1"] { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(#ffe38a, #d8a63a); box-shadow: 0 4px 0 #a9803a; }
.note span { font: 900 1.4rem var(--f-body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pay-box { min-width: min(520px, 100%); min-height: 130px; text-align: center; border: 4px dashed #d8b064 !important; font-size: 1.1rem; }
.pb-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 60px; }
.pb-n { font: 900 1.6rem var(--f-body); color: #27385f; }

/* opening day service */
.serve { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "cust glass btns" "bill bill bill"; gap: 14px; align-items: center; position: relative; }
.sv-cust { grid-area: cust; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sv-order { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; background: #fff; border-radius: 18px; padding: 6px 12px; border: 3px solid #f6c64e; font-size: 1.3rem; }
.sv-order .gl-svg { width: 70px; height: 96px; }
.sv-order small { width: 100%; font-weight: 800; font-size: .95rem; }
.sv-glass { grid-area: glass; display: flex; flex-direction: column; align-items: center; }
.sv-gl { width: 100%; height: 280px; }
.sv-made { font-size: 1.8rem; min-height: 2.2rem; }
.sv-btns { grid-area: btns; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-b { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid #e8d9bf; background: #fff; border-radius: 20px; padding: 10px 6px; font-size: 2.2rem; cursor: pointer; box-shadow: 0 6px 0 #e0d2b8; transition: transform .1s; }
.sv-b:active { transform: translateY(4px); box-shadow: 0 2px 0 #e0d2b8; }
.sv-b small { font: 800 .9rem var(--f-body); color: #27385f; }
.sv-b.go { grid-column: 1 / -1; background: #f6c64e; border-color: #d8a63a; box-shadow: 0 6px 0 #a9803a; }
.sv-bill { grid-area: bill; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; border-radius: 18px; padding: 10px; font-size: 1.2rem; animation: popIn .4s; }
.sv-earn { position: absolute; top: -8px; inset-inline-end: 0; background: #27385f; color: #ffd27a; border-radius: 999px; padding: 4px 16px; font: 900 1.3rem var(--f-body); }

@media (max-width: 700px) {
  .rc-work { grid-template-columns: 1fr 1fr; grid-template-areas: "jug glass" "ctrl ctrl" "stock tray"; }
  .rc-work.two { grid-template-columns: 1fr 1fr; grid-template-areas: "jug pot" "ctrl ctrl"; }
  .rc-glass { height: 220px; } .rc-gl { height: 190px; }
  .rc-q, .rc2, .rc-q2, .lab2g, .buy, .sell, .bud, .bud2 { grid-template-columns: 1fr; }
  .rc-cust { width: 76px; height: 76px; }
  .cp-row { grid-template-columns: repeat(2, 1fr); }
  .tm { flex-direction: column; }
  .pod-s { width: 74px; }
  .ph-cups { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sh-it { width: 96px; } .sh-it svg { width: 60px; height: 60px; }
  .cmp-it { width: 140px; } .cmp-it svg { width: 90px; height: 90px; }
  .price-cards { grid-template-columns: repeat(3, 1fr); }
  .serve { grid-template-columns: 1fr 1fr; grid-template-areas: "cust glass" "btns btns" "bill bill"; }
  .sv-btns { grid-template-columns: repeat(4, 1fr); } .sv-b.go { grid-column: 1 / -1; } .sv-b { font-size: 1.5rem; padding: 6px 2px; } .sv-b small { font-size: .75rem; }
  .sv-gl { height: 200px; }
}
/* s1 boards sit on a soft panel so they read clearly over the illustrated rooms */
.rc, .rc-work, .rc-q, .rc2, .rc-q2, .cups, .lab2g, .phg, .shop, .cmp, .buy, .sell, .bud, .bud2, .pay2, .serve { width: 100%; box-sizing: border-box; background: rgba(255, 250, 240, .78); backdrop-filter: blur(3px); border-radius: 30px; padding: clamp(10px, 1.6cqw, 18px); box-shadow: 0 10px 30px rgba(39, 56, 95, .12); }
.serve { padding-top: 26px; } .sv-earn { top: 6px; inset-inline-end: 10px; }