/* ================================================================
   Linkgo – Global Dark Theme
   ================================================================ */

:root {
    --bg:           #111827;   /* deep navy-black */
    --bg2:          #1f2937;   /* card / panel bg */
    --bg3:          #374151;   /* subtler surface */
    --primary:      #e94560;   /* hot pink-red */
    --primary-glow: rgba(233, 69, 96, 0.35);
    --accent:       #0fb1c4;   /* cyan accent */
    --success:      #22c55e;   /* green */
    --warning:      #eab308;   /* yellow */
    --danger:       #ef4444;   /* red */
    --text:         #f9fafb;
    --text-muted:   #9ca3af;
    --border:       rgba(255,255,255,0.08);
    --radius:       10px;
    --radius-lg:    16px;

    /* Letter tile colours (Wordle-style) */
    --tile-correct:        #538d4e;
    --tile-wrong-position: #b59f3b;
    --tile-not-in-word:    #3a3a3c;
    --tile-empty:          #1f2937;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover { color: var(--primary); }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.03em;
}

h1:focus { outline: none; }

/* ── Game title ──────────────────────────────────────────────── */
.game-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow 3s ease-in-out infinite;
}

/* ── Buttons ─────────────────────────────────────────────────── */
button, .btn {
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.action-btn, .create-session-btn, .start-game-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px var(--primary-glow);
    letter-spacing: 0.05em;
}

.action-btn:hover, .create-session-btn:hover, .start-game-btn:hover {
    background: #ff5a75;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px var(--primary-glow);
}

.action-btn:active, .create-session-btn:active, .start-game-btn:active {
    transform: translateY(0);
}

.action-btn:disabled, .create-session-btn:disabled, .start-game-btn:disabled {
    background: var(--bg3);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.kick-btn {
    padding: 8px 16px;
    background: var(--danger);
    color: #fff;
    font-size: 0.85rem;
    border-radius: var(--radius);
    margin-left: 12px;
    transition: background 0.2s;
}

.kick-btn:hover { background: #dc2626; }

/* ── Badges / tags ──────────────────────────────────────────── */
.round-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.04em;
}

.word-hint, .word-length-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ── Cards / panels ─────────────────────────────────────────── */
.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* ── Loading spinner ────────────────────────────────────────── */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(233, 69, 96, 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-sm {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* ── Form controls ──────────────────────────────────────────── */
select, input {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    appearance: auto;
    transition: border-color 0.2s;
}

select:focus, input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 177, 196, 0.2);
}

label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: block;
}

/* ── Disconnected player row ────────────────────────────────── */
.disconnected-player {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--radius);
    margin: 8px 0;
    font-weight: 600;
    color: var(--danger);
}

/* ── Misc labels ─────────────────────────────────────────────── */
.waiting-label {
    color: var(--text-muted);
    font-size: 1rem;
    text-align: center;
}

.waiting-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 12px;
}

.session-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    color: var(--accent);
    text-align: center;
    margin: 8px 0 4px;
}

.join-url-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    word-break: break-all;
}

/* ── Form validation ─────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: 0.85rem; }

/* ── Blazor error boundary ───────────────────────────────────── */
.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius);
    margin: 20px;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-8px); }
    40%, 80%  { transform: translateX(8px); }
}

@keyframes tileFlip {
    0%   { transform: rotateX(0); }
    50%  { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.2) drop-shadow(0 0 12px var(--primary)); }
}

@keyframes confetti-fall {
    0%   { transform: translateY(-100vh) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(100vh)  rotate(720deg); opacity: 0; }
}

/* ── Utility classes ─────────────────────────────────────────── */
.fade-in      { animation: fadeIn    0.4s ease-in; }
.slide-in-up  { animation: slideInUp 0.4s ease-out; }
.slide-in-down{ animation: slideInDown 0.4s ease-out; }
.scale-in     { animation: scaleIn  0.3s ease-out; }

/* ── Mobile touch targets ────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    button, a, input, select, textarea {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    html, body { font-size: 16px; }
}