/* v3 UI: tower map, in-level HUD, pause side panel, result card, wheel. Layout follows the original's flow; art is ours. */
:root { --blue: #2f6fd6; --navy: #1b2f66; --gold: #ffd23f; --red: #d83a2e; }
.screen.dim { background: rgba(20, 40, 90, .55); }
.rbtn { position: absolute; width: 64px; height: 64px; border-radius: 50%; padding: 0; background: radial-gradient(circle at 35% 30%, #6fa8ff, #2f6fd6 70%); border: 4px solid #fff; box-shadow: 0 4px 0 #1b3f8a, 0 8px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.rbtn img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.rbtn.big { width: 72px; height: 72px; background: radial-gradient(circle at 35% 30%, #ffc45a, #f08a14 70%); box-shadow: 0 4px 0 #a85a08, 0 8px 14px rgba(0,0,0,.3); }
.rbtn.big.blue { background: radial-gradient(circle at 35% 30%, #6fa8ff, #2f6fd6 70%); box-shadow: 0 4px 0 #1b3f8a, 0 8px 14px rgba(0,0,0,.3); }
.rbtn.huge { width: 92px; height: 92px; }
.rbtn:active { transform: translateY(3px); }
.coinbar { position: absolute; left: 0; top: 12px; height: 46px; min-width: 170px; display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(27,47,102,.1), rgba(27,47,102,.85) 25%); border-radius: 0 999px 999px 0; padding: 0 44px 0 max(14px, env(safe-area-inset-left)); color: #fff; font-weight: 900; font-size: 26px; z-index: 3; }
.coinbar .coin-ic { width: 40px; height: 46px; margin-top: -6px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.coinbar .plus { position: absolute; right: 4px; top: -4px; width: 32px; height: 32px; border-radius: 50%; background: #3fc23f; border: 3px solid #fff; color: #fff; font-weight: 900; font-size: 20px; line-height: 1; padding: 0; }

/* ---- tower map ---- */
#map { padding: 0; display: block; background: linear-gradient(#8fd8ff, #cdeeff); }
#map-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#tower { width: min(940px, 92vw); margin: 70px auto 120px; background: #3d3233; border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column-reverse; gap: 14px; box-shadow: 0 0 0 6px #2c2325; }
.floor { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; padding: 34px 3% 16px; border-radius: 6px; border-bottom: 10px solid #b3392c; }
.floor.c0 { background: #f5c98a; } .floor.c1 { background: #86dcc0; } .floor.c2 { background: #c99be0; } .floor.c3 { background: #f2b3b3; } .floor.c4 { background: #a9c8f5; } .floor.c5 { background: #e8d28a; }
.door { position: relative; aspect-ratio: 0.82; border: 0; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.door .arch { position: absolute; inset: 14% 4% 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: #1b2f66; border: 6px solid #fff; box-shadow: inset 0 0 0 4px #4b7ad6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.door.boss .arch { background: #5a2a8c; box-shadow: inset 0 0 0 4px #a45be0; }
.door .tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 56%; background: var(--red); color: #fff; font-weight: 900; font-size: clamp(16px, 2.6vw, 26px); border-radius: 10px 10px 18px 18px; padding: 2px 8px 6px; text-shadow: 0 2px 0 rgba(0,0,0,.35); z-index: 2; box-shadow: 0 3px 0 #8e241c; }
.door.boss .tag { background: #6b2fb0; box-shadow: 0 3px 0 #3d1a66; }
.door .st { display: flex; gap: 0; align-items: center; flex-wrap: nowrap; justify-content: center; width: 92%; }
.door .st img { width: 31%; margin-top: 26%; } .door .st img:nth-child(2) { margin-top: 0; width: 38%; } .door .st img.off { filter: grayscale(1) brightness(.5); opacity: .55; }
.door.current .arch { background: radial-gradient(circle, #fff6a0, #ffc928 60%, #f0a014); box-shadow: inset 0 0 0 4px #ffe680, 0 0 22px 6px rgba(255,220,80,.9); animation: glow 1.4s infinite alternate; }
.door.current .arch::after { content: ""; width: 56%; aspect-ratio: 1; border: 6px solid rgba(255,255,255,.75); border-radius: 50%; animation: swirl 2.2s linear infinite; border-style: dashed; }
@keyframes glow { to { box-shadow: inset 0 0 0 4px #ffe680, 0 0 30px 12px rgba(255,230,100,.95); } }
@keyframes swirl { to { transform: rotate(360deg); } }
.door.locked .arch { opacity: .9; }
.door .boards { position: absolute; inset: 24% 0 8%; z-index: 2; display: flex; align-items: center; justify-content: center; }
.door .boards::before, .door .boards::after { content: ""; position: absolute; left: -2%; right: -2%; height: 22%; background: repeating-linear-gradient(90deg, #a86c34 0 14px, #94581f 14px 16px); border: 2px solid #5a3510; transform: rotate(-9deg); top: 18%; }
.door .boards::after { transform: rotate(8deg); top: 56%; }
.door .boards svg { position: relative; z-index: 3; width: 42%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.cage { position: absolute; right: 2%; bottom: 14px; width: 12%; aspect-ratio: .7; border: 4px solid #d9a21b; border-radius: 40% 40% 6px 6px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(217,162,27,.9) 9px 12px), rgba(255,255,255,.15); z-index: 4; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.cage img { width: 80%; }
.cage.free { border-color: transparent; background: none; }
#map .coinbar { top: 12px; }
#map-shop { left: max(18px, env(safe-area-inset-left)); top: 70px; }
#map-wheel { left: max(18px, env(safe-area-inset-left)); bottom: 108px; background: radial-gradient(circle at 35% 30%, #ffd98a, #e6a12a 70%); }
.wheelbtn::before { content: ""; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(#e33 0 12.5%, #fff 0 25%, #36c 0 37.5%, #fc3 0 50%, #e33 0 62.5%, #fff 0 75%, #36c 0 87.5%, #fc3 0); border: 3px solid #fff; }
.wheelbtn .dot { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #3fc23f; border: 2px solid #fff; display: none; }
.wheelbtn .dot.on { display: block; }
#map-back { left: max(18px, env(safe-area-inset-left)); bottom: 18px; }
#map-full { left: calc(max(18px, env(safe-area-inset-left)) + 84px); bottom: 18px; }
#world-tabs { position: absolute; right: 16px; top: 12px; display: flex; gap: 6px; z-index: 3; }
#world-tabs button { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.85); font-weight: 900; box-shadow: 0 3px 0 #9ab; }
#world-tabs button.on { background: var(--gold); box-shadow: 0 3px 0 #c98a14; }

/* ---- level HUD ---- */
#hud .rbtn { position: absolute; }
#btn-pause { left: max(16px, env(safe-area-inset-left)); top: 14px; width: 66px; height: 66px; }
#btn-retry { left: calc(max(16px, env(safe-area-inset-left)) + 78px); top: 14px; width: 66px; height: 66px; }
#btn-sling { left: max(16px, env(safe-area-inset-left)); top: 92px; width: 66px; height: 66px; }
#btn-sling img { padding: 8px; }
#btn-zoom { left: max(16px, env(safe-area-inset-left)); bottom: 14px; width: 66px; height: 66px; }
#score { right: max(22px, env(safe-area-inset-right)); top: 6px; font-size: clamp(34px, 5.5vw, 56px); font-weight: 900; color: #ffd23f; -webkit-text-stroke: 2px #5a3510; paint-order: stroke fill; text-shadow: 0 4px 0 #5a3510; letter-spacing: 1px; }
#pigbar { right: max(22px, env(safe-area-inset-right)); top: 66px; width: min(260px, 36vw); height: 34px; border-radius: 999px; background: #1b2540; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3); overflow: visible; pointer-events: none; }
#pigbar .fill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: linear-gradient(#ffe98a, #f6b21a); transition: width .3s; max-width: calc(100% - 8px); }
#pigbar #pig-ic { position: absolute; left: -14px; top: -10px; width: 42px; height: 42px; z-index: 2; }
#pigbar #pig-count { position: absolute; right: 12px; top: 2px; color: #fff; font-weight: 900; font-size: 18px; z-index: 2; }
#pigbar i { position: absolute; top: -7px; width: 4px; height: 12px; background: #fff; border-radius: 2px; opacity: 0; }
#pigbar.stars i { opacity: 1; }
#pigbar.stars #pig-count { display: none; }
#itembar { bottom: max(10px, env(safe-area-inset-bottom)); }
.it { width: 66px; height: 66px; border-radius: 14px; background: linear-gradient(#bfe0ff, #6aa6ec); border: 3px solid #fff; box-shadow: 0 4px 0 #2a5fa8; padding: 4px; }
.it .n { background: #2f6fd6; right: -8px; top: -10px; }
.it .price { background: var(--navy); }
.it .free { position: absolute; left: -6px; top: 6px; background: #d83a2e; color: #fff; font-size: 11px; font-weight: 900; padding: 1px 8px; transform: rotate(-12deg); border-radius: 4px; }
#btn-end { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: 18px; padding: 16px 26px; font-size: 22px; font-weight: 900; color: #fff; border-radius: 16px; background: linear-gradient(#5ad65a, #2c9a2c); border: 4px solid #fff; box-shadow: 0 5px 0 #1b6a1b, 0 8px 14px rgba(0,0,0,.3); pointer-events: auto; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
#cancelzone { left: 0; top: 0; width: 150px; height: 150px; border-radius: 0 0 100% 0; background: rgba(216,58,46,.35); border: 0; display: none; pointer-events: none; }
#cancelzone span { position: absolute; left: 26px; top: 20px; color: #fff; font-size: 44px; font-weight: 900; }
#cancelzone.on { display: block; } #cancelzone.hot { background: rgba(216,58,46,.7); }
#hud.dragging #btn-pause, #hud.dragging #btn-retry, #hud.dragging #btn-sling { opacity: 0; }

/* ---- pause side panel ---- */
#pause { align-items: flex-start; justify-content: flex-start; padding: 0; }
.side-panel { height: 100%; width: min(300px, 62vw); background: linear-gradient(#2f6fd6, #1b3f8a); border-right: 6px solid #fff; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.lvl-tag { background: var(--red); color: #fff; font-weight: 900; font-size: 26px; border-radius: 12px; text-align: center; padding: 6px; box-shadow: 0 4px 0 #8e241c; margin-bottom: 4px; }
.pbtn { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 999px; background: #fff6dc; font-weight: 900; font-size: 18px; box-shadow: 0 4px 0 #c59a52; text-align: left; }
.pbtn b { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc45a, #f08a14 70%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.pbtn:active { transform: translateY(3px); }

/* ---- result ---- */
#result { background: radial-gradient(circle at 50% 30%, #3b78e0, #1b3f8a 70%); }
.res-card { position: relative; width: min(560px, 94vw); background: #1b2f66; border-radius: 18px; padding: 120px 20px 100px; text-align: center; box-shadow: 0 0 0 6px #14224d; color: #fff; }
.ribbon { position: absolute; left: -9%; right: -9%; top: -56px; height: 170px; background: linear-gradient(#ef4a38, #b92c20); clip-path: polygon(0 18%, 8% 0, 92% 0, 100% 18%, 92% 66%, 100% 92%, 82% 82%, 18% 82%, 0 92%, 8% 66%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 38px; }
#stars { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
#stars img { width: 92px; height: 92px; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.8,.5,1); filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
#stars img.in { transform: scale(1); }
#stars img:nth-child(2) { width: 124px; height: 124px; margin: 0 -8px; margin-bottom: 12px; }
#result-title { font-size: 20px; font-weight: 900; color: #9db8f0; margin-top: 8px; }
#result-score { font-size: clamp(42px, 8vw, 64px); font-weight: 900; color: var(--gold); -webkit-text-stroke: 2px #5a3510; paint-order: stroke fill; text-shadow: 0 4px 0 #5a3510; line-height: 1.1; }
#newhigh { position: absolute; right: -18px; top: 96px; width: 110px; height: 110px; background: #c42fb0; border: 4px solid #fff; border-radius: 50%; transform: rotate(12deg) scale(0); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; line-height: 1.15; padding: 14px; text-align: center; word-break: keep-all; transition: transform .4s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 0 0 4px #ffd23f; }
#newhigh.on { transform: rotate(12deg) scale(1); }
#bar { position: relative; height: 18px; margin: 36px 40px 8px; border-radius: 999px; background: #0f1b40; }
#bar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(#ffe98a, #f6b21a); }
#bar i { position: absolute; top: -6px; width: 4px; height: 30px; background: #9db8f0; border-radius: 2px; }
#bar span { position: absolute; top: -26px; transform: translateX(-50%); font-size: 13px; font-weight: 900; color: #9db8f0; white-space: nowrap; }
#milestones { display: flex; justify-content: center; gap: 14px; margin: 24px 0 8px; }
.ms { position: relative; background: #12214f; border-radius: 6px; padding: 8px 16px 8px 8px; font-weight: 900; font-size: 24px; color: #9db8f0; display: flex; align-items: center; gap: 4px; opacity: 1; }
.ms img { width: 28px; height: 34px; }
.ms.on { color: #fff; }
.ms .ck { position: absolute; right: -10px; top: -14px; width: 30px; height: 30px; border-radius: 50%; background: #3fc23f; border: 3px solid #fff; color: #fff; font-size: 16px; display: none; align-items: center; justify-content: center; }
.ms.on .ck { display: flex; }
#result-coins { font-weight: 900; color: #ffd23f; min-height: 24px; }
.res-btns { position: absolute; left: 0; right: 0; bottom: -40px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.res-btns .rbtn { position: static; background: none; border: 0; box-shadow: none; }
.res-btns img { padding: 0; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
#result .coinbar { top: 12px; }

/* ---- shop extras / wheel / popup ---- */
.tab.off { opacity: .5; text-decoration: line-through; pointer-events: none; }
.wheel-panel { text-align: center; }
.wheel-wrap { position: relative; width: 300px; height: 300px; margin: 10px auto; }
#wheel-disc { position: absolute; inset: 0; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 5px #c98a14, 0 8px 18px rgba(0,0,0,.35); transition: transform 3.4s cubic-bezier(.12,.7,.1,1); background: #fff; }
#wheel-disc .seg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#wheel-disc .seg img, #wheel-disc .seg b { position: absolute; width: 44px; height: 44px; margin-left: -22px; object-fit: contain; }
#wheel-disc .seg b { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #5a3510; }
#wheel-pin { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); border: 16px solid transparent; border-top: 30px solid #d83a2e; border-bottom: 0; z-index: 3; }
#wheel-meter { position: absolute; right: -64px; top: 20px; width: 26px; height: 260px; border-radius: 13px; background: #1b2540; border: 3px solid #fff; overflow: hidden; }
#wheel-meter .mfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffe98a, #f6b21a); transition: height .4s; }
#meter-t { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-size: 12px; font-weight: 900; color: #fff; mix-blend-mode: difference; }
#wheel-msg { font-weight: 800; min-height: 24px; margin: 4px 0 10px; }
.popup-panel { max-width: 420px; }
.popup-panel img { width: 120px; max-height: 140px; object-fit: contain; }
.popup-panel p { font-weight: 700; line-height: 1.5; }
@media (max-height: 520px) { .rbtn { width: 52px; height: 52px; } #btn-pause, #btn-retry, #btn-sling, #btn-zoom { width: 52px; height: 52px; } #btn-retry { left: calc(max(16px, env(safe-area-inset-left)) + 62px); } #btn-sling { top: 76px; } .it { width: 54px; height: 54px; } .side-panel { gap: 6px; padding: 10px; } .pbtn { padding: 4px 10px; font-size: 16px; } .pbtn b { width: 32px; height: 32px; } }
#map[hidden], .screen[hidden] { display: none !important; }

/* out of birds: big USE ITEM offer, like the original */
#offer { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#offer[hidden] { display: none; }
#btn-useitem { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 28px 10px 14px; font-size: 28px; font-weight: 900; color: #fff; border-radius: 20px; background: linear-gradient(#ffb83a, #f27a1a); border: 4px solid #fff; box-shadow: 0 6px 0 #a8480c, 0 10px 18px rgba(0,0,0,.3); animation: pulse 0.8s infinite alternate; }
#btn-useitem img { width: 64px; height: 64px; }
#btn-useitem span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
#btn-useitem small { font-size: 15px; font-weight: 700; opacity: .9; }
#btn-giveup { pointer-events: auto; padding: 6px 18px; font-size: 15px; font-weight: 800; color: #fff; background: rgba(40,50,80,.7); border: 2px solid #fff; border-radius: 12px; }
#tour-total { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 8px 22px; text-align: center; font-size: 15px; font-weight: 800; color: #fff; background: rgba(30,50,110,.82); border: 3px solid #fff; border-radius: 16px; line-height: 1.3; z-index: 3; }
#tour-total[hidden] { display: none; }
#tour-total b { font-size: 22px; color: #ffe26a; }

/* silver/gold marks are often close together: hang the silver label left of its mark and gold right of it so they never overlap */
#bl-silver { transform: translateX(calc(-100% + 2px)) !important; }
#bl-gold { transform: translateX(4px) !important; }

/* playground: goal pill under the score bar, level names on the doors */
#goal-tag { position: absolute; right: max(22px, env(safe-area-inset-right)); top: 108px; padding: 4px 14px; border-radius: 999px; background: rgba(27,37,64,.85); border: 2px solid #fff; color: #ffe26a; font-weight: 900; font-size: 17px; pointer-events: none; }
#goal-tag[hidden] { display: none; }
.door .pname { position: absolute; left: 8%; right: 8%; bottom: 5%; z-index: 3; color: #fff; font-weight: 800; font-size: clamp(10px, 1.5vw, 15px); line-height: 1.15; text-align: center; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
#ability-hint { max-width: 92vw; white-space: normal; text-align: center; }

/* first load: shown until every art slot has arrived (6 MB on a phone network can take a while) */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: linear-gradient(#8fdcff, #c9f0ff); }
#loading[hidden] { display: none; }
.ld-box { display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 900; color: #1b3f8a; }
.ld-box b { font-size: 34px; color: #fff; text-shadow: 0 3px 0 #1b3f8a; }
.ld-bar { width: min(300px, 70vw); height: 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 2px 0 #0002; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffd44a, #f08a14); transition: width .15s; }

/* ---- result on a phone held sideways (short screen): two columns, buttons in the flow so nothing is cut off ---- */
@media (max-height: 520px) {
  #result { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .res-card { width: min(720px, 92vw); padding: 10px 18px 12px; display: grid; grid-template-columns: 1fr 1.15fr; grid-template-areas: "rib rib" "title bar" "score ms" "score coins" "btns btns"; align-items: center; column-gap: 18px; row-gap: 4px; }
  .ribbon { position: relative; grid-area: rib; left: auto; right: auto; top: auto; margin: -4px -46px 0; height: 84px; align-items: center; padding-bottom: 20px; }
  #stars img { width: 54px; height: 54px; }
  #stars img:nth-child(2) { width: 72px; height: 72px; margin-bottom: 8px; }
  #result-title { grid-area: title; margin: 0; font-size: 16px; }
  #result-score { grid-area: score; align-self: start; font-size: clamp(34px, 9vh, 52px); }
  #newhigh { right: -16px; left: auto; top: -10px; width: 74px; height: 74px; font-size: 12px; z-index: 2; }
  #bar { grid-area: bar; margin: 24px 6px 4px; height: 14px; }
  #milestones { grid-area: ms; margin: 8px 0 0; gap: 10px; }
  .ms { font-size: 18px; padding: 4px 12px 4px 6px; }
  .ms img { width: 20px; height: 24px; }
  .ms .ck { width: 22px; height: 22px; font-size: 12px; right: -8px; top: -10px; }
  #result-coins { grid-area: coins; min-height: 18px; font-size: 14px; }
  .res-btns { grid-area: btns; position: static; margin-top: 6px; gap: 18px; }
  .res-btns .rbtn.big { width: 58px; height: 58px; }
  .res-btns .rbtn.huge { width: 72px; height: 72px; }
  #result .coinbar { top: 6px; transform: scale(.85); transform-origin: left top; }
}

/* ---- other panels on a short (sideways phone) screen: fit the height, scroll only the list, keep 닫기 in view ---- */
@media (max-height: 520px) {
  .screen { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .panel { max-height: calc(100dvh - 16px); padding: 12px 18px; border-radius: 20px; display: flex; flex-direction: column; }
  .panel h2 { font-size: 22px; margin-bottom: 4px; }
  .shop-panel { width: min(820px, 94vw); }
  .tabs { margin-bottom: 6px; }
  #shop-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; padding: 2px; }
  .card { padding: 6px 8px; gap: 2px; }
  .card img { width: 44px; height: 44px; }
  .card b { font-size: 14px; }
  .card small { font-size: 11px; min-height: 0; line-height: 1.3; }
  .panel .row { flex: none; }
  /* pause: two columns of buttons instead of one tall list */
  .side-panel { width: min(520px, 70vw); padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px 8px; }
  .side-panel .lvl-tag { grid-column: 1 / -1; font-size: 20px; padding: 4px; margin-bottom: 0; }
  .side-panel .pbtn { font-size: 15px; padding: 4px 10px; gap: 8px; }
  .side-panel .pbtn b { width: 30px; height: 30px; font-size: 16px; }
  /* wheel: same drawing, scaled to fit */
  .wheel-wrap { transform: scale(.6); margin: -58px auto; }
  #wheel-msg { margin: 0 0 6px; min-height: 0; }
  .popup-panel img { width: 72px; max-height: 80px; }
  .popup-panel p { line-height: 1.4; margin: 6px 0; }
  .item-panel img { width: 72px; height: 72px; }
}