/* clarf — pencil on paper */
/* clarf — soft, round, toy-like (Bluey-inspired) */
:root {
  --ink: #4a3d5c;
  --paper: #fff8ee;
  --card: #ffffff;
  --pink: #ff8fb1;
  --yellow: #ffd166;
  --orange: #ff9f43;
  --blue: #5aa9e6;
  --red: #ef5d60;
  --sketch: 24px;
  --shadow: 0 8px 22px rgba(74, 61, 92, .13);
  --font: "Arial Rounded MT Bold", "Varela Round", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .7) 0 60px, transparent 61px),
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, .55) 0 40px, transparent 41px),
    linear-gradient(180deg, #cfe8ff 0%, #e8f4ff 45%, #fff3e0 100%);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* outlines inside every drawing (colours are set per shape) */
.ln:not([stroke-width]) { stroke-width: 2.4; }
.ln { stroke-linejoin: round; stroke-linecap: round; }

.sketch { border: 0; border-radius: var(--sketch); background: var(--card); box-shadow: var(--shadow); }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.big {
  font-size: 22px; font-weight: bold; padding: 12px 28px; min-height: 58px;
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: 0 6px 0 #d9d0e6, 0 10px 18px rgba(74, 61, 92, .15); transition: transform .08s, box-shadow .08s;
}
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9d0e6, 0 4px 8px rgba(74, 61, 92, .15); }
.big.go { background: var(--orange); color: #fff; box-shadow: 0 6px 0 #d97a22, 0 10px 18px rgba(217, 122, 34, .3); }
.big.go:active { box-shadow: 0 2px 0 #d97a22; }
.big:disabled { opacity: .45; }
.round {
  width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff;
  font-size: 28px; line-height: 1; flex: none; padding: 0;
  box-shadow: 0 5px 0 #d9d0e6, 0 8px 14px rgba(74, 61, 92, .15); transition: transform .08s;
}
.round:active { transform: translateY(4px); box-shadow: 0 1px 0 #d9d0e6; }
.round.small { width: 52px; height: 52px; font-size: 22px; }
.round.move { width: 80px; height: 80px; background: var(--orange); color: #fff; font-size: 17px; font-weight: bold; box-shadow: 0 6px 0 #d97a22, 0 10px 18px rgba(217, 122, 34, .35); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 85%, 100% { transform: rotate(0); } 90% { transform: rotate(-8deg) scale(1.05); } 95% { transform: rotate(8deg) scale(1.05); } }
.pill { display: inline-block; padding: 6px 14px; border-radius: 20px; background: #fff; font-size: 16px; box-shadow: 0 3px 0 #e2dbee; }
.chipbtn { border: 0; border-radius: 20px; background: #fff; padding: 9px 16px; font-size: 16px; box-shadow: 0 4px 0 #d9d0e6; }

/* ---------- title ---------- */
#title { align-items: center; justify-content: center; gap: 10px; overflow-y: auto; }
.logo { font-size: clamp(64px, 14vw, 120px); margin: 0; letter-spacing: 2px; transform: rotate(-3deg);
  color: var(--orange); text-shadow: 0 4px 0 #fff, 0 7px 0 #d97a22, 0 14px 20px rgba(74, 61, 92, .25); }
.sub { margin: 0; font-size: 20px; }
#title-char { height: min(38vh, 340px); width: calc(min(38vh, 340px) * 300 / 520); }
#title-char svg { width: 100%; height: 100%; }
.stats { display: flex; gap: 24px; font-size: 22px; }
.credit { margin: 0; opacity: .55; font-size: 14px; }
.pop { animation: pop .45s ease-out; }
@keyframes pop { 0% { transform: scale(.85) rotate(-4deg); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* ---------- dress-up ---------- */
#topbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; }
#deco-strip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px; height: 88px; }
.strip-label { writing-mode: vertical-rl; font-size: 13px; font-weight: bold; color: var(--orange); flex: none; }
#deco-items { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; height: 100%; align-items: center; scrollbar-width: thin; }
#deco-items .item { width: 70px; height: 70px; flex: none; }
#deco-items .item small { font-size: 11px; }
#ctl { display: flex; gap: 8px; align-items: center; }

#dress-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 38%) 1fr; gap: 6px; padding: 4px 10px 10px; }
#stage { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; z-index: 2; }
#timer.hurry { background: var(--red); color: #fff; animation: nudge .5s infinite; }
#char-wrap { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: center; }
#char-wrap svg { height: 100%; max-width: 100%; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.bounce { animation: bounce .35s ease-out; }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(1.035, .97); } 100% { transform: scale(1); } }
#btn-photo { position: absolute; right: 4px; bottom: 4px; }

#wardrobe { min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; }
#tabs { display: flex; gap: 6px; padding: 8px 8px 10px; overflow-x: auto; background: #f4effa; flex: none; scrollbar-width: thin; }
.tab { flex: 1 0 64px; min-height: 60px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #ddd3ea; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.tab span { font-size: 24px; line-height: 1.1; }
.tab small { font-size: 12px; }
.tab.on { background: var(--yellow); box-shadow: 0 4px 0 #e0a92e; transform: translateY(-2px); }
#swatches { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 56px; flex: none; overflow-x: auto; border-bottom: 2px solid #f1ecf7; }
.sw-label { font-size: 15px; white-space: nowrap; margin-right: 4px; }
.crayon { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7) 0 4px, transparent 9px), var(--c); padding: 0; box-shadow: 0 2px 6px rgba(74, 61, 92, .3); }
.crayon.on { outline: 3px solid var(--orange); outline-offset: 1px; transform: scale(1.15); }

#grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 104px; gap: 10px; padding: 10px; align-content: start; }
#grid.wide { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 160px; }
.item { position: relative; border: 0; border-radius: 18px; background: #f6f2fb; box-shadow: 0 4px 0 #e4dcef; padding: 4px 4px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.item svg { width: 100%; height: 100%; }
.item small { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 13px; white-space: nowrap; overflow: hidden; }
.item.on { background: #fff3d6; box-shadow: inset 0 0 0 3px var(--orange), 0 4px 0 #f0c98a; }
.item.none { font-size: 30px; color: #b9adc9; }
.item:active { transform: scale(.94); }
.item i { font-style: normal; position: absolute; }
.item .hint { top: 2px; left: 3px; font-size: 15px; }
.item .sp { top: 2px; right: 3px; font-size: 13px; }
.item .lock { inset: 0; background: rgba(246, 242, 251, .8); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; line-height: 1.3; }

/* ---------- modal + toast ---------- */
#modal { position: fixed; inset: 0; background: rgba(60, 45, 90, .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
#modal-card { max-width: 440px; width: 100%; padding: 22px; text-align: center; animation: pop .3s ease-out; }
#modal-card h2 { margin: 6px 0; }
#modal-card .row { margin-top: 14px; }
.theme-big { font-size: 84px; line-height: 1.1; }
.sw { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(74,61,92,.3); vertical-align: middle; margin: 0 2px; }
.small { font-size: 15px; opacity: .8; }
.buy-thumb { width: 130px; height: 130px; margin: 0 auto; border-radius: 22px; background: #f6f2fb; padding: 6px; }
.buy-thumb svg { width: 100%; height: 100%; }
#toast { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -220%); background: var(--yellow); border: 0; border-radius: 22px; box-shadow: 0 5px 0 #e0a92e, var(--shadow); font-weight: bold; padding: 10px 20px; font-size: 20px; z-index: 60; transition: transform .25s; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
#toast.on { transform: translate(-50%, 0); }

/* ---------- hand-over ---------- */
#handover { align-items: center; justify-content: center; }
.center-card { padding: 30px; text-align: center; max-width: 420px; }

/* ---------- runway ---------- */
#show {
  align-items: center; padding: 10px; gap: 6px; color: #fff;
  background: radial-gradient(ellipse at 50% 105%, rgba(255, 233, 168, .9) 0, transparent 45%),
    radial-gradient(ellipse 12% 70% at 0% 40%, #ff7b8a 0 98%, transparent 100%),
    radial-gradient(ellipse 12% 70% at 100% 40%, #ff7b8a 0 98%, transparent 100%), linear-gradient(180deg, #5b4b9a, #3d3270);
}
#show .pill { color: var(--ink); font-size: 20px; }
#judges { display: flex; gap: clamp(10px, 5vw, 50px); }
.judge { text-align: center; }
.judge .face { font-size: 44px; line-height: 1; }
.judge small { font-size: 12px; opacity: .9; }
.jcard { width: 58px; height: 46px; margin: 4px auto; background: #fff; color: var(--ink); border: 0; border-radius: 14px; box-shadow: 0 4px 0 #d9d0e6; font-size: 28px; font-weight: bold; display: flex; align-items: center; justify-content: center; transform: rotateX(70deg); transition: transform .25s; }
.jcard.flip { transform: none; }
#runway { flex: 1; min-height: 0; width: 100%; max-width: 900px; display: flex; justify-content: center; align-items: flex-end; gap: 2%; }
.cont { position: relative; width: 23%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform .35s; }
.cont svg { width: 100%; max-height: calc(100% - 70px); border-radius: 20px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.cont.spot { transform: scale(1.1) translateY(-8px); z-index: 2; }
.cont.spot svg { box-shadow: 0 0 0 4px #fff6a8, 0 0 40px 10px #fff6a8; }
.cont .nm { font-size: 17px; margin-top: 4px; }
.cont.me .nm { color: var(--yellow); font-weight: bold; }
.cont .sum { font-size: 30px; font-weight: bold; color: var(--yellow); min-height: 36px; opacity: 0; transform: scale(.4); transition: all .3s; }
.cont .sum.in { opacity: 1; transform: none; }
.cont .pod { width: 100%; height: 0; background: #e9e2f5; color: var(--ink); border: 0; border-radius: 16px 16px 0 0; box-shadow: inset 0 -8px 0 rgba(74,61,92,.12); font-size: 24px; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: height .6s; overflow: hidden; }
.cont.r0 .pod { background: var(--yellow); }
.cont .medal { font-size: 44px; line-height: 1; margin-bottom: -22px; z-index: 3; min-height: 0; }
#show-msg { font-size: 24px; min-height: 32px; text-align: center; }
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 110%; transform: rotate(720deg) translateX(40px); } }

/* ---------- results ---------- */
#results { overflow-y: auto; padding: 14px; gap: 10px; align-items: center; }
#res-body { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.res-card { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); }
.res-char svg { width: 100%; border-radius: 20px; background: #fff; box-shadow: 0 4px 12px rgba(74,61,92,.15); }
.res-rank { text-align: center; font-size: 22px; font-weight: bold; }
.res-info h2 { margin: 0 0 8px; }
.score { font-size: 38px; color: var(--orange); }
.score small { font-size: 18px; color: var(--ink); }
.crit { display: grid; grid-template-columns: 90px 112px 1fr; align-items: center; font-size: 18px; padding: 4px 0; border-bottom: 2px solid #f3eff8; }
.stars { color: #ccc; font-size: 20px; letter-spacing: 1px; }
.stars b { color: #ffb627; }
.ct { font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { background: var(--yellow); border: 0; border-radius: 14px; box-shadow: 0 3px 0 #e0a92e; padding: 2px 10px; font-size: 15px; }
.chip.soft { background: #e3f1ff; box-shadow: 0 3px 0 #b9d8f5; }
.tip { background: #fff3d6; border-radius: 16px; padding: 8px 12px; margin: 10px 0 4px; font-size: 17px; }
.earn { font-size: 26px; font-weight: bold; margin: 4px 0 0; }
#res-foot { text-align: center; font-size: 18px; margin: 0; }

/* ---------- phones / portrait tablets ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #topbar { flex-wrap: wrap; padding: 6px 8px 2px; gap: 6px; }
  #deco-strip { order: 3; flex-basis: 100%; height: 72px; }
  #deco-items .item { width: 60px; height: 60px; }
  #ctl { margin-left: auto; }
  .round { width: 54px; height: 54px; font-size: 24px; }
  .round.move { width: 66px; height: 66px; font-size: 15px; }
  #dress-main { grid-template-columns: 1fr; grid-template-rows: 40% 60%; padding: 4px 8px 8px; }
  #grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); grid-auto-rows: 86px; gap: 8px; padding: 8px; }
  #grid.wide { grid-auto-rows: 140px; }
  .item small { font-size: 11px; }
  .tab { flex-basis: 54px; min-height: 52px; }
  .tab span { font-size: 20px; }
  .res-card { grid-template-columns: 110px 1fr; gap: 10px; padding: 10px; }
  .crit { grid-template-columns: 64px 90px 1fr; font-size: 14px; }
  .stars { font-size: 16px; }
  .ct { font-size: 13px; }
  .cont .nm { font-size: 14px; }
  .cont .sum { font-size: 22px; }
  .cont .medal { font-size: 32px; margin-bottom: -16px; }
  .judge .face { font-size: 36px; }
  .big { font-size: 19px; padding: 10px 18px; }
}