/* Ergaenzt style.css um die Teile der Spieleplattform. */

.small-btn { padding: .3rem .6rem; font-size: .82rem; }
.link-btn { padding: .3rem 0; font-size: .85rem; text-align: left; }
.wrap { flex-wrap: wrap; }

.select {
  font: inherit; color: var(--ink);
  background: #0c1e2e; border: 1px solid var(--line);
  border-radius: 8px; padding: .4rem .6rem;
}

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; background: #1d4260;
  border: 1px solid var(--line); flex: 0 0 auto;
}
.avatar.big { width: 84px; height: 84px; }
.avatar.mid { width: 36px; height: 36px; }

.me-box { display: flex; align-items: center; gap: .45rem; font-size: .87rem; }

/* --------------------------------------------------------------- Anmeldung */

.auth-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 760px; margin: 0 auto;
}

/* ------------------------------------------------------------------- Lobby */

.game-grid {
  display: grid; gap: .8rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.game-tile {
  text-align: left; padding: .9rem;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(9, 24, 37, .5);
  cursor: pointer; color: var(--ink);
  transition: border-color .15s, background .15s, transform .1s;
}
.game-tile:hover { border-color: var(--accent); background: rgba(47,168,224,.1); transform: translateY(-2px); }
.game-tile.active { border-color: var(--accent); background: rgba(47,168,224,.16); }
.game-tile h3 { margin: .4rem 0 .2rem; }
.game-tile p { margin: 0; font-size: .84rem; color: var(--muted); }
.game-tile .icon { font-size: 1.6rem; line-height: 1; }
.game-tile .count { font-size: .78rem; color: var(--muted); margin-top: .4rem; display: block; }

.lobby-cols {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
}

.room-list { display: flex; flex-direction: column; gap: .45rem; }
.room-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(9,24,37,.45);
}
.room-row .grow { flex: 1; min-width: 0; }
.room-row .rname { font-weight: 600; font-size: .92rem; }
.room-row .rmeta { font-size: .8rem; color: var(--muted); }
.room-empty { color: var(--muted); font-size: .88rem; font-style: italic; }

.field { display: flex; flex-direction: column; gap: .25rem; }
.field label { font-size: .82rem; color: var(--muted); }
.field .row-inline { display: flex; align-items: center; gap: .5rem; }
.check-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }

/* -------------------------------------------------------------- Warteraum */

.big-code b { font-size: 1.1rem; letter-spacing: .3em; color: var(--accent); }

.player-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.player-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(9,24,37,.45);
}
.player-row.is-turn { border-color: var(--accent); background: rgba(47,168,224,.14); }
.player-row .pname { flex: 1; font-size: .9rem; }
.player-row .tag {
  font-size: .72rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem;
}
.player-row .dot { width: 9px; height: 9px; border-radius: 50%; background: #56707f; flex: 0 0 auto; }
.player-row .dot.ready { background: var(--ok); box-shadow: 0 0 6px rgba(70,185,138,.6); }
.player-row .dot.off { background: #8b5a5a; }
.player-list.compact .player-row { padding: .35rem .5rem; }

.seat-color { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.4); }

/* ------------------------------------------------------------------ Spiel */

.game-layout-2 {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: start;
}
.over-ranking { text-align: left; margin: .6rem 0 0; padding-left: 1.4rem; font-size: .9rem; }
.over-ranking li { padding: .1rem 0; }

/* ------------------------------------------------------- Vier gewinnt */

.v4-board {
  display: grid; gap: 6px; padding: 10px;
  background: linear-gradient(180deg, #1b4a6b, #123852);
  border: 1px solid var(--line); border-radius: 12px;
  width: 100%; max-width: 460px; margin: 0 auto;
}
.v4-cell {
  aspect-ratio: 1/1; border-radius: 50%;
  background: #0b1e2d; box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
  position: relative;
}
.v4-cell .disc {
  position: absolute; inset: 6%;
  border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 5px rgba(255,255,255,.25);
}
.v4-cell .disc.p1 { background: radial-gradient(circle at 35% 30%, #ffd166, #e0a021); }
.v4-cell .disc.p2 { background: radial-gradient(circle at 35% 30%, #ff8a80, #d63a2f); }
.v4-cell .disc.drop { animation: v4-drop .34s cubic-bezier(.35,1.5,.5,1); }
@keyframes v4-drop {
  0%   { transform: translateY(-320%); }
  70%  { transform: translateY(6%); }
  100% { transform: translateY(0); }
}
.v4-cell.win .disc { animation: v4-win 1s ease-in-out infinite; }
@keyframes v4-win {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,.5); }
}
.v4-board.active .v4-col:hover .v4-cell { background: #10283a; }
.v4-col { display: contents; }
.v4-ghost { position: absolute; inset: 6%; border-radius: 50%; opacity: .3; }

/* ------------------------------------------- Mensch aergere dich nicht */

.ae-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.ae-wrap svg { width: 100%; height: auto; display: block; }
.ae-piece { cursor: default; transition: transform .25s ease; }
.ae-piece.can-move { cursor: pointer; }
.ae-piece.can-move > circle:nth-of-type(1) { stroke: #fff; stroke-width: 3.5; animation: ae-pulse 1.1s ease-in-out infinite; }
@keyframes ae-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.dice {
  width: 62px; height: 62px; border-radius: 12px;
  background: linear-gradient(160deg, #f2f6fa, #c6d5e0);
  color: #16283a; font-weight: 700; font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #8fa8bb; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.dice.rolling { animation: dice-roll .55s ease; }
@keyframes dice-roll {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(200deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
.ae-controls { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; justify-content: center; }

/* ------------------------------------------------------------------- UNO */

.uno-table { display: flex; flex-direction: column; gap: .9rem; align-items: center; }
.uno-others { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.uno-other {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .55rem; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(9,24,37,.5);
  font-size: .82rem;
}
.uno-other.is-turn { border-color: var(--accent); background: rgba(47,168,224,.16); }
.uno-other .uno-badge {
  background: var(--hit); color: #fff; border-radius: 999px;
  padding: 0 .4rem; font-weight: 700; font-size: .72rem;
  animation: uno-pop .6s ease;
}
@keyframes uno-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.uno-middle { display: flex; align-items: center; gap: 1.1rem; }
.uno-card {
  --w: 66px;
  width: var(--w); height: calc(var(--w) * 1.5);
  border-radius: calc(var(--w) * 0.14);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: #1a1a1a;                      /* schwarzer Kartenrand wie im Original */
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  user-select: none; flex: 0 0 auto;
  overflow: hidden;
}
/* Farbfeld innerhalb des schwarzen Randes */
.uno-card::before {
  content: "";
  position: absolute; inset: 7%;
  border-radius: calc(var(--w) * 0.1);
  background: var(--uc, #d8342c);
}
/* Weisses Oval, schraeg - das Markenzeichen der Karte */
.uno-card::after {
  content: "";
  position: absolute;
  left: 11%; right: 11%; top: 16%; bottom: 16%;
  border-radius: 50%;
  background: #fff;
  transform: rotate(-22deg);
}
.uno-card .face {
  position: relative; z-index: 2;
  font-weight: 900; font-size: calc(var(--w) * 0.52);
  line-height: 1;
  color: var(--uc, #d8342c);
  -webkit-text-stroke: calc(var(--w) * 0.022) #1a1a1a;
  text-shadow: calc(var(--w) * 0.03) calc(var(--w) * 0.03) 0 rgba(0,0,0,.35);
  transform: rotate(-8deg);
}
.uno-card .corner {
  position: absolute; z-index: 2;
  font-weight: 800; font-size: calc(var(--w) * 0.2);
  color: #fff; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.uno-card .corner.tl { top: 9%; left: 11%; }
.uno-card .corner.br { bottom: 9%; right: 11%; transform: rotate(180deg); }

.uno-card.r { --uc: #d8342c; } .uno-card.y { --uc: #e8b923; }
.uno-card.g { --uc: #3f9e4d; } .uno-card.b { --uc: #2f6fd0; }
.uno-card.w { --uc: #2b2b2b; }
/* Farbwahlkarte: Viertelkreise im Oval */
.uno-card.w .quads { position: absolute; z-index: 2; width: 54%; height: 40%; transform: rotate(-22deg); }
.uno-card.w .quads span { position: absolute; width: 50%; height: 50%; }
.uno-card.w .quads span:nth-child(1) { background: #d8342c; left: 0; top: 0; border-radius: 100% 0 0 0; }
.uno-card.w .quads span:nth-child(2) { background: #2f6fd0; right: 0; top: 0; border-radius: 0 100% 0 0; }
.uno-card.w .quads span:nth-child(3) { background: #e8b923; left: 0; bottom: 0; border-radius: 0 0 0 100%; }
.uno-card.w .quads span:nth-child(4) { background: #3f9e4d; right: 0; bottom: 0; border-radius: 0 0 100% 0; }
.uno-card.w .face { color: #fff; -webkit-text-stroke: calc(var(--w) * 0.026) #1a1a1a; }

/* Rueckseite */
.uno-card.back::after { background: #1a1a1a; }
.uno-card.back::before { background: #1a1a1a; }
.uno-card.back .logo {
  position: absolute; z-index: 2;
  width: 74%; height: 46%;
  border-radius: 50%;
  background: #d8342c;
  transform: rotate(-22deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #fff;
}
.uno-card.back .logo b {
  color: #e8b923; font-size: calc(var(--w) * 0.26); font-weight: 900;
  transform: rotate(22deg); letter-spacing: .04em;
  -webkit-text-stroke: 1px #1a1a1a;
}
.uno-card.back .count {
  position: absolute; z-index: 3; bottom: 6%;
  font-size: calc(var(--w) * 0.15); color: #fff; opacity: .85;
}

.uno-hand { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; padding-top: .4rem; }
.uno-hand .uno-card { --w: 58px; cursor: default; transition: transform .14s, box-shadow .14s; }
.uno-hand .uno-card.playable { cursor: pointer; }
.uno-hand .uno-card.playable:hover { transform: translateY(-12px) scale(1.05); box-shadow: 0 10px 18px rgba(0,0,0,.55); }
.uno-hand .uno-card.dim { opacity: .4; filter: grayscale(.65); }
.uno-middle .uno-card { --w: 74px; }

.color-pick { display: flex; gap: .5rem; justify-content: center; margin-top: .6rem; }
.color-pick button {
  width: 44px; height: 44px; border-radius: 9px; border: 2px solid #fff; cursor: pointer;
}
.color-pick .r { background: #d8342c; } .color-pick .y { background: #e0ab16; }
.color-pick .g { background: #3f9e4d; } .color-pick .b { background: #2f6fd0; }

.uno-info { display: flex; gap: 1rem; font-size: .82rem; color: var(--muted); }

/* -------------------------------------------------------------- Rangliste */

.rank-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .6rem; }
.rank-table th, .rank-table td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
.rank-table th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.rank-table td.num, .rank-table th.num { text-align: right; }
.rank-table tr:hover td { background: rgba(47,168,224,.07); }
.rank-pos { color: var(--muted); width: 2rem; }

.profile-head { display: flex; gap: 1rem; align-items: center; margin: .8rem 0 1rem; }
.stat-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-card {
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem;
  background: rgba(9,24,37,.45);
}
.stat-card h4 { margin: 0 0 .35rem; font-size: .92rem; }
.stat-card .line { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); }
.stat-card .line b { color: var(--ink); }

@media (max-width: 900px) {
  .lobby-cols, .game-layout-2 { grid-template-columns: minmax(0, 1fr); }
}


/* ------------------------------------------------------- Schiffe versenken */

.sv-place {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
}
.sv-play {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.sv-place .board, .sv-play .board { margin: 0 auto; }
.sv-side .fleet-list { margin: 0; }

@media (max-width: 760px) {
  .sv-place { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Blackjack
   ========================================================================== */

.bj {
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
  /* Ohne eigene Breite richtet sich der Tisch nach dem Inhalt - die Plaetze
     wuerden dann untereinander statt nebeneinander stehen. */
  width: 100%;
}
.bj-round { font-size: .82rem; color: var(--muted); letter-spacing: .05em; }

.bj-dealer {
  width: 100%; max-width: 560px; text-align: center;
  padding: .8rem; border-radius: 12px;
  background: radial-gradient(circle at 50% 0%, #1d5c46, #123c2f);
  border: 1px solid #2c7a5d;
}
.bj-dealer h4 { margin: 0 0 .5rem; font-size: .92rem; color: #d6f0e2; }

.bj-seats {
  display: grid; gap: .6rem; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.bj-seat {
  padding: .55rem; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(9,24,37,.5);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.bj-seat.is-turn { border-color: var(--accent); background: rgba(47,168,224,.14); }
.bj-seat.me { box-shadow: inset 0 0 0 1px rgba(70,185,138,.5); }
.bj-name { font-size: .86rem; font-weight: 600; }
.bj-meta { display: flex; gap: .45rem; font-size: .78rem; color: var(--muted); }
.bj-chips { color: #e8c86a; }
.bj-bet {
  background: #1d4260; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 .45rem; color: var(--ink);
}
.bj-score { font-weight: 700; font-size: .9rem; color: var(--ink); }
.bj-result { font-size: .78rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.bj-result.win, .bj-result.blackjack { background: rgba(70,185,138,.25); color: #9fe6c6; }
.bj-result.lose, .bj-result.bust { background: rgba(226,87,76,.25); color: #ffb3ac; }
.bj-result.push { background: rgba(143,176,199,.2); color: var(--muted); }

/* ---- Spielkarten ---- */

.pc-hand { display: flex; gap: 3px; justify-content: center; min-height: 74px; }
.pc-hand.empty { opacity: .25; }
.pc {
  --pw: 48px;
  width: var(--pw); height: calc(var(--pw) * 1.45);
  border-radius: 6px; position: relative; flex: 0 0 auto;
  background: linear-gradient(160deg, #fff, #eceff3);
  border: 1px solid #b9c2cc;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  color: #1c2733; font-weight: 700;
  animation: pc-in .28s ease;
}
@keyframes pc-in {
  from { transform: translateY(-14px) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.pc.red { color: #cc2b2b; }
.pc-tl, .pc-br {
  position: absolute; font-size: calc(var(--pw) * 0.23); line-height: 1.05; text-align: center;
}
.pc-tl { top: 3px; left: 4px; }
.pc-br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.pc-mid {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--pw) * 0.52);
}
.pc.back {
  background: repeating-linear-gradient(45deg, #26507a, #26507a 5px, #1c3d5e 5px, #1c3d5e 10px);
  border-color: #4a7196;
}
.bj-dealer .pc { --pw: 54px; }

/* ---- Bedienung ---- */

.bj-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; }
.bj-chip-row { display: flex; gap: .35rem; }
.bj-chip {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px dashed #f0e3b0; background: #b4302a; color: #fff;
  font-weight: 800; font-size: .82rem; cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,.45);
  transition: transform .12s, box-shadow .12s;
}
.bj-chip:hover { transform: translateY(-3px); }
.bj-chip.active { box-shadow: 0 0 0 3px var(--accent), 0 3px 6px rgba(0,0,0,.45); }
.bj-chip.off { opacity: .35; cursor: not-allowed; }
.bj-chip:nth-child(2) { background: #1f6fae; }
.bj-chip:nth-child(3) { background: #2b8a4a; }
.bj-chip:nth-child(4) { background: #6c3fa0; }

/* Kennzeichnung wie "Admin" - hebt sich deutlich von den grauen Tags ab */
.tag.owner {
  color: #ffd98a;
  border-color: #b98c2e;
  background: linear-gradient(180deg, rgba(232,185,35,.28), rgba(184,140,46,.18));
  font-weight: 700;
  letter-spacing: .03em;
}