:root {
  --ink: #3a2a2a;
  --ink-soft: #7a6565;
  --tomato: #ef5a3c;
  --tomato-deep: #c93f28;
  --leaf: #4fa86b;
  --leaf-deep: #3c8653;
  --card: #fff;
  --ground: #fff0e6;
  --ground-deep: #ffd9cc;
  --track: #fbf3ea;
  --focus-ring: #3a7bd5;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 10%, var(--ground) 0%, var(--ground-deep) 100%); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
[hidden] { display: none !important; }

.app { width: min(100%, 760px); margin: 0 auto; padding: 28px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.top { text-align: center; }
.top h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.caption { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

.card { background: var(--card); border-radius: 18px; padding: 16px 18px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.card-head h2 span { font-weight: 600; color: var(--ink-soft); font-size: 13px; margin-left: 4px; }
.card-actions { display: flex; gap: 2px; }
.quiet { border: 0; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.quiet:hover:not(:disabled) { background: #fbf1ee; }
.quiet:disabled { opacity: .4; cursor: default; }
.small { border: 0; border-radius: 10px; padding: 9px 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }

.chips { list-style: none; margin: 12px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.chips li { display: inline-flex; align-items: center; gap: 4px; background: #fbf1ee; border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 14px; font-weight: 600; }
.chips li button { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-soft); font-size: 14px; line-height: 1; padding: 0; }
.chips li button:hover { background: #f3dcd6; color: var(--tomato-deep); }
.chips .empty { background: none; color: #a08d8d; font-weight: 500; font-size: 13px; padding-left: 2px; }
.name-form { display: flex; gap: 8px; }
.name-form input { flex: 1; min-width: 0; border: 2px solid #f1e6e6; border-radius: 12px; padding: 10px 14px; background: #fff; font-size: 15px; }
.name-form input:focus { border-color: var(--tomato); outline: none; }

.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; background: #ffffff8c; border-radius: 24px; align-self: center; }
.mode { border: 0; border-radius: 999px; padding: 9px 18px; background: transparent; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.mode[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px #3a2a2a1a; }

.stage-card { padding-bottom: 14px; }
.options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.field input { border: 2px solid #f1e6e6; border-radius: 10px; padding: 7px 10px; width: 150px; font-size: 14px; color: var(--ink); }
.field input:focus { border-color: var(--tomato); outline: none; }
.segment { display: flex; gap: 2px; padding: 3px; background: #f6efee; border-radius: 999px; }
.seg { border: 0; border-radius: 999px; padding: 5px 12px; background: transparent; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.seg[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #3a2a2a1a; }
body[data-mode="capsule"] #pick-rule, body[data-mode="cups"] #pick-rule, body[data-mode="wheel"] #pick-rule { display: none; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.check input { width: 16px; height: 16px; accent-color: var(--tomato); margin: 0; }
.live { margin-left: auto; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #cfc4c4; }
.live[data-shared="yes"]::before { background: var(--leaf); }
.live[data-shared="no"]::before { background: #e0b25a; }
.live:empty { display: none; }

.stage { position: relative; min-height: 280px; border-radius: 14px; background: var(--track); overflow: hidden; }

/* Race track */
.race { padding: 14px 14px 10px; }
.lanes { display: flex; flex-direction: column; gap: 6px; }
.lane { position: relative; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; height: 50px; }
.lane .who { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane .track { position: relative; height: 100%; border-radius: 8px; background: repeating-linear-gradient(90deg, #f3e7dc 0 2px, transparent 2px 28px), #faf0e6; }
.lane .track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: repeating-conic-gradient(#3a2a2a 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 0 8px 8px 0; opacity: .85; }
.racer { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin-top: -22px; transform: translateX(var(--x, 0px)); will-change: transform; }
.racer svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Every tomato carries its name, so a crowded field stays readable. */
.racer .tag { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); max-width: 72px; padding: 1px 6px; border-radius: 999px; background: #ffffffd9; color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 0 #3a2a2a22; pointer-events: none; }
.racer.done .tag { display: none; }
/* Big fields: shorter lanes and smaller tomatoes. */
.lanes[data-size="lg"] { gap: 4px; } .lanes[data-size="lg"] .lane { height: 36px; } .lanes[data-size="lg"] .racer { width: 32px; height: 32px; margin-top: -16px; }
.lanes[data-size="xl"] { gap: 3px; } .lanes[data-size="xl"] .lane { height: 28px; grid-template-columns: 64px 1fr; } .lanes[data-size="xl"] .lane .who { font-size: 12px; } .lanes[data-size="xl"] .racer { width: 26px; height: 26px; margin-top: -13px; }
.lanes[data-size="lg"] .racer .rank, .lanes[data-size="xl"] .racer .rank { width: 16px; height: 16px; font-size: 9px; right: -6px; top: -6px; }
.lanes[data-size="xl"] .racer .tag { font-size: 10px; padding: 0 5px; }
/* The racer whose skill is on screen: a lit lane and a bigger name. */
.lane.called .track { box-shadow: 0 0 0 3px #ffd23b, 0 0 18px #ffd23b99; background: linear-gradient(90deg, #fff6c8, #faf0e6); }
.lane.called .who { color: var(--tomato-deep); font-size: 15px; }
.lane.called .racer .tag { background: #ffd23b; transform: translateY(-50%) scale(1.25); transform-origin: 0 50%; }
.racer .rank { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; }
.racer.done .rank { display: inline-flex; }
.racer.running svg { animation: bob .28s ease-in-out infinite alternate; }
.racer.done svg { animation: none; }
.racer.picked svg { animation: wiggle .5s ease-in-out 2; }
@keyframes bob { from { transform: translateY(-2px) rotate(-5deg); } to { transform: translateY(2px) rotate(5deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.countdown { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 900; color: var(--tomato); -webkit-text-stroke: 3px #2a1a1a; paint-order: stroke fill; text-shadow: 6px 6px 0 #2a1a1a, 0 0 30px #fff; pointer-events: none; }
.countdown:empty { display: none; }
.countdown.go { color: #5fd27f; font-size: 92px; font-style: italic; }
.countdown.slam { animation: slam .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes slam { 0% { transform: scale(3.5); opacity: 0; filter: blur(6px); } 35% { transform: scale(.85); opacity: 1; filter: blur(0); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Capsule machine */
.machine { position: relative; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16px; }
.dome { position: absolute; top: 18px; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffffd8 0%, #e8f2fb 45%, #cfe0ef 100%); box-shadow: inset 0 -10px 30px #9db9d233, 0 6px 0 #c8d6e3; overflow: hidden; }
.dome::after { content: ""; position: absolute; left: 22%; top: 10%; width: 26%; height: 14%; border-radius: 50%; background: #fff; opacity: .55; transform: rotate(-25deg); }
.capsule { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--c) 0 50%, #fff 50% 100%); box-shadow: inset -4px -4px 8px #0000001a, 0 2px 3px #0002; transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg)); }
.machine.cranking .capsule { animation: jiggle .22s ease-in-out infinite alternate; }
@keyframes jiggle { from { margin-top: -5px; } to { margin-top: 5px; } }
.machine-body { position: relative; width: 240px; height: 168px; margin-top: 196px; border-radius: 18px 18px 22px 22px; background: linear-gradient(180deg, #f25f44, #d6432d); box-shadow: 0 8px 0 #a83522, inset 0 2px 0 #ff9a86; }
.machine-body::before { content: ""; position: absolute; left: 50%; top: -22px; width: 240px; height: 44px; margin-left: -120px; border-radius: 22px; background: #c93f28; z-index: -1; }
.handle { position: absolute; left: 50%; top: 16px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e6e0dc 60%, #cfc6c0); box-shadow: 0 3px 0 #b7aca6; transform: rotate(var(--turn, 0deg)); transition: transform 1.4s cubic-bezier(.45,.05,.3,1); }
.handle i { position: absolute; left: 50%; top: 50%; width: 10px; height: 54px; margin: -27px 0 0 -5px; border-radius: 6px; background: var(--ink); }
.handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--tomato-deep); }
.chute { position: absolute; left: 50%; bottom: 12px; width: 120px; height: 48px; margin-left: -60px; border-radius: 10px; background: #3a2a2a; box-shadow: inset 0 4px 10px #000a; }
.capsule-open { position: absolute; left: 50%; bottom: 18px; width: 60px; height: 60px; margin-left: -30px; border: 0; padding: 0; background: transparent; cursor: pointer; animation: drop var(--drop, 1.1s) cubic-bezier(.3,1.2,.4,1) both; }
.capsule-open .half { position: absolute; left: 0; width: 60px; height: 30px; background: var(--c, var(--tomato)); transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
.capsule-open .half.top { top: 0; border-radius: 30px 30px 0 0; }
.capsule-open .half.bottom { top: 30px; background: #fff; border-radius: 0 0 30px 30px; box-shadow: inset 0 -4px 8px #0000001a; }
.capsule-open.opened .half.top { transform: translate(-18px, -28px) rotate(-28deg); }
.capsule-open.opened .half.bottom { transform: translate(18px, 6px) rotate(14deg); }
.capsule-open:not(.opened):hover { filter: brightness(1.05); }
@keyframes drop { 0% { transform: translateY(-260px) scale(.9); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(0) scale(1.02, .94); } 78% { transform: translateY(-16px) scale(.98, 1.04); } 100% { transform: translateY(0) scale(1); } }
.machine .hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 13px; color: #fff; background: #3a2a2acc; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

/* Result */
.result { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fffffff2; border-radius: 20px; padding: 20px 28px; text-align: center; box-shadow: 0 12px 40px #3a2a2a2e; min-width: 240px; animation: pop .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.result-title { margin: 0; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.result-name { margin: 6px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.result-order { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 13px; color: var(--ink-soft); }
.result-order:empty { display: none; }
.result-order li b { color: var(--ink); margin-right: 3px; }
.confetti { position: absolute; width: 8px; height: 12px; top: -12px; pointer-events: none; z-index: 6; animation: fall var(--d, 1.6s) linear var(--delay, 0s) forwards; }
.confetti.big { width: 13px; height: 20px; }
@keyframes fall { to { transform: translate(var(--dx, 0), 300px) rotate(540deg); opacity: 0; } }

.controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.primary { border: 0; border-radius: 999px; padding: 13px 34px; min-width: 150px; background: var(--tomato); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 6px 0 var(--tomato-deep); transition: transform .08s, box-shadow .08s; }
.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--tomato-deep); }
.primary:disabled { opacity: .5; cursor: default; }
.stage-note { margin: 0; font-size: 12px; color: #a08d8d; flex: 1; min-width: 160px; }

/* Record */
.record h3 { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.record-count { font-size: 12px; color: var(--ink-soft); }
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tally { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tally li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 14px; padding: 6px 8px; border-radius: 10px; }
.tally li:first-child { background: #fff4e6; }
.tally .place { width: 22px; height: 22px; border-radius: 50%; background: #f3eded; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.tally li:first-child .place { background: #f6c94d; color: #5a4300; }
.tally .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.tally .quiet-note, .recent .quiet-note { display: block; font-size: 12px; color: #a08d8d; padding: 4px 0; }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.recent li { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 2px 3px 6px; border-radius: 8px; }
.recent .row-remove { border: 0; background: transparent; width: 26px; height: 26px; border-radius: 50%; color: #b9a6a6; font-size: 16px; line-height: 1; padding: 0; }
.recent .row-remove:hover { background: #f6e4e0; color: var(--tomato-deep); }
.hint-inline { font-weight: 500; color: #b9a6a6; font-size: 11px; margin-left: 6px; }
.card-actions .record-count { margin-right: 4px; }
.recent time { font-size: 11px; color: #a08d8d; font-variant-numeric: tabular-nums; }
.recent b { font-weight: 800; }
.recent span { color: var(--ink-soft); }
.recent .mode-tag { font-size: 11px; background: #f6efee; border-radius: 999px; padding: 2px 8px; color: var(--ink-soft); }

@media (max-width: 560px) {
  .lane { grid-template-columns: 56px 1fr; height: 44px; }
  .lane .who { font-size: 12px; }
  .racer { width: 36px; height: 36px; margin-top: -18px; }
  .countdown { font-size: 84px; } .countdown.go { font-size: 64px; }
  .boom-lg { font-size: 32px; } .boom-xl { font-size: 44px; } .boom-xx { font-size: 58px; }
  .result.slam .result-name { font-size: 34px; }
  .record-grid { grid-template-columns: 1fr; }
  .options .field input { width: 120px; }
  .result-name { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Predictions */
.predict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 12px; font-size: 13px; color: var(--ink-soft); }
.predict-label { font-weight: 600; }
.predict-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.predict-chips button { border: 2px solid #f1e6e6; background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.predict-chips button[aria-pressed="true"] { border-color: #4d78c9; color: #2d57a8; background: #eef3fc; }
.predict-chips button:disabled { opacity: .55; cursor: default; }
.predict .quiet-note { font-size: 12px; color: #a08d8d; }
body[data-phase="playing"] .predict { opacity: .6; }

/* Announcer */
.announcer { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 28px); display: flex; align-items: center; gap: 8px; background: #3a2a2aee; color: #fff; border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: slide-in .25s ease-out; }
.announcer .mic { font-size: 16px; }
@keyframes slide-in { from { transform: translate(-50%, -8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.photo-stamp { position: absolute; right: 14px; top: 12px; z-index: 3; background: #fff; color: var(--tomato-deep); border: 3px solid var(--tomato-deep); border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 14px; transform: rotate(-6deg); animation: stamp .3s cubic-bezier(.2,1.6,.5,1) both; }
@keyframes stamp { from { transform: rotate(-6deg) scale(2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.stage.slow .lane .track { background: repeating-linear-gradient(90deg, #efe0d4 0 2px, transparent 2px 28px), #f6ece2; }

/* Race events and faces */
.race { padding-top: 46px; }
.racer .event { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 18px; line-height: 1; display: none; animation: bounce-in .3s cubic-bezier(.3,1.6,.5,1) both; }
.racer[data-event] .event { display: block; }
@keyframes bounce-in { from { transform: translate(-50%, 8px) scale(.4); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.racer .face-dizzy, .racer .face-sleep, .racer .face-boost { display: none; }
.racer[data-event="banana"] .face-normal, .racer[data-event="nap"] .face-normal, .racer[data-event="boost"] .face-normal { display: none; }
.racer[data-event="banana"] .face-dizzy, .racer[data-event="nap"] .face-sleep, .racer[data-event="boost"] .face-boost { display: block; }
.racer[data-event="banana"] svg { animation: spin-slip .5s linear infinite; }
.racer[data-event="nap"] svg { animation: none; transform: rotate(14deg); }
.racer[data-event="boost"] svg { animation: shake .12s linear infinite; }
.racer[data-event="boost"]::before { content: ""; position: absolute; right: 100%; top: 30%; width: 26px; height: 40%; background: repeating-linear-gradient(180deg, #ffffff 0 3px, transparent 3px 8px); opacity: .8; }
@keyframes spin-slip { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }

/* Capsule ticker */
.ticker { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; min-width: 160px; text-align: center; background: #3a2a2a; color: #ffe08a; border-radius: 10px; padding: 8px 18px; font-size: 20px; font-weight: 800; letter-spacing: 1px; box-shadow: inset 0 0 0 3px #5a4a4a, 0 4px 0 #1f1515; font-variant-numeric: tabular-nums; }
.ticker.flip { animation: flip .12s ease-out; }
.ticker.hint { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; }
@keyframes flip { from { transform: translate(-50%, -3px) scaleY(.7); } to { transform: translate(-50%, 0) scaleY(1); } }

/* 복불복 cups */
.cups { padding: 54px 16px 20px; min-height: 300px; }
.cups-hint { margin: 0 0 14px; text-align: center; font-size: 14px; color: var(--ink-soft); font-weight: 600; min-height: 20px; }
.cup-table { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 8px; justify-items: center; }
.cup { position: relative; width: 96px; height: 150px; border: 0; background: transparent; padding: 0; cursor: default; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.cup .cup-body { position: absolute; left: 14px; right: 14px; top: 18px; height: 86px; border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, #ff8a74, #ef5a3c 60%, #d6432d); box-shadow: inset -8px 0 14px #0000001a, 0 6px 0 #a83522; transition: transform .45s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 100%; }
.cup .cup-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 10px 10px 4px 4px; background: #ffb4a4; }
.cup .cup-body::after { content: ""; position: absolute; left: 10px; width: 6px; top: 20px; bottom: 16px; border-radius: 6px; background: #ffffff55; }
.cup .under { position: absolute; left: 50%; top: 78px; transform: translateX(-50%) scale(0); font-size: 30px; line-height: 1; transition: transform .35s cubic-bezier(.3,1.6,.5,1) .15s; }
.cup .shadow { position: absolute; left: 22px; right: 22px; top: 104px; height: 8px; border-radius: 50%; background: #3a2a2a1f; }
.cup .tag { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.cup .tag::before { content: "🏷️ "; font-size: 11px; }
.cups.shuffling .cup .tag { visibility: hidden; }
.cups.ready .cup:not(.revealed) { cursor: pointer; }
.cups.ready .cup:not(.revealed):hover .cup-body { transform: translateY(-6px); }
.cup.revealed .cup-body { transform: translateY(-64px) rotate(-14deg); }
.cup.revealed .under { transform: translateX(-50%) scale(1); }
.cup.revealed.empty .under { font-size: 20px; opacity: .7; }
.cup.wiggle .cup-body { animation: cup-wiggle .5s ease-in-out; }
@keyframes cup-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.cups.shuffling .cup .cup-body { animation: cup-hop .3s ease-in-out infinite alternate; }
@keyframes cup-hop { from { transform: translateY(0); } to { transform: translateY(-5px); } }

/* Result extras */
.result-drum { margin: 10px 0 0; font-size: 26px; font-weight: 800; color: var(--ink-soft); letter-spacing: 2px; animation: drum .5s ease-in-out infinite alternate; }
@keyframes drum { from { transform: scale(.96); } to { transform: scale(1.06); } }
.result-predict { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.result-predict:empty { display: none; }
.result-predict.hit { color: #2d57a8; }
.result-predict.miss { color: var(--ink-soft); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 14px; }
.result-actions .quiet { font-size: 12px; padding: 7px 9px; }

/* Titles and prediction record */
.titles { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.titles:empty { display: none; }
.titles li { display: flex; align-items: center; gap: 8px; background: #fff4e6; border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.titles li .emoji { font-size: 20px; }
.titles li b { display: block; font-size: 14px; }
.titles li span { color: var(--ink-soft); font-size: 12px; }
.record-note { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
.record-note:empty { display: none; }
@media (max-width: 560px) {
  .cup { width: 84px; height: 140px; }
  .cup-table { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .announcer { font-size: 13px; }
}

/* 마블 레이스 */
.marbles { display: flex; gap: 14px; padding: 54px 14px 14px; align-items: flex-start; justify-content: center; }
.pit { position: relative; flex: 0 0 auto; width: min(100%, 300px); aspect-ratio: 100 / 170; border-radius: 14px; background: linear-gradient(180deg, #fbf3ea, #f3e4d4); box-shadow: inset 0 0 0 3px #e9d6c6; overflow: hidden; }
.pit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pit .peg { fill: #c9b2a0; }
.pit .finish-line { stroke: #3a2a2a; stroke-width: .8; stroke-dasharray: 3 2; }
.marble-layer { position: absolute; inset: 0; }
.marble { position: absolute; width: 5.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #ffffffcc 0 12%, var(--c) 40%, color-mix(in srgb, var(--c), #000 35%) 100%); box-shadow: 0 1px 2px #0003; will-change: left, top; }
.marble::after { content: attr(data-initial); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.marble.done { opacity: .55; }
.standings { list-style: none; margin: 0; padding: 0; min-width: 120px; display: flex; flex-direction: column; gap: 3px; }
.standings li { display: grid; grid-template-columns: 26px 12px 1fr; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: 8px; background: #ffffffa6; transition: transform .3s; }
.standings li i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
.standings li .place { font-size: 11px; color: var(--ink-soft); font-weight: 800; white-space: nowrap; }
.standings li.done { background: #fff; }
.standings li.done .place { color: var(--ink); }
@media (max-width: 560px) { .marbles { flex-direction: column; align-items: center; } .standings { flex-direction: row; flex-wrap: wrap; } }

/* 돌림판 */
.wheel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 14px 20px; }
/* 응원: two big buttons under the wheel while it is open */
.cheer { position: relative; width: min(100%, 420px); display: flex; flex-direction: column; gap: 8px; animation: cheer-in .35s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes cheer-in { from { opacity: 0; transform: scale(.7) translateY(16px); } to { opacity: 1; transform: none; } }
.cheer.closing { animation: cheer-out .45s ease-in forwards; }
@keyframes cheer-out { to { opacity: 0; transform: scale(.85) translateY(10px); } }
.cheer { --power: 1; }
.cheer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.cheer-power { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
@media (max-width: 520px) { .cheer-left { display: none; } }
.cheer-power b { min-width: 4ch; font-variant-numeric: tabular-nums; }
.cheer-power i { width: 70px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #ffd23b, #ff6a3d) 0 0 / calc(var(--power) * 100%) 100% no-repeat, #3a2a2a1f; transition: background-size .4s; }
.cheer-power.drop { animation: power-drop .5s ease-out; }
@keyframes power-drop { 0% { scale: 1.25; color: #ef5a3c; } 100% { scale: 1; } }
.cheer.last .cheer-btn { animation: last-call .5s ease-in-out infinite alternate; }
@keyframes last-call { to { box-shadow: 0 6px 0 var(--edge), 0 0 0 5px #ffd23b88; } }
.cheer-btn { filter: saturate(calc(.55 + var(--power, 1) * .45)); }
.cheer-timer { height: 8px; border-radius: 999px; background: #3a2a2a1f; overflow: hidden; }
.cheer-timer i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6a3d, #ffd23b); transform-origin: 0 50%; }
.cheer-timer.run i { animation: cheer-time var(--left, 5s) linear forwards; }
@keyframes cheer-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.cheer-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cheer-btn { position: relative; border: 0; border-radius: 16px; padding: 14px 10px; font: inherit; font-size: 18px; font-weight: 900; color: #fff; cursor: pointer; touch-action: manipulation; user-select: none; box-shadow: 0 6px 0 var(--edge); transition: transform .06s, box-shadow .06s; }
.cheer-btn b { display: inline-block; min-width: 2ch; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #ffffff33; font-variant-numeric: tabular-nums; }
.cheer-btn.spin { background: linear-gradient(180deg, #ff8a4c, #ef5a3c); --edge: #a83522; }
.cheer-btn.brake { background: linear-gradient(180deg, #5f9bff, #3b6fd1); --edge: #274c94; }
.cheer-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge); }
.cheer-btn.hit { animation: cheer-hit .25s cubic-bezier(.2,1.6,.4,1); }
@keyframes cheer-hit { 0% { scale: .92; } 60% { scale: 1.06; } 100% { scale: 1; } }
.cheer-note { margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.cheer-float { position: absolute; top: 18px; translate: -50% 0; pointer-events: none; white-space: nowrap; font-weight: 900; font-size: 18px; color: #fff; -webkit-text-stroke: 1px #3a2a2a; paint-order: stroke fill; text-shadow: 2px 2px 0 #3a2a2a; animation: cheer-float .9s ease-out forwards; }
.cheer-float.remote { font-size: 13px; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; background: #fff; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 #3a2a2a22; }
.cheer-float.max { color: #ffe08a; font-size: 14px; }
@keyframes cheer-float { from { transform: translateY(0) scale(.8); opacity: 1; } to { transform: translateY(-70px) scale(1.15); opacity: 0; } }
.wheel-wrap { position: relative; width: min(100%, 340px); aspect-ratio: 1; }
.wheel-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 0 #c9b2a0) drop-shadow(0 12px 24px #3a2a2a22); transform: rotate(var(--angle, 0deg)); will-change: transform; }
.wheel-wrap .slice-label { font-size: 9px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: #00000030; stroke-width: 1.5px; }
.wheel-wrap .slice { stroke: #fff; stroke-width: 1.2; }
.wheel-wrap .slice.won { filter: brightness(1.15); }
.wheel-wrap .hub { position: absolute; left: 50%; top: 50%; width: 15%; height: 15%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e6e0dc 60%, #cfc6c0); box-shadow: 0 3px 0 #b7aca6; }
.wheel-wrap .hub::after { content: "🍅"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.wheel-wrap .pointer { position: absolute; left: 50%; top: -8px; width: 0; height: 0; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 30px solid var(--ink); z-index: 2; filter: drop-shadow(0 2px 0 #fff); }
body[data-phase="playing"][data-mode="wheel"] .wheel-wrap .pointer { animation: nod .12s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes nod { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* 고정 멤버 (주소록) */
.rosters { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #f1e6e6; }
.rosters-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rosters-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.roster-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.roster-list li { display: inline-flex; align-items: stretch; border: 2px solid #f1e6e6; border-radius: 12px; overflow: hidden; background: #fff; }
.roster-list li button { border: 0; background: transparent; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.roster-list li button:hover { background: #fbf1ee; }
.roster-list li .load b { font-weight: 800; }
.roster-list li .load small { color: var(--ink-soft); font-weight: 500; margin-left: 4px; }
.roster-list li .add, .roster-list li .drop { border-left: 2px solid #f1e6e6; padding: 6px 9px; color: var(--ink-soft); }
.roster-list li .drop:hover { color: var(--tomato-deep); }
.roster-list .quiet-note { font-size: 12px; color: #a08d8d; padding: 4px 0; }
.tally .n small { font-weight: 500; color: var(--ink-soft); margin-left: 4px; }

/* Comic race effects: shake, hit-stop, sound-effect words, afterimages, dust, speed lines, lightning, spotlight */
.stage { transform-origin: 50% 50%; }
.fx-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: var(--flash, #fff); opacity: 0; }
.fx-flash.on { animation: flash-out var(--dur, 380ms) ease-out both; }
@keyframes flash-out { from { opacity: .92; } to { opacity: 0; } }
.fx-focus { position: absolute; inset: -30%; z-index: 2; pointer-events: none; background: repeating-conic-gradient(from 0deg, #3a2a2a 0 1.2deg, transparent 1.2deg 7deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 34%, #000 62%); mask: radial-gradient(circle at 50% 50%, transparent 0 34%, #000 62%); opacity: .14; animation: focus-jitter .16s steps(2) infinite; }
@keyframes focus-jitter { from { transform: rotate(0deg); } to { transform: rotate(3.5deg); } }
.fx-bolt { position: absolute; top: -4%; left: var(--bx, 50%); width: 90px; height: 110%; z-index: 6; pointer-events: none; background: #fffbe0; filter: drop-shadow(0 0 6px #ffe65a) drop-shadow(0 0 22px #ffb300); clip-path: polygon(48% 0, 72% 0, 50% 38%, 74% 38%, 28% 100%, 44% 55%, 22% 55%); animation: bolt-pop .6s steps(4) both; }
@keyframes bolt-pop { 0% { opacity: 0; transform: scaleX(.6); } 10% { opacity: 1; transform: scaleX(1.3); } 45% { opacity: 1; transform: scaleX(.9); } 70% { opacity: 1; transform: scaleX(1.1); } 100% { opacity: 0; transform: scaleX(1); } }

.boom { position: absolute; left: var(--bx, 50%); top: var(--by, 46%); transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); animation: boom-pop var(--dur, 900ms) cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; --spike: #ffe65a; --fill: #ff6a3d; }
.boom::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4em; height: 2.4em; transform: translate(-50%, -50%); background: repeating-conic-gradient(var(--spike) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 0 50%, transparent 70%); mask: radial-gradient(circle, #000 0 50%, transparent 70%); animation: spin-spikes 1.2s linear infinite; opacity: .95; }
.boom b { position: relative; display: block; font-weight: 900; font-style: italic; letter-spacing: -.02em; white-space: nowrap; color: var(--fill); -webkit-text-stroke: .09em var(--edge, #2a1a1a); paint-order: stroke fill; text-shadow: .08em .1em 0 var(--edge, #2a1a1a), 0 0 .4em #ffffff99; }
.boom-sm::before { display: none; }
.boom-sm { font-size: 20px; } .boom-md { font-size: 30px; } .boom-lg { font-size: 42px; } .boom-xl { font-size: 62px; } .boom-xx { font-size: 84px; }
.hue-tomato { --fill: #ff6a3d; --spike: #ffe65a; } .hue-gold { --fill: #ffd23b; --spike: #ff7a3d; } .hue-leaf { --fill: #5fd27f; --spike: #fff27a; } .hue-sky { --fill: #5fc7ff; --spike: #fff; } .hue-grape { --fill: #c9a7ff; --spike: #ffffffaa; } .hue-ink { --fill: #3a2a2a; --edge: #fff; --spike: #ffd23b; }
@keyframes boom-pop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(.15); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(1.35); } 24% { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(.92); } 34% { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(1.05); } 44%, 78% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(1); } 100% { opacity: 0; transform: translate(-50%, -56%) rotate(var(--tilt, 0deg)) scale(1.3); } }
@keyframes spin-spikes { to { transform: translate(-50%, -50%) rotate(360deg); } }

.racer .body { display: block; width: 100%; height: 100%; transform: rotate(var(--lean, 0deg)) scaleX(var(--sx, 1)); transform-origin: 50% 70%; }
.racer .ghost { position: absolute; top: 18%; left: 8%; width: 84%; height: 64%; border-radius: 50%; background: var(--c, #ef5a3c); opacity: 0; transform: translateX(calc(var(--lag, 0px) * -1)) scaleX(1.25); pointer-events: none; z-index: -1; }
.racer .ghost.g2 { transform: translateX(calc(var(--lag, 0px) * -2)) scaleX(1.4); }
.racer .ghost.g3 { transform: translateX(calc(var(--lag, 0px) * -3)) scaleX(1.5); }
.racer.running .ghost { opacity: .32; } .racer.running .ghost.g2 { opacity: .18; } .racer.running .ghost.g3 { opacity: .09; }
.puff { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -14px; border-radius: 50%; background: #d9bfae; opacity: .8; pointer-events: none; animation: puff .55s ease-out forwards; }
.puff.big { width: 22px; height: 22px; margin: -11px 0 0 -20px; background: #ffb48a; }
@keyframes puff { to { transform: translate(-26px, -14px) scale(2.2); opacity: 0; } }
.spark { position: absolute; left: var(--sx0); top: var(--sy0); width: 6px; height: 14px; margin: -7px 0 0 -3px; border-radius: 3px; background: var(--sc, #ffd23b); pointer-events: none; z-index: 4; animation: spark .6s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes spark { from { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg)) scale(.4); opacity: 0; } }

.stage.running .lane .track { animation: track-scroll .45s linear infinite; }
.stage.running.rush .lane .track { animation-duration: .16s; }
@keyframes track-scroll { to { background-position: -28px 0; } }
.stage.rush { background: linear-gradient(90deg, #fbe7d8, #ffd2c2); }
.stage.rush .race { transform: scale(1.035); transform-origin: 50% 55%; }
.stage.rush::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 90px, #ffffffb0 90px 150px, transparent 150px 260px); background-size: 520px 100%; animation: streaks .22s linear infinite; opacity: .45; }
@keyframes streaks { to { background-position: -520px 0; } }
.stage.slow .race { animation: strobe .5s steps(2) infinite; }
@keyframes strobe { from { filter: contrast(1.25) saturate(1.3); } to { filter: contrast(1) saturate(.6) sepia(.2); } }
.stage.tense .race { animation: tense-pulse .25s ease-in-out infinite alternate; }
@keyframes tense-pulse { from { transform: scale(1.01); } to { transform: scale(1.04); } }

.stage.spotlight .lane { transition: opacity .25s, filter .25s; }
.stage.spotlight .lane:not(.picked-lane) { opacity: .25; filter: grayscale(.7) blur(1px); }
.stage.spotlight .lane.picked-lane .track { background: linear-gradient(90deg, #fff2a8, #ffd978); box-shadow: 0 0 0 4px #ffcc33, 0 0 30px #ffcc33aa; }
.stage.spotlight .lane.picked-lane .racer .body { animation: picked-jump .35s ease-in-out infinite alternate; }
@keyframes picked-jump { from { transform: translateY(0) scale(1.25); } to { transform: translateY(-8px) scale(1.35) rotate(-8deg); } }

.burst-ring { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(#ffe65a 0 8deg, #ff9a3d 8deg 16deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 62%); mask: radial-gradient(circle, #000 30%, transparent 62%); animation: spin-spikes 7s linear infinite, ring-in .5s cubic-bezier(.2,1.4,.4,1) both; opacity: .85; }
@keyframes ring-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: .85; transform: translate(-50%, -50%) scale(1); } }
.result.slam .result-name { animation: name-slam .6s cubic-bezier(.2,1.5,.4,1) both; font-size: 44px; font-weight: 900; color: var(--tomato-deep); -webkit-text-stroke: 1.5px #2a1a1a; paint-order: stroke fill; text-shadow: 3px 3px 0 #ffd23b; }
@keyframes name-slam { 0% { transform: scale(5) rotate(-8deg); opacity: 0; filter: blur(8px); } 40% { transform: scale(.9) rotate(2deg); opacity: 1; filter: blur(0); } 65% { transform: scale(1.12) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }

/* 밀기·막기: pressing a lane behind or in front of a tomato */
.lanes.pokeable .track { cursor: pointer; }
.lanes.pokeable .track:hover { box-shadow: inset 0 0 0 2px #ffd23b88; }
.poke { position: absolute; top: 50%; translate: -50% -50%; z-index: 3; pointer-events: none; white-space: nowrap; font-size: 12px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 2px 0 #3a2a2a33; animation: poke-pop .7s cubic-bezier(.2,1.5,.4,1) forwards; }
.poke.push { color: #2f9b57; } .poke.block { color: #3b6fd1; }
.poke.mine { font-size: 14px; background: #fff35c; }
@keyframes poke-pop { 0% { scale: .4; opacity: 0; } 20% { scale: 1.15; opacity: 1; } 70% { scale: 1; opacity: 1; translate: -50% -110%; } 100% { opacity: 0; translate: -50% -160%; } }
.racer.poked .body { transition: translate .08s ease-out; }
.racer.poked[data-poke="push"] .body { translate: 6px 0; }
.racer.poked[data-poke="block"] .body { translate: -5px 0; }
.racer.poked[data-poke="push"] .face-normal, .racer.poked[data-poke="block"] .face-normal { display: none; }
.racer.poked[data-poke="push"] .face-boost { display: block; }
.racer.poked[data-poke="block"] .face-dizzy { display: block; }
.racer.poked .tag { background: #fff35c; }
.result-nudge { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--tomato-deep); }
.result-nudge:empty { display: none; }

/* 마블 레이스 maps: the picker and the world under its camera */
body:not([data-mode="marbles"]) #map-pick { display: none; }
.map-pick { flex-wrap: wrap; flex-basis: 100%; }
.map-pick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { border: 0; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 700; background: #f6ece2; color: var(--ink); cursor: pointer; }
.map-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #1f1515; }
.map-blurb { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.pit .world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pit .world svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pit .world .marble-layer { position: absolute; inset: 0; }
.pit .world .marble { box-shadow: none; }
.pit .wall { stroke: #b89a86; stroke-width: 1.5; stroke-linecap: round; }
.pit .bumper { fill: #ff6a3d; stroke: #ffd23b; stroke-width: .9; filter: drop-shadow(0 0 1.5px #ff6a3d); }
.pit .bumper.lit { fill: #ffe65a; stroke: #fff; }
.pit .boost { fill: #5fd27f88; stroke: #2f9b57; stroke-width: .4; stroke-dasharray: 1.2 .8; animation: boost-flow .6s linear infinite; }
@keyframes boost-flow { to { stroke-dashoffset: -2; } }
.pit .honey { fill: #f2a33a55; }
.pit .portal { fill: none; stroke-width: 1.1; stroke-dasharray: 1.6 1; animation: portal-spin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.pit .portal.a { stroke: #8a5cff; } .pit .portal.b { stroke: #ff8a3d; }
.pit .portal.lit { stroke-width: 2.2; }
@keyframes portal-spin { to { rotate: 360deg; } }
.pit .mover { stroke: #3a2a2a; stroke-width: 1.8; stroke-linecap: round; }
.pit .slider { stroke: #4d78c9; }
.pit .pivot { fill: #ffd23b; }
.marble-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.marble-labels span { position: absolute; left: 0; top: 0; font-size: 10px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.marble-labels span.done { opacity: .45; }
/* skills on a marble */
.marble.skill-giant { scale: 1.7; z-index: 2; box-shadow: 0 0 0 .4px #fff, 0 0 3px #ff6a3d; }
.marble.skill-ghost { opacity: .4; outline: .4px dashed #3a2a2a; }
.marble.skill-antigrav { box-shadow: 0 0 3px 1px #5fc7ff; }
.marble.skill-jump, .marble.skill-dash, .marble.skill-bomb { box-shadow: 0 0 4px 1.5px #ffd23b; }

/* 2.8 밀기·막기: the name tag and the presses ride on the tomato. Behind it (left) the names
   pushing, in front of it after the tag the names blocking; dashed hints while pressing is open. */
.lane .who::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--c, transparent); vertical-align: 1px; box-shadow: 0 0 0 1px #3a2a2a33; }
.racer .ahead { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 3px; pointer-events: none; white-space: nowrap; z-index: 3; }
.racer .ahead .tag { position: static; transform: none; }
.lane.called .racer .ahead .tag { transform: scale(1.25); transform-origin: 0 50%; margin-right: 8px; }
.racer .crowd { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; pointer-events: none; z-index: 4; }
.racer .crowd:empty { display: none; }
.racer .crowd.push { right: calc(100% + 2px); flex-direction: row-reverse; }
.racer .ahead .crowd { position: static; transform: none; }
.racer .crowd b { font-size: 11px; font-weight: 900; line-height: 1.3; padding: 0 6px; border-radius: 999px; background: #fff; white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 #3a2a2a22; }
.racer .crowd.push b { color: #23884a; border: 2px solid #4fa86b; }
.racer .crowd.block b { color: #2f5fbf; border: 2px solid #5f8fe6; }
.racer .crowd b.mine { background: #fff35c; }
.racer .crowd b.pop { animation: chip-pop .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes chip-pop { from { scale: 1.4; } to { scale: 1; } }
.racer .hint { display: none; font-size: 11px; font-weight: 900; line-height: 1.3; padding: 0 6px; border-radius: 999px; white-space: nowrap; pointer-events: none; border: 2px dashed currentColor; background: #ffffffd9; }
.racer .hint em { font-style: normal; }
.racer .hint.push { position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%); color: #2f9b57; z-index: 4; }
.racer .hint.block { color: #3b6fd1; }
.lanes.pokeable .racer .hint { display: inline-block; animation: hint-pulse .8s ease-in-out infinite alternate; }
.lanes.pokeable .racer .crowd:not(:empty) + .hint { display: none; }
.lanes.pokeable.knows .racer .hint { animation: none; opacity: .45; }
.lanes.pokeable.knows .racer .hint em, .lanes[data-size="lg"] .racer .hint em, .lanes[data-size="xl"] .racer .hint em { display: none; }
@keyframes hint-pulse { from { opacity: .5; } to { opacity: 1; } }
/* Near the start there is no room behind the tomato, so its pushers sit above it, not on the lane name. */
.racer.near-start .crowd.push, .racer.near-start .hint.push { right: auto; left: 0; top: -8px; }
.lanes[data-size="xl"] .racer .crowd b, .lanes[data-size="xl"] .racer .hint { font-size: 9px; padding: 0 4px; border-width: 1px; }
.lanes[data-size="lg"] .racer .crowd b { font-size: 10px; }
/* Hovering a lane while pressing is open: green behind the tomato (밀기), blue in front (막기). */
.lane .track::before { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.lanes.pokeable .lane[data-aim="push"] .track::before { opacity: 1; background: linear-gradient(90deg, #4fa86b38 0 var(--aim-x, 0px), transparent var(--aim-x, 0px)); }
.lanes.pokeable .lane[data-aim="block"] .track::before { opacity: 1; background: linear-gradient(90deg, transparent var(--aim-x, 0px), #3b6fd133 var(--aim-x, 0px)); }
.lanes.pokeable .lane[data-aim="push"] .track { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='2' y='25' font-size='24'%3E%F0%9F%91%89%3C/text%3E%3C/svg%3E") 16 16, pointer; }
.lanes.pokeable .lane[data-aim="block"] .track { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='2' y='25' font-size='24'%3E%E2%9C%8B%3C/text%3E%3C/svg%3E") 16 16, pointer; }
.stage-note.timed::after { content: ""; display: block; height: 4px; margin-top: 5px; border-radius: 999px; background: linear-gradient(90deg, #4fa86b, #ffd23b); transform-origin: 0 50%; animation: cheer-time var(--left, 5s) linear forwards; }
.poke { font-size: 13px; border: 2px solid currentColor; }
.me-field input { width: 120px; }

/* 방: a pill under the title says which room this page is in; its dialog invites, joins and creates rooms.
   The current room sits on the track colour, the code in tomato red so it can be read aloud. */
.room-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 0; border-radius: 999px; padding: 7px 14px 7px 12px; background: #ffffffb3; color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 1px 4px #3a2a2a14; }
.room-pill:hover { background: #fff; }
.room-pill.in-room { background: #fff; box-shadow: 0 2px 10px #3a2a2a1f; }
.room-code { padding: 2px 8px; border-radius: 999px; background: #fdebe5; color: var(--tomato-deep); font-size: 12px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.room-caret { color: var(--ink-soft); font-size: 11px; }
.room-dialog { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 18px; padding: 18px 20px 20px; color: var(--ink); background: var(--card); box-shadow: 0 24px 60px -20px #3a2a2a59; }
.room-dialog::backdrop { background: #3a2a2a59; }
.room-head { display: flex; justify-content: space-between; align-items: center; }
.room-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.room-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.room-here { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--track); }
.room-here-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-here-name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.room-here-code { margin: 4px 0 0; color: var(--tomato-deep); font-size: 15px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.room-here-code:empty { display: none; }
.room-share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.room-help { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.room-others, .room-form { margin-top: 16px; }
.room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.room-list li { display: flex; align-items: center; gap: 4px; }
.room-go { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; border: 0; border-radius: 10px; padding: 9px 12px; background: #fbf1ee; text-align: left; }
.room-go:hover:not(:disabled) { background: #f6e2dc; }
.room-go:disabled { cursor: default; background: transparent; box-shadow: inset 0 0 0 2px #f1e6e6; }
.room-go b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-go small { flex: none; font-size: 12px; color: var(--ink-soft); letter-spacing: .5px; }
.room-here-mark { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--leaf-deep); }
.room-drop { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 16px; }
.room-drop:hover { background: #f3dcd6; color: var(--tomato-deep); }
.room-form-row { display: flex; gap: 8px; }
.room-form-row input { flex: 1; min-width: 0; border: 2px solid #f1e6e6; border-radius: 12px; padding: 9px 12px; background: #fff; font-size: 15px; }
.room-form-row input:focus { border-color: var(--tomato); outline: none; }
#room-join-code { text-transform: uppercase; letter-spacing: 1px; }
#room-join-code::placeholder { text-transform: none; letter-spacing: 0; }
.room-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #eef7f0; color: var(--leaf-deep); font-size: 13px; line-height: 1.5; }
.room-error { margin: 12px 0 0; color: var(--tomato-deep); font-size: 13px; }
.room-pass-row { margin-top: 8px; }
.room-key { margin-top: 12px; padding: 14px; border-radius: 14px; background: #fff6d6; }