/* TetraXO — Cosmic-Winter Spider-Verse UI */ :root { --cyan: #00F5D4; --cyan2: #00F0FF; --gold: #FFD700; --amber: #FF6B00; --magenta: #FF2BD6; --space: #020206; --ink: #05050a; --sapphire: #1a3fd6; --white: #f4f8ff; --vh: 1vh; --font-display: 'Russo One', 'Exo 2', system-ui, sans-serif; --font-body: 'Exo 2', system-ui, sans-serif; /* G_34 2: safe-area з ГАРАНТОВАНИМ мінімумом — на Android Chrome env() майже завжди 0, а кути девайсів закруглені (Xiaomi 14 тощо): жоден елемент не стоїть впритул до краю, усе має свій простір на будь-якому девайсі */ --sat: max(env(safe-area-inset-top, 0px), 10px); --sab: max(env(safe-area-inset-bottom, 0px), 10px); --sal: max(env(safe-area-inset-left, 0px), 16px); --sar: max(env(safe-area-inset-right, 0px), 16px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: var(--space); color: var(--white); font-family: var(--font-body); touch-action: none; overscroll-behavior: none; } #app-root { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--space); } #gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } #ui-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; } #ui-layer > * { pointer-events: auto; } #fx-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } /* ---------- Portrait: rotate whole app into landscape (no "rotate device" screen) ---------- */ @media (orientation: portrait) { #app-root { width: 100vh; width: 100dvh; height: 100vw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; } } /* ---------- Generic ---------- */ .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: screen-in 260ms ease-out; } @keyframes screen-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } } .hidden { display: none !important; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(11px, 2.6vh, 20px); padding: clamp(6px, 1.5vh, 14px) clamp(14px, 3.2vh, 34px); color: var(--white); background: linear-gradient(160deg, rgba(10,14,40,.92), rgba(4,6,20,.95)); border: 2px solid var(--cyan); border-radius: 6px; cursor: pointer; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 var(--magenta), -2px -2px 0 rgba(0,245,212,.35), 0 0 18px rgba(0,245,212,.25); transition: transform 90ms ease, box-shadow 120ms ease, filter 120ms ease; min-height: clamp(34px, 7vh, 60px); white-space: nowrap; } .btn:active { transform: translate(2px,2px) scale(.98); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 1px 1px 0 var(--magenta); } .btn.gold { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 var(--amber), 0 0 22px rgba(255,215,0,.35); } .btn.danger { border-color: #ff3355; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 #7a0020, 0 0 18px rgba(255,51,85,.35); } .btn.small { font-size: clamp(9px, 1.9vh, 14px); padding: clamp(4px, 1vh, 8px) clamp(10px, 2vh, 18px); min-height: clamp(28px, 5vh, 42px); } .btn.ghost { background: rgba(2,3,10,.55); box-shadow: 0 0 0 2px rgba(0,0,0,.5); } .btn.selected { background: linear-gradient(160deg, rgba(0,245,212,.35), rgba(0,120,140,.35)); border-color: #fff; } .btn:disabled, .btn.disabled { opacity: .45; filter: grayscale(.6); pointer-events: none; } .btn.arrow { width: clamp(40px, 8vh, 70px); padding: 0; font-size: clamp(16px, 4vh, 34px); border-radius: 50%; } /* ---------- Comic title ---------- */ .comic-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; line-height: 1; font-size: clamp(16px, 4.2vh, 42px); color: var(--white); text-shadow: 3px 3px 0 var(--magenta), -2px -2px 0 var(--cyan), 0 0 24px rgba(0,245,212,.5); } .comic-sub { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(9px, 1.8vh, 14px); color: var(--cyan); opacity: .9; } /* ---------- Main Menu ---------- */ #menu-screen { justify-content: flex-start; } #menu-stack { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6vh, 14px); } .menu-core { display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 12px); align-items: stretch; } .menu-core .btn { min-width: clamp(180px, 34vh, 340px); } /* ---------- HUD ---------- */ .hud-top { position: absolute; top: calc(var(--sat) + 1vh); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 2vw; pointer-events: none; } @keyframes blink { 50% { opacity: .35; } } #btn-pause { position: absolute; top: calc(var(--sat) + 1vh); right: calc(var(--sar) + 1vh); } #hero-name { position:absolute; bottom: calc(var(--sab) + 6vh); left:50%; transform:translateX(-50%); font-family: var(--font-display); font-size: clamp(9px,1.7vh,13px); color: var(--gold); letter-spacing:.12em; } .onoma { position: absolute; font-family: var(--font-display); font-size: clamp(22px, 8vh, 80px); text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 var(--magenta), -3px -3px 0 var(--cyan); transform: translate(-50%,-50%) rotate(-8deg); animation: onoma 900ms ease-out forwards; pointer-events: none; } @keyframes onoma { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-20deg); opacity: 0; } 20% { transform: translate(-50%,-50%) scale(1.15) rotate(-8deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%,-60%) scale(1) rotate(-6deg); opacity: 0; } } .aberr { animation: aberr 220ms steps(3) 1; } @keyframes aberr { 0% { filter: drop-shadow(3px 0 0 #0ff) drop-shadow(-3px 0 0 #f0f); } 100% { filter: none; } } /* ---------- Modal ---------- */ .modal-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,3,12,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10; animation: screen-in 200ms ease-out; } .modal { background: linear-gradient(160deg, #0c1030, #050716); border: 2px solid var(--cyan); border-radius: 10px; padding: clamp(12px, 3vh, 28px) clamp(16px, 4vh, 40px); display: flex; flex-direction: column; gap: clamp(8px, 1.8vh, 16px); align-items: center; box-shadow: 4px 4px 0 var(--magenta), 0 0 40px rgba(0,245,212,.3); max-width: 92vw; max-height: 88vh; } .modal.opaque { background: #070a1c; } .modal .row { display: flex; gap: clamp(6px, 1.4vh, 14px); flex-wrap: wrap; justify-content: center; align-items: center; } .modal p { margin: 0; text-align: center; font-size: clamp(11px, 2.1vh, 16px); line-height: 1.4; max-width: 70vw; } .modal .note { font-size: clamp(9px, 1.7vh, 13px); opacity: .7; margin-top: 1vh; } /* ---------- Registry ---------- */ #registry-screen { justify-content: space-between; } #dot-rail { position: absolute; top: calc(var(--sat) + 1.2vh); left: 50%; transform: translateX(-50%); display: flex; gap: clamp(3px, .7vh, 8px); flex-wrap: nowrap; max-width: 92vw; overflow: hidden; } .dot { width: clamp(9px, 2.1vh, 18px); height: clamp(9px, 2.1vh, 18px); border-radius: 50%; border: 1px solid rgba(255,255,255,.25); cursor: pointer; flex: 0 0 auto; transition: transform 150ms; } .dot.active { transform: scale(1.45); border-color: #fff; box-shadow: 0 0 10px #fff; } .dot.locked { opacity: .45; } #reg-info { position: absolute; left: calc(var(--sal) + 2vw); top: 50%; transform: translateY(-50%); width: clamp(160px, 28vw, 340px); display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); } #reg-name { font-family: var(--font-display); font-size: clamp(14px, 3.4vh, 30px); line-height: 1.05; text-transform: uppercase; } #reg-desc { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); color: var(--cyan); letter-spacing: .08em; } #reg-streak { font-size: clamp(10px, 1.8vh, 14px); color: var(--gold); } .stat { display: grid; grid-template-columns: 1fr; gap: 2px; } .stat label { font-size: clamp(8px, 1.5vh, 12px); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.75); display: flex; justify-content: space-between; } .stat .bar { height: clamp(6px, 1.2vh, 10px); background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); } .stat .bar > i { display: block; height: 100%; width: 0; transition: width 500ms cubic-bezier(.2,.8,.2,1); } #reg-actions { position: absolute; right: calc(var(--sar) + 2vw); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 12px); align-items: stretch; width: clamp(150px, 24vw, 300px); } #reg-nav-left { position: absolute; left: calc(var(--sal) + 2vw); bottom: calc(var(--sab) + 2vh); } #reg-nav-right { position: absolute; right: calc(var(--sar) + 2vw); bottom: calc(var(--sab) + 2vh); } #reg-back { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 2vh); } .pill { display:inline-block; font-family: var(--font-display); font-size: clamp(8px,1.5vh,11px); letter-spacing:.12em; padding:.25em .7em; border-radius: 4px; border:1px solid var(--gold); color: var(--gold); text-transform: uppercase; } .pill.cyan { border-color: var(--cyan); color: var(--cyan); } .pill.locked { border-color: #ff3355; color: #ff3355; } /* ---------- Settings (planet-adaptive monolith block, v8) ---------- */ @property --pc { syntax: ''; inherits: true; initial-value: #ffd700; } #settings-screen { justify-content: flex-start; align-items: flex-start; } #solar-block { --pa: #d8b23a; --pb: #1f4fd6; --pc: #ffe680; --ink: #f4f8ff; --shimmer-dir: normal; --shimmer-dur: 8s; position: absolute; left: calc(var(--sal) + 1.5vw); top: calc(var(--sat) + 2.5vh); bottom: calc(var(--sab) + 2.5vh); width: clamp(240px, 40vw, 520px); border-radius: 14px; padding: clamp(10px, 2.2vh, 20px) clamp(12px, 2.6vh, 26px); /* the block's shape is fixed; only its colours move — they are the current planet's colours and blend on a switch */ background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0 / 9px 9px, linear-gradient(160deg, var(--pa) 0%, color-mix(in srgb, var(--pa) 55%, var(--pb)) 45%, var(--pb) 100%); border: 3px solid #05050a; box-shadow: 5px 5px 0 #05050a, -3px -3px 0 color-mix(in srgb, var(--pc) 70%, #000), 0 0 50px color-mix(in srgb, var(--pc) 40%, transparent); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(6px, 1.4vh, 12px); z-index: 3; color: var(--ink); overflow: hidden; transition: --pa 1.1s linear, --pb 1.1s linear, --pc 1.1s linear; } #solar-block.dark-ink { --ink: #10060a; } #solar-block .solar-body { display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; gap: clamp(6px, 1.4vh, 12px); } #solar-block h2 { margin: 0; font-family: var(--font-display); font-size: clamp(12px, 2.6vh, 20px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-shadow: 1px 1px 0 rgba(0,0,0,.35); position: relative; } .slider { display: flex; flex-direction: column; gap: 3px; position: relative; } .slider label { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: flex; justify-content: space-between; } .slider label span:last-child { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; } .slider .track { position: relative; height: clamp(12px, 2.6vh, 22px); border-radius: 6px; background: rgba(5,5,10,.7); border: 2px solid #05050a; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .slider .track > i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, var(--pc) 0%, var(--pa) 50%, var(--pc) 100%); background-size: 200% 100%; animation: bar-flow var(--shimmer-dur) linear infinite; animation-direction: var(--shimmer-dir); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent); } .toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6em; font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: clamp(4px,1vh,8px) clamp(8px,1.6vh,14px); border: 2px solid #05050a; border-radius: 8px; background: rgba(255,255,255,.14); cursor: pointer; position: relative; min-height: clamp(30px, 5.4vh, 46px); box-shadow: 2px 2px 0 #05050a; } .toggle .state { width: clamp(44px, 8vh, 64px); text-align: center; padding: .15em 0; border-radius: 999px; background: rgba(5,5,10,.7); color: #fff; border: 1px solid #05050a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toggle.on .state { background: linear-gradient(90deg, var(--pc), var(--pa), var(--pc)); background-size: 200% 100%; animation: bar-flow var(--shimmer-dur) linear infinite; animation-direction: var(--shimmer-dir); color: #10060a; box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent); } .solar-btn { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: clamp(6px,1.3vh,10px); border: 2px solid #05050a; border-radius: 8px; background: rgba(255,255,255,.18); cursor: pointer; text-align: center; position: relative; box-shadow: 2px 2px 0 #05050a; } .solar-btn:active { background: rgba(255,255,255,.4); transform: translate(1px,1px); box-shadow: none; } #planet-spot { position: absolute; left: clamp(260px, 44vw, 560px); right: 0; top: 2%; height: 74%; } #planet-panel { position: absolute; left: clamp(260px, 44vw, 560px); right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(var(--sab) + 2.5vh); gap: .6vh; pointer-events: none; } #planet-panel > * { pointer-events: auto; } #planet-lang { font-family: var(--font-display); font-size: clamp(16px, 3.6vh, 34px); text-transform: uppercase; letter-spacing: .04em; text-shadow: 2px 2px 0 var(--magenta), -1px -1px 0 var(--cyan); text-align:center; } #planet-name { font-family: var(--font-display); font-size: clamp(10px, 2vh, 15px); color: var(--cyan); letter-spacing: .12em; text-align: center; } #planet-gimmick { font-size: clamp(9px, 1.7vh, 13px); color: rgba(255,255,255,.75); text-align:center; max-width: 46vw; } /* arrows live inside the planet half, never under the block */ #planet-arrows { position: absolute; left: calc(clamp(260px, 44vw, 560px) + 1vw); right: calc(var(--sar) + 1vw); top: 40%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 4; } #planet-arrows .btn { pointer-events: auto; } /* ---------- Sovereign ---------- */ #sovereign-screen { justify-content: flex-start; gap: 1.5vh; padding-top: calc(var(--sat) + 2vh); } #sov-title { font-family: var(--font-display); font-size: clamp(16px, 4.4vh, 44px); text-transform: uppercase; letter-spacing: .06em; line-height: 1; background: linear-gradient(180deg, #fffbe6 0%, #FFD700 35%, #b8860b 55%, #7ec8ff 75%, #1a3fd6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255,215,0,.5)) drop-shadow(0 2px 0 rgba(26,63,214,.8)); } #sov-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vw, 28px); width: min(94vw, 1200px); flex: 1; min-height: 0; margin-bottom: 1vh; } .sov-block { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(8px, 1.6vh, 14px); min-height: 0; } .sov-block .logo-slot { flex: 1; min-height: 0; } .sov-block h3 { margin: 0; font-family: var(--font-display); font-size: clamp(11px, 2.4vh, 20px); text-transform: uppercase; letter-spacing: .06em; line-height: 1.05; } .sov-block .tier { font-family: var(--font-display); font-size: clamp(7px, 1.3vh, 10px); letter-spacing: .22em; text-transform: uppercase; opacity: .85; } .sov-block .price { font-family: var(--font-display); font-size: clamp(13px, 3vh, 26px); margin-top: .2em; } .sov-block .perks { margin: .3em 0 0; padding: 0; list-style: none; font-size: clamp(8px, 1.5vh, 12px); line-height: 1.35; } .sov-block.month { background: linear-gradient(160deg, rgba(0,240,255,.18), rgba(6,10,30,.9)); border: 2px solid var(--cyan2); box-shadow: inset 0 0 40px rgba(0,240,255,.15), 0 0 30px rgba(0,240,255,.25); color: #dffdff; } .sov-block.year { background: linear-gradient(160deg, rgba(26,63,214,.45), rgba(4,6,30,.95)); border: 2px solid #4f7dff; box-shadow: inset 0 0 40px rgba(60,100,255,.2), 0 0 30px rgba(60,100,255,.3); color: #e6ecff; } .sov-block.life { background: linear-gradient(160deg, rgba(255,215,0,.16), rgba(5,5,8,.98)); border: 2px solid var(--gold); box-shadow: inset 0 0 40px rgba(255,215,0,.15), 0 0 34px rgba(255,215,0,.3); color: #fff4cc; } .sov-block.active { outline: 3px solid #fff; outline-offset: -3px; } .sov-block .badge { position: absolute; top: 8px; right: -30px; transform: rotate(18deg); background: var(--amber); color: #000; font-family: var(--font-display); font-size: clamp(8px, 1.5vh, 12px); padding: .2em 2.4em; letter-spacing: .1em; box-shadow: 2px 2px 0 #000; } .sov-block .badge.mono { background: #eee; } .sov-block .active-tag { position:absolute; top: 8px; left: 8px; font-family: var(--font-display); font-size: clamp(7px,1.4vh,11px); letter-spacing:.15em; padding:.25em .6em; border:1px solid currentColor; border-radius:4px; } #sov-footer { display: flex; gap: 2vw; padding-bottom: calc(var(--sab) + 1.5vh); } .flash-text { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-display); font-size: clamp(11px, 2.4vh, 20px); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 0 12px currentColor, 2px 2px 0 #000; animation: flash-up 1600ms ease-out forwards; pointer-events: none; z-index: 20; } @keyframes flash-up { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%,-140%) scale(1); } } .confetti { position: absolute; width: 8px; height: 8px; pointer-events: none; animation: confetti 1200ms ease-out forwards; } @keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(720deg); opacity: 0; } } /* ---------- Bracket ---------- */ #bracket-screen { justify-content: flex-start; } .bracket-block { position: absolute; transform: translate(-50%,-50%); border: 2px solid rgba(0,245,212,.45); border-radius: 8px; background: transparent; /* G_53 B7: фон блоку — у 3D за фігурками */ display: flex; align-items: center; justify-content: center; } .bracket-block .stage-tag { position: absolute; top: -1.9em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(7px, 1.4vh, 11px); letter-spacing: .12em; color: rgba(255,255,255,.6); white-space: nowrap; } .bracket-block .vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 2px; height: 70%; background: rgba(255,255,255,.18); } .bracket-block.mine { border-color: #fff; box-shadow: 3px 3px 0 var(--magenta), -3px -3px 0 var(--cyan), 0 0 26px rgba(0,245,212,.4); animation: cmyk 1.2s steps(2) infinite; } @keyframes cmyk { 50% { box-shadow: -3px 3px 0 var(--cyan), 3px -3px 0 var(--magenta), 0 0 26px rgba(255,43,214,.4); } } .bracket-block.done { border-color: rgba(255,255,255,.15); } .bracket-block .badge-mine { position: absolute; bottom: -1.9em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(7px, 1.4vh, 11px); letter-spacing: .12em; color: var(--gold); white-space: nowrap; } .bracket-block.final { border: 3px solid var(--gold); background: rgba(20,14,0,.5); box-shadow: 0 0 40px rgba(255,215,0,.35); } .bracket-block.drop-target { border-color: var(--gold); box-shadow: 0 0 20px rgba(255,215,0,.6); } #bracket-msg { position: absolute; bottom: calc(var(--sab) + 2vh); left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(9px, 1.9vh, 15px); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-align: center; text-shadow: 2px 2px 0 #000; max-width: 90vw; } #bracket-actions { position: absolute; bottom: calc(var(--sab) + 6vh); left: 50%; transform: translateX(-50%); display: flex; gap: 2vw; } #bracket-back { position: absolute; top: calc(var(--sat) + 1vh); left: calc(var(--sal) + 1vh); } .mvp-banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%,-50%); font-family: var(--font-display); font-size: clamp(11px, 2.6vh, 22px); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255,215,0,.7); text-align: center; max-width: 80vw; animation: screen-in 300ms ease-out; } /* ---------- Registry lock modal etc ---------- */ .big-msg { font-family: var(--font-display); font-size: clamp(14px, 3.4vh, 30px); text-transform: uppercase; text-align: center; letter-spacing: .04em; text-shadow: 3px 3px 0 var(--magenta), -2px -2px 0 var(--cyan); } .gold-msg { color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255,215,0,.8); } /* pause overlay */ #pause-modal .row { flex-direction: column; } #pause-modal .btn { min-width: clamp(200px, 40vh, 380px); } /* touch-blocker */ #screen-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; } /* ====================================================================== v6 CANON — cup triad, nickname studio, friends hub, registry store, bracket without labels, rank badges, live score, spectator ====================================================================== */ /* --- main menu: triad --- */ .menu-core { flex-direction: row; flex-wrap: wrap; justify-content: center; } .menu-core .btn { min-width: 0; } #menu-nick-wrap { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; } #menu-nick { height: 100%; width: auto; aspect-ratio: 4/1; filter: drop-shadow(0 0 8px rgba(0,245,212,.5)); } #menu-nick-wrap.empty #menu-nick { display: none; } #menu-nick-wrap .nick-cta { font-family: var(--font-display); font-size: clamp(9px,1.8vh,14px); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px dashed rgba(255,215,0,.6); padding: .35em 1em; border-radius: 6px; } #menu-nick-wrap:not(.empty) .nick-cta { display: none; } #net-status { position: absolute; top: calc(var(--sat) + 1vh); left: calc(var(--sal) + 1vh); font-family: var(--font-display); font-size: clamp(8px,1.5vh,12px); letter-spacing:.12em; color: var(--gold); text-transform: uppercase; } /* --- registry v6 (superseded by v8 below; keep shared helpers) --- */ .pill.magenta { border-color: var(--magenta); color: var(--magenta); } .pill.dim { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.7); } .pill-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* --- bracket v6 --- */ .bracket-block .stage-tag, .bracket-block .badge-mine { display: none; } .bracket-block .vs { left: 6%; right: 6%; top: 50%; width: auto; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); } .bracket-block.semi8 { border-color: rgba(255,215,0,.5); } .bracket-block.mega { border-color: var(--magenta); box-shadow: 0 0 40px rgba(224,77,255,.35); } .bracket-block .live-score { position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(7px, 1.5vh, 12px); letter-spacing: .1em; color: var(--gold); white-space: nowrap; display: none; text-shadow: 1px 1px 0 #000; } .bracket-block .live-score.on { display: block; } #badge-layer { position: absolute; inset: 0; pointer-events: none; } .rank-badge { position: absolute; transform: translate(-50%, -100%); font-family: var(--font-display); font-size: clamp(7px, 1.5vh, 12px); color: #000; background: #fff; padding: .1em .45em; border: 2px solid #000; border-radius: 4px; box-shadow: 2px 2px 0 var(--magenta); letter-spacing: .06em; rotate: -6deg; } .rank-badge.first { background: var(--gold); box-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,215,0,.8); rotate: 4deg; font-size: clamp(9px, 1.9vh, 15px); } #draft-timer { font-family: var(--font-display); font-size: clamp(12px, 2.6vh, 22px); color: var(--gold); border: 2px solid var(--gold); border-radius: 6px; padding: .1em .6em; background: rgba(0,0,0,.5); letter-spacing: .1em; } /* ===================== v8 — Main menu: six monolithic buttons, ZERO animation, size hierarchy ===================== */ /* Hierarchy: Settings < Registry < Workshop (dock) < Cosmic < Cyber < Quantum. Cup buttons take the gradient (--ga/--gb) of the figure version chosen for that cup. No keyframes, no transitions on the buttons themselves except the press feedback. */ #cup-triad { display: flex; flex-direction: column; align-items: center; gap: 0; } .streak-slot { display: flex; align-items: flex-end; justify-content: center; height: clamp(30px, 6.2vh, 56px); margin-bottom: calc(-1 * clamp(4px, .9vh, 8px)); cursor: pointer; position: relative; z-index: 2; } .streak-slot canvas.streak-fig { width: clamp(44px, 9vh, 84px); height: clamp(44px, 9vh, 84px); image-rendering: auto; filter: drop-shadow(0 2px 0 #000); } .btn.cup { --ga: #00F5D4; --gb: #1a3fd6; position: relative; overflow: hidden; white-space: normal; line-height: 1.12; letter-spacing: .05em; animation: none !important; transition: none; isolation: isolate; } .btn.cup::before, .btn.cup::after { animation: none !important; } .btn.cup .cup-label { position: relative; z-index: 1; } /* Cosmic — slab: flat gradient plate, single ink border, hard CMYK offset */ .btn.cup.cosmic { width: clamp(220px, 44vh, 440px); font-size: clamp(11px, 2.3vh, 19px); border: 2px solid #05050a; border-radius: 4px; color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--ga) 70%, #000) 0%, color-mix(in srgb, var(--gb) 70%, #000) 100%); box-shadow: 4px 4px 0 #05050a, 0 0 0 1px color-mix(in srgb, var(--ga) 60%, transparent); text-shadow: 2px 2px 0 #000; } /* Cyber — chassis: bevelled plate with riveted top bar and a hard gradient seam */ .btn.cup.cyber { width: clamp(250px, 54vh, 540px); font-size: clamp(12px, 2.7vh, 22px); border: 3px solid #05050a; border-radius: 8px 2px 8px 2px; color: #fff; padding-top: .7em; background: linear-gradient(180deg, color-mix(in srgb, var(--gb) 85%, #000) 0 18%, #05050a 18% 21%, color-mix(in srgb, var(--ga) 65%, #000) 21% 100%); box-shadow: 5px 5px 0 color-mix(in srgb, var(--gb) 50%, #000), -2px -2px 0 rgba(255,255,255,.18), inset 0 0 0 2px rgba(255,255,255,.08); text-shadow: 2px 2px 0 #000; } .btn.cup.cyber::before { content: ''; position: absolute; left: 10px; right: 10px; top: 6px; height: 4px; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 14px); opacity: .55; } /* Quantum — monolith: biggest, double ink frame, inner gradient plate, halftone corner, crown bar; still NO animation */ .btn.cup.quantum { width: clamp(280px, 64vh, 640px); font-size: clamp(13px, 3.05vh, 26px); padding: .7em 1.2em .6em; border: 4px double #05050a; border-radius: 12px; color: #fff; /* G_39: крапковий шар radial-gradient(… at 88% 18%) прибрано — він давав один сірий кружечок у правому верхньому куті кнопки */ background: linear-gradient(120deg, color-mix(in srgb, var(--ga) 80%, #000) 0%, color-mix(in srgb, var(--gb) 85%, #000) 55%, color-mix(in srgb, var(--ga) 55%, #000) 100%); box-shadow: 7px 7px 0 #05050a, 0 0 0 3px color-mix(in srgb, var(--gb) 60%, #000), 0 0 34px color-mix(in srgb, var(--gb) 45%, transparent), inset 0 0 0 2px rgba(255,255,255,.12); text-shadow: 3px 3px 0 #000, 0 0 10px color-mix(in srgb, var(--ga) 70%, transparent); } .btn.cup.quantum::before { content: ''; position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 38%; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--ga), #fff, var(--gb)); box-shadow: 0 1px 0 #000; } .btn.cup.quantum::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; pointer-events: none; } .btn.cup.dim { filter: saturate(.35) brightness(.7); } background: linear-gradient(100deg, #5a0a00 0%, #c8321a 50%, #5a0a00 100%) !important; background-size: 200% 100% !important; border-color: #ff6a3d !important; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 36px rgba(255,70,20,.85), inset 0 0 22px rgba(255,60,0,.45) !important; } .btn.cup .cup-label { font-size: inherit; } /* dock: three distinct small monoliths, sized by usage */ .menu-core { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.6vh, 14px); margin-top: clamp(8px, 1.8vh, 16px); } .btn.dock { animation: none; transition: none; min-width: 0; } .btn.dock.set { font-size: clamp(8px, 1.6vh, 12px); min-height: clamp(26px, 4.6vh, 38px); padding: .3em 1em; border: 2px solid #05050a; border-radius: 999px; background: linear-gradient(180deg, #FFD700, #FF6A00); color: #1a0800; box-shadow: 3px 3px 0 #05050a; text-shadow: none; } .btn.dock.reg { font-size: clamp(9px, 1.9vh, 14px); min-height: clamp(30px, 5.4vh, 44px); padding: .35em 1.2em; border: 2px solid #9fe8ff; border-radius: 4px; background: linear-gradient(160deg, #0c1a3a, #061022); box-shadow: 3px 3px 0 #1a3fd6, 0 0 0 1px #05050a; } .btn.dock.ws { font-size: clamp(10px, 2.1vh, 16px); min-height: clamp(34px, 6vh, 50px); padding: .4em 1.4em; border: 3px solid #05050a; border-radius: 8px 2px 8px 2px; background: linear-gradient(120deg, #FF2BD6, #7B3BFF); box-shadow: 4px 4px 0 #05050a, inset 0 0 0 2px rgba(255,255,255,.18); text-shadow: 2px 2px 0 #000; } #menu-streak { display: none; } /* ===================== v8 — Registry ===================== */ /* Registered colour properties → gradients blend smoothly instead of snapping (no "flicker"). */ @property --ga { syntax: ''; inherits: true; initial-value: #00F5D4; } @property --gb { syntax: ''; inherits: true; initial-value: #7B3BFF; } @property --pa { syntax: ''; inherits: true; initial-value: #00F5D4; } @property --pb { syntax: ''; inherits: true; initial-value: #7B3BFF; } #registry-screen { --ga: #00F5D4; --gb: #7B3BFF; --blend: 1s; transition: --ga var(--blend) linear, --gb var(--blend) linear; } #dot-rail-wrap { position: absolute; top: calc(var(--sat) + 1vh); left: 50%; transform: translateX(-50%); width: 94vw; height: clamp(34px, 7vh, 60px); overflow: visible; touch-action: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } #dot-rail { position: relative; top: auto; left: auto; transform: none; display: flex; gap: 0; flex-wrap: nowrap; max-width: none; overflow: visible; transition: none; padding: 0; justify-content: space-between; width: 100%; } .dot { --ga: #00F5D4; --gb: #7B3BFF; appearance: none; padding: 0; margin: 0; width: clamp(12px, 2.6vh, 22px); height: clamp(12px, 2.6vh, 22px); min-width: clamp(12px, 2.6vh, 22px); aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); cursor: pointer; flex: 0 0 auto; pointer-events: none; background: linear-gradient(135deg, var(--ga) 0%, var(--gb) 25%, var(--ga) 50%, var(--gb) 75%, var(--ga) 100%); background-size: 400% 400%; animation: dot-flow 6s linear infinite; box-shadow: 1px 1px 0 #000; transition: margin 420ms cubic-bezier(.2,.8,.2,1), transform 300ms ease, opacity 160ms; opacity: .92; overflow: hidden; } .dot.active { transform: scale(1.15); border-color: #fff; opacity: 1; margin: 0 clamp(8px, 1.6vh, 14px); animation-play-state: running; } .dot.locked { opacity: .6; } @keyframes dot-flow { to { background-position: 400% 400%; } } #dot-aura { position: absolute; pointer-events: none; z-index: 3; } /* stat bars: fixed slots; the fill grows from its previous end to the new value; colours = figure gradient, blended */ .stat .bar.v8 { background: transparent; border: none; height: clamp(7px, 1.4vh, 12px); overflow: visible; } .stat .bar.v8 > i { display: block; height: 100%; border-radius: 3px; box-shadow: 1px 1px 0 #000, 0 0 10px rgba(255,255,255,.15); background: linear-gradient(90deg, var(--ga) 0%, var(--gb) 50%, var(--ga) 100%); background-size: 200% 100%; animation: bar-flow var(--shimmer-dur, 4s) linear infinite; animation-direction: var(--shimmer-dir, normal); transition: width 700ms cubic-bezier(.2,.8,.2,1); } @keyframes bar-flow { to { background-position: -200% 0; } } /* gradient texts & buttons (name, description, arrows, back) blend with the figure */ .grad-text { background: linear-gradient(90deg, var(--ga), var(--gb)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #000); } #reg-name { font-family: var(--font-display); font-size: clamp(14px, 3.4vh, 30px); line-height: 1.05; text-transform: uppercase; min-height: 2.2em; display: flex; align-items: flex-end; } #reg-desc { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .08em; min-height: 2.6em; } .btn.grad-btn { border-color: #05050a; background: linear-gradient(135deg, color-mix(in srgb, var(--ga) 70%, #000), color-mix(in srgb, var(--gb) 70%, #000)); box-shadow: 3px 3px 0 #05050a, 0 0 0 1px color-mix(in srgb, var(--gb) 60%, transparent); } /* version pills */ .version-row { gap: 6px; min-height: clamp(30px, 6vh, 50px); } .pill.version { --pa: #00F5D4; --pb: #7B3BFF; appearance: none; cursor: pointer; color: #fff; border: 2px solid transparent; background: linear-gradient(135deg, var(--pa), var(--pb), var(--pa)) border-box; background-size: 200% 100%; animation: bar-flow var(--shimmer-dur, 5s) linear infinite; animation-direction: var(--shimmer-dir, normal); position: relative; padding: .3em .7em; font-size: clamp(8px, 1.6vh, 12px); text-shadow: 1px 1px 0 #000; display: flex; flex-direction: column; align-items: center; gap: 1px; isolation: isolate; transition: --pa .8s linear, --pb .8s linear; } .pill.version::before { content: ''; position: absolute; inset: 2px; border-radius: 3px; background: rgba(3,4,14,.85); z-index: -1; } .pill.version .pill-sub { font-size: .8em; opacity: .85; letter-spacing: .06em; text-transform: none; } .pill.version.view { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.5); } .pill.version.playing::before { background: rgba(3,4,14,.35); } .pill.version.shop { opacity: .85; } .btn.price { --pa: #00F5D4; --pb: #7B3BFF; border-color: var(--pb); color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--pa) 55%, #000), color-mix(in srgb, var(--pb) 55%, #000)); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 var(--pb), 0 0 18px color-mix(in srgb, var(--pb) 60%, transparent); text-shadow: 1px 1px 0 #000; white-space: normal; line-height: 1.1; } #reg-actions .note { font-size: clamp(8px,1.4vh,11px); color: rgba(255,255,255,.65); margin: 0; text-align: center; } #reg-actions .row { display: flex; gap: 6px; } #reg-actions .row .btn { flex: 1; } #reg-streak { display: none; } /* ===================== v8 — Bracket ===================== */ #bracket-field { position: absolute; inset: 0; transform: translateY(-4.5%); } /* G_54 D: % від висоти app-root, не vh — у портреті vh = висота вікна */ /* blocks a little higher → texts below have room */ .rank-badge.v8 { position: absolute; transform: translate(-50%, -50%); background: transparent; border: none; box-shadow: none; padding: 0; rotate: 0deg; pointer-events: none; } .bracket-block .live-score { position: absolute; bottom: -1.7em; top: auto; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(7px, 1.5vh, 12px); letter-spacing: .08em; color: #fff; white-space: nowrap; display: none; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0,0,0,.8); } .bracket-block .live-score.on { display: block; } .bracket-block.mine { animation: none; } #bracket-msg .end-title { font-family: var(--font-display); font-size: clamp(15px, 3.8vh, 36px); letter-spacing: .04em; color: #fff; text-shadow: 3px 3px 0 var(--magenta), -2px -2px 0 var(--cyan), 0 0 24px rgba(0,245,212,.5); margin-bottom: .2em; animation: screen-in 400ms ease-out; } #bracket-msg .end-sub { font-size: clamp(9px, 1.9vh, 15px); color: rgba(255,255,255,.85); letter-spacing: .06em; text-transform: none; } #bracket-msg { bottom: calc(var(--sab) + 10.5vh); max-width: 70vw; } #bracket-actions { bottom: calc(var(--sab) + 2.2vh); } .end-row { display: flex; gap: clamp(10px, 2.4vw, 28px); align-items: center; justify-content: center; flex-wrap: wrap; } #spec-tag { position: absolute; top: calc(var(--sat) + 1vh); left: calc(var(--sal) + 1.2vh); font-family: var(--font-display); font-size: clamp(9px, 1.9vh, 15px); color: #FFD700; letter-spacing: .1em; text-shadow: 1px 1px 0 #000; text-transform: uppercase; } .bracket-block.grow { animation: block-grow 420ms cubic-bezier(.2,.9,.3,1.2); } @keyframes block-grow { 0% { transform: translate(-50%,-50%) scale(.92); } 60% { transform: translate(-50%,-50%) scale(1.04); } 100% { transform: translate(-50%,-50%) scale(1); } } /* ===================== v7 — Arena FX ===================== */ .confetti-strip { position: absolute; width: 6px; border-radius: 2px; transform: translate(-50%, -50%); box-shadow: 1px 1px 0 rgba(0,0,0,.6); animation: strip-fall 2.8s cubic-bezier(.3,.1,.6,1) forwards; pointer-events: none; } @keyframes strip-fall { 0% { transform: translate(-50%, -50%) rotate(0deg) scaleY(1); opacity: 1; } 15% { transform: translate(calc(-50% + var(--dx) * .3), calc(-50% - 60px)) rotate(calc(var(--rot) * .2)) scaleY(1.2); } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scaleY(.8); opacity: .9; } } .big-text { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); font-family: var(--font-display); font-size: clamp(26px, 8vh, 80px); text-transform: uppercase; letter-spacing: .04em; text-align: center; white-space: nowrap; text-shadow: 4px 4px 0 #000, -2px -2px 0 rgba(255,255,255,.6), 0 0 36px currentColor; animation: big-pop 2.2s cubic-bezier(.2,.9,.3,1.2) forwards; pointer-events: none; } @keyframes big-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-10deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); } 30% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.15); } } /* v8.1 — compact flank pins in the registry */ #reg-actions .row .btn.pin { display: flex; align-items: center; justify-content: center; gap: 6px; padding-left: 8px; padding-right: 8px; min-width: 0; } @media (max-width: 1100px) { #reg-actions .row .btn.pin .pin-word { display: none; } } #reg-actions .row .btn.pin .pin-word { font-size: clamp(7px, 1.3vh, 10px); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #reg-actions .row .btn.pin.on { border-color: var(--ga, #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--ga, #fff) 60%, transparent) inset; opacity: 1; } #reg-actions .btn.price { font-size: clamp(8px, 1.7vh, 12px); padding: clamp(5px, 1.1vh, 9px) clamp(8px, 1.4vw, 14px); } /* v8.1 — settings: the planet owns the right half; caption on a readable plate; arrows stay beside the planet on every device */ #planet-spot { top: 0; height: 72%; } #planet-panel { gap: .4vh; padding-bottom: calc(var(--sab) + 1.6vh); } #planet-panel .caption-plate { display: flex; flex-direction: column; align-items: center; gap: .3vh; padding: .8vh 2vw; border-radius: 10px; background: rgba(3,5,16,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); max-width: 50vw; } #planet-arrows { top: 38%; } @media (max-width: 760px) { #planet-arrows { left: calc(clamp(260px, 44vw, 560px) + .4vw); right: calc(var(--sar) + .4vw); } #planet-arrows .btn { min-height: 34px; padding: 4px 8px; } #planet-panel .caption-plate { max-width: 52vw; padding: .5vh 1.4vw; } } /* v8.2 — menu per voice part 3: reserved streak gap above EVERY cup, dock trio in one size on one line, nickname never beyond the edges */ .streak-slot { height: clamp(34px, 7vh, 64px); margin-bottom: calc(-1 * clamp(3px, .7vh, 6px)); } .streak-slot.hidden { display: flex; visibility: visible; } #menu-nick { max-width: 92vw; height: 100%; width: auto; object-fit: contain; } .menu-core { align-items: center; } .btn.dock.set, .btn.dock.reg, .btn.dock.ws { font-size: clamp(9px, 1.9vh, 14px); min-height: clamp(32px, 5.6vh, 46px); height: clamp(32px, 5.6vh, 46px); padding: 0 clamp(10px, 1.6vw, 20px); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn.cup.cosmic { width: clamp(200px, 40vh, 400px); } .btn.cup.cyber { width: clamp(230px, 49vh, 490px); } .btn.cup.quantum { width: clamp(260px, 58vh, 580px); } .streak-slot { margin-bottom: 0; height: clamp(40px, 8vh, 72px); } .streak-slot canvas.streak-fig { width: clamp(50px, 10.5vh, 96px); height: clamp(50px, 10.5vh, 96px); } #cup-triad { gap: 0; } /* v8.2 — registry per voice part 3 */ .dot { border-color: rgba(255,255,255,.55); filter: brightness(1.18) saturate(1.1); animation-duration: var(--shimmer-dur, 6s); animation-direction: var(--shimmer-dir, normal); } .dot.locked { opacity: .75; } .dot.active { filter: brightness(1.3) saturate(1.15); } #dot-aura { transition: left 420ms cubic-bezier(.2,.8,.2,1), top 420ms cubic-bezier(.2,.8,.2,1); } #reg-name.grad-text, #reg-desc.grad-text { background: linear-gradient(90deg, var(--ga), var(--gb), var(--ga)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: bar-flow var(--shimmer-dur, 6s) linear infinite; animation-direction: var(--shimmer-dir, normal); } .btn.grad-btn, .btn.gold, #reg-actions .btn.price, #reg-back { background-size: 200% 100% !important; animation: bar-flow var(--shimmer-dur, 6s) linear infinite !important; animation-direction: var(--shimmer-dir, normal) !important; } #registry-screen .btn.gold { background-image: linear-gradient(90deg, var(--ga), var(--gb), var(--ga)); color: #fff; border-color: #05050a; text-shadow: 1px 1px 0 #000; } #registry-screen .btn.gold.selected { filter: saturate(.6) brightness(.85); } #reg-back.grad-btn { background-image: linear-gradient(90deg, color-mix(in srgb, var(--ga) 70%, #000), color-mix(in srgb, var(--gb) 70%, #000), color-mix(in srgb, var(--ga) 70%, #000)); } .btn.flank-btn { --pa: #00F5D4; --pb: #7B3BFF; border-color: #05050a; color: #fff; background-image: linear-gradient(90deg, var(--pa), var(--pb), var(--pa)); background-size: 200% 100%; animation: bar-flow var(--shimmer-dur, 6s) linear infinite; animation-direction: var(--shimmer-dir, normal); box-shadow: 3px 3px 0 #05050a; } #reg-actions .btn.price { background-image: linear-gradient(90deg, var(--pa), var(--pb), var(--pa)); } #reg-actions .btn.price.multi { background-image: linear-gradient(90deg, var(--stops)); } #reg-actions .btn.price.all96 { border: 2px solid #fff; box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255,255,255,.55), 3px 3px 0 #000; text-shadow: 1px 1px 0 #000, 0 0 8px #fff; font-weight: 700; letter-spacing: .08em; } #reg-actions .btn.price.rank1 { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 #000, 0 0 14px rgba(255,255,255,.25); } #reg-actions .btn.price.rank2 { border-color: #fff8; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 3px 3px 0 #000, 0 0 18px rgba(255,255,255,.35); } #reg-actions .btn.price.rank3 { border-color: #fff; box-shadow: 0 0 0 2px #000, 3px 3px 0 #000, 0 0 22px rgba(255,255,255,.5); } #reg-actions .btn.gold { font-size: clamp(8px, 1.7vh, 12px); padding: clamp(5px, 1.1vh, 9px) clamp(8px, 1.2vw, 14px); white-space: normal; line-height: 1.1; } .pill.version { animation-duration: var(--shimmer-dur, 5s); animation-direction: var(--shimmer-dir, normal); } /* ===== v8.3 — bracket end-state redesign + ultra score/time plate + outlines ===== */ #bracket-screen .bracket-block::before, #bracket-screen .bracket-block::after { content: none !important; animation: none !important; } /* kills the top-left pulsing artifact */ #bracket-screen .bracket-block.mine { animation: none !important; } #bracket-screen .bracket-block .stage-tag, #bracket-screen .bracket-block .badge-mine { display: none !important; } /* score + time: an ultra plate — ink frame, gold digits, CMYK offset shadow, time in a lighter weight; sits just under the block */ .bracket-block .live-score.on { display: inline-flex; align-items: baseline; gap: .45em; bottom: -2.1em; padding: .18em .6em; border: 2px solid #05050a; border-radius: 4px; background: linear-gradient(180deg, #141a33, #080b19); color: #FFD700; box-shadow: 2px 2px 0 #05050a, 0 0 0 1px rgba(255,215,0,.35); text-shadow: 1px 1px 0 #000; font-size: clamp(7px, 1.55vh, 12px); letter-spacing: .06em; white-space: nowrap; } /* arena HUD plate: one ultra monolith for score + time */ .hud-top { gap: 1.2vw; } /* end-state keys: three distinct monoliths (spectate = gold live key, again = cup slab, home = ink ghost), wrap on phones, never overlap the message */ #bracket-actions { max-width: 92vw; } .end-row.v83 { gap: clamp(8px, 1.8vw, 22px); } .end-row.v83 .btn.end-key { animation: none !important; transition: none; white-space: normal; line-height: 1.05; letter-spacing: .05em; border: 2px solid #05050a; border-radius: 6px; box-shadow: 3px 3px 0 #05050a; font-size: clamp(9px, 1.9vh, 14px); padding: .5em 1em; min-height: 0; text-shadow: 1px 1px 0 #000; } .end-row.v83 .btn.end-key.spectate { background: linear-gradient(180deg, #FFD700, #FF8A00); color: #1a0800; text-shadow: none; position: relative; padding-left: 1.9em; } .end-row.v83 .btn.end-key.spectate::before { content: ''; position: absolute; left: .7em; top: 50%; width: .6em; height: .6em; border-radius: 50%; background: #FF3355; transform: translateY(-50%); box-shadow: 0 0 0 2px #1a0800; animation: live-dot 1s steps(2) infinite; } @keyframes live-dot { 50% { opacity: .25; } } .end-row.v83 .btn.end-key.again { background: linear-gradient(160deg, #0c1a3a, #061022); color: #fff; } .end-row.v83 .btn.end-key.again.champion { background: linear-gradient(160deg, #3a2a00, #1a1000); border-color: #FFD700; color: #FFD700; } .end-row.v83 .btn.end-key.home { background: linear-gradient(160deg, #141a2e, #0a0d1c); color: #c9d3e6; } #bracket-msg .end-title { font-size: clamp(14px, 3.4vh, 32px); } .rank-badge.v8 { z-index: 2; } /* ===== v8.3 — settings: free caption in planet colours, shimmering arrows, smaller centred planet ===== */ #planet-spot { top: 4%; height: 66%; } #planet-panel .caption-free { display: flex; flex-direction: column; align-items: center; gap: .35vh; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 52vw; } #planet-panel .caption-free #planet-lang, #planet-panel .caption-free #planet-name { background-image: linear-gradient(90deg, var(--pa, #00F5D4), var(--pc, #fff), var(--pb, #4361EE), var(--pa, #00F5D4)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: bar-flow var(--shimmer-dur, 6s) linear infinite; animation-direction: var(--shimmer-dir, normal); filter: drop-shadow(2px 2px 0 #05050a); } #planet-panel .caption-free #planet-lang { font-size: clamp(18px, 4vh, 38px); } #planet-panel .caption-free #planet-name { font-size: clamp(10px, 2.1vh, 16px); letter-spacing: .14em; } #planet-panel .caption-free #planet-gimmick { color: rgba(255,255,255,.82); text-shadow: 1px 1px 0 #05050a; } #planet-arrows.v83 .btn.arrow { background-image: linear-gradient(90deg, var(--pa, #00F5D4), var(--pb, #4361EE), var(--pa, #00F5D4)); background-size: 200% 100%; animation: bar-flow var(--shimmer-dur, 6s) linear infinite; animation-direction: var(--shimmer-dir, normal); border: 2px solid #05050a; box-shadow: 3px 3px 0 #05050a; } #planet-arrows.v83 .btn.arrow svg { filter: drop-shadow(1px 1px 0 #000); } /* ===== update 4 — arena: plain time text (no plates), players key, players panel ===== */ /* E.1/E.14 (G_14 2.1): рахунок і час поряд — кожен зі своїм простором, БЕЗ плашок-фонів */ .hud-top.plain { flex-direction: column; align-items: center; gap: .2vh; } .hud-top.plain .hud-score { display: flex; align-items: baseline; gap: .35em; font-family: var(--font-display); font-size: clamp(20px, 5.6vh, 52px); line-height: 1; background: none; border: none; padding: 0; box-shadow: none; } .hud-top.plain .hud-score .hud-sc { min-width: 1.1em; text-align: center; text-shadow: 2px 2px 0 #05050a, 0 0 14px currentColor; } .hud-top.plain .hud-score .hud-sc.west { color: #00F5D4; } .hud-top.plain .hud-score .hud-sc.east { color: #FF6B00; } .hud-top.plain .hud-score .hud-colon { color: #fff; opacity: .85; text-shadow: 2px 2px 0 #05050a; transform: translateY(-.06em); } .hud-top.plain .hud-time { font-family: var(--font-display); font-size: clamp(16px, 4.2vh, 38px); color: #fff; letter-spacing: .06em; text-shadow: 2px 2px 0 #05050a, -1px -1px 0 rgba(0,245,212,.6), 1px -1px 0 rgba(255,43,214,.6); background: none; border: none; padding: 0; white-space: pre; } .hud-top.plain .hud-time.overtime { color: #FFD700; } .hud-top.plain .hud-time.golden { color: #FF2BD6; } .hud-key { position: absolute; top: calc(var(--sat) + 1vh); right: calc(var(--sar) + 1vh); width: clamp(30px, 5.6vh, 46px); height: clamp(30px, 5.6vh, 46px); border-radius: 12px; border: 2px solid #05050a; background: linear-gradient(160deg, rgba(22,28,70,.9), rgba(6,8,24,.95)); box-shadow: 3px 3px 0 #05050a, inset 0 1px 0 rgba(255,255,255,.18); display: grid; place-items: center; cursor: pointer; padding: 0; opacity: .85; z-index: 4; } .hud-key:hover { opacity: 1; } .modal-backdrop.no-stop { background: rgba(2,3,10,.35); } #players-modal .modal { max-width: min(92vw, 640px); } #players-modal .big-msg.small, .big-msg.small { font-size: clamp(12px, 2.4vh, 20px); } .pl-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; scrollbar-width: thin; } .pl-row { display: grid; grid-template-columns: minmax(80px, 1.4fr) 1fr auto auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; border: 2px solid #05050a; background: linear-gradient(160deg, rgba(14,18,48,.92), rgba(5,6,20,.96)); box-shadow: 2px 2px 0 #05050a; } .pl-row.foe { border-color: rgba(255,107,0,.5); } .pl-row.ally { border-color: rgba(0,245,212,.45); } .pl-row .pl-nick { width: 100%; height: auto; aspect-ratio: 4/1; filter: drop-shadow(1px 1px 0 #000); } .pl-row .pl-name { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .08em; text-transform: uppercase; color: #fff; } .pl-row .tk { appearance: none; width: clamp(28px, 5vh, 40px); height: clamp(28px, 5vh, 40px); border-radius: 10px; border: 2px solid #05050a; background: linear-gradient(160deg, rgba(22,28,70,.95), rgba(6,8,24,.98)); box-shadow: 2px 2px 0 #05050a; display: grid; place-items: center; cursor: pointer; padding: 0; color: #fff; } .pl-row .tk.selected { border-color: #fff; background: linear-gradient(160deg, rgba(56,66,130,.95), rgba(14,18,48,.98)); } .pl-row .tk.danger { border-color: #7a0a1a; } .modal .col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } /* ===== update 4 — bracket: place gradients live inside figures (no outlines), meteor sparks, live times, exit key ===== */ .rank-badge { display: none !important; } #bracket-exit { right: calc(var(--sar) + 1vh); } .meteor-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--cb, #fff), var(--ca, #FFD700) 60%, transparent 70%); box-shadow: 0 0 8px var(--ca, #FFD700); pointer-events: none; animation: spark-out 520ms ease-out forwards; } @keyframes spark-out { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } } .bracket-block .live-score.on.live { color: #fff; border-color: rgba(0,245,212,.6); } .bracket-block .live-score.on.live::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: #FF3355; box-shadow: 0 0 6px #FF3355; animation: live-dot 1s steps(2) infinite; display: inline-block; } #exit-modal .modal { max-width: min(88vw, 520px); } .bracket-block.mega { width: 72% !important; height: 62% !important; } /* ===== update 4 — Товариські Турнірні Тандеми: cup keys above the bracket, no params, static flank keys, public/private, search dots ===== */ /* ===== update 4 — menu + registry ===== */ /* dock: all three keys in ONE size (sized after the longest — Товариські Турнірні Тандеми) */ .menu-core { align-items: stretch; } .btn.dock.set, .btn.dock.reg, .btn.dock.ws { font-size: clamp(9px, 1.9vh, 14px); min-height: clamp(32px, 5.8vh, 48px); padding: .4em 1.2em; border-radius: 6px; border: 2px solid #05050a; flex: 1 1 0; min-width: clamp(110px, 20vh, 220px); max-width: clamp(160px, 30vh, 300px); white-space: normal; line-height: 1.05; display: grid; place-items: center; } .btn.dock.set::before, .btn.dock.reg::before, .btn.dock.ws::before, .btn.dock.cyber::before { content: none; } /* planet hotspot sits below the dock with a clear gap */ #menu-planet-spot { margin-top: 0; } /* price plaques: one smooth gradient, no second level */ #reg-actions .btn.price { background-image: linear-gradient(90deg, var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pb), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pa)) !important; background-size: 200% 100% !important; border: 2px solid #05050a; box-shadow: 3px 3px 0 #05050a; text-shadow: 1px 1px 0 #000; } #reg-actions .btn.price.multi { background-image: linear-gradient(90deg, var(--stops)) !important; } .pill.version { transition: --pa var(--blend, 1s) ease, --pb var(--blend, 1s) ease, box-shadow 320ms ease, opacity 320ms ease; } .pill.version .pill-sub { transition: opacity 320ms ease; } .pill.version.premium .pill-sub { letter-spacing: .1em; font-weight: 700; background: linear-gradient(90deg, #FFD700, #fff, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* flank pin keys: the pinned one keeps its full colours (no dimming) and shows a soft white ring instead */ #reg-actions .row .btn.pin.on { filter: none; opacity: 1; box-shadow: 2px 2px 0 #05050a, 0 0 0 2px #fff; } #reg-actions .row .btn.pin[aria-pressed="true"] { pointer-events: auto; } /* smooth figure/version transitions: gradient variables blend at the mix of both figures' speeds (set via --blend) */ #registry-screen, #registry-screen .btn, #registry-screen .pill { transition-property: --ga, --gb, --pa, --pb, background-color, border-color, color; transition-duration: var(--blend, 1s); transition-timing-function: ease; } #registry-screen .btn.price, #registry-screen .btn.flank-btn, #reg-back { animation-play-state: running; } /* update 4 — static keys everywhere a shimmer was not explicitly requested (registry inks / planet arrows keep theirs) */ /* update 4 — planets: centred in the right half, bigger; arrows on the planet's flanks, never over the caption block */ #planet-spot { left: clamp(260px, 44vw, 560px); right: 0; top: 0; height: 70%; } #planet-arrows { top: 35%; left: calc(clamp(260px, 44vw, 560px) + .6vw); right: calc(var(--sar) + .6vw); } #planet-panel { justify-content: flex-end; padding-bottom: calc(var(--sab) + 1.4vh); } #planet-panel .caption-free { pointer-events: none; } /* ===================== Четверте глобальне оновлення — РАКУРС-СИСТЕМА переливань (gfx/flow.js) ===================== Напрямок (--fl-ang), тривалість (--fl-dur) і хід (--fl-dir) кожного переливання беруться зі ЗБЕРЕЖЕНОГО ракурсу фігурки та її швидкості. Кут плавно повертається (@property), тому живе обертання фігурки в реєстрі не смикає градієнт. */ @property --fl-ang { syntax: ''; inherits: true; initial-value: 90deg; } @property --gc { syntax: ''; inherits: true; initial-value: #7B3BFF; } #registry-screen { --fl-ang: 90deg; --fl-dur: 7s; --fl-dir: normal; transition: --ga var(--blend) ease, --gb var(--blend) ease, --gc var(--blend) ease, --fl-ang 600ms ease; } #registry-screen .btn, #registry-screen .pill, #registry-screen .dot { transition-property: --ga, --gb, --gc, --pa, --pb, --fl-ang, background-color, border-color, color, box-shadow, opacity, margin, transform; transition-duration: var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), 600ms, var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), 320ms, 320ms, 420ms, 300ms; } /* B.6 преміальність: третій, м'якший відтінок посередині; B.5 — анімація йде безперервно, змінюються лише змінні */ /* хвиля рухається вздовж осі градієнта для БУДЬ-ЯКОГО кута: позиція змінюється одразу по X та Y */ @keyframes flow-run { to { background-position: -200% -200%; } } #reg-name.grad-text, #reg-desc.grad-text, #reg-series.grad-text { background-image: linear-gradient(var(--fl-ang), var(--ga), var(--gc), var(--gb), var(--gc), var(--ga)); background-size: 200% 200%; animation: flow-run var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); } #reg-series { font-family: var(--font-display); font-size: clamp(9px, 1.7vh, 13px); letter-spacing: .16em; text-transform: uppercase; min-height: 1.4em; opacity: 0; transition: opacity 320ms ease; } #reg-series.on { opacity: 1; } #reg-series.on::before { content: '◆ '; } #reg-series.on::after { content: ' ◆'; } .pill.version { background-image: linear-gradient(var(--fl-ang), var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pb), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pa)); background-size: 200% 200%; animation: flow-run var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); } /* B.3 плашки цін — ОДИН плавний безперервний градієнт (кінець = початок), жодних двох рівнів */ #reg-actions .btn.price { background-image: linear-gradient(var(--fl-ang), var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pb), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pa)) !important; background-size: 200% 200% !important; animation: flow-run var(--fl-dur, 7s) linear infinite !important; animation-direction: var(--fl-dir, normal) !important; border: 2px solid #05050a; box-shadow: 3px 3px 0 #05050a, 0 0 0 1px color-mix(in srgb, var(--pb) 45%, transparent); } #reg-actions .btn.price.multi { background-image: linear-gradient(var(--fl-ang), var(--stops)) !important; } #registry-screen .btn.gold { background-image: linear-gradient(var(--fl-ang), var(--ga), var(--gc), var(--gb), var(--gc), var(--ga)) !important; background-size: 200% 200% !important; animation: flow-run var(--fl-dur, 7s) linear infinite !important; animation-direction: var(--fl-dir, normal) !important; } #reg-back.grad-btn { background-image: linear-gradient(var(--fl-ang), color-mix(in srgb, var(--ga) 70%, #000), color-mix(in srgb, var(--gc) 70%, #000), color-mix(in srgb, var(--gb) 70%, #000), color-mix(in srgb, var(--gc) 70%, #000), color-mix(in srgb, var(--ga) 70%, #000)) !important; animation: flow-run var(--fl-dur, 7s) linear infinite !important; animation-direction: var(--fl-dir, normal) !important; } .btn.flank-btn, #reg-actions .row .btn.pin { background-image: linear-gradient(var(--fl-ang), var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pb), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pa)); background-size: 200% 200%; animation: flow-run var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); } /* B.1 встановлена фігурка: стрілка флангу НЕ затемнюється — повна світла переливна, лише тонке біле кільце як позначка */ #reg-actions .row .btn.pin.on, #reg-actions .row .btn.pin[aria-pressed="true"] { filter: none !important; opacity: 1 !important; box-shadow: 2px 2px 0 #05050a, 0 0 0 2px #fff, 0 0 14px rgba(255,255,255,.45); pointer-events: auto; } /* B.7 десктоп: стрілка ЗЛІВА від «Лівий фланг», стрілка СПРАВА від «Правий фланг» */ #reg-actions .row .btn.pin.pin-l { flex-direction: row; } #reg-actions .row .btn.pin.pin-r { flex-direction: row; } #reg-actions .row .btn.pin .pin-word { order: 0; } #reg-actions .row .btn.pin.pin-l .ico { order: -1; } #reg-actions .row .btn.pin.pin-r .ico { order: 1; } /* кружечки 32 фігурок — кожен за ракурсом своєї фігурки */ .dot { background-image: linear-gradient(var(--fl-ang), var(--ga), var(--gb), var(--ga), var(--gb), var(--ga)); background-size: 400% 400%; animation: dot-flow var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); } .stat .bar.v8 > i { background-image: linear-gradient(var(--fl-ang), var(--ga), var(--gc), var(--gb), var(--gc), var(--ga)); background-size: 200% 200%; animation: flow-run var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); } /* ===================== Четверте глобальне оновлення — Головне меню (C), переробка за записами E_05/E_06 ===================== */ /* C.2 — три кнопки доку абсолютно ОДНАКОВОГО розміру (плашка і текст), орієнтир — кнопка «Товариські Турнірні Тандеми» */ .menu-core { align-items: stretch; gap: clamp(8px, 1.6vh, 14px); margin-top: clamp(8px, 2vh, 18px); } .btn.dock.set, .btn.dock.reg, .btn.dock.ws { flex: 1 1 0; width: clamp(150px, 25vh, 250px); min-width: clamp(150px, 25vh, 250px); max-width: clamp(150px, 25vh, 250px); height: clamp(40px, 7vh, 58px); min-height: clamp(40px, 7vh, 58px); font-size: clamp(9px, 1.8vh, 13px); line-height: 1.08; padding: 0 .6em; border-radius: 6px; border: 2px solid #05050a; display: grid; place-items: center; text-align: center; white-space: normal; box-shadow: 3px 3px 0 #05050a; } .btn.dock.set { background: linear-gradient(180deg, #FFD700, #FF6A00); color: #1a0800; text-shadow: none; } .btn.dock.reg { background: linear-gradient(160deg, #0c1a3a, #061022); color: #fff; border-color: #9fe8ff; } .btn.dock.ws { background: linear-gradient(120deg, #FF2BD6, #7B3BFF); color: #fff; text-shadow: 2px 2px 0 #000; } /* серія над кубком — слот трохи компактніший на низьких екранах, щоб планеті лишалося місце (C.3) */ .streak-slot { height: clamp(32px, 7.5vh, 72px); } /* C.3 — планета: кругла зона натиску, перехід лише за тапом (JS onTap), курсор-підказка */ #menu-planet-spot { cursor: pointer; } /* C.4/C.5 — ЄДИНЕ м'яке червоне желе для ВСІХ кубків. Пружина стиску/розтягу — у JS (загасаюча синусоїда, обʼєм сталий), тому CSS-анімацій тут НЕМАЄ (C.7). Червона «шкіра» (.cup-skin) лежить поверх фону кубка й плавно проявляється (360 мс) і плавно гасне (620 мс) — колір кубка повертається так само м'яко, як і текст. Текст: два підписи у перехресному розчиненні (.on ↔ .alt). */ .btn.cup { transform-origin: 50% 50%; will-change: transform; } .btn.cup .cup-skin { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; background: linear-gradient(100deg, #5a0a00 0%, #c8321a 55%, #7a140a 100%); box-shadow: inset 0 0 22px rgba(255,60,0,.45), inset 0 0 0 2px rgba(255,106,61,.55); transition: opacity 620ms ease; } .btn.cup.warn .cup-skin { opacity: 1; transition: opacity 360ms ease; } .btn.cup .cup-label { position: relative; z-index: 1; opacity: 0; transition: opacity 420ms ease; } .btn.cup .cup-label.on { opacity: 1; } .btn.cup .cup-label.alt { position: absolute; left: .6em; right: .6em; top: 50%; transform: translateY(-50%); color: #fff3c4; font-size: .82em; line-height: 1.05; letter-spacing: .08em; text-shadow: 2px 2px 0 #000; } .btn.cup.cyber .cup-label.alt { top: calc(50% + .3em); } /* кубок під желе зберігає власний фон, рамку й тінь (міняється лише шкіра поверх); затемнення .dim на час желе знімається */ #menu-screen .btn.cup.warn { filter: none !important; } #menu-screen .btn, #workshop-screen .btn:not(.cup), #bracket-screen .btn, #arena-screen .btn, #settings-screen .btn.gold, #settings-screen .toggle .state, #nick-screen .btn { animation: none !important; background-size: auto !important; } /* Адаптація «за кодексом»: усі розміри меню — від висоти ЗАСТОСУНКУ (--vh), а не екрана. У портреті гра повернута на 90°, і звичайні vh брали б висоту телефона (≈915) замість висоти застосунку (≈412): стек виходив удвічі більшим за бюджет і стискався вдвічі — текст доку ставав ~6 px. Тепер у кожному режимі розміри справжні, стиск майже не потрібен. */ #menu-screen .streak-slot { height: clamp(30px, calc(var(--vh, 1vh) * 7.5), 72px); margin-bottom: 0; } #menu-screen .streak-slot canvas.streak-fig { width: clamp(44px, calc(var(--vh, 1vh) * 10.5), 96px); height: clamp(44px, calc(var(--vh, 1vh) * 10.5), 96px); } #menu-screen .btn.cup.cosmic { width: clamp(200px, calc(var(--vh, 1vh) * 40), 400px); font-size: clamp(11px, calc(var(--vh, 1vh) * 2.3), 19px); } #menu-screen .btn.cup.cyber { width: clamp(230px, calc(var(--vh, 1vh) * 49), 490px); font-size: clamp(12px, calc(var(--vh, 1vh) * 2.7), 22px); } #menu-screen .btn.cup.quantum { width: clamp(260px, calc(var(--vh, 1vh) * 58), 580px); font-size: clamp(13px, calc(var(--vh, 1vh) * 3.05), 26px); } #menu-screen .menu-core { gap: clamp(8px, calc(var(--vh, 1vh) * 1.6), 14px); margin-top: clamp(8px, calc(var(--vh, 1vh) * 2), 18px); } #menu-screen .btn.dock.set, #menu-screen .btn.dock.reg, #menu-screen .btn.dock.ws { width: clamp(150px, calc(var(--vh, 1vh) * 25), 250px); min-width: clamp(150px, calc(var(--vh, 1vh) * 25), 250px); max-width: clamp(150px, calc(var(--vh, 1vh) * 25), 250px); height: clamp(40px, calc(var(--vh, 1vh) * 7), 58px); min-height: clamp(40px, calc(var(--vh, 1vh) * 7), 58px); font-size: clamp(9px, calc(var(--vh, 1vh) * 1.8), 13px); } #menu-nick-wrap .nick-cta { font-size: clamp(9px, calc(var(--vh, 1vh) * 1.8), 14px); } #menu-screen .btn.cup { min-height: clamp(34px, calc(var(--vh, 1vh) * 7), 60px); padding: clamp(6px, calc(var(--vh, 1vh) * 1.5), 14px) clamp(14px, calc(var(--vh, 1vh) * 3.2), 34px); } #menu-screen .btn.cup.cyber { padding-top: .7em; } #menu-screen .btn.cup.quantum { padding: .7em 1.2em .6em; } #menu-screen .btn.dock { padding: 0 .6em; } /* заклепки кібер-кубка та корона квантового масштабуються разом із текстом — на малих екранах не налазять на підпис */ #menu-screen .btn.cup.cyber { padding-top: 1.05em; padding-bottom: .45em; } #menu-screen .btn.cup.cyber::before { top: .32em; height: .22em; left: .6em; right: .6em; background: repeating-linear-gradient(90deg, #fff 0 .22em, transparent .22em .8em); } #menu-screen .btn.cup.quantum::before { top: .22em; height: .22em; } #menu-screen .btn.cup.quantum::after { inset: .3em; } /* C.7 — жодних переливань у меню, крім желе кубків (JS) та нікнейму */ #menu-screen .btn.dock, #menu-screen .btn.cup { animation: none !important; transition: none; } #menu-screen .btn.cup .cup-skin, #menu-screen .btn.cup .cup-label { transition-property: opacity; } #menu-screen .btn.cup:active { transform: none; } /* ===================== Четверте глобальне оновлення — Тандеми (D, частина 1) ===================== */ /* D.1 — кронштейн у оригінальних розмірах; D.7 — логотип-замок замість двох кнопок, код завжди видимий, без кружечка */ /* D.7 — панель кімнати ПОСЕРЕДИНІ над кронштейном (під ключами кубків, над фінальним блоком), в один ряд; крила вільні */ /* D.21 — вступний блок тандемів: створити / за кодом / випадкова публічна (власна подача, не схожа на інші блоки) */ /* D.3 — ключі кубків над кронштейном. Вертикально (Космічний / Кібер): стовпчик над фінальним блоком, найбільша зверху; горизонтально (Квантовий, місця над фіналом немає): зліва найменша → справа найбільша. Стиль головного меню, статичні. */ @keyframes warn-jelly { 0% { transform: scale(1,1); } 14% { transform: scale(1.05,.94); } 32% { transform: scale(.975,1.04); } 50% { transform: scale(1.018,.988); } 68% { transform: scale(.994,1.006); } 84% { transform: scale(1.002,.998); } 100% { transform: scale(1,1); } } @keyframes warn-flow { to { background-position: -200% 0; } } /* панель кімнати під ключами, над фінальним блоком; у Квантовому — вище (ключі в ряд) */ /* D.8 — Старт і Назад по флангах, статичні, трохи компактніші (кронштейн повернув оригінальний розмір) */ /* панель кімнати — ОДРАЗУ під стовпчиком ключів, у проміжку до фінального блоку; у «мега» режимі — під рядом ключів */ /* D.18 — три крапки на кнопці Старт: з'являються по одній 1-2-3, потім блимають усі три, і знову */ @keyframes dot123 { 0% { opacity: 0; } 15% { opacity: 1; } 62% { opacity: 1; } 70% { opacity: 0; } 78% { opacity: 1; } 86% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 0; } } /* D.17 — клавіатура коду у стилі гри: гліф-комірки на плашці, пропущені позиції видно, ⌫ / × / ✓ з власними кольорами */ /* ===================== Четверте глобальне оновлення — Арена: панель «Скарги / вимкнути нікнейм» (E.9) ===================== */ #players-modal .modal { max-width: min(92vw, 560px); background: rgba(3,4,14,.55); } .pl-list.v10 { gap: clamp(6px, 1.2vh, 10px); max-height: 56vh; overflow-y: auto; padding: 6px 4px; scrollbar-width: thin; } /* плашка ПРОЗОРА; лише обводка переливається кольорами фарб нікнейму по черзі (маска з двох шарів) */ .pl-row.v10 { position: relative; display: grid; grid-template-columns: minmax(96px, 1.5fr) 1fr auto; align-items: center; gap: clamp(6px, 1vw, 12px); padding: clamp(5px, 1vh, 9px) clamp(8px, 1.2vw, 14px); border-radius: 10px; background: transparent; border: none; isolation: isolate; } .pl-row.v10::before { content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 2px; background: linear-gradient(90deg, var(--stops)); background-size: 300% 100%; animation: flow-run var(--fl-dur, 7s) linear infinite; animation-direction: var(--fl-dir, normal); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .pl-row.v10.off .pl-nick { opacity: .3; filter: grayscale(1); } .pl-row.v10 .pl-left { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .pl-row.v10 .pl-nick { width: 100%; height: auto; aspect-ratio: 4/1; cursor: pointer; filter: drop-shadow(1px 1px 0 #000); transition: opacity 240ms, filter 240ms; } /* місце над нікнеймом для іконок надісланих скарг — накопичуються */ .pl-row.v10 .pl-marks { display: flex; gap: 3px; min-height: 14px; } .pl-row.v10 .pl-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #FF3355; border: 1px solid #05050a; box-shadow: 1px 1px 0 #000; } .pl-row.v10 .pl-mark.pop { animation: mark-pop .5s cubic-bezier(.2,1.6,.3,1) 1; } @keyframes mark-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .pl-row.v10 .pl-name { font-family: var(--font-display); font-size: clamp(8px, 1.6vh, 12px); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-row.v10 .pl-rep { appearance: none; width: clamp(28px, 5vh, 40px); height: clamp(28px, 5vh, 40px); border-radius: 10px; border: 2px solid #05050a; background: linear-gradient(160deg, #5a0a1a, #2a0410); box-shadow: 2px 2px 0 #05050a; cursor: pointer; display: grid; place-items: center; } /* причини — желейно навколо логотипа, у стовпчик під плашкою, тексти переносяться і не вилазять */ .pl-row.v10 .pl-reasons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 4px; } .pl-row.v10 .pl-reason { appearance: none; font-family: var(--font-display); font-size: clamp(7.5px, 1.4vh, 11px); letter-spacing: .06em; color: #fff; text-shadow: 1px 1px 0 #000; padding: .4em .8em; border-radius: 8px; border: 2px solid #05050a; background: linear-gradient(160deg, #3a0a14, #1a040a); box-shadow: 2px 2px 0 #05050a; cursor: pointer; white-space: normal; max-width: 100%; line-height: 1.05; transform-origin: 100% 0; animation: reason-jelly .7s cubic-bezier(.2,1.5,.3,1) both; animation-delay: calc(var(--i) * 60ms); } .pl-row.v10 .pl-reason.sent { opacity: .45; border-color: #FF3355; } @keyframes reason-jelly { 0% { transform: scale(.2, .6); opacity: 0; } 55% { transform: scale(1.08, .94); opacity: 1; } 75% { transform: scale(.97, 1.04); } 100% { transform: scale(1, 1); } } /* ===================== Четверте глобальне оновлення — Кронштейн (F) ===================== */ /* F.13 — бокові кнопки стилізовані під гру: ✕ виходу — плашка з косим зрізом і червоною підсвіткою; кінцеві кнопки — комікс-плашки */ #bracket-exit { width: clamp(34px, 6vh, 50px); height: clamp(34px, 6vh, 50px); border-radius: 12px 4px 12px 4px; border: 2px solid #05050a; background: linear-gradient(160deg, #3a0a14, #14040a); box-shadow: 3px 3px 0 #05050a, 0 0 0 1px rgba(255,51,85,.45), inset 0 1px 0 rgba(255,255,255,.14); opacity: .92; } #bracket-exit:hover { box-shadow: 3px 3px 0 #05050a, 0 0 14px rgba(255,51,85,.6), inset 0 1px 0 rgba(255,255,255,.2); } .end-row.v83 .btn.end-key { border-radius: 10px 3px 10px 3px; min-height: clamp(34px, 6vh, 50px); padding: .5em 1.2em; text-shadow: 1px 1px 0 #000; } .end-row.v83 .btn.end-key.again { background: linear-gradient(160deg, #1c2a52, #0c1430); border-color: #9fe8ff; box-shadow: 3px 3px 0 #05050a, 0 0 0 1px rgba(159,232,255,.35); } .end-row.v83 .btn.end-key.home { background: linear-gradient(160deg, #2a1f44, #140d24); border-color: #b48cff; color: #e9ddff; } /* F.10 — текст результату під меншим Квантовим блоком, не перетинає його */ #bracket-screen .bracket-block.final.mega ~ #bracket-msg, #bracket-msg { max-width: 72vw; } /* F.11 — підтвердження виходу: фон розмитий, плашка велика й читабельна */ #exit-modal .modal { background: rgba(6,8,28,.92); border: 3px solid #05050a; border-radius: 14px 4px 14px 4px; box-shadow: 6px 6px 0 #05050a, 0 0 0 2px #FF3355; } #exit-modal .big-msg.small { font-size: clamp(13px, 2.8vh, 24px); } /* =================================================================================================================== АТЕЛЬЄ КАЛІГРАФІЇ НІКНЕЙМУ — з нуля за записами E_01–E_04 + відгуки G_00, G_01 Композиція: заголовок · ВЕЛИКИЙ аркуш · ОДИН ряд із 8 пензликів по центру між аркушем і блочком · блочок завширшки з аркуш · ЄДИНА риска-повзунок праворуч і знизу (одна SVG-крива, без кружечків). Виділення — лише збільшення. =================================================================================================================== */ #nick-screen.v11 { --sidepad: clamp(10px, 2.2vw, 28px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(3px, .8vh, 9px); padding: calc(var(--sat) + clamp(10px, 2.6vh, 18px)) var(--sidepad) calc(var(--sab) + clamp(6px, 1.2vh, 12px)); position: absolute; inset: 0; overflow: hidden; } /* заголовок: один злитий градієнт усіх відкритих фарб (--tg — список кольорів із JS), напрямок — мікс ракурсів, швидкість — мікс швидкостей */ #nick-screen.v11 #nick-title { font-size: clamp(11px, 2.8vh, 26px); line-height: 1.25; padding: 2px 6px 0; flex: 0 0 auto; --tdur: 8s; background-image: linear-gradient(90deg, #00F5D4, #80FAEA, #ffffff, #80FAEA, #00F5D4); background-size: 200% 200%; animation: flow-run var(--tdur) linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #05050a); margin: 0; } /* сітка: [аркуш | риска] / [поле | риска] / [блочок | риска] / [риска груп | кут]; рядки задає JS (layoutAll) */ #atelier-grid { --railw: clamp(40px, 7.4vh, 64px); --drailh: clamp(30px, 5.6vh, 46px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--railw); grid-template-rows: minmax(0, 1fr) auto max-content var(--drailh); align-content: center; column-gap: clamp(14px, 2vw, 26px); row-gap: clamp(4px, .9vh, 9px); width: 100%; flex: 1 1 0; min-height: 0; z-index: 1; } #sheet-cell { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; } #nick-screen.v11 #nick-canvas-wrap { width: 100%; height: 100%; max-height: 100%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; background: radial-gradient(circle at 20% 20%, #0c1030, #04050f 70%), repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.05) 0 1px, transparent 1px 7px); box-shadow: 4px 4px 0 var(--magenta), -3px -3px 0 var(--cyan), 0 0 30px rgba(0,245,212,.3); overflow: hidden; touch-action: none; position: relative; z-index: 3; } #nick-screen.v11 #nick-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; } /* поле — рівно ОДИН ряд (висоту задає JS: пензлик + невеликий запас зверху/знизу для збільшення); ряди, що виходять, ховаються */ #brush-field { grid-column: 1; grid-row: 2; position: relative; overflow: hidden; touch-action: none; height: 48px; display: block; contain: strict; } #brush-field.scrollable { cursor: ns-resize; } #brush-rows { display: grid; grid-template-columns: repeat(8, 1fr); justify-items: center; row-gap: clamp(3px, .8vh, 10px); width: 100%; will-change: transform; } .brush { appearance: none; width: clamp(34px, min(9vh, 7vw), 72px); height: clamp(34px, min(9vh, 7vw), 72px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; display: grid; place-items: center; transition: transform 220ms cubic-bezier(.2,.8,.2,1); position: relative; } .brush canvas { width: 100%; height: 100%; display: block; overflow: visible; } .brush.locked canvas { opacity: .55; } /* виділення (G_01): ЛИШЕ збільшення, жодної підсвітки; не виходить за межі поля (запас зверху/знизу у висоті поля) */ .brush.active { transform: scale(1.2); z-index: 1; } /* вертикальна частина риски: 4 пензлики-ранги */ #brush-rail { grid-column: 2; grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 0; padding: 2px 0 0; touch-action: none; cursor: ns-resize; z-index: 2; } #brush-rail .rail-ico { width: clamp(34px, 6.6vh, 60px); height: clamp(34px, 6.6vh, 60px); cursor: pointer; position: relative; z-index: 2; transition: transform 240ms cubic-bezier(.2,.8,.2,1); flex: 0 0 auto; } #brush-rail .rail-ico.on { transform: scale(1.18); } /* ЄДИНА риска: одна SVG-крива; фарба — градієнт уздовж кривої, кожна зупинка переливається (SMIL); відблиск біжить уздовж */ #rail-corner { position: absolute; inset: 0; pointer-events: none; z-index: 1; } #rail-corner svg { position: absolute; left: 0; top: 0; overflow: visible; } #rail-corner .rc-hit { pointer-events: stroke; cursor: pointer; touch-action: none; } /* блочок — у подачі АРКУША; смуга рухається translate-ом (JS), обрізається межами блочка */ #tool-deck { grid-column: 1; grid-row: 3; position: relative; width: 100%; min-width: 0; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; background: radial-gradient(circle at 20% 20%, #0c1030, #04050f 70%), repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.05) 0 1px, transparent 1px 7px); box-shadow: 4px 4px 0 var(--magenta), -3px -3px 0 var(--cyan), 0 0 22px rgba(0,245,212,.22); padding: clamp(5px, 1.1vh, 10px) clamp(8px, 1.2vw, 14px); z-index: 2; animation: none; overflow: hidden; touch-action: none; cursor: grab; } #tool-deck .deck-strip { display: flex; align-items: center; gap: clamp(16px, 2.8vw, 40px); width: max-content; padding: 0 6px; will-change: transform; } #tool-deck .deck-group { display: flex; align-items: center; justify-content: space-evenly; gap: 10px; flex: 0 0 auto; position: relative; padding: 0 6px; box-sizing: border-box; } /* G_12 A.76: група = ширина вікна, кнопки рівномірно */ #tool-deck .tk { appearance: none; width: clamp(32px, 7vh, 54px); height: clamp(32px, 7vh, 54px); border: 0; border-radius: 0; background: transparent; box-shadow: none; display: grid; place-items: center; cursor: pointer; color: #fff; padding: 0; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 300ms; position: relative; } /* виділення логотипа (G_01): лише збільшення, без сяйва; масштаб такий, щоб лишатися в межах блочка */ #tool-deck .tk.selected { transform: scale(1.16); } #tool-deck .tk:disabled { opacity: .38; cursor: default; transform: none; } #tool-deck .dk-ico svg { display: block; overflow: visible; } /* «Зберегти нікнейм» — текст + логотип БЕЗ плашки; напівпрозорий, поки нічого не намальовано; статичний */ #tool-deck .save-key { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; color: #fff; font-family: var(--font-display); font-size: clamp(10px, 2vh, 16px); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .42; animation: none !important; cursor: default; } #tool-deck .save-key.ready { opacity: 1; cursor: pointer; } #tool-deck .save-key .save-word { line-height: 1; text-shadow: 1px 1px 0 #05050a; } #tool-deck .save-key.go-menu .save-word { color: #CFFFF6; } #tool-deck .save-key.selected { transform: none; } /* G_12 (A.82): повзунки ПОСТІЙНІ — значок + заокруглена градієнтна риска у фарбах значка + відсоток; ширина фіксована, нічого не виїжджає й не зникає, тож централізація групи ніколи не ламається */ #tool-deck .tk-slider { display: inline-flex; align-items: center; gap: clamp(5px, .9vw, 10px); flex: 0 0 auto; padding: 0 2px; } #tool-deck .tk-slider .dk-ico { flex: 0 0 auto; } #tool-deck .size-track { position: relative; width: clamp(64px, 11vw, 150px); height: clamp(12px, 2.3vh, 22px); border-radius: 999px; border: 2px solid #05050a; background: rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 2px 2px 0 #05050a; cursor: ew-resize; touch-action: none; flex: 0 0 auto; } #tool-deck .size-track i { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 999px; min-width: 10px; } #tool-deck .size-val { font-family: var(--font-display); font-size: clamp(9px, 1.8vh, 14px); color: #fff; min-width: 2.9em; text-align: center; text-shadow: 1px 1px 0 #000; } /* горизонтальна частина риски: емблеми груп (менші, у межах екрана — G_01); у DOM зліва направо: текстури … дія */ #atelier-grid .deck-rail { grid-column: 1; grid-row: 4; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(34px, 7vw, 110px) 0 clamp(14px, 2.4vw, 36px); height: var(--drailh); margin-top: clamp(6px, 1.4vh, 14px); /* G_12 A.83: відступ від рожевого шару блочка */ touch-action: none; cursor: ew-resize; z-index: 2; } #atelier-grid .drail-ico { appearance: none; border: 0; background: transparent; padding: 0; width: var(--drailh); height: var(--drailh); display: grid; place-items: center; cursor: pointer; position: relative; z-index: 2; transition: transform 240ms cubic-bezier(.2,.8,.2,1); } #atelier-grid .drail-ico .dk-ico { width: 100% !important; height: 100% !important; } #atelier-grid .drail-ico .dk-ico svg { width: 100%; height: 100%; } #atelier-grid .drail-ico.on { transform: scale(1.18); } /* тексти (G_02). #nick-fx — весь екран. .phys-text — вибух «Нікнейм збережено» з центру (не блякнуть, падають за екран). .nick-note — «Відкрийте …» по центру: плавна поява → пауза → плавне зникнення; легкий нахил, віялом. Переливання — безшовне нескінченне (seam-flow: зсув рівно на один період градієнта, без стрибка). */ #nick-fx, .nick-fx-handoff { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; perspective: 600px; } /* G_12: під час пошуку заклепки кібер-кубка й корона квантового ховаються — поле на всю кнопку */ #menu-screen .btn.cup.searching::before, #menu-screen .btn.cup.searching::after { opacity: 0; transition: opacity 300ms; } /* G_13 (C.18): 2D-плашка кубка, що падає з меню у Реєстр */ .cup-drop { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; } .cup-drop .btn.cup { display: flex; align-items: center; justify-content: center; } /* G_05: після збереження тексти долітають над головним меню у #fx-layer (той самий вигляд, без переривання польоту) */ .phys-text { --dir: normal; --dur: 3s; position: absolute; left: 0; top: 0; white-space: nowrap; text-align: center; line-height: 1.05; font-family: var(--font-display); font-weight: 900; font-size: clamp(9px, 1.7vh, 14px); letter-spacing: .05em; text-transform: uppercase; transform-style: preserve-3d; will-change: transform; } .phys-text span, .nick-note span { display: block; background-image: linear-gradient(90deg, #00F5D4, #80FAEA, #fff, #80FAEA, #00F5D4); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: flow-run var(--dur) linear infinite; animation-direction: var(--dir); } /* G_10 оптимізація: у 96 летючих текстів НЕМАЄ filter: drop-shadow (растеризація фільтра на кожному з 96 шарів щокадру — головне пролагування на слабких девайсах); чорнильна підкладка — псевдоелемент із тим самим текстом, зсунутий на 1 px (композитинг, без фільтрів). Кожен текст — власний шар (contain + будь-який transform лише в JS). */ .phys-text { contain: layout style paint; backface-visibility: hidden; } .phys-text span { position: relative; } .phys-text span::before { content: attr(data-t); position: absolute; left: 1px; top: 1px; color: #05050a; -webkit-text-fill-color: #05050a; background: none; z-index: -1; animation: none; } .nick-note span { filter: drop-shadow(2px 2px 0 #05050a); } .nick-note { --dir: normal; --dur: 3s; --tilt: 0deg; --ox: 0vw; --oy: 0vh; position: absolute; left: 50%; top: 50%; max-width: min(78vw, 560px); text-align: center; line-height: 1.15; font-family: var(--font-display); font-weight: 900; font-size: clamp(13px, 3vh, 26px); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) rotate(var(--tilt)) scale(.92); transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.2,.8,.2,1); filter: none; } .nick-note.in { opacity: 1; transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) rotate(var(--tilt)) scale(1); } .nick-note.out { opacity: 0; transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy) - 2vh)) rotate(var(--tilt)) scale(1.04); transition: opacity 600ms ease-in, transform 600ms ease-in; } .nick-note span { filter: drop-shadow(2px 2px 0 #05050a); } /* flow-run (визначено в розділі Реєстру): фон 200 % → −200 % по обох осях — цикл замикається без стрибка */ @media (orientation: portrait) { .brush { width: clamp(34px, min(9vw, 7vh), 72px); height: clamp(34px, min(9vw, 7vh), 72px); } } /* ===== РЕЄСТР ФІГУРОК — четверте оновлення, переробка за записами E_02/E_04/E_05/E_06 (розділ B) ===== */ /* B.3: плашки версій — ОДИН суцільний плавний градієнт на всій плашці (раніше темна вставка лишала лише кольорову рамку, і верхній та нижній край читалися як дві різні смуги, що «не встигають одна за одною»). */ .pill.version::before { display: none; } .pill.version { border: 2px solid #05050a; border-radius: 6px; box-shadow: 3px 3px 0 #05050a; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0,0,0,.5); opacity: 1; } .pill.version.shop { opacity: 1; } .pill.version.view { box-shadow: 0 0 0 2px #fff, 3px 3px 0 #05050a, 0 0 14px rgba(255,255,255,.45); } .pill.version .pill-sub { opacity: 1; } /* B.1: жодних затемнень — обрана для кубка кнопка та встановлений фланг завжди повноцінні світлі переливні */ #registry-screen .btn.gold.selected { filter: none; opacity: 1; cursor: default; } #reg-actions .row .btn.pin.on { opacity: 1; border-color: #fff; box-shadow: 0 0 0 2px #fff, 3px 3px 0 #05050a, 0 0 12px rgba(255,255,255,.4); } #reg-actions .row .btn.pin { opacity: 1; filter: none; } /* B.6: преміальність — м'який третій відтінок і світла серцевина у переливанні, довший і рівніший цикл */ #registry-screen { --gc: color-mix(in srgb, var(--ga) 50%, var(--gb)); } #reg-name.grad-text, #reg-desc.grad-text, #reg-series.grad-text { background-image: linear-gradient(var(--fl-ang), var(--ga), var(--gc), color-mix(in srgb, var(--gb) 72%, #fff), var(--gb), var(--gc), var(--ga)); } .pill.version, #reg-actions .btn.price:not(.multi), .btn.flank-btn, #reg-actions .row .btn.pin { background-image: linear-gradient(var(--fl-ang), var(--pa), color-mix(in srgb, var(--pa) 55%, var(--pb)), color-mix(in srgb, var(--pb) 78%, #fff), var(--pb), color-mix(in srgb, var(--pa) 55%, var(--pb)), var(--pa)) !important; } /* B.5: кнопки дій — постійні елементи; кольори (--pa/--pb) перетікають плавно, ширина не стрибає */ #reg-actions .btn { transition-property: --pa, --pb, --ga, --gb, --gc, --fl-ang, border-color, box-shadow, color; transition-duration: var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), 600ms, 320ms, 320ms, 320ms; transition-timing-function: ease; } #reg-actions .btn.price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-height: 420px) { #reg-actions { gap: clamp(4px, 1vh, 8px); } #reg-actions .btn.price, #reg-actions .btn.gold { font-size: clamp(7px, 1.5vh, 11px); padding: clamp(4px, .9vh, 7px) clamp(6px, 1vw, 10px); } } /* ===== G_07/G_08/G_09 — Реєстр: єдиний годинник переливання + ТОЧНЕ безшовне плиткування для будь-якого кута ===== Кожне переливання — repeating-linear-gradient із періодом --fl-P (px) у плитці --fl-sx × --fl-sy з ЦІЛИХ пікселів пристрою (G_09): JS (tileFor) округлює плитку до цілих px і перераховує кут та період так, щоб плитка була точно періодичною для БУДЬ-ЯКОГО кута. Зсув — лише по горизонталі на --fl-dx = ±sx за цикл (візуально = один період уздовж напрямку), тож кадр фази 1.0 піксельно тотожний кадру фази 0.0: шва немає, «різниця 0,97» = 0. Кут, плитка й фаза --fl-ph задаються з JS в одному кадрі (без CSS-переходів кута) — жодної миті неузгодженості, жодних «квадратиків» чи «зривів». */ @property --mixk { syntax: ''; inherits: false; initial-value: 1; } #registry-screen { --fl-ph: 0; --fl-dx: 300px; --fl-P: 300px; --fl-sx: 300px; --fl-sy: 3000px; transition: --ga var(--blend) ease, --gb var(--blend) ease, --gc var(--blend) ease !important; } /* G_09: кут --fl-ang НІДЕ в Реєстрі не анімується CSS-переходом — його веде JS синхронно з плиткою */ #registry-screen, #registry-screen * { transition-property: --ga, --gb, --gc, --pa, --pb, background-color, border-color, color, box-shadow, opacity, margin, transform, width; } #registry-screen .btn, #registry-screen .pill, #registry-screen .dot, #reg-actions .btn, #reg-desc.grad-text { transition-property: --ga, --gb, --gc, --pa, --pb, background-color, border-color, color, box-shadow, opacity, margin, transform; transition-duration: var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), var(--blend, 1s), 320ms, 320ms, 320ms, 320ms, 320ms, 320ms; transition-timing-function: ease; } #reg-name.grad-text, #reg-desc.grad-text, #reg-series.grad-text, .pill.version, #reg-actions .btn.price, #registry-screen .btn.gold, #reg-back.grad-btn, .btn.flank-btn, #reg-actions .row .btn.pin, .stat .bar.v8 > i, #registry-screen .dot { animation: none !important; background-size: var(--fl-sx) var(--fl-sy) !important; background-repeat: repeat !important; background-position: calc(var(--fl-ph) * var(--fl-dx)) 0px !important; } #reg-name.grad-text, #reg-desc.grad-text, #reg-series.grad-text, #registry-screen .btn.gold, .stat .bar.v8 > i { background-image: repeating-linear-gradient(var(--fl-ang), var(--ga) 0px, var(--gc) calc(var(--fl-P) * .2), color-mix(in srgb, var(--gb) 72%, #fff) calc(var(--fl-P) * .4), var(--gb) calc(var(--fl-P) * .6), var(--gc) calc(var(--fl-P) * .8), var(--ga) var(--fl-P)) !important; } /* G_09: опис у лапках — справжній переливний градієнт версії (раніше id-правило #reg-desc фарбувало текст суцільним бірюзовим) */ #reg-desc.grad-text, #reg-name.grad-text, #reg-series.grad-text { color: transparent !important; -webkit-text-fill-color: transparent; -webkit-background-clip: text !important; background-clip: text !important; } .pill.version, #reg-actions .btn.price:not(.multi), .btn.flank-btn, #reg-actions .row .btn.pin { background-image: repeating-linear-gradient(var(--fl-ang), var(--pa) 0px, color-mix(in srgb, var(--pa) 55%, var(--pb)) calc(var(--fl-P) * .2), color-mix(in srgb, var(--pb) 78%, #fff) calc(var(--fl-P) * .4), var(--pb) calc(var(--fl-P) * .6), color-mix(in srgb, var(--pa) 55%, var(--pb)) calc(var(--fl-P) * .8), var(--pa) var(--fl-P)) !important; } #reg-back.grad-btn { background-image: repeating-linear-gradient(var(--fl-ang), color-mix(in srgb, var(--ga) 70%, #000) 0px, color-mix(in srgb, var(--gc) 70%, #000) calc(var(--fl-P) * .25), color-mix(in srgb, var(--gb) 70%, #000) calc(var(--fl-P) * .5), color-mix(in srgb, var(--gc) 70%, #000) calc(var(--fl-P) * .75), color-mix(in srgb, var(--ga) 70%, #000) var(--fl-P)) !important; } #registry-screen .dot { background-image: repeating-linear-gradient(var(--fl-ang), var(--ga) 0px, var(--gb) calc(var(--fl-P) * .5), var(--ga) var(--fl-P)) !important; } /* ціни під версіями — білі, як «Відкрито» і як у кнопці оплати (без чорно-золотого об'єму) */ .pill.version.premium .pill-sub { background: none; -webkit-text-fill-color: #fff; color: #fff; font-weight: 700; letter-spacing: .08em; text-shadow: 1px 1px 0 #000; } /* багатокольорові кнопки: перехід між наборами кольорів — плавне проявлення нового поверх попереднього */ #reg-actions .btn.price.multi { background-image: repeating-linear-gradient(var(--fl-ang), var(--stops)) !important; background-size: var(--fl-sx) var(--fl-sy) !important; background-repeat: repeat !important; background-position: calc(var(--fl-ph) * var(--fl-dx)) 0px !important; position: relative; isolation: isolate; } #reg-actions .btn.price.multi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: repeating-linear-gradient(var(--fl-ang), var(--stops-prev, var(--stops))); background-size: var(--fl-sx) var(--fl-sy); background-repeat: repeat; background-position: calc(var(--fl-ph) * var(--fl-dx)) 0px; opacity: calc(1 - var(--mixk)); transition: opacity var(--blend, 1s) ease; pointer-events: none; z-index: -1; } /* ===== G_10 — Ательє: нові кнопки налаштування, група «ефекти», сітка-напрямні, централізація груп ===== */ /* G_12: гумка — курсор-коло; «перегляд як у грі» — аркуш темніє до тла арени (лише вигляд, штрихи ті самі) */ #nick-screen.v11 #nick-canvas-wrap.erasing #nick-canvas { cursor: cell; } /* A.90: папір — окремий шар (фон аркуша), що розчиняється; рамка (wrap) стає прозорою — крізь неї видно темно-синій космос сцени з 3D-фігуркою; 3D-фігурка кріпиться до .pv-spot усередині рамки */ #nick-screen.v11 #nick-canvas-wrap { background: transparent; } #nick-screen.v11 #nick-canvas-wrap .sheet-paper { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, #0c1030, #04050f 70%), repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.05) 0 1px, transparent 1px 7px); pointer-events: none; } #nick-screen.v11 #nick-canvas { position: relative; z-index: 2; transform-origin: 50% 50%; will-change: transform; } #nick-screen.v11 #nick-canvas-wrap .pv-spot { position: absolute; pointer-events: none; z-index: 1; } /* N.1.3 (G_20 2.3): під час перегляду рамка, тінь і кольорові кордони аркуша НЕ змінюються — тане лише полотно (.sheet-paper) */ /* G_23: плашка блокування — СТРОГО всередині аркуша (inset:0, overflow рамки ховає все зайве), смуги статичні й завжди заповнюють весь аркуш; блимає лише текст */ #nick-screen.v11 #nick-canvas-wrap .nick-blocked { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; text-align: center; padding: 4% 6%; pointer-events: none; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,40,70,.26) 0 14px, rgba(255,40,70,.1) 14px 28px), rgba(110,0,18,.62); color: #fff; } #nick-screen.v11 #nick-canvas-wrap .nick-blocked .nb-line1 { font-family: var(--font-display); font-size: clamp(16px, 4.6vmin, 42px); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 0 10px #ff2a46, 2px 2px 0 #05050a; animation: nb-blink 1.1s steps(2, jump-none) infinite; } #nick-screen.v11 #nick-canvas-wrap .nick-blocked .nb-line2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(12px, 2.5vmin, 22px); line-height: 1.25; max-width: 92%; text-shadow: 1px 1px 0 #05050a, 0 0 6px rgba(0,0,0,.8); } #nick-screen.v11 #nick-canvas-wrap.blocked { border-color: #ff2a46; box-shadow: 4px 4px 0 #ff2a46, -3px -3px 0 #ff8ca8, 0 0 30px rgba(255,42,70,.45); } #nick-screen.v11 #nick-canvas-wrap .nick-blocked.lift { animation: nb-lift .45s ease-in forwards; } @keyframes nb-blink { 0% { opacity: 1; } 100% { opacity: .5; } } @keyframes nb-lift { to { opacity: 0; } } /* A.89: кнопка, що поступилась несумісному режиму — коротке «відступання» */ #nick-screen.v11 .tk.yield { animation: tk-yield .42s ease-out; } @keyframes tk-yield { 0% { transform: scale(1); } 35% { transform: scale(.82); filter: grayscale(1); } 100% { transform: scale(1); } } /* сітка-напрямні на аркуші (кнопка «сітка» у групі правки) — лише підказка оку, у збережений нікнейм не потрапляє */ #nick-screen.v11 #nick-canvas-wrap.grid::after { content: ''; position: absolute; inset: 3px; border-radius: 9px; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(rgba(0,245,212,.22) 1px, transparent 1px); background-size: 100% 12.5%, 6.25% 100%, 100% 50%; } /* ===== G_10 — Реєстр: персональні конфеті придбання ===== */ /* кожна частинка — переливання кольорів СВОЄЇ фігурки/версії (кут --ang, швидкість --fdur, напрямок --fdir — з ракурсу й обертання тієї фігурки); різкий старт у центрі, політ дугою з обертанням; прозорість: 1 до середини польоту → плавно 0 (зникає в польоті) */ .confetti-ink { position: absolute; pointer-events: none; border-radius: 1px; border: 1px solid rgba(0,0,0,.55); background-image: linear-gradient(var(--ang, 90deg), var(--ga), var(--gb), #fff, var(--gb), var(--ga)); background-size: 300% 300%; animation: confetti-ink-fly var(--dur, 1.3s) cubic-bezier(.2,.6,.5,1) forwards, flow-run var(--fdur, 1.4s) linear infinite; animation-direction: normal, var(--fdir, normal); will-change: transform, opacity; } .confetti-ink.dot { border-radius: 50%; } @keyframes confetti-ink-fly { 0% { transform: translate(0, 0) rotate(0deg) scale(1.15); opacity: 1; } 45% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 540deg)) scale(.7); opacity: 0; } } /* ===== G_10/G_11 — Головне меню: фірмова позначка пошуку гравців (міні-поле 3×3 з міні-фігуркою) ===== */ /* кнопка желейно збільшується (JS), підпис кубка плавно тане, по центру — поле; нічого іншого не змінюється */ .btn.cup .cup-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92); display: grid; place-items: center; opacity: 0; border-radius: inherit; overflow: hidden; transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,1.2,.3,1); pointer-events: none; z-index: 2; } .btn.cup.searching .cup-search { opacity: 1; transform: translate(-50%, -50%) scale(1); } .btn.cup .cup-search canvas { display: block; } #menu-screen .btn.cup .cup-search { transition-property: opacity, transform; } /* ===== D. Товариські Турнірні Тандеми — з нуля (записи E_05/E_06/E_07). Усі розміри — від висоти ЗАСТОСУНКУ (--vh). ===== */ #workshop-screen { justify-content: flex-start; animation: none; } #ws-bracket { position: absolute; inset: 0; transform: translateY(-4.5%); } /* D.1: та сама геометрія, що й #bracket-field */ #workshop-screen.lobby #ws-bracket { opacity: .22; filter: saturate(.5); pointer-events: none; transition: opacity 320ms ease; } #workshop-screen .bracket-block.final.mega { border-color: var(--magenta); box-shadow: 0 0 40px rgba(224,77,255,.35); } /* D.8: Старт і Назад — статичні, по флангах, без переливань */ #ws-start, #ws-back { position: absolute; bottom: calc(var(--sab) + 2vh); animation: none !important; transition: none; box-shadow: 3px 3px 0 #05050a; border: 2px solid #05050a; border-radius: 6px; font-size: clamp(8px, calc(var(--vh, 1vh) * 1.6), 12px); padding: .55em 1.2em; max-width: 18vw; white-space: normal; line-height: 1.05; } #ws-back { left: calc(var(--sal) + 2vw); background: linear-gradient(160deg, #141a2e, #0a0d1c); color: #c9d3e6; } #ws-start { right: calc(var(--sar) + 2vw); background: linear-gradient(180deg, #FFD700, #FF8A00); color: #1a0800; text-shadow: none; } #ws-start.hidden { display: none; } /* ---- вступний блок: один блочок у власній подачі (кут зрізано як у кібер-кубка, подвійна чорнильна рамка) ---- */ /* (вступний блок і стара клавіатура Тандемів прибрано — тепер окрема сцена #tandems-screen, див. нижче) */ /* G_12 (B.23): персональний текст придбання/досягнення — переливається кольорами придбаного, різко з'являється разом із конфеті й тане разом із ними (до 45 % непрозорий, далі лінійно до 0); адаптивний за довжиною тексту й шириною екрана. Поява/зникання — на зовнішньому елементі, переливання (flow-run) — на внутрішньому span: дві анімації на одному елементі з background-clip:text губили текст у композиторі. */ .got-text { position: absolute; left: 50%; top: 50%; z-index: 21; pointer-events: none; white-space: nowrap; animation: got-pop 1650ms cubic-bezier(.2,.9,.3,1) forwards; } .got-text > span { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; line-height: 1.05; text-align: center; font-weight: 900; padding: .08em .3em; font-size: min(clamp(14px, 5.2vh, 44px), calc(74vw / var(--n, 14) * 1.5)); background-image: linear-gradient(var(--fl-ang, 90deg), var(--stops)); background-size: 300% 300%; animation: flow-run var(--fl-dur, 3s) linear infinite; animation-direction: var(--fl-dir, normal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(3px 3px 0 #05050a) drop-shadow(-1px -1px 0 rgba(255,255,255,.45)) drop-shadow(0 0 14px rgba(255,255,255,.35)); } @keyframes got-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(-3deg); } 12% { transform: translate(-50%, -50%) scale(.96) rotate(1deg); } 22% { transform: translate(-50%, -50%) scale(1) rotate(0); } 45% { opacity: 1; transform: translate(-50%, -58%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -95%) scale(.92); } } @media (orientation: portrait) { .got-text > span { font-size: min(clamp(14px, 5.2vw, 44px), calc(74vh / var(--n, 14) * 1.5)); } } /* ===================== G_12/G_13 — ТОВАРИСЬКІ ТУРНІРНІ ТАНДЕМИ: окрема повноекранна сцена (D.23–D.38) ===================== */ /* Єдина стилістика сцени: сталь (#1b2140/#2b3460) + бірюза (#7FE7FF) + бурштин (#FFB454), чорнильні рамки 2–3 px, без переливань (крім желе — JS). Кубки — геометрія головного меню; змінюються лише їхні кольори за фігурками гравця. */ #tandems-screen { justify-content: flex-start; align-items: center; animation: none; padding: calc(var(--sat) + clamp(6px, calc(var(--vh, 1vh) * 1.6), 14px)) 0 calc(var(--sab) + clamp(6px, calc(var(--vh, 1vh) * 1.4), 12px)); gap: clamp(6px, calc(var(--vh, 1vh) * 1.5), 14px); overflow: hidden; } #td-title { margin: 0; font-family: var(--font-display); font-size: clamp(12px, calc(var(--vh, 1vh) * 3.2), 28px); letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.05; padding: 0 4vw; } #td-title span { background-image: linear-gradient(100deg, #7FE7FF 0%, #ffffff 42%, #FFB454 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(0 0 10px rgba(127,231,255,.25)); } #td-cups { display: flex; flex-direction: column; align-items: center; gap: 0; } #tandems-screen .btn.cup.td-cup { animation: none !important; transition: none; min-height: clamp(30px, calc(var(--vh, 1vh) * 6.4), 56px); padding: clamp(5px, calc(var(--vh, 1vh) * 1.3), 12px) clamp(12px, calc(var(--vh, 1vh) * 3), 32px); } #tandems-screen .btn.cup.td-cup.cosmic { width: clamp(200px, calc(var(--vh, 1vh) * 40), 400px); font-size: clamp(11px, calc(var(--vh, 1vh) * 2.3), 19px); } #tandems-screen .btn.cup.td-cup.cyber { width: clamp(230px, calc(var(--vh, 1vh) * 49), 490px); font-size: clamp(12px, calc(var(--vh, 1vh) * 2.7), 22px); padding-top: 1.05em; padding-bottom: .45em; } #tandems-screen .btn.cup.td-cup.cyber::before { top: .32em; height: .22em; left: .6em; right: .6em; background: repeating-linear-gradient(90deg, #fff 0 .22em, transparent .22em .8em); } #tandems-screen .btn.cup.td-cup.quantum { width: clamp(260px, calc(var(--vh, 1vh) * 58), 580px); font-size: clamp(13px, calc(var(--vh, 1vh) * 3.05), 26px); padding: .7em 1.2em .6em; } #tandems-screen .btn.cup.td-cup.quantum::before { top: .22em; height: .22em; } #tandems-screen .btn.cup.td-cup.quantum::after { inset: .3em; } #tandems-screen .btn.cup.td-cup.dim { filter: saturate(.3) brightness(.7); } #tandems-screen .btn.cup.td-cup.warn { filter: none !important; } /* обводка обраного кубка — єдиний стиль з нуля: подвійна нитка бірюза/бурштин, що дихає, поверх рамки кубка */ #tandems-screen .btn.cup.td-cup .td-ring { position: absolute; inset: -5px; border-radius: inherit; pointer-events: none; opacity: 0; border: 2px solid #7FE7FF; box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #FFB454, 0 0 18px rgba(127,231,255,.55); transition: opacity 260ms ease; } #tandems-screen .btn.cup.td-cup.selected .td-ring { opacity: 1; animation: td-breathe 2.4s ease-in-out infinite; } @keyframes td-breathe { 0%, 100% { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #FFB454, 0 0 14px rgba(127,231,255,.45); } 50% { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #FFB454, 0 0 26px rgba(127,231,255,.85); } } /* три кнопки дій — одна ширина, сталеві плити з бірюзовою/бурштиновою ниткою; желе — та сама .cup-skin, що й у кубків */ #td-actions { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, calc(var(--vh, 1vh) * 1.3), 12px); width: min(92vw, clamp(260px, calc(var(--vh, 1vh) * 58), 580px)); } #td-actions .td-row { display: flex; align-items: stretch; gap: clamp(6px, calc(var(--vh, 1vh) * 1.2), 12px); width: 100%; } #tandems-screen .btn.td-act { position: relative; overflow: hidden; isolation: isolate; width: 100%; min-height: clamp(36px, calc(var(--vh, 1vh) * 7.6), 64px); padding: .5em 1em; font-size: clamp(10px, calc(var(--vh, 1vh) * 2.05), 17px); letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; white-space: normal; color: #fff; border: 3px solid #05050a; border-radius: 10px; box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(127,231,255,.35); animation: none !important; transition: filter 200ms; transform-origin: 50% 50%; will-change: transform; } #tandems-screen .btn.td-act.create { background: linear-gradient(180deg, #2b3460, #1b2140); flex: 1; } #tandems-screen .btn.td-act.join { background: linear-gradient(180deg, #1f3550, #10203a); box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(127,231,255,.55); } #tandems-screen .btn.td-act.random { background: linear-gradient(180deg, #4a3620, #2a1c0e); box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(255,180,84,.55); } #tandems-screen .btn.td-act.dim { filter: saturate(.3) brightness(.6); } #tandems-screen .btn.td-act.busy { filter: brightness(1.2); } #tandems-screen .btn.td-act .cup-label { position: relative; z-index: 1; opacity: 0; transition: opacity 420ms ease; } #tandems-screen .btn.td-act .cup-label.on { opacity: 1; } #tandems-screen .btn.td-act .cup-label.alt { position: absolute; left: .6em; right: .6em; top: 50%; transform: translateY(-50%); color: #fff3c4; font-size: .86em; text-shadow: 2px 2px 0 #000; } #tandems-screen .btn.td-act .cup-skin { z-index: 0; } #tandems-screen .btn.td-act.warn .cup-skin { opacity: 1; transition: opacity 360ms ease; } /* очікування (D.29): текст тане, міні-кронштейн проявляється на всю кнопку */ #tandems-screen .btn.td-act .td-mini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92); width: calc(100% - 8px); height: calc(100% - 6px); opacity: 0; transition: opacity 420ms ease, transform 420ms ease; pointer-events: none; z-index: 2; border-radius: 6px; overflow: hidden; } #tandems-screen .btn.td-act.waiting .td-mini { opacity: 1; transform: translate(-50%, -50%) scale(1); } #tandems-screen .btn.td-act .td-mini canvas { display: block; width: 100%; height: 100%; } /* замок — дизайнерська іконка з анімацією переходу приватна ↔ публічна (дужка підіймається й повертається, промені спалахують) */ .btn.td-lock { flex: 0 0 auto; width: clamp(36px, calc(var(--vh, 1vh) * 7.6), 64px); min-height: clamp(36px, calc(var(--vh, 1vh) * 7.6), 64px); padding: 0; display: grid; place-items: center; background: linear-gradient(180deg, #2b3460, #1b2140); border: 3px solid #05050a; border-radius: 10px; box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(127,231,255,.35); animation: none !important; } .btn.td-lock svg { display: block; width: 68%; height: 68%; overflow: visible; } .btn.td-lock .lk-shackle { transform-origin: 28px 20px; transition: transform 420ms cubic-bezier(.3,1.5,.5,1); } .btn.td-lock.open .lk-shackle { transform: translateY(-4px) rotate(-28deg); } .btn.td-lock .lk-rays { transition: opacity 300ms ease; } .btn.td-lock.open .lk-rays { opacity: 1; animation: td-rays 900ms ease-out 1; } @keyframes td-rays { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .btn.td-lock.open { background: linear-gradient(180deg, #4a3620, #2a1c0e); box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(255,180,84,.6); } .btn.td-lock.ro { opacity: .75; pointer-events: none; } #td-back, .btn.td-back { animation: none !important; background: linear-gradient(160deg, #141a2e, #0a0d1c); color: #cfe9ff; border: 3px solid #05050a; box-shadow: 4px 4px 0 #05050a; font-size: clamp(9px, calc(var(--vh, 1vh) * 1.8), 14px); letter-spacing: .1em; text-transform: uppercase; } #td-back { margin-top: auto; } /* клавіатура (D.25): повноцінна, велика, внизу сцени як рідна; комірки слова посередині над нею; «Вставити» */ #td-keyboard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; display: flex; flex-direction: column; gap: clamp(4px, calc(var(--vh, 1vh) * .9), 8px); padding: clamp(6px, calc(var(--vh, 1vh) * 1.2), 12px) clamp(6px, 1.2vw, 14px) calc(var(--sab) + clamp(6px, calc(var(--vh, 1vh) * 1.2), 12px)); background: linear-gradient(180deg, rgba(20,26,46,.96), rgba(8,10,22,.98)); border-top: 3px solid #05050a; box-shadow: 0 -6px 0 rgba(127,231,255,.18), 0 -12px 30px rgba(0,0,0,.6); animation: td-kb-up 260ms cubic-bezier(.2,.9,.3,1) both; } @keyframes td-kb-up { from { transform: translateY(100%); } to { transform: translateY(0); } } #tandems-screen.kb-open #td-back { visibility: hidden; } #td-keyboard .kb-plate { display: flex; flex-direction: column; align-items: center; gap: 3px; } #td-keyboard .kb-cells { display: flex; gap: clamp(3px, calc(var(--vh, 1vh) * .6), 6px); flex-wrap: wrap; justify-content: center; } #td-keyboard .kc { display: grid; place-items: center; min-width: clamp(22px, calc(var(--vh, 1vh) * 4.4), 40px); height: clamp(28px, calc(var(--vh, 1vh) * 5.6), 50px); padding: 0 .2em; border: 2px solid #05050a; border-radius: 6px; background: linear-gradient(180deg, #1b2140, #10142a); box-shadow: 2px 2px 0 #05050a; font-family: var(--font-display); font-size: clamp(14px, calc(var(--vh, 1vh) * 3), 26px); color: #fff; text-shadow: 2px 2px 0 #000; } #td-keyboard .kc.on { border-color: #7FE7FF; } #td-keyboard .kc.cur { border-color: #FFB454; box-shadow: 2px 2px 0 #05050a, inset 0 -3px 0 #FFB454; } #td-keyboard .kb-hint { font-family: var(--font-display); font-size: clamp(8px, calc(var(--vh, 1vh) * 1.5), 12px); letter-spacing: .1em; text-transform: uppercase; color: #9fb7d9; text-shadow: 1px 1px 0 #000; } #td-keyboard .kb-rows { display: flex; flex-direction: column; gap: clamp(4px, calc(var(--vh, 1vh) * .9), 8px); } #td-keyboard .kb-row { display: flex; justify-content: center; gap: clamp(3px, .6vw, 7px); } #td-keyboard .kb-key { flex: 1 1 0; min-width: 0; max-width: clamp(34px, 7.4vw, 72px); height: clamp(30px, calc(var(--vh, 1vh) * 7.4), 60px); padding: 0; border: 2px solid #05050a; border-radius: 7px; background: linear-gradient(180deg, #2b3460, #1b2140); box-shadow: 0 3px 0 #05050a; color: #fff; font-family: var(--font-display); font-size: clamp(12px, calc(var(--vh, 1vh) * 2.8), 24px); display: grid; place-items: center; cursor: pointer; animation: none !important; transition: none; } #td-keyboard .kb-key b { font-weight: inherit; text-shadow: 2px 2px 0 #000; } #td-keyboard.shift .kb-key b { text-transform: uppercase; } #td-keyboard:not(.shift) .kb-key:not(.fn) b { text-transform: lowercase; } #td-keyboard .kb-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #05050a; } #td-keyboard .kb-key.fn { max-width: clamp(44px, 12vw, 120px); flex: 1.4 1 0; background: linear-gradient(180deg, #1f3550, #10203a); } #td-keyboard .kb-key.shift { background: linear-gradient(180deg, #24305e, #10163a); } #td-keyboard.shift .kb-key.shift { background: linear-gradient(180deg, #7FE7FF, #2a8fb0); color: #05050a; } #td-keyboard .kb-key.back { background: linear-gradient(180deg, #5a1a00, #2a0a00); } #td-keyboard .kb-row.bottom .kb-key.x { flex: 1 1 0; max-width: clamp(44px, 10vw, 90px); background: linear-gradient(180deg, #2a2a3a, #141420); } #td-keyboard .kb-row.bottom .kb-key.paste { flex: 3 1 0; max-width: none; background: linear-gradient(180deg, #4a3620, #2a1c0e); font-size: clamp(10px, calc(var(--vh, 1vh) * 2.1), 17px); letter-spacing: .1em; text-transform: uppercase; } #td-keyboard .kb-row.bottom .kb-key.ok { flex: 1.4 1 0; max-width: clamp(56px, 14vw, 130px); background: linear-gradient(180deg, #4a4a2a, #2a2a14); color: #bbb; } #td-keyboard .kb-row.bottom .kb-key.ok.ready { background: linear-gradient(180deg, #FFB454, #e07a00); color: #1a0800; } #td-keyboard .kb-native { width: min(92vw, 520px); align-self: center; height: clamp(34px, calc(var(--vh, 1vh) * 7.4), 60px); padding: 0 .8em; border: 3px solid #05050a; border-radius: 8px; background: #0e1226; color: #fff; font-family: var(--font-display); font-size: clamp(14px, calc(var(--vh, 1vh) * 3), 26px); text-align: center; outline: none; box-shadow: 3px 3px 0 #05050a, inset 0 0 0 1px rgba(127,231,255,.4); } /* кімната (кронштейн) у стилістиці Тандемів */ #workshop-screen.v12 #ws-bracket { transform: translateY(-2.5vh); } #workshop-screen.v12 #ws-trails { position: absolute; inset: 0; pointer-events: none; z-index: 3; } #workshop-screen.v12 .bracket-block { border-color: rgba(127,231,255,.45); background: linear-gradient(180deg, rgba(43,52,96,.42), rgba(27,33,64,.5)); } #workshop-screen.v12 .bracket-block.final { border-color: rgba(255,180,84,.6); } #workshop-screen.v12 .bracket-block.drop-target { border-color: #FFB454; box-shadow: 0 0 22px rgba(255,180,84,.5); } #workshop-screen.v12 #ws-roombar { position: absolute; top: calc(var(--sat) + 1.2vh); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: clamp(6px, calc(var(--vh, 1vh) * 1.2), 12px); z-index: 9; } #workshop-screen.v12 #room-code { display: flex; align-items: center; gap: .6em; padding: 0 clamp(10px, calc(var(--vh, 1vh) * 2.2), 20px); min-height: clamp(36px, calc(var(--vh, 1vh) * 7.6), 64px); background: linear-gradient(180deg, #1f3550, #10203a); border: 3px solid #05050a; border-radius: 10px; box-shadow: 4px 4px 0 #05050a, inset 0 0 0 1px rgba(127,231,255,.5); color: #fff; animation: none !important; } #workshop-screen.v12 #room-code .rc-label { font-family: var(--font-display); font-size: clamp(7px, calc(var(--vh, 1vh) * 1.4), 11px); letter-spacing: .14em; text-transform: uppercase; color: #9fb7d9; } #workshop-screen.v12 #room-code .rc-word { font-family: var(--font-display); font-size: clamp(14px, calc(var(--vh, 1vh) * 3.2), 28px); letter-spacing: .06em; background-image: linear-gradient(100deg, #7FE7FF, #fff 50%, #FFB454); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 #05050a); } #workshop-screen.v12 #room-code:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #05050a; } #workshop-screen.v12 #ws-back { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--sab) + 1.6vh); } #workshop-screen.v12 #ws-start { right: calc(var(--sar) + 2vw); bottom: calc(var(--sab) + 1.6vh); background: linear-gradient(180deg, #FFB454, #e07a00); color: #1a0800; border: 3px solid #05050a; box-shadow: 4px 4px 0 #05050a; } @media (orientation: portrait) { #td-keyboard .kb-key { max-width: clamp(34px, 7.4vh, 72px); } #td-keyboard .kb-key.fn { max-width: clamp(44px, 12vh, 120px); } #td-keyboard .kb-native { width: min(92vh, 520px); } } @media (max-height: 420px) { #tandems-screen { gap: 4px; } #tandems-screen .btn.cup.td-cup { min-height: 28px; } #tandems-screen .btn.td-act { min-height: 34px; } } /* ===== F.16 (G_14 8.2): рахунок і час блоків — дві преміальні позначки БЕЗ фону ===== */ .bracket-block .live-score { display: none; flex-direction: column; align-items: center; gap: .05em; bottom: -2.9em; text-shadow: none; } .bracket-block .live-score.on { display: flex; } .bracket-block .live-score .ls-score { font-family: var(--font-display); font-weight: 400; font-size: clamp(9px, 1.9vh, 15px); letter-spacing: .12em; background: linear-gradient(180deg, #FFF7D6 0%, #FFD700 45%, #B8860B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #05050a) drop-shadow(0 0 6px rgba(255,215,0,.35)); } .bracket-block .live-score .ls-time { font-family: var(--font-display); font-weight: 400; font-size: clamp(7px, 1.4vh, 11px); letter-spacing: .08em; color: #EAF2FF; text-shadow: 1px 1px 0 #05050a, 0 0 6px rgba(0,245,212,.35); white-space: nowrap; } .bracket-block .live-score .ls-time.live { color: #fff; } .bracket-block.final .live-score { bottom: -3.2em; } /* E.13: кнопка-логотип «Вийти» у кронштейні (лише Тандеми, до старту) */ #bracket-exit.exit-logo { width: clamp(38px, 6.6vh, 54px); height: clamp(38px, 6.6vh, 54px); border-radius: 14px 5px 14px 5px; border: 2px solid #05050a; background: linear-gradient(160deg, #3a0a14, #14040a); box-shadow: 3px 3px 0 #05050a, 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18); display: grid; place-items: center; opacity: 1; } #bracket-exit.exit-logo::after { content: ''; position: absolute; inset: 3px; border-radius: 11px 3px 11px 3px; border: 1px solid rgba(255,51,85,.45); pointer-events: none; } #exit-modal .modal { background: rgba(6,8,22,.72); border: 2px solid #05050a; box-shadow: 4px 4px 0 #05050a, 0 0 0 1px rgba(255,255,255,.12); } #exit-modal .big-msg.small { font-size: clamp(14px, 3vh, 24px); color: #fff; text-shadow: 2px 2px 0 #05050a; } /* E.23: подача часу на повернення — не схожа на рахунок/час */ .reconnect-tag { position: absolute; left: 50%; top: calc(var(--sat) + 9vh); transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(10px, 2vh, 16px); letter-spacing: .1em; color: #FFB454; padding: .35em .9em; border-radius: 999px; border: 2px solid rgba(255,180,84,.6); background: rgba(6,8,22,.55); text-shadow: 1px 1px 0 #05050a; pointer-events: none; } /* F.17 (G_14 8.4): два тексти завершення — розділені, у різних, але гармонійних стилізаціях */ #bracket-msg .end-title { display: block; margin-bottom: .55em; } #bracket-msg .end-sub { display: block; font-family: var(--font-body, 'Exo 2', sans-serif); font-weight: 600; letter-spacing: .04em; color: #FFE9B8; text-shadow: 1px 1px 0 #05050a; } /* ===== G_16 3.1 (F.21): рахунок і час блоків — простий звичайний текст, без фону, без золота й тіней ===== */ .bracket-block .live-score .ls-score { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; filter: none; text-shadow: 1px 1px 0 #05050a; font-size: clamp(9px, 1.8vh, 14px); letter-spacing: .1em; font-weight: 400; } .bracket-block .live-score .ls-time { color: rgba(255,255,255,.82); text-shadow: 1px 1px 0 #05050a; font-size: clamp(7px, 1.35vh, 11px); } /* ===== G_16 3.8–3.9 (F.23): тексти підсумку вище, кнопки «Новий кубок / У меню» більші й БЕЗ плашок ===== */ #bracket-msg { bottom: calc(var(--sab) + 14.5vh); } #bracket-msg .end-title { margin-bottom: .35em; } #bracket-msg .end-sub { margin-bottom: .2em; } .end-row.v83 .btn.end-key.plain, .end-row.v83 .btn.end-key.plain.again, .end-row.v83 .btn.end-key.plain.home, .end-row.v83 .btn.end-key.plain.champion { background: none; border: none; box-shadow: none; border-radius: 0; padding: .4em .9em; min-height: 0; font-size: clamp(12px, 2.6vh, 20px); letter-spacing: .08em; text-transform: uppercase; color: transparent; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(0 0 8px rgba(0,0,0,.6)); } .end-row.v83 .btn.end-key.plain.again { background-image: linear-gradient(170deg, #CFFFF6 0%, #00F5D4 45%, #2A7CFF 100%); } .end-row.v83 .btn.end-key.plain.again.champion { background-image: linear-gradient(170deg, #FFF7D6 0%, #FFD700 45%, #FF8A00 100%); } .end-row.v83 .btn.end-key.plain.home { background-image: linear-gradient(170deg, #F2E6FF 0%, #B48CFF 45%, #FF2BD6 100%); } .end-row.v83 .btn.end-key.plain:active { transform: scale(.96); } @media (max-height: 520px) { #bracket-msg { bottom: calc(var(--sab) + 13vh); } .end-row.v83 .btn.end-key.plain { font-size: clamp(11px, 2.3vh, 16px); } } /* ===== G_17 11 (E.31): панель скарг з нуля ===== */ .pl-list.v11 { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px); max-height: 58vh; overflow-y: auto; padding: 8px 6px; scrollbar-width: none; overscroll-behavior: contain; touch-action: none; } .pl-list.v11::-webkit-scrollbar { display: none; } .pl-row.v11 { position: relative; display: grid; grid-template-columns: minmax(96px, 1.5fr) 1fr auto; align-items: center; gap: clamp(6px, 1vw, 12px); padding: clamp(6px, 1.1vh, 10px) clamp(10px, 1.4vw, 16px); border-radius: 12px; background: transparent; isolation: isolate; } /* контур — СТАТИЧНИЙ градієнт фігурки гравця (без анімації); при розкритих причинах — червона позначка скарги */ .pl-row.v11::before { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(135deg, var(--g0), var(--g1), var(--g2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background 420ms, filter 420ms; } .pl-row.v11.armed::before { background: linear-gradient(135deg, #FF3355, #C2003A, #7A0A1A); filter: drop-shadow(0 0 6px rgba(255,51,85,.45)); } .pl-row.v11.armed { animation: jelly-arm 520ms cubic-bezier(.2,1.5,.3,1) 1; } @keyframes jelly-arm { 0% { transform: scale(1, 1); } 35% { transform: scale(1.04, .94); } 65% { transform: scale(.98, 1.03); } 100% { transform: scale(1, 1); } } .pl-row.v11.off .pl-nick { opacity: .3; filter: grayscale(1); } .pl-row.v11 .pl-left { position: relative; min-width: 0; display: flex; align-items: center; } .pl-row.v11 .pl-nick { width: 100%; height: auto; aspect-ratio: 4/1; cursor: pointer; filter: drop-shadow(1px 1px 0 #000); transition: opacity 240ms, filter 240ms; } .pl-row.v11 .pl-name { font-family: var(--font-display); font-size: clamp(8px, 1.6vh, 12px); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-row.v11 .pl-rep.face { appearance: none; width: clamp(30px, 5.4vh, 44px); height: clamp(30px, 5.4vh, 44px); border: none; background: none; box-shadow: none; padding: 0; cursor: pointer; display: grid; place-items: center; filter: drop-shadow(2px 2px 0 #05050a); } .pl-row.v11 .pl-rep.face .face-wrap { display: block; width: 100%; height: 100%; } .pl-row.v11 .pl-rep.face.pop { animation: mark-pop .5s cubic-bezier(.2,1.6,.3,1) 1; } .pl-row.v11 .pl-reasons.v11 { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; } .pl-row.v11 .pl-reasons.v11.hide { animation: reasons-hide 240ms ease-in forwards; } @keyframes reasons-hide { to { opacity: 0; transform: scaleY(.6); } } .pl-row.v11 .pl-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .pl-row.v11 .pl-reason.v11 { appearance: none; font-family: var(--font-display); font-size: clamp(7.5px, 1.4vh, 11px); letter-spacing: .06em; color: #fff; text-shadow: 1px 1px 0 #000; padding: .45em .9em; border-radius: 9px; border: 2px solid #05050a; background: linear-gradient(160deg, #3a0a14, #1a040a); box-shadow: 2px 2px 0 #05050a; cursor: pointer; white-space: normal; max-width: 100%; line-height: 1.15; text-align: right; transform-origin: right center; animation: reason-jelly 460ms cubic-bezier(.2,1.5,.3,1) both; animation-delay: calc(var(--i, 0) * 140ms); } .pl-row.v11 .pl-reason.v11.sent { opacity: .45; border-color: #FF3355; } /* ===================== G_17 — ТАНДЕМИ v13 (D.39–D.47, C.23): сцена з нуля у рожево-пурпуровому градієнті кнопки меню ===================== */ /* Ритм «без → три з → без»: заголовок без плашки · кубки з плашками · замок без · три дії з плашками · «Назад» без. Жодних переливань. */ #tandems-screen.v13 { --tdA: #FF2BD6; --tdB: #7B3BFF; --tdInk: #05050a; justify-content: space-evenly; align-items: center; gap: 0; animation: none; padding: calc(var(--sat) + clamp(4px, calc(var(--vh, 1vh) * 1.2), 12px)) 0 calc(var(--sab) + clamp(4px, calc(var(--vh, 1vh) * 1.2), 12px)); overflow: hidden; } #tandems-screen.v13 #td-title { margin: 0; padding: 0 4vw; font-size: clamp(12px, calc(var(--vh, 1vh) * 3.4), 30px); letter-spacing: .12em; } #tandems-screen.v13 #td-title span { background-image: linear-gradient(120deg, #FFB3F0 0%, var(--tdA) 38%, #B48CFF 70%, var(--tdB) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 var(--tdInk)) drop-shadow(0 0 10px rgba(255,43,214,.28)); } /* кубки — відстань як у меню (резерв стріка над кожним), геометрія меню */ #tandems-screen.v13 #td-cups { display: flex; flex-direction: column; align-items: center; gap: 0; } #tandems-screen.v13 .td-cup-wrap { display: flex; flex-direction: column; align-items: center; } #tandems-screen.v13 .td-gap { height: clamp(10px, calc(var(--vh, 1vh) * 4.2), 40px); } #tandems-screen.v13 .btn.cup.td-cup { min-height: clamp(30px, calc(var(--vh, 1vh) * 6.4), 56px); transform-style: preserve-3d; backface-visibility: visible; } #tandems-screen.v13 .btn.cup.td-cup .td-ring { display: none; } /* D.44: видимий статичний градієнтний маркер обраного кубка — рожево-пурпурова рамка + плашка «Обрано» над правим верхнім кутом */ #tandems-screen.v13 .btn.cup.td-cup.selected { box-shadow: 0 0 0 2px var(--tdInk), 0 0 0 5px var(--tdA), 0 0 0 7px var(--tdInk), 6px 6px 0 var(--tdInk), 0 0 24px rgba(255,43,214,.5); } #tandems-screen.v13 .btn.cup.td-cup.selected.quantum { box-shadow: 0 0 0 3px var(--tdInk), 0 0 0 6px var(--tdB), 0 0 0 8px var(--tdInk), 7px 7px 0 var(--tdInk), 0 0 34px rgba(123,59,255,.55); } #tandems-screen.v13 .btn.cup.td-cup .td-mark { position: absolute; right: -2px; top: -2px; z-index: 3; display: grid; place-items: center; padding: .1em .55em; border-radius: 0 inherit 0 8px; border: 2px solid var(--tdInk); background: linear-gradient(120deg, var(--tdA), var(--tdB)); color: #fff; font-family: var(--font-display); font-size: .48em; letter-spacing: .14em; text-transform: uppercase; text-shadow: 1px 1px 0 var(--tdInk); box-shadow: 2px 2px 0 var(--tdInk); opacity: 0; transform: translate(10%, -40%) scale(.6); transition: opacity 220ms ease, transform 320ms cubic-bezier(.3,1.6,.5,1); pointer-events: none; overflow: visible; } #tandems-screen.v13 .btn.cup.td-cup .td-mark b { font-weight: inherit; } #tandems-screen.v13 .btn.cup.td-cup.selected .td-mark { opacity: 1; transform: translate(0, 0) scale(1); } #tandems-screen.v13 .btn.cup.td-cup.warn .td-mark { opacity: 0; } /* три дії — плашки у рожево-пурпуровому; одна ширина = квантовий кубок */ #tandems-screen.v13 #td-actions { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, calc(var(--vh, 1vh) * 1.4), 14px); width: min(92vw, clamp(260px, calc(var(--vh, 1vh) * 58), 580px)); } #tandems-screen.v13 .btn.td-act, #tandems-screen.v13 .btn.td-act.create, #tandems-screen.v13 .btn.td-act.join, #tandems-screen.v13 .btn.td-act.random { position: relative; overflow: hidden; isolation: isolate; width: 100%; min-height: clamp(38px, calc(var(--vh, 1vh) * 8), 68px); padding: .5em 1em; font-size: clamp(10px, calc(var(--vh, 1vh) * 2.1), 18px); letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; white-space: normal; color: #fff; border: 3px solid var(--tdInk); border-radius: 8px 2px 8px 2px; background: linear-gradient(120deg, var(--tdA), var(--tdB)); box-shadow: 4px 4px 0 var(--tdInk), inset 0 0 0 2px rgba(255,255,255,.18); text-shadow: 2px 2px 0 var(--tdInk); animation: none !important; transition: filter 200ms; transform-origin: 50% 50%; will-change: transform; } #tandems-screen.v13 .btn.td-act.join { background: linear-gradient(120deg, #FF4FDF 0%, var(--tdA) 30%, var(--tdB) 100%); } #tandems-screen.v13 .btn.td-act.random { background: linear-gradient(120deg, var(--tdB) 0%, var(--tdA) 100%); } #tandems-screen.v13 .btn.td-act.dim { filter: saturate(.35) brightness(.55); } #tandems-screen.v13 .btn.td-act.busy { filter: brightness(1.2); } #tandems-screen.v13 .btn.td-act .cup-label.alt { color: #fff; } /* D.45: слово — літери желейно по центру кнопки «Увійти за кодовим словом» (без комірок); текст тане, коли є літери */ #tandems-screen.v13 .btn.td-act .td-word { position: absolute; left: .5em; right: .5em; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; gap: .04em; z-index: 1; font-family: var(--font-display); letter-spacing: .08em; color: #fff; text-shadow: 2px 2px 0 var(--tdInk), 0 0 12px rgba(255,255,255,.35); pointer-events: none; opacity: 1; transition: opacity 240ms ease; white-space: nowrap; } #tandems-screen.v13 .btn.td-act .td-word.off { opacity: 0; } #tandems-screen.v13 .btn.td-act .td-word .td-ch { display: inline-block; font-weight: inherit; animation: td-ch-in 420ms cubic-bezier(.3,1.7,.5,1) both; } #tandems-screen.v13 .btn.td-act .td-word .td-ch.now { animation: none; } @keyframes td-ch-in { 0% { transform: scale(.2, 1.6); opacity: 0; } 55% { transform: scale(1.18, .86); opacity: 1; } 100% { transform: scale(1, 1); opacity: 1; } } /* очікування (D.29): текст тане, міні-кронштейн проявляється на всю кнопку */ #tandems-screen.v13 .btn.td-act .td-mini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92); width: calc(100% - 8px); height: calc(100% - 6px); opacity: 0; transition: opacity 420ms ease, transform 420ms ease; pointer-events: none; z-index: 2; border-radius: 6px; overflow: hidden; } #tandems-screen.v13 .btn.td-act.waiting .td-mini { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* D.41: замок — без плашки, по центру над «Створити»; статичний градієнт; анімація лише переходу */ #tandems-screen.v13 .td-lock.v13, #workshop-screen .td-lock.v13 { -webkit-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; filter: drop-shadow(3px 3px 0 var(--tdInk, #05050a)) drop-shadow(0 0 10px rgba(255,43,214,.3)); -webkit-tap-highlight-color: transparent; } .td-lock.v13 svg { display: block; width: clamp(40px, calc(var(--vh, 1vh) * 9.4), 84px); height: auto; overflow: visible; } .td-lock.v13 .td-lock-cap { font-family: var(--font-display); font-size: clamp(7px, calc(var(--vh, 1vh) * 1.35), 11px); letter-spacing: .12em; text-transform: uppercase; background-image: linear-gradient(120deg, #FFB3F0, #FF2BD6 50%, #B48CFF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; max-width: 70vw; text-align: center; line-height: 1.1; } .td-lock.v13 .lk-shackle { transform-origin: 35px 26px; transition: transform 520ms cubic-bezier(.3,1.5,.4,1); } .td-lock.v13.open .lk-shackle { transform: translateY(-7px) rotate(-34deg) translateX(3px); } .td-lock.v13 .lk-bolt { transform-origin: 24px 36px; transition: transform 380ms cubic-bezier(.2,1.4,.5,1) 60ms, opacity 200ms; } .td-lock.v13.open .lk-bolt { transform: scaleY(0); opacity: 0; } .td-lock.v13 .lk-star { transform-origin: 24px 36px; transform: scale(0) rotate(-90deg); transition: transform 460ms cubic-bezier(.2,1.6,.4,1) 120ms, opacity 200ms 120ms; } .td-lock.v13.open .lk-star { transform: scale(1) rotate(0deg); opacity: 1; } .td-lock.v13 .lk-rays path { transition: opacity 320ms ease 160ms; } .td-lock.v13.open .lk-rays path { opacity: 0; } .td-lock.v13 .lk-glow ellipse { transition: opacity 400ms ease; } .td-lock.v13.open .lk-glow ellipse { opacity: .55; } .td-lock.v13.instant * { transition: none !important; animation: none !important; } .td-lock.v13.ro { opacity: .6; pointer-events: none; } .td-lock.v13:active svg { transform: scale(.94); } @keyframes td-rays-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } } /* «Назад у головне меню» — градієнтний текст без плашки, не маленька */ #tandems-screen.v13 #td-back { margin: 0; background: none; border: none; box-shadow: none; padding: .4em 1em; min-height: 0; font-size: clamp(11px, calc(var(--vh, 1vh) * 2.4), 19px); letter-spacing: .1em; text-transform: uppercase; background-image: linear-gradient(120deg, #FFB3F0 0%, #FF2BD6 45%, #B48CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 var(--tdInk)) drop-shadow(0 0 8px rgba(0,0,0,.6)); animation: none !important; } #tandems-screen.v13 #td-back:active { transform: translate(1px, 1px); } /* D.45: клавіатура з нуля у стилі Тандемів — під замком (над діями не перекриває кнопку «Увійти»); з'являється знизу, згортається вниз */ #tandems-screen.v13 #td-keyboard.v13 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; display: flex; flex-direction: column; gap: clamp(5px, calc(var(--vh, 1vh) * 1), 9px); padding: clamp(8px, calc(var(--vh, 1vh) * 1.4), 14px) clamp(6px, 1.2vw, 14px) calc(var(--sab) + clamp(8px, calc(var(--vh, 1vh) * 1.4), 14px)); background: linear-gradient(180deg, rgba(40,10,56,.97), rgba(16,6,32,.985)); border-top: 3px solid var(--tdInk); box-shadow: 0 -5px 0 rgba(255,43,214,.35), 0 -12px 34px rgba(0,0,0,.65); animation: td-kb-up 280ms cubic-bezier(.2,.9,.3,1) both; } #tandems-screen.v13 #td-keyboard.v13.down { animation: td-kb-down 280ms cubic-bezier(.5,0,.8,.4) both; pointer-events: none; } @keyframes td-kb-down { from { transform: translateY(0); } to { transform: translateY(100%); } } /* коли клавіатура відкрита, сцена піднімає ряд дій так, щоб «Увійти» лишалась видимою над клавіатурою; «Назад» і нижній кубок ховаються */ #tandems-screen.v13 #td-keyboard.v13 .kb-rows { display: flex; flex-direction: column; gap: clamp(5px, calc(var(--vh, 1vh) * 1), 9px); } #tandems-screen.v13 #td-keyboard.v13 .kb-row { display: flex; justify-content: center; gap: clamp(3px, .7vw, 8px); } #tandems-screen.v13 #td-keyboard.v13 .kb-key { flex: 1 1 0; min-width: 0; max-width: clamp(36px, 7.6vw, 76px); height: clamp(34px, calc(var(--vh, 1vh) * 8), 64px); padding: 0; border: 2px solid var(--tdInk); border-radius: 7px 2px 7px 2px; background: linear-gradient(160deg, #7B3BFF 0%, #4a1f9e 100%); box-shadow: 0 3px 0 var(--tdInk), inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; font-family: var(--font-display); font-size: clamp(13px, calc(var(--vh, 1vh) * 3), 26px); display: flex; align-items: center; justify-content: center; gap: .3em; cursor: pointer; animation: none !important; transition: none; -webkit-tap-highlight-color: transparent; text-transform: none; } #tandems-screen.v13 #td-keyboard.v13 .kb-key b { font-weight: inherit; text-shadow: 2px 2px 0 var(--tdInk); text-transform: uppercase; } #tandems-screen.v13 #td-keyboard.v13 .kb-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tdInk), inset 0 0 0 1px rgba(255,255,255,.14); } #tandems-screen.v13 #td-keyboard.v13 .kb-key.apo { background: linear-gradient(160deg, #FF2BD6 0%, #a3178a 100%); } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key { max-width: none; font-size: clamp(10px, calc(var(--vh, 1vh) * 2), 16px); letter-spacing: .08em; } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key.x { flex: 1 1 0; max-width: clamp(48px, 11vw, 96px); background: linear-gradient(160deg, #3a1b5c, #1c0b30); } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key.erase { flex: 2 1 0; background: linear-gradient(160deg, #c81e92, #6e1050); } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key.paste { flex: 2.4 1 0; background: linear-gradient(160deg, #7B3BFF, #4a1f9e); } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key.ok { flex: 2 1 0; background: linear-gradient(160deg, #5a3a7a, #2e1a44); color: rgba(255,255,255,.55); } #tandems-screen.v13 #td-keyboard.v13 .kb-row.bottom .kb-key.ok.ready { background: linear-gradient(120deg, #FF2BD6, #7B3BFF); color: #fff; box-shadow: 0 3px 0 var(--tdInk), 0 0 18px rgba(255,43,214,.55), inset 0 0 0 1px rgba(255,255,255,.25); } /* іконки клавіатури — з нуля (CSS-маски): хрестик, стерти (стрілка-клин), вставити (аркуш), галочка */ #tandems-screen.v13 #td-keyboard.v13 .kb-ico { display: inline-block; width: 1.15em; height: 1.15em; background: currentColor; flex: 0 0 auto; filter: drop-shadow(1px 1px 0 var(--tdInk)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } #tandems-screen.v13 #td-keyboard.v13 .kb-ico.x { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 1.3em; height: 1.3em; } #tandems-screen.v13 #td-keyboard.v13 .kb-ico.erase { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } #tandems-screen.v13 #td-keyboard.v13 .kb-ico.paste { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } #tandems-screen.v13 #td-keyboard.v13 .kb-ico.ok { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } #tandems-screen.v13 #td-keyboard.v13 .kb-native { width: min(92vw, 520px); align-self: center; height: clamp(36px, calc(var(--vh, 1vh) * 7.8), 64px); padding: 0 .8em; border: 3px solid var(--tdInk); border-radius: 8px 2px 8px 2px; background: #1a0a2e; color: #fff; font-family: var(--font-display); font-size: clamp(14px, calc(var(--vh, 1vh) * 3), 26px); text-align: center; outline: none; box-shadow: 3px 3px 0 var(--tdInk), inset 0 0 0 1px rgba(255,43,214,.45); } @media (orientation: portrait) { #tandems-screen.v13 #td-keyboard.v13 .kb-key { max-width: clamp(36px, 7.6vh, 76px); } } @media (max-height: 430px) { #tandems-screen.v13 .td-gap { height: clamp(6px, calc(var(--vh, 1vh) * 2.6), 14px); } #tandems-screen.v13 .btn.cup.td-cup { min-height: 28px; } #tandems-screen.v13 .btn.td-act, #tandems-screen.v13 .btn.td-act.create, #tandems-screen.v13 .btn.td-act.join, #tandems-screen.v13 .btn.td-act.random { min-height: 32px; padding: .3em .8em; } #tandems-screen.v13 #td-actions { gap: 5px; } .td-lock.v13 svg { width: 34px; } .td-lock.v13 .td-lock-cap { display: none; } } /* ===== G_17 8.1–8.5 (D.48): кімната Тандемів v13 — зверху по центру блок «Кодове слово тандему» + слово, під ним замок без фону, під ним фінальний блок; усе зменшено; «Назад» градієнтна ===== */ #workshop-screen.v13 #ws-roombar { position: absolute; top: calc(var(--sat) + .8vh); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(2px, calc(var(--vh, 1vh) * .5), 5px); z-index: 9; pointer-events: none; } #workshop-screen.v13 #ws-roombar > * { pointer-events: auto; } #workshop-screen.v13 #room-code.v13 { display: flex; flex-direction: column; align-items: center; gap: .05em; padding: .3em clamp(10px, calc(var(--vh, 1vh) * 2.4), 22px) .35em; min-height: 0; background: linear-gradient(120deg, #FF2BD6, #7B3BFF); border: 2px solid #05050a; border-radius: 8px 2px 8px 2px; box-shadow: 3px 3px 0 #05050a, inset 0 0 0 2px rgba(255,255,255,.18); color: #fff; animation: none !important; } #workshop-screen.v13 #room-code.v13 .rc-label { font-family: var(--font-display); font-size: clamp(6px, calc(var(--vh, 1vh) * 1.25), 10px); letter-spacing: .14em; text-transform: uppercase; color: #ffd9f6; text-shadow: 1px 1px 0 #05050a; background: none; } #workshop-screen.v13 #room-code.v13 .rc-word { font-family: var(--font-display); font-size: clamp(12px, calc(var(--vh, 1vh) * 2.6), 22px); letter-spacing: .1em; text-transform: uppercase; background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; -webkit-text-fill-color: #fff; filter: none; text-shadow: 2px 2px 0 #05050a, 0 0 10px rgba(255,255,255,.35); } #workshop-screen.v13 #room-code.v13:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #05050a; } #workshop-screen.v13 .td-lock.v13.room svg { width: clamp(28px, calc(var(--vh, 1vh) * 6.2), 54px); } #workshop-screen.v13 .td-lock.v13.room .td-lock-cap { font-size: clamp(6px, calc(var(--vh, 1vh) * 1.15), 9px); } #workshop-screen.v13 .td-lock.v13.room.ro { opacity: .85; } #workshop-screen.v13 #ws-status { font-family: var(--font-display); font-size: clamp(7px, calc(var(--vh, 1vh) * 1.4), 11px); color: #ffd9f6; text-shadow: 1px 1px 0 #05050a; letter-spacing: .08em; } /* кронштейн трохи нижче, щоб блок слова + замок мали свій простір; у Кібер/Квантовому фінальний блок не торкається панелі й «Назад» */ #workshop-screen.v13 #ws-bracket { transform: translateY(1.2vh) scale(.9); transform-origin: 50% 54%; } #workshop-screen.v13.cup-0 #ws-bracket { transform: translateY(1.6vh) scale(.94); } #workshop-screen.v13 .bracket-block { border-color: rgba(255,43,214,.42); background: linear-gradient(180deg, rgba(90,20,110,.34), rgba(50,16,90,.42)); } #workshop-screen.v13 .bracket-block.final { border-color: rgba(180,140,255,.7); box-shadow: 0 0 30px rgba(123,59,255,.3); } #workshop-screen.v13 .bracket-block.drop-target { border-color: #FF2BD6; box-shadow: 0 0 22px rgba(255,43,214,.55); } /* «Назад у Товариські Турнірні Тандеми» — градієнтний текст без плашки, не маленька (D.48 8.4) */ #workshop-screen.v13 #ws-back.v13 { background: none; border: none; box-shadow: none; padding: .35em .9em; min-height: 0; font-size: clamp(10px, calc(var(--vh, 1vh) * 2.2), 17px); letter-spacing: .1em; text-transform: uppercase; background-image: linear-gradient(120deg, #FFB3F0 0%, #FF2BD6 45%, #B48CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(0 0 8px rgba(0,0,0,.6)); animation: none !important; white-space: normal; max-width: 60vw; line-height: 1.1; bottom: calc(var(--sab) + 1.2vh); } #workshop-screen.v13 #ws-start { background: linear-gradient(120deg, #FF2BD6, #7B3BFF); color: #fff; border: 3px solid #05050a; box-shadow: 4px 4px 0 #05050a, inset 0 0 0 2px rgba(255,255,255,.18); text-shadow: 2px 2px 0 #05050a; } /* ===== N.2.10 (G_20 3.10, уточнення B.24): текст придбання з'являється РІЗКО під щоразу іншим невеликим нахилом (--tilt, як нотатки в Ательє), тримається, далі тане разом із конфеті. ===== */ .got-text { animation: got-pop-v5 1650ms ease-out forwards; opacity: 0; } @keyframes got-pop-v5 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt, -2deg)) scale(1); } 60% { opacity: 1; transform: translate(-50%, -54%) rotate(var(--tilt, -2deg)) scale(1); } 100% { opacity: 0; transform: translate(-50%, -78%) rotate(var(--tilt, -2deg)) scale(.98); } } /* N.2.3–N.2.6 (G_20 3.3–3.6): Тандеми — комікс-наліпки кубків з назвою під ними, слот серії над наліпкою, «Обрано» зверху по центру наполовину над наліпкою (різко), промені замка відсунуті */ #tandems-screen.v13 #td-cups { flex-direction: row; align-items: flex-end; justify-content: center; gap: clamp(14px, 4vw, 48px); } #tandems-screen.v13 .td-cup-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; } #tandems-screen.v13 .td-streak { display: flex; align-items: flex-end; justify-content: center; height: clamp(30px, calc(var(--vh, 1vh) * 7.5), 72px); position: relative; z-index: 2; transition: transform 0s; } #tandems-screen.v13 .td-streak canvas.streak-fig { width: clamp(44px, calc(var(--vh, 1vh) * 10.5), 96px); height: clamp(44px, calc(var(--vh, 1vh) * 10.5), 96px); filter: drop-shadow(0 2px 0 #000); } #tandems-screen.v13 .td-cup-wrap.selected .td-streak { transform: translateY(calc(-1 * clamp(10px, calc(var(--vh, 1vh) * 2.2), 20px))); } #tandems-screen.v13 .btn.cup.td-cup.sticker, #tandems-screen.v13 .btn.cup.td-cup.sticker.cosmic, #tandems-screen.v13 .btn.cup.td-cup.sticker.cyber, #tandems-screen.v13 .btn.cup.td-cup.sticker.quantum { width: clamp(84px, calc(var(--vh, 1vh) * 20), 190px); min-height: 0; height: clamp(84px, calc(var(--vh, 1vh) * 20), 190px); padding: 0; background: none; border: none; border-radius: 50%; box-shadow: none; overflow: visible; transform-style: flat; } #tandems-screen.v13 .btn.cup.td-cup.sticker.quantum { width: clamp(100px, calc(var(--vh, 1vh) * 24), 230px); height: clamp(100px, calc(var(--vh, 1vh) * 24), 230px); } #tandems-screen.v13 .btn.cup.td-cup.sticker .td-art { position: absolute; inset: 0; z-index: 1; display: block; } #tandems-screen.v13 .btn.cup.td-cup.sticker .td-art svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-4deg); } #tandems-screen.v13 .btn.cup.td-cup.sticker.cyber .td-art svg { transform: rotate(3deg); } #tandems-screen.v13 .btn.cup.td-cup.sticker .cup-skin { border-radius: 50%; opacity: 0; } #tandems-screen.v13 .btn.cup.td-cup.sticker.warn { --ga: #ff4d5e !important; --gb: #a3001a !important; } #tandems-screen.v13 .btn.cup.td-cup.sticker.warn .td-art svg, #tandems-screen.v13 .btn.cup.td-cup.sticker.dim.warn .td-art svg { filter: grayscale(1) sepia(1) saturate(18) hue-rotate(-50deg) brightness(1.05) contrast(1.3) drop-shadow(0 0 14px rgba(255,60,0,.95)); transition: filter 360ms ease; } /* G_26 3: та сама червона палітра, що й желе кнопок кубків у меню (#5a0a00 → #c8321a) */ #tandems-screen.v13 .btn.cup.td-cup.sticker.warn .cup-skin { opacity: .55; border-radius: 50%; background: radial-gradient(circle, rgba(200,50,26,.9) 0%, rgba(90,10,0,.6) 55%, transparent 72%); box-shadow: none; } #tandems-screen.v13 .btn.cup.td-cup.sticker .cup-label.alt { font-size: clamp(10px, calc(var(--vh, 1vh) * 2.2), 18px); color: #fff3c4; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 10px #000; } #tandems-screen.v13 .btn.cup.td-cup.sticker .td-art svg { transition: filter 620ms ease; } #tandems-screen.v13 .btn.cup.td-cup.sticker .cup-label.alt { position: absolute; left: -14%; right: -14%; top: 50%; transform: translateY(-50%); z-index: 4; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(9px, calc(var(--vh, 1vh) * 1.9), 15px); line-height: 1.05; letter-spacing: .08em; color: #fff3c4; text-shadow: 2px 2px 0 #000, 0 0 8px #000; } #tandems-screen.v13 .btn.cup.td-cup.sticker.selected { box-shadow: none; } #tandems-screen.v13 .btn.cup.td-cup.sticker.selected .td-art svg { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--tdA)) drop-shadow(0 0 10px var(--tdA)); } #tandems-screen.v13 .btn.cup.td-cup.sticker.dim .td-art svg { filter: saturate(.25) brightness(.6); } #tandems-screen.v13 .btn.cup.td-cup.sticker .td-mark { right: auto; left: 50%; top: 0; transform: translate(-50%, -50%); border-radius: 6px; padding: .12em .6em; font-size: clamp(9px, calc(var(--vh, 1vh) * 1.8), 14px); transition: none; opacity: 0; } #tandems-screen.v13 .btn.cup.td-cup.sticker.selected .td-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); } #tandems-screen.v13 .td-cup-name { margin-top: clamp(2px, calc(var(--vh, 1vh) * .6), 6px); max-width: clamp(110px, calc(var(--vh, 1vh) * 26), 250px); text-align: center; font-family: var(--font-display); font-size: clamp(9px, calc(var(--vh, 1vh) * 1.8), 15px); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #05050a; line-height: 1.1; } #tandems-screen.v13 .td-cup-name .cup-label { opacity: 1; } .td-lock.v13 .lk-rays { display: none; } /* G_24 3: рисочки-промені навколо замка прибрано; зірка й анімація переходу лишаються */ @media (max-width: 560px) { #tandems-screen.v13 #td-cups { gap: 8px; } #tandems-screen.v13 .btn.cup.td-cup.sticker, #tandems-screen.v13 .btn.cup.td-cup.sticker.quantum { width: 26vw; height: 26vw; } } #tandems-screen.v13 .btn.cup.td-cup.sticker::before, #tandems-screen.v13 .btn.cup.td-cup.sticker::after { display: none !important; content: none !important; } #tandems-screen.v13 .btn.cup.td-cup.sticker.quantum, #tandems-screen.v13 .btn.cup.td-cup.sticker.cyber, #tandems-screen.v13 .btn.cup.td-cup.sticker.cosmic { background: none !important; border: none !important; box-shadow: none !important; } /* N.2.7 (G_20 3.7): бічний ЦИФРОВИЙ блочок коду — виїжджає з-за правого краю; кнопки ТТТ зсуваються ліворуч і лишаються видимими */ #tandems-screen.v13 #td-keyboard.v13.num { position: absolute; left: auto; right: var(--kbGap, clamp(10px, 2.6vw, 30px)); top: 50%; bottom: auto; transform: translate(0, -50%); width: clamp(150px, 26vw, 230px); max-height: 92%; padding: clamp(8px, calc(var(--vh, 1vh) * 1.4), 14px) clamp(8px, 1vw, 12px) clamp(8px, calc(var(--vh, 1vh) * 1.4), 14px) clamp(8px, 1vw, 12px); border-radius: 16px 4px 16px 4px; border: 3px solid var(--tdInk); background: linear-gradient(160deg, #3a1b5c, #1c0b30); box-shadow: 6px 6px 0 var(--tdInk), inset 0 0 0 1px rgba(255,179,240,.35); animation: td-kb-in 360ms cubic-bezier(.2,1.2,.4,1) both; z-index: 14; display: flex; flex-direction: column; gap: clamp(5px, calc(var(--vh, 1vh) * 1), 9px); } #tandems-screen.v13 #td-keyboard.v13.num.down { animation: td-kb-out 360ms cubic-bezier(.2,1.2,.4,1) both; pointer-events: none; } /* G_28 3: вихід — та сама анімація й крива, що й поява, паралельно з поверненням кубків */ @keyframes td-kb-in { from { transform: translate(calc(100% + var(--kbGap, 30px) + 20px), -50%); } to { transform: translate(0, -50%); } } @keyframes td-kb-out { from { transform: translate(0, -50%); } to { transform: translate(calc(100% + var(--kbGap, 30px) + 20px), -50%); } } #tandems-screen.v13 #td-keyboard.v13.num .kb-title { font-family: var(--font-display); font-size: clamp(8px, calc(var(--vh, 1vh) * 1.5), 12px); letter-spacing: .12em; text-transform: uppercase; text-align: center; background-image: linear-gradient(120deg, #FFB3F0, #FF2BD6 50%, #B48CFF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } #tandems-screen.v13 #td-keyboard.v13.num .kb-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(4px, calc(var(--vh, 1vh) * .9), 8px); } #tandems-screen.v13 #td-keyboard.v13.num .kb-key { max-width: none; height: clamp(30px, calc(var(--vh, 1vh) * 7), 56px); font-size: clamp(14px, calc(var(--vh, 1vh) * 3), 24px); } #tandems-screen.v13 #td-keyboard.v13.num .kb-row.bottom { display: flex; gap: clamp(4px, calc(var(--vh, 1vh) * .9), 8px); } #tandems-screen.v13 #td-keyboard.v13.num .kb-row.bottom .kb-key.x { flex: 1 1 0; max-width: none; } #tandems-screen.v13 #td-keyboard.v13.num .kb-row.bottom .kb-key.ok { flex: 2 1 0; } /* при відкритому цифровому блочку сцена НЕ ховає кубки й кнопки — усе зсувається ліворуч і лишається видимим */ #tandems-screen.v13.kb-open #td-cups, #tandems-screen.v13.kb-open #td-actions .btn.td-act.create, #tandems-screen.v13.kb-open #td-actions .btn.td-act.random { display: flex; } #tandems-screen.v13.kb-open #td-back { visibility: visible; } #tandems-screen.v13.kb-open { justify-content: space-evenly; } #tandems-screen.v13 #td-title, #tandems-screen.v13 #td-cups, #tandems-screen.v13 #td-actions, #tandems-screen.v13 #td-back { transition: transform 360ms cubic-bezier(.2,1.2,.4,1); } #tandems-screen.v13.kb-open #td-title, #tandems-screen.v13.kb-open #td-cups, #tandems-screen.v13.kb-open #td-actions, #tandems-screen.v13.kb-open #td-back { transform: translateX(calc(-0.5 * (clamp(150px, 26vw, 230px) + clamp(10px, 2.6vw, 30px)))); } /* G_28 2: лівий фланг = ширина екрана мінус блочок і його відступ; усе по його центру */ @media (orientation: portrait) { #tandems-screen.v13 #td-keyboard.v13.num { width: clamp(150px, 26vh, 230px); } #tandems-screen.v13.kb-open #td-title, #tandems-screen.v13.kb-open #td-cups, #tandems-screen.v13.kb-open #td-actions, #tandems-screen.v13.kb-open #td-back { transform: translateX(calc(-0.5 * (clamp(150px, 26vh, 230px) + clamp(10px, 2.6vw, 30px)))); } } /* N.3.4 (G_20 4.4): панель скарг — вікно по центру екрана; список по центру вікна, не росте від причин; причини — окремий шар по центру рядка */ #players-modal .modal.pl-box { position: relative; align-items: stretch; width: min(92vw, 560px); max-height: 88vh; padding: clamp(10px, 2vh, 18px) clamp(10px, 2vw, 20px); } #players-modal .modal.pl-box .big-msg.small { text-align: center; margin: 0 0 clamp(4px, 1vh, 8px); } #players-modal .modal.pl-box .row { justify-content: center; margin-top: clamp(4px, 1vh, 8px); } .pl-list.v12 { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.4vh, 12px); max-height: 62vh; overflow-y: auto; padding: 6px 4px; scrollbar-width: none; overscroll-behavior: contain; touch-action: none; } .pl-list.v12::-webkit-scrollbar { display: none; } .pl-list.v12 .pl-row.v11 { grid-template-columns: minmax(96px, 1.5fr) 1fr auto; } .pl-reasons.v12 { position: absolute; z-index: 5; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: auto; width: max-content; max-width: 86%; } .pl-reasons.v12.both { transform: translate(-50%, -50%); } .pl-reasons.v12.hide { animation: reasons-hide 220ms ease-in forwards; } .pl-reasons.v12 .pl-col { display: flex; flex-direction: column; gap: 6px; align-items: center; } .pl-reasons.v12 .pl-reason.v11 { text-align: center; transform-origin: center; backdrop-filter: blur(6px); box-shadow: 2px 2px 0 #05050a, 0 0 0 1px rgba(255,51,85,.35), 0 6px 18px rgba(0,0,0,.6); } /* G_28 4: поки один кубок желейний — інші не реагують (ні стиснення, ні клік) */ #tandems-screen.cup-busy .btn.cup.td-cup { pointer-events: none; } #tandems-screen.v13 .btn.cup.td-cup:active { transform: none; } /* ===== G_32 5 (S.5 v2): кронштейн — рахунок/час, тексти й кнопки завершення — З НУЛЯ у Cosmic Spider-Verse стилі ===== Мова форми: скошені комікс-плашки (skew −8°), чорнильна обводка 2px + «друкований» CMYK-зсув (ціанова й маджентова тіні), Ben-Day-крапки на тлі, градієнт версії/золота у тексті. Усе тримається в safe-area і під блоками (ніколи їх не перекриває). */ .bracket-block .live-score.on { display: inline-flex; flex-direction: row; align-items: center; gap: .4em; bottom: -2.5em; padding: .2em .75em; border: 2px solid #05050a; border-radius: 3px; background: linear-gradient(170deg, #121a3a 0%, #0a0d22 100%); background-image: radial-gradient(rgba(255,255,255,.08) 18%, transparent 20%), linear-gradient(170deg, #121a3a 0%, #0a0d22 100%); background-size: 5px 5px, auto; transform: translateX(-50%) skewX(-8deg); box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(0,245,212,.55), 4px 4px 0 rgba(255,43,214,.45); white-space: nowrap; } .bracket-block .live-score.on > * { transform: skewX(8deg); } .bracket-block .live-score .ls-score { display: inline-flex; align-items: baseline; gap: .16em; font-family: var(--font-display); font-size: clamp(11px, 2.1vh, 17px); letter-spacing: .04em; color: #fff; background: none; filter: none; text-shadow: none; } .bracket-block .live-score .ls-score b { font-weight: 400; background: linear-gradient(180deg, #FFF7D6 0%, #FFD700 50%, #FF8A00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #05050a); } .bracket-block .live-score .ls-score .ls-colon { font-style: normal; color: #00F5D4; } .bracket-block .live-score .ls-time { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--font-display); font-size: clamp(8px, 1.55vh, 12px); letter-spacing: .05em; color: #EAF2FF; text-shadow: 1px 1px 0 #05050a; } .bracket-block .live-score .ls-dot { font-style: normal; color: #FF2BD6; } .bracket-block .live-score .ls-plus { color: #05050a; background: #00F5D4; padding: 0 .4em; border-radius: 2px; font-size: .9em; text-shadow: none; } .bracket-block .live-score .ls-combo { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--font-display); font-size: clamp(7px, 1.4vh, 11px); letter-spacing: .04em; color: #FFD700; text-shadow: 1px 1px 0 #05050a; } .bracket-block .live-score.on.golden { border-color: #FFD700; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,215,0,.7), 4px 4px 0 rgba(255,43,214,.45), 0 0 16px rgba(255,215,0,.35); } .bracket-block .live-score.on.live { flex-direction: row; } .bracket-block .live-score .ls-time.live { color: #fff; font-size: clamp(9px, 1.8vh, 14px); } /* тексти завершення: заголовок — комікс-плашка з CMYK-зсувом; підзаголовок — рукописний рядок у золоті */ /* G_34 1: тексти СТРОГО по центру поля блоків (а не вікна): #bracket-field зсунуто на --sal/--sar, тож і текстовий шар займає ту саму ширину й центрує вміст flex-ом; жодних асиметричних паддінгів. Ширина заголовка обмежена, щоб ніколи не лягати на блоки протистоянь. */ #bracket-msg { bottom: calc(var(--sab) + 15vh); left: var(--sal); right: var(--sar); transform: none; max-width: none; width: auto; padding: 0 4px; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; } #bracket-msg .end-title { max-width: min(76vw, 760px); white-space: normal; line-height: 1.15; } #bracket-screen.cup-cosmic #bracket-msg .end-title { max-width: min(36vw, 520px); } #bracket-msg .end-sub, #bracket-msg .end-pending { max-width: min(64vw, 720px); } #bracket-msg .end-title { display: inline-block; font-family: var(--font-display); font-size: clamp(12px, 2.8vh, 26px); letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .28em .9em; border: 2px solid #05050a; border-radius: 3px; background: linear-gradient(170deg, #1a1040 0%, #0a0d22 100%); transform: skewX(-8deg); box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(0,245,212,.6), 4px 4px 0 rgba(255,43,214,.5); text-shadow: 1px 1px 0 #05050a; margin-bottom: .55em; white-space: nowrap; } #bracket-msg .end-title.gold-msg { color: #FFE9A8; border-color: #FFD700; background: linear-gradient(170deg, #4a3200 0%, #1a1000 100%); box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,215,0,.7), 4px 4px 0 rgba(255,138,0,.5), 0 0 18px rgba(255,215,0,.3); } #bracket-msg .end-sub { display: block; font-family: var(--font-body, 'Exo 2', sans-serif); font-weight: 700; font-size: clamp(10px, 2vh, 16px); letter-spacing: .03em; text-transform: none; background: linear-gradient(90deg, #FFF3C4, #FFD700 50%, #FFB454); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #05050a) drop-shadow(-1px -1px 0 #05050a); margin-bottom: .2em; } #bracket-msg .end-pending { font-family: var(--font-body, 'Exo 2', sans-serif); font-weight: 600; letter-spacing: .06em; text-transform: none; color: rgba(255,255,255,.78); text-shadow: 1px 1px 0 #05050a; margin-top: .3em; } /* кнопки: скошені плашки з CMYK-зсувом; «Новий кубок» — бірюза, «Захистити титул» — золото, «До меню» — маджента */ #bracket-actions { bottom: calc(var(--sab) + 2.4vh); left: var(--sal); right: var(--sar); transform: none; max-width: none; padding: 0 4px; display: flex; justify-content: center; } .end-row.v83.v29 { gap: clamp(10px, 2.2vw, 26px); } .end-row.v83.v29 .btn.end-key.v29 { font-family: var(--font-display); color: #fff; border: 2px solid #05050a; border-radius: 3px; background: linear-gradient(170deg, #142a55 0%, #0a1430 100%); transform: skewX(-8deg); box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(0,245,212,.6), 4px 4px 0 rgba(255,43,214,.5); padding: .55em 1.5em; min-height: clamp(34px, 6vh, 50px); font-size: clamp(11px, 2.3vh, 17px); letter-spacing: .1em; text-transform: uppercase; text-shadow: 1px 1px 0 #05050a; -webkit-background-clip: border-box; background-clip: border-box; filter: none; white-space: nowrap; transition: transform .12s, box-shadow .12s; } .end-row.v83.v29 .btn.end-key.v29 > * { display: inline-block; transform: skewX(8deg); } .end-row.v83.v29 .btn.end-key.v29.again { background: linear-gradient(170deg, #0E7F74 0%, #063a40 100%); } .end-row.v83.v29 .btn.end-key.v29.again.champion { background: linear-gradient(170deg, #7a5600 0%, #2a1c00 100%); color: #FFE9A8; border-color: #FFD700; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,215,0,.75), 4px 4px 0 rgba(255,138,0,.5), 0 0 16px rgba(255,215,0,.3); } .end-row.v83.v29 .btn.end-key.v29.home { background: linear-gradient(170deg, #4a1a5a 0%, #1a0d24 100%); box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,43,214,.6), 4px 4px 0 rgba(0,245,212,.45); } .end-row.v83.v29 .btn.end-key.v29:active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 1px 1px 0 #05050a; } @media (max-height: 520px) { .bracket-block .live-score.on { bottom: -2.3em; padding: .14em .55em; } #bracket-msg { bottom: calc(var(--sab) + 13.5vh); } #bracket-msg .end-title { font-size: clamp(11px, 2.5vh, 20px); } .end-row.v83.v29 .btn.end-key.v29 { font-size: clamp(10px, 2.1vh, 15px); padding: .45em 1.1em; } } @media (max-width: 700px) { #bracket-msg .end-title { white-space: normal; } #bracket-screen.cup-cosmic #bracket-msg .end-title { font-size: clamp(10px, 2.2vh, 18px); } } /* G_32 5: уся сцена кронштейна й арени — у safe-area (закруглені екрани, вирізи) */ #bracket-field { left: var(--sal); right: var(--sar); } #hud-top { padding-left: var(--sal); padding-right: var(--sar); } /* ===== G_29 14 + G_31 (S.4): скарги з нуля — фірмовий знак оклику, запас у куті, полум'я знака, закріплення над фігуркою ===== */ #rep-logo.rep-logo { position: absolute; top: calc(var(--sat) + max(1.2vh, 6px)); right: calc(var(--sar) + max(2.2vh, 12px)); width: clamp(30px, 5.4vh, 46px); height: clamp(38px, 6.8vh, 58px); padding: 0; border: none; background: none; box-shadow: none; cursor: grab; touch-action: none; z-index: 30; filter: drop-shadow(0 0 7px rgba(255,43,214,.45)); transition: transform .18s cubic-bezier(.2,1.6,.4,1); transform-origin: 50% 50%; } #rep-logo.rep-logo::before { content: ''; position: absolute; inset: 0; background: inherit; } #rep-logo.rep-logo.taken { animation: rep-taken .18s ease-out; } @keyframes rep-taken { 0% { transform: scale(.78); } 100% { transform: scale(1); } } #rep-layer { position: absolute; inset: 0; pointer-events: none; z-index: 29; overflow: visible; } .rep-mark { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 0 9px rgba(255,77,58,.55)); } .rep-mark.back { transition: transform .5s cubic-bezier(.2,1.8,.3,1), opacity .4s; opacity: .2; } .rep-mark.snap { animation: rep-snap .4s cubic-bezier(.2,1.9,.3,1); } @keyframes rep-snap { 0% { scale: 1.35; } 100% { scale: 1; } } .rep-ico { position: absolute; inset: 0; } /* полум'я знака: 5 копій силуету, що тягнуться назад за напрямком руху (--ang), довжина/яскравість — за швидкістю */ .rep-flame { position: absolute; inset: 0; opacity: 0; transition: opacity .12s; transform: rotate(var(--ang, 0deg)); transform-origin: 50% 50%; } .rep-flame-c { position: absolute; inset: 0; transform: translateX(calc(var(--k) * var(--len, 0) * 22%)) scale(calc(1.25 - var(--k) * .17)); opacity: calc(.6 - var(--k) * .11); filter: saturate(1.3) brightness(calc(1.1 + var(--heat, 0) * .4)) blur(calc(var(--k) * .35px)); transform-origin: 50% 50%; } .rep-flame-c:nth-child(odd) svg { filter: hue-rotate(-18deg); } .rep-flame-c svg { opacity: .8; } .rep-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(255,43,214,.9); box-shadow: 0 0 0 2px #05050a, 0 0 14px rgba(255,77,58,.55), inset 0 0 0 2px #05050a; animation: rep-ring 1s ease-in-out infinite; } .rep-ring.dup { border-color: rgba(255,255,255,.45); border-style: dashed; box-shadow: 0 0 0 2px #05050a; animation: none; } @keyframes rep-ring { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } } /* закріплений знак: повний розмір над фігуркою; під знаком — статичний текст без фону, адаптивний */ .rep-mark.pinned .rep-tag-txt { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .15em; width: max-content; max-width: min(58vw, 320px); text-align: center; font-family: var(--font-body, 'Exo 2', sans-serif); font-weight: 700; line-height: 1.12; letter-spacing: .03em; text-shadow: 1px 1px 0 #05050a, -1px -1px 0 #05050a, 1px -1px 0 #05050a, -1px 1px 0 #05050a, 0 0 10px rgba(255,77,58,.45); } .rep-mark.pinned .rep-tag-a { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(10px, 2vh, 15px); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, #FFF3C4, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #05050a) drop-shadow(-1px -1px 0 #05050a); text-shadow: none; } .rep-mark.pinned .rep-tag-b { display: block; font-size: clamp(8px, 1.5vh, 12px); color: #FFD3DA; } /* ===== G_37 6/8 (фінальне тестування): ТРИ РІВНІ кронштейна за часом матчу гравця — як ранги кубків і версії фігурок ===== .tier-regular (90 с) — базовий: холодна сталь, бірюзова нитка. .tier-overtime (90+30) — потужніший: бурштин і маджента, тепліше світло. .tier-golden (+фінальне комбо) — преміальний: золото, ширше сяйво. Усе — без фонових плашок: тексти кінця, кнопки й таймер драфту — градієнтний текст із чорнильною тінню у палітрі свого рівня; блок рахунку у блоці протистояння — теж три рівні (.plain / .over / .golden). */ #bracket-screen { --tA: #CFFFF6; --tB: #00F5D4; --tC: #2A7CFF; --tGlow: rgba(0,245,212,.45); } #bracket-screen.tier-overtime { --tA: #FFF3C4; --tB: #FFB454; --tC: #FF2BD6; --tGlow: rgba(255,180,84,.5); } #bracket-screen.tier-golden { --tA: #FFF7D6; --tB: #FFD700; --tC: #FF8A00; --tGlow: rgba(255,215,0,.6); } /* блок рахунку: базовий лишається як є; +30 — бурштинова рамка; фінальне комбо — золото (вже було) */ .bracket-block .live-score.on.over { border-color: #FFB454; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,180,84,.7), 4px 4px 0 rgba(255,43,214,.45), 0 0 12px rgba(255,180,84,.3); } .bracket-block .live-score.on.over .ls-plus { background: #FFB454; } .bracket-block .live-score.on.golden .ls-plus { background: #FFD700; } .bracket-block .live-score.on.golden .ls-combo { color: #FFF7D6; } /* тексти кінця — без плашок, градієнт рівня */ #bracket-screen #bracket-msg .end-title, #bracket-screen #bracket-msg .end-title.gold-msg { border: none; background: none; box-shadow: none; transform: none; padding: 0 .2em; white-space: normal; background-image: linear-gradient(170deg, var(--tA) 0%, var(--tB) 50%, var(--tC) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(-1px -1px 0 #05050a) drop-shadow(0 0 10px var(--tGlow)); font-size: clamp(14px, 3.2vh, 30px); letter-spacing: .05em; } #bracket-screen #bracket-msg .end-sub { background: linear-gradient(90deg, #fff, var(--tA) 50%, var(--tB)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #05050a) drop-shadow(-1px -1px 0 #05050a); } #bracket-screen #bracket-msg .end-pending { color: var(--tA); } /* кнопки кінця — чисті написи у градієнті рівня (без скосу й плашки) */ #bracket-screen .end-row.v83.v29 .btn.end-key.v29, #bracket-screen .end-row.v83.v29 .btn.end-key.v29.again, #bracket-screen .end-row.v83.v29 .btn.end-key.v29.home, #bracket-screen .end-row.v83.v29 .btn.end-key.v29.again.champion { border: none; background: none; box-shadow: none; transform: none; padding: .35em .9em; min-height: 0; background-image: linear-gradient(170deg, var(--tA) 0%, var(--tB) 45%, var(--tC) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(-1px -1px 0 #05050a) drop-shadow(0 0 8px var(--tGlow)); font-size: clamp(12px, 2.6vh, 20px); letter-spacing: .09em; } #bracket-screen .end-row.v83.v29 .btn.end-key.v29 > * { transform: none; } #bracket-screen .end-row.v83.v29 .btn.end-key.v29.home { background-image: linear-gradient(170deg, #F2E6FF 0%, var(--tA) 45%, var(--tC) 100%); } #bracket-screen .end-row.v83.v29 .btn.end-key.v29:active { transform: translate(1px, 1px); box-shadow: none; filter: drop-shadow(1px 1px 0 #05050a); } /* таймер драфту — у тому ж рівні, без плашки */ #bracket-screen #draft-timer { border: none; background: none; padding: 0 .4em; background-image: linear-gradient(170deg, var(--tA) 0%, var(--tB) 50%, var(--tC) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(-1px -1px 0 #05050a) drop-shadow(0 0 8px var(--tGlow)); } /* повідомлення кронштейна (драфт / стадія) — у рівні */ #bracket-screen.tier-overtime #bracket-msg, #bracket-screen.tier-golden #bracket-msg { color: var(--tA); } /* G_41 10/17: підказки керування й скарги — градієнтний текст без плашки, статично, не заважають грі */ #arena-screen .ctrl-hint { position: absolute; left: 50%; bottom: calc(var(--sab) + max(1.6vh, 8px)); transform: translateX(-50%) rotate(-1deg); max-width: min(78vw, 640px); text-align: center; font-family: var(--font-display); font-size: clamp(9px, 1.9vh, 15px); letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; padding: .35em 1.1em; color: #fff; background: linear-gradient(170deg, rgba(26,16,64,.92), rgba(5,5,10,.92)); border: 2px solid #05050a; border-radius: 4px; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(0,245,212,.7), 4px 4px 0 rgba(255,43,214,.45); text-shadow: 1px 1px 0 #05050a; pointer-events: none; z-index: 6; } /* G_46 8: підказки у коміксній плашці TetraXO (чорнильна обводка, CMYK-зсув), а не «голий» градієнтний текст */ #arena-screen .rep-hint { position: absolute; top: calc(var(--sat) + max(1.2vh, 6px) + clamp(38px, 6.8vh, 58px) + 8px); right: calc(var(--sar) + max(2.2vh, 12px)); width: clamp(90px, 18vw, 180px); text-align: right; font-family: var(--font-display); font-size: clamp(7px, 1.3vh, 10px); letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; padding: .35em .7em; color: #FFD3DA; background: linear-gradient(170deg, rgba(60,8,20,.92), rgba(5,5,10,.92)); border: 2px solid #05050a; border-radius: 4px; box-shadow: 2px 2px 0 #05050a, -2px -2px 0 rgba(255,107,107,.7); text-shadow: 1px 1px 0 #05050a; pointer-events: none; z-index: 6; } #arena-screen .ctrl-hint[data-kind="powerHint"] { border-color: #FF2BD6; color: #FFE9A8; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,215,0,.8), 0 0 18px rgba(255,43,214,.5); } #arena-screen .ctrl-hint[data-kind="jellyHint"] { border-color: #a9f5ff; color: #eaf7ff; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(169,245,255,.8); } #arena-screen .ctrl-hint[data-kind="lockHint"] { border-color: #FFD700; color: #FFE9A8; box-shadow: 3px 3px 0 #05050a, -2px -2px 0 rgba(255,215,0,.8); } /* ================= G_41 22/23: КРОНШТЕЙН — фони блоків з ПРОГРЕСІЄЮ від перших до фіналу, унікальні для кожного кубка; роздільники персоналізовані (не білі). Рангові ігри (#bracket-screen): Космічний — глибокий смарагд → бірюза → золото; Кібер — індиго → неон-ціан → золото; Квантовий — одразу золото-пурпур (перший блок = фінал). Лише ФІНАЛ золотий у всіх кубках. ================= */ #bracket-screen.cup-cosmic .bracket-block[data-key^="L0"], #bracket-screen.cup-cosmic .bracket-block[data-key^="R0"] { border-color: rgba(0,178,146,.55); background: linear-gradient(180deg, rgba(0,46,40,.55), rgba(2,22,30,.6)); box-shadow: 0 0 14px rgba(0,178,146,.18); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L0"] .vs, #bracket-screen.cup-cosmic .bracket-block[data-key^="R0"] .vs { background: linear-gradient(90deg, transparent, rgba(0,245,212,.55), transparent); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L1"], #bracket-screen.cup-cosmic .bracket-block[data-key^="R1"] { border-color: rgba(0,245,212,.65); background: linear-gradient(180deg, rgba(0,78,80,.55), rgba(0,34,60,.6)); box-shadow: 0 0 18px rgba(0,245,212,.22); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L1"] .vs, #bracket-screen.cup-cosmic .bracket-block[data-key^="R1"] .vs { background: linear-gradient(90deg, transparent, rgba(127,231,255,.7), transparent); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L2"], #bracket-screen.cup-cosmic .bracket-block[data-key^="R2"] { border-color: rgba(140,240,220,.75); background: linear-gradient(180deg, rgba(0,110,110,.5), rgba(40,60,20,.55)); box-shadow: 0 0 22px rgba(140,240,220,.28); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L2"] .vs, #bracket-screen.cup-cosmic .bracket-block[data-key^="R2"] .vs { background: linear-gradient(90deg, transparent, rgba(200,255,220,.75), rgba(255,215,0,.5), transparent); } #bracket-screen.cup-cosmic .bracket-block.final { border-color: var(--gold); background: linear-gradient(180deg, rgba(60,44,0,.58), rgba(20,14,0,.62)); box-shadow: 0 0 40px rgba(255,215,0,.35); } #bracket-screen.cup-cosmic .bracket-block.final .vs { background: linear-gradient(90deg, transparent, rgba(255,215,0,.85), rgba(255,255,255,.6), rgba(255,215,0,.85), transparent); } /* Кібер: півфінали — НЕ золоті (G_41 22), індиго-ціан; фінал — золото з неоном */ #bracket-screen.cup-cyber .bracket-block.semi8 { border-color: rgba(0,229,255,.6); background: linear-gradient(180deg, rgba(12,24,70,.58), rgba(4,10,40,.62)); box-shadow: 0 0 18px rgba(0,229,255,.22); } #bracket-screen.cup-cyber .bracket-block.semi8 .vs { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,229,255,.75) 6px 12px); } #bracket-screen.cup-cyber .bracket-block.final { border-color: var(--gold); background: linear-gradient(180deg, rgba(50,40,0,.6), rgba(0,20,40,.62)); box-shadow: 0 0 40px rgba(255,215,0,.35), inset 0 0 30px rgba(0,229,255,.15); } #bracket-screen.cup-cyber .bracket-block.final .vs { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,215,0,.85) 6px 12px); } /* Квантовий: один блок = фінал — золото + пурпурна плазма одразу */ #bracket-screen.cup-quantum .bracket-block.final.mega { border-color: var(--gold); background: linear-gradient(135deg, rgba(60,40,0,.6), rgba(80,10,90,.55) 60%, rgba(20,0,40,.62)); box-shadow: 0 0 44px rgba(255,215,0,.3), 0 0 60px rgba(224,77,255,.25); } #bracket-screen.cup-quantum .bracket-block.final.mega .vs { background: linear-gradient(90deg, transparent, rgba(255,215,0,.85), rgba(255,43,214,.85), rgba(255,215,0,.85), transparent); } /* Тандеми (#workshop-screen.v13): пурпурна прогресія — рожевий → пурпур → світлий пурпур у фіналі; Кібер півфінали не як фінал */ #workshop-screen.v13 .bracket-block[data-key^="L0"], #workshop-screen.v13 .bracket-block[data-key^="R0"] { border-color: rgba(255,43,214,.42); background: linear-gradient(180deg, rgba(90,20,110,.34), rgba(50,16,90,.42)); } #workshop-screen.v13 .bracket-block[data-key^="L1"], #workshop-screen.v13 .bracket-block[data-key^="R1"] { border-color: rgba(216,107,255,.55); background: linear-gradient(180deg, rgba(110,30,140,.38), rgba(60,20,110,.46)); } #workshop-screen.v13 .bracket-block[data-key^="L2"], #workshop-screen.v13 .bracket-block[data-key^="R2"], #workshop-screen.v13 .bracket-block.semi8 { border-color: rgba(200,140,255,.62); background: linear-gradient(180deg, rgba(120,50,170,.4), rgba(70,30,130,.48)); box-shadow: 0 0 16px rgba(180,120,255,.2); } #workshop-screen.v13 .bracket-block .vs { background: linear-gradient(90deg, transparent, rgba(255,120,240,.6), transparent); } #workshop-screen.v13 .bracket-block.final .vs { background: linear-gradient(90deg, transparent, rgba(216,107,255,.9), rgba(255,255,255,.5), rgba(216,107,255,.9), transparent); } /* ================= G_43 12–14 / G_44 1: КРОНШТЕЙН — тексти ЗАВЖДИ під блоками, блоки рахунку/часу персональні до кубка і стадії ================= */ /* поле блоків піднято і стиснуто по висоті — під ним завжди лишається смуга для повідомлення, таймера драфту й кнопок */ #bracket-screen #bracket-field, #workshop-screen #ws-bracket { transform: translateY(-7%) scale(.9); transform-origin: 50% 42%; } /* G_54 D */ #bracket-screen #bracket-msg { bottom: calc(var(--sab) + 11vh); left: 0; right: 0; max-width: none; margin: 0 auto; width: auto; line-height: 1.2; align-items: center; } /* G_46 10: по центру під фінальним блоком — без max-width, який зсував смугу вліво */ #bracket-screen #bracket-actions { bottom: calc(var(--sab) + 2vh); left: 0; right: 0; max-width: none; margin: 0 auto; flex-wrap: wrap; justify-content: center; row-gap: .6vh; } #bracket-screen #draft-timer { margin: 0; } /* блок рахунку: капсула, яка міксується з блоком (та сама рамка і фон), стадія — за ключем блоку; +30 і фінальне комбо — свої кольори */ .bracket-block .live-score.on { border-radius: 999px; padding: .2em .7em; backdrop-filter: blur(2px); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L0"] .live-score.on, #bracket-screen.cup-cosmic .bracket-block[data-key^="R0"] .live-score.on { border-color: rgba(0,178,146,.7); background: rgba(0,46,40,.85); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L1"] .live-score.on, #bracket-screen.cup-cosmic .bracket-block[data-key^="R1"] .live-score.on { border-color: rgba(0,245,212,.8); background: rgba(0,60,70,.88); } #bracket-screen.cup-cosmic .bracket-block[data-key^="L2"] .live-score.on, #bracket-screen.cup-cosmic .bracket-block[data-key^="R2"] .live-score.on { border-color: rgba(140,240,220,.85); background: rgba(10,90,80,.88); } #bracket-screen.cup-cosmic .bracket-block.final .live-score.on { border-color: var(--gold); background: rgba(60,44,0,.9); } #bracket-screen.cup-cyber .bracket-block.semi8 .live-score.on { border-color: rgba(0,229,255,.8); background: rgba(12,24,70,.9); border-style: dashed; } #bracket-screen.cup-cyber .bracket-block.final .live-score.on { border-color: rgba(0,229,255,.9); background: linear-gradient(90deg, rgba(0,40,70,.92), rgba(50,40,0,.92)); } #bracket-screen.cup-quantum .bracket-block.final.mega .live-score.on { border-color: rgba(255,43,214,.9); background: linear-gradient(90deg, rgba(60,40,0,.92), rgba(80,10,90,.92)); } #bracket-screen .live-score .ls-plus { color: #FFD700; text-shadow: 1px 1px 0 #05050a, 0 0 8px rgba(255,215,0,.6); } #bracket-screen .live-score .ls-combo { color: #FF2BD6; text-shadow: 1px 1px 0 #05050a, 0 0 8px rgba(255,43,214,.6); } #bracket-screen.cup-cyber .live-score .ls-plus { color: #00E5FF; } #bracket-screen.cup-quantum .live-score .ls-plus { color: #E04DFF; } /* Кібер фінал — не «жовтий»: неон ціан + золота нитка */ #bracket-screen.cup-cyber .bracket-block.final { border-color: rgba(0,229,255,.9); background: linear-gradient(180deg, rgba(0,30,60,.62), rgba(30,24,0,.62)); box-shadow: 0 0 36px rgba(0,229,255,.35), inset 0 0 0 2px rgba(255,215,0,.35); } /* Квантовий — кнопки й повідомлення у пурпурно-золотому */ #bracket-screen.cup-quantum #bracket-msg .end-title { background: linear-gradient(90deg, #FFD700, #FF2BD6, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; } #bracket-screen.cup-quantum #bracket-actions .end-key { border-color: #E04DFF; box-shadow: 0 0 14px rgba(224,77,255,.4); } #bracket-screen.cup-cyber #bracket-actions .end-key { border-color: #00E5FF; box-shadow: 0 0 14px rgba(0,229,255,.4); } /* Тандеми × кубок: блоки рахунку у пурпурній гамі Тандемів з відтінком кубка */ #workshop-screen.v13 .bracket-block .live-score.on { border-color: rgba(216,107,255,.8); background: rgba(70,20,110,.9); border-radius: 999px; } #workshop-screen.v13 .bracket-block.final .live-score.on { border-color: #FFB3F0; background: linear-gradient(90deg, rgba(110,30,140,.92), rgba(60,44,0,.92)); } #workshop-screen.v13 .live-score .ls-plus { color: #FFB3F0; } #workshop-screen.v13 .live-score .ls-combo { color: #FFD700; } #workshop-screen.v13 .bracket-block.final { border-color: #D86BFF; background: linear-gradient(180deg, rgba(120,40,170,.5), rgba(60,20,110,.55)); box-shadow: 0 0 36px rgba(216,107,255,.35); } /* G_46 13: усі три кубки позначаються однаково — Космічний теж має свій колір кнопок і заголовка */ #bracket-screen.cup-cosmic #bracket-msg .end-title { background: linear-gradient(90deg, #00F5D4, #FFD700, #00F5D4); -webkit-background-clip: text; background-clip: text; color: transparent; } #bracket-screen.cup-cyber #bracket-msg .end-title { background: linear-gradient(90deg, #00E5FF, #FFD700, #00E5FF); -webkit-background-clip: text; background-clip: text; color: transparent; } #bracket-screen.cup-cosmic #bracket-actions .end-key { border-color: #00F5D4; box-shadow: 0 0 14px rgba(0,245,212,.4); } #bracket-screen #bracket-msg .end-title.gold-msg { color: transparent; } /* Тандеми × кубок: Космічний / Кібер / Квантовий відтінок у пурпурній гамі (#workshop-screen.cup-*) */ #workshop-screen.v13.cup-cosmic .bracket-block.final { box-shadow: 0 0 36px rgba(216,107,255,.35), inset 0 0 0 2px rgba(0,245,212,.35); } #workshop-screen.v13.cup-cyber .bracket-block.final { box-shadow: 0 0 36px rgba(216,107,255,.35), inset 0 0 0 2px rgba(0,229,255,.4); } #workshop-screen.v13.cup-cyber .bracket-block .vs { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,120,240,.7) 6px 12px); } #workshop-screen.v13.cup-quantum .bracket-block.final { box-shadow: 0 0 36px rgba(216,107,255,.35), inset 0 0 0 2px rgba(255,215,0,.4); } /* G_53 B7: фони блоків кронштейна малюються у 3D-сцені за фігурками — DOM-блок лишає рамку, свічення, лінію й тексти */ #bracket-screen .bracket-block, #bracket-screen .bracket-block.final, #bracket-screen .bracket-block.final.mega, #bracket-screen .bracket-block.semi8 { background: transparent !important; } /* G_52 K: міні-кронштейн очікування — НА ВСЮ кнопку (без внутрішніх відступів і зменшення) */ #tandems-screen .btn.td-act .td-mini, #tandems-screen.v13 .btn.td-act .td-mini { width: 100%; height: 100%; transform: translate(-50%, -50%) scale(.96); } #tandems-screen .btn.td-act.waiting .td-mini, #tandems-screen.v13 .btn.td-act.waiting .td-mini { transform: translate(-50%, -50%) scale(1); } /* G_52 K: кнопки кубків Тандемів — стилістика за версією кубка: Космічний бірюза, Кібер індиго-ціан, Квантовий золото+пурпур */ #tandems-screen.v13 .btn.cup.td-cup.cosmic { --tdA: #00F5D4; --tdB: #00B292; } #tandems-screen.v13 .btn.cup.td-cup.cyber { --tdA: #00E5FF; --tdB: #4361EE; } #tandems-screen.v13 .btn.cup.td-cup.quantum { --tdA: #FFD700; --tdB: #E04DFF; } /* G_53: «+» для додавання симульованих гравців у Тандемах (лише творець) */ #workshop-screen .bracket-block .ws-plus { position: absolute; left: 50%; transform: translateX(-50%); width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid #05050a; background: linear-gradient(135deg, #FF2BD6, #7B3BFF); color: #fff; font-family: var(--font-display); font-size: clamp(10px, 2.2vh, 18px); line-height: 1; display: grid; place-items: center; box-shadow: 2px 2px 0 #05050a; cursor: pointer; z-index: 3; opacity: .92; transition: transform 160ms ease, opacity 160ms ease; pointer-events: auto; } #workshop-screen .bracket-block .ws-plus.west { top: 25%; } #workshop-screen .bracket-block .ws-plus.east { top: 75%; } #workshop-screen .bracket-block .ws-plus { margin-top: -.8em; } #workshop-screen .bracket-block .ws-plus:hover { transform: translateX(-50%) scale(1.12); } #workshop-screen .bracket-block .ws-plus.hidden { display: none; } #workshop-screen .bracket-block.palette-open { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #FF2BD6, 0 0 28px rgba(255,43,214,.45); } #workshop-screen .bracket-block.palette-open .vs { opacity: .25; } #workshop-screen .bracket-block.palette-host { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #B48CFF, 0 0 32px rgba(180,140,255,.5); } body.ws-palette .bracket-block:not(.palette-open){opacity:.18;transition:opacity .25s} body.ws-palette .bracket-block.palette-open{opacity:1;box-shadow:0 0 0 3px #FF4FD8,0 0 24px #FF4FD8} /* G_54 E: «+» у стилістиці Тандемів — кристалічна кнопка з подвійним контуром і пульсацією */ #workshop-screen .ws-plus { width: clamp(22px, 4.2vh, 34px); height: clamp(22px, 4.2vh, 34px); border-radius: 30%; border: 2px solid #FF7AE0; background: radial-gradient(circle at 35% 30%, #5A1C86 0%, #2A0A4A 70%); color: #FFD3F6; font-family: var(--font-display); font-size: clamp(14px, 3vh, 22px); line-height: 1; box-shadow: 0 0 0 2px #05050a, 0 0 14px rgba(255,122,224,.55), inset 0 0 8px rgba(255,255,255,.18); animation: ws-plus-pulse 1.6s ease-in-out infinite; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } #workshop-screen .ws-plus:hover { transform: translate(-50%,-50%) scale(1.12); } @keyframes ws-plus-pulse { 0%,100% { box-shadow: 0 0 0 2px #05050a, 0 0 10px rgba(255,122,224,.4), inset 0 0 8px rgba(255,255,255,.18); } 50% { box-shadow: 0 0 0 2px #05050a, 0 0 22px rgba(255,122,224,.85), inset 0 0 12px rgba(255,255,255,.3); } } body.ws-palette .bracket-block:not(.palette-open) { opacity: .55; } body.ws-palette #workshop-screen .ws-plus { opacity: .35; } /* G_56 C: тексти станів кронштейна — ПІД блоками, у єдиному градієнті кубка (не золото). Градієнт кубка = злиття градієнтів усіх версій кубка. */ #bracket-screen.cup-cosmic { --cupG: linear-gradient(90deg, #CFFFF6 0%, #00F5D4 35%, #2A7CFF 70%, #8FE3FF 100%); --cupGlow: rgba(0,245,212,.45); } #bracket-screen.cup-cyber { --cupG: linear-gradient(90deg, #B14CFF 0%, #4CC9F0 40%, #FF2BD6 75%, #7A2BFF 100%); --cupGlow: rgba(177,76,255,.5); } #bracket-screen.cup-quantum { --cupG: linear-gradient(90deg, #FFD700 0%, #FF2BD6 45%, #FFB454 75%, #D86BFF 100%); --cupGlow: rgba(255,43,214,.5); } #bracket-screen #bracket-msg { color: transparent; background: var(--cupG); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(2px 2px 0 #05050a) drop-shadow(0 0 10px var(--cupGlow)); bottom: calc(var(--sab) + 3.2vh); max-width: 80vw; } #bracket-screen #bracket-msg .end-title { color: transparent; background: var(--cupG); -webkit-background-clip: text; background-clip: text; text-shadow: none; } #bracket-screen #bracket-msg .end-sub { color: #fff; background: none; -webkit-text-fill-color: #fff; text-shadow: 1px 1px 0 #05050a; } #bracket-screen #bracket-field { transform: translateY(-9%) scale(.86); transform-origin: 50% 40%; } /* блоки трохи вище й менші — тексти знизу їх не перетинають */ #bracket-screen .bracket-block .stage-tag, #bracket-screen .bracket-block .badge-mine { color: transparent; background: var(--cupG); -webkit-background-clip: text; background-clip: text; } #bracket-screen.cup-cosmic .bracket-block { border-color: rgba(0,245,212,.45); } #bracket-screen.cup-cyber .bracket-block { border-color: rgba(177,76,255,.5); } #bracket-screen.cup-quantum .bracket-block { border-color: rgba(255,43,214,.45); } #bracket-screen .bracket-block.final { border-color: #fff; background: transparent; box-shadow: 0 0 0 2px #05050a, 0 0 28px var(--cupGlow); } /* G_57 F: кнопки кінця кронштейна — у градієнті кубка: заливка градієнтом кубка, чорнильна обводка, без «обводки-рамки зі світінням» */ #bracket-screen .end-row.v83 .btn.end-key { background: var(--cupG); color: #05050a; text-shadow: none; border: 2px solid #05050a; box-shadow: 3px 3px 0 #05050a, 0 0 0 1px rgba(255,255,255,.25) inset; border-radius: 8px; } #bracket-screen .end-row.v83 .btn.end-key.again { background: var(--cupG); color: #05050a; } #bracket-screen .end-row.v83 .btn.end-key.home { background: #0b0f1e; color: #fff; border: 2px solid #05050a; box-shadow: 3px 3px 0 #05050a, 0 0 0 2px transparent; position: relative; } #bracket-screen .end-row.v83 .btn.end-key.home::after { content: ''; position: absolute; inset: -4px; border-radius: 10px; padding: 2px; background: var(--cupG); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } #bracket-screen .end-row.v83 .btn.end-key.champion { filter: drop-shadow(0 0 10px var(--cupGlow)); } #bracket-screen .end-row.v83 .btn.end-key:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #05050a; } #bracket-screen #draft-timer, #bracket-screen .mvp-banner { color: transparent; background: var(--cupG); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(2px 2px 0 #05050a); } /* G_57 F: тексти кінця та кнопки — окремими рядами, без накладання; фінальний блок — рамка кубка (не золото) */ #bracket-screen #bracket-msg { bottom: calc(var(--sab) + 11.5vh); } #bracket-screen #bracket-msg .end-sub { font-size: clamp(8px, 1.6vh, 12px); margin-bottom: 0; } #bracket-screen #bracket-actions { bottom: calc(var(--sab) + 2.2vh); } #bracket-screen.cup-quantum .bracket-block.final { border-color: #FF2BD6; box-shadow: 0 0 0 2px #05050a, 0 0 28px var(--cupGlow); } #bracket-screen.cup-cyber .bracket-block.final { border-color: #B14CFF; } #bracket-screen.cup-cosmic .bracket-block.final { border-color: #00F5D4; }