:root {
  --ink: #4b352b;
  --muted: #9b7c68;
  --paper: #fffdf8;
  --cream: #fff8ee;
  --line: #efd8bb;
  --peach: #f7a983;
  --coral: #f36f57;
  --coral-deep: #d95743;
  --gold: #d6a155;
  --shadow: 0 16px 34px rgba(139, 92, 60, 0.13);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #fdf9f2;
}

.app-shell { width: min(468px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 36px; }
.hero { margin: 0 0 16px; text-align: center; }
.eyebrow { margin: 0; color: #725243; font-size: 19px; font-weight: 900; }
body.game-active .hero { display: none; }
body.game-active .app-shell { padding-top: 12px; }

.room-gate { display: grid; min-height: 72vh; place-items: center; }
.room-card { width: 100%; display: grid; gap: 14px; padding: 27px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.password-kicker { width: fit-content; margin: 0; padding: 5px 10px; border-radius: 999px; color: var(--coral-deep); background: #fff0e9; font-size: 12px; font-weight: 900; }
.room-card h1 { margin: 0; font-size: 27px; }
.room-desc { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.65; }
.field { display: grid; gap: 6px; color: #806955; font-size: 13px; font-weight: 900; }
input, select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; color: var(--ink); background: #fffefa; outline: none; }
input:focus, select:focus, button:focus-visible { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(243, 111, 87, 0.14); outline: none; }
.confirm-button { min-height: 44px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #ff9d81, #ee674f); box-shadow: 0 9px 17px rgba(220, 88, 62, 0.23); font-weight: 900; }
.password-error { margin: 0; color: #d95341; font-size: 13px; font-weight: 900; }

/* Shared phone shell. The two games below deliberately own their own layouts. */
.game-card { position: relative; isolation: isolate; overflow: hidden; min-height: 0; padding-bottom: 26px; border: 1px solid #efdfcb; border-radius: 25px; background: #fffdf9; box-shadow: 0 24px 64px rgba(123, 83, 53, 0.14); }
.game-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(255, 253, 249, 0.98) 28%, #fffdf9 100%); }
.phone-status { display: none; }
.game-topbar { height: 52px; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; padding: 0 15px; text-align: center; }
.topbar-title { display: grid; justify-items: center; line-height: 1.15; }
.game-topbar strong { font-size: 17px; letter-spacing: 0; }
.topbar-title small { margin-top: 3px; color: #a58b78; font-size: 10px; font-weight: 700; }
.back-button, .more-button { border: 0; color: #4a3024; background: transparent; line-height: 1; }
.back-button { padding: 0; font-size: 34px; font-weight: 400; }
.more-button { font-size: 20px; font-weight: 900; letter-spacing: 2px; }
.room-info-card { position: relative; overflow: hidden; width: calc(100% - 42px); min-height: 44px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; margin: 0 auto 13px; padding: 6px 10px; border: 1px solid #f2e4d3; border-radius: 8px; background: rgba(255, 253, 248, 0.72); }
.room-info-card > div, .room-info-card > span { position: relative; z-index: 1; }
.room-flourish { position: absolute; z-index: 0; right: -4px; bottom: -2px; width: 95px; height: 32px; opacity: 0.28; }
.room-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #fff3dc; }
.asset-icon { display: block; width: 100%; height: 100%; }
.room-info-card strong { display: inline-block; color: #73584a; font-size: 13px; }
.room-info-card small { display: none; }
.room-play-count { margin-left: 7px; color: #bd684f; font-size: 12px; font-weight: 800; }
.room-play-count strong { color: var(--coral-deep); font-size: 16px; }

.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; width: calc(100% - 42px); margin: 0 auto; padding: 3px; border: 1px solid #f0e1cf; border-radius: 999px; background: #fffefa; box-shadow: 0 4px 12px rgba(151, 101, 62, 0.05); }
.mode-tab { min-height: 32px; border: 0; border-radius: 999px; color: #a08a79; background: transparent; font-size: 13px; font-weight: 800; }
.mode-tab.is-active { color: #fff; background: linear-gradient(180deg, #ffad8e, #ef6e54); box-shadow: 0 5px 10px rgba(223, 90, 63, 0.24); }
.mode-tab[data-mode="cards"].is-active { background: linear-gradient(180deg, #ef8d72, #d95e48); }

.game-pages { position: relative; }
.mode-panel { display: none; }
.mode-panel.is-active { display: block; }
.mode-heading { text-align: center; }
.mode-heading p { margin: 0; color: #ad8061; font-size: 12px; font-weight: 900; }
.mode-heading h2 { margin: 3px 0 0; color: #51382b; font-size: 20px; font-weight: 900; }
.play-count { width: fit-content; margin: 18px auto 12px; color: #94725f; text-align: center; font-size: 12px; font-weight: 800; }
.play-count strong { color: var(--coral-deep); font-size: 19px; }

/* C: wheel screen - a pale, scrapbook-like lottery board. */
.wheel-mode { position: relative; min-height: 0; padding: 1px 4px 12px; overflow: hidden; }
.wheel-mode::before, .wheel-mode::after { display: none; }
.wheel-mode .play-count { position: relative; z-index: 8; padding: 2px 9px; border-radius: 999px; background: rgba(255, 253, 248, 0.9); }
.wheel-heading, .cards-heading { display: none; }
.wheel-stage { position: relative; width: min(440px, calc(100vw - 34px)); aspect-ratio: 1; margin: 0 auto; }
.wheel-wrap { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 7%; background: url("/assets/wheel-frame-cropped.png?v=20260716-frame") center / 100% 100% no-repeat; filter: drop-shadow(0 12px 18px rgba(189, 102, 69, 0.16)); }
.wheel-wrap::before { display: none; }
.wheel-lights { display: none; }
.wheel { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 100%; border: 3px solid rgba(255, 250, 243, 0.95); border-radius: 50%; background: #fffaf3; box-shadow: inset 0 0 0 1px rgba(206, 132, 92, 0.36), 0 8px 15px rgba(194, 109, 72, 0.08); transition: transform 6.8s cubic-bezier(0.08, 0.78, 0.12, 1); }
.wheel.no-transition { transition: none; }
.wheel-svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel::after { display: none; }
.wheel-label { fill: #65483b; font-size: 4.9px; font-weight: 900; text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: rgba(255, 253, 248, 0.96); stroke-width: 0.65px; }
.wheel-pointer { position: absolute; z-index: 5; left: 50%; top: 5.2%; width: 0; height: 0; border-top: 22px solid #f77c5d; border-right: 11px solid transparent; border-left: 11px solid transparent; filter: drop-shadow(0 3px 2px rgba(208, 86, 58, 0.2)); transform: translateX(-50%); }
.wheel-center { position: absolute; z-index: 6; left: 50%; top: 50%; width: 72px; height: 72px; border: 4px solid #fffaf2; border-radius: 50%; color: #fff; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.4), transparent 31%), linear-gradient(180deg, #ff9d80, #eb654b); box-shadow: 0 8px 16px rgba(203, 77, 51, 0.28), inset 0 0 0 1px rgba(255,255,255,0.38); transform: translate(-50%, -50%); font-size: 15px; font-weight: 900; line-height: 1.14; }
.result-box { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; width: min(352px, 100%); min-height: 56px; margin: 0 auto; padding: 8px 16px; color: #654231; background: transparent; filter: drop-shadow(0 12px 16px rgba(135, 87, 44, 0.1)); }
.result-ticket { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.result-tape { position: absolute; z-index: 2; left: 8px; top: -7px; width: 43px; height: 17px; transform: rotate(-7deg); opacity: 0.78; }
.result-kicker { position: relative; z-index: 1; padding-right: 9px; border-right: 1px solid #ecdcc7; color: var(--coral-deep); font-size: 12px; font-weight: 900; }
.result-text { position: relative; z-index: 1; overflow: hidden; color: #63402e; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

/* B: cards screen - an ivory ceremonial card table, independent from the wheel. */
.cards-mode { min-height: 0; padding: 17px 24px 12px; background: transparent; }
.cards-mode .play-count { margin: 18px auto 16px; color: #8f6548; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(74px, 1fr)); gap: 12px; width: min(348px, 100%); margin: 0 auto 8px; }
.card-tile { position: relative; min-height: 0; aspect-ratio: 0.7; border: 0; border-radius: 10px; background: transparent; perspective: 900px; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(0.2, 0.75, 0.2, 1); }
.card-tile.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 11px; border: 1px solid #dfad63; border-radius: 8px; backface-visibility: hidden; box-shadow: 0 7px 13px rgba(127, 84, 39, 0.12), inset 0 0 0 4px #fff9ed, inset 0 0 0 6px rgba(223, 173, 99, 0.26); text-align: center; }
.card-back { color: #cc9341; background: linear-gradient(135deg, rgba(218,170,83,0.08) 25%, transparent 25%) 0 0 / 13px 13px, linear-gradient(180deg, #fffdf7, #fff4e3); font-size: 32px; }
.card-back.has-custom-background { padding: 0; border: 0; overflow: hidden; background: var(--card-background-image) center / cover no-repeat; box-shadow: none; }
.card-front { color: #5b3927; background: linear-gradient(160deg, #fffdf8, #fff1dc); box-shadow: none; transform: rotateY(180deg); font-size: 17px; font-weight: 900; line-height: 1.28; }
.card-front.has-custom-front { padding: 12px; border: 0; overflow: hidden; color: #4d3023; background: var(--card-front-image) center / cover no-repeat; box-shadow: none; }
.card-result-content { width: 100%; display: grid; justify-items: center; gap: 6px; }
.card-result-image { width: min(58px, 58%); height: min(58px, 40vw); object-fit: contain; }
.card-result-label { max-width: 100%; padding: 0; background: transparent; box-shadow: none; }
.card-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(207, 155, 69, 0.5); border-radius: 50%; background: radial-gradient(circle, #fffdf7 0 42%, transparent 43%), rgba(255, 252, 244, 0.92); box-shadow: 0 0 0 5px rgba(225, 177, 91, 0.09); }
.card-corner { position: absolute; width: 26px; height: 26px; }
.corner-top-left { left: 5px; top: 5px; }.corner-top-right { right: 5px; top: 5px; transform: scaleX(-1); }.corner-bottom-left { left: 5px; bottom: 5px; transform: scaleY(-1); }.corner-bottom-right { right: 5px; bottom: 5px; transform: scale(-1); }
.card-tile:disabled:not(.is-flipped) { opacity: 0.46; }
.card-tile.has-custom-background:disabled:not(.is-flipped) { opacity: 1; }
.card-tile.is-flipped:disabled { opacity: 1; }
.recent-records { width: calc(100% - 42px); min-height: 278px; display: grid; grid-template-rows: auto 1fr; margin: 6px auto 0; padding: 14px; border: 1px solid #eed9bf; border-radius: 12px; background: linear-gradient(145deg, #fffefa, #fff7eb); box-shadow: 0 10px 22px rgba(137, 86, 51, 0.07); }
.recent-records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.recent-records h2 { margin: 0; color: #634434; font-size: 15px; }
.recent-records-head span { color: #b18d72; font-size: 11px; font-weight: 800; }
.recent-records-list { display: grid; align-content: start; gap: 7px; }
.recent-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 33px; padding: 6px 8px; border: 1px solid rgba(238, 216, 188, 0.76); border-radius: 8px; background: rgba(255, 253, 248, 0.78); }
.recent-record strong { overflow: hidden; color: #624433; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.recent-record time { color: #b2937b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.recent-records-empty { align-self: center; margin: 0; padding: 10px 4px; color: #aa8b74; font-size: 12px; font-weight: 700; text-align: center; }

.result-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(69, 45, 31, 0.34); backdrop-filter: blur(6px); }
.result-modal-card { position: relative; width: min(390px, 100%); min-height: 268px; display: grid; place-items: center; overflow: hidden; padding: 25px; border: 1px solid #efd1ad; border-radius: 16px; background: linear-gradient(145deg, #fffefa, #fff2e0); box-shadow: 0 22px 60px rgba(83, 46, 24, 0.28); text-align: center; }
.result-modal-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(229, 178, 93, 0.62); border-radius: 9px; pointer-events: none; }
.result-modal-card.is-wheel { border-color: #ffc0aa; background: radial-gradient(circle at 18% 14%, rgba(255, 177, 156, 0.42) 0 4px, transparent 5px), radial-gradient(circle at 85% 20%, rgba(255, 214, 117, 0.5) 0 4px, transparent 5px), linear-gradient(145deg, #fffdf8, #fff0e4); }
.result-modal-card.is-cards { border-color: #dfaf65; background: linear-gradient(145deg, #fffdf7, #f9edda); }
.result-modal-card.is-cards::before { border-color: rgba(204, 145, 61, 0.74); }
.modal-reveal { margin: 0; color: var(--coral-deep); font-size: 25px; font-weight: 900; animation: revealPulse 0.72s ease-in-out infinite alternate; }
.modal-result-content { position: relative; z-index: 2; width: 100%; display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.modal-badge { padding: 6px 13px; border: 1px solid #edc484; border-radius: 999px; color: #a36a24; background: #fff2d4; font-size: 13px; font-weight: 900; }
.result-modal-card h2 { margin: 0; color: #d65f47; font-size: 22px; }
#modalResultText { color: #4e3021; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; }
.modal-prize-icon { width: min(172px, 52vw); height: min(172px, 52vw); margin: -2px 0; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(122, 77, 47, 0.16)); }
#modalResultMessage { margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; }
.modal-result-actions { width: 100%; margin-top: 5px; }
.modal-result-actions .confirm-button { width: 100%; }
.result-modal.is-cards { align-items: start; padding-top: min(25vh, 180px); background: rgba(86, 57, 36, 0.14); }
.result-modal.is-cards .result-modal-card { width: min(192px, calc(100vw - 64px)); min-height: 258px; padding: 20px 16px 16px; border: 2px solid #dfae62; border-radius: 10px; background: linear-gradient(160deg, #fffefa, #fff4e1); box-shadow: 0 18px 36px rgba(96, 57, 30, 0.27), inset 0 0 0 4px #fff9ec; }
.result-modal.is-cards .result-modal-card.has-custom-front { border: 0; background: var(--card-front-image) center / cover no-repeat; box-shadow: none; }
.result-modal.is-cards .result-modal-card.has-custom-front::before { display: none; }
.result-modal.is-cards .result-modal-card::before { inset: 7px; border-color: #e0a754; border-radius: 6px; }
.result-modal.is-cards .modal-result-content { gap: 7px; }
.result-modal.is-cards .modal-badge { border: 0; padding: 0; color: #e26047; background: transparent; font-size: 15px; }
.result-modal.is-cards .result-modal-card h2 { display: none; }
.result-modal.is-cards #modalResultText { font-size: 25px; }
.result-modal.is-cards .modal-prize-icon { width: min(124px, 34vw); height: min(124px, 34vw); }
.result-modal.is-cards #modalResultMessage { display: none; }
.result-modal.is-cards .modal-result-actions { margin-top: 2px; }
.result-modal.is-cards .confirm-button { min-height: 36px; font-size: 13px; }
.result-modal-card.is-grand { animation: grandImpact .62s cubic-bezier(.16,.92,.24,1); }
.result-modal-card.is-grand .modal-prize-icon { animation: grandPrize 1.05s cubic-bezier(.18,.86,.2,1) both; }
.result-modal-card.is-minor .modal-prize-icon { animation: minorPrize .76s ease-out both; }
.result-modal-card.is-again .modal-prize-icon { animation: againSpin .9s cubic-bezier(.2,.8,.2,1) both; }
.result-modal-card.is-again .modal-badge { animation: againBadge .7s ease-in-out infinite alternate; }
.result-modal-card.is-miss .modal-prize-icon { filter: grayscale(.55) contrast(.9); animation: missCrack .7s ease-out both; }
.result-modal-card.is-miss .modal-result-content::after { content: ""; position: absolute; left: 50%; top: 48%; width: 110px; height: 2px; background: rgba(103, 76, 59, .46); box-shadow: 17px -18px 0 -1px rgba(103, 76, 59, .42), -19px 18px 0 -1px rgba(103, 76, 59, .38), 30px 22px 0 -1px rgba(103, 76, 59, .32); opacity: 0; transform: translate(-50%, -50%) rotate(-28deg); animation: crackLines .66s .16s ease-out forwards; pointer-events: none; }
@keyframes grandImpact { 0% { transform: scale(.76) rotate(-3deg); } 58% { transform: scale(1.06) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes grandPrize { 0% { transform: translateY(24px) scale(.4); opacity: 0; } 70% { transform: translateY(-8px) scale(1.14); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes minorPrize { from { transform: translateY(12px) scale(.82); opacity: .2; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes againSpin { 0% { transform: rotate(-160deg) scale(.55); opacity: 0; } 100% { transform: rotate(360deg) scale(1); opacity: 1; } }
@keyframes againBadge { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes missCrack { 0%, 48% { transform: scale(1); } 58% { transform: translateX(-8px) rotate(-4deg); } 70% { transform: translateX(8px) rotate(4deg); } 100% { transform: scale(.96); opacity: .76; } }
@keyframes crackLines { from { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-28deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-28deg); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span { position: absolute; width: 8px; height: 15px; border-radius: 3px; opacity: 0; animation: confettiDrop 1.8s ease-out infinite; }
.confetti span:nth-child(1) { left: 16%; top: 12%; background: #ff9b87; animation-delay: .05s; }.confetti span:nth-child(2) { left: 30%; top: 4%; background: #f1c665; animation-delay: .2s; }.confetti span:nth-child(3) { left: 48%; top: 9%; background: #a8e4dc; animation-delay: .34s; }.confetti span:nth-child(4) { left: 67%; top: 5%; background: #ffc0d0; animation-delay: .13s; }.confetti span:nth-child(5) { left: 78%; top: 15%; background: #f2bd76; animation-delay: .28s; }.confetti span:nth-child(6) { left: 88%; top: 32%; background: #abddef; animation-delay: .42s; }
@keyframes revealPulse { from { transform: scale(.98); opacity: .72; } to { transform: scale(1.04); opacity: 1; } }
@keyframes confettiDrop { 0% { transform: translateY(-18px) rotate(0deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(190px) rotate(220deg); opacity: 0; } }

@media (min-width: 700px) {
  body.game-active { min-width: 720px; }
  body.game-active .app-shell { width: min(980px, calc(100% - 48px)); padding: 34px 0 48px; }
  body.game-active .game-card { min-height: 0; padding: 18px 0 34px; border-radius: 28px; }
  body.game-active .game-topbar { width: min(800px, calc(100% - 72px)); height: 56px; margin: 0 auto; }
  body.game-active .room-info-card, body.game-active .mode-tabs { width: min(800px, calc(100% - 72px)); }
  body.game-active .wheel-stage { width: min(520px, calc(100vw - 360px)); }
  body.game-active .wheel-mode { padding-bottom: 18px; }
  body.game-active .cards-mode { width: min(640px, 100%); margin: 0 auto; }
  body.game-active .recent-records { width: min(800px, calc(100% - 72px)); min-height: 0; margin-top: 8px; }
  body.game-active .recent-records-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.game-active .recent-record { min-height: 38px; }
}
@media (max-width: 699px) {
  .game-card.is-cards-screen .room-info-card,
  .game-card.is-cards-screen .mode-tabs,
  .game-card.is-cards-screen .recent-records {
    width: min(400px, calc(100% - 40px));
  }
  .game-card.is-cards-screen .cards-mode { padding: 17px 0 12px; }
  .game-card.is-cards-screen .card-grid { width: min(400px, calc(100% - 40px)); }
  .game-card.is-cards-screen .recent-records { min-height: 0; margin-top: 4px; }
  .game-card.is-cards-screen { padding-bottom: 0; }
}
@media (max-width: 520px) { .app-shell { width: 100%; padding: 0; } body.game-active .app-shell { padding: 0; } .game-card { min-height: 0; border: 0; border-radius: 0; box-shadow: none; } .hero { padding-top: 20px; } .room-gate { min-height: 100vh; padding: 20px; } }
@media (max-width: 360px) { .wheel-mode, .cards-mode { padding-left: 4px; padding-right: 4px; } .wheel-stage { width: min(390px, 102vw); } .card-grid { gap: 8px; } .card-tile { min-height: 112px; } .game-topbar strong { font-size: 16px; } }