@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:#F8F5F0;
--card:#FFFFFF;
--primary:#3B3028;
--primary-light:#8D6E4A;
--accent:#718765;
--text:#2D2A26;
--text-soft:#7A736B;
--success:#6D8C68;
--danger:#B5655A;
--border:#E8E1D7;
}

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

body{
min-height:100vh;
font-family:'Inter',sans-serif;
background:radial-gradient(circle at top,rgba(113,135,101,.08),transparent 40%),linear-gradient(180deg,#FCFBF8,#F8F5F0);
display:flex;
flex-direction:column;
align-items:center;
padding:20px;
color:var(--text);
overflow-x:hidden;
}

.brand{display:flex;flex-direction:column;align-items:center;margin:20px 0 30px;}
.logo{width:120px;height:auto;margin-bottom:12px;}
.brand-text{font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:600;letter-spacing:6px;color:var(--primary);}
.brand-sub{margin-top:10px;font-size:13px;letter-spacing:4px;font-weight:600;color:#8B7A67;text-transform:uppercase;}

.difficulty{display:inline-block;padding:8px 16px;border-radius:999px;background:#F4EFE7;border:1px solid #DDD3C7;color:#8C6B46;font-size:12px;font-weight:700;}

#toast{position:fixed;top:95px;left:50%;transform:translateX(-50%) translateY(-10px);opacity:0;background:#FFF;color:var(--primary);padding:13px 22px;border-radius:999px;font-size:13px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:.3s;z-index:999;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

#app{width:100%;max-width:540px;background:#FFF;border:1px solid var(--border);border-radius:36px;padding:34px;box-shadow:0 15px 40px rgba(0,0,0,.06);}

h2{font-size:34px;text-align:center;color:var(--primary);margin-bottom:14px;}
h3{font-size:28px;text-align:center;color:var(--text);line-height:1.45;margin-bottom:28px;}
p{font-size:15px;line-height:1.8;color:var(--text-soft);text-align:center;}

input{width:100%;padding:18px;margin-top:15px;background:#FAF8F5;border:1px solid #E5DED2;border-radius:24px;color:var(--text);outline:none;}
input:focus{border-color:#8D6E4A;box-shadow:0 0 0 3px rgba(141,110,74,.08);}

button{width:100%;padding:18px;margin-top:16px;background:#F4EFE8;border:1px solid #DDD2C6;border-radius:24px;color:var(--primary);font-weight:600;cursor:pointer;transition:.25s;}
button:hover{background:#ECE4D7;border-color:#8D6E4A;transform:translateY(-2px);box-shadow:0 10px 24px rgba(141,110,74,.10);}
button:active{transform:scale(.98);}

.correct{background:#DCE7D9!important;color:#355338!important;border:none!important;}
.wrong{background:#F3E1DD!important;color:#8A3D37!important;border:none!important;}

.progress-text{font-size:13px;color:var(--text-soft);margin-bottom:12px;text-align:center;}
.progress-bar{height:8px;background:#ECE5DB;border-radius:999px;overflow:hidden;margin-bottom:28px;}
.progress-fill{height:100%;background:linear-gradient(90deg,#8D6E4A,#B99A73);border-radius:999px;transition:.5s;}

.reward{font-size:40px;font-family:'Cormorant Garamond',serif;color:#8D6E4A;text-align:center;margin:16px 0;}
#timer{font-size:28px;font-weight:700;text-align:center;margin-top:16px;color:#8D6E4A;}
.result-time{font-size:11px;text-align:right;margin-top:16px;color:#8A8278;}

@media(max-width:480px){
.logo{width:100px;}
.brand-text{font-size:46px;letter-spacing:4px;}
.brand-sub{font-size:11px;letter-spacing:3px;}
#app{padding:24px;border-radius:28px;}
h2{font-size:26px;}
h3{font-size:22px;}
}