/* =====================================================================================================================
   v009: multiplayer + Big Screen + menu polish. Loaded last; builds on the "dusk glass" kit (cream ink, indigo glass,
   sunset orange primary, teal secondary). Spacing on the 8pt grid (--s1..--s4), radii --r1..--r3.
   ===================================================================================================================== */
:root { --glass: rgba(30, 20, 82, .82); --glass2: rgba(24, 16, 66, .6); --line: rgba(255, 243, 224, .18); --line2: rgba(255, 243, 224, .1); --cream: #fff3e0; --cream2: rgba(255, 243, 224, .7); --gold: #ffc857; --orange: #ff9b4a; --teal: #35d0c6; --night: #150f3a; }

/* ---------- shared bits ---------- */
.pp-av { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--pc, #ff9a4d) 55%, #fff) 0%, var(--pc, #ff9a4d) 60%, color-mix(in srgb, var(--pc, #ff9a4d) 70%, #000) 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 10px rgba(6, 2, 28, .35); overflow: hidden; }
.pp-av img { width: 118%; height: 118%; margin-top: 8%; object-fit: contain; filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.pp-av.off { filter: grayscale(1) brightness(.6); opacity: .45; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(10, 4, 40, .4); border: 1px solid var(--line2); }
.seg button { flex: 1; height: 40px; border-radius: 14px; font: 400 18px/1 var(--display); color: var(--cream2); letter-spacing: .02em; transition: background .2s, color .2s, transform .12s; }
.seg button.sel { color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f, inset 0 1px 0 rgba(255, 255, 255, .6); }
.vx-field { display: flex; flex-direction: column; gap: 6px; }
.vx-field span { font: 800 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cream2); padding-left: 4px; }
.vx-field input, .vx-join input, .vx-name input { height: 52px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(10, 4, 40, .45); color: var(--cream); font: 800 18px/1 var(--body); padding: 0 16px; outline: none; width: 100%; min-width: 0; -webkit-user-select: text; user-select: text; transition: border-color .2s, box-shadow .2s; }
.vx-field input:focus, .vx-join input:focus, .vx-name input:focus { border-color: rgba(255, 200, 120, .8); box-shadow: 0 0 0 4px rgba(255, 155, 74, .18); }
.vx-field input::placeholder, .vx-join input::placeholder { color: rgba(255, 243, 224, .35); }
.vx-join { display: flex; gap: 10px; }
.vx-join input { flex: 1; text-align: center; font: 400 26px/1 var(--display); letter-spacing: .35em; text-transform: uppercase; padding: 0 0 0 .35em; }
.vx-join .btn { width: auto; flex: none; padding: 0 22px; height: 52px; }

/* ---------- VERSUS ---------- */
.vx-scroll { display: flex; flex-direction: column; gap: var(--s2); padding-left: calc(var(--sal) + 20px); padding-right: calc(var(--sar) + 20px); }
.vx-scroll > * { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
.vx-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 22px; background: rgba(10, 4, 40, .5); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); --ti: 0; }
.vx-tabs .vx-ink { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 17px; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f, 0 8px 18px rgba(255, 122, 61, .35), inset 0 1px 0 rgba(255, 255, 255, .6); transform: translateX(calc(var(--ti) * 100%)); transition: transform .32s cubic-bezier(.3, 1.3, .5, 1); }
.vx-tabs button { position: relative; z-index: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 400 14px/1 var(--display); letter-spacing: .03em; color: var(--cream2); transition: color .2s; }
.vx-tabs button svg { width: 22px; height: 22px; }
.vx-tabs button.sel { color: #2a1450; }
.vx-panel { display: flex; flex-direction: column; gap: var(--s2); animation: vxIn .35s cubic-bezier(.2, 1, .3, 1); }
.vx-panel[hidden] { display: none; }
@keyframes vxIn { from { opacity: 0; transform: translateY(10px); } }
.vx-hero { text-align: center; padding: 6px 8px 0; }
.vx-hero h3 { margin: 10px 0 6px; font: 400 26px/1.05 var(--display); color: var(--cream); text-shadow: 0 2px 0 #e4553b, 0 8px 20px rgba(10, 4, 40, .5); }
.vx-hero p { margin: 0 auto; max-width: 330px; font: 800 14px/1.4 var(--body); color: var(--cream2); }
.vx-puffs { display: flex; justify-content: center; gap: 4px; height: 64px; align-items: flex-end; }
.vx-puffs .pp-av { width: 54px; height: 54px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .3s, filter .3s; }
.vx-puffs .pp-av.on { animation: bob 2.4s ease-in-out infinite; }
.vx-puffs .pp-av:nth-child(2) { --pc: #4fc3ff; animation-delay: -.6s; } .vx-puffs .pp-av:nth-child(1) { --pc: #ff9a4d; } .vx-puffs .pp-av:nth-child(3) { --pc: #ffd23f; animation-delay: -1.2s; } .vx-puffs .pp-av:nth-child(4) { --pc: #ff6fb5; animation-delay: -1.8s; }
.vx-puffs .pp-av.off { transform: scale(.8); }
@keyframes bob { 50% { transform: translateY(-7px); } }
.vx-block { display: flex; flex-direction: column; gap: 12px; padding: var(--s2); border-radius: var(--r3); background: var(--glass); border: 1.5px solid var(--line); box-shadow: 0 6px 0 rgba(8, 4, 34, .5), 0 14px 34px rgba(6, 2, 28, .35), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.vx-row { display: flex; align-items: center; gap: 12px; }
.vx-label { font: 400 18px/1 var(--display); color: var(--cream); flex: none; }
.vx-count { flex: 1; }
.vx-names { display: flex; flex-direction: column; gap: 8px; }
.vx-name { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 6px; border-radius: 20px; background: rgba(10, 4, 40, .35); border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.vx-name .pp-av { width: 40px; height: 40px; }
.vx-name input { height: 44px; border: 0; background: transparent; padding: 0 6px; font-size: 17px; }
.vx-name input:focus { box-shadow: none; }
.vx-key { flex: none; width: 34px; height: 34px; margin-right: 6px; border-radius: 10px; display: grid; place-items: center; font: 400 16px/1 var(--display); color: #2a1450; background: var(--pc); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.vx-key[hidden] { display: none; }
.vx-zonemap { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.vx-zonemap p { margin: 0; font: 800 12.5px/1.35 var(--body); color: var(--cream2); }
.vx-device { flex: none; width: 54px; height: 92px; border-radius: 12px; padding: 5px; background: #0d0830; border: 2px solid rgba(255, 243, 224, .45); box-shadow: 0 6px 14px rgba(6, 2, 28, .4); }
.vx-zones { display: flex; height: 100%; gap: 2px; border-radius: 7px; overflow: hidden; }
.vx-zones i { flex: 1; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 20%, transparent), color-mix(in srgb, var(--pc) 70%, transparent)); padding-bottom: 4px; }
.vx-zones b { font: 400 10px/1 var(--display); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vx-go { height: 60px; font-size: 24px; }
.vx-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--r3); text-align: left; background: var(--glass); border: 1.5px solid var(--line); box-shadow: 0 6px 0 rgba(8, 4, 34, .5), 0 14px 30px rgba(6, 2, 28, .3), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .12s; }
button.vx-choice:active { transform: translateY(3px); }
button.vx-choice { background: linear-gradient(180deg, rgba(255, 155, 74, .3), rgba(255, 122, 61, .14)), var(--glass); border-color: rgba(255, 200, 120, .55); }
.vx-cico { width: 52px; height: 52px; border-radius: 17px; flex: none; display: grid; place-items: center; color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f; }
.vx-choice.join .vx-cico { background: linear-gradient(180deg, #8ff0e6, #35d0c6); box-shadow: 0 3px 0 #127a80; color: #0e3a52; }
.vx-cico svg { width: 28px; height: 28px; }
.vx-ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vx-ctext b { font: 400 19px/1.1 var(--display); color: var(--cream); }
.vx-ctext small { font: 800 12.5px/1.35 var(--body); color: var(--cream2); }
.vx-chev { width: 22px; height: 22px; color: var(--cream2); }
.vx-choice.join .vx-field, .vx-choice.join .vx-join { flex-basis: 100%; }
.vx-or { display: flex; align-items: center; gap: 12px; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cream2); }
.vx-or::before, .vx-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.vx-tip { margin: 0; text-align: center; font: 700 12.5px/1.4 var(--body); color: var(--cream2); } .vx-tip b { color: var(--gold); }
.vx-art { display: flex; justify-content: center; } .vx-tvart { width: 210px; height: auto; filter: drop-shadow(0 10px 18px rgba(6, 2, 28, .45)); }
.vx-globe { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #0e3a52; background: radial-gradient(circle at 35% 30%, #c8fff8, #35d0c6 60%, #17829c); box-shadow: 0 0 0 6px rgba(53, 208, 198, .18), 0 10px 26px rgba(6, 2, 28, .45); }
.vx-globe svg { width: 40px; height: 40px; }
.vx-lobby { display: flex; flex-direction: column; gap: 12px; padding: var(--s3) var(--s2) var(--s2); border-radius: var(--r3); background: var(--glass); border: 1.5px solid var(--line); text-align: center; }
.vx-lobby[hidden] { display: none; }
.vx-code-l { margin: 0; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cream2); }
.vx-code { margin: 0; font: 400 54px/1 var(--display); letter-spacing: .18em; color: var(--gold); text-shadow: 0 3px 0 #b8421f, 0 0 26px rgba(255, 200, 87, .35); padding-left: .18em; }
.vx-peers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vx-peer { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 22px; background: rgba(10, 4, 40, .4); border: 1.5px solid color-mix(in srgb, var(--pc, #fff) 50%, transparent); }
.vx-peer .pp-av { width: 30px; height: 30px; } .vx-peer b { font: 400 16px/1 var(--display); color: var(--cream); } .vx-peer small { font: 800 11px/1 var(--body); color: var(--cream2); text-transform: uppercase; letter-spacing: .08em; }
.vx-peer.empty { border-style: dashed; border-color: var(--line); opacity: .6; } .vx-peer.empty .pp-av { background: rgba(255, 243, 224, .1); box-shadow: none; }
.vx-status { margin: 0; font: 800 14px/1.35 var(--body); color: var(--cream2); }
.vx-lobby-row { display: flex; gap: 10px; } .vx-lobby-row .btn { flex: 1; }
.vx-rules { list-style: none; margin: 4px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vx-rules li { padding: 6px 12px; border-radius: 14px; background: rgba(10, 4, 40, .35); border: 1px solid var(--line2); font: 800 12px/1 var(--body); color: var(--cream2); }
.vx-rules b { color: var(--gold); font: 400 14px/1 var(--display); margin-right: 2px; }
#versus .vx-panel[data-panel="big"] ~ .vx-rules { display: flex; }

/* ---------- sheets: endless picker + big screen setup ---------- */
.screen.overlay.sheet { align-items: flex-end; padding-bottom: calc(var(--sab) + 12px); }
@media (min-height: 760px), (min-width: 700px) { .screen.overlay.sheet { align-items: center; } }
.ep-modal, .bs-modal { width: min(100%, 420px); gap: 14px; padding: 26px 18px 18px; }
.ep-close { position: absolute; top: 12px; right: 12px; width: 40px !important; height: 40px !important; }
.ep-modal h2, .bs-modal h2 { font-size: 30px; }
.ep-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--r3); text-align: left; overflow: hidden; border: 1.5px solid var(--line); box-shadow: 0 6px 0 rgba(8, 4, 34, .55), 0 14px 30px rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .12s; }
.ep-card:active { transform: translateY(3px); }
.ep-card.solo { background: radial-gradient(120% 140% at 0% 0%, rgba(143, 240, 230, .35), rgba(23, 130, 156, .25) 55%, rgba(16, 40, 90, .5)); border-color: rgba(168, 243, 234, .5); }
.ep-card.party { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 210, 122, .4), rgba(255, 122, 61, .25) 55%, rgba(80, 30, 90, .5)); border-color: rgba(255, 200, 120, .6); }
.ep-art { position: relative; width: 84px; height: 84px; flex: none; border-radius: 22px; display: grid; place-items: center; background: rgba(10, 4, 40, .4); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.ep-card.solo .ep-art img { width: 74px; height: 74px; transform: rotate(14deg); animation: dive 2.6s ease-in-out infinite; }
@keyframes dive { 50% { transform: rotate(20deg) translate(4px, 6px); } }
.ep-art i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); animation: rise 2.4s linear infinite; }
.ep-art .b1 { width: 8px; height: 8px; left: 12px; bottom: -10px; } .ep-art .b2 { width: 5px; height: 5px; left: 24px; bottom: -10px; animation-delay: -.8s; } .ep-art .b3 { width: 10px; height: 10px; right: 12px; bottom: -10px; animation-delay: -1.6s; }
@keyframes rise { to { transform: translateY(-110px); opacity: 0; } }
.ep-tv { width: 72px; height: 48px; border-radius: 8px; border: 2.5px solid rgba(255, 243, 224, .8); background: linear-gradient(180deg, #3a2a8a, #f08a5d); display: flex; align-items: center; justify-content: center; position: relative; }
.ep-tv::after { content: ''; position: absolute; bottom: -10px; left: 50%; width: 26px; height: 4px; margin-left: -13px; border-radius: 3px; background: rgba(255, 243, 224, .7); }
.ep-tv img { width: 26px; height: 26px; margin: 0 -3px; filter: hue-rotate(var(--hue)); }
.ep-tv img:nth-child(2) { margin-top: -12px; } .ep-tv img:nth-child(3) { margin-top: 10px; }
.ep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ep-text b { font: 400 22px/1 var(--display); color: var(--cream); display: flex; align-items: center; gap: 8px; }
.ep-text small { font: 800 12.5px/1.35 var(--body); color: var(--cream2); }
.ep-text em { align-self: flex-start; font: 800 11px/1 var(--body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); padding: 5px 9px; border-radius: 10px; background: rgba(10, 4, 40, .45); }
.ep-new { font: 400 11px/1 var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #2a1450; background: var(--gold); padding: 4px 7px; border-radius: 8px; }
.ep-chev { width: 22px; height: 22px; color: var(--cream2); }
.bs-modal .vx-choice { box-shadow: 0 5px 0 rgba(8, 4, 34, .5), inset 0 1px 0 var(--glass-hi); }
html.reduce-motion .ep-art img, html.reduce-motion .ep-art i, html.reduce-motion .vx-puffs .pp-av.on { animation: none; }

/* ---------- PARTY gameplay HUD ---------- */
#party { touch-action: none; }
.pt-zones { position: absolute; inset: 0; display: flex; z-index: 1; }
.pt-zones[hidden] { display: none; }
.pt-zone { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--sab) + 18px); border-left: 1.5px dashed rgba(255, 243, 224, .14); }
.pt-zone:first-child { border-left: 0; }
.pt-zone::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pc) 22%, transparent)); opacity: .9; transition: opacity .5s; pointer-events: none; }
.pt-zone::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--pc) 55%, transparent), transparent); opacity: 0; pointer-events: none; }
.pt-zone.hit::after { animation: zhit .32s ease-out; }
@keyframes zhit { 0% { opacity: .9; } 100% { opacity: 0; } }
.pt-zl { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 22px; background: rgba(10, 4, 40, .55); border: 1.5px solid color-mix(in srgb, var(--pc) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .5s, opacity .5s, padding .5s; max-width: 92%; }
.pt-zl .pp-av { width: 30px; height: 30px; }
.pt-zl b { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 14px/1 var(--display); color: var(--cream); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-zl small { position: absolute; left: 42px; bottom: 6px; font: 800 9px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--pc); }
.pt-zl b { padding-bottom: 9px; }
#party[data-n="3"] .pt-zl, #party[data-n="4"] .pt-zl { padding-right: 8px; } #party[data-n="4"] .pt-zl b { font-size: 12px; } #party[data-n="4"] .pt-zl small { display: none; } #party[data-n="4"] .pt-zl b { padding-bottom: 0; }
@media (max-width: 420px) { #party[data-n="3"] .pt-zl .pp-av, #party[data-n="4"] .pt-zl .pp-av { display: none; } #party[data-n="3"] .pt-zl small { left: 10px; } #party[data-n="3"] .pt-zl, #party[data-n="4"] .pt-zl { padding-left: 10px; } }
.pt-zones.quiet .pt-zl { opacity: .5; transform: scale(.82); }
.pt-zones.quiet .pt-zone::before { opacity: .45; }
.pt-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; padding: calc(var(--sat) + 12px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pt-hud button { pointer-events: auto; }
.pt-top { width: 100%; max-width: 560px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.pt-top .icon-btn[hidden] { visibility: hidden; display: grid; }
.pt-title { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 16px; border-radius: 20px; background: var(--glass2); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 100%; min-width: 0; }
.pt-title small { font: 800 10.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cream2); white-space: nowrap; }
.pt-title b { font: 400 18px/1 var(--display); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.pt-par { justify-self: end; width: 44px; height: 44px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--glass2); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 800 9px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--cream2); white-space: nowrap; }
.pt-par b { display: block; font: 400 19px/1 var(--display); color: var(--gold); letter-spacing: 0; }
#party[data-kind="big"] .pt-par { width: 7vmin; height: 7vmin; min-width: 44px; min-height: 44px; border-radius: 2vmin; }
#party[data-mode="dive"] .pt-par { display: none; }
.pt-cards { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; max-width: 100%; }
.pt-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; min-width: 0; flex: 0 1 132px; padding: 5px 10px 5px 5px; border-radius: 18px; background: var(--glass2); border: 1.5px solid color-mix(in srgb, var(--pc) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(6, 2, 28, .3); transition: opacity .3s, filter .3s, transform .2s; }
.pt-card .pp-av { grid-row: 1 / 3; width: 32px; height: 32px; }
.pt-nm { font: 800 11.5px/1.1 var(--body); color: var(--cream2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-val { font: 400 20px/1 var(--display); color: var(--cream); display: flex; gap: 1px; align-items: center; }
.pt-val svg { width: 14px; height: 14px; color: rgba(255, 243, 224, .2); } .pt-val svg.on { color: #ff6f9a; filter: drop-shadow(0 0 3px rgba(255, 111, 154, .6)); }
.pt-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.pt-sub { font: 800 9.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--cream2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-card.bump { animation: cardBump .35s ease-out; } @keyframes cardBump { 30% { transform: scale(1.08); } }
.pt-card[data-st="bubble"] { border-color: rgba(180, 235, 255, .9); box-shadow: 0 0 0 3px rgba(180, 235, 255, .25), 0 4px 12px rgba(6, 2, 28, .3); }
.pt-card[data-st="bubble"] .pt-sub { color: #b4ebff; }
.pt-card[data-st="out"] { opacity: .45; filter: grayscale(.8); }
.pt-card[data-st="away"] { opacity: .6; }
.pt-card[data-st="done"] .pt-flag { display: grid; }
.pt-flag { display: none; position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); place-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.pt-flag::after { content: ''; width: 8px; height: 4px; border-left: 2.5px solid #2a1450; border-bottom: 2.5px solid #2a1450; transform: rotate(-45deg) translate(1px, -1px); }
#party[data-n="4"] .pt-card { padding-right: 6px; } #party[data-n="4"] .pt-sub { display: none; }
@media (max-width: 400px) { #party[data-n="4"] .pt-nm { display: none; } #party[data-n="4"] .pt-card { flex-basis: 70px; } #party[data-n="3"] .pt-sub { display: none; } }
.pt-count { position: absolute; left: 0; right: 0; top: 38%; z-index: 3; text-align: center; pointer-events: none; font: 400 clamp(84px, 26vmin, 220px)/1 var(--display); color: var(--cream); text-shadow: 0 6px 0 #e4553b, 0 16px 40px rgba(10, 4, 40, .55); opacity: 0; }
.pt-count.pop { animation: countPop .9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes countPop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.pt-callout { top: calc(var(--pt-hud-b, 140px) + 18px) !important; z-index: 3; }
.pt-net { position: absolute; left: 50%; bottom: calc(var(--sab) + 18px); transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 14px; background: rgba(255, 107, 107, .9); color: #fff; font: 800 13px/1 var(--body); }
.pt-net[hidden] { display: none; }
.pp-row { display: flex; gap: 10px; } .pp-row .btn { flex: 1; height: 50px; font-size: 18px; }

/* ---------- scoreboard ---------- */
.pb-modal { width: min(100%, 440px); gap: 12px; }
.pb-title { color: var(--cream) !important; text-shadow: 0 3px 0 color-mix(in srgb, var(--pc, #e4553b) 70%, #000) !important; font-size: 32px !important; }
.pb-rows { --nc: 3; display: flex; flex-direction: column; gap: 6px; }
.pb-rows[data-wide="1"] .pb-row { grid-template-columns: 28px minmax(0, 1fr) 62px 54px; }
#ptboard[data-kind="big"] .pb-rows[data-wide="1"] .pb-row { grid-template-columns: 5vmin minmax(0, 1fr) 12vmin 12vmin; }
.pb-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) repeat(var(--nc), 28px) 44px; align-items: center; gap: 6px; padding: 7px 10px 7px 7px; border-radius: 18px; background: rgba(10, 4, 40, .38); border: 1.5px solid color-mix(in srgb, var(--pc, #fff) 30%, transparent); animation: rowIn .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } }
.pb-row.lead { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, transparent), rgba(10, 4, 40, .38)); border-color: color-mix(in srgb, var(--pc) 70%, transparent); }
.pb-row.rdy { box-shadow: 0 0 0 2px #8ff0e6; }
.pb-head { background: none !important; border: 0; padding-top: 0; padding-bottom: 0; animation: none; font: 800 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--cream2); }
.pb-head span { text-align: center; } .pb-head span:nth-child(2) { text-align: left; } .pb-head span.cur { color: var(--gold); }
.pb-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 400 14px/1 var(--display); color: #2a1450; background: var(--mc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.pb-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-who .pp-av { width: 30px; height: 30px; }
.pb-who b { font: 400 17px/1 var(--display); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-c { text-align: center; font: 800 14px/1 var(--body); color: var(--cream2); }
.pb-c.cur { color: var(--cream); font-weight: 900; }
.pb-tot { text-align: right; font: 400 22px/1 var(--display); color: var(--gold); }
.pb-note { margin: 0; text-align: center; font: 800 12.5px/1.35 var(--body); color: var(--cream2); }
.pb-auto { height: 6px; border-radius: 4px; background: rgba(255, 243, 224, .12); overflow: hidden; }
.pb-auto[hidden] { display: none; }
.pb-auto i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8ff0e6, #35d0c6); border-radius: 4px; transition: width .1s linear; }
#ptboard .btn[hidden] { display: none; }

/* ---------- BIG SCREEN (TV / iPad): everything scales with the viewport ---------- */
html.big-mode .pt-hud { padding: max(2vmin, calc(var(--sat) + 10px)) 2.6vmin 0; gap: 1.6vmin; }
#party[data-kind="big"] .pt-top { max-width: none; grid-template-columns: 7vmin 1fr 7vmin; }
#party[data-kind="big"] .pt-top .icon-btn { width: 6vmin; height: 6vmin; min-width: 44px; min-height: 44px; }
#party[data-kind="big"] .pt-title { padding: 1.2vmin 3vmin; border-radius: 3vmin; gap: .6vmin; }
#party[data-kind="big"] .pt-title small { font-size: max(11px, 1.7vmin); }
#party[data-kind="big"] .pt-title b { font-size: max(18px, 3.6vmin); }
#party[data-kind="big"] .pt-par { font-size: max(11px, 1.6vmin); } #party[data-kind="big"] .pt-par b { font-size: max(20px, 3.8vmin); }
#party[data-kind="big"] .pt-cards { gap: 1.4vmin; }
#party[data-kind="big"] .pt-card { flex: 0 1 25vmin; padding: 1vmin 2vmin 1vmin 1vmin; border-radius: 3vmin; column-gap: 1.4vmin; border-width: 3px; }
#party[data-kind="big"] .pt-card .pp-av { width: 6.4vmin; height: 6.4vmin; }
#party[data-kind="big"] .pt-nm { font-size: max(12px, 2vmin); }
#party[data-kind="big"] .pt-val { font-size: max(20px, 4.4vmin); } #party[data-kind="big"] .pt-val svg { width: 3vmin; height: 3vmin; }
#party[data-kind="big"] .pt-sub { display: block !important; font-size: max(9px, 1.5vmin); }
#party[data-kind="big"] .pt-line { gap: 1vmin; }
#party[data-kind="big"] .pt-flag { width: 3.4vmin; height: 3.4vmin; }
#party[data-kind="big"] .pt-nm { display: block !important; }
#ptboard[data-kind="big"] .pb-modal { width: min(92vw, 120vmin); padding: 4vmin; gap: 2vmin; border-radius: 4vmin; }
#ptboard[data-kind="big"] .rs-name { font-size: max(14px, 2.2vmin); }
#ptboard[data-kind="big"] .pb-title { font-size: max(32px, 6vmin) !important; }
#ptboard[data-kind="big"] .pb-row { grid-template-columns: 5vmin minmax(0, 1fr) repeat(var(--nc), 7vmin) 10vmin; gap: 1.4vmin; padding: 1.2vmin 2vmin 1.2vmin 1.2vmin; border-radius: 3vmin; }
#ptboard[data-kind="big"] .pb-rank { width: 4.6vmin; height: 4.6vmin; font-size: 2.6vmin; }
#ptboard[data-kind="big"] .pb-who .pp-av { width: 5.6vmin; height: 5.6vmin; }
#ptboard[data-kind="big"] .pb-who b { font-size: max(17px, 3.4vmin); }
#ptboard[data-kind="big"] .pb-c { font-size: max(14px, 2.6vmin); }
#ptboard[data-kind="big"] .pb-tot { font-size: max(22px, 4.4vmin); }
#ptboard[data-kind="big"] .pb-head { font-size: max(10px, 1.6vmin); }
#ptboard[data-kind="big"] .pb-note { font-size: max(12px, 2vmin); }
#ptboard[data-kind="big"] .btn { height: max(56px, 8vmin); font-size: max(22px, 3.4vmin); }
#ptboard[data-kind="big"] .pb-auto { height: 1vmin; min-height: 6px; }
html.big-mode .callout { font-size: max(30px, 6vmin); }

/* lobby */
#biglobby { display: flex; }
#biglobby::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 50% 40%, rgba(14, 8, 48, .35), rgba(14, 8, 48, .82)); }
.bl-wrap { flex: 1; display: flex; flex-direction: column; gap: 3vmin; padding: max(3vmin, calc(var(--sat) + 12px)) max(4vmin, calc(var(--sar) + 16px)) max(3vmin, calc(var(--sab) + 12px)) max(4vmin, calc(var(--sal) + 16px)); min-height: 0; }
.bl-head { display: flex; align-items: center; gap: 2.4vmin; }
.bl-head .icon-btn { flex: none; }
.bl-title { flex: 1; min-width: 0; }
.bl-title small { font: 800 max(12px, 1.8vmin)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.bl-title h1 { margin: .6vmin 0 .4vmin; font: 400 max(34px, 7vmin)/1 var(--display); color: var(--cream); text-shadow: 0 .6vmin 0 #e4553b, 0 2vmin 5vmin rgba(10, 4, 40, .55); }
.bl-title p { margin: 0; font: 800 max(13px, 2.1vmin)/1.35 var(--body); color: var(--cream2); }
.bl-mode { flex: none; width: max(240px, 34vmin); }
.bl-mode button { height: max(40px, 6vmin); font-size: max(16px, 2.4vmin); }
.bl-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4vmin; align-items: center; }
.bl-join { display: flex; align-items: center; gap: 3.4vmin; padding: 3.4vmin; border-radius: 4vmin; background: var(--glass); border: 2px solid var(--line); box-shadow: 0 1vmin 0 rgba(8, 4, 34, .5), 0 3vmin 6vmin rgba(6, 2, 28, .35), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bl-qr { flex: none; width: min(34vmin, 300px); aspect-ratio: 1; border-radius: 2.4vmin; overflow: hidden; background: #fff; box-shadow: 0 0 0 1vmin rgba(255, 255, 255, .12), 0 1.4vmin 4vmin rgba(6, 2, 28, .45); }
.bl-qr svg { width: 100%; height: 100%; display: block; }
.bl-how { min-width: 0; display: flex; flex-direction: column; gap: 1.4vmin; }
.bl-step { margin: 0; display: flex; align-items: center; gap: 1.4vmin; font: 800 max(13px, 2.2vmin)/1.25 var(--body); color: var(--cream); }
.bl-step b { flex: none; width: max(26px, 4.2vmin); height: max(26px, 4.2vmin); border-radius: 50%; display: grid; place-items: center; font: 400 max(14px, 2.4vmin)/1 var(--display); color: #2a1450; background: var(--gold); }
.bl-step em { font-style: normal; color: var(--gold); word-break: break-all; }
.bl-codel { margin: 1vmin 0 0; font: 800 max(11px, 1.7vmin)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--cream2); }
.bl-code { font: 400 max(48px, 11vmin)/1 var(--display); letter-spacing: .14em; color: var(--gold); text-shadow: 0 .7vmin 0 #b8421f, 0 0 5vmin rgba(255, 200, 87, .4); }
.bl-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vmin; }
.bl-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; min-height: 22vmin; padding: 2.4vmin; border-radius: 3.4vmin; text-align: center; background: rgba(10, 4, 40, .35); border: 2px dashed rgba(255, 243, 224, .2); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s, border-color .3s; }
.bl-slot b { font: 400 max(18px, 3.4vmin)/1 var(--display); color: var(--cream); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-slot small { font: 800 max(11px, 1.7vmin)/1.3 var(--body); color: var(--cream2); }
.bl-slot .pp-av { width: max(54px, 10vmin); height: max(54px, 10vmin); }
.bl-empty { width: max(54px, 10vmin); height: max(54px, 10vmin); border-radius: 50%; display: grid; place-items: center; font: 400 max(22px, 4vmin)/1 var(--display); color: rgba(255, 243, 224, .35); border: 2px dashed rgba(255, 243, 224, .25); }
.bl-slot:not(.on) b { color: var(--cream2); }
.bl-slot.on { border-style: solid; border-color: color-mix(in srgb, var(--pc) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, rgba(10, 4, 40, .5)), rgba(10, 4, 40, .5)); animation: slotIn .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes slotIn { from { transform: scale(.85); } }
.bl-slot.on .pp-av { animation: bob 2.4s ease-in-out infinite; }
.bl-slot.ready { box-shadow: 0 0 0 .6vmin rgba(143, 240, 230, .35), 0 1.4vmin 4vmin rgba(6, 2, 28, .35); border-color: #8ff0e6; }
.bl-slot.away { opacity: .55; }
.bl-check { position: absolute; top: 1.6vmin; right: 1.6vmin; width: max(26px, 4.6vmin); height: max(26px, 4.6vmin); border-radius: 50%; display: none; place-items: center; color: #0e3a52; background: #8ff0e6; box-shadow: 0 .4vmin 0 #127a80; }
.bl-check svg { width: 70%; height: 70%; } .bl-slot.ready .bl-check { display: grid; animation: slotIn .4s cubic-bezier(.3, 1.6, .5, 1); }
.bl-foot { display: flex; align-items: center; gap: 3vmin; }
.bl-status { flex: 1; margin: 0; font: 800 max(14px, 2.4vmin)/1.3 var(--body); color: var(--cream); }
.bl-status.go { color: var(--gold); font: 400 max(22px, 4vmin)/1 var(--display); }
.bl-start { width: auto; flex: none; height: max(56px, 8vmin); padding: 0 5vmin; font-size: max(22px, 3.4vmin); }
.bl-start:disabled { opacity: .45; filter: grayscale(.4); }
@media (orientation: portrait) {
  .bl-main { grid-template-columns: 1fr; align-content: start; gap: 3vmin; }
  .bl-head { flex-wrap: wrap; } .bl-mode { width: 100%; order: 3; }
  .bl-join { flex-direction: row; } .bl-qr { width: min(40vmin, 260px); }
  .bl-slot { min-height: 16vh; }
}
@media (max-height: 520px) and (orientation: landscape) { .bl-slot { min-height: 0; padding: 1.6vmin; } .bl-title p { display: none; } }

/* ---------- PHONE CONTROLLER (v009.2): one big centred button, quiet chrome, the whole screen is the button ---------- */
html.pad-mode, html.pad-mode body { background: #0b0726; }
#pad { --pc: #ff9a4d; --bs: min(74vh, 46vw, 420px); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; background: #0b0726; }
.pd-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--pc) 14%, #0b0726), #0b0726 70%); }
.pd-glow { position: absolute; left: 50%; top: 50%; pointer-events: none; width: calc(var(--bs) * 2.1); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 42%, transparent), color-mix(in srgb, var(--pc) 10%, transparent) 55%, transparent 72%); animation: pdBreathe 3.6s ease-in-out infinite; }
@keyframes pdBreathe { 50% { opacity: .7; transform: translate(-50%, -50%) scale(.94); } }
.pd-rays { position: absolute; left: 50%; top: 50%; pointer-events: none; width: calc(var(--bs) * 2.8); aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .05) 0 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 46%, transparent 78%); mask: radial-gradient(closest-side, transparent 34%, #000 46%, transparent 78%); animation: pdSpin 60s linear infinite; }
@keyframes pdSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pd-hit { position: absolute; inset: 0; z-index: 1; }
.pd-bar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(10px, var(--sat)) max(16px, calc(var(--sar) + 10px)) 0 max(16px, calc(var(--sal) + 10px)); pointer-events: none; }
.pd-bar > * { pointer-events: auto; }
.pd-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 243, 224, .55); background: rgba(255, 243, 224, .06); border: 1px solid rgba(255, 243, 224, .1); }
.pd-icon svg { width: 16px; height: 16px; }
.pd-who { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 22px; background: rgba(255, 243, 224, .06); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); pointer-events: none; }
.pd-av { width: 30px; height: 30px; box-shadow: none; }
.pd-who b { font: 400 17px/1 var(--display); color: var(--cream); letter-spacing: .02em; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-room { justify-self: end; display: flex; align-items: center; gap: 7px; font: 800 11px/1 var(--body); letter-spacing: .16em; color: rgba(255, 243, 224, .45); pointer-events: none; }
.pd-conn { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 6px #ff6b6b; }
.pd-conn[data-on="1"] { background: #5ee6a0; box-shadow: 0 0 6px #5ee6a0; }
/* stage: [flank] [button] [flank] with equal flanks, so the button sits dead centre */
.pd-stage { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(52px, calc(var(--sat) + 44px)) max(16px, var(--sar)) max(10px, var(--sab)) max(16px, var(--sal)); pointer-events: none; }
.pd-flank { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 0 4vw; }
.pd-flank.left { align-items: flex-end; text-align: right; }
.pd-flank.right { align-items: flex-start; text-align: left; }
.pd-head { font: 400 clamp(22px, 7vh, 34px)/1.05 var(--display); color: var(--cream); letter-spacing: .01em; }
.pd-head.pop { animation: pdPop .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pdPop { from { transform: scale(.86); opacity: .4; } }
.pd-sub { font: 800 clamp(11px, 3.4vh, 14px)/1.3 var(--body); color: rgba(255, 243, 224, .5); }
.pd-sub:empty { display: none; }
.pd-stat { display: flex; flex-direction: column; gap: 4px; }
.pd-stat b { font: 400 clamp(36px, 13vh, 58px)/.9 var(--display); color: var(--cream); }
.pd-stat b i { font-style: normal; font-size: .5em; color: rgba(255, 243, 224, .4); margin-left: 2px; }
.pd-stat small { font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 224, .45); }
.pd-hearts { display: flex; gap: 4px; } .pd-hearts svg { width: clamp(26px, 9vh, 38px); height: clamp(26px, 9vh, 38px); color: rgba(255, 243, 224, .14); } .pd-hearts svg.on { color: #ff6f9a; filter: drop-shadow(0 0 8px rgba(255, 111, 154, .55)); }
.pd-center { position: relative; display: grid; place-items: center; width: var(--bs); height: var(--bs); }
/* the arcade button: chrome bezel, dark well, convex glossy cap in the player's colour */
.pd-btn { pointer-events: auto; position: relative; width: 100%; height: 100%; border-radius: 50%; padding: 0; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pd-bezel { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, #4c4868, #e9e6fb 10%, #8a86a8 24%, #2f2b4a 42%, #bcb8da 60%, #4c4868 76%, #f2efff 88%, #4c4868); box-shadow: 0 calc(var(--bs) * .05) 0 #05031a, 0 calc(var(--bs) * .1) calc(var(--bs) * .16) rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .28); }
.pd-well { position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #1d1540, #05031a 70%); box-shadow: inset 0 calc(var(--bs) * .03) calc(var(--bs) * .05) rgba(0, 0, 0, .8); }
.pd-cap { position: absolute; inset: 10%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--pc) 35%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 62%, #2a0a1a) 100%);
  box-shadow: 0 calc(var(--bs) * .045) 0 color-mix(in srgb, var(--pc) 45%, #12051a), 0 calc(var(--bs) * .06) calc(var(--bs) * .07) rgba(0, 0, 0, .55), inset 0 calc(var(--bs) * -.04) calc(var(--bs) * .06) rgba(0, 0, 0, .3), inset 0 calc(var(--bs) * .02) calc(var(--bs) * .02) rgba(255, 255, 255, .5);
  transform: translateY(calc(var(--bs) * -.035)); transition: transform .07s ease-out, box-shadow .07s ease-out, filter .2s; }
.pd-cap::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); }
.pd-shine { position: absolute; left: 18%; right: 18%; top: 6%; height: 34%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.pd-label { position: relative; font: 400 calc(var(--bs) * .15)/1 var(--display); letter-spacing: .07em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.pd-btn.hit .pd-cap { transform: translateY(0) scale(.985); filter: brightness(1.12); box-shadow: 0 calc(var(--bs) * .008) 0 color-mix(in srgb, var(--pc) 45%, #12051a), 0 calc(var(--bs) * .015) calc(var(--bs) * .03) rgba(0, 0, 0, .5), inset 0 calc(var(--bs) * -.03) calc(var(--bs) * .05) rgba(0, 0, 0, .3), inset 0 calc(var(--bs) * .02) calc(var(--bs) * .02) rgba(255, 255, 255, .45); }
.pd-btn.ready .pd-cap { background: radial-gradient(circle at 50% 30%, #f0fffc 0%, #8ff0e6 45%, #17829c 100%); box-shadow: 0 calc(var(--bs) * .045) 0 #0f5e6e, 0 calc(var(--bs) * .06) calc(var(--bs) * .07) rgba(0, 0, 0, .55), inset 0 calc(var(--bs) * -.04) calc(var(--bs) * .06) rgba(0, 0, 0, .25), inset 0 calc(var(--bs) * .02) calc(var(--bs) * .02) rgba(255, 255, 255, .55); }
.pd-btn.ready .pd-label { color: #0e3a52; text-shadow: none; font-size: calc(var(--bs) * .2); }
.pd-btn.ouch { animation: padOuch .45s ease-out; }
@keyframes padOuch { 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(9px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.pd-ripple { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--pc) 60%, #fff); opacity: 0; pointer-events: none; }
.pd-ripple.go { animation: ripple .45s ease-out; }
@keyframes ripple { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.22); } }
#pad.dim .pd-cap { filter: saturate(.35) brightness(.7); } #pad.dim .pd-glow { opacity: .35; animation: none; }
#pad[data-st="play"] .pd-head, #pad[data-st="count"] .pd-head { color: color-mix(in srgb, var(--pc) 35%, #fff); }
html.reduce-motion .pd-glow, html.reduce-motion .pd-rays { animation: none; }
.pd-rotate { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 7, 38, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pd-rotate.show { display: flex; }
.pd-rot-card { text-align: center; } .pd-rot-card h2 { margin: 18px 0 6px; font: 400 26px/1.1 var(--display); color: var(--cream); } .pd-rot-card p { margin: 0 0 10px; font: 800 14px/1.4 var(--body); color: var(--cream2); }
.pd-rot { border-color: var(--cream) !important; animation: rotLand 2.4s ease-in-out infinite !important; } .pd-rot i { background: var(--cream) !important; }
@keyframes rotLand { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
/* upright fallback: name on top, button centred, status and stat underneath */
@media (orientation: portrait) {
  #pad { --bs: min(78vw, 46vh, 420px); }
  .pd-stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; justify-items: center; padding-top: calc(var(--sat) + 64px); padding-bottom: calc(var(--sab) + 20px); }
  .pd-flank { padding: 0 24px; } .pd-flank.left { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 6vh; } .pd-flank.right { align-items: center; text-align: center; justify-content: flex-start; padding-top: 6vh; }
  .pd-stat { align-items: center; }
}
@media (max-height: 360px) and (orientation: landscape) { .pd-sub { display: none; } }
/* ---------- single-player HUD: pop-up text always sits BELOW the measured HUD (never over the counter or chips) ---------- */
#game .callout { top: calc(var(--hud-b, calc(var(--sat) + 120px)) + 16px) !important; left: 16px; right: 16px; font-size: clamp(26px, 8vw, 42px); line-height: 1.05; overflow-wrap: anywhere; }
#game .start-hint { top: max(30%, calc(var(--hud-b, 140px) + 28px)) !important; }
html.big-mode #game .callout { font-size: max(30px, 6vmin); }

/* Big Screen in landscape (TV, iPad sideways, laptop): ONE slim top bar so the course gets ~88% of the height and the puffs
   are as big as possible for couch viewing. [pause] [course title] ........ [player cards] [par] */
@media (orientation: landscape) {
  #party[data-kind="big"] .pt-hud { flex-direction: row; align-items: center; gap: 1.6vmin; }
  #party[data-kind="big"] .pt-top { display: contents; }
  #party[data-kind="big"] #ptPause { order: 0; }
  #party[data-kind="big"] .pt-title { order: 1; justify-self: auto; align-items: flex-start; margin-right: auto; }
  #party[data-kind="big"] .pt-cards { order: 2; flex: 0 1 auto; justify-content: flex-end; }
  #party[data-kind="big"] .pt-par { order: 3; }
  #party[data-kind="big"] .pt-card { flex: 0 1 24vmin; }
}
html.big-mode .toast { font-size: max(14px, 2.4vmin); padding: 1.4vmin 2.6vmin; border-radius: 2vmin; top: max(18px, 3vmin); bottom: auto; transform: translate(-50%, -20px); }
html.big-mode .toast.show { transform: translate(-50%, 0); }
#party[data-kind="big"] .pt-card { flex: 0 0 auto !important; } #party[data-kind="big"] .pt-sub { overflow: visible; }

#versus [hidden], #bigsheet [hidden], #endpick [hidden] { display: none !important; }

/* ---------- COURSES (v009) ---------- */
.cs-body { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 72px); bottom: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-sets { flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px calc(var(--sar) + 20px) 4px calc(var(--sal) + 20px); scroll-padding: 0 20px; }
.cs-sets::-webkit-scrollbar { display: none; }
.cs-set { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 7px; border-radius: 18px; background: var(--glass2); border: 1.5px solid var(--line); color: var(--cream); overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .12s, background .2s; }
.cs-set::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #ffd27a, #ff9b4a); }
.cs-set-n { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font: 400 20px/1 var(--display); background: rgba(255, 243, 224, .1); color: var(--cream); }
.cs-set-n svg { width: 18px; height: 18px; }
.cs-set-t { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.cs-set-t b { font: 400 15px/1 var(--display); letter-spacing: .02em; } .cs-set-t small { font: 800 11px/1 var(--body); color: var(--cream2); }
.cs-set.sel { background: linear-gradient(180deg, rgba(255, 210, 122, .32), rgba(255, 155, 74, .16)), var(--glass); border-color: rgba(255, 200, 120, .7); box-shadow: 0 4px 0 rgba(184, 66, 31, .55), 0 10px 22px rgba(255, 122, 61, .2); }
.cs-set.sel .cs-set-n { background: linear-gradient(180deg, #ffd27a, #ff9b4a); color: #2a1450; }
.cs-set.locked { opacity: .55; }
.cs-rail { flex: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 13% 10px; scroll-padding: 0 13%; overscroll-behavior-x: contain; touch-action: pan-x; }
.cs-rail::-webkit-scrollbar { display: none; }
.cs-world { position: relative; flex: none; width: 74%; max-width: 380px; aspect-ratio: 16 / 9.4; border-radius: 26px; overflow: hidden; scroll-snap-align: center; text-align: left; color: var(--cream); background: linear-gradient(180deg, var(--g0), var(--g2)); border: 2px solid rgba(255, 243, 224, .28); box-shadow: 0 6px 0 rgba(8, 4, 34, .55), 0 16px 30px rgba(6, 2, 28, .4); transform: scale(.9); opacity: .62; transition: transform .35s cubic-bezier(.2, 1.2, .4, 1), opacity .3s, border-color .3s; }
.cs-world.sel { transform: none; opacity: 1; border-color: rgba(255, 243, 224, .7); }
.cs-art { position: absolute; inset: 0; } .cs-art svg { width: 100%; height: 100%; display: block; }
.cs-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 8, 48, .82) 0%, rgba(14, 8, 48, .45) 48%, rgba(14, 8, 48, 0) 75%), linear-gradient(0deg, rgba(14, 8, 48, .75), rgba(14, 8, 48, 0) 45%); }
.cs-wtext { position: absolute; left: 16px; top: 14px; right: 30%; display: flex; flex-direction: column; gap: 4px; }
.cs-wtext small { font: 800 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 224, .78); }
.cs-wtext b { font: 400 25px/1 var(--display); text-shadow: 0 2px 0 rgba(10, 4, 40, .5), 0 6px 16px rgba(10, 4, 40, .5); }
.cs-wtext em { font: 800 12px/1.3 var(--body); font-style: normal; color: rgba(255, 243, 224, .82); }
.cs-wfoot { position: absolute; left: 16px; right: 16px; bottom: 13px; display: flex; align-items: center; gap: 10px; }
.cs-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba(255, 243, 224, .2); overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 6px; background: linear-gradient(90deg, #ffd27a, #ffc857); box-shadow: 0 0 10px rgba(255, 200, 87, .6); }
.cs-wstars { display: flex; align-items: center; gap: 3px; font: 400 18px/1 var(--display); } .cs-wstars svg { width: 18px; height: 18px; color: var(--gold); } .cs-wstars small { font-size: 13px; opacity: .7; }
.cs-lock { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(10, 4, 40, .6); font: 800 12px/1 var(--body); } .cs-lock svg { width: 15px; height: 15px; }
.cs-world.locked .cs-art { filter: grayscale(.6) brightness(.7); }
.cs-crown { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2a1450; box-shadow: 0 3px 0 #b8861f, 0 0 16px rgba(255, 200, 87, .6); } .cs-crown svg { width: 18px; height: 18px; }
.cs-dots { flex: none; display: flex; justify-content: center; gap: 6px; margin-top: -8px; }
.cs-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 243, 224, .28); transition: width .3s, background .3s; } .cs-dots i.on { width: 20px; background: var(--gold); }
.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 2px calc(var(--sar) + 20px) calc(var(--sab) + 24px) calc(var(--sal) + 20px); }
.cs-list { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.cs-list::before { content: ''; position: absolute; left: 33px; top: 30px; height: calc(3 * 76px + 2 * 12px - 76px); border-left: 3px dashed rgba(255, 243, 224, .22); }
.cs-course { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px 10px 8px; border-radius: 24px; text-align: left; background: var(--glass); border: 1.5px solid var(--line); box-shadow: 0 5px 0 rgba(8, 4, 34, .5), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .12s; }
.cs-course:active:not(.locked) { transform: translateY(3px); }
.cs-node { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 400 24px/1 var(--display); color: #2a1450; background: radial-gradient(circle at 40% 30%, #fff, var(--wc) 75%); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 4px rgba(14, 8, 48, .6); }
.cs-node svg { width: 20px; height: 20px; }
.cs-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cs-info b { font: 400 19px/1.05 var(--display); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-info small { font: 800 12px/1.2 var(--body); color: var(--cream2); } .cs-info small b { font: inherit; color: var(--gold); }
.cs-stars { display: flex; gap: 1px; } .cs-stars svg { width: 18px; height: 18px; color: rgba(255, 243, 224, .2); } .cs-stars svg.on { color: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 200, 87, .6)); }
.cs-go { display: flex; align-items: center; gap: 6px; }
.cs-go svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; color: var(--cream); background: rgba(255, 243, 224, .12); }
.cs-go em { font: 400 15px/1 var(--display); font-style: normal; color: #2a1450; }
.cs-course.next { background: linear-gradient(180deg, rgba(255, 210, 122, .3), rgba(255, 122, 61, .14)), var(--glass); border-color: rgba(255, 200, 120, .75); box-shadow: 0 5px 0 rgba(184, 66, 31, .6), 0 12px 26px rgba(255, 122, 61, .25); }
.cs-course.next .cs-go { padding: 0 4px 0 14px; height: 40px; border-radius: 20px; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f; }
.cs-course.next .cs-go svg { background: none; color: #2a1450; width: 30px; height: 30px; padding: 6px; }
.cs-course.next .cs-node { animation: nodePulse 1.8s ease-in-out infinite; }
@keyframes nodePulse { 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 4px rgba(14, 8, 48, .6), 0 0 0 10px rgba(255, 200, 120, .25); } }
.cs-course.locked { opacity: .55; } .cs-course.locked .cs-node { background: rgba(255, 243, 224, .14); color: var(--cream2); } .cs-course.locked .cs-stars { visibility: hidden; }
.cs-course.nope { animation: padOuch .4s ease-out; }
.cs-tip { margin: 4px 0 0; text-align: center; font: 800 12.5px/1.4 var(--body); color: var(--cream2); }
html.reduce-motion .cs-course.next .cs-node { animation: none; }
@media (max-width: 360px) { .cs-stars svg { width: 15px; height: 15px; } .cs-course { gap: 8px; } }
@media (min-width: 700px) { .cs-world { width: 52%; } .cs-rail { padding-left: 24%; padding-right: 24%; scroll-padding: 0 24%; } }
@media (max-height: 700px) { .cs-world { aspect-ratio: 16 / 8; } .cs-wtext em { display: none; } .cs-course { min-height: 66px; } }

/* ---------- DAILY (v009) ---------- */
.dy-scroll > * { max-width: 460px; margin-left: auto; margin-right: auto; }
.dy-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r3); background: linear-gradient(135deg, rgba(53, 208, 198, .26), rgba(23, 130, 156, .18) 60%, rgba(30, 20, 82, .7)); border: 1.5px solid rgba(168, 243, 234, .4); box-shadow: 0 6px 0 rgba(8, 40, 70, .55), 0 14px 30px rgba(6, 2, 28, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dy-ring { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center; }
.dy-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dy-ring circle { fill: none; stroke-width: 7; } .dy-ring-bg { stroke: rgba(255, 243, 224, .14); }
.dy-ring-fg { stroke: #8ff0e6; stroke-linecap: round; stroke-dasharray: 169.6; stroke-dashoffset: 169.6; transition: stroke-dashoffset .8s cubic-bezier(.3, 1, .4, 1); filter: drop-shadow(0 0 6px rgba(143, 240, 230, .6)); }
.dy-ring.full .dy-ring-fg { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 87, .7)); }
.dy-ring b { position: relative; font: 400 22px/1 var(--display); color: var(--cream); }
.dy-head { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dy-head small { font: 800 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8ff0e6; }
#daily .dy-head .daily-date { margin: 0; text-align: left; font: 400 23px/1.05 var(--display); color: var(--cream); text-shadow: 0 2px 0 rgba(10, 4, 40, .4); }
.dy-reset { margin: 0; font: 800 12.5px/1.2 var(--body); color: var(--cream2); } .dy-reset b { color: var(--cream); }
.dy-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; border-radius: 22px; background: rgba(10, 4, 40, .35); border: 1px solid var(--line2); }
.dy-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dy-day small { font: 800 11px/1 var(--body); color: var(--cream2); text-transform: uppercase; }
.dy-day i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 243, 224, .08); border: 1.5px dashed rgba(255, 243, 224, .18); }
.dy-day i svg { width: 18px; height: 18px; color: #2a1450; } .dy-day i b { font: 400 14px/1 var(--display); color: var(--cream); }
.dy-day.full i { background: linear-gradient(180deg, #ffd27a, #ff7a45); border: 0; box-shadow: 0 0 12px rgba(255, 138, 76, .5); }
.dy-day.part i { border-style: solid; border-color: rgba(255, 200, 120, .6); }
.dy-day.today small { color: var(--gold); } .dy-day.today i { box-shadow: 0 0 0 3px rgba(255, 200, 87, .35); }
.dy-list { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; margin-bottom: 14px; }
.dy-card { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px !important; align-items: center; padding: 12px 12px 12px 10px !important; border-radius: 24px !important; position: relative; overflow: hidden; }
.dy-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tc); }
.dy-card.t0 { --tc: #5ee6a0; --tc2: #2fae76; } .dy-card.t1 { --tc: #ffc857; --tc2: #e6942a; } .dy-card.t2 { --tc: #ff6f9a; --tc2: #d4436f; }
.dy-tier { width: 56px; height: 56px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(180deg, var(--tc), var(--tc2)); color: #2a1450; box-shadow: 0 3px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .5); }
.dy-tier b { font: 400 22px/1 var(--display); } .dy-tier small { font: 800 9px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.dy-card .info { gap: 5px; } .dy-card .info b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-card .sts svg { width: 17px !important; height: 17px !important; }
.dy-chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; font: 400 14px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.dy-chip svg { width: 16px; height: 16px; }
.dy-chip.go { color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f; }
.dy-chip.ok { color: #0e3a52; background: #8ff0e6; box-shadow: 0 3px 0 #127a80; }
.dy-chip.wait { color: var(--cream2); background: rgba(255, 243, 224, .1); }
.dy-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 243, 224, .3); border-top-color: var(--cream); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dy-card.done .dy-tier { filter: saturate(.9); }
.dy-note { margin-top: 6px !important; }
#daily .daily-mascot { display: none; }
.cs-world { aspect-ratio: 16 / 10.6; }
.cs-wtext b { font-size: 23px; } .cs-wtext { right: 26%; }
.cs-course.next .cs-stars { display: none; }
.cs-course.next .cs-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lobby fit on 4:3 / 16:10 screens (iPad, laptops): the join card gets more room and the code scales with the width */
.bl-main { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
.bl-qr { width: min(31vmin, 420px); }
.bl-code { font-size: min(11vmin, 6vw); }
.bl-step { font-size: max(13px, min(2.2vmin, 1.5vw)); }
.bl-step em { word-break: normal; overflow-wrap: anywhere; }
#pdRotateOk { display: inline-block !important; visibility: visible !important; margin-top: 6px; padding: 12px 18px; font: 800 14px/1 var(--body); color: var(--cream2); text-decoration: underline; text-underline-offset: 3px; }
#ptboard .link-btn { display: flex; align-items: center; justify-content: center; align-self: center; min-height: 44px; padding: 10px 18px; border-radius: 12px; font: 800 14px/1.2 var(--body); color: var(--cream2); text-decoration: none; }
#ptboard .link-btn:active { background: rgba(255, 243, 224, .08); }
#ptboard[data-kind="big"] .link-btn { font-size: max(14px, 2vmin); }

@media (orientation: landscape) and (max-height: 400px) { #pad { --bs: min(70vh, 46vw, 420px); } }
.pd-head:empty { display: none; }

/* ---------- MENU HEADERS (v009.2): no solid band. The title floats over the scene; content fades out as it scrolls under it. ---------- */
.screen:not(#home):not(#game) > .topbar::before { display: none !important; }
.screen:not(#home):not(#game) > .topbar { padding-bottom: 6px; }
#levels::before, #daily::before, #settings::before, #versus::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(21, 13, 56, .18) 0%, rgba(21, 13, 56, .5) 30%, rgba(21, 13, 56, .78) 70%, rgba(21, 13, 56, .9) 100%); }
#versus .scroll, #daily .scroll, #settings .scroll, .cs-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%); }

/* declutter (v009.2) */
.vx-rules { display: block !important; margin: 2px auto 0; padding: 0; text-align: center; font: 800 12px/1.4 var(--body); color: rgba(255, 243, 224, .5); background: none; border: 0; }
.vx-hero p { font-size: 14px; }
.dy-week { background: none; border: 0; padding: 4px 6px; }
.dy-day i { width: 28px; height: 28px; border-style: solid; border-color: rgba(255, 243, 224, .1); background: rgba(255, 243, 224, .05); }
.dy-day i svg { width: 15px; height: 15px; }
.dy-card .info small { margin-top: 1px; }
.dy-note { font-size: 12.5px !important; color: rgba(255, 243, 224, .5) !important; }
.screen:not(#home):not(#game) > .topbar { background: none !important; box-shadow: none !important; border: 0 !important; }
/* side cards in the world rail stay quiet: art + name only */
.cs-world:not(.sel) .cs-wtext em, .cs-world:not(.sel) .cs-wfoot { opacity: 0; transition: opacity .25s; }
.cs-world .cs-wtext em, .cs-world .cs-wfoot { transition: opacity .25s; }
.dy-week[hidden] { display: none !important; }
.pb-note:empty { display: none; }