/* ── Turtle Pack — art direction matched to the reference game ───────────── */
:root {
  --ink: #5a3b16;
  --sun-1: #ffd464;
  --board-frame: #9aeec5;
  --board-frame-2: #6cdba6;
  --board-inner: #e3f8eb;
  --slot: #ffffff;
  --btn: #ffd23f;
  --btn-deep: #f08a1c;
  --btn-green: #7ddc6a;
  --btn-green-deep: #3fa33a;
  --bad: #e0413c;
  --panel: rgba(255, 255, 255, .92);
  --shadow: 0 4px 0 rgba(120, 70, 20, .25), 0 8px 18px rgba(120, 70, 20, .18);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; min-height: 100vh; height: 100%; overflow: hidden;
  background-color: #ffe17a;
}
body {
  color: var(--ink);
  font-family: "Mitr", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  background: repeating-linear-gradient(90deg, #ffe17a 0px, #ffe17a 32px, #fdd45b 32px, #fdd45b 64px);
  display: flex;
  justify-content: center;
}
#app {
  width: 100%; max-width: 414px; margin: 0 auto; height: 100vh; height: 100dvh;
  overflow: hidden; box-sizing: border-box;
  padding: 4px 6px calc(6px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  overflow-y: auto;
}
.play-screen {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; width: 100%; overflow: hidden; box-sizing: border-box;
}
h1, h2 { margin: 0; }

/* headline in the reference's sticker style */
.title {
  text-align: center; font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 900; letter-spacing: .5px;
  color: #fff6d0; -webkit-text-stroke: 3px #e08a1a; paint-order: stroke fill; line-height: 1.55;
  text-shadow: 0 3px 0 #c9740f, 0 6px 10px rgba(120, 70, 20, .35);
  margin: 2px 0 4px; font-family: "Mitr", sans-serif;
}
.sub { text-align: center; font-size: .92rem; color: #7c5626; margin: -2px 0 2px; font-weight: 600; font-family: "Mitr", sans-serif; }

/* decorative rainbow pack strip behind the header */
.pack-strip { display: flex; overflow: hidden; height: 34px; margin: -6px -12px 0; opacity: .95; pointer-events: none; }
.pack-strip span { flex: 0 0 34px; transform: rotate(calc(var(--i) * 7deg - 20deg)); margin-left: -6px; }

/* ── panels, pills, buttons ─────────────────────────────────────────────── */
.card { background: var(--panel); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); border: 2px solid #fff; }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.hud { display: flex; gap: 8px; }
.stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(#fff, #ffeec4); border: 2px solid #fff; border-radius: 14px;
  padding: 5px 4px; font-size: .68rem; color: #9a6a2a; font-weight: 700; box-shadow: 0 3px 0 #e6a94d;
  font-family: "Mitr", sans-serif;
}
.stat b { font-size: 1.3rem; color: #d7591b; line-height: 1.1; }

/* ── Topbar (Matched to Mockup: Avatar, 👤 0 [Follow], Energy pill, Coin pill) ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; padding: 2px 0 3px; box-sizing: border-box; flex-shrink: 0;
  gap: 2px;
}
.topbar .who { display: flex; align-items: center; gap: 3px; }
.topbar .avatar-ring {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.topbar .user-meta {
  display: inline-flex; align-items: center; gap: 3px;
  background: #73421b; border: 1.5px solid #a86c35; border-radius: 999px;
  padding: 2px 3px 2px 6px; color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.3);
}
.topbar .user-ico { display: flex; align-items: center; }
.topbar .user-count { font-size: .78rem; font-weight: 900; color: #ffffff; font-family: "Mitr", sans-serif; }
.btn-follow {
  background: linear-gradient(180deg, #ff4d72, #e51d45);
  color: #fff; font-size: .7rem; font-weight: 900; font-family: "Mitr", sans-serif;
  border-radius: 999px; padding: 2px 6px; border: 1.5px solid #ffffff;
  box-shadow: 0 2px 0 #a8102e, 0 3px 5px rgba(0,0,0,.15);
  cursor: pointer; min-height: 0; line-height: 1.1; margin-left: 1px;
}
.btn-follow:active { transform: translateY(1.5px); box-shadow: 0 0 0 #a8102e; }

.top-stats { display: flex; align-items: center; gap: 3px; }
.pill-stat {
  display: inline-flex; align-items: center; gap: 2px;
  background: #73421b; border: 1.5px solid #a86c35; border-radius: 999px;
  padding: 2px 2px 2px 5px; color: #ffffff; font-size: .75rem; font-weight: 800;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.3);
}
.pill-stat.coin-pill { border-color: #b07828; }
.pill-icon { display: flex; align-items: center; margin-left: -2px; }
.pill-num { font-weight: 900; font-family: "Mitr", sans-serif; }
.pill-plus {
  background: linear-gradient(180deg, #ffb81c, #f57c00);
  border: 1.5px solid #ffffff; border-radius: 50%; width: 18px; height: 18px;
  color: #fff; font-size: .84rem; font-weight: 900; display: grid; place-items: center;
  padding: 0; min-height: 0; box-shadow: 0 1px 2px rgba(0,0,0,.3); cursor: pointer;
  line-height: 1; font-family: "Mitr", sans-serif;
}
.pill-plus:active { transform: scale(.92); }

/* ── Header Stage (3D Shelf + Progress Bar + Radiant Lucky Turtle) ───────── */
.header-stage {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0; flex-shrink: 0; width: 100%; box-sizing: border-box;
}
.stage-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stage-right {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex-shrink: 0; width: 132px;
}
.level-help-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-bottom: 3px;
}
.level-lbl {
  font-size: .84rem; font-weight: 800; color: #8a6a3a; white-space: nowrap;
  font-family: "Mitr", sans-serif;
}
.btn-help {
  background: transparent; border: 0; padding: 0; min-height: 0;
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  color: #8a6a3a; font-size: .84rem; font-weight: 800;
}
.btn-help .help-text { font-family: "Mitr", sans-serif; }
.btn-help:active { transform: scale(.92); }

/* 3D Wooden Shelf with 8 standing packs */
.wood-shelf-wrap { position: relative; padding-bottom: 6px; width: 100%; }
.shelf-pack-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 3px; margin-bottom: -2px; position: relative; z-index: 3;
}
.shelf-pack-list {
  display: flex; justify-content: space-between; align-items: flex-end;
  width: 100%; gap: 0.5px;
}
.shelf-pack-item {
  flex: 1; min-width: 0; display: flex; justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.shelf-pack-item svg { width: 100%; max-width: 27px; height: auto; display: block; }
.wood-shelf { position: relative; width: 100%; z-index: 2; }
.wood-shelf-top {
  height: 8px; background: linear-gradient(180deg, #f2d19f 0%, #dea76f 100%);
  border-radius: 5px 5px 0 0; border: 1.5px solid #824716; border-bottom: none;
}
.wood-shelf-face {
  height: 10px; background: linear-gradient(180deg, #b57539 0%, #925723 100%);
  border-radius: 0 0 5px 5px; border: 1.5px solid #582806;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.wood-shelf-leg {
  position: absolute; bottom: -5px; width: 14px; height: 6px;
  background: #925723; border: 1.5px solid #582806; border-top: none; border-radius: 0 0 3px 3px;
}
.wood-shelf-leg.leg-left { left: 10px; }
.wood-shelf-leg.leg-right { right: 10px; }

/* Target Progress Area (Orb left, groove center, Star right) */
.target-progress-area { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 2px; }
.target-progress-groove { display: flex; align-items: center; width: 100%; position: relative; }
.target-orb { position: relative; z-index: 5; flex-shrink: 0; }
.target-track {
  flex: 1; height: 18px; background: #6c3b16; border: 2.2px solid #ffffff;
  border-radius: 999px; margin: 0 -8px; position: relative; overflow: hidden;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.2);
}
.target-fill-bar {
  height: 100%; background: linear-gradient(180deg, #fff754 0%, #ffc519 50%, #f79600 100%);
  border-radius: 999px; box-shadow: 0 0 10px rgba(255, 220, 0, .8);
  transition: width .35s cubic-bezier(.2, .9, .3, 1);
}
.target-star { position: relative; z-index: 5; flex-shrink: 0; }
.target-sub-text {
  font-size: .84rem; font-weight: 900; color: #522703; margin-top: 2px; text-align: center;
  font-family: "Mitr", sans-serif;
}

/* Radiant Lucky Turtle Showcase */
.lucky-showcase {
  position: relative; width: 122px; height: 122px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lucky-sunburst {
  position: absolute; width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 20%, #ffe985 55%, #fbd24a 78%, rgba(251, 210, 74, 0) 100%);
  box-shadow: 0 0 22px rgba(255, 236, 130, .9);
  z-index: 1; pointer-events: none;
}
.lucky-sunburst-rays {
  position: absolute; width: 115px; height: 115px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.65) 0deg 15deg, transparent 15deg 30deg,
    rgba(255,255,255,.65) 30deg 45deg, transparent 45deg 60deg,
    rgba(255,255,255,.65) 60deg 75deg, transparent 75deg 90deg,
    rgba(255,255,255,.65) 90deg 105deg, transparent 105deg 120deg,
    rgba(255,255,255,.65) 120deg 135deg, transparent 135deg 150deg,
    rgba(255,255,255,.65) 150deg 165deg, transparent 165deg 180deg,
    rgba(255,255,255,.65) 180deg 195deg, transparent 195deg 210deg,
    rgba(255,255,255,.65) 210deg 225deg, transparent 225deg 240deg,
    rgba(255,255,255,.65) 240deg 255deg, transparent 255deg 270deg,
    rgba(255,255,255,.65) 270deg 285deg, transparent 285deg 300deg,
    rgba(255,255,255,.65) 300deg 315deg, transparent 315deg 330deg,
    rgba(255,255,255,.65) 330deg 345deg, transparent 345deg 360deg);
  animation: raySpin 20s linear infinite; pointer-events: none; z-index: 1; opacity: .22;
}
@keyframes raySpin { to { transform: rotate(360deg); } }
.lucky-fig {
  position: relative; z-index: 2; width: 90px; height: 90px; margin-top: -8px;
  filter: drop-shadow(0 6px 10px rgba(110, 50, 160, .25));
  animation: luckyBob 2.4s ease-in-out infinite alternate;
}
@keyframes luckyBob {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.04); }
}
.lucky-badge {
  position: relative; z-index: 3; margin-top: -8px;
  background: linear-gradient(180deg, #f9873a 0%, #e8631a 100%);
  border: 2.5px solid #ffffff; border-radius: 999px;
  color: #ffffff; font-size: .84rem; font-weight: 900;
  padding: 2px 14px; box-shadow: 0 3px 0 #943703, 0 4px 6px rgba(0,0,0,.2);
  white-space: nowrap; font-family: "Mitr", sans-serif;
}

/* ── Rule Pill Banner (rule เด็งกรรใช้แก้ม) ───────────────────────────────── */
.rule-banner { display: flex; justify-content: center; margin: 1px 0 -20px; flex-shrink: 0; position: relative; z-index: 4; }
.rule-pill {
  background: #ffffff; border: 2.5px solid #a6dcc6; border-radius: 999px;
  padding: 4px 22px; box-shadow: 0 2px 0 #8cc9b0, 0 3px 8px rgba(0,0,0,.08);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 0;
}
.rule-pill:active { transform: scale(.98); }
.rule-lead { font-weight: 900; font-size: 1.06rem; font-family: "Mitr", sans-serif; letter-spacing: .5px; }
.rule-text { font-size: .92rem; font-weight: 800; font-family: "Mitr", sans-serif; white-space: nowrap; letter-spacing: .5px; }

/* ── Mint Green 3x3 Game Board Frame ─────────────────────────────────────── */
.board-frame {
  background: #d6f3e6;
  border-radius: 28px; padding: 26px 10px 10px; box-sizing: border-box;
  box-shadow: 0 6px 16px rgba(80, 160, 125, .18), inset 0 2px 0 rgba(255, 255, 255, .9);
  border: 3px solid #a6dcc6; position: relative;
  width: 100%; max-width: min(348px, 46vh); aspect-ratio: 1 / 1.04; margin: 0 auto; flex-shrink: 1;
}
.board {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 8px; width: 100%; height: 100%; box-sizing: border-box;
}
.slot {
  position: relative; background: #ffffff; border-radius: 20px; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(50, 140, 95, .12), inset 0 -3px 0 #e0f1e8;
  border: 2px solid #c9ebdc; transition: box-shadow .18s, transform .22s cubic-bezier(.2, 1.5, .4, 1);
  overflow: hidden;
}
.slot .n {
  position: absolute; right: 8px; bottom: 4px; font-size: 1.2rem; color: #a9d9c5;
  font-weight: 900; font-family: "Mitr", system-ui, sans-serif; pointer-events: none; z-index: 3;
}
.slot .sprite { width: 92%; height: 92%; display: grid; place-items: center; position: relative; z-index: 2; }
.slot .turtle-svg { animation: pop .28s cubic-bezier(.2, 1.5, .4, 1); }
.slot.hl { box-shadow: 0 0 0 4px var(--btn), 0 0 22px #ffd23f; }
.slot.lucky { box-shadow: 0 0 0 4px #ff5a2a, 0 0 26px #ff5a2a; animation: luckyGlow .8s ease-in-out infinite alternate; }
.slot.out .sprite { animation: vanish .36s ease-in forwards; }
.slot .sprite.dropping { animation: drop .42s cubic-bezier(.3, 1.4, .5, 1); }
.slot .sprite.burst { animation: burst .26s ease-in forwards; }

/* ── Bottom Arcade Console (Left Basket, Center Pack, Right 3D Button) ──── */
.play-console {
  display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 4px;
  align-items: end; width: 100%; flex-shrink: 0; box-sizing: border-box;
  height: clamp(118px, 17vh, 148px); padding-bottom: 2px;
}
.c-box {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.c-box .art { display: grid; place-items: center; width: 100%; }
.c-box .art svg { max-width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.count-badge {
  position: absolute; top: 6px; right: 4px; width: 30px; height: 30px; border-radius: 50%;
  background: #7a4a22; border: 2.5px solid #ffffff;
  color: #ffffff; font-size: .95rem; font-weight: 900; font-family: "Mitr", sans-serif;
  display: grid; place-items: center;
  box-shadow: 0 3px 6px rgba(0,0,0,.35); z-index: 5;
}
.pack-badge { top: auto; bottom: 2px; right: 6px; }

/* Right action box with AUTO switch and chunky 3D arcade button */
.action-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auto-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.auto-lbl { font-size: .92rem; font-weight: 800; color: #7a5a30; letter-spacing: .5px; font-family: "Mitr", sans-serif; }
.auto-switch {
  width: 48px; height: 25px; border-radius: 999px;
  background: #764117; border: 2px solid #522705; padding: 2px;
  position: relative; cursor: pointer; box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
  min-height: 0; transition: background .2s ease;
}
.auto-switch.on { background: #3ab82a; border-color: #206e15; }
.auto-knob {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fdfaf2; box-shadow: 0 2px 4px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.2, 1.2, .4, 1);
}
.auto-switch.on .auto-knob { transform: translateX(23px); }

/* Chunky 3D Arcade Push Button (Mockup 100%) */
.arcade-push-btn {
  background: transparent; border: 0; padding: 0; min-height: 0;
  cursor: pointer; position: relative; width: 108px; height: 108px;
  display: grid; place-items: center; box-shadow: none;
}
.btn-outer-collar {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #f5872a 0%, #e1651a 65%, #c24e0c 100%);
  box-shadow: 0 7px 0 #a8420a, 0 10px 14px rgba(150,60,0,.3);
  transition: transform .08s, box-shadow .08s;
}
.btn-inner-dome {
  position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 45% 32%, #fff67a 0%, #ffd91f 62%, #f9b40d 100%);
  border: 2.5px solid #fff6a0; overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 3px 5px rgba(255,255,255,.9), 0 3px 4px rgba(0,0,0,.18);
  transition: transform .08s;
}
.dome-shine {
  position: absolute; top: 4px; left: 16px; width: 42px; height: 19px; border-radius: 50%;
  background: rgba(255,255,255,.8); filter: blur(1px); pointer-events: none;
}
.dome-text {
  position: relative; z-index: 3; font-size: 1.3rem; font-weight: 900;
  color: #542802; font-family: "Mitr", sans-serif; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.arcade-push-btn:active:not(:disabled) .btn-outer-collar {
  transform: translateY(5px); box-shadow: 0 2px 0 #7e2d00, 0 4px 6px rgba(120,40,0,.3);
}
.arcade-push-btn:active:not(:disabled) .btn-inner-dome {
  transform: translateY(5px);
}
.arcade-push-btn:disabled {
  filter: grayscale(.6) brightness(.9); opacity: .72; cursor: not-allowed;
}

/* Audio mute button */
.btn-sound {
  background: #fff; border-radius: 50%; width: 28px; height: 28px; min-height: 0;
  padding: 0; display: grid; place-items: center; color: #8a5a20;
  box-shadow: inset 0 0 0 1.5px #ffd88a, 0 2px 0 #e6a94d;
}
.btn-sound:active { transform: translateY(2px); }

/* ── Modal Dialog for Rules & Audio ───────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 1000;
  display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  animation: modalFadeIn .2s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog {
  background: #ffffff; border-radius: 22px; padding: 18px 20px;
  max-width: 360px; width: 100%; box-sizing: border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4); border: 3.5px solid #8be4c4;
  animation: modalPop .24s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes modalPop { from { transform: scale(.92); } to { transform: scale(1); } }
.modal-title {
  font-size: 1.25rem; font-weight: 900; color: #522e11; text-align: center;
  margin: 0 0 12px; font-family: "Mitr", sans-serif;
}
.modal-body {
  display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: #4a2908;
  line-height: 1.4;
}
.rule-item {
  background: #f5fdf9; border: 1.5px solid #d4f3e6; border-radius: 12px;
  padding: 8px 10px;
}
.rule-item b { color: #166e4a; }
.modal-audio {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 10px; border-top: 1.5px dashed #e0c8b0;
  font-size: .85rem; font-weight: 800; color: #522e11;
}
.btn-sound-toggle {
  background: #fef1db; border: 2px solid #e2a048; border-radius: 999px;
  padding: 5px 14px; font-size: .82rem; font-weight: 800; color: #763b0a;
  cursor: pointer;
}
.btn-sound-toggle:active { transform: scale(.95); }

/* ── lucky color picker ─────────────────────────────────────────────────── */
.colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; justify-items: center; }
.swatch {
  width: 100%; aspect-ratio: 1; min-height: 0; padding: 6px; border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, #ffffff, #fff2db);
  box-shadow: inset 0 0 0 2px #f6d296, 0 3px 0 #d9ab5f;
  transition: transform .12s, box-shadow .12s;
}
.swatch.sel {
  background: radial-gradient(circle at 50% 45%, #fff6c2, #ffd76a);
  box-shadow: 0 0 0 4px #ff5a2a, 0 0 18px rgba(255, 90, 40, .75);
  transform: translateY(-3px) scale(1.05);
}
.swatch svg { width: 100%; height: 100%; }

/* ── roulette / bonus wheel ─────────────────────────────────────────────── */
.wheel-wrap { position: relative; width: min(78vw, 300px); margin: 4px auto; }
.wheel-pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 3; width: 0; height: 0; border: 14px solid transparent; border-top: 26px solid var(--bad); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.wheel {
  aspect-ratio: 1; border-radius: 50%; position: relative; border: 10px solid var(--sun-1);
  box-shadow: 0 0 0 5px #e08a1a, var(--shadow); transition: transform 3.4s cubic-bezier(.12, .72, .08, 1);
}
.wheel .seg { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-weight: 900; font-size: .6rem; color: #4a2b06; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.wheel .seg i { font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 52px; text-align: center; line-height: 1.1; }
.wheel .seg em { display: block; line-height: 0; }
.wheel-hub { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a7a, #d62f2f); box-shadow: 0 0 0 7px var(--sun-1), 0 5px 10px rgba(0, 0, 0, .3); z-index: 2; }
.tool-card { display: flex; gap: 10px; align-items: center; text-align: left; }
.tool-card .badge { flex: 0 0 52px; height: 52px; display: grid; place-items: center; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 3px #ffd88a; font-weight: 900; color: #e2761b; }

/* ── banners / overlays ─────────────────────────────────────────────────── */
.banner { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 40; }
.banner b {
  font-size: clamp(2.2rem, 12vw, 3.5rem); font-weight: 900; color: #fff566;
  -webkit-text-stroke: 4px #c24b00; paint-order: stroke fill; line-height: 1.5;
  text-shadow: 0 5px 0 #872e00, 0 10px 20px rgba(0, 0, 0, .45);
  animation: bannerIn .55s cubic-bezier(.2, 1.6, .4, 1);
}
.banner .rw { display: block; text-align: center; margin-top: 4px; font-size: 1.15rem; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #d7591b; text-shadow: 0 3px 0 #943509, 0 6px 10px rgba(0,0,0,.35); }
@keyframes bannerIn { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: none; } }
.float { position: fixed; z-index: 45; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #e0761b, 0 4px 8px rgba(0,0,0,.3); font-size: 1.3rem; pointer-events: none; animation: floatUp 1.1s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.7); opacity: 0; } 25% { transform: translateY(-14px) scale(1.1); opacity: 1; } 100% { transform: translateY(-72px) scale(1); opacity: 0; } }

.modal { position: fixed; inset: 0; background: rgba(60, 30, 5, .68); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal .box { background: linear-gradient(#fff9ea, #ffe9c2); border-radius: 22px; padding: 16px; width: min(94vw, 420px); box-shadow: var(--shadow); text-align: center; }

/* ── victory / ranking ──────────────────────────────────────────────────── */
.victory-pile { background: linear-gradient(#ffe9b0, #ffd383); border: 4px solid #fff; border-radius: 18px; padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; box-shadow: inset 0 0 18px rgba(200, 120, 20, .3); }
.victory-pile svg { width: 100%; height: auto; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .2)); }
.big-num { text-align: center; font-size: 2.6rem; font-weight: 900; color: #3fbf46; line-height:1.5; text-shadow: 0 3px 0 #1d7a22, 0 6px 10px rgba(0,0,0,.25); }
.rank-row { display: flex; align-items: center; gap: 8px; background: linear-gradient(#fff, #fff0d2); border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; box-shadow: 0 2px 0 #e7c07a; font-weight: 700; }
.rank-row.me { background: linear-gradient(#fff3b0, #ffd964); box-shadow: 0 2px 0 #d79a24; }
.rank-row .pos { flex: 0 0 30px; text-align: center; font-weight: 900; color: #b07a22; }
.rank-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .val { color: #d7591b; font-weight: 900; }
.medal { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.m1 { background: #ffb61e; } .m2 { background: #9fc6da; } .m3 { background: #d98a55; }

@media (orientation: landscape) and (max-height: 560px) {
  #app { max-width: 880px; }
  .play-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* milestone: pick one of three closed sacks */
.bag-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.bag-pick .bag { background: #fff; border-radius: 18px; padding: 8px 4px 10px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 4px 10px rgba(120,70,10,.15); display: grid; justify-items: center; gap: 6px; }
.bag-pick .bag button { padding: 6px 14px; font-size: 1rem; }
.bag-pick .bag.chosen { animation: pop .45s ease-out; outline: 3px solid #f5b841; }
.bag-pick .bag.dim { opacity: .45; }
.bag-pick .got { font-size: 1.25rem; font-weight: 800; color: #d7591b; }

/* 大败: same result card, muted */
.title.defeat { color: #eef4ff; -webkit-text-stroke-color: #3f6fc4; text-shadow: 0 3px 0 #2f559e, 0 6px 10px rgba(30, 60, 120, .35); }
.card.defeat .victory-pile { filter: grayscale(.55) brightness(.95); }
.stat small.target { font-size: .6em; opacity: .7; margin-left: 2px; }

/* ── Dynamic VFX: Flying Turtles, Sparkles, and Haptic Bounces ───────────── */
.flying-turtle {
  position: fixed;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
  animation: flyArc .48s cubic-bezier(.16, .85, .32, 1) forwards;
}

@keyframes flyArc {
  0% {
    transform: translate(var(--sx), var(--sy)) scale(1.25) rotate(0deg);
    opacity: 1;
  }
  45% {
    transform: translate(calc((var(--sx) + var(--ex)) * .5 - 18px), calc(min(var(--sy), var(--ey)) - 45px)) scale(1.1) rotate(-18deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--ex), var(--ey)) scale(.35) rotate(-35deg);
    opacity: .85;
  }
}

.basket-bob {
  animation: basketJiggle .4s cubic-bezier(.2, 1.5, .35, 1) !important;
}
@keyframes basketJiggle {
  0% { transform: scale(1); }
  35% { transform: scale(1.28) translateY(4px); filter: brightness(1.15); }
  65% { transform: scale(.92) translateY(-2px); }
  100% { transform: scale(1); }
}

.caddy-pulse {
  animation: caddyGlow .45s cubic-bezier(.2, 1.4, .4, 1) !important;
}
@keyframes caddyGlow {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); filter: drop-shadow(0 0 12px #ffd76a); }
  100% { transform: scale(1); }
}

.spark-particle {
  position: fixed;
  pointer-events: none;
  z-index: 105;
  animation: sparkBurst .55s cubic-bezier(.12, .8, .3, 1) forwards;
}
@keyframes sparkBurst {
  0% {
    transform: translate(-50%, -50%) scale(.2);
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx) * 1.35), calc(-50% + var(--dy) * 1.35 + 16px)) scale(0);
  }
}

/* Auto mode pulsing button aura */
.btn-open-3d.auto-running {
  background: linear-gradient(180deg, #ffea78 0%, #ffbb10 50%, #f08e00 100%);
  box-shadow: 0 0 0 4px #ffd76a, 0 0 22px rgba(255, 200, 30, .7), 0 6px 0 #d67a0a;
  animation: autoPulse 1.1s ease-in-out infinite alternate;
}
@keyframes autoPulse {
  from { box-shadow: 0 0 0 3px #ffd76a, 0 0 14px rgba(255, 200, 30, .5), 0 6px 0 #d67a0a; }
  to { box-shadow: 0 0 0 6px #ff8ad1, 0 0 28px rgba(255, 120, 180, .8), 0 6px 0 #d67a0a; }
}

/* Clear board sweep wave */
.board-frame.clearing-active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 35;
  animation: sweepWave .65s ease-out forwards;
}
@keyframes sweepWave {
  0% { transform: translateX(-110%) skewX(-20deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(120%) skewX(-20deg); opacity: 0; }
}


/* ── base controls used by the non-play screens (login, order, lucky, result, ranking) ── */
input {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  padding: 11px 14px; border-radius: 14px; border: 2px solid #f0d089; background: #fff;
  box-shadow: inset 0 2px 4px rgba(150, 100, 30, .15); outline: none;
}
input:focus { border-color: #f08a1c; box-shadow: inset 0 2px 4px rgba(150, 100, 30, .15), 0 0 0 3px rgba(240, 138, 28, .25); }
button { font-family: "Mitr", sans-serif; }
button.go, button.ghost {
  font-size: 1.05rem; font-weight: 800; padding: 10px 16px; border: 0; border-radius: 16px; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
button.go { background: linear-gradient(#a6f08e, var(--btn-green)); color: #1d5416; box-shadow: 0 5px 0 var(--btn-green-deep), 0 9px 14px rgba(40, 110, 30, .25); }
button.ghost { background: linear-gradient(#fff, #ffeec4); color: #9a5a12; box-shadow: 0 5px 0 #e6a94d, 0 9px 14px rgba(120, 70, 20, .18); }
button.go:active:not(:disabled), button.ghost:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
button.go:disabled, button.ghost:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
button.wide { width: 100%; margin-top: 12px; }
.err { min-height: 1.2em; margin: 8px 0 0; text-align: center; color: var(--bad); font-weight: 700; font-size: .9rem; }
.muted { color: #9a7a4a; font-size: .85rem; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; box-shadow: 0 2px 0 #e6a94d; }
.orders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.order-card { background: linear-gradient(#fffdf5, #ffeec4); border: 2px solid #fff; border-radius: 18px; padding: 10px 8px 12px; box-shadow: var(--shadow); text-align: center; display: grid; justify-items: center; gap: 4px; }
.order-card .qty { font-size: 1.25rem; font-weight: 900; color: #d7591b; }
.order-card .nm { font-weight: 700; color: #7c5626; }
.order-card button { width: 100%; font-size: .95rem; padding: 8px 6px; }

/* ── artwork cut from the reference renders ── */
img.turtle-svg { display: block; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.slot .sprite img.turtle-svg { width: 100%; height: 100%; }
.slot .sprite img.turtle-svg { filter: drop-shadow(0 3px 3px rgba(60, 40, 90, .22)); }
.swatch img { width: 100%; height: 100%; }
.victory-pile img { width: 100%; height: auto; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .2)); }
.lucky-fig img { width: 100%; height: 100%; }
.wood-shelf-wrap { padding-bottom: 0; }
.shelf-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(90, 50, 10, .22)); }
.c-box .art img.art-img { max-width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 5px rgba(90, 50, 10, .22)); }

/* the stripes belong to the page canvas, so they always fill the whole window */
html { background: repeating-linear-gradient(90deg, #ffe17a 0px, #ffe17a 32px, #fdd45b 32px, #fdd45b 64px) fixed; }
body { background: transparent; }

/* ── centre-stage pack opening ── */
.open-stage { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.os-shade { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 240, 170, .30), rgba(60, 35, 10, .55)); }
.os-pack { grid-area: 1 / 1; position: relative; aspect-ratio: 560 / 532; opacity: 0; }
.os-half { position: absolute; inset: 0; filter: drop-shadow(0 8px 10px rgba(50, 20, 0, .35)); }
.os-half img { display: block; width: 100%; height: 100%; }
.os-turtle { grid-area: 1 / 1; opacity: 0; filter: drop-shadow(0 8px 12px rgba(50, 20, 0, .35)); }
.os-turtle img { display: block; width: 100%; height: 100%; }

.os-pack > .art-img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(50, 20, 0, .35)); }
.os-flash { grid-area: 1 / 1; width: 150%; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, 0) 65%); }

/* animated pictures carry no live filters: cheaper to repaint on phones */
.os-half, .os-turtle, .slot .sprite img.turtle-svg { filter: none; }

/* ── collection box: back wall, the pile of collected turtles, front wall on top ── */
.box-art { position: relative; aspect-ratio: 560 / 512; max-width: 100%; }
.box-art img.box-back { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 5px rgba(90, 50, 10, .25)); }
.box-art .pile { position: absolute; inset: 0; z-index: 0; }   /* own stacking context: the turtles' z-index must not climb over the front wall */
.box-art .pile-t { position: absolute; height: auto; pointer-events: none; }
.box-art img.box-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.pile-fly img { width: 100%; height: 100%; display: block; }

/* ── open button: two pictures (raised / pressed) and a live text label ── */
.arcade-push-btn { width: 118px; height: auto; aspect-ratio: 420 / 337; display: block; position: relative; background: none; border: 0; padding: 0; box-shadow: none; }
.arcade-push-btn .btn-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.arcade-push-btn .btn-img.down { opacity: 0; }
.arcade-push-btn:active:not(:disabled) .btn-img.up { opacity: 0; }
.arcade-push-btn:active:not(:disabled) .btn-img.down { opacity: 1; }
.arcade-push-btn .dome-text {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  font-size: 1.2rem; font-weight: 900; color: #6b3200; text-shadow: 0 1px 0 rgba(255, 255, 255, .75); pointer-events: none;
}
.arcade-push-btn:active:not(:disabled) .dome-text { top: 43%; }
.arcade-push-btn.auto-running .dome-text { font-size: .98rem; }

/* ── cabinet of remaining packs (top of the play screen) ── */
.cabinet { position: relative; width: 100%; aspect-ratio: 900 / 359; flex-shrink: 0; }
.cabinet .cab-img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(90, 50, 10, .25)); }
.cab-packs { position: absolute; inset: 0; }
.cab-pack { position: absolute; height: auto; pointer-events: none; transition: opacity .3s, transform .3s; transform-origin: 50% 100%; }
.cab-pack.gone { opacity: 0; transform: scale(.4) translateY(-8px); }
.cab-hud { position: absolute; left: 4px; right: 4px; top: 4px; z-index: 30; }
.cab-hud .topbar { padding: 0; }
.header-stage { align-items: flex-start; margin-top: 4px; }
.header-stage .stage-left { padding-top: 0; }
.header-stage .level-help-row { justify-content: flex-start; margin-bottom: 4px; }
.header-stage .stage-right { margin-top: -62px; position: relative; z-index: 5; }

/* long box: aspect matches the picture; nothing is drawn over it any more */
.cabinet { aspect-ratio: 900 / 250; }
.cab-pack { transform-origin: 50% 100%; }
.header-stage .stage-right { margin-top: -30px; }

/* reward strip in the pill above the board */
.rule-pill { padding: 4px 14px; gap: 0; max-width: 96%; }
.rule-pill .rs-item { font-family: "Mitr", sans-serif; font-size: .74rem; font-weight: 700; color: #7a4a1f; white-space: nowrap; }
.rule-pill .rs-item + .rs-item { margin-left: 9px; }
.rule-pill .rs-item b { color: #e8631a; font-weight: 900; }
.rule-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.rule-strip .rs-item { font-weight: 700; color: #7a4a1f; }
.rule-strip .rs-item b { color: #e8631a; font-weight: 900; }

/* count badges: a roomy pill on the top-right corner of the box / the pack, so 1–3 digits never crowd */
.badged { position: relative; display: block; width: max-content; }
.badged .count-badge, .badged .pack-badge {
  position: absolute; top: -10px; right: -2px; bottom: auto; left: auto; z-index: 6;
  min-width: 40px; height: 32px; width: auto; padding: 0 10px; border-radius: 999px; box-sizing: border-box;
  font-size: 1.05rem; line-height: 1; letter-spacing: .5px;
  background: linear-gradient(180deg, #8a5628, #6a3c16); border: 2.5px solid #fff; box-shadow: 0 3px 5px rgba(60, 30, 0, .35);
  display: grid; place-items: center;
}

/* the console columns must not grow with their content (the badges hang outside the pictures) */
.play-console { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.play-console .c-box, .play-console .action-box { min-width: 0; }

/* bottom row: fixed, even places for the box, the pack and the button (bottoms aligned) */
.play-console { grid-template-columns: 140px 96px minmax(0, 1fr); gap: 6px; align-items: end; }
.play-console .c-box { align-items: center; }
/* lucky turtle sits beside the progress bar and no longer covers the box */
.header-stage .stage-right { margin-top: 0; }
.lucky-showcase { width: 108px; height: 108px; }
.lucky-sunburst { width: 102px; height: 102px; }
.lucky-fig { width: 78px; height: 78px; margin-top: -6px; }
.stage-right { width: 116px; }

.arcade-push-btn { width: 112px; }
.lucky-showcase { width: 112px; height: 112px; }
.lucky-sunburst { width: 108px; height: 108px; }
.lucky-fig { width: 84px; height: 84px; }

/* "เปิดซอง": a little smaller, centred on the top face of the dome */
.arcade-push-btn .dome-text { font-size: 1.06rem; line-height: 1; top: 30%; }
.arcade-push-btn:active:not(:disabled) .dome-text { top: 38%; }
.arcade-push-btn.auto-running .dome-text { font-size: .9rem; }

/* ── lucky colour glow: bright core that fades out softly, thin fading rays, twinkling sparkles ── */
.lucky-showcase { overflow: visible; }
.lucky-sunburst {
  width: 134px; height: 134px; box-shadow: none; opacity: .95;
  background: radial-gradient(circle, rgba(255, 255, 255, .98) 0%, rgba(255, 252, 215, .9) 26%, rgba(255, 244, 160, .5) 52%, rgba(255, 240, 150, 0) 72%);
  animation: haloPulse 2.8s ease-in-out infinite;
}
.lucky-sunburst-rays {
  width: 152px; height: 152px; opacity: .65;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .8) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 24deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 20%, #000 34%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 20%, #000 34%, transparent 70%);
  animation: raySpin 26s linear infinite;
}
@keyframes haloPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lk-star {
  position: absolute; z-index: 4; pointer-events: none; background: #fffbc0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #fff);
  animation: twinkle 1.9s ease-in-out infinite;
}
.lk-star.s1 { width: 14px; height: 14px; top: 8%; left: 8%; }
.lk-star.s2 { width: 10px; height: 10px; top: 16%; right: 4%; animation-delay: .55s; }
.lk-star.s3 { width: 9px; height: 9px; bottom: 30%; left: 0; animation-delay: 1.1s; }
.lk-star.s4 { width: 12px; height: 12px; bottom: 34%; right: 6%; animation-delay: 1.5s; }
@keyframes twinkle { 0%, 100% { opacity: .1; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .lucky-sunburst, .lucky-sunburst-rays, .lk-star { animation: none; } .lk-star { opacity: .8; } }

/* ── lucky glow v3: soft uneven rays in two counter-rotating layers, warm halo, floating light motes, gentle float ── */
.lucky-sunburst {
  width: 138px; height: 138px; opacity: 1;
  background: radial-gradient(circle, rgba(255, 255, 240, .95) 0%, rgba(255, 246, 190, .8) 22%, rgba(255, 220, 110, .5) 46%, rgba(255, 190, 70, .18) 64%, rgba(255, 190, 70, 0) 76%);
  animation: haloBreath 3.6s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { transform: scale(.96); opacity: .85; filter: hue-rotate(0deg); }
  50% { transform: scale(1.08); opacity: 1; filter: hue-rotate(-8deg); }
}
.lucky-sunburst-rays {
  width: 156px; height: 156px; opacity: .8; animation: none; filter: blur(1.6px);
  background: conic-gradient(from 0deg,
    rgba(255, 245, 190, 0) 0deg, rgba(255, 245, 190, .75) 5deg, rgba(255, 245, 190, 0) 12deg,
    rgba(255, 245, 190, 0) 38deg, rgba(255, 245, 190, .5) 41deg, rgba(255, 245, 190, 0) 46deg,
    rgba(255, 245, 190, 0) 78deg, rgba(255, 245, 190, .85) 86deg, rgba(255, 245, 190, 0) 98deg,
    rgba(255, 245, 190, 0) 132deg, rgba(255, 245, 190, .55) 137deg, rgba(255, 245, 190, 0) 144deg,
    rgba(255, 245, 190, 0) 176deg, rgba(255, 245, 190, .8) 183deg, rgba(255, 245, 190, 0) 194deg,
    rgba(255, 245, 190, 0) 226deg, rgba(255, 245, 190, .5) 230deg, rgba(255, 245, 190, 0) 236deg,
    rgba(255, 245, 190, 0) 268deg, rgba(255, 245, 190, .85) 276deg, rgba(255, 245, 190, 0) 288deg,
    rgba(255, 245, 190, 0) 318deg, rgba(255, 245, 190, .6) 324deg, rgba(255, 245, 190, 0) 334deg, rgba(255, 245, 190, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 30%, rgba(0, 0, 0, .5) 50%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 16%, #000 30%, rgba(0, 0, 0, .5) 50%, transparent 70%);
  animation: raySpin 34s linear infinite;
}
.lucky-sunburst-rays::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg,
    rgba(255, 225, 130, 0) 0deg, rgba(255, 225, 130, .6) 4deg, rgba(255, 225, 130, 0) 9deg,
    rgba(255, 225, 130, 0) 52deg, rgba(255, 225, 130, .7) 58deg, rgba(255, 225, 130, 0) 67deg,
    rgba(255, 225, 130, 0) 104deg, rgba(255, 225, 130, .5) 108deg, rgba(255, 225, 130, 0) 114deg,
    rgba(255, 225, 130, 0) 158deg, rgba(255, 225, 130, .7) 165deg, rgba(255, 225, 130, 0) 174deg,
    rgba(255, 225, 130, 0) 206deg, rgba(255, 225, 130, .5) 210deg, rgba(255, 225, 130, 0) 216deg,
    rgba(255, 225, 130, 0) 250deg, rgba(255, 225, 130, .7) 257deg, rgba(255, 225, 130, 0) 266deg,
    rgba(255, 225, 130, 0) 300deg, rgba(255, 225, 130, .55) 305deg, rgba(255, 225, 130, 0) 312deg, rgba(255, 225, 130, 0) 360deg);
  animation: raySpinBack 22s linear infinite;
}
@keyframes raySpinBack { to { transform: rotate(-360deg); } }
.lk-star {
  clip-path: none; border-radius: 50%; filter: none; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 244, 170, .95) 35%, rgba(255, 220, 110, 0) 72%);
  animation: mote 3.2s ease-in-out infinite;
}
.lk-star.s1 { width: 12px; height: 12px; top: 22%; left: 10%; }
.lk-star.s2 { width: 8px; height: 8px; top: 30%; right: 8%; animation-duration: 2.6s; animation-delay: .9s; }
.lk-star.s3 { width: 7px; height: 7px; bottom: 34%; left: 4%; animation-duration: 3.8s; animation-delay: 1.6s; }
.lk-star.s4 { width: 10px; height: 10px; bottom: 38%; right: 10%; animation-duration: 3s; animation-delay: 2.2s; }
@keyframes mote {
  0% { opacity: 0; transform: translateY(8px) scale(.4); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(.5); }
}
.lucky-fig { animation: luckyFloat 3.4s ease-in-out infinite; }
@keyframes luckyFloat {
  0% { transform: translateY(1px) rotate(-2deg); }
  35% { transform: translateY(-3px) rotate(1.5deg); }
  70% { transform: translateY(-1px) rotate(2deg); }
  100% { transform: translateY(1px) rotate(-2deg); }
}
.lucky-badge { animation: badgeFloat 3.4s ease-in-out infinite; }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .lucky-sunburst-rays::before, .lucky-fig, .lucky-badge { animation: none; } }
/* v3 tweak: stronger contrast on the pale yellow page */
.lucky-sunburst { background: radial-gradient(circle, #fff 0%, rgba(255, 255, 250, .95) 26%, rgba(255, 236, 150, .75) 46%, rgba(255, 196, 60, .35) 62%, rgba(255, 190, 60, 0) 76%); }
.lucky-sunburst-rays { opacity: 1; filter: blur(1.2px) brightness(1.6) saturate(1.4); }
.lucky-sunburst-rays::before { filter: brightness(.85) saturate(1.8); }

/* ── text polish: darker labels, round digits (Fredoka has no Thai, so Thai still falls back to Mitr), bar-aligned caption ── */
.level-lbl, .btn-help { color: #5a3a12; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.level-lbl, .btn-help .help-text, .target-sub-text, .topbar, .topbar .user-count, .rs-item, .count-badge, .pack-badge, .lucky-badge, .slot .num, .slot-no {
  font-family: "Fredoka", "Mitr", sans-serif;
}
.target-sub-text { margin: 2px 36px 0 32px; text-align: center; font-size: .9rem; }
.slot .n { font-family: "Fredoka", "Mitr", sans-serif; }

/* ── package (order) screen ── */
.hud3 { gap: 6px; }
.hud3 .stat { padding: 6px 4px 5px; font-size: .66rem; }
.hud3 .stat b { font-family: "Fredoka", "Mitr", sans-serif; }
.stat-ico { display: grid; place-items: center; height: 22px; }
.stat-ico img { width: 22px; height: 22px; }
.order-card { position: relative; padding-top: 12px; }
.order-card.best { border-color: #ffd23f; box-shadow: 0 0 0 2px #ffb61e, var(--shadow); }
.best-tag {
  position: absolute; top: -8px; right: -6px; z-index: 3; transform: rotate(6deg);
  background: linear-gradient(180deg, #ff6a3d, #e5391a); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
  padding: 5px 9px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 2px 0 #a8240c;
}
.pkg-fan { position: relative; width: 100%; height: 96px; display: flex; justify-content: center; align-items: flex-end; }
.pkg-pack {
  height: 88px; width: auto; margin: 0 -11px; position: relative; z-index: var(--z);
  transform-origin: 50% 100%; transform: rotate(calc(var(--i) * 9deg)) translateY(calc(var(--i) * var(--i) * 1.5px));
  filter: drop-shadow(0 3px 3px rgba(90, 50, 10, .28));
}
.order-card .qty { font-family: "Fredoka", "Mitr", sans-serif; }
.order-card button.go { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rank-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pkg-fan[style*="--n:3"] .pkg-pack { height: 80px; margin: 0 -13px; }
.pkg-fan[style*="--n:4"] .pkg-pack { height: 72px; margin: 0 -15px; }
.pkg-fan { overflow: visible; }
.order-card { overflow: visible; }
/* the page scrolls without a bar, so the 414px column stays visually centred */
#app { scrollbar-width: none; }
#app::-webkit-scrollbar { display: none; }
.pkg-fan[style*="--n:3"] .pkg-pack { height: 84px; margin: 0 -14px; }
.pkg-fan[style*="--n:4"] .pkg-pack { height: 84px; margin: 0 -17px; }

/* ── item wheel: standing wheel, spinning pointer, gold bezel with bulbs ── */
.iw {
  --w: min(88vw, 340px);
  position: relative; width: var(--w); aspect-ratio: 1; margin: 6px auto 4px; flex-shrink: 0;
  filter: drop-shadow(0 16px 10px rgba(96, 48, 0, .38));
}
.iw::before {                     /* soft contact shadow on the page */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -5%; height: 9%; z-index: -1;
  background: radial-gradient(ellipse, rgba(80, 40, 0, .4), transparent 70%);
}
.iw-bezel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 15deg, #fff3a6, #f6b82c, #b8700c, #f9d968, #fff3a6, #f6b82c, #b8700c, #f9d968, #fff3a6);
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, .85), inset 0 -6px 8px rgba(120, 60, 0, .55), 0 0 0 2px #8a4a08;
}
.iw-face {
  position: absolute; inset: 8%; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 8px 16px rgba(110, 55, 0, .5), inset 0 0 0 4px #a8620d, 0 2px 0 rgba(255, 255, 255, .7);
}
.iw-face::before {                /* the face is a little darker toward the rim: reads as a shallow dish */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(150, 80, 10, .28) 100%);
}
.iw-lines, .iw-win, .iw-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.iw-win { opacity: 0; transition: opacity .5s; }
.iw-win.on { opacity: 1; animation: winPulse 1.2s ease-in-out infinite alternate; }
@keyframes winPulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.iw-gloss { background: radial-gradient(ellipse 60% 40% at 32% 18%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%); }
.iw-bulb {
  position: absolute; width: 4.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe680 45%, #e59a10 100%);
  box-shadow: 0 0 6px 2px rgba(255, 226, 120, .9), 0 1px 1px rgba(90, 40, 0, .6);
  animation: bulbA 1s steps(1) infinite;
}
.iw-bulb.b2 { animation-name: bulbB; }
@keyframes bulbA { 0% { filter: none; } 50% { filter: brightness(.55) saturate(.7); box-shadow: 0 0 0 0 transparent, 0 1px 1px rgba(90, 40, 0, .6); } }
@keyframes bulbB { 0% { filter: brightness(.55) saturate(.7); box-shadow: 0 0 0 0 transparent, 0 1px 1px rgba(90, 40, 0, .6); } 50% { filter: none; } }
.iw-cell {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 26%;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; line-height: 1.05;
  font-family: "Fredoka", "Mitr", sans-serif; font-weight: 700; font-size: calc(var(--w) * .038); color: #6b3a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .5s cubic-bezier(.2, 1.5, .4, 1), filter .5s;
}
.iw-cell.win { transform: translate(-50%, -50%) scale(1.22); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 3px rgba(120, 60, 0, .4)); z-index: 4; }
.iw-cell .ti { display: grid; place-items: center; filter: drop-shadow(0 3px 2px rgba(110, 55, 0, .35)); }
.ti-pack { width: auto; display: block; }
.ti-stack { display: flex; }
.ti-stack .ti-pack + .ti-pack { margin-left: -14px; transform: rotate(8deg); }
.ti-stack .ti-pack:first-child { transform: rotate(-8deg); }
.ti-x {
  font-family: "Fredoka", sans-serif; font-weight: 700; line-height: 1; color: #fff8d6;
  background: linear-gradient(180deg, #ffb52e, #e8631a); padding: .12em .38em; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 2px 0 #a8420c;
}
.ti-two { display: flex; }
.ti-two > :first-child { transform: translateX(3px) rotate(-8deg); }
.ti-two > :last-child { transform: translateX(-3px) rotate(8deg); }
.iw-arrow { position: absolute; inset: 0; z-index: 4; transition: transform 3.6s cubic-bezier(.12, .72, .08, 1); pointer-events: none; }
.iw-arrow span {                  /* gold pointer, tip at 24 % of the radius */
  position: absolute; left: 50%; top: 24%; width: 12%; height: 26%; transform: translateX(-50%);
  background: linear-gradient(90deg, #b8700c, #ffe27a 45%, #f6b82c 60%, #a55f08);
  clip-path: polygon(50% 0, 100% 62%, 78% 100%, 22% 100%, 0 62%);
  filter: drop-shadow(0 2px 2px rgba(80, 40, 0, .5));
}
.iw-hub {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 5; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffb0a0 0%, #ee4a3c 38%, #b81f1f 100%);
  box-shadow: 0 0 0 4px #f6b82c, 0 0 0 6px #a55f08, 0 8px 8px rgba(80, 30, 0, .45), inset 0 -6px 8px rgba(100, 0, 0, .4), inset 0 4px 5px rgba(255, 255, 255, .55);
}
.iw-hub::after { content: ""; position: absolute; left: 24%; top: 12%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(1px); }
.tool-card .badge { display: grid; place-items: center; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .iw-bulb, .iw-win.on { animation: none; } }
.iw-cell { width: 30%; }
.iw-cell b { font-size: calc(var(--w) * .036); }
.iw-cell { width: 25%; }
.iw-cell.long { width: 27%; }
.iw-cell.long b { font-size: calc(var(--w) * .03); line-height: 1.08; text-wrap: balance; }
.iw-cell b { white-space: pre-line; }
/* wheel labels: bigger, wrapped inside the wedge */
.iw-cell { width: 25%; }
.iw-cell b { font-size: calc(var(--w) * .042); line-height: 1.1; font-weight: 700; letter-spacing: 0; }
.iw-cell.long { width: 26%; }
.iw-cell.long b { font-size: calc(var(--w) * .038); line-height: 1.08; text-wrap: initial; }

/* ── page background: blue striped room with a glossy tiled floor (assets/bg has pink and yellow too) ── */
html {
  background: #8fdcf8 url("assets/bg/bg_blue.webp") center bottom / cover no-repeat fixed;
}
.modal .iw { --w: min(80vw, 310px); }
.modal .box { overflow: visible; }

/* item wheel: odds chip under each label; BONUS headline big and lowered so the wheel sits in the lower half */
.iw-pct {
  font-style: normal; font-size: calc(var(--w) * .03); font-weight: 700; line-height: 1; margin-top: 2px; padding: 1px 6px;
  color: #fff; background: rgba(150, 80, 10, .55); border-radius: 999px; text-shadow: none;
}
.iw-cell.long .iw-pct { font-size: calc(var(--w) * .028); }
.title.bonus-title {
  font-family: "Fredoka", "Mitr", sans-serif; font-size: clamp(3.2rem, 15vw, 4.4rem); letter-spacing: 4px; line-height: 1.1;
  -webkit-text-stroke: 6px #e08a1a; text-shadow: 0 5px 0 #c9740f, 0 10px 14px rgba(120, 70, 20, .4);
  margin: 34px 0 22px;
}

/* lucky colour page: same big headline rhythm as BONUS, bigger turtles with names, content sits lower */
.title.big-title { font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 1.2; -webkit-text-stroke: 5px #e08a1a; margin: 30px 0 18px; }
.sub.picked { margin: 2px 0 14px; font-size: 1rem; color: #7c5626; }
.sub.picked b { font-weight: 800; }
.colors { gap: 12px 8px; margin: 6px 0 24px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.sw-name { font-family: "Mitr", sans-serif; font-weight: 600; font-size: .82rem; color: #7c5626; line-height: 1; }
.sw-name.on { font-weight: 800; }
.lucky-go { margin-top: 8px; }

/* lucky colours in rows of 3 / 4 / 3, bigger turtles */
.colors { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.color-row { display: flex; justify-content: center; gap: 8px; width: 100%; }
.color-row .sw { width: min(21.5vw, 88px); flex: 0 0 auto; }
.sw-name { font-size: .9rem; }

/* lucky colours: a bit smaller with side margin, clearer helper text */
.color-row { gap: 10px; }
.color-row .sw { width: min(20vw, 84px); }
.colors { gap: 16px; }
.lucky-sub, .sub.picked { font-size: 1.05rem; color: #6a4416; }
.sub.picked { margin: 4px 0 20px; font-size: 1.12rem; }
.sub.picked { margin: 4px 0 12px; }
.colors { gap: 28px; }
/* chosen-colour names keep their turtle colour, with a white outline so every colour reads on the floor */
.sw-name.on, .sub.picked b { -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }

/* progress bar: glossy glass tube with a gold rim and a shiny orange-gold fill */
.target-track {
  height: 24px; border: 0; margin: 0 -10px; background:
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 45%),
    linear-gradient(180deg, #8a4a1c, #5a2c0c);
  box-shadow: 0 0 0 2.5px #f7c04a, 0 0 0 4.5px #a4620c, 0 4px 5px 3px rgba(80, 40, 0, .3), inset 0 4px 7px rgba(0, 0, 0, .7);
}
.target-track::after {           /* glass highlight over the whole tube */
  content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 7px; border-radius: 999px; z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .05)); pointer-events: none;
}
.target-fill-bar {
  position: relative; background: linear-gradient(180deg, #fff98a 0%, #ffd23a 35%, #ff9d12 70%, #e86a06 100%);
  box-shadow: 0 0 12px rgba(255, 190, 40, .9), inset 0 -3px 3px rgba(180, 60, 0, .45);
}
.target-fill-bar::after {        /* sweeping shine */
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) -120% 0 / 60% 100% no-repeat;
  animation: barShine 2.6s ease-in-out infinite;
}
@keyframes barShine { 0% { background-position: -120% 0; } 60%, 100% { background-position: 220% 0; } }
.target-orb, .target-star { filter: drop-shadow(0 3px 2px rgba(80, 40, 0, .4)); }
@media (prefers-reduced-motion: reduce) { .target-fill-bar::after { animation: none; } }

/* progress bar built from the generated artwork (assets/ui/bar_*.webp) */
.target-track {
  height: 30px; margin: 0 -8px; background: url("assets/ui/bar_track.webp?v=1") center / 100% 100% no-repeat;
  border: 0; box-shadow: none; overflow: visible;
}
.target-track::after { display: none; }
.target-fill-clip { position: absolute; left: 5%; right: 5%; top: 22%; bottom: 22%; overflow: hidden; border-radius: 999px; }
.target-fill-bar {
  height: 100%; background: url("assets/ui/bar_fill.webp?v=1") right center / 100% 100% no-repeat;
  border-radius: 0; box-shadow: none; min-width: 6px;
}
.target-fill-bar::after { border-radius: 999px; }
.target-orb, .target-star { display: block; line-height: 0; filter: drop-shadow(0 3px 2px rgba(80, 40, 0, .4)); }
.target-orb img, .target-star img { display: block; }

.target-progress-groove { align-items: center; }
.target-orb, .target-star { align-self: center; }
.target-orb img { width: 28px; height: 28px; }
.target-star img { width: 31px; height: 30px; }
.target-star img { transform: translateY(-2px); }

.pill-star { display: block; width: 22px; height: 21px; filter: drop-shadow(0 2px 1px rgba(80, 40, 0, .4)); }

/* "เก็บแล้ว x/y": brown glass pill with a gold rim, same family as the progress tube */
.target-sub-text {
  align-self: center; margin: 8px 0 0; padding: 3px 16px 4px; border-radius: 999px;
  color: #fff3cf; font-size: .92rem; letter-spacing: .2px; line-height: 1.25;
  background: linear-gradient(180deg, #8a4a1c 0%, #5a2c0c 100%);
  box-shadow: 0 0 0 2px #f7c04a, 0 0 0 3.5px #a4620c, 0 3px 4px 2px rgba(80, 40, 0, .28), inset 0 2px 3px rgba(255, 255, 255, .25);
  text-shadow: 0 1px 0 rgba(60, 25, 0, .7);
}
.target-sub-text b { color: #ffd84a; font-size: 1.05em; }

/* top bar: the three pills share one height and the gold-rimmed glossy brown look of the progress pill */
.topbar .user-meta, .pill-stat {
  min-height: 30px; box-sizing: border-box; align-items: center;
  background: linear-gradient(180deg, #8a4a1c 0%, #5a2c0c 100%); border: 0;
  box-shadow: 0 0 0 1.5px #f7c04a, 0 0 0 2.8px #a4620c, 0 3px 4px 1px rgba(80, 40, 0, .28), inset 0 2px 3px rgba(255, 255, 255, .25);
}
.pill-stat { padding: 2px 3px 2px 6px; gap: 3px; }
.pill-stat.coin-pill { border: 0; }
.topbar .user-meta { padding: 2px 4px 2px 8px; gap: 4px; }
.pill-icon svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.energy-pill .pill-icon { transform: scale(1.12); }
.pill-plus { width: 22px; height: 22px; font-size: 1rem; }
.btn-follow { padding: 3px 8px; }
.topbar { gap: 4px; }

/* event banner: centred over its reward line, thicker outline + dark halo so it reads on the white board */
.banner > div { text-align: center; }
.banner b {
  display: block; text-align: center; -webkit-text-stroke: 7px #b23f00;
  text-shadow: 0 5px 0 #7a2600, 0 0 16px rgba(90, 30, 0, .55), 0 10px 20px rgba(0, 0, 0, .5);
}
.banner .rw { -webkit-text-stroke: 4px #b23f00; paint-order: stroke fill; }

/* reward line under the event banner: cream fill with a thick dark-brown outline so it reads on white tiles too */
.banner .rw {
  color: #fff6c8; font-size: 1.28rem; -webkit-text-stroke: 7px #6b2200; paint-order: stroke fill;
  text-shadow: 0 3px 0 #4a1700, 0 0 14px rgba(70, 20, 0, .6);
}

/* reward pick: a big "?" on each pack, the contents stay hidden until one is chosen */
.bag-art { position: relative; display: block; line-height: 0; }
.bag-q {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); font-style: normal; line-height: 1;
  font-family: "Fredoka", "Mitr", sans-serif; font-weight: 700; font-size: 2.6rem; color: #fff8d6;
  -webkit-text-stroke: 6px #d7591b; paint-order: stroke fill; text-shadow: 0 3px 0 #943509, 0 0 12px rgba(120, 40, 0, .5);
  pointer-events: none;
}
.bag-pick .bag.chosen .bag-q { display: none; }