@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{

--bg:#0e0e10;
--card:#17181b;

--accent:#7a1d2b;
--accent-soft:rgba(122,29,43,.15);

--text:#ffffff;
--text-soft:#9b9b9b;

--success:#2e7d32;
--danger:#c0392b;

--border:rgba(255,255,255,.06);

}

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

body{

min-height:100vh;

font-family:'Inter',sans-serif;

background:
radial-gradient(
circle at top,
rgba(122,29,43,.18),
transparent 45%
),
linear-gradient(
180deg,
#0e0e10,
#121214,
#0e0e10
);

display:flex;

flex-direction:column;

align-items:center;

padding:20px;

color:var(--text);

overflow-x:hidden;

}

/* HEADER */

.brand{

display:flex;

flex-direction:column;

align-items:center;

margin-top:10px;

margin-bottom:25px;

}

.logo{

width:140px;

height:auto;

margin-bottom:6px;

}

.brand-text{

font-family:'Cinzel',serif;

font-size:58px;

font-weight:600;

letter-spacing:4px;

line-height:1;

white-space:nowrap;

}

.brand-sub{

margin-top:10px;

font-size:14px;

letter-spacing:10px;

font-weight:600;

color:var(--accent);

}

.difficulty{

display:inline-block;

padding:6px 12px;

border-radius:999px;

background:rgba(122,29,43,.15);

border:1px solid rgba(122,29,43,.4);

color:#c74b5c;

font-size:12px;

font-weight:700;

letter-spacing:1px;

}

/* TOAST */

#toast{

position:fixed;

top:100px;

left:50%;

transform:
translateX(-50%)
translateY(-10px);

opacity:0;

background:#202126;

padding:12px 18px;

border-radius:999px;

font-size:13px;

border:1px solid var(--border);

transition:.3s;

z-index:999;

}

#toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);

}

/* MAIN CARD */

#app{

width:100%;

max-width:520px;

background:rgba(23,24,27,.96);

border:1px solid var(--border);

border-radius:28px;

padding:30px;

box-shadow:
0 20px 60px rgba(0,0,0,.45);

backdrop-filter:blur(15px);

}

/* TEXT */

h2{

font-size:34px;

font-weight:700;

margin-bottom:12px;

text-align:center;

}

h3{

font-size:28px;

font-weight:600;

line-height:1.5;

margin-bottom:24px;

text-align:center;

}

p{

font-size:15px;

line-height:1.7;

color:var(--text-soft);

text-align:center;

}

/* INPUT */

input{

width:100%;

padding:16px;

margin-top:14px;

background:#202126;

border:1px solid var(--border);

border-radius:18px;

outline:none;

color:white;

font-size:15px;

}

input:focus{

border-color:var(--accent);

}

/* BUTTON */

button{

width:100%;

padding:16px;

margin-top:14px;

background:#212226;

border:1px solid var(--border);

border-radius:18px;

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

button:hover{

border-color:var(--accent);

transform:translateY(-2px);

}

button:active{

transform:scale(.98);

}

/* ANSWERS */

.correct{

background:var(--success)!important;

}

.wrong{

background:var(--danger)!important;

}

/* PROGRESS */

.progress-text{

font-size:13px;

color:var(--text-soft);

margin-bottom:10px;

text-align:center;

}

.progress-bar{

height:8px;

background:#25262b;

border-radius:999px;

overflow:hidden;

margin-bottom:24px;

}

.progress-fill{

height:100%;

background:var(--accent);

border-radius:999px;

transition:.5s;

}

/* REWARD */

.reward{

font-size:40px;

font-weight:700;

color:#ffffff;

text-align:center;

margin:14px 0;

}

#timer{

font-size:28px;

font-weight:700;

text-align:center;

margin-top:15px;

color:var(--accent);

}

.result-time{

font-size:11px;

text-align:right;

color:#777;

margin-top:14px;

}

/* MOBILE */

@media(max-width:480px){

.logo{

width:140px;

}

.brand-text{

font-size:42px;

letter-spacing:2px;

}

.brand-sub{

font-size:12px;

letter-spacing:7px;

}

#app{

padding:24px;

}

h2{

font-size:24px;

}

h3{

font-size:22px;

}

}