:root {
  color-scheme: dark;
  --bg: #06140f;
  --panel: #0c241d;
  --felt: #0c3c2e;
  --cream: #fff4d8;
  --muted: #9bb7ac;
  --ink: #f8f5e9;
  --gold: #ffc83d;
  --red: #e53935;
  --yellow: #f6bd16;
  --green: #17a95b;
  --blue: #1677e8;
  --kitty-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M13 25 11 10 25 18Q32 14 39 18L52 10 50 26Q54 34 50 43 44 53 32 53 20 53 14 43 10 34 13 25Z' fill='white' stroke='%23e94f91' stroke-width='2'/%3E%3Cellipse cx='24' cy='33' rx='2.5' ry='4' fill='%23232936'/%3E%3Cellipse cx='40' cy='33' rx='2.5' ry='4' fill='%23232936'/%3E%3Cellipse cx='32' cy='39' rx='3.5' ry='2.5' fill='%23f4c542'/%3E%3Cg fill='none' stroke='%23232936' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M19 38 7 35M19 42 7 43M45 38 57 35M45 42 57 43'/%3E%3C/g%3E%3Cpath d='M40 18Q44 9 50 15 56 13 54 21 49 25 44 21Z' fill='%23ff4f91' stroke='%23d92f78' stroke-width='1.5'/%3E%3Ccircle cx='47' cy='18' r='3.5' fill='%23ff91bd'/%3E%3C/svg%3E");
  --spider-mask: url("assets/spider-mask.svg");
  --spider-emblem: url("assets/spider-emblem.svg");
  --kitty-face: url("assets/hello-kitty-generated-v2.svg");
  --kitty-bow: url("assets/hello-kitty-bow.svg");
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --card-w: clamp(72px, 20vw, 104px);
  --card-h: calc(var(--card-w) * 1.46);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { min-height: 100%; overflow-x: hidden; overflow-y: auto; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: var(--tg-viewport-stable-height, 100vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--ink); }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.app-shell { min-height: 100vh; max-width: 760px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 4px 3px 10px; }
.brand { display: flex; gap: 10px; align-items: center; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--red); color: #fff; border: 3px solid var(--cream); border-radius: 14px 8px 14px 8px; box-shadow: 0 4px 0 #8f1717; font: 900 23px/1 Georgia, serif; transform: rotate(-5deg); }
.brand strong { display: block; font-size: 21px; line-height: 20px; font-style: italic; }
.brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; font-weight: 800; margin-top: 4px; }
.top-actions { display: flex; gap: 8px; }
.icon-btn, .close-btn { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 50%; width: 40px; height: 40px; font-weight: 900; font-size: 18px; cursor: pointer; }
.score-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.score-strip::-webkit-scrollbar { display: none; }
.score-strip.many-players { padding-bottom: 2px; }
.score-player { min-width: 0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; transition: background .35s var(--ease-smooth), border-color .35s var(--ease-smooth), transform .35s var(--ease-smooth); }
.score-strip.many-players .score-player { min-width: 88px; scroll-snap-align: start; }
.score-player span { overflow: hidden; text-overflow: ellipsis; font-size: 8px; color: var(--muted); letter-spacing: .08em; font-weight: 800; }
.score-player strong { font-size: 13px; }
.score-player.active { background: rgba(255,200,61,.13); border-color: rgba(255,200,61,.5); }
.game-table { position: relative; overflow: hidden; min-height: clamp(340px, 48vh, 470px); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 12px; background: radial-gradient(circle at 50% 55%, #12614a 0, var(--felt) 44%, #082b21 100%); box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.28); }
.felt-pattern { position: absolute; inset: 0; opacity: .08; background-image: repeating-linear-gradient(45deg, transparent 0 18px, #fff 19px 20px), repeating-linear-gradient(-45deg, transparent 0 18px, #fff 19px 20px); }
.opponents { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.opponent { position: relative; min-width: 0; min-height: 67px; padding: 8px; display: flex; align-items: flex-start; gap: 7px; border-radius: 15px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.1); transition: background .38s var(--ease-smooth), border-color .38s var(--ease-smooth), transform .38s var(--ease-smooth); }
.opponent.active { border-color: var(--gold); background: rgba(255,200,61,.1); transform: translateY(2px); }
.opponents.many-opponents { gap: 5px; }
.opponents.many-opponents .opponent { min-height: 54px; padding: 6px; border-radius: 12px; }
.opponents.many-opponents .avatar { flex-basis: 23px; width: 23px; height: 23px; font-size: 9px; }
.opponents.many-opponents .opponent-info strong { font-size: 9px; }
.opponents.many-opponents .opponent-info span { font-size: 7px; }
.opponents.many-opponents .mini-hand { bottom: 3px; height: 13px; }
.opponents.many-opponents .tiny-card { width: 10px; height: 14px; }
.avatar { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #fb7959, #a52b47); font-size: 12px; font-weight: 900; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.avatar img, .room-avatar img, .self-avatar img, .chat-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.opponent:nth-child(2) .avatar { background: linear-gradient(145deg, #58a8ff, #4547a9); }
.opponent:nth-child(3) .avatar { background: linear-gradient(145deg, #e4b94b, #ad5528); }
.opponent-info { min-width: 0; }
.opponent-info strong, .opponent-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opponent-info strong { font-size: 11px; }
.opponent-info span { color: var(--muted); font-size: 9px; margin-top: 3px; }
.mini-hand { position: absolute; bottom: 5px; left: 8px; right: 8px; height: 18px; display: flex; justify-content: center; }
.tiny-card { position: absolute; width: 13px; height: 19px; border: 1px solid var(--cream); border-radius: 3px; background: #16161b; transform: translateX(calc((var(--i) - 3) * 4px)) rotate(calc((var(--i) - 3) * 3deg)); display: grid; place-items: center; }
.tiny-card b { color: var(--red); font-size: 7px; font-style: italic; }
.turn-banner { position: relative; z-index: 2; width: fit-content; min-height: 30px; margin: 10px auto 2px; padding: 6px 11px; display: flex; gap: 6px; align-items: center; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.13); border-radius: 99px; color: #d7e6df; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.turn-banner.your-turn { color: #111; background: var(--gold); border-color: #ffe592; box-shadow: 0 4px 18px rgba(255,200,61,.2); }
.turn-banner small { opacity: .65; font-size: 7px; }
.color-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.color-dot.red { background: var(--red); } .color-dot.yellow { background: var(--yellow); } .color-dot.green { background: var(--green); } .color-dot.blue { background: var(--blue); }
.piles { position: relative; z-index: 1; min-height: calc(var(--card-h) + 12px); display: flex; justify-content: center; align-items: center; gap: clamp(34px, 11vw, 68px); margin-top: 2px; }
.draw-pile { position: relative; width: var(--card-w); height: var(--card-h); padding: 0; background: none; border: 0; cursor: pointer; }
.draw-pile::before, .draw-pile::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--cream); border-radius: 10px; background: #14151b; }
.draw-pile::before { transform: translate(-5px, 4px) rotate(-3deg); opacity: .7; }
.draw-pile::after { transform: translate(4px, 2px) rotate(2deg); opacity: .85; }
.draw-pile .card { position: relative; z-index: 2; transition: transform .38s var(--ease-smooth), filter .35s var(--ease-smooth); }
.draw-pile:not(:disabled):active .card { transform: translateY(4px) rotate(3deg) scale(.94); filter: brightness(1.18); }
.draw-pile.pile-pulse .card { animation: pilePulse .42s ease; }
.pile-count { position: absolute; z-index: 4; bottom: -20px; left: 0; right: 0; font-size: 9px; color: #bfd0c8; font-weight: 800; }
.discard-pile { width: var(--card-w); height: var(--card-h); transform: rotate(4deg); filter: drop-shadow(0 8px 8px rgba(0,0,0,.32)); perspective: 500px; }
.discard-pile.uno-neon-active { z-index: 7; }
.discard-pile.uno-neon-active > .card { animation: unoCardGlow 1.55s cubic-bezier(.16,1,.3,1) both; }
.uno-neon-stage { position: absolute; z-index: 9; inset: -52px; overflow: visible; pointer-events: none; transform: rotate(-4deg); }
.uno-neon-aura, .uno-neon-ring { position: absolute; left: 50%; top: 50%; border-radius: 28px; transform: translate(-50%, -50%); }
.uno-neon-aura { width: calc(var(--card-w) + 38px); height: calc(var(--card-h) + 38px); background: radial-gradient(ellipse, transparent 47%, rgba(116,255,248,.2) 61%, transparent 73%); filter: blur(5px); animation: unoAura 1.4s ease-out both; }
.uno-neon-ring { width: calc(var(--card-w) + 22px); height: calc(var(--card-h) + 22px); border: 2px solid #7afff7; box-shadow: 0 0 7px #fff, 0 0 16px #16f4ff, 0 0 28px #8b4dff, inset 0 0 13px rgba(22,244,255,.5); animation: unoRing 1.35s cubic-bezier(.16,1,.3,1) both; }
.uno-neon-label { position: absolute; z-index: 4; left: 50%; top: -3px; padding: 5px 13px; border: 1px solid rgba(255,255,255,.9); border-radius: 99px; background: #091b24; color: #fff; font: italic 1000 18px/1 Georgia, serif; letter-spacing: -.03em; text-shadow: 0 0 5px #fff, 0 0 11px #41fff4, 0 0 19px #7657ff; box-shadow: 0 0 9px #23fff4, 0 0 25px rgba(120,75,255,.85); transform: translateX(-50%); animation: unoLabel 1.45s var(--ease-smooth) both; }
.uno-neon-name { position: absolute; z-index: 4; left: 50%; bottom: -2px; max-width: 120px; overflow: hidden; padding: 3px 8px; border-radius: 99px; background: rgba(6,19,28,.88); color: #a9fffa; font-size: 7px; font-weight: 950; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); animation: unoLabel 1.45s .08s var(--ease-smooth) both; }
.uno-neon-bolts, .uno-neon-sparks { position: absolute; inset: 0; }
.uno-neon-bolts i { position: absolute; left: var(--bolt-x); top: var(--bolt-y); width: 9px; height: 42px; background: linear-gradient(#fff, #65fff7 45%, #8b4dff); clip-path: polygon(54% 0, 100% 0, 65% 39%, 94% 39%, 22% 100%, 42% 55%, 8% 55%); filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #22fff4); opacity: 0; transform: translate(-50%, -50%) rotate(var(--bolt-r)) scaleY(.5); animation: unoBolt 1.05s var(--bolt-delay) cubic-bezier(.12,.8,.2,1) both; }
.uno-neon-sparks i { position: absolute; left: var(--spark-x); top: var(--spark-y); width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #fff, 0 0 11px #43fff5; opacity: 0; animation: unoSpark .85s var(--spark-delay) ease-out both; }
@keyframes unoCardGlow { 0% { box-shadow: 0 4px 0 rgba(0,0,0,.25); filter: brightness(1); } 18% { box-shadow: 0 0 8px #fff, 0 0 22px #3efff5, 0 0 42px #764cff; filter: brightness(1.32) saturate(1.35); } 58% { box-shadow: 0 0 5px #fff, 0 0 17px #3efff5, 0 0 32px #764cff; filter: brightness(1.16) saturate(1.2); } 100% { box-shadow: 0 4px 0 rgba(0,0,0,.25); filter: brightness(1); } }
@keyframes unoAura { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.45); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }
@keyframes unoRing { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.58) rotate(-8deg); } 18%, 58% { opacity: 1; } 32% { transform: translate(-50%,-50%) scale(1.08) rotate(2deg); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.28) rotate(5deg); } }
@keyframes unoBolt { 0%, 100% { opacity: 0; } 12% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--bolt-r)) scaleY(1.1); } 22% { opacity: .15; } 34% { opacity: 1; } 58% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--bolt-r)) scaleY(.8); } }
@keyframes unoSpark { 0% { opacity: 0; transform: scale(.2); } 24% { opacity: 1; transform: scale(1.8); } 100% { opacity: 0; transform: translateY(-17px) scale(.25); } }
@keyframes unoLabel { 0% { opacity: 0; transform: translateX(-50%) scale(.35) rotate(-9deg); } 24% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(3deg); } 72% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-7px) scale(.92); } }
.activity { position: relative; z-index: 1; min-height: 27px; margin: 16px auto 0; max-width: 92%; text-align: center; color: #edf8f3; font-family: ui-rounded, "Arial Rounded MT Bold", Inter, system-ui, sans-serif; font-size: 11px; font-weight: 950; line-height: 1.35; letter-spacing: .025em; text-shadow: 0 2px 8px rgba(0,0,0,.72); }
.card { position: relative; display: block; width: var(--card-w); height: var(--card-h); flex: 0 0 var(--card-w); overflow: hidden; border: 4px solid var(--cream); border-radius: 11px; background: var(--card-color, #15161b); box-shadow: 0 4px 0 rgba(0,0,0,.25); color: #fff; user-select: none; transform-style: preserve-3d; will-change: transform, translate, rotate, scale; }
.card.red { --card-color: var(--red); } .card.yellow { --card-color: var(--yellow); color: #17130a; } .card.green { --card-color: var(--green); } .card.blue { --card-color: var(--blue); }
.card::before { content: ''; position: absolute; width: 74%; height: 104%; left: 13%; top: -2%; border-radius: 50%; background: rgba(255,255,255,.92); transform: rotate(25deg); }
.card::after { content: ''; position: absolute; z-index: 4; inset: -45% 35% -45% -75%; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.34) 48%, transparent 70%); transform: translateX(-110%) rotate(8deg); pointer-events: none; }
.card.playable::after { animation: cardShine 2.8s ease-in-out infinite; animation-delay: calc(var(--card-index, 0) * 90ms); }
.oval { position: absolute; inset: 19% 15%; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: var(--card-color, linear-gradient(135deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75%)); transform: rotate(20deg); }
.oval span { transform: rotate(-20deg); font-size: calc(var(--card-w) * .34); font-weight: 1000; letter-spacing: -.08em; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.corner { position: absolute; z-index: 2; font-size: calc(var(--card-w) * .15); font-weight: 1000; line-height: 1; color: #fff; text-shadow: 0 1px 1px #0008; }
.corner.top { top: 5px; left: 5px; } .corner.bottom { bottom: 5px; right: 5px; transform: rotate(180deg); }
.wild-card { --card-color: linear-gradient(135deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75%); background: #15161b; }
.wild-card::before { background: rgba(255,255,255,.92); }
.wild-card .oval { background: var(--card-color); }
.card-back { position: relative; background: #15161b; display: grid; place-items: center; }
.card-back::before { width: 68%; height: 70%; top: 15%; left: 16%; background: var(--red); border: 3px solid var(--gold); }
.card-back > span { position: relative; z-index: 3; font: italic 1000 calc(var(--card-w) * .48)/1 Georgia, serif; color: var(--cream); transform: rotate(-12deg); text-shadow: 2px 3px 0 #801613; }
.card[data-card-theme="spiderman"] { border-width: 3px; border-color: #eef5ff; border-radius: 13px; box-shadow: 0 4px 0 #071530, 0 0 0 1px rgba(33,111,255,.42), inset 0 0 18px rgba(2,9,24,.35); }
.card[data-card-theme="spiderman"].red { --card-color: #d51f32; }
.card[data-card-theme="spiderman"].yellow { --card-color: #d69a18; }
.card[data-card-theme="spiderman"].green { --card-color: #158a54; }
.card[data-card-theme="spiderman"].blue { --card-color: #1459b8; }
.card[data-card-theme="spiderman"]::before { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; opacity: .66; transform: none; background: repeating-radial-gradient(circle at 50% 48%, transparent 0 12px, rgba(232,244,255,.36) 13px 14px, transparent 15px 24px), repeating-conic-gradient(from 4deg at 50% 48%, rgba(238,247,255,.48) 0 1.4deg, transparent 1.8deg 30deg); }
.card[data-card-theme="spiderman"]:not(.card-back) .oval { inset: 18% 13%; border: 2px solid rgba(238,247,255,.88); background: linear-gradient(145deg, #d61f34 0 48%, #0c3477 52% 100%); box-shadow: 0 0 0 3px rgba(4,17,42,.34), inset 0 0 16px rgba(0,0,0,.32); }
.card[data-card-theme="spiderman"]:not(.card-back) .oval span { color: #fff; text-shadow: 0 2px 0 #061127, 0 0 8px rgba(255,255,255,.35); }
.card[data-card-theme="spiderman"] .corner { color: #fff; text-shadow: 0 1px 2px #030814, 0 0 4px #081a42; }
.card[data-card-theme="spiderman"].wild-card { background: linear-gradient(145deg, #c81932 0 48%, #092e74 52%); }
.card[data-card-theme="spiderman"].playable { filter: drop-shadow(0 0 8px rgba(47,125,255,.6)) drop-shadow(0 0 4px rgba(238,35,54,.5)); }
.card[data-card-theme="spiderman"].card-back { background: linear-gradient(145deg, #d21d32 0 48%, #092f77 52%); }
.card[data-card-theme="spiderman"].card-back::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: repeating-radial-gradient(circle at center, transparent 0 13px, rgba(241,248,255,.44) 14px 15px, transparent 16px 27px), repeating-conic-gradient(from 0deg at center, rgba(241,248,255,.52) 0 1.5deg, transparent 2deg 30deg); }
.card[data-card-theme="spiderman"].card-back > span { display: grid; place-items: center; width: 57%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(4,16,39,.86); font-size: 0; transform: rotate(-5deg); text-shadow: none; box-shadow: 0 0 15px rgba(0,0,0,.38); }
.card[data-card-theme="spiderman"].card-back > span::before { content: ''; width: 70%; height: 70%; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M27 24 14 14M25 31 8 27M26 39 12 50M37 24 50 14M39 31 56 27M38 39 52 50'/%3E%3C/g%3E%3Cellipse cx='32' cy='20' rx='7' ry='9' fill='white'/%3E%3Cellipse cx='32' cy='40' rx='9' ry='15' fill='white'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.tiny-card[data-card-theme="spiderman"] { border-color: #edf5ff; background: linear-gradient(145deg, #cf1e32 0 48%, #0b347a 52%); box-shadow: 0 1px 0 #06122c; }
.tiny-card[data-card-theme="spiderman"] b { color: #fff; font-size: 0; }
.tiny-card[data-card-theme="spiderman"] b::before { content: '•'; font-size: 7px; text-shadow: 0 0 3px #fff; }
.card[data-card-theme="hellokitty"] { border-width: 3px; border-color: #fff7fb; border-radius: 15px; box-shadow: 0 4px 0 #a93d6e, 0 0 0 1px rgba(255,125,180,.34), inset 0 0 16px rgba(128,32,75,.16); }
.card[data-card-theme="hellokitty"].red { --card-color: #ec4f83; }
.card[data-card-theme="hellokitty"].yellow { --card-color: #e5ad2f; }
.card[data-card-theme="hellokitty"].green { --card-color: #3ba87b; }
.card[data-card-theme="hellokitty"].blue { --card-color: #4b8fd7; }
.card[data-card-theme="hellokitty"]::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: .52; transform: none; background: radial-gradient(circle, rgba(255,255,255,.85) 0 2px, transparent 2.5px) 0 0 / 17px 17px, linear-gradient(135deg, rgba(255,255,255,.2), transparent 55%); }
.card[data-card-theme="hellokitty"]:not(.card-back) .oval { inset: 18% 13%; border: 3px solid #ff8cbc; background: rgba(255,250,252,.96); box-shadow: 0 0 0 2px rgba(145,41,87,.18), inset 0 0 13px rgba(255,113,170,.12); }
.card[data-card-theme="hellokitty"]:not(.card-back) .oval span { color: #d9367b; text-shadow: 0 2px 0 #fff, 0 0 6px rgba(255,82,151,.2); }
.card[data-card-theme="hellokitty"] .corner { color: #fff; text-shadow: 0 1px 2px rgba(95,25,57,.75); }
.card[data-card-theme="hellokitty"].wild-card { background: linear-gradient(135deg, #ef6092 0 25%, #f1be49 25% 50%, #66bd9b 50% 75%, #69a7e1 75%); }
.card[data-card-theme="hellokitty"].playable { filter: drop-shadow(0 0 8px rgba(255,105,170,.62)) drop-shadow(0 0 4px rgba(255,255,255,.46)); }
.card[data-card-theme="hellokitty"].card-back { background: linear-gradient(145deg, #ff8fbb, #f8d8e8 54%, #ff70aa); }
.card[data-card-theme="hellokitty"].card-back::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .58; background: radial-gradient(circle, rgba(255,255,255,.82) 0 2px, transparent 2.5px) 0 0 / 16px 16px; transform: none; }
.card[data-card-theme="hellokitty"].card-back > span { display: grid; place-items: center; width: 78%; aspect-ratio: 1; border: 0; background: transparent; font-size: 0; transform: none; text-shadow: none; box-shadow: none; }
.card[data-card-theme="hellokitty"].card-back > span::before { content: ''; width: 100%; height: 100%; background: center / contain no-repeat var(--kitty-face); filter: drop-shadow(0 3px 3px rgba(118,31,69,.25)); }
.tiny-card[data-card-theme="hellokitty"] { border-color: #fff7fb; background: linear-gradient(145deg, #ff90bc, #f9d9e8 55%, #ff70aa); box-shadow: 0 1px 0 #a93d6e; }
.tiny-card[data-card-theme="hellokitty"] b { color: #d9367b; font-size: 0; }
.tiny-card[data-card-theme="hellokitty"] b::before { content: '♡'; font-size: 8px; font-weight: 1000; text-shadow: 0 0 2px #fff; }

/* Character decks: crisp, recognizable artwork at every card size. */
.card[data-card-theme="spiderman"] { border: 4px solid #f4f8ff; border-radius: 13px; outline: 2px solid #080c18; outline-offset: -4px; background: var(--card-color, #ca142c); box-shadow: 0 5px 0 #050914, 0 0 0 1px #2d75dc, inset 0 0 22px #04071280; }
.card[data-card-theme="spiderman"]::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: .9; transform: none; background: repeating-radial-gradient(ellipse at 50% 47%, transparent 0 14px, #10131b 15px 16px, transparent 17px 28px), repeating-conic-gradient(from -1deg at 50% 47%, #11151d 0 1.35deg, transparent 1.8deg 30deg), linear-gradient(155deg, #ffffff12, transparent 45%); }
.card[data-card-theme="spiderman"] .oval { isolation: isolate; inset: 17% 12%; border: 3px solid #090d16; border-radius: 48% 52% 46% 54%; background: linear-gradient(145deg, #ec1e37 0 48%, #093b87 49% 100%); box-shadow: 0 0 0 2px #edf6ff, 0 0 0 5px #090d1690, inset 0 0 18px #02040a8c; }
.card[data-card-theme="spiderman"] .oval::before { content: ''; position: absolute; inset: 5% 13%; z-index: 0; background: var(--spider-mask) center / contain no-repeat; opacity: .32; filter: saturate(1.2) contrast(1.08); transform: rotate(-20deg); }
.card[data-card-theme="spiderman"] .oval span { position: relative; z-index: 2; color: #fff; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; -webkit-text-stroke: 1px #080b12; text-shadow: 0 3px 0 #080b12, 0 0 7px #fff8; }
.card[data-card-theme="spiderman"] .corner { min-width: 20%; padding: 3px 4px; border: 1px solid #ffffffc7; border-radius: 5px; background: #071731e6; color: #fff; text-align: center; -webkit-text-stroke: .45px #05070c; box-shadow: 0 2px 0 #050812; }
.card[data-card-theme="spiderman"] .corner.top { top: 5px; left: 5px; }
.card[data-card-theme="spiderman"] .corner.bottom { right: 5px; bottom: 5px; }
.card[data-card-theme="spiderman"].wild-card { background: linear-gradient(145deg, #d3132d 0 48%, #07357d 49% 100%); }
.card[data-card-theme="spiderman"].card-back { background: linear-gradient(155deg, #e51b36 0 62%, #0c3f8d 63% 100%); }
.card[data-card-theme="spiderman"].card-back::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .96; background: repeating-radial-gradient(ellipse at center, transparent 0 15px, #0c101a 16px 18px, transparent 19px 31px), repeating-conic-gradient(from 0deg at center, #10141d 0 1.7deg, transparent 2.1deg 30deg); transform: none; }
.card[data-card-theme="spiderman"].card-back > span { width: 76%; height: 78%; border: 0; border-radius: 0; background: var(--spider-mask) center / contain no-repeat; font-size: 0; transform: none; filter: drop-shadow(0 5px 5px #02050cbf); box-shadow: none; }
.card[data-card-theme="spiderman"].card-back > span::before { display: none; }
.card[data-card-theme="spiderman"].card-back > span::after { content: ''; position: absolute; right: -5%; bottom: -8%; width: 38%; height: 38%; background: #fff; -webkit-mask: var(--spider-emblem) center / contain no-repeat; mask: var(--spider-emblem) center / contain no-repeat; filter: drop-shadow(0 2px 1px #000); }
.tiny-card[data-card-theme="spiderman"] { border: 2px solid #f4f8ff; outline: 1px solid #070b14; background: #db1832 var(--spider-mask) center / 72% no-repeat; box-shadow: 0 1px 0 #06122c; }
.tiny-card[data-card-theme="spiderman"] b::before { content: ''; display: block; width: 8px; height: 9px; background: #fff; -webkit-mask: var(--spider-emblem) center / contain no-repeat; mask: var(--spider-emblem) center / contain no-repeat; }

.card[data-card-theme="hellokitty"] { border: 4px solid #fff; border-radius: 16px; outline: 2px solid #e8397e; outline-offset: -4px; background: var(--card-color, #ef568d); box-shadow: 0 5px 0 #9d285c, 0 0 0 1px #ff9cc5, inset 0 0 20px #93214c33; }
.card[data-card-theme="hellokitty"]::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: .78; transform: none; background: var(--kitty-bow) 9% 13% / 18% auto no-repeat, var(--kitty-bow) 92% 85% / 20% auto no-repeat, radial-gradient(circle, #fff 0 2px, transparent 2.5px) 0 0 / 17px 17px, linear-gradient(145deg, #ffffff38, transparent 54%); }
.card[data-card-theme="hellokitty"] .oval { isolation: isolate; inset: 17% 11%; border: 3px solid #f14b8d; border-radius: 49% 51% 47% 53%; background: #fffafd; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #b72c6440, inset 0 0 16px #ff89b735; }
.card[data-card-theme="hellokitty"] .oval::before { content: ''; position: absolute; inset: 8% 4%; z-index: 0; background: var(--kitty-face) center / contain no-repeat; opacity: .24; transform: rotate(-20deg); }
.card[data-card-theme="hellokitty"] .oval::after { content: ''; position: absolute; z-index: 1; top: 3%; right: 3%; width: 31%; aspect-ratio: 1.45; background: var(--kitty-bow) center / contain no-repeat; transform: rotate(-8deg); filter: drop-shadow(0 2px 1px #9c225766); }
.card[data-card-theme="hellokitty"] .oval span { position: relative; z-index: 2; color: #da256e; font-family: "Arial Rounded MT Bold", ui-rounded, Inter, sans-serif; -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 0 #fff, 0 0 8px #ff66a66b; }
.card[data-card-theme="hellokitty"] .corner { min-width: 20%; padding: 3px 4px; border: 2px solid #fff; border-radius: 8px; background: #e33178ed; color: #fff; text-align: center; text-shadow: 0 1px 1px #92204f; box-shadow: 0 2px 0 #a7285c; }
.card[data-card-theme="hellokitty"] .corner.top { top: 5px; left: 5px; }
.card[data-card-theme="hellokitty"] .corner.bottom { right: 5px; bottom: 5px; }
.card[data-card-theme="hellokitty"].wild-card { background: conic-gradient(from 45deg, #f1518b, #f1c445, #51b88d, #5b9bdd, #f1518b); }
.card[data-card-theme="hellokitty"].card-back { background: linear-gradient(145deg, #ff72a9, #ffd8e8 56%, #f34f90); }
.card[data-card-theme="hellokitty"].card-back::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .88; background: var(--kitty-bow) 11% 13% / 23% auto no-repeat, var(--kitty-bow) 90% 86% / 25% auto no-repeat, radial-gradient(circle, #fff 0 2.5px, transparent 3px) 0 0 / 18px 18px; transform: none; }
.card[data-card-theme="hellokitty"].card-back > span { width: 92%; height: 78%; border: 0; background: var(--kitty-face) center / contain no-repeat; font-size: 0; transform: none; filter: drop-shadow(0 5px 4px #9c285652); box-shadow: none; }
.card[data-card-theme="hellokitty"].card-back > span::before { display: none; }
.tiny-card[data-card-theme="hellokitty"] { border: 2px solid #fff; outline: 1px solid #d73577; background: #ff87b6 var(--kitty-face) center / 88% no-repeat; box-shadow: 0 1px 0 #a93d6e; }
.tiny-card[data-card-theme="hellokitty"] b::before { content: '♥'; color: #e31f6c; font-size: 7px; text-shadow: 0 0 2px #fff; }
.player-zone { padding: 10px 2px 0; }
.table-chat-dock { position: relative; z-index: 8; margin: 0 3px 5px; }
.table-recent-messages { margin-bottom: 3px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.table-recent-message { min-width: 0; height: 14px; padding: 1px 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(255,255,255,.035); color: rgba(226,240,234,.52); font-size: 7px; line-height: 10px; white-space: nowrap; text-overflow: ellipsis; animation: tableChatFlow .2s ease both; }
.table-recent-message:nth-last-child(2) { color: rgba(226,240,234,.66); background: rgba(255,255,255,.05); }
.table-recent-message:last-child { color: rgba(255,255,255,.84); background: rgba(255,200,61,.075); }
.table-recent-message b { color: rgba(255,200,61,.82); font-weight: 950; }
.table-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) 29px 29px auto; gap: 5px; margin: 0; }
.table-chat-compose input { min-width: 0; height: 29px; padding: 0 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; outline: none; background: #0a211a; color: var(--ink); font-size: 9px; font-weight: 700; }
.table-chat-compose input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.1); }
.table-chat-compose button { min-width: 52px; border: 0; border-radius: 9px; background: var(--gold); color: #14221d; font-size: 8px; font-weight: 950; cursor: pointer; }
.table-chat-compose .table-emoji-toggle, .table-chat-compose .table-sound-toggle { position: relative; min-width: 29px; width: 29px; padding: 0; background: #17392e; color: var(--cream); font-size: 15px; }
.table-chat-compose .table-sound-toggle { font-size: 13px; }
.table-chat-compose .table-emoji-toggle[aria-expanded="true"], .table-chat-compose .table-sound-toggle[aria-expanded="true"] { background: var(--gold); color: #14221d; }
.table-chat-compose .table-sound-toggle:disabled { opacity: .76; color: var(--cream); cursor: wait; }
.table-sound-toggle small { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: #17392e; color: var(--gold); font-size: 8px; font-weight: 1000; }
.table-emoji-menu { position: absolute; right: 0; bottom: 34px; width: min(190px, 68vw); padding: 7px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(8,31,24,.96); box-shadow: 0 12px 35px rgba(0,0,0,.52); backdrop-filter: blur(8px); animation: emojiMenuIn .18s ease both; }
.table-emoji-menu button { height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.055); font-size: 17px; cursor: pointer; }
.table-emoji-menu button:active { transform: scale(.82); background: rgba(255,200,61,.2); }
.table-sound-menu { position: absolute; right: 0; bottom: 34px; width: min(280px, 88vw); max-height: min(390px, 58vh); overflow-y: auto; padding: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(8,31,24,.98); box-shadow: 0 14px 40px rgba(0,0,0,.58); backdrop-filter: blur(10px); animation: soundMenuIn .28s var(--ease-smooth) both; scrollbar-width: thin; }
.table-sound-menu header { position: sticky; z-index: 2; top: -9px; display: flex; justify-content: space-between; align-items: center; margin: -9px -9px 8px; padding: 11px 12px 9px; background: rgba(8,31,24,.98); border-bottom: 1px solid rgba(255,255,255,.08); }
.table-sound-menu header b, .table-sound-menu header small { display: block; }
.table-sound-menu header b { color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.table-sound-menu header small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.table-sound-menu header > span { font-size: 18px; }
.sound-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sound-grid button { min-width: 0; min-height: 43px; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.05); color: var(--cream); cursor: pointer; transition: transform .25s var(--ease-smooth), background .25s ease, border-color .25s ease; }
.sound-grid button span { font-size: 16px; }
.sound-grid button b { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.sound-grid button:active { transform: scale(.94); background: rgba(255,200,61,.16); border-color: rgba(255,200,61,.4); }
@keyframes tableChatFlow { from { opacity: 0; transform: translateY(-5px); } }
@keyframes emojiMenuIn { from { opacity: 0; transform: translate(8px, 8px) scale(.9); } }
@keyframes soundMenuIn { from { opacity: 0; transform: translate(10px, 14px) scale(.92); } }
.player-heading { display: flex; justify-content: space-between; align-items: end; padding: 0 4px 6px; }
.player-identity { display: flex; align-items: center; gap: 9px; }
.self-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(255,244,216,.85); border-radius: 50%; background: linear-gradient(145deg, var(--red), #8e2552); font-size: 13px; font-weight: 950; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.eyebrow { display: block; font-size: 8px; letter-spacing: .18em; font-weight: 900; color: var(--gold); }
.player-heading strong { font-size: 14px; }
.hand-count { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.hand { min-height: calc(var(--card-h) * .72); display: flex; align-items: flex-end; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 9px 5px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.hand::-webkit-scrollbar { display: none; }
.hand .card { margin-left: calc(var(--card-w) * -.44); transform: translateY(7px) rotate(calc((var(--card-index, 0) - 3) * .35deg)) scale(.92); scroll-snap-align: center; transition: transform .46s var(--ease-smooth), opacity .36s var(--ease-smooth), filter .36s var(--ease-smooth); cursor: pointer; }
.hand .card:first-child { margin-left: 0; }
.hand.dense .card { margin-left: calc(var(--card-w) * -.62); }
.hand.dense .card:first-child { margin-left: 0; }
.hand .card.playable { transform: translateY(0) scale(.95); filter: drop-shadow(0 0 7px rgba(255,200,61,.45)); }
.hand .card.playable:hover { transform: translateY(-9px) rotate(-1deg) scale(1.03); }
.hand .card.playable:active { transform: translateY(-2px) scale(.93); }
.hand .card.disabled { opacity: .84; filter: saturate(.85) brightness(.96); cursor: default; }
@keyframes pilePulse { 50% { translate: 0 -5px; rotate: -2deg; scale: 1.04; } }
@keyframes cardShine { 0%, 62% { transform: translateX(-110%) rotate(8deg); } 82%, 100% { transform: translateX(340%) rotate(8deg); } }
.action-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding-top: 2px; }
.action { min-height: 44px; border: 0; border-radius: 14px; padding: 0 16px; font-size: 12px; font-weight: 950; letter-spacing: .03em; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28); }
.action:disabled { opacity: .38; cursor: default; }
.action.primary { background: var(--cream); color: #14221d; }
.action.secondary { background: #1e3a31; border: 1px solid #3f685b; }
.uno-button { width: 84px; height: 52px; border-radius: 50%; background: var(--red); border: 3px solid var(--cream); color: #fff; font-size: 16px; font-style: italic; transform: rotate(-3deg); }
.uno-button.armed { background: var(--green); transform: rotate(0) scale(.96); }
.modal { border: 0; padding: 12px; background: transparent; color: var(--ink); max-width: 100%; max-height: 100%; }
.modal::backdrop { background: rgba(0,10,7,.82); backdrop-filter: blur(7px); }
.modal-card { position: relative; width: min(520px, calc(100vw - 24px)); max-height: min(760px, calc(100vh - 34px)); overflow-y: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 24px; background: #0d251e; box-shadow: 0 24px 80px #0009; }
.modal-card.compact { width: min(410px, calc(100vw - 24px)); text-align: center; }
.modal-card h2 { margin: 6px 0 14px; font-size: 24px; line-height: 1.08; }
.modal-card p { color: #bed0c8; font-size: 13px; line-height: 1.55; }
.close-btn { position: absolute; right: 13px; top: 13px; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.color-grid button { min-height: 62px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.06); font-weight: 850; cursor: pointer; }
.color-grid span { width: 29px; height: 29px; border-radius: 50%; background: var(--choice); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.color-grid [data-color="red"] { --choice: var(--red); } .color-grid [data-color="yellow"] { --choice: var(--yellow); } .color-grid [data-color="green"] { --choice: var(--green); } .color-grid [data-color="blue"] { --choice: var(--blue); }
.color-cancel { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 10px; font-weight: 850; cursor: pointer; }
.rule-list { display: grid; gap: 7px; margin: 16px 0; }
.rule-list article { display: flex; gap: 11px; align-items: center; border-radius: 14px; padding: 9px; background: rgba(255,255,255,.05); }
.rule-list strong { font-size: 12px; }
.rule-list p { margin: 2px 0 0; font-size: 10px; line-height: 1.3; }
.mini-symbol { flex: 0 0 39px; width: 39px; height: 50px; display: grid; place-items: center; border: 2px solid var(--cream); border-radius: 7px; background: var(--blue); font-weight: 1000; }
.mini-symbol.rainbow { background: linear-gradient(135deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75%); }
.deck-note { padding: 13px; border-radius: 14px; background: rgba(255,200,61,.1); color: #eadfbf; font-size: 11px; line-height: 1.5; }
.fine-print { font-size: 10px !important; }
.result-card { text-align: center; padding-top: 25px; background: radial-gradient(circle at 50% 0, rgba(255,200,61,.13), transparent 35%), #0d251e; animation: resultReveal .48s var(--ease-smooth) both; }
.result-burst { position: relative; margin: 0 auto 12px; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #161208; font-size: 36px; box-shadow: 0 0 0 9px rgba(255,200,61,.1), 0 13px 30px rgba(0,0,0,.3); animation: resultBurst .72s var(--ease-smooth) both; }
.result-burst::before, .result-burst::after { content: '✦'; position: absolute; color: var(--cream); font-size: 15px; animation: resultSpark 1.5s ease-in-out infinite alternate; }
.result-burst::before { left: -25px; top: 9px; }
.result-burst::after { right: -24px; bottom: 8px; animation-delay: -.7s; }
.result-burst span { display: block; }
.result-card h2 { margin-bottom: 7px; }
.result-card > p { max-width: 350px; margin: 0 auto 14px; }
.result-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0; }
.result-highlights article { padding: 10px 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.045); }
.result-highlights small, .result-highlights strong { display: block; }
.result-highlights small { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.result-highlights strong { margin-top: 4px; color: var(--gold); font-size: 18px; }
.result-board-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 7px; }
.result-board-head strong { font-size: 11px; }
.result-board-head small { color: var(--muted); font-size: 7px; letter-spacing: .08em; }
.result-scoreboard { display: grid; gap: 6px; max-height: 258px; overflow-y: auto; padding: 1px; scrollbar-width: thin; }
.result-score-row { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 27px 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); text-align: left; animation: resultRowIn .42s var(--ease-smooth) both; animation-delay: var(--delay); }
.result-score-row.winner { border-color: rgba(255,200,61,.42); background: linear-gradient(90deg, rgba(255,200,61,.14), rgba(255,200,61,.035)); }
.result-rank { color: var(--muted); text-align: center; font-size: 9px; font-weight: 950; }
.result-score-row.winner .result-rank { color: var(--gold); font-size: 15px; }
.result-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, var(--blue), #5949b3); font-size: 11px; font-weight: 950; }
.result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.result-player { min-width: 0; }
.result-player strong, .result-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-player strong { font-size: 10px; }
.result-player small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.result-player small.gained { color: var(--gold); font-weight: 900; }
.result-total { color: var(--cream); font-size: 17px; font-weight: 1000; }
.result-card .wide { margin-top: 13px; }
@keyframes resultReveal { from { opacity: 0; transform: translateY(28px) scale(.95); } }
@keyframes resultBurst { from { opacity: 0; transform: rotate(-35deg) scale(.25); } 70% { transform: rotate(8deg) scale(1.1); } }
@keyframes resultSpark { to { opacity: .25; transform: translateY(-6px) rotate(35deg) scale(.7); } }
@keyframes resultRowIn { from { opacity: 0; transform: translateX(-14px); } }
.wide { width: 100%; margin-top: 8px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 30px); transform: translate(-50%, 18px) scale(.97); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: 12px; background: #f6efdc; color: #16221e; font-size: 11px; font-weight: 800; box-shadow: 0 8px 30px #0008; transition: transform .38s var(--ease-smooth), opacity .3s var(--ease-smooth); }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: #ffdedb; color: #7d1610; }
.chat-button { position: relative; font-size: 15px; }
.chat-button span { position: absolute; right: -3px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 99px; background: var(--red); color: #fff; font-size: 8px; font-style: normal; }
.chat-backdrop { position: fixed; z-index: 30; inset: 0; display: flex; justify-content: center; align-items: flex-end; padding: 14px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(0,9,6,.62); backdrop-filter: blur(5px); }
.chat-panel { width: min(520px, 100%); max-height: min(660px, 86vh); display: grid; grid-template-rows: auto minmax(92px, 1fr) auto auto auto; gap: 10px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: linear-gradient(160deg, #123127, #091d17); box-shadow: 0 -16px 65px rgba(0,0,0,.5); animation: chatRise .42s var(--ease-smooth); }
.chat-head { display: flex; align-items: center; justify-content: space-between; }
.chat-head strong { display: block; margin-top: 4px; font-size: 15px; }
.chat-head .close-btn { position: static; flex: 0 0 38px; }
.chat-messages { min-height: 92px; max-height: 230px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 5px 2px; scrollbar-width: thin; }
.chat-empty { margin: auto; color: var(--muted); text-align: center; font-size: 10px; }
.chat-message { max-width: 88%; align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; padding: 8px 10px; border-radius: 13px 13px 13px 4px; background: rgba(255,255,255,.075); animation: bubbleIn .36s var(--ease-smooth) both; }
.chat-message.self { align-self: flex-end; flex-direction: row-reverse; border-radius: 13px 13px 4px 13px; background: rgba(255,200,61,.16); }
.chat-copy { min-width: 0; }
.chat-message strong, .chat-message .chat-copy > span { display: block; overflow-wrap: anywhere; }
.chat-message strong { margin-bottom: 2px; color: var(--gold); font-size: 8px; }
.chat-message .chat-copy > span { font-size: 11px; }
.chat-avatar { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, var(--blue), #5949b3); font-size: 9px; font-weight: 900; }
.quick-chat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.quick-chat button { min-height: 38px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.055); font-size: 9px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.quick-chat button:active { transform: scale(.95); background: rgba(255,200,61,.18); }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.chat-compose input { min-width: 0; height: 43px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; outline: none; background: #071b15; color: var(--ink); font-size: 11px; }
.chat-compose input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.1); }
.chat-compose button { min-width: 70px; border: 0; border-radius: 13px; background: var(--gold); color: #14221d; font-size: 10px; font-weight: 950; cursor: pointer; }
.reaction-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.reaction-row button { height: 45px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: #17392e; font-size: 22px; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.reaction-row button:active { transform: scale(.82) rotate(-8deg); background: rgba(255,200,61,.2); }
.reaction-stage { position: fixed; z-index: 50; inset: 0; overflow: hidden; pointer-events: none; }
.flying-reaction { position: absolute; left: var(--reaction-x); bottom: 8%; display: grid; justify-items: center; color: #fff; text-shadow: 0 3px 10px #000; animation: reactionFly 2.25s cubic-bezier(.15,.75,.25,1) forwards; }
.flying-reaction b { font-size: clamp(48px, 16vw, 78px); filter: drop-shadow(0 7px 11px rgba(0,0,0,.35)); }
.flying-reaction small { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border-radius: 99px; background: rgba(0,0,0,.5); font-size: 8px; font-weight: 900; }
@keyframes chatRise { from { opacity: 0; transform: translateY(42px) scale(.97); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(7px) scale(.96); } }
@keyframes reactionFly { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.35) rotate(-18deg); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(8deg); } 72% { opacity: 1; transform: translate(calc(-50% + 12px), -48vh) scale(.96) rotate(-6deg); } 100% { opacity: 0; transform: translate(calc(-50% - 8px), -66vh) scale(.65) rotate(10deg); } }
@media (min-width: 600px) { :root { --card-w: 100px; } .game-table { min-height: 520px; } .opponent { min-height: 78px; } }
@media (max-height: 800px) { :root { --card-w: clamp(62px, 17vw, 82px); } .game-table { min-height: 320px; } .topbar { height: 48px; } .brand-mark { width: 35px; height: 35px; } .player-zone { padding-top: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

[hidden] { display: none !important; }
.lobby-shell { width: 100%; height: auto; min-height: 100vh; min-height: var(--uno-viewport-height, 100vh); max-width: 760px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(38px, calc(env(safe-area-inset-bottom) + 22px)) max(12px, env(safe-area-inset-left)); overflow: visible; }
.lobby-topbar { position: relative; z-index: 3; }
.connection-pill { height: 32px; padding: 0 9px; display: flex; gap: 6px; align-items: center; border: 0; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: #8a9b94; }
.connection-pill.online i { background: #43e887; box-shadow: 0 0 0 4px rgba(67,232,135,.12); }
.connection-pill.connecting i { background: var(--gold); animation: blink 1s infinite; }
.connection-pill.offline i { background: #ff6257; }
@keyframes blink { 50% { opacity: .3; } }
.lobby-main { padding-top: 6px; }
.lobby-hero { position: relative; min-height: 148px; padding: 17px 18px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 76% 40%, rgba(31,134,99,.48), transparent 38%), linear-gradient(145deg, #0c3025, #092018); }
.lobby-hero::after { content: ''; position: absolute; inset: 0; opacity: .08; background-image: repeating-linear-gradient(45deg, transparent 0 23px, #fff 24px 25px); }
.lobby-hero h1 { position: relative; z-index: 1; margin: 2px 0 6px; font-size: clamp(27px, 8vw, 42px); line-height: .94; letter-spacing: -.05em; }
.lobby-hero h1 em { color: var(--gold); font-style: normal; }
.lobby-hero p { position: relative; z-index: 1; max-width: 270px; margin: 0; color: #b9d0c7; font-size: 11px; line-height: 1.45; }
.lobby-hero .presented-by { width: fit-content; margin-top: 9px; padding: 5px 9px; border: 1px solid rgba(255,200,61,.24); border-radius: 99px; background: rgba(0,0,0,.2); color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.floating-cards { position: absolute; z-index: 2; right: 17px; top: 19px; width: 100px; height: 105px; }
.floating-cards span { position: absolute; width: 52px; height: 75px; display: grid; place-items: center; border: 3px solid var(--cream); border-radius: 9px; color: #fff; font-size: 20px; font-weight: 1000; box-shadow: 0 10px 17px #0007; }
.floating-cards span:nth-child(1) { left: 0; top: 24px; background: var(--red); transform: rotate(-17deg); }
.floating-cards span:nth-child(2) { left: 29px; top: 2px; background: var(--blue); transform: rotate(2deg); }
.floating-cards span:nth-child(3) { right: 0; top: 27px; background: var(--green); transform: rotate(17deg); }
.lobby-panel, .room-panel { margin-top: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 12px; background: #0b221b; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.lobby-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.23); }
.lobby-tabs button { min-width: 0; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 850; cursor: pointer; transition: color .3s var(--ease-smooth), background .3s var(--ease-smooth), transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth); }
.lobby-tabs button > span { font-size: 16px; line-height: 16px; }
.lobby-tabs button.active { background: var(--cream); color: #10231c; box-shadow: 0 3px 10px #0005; }
.lobby-tabs button:last-child:nth-child(3n + 1) { grid-column: 2; }
.lobby-form { display: none; padding-top: 14px; }
.lobby-form.active { display: block; animation: rise .38s var(--ease-smooth); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-card { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center; min-height: 66px; padding: 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); cursor: pointer; }
.choice-card.selected { border-color: var(--gold); background: rgba(255,200,61,.08); }
.choice-card input { position: absolute; opacity: 0; }
.choice-card > span { grid-row: 1/3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); }
.choice-card b { font-size: 11px; align-self: end; }
.choice-card small { align-self: start; color: var(--muted); font-size: 8px; }
.field { display: grid; gap: 6px; margin-top: 10px; }
.field > span { padding-left: 2px; color: #afc8be; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.field input, .field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; outline: none; background: #102d24; color: var(--ink); font: 750 12px/1 inherit; }
.field input:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.1); }
.custom-select { position: relative; min-width: 0; }
.custom-select .select-native { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.custom-select-trigger { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; outline: none; background: linear-gradient(145deg, #12342a, #0e2921); color: var(--ink); font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.035); transition: border-color .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), transform .3s var(--ease-smooth); }
.custom-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-trigger i { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--gold); font-size: 15px; font-style: normal; transition: transform .35s var(--ease-smooth), background .35s var(--ease-smooth); }
.custom-select.open .custom-select-trigger { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.1), 0 8px 22px rgba(0,0,0,.18); }
.custom-select.open .custom-select-trigger i { transform: rotate(180deg); background: rgba(255,200,61,.14); }
.custom-select-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 250px; overflow-y: auto; padding: 6px; border: 1px solid rgba(255,200,61,.25); border-radius: 15px; background: rgba(8,31,24,.98); box-shadow: 0 18px 45px rgba(0,0,0,.58); backdrop-filter: blur(12px); scrollbar-width: thin; animation: selectMenuIn .32s var(--ease-smooth) both; }
.custom-select-menu button { width: 100%; min-height: 37px; display: flex; align-items: center; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: #c8d9d2; text-align: left; font-size: 9px; font-weight: 800; cursor: pointer; transition: color .25s var(--ease-smooth), background .25s var(--ease-smooth), transform .25s var(--ease-smooth); }
.custom-select-menu button:hover, .custom-select-menu button:focus-visible { background: rgba(255,255,255,.07); color: #fff; outline: none; }
.custom-select-menu button[aria-selected="true"] { background: var(--gold); color: #14221d; transform: translateX(2px); }
@keyframes selectMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.975); } }
.code-field input { height: 56px; text-transform: uppercase; text-align: center; letter-spacing: .22em; font-size: 23px; font-weight: 1000; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.form-grid .field { min-width: 0; }
.toggle-field { margin: 12px 2px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.toggle-field input { position: absolute; opacity: 0; }
.toggle { flex: 0 0 39px; width: 39px; height: 23px; padding: 3px; border-radius: 99px; background: #315046; transition: background .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth); }
.toggle::after { content: ''; display: block; width: 17px; height: 17px; border-radius: 50%; background: #d8e3df; transition: transform .4s var(--ease-smooth), background .35s var(--ease-smooth); }
.toggle-field input:checked + .toggle { background: var(--green); }
.toggle-field input:checked + .toggle::after { transform: translateX(16px); background: #fff; }
.toggle-field b, .toggle-field small { display: block; }
.toggle-field b { font-size: 10px; }
.toggle-field small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.lobby-submit { margin-top: 5px; background: var(--gold) !important; min-height: 48px; }
.solo-link { width: 100%; margin-top: 8px; padding: 10px; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.solo-link span { color: var(--gold); margin-left: 4px; }
.room-list-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 10px; }
.room-list-head strong, .room-list-head small { display: block; }
.room-list-head strong { font-size: 11px; }
.room-list-head small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.room-list-head button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.05); cursor: pointer; }
.room-list { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; }
.room-list-item { min-height: 54px; padding: 9px 9px 9px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.035); }
.room-list-item strong, .room-list-item span { display: block; }
.room-list-item strong { font-size: 10px; }
.room-list-item span { color: var(--muted); font-size: 8px; margin-top: 3px; }
.room-list-item button { min-width: 60px; height: 34px; border: 0; border-radius: 10px; background: var(--cream); color: #10231c; font-size: 9px; font-weight: 900; cursor: pointer; }
.empty-rooms { min-height: 145px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-rooms span { font-size: 30px; color: var(--gold); }
.empty-rooms strong { margin-top: 5px; color: var(--ink); font-size: 11px; }
.empty-rooms small { margin-top: 3px; font-size: 8px; }
.profile-summary { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: linear-gradient(135deg, rgba(255,200,61,.1), rgba(23,169,91,.08)); }
.profile-avatar { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--cream); border-radius: 50%; background: linear-gradient(145deg, var(--red), #8e2552); font-size: 20px; font-weight: 950; box-shadow: 0 5px 15px #0005; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-summary strong, .profile-summary small { display: block; }
.profile-summary strong { margin-top: 3px; font-size: 17px; }
.profile-summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.profile-stats article { min-width: 0; padding: 12px 6px; text-align: center; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.04); }
.profile-stats article.win { background: rgba(23,169,91,.11); }
.profile-stats article.loss { background: rgba(229,57,53,.09); }
.profile-stats span, .profile-stats small { display: block; color: var(--muted); font-size: 7px; font-weight: 850; }
.profile-stats strong { display: block; margin: 4px 0 2px; color: var(--cream); font-size: 24px; }
.profile-stats .win strong { color: #58e592; }
.profile-stats .loss strong { color: #ff837b; }
.ranked-note { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 11px; border-radius: 14px; background: rgba(255,200,61,.07); }
.ranked-note > span { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #17221e; font-weight: 1000; }
.ranked-note strong, .ranked-note small { display: block; }
.ranked-note strong { font-size: 9px; }
.ranked-note small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.leaderboard-list { display: grid; gap: 6px; max-height: 330px; overflow-y: auto; }
.leaderboard-row { min-height: 54px; display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); }
.leaderboard-row.top { border-color: rgba(255,200,61,.28); background: rgba(255,200,61,.07); }
.leaderboard-rank { color: var(--muted); text-align: center; font-size: 10px; font-weight: 950; }
.leaderboard-row.top .leaderboard-rank { color: var(--gold); font-size: 15px; }
.leaderboard-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, var(--blue), #5949b3); font-size: 11px; font-weight: 950; }
.leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.leaderboard-copy { min-width: 0; }
.leaderboard-copy strong, .leaderboard-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-copy strong { font-size: 10px; }
.leaderboard-copy small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.leaderboard-wins { text-align: right; }
.leaderboard-wins strong, .leaderboard-wins small { display: block; }
.leaderboard-wins strong { color: var(--gold); font-size: 16px; }
.leaderboard-wins small { color: var(--muted); font-size: 7px; }
.deck-skin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.deck-skin-option { position: relative; min-width: 0; overflow: hidden; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.035); color: var(--ink); text-align: left; cursor: pointer; transition: transform .35s var(--ease-smooth), border-color .35s var(--ease-smooth), background .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth); }
.deck-skin-option:active { transform: scale(.97); }
.deck-skin-option.selected { border-color: var(--gold); background: rgba(255,200,61,.08); box-shadow: 0 0 0 2px rgba(255,200,61,.08), 0 10px 25px rgba(0,0,0,.2); }
.deck-skin-grid > .deck-skin-option:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 9px) / 2); justify-self: center; }
.deck-preview { position: relative; height: 108px; display: block; overflow: hidden; margin: -2px -2px 10px; border-radius: 13px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.1), transparent 45%), #102b23; }
.skin-card { position: absolute; top: 17px; width: 44px; height: 67px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--cream); border-radius: 7px; color: #fff; font: normal 1000 17px/1 Inter, sans-serif; box-shadow: 0 7px 13px rgba(0,0,0,.42); }
.skin-card::before { content: ''; position: absolute; width: 72%; height: 95%; border-radius: 50%; background: rgba(255,255,255,.9); transform: rotate(20deg); }
.skin-card { isolation: isolate; }
.skin-card.red-card { left: calc(50% - 54px); background: var(--red); transform: rotate(-13deg); }
.skin-card.blue-card { z-index: 2; left: calc(50% - 22px); background: var(--blue); transform: translateY(-3px); }
.skin-card.back-card { z-index: 3; left: calc(50% + 10px); background: #15161b; transform: rotate(13deg); }
.skin-card.red-card, .skin-card.blue-card, .skin-card.back-card { text-shadow: 0 1px 2px #000; }
.skin-card.red-card::after, .skin-card.blue-card::after { content: inherit; }
.classic-preview .skin-card { line-height: 67px; text-align: center; }
.classic-preview .skin-card:not(.back-card) { color: transparent; }
.classic-preview .skin-card:not(.back-card)::after { position: relative; z-index: 2; color: #fff; }
.classic-preview .red-card::after { content: '7'; }
.classic-preview .blue-card::after { content: '↺'; }
.classic-preview .back-card { color: var(--cream); font: italic 1000 24px/1 Georgia, serif; text-shadow: 1px 2px 0 #801613; }
.classic-preview .back-card::before { width: 68%; height: 70%; background: var(--red); border: 2px solid var(--gold); }
.spider-preview { background: radial-gradient(circle at 50% 45%, rgba(25,91,190,.35), transparent 48%), #07162e; }
.spider-preview .skin-card { border-color: #eef5ff; background: linear-gradient(145deg, #d21d32 0 48%, #0a347b 52%); text-shadow: 0 1px 2px #030816; }
.spider-preview .skin-card::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .6; transform: none; background: repeating-radial-gradient(circle at center, transparent 0 8px, rgba(255,255,255,.45) 9px 10px, transparent 11px 17px), repeating-conic-gradient(from 0deg at center, rgba(255,255,255,.48) 0 1.5deg, transparent 2deg 30deg); }
.spider-preview .skin-card { isolation: isolate; }
.spider-preview .skin-card::after { content: ''; position: absolute; z-index: 1; inset: 17% 14%; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: linear-gradient(145deg, #d21d32 0 48%, #092d70 52%); }
.spider-preview .skin-card:not(.back-card) { color: transparent; }
.spider-preview .skin-card:not(.back-card)::marker { display: none; }
.spider-preview .red-card::after { content: '7'; display: grid; place-items: center; color: #fff; }
.spider-preview .blue-card::after { content: '+2'; display: grid; place-items: center; color: #fff; font-size: 13px; }
.spider-preview .back-card { z-index: 3; color: transparent; }
.spider-preview .back-card::after { content: ''; background: rgba(4,16,39,.88) center / 68% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M27 24 14 14M25 31 8 27M26 39 12 50M37 24 50 14M39 31 56 27M38 39 52 50'/%3E%3C/g%3E%3Cellipse cx='32' cy='20' rx='7' ry='9' fill='white'/%3E%3Cellipse cx='32' cy='40' rx='9' ry='15' fill='white'/%3E%3C/svg%3E"); }
.kitty-preview { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.58), transparent 44%), #8d365f; }
.kitty-preview .skin-card { border-color: #fff8fb; box-shadow: 0 7px 13px rgba(94,26,57,.4); }
.kitty-preview .red-card { background: #ed5b8d; }
.kitty-preview .blue-card { background: #6aa9e1; }
.kitty-preview .skin-card:not(.back-card) { color: transparent; }
.kitty-preview .skin-card:not(.back-card)::before { width: 72%; height: 90%; border: 2px solid #ff91be; background: #fff9fc; }
.kitty-preview .red-card::after, .kitty-preview .blue-card::after { position: relative; z-index: 2; display: grid; place-items: center; color: #d9367b; text-shadow: none; }
.kitty-preview .red-card::after { content: '7'; }
.kitty-preview .blue-card::after { content: '+2'; font-size: 13px; }
.kitty-preview .back-card { color: transparent; background: linear-gradient(145deg, #ff91bd, #f9dce9 55%, #ff72aa); }
.kitty-preview .back-card::before { inset: 7%; width: auto; height: auto; border: 0; border-radius: 0; background: center / contain no-repeat var(--kitty-face); transform: none; }
.deck-skin-copy { display: block; min-height: 38px; }
.deck-skin-copy b, .deck-skin-copy small { display: block; }
.deck-skin-copy b { color: var(--cream); font-size: 11px; }
.deck-skin-copy small { margin-top: 4px; color: var(--muted); font-size: 7.5px; line-height: 1.35; }
.deck-selected { width: fit-content; display: flex; gap: 4px; align-items: center; margin-top: 8px; padding: 4px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: #779288; font-size: 7px; font-weight: 900; }
.deck-selected i { font-style: normal; }
.deck-skin-option.selected .deck-selected { background: var(--gold); color: #14221d; }
.spider-option.selected { border-color: #428cff; background: linear-gradient(145deg, rgba(211,29,49,.13), rgba(20,76,165,.14)); box-shadow: 0 0 0 2px rgba(48,117,239,.1), 0 10px 25px rgba(0,0,0,.24); }
.spider-option.selected .deck-selected { background: linear-gradient(90deg, #da2338, #2875e7); color: #fff; }
.kitty-option.selected { border-color: #ff77ae; background: linear-gradient(145deg, rgba(255,123,178,.17), rgba(255,226,239,.08)); box-shadow: 0 0 0 2px rgba(255,104,168,.1), 0 10px 25px rgba(0,0,0,.22); }
.spider-preview .skin-card::before { opacity: .88; background: repeating-radial-gradient(ellipse at center, transparent 0 8px, #0d111a 9px 10px, transparent 11px 18px), repeating-conic-gradient(from 0deg at center, #111620 0 1.6deg, transparent 2deg 30deg); }
.spider-preview .red-card::after, .spider-preview .blue-card::after { border: 2px solid #080c14; background: var(--spider-mask) center / 84% no-repeat, linear-gradient(145deg, #db1932 0 48%, #0a3d89 49%); color: #fff; -webkit-text-stroke: .6px #080b11; text-shadow: 0 2px 0 #070a10; }
.spider-preview .back-card::after { inset: 9% 10%; border: 0; border-radius: 0; background: var(--spider-mask) center / contain no-repeat; filter: drop-shadow(0 3px 2px #02040a); }
.kitty-preview .red-card::after, .kitty-preview .blue-card::after { background: var(--kitty-face) center / 90% no-repeat, #fffafd; color: #d82870; -webkit-text-stroke: .7px #fff; text-shadow: 0 2px 0 #fff; }
.kitty-preview .back-card::before { inset: 2%; background: var(--kitty-face) center / contain no-repeat; filter: drop-shadow(0 3px 2px #8e24534a); }
.kitty-option.selected .deck-selected { background: linear-gradient(90deg, #f34f94, #ff91bd); color: #fff; }
.skin-local-note { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.04); }
.skin-local-note > span { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(88,168,255,.11); color: #58a8ff; }
.skin-local-note b, .skin-local-note small { display: block; }
.skin-local-note b { font-size: 9px; }
.skin-local-note small { margin-top: 2px; color: var(--muted); font-size: 7.5px; line-height: 1.4; }
.settings-head { padding: 4px 3px 10px; }
.settings-head strong, .settings-head small { display: block; }
.settings-head strong { margin-top: 4px; font-size: 15px; }
.settings-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.setting-row { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 39px; gap: 10px; align-items: center; margin-top: 7px; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); cursor: pointer; }
.setting-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,200,61,.1); color: var(--gold); font-size: 18px; font-weight: 950; }
.setting-row b, .setting-row small { display: block; }
.setting-row b { font-size: 10px; }
.setting-row small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.setting-row input { position: absolute; opacity: 0; pointer-events: none; }
.setting-row .toggle { justify-self: end; }
.setting-row input:checked + .toggle { background: var(--green); }
.setting-row input:checked + .toggle::after { transform: translateX(16px); background: #fff; }
.privacy-review-button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 7px; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); color: var(--ink); text-align: left; cursor: pointer; }
.privacy-review-button > span:nth-child(2) { min-width: 0; }
.privacy-review-button b, .privacy-review-button small { display: block; }
.privacy-review-button b { font-size: 10px; }
.privacy-review-button small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.privacy-review-button > i { color: var(--gold); font-size: 22px; font-style: normal; }

html.privacy-locked, html.privacy-locked body { height: 100%; overflow: hidden; }
.privacy-gate { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: hidden; background: radial-gradient(circle at 50% 8%, rgba(23,169,91,.22), transparent 37%), rgba(2,11,8,.92); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); animation: privacyBackdropIn .34s ease both; }
.privacy-gate.is-closing { pointer-events: none; animation: privacyBackdropOut .26s ease both; }
.privacy-card { width: min(100%, 560px); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: linear-gradient(160deg, rgba(17,49,39,.99), rgba(7,25,19,.99)); box-shadow: 0 28px 90px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08); animation: privacyCardIn .5s var(--ease-smooth) both; }
.privacy-gate.is-closing .privacy-card { animation: privacyCardOut .24s ease both; }
.privacy-head { flex: 0 0 auto; display: flex; gap: 13px; align-items: flex-start; padding: 20px 20px 15px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(255,200,61,.06), transparent 62%); }
.privacy-shield { flex: 0 0 43px; width: 43px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,220,125,.75); border-radius: 15px 15px 20px 20px; background: linear-gradient(145deg, var(--gold), #e79a12); color: #10231b; box-shadow: 0 7px 20px rgba(255,200,61,.2); font-size: 22px; font-weight: 1000; clip-path: polygon(50% 0, 94% 16%, 88% 72%, 50% 100%, 12% 72%, 6% 16%); }
.privacy-head > div { min-width: 0; }
.privacy-head h1 { margin: 4px 0 5px; color: var(--cream); font-size: clamp(19px, 5.7vw, 27px); line-height: 1.08; letter-spacing: -.035em; }
.privacy-head p { margin: 0; color: #b9cdc4; font-size: 10px; line-height: 1.45; }
.privacy-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 15px 18px 10px; scrollbar-color: rgba(255,200,61,.45) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.privacy-promise { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(82,229,146,.29); border-radius: 16px; background: linear-gradient(135deg, rgba(23,169,91,.18), rgba(23,169,91,.06)); }
.privacy-promise > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(82,229,146,.13); color: #62e99c; font-size: 14px; }
.privacy-promise p { margin: 0; color: #cfe5db; font-size: 10px; line-height: 1.5; }
.privacy-promise strong { color: #62e99c; }
.privacy-section { padding: 13px 2px 11px; border-bottom: 1px solid rgba(255,255,255,.07); }
.privacy-section h2 { margin: 0 0 5px; color: var(--cream); font-size: 11px; letter-spacing: .015em; }
.privacy-section p { margin: 0; color: #a9c0b6; font-size: 9.5px; line-height: 1.58; }
.privacy-section strong { color: var(--cream); }
.privacy-date { margin: 11px 2px 5px; color: #718e82; font-size: 7.5px; line-height: 1.5; }
.privacy-footer { flex: 0 0 auto; padding: 11px 18px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); background: rgba(5,20,15,.96); box-shadow: 0 -16px 30px rgba(3,15,11,.7); }
.privacy-footer p { margin: 0 0 9px; color: #8eaa9e; font-size: 8px; text-align: center; }
.privacy-accept { min-height: 50px; box-shadow: 0 6px 0 #8e6500, 0 10px 24px rgba(0,0,0,.3); }
@keyframes privacyBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes privacyBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes privacyCardIn { from { opacity: 0; transform: translateY(28px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes privacyCardOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (max-height: 650px) {
  .privacy-head { padding: 14px 16px 11px; }
  .privacy-head p { display: none; }
  .privacy-scroll { padding: 11px 15px 7px; }
  .privacy-section { padding: 9px 2px 8px; }
  .privacy-footer { padding: 8px 15px max(12px, env(safe-area-inset-bottom)); }
  .privacy-footer p { display: none; }
  .privacy-accept { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-gate, .privacy-card, .privacy-gate.is-closing, .privacy-gate.is-closing .privacy-card { animation-duration: .01ms; }
}

/* Language selection and RTL support. */
html.language-locked, html.language-locked body { height: 100%; overflow: hidden; }
.language-gate { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 12%, rgba(255,200,61,.18), transparent 38%), rgba(2,11,8,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: privacyBackdropIn .3s ease both; }
.language-gate.is-closing { pointer-events: none; animation: privacyBackdropOut .22s ease both; }
.language-card { width: min(100%, 440px); padding: 28px 20px 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: linear-gradient(155deg, rgba(18,54,42,.99), rgba(6,24,18,.99)); box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08); text-align: center; animation: privacyCardIn .45s var(--ease-smooth) both; }
.language-gate.is-closing .language-card { animation: privacyCardOut .22s ease both; }
.language-mark { width: 58px; height: 72px; display: grid; place-items: center; margin: 0 auto 17px; border: 3px solid #fff5d4; border-radius: 9px; background: linear-gradient(145deg, #e63230, #a70816); color: #fff5d4; box-shadow: 0 9px 0 #650713, 0 16px 35px rgba(0,0,0,.42); font-size: 34px; font-weight: 1000; transform: rotate(-7deg); }
.language-card h1 { margin: 0; color: var(--cream); font-size: 26px; letter-spacing: -.035em; }
.language-card > p { margin: 7px 0 19px; color: var(--muted); font-size: 11px; }
.language-options { display: grid; gap: 9px; }
.language-options button { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.045); color: var(--cream); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.language-options button:active { transform: scale(.975); }
.language-options button:hover { border-color: rgba(255,200,61,.58); background: rgba(255,200,61,.08); }
.language-options b { font-size: 14px; }
.language-options small { color: var(--muted); font-size: 9px; }
.language-setting { min-height: 104px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 8px 10px; align-items: center; padding: 10px; margin-bottom: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); }
.language-setting-copy { min-width: 0; }
.language-setting-copy b, .language-setting-copy small { display: block; }
.language-setting-copy b { font-size: 10px; }
.language-setting-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.language-setting-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; direction: ltr; }
.language-setting-options button { min-width: 0; height: 36px; padding: 0 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 9px; font-weight: 900; cursor: pointer; }
.language-setting-options button.active { border-color: rgba(255,200,61,.8); background: rgba(255,200,61,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,200,61,.12); }
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .privacy-review-button { text-align: right; }
html[dir="rtl"] .lobby-tabs, html[dir="rtl"] .choice-row, html[dir="rtl"] .form-grid, html[dir="rtl"] .action-row, html[dir="rtl"] .room-actions, html[dir="rtl"] .invite-actions { direction: rtl; }
html[dir="rtl"] .language-card { direction: rtl; }
html[dir="rtl"] .floating-cards { right: auto; left: 17px; }
html[dir="rtl"] input, html[dir="rtl"] textarea { text-align: right; }
html[dir="rtl"] .card, html[dir="rtl"] .play-direction, html[dir="rtl"] .turn-timer, html[dir="rtl"] .language-setting-options { direction: ltr; }
html[dir="rtl"] .setting-row .toggle::after, html[dir="rtl"] .toggle-field .toggle::after { margin-left: auto; }
html[dir="rtl"] .setting-row input:checked + .toggle::after, html[dir="rtl"] .toggle-field input:checked + .toggle::after { transform: translateX(-16px); }
.lobby-shell.waiting-room { position: fixed; z-index: 5; inset: 0; width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--bg); transform: translateZ(0); backface-visibility: hidden; }
.lobby-shell.waiting-room.resume-paint { animation: resumePaint .14s linear both; }
.waiting-room .lobby-topbar { flex: 0 0 auto; }
.waiting-room .lobby-main { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.waiting-room .lobby-hero, .waiting-room .solo-link { display: none; }
.room-panel { max-height: calc(var(--tg-viewport-stable-height, 100vh) - 76px); padding: 16px 16px max(16px, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-bottom: 72px; scrollbar-width: thin; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.waiting-room .room-panel { min-height: 0; max-height: none; flex: 1; }
@keyframes resumePaint { from { opacity: .996; transform: translate3d(0,.01px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.room-code-box { position: relative; padding: 15px; text-align: center; border-radius: 18px; border: 1px dashed rgba(255,200,61,.45); background: rgba(255,200,61,.07); }
.room-code-box strong { display: block; margin-top: 4px; color: var(--cream); font-size: 34px; letter-spacing: .18em; }
.room-code-box button { position: absolute; right: 9px; top: 9px; border: 0; border-radius: 8px; padding: 7px 8px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 8px; cursor: pointer; }
.room-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 10px; }
.room-summary { margin: 12px 0; text-align: center; color: var(--muted); font-size: 9px; }
.waiting-copy { display: flex; gap: 10px; align-items: center; margin: 11px 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); }
.waiting-copy strong, .waiting-copy small { display: block; }
.waiting-copy strong { font-size: 11px; }
.waiting-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pulse-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(23,169,91,.5); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px transparent; } }
.player-list { display: grid; gap: 6px; }
.player-list article { min-height: 52px; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); animation: rise .25s both; animation-delay: var(--delay); }
.room-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, var(--blue), #5949b3); font-size: 12px; font-weight: 900; }
.player-list article > div { min-width: 0; flex: 1; }
.player-list strong, .player-list small { display: block; }
.player-list strong { font-size: 10px; }
.player-list small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.you-badge { padding: 5px 7px; border-radius: 7px; background: rgba(255,200,61,.12); color: var(--gold); font-size: 7px; letter-spacing: .08em; }
.kick-button { border: 0; background: transparent; color: #ff8a82; font-size: 8px; cursor: pointer; }
.start-game { position: sticky; z-index: 6; bottom: max(2px, env(safe-area-inset-bottom)); min-height: 50px; margin-top: 12px; background: var(--gold) !important; box-shadow: 0 7px 0 #8e6500, 0 -12px 24px rgba(7,26,22,.78); }
.icon-btn.muted { color: var(--muted); opacity: .7; }

/* v26: Telegram WebView uses one explicit, full-screen scroll surface. */
html, body { width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
body { overscroll-behavior: none; touch-action: none; }
.lobby-shell:not(.waiting-room) { position: fixed; z-index: 1; inset: 0; width: 100%; height: var(--uno-viewport-height, 100dvh); min-height: 0; margin: 0 auto; overflow-x: hidden; overflow-y: scroll; overscroll-behavior-y: contain; scroll-padding-bottom: max(44px, env(safe-area-inset-bottom)); touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lobby-shell:not(.waiting-room)::-webkit-scrollbar { display: none; }
.lobby-shell:not(.waiting-room) .lobby-main, .lobby-shell:not(.waiting-room) .lobby-panel, .lobby-shell:not(.waiting-room) .lobby-form, .lobby-shell:not(.waiting-room) .deck-skin-option { touch-action: pan-y; }
.app-shell { height: var(--uno-viewport-height, 100dvh); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* v26: clean UNO faces with character art reserved for accents and card backs. */
.card[data-card-theme="spiderman"] { border: 4px solid #f8fbff; border-radius: 12px; outline: 2px solid #081020; outline-offset: -4px; box-shadow: 0 4px 0 #050914, 0 0 0 1px #285fb3; }
.card[data-card-theme="spiderman"]::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .22; transform: none; background: repeating-radial-gradient(ellipse at 50% 52%, transparent 0 15px, #07101c 16px 17px, transparent 18px 30px), repeating-conic-gradient(from 0deg at 50% 52%, #07101c 0 1.15deg, transparent 1.6deg 30deg); }
.card[data-card-theme="spiderman"] .oval { isolation: isolate; inset: 18% 14%; border: 3px solid #fff; border-radius: 50%; background: #f8fbff; box-shadow: 0 0 0 2px #0a1324, 0 3px 8px #04081166; transform: rotate(20deg); }
.card[data-card-theme="spiderman"] .oval::before { display: none; }
.card[data-card-theme="spiderman"] .oval::after { content: ''; position: absolute; right: 7%; bottom: 7%; width: 25%; height: 30%; background: #0b1830; -webkit-mask: var(--spider-emblem) center / contain no-repeat; mask: var(--spider-emblem) center / contain no-repeat; opacity: .88; transform: rotate(-20deg); }
.card[data-card-theme="spiderman"] .oval span { position: relative; z-index: 2; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #fff, 0 3px 5px #07101d40; transform: rotate(-20deg); }
.card[data-card-theme="spiderman"].red .oval span { color: #d21731; }
.card[data-card-theme="spiderman"].yellow .oval span { color: #a66a00; }
.card[data-card-theme="spiderman"].green .oval span { color: #087245; }
.card[data-card-theme="spiderman"].blue .oval span { color: #0a4fa8; }
.card[data-card-theme="spiderman"] .corner { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-shadow: 0 2px 2px #050914, 0 0 3px #050914; box-shadow: none; }
.card[data-card-theme="spiderman"].wild-card { background: linear-gradient(145deg, #d21731 0 49%, #0a3e8f 50%); }
.card[data-card-theme="spiderman"].wild-card .oval { background: linear-gradient(145deg, #d21731 0 49%, #0a3e8f 50%); }
.card[data-card-theme="spiderman"].wild-card .oval span { color: #fff; text-shadow: 0 2px 0 #071020; }
.card[data-card-theme="spiderman"].card-back { background: linear-gradient(155deg, #dc1732 0 63%, #0a3d89 64%); }
.card[data-card-theme="spiderman"].card-back::before { opacity: .76; }
.card[data-card-theme="spiderman"].card-back > span { width: 73%; height: 80%; background: var(--spider-mask) center / contain no-repeat; filter: drop-shadow(0 4px 4px #02050ba8); }
.card[data-card-theme="spiderman"].card-back > span::after { right: -8%; bottom: -4%; width: 35%; height: 35%; }

.card[data-card-theme="hellokitty"] { border: 4px solid #fff; border-radius: 14px; outline: 2px solid #dc3478; outline-offset: -4px; box-shadow: 0 4px 0 #9e285a, 0 0 0 1px #ff91bd; }
.card[data-card-theme="hellokitty"]::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .25; transform: none; background: var(--kitty-bow) 11% 14% / 17% auto no-repeat, var(--kitty-bow) 90% 86% / 18% auto no-repeat, radial-gradient(circle, #fff 0 2px, transparent 2.5px) 0 0 / 18px 18px; }
.card[data-card-theme="hellokitty"] .oval { isolation: isolate; inset: 18% 14%; border: 3px solid #f15a96; border-radius: 50%; background: #fffafd; box-shadow: 0 0 0 2px #fff, 0 3px 8px #8d275442; transform: rotate(20deg); }
.card[data-card-theme="hellokitty"] .oval::before { display: none; }
.card[data-card-theme="hellokitty"] .oval::after { content: ''; position: absolute; right: 4%; bottom: 7%; top: auto; width: 34%; height: 31%; background: var(--kitty-face) center / contain no-repeat; opacity: 1; transform: rotate(-20deg); filter: none; }
.card[data-card-theme="hellokitty"] .oval span { position: relative; z-index: 2; font-family: "Arial Rounded MT Bold", ui-rounded, Inter, sans-serif; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #fff, 0 3px 5px #9c2b5940; transform: rotate(-20deg); }
.card[data-card-theme="hellokitty"].red .oval span { color: #df2f74; }
.card[data-card-theme="hellokitty"].yellow .oval span { color: #a87300; }
.card[data-card-theme="hellokitty"].green .oval span { color: #167b59; }
.card[data-card-theme="hellokitty"].blue .oval span { color: #3478b9; }
.card[data-card-theme="hellokitty"] .corner { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-shadow: 0 2px 2px #802049, 0 0 3px #802049; box-shadow: none; }
.card[data-card-theme="hellokitty"].wild-card { background: conic-gradient(from 45deg, #ed4f89, #eabb35, #3ca67d, #4c8dcc, #ed4f89); }
.card[data-card-theme="hellokitty"].wild-card .oval { background: #fffafd; }
.card[data-card-theme="hellokitty"].wild-card .oval span { color: #dc2c72; }
.card[data-card-theme="hellokitty"].card-back { background: linear-gradient(145deg, #ff72a9, #ffd9e9 58%, #f24d8d); }
.card[data-card-theme="hellokitty"].card-back::before { opacity: .62; }
.card[data-card-theme="hellokitty"].card-back > span { width: 88%; height: 76%; background: var(--kitty-face) center / contain no-repeat; filter: drop-shadow(0 4px 3px #92245242); }

.spider-preview .skin-card::before { opacity: .2; }
.spider-preview .red-card::after, .spider-preview .blue-card::after { border: 2px solid #09101d; background: var(--spider-emblem) 88% 88% / 20% no-repeat, #f8fbff; color: #132745; -webkit-text-stroke: 0; text-shadow: none; }
.spider-preview .back-card::after { background: var(--spider-mask) center / contain no-repeat; }
.kitty-preview .red-card::after, .kitty-preview .blue-card::after { border: 2px solid #ee5a96; background: var(--kitty-face) 92% 91% / 35% no-repeat, #fffafd; color: #dc2b71; -webkit-text-stroke: 0; text-shadow: none; }
.kitty-preview .back-card::before { background: var(--kitty-face) center / contain no-repeat; }

/* v27: monochrome character decks; UNO colors appear only as compact rule markers. */
.card[data-card-theme="spiderman"],
.card[data-card-theme="spiderman"].red,
.card[data-card-theme="spiderman"].yellow,
.card[data-card-theme="spiderman"].green,
.card[data-card-theme="spiderman"].blue,
.card[data-card-theme="spiderman"].wild-card { background: #c91531; }
.card[data-card-theme="spiderman"].red { --uno-accent: #e53935; }
.card[data-card-theme="spiderman"].yellow { --uno-accent: #f2bd21; }
.card[data-card-theme="spiderman"].green { --uno-accent: #19a75b; }
.card[data-card-theme="spiderman"].blue { --uno-accent: #2277dc; }
.card[data-card-theme="spiderman"].wild-card { --uno-accent: #f3f6fb; }
.card[data-card-theme="spiderman"] { border-color: #f8fbff; box-shadow: 0 4px 0 #050914, 0 0 0 1px #111827, inset 0 -7px 0 var(--uno-accent); }
.card[data-card-theme="spiderman"]::before { opacity: .3; background: repeating-radial-gradient(ellipse at 50% 52%, transparent 0 16px, #171018 17px 18px, transparent 19px 31px), repeating-conic-gradient(from 0deg at 50% 52%, #171018 0 1.2deg, transparent 1.65deg 30deg); }
.card[data-card-theme="spiderman"] .oval, .card[data-card-theme="spiderman"].wild-card .oval { border-color: #fff; background: #f8f8f5; box-shadow: 0 0 0 2px #11131a, 0 3px 8px #28050e70; }
.card[data-card-theme="spiderman"] .oval span,
.card[data-card-theme="spiderman"].red .oval span,
.card[data-card-theme="spiderman"].yellow .oval span,
.card[data-card-theme="spiderman"].green .oval span,
.card[data-card-theme="spiderman"].blue .oval span,
.card[data-card-theme="spiderman"].wild-card .oval span { color: #17131a; text-shadow: 0 2px 0 #fff; }
.card[data-card-theme="spiderman"] .corner { min-width: 20%; padding: 3px 4px; border: 1px solid #fff; border-radius: 5px; background: var(--uno-accent); color: #11131a; text-shadow: none; box-shadow: 0 2px 0 #24050d; }
.card[data-card-theme="spiderman"].red .corner, .card[data-card-theme="spiderman"].green .corner, .card[data-card-theme="spiderman"].blue .corner { color: #fff; text-shadow: 0 1px 1px #0008; }
.card[data-card-theme="spiderman"].card-back { background: #c91531; box-shadow: 0 4px 0 #050914, 0 0 0 1px #111827; }
.card[data-card-theme="spiderman"].card-back > span { width: 76%; height: 82%; }

.card[data-card-theme="hellokitty"],
.card[data-card-theme="hellokitty"].red,
.card[data-card-theme="hellokitty"].yellow,
.card[data-card-theme="hellokitty"].green,
.card[data-card-theme="hellokitty"].blue,
.card[data-card-theme="hellokitty"].wild-card { background: #ef6f9f; }
.card[data-card-theme="hellokitty"].red { --uno-accent: #e53935; }
.card[data-card-theme="hellokitty"].yellow { --uno-accent: #e7ae16; }
.card[data-card-theme="hellokitty"].green { --uno-accent: #15995a; }
.card[data-card-theme="hellokitty"].blue { --uno-accent: #287bc4; }
.card[data-card-theme="hellokitty"].wild-card { --uno-accent: #fff; }
.card[data-card-theme="hellokitty"] { border-color: #fff; box-shadow: 0 4px 0 #9d285a, 0 0 0 1px #d62d70, inset 0 -7px 0 var(--uno-accent); }
.card[data-card-theme="hellokitty"]::before { opacity: .22; background: var(--kitty-bow) 11% 14% / 17% auto no-repeat, var(--kitty-bow) 90% 86% / 18% auto no-repeat, radial-gradient(circle, #fff 0 2px, transparent 2.5px) 0 0 / 18px 18px; }
.card[data-card-theme="hellokitty"] .oval, .card[data-card-theme="hellokitty"].wild-card .oval { border-color: #df3d7c; background: #fffafd; box-shadow: 0 0 0 2px #fff, 0 3px 8px #8d275442; }
.card[data-card-theme="hellokitty"] .oval span,
.card[data-card-theme="hellokitty"].red .oval span,
.card[data-card-theme="hellokitty"].yellow .oval span,
.card[data-card-theme="hellokitty"].green .oval span,
.card[data-card-theme="hellokitty"].blue .oval span,
.card[data-card-theme="hellokitty"].wild-card .oval span { color: #c92164; text-shadow: 0 2px 0 #fff; }
.card[data-card-theme="hellokitty"] .oval::after { right: 2%; bottom: 5%; width: 39%; height: 36%; background: var(--kitty-face) center / contain no-repeat; }
.card[data-card-theme="hellokitty"] .corner { min-width: 20%; padding: 3px 4px; border: 1px solid #fff; border-radius: 7px; background: var(--uno-accent); color: #272127; text-shadow: none; box-shadow: 0 2px 0 #9d285a; }
.card[data-card-theme="hellokitty"].red .corner, .card[data-card-theme="hellokitty"].green .corner, .card[data-card-theme="hellokitty"].blue .corner { color: #fff; text-shadow: 0 1px 1px #0006; }
.card[data-card-theme="hellokitty"].card-back { background: #ef6f9f; box-shadow: 0 4px 0 #9d285a, 0 0 0 1px #d62d70; }
.card[data-card-theme="hellokitty"].card-back > span { width: 82%; height: 88%; background: var(--kitty-face) center / contain no-repeat; }
.tiny-card[data-card-theme="spiderman"] { background: #c91531 var(--spider-mask) center / 70% no-repeat; }
.tiny-card[data-card-theme="hellokitty"] { background: #ef6f9f var(--kitty-face) center / 70% no-repeat; }

.spider-preview .skin-card, .spider-preview .red-card, .spider-preview .blue-card, .spider-preview .back-card { background-color: #c91531; }
.spider-preview .red-card::after, .spider-preview .blue-card::after { background: var(--spider-emblem) 88% 88% / 20% no-repeat, #f8f8f5; }
.kitty-preview .skin-card, .kitty-preview .red-card, .kitty-preview .blue-card, .kitty-preview .back-card { background-color: #ef6f9f; }
.kitty-preview .red-card::after, .kitty-preview .blue-card::after { background: var(--kitty-face) 93% 91% / 38% no-repeat, #fffafd; }
.kitty-preview .back-card::before { inset: 3%; background: var(--kitty-face) center / contain no-repeat; }

/* v28: SVG character marks live only in the corners; card values stay unobstructed. */
.card[data-card-theme="spiderman"] .oval::after,
.card[data-card-theme="hellokitty"] .oval::after { display: none; }
.card[data-card-theme="hellokitty"]::before,
.card[data-card-theme="hellokitty"].card-back::before { opacity: 0; background: none; }
.card[data-card-theme="spiderman"] .corner,
.card[data-card-theme="hellokitty"] .corner { width: auto; min-width: 0; min-height: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2px; padding: 2px 3px; border: 0; border-radius: 5px; background: rgba(255,255,255,.9); color: #19141a; text-shadow: none; box-shadow: 0 1px 0 rgba(34,9,18,.35); }
.card[data-card-theme="spiderman"] .corner::before,
.card[data-card-theme="hellokitty"] .corner::before { content: ''; display: block; flex: 0 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; }
.card[data-card-theme="spiderman"] .corner::before { width: 10px; height: 12px; background-image: var(--spider-mask); }
.card[data-card-theme="hellokitty"] .corner::before { width: 13px; height: 10px; background-image: var(--kitty-face); }
.card[data-card-theme="spiderman"] .corner.top,
.card[data-card-theme="hellokitty"] .corner.top { top: 5px; left: 5px; }
.card[data-card-theme="spiderman"] .corner.bottom,
.card[data-card-theme="hellokitty"] .corner.bottom { right: 5px; bottom: 7px; }
.card[data-card-theme="spiderman"] .oval span,
.card[data-card-theme="hellokitty"] .oval span { font-size: calc(var(--card-w) * .38); }
.card[data-card-theme="spiderman"].card-back > span { width: 72%; height: 78%; background: var(--spider-mask) center / contain no-repeat; }
.card[data-card-theme="hellokitty"].card-back > span { width: 88%; height: 72%; background: var(--kitty-face) center / contain no-repeat; }
.tiny-card[data-card-theme="hellokitty"] { background: #ef6f9f var(--kitty-face) center / 82% no-repeat; }
.spider-preview .red-card::after, .spider-preview .blue-card::after { background: var(--spider-mask) 8% 9% / 23% no-repeat, #f8f8f5; }
.kitty-preview .red-card::after, .kitty-preview .blue-card::after { background: var(--kitty-face) 7% 8% / 31% no-repeat, #fffafd; }
.kitty-preview .back-card::before { inset: 6%; background: var(--kitty-face) center / contain no-repeat; }

/* v30: quiet, single-card theme previews. */
.deck-preview { height: 126px; }
.classic-preview .skin-card { top: 29px; }
.spider-preview, .kitty-preview { display: grid; place-items: center; }
.spider-preview { background: radial-gradient(circle at 50% 48%, rgba(214,29,51,.2), transparent 49%), linear-gradient(145deg, #071226, #0b2346); }
.kitty-preview { background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.28), transparent 48%), linear-gradient(145deg, #812449, #b63b6d); }
.spider-preview .red-card, .spider-preview .blue-card,
.kitty-preview .red-card, .kitty-preview .blue-card { display: none; }
.spider-preview .back-card, .kitty-preview .back-card { position: relative; inset: auto; left: auto; top: auto; width: 70px; height: 104px; border-width: 3px; border-radius: 11px; transform: none; box-shadow: 0 10px 22px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.12); }
.spider-preview .back-card { background: #c91531; }
.spider-preview .back-card::before { inset: 0; opacity: .28; background: repeating-radial-gradient(ellipse at center, transparent 0 12px, #11131b 13px 14px, transparent 15px 23px), repeating-conic-gradient(from 0deg at center, #11131b 0 1.3deg, transparent 1.8deg 30deg); }
.spider-preview .back-card::after { inset: 10% 9%; border: 0; background: var(--spider-mask) center / contain no-repeat; filter: drop-shadow(0 4px 3px rgba(0,0,0,.46)); }
.kitty-preview .back-card { background: #ef6f9f; }
.kitty-preview .back-card::before { inset: 8%; opacity: 1; background: var(--kitty-face) center / contain no-repeat; filter: drop-shadow(0 4px 3px rgba(116,24,62,.3)); }
.deck-skin-copy { min-height: 0; text-align: center; }
.deck-skin-copy b { font-size: 12px; }
.deck-selected { margin: 8px auto 0; }
@media (max-width: 430px) {
  .connection-pill b { display: none; }
  .connection-pill { width: 28px; padding: 0; justify-content: center; }
  .floating-cards { opacity: .8; right: -2px; transform: scale(.82); }
  .lobby-hero p { max-width: 220px; }
  .top-actions { gap: 5px; }
  .app-shell .top-actions .icon-btn { width: 35px; height: 35px; }
  .opponents.many-opponents { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .opponents.many-opponents .opponent { display: block; padding: 5px; text-align: center; }
  .opponents.many-opponents .avatar { margin: 0 auto 2px; }
  .opponents.many-opponents .opponent-info span { margin-top: 1px; }
  .opponents.many-opponents .mini-hand { display: none; }
}

/* v33: lightweight character decks, themed UNO moments and card-first startup. */
:root {
  --batman-mark: url("assets/batman-mark.svg");
  --sonic-mark: url("assets/sonic-mark.svg");
  --pikachu-mark: url("assets/pikachu-mark.svg");
}

.app-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(27, 132, 96, .34), transparent 35%),
    linear-gradient(155deg, #071a14, #03100c 72%);
  color: var(--cream);
  opacity: 1;
  transition: opacity .3s ease, visibility .3s ease;
}
.app-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: repeating-linear-gradient(45deg, transparent 0 23px, #fff 24px 25px);
}
.app-loader.is-ready { visibility: hidden; opacity: 0; }
.app-loader-art { position: relative; width: 126px; height: 126px; display: grid; place-items: center; }
.app-loader-art span {
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(255, 200, 61, .17);
  border-top-color: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255, 200, 61, .13);
  animation: loaderOrbit 1.4s linear infinite;
}
.app-loader-art img {
  position: relative;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .38));
  animation: loaderCards 1.4s var(--ease-smooth) infinite alternate;
}
.app-loader strong { position: relative; font: italic 1000 25px/1 Georgia, serif; letter-spacing: -.04em; }
.app-loader small { position: relative; color: #9bb7ac; font-size: 8px; font-weight: 900; letter-spacing: .19em; }
@keyframes loaderOrbit { to { transform: rotate(360deg); } }
@keyframes loaderCards { from { transform: translateY(3px) rotate(-2deg) scale(.96); } to { transform: translateY(-4px) rotate(2deg) scale(1.03); } }

.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) {
  --uno-accent: #f3c62f;
  --deck-mark: var(--batman-mark);
  border: 4px solid var(--deck-edge, #f3c62f);
  outline: 2px solid var(--deck-outline, #090b10);
  outline-offset: -4px;
  border-radius: 13px;
  background: var(--deck-base, #151820);
  box-shadow: 0 4px 0 var(--deck-shadow, #05070b), 0 0 0 1px var(--deck-edge), inset 0 -7px 0 var(--uno-accent);
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).red { --uno-accent: #e53935; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).yellow { --uno-accent: #f2bd21; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).green { --uno-accent: #19a75b; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).blue { --uno-accent: #2277dc; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).wild-card { --uno-accent: #f7f8fb; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"])::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: .15;
  transform: none;
  background: radial-gradient(circle at 20% 20%, var(--deck-detail, #fff) 0 1px, transparent 1.5px) 0 0 / 17px 17px;
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .oval {
  inset: 18% 14%;
  border: 3px solid var(--deck-edge);
  background: var(--deck-face, #f4f4f2);
  box-shadow: 0 0 0 2px var(--deck-outline), 0 3px 8px rgba(0, 0, 0, .3);
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .oval span {
  color: var(--deck-value, #16181d);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: calc(var(--card-w) * .38);
  text-shadow: 0 2px 0 #fff;
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .corner {
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .92);
  color: #15171b;
  text-shadow: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .corner::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--deck-mark) center / contain no-repeat;
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .corner.top { top: 5px; left: 5px; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) .corner.bottom { right: 5px; bottom: 7px; }
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).card-back {
  background: var(--deck-base);
  box-shadow: 0 4px 0 var(--deck-shadow), 0 0 0 1px var(--deck-edge);
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).card-back::before {
  inset: 8%;
  width: auto;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--deck-edge) 70%, white);
  border-radius: 9px;
  opacity: .46;
  background: radial-gradient(circle, transparent 36%, var(--deck-detail) 37% 38%, transparent 39%);
  transform: none;
}
.card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]).card-back > span {
  width: 78%;
  height: 72%;
  background: var(--deck-mark) center / contain no-repeat;
  font-size: 0;
  transform: none;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .4));
}
.card[data-card-theme="batman"] { --deck-base: #151820; --deck-edge: #f0c735; --deck-outline: #06070b; --deck-shadow: #05070a; --deck-detail: #f0c735; --deck-face: #f1f0e9; --deck-mark: var(--batman-mark); }
.card[data-card-theme="sonic"] { --deck-base: #0d5fbd; --deck-edge: #f2f6ff; --deck-outline: #062f68; --deck-shadow: #052751; --deck-detail: #fff; --deck-face: #f8fbff; --deck-value: #063d82; --deck-mark: var(--sonic-mark); }
.card[data-card-theme="pikachu"] { --deck-base: #edc51e; --deck-edge: #3b3214; --deck-outline: #fff1a5; --deck-shadow: #6a5310; --deck-detail: #3b3214; --deck-face: #fff9dc; --deck-value: #31280d; --deck-mark: var(--pikachu-mark); }
.card[data-card-theme="batman"].playable { filter: drop-shadow(0 0 8px rgba(243, 198, 47, .6)); }
.card[data-card-theme="sonic"].playable { filter: drop-shadow(0 0 8px rgba(54, 152, 255, .65)); }
.card[data-card-theme="pikachu"].playable { filter: drop-shadow(0 0 8px rgba(255, 222, 46, .65)); }
.tiny-card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) { border-width: 2px; background: var(--tiny-base) var(--tiny-mark) center / 84% no-repeat; }
.tiny-card[data-card-theme="batman"] { --tiny-base: #151820; --tiny-mark: var(--batman-mark); border-color: #f0c735; }
.tiny-card[data-card-theme="sonic"] { --tiny-base: #0d5fbd; --tiny-mark: var(--sonic-mark); border-color: #f2f6ff; }
.tiny-card[data-card-theme="pikachu"] { --tiny-base: #edc51e; --tiny-mark: var(--pikachu-mark); border-color: #3b3214; }
.tiny-card:is([data-card-theme="batman"], [data-card-theme="sonic"], [data-card-theme="pikachu"]) b { font-size: 0; }

.batman-preview, .sonic-preview, .pikachu-preview { display: grid; place-items: center; }
.batman-preview { background: radial-gradient(circle, rgba(240, 199, 53, .16), transparent 48%), #090b10; }
.sonic-preview { background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 48%), #063f87; }
.pikachu-preview { background: radial-gradient(circle, rgba(255, 249, 220, .35), transparent 48%), #987a0f; }
.batman-preview .back-card, .sonic-preview .back-card, .pikachu-preview .back-card {
  position: relative;
  inset: auto;
  width: 70px;
  height: 104px;
  border: 3px solid var(--preview-edge);
  border-radius: 11px;
  background: var(--preview-base);
  transform: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .12);
}
.batman-preview { --preview-base: #151820; --preview-edge: #f0c735; --preview-mark: var(--batman-mark); }
.sonic-preview { --preview-base: #0d5fbd; --preview-edge: #f2f6ff; --preview-mark: var(--sonic-mark); }
.pikachu-preview { --preview-base: #edc51e; --preview-edge: #3b3214; --preview-mark: var(--pikachu-mark); }
.batman-preview .back-card::before, .sonic-preview .back-card::before, .pikachu-preview .back-card::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 8px;
  background: var(--preview-mark) center / contain no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .4));
}

.uno-neon-stage { --fx-primary: #54fff4; --fx-secondary: #7c55ff; --fx-ink: #071a1c; }
.uno-neon-glyph {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 67px;
  height: 67px;
  opacity: 0;
  background: var(--fx-mark, none) center / contain no-repeat;
  filter: drop-shadow(0 0 8px var(--fx-primary));
  transform: translate(-50%, -50%) scale(.35) rotate(-12deg);
  animation: unoGlyph 1.35s var(--ease-smooth) both;
}
.uno-neon-stage .uno-neon-ring { border-color: var(--fx-primary); box-shadow: 0 0 7px #fff, 0 0 16px var(--fx-primary), 0 0 30px var(--fx-secondary), inset 0 0 13px color-mix(in srgb, var(--fx-primary) 55%, transparent); }
.uno-neon-stage .uno-neon-aura { background: radial-gradient(ellipse, transparent 45%, color-mix(in srgb, var(--fx-primary) 28%, transparent) 61%, transparent 75%); }
.uno-neon-stage .uno-neon-label { background: var(--fx-ink); text-shadow: 0 0 5px #fff, 0 0 11px var(--fx-primary), 0 0 19px var(--fx-secondary); box-shadow: 0 0 9px var(--fx-primary), 0 0 25px color-mix(in srgb, var(--fx-secondary) 75%, transparent); }
.uno-neon-stage .uno-neon-name { background: color-mix(in srgb, var(--fx-ink) 88%, transparent); color: color-mix(in srgb, var(--fx-primary) 70%, white); }
.uno-neon-stage .uno-neon-bolts i { background: linear-gradient(#fff, var(--fx-primary) 45%, var(--fx-secondary)); filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--fx-primary)); }
.uno-neon-stage .uno-neon-sparks i { box-shadow: 0 0 5px #fff, 0 0 11px var(--fx-primary); }
.uno-neon-stage[data-uno-theme="spiderman"] { --fx-primary: #f02a41; --fx-secondary: #257cff; --fx-ink: #080d18; --fx-mark: var(--spider-mask); }
.uno-neon-stage[data-uno-theme="spiderman"] .uno-neon-ring { border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 10px, rgba(255, 255, 255, .18) 11px 12px, transparent 13px 20px), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .25) 0 1deg, transparent 1.5deg 30deg); }
.uno-neon-stage[data-uno-theme="spiderman"] .uno-neon-bolts i { width: 2px; background: #e9f3ff; clip-path: none; }
.uno-neon-stage[data-uno-theme="hellokitty"] { --fx-primary: #ff76ad; --fx-secondary: #fff1f7; --fx-ink: #601d3b; --fx-mark: var(--kitty-face); }
.uno-neon-stage[data-uno-theme="hellokitty"] .uno-neon-ring { border-radius: 48% 52% 46% 54%; }
.uno-neon-stage[data-uno-theme="hellokitty"] .uno-neon-bolts i { width: 16px; height: 15px; background: #ff8fba; clip-path: polygon(50% 90%, 4% 43%, 11% 15%, 37% 7%, 50% 27%, 63% 7%, 89% 15%, 96% 43%); }
.uno-neon-stage[data-uno-theme="batman"] { --fx-primary: #f3c62f; --fx-secondary: #ffffff; --fx-ink: #0b0d12; --fx-mark: var(--batman-mark); }
.uno-neon-stage[data-uno-theme="batman"] .uno-neon-aura { background: radial-gradient(ellipse, rgba(243, 198, 47, .35), transparent 64%); filter: blur(8px); }
.uno-neon-stage[data-uno-theme="batman"] .uno-neon-ring { border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.uno-neon-stage[data-uno-theme="batman"] .uno-neon-bolts i { width: 18px; height: 12px; background: #f3c62f; clip-path: polygon(0 35%, 25% 0, 50% 30%, 75% 0, 100% 35%, 80% 100%, 50% 65%, 20% 100%); }
.uno-neon-stage[data-uno-theme="sonic"] { --fx-primary: #43a4ff; --fx-secondary: #fff; --fx-ink: #052c61; --fx-mark: var(--sonic-mark); }
.uno-neon-stage[data-uno-theme="sonic"] .uno-neon-ring { width: calc(var(--card-w) + 50px); height: calc(var(--card-w) + 50px); border-width: 5px; border-radius: 50%; animation-name: sonicRing; }
.uno-neon-stage[data-uno-theme="sonic"] .uno-neon-bolts i { width: 31px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff 35%, #43a4ff); clip-path: none; }
.uno-neon-stage[data-uno-theme="pikachu"] { --fx-primary: #ffe32e; --fx-secondary: #ff7b22; --fx-ink: #322708; --fx-mark: var(--pikachu-mark); }
.uno-neon-stage[data-uno-theme="pikachu"] .uno-neon-bolts i { width: 12px; height: 50px; background: linear-gradient(#fff, #ffe32e 48%, #ff8a1f); }
.discard-pile[data-uno-theme="batman"].uno-neon-active > .card { animation-name: batmanCardGlow; }
.discard-pile[data-uno-theme="sonic"].uno-neon-active > .card { animation-name: sonicCardGlow; }
.discard-pile[data-uno-theme="pikachu"].uno-neon-active > .card { animation-name: pikachuCardGlow; }
@keyframes unoGlyph { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-16deg); } 22%, 68% { opacity: .78; } 38% { transform: translate(-50%, -50%) scale(1.05) rotate(3deg); } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.24) rotate(8deg); } }
@keyframes sonicRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-25deg); } 20%, 62% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(190deg); } }
@keyframes batmanCardGlow { 0%, 100% { filter: brightness(1); } 22%, 62% { filter: brightness(1.2) drop-shadow(0 0 17px #f3c62f); } }
@keyframes sonicCardGlow { 0%, 100% { filter: brightness(1); } 22%, 62% { filter: brightness(1.25) drop-shadow(0 0 18px #43a4ff); transform: translateX(2px); } }
@keyframes pikachuCardGlow { 0%, 100% { filter: brightness(1); } 16%, 30%, 49%, 65% { filter: brightness(1.32) drop-shadow(0 0 19px #ffe32e); } 23%, 56% { transform: translateX(-2px) rotate(-1deg); } }

@media (prefers-reduced-motion: reduce) {
  .app-loader-art span, .app-loader-art img { animation: none; }
  .uno-neon-bolts, .uno-neon-sparks { display: none; }
}

/* v34: progression, guided onboarding, player controls and server-synced turns. */
.profile-summary { position: relative; }
.profile-level { margin-left: auto; align-self: flex-start; padding: 5px 8px; border: 1px solid rgba(255,200,61,.38); border-radius: 99px; background: rgba(255,200,61,.12); color: var(--gold); font-size: 8px; font-weight: 950; white-space: nowrap; }
.profile-avatar[data-frame="neon"] { border-color: #42fff2; box-shadow: 0 0 0 3px rgba(66,255,242,.12), 0 0 20px rgba(66,255,242,.36); }
.profile-avatar[data-frame="gold"] { border-color: #ffd966; box-shadow: 0 0 0 3px rgba(255,217,102,.16), 0 0 24px rgba(255,200,61,.45); }
.profile-avatar[data-frame="diamond"] { border-color: #c5f8ff; box-shadow: 0 0 0 3px rgba(179,241,255,.18), 0 0 26px rgba(126,215,255,.54); }
#profileTitle { color: var(--gold); font-weight: 850; }
.xp-card { margin-top: 9px; padding: 11px 12px; border: 1px solid rgba(87,226,194,.18); border-radius: 15px; background: linear-gradient(145deg, rgba(31,109,87,.19), rgba(255,255,255,.025)); }
.xp-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xp-card strong { color: #8effdc; font-size: 12px; }
.xp-card small { color: var(--muted); font-size: 7px; }
.xp-track, .task-track { display: block; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.xp-track { height: 7px; margin: 8px 0 6px; }
.xp-track i, .task-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #27d89d, var(--gold)); transition: width .65s var(--ease-smooth); }
.profile-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 14px 2px 7px; }
.profile-section-head strong, .profile-section-head small { display: block; }
.profile-section-head strong { font-size: 11px; }
.profile-section-head small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.profile-section-head > b { color: var(--gold); font-size: 9px; }
.title-picker { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: none; }
.title-picker::-webkit-scrollbar { display: none; }
.title-picker button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 8px; font-weight: 850; cursor: pointer; }
.title-picker button.selected { border-color: var(--gold); background: rgba(255,200,61,.14); color: var(--cream); }
.task-list { display: grid; gap: 6px; }
.task-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 55px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.task-list article.complete { border-color: rgba(48,216,155,.28); background: rgba(48,216,155,.07); }
.task-list small, .task-list strong { display: block; }
.task-list small { color: var(--gold); font-size: 6px; font-weight: 950; letter-spacing: .12em; }
.task-list strong { margin: 3px 0 6px; font-size: 9px; }
.task-list > article > b { color: var(--gold); font-size: 8px; white-space: nowrap; }
.task-list article.complete > b { color: #55e7ae; font-size: 14px; }
.task-track { width: 100%; height: 4px; }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.achievement-grid article { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.03); }
.achievement-grid article.locked { opacity: .5; filter: saturate(.35); }
.achievement-grid article.unlocked { border-color: rgba(255,200,61,.24); background: rgba(255,200,61,.06); }
.achievement-grid article > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--gold); font-weight: 950; }
.achievement-grid strong, .achievement-grid small { display: block; }
.achievement-grid strong { font-size: 8px; }
.achievement-grid small { margin-top: 3px; color: var(--muted); font-size: 6px; line-height: 1.3; }

.deck-skin-option:disabled { cursor: not-allowed; opacity: .62; filter: saturate(.45); }
.deck-skin-option:disabled:active { transform: none; }
.deck-lock { position: absolute; z-index: 4; right: 8px; top: 8px; padding: 4px 6px; border-radius: 99px; background: rgba(0,0,0,.64); color: var(--gold); font-size: 7px; font-weight: 950; }
.deck-skin-option:not(.locked) .deck-lock { color: #67e7b4; }
.card[data-card-theme="neon"] { --uno-accent: #44fff2; border-color: #44fff2; outline: 2px solid #061013; outline-offset: -4px; background: #08171c; box-shadow: 0 4px 0 #02080a, 0 0 0 1px #44fff2, inset 0 -7px 0 var(--uno-accent), 0 0 10px rgba(68,255,242,.17); }
.card[data-card-theme="neon"].red { --uno-accent: #ff405b; } .card[data-card-theme="neon"].yellow { --uno-accent: #ffe059; } .card[data-card-theme="neon"].green { --uno-accent: #4cff9a; } .card[data-card-theme="neon"].blue { --uno-accent: #4ca7ff; }
.card[data-card-theme="neon"]::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: .2; transform: none; background: linear-gradient(90deg, transparent 48%, #44fff2 49% 51%, transparent 52%) 0 0 / 19px 19px, linear-gradient(transparent 48%, #44fff2 49% 51%, transparent 52%) 0 0 / 19px 19px; }
.card[data-card-theme="neon"] .oval { inset: 18% 14%; border: 2px solid var(--uno-accent); background: #061014; box-shadow: 0 0 11px var(--uno-accent), inset 0 0 9px rgba(255,255,255,.05); }
.card[data-card-theme="neon"] .oval span { color: #fff; text-shadow: 0 0 7px var(--uno-accent); }
.card[data-card-theme="neon"] .corner { color: var(--uno-accent); text-shadow: 0 0 5px var(--uno-accent); }
.card[data-card-theme="neon"].card-back > span { color: #f7ffff; text-shadow: 0 0 6px #fff, 0 0 13px #44fff2; }
.card[data-card-theme="neon"].card-back::before { background: #071216; border-color: #44fff2; box-shadow: 0 0 13px #44fff2; }
.card[data-card-theme="galaxy"] { --uno-accent: #c789ff; border-color: #e9d4ff; outline: 2px solid #160826; outline-offset: -4px; background: #2d1250; box-shadow: 0 4px 0 #10051c, 0 0 0 1px #9f5ee7, inset 0 -7px 0 var(--uno-accent); }
.card[data-card-theme="galaxy"].red { --uno-accent: #ff5267; } .card[data-card-theme="galaxy"].yellow { --uno-accent: #ffd95a; } .card[data-card-theme="galaxy"].green { --uno-accent: #53df9a; } .card[data-card-theme="galaxy"].blue { --uno-accent: #5ea8ff; }
.card[data-card-theme="galaxy"]::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: .55; transform: none; background: radial-gradient(circle at 20% 15%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 74% 27%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 37% 72%, #ca9aff 0 1px, transparent 1.5px), radial-gradient(ellipse at center, rgba(132,73,205,.58), transparent 66%); }
.card[data-card-theme="galaxy"] .oval { inset: 18% 14%; border: 2px solid #e9d4ff; background: #f7f1ff; box-shadow: 0 0 0 2px #36155c, 0 0 12px rgba(199,137,255,.54); }
.card[data-card-theme="galaxy"] .oval span { color: #311347; text-shadow: 0 2px 0 #fff; }
.card[data-card-theme="galaxy"] .corner { color: #fff; text-shadow: 0 0 5px #b66fff; }
.card[data-card-theme="galaxy"].card-back::before { inset: 9%; width: auto; height: auto; border-radius: 10px; background: radial-gradient(circle at 30% 28%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 68% 66%, #fff 0 1.5px, transparent 2px), #1b0a31; border-color: #bf85ff; transform: none; }
.card[data-card-theme="galaxy"].card-back > span { color: #fff; text-shadow: 0 0 7px #fff, 0 0 16px #c078ff; }
.tiny-card[data-card-theme="neon"] { border-color: #44fff2; background: #08171c; box-shadow: 0 0 5px rgba(68,255,242,.42); }
.tiny-card[data-card-theme="galaxy"] { border-color: #e9d4ff; background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 1.5px), #2d1250; }
.neon-preview, .galaxy-preview { display: grid; place-items: center; }
.neon-preview { background: radial-gradient(circle, rgba(68,255,242,.14), transparent 48%), #041013; }
.galaxy-preview { background: radial-gradient(circle at 25% 22%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 65%, #d4b1ff 0 1px, transparent 1.5px), linear-gradient(145deg, #160724, #492075); }
.neon-preview .back-card, .galaxy-preview .back-card { position: relative; inset: auto; width: 70px; height: 104px; display: grid; place-items: center; border: 3px solid var(--preview-edge); border-radius: 11px; background: var(--preview-base); color: #fff; font: italic 1000 34px/1 Georgia,serif; transform: none; box-shadow: 0 10px 22px rgba(0,0,0,.46), 0 0 15px var(--preview-glow); }
.neon-preview { --preview-edge: #44fff2; --preview-base: #08171c; --preview-glow: rgba(68,255,242,.43); }
.galaxy-preview { --preview-edge: #e9d4ff; --preview-base: #2d1250; --preview-glow: rgba(199,137,255,.4); }
.neon-preview .back-card::before, .galaxy-preview .back-card::before { content: 'U'; position: relative; z-index: 2; text-shadow: 0 0 8px #fff, 0 0 15px var(--preview-edge); }
.uno-neon-stage[data-uno-theme="neon"] { --fx-primary: #44fff2; --fx-secondary: #ff45df; --fx-ink: #041114; }
.uno-neon-stage[data-uno-theme="neon"] .uno-neon-ring { border-radius: 5px; animation-name: neonGridRing; }
.uno-neon-stage[data-uno-theme="neon"] .uno-neon-bolts i { width: 3px; height: 44px; background: #44fff2; clip-path: none; }
.uno-neon-stage[data-uno-theme="galaxy"] { --fx-primary: #c789ff; --fx-secondary: #5da8ff; --fx-ink: #170824; }
.uno-neon-stage[data-uno-theme="galaxy"] .uno-neon-aura { background: radial-gradient(circle, rgba(255,255,255,.28), rgba(144,77,225,.23) 42%, transparent 72%); }
.uno-neon-stage[data-uno-theme="galaxy"] .uno-neon-ring { border-radius: 50%; animation-name: galaxyOrbit; }
.uno-neon-stage[data-uno-theme="galaxy"] .uno-neon-sparks i { width: 6px; height: 6px; clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%); }
@keyframes neonGridRing { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-18deg); } 28%,65% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45) rotate(0); } }
@keyframes galaxyOrbit { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0); } 24%,70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6) rotate(210deg); } }

.turn-timer { --turn-progress: 360deg; position: relative; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(currentColor var(--turn-progress), rgba(255,255,255,.16) 0); color: currentColor; transition: color .2s ease; }
.turn-timer::before { content: ''; position: absolute; width: 19px; height: 19px; border-radius: 50%; background: inherit; filter: brightness(.38); }
.turn-timer b { position: relative; z-index: 1; color: #fff; font-size: 7px; font-style: normal; }
.turn-banner.your-turn .turn-timer b { color: #182019; }
.turn-timer.urgent { color: #ff4b46; animation: urgentTurn .5s ease-in-out infinite alternate; }
@keyframes urgentTurn { to { transform: scale(1.13); filter: drop-shadow(0 0 6px #ff4b46); } }

.play-direction { position: absolute; z-index: 5; left: 50%; top: 50%; width: clamp(38px, 11vw, 48px); display: grid; place-items: center; gap: 3px; pointer-events: none; transform: translate(-50%,-50%); color: #cae5da; text-align: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.play-direction span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(3,24,17,.72); color: var(--gold); font-size: 25px; line-height: 1; box-shadow: inset 0 0 0 4px rgba(255,255,255,.035), 0 0 15px rgba(255,200,61,.09); animation: directionBreathe 1.8s ease-in-out infinite alternate; }
.play-direction.counterclockwise span { color: #7fdcff; box-shadow: inset 0 0 0 4px rgba(255,255,255,.035), 0 0 15px rgba(70,190,255,.13); }
.play-direction.changed span { animation: directionFlip .55s var(--ease-smooth), directionBreathe 1.8s .55s ease-in-out infinite alternate; }
@keyframes directionBreathe { to { transform: scale(1.07); filter: brightness(1.18); } }
@keyframes directionFlip { 0% { transform: scale(.55) rotate(-150deg); opacity: .2; } 70% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.player-safety-button { flex: 0 0 auto; min-width: 28px; height: 25px; padding: 0 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 8px; font-weight: 950; cursor: pointer; }
.opponent .player-safety-button { position: absolute; z-index: 3; right: 4px; top: 4px; width: 22px; min-width: 22px; height: 18px; padding: 0; border: 0; background: rgba(0,0,0,.24); font-size: 6px; }
.invite-card, .safety-card, .tutorial-card { width: min(410px, calc(100vw - 24px)); }
.invite-preview { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px; border: 1px solid rgba(255,200,61,.22); border-radius: 16px; background: rgba(255,200,61,.07); }
.invite-cards { width: 45px; height: 45px; display: grid; place-items: center; border: 3px solid var(--cream); border-radius: 10px; background: var(--red); color: #fff; box-shadow: 6px 3px 0 var(--blue); transform: rotate(-5deg); }
.invite-preview strong, .invite-preview small { display: block; }
.invite-preview strong { font-size: 21px; letter-spacing: .14em; }
.invite-preview small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.invite-actions .wide { grid-column: 1 / -1; }
.safety-card .setting-row { margin-top: 7px; }
.report-reason { margin: 12px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; color: var(--muted); font-size: 8px; font-weight: 850; }
.report-reason legend { grid-column: 1 / -1; margin-bottom: 4px; }
.report-reason label { cursor: pointer; }
.report-reason input { position: absolute; opacity: 0; pointer-events: none; }
.report-reason label span { min-height: 35px; display: grid; place-items: center; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); text-align: center; }
.report-reason input:checked + span { border-color: var(--gold); background: rgba(255,200,61,.12); color: var(--cream); }
.action.danger { background: #7d2529; color: #fff; }
.safety-note { display: block; margin-top: 8px; color: var(--muted); font-size: 7px; text-align: center; }
.tutorial-card { text-align: center; }
.tutorial-progress { display: flex; justify-content: center; gap: 5px; margin: 8px 0 17px; }
.tutorial-progress i { width: 18px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); }
.tutorial-progress i.active { background: var(--gold); }
.tutorial-visual { width: 92px; height: 92px; margin: 0 auto 16px; display: grid; place-items: center; border: 3px solid var(--cream); border-radius: 23px 13px 23px 13px; background: linear-gradient(145deg, var(--red), #9e1f28); color: #fff; font: italic 1000 34px/1 Georgia,serif; box-shadow: 0 11px 0 #73151d, 0 18px 35px rgba(0,0,0,.35); transform: rotate(-4deg); }
.tutorial-card p { min-height: 62px; }
.tutorial-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 7px; margin-top: 15px; }
.tutorial-actions #tutorialBack[hidden] + #tutorialNext { grid-column: 1 / -1; }
.result-highlights { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 380px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .result-highlights { grid-template-columns: repeat(2, 1fr); }
}

html[dir="rtl"] .floating-cards { right: auto; left: 17px; }
@media (max-width: 430px) {
  html[dir="rtl"] .floating-cards { right: auto; left: -2px; }
}