/* Boom Hills: cute pastel fantasy theme. Chunky rounded "toy" buttons, Fredoka everywhere.
   Sections: base + buttons · menu screens · game screen (canvas, minimap, system buttons) · HUD · controls · shop · results */

:root {
    --ink: #3a2340; --ink2: #6b4f78; --paper: #fff8fd; --pink: #ff7eb6; --pink-d: #d85593; --blue: #6cb8ff; --blue-d: #3f88d6;
    --yellow: #ffd65c; --yellow-d: #d9a832; --mint: #8fe3b8; --lilac: #c9a8ff;
    --t0: #4aa8ff; --t1: #ff6b8e;
    --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
    font-family: Fredoka, 'Comic Sans MS', system-ui, sans-serif; color: var(--ink);
    background: radial-gradient(circle at 20% 10%, #fff0f8, transparent 50%), linear-gradient(160deg, #ffd3ea, #d6c7ff 55%, #bfe6ff);
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
[hidden] { display: none !important; }

.btn {
    border: 0; border-radius: 18px; padding: 12px 20px; font-weight: 700; font-size: 17px; color: #fff;
    background: var(--lilac); box-shadow: 0 5px 0 #9a78d6, 0 8px 16px rgba(80, 40, 100, 0.25);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #9a78d6, 0 3px 8px rgba(80, 40, 100, 0.25); }
.btn.big { font-size: 20px; padding: 14px 26px; }
.btn.small { font-size: 14px; padding: 7px 12px; border-radius: 12px; }
.btn.pink { background: linear-gradient(#ff9ccb, var(--pink)); box-shadow: 0 5px 0 var(--pink-d), 0 8px 16px rgba(180, 40, 100, 0.25); }
.btn.blue { background: linear-gradient(#94ceff, var(--blue)); box-shadow: 0 5px 0 var(--blue-d), 0 8px 16px rgba(40, 80, 180, 0.25); }
.btn.yellow { background: linear-gradient(#ffe48d, var(--yellow)); color: var(--ink); text-shadow: none; box-shadow: 0 5px 0 var(--yellow-d), 0 8px 16px rgba(160, 120, 20, 0.25); }
.btn.ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink2); text-shadow: none; box-shadow: 0 4px 0 rgba(120, 90, 150, 0.35); }
.btn:disabled { filter: grayscale(0.7); opacity: 0.6; }

/* ---------- menu screens ---------- */
.screen { position: fixed; inset: 0; display: flex; padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); overflow-y: auto; }
.screen:not(.screen-game) > * { margin: auto; }   /* centred, but scrolls from the top when taller than the screen */
.panel {
    background: var(--paper); border-radius: 28px; padding: 18px 20px; width: min(520px, 100%);
    box-shadow: 0 8px 0 rgba(150, 110, 190, 0.35), 0 18px 40px rgba(80, 40, 110, 0.25); border: 3px solid #fff;
}
.panel.wide { width: min(860px, 100%); }
.panel h2 { margin: 0 0 10px; text-align: center; font-size: 26px; color: var(--pink-d); text-shadow: 0 2px 0 #fff; }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

.screen-title { flex-direction: column; }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); }
.title-art { width: min(420px, 90vw); max-height: 38vh; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(90, 40, 120, 0.3)); animation: bob 3s ease-in-out infinite; }
.title-text { margin: 0; font-size: 64px; line-height: 0.95; text-align: center; color: #fff; -webkit-text-stroke: 3px var(--pink-d); text-shadow: 0 6px 0 var(--pink-d), 0 12px 20px rgba(120, 40, 90, 0.35); animation: bob 3s ease-in-out infinite; }
.tagline { margin: 0; color: var(--ink2); font-weight: 600; text-align: center; }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); }
.join-row { display: flex; gap: 8px; }
.join-row input, .name-row input {
    flex: 1; min-width: 0; border: 3px solid #fff; border-radius: 16px; padding: 10px 14px; font-weight: 700; font-size: 17px; color: var(--ink);
    background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 2px 4px rgba(80, 40, 100, 0.15); text-transform: uppercase; letter-spacing: 2px;
}
.name-row input { text-transform: none; letter-spacing: 0; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1deg); } }

.howto { padding-left: 4px; list-style: none; margin: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.35; }
.howto li { background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 2px 0 rgba(150, 110, 190, 0.2); }

.name-row { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 10px; color: var(--ink2); }
.critter-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.critter-card {
    border: 3px solid #fff; border-radius: 20px; background: linear-gradient(#fff, #fbefff); padding: 8px; display: flex; flex-direction: column;
    align-items: center; gap: 3px; box-shadow: 0 4px 0 rgba(150, 110, 190, 0.3); transition: transform 0.12s;
}
.critter-card.sel { border-color: var(--pink); background: linear-gradient(#fff, #ffe3f1); transform: translateY(-3px) scale(1.03); box-shadow: 0 6px 0 var(--pink-d); }
.critter-card b { font-size: 16px; }
.critter-card em { font-style: normal; font-size: 11.5px; color: var(--ink2); text-align: center; min-height: 2.4em; }
.cc-art { width: 100%; aspect-ratio: 1.45; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 70%, #fff, #e9dcff); }
.cc-art img { width: 92%; height: 92%; object-fit: contain; }
.cc-art img.missing { display: none; }
.cc-art:has(img.missing)::after { content: '🐾'; font-size: 40px; }
.cc-stats { width: 100%; display: grid; gap: 2px; }
.stat { display: grid; grid-template-columns: 38px 1fr; align-items: center; font-size: 10.5px; color: var(--ink2); }
.stat i { height: 7px; border-radius: 4px; background: #eadff5; position: relative; overflow: hidden; }
.stat i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, var(--mint), #5cc995); border-radius: 4px; }
.cc-sig { display: flex; align-items: center; gap: 4px; font-size: 11px; width: 100%; }
.cc-sig img, .cc-sig > b { width: 22px; height: 22px; object-fit: contain; font-size: 15px; }
.cc-ang { margin-left: auto; color: var(--ink2); }

.lobby-online { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; font-weight: 600; }
.room-code { font-size: 24px; letter-spacing: 4px; color: var(--blue-d); background: #fff; padding: 2px 10px; border-radius: 10px; }
.opts { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; font-weight: 600; color: var(--ink2); }
.seg { display: flex; background: #efe4fa; border-radius: 14px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { flex: 1; border: 0; border-radius: 11px; padding: 8px 6px; font-weight: 700; background: transparent; color: var(--ink2); min-width: 54px; }
.seg button.sel { background: #fff; color: var(--pink-d); box-shadow: 0 3px 0 rgba(150, 110, 190, 0.35); }
.seg button:disabled { opacity: 0.4; }
.steppers { display: flex; gap: 10px; flex-wrap: wrap; }
.stepper { display: flex; align-items: center; gap: 6px; background: #efe4fa; border-radius: 14px; padding: 4px 8px; }
.stepper small { font-weight: 700; }
.stepper.t0 small { color: var(--t0); } .stepper.t1 small { color: var(--t1); }
.stepper button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 2px 0 rgba(150, 110, 190, 0.35); }
.stepper b { min-width: 16px; text-align: center; font-size: 18px; }
.lobby-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.lobby-seats:empty { display: none; }
.seat { background: #fff; border-radius: 12px; padding: 6px 10px; font-size: 14px; display: flex; align-items: center; gap: 6px; border-left: 6px solid var(--t0); }
.seat.t1 { border-left-color: var(--t1); }
.lobby-me { display: flex; align-items: center; gap: 10px; margin: 0 auto 10px; border: 3px solid #fff; border-radius: 18px; background: linear-gradient(#fff, #fbefff); padding: 4px 14px 4px 6px; box-shadow: 0 3px 0 rgba(150, 110, 190, 0.3); font-weight: 700; }
.lobby-me img { width: 52px; height: 40px; object-fit: contain; }
.lobby-me small { color: var(--ink2); font-weight: 500; }
.seat img { width: 26px; height: 22px; object-fit: contain; }
.seat.mine { cursor: pointer; background: #ffe3f1; }
.seat small { color: var(--ink2); margin-left: auto; }
.lobby-mid { display: grid; gap: 10px; justify-items: center; text-align: center; }
.lobby-mid p { margin: 0; color: var(--ink2); font-weight: 600; }
.lobby-mid .seg { width: min(360px, 100%); }
.lobby-status { text-align: center; color: var(--ink2); min-height: 1.2em; margin: 8px 0 0; }

/* Short landscape phones: title art beside the menu, tighter panels. */
@media (orientation: landscape) and (max-height: 500px) {
    .title-wrap { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 300px; align-items: center; column-gap: 24px; }
    .title-wrap .menu { grid-column: 2; grid-row: 1 / span 2; }
    .title-art { max-height: 62vh; }
    .btn.big { font-size: 18px; padding: 11px 20px; }
    .panel { padding: 12px 16px; border-radius: 22px; }
    .panel h2 { font-size: 22px; margin-bottom: 6px; }
    .opts { gap: 6px; } .seg button { padding: 6px; }
    .critter-cards { grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .critter-card em { min-height: 0; }
    .critter-card { padding: 5px; gap: 1px; }
    .cc-art { aspect-ratio: 1.9; position: relative; } .cc-art img { position: absolute; inset: 5%; width: 90%; height: 90%; }
    .name-row { margin-bottom: 6px; } .name-row input { padding: 6px 12px; }
    .screen-lobby .opts { grid-template-columns: 1fr 1fr; column-gap: 14px; }
    .screen-lobby .opt { grid-template-columns: 62px 1fr; font-size: 14px; }
    .lobby-me { margin-bottom: 6px; padding: 2px 12px 2px 4px; }
    .lobby-me img { width: 40px; height: 30px; }
    .lobby-seats { margin-top: 8px; }
    .seat { padding: 3px 8px; }
    .row { margin-top: 10px; }
}

/* ---------- game screen ---------- */
.screen-game { padding: 0; display: block; overflow: hidden; background: #cfe8ff; touch-action: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.minimap {
    position: absolute; top: calc(6px + var(--sat)); left: 50%; transform: translateX(-50%); width: min(240px, 34vw); aspect-ratio: 6000 / 2200;
    border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 3px 10px rgba(40, 20, 60, 0.3); touch-action: none; z-index: 6;
}
.sysbtns { position: absolute; top: calc(6px + var(--sat)); right: calc(6px + var(--sar)); display: flex; gap: 6px; z-index: 8; }
.sysbtn { width: 36px; height: 36px; border-radius: 12px; border: 2px solid #fff; background: rgba(255, 255, 255, 0.75); font-size: 16px; box-shadow: 0 3px 0 rgba(90, 60, 120, 0.35); padding: 0; }
.toast { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); background: rgba(58, 35, 64, 0.88); color: #fff; padding: 8px 16px; border-radius: 14px; font-weight: 600; z-index: 30; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; color: #fff; font-weight: 700; }
.hud > * { position: absolute; }
.hud-tl { top: calc(6px + var(--sat)); left: calc(6px + var(--sal)); display: flex; gap: 6px; }
.hud-tr { top: calc(48px + var(--sat)); right: calc(6px + var(--sar)); }
.pill, .hud-wind, .hud-coins, .hud-score, .hud-turn {
    background: rgba(58, 35, 64, 0.62); border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 14px; padding: 4px 10px; display: flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hud-wind { min-width: 70px; }
.hud-wind-arrow { display: inline-block; font-size: 20px; color: #bff0ff; transition: transform 0.4s; }
.hud-wind-n { font-size: 18px; }
.hud-coins b { color: var(--yellow); font-size: 18px; }
.hud-score { font-size: 20px; }
.hud-score .t0 { color: #9fd3ff; } .hud-score .t1 { color: #ffadc2; }
.hud-score i { font-style: normal; opacity: 0.7; } .hud-score small { font-size: 11px; opacity: 0.8; }
.hud-turn { top: calc(10px + var(--sat) + min(240px, 34vw) * 0.3667); left: 50%; transform: translateX(-50%); font-size: 14px; white-space: nowrap; }
.hud-turn[data-team="0"] { border-color: var(--t0); } .hud-turn[data-team="1"] { border-color: var(--t1); }
.hud-turn-t { background: #fff; color: var(--ink); border-radius: 50%; min-width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; }
.hud-turn-t.low { background: #ff5a6e; color: #fff; animation: pulse 0.5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.15); } }
.hud-banner { top: 28%; left: 50%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hud-banner b { font-size: clamp(30px, 8vw, 54px); -webkit-text-stroke: 2px var(--pink-d); text-shadow: 0 5px 0 var(--pink-d), 0 10px 20px rgba(80, 20, 60, 0.4); white-space: nowrap; }
.hud-banner small { font-size: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.hud-banner.pop { animation: bannerpop 0.45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerpop { from { transform: translateX(-50%) scale(0.3); opacity: 0; } }
.hud-feed { top: calc(90px + var(--sat)); right: calc(6px + var(--sar)); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; }
.hud-feed-line { background: rgba(58, 35, 64, 0.6); padding: 3px 9px; border-radius: 10px; transition: opacity 0.6s, transform 0.6s; }
.hud-feed-line.mine { background: rgba(255, 126, 182, 0.75); }
.hud-feed-line.gone { opacity: 0; transform: translateX(20px); }
.hud-ko { top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; background: rgba(58, 35, 64, 0.7); padding: 12px 24px; border-radius: 20px; }
.hud-ko b { font-size: 40px; color: #ffd0de; }

.hud-bottom {
    left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--sab)); width: min(440px, calc(100vw - 380px)); display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.hud-power { height: 18px; border-radius: 10px; background: rgba(58, 35, 64, 0.6); border: 2px solid rgba(255, 255, 255, 0.85); position: relative; overflow: hidden; }
.hud-power-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8fe3b8, #ffd65c 60%, #ff7e7e); opacity: 0.35; }
.hud-power-fill.on { opacity: 1; }
.hud-power-last { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px var(--pink-d), 0 0 6px #fff; }
.hud-power-ticks i { position: absolute; top: 3px; bottom: 3px; width: 1px; background: rgba(255, 255, 255, 0.4); }
.hud-fuel { height: 10px; border-radius: 6px; background: rgba(58, 35, 64, 0.6); border: 2px solid rgba(255, 255, 255, 0.7); position: relative; overflow: hidden; }
.hud-fuel i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb35c, #ffd65c); transition: width 0.15s; }
.hud-fuel small { position: absolute; right: 6px; top: -3px; font-size: 9px; }
.hud-weapons { display: flex; gap: 5px; justify-content: center; overflow-x: auto; pointer-events: auto; padding: 4px 2px 2px; scrollbar-width: none; }
.hud-weapons::-webkit-scrollbar { display: none; }
.hud-w {
    position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.8); padding: 4px;
    background: rgba(58, 35, 64, 0.55); display: grid; place-items: center; --r: 0;
}
.hud-w img, .hud-w > b { width: 32px; height: 32px; object-fit: contain; font-size: 22px; line-height: 32px; text-align: center; position: relative; }
.hud-w.sel { background: linear-gradient(#ffb6d8, var(--pink)); border-color: #fff; transform: translateY(-3px); box-shadow: 0 3px 0 var(--pink-d); }
.hud-w small { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.hud-w em { position: absolute; left: 4px; top: 1px; font-size: 9px; font-style: normal; opacity: 0.75; }
.hud-w-ring { position: absolute; inset: 0; border-radius: 12px; background: conic-gradient(rgba(30, 15, 40, 0.7) calc(var(--r) * 360deg), transparent 0); z-index: 1; pointer-events: none; }
.hud-w.reloading img { filter: grayscale(0.6); }

/* ---------- controls ---------- */
.controls { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.controls > * { position: absolute; pointer-events: auto; }
/* Left thumb: the aim pad above ◀ ▶. Right thumb: Jump beside FIRE. */
.ctl-left { left: calc(10px + var(--sal)); bottom: calc(10px + var(--sab)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ctl-left > * { pointer-events: auto; }
.ctl-move { display: flex; gap: 8px; }
.ctl-btn {
    width: 62px; height: 62px; border-radius: 22px; border: 3px solid #fff; background: rgba(255, 255, 255, 0.55); font-size: 24px; color: var(--ink);
    box-shadow: 0 4px 0 rgba(90, 60, 120, 0.4); display: grid; place-items: center; padding: 0; touch-action: none; line-height: 1;
}
.ctl-btn.on { background: rgba(255, 214, 92, 0.9); transform: translateY(3px); box-shadow: 0 1px 0 rgba(90, 60, 120, 0.4); }
.ctl-jump { width: 64px; height: 64px; border-radius: 50%; font-size: 24px; grid-template-rows: 1fr auto; padding: 6px 0 8px; margin-bottom: 4px; }
.ctl-jump small { font-size: 10px; font-weight: 700; }
.ctl-jump:active { background: rgba(143, 227, 184, 0.9); }
.controls.no-move .ctl-move, .controls.no-move .ctl-jump { opacity: 0.35; }
.ctl-right { right: calc(10px + var(--sar)); bottom: calc(10px + var(--sab)); display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.ctl-right > * { pointer-events: auto; }
.ctl-pad {
    width: 92px; height: 92px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, 0.9); background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
    position: relative; touch-action: none; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(40, 20, 60, 0.25);
}
.ctl-pad.on { border-style: solid; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 214, 92, 0.35)); }
.ctl-needle { position: absolute; left: 50%; top: 50%; width: 40px; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, var(--ink2), var(--pink)); transform-origin: 0 50%; pointer-events: none; }
.ctl-needle::after { content: ''; position: absolute; right: -6px; top: -4px; border: 7px solid transparent; border-left: 9px solid var(--pink); border-right: 0; }
.ctl-angle { font-size: 17px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.85); border-radius: 8px; padding: 0 5px; position: relative; top: 20px; pointer-events: none; }
.ctl-pad.used small { display: none; }
.ctl-pad small { position: absolute; top: -15px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
.ctl-fire {
    width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; position: relative; overflow: hidden; padding: 0; touch-action: none;
    background: radial-gradient(circle at 35% 30%, #ffb0d4, var(--pink) 60%, var(--pink-d)); box-shadow: 0 6px 0 #a83c70, 0 10px 18px rgba(120, 30, 80, 0.35);
    color: #fff; font-size: 22px; font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.ctl-fire span { position: relative; z-index: 2; }
.ctl-fire-fill { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255, 230, 102, 0.95), rgba(255, 140, 80, 0.9)); transform-origin: bottom; transform: scaleY(0); z-index: 1; }
.ctl-fire.on { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 #a83c70; }
.ctl-fire.off { filter: grayscale(0.8); opacity: 0.55; }
.ctl-fire.tap { background: radial-gradient(circle at 35% 30%, #fff1a8, var(--yellow) 60%, var(--yellow-d)); box-shadow: 0 6px 0 #a87d1a; color: var(--ink); animation: pulse 0.35s infinite alternate; }
.ctl-top { right: calc(6px + var(--sar)); top: calc(130px + var(--sat)); display: flex; flex-direction: column; gap: 8px; }
.ctl-mini { width: 44px; height: 44px; border-radius: 14px; border: 2px solid #fff; background: rgba(255, 255, 255, 0.7); font-size: 20px; padding: 0; box-shadow: 0 3px 0 rgba(90, 60, 120, 0.35); }

/* Portrait phones: HUD bars move above the controls; the minimap drops below the top row. */
@media (orientation: portrait) {
    .minimap { top: calc(48px + var(--sat)); width: min(300px, 72vw); }
    .hud-tr { top: calc(6px + var(--sat)); right: calc(128px + var(--sar)); }
    .hud-turn { top: calc(54px + var(--sat) + min(300px, 72vw) * 0.3667); }
    .hud-feed { top: calc(90px + var(--sat) + min(300px, 72vw) * 0.3667); }
    .hud-bottom { width: calc(100vw - 20px); bottom: calc(156px + var(--sab)); }   /* above the pad + ◀ ▶ column */
    .ctl-top { top: auto; bottom: calc(262px + var(--sab)); }
    .ctl-btn { width: 56px; height: 56px; }
    .ctl-jump { width: 62px; height: 62px; }
    .ctl-pad { width: 78px; height: 78px; }
    .ctl-fire { width: 92px; height: 92px; }
}
/* Short landscape phones (e.g. 375 px tall): smaller controls. */
@media (orientation: landscape) and (max-height: 430px) {
    .ctl-btn { width: 54px; height: 54px; }
    .ctl-jump { width: 58px; height: 58px; }
    .ctl-pad { width: 78px; height: 78px; }
    .ctl-fire { width: 84px; height: 84px; }
    .hud-bottom { width: min(440px, calc(100vw - 350px)); }
    .hud-w { width: 42px; height: 42px; }
    .ctl-top { flex-direction: row; right: auto; left: calc(6px + var(--sal)); top: calc(48px + var(--sat)); }
}

/* ---------- shop ---------- */
.shop { position: absolute; inset: 0; z-index: 20; background: rgba(58, 35, 64, 0.45); display: flex; align-items: center; justify-content: center; padding: calc(10px + var(--sat)) 10px calc(10px + var(--sab)); }
.shop-card { background: var(--paper); border-radius: 24px; width: min(560px, 100%); max-height: 100%; overflow-y: auto; padding: 12px 14px; border: 3px solid #fff; box-shadow: 0 8px 0 rgba(150, 110, 190, 0.4); }
.shop-card header { display: flex; align-items: center; gap: 10px; position: sticky; top: -12px; background: var(--paper); padding: 4px 0; z-index: 1; }
.shop-card h2 { margin: 0; color: var(--pink-d); flex: 1; }
.shop-card h3 { margin: 10px 0 6px; font-size: 15px; color: var(--ink2); }
.shop-coins { font-weight: 700; font-size: 18px; } .shop-coins b { color: var(--yellow-d); }
.shop-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #efe4fa; font-weight: 700; }
.shop-note { margin: 4px 0; background: #fff3c4; padding: 6px 10px; border-radius: 10px; font-size: 14px; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.shop-item { display: flex; align-items: center; gap: 8px; text-align: left; border: 2px solid #fff; border-radius: 16px; padding: 6px 8px; background: #fff; box-shadow: 0 3px 0 rgba(150, 110, 190, 0.3); }
.shop-item > img, .shop-item > b { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; font-size: 28px; text-align: center; line-height: 40px; }
.shop-item:disabled { opacity: 0.5; filter: grayscale(0.5); }
.shop-item.bought { animation: bought 0.35s; }
@keyframes bought { 50% { transform: scale(1.06); background: #fff3c4; } }
.shop-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shop-txt b { font-size: 15px; } .shop-txt small { font-size: 11.5px; color: var(--ink2); line-height: 1.25; }
.shop-buy { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; }
.shop-buy em { font-style: normal; font-weight: 700; color: var(--yellow-d); font-size: 14px; white-space: nowrap; }
.shop-own { font-style: normal; color: #5cc995; font-size: 11px; }
.pips { display: flex; gap: 3px; margin-top: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: #eadff5; }
.pips i.on { background: var(--pink); }

/* ---------- results ---------- */
.res-head { font-size: 34px !important; margin: 0; }
.res-head.win { color: #f0a020 !important; } .res-head.lose { color: var(--ink2) !important; }
.res-score { text-align: center; font-size: 30px; font-weight: 700; margin: 4px 0 10px; }
.res-score .t0 { color: var(--t0); } .res-score .t1 { color: var(--t1); }
.res-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.res-table th { font-size: 11px; color: var(--ink2); text-align: left; }
.res-table td { background: #fff; padding: 5px 8px; }
.res-table td:first-child { border-radius: 10px 0 0 10px; width: 18px; } .res-table td:last-child { border-radius: 0 10px 10px 0; }
.res-table tr.me td { background: #ffe3f1; font-weight: 700; }
.res-table small { display: block; font-size: 10.5px; color: var(--ink2); font-weight: 400; }
.res-table .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

/* Pick screen: the card grid scrolls inside the panel, so the name box and Next stay on screen. */
.screen-pick .panel { display: flex; flex-direction: column; max-height: 100%; }
.screen-pick .critter-cards { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px 8px; margin: 0 -4px; }
.screen-pick .row { flex: none; }
@media (max-width: 560px) {
    .critter-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .critter-card { padding: 5px; gap: 1px; border-radius: 16px; }
    .critter-card b { font-size: 14px; }
    .critter-card em { font-size: 10.5px; line-height: 1.2; }
    .stat { grid-template-columns: 30px 1fr; font-size: 9px; }
    .cc-sig { flex-wrap: wrap; justify-content: center; font-size: 10px; gap: 2px; }
    .cc-sig img, .cc-sig > b { width: 18px; height: 18px; }
    .cc-ang { margin-left: 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
    .critter-cards { grid-template-columns: repeat(5, 1fr); }
    .screen-pick .panel h2 { font-size: 20px; margin-bottom: 4px; }
    .screen-pick .row { margin-top: 8px; }
    .screen-pick .cc-art { aspect-ratio: 2.6; }
    .screen-pick .critter-card b { font-size: 14px; }
    .screen-pick .critter-card em { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .screen-pick .stat { font-size: 9px; } .screen-pick .stat i { height: 5px; }
}