/* Steel, cyan and gold carry the city palette into existing compact controls. */
body[data-mini="hole"] { --surface: #19394b; background: #0c1b29; }
body[data-mini="hole"] .mini-stage { border-color: #75c6dc80; box-shadow: 0 0 0 1px #020b14, inset 0 0 0 2px #adefff0a; }
body[data-mini="hole"] .mini-hud { background: linear-gradient(#0b1b2def, #0b1b2db0 75%, transparent); }
body[data-mini="hole"] .mini-hud > span:first-child { border-color: #f2d18c80; background: linear-gradient(130deg,#364148,#182b3e); }
body[data-mini="hole"] .mini-time { color: #bcecff; }
body[data-mini="hole"] .mini-buddy { border-color: #75c6dc80; border-top-color: #75c6dc35; background: linear-gradient(115deg,#214756,#0e2033); }
body[data-mini="hole"] .buddy-portrait { filter: drop-shadow(0 0 5px #7ddfea40); }
body[data-mini="hole"] .mini-panel { border-color: #91daec99; background: radial-gradient(ellipse at 50% 0,#285569,#101d31 80%); }
body[data-mini="hole"] .mini-hero::before { border-color: #7be5ef99; box-shadow: 0 0 0 8px #8ee6ff09, 0 0 0 9px #9ce4f330; }
body[data-mini="hole"] .cast-choice[aria-pressed="true"] { border-color: #ffe2a1; box-shadow: 0 0 0 2px #ffdd7730, 0 0 12px #ffcc6520; }
@media (prefers-reduced-motion: reduce) {
    body[data-mini="hole"] .buddy-portrait { filter: none; }
}

/* Pass 1: compact mobile cockpit; scenery stays behind the playable city. */
body[data-mini="hole"] { --accent: #81dfff; }
body[data-mini="hole"] .mini-shell { padding: 1px 2px max(2px, env(safe-area-inset-bottom)); }
body[data-mini="hole"] .mini-stage { border-radius: 12px 12px 0 0; }
body[data-mini="hole"] .mini-buddy { height: 46px; padding: 0 6px; gap: 5px; border-radius: 0 0 12px 12px; }
body[data-mini="hole"] .buddy-portrait { align-self: center; width: 44px; height: 44px; margin-top: 0; }
body[data-mini="hole"] .buddy-talk { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; padding: 3px 6px; font-size: 12px; line-height: 1.3; }
body[data-mini="hole"] .buddy-badge { flex-shrink: 0; padding: 3px 4px; }
body[data-mini="hole"] .mini-hud button { width: 44px; height: 43px; flex-shrink: 0; border-color: #a4d9e55c; }
body[data-mini="hole"] .mini-hud { padding: 0 5px; gap: 6px; }
body[data-mini="hole"] .mini-play { width: 100%; min-height: 50px; border-radius: 12px; }
body[data-mini="hole"] .mini-panel { border-radius: 18px; }
body[data-mini="hole"] .mini-next { min-height: 44px; }

/* Pass 2: a compact, factual size readout and a start-only visual key. */
body[data-mini="hole"] .mini-hud .hole-growth { font-size: 10px; color: #a8edff; letter-spacing: .04em; white-space: nowrap; }
body[data-mini="hole"] .hole-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; margin: -4px 0 0; color: #b7cddd; font-size: 11px; line-height: 1.5; }
body[data-mini="hole"] .hole-guide span:first-child { color: #ffe09a; }
body[data-mini="hole"] .mini-hud > span:first-child { min-width: 65px; padding: 4px 7px; }

/* Pass 4: the result is earned by the round, with no invented reward tier. */
body[data-mini="hole"] .hole-round-label { margin: 0; color: #bcecff; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
body[data-mini="hole"] .hole-round-label[data-record="true"] { color: #ffe09a; }
body[data-mini="hole"] .hole-round-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; border: 1px solid #94daec35; border-radius: 10px; background: #07172970; }
body[data-mini="hole"] .hole-round-stats > div { padding: 9px 4px; text-align: center; }
body[data-mini="hole"] .hole-round-stats > div + div { border-left: 1px solid #94daec25; }
body[data-mini="hole"] .hole-round-stats dt { font-size: 10px; color: #a6c3d5; }
body[data-mini="hole"] .hole-round-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; color: #f3e1b9; font-variant-numeric: tabular-nums; }
body[data-mini="hole"] .mini-play { display: flex; justify-content: center; gap: 9px; font-weight: 800; font-size: 15px; }
body[data-mini="hole"] .mini-play svg { width: 19px; height: 19px; }
body[data-mini="hole"] .mini-overlay[data-mode="pause"] .mini-hero { display: none; }
body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-message { font-size: 42px; line-height: 1.1; }

/* Pass 5: readable time pressure without blinking; short screens keep actions close. */
body[data-mini="hole"] .mini-time[data-urgent="true"] { color: #ffe09a; background: #4a341c; border-radius: 6px; padding: 4px 5px; }
body[data-mini="hole"] .mini-overlay { backdrop-filter: none; background: #050e1cdb; padding: 10px; }
@media (max-height: 740px) {
    body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-hero { width: 110px; height: 78px; }
    body[data-mini="hole"] .mini-overlay[data-mode="result"] .panel-portrait { width: 82px; height: 82px; }
    body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-hero::before { width: 68px; height: 68px; }
    body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-hero::after { display: none; }
    body[data-mini="hole"] .mini-panel { gap: 8px; padding: 12px; }
}
@media (max-height: 650px) {
    body[data-mini="hole"] .mini-buddy { height: 42px; }
    body[data-mini="hole"] .buddy-portrait { width: 40px; height: 40px; }
    body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-hero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-mini="hole"] .mini-play:active { transform: none; }
}

/* Earned celebration stays inside the existing result panel. */
body[data-mini="hole"] .hole-result-jewels { display: none; }
body[data-mini="hole"] .mini-overlay[data-mode="result"] .hole-result-jewels { display: block; position: absolute; right: 12px; top: 10px; font-size: 22px; pointer-events: none; }
body[data-mini="hole"] .mini-overlay[data-mode="result"] .mini-panel { border-color: #ffe09a; box-shadow: inset 0 1px #fff4, 0 0 20px #ffd77425; }

/* One result celebration; no timers or animation loop survives replay. */
body[data-mini="hole"] .hole-result-shower { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body[data-mini="hole"] .mini-overlay[data-celebrate="true"] .hole-result-shower { display: block; }
body[data-mini="hole"] .hole-result-shower span { position: absolute; top: 0; left: 5%; font-size: 20px; animation: hole-result-fall 1.1s ease-out both; }
body[data-mini="hole"] .hole-result-shower span:nth-child(2) { left: 94%; animation-delay: .07s; }
body[data-mini="hole"] .hole-result-shower span:nth-child(3) { left: 13%; animation-delay: .14s; }
body[data-mini="hole"] .hole-result-shower span:nth-child(4) { left: 86%; animation-delay: .21s; }
body[data-mini="hole"] .hole-result-shower span:nth-child(5) { left: 23%; animation-delay: .28s; }
body[data-mini="hole"] .hole-result-shower span:nth-child(6) { left: 76%; animation-delay: .35s; }
@keyframes hole-result-fall {
    0% { transform: translateY(-25px) rotate(-10deg); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translateY(145px) rotate(15deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-mini="hole"] .mini-overlay[data-celebrate="true"] .hole-result-shower { display: none; }
}

/* Keep progress in the existing 43px HUD; no extra row above the city. */
body[data-mini="hole"] .mini-hud .hole-score { flex-direction: column; align-items: flex-start; gap: 0; padding: 2px 7px; }
body[data-mini="hole"] .hole-score-value { display: flex; align-items: center; gap: 4px; line-height: 20px; }
body[data-mini="hole"] .hole-score small { font-size: 9px; line-height: 12px; color: #d7e4e9; white-space: nowrap; }
body[data-mini="hole"] .mini-hud .hole-growth-group { display: flex; flex-direction: column; gap: 1px; align-items: center; flex-shrink: 0; }
body[data-mini="hole"] .hole-growth-preview { display: flex; gap: 3px; align-items: center; height: 13px; color: #bdd4e3; font-size: 9px; line-height: 13px; }
body[data-mini="hole"] .hole-growth-preview i { display: block; width: 11px; height: 11px; border: 1px solid #b5d4e5; background: repeating-linear-gradient(90deg,#435e78 0 3px,#9ebed0 3px 4px); transform: scale(var(--building-scale,1)); transform-origin: center bottom; }
@media (max-width: 340px) {
    body[data-mini="hole"] .mini-hud { gap: 3px; padding-inline: 3px; }
    body[data-mini="hole"] .mini-hud > span:first-child { min-width: 60px; }
    body[data-mini="hole"] .mini-hud .mini-time { font-size: 16px; }
}