:root {
  --casino-cat:url('./assets/games/casino-cat-cheese.webp');
  --sleep-cat:url('./assets/games/sleep-cat-cheese.webp');
  --casino-felt:#174c3a;
  --casino-felt-dark:#082d22;
  --party-gold:#d8ac55;
  --head-x:42%;--head-y:40%;--tail-x:61%;--tail-y:68%;
  --front-x:45%;--front-y:58%;--back-x:67%;--back-y:62%;--belly-x:57%;--belly-y:54%;
}
html[data-ui-theme="tuxedo-cat"] {
  --casino-cat:url('./assets/games/casino-cat-tuxedo.webp');--sleep-cat:url('./assets/games/sleep-cat-tuxedo.webp');
  --casino-felt:#202523;--casino-felt-dark:#090b0a;--party-gold:#d1b477;
  --head-x:58%;--head-y:38%;--tail-x:41%;--tail-y:64%;--front-x:57%;--front-y:52%;--back-x:55%;--back-y:67%;--belly-x:48%;--belly-y:55%;
}
html[data-ui-theme="white-cat"] {
  --casino-cat:url('./assets/games/casino-cat-white.webp');--sleep-cat:url('./assets/games/sleep-cat-white.webp');
  --casino-felt:#567c72;--casino-felt-dark:#284a42;--party-gold:#e3b1c5;
  --head-x:47%;--head-y:37%;--tail-x:68%;--tail-y:61%;--front-x:47%;--front-y:51%;--back-x:59%;--back-y:65%;--belly-x:54%;--belly-y:55%;
}
html[data-ui-theme="siamese-cat"] {
  --casino-cat:url('./assets/games/casino-cat-siamese.webp');--sleep-cat:url('./assets/games/sleep-cat-siamese.webp');
  --casino-felt:#275a68;--casino-felt-dark:#12323b;--party-gold:#c9a261;
  --head-x:56%;--head-y:39%;--tail-x:43%;--tail-y:68%;--front-x:53%;--front-y:53%;--back-x:61%;--back-y:66%;--belly-x:49%;--belly-y:56%;
}
html[data-ui-theme="mackerel-cat"] {
  --casino-cat:url('./assets/games/casino-cat-mackerel.webp');--sleep-cat:url('./assets/games/sleep-cat-mackerel.webp');
  --casino-felt:#385767;--casino-felt-dark:#172f3b;--party-gold:#aeb8bf;
  --head-x:56%;--head-y:41%;--tail-x:47%;--tail-y:69%;--front-x:54%;--front-y:54%;--back-x:63%;--back-y:65%;--belly-x:47%;--belly-y:57%;
}

.stepper {grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.step {appearance:none;min-width:0;border:1px solid var(--line);font-weight:800;line-height:1.2}
.step:disabled {cursor:not-allowed;opacity:.46}

.party-page {padding:2px 0 30px;color:var(--ink)}
.party-page-title {
  display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:15px 18px;
  border:2px solid var(--paw-frame-line);border-radius:24px;
  background:color-mix(in srgb,var(--paper) 91%,var(--warm));box-shadow:var(--shadow);
}
.party-page-title>span {display:grid;place-items:center;flex:none;width:58px;aspect-ratio:1;border-radius:46% 46% 42% 42%;font-size:30px;background:var(--skin-secondary) center/100% 100% no-repeat}
.party-page-title h2 {margin:0 0 3px;font-size:clamp(23px,3vw,34px)}
.party-page-title p {margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.party-kicker {color:var(--orange-dark);font-size:10px;font-weight:900;letter-spacing:.14em}
.party-layout {display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:15px;align-items:start}
.wake-layout {display:block}
.wake-game-card {width:min(100%,720px);margin:0 auto}
.themed-panel {
  position:relative;isolation:isolate;border:1px solid var(--line);border-radius:24px;
  background:color-mix(in srgb,var(--paper) 93%,var(--warm));box-shadow:var(--shadow);overflow:hidden;
}
.themed-panel::before {content:"";position:absolute;z-index:-1;inset:7px;border:1px dashed color-mix(in srgb,var(--orange) 58%,transparent);border-radius:18px;pointer-events:none}
.themed-panel::after {content:"🐾";position:absolute;z-index:-1;right:16px;bottom:9px;color:var(--paw-ink);font-size:42px;transform:rotate(-12deg)}
.party-roster {padding:19px 18px 17px}
.party-panel-heading,.party-game-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.party-panel-heading h3,.party-game-heading h3 {margin:2px 0 0;font-size:19px}
.party-count {display:grid;gap:3px;color:var(--muted);font-size:10px;font-weight:800}
.party-count select {min-width:78px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--paper);font-weight:900}
.party-name-grid {display:grid;grid-template-columns:1fr;gap:7px}
.party-name-grid label {display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;min-width:0;border:1px solid var(--line);border-radius:13px;background:var(--paper);overflow:hidden}
.party-name-grid label>span {display:grid;place-items:center;align-self:stretch;color:#fff;background:var(--orange);font-size:12px;font-weight:900}
.party-name-grid input {width:100%;min-width:0;padding:10px 11px;border:0;outline:0;color:var(--ink);background:transparent;font-weight:800}
.party-name-grid label:focus-within {outline:2px solid var(--mint);outline-offset:1px}
.party-roster-help {margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.35}
.party-game-card {padding:19px}
.card-draw-game-card {min-width:0}
.party-status {display:inline-flex;max-width:48%;padding:7px 10px;border-radius:999px;color:var(--orange-dark);background:var(--warm);font-size:11px;font-weight:900;text-align:center}

/* 카드 뽑기 장면은 참가자 카드 배열만 표시한다. */
.credit-card-display {
  position:relative;margin:0 auto 14px;padding:4px 0 7px;overflow:visible;background:transparent;
}
.credit-card-fan {position:relative;z-index:1;min-height:clamp(145px,20vw,208px);isolation:isolate;overflow:visible}
.credit-card-shell {position:absolute;z-index:var(--card-depth);left:50%;bottom:7px;width:clamp(122px,34%,220px);aspect-ratio:1.586;transform:translateX(calc(-50% + var(--card-shift))) translateY(var(--card-rise)) rotate(var(--card-tilt));transform-origin:50% 100%;transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s,opacity .42s;filter:drop-shadow(0 10px 7px rgba(0,0,0,.34));pointer-events:none}
.credit-card-face {position:absolute;inset:0;overflow:hidden;border:1px solid rgba(255,255,255,.62);border-radius:12px;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5);backface-visibility:hidden}
.credit-card-face::before {content:"";position:absolute;inset:-30%;opacity:.25;background:repeating-linear-gradient(124deg,transparent 0 8px,rgba(255,255,255,.42) 9px 10px,transparent 11px 19px);transform:rotate(-8deg);pointer-events:none}
.credit-card-face::after {content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.34),transparent 24%),linear-gradient(115deg,transparent 32%,rgba(255,255,255,.14) 46%,transparent 58%);mix-blend-mode:screen;pointer-events:none}
.credit-card-gloss {position:absolute;z-index:1;inset:0;background:linear-gradient(132deg,rgba(255,255,255,.2),transparent 23%,transparent 66%,rgba(255,255,255,.12));pointer-events:none}
.card-tone-0 {background:linear-gradient(135deg,#283b4f,#5b83a1 52%,#152637)}
.card-tone-1 {background:linear-gradient(135deg,#182a34,#3f6a74 50%,#101b25)}
.card-tone-2 {background:linear-gradient(135deg,#3b2d46,#7a5b89 51%,#251c31)}
.card-tone-3 {background:linear-gradient(135deg,#604d2c,#b18749 48%,#47351e)}
.card-tone-4 {background:linear-gradient(135deg,#2a2d34,#6d747c 48%,#1d2028)}
.credit-card-topline,.credit-card-bottom {position:absolute;z-index:2;left:8%;right:8%;display:flex;align-items:center;justify-content:space-between}
.credit-card-topline {top:10%;font-size:clamp(9px,1.3vw,13px);letter-spacing:.05em}.credit-card-topline span {font-size:.58em;letter-spacing:.14em;opacity:.84}
.credit-card-chip {position:absolute;z-index:2;left:9%;top:31%;width:18%;height:19%;border:1px solid rgba(255,238,167,.84);border-radius:4px;background:linear-gradient(135deg,#fff2ac,#b8872e 52%,#fff0a0);box-shadow:inset 0 0 0 1px rgba(89,55,12,.28)}
.credit-card-chip i {position:absolute;background:rgba(102,66,15,.38)}.credit-card-chip i:nth-child(1){left:47%;top:0;width:1px;height:100%}.credit-card-chip i:nth-child(2){left:0;top:48%;width:100%;height:1px}.credit-card-chip i:nth-child(3){left:25%;top:0;width:1px;height:48%}
.credit-card-contactless {position:absolute;z-index:2;left:30%;top:32%;font-size:clamp(12px,2vw,19px);letter-spacing:-.26em;transform:rotate(-90deg);opacity:.78}
.credit-card-number {position:absolute;z-index:2;left:9%;right:9%;top:57%;font-family:ui-monospace,monospace;font-size:clamp(8px,1.45vw,13px);font-weight:800;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap}
.credit-card-bottom {bottom:9%;align-items:end}.credit-card-bottom small {display:block;font-size:clamp(6px,1vw,9px);opacity:.75}.credit-card-bottom b {display:block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(8px,1.45vw,13px);letter-spacing:.03em}.credit-card-mark {font-size:clamp(12px,2vw,18px);font-style:italic;font-weight:1000;letter-spacing:-.08em}
.credit-card-fan.has-winner .credit-card-shell:not(.is-winner) {opacity:.58;filter:saturate(.68) brightness(.78) drop-shadow(0 7px 5px rgba(0,0,0,.25))}
.credit-card-shell.is-winner {z-index:30;transform:translateX(-50%) translateY(-16px) rotate(0deg) scale(1.07);filter:drop-shadow(0 0 8px rgba(255,221,111,.94)) drop-shadow(0 14px 9px rgba(0,0,0,.38))}.credit-card-shell.is-winner .credit-card-face {border:2px solid #ffe08a}.credit-card-shell.is-winner .credit-card-face::after {animation:card-shine 1.15s ease-out both}
.credit-card-fan.is-shuffling .credit-card-shell {animation:card-shuffle .72s ease-in-out infinite alternate}.credit-card-fan.is-shuffling .credit-card-shell:nth-child(2n) {animation-delay:-.2s}.credit-card-fan.is-shuffling .credit-card-shell:nth-child(3n) {animation-delay:-.41s}
@keyframes card-shuffle {from{transform:translateX(calc(-50% + var(--card-shift))) translateY(var(--card-rise)) rotate(calc(var(--card-tilt) - 4deg))}to{transform:translateX(calc(-50% + var(--card-shift))) translateY(calc(var(--card-rise) - 5px)) rotate(calc(var(--card-tilt) + 4deg))}}
@keyframes card-shine {from{opacity:0}45%{opacity:1}to{opacity:0}}

.casino-table {
  position:relative;width:min(100%,600px);margin:0 auto 12px;padding:3.5%;border-radius:48%;
  background:radial-gradient(circle at 50% 42%,#176848 0,#0b4b35 58%,#05291e 100%);
  border:clamp(7px,1.2vw,13px) solid #4b2818;outline:3px solid #d8ad55;outline-offset:-8px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.12),0 15px 28px rgba(33,23,18,.22);
}
.casino-table::before {content:"";position:absolute;inset:2.5%;border:1px dashed rgba(236,203,112,.74);border-radius:50%;pointer-events:none}
.casino-wheel-box {position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.casino-wheel-box canvas {position:absolute;z-index:2;inset:5%;width:90%;height:90%;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.26))}
.casino-ball {position:absolute;z-index:5;width:clamp(9px,2.1%,16px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 30%,#fff 0 26%,#eadfc9 47%,#8b775e 100%);box-shadow:0 2px 4px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.55)}
.casino-cat-sprite {
  position:absolute;z-index:6;left:-15%;top:-14%;width:56%;aspect-ratio:1;
  background-image:var(--casino-cat);background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.24));transform:rotate(3deg);transform-origin:58% 58%;pointer-events:none;
}
.casino-cat-sprite.is-batting {animation:casino-cat-bat 1250ms steps(1,end) both}
@keyframes casino-cat-bat {
  0%,19% {background-position:0 0;transform:rotate(3deg)}
  20%,39% {background-position:100% 0;transform:rotate(0deg)}
  40%,68% {background-position:0 100%;transform:rotate(-3deg) translate(2%,2%)}
  69%,100% {background-position:100% 100%;transform:rotate(2deg)}
}
.party-main-button {min-height:54px;font-size:15px}
.party-inline-notice {margin-top:9px;padding:9px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);background:var(--paper);font-size:12px;text-align:center}
.party-winner {display:grid;justify-items:center;gap:3px;margin-top:12px;padding:13px;border:2px solid var(--orange);border-radius:18px;background:var(--warm);text-align:center}
.party-winner>span {color:var(--orange-dark);font-size:12px;font-weight:900}
.party-winner>strong {font-size:clamp(23px,4vw,34px)}
.party-winner>small {color:var(--muted)}
.party-winner .button {margin-top:7px}

.sleep-scene {
  position:relative;width:min(100%,600px);margin:0 auto;aspect-ratio:1;overflow:hidden;border:clamp(5px,1vw,10px) solid var(--paper);border-radius:25px;
  background-image:var(--sleep-cat);background-size:200% 200%;background-repeat:no-repeat;box-shadow:0 13px 28px rgba(48,34,27,.18),0 0 0 2px var(--line);
}
.sleep-scene.frame-sleep {background-position:0 0}
.sleep-scene.frame-awake {background-position:100% 0}
.sleep-scene.frame-bite {background-position:0 100%}
.sleep-scene.frame-purr {background-position:100% 100%}
.sleep-hotspot {
  position:absolute;z-index:4;display:grid;place-items:center;width:clamp(43px,10%,66px);aspect-ratio:1;
  transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.88);border-radius:50%;color:var(--ink);
  background:color-mix(in srgb,var(--paper) 72%,transparent);box-shadow:0 4px 12px rgba(40,28,23,.2);backdrop-filter:blur(2px);
  font-size:18px;transition:transform .16s,opacity .16s;animation:hotspot-pulse 2.2s ease-in-out infinite;
}
.sleep-hotspot::before {content:"🐾"}
.sleep-hotspot span {position:absolute;top:calc(100% + 2px);left:50%;padding:2px 6px;border-radius:999px;transform:translateX(-50%);color:#fff;background:rgba(38,31,28,.76);font-size:9px;font-weight:900;white-space:nowrap}
.sleep-hotspot:hover,.sleep-hotspot:focus-visible {z-index:6;transform:translate(-50%,-50%) scale(1.1);background:var(--paper);outline:3px solid var(--mint)}
.sleep-hotspot:disabled {opacity:0;pointer-events:none}
.hotspot-head {left:var(--head-x);top:var(--head-y)}
.hotspot-tail {left:var(--tail-x);top:var(--tail-y);animation-delay:-.4s}
.hotspot-front-paw {left:var(--front-x);top:var(--front-y);animation-delay:-.8s}
.hotspot-back-paw {left:var(--back-x);top:var(--back-y);animation-delay:-1.2s}
.hotspot-belly {left:var(--belly-x);top:var(--belly-y);animation-delay:-1.6s}
@keyframes hotspot-pulse {50%{box-shadow:0 4px 12px rgba(40,28,23,.2),0 0 0 7px color-mix(in srgb,var(--orange) 17%,transparent)}}
.sleep-bubble {position:absolute;z-index:3;right:13%;top:11%;color:#fff;font-weight:900;text-shadow:0 2px 5px rgba(0,0,0,.42)}
.sleep-bubble i {position:absolute;font-style:normal;animation:sleep-z 2.6s ease-in-out infinite}
.sleep-bubble i:nth-child(2){left:14px;top:-17px;animation-delay:-.8s}.sleep-bubble i:nth-child(3){left:31px;top:-37px;animation-delay:-1.6s}
.sleep-scene:not(.frame-sleep) .sleep-bubble {display:none}
@keyframes sleep-z {50%{transform:translateY(-7px) scale(1.12);opacity:.45}}
.bite-flash {display:none;position:absolute;z-index:8;inset:0;place-items:center;color:#fff;background:rgba(166,33,37,.22);font-size:clamp(42px,12vw,82px);font-weight:1000;text-shadow:0 5px 10px rgba(80,0,0,.45)}
.sleep-scene.reaction-bite.frame-bite .bite-flash {display:grid;animation:bite-pop .62s ease-out both}
@keyframes bite-pop {0%{opacity:0;transform:scale(.55) rotate(-8deg)}45%{opacity:1;transform:scale(1.13) rotate(3deg)}100%{opacity:.2;transform:scale(1)}}
.sleep-scene.is-reacting {animation:scene-reaction .48s ease both}
@keyframes scene-reaction {35%{transform:translateY(-2px) rotate(-.5deg)}70%{transform:translateY(1px) rotate(.4deg)}}
.wake-instruction {margin:10px 0 0;color:var(--muted);font-size:12px;text-align:center}
.wake-safe-result {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding:11px;border-radius:15px;background:var(--mint-soft);color:var(--mint);font-size:12px;text-align:center}
.wake-safe-result strong {font-size:15px}
.bite-winner {border-color:#a43138;background:#fff0ef}

@media(max-width:760px) {

  .stepper {gap:3px;margin:4px 0 5px}
  .step {min-height:32px;padding:5px 1px;font-size:8px;border-radius:10px}
  .party-page {padding-bottom:5px}
  .party-page-title {gap:7px;margin-bottom:5px;padding:6px 9px;border-radius:15px}
  .party-page-title>span {width:34px;font-size:18px}
  .party-page-title h2 {margin:0;font-size:18px}
  .party-page-title p {display:none}
  .party-layout {grid-template-columns:1fr;gap:5px}
  .party-roster {padding:8px 10px}
  .party-panel-heading {margin-bottom:5px}
  .party-panel-heading h3,.party-game-heading h3 {font-size:14px}
  .party-name-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .party-name-grid label {grid-template-columns:23px minmax(0,1fr);border-radius:9px}
  .party-name-grid input {padding:5px 7px;font-size:10px}
  .party-roster-help {display:none}
  .party-count {font-size:8px}
  .party-count select {min-width:60px;padding:4px 6px;font-size:10px}
  .party-game-card {padding:9px}
  .party-game-heading {margin-bottom:5px}
  .party-status {padding:4px 7px;font-size:8px}
  .credit-card-display {margin-bottom:6px;padding:2px 0 4px}
  .credit-card-fan {min-height:clamp(118px,34vw,160px)}
  .credit-card-shell {width:clamp(122px,37%,172px);border-radius:9px}.credit-card-topline {font-size:7px}.credit-card-number {font-size:7px}.credit-card-bottom b {font-size:7px}.credit-card-mark {font-size:11px}
  .casino-table,.sleep-scene {width:min(100%,300px)}
  .casino-table {margin-bottom:6px}
  .party-main-button {min-height:38px;font-size:11px}
  .wake-instruction {margin-top:5px;font-size:9px}
  .sleep-hotspot {width:34px;font-size:13px}
  .sleep-hotspot span {font-size:8px}
}

@media(prefers-reduced-motion:reduce) {
  .casino-cat-sprite.is-batting,.credit-card-fan.is-shuffling .credit-card-shell,.credit-card-shell.is-winner .credit-card-face::after,.sleep-hotspot,.sleep-bubble i,.sleep-scene.is-reacting,.sleep-scene.reaction-bite.frame-bite .bite-flash {animation:none!important}
}

/* 모든 하위 메뉴는 선택 화면과 같은 파스텔 카드·질감·버튼 토큰을 공유한다. */
:root {--card-draw-cat:url('./assets/games/card-draw/card-draw-cat-cheese-16frames.png')}
html[data-ui-theme="tuxedo-cat"] {--card-draw-cat:url('./assets/games/card-draw/card-draw-cat-tuxedo-16frames.png')}
html[data-ui-theme="white-cat"] {--card-draw-cat:url('./assets/games/card-draw/card-draw-cat-white-16frames.png')}
html[data-ui-theme="siamese-cat"] {--card-draw-cat:url('./assets/games/card-draw/card-draw-cat-siamese-16frames.png')}
html[data-ui-theme="mackerel-cat"] {--card-draw-cat:url('./assets/games/card-draw/card-draw-cat-mackerel-16frames.png')}

/* 카드 뽑기는 참고 화면처럼 고양이를 위에 두고, 불투명한 세로 신용카드를 아래에 둔다. */
.card-draw-stage {position:relative;display:flex;flex-direction:column;align-items:center;gap:0;min-height:clamp(360px,46vw,470px);overflow:visible;--card-target-y:-222px}
.card-draw-cat-sprite {order:1;flex:none;width:min(62%,270px);aspect-ratio:1;background-image:var(--card-draw-cat);background-size:400% 400%;background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 11px 9px rgba(73,47,32,.2));pointer-events:none;z-index:5}
.card-draw-stage:not(.is-taking) .card-draw-cat-sprite {animation:none;background-position:0 0}
.card-draw-stage.is-taking .card-draw-cat-sprite {animation:card-cat-take 2800ms steps(1,end) both}
.credit-card-display {order:2;width:100%;min-height:clamp(150px,22vw,220px);margin:-20px auto 0;padding:0 0 3px;z-index:4}
.credit-card-fan {min-height:clamp(145px,20vw,208px)}
.credit-card-shell {width:clamp(112px,29%,190px);aspect-ratio:.70;filter:drop-shadow(0 10px 7px rgba(73,47,32,.22))}
.credit-card-face {border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:12px;color:#49382e;background:#fffaf1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 8px 14px rgba(73,47,32,.14);backdrop-filter:none;opacity:1}
.credit-card-face::before {content:"";position:absolute;inset:7%;border:1px solid color-mix(in srgb,var(--card-accent,#c77b58) 42%,transparent);border-radius:9px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent,#c77b58) 10%,transparent),transparent 44%);pointer-events:none}
.credit-card-face::after,.credit-card-gloss {display:none!important}
.card-tone-0 {--card-accent:#d56f54;background:linear-gradient(145deg,#fff9ee 0%,#f5d7bd 100%)}
.card-tone-1 {--card-accent:#d18b4c;background:linear-gradient(145deg,#fff9ef 0%,#f0dfaf 100%)}
.card-tone-2 {--card-accent:#b7789a;background:linear-gradient(145deg,#fff9f3 0%,#efd1dc 100%)}
.card-tone-3 {--card-accent:#6a9b9a;background:linear-gradient(145deg,#f7fcf7 0%,#cce3df 100%)}
.card-tone-4 {--card-accent:#7891ad;background:linear-gradient(145deg,#f7fbff 0%,#d3dfef 100%)}
.credit-card-topline,.credit-card-bottom {position:absolute;z-index:2;left:8%;right:8%;display:flex;align-items:center;justify-content:space-between}
.credit-card-topline {top:10%;font-size:clamp(9px,1.3vw,13px);letter-spacing:.05em;color:#49382e}.credit-card-topline span {font-size:.58em;letter-spacing:.14em;color:color-mix(in srgb,#49382e 72%,transparent)}
.credit-card-chip {position:absolute;z-index:2;left:9%;top:29%;width:27%;height:16%;border:1px solid #b68735;border-radius:5px;background:linear-gradient(135deg,#fff2ac,#c08d32 52%,#fff0a0);box-shadow:inset 0 0 0 1px rgba(89,55,12,.28)}
.credit-card-chip i {position:absolute;background:rgba(102,66,15,.38)}.credit-card-chip i:nth-child(1){left:47%;top:0;width:1px;height:100%}.credit-card-chip i:nth-child(2){left:0;top:48%;width:100%;height:1px}.credit-card-chip i:nth-child(3){left:25%;top:0;width:1px;height:48%}
.credit-card-contactless {position:absolute;z-index:2;right:10%;top:29%;color:color-mix(in srgb,#49382e 74%,transparent);font-size:clamp(13px,2vw,20px);letter-spacing:-.26em;transform:rotate(-90deg)}
.credit-card-number {position:absolute;z-index:2;left:9%;right:9%;top:53%;font-family:ui-monospace,monospace;color:#49382e;font-size:clamp(8px,1.45vw,13px);font-weight:800;letter-spacing:.06em;white-space:nowrap}
.credit-card-bottom {bottom:9%;align-items:end}.credit-card-bottom small {display:block;color:color-mix(in srgb,#49382e 64%,transparent);font-size:clamp(6px,1vw,9px)}.credit-card-bottom b {display:block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#49382e;font-size:clamp(8px,1.45vw,13px);letter-spacing:.03em}.credit-card-mark {color:var(--card-accent,#c77b58);font-size:clamp(12px,2vw,18px);font-style:italic;font-weight:1000;letter-spacing:-.08em}
.credit-card-fan.has-winner .credit-card-shell:not(.is-winner) {opacity:1;filter:saturate(.72) brightness(.96) drop-shadow(0 6px 5px rgba(73,47,32,.16))}
.credit-card-shell.is-winner {transform:translateX(-50%) translateY(-16px) rotate(0deg) scale(1.07);filter:drop-shadow(0 0 8px rgba(255,211,105,.9)) drop-shadow(0 14px 9px rgba(73,47,32,.24))}
.credit-card-shell.is-winner .credit-card-face {border:2px solid #f0ba55}
.credit-card-shell.is-being-taken {z-index:80;animation:card-take 2800ms cubic-bezier(.25,.7,.15,1) both}
@keyframes card-take {
  0% {transform:translateX(calc(-50% + var(--card-shift))) translateY(var(--card-rise)) rotate(var(--card-tilt)) scale(1);opacity:1}
  18% {transform:translateX(calc(-50% + var(--card-shift))) translateY(0) rotate(0deg) scale(1.04);opacity:1}
  36% {transform:translateX(-50%) translateY(-34px) rotate(-3deg) scale(1.02);opacity:1}
  56% {transform:translateX(-50%) translateY(-145px) rotate(-2deg) scale(.98);opacity:1}
  68% {transform:translateX(-50%) translateY(-196px) rotate(0deg) scale(.88);opacity:.92}
  78% {transform:translateX(-50%) translateY(var(--card-target-y,-222px)) rotate(2deg) scale(.72);opacity:.3}
  86% {transform:translateX(-50%) translateY(var(--card-target-y,-222px)) rotate(3deg) scale(.58);opacity:0}
  100% {transform:translateX(-50%) translateY(var(--card-target-y,-222px)) rotate(3deg) scale(.52);opacity:0}
}
@keyframes card-cat-take {
  0% {background-position:0 0}
  8% {background-position:33.333% 0}
  16% {background-position:66.666% 0}
  24% {background-position:100% 0}
  32% {background-position:0 33.333%}
  40% {background-position:33.333% 33.333%}
  48% {background-position:33.333% 33.333%}
  55% {background-position:66.666% 33.333%}
  62% {background-position:100% 33.333%}
  66% {background-position:0 66.666%}
  73% {background-position:33.333% 66.666%}
  80% {background-position:66.666% 66.666%}
  87% {background-position:100% 66.666%}
  91% {background-position:0 100%}
  95% {background-position:33.333% 100%}
  98% {background-position:66.666% 100%}
  100% {background-position:100% 100%}
}
@media(max-width:760px) {
  .card-draw-stage {min-height:clamp(330px,94vw,380px);gap:0;--card-target-y:-205px}
  .credit-card-display {min-height:clamp(126px,37vw,155px);margin-top:-16px}
  .credit-card-fan {min-height:clamp(124px,36vw,153px)}
  .credit-card-shell {width:clamp(95px,27%,142px);border-radius:9px}
  .credit-card-topline {font-size:7px}.credit-card-number {font-size:7px}.credit-card-bottom b {font-size:7px}.credit-card-mark {font-size:11px}
  .card-draw-cat-sprite {width:min(67%,230px)}
}