:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1f2733;
  --muted: #7a8494;
  --line: #e6e9ee;
  --soft: #f0f2f5;
  --accent: #2f6fd6;
  --go: #1f2733;
  --radius: 14px;

  --s-freezing: #2f6fd6;
  --s-cold: #5b9be6;
  --s-chilly: #a9cdf2;
  --s-comfy: #6cc28a;
  --s-warm: #f2c46a;
  --s-hot: #f08a4b;
  --s-overheating: #e04b3c;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  display: flex; flex-direction: column;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.small { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: 20px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.logo { color: var(--accent); }
.seg-group { display: flex; background: var(--soft); border-radius: 999px; padding: 3px; }
.seg { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; font-weight: 600; color: var(--muted); }
.seg.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.char-picker { display: flex; gap: 8px; margin-left: auto; }
.char-btn {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel);
  padding: 4px 12px 4px 4px; border-radius: 999px; font-weight: 600;
}
.char-btn .face { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--soft); }
.char-btn .face svg { width: 30px; height: 30px; }
.char-btn.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.char-btn:disabled { opacity: .5; cursor: default; }

/* ---------- layout ---------- */
.layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 300px 1fr 320px; gap: 16px; padding: 16px;
}
.panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#wardrobe { background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); padding: 14px; }
#sidebar { overflow-y: auto; padding-right: 2px; }
#sidebar .card.grow { min-height: 240px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* wardrobe */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 9px; font-weight: 600; font-size: 12px; color: var(--muted); }
.tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.item-list { overflow-y: auto; flex: 1; padding-right: 4px; }
.tier-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.tier-head:first-child { margin-top: 2px; }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; }
.item {
  width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px;
  text-align: left; transition: border-color .12s, transform .08s;
}
.item:hover { border-color: #c5ccd6; }
.item:active { transform: scale(.98); }
.item:disabled { opacity: .45; cursor: default; }
.item-name { font-weight: 600; line-height: 1.2; }
.item-stats { display: flex; flex-wrap: wrap; gap: 2px 8px; white-space: nowrap; font-size: 11px; color: var(--muted); margin-top: 2px; }
.item-stats b { color: var(--ink); font-weight: 600; }
.worn-badge { background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; }

/* ---------- stage ---------- */
.stage {
  position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; display: flex; flex-direction: column; min-height: 520px;
  transition: background .6s;
}
.stage.indoor { background: linear-gradient(#ffffff 0%, #fbfbfc 78%, #f1f2f5 78%, #f1f2f5 100%); }
.stage.outdoor { background: linear-gradient(#e9f1fa 0%, #f6f9fc 74%); }
.stage.mild { background: linear-gradient(#eaf3f7 0%, #f8faf6 74%); }
.stage.polar { background: linear-gradient(#0f1a33 0%, #1f3358 45%, #4a6a94 74%); }
.stage.polar.unreal { background: linear-gradient(#1a0f33 0%, #3a2466 45%, #6a5a9e 74%); }
.ground { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 26%; border-radius: 50% 50% 0 0; background: transparent; transition: background .6s; }
.stage.outdoor .ground { background: #fff; box-shadow: 0 -2px 0 #e2eaf3; }
.stage.mild .ground { background: #e9efe2; }
.stage.polar .ground { background: #dbe8f5; box-shadow: 0 -2px 0 #b7cde4, inset 0 8px 14px rgba(120,160,210,.35); }
.sky-deco { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.stage.polar .sky-deco {
  opacity: 1;
  background-image:
    radial-gradient(120% 22% at 40% 20%, rgba(110,240,180,.28) 0%, transparent 70%),
    radial-gradient(90% 14% at 70% 30%, rgba(120,200,255,.22) 0%, transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 22%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, #fff 50%, transparent 51%),
    radial-gradient(14px 14px at 80% 14%, #eef3ff 50%, transparent 52%);
  animation: aurora 9s ease-in-out infinite alternate;
}
.stage.polar.unreal .sky-deco { filter: hue-rotate(120deg) saturate(1.6); }
@keyframes aurora { from { background-position: 0 0; } to { background-position: 0 6px; } }

.snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flake { position: absolute; top: -12px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #dbe6f2; animation: fall linear infinite; }
@keyframes fall { from { transform: translate3d(0, -20px, 0); } to { transform: translate3d(var(--drift, 0px), 760px, 0); } }
.streak { position: absolute; height: 2px; width: 70px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(150,175,205,.6), transparent); animation: streak linear infinite; }
@keyframes streak { from { transform: translateX(-120px); } to { transform: translateX(1100px); } }

.char-area { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4%; position: relative; z-index: 2; }
.char-wrap { position: relative; height: min(62vh, 560px); aspect-ratio: 3 / 4; transition: transform .35s ease; }
@media (min-width: 1300px) {
  .stage.has-result .char-wrap { transform: translateX(-32%); }
  .stage.has-result .overlay:not(.center) { left: auto; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); width: min(350px, 50%); animation: fadein .25s ease-out; }
}
@media (min-width: 1300px) {
  .stage.has-result .bubble { left: auto; right: 64%; }
  .stage.has-result .bubble::after { left: auto; right: 18px; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
#charInner, #charInner svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* speech bubble */
.bubble {
  position: absolute; left: 62%; top: -2%; max-width: 250px; min-width: 120px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 16px; padding: 10px 14px;
  font-weight: 600; line-height: 1.3; box-shadow: 0 4px 14px rgba(20,30,50,.08);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .2s, transform .2s; z-index: 5; pointer-events: none;
}
.bubble::after {
  content: ""; position: absolute; left: 18px; bottom: -9px; width: 14px; height: 14px; background: #fff;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
}
.bubble.show { opacity: 1; transform: none; }
.bubble.muffled { font-style: italic; color: var(--muted); }
.bubble.loud { font-size: 15px; }

/* HUD */
.hud { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 4; display: none; flex-direction: column; gap: 8px; }
.stage.exposed .hud { display: flex; }
.hud-row { display: flex; align-items: center; gap: 10px; }
.state-pill { font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--s-comfy); color: #fff; min-width: 110px; text-align: center; transition: background .3s; }
.timer { flex: 1; height: 8px; background: rgba(31,39,51,.08); border-radius: 999px; overflow: hidden; }
.timer-fill { height: 100%; width: 0; background: var(--ink); border-radius: 999px; }
.timer-text { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 34px; text-align: right; }
.stage.polar .timer-text { color: #fff; }
.gauge { position: relative; flex: 1; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--s-freezing), var(--s-chilly) 35%, var(--s-comfy) 50%, var(--s-warm) 62%, var(--s-overheating)); }
.gauge-marker { position: absolute; top: -5px; width: 4px; height: 18px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px #fff; left: 50%; transition: left .15s; }
.zone-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.zchip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.zchip .dot { width: 8px; height: 8px; border-radius: 50%; }

.round-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; font-weight: 700;
  background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; display: none; }
.round-banner.show { display: block; }
.stage.exposed .round-banner { display: none; }

/* overlay result card */
.overlay { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, 92%); z-index: 6; display: none; }
.overlay.show { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.overlay.center { bottom: auto; top: 50%; transform: translate(-50%, -50%); animation: none; }
.result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 10px 30px rgba(20,30,50,.12); }
.result h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.result p { margin: 4px 0; }
.result .tip { background: var(--soft); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; }
.result .actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.score-big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.score-row { display: flex; align-items: center; gap: 16px; }
.zone-table { display: grid; grid-template-columns: auto 56px 1fr; gap: 4px 12px; margin-top: 10px; font-size: 12px; align-items: center; }
.zone-table .bar { height: 6px; border-radius: 999px; background: var(--soft); position: relative; overflow: hidden; }
.zone-table .bar span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.rounds-list { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; margin: 12px 0; font-size: 13px; }
.new-best { display: inline-block; background: var(--s-warm); color: var(--ink); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 10px; margin-left: 8px; }

/* ---------- right column ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card.grow { flex: 1; min-height: 0; }
.big-temp { display: flex; align-items: baseline; gap: 10px; }
#tempVal { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.row-label { display: flex; justify-content: space-between; font-weight: 600; }
.feels { color: var(--muted); }
.feels b { color: var(--ink); }
input[type=range] { width: 100%; accent-color: var(--ink); }
select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 12px; font-weight: 600; }
.btn:hover { border-color: #c5ccd6; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.link { border: 0; background: none; color: var(--muted); text-decoration: underline; font-size: 12px; padding: 0; }
.lock-note { display: none; color: var(--muted); }
#condCard.locked .lock-note { display: inline; }
#condCard.locked input, #condCard.locked select, #condCard.locked #randomBtn { pointer-events: none; opacity: .5; }

.stack-list { overflow-y: auto; flex: 1; }
.zone-group { margin-bottom: 10px; }
.zone-title { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.zone-items { display: flex; flex-direction: column; gap: 3px; }
.stack-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; border-radius: 8px; background: var(--soft); font-size: 12px; }
.thumb { width: 44px; height: 44px; border-radius: 8px; background: #eef3f8; display: grid; place-items: center; }
.thumb img { max-width: 38px; max-height: 38px; display: block; }
.stack-item .thumb-sm { width: 18px; height: 18px; object-fit: contain; }
.stack-item .nm { flex: 1; }
.stack-item .also { color: var(--muted); font-size: 11px; }
.stack-item button { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; }
.stack-item button:hover { color: var(--ink); }
.stack-item button:disabled { opacity: .3; cursor: default; }
.stack-item .mv { display: inline-flex; flex-direction: column; }
.stack-item .mv button { font-size: 8px; padding: 0 3px; line-height: 1.1; }
.size-picker { align-self: flex-start; align-items: center; gap: 2px; padding: 3px 3px 3px 10px; }
.size-picker .seg { padding: 4px 10px; font-size: 12px; }
.stack-item .size-btn { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; background: var(--panel); white-space: nowrap; }
.stack-item .size-btn.up { color: #fff; background: var(--accent); border-color: var(--accent); }
.tag { display: inline-block; font-size: 10px; font-weight: 700; color: #8a5a00; background: #fff1cf; border-radius: 999px; padding: 0 6px; margin-left: 2px; white-space: nowrap; }
.tag.bad { color: #fff; background: var(--s-overheating); }
.bad { color: var(--s-overheating); }

/* forecast */
#forecastCard[hidden] { display: none; }
.fc { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.fc-row { display: flex; justify-content: space-between; gap: 8px; }
.fc-row span { color: var(--muted); }
.fc-row.bad b { color: var(--s-overheating); }
.fc-sub { color: var(--muted); font-size: 11px; margin-top: -2px; }
.fc-notes { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.result .fc { margin-top: 8px; }
.empty { color: var(--muted); font-size: 12px; font-style: italic; padding: 2px 8px; }
.go {
  border: 0; background: var(--go); color: #fff; font-weight: 800; font-size: 18px; padding: 16px; border-radius: var(--radius);
  letter-spacing: -.01em; transition: transform .08s, background .15s;
}
.go:hover { background: #000; }
.go:active { transform: scale(.98); }
.go.stop { background: var(--soft); color: var(--ink); }
.keys { margin: 0; text-align: center; }

/* ---------- character animations ---------- */
.shiver-1 #charInner { animation: shiver1 .2s linear infinite; }
.shiver-2 #charInner { animation: shiver2 .12s linear infinite; }
.shiver-3 #charInner { animation: shiver3 .09s linear infinite; }
@keyframes shiver1 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes shiver2 { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes shiver3 { 0%,100% { transform: translate(-3px, 0); } 25% { transform: translate(3px, 1px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(3px, 0); } }
.waddle { animation: waddle 1.1s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes waddle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.char-svg .drip { animation: drip 1.3s ease-in infinite; transform-box: fill-box; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
.char-svg .steam { animation: steam 1.4s ease-out infinite; transform-box: fill-box; }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }
.char-svg .breath { animation: breath 2.6s ease-out infinite; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes breath { 0%, 40% { opacity: 0; transform: scale(.4); } 55% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3) translateX(10px); } }
.char-svg .fan { animation: fan .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fan { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
.char-svg .puddle { animation: puddle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes puddle { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.04); } }
.char-svg .face-jitter { animation: faceJitter .11s linear infinite; transform-box: fill-box; transform-origin: 50% 60%; }
@keyframes faceJitter { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-3px,4px); } 50% { transform: translate(2px,6px); } 75% { transform: translate(3px,2px); } }
.char-svg .is-frozen { filter: saturate(.35) brightness(1.08); }
.pop { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ---------- phones and small tablets ----------
 * One column: the character stays pinned at the top while the wardrobe scrolls
 * underneath, and "Head out" sits at the bottom of the screen. */
@media (max-width: 1000px) {
  html, body { height: auto; }
  body { padding-bottom: 84px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .brand { font-size: 18px; }
  .seg { padding: 5px 12px; }
  .char-picker { margin-left: 0; width: 100%; overflow-x: auto; }
  .char-btn { flex: 1; justify-content: center; padding: 3px 10px 3px 3px; }

  .layout { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .stage { order: 0; position: sticky; top: 0; z-index: 10; height: 52vh; min-height: 340px; }
  /* the bottom strip of the stage is kept clear for the speech bubble */
  .char-area { padding-bottom: 72px; }
  .char-wrap { height: calc(52vh - 96px); min-height: 244px; }
  /* make room for the status bar while outside */
  .stage.exposed .char-wrap { height: calc(52vh - 132px); min-height: 208px; }
  #wardrobe { order: 1; }
  #sidebar { order: 2; overflow: visible; }
  .item-list { overflow: visible; }
  .card.grow { min-height: 0; }
  .stack-list { overflow: visible; }
  .keys { display: none; }

  /* speech bubble sits under her feet, pointing up, so it never covers her */
  .bubble {
    left: 50%; top: calc(100% + 6px); width: max-content; max-width: min(320px, 86vw); min-width: 0;
    padding: 7px 12px; font-size: 12px; text-align: center; transform: translate(-50%, 6px) scale(.96);
  }
  .bubble.show { transform: translate(-50%, 0); }
  .bubble::after { top: -8px; bottom: auto; left: calc(50% - 7px); transform: rotate(225deg); }
  .bubble.loud { font-size: 13px; }
  .hud { left: 10px; right: 10px; top: 10px; gap: 6px; }
  .state-pill { min-width: 0; padding: 3px 10px; font-size: 12px; }
  .zchip { font-size: 10px; padding: 2px 7px; }

  /* the result card would be clipped by the short stage, so it slides up over the page */
  .overlay, .overlay.center {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 84px; width: auto; transform: none;
    max-height: calc(100vh - 160px); overflow-y: auto; z-index: 30;
  }
  .overlay.show { animation: riseMobile .25s ease-out; }
  .result { padding: 14px 16px; }
  .score-big { font-size: 36px; }

  .go { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; padding: 14px; box-shadow: 0 6px 20px rgba(20,30,50,.18); }
  .go.stop { background: #fff; }
}
@keyframes riseMobile { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }