@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F1ECE4;
  --text:#2E2E2E; --text-muted:#6B6B6B;
  --primary:#E8635A; --primary-text:#FFFFFF;
  --secondary:#4D96C7; --accent:#F2B705;
  --border:#E4DED3; --shadow:rgba(0,0,0,0.06);
  --cat1:#F2A6A6; --cat2:#A6D8D2; --cat3:#C7B6E0;
  --cat4:#F2D479; --cat5:#A6C8F2; --cat6:#D9C6A3;
  --radius:1.25rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F0F11; --surface:#18181C; --surface-2:#222227;
    --text:#F3F4F6; --text-muted:#9CA3AF;
    --primary:#FF7A70; --primary-text:#111827;
    --secondary:#60A5FA; --accent:#FBBF24;
    --border:#2A2A32; --shadow:rgba(0,0,0,0.3);
    --cat1:#5C3A3A; --cat2:#2F4F4A; --cat3:#453A5C;
    --cat4:#5C4E23; --cat5:#2E3F5C; --cat6:#4A4030;
  }
}
[data-theme="dark"]{
  --bg:#0F0F11; --surface:#18181C; --surface-2:#222227;
  --text:#F3F4F6; --text-muted:#9CA3AF;
  --primary:#FF7A70; --primary-text:#111827;
  --secondary:#60A5FA; --accent:#FBBF24;
  --border:#2A2A32; --shadow:rgba(0,0,0,0.3);
  --cat1:#5C3A3A; --cat2:#2F4F4A; --cat3:#453A5C;
  --cat4:#5C4E23; --cat5:#2E3F5C; --cat6:#4A4030;
}
[data-theme="light"]{
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F1ECE4;
  --text:#2E2E2E; --text-muted:#6B6B6B;
  --primary:#E8635A; --primary-text:#FFFFFF;
  --secondary:#4D96C7; --accent:#F2B705;
  --border:#E4DED3; --shadow:rgba(0,0,0,0.06);
  --cat1:#F2A6A6; --cat2:#A6D8D2; --cat3:#C7B6E0;
  --cat4:#F2D479; --cat5:#A6C8F2; --cat6:#D9C6A3;
}

*{box-sizing:border-box;}
html{
  font-size:100%;
  scrollbar-gutter: stable;
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height:100vh; transition:background .3s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
}
.app{max-width:32rem; margin:0 auto; padding:1rem 1rem 3rem; min-height:100vh; display:flex; flex-direction:column;}

header{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0 1.25rem;}
.brand{display:flex; align-items:center; gap:.75rem;}
.brand h1{font-size:clamp(1.4rem,5vw,1.8rem); margin:0; font-weight:800; letter-spacing:-0.02em;}
.brand small{display:block; color:var(--text-muted); font-size:.85rem; font-weight:500;}
.icon-btn{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:50%; width:2.8rem; height:2.8rem; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px var(--shadow);
}
.icon-btn:hover{
  border-color: var(--text-muted);
  transform: rotate(30deg);
}

.tagline{color:var(--text-muted); font-size:1.05rem; margin:0 0 1.25rem; line-height:1.5;}

.resume-banner{
  background:var(--surface-2); border:1px dashed var(--secondary);
  border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem;
  display:none;
  box-shadow: 0 4px 12px var(--shadow);
}
.resume-banner.active{
  display:block;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-1rem);}
  to{opacity:1; transform:translateY(0);}
}
.resume-banner p{margin:0 0 .75rem; font-size:0.95rem; line-height:1.4;}

.grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:30rem){ .grid{grid-template-columns:1fr 1fr;} }

.session-card{
  border-radius:var(--radius); padding:1.4rem; cursor:pointer;
  border: 1px solid rgba(0, 0, 0, 0.05); text-align:left; color:var(--text);
  box-shadow:0 .4rem 1rem var(--shadow);
  font-family:inherit; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.session-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 .6rem 1.5rem var(--shadow);
}
.session-card:active{transform:scale(.97) translateY(-2px);}
.session-card h3{margin:0 0 .4rem; font-size:1.25rem; font-weight:700;}
.session-card p{margin:0; font-size:.875rem; opacity:.9; line-height:1.4;}

.c1{background: linear-gradient(135deg, var(--cat1) 0%, rgba(242, 166, 166, 0.8) 100%);}
.c2{background: linear-gradient(135deg, var(--cat2) 0%, rgba(166, 216, 210, 0.8) 100%);}
.c3{background: linear-gradient(135deg, var(--cat3) 0%, rgba(199, 182, 224, 0.8) 100%);}
.c4{background: linear-gradient(135deg, var(--cat4) 0%, rgba(242, 212, 121, 0.8) 100%);}
.c5{background: linear-gradient(135deg, var(--cat5) 0%, rgba(166, 200, 242, 0.8) 100%);}
.c6{background: linear-gradient(135deg, var(--cat6) 0%, rgba(217, 198, 163, 0.8) 100%);}

.screen{display:none;}
.screen.active{display:block; animation:fade .3s cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes fade{from{opacity:0; transform:translateY(.75rem);} to{opacity:1; transform:none;}}

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center; padding:1.5rem; z-index:20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn{
  from{opacity:0;} to{opacity:1;}
}
.overlay.active{display:flex;}
.sheet{
  background:var(--surface); border-radius:var(--radius);
  max-width:28rem; width:100%; padding:1.75rem; box-shadow:0 1.5rem 3rem var(--shadow);
  max-height:90vh; overflow-y:auto;
  border: 1px solid var(--border);
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleUp{
  from{transform: scale(0.95); opacity: 0;} to{transform: scale(1); opacity: 1;}
}
.sheet h2{margin-top:0; font-size:1.5rem; font-weight:800; letter-spacing: -0.01em;}
.listen-badge{
  background:var(--surface-2); border-left:.35rem solid var(--primary);
  padding:1rem 1.25rem; border-radius:.75rem; font-size:.95rem; margin:1.25rem 0;
  line-height:1.5;
}
.btn{
  display:inline-block; width:100%; text-align:center;
  background:var(--primary); color:var(--primary-text); border:none;
  padding:1rem 1.25rem; border-radius:.85rem; font-size:1rem; font-weight:700;
  cursor:pointer; margin-top:.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(232, 99, 90, 0.2);
}
.btn:hover{
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(232, 99, 90, 0.3);
}
.btn:active{
  transform: translateY(0);
}
.btn.secondary{
  background:transparent; color:var(--text); border:1.5px solid var(--border);
  box-shadow: none;
}
.btn.secondary:hover{
  background: var(--surface-2);
  border-color: var(--text-muted);
  box-shadow: 0 4px 10px var(--shadow);
}
.btn.small{padding:.6rem 1rem; font-size:.9rem; width:auto; display:inline-block; margin-right:.5rem; margin-top:0;}

.progress-label{color:var(--text-muted); font-size:.85rem; margin-bottom:.5rem; text-align:center; font-weight:600; letter-spacing: 0.05em; text-transform: uppercase;}
.progress-track{width:100%; height:.65rem; background:var(--surface-2); border-radius:1rem; overflow:hidden; margin-bottom:1.5rem; border: 1px solid var(--border);}
.progress-fill{height:100%; background:var(--primary); border-radius:1rem; transition:width .4s cubic-bezier(0.4, 0, 0.2, 1); width:0%;}

.cat-badge{
  display:inline-block; font-size:.75rem; font-weight:800;
  padding:.35rem 1rem; border-radius:1rem; margin:0 auto 1.25rem; color:var(--text);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.badge-wrap{text-align:center;}

.question-card{
  background:var(--surface); border-radius:1.5rem; padding:2.5rem 1.75rem;
  min-height:16rem; display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 .6rem 2rem var(--shadow); text-align:center; gap:1.25rem;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.question-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: var(--primary);
  opacity: 0.8;
}
.question-card .q{
  font-size:clamp(1.3rem,5.5vw,1.75rem);
  font-weight:700;
  line-height:1.4;
  color: var(--text);
  word-break: break-word;
}
.pass-hint{text-align:center; color:var(--text-muted); font-size:.9rem; margin-top:1.25rem; font-weight: 500;}

.game-actions{display:flex; gap:.75rem; margin-top:1.5rem;}
.game-actions .btn{margin-top:0;}

.bot-msg{
  background:var(--surface-2); border-radius:1.25rem; padding:1.5rem;
  text-align:center; font-size:1.05rem; line-height:1.5;
  border: 1px dashed var(--border);
}
.bot-msg strong {
  font-size: 1.15rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

select{
  width:100%; padding:.75rem; border-radius:.75rem; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:1rem; margin-top:.4rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
select:focus{
  border-color: var(--secondary);
}
.settings-row{margin-bottom:1.25rem;}
.settings-row label{font-size:.9rem; color:var(--text-muted); display:block; margin-bottom:.4rem; font-weight:600;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:.8rem;}
.toggle-row label{margin-bottom:0;}
.toggle-row input{
  width:1.4rem; height:1.4rem;
  cursor: pointer;
  accent-color: var(--primary);
}

.legend-row{display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.25rem;}
.legend-dot{
  flex-shrink:0; width:1.1rem; height:1.1rem; border-radius:50%;
  margin-top:.2rem; box-shadow:0 0 0 2px var(--surface), 0 2px 4px rgba(0,0,0,0.1);
}
.legend-text h4{margin:0 0 .25rem; font-size:1rem; font-weight: 700;}
.legend-text p{margin:0; font-size:.875rem; color:var(--text-muted); line-height:1.45;}

/* Custom Scrollbar for sheet */
.sheet::-webkit-scrollbar {
  width: 6px;
}
.sheet::-webkit-scrollbar-track {
  background: transparent;
}
.sheet::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.sheet::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}