/* v42 — yeniden tasarlanan masa, kart yüzleri, menü ve efekt katmanı.
   styles.css üstüne yüklenir; eski kuralları belirli seçicilerle geçersiz kılar. */

:root {
  --card-w: clamp(62px, 18.5vw, 92px);
  --card-h: calc(var(--card-w) * 1.48);
  --red: #e8382f; --yellow: #f7c21b; --green: #16a85a; --blue: #1a73e8;
  --red-deep: #9e1712; --yellow-deep: #b9820a; --green-deep: #0b6a37; --blue-deep: #0c459c;
  --table-glow: rgba(255, 214, 102, .16);
  --nav-h: 66px;
  --spring: cubic-bezier(.3, 1.45, .5, 1);
}
:root[data-active-color="red"] { --table-glow: rgba(255, 74, 61, .3); }
:root[data-active-color="yellow"] { --table-glow: rgba(255, 201, 40, .28); }
:root[data-active-color="green"] { --table-glow: rgba(32, 196, 107, .28); }
:root[data-active-color="blue"] { --table-glow: rgba(47, 139, 255, .32); }

/* ───────────── Kart yüzü (klasik) ───────────── */
.card { border-radius: calc(var(--card-w) * .13); }
.card .card-gloss { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 28%, transparent 46%, transparent 70%, rgba(0,0,0,.14) 100%); }
.card[data-card-theme="classic"] {
  border: calc(var(--card-w) * .055) solid #fffaf0;
  background: radial-gradient(120% 90% at 30% 18%, color-mix(in srgb, var(--card-color) 82%, #fff) 0%, var(--card-color) 45%, var(--card-deep, var(--card-color)) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 14px rgba(0,0,0,.34), 0 2px 0 rgba(0,0,0,.25);
  color: #fff;
}
.card[data-card-theme="classic"].red { --card-color: var(--red); --card-deep: var(--red-deep); }
.card[data-card-theme="classic"].yellow { --card-color: var(--yellow); --card-deep: var(--yellow-deep); color: #fff; }
.card[data-card-theme="classic"].green { --card-color: var(--green); --card-deep: var(--green-deep); }
.card[data-card-theme="classic"].blue { --card-color: var(--blue); --card-deep: var(--blue-deep); }
.card[data-card-theme="classic"].wild-card { --card-color: #1b1c22; --card-deep: #050507; }
.card[data-card-theme="classic"]::before { width: 76%; height: 92%; left: 12%; top: 4%; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 2px rgba(0,0,0,.06); transform: rotate(28deg); }
.card[data-card-theme="classic"].wild-card::before { background: transparent; box-shadow: none; }
.card[data-card-theme="classic"] .oval { inset: 14% 12%; background: none; transform: none; display: grid; place-items: center; }
.card[data-card-theme="classic"] .oval > span {
  transform: none; display: grid; place-items: center; width: 100%; height: 100%;
  font: 1000 calc(var(--card-w) * .5)/1 "Arial Black", "Helvetica Neue", Inter, system-ui, sans-serif; letter-spacing: -.06em;
  color: var(--card-color); -webkit-text-stroke: calc(var(--card-w) * .02) #20140b; paint-order: stroke fill;
  text-shadow: calc(var(--card-w) * .025) calc(var(--card-w) * .035) 0 rgba(0,0,0,.28); font-style: italic;
}
.card[data-card-theme="classic"].yellow .oval > span { color: var(--yellow); }
.card[data-card-theme="classic"][data-card-type="draw2"] .oval > span { font-size: calc(var(--card-w) * .42); }
.card[data-card-theme="classic"] .oval svg { width: 72%; height: 72%; color: var(--card-color); filter: drop-shadow(1.5px 2px 0 rgba(0,0,0,.3)); overflow: visible; }
.card[data-card-theme="classic"].wild-card .oval { inset: 6% 2%; }
.card[data-card-theme="classic"].wild-card .oval svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.card .oval { position: absolute; }
.card .oval > span { position: relative; }
.card .oval .wild-plus { position: absolute; inset: 0; display: grid; place-items: center; font: italic 1000 calc(var(--card-w) * .36)/1 "Arial Black", Inter, system-ui, sans-serif; color: #fff; -webkit-text-stroke: calc(var(--card-w) * .022) #111; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.card .corner { display: grid; place-items: center; min-width: 1.1em; }
.card .corner svg { width: calc(var(--card-w) * .17); height: calc(var(--card-w) * .17); display: block; }
.card[data-card-theme="classic"] .corner { top: 4%; left: 6%; font: italic 1000 calc(var(--card-w) * .18)/1 "Arial Black", Inter, system-ui, sans-serif; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.4); paint-order: stroke fill; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.card[data-card-theme="classic"] .corner.bottom { top: auto; left: auto; right: 6%; bottom: 4%; }
.card[data-card-theme="classic"] .corner svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
/* Kart arkası */
.card.card-back[data-card-theme="classic"] { background: radial-gradient(circle at 50% 40%, #2a2b33, #0d0e12 75%); border-color: #fffaf0; }
.card.card-back[data-card-theme="classic"]::before { width: 74%; height: 62%; left: 13%; top: 19%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a4c, #c9150d 70%); border: calc(var(--card-w) * .03) solid #ffd23f; box-shadow: 0 0 0 2px #0006; transform: rotate(-24deg); }
.card.card-back[data-card-theme="classic"] > span { font: italic 1000 calc(var(--card-w) * .34)/1 "Arial Black", Inter, system-ui, sans-serif; color: #ffd23f; -webkit-text-stroke: calc(var(--card-w) * .02) #3a0a06; paint-order: stroke fill; text-shadow: 2px 3px 0 #000a; transform: rotate(-18deg); letter-spacing: -.04em; }
.card.card-back[data-card-theme="classic"] > span { font-size: 0; }
.card.card-back[data-card-theme="classic"] > span::after { content: 'UNO'; font-size: calc(var(--card-w) * .3); }
/* Temalı destelerde SVG semboller yazı rengini izler */
.card:not([data-card-theme="classic"]) .oval svg { width: 70%; height: 70%; overflow: visible; }
.card:not([data-card-theme="classic"]).wild-card .oval svg { width: 92%; height: 92%; }
.card.symbol-card .oval > span { line-height: 0; }

/* ───────────── Oyun ekranı yerleşimi ───────────── */
#gameShell:not([hidden]) { display: flex; flex-direction: column; height: var(--uno-viewport-height, 100dvh); overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#gameShell > main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#gameShell .topbar { flex: 0 0 auto; height: 50px; padding-bottom: 6px; }
#gameShell .score-strip[hidden] { display: none !important; }
#gameShell .game-table {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 8px 8px; border-radius: 26px;
  background:
    radial-gradient(60% 46% at 50% 56%, var(--table-glow), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, #137050 0%, #0b4b36 46%, #062a1f 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), inset 0 18px 60px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.35);
  transition: background .6s ease;
}
#gameShell .game-table::after { content: ''; position: absolute; inset: 7px; border-radius: 20px; border: 1.5px dashed rgba(255,244,216,.08); pointer-events: none; }
.table-stage { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

/* Koltuklar (rakipler) */
#gameShell .opponents { display: flex !important; justify-content: space-evenly; align-items: flex-start; gap: 4px; padding: 2px 2px 0; min-height: 92px; grid-template-columns: none; }
.seat { position: relative; flex: 1 1 0; min-width: 0; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 1px; transform: translateY(calc(var(--seat-lift, 0px) * -1)); transition: transform .4s var(--ease-smooth), opacity .3s; }
.seat-avatar { position: relative; width: 46px; height: 46px; }
.seat .avatar { width: 100%; height: 100%; flex-basis: auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-weight: 1000; font-size: 18px; color: #fff; border: 2.5px solid rgba(255,244,216,.85); background: linear-gradient(145deg, hsl(var(--avatar-hue, 200) 70% 55%), hsl(calc(var(--avatar-hue, 200) + 40) 70% 32%)); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.seat .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seat-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s; background: conic-gradient(var(--gold) calc(var(--turn-ratio, 1) * 360deg), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3.5px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3.5px), #000 calc(50% - 3px)); }
.seat.active .seat-ring { opacity: 1; }
.seat.active .avatar { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,61,.25), 0 0 22px rgba(255,200,61,.55); animation: seatPulse 1.4s ease-in-out infinite; }
.seat.danger .seat-count { background: #ff3b30; color: #fff; animation: dangerBlink 1s steps(2, end) infinite; }
.seat.offline { opacity: .55; }
.seat.offline .avatar { filter: grayscale(1); }
.seat.winner .avatar { border-color: var(--gold); box-shadow: 0 0 26px rgba(255,200,61,.8); }
.seat-count { position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 11px; background: #fff4d8; color: #1b140a; font-size: 12px; font-weight: 1000; border: 2px solid #0b3a2a; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.seat-copy { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; line-height: 1.1; }
.seat-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 900; color: #fff; }
.seat.active .seat-name { color: var(--gold); }
.seat-score { font-size: 10px; font-weight: 800; color: rgba(255,244,216,.62); letter-spacing: .02em; }
.seat-fan { position: relative; height: 18px; width: 44px; }
.seat-fan .tiny-card { position: absolute; left: 50%; bottom: 0; width: 13px; height: 18px; margin-left: -6.5px; border-radius: 3px; transform-origin: 50% 120%; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg)); border: 1.5px solid #fff4d8; background: radial-gradient(circle at 50% 40%, #2a2b33, #0d0e12); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.seat-fan .tiny-card b { display: none; }
.seat-fan .tiny-card::after { content: ''; position: absolute; inset: 22% 18%; border-radius: 50%; background: #e8382f; transform: rotate(-24deg); }
.seat .player-safety-button { position: absolute; top: -4px; right: 2px; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 9px; line-height: 1; opacity: .7; }
#opponents[data-count="5"] .seat-avatar, #opponents[data-count="6"] .seat-avatar, #opponents[data-count="7"] .seat-avatar { width: 36px; height: 36px; }
#opponents[data-count="6"] .seat-name, #opponents[data-count="7"] .seat-name { font-size: 10px; }
#opponents[data-count="6"] .seat-fan, #opponents[data-count="7"] .seat-fan { display: none; }
@keyframes seatPulse { 50% { box-shadow: 0 0 0 5px rgba(255,200,61,.12), 0 0 30px rgba(255,200,61,.7); } }
@keyframes dangerBlink { 50% { background: #fff4d8; color: #c51d14; } }

/* Sıra bandı */
#gameShell .turn-banner { margin: 0 auto; min-height: 34px; padding: 6px 14px; gap: 8px; border-radius: 999px; font-size: 13px; font-weight: 1000; letter-spacing: .06em; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); transition: background .3s, color .3s, box-shadow .3s; }
#gameShell .turn-banner b { font-weight: 1000; }
#gameShell .turn-banner small { font-size: 10px; opacity: .72; letter-spacing: .1em; }
#gameShell .turn-banner.your-turn { color: #1a1408; background: linear-gradient(180deg, #ffe07a, #ffc23d); border-color: #fff0b0; box-shadow: 0 0 0 4px rgba(255,200,61,.18), 0 8px 26px rgba(255,200,61,.45); }
#gameShell .turn-banner.round-over { background: rgba(255,244,216,.12); }
#gameShell .turn-banner .color-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 10px currentColor; }
.color-dot.red { background: var(--red); color: var(--red); } .color-dot.yellow { background: var(--yellow); color: var(--yellow); }
.color-dot.green { background: var(--green); color: var(--green); } .color-dot.blue { background: var(--blue); color: var(--blue); }

/* Desteler */
#gameShell .piles { margin: 0; gap: clamp(26px, 9vw, 54px); min-height: calc(var(--card-h) + 16px); }
#gameShell .draw-pile::before, #gameShell .draw-pile::after { border-radius: calc(var(--card-w) * .13); border-width: calc(var(--card-w) * .055); background: #111216; }
#gameShell .draw-pile .card { box-shadow: 0 10px 22px rgba(0,0,0,.45); }
#gameShell .draw-pile.can-draw .card { animation: drawInvite 1.6s ease-in-out infinite; }
#gameShell .draw-pile.can-draw::after { box-shadow: 0 0 0 3px rgba(255,200,61,.7), 0 0 26px rgba(255,200,61,.55); }
#gameShell .pile-count { top: calc(100% + 4px); font-size: 11px; font-weight: 900; color: rgba(255,244,216,.7); }
@keyframes drawInvite { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
#gameShell .discard-pile { position: relative; transform: none; filter: none; }
#gameShell .discard-pile::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, var(--table-glow) 0%, transparent 70%); filter: blur(4px); transition: background .5s; pointer-events: none; }
#gameShell .discard-card { position: absolute; inset: 0; transform: translate(var(--shift-x, 0), var(--shift-y, 0)) rotate(var(--tilt, 0deg)); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
#gameShell .discard-card:not(.is-top) { filter: brightness(.82) saturate(.85); }
#gameShell .discard-card.is-top { box-shadow: 0 14px 26px rgba(0,0,0,.45); }
#gameShell .play-direction { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 1000; color: rgba(255,244,216,.9); background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,244,216,.18); box-shadow: inset 0 0 12px rgba(0,0,0,.4); }
#gameShell .play-direction span { display: block; animation: dirSpin 6s linear infinite; }
#gameShell .play-direction.counterclockwise span { animation-direction: reverse; }
#gameShell .play-direction.changed { animation: dirFlip .7s var(--spring); }
@keyframes dirSpin { to { transform: rotate(360deg); } }
@keyframes dirFlip { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.35) rotate(-180deg); background: rgba(255,200,61,.35); } 100% { transform: scale(1) rotate(-360deg); } }
#gameShell .activity { position: relative; z-index: 2; min-height: 18px; max-width: 92%; margin: 0 auto; text-align: center; font-size: 12px; font-weight: 800; color: rgba(255,244,216,.86); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Oyuncu alanı */
#gameShell .player-zone { flex: 0 0 auto; position: relative; padding: 6px 0 0; border-radius: 24px 24px 0 0; transition: background .4s, box-shadow .4s; }
#gameShell .player-zone.active { background: linear-gradient(180deg, rgba(255,200,61,.12), transparent 70%); box-shadow: 0 -1px 0 rgba(255,200,61,.35); }
#gameShell .player-heading { align-items: center; padding: 0 8px 2px; }
#gameShell .self-avatar { width: 40px; height: 40px; font-weight: 1000; background: linear-gradient(145deg, hsl(var(--avatar-hue, 30) 75% 55%), hsl(calc(var(--avatar-hue, 30) + 40) 70% 32%)); }
#gameShell .player-zone.active .self-avatar { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,200,61,.6); }
#gameShell .player-heading strong { font-size: 15px; }
.self-meta { display: flex; align-items: center; gap: 8px; }
.self-score { padding: 4px 9px; border-radius: 999px; background: rgba(255,244,216,.1); color: var(--gold); font-size: 12px; font-weight: 1000; }
#gameShell .hand-count { font-size: 11px; color: rgba(255,244,216,.7); }

/* El — yelpaze */
#gameShell .hand { position: relative; min-height: calc(var(--card-h) + 24px); padding: 18px 10px 8px; display: flex; justify-content: center; align-items: flex-end; overflow-x: auto; overflow-y: visible; scroll-snap-type: none; }
#gameShell .hand.scrolling { justify-content: flex-start; }
#gameShell .hand .card {
  margin-left: 0; flex: 0 0 var(--card-w); opacity: 1; filter: none; cursor: pointer;
  transform-origin: 50% 130%;
  transform: translateY(var(--fan-y, 0px)) rotate(var(--fan-rot, 0deg));
  transition: transform .38s var(--ease-smooth), filter .3s ease, box-shadow .3s ease, margin-left .38s var(--ease-smooth);
}
#gameShell .hand .card.disabled { opacity: 1; filter: brightness(.58) saturate(.7); cursor: default; }
#gameShell .hand:not(.my-turn) .card.disabled { filter: brightness(.86) saturate(.9); }
#gameShell .hand .card.playable { transform: translateY(calc(var(--fan-y, 0px) - 16px)) rotate(var(--fan-rot, 0deg)); filter: none; box-shadow: 0 0 0 2px rgba(255,214,90,.95), 0 0 20px rgba(255,200,61,.6), 0 12px 20px rgba(0,0,0,.4); }
#gameShell .hand .card.playable:hover { transform: translateY(calc(var(--fan-y, 0px) - 26px)) rotate(var(--fan-rot, 0deg)) scale(1.05); z-index: 40 !important; }
#gameShell .hand .card.playable:active { transform: translateY(calc(var(--fan-y, 0px) - 30px)) rotate(0deg) scale(1.08); transition-duration: .12s; z-index: 40 !important; }
#gameShell .hand .card.playable::after { animation: cardShine 2.8s ease-in-out infinite; animation-delay: calc(var(--card-index, 0) * 110ms); }
.card.fx-pending { visibility: hidden; }

/* Eylem düğmeleri */
#gameShell .action-row { grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 4px 8px 0; }
#gameShell .action-row .action { min-height: 46px; border-radius: 16px; font-size: 15px; font-weight: 1000; }
#gameShell #passButton { grid-column: 1; }
#gameShell #unoButton { grid-column: 2; }
#gameShell #drawButton { grid-column: 3; }
#gameShell .uno-button {
  width: 92px; height: 56px; border-radius: 50%; padding: 0; transform: rotate(-6deg);
  font: italic 1000 19px/1 "Arial Black", Inter, system-ui, sans-serif; letter-spacing: -.02em;
  color: #ffd23f; -webkit-text-stroke: 1px #3a0a06; paint-order: stroke fill; text-shadow: 0 2px 0 #3a0a06;
  background: radial-gradient(circle at 40% 30%, #ff5a4c, #b3130c 72%); border: 3px solid #fff4d8;
  box-shadow: 0 5px 0 #6d0c07, 0 10px 18px rgba(0,0,0,.4); transition: transform .25s var(--spring), filter .3s, opacity .3s;
}
#gameShell .uno-button:disabled { opacity: 1; filter: grayscale(.85) brightness(.55); box-shadow: 0 3px 0 #2b2b2b, 0 6px 10px rgba(0,0,0,.3); }
#gameShell .uno-button.ready { animation: unoReady 1s ease-in-out infinite; filter: none; }
#gameShell .uno-button.ready:active { transform: rotate(-6deg) scale(.92); }
#gameShell .uno-button.armed { background: radial-gradient(circle at 40% 30%, #3ee07f, #0e8a43 72%); color: #fff; -webkit-text-stroke: 1px #053b1c; text-shadow: 0 2px 0 #053b1c; box-shadow: 0 5px 0 #064d24, 0 0 22px rgba(62,224,127,.55); filter: none; opacity: 1; }
@keyframes unoReady { 0%, 100% { transform: rotate(-6deg) scale(1); box-shadow: 0 5px 0 #6d0c07, 0 0 0 0 rgba(255,90,76,.7); } 50% { transform: rotate(4deg) scale(1.1); box-shadow: 0 5px 0 #6d0c07, 0 0 0 12px rgba(255,90,76,0); } }
#gameShell #drawButton { background: linear-gradient(180deg, #fff8e4, #f1dfb0); color: #1b140a; box-shadow: 0 4px 0 #a88f55; }
#gameShell #drawButton:disabled { opacity: .45; box-shadow: none; }
#gameShell #passButton:not([hidden]) { animation: popIn .35s var(--spring); }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }

/* Kısa ekranlar */
@media (max-height: 760px) {
  :root { --card-w: clamp(56px, 16.5vw, 80px); }
  #gameShell .opponents { min-height: 80px; }
  .seat-avatar { width: 40px; height: 40px; }
  #gameShell .hand { padding-top: 14px; }
  #gameShell .action-row .action { min-height: 42px; }
  #gameShell .uno-button { width: 84px; height: 50px; font-size: 17px; }
}
@media (max-height: 640px) {
  :root { --card-w: clamp(50px, 15vw, 70px); }
  .seat-fan { display: none; }
  #gameShell .player-heading { display: none; }
}
@media (min-width: 600px) { :root { --card-w: 92px; } }

/* ───────────── Efekt katmanı ───────────── */
.fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; contain: strict; }
.fx-card { position: fixed; z-index: 2; perspective: 700px; will-change: transform, opacity; }
.fx-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fx-card .card { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; --card-w: var(--fx-w, 70px); backface-visibility: hidden; box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.fx-flip .fx-back { transform: rotateY(180deg); }
.fx-ring { position: fixed; width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--fx-color); box-shadow: 0 0 24px var(--fx-color), inset 0 0 18px var(--fx-color); will-change: transform, opacity; }
.fx-ring.big { border-width: 8px; }
.fx-spark { position: fixed; width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 8px currentColor; will-change: transform, opacity; }
.fx-wave { position: fixed; border-radius: 50%; background: radial-gradient(circle, transparent 0 40%, var(--fx-color) 60%, transparent 72%); mix-blend-mode: screen; will-change: transform, opacity; }
.fx-burst { position: fixed; z-index: 4; display: grid; place-items: center; font: italic 1000 34px/1 "Arial Black", Inter, system-ui, sans-serif; letter-spacing: -.02em; white-space: nowrap; -webkit-text-stroke: 2px #1a0906; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 24px currentColor; will-change: transform, opacity; }
.fx-burst.danger { color: #ff4a3d; font-size: 40px; }
.fx-burst.uno { color: #ffd23f; font-size: 38px; }
.fx-burst.gold { color: #ffd23f; font-size: 48px; -webkit-text-stroke: 1px #5b3b00; }
.fx-burst.info { color: #fff4d8; font-size: 44px; }
.fx-burst.muted { color: #e8e2cf; font-size: 22px; }
.fx-burst.warn { color: #ffb23f; }
.fx-burst svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,178,63,.7)); }
.fx-confetti { position: fixed; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
.fx-swirl-card { position: fixed; --card-w: 46px; width: 46px; height: 68px; }

/* ───────────── Sonuç penceresi ───────────── */
.result-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 14px; }
.result-actions .action { min-height: 50px; }
.result-actions .action[hidden] { display: none; }
#resultDialog.victory .result-burst { animation: victoryGlow 1.8s ease-in-out infinite; }
#resultDialog[open] .modal-card { animation: resultIn .55s var(--spring); }
@keyframes resultIn { from { transform: translateY(40px) scale(.9); opacity: 0; } }
@keyframes victoryGlow { 50% { filter: drop-shadow(0 0 22px rgba(255,200,61,.9)); transform: scale(1.08) rotate(8deg); } }

/* ───────────── Lobi ve menü ───────────── */
.lobby-shell:not(.waiting-room) { padding-bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); }
.lobby-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 0; padding: 18px 18px 16px; }
.lobby-hero .hero-copy h1 { margin: 0; font-size: clamp(30px, 9vw, 42px); line-height: .95; }
.lobby-hero .presented-by { margin-top: 10px; }
.hero-player { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 16px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,244,216,.1); }
.hero-avatar { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-weight: 1000; color: #fff; border: 2px solid rgba(255,244,216,.8); background: linear-gradient(145deg, hsl(var(--avatar-hue, 30) 75% 55%), hsl(calc(var(--avatar-hue, 30) + 40) 70% 32%)); }
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-avatar[data-frame="neon"] { border-color: #43f5ff; box-shadow: 0 0 12px #43f5ffaa; }
.hero-avatar[data-frame="gold"] { border-color: #ffd23f; box-shadow: 0 0 12px #ffd23faa; }
.hero-avatar[data-frame="diamond"] { border-color: #c9f4ff; box-shadow: 0 0 14px #9be7ff, 0 0 0 2px #6bc7ff; }
.hero-player > div { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.hero-player strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-player small { font-size: 11px; font-weight: 1000; color: var(--gold); letter-spacing: .06em; }
.hero-xp { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.hero-xp i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4ff0a0, #ffd23f); transition: width .8s var(--ease-smooth); }
.lobby-hero .floating-cards { position: relative; grid-row: 1; grid-column: 2; width: 112px; height: 96px; inset: auto; }
.lobby-hero .floating-cards .fc { position: absolute; top: 8px; left: 30px; width: 50px; height: 74px; display: grid; place-items: center; border-radius: 9px; border: 3px solid #fffaf0; font: italic 1000 22px/1 "Arial Black", Inter, sans-serif; color: #fff; -webkit-text-stroke: 1px #0006; box-shadow: 0 10px 18px rgba(0,0,0,.4); animation: heroFloat 4.5s ease-in-out infinite; }
.lobby-hero .floating-cards .fc-red { background: radial-gradient(circle at 30% 20%, #ff6a5e, var(--red) 50%, var(--red-deep)); transform: rotate(-16deg) translateX(-26px); }
.lobby-hero .floating-cards .fc-blue { background: radial-gradient(circle at 30% 20%, #5aa2ff, var(--blue) 50%, var(--blue-deep)); transform: rotate(2deg); animation-delay: -1.5s; }
.lobby-hero .floating-cards .fc-wild { background: conic-gradient(from 45deg, var(--red) 0 25%, var(--blue) 0 50%, var(--green) 0 75%, var(--yellow) 0); transform: rotate(18deg) translateX(28px); animation-delay: -3s; }
@keyframes heroFloat { 50% { translate: 0 -8px; } }
.lobby-shell[data-tab]:not([data-tab="create"]):not([data-tab="join"]) .lobby-hero .floating-cards,
.lobby-shell[data-tab]:not([data-tab="create"]):not([data-tab="join"]) .lobby-hero .hero-copy { display: none; }
.lobby-shell[data-tab]:not([data-tab="create"]):not([data-tab="join"]) .lobby-hero { padding: 10px 12px; }

/* Alt gezinme çubuğu */
.lobby-shell:not(.waiting-room) .bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 20px), 520px); height: var(--nav-h); margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  border-radius: 22px; background: rgba(9, 28, 22, .86); border: 1px solid rgba(255,244,216,.12); box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.lobby-shell.waiting-room .bottom-nav { display: none; }
.bottom-nav button { min-width: 0; height: 100%; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 16px; background: transparent; color: rgba(255,244,216,.62); font-size: 10.5px; font-weight: 900; letter-spacing: .01em; white-space: nowrap; transition: color .25s, background .25s, transform .25s var(--spring); box-shadow: none; }
.bottom-nav button.active { color: #1a1408; background: linear-gradient(180deg, #ffe07a, #ffc23d); box-shadow: 0 6px 16px rgba(255,200,61,.35); }
.bottom-nav button:active { transform: scale(.92); }
.bottom-nav .nav-icon { display: grid; place-items: center; width: 24px; height: 24px; font-size: 0; }
.bottom-nav .nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .nav-icon svg .fill { fill: currentColor; stroke: none; }

/* Oyna paneli */
.quick-actions { display: none; }
.quick-actions.active { display: grid; gap: 10px; margin-bottom: 4px; }
.quick-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; border-radius: 20px; border: 1px solid rgba(255,244,216,.12); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); color: #fff; cursor: pointer; transition: transform .2s var(--spring), background .25s; }
.quick-card:active { transform: scale(.97); }
.quick-card b { display: block; font-size: 16px; font-weight: 1000; }
.quick-card small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,244,216,.62); }
.quick-card > i { margin-left: auto; font-style: normal; font-size: 26px; opacity: .6; }
.quick-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 20px; font-weight: 1000; background: rgba(255,244,216,.08); }
.quick-bots { padding: 18px 16px; background: linear-gradient(135deg, #ffd23f 0%, #ffb21c 55%, #ff8a1c 100%); color: #1a1006; border: 0; box-shadow: 0 8px 0 #a35b06, 0 16px 30px rgba(255,160,40,.3); }
.quick-bots small { color: rgba(26,16,6,.7); }
.quick-bots .quick-icon { background: rgba(255,255,255,.35); }
.quick-bots.loading { pointer-events: none; opacity: .75; }
.quick-bots.loading .quick-icon { animation: dirSpin 1s linear infinite; }
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-card.compact { padding: 12px; gap: 10px; }
.quick-card.compact .quick-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 16px; border-radius: 12px; }
.quick-card.compact b { font-size: 14px; }
.quick-card.compact small { font-size: 11px; }
.section-label { display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; color: rgba(255,244,216,.55); font-size: 11px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,244,216,.12); }
.back-link { justify-self: start; margin-bottom: 4px; padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(255,244,216,.08); color: var(--cream); font-weight: 900; cursor: pointer; }

/* Okunabilir yazı boyutları (eski 7–9 px değerlerin yerine) */
.lobby-panel .field > span, .lobby-panel .toggle-field small, .choice-card small { font-size: 12px; }
.player-list strong { font-size: 14px; }
.player-list small, .you-badge, .kick-button { font-size: 11px; }
.room-list-item span { font-size: 12px; }

/* Desteler: seçili olmayan destede "Seçili" yazmaz */
.deck-skin-option:not(.selected) .deck-selected { visibility: hidden; }
.deck-skin-option .deck-preview .skin-card { font-weight: 1000; }
.deck-skin-option.selected { box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(255,200,61,.2); }

/* Profil */
.profile-stats.secondary { margin-top: 8px; }
.profile-stats.secondary article strong { font-size: 22px; }
.reward-road { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.reward-road::-webkit-scrollbar { display: none; }
.reward-step { position: relative; flex: 0 0 96px; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,244,216,.1); opacity: .7; }
.reward-step b { font-size: 11px; font-weight: 1000; color: rgba(255,244,216,.7); }
.reward-step b::before { content: 'SV. '; }
.reward-step span { font-size: 22px; }
.reward-step small { font-size: 11px; line-height: 1.2; color: rgba(255,244,216,.8); }
.reward-step.unlocked { opacity: 1; background: linear-gradient(160deg, rgba(255,210,63,.18), rgba(255,210,63,.04)); border-color: rgba(255,210,63,.45); }
.reward-step.unlocked b { color: var(--gold); }
.title-picker .locked-title { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: rgba(255,244,216,.42); border: 1px dashed rgba(255,244,216,.18); }
.task-list article em { display: block; margin-top: 4px; font-size: 11px; font-style: normal; font-weight: 900; color: rgba(255,244,216,.6); }
.task-list article.complete { border-color: rgba(79,240,160,.4); background: linear-gradient(160deg, rgba(79,240,160,.12), transparent); }

@media (prefers-reduced-motion: reduce) {
  .seat.active .avatar, #gameShell .uno-button.ready, #gameShell .draw-pile.can-draw .card, #gameShell .play-direction span, .lobby-hero .floating-cards .fc { animation: none !important; }
}

/* v42 düzeltmeleri */
#gameShell .action-row .uno-button { border-radius: 50%; padding: 0; }
#gameShell .hand:not(.scrolling) { overflow: visible; }
#gameShell .piles { --card-w: clamp(66px, 20vw, 100px); }
.card[data-card-theme="classic"][data-card-type="custom"] .oval,
.card[data-card-theme="classic"][data-card-type="shuffle"] .oval { inset: 16% 10%; border-radius: 50%; background: conic-gradient(from 20deg, var(--red) 0 25%, var(--blue) 0 50%, var(--green) 0 75%, var(--yellow) 0); box-shadow: 0 0 0 3px #fffaf0, 0 4px 8px rgba(0,0,0,.4); transform: rotate(22deg); }
.card[data-card-theme="classic"][data-card-type="custom"] .oval > span,
.card[data-card-theme="classic"][data-card-type="shuffle"] .oval > span { transform: rotate(-22deg); }
.card[data-card-theme="classic"][data-card-type="custom"] .oval svg,
.card[data-card-theme="classic"][data-card-type="shuffle"] .oval svg { width: 66%; height: 66%; color: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
.card[data-card-theme="classic"].wild-card .corner { color: #fff; }
.card[data-card-theme="classic"].wild-card .corner svg { width: calc(var(--card-w) * .2); height: calc(var(--card-w) * .2); }
.lobby-hero .hero-copy h1 { font-size: clamp(28px, 8.2vw, 38px); }
.lobby-hero .hero-copy h1 em { white-space: nowrap; }
.lobby-hero .floating-cards .fc { font-size: 0; }
.lobby-hero .floating-cards .fc-blue { font-size: 22px; }
.lobby-shell:not(.waiting-room) .lobby-panel { padding-top: 12px; }
.seat-ring { -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
#gameShell .opponents { padding-top: 16px; }
#gameShell .piles { --card-w: clamp(64px, min(21vw, 12.5vh), 112px); }
#gameShell .turn-timer { width: 30px; height: 30px; color: #1a1408; background: conic-gradient(currentColor var(--turn-progress), rgba(0,0,0,.14) 0); }
#gameShell .turn-banner:not(.your-turn) .turn-timer { color: var(--gold); background: conic-gradient(currentColor var(--turn-progress), rgba(255,255,255,.14) 0); }
#gameShell .turn-timer::before { width: 23px; height: 23px; background: #fff3cf; filter: none; }
#gameShell .turn-banner:not(.your-turn) .turn-timer::before { background: #0c241d; }
#gameShell .turn-timer b { font-size: 11px; font-weight: 1000; color: #1a1408; }
#gameShell .turn-banner:not(.your-turn) .turn-timer b { color: #fff4d8; }
#gameShell .turn-timer.urgent { color: #e8382f; }
#gameShell .turn-timer.urgent b { color: #e8382f; }
/* Kurallar: gerçek mini kartlar */
.rule-list article { align-items: center; }
.rule-list .rule-card { --card-w: 44px; flex: 0 0 44px; width: 44px; height: 65px; border-width: 2.5px; box-shadow: 0 4px 10px rgba(0,0,0,.35); transform: rotate(-4deg); }
.rule-list .rule-card .corner { font-size: 8px; }
/* Renk seçimi: renkli karolar */
#colorDialog .color-grid button { min-height: 76px; border: 0; color: #fff; font-size: 17px; font-weight: 1000; border-radius: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.3); transition: transform .2s var(--spring); }
#colorDialog .color-grid button:active { transform: scale(.94); }
#colorDialog .color-grid button span { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.85); }
#colorDialog .color-grid [data-color="red"] { background: radial-gradient(circle at 30% 20%, #ff6a5e, var(--red) 55%, var(--red-deep)); }
#colorDialog .color-grid [data-color="yellow"] { background: radial-gradient(circle at 30% 20%, #ffe066, var(--yellow) 55%, var(--yellow-deep)); color: #2a1d00; text-shadow: none; }
#colorDialog .color-grid [data-color="green"] { background: radial-gradient(circle at 30% 20%, #4fe08f, var(--green) 55%, var(--green-deep)); }
#colorDialog .color-grid [data-color="blue"] { background: radial-gradient(circle at 30% 20%, #5aa2ff, var(--blue) 55%, var(--blue-deep)); }
/* Profil sekmesinde kahraman alanı tekrar etmesin */
.lobby-shell[data-tab="profile"] .lobby-hero { display: none; }
/* Unvan çipleri */
.title-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.title-picker button, .title-picker .locked-title { height: 36px; min-height: 0; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; }
/* Gerçek kartlı deste önizlemeleri */
.deck-preview.real-preview { position: relative; display: grid; place-items: center; }
.deck-preview.real-preview .card { --card-w: 50px; position: absolute; width: 50px; height: 74px; border-width: 3px; box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.deck-preview.real-preview .card:nth-child(1) { transform: translateX(-34px) rotate(-14deg); }
.deck-preview.real-preview .card:nth-child(2) { transform: translateY(-4px); z-index: 2; }
.deck-preview.real-preview .card:nth-child(3) { transform: translateX(34px) rotate(14deg); z-index: 3; }
.deck-skin-option:not(:disabled):active .deck-preview.real-preview .card:nth-child(3) { transform: translateX(38px) rotate(20deg); }
#gameShell .hand, #gameShell .piles { direction: ltr; }
.bottom-nav button { white-space: normal; line-height: 1.05; text-align: center; overflow: hidden; font-size: 10px; } .bottom-nav button > .nav-icon { flex: 0 0 auto; }
/* Sonuç penceresi küçük ekranda kaydırılabilir */
#resultDialog .result-card { max-height: calc(var(--uno-viewport-height, 100dvh) - 20px); overflow-y: auto; overscroll-behavior: contain; }
#resultDialog .result-actions { position: sticky; bottom: -1px; padding-top: 10px; background: linear-gradient(180deg, transparent, #0f241d 30%); }
@media (max-height: 700px) {
  #resultDialog .result-burst { transform: scale(.7); margin: -14px auto -10px; }
  #resultDialog .result-highlights { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #resultDialog .result-highlights article { padding: 8px 4px; }
  #resultDialog .result-highlights strong { font-size: 18px; }
}
.result-avatar { background: linear-gradient(145deg, #4f7cff, #7b3fd6); }
/* Kart yüksekliği her bağlamda kendi genişliğinden hesaplanır */
#gameShell .piles, #gameShell .hand, .fx-card, .fx-swirl-card { --card-h: calc(var(--card-w) * 1.48); }
#gameShell .hand { padding-bottom: calc(6px + var(--fan-max, 0px)); }
#gameShell .action-row .action { white-space: nowrap; }
@media (max-width: 380px) { #gameShell .action-row .action { font-size: 14px; } }