:root {
  --bg1: #17172f;
  --bg2: #2a1a52;
  --card: rgba(255, 255, 255, 0.12);
  --card2: rgba(255, 255, 255, 0.18);
  --text: #fff9ff;
  --muted: rgba(255,255,255,.72);
  --accent: #67f6ff;
  --accent2: #ffe761;
  --danger: #ff5577;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body {
  font-family: ui-rounded, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 15%, rgba(103,246,255,.28), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(255,231,97,.25), transparent 28%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 58%, #15152b);
  background-attachment: fixed;
  touch-action: pan-y;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 16%, transparent 84%, rgba(0,0,0,.18));
  opacity: .45;
}
.app {
  width: min(100vw, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px calc(14px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  background: rgba(13, 12, 34, .16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 90px rgba(0,0,0,.34);
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 0; }
.brand-line { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
h1 { margin: 0; font-size: clamp(24px, 6.6vw, 30px); letter-spacing: -0.04em; line-height: 1; text-shadow: 0 4px 16px rgba(0,0,0,.28); }
.version-chip { display: inline-flex; align-items: center; margin-top: 0; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); font-size: 11px; font-weight: 900; }
.pill, .ghost, .primary, .danger, .view-mode, .angle-btn { border-radius: 999px; font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.small { padding: 7px 11px; background: rgba(255,255,255,.18); }
.tiny { padding: 6px 10px; background: rgba(255,255,255,.18); }
.ad-wrap {
  --progress: 0;
  --skin-accent: #c98cff;
  --ad-frame-size: 6px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: 24px;
  padding: var(--ad-frame-size);
  background: transparent;
  box-shadow: none;
  transition: filter .18s ease;
}
.ad-wrap::before,
.ad-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from -90deg,
      var(--skin-accent) 0 calc(var(--progress) * 1%),
      rgba(255,255,255,.16) calc(var(--progress) * 1%) 100%
    );
  pointer-events: none;
}
.ad-wrap::before {
  z-index: 1;
}
.ad-wrap::after {
  inset: -3px;
  z-index: 0;
  opacity: .72;
  filter: blur(8px);
}
.ad-card {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  min-height: 44px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2a4966, #1b314e);
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  pointer-events: auto;
}
.ad-placeholder {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 2px;
}
.ad-progress-marker { display: none !important; }
.ad-wrap[data-progress-near="true"]::before { filter: brightness(1.18); }
.ad-wrap[data-progress-near="true"]::after { opacity: .92; filter: blur(10px); }
.ad-wrap .confetti-layer {
  z-index: 2;
  pointer-events: none;
}

.ad-card strong { font-size: 16px; line-height: 1.05; }
.ad-card small { color: var(--muted); font-weight: 700; font-size: 11px; }
.ad-label { font-size: 11px; color: #15152b; background: var(--accent2); padding: 3px 8px; border-radius: 999px; font-weight: 1000; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stats-grid article, .rank-prep, .view-panel, .update-banner { border-radius: 18px; background: var(--card); border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.stats-grid article { padding: 6px 4px; text-align: center; }
.stats-grid span, .section-kicker { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.stats-grid strong { display: block; margin-top: 2px; font-size: 15px; }
.rank-prep, .view-panel, .update-banner { padding: 8px; }
.rank-head, .view-mode-buttons { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rank-head strong { display: block; margin-top: 3px; }
.rank-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.rank-cards article { border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); padding: 6px 4px; text-align: center; }
.rank-cards span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.rank-cards strong { display: block; margin-top: 2px; font-size: 12px; }
.view-mode-buttons { justify-content: flex-start; }
.view-mode { padding: 8px 12px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); }
.view-mode.active { background: linear-gradient(135deg, rgba(103,246,255,.3), rgba(255,231,97,.3)); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.angle-tools { display: grid; gap: 6px; margin-top: 8px; }
.update-banner span { color: var(--muted); font-weight: 700; }
.angle-row { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; }
.angle-btn { width: 36px; height: 32px; background: rgba(255,255,255,.13); color: #fff; font-size: 24px; line-height: 1; }
.view-slider { width: 100%; accent-color: #67f6ff; cursor: pointer; }
.view-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #ff4bd8, #ffe761, #67f6ff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.view-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #67f6ff; margin-top: -6px; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.view-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.view-dots span { width: 10px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.16); transition: transform .14s ease, background .14s ease, box-shadow .14s ease; cursor: pointer; }
.view-dots span.active { background: linear-gradient(135deg, #67f6ff, #ffe761); box-shadow: 0 0 12px rgba(103,246,255,.45); transform: scale(1.18); }
.update-banner { display: flex; align-items: center; justify-content: space-between; }
.game-zone { min-height: 0; display: grid; grid-template-rows: auto auto auto; align-items: center; justify-items: center; gap: 6px; position: relative; padding-bottom: 0; }
.status-line { min-height: 32px; padding: 7px 13px; border-radius: 999px; background: rgba(0,0,0,.22); color: rgba(255,255,255,.88); font-weight: 900; text-align: center; display: inline-flex; align-items: center; gap: 8px; }
.status-line em { color: #ffe761; font-style: normal; }
.keycap { width: min(62vw, 270px); max-width: 100%; position: relative; background: transparent; padding: 0; border: 0; user-select: none; -webkit-user-select: none; touch-action: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); transform: translateY(0) scale(1); transition: transform .08s ease, filter .18s ease; overflow: visible; }
.keycap::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 4%; height: 22%; pointer-events: none; z-index: 1; background:
  radial-gradient(48% 64% at 50% 96%, rgba(23,23,47,.96) 0 28%, rgba(23,23,47,.78) 46%, transparent 67%),
  radial-gradient(24% 58% at 10% 72%, rgba(23,23,47,.98) 0 35%, transparent 57%),
  radial-gradient(24% 58% at 90% 72%, rgba(23,23,47,.98) 0 35%, transparent 57%);
  filter: blur(3px); }
.keycap::after { content: ""; position: absolute; inset: 84% 15% 2% 15%; border-radius: 999px; background: rgba(0,0,0,.28); filter: blur(13px); z-index: -1; }
.keycap.drag-ready { cursor: grabbing; }
.keycap.dragging { filter: drop-shadow(0 18px 30px rgba(0,0,0,.42)); }
.keycap.pressed { transform: translateY(10px) scale(.985); }
.keycap.breaking { animation: shake .26s linear; }
.keycap.burst { animation: burst .42s ease-in-out; }
.keycap.hard .keycap-image { filter: saturate(.92) contrast(1.02) drop-shadow(0 0 0 rgba(0,0,0,0)); }
.keycap-image { width: 100%; height: auto; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; background: transparent; position: relative; z-index: 0; }
.crack, .crack-chip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 2; }
.crack { width: 4px; border-radius: 99px; background: rgba(89, 34, 58, .55); box-shadow: 0 0 0 1px rgba(255,255,255,.16); transform-origin: top; }
.crack-a { height: 78px; left: 45%; top: 20%; transform: rotate(24deg); }
.crack-b { height: 56px; left: 57%; top: 48%; transform: rotate(-46deg); }
.crack-c { height: 48px; left: 34%; top: 49%; transform: rotate(68deg); }
.crack-d { height: 36px; left: 66%; top: 31%; transform: rotate(15deg); }
.crack-chip { width: 18px; height: 12px; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; }
.chip-a { left: 24%; top: 63%; transform: rotate(-18deg); }
.chip-b { right: 18%; top: 58%; transform: rotate(22deg); }
.damage-1 .crack-a { opacity: .32; }
.damage-2 .crack-a, .damage-2 .crack-b { opacity: .55; }
.damage-3 .crack-a, .damage-3 .crack-b, .damage-3 .crack-c { opacity: .76; }
.damage-4 .crack-a, .damage-4 .crack-b, .damage-4 .crack-c, .damage-4 .chip-a { opacity: .88; }
.damage-5 .crack, .damage-5 .crack-chip { opacity: .96; }
.progress-shell { width: 90%; height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.progress-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #67f6ff, #ffe761, #ff5577); transition: width .12s ease; }
.controls, .social-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.primary, .danger { min-height: 44px; padding: 10px 12px; font-size: 15px; }
.primary { background: linear-gradient(135deg, #58edff, #7dffb5); color: #12152e; }
.danger { background: linear-gradient(135deg, #ff5577, #ffbd5f); color: #27112a; }
.options { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 0; }
.toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 900; }
.toggle input { accent-color: #67f6ff; }
.ghost { padding: 8px 10px; background: rgba(255,255,255,.10); color: rgba(255,255,255,.86); font-size: 11px; }
.wide { width: 100%; min-height: 40px; }
dialog { border: 0; border-radius: 24px; padding: 0; background: transparent; color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(3px); }
.dialog-box { width: min(88vw, 390px); border-radius: 24px; background: linear-gradient(160deg, #23234a, #38215b); padding: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.16); }
.dialog-box h2 { margin: 0 0 10px; }
.dialog-box p { color: rgba(255,255,255,.84); font-weight: 700; }
.field-label { display: block; font-weight: 900; margin: 12px 0 8px; }
.nickname-input { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: white; padding: 0 14px; font: inherit; }
.hint-text { font-size: 11px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rank-list.mock { display: grid; gap: 8px; margin: 14px 0 18px; }
.rank-list.mock > div { display: flex; align-items: center; justify-content: space-between; border-radius: 14px; background: rgba(255,255,255,.08); padding: 12px 14px; }
.confetti-layer, .screen-confetti-layer { pointer-events: none; position: absolute; inset: -26px 0 auto 0; height: 120px; overflow: visible; }
.screen-confetti-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; }
.confetti, .spark { position: absolute; top: 65px; width: 9px; height: 14px; border-radius: 3px; animation: confetti 820ms ease-out forwards; }
.spark { width: 10px; height: 8px; clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px) rotate(.8deg); } 80% { transform: translateX(4px) rotate(-.8deg); } }
@keyframes burst { 0% { transform: scale(1); opacity: 1; } 38% { transform: scale(1.08) rotate(-2deg); opacity: .92; } 100% { transform: scale(.78) rotate(3deg); opacity: .22; } }
@keyframes confetti { 0% { transform: translate(0,0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r, 420deg)); opacity: 0; } }
@media (max-height: 760px) {
  .rank-prep, .view-panel { padding: 7px; }
  .app { gap: 6px; padding-top: 10px; }
  .ad-card { min-height: 40px; }
  .game-zone { min-height: 0; }
  .keycap { width: min(58vw, 238px); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.rank-head .section-kicker { margin-bottom: 2px; }
.rank-head strong { font-size: 15px; line-height: 1.05; }
.rank-prep { backdrop-filter: blur(8px); }
.view-panel { backdrop-filter: blur(8px); }
.angle-row { margin-top: 2px; }
.controls { margin-top: 0; }
.stats-grid.compact article { min-height: 54px; display: flex; flex-direction: column; justify-content: center; }
.ad-wrap { margin-top: 1px; }
.social-controls, .options { margin-top: 2px; }


/* V13 simplified home */
.simple-home { gap: 8px; }
.rank-prep[hidden], .view-panel[hidden], .social-controls[hidden] { display: none !important; }
.topbar { margin-bottom: 0; }
.top-ad { margin-top: 0; }
.compact-ad { min-height: 48px; padding: 10px 12px 9px; }
.compact-ad strong { font-size: 17px; line-height: 1.06; }
.compact-ad small { font-size: 11px; }
.top-stats { gap: 6px; margin-top: -1px; }
.top-stats article { min-height: 54px; padding: 6px 4px; }
.top-stats article span { font-size: 11px; }
.top-stats article strong { margin-top: 2px; font-size: 14px; }
.simple-zone { min-height: 0; gap: 6px; padding-top: 0; }
.status-line { min-height: 34px; padding: 7px 14px; }
.keycap { width: min(52vw, 238px); filter: drop-shadow(0 12px 16px rgba(0,0,0,.24)); }
.keycap::before { display: none; }
.keycap::after { inset: 86% 16% 1% 16%; background: rgba(0,0,0,.24); filter: blur(10px); }
.progress-shell { width: 88%; height: 10px; }
.slim-controls { gap: 8px; margin-top: 0; }
.slim-controls .primary, .slim-controls .danger { min-height: 42px; padding: 10px 10px; font-size: 14px; }
.compact-options { margin-top: 2px; gap: 8px; }
.compact-options .toggle { padding: 7px 10px; font-size: 12px; }
.compact-options .ghost { font-size: 11px; }
.ad-wrap .confetti-layer { top: -8px; }
@media (max-height: 860px) {
  .simple-home { gap: 7px; }
  .compact-ad { min-height: 44px; padding: 9px 12px 8px; }
  .compact-ad strong { font-size: 16px; }
  .top-stats article { min-height: 50px; }
  .keycap { width: min(42vw, 190px); }
  .status-line { min-height: 32px; padding: 6px 13px; }
  .slim-controls .primary, .slim-controls .danger { min-height: 40px; font-size: 13px; }
}
@media (max-height: 760px) {
  .keycap { width: min(38vw, 168px); }
  .compact-ad { min-height: 40px; }
  .top-stats article { min-height: 46px; }
  .compact-options { gap: 6px; }
}

.keycap { touch-action: none; }

/* V15 controls and 4-pair keycap layout */
.app { --keycap-scale: 1; }
.top-actions { display: flex; gap: 6px; align-items: center; }
.top-actions .small { padding: 7px 10px; }
.simple-home { gap: 7px; }
.compact-ad { min-height: 46px; }
.stats-grid.compact.top-stats { gap: 6px; }
.stat-card.clickable { cursor: pointer; transition: transform .12s ease, background .12s ease; }
.stat-card.clickable:active { transform: translateY(1px) scale(.985); }
.stat-card.clickable::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 99px; margin: 3px auto 0; background: rgba(103,246,255,.38); }
.mode-top .keycap { width: min(calc(92vw * var(--keycap-scale)), calc(392px * var(--keycap-scale))); }
.mode-3d .keycap { width: min(calc(72vw * var(--keycap-scale)), calc(330px * var(--keycap-scale))); }
.keycap { touch-action: none; }
.keycap::before { display: none !important; }
.keycap::after { inset: 87% 14% 1% 14%; filter: blur(11px); background: rgba(0,0,0,.24); }
.keycap-image { image-rendering: auto; }
.settings-box { transition: opacity .18s ease, transform .18s ease; }
.settings-box.previewing { opacity: .28; transform: scale(.985); }
.size-slider { width: 100%; accent-color: #67f6ff; margin: 6px 0 12px; }
.size-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.reward-list { display: grid; gap: 8px; margin: 12px 0; }
.reward-list > div { display: flex; justify-content: space-between; gap: 10px; border-radius: 14px; background: rgba(255,255,255,.08); padding: 10px 12px; font-weight: 900; }
.reward-list span { color: rgba(255,255,255,.72); }
/* glass/jelly crack overlay: lighter and angle-aware, not black marker lines */
.crack { width: 2px !important; border-radius: 99px; background: rgba(255,255,255,.55) !important; box-shadow: 0 0 6px rgba(103,246,255,.32), 0 0 0 1px rgba(255,255,255,.08) !important; mix-blend-mode: screen; }
.crack-chip { background: rgba(255,255,255,.22) !important; border-color: rgba(103,246,255,.24) !important; }
.keycap[data-view="top"] .crack-a { height: 64px; left: 47%; top: 30%; transform: rotate(24deg); }
.keycap[data-view="top"] .crack-b { height: 44px; left: 57%; top: 44%; transform: rotate(-42deg); }
.keycap[data-view="top"] .crack-c { height: 34px; left: 38%; top: 53%; transform: rotate(66deg); }
.keycap[data-view="front"] .crack-a { height: 54px; left: 49%; top: 24%; transform: rotate(18deg); }
.keycap[data-view="front"] .crack-b { height: 34px; left: 59%; top: 37%; transform: rotate(-45deg); }
.keycap[data-view="front"] .crack-c { height: 30px; left: 41%; top: 42%; transform: rotate(62deg); }
.keycap[data-view="left"] .crack-a { height: 50px; left: 48%; top: 27%; transform: rotate(29deg); }
.keycap[data-view="left"] .crack-b { height: 32px; left: 58%; top: 39%; transform: rotate(-38deg); }
.keycap[data-view="left"] .crack-c { height: 28px; left: 39%; top: 45%; transform: rotate(61deg); }
.keycap[data-view="right"] .crack-a { height: 50px; left: 47%; top: 26%; transform: rotate(16deg); }
.keycap[data-view="right"] .crack-b { height: 32px; left: 57%; top: 38%; transform: rotate(-48deg); }
.keycap[data-view="right"] .crack-c { height: 28px; left: 38%; top: 44%; transform: rotate(68deg); }
.damage-1 .crack-a { opacity: .22; }
.damage-2 .crack-a, .damage-2 .crack-b { opacity: .34; }
.damage-3 .crack-a, .damage-3 .crack-b, .damage-3 .crack-c { opacity: .48; }
.damage-4 .crack-a, .damage-4 .crack-b, .damage-4 .crack-c, .damage-4 .chip-a { opacity: .62; }
.damage-5 .crack, .damage-5 .crack-chip { opacity: .78; }
@media (max-height: 860px) {
  .mode-top .keycap { width: min(calc(88vw * var(--keycap-scale)), calc(370px * var(--keycap-scale))); }
  .mode-3d .keycap { width: min(calc(68vw * var(--keycap-scale)), calc(305px * var(--keycap-scale))); }
  .compact-ad { min-height: 42px; }
  .top-stats article { min-height: 48px; }
}
@media (max-height: 760px) {
  .mode-top .keycap { width: min(calc(82vw * var(--keycap-scale)), calc(330px * var(--keycap-scale))); }
  .mode-3d .keycap { width: min(calc(62vw * var(--keycap-scale)), calc(268px * var(--keycap-scale))); }
}


/* V16 keycap display fixes */
.app { --keycap-scale: 1; }
.mode-top .keycap { width: min(calc(94vw * var(--keycap-scale)), calc(430px * var(--keycap-scale))); aspect-ratio: 1 / 1; }
.mode-3d .keycap { width: min(calc(90vw * var(--keycap-scale)), calc(430px * var(--keycap-scale))); aspect-ratio: 1.14 / 1; }
.keycap { display: block; position: relative; padding: 0; overflow: visible; }
.keycap-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mode-top .keycap-image { object-position: center center; }
.keycap.pressed { transform: scale(.985); }
.keycap::after { inset: 90% 13% 0% 13%; background: rgba(0,0,0,.25); filter: blur(11px); }
.mode-top .keycap::after { inset: 90% 10% 0% 10%; }
.mode-top .keycap::before { display: none; }
.mode-3d .keycap::before { display: none; }
@media (max-height: 860px) {
  .mode-top .keycap { width: min(calc(90vw * var(--keycap-scale)), calc(395px * var(--keycap-scale))); }
  .mode-3d .keycap { width: min(calc(86vw * var(--keycap-scale)), calc(392px * var(--keycap-scale))); }
}
@media (max-height: 760px) {
  .mode-top .keycap { width: min(calc(86vw * var(--keycap-scale)), calc(360px * var(--keycap-scale))); }
  .mode-3d .keycap { width: min(calc(82vw * var(--keycap-scale)), calc(354px * var(--keycap-scale))); }
}
/* lighter crack visuals */
.crack { width: 3px; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(199,245,255,.65)); box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 7px rgba(151,241,255,.28); }
.crack-chip { background: rgba(255,255,255,.22); border: 1px solid rgba(186,245,255,.35); box-shadow: 0 0 8px rgba(151,241,255,.12); }
.keycap[data-view="top"] .crack-a { height: 66px; left: 45%; top: 18%; transform: rotate(24deg); }
.keycap[data-view="top"] .crack-b { height: 46px; left: 58%; top: 46%; transform: rotate(-48deg); }
.keycap[data-view="top"] .crack-c { height: 42px; left: 34%; top: 48%; transform: rotate(69deg); }
.keycap[data-view="top"] .crack-d { height: 30px; left: 67%; top: 30%; transform: rotate(14deg); }
.keycap[data-view="front"] .crack-a { height: 44px; left: 44%; top: 14%; transform: rotate(16deg); }
.keycap[data-view="front"] .crack-b { height: 26px; left: 57%; top: 34%; transform: rotate(-30deg); }
.keycap[data-view="front"] .crack-c { height: 0; opacity: 0 !important; }
.keycap[data-view="front"] .crack-d { height: 22px; left: 37%; top: 31%; transform: rotate(56deg); }
.keycap[data-view="front"] .chip-a { left: 35%; top: 40%; }
.keycap[data-view="front"] .chip-b { right: 28%; top: 38%; }
.keycap[data-view="left"] .crack-a { height: 42px; left: 36%; top: 16%; transform: rotate(14deg); }
.keycap[data-view="left"] .crack-b { height: 24px; left: 48%; top: 34%; transform: rotate(-22deg); }
.keycap[data-view="left"] .crack-c { height: 22px; left: 28%; top: 33%; transform: rotate(58deg); }
.keycap[data-view="left"] .crack-d { height: 0; opacity: 0 !important; }
.keycap[data-view="left"] .chip-a { left: 23%; top: 41%; }
.keycap[data-view="left"] .chip-b { right: 39%; top: 40%; }
.keycap[data-view="right"] .crack-a { height: 42px; left: 52%; top: 14%; transform: rotate(16deg); }
.keycap[data-view="right"] .crack-b { height: 24px; left: 61%; top: 35%; transform: rotate(-26deg); }
.keycap[data-view="right"] .crack-c { height: 20px; left: 45%; top: 36%; transform: rotate(54deg); }
.keycap[data-view="right"] .crack-d { height: 0; opacity: 0 !important; }
.keycap[data-view="right"] .chip-a { left: 41%; top: 43%; }
.keycap[data-view="right"] .chip-b { right: 20%; top: 42%; }


/* ===== V17 fixes ===== */
.keycap { min-height: 250px; }
.mode-top .keycap { min-height: 340px; }
.mode-3d .keycap { min-height: 310px; }
.keycap.pressed { transform: scale(.985) !important; }
.keycap[data-view="left"].pressed .keycap-image,
.keycap[data-view="right"].pressed .keycap-image { transform: translateY(12px); }
.keycap[data-view="front"].pressed .keycap-image { transform: translateY(5px); }
.keycap[data-view="top"].pressed .keycap-image { transform: none; }
.keycap.impact::before { content: ''; position: absolute; inset: 12% 12% 18% 12%; border-radius: 24px; background: radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 62%); mix-blend-mode: screen; animation: impactFlash .16s ease-out; pointer-events: none; z-index: 2; }
.keycap.breaking { animation: shakeV17 .28s linear; }
@keyframes impactFlash { 0% { opacity: .95; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes shakeV17 { 0%,100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-7px) rotate(-1.4deg); } 30% { transform: translateX(7px) rotate(1.2deg); } 45% { transform: translateX(-6px) rotate(-1deg); } 60% { transform: translateX(6px) rotate(.9deg); } 75% { transform: translateX(-4px) rotate(-.6deg); } }
.crack, .crack-chip { opacity: 0; }
.crack { width: 4px !important; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(201,247,255,.82)); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 10px rgba(151,241,255,.42); }
.crack-chip { width: 16px; height: 10px; background: rgba(255,255,255,.28) !important; border: 1px solid rgba(186,245,255,.44) !important; box-shadow: 0 0 10px rgba(151,241,255,.18); }
.damage-1 .crack-a { opacity: .4; }
.damage-2 .crack-a, .damage-2 .crack-b { opacity: .62; }
.damage-3 .crack-a, .damage-3 .crack-b, .damage-3 .crack-c { opacity: .84; }
.damage-4 .crack-a, .damage-4 .crack-b, .damage-4 .crack-c, .damage-4 .crack-d, .damage-4 .chip-a, .damage-4 .chip-b { opacity: .92; }
.damage-5 .crack, .damage-5 .crack-chip { opacity: 1; }
.keycap[data-view="top"] .crack-a { height: 86px; left: 46%; top: 16%; transform: rotate(22deg); }
.keycap[data-view="top"] .crack-b { height: 58px; left: 59%; top: 42%; transform: rotate(-46deg); }
.keycap[data-view="top"] .crack-c { height: 48px; left: 34%; top: 50%; transform: rotate(70deg); }
.keycap[data-view="top"] .crack-d { height: 40px; left: 69%; top: 25%; transform: rotate(12deg); }
.keycap[data-view="top"] .chip-a { left: 26%; top: 62%; } .keycap[data-view="top"] .chip-b { right: 24%; top: 57%; } .keycap[data-view="top"] .chip-c { left: 55%; top: 34%; } .keycap[data-view="top"] .chip-d { left: 42%; top: 70%; }
.keycap[data-view="front"] .crack-a { height: 62px; left: 45%; top: 10%; transform: rotate(18deg); }
.keycap[data-view="front"] .crack-b { height: 42px; left: 58%; top: 28%; transform: rotate(-32deg); }
.keycap[data-view="front"] .crack-c { height: 32px; left: 36%; top: 33%; transform: rotate(60deg); }
.keycap[data-view="front"] .crack-d { height: 24px; left: 66%; top: 18%; transform: rotate(8deg); }
.keycap[data-view="front"] .chip-a { left: 30%; top: 42%; } .keycap[data-view="front"] .chip-b { right: 28%; top: 36%; } .keycap[data-view="front"] .chip-c { left: 56%; top: 24%; } .keycap[data-view="front"] .chip-d { left: 43%; top: 48%; }
.keycap[data-view="left"] .crack-a { height: 58px; left: 34%; top: 16%; transform: rotate(16deg); }
.keycap[data-view="left"] .crack-b { height: 34px; left: 46%; top: 32%; transform: rotate(-22deg); }
.keycap[data-view="left"] .crack-c { height: 28px; left: 27%; top: 35%; transform: rotate(56deg); }
.keycap[data-view="left"] .crack-d { height: 20px; left: 55%; top: 20%; transform: rotate(10deg); }
.keycap[data-view="left"] .chip-a { left: 22%; top: 44%; } .keycap[data-view="left"] .chip-b { left: 48%; top: 40%; } .keycap[data-view="left"] .chip-c { left: 37%; top: 25%; } .keycap[data-view="left"] .chip-d { right: 22%; top: 32%; }
.keycap[data-view="right"] .crack-a { height: 58px; left: 52%; top: 15%; transform: rotate(18deg); }
.keycap[data-view="right"] .crack-b { height: 34px; left: 61%; top: 32%; transform: rotate(-26deg); }
.keycap[data-view="right"] .crack-c { height: 28px; left: 45%; top: 35%; transform: rotate(54deg); }
.keycap[data-view="right"] .crack-d { height: 20px; left: 68%; top: 22%; transform: rotate(8deg); }
.keycap[data-view="right"] .chip-a { left: 42%; top: 44%; } .keycap[data-view="right"] .chip-b { right: 18%; top: 41%; } .keycap[data-view="right"] .chip-c { left: 55%; top: 25%; } .keycap[data-view="right"] .chip-d { left: 30%; top: 34%; }
.damage-4 .chip-c, .damage-5 .chip-c, .damage-5 .chip-d { opacity: .9; }
.reward-list { display: grid; gap: 10px; margin: 12px 0 8px; }
.reward-list > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; align-items: center; border-radius: 14px; background: rgba(255,255,255,.08); padding: 12px 12px; font-weight: 900; }
.reward-list > div small { grid-column: 2; color: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; }
.reward-list > div.done { background: rgba(105,255,188,.14); border: 1px solid rgba(118,255,214,.24); }
.reward-list > div.done span { color: #8dffd0; }
.reward-list > div.done small { color: #b7ffe4; }


/* ===== V18 front-press + shatter boost ===== */
.keycap[data-view="front"].pressed .keycap-image { transform: translateY(11px) scaleY(.985); }
.keycap[data-view="front"].pressed { transform: scale(.985) !important; }
.keycap.impact .keycap-image { filter: brightness(1.08) saturate(1.08); }
.keycap.breaking { animation: shakeV18 .34s linear; }
.keycap.burst { animation: burstV18 .56s cubic-bezier(.2,.75,.2,1); }
@keyframes shakeV18 { 0%,100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(-10px) rotate(-1.8deg); } 20% { transform: translateX(10px) rotate(1.6deg); } 30% { transform: translateX(-9px) rotate(-1.4deg); } 40% { transform: translateX(9px) rotate(1.2deg); } 50% { transform: translateX(-8px) rotate(-1.1deg); } 60% { transform: translateX(8px) rotate(1deg); } 70% { transform: translateX(-6px) rotate(-.8deg); } 80% { transform: translateX(6px) rotate(.8deg); } 90% { transform: translateX(-4px) rotate(-.5deg); } }
@keyframes burstV18 { 0% { transform: scale(1); filter: drop-shadow(0 16px 20px rgba(0,0,0,.28)); } 18% { transform: scale(1.05) rotate(-1deg); filter: drop-shadow(0 22px 26px rgba(255,255,255,.16)); } 45% { transform: scale(.94) rotate(1deg); filter: drop-shadow(0 28px 34px rgba(103,246,255,.3)); } 100% { transform: scale(1); filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); } }
.keycap.impact::before { inset: 8% 8% 14% 8% !important; background: radial-gradient(circle at center, rgba(255,255,255,.34), rgba(255,255,255,0) 60%) !important; animation: impactFlashV18 .22s ease-out !important; }
.keycap.impact::after { box-shadow: 0 0 26px rgba(255,255,255,.18); }
@keyframes impactFlashV18 { 0% { opacity: 1; transform: scale(.9); } 40% { opacity: .8; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.16); } }
.crack { width: 5px !important; box-shadow: 0 0 0 1px rgba(255,255,255,.26), 0 0 14px rgba(151,241,255,.58), 0 0 22px rgba(255,255,255,.18) !important; }
.crack-chip { width: 18px !important; height: 12px !important; background: rgba(255,255,255,.34) !important; box-shadow: 0 0 12px rgba(151,241,255,.26), 0 0 16px rgba(255,255,255,.12) !important; }
.damage-1 .crack-a { opacity: .52; }
.damage-2 .crack-a, .damage-2 .crack-b, .damage-2 .chip-a { opacity: .76; }
.damage-3 .crack-a, .damage-3 .crack-b, .damage-3 .crack-c, .damage-3 .chip-a, .damage-3 .chip-b { opacity: .92; }
.damage-4 .crack, .damage-4 .crack-chip { opacity: 1; }
.damage-5 .crack, .damage-5 .crack-chip { opacity: 1; transform-origin: center; }
.damage-5 .crack-a { transform: rotate(22deg) scale(1.08); }
.damage-5 .crack-b { transform: rotate(-46deg) scale(1.1); }
.damage-5 .crack-c { transform: rotate(68deg) scale(1.08); }
.damage-5 .crack-d { transform: rotate(12deg) scale(1.06); }
.chip-e, .chip-f { position: absolute; pointer-events: none; opacity: 0; z-index: 2; width: 14px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.36); border: 1px solid rgba(186,245,255,.45); box-shadow: 0 0 10px rgba(151,241,255,.22); }
.damage-4 .chip-e, .damage-5 .chip-e, .damage-5 .chip-f { opacity: 1; }
.keycap[data-view="top"] .chip-e { left: 62%; top: 66%; transform: rotate(-18deg); } .keycap[data-view="top"] .chip-f { left: 20%; top: 46%; transform: rotate(22deg); }
.keycap[data-view="front"] .chip-e { left: 63%; top: 44%; transform: rotate(-20deg); } .keycap[data-view="front"] .chip-f { left: 24%; top: 30%; transform: rotate(16deg); }
.keycap[data-view="left"] .chip-e { left: 58%; top: 46%; transform: rotate(-16deg); } .keycap[data-view="left"] .chip-f { left: 18%; top: 28%; transform: rotate(18deg); }
.keycap[data-view="right"] .chip-e { left: 28%; top: 46%; transform: rotate(-16deg); } .keycap[data-view="right"] .chip-f { left: 64%; top: 28%; transform: rotate(18deg); }


/* ===== V19 shatter + next keycap cycle ===== */
.shatter-layer { position: absolute; inset: -6% -6% -10% -6%; pointer-events: none; overflow: visible; z-index: 6; }
.shard, .petal, .sparkle-piece { position: absolute; opacity: 0; pointer-events: none; }
.shard { width: 16px; height: 14px; border-radius: 4px; clip-path: polygon(50% 0%, 100% 30%, 78% 100%, 20% 82%, 0% 35%); box-shadow: 0 0 10px rgba(255,255,255,.22), 0 0 14px rgba(103,246,255,.18); animation: shardBurstV19 760ms cubic-bezier(.18,.72,.22,1) forwards; }
.petal { width: 12px; height: 18px; border-radius: 12px 12px 12px 2px; filter: saturate(1.15) brightness(1.04); box-shadow: 0 0 8px rgba(255,255,255,.22); animation: petalBurstV19 820ms cubic-bezier(.18,.72,.22,1) forwards; }
.sparkle-piece { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 12px currentColor, 0 0 18px rgba(255,255,255,.25); animation: sparkleBurstV19 640ms ease-out forwards; }
.keycap.shattered .keycap-image { animation: keycapShatterV19 420ms cubic-bezier(.18,.74,.22,1) forwards; }
.keycap.shattered .crack, .keycap.shattered .crack-chip, .keycap.shattered .chip-e, .keycap.shattered .chip-f { animation: crackFadeV19 260ms ease-out forwards; }
.keycap.shattered::after { animation: shadowFadeV19 360ms ease-out forwards; }
.keycap.spawn .keycap-image { animation: keycapSpawnV19 320ms cubic-bezier(.18,.72,.22,1); }
.keycap.spawn::after { animation: spawnShadowV19 320ms ease-out; }
@keyframes keycapShatterV19 { 0% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1); } 24% { opacity: 1; transform: scale(1.04) rotate(-1deg); filter: brightness(1.12) saturate(1.08); } 100% { opacity: 0; transform: scale(.72) rotate(4deg); filter: brightness(1.25) saturate(1.12) blur(2px); } }
@keyframes crackFadeV19 { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shadowFadeV19 { 0% { opacity: .88; transform: scale(1); } 100% { opacity: 0; transform: scale(.76); } }
@keyframes keycapSpawnV19 { 0% { opacity: 0; transform: translateY(26px) scale(.82); filter: brightness(1.25); } 68% { opacity: 1; transform: translateY(-6px) scale(1.03); filter: brightness(1.08); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); } }
@keyframes spawnShadowV19 { 0% { opacity: 0; transform: scale(.72); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shardBurstV19 { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(var(--s,1)) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.5) rotate(var(--r)); } }
@keyframes petalBurstV19 { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 12% { opacity: .96; transform: translate(-50%, -50%) scale(var(--s,1)) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.52) rotate(var(--r)); } }
@keyframes sparkleBurstV19 { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.15) rotate(var(--r)); } }
.petal-rain { width: 10px !important; height: 14px !important; border-radius: 10px 10px 10px 3px !important; }


/* ===== V20/V23 fragment crack mesh ===== */
.fragment-mesh { position: absolute; pointer-events: none; z-index: 5; opacity: 0; overflow: visible; mix-blend-mode: screen; filter: drop-shadow(0 0 4px rgba(255,255,255,.45)) drop-shadow(0 0 9px rgba(92,246,255,.28)); }
.mode-top .fragment-mesh, .keycap[data-view="top"] .fragment-mesh { left: 9%; top: 13%; width: 82%; height: 74%; transform: perspective(600px) rotateX(0deg); }
.keycap[data-view="front"] .fragment-mesh { left: 11%; top: 8%; width: 78%; height: 72%; transform: perspective(600px) rotateX(13deg) skewX(-1deg); }
.keycap[data-view="left"] .fragment-mesh { left: 10%; top: 9%; width: 76%; height: 70%; transform: perspective(600px) rotateX(15deg) skewX(-8deg) rotate(-2deg); }
.keycap[data-view="right"] .fragment-mesh { left: 14%; top: 9%; width: 76%; height: 70%; transform: perspective(600px) rotateX(15deg) skewX(8deg) rotate(2deg); }
.fragment-mesh .mesh-line { fill: none; stroke: rgba(255,255,255,.96); stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.fragment-mesh .mesh-line:nth-child(3n+1) { stroke: rgba(183,252,255,.98); }
.fragment-mesh .mesh-line:nth-child(3n+2) { stroke: rgba(255,220,255,.95); }
.fragment-mesh .mesh-line:nth-child(4n) { stroke-width: 2.85; }
.damage-1 .fragment-mesh { opacity: .9; }
.damage-1 .fragment-mesh .f1, .damage-1 .fragment-mesh .f2, .damage-1 .fragment-mesh .f3 { opacity: .52; }
.damage-2 .fragment-mesh { opacity: .96; }
.damage-2 .fragment-mesh .f1, .damage-2 .fragment-mesh .f2, .damage-2 .fragment-mesh .f3, .damage-2 .fragment-mesh .f4, .damage-2 .fragment-mesh .f7, .damage-2 .fragment-mesh .f11 { opacity: .72; }
.damage-3 .fragment-mesh { opacity: 1; }
.damage-3 .fragment-mesh .mesh-line:nth-child(-n+10) { opacity: .88; }
.damage-4 .fragment-mesh { opacity: 1; }
.damage-4 .fragment-mesh .mesh-line { opacity: .95; }
.damage-5 .fragment-mesh { opacity: 1; animation: meshPulseV20 .38s ease-in-out infinite alternate; }
.damage-5 .fragment-mesh .mesh-line { opacity: 1; stroke-width: 3.1; }
.keycap.shattered .fragment-mesh { opacity: 1; animation: meshBreakV20 430ms cubic-bezier(.18,.74,.22,1) forwards; }
.keycap.shattered .fragment-mesh .mesh-line { opacity: 1; stroke-width: 3.4; }
.crack { opacity: 0 !important; }
.crack-chip, .chip-e, .chip-f { opacity: 0 !important; }
@keyframes meshPulseV20 { from { filter: drop-shadow(0 0 4px rgba(255,255,255,.35)) drop-shadow(0 0 8px rgba(92,246,255,.22)); transform: translateY(0) scale(1); } to { filter: drop-shadow(0 0 7px rgba(255,255,255,.65)) drop-shadow(0 0 14px rgba(92,246,255,.42)); transform: translateY(-1px) scale(1.006); } }
@keyframes meshBreakV20 { 0% { opacity: 1; transform: scale(1); } 32% { opacity: 1; transform: scale(1.035) rotate(-1deg); } 100% { opacity: 0; transform: scale(1.18) rotate(4deg); } }
.line-shard { position: absolute; width: var(--len, 40px); height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(151,241,255,.78), rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(151,241,255,.34), 0 0 12px rgba(255,255,255,.18); opacity: 0; animation: lineShardV20 760ms cubic-bezier(.18,.72,.22,1) forwards; }
@keyframes lineShardV20 { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.4) rotate(var(--r)); } }
.shard { width: 19px; height: 17px; }
.petal { width: 13px; height: 20px; }
.keycap.shattered .keycap-image { animation: keycapShatterV20 430ms cubic-bezier(.18,.74,.22,1) forwards; }
@keyframes keycapShatterV20 { 0% { opacity: 1; transform: scale(1); filter: brightness(1.05) saturate(1.05); } 24% { opacity: .92; transform: scale(1.045) rotate(-1deg); filter: brightness(1.18) saturate(1.1); } 58% { opacity: .38; transform: scale(.86) rotate(2deg); filter: brightness(1.25) saturate(1.18) blur(1px); } 100% { opacity: 0; transform: scale(.64) rotate(5deg); filter: brightness(1.28) saturate(1.2) blur(2.5px); } }


/* ===== V24 admin mode ===== */
.brand-line h1 { cursor: pointer; user-select: none; }
.admin-chip { cursor: pointer; display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffe761, #67f6ff); color: #18142e; font-size: 10px; font-weight: 1000; box-shadow: 0 0 14px rgba(103,246,255,.25); }
.admin-mode .topbar { filter: drop-shadow(0 0 10px rgba(103,246,255,.18)); }
.admin-box { width: min(90vw, 430px); }
.admin-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.admin-mode-grid .ghost { min-height: 42px; font-weight: 950; }
.admin-skin-btn.active { background: linear-gradient(135deg, rgba(103,246,255,.35), rgba(255,231,97,.28)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 16px rgba(103,246,255,.22); }
.admin-sep { border: 0; height: 1px; background: rgba(255,255,255,.14); margin: 14px 0; }
.admin-mode .stat-card.clickable::after { width: 34px; opacity: .9; background: linear-gradient(90deg,#ffe761,#67f6ff); }


/* ===== V25 admin mode, clipped crack mesh, skin-feel fixes ===== */
.admin-chip[hidden], .admin-quick-panel[hidden] { display: none !important; }
.admin-quick-panel { margin-top: 2px; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.075); border: 1px solid rgba(103,246,255,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18); }
.admin-quick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #dff; }
.admin-quick-head strong { font-size: 13px; }
.ghost.mini { min-height: 30px; padding: 6px 9px; font-size: 11px; }
.admin-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.admin-mini-grid .ghost { min-height: 34px; padding: 7px 6px; font-size: 11px; font-weight: 950; }
.admin-skin-btn.active { background: linear-gradient(135deg, rgba(103,246,255,.32), rgba(255,231,97,.26)); color: #fff; border: 1px solid rgba(255,255,255,.22); }
/* Keep crack mesh inside the visible keycap surface instead of floating outside */
.fragment-mesh { overflow: hidden !important; transform-origin: center center; }
.mode-top .fragment-mesh, .keycap[data-view="top"] .fragment-mesh { left: 18% !important; top: 21% !important; width: 64% !important; height: 56% !important; clip-path: inset(3% 3% 3% 3% round 12%); }
.keycap[data-view="front"] .fragment-mesh { left: 18% !important; top: 12% !important; width: 64% !important; height: 50% !important; clip-path: polygon(8% 8%, 92% 6%, 96% 86%, 4% 92%); transform: perspective(600px) rotateX(13deg) skewX(-1deg) !important; }
.keycap[data-view="left"] .fragment-mesh { left: 20% !important; top: 12% !important; width: 58% !important; height: 48% !important; clip-path: polygon(12% 10%, 88% 3%, 96% 82%, 8% 96%); transform: perspective(600px) rotateX(15deg) skewX(-8deg) rotate(-2deg) !important; }
.keycap[data-view="right"] .fragment-mesh { left: 22% !important; top: 12% !important; width: 58% !important; height: 48% !important; clip-path: polygon(10% 4%, 88% 10%, 94% 94%, 4% 82%); transform: perspective(600px) rotateX(15deg) skewX(8deg) rotate(2deg) !important; }
.fragment-mesh .mesh-line { stroke-width: 2.15 !important; }
.damage-5 .fragment-mesh .mesh-line { stroke-width: 2.45 !important; }
.keycap.shattered .fragment-mesh .mesh-line { stroke-width: 2.7 !important; }
@media (max-width: 380px) { .admin-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ===== V29 effects + startup defaults ===== */
body[data-effect="basic"] { --fx-bg-a:#243468; --fx-bg-b:#1b0f49; --fx-bg-c:#130626; --fx-glow-rgb:103,246,255; --fx-accent-rgb:255,231,97; }
body[data-effect="aura"] { --fx-bg-a:#1f325f; --fx-bg-b:#132746; --fx-bg-c:#0f1330; --fx-glow-rgb:124,255,238; --fx-accent-rgb:94,232,255; }
body[data-effect="sparkle"] { --fx-bg-a:#40206d; --fx-bg-b:#2b1657; --fx-bg-c:#160730; --fx-glow-rgb:255,185,240; --fx-accent-rgb:255,231,97; }
body[data-effect="crystal"] { --fx-bg-a:#153453; --fx-bg-b:#13284b; --fx-bg-c:#08162b; --fx-glow-rgb:133,226,255; --fx-accent-rgb:195,245,255; }
body[data-effect="neon"] { --fx-bg-a:#38175d; --fx-bg-b:#1a0f4e; --fx-bg-c:#120428; --fx-glow-rgb:255,84,202; --fx-accent-rgb:103,246,255; }
body[data-effect="hammer"] { --fx-bg-a:#45311e; --fx-bg-b:#261810; --fx-bg-c:#140b07; --fx-glow-rgb:255,177,77; --fx-accent-rgb:255,232,178; }
body[data-effect] { background: radial-gradient(circle at 20% 15%, rgba(var(--fx-glow-rgb),.28), transparent 30%), radial-gradient(circle at 82% 10%, rgba(var(--fx-accent-rgb),.25), transparent 28%), linear-gradient(160deg, var(--fx-bg-a), var(--fx-bg-b) 58%, var(--fx-bg-c)); background-attachment: fixed; }
body[data-effect="sparkle"]::before { opacity:.56; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.14), transparent 18%), radial-gradient(circle at 74% 22%, rgba(255,255,255,.12), transparent 18%), linear-gradient(90deg, rgba(255,255,255,.08), transparent 16%, transparent 84%, rgba(0,0,0,.18)); }
.app[data-effect] { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 38px rgba(var(--fx-glow-rgb), .10), 0 28px 90px rgba(0,0,0,.34); }
.app[data-effect] .ad-wrap { filter: drop-shadow(0 0 12px rgba(var(--fx-glow-rgb), .30)); }
.app[data-effect] .ad-wrap::before { filter: drop-shadow(0 0 7px rgba(var(--fx-glow-rgb), .72)); }
.app[data-effect] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(var(--fx-glow-rgb), .20)); }
body[data-effect="aura"] .status-line { box-shadow: 0 0 18px rgba(var(--fx-glow-rgb), .16); }
body[data-effect="sparkle"] .status-line { box-shadow: 0 0 18px rgba(255,185,240,.18); }
body[data-effect="crystal"] .status-line { box-shadow: 0 0 18px rgba(195,245,255,.16); }
body[data-effect="neon"] .status-line { box-shadow: 0 0 18px rgba(255,84,202,.18); }
.admin-effect-btn.active, .admin-skin-btn.active, .admin-cap-btn.active, .admin-view-btn.active { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(var(--fx-glow-rgb), .26)); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18); }
.admin-subtitle { margin: 8px 0 8px; font-size: 12px; font-weight: 900; color: rgba(255,255,255,.78); }
.admin-default-box { margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-size: 12px; font-weight: 800; }
.admin-save-startup { width: 100%; min-height: 40px; font-weight: 950; margin-bottom: 12px; }
.admin-mini-grid .admin-save-startup { grid-column: 1 / -1; }
.keycap .fragment-mesh { left: var(--mesh-left, 18%) !important; top: var(--mesh-top, 20%) !important; width: var(--mesh-width, 64%) !important; height: var(--mesh-height, 56%) !important; clip-path: var(--mesh-clip, inset(3% 3% 3% 3% round 12%)) !important; transform: translateY(0px) var(--mesh-transform, perspective(600px) rotateX(0deg)) !important; }
.keycap.pressed .fragment-mesh { transform: translateY(var(--mesh-press-shift, 0px)) var(--mesh-transform, perspective(600px) rotateX(0deg)) !important; }


/* ===== V29 admin grouping and effect touch visuals ===== */
.admin-section-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.admin-section-list.compact { gap:8px; }
.admin-group { padding:10px 10px 12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.admin-group-title { margin:0 0 8px; font-size:12px; font-weight:900; letter-spacing:.02em; color:rgba(255,255,255,.8); }
.admin-mini-grid.two-col, .admin-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-mini-grid.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-save-startup { width:100%; margin-top:8px; }
body[data-effect="hammer"] .status-line { box-shadow:0 0 18px rgba(255,177,77,.16); }
body[data-effect="neon"] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 22px rgba(255,84,202,.22)); }
body[data-effect="hammer"] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(255,177,77,.22)); }
body[data-effect="sparkle"] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(255,185,240,.22)); }
body[data-effect="crystal"] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(195,245,255,.22)); }
.tap-effect { position:absolute; pointer-events:none; z-index:8; }
.tap-petal { width:10px; height:14px; border-radius:10px 10px 10px 3px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,183,208,.92)); box-shadow:0 0 12px rgba(255,255,255,.28); animation: tapPetalV29 .32s ease-out forwards; }
.tap-star { width:9px; height:9px; color:#fff4a8; background:currentColor; clip-path:polygon(50% 0%, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0% 50%, 38% 34%); box-shadow:0 0 10px rgba(255,240,170,.7); animation: tapStarV29 .32s ease-out forwards; }
.tap-crystal { width:8px; height:16px; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(163,239,255,.96)); clip-path:polygon(50% 0%, 100% 35%, 74% 100%, 26% 100%, 0% 35%); box-shadow:0 0 14px rgba(176,244,255,.75); animation: tapCrystalV29 .32s ease-out forwards; }
.tap-lightning { width:26px; height:54px; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(103,246,255,.95) 55%, rgba(255,114,221,.95)); clip-path:polygon(44% 0, 68% 0, 56% 26%, 84% 26%, 40% 100%, 48% 56%, 24% 56%); filter:drop-shadow(0 0 8px rgba(103,246,255,.75)) drop-shadow(0 0 16px rgba(255,114,221,.55)); animation: tapLightningV29 .28s ease-out forwards; }
.tap-flash { width:70px; height:70px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,0) 72%); animation: tapFlashV29 .26s ease-out forwards; }
.tap-hammer { font-size:32px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.25)); transform-origin:75% 78%; animation: tapHammerV29 .28s ease-out forwards; }
.tap-hit-ring { width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,214,134,.95); box-shadow:0 0 10px rgba(255,214,134,.45); animation: tapRingV29 .28s ease-out forwards; }
.tap-aura-ring { width:82px; height:82px; border-radius:50%; border:2px solid rgba(124,255,238,.95); box-shadow:0 0 16px rgba(124,255,238,.42); animation: tapAuraRingV29 .34s ease-out forwards; }
.tap-aura-dot { width:8px; height:8px; border-radius:50%; background:rgba(124,255,238,.95); box-shadow:0 0 12px rgba(124,255,238,.8); animation: tapAuraDotV29 .30s ease-out forwards; }
.neon-zap { background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(103,246,255,.95), rgba(255,84,202,.95)) !important; box-shadow:0 0 14px rgba(103,246,255,.62), 0 0 20px rgba(255,84,202,.38); }
.hammer-burst { position:absolute; font-size:24px; opacity:0; animation: hammerBurstV29 .72s cubic-bezier(.18,.72,.22,1) forwards; pointer-events:none; z-index:9; }
.aura-burst { position:absolute; width:96px; height:96px; margin-left:-48px; margin-top:-48px; border-radius:50%; border:2px solid rgba(124,255,238,.95); box-shadow:0 0 24px rgba(124,255,238,.24); animation:auraBurstV29 .7s ease-out forwards; pointer-events:none; z-index:7; }
.neon-core { border-color: rgba(103,246,255,.95) !important; box-shadow: 0 0 30px rgba(103,246,255,.42), 0 0 42px rgba(255,84,202,.22) !important; }
.electric-rain { width:5px !important; height:16px !important; border-radius:4px !important; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(103,246,255,.95), rgba(255,84,202,.95)) !important; box-shadow:0 0 10px rgba(103,246,255,.6); }
.star-rain { width:10px !important; height:10px !important; background:#fff3a0 !important; clip-path:polygon(50% 0%, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0% 50%, 38% 34%) !important; box-shadow:0 0 10px rgba(255,243,160,.75); }
.debris-rain { width:8px !important; height:8px !important; background:#ffc06b !important; border-radius:2px !important; box-shadow:0 0 8px rgba(255,192,107,.4); }
.crystal-piece { width: 10px !important; height: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(163,239,255,.96)) !important; clip-path: polygon(50% 0%, 100% 35%, 74% 100%, 26% 100%, 0% 35%) !important; box-shadow: 0 0 14px rgba(176,244,255,.75); }
@keyframes tapPetalV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.35); } 30% { opacity:1; } to { opacity:0; transform:translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -20px))) scale(.92) rotate(24deg); } }
@keyframes tapStarV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.1); } 28% { opacity:1; } to { opacity:0; transform:translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1.2) rotate(45deg); } }
@keyframes tapCrystalV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.2); } 24% { opacity:1; } to { opacity:0; transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(.95) rotate(32deg); } }
@keyframes tapLightningV29 { from { opacity:0; } 18% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(.95); } }
@keyframes tapFlashV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.2); } 24% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.15); } }
@keyframes tapHammerV29 { from { opacity:0; transform:translate(-50%, -50%) rotate(-42deg) scale(.65); } 40% { opacity:1; transform:translate(-50%, -50%) rotate(12deg) scale(1); } to { opacity:0; transform:translate(-34%, -36%) rotate(-8deg) scale(.94); } }
@keyframes tapRingV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.4); } 30% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.1); } }
@keyframes tapAuraRingV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.3); } 28% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.12); } }
@keyframes tapAuraDotV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.4); } 30% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) translateY(-12px) scale(1); } }
@keyframes hammerBurstV29 { from { opacity:0; transform:translate(-50%, -50%) scale(.3) rotate(0deg); } 25% { opacity:1; } to { opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.95) rotate(var(--r)); } }
@keyframes auraBurstV29 { from { opacity:0; transform:scale(.2); } 28% { opacity:1; } to { opacity:0; transform:scale(1.06); } }
@media (max-width: 420px) { .admin-mini-grid.four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ===== V30 stronger crack coverage + skin effect tuning ===== */
.fragment-mesh { filter: drop-shadow(0 0 6px rgba(255,255,255,.62)) drop-shadow(0 0 15px rgba(92,246,255,.34)); }
.fragment-mesh .mesh-line { stroke-width: 2.9; }
.fragment-mesh .mesh-line:nth-child(4n) { stroke-width: 3.35; }
.damage-2 .fragment-mesh .mesh-line:nth-child(-n+8) { opacity: .82; }
.damage-3 .fragment-mesh .mesh-line:nth-child(-n+12) { opacity: .94; }
.damage-4 .fragment-mesh .mesh-line { opacity: .98; stroke-width: 3.2; }
.damage-5 .fragment-mesh .mesh-line { stroke-width: 3.8 !important; }
.keycap.shattered .fragment-mesh .mesh-line { stroke-width: 4.1 !important; }
.shatter-layer { inset: -10% -10% -14% -10%; }

.tap-aura-ring.thick { width: 124px; height: 124px; margin-left: -62px; margin-top: -62px; border: 12px solid rgba(95,255,225,.92); background: radial-gradient(circle at center, rgba(255,255,255,.18) 0 30%, rgba(95,255,225,.14) 42%, rgba(95,255,225,0) 72%); box-shadow: 0 0 18px rgba(95,255,225,.95), 0 0 38px rgba(95,255,225,.72), inset 0 0 20px rgba(255,255,255,.3); animation: tapAuraRingV30 .38s ease-out forwards; }
.tap-aura-ring.thick.outer { width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; border-color: rgba(36,255,178,.82); box-shadow: 0 0 22px rgba(36,255,178,.95), 0 0 46px rgba(36,255,178,.65), 0 0 70px rgba(65,255,231,.36); }
.tap-aura-ring.neon-pulse { width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; border-width: 8px; border-color: rgba(103,246,255,.98); box-shadow: 0 0 18px rgba(103,246,255,.92), 0 0 34px rgba(255,84,202,.55); animation: tapAuraRingV30 .30s ease-out forwards; }
.tap-aura-dot { width: 12px; height: 12px; background: rgba(155,255,241,.98); box-shadow: 0 0 18px rgba(155,255,241,.98), 0 0 32px rgba(95,255,225,.55); animation: tapAuraDotV30 .34s ease-out forwards; }
.aura-burst.inner { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-width: 8px; border-color: rgba(95,255,225,.94); box-shadow: 0 0 28px rgba(95,255,225,.7), 0 0 52px rgba(95,255,225,.35); animation: auraBurstV30 .82s ease-out forwards; }
.aura-burst.outer, .aura-burst.big { width: 168px; height: 168px; margin-left: -84px; margin-top: -84px; border-width: 10px; border-color: rgba(36,255,178,.82); box-shadow: 0 0 30px rgba(36,255,178,.75), 0 0 65px rgba(65,255,231,.3); animation: auraBurstV30 .92s ease-out forwards; }
.neon-core.big { border-color: rgba(255,255,255,.98) !important; box-shadow: 0 0 34px rgba(103,246,255,.78), 0 0 60px rgba(255,84,202,.48) !important; }

.tap-spark-halo { width: 190px; height: 190px; margin-left: -95px; margin-top: -95px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.34) 0 6%, rgba(255,186,240,.14) 28%, rgba(255,186,240,0) 74%); filter: drop-shadow(0 0 16px rgba(255,186,240,.45)); animation: tapSparkHaloV30 .44s ease-out forwards; }
.tap-spark-halo.burst { width: 220px; height: 220px; margin-left: -110px; margin-top: -110px; animation-duration: .72s; }
.tap-star { width: 13px; height: 13px; box-shadow: 0 0 16px rgba(255,240,170,.92), 0 0 28px rgba(255,186,240,.38); }
body[data-effect='sparkle'] .keycap::before { content:''; position:absolute; inset:-10% -8%; pointer-events:none; background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.30), transparent 10%), radial-gradient(circle at 82% 18%, rgba(255,255,255,.24), transparent 10%), radial-gradient(circle at 18% 82%, rgba(255,255,255,.24), transparent 10%), radial-gradient(circle at 86% 78%, rgba(255,255,255,.28), transparent 10%), radial-gradient(circle at 50% 4%, rgba(255,205,240,.22), transparent 18%); mix-blend-mode: screen; opacity: .9; }

.tap-crystal-plate { width: 74%; height: 70%; margin-left: -37%; margin-top: -30%; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(196,244,255,.28)); border: 2px solid rgba(255,255,255,.65); box-shadow: 0 0 18px rgba(196,244,255,.5), inset 0 0 22px rgba(255,255,255,.16); clip-path: polygon(6% 4%, 94% 3%, 97% 94%, 4% 96%); animation: tapCrystalPlateV30 .46s ease-out forwards; }
.tap-crystal.cracky { width: 10px; height: 22px; box-shadow: 0 0 18px rgba(176,244,255,.92), 0 0 30px rgba(176,244,255,.35); }
.crystal-plate-burst { position:absolute; width: 82%; height: 76%; left:50%; top:42%; transform:translate(-50%,-50%); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(176,244,255,.18)); border: 2px solid rgba(255,255,255,.72); box-shadow: 0 0 18px rgba(176,244,255,.55); clip-path: polygon(6% 5%, 94% 3%, 97% 94%, 4% 96%); opacity:0; animation: crystalPlateBurstV30 .72s cubic-bezier(.18,.72,.22,1) forwards; pointer-events:none; z-index:8; }

.tap-lightning.big { width: 40px; height: 88px; filter: drop-shadow(0 0 12px rgba(103,246,255,.98)) drop-shadow(0 0 24px rgba(255,114,221,.72)); }
.tap-lightning.burst { animation-duration: .54s; }
.tap-flash { width: 92px; height: 92px; }

.tap-hammer.cute { font-size: 84px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.26)) drop-shadow(0 0 8px rgba(255,210,120,.4)); transform-origin: 72% 80%; animation: tapHammerV30 .30s ease-out forwards; }
.tap-hit-ring.heavy { width: 66px; height: 66px; border-width: 7px; box-shadow: 0 0 16px rgba(255,214,134,.82), inset 0 0 10px rgba(255,255,255,.25); animation: tapRingV30 .30s ease-out forwards; }
.hammer-burst.big { font-size: 52px; }

@keyframes tapAuraRingV30 { from { opacity:0; transform:translate(-50%, -50%) scale(.22); } 30% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.14); } }
@keyframes tapAuraDotV30 { from { opacity:0; transform:translate(-50%, -50%) scale(.35); } 30% { opacity:1; } to { opacity:0; transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,-8px))) scale(1.06); } }
@keyframes auraBurstV30 { from { opacity:0; transform:scale(.18); } 28% { opacity:1; } to { opacity:0; transform:scale(1.12); } }
@keyframes tapSparkHaloV30 { from { opacity:0; transform:translate(-50%, -50%) scale(.4); } 25% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.06); } }
@keyframes tapCrystalPlateV30 { from { opacity:0; transform:translate(-50%, -50%) scale(.92); } 20% { opacity:.95; } to { opacity:0; transform:translate(-50%, -50%) scale(1.03); } }
@keyframes crystalPlateBurstV30 { from { opacity:0; transform:translate(-50%,-50%) scale(.95); } 18% { opacity:.98; } to { opacity:0; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); } }
@keyframes tapHammerV30 { from { opacity:0; transform:translate(-50%, -50%) rotate(-42deg) scale(.66); } 42% { opacity:1; transform:translate(-50%, -50%) rotate(14deg) scale(1); } to { opacity:0; transform:translate(-34%, -34%) rotate(-10deg) scale(.96); } }
@keyframes tapRingV30 { from { opacity:0; transform:translate(-50%, -50%) scale(.34); } 30% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.16); } }

body[data-effect='sparkle'] .keycap::before { display:block !important; }


/* ===== V32 event keycap fixes ===== */
.admin-group .admin-mini-grid.two-col .admin-skin-btn, .admin-group .admin-mode-grid .admin-skin-btn { white-space: normal; line-height: 1.15; }
.keycap[data-skin='basketball'] .keycap-image,
.keycap[data-skin='friedegg'] .keycap-image,
.keycap[data-skin='catpaw'] .keycap-image { filter: drop-shadow(0 14px 16px rgba(0,0,0,.22)); }
.keycap[data-skin='basketball'] .fragment-mesh .mesh-line { stroke: rgba(255,245,210,.96); }
.keycap[data-skin='friedegg'] .fragment-mesh .mesh-line { stroke: rgba(255,250,230,.96); }
.keycap[data-skin='catpaw'] .fragment-mesh .mesh-line { stroke: rgba(255,230,245,.96); }


/* ===== V47 sparkle/crystal effect upgrade ===== */
body[data-effect="sparkle"]::before { opacity:.84; background: radial-gradient(circle at 14% 18%, rgba(255,255,255,.18), transparent 14%), radial-gradient(circle at 82% 18%, rgba(255,255,255,.16), transparent 14%), radial-gradient(circle at 16% 80%, rgba(255,223,245,.18), transparent 16%), radial-gradient(circle at 84% 78%, rgba(255,255,255,.18), transparent 14%), linear-gradient(90deg, rgba(255,255,255,.09), transparent 18%, transparent 82%, rgba(255,255,255,.05)); }
body[data-effect="sparkle"] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 24px rgba(255,205,240,.38)) drop-shadow(0 0 42px rgba(255,226,140,.18)); }
body[data-effect='sparkle'] .keycap::before { content:''; position:absolute; inset:-14% -12%; pointer-events:none; background: radial-gradient(circle at 14% 18%, rgba(255,255,255,.55), transparent 8%), radial-gradient(circle at 82% 20%, rgba(255,242,170,.52), transparent 10%), radial-gradient(circle at 16% 84%, rgba(255,255,255,.45), transparent 9%), radial-gradient(circle at 86% 78%, rgba(255,220,246,.48), transparent 9%), radial-gradient(circle at 50% 8%, rgba(255,231,97,.24), transparent 18%), radial-gradient(circle at 50% 94%, rgba(255,186,240,.18), transparent 16%); mix-blend-mode: screen; opacity: 1; }
.tap-star.big { width: 16px; height: 16px; box-shadow: 0 0 18px rgba(255,240,170,.98), 0 0 30px rgba(255,186,240,.52); }
.tap-spark-halo.grand { width: 240px; height: 240px; margin-left: -120px; margin-top: -120px; background: radial-gradient(circle, rgba(255,255,255,.48) 0 6%, rgba(255,231,97,.22) 18%, rgba(255,186,240,.16) 42%, rgba(255,186,240,0) 74%); filter: drop-shadow(0 0 18px rgba(255,240,170,.55)) drop-shadow(0 0 38px rgba(255,186,240,.38)); animation-duration: .54s; }
.tap-spark-halo.burst.grand { width: 270px; height: 270px; margin-left: -135px; margin-top: -135px; animation-duration: .82s; }
.tap-spark-ring { position:absolute; pointer-events:none; z-index:7; border-radius:50%; opacity:0; animation: sparkRingV47 .54s ease-out forwards; }
.tap-spark-ring.inner { width: 156px; height: 156px; margin-left:-78px; margin-top:-78px; border:5px solid rgba(255,231,97,.95); box-shadow:0 0 18px rgba(255,231,97,.75), inset 0 0 16px rgba(255,255,255,.28); }
.tap-spark-ring.outer { width: 210px; height: 210px; margin-left:-105px; margin-top:-105px; border:4px solid rgba(109,198,255,.75); box-shadow:0 0 20px rgba(109,198,255,.58), 0 0 42px rgba(255,186,240,.28); animation-duration:.62s; }
.tap-spark-ring.burst.inner { width: 188px; height: 188px; margin-left:-94px; margin-top:-94px; border-width:6px; }
.tap-spark-ring.burst.outer { width: 246px; height: 246px; margin-left:-123px; margin-top:-123px; border-width:5px; }

body[data-effect='crystal'] .keycap { filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) drop-shadow(0 0 24px rgba(195,245,255,.28)); }
.tap-crystal-plate.grand { width: 82%; height: 76%; margin-left: -41%; margin-top: -34%; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(196,244,255,.28)); border: 2px solid rgba(255,255,255,.82); box-shadow: 0 0 24px rgba(196,244,255,.62), inset 0 0 24px rgba(255,255,255,.24); animation-duration: .58s; }
.tap-crystal-line { position:absolute; pointer-events:none; z-index:9; width:var(--len, 120px); height:3px; margin-left: calc(var(--len, 120px) / -2); margin-top: -1.5px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 14%, rgba(184,240,255,.98) 48%, rgba(255,255,255,.98) 86%, rgba(255,255,255,0) 100%); box-shadow: 0 0 8px rgba(195,245,255,.88), 0 0 18px rgba(133,226,255,.44); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); transform-origin:center; opacity:0; animation: crystalLineV47 .46s ease-out forwards; }
.tap-crystal-line.burst { animation-duration: .68s; }
.tap-crystal.cracky { width: 12px; height: 22px; box-shadow: 0 0 18px rgba(176,244,255,.95), 0 0 34px rgba(176,244,255,.42); }
.crystal-plate-burst.grand { width: 88%; height: 82%; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(176,244,255,.20)); border: 2px solid rgba(255,255,255,.8); box-shadow: 0 0 28px rgba(176,244,255,.62), inset 0 0 22px rgba(255,255,255,.16); }

@keyframes sparkRingV47 { from { opacity:0; transform:translate(-50%, -50%) scale(.28); } 26% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) scale(1.10); } }
@keyframes crystalLineV47 { from { opacity:0; transform:translate(-50%, -50%) rotate(var(--rot,0deg)) scale(.4); } 20% { opacity:1; } to { opacity:0; transform:translate(-50%, -50%) rotate(var(--rot,0deg)) scale(1.02); } }


/* ===== V47 crystal touch + hammer size upgrade ===== */
.tap-hammer.cute {
  font-size: 150px !important;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.30)) drop-shadow(0 0 14px rgba(255,210,120,.52)) !important;
  animation: tapHammerV47 .34s ease-out forwards !important;
}
.hammer-burst.big { font-size: 88px !important; }
.tap-hit-ring.heavy {
  width: 86px !important;
  height: 86px !important;
  margin-left: -43px !important;
  margin-top: -43px !important;
  border-width: 9px !important;
}
.tap-crystal-line.touch {
  height: 4px !important;
  z-index: 12 !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 12%, rgba(184,240,255,1) 45%, rgba(255,255,255,1) 88%, rgba(255,255,255,0) 100%) !important;
  box-shadow: 0 0 10px rgba(210,250,255,.95), 0 0 22px rgba(133,226,255,.58) !important;
}
.tap-crystal-touch-flash {
  width: 112px;
  height: 112px;
  margin-left: -56px;
  margin-top: -56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.62) 0 8%, rgba(164,239,255,.26) 30%, rgba(164,239,255,0) 72%);
  box-shadow: 0 0 22px rgba(176,244,255,.74), 0 0 44px rgba(176,244,255,.34);
  animation: crystalTouchFlashV47 .42s ease-out forwards;
}
.tap-crystal.cracky.touch {
  width: 14px !important;
  height: 26px !important;
  z-index: 13 !important;
}
@keyframes tapHammerV47 {
  from { opacity:0; transform:translate(-50%, -50%) rotate(-46deg) scale(.56); }
  38% { opacity:1; transform:translate(-50%, -50%) rotate(14deg) scale(1); }
  64% { opacity:1; transform:translate(-50%, -50%) rotate(-6deg) scale(1.06); }
  to { opacity:0; transform:translate(-32%, -32%) rotate(-13deg) scale(.96); }
}
@keyframes crystalTouchFlashV47 {
  from { opacity:0; transform:translate(-50%, -50%) scale(.28); }
  22% { opacity:1; }
  to { opacity:0; transform:translate(-50%, -50%) scale(1.18); }
}


/* ===== V47 user start screen + mission timeline ===== */
.start-mode .ad-wrap,
.start-mode .stats-grid,
.start-mode .game-zone,
.start-mode .controls,
.start-mode .options,
.start-mode .admin-quick-panel,
.start-mode .rank-prep,
.start-mode .view-panel,
.start-mode .social-controls {
  display: none !important;
}
.user-start-screen { display:none; margin: 8px auto 18px; width: min(100%, 720px); }
.start-mode .user-start-screen { display:block; }
.user-start-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,231,97,.22), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(103,246,255,.22), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.08));
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.user-start-head h2 { margin: 4px 0 6px; font-size: clamp(24px, 7vw, 34px); letter-spacing: -.04em; }
.user-start-head p { margin: 0 0 14px; color: var(--muted); line-height:1.38; font-weight:700; }
.profile-preview {
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.15);
  margin-bottom: 14px;
}
.profile-avatar {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px rgba(0,0,0,.18);
  font-size: 38px;
}
.profile-preview strong { display:block; font-size:18px; }
.profile-preview span { display:block; color:var(--muted); font-size:13px; margin-top:3px; font-weight:700; }
.starter-form { display:grid; gap: 9px; }
.character-grid {
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:8px;
}
.character-card {
  min-height:74px;
  border-radius:18px;
  padding:8px 5px;
  background: rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.character-card b { font-size:28px; line-height:1; }
.character-card span { font-size:11px; color:rgba(255,255,255,.82); font-weight:900; white-space:nowrap; }
.character-card.active {
  background: linear-gradient(145deg, rgba(103,246,255,.28), rgba(255,231,97,.22));
  border-color: rgba(255,231,97,.64);
  box-shadow: 0 0 0 2px rgba(255,231,97,.18), 0 12px 20px rgba(0,0,0,.14);
}
.user-start-actions {
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 16px;
}
.mission-timeline-wrap {
  border-radius: 22px;
  padding: 12px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.13);
}
.mission-timeline-title {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.mission-timeline-title strong { font-size:15px; letter-spacing:-.02em; }
.mission-timeline-title span { color:var(--muted); font-size:11px; font-weight:800; text-align:right; }
.mission-timeline {
  display:flex;
  align-items:stretch;
  gap: 9px;
  overflow-x:auto;
  padding: 4px 4px 12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling: touch;
}
.mission-timeline::-webkit-scrollbar { height: 8px; }
.mission-timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); border-radius: 999px; }
.timeline-card {
  flex: 0 0 132px;
  min-height: 94px;
  scroll-snap-align:start;
  border-radius: 20px;
  padding: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
}
.timeline-card:not(:last-child)::after {
  content:'';
  position:absolute;
  top:50%;
  right:-10px;
  width:10px;
  border-top: 3px dashed rgba(255,255,255,.35);
}
.timeline-card.character { flex-basis: 116px; align-items:center; text-align:center; background: rgba(255,231,97,.13); }
.timeline-card.character .timeline-emoji { font-size:36px; }
.timeline-card.current {
  background: linear-gradient(145deg, rgba(103,246,255,.24), rgba(255,231,97,.18));
  border-color: rgba(103,246,255,.62);
  box-shadow: 0 0 0 2px rgba(103,246,255,.12);
}
.timeline-card.locked { opacity:.72; filter:saturate(.75); }
.timeline-card.done {
  background: rgba(120,255,184,.13);
  border-color: rgba(120,255,184,.35);
}
.timeline-card span { color:var(--muted); font-size:11px; font-weight:900; }
.timeline-card strong { font-size:15px; letter-spacing:-.03em; line-height:1.18; margin-top:3px; }
.timeline-card em { font-style:normal; color:rgba(255,255,255,.76); font-size:11px; font-weight:800; margin-top:6px; }
.timeline-card .secret {
  display:grid;
  place-items:center;
  min-height: 40px;
  font-size:26px;
  border-radius:14px;
  background: rgba(0,0,0,.14);
  border: 1px dashed rgba(255,255,255,.26);
  margin-top: 5px;
}
@media (max-width: 420px) {
  .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-start-actions { grid-template-columns: 1fr; }
  .timeline-card { flex-basis: 126px; }
}


/* ===== V47 reward claim / game menu / admin watch ===== */
.reward-claim-main {
  border:0;
  border-radius:999px;
  padding:14px 16px;
  font-weight:1000;
  color:#18213b;
  background:linear-gradient(135deg, #ffe76a, #ff9ee7 55%, #7dfaff);
  box-shadow:0 12px 26px rgba(255,231,106,.22);
}
/* V2-7: 수령 전에는 기존 컬러 강조를 유지하고, 수령 완료 후에는 명확한 비활성 상태로 표시합니다. */
.reward-claim-main.is-claimed,
.reward-claim-main:disabled {
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  filter:saturate(.25);
  opacity:.78;
  cursor:default;
}
.timeline-card.claimable {
  border-color: rgba(255,231,106,.78);
  box-shadow: 0 0 0 2px rgba(255,231,106,.16), 0 0 24px rgba(255,231,106,.18);
}
.claim-mini {
  margin-top:8px;
  border:0;
  border-radius:999px;
  padding:7px 9px;
  font-size:11px;
  font-weight:1000;
  color:#18213b;
  background:linear-gradient(135deg, #ffe76a, #7dfaff);
}
.treasure-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:14px 0 12px;
}
.treasure-box {
  min-height:132px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(150deg, rgba(255,231,106,.20), rgba(103,246,255,.18));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.treasure-box strong { font-size:16px; }
.treasure-box em { font-style:normal; font-size:12px; color:rgba(255,255,255,.78); font-weight:900; }
.treasure-chest-visual { display:flex; align-items:center; justify-content:center; width:min(100%, 120px); }
.treasure-chest-image { display:block; width:min(100%, 104px); height:auto; aspect-ratio:1/1; object-fit:contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.24)); }
.menu-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.toast {
  position:fixed;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2147483647 !important;
  max-width:min(86vw, 360px);
  padding:12px 16px;
  border-radius:999px;
  background:rgba(15,18,38,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 16px 46px rgba(0,0,0,.45);
  font-weight:1000;
  text-align:center;
}
.admin-watch-table {
  display:grid;
  gap:6px;
  overflow-x:auto;
}
.watch-row {
  min-width:620px;
  display:grid;
  grid-template-columns:1.1fr .8fr .9fr .8fr 1.6fr .8fr;
  gap:6px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  align-items:center;
  font-size:12px;
  font-weight:800;
}
.watch-row.head {
  background:rgba(103,246,255,.12);
  color:rgba(255,255,255,.78);
  font-size:11px;
}
@media (max-width: 420px) {
  .treasure-grid, .menu-grid { grid-template-columns:1fr; }
}

/* ===== V47 button event/visibility fix ===== */
.top-actions { position: relative; z-index: 30; display:flex; gap:8px; }
.top-actions .pill.small {
  min-width: 66px;
  width: auto;
  padding: 12px 14px;
  white-space: nowrap;
  line-height: 1;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.reward-claim-main, .claim-mini, .treasure-box, .top-actions button {
  touch-action: manipulation;
  cursor: pointer;
}


/* ===== V47 mobile header overflow + menu-only top actions ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.app { width: 100%; max-width: 100vw; overflow-x: hidden; }
.topbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.brand-line { min-width: 0; display: flex; align-items: center; gap: 8px; }
.brand-line h1 { min-width: 0; max-width: calc(100vw - 150px); overflow: hidden; text-overflow: clip; white-space: nowrap; }
.version-chip { flex: 0 0 auto; }
.top-actions { flex: 0 0 auto; justify-content: flex-end; gap: 0; }
.top-actions .pill.small:not(#gameMenuBtn) { display: none !important; }
#gameMenuBtn { min-width: 78px; min-height: 54px; padding: 0 18px; border-radius: 28px; font-size: 18px; font-weight: 1000; }
.menu-grid { grid-template-columns: 1fr; gap: 12px; }
.menu-grid button { min-height: 60px; border-radius: 20px; font-size: 17px; font-weight: 1000; }
.user-start-card, .mission-timeline-wrap { max-width: 100%; box-sizing: border-box; }
.mission-timeline { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; }
@media (min-width: 430px) { .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) {
  .brand-line h1 { max-width: calc(100vw - 132px); font-size: 24px; }
  #gameMenuBtn { min-width: 70px; min-height: 50px; padding: 0 14px; font-size: 16px; }
}


/* ===== V47 mobile shell + Firebase status/ranking ===== */
body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background:
    radial-gradient(circle at 50% 0%, rgba(103,246,255,.13), transparent 30%),
    linear-gradient(160deg, #10162c, #25133e 56%, #111225);
}
.app {
  width: min(100vw, 430px);
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 26px 90px rgba(0,0,0,.42);
}
@media (min-width: 700px) {
  .app {
    border-left: 1px solid rgba(255,255,255,.10);
    border-right: 1px solid rgba(255,255,255,.10);
  }
}
.server-status {
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: -6px 14px 10px auto;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.server-status[data-mode="online"] {
  color: #102a2d;
  background: linear-gradient(135deg, #7dfaff, #9dffbe);
}
.server-status[data-mode="syncing"] {
  color: #302500;
  background: linear-gradient(135deg, #ffe76a, #ffcf83);
}
.server-status[data-mode="error"] {
  color: #fff;
  background: rgba(255,85,119,.28);
  border-color: rgba(255,85,119,.46);
}
.dialog-subtitle {
  margin: 14px 0 8px;
  font-size: 15px;
  letter-spacing: -.02em;
}
.server-rank-list div.mine {
  background: rgba(255,231,106,.16);
  border-color: rgba(255,231,106,.38);
}
#adminNewPasswordConfirmInput {
  margin-top: 8px;
}
@media (min-width: 700px) {
  html, body { overflow-x: hidden; }
}


/* ===== V47 stability: keycap size/overlay recovery ===== */
.game-zone {
  overflow: visible;
}
.keycap {
  position: relative;
  width: min(86vw, 360px);
  height: min(86vw, 360px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
}
.keycap-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.shatter-layer,
.fragment-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fragment-mesh {
  overflow: visible;
}
body.game-active .user-start-screen {
  display: none !important;
}
@media (min-width: 700px) {
  .keycap {
    width: 360px;
    height: 360px;
  }
}


/* ===== V47 count stability + mission achieved popup ===== */
.mission-achieved-box {
  text-align: center;
}
.mission-celebrate {
  font-size: 54px;
  filter: drop-shadow(0 10px 18px rgba(255,231,106,.32));
  margin-bottom: 4px;
}
.dialog-actions.stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mission-achieved-box .reward-claim-main {
  min-height: 58px;
  font-size: 18px;
}
.keycap.shattered {
  pointer-events: none;
}
.keycap:not(.shattered) {
  pointer-events: auto;
}

/* ===== V47 hard keycap bonus popup ===== */
.hard-bonus-box { text-align:center; background: radial-gradient(circle at 50% 0%, rgba(255,231,97,.22), transparent 42%), linear-gradient(160deg, #271a58, #1a2346 58%, #14172d); }
.bonus-pop { font-size:64px; margin-bottom:2px; animation: bonusPopV47 .78s cubic-bezier(.18,.72,.22,1) both; filter:drop-shadow(0 14px 22px rgba(255,231,106,.35)); }
.bonus-number { display:inline-grid; place-items:center; min-width:156px; min-height:106px; margin:8px auto 10px; border-radius:32px; font-size:56px; font-weight:1000; color:#142344; background:radial-gradient(circle at 24% 20%, rgba(255,255,255,.92), transparent 22%), linear-gradient(135deg, #ffe761, #ff77cf 48%, #67f6ff); box-shadow:0 18px 44px rgba(0,0,0,.32), 0 0 0 8px rgba(255,255,255,.10), 0 0 34px rgba(255,231,106,.28); animation: bonusNumberV47 .9s cubic-bezier(.18,.72,.22,1) both; }
.hard-bonus-box h2 { font-size:28px; margin-bottom:4px; }
.hard-bonus-box p { font-weight:900; color:rgba(255,255,255,.78); }
@keyframes bonusPopV47 { 0% { transform:scale(.35) rotate(-16deg); opacity:0; } 55% { transform:scale(1.16) rotate(8deg); opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } }
@keyframes bonusNumberV47 { 0% { transform:scale(.22); opacity:0; } 42% { transform:scale(1.24); opacity:1; } 68% { transform:scale(.94); } 100% { transform:scale(1); opacity:1; } }

/* ===== V47 image/status layout fix ===== */
.server-status { display:none !important; }
.server-status-line { margin:12px auto 0; width:fit-content; max-width:100%; padding:8px 12px; border-radius:999px; font-size:12px; line-height:1.25; font-weight:900; color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); text-align:center; }
.server-status-line[data-mode="online"] { color:#132b2d; background:linear-gradient(135deg,#7dfaff,#9dffbe); }
.server-status-line[data-mode="syncing"] { color:#302500; background:linear-gradient(135deg,#ffe76a,#ffcf83); }
.server-status-line[data-mode="error"] { color:#fff; background:rgba(255,85,119,.24); border-color:rgba(255,85,119,.44); }
.settings-server-status { margin:12px 0; }
.keycap-image { min-width:1px; min-height:1px; }

/* ===== V47 fixed keycap image map ===== */
.keycap-image[src=""], .keycap-image:not([src]) { visibility: hidden; }
.keycap-image { visibility: visible; }


/* ===== V49 reward touch + audio request UI stability ===== */
.reward-claim-main,
.claim-mini {
  position: relative;
  z-index: 24;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
.reward-claim-main { min-height: 54px; }
.claim-mini { min-height: 38px; width: 100%; }
.timeline-card.claimable { position: relative; z-index: 2; overflow: visible; }


/* ===== V50 owned keycap/effect customization ===== */
.customize-open-btn {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-height: 62px;
}
.customize-open-btn > span {
  font-size: 17px;
  font-weight: 1000;
}
.customize-open-btn > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 800;
}
.customize-box {
  width: min(92vw, 410px);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.customize-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.customize-head h2 {
  margin: 2px 0 0;
}
.customize-section {
  margin-top: 20px;
}
.customize-title {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.customize-title strong {
  font-size: 18px;
}
.customize-title span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}
.customize-grid {
  display: grid;
  gap: 10px;
}
.customize-card {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.07);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.customize-card.active {
  border-color: rgba(255,231,106,.78);
  background: linear-gradient(135deg, rgba(103,246,255,.17), rgba(255,231,106,.16));
  box-shadow: 0 0 0 2px rgba(255,231,106,.14), 0 12px 28px rgba(0,0,0,.22);
}
.customize-preview {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.customize-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.customize-effect-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 34px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 34%), rgba(103,246,255,.12);
}
.customize-card-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.customize-card-copy strong {
  font-size: 16px;
}
.customize-card-copy em {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-style: normal;
}
.customize-card > b {
  padding: 7px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.10);
  font-size: 11px;
  white-space: nowrap;
}
.customize-card.active > b {
  color: #172438;
  background: linear-gradient(135deg, #ffe761, #67f6ff);
}
.reward-apply-box {
  text-align: center;
}
.reward-earned-icon {
  font-size: 58px;
  margin-bottom: 4px;
  filter: drop-shadow(0 12px 20px rgba(255,231,106,.28));
}
.reward-apply-box .dialog-actions {
  margin-top: 16px;
}
@media (max-width: 380px) {
  .customize-card {
    grid-template-columns: 58px minmax(0,1fr) auto;
    gap: 9px;
    padding: 9px;
  }
  .customize-preview, .customize-effect-icon {
    width: 56px;
    height: 56px;
  }
}


/* ===== V51 permanent mission history + admin-only reset ===== */
.compact-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-danger-zone { border-color: rgba(255,92,112,.42) !important; background: rgba(255,70,92,.07) !important; }
.danger-outline { width:100%; color:#ffd9df !important; border-color:rgba(255,92,112,.58) !important; background:rgba(255,70,92,.10) !important; }
.mission-timeline.has-history { scroll-padding-left:24px; }
.timeline-card.history { opacity:.58; filter:saturate(.42); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.16); }
.timeline-card.history:hover,.timeline-card.history:focus-within { opacity:.78; filter:saturate(.70); }
.timeline-card.history .timeline-status.completed { color:rgba(151,255,199,.92); }
.timeline-card.history .timeline-reward { color:rgba(255,255,255,.78); }
.timeline-card.history .timeline-date { color:rgba(255,255,255,.50); font-size:10px; }
.timeline-card.character { border-color:rgba(255,231,97,.52); box-shadow:0 0 0 2px rgba(255,231,97,.10); z-index:2; }
.timeline-card.future { opacity:.68; }
.timeline-card.claimable { border-color:rgba(255,231,97,.74); box-shadow:0 0 0 2px rgba(255,231,97,.13); }
.timeline-card[data-section="history"]::after { border-top-style:solid; border-top-color:rgba(151,255,199,.32); }


/* ===== V52 fair-play warning and human verification ===== */
.fair-play-dialog::backdrop {
  background: rgba(7, 8, 22, .82);
  backdrop-filter: blur(8px);
}
.fair-play-box {
  width: min(90vw, 390px);
  text-align: center;
  border: 1px solid rgba(255, 208, 88, .42);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.fair-play-shield {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 9px;
  filter: drop-shadow(0 12px 24px rgba(255, 210, 75, .26));
}

/* V1-17 fair-play diagnostic color badge: meaning is intentionally not shown in user text. */
.fair-play-signal-badge {
  --fair-signal-color: #ef3340;
  --fair-signal-border: #8e1019;
  width: 58px;
  height: 58px;
  margin: 0 auto 9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: #fff;
  background: var(--fair-signal-color);
  border: 3px solid var(--fair-signal-border);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--fair-signal-color) 34%, transparent), 0 0 0 2px rgba(255,255,255,.18) inset;
  filter: none;
  font-family: ui-rounded, system-ui, sans-serif;
  font-size: 38px;
  font-weight: 1000;
  line-height: 1;
}
.fair-play-signal-badge span { transform: translateY(-1px); }
.fair-play-warning-copy {
  margin: 14px 0;
  padding: 13px 14px;
  border-radius: 16px;
  color: #fff1bf;
  background: rgba(255, 176, 52, .11);
  border: 1px solid rgba(255, 196, 88, .25);
  font-weight: 900;
  line-height: 1.55;
}
.fair-play-pause-note {
  margin: 12px 0 16px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}
#fairPlayWarningContinueBtn:disabled {
  opacity: .48;
  cursor: wait;
  filter: saturate(.55);
}
.human-target-line {
  margin: 13px 0 14px;
  font-weight: 900;
}
.human-target-line strong {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  margin: 0 5px;
  border-radius: 15px;
  font-size: 30px;
  background: rgba(103,246,255,.14);
  border: 1px solid rgba(103,246,255,.34);
}
.human-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.human-check-choice {
  min-height: 76px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 19px;
  color: #fff;
  background: rgba(255,255,255,.075);
  font-size: 38px;
  cursor: pointer;
  touch-action: manipulation;
}
.human-check-choice:active {
  transform: scale(.96);
  background: rgba(103,246,255,.16);
}
.fair-play-human-hint {
  min-height: 34px;
  margin-top: 13px;
}
body.fair-play-locked .keycap {
  pointer-events: none !important;
  filter: saturate(.45) brightness(.78) !important;
}
body.fair-play-locked .keycap::after {
  opacity: .25;
}
body.fair-play-locked .shatter-layer .tap-effect,
body.fair-play-locked .confetti-layer > *,
body.fair-play-locked .screen-confetti-layer > * {
  animation-play-state: paused !important;
  opacity: 0 !important;
}
.admin-fair-play-zone {
  border-color: rgba(103,246,255,.30) !important;
  background: rgba(103,246,255,.055) !important;
}
.fair-play-admin-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fair-play-admin-actions .danger-outline {
  grid-column: 1 / -1;
}


/* ===== V53 real-ad-safe perimeter progress light ===== */
#adSlot {
  contain: paint;
}
#adSlot > iframe,
#adSlot > ins,
#adSlot > div:not(.ad-placeholder) {
  position: relative;
  z-index: 5;
  max-width: 100%;
}
.ad-wrap[data-real-ad="true"] .ad-placeholder {
  display: none;
}
.ad-wrap[data-real-ad="true"] .ad-card {
  padding: 0;
  background: #fff;
}
.ad-wrap[data-real-ad="true"] .confetti-layer {
  display: none;
}
@supports not (offset-path: inset(3px round 21px)) {
  .ad-progress-marker {
    display: none;
  }
}


/* ===== V54 language and boot-tip support ===== */
.language-setting {
  display: grid;
  gap: 8px;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
}
.language-select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 0 14px;
  color: #fff;
  background: #30255d;
  font: inherit;
  font-weight: 800;
}
.language-select option { color: #111; background: #fff; }
.language-hint { margin: 0; }
.boot-tip-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(92vw, 430px);
  width: 100%;
}
.boot-tip-dialog::backdrop {
  background: rgba(3,8,28,.82);
  backdrop-filter: blur(8px);
}
.boot-tip-box {
  text-align: center;
  cursor: pointer;
  padding: 28px 22px 22px;
  border: 1px solid rgba(103,246,255,.42);
  box-shadow: 0 18px 70px rgba(0,0,0,.46), 0 0 26px rgba(103,246,255,.18);
}
.boot-tip-icon { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.boot-tip-text {
  margin: 12px 0 20px;
  font-size: clamp(20px, 5.2vw, 27px);
  font-weight: 900;
  line-height: 1.36;
  overflow-wrap: anywhere;
}
body[data-lang="en"] button,
body[data-lang="en"] .pill,
body[data-lang="en"] .stat-card,
body[data-lang="en"] .dialog-box,
body[data-lang="en"] .timeline-card,
body[data-lang="en"] .character-card {
  overflow-wrap: anywhere;
  word-break: normal;
}
body[data-lang="en"] .controls button,
body[data-lang="en"] .menu-grid button,
body[data-lang="en"] .user-start-actions button,
body[data-lang="en"] .size-actions button {
  min-height: 56px;
  height: auto;
  white-space: normal;
  line-height: 1.18;
  padding-top: 12px;
  padding-bottom: 12px;
}
body[data-lang="en"] .stats-grid .stat-card > span { font-size: clamp(10px, 2.6vw, 14px); }
body[data-lang="en"] .status-line { min-height: 52px; height: auto; }
body[data-lang="en"] .status-line span { white-space: normal; line-height: 1.18; }
body[data-lang="en"] .mission-timeline-title { align-items: flex-start; }
.count-suffix:empty { display: none; }

/* ===== V56 fixed keycap stage / stable header layout ===== */
html, body {
  scroll-behavior: auto;
  overflow-anchor: none;
  overscroll-behavior-y: contain;
}
.app {
  overflow-anchor: none;
  --keycap-stage-height: max(
    340px,
    min(calc(94vw * var(--keycap-scale)), calc(430px * var(--keycap-scale)))
  );
}
.topbar,
.top-ad,
.top-stats,
.status-line,
.controls,
.options {
  flex-shrink: 0;
  overflow-anchor: none;
}
/* V55 sticky 방식 제거: 타이틀은 일반 흐름의 고정 상단 블록 */
.topbar {
  position: relative;
  top: auto;
  z-index: 6;
  min-height: 48px;
  padding: 0;
}
.topbar::before { content: none !important; }
.topbar > * { position: relative; z-index: 1; }

/* 상태문구 / 고정 스테이지 / 진행바 */
.simple-zone {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto var(--keycap-stage-height) auto;
  align-content: start;
  align-items: start;
  justify-items: center;
  gap: 6px;
  overflow-anchor: none;
}
.keycap-stage {
  width: 100%;
  height: var(--keycap-stage-height);
  min-height: var(--keycap-stage-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: visible;
  overflow-anchor: none;
  contain: layout;
}
.keycap-stage .keycap {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  overflow-anchor: none;
}
/* 이미지 종류가 달라도 위 기준점은 고정, 남는 공간은 아래쪽으로 */
.keycap-stage .keycap-image {
  object-position: center top;
}
.mode-top .keycap-stage .keycap-image {
  object-position: center top;
}
.progress-shell {
  align-self: start;
  margin-top: 0;
  overflow-anchor: none;
}

@media (max-width: 430px) {
  .app {
    --keycap-stage-height: max(
      340px,
      min(calc(94vw * var(--keycap-scale)), calc(430px * var(--keycap-scale)))
    );
  }
}
@media (max-height: 780px) {
  .topbar { min-height: 46px; }
}
body[data-lang="en"] .topbar { min-height: 50px; }


/* ===== V57 default top viewport ===== */
html, body { scroll-padding-top: 0; }
.app, .topbar { scroll-margin-top: 0; }


/* ===== V58 user start screen vertical scroll unlock ===== */
body.start-mode {
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}
body.start-mode .app {
  height: auto !important;
  min-height: 100dvh;
  overflow-y: visible !important;
  touch-action: pan-y;
}
body.start-mode .user-start-screen,
body.start-mode .user-start-card,
body.start-mode .starter-form,
body.start-mode .user-start-actions {
  touch-action: pan-y;
}
body.start-mode .mission-timeline {
  touch-action: pan-x pan-y;
}


/* ===== V59 nickname security ===== */
.nickname-security-block { display: grid; gap: 8px; }
.nickname-check-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; }
.nickname-check-btn { min-width: 92px; padding: 0 13px; border-radius: 14px; box-shadow: none; background: rgba(103,246,255,.17); border: 1px solid rgba(103,246,255,.3); }
.nickname-check-btn:disabled { opacity: .48; cursor: default; }
.nickname-input[readonly] { background: rgba(13,20,45,.4); color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.1); cursor: default; }
.nickname-security-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 22px; }
.nickname-security-meta .hint-text { margin: 0; line-height: 1.45; }
.nickname-lock-badge { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #16233f; background: linear-gradient(135deg,#8fffd5,#ffe77a); }
.nickname-change-btn { justify-self: start; min-height: 38px; padding: 8px 14px; box-shadow: none; }
.nickname-change-btn:disabled { opacity: .52; cursor: default; }
.hint-text.is-success { color: #8fffd5; }
.hint-text.is-warning { color: #ffe77a; }
.hint-text.is-error { color: #ff9eb2; }
@media (max-width: 360px) { .nickname-check-row { grid-template-columns: 1fr; } .nickname-check-btn { min-height: 44px; } }
body[data-lang="en"] .nickname-check-btn { min-width: 108px; white-space: normal; line-height: 1.1; }


/* ===== V60 all-skin fixed stage + admin free scroll ===== */
/* 모든 스킨/방향은 같은 외곽 스테이지를 사용하며 원본 이미지 크기로 문서 높이를 바꾸지 못합니다. */
.keycap-stage {
  box-sizing: border-box;
  height: var(--keycap-stage-height) !important;
  min-height: var(--keycap-stage-height) !important;
  max-height: var(--keycap-stage-height) !important;
  contain: size layout;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.keycap-stage .keycap {
  position: relative !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  contain: layout size;
}
.mode-top .keycap-stage .keycap {
  width: min(calc(94vw * var(--keycap-scale)), calc(430px * var(--keycap-scale))) !important;
}
.mode-3d .keycap-stage .keycap {
  width: min(calc(90vw * var(--keycap-scale)), calc(430px * var(--keycap-scale))) !important;
}
.keycap-stage .keycap-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
}
/* 원본 캔버스 여백이 다른 이벤트 키캡도 외곽 크기는 동일합니다. */
.keycap-stage[data-skin="rainbow"] .keycap-image,
.keycap-stage[data-skin="mint"] .keycap-image,
.keycap-stage[data-skin="basketball"] .keycap-image,
.keycap-stage[data-skin="friedegg"] .keycap-image,
.keycap-stage[data-skin="catpaw"] .keycap-image {
  object-position: center top !important;
}
@media (max-height: 780px) {
  .mode-top .keycap-stage .keycap { width: min(calc(90vw * var(--keycap-scale)), calc(390px * var(--keycap-scale))) !important; }
  .mode-3d .keycap-stage .keycap { width: min(calc(86vw * var(--keycap-scale)), calc(380px * var(--keycap-scale))) !important; }
}

/* 관리자 모드에서는 게임 시작용 상단 보정과 화면 잠금을 사용하지 않습니다. */
html.admin-scroll-mode,
body.admin-scroll-mode {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}
body.admin-scroll-mode .app {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
  padding-bottom: calc(160px + var(--safe-bottom)) !important;
}
body.admin-scroll-mode .admin-quick-panel,
body.admin-scroll-mode .admin-section-list,
body.admin-scroll-mode .admin-group,
body.admin-scroll-mode .admin-mini-grid {
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}
body.admin-scroll-mode .admin-quick-panel {
  display: block;
  position: relative;
  padding-bottom: 24px;
}
#adminPanelDialog {
  max-width: 100vw;
  max-height: 94dvh;
  overflow: hidden;
}
#adminPanelDialog .admin-box {
  width: min(92vw, 430px);
  max-height: 90dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: calc(44px + var(--safe-bottom));
}
body.admin-dialog-open { overflow: hidden !important; }


/* ===== V61 admin preview isolation + real visual scale ===== */
.app {
  --keycap-render-scale: 1;
  --keycap-render-x: 0px;
  --keycap-render-y: 0px;
  /* 사용자 크기값은 고정 스테이지 높이를 바꾸지 않습니다. */
  --keycap-stage-height: max(340px, min(94vw, 430px));
}
.keycap-stage {
  height: var(--keycap-stage-height) !important;
  min-height: var(--keycap-stage-height) !important;
  max-height: var(--keycap-stage-height) !important;
}
.mode-top .keycap-stage .keycap,
.mode-3d .keycap-stage .keycap {
  width: min(94vw, 430px) !important;
  height: 100% !important;
  transform: none !important;
}
.keycap-render {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: center top;
  transform: translate3d(var(--keycap-render-x), var(--keycap-render-y), 0) scale(var(--keycap-render-scale));
  transition: none;
  pointer-events: none;
  will-change: transform;
}
.keycap-render .keycap-image {
  pointer-events: none;
}
/* 기존 눌림은 버튼 레이아웃이 아니라 렌더 레이어 안에서만 보이게 합니다. */
.keycap.pressed { transform: none !important; }
.keycap.pressed .keycap-render { filter: brightness(.98); }
.size-slider:disabled { opacity: .46; }
.size-actions button:disabled { opacity: .42; cursor: default; }
@media (max-height: 780px) {
  .app { --keycap-stage-height: max(320px, min(90vw, 390px)); }
  .mode-top .keycap-stage .keycap,
  .mode-3d .keycap-stage .keycap { width: min(90vw, 390px) !important; }
}


/* ===== V62 scaled keycap reserves real lower layout space ===== */
.app {
  --keycap-base-stage-height: max(340px, min(94vw, 430px));
  --keycap-stage-extra: 0px;
  --keycap-stage-height: calc(var(--keycap-base-stage-height) + var(--keycap-stage-extra));
}
.simple-zone {
  grid-template-rows: auto var(--keycap-stage-height) auto !important;
}
.keycap-stage {
  height: var(--keycap-stage-height) !important;
  min-height: var(--keycap-stage-height) !important;
  max-height: var(--keycap-stage-height) !important;
  contain: layout size !important;
  align-items: flex-start !important;
}
/* 확대 기준 캔버스는 늘어난 스테이지 전체가 아니라 고정된 기본 높이만 사용합니다. */
.keycap-stage .keycap,
.mode-top .keycap-stage .keycap,
.mode-3d .keycap-stage .keycap {
  height: var(--keycap-base-stage-height) !important;
  min-height: var(--keycap-base-stage-height) !important;
  max-height: var(--keycap-base-stage-height) !important;
  align-self: flex-start !important;
}
.keycap-render {
  height: 100% !important;
  transform-origin: center top !important;
}
.progress-shell {
  position: relative;
  z-index: 3;
}
.keycap-scale-hint {
  margin-top: -4px;
  color: rgba(143,255,213,.9);
  line-height: 1.4;
}
.keycap-scale-hint.is-fixed { color: #ffe77a; }
@media (max-height: 780px) {
  .app {
    --keycap-base-stage-height: max(320px, min(90vw, 390px));
  }
}


/* ===== V63 Play release-preparation ===== */
.house-promo-label { background: linear-gradient(135deg,#67f6ff,#7dffb5); color:#10203c; }
.ad-card[data-ad-state="house-promo"] { cursor: default; }
.ad-card[data-ad-state="house-promo"] .ad-placeholder { pointer-events:none; }
.policy-link-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 4px; }
.policy-link-row a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 12px; border-radius:16px; color:#fff; text-decoration:none; font-weight:850; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); overflow-wrap:anywhere; }
.policy-link-row a:focus-visible { outline:3px solid #67f6ff; outline-offset:2px; }
@media (max-width:360px){ .policy-link-row{grid-template-columns:1fr;} }


/* ===== V66 Firebase Google administrator authentication ===== */
.admin-auth-box { text-align: center; }
.admin-auth-shield { font-size: 44px; margin-bottom: 4px; }
.admin-auth-account {
  margin: 12px 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(103,246,255,.09);
  border: 1px solid rgba(103,246,255,.25);
  color: #dffcff;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-auth-account.panel-account { text-align: center; margin-top: 14px; }
.google-admin-login {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #1f2937;
  font-weight: 950;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.google-admin-login span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: #4285f4;
  color: white;
  font-weight: 950;
}
.google-admin-login:disabled { opacity: .45; cursor: not-allowed; }
#adminLoginHint[data-mode="error"] { color: #ff9aaa; }
#adminLoginHint[data-mode="success"] { color: #8fffc1; }
#adminLoginHint[data-mode="checking"] { color: #7feaff; }
#adminLoginHint[data-mode="setup"] { color: #ffe58a; }

/* V66 관리자 권한 등록 안내 */
.admin-enrollment-box{display:grid;gap:9px;margin:4px 0 12px;padding:14px;border:1px solid rgba(103,246,255,.28);border-radius:16px;background:rgba(10,20,48,.48)}
.admin-enrollment-box[hidden]{display:none!important}.admin-enrollment-box strong{font-size:14px;color:#dffcff}.admin-enrollment-box code{display:block;overflow-wrap:anywhere;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.28);color:#ffe761;font-size:12px;line-height:1.45;user-select:all}.admin-enrollment-box .ghost{justify-self:start;padding:9px 13px}.admin-enrollment-box p{margin:0;color:#aebbd6;font-size:12px;line-height:1.55}

/* ===== V66 character PNG rendering ===== */
.profile-avatar {
  overflow: hidden;
}
.profile-avatar .character-visual,
.profile-avatar img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}
.character-card .character-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.character-card .character-icon img,
.character-card .character-visual {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.timeline-card.character .timeline-emoji {
  width: 54px;
  height: 54px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
}
.timeline-card.character .timeline-emoji .character-visual {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}
.rank-player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rank-player-name {
  display: inline-block;
}
.rank-character-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.character-visual.emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ===== V77 Android back-button guard ===== */
.back-exit-box { max-width: 420px; }
.back-exit-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.back-exit-actions button { min-height:52px; }

/* ===== V85 ranking/tutorial / TEST admin / cloud progress ===== */
.ranking-open-btn { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.ranking-open-btn small { width:100%; opacity:.72; font-size:11px; }
.server-rank-list .rank-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:13px; background:rgba(255,255,255,.07); margin:6px 0; min-height:48px; }
.server-rank-list .rank-row.mine { outline:2px solid rgba(255,213,45,.9); background:rgba(255,213,45,.12); }
.server-rank-list .rank-row.top1 { background:rgba(255,213,45,.16); }
.server-rank-list .rank-row.top2 { background:rgba(210,220,245,.12); }
.server-rank-list .rank-row.top3 { background:rgba(238,167,105,.12); }
.rank-place { min-width:34px; display:inline-block; text-align:center; font-weight:900; }
.my-rank-fixed { position:sticky; bottom:-1px; z-index:2; margin:8px 0 16px; padding:10px 12px; border-radius:12px; background:rgba(23,23,47,.96); border:1px solid rgba(255,255,255,.12); }

/* ===== V94 ranking full-window layout (V93 layout preserved) ===== */
#rankingDialog { max-width:none; max-height:none; }
.ranking-dialog-box { width:min(94vw,560px); height:min(88dvh,820px); max-height:none; padding:16px; overflow:hidden; display:flex; flex-direction:column; gap:10px; }
.ranking-dialog-head { flex:0 0 auto; }
.ranking-dialog-head h2 { margin-bottom:4px; }
.ranking-dialog-head p { margin:0; font-size:12px; line-height:1.4; }
.ranking-my-card { flex:0 0 auto; border-radius:18px; padding:12px 14px; background:linear-gradient(135deg, rgba(255,225,91,.20), rgba(102,240,255,.13)); border:1px solid rgba(255,231,106,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.ranking-my-label { display:block; font-size:11px; font-weight:1000; color:#ffe76a; margin-bottom:7px; }
.ranking-my-main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ranking-my-player { min-width:0; display:flex; align-items:center; gap:9px; }
.ranking-my-visual { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; }
.ranking-my-visual .rank-character-icon { width:34px; height:34px; }
.ranking-my-player > div { min-width:0; }
.ranking-my-name { display:block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.ranking-my-player small { display:block; margin-top:2px; color:rgba(255,255,255,.70); font-weight:800; font-size:10px; }
.ranking-my-result { flex:0 0 auto; text-align:right; }
.ranking-my-result strong { display:block; font-size:21px; line-height:1; color:#fff3a4; }
.ranking-my-result span { display:block; margin-top:5px; font-size:12px; font-weight:900; }
.ranking-tabs { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:3px; border-radius:14px; background:rgba(255,255,255,.07); }
.ranking-tab { min-height:42px; border:0; border-radius:11px; background:transparent; color:rgba(255,255,255,.72); font:inherit; font-weight:1000; cursor:pointer; }
.ranking-tab.active, .ranking-tab[aria-selected="true"] { background:linear-gradient(135deg,#67f6ff,#8fffb5); color:#15172f; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ranking-scroll-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 3px 6px; scrollbar-gutter:stable; }
.ranking-tab-panel[hidden] { display:none !important; }
.ranking-list-title { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px 6px; background:linear-gradient(180deg, rgba(46,34,80,.98) 70%, rgba(46,34,80,0)); }
.ranking-list-title h3 { margin:0; font-size:15px; }
.ranking-list-title span { font-size:10px; color:rgba(255,255,255,.58); font-weight:800; }
.ranking-panel-hint { margin:8px 2px 4px; text-align:center; }
.ranking-close-btn { flex:0 0 auto; width:100%; min-height:46px; }
@media (max-height:680px) { .ranking-dialog-box { height:min(92dvh,680px); gap:7px; padding:12px; } .ranking-dialog-head p { display:none; } .ranking-my-card { padding:9px 11px; } .ranking-my-result strong { font-size:19px; } .ranking-tab { min-height:38px; } }
.admin-reward-summary { display:grid; gap:8px; margin:10px 0; }
.admin-summary-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:stretch; }
.admin-summary-main { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; }
.admin-summary-main strong { font-size:18px; }
.admin-reward-prepared-track { display:flex; gap:8px; overflow-x:auto; padding:8px 2px 12px; scroll-snap-type:x proximity; }
.admin-prepared-card { flex:0 0 140px; scroll-snap-align:start; padding:10px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); }
.admin-prepared-card strong,.admin-prepared-card span { display:block; }
.admin-prepared-card span { margin-top:6px; font-size:11px; opacity:.72; }
.admin-max-owners-list { display:grid; gap:8px; max-height:55vh; overflow:auto; margin:12px 0; }
.admin-owner-row { display:grid; grid-template-columns:1.15fr .8fr .8fr .95fr 1fr; gap:6px; align-items:center; padding:10px; border-radius:12px; background:rgba(255,255,255,.07); font-size:12px; }
.feature-tutorial { position:fixed; inset:0; z-index:10000; background:rgba(4,4,18,.72); pointer-events:auto; }
.feature-tutorial-bubble { position:fixed; top:14%; left:50%; transform:translateX(-50%); width:min(88vw,370px); padding:18px; border-radius:18px; background:#27274d; box-shadow:0 16px 50px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); pointer-events:auto; text-align:center; }
.feature-tutorial-bubble p { margin:8px 0 12px; line-height:1.5; font-weight:800; }
/* V1-13: 튜토리얼 대상은 클릭 유도 후 실제 기능창을 열고, 닫은 뒤 다음 단계로 진행합니다. */
.tutorial-tap-callout { display:flex; align-items:center; justify-content:center; gap:9px; margin:2px auto 10px; padding:10px 14px; width:max-content; max-width:100%; border-radius:999px; background:linear-gradient(135deg,#ffe96b,#ffbd3d); color:#302000; box-shadow:0 7px 20px rgba(255,199,52,.3); font-size:19px; font-weight:950; letter-spacing:.01em; animation:tutorialTapPrompt .72s ease-in-out infinite alternate; }
.tutorial-tap-icon { display:inline-block; font-size:30px; line-height:1; filter:drop-shadow(0 3px 3px rgba(0,0,0,.18)); transform-origin:50% 90%; animation:tutorialFingerTap .72s ease-in-out infinite alternate; }
.tutorial-step-copy { display:block; font-size:16px; line-height:1.5; font-weight:800; }
@keyframes tutorialTapPrompt { from { transform:scale(.98); } to { transform:scale(1.035); } }
@keyframes tutorialFingerTap { from { transform:translateY(-4px) rotate(0deg); } to { transform:translateY(4px) rotate(0deg); } }

.tutorial-actions { display:flex; justify-content:center; gap:10px; margin-top:14px; }
.tutorial-target-active { position:relative !important; z-index:10001 !important; box-shadow:0 0 0 5px #ffd52d,0 0 0 10px rgba(255,213,45,.25),0 12px 36px rgba(0,0,0,.45) !important; animation:tutorialPulse 1s ease-in-out infinite alternate; }
@keyframes tutorialPulse { from{transform:scale(1)} to{transform:scale(1.025)} }
@media (max-width:460px){ .admin-owner-row{grid-template-columns:1fr 1fr}.admin-owner-row strong{grid-column:1/-1}.admin-summary-row{grid-template-columns:1fr auto} }

/* ===== V84 TEST environment ===== */
.test-env-chip { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:2px 9px; border-radius:999px; background:rgba(255,255,255,.88); color:#6d21b5; font-size:11px; font-weight:1000; letter-spacing:.08em; box-shadow:0 0 0 2px rgba(255,213,45,.72); }
.start-profile-save-btn { width:100%; margin-top:10px; min-height:44px; }


/* ===== V85 early goals + TEST admin ===== */
.early-goal-banner{margin:8px auto 4px;width:min(94%,620px);padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,225,89,.20),rgba(135,98,255,.18));border:1px solid rgba(255,232,115,.42);text-align:center;font-weight:900;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.test-admin-login{width:100%;border:1px solid rgba(94,255,195,.55);background:linear-gradient(135deg,#216a58,#294b73);color:#fff;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer}
.admin-reward-watch .watch-row{align-items:start}
.admin-inventory-detail{display:block;margin-top:3px;font-size:.72rem;line-height:1.25;opacity:.78;word-break:keep-all}
#adminRewardWatchSource[data-mode="cloud"]{color:#70f0bd} #adminRewardWatchSource[data-mode="local"]{color:#ffd66b}

.admin-watch-actions{display:flex;justify-content:flex-end;margin-top:8px}.admin-watch-actions .mini{min-height:34px}


/* ===== V86 piano / admin order ===== */
.admin-prepared-card.pending{opacity:.86;border-style:dashed}
.admin-prepared-pending-title{margin:10px 0 6px;font-size:12px;font-weight:800;color:#7a4dd8}
#__vercel-toolbar,#vercel-toolbar,[data-vercel-toolbar],.vercel-toolbar{display:none !important;visibility:hidden !important}
iframe[src*="vercel"][src*="toolbar"]{display:none !important;visibility:hidden !important}


/* ===== V90 promotion parity ===== */
.back-exit-box .section-kicker{font-size:15px;}
.back-exit-box h2{font-size:30px;line-height:1.2;}
.back-exit-box .fair-play-warning-copy{font-size:16px;line-height:1.5;}
.back-exit-actions{grid-template-columns:1fr;gap:10px;}
.back-exit-actions button{min-height:58px;font-size:26px;font-weight:900;padding:12px 10px;}
#backContinueBtn{font-size:28px;}
#backMenuBtn,#backExitBtn{font-size:24px;}
.admin-pending-effect-btn{border-style:dashed;}
.admin-pending-effects .admin-effect-btn{white-space:normal;line-height:1.15;}
#__vercel-toolbar,#vercel-toolbar,[data-vercel-toolbar],.vercel-toolbar,[data-testid*="vercel"],[id*="vercel"],[class*="vercel"],[aria-label*="Vercel"],[title*="Vercel"]{display:none !important;visibility:hidden !important}
iframe[src*="vercel"],iframe[src*="toolbar"]{display:none !important;visibility:hidden !important}


/* ===== V89 effect tuning ===== */
@keyframes tapCloudFloatV89 {
  0% { transform: translate(-50%, -50%) scale(.82); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(calc(-50% + 10px), calc(-50% - 26px)) scale(1.08); opacity: 0; }
}
@keyframes tapBalloonFloatV89 {
  0% { transform: translate(-50%, -50%) scale(.78); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(calc(-50% + 6px), calc(-50% - 96px)) scale(1.08); opacity: 0; }
}
@keyframes tapCrownScatterV89 {
  0% { transform: translate(-50%, -50%) scale(.74); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(calc(-50% + 38px), calc(-50% - 24px)) scale(1.02); opacity: 0; }
}
@keyframes tapCandyScatterV89 {
  0% { transform: translate(-50%, -50%) scale(.8); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(calc(-50% + 34px), calc(-50% - 42px)) rotate(12deg); opacity: 0; }
}
@keyframes tapRainbowArcV89 {
  0% { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 48px)) scale(1.06); opacity: 0; }
}
@keyframes confettiCloudFloatV89 {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x), -48px) scale(1.08); opacity: 0; }
}
@keyframes confettiBalloonFloatV89 {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1.08); opacity: 0; }
}
@keyframes confettiCrownScatterV89 {
  0% { transform: translate(0, 0) scale(.82); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--x), -36px) rotate(var(--r)) scale(1); opacity: 0; }
}
@keyframes confettiCandyScatterV89 {
  0% { transform: translate(0, 0) scale(.82); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 0; }
}
@keyframes confettiRainbowArcV89 {
  0% { transform: translate(0, 0) scale(.82); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x), -58px) scale(1.04); opacity: 0; }
}

/* V90: TEST/LIVE 사용자 화면 동일. 테스트 식별은 Android 테스트 아이콘으로만 합니다. */
#testEnvChip,.test-env-chip,#adminTestLoginBtn,#adminTestNicknameUnlockBtn{display:none !important;}

/* ===== V91 normalized K/E/Y assets + external overlay cleanup ===== */
.keycap[data-skin="key_k"] .keycap-image,
.keycap[data-skin="key_e"] .keycap-image,
.keycap[data-skin="key_y"] .keycap-image {
  object-position: center center !important;
}
vercel-live-feedback,
vercel-toolbar,
[data-vercel-live-feedback],
[data-vercel-toolbar],
#__vercel-toolbar,
#vercel-toolbar,
.vercel-toolbar,
iframe[src*="vercel"][src*="toolbar"],
iframe[src*="vercel"][src*="feedback"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* 승인 준비 효과는 미리보기 중에도 게임 배경을 기본 테마와 동일하게 유지합니다. */
body[data-effect="heart_pop"],
body[data-effect="star_sprinkle"],
body[data-effect="cloud_puff"],
body[data-effect="mini_rainbow_dust"],
body[data-effect="mini_candy_fountain"],
body[data-effect="mini_balloon_float"],
body[data-effect="gift_ribbon"],
body[data-effect="tiny_crown"] {
  --fx-bg-a:#243468;
  --fx-bg-b:#1b0f49;
  --fx-bg-c:#130626;
  --fx-glow-rgb:103,246,255;
  --fx-accent-rgb:255,231,97;
}
/* V1-86 Halloween effects always keep a dark readable game background. */
body[data-effect="halloween_ghost_mist"] { --fx-bg-a:#28304b; --fx-bg-b:#17182f; --fx-bg-c:#0c0b1d; --fx-glow-rgb:202,215,235; --fx-accent-rgb:171,127,255; }
body[data-effect="halloween_pumpkin_burst"] { --fx-bg-a:#4a241b; --fx-bg-b:#25142f; --fx-bg-c:#100917; --fx-glow-rgb:255,141,54; --fx-accent-rgb:180,93,255; }
body[data-effect="halloween_bat_swarm"] { --fx-bg-a:#2d2047; --fx-bg-b:#17132b; --fx-bg-c:#0c0917; --fx-glow-rgb:156,112,224; --fx-accent-rgb:255,145,54; }
body[data-effect="halloween_magic_circle"] { --fx-bg-a:#3a1f59; --fx-bg-b:#1d1238; --fx-bg-c:#0d081b; --fx-glow-rgb:190,103,255; --fx-accent-rgb:255,149,60; }
body[data-effect="halloween_spiderweb"] { --fx-bg-a:#252941; --fx-bg-b:#17152d; --fx-bg-c:#0b0a17; --fx-glow-rgb:190,204,230; --fx-accent-rgb:172,117,255; }
body[data-effect^="halloween_"] .brand h1,
body[data-effect^="halloween_"] .stat-card,
body[data-effect^="halloween_"] .status-line { text-shadow:0 2px 4px rgba(0,0,0,.72); }

/* ===== V92 cumulative reward status rows ===== */
.reward-list .reward-goal-row { position: relative; }
.reward-list .reward-goal-row > strong { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.reward-list .reward-goal-row > strong > span { min-width: 0; }
.reward-list .reward-goal-status { flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; font-style: normal; font-size: 11px; font-weight: 900; color: rgba(255,255,255,.9); background: rgba(255,255,255,.10); }
.reward-list .reward-goal-row.current { background: rgba(103,246,255,.10); border: 1px solid rgba(103,246,255,.30); }
.reward-list .reward-goal-row.current .reward-goal-status { color: #08131a; background: linear-gradient(90deg,#67f6ff,#83ffba); }
.reward-list .reward-goal-row.claimable { background: rgba(255,220,103,.11); border: 1px solid rgba(255,220,103,.28); }
.reward-list .reward-goal-row.claimable .reward-goal-status { color: #241c05; background: #ffe36d; }
.reward-list .reward-goal-row.locked { opacity: .72; }
.reward-list .reward-goal-row.done .reward-goal-status { color: #082016; background: #8dffd0; }
@media (max-width: 420px) {
  .reward-list > div { grid-template-columns: 78px 1fr; }
  .reward-list .reward-goal-row > strong { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* V1-13 mission detail dialog */
.mission-current-list strong{max-width:62%;text-align:right;line-height:1.25}.mission-next-event{margin:10px 0 16px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);font-weight:800;line-height:1.45}


/* V1-27 game viewport protection + admin diagnostics */
body.game-active .game-zone,
body.game-active .keycap-stage { touch-action: none !important; overscroll-behavior: contain; }
.admin-diagnostics-zone { display:grid; gap:8px; }
.admin-diag-toolbar { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.admin-diag-toolbar select { min-width:0; width:100%; border-radius:12px; padding:9px 10px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14); font-weight:800; }
.admin-diag-toolbar option { color:#111; }
.admin-diag-env { line-height:1.55; overflow-wrap:anywhere; }
.admin-diag-list { max-height:250px; overflow:auto; display:grid; gap:6px; padding:2px; overscroll-behavior:contain; }
.admin-diag-row { width:100%; text-align:left; border:1px solid rgba(255,255,255,.11); border-radius:12px; padding:9px 10px; background:rgba(0,0,0,.16); color:#fff; display:grid; gap:3px; }
.admin-diag-row strong { font-size:12px; color:#ffe761; }
.admin-diag-row span { font-size:11px; color:#c7d3ec; line-height:1.4; }
.admin-diag-empty { padding:12px; border-radius:12px; background:rgba(255,255,255,.04); color:#aebbd6; font-size:11px; text-align:center; }
.admin-diag-range { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end; }
.admin-diag-range label { display:grid; gap:4px; color:#c7d3ec; font-size:11px; font-weight:800; }
.admin-diag-range input { width:100%; border-radius:10px; padding:8px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14); }

/* ===== V1-27 diagnostics / viewport stability ===== */
.admin-diagnostics-zone .admin-diag-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.admin-diagnostics-zone .admin-diag-actions .danger-outline {
  grid-column:auto !important;
}
.admin-diagnostics-zone .admin-diag-actions > button {
  width:100%;
  min-width:0;
}
html.viewport-repairing,
html.viewport-repairing body {
  overflow-x:hidden !important;
}
#fairPlayForcedDialog,
#fairPlayWarningDialog,
#fairPlayHumanDialog,
#fairPlayReopenDialog {
  max-width:min(94vw, 520px) !important;
  width:min(94vw, 520px) !important;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}
#fairPlayForcedDialog .dialog-body,
#fairPlayWarningDialog .dialog-body,
#fairPlayHumanDialog .dialog-body,
#fairPlayReopenDialog .dialog-body {
  max-width:100%;
  overflow-x:hidden;
}


/* ===== V1-31 reward roadmap tutorial + TOP10 notice ===== */
.reward-roadmap-open {
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  border: 1px solid rgba(255,231,97,.42);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,231,97,.17), rgba(103,246,255,.13));
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.reward-roadmap-dialog { max-width: 100vw; max-height: 100dvh; }
.reward-roadmap-box {
  width: min(96vw, 620px);
  max-height: 94dvh;
  border-radius: 22px;
  background: linear-gradient(160deg, #23234a, #38215b);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reward-roadmap-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.reward-roadmap-head > div { display:grid; gap:2px; }
.reward-roadmap-head strong { font-size:16px; }
.reward-roadmap-head small { color:var(--muted); font-size:10px; font-weight:800; }
.reward-roadmap-close-x { flex:0 0 auto; width:38px; height:38px; border-radius:50%; font-size:16px; }
.reward-roadmap-scroll {
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:16px;
  background:#fff8e8;
  border:1px solid rgba(255,255,255,.14);
  max-height: 68dvh;
  touch-action: pan-y;
  position: relative;
}
.reward-roadmap-scroll.zoomed {
  overflow: hidden;
  touch-action: none;
}
.reward-roadmap-scroll img {
  display:block;
  width:100%;
  height:auto;
  min-width:100%;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.reward-roadmap-notice {
  display:grid;
  gap:3px;
  margin-top:8px;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(0,0,0,.16);
  font-size:10px;
  line-height:1.35;
  color:rgba(255,255,255,.82);
}
.reward-roadmap-notice strong { color:#ffe761; font-size:11px; }
.reward-roadmap-box .dialog-actions { margin-top:8px; }
.reward-roadmap-box .dialog-actions .primary { min-width:92px; }


/* ===== V1-31 diagnostics cursor / tutorial polish ===== */
.monthly-top10-roadmap-note{margin-top:3px;padding-top:5px;border-top:1px solid rgba(255,231,97,.22);color:#fff;font-weight:800}
.admin-diag-cursor{margin-top:6px;color:#ffe761;font-weight:900}
.admin-diag-cursor-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:7px 0 9px}
.admin-diag-cursor-actions button{min-height:40px;font-size:11px;padding:8px 6px}
@media(max-width:460px){.admin-diag-cursor-actions{grid-template-columns:1fr}.admin-diag-cursor-actions button{min-height:38px}}


/* ===== V1-37 reward roadmap guided auto-scroll ===== */
.feature-tutorial.reward-roadmap-scroll-phase .feature-tutorial-bubble{top:12%;}
.feature-tutorial.reward-roadmap-scroll-phase{background:rgba(4,4,18,.58);}
.tutorial-scroll-arrow{display:block;margin:0 auto 8px;font-size:44px;line-height:1;color:#ffe761;filter:drop-shadow(0 5px 8px rgba(0,0,0,.38));animation:tutorialScrollArrow .68s ease-in-out infinite alternate;}
@keyframes tutorialScrollArrow{from{transform:translateY(-5px);opacity:.68}to{transform:translateY(7px);opacity:1}}


/* ===== V1-37 admin sound calibrator ===== */
.admin-sound-calibration-group{overflow:visible}
.admin-sound-calibrator{display:grid;gap:10px;margin-top:10px}
.admin-sound-row{padding:10px 11px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.045)}
.admin-sound-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.admin-sound-row-head strong{font-size:.92rem}
.admin-sound-value{min-width:54px;text-align:right;font-weight:900;color:#7cf2d1}
.admin-sound-slider{width:100%;accent-color:#63e7cf}
.admin-sound-test-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.admin-sound-test-actions .ghost{min-height:35px;padding:7px 9px;font-size:.78rem}
.admin-sound-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.admin-quick-panel .admin-sound-row{padding:9px}
.admin-quick-panel .admin-sound-row-head strong{font-size:.84rem}
.admin-quick-panel .admin-sound-test-actions .ghost{font-size:.73rem;min-height:32px}
@media (max-width:390px){.admin-sound-actions{grid-template-columns:1fr}.admin-sound-row{padding:9px 8px}}


/* ===== V1-38 short-screen viewport / bottom-control protection ===== */
/* 실제 visualViewport 높이를 우선 사용해 Android 시스템 내비게이션 영역 밖에서 게임 UI를 끝냅니다. */
.app {
  min-height: var(--kb-viewport-height, 100dvh);
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}
body.game-active .app {
  height: var(--kb-viewport-height, 100dvh);
  min-height: var(--kb-viewport-height, 100dvh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
body.game-active .app::-webkit-scrollbar { display: none; }
body.game-active .game-zone {
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}
body.game-active .keycap-stage,
body.game-active .keycap { touch-action: none !important; }

/* V61/V62의 320~340px 최소 스테이지가 뒤쪽 cascade에서 짧은 화면 보정을 덮던 문제를 마지막 단계에서 재보정합니다. */
@media (max-height: 860px) {
  .app {
    --keycap-base-stage-height: clamp(220px, 31dvh, 290px);
  }
  .topbar { min-height: 42px; }
  #gameMenuBtn { min-height: 46px; padding: 0 14px; font-size: 16px; }
  .compact-ad { min-height: 42px; padding: 8px 10px 7px; }
  .compact-ad strong { font-size: 15px; }
  .top-stats article { min-height: 48px; padding: 4px 3px; }
  .early-goal-banner { margin: 4px auto 1px; padding: 7px 10px; line-height: 1.25; font-size: 12px; }
  .simple-zone { gap: 4px; }
  .status-line { min-height: 30px; padding: 6px 11px; font-size: 12px; }
  .progress-shell { height: 8px; }
  .slim-controls { gap: 7px; }
  .slim-controls .primary, .slim-controls .danger { min-height: 40px; padding: 8px 9px; font-size: 13px; }
  .compact-options { margin-top: 0; gap: 6px; }
  .compact-options .toggle { padding: 6px 9px; font-size: 12px; }
}
@media (max-height: 740px) {
  .app {
    --keycap-base-stage-height: clamp(190px, 28dvh, 230px);
    gap: 4px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }
  .topbar { min-height: 38px; }
  #gameMenuBtn { min-height: 42px; }
  .compact-ad { min-height: 38px; padding: 6px 9px; }
  .compact-ad small { font-size: 10px; }
  .top-stats article { min-height: 44px; }
  .early-goal-banner { padding: 6px 8px; font-size: 11px; }
  .status-line { min-height: 28px; padding: 5px 10px; }
  .slim-controls .primary, .slim-controls .danger { min-height: 38px; padding: 7px 8px; }
}
\n\n/* ===== V1-41 native wrapper update notice ===== */\n.native-update-notice {\n  margin: 4px 0 6px; padding: 9px 10px; border-radius: 16px;\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  background: linear-gradient(135deg, rgba(255,231,97,.20), rgba(103,246,255,.16));\n  border: 1px solid rgba(255,235,120,.38); box-shadow: 0 8px 24px rgba(0,0,0,.14);\n}\n.native-update-notice[hidden] { display: none !important; }\n.native-update-copy { min-width: 0; display: grid; gap: 2px; }\n.native-update-copy strong { font-size: 13px; color: #fff2a8; }\n.native-update-copy span { font-size: 10.5px; line-height: 1.35; color: rgba(255,255,255,.78); font-weight: 700; }\n.native-update-actions { display: flex; gap: 5px; flex: 0 0 auto; }\n.native-update-actions button { min-height: 34px; padding: 7px 9px; font-size: 10.5px; white-space: nowrap; }\n@media (max-width: 420px) {\n  .native-update-notice { align-items: stretch; flex-direction: column; }\n  .native-update-actions { display: grid; grid-template-columns: 1fr auto; }\n}\n\n/* ===== V1-41 TWA-safe visible web banner host ===== */\n.ad-card[data-ad-state="web-banner"] { min-height: 50px; padding: 0; overflow: hidden; background: rgba(255,255,255,.04); }\n.ad-card[data-ad-state="web-banner"] .web-banner-host { width: 100%; min-height: 50px; display: block; }\n.ad-wrap[data-web-ad-status="loading"] .ad-placeholder { opacity: .45; }\n

/* ===== V1-43 TEST Google Publisher Tag responsive banner ===== */
.ad-card[data-ad-state="web-banner"] {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  background: rgba(255,255,255,.97);
}
.ad-card[data-ad-state="web-banner"] .gpt-test-banner-host {
  min-width: 300px;
  min-height: 50px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.ad-wrap[data-web-ad-status="rendered"] .ad-progress-marker { opacity: .55; }
@media (max-width: 340px) {
  .ad-card[data-ad-state="web-banner"] .gpt-test-banner-host { min-width: 300px; }
}

/* ===== V1-42 treasure choice restore ===== */
.treasure-grid[data-count="1"] {
  grid-template-columns: minmax(0, 190px);
  justify-content: center;
}
.treasure-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.treasure-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.treasure-box.choice-ready {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, opacity .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: treasureChoiceFloat 1.8s ease-in-out infinite;
}
.treasure-box.choice-ready:nth-child(2) { animation-delay: .12s; }
.treasure-box.choice-ready:nth-child(3) { animation-delay: .24s; }
.treasure-box.choice-ready:active { transform: scale(.95); }
.treasure-box.selected {
  opacity: 1;
  border-color: rgba(255,231,106,.95);
  box-shadow: 0 0 0 2px rgba(255,231,106,.20), 0 12px 34px rgba(255,210,74,.22);
}
.treasure-box.unselected { opacity: .26; transform: scale(.93); }
.treasure-box[disabled] { cursor: default; }
.treasure-box.opening { animation: treasureBoxShake .52s ease both; }
.treasure-box.revealed {
  opacity: 1;
  animation: treasureRewardReveal .42s cubic-bezier(.2,.9,.3,1.25) both;
  background: linear-gradient(150deg, rgba(255,231,106,.32), rgba(255,158,231,.22) 52%, rgba(103,246,255,.24));
}
.treasure-grid[data-count="3"] .treasure-box { min-height: 124px; padding: 9px 5px; gap: 6px; }
.treasure-grid[data-count="3"] .treasure-box strong { font-size: 13px; }
.treasure-box { padding: 12px 8px 10px; gap: 8px; }
.treasure-grid[data-count="3"] .treasure-box { min-height: 124px; padding: 10px 5px 8px; gap: 6px; }
.treasure-grid[data-count="3"] .treasure-box strong { font-size: 13px; }
.treasure-grid[data-count="3"] .treasure-chest-image { width:min(100%, 82px); }
.treasure-box.opening .treasure-chest-image { transform: rotate(-5deg) scale(1.04); }
.treasure-box.revealed .treasure-chest-image { filter: drop-shadow(0 10px 16px rgba(255,229,122,.32)); }
.treasure-reveal-icon { font-size: 38px; line-height: 1; }
@keyframes treasureChoiceFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes treasureBoxShake {
  0% { transform: rotate(0) scale(1); }
  18% { transform: rotate(-4deg) scale(1.03); }
  36% { transform: rotate(4deg) scale(1.04); }
  54% { transform: rotate(-3deg) scale(1.05); }
  72% { transform: rotate(3deg) scale(1.04); }
  100% { transform: rotate(0) scale(1.03); }
}
@keyframes treasureRewardReveal {
  0% { transform: scale(.78); opacity: .35; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 420px) {
  .treasure-grid[data-count="1"] { grid-template-columns: minmax(0, 178px); }
  .treasure-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treasure-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .treasure-grid[data-count="2"] .treasure-box { min-height: 126px; }
  .treasure-grid[data-count="3"] .treasure-chest-image { width:min(100%, 78px); }
}
@media (prefers-reduced-motion: reduce) {
  .treasure-box.choice-ready, .treasure-box.opening, .treasure-box.revealed { animation: none; }
}



/* ===== V1-45 direct treasure choice + themed chest images ===== */
/* Keep V1-43 request, provider, size mapping and fallback behavior unchanged. */
.ad-wrap[data-real-ad="true"] {
  --ad-frame-size: 2px;
  border-radius: 14px;
}
.ad-wrap[data-real-ad="true"]::after {
  inset: -1px;
  opacity: .34;
  filter: blur(4px);
}
.ad-wrap[data-real-ad="true"] .ad-card {
  min-height: 50px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
}
.ad-wrap[data-real-ad="true"][data-web-ad-status="rendered"] {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.ad-wrap[data-real-ad="true"][data-web-ad-status="rendered"] .ad-card {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
}
.ad-wrap[data-real-ad="true"][data-web-ad-status="rendered"] .gpt-test-banner-host {
  width: fit-content !important;
  min-width: 0;
  min-height: 0;
}
.ad-wrap[data-real-ad="true"] .web-banner-host,
.ad-wrap[data-real-ad="true"] .web-banner-host > div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  max-width: 100%;
}
.ad-wrap[data-real-ad="true"] .web-banner-host iframe {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: 100%;
}


/* ===== V1-46 sound calibrator v3: tap/break selector + undo/redo ===== */
.admin-sound-test-actions .sound-kind-btn.active,
.admin-sound-test-actions .sound-kind-btn[aria-pressed="true"] {
  border-color: rgba(124,242,209,.82);
  background: linear-gradient(135deg, rgba(99,231,207,.25), rgba(103,246,255,.12));
  box-shadow: 0 0 0 1px rgba(99,231,207,.16), inset 0 1px 0 rgba(255,255,255,.08);
  color: #dffff8;
}
.admin-sound-history-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.admin-sound-history-actions button:disabled { opacity:.38; cursor:default; }
.admin-sound-value { min-width:92px; }
@media (max-width:390px){ .admin-sound-history-actions{grid-template-columns:1fr 1fr} .admin-sound-value{min-width:82px;font-size:.82rem} }


/* ===== V1-48 sound calibrator v5: final baseline + 300% range + sticky undo/redo ===== */
.admin-sound-calibration-group { position: relative; overflow: visible; }
.admin-sound-history-actions.admin-sound-history-sticky {
  position: sticky;
  top: 8px;
  z-index: 24;
  margin: 6px -3px 10px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,39,105,.96), rgba(43,36,88,.94));
  box-shadow: 0 8px 20px rgba(5,8,30,.24), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.admin-quick-panel .admin-sound-history-actions.admin-sound-history-sticky { top: calc(8px + env(safe-area-inset-top)); }
#adminPanelDialog .admin-sound-history-actions.admin-sound-history-sticky { top: 6px; }
.admin-sound-history-actions.admin-sound-history-sticky button { min-height: 38px; font-weight: 900; }


/* ===== V1-49 admin treasure preview (no reward writes) ===== */
.admin-treasure-count-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-treasure-count-btn.active, .admin-treasure-theme-btn.active {
  background: linear-gradient(135deg, rgba(255,231,97,.30), rgba(103,246,255,.26));
  color:#fff; border-color:rgba(255,255,255,.26); box-shadow:0 0 14px rgba(103,246,255,.15);
}
.admin-treasure-open-btn { width:100%; margin-top:8px; min-height:42px; font-weight:950; }
.admin-treasure-test-dialog-box { width:min(90vw, 430px); text-align:center; }
.admin-treasure-test-badge { display:inline-flex; padding:5px 9px; margin-bottom:6px; border-radius:999px; background:rgba(103,246,255,.12); border:1px solid rgba(103,246,255,.28); color:#aefaff; font-size:11px; font-weight:950; }
#adminTreasureTestGrid { margin:16px 0 12px; }
#adminTreasureTestGrid .treasure-box { min-height:140px; }
#adminTreasureTestGrid[data-count="3"] .treasure-box { min-height:126px; }
#adminTreasureTestGrid .treasure-chest-image { width:min(100%, 108px); }
#adminTreasureTestGrid[data-count="3"] .treasure-chest-image { width:min(100%, 80px); }
#adminTreasureTestCloseBtn { width:100%; margin-top:6px; }


/* ===== V1-54 compact publisher guide + start-card tone restore ===== */
/* Keep publisher information visible for players/crawlers, but present it as a quiet footer guide. */
.publisher-content-card.publisher-content-card-compact {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 18px;
  text-align: left;
  background: rgba(17, 20, 49, .46);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.publisher-content-card-compact .section-kicker { opacity: .78; font-size: 10px; }
.publisher-content-card-compact h2 { margin: 3px 0 5px; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.publisher-content-card-compact .publisher-content-copy > p {
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 11.5px;
  line-height: 1.52;
  font-weight: 650;
}
.publisher-content-topics { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.publisher-content-topics span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.68);
  font-size: 9.5px;
  font-weight: 800;
}
.publisher-content-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-top:9px; }
.publisher-content-links a {
  color: rgba(205,225,255,.76);
  font-size: 10.5px;
  font-weight: 750;
  text-decoration: none;
}
.publisher-content-links .publisher-guide-link {
  color: #e8e2ff;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(151,126,255,.13);
  border: 1px solid rgba(180,162,255,.17);
  font-weight: 900;
}

/* V1-54: remove the mint/green cast from the user-start card and return it to the game's navy-purple family. */
.user-start-card {
  background:
    radial-gradient(circle at 18% 8%, rgba(183,135,255,.14), transparent 36%),
    radial-gradient(circle at 90% 2%, rgba(92,129,255,.10), transparent 34%),
    linear-gradient(150deg, rgba(39,42,86,.96), rgba(26,23,61,.96));
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
}
@media (max-width: 420px) {
  .publisher-content-card.publisher-content-card-compact { padding: 11px 12px; }
  .publisher-content-topics { gap:4px; }
}


/* ===== V1-56 admin keycap size calibrator + direction cycle ===== */
.admin-size-calibration-group{overflow:visible}
.admin-size-calibrator{display:grid;gap:10px;margin-top:10px}
.admin-size-row{padding:10px 11px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.045)}
.admin-size-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.admin-size-row-head strong{font-size:.92rem}
.admin-size-value{min-width:80px;text-align:right;font-weight:900;color:#ffe77a}
.admin-size-slider{width:100%;accent-color:#ffe761}
.admin-size-endpoint-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}
.admin-size-endpoint-actions .ghost{min-height:42px;padding:6px 6px;font-size:.75rem;line-height:1.12}.admin-size-endpoint-actions .size-view-cycle-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-color:rgba(120,188,255,.35);background:rgba(72,123,215,.10)}.admin-size-endpoint-actions .size-view-cycle-btn small{font-size:.68rem;color:#9eeaff;font-weight:900}
.admin-size-endpoint-actions .ghost.active{border-color:rgba(255,231,97,.78);background:rgba(255,231,97,.16);color:#fff7bd}
.admin-size-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.admin-size-history-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}
.admin-size-history-sticky{position:sticky;top:0;z-index:12;padding:7px;border-radius:13px;background:rgba(29,25,72,.94);backdrop-filter:blur(8px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.admin-quick-panel .admin-size-row{padding:9px}
.admin-quick-panel .admin-size-row-head strong{font-size:.84rem}
.admin-quick-panel .admin-size-endpoint-actions .ghost{font-size:.69rem;min-height:40px;padding:5px 4px}.admin-quick-panel .admin-size-endpoint-actions .size-view-cycle-btn small{font-size:.62rem}
#adminPanelDialog .admin-box.size-previewing,.admin-quick-panel.size-previewing{opacity:.20;transition:opacity .12s ease}
#adminPanelDialog.size-previewing::backdrop{background:rgba(4,5,18,.12);backdrop-filter:blur(1px)}
@media (max-width:390px){.admin-size-actions{grid-template-columns:1fr}.admin-size-row{padding:9px 8px}.admin-size-history-actions{grid-template-columns:1fr 1fr}}

@media (max-width:360px){.admin-size-endpoint-actions{gap:5px}.admin-size-endpoint-actions .ghost{font-size:.69rem;padding:5px 3px}.admin-size-endpoint-actions .size-view-cycle-btn small{font-size:.61rem}}


/* V1-70 Google 계정 2기기 연동 / 동시접속 잠금 */
.player-account-box { width:min(92vw,440px); max-height:min(88dvh,760px); overflow:auto; }
.player-account-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.player-account-head h2 { margin-top:4px; }
.player-account-badge { flex:0 0 auto; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:1000; color:#18233b; background:linear-gradient(135deg,#7dfaff,#9dffbe); }
.player-account-badge[data-mode="local"] { color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); }
.player-account-badge[data-mode="blocked"] { color:#fff; background:rgba(255,85,119,.28); border:1px solid rgba(255,85,119,.5); }
.player-account-status { margin:12px 0; padding:12px 14px; border-radius:16px; background:rgba(8,16,48,.42); border:1px solid rgba(255,255,255,.12); font-size:13px; line-height:1.45; font-weight:900; color:#dce8ff; }
.google-player-link { width:100%; min-height:54px; border:0; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#202124; font-size:15px; font-weight:1000; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.google-player-link span:first-child { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#4285f4; font-size:20px; font-weight:1000; }
.google-player-link:disabled { opacity:.45; filter:grayscale(.4); }
.player-account-linked { margin-top:14px; padding:14px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.player-account-email { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.1); }
.player-account-email span { color:rgba(255,255,255,.64); font-size:12px; font-weight:900; }
.player-account-email strong { max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-device-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin:14px 0 8px; }
.player-device-head span { font-size:12px; color:#9fdcff; font-weight:1000; }
.player-device-list { display:grid; gap:8px; }
.player-device-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px 11px; border-radius:15px; background:rgba(9,15,44,.52); border:1px solid rgba(255,255,255,.1); }
.player-device-row.current { border-color:rgba(105,239,255,.55); box-shadow:inset 0 0 0 1px rgba(105,239,255,.1); }
.player-device-main { min-width:0; }
.player-device-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-device-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.player-device-chip { padding:3px 7px; border-radius:999px; font-size:10px; font-weight:1000; background:rgba(255,255,255,.1); color:#cbd7ee; }
.player-device-chip.current { color:#15223e; background:#78efff; }
.player-device-chip.offline { color:#2b2500; background:#ffe66e; }
.player-device-remove { min-height:34px; padding:7px 10px; border-radius:11px; border:1px solid rgba(255,111,139,.42); background:rgba(255,80,117,.12); color:#ffdce5; font-size:11px; font-weight:1000; }
.player-account-note { margin-bottom:0; }
.player-session-box { width:min(88vw,390px); text-align:center; }
.player-session-icon { font-size:44px; margin-bottom:6px; }
.player-session-box h2 { line-height:1.25; }
.player-session-box p { line-height:1.55; }
@media (max-width:390px) { .player-account-box { padding:16px; } .player-device-row { grid-template-columns:1fr; } .player-device-remove { width:100%; } }


/* ===== V1-70 admin top game-view shortcut ===== */
#adminPanelDialog .admin-panel-sticky-head {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -20px -20px 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(160deg, rgba(35,35,74,.98), rgba(56,33,91,.98));
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 20px rgba(4,5,18,.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#adminPanelDialog .admin-panel-sticky-head h2 { margin: 0; }
#adminPanelDialog .admin-game-view-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 950;
  white-space: nowrap;
}


/* ===== V1-70 performance / thermal diagnostics ===== */
.admin-performance-zone .admin-perf-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-perf-summary {
  margin: 10px 0 8px;
  max-height: 330px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(8,10,28,.62);
  padding: 12px;
  color: #eef1ff;
  font-size: 12px;
  line-height: 1.52;
}
.admin-performance-zone .primary[disabled],
.admin-performance-zone .ghost[disabled] { opacity: .45; }


/* ===== V1-70 관리자 빠른패널 독립 스크롤 ===== */
body.admin-scroll-mode .admin-quick-panel {
  max-height: var(--kb-admin-quick-max-height, 68dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  scrollbar-width: thin;
  position: relative !important;
  contain: layout paint;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
body.admin-scroll-mode .admin-quick-panel .admin-section-list {
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}
body.admin-scroll-mode .admin-quick-panel .admin-group,
body.admin-scroll-mode .admin-quick-panel .admin-mini-grid {
  max-height: none !important;
  overflow: visible !important;
}
body.admin-scroll-mode .admin-quick-panel .admin-quick-head {
  position: sticky;
  top: 0;
  z-index: 120;
  margin: -10px -10px 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 9px;
  background: linear-gradient(160deg, rgba(31,34,76,.98), rgba(54,35,88,.98));
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
body.admin-scroll-mode .admin-quick-panel::-webkit-scrollbar { width: 5px; }
body.admin-scroll-mode .admin-quick-panel::-webkit-scrollbar-thumb {
  background: rgba(145,235,255,.38);
  border-radius: 999px;
}


/* ===== V1-70 관리자 빠른패널: 큰 고정 바텀시트 ===== */
body.admin-scroll-mode .admin-quick-panel {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: auto !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  height: var(--kb-admin-quick-max-height, 82dvh) !important;
  max-height: var(--kb-admin-quick-max-height, 82dvh) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  z-index: 9000 !important;
  border-radius: 24px 24px 18px 18px !important;
  background: linear-gradient(170deg, rgba(30,28,74,.985), rgba(35,20,70,.985)) !important;
  box-shadow: 0 -10px 42px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  contain: layout paint;
}
body.admin-scroll-mode .admin-quick-panel.is-collapsed {
  height: var(--kb-admin-quick-max-height, 38dvh) !important;
  max-height: var(--kb-admin-quick-max-height, 38dvh) !important;
}
body.admin-scroll-mode .admin-quick-panel .admin-quick-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 140 !important;
  margin: -10px -10px 10px !important;
  padding: calc(11px + env(safe-area-inset-top, 0px)) 12px 10px !important;
  background: linear-gradient(160deg, rgba(31,34,76,.995), rgba(54,35,88,.995)) !important;
}
.admin-quick-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}


/* V1-70: 게임 소유 성능 HUD는 관리자 모드 외 절대 노출 금지.
   휴대폰 OS/Game Plugins/GPU Watch의 시스템 overlay에는 영향을 주지 않습니다. */
html:not(.admin-scroll-mode) [data-kb-performance-hud],
html:not(.admin-scroll-mode) .kb-performance-hud,
html:not(.admin-scroll-mode) #kbPerformanceHud,
body:not(.admin-scroll-mode) [data-kb-performance-hud],
body:not(.admin-scroll-mode) .kb-performance-hud,
body:not(.admin-scroll-mode) #kbPerformanceHud {
  display: none !important;
  visibility: hidden !important;
}


/* ===== V1-72 centralized native AdMob diagnostics ===== */
.admin-ad-central-box{margin-top:10px;display:grid;gap:8px}.admin-ad-central-actions{grid-template-columns:1fr 1fr}.admin-ad-central-list{margin:0;max-height:230px;overflow:auto;white-space:pre-wrap;word-break:break-word;border-radius:12px;padding:12px;background:rgba(10,13,31,.72);font-size:12px;line-height:1.45}

/* V1-72 친구초대 이벤트 + 모바일 광고 중앙진단 */
.referral-event-open-btn { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; border-color:rgba(255,215,80,.48); background:linear-gradient(135deg,rgba(255,197,61,.20),rgba(255,93,163,.16)); }
.referral-event-open-btn > span { font-size:22px; }
.referral-event-open-btn strong { font-size:14px; }
.referral-event-open-btn small { width:100%; color:var(--muted); font-size:11px; }
.referral-event-box { width:min(96vw,620px); max-height:calc(var(--kb-viewport-height,100dvh) - 22px); overflow:auto; padding:10px 10px 18px; position:relative; }
.referral-event-art { display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 12px 34px rgba(0,0,0,.28); }
.referral-event-x { position:sticky; top:4px; float:right; z-index:4; width:40px; height:40px; margin:4px 4px -44px 0; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(18,18,40,.82); color:#fff; font-size:28px; line-height:1; font-weight:900; }
.referral-event-live { margin-top:10px; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(18,20,46,.82); }
.referral-event-status, .referral-ranking-summary { padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.08); font-weight:800; line-height:1.45; overflow-wrap:anywhere; }
.referral-invite-candidate, .referral-own-progress { margin-top:10px; padding:12px; border-radius:14px; background:rgba(93,226,188,.10); border:1px solid rgba(93,226,188,.25); }
.referral-invite-candidate strong { display:block; font-size:16px; margin-bottom:4px; }
.referral-invite-candidate p { margin:4px 0 10px; color:var(--muted); font-size:12px; line-height:1.45; }
.referral-my-invite { margin-top:10px; }
.referral-event-live > .wide + .wide, .referral-event-close { margin-top:8px; }
.referral-ranking-panel { min-height:220px; }
.referral-friend-list { display:grid; gap:9px; margin-top:10px; }
.referral-friend-card { padding:11px; border-radius:16px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.10); }
.referral-friend-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.referral-friend-head strong { font-size:14px; }
.referral-friend-head span { font-size:11px; font-weight:900; color:#ffe472; white-space:nowrap; }
.referral-friend-stats { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.5; }
.referral-progress-track { height:8px; margin-top:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.referral-progress-track > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#50d9ff,#70f0bd); }
.referral-progress-copy { display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:11px; font-weight:800; }
.referral-reward-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.referral-reward-actions button { flex:1 1 120px; min-height:36px; padding:7px 8px; border-radius:11px; font-size:11px; font-weight:900; }
.referral-reward-actions .done { opacity:.62; }
.referral-top5-note { margin-top:7px; padding:7px 9px; border-radius:11px; background:rgba(255,211,70,.10); color:#ffe78b; font-size:11px; font-weight:800; }
.ranking-tabs:has(.referral-ranking-tab:not([hidden])) { grid-template-columns:repeat(4,1fr); }
.admin-ad-central-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.admin-ad-central-list { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.admin-live-banner-group, .admin-ad-central-box, .admin-default-box { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
@media (max-width:520px) {
  .admin-ad-central-actions { grid-template-columns:1fr !important; }
  .admin-ad-central-actions .ghost { width:100%; min-width:0; }
  .referral-event-box { width:calc(100vw - 14px); max-height:calc(var(--kb-viewport-height,100dvh) - 10px); border-radius:20px; }
  .referral-event-live { padding:10px; }
  .ranking-tabs:has(.referral-ranking-tab:not([hidden])) .ranking-tab { padding-left:5px; padding-right:5px; font-size:11px; }
}


/* ===== V1-74 friend auto-link + first-use tutorial coordinate fix ===== */
.reward-roadmap-tutorial-hint { display:none; align-items:center; justify-content:center; gap:8px; margin-top:8px; padding:9px 12px; border-radius:13px; background:linear-gradient(135deg,rgba(255,229,83,.22),rgba(85,231,255,.15)); border:1px solid rgba(255,229,83,.46); color:#fff6a7; font-size:13px; font-weight:950; text-align:center; }
.reward-roadmap-tutorial-hint > span { font-size:25px; animation:tutorialFingerTap .72s ease-in-out infinite alternate; }
.reward-roadmap-dialog.reward-roadmap-tutorial-active .reward-roadmap-tutorial-hint { display:flex !important; }
.reward-roadmap-dialog.reward-roadmap-tutorial-active #rewardRoadmapCloseBtn { position:relative; z-index:2; width:min(100%,320px); min-height:52px; box-shadow:0 0 0 5px #ffd52d,0 0 0 10px rgba(255,213,45,.22),0 12px 30px rgba(0,0,0,.32) !important; animation:tutorialPulse .75s ease-in-out infinite alternate; }
.reward-roadmap-dialog.reward-roadmap-tutorial-active .reward-roadmap-close-x { display:none !important; }
.feature-tutorial:not([hidden]) { touch-action:none; }
.feature-tutorial:not([hidden]) + * { }
.referral-invite-candidate:empty { display:none; }
@media (max-width:520px) {
  .reward-roadmap-box { max-height:calc(var(--kb-viewport-height,100dvh) - 12px); }
  .reward-roadmap-dialog.reward-roadmap-tutorial-active #rewardRoadmapCloseBtn { width:100%; }
}

/* ===== historical TEST-only fresh referral tester compatibility ===== */
.referral-test-tools { margin-top:10px; padding:10px; border-radius:14px; border:1px dashed rgba(255,204,92,.38); background:rgba(255,183,63,.07); }
.referral-test-tools .hint-text { margin:7px 2px 0; font-size:10px; line-height:1.45; }
.referral-test-tools button.wide { width:100%; }

/* ===== V1-77 TEST fresh-invite link ===== */
.referral-test-tools-title{display:block;margin:0 2px 8px;font-size:12px;font-weight:900;color:#ffe28a;}


/* ===== V1-77 discoverability: keycap size / viewing direction ===== */
.settings-discovery-note{display:flex;flex-direction:column;gap:4px;margin:10px 0 12px;padding:10px 12px;border-radius:12px;background:rgba(255,212,64,.14);border:1px solid rgba(255,212,64,.42);font-size:.88rem;line-height:1.45}.settings-discovery-note strong{font-weight:800}.settings-discovery-note span{opacity:.92}


/* ===== V1-79 admin ad diagnostic copy feedback ===== */
.toast[popover] { margin:0; inset:auto auto calc(22px + env(safe-area-inset-bottom)) 50%; transform:translateX(-50%); }
.admin-ad-copy-feedback {
  margin-top:2px; padding:9px 11px; border-radius:11px;
  border:1px solid rgba(125,229,255,.30); background:rgba(28,48,82,.78);
  color:#e8f8ff; font-size:12px; line-height:1.45; font-weight:900;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
}
.admin-ad-copy-feedback[data-state="success"] { border-color:rgba(117,255,191,.42); background:rgba(25,91,69,.48); }
.admin-ad-copy-feedback[data-state="warning"] { border-color:rgba(255,215,103,.48); background:rgba(96,70,18,.48); }
.admin-ad-copy-feedback[data-state="error"] { border-color:rgba(255,117,147,.50); background:rgba(105,27,53,.50); }

/* ===== V1-81 previous-month finalized ranking ===== */
.previous-reward-status { margin-top:6px !important; padding:8px 10px; border-radius:11px; background:rgba(255,213,45,.10); color:#ffe991; font-weight:900; }
@media (max-width:520px) {
  .ranking-tabs .ranking-tab { padding-left:5px; padding-right:5px; font-size:11px; }
  .ranking-tabs:has(.referral-ranking-tab:not([hidden])) { gap:4px; }
  .ranking-tabs:has(.referral-ranking-tab:not([hidden])) .ranking-tab { font-size:10px; }
}


/* V1-84 Halloween seasonal event */
.halloween-event-open-btn,.speed-challenge-open-btn{border:1px solid rgba(255,146,55,.48)!important;background:linear-gradient(135deg,rgba(88,30,119,.82),rgba(39,22,72,.9))!important;box-shadow:0 0 0 1px rgba(255,126,39,.08) inset,0 10px 28px rgba(57,17,86,.24)}
.halloween-event-open-btn strong,.speed-challenge-open-btn strong{color:#ffe07b}.halloween-event-open-btn>span,.speed-challenge-open-btn>span{font-size:1.55rem}
.halloween-event-box{max-width:720px;position:relative;background:linear-gradient(180deg,#1d1235,#111626 72%);border:1px solid rgba(255,139,44,.35)}
.halloween-event-x,.halloween-art-x{position:sticky;top:6px;float:right;z-index:8;width:42px;height:42px;margin:2px 2px -44px 0;border:1px solid rgba(255,193,118,.55);border-radius:999px;background:rgba(18,12,35,.92);color:#fff;font-size:30px;line-height:1;font-weight:1000;box-shadow:0 8px 24px rgba(0,0,0,.34)}
.halloween-event-art-open{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:zoom-in}
.halloween-event-art{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:18px;border:1px solid rgba(255,164,76,.32);margin-bottom:12px}
.halloween-event-art-open>span{position:absolute;right:10px;bottom:22px;padding:7px 10px;border-radius:999px;background:rgba(12,9,25,.82);border:1px solid rgba(255,255,255,.2);font-size:.76rem;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.halloween-art-dialog{padding:0;border:0;background:transparent}
.halloween-art-box{width:min(96vw,900px);max-width:900px;height:min(92dvh,900px);display:flex;flex-direction:column;position:relative;padding:14px;background:linear-gradient(180deg,#1b1131,#0e1020);border:1px solid rgba(255,154,65,.45)}
.halloween-art-toolbar{display:flex;justify-content:center;gap:8px;padding:4px 50px 10px}.halloween-art-toolbar button{min-width:58px}
.halloween-art-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:14px;background:#090b14;border:1px solid rgba(255,255,255,.12);touch-action:none;-webkit-overflow-scrolling:touch}
.halloween-art-viewport img{display:block;height:auto;max-width:none;margin:0 auto;transition:width .12s ease}
.halloween-event-summary{padding:12px 14px;border-radius:14px;background:rgba(255,127,36,.11);color:#ffe7b1;font-weight:800;margin-bottom:12px}
.halloween-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.halloween-collection-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;padding:4px 2px;color:#f4eaff}.halloween-collection-head span{font-size:.78rem;color:#bcb2d7}
.halloween-item-card{display:grid;place-items:center;text-align:center;gap:4px;min-height:98px;padding:9px 5px;border-radius:14px;background:#171429;border:1px solid rgba(170,116,255,.22);opacity:.7}.halloween-item-card.owned{opacity:1;border-color:rgba(255,157,47,.7);box-shadow:0 0 18px rgba(255,123,32,.14)}.halloween-item-card b{font-size:1.7rem}.halloween-item-card span{font-size:.78rem;font-weight:800}.halloween-item-card em{font-size:.68rem;color:#9b91b7;font-style:normal}.halloween-item-card.owned em{color:#ffd46d}
.halloween-week-card{margin:12px 0;padding:12px;border-radius:16px;background:rgba(37,25,66,.78);border:1px solid rgba(151,91,236,.25)}.halloween-week-card>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:end;margin-bottom:9px}.halloween-week-card small{color:#9e95b7}.halloween-speed-list{display:grid;gap:6px}.halloween-speed-row{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.045)}.halloween-speed-row.mine{outline:1px solid #ffb347;background:rgba(255,148,45,.09)}.halloween-speed-row span{display:flex;gap:8px;align-items:center}.halloween-speed-player{min-width:0}.halloween-speed-name{display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f8f3ff;font-weight:850}.halloween-speed-player em{flex:0 0 auto;padding:2px 6px;border-radius:999px;background:rgba(255,179,71,.18);color:#ffd889;font-size:.62rem;font-style:normal;font-weight:900}.halloween-speed-row strong,.halloween-speed-time{color:#ffe279;white-space:nowrap}.halloween-speed-empty{padding:9px 4px;color:#bdb4d1;text-align:center}
.speed-challenge-box{max-width:520px;text-align:center;background:radial-gradient(circle at 50% 0,#3b1559,#121522 60%);border:1px solid rgba(255,128,34,.42)}.speed-challenge-rule{color:#c9bfd9}.speed-challenge-time{font-size:2.15rem;font-weight:1000;color:#ffe566;margin:8px 0}.speed-challenge-progress{font-size:1.05rem;font-weight:900;color:#ffb56d;letter-spacing:.08em}.speed-tap-target{width:min(76vw,330px);aspect-ratio:1;border:0;background:transparent;margin:4px auto;display:grid;place-items:center;position:relative;touch-action:none;-webkit-tap-highlight-color:transparent}.speed-tap-target img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(255,105,20,.28));transition:filter .1s ease}.speed-tap-target.hit img{transform:none;filter:brightness(.90) saturate(.94) drop-shadow(0 12px 30px rgba(69,18,98,.30))}.speed-tap-target.release img{animation:halloweenPumpkinReleaseV186 .15s ease-out}@keyframes halloweenPumpkinReleaseV186{0%{filter:brightness(.92) saturate(.95) drop-shadow(0 12px 30px rgba(69,18,98,.28))}100%{filter:drop-shadow(0 16px 28px rgba(255,105,20,.28))}}.speed-tap-target:disabled{opacity:.62}.speed-tap-target span{position:absolute;bottom:13%;padding:6px 10px;border-radius:999px;background:rgba(17,12,31,.76);font-weight:900;color:#fff0bd}.speed-challenge-status{min-height:44px;color:#d8d0e3;margin:8px 0}
.halloween-chest-box{max-width:520px;text-align:center;background:radial-gradient(circle at 50% 0,#4b1b5f,#151426 68%);border:1px solid rgba(255,149,34,.5)}.halloween-chest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.halloween-chest-choice{min-height:150px;border-radius:18px;border:1px solid rgba(255,171,51,.48);background:linear-gradient(180deg,#632f79,#2b193e);font-size:3rem;box-shadow:0 10px 28px rgba(0,0,0,.25);color:#fff}.halloween-chest-choice span{display:block;font-size:.78rem;font-weight:900;margin-top:7px}.halloween-chest-choice.opened{background:radial-gradient(circle,#ffb126,#6b245f);transform:scale(1.03)}
@media(max-width:540px){.halloween-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.halloween-event-art{max-height:none}.halloween-week-card>div:first-child{display:block}.halloween-chest-choice{min-height:122px;font-size:2.35rem}.halloween-art-box{width:98vw;height:94dvh;padding:10px}.halloween-art-viewport img{min-width:100%}}

/* V1-84 Halloween pumpkin: image state + render-layer compression make pressed/released states immediately distinct. */
.keycap[data-skin="halloween_pumpkin"] .keycap-render{transition:filter .1s ease!important}
.keycap[data-skin="halloween_pumpkin"].pressed .keycap-render{transform:translate3d(var(--keycap-render-x),var(--keycap-render-y),0) scale(var(--keycap-render-scale))!important;filter:brightness(.90) saturate(.94) drop-shadow(0 13px 23px rgba(70,20,92,.24))!important}


/* ===== V1-86 seasonal admin/menu + speed challenge fixes ===== */
.referral-event-open-btn[hidden], #referralEventBtn[hidden] { display:none !important; }
.halloween-admin-item { border-color:rgba(255,151,55,.48) !important; background:linear-gradient(135deg,rgba(106,45,135,.24),rgba(255,118,39,.10)) !important; }
.halloween-admin-item.active { border-color:rgba(255,205,94,.9) !important; box-shadow:0 0 0 1px rgba(255,181,66,.25) inset,0 6px 18px rgba(75,28,97,.22); }
/* ===== V1-90 speed result + initial max-size layout/pinch polish ===== */
.speed-challenge-result{margin:10px 0 4px;padding:11px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,190,91,.22);text-align:left}
.speed-challenge-result>strong{display:block;color:#ffe279;font-size:1.02rem;margin-bottom:3px}
.speed-challenge-result>small{display:block;color:#bfb5d2;margin-bottom:8px}
.speed-challenge-leaderboard{max-height:250px;overflow:auto;overscroll-behavior:contain}
.speed-challenge-leaderboard .halloween-speed-row{padding:7px 9px}



/* ===== V1-90 Halloween menu hierarchy ===== */
.halloween-main-block{display:grid;gap:8px;padding:0}
.halloween-main-block[hidden]{display:none!important}
.halloween-main-block .halloween-event-open-btn{width:100%}
.halloween-main-collection{padding:9px;border-radius:16px;background:rgba(22,15,38,.58);border:1px solid rgba(255,153,58,.2);grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.halloween-main-collection .halloween-collection-head{padding:1px 2px 4px}
.halloween-main-collection .halloween-item-card{min-height:68px;padding:6px 3px;border-radius:11px}
.halloween-main-collection .halloween-item-card b{font-size:1.25rem}
.halloween-main-collection .halloween-item-card span{font-size:.67rem;line-height:1.18}
.halloween-main-collection .halloween-item-card em{font-size:.61rem}
.halloween-event-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.halloween-submenu-btn{min-height:88px;padding:10px 7px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.halloween-submenu-btn>span{font-size:1.55rem}.halloween-submenu-btn>strong{font-size:.88rem}.halloween-submenu-btn>small{font-size:.66rem;line-height:1.25;color:#bdb4d1}
.halloween-ranking-box,.halloween-friend-battle-box{width:min(96vw,640px);max-width:640px;text-align:center;padding:6px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.halloween-friend-battle-box>h2,.halloween-friend-battle-x,.friend-battle-status{display:none!important}
.friend-battle-stage{display:block}
.friend-battle-arena{position:relative;display:grid;grid-template-rows:minmax(184px,1fr) auto minmax(184px,1fr);gap:8px;min-height:min(82dvh,760px);max-height:84dvh;padding:10px 12px;border-radius:28px;background:radial-gradient(circle at 50% 46%,rgba(118,54,166,.24),rgba(13,14,24,.98) 64%);border:1px solid rgba(255,154,65,.30);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 16px 42px rgba(0,0,0,.32)}
.friend-battle-exit{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:11;border:0;border-radius:16px;padding:11px 10px;min-width:40px;min-height:124px;background:rgba(9,8,23,.86);border:1px solid rgba(255,150,97,.34);color:#fff0c8;font-size:.92rem;font-weight:1000;letter-spacing:-.02em;writing-mode:vertical-rl;text-orientation:mixed;box-shadow:0 10px 20px rgba(0,0,0,.22)}
.friend-battle-player{display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:18px;transition:background .18s ease, box-shadow .18s ease, transform .18s ease}
.friend-battle-player-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)}
.friend-battle-player-label{font-size:.9rem;color:#ffe4a8;letter-spacing:.01em;font-weight:1000;line-height:1.1}
.friend-battle-progress{font-size:.82rem;font-weight:1000;color:#f6eeff;white-space:nowrap;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.24)}
.friend-battle-keycap{width:min(43vw,220px);height:min(43vw,220px);max-width:220px;max-height:220px;min-width:128px;min-height:128px;padding:0;border:0;background:transparent;display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.friend-battle-keycap img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 14px 28px rgba(255,108,25,.22));transition:filter .14s ease, transform .14s ease, opacity .14s ease}
.friend-battle-keycap.hit img{filter:brightness(.92) saturate(.95) drop-shadow(0 10px 20px rgba(79,29,104,.28));transform:scale(.965)}
.friend-battle-keycap:disabled{opacity:.74}
.friend-battle-scoreboard{position:relative;z-index:9;display:grid;grid-template-columns:72px auto 72px;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:2px 8px;border-radius:22px;background:rgba(12,10,24,.78);box-shadow:0 6px 20px rgba(0,0,0,.22);margin:0 34px}
.friend-battle-scoreboard>strong{font-size:2rem;line-height:1;color:#ff795e;text-shadow:0 3px 16px rgba(255,94,52,.2)}
.friend-battle-score{display:grid;place-items:center;min-width:64px;min-height:50px;padding:3px 8px;border-radius:15px;background:rgba(255,255,255,.06);border:2px solid rgba(255,116,80,.72);font-size:1.74rem;line-height:1;font-weight:1000;color:#fff0c3}
.friend-battle-score-top{transform:rotate(180deg)}
.friend-battle-countdown{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;min-width:124px;min-height:124px;padding:14px 16px;border-radius:999px;place-items:center;background:radial-gradient(circle at 35% 35%,rgba(255,214,115,.98),rgba(255,138,37,.96));border:4px solid rgba(255,255,255,.82);box-shadow:0 20px 46px rgba(0,0,0,.42);color:#3a1400;font-size:clamp(2.6rem,14vw,4.3rem);font-weight:1000;letter-spacing:-.03em;text-shadow:0 2px 0 rgba(255,255,255,.32)}
.friend-battle-countdown.is-visible{display:grid}
.friend-battle-countdown[hidden]{display:none!important}
.friend-battle-outcome{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;padding:.14em .36em;border-radius:999px;font-size:clamp(2rem,8vw,3.2rem);font-weight:1000;line-height:1;letter-spacing:-.04em;pointer-events:none;text-shadow:0 8px 18px rgba(0,0,0,.38)}
.friend-battle-ready-actions{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:11;display:flex;justify-content:center;width:min(calc(100% - 120px),280px)}
.friend-battle-ready-actions[hidden]{display:none!important}
.friend-battle-ready-actions .primary{width:100%;min-height:44px;padding:9px 16px}
.friend-battle-player.winner{background:linear-gradient(180deg,rgba(255,206,72,.12),rgba(255,255,255,0))}
.friend-battle-player.winner .friend-battle-keycap img{filter:saturate(1.12) brightness(1.06) drop-shadow(0 0 24px rgba(255,218,104,.42));transform:scale(1.03)}
.friend-battle-player.winner .friend-battle-outcome{background:rgba(255,208,70,.2);border:2px solid rgba(255,236,170,.7);color:#fff3b7}
.friend-battle-player.loser{background:linear-gradient(180deg,rgba(120,120,120,.1),rgba(255,255,255,0))}
.friend-battle-player.loser .friend-battle-keycap img{filter:grayscale(1) brightness(.72) contrast(.92) drop-shadow(0 0 18px rgba(80,80,90,.26));opacity:.92}
.friend-battle-player.loser .friend-battle-outcome{background:rgba(132,132,132,.18);border:2px solid rgba(213,213,213,.32);color:#d6d6d6}
.friend-battle-firework{position:absolute;width:14px;height:14px;border-radius:999px;background:radial-gradient(circle,#fff7d7 0%,#ffd66b 40%,#ff7a3d 72%,rgba(255,122,61,0) 100%);box-shadow:0 0 18px rgba(255,194,89,.44);animation:friendBattleFireworkBurstV192 .92s ease-out forwards;animation-delay:var(--delay,0ms);pointer-events:none;z-index:4}
.friend-battle-guide-dialog{padding:18px;background:rgba(4,3,14,.44)}
.friend-battle-guide-box{position:relative;width:min(92vw,430px);border-radius:24px;background:linear-gradient(160deg,#23234a,#38215b);padding:20px 18px 18px;box-shadow:0 24px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16)}
.friend-battle-guide-box h2{margin:0 0 10px;font-size:1.14rem;color:#fff3d8}
.friend-battle-guide-x{top:10px;right:10px}
.friend-battle-guide-list{margin:0 0 14px;padding-left:1.15rem;display:grid;gap:7px;color:#f4edf9;font-size:.92rem;line-height:1.45;text-align:left}
.friend-battle-guide-list li::marker{color:#ffb252}
@media(max-width:540px){.halloween-main-collection{grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;gap:5px}.halloween-main-collection .halloween-item-card{min-height:62px}.halloween-main-collection .halloween-item-card span{font-size:.61rem}.halloween-event-actions{grid-template-columns:1fr}.halloween-submenu-btn{min-height:64px;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;text-align:left;justify-items:start}.halloween-submenu-btn>span{grid-row:1/3;font-size:1.45rem;align-self:center}.halloween-submenu-btn>strong{font-size:.92rem}.halloween-submenu-btn>small{font-size:.68rem}}

/* ===== V1-93 speed fair-play parity + one-phone friend battle ===== */
.halloween-ranking-box>h2,
.halloween-friend-battle-box>h2,
.speed-challenge-box>h2{padding-left:54px;padding-right:54px;text-align:center}
.halloween-ranking-x,
.halloween-friend-battle-x,
.speed-challenge-x{position:absolute;top:12px;right:12px;z-index:12;width:42px;height:42px;margin:0;border:1px solid rgba(255,193,118,.55);border-radius:999px;background:rgba(18,12,35,.94);color:#fff;font-size:30px;line-height:1;font-weight:1000;box-shadow:0 8px 24px rgba(0,0,0,.34)}
.speed-challenge-box{position:relative}

.halloween-friend-battle-box{width:min(96vw,620px);max-width:620px;text-align:center;padding-bottom:14px}
.friend-battle-rule{margin:4px auto 10px!important;max-width:520px;font-size:.84rem!important;line-height:1.45!important;color:#d9cce9!important;font-weight:800!important}
.friend-battle-arena{display:grid;grid-template-rows:minmax(148px,1fr) auto minmax(148px,1fr);gap:5px;min-height:min(62dvh,570px);max-height:68dvh;padding:8px;border-radius:20px;background:radial-gradient(circle at 50% 50%,rgba(103,38,130,.22),rgba(10,12,22,.94) 62%);border:1px solid rgba(255,154,65,.28);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.friend-battle-player{display:grid;place-items:center;min-height:0;overflow:hidden}
.friend-battle-player-inner{display:grid;place-items:center;gap:3px;width:100%;height:100%}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)}
.friend-battle-player-label{font-size:.76rem;color:#ffe4a8;letter-spacing:.03em}
.friend-battle-keycap{width:min(31vw,170px);height:min(31vw,170px);max-width:170px;max-height:170px;min-width:112px;min-height:112px;padding:0;border:0;background:transparent;display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.friend-battle-keycap img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(255,108,25,.25));transition:filter .08s ease}
.friend-battle-keycap.hit img{filter:brightness(.9) saturate(.94) drop-shadow(0 8px 18px rgba(79,29,104,.28))}
.friend-battle-keycap:disabled{opacity:.6}
.friend-battle-progress{font-size:.73rem;font-weight:900;color:#f5eaff;white-space:nowrap}
.friend-battle-scoreboard{display:grid;grid-template-columns:68px auto 68px;align-items:center;justify-content:center;gap:13px;min-height:58px}
.friend-battle-scoreboard>strong{font-size:1.75rem;line-height:1;color:#ff795e;text-shadow:0 3px 16px rgba(255,94,52,.2)}
.friend-battle-score{display:grid;place-items:center;min-width:62px;min-height:52px;padding:4px 10px;border-radius:13px;background:rgba(255,255,255,.055);border:2px solid rgba(255,116,80,.72);font-size:1.65rem;line-height:1;font-weight:1000;color:#fff0c3}
.friend-battle-score-top{transform:rotate(180deg)}
.friend-battle-status{min-height:42px;display:grid;place-items:center;padding:8px 10px;margin:8px 0 3px;border-radius:12px;background:rgba(255,154,55,.09);border:1px solid rgba(255,190,91,.16);color:#ffe5aa;font-weight:900;font-size:.86rem}

@media(max-width:540px){
  .halloween-ranking-box>h2,.halloween-friend-battle-box>h2,.speed-challenge-box>h2{padding-left:48px;padding-right:48px;font-size:1.12rem}
  .halloween-ranking-x,.halloween-friend-battle-x,.speed-challenge-x{top:9px;right:9px;width:38px;height:38px;font-size:27px}
  .friend-battle-arena{min-height:min(60dvh,510px);max-height:64dvh;padding:6px;grid-template-rows:minmax(132px,1fr) auto minmax(132px,1fr)}
  .friend-battle-keycap{width:min(34vw,150px);height:min(34vw,150px);min-width:100px;min-height:100px}
  .friend-battle-scoreboard{grid-template-columns:58px auto 58px;gap:10px;min-height:52px}
  .friend-battle-score{min-width:54px;min-height:46px;font-size:1.45rem}
  .friend-battle-scoreboard>strong{font-size:1.5rem}
  .friend-battle-rule{font-size:.76rem!important;margin-top:0!important}
  .friend-battle-progress{font-size:.68rem}
}
@media(max-height:720px){
  .friend-battle-arena{min-height:440px;max-height:58dvh;grid-template-rows:minmax(112px,1fr) auto minmax(112px,1fr)}
  .friend-battle-keycap{width:min(27vw,128px);height:min(27vw,128px);min-width:92px;min-height:92px}
  .friend-battle-player-label{font-size:.68rem}.friend-battle-progress{font-size:.64rem}
}

/* ===== V1-95 friend battle compact arena / score-first / countdown visibility ===== */
.halloween-ranking-box,
.halloween-friend-battle-box,
.speed-challenge-box{position:relative;padding-top:62px}
.halloween-ranking-box>h2,
.halloween-friend-battle-box>h2,
.speed-challenge-box>h2{padding-left:56px;padding-right:56px;margin-top:0}
.halloween-ranking-x,
.halloween-friend-battle-x,
.speed-challenge-x{top:calc(env(safe-area-inset-top, 0px) + 14px);right:calc(env(safe-area-inset-right, 0px) + 14px)}

.halloween-friend-battle-box{width:min(96vw,640px);max-width:640px;text-align:center;padding-top:50px!important;padding-bottom:10px}
.halloween-friend-battle-box>h2{margin:0 0 8px!important;font-size:1.22rem}
.friend-battle-stage{display:grid;gap:7px}
.friend-battle-intro[hidden],.friend-battle-live[hidden]{display:none !important}
.friend-battle-intro{position:absolute;inset:0;z-index:7;display:block;padding:0;background:rgba(8,7,18,.16);pointer-events:none}
.friend-battle-intro-card{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:min(calc(100% - 24px),420px);padding:11px 14px 10px;border-radius:16px;background:linear-gradient(180deg,rgba(32,22,56,.94),rgba(17,11,32,.94));border:1px solid rgba(255,164,78,.28);box-shadow:0 10px 26px rgba(0,0,0,.30);text-align:left;backdrop-filter:blur(2px);pointer-events:auto}
.friend-battle-intro-card>strong{display:block;margin-bottom:6px;font-size:.92rem;color:#ffe9a8}
.friend-battle-intro-list{margin:0;padding-left:1.05rem;display:grid;gap:3px;color:#f4edf9;font-size:.78rem;line-height:1.34}
.friend-battle-intro-list li::marker{color:#ffb252}
.friend-battle-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.friend-battle-arena{position:relative;display:grid;grid-template-rows:minmax(176px,1fr) auto minmax(176px,1fr);gap:3px;min-height:min(73dvh,660px);max-height:76dvh;padding:8px 10px;border-radius:22px;background:radial-gradient(circle at 50% 46%,rgba(118,54,166,.24),rgba(13,14,24,.98) 64%);border:1px solid rgba(255,154,65,.28);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.friend-battle-player{display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:18px;transition:background .18s ease, box-shadow .18s ease, transform .18s ease}
.friend-battle-player-inner{position:relative;display:grid;place-items:center;gap:5px;width:100%;height:100%}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)}
.friend-battle-player-label{font-size:.75rem;color:#ffe4a8;letter-spacing:.03em}
.friend-battle-keycap{width:min(40vw,210px);height:min(40vw,210px);max-width:210px;max-height:210px;min-width:124px;min-height:124px;padding:0;border:0;background:transparent;display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.friend-battle-keycap img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 14px 28px rgba(255,108,25,.22));transition:filter .14s ease, transform .14s ease, opacity .14s ease}
.friend-battle-keycap.hit img{filter:brightness(.92) saturate(.95) drop-shadow(0 10px 20px rgba(79,29,104,.28));transform:scale(.965)}
.friend-battle-keycap:disabled{opacity:.74}
.friend-battle-progress{font-size:.72rem;font-weight:900;color:#f6eeff;white-space:nowrap}
.friend-battle-scoreboard{position:relative;z-index:9;display:grid;grid-template-columns:68px auto 68px;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:2px 8px;border-radius:18px;background:rgba(12,10,24,.78);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.friend-battle-scoreboard>strong{font-size:1.9rem;line-height:1;color:#ff795e;text-shadow:0 3px 16px rgba(255,94,52,.2)}
.friend-battle-score{display:grid;place-items:center;min-width:60px;min-height:46px;padding:3px 8px;border-radius:13px;background:rgba(255,255,255,.06);border:2px solid rgba(255,116,80,.72);font-size:1.58rem;line-height:1;font-weight:1000;color:#fff0c3}
.friend-battle-score-top{transform:rotate(180deg)}
.friend-battle-countdown{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;min-width:124px;min-height:124px;padding:14px 16px;border-radius:999px;place-items:center;background:radial-gradient(circle at 35% 35%,rgba(255,214,115,.98),rgba(255,138,37,.96));border:4px solid rgba(255,255,255,.82);box-shadow:0 20px 46px rgba(0,0,0,.42);color:#3a1400;font-size:clamp(2.6rem,14vw,4.3rem);font-weight:1000;letter-spacing:-.03em;text-shadow:0 2px 0 rgba(255,255,255,.32)}
.friend-battle-countdown.is-visible{display:grid}
.friend-battle-countdown[hidden]{display:none!important}
.friend-battle-outcome{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:.14em .36em;border-radius:999px;font-size:clamp(2rem,8vw,3.2rem);font-weight:1000;line-height:1;letter-spacing:-.04em;pointer-events:none;text-shadow:0 8px 18px rgba(0,0,0,.38)}
.friend-battle-player.winner{background:linear-gradient(180deg,rgba(255,206,72,.12),rgba(255,255,255,0))}
.friend-battle-player.winner .friend-battle-keycap img{filter:saturate(1.12) brightness(1.06) drop-shadow(0 0 24px rgba(255,218,104,.42));transform:scale(1.03)}
.friend-battle-player.winner .friend-battle-outcome{background:rgba(255,208,70,.2);border:2px solid rgba(255,236,170,.7);color:#fff3b7}
.friend-battle-player.loser{background:linear-gradient(180deg,rgba(120,120,120,.1),rgba(255,255,255,0))}
.friend-battle-player.loser .friend-battle-keycap img{filter:grayscale(1) brightness(.72) contrast(.92) drop-shadow(0 0 18px rgba(80,80,90,.26));opacity:.92}
.friend-battle-player.loser .friend-battle-outcome{background:rgba(132,132,132,.18);border:2px solid rgba(213,213,213,.32);color:#d6d6d6}
.friend-battle-firework{position:absolute;width:14px;height:14px;border-radius:999px;background:radial-gradient(circle,#fff7d7 0%,#ffd66b 40%,#ff7a3d 72%,rgba(255,122,61,0) 100%);box-shadow:0 0 18px rgba(255,194,89,.44);animation:friendBattleFireworkBurstV192 .92s ease-out forwards;animation-delay:var(--delay,0ms);pointer-events:none;z-index:4}
.friend-battle-live{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:3px}.friend-battle-intro-actions{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:10;display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;width:min(calc(100% - 24px),420px);pointer-events:auto}
.friend-battle-live .ghost,.friend-battle-live .primary{min-width:138px;min-height:38px;padding:8px 14px}.friend-battle-intro-actions .ghost,.friend-battle-intro-actions .primary{flex:1;min-width:0;min-height:42px;padding:8px 12px}

@keyframes friendBattleFireworkBurstV192{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  14%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1.6);opacity:0}
}

@media(max-width:540px){
  .halloween-ranking-box,.halloween-friend-battle-box,.speed-challenge-box{padding-top:58px}
  .halloween-ranking-box>h2,.halloween-friend-battle-box>h2,.speed-challenge-box>h2{padding-left:50px;padding-right:50px;font-size:1.12rem}
  .halloween-ranking-x,.halloween-friend-battle-x,.speed-challenge-x{width:38px;height:38px;font-size:27px;top:calc(env(safe-area-inset-top, 0px) + 10px);right:calc(env(safe-area-inset-right, 0px) + 10px)}
  .friend-battle-arena{min-height:min(80dvh,680px);max-height:82dvh;padding:8px;grid-template-rows:minmax(160px,1fr) auto minmax(160px,1fr)}
  .friend-battle-exit{left:6px;min-height:110px;min-width:34px;padding:10px 8px;font-size:.82rem}
  .friend-battle-keycap{width:min(46vw,198px);height:min(46vw,198px);min-width:112px;min-height:112px}
  .friend-battle-scoreboard{grid-template-columns:58px auto 58px;gap:8px;min-height:50px;padding:2px 6px;margin:0 28px}
  .friend-battle-score{min-width:54px;min-height:44px;font-size:1.46rem}
  .friend-battle-scoreboard>strong{font-size:1.48rem}
  .friend-battle-progress{font-size:.64rem}
  .friend-battle-player-label{font-size:.8rem}
  .friend-battle-ready-actions{bottom:8px;width:min(calc(100% - 96px),240px)}
  .friend-battle-ready-actions .primary{min-height:40px;padding:8px 12px;font-size:.88rem}
  .friend-battle-guide-box{width:min(94vw,398px);padding:18px 16px 16px}
  .friend-battle-guide-list{font-size:.82rem;gap:6px}
}
@media(max-height:720px){
  .friend-battle-arena{min-height:450px;max-height:72dvh;grid-template-rows:minmax(138px,1fr) auto minmax(138px,1fr)}
  .friend-battle-keycap{width:min(34vw,156px);height:min(34vw,156px);min-width:96px;min-height:96px}
  .friend-battle-countdown{min-width:108px;min-height:108px;font-size:clamp(2.3rem,13vw,3.5rem)}
}


/* ===== V1-96 friend battle final overrides ===== */
.halloween-friend-battle-box{width:min(96vw,640px)!important;max-width:640px!important;text-align:center!important;padding:6px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding-top:0!important}
.halloween-friend-battle-box>h2,.halloween-friend-battle-x,.friend-battle-status{display:none!important}
.friend-battle-stage{display:block!important;gap:0!important}
.friend-battle-arena{position:relative!important;display:grid!important;grid-template-rows:minmax(184px,1fr) auto minmax(184px,1fr)!important;gap:8px!important;min-height:min(82dvh,760px)!important;max-height:84dvh!important;padding:10px 12px!important;border-radius:28px!important;background:radial-gradient(circle at 50% 46%,rgba(118,54,166,.24),rgba(13,14,24,.98) 64%)!important;border:1px solid rgba(255,154,65,.30)!important;overflow:hidden!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;box-shadow:0 16px 42px rgba(0,0,0,.32)!important}
.friend-battle-exit{position:absolute!important;left:8px!important;top:50%!important;transform:translateY(-50%)!important;z-index:11!important;border:0!important;border-radius:16px!important;padding:11px 10px!important;min-width:40px!important;min-height:124px!important;background:rgba(9,8,23,.86)!important;border:1px solid rgba(255,150,97,.34)!important;color:#fff0c8!important;font-size:.92rem!important;font-weight:1000!important;letter-spacing:-.02em!important;writing-mode:vertical-rl!important;text-orientation:mixed!important;box-shadow:0 10px 20px rgba(0,0,0,.22)!important}
.friend-battle-player{display:grid!important;place-items:center!important;min-height:0!important;overflow:hidden!important;border-radius:18px!important;transition:background .18s ease, box-shadow .18s ease, transform .18s ease!important}
.friend-battle-player-inner{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;height:100%!important}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)!important}
.friend-battle-player-label{font-size:.9rem!important;color:#ffe4a8!important;letter-spacing:.01em!important;font-weight:1000!important;line-height:1.1!important}
.friend-battle-progress{font-size:.82rem!important;font-weight:1000!important;color:#f6eeff!important;white-space:nowrap!important;line-height:1.1!important;text-shadow:0 2px 8px rgba(0,0,0,.24)!important}
.friend-battle-keycap{width:min(43vw,220px)!important;height:min(43vw,220px)!important;max-width:220px!important;max-height:220px!important;min-width:128px!important;min-height:128px!important;padding:0!important;border:0!important;background:transparent!important;display:grid!important;place-items:center!important;touch-action:none!important;-webkit-tap-highlight-color:transparent!important}
.friend-battle-keycap img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important;filter:drop-shadow(0 14px 28px rgba(255,108,25,.22))!important;transition:filter .14s ease, transform .14s ease, opacity .14s ease!important}
.friend-battle-keycap.hit img{filter:brightness(.92) saturate(.95) drop-shadow(0 10px 20px rgba(79,29,104,.28))!important;transform:scale(.965)!important}
.friend-battle-keycap:disabled{opacity:.74!important}
.friend-battle-scoreboard{position:relative!important;z-index:9!important;display:grid!important;grid-template-columns:72px auto 72px!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:58px!important;padding:2px 8px!important;border-radius:22px!important;background:rgba(12,10,24,.78)!important;box-shadow:0 6px 20px rgba(0,0,0,.22)!important;margin:0 34px!important}
.friend-battle-scoreboard>strong{font-size:2rem!important;line-height:1!important;color:#ff795e!important;text-shadow:0 3px 16px rgba(255,94,52,.2)!important}
.friend-battle-score{display:grid!important;place-items:center!important;min-width:64px!important;min-height:50px!important;padding:3px 8px!important;border-radius:15px!important;background:rgba(255,255,255,.06)!important;border:2px solid rgba(255,116,80,.72)!important;font-size:1.74rem!important;line-height:1!important;font-weight:1000!important;color:#fff0c3!important}
.friend-battle-score-top{transform:rotate(180deg)!important}
.friend-battle-countdown{display:none!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:12!important;min-width:124px!important;min-height:124px!important;padding:14px 16px!important;border-radius:999px!important;place-items:center!important;background:radial-gradient(circle at 35% 35%,rgba(255,214,115,.98),rgba(255,138,37,.96))!important;border:4px solid rgba(255,255,255,.82)!important;box-shadow:0 20px 46px rgba(0,0,0,.42)!important;color:#3a1400!important;font-size:clamp(2.6rem,14vw,4.3rem)!important;font-weight:1000!important;letter-spacing:-.03em!important;text-shadow:0 2px 0 rgba(255,255,255,.32)!important}
.friend-battle-countdown.is-visible{display:grid!important}
.friend-battle-countdown[hidden]{display:none!important}
.friend-battle-outcome{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:8!important;padding:.14em .36em!important;border-radius:999px!important;font-size:clamp(2rem,8vw,3.2rem)!important;font-weight:1000!important;line-height:1!important;letter-spacing:-.04em!important;pointer-events:none!important;text-shadow:0 8px 18px rgba(0,0,0,.38)!important}
.friend-battle-ready-actions{position:absolute!important;left:50%!important;bottom:12px!important;transform:translateX(-50%)!important;z-index:11!important;display:flex!important;justify-content:center!important;width:min(calc(100% - 120px),280px)!important}
.friend-battle-ready-actions[hidden]{display:none!important}
.friend-battle-ready-actions .primary{width:100%!important;min-height:44px!important;padding:9px 16px!important}
.friend-battle-player.winner{background:linear-gradient(180deg,rgba(255,206,72,.12),rgba(255,255,255,0))!important}
.friend-battle-player.winner .friend-battle-keycap img{filter:saturate(1.12) brightness(1.06) drop-shadow(0 0 24px rgba(255,218,104,.42))!important;transform:scale(1.03)!important}
.friend-battle-player.winner .friend-battle-outcome{background:rgba(255,208,70,.2)!important;border:2px solid rgba(255,236,170,.7)!important;color:#fff3b7!important}
.friend-battle-player.loser{background:linear-gradient(180deg,rgba(120,120,120,.1),rgba(255,255,255,0))!important}
.friend-battle-player.loser .friend-battle-keycap img{filter:grayscale(1) brightness(.72) contrast(.92) drop-shadow(0 0 18px rgba(80,80,90,.26))!important;opacity:.92!important}
.friend-battle-player.loser .friend-battle-outcome{background:rgba(132,132,132,.18)!important;border:2px solid rgba(213,213,213,.32)!important;color:#d6d6d6!important}
.friend-battle-guide-dialog{padding:18px!important;background:rgba(4,3,14,.44)!important}
.friend-battle-guide-box{position:relative!important;width:min(92vw,430px)!important;border-radius:24px!important;background:linear-gradient(160deg,#23234a,#38215b)!important;padding:20px 18px 18px!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.16)!important}
.friend-battle-guide-box h2{margin:0 0 10px!important;font-size:1.14rem!important;color:#fff3d8!important}
.friend-battle-guide-x{top:10px!important;right:10px!important}
.friend-battle-guide-list{margin:0 0 14px!important;padding-left:1.15rem!important;display:grid!important;gap:7px!important;color:#f4edf9!important;font-size:.92rem!important;line-height:1.45!important;text-align:left!important}
.friend-battle-guide-list li::marker{color:#ffb252!important}
@media(max-width:540px){
  .friend-battle-arena{min-height:min(80dvh,680px)!important;max-height:82dvh!important;padding:8px!important;grid-template-rows:minmax(160px,1fr) auto minmax(160px,1fr)!important}
  .friend-battle-exit{left:6px!important;min-height:110px!important;min-width:34px!important;padding:10px 8px!important;font-size:.82rem!important}
  .friend-battle-keycap{width:min(46vw,198px)!important;height:min(46vw,198px)!important;min-width:112px!important;min-height:112px!important}
  .friend-battle-scoreboard{grid-template-columns:58px auto 58px!important;gap:8px!important;min-height:50px!important;padding:2px 6px!important;margin:0 28px!important}
  .friend-battle-score{min-width:54px!important;min-height:44px!important;font-size:1.46rem!important}
  .friend-battle-scoreboard>strong{font-size:1.48rem!important}
  .friend-battle-progress{font-size:.64rem!important}
  .friend-battle-player-label{font-size:.8rem!important}
  .friend-battle-ready-actions{bottom:8px!important;width:min(calc(100% - 96px),240px)!important}
  .friend-battle-ready-actions .primary{min-height:40px!important;padding:8px 12px!important;font-size:.88rem!important}
  .friend-battle-guide-box{width:min(94vw,398px)!important;padding:18px 16px 16px!important}
  .friend-battle-guide-list{font-size:.82rem!important;gap:6px!important}
}
@media(max-height:720px){
  .friend-battle-arena{min-height:450px!important;max-height:72dvh!important;grid-template-rows:minmax(138px,1fr) auto minmax(138px,1fr)!important}
  .friend-battle-keycap{width:min(34vw,156px)!important;height:min(34vw,156px)!important;min-width:96px!important;min-height:96px!important}
  .friend-battle-countdown{min-width:108px!important;min-height:108px!important;font-size:clamp(2.3rem,13vw,3.5rem)!important}
}


/* ===== V1-97 friend battle overlay stability + responsive halloween ranking ===== */
.friend-battle-guide-overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(5,4,16,.66);backdrop-filter:blur(3px);border-radius:28px}
.friend-battle-guide-overlay[hidden]{display:none!important}
.friend-battle-guide-overlay .friend-battle-guide-box{position:relative!important;width:min(calc(100% - 16px),430px)!important;max-width:430px!important;box-sizing:border-box!important;border-radius:24px!important;background:linear-gradient(160deg,#23234a,#38215b)!important;padding:20px 18px 18px!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.16)!important}
.friend-battle-guide-overlay .friend-battle-guide-box h2{margin:0 40px 10px 0!important;font-size:1.14rem!important;color:#fff3d8!important}
.friend-battle-guide-overlay .friend-battle-guide-x{top:10px!important;right:10px!important}
.friend-battle-guide-overlay .friend-battle-guide-list{margin:0 0 14px!important;padding-left:1.15rem!important;display:grid!important;gap:7px!important;color:#f4edf9!important;font-size:.92rem!important;line-height:1.45!important;text-align:left!important}
.friend-battle-guide-overlay .dialog-actions{margin-top:12px!important}

.halloween-ranking-dialog{max-width:100vw!important;max-height:100dvh!important;margin:auto!important;overflow:visible!important}
.halloween-ranking-box{box-sizing:border-box!important;width:min(calc(100vw - 24px),560px)!important;max-width:calc(100vw - 24px)!important;min-width:0!important;padding:58px 12px 14px!important;margin:0 auto!important;border-radius:22px!important;background:radial-gradient(circle at 50% 0,rgba(59,21,89,.98),rgba(18,21,34,.98) 64%)!important;border:1px solid rgba(255,128,34,.34)!important;box-shadow:0 18px 56px rgba(0,0,0,.42)!important;overflow:hidden!important;text-align:center!important}
.halloween-ranking-box>h2{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0 0 8px!important;padding:0 42px!important;font-size:clamp(1rem,4.5vw,1.25rem)!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important}
.halloween-ranking-my{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0 0 8px!important;padding:0 4px!important;font-size:.86rem!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important}
.halloween-ranking-box .halloween-week-card{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:8px 0 10px!important;padding:10px!important;overflow:hidden!important}
.halloween-ranking-box .halloween-week-card>div:first-child{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:3px!important;align-items:start!important;text-align:left!important}
.halloween-ranking-box #halloweenRoundTitle,.halloween-ranking-box #halloweenRoundHint{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
.halloween-ranking-box .halloween-speed-list{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.halloween-ranking-box .halloween-speed-row{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;padding:8px 8px!important;overflow:hidden!important}
.halloween-ranking-box .halloween-speed-row>span{display:flex!important;min-width:0!important;max-width:100%!important;gap:6px!important;align-items:center!important;overflow:hidden!important}
.halloween-ranking-box .halloween-speed-player{display:flex!important;min-width:0!important;max-width:100%!important;align-items:center!important;gap:5px!important;overflow:hidden!important}
.halloween-ranking-box .halloween-speed-name{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.halloween-ranking-box .halloween-speed-time,.halloween-ranking-box .halloween-speed-row>strong{justify-self:end!important;flex:0 0 auto!important;white-space:nowrap!important;font-size:.9rem!important}
.halloween-ranking-x{top:10px!important;right:10px!important;max-width:40px!important}
@media(max-width:400px){
 .halloween-ranking-box{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding-left:8px!important;padding-right:8px!important}
 .halloween-ranking-box .halloween-speed-row{padding:7px 6px!important;gap:4px!important;font-size:.82rem!important}
 .halloween-ranking-box .halloween-speed-time,.halloween-ranking-box .halloween-speed-row>strong{font-size:.82rem!important}
 .friend-battle-guide-overlay{padding:10px!important}
 .friend-battle-guide-overlay .friend-battle-guide-box{width:100%!important;padding:18px 14px 14px!important}
 .friend-battle-guide-overlay .friend-battle-guide-list{font-size:.82rem!important;gap:5px!important}
}


/* ===== V1-98 friend battle true-fullscreen + adaptive guide ===== */
.halloween-friend-battle-dialog{
  position:fixed!important;inset:0!important;width:100dvw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:transparent!important;
}
.halloween-friend-battle-dialog::backdrop{background:rgba(4,4,16,.74)!important;backdrop-filter:blur(2px)!important}
.halloween-friend-battle-box{
  position:relative!important;box-sizing:border-box!important;width:100dvw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important;
}
.halloween-friend-battle-box>h2,.halloween-friend-battle-x,.friend-battle-status{display:none!important}
.friend-battle-stage{display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.friend-battle-arena{
  position:relative!important;box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:max(6px,env(safe-area-inset-top,0px)) max(7px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;
  display:grid!important;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)!important;gap:clamp(2px,.8dvh,8px)!important;
  background:radial-gradient(circle at 50% 48%,rgba(118,54,166,.22),rgba(11,12,24,.99) 68%)!important;
  touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;
}
.friend-battle-player{min-width:0!important;min-height:0!important;overflow:hidden!important;border-radius:0!important;padding:0!important}
.friend-battle-player-inner{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:clamp(2px,.65dvh,7px)!important;width:100%!important;height:100%!important;min-height:0!important}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)!important}
.friend-battle-player-label{font-size:clamp(.72rem,2.8vw,.95rem)!important;line-height:1.05!important;margin:0!important}
.friend-battle-progress{font-size:clamp(.62rem,2.45vw,.84rem)!important;line-height:1.05!important;margin:0!important;white-space:nowrap!important}
.friend-battle-keycap{
  width:min(48vw,30dvh,225px)!important;height:min(48vw,30dvh,225px)!important;
  min-width:0!important;min-height:0!important;max-width:225px!important;max-height:225px!important;flex:0 1 auto!important;
}
.friend-battle-scoreboard{
  position:relative!important;z-index:9!important;box-sizing:border-box!important;
  grid-template-columns:clamp(48px,16vw,72px) auto clamp(48px,16vw,72px)!important;
  gap:clamp(6px,2.6vw,14px)!important;min-height:0!important;height:clamp(48px,8.5dvh,68px)!important;
  margin:0 auto!important;padding:2px clamp(5px,2vw,10px)!important;border-radius:clamp(14px,4vw,22px)!important;
  width:min(78vw,390px)!important;max-width:calc(100vw - 92px)!important;
}
.friend-battle-score{min-width:0!important;min-height:0!important;width:100%!important;height:clamp(42px,7.4dvh,58px)!important;font-size:clamp(1.25rem,6vw,1.85rem)!important}
.friend-battle-scoreboard>strong{font-size:clamp(1.35rem,6.5vw,2.05rem)!important}
.friend-battle-exit{
  position:absolute!important;left:max(4px,env(safe-area-inset-left,0px))!important;top:50%!important;z-index:20!important;
  width:clamp(36px,10vw,46px)!important;height:clamp(86px,18dvh,118px)!important;min-width:0!important;min-height:0!important;padding:0!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  transform:translateY(-50%) rotate(-90deg)!important;transform-origin:center!important;
  display:grid!important;place-items:center!important;border-radius:15px!important;font-size:clamp(.78rem,3.2vw,.94rem)!important;white-space:nowrap!important;
}
.friend-battle-ready-actions{
  position:absolute!important;left:50%!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;
  z-index:19!important;width:min(54vw,240px)!important;margin:0!important;
}
.friend-battle-ready-actions .primary{min-height:clamp(38px,6.3dvh,46px)!important;font-size:clamp(.82rem,3.3vw,.96rem)!important}
.friend-battle-countdown{min-width:clamp(94px,26vw,130px)!important;min-height:clamp(94px,26vw,130px)!important;font-size:clamp(2.2rem,13vw,4.3rem)!important}

/* Guide is an in-dialog top overlay. No X or close button: touching the notice itself closes it. */
.friend-battle-guide-overlay{
  position:absolute!important;inset:0!important;z-index:50!important;box-sizing:border-box!important;
  display:grid!important;place-items:center!important;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;
  background:rgba(5,4,16,.64)!important;backdrop-filter:blur(3px)!important;border-radius:0!important;overflow:hidden!important;cursor:pointer!important;touch-action:manipulation!important;
}
.friend-battle-guide-overlay[hidden]{display:none!important}
.friend-battle-guide-overlay .friend-battle-guide-box{
  box-sizing:border-box!important;width:min(calc(100dvw - 24px),430px)!important;max-width:430px!important;max-height:calc(100dvh - 32px)!important;
  margin:0!important;padding:clamp(14px,3.8vw,20px)!important;border-radius:clamp(18px,5vw,24px)!important;
  background:linear-gradient(160deg,#23234a,#38215b)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important;
  overflow:auto!important;overscroll-behavior:contain!important;
}
.friend-battle-guide-overlay .friend-battle-guide-box h2{
  margin:0 0 clamp(8px,2dvh,12px)!important;padding:0!important;font-size:clamp(1rem,5vw,1.32rem)!important;line-height:1.2!important;text-align:center!important;color:#fff3d8!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
.friend-battle-guide-overlay .friend-battle-guide-list{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding-left:clamp(1rem,5vw,1.35rem)!important;display:grid!important;gap:clamp(5px,1.4dvh,9px)!important;
  color:#f4edf9!important;font-size:clamp(.76rem,3.65vw,.94rem)!important;line-height:1.42!important;text-align:left!important;
  white-space:normal!important;overflow-wrap:anywhere!important;word-break:keep-all!important;
}
.friend-battle-guide-overlay .friend-battle-guide-list li{min-width:0!important;max-width:100%!important;padding-right:2px!important}
.friend-battle-guide-overlay .friend-battle-guide-list li::marker{color:#ffb252!important}
.friend-battle-guide-x,.friend-battle-guide-overlay .dialog-actions{display:none!important}

@media(max-height:680px){
  .friend-battle-keycap{width:min(42vw,25dvh,180px)!important;height:min(42vw,25dvh,180px)!important}
  .friend-battle-player-label{font-size:clamp(.65rem,2.6vw,.82rem)!important}
  .friend-battle-progress{font-size:clamp(.58rem,2.25vw,.74rem)!important}
  .friend-battle-scoreboard{height:clamp(44px,8dvh,56px)!important}
  .friend-battle-guide-overlay .friend-battle-guide-box{max-height:calc(100dvh - 20px)!important;padding:12px 14px!important}
  .friend-battle-guide-overlay .friend-battle-guide-list{font-size:clamp(.7rem,3.2vw,.84rem)!important;gap:4px!important;line-height:1.32!important}
}
@media(max-width:360px){
  .friend-battle-keycap{width:min(45vw,27dvh,175px)!important;height:min(45vw,27dvh,175px)!important}
  .friend-battle-scoreboard{max-width:calc(100vw - 78px)!important;grid-template-columns:48px auto 48px!important;gap:5px!important}
  .friend-battle-guide-overlay{padding:8px!important}
  .friend-battle-guide-overlay .friend-battle-guide-box{width:100%!important;max-height:calc(100dvh - 16px)!important;padding:12px!important}
  .friend-battle-guide-overlay .friend-battle-guide-list{font-size:.74rem!important;line-height:1.3!important}
}


/* ===== V1-99 friend battle enlarged keycaps + compact exit + grand fireworks ===== */
.friend-battle-player-inner{gap:clamp(1px,.32dvh,4px)!important}
.friend-battle-player-top .friend-battle-player-inner,.friend-battle-player-bottom .friend-battle-player-inner{justify-content:center!important}
.friend-battle-player-label{font-size:clamp(.7rem,2.6vw,.9rem)!important;line-height:1!important;margin:0!important}
.friend-battle-progress{font-size:clamp(.6rem,2.15vw,.8rem)!important;line-height:1!important;margin:0!important;letter-spacing:-.02em!important}
.friend-battle-player-bottom .friend-battle-player-label{margin-top:-2px!important}
.friend-battle-player-bottom .friend-battle-progress{margin-top:-2px!important}
.friend-battle-player-top .friend-battle-player-label{margin-bottom:-2px!important}
.friend-battle-player-top .friend-battle-progress{margin-bottom:-2px!important}
.friend-battle-keycap{width:min(56vw,37dvh,272px)!important;height:min(56vw,37dvh,272px)!important;max-width:272px!important;max-height:272px!important}
.friend-battle-scoreboard{height:clamp(44px,7.2dvh,60px)!important;width:min(78vw,408px)!important;max-width:calc(100vw - 84px)!important;margin:0 auto!important}
.friend-battle-score{height:clamp(40px,6.6dvh,54px)!important;font-size:clamp(1.2rem,5.6vw,1.78rem)!important}
.friend-battle-scoreboard>strong{font-size:clamp(1.3rem,6vw,1.95rem)!important}
.friend-battle-exit{left:max(4px,env(safe-area-inset-left,0px))!important;top:50%!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;padding:7px 10px!important;border-radius:13px!important;font-size:clamp(.66rem,2.6vw,.82rem)!important;line-height:1!important;letter-spacing:0!important;transform:translateY(-50%) rotate(-90deg)!important;white-space:nowrap!important;background:rgba(9,8,23,.9)!important;border:1px solid rgba(255,150,97,.42)!important;box-shadow:0 8px 18px rgba(0,0,0,.26)!important}
.friend-battle-ready-actions{bottom:max(8px,env(safe-area-inset-bottom,0px))!important;width:min(54vw,220px)!important}
.friend-battle-ready-actions .primary{min-height:clamp(36px,5.6dvh,42px)!important}
.friend-battle-firework{position:absolute;width:var(--size,14px)!important;height:var(--size,14px)!important;border-radius:999px!important;background:radial-gradient(circle,hsl(var(--hue,40) 100% 93%) 0%,hsl(var(--hue,40) 100% 72%) 34%,hsl(calc(var(--hue,40) + 20) 100% 58%) 68%,rgba(255,122,61,0) 100%)!important;box-shadow:0 0 18px hsla(var(--hue,40),100%,70%,.46),0 0 34px hsla(var(--hue,40),100%,64%,.24)!important;animation:friendBattleFireworkBurstV199 var(--duration,960ms) ease-out forwards!important;animation-delay:var(--delay,0ms)!important;pointer-events:none!important;z-index:6!important}
@keyframes friendBattleFireworkBurstV199{0%{opacity:0;transform:translate(0,0) scale(.3)}8%{opacity:1;transform:translate(0,0) scale(1.25)}75%{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.96)}100%{opacity:0;transform:translate(calc(var(--dx,0px)*1.16),calc(var(--dy,0px)*1.16)) scale(.22)}}
@media(max-height:720px){
  .friend-battle-keycap{width:min(52vw,34dvh,232px)!important;height:min(52vw,34dvh,232px)!important}
  .friend-battle-scoreboard{max-width:calc(100vw - 74px)!important}
  .friend-battle-exit{font-size:clamp(.6rem,2.45vw,.76rem)!important;padding:6px 9px!important}
}
@media(max-width:360px){
  .friend-battle-keycap{width:min(53vw,31dvh,212px)!important;height:min(53vw,31dvh,212px)!important}
  .friend-battle-progress{font-size:.58rem!important}
  .friend-battle-exit{font-size:.58rem!important;padding:6px 8px!important}
}


/* ===== V2-1 friend battle center-start / score-adjacent labels / larger exit ===== */
/* 종료 버튼: 좌측에 충분한 터치영역을 확보하되 화면 전체를 길게 덮지 않음 */
.friend-battle-exit{
  left:max(4px,env(safe-area-inset-left,0px))!important;
  top:50%!important;
  width:clamp(170px,42vw,230px)!important;
  height:clamp(44px,6.4dvh,52px)!important;
  min-width:0!important;min-height:0!important;
  padding:0 12px!important;
  border-radius:15px!important;
  font-size:clamp(.7rem,2.85vw,.9rem)!important;
  line-height:1!important;
  transform:translate(-38%,-50%) rotate(-90deg)!important;
  transform-origin:center!important;
  white-space:nowrap!important;
}
/* 양쪽 플레이어 정보는 점수판 바로 옆(각 플레이영역의 점수판 방향)에 붙임 */
.friend-battle-player-inner{position:relative!important;justify-content:flex-start!important;gap:1px!important;padding-top:clamp(2px,.45dvh,5px)!important;box-sizing:border-box!important}
.friend-battle-player-label{margin:0!important;font-size:clamp(.68rem,2.5vw,.88rem)!important;line-height:1!important}
.friend-battle-progress{margin:0!important;font-size:clamp(.59rem,2.1vw,.78rem)!important;line-height:1!important}
.friend-battle-player-top .friend-battle-player-inner{transform:rotate(180deg)!important}
/* 정보 아래의 나머지 공간을 키캡이 최대한 사용 */
.friend-battle-keycap{
  width:min(64vw,41dvh,310px)!important;
  height:min(64vw,41dvh,310px)!important;
  max-width:310px!important;max-height:310px!important;
  margin-top:auto!important;margin-bottom:auto!important;
}
/* 점수판 높이를 조금 줄여 플레이 공간 확보 */
.friend-battle-scoreboard{
  height:clamp(42px,6.8dvh,58px)!important;
  width:min(78vw,410px)!important;
  max-width:calc(100vw - 88px)!important;
}
.friend-battle-score{height:clamp(38px,6dvh,52px)!important}
/* 시작 전에는 점수판을 완전히 덮는 큰 중앙 버튼. 양쪽 어느 플레이어도 쉽게 누를 수 있음 */
.friend-battle-ready-actions.start-mode{
  left:50%!important;top:50%!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(76vw,390px)!important;
  z-index:30!important;
  pointer-events:auto!important;
}
.friend-battle-ready-actions.start-mode .primary{
  width:100%!important;
  min-height:clamp(68px,10dvh,92px)!important;
  border-radius:24px!important;
  font-size:clamp(1.15rem,5vw,1.5rem)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.36),0 0 0 2px rgba(104,247,241,.16)!important;
}
/* 승부 종료 후 다시 대결 버튼은 점수판을 가리지 않고 화면 하단에 표시 */
.friend-battle-ready-actions.replay-mode{
  left:50%!important;top:auto!important;
  bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  width:min(58vw,250px)!important;
  z-index:24!important;
}
.friend-battle-ready-actions.replay-mode .primary{
  width:100%!important;min-height:clamp(42px,6dvh,50px)!important;
  font-size:clamp(.9rem,3.7vw,1.05rem)!important;
}
@media(max-height:720px){
  .friend-battle-keycap{width:min(59vw,37dvh,264px)!important;height:min(59vw,37dvh,264px)!important}
  .friend-battle-exit{width:clamp(155px,40vw,210px)!important;height:44px!important;font-size:.68rem!important}
  .friend-battle-ready-actions.start-mode{width:min(72vw,340px)!important}
  .friend-battle-ready-actions.start-mode .primary{min-height:62px!important}
}
@media(max-width:360px){
  .friend-battle-keycap{width:min(58vw,34dvh,230px)!important;height:min(58vw,34dvh,230px)!important}
  .friend-battle-exit{width:150px!important;height:42px!important;font-size:.62rem!important}
  .friend-battle-ready-actions.start-mode{width:70vw!important}
}


/* ===== V2-2 exit text bigger + larger bottom keycap + rich confetti fireworks ===== */
.friend-battle-exit{
  width:clamp(182px,45vw,246px)!important;
  height:clamp(50px,7.4dvh,60px)!important;
  padding:0 12px!important;
  font-size:clamp(.94rem,3.75vw,1.18rem)!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  border-radius:16px!important;
  box-shadow:0 10px 22px rgba(0,0,0,.3)!important;
}
.friend-battle-player-top .friend-battle-keycap{
  width:min(64vw,41dvh,312px)!important;
  height:min(64vw,41dvh,312px)!important;
  max-width:312px!important;max-height:312px!important;
}
.friend-battle-player-bottom .friend-battle-keycap{
  width:min(72vw,46dvh,372px)!important;
  height:min(72vw,46dvh,372px)!important;
  max-width:372px!important;max-height:372px!important;
}
.friend-battle-player-bottom .friend-battle-player-label{margin-top:-1px!important}
.friend-battle-player-bottom .friend-battle-progress{margin-top:-3px!important}
.friend-battle-player-bottom .friend-battle-keycap{margin-top:auto!important;margin-bottom:auto!important}
.friend-battle-firework{
  width:var(--size,14px)!important;
  height:var(--size,14px)!important;
  background:radial-gradient(circle,hsl(var(--hue,40) 100% 94%) 0%,hsl(var(--hue,40) 100% 76%) 28%,hsl(calc(var(--hue,40) + 18) 100% 60%) 58%,rgba(255,122,61,0) 100%)!important;
  box-shadow:0 0 22px hsla(var(--hue,40),100%,72%,.62),0 0 48px hsla(var(--hue,40),100%,64%,.34)!important;
  filter:saturate(1.15) brightness(1.08)!important;
  animation:friendBattleFireworkBurstV22 var(--duration,1150ms) cubic-bezier(.1,.65,.2,1) forwards!important;
}
.friend-battle-confetti-piece{
  position:absolute;
  width:var(--size,10px);
  height:calc(var(--size,10px) * 1.55);
  left:0;top:0;
  border-radius:var(--radius,3px);
  background:linear-gradient(180deg,hsl(var(--hue,40) 100% 84%),hsl(calc(var(--hue,40) + 20) 100% 58%));
  box-shadow:0 0 12px hsla(var(--hue,40),100%,76%,.38);
  opacity:0;
  transform:translate3d(0,0,0) rotate(0deg);
  animation:friendBattleConfettiFallV22 var(--duration,2400ms) ease-out forwards;
  animation-delay:var(--delay,0ms);
  pointer-events:none;
  z-index:5;
}
@keyframes friendBattleFireworkBurstV22{
  0%{opacity:0;transform:translate(0,0) scale(.2)}
  8%{opacity:1;transform:translate(0,0) scale(1.35)}
  62%{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) scale(1)}
  100%{opacity:0;transform:translate(calc(var(--dx,0px)*1.22),calc(var(--dy,0px)*1.22)) scale(.18)}
}
@keyframes friendBattleConfettiFallV22{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.8)}
  8%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  75%{opacity:1;transform:translate(var(--fallX,0px),var(--fallY,260px)) rotate(var(--rotate,160deg)) scale(1)}
  100%{opacity:0;transform:translate(calc(var(--fallX,0px)*1.12),calc(var(--fallY,260px)*1.1)) rotate(calc(var(--rotate,160deg)*1.45)) scale(.86)}
}
@media(max-height:720px){
  .friend-battle-exit{width:clamp(168px,43vw,220px)!important;height:48px!important;font-size:clamp(.86rem,3.5vw,1.05rem)!important}
  .friend-battle-player-top .friend-battle-keycap{width:min(62vw,39dvh,282px)!important;height:min(62vw,39dvh,282px)!important}
  .friend-battle-player-bottom .friend-battle-keycap{width:min(68vw,42dvh,322px)!important;height:min(68vw,42dvh,322px)!important}
}
@media(max-width:360px){
  .friend-battle-exit{width:162px!important;height:46px!important;font-size:.84rem!important}
  .friend-battle-player-top .friend-battle-keycap{width:min(61vw,34dvh,248px)!important;height:min(61vw,34dvh,248px)!important}
  .friend-battle-player-bottom .friend-battle-keycap{width:min(67vw,38dvh,286px)!important;height:min(67vw,38dvh,286px)!important}
}


/* ===== V2-3 bigger exit text + line gap + party celebration ===== */
.friend-battle-exit{
  width:clamp(196px,48vw,260px)!important;
  height:clamp(54px,7.9dvh,66px)!important;
  padding:0 12px!important;
  font-size:clamp(1.12rem,4.5vw,1.42rem)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.03em!important;
}
.friend-battle-player-label,
.friend-battle-progress{
  display:block!important;
}
.friend-battle-player-top .friend-battle-player-label,
.friend-battle-player-bottom .friend-battle-player-label{
  margin-bottom:.48em!important;
}
.friend-battle-player-top .friend-battle-progress,
.friend-battle-player-bottom .friend-battle-progress{
  margin-top:0!important;
}
.friend-battle-firework{z-index:6!important}
.friend-battle-confetti-piece{z-index:6!important}
.friend-battle-streamer{
  position:absolute;
  left:0; top:0;
  width:var(--width,6px);
  height:var(--length,74px);
  border-radius:999px;
  background:linear-gradient(180deg,hsl(var(--hue,42) 100% 82%),hsl(calc(var(--hue,42) + 18) 100% 58%));
  box-shadow:0 0 10px hsla(var(--hue,42),100%,72%,.32);
  opacity:0;
  transform:translate3d(0,0,0) rotate(0deg);
  animation:friendBattleStreamerFallV23 var(--duration,3000ms) ease-out forwards;
  animation-delay:var(--delay,0ms);
  pointer-events:none;
  z-index:5;
}
.friend-battle-balloon{
  position:absolute;
  left:0; top:0;
  width:var(--size,40px);
  height:calc(var(--size,40px) * 1.18);
  border-radius:52% 52% 48% 48% / 48% 48% 56% 56%;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.85) 0 8%, hsl(var(--hue,34) 100% 72%) 18%, hsl(calc(var(--hue,34) + 12) 100% 58%) 64%, hsl(calc(var(--hue,34) + 22) 100% 48%) 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset -8px -12px 16px rgba(0,0,0,.10);
  opacity:0;
  transform:translate3d(0,0,0) scale(.85);
  animation:friendBattleBalloonFloatV23 var(--duration,4200ms) ease-out forwards;
  animation-delay:var(--delay,0ms);
  pointer-events:none;
  z-index:4;
}
.friend-battle-balloon::before{
  content:'';
  position:absolute;
  left:50%; bottom:-6px;
  width:8px; height:10px;
  transform:translateX(-50%);
  border-radius:2px 2px 4px 4px;
  background:hsl(calc(var(--hue,34) + 6) 100% 46%);
}
.friend-battle-balloon::after{
  content:'';
  position:absolute;
  left:50%; top:100%;
  width:2px; height:calc(var(--size,40px) * 1.1);
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05));
  opacity:.65;
}
@keyframes friendBattleStreamerFallV23{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.86)}
  10%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  72%{opacity:1;transform:translate(var(--curlX,0px),var(--curlY,220px)) rotate(var(--rotate,120deg)) scale(1)}
  100%{opacity:0;transform:translate(calc(var(--curlX,0px)*1.15),calc(var(--curlY,220px)*1.12)) rotate(calc(var(--rotate,120deg)*1.35)) scale(.92)}
}
@keyframes friendBattleBalloonFloatV23{
  0%{opacity:0;transform:translate(0,0) scale(.82)}
  8%{opacity:1;transform:translate(0,0) scale(1)}
  80%{opacity:1;transform:translate(var(--floatX,0px),var(--floatY,-320px)) scale(1.02)}
  100%{opacity:0;transform:translate(calc(var(--floatX,0px)*1.1),calc(var(--floatY,-320px)*1.08)) scale(.92)}
}
@media(max-height:720px){
  .friend-battle-exit{width:clamp(180px,46vw,236px)!important;height:52px!important;font-size:clamp(1rem,4.1vw,1.26rem)!important}
}
@media(max-width:360px){
  .friend-battle-exit{width:170px!important;height:50px!important;font-size:.98rem!important}
}


/* ===== V2-4 Halloween mission roadmap / active battle menu / party celebration ===== */
.halloween-friend-battle-menu-btn{
  border-color:rgba(255,154,76,.62)!important;
  background:linear-gradient(135deg,rgba(255,126,38,.34),rgba(121,61,188,.34))!important;
  box-shadow:inset 0 0 0 1px rgba(255,207,135,.10),0 9px 20px rgba(51,20,74,.18)!important;
  color:#fff7df!important;
}
.halloween-friend-battle-menu-btn>span{filter:saturate(1.2) brightness(1.08)}
.halloween-friend-battle-menu-btn>small{color:#ffe3bf!important}
.halloween-mission-badge{grid-column:2;display:inline-flex!important;align-items:center;justify-content:center;min-height:20px;padding:2px 7px;border-radius:999px;background:rgba(9,8,23,.42);border:1px solid rgba(255,255,255,.14);color:#fff1b8!important;font-size:.61rem!important;font-style:normal!important;font-weight:950!important;white-space:nowrap}
.halloween-mission-summary-card{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0 0 10px;padding:12px 13px;border-radius:16px;border:1px solid rgba(255,188,74,.42);background:linear-gradient(135deg,rgba(93,40,126,.72),rgba(255,120,36,.22));color:#fff;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.halloween-mission-summary-icon{font-size:1.55rem}.halloween-mission-summary-copy{display:grid;gap:3px;min-width:0}.halloween-mission-summary-copy strong{font-size:.93rem;color:#fff0b4}.halloween-mission-summary-copy small{font-size:.72rem;color:#f2e8ff;line-height:1.35}.halloween-mission-summary-arrow{font-size:1.85rem;color:#ffd66c;font-weight:900}
.halloween-mission-dialog{padding:0;border:0;background:transparent}.halloween-mission-box{width:min(96vw,720px);max-width:720px;max-height:92dvh;overflow:hidden;padding:18px 14px 14px;background:radial-gradient(circle at 50% 0,rgba(82,33,117,.98),rgba(15,14,31,.99) 66%);border:1px solid rgba(255,155,61,.42)}
.halloween-mission-head{padding:0 46px 8px;text-align:center}.halloween-mission-head h2{margin:0 0 5px;color:#fff1ba;font-size:1.22rem}.halloween-mission-head p{margin:0;color:#d9cfee;font-size:.78rem;line-height:1.4}
.halloween-mission-roadmap{display:flex;gap:12px;width:100%;overflow-x:auto;overflow-y:hidden;padding:10px 8px 15px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;cursor:grab;user-select:none;scrollbar-width:thin;scrollbar-color:rgba(255,170,68,.55) rgba(255,255,255,.06)}
.halloween-mission-roadmap.dragging{cursor:grabbing;scroll-snap-type:none}.halloween-mission-card{flex:0 0 min(78vw,270px);min-height:222px;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:15px 14px;border-radius:20px;scroll-snap-align:center;background:linear-gradient(165deg,rgba(35,27,61,.98),rgba(21,19,38,.98));border:1px solid rgba(160,111,220,.30);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.halloween-mission-card.current{border-color:rgba(255,185,77,.86);box-shadow:0 0 0 2px rgba(255,178,64,.13) inset,0 10px 28px rgba(255,115,25,.13)}.halloween-mission-card.done{border-color:rgba(113,240,182,.58);background:linear-gradient(165deg,rgba(32,78,65,.72),rgba(23,27,41,.98))}.halloween-mission-card.locked{opacity:.67;filter:saturate(.72)}.halloween-mission-card.bonus{background:linear-gradient(165deg,rgba(91,51,137,.92),rgba(47,29,78,.98));border-color:rgba(210,151,255,.38)}
.halloween-mission-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.halloween-mission-card-head strong{font-size:1rem;color:#fff0ae}.halloween-mission-state{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.64rem;font-weight:950;color:#e9deff;white-space:nowrap}.halloween-mission-card.done .halloween-mission-state{color:#baffdb;background:rgba(91,230,159,.12)}.halloween-mission-target{font-size:.83rem;line-height:1.45;color:#f7f1ff;font-weight:850}.halloween-mission-progress-grid{display:grid;gap:7px;align-content:center}.halloween-mission-progress-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 9px;border-radius:12px;background:rgba(255,255,255,.055)}.halloween-mission-progress-row span{font-size:.75rem;color:#ddd3ec}.halloween-mission-progress-row b{font-size:.82rem;color:#ffe37e}.halloween-mission-reward{font-size:.72rem;color:#ffc975;font-weight:900}.halloween-mission-top5-note{display:grid;gap:3px;margin:2px 8px 8px;padding:11px 12px;border-radius:14px;background:rgba(61,147,206,.14);border:1px solid rgba(105,203,255,.30)}.halloween-mission-top5-note strong{color:#aee8ff;font-size:.82rem}.halloween-mission-top5-note span{color:#dcecff;font-size:.7rem;line-height:1.35}.halloween-mission-guide{text-align:center;color:#bdb1d2;font-size:.69rem;margin:5px 4px 10px}
/* V2-10: 살짝 입체감 있는 원뿔형 파티 꼬깔 + 대각선 비행 연출 */
.friend-battle-party-hat{
  position:absolute;width:64px;height:86px;opacity:0;pointer-events:none;z-index:5;
  transform-origin:50% 76%;filter:drop-shadow(0 9px 12px rgba(0,0,0,.26));
  animation:friendBattlePartyHatV210 3.35s cubic-bezier(.16,.72,.18,1) var(--hat-delay,0ms) forwards;
}
.friend-battle-party-hat::before{
  content:'';position:absolute;left:7px;right:7px;top:8px;height:68px;
  clip-path:polygon(50% 0,94% 80%,83% 92%,17% 92%,6% 80%);
  background:
    radial-gradient(circle at 33% 22%,rgba(255,255,255,.62) 0 5%,rgba(255,255,255,0) 23%),
    linear-gradient(90deg,rgba(62,16,82,.30),rgba(255,255,255,.22) 46%,rgba(80,20,95,.28) 100%),
    repeating-linear-gradient(138deg,#ff5b58 0 11px,#ffd34d 11px 22px,#7f5cff 22px 33px,#55d9ff 33px 44px);
  box-shadow:inset -8px 0 12px rgba(44,11,68,.24),inset 7px 0 9px rgba(255,255,255,.18);
}
.friend-battle-party-hat::after{
  content:'';position:absolute;left:5px;right:5px;bottom:2px;height:17px;border-radius:50%;
  background:radial-gradient(ellipse at 42% 34%,#fff5a8 0 16%,#ffd45c 38%,#ff8b47 68%,#8d376e 100%);
  border:2px solid rgba(255,239,174,.72);box-shadow:inset 0 4px 5px rgba(255,255,255,.32),0 3px 7px rgba(38,8,48,.28);
}
.friend-battle-party-hat-pom{
  position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 32% 28%,#fffbd0 0 14%,#ffd648 38%,#ff704b 72%,#9d3b84 100%);
  box-shadow:0 1px 7px rgba(255,172,44,.65);
}
@keyframes friendBattlePartyHatV210{
  0%{opacity:0;transform:translate3d(0,26px,0) rotate(var(--hat-start-r,-18deg)) scale(var(--hat-start-scale,.46))}
  11%{opacity:1;transform:translate3d(0,2px,0) rotate(var(--hat-start-r,-18deg)) scale(var(--hat-peak-scale,1.04))}
  28%{opacity:1;transform:translate3d(var(--hat-mid-x,22px),var(--hat-mid-y,-54px),0) rotate(0deg) scale(var(--hat-scale,1))}
  74%{opacity:.94}
  100%{opacity:0;transform:translate3d(var(--hat-x,100px),var(--hat-y,-270px),0) rotate(var(--hat-end-r,48deg)) scale(var(--hat-end-scale,.76))}
}
.friend-battle-streamer{border-radius:60% 40% 60% 40%!important;box-shadow:0 0 13px hsla(var(--hue,42),100%,72%,.42)!important;filter:saturate(1.2)}
@media(max-width:540px){.halloween-mission-box{width:98vw;padding:14px 8px 10px}.halloween-mission-card{flex-basis:min(82vw,258px)}.halloween-mission-head{padding-left:42px;padding-right:42px}.halloween-mission-badge{font-size:.59rem!important}}


/* ===== V2-5 responsive mission roadmap + explicit close + larger friend guide ===== */
.halloween-mission-box{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(calc(100vw - 16px),720px)!important;
  max-width:min(calc(100vw - 16px),720px)!important;
  padding:clamp(14px,2.8vw,20px) clamp(8px,2.8vw,16px) clamp(10px,2.6vw,16px)!important;
  overflow:hidden!important;
}
.halloween-mission-x{
  position:absolute!important;
  left:clamp(10px,2.6vw,16px)!important;
  top:clamp(10px,2.6vw,16px)!important;
  right:auto!important;
  z-index:20!important;
  display:grid!important;
  place-items:center!important;
  width:clamp(38px,10vw,44px)!important;
  height:clamp(38px,10vw,44px)!important;
  min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(255,181,94,.62)!important;
  background:rgba(22,13,42,.96)!important;
  color:#fff4d5!important;
  font-size:clamp(1.65rem,7vw,2rem)!important;
  line-height:1!important;
  font-weight:800!important;
  box-shadow:0 8px 22px rgba(0,0,0,.34)!important;
}
.halloween-mission-head{padding-left:clamp(46px,13vw,60px)!important;padding-right:clamp(18px,6vw,46px)!important}
.halloween-mission-head h2{font-size:clamp(1.04rem,4.8vw,1.28rem)!important;overflow-wrap:anywhere!important}
.halloween-mission-head p{font-size:clamp(.7rem,3.1vw,.82rem)!important;overflow-wrap:anywhere!important}
.halloween-mission-roadmap{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  gap:clamp(10px,3vw,14px)!important;
  padding:10px clamp(12px,4.5vw,22px) 15px!important;
  scroll-padding-inline:clamp(12px,4.5vw,22px)!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
}
.halloween-mission-roadmap::-webkit-scrollbar{display:none!important}
.halloween-mission-card{
  box-sizing:border-box!important;
  flex:0 0 clamp(228px,calc(100% - 38px),300px)!important;
  width:clamp(228px,calc(100% - 38px),300px)!important;
  max-width:calc(100% - 28px)!important;
  min-width:0!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always!important;
  overflow:hidden!important;
}
.halloween-mission-card *{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.halloween-mission-card-head{min-width:0!important;flex-wrap:wrap!important}
.halloween-mission-card-head strong,
.halloween-mission-target,
.halloween-mission-reward,
.halloween-mission-progress-row span,
.halloween-mission-top5-note span,
.halloween-mission-guide{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
}
.halloween-mission-progress-row{grid-template-columns:minmax(0,1fr) auto!important}
.halloween-mission-progress-row b{white-space:nowrap!important}
.halloween-mission-top5-note{box-sizing:border-box!important;width:auto!important;max-width:100%!important;margin-left:clamp(4px,2vw,8px)!important;margin-right:clamp(4px,2vw,8px)!important}
.halloween-mission-guide{line-height:1.45!important;padding:0 2px!important}
#halloweenMissionCloseBtn{box-sizing:border-box!important;width:100%!important;max-width:100%!important;white-space:normal!important;min-height:48px!important}

.friend-battle-guide-overlay{
  padding:clamp(10px,3vw,18px)!important;
}
.friend-battle-guide-overlay .friend-battle-guide-box{
  box-sizing:border-box!important;
  width:min(calc(100% - 6px),480px)!important;
  max-width:480px!important;
  min-height:clamp(330px,58dvh,460px)!important;
  max-height:calc(100dvh - 24px)!important;
  padding:clamp(18px,4vw,24px) clamp(16px,4vw,22px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.friend-battle-guide-overlay .friend-battle-guide-box h2{
  margin:0 0 clamp(12px,2.5dvh,20px)!important;
  text-align:center!important;
  font-size:clamp(1.08rem,4.8vw,1.32rem)!important;
}
.friend-battle-guide-overlay .friend-battle-guide-list{
  align-content:center!important;
  overflow:auto!important;
  margin:0!important;
  padding-left:1.2rem!important;
  padding-right:4px!important;
  gap:clamp(8px,1.6dvh,13px)!important;
  font-size:clamp(.8rem,3.4vw,.96rem)!important;
  line-height:1.48!important;
}
.friend-battle-guide-close{
  display:block!important;
  width:100%!important;
  min-height:48px!important;
  margin-top:clamp(14px,2.8dvh,22px)!important;
  border-radius:16px!important;
  font-size:clamp(.9rem,3.8vw,1.05rem)!important;
  font-weight:950!important;
  position:relative!important;
  z-index:2!important;
}
@media(max-width:380px){
  .halloween-mission-box{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;padding-left:6px!important;padding-right:6px!important}
  .halloween-mission-roadmap{padding-left:10px!important;padding-right:10px!important;scroll-padding-inline:10px!important}
  .halloween-mission-card{flex-basis:calc(100% - 28px)!important;width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;padding:13px 11px!important}
  .halloween-mission-card-head strong{font-size:.94rem!important}
  .halloween-mission-target{font-size:.78rem!important}
  .halloween-mission-progress-row{padding:7px 8px!important}
  .friend-battle-guide-overlay .friend-battle-guide-box{min-height:min(62dvh,420px)!important;padding:16px 14px!important}
}
@media(max-height:650px){
  .friend-battle-guide-overlay .friend-battle-guide-box{min-height:calc(100dvh - 22px)!important;max-height:calc(100dvh - 16px)!important}
  .friend-battle-guide-overlay .friend-battle-guide-list{gap:5px!important;font-size:.78rem!important;line-height:1.35!important}
  .friend-battle-guide-close{min-height:42px!important;margin-top:9px!important}
}


/* ===== V2-6 mission full-width cards + larger guide text ===== */
/* 미션 로드맵은 휴대폰 폭마다 한 카드가 완전히 보이도록 하고, 다음 카드의 잘린 글자는 노출하지 않습니다. */
.halloween-mission-box{
  width:min(calc(100vw - 12px),720px)!important;
  max-width:min(calc(100vw - 12px),720px)!important;
  padding-left:clamp(8px,2.4vw,16px)!important;
  padding-right:clamp(8px,2.4vw,16px)!important;
}
.halloween-mission-roadmap{
  box-sizing:border-box!important;
  width:100%!important;
  padding:10px 2px 15px!important;
  scroll-padding-inline:2px!important;
  gap:clamp(10px,3vw,16px)!important;
}
.halloween-mission-card{
  box-sizing:border-box!important;
  flex:0 0 calc(100% - 4px)!important;
  width:calc(100% - 4px)!important;
  max-width:calc(100% - 4px)!important;
  min-width:0!important;
  padding:clamp(13px,3.6vw,18px) clamp(11px,3.4vw,16px)!important;
  overflow:hidden!important;
}
.halloween-mission-card-head strong{font-size:clamp(.94rem,4.3vw,1.08rem)!important}
.halloween-mission-state{font-size:clamp(.61rem,2.8vw,.72rem)!important}
.halloween-mission-target{font-size:clamp(.77rem,3.55vw,.9rem)!important;line-height:1.48!important}
.halloween-mission-progress-row{grid-template-columns:minmax(0,1fr) auto!important;gap:clamp(5px,2vw,9px)!important}
.halloween-mission-progress-row span{font-size:clamp(.7rem,3.25vw,.82rem)!important}
.halloween-mission-progress-row b{font-size:clamp(.76rem,3.45vw,.88rem)!important}
.halloween-mission-reward{font-size:clamp(.7rem,3.2vw,.82rem)!important;line-height:1.4!important}
.halloween-mission-top5-note,
.halloween-mission-guide,
#halloweenMissionCloseBtn{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
#halloweenMissionCloseBtn{padding-left:12px!important;padding-right:12px!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* 친구와 배틀 설명창: 제목/본문을 크게 키우되 작은 폰은 자동 축소하고 필요하면 본문만 스크롤합니다. */
.friend-battle-guide-overlay{padding:clamp(8px,2.2vw,14px)!important}
.friend-battle-guide-overlay .friend-battle-guide-box{
  width:min(calc(100% - 2px),560px)!important;
  max-width:560px!important;
  min-height:clamp(500px,74dvh,700px)!important;
  max-height:calc(100dvh - 16px)!important;
  padding:clamp(20px,4.5vw,30px) clamp(16px,4.2vw,26px)!important;
}
.friend-battle-guide-overlay .friend-battle-guide-box h2{
  margin:0 0 clamp(18px,3dvh,28px)!important;
  font-size:clamp(1.65rem,7vw,2.05rem)!important;
  line-height:1.18!important;
}
.friend-battle-guide-overlay .friend-battle-guide-list{
  align-content:start!important;
  gap:clamp(13px,2.4dvh,20px)!important;
  font-size:clamp(1.08rem,4.8vw,1.35rem)!important;
  line-height:1.55!important;
  padding-left:1.35rem!important;
}
.friend-battle-guide-close{
  min-height:clamp(54px,7.5dvh,66px)!important;
  margin-top:clamp(16px,2.8dvh,24px)!important;
  font-size:clamp(1.02rem,4.4vw,1.22rem)!important;
}
@media(max-width:380px){
  .halloween-mission-box{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;padding-left:5px!important;padding-right:5px!important}
  .halloween-mission-roadmap{padding-left:1px!important;padding-right:1px!important;scroll-padding-inline:1px!important}
  .halloween-mission-card{flex-basis:calc(100% - 2px)!important;width:calc(100% - 2px)!important;max-width:calc(100% - 2px)!important}
  .friend-battle-guide-overlay .friend-battle-guide-box{min-height:min(72dvh,610px)!important;padding:18px 14px!important}
  .friend-battle-guide-overlay .friend-battle-guide-box h2{font-size:clamp(1.45rem,7vw,1.72rem)!important}
  .friend-battle-guide-overlay .friend-battle-guide-list{font-size:clamp(.98rem,4.8vw,1.12rem)!important;gap:11px!important;line-height:1.48!important}
}
@media(max-height:680px){
  .friend-battle-guide-overlay .friend-battle-guide-box{min-height:calc(100dvh - 14px)!important;max-height:calc(100dvh - 12px)!important}
  .friend-battle-guide-overlay .friend-battle-guide-box h2{font-size:clamp(1.35rem,6vw,1.7rem)!important;margin-bottom:12px!important}
  .friend-battle-guide-overlay .friend-battle-guide-list{font-size:clamp(.9rem,3.7vw,1.05rem)!important;gap:8px!important;line-height:1.42!important}
  .friend-battle-guide-close{min-height:46px!important;margin-top:10px!important}
}


/* ===== V2-8 event tip / battle labels / in-game exit confirmation ===== */
.halloween-event-tip-overlay[hidden],.friend-battle-exit-confirm[hidden]{display:none!important}
.halloween-event-tip-overlay{
  position:fixed!important;inset:0!important;z-index:2147483600!important;
  pointer-events:none!important;
}
.halloween-event-tip-box{
  position:fixed!important;left:50%!important;top:40dvh!important;
  transform:translate(-50%,-50%)!important;
  width:min(86vw,430px)!important;max-width:calc(100vw - 24px)!important;
  padding:clamp(20px,5vw,28px) clamp(16px,4.8vw,22px) clamp(18px,4.6vw,24px)!important;
  pointer-events:auto!important;cursor:pointer!important;
  border:1px solid rgba(103,246,255,.42)!important;
  box-shadow:0 18px 70px rgba(0,0,0,.46),0 0 26px rgba(103,246,255,.18)!important;
}
.halloween-event-tip-box .boot-tip-icon{font-size:clamp(38px,10vw,46px)!important;margin-bottom:8px!important}
.halloween-event-tip-box .boot-tip-text{margin:10px 0 0!important;font-size:clamp(18px,4.9vw,25px)!important;line-height:1.38!important}
@media(max-height:700px){.halloween-event-tip-box{top:38dvh!important}.halloween-event-tip-box .boot-tip-text{font-size:clamp(16px,4.2vw,21px)!important}}

/* 위/아래 플레이어 이름은 중앙 점수판과 같은 폭을 기준으로 크게 표시합니다. */
.friend-battle-player-label{
  box-sizing:border-box!important;
  width:min(78vw,410px)!important;
  max-width:calc(100vw - 88px)!important;
  min-height:clamp(34px,5.2dvh,48px)!important;
  margin-left:auto!important;margin-right:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:clamp(2px,.5dvh,5px) clamp(6px,2vw,10px)!important;
  font-size:clamp(1.08rem,4.9vw,1.52rem)!important;
  line-height:1.08!important;font-weight:1000!important;
  white-space:nowrap!important;
}
.friend-battle-player-top .friend-battle-player-label,
.friend-battle-player-bottom .friend-battle-player-label{margin-bottom:.38em!important}
@media(max-width:360px){
  .friend-battle-player-label{max-width:calc(100vw - 78px)!important;font-size:clamp(.98rem,4.8vw,1.28rem)!important;min-height:32px!important}
}
@media(max-height:680px){
  .friend-battle-player-label{font-size:clamp(.92rem,4vw,1.2rem)!important;min-height:30px!important}
}

.friend-battle-exit-confirm{
  position:fixed!important;inset:0!important;z-index:2147483640!important;
  display:grid!important;place-items:center!important;
  padding:clamp(12px,4vw,22px)!important;
  background:rgba(4,5,18,.72)!important;backdrop-filter:blur(5px)!important;
}
.friend-battle-exit-confirm-box{
  box-sizing:border-box!important;width:min(88vw,430px)!important;max-width:100%!important;
  padding:clamp(20px,5vw,28px)!important;border-radius:22px!important;
  background:linear-gradient(160deg,#23234a,#38215b)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;text-align:center!important;
}
.friend-battle-exit-confirm-box p{
  margin:0!important;color:#fff!important;font-size:clamp(1.02rem,4.4vw,1.28rem)!important;
  line-height:1.5!important;font-weight:950!important;word-break:keep-all!important;overflow-wrap:anywhere!important;
}
.friend-battle-exit-confirm-actions{display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:10px!important;margin-top:20px!important}
.friend-battle-exit-confirm-actions button{min-height:48px!important;font-size:clamp(.82rem,3.5vw,1rem)!important}
@media(max-width:350px){.friend-battle-exit-confirm-actions{grid-template-columns:1fr!important}.friend-battle-exit-confirm-box{padding:18px 14px!important}}


/* ===== V2-11 friend battle progress width parity with scoreboard ===== */
/* `n/3 KILL · n번 터치` 진행문구도 중앙 점수판과 같은 가로 기준폭으로 맞춥니다. */
.friend-battle-progress{
  box-sizing:border-box!important;
  width:min(78vw,410px)!important;
  max-width:calc(100vw - 88px)!important;
  min-height:clamp(30px,4.6dvh,42px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(2px,.45dvh,4px) clamp(6px,2vw,10px)!important;
  font-size:clamp(.94rem,4.15vw,1.24rem)!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
}
.friend-battle-player-top .friend-battle-progress,
.friend-battle-player-bottom .friend-battle-progress{
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:360px){
  .friend-battle-progress{
    max-width:calc(100vw - 78px)!important;
    min-height:28px!important;
    font-size:clamp(.84rem,3.95vw,1.02rem)!important;
  }
}
@media(max-height:680px){
  .friend-battle-progress{
    min-height:27px!important;
    font-size:clamp(.82rem,3.55vw,1rem)!important;
  }
}


/* ===== V2-12 fullscreen mission dialog viewport guard ===== */
/* 브라우저 기본 dialog max-width/여백과 내부 100vw 계산이 충돌하지 않도록 바깥 dialog부터 실제 viewport 기준으로 고정합니다. */
.halloween-mission-dialog{
  box-sizing:border-box!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  width:100dvw!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
  background:transparent!important;
}
.halloween-mission-dialog[open]{display:grid!important;place-items:center!important}
.halloween-mission-box{
  box-sizing:border-box!important;
  width:min(100%,720px)!important;
  max-width:720px!important;
  min-width:0!important;
  max-height:100%!important;
  margin:0!important;
}
.halloween-mission-roadmap{box-sizing:border-box!important;min-width:0!important;max-width:100%!important}
.halloween-mission-card{min-width:0!important;max-width:calc(100% - 4px)!important}
@media(max-width:380px){
  .halloween-mission-dialog{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important}
  .halloween-mission-box{width:100%!important;max-width:100%!important}
}


/* ===== V2-13 mission roadmap next-card peek ===== */
/* 처음 메뉴의 목표/이벤트 획득 현황처럼 다음 카드가 살짝 보여 좌우 드래그 가능성을 자연스럽게 알립니다. */
.halloween-mission-roadmap{
  gap:clamp(10px,3vw,14px)!important;
  padding-left:clamp(5px,1.8vw,8px)!important;
  padding-right:clamp(5px,1.8vw,8px)!important;
  scroll-padding-inline:clamp(5px,1.8vw,8px)!important;
}
.halloween-mission-card{
  flex:0 0 clamp(228px,87%,300px)!important;
  width:clamp(228px,87%,300px)!important;
  max-width:87%!important;
}
@media(max-width:380px){
  .halloween-mission-roadmap{padding-left:4px!important;padding-right:4px!important;scroll-padding-inline:4px!important;gap:10px!important}
  .halloween-mission-card{flex-basis:86%!important;width:86%!important;max-width:86%!important}
}
@media(max-width:330px){
  .halloween-mission-card{flex-basis:84%!important;width:84%!important;max-width:84%!important;padding-left:10px!important;padding-right:10px!important}
}

/* ===== V2-16 top stats anchored keycap progress bar ===== */
.top-stats-progress {
  flex: 0 0 auto;
  align-self: center;
  width: min(88%, 390px) !important;
  margin: 0 auto 1px !important;
  position: relative;
  z-index: 3;
  overflow-anchor: none;
}
/* 진행바가 game-zone 밖으로 이동했으므로 상태문구+키캡 스테이지만 배치합니다. */
.simple-zone {
  grid-template-rows: auto var(--keycap-stage-height) !important;
}
@media (max-width: 380px) {
  .top-stats-progress { width: 86% !important; }
}
@media (max-height: 860px) {
  .top-stats-progress { height: 8px; margin-bottom: 0 !important; }
}


/* ===== V2-16 Halloween start button visibility / admin lock / size preview safety ===== */
.user-start-actions .halloween-main-block { display: contents; }
.user-start-actions #halloweenEventBtn { order: 1; }
.user-start-actions #startGameBtn { order: 2; }
.user-start-actions #startRankingBtn { order: 3; }
.user-start-actions #halloweenMainCollection { order: 4; }
.user-start-actions #openCustomizeBtn { order: 5; }
.user-start-actions #claimRewardBtn { order: 6; }
.halloween-main-block[hidden] { display:none !important; }
.halloween-main-collection[hidden] { display:none !important; }
.user-start-actions .halloween-event-open-btn {
  width:100%; min-height:88px; padding:14px 16px !important;
  display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  align-items:center; justify-items:start; column-gap:12px; text-align:left; border-width:2px !important;
}
.user-start-actions .halloween-event-open-btn > span { grid-row:1 / 3; font-size:2rem !important; align-self:center; }
.user-start-actions .halloween-event-open-btn > strong { font-size:1.16rem; line-height:1.18; }
.user-start-actions .halloween-event-open-btn > small { font-size:.78rem; line-height:1.3; opacity:.88; }
.halloween-event-open-btn.halloween-attention-flash { animation:halloweenButtonFlashV216 2.15s ease-in-out 1; }
@keyframes halloweenButtonFlashV216 {
  0%,13%,30%,47%,64%,100% { border-color:rgba(255,146,55,.48); box-shadow:0 0 0 1px rgba(255,126,39,.08) inset,0 10px 28px rgba(57,17,86,.24); }
  7%,23%,40% { border-color:#b8ff2c; box-shadow:0 0 0 3px rgba(184,255,44,.95),0 0 20px rgba(103,246,255,.95),0 0 38px rgba(184,255,44,.72),0 14px 32px rgba(57,17,86,.34); }
}
.halloween-pending-reward-btn {
  width:100%; min-height:48px; margin:10px 0; padding:10px 14px; border-radius:16px;
  font-weight:1000; font-size:.96rem; color:#161328;
  background:linear-gradient(100deg,#ffe761,#7dffb5,#67f6ff); box-shadow:0 0 18px rgba(103,246,255,.28);
}
.halloween-pending-reward-btn[hidden]{display:none!important}
.halloween-mission-pending-reward-btn{margin:8px 0 12px}

#adminPanelDialog .admin-panel-sticky-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; }
#adminPanelDialog .admin-panel-sticky-head h2{min-width:0}
.admin-settings-lock-btn {
  width:46px; height:46px; min-width:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.24);
}
.admin-settings-lock-btn.is-locked { border-color:rgba(255,231,97,.62); background:linear-gradient(145deg,rgba(255,231,97,.18),rgba(255,255,255,.08)); }
.admin-settings-lock-btn.is-unlocked { border-color:rgba(103,246,255,.82); background:linear-gradient(145deg,rgba(103,246,255,.28),rgba(125,255,181,.16)); box-shadow:0 0 0 2px rgba(103,246,255,.16),0 0 20px rgba(103,246,255,.25); }
#adminPanelDialog.admin-settings-locked .admin-skin-btn,
#adminPanelDialog.admin-settings-locked .admin-effect-btn,
#adminPanelDialog.admin-settings-locked .admin-cap-btn,
#adminPanelDialog.admin-settings-locked .admin-view-btn,
#adminPanelDialog.admin-settings-locked [data-size-view-cycle],
#adminPanelDialog.admin-settings-locked [data-size-kind][data-size-skin],
#adminPanelDialog.admin-settings-locked [data-size-slider],
#adminPanelDialog.admin-settings-locked [data-size-undo],
#adminPanelDialog.admin-settings-locked [data-size-redo],
#adminPanelDialog.admin-settings-locked [data-size-reset],
#adminPanelDialog.admin-settings-locked [data-sound-kind][data-skin],
#adminPanelDialog.admin-settings-locked [data-sound-slider],
#adminPanelDialog.admin-settings-locked [data-sound-undo],
#adminPanelDialog.admin-settings-locked [data-sound-redo],
#adminPanelDialog.admin-settings-locked [data-sound-reset],
#adminPanelDialog.admin-settings-locked #adminSaveStartupBtn,
#adminPanelDialog.admin-settings-locked #adminResetRecordBtn,
#adminPanelDialog.admin-settings-locked #adminResetFairPlayBtn,
#adminPanelDialog.admin-settings-locked #adminDiagDeleteBtn,
#adminPanelDialog.admin-settings-locked #adminLegacyImportSeedBtn { opacity:.48; filter:saturate(.42); }

body.admin-size-preview-active .app.start-mode .user-start-screen,
body.admin-size-preview-active .app.start-mode .ad-wrap,
body.admin-size-preview-active .app.start-mode .stats-grid,
body.admin-size-preview-active .app.start-mode .controls,
body.admin-size-preview-active .app.start-mode .options,
body.admin-size-preview-active .app.start-mode .rank-prep,
body.admin-size-preview-active .app.start-mode .view-panel,
body.admin-size-preview-active .app.start-mode .social-controls { display:none !important; }
body.admin-size-preview-active .app.start-mode .game-zone { display:block !important; min-height:min(66dvh,620px); padding-top:20px; }
body.admin-size-preview-active .app.start-mode .game-zone .status-line { display:flex !important; }

@media(max-width:390px){
  .user-start-actions .halloween-event-open-btn{min-height:88px;padding:12px 13px!important}
  #adminPanelDialog .admin-panel-sticky-head{grid-template-columns:minmax(0,1fr) 42px auto;gap:7px}
  .admin-settings-lock-btn{width:42px;height:42px;min-width:42px}
  #adminPanelDialog .admin-game-view-btn{padding:7px 9px;font-size:.78rem}
}