.eyebrow { color: #8068d8; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.primary-button,.secondary-button,.danger-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 800; transition: background .2s,transform .2s,box-shadow .2s; }
.primary-button { background: var(--purple); color: white; box-shadow: 0 6px 14px #7657e832; }.primary-button:hover { transform: translateY(-1px); background: var(--purple-dark); }
.secondary-button { border: 1px solid #e8eaf1; background: white; color: #656a7d; }.secondary-button:hover { border-color: #c9bef7; color: var(--purple); }
.danger-button { border: 1px solid #f2d8de; background: #fff8f9; color: var(--red); }.danger-button:hover { background: #fff0f2; }
.small-button { min-height: 34px; padding: 8px 10px; font-size: 9px; }
.panel,.game-card { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px #24264b08; }
.panel { padding: 20px; }
.panel-title-row,.history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-title-row h2,.history-heading h2 { margin: 0; color: #44495d; font-size: 14px; }.panel-title-row p { margin: 5px 0 0; color: #969bad; font-size: 9px; line-height: 1.6; }
.text-link { color: var(--purple); font-size: 9px; font-weight: 700; }
.game-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .2s,box-shadow .2s; }.featured-card:hover { transform: translateY(-3px); box-shadow: 0 13px 28px #24264b16; }
.card-art { position: relative; height: 168px; display: grid; place-items: center; overflow: hidden; }
.wheel-card-art { background: linear-gradient(135deg,#f1edff,#f8f5ff 55%,#e9e2ff); }
.card-tag,.coming-pill { position: absolute; top: 13px; left: 13px; padding: 6px 8px; border-radius: 20px; background: #ffffffcf; color: #795ee0; font-size: 7px; font-weight: 800; letter-spacing: .5px; }.mystery-card-tag { color: #559887; }
.mini-wheel { width: 91px; height: 91px; display: grid; place-items: center; border: 6px solid white; border-radius: 50%; background: conic-gradient(#8c6af2 0 25%,#ffbf69 25% 50%,#54c6a1 50% 75%,#f27c95 75%); box-shadow: 0 9px 20px #5c4aaa35; color: white; font-size: 15px; font-weight: 800; }
.art-star { position: absolute; color: #f49b53; }.star-a { top: 37px; left: 72%; font-size: 23px; }.star-b { bottom: 14px; left: 21%; color: #9b7bf5; font-size: 29px; }
.card-body { display: flex; flex-direction: column; padding: 16px 17px 18px; }
.card-kicker { color: #9c9fb0; font-size: 8px; font-weight: 800; letter-spacing: .7px; }.card-title { margin-top: 5px; font-size: 17px; font-weight: 800; letter-spacing: -.35px; }.card-description { min-height: 37px; margin-top: 6px; color: #85899a; font-size: 10px; line-height: 1.7; }
.card-action { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: var(--purple); font-size: 10px; font-weight: 800; }.card-action span { font-size: 16px; }
.mystery-card-art { background: linear-gradient(135deg,#e0f6f0,#edf8f4 55%,#d7f1e9); }.gift-illustration { position: relative; width: 82px; height: 83px; filter: drop-shadow(0 9px 11px #3a947634); transform: rotate(5deg); transition: transform .2s; }.featured-card:hover .gift-illustration { transform: rotate(-3deg) translateY(-3px); }.gift-body { position: absolute; right: 7px; bottom: 3px; left: 7px; height: 52px; border: 4px solid #ffffffd9; border-radius: 8px 8px 12px 12px; background: linear-gradient(145deg,#77cdb7,#46ad98); }.gift-lid { position: absolute; z-index: 1; top: 23px; right: 2px; left: 2px; height: 16px; border: 4px solid #ffffffd9; border-radius: 6px; background: #58b9a5; }.gift-ribbon { position: absolute; z-index: 2; top: 25px; left: 36px; width: 13px; height: 55px; border: 3px solid #fff9; border-radius: 3px; background: #ffcf74; }.gift-bow { position: absolute; z-index: 3; top: 6px; left: 31px; width: 23px; height: 23px; border: 5px solid #ffcf74; border-radius: 16px 16px 3px 16px; transform: rotate(45deg); }.floating-shape { position: absolute; top: 38px; right: 22%; color: #f4ad52; font-size: 25px; }
.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(420px,calc(100vw - 40px)); padding: 12px 16px; border-radius: 10px; background: #272a40; color: white; box-shadow: 0 8px 25px #16182c35; font-size: 11px; animation: toast-in .2s ease-out; }.toast.error { background: #9d3047; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.result-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: #1f2144a6; backdrop-filter: blur(5px); }
.result-card { position: relative; width: min(100%,440px); padding: 38px 34px 31px; border-radius: 20px; text-align: center; background: white; box-shadow: 0 25px 80px #17183145; animation: result-in .24s ease-out; }.result-card h2 { margin: 8px 0; font-size: 28px; }.result-kicker { color: #8f78e9; font-size: 9px; font-weight: 800; letter-spacing: 1px; }.result-subtitle { margin: 8px 0 23px; color: #9397a7; font-size: 11px; }
.result-close { position: absolute; top: 11px; right: 15px; border: 0; background: transparent; color: #9a9eac; font-size: 24px; cursor: pointer; }.result-confetti { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 16px; background: #fff3d9; color: #f2a936; font-size: 30px; }.result-card .primary-button { min-width: 150px; }
@keyframes result-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }