/* 🎉 PIG PARTY — the look: bubbly, glossy, chunky, bouncy.
   One full-screen app; the board view sits behind HTML overlays. */
:root {
  --ink: #2a1250;
  --pink: #ff4f8b; --pink-d: #c4185a;
  --gold: #ffcc33; --gold-d: #c98a00;
  --blue: #3d8bff; --blue-d: #1e55c0;
  --green: #36c45a; --green-d: #1d8a39;
  --purple: #9b4dff; --purple-d: #5e1fbf;
  --red: #ff4d5e; --red-d: #b81c2c;
  --cream: #fff8ec;
  --font: "Baloo 2", "Fredoka", "Fredoka One", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #24104a; color: #fff; font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
.pp-app { position: fixed; inset: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------------- the board view, behind everything ---------------- */
#pp-board { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #6fd0ff, #2b8a5a 70%, #1b4d3a); opacity: 0; transition: opacity .5s; }
#pp-board.on { opacity: 1; }
#pp-board > canvas { display: block; }
.pp-fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.spark { position: fixed; width: 10px; height: 6px; border-radius: 2px; transform: translate(-50%, -50%); animation: spark .9s ease-out forwards; }
@keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(540deg); opacity: 0; } }

.screen { position: absolute; inset: 0; z-index: 10; }
.screen.hud { pointer-events: none; }
.screen.hud > * { pointer-events: auto; }
.screen.hud > .banner, .screen.hud > .steps { pointer-events: none; }

/* ---------------- buttons: chunky, glossy, with depth ---------------- */
.btn {
  --b: #7a5cff; --bd: #4a2fc0; --bt: #fff;
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 10px 22px 12px; border: 0; border-radius: 22px; cursor: pointer;
  font: 800 18px/1.1 var(--font); color: var(--bt); letter-spacing: .01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 75%, #fff) 0%, var(--b) 48%, color-mix(in srgb, var(--b) 80%, #000) 100%);
  box-shadow: 0 6px 0 var(--bd), 0 10px 18px rgba(20, 0, 50, .45), inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.5);
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
  transition: transform .08s, box-shadow .08s, filter .15s;
  overflow: hidden;
}
.btn::before { content: ""; position: absolute; left: 8%; right: 8%; top: 4px; height: 42%; border-radius: 18px 18px 40px 40px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.btn:hover { filter: brightness(1.08) saturate(1.1); }
.btn:active, .btn.picked { transform: translateY(4px); box-shadow: 0 2px 0 var(--bd), 0 4px 10px rgba(20,0,50,.4), inset 0 2px 0 rgba(255,255,255,.4); }
.btn:focus-visible, .btn.sel { outline: 4px solid #fff; outline-offset: 3px; }
.btn:disabled { filter: grayscale(.7) brightness(.8); cursor: default; }
.btn small { font-size: 12px; font-weight: 700; opacity: .92; text-shadow: none; }
.btn.big { min-height: 64px; padding: 14px 34px 16px; font-size: 26px; border-radius: 28px; }
.btn.mid { min-height: 54px; font-size: 20px; }
.btn.sm { min-height: 40px; padding: 7px 14px 9px; font-size: 15px; border-radius: 16px; box-shadow: 0 4px 0 var(--bd), 0 6px 10px rgba(20,0,50,.35), inset 0 2px 0 rgba(255,255,255,.45); }
.btn.hot { --b: var(--pink); --bd: var(--pink-d); }
.btn.gold { --b: var(--gold); --bd: var(--gold-d); --bt: #4a2a00; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn.blue { --b: var(--blue); --bd: var(--blue-d); }
.btn.green { --b: var(--green); --bd: var(--green-d); }
.btn.purple { --b: var(--purple); --bd: var(--purple-d); }
.icon-btn { width: 46px; height: 46px; border: 0; border-radius: 50%; font-size: 22px; cursor: pointer; color: #fff; background: radial-gradient(circle at 35% 30%, #a98bff, #5b35d6); box-shadow: 0 4px 0 #34178c, 0 6px 12px rgba(0,0,0,.4); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #34178c; }

/* ---------------- the title ---------------- */
#s-title { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.title-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shelf-link { position: absolute; left: 12px; top: 10px; z-index: 3; color: #fff; text-decoration: none; font-weight: 800; padding: 6px 12px; border-radius: 14px; background: rgba(30,0,60,.45); }
.build { position: absolute; right: 12px; top: 12px; z-index: 3; font-size: 12px; opacity: .8; background: rgba(30,0,60,.45); padding: 3px 9px; border-radius: 10px; }
.title-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2vh; margin-top: -14vh; padding: 0 12px; }
.logo { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .25em; line-height: .9; text-align: center; }
.lg { position: relative; display: inline-block; font-weight: 900; font-size: clamp(56px, 13vw, 150px); letter-spacing: -.01em; animation: wob 2.4s ease-in-out infinite; }
.lg-o { color: #3a0f6e; -webkit-text-stroke: .17em #3a0f6e; text-shadow: 0 .1em 0 #3a0f6e, 0 .16em .3em rgba(0,0,0,.5); }
.lg-f { position: absolute; left: 0; top: 0; color: transparent; -webkit-background-clip: text; background-clip: text; }
.lg.l1 .lg-f { background-image: linear-gradient(180deg, #ffe3ef 0%, #ff9cc4 30%, #ff4f8b 62%, #d91c6c 100%); }
.lg.l2 .lg-f { background-image: linear-gradient(180deg, #fffbd0 0%, #ffe066 30%, #ffb21a 64%, #ff7a1a 100%); }
.lg.l2 { animation-delay: -1.2s; }
.lg-sub { flex-basis: 100%; margin-top: calc(clamp(56px, 13vw, 150px) * .36); /* clear the logo's g descender, its stroke and its drop shadow (9 Nov) */ font-size: clamp(14px, 2.6vw, 22px); font-weight: 800; color: #fff; text-shadow: 0 2px 0 #3a0f6e, 0 0 12px rgba(0,0,0,.4); }
@keyframes wob { 0%,100% { transform: rotate(-2deg) translateY(0) scale(1); } 50% { transform: rotate(2deg) translateY(-6px) scale(1.03); } }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.title-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
#pp-play { min-width: 260px; font-size: 32px; overflow: visible; }
/* ⚠️ the glow pulses, never the button: a moving button is a button a test (and the publish gate) cannot click */
#pp-play::after { content: ""; position: absolute; inset: -6px; border-radius: 34px; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 26px 8px rgba(255,120,180,.7); animation: glow 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
#pp-continue { min-width: 260px; }
#pp-continue small { font-size: 13px; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#s-title .pvsb-cookie-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0 auto; padding-bottom: max(.45rem, var(--safe-b)); color: #ffe9f4; text-shadow: 0 1px 2px #000; }

/* ---------------- setup ---------------- */
#s-setup, .menu-screen { overflow-y: auto; background: radial-gradient(ellipse at 50% -10%, #8a4dff, #3a1784 55%, #1d0b45); }
.setup, .menu-wrap { max-width: 1100px; margin: 0 auto; padding: 14px 14px 30px; display: flex; flex-direction: column; gap: 14px; }
.setup-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup-top h2 { margin: 0; font-size: clamp(20px, 3.6vw, 34px); text-shadow: 0 3px 0 #2a0b66; flex: 1; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 40%, #2a1060), #22104a); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 70%, #fff), 0 8px 18px rgba(0,0,0,.35); }
.slot.is-bot { filter: saturate(.75); }
.slot.is-off { opacity: .45; }
.slot-off-tag { font-size: 12px; opacity: .9; }
.slot-pic { display: flex; align-items: center; gap: 4px; }
.slot-pic .pic { display: grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8, transparent 60%), var(--pc); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.arrow-btn { width: 34px; height: 44px; border: 0; border-radius: 12px; font-size: 18px; color: #fff; cursor: pointer; background: rgba(255,255,255,.18); }
.arrow-btn:focus-visible { outline: 3px solid #fff; }
.slot-name { font-size: 22px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.slot .btn { width: 100%; max-width: 190px; }
.count-row { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: center; font-weight: 800; }
.setup-row h3 { margin: 4px 0 8px; font-size: 20px; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.board-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 0; border-radius: 20px; text-align: left; cursor: pointer; color: #fff; font-family: var(--font); background: linear-gradient(180deg, #4b2a9a, #2c1468); box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 6px 0 #1a0844; }
.board-card.on { background: linear-gradient(180deg, #ff6fa8, #c4185a); box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #7a0a36; }
.board-card .b-emoji { font-size: 34px; }
.board-card b { font-size: 20px; }
.board-card small { font-size: 13px; opacity: .9; }
.board-card .b-diff { position: absolute; right: 12px; top: 10px; font-size: 13px; }
.board-card:focus-visible { outline: 4px solid #ffd34a; outline-offset: 3px; }
.lens { display: flex; gap: 12px; flex-wrap: wrap; }
.len-btn b { font-size: 20px; }
.setup-go { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: center; padding: 10px 0 calc(10px + var(--safe-b)); background: linear-gradient(180deg, rgba(29,11,69,0), rgba(29,11,69,.92) 40%); }

/* ---------------- the HUD ---------------- */
.cards { position: absolute; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.pcard { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 55%, #fff) 0%, var(--pc) 40%, color-mix(in srgb, var(--pc) 70%, #000) 100%); box-shadow: 0 4px 0 color-mix(in srgb, var(--pc) 50%, #000), 0 8px 14px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.5); transition: transform .25s; min-width: 0; }
.pcard.turn { transform: translateY(4px) scale(1.04); box-shadow: 0 0 0 4px #fff, 0 0 22px 6px color-mix(in srgb, var(--pc) 80%, #fff), 0 8px 14px rgba(0,0,0,.35); }
.pcard.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.1); } }
.pc-pic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.35); display: grid; place-items: center; }
.pc-body { min-width: 0; display: flex; flex-direction: column; }
.pc-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pc-name i { font-style: normal; font-size: 12px; }
.pc-row { display: flex; gap: 8px; align-items: center; font-weight: 900; font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pc-tr { display: inline-flex; align-items: center; gap: 1px; color: #fff3a0; }
.pc-items { font-size: 15px; min-height: 18px; letter-spacing: 1px; }
.pc-place { position: absolute; right: 6px; top: -7px; font-size: 12px; font-weight: 900; padding: 1px 7px; border-radius: 10px; background: #2a1250; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.pc-place[data-place="1"] { background: linear-gradient(#ffe680, #e0a800); color: #4a2a00; }
.pcard[data-color="blue"]::after, .pcard[data-color="red"]::after { content: ""; position: absolute; left: 44px; top: 44px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; background: var(--blue); }
.pcard[data-color="red"]::after { background: var(--red); }
.pcard.slow .pc-pic { filter: sepia(.6) brightness(1.2); }
.num-pop { position: absolute; left: 50%; top: 60%; transform: translate(-50%, 0); font-size: 22px; font-weight: 900; white-space: nowrap; color: #fff; paint-order: stroke; -webkit-text-stroke: 4px #2a1250; animation: numpop 1.3s ease-out forwards; pointer-events: none; z-index: 3; }
.num-pop.good { color: #b8ff8a; } .num-pop.bad { color: #ff9aa6; }
@keyframes numpop { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { transform: translate(-50%, 8px) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, 50px) scale(1); opacity: 0; } }
.round-badge { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.round-badge b { font-size: 20px; padding: 4px 16px; border-radius: 16px; background: rgba(42,18,80,.75); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.round-badge small { font-size: 14px; opacity: .8; }
.sack-pill { font-weight: 900; font-size: 14px; padding: 4px 10px; border-radius: 14px; background: rgba(90,50,20,.85); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.pc-dist { position: absolute; right: 8px; bottom: 4px; font-size: 12px; font-weight: 900; color: #fff7c0; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.frenzy-pill, .boss-pill { font-weight: 900; padding: 4px 12px; border-radius: 14px; background: linear-gradient(#ff8a3a, #e0281a); box-shadow: 0 3px 0 #7a1000; animation: pulse 1s infinite; }
.boss-pill { background: linear-gradient(#ffe680, #c98a00); color: #4a2a00; box-shadow: 0 3px 0 #6a4a00; }
.pause-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: .9; z-index: 2; }
body.frenzy #pp-board { filter: saturate(1.25) hue-rotate(-8deg); }
body.frenzy #s-hud::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px 10px rgba(255,80,20,.45); animation: pulse 1.4s infinite; }

.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 30px; border-radius: 30px; max-width: 92vw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc, #9b4dff) 60%, #fff), var(--bc, #9b4dff) 50%, color-mix(in srgb, var(--bc, #9b4dff) 70%, #000)); box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.5); }
.banner.in { animation: bannerIn .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(.3) rotate(-6deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.banner .b-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.banner b { font-size: clamp(28px, 6vw, 54px); font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,.35); line-height: 1; }
.banner small { font-size: clamp(14px, 2.4vw, 20px); font-weight: 800; margin-top: 6px; }
.banner.frenzy { --bc: #ff5a1a; } .banner.boss { --bc: #e0a800; } .banner.boar { --bc: #8a5a2a; } .banner.blue { --bc: #3d8bff; } .banner.red { --bc: #ff4d5e; } .banner.vs { --bc: #ff7a1a; } .banner.item { --bc: #26c6da; } .banner.hops { --bc: #36c45a; }
.steps { position: absolute; left: 50%; top: 132px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; padding: 4px 16px; border-radius: 18px; background: rgba(42,18,80,.8); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.steps b { font-size: 30px; color: #ffe14a; }

/* the dice block */
.dice-wrap { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dice-row { display: flex; gap: 16px; }
.dice { position: relative; width: clamp(110px, 22vmin, 170px); aspect-ratio: 1; border: 0; border-radius: 26%; cursor: pointer; display: grid; place-items: center; font: 900 clamp(56px, 12vmin, 92px)/1 var(--font); color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pc) 45%, #fff), var(--pc) 45%, color-mix(in srgb, var(--pc) 60%, #000)); box-shadow: 0 12px 0 color-mix(in srgb, var(--pc) 45%, #000), 0 22px 30px rgba(0,0,0,.5), inset 0 6px 0 rgba(255,255,255,.55), inset 0 -8px 0 rgba(0,0,0,.18); text-shadow: 0 5px 0 rgba(0,0,0,.35); }
.dice .dice-shine { position: absolute; left: 12%; top: 8%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(2px); pointer-events: none; }
.dice.spin { animation: diceBob .5s ease-in-out infinite; }
.dice.hit { animation: diceHit .45s cubic-bezier(.2, 1.8, .4, 1); }
.dice:focus-visible { outline: 5px solid #fff; outline-offset: 6px; }
@keyframes diceBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes diceHit { 0% { transform: translateY(-30px) scale(1.25); } 100% { transform: none; } }
.dice-wrap.boar .dice { --pc: #8a5a2a; }
.dice-hint { font-size: 18px; font-weight: 800; padding: 6px 16px; border-radius: 16px; background: rgba(42,18,80,.85); text-align: center; }

/* speech bubble */
.say { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 18; width: min(760px, 94vw); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 26px; background: var(--cream); color: var(--ink); box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 70%, #000), 0 14px 30px rgba(0,0,0,.4), inset 0 0 0 4px var(--pc); cursor: pointer; }
.say.in { animation: sayIn .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes sayIn { from { transform: translate(-50%, 40px) scale(.9); opacity: 0; } }
.say canvas { flex: none; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 40%, #fff); }
.say-body b { font-size: 17px; color: color-mix(in srgb, var(--pc) 80%, #000); }
.say-body p { margin: 2px 0 0; font-size: clamp(16px, 2.4vw, 21px); font-weight: 700; line-height: 1.25; min-height: 2.5em; }

/* choices */
.choice { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); z-index: 19; width: min(900px, 96vw); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 14px 16px; border-radius: 28px; background: rgba(36, 14, 74, .88); box-shadow: inset 0 0 0 3px var(--pc), 0 14px 30px rgba(0,0,0,.45); }
.choice.in { animation: sayIn .3s cubic-bezier(.2, 1.5, .4, 1); }
.choice h3 { margin: 0; font-size: clamp(18px, 3vw, 26px); text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.choice-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-height: 52vh; overflow-y: auto; padding: 4px 6px 10px; }
.choice.bot .btn { filter: none; opacity: .92; }
.choice-btns .btn.ch { flex-direction: row; gap: 8px; }
.choice-btns .btn.ch small { display: block; }
.choice-btns.layout-items .btn.ch { flex-direction: column; align-items: flex-start; text-align: left; width: min(400px, 100%); --b: #26a6da; --bd: #136a8c; }
.choice-btns.layout-items .btn.ch.sm { --b: #7a5cff; --bd: #4a2fc0; align-items: center; width: auto; }
.choice-btns.layout-grid { display: grid; grid-template-columns: repeat(5, 64px); }
.choice-btns.layout-grid .btn { min-width: 0; padding: 8px 0 10px; font-size: 26px; --b: var(--gold); --bd: var(--gold-d); --bt: #4a2a00; }
.choice-btns.layout-arrows .btn { --b: var(--green); --bd: var(--green-d); min-width: 170px; font-size: 22px; flex-direction: column; }
.choice-btns .btn.pig { flex-direction: column; }
.choice-btns .btn.pig canvas { width: 40px; height: 40px; }
.choice-btns .btn.sel { transform: translateY(-3px) scale(1.04); }

/* ---------------- overlays ---------------- */
.screen.over { z-index: 30; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(20, 6, 46, .55); }
.screen.over.gold-bg { background: radial-gradient(circle, rgba(255,214,90,.55), rgba(40,10,60,.75)); }
.screen.over.boar-bg { background: radial-gradient(circle, rgba(150,90,40,.5), rgba(30,10,10,.75)); }
.screen.over.party-bg { background: radial-gradient(ellipse at 50% 20%, #9b4dff, #2a0e64 70%); }
.card-pop { animation: cardPop .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes cardPop { from { transform: scale(.6) translateY(30px); opacity: 0; } }
.colors, .picker, .award, .results, .intro { position: relative; width: min(860px, 96vw); max-height: 96%; overflow-y: auto; padding: 18px 20px 22px; border-radius: 32px; text-align: center; background: linear-gradient(180deg, #ffffff, #fff1dc); color: var(--ink); box-shadow: 0 10px 0 #b38a5a, 0 24px 50px rgba(0,0,0,.5), inset 0 0 0 5px #ffd34a; }
.colors h2, .picker h2, .award h2, .results h2 { margin: 4px 0 12px; font-size: clamp(24px, 4.6vw, 40px); color: #ff4f8b; paint-order: stroke; -webkit-text-stroke: 6px #fff; text-shadow: 0 4px 0 #c4185a33; }
.col-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.col-pig { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 22px; animation: cardPop .5s both; animation-delay: var(--d); }
.col-pig.blue { background: radial-gradient(circle, #9cc6ff, #3d8bff); box-shadow: 0 5px 0 #1e55c0; }
.col-pig.red { background: radial-gradient(circle, #ffb0b8, #ff4d5e); box-shadow: 0 5px 0 #b81c2c; }
.col-pig.gold { background: radial-gradient(circle, #fff3a0, #ffcc33); box-shadow: 0 5px 0 #c98a00; }
.col-pig b { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.col-kind { font-size: clamp(22px, 4vw, 34px); font-weight: 900; margin: 14px 0 0; }
.intro-badge { display: inline-block; margin: -4px 0 6px; padding: 4px 14px; border-radius: 14px; background: linear-gradient(#ff8fb8, #ff4f8b); color: #fff; font-weight: 900; box-shadow: 0 3px 0 #c4185a; }
.reel { position: relative; height: 190px; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, #3a1784, #22104a); box-shadow: inset 0 6px 14px rgba(0,0,0,.5); }
.reel-strip { position: absolute; left: 0; top: 14px; display: flex; gap: 14px; will-change: transform; }
.reel-card { flex: none; width: 220px; padding: 6px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 5px 0 #b38a5a; display: flex; flex-direction: column; gap: 4px; }
.reel-card canvas { width: 208px; height: 117px; border-radius: 12px; display: block; }
.reel-card b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-card.win { box-shadow: 0 0 0 5px #ffd34a, 0 0 30px 8px #ffd34a; transform: scale(1.06); transition: transform .3s; }
.reel-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(#ffd34a, #ff8a1a); box-shadow: 0 0 12px #ffd34a; pointer-events: none; }
.reel-name { font-size: clamp(22px, 4vw, 32px); font-weight: 900; margin: 12px 0 0; }

.truffle-moment, .swipe-moment { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.truffle-moment .rays { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255,240,170,.35) 0 10deg, transparent 10deg 20deg); animation: spin 8s linear infinite; border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); }
@keyframes spin { to { transform: rotate(360deg); } }
.tm-art { position: relative; display: flex; align-items: flex-end; gap: 8px; animation: cardPop .6s cubic-bezier(.2, 1.8, .4, 1); }
.tm-art .truffle-ic { animation: float 1.6s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(120,60,0,.6)); }
@keyframes float { 50% { transform: translateY(-14px) rotate(4deg); } }
.tm-pig { border-radius: 50%; }
.truffle-moment h2, .swipe-moment p { position: relative; font-size: clamp(26px, 5vw, 46px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 #8a5a00, 0 0 20px #ffcc33; margin: 10px 0; }
.sw-boar { animation: dash .9s cubic-bezier(.2, 1, .3, 1); }
@keyframes dash { from { transform: translateX(110vw) rotate(-20deg); } 70% { transform: translateX(-20px) rotate(6deg); } }
.sw-word { font-size: clamp(60px, 14vw, 130px); font-weight: 900; color: #ffcf6b; paint-order: stroke; -webkit-text-stroke: 10px #5a2a0a; transform: rotate(-8deg); animation: cardPop .4s .3s both cubic-bezier(.2, 2, .4, 1); }
.swipe-moment.big .sw-word { color: #ffe14a; }
.swipe-moment p { font-size: clamp(18px, 3.4vw, 30px); text-shadow: 0 3px 0 #3a1a00; max-width: 90vw; }
.sw-victim { position: absolute; left: -80px; top: 10px; animation: wobble .4s 3; border-radius: 50%; }
@keyframes wobble { 50% { transform: rotate(-14deg) translateX(-8px); } }
body.shake .pp-app { animation: shake .45s; }
@keyframes shake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }

.screen.over.boss-bg { background: radial-gradient(circle at 50% 40%, rgba(255,120,40,.55), rgba(40,0,20,.85)); }
.boss-moment { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bm-king { animation: kingDrop .7s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)); }
.bm-king canvas { border-radius: 50%; box-shadow: 0 0 0 6px #ffcc33, 0 0 40px 10px rgba(255,180,40,.7); }
@keyframes kingDrop { from { transform: translateY(-120vh) scale(1.4); } 70% { transform: translateY(10px) scale(.95); } }
.bm-word { font-size: clamp(44px, 10vw, 110px); font-weight: 900; color: #ffcc33; paint-order: stroke; -webkit-text-stroke: 10px #5a1a00; animation: cardPop .5s .5s both cubic-bezier(.2, 2, .4, 1); }
.boss-moment p { font-size: clamp(18px, 3.2vw, 28px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 #3a0a00; max-width: 90vw; margin: 6px 0 0; }
.award .aw-icon { font-size: 72px; animation: float 1.5s infinite; }
.aw-what { font-size: 20px; font-weight: 800; }
.aw-who { display: flex; justify-content: center; gap: 14px; min-height: 140px; align-items: center; }
.aw-pig { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 22px; background: var(--pc); color: #fff; animation: cardPop .5s cubic-bezier(.2, 1.8, .4, 1); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.aw-who p { font-size: 22px; font-weight: 900; }
.aw-gain { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 22px; font-weight: 900; }

/* results & intro (host.js) */
.results .res-line { font-size: clamp(17px, 2.8vw, 22px); font-weight: 800; }
.res-list { list-style: none; margin: 10px auto; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.res-list li { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, #fff), #fff); box-shadow: inset 0 0 0 3px var(--pc); font-size: 20px; }
.res-list li.place-1 { transform: scale(1.04); box-shadow: inset 0 0 0 4px #ffcc33, 0 0 18px #ffcc33; }
.res-list canvas { width: 46px; height: 46px; }
.res-list .medal { font-size: 26px; }
.res-list b { flex: 1; text-align: left; }
.res-list .gain { font-weight: 900; color: #1d8a39; }
.res-list .gain.neg { color: #b81c2c; }
.tm { font-style: normal; font-size: 12px; font-weight: 900; padding: 2px 7px; border-radius: 8px; color: #fff; }
.team-a .tm, .tm.team-a { background: var(--blue); } .tm.team-b { background: var(--red); }
.intro-go { display: flex; justify-content: center; margin-top: 12px; }
.intro-pic { float: right; width: 240px; height: 135px; margin: 0 0 8px 12px; border-radius: 16px; box-shadow: 0 0 0 4px #ffd34a, 0 6px 14px rgba(0,0,0,.3); transform: rotate(2deg); }
@media (max-width: 760px), (max-height: 620px) { .intro-pic { display: none; } }
.intro .intro-kind { font-weight: 900; font-size: 16px; color: #7a3fd8; }
.intro-name { margin: 2px 0 6px; font-size: clamp(28px, 5.4vw, 48px); color: #ff4f8b; paint-order: stroke; -webkit-text-stroke: 6px #fff; }
.intro-emoji { -webkit-text-stroke: 0; }
.intro-how { font-size: clamp(17px, 2.8vw, 23px); font-weight: 800; margin: 4px 0 10px; }
.intro-stake { font-weight: 900; color: #c4185a; font-size: 18px; }
.vs-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.vs-row .side { display: flex; gap: 6px; padding: 6px 8px; border-radius: 20px; }
.vs-row .side.team-a { background: #d8e6ff; box-shadow: inset 0 0 0 3px var(--blue); }
.vs-row .side.team-b { background: #ffd8dc; box-shadow: inset 0 0 0 3px var(--red); }
.vs-row .side.all { background: #fff3c4; box-shadow: inset 0 0 0 3px #ffcc33; }
.vs-row .side.boss-side { background: #3a1a10; }
.vs { font-size: 30px; font-weight: 900; color: #ff4f8b; }
.vs.small { font-size: 16px; color: #9a7ab8; }
.pchip { display: flex; flex-direction: column; align-items: center; font-size: 14px; }
.pchip canvas { width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--pc, #c98a4a) 35%, #fff); box-shadow: 0 0 0 3px var(--pc, #c98a4a); }
.pchip.boss b { color: #ffcc33; }
.pchip i { font-style: normal; font-size: 11px; }
.ctrl-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.ctrl-list li { padding: 6px 10px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 18%, #fff); box-shadow: inset 4px 0 0 var(--pc); text-align: left; }
.ready-tag { float: right; font-size: 13px; color: #7a5a9a; }
.ready-tag.on { color: #1d8a39; font-weight: 900; }
.all-bots { font-weight: 800; color: #7a5a9a; }
.intro.is-boss, .results.is-boss { box-shadow: 0 10px 0 #7a5a00, 0 24px 50px rgba(0,0,0,.5), inset 0 0 0 6px #ffcc33; background: linear-gradient(180deg, #fff8d8, #ffe39a); }

.podium { width: min(1000px, 98vw); display: flex; flex-direction: column; align-items: center; gap: 8px; max-height: 100%; overflow-y: auto; }
.pod-title { margin: 0; font-size: clamp(26px, 5vw, 50px); text-align: center; color: #fff3a0; text-shadow: 0 4px 0 #6a3a00, 0 0 24px #ffcc33; }
.pod-cv { width: min(100%, calc((100vh - 300px) * 960 / 460)); aspect-ratio: 960 / 460; height: auto; }
.pod-table { display: grid; gap: 3px; width: min(560px, 96%); }
.pod-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; padding: 2px 14px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 40%, #2a1060); font-weight: 800; font-size: 15px; }
/* short and wide (a phone on its side, a small laptop): the podium on the left, the table and buttons on the right */
@media (max-height: 600px) and (min-aspect-ratio: 4/3) {
  .podium { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; align-items: center; }
  .pod-title { grid-column: 1 / -1; font-size: clamp(22px, 6vh, 40px); }
  .pod-cv { grid-row: 2 / 4; width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
  .pod-table { width: 100%; }
  .pod-btns .btn.big { min-height: 48px; font-size: 20px; padding: 8px 20px 10px; }
}
.pod-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-bottom: var(--safe-b); }

/* ---------------- the mini-game stage ---------------- */
.screen.mg { background: #0e0622; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 40; }
.mg-box { position: relative; flex: none; }
.mg-cv { display: block; width: 100%; height: 100%; outline: none; background: #000; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.mg-count { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: clamp(60px, 18vmin, 170px); font-weight: 900; color: #fff; paint-order: stroke; -webkit-text-stroke: 12px #2a1250; text-shadow: 0 10px 0 rgba(0,0,0,.35); pointer-events: none; white-space: nowrap; }
.mg-count.pop { animation: countPop .7s cubic-bezier(.2, 1.8, .4, 1); }
.mg-count.go { color: #7cff6b; }
.mg-count.finish { color: #ffd34a; }
@keyframes countPop { from { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } 40% { opacity: 1; } }
.mg-pause { position: absolute; right: 6px; top: 6px; z-index: 5; width: 34px; height: 34px; font-size: 15px; opacity: .55; box-shadow: 0 2px 0 #34178c, 0 3px 8px rgba(0,0,0,.4); }
.mg-pause:hover, .mg-pause:focus-visible { opacity: 1; }
.mg-over { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(14, 4, 34, .55); }

/* the touch pad */
.pad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; pointer-events: none; }
.pad-half { position: relative; flex: 1; display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 14px calc(14px + var(--safe-b)); }
.stick-zone { position: relative; pointer-events: auto; width: 46%; height: 100%; min-height: 170px; touch-action: none; }
.stick-zone[data-none] { visibility: hidden; }
.stick-base { position: absolute; left: 110px; top: 50%; width: clamp(120px, 26vmin, 170px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.28)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.35); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--pc) 70%, #fff) 45%, var(--pc)); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.stick-zone.on .stick-base { box-shadow: inset 0 0 0 4px #fff, 0 0 20px var(--pc); }
.stick-hint { position: absolute; left: 110px; bottom: 4px; transform: translateX(-50%); font-size: 14px; opacity: .7; }
.pad-btns { display: flex; align-items: flex-end; gap: 14px; pointer-events: auto; }
.padbtn { width: clamp(78px, 17vmin, 112px); aspect-ratio: 1; border: 0; border-radius: 50%; font: 900 32px/1 var(--font); color: #fff; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #fff9, transparent 40%), linear-gradient(180deg, #ff6fa8, #e0287a); box-shadow: 0 7px 0 #8a0a44, 0 10px 18px rgba(0,0,0,.4); }
.padbtn small { font-size: 11px; font-weight: 800; max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.padbtn.pad-b { width: clamp(62px, 13vmin, 88px); margin-bottom: 40px; background: radial-gradient(circle at 35% 28%, #fff9, transparent 40%), linear-gradient(180deg, #6fb4ff, #2f6fe0); box-shadow: 0 6px 0 #133a8a, 0 10px 18px rgba(0,0,0,.4); font-size: 24px; }
.padbtn[data-off] { opacity: .35; }
.padbtn.down { transform: translateY(5px); box-shadow: 0 2px 0 #8a0a44; }
/* phone portrait: the game at the top, the pad below it */
.screen.mg.pad-below { justify-content: flex-start; }
.screen.mg.pad-below .pad { top: auto; height: calc(100% - var(--mgh, 50%)); position: absolute; }
.screen.mg.pad-below .pad-half { align-items: center; }
.screen.mg.pad-below .stick-zone { height: 100%; }
/* landscape: the game fills the screen and the pad floats over its corners */
.screen.mg.pad-over .pad { height: 62%; }
.screen.mg.pad-over .pad-half { opacity: .9; }
.screen.mg.pad-two .pad-half.left { border-right: 2px dashed rgba(255,255,255,.2); }
.screen.mg.pad-two .stick-zone { width: 50%; }
.screen.mg.pad-two .padbtn.pad-b { display: none; }

/* ---------------- arcade & records ---------------- */
.arc-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.arc-tip { margin: 0; font-weight: 700; opacity: .9; }
.arc-count { font-weight: 800; opacity: .85; }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.arc-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 10px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--font); background: #fff; box-shadow: 0 6px 0 #b38a5a, 0 10px 18px rgba(0,0,0,.35); }
.arc-card canvas { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 14px; display: block; }
.arc-card b { font-size: 16px; padding: 0 4px; }
.arc-card small { padding: 0 4px; color: #7a3fd8; font-weight: 800; }
.arc-card .arc-rec { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 10px; background: rgba(42,18,80,.85); color: #fff; }
.arc-card.locked { background: #5a4a7a; color: #ddd; cursor: default; }
.arc-q { aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 44px; border-radius: 14px; background: #3a2a5a; }
.arc-card:focus-visible { outline: 4px solid #ffd34a; outline-offset: 3px; }
.arc-empty { grid-column: 1 / -1; font-weight: 800; }
.rec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rec-stats div { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.12); }
.rec-stats b { font-size: 30px; color: #ffe14a; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.trophy { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,.08); opacity: .7; }
.trophy.got { opacity: 1; background: linear-gradient(90deg, rgba(255,204,51,.4), rgba(255,255,255,.08)); }
.trophy span { grid-row: 1 / 3; font-size: 30px; display: grid; place-items: center; }
.trophy small { opacity: .85; }
.rec-mgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rec-mg { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.1); }
.rec-mg span { color: #ffe14a; font-weight: 800; }

/* ---------------- modal, toasts, the wipe ---------------- */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(14, 4, 34, .7); }
.modal .card { width: min(520px, 96vw); max-height: 94vh; overflow-y: auto; padding: 18px 20px 20px; border-radius: 28px; background: linear-gradient(180deg, #ffffff, #fff1dc); color: var(--ink); box-shadow: 0 10px 0 #b38a5a, 0 24px 50px rgba(0,0,0,.5), inset 0 0 0 5px #9b4dff; animation: cardPop .35s cubic-bezier(.2, 1.5, .4, 1); }
.modal h3 { margin: 0 0 10px; font-size: 28px; text-align: center; color: #7a3fd8; }
.modal-body { font-size: 17px; font-weight: 700; }
.modal-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; align-items: stretch; }
.howto p { margin: 0 0 9px; font-size: 16px; line-height: 1.3; }
.howto b { color: #7a3fd8; }
.howto-keys { font-size: 14px; color: #6a4a8a; }
.modal .card:has(.howto) { width: min(640px, 96vw); }
.set-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.set-row > span:first-child { width: 110px; font-weight: 900; }
.vol-bar { flex: 1; min-width: 80px; height: 16px; border-radius: 10px; background: #e6d8f7; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.vol-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9b4dff, #ff4f8b); }
.toasts { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 18px; font-weight: 800; background: rgba(42,18,80,.95); box-shadow: 0 4px 0 rgba(0,0,0,.4); animation: cardPop .35s; transition: opacity .5s, transform .5s; }
.toast.gold { background: linear-gradient(#ffe680, #e0a800); color: #4a2a00; }
.toast.out { opacity: 0; transform: translateY(-14px); }
.wipe { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: radial-gradient(circle, #ffcc33 0 20%, #ff4f8b 40%, #9b4dff 70%); }
.wipe.go { animation: wipe .38s ease-out; }
@keyframes wipe { 0% { opacity: .55; clip-path: circle(0% at 50% 50%); } 45% { opacity: .55; clip-path: circle(85% at 50% 50%); } 100% { opacity: 0; clip-path: circle(85% at 50% 50%); } }

/* ---------------- narrow screens ---------------- */
@media (max-width: 720px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-btns { max-height: 64vh; gap: 8px; }
  .choice-btns.layout-items .btn.ch { min-height: 40px; padding: 7px 14px 9px; font-size: 16px; }
  .choice-btns.layout-items .btn.ch small { font-size: 11px; }
  .choice-btns.layout-grid { grid-template-columns: repeat(5, 56px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pcard { padding: 3px 6px 3px 3px; }
  .pc-pic { width: 44px; height: 44px; }
  .pc-pic canvas { width: 44px !important; height: 44px !important; }
  .pc-name { font-size: 14px; }
  .pc-row { font-size: 15px; }
  .round-badge { top: 132px; }
  .steps { top: 170px; }
  .title-wrap { margin-top: -18vh; }
  #pp-play { min-width: 220px; font-size: 28px; }
  .btn.mid { font-size: 17px; }
}
@media (max-height: 480px) {
  .title-wrap { margin-top: -6vh; gap: 1vh; }
  .lg { font-size: clamp(44px, 12vh, 90px); }
  .lg-sub { display: none; }
  .title-menu { gap: 8px; }
  .btn.big { min-height: 50px; font-size: 22px; padding: 8px 26px 10px; }
  #pp-play { font-size: 24px; }
  .btn.mid { min-height: 44px; font-size: 16px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .round-badge { top: 76px; }
  .round-badge b { font-size: 16px; }
  .steps { top: 108px; }
  .say canvas { width: 56px; height: 56px; }
  .say-body p { min-height: 0; font-size: 15px; }
  .choice { padding: 8px 10px 10px; gap: 6px; }
  .choice-btns { max-height: 40vh; }
  .dice { width: clamp(80px, 26vh, 120px); font-size: clamp(44px, 14vh, 70px); }
  .colors, .picker, .award, .results, .intro { padding: 10px 14px 12px; }
  .reel { height: 160px; }
  .intro-how { margin: 2px 0 6px; }
  .ctrl-list { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}