/* ============================================================
   TicTacToe 3D - ttt3d.css
   Nur das, was Tailwind-Klassen nicht sinnvoll abdecken: Spielfeld,
   Spielerfarben, Lobby-Zeilen und die Animationen fuer die
   Startspieler-Auslosung.
   ============================================================ */

/* Tailwind-Klassen wie .grid oder .flex setzen display und schlagen dabei
   das [hidden]-Attribut aus dem Browser-Stylesheet. Deshalb hier explizit. */
[hidden] { display: none !important; }

:root {
    --p0: #38bdf8;  /* Sitz 1 */
    --p1: #fbbf24;  /* Sitz 2 */
    --p2: #34d399;  /* Sitz 3 */
}

.seat-0 { --seat: var(--p0); }
.seat-1 { --seat: var(--p1); }
.seat-2 { --seat: var(--p2); }

.seat-dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--seat, #64748b);
    box-shadow: 0 0 8px var(--seat, #64748b);
    flex: none;
}

/* ---------------- Spielfeld ---------------- */

.ttt-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 640px) {
    .ttt-levels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.ttt-level {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    padding: 10px;
}
.ttt-level-title {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #64748b;
    margin-bottom: 8px; text-align: center;
}

.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.ttt-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    font-size: clamp(18px, 5vw, 34px);
    font-weight: 900;
    line-height: 1;
    color: #475569;
    transition: background .12s, border-color .12s, transform .08s;
    user-select: none;
}

/* Nur wenn man selbst am Zug ist, fuehlt sich das Feld anklickbar an. */
.ttt-cell.playable { cursor: pointer; }
.ttt-cell.playable:hover { background: #334155; border-color: #64748b; }
.ttt-cell.playable:active { transform: scale(.94); }
.ttt-cell:disabled { cursor: default; }

.ttt-cell.taken { background: #0b1220; }
.ttt-cell.taken.p0 { color: var(--p0); border-color: rgba(56, 189, 248, .45); }
.ttt-cell.taken.p1 { color: var(--p1); border-color: rgba(251, 191, 36, .45); }
.ttt-cell.taken.p2 { color: var(--p2); border-color: rgba(52, 211, 153, .45); }

/* Zuletzt gesetzter Stein */
.ttt-cell.last::after {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    opacity: .8;
    pointer-events: none;
}

/* Feld gehoert zu mindestens einer gewerteten Dreierreihe */
.ttt-cell.scored { box-shadow: inset 0 0 0 2px currentColor, 0 0 12px -2px currentColor; }

.ttt-cell.flash { animation: ttt-flash .9s ease-out; }
@keyframes ttt-flash {
    0%   { transform: scale(1);    filter: brightness(1); }
    35%  { transform: scale(1.14); filter: brightness(2.2); }
    100% { transform: scale(1);    filter: brightness(1); }
}

.ttt-cell.fresh { animation: ttt-pop .25s ease-out; }
@keyframes ttt-pop {
    from { transform: scale(.5); opacity: .2; }
    to   { transform: scale(1);  opacity: 1; }
}

/* ---------------- Spielerleiste ---------------- */

.ttt-player {
    display: flex; align-items: center; gap: 8px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 14px;
    padding: 8px 12px;
    min-width: 0;
}
.ttt-player.active {
    border-color: var(--seat, #475569);
    background: #111c33;
    box-shadow: 0 0 0 1px var(--seat, #475569), 0 0 18px -6px var(--seat, #475569);
}
.ttt-player.gone { opacity: .45; }
.ttt-player .sym { font-size: 18px; font-weight: 900; color: var(--seat); line-height: 1; }
.ttt-player .nm  { font-size: 13px; font-weight: 700; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttt-player .pts { margin-left: auto; font-size: 15px; font-weight: 900; color: var(--seat); font-variant-numeric: tabular-nums; }

.pts.bump { animation: ttt-bump .5s ease-out; }
@keyframes ttt-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

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

.lobby-row {
    display: flex; align-items: center; gap: 10px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 14px;
    padding: 10px 12px;
}
.lobby-row.me { border-color: #1d4ed8; background: #0d1a33; }

.slot {
    display: flex; align-items: center; gap: 8px;
    border-radius: 14px; padding: 10px 12px;
    border: 1px dashed #334155; background: #0b1220;
    color: #64748b; font-size: 13px;
}
.slot.filled { border-style: solid; border-color: #1e293b; color: #e2e8f0; }

.btn {
    padding: 8px 14px; border-radius: 12px;
    font-size: 13px; font-weight: 700;
    background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
    transition: background .15s, transform .08s;
    white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #334155; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.btn.primary:hover:not(:disabled) { background: #3b82f6; }
.btn.gold { background: #f59e0b; border-color: #d97706; color: #1c1917; }
.btn.gold:hover:not(:disabled) { background: #fbbf24; }
.btn.danger { background: #7f1d1d; border-color: #991b1b; color: #fecaca; }
.btn.danger:hover:not(:disabled) { background: #991b1b; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* Glocke in der Kopfzeile: an = farbig, aus/blockiert = ausgegraut */
.btn-bell {
    flex: none;
    line-height: 1;
    font-size: 13px;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .6);
    border: 1px solid #334155;
    filter: grayscale(1);
    opacity: .5;
    transition: opacity .15s, filter .15s, border-color .15s;
}
.btn-bell:hover { opacity: .8; }
.btn-bell.on { filter: none; opacity: 1; border-color: #0284c7; }
.btn-bell.blocked { cursor: not-allowed; }

/* ---------------- Overlays ---------------- */

.ttt-overlay {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 23, .88);
    backdrop-filter: blur(3px);
    padding: 16px;
}
.ttt-overlay[hidden] { display: none; }

.ttt-card {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 24px;
    width: 100%; max-width: 460px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

/* Auslosung des Startspielers */
.roulette-name {
    font-size: clamp(24px, 7vw, 40px);
    font-weight: 900;
    text-align: center;
    color: var(--seat, #e2e8f0);
    line-height: 1.15;
    word-break: break-word;
    transition: color .1s;
}
.roulette-name.settled { animation: ttt-settle .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ttt-settle {
    0%   { transform: scale(.7); opacity: .4; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------------- Chat ---------------- */

.ttt-chat-log {
    height: 176px;
    overflow-y: auto;
    overflow-wrap: anywhere;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-line { font-size: 12px; line-height: 1.45; color: #cbd5e1; }
.chat-line .chat-name { font-weight: 700; color: var(--seat, #7dd3fc); }
.chat-line .chat-name::after { content: ':'; color: #475569; }

/* eigene Nachrichten dezent hinterlegen */
.chat-line.me {
    background: rgba(30, 41, 59, .65);
    border-radius: 6px;
    padding: 1px 6px;
    margin: 0 -6px;
}

.chat-empty { font-size: 11px; color: #64748b; margin: auto 0; text-align: center; }

.ttt-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 12px;
    color: #e2e8f0;
}
.ttt-chat-input::placeholder { color: #475569; }
.ttt-chat-input:focus { outline: none; border-color: #0284c7; }
.ttt-chat-input:disabled { opacity: .5; }

/* nur fuer Screenreader */
.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;
}

/* ---------------- Meldungen ---------------- */

.ttt-toast {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 12px; padding: 10px 12px;
    font-size: 12px; color: #e2e8f0;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9);
    animation: ttt-toast-in .25s ease-out;
}
.ttt-toast.warn { border-color: #b45309; background: #2a1a05; color: #fed7aa; }
@keyframes ttt-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.log-line { font-size: 11px; color: #94a3b8; padding: 3px 0; border-bottom: 1px solid #1e293b; }
.log-line:last-child { border-bottom: 0; }
.log-line b { color: var(--seat, #e2e8f0); }

/* ---------------- Bewegung reduzieren ---------------- */

@media (prefers-reduced-motion: reduce) {
    .ttt-cell.flash,
    .ttt-cell.fresh,
    .pts.bump,
    .roulette-name.settled,
    .ttt-toast { animation: none !important; }
    .ttt-cell, .btn { transition: none !important; }
}