.gift-page { --gift-cream: #fff9e9; --gift-green: #173e30; --gift-gold: #eabd66; }
.gift-page [hidden] { display: none !important; }
.gift-page button, .gift-page input, .gift-page select { font-family: inherit; }
.gift-page button { min-height: 44px; cursor: pointer; }
.gift-page button:disabled { cursor: wait; opacity: .58; }
.gift-page :focus-visible { outline: 3px solid #d99a2d; outline-offset: 4px; }
.gift-shell { position: relative; z-index: 1; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 22px; }
.gift-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; }
.gift-eyebrow { margin: 0 0 12px; color: #637563; font: 700 10px Georgia, serif; letter-spacing: 2.5px; }
.gift-heading h1 { font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(34px, 4.2vw, 48px); color: #1d4534; letter-spacing: 4px; }
.heading-spark { display: inline-block; margin-left: 14px; color: #b88129; font-size: 28px; vertical-align: middle; }
.gift-subtitle { color: #647460; margin: 14px 0 0; font-size: 14px; line-height: 1.7; }
.gift-stamp { color: #74603f; border: 1px solid #b2b798; border-radius: 50%; width: 146px; height: 84px; display: grid; align-content: center; text-align: center; transform: rotate(-7deg); font-family: "KaiTi", serif; font-size: 19px; }
.gift-stamp span { display: block; font: 10px "Microsoft YaHei", sans-serif; margin-top: 8px; }
.gift-page .notice { padding: 0; text-align: left; }
.gift-page .notice:not(:empty) { margin: 0 0 18px; padding: 14px 18px; border: 1px solid #b9cfb5; border-radius: 12px; background: #fffef4; overflow-wrap: anywhere; }
.gift-page .notice.error { border-color: #ddad91; background: #fff3e8; color: #a13827; }
.gift-layout { display: grid; grid-template-columns: 1.42fr 1fr; align-items: start; gap: 24px; }
.machine-card { position: relative; min-width: 0; border: 1px solid #355b43; border-radius: 24px; padding: 25px 28px 0; color: #f9edd2; background: radial-gradient(ellipse at 50% 20%, #3c6549, transparent 65%), #183d2e; box-shadow: 0 8px 0 #bbc8ab, inset 0 0 0 5px #ffffff05; }
.machine-kicker { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 1px; color: #cbd8b7; }
.machine-kicker > span:last-child { border: 1px solid #78926c; border-radius: 30px; padding: 5px 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8bba6b; margin-right: 6px; vertical-align: 2px; box-shadow: 0 0 8px #8bb96b44; }
.machine-title { display: flex; gap: 16px; justify-content: center; align-items: center; text-align: center; margin: 33px 0 27px; }
.machine-title p { font: 9px Georgia, serif; letter-spacing: 2px; color: #bfcaac; margin: 0 0 12px; }
.machine-title h2 { font: 700 clamp(22px, 2.5vw, 29px) "STKaiti", "KaiTi", "Microsoft YaHei", serif; color: #ffedba; letter-spacing: 2px; }
.little-star { font: 32px Georgia, serif; color: #d2af64; }
.slot-machine { position: relative; padding: 22px 19px 0; border: 2px solid #be9146; border-radius: 21px; background: linear-gradient(115deg, #ebcb87, #e2b86c 38%, #b5813d); box-shadow: 0 10px 19px #041e2570, inset 0 0 0 4px #fce6b380; }
.machine-lights { position: absolute; top: 9px; left: 24px; right: 24px; height: 5px; background: radial-gradient(circle, #fff2bd 2px, transparent 3px) 0 0 / 20px 5px; filter: drop-shadow(0 0 3px #ffffaf); }
.reel-surround { position: relative; padding: 9px; background: #654a2f; border-radius: 13px; box-shadow: inset 0 2px 6px #251b16a0, 0 1px 0 #fff0bf; }
.reels { --cell-height: 172px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.reels[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 260px; margin: 0 auto; }
.reels[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reels.many-reels { --cell-height: 134px; }
.reel { position: relative; height: var(--cell-height); overflow: hidden; border-radius: 7px; background: #fff9e9; box-shadow: inset 0 0 14px #5e331737; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#936b2b26, transparent 24%, transparent 76%, #91662728); border: 1px solid #eecb8d; border-radius: inherit; }
.reel-track { will-change: transform; }
.reel-card { height: var(--cell-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 9px 4px; color: #594326; text-align: center; }
.item-art { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto; border-radius: 18px; background: radial-gradient(ellipse, #e9c17b45, transparent 72%); }
.item-art img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 3px #6f4a2230); }
.item-fallback { color: #987342; font: 40px "STKaiti", "KaiTi", serif; }
.reel-card strong { font-size: 12px; max-width: 100%; line-height: 1.4; overflow-wrap: anywhere; }
.reel-card small { font: 700 11px Georgia, serif; color: #9d7134; }
.reel-card.idle-card { color: #988469; }
.idle-card .item-art { width: 82px; height: 82px; background: radial-gradient(#edd9ad, #f8eddb00 72%); }
.idle-card .item-fallback { font-size: 55px; color: #c49a5e; }
.is-spinning .reel-track { animation: reel-spin .52s linear infinite; }
.is-spinning .machine-lights { animation: lamp-pulse .6s ease-in-out infinite alternate; }
.reel.is-landed { box-shadow: 0 0 0 2px #ffe699, 0 0 20px #ffd16a90; }
.machine-footer { padding: 14px 0 13px; text-align: center; color: #593c21; }
.machine-footer > span:first-child { font-size: 10px; color: #8a622e; letter-spacing: 4px; }
.machine-footer p { margin: 8px 0 5px; font-weight: 700; font-size: 12px; line-height: 1.5; }
.machine-serial { font: 8px Georgia, serif; letter-spacing: 3px; opacity: .65; }
.machine-disclaimer { color: #bbcbb0; font-size: 11px; line-height: 1.9; text-align: center; margin: 22px 0; }
.gift-steps { display: flex; gap: 8px; justify-content: space-between; border-top: 1px solid #74866965; padding: 19px 0; font-size: 10px; color: #d6dfc4; }
.gift-steps b { font: 11px Georgia, serif; color: #dbbd7c; margin-right: 5px; }
.entry-card { min-width: 0; border: 1px solid #becaae; border-radius: 24px; background: #fffef6; box-shadow: 0 5px 0 #d0d9bc; }
.gift-page .login-view, .gift-page .account-view { padding: 27px; }
.entry-card h2 { font-size: 22px; letter-spacing: 0; font-family: "Microsoft YaHei", sans-serif; }
.entry-caption { font-size: 12px; color: #7c806b; margin: 12px 0 23px; line-height: 1.7; }
.gift-page .field input, .gift-page .field select { width: 100%; min-width: 0; border: 1px solid #c9ccb3; border-radius: 10px; background: #fffdf5; min-height: 46px; box-shadow: inset 0 2px 4px #74613a06; }
.gift-page .field > span { font-size: 12px; }
.field small { font-weight: normal; color: #858a74; font-size: 10px; margin-left: 6px; }
#cdkCode { font: 14px ui-monospace, Consolas, monospace; letter-spacing: 1px; }
.check-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #799476; border-radius: 10px; background: #ecf2e3; padding: 12px 16px; color: #285537; font-weight: 700; font-size: 13px; }
.check-action:hover { background: #e0ebd3; }
.gift-page .primary-action { width: 100%; min-height: 49px; height: auto; margin-top: 0; padding: 14px 12px; border: 1px solid #d29f46; border-radius: 12px; background: linear-gradient(#ffe5a2, #f4c86c); color: #52371c; font: 700 14px "Microsoft YaHei", sans-serif; letter-spacing: 1px; box-shadow: 0 4px 0 #b98a3d; }
.gift-page .primary-action:hover { background: linear-gradient(#ffedbe, #f7cf7c); }
.gift-page .primary-action:active { box-shadow: 0 1px 0 #b98a3d; transform: translateY(3px); }
.account-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 12px; margin-bottom: 21px; border: 0; border-bottom: 1px dashed #d3d9c0; border-radius: 0; background: transparent; font-size: 12px; }
.gift-page .account-strip > span { display: flex; align-items: center; min-width: 0; }
.gift-page .account-strip strong { display: inline; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.gift-page .quiet-button { font-size: 11px; color: #687457; padding: 6px 8px; }
.cdk-tip { margin: 13px 0 0; font-size: 11px; color: #767b65; line-height: 1.8; }
.cdk-result { margin-top: 22px; border-top: 1px dashed #d0d5b9; padding-top: 20px; }
.verified-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #4d7447; }
.verified-line b { background: #f5ebcb; color: #8a662d; padding: 4px 9px; border-radius: 5px; font-size: 10px; }
.reward-description { margin: 12px 0 18px; color: #6e6b51; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.gift-page .redeem-action { margin-top: 19px; }
.entry-footnote { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 17px 0 0; border-top: 1px dashed #d7dcc2; color: #8b967b; }
.entry-footnote > span { font: 28px Georgia, serif; color: #96a57f; }
.entry-footnote p { margin: 0; font-size: 11px; line-height: 1.9; }
.entry-footnote strong { font-weight: normal; color: #707961; }
.session-loading { padding: 30px; color: #6c7b5d; font-size: 13px; }
.pool-section, .history-section { margin-top: 32px; padding: 26px; border: 1px solid #c3ceb1; border-radius: 20px; background: #fffef6db; }
.gift-page .section-title h2 { font-family: "Microsoft YaHei", sans-serif; font-size: 19px; }
.gift-page .section-title .gift-eyebrow { font-size: 9px; margin-bottom: 8px; }
.gift-page .section-title > span { font-size: 11px; line-height: 1.7; }
.pool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.pool-outcome { min-width: 0; border: 1px solid #d5d9bc; border-radius: 13px; padding: 14px; background: #fffdf1; }
.pool-rate { display: flex; justify-content: space-between; color: #7b7d61; font-size: 11px; border-bottom: 1px dashed #daddc3; padding-bottom: 10px; margin-bottom: 10px; }
.pool-rate strong { color: #9c6926; }
.pool-reward { display: flex; gap: 10px; align-items: center; margin-top: 9px; min-width: 0; }
.pool-reward .item-art { width: 43px; height: 43px; border-radius: 10px; background: #efe8d6; }
.pool-reward .item-fallback { font-size: 24px; }
.pool-reward > span { font-size: 12px; color: #545a40; overflow-wrap: anywhere; line-height: 1.6; }
.table-wrap { max-width: 100%; overflow-x: auto; margin-top: 18px; }
.cdk-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.cdk-table th { font-size: 11px; font-weight: normal; color: #747b61; background: #f0f2e3; padding: 12px; }
.cdk-table td { padding: 16px 12px; border-bottom: 1px solid #e2e4d0; line-height: 1.7; overflow-wrap: anywhere; }
.cdk-table td:first-child { font-family: Consolas, monospace; font-size: 11px; color: #78806a; }
.cdk-table td:last-child { color: #888b78; font-size: 11px; }
.cdk-table .empty { text-align: center; padding: 28px 8px; color: #8c947b; font-family: inherit; }
.history-rewards { display: flex; flex-wrap: wrap; gap: 8px 15px; }
.history-rewards .pool-reward { margin: 0; }
.history-rewards .item-art { width: 30px; height: 30px; border-radius: 7px; }
.gift-footer { text-align: center; font-size: 11px; color: #849271; margin: 28px 0 0; letter-spacing: 2px; }
.gift-footer span { color: #b89557; margin: 0 10px; }
.gift-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #cbb17a; border-radius: 24px; padding: 34px; color: #30472e; background: #fffbee; box-shadow: 0 20px 90px #102e3280; }
.gift-dialog::backdrop { background: #112d27b3; backdrop-filter: blur(7px); }
.gift-dialog.error-dialog { position: fixed; text-align: center; border-color: #dab492; background: radial-gradient(ellipse at 50% 0%, #fbe5cc, transparent 70%), #fffbee; }
.error-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border: 1px solid #d3a076; border-radius: 50%; color: #a45a34; background: #fff4e3; font-size: 30px; font-weight: 700; box-shadow: 0 0 0 8px #d3a07612; }
.error-message { margin: 16px 0 26px; color: #795643; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.error-dialog > .primary-action { width: 100%; max-width: 280px; justify-content: center; }
.gift-dialog h2 { font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: 28px; letter-spacing: 1px; }
#confirmDescription { margin: 20px 0 0; line-height: 1.9; font-size: 14px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; gap: 12px; margin-top: 26px; }
.dialog-actions > button { flex: 1; justify-content: center; }
.gift-dialog.reward-dialog { position: fixed; width: min(720px, calc(100% - 32px)); padding: 36px; text-align: center; background: radial-gradient(ellipse at 50% 18%, #fff6d5, transparent 64%), #fffbee; isolation: isolate; }
.dialog-close { position: absolute; right: 11px; top: 8px; width: 44px; border: 0; background: transparent; color: #8a7b5e; font-size: 28px; z-index: 1; }
.celebration-halo { position: absolute; z-index: -1; pointer-events: none; width: 460px; height: 460px; left: 50%; top: -100px; transform: translateX(-50%); border-radius: 50%; background: repeating-conic-gradient(from 10deg, #eabd6630 0deg 7deg, transparent 7deg 24deg); mask-image: radial-gradient(circle, #000 0, transparent 68%); }
.reward-dialog .gift-eyebrow { font-size: 9px; color: #968159; margin-top: 8px; }
.reward-twinkle { color: #c2913c; font: 42px Georgia, serif; margin: 17px 0 13px; text-shadow: 0 0 20px #ffce5c; }
.reward-dialog h2 { font-size: 32px; color: #365531; overflow-wrap: anywhere; }
.reward-subtitle { margin: 12px 0 0; color: #978363; font-size: 12px; }
.reward-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 30px 0 24px; }
.reward-cards[data-count="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
.reward-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 210px)); justify-content: center; }
.prize-card { position: relative; min-width: 0; display: flex; align-items: center; flex-direction: column; padding: 19px 9px 17px; border: 1px solid #e4c68a; border-radius: 17px; background: linear-gradient(#fffef5, #fbefcf); box-shadow: 0 0 23px #eebd593b, inset 0 0 0 3px #fff9e6; animation: prize-arrive .5s ease-out both; }
.prize-card .item-art { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(#f2d792 5%, #f5d88e6b 40%, #f4d38200 72%); filter: drop-shadow(0 0 9px #e8b45245); }
.prize-card strong { margin-top: 12px; max-width: 100%; color: #62492d; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.prize-card small { color: #ab7c34; font: 700 15px Georgia, serif; margin-top: 8px; }
.reward-summary { font-size: 12px; line-height: 1.9; color: #6d785e; overflow-wrap: anywhere; }
.reward-dialog > .primary-action { max-width: 310px; }
.reward-dialog .cdk-tip { font-size: 10px; }
.gift-page.modal-open { overflow: hidden; }
@keyframes reel-spin { from { transform: translateY(0); } to { transform: translateY(calc(-4 * var(--cell-height))); } }
@keyframes lamp-pulse { to { opacity: .5; filter: drop-shadow(0 0 7px #fff9af); } }
@keyframes prize-arrive { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .gift-shell { width: min(100% - 32px, 720px); padding-top: 30px; }
  .gift-layout { grid-template-columns: 1fr; }
  .machine-card { padding-left: 32px; padding-right: 32px; }
  .slot-machine { max-width: 540px; margin: 0 auto; }
  .pool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-steps { justify-content: space-around; }
}
@media (max-width: 480px) {
  .gift-shell { width: calc(100% - 24px); padding-top: 25px; }
  .gift-heading { gap: 0; margin-bottom: 24px; }
  .gift-heading h1 { font-size: 35px; }
  .gift-stamp { display: none; }
  .gift-subtitle { font-size: 12px; margin-top: 11px; }
  .gift-eyebrow { font-size: 9px; letter-spacing: 2px; }
  .machine-card { padding: 19px 15px 0; border-radius: 20px; }
  .machine-title { gap: 9px; margin: 25px 0 22px; }
  .machine-title h2 { font-size: 24px; letter-spacing: 0; }
  .machine-title p { font-size: 8px; letter-spacing: 1px; }
  .little-star { font-size: 24px; }
  .slot-machine { padding: 20px 10px 0; border-radius: 15px; }
  .reel-surround { padding: 6px; }
  .reels { --cell-height: 150px; gap: 5px; }
  .reels.many-reels { --cell-height: 124px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel-card strong { font-size: 10px; }
  .reel-card .item-art { width: 58px; height: 58px; }
  .machine-kicker { font-size: 10px; letter-spacing: 0; }
  .machine-disclaimer { font-size: 10px; margin: 18px 0; }
  .gift-steps { font-size: 9px; gap: 5px; justify-content: space-between; }
  .gift-page .login-view, .gift-page .account-view { padding: 23px 20px; }
  .gift-page .captcha-row { grid-template-columns: minmax(0, 1fr) 96px 44px; gap: 7px; }
  .gift-page .captcha-image { width: 96px; max-width: 100%; }
  .pool-section, .history-section { padding: 22px 16px; margin-top: 25px; }
  .pool-list { grid-template-columns: 1fr; }
  .gift-page .section-title { align-items: start; gap: 12px; }
  .gift-page .section-title > span { max-width: 100px; font-size: 10px; }
  .cdk-table { min-width: 540px; }
  .gift-dialog { padding: 28px 22px; }
  .dialog-actions { flex-direction: column-reverse; }
  .gift-dialog.reward-dialog { padding: 30px 19px; }
  .reward-dialog h2 { font-size: 27px; }
  .reward-cards { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-cards:not([data-count="1"]) .prize-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .prize-card { padding: 14px 7px; }
  .prize-card strong { font-size: 12px; }
  .prize-card .item-art { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-page *, .gift-page *::before, .gift-page *::after { animation: none !important; scroll-behavior: auto !important; }
}
