.avatar {
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #7138d0;
  object-fit: cover;
}

.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-user[hidden],
.google-login[hidden] {
  display: none;
}

.google-login {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #35465a;
  background: #fff;
  color: #263344;
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.google-login:hover { background: #eef3f8; }
.google-login:disabled { opacity: .65; cursor: wait; }

.google-mark {
  color: #4285f4;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

#nicknameDialog form { min-width: min(420px, calc(100vw - 40px)); }
#nicknameDialog label { display: grid; gap: 8px; color: #8296ad; }
#nicknameDialog input { width: 100%; }
.roster-card.locked { cursor: not-allowed; opacity: .55; }
.roster-card.assigned { position: relative; overflow: hidden; opacity: 1; }
.roster-card.assigned > span { opacity: .25; }
.roster-card.assigned::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -12%;
  top: 50%;
  width: 124%;
  height: 3px;
  background: #ff3542;
  box-shadow: 0 0 0 1px #6d1118, 0 0 8px #ff354288;
  transform: rotate(-12deg);
  pointer-events: none;
}
.roster-card.assigned::after {
  content: "SOLD OUT";
  position: absolute;
  z-index: 3;
  right: 8px;
  top: 50%;
  padding: 2px 6px;
  border: 2px solid #ff3542;
  border-radius: 2px;
  color: #ff4d58;
  background: #111a26e8;
  font-family: "Space Mono";
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .8px;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}
.party-requirements { display: flex; align-items: center; gap: 5px; }
.requirement-tag { padding: 3px 7px; border-radius: 3px; font-family: "Space Mono"; font-size: 8px; }
.missing-tank { color: #ff6971; background: #4a222b; }
.missing-sharp { color: #49e4ac; background: #123f35; }
.member-card { position: relative; }
.member-owner {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 7px;
  border-radius: 6px;
  background: #12b95c;
  color: #fff;
  font-family: "Space Mono";
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #3f82ef;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  box-shadow: inset 0 -3px 0 #2463c7;
}

/* 전체 가독성 확대 */
.brand { font-size: 14px; }
.account { font-size: 13px; }
.button { font-size: 11px; }
.boss-tab { font-size: 11px; }
.party-count { font-size: 12px; }
.panel-heading h2 { font-size: 11px; }
.search-box { height: 34px; }
.search-box input { font-size: 13px; }
.owner-heading { padding-block: 5px; font-size: 11px; }
.roster-card { min-height: 58px; height: auto; padding-block: 8px; }
.card-copy strong,
.member-card strong { font-size: 13px; }
.card-copy small,
.card-meta small,
.member-card small { font-size: 11px; }
.role,
.mini-role { font-size: 9px; }
.workspace-header h1 { font-size: 19px; }
.workspace-header p { font-size: 13px; }
.summary span { font-size: 9px; }
.party-header strong { font-size: 13px; }
.member-count { font-size: 10px; }
.requirement-tag { font-size: 9px; }
.empty-slot { font-size: 11px; }
.member-owner { font-size: 10px; }

/* 왼쪽 캐릭터 목록을 고정하고 파티 영역만 스크롤 */
.app-shell { height: calc(100vh - 91px); min-height: 0; overflow: hidden; }
.character-panel { height: 100%; overflow-y: auto; }
.workspace { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
#addParty { white-space: nowrap; }
#openPresets { white-space: nowrap; }
#presetDialog form { min-width: min(520px, calc(100vw - 40px)); }
.preset-save-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.preset-save-row input { min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #0b131d; color: #e8f0fa; padding: 0 10px; outline: 0; }
.preset-save-row input:focus { border-color: #bd791a; }
.preset-help { margin: 7px 0 14px; color: #6f849b; font-size: 11px; }
.preset-list { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; }
.preset-empty { display: grid; place-items: center; min-height: 110px; border: 1px dashed #2a3b4d; border-radius: 8px; color: #73889f; }
.preset-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #293a4c; border-radius: 8px; background: #111b26; }
.preset-item strong { display: block; color: #e7eff9; font-family: "Space Mono"; font-size: 12px; }
.preset-item small { color: #7f95ad; font-size: 10px; }
.preset-actions { display: flex; gap: 6px; }
.preset-load,.preset-delete { border: 0; background: none; cursor: pointer; font-size: 11px; }
.preset-load { color: #ffab2e; }
.preset-delete { color: #7d91a7; }
.party-buff-icons { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; margin-left: 5px; }
.party-buff-icon { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; border: 1px solid #53677d; border-radius: 4px; background: #eaf3fb; box-shadow: 0 1px 4px #0008; }

/* 혼테일 일반: 격수 6칸 + 1/3 크기 버프 18칸 x 1줄 */
.horntail-slots { grid-template-columns: repeat(18, minmax(42px, 1fr)); gap: 5px; }
.horntail-slots > :nth-child(-n + 6) { grid-column: span 3; }
.horntail-slots .buffer-compact { height: 35px; min-width: 0; border-radius: 5px; }
.horntail-slots .member-card.buffer-compact { flex-direction: row; justify-content: flex-start; gap: 3px; padding: 3px; overflow: hidden; }
.horntail-slots .buffer-compact .member-owner { position: static; flex: 0 1 auto; min-width: 0; max-width: 55%; padding: 1px 4px; border-radius: 3px; font-size: 7px; line-height: 13px; }
.horntail-slots .buffer-compact .class-icon,
.horntail-slots .buffer-compact small,
.horntail-slots .buffer-compact .role { display: none; }
.horntail-slots .buffer-compact strong { flex: 1; min-width: 0; font-size: 9px; text-align: center; }
.horntail-slots .empty-slot.buffer-compact { font-size: 8px; }

/* 숫자 가독성 */
.member-count,
.card-copy small,
.member-card small,
.owner-heading b,
.summary strong,
.party-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .45px;
}
.member-count {
  padding: 4px 10px;
  color: #bfd0e2;
  font-size: 11px;
}
.card-copy small,
.member-card small { color: #93abc4; }
.owner-heading b { color: #b7cae0; }
.day-off-toggle { display: flex; align-items: center; gap: 6px; color: #f5c56b; font-size: 12px; white-space: nowrap; cursor: pointer; }
.day-off-toggle input { width: 15px; height: 15px; accent-color: #ff9f2f; cursor: pointer; }
.participant-count { padding: 4px 9px; border-radius: 12px; background: #173a31; color: #55e0ad; font-family: "Space Mono"; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.roster-card.day-off { position: relative; overflow: hidden; opacity: 1; }
.roster-card.day-off > span { opacity: .25; }
.roster-card.day-off::before { content: ""; position: absolute; z-index: 4; left: -12%; top: 50%; width: 124%; height: 3px; background: #ff9f2f; box-shadow: 0 0 0 1px #70410d, 0 0 8px #ff9f2f88; transform: rotate(-12deg); pointer-events: none; }
.roster-card.day-off::after { content: "휴무"; position: absolute; z-index: 5; right: 9px; top: 50%; padding: 2px 8px; border: 2px solid #ff9f2f; border-radius: 2px; color: #ffb347; background: #111a26e8; font-family: "Space Mono"; font-size: 9px; font-weight: 700; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
.roster-card:has(.availability-toggle) { padding-right: 38px; }
.availability-toggle { position: absolute; z-index: 8; right: 7px; top: 50%; width: 23px; height: 23px; border: 1px solid #74404a; border-radius: 5px; background: #3c2028; color: #ff6570; font-size: 16px; font-weight: 700; line-height: 19px; transform: translateY(-50%); cursor: pointer; }
.availability-toggle:hover { border-color: #ff6570; background: #542630; }
.roster-card.sold-out { position: relative; overflow: hidden; opacity: 1; }
.roster-card.sold-out > span { opacity: .25; }
.roster-card.sold-out::before { content: ""; position: absolute; z-index: 4; left: -12%; top: 50%; width: 124%; height: 3px; background: #ff3542; box-shadow: 0 0 0 1px #6d1118, 0 0 8px #ff354288; transform: rotate(-12deg); pointer-events: none; }
.roster-card.sold-out::after { content: "SOLD OUT"; position: absolute; z-index: 5; right: 38px; top: 50%; padding: 2px 6px; border: 2px solid #ff3542; border-radius: 2px; color: #ff4d58; background: #111a26e8; font-family: "Space Mono"; font-size: 8px; font-weight: 700; letter-spacing: .8px; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
.roster-card.sold-out .availability-toggle { border-color: #2e7158; background: #173c31; color: #52dca9; }

/* 주황버섯 데미지 추첨기 */
.lottery-page[hidden], .app-shell[hidden] { display: none; }
.lottery-page { min-height: calc(100vh - 91px); padding: 24px; background: radial-gradient(circle at 50% 30%, #17283b, #080e15 62%); }
.lottery-panel { max-width: 1180px; margin: 0 auto; }
.lottery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.lottery-heading h1 { margin: 4px 0 5px; font-family: "Space Mono"; font-size: 22px; }
.lottery-heading p { margin: 0; color: #8ea5bd; font-size: 14px; }
.lottery-controls { display: grid; grid-template-columns: 1fr 2fr auto; gap: 14px; align-items: end; margin-bottom: 16px; padding: 16px; border: 1px solid #30465a; border-radius: 12px; background: #101a26; }
.lottery-controls strong { display: block; margin-bottom: 9px; color: #b9cbe0; font-size: 13px; }
#lotteryBosses { display: flex; gap: 6px; flex-wrap: wrap; }
.lottery-boss { padding: 7px 10px; border: 1px solid #344a60; border-radius: 6px; color: #8da5bf; background: #0b141e; cursor: pointer; }
.lottery-boss.active { border-color: #ff9b25; color: #ffc064; background: #342514; }
.lottery-users-title { display: flex; align-items: center; justify-content: space-between; }
.lottery-users-title button { border: 0; color: #6eb8ff; background: transparent; cursor: pointer; }
#lotteryUserList { display: flex; gap: 7px; flex-wrap: wrap; }
.lottery-user { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #304357; border-radius: 7px; background: #0c151f; cursor: pointer; }
.lottery-user:has(input:checked) { border-color: var(--user-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--user-color), transparent 60%); }
.lottery-user input { display: none; }
.lottery-user-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--user-color); }
.lottery-user strong { margin: 0; color: #eaf3fd; }
.lottery-user small { color: #71879e; }
.lottery-empty { padding: 8px; color: #73899f; }
.lottery-start { min-width: 120px; height: 42px; }
.lottery-stage { position: relative; height: 380px; overflow: hidden; border: 2px solid #3c5369; border-radius: 14px; background: linear-gradient(#64b8e4 0 61%, #b4dd77 61% 65%, #789c45 65%); box-shadow: inset 0 0 40px #14223166; image-rendering: pixelated; }
.lottery-sky span { position: absolute; width: 90px; height: 18px; border-radius: 20px; background: #eafaffcc; box-shadow: 24px -12px 0 #eafaffcc, 48px 0 0 #eafaffcc; }
.lottery-sky span:nth-child(1) { top: 45px; left: 12%; }.lottery-sky span:nth-child(2) { top: 80px; left: 55%; transform: scale(.7); }.lottery-sky span:nth-child(3) { top: 28px; right: 6%; transform: scale(.45); }
.lottery-ground { position: absolute; inset: auto 0 0; height: 78px; background: repeating-linear-gradient(90deg,#7b4b28 0 24px,#89562f 24px 48px); border-top: 10px solid #4f792c; }
.orange-mushroom { position: absolute; z-index: 3; right: 19%; bottom: 70px; width: 112px; height: 112px; transition: transform .12s; }
.orange-mushroom i { position: absolute; left: 6px; top: 4px; width: 100px; height: 63px; border: 6px solid #5a260f; border-radius: 55px 55px 25px 25px; background: #f18a24; box-shadow: inset 0 -12px #c85b16; }
.orange-mushroom i::before,.orange-mushroom i::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#ffd77b; }.orange-mushroom i::before{left:15px;top:13px}.orange-mushroom i::after{right:14px;top:9px}
.orange-mushroom b { position: absolute; left: 27px; top: 60px; width: 58px; height: 47px; border: 6px solid #5a260f; border-radius: 8px 8px 25px 25px; background: #f2c98d; }
.orange-mushroom span::before,.orange-mushroom span::after { content:""; position:absolute; z-index:4; top:75px; width:8px; height:12px; background:#301a15; }.orange-mushroom span::before{left:44px}.orange-mushroom span::after{right:43px}
.orange-mushroom.hit { transform: translateX(18px) rotate(9deg); filter: brightness(1.5); }
.lottery-fighter { position: absolute; z-index: 5; left: -150px; bottom: 68px; width: 105px; text-align: center; opacity: 0; }
.lottery-fighter.enter { animation: fighter-enter .7s forwards; }.lottery-fighter.attack { left: 58%; opacity: 1; animation: fighter-attack .36s ease-in-out; }.lottery-fighter.exit { animation: fighter-exit .5s forwards; }
.fighter-name { display: inline-block; max-width: 120px; margin-bottom: 5px; padding: 3px 8px; border-radius: 10px; color: #fff; background: #101923dd; font-weight: 700; white-space: nowrap; }
.pixel-character { position: relative; width: 72px; height: 92px; margin: auto; }
.pixel-character i { position:absolute; left:22px; top:3px; width:36px; height:34px; border:5px solid #342019; border-radius:45%; background:#f5c594; box-shadow:0 -9px 0 var(--fighter-color); }
.pixel-character b { position:absolute; left:17px; top:39px; width:46px; height:37px; border:5px solid #253248; border-radius:9px; background:var(--fighter-color); }
.pixel-character em::before,.pixel-character em::after { content:""; position:absolute; top:74px; width:15px; height:17px; border:5px solid #27202a; background:#fff; }.pixel-character em::before{left:16px}.pixel-character em::after{right:10px}
.damage-number { position:absolute; z-index:8; right:22%; top:62px; color:#fff; font-family:"Arial Black",Impact,sans-serif; font-size:92px; font-style:italic; line-height:1; -webkit-text-stroke:9px #63143f; paint-order:stroke fill; text-shadow:0 7px 0 #ff4d94,0 12px 0 #8e164c,5px 16px 8px #0009; opacity:0; transform:scale(.3) rotate(-8deg); }
.damage-number.show { animation: damage-pop 1s ease-out; }
.lottery-status { min-height: 58px; display:grid; place-items:center; margin-top:12px; border:1px solid #2f4357; border-radius:10px; background:#101923; color:#a9bdd2; font-size:16px; }
.lottery-status strong { color:#ffbe45; font-family:"Space Mono"; font-size:23px; animation:winner-pulse .8s infinite alternate; }
.lottery-results { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.lottery-result { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #2c3c4c; border-radius:7px; background:#101923; color:#8ca3ba; }.lottery-result.latest{border-color:#526c86;color:#dcecff}.lottery-result b{color:#ff6ca9;font-family:"Space Mono";font-size:18px}.lottery-result small{color:#ffab48}
.lottery-stage.winner { box-shadow:inset 0 0 80px #ffcf3d99,0 0 30px #ffb52d66; }
@keyframes fighter-enter { from{left:-130px;opacity:0} to{left:58%;opacity:1} } @keyframes fighter-attack { 0%,100%{transform:translateX(0)} 50%{transform:translateX(68px) rotate(-8deg)} } @keyframes fighter-exit { from{left:58%;opacity:1} to{left:110%;opacity:0} } @keyframes damage-pop { 0%{opacity:0;transform:scale(.25) rotate(-12deg)} 25%{opacity:1;transform:scale(1.2) rotate(-5deg)} 70%{opacity:1;transform:scale(1) rotate(-5deg)} 100%{opacity:0;transform:translateY(-35px) scale(.9) rotate(-5deg)} } @keyframes winner-pulse { to{transform:scale(1.07);filter:brightness(1.3)} }
@media(max-width:800px){.lottery-controls{grid-template-columns:1fr}.lottery-stage{height:330px}.damage-number{right:14%;font-size:72px}.orange-mushroom{right:8%}.lottery-fighter.attack{left:43%}@keyframes fighter-enter{to{left:43%;opacity:1}}@keyframes fighter-exit{from{left:43%;opacity:1}to{left:110%;opacity:0}}}

/* 제공된 메이플 캐릭터/몬스터 이미지 */
.lottery-fighter { width: 180px; bottom: 60px; }
.lottery-character-image { display: block; width: 180px; height: 180px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 3px #18314588); }
.orange-mushroom { right: 16%; bottom: 67px; width: 180px; height: 225px; }
.lottery-monster-image { display: block; width: 180px; height: 225px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 4px #20361688); }
.orange-mushroom.hit { transform: translateX(22px) rotate(7deg) scale(.94); filter: brightness(1.45); }
@media(max-width:800px){.lottery-fighter{width:140px}.lottery-character-image{width:140px;height:140px}.orange-mushroom{right:5%;width:140px;height:175px}.lottery-monster-image{width:140px;height:175px}}

/* 우마무스메풍 랜덤 달리기 미니게임 */
.lottery-mode-tabs { display: flex; gap: 7px; margin: 0 0 12px; }
.lottery-mode-tabs button { min-width: 135px; padding: 9px 15px; border: 1px solid #30465a; border-radius: 8px; color: #879db4; background: #0d1722; font-weight: 700; cursor: pointer; }
.lottery-mode-tabs button.active { border-color: #ff9e2c; color: #ffc56e; background: #342515; box-shadow: inset 0 -2px #ff9e2c; }
.race-stage[hidden], .lottery-stage[hidden] { display: none; }
.race-stage { position: relative; min-height: 390px; max-height: 560px; overflow: auto; border: 2px solid #3b5369; border-radius: 14px; background: linear-gradient(#63b4df 0 26%, #9ad46c 26% 31%, #7eb354 31%); box-shadow: inset 0 0 35px #18334855; }
.race3d-mount { display:none; position:absolute; inset:0; z-index:6; overflow:hidden; background:#72c8ed; }
.race3d-mount canvas { display:block; width:100%; height:100%; }
.race-stage.three-mode { height:540px; max-height:none; overflow:hidden; background:#72c8ed; }
.race-stage.three-mode .race3d-mount { display:block; }
.race-stage.three-mode .race-scenery,.race-stage.three-mode .race-track,.race-stage.three-mode .finish-line { display:none; }
.race-stage.three-mode.celebrating::before { display:none; }
.race-stage.three-mode.celebrating::after { z-index:18; }
.race-scenery { position: sticky; z-index: 0; top: 0; height: 0; pointer-events: none; }
.race-scenery span { position: absolute; top: 34px; left: 12%; width: 75px; height: 14px; border-radius: 20px; background: #effcffdd; box-shadow: 20px -8px #effcffdd, 40px 0 #effcffdd; }
.race-scenery span:nth-child(2) { left: 60%; top: 58px; transform: scale(.7); }
.race-track { position: relative; z-index: 2; padding: 88px 0 24px; min-height: 386px; }
.race-lane { position: relative; height: 76px; border-top: 2px dashed #ffffff88; background: linear-gradient(90deg,#9d6a3d,#ae7544); box-shadow: inset 0 5px #714a2d44; }
.race-lane:last-child { border-bottom: 2px dashed #ffffff88; }
.lane-number { position: absolute; z-index: 4; left: 8px; top: 24px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #263d55cc; font-family: "Space Mono"; font-weight: 700; }
.finish-line { position: absolute; z-index: 3; top: 82px; right: 9%; bottom: 18px; width: 23px; background: repeating-conic-gradient(#fff 0 25%,#20252b 0 50%) 0 0/14px 14px; border-inline: 2px solid #fff; box-shadow: 0 0 8px #0008; pointer-events: none; }
.finish-line b { position: absolute; left: 50%; top: -28px; padding: 3px 7px; color: #1d2530; background: #fff; font-family: "Space Mono"; font-size: 9px; transform: translateX(-50%); }
.race-runner { position: absolute; z-index: 5; left: 38px; top: 3px; width: 68px; height: 70px; transition: left .14s linear; will-change: left; }
.runner-name { position: absolute; left: 50%; top: -1px; max-width: 90px; padding: 1px 6px; border-radius: 8px; color: #fff; background: #152537dc; font-size: 9px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.white-runner { position: absolute; left: 14px; top: 14px; width: 40px; height: 55px; animation: runner-bob .32s infinite alternate ease-in-out; filter: drop-shadow(0 3px 1px #402a1f77); }
.white-runner b { position: absolute; z-index: 3; left: 6px; top: 0; display: grid; place-items: center; width: 27px; height: 27px; border: 3px solid #263345; border-radius: 50%; color: #1c2a3a; background: #fff; font-family: "Space Mono"; font-size: 13px; font-style: normal; }
.white-runner i { position: absolute; left: 8px; top: 24px; width: 23px; height: 19px; border: 3px solid #263345; border-radius: 9px 9px 5px 5px; background: #fff; box-shadow: inset 0 -5px var(--runner-accent); }
.white-runner i::before,.white-runner i::after { content:""; position:absolute; top:2px; width:14px; height:5px; border:3px solid #263345; border-radius:5px; background:#fff; transform-origin:center; }
.white-runner i::before { left:-13px; transform:rotate(-28deg); }.white-runner i::after { right:-13px; transform:rotate(28deg); }
.white-runner em::before,.white-runner em::after { content:""; position:absolute; z-index:1; top:40px; width:9px; height:16px; border:3px solid #263345; border-radius:3px 3px 6px 6px; background:#fff; transform-origin:50% 0; }
.white-runner em::before{left:8px;animation:runner-leg-left .22s infinite alternate ease-in-out}.white-runner em::after{right:7px;animation:runner-leg-right .22s infinite alternate ease-in-out}
.race-runner::before,.race-runner::after { content:""; position:absolute; z-index:7; top:64px; width:17px; height:6px; border-radius:6px 2px 4px 4px; background:#263345; }
.race-runner::before{left:14px;animation:runner-shoe-left .22s infinite alternate ease-in-out}.race-runner::after{left:39px;animation:runner-shoe-right .22s infinite alternate ease-in-out}
.race-runner.sprinting .white-runner { animation-duration: .18s; filter: drop-shadow(-9px 1px 0 #fff8) drop-shadow(-17px 1px 0 #fff4); }
.race-runner.race-finished:not(.race-winner) { opacity: .55; filter: grayscale(.45); }
.race-stage.celebrating::before { content:""; position:absolute; z-index:8; inset:0; background:#06111db0; backdrop-filter:blur(2px); pointer-events:none; }
.race-stage.celebrating .race-runner.race-winner { position:absolute; z-index:15; left:50%!important; top:44%; width:90px; height:100px; opacity:1; animation:winner-center-in .55s cubic-bezier(.2,1.35,.4,1) forwards; }
.race-runner.race-winner .runner-name { color: #633600; background: #ffd45b; box-shadow: 0 0 15px #ffd84d; }
.race-runner.race-winner .white-runner { left:24px; top:20px; animation:annoying-dance .46s .55s infinite alternate ease-in-out; transform-origin:50% 80%; }
.race-runner.race-winner .white-runner i::before { animation:brag-left .28s .55s infinite alternate; }.race-runner.race-winner .white-runner i::after { animation:brag-right .28s .55s infinite alternate-reverse; }
.race-runner.race-winner .white-runner em::before { animation:winner-kick-left .32s .55s infinite alternate; }.race-runner.race-winner .white-runner em::after { animation:winner-kick-right .32s .55s infinite alternate-reverse; }
.race-runner.race-winner::after { content:"벌레컷 ㅋ"; left:auto; right:-38px; top:-24px; width:max-content; height:auto; padding:5px 8px; border:2px solid #303b48; border-radius:10px; color:#1a2530; background:#fff; font-size:10px; font-weight:700; animation:brag-bubble .55s infinite alternate; box-shadow:0 3px 0 #25354566; }
.race-runner.race-winner::before { content:""; left:auto; right:-5px; top:-4px; width:9px; height:9px; border:0; border-right:2px solid #303b48; border-bottom:2px solid #303b48; border-radius:0; background:#fff; animation:none; transform:rotate(45deg); }
.race-stage.celebrating::after { content:"🎉  ✨  🎊  ✨  🎉"; position:sticky; z-index:12; left:35%; bottom:20px; display:block; width:max-content; font-size:27px; animation:confetti-pop .7s infinite alternate; pointer-events:none; }
@keyframes runner-bob { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-4px) rotate(3deg)} }
@keyframes runner-leg-left { from{transform:rotate(28deg) translateY(-1px)} to{transform:rotate(-32deg) translateY(1px)} } @keyframes runner-leg-right { from{transform:rotate(-32deg) translateY(1px)} to{transform:rotate(28deg) translateY(-1px)} }
@keyframes runner-shoe-left { from{transform:translate(-5px,-2px)} to{transform:translate(7px,1px)} } @keyframes runner-shoe-right { from{transform:translate(7px,1px)} to{transform:translate(-5px,-2px)} }
@keyframes winner-center-in { from{opacity:0;transform:translate(-50%,-20%) scale(.35) rotate(-25deg)} to{opacity:1;transform:translate(-50%,-50%) scale(2.15) rotate(0)} }
@keyframes annoying-dance { 0%{transform:translate(-8px,-5px) rotate(-16deg) skewX(-8deg)} 50%{transform:translateY(5px) rotate(0) scaleY(.9)} 100%{transform:translate(8px,-5px) rotate(16deg) skewX(8deg)} }
@keyframes brag-left { from{transform:rotate(-120deg) translateY(-5px)} to{transform:rotate(38deg) translateY(3px)} } @keyframes brag-right { from{transform:rotate(120deg) translateY(-5px)} to{transform:rotate(-38deg) translateY(3px)} }
@keyframes winner-kick-left { from{transform:rotate(55deg) translateY(-3px)} to{transform:rotate(-35deg) translateY(2px)} } @keyframes winner-kick-right { from{transform:rotate(-55deg) translateY(-3px)} to{transform:rotate(35deg) translateY(2px)} }
@keyframes brag-bubble { to{transform:translateY(-7px) rotate(3deg)} }
@keyframes confetti-pop { to{transform:translateY(-12px) scale(1.12)} }
@media(max-width:800px){.finish-line{right:8%}.lottery-mode-tabs button{min-width:0;flex:1}}