.wheel-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 18px; align-items: stretch; }
.wheel-panel { display: flex; flex-direction: column; align-items: center; padding: 23px; }
.wheel-stage { position: relative; width: min(100%,520px); aspect-ratio: 1; display: grid; place-items: center; }
.wheel-disc { position: relative; width: 92%; height: 92%; overflow: hidden; border: 9px solid white; border-radius: 50%; background: #eeecf5; box-shadow: 0 12px 30px #453b8140; transition: transform 4.4s cubic-bezier(.12,.74,.12,1); }
.wheel-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel-empty .wheel-center { background: #85899a; }
.wheel-center { position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; display: grid; place-items: center; border: 6px solid white; border-radius: 50%; background: #302a50; color: white; font-size: 15px; font-weight: 800; transform: translate(-50%,-50%); box-shadow: 0 3px 10px #24264b40; }
.wheel-pointer { position: absolute; z-index: 2; top: 1%; left: 50%; width: 0; height: 0; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 27px solid #292641; transform: translateX(-50%); filter: drop-shadow(0 3px 2px #0003); }
.wheel-actions { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px; margin-top: 12px; }.spin-button { min-width: 205px; }.spin-button:disabled { opacity: .6; cursor: wait; transform: none; }.wheel-reset:disabled { opacity: .5; cursor: not-allowed; }
.wheel-duration-control { display: inline-flex; align-items: center; gap: 7px; color: #73788a; font-size: 9px; }.wheel-duration-select { min-height: 34px; padding: 0 9px; border: 1px solid #e8eaf1; border-radius: 8px; background: white; color: #565b6d; font-size: 9px; }
.repeat-toggle { display: inline-flex; align-items: center; gap: 8px; color: #73788a; font-size: 9px; cursor: pointer; }.repeat-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }.toggle-track { position: relative; width: 32px; height: 18px; border-radius: 20px; background: #dcdfe8; transition: background .2s; }.toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0002; transition: transform .2s; }.repeat-toggle input:checked + .toggle-track { background: var(--purple); }.repeat-toggle input:checked + .toggle-track::after { transform: translateX(14px); }.repeat-toggle input:focus-visible + .toggle-track { outline: 3px solid #c9beff; }
.wheel-hint { margin: 13px 0 0; color: #9a9eac; font-size: 9px; text-align: center; }
.roster-error { color: var(--red); }
.mystery-game-panel { min-height: 360px; }.mystery-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.mystery-game-settings,.mystery-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }.mystery-game-actions .primary-button:disabled,.mystery-game-actions .secondary-button:disabled { opacity: .5; cursor: not-allowed; }.mystery-game-hint { min-height: 20px; margin: 15px 0 18px; color: #85899a; font-size: 10px; text-align: center; }.gift-grid { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 126px; grid-template-rows: repeat(2,minmax(132px,1fr)); gap: 12px; max-height: 330px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 5px 7px 10px; isolation: isolate; }.gift-grid::before,.gift-grid::after { position: absolute; z-index: -1; right: 0; left: 0; height: 7px; border-radius: 5px; background: repeating-linear-gradient(90deg,#d0ded9 0 12px,#f1f7f4 12px 24px); background-size: 48px 7px; animation: conveyor-flow .7s linear infinite; content: ""; }.gift-grid::before { top: calc(25% - 4px); }.gift-grid::after { top: calc(75% - 4px); }.gift-card { position: relative; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; overflow: hidden; border: 1px solid #e7f2ef; border-radius: 14px; background: linear-gradient(155deg,#f4fbf8,#eaf7f2); color: #596779; cursor: pointer; scroll-snap-align: start; transition: transform .2s,border-color .2s,box-shadow .2s,background .2s; }.gift-card:not(:disabled):hover { transform: translateY(-3px); border-color: #aad9ca; box-shadow: 0 8px 18px #398f761c; }.gift-card:disabled { cursor: default; }.gift-card.opened { border-color: #d9d3f7; background: linear-gradient(155deg,#faf8ff,#f1edff); }.gift-card.opening { animation: gift-open .58s cubic-bezier(.2,.8,.2,1) both; }.gift-card-icon { position: relative; width: 62px; height: 63px; display: block; filter: drop-shadow(0 5px 5px #3a947624); transition: transform .2s; animation: conveyor-box-flow 1.8s ease-in-out infinite alternate; }.gift-card:nth-child(even) .gift-card-icon { animation-delay: -.9s; }.gift-card:not(:disabled):hover .gift-card-icon { transform: rotate(-5deg) scale(1.04); }.gift-card-icon::before { position: absolute; z-index: 2; top: 20px; right: 0; left: 0; height: 12px; border: 3px solid #ffffffd9; border-radius: 5px; background: #58b9a5; content: ""; }.gift-card-icon::after { position: absolute; z-index: 3; top: 21px; left: 27px; width: 9px; height: 37px; border: 2px solid #fff9; border-radius: 3px; background: #ffcf74; content: ""; }.gift-card-box { position: absolute; right: 5px; bottom: 0; left: 5px; height: 43px; border: 3px solid #ffffffd9; border-radius: 6px 6px 10px 10px; background: linear-gradient(145deg,#77cdb7,#46ad98); }.gift-card-bow { position: absolute; z-index: 4; top: 2px; left: 24px; width: 14px; height: 14px; border: 4px solid #ffcf74; border-radius: 12px 12px 2px 12px; transform: rotate(45deg); }.gift-card-label { max-width: 100%; color: #697386; font-size: 9px; font-weight: 700; }.gift-card.opened .gift-card-label { color: #6953c1; overflow-wrap: anywhere; text-align: center; }.gift-grid-empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; padding: 35px 10px; color: #9a9eac; font-size: 10px; text-align: center; }
.mystery-game-panel .repeat-toggle input:disabled + .toggle-track { opacity: .55; }
@keyframes gift-open { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.08) rotate(-5deg); } 65% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes conveyor-flow { to { background-position: 48px 0; } }
@keyframes conveyor-box-flow { to { translate: 18px 0; } }
.gift-card-icon { animation-duration: 1.4s; }
.gift-grid { display: flex; flex-direction: column; gap: 12px; max-height: none; overflow: hidden; padding: 5px 0; }
.gift-grid::before,.gift-grid::after { display: none; }
.gift-lane { position: relative; width: 100%; overflow: hidden; padding: 5px 0; }
.gift-lane::before { position: absolute; top: 50%; right: 0; left: 0; height: 7px; border-radius: 5px; background: repeating-linear-gradient(90deg,#d0ded9 0 12px,#f1f7f4 12px 24px); background-size: 48px 7px; animation: conveyor-flow .7s linear infinite; content: ""; transform: translateY(-50%); }
.gift-track { position: relative; z-index: 1; display: flex; width: max-content; animation: conveyor-move-right var(--conveyor-duration,20s) linear infinite; }
.gift-lane:hover .gift-track { animation-play-state: paused; }
.gift-group { display: flex; flex: 0 0 auto; gap: 12px; padding-right: 12px; }
.gift-card { flex: 0 0 126px; min-height: 132px; }
.gift-card-icon { animation: none; }
@keyframes conveyor-move-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .gift-grid { overflow: visible; }
  .gift-lane { overflow: visible; }
  .gift-track { width: 100%; flex-wrap: wrap; animation: none !important; }
  .gift-group:not([aria-hidden="true"]) { width: 100%; flex: 1 1 100%; flex-wrap: wrap; }
  .gift-group[aria-hidden="true"] { display: none; }
}
.wheel-add-students { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #eceef4; border-radius: 10px; background: #fcfcfe; }.wheel-add-students label { color: #565b6d; font-size: 9px; font-weight: 700; }.wheel-add-students textarea { width: 100%; min-height: 72px; resize: vertical; border: 1px solid #e8eaf1; border-radius: 8px; padding: 9px 10px; background: white; color: #51566b; font: inherit; font-size: 10px; line-height: 1.6; }.wheel-add-students .secondary-button { justify-self: start; }
.wheel-side { min-width: 0; }.wheel-roster { max-height: 360px; overflow: auto; margin: 15px 0 0; padding: 0; list-style: none; }.wheel-roster li { display: flex; align-items: center; gap: 9px; padding: 10px 2px; border-top: 1px solid #f0f1f5; color: #565b6d; font-size: 10px; }.roster-number { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #f1eeff; color: var(--purple); font-size: 8px; font-weight: 800; }.roster-empty { padding: 20px 5px; color: #9a9eac; font-size: 10px; line-height: 1.7; text-align: center; }
.box-roster-heading { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f1f5; }.mystery-game-panel .wheel-roster { max-height: 220px; margin-top: 8px; }
.game-status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 20px; background: white; color: #85899a; font-size: 9px; font-weight: 700; white-space: nowrap; }.game-status i { width: 7px; height: 7px; border-radius: 50%; background: #61c99e; }
.class-panel { min-width: 0; }.student-row input { min-width: 0; width: 100%; height: 40px; border: 1px solid #e8eaf1; border-radius: 8px; padding: 0 11px; background: #fcfcfe; color: #51566b; font-size: 10px; }
.bulk-student-form { display: grid; gap: 8px; margin-top: 15px; padding: 14px; border: 1px solid #eceef4; border-radius: 10px; background: #fcfcfe; }.bulk-student-form label { color: #565b6d; font-size: 10px; font-weight: 700; }.bulk-student-form textarea { width: 100%; min-height: 100px; resize: vertical; border: 1px solid #e8eaf1; border-radius: 8px; padding: 10px 11px; background: white; color: #51566b; font: inherit; font-size: 10px; line-height: 1.7; }.bulk-student-form p { margin: 0; color: #969bad; font-size: 9px; line-height: 1.6; }.bulk-student-form .secondary-button { justify-self: start; }
.student-list,.history-list { margin: 14px 0 0; padding: 0; list-style: none; }.student-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding-right: 5px; }.student-row { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid #f0f1f5; }.student-row input { height: 35px; }.row-number { flex: 0 0 22px; color: #a0a4b2; font-size: 9px; text-align: center; }.icon-button { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid #eceef4; border-radius: 8px; background: white; color: #777c8e; cursor: pointer; }.icon-button:hover { border-color: #f1c5ce; color: var(--red); }.list-empty { padding: 20px 5px; color: #969bad; font-size: 10px; text-align: center; }
.list-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 13px; border-top: 1px solid #f0f1f5; color: #979bab; font-size: 8px; }.list-danger-zone .danger-button { min-height: 32px; padding: 7px 9px; font-size: 8px; }
.history-panel { margin-top: 17px; }.history-heading { align-items: center; }.history-heading span { color: #969bad; font-size: 9px; }.history-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 12px 2px; border-top: 1px solid #f0f1f5; }.history-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #f1eeff; color: var(--purple); font-weight: 800; }.history-result { color: #4e5264; font-size: 10px; font-weight: 700; }.history-meta { margin-top: 3px; color: #9a9eac; font-size: 8px; }.history-time { color: #a0a4b2; font-size: 8px; white-space: nowrap; }
@keyframes wheel-confetti { 0% { opacity: 0; transform: translateY(8px) scale(.45) rotate(-20deg); } 45% { opacity: 1; transform: translateY(-7px) scale(1.08) rotate(10deg); } 100% { opacity: 0; transform: translateY(-18px) scale(.9) rotate(24deg); } }
.result-card.celebrating .result-confetti { animation: wheel-confetti .9s ease-out both; }
.result-card.celebrating .result-confetti::before,.result-card.celebrating .result-confetti::after { position: absolute; color: #f0a744; font-size: 16px; content: "✦"; }
.result-card.celebrating .result-confetti::before { top: -8px; left: -13px; animation: wheel-confetti .8s .08s ease-out both; }
.result-card.celebrating .result-confetti::after { right: -14px; bottom: -4px; color: #54b994; animation: wheel-confetti .8s .16s ease-out both; }
@media (max-width: 650px) { .wheel-layout { grid-template-columns: 1fr; gap: 12px; }.wheel-panel,.panel { padding: 16px; }.wheel-stage { width: min(100%,420px); }.wheel-disc { border-width: 7px; }.wheel-center { width: 52px; height: 52px; }.wheel-actions { gap: 11px; }.wheel-actions .spin-button { flex: 1 1 100%; }.wheel-actions .repeat-toggle { flex: 1 1 auto; }.wheel-duration-control { flex: 1 1 100%; justify-content: center; }.wheel-add-students .secondary-button { width: 100%; }.bulk-student-form .secondary-button { width: 100%; }.history-row { grid-template-columns: 30px 1fr; }.history-time { grid-column: 2; }.mystery-game-toolbar { align-items: stretch; flex-direction: column; }.mystery-game-actions .primary-button { flex: 1; }.gift-grid { gap: 8px; }.gift-group { gap: 8px; padding-right: 8px; }.gift-card { flex-basis: 102px; min-height: 122px; padding: 10px; } }
.flip-card-art { background: linear-gradient(135deg,#fff0e8,#fff7ed 55%,#ffe6dc); }.flip-card-tag { color: #cf785e; }.flip-card-stack { position: relative; width: 120px; height: 120px; filter: drop-shadow(0 10px 12px #945e4a20); transition: transform .25s; }.featured-card:hover .flip-card-stack { transform: translateY(-3px) rotate(-3deg); }.flip-card-stack i { position: absolute; top: 12px; left: 28px; width: 66px; height: 94px; border: 4px solid white; border-radius: 11px; background: linear-gradient(145deg,#ee9b80,#d97565); box-shadow: 0 5px 12px #a95d4a24; }.flip-card-stack i::before { position: absolute; inset: 7px; border: 1px solid #ffffffa6; border-radius: 6px; content: ""; }.flip-card-stack i::after { position: absolute; top: 31px; left: 23px; color: #fff5e8; font-size: 22px; content: "✦"; }.flip-card-stack i:first-child { transform: rotate(-17deg) translate(-8px,1px); background: linear-gradient(145deg,#f5c26e,#e9a552); }.flip-card-stack i:last-child { transform: rotate(17deg) translate(8px,1px); background: linear-gradient(145deg,#9c8bea,#7668cf); }.flip-card-stack i:nth-child(2) { z-index: 1; }.flip-card-star { color: #e09b4e; }
.flip-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.flip-game-settings,.flip-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }.flip-game-actions .primary-button { min-width: 115px; }.flip-game-actions button:disabled { opacity: .5; cursor: not-allowed; }.flip-game-hint { min-height: 20px; margin: 17px 0; color: #85899a; font-size: 10px; text-align: center; }
.flip-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,148px),1fr)); gap: 16px; margin: 0; padding: 4px 2px 12px; list-style: none; perspective: 1200px; }.flip-card-item { min-width: 0; }.flip-card { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 15px; background: transparent; cursor: pointer; perspective: 1000px; }.flip-card:focus-visible { outline: 3px solid #b8a8f6; outline-offset: 4px; }.flip-card-inner { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.72,.18,1); }.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }.flip-card-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e8e2fb; border-radius: inherit; backface-visibility: hidden; box-shadow: 0 8px 20px #3f357a12; }.flip-card-back { background: linear-gradient(145deg,#806ce0,#624ec2); color: white; }.flip-card-back::before { position: absolute; inset: 9px; border: 1px solid #ffffff70; border-radius: 10px; background: repeating-linear-gradient(45deg,#ffffff0b 0 7px,#ffffff1c 7px 9px); content: ""; }.flip-card-back-mark { z-index: 1; width: 49px; height: 49px; display: grid; place-items: center; border: 2px solid #ffffffc9; border-radius: 50%; color: white; font-family: Georgia,serif; font-size: 27px; box-shadow: 0 2px 12px #382b8140; }.flip-card-front { padding: 14px; background: radial-gradient(circle at top right,#fff3d8,transparent 48%),linear-gradient(145deg,#fff,#f3f0ff); color: #4d466c; transform: rotateY(180deg); }.flip-card-name { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; font-weight: 800; line-height: 1.45; text-align: center; }.flip-card:not(.is-flipped):hover .flip-card-inner { transform: translateY(-4px) rotateY(8deg); }.flip-card.is-flipped:hover .flip-card-inner { transform: rotateY(180deg) translateY(-4px); }.flip-card-empty { grid-column: 1 / -1; padding: 46px 12px; border: 1px dashed #e7e3f2; border-radius: 12px; color: #969bad; font-size: 10px; text-align: center; }
.flip-game-panel .repeat-toggle input:disabled + .toggle-track { opacity: .55; }
.flip-roster-heading { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f1f5; }.flip-roster { max-height: 220px; margin-top: 8px; }
@media (max-width: 650px) { .flip-game-toolbar { align-items: stretch; flex-direction: column; }.flip-game-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.flip-game-actions button { min-height: 38px; padding: 8px; font-size: 9px; }.flip-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.flip-card-name { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .flip-card-inner { transition: none; }.flip-card:not(.is-flipped):hover .flip-card-inner,.flip-card.is-flipped:hover .flip-card-inner { transform: none; }.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); } }
.slot-card-art { background: linear-gradient(135deg,#fff3d6,#fff9e9 55%,#ffebbd); }.slot-card-tag { color: #bc8740; }.slot-card-reels { display: flex; gap: 6px; padding: 9px; border: 5px solid white; border-radius: 15px; background: linear-gradient(145deg,#6656b8,#443a84); box-shadow: 0 10px 22px #443a8438; transform: rotate(-4deg); transition: transform .25s; }.featured-card:hover .slot-card-reels { transform: rotate(2deg) translateY(-3px); }.slot-card-reels i { width: 35px; height: 48px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(180deg,#fff,#f2effb); color: #6757af; font-size: 14px; font-style: normal; font-weight: 900; box-shadow: inset 0 -5px 0 #e4e0f0; }.slot-card-reels i:nth-child(2) { color: #e0a23f; }.slot-card-star { color: #e8ae4d; }
.slot-game-toolbar { position: sticky; z-index: 6; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e7e3f2; border-radius: 12px; background: #ffffffed; box-shadow: 0 5px 18px #24264b12; backdrop-filter: blur(8px); }.slot-game-settings,.slot-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }.slot-game-actions .primary-button { min-width: 145px; }.slot-game-actions button:disabled { opacity: .5; cursor: not-allowed; }.slot-game-hint { min-height: 20px; margin: 17px 0 19px; color: #85899a; font-size: 10px; text-align: center; }.slot-machine { width: min(100%,760px); margin: 0 auto; padding: 21px; border: 1px solid #e3def5; border-radius: 20px; background: linear-gradient(145deg,#f8f6ff,#eeebfa); box-shadow: inset 0 2px 7px #4f438810,0 8px 22px #4840770d; }.slot-reels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 10px; border: 1px solid #dfd9ef; border-radius: 14px; background: #d9d4e9; }.slot-reel-window { height: 72px; overflow: hidden; border: 1px solid #ebe8f4; border-radius: 9px; background: white; box-shadow: inset 0 2px 7px #40366b12; }.slot-reel-track { will-change: transform; }.slot-reel-track[style*="--reel-duration"] { transition: transform var(--reel-duration,3s) cubic-bezier(.12,.73,.12,1); }.slot-reel-item { height: 72px; display: grid; place-items: center; padding: 7px; overflow: hidden; color: #50496b; font-size: 13px; font-weight: 800; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }.slot-reel-item:nth-child(odd) { background: linear-gradient(90deg,#fff,#faf9fe); }.slot-reel-winner { color: #654fc3; background: linear-gradient(100deg,#fff3d9,#fffaf0)!important; }.slot-reels.is-spinning .slot-reel-track { filter: blur(.6px); }.slot-result { min-height: 48px; display: grid; place-items: center; margin-top: 14px; padding: 10px 14px; border: 1px solid #e6e0f4; border-radius: 10px; background: white; color: #6654bd; font-size: 16px; font-weight: 800; text-align: center; overflow-wrap: anywhere; }.slot-history-panel { width: min(100%,760px); margin: 20px auto 0; }.slot-history-panel .history-heading { align-items: center; }.slot-history-panel .history-heading h2 { margin: 0; color: #44495d; font-size: 14px; }.slot-history-panel .history-heading span { color: #969bad; font-size: 9px; }.slot-history-list { max-height: 250px; overflow-y: auto; margin: 9px 0 0; padding: 0; list-style: none; }.slot-history-list li { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid #f0f1f5; }.slot-history-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #f1eeff; color: var(--purple); font-size: 8px; font-weight: 800; }.slot-history-result { color: #565b6d; font-size: 10px; font-weight: 700; }.slot-history-list time { color: #9a9eac; font-size: 8px; }.slot-history-empty { display: block!important; padding: 18px 5px!important; color: #969bad; font-size: 10px; text-align: center; }
.slot-roster-heading { width: min(100%,760px); margin: 20px auto 0; padding-top: 14px; border-top: 1px solid #f0f1f5; }.slot-roster { width: min(100%,760px); max-height: 220px; margin: 8px auto 0; }
@media (max-width: 650px) { .slot-game-toolbar { top: 6px; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }.slot-game-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }.slot-game-actions .primary-button { grid-column: 1 / -1; }.slot-game-actions button { min-height: 38px; }.slot-machine { padding: 12px; border-radius: 15px; }.slot-reels { gap: 6px; padding: 6px; }.slot-reel-item { padding: 5px; font-size: 11px; }.slot-result { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .slot-reel-track[style*="--reel-duration"] { transition-duration: .01ms; }.slot-reels.is-spinning .slot-reel-track { filter: none; } }
.scratch-card-art { background: linear-gradient(135deg,#fff3df,#fff9ed 55%,#ffe9c5); }.scratch-card-tag { color: #b88545; }.scratch-card-illustration { width: 112px; height: 74px; display: grid; place-items: center; border: 7px solid white; border-radius: 17px; background: repeating-linear-gradient(135deg,#d3d5dd 0 8px,#b7bbc7 8px 15px); box-shadow: 0 10px 22px #866f4930; transform: rotate(-8deg); transition: transform .25s; }.featured-card:hover .scratch-card-illustration { transform: rotate(2deg) translateY(-4px); }.scratch-card-illustration i { width: 39px; height: 39px; display: grid; place-items: center; border: 2px solid #ffffffd9; border-radius: 50%; background: #fff9; color: #74634f; font-size: 24px; font-style: normal; font-weight: 800; }.scratch-card-star { color: #dfa44f; }
.scratch-game-panel { min-height: 360px; }.scratch-toolbar { position: sticky; z-index: 6; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e7e3f2; border-radius: 12px; background: #ffffffed; box-shadow: 0 5px 18px #24264b12; backdrop-filter: blur(8px); }.scratch-settings,.scratch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }.scratch-actions .primary-button { min-width: 115px; }.scratch-actions button:disabled { opacity: .5; cursor: not-allowed; }.scratch-roster-heading { width: min(100%,760px); margin: 18px auto 0; padding-top: 14px; border-top: 1px solid #f0f1f5; }.scratch-roster { width: min(100%,760px); max-height: 220px; margin: 8px auto 0; }.scratch-hint { min-height: 20px; margin: 17px 0; color: #85899a; font-size: 10px; text-align: center; }.scratch-ticket-wrap { width: min(100%,760px); margin: 0 auto; }.scratch-ticket { position: relative; display: grid; aspect-ratio: 9 / 5; overflow: hidden; border: 1px solid #eadfc8; border-radius: 20px; background: radial-gradient(circle at 15% 20%,#fff9e9,transparent 38%),linear-gradient(145deg,#fffdf7,#f9edd6); box-shadow: 0 12px 30px #8d704018,inset 0 0 0 8px #ffffffa8; }.scratch-ticket-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(7px,2vw,16px); padding: 22px; text-align: center; }.scratch-ticket-label { color: #a47d44; font-size: clamp(9px,1.6vw,13px); font-weight: 800; letter-spacing: .13em; }.scratch-ticket-name { max-width: 100%; color: #6450b4; font-size: clamp(23px,6vw,48px); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }.scratch-ticket-caption { color: #918064; font-size: clamp(9px,1.8vw,14px); }.scratch-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .42s ease; }.scratch-cover:active { cursor: grabbing; }.scratch-ticket:not(.is-covered) .scratch-cover { pointer-events: none; }.scratch-ticket.is-revealed .scratch-cover { opacity: 0; }.scratch-instructions { margin: 12px 0 0; color: #9295a2; font-size: 10px; text-align: center; }.scratch-instructions strong { color: #6b58bb; }.scratch-history-panel { width: min(100%,760px); margin: 20px auto 0; }.scratch-history-panel .history-heading { align-items: center; }.scratch-history-panel .history-heading h2 { margin: 0; color: #44495d; font-size: 14px; }.scratch-history-panel .history-heading span { color: #969bad; font-size: 9px; }.scratch-history-list { max-height: 250px; overflow-y: auto; margin: 9px 0 0; padding: 0; list-style: none; }.scratch-history-list li { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid #f0f1f5; }.scratch-history-empty { display: block!important; padding: 18px 5px!important; color: #969bad; font-size: 10px; text-align: center; }.scratch-game-panel .repeat-toggle input:disabled + .toggle-track { opacity: .55; }
@media (max-width: 650px) { .scratch-toolbar { top: 6px; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }.scratch-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.scratch-actions button { min-height: 38px; padding: 8px; font-size: 9px; }.scratch-actions .primary-button { min-width: 0; }.scratch-ticket { border-radius: 13px; box-shadow: inset 0 0 0 5px #ffffffa8; }.scratch-ticket-content { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .scratch-cover { transition-duration: .01ms!important; } }
.team-card-art { background: linear-gradient(135deg,#e5f6ee,#f5fcf8 55%,#d9f0e4); }.team-card-tag { color: #4f9c75; }.team-card-people { position: relative; width: 124px; height: 106px; display: flex; align-items: center; justify-content: center; gap: 8px; }.team-card-people::before { position: absolute; top: 50%; right: 4px; left: 4px; height: 5px; border-radius: 9px; background: #ffffffc9; content: ""; }.team-card-people i { z-index: 1; width: 23px; height: 23px; display: grid; place-items: center; border: 5px solid white; border-radius: 50%; background: #58b98d; color: transparent; box-shadow: 0 5px 10px #367d5b24; font-size: 0; }.team-card-people i:nth-child(2) { background: #8879d5; transform: translateY(-13px); }.team-card-people i:nth-child(3) { background: #f1ad5e; transform: translateY(13px); }.team-card-people i:nth-child(4) { background: #e87e87; }.featured-card:hover .team-card-people i { animation: team-card-bounce .45s ease both; }.team-card-star { color: #65ad83; }
.team-game-panel { min-height: 360px; }.team-toolbar { position: sticky; z-index: 6; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e7e3f2; border-radius: 12px; background: #ffffffed; box-shadow: 0 5px 18px #24264b12; backdrop-filter: blur(8px); }.team-settings,.team-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }.team-control-label { display: inline-flex; align-items: center; gap: 7px; color: #73788a; font-size: 9px; }.team-control-label select,.team-control-label input { min-height: 34px; border: 1px solid #e8eaf1; border-radius: 8px; background: white; color: #565b6d; font-size: 9px; }.team-control-label select { padding: 0 8px; }.team-control-label input { width: 68px; padding: 0 9px; }.team-actions .primary-button { min-width: 126px; }.team-actions button:disabled,.team-control-label select:disabled,.team-control-label input:disabled { opacity: .5; cursor: not-allowed; }.team-config-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 2px 0; }.team-config-row p { margin: 0; color: #85899a; font-size: 9px; line-height: 1.6; }.team-config-row .text-link { flex: 0 0 auto; border: 0; padding: 4px; background: transparent; color: var(--purple); font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }.team-roster-heading { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f1f5; }.team-roster { max-height: 180px; margin-top: 8px; }.team-hint { min-height: 20px; margin: 15px 0 20px; color: #85899a; font-size: 10px; text-align: center; }.team-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-top: 16px; border-top: 1px solid #f0f1f5; }.team-results-heading h2 { margin: 0; color: #44495d; font-size: 14px; }.team-results-heading p { margin: 4px 0 0; color: #969bad; font-size: 9px; }.team-empty { margin: 0; padding: 26px 8px; border: 1px dashed #e2e5ee; border-radius: 12px; color: #969bad; font-size: 10px; text-align: center; }.team-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,225px),1fr)); align-items: start; gap: 12px; }.team-group { min-width: 0; overflow: hidden; border: 1px solid #e7eaf1; border-radius: 13px; background: linear-gradient(155deg,#fff,#fafaff); box-shadow: 0 5px 16px #3834590a; transition: border-color .2s,box-shadow .2s,transform .2s; }.team-group.is-drop-target { border-color: #8b78df; box-shadow: 0 0 0 3px #8b78df22; transform: translateY(-2px); }.team-group-enter { animation: team-group-enter .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--team-delay,0ms); }.team-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #eeeef5; background: linear-gradient(110deg,#f5f2ff,#f9f8ff); }.team-group-heading h3 { margin: 0; color: #6252b0; font-size: 11px; }.team-group-heading span { color: #8d90a0; font-size: 8px; white-space: nowrap; }.team-member-list { min-height: 55px; display: grid; gap: 6px; margin: 0; padding: 9px; list-style: none; }.team-member { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 9px; border: 1px solid #eceef4; border-radius: 9px; background: white; color: #565b6d; cursor: grab; transition: background .2s,border-color .2s,opacity .2s; }.team-member:active { cursor: grabbing; }.team-member.is-dragging { opacity: .38; }.team-member-name { min-width: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 600; }.team-move-label { flex: 0 0 auto; }.team-move-select { max-width: 92px; min-height: 28px; border: 1px solid #e8eaf1; border-radius: 7px; padding: 0 5px; background: #fcfcfe; color: #777c8e; font-size: 8px; }.team-move-select:disabled { opacity: .5; cursor: not-allowed; }
@keyframes team-group-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes team-card-bounce { 50% { translate: 0 -6px; } } @media (max-width: 650px) { .team-toolbar { top: 6px; align-items: stretch; flex-direction: column; gap: 10px; padding: 10px; }.team-settings { gap: 9px; }.team-control-label { flex: 1 1 100%; justify-content: space-between; }.team-control-label select { flex: 0 1 65%; }.team-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.team-actions .primary-button { grid-column: 1 / -1; }.team-actions button { min-height: 38px; padding: 8px; font-size: 9px; }.team-results-heading { align-items: flex-start; }.team-results-heading .secondary-button { flex: 0 0 auto; padding: 8px; font-size: 9px; }.team-results { grid-template-columns: 1fr; }.team-config-row { align-items: flex-start; }.team-group-heading { padding: 10px; }.team-member-list { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .team-card-people i,.team-group-enter { animation-duration: .01ms!important; } }