. */ --pc:var(--pink); /* sticker hard-offset shadows */ --sh: 6px 6px 0 var(--ink); --sh-sm: 4px 4px 0 var(--ink); /* motion */ --spring: cubic-bezier(.34,1.56,.64,1); /* radii scale */ --r-sm:12px; --r-md:18px; --r-lg:22px; --r-xl:30px; --radius:22px; /* legacy alias used by the mocks */ /* spacing scale */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; /* adaptive board tokens */ --stageW: clamp(280px, 24vw, 520px); --sc:1; /* center-stage scale (shrinks a touch at high N) */ /* game-theme font hooks — Party.applyTheme(gameMeta) podmienia je z manifestu gry (theme.fonts); domyślnie brandowe Unbounded/Nunito (music = no-op). */ --font-display:'Unbounded'; --font-body:'Nunito'; } /* ============================ 1 · SELF-HOSTED FONTS ====================== */ /* Latin subsets copied into /assets/fonts so the game runs fully offline (LAN). */ /* --- latin (podstawowe ASCII + ó) --- unicode-range MUSI być, żeby nie zawłaszczyć ą/ł/ę itd. */ @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/unbounded-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/unbounded-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/unbounded-latin-900-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/nunito-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/nunito-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/nunito-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* --- latin-ext (POLSKIE ZNAKI: ą ć ę ł ń ś ź ż) --- */ @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-900-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/nunito-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/nunito-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/nunito-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============================ 2 · RESET + PAGE =========================== */ *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; overflow-x:hidden; max-width:100%; } body{ font-family:var(--font-body),system-ui,sans-serif; color:var(--cream); -webkit-font-smoothing:antialiased; } /* board page: full-bleed, no scroll */ body.is-board{ height:100%; overflow:hidden; background: radial-gradient(120% 120% at 15% 0%, var(--bg-1) 0%, var(--bg-0) 55%, #120626 100%); /* Board sizing — viewport calcs that REPLACE the CSS container-query units, which the old Chromecast Chromium doesn't support (it rendered everything MEGA-BIG). JS (screen.html render / receiver renderBoard) sets --rows = seats in the taller column; each seat flex-shares the column height, so --seatH estimates one seat's rendered height. vh/vw (not dvh) on purpose: universally supported, and on a full-screen TV board vh == dvh anyway. */ --rows:2; /* JS overrides per player count */ --seatH: calc((100vh - 96px) / var(--rows, 2)); /* ≈ one seat's height (96px ≈ topbar + gaps) */ --seatW: calc((100vw - var(--stageW)) / 2); /* ≈ one seat's width (two flanking columns) */ --stageMin: min(var(--stageW), 82vh); /* center stage / vinyl sizing */ } body.is-board[data-count="12"]{ --sc:.93; } body.is-board[data-count="16"]{ --sc:.86; } /* phone page: scrolls, dynamic viewport height */ body.is-phone{ min-height:100dvh; background: radial-gradient(120% 90% at 20% 0%, var(--bg-1) 0%, var(--bg-0) 55%, #120626 100%); } /* ============================ 3 · DECOR (blobs + doodles) ================ */ .bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .blob{ position:absolute; border-radius:50%; } .doodle{ position:absolute; border-radius:50%; border:6px dashed rgba(255,255,255,.06); } /* board sizing (landscape TV) */ .is-board .blob{ filter:blur(70px); opacity:.45; } .is-board .b1{ width:44vw; height:44vw; left:-10vw; top:-14vw; background:var(--pink); } .is-board .b2{ width:40vw; height:40vw; right:-12vw; top:8vh; background:var(--teal); opacity:.35; } .is-board .b3{ width:38vw; height:38vw; left:24vw; bottom:-18vw; background:var(--violet); opacity:.4; } .is-board .b4{ width:22vw; height:22vw; right:16vw; bottom:-8vw; background:var(--gold); opacity:.25; } .is-board .d1{ width:30vw; height:30vw; right:-6vw; top:34vh; animation:spin 60s linear infinite; } .is-board .d2{ width:16vw; height:16vw; left:6vw; bottom:8vh; border-style:dotted; animation:spin 40s linear infinite reverse; } /* phone sizing (portrait) */ .is-phone .blob{ filter:blur(64px); opacity:.42; } .is-phone .b1{ width:80vw; height:80vw; left:-24vw; top:-16vh; background:var(--pink); } .is-phone .b2{ width:76vw; height:76vw; right:-30vw; top:26vh; background:var(--teal); opacity:.32; } .is-phone .b3{ width:72vw; height:72vw; left:-12vw; bottom:-20vh; background:var(--violet); opacity:.38; } .is-phone .b4{ width:44vw; height:44vw; right:-8vw; bottom:2vh; background:var(--gold); opacity:.22; } .is-phone .d1{ width:64vw; height:64vw; right:-20vw; top:36vh; animation:spin 60s linear infinite; } .is-phone .d2{ width:38vw; height:38vw; left:-12vw; top:6vh; border-style:dotted; animation:spin 42s linear infinite reverse; } /* ============================ 4 · CONFETTI (shared) ===================== */ .confetti{ position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden; } .cpiece{ position:absolute; top:-8vh; will-change:transform; animation:fall var(--d) cubic-bezier(.4,.1,.7,1) var(--delay) forwards; } @keyframes fall{ to{ transform:translate(var(--x),118vh) rotate(var(--r)); opacity:.85; } } /* ============================ 5 · MASCOT RIG (shared) =================== */ .mascot .v-spin{ transform-origin:100px 100px; animation:spin 7s linear infinite; } .mascot .arm{ transform-box:fill-box; transform-origin:6px 92%; animation:wave .95s ease-in-out infinite; } .lean{ animation:lean 2.4s ease-in-out infinite; } /* klepsydra (theme.mascot 'hourglass'): sypiący się strumień piasku (dash-offset, stary Cast Chromium OK); reszta klepsydry jest statyczna (bez .v-spin). */ .mascot .hg-stream{ stroke-dasharray:3 7; animation:hgFall 1.1s linear infinite; } @keyframes hgFall{ to{ stroke-dashoffset:-20 } } /* ============================ 6 · SHARED STICKER ATOMS ================== */ /* wordmark (record-mark + two-line lockup) — sizes differ per surface */ .wordmark{ display:flex; align-items:center; transform:rotate(-2.5deg); } .wm-text{ line-height:.86; } .wm-text .l1{ font-family:var(--font-display); font-weight:800; letter-spacing:.02em; color:var(--cream); text-shadow:2px 3px 0 var(--ink); display:block; } .wm-text .l2{ font-family:var(--font-display); font-weight:900; letter-spacing:-.01em; color:var(--gold); text-shadow:3px 4px 0 var(--ink); display:block; -webkit-text-stroke:1px var(--ink); } .is-board .wordmark{ gap:14px; } .is-board .wordmark .mark{ width:clamp(46px,4.6vw,66px); height:clamp(46px,4.6vw,66px); flex:0 0 auto; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35)); } .is-board .wm-text .l1{ font-size:clamp(15px,1.9vw,26px); } .is-board .wm-text .l2{ font-size:clamp(22px,3vw,42px); } .is-phone .wordmark{ gap:11px; } .is-phone .wordmark .mark{ width:44px; height:44px; flex:0 0 auto; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35)); } .is-phone .wm-text .l1{ font-size:13px; text-shadow:2px 2px 0 var(--ink); } .is-phone .wm-text .l2{ font-size:22px; text-shadow:3px 3px 0 var(--ink); } /* kicker (violet uppercase micro-label) */ .kicker{ font-family:var(--font-display); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--violet); font-size:clamp(11px,1.1vw,15px); } .is-phone .kicker{ font-size:12px; } /* chip (cream sticker pill) */ .chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.4em 1em; box-shadow:var(--sh-sm); } .chip svg{ width:1.2em; height:1.2em; } .chip.mono{ font-family:var(--font-body); font-weight:800; background:var(--teal); } .is-board .chip{ gap:9px; font-size:clamp(13px,1.4vw,20px); } /* rok p.n.e. (lata ujemne, np. Chronologia) — mniejszy sufiks przy roku, żeby nie rozsadzał karty; wszędzie tam, gdzie renderuje Party.yearHTML */ .bce{ font-size:.44em; font-weight:800; letter-spacing:.02em; margin-left:.18em; } /* segmented toggle — chunky sticker buttons (shared core + per-surface sizing) */ .seg{ display:flex; gap:10px; align-items:center; } .seg .lbl{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); opacity:.85; margin-right:2px; } .seg button{ font-family:var(--font-display); font-weight:700; font-size:clamp(11px,1.05vw,15px); letter-spacing:.01em; color:var(--cream); background:rgba(255,255,255,.06); border:3px solid var(--ink); border-radius:999px; padding:.55em 1.1em; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .18s var(--spring), background .18s ease, box-shadow .18s ease, color .18s ease; } .seg.count button{ min-width:2.6em; padding:.55em .9em; } .seg button:hover{ transform:translate(-1px,-3px); background:rgba(255,255,255,.14); } .seg button:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .seg button:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; } .seg button.on{ background:var(--gold); color:var(--ink); box-shadow:5px 5px 0 var(--ink); transform:translate(0,-2px) rotate(-1.5deg) scale(1.04); } .seg.count button.on{ background:var(--teal); } .seg .gear{ display:inline-grid; place-items:center; width:34px; height:34px; padding:0; } .seg .gear svg{ width:18px; height:18px; } .is-phone .seg{ gap:7px; flex-wrap:wrap; justify-content:center; } .is-phone .seg button{ font-size:11px; padding:.44em 1em; } /* ========================================================================== ============================ BOARD (is-board) ============================ ========================================================================== */ /* ---------- TV frame ---------- */ .tv{ position:relative; z-index:2; height:100vh; width:100vw; display:flex; flex-direction:column; padding: clamp(12px,2.2vh,26px) clamp(16px,2.4vw,40px); gap: clamp(10px,1.6vh,20px); } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; } .controls{ display:flex; align-items:center; gap:clamp(12px,1.8vw,28px); flex-wrap:wrap; justify-content:flex-end; } /* ---------- board grid: [seats] [stage] [seats] ---------- */ .board{ flex:1; min-height:0; display:grid; grid-template-columns: 1fr var(--stageW) 1fr; grid-template-rows: 1fr; gap: clamp(10px,1.4vw,20px); } .col{ display:flex; flex-direction:column; gap:clamp(8px,1vh,16px); min-height:0; min-width:0; } .col.left{ grid-column:1; grid-row:1; } .col.right{ grid-column:3; grid-row:1; } /* ---------- player seat (inner sizes scale to viewport via --seatH/--seatW) ---------- */ .seat{ flex:1 1 0; min-height:0; min-width:0; /* seats split the column height evenly */ position:relative; background:rgba(255,255,255,.05); border:3px solid rgba(255,255,255,.12); border-radius:clamp(12px, calc(var(--seatH) * 8/100), 22px); padding: clamp(6px,calc(var(--seatH) * 4/100),15px) clamp(9px,calc(var(--seatW) * 2.6/100),18px); display:flex; flex-direction:column; justify-content:center; gap:clamp(4px,calc(var(--seatH) * 3/100),12px); overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.28); } .seat.active{ background:rgba(255,79,151,.10); border:4px solid var(--pc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 20%, transparent), 0 14px 34px rgba(0,0,0,.35); animation:seatBob 2.6s ease-in-out infinite; } .seat.off{ opacity:.5; filter:grayscale(.3); } /* disconnected player (state.connected===false) */ @keyframes seatBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } } .seat-head{ display:flex; align-items:center; gap:clamp(6px,calc(var(--seatH) * 2.6/100),10px); min-width:0; } .avatar{ width:clamp(18px,calc(var(--seatH) * 40/100),46px); height:clamp(18px,calc(var(--seatH) * 40/100),46px); flex:0 0 auto; border-radius:clamp(8px,calc(var(--seatH) * 11/100),14px); border:3px solid var(--ink); background:var(--pc); box-shadow:var(--sh-sm); display:grid; place-items:center; color:var(--ink); transform:rotate(-4deg); } .avatar svg{ width:64%; height:64%; } .name{ font-family:var(--font-display); font-weight:800; font-size:clamp(11px,calc(var(--seatH) * 26/100),24px); color:var(--pc); line-height:1; text-shadow:2px 2px 0 var(--ink); letter-spacing:.01em; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .is-board .crown{ width:clamp(14px,calc(var(--seatH) * 18/100),30px); height:auto; flex:0 0 auto; filter:drop-shadow(1px 2px 0 var(--ink)); transform:rotate(8deg); } .count{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:clamp(9px,calc(var(--seatH) * 18/100),15px); color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.2em .65em; box-shadow:var(--sh-sm); flex:0 0 auto; white-space:nowrap; } .count svg{ width:1em; height:1em; } .turnbadge{ display:none; font-family:var(--font-display); font-weight:800; font-size:clamp(8px,calc(var(--seatH) * 16/100),12px); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--gold); border:3px solid var(--ink); border-radius:999px; padding:.2em .6em; box-shadow:var(--sh-sm); transform:rotate(-3deg); flex:0 0 auto; white-space:nowrap; } body.is-board[data-state="turn"] .seat.active .turnbadge{ display:inline-block; animation:pulse 1.1s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ transform:rotate(-3deg) scale(1) } 50%{ transform:rotate(-3deg) scale(1.08) } } /* ---------- HOT STREAK (>=3 z rzędu): płonąca obwódka + 🔥×N przy nicku ---------- */ /* Obwódka = gradient w warstwie border-box pod nieprzezroczystym wnętrzem (padding-box) — animowana background-position (stary Cast Chromium OK). */ .seat.hot{ border:4px solid transparent; background: linear-gradient(#241048, #241048) padding-box, linear-gradient(100deg, var(--gold), #ff7a3d, var(--pink), #ff7a3d, var(--gold)) border-box; background-size:auto auto, 250% 100%; animation:flameShift 1.7s linear infinite; box-shadow:0 0 22px rgba(255,168,49,.5), 0 10px 30px rgba(0,0,0,.28); } .seat.active.hot{ animation:flameShift 1.7s linear infinite, seatBob 2.6s ease-in-out infinite; box-shadow:0 0 26px rgba(255,168,49,.6), 0 14px 34px rgba(0,0,0,.35); } @keyframes flameShift{ to{ background-position:0 0, 250% 0; } } .streakbadge{ font-family:var(--font-display); font-weight:800; font-size:clamp(8px,calc(var(--seatH) * 15/100),12px); color:var(--ink); background:var(--gold); border:2.5px solid var(--ink); border-radius:999px; padding:.18em .55em; box-shadow:var(--sh-sm); transform:rotate(-4deg); flex:0 0 auto; white-space:nowrap; animation:streakPulse .9s ease-in-out infinite; } @keyframes streakPulse{ 0%,100%{ transform:rotate(-4deg) scale(1) } 50%{ transform:rotate(-4deg) scale(1.1) } } /* ---------- board timeline: a COLUMN of card-rows (snake for 6–10) ---------- */ /* ≤5 cards ⇒ 1 row; 6–10 (when seat is tall enough) ⇒ 2 rows split balanced. right+bottom padding leaves room for the last card's hard sticker shadow. */ .is-board .timeline{ position:relative; /* kotwica dla łuku węża (.tpath.bend) */ display:flex; flex-direction:column; justify-content:center; gap:clamp(4px,calc(var(--seatH) * 1.6/100),10px); width:100%; min-width:0; padding:2px 7px 8px 2px; } .is-board .trow{ position:relative; min-height:16px; padding-bottom:7px; /* pas na ścieżkę POD kartami (też na PUSTYM rzędzie) */ display:flex; align-items:stretch; justify-content:center; gap:clamp(5px,calc(var(--seatW) * 1.6/100),11px); flex-wrap:nowrap; min-width:0; } /* SERPENTINE fold: row 2 renders right→left (DOM order stays chronological). */ .is-board .trow.rev{ flex-direction:row-reverse; } /* year card (sticker) — the year scales to the seat via --seatW/--seatH */ .is-board .ycard{ position:relative; flex:1 1 0; min-width:0; max-width:clamp(96px,17vw,240px); background:var(--cream); border:3px solid var(--ink); border-radius:clamp(8px,calc(var(--seatH) * 10/100),15px); box-shadow:var(--sh-sm); padding: clamp(4px,calc(var(--seatH) * 4/100),10px) clamp(4px,calc(var(--seatW) * 6/100),8px) clamp(5px,calc(var(--seatH) * 4.5/100),10px); display:flex; flex-direction:column; gap:clamp(2px,calc(var(--seatH) * 2/100),4px); transform: rotate(var(--tilt,0deg)); overflow:hidden; } .is-board .ycard .strip{ height:clamp(3px,calc(var(--seatH) * 2/100),6px); border-radius:6px; background:var(--pc); border:2px solid var(--ink); } .is-board .ycard .yr{ font-family:var(--font-display); font-weight:800; font-size:clamp(10px, min(calc(var(--seatW) * 18 / 100 / var(--cpr, 1)),calc(var(--seatH) * 26/100)), 27px); color:var(--ink); line-height:.95; letter-spacing:-.03em; white-space:nowrap; } .is-board .ycard .ttl{ font-family:var(--font-body); font-weight:800; font-size:clamp(7px,calc(var(--seatH) * 11/100),11px); color:var(--muted); line-height:1.05; text-transform:uppercase; letter-spacing:.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 2-row (snake) mode: shorter cards → cap the year, keep titles to one line */ .is-board .timeline.rows2 .yr{ font-size:clamp(10px, min(calc(var(--seatW) * 18 / 100 / var(--cpr, 1)),calc(var(--seatH) * 13/100)), 22px); } .is-board .timeline.rows2 .ttl{ -webkit-line-clamp:1; } /* empty slot (active player's turn) */ .is-board .ycard.slot{ display:none; background:rgba(255,255,255,.06); border:3px dashed var(--pc); box-shadow:none; align-items:center; justify-content:center; animation:slotPulse 1.2s ease-in-out infinite; } body.is-board[data-state="turn"] .ycard.slot{ display:flex; } .is-board .ycard.slot .q{ font-family:var(--font-display); font-weight:900; font-size:clamp(14px, min(calc(var(--seatW) * 46/100),calc(var(--seatH) * 36/100)), 38px); color:var(--pc); text-shadow:2px 2px 0 var(--ink); } .is-board .ycard.slot .ttl{ text-align:center; color:var(--cream); opacity:.75; } /* ---------- DIRECTION path (kierunek czasu) — przerywana ścieżka POD kartami ---------- */ /* Markery .tpath emituje renderTimeline (party.js) jako STATYCZNE stringi. Absolutnie pozycjonowane (zero wpływu na flex kart), malowane PRZED .ycard (pierwsze dziecko rzędu) → karty zawsze na wierzchu. CAST-LITE: czysto statyczne bordery — żadnych animacji, filtrów ani masek (Chromecast 2018). */ .is-board .tpath{ position:absolute; pointer-events:none; } /* LINIA BAZOWA tuż POD kartami (nie przez środek!) — karty „stoją" na osi czasu */ .is-board .tpath.fwd, .is-board .tpath.rev{ left:1px; right:1px; bottom:1px; height:0; border-top:3px dashed rgba(255,255,255,.32); } /* grot: pełniejszy sticker-chevron na końcu osi — fwd → w prawo, rev ← w lewo */ .is-board .tpath.fwd::after, .is-board .tpath.rev::after{ content:""; position:absolute; bottom:-5px; width:11px; height:11px; border-top:4px solid rgba(255,255,255,.5); border-right:4px solid rgba(255,255,255,.5); } .is-board .tpath.fwd::after{ right:-1px; transform:rotate(45deg); } .is-board .tpath.rev::after{ left:-1px; transform:rotate(-135deg); } /* wąż (rows2): łuk na prawej krawędzi łączy bazę rzędu 1 z bazą rzędu 2 */ .is-board .timeline.rows2 .tpath.bend{ right:0; top:46%; bottom:3px; width:13px; border:3px dashed rgba(255,255,255,.3); border-left:none; border-radius:0 999px 999px 0; } /* ---------- STAGE (center) ---------- */ .stage{ grid-column:2; grid-row:1; position:relative; min-height:0; min-width:0; background: radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%), rgba(24,7,51,.55); border:4px solid var(--ink); border-radius:30px; box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.4); display:grid; place-items:center; overflow:hidden; } .stage::before{ /* stage floor glow */ content:""; position:absolute; left:50%; bottom:-30%; transform:translateX(-50%); width:120%; height:70%; background:radial-gradient(ellipse at center, rgba(255,61,139,.28), transparent 65%); pointer-events:none; } .panel{ display:none; position:relative; z-index:1; width:100%; height:100%; padding:clamp(14px,calc(var(--seatH) * 4/100),30px); flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,calc(var(--seatH) * 3/100),20px); text-align:center; } .stage[data-state="lobby"] .panel.lobby { display:flex; animation:popIn .5s var(--spring) both; } .stage[data-state="turn"] .panel.turn { display:flex; animation:popIn .5s var(--spring) both; } .stage[data-state="reveal"] .panel.reveal{ display:flex; animation:popIn .55s var(--spring) both; } .stage[data-state="blitz"] .panel.blitz { display:flex; animation:popIn .5s var(--spring) both; } .stage[data-state="blitzReveal"] .panel.blitzreveal{ display:flex; animation:popIn .55s var(--spring) both; } .stage[data-state="rushVote"] .panel.rushvote { display:flex; animation:popIn .5s var(--spring) both; } .stage[data-state="rushRound"] .panel.rushround { display:flex; animation:popIn .5s var(--spring) both; } .stage[data-state="rushReward"] .panel.rushreward { display:flex; animation:popIn .55s var(--spring) both; } .stage[data-state="over"] .panel.over { display:flex; animation:popIn .55s var(--spring) both; } @keyframes popIn{ 0%{ opacity:0; transform:scale(.8) translateY(14px) } 100%{ opacity:1; transform:scale(1) translateY(0) } } /* board mascot behaviours */ .panel.turn .mascot .v-spin{ animation-duration:5.5s; } .panel.blitz .mascot .v-spin, .panel.rushround .mascot .v-spin{ animation-duration:3s; } /* blitz/rush = szybszy obrót (pilne!) */ .panel.rushvote .mascot .v-spin{ animation-duration:3s; } .panel.lobby .mascot{ animation:lean 2.4s ease-in-out infinite; } /* ---- LOBBY ---- */ .panel.lobby .mascot{ width:clamp(70px, calc(var(--stageMin) * 30/100), 150px); } .qr-card{ background:var(--cream); border:4px solid var(--ink); border-radius:24px; padding:clamp(12px,1.4vw,20px); box-shadow:var(--sh); transform:rotate(-2deg); } .qr-card svg, .qr-card img{ display:block; width:clamp(110px,calc(var(--stageMin) * 32/100),190px); height:auto; } .lobby h2{ font-family:var(--font-display); font-weight:800; color:var(--cream); font-size:clamp(16px,1.9vw,28px); text-shadow:3px 3px 0 var(--ink); line-height:1.05; } /* joined players shown as chips inside the lobby panel */ .lobby-players{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(6px,.8vw,10px); margin-top:clamp(2px,calc(var(--seatH) * 1/100),8px); max-width:660px; } .lobby-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:800; font-size:clamp(12px,1.2vw,17px); color:var(--cream); background:rgba(255,255,255,.06); border:3px solid var(--ink); border-radius:999px; padding:6px 14px; box-shadow:var(--sh-sm); } .lobby-chip .dot{ width:12px; height:12px; flex:0 0 auto; border-radius:50%; background:var(--pc); border:2px solid var(--ink); } .lobby-chip .crown{ width:16px; height:auto; } .lobby-wait{ font-family:var(--font-body); font-weight:800; color:var(--muted); font-size:clamp(12px,1.2vw,16px); } /* LOBBY layout: full-screen centered join screen — drop the 3-column framing and the narrow bordered center box (both look wrong when there are no seats to flank it). */ body.is-board[data-state="lobby"] .board{ display:flex; align-items:center; justify-content:center; } body.is-board[data-state="lobby"] .col{ display:none; } body.is-board[data-state="lobby"] .stage{ width:min(700px,92vw); max-width:none; height:100%; border:none; background:none; box-shadow:none; border-radius:0; } body.is-board[data-state="lobby"] .stage::before{ display:none; } /* ---- TURN (hero) — vinylwrap/pierścień współdzielone z panelami BLITZ i RUSH ---- */ .panel.turn .mascot, .panel.blitz .mascot, .panel.rushround .mascot{ width:calc(clamp(120px, calc(var(--stageMin) * 52/100), 300px) * var(--sc)); filter:drop-shadow(8px 12px 0 rgba(0,0,0,.35)); } /* winyl w opakowaniu na pierścień timera (JS ustawia conic-gradient inline; maska wycina środek → zostaje obwódka wokół płyty; ZERO @property) */ .panel.turn .vinylwrap, .panel.blitz .vinylwrap, .panel.rushround .vinylwrap{ position:relative; width:calc(clamp(120px, calc(var(--stageMin) * 52/100), 300px) * var(--sc)); } .panel.turn .vinylwrap .mascot, .panel.blitz .vinylwrap .mascot, .panel.rushround .vinylwrap .mascot{ position:relative; z-index:1; width:100%; } /* rushVote: mniejszy winyl z pierścieniem 5 s — karty do głosowania biorą scenę */ .panel.rushvote .vinylwrap{ position:relative; width:calc(clamp(70px, calc(var(--stageMin) * 26/100), 150px) * var(--sc)); } .panel.rushvote .vinylwrap .mascot{ position:relative; z-index:1; width:100%; } .timer-ring{ position:absolute; left:-6%; top:-5.7%; width:112%; height:0; padding-bottom:112%; border-radius:50%; display:none; z-index:0; background:conic-gradient(var(--teal) 360deg, rgba(255,255,255,.08) 360deg); -webkit-mask:radial-gradient(closest-side, transparent 84%, #000 85%); mask:radial-gradient(closest-side, transparent 84%, #000 85%); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); } .timer-ring.on{ display:block; } .timer-ring.urgent{ animation:ringPulse .55s ease-in-out infinite; } @keyframes ringPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.035); opacity:.85 } } .turn .guessing{ font-family:var(--font-display); font-weight:700; color:var(--cream); font-size:calc(clamp(14px,1.6vw,24px) * var(--sc)); text-shadow:2px 2px 0 var(--ink); } .turn .who, .over .who{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; overflow-wrap:anywhere; word-break:break-word; text-align:center; font-family:var(--font-display); font-weight:900; font-size:calc(clamp(28px,4.2vw,64px) * var(--sc)); color:var(--pc,var(--pink)); line-height:1.05; letter-spacing:-.01em; text-shadow:4px 5px 0 var(--ink); -webkit-text-stroke:1.5px var(--ink); transform:rotate(-2deg); animation:whoPop 2.4s ease-in-out infinite; } @keyframes whoPop{ 0%,100%{ transform:rotate(-2deg) scale(1) } 50%{ transform:rotate(-2deg) scale(1.05) } } /* ---- karta PROMPT (gry bez muzyki, np. Chronologia): treść zagadki JAWNA w turze/blitzu — wyrazista naklejka pod maskotką (rok zostaje ukryty) ---- */ .is-board .promptcard{ display:flex; flex-direction:column; align-items:center; gap:clamp(2px,.5vh,6px); background:var(--cream); border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh); transform:rotate(-1.5deg); padding:clamp(8px,1.6vh,16px) clamp(14px,1.8vw,26px); max-width:92%; animation:popIn .5s var(--spring) both; } .is-board .promptcard .pk{ font-family:var(--font-display); font-weight:700; font-size:clamp(9px,calc(var(--stageMin) * 3/100),13px); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .is-board .promptcard .pt{ font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:calc(clamp(14px, calc(var(--stageMin) * 5.4/100), 30px) * var(--sc)); line-height:1.12; text-align:center; max-width:100%; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ---- BLITZ (panel „wszyscy naraz"): wordmark + licznik odpowiedzi ---- */ .is-board .blitz-word{ font-family:var(--font-display); font-weight:900; letter-spacing:.02em; white-space:nowrap; font-size:calc(clamp(26px, calc(var(--stageMin) * 11/100), 64px) * var(--sc)); color:var(--gold); text-shadow:4px 5px 0 var(--ink); -webkit-text-stroke:1.5px var(--ink); transform:rotate(-2deg); animation:whoPop 1.6s ease-in-out infinite; } .is-board .blitz-word.small{ font-size:calc(clamp(18px, calc(var(--stageMin) * 7/100), 40px) * var(--sc)); } .is-board .blitz-count{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:clamp(13px, calc(var(--stageMin) * 4.4/100), 22px); color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.35em .9em; box-shadow:var(--sh-sm); } .is-board .blitz-dots{ display:inline-flex; gap:6px; } .is-board .blitz-dots .dot{ width:.7em; height:.7em; border-radius:50%; flex:0 0 auto; background:var(--pc); border:2px solid var(--ink); animation:popIn .35s var(--spring) both; } /* ---- BLITZ REVEAL: pozioma oś roku — piny graczy + złoty pin prawdy ---- */ .is-board .bz-banner{ max-width:96%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-display); font-weight:900; font-size:clamp(14px, calc(var(--stageMin) * 5.2/100), 28px); color:var(--ink); background:var(--gold); border:4px solid var(--ink); border-radius:16px; padding:.16em .7em; box-shadow:var(--sh-sm); transform:rotate(-2deg); animation:sealPop .55s var(--spring) both; } .is-board .bz-banner.none{ background:var(--pink); color:var(--cream); -webkit-text-stroke:.5px var(--ink); } .is-board .bz-axis{ position:relative; width:92%; height:clamp(150px, calc(var(--stageMin) * 52/100), 300px); margin-top:clamp(4px, calc(var(--stageMin) * 2/100), 12px); } .is-board .bz-axis .bz-line{ position:absolute; left:0; right:0; top:50%; height:6px; transform:translateY(-50%); background:rgba(255,255,255,.16); border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } /* pin = punkt (left inline w %) + kropka na osi + pastylka nazwa/rok nad osią; dwa poziomy pastylek (lvl2 wyżej) ograniczają nachodzenie sąsiadów */ .is-board .bz-pin{ position:absolute; top:50%; width:0; animation:bzDrop .5s var(--spring) both; } .is-board .bz-pin .bz-dot{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:clamp(12px, calc(var(--stageMin) * 4.4/100), 22px); height:clamp(12px, calc(var(--stageMin) * 4.4/100), 22px); border-radius:50%; background:var(--pc); border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); } .is-board .bz-pin .bz-tag{ position:absolute; left:0; bottom:clamp(12px, calc(var(--stageMin) * 4/100), 20px); transform:translateX(-50%) rotate(-2deg); display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:.22em .55em; box-shadow:var(--sh-sm); white-space:nowrap; } .is-board .bz-pin.lvl2 .bz-tag{ bottom:clamp(58px, calc(var(--stageMin) * 19/100), 104px); transform:translateX(-50%) rotate(2deg); } .is-board .bz-pin .bz-tag .bz-year{ font-family:var(--font-display); font-weight:900; line-height:1; font-size:clamp(12px, calc(var(--stageMin) * 4.6/100), 24px); color:var(--ink); letter-spacing:-.02em; } .is-board .bz-pin .bz-tag .bz-name{ font-family:var(--font-body); font-weight:800; line-height:1; font-size:clamp(8px, calc(var(--stageMin) * 3/100), 13px); color:var(--pc); max-width:8em; overflow:hidden; text-overflow:ellipsis; } .is-board .bz-pin .bz-tag .crown{ position:absolute; left:50%; top:0; width:clamp(14px, calc(var(--stageMin) * 5/100), 26px); height:auto; transform:translate(-50%,-72%) rotate(-8deg); filter:drop-shadow(1px 2px 0 var(--ink)); } /* zwycięzca: złota poświata kropki + delikatny puls pastylki */ .is-board .bz-pin.win .bz-dot{ box-shadow:0 0 0 4px rgba(255,197,49,.5), 2px 2px 0 var(--ink); } .is-board .bz-pin.win .bz-tag{ border-color:var(--gold); box-shadow:4px 4px 0 var(--gold); animation:bzWinPulse 1.6s ease-in-out .9s infinite; } /* ZŁOTY pin prawdy: kropka większa, pastylka POD osią (rok + tytuł) */ .is-board .bz-pin.truth .bz-dot{ background:var(--gold); width:clamp(16px, calc(var(--stageMin) * 6/100), 30px); height:clamp(16px, calc(var(--stageMin) * 6/100), 30px); } .is-board .bz-pin.truth .bz-tag{ bottom:auto; top:clamp(14px, calc(var(--stageMin) * 4.6/100), 24px); transform:translateX(-50%) rotate(1.5deg); background:var(--gold); } .is-board .bz-pin.truth .bz-tag .bz-year{ font-size:clamp(16px, calc(var(--stageMin) * 6.4/100), 34px); } .is-board .bz-pin.truth .bz-tag .bz-name{ color:var(--ink); max-width:11em; } @keyframes bzDrop{ 0%{ opacity:0; transform:translateY(-20px) } 100%{ opacity:1; transform:translateY(0) } } @keyframes bzWinPulse{ 0%,100%{ transform:translateX(-50%) rotate(-2deg) scale(1) } 50%{ transform:translateX(-50%) rotate(-2deg) scale(1.07) } } /* ---- RUSH (M5): głosowanie na minigrę + rundy + nagroda (CAST-LITE: zero blur, zero animowanego background-position; animacje wyłącznie transform/opacity — popIn/bzDrop/awardIn/wobble z istniejących keyframes) ---- */ .is-board .vote-cards{ display:flex; align-items:stretch; justify-content:center; gap:clamp(10px, calc(var(--stageMin) * 3.4/100), 20px); width:96%; } .is-board .vote-card{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:clamp(3px,.6vh,8px); background:var(--cream); border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh-sm); padding:clamp(10px,1.6vh,18px) clamp(8px,1vw,16px) clamp(12px,1.8vh,20px); animation:popIn .5s var(--spring) both; } .is-board .vote-card:first-child{ transform:rotate(-1.5deg); } .is-board .vote-card:last-child{ transform:rotate(1.5deg); } .is-board .vote-card .vg-ico{ font-size:clamp(22px, calc(var(--stageMin) * 9/100), 46px); line-height:1; } .is-board .vote-card .vg-name{ font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:clamp(12px, calc(var(--stageMin) * 4.4/100), 22px); line-height:1.05; text-align:center; } .is-board .vote-card .vg-hook{ font-family:var(--font-body); font-weight:800; color:var(--muted); font-size:clamp(8px, calc(var(--stageMin) * 2.8/100), 13px); line-height:1.15; text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .is-board .vote-card .vote-num{ margin-top:auto; min-width:1.9em; text-align:center; font-family:var(--font-display); font-weight:900; font-size:clamp(16px, calc(var(--stageMin) * 7/100), 36px); line-height:1.1; color:var(--ink); background:var(--gold); border:3px solid var(--ink); border-radius:999px; padding:.08em .45em; box-shadow:var(--sh-sm); } /* mostek Widełek (rushReward): span roku±szerokość nad osią lat; poziom (top) ustawia inline JS, żeby sąsiednie mostki nie nachodziły. Trafiony świeci. */ .is-board .bz-bracket{ position:absolute; height:clamp(16px, calc(var(--stageMin) * 6/100), 26px); background:var(--pc); border:3px solid var(--ink); border-radius:999px; box-shadow:2px 2px 0 var(--ink); opacity:.92; display:flex; align-items:center; justify-content:center; overflow:hidden; animation:bzDrop .5s var(--spring) both; } .is-board .bz-bracket .bz-bname{ font-family:var(--font-display); font-weight:800; line-height:1; white-space:nowrap; font-size:clamp(8px, calc(var(--stageMin) * 3/100), 14px); color:var(--ink); max-width:96%; overflow:hidden; text-overflow:ellipsis; padding:0 .4em; } .is-board .bz-bracket.win{ box-shadow:0 0 0 4px rgba(255,197,49,.55), 2px 2px 0 var(--ink); opacity:1; } /* chip pudła w wynikach rundy (obok istniejących .award „+N") */ .is-board .award.miss{ opacity:.6; filter:saturate(.6); } /* ---- RUSH M5b: Sito / Krzesełka / Nie Przebij / Napad (sceny rund + reveal). CAST-LITE bez wyjątków: zero blur i animowanego background-position — animacje wyłącznie transform/opacity (popIn/bzDrop/sealPop + svDrop/hsBob/ prSweep niżej). ---- */ /* minigra wnosi własne ciało sceny → winyl kompaktowy (jak w rushvote) */ .is-board .panel.rushround.compact .vinylwrap{ width:calc(clamp(64px, calc(var(--stageMin) * 20/100), 120px) * var(--sc)); } /* mini-awatar gracza (tłum Sita / kafle Krzesełek / napastnicy Napadu) */ .is-board .mav{ display:inline-grid; place-items:center; overflow:hidden; flex:0 0 auto; width:clamp(18px, calc(var(--stageMin) * 7/100), 36px); height:clamp(18px, calc(var(--stageMin) * 7/100), 36px); border-radius:50%; background:var(--pc,var(--pink)); border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); animation:popIn .4s var(--spring) both; } .is-board .mav svg{ width:88%; height:auto; display:block; } /* odpadnięty z Sita: jednorazowy zrzut ze sceny (transform/opacity, zostaje wyblakły) */ .is-board .mav.drop{ animation:svDrop .7s ease-in both; } /* napastnik Napadu: buja się nad osią lidera */ .is-board .mav.bob{ animation:popIn .4s var(--spring) both, hsBob 1.5s ease-in-out .4s infinite alternate; } /* Sito: chip progu + karta-kotwica + zbiorcze liczniki + tłum */ .is-board .sv-stagechip{ font-family:var(--font-display); font-weight:900; letter-spacing:.06em; font-size:clamp(11px, calc(var(--stageMin) * 4/100), 20px); color:var(--ink); background:var(--gold); border:3px solid var(--ink); border-radius:999px; padding:.2em .8em; box-shadow:var(--sh-sm); transform:rotate(-2deg); } .is-board .sv-gate{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--cream); border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh); transform:rotate(1.5deg); padding:clamp(8px,1.4vh,14px) clamp(16px,2vw,28px); max-width:92%; animation:popIn .5s var(--spring) both; } .is-board .sv-gate .sv-q{ font-family:var(--font-display); font-weight:700; font-size:clamp(9px, calc(var(--stageMin) * 3/100), 13px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .is-board .sv-gate .sv-year{ font-family:var(--font-display); font-weight:900; line-height:1; color:var(--ink); font-size:calc(clamp(24px, calc(var(--stageMin) * 10/100), 56px) * var(--sc)); letter-spacing:-.02em; } .is-board .sv-gate .sv-ttl{ font-family:var(--font-body); font-weight:800; color:var(--ink); font-size:clamp(9px, calc(var(--stageMin) * 3.2/100), 15px); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .is-board .sv-gate .sv-owner{ font-family:var(--font-body); font-weight:800; color:var(--pink); font-size:clamp(8px, calc(var(--stageMin) * 2.8/100), 13px); } .is-board .sv-vs{ display:flex; gap:clamp(8px,1vw,16px); } .is-board .sv-count{ font-family:var(--font-display); font-weight:800; font-size:clamp(11px, calc(var(--stageMin) * 3.8/100), 19px); color:var(--cream); background:rgba(255,255,255,.08); border:3px solid var(--ink); border-radius:999px; padding:.25em .7em; box-shadow:var(--sh-sm); } .is-board .sv-count[data-side="older"]{ color:var(--teal); } .is-board .sv-count[data-side="newer"]{ color:var(--gold); } .is-board .sv-crowd{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:92%; } /* Krzesełka: siatka kafli — obłożenie NA ŻYWO, kafel prawdy świeci przy reveal */ .is-board .ch-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(6px, calc(var(--stageMin) * 2/100), 12px); width:94%; } .is-board .ch-tile{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; background:var(--cream); border:3px solid var(--ink); border-radius:14px; box-shadow:var(--sh-sm); padding:clamp(5px,.8vh,10px) 4px; animation:popIn .45s var(--spring) both; } .is-board .ch-tile .ch-dd{ font-family:var(--font-display); font-weight:900; line-height:1.05; color:var(--ink); font-size:clamp(10px, calc(var(--stageMin) * 3.6/100), 18px); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .is-board .ch-tile .ch-dc{ font-family:var(--font-body); font-weight:800; color:var(--muted); font-size:clamp(8px, calc(var(--stageMin) * 2.8/100), 13px); } .is-board .ch-tile .ch-davs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:clamp(18px, calc(var(--stageMin) * 7/100), 36px); } .is-board .ch-tile.full{ opacity:.62; filter:saturate(.55); } .is-board .ch-tile.full .ch-dc{ color:var(--pink); } .is-board .ch-tile.win{ opacity:1; filter:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,197,49,.55), 4px 4px 0 var(--ink); animation:sealPop .55s var(--spring) both; } .is-board .ch-tile.win .ch-dc{ color:var(--ink); font-weight:900; } /* Nie Przebij: BUST-y na osi (różowe piny z 💥) + świetlny sweep do prawdy — pasek świetlny jedzie translateX wewnątrz PRZYCIĘTEGO wrappera o szerokości dokładnie do pinu prawdy (transform-only, bez animacji left/width) */ .is-board .bz-pin.bust .bz-dot{ background:var(--pink); } .is-board .bz-pin.bust .bz-tag{ background:var(--pink); } .is-board .bz-pin.bust .bz-tag .bz-year, .is-board .bz-pin.bust .bz-tag .bz-name{ color:var(--cream); } .is-board .pr-sweepwrap{ position:absolute; left:0; top:50%; height:10px; transform:translateY(-50%); overflow:hidden; border-radius:999px; pointer-events:none; } .is-board .pr-sweep{ display:block; width:100%; height:100%; background:linear-gradient(90deg, rgba(255,197,49,0) 0%, rgba(255,197,49,.35) 55%, var(--gold) 100%); transform:translateX(-100%); animation:prSweep 1.3s ease-out .35s both; } /* Napad: oś lidera na środku sceny + napastnicy bujający się nad nią */ .is-board .hs-head{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-display); font-weight:900; font-size:clamp(14px, calc(var(--stageMin) * 5/100), 26px); color:var(--gold); text-shadow:2px 3px 0 var(--ink); -webkit-text-stroke:.5px var(--ink); transform:rotate(-1.5deg); } .is-board .hs-head .crown{ width:1.2em; height:auto; filter:drop-shadow(1px 1px 0 var(--ink)); } .is-board .hs-raiders{ display:flex; justify-content:center; gap:8px; min-height:clamp(20px, calc(var(--stageMin) * 8/100), 40px); } .is-board .hs-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px; width:96%; } .is-board .hs-card{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; background:var(--cream); border:3px solid var(--ink); border-radius:10px; box-shadow:2px 2px 0 var(--ink); padding:.25em .5em; animation:popIn .45s var(--spring) both; } .is-board .hs-card .st{ width:5px; align-self:stretch; border-radius:4px; background:var(--pc); border:1.5px solid var(--ink); } .is-board .hs-card b{ font-family:var(--font-display); font-weight:900; line-height:1; color:var(--ink); font-size:clamp(11px, calc(var(--stageMin) * 4/100), 20px); letter-spacing:-.02em; } .is-board .hs-gap{ flex:0 0 auto; width:clamp(10px, calc(var(--stageMin) * 4/100), 20px); height:clamp(18px, calc(var(--stageMin) * 7/100), 34px); border:2.5px dashed var(--pc); border-radius:8px; opacity:.75; animation:slotPulse 1.5s ease-in-out infinite; } @keyframes svDrop{ 0%{ transform:translateY(0) rotate(0deg); opacity:1 } 100%{ transform:translateY(42px) rotate(24deg); opacity:.28 } } @keyframes hsBob{ 0%{ transform:translateY(0) } 100%{ transform:translateY(-7px) } } @keyframes prSweep{ 100%{ transform:translateX(0) } } /* ---- OVER (winner hero) ---- */ .panel.over .crown-hero{ width:calc(clamp(70px,calc(var(--stageMin) * 26/100),150px) * var(--sc)); height:auto; filter:drop-shadow(2px 4px 0 var(--ink)); transform:rotate(-6deg); animation:lean 2.6s ease-in-out infinite; } .panel.over .who{ font-size:calc(clamp(22px,3.2vw,44px) * var(--sc)); } /* ---- PODIUM 2/1/3 (over): kolory graczy, korona na #1, buźki graczy ---- */ .is-board .podium{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,calc(var(--stageMin) * 3/100),18px); margin-top:clamp(6px,1vh,14px); } .is-board .pod{ display:flex; flex-direction:column; align-items:center; gap:clamp(3px,.6vh,8px); width:clamp(64px,calc(var(--stageMin) * 24/100),120px); animation:podIn .55s var(--spring) both; } .is-board .pod.p2{ animation-delay:.15s; } .is-board .pod.p3{ animation-delay:.3s; } .is-board .pod.p1{ animation-delay:.5s; } .is-board .pod .pod-face{ position:relative; width:62%; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35)); } .is-board .pod .pod-face .crown{ position:absolute; left:50%; top:-30%; width:52%; height:auto; transform:translateX(-50%) rotate(-8deg); filter:drop-shadow(1px 2px 0 var(--ink)); animation:lean 2.6s ease-in-out infinite; } .is-board .pod .pod-name{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-display); font-weight:800; font-size:clamp(11px,calc(var(--stageMin) * 4.4/100),18px); color:var(--pc); text-shadow:2px 2px 0 var(--ink); } .is-board .pod .pod-block{ width:100%; background:var(--pc); border:4px solid var(--ink); border-radius:12px 12px 6px 6px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; padding-top:clamp(4px,.8vh,10px); overflow:hidden; } .is-board .pod.p1 .pod-block{ height:clamp(58px,calc(var(--stageMin) * 24/100),120px); } .is-board .pod.p2 .pod-block{ height:clamp(42px,calc(var(--stageMin) * 17/100),86px); } .is-board .pod.p3 .pod-block{ height:clamp(32px,calc(var(--stageMin) * 12/100),62px); } .is-board .pod .pod-rank{ font-family:var(--font-display); font-weight:900; line-height:1; font-size:clamp(16px,calc(var(--stageMin) * 7/100),34px); color:var(--ink); } .is-board .pod .pod-cards{ font-family:var(--font-body); font-weight:800; white-space:nowrap; font-size:clamp(8px,calc(var(--stageMin) * 3/100),13px); color:var(--ink); opacity:.8; } @keyframes podIn{ 0%{ opacity:0; transform:translateY(26px) scale(.7) } 100%{ opacity:1; transform:translateY(0) scale(1) } } /* ---- NAGRODY (over): chipy 🎯/💀/⚡ odsłaniane kolejno (delay inline per chip) ---- */ .is-board .awards{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(6px,.8vw,12px); max-width:94%; } .is-board .award{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:800; font-size:clamp(10px,calc(var(--stageMin) * 3.6/100),15px); color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.35em .8em; box-shadow:var(--sh-sm); animation:awardIn .5s var(--spring) both; } .is-board .award b{ font-weight:800; white-space:nowrap; } .is-board .award .aname{ color:var(--pc,var(--pink)); white-space:nowrap; max-width:9em; overflow:hidden; text-overflow:ellipsis; } .is-board .award .aval{ font-family:var(--font-body); font-weight:800; color:var(--muted); white-space:nowrap; } @keyframes awardIn{ 0%{ opacity:0; transform:translateY(14px) scale(.6) } 100%{ opacity:1; transform:none } } /* ---- REVEAL ---- */ /* seal sits ABOVE the card as a stacked badge (not a corner overlap that covered the year). Phone-style verdict: the starburst holds an ICON (check/cross); the word lives in a SEPARATE pill banner below it — text INSIDE the starburst clipped its points on the TV. */ .is-board .reveal-stack{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,calc(var(--stageMin) * 3/100),18px); } .reveal .seal{ position:relative; z-index:3; width:clamp(80px, calc(var(--stageMin) * 24/100), 140px); } .reveal .seal svg.star{ width:100%; height:auto; display:block; filter:drop-shadow(5px 6px 0 rgba(0,0,0,.3)); } .reveal .seal .sicon{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ink); } .reveal .seal .sicon svg{ width:46%; height:46%; } .reveal .seal{ animation:sealPop .6s var(--spring) both, sealWobble 2.6s ease-in-out .6s infinite; } /* word banner (pill) below the starburst — teal=correct, pink=wrong; sizes to text so it never clips */ .is-board .bword{ font-family:var(--font-display); font-weight:900; font-size:clamp(18px, calc(var(--stageMin) * 6/100), 40px); color:var(--ink); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; background:var(--teal); border:4px solid var(--ink); border-radius:16px; padding:.14em .7em; box-shadow:var(--sh-sm); transform:rotate(-2deg); } .is-board .bword.bad{ background:var(--pink); color:var(--cream); -webkit-text-stroke:.5px var(--ink); } @keyframes sealPop{ 0%{ transform:scale(0) rotate(-40deg) } 100%{ transform:scale(1) rotate(0) } } @keyframes sealWobble{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } } .is-board .bigcard{ background:var(--cream); border:5px solid var(--ink); border-radius:26px; box-shadow:var(--sh); padding:clamp(14px,calc(var(--seatH) * 4/100),26px) clamp(20px,calc(var(--seatW) * 7/100),40px); display:flex; flex-direction:column; align-items:center; gap:clamp(4px,.6vh,10px); transform:rotate(1.5deg); } .is-board .bigcard .bstrip{ width:64%; height:9px; border-radius:9px; background:var(--teal); border:2px solid var(--ink); margin-bottom:6px; } .is-board .bigcard .byear{ font-family:var(--font-display); font-weight:900; font-size:clamp(46px,calc(var(--stageMin) * 17/100),120px); color:var(--ink); line-height:.82; letter-spacing:-.03em; } .is-board .bigcard .btitle{ font-family:var(--font-display); font-weight:800; color:var(--pink); font-size:clamp(15px,calc(var(--stageMin) * 5/100),32px); line-height:1; max-width:100%; text-align:center; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .is-board .bigcard .bartist{ font-family:var(--font-body); font-weight:800; color:var(--muted); font-size:clamp(11px,calc(var(--stageMin) * 3.4/100),20px); text-transform:uppercase; letter-spacing:.12em; max-width:100%; text-align:center; white-space:normal; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ---- PASS REVEAL („karta wędruje", config cardPass): pudło nie odkrywa karty — werdykt + sztafeta od→do. Strzałka animowana transform/opacity-only (CAST-LITE). ---- */ .panel.passreveal .mascot{ width:calc(clamp(90px, calc(var(--stageMin) * 34/100), 190px) * var(--sc)); filter:drop-shadow(8px 12px 0 rgba(0,0,0,.35)); } .is-board .pass-flow{ display:flex; align-items:center; justify-content:center; gap:clamp(8px, calc(var(--stageMin) * 3/100), 20px); max-width:96%; } .is-board .pass-name{ font-family:var(--font-display); font-weight:800; color:var(--cream); font-size:calc(clamp(15px, calc(var(--stageMin) * 5/100), 30px) * var(--sc)); background:rgba(255,255,255,.06); border:3px solid var(--ink); border-radius:999px; padding:.3em .8em; box-shadow:4px 4px 0 var(--pc, var(--pink)); max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .is-board .pass-arrow{ flex:0 0 auto; color:var(--gold); line-height:1; font-size:calc(clamp(20px, calc(var(--stageMin) * 7/100), 44px) * var(--sc)); text-shadow:2px 3px 0 var(--ink); animation:passArrow .9s ease-in-out infinite; } @keyframes passArrow{ 0%,100%{ transform:translateX(-8%); opacity:.7 } 50%{ transform:translateX(16%); opacity:1 } } .is-board .pass-count{ font-family:var(--font-display); font-weight:800; font-size:clamp(12px, calc(var(--stageMin) * 3.6/100), 20px); color:var(--cream); text-shadow:2px 2px 0 var(--ink); } /* badge łańcucha na panelu tury („karta wędruje · próba k/n") — złota odmiana chipa */ .is-board .chip.passchip{ background:var(--gold); } /* ========================================================================== ============================ PHONE (is-phone) ============================ ========================================================================== */ /* ---------- phone shell ---------- */ .app{ position:relative; z-index:2; width:100%; max-width:460px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } /* dev-only preview toggle bar (kept for parity with the mock) */ .devbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding: calc(7px + env(safe-area-inset-top)) 10px 8px; background:linear-gradient(180deg, rgba(18,6,38,.9), rgba(18,6,38,.55) 70%, transparent); backdrop-filter:blur(4px); } .devbar .lbl{ font-family:var(--font-display); font-weight:700; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); opacity:.85; width:100%; text-align:center; } /* ---------- screens ---------- */ /* flex:1 0 auto → screens grow to fill a short viewport (button sits at the bottom) but NEVER shrink below their content, so a long screen makes the page scroll. */ .screens{ position:relative; flex:1 0 auto; display:flex; min-height:0; } .screen{ display:none; flex:1 1 auto; min-width:0; flex-direction:column; padding: clamp(16px,4.5vw,24px); padding-bottom: calc(clamp(16px,4.5vw,24px) + env(safe-area-inset-bottom)); gap: clamp(12px,3vw,18px); } body.is-phone[data-screen="join"] .screen.join, body.is-phone[data-screen="lobby"] .screen.lobby, body.is-phone[data-screen="turnme"] .screen.turnme, body.is-phone[data-screen="turnwait"] .screen.turnwait, body.is-phone[data-screen="reveal"] .screen.reveal, body.is-phone[data-screen="blitz"] .screen.blitz, body.is-phone[data-screen="blitzreveal"] .screen.blitzreveal, body.is-phone[data-screen="rushvote"] .screen.rushvote, body.is-phone[data-screen="rushround"] .screen.rushround, body.is-phone[data-screen="rushreward"] .screen.rushreward, body.is-phone[data-screen="over"] .screen.over{ display:flex; animation:popInSm .45s var(--spring) both; } @keyframes popInSm{ 0%{ opacity:0; transform:scale(.94) translateY(12px) } 100%{ opacity:1; transform:scale(1) translateY(0) } } /* ---------- shared phone bits ---------- */ .appbar{ display:flex; align-items:center; gap:12px; } .spacer{ flex:1; } .iconbtn{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:14px; box-shadow:var(--sh-sm); cursor:pointer; transition:transform .18s var(--spring), box-shadow .18s ease; } .iconbtn:hover{ transform:translate(-1px,-2px); } .iconbtn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .iconbtn:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; } .iconbtn svg{ width:24px; height:24px; } h1.title{ font-family:var(--font-display); font-weight:900; color:var(--cream); font-size:clamp(26px,8.5vw,40px); line-height:.98; letter-spacing:-.01em; text-shadow:3px 4px 0 var(--ink); } h2.sub{ font-family:var(--font-display); font-weight:800; color:var(--cream); font-size:clamp(18px,5.5vw,26px); line-height:1.02; text-shadow:2px 3px 0 var(--ink); } /* big primary button (sticker) */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px; padding:14px 18px; line-height:1.15; font-family:var(--font-display); font-weight:800; font-size:clamp(17px,5vw,22px); color:var(--cream); background:var(--pink); border:4px solid var(--ink); border-radius:20px; box-shadow:var(--sh); cursor:pointer; letter-spacing:.01em; transition:transform .16s var(--spring), box-shadow .16s ease, background .16s ease, filter .16s ease; } .btn svg{ width:1.3em; height:1.3em; } .btn:hover{ transform:translate(-1px,-3px); box-shadow:8px 9px 0 var(--ink); } .btn:active{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); } .btn:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; } .btn.gold{ background:var(--gold); color:var(--ink); } .btn.teal{ background:var(--teal); color:var(--ink); } .btn.ghost{ background:rgba(255,255,255,.06); color:var(--cream); box-shadow:var(--sh-sm); } .btn[disabled]{ filter:grayscale(.5) opacity(.55); cursor:not-allowed; transform:none; box-shadow:var(--sh-sm); } /* sticker text field */ .field{ width:100%; min-height:60px; font-family:var(--font-display); font-weight:800; font-size:clamp(18px,5vw,22px); color:var(--ink); background:var(--cream); border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh); padding:.5em .9em; letter-spacing:.01em; transition:transform .16s var(--spring), box-shadow .16s ease; } .field::placeholder{ color:var(--muted); font-weight:800; } .field:focus{ outline:none; transform:translate(-1px,-2px) rotate(-.6deg); box-shadow:8px 9px 0 var(--ink); } /* ---------- player sticker rows (lobby / final standings) ---------- */ .plist{ display:flex; flex-direction:column; gap:11px; } .prow{ display:flex; align-items:center; gap:12px; background:var(--cream); border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh-sm); padding:10px 12px; transform:rotate(var(--tilt,0deg)); } .prow .pavatar{ width:42px; height:42px; flex:0 0 auto; border-radius:13px; border:3px solid var(--ink); background:var(--pc); box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; color:var(--ink); transform:rotate(-4deg); } .prow .pavatar svg{ width:64%; height:64%; } .prow .pname{ font-family:var(--font-display); font-weight:800; font-size:clamp(16px,4.6vw,20px); color:var(--pc-ink,var(--ink)); line-height:1; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-stroke:.6px var(--ink); } .prow .crown{ width:24px; height:auto; flex:0 0 auto; filter:drop-shadow(1px 1px 0 var(--ink)); transform:rotate(8deg); } .prow .you{ font-family:var(--font-display); font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); background:var(--ink); border-radius:999px; padding:.28em .6em; flex:0 0 auto; } .prow .pcount{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); background:var(--cream-2); border:2.5px solid var(--ink); border-radius:999px; padding:.16em .55em; flex:0 0 auto; } .prow .pcount svg{ width:1em; height:1em; } .prow .rank{ font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--ink); width:1.4em; text-align:center; flex:0 0 auto; opacity:.55; } .prow.win{ background:var(--gold); box-shadow:var(--sh); transform:rotate(-1.5deg) scale(1.02); } .prow.off{ opacity:.55; filter:grayscale(.3); } /* disconnected player */ /* ---------- "gra muzyka…" now-playing indicator ---------- */ .nowplaying{ display:inline-flex; align-items:center; gap:11px; background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:7px 16px 7px 8px; box-shadow:var(--sh-sm); align-self:center; } .nowplaying .mini{ width:34px; height:34px; flex:0 0 auto; } .nowplaying .mini .v-spin{ animation-duration:3.2s; } .nowplaying .np-txt{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); } .eq{ display:inline-flex; align-items:flex-end; gap:3px; height:18px; } .eq i{ width:4px; height:6px; border-radius:2px; background:var(--pink); animation:eq .85s ease-in-out infinite; } .eq i:nth-child(2){ background:var(--teal); animation-delay:.14s; } .eq i:nth-child(3){ background:var(--violet); animation-delay:.28s; } .eq i:nth-child(4){ background:var(--gold); animation-delay:.42s; } @keyframes eq{ 0%,100%{ height:6px } 50%{ height:18px } } /* ---------- karta PROMPT na telefonie (gry bez muzyki — zamiast "gra muzyka…") ---------- */ .is-phone .promptcard{ display:flex; flex-direction:column; align-items:center; gap:4px; align-self:center; background:var(--cream); border:4px solid var(--ink); border-radius:16px; box-shadow:var(--sh-sm); transform:rotate(-1.5deg); padding:10px 16px; max-width:100%; animation:popInSm .45s var(--spring) both; } .is-phone .promptcard .pk{ font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .is-phone .promptcard .pt{ font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:clamp(16px,4.8vw,21px); line-height:1.15; text-align:center; overflow-wrap:anywhere; word-break:break-word; } /* ---------- phone timeline: VERTICAL scrollable list (oldest top → newest bottom) ---------- */ .tl-wrap{ display:flex; flex-direction:column; gap:8px; min-height:0; } .tl-label{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); } /* On your turn, the WHOLE screen (header + timeline) scrolls as ONE page (normal document flow); only the confirm/skip actions stay pinned at the bottom. (Blitz i rundy Rusha reużywają ten sam przyklejony pasek akcji.) */ .is-phone .screen.turnme .turn-actions, .is-phone .screen.blitz .turn-actions, .is-phone .screen.rushvote .turn-actions, .is-phone .screen.rushround .turn-actions{ position:sticky; bottom:0; z-index:5; margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:12px 0 calc(10px + env(safe-area-inset-bottom)); margin-inline: calc(-1 * clamp(16px,4.5vw,24px)); padding-inline: clamp(16px,4.5vw,24px); /* full-bleed, content still inset */ background: linear-gradient(to top, var(--bg-0) 62%, rgba(28,10,62,0)); /* soft fade so scrolling cards blend out (no cut band) */ } .is-phone .timeline{ display:flex; flex-direction:column; align-items:stretch; gap:15px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; width:100%; max-width:390px; margin-inline:auto; /* węższa lista, powietrze po bokach */ padding:6px 6px 14px 6px; scrollbar-width:thin; scrollbar-color:var(--pc,var(--pink)) rgba(255,255,255,.10); } /* your turn: the list flows with the page — no internal scroll (one document scroll) */ .is-phone .screen.turnme .timeline{ overflow:visible; } /* Wciskanie (rush): ten sam slot-picker na własnej osi — lista płynie ze stroną */ .is-phone .screen.rushround .timeline{ overflow:visible; } /* read-only preview (someone else guessing): cap height so long timelines scroll too */ .is-phone .screen.turnwait .timeline{ max-height:44vh; } .is-phone .timeline::-webkit-scrollbar{ width:6px; } .is-phone .timeline::-webkit-scrollbar-track{ background:rgba(255,255,255,.10); border-radius:999px; } .is-phone .timeline::-webkit-scrollbar-thumb{ background:var(--pc,var(--pink)); border-radius:999px; border:1px solid var(--ink); } /* ---------- szyna KIERUNKU osi (DAWNIEJ ↑ … PÓŹNIEJ ↓) przy lewej krawędzi ---------- */ /* .tl-rail (railWrap w play.html) przejmuje szerokość/centrowanie osi (390px), oś w środku wraca do 100%. Szyna = wąska kolumna: mini-maskotka GRY na górze (motyw za darmo — winyl/klepsydra), przerywana linia w kolorze gracza i grot-naklejka na dole. pointer-events:none → zero wpływu na tapy slotów, scroll i sticky pasek akcji. Subtelnie: przewodnik, nie dekoracja. */ .is-phone .tl-rail{ display:flex; align-items:stretch; gap:7px; min-height:0; width:100%; max-width:390px; margin-inline:auto; } .is-phone .tl-rail .timeline{ max-width:none; margin-inline:0; flex:1 1 auto; min-width:0; } .is-phone .rail{ position:relative; flex:0 0 32px; display:flex; flex-direction:column; align-items:center; padding:2px 0; pointer-events:none; } /* okrągły znaczek maskotki na szczycie osi (kotwica, motyw za darmo: winyl/klepsydra) */ .is-phone .rail .rail-cap{ flex:0 0 auto; z-index:2; width:26px; height:26px; display:grid; place-items:center; background:var(--cream); border:3px solid var(--ink); border-radius:50%; box-shadow:var(--sh-sm); overflow:hidden; } .is-phone .rail .rail-cap svg{ display:block; width:80%; height:80%; } .is-phone .rail .v-spin{ animation:none; } /* mini-znaczek nie wiruje… */ .is-phone .rail .hg-stream{ animation:none; } /* …ani nie sypie piaskiem */ /* gruby kręgosłup — pełny, kolor gracza, tuszowy kontur + twardy cień (jak karty) */ .is-phone .rail .rail-spine{ flex:1 1 auto; min-height:22px; width:11px; margin-top:-4px; /* wchodzi pod znaczek = jedność */ background:var(--pc,var(--pink)); border:3px solid var(--ink); border-bottom:0; border-radius:8px 8px 0 0; box-shadow:var(--sh-sm); } /* grot: otwarta ścieżka (2 ukosy) → górna krawędź bez konturu, tuli się pod kręgosłup */ .is-phone .rail .rail-tip{ flex:0 0 auto; width:23px; height:auto; margin-top:-3px; z-index:1; filter:drop-shadow(3px 3px 0 var(--ink)); } .is-phone .rail .rail-tip path{ fill:var(--pc,var(--pink)); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; } /* napisy DAWNIEJ/PÓŹNIEJ przy LEWEJ krawędzi szyny (odsunięte od kręgosłupa, nie nachodzą) */ .is-phone .rail .rail-lbl{ position:absolute; left:0; width:11px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:7px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; } .is-phone .rail .rail-lbl.top{ top:34px; } .is-phone .rail .rail-lbl.bot{ bottom:26px; } /* year card — a full-width sticker ROW: colored spine · year · title */ .is-phone .ycard{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:12px; background:var(--cream); border:3px solid var(--ink); border-radius:15px; box-shadow:var(--sh-sm); padding:9px 13px; transform:rotate(var(--tilt,0deg)); } .is-phone .ycard .strip{ flex:0 0 auto; width:7px; align-self:stretch; min-height:34px; height:auto; border-radius:6px; background:var(--pc,var(--pink)); border:2px solid var(--ink); } .is-phone .ycard .yr{ flex:0 0 auto; font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink); line-height:.95; letter-spacing:-.02em; } .is-phone .ycard .meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .is-phone .ycard .ttl{ text-align:left; font-family:var(--font-body); font-weight:800; font-size:13px; color:var(--ink); line-height:1.1; text-transform:uppercase; letter-spacing:.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .is-phone .ycard .art{ font-family:var(--font-body); font-weight:800; font-size:11px; color:var(--muted); line-height:1.05; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* tappable dashed INSERT slot — full-width bar (≥44px tap) before/between/after cards */ .is-phone .slot{ flex:0 0 auto; width:100%; min-height:62px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:3px dashed var(--pc,var(--pink)); border-radius:13px; color:var(--pc,var(--pink)); cursor:pointer; transition:transform .16s var(--spring), background .16s ease, border-color .16s ease, box-shadow .16s ease, min-height .16s ease; animation:slotBar 1.5s ease-in-out infinite; } .is-phone .slot .plus{ display:inline-flex; align-items:center; justify-content:center; } .is-phone .slot .plus svg{ width:26px; height:26px; } .is-phone .slot:active{ transform:translateY(1px); } .is-phone .slot.sel{ background:var(--pc,var(--pink)); border-style:solid; color:var(--ink); box-shadow:var(--sh-sm); animation:none; min-height:70px; } .is-phone .slot.sel .plus{ display:none; } .is-phone .slot .here{ display:none; } .is-phone .slot.sel .here{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:900; font-size:15px; color:var(--ink); text-transform:uppercase; letter-spacing:.06em; } .is-phone .slot.sel .here svg{ width:20px; height:20px; } /* phone insert-slot breathing glow (no scale → nothing clips in the scroll box; the board keeps its own scale-based slotPulse below, unchanged) */ @keyframes slotBar{ 0%,100%{ background:rgba(255,255,255,.05) } 50%{ background:rgba(255,255,255,.12) } } /* slotPulse is shared by both surfaces */ @keyframes slotPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } } /* ---------- phone BLITZ: suwak roku + dymek wartości + widok „czekamy" ---------- */ .is-phone .bz-title{ color:var(--gold); -webkit-text-stroke:1px var(--ink); transform:rotate(-2deg); } .is-phone .bz-slider{ display:flex; flex-direction:column; gap:14px; padding:4px 2px; } .is-phone .bz-bubble{ align-self:center; min-width:3.2em; text-align:center; font-family:var(--font-display); font-weight:900; font-size:clamp(42px,13vw,58px); line-height:1; color:var(--gold); text-shadow:3px 4px 0 var(--ink); -webkit-text-stroke:1px var(--ink); } .is-phone input[type="range"].bz-range{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:20px; border-radius:999px; background:rgba(255,255,255,.10); border:3px solid var(--ink); box-shadow:var(--sh-sm); outline:none; } .is-phone .bz-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:40px; height:40px; border-radius:50%; background:var(--gold); border:4px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; } .is-phone .bz-range::-moz-range-thumb{ width:34px; height:34px; border-radius:50%; background:var(--gold); border:4px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; } .is-phone .bz-range:focus-visible{ outline:3px solid var(--teal); outline-offset:4px; } .is-phone .bz-minmax{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.08em; color:var(--violet); } /* ---------- phone RUSH (M5): głosowanie + widełki + nagroda ---------- */ /* karty głosowania — dwie duże naklejki (jak coll-card, ale hero) */ .is-phone .mg-list{ display:flex; flex-direction:column; gap:14px; } .is-phone .mg-card{ position:relative; display:flex; align-items:center; gap:14px; text-align:left; width:100%; padding:16px 14px; border-radius:18px; cursor:pointer; background:var(--cream); border:4px solid var(--ink); box-shadow:var(--sh); color:var(--ink); transition:transform .16s var(--spring), box-shadow .16s ease, opacity .16s ease, filter .16s ease; } .is-phone .mg-card:active{ transform:translate(2px,2px); box-shadow:var(--sh-sm); } .is-phone .mg-card .mg-ico{ font-size:34px; line-height:1; flex:0 0 auto; } .is-phone .mg-card .mg-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; } .is-phone .mg-card .mg-name{ font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.05; } .is-phone .mg-card .mg-hook{ font-family:var(--font-body); font-weight:800; font-size:12px; color:var(--muted); line-height:1.2; } .is-phone .mg-card .mg-count{ flex:0 0 auto; min-width:1.9em; text-align:center; font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--ink); background:var(--gold); border:3px solid var(--ink); border-radius:999px; padding:.14em .4em; box-shadow:2px 2px 0 var(--ink); } /* po oddaniu głosu: wybrana karta świeci, reszta gaśnie (tap zablokowany) */ .is-phone .mg-card.sel{ border-color:var(--gold); box-shadow:5px 5px 0 var(--gold); transform:translateY(-1px); } .is-phone .mg-card.locked{ opacity:.55; filter:saturate(.6); cursor:default; } .is-phone .mg-card.locked.sel{ opacity:1; filter:none; } /* Widełki: rząd trzech przycisków szerokości pod suwakiem (±2/±5/±12) */ .is-phone .bz-widths{ display:flex; gap:10px; } .is-phone .wbtn{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:16px; cursor:pointer; font-family:var(--font-display); color:var(--cream); background:rgba(255,255,255,.06); border:3px solid var(--ink); box-shadow:var(--sh-sm); transition:transform .16s var(--spring), background .16s ease, box-shadow .16s ease, color .16s ease; } .is-phone .wbtn b{ font-weight:900; font-size:20px; line-height:1; } .is-phone .wbtn small{ font-family:var(--font-body); font-weight:800; font-size:11px; opacity:.8; } .is-phone .wbtn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .is-phone .wbtn.on{ background:var(--gold); color:var(--ink); box-shadow:5px 5px 0 var(--ink); transform:translateY(-2px) rotate(-1.5deg); } /* nagroda: rząd zdobytych kart (chipy rok+tytuł) na ekranie wyniku */ .is-phone .gainrow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .is-phone .gainchip{ display:inline-flex; align-items:center; gap:.5em; max-width:100%; font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--ink); background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.4em .8em; box-shadow:var(--sh-sm); animation:popInSm .45s var(--spring) both; } .is-phone .gainchip .gy{ color:var(--pink); } .is-phone .gainchip .gt{ font-family:var(--font-body); font-weight:800; color:var(--muted); max-width:11em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* blitz reveal (telefon): banner zwycięzcy + linia „ile lat od prawdy" */ .is-phone .bz-banner{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-weight:900; font-size:clamp(16px,4.8vw,21px); color:var(--ink); background:var(--gold); border:4px solid var(--ink); border-radius:14px; padding:.2em .7em; box-shadow:var(--sh-sm); transform:rotate(-2deg); animation:sealPop .55s var(--spring) both; } .is-phone .bz-banner.none{ background:var(--pink); color:var(--cream); -webkit-text-stroke:.5px var(--ink); } .is-phone .bz-delta{ font-family:var(--font-display); font-weight:800; font-size:15px; text-align:center; color:var(--cream); text-shadow:2px 2px 0 var(--ink); } /* ---------- phone RUSH M5b: Sito / Krzesełka / Napad ---------- */ /* Sito: karta-kotwica progu (naklejka jak promptcard) + dwa WIELKIE przyciski */ .is-phone .sv-gate{ display:flex; flex-direction:column; align-items:center; gap:3px; align-self:center; background:var(--cream); border:4px solid var(--ink); border-radius:16px; box-shadow:var(--sh-sm); transform:rotate(-1.5deg); padding:10px 20px; max-width:100%; animation:popInSm .45s var(--spring) both; } .is-phone .sv-gate .sv-q{ font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .is-phone .sv-gate .sv-year{ font-family:var(--font-display); font-weight:900; font-size:clamp(34px,11vw,46px); line-height:1; color:var(--ink); letter-spacing:-.02em; } .is-phone .sv-gate .sv-ttl{ font-family:var(--font-body); font-weight:800; font-size:12px; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .is-phone .sv-gate .sv-owner{ font-family:var(--font-body); font-weight:800; font-size:11px; color:var(--pink); } .is-phone .bin-btns{ display:flex; flex-direction:column; gap:12px; } .is-phone .bin-btns .btn{ min-height:76px; font-size:clamp(20px,6.2vw,26px); } .is-phone .bin-btns .btn[disabled]{ filter:grayscale(.5) opacity(.55); } /* Krzesełka: siatka kafli-przycisków — licznik wolnych + kropki siedzących */ .is-phone .ch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .is-phone .ch-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:12px 8px; border-radius:16px; cursor:pointer; background:var(--cream); border:3px solid var(--ink); box-shadow:var(--sh-sm); color:var(--ink); transition:transform .16s var(--spring), box-shadow .16s ease, opacity .16s ease, filter .16s ease; } .is-phone .ch-tile:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .is-phone .ch-tile .ch-dd{ font-family:var(--font-display); font-weight:900; font-size:15px; line-height:1.1; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .is-phone .ch-tile .ch-dc{ font-family:var(--font-body); font-weight:800; font-size:11px; color:var(--muted); } .is-phone .ch-tile .ch-davs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:22px; } .is-phone .ch-tile.dis{ opacity:.45; filter:saturate(.55); cursor:default; } .is-phone .ch-tile.dis .ch-dc{ color:var(--pink); } .is-phone .ch-tile.sel{ opacity:1; filter:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold), 4px 4px 0 var(--ink); transform:translateY(-1px); } .is-phone .mav{ display:inline-grid; place-items:center; overflow:hidden; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--pc,var(--pink)); border:2.5px solid var(--ink); box-shadow:1px 1px 0 var(--ink); animation:popInSm .4s var(--spring) both; } .is-phone .mav svg{ width:88%; height:auto; display:block; } .is-phone .mav.drop{ opacity:.35; filter:saturate(.4); } /* Napad: banner obrony lidera nad osią */ .is-phone .hs-defend{ align-self:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-weight:900; font-size:clamp(16px,4.8vw,21px); color:var(--cream); background:var(--pink); border:4px solid var(--ink); border-radius:14px; padding:.2em .7em; box-shadow:var(--sh-sm); transform:rotate(-2deg); -webkit-text-stroke:.5px var(--ink); animation:sealPop .55s var(--spring) both; } /* ---------- phone reveal: verdict seal + big card (stagebox też dla blitz-reveal i rush-reward) ---------- */ .reveal .stagebox, .blitzreveal .stagebox, .rushreward .stagebox{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,4vw,22px); } .verdict{ display:flex; flex-direction:column; align-items:center; gap:10px; } .vseal{ position:relative; width:clamp(96px,26vw,124px); animation:sealPop .55s var(--spring) both, sealWobble 2.6s ease-in-out .55s infinite; } .vseal svg.star{ width:100%; height:auto; display:block; filter:drop-shadow(4px 5px 0 rgba(0,0,0,.3)); } .vseal .vicon{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ink); } .vseal .vicon svg{ width:46%; height:46%; } .vword{ font-family:var(--font-display); font-weight:900; font-size:clamp(24px,7.5vw,34px); color:var(--ink); letter-spacing:.02em; text-transform:uppercase; background:var(--teal); border:4px solid var(--ink); border-radius:14px; padding:.14em .7em; box-shadow:var(--sh-sm); transform:rotate(-2deg); } .vword.bad{ background:var(--pink); color:var(--cream); -webkit-text-stroke:.5px var(--ink); } .is-phone .bigcard{ background:var(--cream); border:5px solid var(--ink); border-radius:24px; box-shadow:var(--sh); padding:clamp(14px,4vw,22px) clamp(20px,6vw,34px); display:flex; flex-direction:column; align-items:center; gap:4px; transform:rotate(1.5deg); max-width:100%; } .is-phone .bigcard .bstrip{ width:64%; height:9px; border-radius:9px; background:var(--teal); border:2px solid var(--ink); margin-bottom:6px; } .is-phone .bigcard .byear{ font-family:var(--font-display); font-weight:900; font-size:clamp(56px,17vw,84px); color:var(--ink); line-height:.82; letter-spacing:-.03em; } .is-phone .bigcard .btitle{ font-family:var(--font-display); font-weight:800; color:var(--pink); font-size:clamp(17px,5vw,24px); line-height:1.02; text-align:center; max-width:100%; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .is-phone .bigcard .bartist{ font-family:var(--font-body); font-weight:800; color:var(--muted); font-size:clamp(12px,3.6vw,16px); text-transform:uppercase; letter-spacing:.12em; max-width:100%; text-align:center; white-space:normal; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ---------- over: winner ---------- */ .winner{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; } .winner .crown-big{ width:clamp(52px,15vw,74px); height:auto; filter:drop-shadow(2px 3px 0 var(--ink)); transform:rotate(-6deg); animation:lean 2.6s ease-in-out infinite; } .winner .wname{ font-family:var(--font-display); font-weight:900; font-size:clamp(34px,11vw,52px); color:var(--pc,var(--pink)); line-height:.95; text-shadow:4px 5px 0 var(--ink); -webkit-text-stroke:1.5px var(--ink); transform:rotate(-2deg); animation:whoPop 2.4s ease-in-out infinite; } /* who is guessing (turn-wait) */ .who-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; } .who-lead{ font-family:var(--font-display); font-weight:700; font-size:clamp(15px,4.4vw,20px); color:var(--cream); text-shadow:2px 2px 0 var(--ink); } .who-name{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--font-display); font-weight:900; font-size:clamp(40px,13vw,64px); color:var(--who,var(--pink)); line-height:1.05; text-shadow:4px 5px 0 var(--ink); -webkit-text-stroke:1.5px var(--ink); transform:rotate(-2deg); animation:whoPop 2.4s ease-in-out infinite; } /* center helpers */ .center-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(12px,3.5vw,18px); text-align:center; } .push{ margin-top:auto; } /* ---------- host bottom sheet ---------- */ .scrim{ position:fixed; inset:0; z-index:60; background:rgba(10,3,26,.55); opacity:0; pointer-events:none; transition:opacity .25s ease; } .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; width:100%; max-width:460px; margin:0 auto; background:radial-gradient(120% 100% at 50% 0%, var(--bg-1), var(--bg-0)); border-top:4px solid var(--ink); border-left:4px solid var(--ink); border-right:4px solid var(--ink); border-radius:30px 30px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,.55); padding:14px 18px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; transform:translateY(115%); transition:transform .38s var(--spring); } body.menu-open .scrim{ opacity:1; pointer-events:auto; } body.menu-open .sheet{ transform:translateY(0); } .sheet .handle{ width:52px; height:6px; border-radius:999px; background:rgba(255,255,255,.28); align-self:center; } .sheet .shead{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--cream); text-shadow:2px 2px 0 var(--ink); } .sheet .shead svg{ width:20px; height:20px; color:var(--gold); } /* ============================ 9 · MOTION ================================= */ @keyframes spin{ to{ transform:rotate(360deg) } } @keyframes wave{ 0%,100%{ transform:rotate(-9deg) } 50%{ transform:rotate(16deg) } } @keyframes lean{ 0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(5deg) } } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }