:root {
  --ink: #432d45;
  --muted: #8d6e86;
  --coral: #ff756f;
  --coral-dark: #e95761;
  --paper: #fffdf7;
  --yellow: #ffd967;
  --purple: #8f75d7;
  --mint: #bfe9dc;
  font-family: "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 12% 8%, #fff7d3 0 3%, transparent 3.2%), radial-gradient(circle at 84% 13%, #ffd8d2 0 4%, transparent 4.2%), linear-gradient(155deg, #ffd8c5 0%, #ffd5d9 51%, #ffe5ae 100%); }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); pointer-events: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

.page-shell { position: relative; width: min(100%, 600px); min-height: 100vh; margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
.sky-decor { position: absolute; z-index: -1; color: rgba(255,255,255,.85); font-weight: 900; }.decor-sun { top: 84px; right: 5%; color: #fff1a8; font-size: 48px; transform: rotate(18deg); animation: twinkle 2.2s ease-in-out infinite; }.decor-heart { top: 285px; left: 2%; color: #fff1f5; font-size: 38px; transform: rotate(-20deg); animation: bob 3.1s ease-in-out infinite; }.decor-sparkle { right: 2%; bottom: 134px; color: #fff6c3; font-size: 54px; animation: twinkle 2.8s ease-in-out infinite reverse; }

.hero { margin-bottom: 19px; text-align: center; }.eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: #b76070; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }.eyebrow span { color: var(--coral); font-size: 15px; }h1, h2, h3, p { margin-top: 0; }h1 { margin: 7px 0 3px; font-size: clamp(38px, 10vw, 52px); font-weight: 900; line-height: 1.12; letter-spacing: -2px; }h1 em { color: var(--coral); font-family: "Ma Shan Zheng", cursive; font-size: 1.2em; font-style: normal; letter-spacing: 0; }.hero p { margin: 0; color: #8f6473; font-size: 13px; }

.arcade-card { position: relative; display: flex; min-height: 570px; flex-direction: column; overflow: hidden; border: 2px solid rgba(67,45,69,.14); border-radius: 26px; background: var(--paper); box-shadow: 0 16px 0 rgba(197,102,103,.13), 0 26px 43px rgba(116,63,76,.2); }.arcade-card::after { position: absolute; z-index: 0; inset: 0; content: ""; opacity: .18; background-image: radial-gradient(#d9c4af .7px, transparent .7px); background-size: 4px 4px; pointer-events: none; }.tape { position: absolute; z-index: 2; top: -15px; width: 90px; height: 31px; opacity: .72; background: #ffd5e0; transform: rotate(-8deg); }.tape-left { left: 28px; }.tape-right { right: 28px; background: #c7e7dc; transform: rotate(9deg); }.ticket-topline, .machine-stage, .ticket-footer { position: relative; z-index: 1; }.ticket-topline { display: flex; justify-content: space-between; padding: 22px 24px 13px; color: #a3798d; font-size: 9px; font-weight: 800; letter-spacing: .8px; }.machine-number { color: var(--coral); }

.machine-stage { display: flex; flex: 1; flex-direction: column; padding: 0 17px 18px; }.machine-marquee { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 0 3px 13px; border: 1.5px solid #e9d2c3; border-radius: 18px; background: linear-gradient(105deg, #fff1dc, #fff9ed); padding: 6px; }.mascot-wrap { position: relative; width: 62px; height: 60px; flex: 0 0 62px; animation: float 3.3s ease-in-out infinite; }.mascot-ears { position: absolute; top: 0; left: 10px; width: 44px; height: 24px; }.mascot-ears i { position: absolute; top: 0; width: 18px; height: 32px; border: 2px solid var(--ink); border-radius: 60% 55% 40% 45%; background: #ffc8d2; transform: rotate(-25deg); }.mascot-ears i:first-child { left: 0; }.mascot-ears i:last-child { right: 0; transform: rotate(25deg) scaleX(-1); }.mascot-ears i::after { position: absolute; top: 5px; left: 5px; width: 7px; height: 17px; border-radius: 50%; background: #f797ad; content: ""; }.mascot-face { position: absolute; top: 18px; left: 5px; width: 53px; height: 42px; border: 2px solid var(--ink); border-radius: 48% 48% 46% 46%; background: #fff0d7; }.eye { position: absolute; top: 15px; width: 4px; height: 7px; border-radius: 50%; background: var(--ink); }.left-eye { left: 15px; }.right-eye { right: 15px; }.blush { position: absolute; top: 23px; width: 9px; height: 4px; border-radius: 50%; background: #f7a8ab; opacity: .7; }.blush-left { left: 7px; }.blush-right { right: 7px; }.smile { position: absolute; top: 25px; left: 22px; width: 8px; height: 4px; border-bottom: 1.5px solid var(--ink); border-radius: 0 0 50% 50%; }

.reel-bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.reel { display: flex; flex-direction: column; align-items: center; min-width: 0; border: 1.5px solid #dec5ca; border-radius: 15px; background: #583d56; padding: 6px 5px 7px; box-shadow: 0 4px 0 #d8b7a9; transition: transform .2s, border-color .2s, background .2s; }.reel.is-locked { border-color: #ffd767; background: #4f394d; transform: translateY(-3px); }.reel-label, .reel-status { color: #f9dfd0; font-size: 8px; font-weight: 900; letter-spacing: .8px; }.reel-status { display: flex; align-items: center; justify-content: center; min-height: 14px; margin-top: 5px; color: #ffd967; font-size: 8px; }.reel-screen { position: relative; width: 100%; height: 139px; overflow: hidden; border: 3px solid #2d2431; border-radius: 10px; background: linear-gradient(180deg, #ffe6a0, #fff7d9 45%, #ffc4a9); box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }.reel-screen::before, .reel-screen::after { position: absolute; z-index: 2; right: 0; left: 0; height: 18px; content: ""; pointer-events: none; }.reel-screen::before { top: 0; background: linear-gradient(#f8d898, transparent); }.reel-screen::after { bottom: 0; background: linear-gradient(transparent, #ffc7aa); }.reel-track { height: 200%; will-change: transform; }.reel-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; flex-direction: column; gap: 4px; padding: 8px 3px; text-align: center; }.reel-cell span { font-size: 39px; filter: drop-shadow(0 2px 0 rgba(255,255,255,.5)); }.reel-cell b { display: -webkit-box; overflow: hidden; color: #472f45; font-size: clamp(11px, 3vw, 13px); line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.game-hint { min-height: 18px; margin: 15px 3px 10px; text-align: center; color: #87697b; font-size: 11px; }.control-deck { display: grid; grid-template-columns: 1.3fr 1fr; gap: 9px; }.start-button, .pause-button { position: relative; min-height: 53px; overflow: hidden; border: 0; border-radius: 15px; cursor: pointer; font-size: 13px; font-weight: 900; transition: transform .15s, box-shadow .15s, opacity .2s; }.start-button { background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark), 0 9px 15px rgba(229,87,97,.2); color: white; }.start-button b { margin-left: 8px; font-size: 12px; }.start-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-dark); }.pause-button { border: 1.5px solid #d7bec6; background: #fff8f0; color: #745367; box-shadow: 0 5px 0 #e4d0c7; }.pause-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #e4d0c7; }.start-button:disabled, .pause-button:disabled { cursor: default; opacity: .46; }.button-shine { position: absolute; top: -30%; left: -26%; width: 27%; height: 160%; transform: rotate(20deg); background: rgba(255,255,255,.3); transition: left .55s ease; }.start-button:hover:not(:disabled) .button-shine { left: 115%; }.start-button span:last-of-type, .start-button b { position: relative; z-index: 1; }

.joystick-panel { display: flex; align-items: center; min-height: 91px; margin-top: 17px; border: 1.5px dashed #e6cbbd; border-radius: 17px; background: #fff8ec; padding: 8px 12px; }.joystick { position: relative; display: grid; width: 68px; height: 65px; flex: 0 0 68px; border: 0; background: transparent; cursor: grab; touch-action: none; place-items: center; }.joystick:active, .joystick.is-grabbed { cursor: grabbing; }.joystick.is-disabled { cursor: default; opacity: .48; }.joystick-base { position: absolute; bottom: 6px; width: 50px; height: 23px; border: 2px solid #714c61; border-radius: 50%; background: #f79b98; box-shadow: inset 0 -5px 0 #df7375, 0 3px 0 #d4b5ab; }.joystick-stick { position: absolute; z-index: 1; bottom: 19px; left: 28px; width: 14px; height: 33px; border: 2px solid #714c61; border-radius: 10px 10px 5px 5px; background: #8f75d7; transform-origin: 50% 100%; transition: transform .18s ease; }.joystick-stick i { position: absolute; top: -13px; left: -8px; width: 26px; height: 26px; border: 2px solid #714c61; border-radius: 50%; background: #ffd968; box-shadow: inset -4px -3px 0 rgba(240,169,80,.36); }.joystick.is-grabbed .joystick-stick, .joystick.is-pulling .joystick-stick { transform: translateY(10px) rotate(-10deg); }.joystick.is-pulling { animation: joystickPop .42s ease; }.joystick-copy { flex: 1; min-width: 0; }.joystick-copy strong { display: block; color: #6d4a5f; font-size: 13px; }.joystick-copy p { margin: 4px 0 0; color: #947486; font-size: 10px; line-height: 1.35; }.joystick-copy b { color: var(--coral-dark); }.drag-arrow { color: var(--coral); font-size: 26px; font-weight: 900; animation: arrowBounce 1.2s ease-in-out infinite; }

/* Larger pull area above the compact controls, tuned for thumb dragging. */
.joystick-panel { min-height: 122px; margin-top: 10px; padding: 11px 16px; }
.joystick { width: 96px; height: 96px; flex-basis: 96px; }
.joystick-base { bottom: 9px; width: 68px; height: 30px; }
.joystick-stick { bottom: 25px; left: 39px; width: 18px; height: 45px; }
.joystick-stick i { top: -17px; left: -10px; width: 32px; height: 32px; }
.joystick.is-grabbed .joystick-stick, .joystick.is-pulling .joystick-stick { transform: translateY(17px) rotate(-10deg); }
.joystick-copy strong { font-size: 15px; }.joystick-copy p { margin-top: 6px; font-size: 12px; }.drag-arrow { font-size: 31px; }
.control-deck { grid-template-columns: 1.15fr .85fr; gap: 8px; margin-top: 15px; }
.start-button, .pause-button { min-height: 44px; border-radius: 13px; font-size: 12px; }
.start-button { box-shadow: 0 4px 0 var(--coral-dark), 0 8px 13px rgba(229,87,97,.2); }.pause-button { box-shadow: 0 4px 0 #e4d0c7; }

/* Tap-to-stop: each active card invites a direct, fast touch interaction. */
.control-deck { margin-top: 22px; padding-top: 0; }
.reel { cursor: default; }.reel.is-spinning { cursor: pointer; animation: reelReady 1.05s ease-in-out infinite; }
.reel.is-spinning .reel-screen { box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 0 0 3px rgba(255,217,103,.22); }
.reel.is-spinning:active { transform: scale(.96); }
.reel.is-locked { animation: lockPop .3s cubic-bezier(.2,1.5,.55,1) both; }
@keyframes reelReady { 50% { transform: translateY(-3px); border-color: #ffd967; } }
@keyframes lockPop { 0% { transform: scale(.9); } 70% { transform: scale(1.06); } 100% { transform: translateY(-3px) scale(1); } }

.result-panel { position: relative; margin-top: 15px; overflow: hidden; border: 1.5px solid #f2b7a6; border-radius: 16px; background: #fff0e1; padding: 13px 13px 12px; text-align: center; }.result-panel p { margin: 0 0 3px; color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .5px; }.result-panel h3 { margin: 0 0 11px; color: #4c3148; font-size: 16px; letter-spacing: -.5px; }.result-confetti { position: absolute; top: 3px; right: 12px; color: #f2bc44; font-size: 19px; }.result-actions { display: flex; align-items: center; justify-content: center; gap: 13px; }.secondary-button { border: 1.5px solid #e8a1a0; border-radius: 12px; background: #fff9f4; color: var(--coral-dark); padding: 8px 13px; cursor: pointer; font-size: 11px; font-weight: 800; }.secondary-button span { margin-left: 3px; font-size: 14px; }.text-button { border: 0; background: transparent; color: #987589; padding: 3px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 11px; }.ticket-footer { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-top: 1.5px dashed #ecd7c7; color: #a68594; font-size: 8px; font-weight: 800; letter-spacing: .9px; }.footer-heart { color: var(--coral); font-size: 13px; }.daily-note { margin: 20px 0 0; text-align: center; color: #936e7d; font-size: 11px; }

.is-hidden { display: none !important; }.activity-dialog { width: min(calc(100% - 32px), 520px); max-height: min(720px, calc(100vh - 32px)); border: 0; border-radius: 24px; box-shadow: 0 24px 80px rgba(67,45,69,.3); background: transparent; padding: 0; }.activity-dialog::backdrop { background: rgba(74,42,58,.38); backdrop-filter: blur(3px); }.dialog-content { position: relative; overflow-y: auto; max-height: inherit; border: 2px solid #f0d5ca; border-radius: 24px; background: var(--paper); padding: 31px 22px 23px; text-align: center; }.dialog-close { position: absolute; top: 11px; right: 14px; width: 35px; height: 35px; border: 0; border-radius: 50%; background: #fceddf; color: #9a687d; cursor: pointer; font-size: 25px; line-height: 1; }.result-kicker { margin: 0 0 9px; color: var(--coral-dark); font-size: 11px; font-weight: 900; letter-spacing: 1px; }.dialog-content h2 { margin: 0; font-size: 24px; letter-spacing: -.8px; }.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 20px 0 16px; text-align: left; }.activity-chip { display: flex; align-items: center; gap: 7px; min-height: 43px; border-radius: 12px; background: #fff5e9; padding: 7px 9px; color: #704f64; font-size: 12px; font-weight: 700; }.activity-chip span { font-size: 21px; }.dialog-note { margin: 0; color: var(--muted); font-size: 12px; }.toast { position: fixed; z-index: 8; bottom: 28px; left: 50%; max-width: calc(100% - 40px); transform: translate(-50%, 110px); border-radius: 99px; background: #493047; box-shadow: 0 8px 22px rgba(67,45,69,.22); color: white; padding: 11px 17px; opacity: 0; font-size: 13px; font-weight: 700; transition: transform .3s ease, opacity .3s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.confetti-layer { position: fixed; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }.confetti { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 2px; animation: fall var(--duration) cubic-bezier(.3,.55,.7,1) forwards; }

@keyframes float { 50% { transform: translateY(-5px) rotate(1deg); } }@keyframes bob { 50% { transform: translateY(-9px) rotate(-12deg); } }@keyframes twinkle { 50% { transform: scale(.72) rotate(24deg); opacity: .58; } }@keyframes arrowBounce { 50% { transform: translateY(6px); } }@keyframes joystickPop { 50% { transform: scale(1.08); } }@keyframes fall { 0% { transform: translate3d(0, -30px, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); opacity: .2; } }
@media (max-width: 380px) { .page-shell { padding-right: 14px; padding-left: 14px; }.machine-stage { padding-right: 13px; padding-left: 13px; }.reel-bank { gap: 5px; }.reel { padding-right: 3px; padding-left: 3px; }.reel-screen { height: 128px; }.reel-cell span { font-size: 35px; }.machine-marquee { padding-right: 8px; }.machine-marquee h2 { font-size: 17px; }.arcade-card { min-height: 663px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Time-aware draw and final-choice flow */
.arcade-card { min-height: 650px; }
.time-chooser { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 3px 13px; border: 1.5px solid #ead6c8; border-radius: 14px; background: #fffaf2; padding: 7px 8px 7px 12px; }
.time-chooser > span { color: #76576b; font-size: 11px; font-weight: 800; }
.time-options { display: flex; gap: 5px; }
.time-option { min-width: 65px; border: 0; border-radius: 10px; background: transparent; color: #9a7b8c; padding: 8px 10px; cursor: pointer; font-size: 11px; font-weight: 800; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.time-option.is-active { background: var(--coral); box-shadow: 0 3px 0 var(--coral-dark); color: white; }
.time-option:active:not(:disabled) { transform: translateY(2px); }
.time-option:disabled { cursor: default; opacity: .55; }

.reel:focus-visible { outline: 3px solid rgba(255,117,111,.35); outline-offset: 3px; }
.reel.is-choosable { cursor: pointer; border-color: #ffd967; animation: choicePulse 1.05s ease-in-out infinite; }
.reel.is-choosable .reel-status { color: #fff2a8; }
.reel.is-choosable:active { transform: scale(.95); }
.reel.is-selected { z-index: 2; border-color: #75c9ad; background: #3d514d; box-shadow: 0 5px 0 #b7d8cb, 0 0 0 4px rgba(113,205,178,.2); animation: finalPick .38s cubic-bezier(.2,1.5,.55,1) both; }
.reel.is-selected .reel-status { color: #c9ffe9; }
.reel.is-dimmed { opacity: .34; filter: grayscale(.45); transform: scale(.96); }
@keyframes choicePulse { 50% { transform: translateY(-5px); box-shadow: 0 7px 0 #d8b7a9, 0 0 0 4px rgba(255,217,103,.18); } }
@keyframes finalPick { 0% { transform: scale(.9); } 70% { transform: scale(1.08); } 100% { transform: translateY(-4px) scale(1.02); } }

.result-panel { margin-top: 13px; }
.result-panel h3 { min-height: 20px; margin-bottom: 8px; }
.result-actions.is-hidden { display: none; }
.activity-chip > div { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.activity-chip small { color: #ad8998; font-size: 8px; font-weight: 600; }

.invite-dialog { width: min(calc(100% - 28px), 430px); max-height: calc(100vh - 28px); overflow: visible; border: 0; background: transparent; padding: 0; }
.invite-dialog::backdrop { background: rgba(65,38,55,.48); backdrop-filter: blur(5px); }
.invite-card { position: relative; overflow: hidden; border: 2px solid #efc7bb; border-radius: 28px; background: linear-gradient(165deg, #fffdf7 0%, #fff6e9 57%, #ffe4df 100%); box-shadow: 0 25px 80px rgba(67,45,69,.34), 0 9px 0 rgba(222,127,121,.22); padding: 30px 25px 25px; text-align: center; }
.invite-card::before { position: absolute; inset: 0; content: ""; opacity: .2; background-image: radial-gradient(#d9c4af .7px, transparent .7px); background-size: 4px 4px; pointer-events: none; }
.invite-card > * { position: relative; z-index: 1; }
.invite-close { z-index: 3; }
.invite-bunny { display: grid; width: 58px; height: 58px; margin: 0 auto 9px; place-items: center; border: 2px solid var(--ink); border-radius: 48% 48% 46% 46%; background: #fff0d7; color: var(--coral); font-size: 35px; line-height: 1; }
.invite-bunny::before, .invite-bunny::after { position: absolute; top: -13px; width: 15px; height: 27px; border: 2px solid var(--ink); border-radius: 60% 60% 42% 42%; background: #ffc8d2; content: ""; }
.invite-bunny::before { left: 9px; transform: rotate(-18deg); }.invite-bunny::after { right: 9px; transform: rotate(18deg); }
.invite-kicker { margin: 0 0 7px; color: var(--coral-dark); font-size: 9px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.invite-card h2 { max-width: 280px; margin: 0 auto 14px; font-size: 19px; letter-spacing: -.6px; }
.invite-activity-icon { display: grid; width: 93px; height: 93px; margin: 0 auto 8px; place-items: center; border: 2px solid #e5c59f; border-radius: 46% 54% 51% 49%; background: #ffedbd; box-shadow: 5px 5px 0 #f1c4ae; font-size: 49px; transform: rotate(-3deg); }
.invite-card h3 { margin: 0 0 8px; color: #4a3046; font-size: 27px; letter-spacing: -1px; }
.invite-time { display: inline-block; border-radius: 99px; background: #ece2ff; color: #725ba8; padding: 5px 11px; font-size: 10px; font-weight: 800; }
.invite-phrase { max-width: 290px; margin: 13px auto 8px; color: #806578; font-size: 13px; line-height: 1.6; }
.invite-question { margin: 0 0 16px; color: var(--coral-dark); font-size: 14px; font-weight: 900; }
.invite-primary, .invite-secondary { width: min(100%, 290px); min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 900; }
.invite-primary { background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark); color: white; }
.invite-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-dark); }
.invite-primary span { margin-left: 5px; font-size: 17px; }
.accept-button { background: #72c9ad; box-shadow: 0 5px 0 #4fa88e; }
.invite-secondary { min-height: 35px; margin-top: 10px; background: transparent; color: #9c7a8d; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 380px) {
  .arcade-card { min-height: 635px; }
  .time-option { min-width: 58px; padding-right: 7px; padding-left: 7px; }
  .invite-card { padding-right: 19px; padding-left: 19px; }
}

/* Clearer, softer interaction language */
.ideas-button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 99px; background: #fff0eb; color: var(--coral-dark); padding: 5px 9px; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .7px; transition: background .2s, transform .2s, box-shadow .2s; }
.ideas-button span { font-size: 12px; }.ideas-button:hover { background: #ffe5df; box-shadow: 0 3px 0 #efc4b8; transform: translateY(-1px); }.ideas-button:active { transform: translateY(1px); box-shadow: none; }
.flow-steps { display: flex; align-items: center; justify-content: center; gap: 7px; margin: -2px 0 11px; color: #bea8b3; font-size: 9px; font-weight: 700; }
.flow-steps span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; transition: color .25s, transform .25s; }
.flow-steps span b { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #dec9d2; border-radius: 50%; background: #fff; font-size: 8px; }
.flow-steps span.is-active { color: var(--coral-dark); transform: translateY(-1px); }.flow-steps span.is-active b { border-color: var(--coral); background: var(--coral); color: white; box-shadow: 0 2px 0 #e3a09a; }
.flow-steps span.is-complete { color: #72b9a3; }.flow-steps span.is-complete b { border-color: #b7ded1; background: #dff3ec; color: #4a927c; }

.reel { user-select: none; touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, opacity .25s, filter .25s, box-shadow .2s; }
.reel.is-pressed { animation: none !important; transform: scale(.95) !important; }
.reel.is-settling { cursor: wait; border-color: #ffb69e; background: #554151; box-shadow: 0 5px 0 #d8b7a9, 0 0 0 4px rgba(255,182,158,.16); animation: settleGlow .36s ease-in-out infinite alternate; }
.reel.is-settling .reel-status { color: #ffd6c8; }
@keyframes settleGlow { to { transform: translateY(-2px); filter: brightness(1.08); } }
.result-panel:not(.is-hidden) { animation: panelIn .34s cubic-bezier(.2,.9,.25,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.activity-dialog { width: min(calc(100% - 24px), 540px); }
.activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activity-chip { min-height: 58px; border: 1px solid #f1dfd3; background: linear-gradient(145deg, #fff8ee, #fff1e5); padding: 8px 9px; box-shadow: 0 2px 0 rgba(220,186,168,.16); }
.activity-chip > span { flex: 0 0 25px; text-align: center; font-size: 23px; }.activity-chip small { overflow: hidden; color: #ad8998; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 380px) {
  .flow-steps { gap: 4px; font-size: 8px; }
  .flow-steps span { gap: 2px; }
  .flow-steps span b { width: 14px; height: 14px; }
  .activity-chip { min-height: 55px; padding-right: 6px; padding-left: 6px; font-size: 11px; }
}