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

:root{

--bg:#0F1412;
--card:#1B221F;

--primary:#D6C29A;
--primary-light:#F5E9C8;

--accent:#5E8266;

--text:#F7F3ED;
--text-soft:#98A393;

--success:#6E9B76;
--danger:#9A5B5B;

--border:rgba(214,194,154,.14);

}

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

body{

min-height:100vh;

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

background:
radial-gradient(
circle at top,
rgba(94,130,102,.18),
transparent 45%
),
linear-gradient(
180deg,
#162019,
#0F1412,
#0B100D
);

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:20px;
margin-bottom:28px;

}

.logo{

width:125px;
height:auto;
margin-bottom:12px;

}

.brand-text{

font-family:'Cormorant Garamond',serif;

font-size:62px;

font-weight:600;

letter-spacing:7px;

color:var(--primary);

line-height:1;

white-space:nowrap;

}

.brand-sub{

margin-top:10px;

font-size:13px;

letter-spacing:8px;

font-weight:600;

color:var(--accent);

text-transform:uppercase;

}

/* Difficulty */

.difficulty{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:rgba(94,130,102,.12);

border:1px solid rgba(94,130,102,.35);

color:#B7D3BD;

font-size:12px;

font-weight:700;

letter-spacing:1px;

}

/* Toast */

#toast{

position:fixed;

top:95px;

left:50%;

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

opacity:0;

background:#202723;

padding:13px 22px;

border-radius:999px;

font-size:13px;

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

backdrop-filter:blur(18px);

transition:.3s;

z-index:999;

}

#toast.show{

opacity:1;

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

}

/* Card */

#app{

width:100%;
max-width:540px;

background:rgba(27,34,31,.95);

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

border-radius:30px;

padding:34px;

backdrop-filter:blur(20px);

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

}

/* TEXT */

h2{

font-size:34px;

font-weight:700;

text-align:center;

margin-bottom:14px;

color:var(--primary);

}

h3{

font-size:30px;

font-weight:600;

line-height:1.45;

margin-bottom:28px;

text-align:center;

}

p{

font-size:15px;

line-height:1.8;

color:var(--text-soft);

text-align:center;

}

/* INPUT */

input{

width:100%;

padding:18px;

margin-top:15px;

background:#202823;

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

border-radius:18px;

outline:none;

color:white;

font-size:15px;

transition:.25s;

}

input:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(214,194,154,.08);

}

/* BUTTON */

button{

width:100%;

padding:18px;

margin-top:16px;

background:#202823;

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

border-radius:18px;

color:var(--text);

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

button:hover{

background:#263029;

border-color:var(--primary);

transform:translateY(-2px);

box-shadow:0 8px 24px rgba(214,194,154,.12);

}

button:active{

transform:scale(.98);

}

/* Answers */

.correct{

background:var(--success)!important;
border:none!important;

}

.wrong{

background:var(--danger)!important;
border:none!important;

}

/* Progress */

.progress-text{

font-size:13px;

color:var(--text-soft);

margin-bottom:12px;

text-align:center;

}

.progress-bar{

height:9px;

background:#222B25;

border-radius:999px;

overflow:hidden;

margin-bottom:28px;

}

.progress-fill{

height:100%;

background:linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

border-radius:999px;

transition:.5s;

}

/* Reward */

.reward{

font-size:40px;

font-weight:700;

font-family:'Cormorant Garamond',serif;

color:var(--primary);

text-align:center;

margin:16px 0;

}

#timer{

font-size:28px;

font-weight:700;

text-align:center;

margin-top:16px;

color:var(--primary);

}

.result-time{

font-size:11px;

text-align:right;

margin-top:16px;

color:#7E897F;

}

/* Mobile */

@media(max-width:480px){

.logo{

width:105px;

}

.brand-text{

font-size:46px;

letter-spacing:4px;

}

.brand-sub{

font-size:11px;

letter-spacing:6px;

}

#app{

padding:24px;

}

h2{

font-size:26px;

}

h3{

font-size:22px;

}

}