.brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:8px; }
.brand h1{ font-size:34px; letter-spacing:0.2px; }
.brand svg{ width:30px; height:30px; flex-shrink:0; }
.btn{
  font-family:'Work Sans', sans-serif; font-size:16px; font-weight:600;
  padding:15px 22px; border-radius:8px; border:1px solid var(--hairline);
  background:var(--bg-raised); color:var(--cream); cursor:pointer;
  transition:transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
  text-align:center;
}
.btn:active{ transform:scale(0.98); }
.btn:hover{ border-color:var(--gold); }
.btn-primary{
  background:linear-gradient(180deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
  border-color:var(--bordeaux); color:var(--cream);
  box-shadow:0 4px 14px rgba(138,35,52,0.35);
}
.btn-primary:hover{ border-color:var(--gold); }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; transform:none; }
.btn-ghost{ background:transparent; }
input[type=text], input[type=number], select{
  font-family:'Work Sans', sans-serif; font-size:16px;
  padding:13px 14px; border-radius:8px; border:1px solid var(--hairline);
  background:var(--bg-raised); color:var(--cream); outline:none; width:100%;
}
input:focus, select:focus{ border-color:var(--gold); }
input::placeholder{ color:var(--cream-dim); opacity:0.6; }
label{ font-size:13px; color:var(--gold); display:block; margin-bottom:6px; }
.label-wrap{ margin-bottom:2px; }
.card{ background:var(--bg-raised); border:1px solid var(--hairline); border-radius:14px; padding:22px; position:relative; }
.label-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:0.06em; color:var(--ink); background:var(--gold); padding:4px 10px; border-radius:100px; font-weight:700; }
.cat-country{ background:var(--verdigris); color:var(--ink); }
.cat-grape{ background:var(--bordeaux); color:var(--cream); }
.cat-abv{ background:var(--gold); color:var(--ink); }
.cat-sugar{ background:var(--rose); color:var(--ink); }
.cat-price{ background:var(--straw); color:var(--ink); }
.seal{ width:88px; height:88px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #d8b45f, var(--gold) 55%, var(--gold-soft) 100%); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; font-size:24px; letter-spacing:2px; margin:0 auto; box-shadow:0 6px 18px rgba(0,0,0,0.4), inset 0 0 0 3px rgba(0,0,0,0.15); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.answer-chip{
  padding:11px 16px; border-radius:10px; border:1.5px solid var(--hairline);
  background:var(--bg-raised-2); color:var(--cream); font-weight:500; font-size:14.5px;
  cursor:pointer; flex:1 1 auto; text-align:center; min-width:110px;
}
.answer-chip.selected{ border-color:var(--gold); background:rgba(201,162,75,0.16); font-weight:700; }
.answer-chip.correct{ border-color:var(--success); background:rgba(92,154,115,0.2); font-weight:700; }
.answer-chip.wrong{ border-color:var(--danger); background:rgba(193,80,63,0.2); }
.answer-chip:disabled{ cursor:default; }
.timer-bar{ height:6px; border-radius:100px; background:var(--bg-raised-2); overflow:hidden; margin-bottom:4px; }
.timer-fill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--bordeaux)); }
.player-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:8px; background:var(--bg-raised-2); border:1px solid var(--hairline); }
.rank-num{ font-family:'Fraunces', serif; color:var(--gold); width:22px; font-weight:700; display:inline-block; }
.podium-wrap{ display:flex; align-items:flex-end; gap:10px; justify-content:center; margin:26px 0; }
.podium-col{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.podium-block{ width:100%; border-radius:8px 8px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:10px; font-family:'Fraunces', serif; font-weight:700; font-size:20px; color:var(--ink); }
.p1 .podium-block{ height:110px; background:linear-gradient(180deg,#e3c165,var(--gold)); }
.p2 .podium-block{ height:80px; background:linear-gradient(180deg,#cfcfcf,#9c9c9c); }
.p3 .podium-block{ height:60px; background:linear-gradient(180deg,#c98a5c,#a4653a); }
.top-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.code-pill{ font-family:'Fraunces', serif; font-weight:700; letter-spacing:3px; background:var(--bg-raised); border:1px solid var(--gold); color:var(--gold); padding:6px 14px; border-radius:100px; font-size:14px; }
textarea{ font-family:'Work Sans', sans-serif; font-size:15px; padding:12px 14px; border-radius:8px; border:1px solid var(--hairline); background:var(--bg-raised); color:var(--cream); width:100%; resize:vertical; min-height:56px; outline:none; }
.mini-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--bg-raised-2); border-radius:8px; border:1px solid var(--hairline); font-size:14px; }
.icon-btn{ background:none; border:none; color:var(--cream-dim); cursor:pointer; font-size:16px; }
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); display:flex; align-items:flex-start; justify-content:center; padding:20px; z-index:10; overflow-y:auto; }
.modal-card{ max-width:520px; width:100%; margin:20px auto; }
.cat-build-section{ padding-bottom:14px; border-bottom:1px solid var(--hairline); margin-bottom:16px; }
.cat-build-section:last-of-type{ border-bottom:none; }
.build-row{ display:flex; gap:10px; align-items:center; }
.build-row input[type=radio]{ width:20px; height:20px; flex:0 0 20px; accent-color: var(--gold); }
.result-line{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14.5px; }
.result-line:last-child{ border-bottom:none; }
.tick-yes{ color:var(--success); font-weight:700; }
.tick-no{ color:var(--danger); font-weight:700; }