@import url("./assets/fonts/fonts.css");

/* ===== Clay / Soft 3D UI ===== */
:root {
    --bg: #e8e0d8;
    --surface: #f5efe8;
    --surface-2: #ece5dc;
    --shadow-out: 6px 6px 14px #c8c0b8, -6px -6px 14px #ffffff;
    --shadow-in: inset 4px 4px 8px #c8c0b8, inset -4px -4px 8px #ffffff;
    --shadow-btn: 3px 3px 8px #c8c0b8, -3px -3px 8px #ffffff;
    --accent: #e05a2b;
    --accent-2: #f47c4e;
    --green: #2ebd5e;
    --green-bg: #d4f5dc;
    --red: #e53e3e;
    --red-bg: #fde8e8;
    --orange: #dd8800;
    --orange-bg: #fef3d8;
    --blue: #3b82f6;
    --purple: #7c3aed;
    --text: #2d2a26;
    --text-2: #6b6560;
    --text-3: #a09890;
    --radius: 20px;
    --radius-sm: 12px;
    --font: 'Baloo 2', 'Noto Sans SC', sans-serif;
    --mono: 'Fira Code', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
}

body { display: flex; }

.hidden { display: none !important; }

/* ===== Panels ===== */
.panel { height: 100vh; display: flex; flex-direction: column; }

.panel-game {
    flex: 1;
    padding: 1.5rem 2rem;
    gap: 1.2rem;
    overflow: hidden;
}

.panel-lb {
    width: 340px;
    background: var(--surface);
    box-shadow: -4px 0 20px rgba(0,0,0,0.04);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* ===== Top bar ===== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
}

.nick-area { display: flex; align-items: center; }

.nick-show {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-btn);
}

.nick-emoji { font-size: 1.1rem; }
.nick-text { font-weight: 700; font-size: 0.9rem; }

.nick-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.nick-btn:hover { opacity: 1; }

.nick-form {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nick-input {
    padding: 0.4rem 0.7rem;
    border-radius: 10px;
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow-in);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.85rem;
    width: 130px;
    outline: none;
}

.form-btn {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow-btn);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.form-btn.ok:hover { background: var(--green-bg); color: var(--green); }
.form-btn.no:hover { background: var(--red-bg); color: var(--red); }

/* ===== Stats ===== */
.stats-bar {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.sbox {
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-out);
    text-align: center;
}

.sbox-num {
    font-family: var(--mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}

.sbox-label {
    font-size: 0.65rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.1rem;
}

/* ===== Reaction Zone ===== */
.zone-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.zone {
    width: 100%;
    max-width: 480px;
    height: 250px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background: var(--surface);
    box-shadow: var(--shadow-out);
    transition: all 0.25s ease;
    position: relative;
}

.zone:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.zone:active {
    box-shadow: var(--shadow-in);
    transform: scale(0.98);
}

.zs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.zs-emoji { font-size: 3.5rem; line-height: 1; }
.zs-h { font-size: 1.5rem; font-weight: 800; }
.zs-p { font-size: 0.85rem; color: var(--text-2); }

/* Wait */
.zone.z-wait {
    background: var(--red-bg);
    box-shadow: inset 4px 4px 12px #e8c0c0, inset -4px -4px 12px #fff8f8;
}
.zone.z-wait .zs-h { color: var(--red); }

/* Go */
.zone.z-go {
    background: var(--green-bg);
    box-shadow: inset 4px 4px 12px #b0ddb8, inset -4px -4px 12px #f0fff4, 0 0 30px rgba(46, 189, 94, 0.2);
}
.zone.z-go .zs-h { color: var(--green); font-size: 2rem; }

/* Early */
.zone.z-early {
    background: var(--orange-bg);
    box-shadow: inset 4px 4px 12px #e8d8b0, inset -4px -4px 12px #fffef8;
}
.zone.z-early .zs-h { color: var(--orange); }

/* Result */
.zone.z-result {
    background: linear-gradient(135deg, #f5efe8, #ece0f8);
    box-shadow: var(--shadow-out);
}

.res-ms {
    font-family: var(--mono);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.res-unit {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-top: -0.2rem;
}

.res-tag {
    margin-top: 0.5rem;
    padding: 0.25rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.tag-godlike { background: #ede9fe; color: var(--purple); }
.tag-excellent { background: var(--green-bg); color: #1a7a3a; }
.tag-good { background: #dbeafe; color: #1d4ed8; }
.tag-average { background: var(--orange-bg); color: #92600a; }
.tag-slow { background: var(--red-bg); color: var(--red); }

/* Animations */
.blink { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.08)} }

.bounce { animation: bounce 0.4s ease infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.wiggle { animation: wiggle 0.5s ease; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }

/* ===== Recent ===== */
.recent {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-height: 26px;
}

.chip {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 2px 2px 5px #c8c0b8, -2px -2px 5px #ffffff;
    color: var(--text-2);
    animation: pop 0.2s ease-out;
}
.chip.c-fast { color: var(--green); }
.chip.c-good { color: var(--blue); }
.chip.c-avg { color: var(--orange); }
.chip.c-slow { color: var(--red); }

@keyframes pop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }

/* ===== Leaderboard ===== */
.lb-top {
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.lb-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.lb-meta {
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: 0.15rem;
}

.refresh-btn {
    margin-top: 0.6rem;
    padding: 0.35rem 0.9rem;
    border-radius: 10px;
    border: none;
    background: var(--surface-2);
    box-shadow: var(--shadow-btn);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}
.refresh-btn:hover {
    color: var(--accent);
    box-shadow: var(--shadow-in);
}

.lb-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d0c8c0 transparent;
}

.lb-list::-webkit-scrollbar { width: 5px; }
.lb-list::-webkit-scrollbar-track { background: transparent; }
.lb-list::-webkit-scrollbar-thumb { background: #d0c8c0; border-radius: 4px; }

.lb-row {
    display: grid;
    grid-template-columns: 34px 1fr 68px;
    align-items: center;
    padding: 0.55rem 0.4rem;
    border-radius: 10px;
    margin-bottom: 0.25rem;
    transition: background 0.1s;
}

.lb-row:hover { background: var(--surface-2); }

.lb-rank {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
}

.lb-row:nth-child(1) .lb-rank { color: #d4a012; font-size: 1.05rem; }
.lb-row:nth-child(2) .lb-rank { color: #8a8a8a; font-size: 0.95rem; }
.lb-row:nth-child(3) .lb-rank { color: #b87333; font-size: 0.95rem; }

.lb-info { overflow: hidden; }

.lb-name {
    font-size: 0.82rem;
    font-weight: 700;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-date {
    font-size: 0.6rem;
    color: var(--text-3);
}

.lb-time {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green);
    text-align: right;
}

.lb-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--text-3);
    font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    body { flex-direction: column; }
    html, body { height: auto; overflow: auto; }
    .panel-game { height: auto; padding: 1.2rem 1rem; }
    .panel-lb { width: 100%; height: 380px; }
    .zone { height: 200px; }
    .res-ms { font-size: 2.5rem; }
    .stats-bar { gap: 0.5rem; }
    .sbox { padding: 0.5rem 0.8rem; }
}