:root { --bg: #050d1c; --bg-2: #08172f; --panel: rgba(10, 28, 56, 0.82); --panel-strong: #0c2345; --line: rgba(129, 214, 255, 0.2); --text: #f6fbff; --muted: #9eb4ca; --cyan: #58e7ff; --blue: #1977ff; --yellow: #ffd83d; --orange: #ff8b3d; --green: #5ff5a7; --red: #ff5b72; --shadow: 0 28px 80px rgba(0, 0, 0, 0.38); --radius: 24px; } * { box-sizing: border-box; } html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 15% 15%, rgba(25, 119, 255, 0.22), transparent 30%), radial-gradient(circle at 85% 5%, rgba(88, 231, 255, 0.12), transparent 27%), linear-gradient(160deg, #040a15 0%, #07162c 48%, #030912 100%); overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.22; background-image: linear-gradient(rgba(88, 231, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 231, 255, 0.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 90%); } button, select, input { font: inherit; } button { color: inherit; } button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(88, 231, 255, 0.55); outline-offset: 3px; } button:disabled { cursor: not-allowed; opacity: 0.45; } .is-hidden { display: none !important; } .noscript { padding: 20px; background: #7b2035; color: white; text-align: center; } .intro { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; background: #02060d; overflow: hidden; } .intro.hidden { animation: introExit .7s ease forwards; pointer-events: none; } .intro-grid { position: absolute; inset: -30%; background-image: linear-gradient(rgba(40, 180, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 180, 255, .09) 1px, transparent 1px); background-size: 52px 52px; transform: perspective(700px) rotateX(62deg) translateY(16%); animation: gridMove 4s linear infinite; } .intro-content { position: relative; width: min(920px, 90vw); text-align: center; min-height: 380px; display: grid; place-items: center; } .intro-line, .intro-logo { position: absolute; opacity: 0; transform: translateY(14px); } .intro-line { margin: 0; font-weight: 900; letter-spacing: .22em; font-size: clamp(1rem, 2.3vw, 1.65rem); color: #a8bbcd; text-shadow: 0 0 18px rgba(88, 231, 255, .24); } .intro-line.accent { color: var(--cyan); } .intro-line.show, .intro-logo.show { animation: signalIn .65s ease forwards; } .intro-line.out { animation: signalOut .45s ease forwards; } .intro-logo { display: grid; line-height: .8; filter: drop-shadow(0 0 35px rgba(25, 119, 255, .4)); } .intro-logo span { font-size: clamp(1.8rem, 6vw, 4.5rem); font-weight: 950; font-style: italic; letter-spacing: -.04em; } .intro-logo strong { font-size: clamp(4rem, 14vw, 10rem); font-weight: 1000; font-style: italic; letter-spacing: -.08em; color: var(--yellow); -webkit-text-stroke: 2px #fff; text-shadow: 9px 9px 0 #1a65ff; } .intro-logo small { margin-top: 30px; font-weight: 900; letter-spacing: .35em; color: var(--cyan); line-height: 1.2; } .intro-skip { position: absolute; bottom: 0; right: 0; } .app { min-height: 100vh; } .topbar { position: sticky; z-index: 100; top: 0; height: 78px; padding: 0 clamp(18px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(4, 13, 29, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(22px); } .brand { border: 0; background: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 0; } .brand-mark { width: 40px; height: 40px; border: 6px solid var(--yellow); border-radius: 50%; box-shadow: inset 0 0 0 3px #7a5b00, 0 0 24px rgba(255, 216, 61, .25); transform: rotate(-12deg); } .brand-mark i { position: absolute; width: 16px; height: 6px; background: var(--bg); transform: translate(21px, 10px) rotate(-25deg); } .brand-text { display: grid; text-align: left; line-height: 1; } .brand-text b { font-size: .95rem; letter-spacing: -.03em; } .brand-text small { margin-top: 5px; font-size: .55rem; color: var(--cyan); letter-spacing: .17em; } .topnav { display: flex; height: 100%; align-items: center; gap: 5px; } .nav-button { position: relative; height: 100%; padding: 0 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 750; } .nav-button:hover, .nav-button.active { color: white; } .nav-button.active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 10px 10px 0 0; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); } .profile-strip { display: flex; align-items: center; gap: 12px; } .signal-chip { display: flex; align-items: center; gap: 7px; color: var(--green); font-weight: 850; font-size: .7rem; letter-spacing: .12em; } .signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); } .ring-counter { min-width: 76px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255, 216, 61, .3); border-radius: 999px; background: rgba(255, 216, 61, .08); } .mini-ring { width: 17px; height: 17px; display: inline-block; border: 4px solid var(--yellow); border-radius: 50%; box-shadow: inset 0 0 0 1px #8c6500; } .icon-button { width: 39px; height: 39px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.045); cursor: pointer; font-weight: 900; } .icon-button:hover { background: rgba(88, 231, 255, .12); border-color: rgba(88, 231, 255, .5); } .icon-button.large { width: 48px; height: 48px; font-size: 1.7rem; } main { width: min(1440px, calc(100% - 36px)); margin: 0 auto; } .view { display: none; padding: 50px 0 72px; animation: viewIn .35s ease; } .view.active { display: block; } .hero { min-height: 520px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero-copy { max-width: 750px; position: relative; z-index: 2; } .eyebrow { margin: 0 0 10px; color: var(--cyan); font-weight: 900; font-size: .72rem; letter-spacing: .18em; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 22px; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: .92; letter-spacing: -.065em; font-weight: 950; } h2 { margin-bottom: 10px; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.035em; } h3 { margin-bottom: 8px; } .hero-copy > p:not(.eyebrow) { max-width: 690px; color: #bed0e1; font-size: clamp(1rem, 1.5vw, 1.23rem); line-height: 1.7; } .hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 13px; } .primary-button, .secondary-button, .ghost-button, .back-button { border-radius: 14px; padding: 14px 20px; cursor: pointer; font-weight: 900; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .primary-button { border: 0; color: #02101d; background: linear-gradient(135deg, var(--cyan), #8effff); box-shadow: 0 12px 30px rgba(88, 231, 255, .17); } .primary-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(88, 231, 255, .28); } .primary-button span { margin-left: 12px; } .primary-button.full { width: 100%; margin-top: 16px; } .secondary-button { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); } .secondary-button:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(88, 231, 255, .08); } .ghost-button { border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--muted); } .back-button { border: 1px solid var(--line); background: rgba(255,255,255,.04); } .text-button { border: 0; color: var(--cyan); background: transparent; cursor: pointer; font-weight: 850; } .version-badge { display: inline-block; margin-top: 30px; padding: 8px 12px; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .65rem; font-weight: 900; letter-spacing: .15em; } .hero-visual { position: relative; min-height: 480px; display: grid; place-items: center; } .core-ring { width: min(320px, 65vw); aspect-ratio: 1; border: 30px solid var(--yellow); border-radius: 50%; display: grid; place-items: center; transform: rotate(-13deg); box-shadow: inset 0 0 0 9px #9e7500, 0 0 0 2px #fff7b0, 0 0 70px rgba(255, 216, 61, .22); } .core-signal { width: 56%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4fbcff, #0758c8 70%); font-size: 5rem; font-style: italic; font-weight: 1000; box-shadow: inset -12px -16px 26px rgba(0,0,0,.32), 0 0 45px rgba(25, 119, 255, .6); } .speed-orbit { position: absolute; border: 2px solid rgba(88, 231, 255, .18); border-radius: 50%; animation: spin 8s linear infinite; } .orbit-a { width: 430px; height: 240px; transform: rotate(-18deg); } .orbit-b { width: 520px; height: 300px; transform: rotate(35deg); animation-direction: reverse; animation-duration: 11s; } .floating-ring { position: absolute; width: 38px; height: 38px; border: 8px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 20px rgba(255,216,61,.3); animation: float 3s ease-in-out infinite; } .ring-one { top: 18%; right: 13%; } .ring-two { bottom: 18%; left: 7%; animation-delay: -.7s; transform: scale(.7); } .ring-three { bottom: 9%; right: 25%; animation-delay: -1.4s; transform: scale(.45); } .dashboard-grid { display: grid; grid-template-columns: 1.55fr .65fr; gap: 18px; margin-top: 28px; } .panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(16, 43, 82, .82), rgba(6, 20, 43, .9)); box-shadow: var(--shadow); } .progress-panel, .stats-panel, .setup-options, .now-playing, .achievement-summary { padding: 26px; } .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .status-tag { padding: 7px 10px; border-radius: 999px; background: rgba(95,245,167,.08); border: 1px solid rgba(95,245,167,.25); color: var(--green); font-size: .65rem; font-weight: 900; letter-spacing: .12em; } .signal-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 13px; margin: 28px 0 21px; } .signal-node { display: grid; place-items: center; gap: 8px; min-width: 76px; color: #70879d; } .signal-node span { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #35526c; border-radius: 50%; font-weight: 950; } .signal-node small { font-size: .65rem; font-weight: 800; text-align: center; } .signal-node.restored { color: var(--cyan); } .signal-node.restored span { border-color: var(--cyan); background: rgba(88,231,255,.1); box-shadow: 0 0 20px rgba(88,231,255,.18); } .signal-path { height: 4px; background: rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; } .signal-path i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .muted { color: var(--muted); line-height: 1.6; } .rank-emblem { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; border: 2px solid rgba(255,216,61,.45); color: var(--yellow); font-size: 1.6rem; font-style: italic; font-weight: 1000; background: rgba(255,216,61,.07); } .stat-list { display: grid; gap: 13px; margin-top: 18px; } .stat-list div { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--muted); } .stat-list b { color: white; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 50px 0 19px; } .section-heading.small { margin: 0 0 18px; } .section-heading h2 { margin: 0; } .page-heading { min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 35px; } .page-heading h1 { margin-bottom: 12px; font-size: clamp(2.7rem, 6vw, 5.2rem); } .page-heading p:not(.eyebrow) { max-width: 720px; color: var(--muted); font-size: 1.07rem; line-height: 1.6; } .page-icon { flex: 0 0 auto; width: 120px; height: 120px; display: grid; place-items: center; border: 8px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-size: 4rem; font-style: italic; font-weight: 1000; transform: rotate(-10deg); box-shadow: 0 0 35px rgba(255,216,61,.14); } .page-icon.music { border-color: var(--cyan); color: var(--cyan); } .page-icon.trophy { border-color: var(--orange); color: var(--orange); } .game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .game-grid.compact { grid-template-columns: repeat(4, minmax(0,1fr)); } .game-card { position: relative; min-height: 330px; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: #0b2447; overflow: hidden; cursor: pointer; text-align: left; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .game-grid.compact .game-card { min-height: 270px; padding: 20px; } .game-card:hover { transform: translateY(-5px); border-color: rgba(88,231,255,.55); box-shadow: 0 22px 50px rgba(0,0,0,.32); } .game-card.locked { cursor: default; filter: saturate(.65); } .game-card.locked:hover { transform: none; border-color: var(--line); box-shadow: none; } .game-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 20%, rgba(1,8,18,.83)); } .game-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -120px; border: 30px solid var(--accent, var(--cyan)); border-radius: 50%; opacity: .18; } .game-card > * { position: relative; z-index: 2; } .game-card .game-number { display: inline-flex; padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: .65rem; font-weight: 900; letter-spacing: .13em; } .game-card h3 { margin-top: 132px; font-size: clamp(1.65rem, 3vw, 2.65rem); line-height: .9; letter-spacing: -.055em; } .game-grid.compact .game-card h3 { margin-top: 96px; font-size: 1.65rem; } .game-card p { color: #b7c8d8; line-height: 1.5; } .game-card .game-status { display: inline-flex; margin-top: 5px; color: var(--accent, var(--cyan)); font-weight: 900; font-size: .72rem; letter-spacing: .1em; } .game-card .game-icon { position: absolute; top: 69px; left: 28px; font-size: 3.6rem; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); } .game-grid.compact .game-card .game-icon { top: 59px; font-size: 2.6rem; } .game-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 25px; } .game-header > div:nth-child(2) { text-align: center; } .game-header h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.5rem); } .game-session-rings { justify-self: end; display: flex; gap: 9px; align-items: center; padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(255,216,61,.28); background: rgba(255,216,61,.07); } .penalty-screen { display: none; } .penalty-screen.active { display: block; animation: viewIn .35s ease; } .setup-layout { display: grid; grid-template-columns: 1fr 350px; gap: 24px; } .stadium-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .stadium-card { position: relative; min-height: 175px; padding: 0; overflow: hidden; border-radius: 20px; border: 2px solid transparent; background: #0c2444; cursor: pointer; text-align: left; } .stadium-card.selected { border-color: var(--yellow); box-shadow: 0 0 25px rgba(255,216,61,.2); } .stadium-card img { width: 100%; height: 100%; min-height: 175px; object-fit: cover; display: block; opacity: .88; } .stadium-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,8,18,.95), transparent 70%); } .stadium-card .stadium-info { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 15px; } .stadium-card b { display: block; font-size: 1.02rem; } .stadium-card small { color: #c0d0dd; } .setup-options { position: sticky; top: 104px; height: fit-content; } .field-label { display: block; margin: 25px 0 8px; color: var(--muted); font-size: .75rem; font-weight: 850; } .select-input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: #081a34; color: white; } .rule-card { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .rule-card:first-of-type { margin-top: 20px; } .rule-card span { color: var(--muted); text-align: right; } .match-scoreboard { display: grid; grid-template-columns: 1fr 1.25fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px 18px 0 0; background: rgba(5,17,36,.92); } .team-score, .round-display { min-height: 104px; display: grid; place-items: center; align-content: center; } .team-score { grid-template-columns: auto auto; column-gap: 14px; } .team-score span { font-size: .75rem; font-weight: 900; color: var(--cyan); } .team-score b { font-size: 3rem; line-height: 1; } .team-score small { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); letter-spacing: .25em; } .team-score.enemy span { color: var(--red); } .round-display { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .round-display span { color: var(--yellow); font-weight: 900; font-size: .72rem; letter-spacing: .14em; } .round-display b { margin-top: 4px; font-size: 1.35rem; } .round-display small { margin-top: 4px; color: var(--muted); } .stadium-stage { position: relative; height: min(520px, 58vh); min-height: 420px; overflow: hidden; background: linear-gradient(#112b5d 0 47%, #236634 47% 100%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); perspective: 900px; } .stadium-stage::before { content: ""; position: absolute; inset: 0; background: var(--stadium-image) center/cover no-repeat; opacity: .36; mix-blend-mode: screen; } .crowd { position: absolute; left: 0; right: 0; top: 22%; height: 28%; background: radial-gradient(circle, #e63b5e 0 2px, transparent 3px) 0 0 / 21px 19px, radial-gradient(circle, #f0dc46 0 2px, transparent 3px) 10px 8px / 25px 22px, linear-gradient(#162137, #080f1d); opacity: .7; } .floodlights { position: absolute; left: 7%; right: 7%; top: 5%; display: flex; justify-content: space-between; } .floodlights i { width: 90px; height: 16px; background: #effcff; box-shadow: 0 0 30px 12px rgba(220,249,255,.55); transform: rotate(-4deg); } .pitch-lines { position: absolute; left: -10%; right: -10%; bottom: -18%; height: 60%; border: 4px solid rgba(255,255,255,.55); border-radius: 50% 50% 0 0; transform: rotateX(58deg); } .goal-wrap { position: absolute; left: 50%; bottom: 46px; width: min(700px, 78vw); height: min(335px, 40vh); min-height: 265px; transform: translateX(-50%); border: 10px solid white; border-bottom: 0; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); } .goal-net { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.26) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.26) 2px, transparent 2px); background-size: 35px 35px; transform: perspective(450px) rotateX(-4deg); } .target-grid { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .target-zone { border: 1px dashed rgba(88,231,255,.22); background: transparent; cursor: crosshair; } .target-zone:hover, .target-zone.selected { background: rgba(88,231,255,.18); box-shadow: inset 0 0 35px rgba(88,231,255,.2); } .target-zone.keeper-choice { cursor: pointer; } .keeper { position: absolute; z-index: 3; left: 50%; bottom: 3%; width: 76px; height: 155px; transform: translateX(-50%); transition: left .36s cubic-bezier(.2,.8,.25,1), bottom .36s cubic-bezier(.2,.8,.25,1), transform .36s ease; } .keeper-head { position: absolute; left: 26px; top: 0; width: 27px; height: 27px; border-radius: 50%; background: #f0b98d; } .keeper-body { position: absolute; left: 18px; top: 27px; width: 44px; height: 70px; border-radius: 13px 13px 7px 7px; background: linear-gradient(90deg, #ffca39, #f07c1e); } .keeper i { position: absolute; display: block; width: 16px; height: 67px; border-radius: 10px; background: #ffad28; transform-origin: top center; } .keeper .arm { top: 34px; } .keeper .arm.left { left: 15px; transform: rotate(42deg); } .keeper .arm.right { right: 12px; transform: rotate(-42deg); } .keeper .leg { top: 87px; background: #233d76; } .keeper .leg.left { left: 23px; transform: rotate(12deg); } .keeper .leg.right { right: 18px; transform: rotate(-12deg); } .keeper.dive-0 { left: 17%; bottom: 48%; transform: translateX(-50%) rotate(-72deg) scale(.95); } .keeper.dive-1 { left: 50%; bottom: 53%; transform: translateX(-50%) scale(.95); } .keeper.dive-2 { left: 83%; bottom: 48%; transform: translateX(-50%) rotate(72deg) scale(.95); } .keeper.dive-3 { left: 17%; bottom: 23%; transform: translateX(-50%) rotate(-62deg); } .keeper.dive-4 { left: 50%; bottom: 26%; transform: translateX(-50%); } .keeper.dive-5 { left: 83%; bottom: 23%; transform: translateX(-50%) rotate(62deg); } .keeper.dive-6 { left: 17%; bottom: 4%; transform: translateX(-50%) rotate(-45deg); } .keeper.dive-7 { left: 50%; bottom: 3%; transform: translateX(-50%); } .keeper.dive-8 { left: 83%; bottom: 4%; transform: translateX(-50%) rotate(45deg); } .ball { position: absolute; z-index: 6; left: 50%; bottom: -62px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fff 0 45%, #d8e2e8 46% 100%); border: 3px solid #1b2531; transform: translate(-50%, 0); transition: left .46s cubic-bezier(.18,.8,.25,1), bottom .46s cubic-bezier(.18,.8,.25,1), transform .46s ease, opacity .2s ease; box-shadow: 0 8px 15px rgba(0,0,0,.38); } .ball::after { content: "◆"; position: absolute; left: 8px; top: 5px; color: #1c2630; font-size: 16px; } .ball.to-0 { left: 16.5%; bottom: 78%; transform: translate(-50%, 0) scale(.62); } .ball.to-1 { left: 50%; bottom: 78%; transform: translate(-50%, 0) scale(.62); } .ball.to-2 { left: 83.5%; bottom: 78%; transform: translate(-50%, 0) scale(.62); } .ball.to-3 { left: 16.5%; bottom: 45%; transform: translate(-50%, 0) scale(.72); } .ball.to-4 { left: 50%; bottom: 45%; transform: translate(-50%, 0) scale(.72); } .ball.to-5 { left: 83.5%; bottom: 45%; transform: translate(-50%, 0) scale(.72); } .ball.to-6 { left: 16.5%; bottom: 12%; transform: translate(-50%, 0) scale(.82); } .ball.to-7 { left: 50%; bottom: 12%; transform: translate(-50%, 0) scale(.82); } .ball.to-8 { left: 83.5%; bottom: 12%; transform: translate(-50%, 0) scale(.82); } .match-callout { position: absolute; z-index: 9; left: 50%; top: 24px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; color: white; background: rgba(3,12,25,.8); border: 1px solid rgba(255,255,255,.18); font-weight: 900; box-shadow: 0 8px 25px rgba(0,0,0,.25); } .match-callout.goal { color: var(--yellow); border-color: rgba(255,216,61,.45); } .match-callout.save { color: var(--cyan); border-color: rgba(88,231,255,.45); } .match-callout.miss { color: var(--red); border-color: rgba(255,91,114,.45); } .control-dock { min-height: 135px; border: 1px solid var(--line); border-radius: 0 0 18px 18px; background: rgba(5,17,36,.94); } .control-mode { display: none; min-height: 135px; padding: 22px 25px; grid-template-columns: 1fr minmax(280px, 1.2fr) auto; align-items: center; gap: 28px; } .control-mode.active { display: grid; } .control-copy h3 { margin: 0; } .timing-wrap { display: grid; gap: 8px; } .timing-bar { position: relative; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #c94b67, #f0b844 34%, #52e89e 50%, #f0b844 66%, #c94b67); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); } .timing-bar .perfect-zone { position: absolute; width: 12%; left: 44%; top: 0; bottom: 0; border-left: 2px solid white; border-right: 2px solid white; background: rgba(255,255,255,.2); } .timing-bar i { position: absolute; top: -5px; bottom: -5px; width: 5px; left: 0; background: white; box-shadow: 0 0 11px white; } .timing-wrap small, .keeper-hint { color: var(--muted); } .keeper-hint { max-width: 620px; line-height: 1.55; } .result-card { max-width: 760px; margin: 40px auto 0; padding: 42px; text-align: center; } .giant-rank { width: 150px; height: 150px; display: grid; place-items: center; margin: 10px auto 25px; border-radius: 38px; color: var(--yellow); font-size: 7rem; line-height: 1; font-style: italic; font-weight: 1000; border: 5px solid currentColor; transform: rotate(-6deg); box-shadow: 0 0 50px rgba(255,216,61,.17); } .result-card > p:not(.eyebrow) { color: var(--muted); } .result-score { margin: 28px auto; display: flex; justify-content: center; align-items: center; gap: 25px; font-size: 1.25rem; } .result-score b { font-size: 2.4rem; margin: 0 8px; } .result-score i { color: var(--muted); } .reward-breakdown { max-width: 500px; margin: 0 auto; display: grid; gap: 0; text-align: left; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .reward-breakdown div { display: flex; justify-content: space-between; padding: 13px 17px; background: rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.07); } .reward-breakdown div:last-child { border: 0; } .reward-breakdown .total { color: var(--yellow); background: rgba(255,216,61,.07); font-size: 1.12rem; } .result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; } .jukebox-layout { display: grid; grid-template-columns: 390px 1fr; gap: 22px; } .now-playing { text-align: center; height: fit-content; position: sticky; top: 104px; } .album-disc { width: 220px; aspect-ratio: 1; display: grid; place-items: center; margin: 5px auto 30px; border-radius: 50%; background: repeating-radial-gradient(circle, #071326 0 4px, #132d50 5px 6px); border: 4px solid rgba(88,231,255,.3); box-shadow: 0 0 45px rgba(25,119,255,.2); animation: spin 14s linear infinite; animation-play-state: paused; } .album-disc.playing { animation-play-state: running; } .album-disc > div { width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--yellow); color: #10203a; transform: rotate(-8deg); } .album-disc span { font-size: .55rem; font-weight: 950; letter-spacing: .12em; } .album-disc b { font-size: .8rem; } .player-controls { margin: 28px 0 20px; display: flex; justify-content: center; align-items: center; gap: 16px; } .play-button { width: 66px; height: 66px; border: 0; border-radius: 50%; background: var(--cyan); color: #04101e; font-size: 1.5rem; cursor: pointer; box-shadow: 0 12px 30px rgba(88,231,255,.22); } .progress-row, .volume-row { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; color: var(--muted); font-size: .7rem; } .volume-row { margin-top: 18px; grid-template-columns: 42px 1fr 42px; font-size: .55rem; font-weight: 900; } input[type="range"] { accent-color: var(--cyan); width: 100%; } .track-list { display: grid; gap: 12px; } .track-item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 17px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(11,34,66,.65); cursor: pointer; text-align: left; } .track-item:hover, .track-item.active { border-color: rgba(88,231,255,.5); background: rgba(15,49,91,.85); } .track-index { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(88,231,255,.08); color: var(--cyan); font-weight: 950; } .track-copy { display: grid; gap: 4px; } .track-copy small { color: var(--muted); } .track-badge { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .6rem; font-weight: 900; } .track-item.legacy-top .track-badge { color: var(--yellow); border-color: rgba(255,216,61,.35); } .achievement-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; margin-bottom: 23px; } .achievement-summary > div:first-child { display: grid; gap: 4px; } .achievement-summary span { color: var(--muted); } .achievement-summary b { font-size: 1.5rem; } .achievement-progress { height: 12px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; } .achievement-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--yellow)); transition: width .5s ease; } .achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; } .achievement-card { min-height: 170px; padding: 21px; border-radius: 18px; border: 1px solid var(--line); background: rgba(10,29,56,.72); opacity: .48; } .achievement-card.unlocked { opacity: 1; border-color: rgba(255,216,61,.35); background: linear-gradient(145deg, rgba(73,57,10,.35), rgba(10,29,56,.8)); } .achievement-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.05); font-size: 1.4rem; } .achievement-card.unlocked .achievement-icon { color: var(--yellow); background: rgba(255,216,61,.1); } .achievement-card h3 { margin: 22px 0 7px; } .achievement-card p { color: var(--muted); font-size: .88rem; line-height: 1.5; } footer { max-width: 1440px; margin: 0 auto; padding: 24px 18px 38px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #667f96; font-size: .62rem; font-weight: 850; letter-spacing: .13em; } .toast-region { position: fixed; z-index: 1200; right: 24px; bottom: 24px; display: grid; gap: 10px; width: min(370px, calc(100vw - 48px)); } .toast { padding: 15px 17px; border-radius: 15px; border: 1px solid rgba(88,231,255,.36); background: rgba(5,19,39,.95); box-shadow: 0 18px 40px rgba(0,0,0,.4); animation: toastIn .3s ease, toastOut .3s ease 3.7s forwards; } .toast b { display: block; color: var(--cyan); margin-bottom: 4px; } .toast.achievement b { color: var(--yellow); } @keyframes signalIn { to { opacity: 1; transform: translateY(0); } } @keyframes signalOut { to { opacity: 0; transform: translateY(-13px); } } @keyframes introExit { to { opacity: 0; visibility: hidden; } } @keyframes gridMove { to { background-position: 0 52px, 52px 0; } } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes float { 50% { margin-top: -13px; } } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } } @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } } @media (max-width: 1050px) { .topnav { display: none; } .hero { grid-template-columns: 1fr; padding: 50px 0; } .hero-visual { min-height: 360px; } .dashboard-grid, .setup-layout, .jukebox-layout { grid-template-columns: 1fr; } .game-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); } .setup-options, .now-playing { position: static; } .control-mode { grid-template-columns: 1fr; text-align: center; } .control-mode .primary-button { width: 100%; } .achievement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 720px) { .topbar { height: 66px; padding: 0 13px; } .brand-text { display: none; } .signal-chip { display: none; } main { width: min(100% - 22px, 1440px); } .view { padding-top: 26px; } .hero { min-height: 0; } h1 { font-size: clamp(2.55rem, 14vw, 4rem); } .hero-visual { min-height: 300px; } .core-ring { width: 220px; border-width: 23px; } .core-signal { font-size: 3.5rem; } .orbit-a { width: 290px; height: 175px; } .orbit-b { width: 330px; height: 210px; } .dashboard-grid, .game-grid, .game-grid.compact, .stadium-grid, .achievement-grid { grid-template-columns: 1fr; } .signal-progress { grid-template-columns: 1fr; justify-items: center; } .signal-path { width: 4px; height: 30px; } .signal-path i { width: 100% !important; height: 18%; } .page-heading { min-height: 190px; } .page-icon { display: none; } .game-header { grid-template-columns: 1fr auto; } .game-header > div:nth-child(2) { grid-row: 2; grid-column: 1 / -1; } .match-scoreboard { grid-template-columns: 1fr 1fr; } .round-display { grid-column: 1 / -1; grid-row: 1; min-height: 74px; border-left: 0; border-right: 0; border-bottom: 1px solid var(--line); } .team-score { grid-row: 2; } .stadium-stage { min-height: 370px; } .goal-wrap { width: 92vw; height: 245px; bottom: 40px; border-width: 7px; } .floodlights i { width: 48px; height: 10px; } .result-card { padding: 28px 18px; } .result-actions { flex-direction: column; } .achievement-summary { grid-template-columns: 1fr; } footer { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ========================================================= CHATTER CHESS · BUILD 0.1B ========================================================= */ .chess-screen { display: none; } .chess-screen.active { display: block; animation: viewIn .35s ease; } .chess-setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .chess-intro-panel { position: relative; min-height: 520px; padding: clamp(28px, 5vw, 58px); overflow: hidden; } .chess-intro-panel::before { content: ""; position: absolute; width: 420px; height: 420px; right: -165px; top: -180px; border: 48px solid rgba(88,231,255,.12); border-radius: 50%; } .chess-intro-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, transparent 50%, rgba(88,231,255,.045)); } .chess-intro-panel > * { position: relative; z-index: 2; } .chess-signal-emblem { width: 118px; height: 118px; display: grid; place-items: center; margin-bottom: 34px; border: 4px solid rgba(88,231,255,.5); border-radius: 31px; color: var(--cyan); background: radial-gradient(circle at 35% 30%, rgba(88,231,255,.18), rgba(6,23,47,.9)); font-size: 5rem; box-shadow: 0 0 45px rgba(88,231,255,.15); transform: rotate(-4deg); } .chess-intro-panel h2 { max-width: 760px; font-size: clamp(2rem, 4vw, 4rem); line-height: .98; } .chess-intro-panel > p:not(.eyebrow) { max-width: 760px; color: var(--muted); line-height: 1.7; font-size: 1.03rem; } .chess-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 38px; } .chess-feature-grid div { min-height: 104px; padding: 17px; border: 1px solid rgba(88,231,255,.17); border-radius: 16px; background: rgba(4,18,38,.48); } .chess-feature-grid b { display: block; margin-bottom: 7px; color: var(--cyan); font-size: .75rem; letter-spacing: .13em; } .chess-feature-grid span { color: #bfd0df; font-size: .82rem; line-height: 1.45; } .chess-options { position: sticky; top: 104px; } .chess-options .field-label + .select-input { margin-bottom: 4px; } .chess-layout { display: grid; grid-template-columns: minmax(420px, 820px) minmax(300px, 1fr); gap: 22px; align-items: start; justify-content: center; } .chess-board-column { width: min(100%, 820px); margin: 0 auto; } .chess-player-strip { min-height: 72px; display: grid; grid-template-columns: auto minmax(130px, auto) 1fr; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 0 0 17px 17px; background: rgba(7,25,51,.92); } .chess-player-strip.enemy-strip { border-radius: 17px 17px 0 0; } .chess-avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: #071326; background: linear-gradient(145deg, #ff8799, #ff5b72); font-size: .85rem; font-weight: 1000; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); } .chess-avatar.player { color: #061426; background: linear-gradient(145deg, #a9f8ff, #58e7ff); } .chess-player-strip > div:nth-child(2) { display: grid; gap: 3px; } .chess-player-strip small { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .15em; } .chess-player-strip b { font-size: .93rem; } .captured-pieces { min-width: 0; justify-self: end; color: #dce8f2; font-size: clamp(.92rem, 2vw, 1.32rem); letter-spacing: .02em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chess-board { position: relative; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); border: 5px solid #152d4f; background: #152d4f; box-shadow: 0 30px 65px rgba(0,0,0,.4), 0 0 0 1px rgba(88,231,255,.24); user-select: none; } .chess-board.thinking::after { content: "KI BERECHNET…"; position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 11px 18px; border: 1px solid rgba(88,231,255,.5); border-radius: 999px; color: var(--cyan); background: rgba(3,13,28,.9); box-shadow: 0 15px 35px rgba(0,0,0,.35); font-size: .72rem; font-weight: 950; letter-spacing: .14em; pointer-events: none; } .chess-square { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; overflow: hidden; touch-action: manipulation; } .chess-square.light { background: #c4d9e2; } .chess-square.dark { background: #36718e; } .chess-square:hover { box-shadow: inset 0 0 0 4px rgba(255,255,255,.25); } .chess-square.last-move::before { content: ""; position: absolute; inset: 0; background: rgba(255,216,61,.32); } .chess-square.selected::before { content: ""; position: absolute; inset: 0; background: rgba(88,231,255,.42); box-shadow: inset 0 0 0 4px rgba(88,231,255,.75); } .chess-square.in-check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,91,114,.9), rgba(255,91,114,.18) 67%, transparent 70%); animation: checkPulse 1s ease-in-out infinite; } .chess-square.legal-capture::after { content: ""; position: absolute; inset: 7%; z-index: 4; border: clamp(3px, .5vw, 7px) solid rgba(255,216,61,.78); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255,216,61,.18); } .move-dot { position: absolute; z-index: 5; width: 25%; aspect-ratio: 1; border-radius: 50%; background: rgba(3,21,36,.42); box-shadow: 0 0 0 3px rgba(255,255,255,.13); } .chess-piece { position: relative; z-index: 6; display: block; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", serif; font-size: clamp(2.2rem, 6.2vw, 5.2rem); line-height: 1; transform: translateY(-1%); pointer-events: none; } .chess-piece.white-piece { color: #fffdf2; -webkit-text-stroke: 1px rgba(16,31,44,.8); text-shadow: 0 3px 1px #243847, 0 7px 12px rgba(0,0,0,.25); } .chess-piece.black-piece { color: #122131; -webkit-text-stroke: 1px rgba(235,247,255,.45); text-shadow: 0 3px 1px rgba(255,255,255,.22), 0 7px 12px rgba(0,0,0,.22); } .file-coordinate, .rank-coordinate { position: absolute; z-index: 8; color: rgba(4,22,37,.64); font-size: clamp(.48rem, 1vw, .72rem); font-weight: 1000; pointer-events: none; } .chess-square.dark .file-coordinate, .chess-square.dark .rank-coordinate { color: rgba(231,248,255,.72); } .file-coordinate { right: 5px; bottom: 3px; } .rank-coordinate { left: 5px; top: 3px; } .chess-sidebar { display: grid; gap: 16px; position: sticky; top: 98px; } .chess-status-panel, .chess-history-panel { padding: 22px; } .chess-status-panel { position: relative; overflow: hidden; min-height: 164px; } .chess-status-panel::after { content: "♞"; position: absolute; right: -12px; bottom: -28px; color: rgba(88,231,255,.07); font-size: 8rem; transform: rotate(-12deg); } .chess-status-panel > * { position: relative; z-index: 2; } .chess-status-panel h2 { margin-bottom: 8px; } .chess-status-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.5; } .thinking-bars { display: flex; gap: 5px; margin-top: 18px; } .thinking-bars i { width: 22px; height: 4px; border-radius: 99px; background: rgba(88,231,255,.2); } .chess-board.thinking ~ * .thinking-bars i, .chess-status-panel:has(+ .chess-history-panel) .thinking-bars i { animation: signalBars 1.2s ease-in-out infinite; } .thinking-bars i:nth-child(2) { animation-delay: -.9s; } .thinking-bars i:nth-child(3) { animation-delay: -.6s; } .thinking-bars i:nth-child(4) { animation-delay: -.3s; } .chess-notation { padding: 5px 7px; border-radius: 7px; color: var(--cyan); background: rgba(88,231,255,.08); border: 1px solid rgba(88,231,255,.18); font-size: .58rem; font-weight: 950; } .chess-history-panel h3 { margin: 0; } .chess-move-list { height: min(330px, 34vh); min-height: 180px; margin-top: 16px; overflow: auto; border-top: 1px solid rgba(255,255,255,.07); } .empty-moves { padding: 18px 0; color: var(--muted); font-size: .85rem; } .move-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 8px; padding: 10px 3px; border-bottom: 1px solid rgba(255,255,255,.055); font-size: .82rem; } .move-row span { color: #6f8ca6; } .move-row b { min-width: 0; color: #dcebf6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chess-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .danger-button { border-color: rgba(255,91,114,.3); color: #ff9cab; } .danger-button:hover { border-color: var(--red); background: rgba(255,91,114,.09); } .promotion-overlay { position: fixed; z-index: 1300; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(2,8,17,.82); backdrop-filter: blur(10px); } .promotion-overlay.active { display: grid; animation: viewIn .2s ease; } .promotion-dialog { width: min(560px, 96vw); padding: 30px; text-align: center; } .promotion-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 25px; } .promotion-choices button { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 17px; color: white; background: rgba(255,255,255,.045); cursor: pointer; font-size: 3.8rem; } .promotion-choices button:hover { border-color: var(--cyan); background: rgba(88,231,255,.1); transform: translateY(-3px); } .promotion-choices span { color: var(--muted); font-size: .68rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } .chess-result-stats { max-width: 560px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px auto; } .chess-result-stats div { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); } .chess-result-stats span { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .08em; } .chess-result-stats b { color: var(--cyan); font-size: 1.08rem; } @keyframes checkPulse { 50% { opacity: .5; } } @keyframes signalBars { 0%, 100% { background: rgba(88,231,255,.18); transform: scaleX(.65); } 50% { background: var(--cyan); transform: scaleX(1); } } @media (max-width: 1120px) { .chess-layout { grid-template-columns: minmax(380px, 720px) 300px; } .chess-piece { font-size: clamp(2rem, 6vw, 4.5rem); } } @media (max-width: 930px) { .chess-setup-layout, .chess-layout { grid-template-columns: 1fr; } .chess-options, .chess-sidebar { position: static; } .chess-sidebar { grid-template-columns: 1fr 1fr; } .chess-actions { grid-column: 1 / -1; } .chess-board-column { width: min(100%, 760px); } .chess-piece { font-size: clamp(2.4rem, 10vw, 5rem); } } @media (max-width: 650px) { .chess-intro-panel { min-height: 0; padding: 26px 20px; } .chess-signal-emblem { width: 82px; height: 82px; font-size: 3.5rem; } .chess-feature-grid { grid-template-columns: 1fr; } .chess-sidebar { grid-template-columns: 1fr; } .chess-actions { grid-column: auto; } .chess-player-strip { grid-template-columns: auto 1fr; } .captured-pieces { grid-column: 1 / -1; justify-self: start; min-height: 22px; text-align: left; } .chess-board { border-width: 3px; } .chess-piece { font-size: clamp(1.8rem, 11vw, 3.8rem); } .chess-result-stats { grid-template-columns: 1fr; } .promotion-choices { grid-template-columns: repeat(2, 1fr); } .result-actions { flex-direction: column; } } /* ================================================================ RING RUSH · ARCADE MACHINE 03 · FAIR PLAY 0.9D ================================================================ */ .ring-screen { display: none; } .ring-screen.active { display: block; animation: viewIn .35s ease; } .ring-setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; } .ring-intro-panel { position: relative; min-height: 590px; padding: clamp(28px, 5vw, 58px); overflow: hidden; background: linear-gradient(145deg, rgba(10,36,64,.94), rgba(6,18,39,.92)); } .ring-intro-panel::before { content: ""; position: absolute; width: 510px; height: 510px; right: -190px; top: -250px; border: 54px solid rgba(95,245,167,.1); border-radius: 50%; box-shadow: 0 0 0 42px rgba(88,231,255,.035); } .ring-intro-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, transparent 38%, rgba(95,245,167,.06)); } .ring-intro-panel > * { position: relative; z-index: 2; } .ring-setup-copy { max-width: 800px; } .ring-setup-copy h2 { max-width: 760px; margin-top: 10px; font-size: clamp(2.15rem, 4.3vw, 4.45rem); line-height: .96; } .ring-setup-copy > p:not(.eyebrow) { max-width: 760px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; } .ring-signal-emblem { width: 108px; height: 108px; display: grid; place-items: center; margin-bottom: 30px; border: 4px solid rgba(255,216,61,.75); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(122,91,0,.9), 0 0 38px rgba(255,216,61,.18); transform: rotate(-13deg); } .ring-signal-emblem span { width: 45px; height: 45px; border: 10px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 18px rgba(255,216,61,.5); } .ring-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 35px; } .ring-control-grid div { min-height: 88px; padding: 15px; border: 1px solid rgba(95,245,167,.18); border-radius: 15px; background: rgba(4,18,38,.5); } .ring-control-grid b { display: block; margin-bottom: 7px; color: var(--green); font-size: .7rem; letter-spacing: .08em; } .ring-control-grid span { color: #bfd3df; font-size: .78rem; line-height: 1.4; } .ring-preview-road { position: relative; height: 120px; margin-top: 28px; overflow: hidden; border: 1px solid rgba(88,231,255,.12); border-radius: 18px; background: linear-gradient(#0e4d66, #07142b 58%); perspective: 360px; } .ring-preview-road::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -48px; height: 126px; background: #071126; clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%); } .ring-preview-road > i { position: absolute; z-index: 2; width: 2px; height: 115px; bottom: -10px; background: linear-gradient(transparent, rgba(88,231,255,.8)); transform-origin: bottom; } .ring-preview-road > i:nth-child(1) { left: 39%; transform: rotate(10deg); } .ring-preview-road > i:nth-child(2) { left: 50%; } .ring-preview-road > i:nth-child(3) { right: 39%; transform: rotate(-10deg); } .preview-runner { position: absolute; z-index: 5; left: 50%; bottom: 14px; width: 28px; height: 45px; border-radius: 13px 13px 7px 7px; background: #10203a; border: 3px solid var(--green); box-shadow: -52px 7px 30px rgba(88,231,255,.55), 0 0 16px rgba(95,245,167,.35); transform: translateX(-50%); } .preview-runner::before { content: ""; position: absolute; left: 50%; top: -18px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); transform: translateX(-50%); } .preview-ring { position: absolute; z-index: 4; width: 18px; height: 18px; border: 5px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 10px rgba(255,216,61,.5); } .preview-ring.r1 { left: 30%; bottom: 21px; } .preview-ring.r2 { left: 47%; bottom: 58px; transform: scale(.68); } .preview-ring.r3 { right: 27%; bottom: 35px; transform: scale(.82); } .ring-options { position: sticky; top: 104px; } .ring-route-list { display: grid; gap: 9px; margin: 19px 0 22px; } .ring-route-card { width: 100%; min-height: 70px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 15px; color: white; background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: .2s ease; } .ring-route-card:hover, .ring-route-card.selected { transform: translateX(-4px); border-color: rgba(95,245,167,.62); background: rgba(95,245,167,.08); box-shadow: 0 12px 30px rgba(0,0,0,.18); } .route-swatch { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); overflow: hidden; } .route-swatch.reconnect { background: linear-gradient(145deg, #061a38, #0f6472 55%, #77ffd1); } .route-swatch.sunset { background: linear-gradient(145deg, #20123b, #d65b66 55%, #ffd66b); } .route-swatch.static { background: linear-gradient(145deg, #080c28, #392c79 55%, #b889ff); } .ring-route-card > span:last-child { display: grid; gap: 4px; } .ring-route-card b { font-size: .85rem; } .ring-route-card small { color: var(--muted); font-size: .69rem; } .ring-live-header { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) auto; gap: 9px; margin-bottom: 12px; } .ring-live-stat { min-height: 68px; display: grid; align-content: center; gap: 4px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,24,49,.9); } .ring-live-stat small { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .14em; } .ring-live-stat b { font-size: 1.25rem; line-height: 1; } .ring-live-stat.score b { color: var(--cyan); } .ring-live-stat.combo b { display: flex; align-items: baseline; gap: 7px; } .ring-live-stat.combo i { color: var(--yellow); font-size: .76rem; font-style: normal; } .ring-pause-button { width: 68px; height: 68px; border-radius: 14px; font-size: 1rem; } .ring-canvas-shell { position: relative; width: 100%; overflow: hidden; border: 1px solid rgba(88,231,255,.28); border-radius: 22px; background: #050d1c; box-shadow: 0 30px 75px rgba(0,0,0,.42), 0 0 0 1px rgba(88,231,255,.07); } .ring-canvas-shell canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #061226; touch-action: none; } .ring-route-chip { position: absolute; left: 18px; top: 18px; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(3,12,27,.68); backdrop-filter: blur(9px); } .ring-route-chip span { font-size: .68rem; font-weight: 900; letter-spacing: .08em; } .ring-route-chip small { color: #a8c0d2; font-size: .58rem; } .ring-countdown { position: absolute; z-index: 18; left: 50%; top: 50%; display: none; transform: translate(-50%, -50%) scale(.65); color: #fff; font-size: clamp(5rem, 13vw, 10rem); font-style: italic; font-weight: 1000; line-height: 1; -webkit-text-stroke: 3px #0e55c8; text-shadow: 8px 8px 0 rgba(0,0,0,.55), 0 0 35px rgba(88,231,255,.6); pointer-events: none; } .ring-countdown.active { display: block; animation: ringCountdown .8s ease both; } .ring-countdown.rush { color: var(--yellow); -webkit-text-stroke-color: #fff; font-size: clamp(4rem, 10vw, 8rem); } .ring-callout { position: absolute; z-index: 15; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 44px); padding: 9px 16px; border: 1px solid rgba(88,231,255,.35); border-radius: 999px; color: #dff9ff; background: rgba(3,13,29,.75); box-shadow: 0 12px 30px rgba(0,0,0,.25); backdrop-filter: blur(8px); font-size: clamp(.56rem, 1.4vw, .72rem); font-weight: 950; letter-spacing: .09em; white-space: nowrap; } .ring-callout.good { color: var(--green); border-color: rgba(95,245,167,.45); } .ring-callout.boost { color: var(--yellow); border-color: rgba(255,216,61,.5); box-shadow: 0 0 24px rgba(255,216,61,.16); } .ring-callout.danger { color: #ff93a4; border-color: rgba(255,91,114,.5); } .ring-pause-overlay { position: absolute; z-index: 30; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(2,8,18,.74); backdrop-filter: blur(9px); } .ring-pause-overlay.active { display: grid; } .ring-pause-overlay .panel { width: min(420px, 94%); display: grid; gap: 12px; padding: 30px; text-align: center; } .ring-pause-overlay h2 { margin: 0; font-size: 2.2rem; } .ring-pause-overlay p:not(.eyebrow) { margin-top: 0; color: var(--muted); } .ring-control-dock { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 20px; margin-top: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7,24,49,.84); } .ring-boost-meter > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 7px; font-size: .65rem; font-weight: 950; letter-spacing: .1em; } .ring-boost-meter b { color: var(--yellow); } .ring-boost-track { height: 12px; overflow: hidden; border: 1px solid rgba(255,216,61,.22); border-radius: 999px; background: rgba(255,255,255,.05); } .ring-boost-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green), var(--yellow)); box-shadow: 0 0 14px rgba(95,245,167,.42); transition: width .12s linear; } .ring-boost-track i.ready { animation: boostReady .72s ease-in-out infinite alternate; } .ring-touch-controls { display: flex; align-items: center; gap: 7px; } .ring-touch-controls button { min-width: 56px; height: 52px; border: 1px solid rgba(88,231,255,.25); border-radius: 14px; color: white; background: rgba(88,231,255,.07); cursor: pointer; font-size: 1.25rem; font-weight: 1000; user-select: none; touch-action: manipulation; } .ring-touch-controls button:hover, .ring-touch-controls button.pressed { border-color: var(--cyan); background: rgba(88,231,255,.2); transform: translateY(-2px); } .ring-touch-controls .jump { color: var(--green); } .ring-touch-controls .boost { min-width: 90px; color: #09131e; border-color: rgba(255,216,61,.55); background: var(--yellow); font-size: .69rem; letter-spacing: .08em; } .ring-key-hint { grid-column: 1 / -1; margin: -4px 0 0; color: #6f8da8; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-align: center; } .ring-result-card { overflow: hidden; } .ring-result-card::before { content: "◎"; position: absolute; right: -40px; top: -90px; color: rgba(255,216,61,.055); font-size: 19rem; font-weight: 1000; } .ring-result-card > * { position: relative; z-index: 2; } .ring-result-stats { max-width: 820px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 26px auto; } .ring-result-stats div { min-height: 88px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); } .ring-result-stats span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .06em; } .ring-result-stats b { color: var(--green); font-size: 1.02rem; } @keyframes ringCountdown { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(-8deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } } @keyframes boostReady { from { filter: brightness(1); box-shadow: 0 0 10px rgba(255,216,61,.25); } to { filter: brightness(1.55); box-shadow: 0 0 25px rgba(255,216,61,.75); } } @media (max-width: 980px) { .ring-setup-layout { grid-template-columns: 1fr; } .ring-options { position: static; } .ring-control-grid { grid-template-columns: repeat(2, 1fr); } .ring-result-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .ring-live-header { grid-template-columns: repeat(2, 1fr) auto; } .ring-live-stat { min-height: 58px; } .ring-live-stat.score, .ring-live-stat.combo { display: none; } .ring-pause-button { width: 58px; height: 58px; } .ring-control-dock { grid-template-columns: 1fr; } .ring-touch-controls { justify-content: center; order: -1; } .ring-callout { bottom: 12px; } .ring-route-chip { left: 10px; top: 10px; } } @media (max-width: 560px) { .ring-intro-panel { min-height: 0; padding: 25px 19px; } .ring-signal-emblem { width: 78px; height: 78px; } .ring-signal-emblem span { width: 34px; height: 34px; border-width: 8px; } .ring-control-grid { grid-template-columns: 1fr; } .ring-preview-road { display: none; } .ring-touch-controls { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; } .ring-touch-controls button, .ring-touch-controls .boost { min-width: 0; width: 100%; } .ring-key-hint { display: none; } .ring-result-stats { grid-template-columns: 1fr 1fr; } .ring-countdown { -webkit-text-stroke-width: 2px; } .ring-callout { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; } } /* ================================================================ DATA RUSH · BUILD 0.1D ================================================================ */ .quiz-screen { display: none; } .quiz-screen.active { display: block; animation: viewIn .35s ease; } .quiz-setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; align-items: start; } .quiz-intro-panel { position: relative; min-height: 650px; padding: clamp(28px, 5vw, 58px); overflow: hidden; background: radial-gradient(circle at 82% 10%, rgba(255,139,61,.15), transparent 31%), linear-gradient(145deg, rgba(10,36,64,.95), rgba(6,18,39,.93)); } .quiz-intro-panel::after { content: "0101 ? 1010 ? 0110"; position: absolute; right: -34px; bottom: 18px; color: rgba(88,231,255,.04); font-size: clamp(3rem, 8vw, 7rem); font-weight: 1000; letter-spacing: .12em; transform: rotate(-6deg); white-space: nowrap; } .quiz-intro-panel > * { position: relative; z-index: 2; } .quiz-intro-panel h2 { max-width: 780px; margin-top: 12px; font-size: clamp(2.15rem, 4.4vw, 4.6rem); line-height: .96; } .quiz-intro-panel > p:not(.eyebrow):not(.quiz-bank-count) { max-width: 770px; color: var(--muted); font-size: 1rem; line-height: 1.7; } .quiz-orbit { position: relative; width: 110px; height: 110px; display: grid; place-items: center; margin-bottom: 30px; border: 2px solid rgba(88,231,255,.35); border-radius: 50%; box-shadow: 0 0 38px rgba(88,231,255,.12); } .quiz-orbit span { width: 65px; height: 65px; display: grid; place-items: center; border-radius: 20px; color: #08152c; background: linear-gradient(145deg, var(--yellow), #ff9d3d); font-size: 2.4rem; font-weight: 1000; transform: rotate(-7deg); box-shadow: 0 0 24px rgba(255,216,61,.28); } .quiz-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px currentColor; } .quiz-orbit i:nth-child(2) { left: -5px; top: 41px; } .quiz-orbit i:nth-child(3) { right: 7px; top: 8px; background: var(--green); } .quiz-orbit i:nth-child(4) { right: 2px; bottom: 6px; background: var(--orange); } .quiz-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 34px; } .quiz-category-card { min-height: 118px; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; color: white; background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: .2s ease; } .quiz-category-card:hover, .quiz-category-card.selected { transform: translateY(-3px); border-color: color-mix(in srgb, var(--quiz-accent) 65%, transparent); background: color-mix(in srgb, var(--quiz-accent) 11%, transparent); box-shadow: 0 16px 35px rgba(0,0,0,.22), inset 4px 0 0 var(--quiz-accent); } .quiz-category-card > span { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.06); font-size: 1.65rem; } .quiz-category-card b { align-self: end; font-size: .92rem; } .quiz-category-card small { align-self: start; color: var(--muted); font-size: .66rem; line-height: 1.4; } .quiz-bank-count { display: inline-flex; margin: 18px 0 0; padding: 8px 12px; border: 1px solid rgba(88,231,255,.18); border-radius: 999px; color: #b9d6e5; background: rgba(88,231,255,.05); font-size: .65rem; font-weight: 850; letter-spacing: .06em; } .quiz-options { position: sticky; top: 104px; } .quiz-mode-label { margin-top: 20px; } .quiz-mode-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 8px 0 18px; } .quiz-mode-card { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 13px; color: white; background: rgba(255,255,255,.025); cursor: pointer; transition: .18s ease; } .quiz-mode-card:hover, .quiz-mode-card.selected { border-color: rgba(255,139,61,.65); background: rgba(255,139,61,.11); transform: translateY(-2px); } .quiz-mode-card span { color: var(--orange); font-size: 1.05rem; font-weight: 1000; } .quiz-mode-card b { font-size: .63rem; } .quiz-mode-card small { color: var(--muted); font-size: .53rem; } .quiz-live-header { display: grid; grid-template-columns: 1.2fr repeat(4, minmax(110px,1fr)); gap: 9px; margin-bottom: 14px; } .quiz-live-stat { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,24,49,.9); } .quiz-live-stat small { color: var(--muted); font-size: .57rem; font-weight: 900; letter-spacing: .14em; } .quiz-live-stat b { color: white; font-size: 1.16rem; } .quiz-live-stat.timer { grid-template-columns: auto 1fr; } .quiz-live-stat.timer small, .quiz-live-stat.timer b { grid-column: 1; } .quiz-timer-track { grid-column: 2; grid-row: 1 / 3; align-self: center; height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); } .quiz-timer-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .1s linear; } .quiz-timer-track i.danger { background: linear-gradient(90deg, #ff465f, var(--orange)); animation: quizPulse .45s ease-in-out infinite alternate; } .quiz-live-stat:nth-child(2) b { color: var(--cyan); } .quiz-live-stat:nth-child(3) b { color: var(--yellow); } .quiz-live-stat.hearts b { color: #ff7f9d; font-size: .82rem; } .quiz-stage { position: relative; min-height: 530px; display: grid; align-content: start; padding: clamp(23px, 4vw, 48px); overflow: hidden; background: radial-gradient(circle at 50% -20%, rgba(88,231,255,.1), transparent 44%), rgba(7,24,49,.88); } .quiz-stage::before { content: "?"; position: absolute; right: -10px; top: -85px; color: rgba(255,139,61,.045); font-size: 20rem; font-weight: 1000; transform: rotate(8deg); } .quiz-stage > * { position: relative; z-index: 2; } .quiz-question-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 28px; } .quiz-question-meta span { padding: 7px 11px; border: 1px solid rgba(88,231,255,.22); border-radius: 999px; color: #d7f8ff; background: rgba(88,231,255,.06); font-size: .62rem; font-weight: 900; letter-spacing: .07em; } #quiz-difficulty-chip[data-level="easy"] { color: var(--green); border-color: rgba(95,245,167,.28); } #quiz-difficulty-chip[data-level="normal"] { color: var(--yellow); border-color: rgba(255,216,61,.28); } #quiz-difficulty-chip[data-level="hard"] { color: #ff8e9f; border-color: rgba(255,91,114,.3); } .quiz-stage h2 { max-width: 1000px; margin: 0 auto 35px; font-size: clamp(1.65rem, 3.2vw, 3rem); line-height: 1.16; text-align: center; } .quiz-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; } .quiz-answer { min-height: 92px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid rgba(88,231,255,.18); border-radius: 17px; color: white; background: rgba(4,18,38,.72); cursor: pointer; text-align: left; transition: .18s ease; } .quiz-answer:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(88,231,255,.65); background: rgba(88,231,255,.1); box-shadow: 0 13px 28px rgba(0,0,0,.2); } .quiz-answer > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: var(--cyan); background: rgba(255,255,255,.04); font-weight: 1000; } .quiz-answer b { font-size: .85rem; line-height: 1.45; } .quiz-answer.correct { border-color: rgba(95,245,167,.75); background: rgba(95,245,167,.15); box-shadow: inset 5px 0 0 var(--green); } .quiz-answer.wrong { border-color: rgba(255,91,114,.75); background: rgba(255,91,114,.13); box-shadow: inset 5px 0 0 #ff5b72; } .quiz-answer.removed { opacity: .16; filter: grayscale(1); } .quiz-answer:disabled { cursor: default; } .quiz-feedback { display: none; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(3,14,30,.8); } .quiz-feedback.visible { display: grid; animation: viewIn .22s ease; } .quiz-feedback.correct { border-color: rgba(95,245,167,.38); background: rgba(95,245,167,.07); } .quiz-feedback.wrong { border-color: rgba(255,91,114,.35); background: rgba(255,91,114,.06); } .quiz-feedback.neutral { border-color: rgba(88,231,255,.3); } .quiz-feedback b { display: block; margin-bottom: 5px; color: var(--green); font-size: .72rem; letter-spacing: .09em; } .quiz-feedback.wrong b { color: #ff8e9f; } .quiz-feedback p { margin: 0; color: #bdd1dd; font-size: .79rem; line-height: 1.55; } .quiz-control-dock { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(7,24,49,.86); } .quiz-lifelines { display: flex; gap: 7px; } .quiz-lifelines button { min-width: 76px; min-height: 51px; display: grid; place-items: center; gap: 2px; border: 1px solid rgba(255,216,61,.22); border-radius: 13px; color: var(--yellow); background: rgba(255,216,61,.055); cursor: pointer; } .quiz-lifelines button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--yellow); background: rgba(255,216,61,.13); } .quiz-lifelines button.used, .quiz-lifelines button:disabled { opacity: .28; cursor: default; filter: grayscale(1); } .quiz-lifelines span { font-size: .64rem; font-weight: 950; } .quiz-lifelines small { color: #849cad; font-size: .52rem; } .quiz-control-dock > p { margin: 0; color: #6f8da8; font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-align: center; } .quiz-result-card::before { content: "?"; position: absolute; right: -25px; top: -105px; color: rgba(255,139,61,.055); font-size: 20rem; font-weight: 1000; } .quiz-result-card > * { position: relative; z-index: 2; } .quiz-result-stats { max-width: 760px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 26px auto; } .quiz-result-stats div { min-height: 90px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); } .quiz-result-stats span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .06em; } .quiz-result-stats b { color: var(--orange); font-size: 1.08rem; } @keyframes quizPulse { from { filter: brightness(1); } to { filter: brightness(1.65); box-shadow: 0 0 14px rgba(255,91,114,.55); } } @media (max-width: 1040px) { .quiz-setup-layout { grid-template-columns: 1fr; } .quiz-options { position: static; } .quiz-live-header { grid-template-columns: repeat(3,1fr); } .quiz-live-stat.timer { grid-column: span 2; } } @media (max-width: 760px) { .quiz-category-grid { grid-template-columns: 1fr; } .quiz-answer-grid { grid-template-columns: 1fr; } .quiz-live-header { grid-template-columns: repeat(2,1fr); } .quiz-live-stat.timer { grid-column: 1 / -1; } .quiz-live-stat.hearts { display: none; } .quiz-control-dock { grid-template-columns: 1fr; } .quiz-control-dock > p { display: none; } .quiz-lifelines { justify-content: center; } .quiz-control-dock > .danger-button { justify-self: center; } .quiz-result-stats { grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px) { .quiz-intro-panel { min-height: 0; padding: 25px 19px; } .quiz-orbit { width: 82px; height: 82px; } .quiz-orbit span { width: 52px; height: 52px; font-size: 1.8rem; } .quiz-mode-list { grid-template-columns: 1fr; } .quiz-mode-card { min-height: 62px; grid-template-columns: 45px 1fr; grid-template-rows: auto auto; text-align: left; } .quiz-mode-card span { grid-row: 1 / 3; } .quiz-answer { min-height: 78px; padding: 12px; } .quiz-feedback.visible { grid-template-columns: 1fr; } .quiz-feedback .primary-button { width: 100%; } .quiz-lifelines { width: 100%; } .quiz-lifelines button { flex: 1; min-width: 0; } } /* ===== Signal Dash · Build 0.1E ===== */ .dash-screen{display:none}.dash-screen.active{display:block}.dash-setup-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:22px}.dash-intro-panel,.dash-options{padding:28px}.dash-intro-panel h2{font-size:clamp(1.8rem,3vw,3rem);max-width:760px;margin:.3rem 0 .75rem}.dash-cube-emblem{width:92px;height:92px;position:relative;display:grid;place-items:center;margin-bottom:18px;filter:drop-shadow(0 0 24px rgba(88,231,255,.3))}.dash-cube-emblem span{width:48px;height:48px;background:#58e7ff;transform:rotate(14deg);box-shadow:inset 0 0 0 10px #07142b,0 0 30px #58e7ff}.dash-cube-emblem i{position:absolute;border:2px solid rgba(88,231,255,.4);inset:8px;transform:rotate(45deg);animation:dashOrbit 4s linear infinite}.dash-cube-emblem i:nth-child(3){inset:0;animation-direction:reverse;animation-duration:6s}@keyframes dashOrbit{to{transform:rotate(405deg)}} .dash-warning{display:flex;justify-content:space-between;gap:18px;margin:20px 0;padding:14px 16px;border:1px solid rgba(255,85,125,.35);background:rgba(255,85,125,.08);border-radius:14px}.dash-warning b{color:#ff7897;letter-spacing:.08em}.dash-warning span{color:var(--muted);text-align:right}.dash-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dash-level-card{position:relative;text-align:left;min-height:126px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(4,10,28,.72));color:inherit;cursor:pointer;overflow:hidden;transition:.2s ease}.dash-level-card::after{content:"";position:absolute;inset:auto -35px -55px auto;width:130px;height:130px;border-radius:50%;background:var(--dash-accent);filter:blur(35px);opacity:.12}.dash-level-card:hover,.dash-level-card.selected{transform:translateY(-2px);border-color:var(--dash-accent);box-shadow:0 0 0 1px var(--dash-accent),0 14px 35px rgba(0,0,0,.22)}.dash-level-card span,.dash-level-card b,.dash-level-card small,.dash-level-card em{display:block;position:relative;z-index:1}.dash-level-card .dash-danger{font-size:.76rem;color:var(--dash-accent);letter-spacing:.12em;margin-bottom:14px}.dash-level-card b{font-size:1.12rem}.dash-level-card small{color:var(--dash-accent);font-weight:800;margin-top:4px}.dash-level-card em{font-style:normal;color:var(--muted);font-size:.76rem;margin-top:9px;text-transform:uppercase;letter-spacing:.08em}.dash-level-card.legacy{background:linear-gradient(145deg,rgba(255,216,61,.12),rgba(74,26,55,.65))} .dash-mode-list{display:grid;gap:11px;margin:18px 0}.dash-mode-card{display:grid;grid-template-columns:44px 1fr;text-align:left;gap:2px 12px;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035);color:inherit;cursor:pointer}.dash-mode-card>span{grid-row:1/3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(88,231,255,.11);color:#58e7ff;font-weight:950}.dash-mode-card b{align-self:end}.dash-mode-card small{color:var(--muted);line-height:1.35}.dash-mode-card.selected{border-color:#58e7ff;background:rgba(88,231,255,.08);box-shadow:0 0 0 1px #58e7ff}.dash-live-header{display:grid;grid-template-columns:1.5fr repeat(4,minmax(100px,.58fr));gap:10px;margin-bottom:12px}.dash-live-stat{padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(5,13,34,.88);display:flex;justify-content:space-between;align-items:center;gap:10px}.dash-live-stat small{color:var(--muted);font-size:.68rem;letter-spacing:.08em}.dash-live-stat b{font-size:1.08rem}.dash-live-stat.progress{display:grid;grid-template-columns:1fr auto}.dash-progress-track{grid-column:1/-1;height:5px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden}.dash-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#58e7ff,#b889ff,#ff557d);box-shadow:0 0 15px #58e7ff}.dash-canvas-shell{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(88,231,255,.25);background:#071126;box-shadow:0 24px 60px rgba(0,0,0,.28)}.dash-canvas-shell canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}.dash-overlay,.dash-pause-panel{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(3,8,24,.56);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:.2s}.dash-overlay.active,.dash-pause-panel.active{opacity:1;pointer-events:auto}.dash-overlay h2{font-size:clamp(2.4rem,7vw,5.5rem);margin:.1em 0;text-shadow:0 0 35px rgba(88,231,255,.65)}.dash-overlay p{color:#d7e8ff}.dash-pause-panel{z-index:4;background:rgba(3,8,24,.84)}.dash-pause-panel>div{display:grid;gap:12px;min-width:min(360px,80%)}.dash-callout{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(3,8,24,.8);border:1px solid rgba(255,255,255,.13);font-size:.75rem;font-weight:900;letter-spacing:.08em;white-space:nowrap}.dash-callout.perfect{color:#ffd83d;border-color:#ffd83d}.dash-callout.good{color:#5ff5a7;border-color:#5ff5a7}.dash-callout.portal{color:#b889ff;border-color:#b889ff}.dash-callout.checkpoint{color:#58e7ff;border-color:#58e7ff}.dash-control-dock{display:grid;grid-template-columns:220px 1fr auto;gap:14px;align-items:center;margin-top:12px}.dash-control-dock>div{display:flex;flex-direction:column}.dash-control-dock>div span{font-size:.78rem;color:var(--muted)}.dash-jump-button{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;padding:12px 14px;border:1px solid #58e7ff;border-radius:13px;background:rgba(88,231,255,.1);color:inherit;cursor:pointer;touch-action:none}.dash-jump-button>span{font-size:1.4rem;color:#58e7ff}.dash-jump-button b{text-align:left}.dash-jump-button small{color:var(--muted)}.dash-jump-button.pressed{transform:translateY(2px);background:rgba(88,231,255,.22)}.dash-result-card{max-width:880px;margin:0 auto;text-align:center;padding:34px}.dash-result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.dash-result-stats>div{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.035)}.dash-result-stats span,.dash-result-stats b{display:block}.dash-result-stats span{color:var(--muted);font-size:.75rem}.dash-result-stats b{font-size:1.3rem;margin-top:4px} @media(max-width:900px){.dash-setup-layout{grid-template-columns:1fr}.dash-live-header{grid-template-columns:repeat(2,1fr)}.dash-live-stat.progress{grid-column:1/-1}.dash-control-dock{grid-template-columns:1fr auto}.dash-control-dock>div{display:none}.dash-result-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.dash-level-grid{grid-template-columns:1fr}.dash-warning{display:block}.dash-warning span{display:block;text-align:left;margin-top:5px}.dash-live-header{grid-template-columns:repeat(2,1fr)}.dash-live-stat{padding:8px 10px}.dash-live-stat:last-child{grid-column:1/-1}.dash-control-dock{grid-template-columns:1fr}.dash-control-dock .ghost-button{display:none}.dash-callout{font-size:.62rem;bottom:8px}.dash-result-card{padding:22px 15px}} /* DATA RUSH 2.0 · KNOWLEDGE OVERDRIVE */ .quiz-category-grid.expanded { grid-template-columns: repeat(2, minmax(0,1fr)); } .quiz-category-card.mix { grid-column: 1 / -1; min-height: 96px; } .quiz-mix-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 14px; padding: 16px; border: 1px solid rgba(255,139,61,.25); border-radius: 17px; background: rgba(255,139,61,.055); } .quiz-mix-panel[hidden] { display: none; } .quiz-mix-panel > b { grid-column: 1 / -1; color: var(--orange); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; } .quiz-mix-panel label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; color: #d8e8f2; background: rgba(255,255,255,.025); font-size: .68rem; font-weight: 800; cursor: pointer; } .quiz-mix-panel input { accent-color: var(--orange); } .quiz-option-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; } .quiz-mode-list.expanded { grid-template-columns: repeat(3, minmax(0,1fr)); } .quiz-mode-list.expanded .quiz-mode-card { min-height: 79px; } #quiz-difficulty-chip[data-level="expert"] { color: #ff6fd8; border-color: rgba(255,111,216,.35); box-shadow: 0 0 16px rgba(255,111,216,.11); } .quiz-boss-status { display: grid; grid-template-columns: auto minmax(120px,1fr) auto; align-items: center; gap: 13px; margin-bottom: 13px; padding: 11px 15px; border: 1px solid rgba(255,85,125,.38); border-radius: 14px; background: linear-gradient(90deg, rgba(255,85,125,.12), rgba(7,24,49,.9)); } .quiz-boss-status[hidden] { display: none; } .quiz-boss-status span { color: #ff9bb5; font-size: .62rem; font-weight: 950; letter-spacing: .13em; } .quiz-boss-status > div { height: 11px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); } .quiz-boss-status i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff365f, #ff8b3d); transition: width .3s ease; } .quiz-boss-status b { min-width: 48px; color: white; text-align: right; } .quiz-control-dock.expanded { grid-template-columns: minmax(0,auto) 1fr auto; } .quiz-lifelines.expanded { display: grid; grid-template-columns: repeat(5, minmax(64px,1fr)); } .quiz-lifelines button.active { border-color: var(--cyan); color: var(--cyan); background: rgba(88,231,255,.14); box-shadow: 0 0 18px rgba(88,231,255,.16); } .quiz-answer { position: relative; grid-template-columns: 48px minmax(0,1fr) auto; } .quiz-answer.second-chance { opacity: .5; } .quiz-scan-value { min-width: 42px; color: var(--yellow); font-size: .72rem; font-style: normal; font-weight: 1000; text-align: right; opacity: 0; transform: translateX(5px); transition: .2s ease; } .quiz-scan-value.visible { opacity: 1; transform: translateX(0); } .quiz-review { max-width: 950px; margin: 28px auto 0; padding: 20px; border: 1px solid rgba(255,139,61,.2); border-radius: 18px; background: rgba(3,14,30,.62); text-align: left; } .quiz-review[hidden] { display: none; } .quiz-review h3 { margin: 4px 0 15px; font-size: 1.15rem; } .quiz-review-list { display: grid; gap: 9px; max-height: 420px; overflow: auto; padding-right: 5px; } .quiz-review-item { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); } .quiz-review-item b { color: white; font-size: .78rem; line-height: 1.45; } .quiz-review-item span { color: #ff91a5; font-size: .67rem; } .quiz-review-item strong { color: var(--green); font-size: .69rem; } .quiz-review-item p { margin: 2px 0 0; color: #9eb6c8; font-size: .67rem; line-height: 1.5; } .quiz-review-more { margin: 5px 0 0; color: var(--muted); font-size: .68rem; text-align: center; } @media (max-width: 1100px) { .quiz-option-pair { grid-template-columns: 1fr; } .quiz-lifelines.expanded { grid-template-columns: repeat(3, minmax(64px,1fr)); } } @media (max-width: 760px) { .quiz-category-grid.expanded { grid-template-columns: 1fr; } .quiz-category-card.mix { grid-column: auto; } .quiz-mix-panel { grid-template-columns: 1fr; } .quiz-mix-panel > b { grid-column: auto; } .quiz-mode-list.expanded { grid-template-columns: repeat(2, minmax(0,1fr)); } .quiz-control-dock.expanded { grid-template-columns: 1fr; } .quiz-lifelines.expanded { grid-template-columns: repeat(5, minmax(0,1fr)); width: 100%; } .quiz-lifelines.expanded button { min-width: 0; padding: 6px 2px; } .quiz-lifelines.expanded span { font-size: .52rem; } .quiz-answer { grid-template-columns: 42px minmax(0,1fr) auto; } } @media (max-width: 520px) { .quiz-mode-list.expanded { grid-template-columns: 1fr; } .quiz-lifelines.expanded { grid-template-columns: repeat(3, minmax(0,1fr)); } .quiz-boss-status { grid-template-columns: 1fr auto; } .quiz-boss-status > div { grid-column: 1 / -1; grid-row: 2; } } /* ========================================================= CHATTER CHESS 0.1F · TACTICAL OVERDRIVE ========================================================= */ .tactical-setup-layout { grid-template-columns: minmax(0,1fr) 390px; } .tactical-intro-panel { min-height: 650px; } .chess-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:32px; } .chess-mode-card { min-height:150px; display:grid; align-content:center; gap:7px; padding:18px 14px; border:1px solid rgba(88,231,255,.17); border-radius:18px; color:#dceeff; background:linear-gradient(145deg,rgba(5,21,44,.92),rgba(8,34,61,.62)); text-align:left; cursor:pointer; transition:.2s ease; } .chess-mode-card:hover { transform:translateY(-3px); border-color:rgba(88,231,255,.45); box-shadow:0 15px 34px rgba(0,0,0,.25); } .chess-mode-card.selected { border-color:var(--cyan); background:linear-gradient(145deg,rgba(11,49,78,.96),rgba(6,25,51,.94)); box-shadow:0 0 0 2px rgba(88,231,255,.12),0 18px 42px rgba(0,0,0,.25); } .chess-mode-card > span { color:var(--cyan); font-size:2rem; font-weight:1000; } .chess-mode-card b { font-size:.86rem; letter-spacing:.06em; } .chess-mode-card small { color:var(--muted); line-height:1.45; } .chess-bank-banner { display:flex; align-items:center; gap:16px; margin-top:20px; padding:15px 17px; border:1px solid rgba(255,216,61,.2); border-radius:16px; background:rgba(255,216,61,.045); } .chess-bank-banner > span { color:var(--yellow); font-size:2rem; font-weight:1000; } .chess-bank-banner div { display:grid; gap:3px; } .chess-bank-banner b { color:#fff2ad; font-size:.72rem; letter-spacing:.12em; } .chess-bank-banner small { color:var(--muted); line-height:1.4; } .chess-option-panel { display:none; } .chess-option-panel.active { display:block; animation:viewIn .25s ease; } .tactical-options { min-height:650px; } .story-setup-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; } .story-setup-progress div { min-height:78px; display:grid; place-items:center; align-content:center; gap:5px; border:1px solid rgba(88,231,255,.14); border-radius:13px; background:rgba(255,255,255,.025); text-align:center; } .story-setup-progress span { color:var(--muted); font-size:.62rem; font-weight:900; letter-spacing:.09em; } .story-setup-progress b { color:var(--cyan); font-size:.93rem; } .chess-board-button { margin-top:16px; } .offline-board-note { margin:9px 0 0; color:#7f94a9; font-size:.57rem; font-weight:900; letter-spacing:.1em; text-align:center; } .story-map-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:28px; margin-bottom:20px; overflow:hidden; } .story-map-header h2 { font-size:clamp(1.7rem,3vw,2.8rem); } .story-map-header p:not(.eyebrow) { max-width:740px; color:var(--muted); line-height:1.6; } .story-map-summary { display:grid; grid-template-columns:repeat(3,minmax(90px,1fr)); gap:9px; } .story-map-summary div { min-width:105px; min-height:75px; display:grid; place-items:center; align-content:center; gap:5px; padding:10px; border:1px solid rgba(88,231,255,.18); border-radius:14px; background:rgba(6,26,51,.7); } .story-map-summary span { color:var(--muted); font-size:.58rem; font-weight:950; letter-spacing:.13em; } .story-map-summary b { color:var(--cyan); font-size:1rem; } .story-chapter-list { display:grid; gap:18px; max-width:1180px; margin:0 auto; } .story-chapter { position:relative; padding:22px; overflow:hidden; } .story-chapter::before { content:""; position:absolute; width:260px; height:260px; right:-150px; bottom:-175px; border:35px solid rgba(88,231,255,.055); border-radius:50%; } .story-chapter.locked { opacity:.58; } .story-chapter > header { position:relative; z-index:2; display:flex; justify-content:space-between; gap:18px; align-items:start; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.07); } .story-chapter header > div:first-child { display:grid; gap:4px; } .story-chapter header span { color:var(--cyan); font-size:.62rem; font-weight:1000; letter-spacing:.15em; } .story-chapter header h3 { margin:0; font-size:1.35rem; } .story-chapter header p { margin:0; color:var(--muted); font-size:.82rem; } .story-chapter header > div:last-child { display:grid; justify-items:end; gap:3px; } .story-chapter header > div:last-child b { color:var(--yellow); font-size:1.1rem; } .story-chapter header > div:last-child small { color:var(--muted); } .story-node-path { position:relative; z-index:2; display:grid; grid-template-columns:repeat(6,minmax(70px,1fr)); gap:21px 10px; padding:30px 16px 12px; } .story-node-path::before { content:""; position:absolute; left:7%; right:7%; top:50%; height:3px; background:linear-gradient(90deg,rgba(88,231,255,.08),rgba(88,231,255,.32),rgba(255,216,61,.25),rgba(88,231,255,.08)); box-shadow:0 0 16px rgba(88,231,255,.12); } .story-node { position:relative; z-index:3; width:62px; height:62px; display:grid; place-items:center; align-content:center; gap:1px; justify-self:center; padding:0; border:3px solid #28546d; border-radius:50%; color:#dceeff; background:radial-gradient(circle at 35% 30%,#1f5874,#0a243e 72%); box-shadow:0 9px 20px rgba(0,0,0,.32),inset 0 0 0 2px rgba(255,255,255,.04); cursor:pointer; transition:.2s ease; } .story-node:nth-child(2),.story-node:nth-child(5),.story-node:nth-child(8),.story-node:nth-child(11) { transform:translateY(15px); } .story-node:nth-child(3),.story-node:nth-child(4),.story-node:nth-child(9),.story-node:nth-child(10) { transform:translateY(-12px); } .story-node:hover:not(:disabled) { filter:brightness(1.2); box-shadow:0 12px 25px rgba(0,0,0,.35),0 0 22px rgba(88,231,255,.26); } .story-node > span { font-size:1rem; font-weight:1000; } .story-node small { color:#9fb8c9; font-size:.54rem; font-weight:950; } .story-node.solved { border-color:#5ff5a7; color:#061a25; background:radial-gradient(circle at 35% 30%,#9affc8,#38ca88 75%); } .story-node.solved small { color:#075234; } .story-node.current { border-color:var(--yellow); animation:storyCurrent 1.4s ease-in-out infinite; } .story-node.locked { border-color:#263b50; color:#63778a; background:#10243a; cursor:not-allowed; box-shadow:none; } @keyframes storyCurrent { 50% { box-shadow:0 10px 22px rgba(0,0,0,.3),0 0 0 9px rgba(255,216,61,.08),0 0 24px rgba(255,216,61,.32); } } .story-map-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:22px 0; } .tactics-live-bar { display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)) minmax(180px,1.3fr); gap:9px; margin-bottom:15px; } .tactics-live-bar > div { min-height:68px; display:grid; align-content:center; gap:4px; padding:11px 15px; border:1px solid rgba(88,231,255,.14); border-radius:14px; background:rgba(5,22,44,.9); } .tactics-live-bar small { color:var(--muted); font-size:.56rem; font-weight:950; letter-spacing:.13em; } .tactics-live-bar b { color:var(--cyan); font-size:.92rem; } .tactics-live-bar > div:nth-child(2) b { color:#ff748a; letter-spacing:.1em; } .tactics-time-stat span { height:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); } .tactics-time-stat i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),#5ff5a7); transition:width .08s linear; } .tactics-time-stat i[data-danger="true"] { background:linear-gradient(90deg,#ff4f6d,#ffad47); animation:timerDanger .55s linear infinite alternate; } @keyframes timerDanger { to { filter:brightness(1.45); } } .tactics-layout { display:grid; grid-template-columns:minmax(420px,760px) minmax(300px,1fr); gap:22px; align-items:start; justify-content:center; } .tactics-board-column { width:min(100%,760px); } .tactics-board-top,.tactics-board-bottom { min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:15px; padding:10px 15px; border:1px solid var(--line); background:rgba(7,25,51,.94); } .tactics-board-top { border-radius:16px 16px 0 0; } .tactics-board-bottom { border-radius:0 0 16px 16px; } .tactics-board-top span,.tactics-board-bottom span { color:var(--muted); font-size:.63rem; font-weight:950; letter-spacing:.12em; } .tactics-board-top b,.tactics-board-bottom b { color:var(--cyan); font-size:.76rem; letter-spacing:.08em; } .tactics-board { border-color:#173c5b; } .chess-square.tactics-hint-source::before { content:""; position:absolute; z-index:5; inset:7%; border:4px solid var(--yellow); border-radius:18%; box-shadow:0 0 18px rgba(255,216,61,.58),inset 0 0 20px rgba(255,216,61,.2); animation:hintPulse 1s ease-in-out infinite; } .chess-square.tactics-hint-target::before { content:""; position:absolute; z-index:5; inset:17%; border:4px dashed #ff8b3d; border-radius:50%; } @keyframes hintPulse { 50% { transform:scale(.9); opacity:.65; } } .tactics-sidebar { display:grid; gap:14px; position:sticky; top:96px; } .tactics-objective-panel,.tactics-path-panel { padding:22px; } .tactics-objective-panel { min-height:290px; position:relative; overflow:hidden; } .tactics-objective-panel::after { content:"♞"; position:absolute; right:-15px; bottom:-38px; color:rgba(88,231,255,.055); font-size:9rem; transform:rotate(-12deg); } .tactics-objective-panel > * { position:relative; z-index:2; } .tactics-difficulty-chip { display:inline-flex; margin:7px 0 16px; padding:6px 9px; border:1px solid rgba(88,231,255,.25); border-radius:999px; color:var(--cyan); background:rgba(88,231,255,.07); font-size:.61rem; font-weight:950; letter-spacing:.12em; } .tactics-difficulty-chip[data-level="7"],.tactics-difficulty-chip[data-level="8"],.tactics-difficulty-chip[data-level="9"] { color:#ff9bab; border-color:rgba(255,91,114,.35); background:rgba(255,91,114,.08); } .tactics-objective-panel h2 { font-size:clamp(1.45rem,2.5vw,2.2rem); line-height:1.08; } .tactics-objective-panel > p:not(.eyebrow) { color:var(--muted); } .tactics-feedback { display:grid; gap:4px; min-height:72px; margin-top:20px; padding:13px 14px; border:1px solid rgba(88,231,255,.14); border-radius:13px; background:rgba(4,18,37,.74); } .tactics-feedback b { color:var(--cyan); font-size:.68rem; letter-spacing:.11em; } .tactics-feedback span { color:#bdd0de; font-size:.78rem; line-height:1.45; } .tactics-feedback.correct { border-color:rgba(95,245,167,.35); background:rgba(95,245,167,.06); } .tactics-feedback.correct b { color:#5ff5a7; } .tactics-feedback.wrong { border-color:rgba(255,91,114,.4); background:rgba(255,91,114,.07); } .tactics-feedback.wrong b { color:#ff748a; } .tactics-feedback.hint { border-color:rgba(255,216,61,.4); background:rgba(255,216,61,.06); } .tactics-feedback.hint b { color:var(--yellow); } .tactics-run-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; } .tactics-run-grid div { min-height:65px; display:grid; place-items:center; align-content:center; gap:3px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.02); } .tactics-run-grid span { color:var(--muted); font-size:.57rem; font-weight:900; } .tactics-run-grid b { color:var(--cyan); } .tactics-result-stars { margin:18px 0 10px; color:var(--yellow); font-size:clamp(3rem,9vw,6rem); font-weight:1000; letter-spacing:.05em; text-shadow:0 0 30px rgba(255,216,61,.2); } .tactics-result-stats { max-width:680px; } .leaderboard-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:28px; } .leaderboard-heading p:not(.eyebrow) { max-width:760px; color:var(--muted); line-height:1.55; } .leaderboard-heading > span { padding:10px 13px; border:1px solid rgba(255,216,61,.35); border-radius:999px; color:var(--yellow); background:rgba(255,216,61,.06); font-size:.65rem; font-weight:1000; letter-spacing:.15em; } .leaderboard-tab-row { display:flex; justify-content:center; gap:9px; margin:18px 0; } .leaderboard-tab { min-width:150px; padding:12px 18px; border:1px solid var(--line); border-radius:999px; color:#b8cad9; background:rgba(7,25,51,.86); font-weight:950; cursor:pointer; } .leaderboard-tab.active { color:#061426; border-color:var(--cyan); background:var(--cyan); } .chess-leaderboard-table { max-width:1000px; margin:0 auto; padding:22px; } .leaderboard-title { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; } .leaderboard-title h3 { margin:0; } .leaderboard-title > b { color:var(--yellow); font-size:.75rem; letter-spacing:.1em; } .leaderboard-row { display:grid; grid-template-columns:55px minmax(160px,1fr) repeat(3,minmax(90px,.6fr)); align-items:center; min-height:52px; padding:8px 12px; border-top:1px solid rgba(255,255,255,.065); color:#cfe2ef; } .leaderboard-row.header { min-height:36px; color:var(--muted); font-size:.58rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; } .leaderboard-row.local-entry { background:linear-gradient(90deg,rgba(88,231,255,.07),transparent); } .leaderboard-row.local-entry span:first-child { color:var(--yellow); font-weight:1000; } .leaderboard-row.placeholder { color:#586e82; font-size:.72rem; } .leaderboard-row span:not(:nth-child(2)) { text-align:center; } @media (max-width: 980px) { .tactical-setup-layout,.tactics-layout { grid-template-columns:1fr; } .tactical-options,.tactics-sidebar { position:static; min-height:0; } .tactics-sidebar { grid-template-columns:1fr 1fr; } .tactics-sidebar > button { align-self:stretch; } .story-map-header { grid-template-columns:1fr; } .story-map-summary { width:100%; } .story-node-path { grid-template-columns:repeat(4,1fr); } .tactics-live-bar { grid-template-columns:repeat(3,1fr); } .tactics-time-stat { grid-column:span 2; } } @media (max-width: 680px) { .chess-mode-grid { grid-template-columns:1fr; } .tactical-intro-panel { min-height:0; } .story-setup-progress { grid-template-columns:1fr; } .story-map-summary { grid-template-columns:1fr; } .story-node-path { grid-template-columns:repeat(3,1fr); padding-inline:0; } .story-node { width:54px; height:54px; } .tactics-live-bar { grid-template-columns:1fr 1fr; } .tactics-time-stat { grid-column:1 / -1; } .tactics-sidebar { grid-template-columns:1fr; } .tactics-board-top,.tactics-board-bottom { min-height:50px; font-size:.8rem; } .leaderboard-heading { grid-template-columns:1fr; } .chess-leaderboard-table { padding:12px; overflow-x:auto; } .leaderboard-row { min-width:680px; } .leaderboard-tab { min-width:0; flex:1; } } /* ========================================================= SIGNAL CLASH · BUILD 0.2A FIRST CONTACT LAB ========================================================= */ .clash-screen { display:none; } .clash-screen.active { display:block; animation:viewIn .35s ease; } .clash-game-header .game-session-rings b { color:var(--yellow); font-size:.72rem; letter-spacing:.12em; } .clash-setup-hero { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:30px; align-items:center; padding:clamp(28px,5vw,58px); overflow:hidden; position:relative; } .clash-setup-hero::after { content:"▣"; position:absolute; right:28%; bottom:-120px; color:rgba(88,231,255,.035); font-size:24rem; transform:rotate(-8deg); pointer-events:none; } .clash-setup-hero > * { position:relative; z-index:2; } .clash-setup-hero h2 { max-width:850px; font-size:clamp(2rem,4vw,4.2rem); line-height:.98; } .clash-setup-hero > div > p:not(.eyebrow) { max-width:830px; color:#bdd0df; line-height:1.65; } .clash-rule-strip { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; } .clash-rule-strip span { display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid rgba(88,231,255,.18); border-radius:999px; color:#bcd2e2; background:rgba(88,231,255,.055); font-size:.72rem; font-weight:850; } .clash-rule-strip b { color:var(--cyan); font-size:1rem; } .clash-start-panel { display:grid; gap:13px; padding:23px; border:1px solid rgba(255,216,61,.25); border-radius:20px; background:linear-gradient(145deg,rgba(38,32,8,.64),rgba(5,23,48,.92)); box-shadow:0 22px 55px rgba(0,0,0,.28); } .clash-setup-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin-top:20px; } .clash-rules-panel,.clash-record-panel { padding:27px; } .clash-rule-list { display:grid; grid-template-columns:1fr 1fr; gap:11px; } .clash-rule-list > div { display:grid; grid-template-columns:45px 1fr; gap:12px; min-height:96px; padding:14px; border:1px solid rgba(255,255,255,.075); border-radius:15px; background:rgba(255,255,255,.025); } .clash-rule-list > div > span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:#061426; background:var(--cyan); font-weight:1000; } .clash-rule-list p { display:grid; gap:4px; margin:0; } .clash-rule-list small { color:var(--muted); line-height:1.45; } .clash-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; } .clash-stat-grid div { display:grid; gap:5px; padding:13px 9px; text-align:center; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(255,255,255,.025); } .clash-stat-grid span { color:var(--muted); font-size:.57rem; font-weight:900; letter-spacing:.08em; } .clash-stat-grid b { color:var(--cyan); font-size:1.15rem; } .clash-local-board { display:grid; gap:6px; } .clash-record { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:8px; min-height:42px; padding:7px 10px; border-top:1px solid rgba(255,255,255,.065); } .clash-record > span { color:var(--yellow); font-weight:1000; } .clash-record small { color:var(--muted); } .clash-record.placeholder { color:#5f7488; } .prototype-card-gallery { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } .prototype-card { min-width:0; min-height:350px; display:grid; grid-template-rows:auto 145px 1fr; overflow:hidden; border:2px solid color-mix(in srgb,var(--card-accent),transparent 48%); border-radius:18px; background:linear-gradient(155deg,color-mix(in srgb,var(--card-accent),#071426 86%),#071427 48%,#030b17); box-shadow:0 14px 34px rgba(0,0,0,.26); text-align:left; } .prototype-card.compact { min-height:320px; grid-template-rows:auto 122px 1fr; } .prototype-card-top { display:flex; justify-content:space-between; align-items:center; padding:9px 11px; border-bottom:1px solid rgba(255,255,255,.09); color:#dfeeff; background:rgba(0,0,0,.18); font-size:.58rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; } .prototype-card-top b { display:flex; align-items:center; gap:4px; color:var(--yellow); font-size:.86rem; } .tiny-ring { width:11px; height:11px; display:inline-block; border:3px solid currentColor; border-radius:50%; } .prototype-art { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--card-accent),transparent 45%),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.035),transparent); } .prototype-art::before,.prototype-art::after { content:""; position:absolute; width:150%; height:2px; background:color-mix(in srgb,var(--card-accent),transparent 45%); transform:rotate(-20deg); box-shadow:0 26px 0 color-mix(in srgb,var(--card-accent),transparent 70%),0 -26px 0 color-mix(in srgb,var(--card-accent),transparent 70%); } .prototype-art > span { position:relative; z-index:2; font-size:3.4rem; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); } .prototype-art small { position:absolute; z-index:3; right:8px; bottom:7px; color:rgba(255,255,255,.42); font-size:.48rem; font-weight:1000; letter-spacing:.14em; } .prototype-copy { display:grid; align-content:start; gap:5px; padding:12px; } .prototype-copy > small { color:var(--card-accent); font-size:.55rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; } .prototype-copy h3 { margin:0; font-size:1.03rem; line-height:1.05; } .prototype-copy p { margin:0; color:#aabfd0; font-size:.67rem; line-height:1.42; } .prototype-ability { margin-top:4px; color:#eaf7ff; font-size:.68rem; } .prototype-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin:5px 0; } .prototype-stats span { display:grid; place-items:center; padding:4px 2px; border:1px solid rgba(255,255,255,.075); border-radius:6px; color:#839bae; font-size:.43rem; font-weight:900; } .prototype-stats b { color:var(--card-accent); font-size:.74rem; } .prototype-effect { margin:7px 0; padding:7px; border:1px solid color-mix(in srgb,var(--card-accent),transparent 70%); border-radius:7px; color:var(--card-accent); background:color-mix(in srgb,var(--card-accent),transparent 92%); font-size:.62rem; font-weight:950; text-align:center; } .clash-scoreboard { display:grid; grid-template-columns:1fr 1.45fr 1fr; padding:0; overflow:hidden; margin-bottom:12px; } .clash-scoreboard > div { min-height:92px; display:grid; place-items:center; align-content:center; gap:3px; padding:13px; text-align:center; border-right:1px solid var(--line); } .clash-scoreboard > div:last-child { border-right:0; } .clash-scoreboard span { color:var(--muted); font-size:.58rem; font-weight:950; letter-spacing:.13em; } .clash-scoreboard b { color:var(--cyan); font-size:2rem; } .clash-scoreboard > div:nth-child(3) b { color:var(--red); } .clash-scoreboard small { color:#7f99ae; } .clash-message.good { color:var(--green); } .clash-message.warning { color:var(--yellow); } .clash-message.thinking { color:#c59aff; } .clash-match-layout { display:grid; grid-template-columns:minmax(700px,1fr) 310px; gap:14px; align-items:start; } .clash-resource-bar { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:13px; min-height:68px; padding:10px 14px; border:1px solid var(--line); border-radius:17px 17px 0 0; background:rgba(7,25,51,.94); } .clash-resource-bar > div { display:flex; align-items:center; gap:8px; } .clash-resource-bar > div:nth-child(2) { padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; } .clash-resource-bar span:not(.mini-ring),.clash-resource-bar small { color:var(--muted); font-size:.6rem; font-weight:900; } .clash-resource-bar b { color:var(--yellow); font-size:1.35rem; } .clash-board { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; background:linear-gradient(180deg,rgba(4,18,37,.96),rgba(5,13,27,.96)); } .clash-route { width:100%; display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; min-height:142px; padding:12px; border:1px solid rgba(88,231,255,.14); border-radius:15px; color:inherit; background:linear-gradient(90deg,rgba(88,231,255,.045),rgba(255,255,255,.018)); cursor:pointer; text-align:left; transition:.18s ease; } .clash-route:hover:not(:disabled),.clash-route.targetable:hover { border-color:var(--yellow); box-shadow:0 0 0 2px rgba(255,216,61,.08),0 14px 28px rgba(0,0,0,.22); } .clash-route.claimed { opacity:.62; cursor:default; } .route-heading { display:grid; align-content:center; gap:4px; padding-right:10px; border-right:1px solid rgba(255,255,255,.08); } .route-heading span { color:var(--cyan); font-size:.56rem; font-weight:950; letter-spacing:.12em; } .route-heading b { font-size:.9rem; } .route-heading small { color:var(--muted); font-size:.56rem; } .route-track { position:relative; min-height:88px; margin-top:4px; } .route-cells { position:absolute; inset:15px 34px; display:grid; grid-template-columns:repeat(7,1fr); align-items:center; } .route-cells::before { content:""; position:absolute; left:0; right:0; top:50%; height:5px; border-radius:999px; background:linear-gradient(90deg,var(--cyan),rgba(255,255,255,.15) 48%,rgba(255,255,255,.15) 52%,var(--red)); box-shadow:0 0 15px rgba(88,231,255,.18); } .route-cell { position:relative; z-index:2; width:18px; height:18px; justify-self:center; border:3px solid #45657d; border-radius:50%; background:#07172d; } .route-cell:first-child { border-color:var(--cyan); } .route-cell:last-child { border-color:var(--red); } .route-gate { position:absolute; z-index:4; top:23px; width:37px; height:43px; display:grid; place-items:center; border:2px solid currentColor; border-radius:9px; font-size:.55rem; font-weight:1000; } .route-gate.player { left:0; color:var(--cyan); } .route-gate.ai { right:0; color:var(--red); } .route-gate.captured { color:var(--yellow); background:rgba(255,216,61,.1); box-shadow:0 0 20px rgba(255,216,61,.28); } .route-gate.lost { opacity:.25; } .route-units { position:absolute; inset:0 34px; } .clash-unit { position:absolute; z-index:6; left:var(--unit-left); width:72px; min-height:50px; display:grid; grid-template-columns:27px 1fr; align-items:center; gap:5px; padding:5px; border:2px solid var(--unit-accent); border-radius:10px; background:#061326; box-shadow:0 8px 18px rgba(0,0,0,.38); transform:translateX(calc(-50% + var(--unit-offset))); transition:left .45s cubic-bezier(.2,.8,.25,1),transform .3s ease; } .clash-unit.player { top:0; } .clash-unit.ai { bottom:0; } .clash-unit i { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; color:#06101d; background:var(--unit-accent); font-size:.58rem; font-style:normal; font-weight:1000; } .clash-unit b { overflow:hidden; font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; } .clash-unit small { grid-column:2; color:#8fa9bb; font-size:.45rem; } .route-buffs { grid-column:2; display:flex; flex-wrap:wrap; gap:5px; min-height:18px; } .route-buffs span { padding:3px 6px; border:1px solid rgba(255,255,255,.1); border-radius:999px; font-size:.45rem; font-weight:950; } .route-buffs .player { color:var(--cyan); } .route-buffs .ai { color:var(--red); } .clash-side-column { display:grid; gap:12px; position:sticky; top:92px; } .clash-selected-detail,.clash-log-panel { padding:19px; } .clash-selected-detail { min-height:170px; } .clash-selected-detail > p:not(.eyebrow) { color:var(--muted); line-height:1.5; } .clash-selected-detail > b { color:var(--yellow); font-size:.74rem; } .clash-log { max-height:365px; overflow:auto; display:grid; gap:5px; } .clash-log-entry { display:grid; grid-template-columns:8px 1fr; gap:8px; padding:7px 0; border-top:1px solid rgba(255,255,255,.055); } .clash-log-entry > span { width:7px; height:7px; margin-top:5px; border-radius:50%; background:#6f8497; } .clash-log-entry.player > span { background:var(--cyan); } .clash-log-entry.ai > span { background:var(--red); } .clash-log-entry p { margin:0; color:#a9bfce; font-size:.68rem; line-height:1.4; } .clash-hand-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:27px 0 10px; } .clash-hand-heading h2 { margin:0; } .clash-hand-actions { display:flex; align-items:center; gap:12px; } .clash-hand-actions small { max-width:360px; color:var(--muted); text-align:right; } .clash-hand-actions .primary-button { white-space:nowrap; } .clash-hand { display:flex; gap:11px; padding:12px 4px 22px; overflow-x:auto; scroll-snap-type:x proximity; } .clash-hand-card { flex:0 0 210px; padding:0; border:0; border-radius:18px; background:transparent; cursor:pointer; scroll-snap-align:start; transition:.18s ease; } .clash-hand-card:hover:not(:disabled) { transform:translateY(-8px); } .clash-hand-card.selected { transform:translateY(-12px); filter:drop-shadow(0 0 16px rgba(255,216,61,.28)); } .clash-hand-card.selected .prototype-card { border-color:var(--yellow); } .clash-hand-card.unaffordable { filter:grayscale(.7); opacity:.55; } .clash-hand-card .prototype-card { min-height:330px; grid-template-rows:auto 125px 1fr; } .empty-hand { min-width:100%; padding:30px; color:var(--muted); text-align:center; } .clash-result-card { max-width:790px; } @media (max-width:1200px) { .prototype-card-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); } .clash-match-layout { grid-template-columns:1fr; } .clash-side-column { position:static; grid-template-columns:1fr 1fr; } } @media (max-width:900px) { .clash-setup-hero,.clash-setup-grid { grid-template-columns:1fr; } .prototype-card-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } .clash-route { grid-template-columns:110px minmax(0,1fr); } .clash-stat-grid { grid-template-columns:1fr 1fr; } } @media (max-width:680px) { .prototype-card-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .prototype-card.compact { min-height:300px; } .clash-rule-list { grid-template-columns:1fr; } .clash-scoreboard { grid-template-columns:1fr 1fr; } .clash-scoreboard > div:nth-child(2) { grid-column:1 / -1; grid-row:1; border-bottom:1px solid var(--line); } .clash-scoreboard > div:nth-child(1),.clash-scoreboard > div:nth-child(3) { grid-row:2; } .clash-resource-bar { grid-template-columns:1fr auto; } .clash-resource-bar button { grid-column:1 / -1; } .clash-route { grid-template-columns:1fr; min-height:175px; } .route-heading { grid-template-columns:auto 1fr auto; align-items:center; border-right:0; border-bottom:1px solid rgba(255,255,255,.07); padding:0 0 8px; } .route-heading small { text-align:right; } .route-buffs { grid-column:1; } .clash-side-column { grid-template-columns:1fr; } .clash-unit { width:55px; grid-template-columns:23px 1fr; } .clash-unit i { width:23px; height:23px; } .clash-unit b { font-size:.46rem; } .clash-hand-heading { display:block; } .clash-hand-actions { display:grid; margin-top:10px; } .clash-hand-actions small { display:block; text-align:left; } .clash-hand-actions .primary-button { width:100%; } .clash-record { grid-template-columns:26px 1fr; } .clash-record small { grid-column:2; } } @media (max-width:430px) { .prototype-card-gallery { grid-template-columns:1fr; } .prototype-card.compact { min-height:330px; } } /* ============================================================ BUILD 0.2B · SONIC MULTIVERSE SHELL + SQUAD RUSH ============================================================ */ body::after { content:""; position:fixed; z-index:-1; inset:-20%; pointer-events:none; opacity:.12; background: repeating-linear-gradient(122deg, transparent 0 68px, rgba(88,231,255,.16) 69px 72px, transparent 73px 145px), radial-gradient(ellipse at 78% 36%, rgba(255,216,61,.14), transparent 22%); transform:translate3d(0,0,0) rotate(-2deg); } .topbar { box-shadow:0 12px 40px rgba(0,0,0,.24); } .topbar::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:linear-gradient(90deg,transparent 0 5%,var(--yellow) 14%,var(--cyan) 42%,var(--blue) 70%,transparent 96%); opacity:.72; } .brand-text b, .game-header h1, .page-heading h1 { font-style:italic; } .nav-button.active::after { background:linear-gradient(90deg,var(--yellow),var(--cyan)); } .primary-button { clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); } .panel { position:relative; overflow:hidden; } .panel::after { content:""; position:absolute; pointer-events:none; right:-70px; top:-70px; width:150px; height:150px; border:1px solid rgba(88,231,255,.08); border-radius:50%; } .squad-view { --squad-cyan:#58e7ff; --squad-yellow:#ffd83d; --squad-red:#ff557d; } .squad-game-header { position:relative; } .squad-game-header::before { content:""; position:absolute; z-index:-1; inset:-12px -5vw; background: linear-gradient(115deg,rgba(25,119,255,.16),transparent 42%), repeating-linear-gradient(120deg,transparent 0 55px,rgba(255,216,61,.055) 56px 60px); transform:skewY(-1deg); } .squad-screen { display:none; animation:viewIn .32s ease; } .squad-screen.active { display:block; } .squad-setup-hero { min-height:430px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:32px; padding:clamp(26px,4vw,52px); background: radial-gradient(circle at 15% 20%,rgba(88,231,255,.16),transparent 30%), radial-gradient(circle at 75% 20%,rgba(255,216,61,.12),transparent 25%), linear-gradient(145deg,rgba(8,34,72,.96),rgba(5,14,30,.98)); } .squad-setup-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background: repeating-linear-gradient(125deg,transparent 0 38px,rgba(255,255,255,.09) 39px 41px,transparent 42px 82px); mask-image:linear-gradient(90deg,black,transparent 80%); } .squad-setup-copy { position:relative; z-index:1; align-self:center; } .squad-setup-copy h2 { max-width:800px; margin-bottom:18px; font-size:clamp(2.2rem,5vw,4.8rem); line-height:.92; font-style:italic; letter-spacing:-.065em; } .squad-setup-copy > p:not(.eyebrow) { max-width:780px; color:#c0d4e6; font-size:1.05rem; line-height:1.72; } .squad-rule-strip { display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 20px; } .squad-rule-strip span { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(88,231,255,.2); border-radius:999px; color:#a9c0d5; background:rgba(2,11,25,.55); font-size:.68rem; font-weight:850; text-transform:uppercase; } .squad-rule-strip b { color:var(--yellow); font-size:1rem; } .squad-universe-ribbon { display:flex; flex-wrap:wrap; gap:6px; } .squad-universe-ribbon span { padding:6px 9px; border-left:4px solid var(--ribbon); color:color-mix(in srgb,var(--ribbon),white 24%); background:color-mix(in srgb,var(--ribbon),transparent 90%); font-size:.55rem; font-weight:1000; letter-spacing:.09em; } .squad-start-panel { position:relative; z-index:2; align-self:stretch; padding:24px; border:1px solid rgba(255,216,61,.2); border-radius:20px; background:linear-gradient(180deg,rgba(4,18,38,.94),rgba(2,10,23,.97)); box-shadow:0 30px 70px rgba(0,0,0,.3); } .squad-setup-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:18px; margin-top:18px; } .squad-profile-panel,.squad-board-panel { padding:24px; } .squad-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; } .squad-stat-grid div { min-height:92px; display:grid; place-items:center; align-content:center; gap:4px; padding:12px; border:1px solid rgba(255,255,255,.075); border-radius:15px; background:rgba(255,255,255,.025); text-align:center; } .squad-stat-grid span { color:var(--muted); font-size:.57rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .squad-stat-grid b { color:var(--cyan); font-size:1.45rem; } .squad-leaderboard { display:grid; gap:5px; } .squad-board-row { display:grid; grid-template-columns:28px minmax(110px,1fr) minmax(120px,1.2fr) 36px 74px; align-items:center; gap:8px; min-height:37px; padding:6px 9px; border:1px solid rgba(255,255,255,.065); border-radius:9px; background:rgba(255,255,255,.025); } .squad-board-row > span { color:var(--yellow); font-weight:1000; } .squad-board-row b { font-size:.7rem; } .squad-board-row small { overflow:hidden; color:var(--muted); font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; } .squad-board-row strong { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#051120; background:var(--cyan); font-size:.75rem; } .squad-board-row em { color:#dcecff; font-size:.64rem; font-style:normal; font-weight:900; text-align:right; } .squad-board-row.placeholder { opacity:.42; } .squad-pool-heading { margin-top:44px; } .squad-filter-row { display:flex; gap:7px; margin-bottom:14px; padding-bottom:3px; overflow-x:auto; } .squad-filter-row button { flex:0 0 auto; padding:9px 13px; border:1px solid rgba(255,255,255,.11); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.035); cursor:pointer; font-size:.58rem; font-weight:950; letter-spacing:.06em; } .squad-filter-row button.active, .squad-filter-row button:hover { color:#04101d; border-color:var(--cyan); background:var(--cyan); } .squad-pool-gallery { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } .squad-card { position:relative; min-width:0; display:grid; grid-template-rows:auto 165px auto auto 1fr auto; overflow:hidden; border:1px solid color-mix(in srgb,var(--squad-accent),transparent 46%); border-radius:19px; color:var(--text); background: linear-gradient(165deg,color-mix(in srgb,var(--squad-accent),#07152b 89%),#040b17 60%); box-shadow:0 16px 34px rgba(0,0,0,.26); text-align:left; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .squad-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-top:4px solid var(--squad-accent); background:linear-gradient(125deg,transparent 0 70%,color-mix(in srgb,var(--squad-accent),transparent 89%)); } .squad-card.compact { grid-template-rows:auto 120px auto auto 1fr auto; min-height:300px; } .squad-card.selected { border-color:var(--yellow); box-shadow:0 0 0 2px rgba(255,216,61,.13),0 18px 42px rgba(0,0,0,.38); } .squad-card.captain::after { content:""; position:absolute; pointer-events:none; inset:5px; border:1px solid rgba(255,216,61,.38); border-radius:14px; } .squad-card.disabled { filter:grayscale(.8); opacity:.55; } .squad-card-top { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; min-height:35px; padding:8px 10px; } .squad-card-top > span { color:color-mix(in srgb,var(--squad-accent),white 18%); font-size:.48rem; font-weight:1000; letter-spacing:.1em; } .squad-card-top > b { display:flex; align-items:center; gap:4px; color:var(--yellow); font-size:.72rem; } .squad-card-top .mini-ring { width:12px; height:12px; border-width:3px; } .squad-card-art { position:relative; overflow:hidden; margin:0 8px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:#040b17; } .squad-card-art img { width:100%; height:100%; display:block; object-fit:cover; } .squad-role,.squad-captain-badge,.squad-fatigue { position:absolute; z-index:2; padding:5px 7px; border-radius:6px; font-size:.46rem; font-weight:1000; letter-spacing:.06em; } .squad-role { left:6px; bottom:6px; color:#06101c; background:var(--squad-accent); } .squad-captain-badge { top:6px; left:6px; color:#1a1300; background:var(--yellow); } .squad-fatigue { right:6px; bottom:6px; color:#fff; background:rgba(255,85,125,.86); } .squad-card-copy { padding:10px 11px 5px; } .squad-card-copy h3 { margin:0; overflow:hidden; font-size:.92rem; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } .squad-card-copy small { display:block; margin-top:4px; color:var(--squad-accent); font-size:.53rem; font-weight:900; text-transform:uppercase; } .squad-card-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:5px 9px; } .squad-card-stats span { display:grid; place-items:center; gap:1px; padding:5px 2px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:rgba(255,255,255,.025); } .squad-card-stats small { color:#7891a6; font-size:.4rem; font-weight:1000; } .squad-card-stats b { color:var(--squad-accent); font-size:.82rem; } .squad-card-ability { padding:7px 11px 11px; } .squad-card-ability b { color:#edf8ff; font-size:.62rem; } .squad-card-ability p { margin:4px 0 0; color:#98aec1; font-size:.54rem; line-height:1.38; } .squad-card-footer { display:flex; justify-content:space-between; padding:7px 10px; border-top:1px solid rgba(255,255,255,.055); color:#61788c; font-size:.39rem; font-weight:1000; letter-spacing:.08em; } .squad-stage-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; padding:10px 0 20px; border-bottom:1px solid var(--line); } .squad-stage-heading h2 { margin:0; font-size:clamp(2rem,4.5vw,4rem); font-style:italic; line-height:.95; } .squad-draft-counters { display:flex; gap:9px; } .squad-draft-counters span { min-width:110px; display:grid; gap:2px; padding:10px 15px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); } .squad-draft-counters small { color:var(--muted); font-size:.5rem; font-weight:950; letter-spacing:.12em; } .squad-draft-counters b { color:var(--yellow); font-size:1.1rem; } .squad-draft-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1180px; margin:0 auto 24px; } .squad-offer { display:grid; padding:0; border:0; border-radius:21px; color:inherit; background:transparent; cursor:pointer; transition:transform .2s ease,filter .2s ease; } .squad-offer:hover { transform:translateY(-9px); filter:drop-shadow(0 20px 32px rgba(0,0,0,.34)); } .squad-offer .squad-card { min-height:445px; grid-template-rows:auto 205px auto auto 1fr auto; } .squad-offer-cta { margin:-12px 18px 0; z-index:4; display:flex; justify-content:space-between; padding:11px 14px; border-radius:10px; color:#04101b; background:linear-gradient(90deg,var(--cyan),#abffff); font-size:.65rem; font-weight:1000; box-shadow:0 12px 26px rgba(88,231,255,.2); } .squad-draft-bottom { display:grid; grid-template-columns:1.22fr .78fr; gap:16px; } .squad-draft-bottom > .panel { padding:22px; } .squad-draft-roster { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .squad-draft-slot { min-height:72px; display:grid; place-items:center; align-content:center; gap:3px; border:1px dashed rgba(255,255,255,.14); border-radius:12px; color:#5e7588; background:rgba(255,255,255,.018); } .squad-draft-slot > span:first-child:not(:last-child) { color:var(--cyan); } .squad-draft-slot > small { font-size:.47rem; font-weight:950; letter-spacing:.1em; } .squad-draft-slot.filled { grid-template-columns:58px 1fr; place-items:stretch; align-items:center; overflow:hidden; border-style:solid; border-color:rgba(88,231,255,.18); color:inherit; } .squad-draft-slot.filled img { width:58px; height:100%; object-fit:cover; } .squad-draft-slot.filled > span { min-width:0; display:grid; padding:8px; } .squad-draft-slot.filled small { color:var(--cyan); font-size:.43rem; font-weight:950; } .squad-draft-slot.filled b { overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; } .squad-draft-slot.filled em { color:var(--muted); font-size:.48rem; font-style:normal; } .squad-synergy-total { display:grid; gap:4px; margin-bottom:10px; padding:11px; border:1px solid rgba(255,216,61,.16); border-radius:11px; background:rgba(255,216,61,.045); } .squad-synergy-total span { color:var(--yellow); font-size:.5rem; font-weight:1000; letter-spacing:.1em; } .squad-synergy-total b { color:#e9f7ff; font-size:.68rem; } .squad-synergy-list { display:grid; gap:6px; } .squad-synergy-list > div { display:grid; grid-template-columns:8px 1fr; gap:8px; padding:7px; border:1px solid rgba(255,255,255,.06); border-radius:9px; } .squad-synergy-list i { width:7px; height:7px; margin-top:4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .squad-synergy-list span { display:grid; gap:2px; } .squad-synergy-list b { font-size:.62rem; } .squad-synergy-list small { color:var(--muted); font-size:.52rem; } .squad-draft-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; } .squad-draft-actions button { padding:12px 8px; font-size:.62rem; } .squad-lineup-layout { display:grid; grid-template-columns:minmax(0,1fr) 410px; gap:18px; align-items:start; } .squad-lineup-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; } .squad-lineup-grid.reserve-grid { grid-template-columns:repeat(2,minmax(0,260px)); } .squad-lineup-slot { position:relative; padding:4px; border:1px solid transparent; border-radius:20px; } .squad-lineup-slot.selected { border-color:var(--yellow); background:rgba(255,216,61,.06); } .squad-lineup-slot > button:first-child { width:100%; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; } .squad-captain-button { width:calc(100% - 12px); margin:-4px 6px 0; padding:8px; border:1px solid rgba(255,216,61,.18); border-radius:0 0 10px 10px; color:#9fb4c5; background:#071326; cursor:pointer; font-size:.48rem; font-weight:1000; } .squad-captain-button.active { color:#171000; background:var(--yellow); } .squad-lineup-slot.reserve > span { display:block; margin:-5px 6px 0; padding:7px; border-radius:0 0 9px 9px; color:var(--muted); background:#071326; font-size:.45rem; font-weight:950; text-align:center; } .squad-lineup-side { position:sticky; top:94px; display:grid; gap:14px; } .squad-lineup-side > .panel { padding:20px; } .squad-bracket { display:grid; grid-template-columns:1.25fr 1fr .8fr; gap:7px; align-items:center; } .squad-bracket-column { display:grid; gap:6px; } .squad-bracket-column > span { color:var(--cyan); font-size:.45rem; font-weight:1000; letter-spacing:.1em; text-align:center; } .squad-bracket-match { display:grid; grid-template-columns:1fr; gap:2px; padding:6px; border:1px solid rgba(255,255,255,.065); border-radius:8px; background:rgba(255,255,255,.025); } .squad-bracket-match.user { border-color:rgba(255,216,61,.22); } .squad-bracket-match b { overflow:hidden; padding:3px 5px; border-radius:4px; color:#8fa7ba; font-size:.45rem; text-overflow:ellipsis; white-space:nowrap; } .squad-bracket-match b.winner { color:#06101b; background:var(--green); } .squad-bracket-match i { display:none; } .intermission-bracket { max-width:900px; margin:25px auto 0; } .squad-match-scoreboard { display:grid; grid-template-columns:1fr 1.5fr 1fr; padding:0; overflow:hidden; margin-bottom:14px; } .squad-match-scoreboard > div { min-height:90px; display:grid; place-items:center; align-content:center; gap:3px; border-right:1px solid var(--line); } .squad-match-scoreboard > div:last-child { border-right:0; } .squad-match-scoreboard span,.squad-match-scoreboard small { color:var(--muted); font-size:.56rem; font-weight:950; letter-spacing:.1em; } .squad-match-scoreboard b { color:var(--cyan); font-size:2rem; } .squad-match-scoreboard > div:last-child b { color:var(--red); } .squad-match-scoreboard em { color:var(--yellow); font-size:.57rem; font-style:normal; font-weight:950; } .squad-match-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:15px; align-items:start; } .squad-challenge-card { min-height:180px; padding:27px; background: linear-gradient(120deg,rgba(25,119,255,.14),rgba(5,14,30,.95)), repeating-linear-gradient(125deg,transparent 0 38px,rgba(88,231,255,.05) 39px 41px); } .squad-challenge-card h2 { margin-bottom:8px; font-size:clamp(2rem,4vw,3.5rem); font-style:italic; } .squad-challenge-card > p:not(.eyebrow) { color:#b6cbdd; } .squad-weight-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; } .squad-weight-row span { display:flex; gap:8px; padding:7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.025); font-size:.6rem; } .squad-weight-row span.primary { color:#07101c; border-color:var(--yellow); background:var(--yellow); } .squad-scout-line { margin:8px 0 20px; padding:9px 12px; border-left:4px solid var(--cyan); color:#9eb6ca; background:rgba(88,231,255,.045); font-size:.62rem; } .squad-scout-line strong { color:var(--yellow); } .squad-match-active { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .squad-match-card { padding:0; border:0; border-radius:19px; color:inherit; background:transparent; cursor:pointer; } .squad-match-card:hover:not(:disabled) { transform:translateY(-5px); } .squad-match-card.selected { filter:drop-shadow(0 0 16px rgba(255,216,61,.25)); } .squad-strategy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .squad-strategy { min-height:94px; display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:center; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:inherit; background:rgba(255,255,255,.03); cursor:pointer; text-align:left; } .squad-strategy:hover,.squad-strategy.selected { border-color:var(--yellow); background:rgba(255,216,61,.07); } .squad-strategy > i { display:grid; place-items:center; width:37px; height:37px; border-radius:10px; color:#04101b; background:var(--cyan); font-size:1.2rem; font-style:normal; font-weight:1000; } .squad-strategy > span { display:grid; gap:3px; } .squad-strategy b { font-size:.72rem; } .squad-strategy small { color:var(--muted); font-size:.52rem; } .squad-strategy em { grid-column:1 / -1; color:var(--cyan); font-size:.51rem; font-style:normal; font-weight:950; } .squad-match-command { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:12px; padding:13px; } .squad-selected-signal { min-height:58px; display:flex; align-items:center; gap:10px; } .squad-selected-signal img { width:56px; height:56px; border-radius:10px; object-fit:cover; } .squad-selected-signal span { display:grid; gap:2px; } .squad-selected-signal small { color:var(--cyan); font-size:.48rem; font-weight:950; } .squad-selected-signal b { font-size:.78rem; } .squad-selected-signal em { color:var(--muted); font-size:.54rem; font-style:normal; } .squad-match-side { position:sticky; top:94px; display:grid; gap:12px; } .squad-match-side > .panel { padding:18px; } .squad-match-reserve { display:grid; gap:7px; margin-top:10px; } .squad-reserve-card { display:grid; grid-template-columns:58px 1fr auto; gap:8px; align-items:center; padding:6px; border:1px solid rgba(255,255,255,.08); border-radius:11px; color:inherit; background:rgba(255,255,255,.025); cursor:pointer; text-align:left; } .squad-reserve-card:hover,.squad-reserve-card.selected { border-color:var(--yellow); } .squad-reserve-card img { width:58px; height:58px; border-radius:8px; object-fit:cover; } .squad-reserve-card span { min-width:0; display:grid; gap:3px; } .squad-reserve-card b { overflow:hidden; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; } .squad-reserve-card small { color:var(--muted); font-size:.48rem; } .squad-reserve-card em { max-width:70px; color:var(--cyan); font-size:.43rem; font-style:normal; font-weight:950; text-align:right; } .squad-mini-rules { display:grid; gap:7px; } .squad-mini-rules span { display:grid; gap:2px; padding:8px; border:1px solid rgba(255,255,255,.06); border-radius:8px; } .squad-mini-rules b { font-size:.62rem; } .squad-mini-rules small { color:var(--muted); font-size:.5rem; line-height:1.4; } .squad-round-resolution { display:none; margin-top:12px; padding:17px; } .squad-round-resolution.active { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; } .squad-resolution-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:9px; } .squad-resolution-heading span { font-size:.62rem; font-weight:1000; letter-spacing:.08em; } .squad-resolution-heading span.win { color:var(--green); } .squad-resolution-heading span.loss { color:var(--red); } .squad-resolution-heading b { color:var(--yellow); font-size:1.25rem; } .squad-resolution-duel { display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; gap:8px; } .squad-resolution-duel > div { display:grid; grid-template-columns:52px 1fr; align-items:center; gap:8px; } .squad-resolution-duel img { width:52px; height:52px; border-radius:9px; } .squad-resolution-duel span { min-width:0; display:grid; gap:2px; } .squad-resolution-duel small { color:var(--cyan); font-size:.43rem; font-weight:950; } .squad-resolution-duel b { overflow:hidden; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; } .squad-resolution-duel em { color:var(--muted); font-size:.46rem; font-style:normal; } .squad-resolution-duel > i { color:var(--yellow); font-size:.62rem; font-style:normal; font-weight:1000; text-align:center; } .squad-intermission-card { max-width:1080px; margin:30px auto; padding:clamp(25px,4vw,48px); text-align:center; } .squad-intermission-card h2 { font-size:clamp(2.2rem,5vw,4.5rem); font-style:italic; } .squad-intermission-card > p:not(.eyebrow) { color:#b9cede; } .squad-upgrade-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0; } .squad-upgrade { min-height:170px; display:grid; place-items:center; align-content:center; gap:9px; padding:20px; border:1px solid rgba(88,231,255,.16); border-radius:17px; color:inherit; background:linear-gradient(155deg,rgba(88,231,255,.08),rgba(255,255,255,.025)); cursor:pointer; } .squad-upgrade:hover { transform:translateY(-5px); border-color:var(--yellow); } .squad-upgrade > i { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; color:#04101b; background:var(--yellow); font-size:1.5rem; font-style:normal; font-weight:1000; } .squad-upgrade span { display:grid; gap:5px; } .squad-upgrade b { font-size:.86rem; } .squad-upgrade small { color:var(--muted); font-size:.58rem; line-height:1.45; } .squad-upgrade em { color:var(--cyan); font-size:.55rem; font-style:normal; font-weight:1000; } .squad-result-card { max-width:820px; } .squad-result-record { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:20px 0; } .squad-result-record span { display:grid; place-items:center; gap:4px; padding:12px; border:1px solid rgba(255,255,255,.075); border-radius:11px; } .squad-result-record small { color:var(--muted); font-size:.48rem; font-weight:950; } .squad-result-record b { color:var(--cyan); font-size:1.25rem; } .squad-final-score { display:flex; justify-content:center; align-items:center; gap:14px; margin:10px 0 20px; } .squad-final-score span { color:var(--muted); font-size:.6rem; font-weight:950; letter-spacing:.12em; } .squad-final-score b { color:var(--yellow); font-size:2rem; } @media (max-width:1260px) { .squad-pool-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); } .squad-lineup-layout { grid-template-columns:1fr; } .squad-lineup-side { position:static; grid-template-columns:.75fr 1.25fr; } .squad-match-layout { grid-template-columns:1fr; } .squad-match-side { position:static; grid-template-columns:1fr 1fr; } } @media (max-width:1050px) { .squad-setup-hero { grid-template-columns:1fr; } .squad-start-panel { max-width:680px; } .squad-setup-grid { grid-template-columns:1fr; } .squad-pool-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); } .squad-draft-bottom { grid-template-columns:1fr; } .squad-match-active,.squad-lineup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:800px) { .squad-stat-grid { grid-template-columns:repeat(2,1fr); } .squad-pool-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } .squad-draft-offers { grid-template-columns:1fr; max-width:430px; } .squad-offer .squad-card { min-height:420px; } .squad-stage-heading { align-items:start; flex-direction:column; } .squad-lineup-side { grid-template-columns:1fr; } .squad-strategy-grid { grid-template-columns:1fr; } .squad-match-side { grid-template-columns:1fr; } .squad-upgrade-options { grid-template-columns:1fr; } } @media (max-width:620px) { .squad-pool-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; } .squad-pool-gallery .squad-card { flex:0 0 210px; scroll-snap-align:start; } .squad-rule-strip { display:grid; grid-template-columns:1fr 1fr; } .squad-universe-ribbon { display:none; } .squad-board-row { grid-template-columns:24px 1fr 30px 60px; } .squad-board-row small { display:none; } .squad-draft-counters { width:100%; } .squad-draft-counters span { flex:1; min-width:0; } .squad-draft-roster { grid-template-columns:1fr 1fr; } .squad-draft-actions { grid-template-columns:1fr; } .squad-lineup-grid,.squad-match-active { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; } .squad-lineup-slot,.squad-match-card { flex:0 0 210px; scroll-snap-align:start; } .squad-lineup-grid.reserve-grid { display:grid; grid-template-columns:1fr 1fr; } .squad-lineup-grid.reserve-grid .squad-lineup-slot { min-width:0; } .squad-bracket { grid-template-columns:1fr; } .squad-bracket-column:not(:first-child) { margin-top:8px; } .squad-match-scoreboard { grid-template-columns:1fr 1fr; } .squad-match-scoreboard > div:nth-child(2) { grid-column:1 / -1; grid-row:1; border-bottom:1px solid var(--line); } .squad-match-scoreboard > div:first-child,.squad-match-scoreboard > div:last-child { grid-row:2; } .squad-match-command { align-items:stretch; flex-direction:column; } .squad-match-command button { width:100%; } .squad-round-resolution.active { grid-template-columns:1fr; } .squad-resolution-duel { grid-template-columns:1fr; } .squad-resolution-duel > i { transform:rotate(90deg); } .squad-result-record { grid-template-columns:1fr 1fr; } } @media (max-width:430px) { .squad-setup-hero { padding:22px 17px; } .squad-setup-copy h2 { font-size:2.25rem; } .squad-rule-strip { grid-template-columns:1fr; } .squad-lineup-grid.reserve-grid { grid-template-columns:1fr; } } /* ============================================================ BUILD 0.2C · RECONNECT STYLE UPGRADE Original day/night world-adventure shell ============================================================ */ :root { --bg: #020713; --bg-2: #071a3e; --panel: rgba(7, 23, 55, .86); --panel-strong: #0a2a62; --line: rgba(117, 221, 255, .25); --text: #fbfdff; --muted: #a7bed5; --cyan: #55e8ff; --blue: #176bff; --blue-deep: #083bba; --yellow: #ffd32b; --orange: #ff8b28; --sunset: #ff5f44; --night: #33277f; --green: #69f2b1; --red: #ff557d; --shadow: 0 30px 90px rgba(0, 0, 0, .46); --radius: 22px; --display-font: "Arial Black", "Trebuchet MS", "Segoe UI Black", Impact, sans-serif; } body.reconnect-style { background: radial-gradient(circle at 11% 8%, rgba(73, 218, 255, .22), transparent 26%), radial-gradient(circle at 88% 14%, rgba(255, 155, 49, .16), transparent 22%), radial-gradient(circle at 80% 78%, rgba(61, 45, 150, .25), transparent 27%), linear-gradient(152deg, #020611 0%, #061a3a 45%, #030713 100%); } body.reconnect-style::before { opacity: .36; background-image: linear-gradient(rgba(82, 229, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 229, 255, .045) 1px, transparent 1px), repeating-linear-gradient(128deg, transparent 0 110px, rgba(255, 211, 43, .04) 111px 114px); background-size: 54px 54px, 54px 54px, auto; mask-image: linear-gradient(to bottom, black, transparent 93%); } body.reconnect-style::after { opacity: .22; background: linear-gradient(112deg, transparent 0 54%, rgba(85, 232, 255, .15) 54.3% 54.6%, transparent 55%), linear-gradient(112deg, transparent 0 63%, rgba(255, 211, 43, .13) 63.2% 63.55%, transparent 64%), radial-gradient(ellipse at 88% 36%, rgba(255, 211, 43, .18), transparent 20%); animation: worldShellDrift 16s linear infinite; } .reconnect-style h1, .reconnect-style h2, .reconnect-style h3, .reconnect-style .brand-text b, .reconnect-style .game-status, .reconnect-style .status-tag { font-family: var(--display-font); } .reconnect-style h1, .reconnect-style .game-header h1, .reconnect-style .page-heading h1 { text-transform: uppercase; font-style: italic; letter-spacing: -.07em; text-shadow: 0 4px 0 rgba(0, 43, 130, .9), 0 0 28px rgba(85, 232, 255, .2); } .topbar { height: 82px; background: linear-gradient(90deg, rgba(3, 13, 34, .96), rgba(7, 31, 71, .9) 52%, rgba(3, 13, 34, .96)); border-bottom: 0; } .topbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background: linear-gradient(116deg, transparent 0 12%, rgba(85, 232, 255, .08) 12.2% 12.5%, transparent 12.8% 73%, rgba(255, 211, 43, .08) 73.2% 73.6%, transparent 74%); } .topbar::after { bottom: 0; height: 4px; opacity: 1; background: linear-gradient(90deg, transparent 2%, var(--cyan) 15%, var(--blue) 43%, var(--yellow) 72%, var(--orange) 87%, transparent 98%); } .brand { position: relative; min-width: 240px; } .brand-mark { position: relative; width: 43px; height: 43px; border-width: 7px; background: radial-gradient(circle, transparent 43%, rgba(255,255,255,.14) 45% 52%, transparent 54%); animation: brandRingPulse 3.4s ease-in-out infinite; } .brand-text b { font-size: .94rem; font-style: italic; letter-spacing: -.055em; } .brand-text b em { color: var(--yellow); font-style: inherit; text-shadow: 3px 3px 0 var(--blue-deep); } .brand-text small { font-size: .49rem; color: #b6ecff; } .nav-button { min-width: 92px; height: 58%; padding: 0 17px; border: 1px solid transparent; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); font-family: var(--display-font); font-size: .72rem; font-style: italic; letter-spacing: -.02em; text-transform: uppercase; } .nav-button:hover, .nav-button.active { border-color: rgba(85, 232, 255, .26); background: linear-gradient(110deg, rgba(23, 107, 255, .22), rgba(85, 232, 255, .08)); } .nav-button.active::after { left: 10px; right: 10px; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--yellow)); } .signal-chip { padding: 7px 10px; border: 1px solid rgba(105,242,177,.16); border-radius: 999px; background: rgba(105,242,177,.055); } main { width: min(1500px, calc(100% - 40px)); } .view { padding-top: 42px; } .panel { border-radius: 20px 6px 20px 6px; border: 1px solid rgba(118, 219, 255, .2); background: linear-gradient(145deg, rgba(13, 48, 98, .82), rgba(4, 15, 36, .94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); } .panel::before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 82px; height: 5px; background: linear-gradient(90deg, var(--yellow), var(--cyan)); box-shadow: 0 0 18px rgba(85, 232, 255, .35); } .panel > * { position: relative; z-index: 1; } .primary-button, .secondary-button, .ghost-button, .back-button { border-radius: 10px 2px 10px 2px; text-transform: uppercase; font-family: var(--display-font); font-style: italic; } .primary-button { color: #031026; background: linear-gradient(125deg, #f8ffff 0 8%, var(--cyan) 9% 52%, #55aaff 53% 67%, var(--yellow) 68% 100%); box-shadow: 0 12px 32px rgba(23, 107, 255, .24), inset 0 -4px 0 rgba(0, 50, 145, .28); } .primary-button:hover:not(:disabled) { transform: translateY(-3px) skewX(-1deg); box-shadow: 0 18px 42px rgba(85, 232, 255, .32); } .secondary-button, .back-button { background: linear-gradient(125deg, rgba(11, 45, 94, .88), rgba(5, 17, 40, .92)); } .eyebrow { color: var(--yellow); text-shadow: 0 0 14px rgba(255, 211, 43, .22); } .unleashed-hero { min-height: 590px; margin-top: -42px; padding-top: 42px; border-bottom: 0; overflow: visible; } .unleashed-hero::before { content: ""; position: absolute; inset: 6% -12vw 4%; z-index: -1; background: linear-gradient(90deg, rgba(4,18,49,.95) 0 50%, rgba(30,22,81,.78) 50% 100%); clip-path: polygon(0 10%, 100% 0, 95% 88%, 7% 100%); border-bottom: 1px solid rgba(255, 211, 43, .18); } .unleashed-hero::after { content: ""; position: absolute; z-index: -1; inset: 7% -10vw 5%; opacity: .3; background: radial-gradient(circle at 18% 28%, rgba(85,232,255,.45), transparent 25%), radial-gradient(circle at 81% 30%, rgba(255,112,52,.34), transparent 23%), repeating-linear-gradient(120deg, transparent 0 46px, rgba(255,255,255,.07) 47px 50px); clip-path: polygon(0 10%, 100% 0, 95% 88%, 7% 100%); } .hero-speed-stripes { position: absolute; inset: 5% -10vw 7%; pointer-events: none; overflow: hidden; } .hero-speed-stripes::before, .hero-speed-stripes::after { content: ""; position: absolute; width: 52%; height: 4px; left: -7%; top: 24%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 28px 0 rgba(85,232,255,.18), 0 56px 0 rgba(85,232,255,.09); transform: rotate(-5deg); animation: speedStripe 4.4s ease-in-out infinite; } .hero-speed-stripes::after { left: auto; right: -12%; top: 68%; background: linear-gradient(90deg, transparent, var(--yellow), transparent); box-shadow: 0 24px 0 rgba(255,211,43,.16), 0 48px 0 rgba(255,139,40,.08); animation-delay: -2s; } .hero-copy { padding-left: clamp(0px, 2vw, 24px); } .hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #d9f7ff; font-family: var(--display-font); font-size: .66rem; font-style: italic; letter-spacing: .12em; } .hero-kicker span { color: var(--yellow); font-size: 1rem; } .unleashed-hero h1 { max-width: 790px; margin-bottom: 24px; } .unleashed-hero h1 span { display: block; font-size: .53em; color: white; letter-spacing: -.045em; } .unleashed-hero h1 strong { display: block; color: var(--yellow); font-size: 1.12em; text-shadow: 5px 6px 0 var(--blue), 9px 10px 0 rgba(0, 26, 94, .62), 0 0 34px rgba(255, 211, 43, .22); -webkit-text-stroke: 1px rgba(255,255,255,.76); } .hero-build-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 29px; } .hero-build-row .version-badge { margin-top: 0; } .hero-volume-badge { padding: 8px 12px; border: 1px solid rgba(255,211,43,.23); border-radius: 6px 2px 6px 2px; color: var(--yellow); background: rgba(255,211,43,.055); font-size: .63rem; font-weight: 900; letter-spacing: .12em; } .unleashed-world-visual { min-height: 520px; } .reconnect-world { position: relative; z-index: 3; width: min(490px, 45vw); max-width: 100%; filter: drop-shadow(0 35px 70px rgba(0,0,0,.48)) drop-shadow(0 0 35px rgba(85,232,255,.16)); animation: worldFloat 7s ease-in-out infinite; } .world-halo { position: absolute; z-index: 1; width: 74%; aspect-ratio: 1; border: 2px solid rgba(85,232,255,.16); border-radius: 50%; animation: spin 18s linear infinite; } .world-halo::before, .world-halo::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); } .world-halo::before { left: 12%; top: 20%; } .world-halo::after { right: 11%; bottom: 23%; background: var(--yellow); box-shadow: 0 0 20px var(--yellow); } .halo-two { width: 92%; border-color: rgba(255,211,43,.1); animation-duration: 27s; animation-direction: reverse; } .world-signal-card { position: absolute; z-index: 5; right: 4%; bottom: 14%; min-width: 160px; padding: 13px 16px; border-left: 5px solid var(--green); background: rgba(2, 12, 31, .88); box-shadow: 0 15px 38px rgba(0,0,0,.32); backdrop-filter: blur(10px); transform: skewX(-5deg); } .world-signal-card > * { display: block; transform: skewX(5deg); } .world-signal-card small { color: var(--muted); font-size: .55rem; letter-spacing: .14em; } .world-signal-card b { margin: 4px 0; color: var(--green); font-family: var(--display-font); font-style: italic; font-size: 1.45rem; } .world-signal-card span { color: #d1e3f1; font-size: .64rem; font-weight: 800; } .world-signal-ribbon { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(8, minmax(110px, 1fr)); margin: -20px 0 28px; border: 1px solid rgba(103, 216, 255, .19); border-radius: 14px 3px 14px 3px; overflow: hidden; background: rgba(3, 15, 38, .92); box-shadow: 0 18px 60px rgba(0,0,0,.3); } .world-signal-ribbon > span { position: relative; min-height: 80px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; align-content: center; align-items: center; gap: 0 6px; padding: 12px 9px; border-right: 1px solid rgba(255,255,255,.065); overflow: hidden; } .world-signal-ribbon > span::after { content: ""; position: absolute; left: 0; right: 45%; bottom: 0; height: 3px; background: var(--world-accent, var(--cyan)); box-shadow: 0 0 15px var(--world-accent, var(--cyan)); } .world-signal-ribbon i { grid-row: 1 / 3; font-style: normal; font-size: 1.35rem; } .world-signal-ribbon b { align-self: end; font-family: var(--display-font); font-size: .62rem; font-style: italic; } .world-signal-ribbon small { align-self: start; color: var(--muted); font-size: .48rem; letter-spacing: .12em; } .world-signal-ribbon [data-world="sonic"] { --world-accent:#55e8ff; } .world-signal-ribbon [data-world="football"] { --world-accent:#63ef9a; } .world-signal-ribbon [data-world="chess"] { --world-accent:#f7f7ff; } .world-signal-ribbon [data-world="gaming"] { --world-accent:#ab7bff; } .world-signal-ribbon [data-world="souls"] { --world-accent:#ff7c34; } .world-signal-ribbon [data-world="cars"] { --world-accent:#ff3e4e; } .world-signal-ribbon [data-world="zootopia"] { --world-accent:#8f9cff; } .world-signal-ribbon [data-world="spongebob"] { --world-accent:#ffe849; } .dashboard-grid .panel, .game-card { backdrop-filter: blur(13px); } .game-card { border-radius: 18px 4px 18px 4px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--cyan)), #07162f 72%), #06142e 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .game-card::before { background: linear-gradient(150deg, rgba(255,255,255,.035), transparent 30%), linear-gradient(145deg, transparent 30%, rgba(1,8,18,.9)); } .game-card::after { width: 280px; height: 280px; border-width: 24px; opacity: .21; transform: rotate(-18deg); } .game-card:hover { transform: translateY(-7px) scale(1.012); border-color: color-mix(in srgb, var(--accent), white 24%); box-shadow: 0 27px 60px rgba(0,0,0,.4), 0 0 25px color-mix(in srgb, var(--accent), transparent 78%); } .game-card .game-number { clip-path: polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); background: color-mix(in srgb, var(--accent), transparent 83%); border-left: 3px solid var(--accent); } .game-card h3 { font-family: var(--display-font); font-style: italic; text-transform: uppercase; } .page-heading { position: relative; min-height: 250px; padding: 28px 4%; margin-left: -2%; margin-right: -2%; border-bottom: 0; overflow: hidden; background: radial-gradient(circle at 82% 30%, rgba(255,211,43,.13), transparent 23%), linear-gradient(112deg, rgba(9,41,89,.86), rgba(4,15,36,.55)); clip-path: polygon(0 8%,100% 0,96% 86%,4% 100%); } .page-heading::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background: repeating-linear-gradient(121deg, transparent 0 48px, rgba(255,255,255,.08) 49px 52px); } .page-heading > * { position: relative; z-index: 1; } .page-icon { border-radius: 50%; background: rgba(3,15,38,.55); } .music-page-heading { background: radial-gradient(circle at 82% 30%, rgba(255,211,43,.22), transparent 23%), radial-gradient(circle at 11% 72%, rgba(85,232,255,.2), transparent 28%), linear-gradient(112deg, rgba(14,53,111,.93), rgba(25,16,72,.78)); } .page-icon.music { display: grid; align-content: center; gap: 2px; border-color: var(--yellow); color: var(--yellow); transform: rotate(-8deg); } .page-icon.music span { line-height: .8; } .page-icon.music small { font-size: .7rem; letter-spacing: .08em; } .music-network-bar { display: grid; grid-template-columns: repeat(3, 150px) 1fr; gap: 1px; margin: -12px 0 18px; padding: 0; overflow: hidden; } .music-network-bar > div { min-height: 85px; display: grid; align-content: center; gap: 3px; padding: 15px 19px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); } .music-network-bar small { color: var(--muted); font-size: .55rem; font-weight: 900; letter-spacing: .12em; } .music-network-bar b { color: var(--yellow); font-family: var(--display-font); font-style: italic; font-size: 1.45rem; } .music-network-bar .music-format-line b { color: var(--cyan); font-size: .92rem; letter-spacing: .04em; } .music-category-filters { display: flex; gap: 7px; padding: 6px 0 18px; overflow-x: auto; scrollbar-width: thin; } .music-filter-button { flex: 0 0 auto; min-width: 125px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 5px; padding: 10px 11px; border: 1px solid rgba(109,217,255,.16); border-radius: 10px 2px 10px 2px; color: #b8cbe0; background: rgba(7,28,64,.68); cursor: pointer; text-align: left; } .music-filter-button span { font-size: 1rem; } .music-filter-button b { font-family: var(--display-font); font-size: .62rem; font-style: italic; text-transform: uppercase; } .music-filter-button small { min-width: 22px; padding: 3px 5px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.055); text-align: center; } .music-filter-button:hover, .music-filter-button.active { color: white; border-color: rgba(85,232,255,.48); background: linear-gradient(120deg, rgba(23,107,255,.28), rgba(85,232,255,.08)); box-shadow: 0 8px 25px rgba(0,0,0,.2); } .music-filter-button.active { border-bottom-color: var(--yellow); } .upgraded-jukebox { grid-template-columns: 410px minmax(0, 1fr); } .now-playing { position: sticky; top: 108px; height: fit-content; padding: 29px; background: radial-gradient(circle at 50% 15%, rgba(85,232,255,.17), transparent 35%), linear-gradient(145deg, rgba(8,45,95,.94), rgba(4,13,33,.98)); } .album-disc { position: relative; width: 235px; background: repeating-radial-gradient(circle, #051126 0 4px, #133a6e 5px 6px), #06152f; border: 6px solid var(--yellow); box-shadow: inset 0 0 0 4px rgba(0,0,0,.6), 0 0 0 2px #fff4a0, 0 0 55px rgba(85,232,255,.23); } .album-disc::before { content: ""; position: absolute; inset: -21px; border: 2px solid rgba(85,232,255,.16); border-radius: 50%; border-left-color: transparent; border-right-color: var(--yellow); } .album-disc > div { background: linear-gradient(135deg, var(--yellow), var(--orange)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); } .now-source { display: inline-flex; margin: 3px 0 18px; padding: 5px 9px; border-left: 3px solid var(--cyan); color: #afc8dc; background: rgba(85,232,255,.055); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .play-button { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #071126; box-shadow: 0 0 25px rgba(255,211,43,.25); } .volume-note { margin: 12px 0 0; color: #7f9bb4; font-size: .68rem; line-height: 1.5; } .music-library-column { display: grid; gap: 16px; align-content: start; } .track-list { display: grid; gap: 9px; } .track-item { grid-template-columns: 45px 34px minmax(0,1fr) auto; gap: 12px; min-height: 85px; padding: 13px 15px; border-radius: 13px 3px 13px 3px; border-left: 4px solid var(--track-accent, var(--cyan)); background: linear-gradient(105deg, color-mix(in srgb,var(--track-accent),transparent 91%), rgba(7,28,63,.76)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } .track-item:hover, .track-item.active { border-color: color-mix(in srgb,var(--track-accent),white 18%); border-left-color: var(--track-accent); background: linear-gradient(105deg, color-mix(in srgb,var(--track-accent),transparent 82%), rgba(10,42,89,.9)); transform: translateX(4px); } .track-item.active { box-shadow: 0 0 28px color-mix(in srgb,var(--track-accent),transparent 82%); } .track-index { color: #7191ad; font-family: var(--display-font); font-style: italic; } .track-signal-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--track-accent),transparent 48%); border-radius: 50%; color: var(--track-accent); background: color-mix(in srgb,var(--track-accent),transparent 91%); } .track-copy { display: grid; gap: 2px; } .track-copy b { font-family: var(--display-font); font-size: .86rem; font-style: italic; } .track-copy small { color: #a7bfd4; } .track-copy em { color: #647f9a; font-size: .57rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .track-badge { border-radius: 7px 2px 7px 2px; } .empty-music-channel { min-height: 230px; display: grid; place-items: center; align-content: center; padding: 30px; text-align: center; } .empty-music-channel > span { color: var(--cyan); font-size: 3rem; } .empty-music-channel h3 { margin: 10px 0 6px; text-transform: uppercase; font-style: italic; } .empty-music-channel p { max-width: 500px; color: var(--muted); } .music-import-guide { display: grid; grid-template-columns: 85px 1fr; align-items: center; gap: 19px; padding: 22px; border-style: dashed; } .music-import-icon { width: 75px; height: 75px; display: grid; place-items: center; border: 3px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-family: var(--display-font); font-size: 1.25rem; transform: rotate(-8deg); box-shadow: 0 0 25px rgba(255,211,43,.13); } .music-import-guide h2 { margin-bottom: 6px; font-size: 1.25rem; } .music-import-guide p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.55; } footer { position: relative; border-top: 0; } footer::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), var(--yellow), transparent); } @keyframes worldShellDrift { from { transform: translate3d(-1%,0,0) rotate(-2deg); } 50% { transform: translate3d(1%,.5%,0) rotate(-1.5deg); } to { transform: translate3d(-1%,0,0) rotate(-2deg); } } @keyframes brandRingPulse { 0%,100% { box-shadow: inset 0 0 0 3px #7a5b00, 0 0 14px rgba(255,216,61,.18); } 50% { box-shadow: inset 0 0 0 3px #7a5b00, 0 0 29px rgba(255,216,61,.42); } } @keyframes speedStripe { 0%,100% { transform: translateX(-3%) rotate(-5deg); opacity:.35; } 50% { transform: translateX(10%) rotate(-5deg); opacity:.8; } } @keyframes worldFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-13px) rotate(1deg); } } @media (max-width: 1250px) { .world-signal-ribbon { grid-template-columns: repeat(4, 1fr); } .world-signal-ribbon > span:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.065); } } @media (max-width: 1050px) { .brand { min-width: auto; } .brand-text small { display: none; } .unleashed-hero { grid-template-columns: 1fr; padding-bottom: 25px; } .unleashed-world-visual { min-height: 410px; } .reconnect-world { width: min(470px, 76vw); } .upgraded-jukebox { grid-template-columns: 1fr; } .now-playing { position: relative; top: 0; } } @media (max-width: 820px) { .topbar { height: auto; min-height: 74px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; } .topnav { order: 3; width: 100%; height: 46px; overflow-x: auto; justify-content: flex-start; } .nav-button { min-width: 100px; height: 40px; } .unleashed-hero { margin-top: -28px; padding-top: 28px; } .world-signal-ribbon { grid-template-columns: repeat(2, 1fr); } .world-signal-ribbon > span { border-bottom: 1px solid rgba(255,255,255,.065); } .music-network-bar { grid-template-columns: repeat(2, 1fr); } .music-network-bar .music-format-line { grid-column: 1 / -1; } } @media (max-width: 600px) { main { width: min(100% - 22px, 1500px); } .hero-copy { padding: 0 8px; } .unleashed-hero h1 strong { text-shadow: 3px 4px 0 var(--blue), 6px 7px 0 rgba(0,26,94,.62); } .unleashed-world-visual { min-height: 335px; } .world-signal-card { right: 0; bottom: 5%; min-width: 135px; } .world-signal-ribbon > span { min-height: 69px; } .music-network-bar { grid-template-columns: 1fr 1fr; } .music-network-bar > div { min-height: 70px; } .music-network-bar .music-format-line { grid-column: 1 / -1; } .track-item { grid-template-columns: 35px 29px minmax(0,1fr); } .track-badge { grid-column: 3; justify-self: start; } .music-import-guide { grid-template-columns: 1fr; text-align: center; } .music-import-icon { margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .reconnect-world, .world-halo, .hero-speed-stripes::before, .hero-speed-stripes::after, body.reconnect-style::after, .brand-mark { animation: none !important; } } /* Mobile overflow guard for the decorative world shell. */ @media (max-width: 600px) { .unleashed-hero { overflow: hidden; } .hero-speed-stripes { inset-left: 0; left: 0; right: 0; } .world-halo { max-width: calc(100vw - 26px); } } /* ============================================================ BUILD 0.2F · CHATTER CHESS CLEAN BOARD REFRESH ============================================================ */ #view-chess { --chess-light: #eeeed2; --chess-dark: #769656; --chess-last: #f6f669; --chess-selected: #f7ec5f; --chess-frame: #262522; --chess-panel: #262522; } #view-chess[data-board-theme="blue"] { --chess-light: #dce7ef; --chess-dark: #5b83a6; --chess-last: #f2e767; --chess-selected: #ffed65; } #view-chess[data-board-theme="red"] { --chess-light: #f1ddd0; --chess-dark: #b65a57; --chess-last: #f4df68; --chess-selected: #ffea68; } #view-chess[data-board-theme="pink"] { --chess-light: #f5e1eb; --chess-dark: #c4779d; --chess-last: #f4e26d; --chess-selected: #ffea72; } #view-chess[data-board-theme="slate"] { --chess-light: #d7d9dc; --chess-dark: #68717b; --chess-last: #e6df69; --chess-selected: #f4e96a; } #view-chess .chess-layout { grid-template-columns: minmax(0, 720px) minmax(300px, 390px); gap: 26px; max-width: 1160px; margin-inline: auto; } #view-chess .tactics-layout { grid-template-columns: minmax(0, 720px) minmax(300px, 390px); gap: 26px; max-width: 1160px; margin-inline: auto; } #view-chess .chess-board-column, #view-chess .tactics-board-column { width: min(100%, 720px); min-width: 0; margin-inline: auto; } #view-chess .chess-board { container-type: inline-size; width: 100%; max-width: 720px; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 0; border: 7px solid var(--chess-frame); border-radius: 7px; overflow: hidden; background: var(--chess-frame); box-shadow: 0 18px 44px rgba(0, 0, 0, .38); user-select: none; isolation: isolate; contain: layout paint; } #view-chess .chess-square { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer; overflow: hidden; touch-action: manipulation; transition: filter .1s ease; } #view-chess .chess-square.light { background: var(--chess-light); } #view-chess .chess-square.dark { background: var(--chess-dark); } @media (hover: hover) and (pointer: fine) { #view-chess .chess-square:hover { box-shadow: none; filter: brightness(1.055); } } #view-chess .chess-square:focus-visible { z-index: 11; outline: 4px solid rgba(255, 255, 255, .9); outline-offset: -4px; } #view-chess .chess-square.last-move::before { content: ""; position: absolute; z-index: 1; inset: 0; background: color-mix(in srgb, var(--chess-last) 58%, transparent); } #view-chess .chess-square.selected::before { content: ""; position: absolute; z-index: 2; inset: 0; background: color-mix(in srgb, var(--chess-selected) 72%, transparent); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .26); } #view-chess .chess-square.in-check::before { content: ""; position: absolute; z-index: 3; inset: 0; background: radial-gradient(circle, rgba(228, 61, 61, .92) 0 18%, rgba(215, 54, 54, .55) 42%, transparent 72%); animation: none; } #view-chess .move-dot { position: absolute; z-index: 5; width: 27%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .22); box-shadow: none; } #view-chess .chess-square.legal-capture::after { content: ""; position: absolute; z-index: 5; inset: 0; border: clamp(6px, 1.45cqw, 12px) solid rgba(0, 0, 0, .19); border-radius: 0; box-shadow: none; pointer-events: none; } #view-chess .chess-piece { position: relative; z-index: 6; display: block; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif; font-size: clamp(1.75rem, 8.65cqw, 5.05rem); font-weight: 400; line-height: .92; transform: none; pointer-events: none; font-variant-emoji: text; } #view-chess .chess-piece[data-piece="p"] { font-size: clamp(1.6rem, 8.15cqw, 4.75rem); } #view-chess .chess-piece[data-piece="k"] { font-size: clamp(1.85rem, 8.9cqw, 5.2rem); } #view-chess .chess-piece.white-piece { color: #f4f4f4; -webkit-text-stroke: .65px #333; text-shadow: 0 1.5px 0 #333, 0 3px 4px rgba(0, 0, 0, .24); } #view-chess .chess-piece.black-piece { color: #262522; -webkit-text-stroke: .45px rgba(255, 255, 255, .42); text-shadow: 0 1px 0 rgba(255, 255, 255, .32), 0 2px 3px rgba(0, 0, 0, .2); } #view-chess .file-coordinate, #view-chess .rank-coordinate { position: absolute; z-index: 8; font-family: ui-sans-serif, system-ui, sans-serif; font-size: clamp(.43rem, 1.35cqw, .68rem); font-weight: 850; line-height: 1; pointer-events: none; } #view-chess .chess-square.light .file-coordinate, #view-chess .chess-square.light .rank-coordinate { color: color-mix(in srgb, var(--chess-dark) 78%, #172117); } #view-chess .chess-square.dark .file-coordinate, #view-chess .chess-square.dark .rank-coordinate { color: color-mix(in srgb, var(--chess-light) 82%, white); } #view-chess .file-coordinate { right: 5px; bottom: 4px; } #view-chess .rank-coordinate { left: 5px; top: 4px; } #view-chess .chess-board.thinking::after { content: "KI BERECHNET …"; position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border: 0; border-radius: 5px; color: #fff; background: rgba(38, 37, 34, .94); box-shadow: 0 10px 25px rgba(0, 0, 0, .3); font-size: .7rem; font-weight: 850; letter-spacing: .08em; pointer-events: none; } #view-chess .chess-player-strip { min-height: 62px; grid-template-columns: auto minmax(125px, auto) 1fr; gap: 12px; padding: 9px 12px; border: 0; border-radius: 0 0 7px 7px; background: var(--chess-panel); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } #view-chess .chess-player-strip.enemy-strip { border-radius: 7px 7px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .1); } #view-chess .chess-avatar { width: 40px; height: 40px; border-radius: 5px; box-shadow: none; } #view-chess .chess-player-strip small { color: #aeb4bb; letter-spacing: .1em; } #view-chess .chess-player-strip b { color: #f4f4f4; } #view-chess .captured-pieces { color: #d7d7d7; } #view-chess .tactics-board-top, #view-chess .tactics-board-bottom { min-height: 54px; padding: 9px 13px; border: 0; border-radius: 7px 7px 0 0; background: var(--chess-panel); } #view-chess .tactics-board-bottom { border-radius: 0 0 7px 7px; } #view-chess .tactics-board-top b, #view-chess .tactics-board-bottom b { color: #f4f4f4; } #view-chess .chess-sidebar, #view-chess .tactics-sidebar { gap: 13px; } #view-chess .chess-status-panel, #view-chess .chess-history-panel, #view-chess .tactics-objective-panel, #view-chess .tactics-path-panel { border-radius: 9px; border-color: rgba(255, 255, 255, .1); background: linear-gradient(145deg, rgba(35, 36, 38, .96), rgba(22, 23, 25, .98)); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); } #view-chess .chess-status-panel::after, #view-chess .tactics-objective-panel::after { opacity: .38; } #view-chess .chess-move-list { border-top-color: rgba(255, 255, 255, .11); } #view-chess .move-row { border-bottom-color: rgba(255, 255, 255, .08); } #view-chess .chess-square.tactics-hint-source::before { z-index: 5; inset: 8%; border: 4px solid #f6c944; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); animation: hintPulse 1s ease-in-out infinite; } #view-chess .chess-square.tactics-hint-target::before { z-index: 5; inset: 18%; border: 4px dashed #ef8d32; border-radius: 50%; } #view-chess .chess-theme-panel { margin-top: 17px; padding: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(255, 255, 255, .025); } #view-chess .chess-theme-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 11px; } #view-chess .chess-theme-heading > div { display: grid; gap: 2px; } #view-chess .chess-theme-heading span, #view-chess .chess-theme-heading small { color: var(--muted); font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } #view-chess .chess-theme-heading b { font-size: .88rem; } #view-chess .chess-theme-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } #view-chess .chess-theme-button { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 7px 4px 6px; border: 1px solid transparent; border-radius: 7px; color: #aebbc7; background: transparent; cursor: pointer; } #view-chess .chess-theme-button i { width: 31px; aspect-ratio: 1; display: block; border-radius: 4px; background: conic-gradient(from 90deg, var(--theme-light) 0 25%, var(--theme-dark) 0 50%, var(--theme-light) 0 75%, var(--theme-dark) 0); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); } #view-chess .chess-theme-button span { font-size: .57rem; font-weight: 800; } #view-chess .chess-theme-button:hover, #view-chess .chess-theme-button.active { color: #fff; border-color: rgba(255, 255, 255, .19); background: rgba(255, 255, 255, .055); } #view-chess .chess-theme-button.active i { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 980px) { #view-chess .chess-layout, #view-chess .tactics-layout { grid-template-columns: 1fr; } #view-chess .chess-sidebar, #view-chess .tactics-sidebar { position: static; } } @media (max-width: 650px) { #view-chess .chess-board { border-width: 4px; border-radius: 5px; } #view-chess .chess-player-strip { min-height: 56px; padding: 8px 9px; } #view-chess .chess-avatar { width: 36px; height: 36px; } #view-chess .chess-theme-heading { align-items: start; flex-direction: column; } #view-chess .chess-theme-heading small { display: none; } #view-chess .chess-theme-picker { gap: 4px; } #view-chess .chess-theme-button { padding-inline: 2px; } #view-chess .chess-theme-button i { width: 27px; } #view-chess .chess-theme-button span { font-size: .5rem; } } /* ============================================================ BUILD 0.3A · CAREER CORE MATCH ENGINE ============================================================ */ .career-nav { color: #effff6; } .career-nav::before { content: "⚽"; margin-right: 5px; font-size: .75rem; } .career-view { --pitch-line: rgba(255,255,255,.52); --career-green: #44df8a; --career-lime: #c4f052; --career-dark: #071e22; } .career-game-header { border-bottom-color: rgba(68, 223, 138, .26); background: radial-gradient(circle at 78% 40%, rgba(68,223,138,.16), transparent 24%), linear-gradient(110deg, rgba(4,27,48,.95), rgba(7,47,50,.78)); } .career-engine-chip { border-color: rgba(68,223,138,.32); color: #d7ffe9; } .career-engine-chip span { margin-right: 6px; } .career-screen { display: none; padding: 4px 0 45px; } .career-screen.active { display: block; animation: viewIn .34s ease both; } .career-engine-hero { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.62fr); gap: 28px; padding: clamp(24px, 3.2vw, 42px); margin-bottom: 20px; overflow: hidden; background: linear-gradient(125deg, rgba(6,47,67,.94), rgba(5,24,43,.98) 62%), var(--panel); } .career-engine-hero::after { content: ""; position: absolute; width: 430px; height: 430px; right: -100px; top: -210px; border: 42px solid rgba(68,223,138,.07); border-radius: 50%; } .career-engine-hero h2 { max-width: 820px; margin: 4px 0 13px; font-size: clamp(1.7rem,3vw,3rem); line-height: .98; text-transform: uppercase; font-style: italic; } .career-engine-hero > div > p:not(.eyebrow) { max-width: 850px; color: #bdd1da; line-height: 1.65; } .career-rule-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; } .career-rule-strip span { min-width: 132px; padding: 10px 13px; border: 1px solid rgba(68,223,138,.17); border-radius: 9px 2px 9px 2px; background: rgba(68,223,138,.055); color: #a9c9c2; font-size: .7rem; font-weight: 800; text-transform: uppercase; } .career-rule-strip b { margin-right: 6px; color: var(--career-lime); font-family: var(--display-font); font-size: 1.05rem; font-style: italic; } .career-history-card { position: relative; z-index: 1; align-self: stretch; padding: 20px; border: 1px solid rgba(196,240,82,.19); border-radius: 15px 3px 15px 3px; background: rgba(4,18,31,.68); } .career-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; } .career-history-grid span { min-height: 78px; display: grid; align-content: center; padding: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); } .career-history-grid small { color: #78939b; font-size: .53rem; font-weight: 900; letter-spacing: .1em; } .career-history-grid b { margin-top: 4px; color: #f3fff7; font-family: var(--display-font); font-size: 1.05rem; font-style: italic; } .career-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .career-control-panel, .career-opponent-panel { padding: 23px; } .career-control-panel .field-label, .career-opponent-panel .field-label { display: block; margin-top: 14px; margin-bottom: 6px; } .career-control-note { min-height: 34px; margin: 6px 0 0; color: #7e9eaa; font-size: .72rem; line-height: 1.45; } .career-opponent-card { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 19px; padding: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(1,13,24,.5); } .career-opponent-badge { width: 62px; height: 62px; display: grid; place-items: center; border: 4px solid var(--opponent); border-radius: 50%; color: var(--opponent); font-family: var(--display-font); font-size: 1.4rem; font-style: italic; box-shadow: 0 0 22px color-mix(in srgb, var(--opponent), transparent 78%); } .career-opponent-card h3 { margin: 2px 0; font-size: 1rem; font-style: italic; text-transform: uppercase; } .career-opponent-card p:not(.eyebrow) { margin: 0; color: #76939f; font-size: .68rem; } .career-opponent-ratings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; } .career-opponent-ratings span { display: grid; place-items: center; padding: 8px 4px; background: rgba(255,255,255,.035); } .career-opponent-ratings small { color: #69858e; font-size: .48rem; font-weight: 900; } .career-opponent-ratings b { color: #eafff1; font-family: var(--display-font); font-style: italic; } .career-team-summary { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin: 16px 0 24px; padding: 0; overflow: hidden; } .career-team-summary > div { min-height: 91px; display: grid; place-items: center; align-content: center; gap: 4px; border-right: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); } .career-team-summary small { color: #77969f; font-size: .53rem; font-weight: 900; letter-spacing: .1em; } .career-team-summary b { color: var(--career-lime); font-family: var(--display-font); font-size: 1.75rem; font-style: italic; } .career-lineup-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 18px; align-items: start; } .career-pitch-shell { position: relative; padding: 11px; border-radius: 26px 6px 26px 6px; background: linear-gradient(135deg,#2a8e54,#0c5c39); box-shadow: 0 28px 65px rgba(0,0,0,.34); } .career-pitch { position: relative; width: 100%; min-height: 690px; overflow: hidden; border: 2px solid rgba(255,255,255,.62); border-radius: 18px 3px 18px 3px; background: linear-gradient(90deg, transparent 49.75%, rgba(255,255,255,.48) 49.8% 50.2%, transparent 50.25%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 10%, rgba(0,0,0,.035) 10% 20%), linear-gradient(#23985a,#177b49); } .career-pitch::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 128px; height: 128px; border: 2px solid var(--pitch-line); border-radius: 50%; transform: translate(-50%,-50%); } .career-pitch::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--pitch-line); transform: translate(-50%,-50%); box-shadow: -190px -296px 0 -2px rgba(255,255,255,.65), 190px 296px 0 -2px rgba(255,255,255,.65); } .career-pitch-player { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 104px; min-height: 115px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 65px auto auto; align-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.32); border-bottom: 4px solid var(--card-accent); border-radius: 10px 3px 10px 3px; color: white; background: rgba(4,22,31,.88); box-shadow: 0 10px 22px rgba(0,0,0,.27); transform: translate(-50%,-50%); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .career-pitch-player:hover { z-index: 4; transform: translate(-50%,-54%) scale(1.07); border-color: var(--career-lime); } .career-pitch-player.captain { box-shadow: 0 0 0 2px var(--career-lime), 0 13px 27px rgba(0,0,0,.32); } .career-pitch-player img { grid-column: 1 / -1; width: 100%; height: 65px; object-fit: cover; border-radius: 6px 2px 6px 2px; background: rgba(255,255,255,.04); } .career-pitch-ovr { position: absolute; left: 3px; top: 3px; min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px 2px 7px 2px; color: #071b1c; background: var(--career-lime); font-family: var(--display-font); font-size: .68rem; font-style: italic; } .career-pitch-player b { grid-column: 1 / -1; overflow: hidden; margin-top: 4px; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; } .career-pitch-player small { grid-column: 1 / -1; color: #8ab5aa; font-size: .48rem; font-weight: 800; } .career-pitch-player i { position: absolute; right: -7px; top: -7px; width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #0c2b23; border-radius: 50%; color: #082019; background: var(--career-lime); font-family: var(--display-font); font-size: .7rem; font-style: italic; } .career-engine-explainer { position: sticky; top: 104px; padding: 23px; } .career-engine-explainer h2 { margin: 4px 0 16px; font-size: 1.4rem; text-transform: uppercase; font-style: italic; } .career-engine-points { display: grid; gap: 6px; } .career-engine-points span { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; padding: 9px; border-left: 3px solid rgba(68,223,138,.55); background: rgba(255,255,255,.025); } .career-engine-points b { color: var(--career-lime); font-family: var(--display-font); font-style: italic; } .career-engine-points small { color: #8aa2aa; line-height: 1.4; } .career-chatter-lock { display: grid; gap: 3px; margin: 18px 0; padding: 13px; border: 1px dashed rgba(185,139,255,.4); background: rgba(169,140,255,.055); } .career-chatter-lock span { color: #ae94ff; font-size: .55rem; font-weight: 900; letter-spacing: .12em; } .career-chatter-lock b { font-family: var(--display-font); font-style: italic; } .career-chatter-lock small { color: #8e8da8; line-height: 1.45; } .career-kickoff { min-height: 58px; font-size: .83rem; } .career-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(205px,1fr)); gap: 11px; margin-bottom: 28px; } .career-card-grid.reserve { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); } .career-player-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--card-accent),transparent 62%); border-radius: 16px 4px 16px 4px; background: linear-gradient(145deg,color-mix(in srgb,var(--card-accent),#071a31 83%),#061321 70%); box-shadow: 0 16px 32px rgba(0,0,0,.24); } .career-player-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--card-accent); } .career-player-card.captain { box-shadow: 0 0 0 2px var(--career-lime),0 16px 35px rgba(0,0,0,.28); } .career-player-card.off-position { border-style: dashed; } .career-card-top { display: grid; grid-template-columns: 48px 38px 1fr; gap: 5px; align-items: center; padding: 10px 11px 6px; } .career-card-ovr { color: white; font-family: var(--display-font); font-size: 1.35rem; font-style: italic; } .career-card-pos { color: var(--career-lime); font-family: var(--display-font); font-size: .72rem; font-style: italic; } .career-card-universe { overflow: hidden; color: #71909c; font-size: .51rem; font-weight: 900; letter-spacing: .06em; text-align: right; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .career-card-art { position: relative; height: 150px; margin: 0 8px; overflow: hidden; border-radius: 10px 2px 10px 2px; background: rgba(255,255,255,.04); } .career-card-art img { width: 100%; height: 100%; object-fit: cover; } .career-card-fit { position: absolute; left: 7px; bottom: 7px; padding: 4px 6px; border-radius: 5px 1px 5px 1px; color: #dcfff0; background: rgba(2,20,18,.84); font-size: .49rem; font-weight: 900; } .career-captain-mark { position: absolute; right: 7px; top: 7px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #092019; background: var(--career-lime); font-family: var(--display-font); font-size: .72rem; font-style: italic; } .career-card-name { display: grid; gap: 2px; padding: 10px 11px 7px; } .career-card-name b { overflow: hidden; font-family: var(--display-font); font-size: .75rem; font-style: italic; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .career-card-name small { color: #8299a2; font-size: .58rem; } .career-card-stats { display: grid; grid-template-columns: repeat(5,1fr); margin: 0 8px 8px; border: 1px solid rgba(255,255,255,.06); } .career-card-stats:has(span:nth-child(4):last-child) { grid-template-columns: repeat(4,1fr); } .career-card-stats span { display: grid; place-items: center; gap: 1px; padding: 7px 2px; border-right: 1px solid rgba(255,255,255,.05); } .career-card-stats b { font-family: var(--display-font); font-size: .76rem; font-style: italic; } .career-card-stats small { color: #637d87; font-size: .45rem; font-weight: 900; } .career-card-trait { display: grid; gap: 3px; min-height: 70px; padding: 9px 11px 14px; border-top: 1px solid rgba(255,255,255,.05); } .career-card-trait b { color: color-mix(in srgb,var(--card-accent),white 28%); font-size: .62rem; } .career-card-trait span { color: #78939d; font-size: .55rem; line-height: 1.4; } .career-card-grid.reserve .career-card-art { height: 112px; } .career-card-grid.reserve .career-player-card { opacity: .85; } .career-scoreboard { display: grid; grid-template-columns: 1fr 230px 1fr; align-items: stretch; margin-bottom: 18px; padding: 0; overflow: hidden; } .career-score-team { min-height: 150px; display: grid; grid-template-columns: minmax(0,1fr) 95px; align-items: center; gap: 15px; padding: 25px; } .career-score-team.home { background: linear-gradient(100deg,rgba(68,223,138,.12),transparent); } .career-score-team.away { grid-template-columns: 95px minmax(0,1fr); background: linear-gradient(260deg,rgba(255,101,122,.1),transparent); } .career-score-team.away small { order: 2; text-align: right; } .career-score-team b { font-family: var(--display-font); font-size: 4rem; font-style: italic; text-align: center; } .career-score-team small { color: #d9edf0; font-family: var(--display-font); font-size: .84rem; font-style: italic; letter-spacing: .04em; text-transform: uppercase; } .career-score-center { display: grid; place-items: center; align-content: center; padding: 16px; border-left: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); background: rgba(2,13,24,.62); text-align: center; } .career-score-center span { color: var(--career-lime); font-family: var(--display-font); font-size: 1.8rem; font-style: italic; } .career-score-center b { margin-top: 5px; font-size: .63rem; letter-spacing: .08em; } .career-score-center small { margin-top: 3px; color: #67828a; font-size: .5rem; letter-spacing: .12em; } .career-match-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,.55fr); gap: 16px; } .career-live-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; } .career-live-kpis > div { display: grid; place-items: center; min-height: 78px; border: 1px solid rgba(68,223,138,.13); background: rgba(5,28,37,.72); } .career-live-kpis small { color: #718e97; font-size: .53rem; font-weight: 900; letter-spacing: .1em; } .career-live-kpis b { margin-top: 4px; color: #f2fff7; font-family: var(--display-font); font-size: 1.13rem; font-style: italic; } .career-live-panel { min-height: 570px; padding: 21px; } .career-live-feed { max-height: 520px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 4px; } .career-feed-intro, .career-feed-event { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.018); } .career-feed-intro > span, .career-feed-event > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--career-lime); background: rgba(68,223,138,.07); } .career-feed-event.goal-player { border-left: 4px solid var(--career-green); background: linear-gradient(90deg,rgba(68,223,138,.09),rgba(255,255,255,.015)); } .career-feed-event.goal-enemy { border-left: 4px solid #ff657a; background: linear-gradient(90deg,rgba(255,101,122,.08),rgba(255,255,255,.015)); } .career-feed-event.halftime { border-left: 4px solid var(--yellow); } .career-feed-event b, .career-feed-intro b { display: block; font-size: .72rem; } .career-feed-event small, .career-feed-intro small { display: block; margin-top: 2px; color: #7e999f; font-size: .62rem; line-height: 1.4; } .career-live-squad-panel { padding: 21px; } .career-live-squad-panel h2 { margin: 3px 0 14px; text-transform: uppercase; font-style: italic; } .career-live-lineup { display: grid; gap: 5px; } .career-live-player { display: grid; grid-template-columns: 47px 1fr; gap: 9px; align-items: center; padding: 6px; border-left: 3px solid var(--card-accent); background: rgba(255,255,255,.025); } .career-live-player img { width: 47px; height: 47px; object-fit: cover; border-radius: 6px 2px 6px 2px; } .career-live-player b { display: block; font-size: .65rem; } .career-live-player small { display: block; margin-top: 2px; color: #708b94; font-size: .54rem; } .career-live-note { display: grid; gap: 3px; margin-top: 13px; padding: 11px; border: 1px dashed rgba(68,223,138,.24); color: #809ba3; font-size: .62rem; } .career-live-note b { color: var(--career-lime); } .career-result-hero { display: grid; justify-items: center; padding: 38px; margin-bottom: 16px; text-align: center; background: radial-gradient(circle at 50% 0,rgba(68,223,138,.18),transparent 45%), linear-gradient(145deg,rgba(5,43,52,.93),rgba(4,17,31,.98)); } .career-result-score { margin: 4px 0; color: white; font-family: var(--display-font); font-size: clamp(4rem,9vw,8rem); font-style: italic; letter-spacing: -.08em; line-height: .92; text-shadow: 6px 7px 0 rgba(8,93,74,.8); } .career-result-hero h2 { margin: 9px 0 7px; color: var(--career-lime); font-size: clamp(1.3rem,2.5vw,2.4rem); text-transform: uppercase; font-style: italic; } .career-result-hero > p:not(.eyebrow) { color: #96afb5; } .career-result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; } .career-result-meta span { min-width: 145px; display: grid; gap: 2px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); } .career-result-meta small { color: #708b93; font-size: .49rem; font-weight: 900; letter-spacing: .1em; } .career-result-meta b { font-family: var(--display-font); font-size: .78rem; font-style: italic; } .career-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .career-result-grid > article { padding: 21px; } .career-match-stat-table { display: grid; gap: 1px; background: rgba(255,255,255,.05); } .career-match-stat-table > div { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; min-height: 50px; padding: 0 12px; background: #071b2b; } .career-match-stat-table b:first-child { color: var(--career-lime); } .career-match-stat-table b:last-child { color: #ff93a1; text-align: right; } .career-match-stat-table span { color: #76909a; font-size: .62rem; font-weight: 800; text-align: center; } .career-motm-card { min-height: 225px; display: grid; grid-template-columns: 118px 1fr 70px; gap: 18px; align-items: center; padding: 18px; border: 1px solid rgba(196,240,82,.18); background: rgba(196,240,82,.035); } .career-motm-card img, .career-motm-rival { width: 118px; height: 118px; object-fit: cover; border-radius: 16px 4px 16px 4px; background: rgba(255,255,255,.05); } .career-motm-rival { display: grid; place-items: center; color: #ff8fa0; font-family: var(--display-font); font-size: 2.2rem; font-style: italic; } .career-motm-card h3 { margin: 4px 0; font-size: 1.25rem; text-transform: uppercase; font-style: italic; } .career-motm-card span { color: #849ba3; font-size: .68rem; } .career-motm-card > b { color: var(--career-lime); font-family: var(--display-font); font-size: 2.5rem; font-style: italic; text-align: right; } .career-ratings-panel { margin-top: 16px; padding: 21px; } .career-rating-table { display: grid; gap: 4px; } .career-rating-row { display: grid; grid-template-columns: 48px minmax(160px,1.4fr) repeat(3,minmax(68px,.45fr)) 66px; gap: 8px; align-items: center; min-height: 62px; padding: 6px 9px; border-left: 3px solid var(--card-accent); background: rgba(255,255,255,.022); } .career-rating-row.captain { background: linear-gradient(90deg,rgba(196,240,82,.06),rgba(255,255,255,.018)); } .career-rating-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 7px 2px 7px 2px; } .career-rating-player b { display: block; font-size: .68rem; } .career-rating-player small, .career-rating-row > span:not(.career-rating-player) small { display: block; color: #6f8991; font-size: .47rem; font-weight: 900; } .career-rating-row > span:not(.career-rating-player) { text-align: center; } .career-rating-row > span:not(.career-rating-player) b { display: block; margin-top: 2px; font-family: var(--display-font); font-style: italic; } .career-rating-score { color: white; font-family: var(--display-font); font-size: 1.15rem; font-style: italic; text-align: center; } .career-rating-score.hot { color: var(--career-lime); } .career-next-step { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 16px; padding: 24px; } .career-next-step h2 { margin: 4px 0 7px; text-transform: uppercase; font-style: italic; } .career-next-step p:not(.eyebrow) { margin: 0; max-width: 850px; color: #829ca4; line-height: 1.5; } @media (max-width: 1160px) { .career-engine-hero, .career-lineup-layout, .career-match-layout { grid-template-columns: 1fr; } .career-engine-explainer { position: relative; top: auto; } .career-pitch { min-height: 650px; } .career-card-grid { grid-template-columns: repeat(auto-fill,minmax(185px,1fr)); } } @media (max-width: 850px) { .career-setup-grid, .career-result-grid { grid-template-columns: 1fr; } .career-team-summary { grid-template-columns: repeat(3,1fr); } .career-team-summary > div:nth-child(4), .career-team-summary > div:nth-child(5) { grid-column: span 1; } .career-scoreboard { grid-template-columns: 1fr 110px 1fr; } .career-score-team { grid-template-columns: 1fr; justify-items: center; min-height: 125px; padding: 14px; } .career-score-team.away { grid-template-columns: 1fr; } .career-score-team.away small { order: 0; text-align: center; } .career-score-team b { font-size: 3rem; } .career-score-team small { text-align: center; font-size: .61rem; } .career-motm-card { grid-template-columns: 90px 1fr 50px; } .career-motm-card img, .career-motm-rival { width: 90px; height: 90px; } .career-rating-row { grid-template-columns: 42px minmax(130px,1fr) 54px 54px 54px 55px; font-size: .9em; } .career-next-step { grid-template-columns: 1fr; } } @media (max-width: 640px) { .career-engine-hero { grid-template-columns: 1fr; padding: 20px; } .career-history-grid { grid-template-columns: 1fr 1fr; } .career-rule-strip span { flex: 1 1 135px; } .career-team-summary { grid-template-columns: repeat(2,1fr); } .career-team-summary > div:last-child { grid-column: 1 / -1; } .career-pitch-shell { padding: 7px; overflow-x: auto; } .career-pitch { width: 640px; min-width: 640px; min-height: 590px; } .career-pitch-player { width: 86px; min-height: 100px; grid-template-rows: 54px auto auto; } .career-pitch-player img { height: 54px; } .career-card-grid, .career-card-grid.reserve { grid-template-columns: repeat(2,minmax(0,1fr)); } .career-card-art { height: 120px; } .career-card-trait { min-height: 78px; } .career-scoreboard { grid-template-columns: 1fr 80px 1fr; } .career-score-team b { font-size: 2.35rem; } .career-score-center span { font-size: 1.35rem; } .career-live-kpis { grid-template-columns: 1fr; } .career-live-kpis > div { min-height: 58px; } .career-motm-card { grid-template-columns: 72px 1fr 45px; gap: 10px; padding: 11px; } .career-motm-card img, .career-motm-rival { width: 72px; height: 72px; } .career-motm-card > b { font-size: 1.65rem; } .career-ratings-panel { overflow-x: auto; } .career-rating-table { min-width: 640px; } .career-next-step .result-actions { display: grid; grid-template-columns: 1fr; } } /* 0.3A mobile containment: the tactical pitch may scroll internally, never the page. */ .career-view, .career-lineup-layout, .career-lineup-layout > *, .career-pitch-shell, .career-match-layout, .career-match-layout > * { min-width: 0; max-width: 100%; } @media (max-width: 640px) { .career-pitch-shell { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } } .career-view { scroll-margin-top: 92px; } /* ============================================================ BUILD 0.3B · CAREER SEASON FOUNDATION ============================================================ */ .career-mode-switch { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;margin:0 0 18px; background:linear-gradient(135deg,rgba(5,24,55,.96),rgba(7,43,91,.82)); } .career-mode-button { display:grid;grid-template-columns:54px 1fr;align-items:center;gap:12px;padding:14px 16px;border:1px solid transparent; border-radius:12px 3px 12px 3px;color:#a9c4da;background:rgba(255,255,255,.025);cursor:pointer;text-align:left; } .career-mode-button>span {width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(85,232,255,.25);font-family:var(--display-font);font-style:italic;color:var(--cyan);} .career-mode-button div {display:grid;gap:2px}.career-mode-button b{font-family:var(--display-font);font-style:italic;font-size:.78rem}.career-mode-button small{font-size:.65rem;color:#7796b0} .career-mode-button.active {border-color:rgba(255,211,43,.42);background:linear-gradient(120deg,rgba(23,107,255,.22),rgba(255,211,43,.07));color:white;box-shadow:inset 0 -3px 0 var(--yellow)} .career-mode-button.active>span{border-color:var(--yellow);color:var(--yellow)} .career-season-panel[hidden],#career-season-start-state[hidden],#career-season-dashboard[hidden]{display:none!important} .career-season-start {display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:28px;padding:34px;overflow:hidden;position:relative} .career-season-start::after{content:"";position:absolute;width:410px;height:410px;border:42px solid rgba(85,232,255,.06);border-radius:50%;right:-180px;top:-170px} .career-season-start-copy,.career-season-entry-card{position:relative;z-index:1}.career-season-start h2{max-width:780px;margin:6px 0 12px;font-size:clamp(1.7rem,3vw,3rem);text-transform:uppercase;font-style:italic} .career-season-start p{color:#aec6d8;line-height:1.6}.season-rule-strip{margin-top:23px}.career-season-footnote{display:block;margin-top:8px;color:#6e8ba5} .career-season-entry-card{align-self:stretch;padding:24px;border:1px solid rgba(255,211,43,.2);border-radius:18px 4px;background:linear-gradient(150deg,rgba(10,49,103,.9),rgba(3,15,38,.96));box-shadow:0 22px 50px rgba(0,0,0,.25)} .career-season-entry-badge{width:68px;height:68px;display:grid;place-items:center;margin-bottom:18px;border:5px solid var(--yellow);border-radius:50%;color:var(--yellow);font-family:var(--display-font);font-size:1.2rem;box-shadow:0 0 28px rgba(255,211,43,.18)} .career-season-entry-card h3{margin:3px 0 10px}.career-season-entry-card .primary-button{margin-top:19px}.career-season-entry-card>small{display:block;margin-top:12px;color:#67839c;line-height:1.45} .career-season-hero {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:26px 28px;margin-bottom:18px;background:radial-gradient(circle at 90% 10%,rgba(255,211,43,.12),transparent 30%),linear-gradient(135deg,rgba(8,48,105,.92),rgba(3,16,39,.96))} .career-season-hero h2{font-size:clamp(1.6rem,3vw,2.8rem);margin:3px 0 10px}.career-season-progress{width:min(620px,100%);height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.07)} .career-season-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--yellow));box-shadow:0 0 15px var(--cyan);transition:width .45s ease}.career-season-hero>div>small{display:block;margin-top:8px;color:#7f9ab2} .career-season-kpis{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px}.career-season-kpis span{display:grid;gap:3px;min-width:96px;padding:12px 14px;border-left:3px solid rgba(85,232,255,.45);background:rgba(255,255,255,.03)} .career-season-kpis small{color:#7898b1;font-size:.55rem;letter-spacing:.1em}.career-season-kpis b{font-family:var(--display-font);font-style:italic;font-size:1.35rem;color:white} .career-season-main-grid{display:grid;grid-template-columns:minmax(310px,.7fr) minmax(620px,1.3fr);gap:18px;align-items:start}.career-season-next,.career-season-table-card{padding:22px}.career-season-next-badge{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;border:3px solid var(--club,var(--cyan));color:var(--club,var(--cyan));font-family:var(--display-font);font-size:.72rem;box-shadow:0 0 22px color-mix(in srgb,var(--club,var(--cyan)),transparent 80%)} .career-season-next-meta{margin:10px 0 5px;color:#8eacc3}.career-season-strength{margin-bottom:18px;padding:9px 11px;border-left:3px solid var(--yellow);background:rgba(255,211,43,.055);color:#f1d875;font-size:.72rem;font-weight:800} .career-season-controls{display:grid;gap:7px}.career-season-controls .field-label{margin-top:4px}.career-season-kickoff{margin-top:18px}.career-season-reset{margin-top:8px;color:#7892a9;font-size:.65rem} .career-season-table-card{overflow:hidden}.career-season-table-head,.career-season-table-row{display:grid;grid-template-columns:34px minmax(190px,1.8fr) repeat(4,38px) 68px 48px 48px;align-items:center;gap:2px}.career-season-table-head{padding:0 8px 8px;color:#65839b;font-size:.54rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.career-season-table-head span:not(:nth-child(2)){text-align:center} .career-season-table{display:grid;gap:3px}.career-season-table-row{position:relative;min-height:35px;padding:4px 8px;border-left:3px solid transparent;border-radius:5px;background:rgba(255,255,255,.025);font-size:.68rem}.career-season-table-row>span:not(.career-season-club),.career-season-table-row>strong{text-align:center}.career-season-table-row strong{font-size:.78rem;color:#fff}.career-season-table-row.player{border-left-color:var(--yellow);background:linear-gradient(90deg,rgba(255,211,43,.11),rgba(85,232,255,.035));color:#fff}.career-season-table-row.promotion{box-shadow:inset 3px 0 0 #58e8a0}.career-season-table-row.playoff-up{box-shadow:inset 3px 0 0 #75bcff}.career-season-table-row.playoff-down{box-shadow:inset 3px 0 0 #ffb44e}.career-season-table-row.relegation{box-shadow:inset 3px 0 0 #ff647c}.career-season-pos{font-family:var(--display-font);font-style:italic;color:#8da9c0} .career-season-club{display:flex;align-items:center;gap:8px;min-width:0}.career-season-club i{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--club),white 20%);border-radius:50%;background:color-mix(in srgb,var(--club),transparent 84%);color:#fff;font-size:.44rem;font-style:normal;font-weight:900}.career-season-club b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .career-season-zone-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:.55rem;color:#7895ac}.career-season-zone-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.career-season-zone-legend .promotion::before{background:#58e8a0}.career-season-zone-legend .playoff::before{background:#75bcff}.career-season-zone-legend .danger::before{background:#ff647c} .career-season-secondary-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.1fr;gap:14px;margin-top:16px}.career-season-secondary-grid>article{padding:18px;min-width:0}.career-season-fixtures{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.career-season-fixture{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:8px 7px;border-radius:6px;background:rgba(255,255,255,.028);font-size:.62rem;text-align:center}.career-season-fixture b{color:#fff;font-size:.72rem}.career-season-fixture.player{border:1px solid rgba(255,211,43,.22);background:rgba(255,211,43,.06)} .career-leader-list{display:grid;gap:5px}.career-leader-row{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;padding:6px 7px;border-radius:6px;background:rgba(255,255,255,.026)}.career-leader-row>span{color:#68869e;font-family:var(--display-font);font-size:.62rem}.career-leader-row div{display:grid;min-width:0}.career-leader-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem}.career-leader-row small{color:#67839b;font-size:.52rem}.career-leader-row strong{color:var(--yellow);font-size:.85rem}.career-leader-row.player{border-left:3px solid var(--cyan);background:rgba(85,232,255,.06)}.career-empty-stat{margin:10px 0;color:#6f8ba2;font-size:.67rem;line-height:1.45} .career-week-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:12px;border-radius:10px;background:linear-gradient(110deg,color-mix(in srgb,var(--club),transparent 87%),rgba(255,255,255,.025));border-left:4px solid var(--club)}.career-week-badge{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--club),transparent 72%);font-family:var(--display-font);font-size:.55rem}.career-week-card small{color:#7692a9;font-size:.52rem}.career-week-card h3{margin:2px 0;font-size:.8rem}.career-week-card p{margin:0;color:#8ca8bd;font-size:.58rem}.career-week-card>strong{color:var(--yellow);font-family:var(--display-font);font-size:1.1rem}.career-form-block{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}.career-form-block>small{color:#6e8ba3;font-size:.52rem;letter-spacing:.09em}.career-season-form{display:flex;gap:5px;margin-top:8px}.career-season-form span{width:28px;height:28px;display:grid;place-items:center;border-radius:5px;font-family:var(--display-font);font-size:.6rem}.career-season-form .form-w{background:#39b977;color:white}.career-season-form .form-d{background:#697d91;color:white}.career-season-form .form-l{background:#c24b62;color:white}.career-season-form>small{color:#6d879d} .career-transfer-preview{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;margin-top:16px;padding:22px}.career-transfer-preview h2{margin:3px 0 5px}.career-transfer-preview p{margin:0;color:#8ea8bb}.career-transfer-preview>span{padding:10px 13px;border:1px solid rgba(255,211,43,.23);color:var(--yellow);font-family:var(--display-font);font-size:.6rem;font-style:italic} @media(max-width:1200px){.career-season-main-grid{grid-template-columns:1fr}.career-season-secondary-grid{grid-template-columns:repeat(2,1fr)}.career-season-kpis{grid-template-columns:repeat(2,1fr)}.career-season-start{grid-template-columns:1fr}.career-season-entry-card{max-width:none}} @media(max-width:760px){.career-mode-switch{grid-template-columns:1fr}.career-season-hero{grid-template-columns:1fr}.career-season-kpis{grid-template-columns:repeat(2,1fr)}.career-season-secondary-grid{grid-template-columns:1fr}.career-season-table-card{overflow-x:auto}.career-season-table-head,.career-season-table-row{min-width:730px}.career-season-fixtures{grid-template-columns:1fr}.career-transfer-preview{grid-template-columns:1fr}.career-season-start{padding:22px}.career-season-start h2{font-size:1.65rem}} /* ============================================================ CAREER CORE 0.3C · DRAFT / TRANSFERS / ROSTER / GOAL TIMELINE ============================================================ */ .career-season-draft{display:grid;gap:18px;padding:24px;margin-bottom:24px}.career-draft-slot-line{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 15px;border-left:4px solid var(--yellow);background:rgba(255,211,43,.06)}.career-draft-slot-line span{color:var(--muted);font-size:.62rem;font-weight:900;letter-spacing:.12em}.career-draft-slot-line b{font-family:var(--display-font);font-size:1.05rem;font-style:italic;color:var(--yellow)}.career-draft-summary{color:var(--muted);line-height:1.55}.career-draft-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.career-draft-card{position:relative;min-width:0;padding:0 0 15px;overflow:hidden;border:1px solid color-mix(in srgb,var(--card-accent),transparent 58%);border-radius:16px 4px 16px 4px;color:white;background:linear-gradient(155deg,color-mix(in srgb,var(--card-accent),#06142e 82%),#061024 72%);cursor:pointer;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.career-draft-card:hover{transform:translateY(-6px);border-color:var(--card-accent);box-shadow:0 22px 46px rgba(0,0,0,.36),0 0 24px color-mix(in srgb,var(--card-accent),transparent 80%)}.career-draft-card>img{width:100%;aspect-ratio:1.55/1;object-fit:cover;background:rgba(255,255,255,.025)}.career-draft-card h3,.career-draft-card p,.career-draft-card .career-draft-fit,.career-draft-stats,.career-draft-card-top{margin-left:14px;margin-right:14px}.career-draft-card h3{margin-top:13px;margin-bottom:3px;font-size:1.04rem;text-transform:uppercase;font-style:italic}.career-draft-card p{margin-top:0;color:var(--muted);font-size:.7rem}.career-draft-card-top{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-between;pointer-events:none}.career-draft-card-top span,.career-draft-card-top strong{padding:6px 9px;border-radius:6px 2px 6px 2px;background:rgba(2,9,22,.88);backdrop-filter:blur(6px)}.career-draft-card-top span{border-left:3px solid var(--card-accent);font-size:.7rem;font-weight:900}.career-draft-card-top strong{color:var(--yellow);font-family:var(--display-font);font-size:1.1rem}.career-draft-fit{display:inline-flex;margin-top:8px;padding:5px 8px;border-left:3px solid var(--card-accent);color:var(--card-accent);background:color-mix(in srgb,var(--card-accent),transparent 92%);font-size:.58rem;font-weight:900}.career-draft-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px}.career-draft-stats span{display:grid;gap:1px;padding:6px 3px;text-align:center;background:rgba(255,255,255,.04)}.career-draft-stats small{color:var(--muted);font-size:.48rem}.career-draft-stats b{font-size:.77rem}.career-draft-finish-row{display:grid;grid-template-columns:auto minmax(220px,350px) auto;align-items:end;gap:12px}.career-draft-complete{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid rgba(105,242,177,.22);background:rgba(105,242,177,.06)}.career-draft-complete>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#061526;background:var(--green);font-weight:1000}.career-draft-complete b,.career-draft-complete small{display:block}.career-draft-complete small{margin-top:3px;color:var(--muted)} .career-season-roster-card{margin-top:20px;padding:20px}.career-season-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.career-roster-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:9px 11px;border-left:3px solid var(--card-accent);background:rgba(255,255,255,.025)}.career-roster-row.reserve{opacity:.72}.career-roster-row img{width:42px;height:42px;object-fit:cover;border-radius:8px}.career-roster-row span{min-width:0}.career-roster-row b,.career-roster-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.career-roster-row b{font-size:.75rem}.career-roster-row small{margin-top:2px;color:var(--muted);font-size:.55rem}.career-roster-row strong{color:var(--yellow);font-family:var(--display-font)} .career-transfer-panel{margin-top:18px;padding:20px}.career-transfer-panel>p{margin:0 0 16px;line-height:1.55}.career-transfer-lab{display:grid;gap:14px;margin-top:16px}.career-transfer-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.career-transfer-offer{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(112,212,255,.15);border-left:4px solid var(--card-accent);color:white;background:rgba(7,27,61,.8);cursor:pointer;text-align:left}.career-transfer-offer.selected{border-color:var(--yellow);background:rgba(255,211,43,.08)}.career-transfer-offer img{width:62px;height:62px;object-fit:cover;border-radius:8px}.career-transfer-offer span{min-width:0}.career-transfer-offer b,.career-transfer-offer small{display:block}.career-transfer-offer small{color:var(--muted);margin-top:2px}.career-transfer-offer strong{color:var(--yellow);font-family:var(--display-font);font-size:1.15rem}.career-transfer-outgoing{display:grid;gap:6px}.career-transfer-outgoing>p{color:var(--muted)}.career-transfer-out{display:flex;justify-content:space-between;padding:9px 11px;border:1px solid rgba(255,255,255,.08);color:white;background:rgba(255,255,255,.025);cursor:pointer}.career-transfer-out:hover{border-color:var(--cyan);background:rgba(85,232,255,.07)}.career-transfer-out small{color:var(--muted)} .career-result-primary-actions{display:flex;justify-content:center;margin:14px 0 20px}.career-season-return-top{min-width:min(440px,100%);min-height:54px;font-size:.92rem}.career-goal-timeline-block{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.career-goal-timeline{display:grid;gap:6px;margin-top:9px}.career-goal-row{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:8px;padding:8px 10px;border-left:3px solid var(--cyan);background:rgba(85,232,255,.045)}.career-goal-row.enemy{border-left-color:var(--red);background:rgba(255,85,125,.045)}.career-goal-row>span{color:var(--yellow);font-weight:900}.career-goal-row b,.career-goal-row small{display:block}.career-goal-row small{margin-top:2px;color:var(--muted);font-size:.58rem}.career-goal-row strong{justify-self:end;font-family:var(--display-font)}.career-no-goals{display:flex;align-items:center;gap:10px;padding:12px;color:var(--muted);background:rgba(255,255,255,.025)}.career-no-goals span{color:white;font-family:var(--display-font)} @media(max-width:900px){.career-draft-offers,.career-transfer-offers,.career-season-roster{grid-template-columns:1fr}.career-draft-finish-row{grid-template-columns:1fr}} /* 0.3D Career continuity & UI fixes */ [hidden] { display: none !important; } .career-longterm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.career-cup-panel,.career-history-panel{padding:20px}.career-cup-opponent{display:grid;gap:5px;padding:14px;margin:10px 0 14px;border-left:4px solid var(--yellow);background:rgba(255,211,43,.055)}.career-cup-opponent small{color:var(--muted);font-size:.58rem;letter-spacing:.12em;font-weight:900}.career-cup-opponent b{font-family:var(--display-font);font-style:italic;font-size:1.2rem}.career-cup-history,.career-history-list{display:grid;gap:7px;margin-top:14px}.career-cup-history>div,.career-history-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;background:rgba(255,255,255,.025);border-left:3px solid rgba(85,232,255,.55)}.career-cup-history span,.career-history-row span{min-width:0}.career-cup-history b,.career-cup-history small,.career-history-row b,.career-history-row small{display:block}.career-cup-history small,.career-history-row small{color:var(--muted);font-size:.58rem;margin-top:2px}.career-cup-history strong,.career-history-row strong{color:var(--yellow);font-size:.72rem;text-align:right}.career-draft-summary strong{color:var(--yellow)}@media(max-width:900px){.career-longterm-grid{grid-template-columns:1fr}} /* ============================================================ CAREER CORE 0.3E · SEASON CALENDAR & COMPETITION HUB ============================================================ */ .career-tab-hidden { display: none !important; } .career-season-clock { display: grid; gap: 2px; margin-top: 10px; } .career-season-clock small { color: var(--muted); font-size: .54rem; font-weight: 900; letter-spacing: .14em; } .career-season-clock b { color: var(--cyan); font-family: var(--display-font); font-size: .9rem; font-style: italic; } .career-calendar-season-timeline { display: flex; gap: 0; margin-top: 14px; max-width: 520px; } .career-calendar-season-timeline span { position: relative; flex: 1; display: grid; gap: 5px; color: #607c98; font-size: .48rem; font-weight: 900; text-align: center; } .career-calendar-season-timeline span::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(255,255,255,.09); } .career-calendar-season-timeline i { position: relative; z-index: 1; width: 12px; height: 12px; margin: 0 auto; border: 2px solid #405d78; border-radius: 50%; background: #071a38; } .career-calendar-season-timeline span.done i { border-color: var(--green); background: var(--green); box-shadow: 0 0 14px rgba(105,242,177,.35); } .career-calendar-season-timeline span.active { color: var(--yellow); } .career-calendar-season-timeline span.active i { border-color: var(--yellow); box-shadow: 0 0 16px rgba(255,211,43,.42); } .career-competition-tabs { position: sticky; z-index: 15; top: 90px; display: flex; gap: 5px; margin: 16px 0 22px; padding: 7px; overflow-x: auto; background: rgba(3,15,38,.93); backdrop-filter: blur(18px); } .career-competition-tabs::before { display: none; } .career-competition-tab { flex: 1 0 112px; min-height: 50px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px 2px 8px 2px; color: #94aec7; background: rgba(255,255,255,.018); cursor: pointer; text-align: left; } .career-competition-tab span { color: var(--cyan); font-family: var(--display-font); font-style: italic; text-align: center; } .career-competition-tab b { font-family: var(--display-font); font-size: .61rem; font-style: italic; text-transform: uppercase; } .career-competition-tab:hover, .career-competition-tab.active { color: white; border-color: rgba(85,232,255,.28); background: linear-gradient(120deg, rgba(23,107,255,.24), rgba(85,232,255,.07)); } .career-competition-tab.active { border-bottom-color: var(--yellow); box-shadow: inset 0 -2px 0 var(--yellow); } .career-next-duty-date { display: flex; justify-content: space-between; gap: 10px; margin: -2px 0 10px; padding: 8px 10px; border-left: 3px solid var(--yellow); color: var(--muted); background: rgba(255,211,43,.05); font-size: .65rem; } .career-next-duty-date b { color: var(--yellow); font-size: .63rem; letter-spacing: .08em; } .career-calendar-next-strip { display: grid; gap: 5px; margin: 16px 0; } .career-next-event { display: grid; grid-template-columns: 70px 28px minmax(0,1fr); align-items: center; gap: 8px; padding: 7px 9px; border-left: 2px solid rgba(118,219,255,.15); color: #8fa8bf; background: rgba(255,255,255,.018); } .career-next-event.next { border-left-color: var(--yellow); color: white; background: rgba(255,211,43,.045); } .career-next-event > span { font-size: .58rem; font-weight: 900; } .career-next-event > i { font-style: normal; text-align: center; } .career-next-event b, .career-next-event small { display: block; } .career-next-event b { font-size: .62rem; } .career-next-event small { margin-top: 1px; color: var(--muted); font-size: .55rem; } .career-calendar-panel { padding: 22px; margin-top: 18px; } .career-calendar-note { margin: 0 0 18px; max-width: 900px; color: var(--muted); line-height: 1.55; } .career-calendar-list { display: grid; gap: 18px; } .career-calendar-month { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 14px; align-items: start; } .career-calendar-month > header { position: sticky; top: 160px; padding: 11px; border-left: 4px solid var(--cyan); background: rgba(85,232,255,.045); } .career-calendar-month > header span, .career-calendar-month > header small { display: block; } .career-calendar-month > header span { font-family: var(--display-font); font-size: .75rem; font-style: italic; text-transform: uppercase; } .career-calendar-month > header small { margin-top: 3px; color: var(--muted); font-size: .52rem; letter-spacing: .1em; } .career-calendar-events { display: grid; gap: 5px; } .career-calendar-event { display: grid; grid-template-columns: 75px 34px minmax(0,1fr) 52px; align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px; border-left: 3px solid rgba(126,188,220,.14); background: rgba(255,255,255,.018); } .career-calendar-event time { display: grid; gap: 1px; } .career-calendar-event time b { color: var(--yellow); font-size: .56rem; text-transform: uppercase; } .career-calendar-event time span { color: #a7bed5; font-size: .59rem; } .career-calendar-event > i { font-style: normal; text-align: center; } .career-calendar-event > div b, .career-calendar-event > div small { display: block; } .career-calendar-event > div b { font-size: .7rem; } .career-calendar-event > div small { margin-top: 2px; color: var(--muted); font-size: .58rem; } .career-calendar-event > strong { justify-self: end; color: #5f7891; font-size: .58rem; } .career-calendar-event.completed { opacity: .62; border-left-color: var(--green); } .career-calendar-event.next { border-left-color: var(--yellow); background: linear-gradient(90deg, rgba(255,211,43,.08), rgba(255,255,255,.018)); box-shadow: inset 0 0 0 1px rgba(255,211,43,.10); } .career-calendar-event.next > strong { color: var(--yellow); } .career-calendar-event.cup { --event-accent: #ffcf2e; } .career-calendar-event.transfer { border-left-color: #ab7bff; } .career-calendar-event.locked { opacity: .35; filter: grayscale(.5); } .career-cup-hub-panel { width: 100%; padding: 22px; } .career-cup-scheduled { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(260px, 1.3fr); gap: 10px; margin-bottom: 20px; } .career-cup-scheduled > div { padding: 13px 15px; border-left: 3px solid var(--yellow); background: rgba(255,211,43,.045); } .career-cup-scheduled small, .career-cup-scheduled b { display: block; } .career-cup-scheduled small { color: var(--muted); font-size: .54rem; font-weight: 900; letter-spacing: .1em; } .career-cup-scheduled b { margin-top: 4px; font-family: var(--display-font); font-size: .88rem; font-style: italic; } .career-cup-scheduled p { margin: 5px 0 0; color: var(--muted); font-size: .64rem; } .career-cup-bracket-header { display: flex; justify-content: space-between; align-items: end; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); } .career-cup-bracket-header h3 { margin: 2px 0 0; text-transform: uppercase; } .career-cup-bracket-header > span { color: #768fa8; font-size: .62rem; font-weight: 900; letter-spacing: .1em; } .career-cup-bracket-scroll { margin-top: 13px; overflow-x: auto; padding-bottom: 12px; } .career-cup-bracket { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 12px; min-width: 1390px; align-items: start; } .career-bracket-round { display: grid; gap: 8px; } .career-bracket-round > header { min-height: 53px; display: grid; align-content: center; gap: 2px; padding: 8px 10px; border-bottom: 2px solid rgba(255,255,255,.08); } .career-bracket-round.current > header { border-bottom-color: var(--yellow); background: rgba(255,211,43,.045); } .career-bracket-round > header small { color: var(--muted); font-size: .52rem; } .career-bracket-round > header b { font-family: var(--display-font); font-size: .68rem; font-style: italic; } .career-bracket-round-matches { display: grid; gap: 6px; } .career-bracket-match { position: relative; padding: 6px 7px; border: 1px solid rgba(255,255,255,.06); border-left: 3px solid rgba(85,232,255,.14); background: rgba(255,255,255,.018); } .career-bracket-match.player-match { border-left-color: var(--yellow); background: rgba(255,211,43,.045); } .career-bracket-match > div { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 5px; min-height: 24px; align-items: center; } .career-bracket-match > div span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .58rem; } .career-bracket-match > div b { text-align: right; font-size: .62rem; } .career-bracket-match > div.winner span { color: white; font-weight: 900; } .career-bracket-match > small { display: block; margin-top: 3px; color: var(--muted); font-size: .48rem; text-align: right; } .career-bracket-placeholder { min-height: 105px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 12px; border: 1px dashed rgba(255,255,255,.1); color: #6e879f; text-align: center; } .career-bracket-placeholder > span { color: var(--cyan); font-size: 1.2rem; } .career-bracket-placeholder b { font-size: .57rem; } .career-bracket-placeholder small { font-size: .5rem; } .career-cup-history-block { margin-top: 18px; } .career-longterm-grid { grid-template-columns: 1fr; } @media (max-width: 900px) { .career-competition-tabs { top: 74px; } .career-calendar-month { grid-template-columns: 1fr; } .career-calendar-month > header { position: static; } .career-cup-scheduled { grid-template-columns: 1fr; } } @media (max-width: 600px) { .career-calendar-event { grid-template-columns: 62px 25px minmax(0,1fr); } .career-calendar-event > strong { grid-column: 3; justify-self: start; } .career-next-duty-date { display: grid; } } /* ============================================================ CAREER CORE 0.4A · TOP FIVE NATIONS + READABILITY FIXES ============================================================ */ .career-dev-lab, #career-mode-engine { display: none !important; } .career-country-selector { grid-column: 1 / -1; display: grid; gap: 12px; padding: 18px; margin: -4px -4px 4px; border: 1px solid rgba(85,232,255,.16); border-radius: 16px 4px 16px 4px; background: radial-gradient(circle at 88% 18%, rgba(255,211,43,.08), transparent 24%), linear-gradient(135deg, rgba(11,47,98,.7), rgba(4,16,38,.66)); } .career-country-selector > p { margin: 0; color: var(--muted); line-height: 1.55; } .career-country-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; } .career-country-card { position: relative; min-width: 0; min-height: 128px; display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: 1fr auto; align-items: start; gap: 8px 10px; padding: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-left: 4px solid var(--nation, var(--cyan)); border-radius: 12px 3px 12px 3px; color: white; background: linear-gradient(145deg, color-mix(in srgb,var(--nation),transparent 92%), rgba(4,18,43,.9)); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .career-country-card:hover, .career-country-card.active { transform: translateY(-3px); border-color: color-mix(in srgb,var(--nation),white 24%); border-left-color: var(--nation); background: linear-gradient(145deg, color-mix(in srgb,var(--nation),transparent 82%), rgba(5,23,53,.94)); box-shadow: 0 15px 32px rgba(0,0,0,.28), 0 0 20px color-mix(in srgb,var(--nation),transparent 84%); } .career-country-card.active::after { content: "SELECTED"; position: absolute; right: 8px; top: 8px; padding: 3px 5px; color: #061428; background: var(--yellow); font-size: .46rem; font-weight: 1000; letter-spacing: .08em; } .career-country-flag { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 1.65rem; } .career-country-card div { min-width: 0; } .career-country-card b, .career-country-card small, .career-country-card em { display: block; } .career-country-card b { padding-right: 34px; font-family: var(--display-font); font-size: .78rem; font-style: italic; text-transform: uppercase; } .career-country-card small { margin-top: 4px; color: #c1d7e8; font-size: .59rem; } .career-country-card em { margin-top: 6px; color: #718ea8; font-size: .51rem; font-style: normal; line-height: 1.4; } .career-country-card > strong { grid-column: 2; justify-self: start; padding: 4px 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; color: var(--nation,var(--cyan)); background: rgba(255,255,255,.025); font-size: .48rem; letter-spacing: .08em; } .career-country-detail { display:none; } /* Table gets the room it actually needs. */ .career-season-table-card:not(.career-tab-hidden) { grid-column: 1 / -1 !important; width: 100%; max-width: none; min-width: 0; padding: 26px 28px; } .career-season-table-scroll { width: 100%; overflow-x: auto; padding-bottom: 4px; } .career-season-table-head, .career-season-table-row { grid-template-columns: 46px minmax(300px, 2.8fr) repeat(4, 64px) 100px 72px 76px; gap: 6px; min-width: 970px; } .career-season-table-head { padding: 0 14px 10px; font-size: .60rem; } .career-season-table-row { min-height: 43px; padding: 7px 14px; font-size: .75rem; } .career-season-club { min-width: 0; gap: 9px; } .career-season-club b, .career-season-club span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .career-season-table-row strong { font-size: .84rem; } .career-result-decision { width: min(520px, 100%); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; margin: 4px auto 14px; padding: 10px 15px; border: 1px solid rgba(255,211,43,.32); border-left: 5px solid var(--yellow); border-radius: 8px 2px 8px 2px; background: linear-gradient(90deg, rgba(255,211,43,.10), rgba(5,23,53,.85)); text-align: left; } .career-result-decision[hidden] { display:none; } .career-result-decision span { color: var(--yellow); font-size: .56rem; font-weight: 1000; letter-spacing: .12em; } .career-result-decision b { grid-row: 1 / 3; grid-column: 2; color: white; font-family: var(--display-font); font-size: 1.2rem; font-style: italic; } .career-result-decision small { color: var(--muted); font-size: .62rem; } .career-goal-row.decision { border-left-color: var(--yellow); background: rgba(255,211,43,.055); } .career-goal-row.decision.shootout { border-left-color: #b58cff; background: rgba(181,140,255,.075); } .career-goal-row.decision.shootout > span { color:#caa8ff; } /* Dynamic cup round count. */ .career-cup-bracket { grid-template-columns: repeat(var(--cup-rounds, 6), minmax(210px,1fr)); min-width: max(1180px, calc(var(--cup-rounds, 6) * 222px)); } @media (max-width: 1250px) { .career-country-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 760px) { .career-country-grid { grid-template-columns: 1fr; } .career-country-card { min-height: 105px; } .career-season-table-card:not(.career-tab-hidden) { padding: 18px 14px; } .career-season-table-head,.career-season-table-row { min-width: 900px; } } /* ============================================================ CAREER CORE 0.4A.1 · RARE MATCH EVENTS & SHOOTOUT DETAILS ============================================================ */ .career-feed-event.card-player.yellow, .career-feed-event.card-enemy.yellow { border-left-color:#ffd83d; } .career-feed-event.card-player.red, .career-feed-event.card-enemy.red { border-left-color:#ff4f67; } .career-feed-event.penalty-player, .career-feed-event.penalty-enemy, .career-feed-event.freekick-player, .career-feed-event.freekick-enemy { border-left-color:#ffcf2e; } .career-shootout-list { display:grid; gap:4px; width:min(760px,100%); margin:14px auto 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.10); text-align:left; } .career-shootout-head, .career-shootout-round { display:grid; grid-template-columns:52px minmax(0,1fr) minmax(0,1fr); gap:7px; align-items:center; } .career-shootout-head { padding:0 8px 5px; color:#7f9db8; font-size:.54rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .career-shootout-round { padding:7px 8px; background:rgba(255,255,255,.025); } .career-shootout-round > span { color:var(--yellow); font-size:.6rem; font-weight:900; } .career-shootout-round .player, .career-shootout-round .enemy { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; } .career-shootout-round b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.65rem; } .career-shootout-round i { font-style:normal; } .career-goal-row.penalty-kick { border-left-color:#ffcf2e; background:rgba(255,207,46,.045); } @media(max-width:600px){ .career-shootout-head,.career-shootout-round{grid-template-columns:42px minmax(0,1fr);} .career-shootout-head b:last-child,.career-shootout-round .enemy{grid-column:2;} } .career-europe-panel{padding:22px;margin-top:18px;border-top:3px solid var(--europe-accent,#5aa8ff)}.career-europe-meta{color:var(--muted)}.career-europe-empty{display:grid;place-items:center;gap:4px;min-height:150px;border:1px dashed rgba(255,255,255,.12);text-align:center;color:var(--muted)}.career-europe-empty>span{font-size:2rem;color:#5aa8ff}.career-europe-empty>b{color:white}.career-europe-route{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.career-europe-route span{padding:7px 10px;background:rgba(255,255,255,.035);font-size:.58rem;font-weight:900}.career-europe-route span.active{color:#07152b;background:var(--europe-accent,#5aa8ff)}.career-europe-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.career-europe-table,.career-europe-fixtures{display:grid;gap:4px;max-height:650px;overflow:auto}.career-europe-row{display:grid;grid-template-columns:34px minmax(180px,1fr) 48px 58px 45px;gap:8px;align-items:center;padding:7px 9px;background:rgba(255,255,255,.022);border-left:3px solid transparent}.career-europe-row.player{border-left-color:var(--yellow);background:rgba(255,211,43,.055)}.career-europe-row small{text-align:center;color:var(--muted)}.career-europe-row strong{text-align:right;color:var(--yellow)}.career-europe-fixtures>div{display:grid;grid-template-columns:55px minmax(0,1fr) 160px 45px;gap:8px;padding:9px;background:rgba(255,255,255,.022);align-items:center}.career-europe-fixtures>div.next{border-left:3px solid var(--yellow);background:rgba(255,211,43,.05)}.career-europe-fixtures small{color:var(--muted)}@media(max-width:900px){.career-europe-grid{grid-template-columns:1fr}.career-europe-row{min-width:520px}} /* ============================================================ BUILD 0.4C · WORLD IDENTITY REFRESH ============================================================ */ :root{--shell-accent:#55e8ff;--shell-accent-2:#ffd32b;--shell-border:rgba(124,199,238,.18)} .panel{border-radius:13px 4px 13px 4px;border-color:var(--shell-border);box-shadow:0 18px 48px rgba(0,0,0,.26)} .panel::before{width:54px;height:3px;opacity:.5} body.reconnect-style,body.reconnect-style::before,body.reconnect-style::after{transition:background .28s ease,opacity .28s ease} body[data-world-theme="career"],body[data-world-theme="football-arcade"]{--shell-accent:#58d68d;--shell-accent-2:#f3f5f4} body[data-world-theme="chess"]{--shell-accent:#8eaf76;--shell-accent-2:#eeeed2} body[data-world-theme="data"]{--shell-accent:#8e7dff;--shell-accent-2:#59e2ff} body[data-world-theme="cards"]{--shell-accent:#d07cff;--shell-accent-2:#ffd36a} body[data-world-theme="music"]{--shell-accent:#ffbe46;--shell-accent-2:#8b80ff} body[data-world-theme="career"]{background:linear-gradient(rgba(5,17,20,.94),rgba(5,17,20,.94)),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 8%,rgba(0,0,0,.025) 8% 16%),linear-gradient(150deg,#0b3225,#071412 58%,#050c0d)} body[data-world-theme="career"]::before{opacity:.18;background-image:linear-gradient(rgba(116,190,145,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(116,190,145,.09) 1px,transparent 1px);background-size:72px 72px} body[data-world-theme="career"]::after{opacity:.14;background:radial-gradient(ellipse at 50% 110%,rgba(73,185,110,.36),transparent 43%),linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.15) 49.9% 50.1%,transparent 50.2%)} body[data-world-theme="chess"]{background:radial-gradient(circle at 75% 10%,rgba(118,150,86,.08),transparent 26%),linear-gradient(155deg,#181817,#20201e 48%,#151514)} body[data-world-theme="chess"]::before{opacity:.08;background-size:80px 80px;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)} body[data-world-theme="chess"]::after{opacity:0} body[data-world-theme="arcade"]{background:radial-gradient(circle at 14% 10%,rgba(56,190,255,.26),transparent 27%),radial-gradient(circle at 88% 12%,rgba(255,203,47,.15),transparent 22%),linear-gradient(150deg,#031024,#082b57 52%,#040b18)} body[data-world-theme="cards"]{background:radial-gradient(circle at 78% 10%,rgba(190,91,255,.17),transparent 24%),linear-gradient(150deg,#08091a,#15103a 52%,#080814)} body[data-world-theme="data"]{background:radial-gradient(circle at 16% 10%,rgba(112,82,255,.2),transparent 25%),linear-gradient(150deg,#080a1e,#11133b 52%,#050713)} body[data-world-theme="music"]{background:radial-gradient(circle at 80% 10%,rgba(255,188,63,.13),transparent 25%),radial-gradient(circle at 15% 25%,rgba(124,105,255,.14),transparent 28%),linear-gradient(150deg,#0b0b19,#171333 52%,#070812)} .topbar{border-bottom-color:color-mix(in srgb,var(--shell-accent),transparent 72%)} .topbar::after{background:linear-gradient(90deg,transparent 2%,var(--shell-accent) 20%,var(--shell-accent-2) 72%,transparent 98%)} .nav-button.active::after{background:var(--shell-accent);box-shadow:0 0 14px color-mix(in srgb,var(--shell-accent),transparent 35%)} /* HUB */ body[data-world-theme="hub"] .unleashed-hero{min-height:520px} body[data-world-theme="hub"] .unleashed-hero::before{opacity:.78} body[data-world-theme="hub"] .unleashed-hero h1 strong{font-size:1.02em} .hub-network-strip{margin-top:-28px;opacity:.72}.hub-network-strip>span{min-height:62px}.hub-network-strip i{font-size:1.05rem}.hub-network-strip b{font-size:.55rem} .hub-world-gates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:26px} .hub-world-gate{position:relative;min-height:230px;display:grid;align-content:end;gap:5px;padding:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px 4px 18px 4px;color:white;background:#081b36;cursor:pointer;text-align:left;transition:.18s ease} .hub-world-gate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,var(--gate-glow),transparent 27%),linear-gradient(145deg,var(--gate-bg),#061225 72%)} .hub-world-gate::after{content:"";position:absolute;width:220px;height:220px;right:-92px;top:-105px;border:22px solid var(--gate-accent);border-radius:50%;opacity:.11} .hub-world-gate>*{position:relative;z-index:2}.hub-world-gate:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gate-accent),white 18%);box-shadow:0 24px 55px rgba(0,0,0,.31)} .hub-world-gate small{color:color-mix(in srgb,var(--gate-accent),white 22%);font-size:.61rem;font-weight:950;letter-spacing:.13em}.hub-world-gate h2{margin:1px 0 2px;font-size:clamp(1.55rem,3vw,2.6rem);text-transform:uppercase;font-style:italic}.hub-world-gate p{max-width:480px;margin:0 0 12px;color:#b8c8d9}.hub-world-gate strong{color:var(--gate-accent);font-size:.68rem;letter-spacing:.1em}.hub-gate-symbol{position:absolute;right:24px;top:20px;font-size:2.4rem;opacity:.9} .hub-world-gate.career{--gate-accent:#64df8d;--gate-bg:#0c3b2b;--gate-glow:rgba(73,218,120,.27)}.hub-world-gate.arcade{--gate-accent:#55e8ff;--gate-bg:#0a3e72;--gate-glow:rgba(60,195,255,.28)}.hub-world-gate.cards{--gate-accent:#d078ff;--gate-bg:#2b1957;--gate-glow:rgba(190,91,255,.24)}.hub-world-gate.music{--gate-accent:#ffbf45;--gate-bg:#3f2a17;--gate-glow:rgba(255,178,65,.22)} .hub-status-bar{display:grid;grid-template-columns:1.5fr repeat(4,.55fr);margin-top:13px;border:1px solid rgba(121,201,242,.13);background:rgba(4,17,37,.72)} .hub-status-bar>div{min-height:72px;display:grid;align-content:center;padding:12px 16px;border-right:1px solid rgba(255,255,255,.055)}.hub-status-bar span{color:#6f8aa5;font-size:.52rem;font-weight:900;letter-spacing:.11em}.hub-status-bar b{margin-top:3px;font-family:var(--display-font);font-size:1rem}.hub-profile-primary{grid-template-columns:1fr auto}.hub-profile-primary span,.hub-profile-primary b{grid-column:1}.hub-profile-primary i{grid-column:2;grid-row:1/3;align-self:center;min-width:40px;text-align:center;color:var(--yellow);font-family:var(--display-font);font-size:1.25rem;font-style:italic} .hub-quick-heading{margin-top:34px}.hub-quick-grid .game-card{min-height:190px}.hub-quick-grid .game-card h3{margin-top:63px}.hub-quick-grid .game-card .game-icon{top:43px} /* CAREER */ body[data-world-theme="career"] .topbar{background:rgba(7,16,15,.94);border-bottom:1px solid rgba(102,190,130,.18)}body[data-world-theme="career"] .brand-text small{color:#8bbf9d} #view-career-core{--career-green:#49b96e;--career-lime:#dbf2e2;--career-dark:#0b1514} #view-career-core .panel::before{display:none}#view-career-core .panel{border-radius:8px;border-color:#263a34;background:#101b19;box-shadow:0 12px 32px rgba(0,0,0,.22)} #view-career-core .career-game-header{min-height:92px;padding:0 20px;border:1px solid #263a34;border-left:5px solid #49b96e;border-radius:6px;background:linear-gradient(90deg,rgba(73,185,110,.11),transparent 35%),#0b1514} #view-career-core .career-game-header h1{font-style:normal;letter-spacing:-.055em;text-shadow:none}#view-career-core .career-engine-chip{border-radius:4px;color:#d9e8de;background:#14221f} .career-broadcast-bar{min-height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin:-13px 0 17px;padding:0 17px;border-bottom:1px solid #244036;color:#829b90;background:#07110f;font-size:.55rem;font-weight:900;letter-spacing:.12em}.career-broadcast-bar span:last-child{text-align:right}.career-broadcast-bar b{color:#d6e8db;font-size:.57rem}.career-broadcast-bar i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#49b96e} #view-career-core .career-season-hero{position:relative;min-height:190px;padding:24px 28px;border-left:5px solid #49b96e;background:linear-gradient(90deg,rgba(255,255,255,.018) 50%,transparent 50%) 0 0/74px 100%,linear-gradient(125deg,#183126,#0b1714 65%)}#view-career-core .career-season-hero::after{content:"";position:absolute;right:5%;top:-40px;width:230px;height:230px;border:1px solid rgba(255,255,255,.13);border-radius:50%;opacity:.42} #view-career-core .career-season-hero h2{color:#f4f8f5;font-style:normal;text-shadow:none;letter-spacing:-.04em}#view-career-core .career-season-progress{height:5px;background:#25352f}#view-career-core .career-season-progress i{background:#55c778;box-shadow:none} #view-career-core .career-season-kpis{position:relative;z-index:2;gap:0;border:1px solid #30443d;background:#0b1514}#view-career-core .career-season-kpis span{min-width:95px;border-right:1px solid #263a34;background:transparent}#view-career-core .career-season-kpis b{color:white} #view-career-core .career-competition-tabs{top:82px;padding:0;gap:0;border-radius:5px;border-color:#293d36;background:#0a1412}#view-career-core .career-competition-tab{min-height:48px;border:0;border-right:1px solid #23332e;border-radius:0;color:#849b91;background:transparent}#view-career-core .career-competition-tab span{color:#8cae98}#view-career-core .career-competition-tab:hover,#view-career-core .career-competition-tab.active{color:white;background:#14231e;box-shadow:none}#view-career-core .career-competition-tab.active{border-bottom:3px solid #58c87a} #view-career-core .career-season-next{border-top:4px solid #57c97a}#view-career-core .career-season-next-badge{border-radius:7px;box-shadow:none}#view-career-core .career-next-duty-date,#view-career-core .career-season-strength{border-left-color:#57c97a;background:rgba(87,201,122,.06);color:#b6d3c0}#view-career-core .career-season-kickoff{border-radius:5px;color:#08140e;background:#61d486;box-shadow:none} #view-career-core .career-season-table-card{padding:18px 20px 20px;border-top:4px solid #294b3c}#view-career-core .career-season-table-head{color:#789085;border-bottom:1px solid #30423c}#view-career-core .career-season-table-row{border-radius:0;border-bottom:1px solid #1e302a;background:transparent}#view-career-core .career-season-table-row:hover{background:#15251f}#view-career-core .career-season-table-row.player{background:#193126;box-shadow:inset 4px 0 0 #58c87a} #view-career-core .career-country-card,#view-career-core .career-draft-card,#view-career-core .career-transfer-offer,#view-career-core .career-roster-row{border-radius:5px} #view-career-core .career-season-roster-card,#view-career-core .career-transfer-panel,#view-career-core .career-cup-hub-panel,#view-career-core .career-europe-panel,#view-career-core .career-calendar-panel,#view-career-core .career-history-panel{border-top:4px solid #294b3c} #view-career-core .eyebrow{color:#77b58c}#view-career-core .status-tag{border-color:#355148;color:#a7c4b3;background:#12211c} /* ARCADE */ body[data-world-theme="arcade"] .topbar{background:rgba(3,15,35,.9)} #view-arcade .arcade-world-heading{min-height:300px;margin-bottom:16px;background:radial-gradient(circle at 83% 32%,rgba(255,211,43,.22),transparent 20%),linear-gradient(120deg,#0a4f99,#09275a 60%,#07152e)} #view-arcade .arcade-world-heading::after{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(120deg,transparent 0 52px,rgba(255,255,255,.1) 53px 56px)}#view-arcade .arcade-world-heading>*{position:relative;z-index:2} .arcade-category-strip{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:18px;border:1px solid rgba(95,208,255,.16);background:#06172f}.arcade-category-strip span{min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px;border-right:1px solid rgba(255,255,255,.06)}.arcade-category-strip i{font-style:normal;font-size:1.05rem}.arcade-category-strip b{color:#9bb8d5;font-size:.56rem;letter-spacing:.1em} .arcade-world-grid{gap:13px}.arcade-world-grid .game-card{min-height:285px;border-radius:16px 4px 16px 4px;border-color:rgba(103,204,255,.16);background:#0a2750}.arcade-world-grid .game-card h3{font-style:italic;text-transform:uppercase}.arcade-world-grid .game-card:hover{transform:translateY(-5px) skewY(-.35deg)} /* CHESS */ body[data-world-theme="chess"] .topbar{background:rgba(25,25,23,.96);border-bottom-color:rgba(255,255,255,.09)}body[data-world-theme="chess"] .brand-mark{filter:saturate(.25)} #view-chess .game-header{min-height:76px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.11)}#view-chess .game-header h1{font-size:clamp(2rem,4vw,3.7rem);font-style:normal;letter-spacing:-.05em;text-shadow:none}#view-chess .game-header .eyebrow{color:#9caf8c;letter-spacing:.11em}#view-chess .game-session-rings{border-color:rgba(255,255,255,.12);background:#262624} #view-chess .panel::before{display:none}#view-chess .panel{border-radius:7px;border-color:#383835;background:#242422;box-shadow:0 14px 35px rgba(0,0,0,.22)} #view-chess .chess-intro-panel{min-height:420px;padding:34px;background:#242422}#view-chess .chess-intro-panel::before,#view-chess .chess-intro-panel::after{display:none}#view-chess .chess-signal-emblem{width:72px;height:72px;margin-bottom:22px;border:0;border-radius:6px;color:#eeeed2;background:#3b4b31;box-shadow:none;font-size:3rem;transform:none} #view-chess .chess-intro-panel h2{max-width:700px;font-size:clamp(1.7rem,3vw,2.8rem);font-style:normal;text-transform:none;letter-spacing:-.04em;text-shadow:none}#view-chess .chess-intro-panel>p:not(.eyebrow){color:#b7b7b1} #view-chess .chess-mode-grid{gap:8px}#view-chess .chess-mode-card{min-height:125px;border-radius:6px;border-color:#3a3a37;background:#2b2b28}#view-chess .chess-mode-card:hover,#view-chess .chess-mode-card.selected{transform:none;border-color:#769656;background:#31342e;box-shadow:none}#view-chess .chess-mode-card>span{color:#9db58a} #view-chess .chess-bank-banner{border-radius:5px;border-color:#3d4437;background:#2c3028}#view-chess .chess-bank-banner>span,#view-chess .chess-bank-banner b{color:#cbd8bd}#view-chess .primary-button{color:white;background:#769656;box-shadow:none}#view-chess .primary-button:hover:not(:disabled){background:#85a765;box-shadow:none}#view-chess .secondary-button,#view-chess .back-button{border-color:#44443f;background:#2c2c29}#view-chess .select-input{border-color:#44443f;background:#1e1e1c}#view-chess .field-label{color:#a7a79f} /* Supporting theme cues */ body[data-world-theme="football-arcade"] #view-penalty .game-header{border-bottom:3px solid #57c97a}body[data-world-theme="football-arcade"] #view-penalty .match-scoreboard{background:#111918;border-color:#2b4138} body[data-world-theme="data"] #view-data-rush .game-header{border-bottom:3px solid #8e7dff}body[data-world-theme="speed"] .game-header{border-bottom:3px solid #55e8ff}body[data-world-theme="cards"] .game-header{border-bottom:3px solid #c67cff} @media(max-width:980px){.hub-world-gates{grid-template-columns:1fr}.hub-status-bar{grid-template-columns:1.5fr repeat(2,1fr)}.career-broadcast-bar{grid-template-columns:1fr 1fr}.career-broadcast-bar b{display:none}} @media(max-width:700px){.hub-status-bar{grid-template-columns:1fr 1fr}.hub-profile-primary{grid-column:1/-1}.hub-world-gate{min-height:190px;padding:20px}.arcade-category-strip{grid-template-columns:repeat(2,1fr)}.arcade-category-strip span:last-child{grid-column:1/-1}.career-broadcast-bar{display:none}#view-career-core .career-season-hero{padding:20px}} /* ============================================================ BUILD 0.4D · SONIC CORE PACK 01 + CARD COLLECTION ============================================================ */ .hub-world-gate.collection{--gate-accent:#5be8ff;--gate-bg:#102c61;--gate-glow:rgba(70,213,255,.29);grid-column:1/-1;min-height:185px;background:#071b3a} .hub-world-gate.collection::after{right:4%;top:-150px;width:310px;height:310px;border-color:#ffd45c;opacity:.13} .hub-world-gate.collection .hub-gate-symbol{font-size:2.7rem} #view-card-collection{--collection-cyan:#59e8ff;--collection-gold:#f7ce58;--collection-navy:#071a3b} #view-card-collection .collection-game-header{min-height:92px;padding:0 20px;border:1px solid rgba(91,232,255,.2);border-left:5px solid var(--collection-cyan);border-radius:8px;background:linear-gradient(90deg,rgba(61,186,255,.12),transparent 38%),#07162d} #view-card-collection .collection-game-header h1{font-style:italic;letter-spacing:-.055em;text-shadow:0 0 22px rgba(88,231,255,.16)} #view-card-collection .collection-chip{border-color:rgba(247,206,88,.28);color:#f7dd8c;background:rgba(247,206,88,.07)} .collection-hero{position:relative;min-height:235px;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:30px;padding:30px;margin:18px 0;overflow:hidden;border-color:rgba(88,231,255,.17);background:radial-gradient(circle at 82% 32%,rgba(255,208,78,.13),transparent 23%),linear-gradient(125deg,#0b2f68,#07172f 65%,#060e1d)} .collection-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(120deg,transparent 0 52px,rgba(94,226,255,.23) 53px 55px,transparent 56px 90px)} .collection-hero>*{position:relative;z-index:2}.collection-hero h2{max-width:800px;margin-bottom:9px;font-size:clamp(1.6rem,3vw,2.8rem);font-style:italic;text-transform:uppercase}.collection-hero p:not(.eyebrow){max-width:850px;margin:0;color:#b8cbe0;line-height:1.65} .collection-hero-signal{justify-self:end;width:190px;aspect-ratio:1;display:grid;place-items:center;align-content:center;border:1px solid rgba(255,215,89,.42);border-radius:50%;background:radial-gradient(circle,rgba(30,145,255,.31),rgba(4,15,34,.92) 64%);box-shadow:0 0 0 9px rgba(88,231,255,.05),0 0 0 20px rgba(255,211,70,.025),0 24px 55px rgba(0,0,0,.3)} .collection-hero-signal span{color:#8ceeff;font-size:.65rem;font-weight:1000;letter-spacing:.18em}.collection-hero-signal b{margin:-2px 0 -5px;color:white;font-family:var(--display-font);font-size:4.2rem;font-style:italic;line-height:1}.collection-hero-signal i{color:#f6d45f;font-size:.54rem;font-style:normal;font-weight:950;letter-spacing:.08em} .collection-toolbar{display:grid;grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(150px,.72fr)) auto;gap:10px;align-items:end;padding:14px 16px;margin-bottom:20px;border-color:rgba(88,231,255,.14);background:rgba(5,18,38,.88)} .collection-toolbar label{display:grid;gap:6px}.collection-toolbar label>span{color:#7899b7;font-size:.52rem;font-weight:950;letter-spacing:.12em}.collection-toolbar .select-input,.collection-search-field input{width:100%;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:0 11px;color:white;background:#08172c;font:inherit;font-size:.72rem;outline:none}.collection-toolbar .select-input:focus,.collection-search-field input:focus{border-color:rgba(88,231,255,.55);box-shadow:0 0 0 3px rgba(88,231,255,.08)}.collection-search-field input::placeholder{color:#58718a}.collection-count{min-height:42px;display:grid;place-items:center;padding:0 13px;border-left:3px solid var(--collection-gold);color:#f6d971;background:rgba(255,211,70,.06);font-size:.65rem;letter-spacing:.08em;white-space:nowrap} .card-collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;align-items:start} .collection-card-button{min-width:0;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;text-align:inherit;transition:transform .18s ease,filter .18s ease}.collection-card-button:hover{transform:translateY(-8px);filter:brightness(1.05)}.collection-card-button:focus-visible{outline:2px solid var(--collection-cyan);outline-offset:5px;border-radius:24px} .collection-empty{min-height:210px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center}.collection-empty[hidden]{display:none}.collection-empty span{font-size:2.4rem;color:#5de6ff}.collection-empty small{color:var(--muted)} .world-football-card{--world-edge:#f2cc5d;position:relative;width:100%;aspect-ratio:.735;container-type:inline-size;filter:drop-shadow(0 20px 21px rgba(0,0,0,.34));user-select:none}.world-card-shell{position:relative;width:100%;height:100%;display:grid;grid-template-rows:15% 48% 11% 16% 10%;overflow:hidden;border:2px solid var(--world-edge);border-radius:11% 11% 12% 12% / 7% 7% 8% 8%;background:linear-gradient(145deg,#123d83,#071c4b 62%,#040d22);clip-path:polygon(8% 3.2%,34% 3.2%,40% .5%,46% 4%,50% .5%,54% 4%,60% .5%,66% 3.2%,92% 3.2%,97% 9%,97% 90%,91% 97%,58% 97%,50% 100%,42% 97%,9% 97%,3% 90%,3% 9%);isolation:isolate} .world-card-shell::before{content:"";position:absolute;inset:1.4%;z-index:7;pointer-events:none;border:1px solid rgba(255,255,255,.58);border-radius:10% 10% 11% 11% / 7% 7% 8% 8%;clip-path:inherit;opacity:.55}.world-card-shell::after{content:"";position:absolute;inset:3.2%;z-index:7;pointer-events:none;border:1px solid rgba(62,211,255,.48);border-radius:9%;clip-path:inherit;opacity:.68} .world-card-speedlines{position:absolute;z-index:-1;inset:0;opacity:.55;background:repeating-linear-gradient(128deg,transparent 0 7%,rgba(44,207,255,.14) 7.5% 8.1%,transparent 8.5% 14%),linear-gradient(145deg,transparent 35%,rgba(79,230,255,.16) 36% 42%,transparent 43%)} .world-card-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;padding:11% 11% 0 11%}.world-card-rating{display:grid;gap:0;text-align:left;text-shadow:0 2px 8px rgba(0,0,0,.65)}.world-card-rating strong{font-family:var(--display-font);font-size:17cqw;line-height:.72;letter-spacing:-.08em;font-style:italic}.world-card-rating b{margin-top:3cqw;color:#f4d05c;font-size:6.4cqw;line-height:1;text-transform:uppercase}.world-card-world{max-width:43%;display:grid;justify-items:end;gap:1.4cqw;text-align:right}.world-card-world i{width:9cqw;height:9cqw;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:#eaf8ff;background:rgba(4,19,49,.55);font-size:4.4cqw;font-style:normal}.world-card-world span{padding-bottom:1.4cqw;border-bottom:1px solid rgba(255,255,255,.4);font-size:4.5cqw;font-weight:1000;text-transform:uppercase;line-height:1.05} .world-card-art{position:relative;z-index:2;min-height:0;margin:-2% 5% -1%;overflow:visible}.world-card-art::before{content:"";position:absolute;z-index:-1;left:8%;right:7%;bottom:6%;height:42%;border-radius:50%;background:radial-gradient(ellipse,rgba(66,211,255,.42),transparent 66%);filter:blur(10px)}.world-card-art img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:var(--art-x) var(--art-y);transform:scale(var(--art-scale));transform-origin:var(--art-x) var(--art-y);filter:drop-shadow(0 12px 9px rgba(0,0,0,.48))}.world-card-orbit{position:absolute;z-index:-1;border:1.6cqw solid #f1c848;border-radius:50%;box-shadow:inset 0 0 0 .5cqw #8d6500,0 0 2cqw rgba(255,220,93,.35);opacity:.88}.world-card-orbit.orbit-a{width:16cqw;height:16cqw;left:6%;top:27%;transform:rotate(-18deg)}.world-card-orbit.orbit-b{width:10cqw;height:10cqw;right:8%;bottom:13%;transform:rotate(16deg)}.world-card-fit{position:absolute;right:3%;bottom:2%;z-index:5;padding:1.5cqw 2.2cqw;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#d9f9ff;background:rgba(3,15,37,.74);font-size:2.6cqw;font-style:normal;font-weight:1000;letter-spacing:.04em;backdrop-filter:blur(8px)} .world-card-copy{position:relative;z-index:3;display:grid;align-content:center;justify-items:center;min-width:0;padding:0 9%;text-align:center}.world-card-copy small{max-width:100%;overflow:hidden;color:#8edfff;font-size:2.5cqw;font-weight:900;letter-spacing:.12em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.world-card-copy h3{max-width:100%;margin:.5cqw 0 0;overflow:hidden;color:white;font-family:var(--display-font);font-size:8.7cqw;font-style:italic;line-height:.88;letter-spacing:-.055em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;text-shadow:0 3px 8px rgba(0,0,0,.7)} .world-card-stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(var(--stat-count),1fr);align-items:center;margin:0 8%;border-top:1px solid rgba(255,255,255,.32);border-bottom:1px solid rgba(255,255,255,.14);background:rgba(2,13,38,.36)}.world-card-stats span{position:relative;display:grid;place-items:center;gap:.1cqw;min-width:0;padding:1.6cqw .4cqw}.world-card-stats span+span::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(247,205,88,.48)}.world-card-stats small{color:#6ee3ff;font-size:3.05cqw;font-weight:1000;font-style:italic}.world-card-stats b{font-family:var(--display-font);font-size:7.5cqw;line-height:1;font-style:italic;letter-spacing:-.05em}.world-card-tier{position:relative;z-index:3;align-self:center;justify-self:center;display:flex;align-items:center;gap:2cqw;min-width:38%;justify-content:center;padding:1.6cqw 5cqw;border:1px solid rgba(247,205,88,.6);clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);color:#f4d26d;background:linear-gradient(180deg,rgba(5,31,79,.94),rgba(2,14,43,.94));font-size:3.8cqw;font-weight:1000;font-style:italic;letter-spacing:.1em}.world-card-tier i{font-size:3cqw;font-style:normal} .world-football-card.full-card{filter:drop-shadow(0 18px 24px rgba(0,0,0,.36))}.world-football-card.full-card .world-card-final-shell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.world-football-card.full-card .world-card-final-image{display:block;width:100%;height:100%;object-fit:contain}.world-card-fit-overlay{right:3.5%;bottom:2.5%;z-index:4}. /* World identities: shared football grammar, different universe DNA. */ .world-football-card[data-universe="sonic"]{--world-edge:#f2ca54}.world-football-card[data-universe="sonic"] .world-card-shell{background:radial-gradient(circle at 70% 42%,color-mix(in srgb,var(--card-accent),transparent 66%),transparent 25%),linear-gradient(145deg,#0c4da8,#072d73 52%,#041743 82%,#020c24)}.world-football-card[data-universe="sonic"] .world-card-speedlines{opacity:.92;background:repeating-linear-gradient(132deg,transparent 0 8%,rgba(49,213,255,.3) 8.4% 9.2%,transparent 9.7% 15%),linear-gradient(145deg,transparent 30%,rgba(69,223,255,.26) 31% 39%,transparent 40%),linear-gradient(35deg,transparent 64%,rgba(255,213,78,.16) 65% 67%,transparent 68%)} .world-football-card[data-universe="cars"]{--world-edge:#dbe2e8}.world-football-card[data-universe="cars"] .world-card-shell{background:radial-gradient(circle at 72% 34%,color-mix(in srgb,var(--card-accent),transparent 58%),transparent 24%),linear-gradient(145deg,#3a080b,#17191e 48%,#07090d 82%)}.world-football-card[data-universe="cars"] .world-card-speedlines{opacity:.5;background:repeating-conic-gradient(from 45deg at 88% 15%,rgba(255,255,255,.16) 0 25%,transparent 0 50%) 0 0/18px 18px,repeating-linear-gradient(120deg,transparent 0 8%,rgba(255,53,53,.2) 8.3% 9%,transparent 9.4% 15%)}.world-football-card[data-universe="cars"] .world-card-orbit{border-color:#d8e0e7;box-shadow:inset 0 0 0 .45cqw #5f6870,0 0 2cqw rgba(255,255,255,.18)}.world-football-card[data-universe="cars"] .world-card-rating b,.world-football-card[data-universe="cars"] .world-card-tier{color:#e5ebef}.world-football-card[data-universe="cars"] .world-card-stats small{color:#ff6666} .world-football-card[data-universe="dark-souls"]{--world-edge:#b59458}.world-football-card[data-universe="dark-souls"] .world-card-shell{background:radial-gradient(circle at 64% 58%,rgba(203,86,27,.24),transparent 25%),linear-gradient(155deg,#26221f,#0d0e0f 55%,#030404)}.world-football-card[data-universe="dark-souls"] .world-card-speedlines{opacity:.55;background:radial-gradient(circle at 18% 80%,rgba(255,102,24,.3) 0 1px,transparent 2px) 0 0/25px 34px,linear-gradient(140deg,transparent 50%,rgba(166,120,62,.12) 51% 52%,transparent 53%)}.world-football-card[data-universe="dark-souls"] .world-card-orbit{border-color:#9e7e4b;opacity:.35}.world-football-card[data-universe="dark-souls"] .world-card-stats small{color:#d99d57}.world-football-card[data-universe="dark-souls"] .world-card-copy small{color:#c2a677} .world-football-card[data-universe="sao"]{--world-edge:#eaf6ff}.world-football-card[data-universe="sao"] .world-card-shell{background:radial-gradient(circle at 74% 42%,rgba(93,220,255,.26),transparent 23%),linear-gradient(145deg,#135baa,#0a2d69 55%,#06152f)}.world-football-card[data-universe="sao"] .world-card-speedlines{opacity:.65;background:linear-gradient(rgba(114,226,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(114,226,255,.12) 1px,transparent 1px),linear-gradient(130deg,transparent 45%,rgba(255,255,255,.2) 46% 47%,transparent 48%);background-size:22px 22px,22px 22px,auto}.world-football-card[data-universe="sao"] .world-card-orbit{border-color:#dff9ff;opacity:.38}.world-football-card[data-universe="sao"] .world-card-rating b,.world-football-card[data-universe="sao"] .world-card-stats small{color:#8eeeff} .world-football-card[data-universe="zootopia"]{--world-edge:#b8e1ee}.world-football-card[data-universe="zootopia"] .world-card-shell{background:radial-gradient(circle at 75% 38%,color-mix(in srgb,var(--card-accent),transparent 70%),transparent 24%),linear-gradient(150deg,#153c58,#102b43 55%,#071622)}.world-football-card[data-universe="zootopia"] .world-card-speedlines{opacity:.45;background:linear-gradient(90deg,transparent 0 8%,rgba(91,218,255,.17) 8% 8.5%,transparent 8.5% 17%),linear-gradient(0deg,transparent 0 12%,rgba(255,255,255,.08) 12% 12.5%,transparent 12.5% 22%)}.world-football-card[data-universe="zootopia"] .world-card-orbit{border-color:#77dbef;opacity:.35}.world-football-card[data-universe="zootopia"] .world-card-stats small{color:#8edcf3} .world-football-card[data-universe="spongebob"]{--world-edge:#ffd94a}.world-football-card[data-universe="spongebob"] .world-card-shell{background:radial-gradient(circle at 78% 35%,rgba(255,233,78,.22),transparent 24%),linear-gradient(150deg,#008d9e,#075970 55%,#053248)}.world-football-card[data-universe="spongebob"] .world-card-speedlines{opacity:.55;background:radial-gradient(circle at 20% 25%,transparent 0 6px,rgba(161,247,255,.18) 7px 9px,transparent 10px),radial-gradient(circle at 80% 70%,transparent 0 10px,rgba(161,247,255,.16) 11px 13px,transparent 14px);background-size:70px 70px,95px 95px}.world-football-card[data-universe="spongebob"] .world-card-orbit{border-color:#ffdf50}.world-football-card[data-universe="spongebob"] .world-card-stats small{color:#ffe35e} .world-football-card[data-universe="bundesliga"]{--world-edge:color-mix(in srgb,var(--card-accent),white 40%)}.world-football-card[data-universe="bundesliga"] .world-card-shell{background:radial-gradient(circle at 73% 38%,color-mix(in srgb,var(--card-accent),transparent 65%),transparent 24%),linear-gradient(145deg,#1c242b,#0b1116 58%,#05080a)}.world-football-card[data-universe="bundesliga"] .world-card-speedlines{opacity:.4;background:repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.09) 11.2% 11.8%,transparent 12% 20%)}.world-football-card[data-universe="bundesliga"] .world-card-orbit{border-color:var(--card-accent);opacity:.45}.world-football-card[data-universe="bundesliga"] .world-card-stats small,.world-football-card[data-universe="bundesliga"] .world-card-copy small{color:color-mix(in srgb,var(--card-accent),white 35%)} .world-football-card[data-universe="chatter"]{--world-edge:#d17cff}.world-football-card[data-universe="chatter"] .world-card-shell{background:radial-gradient(circle at 73% 40%,rgba(208,92,255,.28),transparent 25%),linear-gradient(145deg,#102c61,#11163d 54%,#090b24)}.world-football-card[data-universe="chatter"] .world-card-speedlines{opacity:.75;background:linear-gradient(120deg,transparent 0 34%,rgba(70,229,255,.17) 35% 36%,transparent 37% 55%,rgba(213,105,255,.17) 56% 57%,transparent 58%),radial-gradient(circle,rgba(94,231,255,.32) 0 2px,transparent 3px) 0 0/34px 34px}.world-football-card[data-universe="chatter"] .world-card-stats small{color:#e58cff} /* Career draft now uses the same card renderer as the collection. */ .career-draft-card.world-card-choice{position:relative;padding:6px;border:0;border-radius:22px;color:white;background:transparent;overflow:visible;box-shadow:none}.career-draft-card.world-card-choice:hover{transform:translateY(-7px);border-color:transparent;box-shadow:none}.career-draft-card.world-card-choice .world-football-card{pointer-events:none}.career-draft-card.world-card-choice .world-card-copy h3{margin:.5cqw 0 0}.career-draft-card.world-card-choice .world-card-copy small{margin:0}.career-draft-card.world-card-choice .world-card-stats{margin-left:8%;margin-right:8%}.career-draft-choice-label{position:absolute;z-index:12;left:4px;top:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:7px 2px 7px 2px;color:white;background:rgba(2,12,30,.9);font-size:.54rem;font-weight:1000;letter-spacing:.07em;box-shadow:0 5px 15px rgba(0,0,0,.25)} .collection-modal{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,5,14,.84);backdrop-filter:blur(15px)}.collection-modal[hidden]{display:none}.collection-modal-panel{position:relative;width:min(940px,100%);max-height:min(90vh,850px);overflow:auto;padding:28px;border:1px solid rgba(88,231,255,.24);border-radius:22px;background:radial-gradient(circle at 78% 22%,rgba(64,183,255,.12),transparent 27%),#071327;box-shadow:0 35px 100px rgba(0,0,0,.62)}.collection-modal-close{position:absolute;z-index:20;right:15px;top:15px;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:white;background:rgba(2,12,30,.8);cursor:pointer;font-size:1.6rem;line-height:1}.collection-modal-body{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:34px;align-items:center}.collection-modal-card{width:100%}.collection-modal-copy h2{margin-bottom:4px;font-size:clamp(2rem,4vw,4rem);text-transform:uppercase;font-style:italic}.collection-modal-copy>p:not(.eyebrow){color:#8fb1cc}.collection-detail-kpis{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(0,1fr);gap:7px;margin:23px 0}.collection-detail-kpis span{display:grid;gap:4px;padding:12px;border-left:3px solid #58e7ff;background:rgba(255,255,255,.035)}.collection-detail-kpis small{color:#6f8ca5;font-size:.5rem;font-weight:950;letter-spacing:.1em}.collection-detail-kpis b{font-size:.8rem}.collection-trait-panel{padding:18px;border:1px solid rgba(255,213,80,.18);border-left:4px solid #f2cf5c;background:rgba(255,211,70,.045)}.collection-trait-panel small{color:#f2cf5c;font-size:.55rem;font-weight:1000;letter-spacing:.12em}.collection-trait-panel h3{margin:5px 0 7px;font-size:1.25rem}.collection-trait-panel p{margin:0;color:#adc0d2;line-height:1.55}.card-modal-open{overflow:hidden} @media(max-width:1050px){.collection-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-search-field{grid-column:1/-1}.collection-count{min-height:40px}.card-collection-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.hub-world-gate.collection{grid-column:auto}} @media(max-width:760px){.collection-hero{grid-template-columns:1fr;padding:22px}.collection-hero-signal{display:none}.collection-toolbar{grid-template-columns:1fr 1fr}.collection-modal-body{grid-template-columns:1fr}.collection-modal-card{width:min(330px,100%);margin:0 auto}.collection-detail-kpis{grid-template-columns:1fr}.collection-modal-panel{padding:54px 18px 22px}} @media(max-width:560px){.collection-toolbar{grid-template-columns:1fr}.collection-search-field{grid-column:auto}.card-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-count{justify-self:stretch}.world-football-card{filter:drop-shadow(0 10px 12px rgba(0,0,0,.34))}.career-draft-card.world-card-choice{padding:2px}.career-draft-choice-label{font-size:.48rem;padding:5px 6px}} .career-player-card.final-card{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}.career-player-card.final-card .career-card-final-wrap{position:relative}.career-player-card.final-card .career-card-final-wrap img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.32))}.career-player-card.final-card .final-fit{position:absolute;right:3.8%;bottom:2.6%;padding:.3rem .5rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,15,37,.78);backdrop-filter:blur(6px)}.career-player-card.final-card .final-captain{position:absolute;left:4%;top:4%;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(9,17,39,.85)}.career-player-card.final-card .final-trait{margin-top:.65rem;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(5,10,26,.72)} /* 0.4E SONIC CORE SET COMPLETE */ .collection-pack-status{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:0;margin:-4px 0 16px;padding:0;overflow:hidden;border-color:rgba(79,218,255,.18);background:#06162e} .collection-pack-status>div{min-height:74px;display:grid;align-content:center;gap:3px;padding:12px 16px;border-right:1px solid rgba(255,255,255,.06)} .collection-pack-status small{color:#6d8ba8;font-size:.49rem;font-weight:950;letter-spacing:.11em}.collection-pack-status b{color:#e9f6ff;font-size:.69rem}.collection-pack-status i{font-style:normal} .collection-pack-primary{grid-template-columns:38px 1fr auto;align-items:center}.collection-pack-primary>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#08254d;background:#60e7ff;box-shadow:0 0 22px rgba(77,220,255,.22)}.collection-pack-primary>div{display:grid;gap:2px}.collection-pack-primary>strong{grid-column:3;grid-row:1/3;align-self:center;color:#ffd55b;font-family:var(--display-font);font-size:1.1rem;font-style:italic} .sonic-complete-signal{border-color:rgba(255,215,89,.58);box-shadow:0 0 0 9px rgba(88,231,255,.05),0 0 0 20px rgba(255,211,70,.03),0 24px 55px rgba(0,0,0,.3),0 0 38px rgba(58,196,255,.15)} .world-football-card[data-universe="sonic"]{--world-edge:#f5cf58;filter:drop-shadow(0 21px 24px rgba(0,0,0,.37))} .world-football-card[data-universe="sonic"] .world-card-shell{border-width:2px;background:radial-gradient(circle at 72% 38%,color-mix(in srgb,var(--card-accent),transparent 58%),transparent 26%),radial-gradient(circle at 48% 68%,rgba(53,219,255,.24),transparent 34%),linear-gradient(145deg,#0e57bc,#082f80 47%,#061b51 76%,#020a24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -3cqw 8cqw rgba(0,4,22,.26)} .world-football-card[data-universe="sonic"] .world-card-shell::before{border-color:rgba(255,235,157,.73);opacity:.78}.world-football-card[data-universe="sonic"] .world-card-shell::after{border-color:rgba(56,219,255,.63);box-shadow:inset 0 0 2cqw rgba(50,207,255,.12)} .world-football-card[data-universe="sonic"] .world-card-speedlines{opacity:.92;background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.36) 0 .35%,transparent .5%) 0 0/13% 13%,repeating-linear-gradient(132deg,transparent 0 7%,rgba(49,213,255,.31) 7.5% 8.2%,transparent 8.7% 14%),linear-gradient(145deg,transparent 30%,rgba(69,223,255,.31) 31% 39%,transparent 40%),linear-gradient(35deg,transparent 64%,rgba(255,213,78,.2) 65% 67%,transparent 68%)} .world-football-card[data-universe="sonic"] .world-card-art{margin:-5% 2% -2%}.world-football-card[data-universe="sonic"] .world-card-art img{filter:drop-shadow(0 11px 8px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(85,221,255,.08))}.world-football-card[data-universe="sonic"] .world-card-art::before{left:1%;right:1%;bottom:2%;height:50%;background:radial-gradient(ellipse,rgba(74,219,255,.49),transparent 67%)} .world-football-card[data-universe="sonic"] .world-card-orbit{border-color:#f7ce50;box-shadow:inset 0 0 0 .52cqw #8d6500,0 0 2.4cqw rgba(255,220,93,.45),0 0 0 .18cqw rgba(255,255,255,.52)} .world-football-card[data-universe="sonic"] .world-card-rating strong{color:#fff;text-shadow:0 2px 0 #0e3070,0 0 2.5cqw rgba(255,255,255,.11)}.world-football-card[data-universe="sonic"] .world-card-rating b{color:#f4ce57}.world-football-card[data-universe="sonic"] .world-card-world i{color:#fff;border-color:rgba(255,225,107,.66);background:linear-gradient(145deg,#1b63bd,#071d54)} .world-football-card[data-universe="sonic"] .world-card-copy h3{color:#fff;text-shadow:0 3px 0 rgba(9,49,116,.75),0 4px 9px rgba(0,0,0,.7)}.world-football-card[data-universe="sonic"] .world-card-copy small{color:#84e9ff}.world-football-card[data-universe="sonic"] .world-card-stats{border-top-color:rgba(245,207,88,.6);background:linear-gradient(90deg,rgba(3,21,65,.86),rgba(6,43,105,.62),rgba(3,21,65,.86))}.world-football-card[data-universe="sonic"] .world-card-stats small{color:#68e4ff}.world-football-card[data-universe="sonic"] .world-card-stats b{color:#fff}.world-football-card[data-universe="sonic"] .world-card-tier{color:#f6d56a;border-color:rgba(248,209,83,.78);background:linear-gradient(180deg,#0c3e92,#061b50);box-shadow:0 0 2cqw rgba(65,207,255,.13)} #view-card-collection .card-collection-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}#view-card-collection .collection-card-button:hover{transform:translateY(-7px) scale(1.015)}.collection-modal-card .world-football-card{max-width:360px;margin-inline:auto} @media(max-width:900px){.collection-pack-status{grid-template-columns:1fr 1fr}.collection-pack-status>div:nth-child(2){border-right:0}.collection-pack-status>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.06)}} @media(max-width:560px){.collection-pack-status{grid-template-columns:1fr}.collection-pack-status>div{border-right:0}#view-card-collection .card-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}} /* ============================================================ BUILD 0.4F · MASTER CARD TEMPLATE LOCK Reference grammar: OVR + position top-left · world badge top-right · hero art · huge name · five stats · CORE shield at the bottom. One silhouette. Different universe skins. ============================================================ */ .world-football-card { --master-gold: #f5ce58; --master-gold-hi: #fff2a8; --master-blue-line: #43dcff; --master-ink: #04143d; aspect-ratio: 1024 / 1472; filter: drop-shadow(0 2.4cqw 2.3cqw rgba(0,0,0,.43)) drop-shadow(0 0 1.25cqw color-mix(in srgb,var(--card-accent),transparent 84%)); } .world-card-shell { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border: 0; border-radius: 0; clip-path: polygon( 5% 11%, 9% 7%, 35% 3.3%, 42% 2.7%, 46.2% 5.6%, 50% 1.2%, 53.8% 5.6%, 58% 2.7%, 65% 3.3%, 91% 7%, 95% 11%, 98.2% 52%, 98.2% 86.8%, 93.3% 94.1%, 61% 97.4%, 50% 99.5%, 39% 97.4%, 6.7% 94.1%, 1.8% 86.8%, 1.8% 52% ); background: radial-gradient(circle at 52% 51%, rgba(82,214,255,.27), transparent 27%), linear-gradient(145deg,#0b56bc 0%,#092f83 42%,#06184e 73%,#02091f 100%); box-shadow: inset 0 0 0 2.5cqw var(--master-gold), inset 0 0 0 3.1cqw #0f458f, inset 0 0 0 3.55cqw var(--master-gold-hi), inset 0 0 0 3.95cqw #0a2d72, inset 0 0 0 4.35cqw var(--master-blue-line), inset 0 0 0 4.75cqw rgba(2,16,52,.96), inset 0 -7cqw 13cqw rgba(0,4,23,.34); } .world-card-shell::before { content:""; position:absolute; z-index:20; inset:1.6%; pointer-events:none; border: .42cqw solid rgba(255,242,175,.88); clip-path: inherit; opacity:.95; filter: drop-shadow(0 0 .65cqw rgba(255,223,102,.48)); } .world-card-shell::after { content:""; position:absolute; z-index:19; inset:4.7%; pointer-events:none; border:.3cqw solid color-mix(in srgb,var(--master-blue-line),white 16%); clip-path:polygon( 4% 8%, 35% 3%, 43% 3%, 50% 8%, 57% 3%, 65% 3%, 96% 8%, 97% 87%, 91% 94%, 58% 96%, 50% 99%, 42% 96%, 9% 94%, 3% 87% ); opacity:.7; box-shadow:inset 0 0 2cqw rgba(67,220,255,.11); } .world-card-speedlines { position:absolute; z-index:-1; inset:4%; opacity:.86; background: radial-gradient(circle at 87% 8%,rgba(255,255,255,.72) 0 .22%,transparent .4%) 0 0/15% 13%, repeating-linear-gradient(129deg,transparent 0 8%,rgba(58,217,255,.22) 8.4% 9.1%,transparent 9.5% 15%), linear-gradient(146deg,transparent 24%,rgba(76,225,255,.33) 25% 36%,transparent 37% 57%,rgba(255,210,75,.14) 58% 60%,transparent 61%); } /* Header sits on top of the art exactly like the locked preview. */ .world-card-head { position:absolute; z-index:12; left:9.2%; right:9.2%; top:11.1%; display:flex; justify-content:space-between; align-items:flex-start; padding:0; } .world-card-rating { display:grid; gap:.15cqw; width:29%; text-align:left; text-shadow:0 .45cqw .9cqw rgba(0,0,0,.67); } .world-card-rating strong { color:#fff; font-family:var(--display-font); font-size:18.6cqw; font-style:italic; letter-spacing:-.09em; line-height:.73; -webkit-text-stroke:.12cqw rgba(2,22,68,.64); } .world-card-rating b { margin-top:2.6cqw; color:var(--master-gold); font-family:var(--display-font); font-size:6.3cqw; font-style:italic; line-height:1; text-transform:uppercase; } .world-card-rating::after { content:""; width:12cqw; height:.55cqw; margin-top:2.3cqw; background:linear-gradient(90deg,var(--master-gold),rgba(255,224,106,.2)); box-shadow:0 0 1cqw rgba(255,211,72,.22); } .world-card-world { width:30%; max-width:none; display:grid; justify-items:center; gap:1.2cqw; text-align:center; } .world-card-world i { width:10.3cqw; height:10.3cqw; display:grid; place-items:center; border:.55cqw solid rgba(255,255,255,.87); border-radius:50%; color:#fff; background:linear-gradient(145deg,#195cb3,#061b50); box-shadow: inset 0 0 0 .5cqw rgba(6,31,88,.8), 0 0 1.7cqw rgba(83,218,255,.16); font-size:4.4cqw; font-style:normal; } .world-card-world span { max-width:100%; padding:0 1.3cqw 1cqw; overflow:hidden; border-bottom:.45cqw solid var(--master-gold); color:#fff; font-family:var(--display-font); font-size:4.25cqw; font-style:italic; letter-spacing:-.025em; line-height:1; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } /* Character dominates the middle two thirds. */ .world-card-art { position:absolute; z-index:5; left:8%; right:5.7%; top:10.8%; height:61%; margin:0; overflow:visible; } .world-card-art::before { content:""; position:absolute; z-index:-2; left:10%; right:4%; bottom:2%; height:58%; border-radius:50%; background:radial-gradient(ellipse,rgba(74,219,255,.43),transparent 68%); filter:blur(1.6cqw); } .world-card-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:var(--art-x) var(--art-y); transform:scale(var(--art-scale)); transform-origin:var(--art-x) var(--art-y); filter: drop-shadow(0 1.6cqw 1.1cqw rgba(0,0,0,.56)) drop-shadow(0 0 .7cqw rgba(75,222,255,.11)); } .world-card-orbit { position:absolute; z-index:-1; border:1.5cqw solid var(--master-gold); border-radius:50%; box-shadow: inset 0 0 0 .44cqw #8e6500, inset 0 0 0 .62cqw rgba(255,255,255,.26), 0 0 2cqw rgba(255,217,75,.38); opacity:.92; } .world-card-orbit.orbit-a { width:17cqw;height:17cqw;left:1%;top:30%;transform:rotate(-18deg); } .world-card-orbit.orbit-b { width:10.7cqw;height:10.7cqw;right:1.5%;bottom:11%;transform:rotate(15deg); } .world-card-fit { right:1.8%; bottom:7%; padding:1.2cqw 2cqw; font-size:2.45cqw; } /* Hero-name plate */ .world-card-copy { position:absolute; z-index:13; left:9%; right:9%; top:67.2%; height:9.6%; display:grid; align-content:center; justify-items:center; padding:0; text-align:center; background: linear-gradient(90deg,transparent,rgba(1,13,47,.72) 11%,rgba(2,19,59,.88) 50%,rgba(1,13,47,.72) 89%,transparent); border-bottom:.28cqw solid rgba(247,207,88,.62); } .world-card-copy small { display:none; } .world-card-copy h3 { max-width:100%; margin:0; overflow:hidden; color:#fff; font-family:var(--display-font); font-size:10.4cqw; font-style:italic; line-height:.9; letter-spacing:-.067em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; text-shadow: 0 .55cqw 0 rgba(10,46,112,.88), 0 1cqw 1.2cqw rgba(0,0,0,.58); -webkit-text-stroke:.1cqw rgba(7,25,65,.55); } /* Locked five-stat rail */ .world-card-stats { position:absolute; z-index:13; left:9.3%; right:9.3%; top:77.2%; height:14.8%; display:grid; grid-template-columns:repeat(var(--stat-count),1fr); align-items:center; margin:0; overflow:hidden; border-top:.28cqw solid rgba(247,207,88,.75); border-bottom:.24cqw solid rgba(87,217,255,.31); background:linear-gradient(90deg,rgba(2,14,46,.92),rgba(4,34,91,.83),rgba(2,14,46,.92)); } .world-card-stats span { position:relative; display:grid; place-items:center; gap:.45cqw; height:100%; padding:1.6cqw .3cqw; } .world-card-stats span+span::before { top:18%; bottom:18%; background:rgba(247,207,88,.6); } .world-card-stats small { color:#f4cb53; font-family:var(--display-font); font-size:3.15cqw; font-style:italic; letter-spacing:-.03em; } .world-card-stats b { color:#fff; font-family:var(--display-font); font-size:7.7cqw; font-style:italic; line-height:.95; letter-spacing:-.065em; text-shadow:0 .4cqw .8cqw rgba(0,0,0,.5); } /* Bottom CORE shield */ .world-card-tier { position:absolute; z-index:16; left:31.2%; right:31.2%; bottom:1.45%; min-width:0; height:6.6%; display:flex; align-items:center; justify-content:center; gap:1.6cqw; padding:0 4cqw; border:.36cqw solid var(--master-gold); clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,60% 100%,50% 91%,40% 100%,9% 100%,0 50%); color:var(--master-gold); background:linear-gradient(180deg,#0e459d,#061a51); box-shadow: inset 0 0 0 .28cqw rgba(57,218,255,.52), 0 0 1.8cqw rgba(73,217,255,.15); font-family:var(--display-font); font-size:3.9cqw; font-style:italic; letter-spacing:.09em; } .world-card-tier i { color:var(--master-gold);font-size:2.7cqw;font-style:normal; } /* Premium edge flare */ .world-football-card::before { content:""; position:absolute; z-index:30; top:2.8%; right:10%; width:7%; aspect-ratio:1; pointer-events:none; border-radius:50%; background:radial-gradient(circle,#fff 0 5%,#fff8c9 7% 11%,rgba(255,215,79,.62) 12% 23%,transparent 48%); filter:blur(.1px); opacity:.74; } /* ============================================================ WORLD SKINS — same grammar, different universe identity ============================================================ */ .world-football-card[data-universe="sonic"] { --master-gold:#f5ce58; --master-gold-hi:#fff1a3; --master-blue-line:#42dcff; } .world-football-card[data-universe="sonic"] .world-card-shell { background: radial-gradient(circle at 74% 35%,color-mix(in srgb,var(--card-accent),transparent 53%),transparent 25%), radial-gradient(circle at 52% 60%,rgba(57,218,255,.25),transparent 31%), linear-gradient(145deg,#0b5bc6,#073b99 43%,#071e60 73%,#020a26); } .world-football-card[data-universe="sonic"] .world-card-speedlines { opacity:.98; background: radial-gradient(circle at 87% 10%,rgba(255,255,255,.8) 0 .2%,transparent .35%) 0 0/15% 13%, repeating-linear-gradient(131deg,transparent 0 7%,rgba(47,220,255,.31) 7.3% 8%,transparent 8.5% 14%), linear-gradient(144deg,transparent 24%,rgba(67,224,255,.36) 25% 37%,transparent 38% 63%,rgba(255,210,66,.19) 64% 67%,transparent 68%); } .world-football-card[data-universe="sonic"] .world-card-world i { background:linear-gradient(145deg,#1f68c9,#071c52); } .world-football-card[data-universe="sonic"] .world-card-stats small { color:#f7cf58; } /* Cars: red asphalt / chrome / racing lines */ .world-football-card[data-universe="cars"] { --master-gold:#dce4ea; --master-gold-hi:#ffffff; --master-blue-line:#ff4c4c; } .world-football-card[data-universe="cars"] .world-card-shell { background: radial-gradient(circle at 72% 37%,color-mix(in srgb,var(--card-accent),transparent 46%),transparent 27%), repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1.2%,transparent 1.2% 4%), linear-gradient(145deg,#710d12,#321014 42%,#17191d 69%,#07090c); } .world-football-card[data-universe="cars"] .world-card-speedlines { background: repeating-conic-gradient(from 45deg at 85% 16%,rgba(255,255,255,.18) 0 25%,transparent 0 50%) 0 0/18px 18px, repeating-linear-gradient(122deg,transparent 0 8%,rgba(255,61,61,.28) 8.4% 9.2%,transparent 9.7% 15%); } .world-football-card[data-universe="cars"] .world-card-orbit { border-color:#dfe5e9;box-shadow:inset 0 0 0 .45cqw #6b7278,0 0 1.5cqw rgba(255,255,255,.2); } .world-football-card[data-universe="cars"] .world-card-stats small { color:#ff7272; } /* Souls: black / ember / antique gold / fog */ .world-football-card[data-universe="dark-souls"] { --master-gold:#b89557; --master-gold-hi:#e8c783; --master-blue-line:#722f1d; } .world-football-card[data-universe="dark-souls"] .world-card-shell { background: radial-gradient(circle at 58% 57%,rgba(217,80,24,.27),transparent 25%), radial-gradient(ellipse at 45% 43%,rgba(174,153,111,.08),transparent 45%), linear-gradient(155deg,#28221d,#11100f 54%,#030303); } .world-football-card[data-universe="dark-souls"] .world-card-speedlines { opacity:.54; background: radial-gradient(circle,rgba(255,104,29,.42) 0 .5%,transparent .8%) 0 0/7% 9%, linear-gradient(140deg,transparent 48%,rgba(171,132,73,.14) 49% 50%,transparent 51%); } .world-football-card[data-universe="dark-souls"] .world-card-orbit { border-color:#9c7b48;opacity:.25;box-shadow:0 0 2cqw rgba(209,81,25,.16); } .world-football-card[data-universe="dark-souls"] .world-card-stats small { color:#d69b57; } /* SAO: blue / white / digital UI */ .world-football-card[data-universe="sao"] { --master-gold:#e8f8ff; --master-gold-hi:#ffffff; --master-blue-line:#6ce6ff; } .world-football-card[data-universe="sao"] .world-card-shell { background: radial-gradient(circle at 73% 40%,rgba(88,222,255,.28),transparent 25%), linear-gradient(145deg,#1764be,#0b397f 51%,#06192f); } .world-football-card[data-universe="sao"] .world-card-speedlines { background: linear-gradient(rgba(127,230,255,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(127,230,255,.14) 1px,transparent 1px), linear-gradient(130deg,transparent 44%,rgba(255,255,255,.25) 45% 46%,transparent 47%); background-size:22px 22px,22px 22px,auto; } .world-football-card[data-universe="sao"] .world-card-stats small { color:#8feeff; } /* Zootopia: glassy modern city / teal / violet */ .world-football-card[data-universe="zootopia"] { --master-gold:#bfeaf4; --master-gold-hi:#effcff; --master-blue-line:#8b9bff; } .world-football-card[data-universe="zootopia"] .world-card-shell { background: radial-gradient(circle at 76% 37%,color-mix(in srgb,var(--card-accent),transparent 59%),transparent 25%), linear-gradient(145deg,#225b77,#183a58 48%,#0a1b2b); } .world-football-card[data-universe="zootopia"] .world-card-speedlines { opacity:.5; background: linear-gradient(90deg,transparent 0 8%,rgba(92,219,255,.18) 8% 8.5%,transparent 8.5% 17%), linear-gradient(0deg,transparent 0 12%,rgba(255,255,255,.09) 12% 12.5%,transparent 12.5% 22%); } .world-football-card[data-universe="zootopia"] .world-card-stats small { color:#9adff2; } /* SpongeBob: turquoise / yellow / bubbles */ .world-football-card[data-universe="spongebob"] { --master-gold:#ffe04e; --master-gold-hi:#fff6aa; --master-blue-line:#62efff; } .world-football-card[data-universe="spongebob"] .world-card-shell { background: radial-gradient(circle at 78% 36%,rgba(255,233,78,.25),transparent 25%), linear-gradient(150deg,#04a0ac,#08728a 52%,#074055); } .world-football-card[data-universe="spongebob"] .world-card-speedlines { background: radial-gradient(circle at 20% 25%,transparent 0 6px,rgba(180,249,255,.25) 7px 9px,transparent 10px), radial-gradient(circle at 80% 70%,transparent 0 10px,rgba(180,249,255,.20) 11px 13px,transparent 14px); background-size:70px 70px,95px 95px; } .world-football-card[data-universe="spongebob"] .world-card-stats small { color:#ffe758; } /* Bundesliga: club color drives the whole card */ .world-football-card[data-universe="bundesliga"] { --master-gold:color-mix(in srgb,var(--card-accent),white 48%); --master-gold-hi:#ffffff; --master-blue-line:color-mix(in srgb,var(--card-accent),white 20%); } .world-football-card[data-universe="bundesliga"] .world-card-shell { background: radial-gradient(circle at 74% 36%,color-mix(in srgb,var(--card-accent),transparent 48%),transparent 27%), linear-gradient(145deg,color-mix(in srgb,var(--card-accent),#20262b 58%),#12171b 53%,#050809); } .world-football-card[data-universe="bundesliga"] .world-card-speedlines { opacity:.42; background: repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.10) 11.2% 11.8%,transparent 12% 20%), linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--card-accent),transparent 73%) 51% 54%,transparent 55%); } .world-football-card[data-universe="bundesliga"] .world-card-stats small { color:color-mix(in srgb,var(--card-accent),white 38%); } /* Chatter: signature signal / cyan-magenta */ .world-football-card[data-universe="chatter"] { --master-gold:#d57cff; --master-gold-hi:#f4c8ff; --master-blue-line:#55e8ff; } .world-football-card[data-universe="chatter"] .world-card-shell { background: radial-gradient(circle at 73% 39%,rgba(207,91,255,.31),transparent 25%), linear-gradient(145deg,#123978,#17194c 51%,#090b24); } .world-football-card[data-universe="chatter"] .world-card-speedlines { opacity:.78; background: linear-gradient(120deg,transparent 0 34%,rgba(70,229,255,.20) 35% 36%,transparent 37% 55%,rgba(213,105,255,.21) 56% 57%,transparent 58%), radial-gradient(circle,rgba(94,231,255,.36) 0 2px,transparent 3px) 0 0/34px 34px; } .world-football-card[data-universe="chatter"] .world-card-stats small { color:#e690ff; } /* Career Core now shares the exact same master card face. */ .career-player-card.master-world-card { padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; } .career-master-card-wrap { position:relative; } .career-player-card.master-world-card .world-football-card { width:100%; } .master-captain-mark { position:absolute; z-index:40; left:6%; top:6%; display:grid; place-items:center; width:2.1rem; height:2.1rem; border:.16rem solid #fff0a2; border-radius:50%; color:#09204c; background:#ffd450; box-shadow:0 5px 15px rgba(0,0,0,.28); font-style:normal; font-weight:1000; } .master-card-trait { margin-top:.7rem; border:1px solid rgba(255,255,255,.08); border-left:4px solid var(--card-accent); border-radius:8px; background:rgba(5,10,26,.72); } /* Keep all collection cards perfectly equal in size. */ .card-collection-grid { align-items:start; } .collection-card-button, .collection-card-button .world-football-card { width:100%; } .collection-card-button .world-football-card { min-width:0; } /* Detailed modal: let the premium silhouette breathe. */ .collection-modal-card .world-football-card { max-width:390px; } /* Draft cards must also be equal width / equal height. */ .career-draft-offers { align-items:start; } .career-draft-card.world-card-choice { width:100%; } .career-draft-card.world-card-choice .world-football-card { width:100%; } /* Small-screen cards remain readable. */ @media(max-width:560px){ .world-card-rating strong{font-size:18.2cqw} .world-card-copy h3{font-size:9.6cqw} .world-card-stats small{font-size:2.9cqw} .world-card-stats b{font-size:7.25cqw} } /* ============================================================ BUILD 0.4F.2 · LIVE RENDERER TRUE LOCK This renderer intentionally uses a completely new class namespace. It bypasses all earlier .world-football-card rules so the live cards finally match the locked premium reference instead of the old mini card. ============================================================ */ .cr-master-card { --cr-gold: #efc651; --cr-gold-hi: #fff2ac; --cr-cyan: #48dcff; position: relative; width: 100%; aspect-ratio: 1024 / 1472; container-type: inline-size; color: #fff; background: transparent; filter: drop-shadow(0 2.3cqw 2.15cqw rgba(0,0,0,.48)); user-select: none; } .cr-frame-gold-outer, .cr-frame-blue-outer, .cr-frame-gold-inner, .cr-card-face { width: 100%; height: 100%; clip-path: polygon( 4.2% 10%, 7.5% 7.2%, 35% 3.3%, 41% 3.1%, 45.3% 5.8%, 50% .7%, 54.7% 5.8%, 59% 3.1%, 65% 3.3%, 92.5% 7.2%, 95.8% 10%, 98.7% 52%, 98.7% 86.2%, 94.3% 94.2%, 61% 97.4%, 50% 99.5%, 39% 97.4%, 5.7% 94.2%, 1.3% 86.2%, 1.3% 52% ); } .cr-frame-gold-outer { position: absolute; inset: 0; padding: 1.25cqw; background: linear-gradient(120deg,#fff5b2 0 4%,#d5a622 11%,#fff0a0 18%,#a96f05 35%,#ffe991 48%,#bb830d 65%,#fff7bd 78%,#c68f13 93%,#fff0a8 100%); } .cr-frame-blue-outer { padding: .9cqw; background: linear-gradient(120deg,#19d8ff,#0b5fc0 34%,#012b77 58%,#25d8ff 82%,#063f9c); } .cr-frame-gold-inner { padding: .46cqw; background: linear-gradient(120deg,#f8da6f,#9c6c08 18%,#fff2a1 43%,#b67c0b 65%,#f4d560 100%); } .cr-card-face { position: relative; overflow: hidden; background: radial-gradient(circle at 73% 35%, color-mix(in srgb,var(--card-accent),transparent 52%), transparent 26%), radial-gradient(circle at 52% 54%,rgba(52,220,255,.31),transparent 31%), linear-gradient(145deg,#0c5dc7 0%,#07398f 39%,#071f62 67%,#020a25 100%); box-shadow: inset 0 0 0 .65cqw rgba(21,104,219,.95), inset 0 0 0 1.05cqw rgba(72,218,255,.62), inset 0 0 0 1.38cqw rgba(2,20,65,.88), inset 0 -8cqw 13cqw rgba(0,5,24,.4); } .cr-card-face::before { content: ""; position: absolute; z-index: 1; inset: 2.2%; pointer-events: none; clip-path: inherit; border: .34cqw solid rgba(255,242,178,.78); opacity: .92; } .cr-card-face::after { content: ""; position: absolute; z-index: 1; left: 3.1%; right: 3.1%; top: 7.5%; bottom: 4.8%; pointer-events: none; border-left: .33cqw solid rgba(75,222,255,.55); border-right: .33cqw solid rgba(75,222,255,.55); opacity: .65; } /* Cyan side fins from the reference silhouette. */ .cr-master-card::before, .cr-master-card::after { content: ""; position: absolute; z-index: -1; top: 53%; width: 5.6%; height: 31%; background: linear-gradient(180deg,#63eeff,#0aa4e8 48%,#0758b7); border: .45cqw solid #d4efff; box-shadow: 0 0 0 .4cqw #0b4ea3, 0 0 1.8cqw rgba(62,220,255,.18); } .cr-master-card::before { left: .1%; clip-path: polygon(100% 0,100% 100%,0 88%,0 18%); } .cr-master-card::after { right: .1%; clip-path: polygon(0 0,0 100%,100% 88%,100% 18%); } .cr-card-bg, .cr-card-speed, .cr-card-spark { position: absolute; inset: 0; pointer-events: none; } .cr-card-bg { z-index: 0; background: linear-gradient(133deg,transparent 0 21%,rgba(17,139,255,.22) 22% 31%,transparent 32% 53%,rgba(255,210,65,.12) 54% 57%,transparent 58%), linear-gradient(24deg,transparent 0 64%,rgba(255,219,77,.16) 65% 67%,transparent 68%); } .cr-card-speed { z-index: 0; opacity: .93; background: radial-gradient(circle at 82% 14%,rgba(255,255,255,.78) 0 .16%,transparent .35%) 0 0/14% 13%, repeating-linear-gradient(131deg,transparent 0 7%,rgba(52,218,255,.28) 7.5% 8.3%,transparent 8.8% 14%), linear-gradient(146deg,transparent 25%,rgba(68,225,255,.35) 26% 38%,transparent 39% 62%,rgba(255,212,69,.18) 63% 66%,transparent 67%); } .cr-card-spark { z-index: 18; left: auto; right: 8%; top: 1.8%; width: 8%; height: 8%; border-radius: 50%; background: radial-gradient(circle,#fff 0 4%,#fff9d2 6% 11%,rgba(255,217,75,.7) 12% 22%,transparent 46%); filter: blur(.1px); } .cr-card-rating { position: absolute; z-index: 11; left: 9.1%; top: 13.4%; display: grid; align-content: start; width: 25%; text-align: left; filter: drop-shadow(0 .6cqw .6cqw rgba(0,0,0,.5)); } .cr-card-rating strong { color: #fff; font-size: 18.7cqw; font-weight: 1000; font-style: italic; line-height: .72; letter-spacing: -.1em; transform: skew(-5deg); text-shadow: 0 .65cqw 0 #0b2a6b, 0 1cqw 1.1cqw rgba(0,0,0,.44); } .cr-card-rating b { margin-top: 3.3cqw; color: var(--cr-gold); font-size: 6.2cqw; font-weight: 1000; font-style: italic; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 .45cqw .5cqw rgba(0,0,0,.4); } .cr-card-rating i { width: 12cqw; height: .55cqw; margin-top: 2.6cqw; background: linear-gradient(90deg,var(--cr-gold),rgba(255,220,89,.08)); } .cr-card-world { position: absolute; z-index: 12; top: 15.4%; right: 8.3%; width: 25%; display: grid; justify-items: center; gap: 1.15cqw; } .cr-world-medallion { width: 10.6cqw; height: 10.6cqw; display: grid; place-items: center; border: .52cqw solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#1f6ed0,#071c52); box-shadow: inset 0 0 0 .5cqw rgba(5,34,91,.82),0 0 1.5cqw rgba(84,221,255,.16); font-size: 4.1cqw; font-style: normal; } .cr-card-world b { max-width: 100%; overflow: hidden; color: #fff; font-size: 4.35cqw; font-weight: 1000; font-style: italic; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; text-shadow: 0 .45cqw .7cqw rgba(0,0,0,.48); } .cr-card-world i { width: 11.5cqw; height: .45cqw; background: linear-gradient(90deg,transparent,var(--cr-gold),transparent); } .cr-card-art { position: absolute; z-index: 5; left: 8.2%; right: 4.5%; top: 8.1%; height: 64.5%; } .cr-card-art::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 4%; bottom: 4%; height: 56%; border-radius: 50%; background: radial-gradient(ellipse,rgba(69,223,255,.46),transparent 68%); filter: blur(1.2cqw); } .cr-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: var(--art-x) var(--art-y); transform: scale(var(--art-scale)); transform-origin: var(--art-x) var(--art-y); filter: drop-shadow(0 1.7cqw 1.15cqw rgba(0,0,0,.55)); } .cr-fit-overlay { position: absolute; z-index: 30; right: 0; bottom: 2%; padding: 1cqw 1.6cqw; border: .2cqw solid rgba(255,255,255,.2); border-radius: .8cqw; color: #fff; background: rgba(2,13,38,.86); font-size: 2.4cqw; font-style: normal; font-weight: 1000; } .cr-sonic-ring { position: absolute; z-index: 4; border: 1.55cqw solid var(--cr-gold); border-radius: 50%; box-shadow: inset 0 0 0 .42cqw #946900,inset 0 0 0 .58cqw rgba(255,255,255,.28),0 0 1.8cqw rgba(255,220,82,.38); transform: rotate(-17deg); } .cr-ring-a { left: 5.5%; top: 37.5%; width: 17.3cqw; height: 17.3cqw; } .cr-ring-b { right: 9.5%; top: 47.5%; width: 10.7cqw; height: 10.7cqw; transform: rotate(15deg); } .cr-card-name { position: absolute; z-index: 12; left: 10%; right: 10%; top: 67.1%; height: 10%; display: grid; place-items: center; overflow: hidden; border-bottom: .28cqw solid rgba(244,206,81,.78); background: linear-gradient(90deg,transparent,rgba(2,16,54,.74) 10%,rgba(3,25,72,.9) 50%,rgba(2,16,54,.74) 90%,transparent); } .cr-card-name h3 { max-width: 100%; margin: 0; overflow: hidden; color: #fff; font-size: 10.1cqw; font-weight: 1000; font-style: italic; line-height: .92; letter-spacing: -.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; transform: skew(-4deg); text-shadow: 0 .55cqw 0 rgba(8,47,113,.86),0 1cqw 1cqw rgba(0,0,0,.55); } .cr-card-stats { position: absolute; z-index: 13; left: 9.1%; right: 9.1%; top: 77.25%; height: 14.7%; display: grid; grid-template-columns: repeat(var(--stat-count),1fr); align-items: center; border-top: .24cqw solid rgba(244,206,81,.72); border-bottom: .22cqw solid rgba(74,222,255,.33); background: linear-gradient(90deg,rgba(2,14,48,.96),rgba(5,36,94,.91),rgba(2,14,48,.96)); } .cr-stat { position: relative; height: 100%; display: grid; place-items: center; align-content: center; gap: .6cqw; padding: 1.2cqw .25cqw; } .cr-stat + .cr-stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: .22cqw; background: rgba(244,206,81,.58); } .cr-stat small { color: var(--cr-gold); font-size: 3.1cqw; font-weight: 1000; font-style: italic; line-height: 1; } .cr-stat b { color: #fff; font-size: 7.7cqw; font-weight: 1000; font-style: italic; line-height: .95; letter-spacing: -.065em; text-shadow: 0 .4cqw .8cqw rgba(0,0,0,.5); } .cr-card-core { position: absolute; z-index: 15; left: 31.4%; right: 31.4%; bottom: 1.45%; height: 6.3%; display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; gap: .3cqw; clip-path: polygon(10% 0,90% 0,100% 48%,91% 100%,60% 100%,50% 91%,40% 100%,9% 100%,0 48%); border: 0; color: var(--cr-gold); background: linear-gradient(180deg,#0e489f,#061b51); box-shadow: inset 0 0 0 .35cqw var(--cr-gold),inset 0 0 0 .72cqw #0f55ae,0 0 1.3cqw rgba(72,216,255,.15); } .cr-card-core b { font-size: 3.6cqw; font-weight: 1000; font-style: italic; letter-spacing: .09em; line-height: 1; } .cr-card-core span { font-size: 2.4cqw; line-height: 1; } /* Universe skins keep the exact same layout. */ .cr-master-card[data-universe="sonic"] { --cr-gold:#f1c94e;--cr-gold-hi:#fff1a3;--cr-cyan:#47dfff; } .cr-master-card[data-universe="cars"] .cr-card-face{background:radial-gradient(circle at 73% 35%,rgba(255,69,69,.3),transparent 27%),linear-gradient(145deg,#7b0d12,#391015 43%,#17191d 70%,#08090b)} .cr-master-card[data-universe="cars"]{--cr-gold:#dde5ea;--cr-gold-hi:#fff;--cr-cyan:#ff4f4f}.cr-master-card[data-universe="cars"] .cr-sonic-ring{border-color:#e2e7ea;box-shadow:inset 0 0 0 .42cqw #6b7378,0 0 1.4cqw rgba(255,255,255,.18)} .cr-master-card[data-universe="dark-souls"] .cr-card-face{background:radial-gradient(circle at 58% 56%,rgba(211,77,22,.27),transparent 26%),linear-gradient(150deg,#2b241e,#11100f 56%,#030303)}.cr-master-card[data-universe="dark-souls"]{--cr-gold:#b99556;--cr-gold-hi:#e6c37f;--cr-cyan:#71311e}.cr-master-card[data-universe="dark-souls"] .cr-card-speed{opacity:.42}.cr-master-card[data-universe="dark-souls"] .cr-sonic-ring{opacity:.18} .cr-master-card[data-universe="sao"] .cr-card-face{background:radial-gradient(circle at 73% 38%,rgba(93,220,255,.29),transparent 27%),linear-gradient(145deg,#1765be,#0b397e 52%,#06172d)}.cr-master-card[data-universe="sao"]{--cr-gold:#e9f8ff;--cr-gold-hi:#fff;--cr-cyan:#69e7ff} .cr-master-card[data-universe="zootopia"] .cr-card-face{background:radial-gradient(circle at 73% 38%,rgba(126,154,255,.25),transparent 27%),linear-gradient(145deg,#285e75,#193d57 52%,#0b1b2a)}.cr-master-card[data-universe="zootopia"]{--cr-gold:#bfe9f2;--cr-gold-hi:#effcff;--cr-cyan:#8b9bff} .cr-master-card[data-universe="spongebob"] .cr-card-face{background:radial-gradient(circle at 76% 37%,rgba(255,232,70,.28),transparent 27%),linear-gradient(145deg,#05a3ae,#08748a 52%,#073d50)}.cr-master-card[data-universe="spongebob"]{--cr-gold:#ffe04d;--cr-gold-hi:#fff5a8;--cr-cyan:#61efff}.cr-master-card[data-universe="spongebob"] .cr-card-speed{background:radial-gradient(circle at 20% 25%,transparent 0 6px,rgba(181,249,255,.25) 7px 9px,transparent 10px),radial-gradient(circle at 80% 70%,transparent 0 10px,rgba(181,249,255,.2) 11px 13px,transparent 14px);background-size:70px 70px,95px 95px} .cr-master-card[data-universe="bundesliga"] .cr-card-face{background:radial-gradient(circle at 73% 36%,color-mix(in srgb,var(--card-accent),transparent 47%),transparent 28%),linear-gradient(145deg,color-mix(in srgb,var(--card-accent),#20262b 58%),#12171b 52%,#050809)}.cr-master-card[data-universe="bundesliga"]{--cr-gold:color-mix(in srgb,var(--card-accent),white 48%);--cr-gold-hi:#fff;--cr-cyan:color-mix(in srgb,var(--card-accent),white 22%)} .cr-master-card[data-universe="chatter"] .cr-card-face{background:radial-gradient(circle at 73% 38%,rgba(208,92,255,.31),transparent 27%),linear-gradient(145deg,#123a78,#18194b 52%,#090b24)}.cr-master-card[data-universe="chatter"]{--cr-gold:#d67cff;--cr-gold-hi:#f4c9ff;--cr-cyan:#55e8ff} /* Collection: larger cards so the locked design is actually visible. */ #view-card-collection .card-collection-grid { grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 24px; align-items: start; } .collection-card-button { width: 100%; padding: 0; border: 0; background: transparent; } .collection-card-button:hover { transform: translateY(-8px) scale(1.015); } .collection-modal-card .cr-master-card { width: min(420px,78vw); margin-inline:auto; } /* Career/Draft: same live face, no fallback mini renderer. */ .career-player-card.master-world-card { padding:0;border:0;background:transparent;box-shadow:none;overflow:visible; } .career-master-card-wrap { position:relative; } .career-master-card-wrap .cr-master-card { width:100%; } .career-draft-card.world-card-choice .cr-master-card { width:100%;pointer-events:none; } .career-draft-card.world-card-choice { padding:4px;border:0;background:transparent;box-shadow:none; } /* If legacy full-card assets appear, keep them clean but not mixed with the old renderer. */ .cr-final-card { display:grid;place-items:center; } .cr-final-card-image { width:100%;height:100%;object-fit:contain;display:block; } @media (max-width: 760px) { #view-card-collection .card-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } } /* 0.4F.2 Sonic uses the ACTUAL user-approved reference frame as a live overlay. */ .cr-reference-frame { position: absolute; z-index: 50; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .cr-master-card[data-universe="sonic"] { aspect-ratio: 1055 / 1491; filter: drop-shadow(0 2.2cqw 2.1cqw rgba(0,0,0,.48)); } .cr-master-card[data-universe="sonic"] .cr-frame-gold-outer, .cr-master-card[data-universe="sonic"] .cr-frame-blue-outer, .cr-master-card[data-universe="sonic"] .cr-frame-gold-inner { padding: 0; background: transparent; } .cr-master-card[data-universe="sonic"] .cr-card-face { clip-path: polygon(6.1% 8%,93.9% 8%,96% 13%,96% 89%,91% 94%,61% 96%,50% 98.2%,39% 96%,9% 94%,4% 89%,4% 13%); background: radial-gradient(circle at 72% 36%,color-mix(in srgb,var(--card-accent),transparent 50%),transparent 26%), radial-gradient(circle at 52% 56%,rgba(52,220,255,.34),transparent 31%), linear-gradient(145deg,#0c60cb 0%,#08419d 38%,#082568 66%,#020b28 100%); box-shadow: none; } .cr-master-card[data-universe="sonic"] .cr-card-face::before, .cr-master-card[data-universe="sonic"] .cr-card-face::after { display:none; } .cr-master-card[data-universe="sonic"]::before, .cr-master-card[data-universe="sonic"]::after { display:none; } .cr-master-card[data-universe="sonic"] .cr-card-rating strong, .cr-master-card[data-universe="sonic"] .cr-card-name h3, .cr-master-card[data-universe="sonic"] .cr-card-world b, .cr-master-card[data-universe="sonic"] .cr-stat small, .cr-master-card[data-universe="sonic"] .cr-stat b, .cr-master-card[data-universe="sonic"] .cr-card-core b { font-family: Impact, "Arial Black", "Arial Narrow", sans-serif; } .cr-master-card[data-universe="sonic"] .cr-card-rating { left:9.6%;top:15.1%; } .cr-master-card[data-universe="sonic"] .cr-card-rating strong { font-size:17.9cqw;letter-spacing:-.055em; } .cr-master-card[data-universe="sonic"] .cr-card-rating b { margin-top:3.0cqw;font-size:5.85cqw; } .cr-master-card[data-universe="sonic"] .cr-card-world { top:16.1%;right:8.9%; } .cr-master-card[data-universe="sonic"] .cr-world-medallion { width:9.7cqw;height:9.7cqw;font-size:3.8cqw; } .cr-master-card[data-universe="sonic"] .cr-card-world b { font-size:4.0cqw; } .cr-master-card[data-universe="sonic"] .cr-card-art { left:8.5%;right:5.2%;top:9.8%;height:63.8%; } .cr-master-card[data-universe="sonic"] .cr-card-art img { filter:drop-shadow(0 1.5cqw 1.05cqw rgba(0,0,0,.52)); } .cr-master-card[data-universe="sonic"] .cr-ring-a { left:6.8%;top:39.5%; } .cr-master-card[data-universe="sonic"] .cr-ring-b { right:10.5%;top:49.5%; } .cr-master-card[data-universe="sonic"] .cr-card-name { left:10.4%;right:10.4%;top:67.5%;height:9.2%; border-bottom:.22cqw solid rgba(239,199,74,.8); } .cr-master-card[data-universe="sonic"] .cr-card-name h3 { font-size:9.5cqw;letter-spacing:-.035em;transform:skew(-6deg); } .cr-master-card[data-universe="sonic"] .cr-card-stats { left:10%;right:10%;top:77.3%;height:14.2%; } .cr-master-card[data-universe="sonic"] .cr-stat small { font-size:2.9cqw;letter-spacing:.01em; } .cr-master-card[data-universe="sonic"] .cr-stat b { font-size:7.25cqw;letter-spacing:-.035em; } /* The approved frame already contains the exact CORE crest. Hide the synthetic one. */ .cr-master-card[data-universe="sonic"] .cr-card-core { display:none; } /* 0.4F.2 alignment pass against the exact reference geometry. */ .cr-master-card[data-universe="sonic"] .cr-card-name { top:66.5%;height:8.7%; } .cr-master-card[data-universe="sonic"] .cr-card-stats { top:75.8%;height:12.6%; } .cr-master-card[data-universe="sonic"] .cr-stat small { font-size:2.8cqw; } .cr-master-card[data-universe="sonic"] .cr-stat b { font-size:7.0cqw; } /* Exact franchise badge extracted from the approved reference. */ .cr-sonic-world-badge { position:absolute; z-index:55; top:14.2%; right:7.2%; width:18.5%; height:auto; object-fit:contain; pointer-events:none; filter:drop-shadow(0 .45cqw .6cqw rgba(0,0,0,.34)); } .cr-master-card[data-universe="sonic"] .cr-card-world { visibility:hidden; } /* Reference-size typography pass. */ .cr-master-card[data-universe="sonic"] .cr-card-name { top:65.7%;height:10.2%; } .cr-master-card[data-universe="sonic"] .cr-card-name h3 { font-size:11.4cqw; } .cr-master-card[data-universe="sonic"] .cr-card-stats { top:76.6%;height:12.6%; } .cr-master-card[data-universe="sonic"] .cr-stat small { font-size:3.05cqw; } .cr-master-card[data-universe="sonic"] .cr-stat b { font-size:7.65cqw; } .cr-master-card[data-universe="sonic"] .cr-card-art img { transform:scale(calc(var(--art-scale) * .91)); } /* Never squeeze the reference design into five columns on wide desktop. */ @media (min-width:1100px) { #view-card-collection .card-collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } .cr-master-card[data-universe="sonic"] .cr-card-rating::after { content:""; width:0;height:0; margin:1.25cqw 0 0 5.0cqw; border-left:2.25cqw solid transparent; border-right:2.25cqw solid transparent; border-top:2.45cqw solid var(--cr-gold); filter:drop-shadow(0 .35cqw .35cqw rgba(0,0,0,.3)); } /* 0.4F.2 final geometry: the live face follows the same crowned silhouette as the approved frame. */ .cr-master-card[data-universe="sonic"] .cr-card-face { clip-path: polygon( 6.2% 11.1%, 9.5% 8.6%, 35.4% 4.7%, 41% 4.5%, 45.4% 7.1%, 50% 2.6%, 54.6% 7.1%, 59% 4.5%, 64.6% 4.7%, 90.5% 8.6%, 93.8% 11.1%, 96.2% 52%, 96.2% 87%, 91.3% 93.2%, 60.6% 95.8%, 50% 97.8%, 39.4% 95.8%, 8.7% 93.2%, 3.8% 87%, 3.8% 52% ); } /* Exact alpha silhouette from the approved reference prevents any rectangular live-face spill. */ .cr-master-card[data-universe="sonic"] .cr-frame-gold-outer, .cr-master-card[data-universe="sonic"] .cr-frame-blue-outer, .cr-master-card[data-universe="sonic"] .cr-frame-gold-inner { clip-path:none; } .cr-master-card[data-universe="sonic"] .cr-card-face { clip-path:none; -webkit-mask-image:url('../assets/cards/templates/master-sonic-silhouette.png'); mask-image:url('../assets/cards/templates/master-sonic-silhouette.png'); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* ============================================================ 0.5A FINAL CARD SYSTEM REBOOT The collection no longer redraws final cards with HTML/CSS. It displays finished static card fronts as-is. ============================================================ */ #view-card-collection .card-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; } #view-card-collection .collection-card-button { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; } #view-card-collection .collection-card-button:hover { transform: translateY(-6px); } .cr-final-card { width: 100%; aspect-ratio: 1055 / 1491; border: 0; background: transparent; overflow: visible; } .cr-final-card-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.34)); } .collection-modal-card .cr-final-card { width: min(460px, 100%); margin: 0 auto; } .career-player-card .cr-final-card, .career-draft-card .cr-final-card { width: 100%; } @media (max-width: 1100px) { #view-card-collection .card-collection-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { #view-card-collection .card-collection-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } } /* 0.5D · CARS WORLD 02 COMPLETE */ .cars-complete-signal{border-color:rgba(255,78,84,.7);box-shadow:0 0 0 9px rgba(255,54,63,.05),0 0 0 20px rgba(255,255,255,.025),0 24px 55px rgba(0,0,0,.3),0 0 42px rgba(255,35,49,.18)} .cars-pack-primary>span{color:#fff;background:linear-gradient(145deg,#ff4148,#a50712);box-shadow:0 0 22px rgba(255,43,55,.3)} .cars-pack-primary>strong{color:#ff666d} /* 0.5F · CLUB IDENTITY / REAL CRESTS */ .career-club-crest{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 5px rgba(0,0,0,.34))} .career-season-club i.has-real-crest{padding:2px;overflow:hidden;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.15)} .career-season-next-badge.has-real-crest{padding:6px;overflow:hidden;background:rgba(5,12,18,.92);border-color:rgba(255,255,255,.15)} .career-season-fixture>span{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px} .career-season-fixture>span>.career-club-crest{width:20px;height:20px;flex:0 0 20px} .career-leader-row>div{position:relative;padding-left:26px} .career-leader-row>div>.career-club-crest{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px} .career-week-badge.has-real-crest{padding:4px;overflow:hidden;background:rgba(5,12,18,.7)} #career-cup-opponent:has(>.career-club-crest),.career-bracket-match>div>span:has(>.career-club-crest),#career-cup-history small:has(>.career-club-crest),#career-match-player-name:has(>.career-club-crest),#career-match-opponent-name:has(>.career-club-crest){display:inline-flex;align-items:center;gap:7px} #career-cup-opponent>.career-club-crest,.career-bracket-match>div>span>.career-club-crest,#career-cup-history small>.career-club-crest,#career-match-player-name>.career-club-crest,#career-match-opponent-name>.career-club-crest{width:22px;height:22px;flex:0 0 22px} #career-match-player-name>.career-club-crest,#career-match-opponent-name>.career-club-crest{width:28px;height:28px;flex-basis:28px} /* ========================================================= CAREER CORE 0.5I · CLUB CREATOR + FIFA-STYLE DRAFT BOARD ========================================================= */ #view-career-core .career-club-setup-card{display:flex;flex-direction:column;gap:10px} #view-career-core .career-club-setup-card>p,#view-career-core .career-club-setup-card>h3{margin-top:0;margin-bottom:0} #view-career-core .career-club-name-input{font-family:var(--display-font);font-size:1.05rem;font-style:italic;letter-spacing:.025em;text-transform:uppercase} #view-career-core .career-club-crest-label{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:3px} #view-career-core .career-club-crest-label .field-label{margin:0} #view-career-core .career-club-crest-label small{color:#7f9ab2;font-size:.56rem;font-weight:900;letter-spacing:.07em;text-align:right} #view-career-core .career-start-crest-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #view-career-core .career-start-crest-option{position:relative;min-width:0;aspect-ratio:1/1;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:10px 3px;background:rgba(1,10,24,.66);cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease} #view-career-core .career-start-crest-option:hover{transform:translateY(-3px);border-color:rgba(85,232,255,.65);background:rgba(17,47,76,.8)} #view-career-core .career-start-crest-option.active{border-color:var(--yellow);background:rgba(255,211,43,.09);box-shadow:0 0 0 2px rgba(255,211,43,.1),0 10px 24px rgba(0,0,0,.35)} #view-career-core .career-start-crest-option img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4))} #view-career-core .career-start-crest-option::after{content:"✓";position:absolute;right:4px;bottom:4px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#061526;background:var(--yellow);font-size:.65rem;font-weight:1000;opacity:0;transform:scale(.65);transition:.16s ease} #view-career-core .career-start-crest-option.active::after{opacity:1;transform:scale(1)} #view-career-core .career-start-crest-hint{margin:0!important;color:#67839c!important;font-size:.58rem!important} #view-career-core .career-season-entry-badge.has-crest{padding:7px;border-radius:14px;border-width:2px;background:rgba(255,255,255,.05)} #view-career-core .career-season-entry-badge.has-crest img{width:100%;height:100%;object-fit:contain} #view-career-core .career-season-entry-badge.has-crest>span{display:none} #view-career-core #career-season-start:disabled{cursor:not-allowed;opacity:.45;filter:grayscale(.3)} #view-career-core .career-draft-club-strip{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:13px;padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--yellow);background:linear-gradient(90deg,rgba(255,211,43,.06),rgba(255,255,255,.02))} #view-career-core .career-draft-club-crest{width:52px;height:52px;display:grid;place-items:center;padding:5px;border-radius:10px 3px;background:rgba(0,0,0,.35);overflow:hidden} #view-career-core .career-draft-club-crest img{width:100%;height:100%;object-fit:contain} #view-career-core .career-draft-club-crest b{font-family:var(--display-font);color:var(--yellow)} #view-career-core .career-draft-club-strip div{min-width:0} #view-career-core .career-draft-club-strip small,#view-career-core .career-draft-club-strip b{display:block} #view-career-core .career-draft-club-strip small{color:#7891a8;font-size:.55rem;font-weight:900;letter-spacing:.12em} #view-career-core .career-draft-club-strip div>b{margin-top:2px;font-family:var(--display-font);font-size:1.2rem;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-career-core .career-draft-club-strip>strong{padding:7px 10px;border:1px solid rgba(85,232,255,.22);color:var(--cyan);background:rgba(85,232,255,.06);font-family:var(--display-font);font-size:1.1rem;font-style:italic} #view-career-core .career-draft-layout{display:grid;grid-template-columns:minmax(390px,460px) minmax(0,1fr);gap:20px;align-items:start} #view-career-core .career-draft-board-panel{min-width:0;padding:14px;border:1px solid rgba(85,232,255,.13);border-radius:10px 3px;background:linear-gradient(150deg,rgba(7,31,51,.93),rgba(2,12,25,.96))} #view-career-core .career-draft-board-heading,#view-career-core .career-draft-bench-heading{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:8px} #view-career-core .career-draft-board-heading span,#view-career-core .career-draft-bench-heading span{font-family:var(--display-font);font-style:italic;font-weight:1000;letter-spacing:.06em} #view-career-core .career-draft-board-heading small,#view-career-core .career-draft-bench-heading small{color:#718ba3;font-size:.54rem;font-weight:900;text-align:right} #view-career-core .career-draft-pitch{position:relative;width:100%;height:620px;overflow:hidden;border:2px solid rgba(255,255,255,.28);border-radius:8px;background: linear-gradient(rgba(19,95,54,.92),rgba(10,67,42,.95)), repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 54px,rgba(0,0,0,.025) 54px 108px);box-shadow:inset 0 0 70px rgba(0,0,0,.34),0 16px 35px rgba(0,0,0,.28)} #view-career-core .career-draft-pitch::before{content:"";position:absolute;inset:5.5% 6.5%;border:2px solid rgba(255,255,255,.32);background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.28) calc(50% - 1px),rgba(255,255,255,.28) calc(50% + 1px),transparent calc(50% + 1px));pointer-events:none} #view-career-core .career-draft-pitch::after{content:"";position:absolute;left:50%;top:50%;width:104px;height:104px;border:2px solid rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none} #view-career-core .career-draft-board-slot{position:absolute;z-index:2;left:var(--x);top:var(--y);width:76px;min-height:72px;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:1px;padding:5px;border:1px solid rgba(255,255,255,.35);border-radius:10px 3px;color:white;background:rgba(2,12,25,.82);box-shadow:0 8px 18px rgba(0,0,0,.35);cursor:pointer;transition:.16s ease} #view-career-core .career-draft-board-slot:hover:not(:disabled){transform:translate(-50%,-54%);border-color:var(--yellow);box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 18px rgba(255,211,43,.18)} #view-career-core .career-draft-board-slot.active{border-color:var(--yellow);background:rgba(255,211,43,.16);box-shadow:0 0 0 2px rgba(255,211,43,.12),0 0 26px rgba(255,211,43,.2)} #view-career-core .career-draft-board-slot>span{font-family:var(--display-font);font-size:.9rem;font-style:italic;color:var(--cyan)} #view-career-core .career-draft-board-slot>small{color:#fff;font-size:1.3rem;line-height:1} #view-career-core .career-draft-board-slot.picked{width:82px;height:105px;padding:2px 3px 5px;overflow:hidden;border-color:color-mix(in srgb,var(--slot-accent,#55e8ff),white 18%);background:rgba(2,8,19,.94);cursor:default} #view-career-core .career-draft-board-slot.picked img{width:58px;height:74px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.45))} #view-career-core .career-draft-board-slot.picked span{position:absolute;left:4px;top:4px;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.72);font-size:.58rem;color:white} #view-career-core .career-draft-board-slot.picked b{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.48rem;text-transform:uppercase} #view-career-core .career-draft-board-slot.picked strong{position:absolute;right:4px;top:4px;padding:2px 4px;border-radius:3px;color:var(--yellow);background:rgba(0,0,0,.72);font-size:.63rem} #view-career-core .career-draft-board-slot:disabled{opacity:.98} #view-career-core .career-draft-bench-heading{margin-top:13px} #view-career-core .career-draft-bench{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px} #view-career-core .career-draft-bench-slot{min-width:0;height:84px;display:grid;place-items:center;align-content:center;gap:3px;padding:4px;border:1px solid rgba(255,255,255,.15);border-radius:7px 2px;color:white;background:rgba(255,255,255,.035);cursor:pointer;transition:.15s ease;overflow:hidden} #view-career-core .career-draft-bench-slot:not(:disabled):hover,#view-career-core .career-draft-bench-slot.active{border-color:var(--yellow);background:rgba(255,211,43,.08)} #view-career-core .career-draft-bench-slot span{color:#8ba3b8;font-size:.52rem;font-weight:1000} #view-career-core .career-draft-bench-slot small{font-size:1.05rem} #view-career-core .career-draft-bench-slot.picked{position:relative;background:rgba(0,0,0,.32)} #view-career-core .career-draft-bench-slot.picked img{width:44px;height:58px;object-fit:contain} #view-career-core .career-draft-bench-slot.picked b{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.42rem;text-transform:uppercase} #view-career-core .career-draft-bench-slot.picked strong{position:absolute;right:3px;top:3px;font-size:.55rem;color:var(--yellow)} #view-career-core .career-draft-bench.locked{opacity:.45;filter:saturate(.55)} #view-career-core .career-draft-pick-panel{min-width:0;display:grid;gap:14px} #view-career-core .career-draft-pick-panel .career-draft-offers:empty{min-height:410px;display:grid;place-items:center;border:1px dashed rgba(85,232,255,.14);border-radius:8px;background:rgba(255,255,255,.015)} #view-career-core .career-draft-empty-offers{grid-column:1/-1;display:grid;place-items:center;gap:8px;min-height:390px;padding:25px;color:#7891a8;text-align:center} #view-career-core .career-draft-empty-offers span{font-size:2.4rem;opacity:.65} #view-career-core .career-draft-empty-offers b{color:white;font-family:var(--display-font);font-size:1.15rem;font-style:italic} #view-career-core .career-draft-empty-offers small{max-width:420px;line-height:1.5} #view-career-core .career-season-club-heading{display:flex;align-items:center;gap:13px} #view-career-core .career-season-club-crest{width:58px;height:58px;display:grid;place-items:center;flex:0 0 58px;padding:5px;border-radius:11px 3px;background:rgba(0,0,0,.25)} #view-career-core .career-season-club-crest img{width:100%;height:100%;object-fit:contain} #view-career-core .career-season-club-crest b{color:var(--yellow);font-family:var(--display-font)} #view-career-core .career-season-club-heading h2{min-width:0;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-career-core .career-broadcast-bar #career-broadcast-club-name{font:inherit;color:inherit;letter-spacing:inherit} @media(max-width:1200px){ #view-career-core .career-draft-layout{grid-template-columns:1fr} #view-career-core .career-draft-board-panel{max-width:560px;width:100%;margin-inline:auto} } @media(max-width:700px){ #view-career-core .career-start-crest-options{grid-template-columns:repeat(5,minmax(46px,1fr));gap:5px} #view-career-core .career-club-crest-label{align-items:start;flex-direction:column;gap:2px} #view-career-core .career-draft-pitch{height:540px} #view-career-core .career-draft-board-slot{width:63px;min-height:62px} #view-career-core .career-draft-board-slot.picked{width:68px;height:91px} #view-career-core .career-draft-board-slot.picked img{width:48px;height:61px} #view-career-core .career-draft-bench{grid-template-columns:repeat(4,1fr)} #view-career-core .career-draft-club-strip{grid-template-columns:50px minmax(0,1fr)} #view-career-core .career-draft-club-strip>strong{grid-column:1/-1;justify-self:start} #view-career-core .career-season-club-crest{width:48px;height:48px;flex-basis:48px} } /* 0.5J · Career squad management */ #view-career-core .career-team-management-card{margin-top:20px;padding:20px;border-top:4px solid #294b3c} #view-career-core .career-team-management-toolbar{display:grid;grid-template-columns:minmax(220px,.55fr) auto minmax(280px,1fr);align-items:end;gap:12px;margin:14px 0 16px} #view-career-core .career-team-management-toolbar label>span{display:block;margin-bottom:6px;color:#8da69a;font-size:.58rem;font-weight:1000;letter-spacing:.12em} #view-career-core .career-squad-hint{min-height:44px;padding:9px 11px;border-left:3px solid #58c87a;background:rgba(88,200,122,.06);color:#91a99e;font-size:.62rem;line-height:1.45} #view-career-core .career-squad-hint b{color:#d8f5e1} #view-career-core .career-team-management-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(245px,.62fr);gap:16px;align-items:stretch} #view-career-core .career-team-pitch-panel,#view-career-core .career-team-bench-panel{min-width:0;padding:12px;border:1px solid #273d35;background:#07110e} #view-career-core .career-team-board-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#d9ebe2;font-size:.68rem;font-weight:1000;letter-spacing:.1em}.career-team-board-heading small{color:#70887d} #view-career-core .career-squad-pitch{position:relative;width:100%;height:570px;overflow:hidden;border:2px solid rgba(255,255,255,.25);border-radius:7px;background:linear-gradient(rgba(4,62,34,.93),rgba(3,48,27,.96)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 11%,transparent 11% 22%)} #view-career-core .career-squad-pitch::before{content:"";position:absolute;inset:5.5% 6.5%;border:2px solid rgba(255,255,255,.27);background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.24) calc(50% - 1px),rgba(255,255,255,.24) calc(50% + 1px),transparent calc(50% + 1px));pointer-events:none} #view-career-core .career-squad-pitch::after{content:"";position:absolute;left:50%;top:50%;width:95px;height:95px;border:2px solid rgba(255,255,255,.25);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none} #view-career-core .career-squad-slot{position:absolute;z-index:2;left:var(--x);top:var(--y);width:84px;height:108px;transform:translate(-50%,-50%);display:grid;grid-template-rows:70px auto;justify-items:center;align-items:center;padding:3px 4px 5px;border:1px solid color-mix(in srgb,var(--slot-accent,#58c87a),white 20%);border-radius:10px 3px;color:white;background:rgba(2,9,16,.94);box-shadow:0 8px 19px rgba(0,0,0,.42);cursor:pointer;transition:.14s ease;overflow:hidden} #view-career-core .career-squad-slot:hover{transform:translate(-50%,-53%);border-color:#ffcf2e;box-shadow:0 10px 25px rgba(0,0,0,.5),0 0 18px rgba(255,207,46,.16)} #view-career-core .career-squad-slot.selected{border-color:#ffcf2e;background:#2b2410;box-shadow:0 0 0 2px rgba(255,207,46,.18),0 0 25px rgba(255,207,46,.24)} #view-career-core .career-squad-slot img{width:59px;height:72px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5))} #view-career-core .career-squad-slot span{position:absolute;left:4px;top:4px;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.76);font-size:.56rem;font-weight:1000;color:#e9fff2} #view-career-core .career-squad-slot strong{position:absolute;right:4px;top:4px;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.76);color:#ffcf2e;font-size:.62rem} #view-career-core .career-squad-slot b{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.46rem;text-align:center;text-transform:uppercase} #view-career-core .career-team-bench-panel{display:flex;flex-direction:column} #view-career-core .career-squad-selection{display:grid;grid-template-columns:38px 1fr;column-gap:8px;align-items:center;margin-bottom:10px;padding:10px;background:#0d1b16;border-left:3px solid #384f46}.career-squad-selection>span{grid-row:1/3;font-size:1.4rem;color:#58c87a}.career-squad-selection b{font-size:.7rem}.career-squad-selection small{color:#7f958b;font-size:.55rem} #view-career-core .career-squad-selection.active{border-color:#ffcf2e;background:rgba(255,207,46,.07)}#view-career-core .career-squad-selection.active>span{color:#ffcf2e} #view-career-core .career-squad-bench{display:grid;gap:7px} #view-career-core .career-squad-bench-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:63px;padding:6px 8px;border:1px solid #24372f;border-left:3px solid var(--card-accent,#58c87a);color:white;background:#0a1511;cursor:pointer;text-align:left;transition:.13s ease} #view-career-core .career-squad-bench-card:hover,#view-career-core .career-squad-bench-card.selected{border-color:#ffcf2e;background:rgba(255,207,46,.065)} #view-career-core .career-squad-bench-card img{width:46px;height:55px;object-fit:contain}.career-squad-bench-card span{min-width:0}.career-squad-bench-card b,.career-squad-bench-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.career-squad-bench-card b{font-size:.6rem;text-transform:uppercase}.career-squad-bench-card small{margin-top:3px;color:#81968c;font-size:.51rem}.career-squad-bench-card strong{font-family:var(--display-font);font-size:1rem;color:#ffcf2e} #view-career-core .career-squad-roster-details{margin-top:14px;border-top:1px solid #22332d;padding-top:10px}.career-squad-roster-details summary{cursor:pointer;color:#839a90;font-size:.62rem;font-weight:900;letter-spacing:.08em}.career-squad-roster-details[open] summary{margin-bottom:10px;color:#cfe5da} @media(max-width:980px){#view-career-core .career-team-management-toolbar{grid-template-columns:1fr 1fr}.career-squad-hint{grid-column:1/-1}#view-career-core .career-team-management-layout{grid-template-columns:1fr}#view-career-core .career-squad-pitch{height:520px}#view-career-core .career-squad-bench{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){#view-career-core .career-team-management-toolbar{grid-template-columns:1fr}#view-career-core .career-squad-hint{grid-column:auto}#view-career-core .career-squad-pitch{height:470px}#view-career-core .career-squad-slot{width:68px;height:91px;grid-template-rows:57px auto}#view-career-core .career-squad-slot img{width:48px;height:58px}#view-career-core .career-squad-bench{grid-template-columns:1fr}} /* === 0.5K · Career rules refresh ======================================= */ .career-transfer-popup[hidden]{display:none!important} .career-transfer-popup{ position:fixed; inset:0; z-index:2500; display:grid; place-items:center; padding:24px; background:rgba(2,7,16,.76); backdrop-filter:blur(8px); } .career-transfer-popup-card{ position:relative; width:min(720px,calc(100vw - 32px)); display:grid; grid-template-columns:auto 1fr; gap:18px 22px; align-items:center; padding:28px; border:1px solid rgba(92,232,255,.42); border-radius:24px; background:linear-gradient(145deg,rgba(8,24,45,.98),rgba(7,11,23,.98)); box-shadow:0 24px 90px rgba(0,0,0,.6),0 0 34px rgba(78,220,255,.12); } .career-transfer-popup-icon{ width:72px;height:72px;border-radius:22px;display:grid;place-items:center; font-size:36px;font-weight:900;color:#07121d;background:linear-gradient(135deg,#58e8ff,#9effa9); box-shadow:0 0 28px rgba(88,232,255,.28) } .career-transfer-popup-card h2{margin:3px 0 7px;font-size:clamp(22px,4vw,34px)} .career-transfer-popup-card p{margin:0;color:var(--muted)} .career-transfer-popup-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap} .career-transfer-popup-close{ position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%; background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer } .career-competition-tab.has-career-alert{position:relative;border-color:rgba(255,207,46,.75);box-shadow:inset 0 0 0 1px rgba(255,207,46,.18),0 0 18px rgba(255,207,46,.10)} .career-competition-tab.has-career-alert::after{ content:'!';position:absolute;right:7px;top:6px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center; background:#ffcf2e;color:#121212;font-size:11px;font-weight:1000;box-shadow:0 0 12px rgba(255,207,46,.55) } .career-squad-slot.suspended,.career-squad-bench-card.suspended,.career-roster-row.suspended{ border-color:rgba(255,65,65,.88)!important;box-shadow:0 0 0 1px rgba(255,65,65,.22),0 0 22px rgba(255,40,40,.16)!important } .career-squad-slot.suspended img,.career-squad-bench-card.suspended img,.career-roster-row.suspended img{filter:grayscale(.5) brightness(.72)} .career-squad-slot.suspended strong,.career-squad-bench-card.suspended strong,.career-roster-row.suspended strong{color:#ff6d6d!important} .career-extra-time-goals{display:grid;gap:6px;margin-top:10px;width:100%} .career-extra-time-goals span{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.06)} .career-extra-time-goals small{color:var(--muted)} .career-europe-ticket{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid rgba(255,207,46,.25);border-radius:16px;background:linear-gradient(135deg,rgba(255,207,46,.10),rgba(85,232,255,.06))} .career-europe-ticket>span{font-size:30px;color:#ffcf2e}.career-europe-ticket div{flex:1;display:grid;gap:3px}.career-europe-ticket small{color:var(--muted)}.career-europe-ticket strong{font-size:22px;color:#ffcf2e} @media(max-width:620px){.career-transfer-popup-card{grid-template-columns:1fr;text-align:center}.career-transfer-popup-icon{margin:auto}.career-transfer-popup-actions{grid-column:1}.career-transfer-popup-actions>*{flex:1 1 100%}} /* 0.5L · Cup Alert + Football World */ .career-cup-alert[hidden]{display:none!important} .career-cup-alert{position:fixed;inset:0;z-index:180;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .18s ease} .career-cup-alert.show{opacity:1} .career-cup-alert.exit{opacity:0} .career-cup-alert-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,205,42,.18),rgba(2,8,20,.82) 42%,rgba(1,5,13,.96));backdrop-filter:blur(7px)} .career-cup-alert-card{position:relative;width:min(520px,88vw);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:38px 28px 32px;overflow:hidden;border:1px solid rgba(255,211,43,.58);border-radius:28px 7px 28px 7px;background:linear-gradient(145deg,rgba(20,26,21,.97),rgba(7,13,22,.98));box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 0 42px rgba(255,202,40,.07);transform:scale(.72) rotate(-2deg);filter:blur(5px);transition:transform .34s cubic-bezier(.16,.9,.28,1.2),filter .28s ease} .career-cup-alert.show .career-cup-alert-card{transform:scale(1) rotate(0);filter:blur(0)} .career-cup-alert.exit .career-cup-alert-card{transform:scale(1.04);filter:blur(2px)} .career-cup-alert-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 10deg,rgba(255,213,46,.14) 0 5deg,transparent 5deg 18deg);animation:careerCupRays 8s linear infinite;mask-image:radial-gradient(circle,black 0 32%,transparent 66%)} .career-cup-alert-trophy{position:relative;font-size:5.4rem;line-height:1;filter:drop-shadow(0 0 18px rgba(255,210,50,.6));transform:translateY(10px) scale(.5);opacity:0;animation:careerCupTrophy .75s .08s cubic-bezier(.16,.9,.28,1.25) forwards} .career-cup-alert-card .eyebrow{position:relative;margin:10px 0 0;color:#ffd93c;letter-spacing:.22em} .career-cup-alert-card h2{position:relative;margin:0;font-family:var(--display-font);font-style:italic;font-size:clamp(1.7rem,5vw,3rem);line-height:1;text-align:center;text-transform:uppercase} .career-cup-alert-card>b{position:relative;color:var(--cyan);font-family:var(--display-font);font-size:.88rem;letter-spacing:.12em} .career-cup-alert-card>small{position:relative;margin-top:6px;color:#aab9b2;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;text-align:center} @keyframes careerCupRays{to{transform:rotate(360deg)}} @keyframes careerCupTrophy{0%{transform:translateY(12px) scale(.35) rotate(-12deg);opacity:0}60%{transform:translateY(-5px) scale(1.12) rotate(4deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(0);opacity:1}} .career-world-panel{padding:22px;overflow:hidden} .career-world-heading{margin-bottom:3px} .career-world-intro{max-width:980px;margin:0 0 18px;color:#8ca098;font-size:.72rem;line-height:1.55} .career-world-subnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:18px;padding:6px;border:1px solid #263b34;border-radius:9px;background:#08130f} .career-world-subnav button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#82968e;font-family:var(--display-font);font-style:italic;text-transform:uppercase;cursor:pointer} .career-world-subnav button span{font-size:1rem}.career-world-subnav button b{font-size:.65rem} .career-world-subnav button:hover,.career-world-subnav button.active{color:white;border-color:rgba(88,200,122,.38);background:linear-gradient(120deg,rgba(88,200,122,.18),rgba(85,232,255,.06));box-shadow:inset 0 -2px 0 #58c87a} .career-world-toolbar{display:grid;grid-template-columns:repeat(2,minmax(180px,280px));gap:12px;margin:4px 0 16px} .career-world-toolbar.single{grid-template-columns:minmax(220px,340px)} .career-world-toolbar label{display:grid;gap:5px}.career-world-toolbar label>span{color:#789189;font-family:var(--display-font);font-size:.54rem;letter-spacing:.1em} .career-world-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:6px 0 10px;padding-bottom:10px;border-bottom:1px solid #21352e} .career-world-block-head .eyebrow{margin-bottom:3px}.career-world-block-head h3{margin:0;font-family:var(--display-font);font-size:1rem;font-style:italic;text-transform:uppercase} .career-world-table-scroll{overflow:auto;border:1px solid #20342d;border-radius:7px;background:#07110e} .career-world-table-head,.career-world-table-row{min-width:760px;display:grid;grid-template-columns:42px minmax(250px,1.5fr) repeat(4,48px) 78px 58px 58px;align-items:center;gap:3px;padding:0 9px} .career-world-table-head{height:34px;color:#70867e;background:#0d1915;font-family:var(--display-font);font-size:.48rem;text-transform:uppercase} .career-world-table-row{min-height:43px;border-top:1px solid #182720;color:#afbeb8;font-size:.65rem} .career-world-table-row:hover{background:#0d1c17}.career-world-table-row.player{background:linear-gradient(90deg,rgba(85,232,255,.12),rgba(88,200,122,.05));box-shadow:inset 3px 0 0 var(--cyan)} .career-world-table-row>span:not(.career-world-club),.career-world-table-row>strong{text-align:center}.career-world-table-row>strong{color:#fff;font-family:var(--display-font)} .career-world-club{display:flex;align-items:center;gap:10px;min-width:0}.career-world-club i{width:28px;height:28px;display:grid;place-items:center;flex:none;border:1px solid color-mix(in srgb,var(--club),white 22%);border-radius:50%;background:color-mix(in srgb,var(--club),#06110e 58%);color:white;font-size:.42rem;font-style:normal}.career-world-club b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8f1ed} .career-world-cup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:2px 0 18px} .career-world-cup-card{min-height:88px;display:grid;grid-template-columns:34px 1fr 26px;align-items:center;gap:7px;padding:10px;border:1px solid #24382f;border-radius:9px;background:#09140f;color:#90a59d;text-align:left;cursor:pointer}.career-world-cup-card>span{font-size:1.25rem}.career-world-cup-card>div{display:grid;gap:3px}.career-world-cup-card b{color:#e3ece8;font-size:.6rem}.career-world-cup-card small{font-size:.49rem;line-height:1.25}.career-world-cup-card strong{font-size:1.1rem;opacity:.55}.career-world-cup-card:hover,.career-world-cup-card.active{border-color:rgba(255,207,46,.55);background:linear-gradient(135deg,rgba(255,207,46,.08),#0a1511);box-shadow:inset 0 -2px 0 #ffcf2e}.career-world-cup-card.active strong{opacity:1;filter:drop-shadow(0 0 8px rgba(255,207,46,.45))} .career-world-results{display:grid;gap:6px}.career-world-result{min-height:39px;display:grid;grid-template-columns:minmax(90px,1fr) 90px minmax(90px,1fr);align-items:center;gap:8px;padding:7px 10px;border:1px solid #1c3028;border-radius:5px;background:#08120f;color:#a8b8b1;font-size:.6rem}.career-world-result span:last-child{text-align:right}.career-world-result b{text-align:center;color:white;font-family:var(--display-font);font-size:.68rem}.career-world-result b small{color:#ffcf2e;font-size:.44rem} .career-world-europe-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px}.career-world-europe-head,.career-world-europe-row{display:grid;grid-template-columns:38px minmax(180px,1fr) 50px 72px 54px;align-items:center;gap:4px;padding:0 9px}.career-world-europe-head{height:32px;border:1px solid #20342d;border-radius:6px 6px 0 0;background:#0e1916;color:#71867f;font-family:var(--display-font);font-size:.47rem}.career-world-europe-row{min-height:38px;border:1px solid #1c2c26;border-top:0;background:#07110e;color:#a6b7b0;font-size:.59rem}.career-world-europe-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8f0ed}.career-world-europe-row strong{color:white;text-align:center}.career-world-europe-row.player{box-shadow:inset 3px 0 0 var(--cyan);background:rgba(85,232,255,.08)} .career-world-round-heading{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid #284238;border-radius:6px;background:#0c1b16}.career-world-round-heading b{font-family:var(--display-font);font-style:italic;color:#fff}.career-world-round-heading small{color:#64d989;font-family:var(--display-font)} .career-world-no-tournament,.career-world-tournament-countdown{min-height:150px;display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:18px;padding:24px;border:1px solid #22372f;border-radius:9px;background:radial-gradient(circle at 10% 50%,rgba(85,232,255,.09),transparent 38%),#08120f}.career-world-no-tournament>span,.career-world-tournament-countdown>span{font-size:3.4rem}.career-world-no-tournament>div,.career-world-tournament-countdown>div{display:grid;gap:5px}.career-world-no-tournament b,.career-world-tournament-countdown b{font-family:var(--display-font);font-style:italic;color:white}.career-world-no-tournament small,.career-world-tournament-countdown small{max-width:650px;color:#84978f;line-height:1.5}.career-world-tournament-countdown>strong{color:#ffcf2e;font-family:var(--display-font);font-size:.7rem} .career-world-national-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.career-world-national-match{min-height:58px;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:8px;padding:10px 12px;border:1px solid #22382f;border-radius:7px;background:#08130f;color:#a9b9b2;font-size:.62rem}.career-world-national-match span:last-child{text-align:right}.career-world-national-match b{text-align:center;color:#fff;font-family:var(--display-font);font-size:.8rem} @media(max-width:980px){.career-world-cup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.career-world-europe-layout{grid-template-columns:1fr}.career-world-national-grid{grid-template-columns:1fr}} @media(max-width:650px){.career-world-panel{padding:15px}.career-world-subnav{grid-template-columns:repeat(2,1fr)}.career-world-toolbar{grid-template-columns:1fr}.career-world-cup-grid{grid-template-columns:1fr}.career-world-no-tournament,.career-world-tournament-countdown{grid-template-columns:55px 1fr}.career-world-tournament-countdown>strong{grid-column:2}.career-cup-alert-card{min-height:240px}.career-cup-alert-trophy{font-size:4.4rem}} @media(prefers-reduced-motion:reduce){.career-cup-alert,.career-cup-alert-card,.career-cup-alert-trophy{transition:none!important;animation:none!important}.career-cup-alert.show .career-cup-alert-card{transform:none}.career-cup-alert-trophy{opacity:1;transform:none}} /* 0.5M · NEWS CENTER + SPECIAL MATCH INTROS + SEASON AWARDS */ #view-career-core .career-competition-tab.has-news{position:relative} #view-career-core .career-competition-tab.has-news::after{ content:attr(data-news-count);position:absolute;right:5px;top:4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px; background:#ffda3a;color:#08100d;font:800 9px/1 var(--display-font);box-shadow:0 0 13px rgba(255,218,58,.42) } .career-news-panel,.career-awards-panel{margin-bottom:18px;overflow:hidden} .career-news-hero{ display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin:4px 0 18px;padding:24px; border:1px solid rgba(88,200,122,.26);border-radius:18px 5px 18px 5px;background:linear-gradient(120deg,rgba(25,76,48,.43),rgba(7,18,22,.82) 64%);position:relative;overflow:hidden } .career-news-hero::after{content:"LIVE";position:absolute;right:-10px;bottom:-18px;font:900 italic 78px/1 var(--display-font);color:rgba(255,255,255,.025);letter-spacing:.06em} .career-news-hero>span{font-size:4rem;text-align:center;filter:drop-shadow(0 0 14px rgba(88,200,122,.3))} .career-news-hero h3{margin:2px 0 8px;font:800 italic clamp(1.35rem,3vw,2.2rem)/1 var(--display-font);text-transform:uppercase} .career-news-hero p:not(.eyebrow){margin:0 0 9px;color:#b6c9c0} .career-news-hero small{color:#ffda3a;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .career-news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} .career-news-story{display:grid;grid-template-columns:46px 1fr;gap:11px;padding:15px;border:1px solid #213b32;border-radius:12px 3px 12px 3px;background:#0b1714;min-height:124px} .career-news-story>span{font-size:1.65rem;display:grid;place-items:start center} .career-news-story small{display:block;color:#67d88b;font:800 9px/1.2 var(--display-font);letter-spacing:.12em;text-transform:uppercase} .career-news-story b{display:block;margin:5px 0 6px;color:white;font:800 .83rem/1.12 var(--display-font);text-transform:uppercase} .career-news-story p{margin:0;color:#91a89f;font-size:.72rem;line-height:1.4} .career-news-story em{display:block;margin-top:8px;color:#e8ca4b;font-size:.62rem;font-style:normal;font-weight:800;text-transform:uppercase} .career-news-story.loss,.career-news-story.discipline{border-color:rgba(255,78,78,.32)} .career-news-story.cupwin,.career-news-story.season{border-color:rgba(255,218,58,.34)} .career-awards-hero{display:grid;grid-template-columns:115px 1fr;align-items:center;gap:20px;padding:25px;margin-bottom:14px;border:1px solid rgba(255,218,58,.3);border-radius:20px 5px 20px 5px;background:radial-gradient(circle at 12% 50%,rgba(255,213,61,.16),transparent 30%),linear-gradient(120deg,#152019,#091411 70%)} .career-awards-hero-icon{font-size:5.2rem;text-align:center;filter:drop-shadow(0 0 20px rgba(255,218,58,.38))} .career-awards-hero h3{margin:1px 0 5px;font:900 italic clamp(1.5rem,3vw,2.35rem)/1 var(--display-font);text-transform:uppercase} .career-awards-hero b{display:block;color:#ffda3a;text-transform:uppercase} .career-awards-hero small{display:block;margin-top:7px;color:#9db0a7;text-transform:uppercase;letter-spacing:.06em} .career-awards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .career-award-card{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;padding:14px;border:1px solid #263d35;border-radius:12px 3px;background:linear-gradient(145deg,#101d18,#09120f)} .career-award-card>span{font-size:1.9rem;text-align:center} .career-award-card small{display:block;color:#d9be4b;font:800 8px/1.3 var(--display-font);letter-spacing:.1em;text-transform:uppercase} .career-award-card b{display:block;margin:4px 0 2px;font:800 .8rem/1.08 var(--display-font);text-transform:uppercase} .career-award-card em{display:block;color:#7fa193;font-size:.6rem;font-style:normal;text-transform:uppercase} .career-award-card p{margin:7px 0 0;color:#b3c1bb;font-size:.66rem} .career-tots-heading{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:25px 0 10px;padding-top:17px;border-top:1px solid #263b34} .career-tots-heading h3{margin:2px 0 0;font:800 italic 1.1rem/1 var(--display-font);text-transform:uppercase} .career-tots-heading>span{color:#ffda3a;font:900 italic 1.1rem var(--display-font)} .career-awards-tots{display:grid;gap:7px;padding:14px;border:1px solid #253b33;border-radius:14px;background:linear-gradient(180deg,rgba(18,65,41,.34),rgba(5,15,12,.82));position:relative;overflow:hidden} .career-awards-tots::before{content:"";position:absolute;inset:10px;border:1px solid rgba(88,200,122,.12);border-radius:45%;pointer-events:none} .career-tots-line{position:relative;z-index:1;display:grid;grid-template-columns:95px 1fr;gap:10px;align-items:center;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.035)} .career-tots-line:last-child{border-bottom:0} .career-tots-line>small{color:#6ccf8a;font:800 8px var(--display-font);letter-spacing:.12em} .career-tots-line>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .career-tots-line span{padding:8px 7px;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:rgba(0,0,0,.2);text-align:center} .career-tots-line b{display:block;font-size:.63rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .career-tots-line em{display:block;margin-top:3px;color:#7d958a;font-size:.52rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .career-special-alert[hidden],.career-awards-show[hidden]{display:none!important} .career-special-alert{position:fixed;inset:0;z-index:181;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .18s ease} .career-special-alert.show{opacity:1}.career-special-alert.exit{opacity:0} .career-special-alert-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(88,200,122,.16),rgba(1,8,12,.88) 44%,#010509);backdrop-filter:blur(7px)} .career-special-alert-card{--intro:#58c87a;position:relative;width:min(560px,90vw);min-height:285px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:35px 28px;overflow:hidden;border:1px solid color-mix(in srgb,var(--intro) 65%,transparent);border-radius:6px 30px 6px 30px;background:linear-gradient(145deg,#101c18,#06100d);box-shadow:0 30px 95px rgba(0,0,0,.62),inset 0 0 55px color-mix(in srgb,var(--intro) 8%,transparent);transform:scale(.72) skewX(-2deg);filter:blur(4px);transition:transform .34s cubic-bezier(.16,.9,.28,1.2),filter .28s} .career-special-alert.show .career-special-alert-card{transform:scale(1) skewX(0);filter:blur(0)} .career-special-alert[data-variant="title"] .career-special-alert-card{--intro:#ffda3a}.career-special-alert[data-variant="promotion"] .career-special-alert-card{--intro:#50e785}.career-special-alert[data-variant="danger"] .career-special-alert-card{--intro:#ff5151}.career-special-alert[data-variant="top"] .career-special-alert-card{--intro:#5fd8ff}.career-special-alert[data-variant="direct"] .career-special-alert-card{--intro:#ff884d} .career-special-alert-lines{position:absolute;inset:-20%;background:repeating-linear-gradient(116deg,transparent 0 34px,color-mix(in srgb,var(--intro) 11%,transparent) 34px 37px,transparent 37px 70px);transform:translateX(-20%);animation:careerIntroLines 1.8s linear infinite} .career-special-alert-icon{position:relative;font-size:5rem;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--intro) 70%,transparent));animation:careerIntroIcon .7s cubic-bezier(.16,.9,.28,1.2)} .career-special-alert-card .eyebrow{position:relative;margin:7px 0 0;color:var(--intro);letter-spacing:.22em} .career-special-alert-card h2{position:relative;margin:0;font:900 italic clamp(1.8rem,5vw,3rem)/1 var(--display-font);text-transform:uppercase;text-align:center} .career-special-alert-card>b{position:relative;color:#fff;font:800 .88rem var(--display-font);letter-spacing:.08em;text-transform:uppercase} .career-special-alert-card>small{position:relative;color:#91aaa0;text-transform:uppercase;letter-spacing:.08em;text-align:center} @keyframes careerIntroLines{to{transform:translateX(20%)}}@keyframes careerIntroIcon{0%{opacity:0;transform:scale(.3) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(0)}} .career-cup-alert.finale .career-cup-alert-card{border-color:rgba(255,226,71,.92);box-shadow:0 32px 110px rgba(0,0,0,.66),0 0 55px rgba(255,218,58,.18),inset 0 0 55px rgba(255,218,58,.1)} .career-cup-alert.finale .career-cup-alert-trophy{font-size:6.2rem} .career-awards-show{position:fixed;inset:0;z-index:190;display:grid;place-items:center;opacity:0;transition:opacity .2s ease} .career-awards-show.show{opacity:1} .career-awards-show-backdrop{position:absolute;inset:0;background:rgba(1,6,5,.9);backdrop-filter:blur(9px)} .career-awards-show-card{position:relative;width:min(850px,94vw);max-height:88vh;overflow:auto;padding:30px;border:1px solid rgba(255,218,58,.5);border-radius:24px 6px 24px 6px;background:radial-gradient(circle at 50% 0,rgba(255,218,58,.13),transparent 35%),#09120f;box-shadow:0 32px 110px rgba(0,0,0,.7);text-align:center;transform:translateY(30px) scale(.94);transition:transform .28s cubic-bezier(.16,.9,.28,1.15)} .career-awards-show.show .career-awards-show-card{transform:none} .career-awards-show-crown{display:block;font-size:5rem;filter:drop-shadow(0 0 22px rgba(255,218,58,.4))} .career-awards-show-card>small{color:#d8bd4e;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .career-awards-show-card>h2{margin:7px 0 20px;font:900 italic clamp(1.65rem,4vw,2.7rem)/1 var(--display-font);text-transform:uppercase} .career-awards-show-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px;text-align:left} .career-awards-show-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:1px solid #3e5249;border-radius:50%;background:#111e19;color:#fff;font-size:1.3rem;cursor:pointer} @media(max-width:850px){.career-awards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.career-tots-line>div{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.career-news-list{grid-template-columns:1fr}.career-news-hero{grid-template-columns:60px 1fr;padding:18px}.career-news-hero>span{font-size:2.8rem}.career-awards-hero{grid-template-columns:70px 1fr;padding:18px}.career-awards-hero-icon{font-size:3.5rem}.career-awards-grid,.career-awards-show-grid{grid-template-columns:1fr}.career-tots-line{grid-template-columns:1fr}.career-tots-line>div{grid-template-columns:repeat(2,minmax(0,1fr))}.career-special-alert-card{min-height:245px}.career-special-alert-icon{font-size:4.1rem}} @media(prefers-reduced-motion:reduce){.career-special-alert,.career-special-alert-card,.career-special-alert-lines,.career-special-alert-icon,.career-awards-show,.career-awards-show-card{transition:none!important;animation:none!important}.career-special-alert.show .career-special-alert-card,.career-awards-show.show .career-awards-show-card{transform:none}} /* ====================================================================== 0.5N · CAREER COMMAND CENTER · STRUCTURED UI REFRESH ====================================================================== */ #view-career-core{ --career-bg:#07110e; --career-panel:#0c1814; --career-panel-2:#101f19; --career-panel-3:#14261e; --career-line:rgba(137,190,159,.18); --career-line-strong:rgba(137,206,166,.34); --career-primary:#58d889; --career-primary-soft:rgba(88,216,137,.11); --career-gold:#f3cc59; --career-cyan:#64cfe7; --career-danger:#ff6868; --career-text:#edf7f1; --career-muted:#8aa196; --career-shadow:0 18px 48px rgba(0,0,0,.28); color:var(--career-text); } #view-career-core::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(circle at 82% 18%,rgba(88,216,137,.07),transparent 27%), radial-gradient(circle at 18% 78%,rgba(100,207,231,.045),transparent 26%); } #view-career-core .career-game-header{ border-color:var(--career-line);border-left:5px solid var(--career-primary);border-radius:12px; background:linear-gradient(110deg,rgba(88,216,137,.12),transparent 36%),linear-gradient(145deg,#101f1a,#08120f); box-shadow:var(--career-shadow); } #view-career-core .career-broadcast-bar{ margin:10px 0 20px;border-color:var(--career-line);border-radius:10px;background:#091510;color:#9bb2a6; } #view-career-core .career-broadcast-bar>span:first-child{color:var(--career-text)} #view-career-core .career-broadcast-bar>span:first-child i{background:var(--career-primary);box-shadow:0 0 13px rgba(88,216,137,.55)} #view-career-core .panel{ border:1px solid var(--career-line);border-radius:16px;background:linear-gradient(145deg,var(--career-panel-2),var(--career-panel)); box-shadow:var(--career-shadow); } #view-career-core .panel-heading{gap:16px;margin-bottom:16px} #view-career-core .panel-heading h2{color:var(--career-text);letter-spacing:-.035em} #view-career-core .eyebrow{color:#7fcf9b} #view-career-core .status-tag{border-color:var(--career-line-strong);border-radius:999px;color:#b7cfbf;background:#10231b} #view-career-core .muted{color:var(--career-muted)} #view-career-core .select-input{ min-height:44px;border:1px solid var(--career-line);border-radius:10px;background:#08130f;color:var(--career-text); box-shadow:none; } #view-career-core .select-input:focus{border-color:rgba(88,216,137,.66);box-shadow:0 0 0 3px rgba(88,216,137,.09);outline:0} #view-career-core .primary-button{border-radius:10px;background:linear-gradient(100deg,#62de91,#49c97d);color:#06110c;box-shadow:0 10px 25px rgba(47,194,112,.14)} #view-career-core .primary-button:hover{box-shadow:0 13px 32px rgba(47,194,112,.24)} #view-career-core .ghost-button{border-radius:10px} /* Club creator and draft inherit one visual language. */ #view-career-core .career-season-start{gap:24px;padding:30px;background:linear-gradient(145deg,#102019,#08130f)} #view-career-core .career-season-entry-card{border-color:var(--career-line-strong);border-radius:16px;background:linear-gradient(145deg,#14281f,#0a1712)} #view-career-core .career-season-entry-badge{border-color:var(--career-gold);color:var(--career-gold);box-shadow:0 0 25px rgba(243,204,89,.13)} #view-career-core .career-draft-board-panel,#view-career-core .career-draft-pick-panel{border-color:var(--career-line);background:linear-gradient(145deg,#0d1d17,#07120e)} /* Main dashboard becomes a command centre: hero + sticky left rail + active workspace. */ #career-season-dashboard{ display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px 24px;align-items:start;min-width:0; } #career-season-dashboard>.career-season-hero{grid-column:1/-1;grid-row:1} #career-season-dashboard>.career-competition-tabs{grid-column:1;grid-row:2 / span 32} #career-season-dashboard>.career-season-main-grid, #career-season-dashboard>.career-season-secondary-grid, #career-season-dashboard>.career-news-panel, #career-season-dashboard>.career-awards-panel, #career-season-dashboard>.career-team-management-card, #career-season-dashboard>.career-transfer-panel, #career-season-dashboard>.career-calendar-panel, #career-season-dashboard>.career-world-panel, #career-season-dashboard>.career-longterm-grid{ grid-column:2;min-width:0;margin:0; } #career-season-dashboard>.career-transfer-popup, #career-season-dashboard>.career-cup-alert, #career-season-dashboard>.career-special-alert, #career-season-dashboard>.career-awards-show{grid-column:1/-1} /* Season identity header */ #view-career-core .career-season-hero{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity clock" "timeline timeline" "kpis kpis"; gap:17px 28px;min-height:0;padding:26px 30px;margin:0;overflow:hidden;border:1px solid var(--career-line);border-left:5px solid var(--career-primary); border-radius:18px;background: radial-gradient(circle at 87% 18%,rgba(243,204,89,.11),transparent 22%), linear-gradient(120deg,rgba(88,216,137,.11),transparent 37%), linear-gradient(145deg,#14271f,#091510 72%); box-shadow:var(--career-shadow); } #view-career-core .career-season-hero::after{ content:"";position:absolute;right:-55px;top:-85px;width:300px;height:300px;border:1px solid rgba(255,255,255,.075);border-radius:50%;opacity:1; box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 80px rgba(255,255,255,.012); } #view-career-core .career-season-hero>div:first-child{grid-area:identity;position:relative;z-index:2} #view-career-core .career-season-clock{grid-area:clock;align-self:start;justify-self:end;position:relative;z-index:2;margin:0;padding:11px 14px;border:1px solid var(--career-line);border-radius:10px;background:rgba(4,14,10,.46);text-align:right} #view-career-core .career-season-clock b{color:var(--career-gold);font-size:1rem} #view-career-core .career-calendar-season-timeline{grid-area:timeline;position:relative;z-index:2;max-width:none;margin:0;padding:10px 4px 2px} #view-career-core .career-calendar-season-timeline span{color:#71897d} #view-career-core .career-calendar-season-timeline span.active{color:var(--career-gold)} #view-career-core .career-calendar-season-timeline span.done i{border-color:var(--career-primary);background:var(--career-primary)} #view-career-core .career-calendar-season-timeline span.active i{border-color:var(--career-gold);box-shadow:0 0 14px rgba(243,204,89,.3)} #view-career-core .career-season-kpis{grid-area:kpis;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--career-line);border-radius:12px;overflow:hidden;background:var(--career-line)} #view-career-core .career-season-kpis span{min-width:0;padding:13px 16px;border:0!important;background:#0b1713} #view-career-core .career-season-kpis span+span{border-left:0} #view-career-core .career-season-kpis small{color:#758d81;font-size:.57rem} #view-career-core .career-season-kpis b{color:var(--career-text);font-size:1.42rem} #view-career-core .career-season-club-heading{gap:14px} #view-career-core .career-season-club-crest{width:64px;height:64px;flex-basis:64px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#07120e} #view-career-core .career-season-hero h2{font-size:clamp(1.8rem,3.2vw,3rem);color:var(--career-text)} #view-career-core .career-season-progress{margin-top:15px;height:5px;background:#24352e} #view-career-core .career-season-progress i{background:linear-gradient(90deg,var(--career-primary),#8ee9ad);box-shadow:none} #view-career-core .career-season-hero>div:first-child>small{color:#7d9589} /* Left navigation rail */ #view-career-core .career-competition-tabs{ position:sticky;top:92px;z-index:15;display:flex;flex-direction:column;gap:4px;margin:0;padding:12px;overflow:visible; border:1px solid var(--career-line);border-radius:16px;background:linear-gradient(180deg,#0c1914,#08120f);backdrop-filter:blur(16px);box-shadow:var(--career-shadow); } #view-career-core .career-nav-heading{ display:block;padding:8px 9px 5px;color:#5f786b;font:900 .49rem/1 var(--display-font);letter-spacing:.16em;text-transform:uppercase; } #view-career-core .career-nav-heading-break{margin-top:8px;padding-top:12px;border-top:1px solid var(--career-line)} #view-career-core .career-competition-tab{ flex:0 0 auto;min-height:47px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:7px 9px;border:1px solid transparent!important; border-radius:9px!important;color:#8ba196;background:transparent!important;text-align:left;box-shadow:none!important; } #view-career-core .career-competition-tab span{ width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.035);color:#8ebda0;font-family:var(--display-font);font-style:normal; } #view-career-core .career-competition-tab b{font-size:.62rem;font-style:normal;letter-spacing:.02em} #view-career-core .career-competition-tab:hover{color:#dff0e6;background:rgba(88,216,137,.055)!important} #view-career-core .career-competition-tab.active{ color:#f5fff8;background:linear-gradient(90deg,rgba(88,216,137,.18),rgba(88,216,137,.045))!important;border-color:rgba(88,216,137,.26)!important; } #view-career-core .career-competition-tab.active::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--career-primary)} #view-career-core .career-competition-tab{position:relative} #view-career-core .career-competition-tab.active span{background:rgba(88,216,137,.14);color:#a6f0bf} #view-career-core .career-competition-tab.has-career-alert::after{right:7px;top:5px} #view-career-core .career-competition-tab.has-news::after{right:7px;top:5px} /* Every tab gets the full content column instead of old half-empty grids. */ #view-career-core .career-season-main-grid{display:block} #view-career-core .career-season-secondary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:0} #view-career-core .career-longterm-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:0} #view-career-core .career-season-secondary-grid>article{padding:22px} /* Overview becomes a proper match centre with a separate matchplan deck. */ #view-career-core .career-season-next{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);gap:10px 24px;padding:26px 28px;border:1px solid var(--career-line);border-top:4px solid var(--career-primary);border-radius:16px;background:linear-gradient(145deg,#102019,#09140f); } #view-career-core .career-season-next>.panel-heading{grid-column:1/-1;margin-bottom:4px;padding-bottom:15px;border-bottom:1px solid var(--career-line)} #view-career-core .career-season-next-badge{width:62px;height:62px;border:1px solid var(--career-line-strong);border-radius:12px;background:#07120e;box-shadow:none;color:var(--club,var(--career-primary))} #view-career-core .career-next-duty-date{grid-column:1;align-self:start;margin:9px 0 3px;padding:11px 13px;border:1px solid var(--career-line);border-left:3px solid var(--career-primary);border-radius:8px;background:#0b1813} #view-career-core .career-season-next-meta{grid-column:1;margin:4px 0;color:#8ea499;font-size:.78rem;line-height:1.45} #view-career-core .career-season-strength{grid-column:1;margin:4px 0 0;padding:10px 12px;border:1px solid rgba(243,204,89,.16);border-left:3px solid var(--career-gold);border-radius:8px;background:rgba(243,204,89,.055);color:#dccb8a} #view-career-core .career-season-controls{ grid-column:2;grid-row:2 / span 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border:1px solid var(--career-line);border-radius:12px;background:#08130f; } #view-career-core .career-season-controls::before{content:"MATCHPLAN";grid-column:1/-1;color:#6e887a;font:900 .5rem/1 var(--display-font);letter-spacing:.16em} #view-career-core .career-control-field{display:grid;gap:6px;min-width:0} #view-career-core .career-control-field>span{color:#7e9589;font:900 .55rem/1 var(--display-font);letter-spacing:.08em;text-transform:uppercase} #view-career-core .career-control-field .select-input{width:100%;min-width:0} #view-career-core #career-calendar-next-strip{grid-column:1;margin-top:9px} #view-career-core .career-season-kickoff{grid-column:1/-1;margin-top:8px;min-height:54px;font-size:.78rem;letter-spacing:.05em} #view-career-core .career-season-reset{grid-column:1/-1;justify-self:end;width:auto;margin:0;padding:8px 12px;border:0;background:transparent;color:#617a6e;font-size:.56rem;box-shadow:none} #view-career-core #career-next-season{grid-column:1/-1;margin-top:8px} /* Tables and lists breathe more. */ #view-career-core .career-season-table-card{padding:24px;border:1px solid var(--career-line);border-top:4px solid #365f49;border-radius:16px} #view-career-core .career-season-table-head{padding:0 11px 10px;color:#72887d;border-bottom:1px solid var(--career-line)} #view-career-core .career-season-table-row{min-height:43px;padding:5px 11px;border:0;border-bottom:1px solid rgba(137,190,159,.09);border-radius:7px;background:transparent} #view-career-core .career-season-table-row:hover{background:rgba(88,216,137,.045)} #view-career-core .career-season-table-row.player{border-left:3px solid var(--career-primary);background:linear-gradient(90deg,rgba(88,216,137,.12),rgba(88,216,137,.025));box-shadow:none} #view-career-core .career-season-zone-legend{border-color:var(--career-line);color:#70887c} #view-career-core .career-season-fixture,#view-career-core .career-leader-row{border:1px solid rgba(137,190,159,.08);border-radius:9px;background:#0a1611} #view-career-core .career-season-fixture.player,#view-career-core .career-leader-row.player{border-color:rgba(88,216,137,.24);background:rgba(88,216,137,.06)} #view-career-core .career-leader-row strong{color:var(--career-gold)} /* Team, transfers, world, news and awards use the same spacing/surface logic. */ #view-career-core .career-team-management-card, #view-career-core .career-transfer-panel, #view-career-core .career-calendar-panel, #view-career-core .career-world-panel, #view-career-core .career-news-panel, #view-career-core .career-awards-panel, #view-career-core .career-europe-panel, #view-career-core .career-cup-hub-panel, #view-career-core .career-history-panel{padding:24px;border-top:4px solid #315d47;border-radius:16px} #view-career-core .career-team-management-card{margin-top:0} #view-career-core .career-team-management-toolbar{gap:14px;padding:14px;border:1px solid var(--career-line);border-radius:12px;background:#091510} #view-career-core .career-squad-hint{border:1px solid rgba(88,216,137,.16);border-left:3px solid var(--career-primary);border-radius:8px;background:rgba(88,216,137,.055)} #view-career-core .career-team-pitch-panel,#view-career-core .career-team-bench-panel{border-color:var(--career-line);border-radius:12px;background:#07120e} #view-career-core .career-squad-selection{border:1px solid var(--career-line);border-left:3px solid #3b5c4a;border-radius:8px;background:#0b1813} #view-career-core .career-squad-bench-card{border-color:var(--career-line);border-radius:8px;background:#091510} #view-career-core .career-squad-bench-card:hover,#view-career-core .career-squad-bench-card.selected{border-color:rgba(243,204,89,.55);background:rgba(243,204,89,.055)} #view-career-core .career-world-subnav{border-color:var(--career-line);background:#08130f} #view-career-core .career-world-subnav button:hover,#view-career-core .career-world-subnav button.active{border-color:rgba(88,216,137,.32);background:rgba(88,216,137,.09);box-shadow:inset 0 -2px 0 var(--career-primary)} #view-career-core .career-news-hero{border-color:rgba(88,216,137,.25);background:linear-gradient(120deg,rgba(88,216,137,.12),#0a1713 68%)} #view-career-core .career-news-story,#view-career-core .career-award-card{border-color:var(--career-line);background:#0a1612} #view-career-core .career-awards-hero{border-color:rgba(243,204,89,.25);background:radial-gradient(circle at 12% 50%,rgba(243,204,89,.12),transparent 28%),#0a1612} /* Red-card state is visually explicit but no longer blocks after the player is actually benched. */ #view-career-core .career-squad-slot.suspended,#view-career-core .career-squad-bench-card.suspended,#view-career-core .career-roster-row.suspended{border-color:rgba(255,104,104,.82)!important} #view-career-core .career-squad-bench-card.suspended{background:linear-gradient(90deg,rgba(255,104,104,.07),#091510)} /* Responsive: tablet goes back to a horizontal navigation strip; mobile becomes a single clean column. */ @media(max-width:1180px){ #career-season-dashboard{display:block} #career-season-dashboard>.career-season-hero{margin-bottom:14px} #view-career-core .career-competition-tabs{position:sticky;top:82px;display:flex;flex-direction:row;gap:6px;margin:0 0 16px;padding:7px;overflow-x:auto;border-radius:12px} #view-career-core .career-nav-heading{display:none} #view-career-core .career-competition-tab{flex:0 0 132px;grid-template-columns:28px 1fr;min-height:48px;padding:7px 9px} #view-career-core .career-competition-tab span{width:28px;height:28px} #view-career-core .career-competition-tab.active::before{left:8px;right:8px;top:auto;bottom:-1px;width:auto;height:3px} #career-season-dashboard>.career-season-main-grid, #career-season-dashboard>.career-season-secondary-grid, #career-season-dashboard>.career-news-panel, #career-season-dashboard>.career-awards-panel, #career-season-dashboard>.career-team-management-card, #career-season-dashboard>.career-transfer-panel, #career-season-dashboard>.career-calendar-panel, #career-season-dashboard>.career-world-panel, #career-season-dashboard>.career-longterm-grid{margin-bottom:16px} } @media(max-width:820px){ #view-career-core .career-season-hero{grid-template-columns:1fr;grid-template-areas:"identity" "clock" "timeline" "kpis";padding:22px} #view-career-core .career-season-clock{justify-self:start;text-align:left} #view-career-core .career-season-kpis{grid-template-columns:repeat(2,1fr)} #view-career-core .career-season-next{grid-template-columns:1fr;padding:21px} #view-career-core .career-season-next>*{grid-column:1!important;grid-row:auto!important} #view-career-core .career-season-controls{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px} #view-career-core .career-season-reset{justify-self:end} #view-career-core .career-season-secondary-grid{grid-template-columns:1fr} #view-career-core .career-team-management-card,#view-career-core .career-transfer-panel,#view-career-core .career-calendar-panel,#view-career-core .career-world-panel,#view-career-core .career-news-panel,#view-career-core .career-awards-panel,#view-career-core .career-europe-panel,#view-career-core .career-cup-hub-panel,#view-career-core .career-history-panel{padding:19px} } @media(max-width:560px){ #view-career-core .career-season-hero{padding:18px} #view-career-core .career-season-kpis span{padding:11px 12px} #view-career-core .career-season-kpis b{font-size:1.2rem} #view-career-core .career-season-controls{grid-template-columns:1fr} #view-career-core .career-competition-tab{flex-basis:116px} #view-career-core .career-competition-tab b{font-size:.55rem} #view-career-core .career-season-next{padding:17px} } /* 0.5O · Big Squad View + Form/Morale + Live Manager Moments */ #view-career-core .career-team-management-card{padding:30px!important} #view-career-core .career-team-management-toolbar{grid-template-columns:minmax(250px,.45fr) auto minmax(360px,1fr);padding:16px 18px} #view-career-core .career-dynamics-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 18px} #view-career-core .career-dynamics-legend>span{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--career-line);border-radius:9px;background:#08140f} #view-career-core .career-dynamics-legend b{font-size:.58rem;letter-spacing:.06em;color:#dcebe3} #view-career-core .career-dynamics-legend small{color:#718a7d;font-size:.5rem;line-height:1.35} /* The formation now owns the full width; bench sits below like a real squad screen. */ #view-career-core .career-team-management-layout{display:block!important} #view-career-core .career-team-pitch-panel{padding:16px 18px 20px!important} #view-career-core .career-team-bench-panel{margin-top:16px;padding:15px 16px 18px!important} #view-career-core .career-squad-pitch{height:860px!important;max-width:1220px;margin:0 auto;border-radius:14px!important;border-color:rgba(220,255,233,.28)!important;box-shadow:inset 0 0 60px rgba(0,0,0,.22),0 18px 42px rgba(0,0,0,.18)} #view-career-core .career-squad-pitch::after{width:130px!important;height:130px!important} #view-career-core .career-squad-slot{width:122px!important;height:184px!important;grid-template-rows:160px auto!important;padding:2px 3px 4px!important;border:0!important;border-radius:13px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important} #view-career-core .career-squad-slot:hover{transform:translate(-50%,-53%) scale(1.055)!important;z-index:8!important;box-shadow:none!important} #view-career-core .career-squad-slot.selected{transform:translate(-50%,-52%) scale(1.065)!important;box-shadow:0 0 0 3px rgba(243,204,89,.65),0 0 28px rgba(243,204,89,.30)!important;background:rgba(243,204,89,.06)!important} #view-career-core .career-squad-slot img{width:112px!important;height:168px!important;object-fit:contain!important;filter:drop-shadow(0 9px 10px rgba(0,0,0,.55))!important} #view-career-core .career-squad-slot>span{left:2px!important;top:4px!important;padding:3px 6px!important;border:1px solid rgba(255,255,255,.13);border-radius:6px!important;font-size:.58rem!important;background:rgba(3,11,8,.90)!important} #view-career-core .career-squad-slot>strong{right:0!important;top:4px!important;display:flex;gap:4px;align-items:center;padding:3px 6px!important;border:1px solid rgba(243,204,89,.25);border-radius:6px!important;background:rgba(3,11,8,.92)!important;font-size:.68rem!important} #view-career-core .career-squad-slot>strong em{font-style:normal;font-size:.48rem;color:#9fbeaE} #view-career-core .career-squad-slot>b{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:125px!important;padding:4px 5px;border-radius:6px;background:rgba(4,13,9,.88);font-size:.53rem!important;letter-spacing:.025em} #view-career-core .career-player-dynamics{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:max-content;max-width:145px;padding:3px 6px;border:1px solid var(--career-line);border-radius:999px;background:#07120e;color:#96aa9f;font-size:.43rem;font-weight:900;white-space:nowrap} #view-career-core .career-squad-slot.form-hot .career-player-dynamics{border-color:rgba(255,147,64,.35);color:#ffc080} #view-career-core .career-squad-slot.form-cold .career-player-dynamics{border-color:rgba(103,185,255,.35);color:#9fd1ff} #view-career-core .career-squad-selection{max-width:780px;margin:0 auto 12px} #view-career-core .career-squad-bench{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:11px!important} #view-career-core .career-squad-bench-card{display:flex!important;position:relative;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:245px!important;padding:7px!important;text-align:center!important;border-left:1px solid var(--career-line)!important} #view-career-core .career-squad-bench-card img{width:105px!important;height:158px!important;object-fit:contain!important;filter:drop-shadow(0 6px 7px rgba(0,0,0,.45))} #view-career-core .career-squad-bench-card span{width:100%;display:grid;gap:2px} #view-career-core .career-squad-bench-card b{font-size:.52rem!important} #view-career-core .career-squad-bench-card small{font-size:.46rem!important;margin:0!important} #view-career-core .career-squad-bench-card i{display:block;color:#789085;font-size:.43rem;font-style:normal;line-height:1.3;white-space:normal} #view-career-core .career-squad-bench-card strong{position:absolute;right:6px;top:6px;padding:3px 5px;border-radius:5px;background:rgba(3,11,8,.9);font-size:.68rem!important} #view-career-core .career-squad-bench-card.form-hot{border-color:rgba(255,147,64,.25)!important} #view-career-core .career-squad-bench-card.form-cold{border-color:rgba(103,185,255,.22)!important} #view-career-core .career-roster-row i{display:block;margin-top:4px;color:#789085;font-size:.48rem;font-style:normal} #view-career-core .career-roster-row.form-hot i{color:#ffc080}#view-career-core .career-roster-row.form-cold i{color:#9fd1ff} /* Live tactical intervention */ #view-career-core .career-manager-decision{margin:14px 0;padding:16px;border:1px solid rgba(243,204,89,.34);border-left:4px solid var(--career-gold);border-radius:13px;background:linear-gradient(110deg,rgba(243,204,89,.10),rgba(8,20,15,.97) 42%);box-shadow:0 16px 35px rgba(0,0,0,.25);opacity:0;transform:translateY(-6px);transition:.18s ease} #view-career-core .career-manager-decision.show{opacity:1;transform:none} #view-career-core .career-manager-decision-head{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:13px} #view-career-core .career-manager-decision-head>span{display:grid;place-items:center;width:48px;height:48px;border-radius:11px;background:rgba(243,204,89,.13);font-size:1.45rem} #view-career-core .career-manager-decision-head small{color:var(--career-gold);font:900 .52rem/1 var(--display-font);letter-spacing:.12em} #view-career-core .career-manager-decision-head h3{margin:4px 0 3px;font-size:1rem;color:#f3f6f4} #view-career-core .career-manager-decision-head p{margin:0;color:#8fa499;font-size:.62rem} #view-career-core .career-manager-decision-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #view-career-core .career-manager-decision-grid button{display:grid;gap:5px;min-height:78px;padding:11px;border:1px solid var(--career-line);border-radius:9px;background:#081510;color:white;text-align:left;cursor:pointer;transition:.14s ease} #view-career-core .career-manager-decision-grid button:hover{transform:translateY(-2px);border-color:rgba(243,204,89,.52);background:rgba(243,204,89,.07)} #view-career-core .career-manager-decision-grid b{font-size:.58rem;letter-spacing:.04em}#view-career-core .career-manager-decision-grid small{color:#7e9489;font-size:.48rem;line-height:1.35} #view-career-core .career-feed-event.manager-decision{border-color:rgba(243,204,89,.28);background:rgba(243,204,89,.065)} #view-career-core .career-live-player i{display:block;margin-top:2px;color:#81978c;font-size:.43rem;font-style:normal}.career-live-player.form-hot i{color:#ffc080}.career-live-player.form-cold i{color:#9fd1ff} @media(max-width:1250px){ #view-career-core .career-squad-pitch{height:780px!important} #view-career-core .career-squad-slot{width:108px!important;height:164px!important;grid-template-rows:142px auto!important} #view-career-core .career-squad-slot img{width:98px!important;height:147px!important} #view-career-core .career-squad-bench{grid-template-columns:repeat(4,minmax(0,1fr))!important} #view-career-core .career-manager-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #view-career-core .career-dynamics-legend{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ #view-career-core .career-team-management-card{padding:17px!important} #view-career-core .career-squad-pitch{height:600px!important} #view-career-core .career-squad-slot{width:76px!important;height:116px!important;grid-template-rows:99px auto!important} #view-career-core .career-squad-slot img{width:70px!important;height:105px!important} #view-career-core .career-squad-slot>b{width:82px!important;font-size:.4rem!important} #view-career-core .career-player-dynamics{display:none} #view-career-core .career-squad-bench{grid-template-columns:repeat(2,minmax(0,1fr))!important} #view-career-core .career-dynamics-legend{grid-template-columns:1fr} #view-career-core .career-manager-decision-grid{grid-template-columns:1fr} } /* ========================================================= 0.5P · SIGNAL CLASH — MULTIVERSE RIVALS ========================================================= */ #view-signal-clash{--rivals-cyan:#58e7ff;--rivals-violet:#9b7bff;--rivals-pink:#ff4ea3;--rivals-gold:#ffd85b;--rivals-panel:rgba(8,16,31,.91);background:radial-gradient(circle at 18% 5%,rgba(88,231,255,.10),transparent 34%),radial-gradient(circle at 86% 18%,rgba(155,123,255,.10),transparent 36%)} .rivals-game-header h1 span{color:var(--rivals-cyan);font-size:.72em}.rivals-screen{display:none}.rivals-screen.active{display:block}.rivals-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);gap:24px;padding:30px;overflow:hidden;position:relative}.rivals-hero:after{content:'⚡';position:absolute;right:31%;top:-42px;font-size:180px;opacity:.035;transform:rotate(-12deg)}.rivals-hero-copy h2{font-size:clamp(28px,3vw,48px);max-width:900px;margin:6px 0 12px}.rivals-hero-copy>p{max-width:900px;color:var(--muted);font-size:16px;line-height:1.65}.rivals-rule-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.rivals-rule-strip span{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(88,231,255,.15);padding:10px 14px;border-radius:14px;font-size:12px;letter-spacing:.08em}.rivals-rule-strip b{font-size:18px;color:var(--rivals-cyan)}.rivals-profile-card{background:linear-gradient(150deg,rgba(88,231,255,.08),rgba(155,123,255,.06));border:1px solid rgba(88,231,255,.18);border-radius:22px;padding:22px}.rivals-record-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.rivals-record-grid span{padding:14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06)}.rivals-record-grid small{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em}.rivals-record-grid b{display:block;margin-top:4px;font-size:26px;color:white} .rivals-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.rivals-mode-card{position:relative;text-align:left;padding:24px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(12,22,40,.92),rgba(7,13,26,.94));color:white;cursor:pointer;transition:.18s ease;min-height:220px}.rivals-mode-card:hover{transform:translateY(-3px);border-color:rgba(88,231,255,.38)}.rivals-mode-card.selected{border-color:var(--rivals-cyan);box-shadow:0 0 0 1px rgba(88,231,255,.18),0 18px 45px rgba(0,0,0,.25);background:linear-gradient(145deg,rgba(25,48,72,.94),rgba(10,18,35,.97))}.rivals-mode-card>span{display:block;font-size:34px;margin-bottom:16px}.rivals-mode-card>small{color:var(--rivals-cyan);letter-spacing:.13em;font-weight:800}.rivals-mode-card h3{font-size:24px;margin:6px 0}.rivals-mode-card p{color:var(--muted);line-height:1.55}.rivals-mode-card>b{position:absolute;bottom:18px;right:18px;font-size:10px;letter-spacing:.12em;color:var(--rivals-gold)} .rivals-deck-builder,.rivals-card-library,.rivals-launch{margin-top:18px}.rivals-builder-heading{align-items:flex-end}.rivals-builder-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rivals-deck{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:18px}.rivals-deck-slot{position:relative;min-width:0;aspect-ratio:2/3;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);padding:0;color:white;cursor:pointer}.rivals-deck-slot img{width:100%;height:100%;object-fit:contain;display:block}.rivals-deck-slot>div{position:absolute;left:0;right:0;bottom:0;padding:24px 8px 9px;background:linear-gradient(transparent,rgba(2,7,15,.96));text-align:left}.rivals-deck-slot>div b,.rivals-deck-slot>div small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rivals-deck-slot>div b{font-size:11px}.rivals-deck-slot>div small{font-size:9px;color:#b7c4d7}.rivals-deck-number{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:9px;background:#07111f;border:1px solid rgba(88,231,255,.5);display:grid;place-items:center;font-size:10px;font-weight:900}.rivals-deck-slot.empty{display:grid;place-items:center;border-style:dashed;opacity:.6}.rivals-deck-slot.empty span{font-size:26px;color:#5a6b81}.rivals-deck-slot.empty b{font-size:10px;letter-spacing:.14em;color:#78879a}.rivals-world-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.rivals-world-links span{padding:7px 10px;border-radius:999px;background:rgba(155,123,255,.10);border:1px solid rgba(155,123,255,.25);font-size:11px}.rivals-world-links small{color:var(--muted)} .rivals-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) 220px 180px;gap:10px;margin:16px 0}.rivals-pool{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.rivals-pool-card{position:relative;padding:0 0 12px;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(5,12,24,.88);color:white;text-align:left;cursor:pointer;transition:.18s ease;min-width:0}.rivals-pool-card:hover{transform:translateY(-3px);border-color:rgba(88,231,255,.35)}.rivals-pool-card.selected{border-color:var(--rivals-cyan);box-shadow:inset 0 0 0 1px rgba(88,231,255,.15)}.rivals-pool-image{aspect-ratio:2/3;padding:5px;background:radial-gradient(circle,rgba(88,231,255,.06),transparent 70%)}.rivals-pool-image img{width:100%;height:100%;object-fit:contain}.rivals-pool-copy{padding:8px 9px 0}.rivals-pool-copy>span{font-size:9px;color:var(--rivals-cyan);font-weight:800;letter-spacing:.06em}.rivals-pool-copy h3{font-size:12px;margin:3px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rivals-pool-copy>small{font-size:9px;color:var(--muted)}.rivals-pool-card>i{display:block;margin:9px 9px 0;font-style:normal;font-size:9px;font-weight:900;color:var(--rivals-gold);letter-spacing:.08em}.rivals-mini-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:7px}.rivals-mini-stats span{text-align:center;font-size:7px;color:#8190a3}.rivals-mini-stats b{display:block;font-size:10px;color:white}.rivals-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}.rivals-pagination b{min-width:150px;text-align:center;font-size:12px;color:var(--muted)}.rivals-launch{display:grid;grid-template-columns:1fr minmax(300px,.55fr);gap:24px;align-items:center;padding:26px}.rivals-launch-controls{display:grid;grid-template-columns:1fr;gap:8px}.rivals-launch-controls .primary-button{margin-top:4px} .rivals-match-score{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;text-align:center;padding:18px 24px;margin-bottom:16px;background:linear-gradient(90deg,rgba(88,231,255,.08),rgba(6,13,26,.94) 35%,rgba(6,13,26,.94) 65%,rgba(255,78,163,.08))}.rivals-match-score>div:first-child{text-align:left}.rivals-match-score>.enemy{text-align:right}.rivals-match-score small{color:var(--muted);font-size:10px;letter-spacing:.13em}.rivals-match-score>div>b{font-size:44px}.rivals-match-score>div:first-child>b{color:var(--rivals-cyan)}.rivals-match-score>.enemy>b{color:var(--rivals-pink)}.rivals-match-center h2{margin:2px 0;font-size:22px}.rivals-match-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.rivals-challenge{display:grid;grid-template-columns:90px 1fr 180px;gap:18px;align-items:center;padding:20px 24px;background:linear-gradient(105deg,rgba(88,231,255,.10),rgba(12,20,36,.94) 48%,rgba(155,123,255,.08))}.rivals-challenge-icon{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:rgba(88,231,255,.10);border:1px solid rgba(88,231,255,.28);box-shadow:0 0 30px rgba(88,231,255,.08)}.rivals-challenge h2{font-size:28px;margin:2px 0}.rivals-challenge>div:nth-child(2)>b{display:inline-block;color:var(--rivals-gold);font-size:14px;letter-spacing:.12em;margin-bottom:4px}.rivals-challenge p:last-child{color:var(--muted);font-size:12px}.rivals-override{border:1px solid rgba(155,123,255,.28);background:rgba(155,123,255,.08);border-radius:16px;padding:12px;color:white;cursor:pointer;text-align:left}.rivals-override:disabled{opacity:.38;cursor:not-allowed}.rivals-override span{font-size:22px;float:left;margin-right:10px}.rivals-override b,.rivals-override small{display:block}.rivals-override b{font-size:10px}.rivals-override small{font-size:9px;color:#b9a7ff}.rivals-duel-stage{min-height:390px;margin-top:14px;display:grid;place-items:center;padding:20px}.rivals-awaiting{text-align:center;max-width:480px}.rivals-awaiting>span{font-size:56px}.rivals-awaiting h3{font-size:28px;margin:8px 0}.rivals-awaiting p{color:var(--muted);line-height:1.55}.rivals-reveal-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:15px}.rivals-reveal-card{position:relative;display:grid;grid-template-columns:minmax(150px,.8fr) 1fr;gap:12px;align-items:center;background:rgba(5,12,24,.72);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:12px}.rivals-reveal-card.player{border-color:rgba(88,231,255,.3)}.rivals-reveal-card.ai{border-color:rgba(255,78,163,.28)}.rivals-reveal-card img{width:100%;max-height:310px;object-fit:contain}.rivals-reveal-card span{font-size:10px;color:var(--muted)}.rivals-reveal-card h3{font-size:20px;margin:5px 0}.rivals-reveal-score{font-size:52px;font-weight:950;color:var(--rivals-cyan)}.rivals-reveal-card.ai .rivals-reveal-score{color:var(--rivals-pink)}.rivals-versus{text-align:center}.rivals-versus>b{font-size:34px}.rivals-versus span,.rivals-versus small{display:block;margin-top:8px;font-size:10px}.rivals-versus span{color:var(--rivals-gold);font-weight:900}.rivals-versus small{color:var(--muted)} .rivals-hand-heading{display:flex;justify-content:space-between;align-items:end;margin:20px 2px 10px}.rivals-hand-heading h2{margin:0}.rivals-hand-heading>div:last-child{text-align:right;font-size:10px;color:var(--muted)}.rivals-hand-heading>div:last-child b{display:block;font-size:18px;color:white}.rivals-player-hand{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.rivals-hand-card{position:relative;border:1px solid rgba(255,255,255,.08);background:rgba(5,12,24,.84);border-radius:13px;overflow:hidden;padding:4px 4px 9px;color:white;cursor:pointer;min-width:0;transition:.16s ease}.rivals-hand-card:hover:not(:disabled){transform:translateY(-5px);border-color:var(--rivals-cyan)}.rivals-hand-card.used{filter:grayscale(.9);opacity:.25}.rivals-hand-card img{width:100%;aspect-ratio:2/3;object-fit:contain}.rivals-hand-card>span{font-size:8px;color:var(--rivals-cyan)}.rivals-hand-card>b,.rivals-hand-card>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rivals-hand-card>b{font-size:9px}.rivals-hand-card>small{font-size:7px;color:var(--muted)}.rivals-next-round{width:100%;margin-top:12px}.rivals-side-column{display:grid;align-content:start;gap:14px}.rivals-session-panel{min-height:180px}.rivals-session-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:15px}.rivals-session-kpis span{background:rgba(255,255,255,.04);padding:10px;border-radius:12px;text-align:center}.rivals-session-kpis small{font-size:8px;color:var(--muted);display:block}.rivals-session-kpis b{display:block;margin-top:4px}.rivals-match-log{display:grid;gap:8px;margin-top:12px}.rivals-match-log>div{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}.rivals-match-log span{width:22px;height:22px;border-radius:8px;background:rgba(88,231,255,.08);display:grid;place-items:center;font-size:9px;color:var(--rivals-cyan)}.rivals-match-log p{font-size:10px;color:#b8c5d6;line-height:1.35}.rivals-bracket-mini{display:grid;gap:10px;margin-top:12px}.rivals-bracket-mini>div{padding:10px;border-radius:12px;background:rgba(255,255,255,.035)}.rivals-bracket-mini b{color:var(--rivals-gold);font-size:9px;letter-spacing:.12em}.rivals-bracket-mini span,.rivals-bracket-mini strong{display:block;font-size:9px;margin-top:4px;color:#bec9d7}.rivals-bracket-mini strong{color:var(--rivals-gold)} .rivals-result-card{max-width:900px;margin:35px auto;text-align:center;padding:34px}.rivals-result-reward{display:inline-flex;gap:16px;align-items:center;margin:18px 0;padding:12px 18px;border-radius:999px;background:rgba(255,216,91,.08);border:1px solid rgba(255,216,91,.2)}.rivals-result-reward span{font-size:9px;letter-spacing:.12em;color:var(--muted)}.rivals-result-reward b{color:var(--rivals-gold)}.rivals-result-session{text-align:left;max-width:700px;margin:16px auto 22px;padding:18px;border-radius:18px;background:rgba(0,0,0,.16)}.rivals-empty{grid-column:1/-1;text-align:center;padding:35px;color:var(--muted)} @media(max-width:1200px){.rivals-pool{grid-template-columns:repeat(4,minmax(0,1fr))}.rivals-deck{grid-template-columns:repeat(4,minmax(0,1fr))}.rivals-player-hand{grid-template-columns:repeat(4,minmax(0,1fr))}.rivals-match-layout{grid-template-columns:1fr}.rivals-side-column{grid-template-columns:1fr 1fr}.rivals-reveal-grid{grid-template-columns:1fr 80px 1fr}.rivals-reveal-card{grid-template-columns:1fr}.rivals-reveal-card img{max-height:250px}} @media(max-width:780px){.rivals-hero,.rivals-launch{grid-template-columns:1fr}.rivals-mode-grid{grid-template-columns:1fr}.rivals-filterbar{grid-template-columns:1fr}.rivals-pool{grid-template-columns:repeat(2,minmax(0,1fr))}.rivals-deck{grid-template-columns:repeat(2,minmax(0,1fr))}.rivals-match-score{grid-template-columns:1fr 1.5fr 1fr;padding:12px}.rivals-match-score>div>b{font-size:32px}.rivals-challenge{grid-template-columns:60px 1fr}.rivals-challenge-icon{width:52px;height:52px;font-size:24px}.rivals-override{grid-column:1/-1}.rivals-reveal-grid{grid-template-columns:1fr}.rivals-versus{padding:4px}.rivals-player-hand{grid-template-columns:repeat(2,minmax(0,1fr))}.rivals-side-column{grid-template-columns:1fr}.rivals-record-grid{grid-template-columns:1fr 1fr}} /* ====================================================================== BUILD 0.5Q · CAREER IMMERSION PATCH Emergency positions · scorer splash · interactive penalties · intl break ====================================================================== */ main:has(#view-career-core.active){width:min(1720px,calc(100% - 24px))} #view-career-core{padding-top:22px} #view-career-core .career-broadcast-bar-clean{ grid-template-columns:auto minmax(180px,1fr) auto auto;min-height:46px;margin:0 0 14px;padding:5px 8px 5px 6px; border:1px solid var(--career-line);border-radius:12px;background:rgba(7,17,14,.82);box-shadow:none; } #view-career-core .career-broadcast-back{ min-height:34px;padding:0 12px;border:1px solid var(--career-line);border-radius:8px;background:#0d1d17;color:#9fbaa9; font:900 .54rem/1 var(--display-font);letter-spacing:.08em;cursor:pointer; } #view-career-core .career-broadcast-back:hover{color:#effff5;border-color:rgba(88,216,137,.5);background:#13271e} #view-career-core .career-broadcast-bar-clean>span:nth-child(2){text-align:left;color:var(--career-text)} #view-career-core .career-broadcast-bar-clean>b{color:#789487;font-size:.51rem} #view-career-core .career-broadcast-bar-clean>span:last-child{text-align:right;color:#70877c} /* Mannschaft becomes the visual centrepiece. */ #career-season-dashboard:has(.career-team-management-card:not(.career-tab-hidden)){grid-template-columns:175px minmax(0,1fr);gap:18px} #view-career-core .career-team-management-card{padding:34px!important} #view-career-core .career-team-management-toolbar{grid-template-columns:minmax(260px,.4fr) auto minmax(420px,1fr)} #view-career-core .career-squad-pitch{ height:980px!important;max-width:1420px!important;border-width:2px!important; background:linear-gradient(rgba(4,70,38,.94),rgba(3,48,27,.98)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 11%,transparent 11% 22%)!important; } #view-career-core .career-squad-pitch::after{width:150px!important;height:150px!important} #view-career-core .career-squad-slot{width:144px!important;height:214px!important;grid-template-rows:188px auto!important} #view-career-core .career-squad-slot img{width:134px!important;height:201px!important} #view-career-core .career-squad-slot>b{bottom:-3px!important;width:148px!important;font-size:.58rem!important;padding:5px 6px!important} #view-career-core .career-squad-slot>span{font-size:.62rem!important;padding:4px 7px!important} #view-career-core .career-squad-slot>strong{font-size:.75rem!important;padding:4px 7px!important} #view-career-core .career-player-dynamics{bottom:24px!important;max-width:138px!important;font-size:.46rem!important;padding:4px 6px!important} #view-career-core .career-team-bench-panel{margin-top:22px!important;padding-top:18px!important} #view-career-core .career-squad-bench{grid-template-columns:repeat(7,minmax(145px,1fr))!important;gap:13px!important;overflow-x:auto;padding:4px 2px 10px} #view-career-core .career-squad-bench-card{min-width:145px;min-height:295px!important;padding:9px!important} #view-career-core .career-squad-bench-card img{width:126px!important;height:190px!important} #view-career-core .career-squad-bench-card b{font-size:.58rem!important} #view-career-core .career-squad-bench-card small{font-size:.49rem!important} #view-career-core .career-squad-bench-card i{font-size:.47rem!important} #view-career-core .career-squad-bench-card strong{font-size:.76rem!important} #view-career-core .career-squad-slot.emergency-off-position{filter:none} #view-career-core .career-squad-slot.emergency-off-position::after{ content:"⚠ NOTPOSITION";position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-7deg); padding:5px 8px;border:1px solid rgba(255,155,78,.8);border-radius:7px;background:rgba(58,20,3,.91);color:#ffc08c; font:1000 .48rem/1 var(--display-font);letter-spacing:.07em;box-shadow:0 5px 20px rgba(0,0,0,.5) } /* Goal scorer splash. */ .career-goal-celebration[hidden],.career-penalty-decision[hidden],.career-international-break[hidden]{display:none!important} .career-goal-celebration{position:fixed;inset:0;z-index:520;display:grid;place-items:center;pointer-events:none} .career-goal-celebration-backdrop{position:absolute;inset:0;background:radial-gradient(circle,rgba(88,216,137,.20),rgba(2,8,6,.58) 58%,rgba(1,5,4,.80));backdrop-filter:blur(5px)} .career-goal-celebration-card{ position:relative;z-index:2;width:min(760px,92vw);min-height:390px;display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;align-items:center;gap:24px; padding:28px 34px;border:1px solid rgba(111,255,164,.48);border-radius:24px;background:linear-gradient(125deg,#123d28,#08150f 68%); box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 70px rgba(88,216,137,.20);overflow:hidden;transform:scale(.86);opacity:0;transition:.18s ease; } .career-goal-celebration.show .career-goal-celebration-card{transform:scale(1);opacity:1} .career-goal-celebration-card::before{content:"";position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.055) 0 2deg,transparent 2deg 12deg);animation:careerGoalSpin 7s linear infinite} @keyframes careerGoalSpin{to{transform:rotate(360deg)}} .career-goal-celebration-card>*{position:relative;z-index:2} .career-goal-celebration-card img{width:100%;max-height:340px;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.58))} .career-goal-word{position:absolute!important;right:24px;top:18px;color:#8effb3;font:1000 clamp(2.4rem,6vw,5.7rem)/.8 var(--display-font);letter-spacing:-.06em;opacity:.16;transform:rotate(-7deg)} .career-goal-celebration-card small{display:block;color:#8effb3;font:900 .78rem/1 var(--display-font);letter-spacing:.14em} .career-goal-celebration-card h2{margin:7px 0 10px;font-size:clamp(2rem,4vw,4rem);line-height:.92;text-transform:uppercase} .career-goal-celebration-card p{margin:0;color:#a8c5b4;line-height:1.5} /* In-match penalty decision. */ .career-penalty-decision{position:fixed;inset:0;z-index:530;display:grid;place-items:center;padding:18px} .career-penalty-backdrop{position:absolute;inset:0;background:rgba(1,7,5,.83);backdrop-filter:blur(9px)} .career-penalty-card{position:relative;z-index:2;width:min(1040px,96vw);max-height:92vh;overflow:auto;padding:28px;border:1px solid rgba(243,204,89,.40);border-radius:22px;background:linear-gradient(145deg,#14271e,#07120e);box-shadow:0 30px 100px rgba(0,0,0,.7)} .career-penalty-head{display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:center;margin-bottom:18px} .career-penalty-head>span{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:rgba(243,204,89,.10);border:1px solid rgba(243,204,89,.26);font-size:2rem} .career-penalty-head h2{margin:0 0 4px}.career-penalty-head p{margin:0;color:var(--career-muted)} .career-penalty-takers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0} .career-penalty-taker{position:relative;min-width:0;padding:6px;border:1px solid var(--career-line);border-radius:13px;background:#091510;color:white;cursor:pointer;text-align:center} .career-penalty-taker:hover,.career-penalty-taker.selected{border-color:var(--career-gold);background:rgba(243,204,89,.07);box-shadow:0 0 0 2px rgba(243,204,89,.08)} .career-penalty-taker img{width:100%;height:150px;object-fit:contain}.career-penalty-taker b,.career-penalty-taker small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.career-penalty-taker b{font-size:.58rem}.career-penalty-taker small{margin-top:3px;color:#91aa9d;font-size:.49rem}.career-penalty-taker strong{position:absolute;right:7px;top:7px;padding:3px 5px;border-radius:6px;background:#07110d;color:var(--career-gold);font-size:.65rem} .career-penalty-directions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px} .career-penalty-directions button{min-height:76px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:#0b1913;color:white;cursor:pointer} .career-penalty-directions button:hover:not(:disabled){border-color:var(--career-gold);background:rgba(243,204,89,.07)} .career-penalty-directions button:disabled{opacity:.35;cursor:not-allowed}.career-penalty-directions span,.career-penalty-directions b{display:block}.career-penalty-directions span{font-size:1.5rem}.career-penalty-directions b{margin-top:5px;font-size:.63rem} .career-penalty-hint{display:block;margin-top:10px;color:#91aa9d;text-align:center;font-weight:800} .career-penalty-keeper{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;padding:12px;border:1px solid var(--career-line);border-radius:14px;background:#091510} .career-penalty-keeper img{width:120px;height:170px;object-fit:contain}.career-penalty-keeper h3{margin:0 0 5px}.career-penalty-keeper p{margin:0;color:#91aa9d} /* International break choice / spectator conference. */ .career-international-break{position:fixed;inset:0;z-index:510;display:grid;place-items:center;padding:18px} .career-international-backdrop{position:absolute;inset:0;background:rgba(2,8,15,.80);backdrop-filter:blur(9px)} .career-international-card{position:relative;z-index:2;width:min(900px,95vw);max-height:92vh;overflow:auto;padding:30px;border:1px solid rgba(100,207,231,.32);border-radius:24px;background:radial-gradient(circle at 20% 0,rgba(100,207,231,.12),transparent 38%),linear-gradient(145deg,#102129,#07120f);box-shadow:0 35px 110px rgba(0,0,0,.7)} .career-international-choice{text-align:center}.career-international-globe{display:block;font-size:4.5rem;margin-bottom:8px}.career-international-choice h2{font-size:clamp(2rem,4vw,3.6rem);margin-bottom:8px}.career-international-choice>p:not(.eyebrow){color:#9ab6ae} .career-international-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:20px 0;text-align:left} .career-international-preview>div{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.17);font-size:.64rem}.career-international-preview>div span:last-child{text-align:right}.career-international-preview b{color:#7ed8ec} .career-international-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.career-international-actions .primary-button,.career-international-actions .ghost-button{width:100%} .career-international-live-head{display:flex;justify-content:space-between;align-items:start;gap:15px}.career-international-scoreboard{margin:18px 0;padding:22px;border:1px solid rgba(100,207,231,.22);border-radius:16px;background:#08141a;text-align:center}.career-international-scoreboard>div{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}.career-international-scoreboard span{font-size:1.05rem;font-weight:900}.career-international-scoreboard span:last-child{text-align:right}.career-international-scoreboard span:first-child{text-align:left}.career-international-scoreboard b{font:1000 2.8rem/1 var(--display-font);color:white}.career-international-scoreboard small{display:block;margin-top:10px;color:#6bcbe0;font-size:.58rem;font-weight:900;letter-spacing:.12em} .career-international-feed{display:grid;gap:7px}.career-international-feed>div{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;padding:9px 11px;border-left:3px solid #64cfe7;background:rgba(100,207,231,.04)}.career-international-feed small{color:#78988e}.career-international-feed strong{color:#f3cc59} .career-calendar-event.international{border-left-color:#64cfe7!important}.career-calendar-event.international>i{color:#64cfe7!important} @media(max-width:1200px){ #career-season-dashboard:has(.career-team-management-card:not(.career-tab-hidden)){grid-template-columns:150px minmax(0,1fr)} #view-career-core .career-squad-pitch{height:820px!important} #view-career-core .career-squad-slot{width:118px!important;height:178px!important;grid-template-rows:154px auto!important} #view-career-core .career-squad-slot img{width:110px!important;height:165px!important} #view-career-core .career-squad-bench{grid-template-columns:repeat(4,minmax(145px,1fr))!important} .career-penalty-takers{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:780px){ main:has(#view-career-core.active){width:min(100% - 16px,1720px)} #view-career-core .career-broadcast-bar-clean{grid-template-columns:auto 1fr}.career-broadcast-bar-clean>b,.career-broadcast-bar-clean>span:last-child{display:none} #view-career-core .career-squad-pitch{height:610px!important} #view-career-core .career-squad-slot{width:82px!important;height:126px!important;grid-template-rows:107px auto!important} #view-career-core .career-squad-slot img{width:76px!important;height:114px!important} #view-career-core .career-squad-slot>b{width:88px!important;font-size:.4rem!important} #view-career-core .career-player-dynamics{display:none!important} #view-career-core .career-squad-bench{grid-template-columns:repeat(2,minmax(135px,1fr))!important} .career-goal-celebration-card{grid-template-columns:1fr;min-height:0;text-align:center}.career-goal-celebration-card img{height:240px} .career-penalty-takers{grid-template-columns:repeat(2,minmax(0,1fr))}.career-penalty-directions{grid-template-columns:1fr}.career-international-preview{grid-template-columns:1fr}.career-international-actions{grid-template-columns:1fr} } /* ========================================================= 0.5R · SEASON WORLD / TROPHY ROOM / SUMMER TOURNAMENT ========================================================= */ .career-summer-tournament[hidden],.career-goal-assist[hidden]{display:none!important} /* Goal splash 0.5R: longer in JS, larger visually, assist card beside scorer. */ .career-goal-celebration-card{ width:min(1120px,95vw)!important;min-height:520px!important; grid-template-columns:minmax(300px,.95fr) minmax(280px,1.05fr) minmax(170px,.46fr)!important; gap:30px!important;padding:34px 38px!important;border-radius:30px!important; } .career-goal-celebration-card .career-goal-scorer-card{max-height:470px!important;transform:scale(1.04)} .career-goal-copy h2{font-size:clamp(2.4rem,4.5vw,4.8rem)!important} .career-goal-assist{align-self:end;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(0,0,0,.28);box-shadow:0 18px 40px rgba(0,0,0,.3)} .career-goal-assist>span{grid-column:1/-1;color:#f3cc59;font:1000 .64rem/1 var(--display-font);letter-spacing:.16em} .career-goal-assist img{width:96px!important;height:138px!important;object-fit:contain!important;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))!important} .career-goal-assist b{display:block;font:1000 .82rem/1.05 var(--display-font);text-transform:uppercase} .career-goal-assist small{margin-top:6px;color:#a8c5b4!important;font-size:.54rem!important;letter-spacing:.08em!important} /* Archive: trophies + club records. */ .career-history-panel{display:grid;gap:22px} .career-archive-subhead{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)} .career-archive-subhead h3{margin:2px 0 0;font-size:1.2rem}.career-archive-subhead>small{color:#769383} .career-trophy-room{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px} .career-trophy-card{position:relative;min-height:145px;display:grid;place-items:center;text-align:center;padding:18px 12px;border:1px solid rgba(243,204,89,.24);border-radius:18px;background:radial-gradient(circle at 50% 25%,rgba(243,204,89,.15),transparent 55%),linear-gradient(145deg,rgba(15,42,31,.94),rgba(5,15,11,.98));overflow:hidden} .career-trophy-card>span{font-size:2.3rem;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}.career-trophy-card b{margin-top:7px;font:1000 .78rem/1.05 var(--display-font);text-transform:uppercase}.career-trophy-card small{margin-top:5px;color:#b7c9bd}.career-trophy-card em{position:absolute;right:9px;top:9px;padding:5px 7px;border-radius:999px;background:rgba(243,204,89,.12);color:#f3cc59;font-style:normal;font-size:.62rem;font-weight:900} .career-trophy-empty{grid-column:1/-1;padding:24px;border:1px dashed rgba(255,255,255,.12);border-radius:16px;color:#769383;text-align:center} .career-club-records{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .career-record-card{padding:14px 15px;border:1px solid rgba(96,235,153,.13);border-radius:15px;background:linear-gradient(145deg,rgba(12,31,24,.9),rgba(6,16,12,.92))}.career-record-card small{display:block;color:#739484;font:900 .59rem/1 var(--display-font);letter-spacing:.09em}.career-record-card b{display:block;margin-top:7px;font-size:1.05rem}.career-record-card span{display:block;margin-top:4px;color:#9db4a7;font-size:.72rem} .career-season-archive-block{margin-top:4px} /* Between-season EURO / World Cup spectator center. */ .career-summer-tournament{position:fixed;inset:0;z-index:610;display:grid;place-items:center;padding:20px} .career-summer-tournament-backdrop{position:absolute;inset:0;background:rgba(1,7,5,.88);backdrop-filter:blur(10px)} .career-summer-tournament-card{position:relative;z-index:2;width:min(1340px,97vw);max-height:94vh;overflow:auto;padding:30px;border:1px solid rgba(243,204,89,.30);border-radius:26px;background:radial-gradient(circle at 15% 0,rgba(33,157,92,.16),transparent 35%),linear-gradient(145deg,#0b2018,#050e0a 72%);box-shadow:0 35px 120px rgba(0,0,0,.72)} .career-summer-tournament-choice{text-align:center;padding:34px 18px}.career-summer-tournament-icon{display:block;font-size:4rem;margin-bottom:12px}.career-summer-tournament-choice h2{margin:5px 0 10px;font-size:clamp(2rem,5vw,4.6rem)}.career-summer-tournament-choice p{color:#9fb6a9}.career-summer-tournament-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:720px;margin:24px auto 0} .career-summer-tournament-head{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:20px}.career-summer-tournament-head h2{margin:3px 0}.career-summer-tournament-head p{margin:0;color:#8fa99a} .career-summer-groups{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;margin-bottom:20px}.career-summer-group{padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(0,0,0,.17)}.career-summer-group>header{display:flex;justify-content:space-between;margin-bottom:9px}.career-summer-group>header b{font:1000 .75rem/1 var(--display-font);letter-spacing:.08em}.career-summer-group-row{display:grid;grid-template-columns:1fr 25px 35px;gap:6px;align-items:center;padding:7px 5px;border-top:1px solid rgba(255,255,255,.05);font-size:.7rem}.career-summer-group-row strong{text-align:right;color:#f3cc59}.career-summer-group-row small{text-align:center;color:#789687} .career-summer-bracket{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:13px;margin:16px 0 20px}.career-summer-round{padding:13px;border:1px solid rgba(243,204,89,.12);border-radius:16px;background:rgba(0,0,0,.18)}.career-summer-round>header{margin-bottom:10px;color:#f3cc59;font:1000 .68rem/1 var(--display-font);letter-spacing:.08em}.career-summer-match{display:grid;grid-template-columns:1fr auto;gap:5px 9px;padding:8px;border-top:1px solid rgba(255,255,255,.05);font-size:.68rem}.career-summer-match span:nth-child(3){grid-column:1}.career-summer-match b{grid-row:1/3;grid-column:2;align-self:center}.career-summer-match.winner span.win{color:#8effb3;font-weight:900}.career-summer-champion{grid-column:1/-1;padding:24px;text-align:center;border:1px solid rgba(243,204,89,.28);border-radius:20px;background:radial-gradient(circle,rgba(243,204,89,.14),transparent 65%)}.career-summer-champion span{font-size:3.2rem}.career-summer-champion h3{margin:7px 0 0;font-size:1.8rem} @media(max-width:1050px){ .career-goal-celebration-card{grid-template-columns:minmax(230px,.9fr) 1.1fr!important}.career-goal-assist{grid-column:1/-1;justify-self:center;width:min(430px,100%)} .career-summer-groups{grid-template-columns:repeat(2,minmax(220px,1fr))}.career-summer-bracket{grid-template-columns:1fr}.career-club-records{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:650px){ .career-goal-celebration-card{grid-template-columns:1fr!important;min-height:0!important;max-height:94vh;overflow:auto}.career-goal-celebration-card .career-goal-scorer-card{height:300px!important}.career-goal-assist{grid-column:auto;width:100%} .career-summer-tournament-actions,.career-summer-groups{grid-template-columns:1fr}.career-club-records{grid-template-columns:1fr}.career-archive-subhead{align-items:start;flex-direction:column} } /* 0.5R · Supercup calendar identity */ .career-calendar-event.supercup{border-left-color:#f3cc59!important;background:linear-gradient(90deg,rgba(243,204,89,.085),rgba(7,19,14,.88))!important} .career-calendar-event.supercup>i{color:#f3cc59!important;filter:drop-shadow(0 0 10px rgba(243,204,89,.35))} .career-next-event.supercup i{color:#f3cc59} .career-summer-group-row.qualified{background:rgba(96,235,153,.055);border-left:2px solid rgba(96,235,153,.45)} /* ================================================================ 0.5S · PLAYER PROFILE / ACHIEVEMENTS / RING ECONOMY ================================================================ */ .profile-name-button{display:grid;gap:1px;min-width:112px;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(7,20,38,.7);color:#e9f6ff;text-align:left;cursor:pointer} .profile-name-button small{font-size:.48rem;letter-spacing:.14em;color:#6f91a3}.profile-name-button b{max-width:130px;overflow:hidden;text-overflow:ellipsis;font-size:.72rem;white-space:nowrap}.profile-name-button:hover{border-color:rgba(88,231,255,.38);background:rgba(13,39,65,.82)} .ring-economy-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:17px 0 22px;padding:20px 24px;background:linear-gradient(110deg,rgba(10,31,55,.9),rgba(37,27,5,.66));border-color:rgba(255,216,61,.22)} .ring-economy-icon{display:grid;place-items:center;width:54px;height:54px;border:4px solid #ffd83d;border-radius:50%;color:#ffd83d;font:900 1.3rem var(--display-font);box-shadow:0 0 22px rgba(255,216,61,.18)} .ring-economy-panel h2{margin:2px 0 4px;font-size:1.15rem}.ring-economy-panel p:last-child{margin:0;color:#9cb1bb;font-size:.78rem}.ring-economy-panel> b{padding:9px 12px;border-radius:999px;background:rgba(88,231,255,.08);color:#7ff0ff;font-size:.62rem;letter-spacing:.09em} .game-card.ring-locked{position:relative;opacity:.8;filter:saturate(.72)}.game-card.ring-locked:hover{opacity:1;filter:none}.game-ring-price{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:8px 10px;border-radius:11px;background:rgba(0,0,0,.28);color:#ffd83d}.game-ring-price .mini-ring{width:14px;height:14px}.game-ring-price b{font-size:.88rem}.game-ring-price small{grid-column:1/-1;font-size:.46rem;letter-spacing:.16em;color:#c9d4d9} .jukebox-ring-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-bottom:16px;padding:14px 18px}.jukebox-ring-panel>span{font-size:1.35rem}.jukebox-ring-panel div{display:grid;gap:2px}.jukebox-ring-panel b{font-size:.72rem;letter-spacing:.1em}.jukebox-ring-panel small{color:#8ca5b0}.jukebox-ring-panel i{font-style:normal;color:#ffd83d;font-size:.58rem;letter-spacing:.1em} .track-item.track-locked{opacity:.58;filter:saturate(.38)}.track-item.track-locked:hover{opacity:.95;filter:saturate(.9);border-color:rgba(255,216,61,.35)}.track-item.track-locked .track-badge{color:#ffd83d;border-color:rgba(255,216,61,.24);background:rgba(255,216,61,.07)} .achievement-filters{display:flex;gap:8px;overflow-x:auto;margin:-8px 0 20px;padding:10px}.achievement-filter{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(6,21,39,.7);color:#8ca7b4;cursor:pointer}.achievement-filter b{font-size:.58rem;letter-spacing:.08em}.achievement-filter small{font-size:.52rem;color:#617f8e}.achievement-filter.active{color:#eaffff;border-color:rgba(88,231,255,.4);background:rgba(88,231,255,.1)} .achievement-card{position:relative;overflow:hidden}.achievement-card-head{position:absolute;left:20px;right:20px;top:15px;display:flex;justify-content:space-between;gap:8px}.achievement-card-head span,.achievement-card-head small{font-size:.48rem;letter-spacing:.1em}.achievement-card-head small{color:#6e8793}.achievement-card .achievement-icon{margin-top:18px}.achievement-card.rarity-rare.unlocked{border-color:rgba(88,231,255,.42);background:linear-gradient(145deg,rgba(23,89,108,.32),rgba(10,29,56,.82))}.achievement-card.rarity-epic.unlocked{border-color:rgba(183,119,255,.5);background:linear-gradient(145deg,rgba(74,35,105,.38),rgba(10,29,56,.82))}.achievement-card.rarity-legendary.unlocked{border-color:rgba(255,188,62,.62);background:linear-gradient(145deg,rgba(111,66,12,.44),rgba(10,29,56,.84));box-shadow:0 0 26px rgba(255,173,51,.08)} .achievement-card.rarity-rare .achievement-card-head span{color:#58e7ff}.achievement-card.rarity-epic .achievement-card-head span{color:#c48cff}.achievement-card.rarity-legendary .achievement-card-head span{color:#ffbf4b} .profile-setup-modal,.ring-purchase-modal,.achievement-unlock-overlay{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:24px}.profile-setup-modal[hidden],.ring-purchase-modal[hidden],.achievement-unlock-overlay[hidden]{display:none!important}.profile-setup-backdrop,.ring-purchase-backdrop,.achievement-unlock-backdrop{position:absolute;inset:0;background:rgba(1,7,14,.88);backdrop-filter:blur(12px)} .profile-setup-card,.ring-purchase-card{position:relative;z-index:2;width:min(520px,94vw);padding:34px;border:1px solid rgba(88,231,255,.24);border-radius:24px;background:linear-gradient(160deg,#0a2038,#07111e 72%);box-shadow:0 30px 90px rgba(0,0,0,.55);text-align:center}.profile-setup-card h2,.ring-purchase-card h2{margin:7px 0 10px;font-size:1.55rem}.profile-setup-card>p,.ring-purchase-card>p{color:#8ea8b5;line-height:1.55}.profile-setup-card input{margin:15px 0 12px;text-align:center;font-size:1rem}.profile-setup-card input.invalid{border-color:#ff617b;box-shadow:0 0 0 2px rgba(255,97,123,.1)}.profile-setup-card>small{display:block;margin-top:12px;color:#5d7b8a}.profile-setup-icon,.ring-purchase-icon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 16px;border-radius:20px;background:rgba(88,231,255,.1);color:#58e7ff;font-size:2rem}.ring-purchase-icon{border:5px solid #ffd83d;border-radius:50%;background:transparent;color:#ffd83d}.profile-setup-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#d9eff6;font-size:1.2rem;cursor:pointer}.ring-purchase-card>b{display:block;margin:14px 0 18px;color:#ffd83d}.ring-purchase-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}.ring-purchase-actions button:disabled{opacity:.35;cursor:not-allowed} .achievement-unlock-overlay{z-index:1500;pointer-events:none;opacity:0;transition:opacity .22s ease}.achievement-unlock-overlay.show{opacity:1}.achievement-unlock-rays{position:absolute;width:650px;height:650px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(88,231,255,.14) 0 8deg,transparent 8deg 17deg);animation:achievement-rays 9s linear infinite}.achievement-unlock-card{position:relative;z-index:2;width:min(560px,92vw);padding:34px 36px;border:1px solid rgba(88,231,255,.4);border-radius:28px;background:linear-gradient(155deg,rgba(9,38,67,.97),rgba(3,12,24,.98));box-shadow:0 35px 110px rgba(0,0,0,.7),0 0 50px rgba(88,231,255,.12);text-align:center;transform:translateY(30px) scale(.92);transition:transform .38s cubic-bezier(.2,.9,.2,1.15)}.achievement-unlock-overlay.show .achievement-unlock-card{transform:translateY(0) scale(1)}.achievement-unlock-card i{display:grid;place-items:center;width:104px;height:104px;margin:18px auto;border-radius:30px;background:rgba(88,231,255,.1);color:#58e7ff;font:900 2.2rem var(--display-font);font-style:normal}.achievement-unlock-card h2{margin:0 0 8px;font-size:2rem}.achievement-unlock-card p{margin:0 auto 20px;max-width:430px;color:#a7bcc6;line-height:1.5}.achievement-unlock-card>b{font-size:.58rem;letter-spacing:.22em;color:#638493}.achievement-unlock-rarity{font-size:.62rem;letter-spacing:.18em;color:#58e7ff}.achievement-unlock-overlay.rarity-epic .achievement-unlock-card{border-color:rgba(190,121,255,.5);box-shadow:0 35px 110px rgba(0,0,0,.7),0 0 60px rgba(190,121,255,.18)}.achievement-unlock-overlay.rarity-epic .achievement-unlock-card i,.achievement-unlock-overlay.rarity-epic .achievement-unlock-rarity{color:#c487ff}.achievement-unlock-overlay.rarity-legendary .achievement-unlock-card{border-color:rgba(255,190,71,.65);box-shadow:0 35px 110px rgba(0,0,0,.7),0 0 75px rgba(255,174,50,.24)}.achievement-unlock-overlay.rarity-legendary .achievement-unlock-card i,.achievement-unlock-overlay.rarity-legendary .achievement-unlock-rarity{color:#ffc14f}.achievement-unlock-overlay.rarity-legendary .achievement-unlock-rays{background:repeating-conic-gradient(from 0deg,rgba(255,193,79,.16) 0 8deg,transparent 8deg 17deg)} @keyframes achievement-rays{to{transform:rotate(360deg)}} /* 0.5S: the match scoreboard from the user screenshot gets more visual weight. */ #view-career-core .career-scoreboard{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);min-height:180px} #view-career-core .career-score-team{min-height:180px;grid-template-columns:minmax(0,1fr) 112px;padding:28px 34px;gap:20px} #view-career-core .career-score-team.away{grid-template-columns:112px minmax(0,1fr)} #view-career-core .career-score-team small{font-size:1.08rem;line-height:1.2;letter-spacing:.03em} #view-career-core .career-score-team b{font-size:4.6rem} #view-career-core #career-match-player-name>.career-club-crest,#view-career-core #career-match-opponent-name>.career-club-crest{width:44px;height:44px;flex-basis:44px} #view-career-core #career-match-player-name,#view-career-core #career-match-opponent-name{gap:12px} @media(max-width:1050px){.profile-name-button{min-width:90px}.ring-economy-panel{grid-template-columns:auto 1fr}.ring-economy-panel>b{grid-column:2}.achievement-unlock-rays{width:520px;height:520px}#view-career-core .career-score-team small{font-size:.82rem}#view-career-core #career-match-player-name>.career-club-crest,#view-career-core #career-match-opponent-name>.career-club-crest{width:36px;height:36px;flex-basis:36px}} @media(max-width:720px){.profile-name-button{display:none}.ring-economy-panel,.jukebox-ring-panel{grid-template-columns:1fr;text-align:center}.ring-economy-icon{margin:auto}.ring-economy-panel>b{grid-column:auto}.ring-purchase-actions{grid-template-columns:1fr}.achievement-unlock-card{padding:28px 20px}.achievement-unlock-card h2{font-size:1.5rem}#view-career-core .career-scoreboard{grid-template-columns:1fr 94px 1fr}#view-career-core .career-score-team{grid-template-columns:1fr!important;min-height:132px;padding:14px}#view-career-core .career-score-team small{font-size:.62rem;text-align:center!important;order:0!important}#view-career-core .career-score-team b{font-size:3rem}#view-career-core #career-match-player-name>.career-club-crest,#view-career-core #career-match-opponent-name>.career-club-crest{width:28px;height:28px;flex-basis:28px}} /* ========================================================= 0.5T · PROFILE AVATARS / ACHIEVEMENT RINGS / CAREER POLISH ========================================================= */ .profile-name-button{grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:9px;min-width:160px} .profile-name-button>span{display:grid;gap:1px;min-width:0} .profile-avatar{width:42px;height:42px;border-radius:11px;object-fit:cover;object-position:center 30%;border:1px solid rgba(88,231,255,.25);background:#07111e;box-shadow:0 5px 16px rgba(0,0,0,.35)} .hub-profile-primary{grid-template-columns:54px 1fr auto!important;column-gap:12px!important;align-items:center!important} .hub-profile-avatar{grid-column:1;grid-row:1/3;width:50px;height:50px;border-radius:13px;object-fit:cover;object-position:center 30%;border:1px solid rgba(88,231,255,.22);background:#07111e} .hub-profile-primary span,.hub-profile-primary b{grid-column:2!important}.hub-profile-primary i{grid-column:3!important} .profile-setup-card{width:min(760px,95vw)!important;max-height:92vh;overflow:auto} .profile-avatar-picker-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:13px 0 8px;text-align:left} .profile-avatar-picker-head span{font:900 .58rem/1 var(--display-font);letter-spacing:.13em;color:#7da7b8}.profile-avatar-picker-head small{color:#68828f;font-size:.62rem} .profile-avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 14px} .profile-avatar-choice{min-width:0;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#071523;color:#dff6ff;cursor:pointer;overflow:hidden} .profile-avatar-choice img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;border-radius:8px;background:#030a12} .profile-avatar-choice span{display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 .48rem/1.1 var(--display-font)} .profile-avatar-choice:hover,.profile-avatar-choice.selected{border-color:#58e7ff;background:rgba(88,231,255,.09);box-shadow:0 0 0 2px rgba(88,231,255,.07)} .profile-avatar-choice.selected:after{content:'✓';position:absolute}.profile-avatar-choice{position:relative}.profile-avatar-choice.selected:after{right:8px;top:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#58e7ff;color:#04101a;font-weight:1000} .achievement-ring-reward{display:inline-flex;margin-top:13px;padding:6px 9px;border-radius:999px;border:1px solid rgba(255,216,61,.2);background:rgba(255,216,61,.07);color:#ffd83d;font:900 .58rem/1 var(--display-font);letter-spacing:.08em} .achievement-unlock-reward{display:inline-flex;margin:0 auto 18px;padding:9px 14px;border-radius:999px;background:rgba(255,216,61,.1);border:1px solid rgba(255,216,61,.28);color:#ffd83d;font:1000 .72rem/1 var(--display-font);letter-spacing:.1em} /* Restart stays visible in the season identity block instead of hiding below Matchplan. */ #view-career-core .career-season-clock{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;min-width:235px;text-align:left} #view-career-core .career-season-clock>small,#view-career-core .career-season-clock>b{grid-column:1} #view-career-core .career-season-reset-prominent{grid-column:2;grid-row:1/3;align-self:stretch;padding:7px 10px;border:1px solid rgba(255,105,105,.22);border-radius:9px;background:rgba(255,105,105,.055);color:#d88d8d;font:900 .52rem/1 var(--display-font);letter-spacing:.08em;cursor:pointer} #view-career-core .career-season-reset-prominent:hover{border-color:rgba(255,105,105,.52);background:rgba(255,105,105,.11);color:#ffb0b0} /* Transfer replacement list: show the important OVR before selling a card. */ #view-career-core .career-transfer-out{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;text-align:left!important} #view-career-core .career-transfer-out>span{display:grid;gap:3px;min-width:0}#view-career-core .career-transfer-out>span>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-career-core .career-transfer-out>strong{min-width:66px;padding:7px 8px;border-radius:8px;background:rgba(243,204,89,.08);color:var(--career-gold);font:1000 .68rem/1 var(--display-font);text-align:center} /* Match broadcast: bigger names, badges and score. */ #view-career-core .career-scoreboard{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr)!important;min-height:220px!important} #view-career-core .career-score-team{min-height:220px!important;grid-template-columns:minmax(0,1fr) 132px!important;padding:34px 42px!important;gap:26px!important} #view-career-core .career-score-team.away{grid-template-columns:132px minmax(0,1fr)!important} #view-career-core .career-score-team small{font-size:1.32rem!important;line-height:1.14!important;letter-spacing:.02em!important} #view-career-core .career-score-team b{font-size:5.5rem!important} #view-career-core #career-match-player-name>.career-club-crest,#view-career-core #career-match-opponent-name>.career-club-crest{width:62px!important;height:62px!important;flex-basis:62px!important} #view-career-core .career-score-center span{font-size:1.3rem} /* Goal splash gets another size bump; JS now keeps it visible ~5.35 s. */ .career-goal-celebration-card{width:min(1280px,96vw)!important;min-height:590px!important;grid-template-columns:minmax(350px,1fr) minmax(330px,1.05fr) minmax(205px,.48fr)!important;padding:40px 44px!important;gap:36px!important} .career-goal-celebration-card .career-goal-scorer-card{max-height:550px!important;transform:scale(1.07)!important} .career-goal-copy h2{font-size:clamp(2.8rem,5vw,5.4rem)!important}.career-goal-assist{grid-template-columns:112px 1fr!important;padding:17px!important}.career-goal-assist img{width:112px!important;height:160px!important}.career-goal-assist b{font-size:.94rem!important} @media(max-width:900px){ .profile-avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #view-career-core .career-season-clock{min-width:0} #view-career-core .career-scoreboard{grid-template-columns:1fr 115px 1fr!important;min-height:155px!important} #view-career-core .career-score-team{grid-template-columns:1fr!important;min-height:155px!important;padding:18px!important;gap:8px!important;text-align:center} #view-career-core .career-score-team small{font-size:.78rem!important;text-align:center!important;order:0!important} #view-career-core .career-score-team b{font-size:3.6rem!important} #view-career-core #career-match-player-name>.career-club-crest,#view-career-core #career-match-opponent-name>.career-club-crest{width:36px!important;height:36px!important;flex-basis:36px!important} .career-goal-celebration-card{grid-template-columns:1fr!important;min-height:0!important;max-height:94vh;overflow:auto;text-align:center}.career-goal-celebration-card .career-goal-scorer-card{height:340px!important}.career-goal-assist{width:100%;justify-self:stretch} } @media(max-width:620px){.profile-avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-profile-avatar{width:44px;height:44px}.hub-profile-primary{grid-template-columns:48px 1fr auto!important}} /* === 0.5U CAREER PERSONALITY / PROFILE / PRESENTATION === */ .career-save-slots{display:flex;gap:10px;align-items:stretch;margin:10px 0 14px;padding:10px 12px;background:linear-gradient(135deg,rgba(8,21,30,.96),rgba(10,34,28,.92));border-color:rgba(111,240,186,.2)} .career-save-slot{flex:1;min-width:0;border:1px solid rgba(255,255,255,.08);background:rgba(2,10,17,.7);border-radius:14px;padding:10px 12px;color:#d9edf0;text-align:left;cursor:pointer;transition:.18s ease;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.career-save-slot:hover{transform:translateY(-1px);border-color:rgba(91,239,183,.45)}.career-save-slot.active{border-color:#62efb8;box-shadow:0 0 0 1px rgba(98,239,184,.18),0 10px 28px rgba(0,0,0,.25)}.career-save-slot>span{font-size:12px;font-weight:900;letter-spacing:.12em;color:#62efb8}.career-save-slot b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.career-save-slot small{opacity:.65;font-size:11px}.career-save-slot i{font-style:normal;font-size:11px;color:#f2c969} .career-match-scouting{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.career-scout-chip{background:rgba(4,14,22,.72);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}.career-scout-chip small{display:block;font-size:10px;letter-spacing:.12em;opacity:.62}.career-scout-chip b{display:block;margin-top:4px;font-size:14px}.career-scout-chip.rival{border-color:rgba(255,95,95,.5);box-shadow:inset 0 0 24px rgba(160,20,20,.12)} .career-season-objectives{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.career-season-objective{border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(8,18,27,.86),rgba(6,28,23,.7));border-radius:12px;padding:10px 12px}.career-season-objective.done{border-color:rgba(242,201,105,.5);box-shadow:inset 0 0 22px rgba(242,201,105,.08)}.career-season-objective header{display:flex;justify-content:space-between;gap:8px;font-size:11px}.career-season-objective header b{color:#f2c969}.career-season-objective p{margin:5px 0 7px;font-size:12px}.career-season-objective progress{width:100%;height:5px;accent-color:#62efb8}.career-season-objective small{font-size:10px;opacity:.66} .career-animation-skip{position:absolute;right:16px;top:14px;z-index:8;border:1px solid rgba(255,255,255,.18);background:rgba(5,11,16,.72);color:#fff;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:900;letter-spacing:.1em;cursor:pointer}.career-animation-skip:hover{background:rgba(255,255,255,.12)} .career-cup-draw,.career-motm-show,.career-keeper-moment{position:fixed;inset:0;z-index:1300;display:grid;place-items:center}.career-cup-draw[hidden],.career-motm-show[hidden],.career-keeper-moment[hidden]{display:none}.career-cup-draw-backdrop,.career-motm-show-backdrop,.career-keeper-moment-backdrop{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(12,45,38,.62),rgba(2,5,9,.92));backdrop-filter:blur(8px)} .career-cup-draw-card,.career-motm-show-card,.career-keeper-moment-card{position:relative;z-index:2;width:min(720px,92vw);border:1px solid rgba(255,255,255,.15);border-radius:26px;background:linear-gradient(145deg,#101c25,#071019 58%,#132418);box-shadow:0 35px 100px rgba(0,0,0,.55);padding:34px;text-align:center;overflow:hidden}.career-cup-draw-card:before,.career-motm-show-card:before,.career-keeper-moment-card:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(98,239,184,.12),transparent,rgba(242,201,105,.09),transparent);animation:careerSpin 7s linear infinite;pointer-events:none}@keyframes careerSpin{to{transform:rotate(360deg)}} .career-cup-draw-icon{font-size:64px;display:block}.career-cup-draw-versus{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:22px 0}.career-cup-draw-versus>div{display:grid;place-items:center;gap:8px}.career-cup-draw-versus span{width:88px;height:88px;border-radius:18px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:26px;font-weight:900}.career-cup-draw-versus span img{max-width:72px;max-height:72px}.career-cup-draw-versus i{font-style:normal;font-size:30px;font-weight:1000;color:#f2c969}.career-cup-draw-versus b{font-size:18px} .career-motm-show-card{width:min(620px,92vw)}.career-motm-show-card>img{position:relative;z-index:2;display:block;width:min(300px,56vw);max-height:440px;object-fit:contain;margin:10px auto 4px;filter:drop-shadow(0 24px 28px rgba(0,0,0,.55))}.career-motm-show-card h2{position:relative;z-index:2;font-size:34px;margin:4px 0 12px}.career-motm-show-stats{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.career-motm-show-stats span{min-width:86px;background:rgba(255,255,255,.07);border-radius:10px;padding:8px}.career-motm-show-stats small{display:block;font-size:9px;opacity:.6}.career-motm-show-stats b{font-size:20px;color:#f2c969} .career-keeper-moment-card{width:min(560px,92vw)}.career-keeper-moment-card>span{position:relative;z-index:2;font-size:38px;font-weight:1000;color:#7ff4c1}.career-keeper-moment-card img{position:relative;z-index:2;width:min(270px,54vw);max-height:410px;object-fit:contain;display:block;margin:12px auto;filter:drop-shadow(0 24px 26px rgba(0,0,0,.5))}.career-keeper-moment-card h2,.career-keeper-moment-card p{position:relative;z-index:2} .career-score-team{position:relative}.career-score-venue{position:absolute;top:8px;left:10px;font-size:9px;letter-spacing:.12em;font-weight:1000;color:#62efb8}.career-score-team.away .career-score-venue{left:auto;right:10px;color:#f2c969}.career-match-score-crest{width:74px;height:74px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}.career-scoreboard{grid-template-columns:minmax(230px,1fr) minmax(170px,.62fr) minmax(230px,1fr)!important}.career-score-team small{font-size:17px!important}.career-score-team>b{font-size:56px!important}.career-score-center>#career-match-weather{color:#cfe9e0;font-size:11px;letter-spacing:.08em} .profile-page-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.profile-page-identity{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center}.profile-page-identity>img{width:110px;height:110px;border-radius:22px;object-fit:cover;border:2px solid rgba(98,239,184,.45)}.profile-page-identity h2{font-size:32px;margin:2px 0}.profile-page-identity strong{font-size:28px;color:#f2c969}.profile-favorite-card{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:center}.profile-favorite-card>img{width:190px;max-height:290px;object-fit:contain;justify-self:end;filter:drop-shadow(0 18px 20px rgba(0,0,0,.45))}.profile-career-slots{grid-column:1/-1}.profile-career-slots #profile-career-slot-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.profile-career-slot-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(3,13,20,.72);cursor:pointer}.profile-career-slot-card.active{border-color:#62efb8}.profile-career-slot-card b{display:block;font-size:16px}.profile-career-slot-card small{opacity:.62}.profile-achievement-summary{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px} .career-view[data-venue="home"] .career-season-next{box-shadow:inset 5px 0 0 rgba(98,239,184,.55)}.career-view[data-venue="away"] .career-season-next{box-shadow:inset 5px 0 0 rgba(242,201,105,.55)} @media(max-width:900px){.career-save-slots{overflow:auto}.career-save-slot{min-width:220px}.career-match-scouting,.career-season-objectives{grid-template-columns:1fr 1fr}.profile-page-grid{grid-template-columns:1fr}.profile-career-slots,.profile-achievement-summary{grid-column:auto}.profile-career-slots #profile-career-slot-list{grid-template-columns:1fr}.career-scoreboard{grid-template-columns:1fr 120px 1fr!important}.career-match-score-crest{width:54px;height:54px}.career-score-team small{font-size:12px!important}.career-score-team>b{font-size:40px!important}} @media(max-width:600px){.career-match-scouting,.career-season-objectives{grid-template-columns:1fr}.profile-page-identity{grid-template-columns:74px 1fr}.profile-page-identity>img{width:74px;height:74px}.profile-page-identity strong{grid-column:1/-1}.profile-favorite-card{grid-template-columns:1fr}.profile-favorite-card>img{justify-self:center}.career-cup-draw-card,.career-motm-show-card,.career-keeper-moment-card{padding:26px 18px}} /* ========================================================= 0.5V · BROADCAST ALIGNMENT / RELIABLE SKIP / MOTM VIEWPORT ========================================================= */ /* Presentation layers can ignore normal clicks, but the explicit skip control must never do so. */ .career-animation-skip{ pointer-events:auto!important; touch-action:manipulation; user-select:none; } .career-cup-alert-card .career-animation-skip, .career-special-alert-card .career-animation-skip, .career-goal-celebration-card .career-animation-skip, .achievement-unlock-card .career-animation-skip{ pointer-events:auto!important; } /* True TV-style three-block scoreboard: both clubs mirror each other around one fixed center. */ #view-career-core .career-scoreboard{ display:grid!important; grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr)!important; align-items:stretch!important; min-height:230px!important; overflow:hidden!important; } #view-career-core .career-score-team{ position:relative!important; min-height:230px!important; display:grid!important; align-items:center!important; padding:32px 38px!important; gap:24px!important; } #view-career-core .career-score-team.home{ grid-template-columns:minmax(0,1fr) 132px!important; background:linear-gradient(100deg,rgba(68,223,138,.12),transparent)!important; } #view-career-core .career-score-team.away{ grid-template-columns:132px minmax(0,1fr)!important; background:linear-gradient(260deg,rgba(242,201,105,.09),transparent)!important; } #view-career-core .career-score-club{ min-width:0; display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:20px; } #view-career-core .career-score-team.away .career-score-club{ grid-template-columns:minmax(0,1fr) 104px; } #view-career-core .career-score-team.away .career-score-club .career-match-score-crest{ grid-column:2; grid-row:1; } #view-career-core .career-score-team.away .career-score-club small{ grid-column:1; grid-row:1; text-align:right!important; } #view-career-core .career-match-score-crest{ width:96px!important; height:96px!important; margin:0!important; object-fit:contain!important; filter:drop-shadow(0 9px 14px rgba(0,0,0,.48))!important; } #view-career-core .career-score-club small{ min-width:0; display:block; color:#f1f8f4!important; font:1000 italic clamp(1.18rem,1.55vw,1.72rem)/1.03 var(--display-font)!important; letter-spacing:.015em!important; text-transform:uppercase!important; overflow-wrap:anywhere; } #view-career-core .career-score-team>b{ align-self:center!important; justify-self:center!important; margin:0!important; font-size:clamp(5rem,6vw,7rem)!important; line-height:.86!important; } #view-career-core .career-score-center{ min-width:0!important; display:grid!important; place-items:center!important; align-content:center!important; padding:20px 16px!important; border-left:1px solid rgba(255,255,255,.08)!important; border-right:1px solid rgba(255,255,255,.08)!important; background:#05131a!important; } #view-career-core .career-score-center span{ font-size:1.72rem!important; line-height:1!important; } #view-career-core .career-score-center b{ max-width:190px; margin-top:9px!important; font-size:.72rem!important; line-height:1.35!important; text-align:center!important; } #view-career-core .career-score-center small{ margin-top:7px!important; font-size:.62rem!important; } #view-career-core .career-score-venue{ top:10px!important; left:13px!important; font-size:10px!important; } #view-career-core .career-score-team.away .career-score-venue{ left:auto!important; right:13px!important; } /* MOTM is intentionally biased upward: it appears immediately in the current viewport after full time. */ .career-motm-show{ position:fixed!important; inset:0!important; z-index:2600!important; display:grid!important; place-items:start center!important; padding:clamp(20px,5vh,56px) 20px 20px!important; overflow:auto!important; } .career-motm-show[hidden]{display:none!important} .career-motm-show-card{ width:min(650px,92vw)!important; max-height:88vh!important; overflow:auto!important; margin:0!important; } .career-motm-show-card>img{ width:min(320px,53vw)!important; max-height:430px!important; } @media(max-width:1050px){ #view-career-core .career-scoreboard{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr)!important;min-height:190px!important} #view-career-core .career-score-team{min-height:190px!important;padding:24px 22px!important;gap:14px!important} #view-career-core .career-score-team.home{grid-template-columns:minmax(0,1fr) 92px!important} #view-career-core .career-score-team.away{grid-template-columns:92px minmax(0,1fr)!important} #view-career-core .career-score-club{grid-template-columns:68px minmax(0,1fr)!important;gap:12px!important} #view-career-core .career-score-team.away .career-score-club{grid-template-columns:minmax(0,1fr) 68px!important} #view-career-core .career-match-score-crest{width:64px!important;height:64px!important} #view-career-core .career-score-club small{font-size:.92rem!important} #view-career-core .career-score-team>b{font-size:4.3rem!important} } @media(max-width:720px){ #view-career-core .career-scoreboard{grid-template-columns:1fr 92px 1fr!important;min-height:150px!important} #view-career-core .career-score-team{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:58px auto!important;min-height:150px!important;padding:16px 10px 12px!important;gap:5px!important;text-align:center!important} #view-career-core .career-score-team.home .career-score-club, #view-career-core .career-score-team.away .career-score-club{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important;gap:3px!important} #view-career-core .career-score-team.away .career-score-club .career-match-score-crest, #view-career-core .career-score-team.away .career-score-club small{grid-column:1!important;grid-row:auto!important;text-align:center!important} #view-career-core .career-match-score-crest{width:42px!important;height:42px!important} #view-career-core .career-score-club small{font-size:.62rem!important;text-align:center!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%} #view-career-core .career-score-team>b{grid-column:1!important;grid-row:2!important;font-size:3.35rem!important} #view-career-core .career-score-center span{font-size:1.1rem!important} #view-career-core .career-score-center b{font-size:.48rem!important} #view-career-core .career-score-center small{font-size:.43rem!important} } /* ========================================================= 0.5W · LEGACY & PRESENTATION ========================================================= */ .hub-profile-primary .hub-profile-legacy{grid-column:2;grid-row:1/3;align-self:center;display:grid;gap:3px;justify-items:end;min-width:72px;font-style:normal} .hub-profile-primary .hub-profile-legacy strong{font:1000 .82rem/1 var(--display-font);color:#62efb8;letter-spacing:.08em} .hub-profile-primary .hub-profile-legacy small{font:900 .55rem/1 var(--display-font);color:#f2c969;opacity:.8} .hub-whats-new{margin-top:14px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;padding:18px 20px;border-color:rgba(98,239,184,.18);background:linear-gradient(120deg,rgba(11,47,39,.78),rgba(6,20,29,.82) 52%,rgba(39,30,13,.5))} .hub-whats-new-version{display:grid;align-content:center;gap:5px;padding-right:18px;border-right:1px solid rgba(255,255,255,.08)} .hub-whats-new-version small{font-size:.56rem;font-weight:1000;letter-spacing:.15em;color:#62efb8}.hub-whats-new-version b{font:1000 1.42rem/1 var(--display-font);color:white}.hub-whats-new-version span{font-size:.6rem;font-weight:900;letter-spacing:.1em;color:#f2c969} .hub-whats-new-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .hub-whats-new-list>span{display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)} .hub-whats-new-list i{grid-row:1/3;font-size:1.1rem;font-style:normal}.hub-whats-new-list b{font-size:.7rem}.hub-whats-new-list small{color:#78928d;font-size:.55rem} .profile-legacy-card,.profile-presentation-settings{grid-column:1/-1} .profile-legacy-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;overflow:hidden;position:relative;background:linear-gradient(120deg,rgba(13,45,38,.78),rgba(5,17,25,.84) 55%,rgba(59,43,14,.55))} .profile-legacy-card:after{content:"LEGACY";position:absolute;right:18px;bottom:-22px;font:1000 6rem/1 var(--display-font);color:rgba(255,255,255,.025);pointer-events:none} .profile-legacy-level{display:grid;grid-template-columns:90px 1fr;align-items:end;column-gap:12px}.profile-legacy-level small{grid-column:1/-1;color:#62efb8;font-size:.57rem;font-weight:1000;letter-spacing:.14em}.profile-legacy-level strong{font:1000 4.1rem/.88 var(--display-font);color:#fff}.profile-legacy-level b{align-self:end;padding-bottom:7px;color:#f2c969;font:900 .78rem/1.2 var(--display-font);letter-spacing:.08em} .profile-legacy-progress{display:grid;gap:8px;position:relative;z-index:1}.profile-legacy-progress>div{display:flex;justify-content:space-between;gap:12px}.profile-legacy-progress span{font:900 .85rem var(--display-font);color:white}.profile-legacy-progress small{color:#8ea7a0}.profile-legacy-progress progress{width:100%;height:12px;appearance:none}.profile-legacy-progress progress::-webkit-progress-bar{background:rgba(255,255,255,.07);border-radius:20px}.profile-legacy-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#62efb8,#f2c969);border-radius:20px}.profile-legacy-progress p{margin:0;color:#839b95;font-size:.67rem;line-height:1.5} .profile-page-identity{transition:border-color .3s ease,box-shadow .3s ease}.profile-page-identity.legacy-tier-silver{border-color:rgba(196,216,228,.38);box-shadow:inset 0 0 30px rgba(196,216,228,.05)}.profile-page-identity.legacy-tier-gold{border-color:rgba(242,201,105,.48);box-shadow:inset 0 0 38px rgba(242,201,105,.07)}.profile-page-identity.legacy-tier-emerald{border-color:rgba(98,239,184,.55);box-shadow:0 0 28px rgba(98,239,184,.08),inset 0 0 38px rgba(98,239,184,.06)}.profile-page-identity.legacy-tier-prism{border-color:rgba(187,130,255,.58);box-shadow:0 0 34px rgba(124,167,255,.12),inset 0 0 40px rgba(187,130,255,.08)}.profile-page-identity.legacy-tier-master{border-color:#f2c969;box-shadow:0 0 40px rgba(242,201,105,.16),inset 0 0 45px rgba(98,239,184,.06)} .profile-presentation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.profile-presentation-grid>label{min-height:78px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(2,13,19,.62);cursor:pointer}.profile-presentation-grid input[type="checkbox"]{width:20px;height:20px;accent-color:#62efb8;flex:0 0 auto}.profile-presentation-grid span{display:grid;gap:4px}.profile-presentation-grid b{font-size:.7rem}.profile-presentation-grid small{color:#7f9892;font-size:.56rem;line-height:1.35}.profile-presentation-duration{justify-content:space-between}.profile-presentation-duration .select-input{width:112px;min-width:112px} .career-result-primary-actions{gap:10px;flex-wrap:wrap}.career-match-poster-button{min-height:54px;padding-inline:22px;border-color:rgba(242,201,105,.28);color:#f2c969} .match-poster-modal{position:fixed;inset:0;z-index:1650;display:grid;place-items:center;padding:24px}.match-poster-modal[hidden]{display:none!important}.match-poster-backdrop{position:absolute;inset:0;background:rgba(1,7,12,.91);backdrop-filter:blur(14px)}.match-poster-card{position:relative;z-index:2;width:min(1000px,96vw);max-height:94vh;overflow:auto;padding:24px;border:1px solid rgba(98,239,184,.25);border-radius:24px;background:linear-gradient(145deg,#0b2020,#071019 58%,#171409);box-shadow:0 38px 120px rgba(0,0,0,.7);text-align:center}.match-poster-card h2{margin:4px 0 16px;font-size:2rem}.match-poster-preview{display:grid;place-items:center;min-height:260px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#020608}.match-poster-preview img{display:block;width:100%;height:auto;max-height:64vh;object-fit:contain;border-radius:10px}.match-poster-actions{display:flex;justify-content:center;gap:10px;margin:16px 0 10px}.match-poster-card>small{color:#76908a}.match-poster-card .profile-setup-close{z-index:3} @media(max-width:900px){.hub-whats-new{grid-template-columns:1fr}.hub-whats-new-version{padding-right:0;padding-bottom:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.profile-presentation-grid{grid-template-columns:1fr 1fr}.profile-legacy-card{grid-template-columns:1fr}.profile-legacy-level{grid-template-columns:82px 1fr}} @media(max-width:620px){.hub-whats-new-list,.profile-presentation-grid{grid-template-columns:1fr}.profile-legacy-progress>div{display:grid}.match-poster-actions{display:grid}.match-poster-card{padding:20px 14px}.hub-profile-primary .hub-profile-legacy{min-width:58px}.hub-profile-primary .hub-profile-legacy strong{font-size:.68rem}} /* ========================================================= 0.5Y · CARD COLLECTION 2.0 + CARD INSPECT / SHOWCASE ========================================================= */ #view-card-collection{--album-accent:#59e8ff;--album-gold:#f3cb5c;--album-deep:#04101f} .collection-album-hero{min-height:270px;background:radial-gradient(circle at 84% 34%,rgba(91,232,255,.16),transparent 26%),radial-gradient(circle at 72% 70%,rgba(243,203,92,.08),transparent 25%),linear-gradient(125deg,#0a326f,#07182f 62%,#040b16)} .collection-album-signal{width:210px;border-radius:26px;aspect-ratio:auto;min-height:170px;border-color:rgba(91,232,255,.36);background:radial-gradient(circle at 50% 24%,rgba(91,232,255,.18),transparent 38%),linear-gradient(145deg,rgba(12,49,100,.94),rgba(4,14,29,.98));box-shadow:0 22px 55px rgba(0,0,0,.36),inset 0 0 0 1px rgba(243,203,92,.1)} .collection-album-signal b{font-size:3.35rem}.collection-album-signal i{max-width:160px;text-align:center;line-height:1.35} .collection-album-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 14px;padding:0;overflow:hidden;border-color:rgba(91,232,255,.14);background:linear-gradient(90deg,rgba(12,38,75,.88),rgba(4,17,34,.94))} .collection-album-summary>div{min-height:88px;display:grid;align-content:center;gap:4px;padding:15px 18px;border-right:1px solid rgba(255,255,255,.065)} .collection-album-summary>div:last-child{border-right:0}.collection-album-summary small{color:#6f93b1;font-size:.51rem;font-weight:1000;letter-spacing:.13em}.collection-album-summary b{font:1000 1.35rem/1 var(--display-font);color:white}.collection-album-summary span{color:#89a4bb;font-size:.58rem;line-height:1.35}.collection-album-summary>div:nth-child(2) b,.collection-album-summary>div:nth-child(3) b{color:#f3d36d}.collection-album-summary>div:nth-child(4) b{color:#65e7ff} .collection-world-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px;margin:0 0 12px;border-color:rgba(255,255,255,.08);background:rgba(3,13,27,.78)} .collection-world-tab{min-width:0;min-height:78px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#dcecff;background:rgba(255,255,255,.025);cursor:pointer;text-align:left;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease} .collection-world-tab:hover{transform:translateY(-2px);border-color:rgba(91,232,255,.28);background:rgba(91,232,255,.05)}.collection-world-tab.active{border-color:rgba(91,232,255,.48);background:linear-gradient(145deg,rgba(33,116,183,.18),rgba(255,255,255,.025));box-shadow:inset 0 0 22px rgba(91,232,255,.055)} .collection-world-tab>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#0b274a;font-size:1.15rem}.collection-world-tab>div{min-width:0;display:grid;gap:3px}.collection-world-tab small{color:#6589a7;font-size:.46rem;font-weight:1000;letter-spacing:.12em}.collection-world-tab b{overflow:hidden;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.collection-world-tab i{height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}.collection-world-tab i em{display:block;height:100%;background:linear-gradient(90deg,#59e8ff,#f3cb5c)}.collection-world-tab>strong{position:relative;color:#f3d36d;font-size:.64rem;white-space:nowrap}.collection-world-tab>strong u{position:absolute;right:-5px;top:-14px;text-decoration:none;color:#69efb4;font-size:.64rem}.collection-world-tab.all-worlds>span{background:linear-gradient(145deg,#225fa8,#35256b)} .collection-world-tab.tone-red>span{background:linear-gradient(145deg,#c62b32,#5c0a10)}.collection-world-tab.tone-violet>span{background:linear-gradient(145deg,#695db7,#27365f)}.collection-world-tab.tone-gold>span{background:linear-gradient(145deg,#c59028,#56350a)} .collection-world-page{--world-page-accent:#59e8ff;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:26px;min-height:155px;margin:0 0 12px;padding:22px 24px;overflow:hidden;border-color:color-mix(in srgb,var(--world-page-accent),transparent 75%);background:radial-gradient(circle at 88% 36%,color-mix(in srgb,var(--world-page-accent),transparent 83%),transparent 28%),linear-gradient(120deg,#071a32,#040f1e)} .collection-world-page[data-universe="sonic"]{--world-page-accent:#4adfff}.collection-world-page[data-universe="cars"]{--world-page-accent:#ff555c}.collection-world-page[data-universe="zootopia"]{--world-page-accent:#9a91ff}.collection-world-page[data-universe="bundesliga"]{--world-page-accent:#f3cb5c} .collection-world-page:after{content:"";position:absolute;right:-60px;top:-110px;width:290px;height:290px;border:1px solid color-mix(in srgb,var(--world-page-accent),transparent 70%);border-radius:50%;opacity:.34}.collection-world-page>*{position:relative;z-index:1}.collection-world-page-copy h2{margin:3px 0 7px;font-size:clamp(1.35rem,2.6vw,2.25rem);font-style:italic;text-transform:uppercase}.collection-world-page-copy>p:not(.eyebrow){max-width:820px;margin:0;color:#91abc2;font-size:.7rem;line-height:1.55}.collection-set-complete-banner{display:inline-flex;margin-top:11px;padding:6px 10px;border:1px solid rgba(105,239,180,.28);border-radius:999px;color:#69efb4;background:rgba(105,239,180,.06);font-size:.52rem;font-weight:1000;letter-spacing:.1em} .collection-world-page-progress{justify-self:end;display:grid;justify-items:center;gap:5px;min-width:150px;padding-left:18px;border-left:1px solid rgba(255,255,255,.08)}.collection-world-page-progress strong{font:1000 2.65rem/.9 var(--display-font);color:var(--world-page-accent)}.collection-world-page-progress span{color:#f1d16b;font-size:.6rem;font-weight:950}.collection-world-page-progress button{margin-top:5px;padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#98b3c9;background:rgba(255,255,255,.035);cursor:pointer;font:900 .46rem var(--display-font);letter-spacing:.06em}.collection-world-page-progress button:hover{color:white;border-color:rgba(91,232,255,.32)} .collection-toolbar.collection-toolbar-2{grid-template-columns:minmax(220px,1.25fr) repeat(4,minmax(130px,.62fr)) auto;position:sticky;top:8px;z-index:24;margin-bottom:22px;box-shadow:0 12px 28px rgba(0,0,0,.18)} #view-card-collection .card-collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 20px} .collection-card-item{position:relative;min-width:0;padding:0 0 10px;border-radius:16px;transition:filter .16s ease}.collection-card-item.is-compare{filter:drop-shadow(0 0 12px rgba(91,232,255,.18))}.collection-card-item.is-favorite .collection-card-caption{border-color:rgba(255,94,132,.2)} .collection-card-item .collection-card-button{display:block;width:100%}.collection-card-badges{position:absolute;z-index:8;left:5px;top:7%;display:grid;justify-items:start;gap:5px;pointer-events:none}.collection-new-badge,.collection-signature-badge{display:inline-flex;padding:5px 7px;border-radius:6px;box-shadow:0 5px 15px rgba(0,0,0,.28);font:1000 .47rem/1 var(--display-font);letter-spacing:.08em}.collection-new-badge{color:#041526;background:#62eaff}.collection-signature-badge{color:#251800;background:#f2c95d} .collection-card-actions{position:absolute;z-index:10;right:-2px;top:8%;display:grid;gap:6px}.collection-card-action{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:white;background:rgba(3,13,28,.88);backdrop-filter:blur(8px);box-shadow:0 7px 17px rgba(0,0,0,.32);cursor:pointer;font-size:1rem;transition:transform .16s ease,border-color .16s ease,background .16s ease}.collection-card-action:hover{transform:scale(1.08);border-color:rgba(91,232,255,.55)}.collection-card-action.favorite.active{color:#ff7c9c;border-color:rgba(255,82,126,.42);background:rgba(69,12,29,.9)}.collection-card-action.compare.active{color:#59e8ff;border-color:rgba(91,232,255,.48);background:rgba(8,47,78,.92)} .collection-card-caption{min-height:55px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:5px 7px 0;padding:9px 10px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(3,14,28,.76)}.collection-card-caption>span{min-width:0;display:grid;gap:3px}.collection-card-caption b{overflow:hidden;font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.collection-card-caption small{overflow:hidden;color:#718fa8;font-size:.49rem;text-overflow:ellipsis;white-space:nowrap}.collection-card-caption>strong{color:#f0cf69;font:1000 .63rem var(--display-font);white-space:nowrap} .collection-compare-dock{position:sticky;z-index:80;bottom:12px;display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:16px;margin:24px auto 8px;padding:11px 13px;width:min(1050px,calc(100% - 20px));border-color:rgba(91,232,255,.28);background:rgba(3,14,27,.94);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.5)}.collection-compare-dock[hidden]{display:none}.collection-compare-dock-copy{display:grid;gap:3px}.collection-compare-dock-copy small{color:#59e8ff;font-size:.48rem;font-weight:1000;letter-spacing:.12em}.collection-compare-dock-copy b{font-size:.68rem}.collection-compare-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}.collection-compare-slots>span{position:relative;min-width:0;min-height:48px;display:grid;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:8px;padding:5px 7px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.035)}.collection-compare-slots img{width:30px;height:38px;object-fit:contain}.collection-compare-slots b{overflow:hidden;font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.collection-compare-slots button{width:25px;height:25px;border:0;border-radius:50%;color:#adc0d2;background:rgba(255,255,255,.06);cursor:pointer}.collection-compare-slots .empty{grid-template-columns:30px minmax(0,1fr);color:#708aa0}.collection-compare-slots .empty i{display:grid;place-items:center;width:26px;height:26px;border:1px dashed rgba(255,255,255,.16);border-radius:7px;font-style:normal}.collection-compare-launch{min-height:46px}.collection-compare-launch:disabled{opacity:.38;cursor:not-allowed} .collection-modal{z-index:2400;padding:16px;background:rgba(0,4,11,.91);backdrop-filter:blur(20px)} .collection-modal-panel.showcase-mode,.collection-modal-panel.compare-mode{width:min(1500px,98vw);max-height:96vh;padding:24px;border-radius:20px;border-color:rgba(91,232,255,.23);background:radial-gradient(circle at 82% 18%,rgba(91,232,255,.08),transparent 25%),#050f1e}.collection-modal-panel.showcase-mode .collection-modal-body,.collection-modal-panel.compare-mode .collection-modal-body{display:block}.collection-modal-close{position:fixed;right:max(24px,calc((100vw - min(1500px,98vw))/2 + 12px));top:24px;z-index:80} .collection-showcase{position:relative;display:grid;grid-template-columns:minmax(330px,480px) minmax(0,1fr);gap:28px;align-items:start}.collection-showcase-nav{position:absolute;z-index:12;left:0;top:0;display:flex;align-items:center;gap:7px}.collection-showcase-nav button{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:white;background:rgba(0,0,0,.25);cursor:pointer}.collection-showcase-nav span{color:#718da6;font:900 .52rem var(--display-font)} .collection-showcase-card-stage{position:sticky;top:0;display:grid;justify-items:center;gap:9px;padding:46px 18px 18px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:radial-gradient(circle at 50% 36%,rgba(91,232,255,.1),transparent 36%),linear-gradient(160deg,rgba(20,55,93,.42),rgba(2,10,20,.5))}.collection-showcase-card-stage .collection-modal-card{width:min(430px,100%)}.collection-showcase-card-label{width:100%;display:flex;justify-content:space-between;gap:10px;color:#7998b2;font-size:.5rem;font-weight:1000;letter-spacing:.09em}.collection-showcase-card-label span{color:#63e7ff}.collection-showcase-card-stage>small{color:#56758f;font-size:.44rem;letter-spacing:.08em;text-align:center} .collection-showcase-profile{display:grid;gap:12px;padding-right:2px}.collection-showcase-profile>header{padding:6px 50px 10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.collection-showcase-profile h2{margin:1px 0 4px;font-size:clamp(2.35rem,4.6vw,5rem);font-style:italic;line-height:.9;text-transform:uppercase}.collection-showcase-profile>header>p:not(.eyebrow){margin:0;color:#7f9bb4}.collection-showcase-actions{display:flex;flex-wrap:wrap;gap:8px}.collection-showcase-actions .secondary-button{min-height:40px;padding:0 12px;font-size:.57rem}.collection-showcase-actions .secondary-button.active{border-color:rgba(91,232,255,.38);color:#6ce8ff;background:rgba(91,232,255,.06)}.collection-showcase-actions .secondary-button:disabled{opacity:1;cursor:default;color:#f2ca61;border-color:rgba(242,202,97,.34)} .collection-showcase-identity{display:grid;grid-template-columns:100px 1fr 1.25fr 1fr;gap:7px}.collection-showcase-identity>span{display:grid;gap:4px;min-width:0;padding:11px 12px;border-left:3px solid #5be8ff;background:rgba(255,255,255,.032)}.collection-showcase-identity small,.collection-showcase-kpis small{color:#67849d;font-size:.46rem;font-weight:1000;letter-spacing:.1em}.collection-showcase-identity b{overflow:hidden;font-size:.73rem;text-overflow:ellipsis;white-space:nowrap} .collection-showcase-section{padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.022)}.collection-showcase-section-head{display:grid;grid-template-columns:35px 1fr;align-items:center;gap:10px;margin-bottom:12px}.collection-showcase-section-head>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(91,232,255,.22);border-radius:9px;color:#5be8ff;background:rgba(91,232,255,.045);font:1000 .58rem var(--display-font)}.collection-showcase-section-head>div{display:grid;gap:2px}.collection-showcase-section-head small{color:#6f8da5;font-size:.46rem;font-weight:1000;letter-spacing:.12em}.collection-showcase-section-head h3{margin:0;font-size:.93rem}.collection-showcase-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.collection-showcase-stat{display:grid;gap:6px;padding:9px;border-radius:9px;background:rgba(0,0,0,.16)}.collection-showcase-stat>span{display:flex;justify-content:space-between;gap:7px}.collection-showcase-stat b{color:#68e8ff;font-size:.55rem}.collection-showcase-stat strong{font:1000 .8rem var(--display-font)}.collection-showcase-stat i{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}.collection-showcase-stat i em{display:block;height:100%;background:linear-gradient(90deg,#54defd,#f2ca61)} .collection-showcase-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.collection-showcase-kpis.clash{grid-template-columns:repeat(4,minmax(0,1fr))}.collection-showcase-kpis>span{display:grid;gap:4px;padding:10px 11px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:rgba(0,0,0,.13)}.collection-showcase-kpis b{font:1000 1.05rem var(--display-font);color:#eef8ff}.collection-showcase-note{margin:9px 0 0;color:#668299;font-size:.52rem;line-height:1.45}.collection-showcase-section.trait{border-left:4px solid #f2ca61}.collection-showcase-section.trait>.collection-showcase-section-head{margin-bottom:8px}.collection-showcase-section.trait>p{margin:0;color:#96aec2;font-size:.65rem;line-height:1.55} .collection-card-achievements{display:grid;grid-template-columns:1fr 1fr;gap:7px}.collection-card-achievement{display:grid;grid-template-columns:36px 1fr 26px;align-items:start;gap:9px;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(0,0,0,.13)}.collection-card-achievement>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06)}.collection-card-achievement>div{min-width:0;display:grid;gap:2px}.collection-card-achievement small{color:#687f94;font-size:.43rem;font-weight:1000;letter-spacing:.08em}.collection-card-achievement b{font-size:.61rem}.collection-card-achievement p{margin:0;color:#7890a5;font-size:.51rem;line-height:1.35}.collection-card-achievement>strong{align-self:center;color:#61788c}.collection-card-achievement.unlocked{border-color:rgba(105,239,180,.2);background:rgba(105,239,180,.035)}.collection-card-achievement.unlocked small,.collection-card-achievement.unlocked>strong{color:#69efb4}.collection-card-achievement.signature{border-color:rgba(184,117,255,.18);background:linear-gradient(135deg,rgba(184,117,255,.055),rgba(0,0,0,.11))}.collection-card-achievement.signature>span{box-shadow:inset 0 0 0 1px rgba(184,117,255,.16)}.collection-card-achievement em{font-style:normal;color:#d7b7ff;font-size:.46rem;font-weight:900;letter-spacing:.04em;margin-top:3px}.collection-card-achievement.unlocked em{color:#8ef0c2}.collection-showcase-empty{min-height:80px;display:flex;align-items:center;gap:12px;color:#718ca3}.collection-showcase-empty>span{font-size:1.5rem}.collection-showcase-empty p{margin:0;font-size:.58rem} .collection-compare-showcase{display:grid;gap:20px;padding-top:14px}.collection-compare-showcase>header{text-align:center;padding:0 50px}.collection-compare-showcase>header h2{margin:4px 0;font-size:clamp(1.6rem,3.1vw,3rem);font-style:italic;text-transform:uppercase}.collection-compare-showcase>header h2 span{color:#5be8ff}.collection-compare-showcase>header>p:not(.eyebrow){margin:0;color:#7894aa}.collection-compare-main{display:grid;grid-template-columns:minmax(250px,340px) minmax(360px,1fr) minmax(250px,340px);align-items:start;gap:18px}.collection-compare-card{display:grid;justify-items:center;gap:5px;text-align:center}.collection-compare-card>div{width:min(330px,100%)}.collection-compare-card h3{margin:0;font-size:1rem;text-transform:uppercase}.collection-compare-card>span{color:#708aa1;font-size:.57rem}.collection-compare-table{display:grid;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.14)}.collection-compare-score{display:grid;grid-template-columns:54px 1fr auto 1fr 54px;align-items:center;gap:6px;margin-bottom:5px;padding:9px;border-radius:10px;background:linear-gradient(90deg,rgba(91,232,255,.07),rgba(242,202,97,.05))}.collection-compare-score strong{font:1000 1.7rem var(--display-font);text-align:center}.collection-compare-score span{color:#658198;font-size:.43rem;font-weight:1000;letter-spacing:.08em;text-align:center}.collection-compare-score b{color:#f2ca61;font-size:.56rem;text-align:center}.collection-compare-row{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;gap:5px;min-height:35px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.027)}.collection-compare-row>span{font:1000 .8rem var(--display-font);text-align:center}.collection-compare-row>span.winner{color:#69efb4}.collection-compare-row>b{color:#7894aa;font-size:.48rem;letter-spacing:.07em;text-align:center}.collection-compare-subhead{margin-top:4px;padding:7px 8px;border-top:1px solid rgba(255,255,255,.08);color:#5be8ff;font-size:.47rem;font-weight:1000;letter-spacing:.12em;text-align:center}.collection-compare-showcase>footer{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-top:4px}.collection-compare-showcase>footer .secondary-button,.collection-compare-showcase>footer .primary-button{min-height:42px} @media(max-width:1180px){ .collection-world-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} .collection-toolbar.collection-toolbar-2{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-search-field{grid-column:1/-1}.collection-count{justify-self:stretch} #view-card-collection .card-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .collection-showcase{grid-template-columns:minmax(300px,390px) minmax(0,1fr)}.collection-showcase-identity{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-showcase-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-showcase-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .collection-compare-main{grid-template-columns:minmax(210px,280px) minmax(320px,1fr) minmax(210px,280px)} } @media(max-width:860px){ .collection-album-summary{grid-template-columns:1fr 1fr}.collection-album-summary>div:nth-child(2){border-right:0}.collection-album-summary>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.06)} .collection-world-page{grid-template-columns:1fr}.collection-world-page-progress{justify-self:stretch;grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.07)}.collection-world-page-progress button{justify-self:end;margin-top:0} #view-card-collection .card-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .collection-compare-dock{grid-template-columns:1fr}.collection-compare-dock-copy{grid-template-columns:auto 1fr;align-items:center}.collection-compare-slots{grid-template-columns:1fr 1fr} .collection-showcase{grid-template-columns:1fr}.collection-showcase-card-stage{position:relative}.collection-showcase-card-stage .collection-modal-card{width:min(390px,80vw)}.collection-showcase-profile>header{text-align:center;padding-right:0}.collection-showcase-actions{justify-content:center} .collection-compare-main{grid-template-columns:1fr}.collection-compare-card>div{width:min(290px,72vw)}.collection-compare-table{order:3}.collection-compare-card:nth-child(3){order:2}.collection-compare-table{order:4} } @media(max-width:620px){ .collection-album-summary{grid-template-columns:1fr}.collection-album-summary>div{border-right:0;border-top:1px solid rgba(255,255,255,.06)}.collection-album-summary>div:first-child{border-top:0} .collection-world-tabs{grid-template-columns:1fr 1fr}.collection-world-tab{grid-template-columns:32px minmax(0,1fr) auto;min-height:68px}.collection-world-tab>span{width:31px;height:31px} .collection-toolbar.collection-toolbar-2{position:relative;top:auto;grid-template-columns:1fr}.collection-search-field{grid-column:auto} #view-card-collection .card-collection-grid{gap:14px 8px}.collection-card-caption{display:none}.collection-card-actions{right:-3px}.collection-card-action{width:30px;height:30px;font-size:.85rem}.collection-new-badge,.collection-signature-badge{font-size:.4rem;padding:4px 5px} .collection-compare-slots{grid-template-columns:1fr}.collection-compare-dock{bottom:6px;width:calc(100% - 8px)} .collection-modal{padding:6px}.collection-modal-panel.showcase-mode,.collection-modal-panel.compare-mode{width:100%;max-height:98vh;padding:49px 10px 14px;border-radius:15px}.collection-modal-close{position:absolute;right:9px;top:8px}.collection-showcase{gap:14px}.collection-showcase-nav{top:-41px}.collection-showcase-card-stage{padding:12px}.collection-showcase-card-label{font-size:.43rem}.collection-showcase-profile h2{font-size:2.25rem}.collection-showcase-identity{grid-template-columns:1fr 1fr}.collection-showcase-stats{grid-template-columns:1fr 1fr}.collection-showcase-kpis,.collection-showcase-kpis.clash{grid-template-columns:1fr 1fr}.collection-card-achievements{grid-template-columns:1fr}.collection-showcase-section{padding:12px} .collection-compare-showcase>header{padding:0}.collection-compare-row{grid-template-columns:1fr 100px 1fr}.collection-compare-score{grid-template-columns:42px 1fr auto 1fr 42px}.collection-compare-showcase>footer{display:grid}.collection-compare-showcase>footer>*{width:100%} } /* ========================================================================== */ /* BUILD 0.6A · RECONNECT STATION LIVE HUB + WORLD PORTALS */ /* ========================================================================== */ .reconnect-command-hero{ background: radial-gradient(circle at 74% 45%,rgba(91,232,255,.16),transparent 28%), radial-gradient(circle at 18% 78%,rgba(122,93,255,.18),transparent 34%), linear-gradient(135deg,#071b37 0%,#082a55 45%,#08152a 100%); } .reconnect-command-hero::after{opacity:.48} .reconnect-live-signal{border-color:rgba(107,239,255,.32)!important;box-shadow:0 0 34px rgba(56,216,255,.14)} .reconnect-network-strip [data-world="sao"]{--world-accent:#64dfff} .reconnect-network-strip{grid-template-columns:repeat(8,minmax(0,1fr))} .reconnect-section-heading{margin-top:34px;align-items:end} .reconnect-section-heading>div>p:last-child{margin:6px 0 0;color:#7891aa;font-size:.78rem} .reconnect-section-heading .status-tag.connected{border-color:rgba(91,235,171,.28);color:#73f1b1;background:rgba(30,102,74,.18)} .reconnect-live-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px;margin-top:14px} .reconnect-widget{position:relative;overflow:hidden;min-width:0;padding:18px;border-color:rgba(102,188,240,.13);background:linear-gradient(145deg,rgba(8,27,55,.92),rgba(4,15,31,.94));box-shadow:0 16px 45px rgba(0,0,0,.13)} .reconnect-widget::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 0,var(--widget-glow,rgba(72,205,255,.11)),transparent 36%)} .reconnect-widget>*{position:relative;z-index:1} .reconnect-career-widget{grid-column:span 5;--widget-glow:rgba(76,229,139,.17);border-color:rgba(91,229,146,.17)} .reconnect-favorite-widget{grid-column:span 3;--widget-glow:rgba(255,105,198,.18);border-color:rgba(255,114,202,.17)} .reconnect-last-match{grid-column:span 4;--widget-glow:rgba(83,195,255,.17)} .reconnect-legacy-widget{grid-column:span 3;--widget-glow:rgba(183,131,255,.18);border-color:rgba(172,124,255,.16)} .reconnect-rings-widget{grid-column:span 3;--widget-glow:rgba(255,210,69,.19);border-color:rgba(255,210,69,.17)} .reconnect-daily-widget{grid-column:span 6;--widget-glow:rgba(98,239,184,.16);border-color:rgba(91,239,185,.17)} .reconnect-achievement-widget{grid-column:span 6;--widget-glow:rgba(255,190,73,.15);border-color:rgba(255,189,72,.16)} .reconnect-news-widget{grid-column:span 6;--widget-glow:rgba(92,144,255,.17);border-color:rgba(104,145,255,.17)} .reconnect-widget-head{display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;margin-bottom:13px} .reconnect-widget-head>span{font-size:1rem} .reconnect-widget-head small{font-size:.56rem;font-weight:1000;letter-spacing:.13em;color:#819bb5} .reconnect-widget-head i{padding:4px 7px;border:1px solid rgba(255,255,255,.09);border-radius:999px;color:#7edcff;background:rgba(255,255,255,.025);font-size:.49rem;font-weight:1000;letter-spacing:.11em;font-style:normal} .reconnect-widget h3{margin:0;color:white;font:1000 1.05rem/1.08 var(--display-font);text-transform:uppercase;font-style:italic} .reconnect-widget p{margin:5px 0 0;color:#7891a8;font-size:.67rem;line-height:1.45} .reconnect-widget-action{margin-top:14px;padding:0;border:0;background:none;color:#68dbff;font-size:.58rem;font-weight:1000;letter-spacing:.12em;cursor:pointer;text-align:left} .reconnect-widget-action:hover{color:white} .reconnect-career-main{display:grid;grid-template-columns:68px 1fr;gap:13px;align-items:center;min-height:82px} .reconnect-career-crest{width:68px;height:68px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(114,233,166,.25);border-radius:18px 4px 18px 4px;background:linear-gradient(145deg,#123c31,#071d23);box-shadow:inset 0 0 24px rgba(95,240,163,.09)} .reconnect-career-crest img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.25))} .reconnect-career-crest b{color:#76edb0;font:1000 1.2rem var(--display-font);font-style:italic} .reconnect-favorite-main{display:grid;grid-template-columns:86px 1fr;gap:13px;align-items:center;width:100%;min-height:128px;padding:0;border:0;color:white;background:none;cursor:pointer;text-align:left} .reconnect-favorite-main img{width:86px;height:118px;object-fit:contain;filter:drop-shadow(0 13px 13px rgba(0,0,0,.28));transition:.18s ease} .reconnect-favorite-main:hover img{transform:translateY(-4px) rotate(-1deg) scale(1.025)} .reconnect-favorite-main span{display:grid;gap:4px}.reconnect-favorite-main b{font:1000 1rem var(--display-font);text-transform:uppercase;font-style:italic}.reconnect-favorite-main small{color:#8da4ba;font-size:.58rem}.reconnect-favorite-main em{margin-top:7px;color:#ff77c9;font-size:.53rem;font-weight:1000;letter-spacing:.1em;font-style:normal} .reconnect-scoreline{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;min-height:76px;padding:12px;border:1px solid rgba(94,198,255,.1);border-radius:12px;background:rgba(2,12,28,.52)} .reconnect-scoreline strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9cb4c9;font-size:.66rem;letter-spacing:.07em}.reconnect-scoreline strong:last-child{text-align:right} .reconnect-scoreline b{color:white;font:1000 1.55rem var(--display-font);font-style:italic} #hub-last-match-outcome[data-outcome="win"]{color:#71efad;border-color:rgba(113,239,173,.22)} #hub-last-match-outcome[data-outcome="loss"]{color:#ff6f83;border-color:rgba(255,111,131,.22)} #hub-last-match-outcome[data-outcome="draw"]{color:#ffd66a;border-color:rgba(255,214,106,.22)} .reconnect-legacy-main{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;min-height:78px} .reconnect-legacy-main>strong{display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(180,131,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(180,131,255,.16),rgba(25,15,60,.58));color:#c49cff;font:1000 1.7rem var(--display-font);font-style:italic} .reconnect-legacy-main span{display:grid;gap:4px}.reconnect-legacy-main b{font-size:.68rem;letter-spacing:.06em}.reconnect-legacy-main small{color:#7f91aa;font-size:.56rem} .reconnect-progress{height:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.055)}.reconnect-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7359ff,#cf8cff,#5ee7ff);box-shadow:0 0 14px rgba(163,119,255,.5)} .reconnect-ring-total{display:flex;align-items:center;gap:13px;min-height:78px}.reconnect-ring-total .mini-ring{width:42px;height:42px;border-width:6px;filter:drop-shadow(0 0 10px rgba(255,203,63,.25))}.reconnect-ring-total strong{color:#ffd85e;font:1000 2rem var(--display-font);font-style:italic} .reconnect-daily-widget h3{font-size:1.12rem}.reconnect-daily-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:17px}.reconnect-daily-progress>div{height:8px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.06)}.reconnect-daily-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4bdc94,#70f5d4,#58dfff);box-shadow:0 0 14px rgba(87,239,194,.35)}.reconnect-daily-progress>b{color:#b9d4cc;font-size:.6rem}.reconnect-daily-actions{display:flex;gap:12px;align-items:center}.daily-claim-button{margin-top:13px;padding:8px 12px;border:1px solid rgba(255,216,83,.28);border-radius:9px;color:#ffe273;background:rgba(105,79,13,.27);font-size:.57rem;font-weight:1000;letter-spacing:.09em;cursor:pointer}.daily-claim-button:hover{background:rgba(139,105,18,.4);color:white} .reconnect-achievement-main{display:grid;grid-template-columns:64px 1fr;gap:13px;align-items:center;min-height:94px}.reconnect-achievement-main>span{display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(255,197,78,.22);border-radius:15px;background:radial-gradient(circle,rgba(255,205,89,.16),rgba(75,47,10,.2));font-size:1.45rem}.reconnect-achievement-main div{display:grid;gap:4px}.reconnect-achievement-main h3{font-size:.95rem}.reconnect-achievement-main p{margin:0}.reconnect-achievement-main small{margin-top:3px;color:#806f53;font-size:.5rem;font-weight:900;letter-spacing:.08em} .reconnect-news-list{display:grid;gap:9px}.reconnect-news-list>span{display:grid;gap:3px;padding:11px;border:1px solid rgba(110,154,255,.09);border-radius:10px;background:rgba(255,255,255,.025)}.reconnect-news-list b{font-size:.65rem;color:#a7c0ff}.reconnect-news-list small{color:#71849f;font-size:.57rem;line-height:1.4} .portal-heading{margin-top:42px}.core-destinations-heading{margin-top:44px}.reconnect-core-gates{margin-top:13px}.reconnect-micro-stats{margin-top:13px} .hub-world-portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:15px} .hub-world-portal{--portal:#5ce6ff;--portal2:#2859ff;--portal-bg:#09244a;position:relative;min-height:290px;display:grid;grid-template-rows:auto 1fr auto auto auto;align-items:start;gap:11px;padding:21px;overflow:hidden;border:1px solid color-mix(in srgb,var(--portal),transparent 77%);border-radius:22px 4px 22px 4px;color:white;background:linear-gradient(145deg,var(--portal-bg),#050f20 72%);cursor:pointer;text-align:left;isolation:isolate;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .hub-world-portal::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--portal),transparent 70%),transparent 31%),radial-gradient(circle at 0 100%,color-mix(in srgb,var(--portal2),transparent 80%),transparent 42%)} .hub-world-portal::after{content:"";position:absolute;z-index:-1;width:250px;height:250px;right:-106px;top:-88px;border:20px solid var(--portal);border-radius:50%;opacity:.12;box-shadow:0 0 0 17px color-mix(in srgb,var(--portal2),transparent 90%),0 0 46px color-mix(in srgb,var(--portal),transparent 76%)} .hub-world-portal:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--portal),white 18%);box-shadow:0 24px 65px rgba(0,0,0,.34),0 0 34px color-mix(in srgb,var(--portal),transparent 88%)} .portal-sonic{--portal:#63e9ff;--portal2:#3264ff;--portal-bg:#07376c}.portal-cars{--portal:#ff4d5a;--portal2:#ffb13d;--portal-bg:#4a1218}.portal-zootopia{--portal:#8ea4ff;--portal2:#5be5d0;--portal-bg:#242d67}.portal-souls{--portal:#ff7a35;--portal2:#d6aa58;--portal-bg:#2f170f}.portal-sao{--portal:#68dfff;--portal2:#b7f2ff;--portal-bg:#123a52}.portal-spongebob{--portal:#ffe45b;--portal2:#55e0e8;--portal-bg:#3a4820} .portal-energy-ring{position:absolute;width:132px;height:132px;right:18px;top:22px;border:1px dashed color-mix(in srgb,var(--portal),transparent 38%);border-radius:50%;opacity:.35;animation:portal-spin 18s linear infinite}.portal-energy-ring::before,.portal-energy-ring::after{content:"";position:absolute;inset:15px;border:2px solid color-mix(in srgb,var(--portal2),transparent 65%);border-radius:50%}.portal-energy-ring::after{inset:34px;border-style:dotted} @keyframes portal-spin{to{transform:rotate(360deg)}} .portal-glyph{position:absolute;right:56px;top:63px;font-size:2.7rem;filter:drop-shadow(0 0 15px color-mix(in srgb,var(--portal),transparent 45%))}.portal-number{color:color-mix(in srgb,var(--portal),white 18%);font-size:.53rem;font-weight:1000;letter-spacing:.15em}.portal-copy{display:grid;align-content:end;min-height:112px;max-width:72%}.portal-copy b{font:1000 clamp(1.45rem,2.4vw,2.35rem)/.95 var(--display-font);text-transform:uppercase;font-style:italic;letter-spacing:-.03em}.portal-copy small{margin-top:8px;color:#99adbe;font-size:.61rem;line-height:1.4}.portal-progress{height:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.06)}.portal-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--portal2),var(--portal));box-shadow:0 0 13px color-mix(in srgb,var(--portal),transparent 45%)}.portal-meta{display:flex;flex-wrap:wrap;gap:6px}.portal-meta em{padding:5px 7px;border:1px solid rgba(255,255,255,.065);border-radius:7px;color:#8ca0b3;background:rgba(255,255,255,.025);font-size:.5rem;font-weight:900;font-style:normal;letter-spacing:.07em}.hub-world-portal>strong{color:var(--portal);font-size:.58rem;letter-spacing:.11em} /* Dynamic world portal page */ .world-portal-view{min-height:100vh}.world-portal-header{position:relative;overflow:hidden}.world-portal-header::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background:linear-gradient(90deg,var(--portal-page,#58e7ff),transparent 58%)} body[data-portal-world="sonic"]{--portal-page:#5be9ff;--portal-page-2:#315cff} body[data-portal-world="cars"]{--portal-page:#ff4c5a;--portal-page-2:#ffad37} body[data-portal-world="zootopia"]{--portal-page:#8ea3ff;--portal-page-2:#55e1cf} body[data-portal-world="souls"]{--portal-page:#ff7938;--portal-page-2:#d4a855} body[data-portal-world="sao"]{--portal-page:#6bdfff;--portal-page-2:#d4f8ff} body[data-portal-world="spongebob"]{--portal-page:#ffe45c;--portal-page-2:#54dce7} body[data-world-theme="portal"] .app-shell{background-image:radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--portal-page),transparent 91%),transparent 31%),linear-gradient(#061426,#061426)} .world-portal-status{border-color:color-mix(in srgb,var(--portal-page),transparent 70%)!important;color:var(--portal-page)!important;background:color-mix(in srgb,var(--portal-page),transparent 93%)!important} .world-portal-content{display:grid;gap:16px;padding-bottom:20px} .world-portal-hero{--portal:#5ce6ff;--portal2:#315bff;position:relative;min-height:430px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:28px;align-items:center;padding:34px;overflow:hidden;border:1px solid color-mix(in srgb,var(--portal),transparent 72%);border-radius:24px 5px 24px 5px;background:linear-gradient(135deg,color-mix(in srgb,var(--portal2),#07172e 72%),#061326 62%,#050c18);box-shadow:0 26px 70px rgba(0,0,0,.25)} .world-portal-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 48%,color-mix(in srgb,var(--portal),transparent 76%),transparent 27%),linear-gradient(115deg,transparent 45%,color-mix(in srgb,var(--portal),transparent 96%));pointer-events:none}.world-portal-hero::after{content:"";position:absolute;width:430px;height:430px;right:-145px;top:-120px;border:34px solid var(--portal);border-radius:50%;opacity:.07;pointer-events:none} .world-portal-hero.portal-sonic{--portal:#63e9ff;--portal2:#3264ff}.world-portal-hero.portal-cars{--portal:#ff4d5a;--portal2:#ff9f2e}.world-portal-hero.portal-zootopia{--portal:#8ea4ff;--portal2:#4fcdbd}.world-portal-hero.portal-souls{--portal:#ff7a35;--portal2:#9a421f}.world-portal-hero.portal-sao{--portal:#68dfff;--portal2:#277c9d}.world-portal-hero.portal-spongebob{--portal:#ffe45b;--portal2:#2baeb9} .world-portal-hero-copy,.world-portal-hero-visual{position:relative;z-index:1}.world-portal-hero-copy h2{margin:7px 0 12px;font:1000 clamp(2.6rem,7vw,5.5rem)/.85 var(--display-font);text-transform:uppercase;font-style:italic;letter-spacing:-.05em;text-shadow:0 0 34px color-mix(in srgb,var(--portal),transparent 72%)}.world-portal-hero-copy>p:not(.eyebrow){max-width:650px;margin:0;color:#a0b4c8;font-size:.9rem;line-height:1.55}.world-portal-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:26px}.world-portal-hero-stats>span{display:grid;gap:4px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(0,0,0,.15)}.world-portal-hero-stats small{color:#718aa2;font-size:.49rem;font-weight:900;letter-spacing:.08em}.world-portal-hero-stats b{color:var(--portal);font:1000 1.1rem var(--display-font)}.world-portal-hero-actions{display:flex;gap:9px;margin-top:20px} .world-portal-hero-visual{min-height:335px;display:grid;place-items:center}.world-portal-orbit{position:absolute;width:300px;height:300px;border:1px dashed color-mix(in srgb,var(--portal),transparent 55%);border-radius:50%;animation:portal-spin 22s linear infinite}.world-portal-orbit::before{content:"";position:absolute;inset:28px;border:10px solid color-mix(in srgb,var(--portal),transparent 84%);border-radius:50%;box-shadow:0 0 38px color-mix(in srgb,var(--portal),transparent 83%)} .world-portal-hero-card{position:relative;width:min(245px,70%);padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 25px 23px rgba(0,0,0,.42));transition:.2s ease}.world-portal-hero-card img{display:block;width:100%;max-height:330px;object-fit:contain}.world-portal-hero-card span{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);width:max-content;padding:7px 10px;border:1px solid color-mix(in srgb,var(--portal),transparent 55%);border-radius:99px;color:var(--portal);background:#071528;font-size:.49rem;font-weight:1000;letter-spacing:.1em}.world-portal-hero-card:hover{transform:translateY(-6px) rotate(-1deg) scale(1.025)} .world-portal-pending-orb{position:relative;display:grid;place-items:center;align-content:center;width:255px;height:255px;border:1px solid color-mix(in srgb,var(--portal),transparent 53%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--portal),transparent 83%),rgba(5,13,25,.83) 65%);box-shadow:inset 0 0 55px color-mix(in srgb,var(--portal),transparent 88%),0 0 55px color-mix(in srgb,var(--portal),transparent 88%)}.world-portal-pending-orb>span{font-size:3.6rem}.world-portal-pending-orb b{margin-top:8px;color:var(--portal);font-size:.67rem;letter-spacing:.14em}.world-portal-pending-orb small{margin-top:4px;color:#7790a6;font-size:.52rem} .world-portal-stat-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid rgba(112,191,235,.11);background:rgba(5,18,37,.82)}.world-portal-stat-strip>div{display:grid;grid-template-columns:30px 1fr;align-items:center;column-gap:7px;min-height:76px;padding:12px 15px;border-right:1px solid rgba(255,255,255,.055)}.world-portal-stat-strip>div:last-child{border-right:0}.world-portal-stat-strip span{grid-row:1/3;font-size:1.12rem}.world-portal-stat-strip small{font-size:.49rem;font-weight:900;letter-spacing:.08em;color:#71899e}.world-portal-stat-strip b{font:1000 1.05rem var(--display-font);color:white} .world-portal-section{padding:20px;border:1px solid rgba(103,188,235,.11);border-radius:14px;background:rgba(5,18,37,.72)}.world-portal-section>.panel-heading{margin-bottom:14px}.world-portal-section>.panel-heading h2{font-size:1.2rem}.world-portal-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.world-portal-card-tile{display:grid;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:12px;color:white;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.12));cursor:pointer;text-align:left;transition:.18s ease}.world-portal-card-tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--portal-page),transparent 55%);background:color-mix(in srgb,var(--portal-page),transparent 94%)}.world-portal-card-tile img{width:100%;aspect-ratio:3/4;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}.world-portal-card-tile span{display:grid;gap:2px;padding:0 3px 4px}.world-portal-card-tile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem}.world-portal-card-tile small{color:#73899e;font-size:.49rem}.world-portal-empty-signal{grid-column:1/-1;min-height:190px;display:grid;place-items:center;align-content:center;gap:6px;padding:24px;border:1px dashed color-mix(in srgb,var(--portal-page),transparent 70%);border-radius:13px;background:color-mix(in srgb,var(--portal-page),transparent 96%);text-align:center}.world-portal-empty-signal>span{font-size:2.6rem}.world-portal-empty-signal b{color:var(--portal-page);font-size:.7rem;letter-spacing:.12em}.world-portal-empty-signal p{max-width:720px;margin:0;color:#7890a5;font-size:.62rem;line-height:1.5} .world-portal-two-column{display:grid;grid-template-columns:1fr 1fr;gap:15px}.world-portal-track-list,.world-hopper-grid{display:grid;gap:8px}.world-portal-track{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.065);border-radius:9px;color:white;background:rgba(255,255,255,.025);cursor:pointer;text-align:left}.world-portal-track>span:first-child{font-size:.9rem}.world-portal-track>span:nth-child(2){display:grid;gap:2px}.world-portal-track b{font-size:.6rem}.world-portal-track small{color:#748a9e;font-size:.5rem}.world-portal-track em{color:#65dffc;font-size:.49rem;font-weight:1000;font-style:normal;letter-spacing:.09em}.world-portal-track.locked em{color:#ffd263}.world-portal-track:hover{border-color:color-mix(in srgb,var(--portal-page),transparent 65%);background:color-mix(in srgb,var(--portal-page),transparent 96%)} .world-hopper-grid article{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;min-height:58px;padding:9px 10px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.025)}.world-hopper-grid article>span{font-size:1.15rem}.world-hopper-grid article>div{display:grid;gap:2px}.world-hopper-grid b{font-size:.61rem}.world-hopper-grid small{color:#72879b;font-size:.5rem}.world-hopper-grid em{color:var(--portal-page);font-size:.7rem;font-style:normal} .world-portal-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.world-portal-achievement{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:9px;opacity:.58;background:rgba(255,255,255,.02)}.world-portal-achievement.unlocked{opacity:1;border-color:rgba(255,207,90,.15);background:rgba(101,73,15,.09)}.world-portal-achievement>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.04);font-size:.95rem}.world-portal-achievement>div{display:grid;gap:2px}.world-portal-achievement b{font-size:.58rem}.world-portal-achievement small{color:#72869a;font-size:.49rem;line-height:1.35}.world-portal-achievement em{color:#6f8295;font-size:.48rem;font-weight:1000;font-style:normal}.world-portal-achievement.unlocked em{color:#ffd365}.world-portal-empty-list{min-height:105px;display:grid;place-items:center;align-content:center;gap:4px;padding:15px;border:1px dashed rgba(255,255,255,.08);border-radius:10px;text-align:center}.world-portal-empty-list>span{font-size:1.35rem}.world-portal-empty-list b{font-size:.61rem}.world-portal-empty-list small{max-width:420px;color:#70869a;font-size:.5rem;line-height:1.4} @media(max-width:1180px){ .reconnect-network-strip{grid-template-columns:repeat(4,minmax(0,1fr))} .reconnect-career-widget,.reconnect-favorite-widget,.reconnect-last-match,.reconnect-legacy-widget,.reconnect-rings-widget,.reconnect-daily-widget,.reconnect-achievement-widget,.reconnect-news-widget{grid-column:span 6} .hub-world-portals{grid-template-columns:repeat(2,minmax(0,1fr))} .world-portal-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .world-portal-hero{grid-template-columns:1fr 330px} .world-portal-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:850px){ .reconnect-live-grid{grid-template-columns:1fr} .reconnect-career-widget,.reconnect-favorite-widget,.reconnect-last-match,.reconnect-legacy-widget,.reconnect-rings-widget,.reconnect-daily-widget,.reconnect-achievement-widget,.reconnect-news-widget{grid-column:1} .hub-world-portals{grid-template-columns:1fr} .hub-world-portal{min-height:250px} .world-portal-hero{grid-template-columns:1fr;padding:25px}.world-portal-hero-visual{min-height:285px}.world-portal-two-column{grid-template-columns:1fr}.world-portal-stat-strip{grid-template-columns:repeat(2,1fr)}.world-portal-stat-strip>div:nth-child(5){grid-column:1/-1}.world-portal-achievement-grid{grid-template-columns:1fr} } @media(max-width:620px){ .reconnect-network-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .reconnect-widget{padding:15px}.reconnect-career-main{grid-template-columns:58px 1fr}.reconnect-career-crest{width:58px;height:58px}.reconnect-favorite-main{grid-template-columns:76px 1fr}.reconnect-favorite-main img{width:76px;height:108px} .reconnect-scoreline{grid-template-columns:1fr auto 1fr;gap:6px;padding:9px}.reconnect-scoreline b{font-size:1.2rem}.reconnect-scoreline strong{font-size:.54rem} .world-portal-hero{padding:20px 15px;min-height:0}.world-portal-hero-copy h2{font-size:2.55rem}.world-portal-hero-stats{grid-template-columns:1fr 1fr}.world-portal-hero-actions{display:grid}.world-portal-hero-visual{min-height:255px}.world-portal-orbit{width:240px;height:240px}.world-portal-pending-orb{width:210px;height:210px}.world-portal-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-portal-stat-strip{grid-template-columns:1fr}.world-portal-stat-strip>div:nth-child(5){grid-column:auto}.world-portal-stat-strip>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.05)} } /* ========================================================= BUILD 0.6B · MARKET CLASH — WHO'S WORTH MORE? ========================================================= */ body[data-world-theme="football-arcade"] #view-market-clash { --market-green: #78ff97; --market-green-2: #18d96e; --market-gold: #ffd85e; --market-red: #ff667d; --market-ink: #07130f; --market-panel: rgba(8, 26, 20, .88); } #view-market-clash { position: relative; overflow: hidden; min-height: 78vh; background: radial-gradient(circle at 18% 16%, rgba(33, 255, 131, .13), transparent 28rem), radial-gradient(circle at 88% 26%, rgba(255, 216, 94, .09), transparent 24rem), linear-gradient(180deg, rgba(4,16,12,.28), rgba(4,12,10,.72)); } #view-market-clash::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; background-image: linear-gradient(rgba(115,255,155,.26) 1px, transparent 1px), linear-gradient(90deg, rgba(115,255,155,.16) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 86%); } .market-game-header { border-bottom-color: rgba(120,255,151,.22); } .market-game-header h1 span { color: var(--market-green, #78ff97); } .market-screen { display: none; animation: marketIn .28s ease both; } .market-screen.active { display: block; } @keyframes marketIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .market-hero { overflow: hidden; padding: 0; border-color: rgba(120,255,151,.28); background: linear-gradient(125deg, rgba(5,24,17,.98), rgba(9,40,27,.94) 58%, rgba(31,29,11,.88)), var(--panel-bg, rgba(13,23,33,.9)); box-shadow: inset 0 0 60px rgba(53,255,135,.06), 0 24px 70px rgba(0,0,0,.22); } .market-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .55fr); gap: 28px; padding: clamp(28px,4vw,54px); } .market-hero-copy { position: relative; z-index: 1; } .market-hero-copy h2 { margin: 10px 0 18px; max-width: 850px; font-size: clamp(2.35rem, 5.5vw, 5.4rem); line-height: .94; letter-spacing: -.055em; text-transform: uppercase; } .market-hero-copy h2 strong { color: var(--market-green); text-shadow: 0 0 28px rgba(120,255,151,.24); } .market-hero-copy > p:not(.eyebrow) { max-width: 820px; color: rgba(235,255,245,.76); font-size: 1.04rem; line-height: 1.72; } .market-live-tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 12px; border: 1px solid rgba(120,255,151,.28); border-radius: 999px; color: #b9ffca; background: rgba(20,255,109,.07); font-size: .68rem; font-weight: 900; letter-spacing: .14em; } .market-live-tag span { width: 8px; height: 8px; border-radius: 50%; background: var(--market-green); box-shadow: 0 0 16px var(--market-green); animation: marketPulse 1.3s ease infinite; } @keyframes marketPulse { 50% { opacity: .35; transform: scale(.72); } } .market-rule-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 820px; margin-top: 30px; border: 1px solid rgba(120,255,151,.18); border-radius: 18px; overflow: hidden; background: rgba(0,0,0,.18); } .market-rule-strip span { padding: 17px 12px; text-align: center; border-right: 1px solid rgba(120,255,151,.12); color: rgba(230,255,240,.58); font-size: .65rem; font-weight: 900; letter-spacing: .1em; } .market-rule-strip span:last-child { border-right: 0; } .market-rule-strip b { display: block; margin-bottom: 4px; color: #fff; font-size: 1.2rem; letter-spacing: -.02em; } .market-database-card { position: relative; display: flex; min-height: 310px; flex-direction: column; justify-content: center; align-items: center; padding: 28px; text-align: center; border: 1px solid rgba(255,216,94,.28); border-radius: 24px; background: linear-gradient(180deg, rgba(255,218,94,.085), rgba(2,14,9,.38)); box-shadow: inset 0 0 40px rgba(255,216,94,.04); } .market-database-card::after { content:""; position:absolute; inset:12px; border:1px dashed rgba(120,255,151,.14); border-radius:17px; pointer-events:none; } .market-database-card h3 { margin: 16px 0 4px; font-size: 1.35rem; letter-spacing: .11em; } .market-database-card > b { color: var(--market-gold); font-size: 2.05rem; } .market-database-card > p { margin: 8px 0 5px; color: rgba(255,255,255,.8); font-weight: 800; } .market-database-card > small { color: rgba(255,255,255,.45); } .market-db-pulse { position: relative; display: grid; width: 98px; height: 98px; place-items: center; border-radius: 50%; border: 1px solid rgba(120,255,151,.3); color: var(--market-green); background: radial-gradient(circle, rgba(120,255,151,.13), transparent 68%); font-size: 1.45rem; font-weight: 950; letter-spacing: .12em; } .market-db-pulse i { position: absolute; inset: 8px; border: 1px dashed rgba(120,255,151,.36); border-radius: 50%; animation: marketSpin 10s linear infinite; } @keyframes marketSpin { to { transform: rotate(360deg); } } .market-ticker { overflow: hidden; border-top: 1px solid rgba(120,255,151,.16); background: rgba(0,0,0,.28); } .market-ticker div { display: flex; width: max-content; gap: 38px; padding: 11px 22px; color: rgba(235,255,245,.48); font-size: .66rem; font-weight: 900; letter-spacing: .12em; animation: marketTicker 28s linear infinite; } .market-ticker b { color: var(--market-green); } @keyframes marketTicker { to { transform: translateX(-35%); } } .market-record { margin-top: 22px; border-color: rgba(120,255,151,.16); } .market-record-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .market-record-grid > span { padding: 20px; border: 1px solid rgba(120,255,151,.12); border-radius: 16px; background: rgba(6,27,18,.55); } .market-record-grid small { display:block; color: rgba(255,255,255,.43); font-size:.63rem; font-weight:900; letter-spacing:.11em; } .market-record-grid b { display:block; margin-top:8px; color:#fff; font-size:1.85rem; } .market-mode-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; } .market-mode-card { position:relative; min-height: 245px; padding: 23px 20px; overflow:hidden; text-align:left; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:linear-gradient(155deg, rgba(15,31,27,.96), rgba(6,15,12,.98)); cursor:pointer; transition:.22s ease; } .market-mode-card::before { content:""; position:absolute; inset:auto -20% -48% -20%; height:65%; background:radial-gradient(circle, rgba(120,255,151,.13), transparent 64%); opacity:0; transition:.22s; } .market-mode-card:hover { transform:translateY(-4px); border-color:rgba(120,255,151,.32); box-shadow:0 16px 34px rgba(0,0,0,.22); } .market-mode-card:hover::before, .market-mode-card.selected::before { opacity:1; } .market-mode-card.selected { border-color:var(--market-green); box-shadow:inset 0 0 0 1px rgba(120,255,151,.16),0 0 28px rgba(53,255,135,.08); } .market-mode-card.hard.selected { border-color:var(--market-red); } .market-mode-card > span { display:block; margin-bottom:18px; font-size:2rem; } .market-mode-card small { color:var(--market-green); font-weight:900; letter-spacing:.1em; } .market-mode-card h3 { margin:8px 0 10px; font-size:1.14rem; } .market-mode-card p { min-height:65px; margin:0; color:rgba(255,255,255,.56); font-size:.84rem; line-height:1.55; } .market-mode-card > b { display:block; margin-top:16px; color:rgba(255,255,255,.85); font-size:.72rem; letter-spacing:.11em; } .market-launch { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:22px; border-color:rgba(120,255,151,.18); background:linear-gradient(115deg, rgba(10,31,22,.94), rgba(24,29,15,.84)); } .market-launch h2 { color:var(--market-green); } .market-launch p { max-width:780px; color:rgba(255,255,255,.68); } .market-source-note { display:block; margin-top:12px; color:rgba(255,255,255,.38); } .market-start-button { min-width:250px; background:linear-gradient(135deg, #53f98c, #d9ff69); color:#07130f; box-shadow:0 0 28px rgba(120,255,151,.18); } .market-hud { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; padding:17px 22px; border-color:rgba(120,255,151,.18); background:rgba(5,20,14,.92); } .market-hud > div:first-child small { display:block; color:rgba(255,255,255,.4); font-weight:900; letter-spacing:.1em; } .market-hud > div:first-child b { display:block; margin-top:4px; color:var(--market-green); } .market-hud-center { text-align:center; } .market-hud-center span { display:block; font-weight:950; font-size:1.05rem; } .market-hud-center i { color:rgba(255,255,255,.32); font-size:.62rem; font-style:normal; font-weight:900; letter-spacing:.16em; } .market-hud-stats { display:flex; justify-content:flex-end; gap:9px; } .market-hud-stats > span { min-width:82px; padding:9px 12px; text-align:center; border:1px solid rgba(120,255,151,.13); border-radius:12px; background:rgba(120,255,151,.045); } .market-hud-stats small { display:block; color:rgba(255,255,255,.38); font-size:.58rem; font-weight:900; } .market-hud-stats b { display:block; margin-top:2px; font-size:1.2rem; } #market-timer.danger { color:var(--market-red); animation:marketPulse .65s ease infinite; } .market-battle-wrap { display:grid; grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr); align-items:stretch; gap:18px; max-width:1320px; margin:28px auto 0; } .market-player-slot { min-width:0; } .market-player-shell { position:relative; display:flex; min-height:520px; height:100%; flex-direction:column; align-items:center; overflow:hidden; padding:22px; text-align:center; border:1px solid rgba(120,255,151,.2); border-radius:28px; background:linear-gradient(155deg, rgba(12,38,27,.98), rgba(5,13,10,.99) 65%); box-shadow:0 24px 60px rgba(0,0,0,.28); } .market-player-shell::before { content:""; position:absolute; width:330px; height:330px; top:52px; border-radius:50%; background:radial-gradient(circle, rgba(86,255,142,.13), transparent 68%); } .market-player-shell.is-hidden-value { border-color:rgba(255,216,94,.24); background:linear-gradient(155deg, rgba(37,34,17,.97), rgba(6,14,10,.99) 70%); } .market-player-shell.revealed.answer-correct { animation:marketCorrect .45s ease; border-color:rgba(120,255,151,.7); } .market-player-shell.revealed.answer-wrong { animation:marketWrong .45s ease; border-color:rgba(255,102,125,.7); } @keyframes marketCorrect { 50% { transform:scale(1.018); box-shadow:0 0 46px rgba(120,255,151,.18); } } @keyframes marketWrong { 25%,75% { transform:translateX(-5px); } 50% { transform:translateX(5px); } } .market-player-topline { position:relative; z-index:1; display:flex; width:100%; justify-content:space-between; align-items:center; color:rgba(255,255,255,.48); font-size:.7rem; font-weight:900; letter-spacing:.08em; } .market-player-topline span { display:grid; width:34px; height:25px; place-items:center; border-radius:8px; color:#07130f; background:var(--market-green); } .market-player-avatar { position:relative; z-index:1; display:grid; width:190px; height:190px; margin:34px 0 22px; place-items:center; border:1px solid rgba(120,255,151,.25); border-radius:50%; background:radial-gradient(circle at 45% 35%, rgba(174,255,197,.16), rgba(10,34,23,.9) 55%, rgba(2,12,8,.98)); box-shadow:inset 0 0 55px rgba(120,255,151,.06),0 0 30px rgba(0,0,0,.2); } .market-player-avatar::before, .market-player-avatar::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(120,255,151,.15); } .market-player-avatar::before { inset:-11px; } .market-player-avatar::after { inset:19px; } .market-player-avatar span { font-size:3.35rem; font-weight:950; letter-spacing:-.07em; color:#dfffea; text-shadow:0 0 25px rgba(120,255,151,.22); } .market-player-avatar i { position:absolute; left:50%; bottom:-9px; width:58%; height:3px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, var(--market-green), transparent); box-shadow:0 0 15px var(--market-green); } .market-player-shell.is-hidden-value .market-player-avatar { border-color:rgba(255,216,94,.22); background:radial-gradient(circle at 45% 35%, rgba(255,216,94,.12), rgba(38,31,12,.74) 55%, rgba(5,11,8,.98)); } .market-player-shell.is-hidden-value .market-player-avatar span { color:#fff1ba; } .market-player-copy { position:relative; z-index:1; min-height:108px; } .market-player-copy small { color:rgba(255,255,255,.48); font-weight:800; } .market-player-copy h2 { margin:7px 0 5px; font-size:clamp(1.55rem,2.8vw,2.55rem); line-height:1; text-transform:uppercase; } .market-player-copy span { color:var(--market-green); font-size:.76rem; font-weight:900; letter-spacing:.1em; } .market-player-value { position:relative; z-index:1; width:100%; margin-top:auto; padding:19px 15px; border:1px solid rgba(120,255,151,.14); border-radius:18px; background:rgba(0,0,0,.25); } .market-player-value small { display:block; color:rgba(255,255,255,.35); font-size:.58rem; font-weight:900; letter-spacing:.12em; } .market-player-value b { display:block; margin:5px 0 3px; color:#fff; font-size:clamp(2.1rem,4vw,3.5rem); line-height:1; } .market-player-value span { color:rgba(120,255,151,.65); font-size:.61rem; font-weight:900; letter-spacing:.09em; } .market-value-hidden b { color:var(--market-gold); letter-spacing:.08em; text-shadow:0 0 26px rgba(255,216,94,.18); } .market-value-hidden span { color:rgba(255,216,94,.62); } .market-vs-column { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:10px; text-align:center; } .market-vs { align-self:center; display:grid; width:72px; height:72px; margin-bottom:6px; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:#fff; background:#0c1f16; font-size:1.6rem; font-weight:950; box-shadow:0 0 0 8px rgba(120,255,151,.035); } .market-vs-column > p { color:rgba(255,255,255,.42); font-size:.65rem; font-weight:900; letter-spacing:.1em; } .market-choice { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; align-items:center; padding:14px 13px; text-align:left; border:1px solid rgba(120,255,151,.23); border-radius:15px; color:#fff; background:rgba(15,45,31,.9); cursor:pointer; transition:.18s ease; } .market-choice > span { grid-row:1/3; color:var(--market-green); font-size:1.45rem; } .market-choice b { font-size:.87rem; } .market-choice small { color:rgba(255,255,255,.38); font-size:.55rem; font-weight:900; letter-spacing:.06em; } .market-choice.lower { border-color:rgba(255,216,94,.2); background:rgba(45,39,15,.82); } .market-choice.lower > span { color:var(--market-gold); } .market-choice:hover:not(:disabled) { transform:scale(1.035); box-shadow:0 8px 26px rgba(0,0,0,.25); } .market-choice:disabled { opacity:.45; cursor:default; } .market-feedback { display:none; max-width:720px; margin:20px auto 0; padding:13px 20px; grid-template-columns:auto auto 1fr; align-items:center; gap:18px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(7,19,14,.94); } .market-feedback.show { display:grid; animation:marketIn .2s ease both; } .market-feedback.correct { border-color:rgba(120,255,151,.34); } .market-feedback.wrong { border-color:rgba(255,102,125,.38); } .market-feedback span { color:var(--market-green); font-weight:950; } .market-feedback.wrong span { color:var(--market-red); } .market-feedback b { font-size:1.5rem; } .market-feedback small { text-align:right; color:rgba(255,255,255,.48); font-weight:800; } .market-game-actions { display:flex; justify-content:center; gap:12px; margin-top:18px; } .market-data-footnote { display:flex; justify-content:center; gap:10px; margin:18px 0 0; color:rgba(255,255,255,.28); font-size:.65rem; } .market-data-footnote span { color:var(--market-green); font-weight:900; } .market-data-footnote p { margin:0; } .market-result-card { max-width:780px; margin:24px auto 0; text-align:center; border-color:rgba(120,255,151,.25); background:linear-gradient(155deg, rgba(8,31,21,.98), rgba(10,14,11,.98)); } .market-result-icon { color:var(--market-green); filter:drop-shadow(0 0 22px rgba(120,255,151,.24)); } .market-result-score { display:flex; justify-content:center; align-items:center; gap:24px; margin:26px auto 16px; } .market-result-score > div { display:flex; min-width:200px; flex-direction:column; padding:18px 28px; border:1px solid rgba(120,255,151,.2); border-radius:18px; background:rgba(120,255,151,.05); } .market-result-score > div b { font-size:3.5rem; line-height:1; } .market-result-score > div small { margin-top:6px; color:var(--market-green); font-weight:950; letter-spacing:.14em; } .market-result-score > span { color:rgba(255,255,255,.34); font-size:.68rem; font-weight:900; letter-spacing:.12em; } .market-result-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:520px; margin:0 auto 16px; } .market-result-metrics span { padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.16); } .market-result-metrics small { display:block; color:rgba(255,255,255,.36); font-size:.6rem; font-weight:900; } .market-result-metrics b { display:block; margin-top:4px; font-size:1.35rem; } .market-result-reward { display:flex; max-width:520px; justify-content:space-between; align-items:center; margin:0 auto 26px; padding:16px 20px; border:1px solid rgba(255,216,94,.2); border-radius:15px; background:rgba(255,216,94,.05); } .market-result-reward span { color:rgba(255,255,255,.4); font-size:.65rem; font-weight:900; letter-spacing:.1em; } .market-result-reward b { color:var(--market-gold); font-size:1.2rem; } @media (max-width: 1180px) { .market-mode-grid { grid-template-columns:repeat(3,1fr); } .market-battle-wrap { grid-template-columns:1fr 150px 1fr; } .market-player-shell { min-height:480px; } .market-player-avatar { width:160px; height:160px; } } @media (max-width: 850px) { .market-hero-grid { grid-template-columns:1fr; } .market-database-card { min-height:250px; } .market-record-grid { grid-template-columns:repeat(2,1fr); } .market-mode-grid { grid-template-columns:repeat(2,1fr); } .market-launch { align-items:stretch; flex-direction:column; } .market-start-button { width:100%; } .market-hud { grid-template-columns:1fr; text-align:center; } .market-hud-stats { justify-content:center; } .market-battle-wrap { grid-template-columns:1fr; } .market-vs-column { order:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; } .market-vs-column .market-vs, .market-vs-column > p { display:none; } #market-left-player { order:1; } #market-right-player { order:3; } .market-player-shell { min-height:410px; } .market-player-avatar { width:135px; height:135px; margin:22px 0 15px; } .market-player-avatar span { font-size:2.6rem; } .market-player-copy { min-height:auto; margin-bottom:16px; } } @media (max-width: 560px) { .market-rule-strip { grid-template-columns:repeat(2,1fr); } .market-rule-strip span:nth-child(2) { border-right:0; } .market-rule-strip span:nth-child(-n+2) { border-bottom:1px solid rgba(120,255,151,.12); } .market-mode-grid { grid-template-columns:1fr; } .market-mode-card { min-height:210px; } .market-record-grid { grid-template-columns:1fr 1fr; } .market-player-shell { min-height:390px; padding:17px; } .market-feedback.show { grid-template-columns:1fr; text-align:center; } .market-feedback small { text-align:center; } .market-game-actions { flex-direction:column-reverse; } .market-game-actions button { width:100%; } } /* ========================================================================== */ /* BUILD 0.6D · VISUAL IDENTITY REFRESH I */ /* Foundation polish only: no world background artwork is locked in yet. */ /* ========================================================================== */ :root{ --cr-surface-0:#030914; --cr-surface-1:#061427; --cr-surface-2:#091b34; --cr-surface-3:#0c2442; --cr-line-soft:rgba(127,199,235,.105); --cr-line:rgba(127,207,247,.18); --cr-text-soft:#8fa9c0; --cr-panel-shadow:0 18px 52px rgba(0,0,0,.24); --cr-panel-shadow-hover:0 24px 64px rgba(0,0,0,.34); } /* Background foundation intentionally stays artwork-neutral for the later World Background pass. 0.6D only prepares calmer translucent surfaces. */ body.reconnect-style{ background: radial-gradient(ellipse at 16% 4%,rgba(37,116,255,.14),transparent 32%), radial-gradient(ellipse at 84% 12%,rgba(72,221,255,.075),transparent 29%), linear-gradient(155deg,#020711 0%,#061224 48%,#030914 100%); } body.reconnect-style::before{ opacity:.11; background-image: linear-gradient(rgba(91,220,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(91,220,255,.045) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black 0 58%,transparent 96%); } body.reconnect-style::after{ opacity:.11; animation-duration:26s; background: linear-gradient(112deg,transparent 0 58%,rgba(85,232,255,.1) 58.2% 58.38%,transparent 58.7%), radial-gradient(ellipse at 88% 28%,rgba(255,211,67,.105),transparent 18%); } main{width:min(1460px,calc(100% - 44px))} .view{padding-top:36px;padding-bottom:84px} /* Navigation: same Sonic/Station DNA, but less visually busy. */ .topbar{ height:76px; padding:0 clamp(14px,2.5vw,42px); gap:18px; background:linear-gradient(90deg,rgba(3,10,24,.95),rgba(7,23,47,.92) 48%,rgba(3,10,24,.95)); border-bottom:1px solid rgba(115,207,247,.105); box-shadow:0 8px 32px rgba(0,0,0,.2); backdrop-filter:blur(24px) saturate(125%); } .topbar::before{opacity:.26} .topbar::after{height:2px;opacity:.78;background:linear-gradient(90deg,transparent 1%,var(--cyan) 18%,#326dff 48%,var(--yellow) 78%,transparent 99%)} .brand{min-width:218px;gap:10px} .brand-mark{width:39px;height:39px;border-width:6px;box-shadow:inset 0 0 0 2px #7a5b00,0 0 18px rgba(255,216,61,.18)} .brand-text b{font-size:.91rem}.brand-text small{margin-top:4px;color:#7ecce8;font-size:.45rem;letter-spacing:.14em} .topnav{height:auto;gap:3px;padding:4px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.025)} .nav-button{ min-width:auto; height:38px; padding:0 12px; clip-path:none; border-radius:9px; border:1px solid transparent; color:#8198ae; font-size:.64rem; font-style:normal; letter-spacing:.025em; } .nav-button:hover{border-color:rgba(89,226,255,.12);background:rgba(89,226,255,.045);color:#dffaff} .nav-button.active{border-color:rgba(89,226,255,.2);background:linear-gradient(145deg,rgba(38,115,184,.2),rgba(82,226,255,.055));color:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .nav-button.active::after{left:13px;right:13px;bottom:-5px;height:2px;border-radius:99px;background:var(--cyan);box-shadow:0 0 10px rgba(88,231,255,.45)} .profile-strip{gap:9px}.profile-name-button{border-color:rgba(255,255,255,.07)!important;background:rgba(255,255,255,.025)!important}.signal-chip{padding:6px 9px;background:rgba(95,245,167,.035);border-color:rgba(95,245,167,.11)} .ring-counter{min-width:72px;padding:7px 11px;border-color:rgba(255,216,61,.2);background:rgba(255,216,61,.05)} .icon-button{border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.025)} /* Global surfaces and controls. */ .panel{ position:relative; border-radius:17px; border:1px solid var(--cr-line-soft); background:linear-gradient(150deg,rgba(10,31,59,.86),rgba(4,14,29,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--cr-panel-shadow); } .panel::before{ width:54px;height:2px; background:linear-gradient(90deg,var(--cyan),rgba(88,231,255,0)); box-shadow:none; opacity:.7; } .primary-button,.secondary-button,.ghost-button,.back-button{ min-height:43px; padding:12px 18px; border-radius:10px; font-style:normal; letter-spacing:.045em; font-size:.66rem; } .primary-button{ color:#02111d; background:linear-gradient(135deg,#8ff4ff 0%,#55e7ff 48%,#55a8ff 100%); box-shadow:0 10px 26px rgba(53,172,255,.17),inset 0 1px 0 rgba(255,255,255,.45); } .primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 15px 34px rgba(71,206,255,.25)} .secondary-button,.back-button{border-color:rgba(129,203,240,.14);background:rgba(8,27,52,.72)} .secondary-button:hover,.back-button:hover{border-color:rgba(88,231,255,.3);background:rgba(32,99,139,.12)} .text-button{color:#72dff7;font-size:.69rem;font-weight:900;letter-spacing:.03em}.text-button:hover{color:white} .version-badge{border-color:rgba(111,199,236,.12);background:rgba(3,13,28,.55);color:#7895ad} /* Section rhythm: a clean rail makes long pages easier to scan. */ .section-heading{position:relative;align-items:center;margin:46px 0 18px;padding-left:17px} .section-heading::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:4px;background:linear-gradient(var(--cyan),rgba(88,231,255,.15));box-shadow:0 0 14px rgba(88,231,255,.15)} .section-heading h2{margin:0;font-size:clamp(1.45rem,2vw,2.05rem);letter-spacing:-.045em} .section-heading .eyebrow{margin-bottom:5px;color:#7fdff5;text-shadow:none;font-size:.61rem;letter-spacing:.16em} .reconnect-section-heading>div>p:last-child{color:#738da4;font-size:.72rem} .status-tag{padding:6px 9px;border-radius:7px;font-size:.55rem;letter-spacing:.1em} /* Reconnect hero: still unmistakably Crossfield, but calmer and more premium. */ .unleashed-hero{min-height:540px;margin-top:-36px;padding-top:36px} .unleashed-hero::before{inset:7% -6vw 5%;background:linear-gradient(100deg,rgba(4,18,42,.95) 0 54%,rgba(16,24,63,.82) 100%);border-bottom:1px solid rgba(108,196,235,.08)} .unleashed-hero::after{inset:8% -5vw 6%;opacity:.18;background:radial-gradient(circle at 21% 32%,rgba(85,232,255,.35),transparent 26%),radial-gradient(circle at 83% 35%,rgba(255,211,67,.19),transparent 22%),repeating-linear-gradient(120deg,transparent 0 62px,rgba(255,255,255,.045) 63px 65px)} .hero-speed-stripes{opacity:.48}.hero-speed-stripes::before,.hero-speed-stripes::after{height:2px;box-shadow:0 32px 0 rgba(85,232,255,.10),0 64px 0 rgba(85,232,255,.045)} .reconnect-command-hero{background:radial-gradient(circle at 75% 45%,rgba(91,232,255,.10),transparent 27%),radial-gradient(circle at 18% 78%,rgba(91,93,255,.10),transparent 33%),linear-gradient(135deg,#061a34 0%,#082647 48%,#071426 100%)} .hero-copy{padding-left:clamp(0px,1.5vw,18px)} .hero-copy .eyebrow{color:#78daf2}.hero-kicker{color:#90b6cb;font-size:.59rem;letter-spacing:.055em}.hero-kicker span{color:#f2cf65} .reconnect-command-hero h1{margin-bottom:18px}.reconnect-command-hero h1 span{color:#dfefff}.reconnect-command-hero h1 strong{color:white} .hero-copy>p:not(.eyebrow){max-width:650px;color:#9bb2c5;font-size:clamp(.92rem,1.2vw,1.08rem);line-height:1.65} .hero-actions{margin-top:27px}.hero-build-row{margin-top:18px} .world-signal-card.reconnect-live-signal{border-radius:15px!important;background:linear-gradient(145deg,rgba(7,30,58,.86),rgba(3,15,29,.92))!important} /* World network ribbon is now a calm status rail instead of another loud card. */ .reconnect-network-strip{gap:0;overflow:hidden;border:1px solid rgba(109,193,232,.09);border-radius:13px;background:rgba(4,15,30,.64);box-shadow:none} .reconnect-network-strip>span{min-height:64px;border-right:1px solid rgba(255,255,255,.045);background:transparent!important;transition:background .16s ease} .reconnect-network-strip>span:last-child{border-right:0}.reconnect-network-strip>span:hover{background:rgba(255,255,255,.025)!important}.reconnect-network-strip i{filter:saturate(.85)} /* Live dashboard: stronger information hierarchy, less glow soup. */ .reconnect-live-grid{gap:15px;margin-top:15px} .reconnect-widget{ --widget-accent:#67dcff; padding:19px; border-color:rgba(113,195,233,.105); border-radius:16px; background:linear-gradient(155deg,rgba(8,26,50,.91),rgba(4,14,27,.96)); box-shadow:0 12px 36px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.02); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .reconnect-widget:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--widget-accent),transparent 78%);box-shadow:var(--cr-panel-shadow-hover)} .reconnect-widget::before{background:radial-gradient(circle at 100% 0,var(--widget-glow,rgba(72,205,255,.08)),transparent 31%);opacity:.65} .reconnect-widget::after{content:"";position:absolute;left:0;top:0;width:72px;height:2px;background:linear-gradient(90deg,var(--widget-accent),transparent);opacity:.78} .reconnect-career-widget{--widget-accent:#68e5a3}.reconnect-favorite-widget{--widget-accent:#ff83cd}.reconnect-last-match{--widget-accent:#65d9ff}.reconnect-legacy-widget{--widget-accent:#ba91ff}.reconnect-rings-widget{--widget-accent:#f4d365}.reconnect-daily-widget{--widget-accent:#66eeb8}.reconnect-achievement-widget{--widget-accent:#f0bd61}.reconnect-news-widget{--widget-accent:#8ba5ff} .reconnect-widget-head{margin-bottom:14px}.reconnect-widget-head small{color:#728ba1;font-size:.51rem}.reconnect-widget-head i{border-radius:7px;color:var(--widget-accent);background:color-mix(in srgb,var(--widget-accent),transparent 95%);border-color:color-mix(in srgb,var(--widget-accent),transparent 86%)} .reconnect-widget h3{font-size:1rem;letter-spacing:-.02em}.reconnect-widget p{color:#748ba0} .reconnect-widget-action{color:var(--widget-accent);font-size:.54rem}.reconnect-scoreline{border-color:rgba(110,193,233,.075);border-radius:10px;background:rgba(1,9,20,.45)} .reconnect-career-crest{border-radius:14px;background:linear-gradient(145deg,#102f28,#071920)} .reconnect-legacy-main>strong{border-width:1px;background:radial-gradient(circle,rgba(180,131,255,.105),rgba(25,15,60,.38))} .reconnect-news-list>span{border-color:rgba(123,157,229,.065);background:rgba(255,255,255,.018)} /* World portals: cleaner geometry, stronger color identity, ready for future art. */ .hub-world-portals{gap:16px;margin-top:15px} .hub-world-portal{ min-height:270px; padding:22px; gap:10px; border-radius:18px; border-color:color-mix(in srgb,var(--portal),transparent 84%); background:linear-gradient(155deg,color-mix(in srgb,var(--portal-bg),#061326 18%),#04101f 78%); box-shadow:0 14px 38px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025); } .hub-world-portal::before{background:radial-gradient(circle at 88% 9%,color-mix(in srgb,var(--portal),transparent 79%),transparent 27%),linear-gradient(120deg,color-mix(in srgb,var(--portal2),transparent 94%),transparent 48%)} .hub-world-portal::after{width:210px;height:210px;right:-86px;top:-86px;border-width:12px;opacity:.09;box-shadow:0 0 0 12px color-mix(in srgb,var(--portal2),transparent 93%)} .hub-world-portal:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--portal),transparent 58%);box-shadow:0 24px 58px rgba(0,0,0,.3),0 0 24px color-mix(in srgb,var(--portal),transparent 92%)} .hub-world-portal small{color:color-mix(in srgb,var(--portal),#aec8d8 48%)} /* Core destinations now read as one clean four-card row on wide screens. */ .reconnect-core-gates{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .reconnect-core-gates .hub-world-gate,.reconnect-core-gates .hub-world-gate.collection{grid-column:auto;min-height:235px;padding:21px;border-radius:16px;border-color:rgba(255,255,255,.075);box-shadow:0 14px 38px rgba(0,0,0,.16)} .reconnect-core-gates .hub-world-gate::after{width:180px;height:180px;right:-82px;top:-82px;border-width:14px;opacity:.08} .reconnect-core-gates .hub-world-gate:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.27)} .reconnect-core-gates .hub-world-gate h2{font-size:clamp(1.25rem,1.8vw,1.8rem)} .reconnect-core-gates .hub-world-gate p{font-size:.68rem;line-height:1.45;color:#8fa5b8}.reconnect-core-gates .hub-gate-symbol{right:20px;top:18px;font-size:2rem;opacity:.7} .reconnect-core-gates .hub-world-gate.collection::after{right:-82px;top:-82px;width:180px;height:180px} .hub-status-bar.reconnect-micro-stats{overflow:hidden;border-radius:14px;border-color:rgba(103,184,221,.085);background:rgba(4,15,29,.7)} /* World portal pages: preserve each world's accent but make the information architecture feel like the same premium Station OS. */ .world-portal-header{padding-bottom:17px;border-bottom:1px solid rgba(111,191,228,.08)} .world-portal-header::after{opacity:.11} .world-portal-content{gap:18px;padding-bottom:30px} .world-portal-hero{ min-height:400px; padding:32px; border-radius:19px; border-color:color-mix(in srgb,var(--portal),transparent 82%); background:linear-gradient(140deg,color-mix(in srgb,var(--portal2),#07172e 82%),#061427 65%,#040b16); box-shadow:0 20px 56px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025); } .world-portal-hero::before{opacity:.72}.world-portal-hero::after{border-width:20px;opacity:.045} .world-portal-hero-copy h2{font-size:clamp(2.4rem,6vw,5rem);text-shadow:0 0 28px color-mix(in srgb,var(--portal),transparent 83%)} .world-portal-hero-copy>p:not(.eyebrow){color:#8fa6ba} .world-portal-hero-stats{gap:7px;margin-top:22px}.world-portal-hero-stats>span{padding:11px;border-color:rgba(255,255,255,.055);border-radius:9px;background:rgba(0,0,0,.12)} .world-portal-orbit{opacity:.7}.world-portal-hero-card span{border-radius:7px;background:#061326} .world-portal-stat-strip{overflow:hidden;border-radius:13px;border-color:rgba(112,191,235,.08);background:rgba(4,15,30,.7)} .world-portal-stat-strip>div{min-height:72px;border-color:rgba(255,255,255,.04)} .world-portal-section{padding:21px;border-radius:14px;border-color:rgba(103,188,235,.08);background:linear-gradient(155deg,rgba(6,22,42,.8),rgba(4,14,28,.86));box-shadow:0 12px 34px rgba(0,0,0,.12)} .world-portal-card-grid{gap:12px}.world-portal-card-tile{border-radius:10px;border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.018)} .world-portal-track,.world-portal-achievement{border-radius:9px;border-color:rgba(255,255,255,.05);background:rgba(255,255,255,.015)} /* Collection 2.0: less chrome around the cards, more album / archive hierarchy. */ #view-card-collection .collection-game-header{min-height:86px;padding:0 18px;border-width:1px;border-left-width:3px;border-radius:12px;background:linear-gradient(90deg,rgba(65,181,237,.08),transparent 42%),rgba(5,18,36,.78)} .collection-album-hero{min-height:245px;background:radial-gradient(circle at 84% 34%,rgba(91,232,255,.095),transparent 27%),radial-gradient(circle at 72% 70%,rgba(243,203,92,.05),transparent 25%),linear-gradient(125deg,#082851,#07172c 62%,#040b16)} .collection-album-signal{border-radius:18px;border-color:rgba(91,232,255,.22);box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 0 0 1px rgba(243,203,92,.055)} .collection-album-summary{gap:1px;margin-bottom:15px;padding:1px;border-radius:14px;border-color:rgba(91,232,255,.075);background:rgba(94,188,231,.07)} .collection-album-summary>div{min-height:82px;border:0;background:linear-gradient(155deg,rgba(7,26,50,.96),rgba(4,15,29,.96))} .collection-world-tabs{gap:7px;padding:7px;border-radius:14px;border-color:rgba(255,255,255,.055);background:rgba(3,13,27,.62)} .collection-world-tab{min-height:72px;padding:9px 10px;border-radius:10px;border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.018)} .collection-world-tab:hover{transform:translateY(-1px);background:rgba(91,232,255,.035)}.collection-world-tab.active{border-color:rgba(91,232,255,.26);background:linear-gradient(145deg,rgba(33,116,183,.11),rgba(255,255,255,.018));box-shadow:inset 0 -2px 0 rgba(91,232,255,.42)} .collection-world-page{min-height:145px;margin-bottom:14px;padding:20px 22px;border-radius:14px;background:radial-gradient(circle at 88% 36%,color-mix(in srgb,var(--world-page-accent),transparent 89%),transparent 27%),linear-gradient(120deg,rgba(6,24,45,.92),rgba(4,14,27,.95))} .collection-world-page:after{opacity:.17} .collection-toolbar{gap:9px;padding:11px 12px;margin-bottom:22px;border-radius:13px;border-color:rgba(88,231,255,.075);background:rgba(4,15,30,.76);box-shadow:0 10px 28px rgba(0,0,0,.11)} .collection-toolbar .select-input,.collection-search-field input{height:40px;border-color:rgba(255,255,255,.075);border-radius:8px;background:#061427}.collection-count{min-height:40px;border-left-width:2px;background:rgba(255,211,70,.035)} #view-card-collection .card-collection-grid{gap:24px 17px}.collection-card-button:hover{transform:translateY(-6px) scale(1.01);filter:brightness(1.035)} .collection-card-caption{margin-top:8px;color:#8199ae}.collection-card-actions{gap:5px} /* Showcase / compare: more like a focused dossier, less like another panel stack. */ .collection-modal{background:rgba(1,5,12,.82);backdrop-filter:blur(18px)} .collection-modal-panel.showcase-mode,.collection-modal-panel.compare-mode{border-color:rgba(116,198,237,.105);border-radius:18px;background:linear-gradient(150deg,rgba(7,24,45,.98),rgba(3,11,22,.99));box-shadow:0 34px 100px rgba(0,0,0,.58)} .collection-showcase{gap:31px}.collection-showcase-card-stage{padding:45px 17px 17px;border-radius:15px;border-color:rgba(255,255,255,.055);background:radial-gradient(circle at 50% 34%,rgba(91,232,255,.065),transparent 35%),linear-gradient(160deg,rgba(14,42,72,.31),rgba(2,9,18,.45))} .collection-showcase-profile{gap:13px}.collection-showcase-profile>header{border-bottom-color:rgba(255,255,255,.055)} .collection-showcase-profile h2{letter-spacing:-.055em}.collection-showcase-identity>span{border-left-width:2px;background:rgba(255,255,255,.018)} .collection-showcase-section{padding:15px;border-radius:12px;border-color:rgba(255,255,255,.05);background:rgba(255,255,255,.014)} .collection-showcase-stat,.collection-showcase-kpis>span{background:rgba(0,0,0,.12)} .collection-card-achievement{border-color:rgba(255,255,255,.045);background:rgba(0,0,0,.1)} .collection-compare-table{border-color:rgba(255,255,255,.055);background:rgba(0,0,0,.1)} /* Footer follows the same quieter station shell. */ footer{border-top-color:rgba(114,195,232,.08)!important;color:#667f94!important} @media(max-width:1320px){ .topnav{gap:2px}.nav-button{padding:0 9px;font-size:.59rem}.brand{min-width:190px}.brand-text small{display:none} .reconnect-core-gates{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:1050px){ main{width:min(100% - 28px,1460px)} .reconnect-network-strip{grid-template-columns:repeat(4,minmax(0,1fr))} .reconnect-network-strip>span:nth-child(4){border-right:0} .reconnect-network-strip>span:nth-child(-n+4){border-bottom:1px solid rgba(255,255,255,.04)} .hub-world-portals{grid-template-columns:repeat(2,minmax(0,1fr))} .world-portal-hero{grid-template-columns:1fr minmax(270px,.65fr)} } @media(max-width:820px){ .topbar{height:auto;min-height:68px;padding:9px 12px}.topnav{border:0;background:transparent}.nav-button{height:36px} .section-heading{align-items:flex-start;padding-left:13px}.section-heading>*:last-child:not(div){align-self:flex-start} .reconnect-live-grid{gap:11px}.reconnect-widget{grid-column:span 12!important} .hub-world-portals{grid-template-columns:1fr} .reconnect-core-gates{grid-template-columns:1fr}.reconnect-core-gates .hub-world-gate,.reconnect-core-gates .hub-world-gate.collection{min-height:190px} .world-portal-hero{grid-template-columns:1fr;padding:24px}.world-portal-hero-visual{min-height:290px}.world-portal-hero-stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ main{width:calc(100% - 18px)}.view{padding-top:28px;padding-bottom:65px} .topbar{box-shadow:0 5px 22px rgba(0,0,0,.22)} .reconnect-network-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.reconnect-network-strip>span:nth-child(even){border-right:0}.reconnect-network-strip>span:nth-child(-n+6){border-bottom:1px solid rgba(255,255,255,.04)} .section-heading{margin-top:37px}.section-heading h2{font-size:1.35rem} .collection-album-summary{gap:1px}.collection-world-tabs{padding:5px}.collection-world-tab{min-height:66px} .collection-modal-panel.showcase-mode,.collection-modal-panel.compare-mode{border-radius:13px} } /* 0.6E · World Atmosphere Pass ------------------------------------------- */ .portal-sonic{--portal-scene:url("../assets/ui/worlds/sonic-apotos.webp");--portal-scene-position:center center} .portal-cars{--portal-scene:url("../assets/ui/worlds/cars-radiator-springs.webp");--portal-scene-position:center center} .portal-zootopia{--portal-scene:url("../assets/ui/worlds/zootopia-city.webp");--portal-scene-position:center center} .portal-souls{--portal-scene:url("../assets/ui/worlds/souls-firelink.webp");--portal-scene-position:center center} .portal-sao{--portal-scene:url("../assets/ui/worlds/sao-aincrad.webp");--portal-scene-position:center center} .portal-spongebob{--portal-scene:url("../assets/ui/worlds/spongebob-bikini-bottom.webp");--portal-scene-position:center center} .hub-world-portal{isolation:isolate} .hub-world-portal>*{position:relative;z-index:2} .hub-world-portal::before{ background: linear-gradient(180deg,rgba(5,12,23,.16) 0%,rgba(5,12,23,.28) 25%,rgba(5,12,23,.82) 100%), linear-gradient(120deg,color-mix(in srgb,var(--portal2),transparent 94%),transparent 50%), radial-gradient(circle at 84% 12%,color-mix(in srgb,var(--portal),transparent 82%),transparent 28%), var(--portal-scene); background-size:auto,auto,auto,cover; background-position:center,center,center,var(--portal-scene-position,center); opacity:1; filter:saturate(1.06) brightness(.96); } .portal-number,.portal-meta em,.hub-world-portal>strong{backdrop-filter:blur(7px)} .portal-number{display:inline-flex;width:max-content;padding:4px 8px;border:1px solid rgba(255,255,255,.065);border-radius:999px;background:rgba(4,12,24,.42)} .portal-copy{min-height:118px} .portal-copy b{text-shadow:0 10px 24px rgba(0,0,0,.48)} .portal-copy small{text-shadow:0 2px 8px rgba(0,0,0,.45)} .portal-progress{background:rgba(5,12,24,.38)} .portal-meta em,.hub-world-portal>strong{background:rgba(4,12,24,.32)} body[data-portal-world="sonic"]{--portal-page:#5be9ff;--portal-page-2:#315cff;--portal-page-scene:url("../assets/ui/worlds/sonic-apotos.webp");--portal-page-scene-position:center center} body[data-portal-world="cars"]{--portal-page:#ff4c5a;--portal-page-2:#ffad37;--portal-page-scene:url("../assets/ui/worlds/cars-radiator-springs.webp");--portal-page-scene-position:center center} body[data-portal-world="zootopia"]{--portal-page:#8ea3ff;--portal-page-2:#55e1cf;--portal-page-scene:url("../assets/ui/worlds/zootopia-city.webp");--portal-page-scene-position:center center} body[data-portal-world="souls"]{--portal-page:#ff7938;--portal-page-2:#d4a855;--portal-page-scene:url("../assets/ui/worlds/souls-firelink.webp");--portal-page-scene-position:center center} body[data-portal-world="sao"]{--portal-page:#6bdfff;--portal-page-2:#d4f8ff;--portal-page-scene:url("../assets/ui/worlds/sao-aincrad.webp");--portal-page-scene-position:center center} body[data-portal-world="spongebob"]{--portal-page:#ffe45c;--portal-page-2:#54dce7;--portal-page-scene:url("../assets/ui/worlds/spongebob-bikini-bottom.webp");--portal-page-scene-position:center center} body[data-world-theme="portal"] .app-shell{ background-image: linear-gradient(180deg,rgba(3,10,19,.84) 0%,rgba(3,10,19,.68) 26%,rgba(3,10,19,.82) 100%), radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--portal-page),transparent 92%),transparent 32%), var(--portal-page-scene), linear-gradient(#061426,#061426); background-size:auto,auto,cover,auto; background-position:center,center,var(--portal-page-scene-position,center),center; background-attachment:fixed,fixed,fixed,scroll; } .world-portal-hero{ --portal-scene:none; --portal-scene-position:center center; --portal-signature:none; --portal-signature-width:0px; --portal-signature-height:0px; --portal-signature-opacity:.95; --portal-signature-rotate:0deg; isolation:isolate; overflow:hidden; } .world-portal-hero::before{ opacity:1; background: linear-gradient(90deg,rgba(3,9,18,.88) 0%,rgba(3,9,18,.74) 34%,rgba(3,9,18,.42) 62%,rgba(3,9,18,.70) 100%), linear-gradient(180deg,color-mix(in srgb,var(--portal2),transparent 94%),transparent 52%), radial-gradient(circle at 83% 48%,color-mix(in srgb,var(--portal),transparent 80%),transparent 27%), var(--portal-scene); background-size:auto,auto,auto,cover; background-position:center,center,center,var(--portal-scene-position,center); filter:saturate(1.05) contrast(1.03); } .world-portal-hero-copy,.world-portal-hero-visual{position:relative;z-index:2} .world-portal-hero-visual{isolation:isolate} .world-portal-hero-visual::after{ content:""; position:absolute; right:clamp(8px,1.4vw,18px); bottom:12px; width:var(--portal-signature-width); height:var(--portal-signature-height); background-image:var(--portal-signature); background-repeat:no-repeat; background-position:center; background-size:contain; opacity:var(--portal-signature-opacity); filter:drop-shadow(0 18px 26px rgba(0,0,0,.46)); transform:rotate(var(--portal-signature-rotate)); z-index:2; pointer-events:none; } .world-portal-hero-copy>p:not(.eyebrow),.world-portal-hero-copy h2{text-shadow:0 2px 18px rgba(0,0,0,.34)} .world-portal-hero-stats>span{backdrop-filter:blur(6px);background:rgba(0,0,0,.24)} .world-portal-section,.world-portal-stat-strip,.world-portal-track,.world-hopper-grid article,.world-portal-achievement,.world-portal-card-tile{backdrop-filter:blur(8px)} .world-portal-section{background:linear-gradient(155deg,rgba(6,22,42,.72),rgba(4,14,28,.82))} .world-portal-stat-strip{background:rgba(4,15,30,.64)} .world-portal-hero.portal-sonic{--portal:#63e9ff;--portal2:#3264ff;--portal-scene:url("../assets/ui/worlds/sonic-apotos.webp");--portal-scene-position:center center;--portal-signature:url("../assets/ui/worlds/sonic-ring.webp");--portal-signature-width:112px;--portal-signature-height:112px;--portal-signature-rotate:-10deg} .world-portal-hero.portal-cars{--portal:#ff4d5a;--portal2:#ff9f2e;--portal-scene:url("../assets/ui/worlds/cars-radiator-springs.webp");--portal-scene-position:center center;--portal-signature:url("../assets/ui/worlds/cars-piston-cup.webp");--portal-signature-width:118px;--portal-signature-height:128px;--portal-signature-rotate:-4deg} .world-portal-hero.portal-zootopia{--portal:#8ea4ff;--portal2:#4fcdbd;--portal-scene:url("../assets/ui/worlds/zootopia-city.webp");--portal-scene-position:center center;--portal-signature:url("../assets/ui/worlds/zootopia-nick-judy.webp");--portal-signature-width:180px;--portal-signature-height:102px;--portal-signature-rotate:-3deg} .world-portal-hero.portal-souls{--portal:#ff7a35;--portal2:#9a421f;--portal-scene:url("../assets/ui/worlds/souls-firelink.webp");--portal-scene-position:center center;--portal-signature:url("../assets/ui/worlds/souls-estus.webp");--portal-signature-width:94px;--portal-signature-height:94px;--portal-signature-rotate:8deg} .world-portal-hero.portal-sao{--portal:#68dfff;--portal2:#277c9d;--portal-scene:url("../assets/ui/worlds/sao-aincrad.webp");--portal-scene-position:center center} .world-portal-hero.portal-spongebob{--portal:#ffe45b;--portal2:#2baeb9;--portal-scene:url("../assets/ui/worlds/spongebob-bikini-bottom.webp");--portal-scene-position:center center} @media(max-width:820px){ .world-portal-hero::before{background: linear-gradient(180deg,rgba(3,9,18,.72) 0%,rgba(3,9,18,.54) 34%,rgba(3,9,18,.88) 100%), linear-gradient(180deg,color-mix(in srgb,var(--portal2),transparent 95%),transparent 52%), radial-gradient(circle at 83% 48%,color-mix(in srgb,var(--portal),transparent 82%),transparent 27%), var(--portal-scene)} .world-portal-hero-visual::after{right:4px;bottom:2px;transform:scale(.9) rotate(var(--portal-signature-rotate))} } @media(max-width:620px){ .portal-number{padding:3px 7px} .hub-world-portal::before{background: linear-gradient(180deg,rgba(5,12,23,.18) 0%,rgba(5,12,23,.24) 18%,rgba(5,12,23,.84) 100%), linear-gradient(120deg,color-mix(in srgb,var(--portal2),transparent 95%),transparent 50%), radial-gradient(circle at 84% 12%,color-mix(in srgb,var(--portal),transparent 84%),transparent 28%), var(--portal-scene)} } /* 0.6F · Career Core Rules Update --------------------------------------- */ @media(min-width:1251px){ .career-transfer-offers{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px} .career-transfer-offer{grid-template-columns:54px minmax(0,1fr) auto;gap:8px;padding:9px} .career-transfer-offer img{width:54px;height:54px} .career-transfer-offer strong{font-size:1rem} } @media(min-width:901px) and (max-width:1250px){ .career-transfer-offers{grid-template-columns:repeat(3,minmax(0,1fr))} } .career-calendar-event.relegation{border-color:rgba(255,177,61,.26);background:linear-gradient(90deg,rgba(255,126,46,.06),rgba(255,196,82,.025))} .career-calendar-event.relegation>i{color:#ffb13d;text-shadow:0 0 16px rgba(255,177,61,.35)} /* 0.6G · Tab Atmosphere Pass -------------------------------------------- */ body[data-world-theme="career"]{--shell-accent:#73e69b;--shell-accent-2:#f4f7f4;--tab-scene:url("../assets/ui/tabs/career-stadium.webp");--tab-scene-position:center 52%;--tab-overlay:rgba(3,13,13,.73);--tab-glow:rgba(76,210,122,.18)} body[data-world-theme="collection"]{--shell-accent:#ffd16b;--shell-accent-2:#6ce7ff;--tab-scene:url("../assets/ui/tabs/collection-library.webp");--tab-scene-position:center 42%;--tab-overlay:rgba(10,10,17,.70);--tab-glow:rgba(255,190,83,.16)} body[data-world-theme="arcade"]{--shell-accent:#68edff;--shell-accent-2:#ffd653;--tab-scene:url("../assets/ui/tabs/arcade-casino.webp");--tab-scene-position:center 48%;--tab-overlay:rgba(2,8,20,.70);--tab-glow:rgba(77,218,255,.19)} body[data-world-theme="music"]{--shell-accent:#ffbf50;--shell-accent-2:#8c7bff;--tab-scene:url("../assets/ui/tabs/jukebox-band.webp");--tab-scene-position:center 40%;--tab-overlay:rgba(6,7,18,.75);--tab-glow:rgba(255,177,64,.16)} body[data-world-theme="market"]{--shell-accent:#62bfff;--shell-accent-2:#79ff9b;--tab-scene:url("../assets/ui/tabs/market-exchange.webp");--tab-scene-position:center top;--tab-overlay:rgba(2,11,28,.65);--tab-glow:rgba(52,128,255,.19)} body[data-world-theme="achievements"]{--shell-accent:#ffd15c;--shell-accent-2:#ff675e;--tab-scene:url("../assets/ui/tabs/achievements-piston.webp");--tab-scene-position:center 40%;--tab-overlay:rgba(18,8,8,.71);--tab-glow:rgba(255,202,67,.18)} body[data-world-theme="profile"]{--shell-accent:#56e6ff;--shell-accent-2:#ffcf48;--tab-scene:url("../assets/ui/tabs/profile-colorful-mall.webp");--tab-scene-position:center 48%;--tab-overlay:rgba(3,11,25,.65);--tab-glow:rgba(63,218,255,.17)} body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"]){ background-image: linear-gradient(var(--tab-overlay),var(--tab-overlay)), radial-gradient(circle at 82% 12%,var(--tab-glow),transparent 31%), linear-gradient(180deg,rgba(2,7,15,.04),rgba(2,7,15,.34) 70%,rgba(2,7,15,.62)), var(--tab-scene), linear-gradient(155deg,#020711,#061224 48%,#030914); background-size:auto,auto,auto,cover,auto; background-position:center,center,center,var(--tab-scene-position,center),center; background-repeat:no-repeat; background-attachment:fixed; } body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"])::before{ opacity:.075; background-image: linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:78px 78px; mask-image:linear-gradient(to bottom,black 0 44%,transparent 94%); } body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"])::after{ opacity:.16; animation:none; background: linear-gradient(112deg,transparent 0 61%,color-mix(in srgb,var(--shell-accent),transparent 89%) 61.2% 61.45%,transparent 61.8%), radial-gradient(ellipse at 88% 28%,color-mix(in srgb,var(--shell-accent-2),transparent 91%),transparent 19%); } body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"]) .topbar{ background:linear-gradient(90deg,rgba(3,10,21,.93),rgba(6,19,36,.88) 48%,rgba(3,10,21,.93)); border-bottom-color:color-mix(in srgb,var(--shell-accent),transparent 78%); backdrop-filter:blur(24px) saturate(126%); } body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"]) .panel{ background:linear-gradient(155deg,rgba(6,20,39,.78),rgba(4,13,27,.86)); border-color:color-mix(in srgb,var(--shell-accent),transparent 87%); backdrop-filter:blur(12px) saturate(110%); } /* Career Core · stadium / matchday atmosphere */ body[data-world-theme="career"] .career-view .panel{background:linear-gradient(155deg,rgba(7,25,29,.79),rgba(4,15,20,.88))} body[data-world-theme="career"] .career-view .game-header{background:linear-gradient(90deg,rgba(4,22,21,.82),rgba(5,15,21,.72));backdrop-filter:blur(10px)} body[data-world-theme="career"] .career-view .career-season-shell, body[data-world-theme="career"] .career-view .career-start-shell{position:relative} /* Collection · warm archive / library */ body[data-world-theme="collection"] #view-card-collection .collection-game-header{background:linear-gradient(90deg,rgba(46,29,15,.66),rgba(6,17,31,.78) 58%,rgba(4,12,24,.82))} body[data-world-theme="collection"] #view-card-collection .collection-album-hero{background:radial-gradient(circle at 84% 34%,rgba(255,203,93,.11),transparent 27%),linear-gradient(125deg,rgba(44,25,13,.72),rgba(8,24,44,.80) 62%,rgba(4,11,22,.87))} body[data-world-theme="collection"] #view-card-collection .collection-world-page{background:radial-gradient(circle at 88% 36%,color-mix(in srgb,var(--world-page-accent),transparent 89%),transparent 27%),linear-gradient(120deg,rgba(25,18,13,.72),rgba(5,18,33,.86))} /* Arcade · bright casino / pinball energy */ body[data-world-theme="arcade"] #view-arcade .game-card, body[data-world-theme="arcade"] #view-arcade .panel{background:linear-gradient(155deg,rgba(7,24,50,.74),rgba(4,12,28,.86))} body[data-world-theme="arcade"] #view-arcade .game-card:hover{border-color:color-mix(in srgb,var(--shell-accent),transparent 58%);box-shadow:0 24px 60px rgba(0,0,0,.36),0 0 28px color-mix(in srgb,var(--shell-accent),transparent 91%)} /* Jukebox · stage image remains visible behind the music terminal. */ body[data-world-theme="music"] #view-jukebox .music-hero, body[data-world-theme="music"] #view-jukebox .panel{background:linear-gradient(155deg,rgba(20,14,33,.77),rgba(5,10,24,.87))} /* Market Clash · isolated from Penalty Rush; keeps its green exchange UI over the cleaned blue market art. */ body[data-world-theme="market"] #view-market-clash{ --market-green:#78ff97; --market-green-2:#18d96e; --market-gold:#ffd85e; --market-red:#ff667d; --market-ink:#07130f; --market-panel:rgba(8,26,20,.82); background: radial-gradient(circle at 18% 16%,rgba(33,255,131,.075),transparent 28rem), radial-gradient(circle at 88% 26%,rgba(255,216,94,.055),transparent 24rem), linear-gradient(180deg,rgba(4,16,12,.10),rgba(4,12,10,.45)); } body[data-world-theme="market"] #view-market-clash::before{opacity:.075} body[data-world-theme="market"] #view-market-clash .panel{background:linear-gradient(155deg,rgba(5,24,29,.79),rgba(4,15,25,.88))} /* Achievements · trophy / champion stage. */ body[data-world-theme="achievements"] #view-achievements .achievement-filters, body[data-world-theme="achievements"] #view-achievements .achievement-card{backdrop-filter:blur(11px)} body[data-world-theme="achievements"] #view-achievements .achievement-card{background:linear-gradient(150deg,rgba(31,18,14,.70),rgba(5,14,28,.86))} /* Profile · Colorful Mall as the personal Reconnect lounge. */ body[data-world-theme="profile"] #view-profile .profile-hero, body[data-world-theme="profile"] #view-profile .panel{background:linear-gradient(155deg,rgba(7,25,43,.72),rgba(4,14,28,.84))} @media(max-width:820px){ body:is([data-world-theme="career"],[data-world-theme="collection"],[data-world-theme="arcade"],[data-world-theme="music"],[data-world-theme="market"],[data-world-theme="achievements"],[data-world-theme="profile"]){ background-size:auto,auto,auto,auto 100vh,auto; background-position:center,center,center,var(--tab-scene-position,center),center; } } @media(max-width:620px){ body[data-world-theme="market"]{--tab-scene-position:center top} body[data-world-theme="collection"]{--tab-scene-position:42% 35%} body[data-world-theme="profile"]{--tab-scene-position:center 35%} } /* 0.6K · Match Engine Immersion ----------------------------------------- */ .career-shootout-order{position:fixed;inset:0;z-index:520;display:grid;place-items:center;padding:24px}.career-shootout-order[hidden]{display:none!important}.career-shootout-order-backdrop{position:absolute;inset:0;background:rgba(1,5,12,.82);backdrop-filter:blur(14px)} .career-shootout-order-card{position:relative;width:min(980px,96vw);max-height:90vh;overflow:auto;padding:24px;border:1px solid rgba(102,220,255,.22);border-radius:18px;background:linear-gradient(150deg,rgba(7,27,50,.98),rgba(3,11,22,.99));box-shadow:0 34px 100px rgba(0,0,0,.58)} .career-shootout-order-head{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:start}.career-shootout-order-head>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(91,232,255,.2);border-radius:13px;background:rgba(91,232,255,.07);font-size:1.35rem}.career-shootout-order-head h2{margin:3px 0 5px;font:1000 clamp(1.5rem,4vw,2.6rem)/.95 var(--display-font);font-style:italic}.career-shootout-order-head p:last-child{margin:0;color:#8ea7ba;font-size:.7rem} .career-shootout-order-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 0 14px}.career-shootout-order-slot{min-height:82px;display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;padding:9px;border:1px dashed rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.018)}.career-shootout-order-slot.filled{border-style:solid;border-color:rgba(91,232,255,.2);background:rgba(91,232,255,.035)}.career-shootout-order-slot>span{font:1000 1rem var(--display-font);color:#5be8ff}.career-shootout-order-slot img{width:36px;height:48px;object-fit:contain;float:left;margin-right:7px}.career-shootout-order-slot b{display:block;font-size:.58rem}.career-shootout-order-slot small{color:#7890a4;font-size:.48rem} .career-shootout-order-players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.career-shootout-player{display:grid;grid-template-columns:46px 1fr;gap:8px;align-items:center;padding:8px;border:1px solid rgba(255,255,255,.065);border-radius:10px;color:white;background:rgba(255,255,255,.018);cursor:pointer;text-align:left}.career-shootout-player:hover{border-color:rgba(91,232,255,.25);background:rgba(91,232,255,.04)}.career-shootout-player.selected{border-color:rgba(255,211,83,.32);box-shadow:inset 0 0 0 1px rgba(255,211,83,.08)}.career-shootout-player:disabled{opacity:.28;cursor:not-allowed}.career-shootout-player img{width:44px;height:58px;object-fit:contain}.career-shootout-player span{display:grid;gap:2px}.career-shootout-player b{font-size:.57rem}.career-shootout-player small{color:#7d95a9;font-size:.48rem}.career-shootout-order-confirm{width:100%;margin-top:14px} .career-score-center.is-extra-time span{color:#ffd464;text-shadow:0 0 18px rgba(255,203,70,.3)}.career-score-center.is-shootout span{color:#ff7d7d;text-shadow:0 0 18px rgba(255,80,80,.28)} .career-feed-event.shootout-player,.career-feed-event.shootout-enemy,.career-feed-event.shootout-start{border-left-color:#ffd45a!important;background:rgba(90,65,10,.08)!important}.career-feed-event.extra-halftime{border-left-color:#75dcff!important} @media(max-width:820px){.career-shootout-order-slots{grid-template-columns:repeat(2,1fr)}.career-shootout-order-players{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.career-shootout-order{padding:10px}.career-shootout-order-card{padding:16px}.career-shootout-order-players{grid-template-columns:1fr}.career-shootout-order-slots{grid-template-columns:1fr}} /* ========================================================================== */ /* 0.6L · CARD DISPLAY NORMALIZATION · LIGHTNING SIZE LOCK */ /* Display-only normalization. Original card PNG files remain untouched. */ /* ========================================================================== */ /* Lightning McQueen is the visual reference: 1024×1536 = 2:3. The collection button owns a fixed 2:3 stage so image intrinsic ratios can no longer push rows/captions up or down. Final-card images are height-locked to that stage and keep their native aspect ratio (no stretching). */ #view-card-collection .card-collection-grid{ column-gap:44px; row-gap:26px; align-items:start; overflow:visible; } #view-card-collection .collection-card-item{ position:relative; min-width:0; overflow:visible; z-index:1; } #view-card-collection .collection-card-item:hover, #view-card-collection .collection-card-item:focus-within{ z-index:12; } #view-card-collection .collection-card-button{ position:relative; display:block; width:100%; aspect-ratio:2 / 3; height:auto; min-height:0; overflow:visible; contain:layout; } /* Remove the final image from intrinsic layout sizing entirely. */ #view-card-collection .collection-card-button .cr-final-card{ position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; overflow:visible; pointer-events:none; } /* Height = Lightning height. Width follows the source file naturally. This is what equalises SAO / Sonic / Cars / Zoomania / Bundesliga without warping any artwork. Wider cards may extend a few percent outside the stage. */ #view-card-collection .collection-card-button .cr-final-card-image{ position:absolute; left:50%; top:50%; display:block; width:auto; height:100%; max-width:none; max-height:none; object-fit:unset; object-position:center; transform:translate(-50%,-50%); transform-origin:center; } /* Buttons and badges now use the fixed Lightning stage as their anchor. */ #view-card-collection .collection-card-badges{top:5.2%;left:4px} #view-card-collection .collection-card-actions{top:5.4%;right:-3px} #view-card-collection .collection-card-caption{margin-top:9px} /* Keep the compare/favorite hover from clipping a height-locked card. */ #view-card-collection .collection-card-button:hover{ transform:translateY(-6px) scale(1.01); } @media(max-width:1180px){ #view-card-collection .card-collection-grid{column-gap:42px;row-gap:24px} } @media(max-width:860px){ #view-card-collection .card-collection-grid{column-gap:48px;row-gap:21px} } @media(max-width:620px){ /* A tiny safety reduction prevents wider SAO canvases touching screen edges. */ #view-card-collection .collection-card-button .cr-final-card-image{height:94%} #view-card-collection .card-collection-grid{column-gap:20px;row-gap:17px} #view-card-collection .collection-card-actions{top:5%;right:-2px} } /* 0.6M · Free-position squad management -------------------------------- */ #view-career-core .career-squad-slot.off-position{filter:none} #view-career-core .career-squad-slot.off-position::after{ content:"⚠ OOP";position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-7deg); padding:5px 8px;border:1px solid rgba(255,177,82,.8);border-radius:7px;background:rgba(58,28,3,.91);color:#ffd19d; font:1000 .48rem/1 var(--display-font);letter-spacing:.07em;box-shadow:0 5px 20px rgba(0,0,0,.5) } /* ========================================================================== */ /* 0.6N · SONIC UNLEASHED VISUAL REBIRTH I */ /* Global HUD language only. Existing tab/world scene artwork stays intact. */ /* ========================================================================== */ :root{ --unleashed-lime:#a8ff16; --unleashed-green:#5bc900; --unleashed-green-deep:#173d09; --unleashed-yellow:#ffc400; --unleashed-gold:#ffdf45; --unleashed-ink:#020703; --unleashed-panel:rgba(3,10,7,.86); --unleashed-panel-strong:rgba(2,8,5,.95); --unleashed-line:rgba(155,255,24,.33); --unleashed-line-soft:rgba(155,255,24,.13); --unleashed-white:#f5f7ed; --unleashed-muted:#a6afa1; --display-font:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif; --hud-font:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif; --radius:4px; --line:var(--unleashed-line-soft); --cyan:var(--unleashed-lime); --yellow:var(--unleashed-yellow); --green:var(--unleashed-lime); --muted:var(--unleashed-muted); } html{background:#010402} body{ font-family:var(--hud-font); color:var(--unleashed-white); background-color:#010402; } body::before{ opacity:.18!important; background-image: repeating-linear-gradient(0deg,rgba(155,255,24,.045) 0 1px,transparent 1px 5px), linear-gradient(rgba(124,255,26,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(124,255,26,.035) 1px,transparent 1px)!important; background-size:auto,42px 42px,42px 42px!important; mask-image:linear-gradient(to bottom,black 0 70%,transparent 100%)!important; } body::after{ opacity:.12!important; background: linear-gradient(115deg,transparent 0 64%,rgba(174,255,20,.16) 64.05% 64.16%,transparent 64.25%), repeating-linear-gradient(90deg,transparent 0 108px,rgba(156,255,20,.055) 109px 110px,transparent 111px 220px)!important; transform:none!important; } button,select,input{font-family:var(--hud-font)} button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--unleashed-lime);outline-offset:3px} /* Two-tier Unleashed HUD top bar */ .topbar.unleashed-topbar{ position:sticky; top:0; z-index:300; height:auto; min-height:126px; display:grid; grid-template-columns:minmax(250px,.85fr) minmax(300px,1fr) auto; grid-template-areas:"brand build profile" "nav nav nav"; align-items:center; gap:8px 18px; padding:10px clamp(16px,2.5vw,42px) 0; background: repeating-linear-gradient(0deg,rgba(128,255,13,.025) 0 1px,transparent 1px 4px), linear-gradient(180deg,rgba(0,4,2,.97),rgba(2,10,5,.94)); border:0; border-bottom:1px solid rgba(166,255,22,.43); box-shadow:0 12px 38px rgba(0,0,0,.58),0 1px 0 rgba(195,255,35,.16); backdrop-filter:blur(22px) saturate(118%); } .topbar.unleashed-topbar::before{ content:""; position:absolute; left:0;right:0;bottom:48px;height:1px; background:linear-gradient(90deg,transparent,var(--unleashed-lime) 15%,rgba(152,255,21,.2) 75%,transparent); opacity:.55; } .topbar.unleashed-topbar::after{ content:""; position:absolute; left:clamp(16px,2.5vw,42px);right:clamp(16px,2.5vw,42px);bottom:2px;height:3px; background:linear-gradient(90deg,var(--unleashed-yellow) 0 8%,var(--unleashed-lime) 18% 62%,rgba(165,255,21,.08) 84%,transparent); clip-path:polygon(0 0,98% 0,100% 50%,98% 100%,0 100%,1% 50%); opacity:.7; } .brand{grid-area:brand;min-width:0;gap:13px} .brand-mark{ position:relative; width:48px;height:48px; border:2px solid var(--unleashed-lime); border-radius:50%; box-shadow:0 0 18px rgba(159,255,21,.18),inset 0 0 20px rgba(159,255,21,.08); transform:skew(-10deg) rotate(-10deg); background:radial-gradient(circle at 42% 48%,rgba(166,255,22,.1),transparent 52%); } .brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--unleashed-lime);filter:drop-shadow(0 0 5px rgba(166,255,22,.55))} .brand-mark::before{width:29px;height:2px;left:8px;top:21px;transform:rotate(-18deg)} .brand-mark::after{width:18px;height:2px;left:16px;top:28px;transform:rotate(18deg)} .brand-mark i{display:none} .brand-text b{ font:italic 900 clamp(1.1rem,1.55vw,1.55rem)/.9 var(--display-font); letter-spacing:.015em; color:#f5f5f1; text-shadow:2px 2px 0 rgba(0,0,0,.75); white-space:nowrap; } .brand-text b em{font-style:inherit;color:#fff} .brand-text small{margin-top:7px;color:var(--unleashed-lime);font-size:.57rem;font-weight:900;letter-spacing:.28em} .topbar-build-chip{ grid-area:build; justify-self:center; width:min(100%,470px); display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:15px; padding:9px 17px; border:1px solid rgba(164,255,20,.25); background:linear-gradient(90deg,rgba(82,145,0,.06),rgba(6,18,7,.54)); clip-path:polygon(4% 0,100% 0,96% 100%,0 100%); } .topbar-build-chip small{color:#a6afa1;font-size:.55rem;font-weight:900;letter-spacing:.12em} .topbar-build-chip b{color:var(--unleashed-yellow);font-size:.68rem;font-weight:900;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profile-strip{grid-area:profile;gap:5px;justify-self:end} .profile-name-button{ height:48px!important; border:1px solid rgba(166,255,22,.18)!important; border-radius:2px!important; background:rgba(2,9,5,.68)!important; clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); } .profile-avatar{width:32px!important;height:32px!important;border-radius:2px!important} .profile-name-button small,.ring-counter small,.legacy-counter small,.signal-chip small{display:block;color:#98a18e;font-size:.48rem;font-weight:900;letter-spacing:.1em;line-height:1.1} .profile-name-button b{font-size:.68rem;color:white} .ring-counter,.legacy-counter,.signal-chip{ min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid rgba(166,255,22,.18); border-radius:1px; background:rgba(2,9,5,.64); clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); } .ring-counter{min-width:105px;justify-content:flex-start} .ring-counter>span:last-child,.legacy-counter>span:last-child,.signal-chip>span:last-child{display:grid;gap:2px} .ring-counter strong,.legacy-counter strong,.signal-chip b{color:var(--unleashed-lime);font-size:.82rem;letter-spacing:.05em;white-space:nowrap} .legacy-counter{min-width:116px} .legacy-star{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,220,47,.5);border-radius:50%;color:var(--unleashed-yellow);font-size:1.25rem} .signal-chip{min-width:96px;color:inherit;font-size:inherit;letter-spacing:0} .signal-dot{width:9px;height:9px;background:var(--unleashed-lime);box-shadow:0 0 13px var(--unleashed-lime)} .mini-ring{width:25px;height:25px;border-width:4px;border-color:var(--unleashed-yellow);box-shadow:inset 0 0 0 1px #8a5a00,0 0 8px rgba(255,196,0,.3)} .icon-button{ width:45px;height:48px;border:1px solid rgba(166,255,22,.18);border-radius:1px;background:rgba(2,9,5,.68); clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); color:white; } .icon-button:hover{border-color:var(--unleashed-lime);background:rgba(130,255,16,.09);color:var(--unleashed-lime)} .topnav{ grid-area:nav; width:100%; height:48px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; border:1px solid rgba(164,255,20,.28); border-bottom:0; background:rgba(0,5,2,.73); overflow:hidden; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px); } .nav-button{ height:100%; min-width:0; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:8px; border-right:1px solid rgba(143,224,26,.13); color:#d8ddd1; font-size:.67rem; font-weight:850; letter-spacing:.035em; text-transform:uppercase; background:linear-gradient(120deg,transparent 0 88%,rgba(141,255,17,.045) 88%); } .nav-button span{color:#d4d9d1;font-size:.95rem;line-height:1} .nav-button:hover{color:white;background:rgba(156,255,20,.065)} .nav-button.active{ color:#111900; background:linear-gradient(105deg,var(--unleashed-yellow),#e1ff24 62%,var(--unleashed-lime)); box-shadow:0 0 22px rgba(197,255,28,.34),inset 0 -3px 0 rgba(40,80,0,.35); clip-path:polygon(11px 0,100% 0,calc(100% - 15px) 100%,0 100%); } .nav-button.active span{color:#122000} .nav-button.active::after{display:none} /* Global content / typography */ main{width:min(1580px,calc(100% - 34px));margin:0 auto} .view{padding-top:34px;padding-bottom:76px} h1,h2,.page-heading h1,.game-header h1,.collection-showcase-profile h2{ font-family:var(--display-font); font-style:italic; text-transform:uppercase; letter-spacing:.01em; } h1,.page-heading h1,.game-header h1{color:var(--unleashed-yellow);text-shadow:2px 3px 0 rgba(71,54,0,.65),0 0 18px rgba(255,196,0,.11)} h2{color:#fff} .eyebrow{ color:var(--unleashed-lime); font-size:.66rem; letter-spacing:.13em; font-weight:900; text-transform:uppercase; } .section-heading{ position:relative; align-items:center; margin:42px 0 16px; padding:8px 0 9px 22px; border-bottom:1px solid rgba(154,255,21,.3); } .section-heading::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--unleashed-lime);transform:skew(-25deg)} .section-heading::after{content:"";position:absolute;left:18px;bottom:-2px;width:210px;height:3px;background:linear-gradient(90deg,var(--unleashed-lime),transparent)} .section-heading h2{font-family:var(--display-font);font-style:italic;text-transform:uppercase;letter-spacing:.015em} .status-tag{ border-radius:1px; border-color:rgba(166,255,22,.31); color:var(--unleashed-lime); background:rgba(92,150,0,.07); clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); } /* Unleashed angular panel language */ .panel,.game-card,.world-portal-section,.collection-toolbar,.collection-album-summary,.collection-world-tabs,.collection-world-page, .career-season-shell,.career-start-shell,.career-hub-panel,.career-panel,.market-mode-card,.profile-panel{ border-radius:3px!important; } .panel{ position:relative; border:1px solid rgba(151,255,20,.2)!important; background: repeating-linear-gradient(0deg,rgba(153,255,20,.018) 0 1px,transparent 1px 4px), linear-gradient(150deg,rgba(3,13,8,.86),rgba(1,7,4,.92))!important; box-shadow:inset 0 0 0 1px rgba(127,195,22,.025),0 12px 30px rgba(0,0,0,.24)!important; backdrop-filter:blur(10px) saturate(105%)!important; } .panel::after{ content:""; position:absolute; pointer-events:none; inset:7px; border-top:1px solid rgba(160,255,21,.075); border-bottom:1px solid rgba(160,255,21,.035); clip-path:polygon(0 0,96% 0,100% 16%,100% 100%,4% 100%,0 84%); } .panel-heading{padding-bottom:9px;border-bottom:1px solid rgba(153,255,21,.12)} .panel-heading h2{font-family:var(--display-font);font-style:italic;text-transform:uppercase} /* Buttons: angled mission-select actions */ .primary-button,.secondary-button,.ghost-button,.back-button,.text-button,.reconnect-widget-action,.daily-claim-button{ border-radius:1px!important; text-transform:uppercase; letter-spacing:.055em; font-weight:900; } .primary-button,.unleashed-cta,.daily-claim-button{ border:1px solid var(--unleashed-yellow)!important; color:#fff9cb!important; background:linear-gradient(110deg,rgba(18,31,0,.93),rgba(4,12,3,.96) 48%,rgba(69,90,0,.55))!important; box-shadow:inset 0 0 18px rgba(218,255,23,.09),0 0 16px rgba(255,197,0,.09)!important; clip-path:polygon(10px 0,100% 0,calc(100% - 14px) 100%,0 100%); } .primary-button:hover:not(:disabled),.unleashed-cta:hover:not(:disabled),.daily-claim-button:hover:not(:disabled){ transform:translateY(-1px); color:#081000!important; background:linear-gradient(110deg,var(--unleashed-yellow),#dbff19 70%,var(--unleashed-lime))!important; box-shadow:0 0 24px rgba(195,255,22,.32)!important; } .secondary-button,.ghost-button,.back-button,.reconnect-widget-action{ border:1px solid rgba(160,255,22,.27)!important; color:#dce5d6!important; background:rgba(3,12,6,.66)!important; clip-path:polygon(8px 0,100% 0,calc(100% - 10px) 100%,0 100%); } .secondary-button:hover,.ghost-button:hover,.back-button:hover,.reconnect-widget-action:hover{ border-color:var(--unleashed-lime)!important; color:var(--unleashed-lime)!important; background:rgba(123,255,14,.07)!important; } .text-button{color:var(--unleashed-lime)!important} .select-input,input[type="search"],input[type="text"],input[type="number"],select{ border-radius:2px!important; border-color:rgba(156,255,22,.22)!important; background:rgba(1,9,4,.88)!important; color:#f2f5ed!important; } /* Reconnect Station: more mission-control, less web hero */ .reconnect-command-hero{ min-height:390px!important; grid-template-columns:1.05fr .95fr!important; gap:24px!important; padding:34px 28px!important; border:1px solid rgba(153,255,21,.18)!important; border-radius:2px!important; background: linear-gradient(90deg,rgba(1,7,4,.91) 0%,rgba(1,7,4,.72) 48%,rgba(1,6,4,.28) 100%), radial-gradient(circle at 70% 46%,rgba(128,255,18,.075),transparent 25%)!important; box-shadow:inset 0 0 0 7px rgba(132,220,17,.018),0 18px 40px rgba(0,0,0,.34)!important; overflow:hidden!important; } .reconnect-command-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(147,255,21,.023) 0 1px,transparent 1px 5px); } .reconnect-command-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:4px; background:linear-gradient(90deg,var(--unleashed-lime),rgba(151,255,20,.2) 42%,transparent 75%); } .reconnect-command-hero .hero-copy{padding-left:15px} .reconnect-command-hero .hero-kicker{color:var(--unleashed-lime)!important;font-weight:900;letter-spacing:.07em} .reconnect-command-hero h1{margin:6px 0 16px;line-height:.88} .reconnect-command-hero h1 span{display:block;color:var(--unleashed-yellow);font-size:.48em;letter-spacing:.025em} .reconnect-command-hero h1 strong{display:block;color:white;font:italic 900 clamp(3rem,6vw,6rem)/.88 var(--display-font);letter-spacing:.005em;text-shadow:3px 3px 0 rgba(0,0,0,.65)} .reconnect-command-hero .hero-copy>p:not(.eyebrow){color:#c0c9ba;font-size:.95rem;line-height:1.55} .hero-build-row{gap:8px} .version-badge,.hero-volume-badge{ border-radius:1px!important; border-color:rgba(156,255,22,.18)!important; color:#bdc8b6!important; background:rgba(2,10,5,.58)!important; } .unleashed-world-visual{min-height:320px!important;opacity:.96} .unleashed-world-visual .reconnect-world{filter:drop-shadow(0 0 28px rgba(104,183,255,.18))} .reconnect-live-signal{ border-radius:1px!important; border-color:rgba(156,255,22,.42)!important; background:rgba(2,11,5,.84)!important; color:var(--unleashed-lime)!important; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); } /* Network strip becomes Unleashed status rail */ .reconnect-network-strip{ margin-top:12px!important; border:1px solid rgba(156,255,22,.18)!important; border-radius:1px!important; background:rgba(1,8,4,.77)!important; box-shadow:none!important; } .reconnect-network-strip>span{border-color:rgba(156,255,22,.09)!important;background:transparent!important} .reconnect-network-strip>span:hover{background:rgba(131,255,16,.055)!important} .reconnect-network-strip b{font-size:.62rem!important;letter-spacing:.06em} .reconnect-network-strip small{color:#83907d!important} /* Live Feed HUD cards */ .reconnect-live-grid{gap:10px!important} .reconnect-widget{ border-radius:2px!important; border-color:rgba(156,255,22,.18)!important; background: repeating-linear-gradient(0deg,rgba(150,255,18,.018) 0 1px,transparent 1px 4px), rgba(2,10,6,.84)!important; box-shadow:none!important; overflow:hidden; } .reconnect-widget::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--unleashed-lime),transparent 75%);opacity:.7} .reconnect-widget-head{border-bottom:1px solid rgba(156,255,22,.1)!important} .reconnect-widget-head small{color:#b6c0af!important;letter-spacing:.1em} .reconnect-widget-head i{border-radius:1px!important;color:var(--unleashed-lime)!important;background:rgba(109,255,10,.05)!important;border-color:rgba(156,255,22,.18)!important} .reconnect-widget h3{font-family:var(--display-font);font-style:italic;text-transform:uppercase;letter-spacing:.02em} .reconnect-scoreline b,.reconnect-ring-total strong,.reconnect-legacy-main strong{color:var(--unleashed-lime)!important} .reconnect-progress,.reconnect-daily-progress>div{border-radius:0!important;background:rgba(153,255,21,.055)!important} .reconnect-progress i,.reconnect-daily-progress i{border-radius:0!important;background:linear-gradient(90deg,var(--unleashed-green),var(--unleashed-lime))!important;box-shadow:0 0 12px rgba(160,255,18,.25)} /* World portals: KEEP existing scenic artwork, change only HUD chrome. */ .hub-world-portals{gap:10px!important} .hub-world-portal{ min-height:270px!important; border-radius:2px!important; border:1px solid rgba(158,255,22,.21)!important; background-color:#020805!important; box-shadow:none!important; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); } .hub-world-portal::after{display:none!important} .hub-world-portal:hover{transform:translateY(-3px)!important;border-color:var(--unleashed-lime)!important;box-shadow:0 0 20px rgba(150,255,20,.12)!important} .portal-energy-ring{opacity:.18!important;border-color:var(--unleashed-lime)!important} .portal-number{border-radius:0!important;border-color:rgba(157,255,21,.18)!important;background:rgba(1,8,4,.62)!important;color:var(--unleashed-lime)!important} .portal-copy b{font-family:var(--display-font);font-style:italic;letter-spacing:.02em!important;text-shadow:2px 3px 0 rgba(0,0,0,.55)!important} .portal-copy small{color:#c0c7ba!important} .portal-progress{border-radius:0!important;background:rgba(0,0,0,.42)!important} .portal-progress i{border-radius:0!important;background:linear-gradient(90deg,var(--unleashed-green),var(--unleashed-lime))!important} .portal-meta em{border-radius:0!important;border-color:rgba(156,255,20,.13)!important;background:rgba(1,8,4,.6)!important;color:#b6c0af!important} .hub-world-portal>strong{color:var(--unleashed-lime)!important} /* Core destination gates */ .reconnect-core-gates{gap:10px!important} .reconnect-core-gates .hub-world-gate{ border-radius:2px!important; border:1px solid rgba(156,255,20,.19)!important; background: repeating-linear-gradient(0deg,rgba(156,255,21,.017) 0 1px,transparent 1px 4px), linear-gradient(145deg,rgba(3,12,7,.91),rgba(1,7,4,.94))!important; box-shadow:none!important; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); } .reconnect-core-gates .hub-world-gate:hover{border-color:var(--unleashed-lime)!important;transform:translateY(-3px)!important;box-shadow:0 0 22px rgba(153,255,20,.11)!important} .reconnect-core-gates .hub-world-gate small{color:var(--unleashed-lime)!important} .reconnect-core-gates .hub-world-gate h2{font-family:var(--display-font);font-style:italic;text-transform:uppercase} .reconnect-core-gates .hub-world-gate strong{color:var(--unleashed-yellow)!important} /* Page/game headers become mission-select bars */ .game-header,.collection-game-header,.world-portal-header{ min-height:82px!important; padding:12px 16px!important; border:1px solid rgba(156,255,21,.18)!important; border-left:3px solid var(--unleashed-lime)!important; border-radius:1px!important; background: repeating-linear-gradient(0deg,rgba(151,255,19,.018) 0 1px,transparent 1px 4px), linear-gradient(90deg,rgba(3,14,8,.88),rgba(1,7,4,.78))!important; box-shadow:none!important; } .game-header h1,.collection-game-header h1,.world-portal-header h1{color:var(--unleashed-yellow)!important;font-size:clamp(1.8rem,4vw,3.2rem)!important} .game-session-rings,.collection-chip,.world-portal-status{ border-radius:1px!important; border-color:rgba(156,255,21,.2)!important; background:rgba(2,10,5,.72)!important; color:var(--unleashed-lime)!important; } /* Collection chrome keeps card/world artwork untouched. */ .collection-album-hero,.collection-world-page,.collection-toolbar,.collection-album-summary,.collection-world-tabs{ border-color:rgba(156,255,20,.16)!important; border-radius:2px!important; } .collection-world-tab{border-radius:1px!important;background:rgba(2,9,5,.7)!important;border-color:rgba(156,255,20,.12)!important} .collection-world-tab.active{border-color:var(--unleashed-lime)!important;background:rgba(113,255,11,.07)!important;box-shadow:inset 0 -2px 0 var(--unleashed-lime)!important} .collection-count{border-radius:1px!important;color:var(--unleashed-yellow)!important;background:rgba(255,195,0,.045)!important} .collection-card-caption{color:#aeb8a8!important} .collection-card-button:hover{filter:brightness(1.04) drop-shadow(0 0 13px rgba(154,255,20,.09))!important} /* Arcade and generic selectable cards */ .game-card{ border-radius:2px!important; border-color:rgba(156,255,20,.16)!important; background-color:rgba(2,9,5,.88)!important; box-shadow:none!important; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); } .game-card:hover{border-color:var(--unleashed-lime)!important;box-shadow:0 0 24px rgba(155,255,19,.1)!important} .game-card .game-number{border-radius:1px!important;background:rgba(156,255,20,.075)!important;color:var(--unleashed-lime)!important} .game-card h3{font-family:var(--display-font);font-style:italic;text-transform:uppercase} .game-card .game-status{color:var(--unleashed-yellow)!important} /* Career Core keeps stadium art, receives only Unleashed interface chrome. */ body[data-world-theme="career"] .career-view .panel, body[data-world-theme="career"] .career-view .career-season-shell, body[data-world-theme="career"] .career-view .career-start-shell{ border-color:rgba(156,255,20,.17)!important; } .career-tab,.career-season-tab,.career-competition-tab,.career-world-tier-tab,.career-world-country-tab{ border-radius:1px!important; } .career-tab.active,.career-season-tab.active,.career-competition-tab.active,.career-world-tier-tab.active,.career-world-country-tab.active{ border-color:var(--unleashed-lime)!important; color:var(--unleashed-lime)!important; background:rgba(109,255,9,.06)!important; } .career-standing-row,.career-squad-row,.career-calendar-event,.career-news-card{ border-radius:1px!important; } .career-score-center strong,.career-scoreboard strong{font-family:var(--display-font);font-style:italic} /* World portal scene backgrounds remain exactly as 0.6E. */ .world-portal-hero{ border-radius:2px!important; border-color:rgba(156,255,20,.18)!important; box-shadow:0 18px 45px rgba(0,0,0,.28)!important; } .world-portal-hero-copy h2{font-family:var(--display-font)!important;color:var(--unleashed-yellow)!important;text-shadow:2px 3px 0 rgba(0,0,0,.65)!important} .world-portal-hero-stats>span{border-radius:1px!important;border-color:rgba(156,255,20,.14)!important;background:rgba(1,8,4,.58)!important} .world-portal-hero-stats b{color:var(--unleashed-lime)!important} .world-portal-stat-strip,.world-portal-section,.world-portal-card-tile,.world-portal-track,.world-hopper-grid article,.world-portal-achievement{border-radius:1px!important} .world-portal-stat-strip{border-color:rgba(156,255,20,.16)!important;background:rgba(1,8,4,.72)!important} .world-portal-section{border-color:rgba(156,255,20,.13)!important;background:rgba(1,8,4,.77)!important} .world-portal-card-tile,.world-portal-track,.world-hopper-grid article,.world-portal-achievement{border-color:rgba(156,255,20,.09)!important;background:rgba(2,9,5,.55)!important} /* Profile / achievements / music retain their photo backgrounds under the global HUD. */ .profile-hero,.music-hero,.achievement-summary,.achievement-card{border-radius:2px!important} .achievement-card{border-color:rgba(156,255,20,.13)!important} .achievement-card.unlocked{border-color:rgba(255,196,0,.26)!important} /* Modal / showcase follows the same dark HUD without altering card art. */ .collection-modal-panel.showcase-mode,.collection-modal-panel.compare-mode{ border-radius:2px!important; border-color:rgba(156,255,20,.22)!important; background:linear-gradient(150deg,rgba(2,10,5,.985),rgba(0,5,3,.99))!important; } .collection-showcase-section{border-radius:1px!important;border-color:rgba(156,255,20,.11)!important;background:rgba(3,12,7,.72)!important} .collection-showcase-profile h2{color:var(--unleashed-yellow)!important} /* Footer */ footer{border-top-color:rgba(156,255,20,.15)!important;color:#768172!important;background:rgba(1,6,3,.58)} /* Responsive */ @media(max-width:1380px){ .topbar.unleashed-topbar{grid-template-columns:minmax(210px,.65fr) minmax(260px,.9fr) auto;padding-inline:18px} .profile-name-button{display:none!important} .nav-button{font-size:.61rem;padding-inline:7px;gap:5px} .nav-button span{font-size:.8rem} } @media(max-width:1100px){ .topbar.unleashed-topbar{grid-template-columns:1fr auto;grid-template-areas:"brand profile" "build build" "nav nav";gap:6px;min-height:164px;padding-top:8px} .topbar-build-chip{width:100%;justify-self:stretch;clip-path:none;padding:5px 12px} .topbar.unleashed-topbar::before{bottom:48px} .topnav{grid-template-columns:repeat(4,1fr);height:auto;min-height:76px} .nav-button{min-height:38px;border-bottom:1px solid rgba(143,224,26,.09)} .topbar.unleashed-topbar::after{display:none} .reconnect-command-hero{grid-template-columns:1fr!important;min-height:0!important} .unleashed-world-visual{min-height:250px!important} } @media(max-width:760px){ .topbar.unleashed-topbar{position:relative;grid-template-columns:1fr;grid-template-areas:"brand" "profile" "build" "nav";padding:10px 10px 0} .brand{justify-self:center} .profile-strip{justify-self:stretch;display:grid;grid-template-columns:repeat(4,1fr)} .ring-counter,.legacy-counter,.signal-chip,.icon-button{min-width:0;width:auto;clip-path:none;justify-content:center} .profile-strip small{display:none} .topnav{grid-template-columns:repeat(2,1fr);clip-path:none} .nav-button.active{clip-path:none} main{width:calc(100% - 16px)} .view{padding-top:20px} .reconnect-command-hero{padding:22px 14px!important} .reconnect-command-hero .hero-copy{padding-left:0} .section-heading{padding-left:18px} } @media(max-width:480px){ .profile-strip{grid-template-columns:1fr 1fr}.signal-chip,.icon-button{display:none} .topbar-build-chip b{font-size:.57rem}.topbar-build-chip small{display:none} .brand-text small{letter-spacing:.16em} } /* ========================================================================== */ /* 0.7A · UNLEASHED UI RECONSTRUCTION */ /* Phase 1: global shell + Reconnect Station rebuilt around the approved */ /* Sonic-Unleashed-inspired concept. Existing world/tab artwork is retained. */ /* ========================================================================== */ :root{ --u7-lime:#a9ff12; --u7-green:#4da500; --u7-yellow:#ffc400; --u7-white:#f3f4ee; --u7-muted:#a9afa4; --u7-black:#010401; --u7-panel:rgba(2,8,4,.88); --u7-grid:rgba(138,255,20,.075); --u7-line:rgba(161,255,21,.42); } /* Global shell closer to the concept: flatter, wider and more like a game HUD. */ .topbar.unleashed-topbar.reconstruction-shell{ min-height:132px; grid-template-columns:minmax(330px,.95fr) minmax(310px,.9fr) auto; gap:8px 26px; padding:12px clamp(18px,2.5vw,46px) 0; background: repeating-linear-gradient(0deg,rgba(148,255,16,.018) 0 1px,transparent 1px 5px), linear-gradient(180deg,rgba(0,3,1,.995),rgba(1,7,3,.97)); border-bottom:1px solid rgba(170,255,20,.28); box-shadow:0 10px 34px rgba(0,0,0,.68),0 1px 0 rgba(178,255,30,.12); } .topbar.unleashed-topbar.reconstruction-shell::before{bottom:48px;opacity:.35} .topbar.unleashed-topbar.reconstruction-shell::after{height:2px;opacity:.86;background:linear-gradient(90deg,var(--u7-yellow) 0 10%,var(--u7-lime) 18% 84%,transparent)} .reconstruction-shell .brand{gap:16px;align-self:center} .reconstruction-shell .brand-mark{ width:76px;height:59px;border:0;border-radius:0;box-shadow:none;background:none;transform:none;overflow:visible; } .reconstruction-shell .brand-mark::before,.reconstruction-shell .brand-mark::after{display:none} .reconstruction-shell .brand-mark img{ width:100%;height:100%;display:block;object-fit:contain; filter:drop-shadow(0 0 8px rgba(160,255,18,.24)); } .reconstruction-shell .brand-text b{ display:block;color:#f1f2ec;font:italic 900 clamp(1.45rem,2.05vw,2.15rem)/.88 var(--display-font); letter-spacing:.01em;text-shadow:2px 2px 0 #141414,0 0 2px #fff; } .reconstruction-shell .brand-text small{margin-top:8px;font-size:.6rem;letter-spacing:.31em;color:var(--u7-lime)} .reconstruction-shell .topbar-build-chip{ height:52px;width:min(100%,430px);padding:8px 18px;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%); background:linear-gradient(90deg,rgba(3,12,5,.9),rgba(14,28,8,.63));border-color:rgba(159,255,20,.22); } .reconstruction-shell .topbar-build-chip small{font-size:.52rem;color:#a6ada1} .reconstruction-shell .topbar-build-chip b{font-size:.68rem;color:var(--u7-yellow)} .reconstruction-shell .profile-strip{gap:0;border:1px solid rgba(166,255,22,.19);background:rgba(2,8,4,.72);clip-path:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%);padding:0 7px} .reconstruction-shell .ring-counter,.reconstruction-shell .legacy-counter,.reconstruction-shell .signal-chip,.reconstruction-shell .icon-button{ min-height:52px;border:0!important;border-right:1px solid rgba(166,255,22,.14)!important;background:transparent!important;clip-path:none!important; } .reconstruction-shell .icon-button{border-right:0!important;width:52px;color:#fff} .reconstruction-shell .ring-counter strong,.reconstruction-shell .legacy-counter strong,.reconstruction-shell .signal-chip b{font-size:.88rem;color:var(--u7-lime)} .reconstruction-shell .mini-ring{width:29px;height:29px;border-width:5px} .reconstruction-shell .signal-bars{width:30px;height:30px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:5px;border:1px solid rgba(167,255,22,.24);border-radius:50%} .reconstruction-shell .signal-bars i{display:block;width:3px;background:var(--u7-lime);box-shadow:0 0 5px rgba(167,255,22,.42)} .reconstruction-shell .signal-bars i:nth-child(1){height:7px}.reconstruction-shell .signal-bars i:nth-child(2){height:12px}.reconstruction-shell .signal-bars i:nth-child(3){height:17px} .reconstruction-shell .topnav{ height:49px;grid-template-columns:repeat(7,minmax(0,1fr));border-color:rgba(166,255,22,.25);background:rgba(0,4,2,.91); clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px); } .reconstruction-shell .nav-button{font-size:.71rem;border-right:1px solid rgba(161,255,20,.12);background:linear-gradient(110deg,transparent 0 88%,rgba(133,255,14,.045) 88%);color:#e9ece4} .reconstruction-shell .nav-button span{font-size:1.04rem;color:#e0e4dd} .reconstruction-shell .nav-button.active{ color:var(--u7-yellow);background:linear-gradient(105deg,rgba(70,105,0,.24),rgba(7,15,3,.88) 72%);border:1px solid rgba(189,255,18,.7); box-shadow:inset 4px 0 0 var(--u7-yellow),0 0 20px rgba(167,255,18,.27),inset 0 -2px 0 var(--u7-lime); clip-path:polygon(13px 0,100% 0,calc(100% - 17px) 100%,0 100%); } .reconstruction-shell .nav-button.active span{color:var(--u7-yellow)} /* HOME: the mockup becomes the actual layout instead of a skin over old cards. */ body[data-world-theme="hub"]{background:#010401} body[data-world-theme="hub"]::before{opacity:.12!important} .unleashed-home-reconstruction{padding-top:0!important;padding-bottom:26px!important} .unleashed-home-reconstruction::before{display:none!important} .unleashed-home-stage{ position:relative;min-height:705px;margin-top:0;padding:34px 8px 14px;overflow:hidden;isolation:isolate; background: radial-gradient(circle at 49% 34%,rgba(25,77,40,.12),transparent 31%), linear-gradient(180deg,rgba(1,5,3,.14),rgba(1,4,2,.78) 78%,#010401 100%), repeating-linear-gradient(0deg,rgba(147,255,16,.018) 0 1px,transparent 1px 4px); } .unleashed-home-stage::before{ content:"";position:absolute;inset:0;z-index:-4;opacity:.65;pointer-events:none; background-image:radial-gradient(circle at 18% 20%,#fff 0 1px,transparent 1.2px),radial-gradient(circle at 73% 12%,#baf7ff 0 1px,transparent 1.3px),radial-gradient(circle at 87% 48%,#fff 0 1px,transparent 1.2px),radial-gradient(circle at 32% 64%,#d5ffe0 0 1px,transparent 1.2px),radial-gradient(circle at 58% 75%,#fff 0 1px,transparent 1.2px); background-size:190px 170px,270px 230px,220px 210px,250px 190px,300px 260px; } .unleashed-home-stage::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(1,5,3,.92) 0%,rgba(1,5,3,.18) 18%,transparent 42%,transparent 66%,rgba(1,5,3,.35) 82%,rgba(1,5,3,.85) 100%); } .unleashed-earth-backdrop{ position:absolute;z-index:-3;left:31%;top:-42px;width:65%;height:390px;opacity:.76;pointer-events:none; background:url("../assets/ui/unleashed/home-earth.png") center top/cover no-repeat; filter:saturate(1.02) contrast(1.06) brightness(.74); -webkit-mask-image:linear-gradient(to bottom,black 0 70%,transparent 100%);mask-image:linear-gradient(to bottom,black 0 70%,transparent 100%); } .unleashed-home-title{position:relative;z-index:2;margin:0 0 19px 34px;max-width:690px} .unleashed-home-title .eyebrow{display:none} .unleashed-home-title h1{margin:0;font:italic 900 clamp(2.25rem,4.35vw,4rem)/.88 var(--display-font);letter-spacing:.015em;color:var(--u7-yellow);text-shadow:3px 3px 0 rgba(66,48,0,.78),0 0 20px rgba(255,196,0,.13)} .unleashed-home-title>span{display:flex;align-items:center;gap:13px;margin-top:9px;color:var(--u7-lime);font-size:1.05rem;font-weight:900;letter-spacing:.08em} .unleashed-home-title>span::before{content:"";width:11px;height:8px;background:var(--u7-lime);transform:skew(-30deg)} .unleashed-home-title>span::after{content:"";width:210px;height:2px;background:linear-gradient(90deg,var(--u7-green),transparent)} .unleashed-home-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(270px,.75fr) minmax(500px,1.55fr) minmax(280px,.82fr);gap:14px;align-items:stretch} .unleashed-hud-panel,.unleashed-feature-world{ min-height:400px;position:relative;overflow:hidden;border:1px solid rgba(159,255,18,.48);background:rgba(1,8,4,.84); clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px); box-shadow:inset 0 0 0 1px rgba(150,255,17,.035),inset 0 0 28px rgba(66,137,0,.055); } .unleashed-hud-panel::before,.unleashed-feature-world::before{ content:"";position:absolute;inset:7px;pointer-events:none;border-top:1px solid rgba(171,255,21,.13);border-bottom:1px solid rgba(171,255,21,.08); background:repeating-linear-gradient(0deg,rgba(151,255,19,.022) 0 1px,transparent 1px 4px); } .unleashed-panel-title{position:relative;z-index:2;height:48px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(158,255,18,.23);color:#f0f1eb;font-size:1rem;font-weight:900;letter-spacing:.04em} .status-lines{position:relative;z-index:2;padding:8px 16px 5px} .status-line{display:grid;grid-template-columns:45px 1fr;gap:10px;align-items:center;min-height:51px;border-bottom:1px solid rgba(153,255,18,.13)} .status-line:last-child{border-bottom:0} .status-icon{display:grid;place-items:center;width:36px;height:36px;color:#eef1e8;font-size:1.15rem} .status-icon .reconnect-career-crest{width:33px;height:33px;margin:0;border:1px solid rgba(162,255,21,.2);background:rgba(1,7,3,.8);border-radius:50%} .status-icon .reconnect-career-crest img{width:100%;height:100%;object-fit:contain} .status-icon .reconnect-career-crest b{font-size:.52rem;color:#fff} .status-line>span:last-child{min-width:0;display:grid;gap:2px} .status-line small{color:var(--u7-lime);font-size:.56rem;font-weight:900;letter-spacing:.08em} .status-line b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f4ef;font-size:.78rem;font-weight:700;letter-spacing:.025em} .status-line b em{color:#c8cec2;font-size:.67rem;font-style:normal;font-weight:700} .status-line i{color:#7f8b7c;font-size:.49rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .status-line .mini-ring{width:29px;height:29px} .status-line .legacy-star{width:34px;height:34px} .unleashed-mini-action,.unleashed-more-worlds,.unleashed-strip-action{ border:1px solid rgba(177,255,19,.46);background:rgba(56,96,0,.08);color:var(--u7-lime);font-weight:900;letter-spacing:.055em;text-transform:uppercase;cursor:pointer; } .unleashed-mini-action{position:absolute;z-index:3;left:16px;right:16px;bottom:13px;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} .unleashed-mini-action:hover,.unleashed-more-worlds:hover,.unleashed-strip-action:hover{color:#111800;background:var(--u7-lime)} .unleashed-feature-world{background:#020704} .unleashed-feature-world::before{z-index:2;background:linear-gradient(90deg,transparent,rgba(1,5,3,.15)),repeating-linear-gradient(0deg,rgba(151,255,19,.018) 0 1px,transparent 1px 4px)} .feature-world-scene{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(0,3,2,.1),rgba(0,3,2,.25) 55%,rgba(0,3,2,.91) 100%),url("../assets/ui/worlds/sonic-apotos.webp") center/cover no-repeat;filter:saturate(1.03) brightness(.8)} .feature-world-character{position:absolute;z-index:1;left:3%;bottom:-7%;width:54%;height:103%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 25px rgba(0,0,0,.58))} .feature-world-copy{position:absolute;z-index:3;right:5%;top:13%;width:40%;display:grid;justify-items:start;text-align:left} .feature-world-copy>small{color:var(--u7-lime);font-size:.53rem;font-weight:900;letter-spacing:.13em} .feature-world-copy h2{margin:8px 0 22px;color:#f4f4f0;font:italic 900 clamp(2rem,3.25vw,3.35rem)/.88 var(--display-font);letter-spacing:.02em;text-shadow:3px 3px 0 rgba(0,0,0,.65)} .feature-world-copy>strong{color:#f1f1ec;font-size:1.26rem;font-weight:800;letter-spacing:.07em} .feature-world-copy>span{margin-top:4px;color:#c6cbbc;font-size:.67rem;letter-spacing:.06em} .feature-world-progress{width:100%;height:4px;margin-top:12px;background:rgba(144,255,17,.11)} .feature-world-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--u7-lime),#66d500);box-shadow:0 0 9px rgba(164,255,19,.45)} .unleashed-world-open{width:100%;height:48px;margin-top:32px;justify-content:center!important;gap:14px!important;color:var(--u7-yellow)!important;border-color:var(--u7-lime)!important;background:rgba(20,38,4,.72)!important;font-size:1rem!important;box-shadow:0 0 17px rgba(166,255,20,.1)!important} .unleashed-world-open:hover{background:var(--u7-lime)!important;color:#101600!important;box-shadow:0 0 25px rgba(166,255,20,.35)!important} .feature-world-corner{position:absolute;z-index:3;left:18px;bottom:15px;padding-left:14px;color:var(--u7-lime);font-size:.48rem;font-weight:900;letter-spacing:.12em} .feature-world-corner::before{content:"";position:absolute;left:0;top:3px;width:8px;height:8px;background:var(--u7-lime);box-shadow:12px 0 0 rgba(166,255,20,.5),24px 0 0 rgba(166,255,20,.25)} .worlds-panel{display:flex;flex-direction:column} .unleashed-world-list{position:relative;z-index:2;display:grid;gap:8px;padding:11px 12px 8px} .unleashed-world-row{--row-scene:none;position:relative;min-height:78px;display:grid;grid-template-columns:1fr 30px;align-items:center;overflow:hidden;padding:10px 12px;border:1px solid rgba(149,255,18,.22);color:white;background:#040a05;cursor:pointer;text-align:left;isolation:isolate} .unleashed-world-row::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(1,5,3,.96) 0 44%,rgba(1,5,3,.4) 73%,rgba(1,5,3,.12)),var(--row-scene) center/cover no-repeat;filter:saturate(.93) brightness(.8)} .unleashed-world-row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--u7-lime);opacity:.45} .unleashed-world-row.portal-cars{--row-scene:url("../assets/ui/worlds/cars-radiator-springs.webp")} .unleashed-world-row.portal-zootopia{--row-scene:url("../assets/ui/worlds/zootopia-city.webp")} .unleashed-world-row.portal-sao{--row-scene:url("../assets/ui/worlds/sao-aincrad.webp")} .unleashed-world-row:hover{border-color:rgba(181,255,22,.62);transform:translateX(2px)} .world-row-copy{display:grid;gap:4px;position:relative;z-index:2} .world-row-copy b{font-size:.82rem;letter-spacing:.035em;text-shadow:0 2px 8px #000} .world-row-copy small{color:var(--u7-lime);font-size:.62rem;font-weight:900;letter-spacing:.05em} .world-row-art{display:none}.world-row-arrow{justify-self:end;color:var(--u7-lime);font-size:1.3rem;font-weight:900;text-shadow:0 0 9px rgba(163,255,20,.35)} .unleashed-more-worlds{position:relative;z-index:2;height:42px;margin:auto 12px 12px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font-size:.67rem;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} .unleashed-home-footer-strip{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:13px} .unleashed-strip-cell{min-height:82px;display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 14px;border:1px solid rgba(153,255,18,.28);background:linear-gradient(90deg,rgba(2,11,5,.91),rgba(1,6,3,.8));clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)} .strip-icon{display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(162,255,20,.31);color:var(--u7-lime);font-size:1.15rem} .strip-copy{min-width:0;display:grid;gap:2px} .strip-copy small{color:var(--u7-lime);font-size:.52rem;font-weight:900;letter-spacing:.08em}.strip-copy small em{margin-left:6px;color:#6d8064;font-style:normal} .strip-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef0e9;font-size:.68rem}.strip-copy>span,.strip-copy>i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8b9687;font-size:.52rem;font-style:normal} .strip-progress{width:min(190px,100%);height:3px;margin-top:5px;background:rgba(156,255,20,.11)}.strip-progress i{display:block;height:100%;background:var(--u7-lime)} .strip-value{color:#d8e0d2;font-size:.62rem;white-space:nowrap} .unleashed-strip-action{min-width:104px;height:34px;padding:0 12px;font-size:.55rem;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)} .unleashed-strip-action.claim{color:var(--u7-yellow);border-color:var(--u7-yellow)} .unleashed-signal-summary{position:relative;z-index:2;margin-top:10px;text-align:right;color:#53604f;font-size:.48rem;font-weight:900;letter-spacing:.12em} /* Phase-1 global shell refinement for the other tabs: retain their imagery, but sharpen the HUD geometry to match HOME. */ body:not([data-world-theme="hub"]) .game-header, body:not([data-world-theme="hub"]) .page-heading{ border-radius:0!important;border-bottom:1px solid rgba(165,255,20,.34)!important;background-color:rgba(2,8,4,.66)!important; } body:not([data-world-theme="hub"]) .panel{border-color:rgba(153,255,18,.23)!important} body:not([data-world-theme="hub"]) .primary-button{background:rgba(51,92,0,.11)!important;border-color:rgba(175,255,20,.48)!important;color:var(--u7-lime)!important} body:not([data-world-theme="hub"]) .primary-button:hover{background:var(--u7-lime)!important;color:#111700!important} @media(max-width:1250px){ .topbar.unleashed-topbar.reconstruction-shell{grid-template-columns:minmax(270px,.8fr) minmax(260px,.75fr) auto;gap:7px 12px;padding-left:16px;padding-right:16px} .reconstruction-shell .brand-mark{width:62px;height:50px}.reconstruction-shell .brand-text b{font-size:1.45rem}.reconstruction-shell .brand-text small{font-size:.5rem} .reconstruction-shell .topbar-build-chip{width:100%}.reconstruction-shell .ring-counter{min-width:90px}.reconstruction-shell .legacy-counter{min-width:105px}.reconstruction-shell .signal-chip{min-width:85px} .unleashed-home-grid{grid-template-columns:260px minmax(430px,1.35fr) 280px}.feature-world-character{width:58%;left:-2%}.feature-world-copy{width:42%;right:4%} .unleashed-strip-cell{grid-template-columns:38px 1fr auto}.unleashed-strip-action{grid-column:3}.strip-value{display:none} } @media(max-width:980px){ .topbar.unleashed-topbar.reconstruction-shell{grid-template-columns:1fr auto;grid-template-areas:"brand profile" "build build" "nav nav nav";padding-top:8px} .reconstruction-shell .topbar-build-chip{grid-area:build;justify-self:stretch;height:36px}.topbar.unleashed-topbar.reconstruction-shell::before{display:none} .reconstruction-shell .topnav{grid-area:nav;overflow-x:auto;grid-template-columns:repeat(7,minmax(120px,1fr))} .unleashed-home-stage{padding-top:24px}.unleashed-earth-backdrop{left:20%;width:80%} .unleashed-home-grid{grid-template-columns:1fr 1fr}.unleashed-feature-world{grid-column:1/-1;grid-row:1;min-height:390px}.status-panel{grid-column:1}.worlds-panel{grid-column:2} .feature-world-character{width:45%;left:8%}.feature-world-copy{width:40%} .unleashed-home-footer-strip{grid-template-columns:1fr}.unleashed-strip-cell{min-height:72px} } @media(max-width:680px){ .topbar.unleashed-topbar.reconstruction-shell{grid-template-columns:1fr;grid-template-areas:"brand" "profile" "build" "nav";padding:8px 9px 0}.reconstruction-shell .brand{justify-self:center}.reconstruction-shell .profile-strip{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr 1fr 44px}.reconstruction-shell .signal-chip,.reconstruction-shell .legacy-counter,.reconstruction-shell .ring-counter{min-width:0;padding:5px 7px}.reconstruction-shell .topbar-build-chip{display:none} main{width:calc(100% - 12px)}.unleashed-home-stage{padding-left:0;padding-right:0}.unleashed-home-title{margin-left:12px}.unleashed-home-title h1{font-size:2.3rem}.unleashed-home-title>span{font-size:.78rem}.unleashed-home-title>span::after{width:100px} .unleashed-earth-backdrop{left:0;top:0;width:100%;opacity:.46}.unleashed-home-grid{grid-template-columns:1fr;gap:10px}.unleashed-feature-world,.status-panel,.worlds-panel{grid-column:1}.unleashed-feature-world{grid-row:auto;min-height:355px}.status-panel,.worlds-panel{min-height:365px} .feature-world-character{width:61%;height:92%;left:-7%;bottom:-4%}.feature-world-copy{right:4%;width:48%;top:14%}.feature-world-copy h2{font-size:2.25rem}.feature-world-copy>strong{font-size:1.05rem}.unleashed-world-open{margin-top:22px;height:42px} .unleashed-strip-cell{grid-template-columns:38px 1fr}.unleashed-strip-action{grid-column:2;justify-self:start;min-width:94px}.strip-value{display:none}.unleashed-signal-summary{text-align:center} } /* ======================================================================== 0.7B · CAREER FIXES & UI POLISH ======================================================================== */ /* Desktop-wide 110% UI scale. This intentionally behaves like browser zoom: larger/closer UI without touching any source images or game data. */ @media (min-width:1100px){ body{zoom:1.10} } /* Fine-quality pass: calmer surfaces, crisper typography and more deliberate separation between content and the Unleashed HUD frame. */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} body{letter-spacing:.005em} .panel,.unleashed-hud-panel,.unleashed-feature-world,.career-season-shell,.career-panel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 0 0 1px rgba(164,255,20,.018),0 12px 34px rgba(0,0,0,.14) } .panel{backdrop-filter:blur(9px) saturate(1.03)} .section-heading h1,.section-heading h2,.page-heading h1,.game-header h1{letter-spacing:.018em} .eyebrow{letter-spacing:.135em!important} .secondary-button,.ghost-button,.primary-button,.text-button{letter-spacing:.055em} /* HOME · all five non-Sonic worlds can now expand cleanly. */ .worlds-panel{align-self:start;min-height:400px;height:auto} .unleashed-world-list{transition:max-height .24s ease} .unleashed-world-row.portal-souls{--row-scene:url("../assets/ui/worlds/souls-firelink.webp")} .unleashed-world-row.portal-spongebob{--row-scene:url("../assets/ui/worlds/spongebob-bikini-bottom.webp")} .unleashed-more-worlds{margin-top:8px;flex:0 0 auto} /* Real European Career campaign summary. */ .career-europe-live-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:10px} .career-europe-live-summary>span{display:grid;gap:4px;padding:11px 9px;border:1px solid rgba(166,255,20,.12);background:rgba(2,9,5,.54);text-align:center} .career-europe-live-summary small{color:#8f9e89;font-size:.48rem;font-weight:900;letter-spacing:.08em} .career-europe-live-summary b{color:var(--u7-lime,#a6ff16);font-size:.9rem} .career-europe-fixture{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.5fr) auto;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(166,255,20,.09)} .career-europe-fixture:last-child{border-bottom:0}.career-europe-fixture span{color:#899685;font-size:.52rem;font-weight:900;letter-spacing:.06em}.career-europe-fixture b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem}.career-europe-fixture strong{color:var(--u7-lime,#a6ff16);font-size:.63rem}.career-europe-fixture.next{background:rgba(120,184,0,.055);border-left:2px solid var(--u7-lime,#a6ff16)} .career-calendar-event.europe{border-color:rgba(166,255,20,.2)} .career-calendar-event.europe>i{color:var(--u7-lime,#a6ff16)} /* Profile: less compressed, more room for identity and readable copy. */ #view-profile{padding-bottom:86px} #view-profile .section-heading{margin-bottom:24px} #view-profile .section-heading h1{font-size:clamp(2.5rem,4vw,4.2rem)} #view-profile .section-heading p:not(.eyebrow){max-width:780px;font-size:.76rem;line-height:1.65} .profile-page-grid{grid-template-columns:minmax(0,1.22fr) minmax(390px,.78fr)!important;gap:24px!important;align-items:start} #view-profile .profile-page-grid>.panel{padding:24px!important} .profile-page-identity{grid-template-columns:132px minmax(0,1fr) auto!important;gap:22px!important;min-height:190px} .profile-page-identity>img{width:132px!important;height:132px!important;border-radius:8px!important} .profile-page-identity>div{min-width:0}.profile-page-identity>div>small{font-size:.58rem;letter-spacing:.12em;color:#9aad91} .profile-page-identity h2{margin:5px 0 7px!important;font-size:clamp(2rem,3.4vw,3.3rem)!important;line-height:.92!important;overflow-wrap:anywhere} .profile-page-identity p{font-size:.66rem;letter-spacing:.06em}.profile-page-identity strong{align-self:start;font-size:1.4rem!important;white-space:nowrap} .profile-favorite-card{grid-template-columns:minmax(0,1fr) 230px!important;gap:24px!important;min-height:310px}.profile-favorite-card h2{margin:5px 0 14px;font-size:1.6rem}.profile-favorite-card>img{width:215px!important;max-height:310px!important} .profile-legacy-card{grid-template-columns:270px minmax(0,1fr)!important;gap:30px!important;padding:28px!important}.profile-legacy-level small{font-size:.57rem}.profile-legacy-level strong{font-size:3.4rem}.profile-legacy-level b{font-size:.78rem}.profile-legacy-progress p{font-size:.69rem!important;line-height:1.65!important} .profile-presentation-settings{padding:26px!important}.profile-presentation-grid{gap:13px!important}.profile-presentation-grid>label{min-height:92px!important;padding:15px 16px!important;border-radius:4px!important}.profile-presentation-grid b{font-size:.72rem!important;line-height:1.3}.profile-presentation-grid small{font-size:.59rem!important;line-height:1.55!important} .profile-career-slots{padding:26px!important}.profile-career-slots #profile-career-slot-list{gap:14px!important}.profile-career-slot-card{min-height:128px;padding:18px!important;border-radius:4px!important}.profile-career-slot-card b{font-size:.82rem!important}.profile-career-slot-card small{font-size:.58rem;line-height:1.5} .profile-achievement-summary{min-height:110px;padding:24px 28px!important}.profile-achievement-summary h2{font-size:1.55rem} /* Patchnotes destination for the HOME news strip. */ .patchnotes-heading{align-items:end;margin-bottom:22px} .patchnotes-feed{display:grid;gap:14px;max-width:1180px;margin:0 auto 70px} .patchnote-entry{padding:22px 24px!important;border-color:rgba(166,255,20,.17)!important;background:linear-gradient(110deg,rgba(3,13,6,.86),rgba(2,7,5,.76))!important} .patchnote-entry header{display:grid;grid-template-columns:82px 1fr auto;gap:16px;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(166,255,20,.1)} .patchnote-entry header>span{color:var(--u7-yellow,#ffc400);font:italic 900 1.45rem var(--display-font);letter-spacing:.03em}.patchnote-entry header small{display:block;color:var(--u7-lime,#a6ff16);font-size:.52rem;font-weight:900;letter-spacing:.11em}.patchnote-entry h2{margin:3px 0 0;font-size:1.15rem}.patchnote-entry header>b{padding:5px 9px;border:1px solid rgba(166,255,20,.28);color:var(--u7-lime,#a6ff16);font-size:.5rem;letter-spacing:.1em}.patchnote-entry p,.patchnote-entry li{color:#a8b0a3;font-size:.66rem;line-height:1.65}.patchnote-entry ul{display:grid;gap:5px;margin:15px 0 0;padding-left:19px}.patchnote-entry.featured{border-color:rgba(196,255,20,.38)!important;box-shadow:inset 3px 0 0 var(--u7-lime,#a6ff16),0 18px 42px rgba(0,0,0,.18)} @media(max-width:1280px){ .profile-page-grid{grid-template-columns:1fr!important}.profile-favorite-card{min-height:0}.profile-career-slots #profile-career-slot-list{grid-template-columns:1fr 1fr!important} } @media(max-width:760px){ .profile-page-identity{grid-template-columns:88px 1fr!important}.profile-page-identity>img{width:88px!important;height:88px!important}.profile-page-identity strong{grid-column:1/-1}.profile-favorite-card{grid-template-columns:1fr!important}.profile-favorite-card>img{justify-self:center}.profile-legacy-card{grid-template-columns:1fr!important}.profile-career-slots #profile-career-slot-list{grid-template-columns:1fr!important}.profile-presentation-grid{grid-template-columns:1fr!important}.career-europe-live-summary{grid-template-columns:repeat(3,1fr)}.patchnote-entry header{grid-template-columns:64px 1fr}.patchnote-entry header>b{grid-column:2;justify-self:start} } /* ======================================================================== 0.7C · PROFILE LEGACY & CARD MASTERY ======================================================================== */ /* Eight global destinations now include the local Legacy leaderboard. */ .reconstruction-shell .topnav{grid-template-columns:repeat(8,minmax(0,1fr))} /* Real collection state: available art remains inspectable, but ownership is visibly earned by an official Career Core start. */ #view-card-collection .collection-card-item.is-locked .cr-final-card-image{ opacity:.34; filter:saturate(.42) brightness(.72) contrast(.92); } #view-card-collection .collection-card-item.is-locked .collection-card-caption{ opacity:.7; border-color:rgba(166,255,20,.07); } #view-card-collection .collection-card-lock{ position:absolute; z-index:12; left:50%; top:48%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:5px; width:min(78%,210px); padding:12px 10px; border:1px solid rgba(169,255,18,.3); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background:linear-gradient(145deg,rgba(1,8,4,.94),rgba(4,14,7,.88)); box-shadow:0 12px 35px rgba(0,0,0,.48),inset 3px 0 0 rgba(255,196,0,.8); color:#f4f6ee; pointer-events:none; text-align:center; } #view-card-collection .collection-card-lock b{font-size:1.2rem} #view-card-collection .collection-card-lock strong{color:var(--u7-yellow,#ffc400);font:italic 900 .63rem/1.1 var(--display-font);letter-spacing:.05em} #view-card-collection .collection-card-lock small{color:var(--u7-lime,#a9ff12);font-size:.48rem;font-weight:900;letter-spacing:.1em} .collection-owned-badge{ display:inline-flex; padding:5px 7px; border:1px solid rgba(169,255,18,.36); border-radius:1px; color:#061003; background:var(--u7-lime,#a9ff12); box-shadow:0 5px 15px rgba(0,0,0,.28); font:1000 .45rem/1 var(--display-font); letter-spacing:.07em; } #view-card-collection .collection-card-item.is-collected .cr-final-card-image{opacity:1} /* Profile · collection passport + title cabinet. */ .profile-card-mastery,.profile-career-legacy{grid-column:1/-1} .profile-card-mastery,.profile-career-legacy{padding:26px 28px!important} .profile-card-mastery .panel-heading>strong{ color:var(--u7-yellow,#ffc400); font:italic 900 1.5rem var(--display-font); white-space:nowrap; } .profile-collection-meter{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1fr);gap:18px;align-items:center;margin:4px 0 18px} .profile-collection-meter progress{width:100%;height:10px;accent-color:var(--u7-lime,#a9ff12)} .profile-collection-meter small{color:#98a593;font-size:.61rem;line-height:1.55} .profile-collection-worlds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px} .profile-collection-world{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 12px; border:1px solid rgba(169,255,18,.1);background:rgba(2,10,5,.56);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) } .profile-collection-world b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e9ede4;font-size:.61rem} .profile-collection-world small{color:#879281;font-size:.55rem;font-weight:900} .profile-collection-world.complete{border-color:rgba(169,255,18,.36);box-shadow:inset 3px 0 0 var(--u7-lime,#a9ff12)} .profile-collection-world.complete small{color:var(--u7-lime,#a9ff12)} .profile-career-records{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:4px 0 18px} .profile-career-records article{display:grid;gap:6px;min-height:76px;padding:13px 14px;border:1px solid rgba(169,255,18,.11);background:rgba(2,10,5,.56)} .profile-career-records small{color:#8e9b88;font-size:.49rem;font-weight:900;letter-spacing:.09em} .profile-career-records b{color:#f3f5ed;font-size:.73rem;line-height:1.35} .profile-career-records article:first-child b{color:var(--u7-lime,#a9ff12)} .profile-career-records article:nth-child(2) b{color:#ffb365} .profile-career-titles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .profile-title-chip{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 10px;align-items:center;min-height:64px;padding:10px 12px;border:1px solid rgba(255,196,0,.14);background:linear-gradient(120deg,rgba(46,34,1,.17),rgba(3,10,5,.62))} .profile-title-chip i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,196,0,.2);color:var(--u7-yellow,#ffc400);font-style:normal} .profile-title-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.61rem}.profile-title-chip small{color:#8e9989;font-size:.49rem}.profile-title-chip strong{grid-column:3;grid-row:1/3;color:var(--u7-yellow,#ffc400);font:italic 900 1rem var(--display-font)} .profile-empty-copy{grid-column:1/-1;margin:0;padding:18px;border:1px dashed rgba(169,255,18,.13);color:#879282;font-size:.62rem;text-align:center} /* Local leaderboard · offline profile snapshots sorted by Legacy Level. */ #view-leaderboard{padding-bottom:84px} .leaderboard-heading{align-items:end;margin-bottom:22px} .profile-leaderboard-layout{display:grid;grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr);gap:18px;align-items:start} .profile-leaderboard-board,.profile-leaderboard-detail{padding:20px!important;border-color:rgba(169,255,18,.17)!important;background:linear-gradient(145deg,rgba(2,10,5,.88),rgba(1,7,4,.8))!important} .profile-leaderboard-list{display:grid;gap:7px} .profile-leaderboard-row{ display:grid;grid-template-columns:42px 54px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:74px;padding:9px 11px; border:1px solid rgba(169,255,18,.09);color:#eef1e9;background:rgba(2,9,5,.56);cursor:pointer;text-align:left;transition:.16s ease } .profile-leaderboard-row:hover{border-color:rgba(169,255,18,.3);background:rgba(33,58,4,.22)} .profile-leaderboard-row.active{border-color:rgba(198,255,18,.5);box-shadow:inset 4px 0 0 var(--u7-yellow,#ffc400);background:linear-gradient(90deg,rgba(91,125,0,.18),rgba(2,9,5,.64))} .profile-leaderboard-row img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.34))}.profile-leaderboard-row>i{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(169,255,18,.12);font-style:normal} .profile-leaderboard-rank{color:var(--u7-yellow,#ffc400);font:italic 900 1.05rem var(--display-font);text-align:center} .profile-leaderboard-row>span:nth-of-type(2){display:grid;gap:2px;min-width:0}.profile-leaderboard-row small{color:var(--u7-lime,#a9ff12);font-size:.47rem;font-weight:900;letter-spacing:.08em}.profile-leaderboard-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.67rem}.profile-leaderboard-row em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#879382;font-size:.5rem;font-style:normal}.profile-leaderboard-row>strong{color:#f6f7f1;font:italic 900 .9rem var(--display-font);white-space:nowrap} .leaderboard-empty{padding:28px!important;color:#8e998a;text-align:center} .profile-leaderboard-detail{min-height:460px} .leaderboard-profile-hero{display:grid;grid-template-columns:94px minmax(0,1fr) auto;gap:18px;align-items:center;padding-bottom:17px;border-bottom:1px solid rgba(169,255,18,.12)} .leaderboard-profile-hero img{width:94px;height:94px;object-fit:contain}.leaderboard-profile-hero small{color:var(--u7-lime,#a9ff12);font-size:.5rem;font-weight:900;letter-spacing:.1em}.leaderboard-profile-hero h2{margin:4px 0;color:var(--u7-yellow,#ffc400);font:italic 900 clamp(1.8rem,3vw,3rem)/.9 var(--display-font)}.leaderboard-profile-hero p{margin:0;color:#9ca799;font-size:.6rem}.leaderboard-profile-hero>strong{color:var(--u7-lime,#a9ff12);font:italic 900 1.55rem var(--display-font)} .leaderboard-profile-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:16px 0}.leaderboard-profile-kpis>span{display:grid;gap:5px;padding:11px;border:1px solid rgba(169,255,18,.09);background:rgba(0,0,0,.16)}.leaderboard-profile-kpis small{color:#879383;font-size:.46rem;font-weight:900;letter-spacing:.08em}.leaderboard-profile-kpis b{font-size:.68rem} .leaderboard-profile-records{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}.leaderboard-profile-records article{display:grid;gap:5px;padding:12px;border:1px solid rgba(169,255,18,.09);background:rgba(0,0,0,.13)}.leaderboard-profile-records small{color:#879383;font-size:.47rem;font-weight:900;letter-spacing:.08em}.leaderboard-profile-records b{font-size:.65rem}.leaderboard-profile-records article:first-child b{color:var(--u7-lime,#a9ff12)}.leaderboard-profile-records article:last-child b{color:#ffb365} .leaderboard-profile-titles{display:grid;gap:6px;padding:14px;border:1px solid rgba(255,196,0,.1);background:rgba(27,20,1,.08)}.leaderboard-profile-titles .panel-heading{margin-bottom:5px}.leaderboard-profile-titles>span{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:7px;border-bottom:1px solid rgba(255,255,255,.035)}.leaderboard-profile-titles>span:last-child{border-bottom:0}.leaderboard-profile-titles i{grid-row:1/3;font-style:normal}.leaderboard-profile-titles b{font-size:.58rem}.leaderboard-profile-titles small{color:#879383;font-size:.47rem}.leaderboard-profile-titles strong{grid-column:3;grid-row:1/3;color:var(--u7-yellow,#ffc400)}.leaderboard-profile-titles>p{margin:0;color:#879383;font-size:.58rem} .leaderboard-favorite{display:grid;grid-template-columns:1fr 120px;gap:15px;align-items:center;margin-top:14px;padding:12px;border:1px solid rgba(169,255,18,.09);background:rgba(2,9,5,.52)}.leaderboard-favorite span{display:grid;gap:4px}.leaderboard-favorite small{color:var(--u7-lime,#a9ff12);font-size:.48rem;font-weight:900;letter-spacing:.08em}.leaderboard-favorite b{font:italic 900 1.1rem var(--display-font)}.leaderboard-favorite img{width:120px;height:150px;object-fit:contain;justify-self:end} /* Two-leg European knockout labeling. */ .career-europe-fixture span .europe-leg,.career-calendar-event .europe-leg{color:var(--u7-yellow,#ffc400)} @media(max-width:1380px){ .reconstruction-shell .topnav{grid-template-columns:repeat(8,minmax(0,1fr))} .profile-collection-worlds{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:1100px){ .reconstruction-shell .topnav{grid-template-columns:repeat(4,1fr)} .profile-leaderboard-layout{grid-template-columns:1fr} .profile-collection-worlds{grid-template-columns:repeat(3,minmax(0,1fr))} .profile-career-titles{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ .profile-collection-meter{grid-template-columns:1fr}.profile-collection-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-career-records{grid-template-columns:1fr 1fr}.profile-career-titles{grid-template-columns:1fr} #view-leaderboard .leaderboard-heading{grid-template-columns:minmax(0,1fr)}#view-leaderboard .leaderboard-heading h1{font-size:clamp(2.2rem,11vw,3.4rem)} .leaderboard-heading{align-items:start}.profile-leaderboard-row{grid-template-columns:36px 46px minmax(0,1fr)}.profile-leaderboard-row img,.profile-leaderboard-row>i{width:46px;height:46px}.profile-leaderboard-row>strong{grid-column:3;justify-self:start}.leaderboard-profile-kpis{grid-template-columns:1fr 1fr}.leaderboard-profile-hero{grid-template-columns:74px 1fr}.leaderboard-profile-hero img{width:74px;height:74px}.leaderboard-profile-hero>strong{grid-column:2;justify-self:start}.leaderboard-favorite{grid-template-columns:1fr 90px}.leaderboard-favorite img{width:90px;height:120px} } @media(max-width:480px){ .profile-collection-worlds,.profile-career-records{grid-template-columns:1fr}.leaderboard-profile-records{grid-template-columns:1fr} } /* 0.7D · Profile Stats & Playtime --------------------------------------- */ .profile-equipped-title{display:inline-flex;width:max-content;margin:2px 0 5px;padding:4px 8px;border-left:2px solid var(--u7-yellow,#ffc400);color:var(--u7-lime,#a9ff12);background:rgba(169,255,18,.045);font:italic 900 .62rem/1.1 var(--display-font);letter-spacing:.09em;text-transform:uppercase} .profile-title-selector,.profile-club-legend{grid-column:1/-1;min-height:0} .profile-title-control{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:16px;align-items:center;margin:4px 0 14px;padding:12px;border:1px solid rgba(169,255,18,.1);background:rgba(2,10,5,.5)} .profile-title-control>span{display:grid;gap:3px}.profile-title-control b{font-size:.62rem}.profile-title-control small{color:#899586;font-size:.52rem;line-height:1.45} .profile-title-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .profile-title-option{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;min-height:54px;padding:8px 9px;border:1px solid rgba(255,255,255,.045);background:rgba(0,0,0,.13);opacity:.45} .profile-title-option i{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;color:#869083;font-style:normal}.profile-title-option b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.54rem}.profile-title-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7b8679;font-size:.43rem} .profile-title-option.unlocked{opacity:1;border-color:rgba(169,255,18,.12)}.profile-title-option.unlocked i{color:var(--u7-lime,#a9ff12)}.profile-title-option.selected{border-color:rgba(255,196,0,.38);box-shadow:inset 3px 0 0 var(--u7-yellow,#ffc400);background:rgba(54,43,0,.15)} .profile-playtime-card,.profile-duo-signals{grid-column:1/-1;padding:26px 28px!important} .profile-playtime-card .panel-heading>strong{color:var(--u7-yellow,#ffc400);font:italic 900 1.55rem var(--display-font)} .profile-playtime-since{margin:-3px 0 15px;color:#8f9a8c;font-size:.53rem;line-height:1.5} .profile-playtime-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px} .profile-playtime-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:48px;padding:7px 10px;border:1px solid rgba(169,255,18,.07);background:rgba(1,8,4,.46)} .profile-playtime-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(169,255,18,.11);color:var(--u7-lime,#a9ff12);font-size:.85rem} .profile-playtime-copy{display:grid;gap:5px;min-width:0}.profile-playtime-copy>b{font-size:.55rem;letter-spacing:.035em}.profile-playtime-copy>i{display:block;height:5px;overflow:hidden;background:rgba(255,255,255,.045);font-style:normal}.profile-playtime-copy>i>em{display:block;height:100%;background:linear-gradient(90deg,var(--u7-lime,#a9ff12),var(--u7-yellow,#ffc400));box-shadow:0 0 8px rgba(169,255,18,.18)}.profile-playtime-row>strong{color:#edf1e9;font:italic 900 .68rem var(--display-font);white-space:nowrap} .profile-club-legend-content{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;min-height:190px} .profile-club-legend-card{padding:0;border:0;background:transparent;cursor:pointer}.profile-club-legend-card img{display:block;width:145px;height:190px;object-fit:contain;filter:drop-shadow(0 15px 18px rgba(0,0,0,.42));transition:transform .18s ease}.profile-club-legend-card:hover img{transform:translateY(-4px) scale(1.02)} .profile-club-legend-fallback{display:grid;place-items:center;width:120px;height:120px;border:1px solid rgba(169,255,18,.2);color:var(--u7-lime,#a9ff12);font-size:2rem} .profile-club-legend-content>div{display:grid;gap:5px}.profile-club-legend-content>div>small{color:var(--u7-lime,#a9ff12);font-size:.49rem;font-weight:900;letter-spacing:.1em}.profile-club-legend-content h3{margin:0;color:var(--u7-yellow,#ffc400);font:italic 900 clamp(1.5rem,2.6vw,2.5rem)/.9 var(--display-font)}.profile-club-legend-content p{margin:2px 0 8px;color:#a2ada0;font-size:.59rem;line-height:1.5} .profile-legend-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}.profile-legend-kpis span{display:grid;gap:3px;padding:9px;border:1px solid rgba(169,255,18,.08);background:rgba(0,0,0,.13)}.profile-legend-kpis small{color:#7e8a7c;font-size:.43rem;font-weight:900}.profile-legend-kpis b{font-size:.68rem} .profile-career-records{grid-template-columns:repeat(4,minmax(0,1fr))} .profile-career-records article{min-height:78px}.profile-career-records article:nth-child(3) b,.profile-career-records article:nth-child(4) b{color:var(--u7-yellow,#ffc400)} .profile-duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .profile-duo-card{display:grid;grid-template-columns:126px minmax(0,1fr);gap:14px;align-items:center;min-height:172px;padding:14px;border:1px solid rgba(169,255,18,.08);background:linear-gradient(130deg,rgba(2,10,5,.58),rgba(0,0,0,.18));opacity:.62} .profile-duo-card.active{opacity:1;border-color:rgba(169,255,18,.2)} .profile-duo-images{position:relative;width:126px;height:144px}.profile-duo-images img{position:absolute;bottom:0;width:88px;height:134px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.42))}.profile-duo-images img:first-child{left:0}.profile-duo-images img:last-child{right:0;transform:translateX(14px)} .profile-duo-copy{display:grid;gap:4px}.profile-duo-copy>small{color:var(--u7-lime,#a9ff12);font-size:.45rem;font-weight:900;letter-spacing:.1em}.profile-duo-copy h3{margin:0;color:#f0f3eb;font:italic 900 1.05rem var(--display-font)}.profile-duo-copy p{margin:0 0 6px;color:#8d998b;font-size:.52rem;line-height:1.45}.profile-duo-copy>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.profile-duo-copy>div>span{display:grid;gap:2px;padding:7px;border:1px solid rgba(255,255,255,.045);background:rgba(0,0,0,.14)}.profile-duo-copy>div b{color:var(--u7-yellow,#ffc400);font:italic 900 .78rem var(--display-font)}.profile-duo-copy>div small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7e897c;font-size:.38rem} .leaderboard-legend{margin-top:9px;padding:10px 12px;border:1px solid rgba(255,196,0,.12);background:rgba(47,34,0,.11)}.leaderboard-legend span{display:grid;gap:3px}.leaderboard-legend small{color:var(--u7-yellow,#ffc400);font-size:.46rem;font-weight:900;letter-spacing:.09em}.leaderboard-legend b{font:italic 900 .85rem var(--display-font)}.leaderboard-legend em{color:#899486;font-size:.49rem;font-style:normal} @media(max-width:1100px){ .profile-title-gallery{grid-template-columns:repeat(2,minmax(0,1fr))} .profile-playtime-grid{grid-template-columns:1fr} .profile-duo-grid{grid-template-columns:1fr} } @media(max-width:760px){ .profile-title-control{grid-template-columns:1fr}.profile-title-gallery{grid-template-columns:1fr 1fr} .profile-club-legend-content{grid-template-columns:110px minmax(0,1fr)}.profile-club-legend-card img{width:105px;height:150px} .profile-career-records{grid-template-columns:1fr 1fr} .profile-duo-card{grid-template-columns:100px minmax(0,1fr)}.profile-duo-images{width:100px;height:120px}.profile-duo-images img{width:72px;height:112px} } @media(max-width:480px){ .profile-title-gallery,.profile-career-records{grid-template-columns:1fr} .profile-club-legend-content,.profile-duo-card{grid-template-columns:1fr}.profile-club-legend-card img{margin:auto}.profile-duo-images{margin:auto} .profile-duo-copy>div{grid-template-columns:1fr} } /* 0.7E · CAREER BROADCAST & CLASSICS ------------------------------------ */ .unleashed-home-footer-strip{grid-template-columns:1.14fr 1.14fr .92fr .92fr} .career-network-cell{border-color:rgba(255,208,48,.36);background:linear-gradient(90deg,rgba(17,19,3,.93),rgba(4,12,5,.82))} .career-network-cell .strip-icon{color:var(--u7-yellow,#ffdf28);text-shadow:0 0 15px rgba(255,221,40,.35)} .career-network-cell .strip-copy b{color:#fff8ca} .career-network-cell .strip-copy small em{color:var(--u7-yellow,#ffdf28)} .career-live-panel-heading{align-items:flex-start;gap:16px} .career-live-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap} .career-match-view-toggle{display:flex;min-height:38px;padding:3px;border:1px solid rgba(155,255,21,.26);background:rgba(0,9,3,.65);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)} .career-match-view-toggle button{min-width:108px;border:0;padding:0 12px;color:#78907e;background:transparent;font:900 .55rem/1 var(--display-font);letter-spacing:.08em;cursor:pointer;transition:.16s ease} .career-match-view-toggle button:hover{color:#eaffd7;background:rgba(155,255,21,.07)} .career-match-view-toggle button.active{color:#101800;background:linear-gradient(135deg,var(--u7-yellow,#ffdf28),var(--u7-lime,#9aff17));box-shadow:0 0 16px rgba(163,255,22,.18)} .career-live-ticker-view[hidden],.career-broadcast-view[hidden]{display:none!important} .career-broadcast-view{display:grid;gap:11px} .career-broadcast-topline{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-left:3px solid var(--u7-lime,#9aff17);background:linear-gradient(90deg,rgba(149,255,22,.09),transparent 62%);color:#9bb1a1;font-size:.53rem;font-weight:900;letter-spacing:.12em} .career-broadcast-topline b{color:var(--u7-yellow,#ffdf28);font:1000 1.1rem/1 var(--display-font);letter-spacing:.02em} .career-broadcast-pitch{--ball-x:50%;--ball-y:50%;position:relative;min-height:405px;overflow:hidden;border:1px solid rgba(155,255,21,.26);background:radial-gradient(circle at 50% 48%,rgba(115,225,52,.16),transparent 34%),linear-gradient(90deg,rgba(18,66,27,.9),rgba(10,48,21,.93) 50%,rgba(18,66,27,.9));box-shadow:inset 0 0 60px rgba(0,0,0,.38);clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)} .career-broadcast-pitch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 9%,rgba(0,0,0,.02) 9% 18%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 22%,transparent 80%,rgba(0,0,0,.15));pointer-events:none} .broadcast-field-lines{position:absolute;inset:22px;border:2px solid rgba(224,255,220,.30);pointer-events:none} .broadcast-field-lines::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(224,255,220,.27)} .broadcast-center-circle{position:absolute;left:50%;top:50%;width:92px;height:92px;border:2px solid rgba(224,255,220,.27);border-radius:50%;transform:translate(-50%,-50%)} .broadcast-box{position:absolute;top:25%;width:17%;height:50%;border:2px solid rgba(224,255,220,.26)} .broadcast-box.left{left:-2px;border-left:0}.broadcast-box.right{right:-2px;border-right:0} .broadcast-goal{position:absolute;top:38%;width:2.6%;height:24%;border:2px solid rgba(255,238,154,.42);background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.05) 5px 6px)} .broadcast-goal.left{left:-2.6%}.broadcast-goal.right{right:-2.6%} .broadcast-team-markers{position:absolute;inset:0;pointer-events:none} .broadcast-team-markers i{position:absolute;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.32),0 0 13px currentColor;transition:transform .38s ease,opacity .3s ease} .broadcast-team-markers.home i{color:#b9ff31;background:#b9ff31}.broadcast-team-markers.away i{color:#f7f9ff;background:#f7f9ff} .broadcast-team-markers.home i:nth-child(1){left:7%;top:48%}.broadcast-team-markers.home i:nth-child(2){left:21%;top:17%}.broadcast-team-markers.home i:nth-child(3){left:21%;top:38%}.broadcast-team-markers.home i:nth-child(4){left:21%;top:61%}.broadcast-team-markers.home i:nth-child(5){left:21%;top:81%}.broadcast-team-markers.home i:nth-child(6){left:38%;top:25%}.broadcast-team-markers.home i:nth-child(7){left:38%;top:49%}.broadcast-team-markers.home i:nth-child(8){left:38%;top:73%}.broadcast-team-markers.home i:nth-child(9){left:51%;top:26%}.broadcast-team-markers.home i:nth-child(10){left:53%;top:68%}.broadcast-team-markers.home i:nth-child(11){left:61%;top:49%} .broadcast-team-markers.away i:nth-child(1){right:7%;top:48%}.broadcast-team-markers.away i:nth-child(2){right:21%;top:17%}.broadcast-team-markers.away i:nth-child(3){right:21%;top:38%}.broadcast-team-markers.away i:nth-child(4){right:21%;top:61%}.broadcast-team-markers.away i:nth-child(5){right:21%;top:81%}.broadcast-team-markers.away i:nth-child(6){right:38%;top:25%}.broadcast-team-markers.away i:nth-child(7){right:38%;top:49%}.broadcast-team-markers.away i:nth-child(8){right:38%;top:73%}.broadcast-team-markers.away i:nth-child(9){right:51%;top:26%}.broadcast-team-markers.away i:nth-child(10){right:53%;top:68%}.broadcast-team-markers.away i:nth-child(11){right:61%;top:49%} .career-broadcast-ball{position:absolute;z-index:3;left:var(--ball-x);top:var(--ball-y);width:17px;height:17px;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);color:#fff;background:#fff;font-size:.4rem;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 18px rgba(255,255,255,.7);transition:left .7s cubic-bezier(.2,.7,.25,1),top .7s cubic-bezier(.2,.7,.25,1)} .career-broadcast-pitch[data-side="home"] .broadcast-team-markers.home i:nth-child(n+6){transform:translateX(22px)} .career-broadcast-pitch[data-side="away"] .broadcast-team-markers.away i:nth-child(n+6){transform:translateX(-22px)} .career-broadcast-pitch[data-event="goal"]{box-shadow:inset 0 0 95px rgba(185,255,49,.20),0 0 28px rgba(185,255,49,.12)} .career-broadcast-pitch[data-event="danger"]{box-shadow:inset 0 0 90px rgba(255,207,48,.14)} .career-broadcast-pitch[data-event="card"]{box-shadow:inset 0 0 90px rgba(255,78,52,.14)} .career-broadcast-event{position:absolute;z-index:5;left:18px;right:18px;bottom:15px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center;min-height:78px;padding:9px 12px;border-left:4px solid var(--u7-lime,#9aff17);background:linear-gradient(90deg,rgba(0,8,4,.91),rgba(0,8,4,.67),rgba(0,8,4,.32));backdrop-filter:blur(5px)} .career-broadcast-actor{width:54px;height:60px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(155,255,21,.24);background:rgba(255,255,255,.035)} .career-broadcast-actor img{width:100%;height:100%;object-fit:contain}.career-broadcast-actor span{font-size:1.5rem} .career-broadcast-event small{color:var(--u7-lime,#9aff17);font-size:.49rem;font-weight:1000;letter-spacing:.13em}.career-broadcast-event h3{margin:2px 0 3px;color:#fff9bc;font:1000 clamp(.9rem,2vw,1.25rem)/1 var(--display-font);text-transform:uppercase}.career-broadcast-event p{margin:0;color:#9eb2a2;font-size:.58rem;line-height:1.4} .career-broadcast-scoreline{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:9px 14px;border:1px solid rgba(155,255,21,.12);background:rgba(2,10,5,.76)} .career-broadcast-scoreline>span{display:flex;align-items:baseline;justify-content:flex-end;gap:12px}.career-broadcast-scoreline>span.enemy{justify-content:flex-start}.career-broadcast-scoreline small{color:#92a795;font-size:.55rem;font-weight:900;letter-spacing:.08em}.career-broadcast-scoreline b{color:white;font:1000 1.55rem/1 var(--display-font)}.career-broadcast-scoreline em{color:var(--u7-yellow,#ffdf28);font-style:normal;font-weight:1000} .career-broadcast-momentum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}.career-broadcast-momentum>small,.career-broadcast-momentum>b{font-size:.5rem;font-weight:1000;letter-spacing:.1em;color:#809584}.career-broadcast-momentum>div{position:relative;height:8px;background:rgba(255,255,255,.055);overflow:hidden}.career-broadcast-momentum i{display:block;height:100%;background:linear-gradient(90deg,var(--u7-lime,#9aff17),var(--u7-yellow,#ffdf28));transition:width .35s ease}.career-broadcast-momentum>div span{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.42)} .career-broadcast-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.career-broadcast-kpis span{display:grid;gap:3px;padding:8px 10px;border:1px solid rgba(155,255,21,.1);background:rgba(0,9,4,.48)}.career-broadcast-kpis small{color:#778b7b;font-size:.46rem;font-weight:900;letter-spacing:.1em}.career-broadcast-kpis b{color:#eaf5e9;font-size:.64rem} .profile-match-classics{grid-column:1/-1}.profile-classic-intro{margin:0 0 14px;color:#849b8a;font-size:.67rem;line-height:1.5} .profile-classic-matches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .profile-classic-match{position:relative;display:grid;gap:8px;min-height:158px;padding:14px;border:1px solid rgba(155,255,21,.13);color:white;background:linear-gradient(145deg,rgba(7,25,13,.74),rgba(2,10,5,.84));text-align:left;cursor:pointer;transition:.18s ease;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)} .profile-classic-match:hover{transform:translateY(-3px);border-color:rgba(255,220,48,.37);background:linear-gradient(145deg,rgba(21,35,9,.82),rgba(3,13,6,.9))} .profile-classic-match header{display:flex;justify-content:space-between;gap:10px}.profile-classic-match header span{color:var(--u7-lime,#9aff17);font-size:.47rem;font-weight:1000;letter-spacing:.1em}.profile-classic-match header small{color:#718376;font-size:.46rem}.profile-classic-match h3{margin:0;font:1000 .8rem/1.05 var(--display-font);text-transform:uppercase}.profile-classic-score{display:flex;align-items:center;gap:10px;color:#fff8b8}.profile-classic-score strong{font:1000 1.45rem/1 var(--display-font)}.profile-classic-score span{color:#819486;font-size:.55rem}.profile-classic-reasons{display:flex;flex-wrap:wrap;gap:4px}.profile-classic-reasons em{padding:4px 6px;border:1px solid rgba(255,213,45,.16);color:#d9c862;background:rgba(255,213,45,.04);font-size:.42rem;font-style:normal;font-weight:1000;letter-spacing:.06em}.profile-classic-match>small{color:#6f8474;font-size:.49rem} .profile-classic-empty{grid-column:1/-1;min-height:110px;display:grid;place-items:center;padding:18px;border:1px dashed rgba(155,255,21,.13);color:#78907d;text-align:center} .career-classic-modal[hidden]{display:none!important}.career-classic-modal{position:fixed;z-index:9998;inset:0;display:grid;place-items:center;padding:24px}.career-classic-modal-backdrop{position:absolute;inset:0;background:rgba(0,4,2,.83);backdrop-filter:blur(10px)}.career-classic-modal-panel{position:relative;z-index:1;width:min(900px,calc(100vw - 34px));max-height:88vh;overflow:auto;padding:24px;border:1px solid rgba(155,255,21,.28);background:linear-gradient(155deg,#06130a,#010704 68%);box-shadow:0 30px 80px rgba(0,0,0,.62);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)} .career-classic-modal-panel .modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:1px solid rgba(155,255,21,.22);color:#c7dfca;background:#071009;font-size:1.1rem;cursor:pointer} .classic-modal-hero{display:grid;gap:8px;padding:8px 44px 18px 0;border-bottom:1px solid rgba(155,255,21,.12)}.classic-modal-hero small{color:var(--u7-lime,#9aff17);font-weight:1000;letter-spacing:.11em}.classic-modal-hero h2{margin:0;color:#fff5a5;font:1000 clamp(1.5rem,4vw,2.6rem)/.9 var(--display-font);text-transform:uppercase}.classic-modal-score{font:1000 2.2rem/1 var(--display-font);color:white}.classic-modal-reasons{display:flex;flex-wrap:wrap;gap:5px}.classic-modal-reasons span{padding:5px 7px;border:1px solid rgba(255,216,48,.2);color:#ead765;background:rgba(255,216,48,.05);font-size:.47rem;font-weight:1000} .classic-modal-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:15px;margin-top:16px}.classic-modal-section{padding:13px;border:1px solid rgba(155,255,21,.1);background:rgba(255,255,255,.014)}.classic-modal-section>small{color:#7f9684;font-size:.48rem;font-weight:1000;letter-spacing:.1em}.classic-modal-lineup{display:grid;gap:6px;margin-top:9px}.classic-modal-lineup div{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-size:.55rem}.classic-modal-lineup b{color:#edf6ec}.classic-modal-lineup span{color:#829887}.classic-modal-highlights{display:grid;gap:6px;margin-top:9px}.classic-modal-highlights div{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:7px;border-left:2px solid rgba(155,255,21,.22);background:rgba(155,255,21,.025)}.classic-modal-highlights b{color:#eaf3ea;font-size:.56rem}.classic-modal-highlights small{color:#7d927f;font-size:.48rem;line-height:1.35}.classic-modal-highlights>div>span{color:var(--u7-yellow,#ffdf28);font:1000 .57rem var(--display-font)} @media(max-width:1250px){.unleashed-home-footer-strip{grid-template-columns:1fr 1fr}.profile-classic-matches{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.career-live-panel-heading{display:grid}.career-live-panel-actions{justify-content:flex-start}.career-broadcast-pitch{min-height:350px}.classic-modal-grid{grid-template-columns:1fr}} @media(max-width:680px){.unleashed-home-footer-strip{grid-template-columns:1fr}.career-match-view-toggle{width:100%}.career-match-view-toggle button{flex:1;min-width:0}.career-live-panel-actions{display:grid;width:100%}.career-broadcast-pitch{min-height:310px}.career-broadcast-event{grid-template-columns:45px 1fr;left:9px;right:9px}.career-broadcast-actor{width:42px;height:48px}.career-broadcast-kpis{grid-template-columns:1fr}.profile-classic-matches{grid-template-columns:1fr}.career-classic-modal{padding:10px}.career-classic-modal-panel{width:calc(100vw - 20px);padding:18px}.classic-modal-lineup div{grid-template-columns:1fr auto auto}} /* 0.7F · EUROPE DRAW & LIVE BROADCAST ---------------------------------- */ .career-europe-draw{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:24px} .career-europe-draw-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(86,137,255,.13),transparent 34%),rgba(0,5,10,.91);backdrop-filter:blur(13px)} .career-europe-draw-panel{position:relative;z-index:2;width:min(980px,95vw);max-height:92vh;overflow:auto;padding:28px 30px 24px;border:1px solid rgba(166,255,20,.27);background:linear-gradient(150deg,rgba(5,20,17,.98),rgba(3,10,17,.98));box-shadow:0 38px 120px rgba(0,0,0,.72);clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px)} .career-europe-draw-head{display:grid;grid-template-columns:1fr 82px;gap:18px;align-items:start;padding-bottom:18px;border-bottom:1px solid rgba(166,255,20,.13)} .career-europe-draw-head h2{margin:4px 0 7px;color:var(--u7-yellow,#ffd329);font:1000 clamp(2rem,5vw,4.2rem)/.88 var(--display-font);letter-spacing:-.045em;text-transform:uppercase} .career-europe-draw-head p{margin:0;color:#91a69a}.career-europe-draw-emblem{display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(166,255,20,.25);color:var(--u7-lime,#a6ff14);background:rgba(166,255,20,.045);font-size:2.3rem} .career-europe-draw-progress{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:17px 0}.career-europe-draw-progress:before{content:"DRAW PROGRESS";grid-column:1/-1;color:#718578;font-size:.48rem;font-weight:1000;letter-spacing:.15em}.career-europe-draw-progress>i{height:7px;background:linear-gradient(90deg,var(--u7-lime,#a6ff14),var(--u7-yellow,#ffd329));width:0;transition:width .28s ease;box-shadow:0 0 18px rgba(166,255,20,.22)}.career-europe-draw-progress{background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.02));background-size:calc(100% - 68px) 7px;background-repeat:no-repeat;background-position:left bottom}.career-europe-draw-progress>b{color:var(--u7-yellow,#ffd329);font-size:.65rem;letter-spacing:.08em} .career-europe-draw-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.career-europe-draw-row{display:grid;grid-template-columns:42px 1fr 48px;gap:10px;align-items:center;min-height:66px;padding:9px 11px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018);opacity:.42;transition:opacity .22s ease,border-color .22s ease,background .22s ease,transform .22s ease}.career-europe-draw-row.revealed{opacity:1;border-color:rgba(166,255,20,.18);background:linear-gradient(90deg,rgba(166,255,20,.075),rgba(255,255,255,.015));transform:translateY(-1px)}.career-europe-draw-row .draw-number{color:#708376;font:1000 .62rem var(--display-font)}.career-europe-draw-row div{display:grid;gap:3px}.career-europe-draw-row small{color:#718578;font-size:.46rem;font-weight:900;letter-spacing:.08em}.career-europe-draw-row b{color:#eef6ef;font-size:.67rem}.career-europe-draw-row strong{display:grid;place-items:center;min-height:36px;border-left:2px solid rgba(166,255,20,.22);color:var(--u7-lime,#a6ff14);font:1000 .66rem var(--display-font)} .career-europe-draw-panel footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(166,255,20,.1)}.career-europe-draw-panel footer>small{color:#718578}.career-europe-draw-panel footer>div{display:flex;gap:8px}.career-europe-draw-panel button:disabled{opacity:.38;cursor:not-allowed} .career-europe-route{display:grid;gap:10px!important}.career-europe-stage-route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:stretch}.career-europe-stage-node{position:relative;display:grid;align-content:center;gap:4px;min-height:72px;padding:10px 11px;border:1px solid rgba(166,255,20,.08);background:rgba(0,8,5,.48)}.career-europe-stage-node:not(:last-child):after{content:"›";position:absolute;right:-8px;top:50%;z-index:2;transform:translateY(-50%);color:#607064;font-size:1rem}.career-europe-stage-node small{color:#64776a;font-size:.44rem;font-weight:1000;letter-spacing:.1em}.career-europe-stage-node b{color:#eaf3eb;font-size:.59rem}.career-europe-stage-node span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6e8073;font-size:.46rem}.career-europe-stage-node.active{border-color:rgba(255,211,41,.3);background:rgba(255,211,41,.055);box-shadow:inset 0 -2px 0 rgba(255,211,41,.45)}.career-europe-stage-node.active b{color:var(--u7-yellow,#ffd329)}.career-europe-stage-node.complete{border-color:rgba(166,255,20,.18);background:rgba(166,255,20,.035)}.career-europe-stage-node.complete b{color:var(--u7-lime,#a6ff14)} .career-europe-record-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-left:3px solid var(--u7-lime,#a6ff14);background:rgba(166,255,20,.035)}.career-europe-record-head span{color:#87988b;font-size:.48rem;font-weight:1000;letter-spacing:.11em}.career-europe-record-head b{color:var(--u7-yellow,#ffd329);font-size:.62rem}.career-europe-record-table{margin-top:7px;border:1px solid rgba(166,255,20,.09)}.career-europe-record-table .head,.career-europe-record-table .row{display:grid;grid-template-columns:repeat(4,.65fr) 1.15fr .8fr .85fr;align-items:center;text-align:center}.career-europe-record-table .head{min-height:30px;background:rgba(255,255,255,.025);color:#687a6d;font-size:.43rem;font-weight:1000;letter-spacing:.1em}.career-europe-record-table .row{min-height:48px;border-top:1px solid rgba(255,255,255,.045);color:#ecf3ed;font-size:.64rem}.career-europe-record-table .row strong{color:var(--u7-yellow,#ffd329);font-size:.85rem}.career-europe-threshold{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;gap:10px;align-items:center;margin-top:9px;padding:9px 10px;background:rgba(0,7,4,.46)}.career-europe-threshold>div{display:grid;gap:2px}.career-europe-threshold small{color:#6d8072;font-size:.42rem;font-weight:1000;letter-spacing:.1em}.career-europe-threshold b{font-size:.55rem}.career-europe-threshold>span{height:7px;background:rgba(255,255,255,.055);overflow:hidden}.career-europe-threshold i{display:block;height:100%;background:linear-gradient(90deg,var(--u7-lime,#a6ff14),var(--u7-yellow,#ffd329));box-shadow:0 0 12px rgba(166,255,20,.18)}.career-europe-threshold em{color:var(--u7-lime,#a6ff14);font-size:.44rem;font-weight:1000;font-style:normal;letter-spacing:.08em} .career-europe-fixtures{gap:0!important;border:1px solid rgba(166,255,20,.08)}.career-europe-fixture-head,.career-europe-fixture{display:grid!important;grid-template-columns:minmax(120px,.9fr) minmax(140px,1.4fr) 40px 62px!important;gap:8px;align-items:center}.career-europe-fixture-head{min-height:30px;padding:0 10px;background:rgba(255,255,255,.025);color:#66786b;font-size:.42rem;font-weight:1000;letter-spacing:.09em}.career-europe-fixture{min-height:43px;padding:7px 10px!important;border-bottom:1px solid rgba(255,255,255,.04)!important;background:rgba(0,8,5,.28)!important}.career-europe-fixture:last-child{border-bottom:0!important}.career-europe-fixture.next{border-left:3px solid var(--u7-yellow,#ffd329)!important;background:rgba(255,211,41,.055)!important}.career-europe-fixture span{color:#728477!important;font-size:.45rem!important}.career-europe-fixture b{font-size:.57rem!important}.career-europe-fixture em{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(166,255,20,.12);color:#9bad9e;font-size:.48rem;font-style:normal;font-weight:1000}.career-europe-fixture strong{color:var(--u7-lime,#a6ff14)!important;font-size:.58rem!important;text-align:right} .career-summer-groups{gap:10px!important}.career-summer-group{padding:0!important;overflow:hidden;border-radius:8px!important;border-color:rgba(166,255,20,.11)!important;background:rgba(0,8,5,.45)!important}.career-summer-group>header{min-height:42px;align-items:center;margin:0!important;padding:0 10px;border-bottom:1px solid rgba(166,255,20,.09);background:linear-gradient(90deg,rgba(166,255,20,.055),transparent)}.career-summer-group>header b{color:#eef7ef}.career-summer-group>header small{color:var(--u7-lime,#a6ff14);font-size:.43rem;font-weight:1000;letter-spacing:.1em}.career-summer-group-table{display:grid}.career-summer-group-head,.career-summer-group-row{display:grid!important;grid-template-columns:22px minmax(105px,1fr) repeat(4,27px) 36px 34px!important;gap:4px!important;align-items:center!important}.career-summer-group-head{min-height:28px;padding:0 8px;color:#637568;background:rgba(255,255,255,.02);font-size:.39rem;font-weight:1000;letter-spacing:.07em}.career-summer-group-row{min-height:38px;padding:0 8px!important;border-top:1px solid rgba(255,255,255,.035)!important;font-size:.56rem!important}.career-summer-group-row em{color:#607164;font-style:normal;font-weight:900}.career-summer-group-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.53rem}.career-summer-group-row span{text-align:center;color:#86978a}.career-summer-group-row strong{text-align:center!important;color:var(--u7-yellow,#ffd329)!important}.career-summer-group-row.qualified{border-left:2px solid var(--u7-lime,#a6ff14)!important;background:rgba(166,255,20,.045)!important} .career-summer-bracket{display:grid!important;grid-template-columns:repeat(3,minmax(230px,1fr))!important;gap:18px!important;align-items:start}.career-summer-round{position:relative;padding:0!important;overflow:visible;border-radius:8px!important;border-color:rgba(255,211,41,.12)!important;background:rgba(0,8,5,.42)!important}.career-summer-round:not(:last-child):after{content:"›";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--u7-yellow,#ffd329);font-size:1.35rem}.career-summer-round>header{display:grid;gap:3px;min-height:48px;margin:0!important;padding:9px 11px;border-bottom:1px solid rgba(255,211,41,.1);background:linear-gradient(90deg,rgba(255,211,41,.055),transparent)}.career-summer-round>header small{color:#68796b;font-size:.39rem;font-weight:1000;letter-spacing:.1em}.career-summer-round>header b{color:var(--u7-yellow,#ffd329);font-size:.58rem}.career-summer-match{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:7px;padding:0!important;overflow:hidden;border:1px solid rgba(255,255,255,.05)!important;background:rgba(0,0,0,.17)}.career-summer-team{display:grid;grid-template-columns:1fr 28px;gap:6px;align-items:center;min-height:34px;padding:0 8px;border-top:1px solid rgba(255,255,255,.035)}.career-summer-team:first-child{border-top:0}.career-summer-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a8b6aa;font-size:.52rem}.career-summer-team b{text-align:center;color:#dce7de;font-size:.58rem}.career-summer-team.win{background:rgba(166,255,20,.045)}.career-summer-team.win span,.career-summer-team.win b{color:var(--u7-lime,#a6ff14);font-weight:1000}.career-summer-match>small{padding:4px 8px;border-top:1px solid rgba(255,211,41,.08);color:var(--u7-yellow,#ffd329);font-size:.4rem;font-weight:1000;text-align:right} .career-broadcast-pitch{--motion-speed:280ms} .career-broadcast-pitch.motion-live .broadcast-team-markers i{right:auto!important;transition:left var(--motion-speed) linear,top var(--motion-speed) linear,transform .16s ease,opacity .16s ease,box-shadow .16s ease} .career-broadcast-pitch.motion-live .broadcast-team-markers i.ball-holder{transform:scale(1.34);box-shadow:0 0 0 3px rgba(255,211,41,.35),0 0 18px currentColor} .career-broadcast-pitch.motion-live .career-broadcast-ball{transition:left var(--motion-speed) linear,top var(--motion-speed) linear,transform .15s ease;will-change:left,top} .career-broadcast-pitch[data-possession="home"]{background:radial-gradient(circle at 63% 48%,rgba(151,255,51,.17),transparent 34%),linear-gradient(90deg,rgba(18,66,27,.9),rgba(10,48,21,.93) 50%,rgba(18,66,27,.9))} .career-broadcast-pitch[data-possession="away"]{background:radial-gradient(circle at 37% 48%,rgba(238,246,255,.10),transparent 34%),linear-gradient(90deg,rgba(18,66,27,.9),rgba(10,48,21,.93) 50%,rgba(18,66,27,.9))} .career-broadcast-topline:before{content:"● LIVE MOTION";color:var(--u7-lime,#a6ff14);font-size:.42rem;font-weight:1000;letter-spacing:.12em;animation:broadcast-live-pulse 1.2s ease-in-out infinite} @keyframes broadcast-live-pulse{50%{opacity:.45}} @media(max-width:900px){ .career-europe-stage-route{grid-template-columns:1fr}.career-europe-stage-node:not(:last-child):after{content:"↓";right:10px;top:auto;bottom:-12px} .career-europe-draw-list{grid-template-columns:1fr} .career-summer-bracket{grid-template-columns:1fr!important}.career-summer-round:not(:last-child):after{content:"↓";right:12px;top:auto;bottom:-17px} } @media(max-width:620px){ .career-europe-draw{padding:10px}.career-europe-draw-panel{padding:20px 15px}.career-europe-draw-head{grid-template-columns:1fr}.career-europe-draw-emblem{display:none}.career-europe-draw-panel footer{align-items:stretch;flex-direction:column}.career-europe-draw-panel footer>div{display:grid;grid-template-columns:1fr 1fr} .career-europe-record-table .head,.career-europe-record-table .row{grid-template-columns:repeat(4,1fr)}.career-europe-record-table .head span:nth-child(5),.career-europe-record-table .head span:nth-child(6),.career-europe-record-table .head span:nth-child(7),.career-europe-record-table .row b:nth-child(5),.career-europe-record-table .row b:nth-child(6),.career-europe-record-table .row strong{display:none}.career-europe-threshold{grid-template-columns:1fr}.career-europe-fixture-head,.career-europe-fixture{grid-template-columns:minmax(85px,.8fr) minmax(100px,1.2fr) 28px 50px!important}.career-europe-fixture-head{font-size:.36rem} .career-summer-group-head,.career-summer-group-row{grid-template-columns:20px minmax(92px,1fr) 24px 24px 30px!important}.career-summer-group-head span:nth-child(5),.career-summer-group-head span:nth-child(6),.career-summer-group-head span:nth-child(7),.career-summer-group-row span:nth-of-type(3),.career-summer-group-row span:nth-of-type(4),.career-summer-group-row span:nth-of-type(5){display:none} } /* 0.7G · Realtime Broadcast & Set Pieces -------------------------------- */ .career-broadcast-topline b{min-width:72px;text-align:right;font-variant-numeric:tabular-nums} .career-broadcast-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} .career-broadcast-pitch[data-event="set-piece"]{box-shadow:inset 0 0 90px rgba(255,223,40,.13),0 0 20px rgba(255,223,40,.06)} .career-broadcast-pitch[data-event="restart"]{box-shadow:inset 0 0 70px rgba(126,215,255,.09)} .career-broadcast-pitch[data-event="set-piece"] .career-broadcast-ball{box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 22px rgba(255,223,40,.85)} .career-broadcast-pitch.motion-live .broadcast-team-markers i{will-change:left,top} .career-broadcast-pitch.motion-live .career-broadcast-ball{will-change:left,top} .career-broadcast-topline::after{content:"SEC";margin-left:auto;margin-right:6px;color:#6f8674;font-size:.39rem;font-weight:1000;letter-spacing:.13em} @media(max-width:900px){.career-broadcast-kpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.career-broadcast-kpis{grid-template-columns:1fr}.career-broadcast-topline::after{display:none}} .career-broadcast-pitch.motion-live .broadcast-team-markers i.ball-holder::after{content:attr(data-name);position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:max-content;max-width:120px;padding:2px 5px;border:1px solid rgba(255,223,40,.24);background:rgba(0,8,4,.86);color:#fff7b5;font-size:.38rem;font-style:normal;font-weight:1000;letter-spacing:.06em;white-space:nowrap;pointer-events:none} /* 0.7H · Store & Collection Economy ------------------------------------- */ .store-view{padding-bottom:82px} .store-header{align-items:flex-end;gap:24px;margin-bottom:22px;padding:24px 26px;border-color:rgba(181,255,47,.2);background:linear-gradient(105deg,rgba(10,24,8,.94),rgba(3,12,17,.88))} .store-header>div:first-child{max-width:880px}.store-header h1{margin-bottom:7px}.store-header p:not(.eyebrow){max-width:760px;color:#c1d0c4;font-size:.78rem;line-height:1.65} .store-wallet{min-width:190px;display:grid;gap:6px;justify-items:end;padding:12px 15px;border:1px solid rgba(221,255,63,.3);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:rgba(12,28,8,.72)} .store-wallet small{color:#b8ff35;font-size:.55rem;font-weight:1000;letter-spacing:.13em}.store-wallet b{display:flex;align-items:center;gap:8px;color:#fff27a;font:1000 1.55rem var(--display-font)} .store-card-market,.store-unlock-section{margin-bottom:18px;border-color:rgba(181,255,47,.13);background:linear-gradient(145deg,rgba(4,16,14,.9),rgba(4,12,20,.94))} .store-card-market-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:14px} .store-pack-card{position:relative;min-height:255px;display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px;overflow:hidden;border:1px solid rgba(181,255,47,.18);clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);background:linear-gradient(120deg,rgba(25,56,9,.5),rgba(3,14,19,.84))} .store-pack-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(195,255,77,.018) 0 1px,transparent 1px 5px)} .store-pack-card.foundation-pack{grid-template-columns:125px minmax(0,1fr);grid-template-rows:1fr auto;border-color:rgba(86,224,255,.16);background:linear-gradient(125deg,rgba(15,58,64,.34),rgba(3,14,19,.86))}.store-pack-card.foundation-pack .secondary-button{grid-column:1/-1}.store-pack-card.claimed{opacity:.62} .store-pack-visual{position:relative;z-index:1;width:142px;height:190px;display:grid;place-items:center;align-content:center;gap:6px;border:2px solid #b6ff32;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);background:radial-gradient(circle at 50% 40%,rgba(217,255,70,.24),transparent 42%),linear-gradient(155deg,#172f0d,#04131b 72%);box-shadow:inset 0 0 30px rgba(183,255,48,.1)} .store-pack-visual>span{color:#dfff4b;font-size:2.9rem}.store-pack-visual>b{color:white;font:1000 3.2rem/.9 var(--display-font)}.store-pack-visual>small{color:#d4ff66;font-size:.48rem;font-weight:1000;letter-spacing:.12em}.store-pack-visual.foundation{width:110px;height:145px;border-color:#5ee5ff;background:radial-gradient(circle,rgba(89,225,255,.18),transparent 48%),#071a21}.store-pack-visual.foundation>span{font:1000 2.9rem var(--display-font);color:#7ae8ff} .store-pack-copy{position:relative;z-index:1;display:grid;align-content:center;gap:7px}.store-pack-copy>small{color:#b7ff36;font-size:.55rem;font-weight:1000;letter-spacing:.14em}.foundation-pack .store-pack-copy>small{color:#6ee5ff}.store-pack-copy h3{margin:0;color:#fff36a;font:1000 1.6rem var(--display-font);font-style:italic;letter-spacing:-.03em}.store-pack-copy p{max-width:650px;margin:0;color:#b9c8c0;font-size:.67rem;line-height:1.62} .store-pack-odds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:7px}.store-pack-odds span{display:grid;gap:2px;padding:7px 8px;border-left:2px solid rgba(183,255,54,.35);background:rgba(0,0,0,.18)}.store-pack-odds i{color:#e7f3e9;font-size:.53rem;font-style:normal;font-weight:1000}.store-pack-odds b{color:#91a999;font-size:.45rem;letter-spacing:.1em} .store-pack-pity{margin-top:4px;color:#e7ff9c;font-size:.52rem;font-weight:1000;letter-spacing:.07em}.store-buy-pack{position:relative;z-index:1;min-width:205px;align-self:end;justify-self:end}.store-buy-pack .mini-ring{margin-right:5px} .store-world-packs{display:grid;gap:11px;margin-top:16px;padding:15px;border:1px solid rgba(105,219,255,.13);background:linear-gradient(135deg,rgba(5,18,26,.74),rgba(8,18,12,.66))} .store-world-packs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.store-world-packs-head>div{display:grid;gap:3px}.store-world-packs-head h3{margin:0;color:#fff36a;font:italic 1000 1.25rem var(--display-font)}.store-world-packs-head p{max-width:760px;margin:0;color:#9fb3aa;font-size:.58rem;line-height:1.55}.store-world-packs-head>span{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#ffe56f;font-size:.54rem;font-weight:1000;letter-spacing:.08em} .store-world-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.store-world-pack{--world-pack-accent:#8defff;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:112px;padding:11px;border:1px solid color-mix(in srgb,var(--world-pack-accent),transparent 75%);overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--world-pack-accent),transparent 91%),rgba(1,9,15,.76))}.store-world-pack::after{content:"";position:absolute;inset:auto -30px -55px auto;width:125px;height:125px;border-radius:50%;background:var(--world-pack-accent);filter:blur(50px);opacity:.08;pointer-events:none}.store-world-pack[data-world="sonic"]{--world-pack-accent:#39cfff}.store-world-pack[data-world="cars"]{--world-pack-accent:#ff6659}.store-world-pack[data-world="zootopia"]{--world-pack-accent:#55dcff}.store-world-pack[data-world="bundesliga"]{--world-pack-accent:#ff4058}.store-world-pack[data-world="dark-souls"]{--world-pack-accent:#ff9b39}.store-world-pack[data-world="sao"]{--world-pack-accent:#79aaff}.store-world-pack[data-world="spongebob"]{--world-pack-accent:#ffe54b}.store-world-pack[data-world="legacy"]{--world-pack-accent:#df69ff}.store-world-pack[data-world="crossworlds"]{--world-pack-accent:#7bffc9}.store-world-pack-icon{position:relative;z-index:1;display:grid;place-items:center;width:43px;height:58px;border:1px solid color-mix(in srgb,var(--world-pack-accent),transparent 55%);color:var(--world-pack-accent);background:rgba(0,0,0,.22);font-size:1.35rem}.store-world-pack-copy{position:relative;z-index:1;min-width:0;display:grid;gap:2px}.store-world-pack-copy small{color:color-mix(in srgb,var(--world-pack-accent),white 16%);font-size:.42rem;font-weight:1000;letter-spacing:.09em}.store-world-pack-copy h4{overflow:hidden;margin:0;color:#f4fbf6;font:italic 1000 .86rem var(--display-font);text-overflow:ellipsis;white-space:nowrap}.store-world-pack-copy p{overflow:hidden;margin:0;color:#9bad9f;font-size:.49rem;text-overflow:ellipsis;white-space:nowrap}.store-world-pack-copy span{color:#72877b;font-size:.43rem;font-weight:900;letter-spacing:.04em}.store-world-pack>button{position:relative;z-index:1;display:flex;align-items:center;gap:4px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--world-pack-accent),transparent 45%);color:#f4ffcb;background:color-mix(in srgb,var(--world-pack-accent),transparent 88%);font-size:.47rem;font-weight:1000;cursor:pointer;white-space:nowrap}.store-world-pack>button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.25)}.store-world-pack>button:disabled{opacity:.4;cursor:not-allowed}.store-world-pack.offline{opacity:.58;filter:saturate(.62)}.store-world-pack.offline .store-world-pack-copy p{color:#788980}.store-world-pack.offline>button{border-color:rgba(255,255,255,.09);color:#74847b;background:rgba(255,255,255,.025)} .store-pack-reveal{margin-top:14px;padding:15px;border:1px solid rgba(255,223,68,.22);background:rgba(5,16,16,.76)}.store-reveal-card{display:grid;grid-template-columns:145px 1fr;gap:19px;align-items:center}.store-reveal-art{height:190px;display:grid;place-items:center}.store-reveal-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 17px rgba(0,0,0,.42))}.store-reveal-copy{display:grid;gap:5px}.store-reveal-copy>small{color:#b6ff3b;font-size:.53rem;font-weight:1000;letter-spacing:.14em}.store-reveal-copy h2{margin:0;color:#fff16a;font:1000 2.1rem var(--display-font);font-style:italic}.store-reveal-copy p{margin:0;color:#b9c9c1;font-size:.64rem}.store-reveal-copy>strong{color:white;font:1000 1.65rem var(--display-font)}.store-reveal-copy>span{width:max-content;margin-top:4px;padding:7px 9px;font-size:.52rem;font-weight:1000;letter-spacing:.09em}.store-new-card{color:#cfff66;border:1px solid rgba(184,255,51,.28);background:rgba(94,150,14,.12)}.store-duplicate{color:#ffd96d;border:1px solid rgba(255,210,71,.25);background:rgba(164,112,13,.12)}.store-reveal-card.elite{background:radial-gradient(circle at 15% 50%,rgba(255,218,63,.08),transparent 24%)} .store-pack-history-head{display:flex;justify-content:space-between;gap:10px;margin:19px 0 9px;color:#b8ff3b;font-size:.53rem;font-weight:1000;letter-spacing:.12em}.store-pack-history-head small{color:#819a89}.store-pack-history{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.store-history-card{min-width:0;display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center;padding:7px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018)}.store-history-card img{width:50px;height:68px;object-fit:contain}.store-history-card span{min-width:0;display:grid;gap:2px}.store-history-card small{color:#799087;font-size:.43rem}.store-history-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.57rem}.store-history-card em{color:#c6dbca;font-size:.48rem;font-style:normal}.store-empty-row{grid-column:1/-1;margin:0;padding:12px;color:#809389;font-size:.61rem} .store-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.store-license-card{display:grid;grid-template-columns:48px 1fr auto;gap:11px;align-items:center;min-height:96px;padding:12px;border:1px solid color-mix(in srgb,var(--accent),transparent 84%);background:rgba(255,255,255,.018)}.store-license-icon{display:grid;place-items:center;width:43px;height:43px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent),transparent 68%);font-size:1rem}.store-license-card>div{display:grid;gap:2px}.store-license-card small{color:color-mix(in srgb,var(--accent),white 20%);font-size:.46rem;font-weight:1000;letter-spacing:.1em}.store-license-card b{font-size:.67rem}.store-license-card p{margin:0;color:#91a29a;font-size:.51rem;line-height:1.45}.store-license-card>button,.store-track-card>button{padding:8px 10px;border:1px solid rgba(205,255,63,.32);color:#dfff55;background:rgba(68,113,14,.16);font-size:.5rem;font-weight:1000;cursor:pointer}.store-license-card>strong{color:#8fff9e;font-size:.5rem;letter-spacing:.09em} .store-track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.store-track-card{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;min-height:66px;padding:8px 9px;border-left:2px solid color-mix(in srgb,var(--accent),transparent 40%);background:rgba(255,255,255,.017)}.store-track-card>span{color:var(--accent);font-size:.8rem}.store-track-card>div{min-width:0;display:grid;gap:1px}.store-track-card small{color:#73887e;font-size:.42rem;text-transform:uppercase}.store-track-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.56rem}.store-track-card em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#90a298;font-size:.44rem;font-style:normal}.store-track-card>strong{color:#83ec95;font-size:.48rem}.store-track-card>button{padding:6px 7px} .store-nav span{color:#dfff49} /* Collection ownership now comes from Store packs. Keep locked cards readable but unmistakably unowned. */ .collection-card-item.is-locked .cr-final-card-image{filter:saturate(.45) brightness(.58)} .collection-card-lock{background:linear-gradient(180deg,rgba(2,8,11,.12),rgba(2,8,11,.84) 65%,rgba(2,8,11,.94))} .collection-card-lock small{color:#d7ff73!important} /* 0.7H readability pass: less tiny HUD text, more breathing room and stronger contrast. */ .view p,.view li{line-height:1.62} .panel-heading small,.panel-heading span,.game-header p:not(.eyebrow){line-height:1.55} .eyebrow{letter-spacing:.105em!important} .status-line small,.world-row-copy small,.profile-stat-card small,.career-mini-stat small{letter-spacing:.075em!important} .track-copy small,.track-copy em,.world-portal-track small,.collection-card-caption small{font-size:max(.52rem,11px)!important;line-height:1.4} .profile-section p,.profile-page p,.career-dashboard p,.world-portal-section p{color:#b5c7be} .select-input,input,button{font-synthesis:none} @media(max-width:1180px){ .store-card-market-grid{grid-template-columns:1fr}.store-pack-card{grid-template-columns:140px 1fr}.store-buy-pack{grid-column:1/-1;width:100%;justify-self:stretch}.store-world-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:780px){ .store-header{align-items:stretch}.store-wallet{justify-items:start}.store-pack-card,.store-pack-card.foundation-pack{grid-template-columns:1fr}.store-pack-visual,.store-pack-visual.foundation{justify-self:center}.store-pack-odds{grid-template-columns:1fr 1fr}.store-world-packs-head{align-items:flex-start;flex-direction:column}.store-world-pack-grid{grid-template-columns:1fr}.store-world-pack{grid-template-columns:44px minmax(0,1fr)}.store-world-pack>button{grid-column:1/-1;justify-content:center}.store-pack-history{grid-template-columns:1fr 1fr}.store-game-grid,.store-track-grid{grid-template-columns:1fr}.store-reveal-card{grid-template-columns:110px 1fr}.store-reveal-art{height:150px} } @media(max-width:520px){.store-pack-history{grid-template-columns:1fr}.store-reveal-card{grid-template-columns:1fr}.store-reveal-copy{text-align:center;justify-items:center}} /* 0.7H navigation: Store is the ninth global destination. */ .reconstruction-shell .topnav{grid-template-columns:repeat(9,minmax(0,1fr))} @media(max-width:1380px){.reconstruction-shell .topnav{grid-template-columns:repeat(9,minmax(96px,1fr));overflow-x:auto}} @media(max-width:1100px){.reconstruction-shell .topnav{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;height:auto}} @media(max-width:680px){.reconstruction-shell .topnav{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 0.7I · Foundation Fix & Personal Club Identity ------------------------ */ .profile-favorite-club-picker{display:grid;gap:8px;margin:12px 0 16px;padding:14px;border:1px solid rgba(190,255,51,.12);background:rgba(6,20,18,.52);text-align:left} .profile-favorite-club-control{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center} .profile-favorite-club-control>img{width:58px;height:58px;object-fit:contain;padding:5px;border:1px solid rgba(190,255,51,.14);background:rgba(0,0,0,.25)} .profile-favorite-club-control>img[hidden]{display:grid;opacity:.12;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px)} .profile-favorite-club-picker>small{color:#8ea498;font-size:.58rem;line-height:1.5} .profile-favorite-club-card{min-height:220px}.profile-favorite-club-content{display:grid;gap:13px} .profile-favorite-club-hero{display:grid;grid-template-columns:92px minmax(0,1fr);gap:15px;align-items:center}.profile-favorite-club-hero>img{width:88px;height:88px;object-fit:contain;padding:7px;border:1px solid rgba(190,255,51,.16);background:rgba(0,0,0,.2);filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))} .profile-favorite-club-hero>div{display:grid;gap:3px}.profile-favorite-club-hero small{color:var(--u7-lime,#a9ff12);font-size:.53rem;font-weight:900;letter-spacing:.09em}.profile-favorite-club-hero h3{margin:0;color:var(--u7-yellow,#ffc400);font:italic 900 clamp(1.25rem,2vw,1.9rem)/1 var(--display-font)}.profile-favorite-club-hero p{margin:0;color:#9cad9f;font-size:.6rem;line-height:1.45} .profile-favorite-club-record{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.profile-favorite-club-record>span{display:grid;gap:3px;padding:9px;border-left:2px solid rgba(190,255,51,.28);background:rgba(0,0,0,.17)}.profile-favorite-club-record small{color:#839589;font-size:.45rem;font-weight:900;letter-spacing:.07em}.profile-favorite-club-record b{color:#f1f7ee;font:900 .84rem var(--display-font)}.profile-favorite-club-last{color:#839589;font-size:.5rem} .profile-best-pull-card{grid-column:1/-1}.profile-best-pull-content{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;min-height:195px}.profile-best-pull-art{padding:0;border:0;background:transparent;cursor:pointer}.profile-best-pull-art img{display:block;width:145px;height:190px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.44));transition:.18s ease}.profile-best-pull-art:hover img{transform:translateY(-4px) scale(1.02)}.profile-best-pull-content>div{display:grid;gap:5px}.profile-best-pull-content>div>small{color:#ffe46a;font-size:.51rem;font-weight:1000;letter-spacing:.1em}.profile-best-pull-content h3{margin:0;color:#fff36a;font:italic 1000 clamp(1.5rem,2.6vw,2.5rem)/.92 var(--display-font)}.profile-best-pull-content strong{color:#fff;font:1000 1.5rem var(--display-font)}.profile-best-pull-content p{margin:0;color:#a7b7ab;font-size:.6rem}.profile-best-pull-content em{color:#809286;font-size:.52rem;font-style:normal} #view-career-core .career-start-crest-options{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))} #view-career-core .career-start-crest-option.favorite-club{border-color:rgba(255,83,112,.42);background:linear-gradient(145deg,rgba(112,19,36,.22),rgba(1,10,24,.66))} #view-career-core .career-start-crest-option.favorite-club>span{position:absolute;left:5px;top:4px;display:grid;place-items:center;width:20px;height:20px;color:#ff6f89;background:rgba(4,10,17,.82);border:1px solid rgba(255,111,137,.28);font-size:.68rem} #view-career-core .career-start-crest-option.favorite-club.active{border-color:#ff6f89;box-shadow:0 0 0 2px rgba(255,111,137,.1),0 10px 24px rgba(0,0,0,.35)} .store-pack-walkout{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .22s ease}.store-pack-walkout[hidden]{display:none}.store-pack-walkout.show{opacity:1}.store-pack-walkout-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(216,255,61,.08),rgba(0,5,9,.96) 58%);backdrop-filter:blur(10px)}.store-pack-walkout[data-tier="ultra"] .store-pack-walkout-backdrop{background:radial-gradient(circle at 50% 50%,rgba(255,221,71,.16),rgba(0,5,9,.97) 60%)} .store-pack-walkout-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(191,255,52,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(191,255,52,.08) 1px,transparent 1px);background-size:34px 34px;transform:perspective(500px) rotateX(62deg) scale(1.6);transform-origin:center 70%} .store-pack-walkout-stage{position:relative;z-index:2;width:min(780px,94vw);min-height:560px;display:grid;place-items:center;align-content:center;gap:14px;overflow:hidden;text-align:center;border:1px solid rgba(190,255,51,.26);clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);background:linear-gradient(160deg,rgba(17,38,19,.68),rgba(2,11,17,.94));box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 0 70px rgba(184,255,52,.05)} .store-pack-walkout[data-tier="ultra"] .store-pack-walkout-stage{border-color:rgba(255,221,69,.48);box-shadow:0 34px 110px rgba(0,0,0,.66),inset 0 0 85px rgba(255,213,51,.09)} .store-pack-walkout-stage::before,.store-pack-walkout-stage::after{content:"";position:absolute;inset:-35%;pointer-events:none}.store-pack-walkout-stage::before{background:conic-gradient(from 0deg,transparent 0 9%,rgba(196,255,58,.15) 10%,transparent 11% 23%,rgba(196,255,58,.1) 24%,transparent 25% 100%);animation:packWalkoutSpin 8s linear infinite}.store-pack-walkout-stage::after{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px)} @keyframes packWalkoutSpin{to{transform:rotate(360deg)}} .store-pack-walkout-stage>small,.store-pack-walkout-core,.store-pack-walkout-card{position:relative;z-index:2}.store-pack-walkout-stage>small{color:#caff41;font-size:.67rem;font-weight:1000;letter-spacing:.18em;opacity:0;transform:translateY(8px)}.store-pack-walkout.show .store-pack-walkout-stage>small{animation:packRevealIn .45s .18s ease forwards} .store-pack-walkout-core{display:flex;align-items:center;justify-content:center;gap:15px;opacity:0;transform:scale(.9)}.store-pack-walkout-core span,.store-pack-walkout-core b{padding:8px 12px;border:1px solid rgba(196,255,58,.2);color:#d8f6c5;background:rgba(0,0,0,.25);font-size:.63rem;letter-spacing:.1em}.store-pack-walkout-core strong{color:#fff36a;font:italic 1000 clamp(3.8rem,8vw,6.6rem)/.8 var(--display-font);text-shadow:0 0 35px rgba(255,225,65,.3)}.store-pack-walkout.show .store-pack-walkout-core{animation:packRevealCore .55s .7s cubic-bezier(.2,.8,.2,1) forwards} .store-pack-walkout-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:center;width:min(620px,88%);opacity:0;transform:translateY(25px) scale(.94)}.store-pack-walkout-card img{width:215px;height:285px;object-fit:contain;filter:drop-shadow(0 22px 25px rgba(0,0,0,.55))}.store-pack-walkout-card h2{margin:0;color:#fff36a;font:italic 1000 clamp(1.7rem,4vw,3.4rem)/.9 var(--display-font);text-align:left}.store-pack-walkout-card p{margin:9px 0 0;color:#dae9d9;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-align:left}.store-pack-walkout.show .store-pack-walkout-card{animation:packRevealCard .7s 1.25s cubic-bezier(.15,.85,.25,1) forwards} .store-pack-walkout[data-tier="ultra"] .store-pack-walkout-core strong,.store-pack-walkout[data-tier="ultra"] .store-pack-walkout-card h2{color:#ffe266;text-shadow:0 0 38px rgba(255,219,75,.45)} @keyframes packRevealIn{to{opacity:1;transform:none}}@keyframes packRevealCore{to{opacity:1;transform:scale(1)}}@keyframes packRevealCard{to{opacity:1;transform:none}} @media(max-width:700px){.profile-favorite-club-record{grid-template-columns:1fr 1fr}.profile-best-pull-content{grid-template-columns:1fr;text-align:center}.profile-best-pull-art img{margin:auto}.store-pack-walkout-stage{min-height:500px}.store-pack-walkout-card{grid-template-columns:1fr;justify-items:center}.store-pack-walkout-card img{width:165px;height:220px}.store-pack-walkout-card h2,.store-pack-walkout-card p{text-align:center}} /* 0.8A · Bikini Bottom Signal collection integration */ .collection-world-tab.tone-aqua>span{background:linear-gradient(145deg,#20c9d5,#0b6074);box-shadow:inset 0 0 0 1px rgba(255,228,91,.28),0 0 18px rgba(70,225,235,.15)} .collection-world-page[data-universe="spongebob"]{--world-page-accent:#ffe45b;background:radial-gradient(circle at 84% 18%,rgba(255,228,91,.10),transparent 30%),linear-gradient(145deg,rgba(9,116,137,.18),rgba(3,17,31,.94))} /* 0.8B · Legacy Collection I */ .collection-world-tab.tone-legacy>span{background:linear-gradient(145deg,#ff49d5,#4934b8);box-shadow:inset 0 0 0 1px rgba(255,215,112,.28),0 0 18px rgba(216,74,255,.18)} .collection-world-page[data-universe="legacy"]{--world-page-accent:#e560ff;background:radial-gradient(circle at 82% 20%,rgba(255,69,211,.14),transparent 30%),radial-gradient(circle at 14% 78%,rgba(60,126,255,.12),transparent 34%),linear-gradient(145deg,rgba(56,16,103,.34),rgba(3,12,31,.96))} /* 0.8D · CAREER SIGNAL NETWORK ----------------------------------------- */ .profile-signal-intro{max-width:980px;margin:-4px 0 14px;color:#98a394;font-size:.58rem;line-height:1.55} .profile-signal-rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:8px} .profile-signal-rules>span{display:grid;gap:2px;padding:8px 10px;border:1px solid rgba(169,255,18,.08);background:rgba(0,0,0,.16)} .profile-signal-rules b{color:var(--u7-yellow,#ffc400);font:italic 900 .72rem var(--display-font)} .profile-signal-rules small{color:#7f8b7c;font-size:.4rem;font-weight:900;letter-spacing:.08em} .profile-signal-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:20px} .profile-signal-levels>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;padding:7px 9px;border-left:2px solid rgba(169,255,18,.3);background:linear-gradient(90deg,rgba(169,255,18,.05),transparent)} .profile-signal-levels b{color:var(--u7-lime,#a9ff12);font:italic 900 .58rem var(--display-font)} .profile-signal-levels small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8c9788;font-size:.39rem;font-weight:800} .profile-duo-grid{display:grid;grid-template-columns:1fr;gap:20px} .profile-signal-group{display:grid;gap:10px} .profile-signal-group>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.7fr) auto;gap:14px;align-items:center;padding:11px 12px;border-bottom:1px solid rgba(169,255,18,.11);background:linear-gradient(90deg,rgba(169,255,18,.045),transparent 72%)} .profile-signal-group>header>div{display:flex;align-items:center;gap:10px;min-width:0} .profile-signal-group>header>div>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(169,255,18,.16);background:rgba(0,0,0,.22);font-size:1rem} .profile-signal-group>header>div>div{display:grid;gap:1px;min-width:0} .profile-signal-group>header small{color:var(--u7-lime,#a9ff12);font-size:.43rem;font-weight:950;letter-spacing:.11em} .profile-signal-group>header h3{margin:0;color:#f1f4ed;font:italic 900 .9rem var(--display-font)} .profile-signal-group>header p{margin:0;color:#7e8b7a;font-size:.48rem;line-height:1.45} .profile-signal-group>header>strong{color:var(--u7-yellow,#ffc400);font:italic 900 .58rem var(--display-font);white-space:nowrap} .signal-group-crossworld>header{border-color:rgba(126,187,255,.22);background:linear-gradient(90deg,rgba(73,134,255,.09),transparent 72%)} .signal-group-crossworld>header small{color:#84c4ff}.signal-group-crossworld>header>div>span{border-color:rgba(126,187,255,.22)} .signal-group-world>header{border-color:rgba(255,196,0,.13);background:linear-gradient(90deg,rgba(255,196,0,.045),transparent 72%)} .profile-duo-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .profile-duo-card{position:relative;overflow:hidden;min-height:205px;opacity:.55} .profile-duo-card::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,rgba(169,255,18,.6),transparent);opacity:0;transition:.2s ease} .profile-duo-card.active::after{opacity:.7} .profile-duo-card.signal-level-3,.profile-duo-card.signal-level-4,.profile-duo-card.signal-level-5{box-shadow:inset 3px 0 0 rgba(169,255,18,.24)} .profile-duo-card.signal-level-5{border-color:rgba(255,196,0,.34);box-shadow:inset 3px 0 0 var(--u7-yellow,#ffc400),0 0 24px rgba(255,196,0,.06)} .profile-duo-copy{gap:6px;min-width:0} .profile-duo-copy>.profile-duo-signal-head{display:flex;grid-template-columns:none;align-items:center;justify-content:space-between;gap:8px;padding:0;border:0;background:transparent} .profile-duo-signal-head>small{color:var(--u7-lime,#a9ff12);font-size:.43rem;font-weight:950;letter-spacing:.09em} .profile-duo-signal-head>strong{color:var(--u7-yellow,#ffc400);font:italic 900 .62rem var(--display-font);white-space:nowrap} .profile-duo-card.signal-level-5 .profile-duo-signal-head>small,.profile-duo-card.signal-level-5 .profile-duo-signal-head>strong{color:var(--u7-yellow,#ffc400)} .profile-duo-copy>.profile-duo-xp{display:grid;grid-template-columns:1fr;gap:4px;padding:0;border:0;background:transparent} .profile-duo-xp>span{display:block;height:6px;overflow:hidden;border:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.035)} .profile-duo-xp>span>i{display:block;height:100%;background:linear-gradient(90deg,var(--u7-lime,#a9ff12),var(--u7-yellow,#ffc400));box-shadow:0 0 10px rgba(169,255,18,.18)} .profile-duo-xp>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#778574;font-size:.37rem;font-weight:900;letter-spacing:.035em} .profile-duo-copy>.profile-duo-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:0;border:0;background:transparent} .profile-duo-copy>.profile-duo-stats>span{display:grid;gap:2px;min-width:0;padding:6px 5px;border:1px solid rgba(255,255,255,.045);background:rgba(0,0,0,.14)} .profile-duo-copy>.profile-duo-stats b{color:var(--u7-yellow,#ffc400);font:italic 900 .72rem var(--display-font)} .profile-duo-copy>.profile-duo-stats small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#788475;font-size:.34rem} @media(max-width:1100px){ .profile-signal-rules,.profile-signal-levels{grid-template-columns:repeat(3,minmax(0,1fr))} .profile-duo-group-grid{grid-template-columns:1fr} } @media(max-width:760px){ .profile-signal-rules,.profile-signal-levels{grid-template-columns:1fr 1fr} .profile-signal-group>header{grid-template-columns:1fr auto}.profile-signal-group>header>p{grid-column:1/-1} .profile-duo-copy>.profile-duo-stats{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:480px){ .profile-duo-signals{padding:20px 16px!important} .profile-signal-rules,.profile-signal-levels{grid-template-columns:1fr} .profile-signal-group>header{grid-template-columns:1fr}.profile-signal-group>header>strong{justify-self:start} .profile-duo-copy>.profile-duo-stats{grid-template-columns:1fr 1fr} .profile-duo-copy>.profile-duo-signal-head{align-items:flex-start;flex-direction:column} } /* ======================================================================== 0.9A · LEGACY WORLD — PERSONAL SIGNAL MEMORY ======================================================================== */ .portal-legacy{--portal:#d477ff;--portal2:#4d9dff;--portal-bg:#210a45;--portal-scene:url("../assets/ui/worlds/legacy-signal-memory.svg");--portal-scene-position:center center} .unleashed-world-row.portal-legacy{--row-scene:url("../assets/ui/worlds/legacy-signal-memory.svg")} .unleashed-world-row.portal-legacy::after{background:linear-gradient(180deg,#ff6bcf,#8c6dff 48%,#59c8ff);opacity:.92} .unleashed-world-row.portal-legacy .world-row-copy small,.unleashed-world-row.portal-legacy .world-row-arrow{color:#f29cff!important;text-shadow:0 0 12px rgba(233,102,255,.4)} body[data-portal-world="legacy"]{ --portal-page:#e47cff; --portal-page-2:#58bfff; --portal-page-scene:url("../assets/ui/worlds/legacy-signal-memory.svg"); --portal-page-scene-position:center center; } body[data-portal-world="legacy"] .world-portal-header::after{background:linear-gradient(90deg,rgba(224,96,255,.45),rgba(87,183,255,.15) 55%,transparent)!important;opacity:.42!important} body[data-portal-world="legacy"] .world-portal-status{border-color:rgba(224,112,255,.45)!important;color:#f1b4ff!important;background:rgba(95,28,145,.34)!important} body[data-portal-world="legacy"] .world-portal-hero.portal-legacy{ --portal:#e57cff;--portal2:#5daeff;--portal-scene:url("../assets/ui/worlds/legacy-signal-memory.svg");--portal-scene-position:center center; border-color:rgba(224,112,255,.34)!important; background:linear-gradient(130deg,rgba(31,8,70,.87),rgba(10,19,58,.86))!important; box-shadow:0 28px 80px rgba(18,4,44,.46),0 0 40px rgba(186,82,255,.13)!important; } body[data-portal-world="legacy"] .world-portal-hero::before{ opacity:.9!important; background:linear-gradient(92deg,rgba(14,5,35,.86) 0 36%,rgba(19,7,47,.55) 58%,rgba(3,12,34,.42)),var(--portal-scene) var(--portal-scene-position)/cover no-repeat!important; } body[data-portal-world="legacy"] .world-portal-hero::after{border-color:#ef7bff!important;box-shadow:0 0 45px rgba(102,178,255,.2)!important} body[data-portal-world="legacy"] .world-portal-hero-copy h2{color:#ffd7ff!important;text-shadow:2px 3px 0 rgba(30,4,48,.78),0 0 30px rgba(224,91,255,.32)!important} body[data-portal-world="legacy"] .world-portal-hero-copy .eyebrow{color:#82d8ff!important} body[data-portal-world="legacy"] .world-portal-hero-stats>span{border-color:rgba(229,122,255,.2)!important;background:rgba(19,5,45,.62)!important} body[data-portal-world="legacy"] .world-portal-hero-stats b{color:#f39dff!important} body[data-portal-world="legacy"] .world-portal-orbit{border-color:rgba(235,133,255,.5)!important;box-shadow:0 0 42px rgba(95,190,255,.12)} body[data-portal-world="legacy"] .world-portal-orbit::before{border-color:rgba(99,191,255,.22)!important;box-shadow:0 0 42px rgba(226,101,255,.15)!important} body[data-portal-world="legacy"] .world-portal-hero-card span{color:#ffd0ff!important;border-color:rgba(229,120,255,.45)!important;background:#17092d!important} body[data-portal-world="legacy"] .primary-button{border-color:rgba(230,116,255,.7)!important;color:#ffe0ff!important;background:linear-gradient(90deg,rgba(112,31,159,.75),rgba(35,90,155,.55))!important} body[data-portal-world="legacy"] .primary-button:hover{color:#120723!important;background:linear-gradient(90deg,#ef91ff,#65c8ff)!important} body[data-portal-world="legacy"] .secondary-button{border-color:rgba(90,191,255,.4)!important;color:#aeeaff!important} body[data-portal-world="legacy"] .world-portal-stat-strip, body[data-portal-world="legacy"] .world-portal-section{border-color:rgba(199,105,255,.18)!important;background:linear-gradient(155deg,rgba(28,8,58,.76),rgba(5,19,48,.82))!important} body[data-portal-world="legacy"] .world-portal-stat-strip b, body[data-portal-world="legacy"] .status-tag.connected{color:#f1a5ff!important} body[data-portal-world="legacy"] .world-hopper-grid em, body[data-portal-world="legacy"] .world-portal-track em{color:#8edbff!important} .legacy-card-archive{overflow:hidden} .legacy-portal-card-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important} .legacy-portal-card{position:relative;gap:7px!important;padding:10px!important;border-color:rgba(209,114,255,.13)!important;background:linear-gradient(155deg,rgba(45,11,76,.46),rgba(4,18,45,.55))!important} .legacy-portal-card.uncollected{filter:saturate(.7);opacity:.74} .legacy-portal-card.collected{border-color:rgba(230,128,255,.3)!important;box-shadow:inset 0 0 22px rgba(194,86,255,.055)} .legacy-portal-card:hover{opacity:1;filter:none;transform:translateY(-4px)!important;border-color:#df81ff!important;box-shadow:0 14px 30px rgba(21,4,47,.35),0 0 18px rgba(200,91,255,.12)} .world-portal-card-art{position:relative;display:grid;place-items:center;min-width:0} .legacy-card-owned-state{position:absolute;left:5px;right:5px;bottom:4px;padding:5px 6px;border:1px solid rgba(218,134,255,.22);background:rgba(10,4,25,.82);color:#dda2ff;font-size:.43rem!important;font-style:normal;font-weight:1000;text-align:center;letter-spacing:.07em;backdrop-filter:blur(5px)} .legacy-portal-card.uncollected .legacy-card-owned-state{color:#8091ad;border-color:rgba(115,139,179,.18)} .legacy-portal-card-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px!important;margin-top:5px;padding:0!important} .legacy-portal-card-stats i{padding:4px 5px;border:1px solid rgba(216,120,255,.1);background:rgba(4,10,29,.5);color:#b9c8df;font-size:.45rem;font-style:normal;font-weight:800;text-align:center} .legacy-signal-network{position:relative;overflow:hidden} .legacy-signal-network::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 5%,rgba(229,108,255,.1),transparent 31%),radial-gradient(circle at 8% 92%,rgba(88,192,255,.08),transparent 29%)} .legacy-portal-signal-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .legacy-portal-signal{display:grid;gap:9px;padding:14px;border:1px solid rgba(214,116,255,.17);background:linear-gradient(135deg,rgba(49,12,82,.45),rgba(5,17,43,.6));clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)} .legacy-portal-signal.crossworld{border-color:rgba(87,194,255,.3);background:linear-gradient(135deg,rgba(37,16,89,.54),rgba(4,38,69,.6))} .legacy-portal-signal header{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center} .legacy-portal-signal header>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(222,125,255,.2);background:rgba(21,4,43,.65);font-size:.9rem} .legacy-portal-signal header>div{display:grid;gap:2px;min-width:0} .legacy-portal-signal header small{color:#d080f2;font-size:.44rem;font-weight:1000;letter-spacing:.09em} .legacy-portal-signal.crossworld header small{color:#79d4ff} .legacy-portal-signal header b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:.65rem} .legacy-portal-signal header strong{color:#f3a3ff;font:1000 1rem var(--display-font)} .legacy-signal-progress{height:5px;background:rgba(255,255,255,.055);overflow:hidden} .legacy-signal-progress i{display:block;height:100%;background:linear-gradient(90deg,#a367ff,#f06ad0 55%,#60c9ff);box-shadow:0 0 10px rgba(224,99,255,.3)} .legacy-signal-level{display:flex;justify-content:space-between;gap:8px;color:#9faec4;font-size:.48rem;font-weight:900;letter-spacing:.05em}.legacy-signal-level b{color:#dbc4ff} .legacy-signal-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.legacy-signal-stats span{display:grid;gap:2px;padding:6px 4px;border:1px solid rgba(218,121,255,.09);background:rgba(3,9,25,.38);text-align:center}.legacy-signal-stats small{color:#7789a6;font-size:.39rem;font-weight:900}.legacy-signal-stats b{color:#e5e8f1;font-size:.56rem} .legacy-portal-signal footer{color:#899ab5;font-size:.43rem;font-weight:900;letter-spacing:.06em} .legacy-achievement-section .world-portal-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .world-portal-achievement.legacy-achievement{opacity:.72;grid-template-columns:42px 1fr auto!important;border-color:rgba(205,110,255,.13)!important;background:linear-gradient(120deg,rgba(38,9,66,.34),rgba(5,18,44,.38))!important} .world-portal-achievement.legacy-achievement.unlocked{opacity:1;border-color:rgba(232,135,255,.38)!important;box-shadow:inset 0 0 22px rgba(214,98,255,.06)} .world-portal-achievement.legacy-achievement>div em{display:block;margin-top:4px;color:#c986ef!important;font-size:.43rem;font-style:normal;font-weight:1000;letter-spacing:.055em} .world-portal-achievement.legacy-achievement.epic>div em{color:#ff91df!important} .world-portal-achievement.legacy-achievement>strong{color:#7588a5;font-size:.43rem;font-weight:1000;letter-spacing:.06em;white-space:nowrap} .world-portal-achievement.legacy-achievement.unlocked>strong{color:#88dfff} @media(max-width:1180px){.legacy-portal-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.legacy-signal-stats{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:850px){.legacy-portal-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.legacy-portal-signal-grid{grid-template-columns:1fr}.legacy-achievement-section .world-portal-achievement-grid{grid-template-columns:1fr}} @media(max-width:620px){.legacy-portal-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.legacy-signal-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.world-portal-achievement.legacy-achievement{grid-template-columns:38px 1fr!important}.world-portal-achievement.legacy-achievement>strong{grid-column:2}} /* 0.9A generic portal achievement status (status markup now uses ) */ .world-portal-achievement > strong{ color:#6f8295; font-size:.48rem; font-weight:1000; letter-spacing:.06em; white-space:nowrap; text-transform:uppercase; } .world-portal-achievement.unlocked > strong{color:#ffd365} /* 0.9C · Chatter Chess Stability & Story Polish · Reconnect Crown finale */ .chess-crown-finale { position:relative; max-width:980px; margin:28px auto; padding:clamp(34px,6vw,72px) clamp(24px,6vw,68px); text-align:center; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 18%,rgba(255,91,209,.16),transparent 34%),radial-gradient(circle at 22% 80%,rgba(95,96,255,.15),transparent 36%),linear-gradient(150deg,rgba(12,18,45,.97),rgba(27,12,50,.96) 55%,rgba(8,29,55,.96)); border-color:rgba(129,184,255,.3); box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 70px rgba(160,72,255,.10); } .chess-crown-finale::before,.chess-crown-finale::after { content:""; position:absolute; inset:auto; width:360px; height:360px; border:1px solid rgba(108,223,255,.12); border-radius:50%; z-index:-1; animation:crownDrift 12s linear infinite; } .chess-crown-finale::before { left:-170px; top:-170px; box-shadow:0 0 0 42px rgba(255,77,203,.025),0 0 0 92px rgba(91,91,255,.02); } .chess-crown-finale::after { right:-190px; bottom:-190px; animation-direction:reverse; box-shadow:0 0 0 52px rgba(85,222,255,.025),0 0 0 108px rgba(255,77,203,.018); } .crown-signal-orbit { position:relative; width:190px; height:190px; margin:0 auto 22px; display:grid; place-items:center; } .crown-signal-orbit::before,.crown-signal-orbit::after,.crown-signal-orbit i { content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(104,225,255,.28); } .crown-signal-orbit::after { inset:20px; border-color:rgba(255,87,205,.3); animation:crownPulse 2.8s ease-in-out infinite; } .crown-signal-orbit i:nth-child(1){inset:8px;border-top-color:#8feeff;animation:crownSpin 5s linear infinite}.crown-signal-orbit i:nth-child(2){inset:31px;border-right-color:#ff7bd7;animation:crownSpin 7s linear infinite reverse}.crown-signal-orbit i:nth-child(3){inset:48px;border-bottom-color:#8d7cff;animation:crownSpin 4s linear infinite} .crown-signal-orbit span { position:relative; z-index:2; font-size:6.4rem; line-height:1; color:#ffe26c; text-shadow:0 0 18px rgba(255,226,108,.5),0 0 48px rgba(255,94,211,.24); animation:crownFloat 2.7s ease-in-out infinite; } .chess-crown-finale h2 { margin:2px 0 12px; font-size:clamp(2.8rem,7vw,6rem); letter-spacing:.04em; background:linear-gradient(90deg,#8feeff,#df8dff 44%,#ff83cd 70%,#ffe478); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 10px 45px rgba(130,110,255,.14); } .crown-finale-copy { max-width:720px; margin:0 auto 28px; color:var(--muted); line-height:1.7; font-size:clamp(.9rem,1.7vw,1.06rem); }.crown-finale-copy b{color:#fff} .crown-finale-grid { max-width:720px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.crown-finale-grid div{min-height:94px;padding:16px 10px;display:grid;align-content:center;gap:7px;border:1px solid rgba(128,205,255,.18);border-radius:16px;background:rgba(8,17,42,.62);box-shadow:inset 0 0 25px rgba(91,117,255,.05)}.crown-finale-grid span{font-size:.6rem;font-weight:1000;letter-spacing:.13em;color:var(--muted)}.crown-finale-grid b{font-size:1.15rem;color:#9ceaff} .crown-final-line { max-width:700px; margin:30px auto 0; display:flex; align-items:center; gap:14px; color:#ffe16b; font-size:.72rem; letter-spacing:.15em; }.crown-final-line span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,225,107,.45),transparent)} .crown-finale-actions{margin-top:25px}.story-map-actions #chess-story-finale-button:not([hidden]){box-shadow:0 0 28px rgba(255,94,209,.16)} @keyframes crownSpin{to{transform:rotate(360deg)}}@keyframes crownFloat{50%{transform:translateY(-8px) scale(1.025)}}@keyframes crownPulse{50%{transform:scale(1.07);opacity:.65}}@keyframes crownDrift{to{transform:rotate(360deg)}} @media (max-width:720px){.crown-finale-grid{grid-template-columns:repeat(2,1fr)}.crown-signal-orbit{width:150px;height:150px}.crown-signal-orbit span{font-size:5rem}} /* ================================================================ 0.9D · RING RUSH FAIR PLAY & ECONOMY POLISH ================================================================ */ .profile-ring-rush-card{grid-column:1/-1;padding:26px 28px!important;overflow:hidden;position:relative} .profile-ring-rush-card::after{content:'◎';position:absolute;right:-22px;top:-92px;font:italic 1000 15rem var(--display-font);color:rgba(255,216,61,.035);pointer-events:none} .profile-ring-rush-card>*{position:relative;z-index:1} .profile-ring-rush-intro{max-width:780px;margin:2px 0 18px;color:var(--muted);line-height:1.55} .profile-ring-rush-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .profile-ring-rush-stats>span{display:grid;gap:5px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)} .profile-ring-rush-stats small,.profile-ring-route small,.profile-ring-difficulties small{color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.09em} .profile-ring-rush-stats b{color:var(--u7-yellow,#ffc400);font:italic 900 1.22rem var(--display-font)} .profile-ring-rush-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px} .profile-ring-route{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(88,231,255,.12);border-radius:14px;background:rgba(3,13,29,.55)} .profile-ring-route.favorite{border-color:rgba(255,216,61,.42);box-shadow:inset 0 0 28px rgba(255,216,61,.035)} .profile-ring-route>div{display:grid;gap:4px;min-width:0}.profile-ring-route>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .profile-ring-route>span{display:grid;justify-items:end;gap:2px}.profile-ring-route strong{font:italic 900 1rem var(--display-font);color:var(--green)} .profile-ring-difficulties{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .profile-ring-difficulties>span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.02)} .profile-ring-difficulties b{color:var(--cyan);font:italic 900 1rem var(--display-font)} .ring-route-card small{line-height:1.35} @media(max-width:900px){.profile-ring-rush-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-ring-rush-routes{grid-template-columns:1fr}.profile-ring-difficulties{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.profile-ring-rush-card{padding:18px!important}.profile-ring-rush-stats{grid-template-columns:1fr 1fr}.profile-ring-difficulties{grid-template-columns:1fr}.profile-ring-route{grid-template-columns:minmax(0,1fr) auto}.profile-ring-route>span:last-child{display:none}} /* 0.9F · Penalty Rush pressure records */ .profile-penalty-card{grid-column:1/-1;padding:26px 28px!important;overflow:hidden;position:relative} .profile-penalty-card::after{content:'🥅';position:absolute;right:18px;top:-34px;font-size:9rem;opacity:.035;filter:grayscale(1);pointer-events:none} .profile-penalty-card>*{position:relative;z-index:1} .profile-penalty-intro{max-width:820px;margin:2px 0 18px;color:var(--muted);line-height:1.55} .profile-penalty-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .profile-penalty-stats>span{display:grid;gap:5px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)} .profile-penalty-stats small,.profile-penalty-difficulty small,.profile-penalty-arena small{color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.09em} .profile-penalty-stats b{color:var(--u7-yellow,#ffc400);font:italic 900 1.22rem var(--display-font)} .profile-penalty-difficulty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px} .profile-penalty-difficulty>span{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)} .profile-penalty-difficulty>span small{grid-column:1} .profile-penalty-difficulty>span b{grid-column:2;grid-row:1/3;color:var(--u7-yellow,#ffc400);font:italic 900 1.35rem var(--display-font)} .profile-penalty-difficulty>span em{grid-column:1;color:var(--muted);font-style:normal;font-size:.72rem} .profile-penalty-arenas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px} .profile-penalty-arena{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.02)} .profile-penalty-arena.active{border-color:rgba(255,216,61,.2);background:rgba(255,216,61,.035)} .profile-penalty-arena>div{display:grid;gap:2px;min-width:0} .profile-penalty-arena>div b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profile-penalty-arena>span{display:grid;text-align:center;gap:1px} .profile-penalty-arena>span strong{font:italic 900 1rem var(--display-font)} .profile-penalty-arena>em{min-width:44px;text-align:right;color:var(--u7-yellow,#ffc400);font:italic 900 .9rem var(--display-font)} @media(max-width:900px){.profile-penalty-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-penalty-arenas{grid-template-columns:1fr}} @media(max-width:560px){.profile-penalty-card{padding:18px!important}.profile-penalty-stats{grid-template-columns:1fr 1fr}.profile-penalty-difficulty{grid-template-columns:1fr}.profile-penalty-arena{grid-template-columns:minmax(0,1fr) auto auto}.profile-penalty-arena>em{display:none}} /* ================================================================ 0.9G · SIGNAL DASH RHYTHM & CHECKPOINT POLISH ================================================================ */ .profile-signal-dash-card{grid-column:1/-1;padding:26px 28px!important;overflow:hidden;position:relative} .profile-signal-dash-card::after{content:'◆';position:absolute;right:-20px;top:-94px;font:italic 1000 15rem var(--display-font);color:rgba(255,85,125,.035);pointer-events:none} .profile-signal-dash-card>*{position:relative;z-index:1} .profile-signal-dash-intro{max-width:860px;margin:2px 0 18px;color:var(--muted);line-height:1.55} .profile-signal-dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .profile-signal-dash-stats>span{display:grid;gap:5px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)} .profile-signal-dash-stats small,.profile-signal-dash-level small{color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.09em} .profile-signal-dash-stats b{color:#ff7899;font:italic 900 1.22rem var(--display-font)} .profile-signal-dash-levels{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px} .profile-signal-dash-level{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(88px,.55fr));align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02)} .profile-signal-dash-level.active{border-color:rgba(255,85,125,.2);background:linear-gradient(100deg,rgba(255,85,125,.045),rgba(88,231,255,.018))} .profile-signal-dash-level>div{display:grid;gap:3px;min-width:0}.profile-signal-dash-level>div b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-signal-dash-level>div em{color:var(--muted);font-size:.68rem;font-style:normal} .profile-signal-dash-level>span{display:grid;gap:3px;text-align:right}.profile-signal-dash-level strong{font:italic 900 1rem var(--display-font);color:var(--cyan)} @media(max-width:980px){.profile-signal-dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-signal-dash-level{grid-template-columns:minmax(190px,1.3fr) repeat(2,minmax(80px,.6fr))}.profile-signal-dash-level>span:nth-of-type(3),.profile-signal-dash-level>span:nth-of-type(4){display:none}} @media(max-width:560px){.profile-signal-dash-card{padding:18px!important}.profile-signal-dash-stats{grid-template-columns:1fr 1fr}.profile-signal-dash-level{grid-template-columns:minmax(0,1fr) auto}.profile-signal-dash-level>span:not(:first-of-type){display:none}} /* 0.9H · Data Rush Archive Expansion */ .profile-data-rush-card{overflow:hidden;position:relative;background:linear-gradient(145deg,rgba(8,19,36,.96),rgba(19,12,48,.95) 52%,rgba(13,40,56,.94));} .profile-data-rush-card:before{content:"";position:absolute;inset:-40% 35% auto -15%;height:210px;background:radial-gradient(circle,rgba(108,84,255,.18),transparent 67%);pointer-events:none;} .profile-data-rush-intro{color:var(--muted);max-width:880px;margin:.35rem 0 1rem;} .profile-data-rush-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:.85rem;} .profile-data-rush-stats>span,.profile-data-rush-modes>span,.profile-data-rush-categories>span{background:rgba(7,14,28,.7);border:1px solid rgba(128,170,255,.16);border-radius:14px;padding:.72rem .8rem;display:flex;flex-direction:column;gap:.14rem;} .profile-data-rush-stats small,.profile-data-rush-modes small,.profile-data-rush-categories small{font-size:.68rem;letter-spacing:.08em;color:var(--muted);} .profile-data-rush-stats b{font-size:1.08rem;} .profile-data-rush-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-bottom:.65rem;} .profile-data-rush-categories>span.active{border-color:rgba(115,213,255,.38);box-shadow:inset 0 0 20px rgba(91,114,255,.07);} .profile-data-rush-categories b{font-size:1.3rem;line-height:1;} .profile-data-rush-categories em{font-style:normal;color:var(--muted);font-size:.76rem;} .profile-data-rush-modes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;} .profile-data-rush-modes b{font-size:1.05rem;} @media(max-width:900px){.profile-data-rush-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.profile-data-rush-categories{grid-template-columns:repeat(2,minmax(0,1fr));}.profile-data-rush-modes{grid-template-columns:repeat(3,minmax(0,1fr));}} /* ================================================================ 0.9I · CROSSWORLDS & UNIVERSAL WORLD CARD ARCHIVES ================================================================ */ .portal-crossworlds{ --portal:#e06cff;--portal2:#55dcff;--portal-bg:#130a45; --portal-scene:url("../assets/ui/worlds/crossworlds-nexus.svg");--portal-scene-position:center center; } .world-portal-hero.portal-crossworlds{ --portal:#e06cff;--portal2:#55dcff; --portal-scene:url("../assets/ui/worlds/crossworlds-nexus.svg");--portal-scene-position:center center; border-color:rgba(209,105,255,.3); background:linear-gradient(135deg,rgba(29,8,69,.88),rgba(4,35,62,.85)); box-shadow:0 28px 80px rgba(6,3,34,.52),0 0 42px rgba(117,91,255,.14); } .unleashed-world-row.portal-crossworlds{--row-scene:url("../assets/ui/worlds/crossworlds-nexus.svg")} .unleashed-world-row.portal-crossworlds::after{background:linear-gradient(180deg,#ef75ff,#9b66ff 47%,#55dcff);opacity:.95} .unleashed-world-row.portal-crossworlds .world-row-copy small, .unleashed-world-row.portal-crossworlds .world-row-arrow{color:#c793ff!important;text-shadow:0 0 12px rgba(107,205,255,.35)} body[data-portal-world="crossworlds"]{ --portal-page:#e06cff;--portal-page-2:#55dcff; --portal-page-scene:url("../assets/ui/worlds/crossworlds-nexus.svg");--portal-page-scene-position:center center; } body[data-portal-world="crossworlds"] .world-portal-header::after{background:linear-gradient(90deg,rgba(224,108,255,.48),rgba(85,220,255,.18) 55%,transparent)!important;opacity:.45!important} body[data-portal-world="crossworlds"] .world-portal-status{border-color:rgba(224,108,255,.45)!important;color:#f1c5ff!important;background:rgba(77,25,132,.35)!important} body[data-portal-world="crossworlds"] .world-portal-hero::before{ opacity:.92!important; background:linear-gradient(92deg,rgba(10,4,34,.88) 0 35%,rgba(22,9,59,.5) 61%,rgba(2,25,47,.42)),var(--portal-scene) var(--portal-scene-position)/cover no-repeat!important; } body[data-portal-world="crossworlds"] .world-portal-hero-copy h2{color:#f9dcff!important;text-shadow:2px 3px 0 rgba(21,4,44,.82),0 0 31px rgba(204,89,255,.34)!important} body[data-portal-world="crossworlds"] .world-portal-hero-copy .eyebrow{color:#76e6ff!important} body[data-portal-world="crossworlds"] .world-portal-hero-stats>span{border-color:rgba(224,108,255,.19)!important;background:rgba(16,5,44,.62)!important} body[data-portal-world="crossworlds"] .world-portal-hero-stats b{color:#efadff!important} body[data-portal-world="crossworlds"] .world-portal-orbit{border-color:rgba(235,136,255,.5)!important;box-shadow:0 0 44px rgba(85,220,255,.13)} body[data-portal-world="crossworlds"] .world-portal-orbit::before{border-color:rgba(85,220,255,.26)!important;box-shadow:0 0 42px rgba(224,108,255,.16)!important} body[data-portal-world="crossworlds"] .world-portal-hero-card span{color:#f3d1ff!important;border-color:rgba(221,116,255,.45)!important;background:#130729!important} body[data-portal-world="crossworlds"] .primary-button{border-color:rgba(222,112,255,.7)!important;color:#ffe6ff!important;background:linear-gradient(90deg,rgba(113,34,168,.76),rgba(31,111,159,.58))!important} body[data-portal-world="crossworlds"] .primary-button:hover{color:#10051f!important;background:linear-gradient(90deg,#ef98ff,#69e3ff)!important} body[data-portal-world="crossworlds"] .secondary-button{border-color:rgba(85,220,255,.42)!important;color:#a9efff!important} body[data-portal-world="crossworlds"] .world-portal-stat-strip, body[data-portal-world="crossworlds"] .world-portal-section{border-color:rgba(189,105,255,.19)!important;background:linear-gradient(155deg,rgba(28,8,61,.78),rgba(4,25,49,.84))!important} .collection-world-tab.tone-crossworlds>span{ background:linear-gradient(145deg,#ee6fff,#6244d8 52%,#46cdea); box-shadow:inset 0 0 0 1px rgba(223,197,255,.3),0 0 20px rgba(151,83,255,.2); } .collection-world-page[data-universe="crossworlds"]{ --world-page-accent:#df71ff; background:radial-gradient(circle at 82% 18%,rgba(87,220,255,.14),transparent 31%),radial-gradient(circle at 14% 78%,rgba(225,104,255,.17),transparent 35%),linear-gradient(145deg,rgba(40,12,91,.38),rgba(3,16,37,.97)); } /* The Legacy archive layout is now the default for every world. */ .world-card-archive{overflow:hidden} .world-archive-card-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important} .world-archive-card{position:relative;gap:7px!important;padding:10px!important;border-color:color-mix(in srgb,var(--portal-page,#65dfff),transparent 84%)!important;background:linear-gradient(155deg,color-mix(in srgb,var(--portal-page,#65dfff),transparent 91%),rgba(4,18,43,.57))!important} .world-archive-card.uncollected{filter:saturate(.62);opacity:.7} .world-archive-card.collected{border-color:color-mix(in srgb,var(--portal-page,#65dfff),transparent 64%)!important;box-shadow:inset 0 0 24px color-mix(in srgb,var(--portal-page,#65dfff),transparent 94%)} .world-archive-card:hover{opacity:1;filter:none;transform:translateY(-4px)!important;border-color:var(--portal-page,#65dfff)!important;box-shadow:0 14px 31px rgba(0,0,0,.36),0 0 18px color-mix(in srgb,var(--portal-page,#65dfff),transparent 86%)} .world-card-owned-state{position:absolute;left:5px;right:5px;bottom:4px;padding:5px 6px;border:1px solid color-mix(in srgb,var(--portal-page,#65dfff),transparent 76%);background:rgba(5,9,26,.84);color:color-mix(in srgb,var(--portal-page,#65dfff),white 18%);font-size:.43rem!important;font-style:normal;font-weight:1000;text-align:center;letter-spacing:.07em;backdrop-filter:blur(5px)} .world-archive-card.uncollected .world-card-owned-state{color:#8091ad;border-color:rgba(115,139,179,.18)} .world-portal-card-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px!important;margin-top:5px;padding:0!important} .world-portal-card-stats i{padding:4px 5px;border:1px solid color-mix(in srgb,var(--portal-page,#65dfff),transparent 89%);background:rgba(4,10,29,.52);color:#bdc9dc;font-size:.45rem;font-style:normal;font-weight:800;text-align:center} .world-achievement-section .world-portal-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .world-portal-achievement.world-signature-achievement{opacity:.72;grid-template-columns:42px 1fr auto!important;border-color:color-mix(in srgb,var(--portal-page,#65dfff),transparent 86%)!important;background:linear-gradient(120deg,color-mix(in srgb,var(--portal-page,#65dfff),transparent 94%),rgba(5,18,44,.42))!important} .world-portal-achievement.world-signature-achievement.unlocked{opacity:1;border-color:color-mix(in srgb,var(--portal-page,#65dfff),transparent 60%)!important;box-shadow:inset 0 0 22px color-mix(in srgb,var(--portal-page,#65dfff),transparent 94%)} .world-portal-achievement.world-signature-achievement>div em{display:block;margin-top:4px;color:color-mix(in srgb,var(--portal-page,#65dfff),white 15%)!important;font-size:.43rem;font-style:normal;font-weight:1000;letter-spacing:.055em} .world-portal-achievement.world-signature-achievement.rare>div em{color:#78d8ff!important} .world-portal-achievement.world-signature-achievement.epic>div em{color:#d995ff!important} .world-portal-achievement.world-signature-achievement.legendary>div em{color:#ffd66f!important;text-shadow:0 0 11px rgba(255,207,91,.22)} .world-portal-achievement.world-signature-achievement>strong{color:#7588a5;font-size:.43rem;font-weight:1000;letter-spacing:.06em;white-space:nowrap} .world-portal-achievement.world-signature-achievement.unlocked>strong{color:color-mix(in srgb,var(--portal-page,#65dfff),white 20%)} @media(max-width:1180px){.world-archive-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(max-width:850px){.world-archive-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.world-achievement-section .world-portal-achievement-grid{grid-template-columns:1fr}} @media(max-width:620px){.world-archive-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.world-portal-achievement.world-signature-achievement{grid-template-columns:38px 1fr!important}.world-portal-achievement.world-signature-achievement>strong{grid-column:2}} /* 0.9I · BUNDESLIGA WORLD PORTAL — all card worlds remain visible in the Hub */ .portal-bundesliga{ --portal:#72ef9b;--portal2:#f5f8ff;--portal-bg:#0b2d24; --portal-scene:url("../assets/ui/tabs/career-stadium.webp");--portal-scene-position:center 54% } .unleashed-world-row.portal-bundesliga{--row-scene:url("../assets/ui/tabs/career-stadium.webp")} .unleashed-world-row.portal-bundesliga::after{background:linear-gradient(180deg,#72ef9b,#f3f7ff 48%,#4ea47b);opacity:.93} .unleashed-world-row.portal-bundesliga .world-row-copy small, .unleashed-world-row.portal-bundesliga .world-row-arrow{color:#9dffc0!important;text-shadow:0 0 12px rgba(97,235,150,.35)} body[data-portal-world="bundesliga"]{ --portal-page:#72ef9b;--portal-page-2:#f5f8ff; --portal-page-scene:url("../assets/ui/tabs/career-stadium.webp");--portal-page-scene-position:center 54% } body[data-portal-world="bundesliga"] .world-portal-status{border-color:rgba(114,239,155,.48)!important;color:#baffcf!important;background:rgba(8,57,39,.42)!important} body[data-portal-world="bundesliga"] .world-portal-header::after{background:linear-gradient(90deg,rgba(114,239,155,.46),rgba(245,248,255,.13) 58%,transparent)!important;opacity:.44!important} .world-portal-hero.portal-bundesliga{ --portal:#72ef9b;--portal2:#f5f8ff; --portal-scene:url("../assets/ui/tabs/career-stadium.webp");--portal-scene-position:center 54% } body[data-portal-world="bundesliga"] .world-portal-hero-copy h2{color:#eafff1!important;text-shadow:2px 3px 0 rgba(2,28,18,.82),0 0 30px rgba(105,235,151,.28)!important} body[data-portal-world="bundesliga"] .world-portal-hero-copy .eyebrow, body[data-portal-world="bundesliga"] .world-portal-hero-stats b, body[data-portal-world="bundesliga"] .world-portal-stat-strip b{color:#9dffc0!important} /* 1.0 Candidate B · Pre-Online Info + Save Safety */ .reconstruction-shell .topnav{grid-template-columns:repeat(10,minmax(0,1fr))} .info-view{padding-bottom:56px} .info-heading{align-items:center} .info-version-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid rgba(143,224,26,.28);background:rgba(143,224,26,.07);color:#dfffab;font-size:.66rem;font-weight:950;letter-spacing:.12em;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)} .info-mason-note{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:34px!important;margin-bottom:22px;background:linear-gradient(135deg,rgba(34,106,160,.18),rgba(8,20,31,.88) 45%,rgba(130,69,163,.12));border-color:rgba(88,231,255,.2)!important;position:relative;overflow:hidden} .info-mason-note::after{content:"";position:absolute;inset:auto -80px -120px auto;width:290px;height:290px;border-radius:50%;border:1px solid rgba(88,231,255,.1);box-shadow:0 0 60px rgba(88,231,255,.05)} .info-mason-mark{display:grid;align-content:start;justify-items:start;gap:7px;border-right:1px solid rgba(255,255,255,.08);padding-right:24px}.info-mason-mark>span{font-size:3rem;filter:drop-shadow(0 0 14px rgba(88,231,255,.22))}.info-mason-mark>b{font-size:1.35rem;letter-spacing:.13em}.info-mason-mark>small{color:var(--cyan);font-weight:900;letter-spacing:.14em} .info-mason-copy{position:relative;z-index:1}.info-mason-copy p{margin:0 0 13px;color:#dce9f2;line-height:1.75;font-size:.95rem}.info-mason-copy p:last-child{margin-bottom:0;color:white} .info-quick-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 30px}.info-quick-strip>span{display:grid;gap:4px;padding:14px 16px;background:rgba(6,18,28,.78);border:1px solid rgba(255,255,255,.07);border-left:3px solid rgba(143,224,26,.7)}.info-quick-strip b{font-size:.72rem;letter-spacing:.06em}.info-quick-strip small{color:var(--muted);font-size:.62rem} .info-section{margin-top:32px}.info-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.info-feature-card{display:grid;grid-template-columns:58px 1fr;gap:17px;min-height:180px;padding:22px!important}.info-feature-card>span{width:52px;height:52px;display:grid;place-items:center;background:rgba(88,231,255,.07);border:1px solid rgba(88,231,255,.16);font-size:1.45rem}.info-feature-card h3,.info-arcade-card h3,.info-help-card h3{margin:0 0 8px;font-size:1.12rem}.info-feature-card p,.info-arcade-card p,.info-help-card p{margin:0;color:#aebfca;line-height:1.6}.info-feature-card small{display:block;margin-top:12px;color:#bde585;font-size:.64rem;font-weight:850;letter-spacing:.05em} .info-arcade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-arcade-card{position:relative;display:grid;grid-template-columns:42px 54px 1fr;gap:14px;align-items:start;padding:20px;background:linear-gradient(135deg,rgba(5,17,27,.88),rgba(13,31,44,.72));border:1px solid rgba(255,255,255,.075);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.info-arcade-card>strong{color:rgba(255,255,255,.28);font-size:.82rem;letter-spacing:.08em}.info-arcade-card>span{width:48px;height:48px;display:grid;place-items:center;background:rgba(143,224,26,.08);border:1px solid rgba(143,224,26,.16);font-size:1.3rem}.info-arcade-card p{font-size:.84rem} .info-help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.info-help-card{display:grid;grid-template-columns:50px 1fr;gap:15px;padding:22px!important}.info-help-card>span{font-size:1.65rem}.info-help-card .secondary-button{margin-top:15px}.info-fan-note{margin-top:30px;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;padding:15px 18px;border:1px solid rgba(255,255,255,.07);background:rgba(4,12,19,.7);color:#7f919e;font-size:.68rem;line-height:1.5}.info-fan-note b{color:#bfd18d;letter-spacing:.1em;white-space:nowrap} .profile-save-tools{grid-column:1/-1}.profile-save-intro{max-width:900px;color:#aebfca;line-height:1.6}.profile-save-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.profile-save-danger{border-color:rgba(255,90,102,.35)!important;color:#ffb4bb!important}.profile-save-danger:hover{background:rgba(255,90,102,.08)!important}.profile-save-hints{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.profile-save-hints>span{display:grid;gap:5px;padding:13px 14px;background:rgba(2,12,18,.6);border:1px solid rgba(255,255,255,.065)}.profile-save-hints b{font-size:.68rem;color:#d9f6a8;letter-spacing:.08em}.profile-save-hints small{color:#899ba7;line-height:1.45}.profile-save-warning{margin:14px 0 0;padding:12px 14px;border-left:3px solid #e6bb51;background:rgba(230,187,81,.06);color:#b8aaa0;font-size:.76rem;line-height:1.5}.profile-save-warning b{color:#efd47d} @media(max-width:1380px){.reconstruction-shell .topnav{grid-template-columns:repeat(10,minmax(96px,1fr));overflow-x:auto}} @media(max-width:1100px){.reconstruction-shell .topnav{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;height:auto}.info-help-grid{grid-template-columns:1fr}.info-quick-strip{grid-template-columns:repeat(2,1fr)}} @media(max-width:780px){.info-mason-note{grid-template-columns:1fr}.info-mason-mark{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:0 0 18px}.info-feature-grid,.info-arcade-grid{grid-template-columns:1fr}.profile-save-hints{grid-template-columns:1fr}.profile-save-actions>*{width:100%}.info-fan-note{grid-template-columns:1fr}} @media(max-width:680px){.reconstruction-shell .topnav{grid-template-columns:repeat(3,minmax(0,1fr))}.info-quick-strip{grid-template-columns:1fr}.info-arcade-card{grid-template-columns:34px 44px 1fr;padding:16px}.info-arcade-card>span{width:40px;height:40px}} /* 1.0 Candidate C · personal first-start project note */ body.first-project-welcome-open{overflow:hidden} .first-project-welcome{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:28px;opacity:0;transition:opacity .38s ease;isolation:isolate} .first-project-welcome[hidden]{display:none!important} .first-project-welcome.show{opacity:1} .first-project-welcome-backdrop{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 28%,rgba(123,221,255,.16),transparent 38%),linear-gradient(150deg,rgba(1,8,14,.97),rgba(2,17,12,.98) 58%,rgba(0,4,7,.99));backdrop-filter:blur(16px)} .first-project-welcome-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(164,255,21,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(164,255,21,.025) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 78%);mask-image:radial-gradient(circle at center,black,transparent 78%)} .first-project-welcome-card{width:min(940px,96vw);max-height:min(86vh,860px);overflow:auto;display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;padding:34px;border:1px solid rgba(166,255,20,.45);background:linear-gradient(135deg,rgba(4,13,10,.97),rgba(5,21,18,.95));clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);box-shadow:0 28px 90px rgba(0,0,0,.62),inset 0 0 45px rgba(126,226,255,.035);transform:translateY(18px) scale(.985);transition:transform .4s cubic-bezier(.2,.8,.2,1)} .first-project-welcome.show .first-project-welcome-card{transform:translateY(0) scale(1)} .first-project-welcome-mark{align-self:start;min-height:185px;display:grid;place-items:center;align-content:center;gap:7px;border:1px solid rgba(135,226,255,.24);background:radial-gradient(circle at 50% 34%,rgba(125,217,255,.13),transparent 54%),rgba(1,8,10,.62)} .first-project-welcome-mark span{font-size:3rem;filter:drop-shadow(0 0 18px rgba(95,198,255,.28))} .first-project-welcome-mark b{color:#edfaff;font-size:1.15rem;letter-spacing:.13em}.first-project-welcome-mark small{color:#78d8ff;font-size:.56rem;font-weight:900;letter-spacing:.13em} .first-project-welcome-copy{display:grid;gap:13px;color:#cfd9d2}.first-project-welcome-copy .eyebrow{margin:0;color:var(--u7-lime)} .first-project-welcome-copy h1{margin:-4px 0 5px;color:#f5f7f2;font:italic 900 clamp(2.25rem,5vw,4.35rem)/.92 var(--display-font);letter-spacing:.015em;text-shadow:3px 3px 0 rgba(0,0,0,.48)} .first-project-welcome-copy p{margin:0;font-size:.96rem;line-height:1.75}.first-project-welcome-copy p b{color:#f3fbf7} .first-project-welcome-actions{display:grid;grid-template-columns:minmax(190px,300px) 1fr;gap:18px;align-items:center;margin-top:10px;padding-top:19px;border-top:1px solid rgba(165,255,20,.16)} .first-project-welcome-actions .primary-button{min-height:50px;justify-content:center}.first-project-welcome-actions small{color:#75877e;font-size:.68rem;line-height:1.45} @media(max-width:720px){.first-project-welcome{padding:12px}.first-project-welcome-card{grid-template-columns:1fr;padding:22px;gap:18px}.first-project-welcome-mark{min-height:100px;grid-template-columns:auto auto;column-gap:12px}.first-project-welcome-mark span{grid-row:1/3;font-size:2.25rem}.first-project-welcome-actions{grid-template-columns:1fr}.first-project-welcome-copy p{font-size:.88rem;line-height:1.62}} /* 1.0 Candidate C · Career Core replaces the Sonic hero on HOME */ .career-core-feature{background:#020704} .career-core-feature-scene{background:linear-gradient(90deg,rgba(1,5,3,.18),rgba(1,8,3,.32) 48%,rgba(0,3,2,.94) 100%),linear-gradient(0deg,rgba(1,8,3,.72),transparent 52%),url("../assets/ui/tabs/career-stadium.webp") center 54%/cover no-repeat;filter:saturate(.92) contrast(1.08) brightness(.66)} .career-core-feature::after{content:"";position:absolute;z-index:1;left:-11%;bottom:-29%;width:69%;aspect-ratio:1;border:2px solid rgba(177,255,20,.11);border-radius:50%;box-shadow:0 0 0 38px rgba(177,255,20,.018),0 0 0 86px rgba(177,255,20,.012);pointer-events:none} .career-core-feature-visual{position:absolute;z-index:3;left:5%;top:19%;width:42%;height:62%;display:grid;place-items:center;pointer-events:none} .career-core-feature-visual::before,.career-core-feature-visual::after{content:"";position:absolute;width:72%;aspect-ratio:1;border:1px solid rgba(165,255,20,.13);transform:rotate(45deg);box-shadow:inset 0 0 35px rgba(167,255,20,.025)} .career-core-feature-visual::after{width:51%;border-color:rgba(125,218,255,.13);transform:rotate(18deg)} .career-core-feature-crest{position:relative;z-index:3;width:150px;height:150px;display:grid;place-items:center;border:2px solid rgba(174,255,21,.58);border-radius:50%;background:radial-gradient(circle at 50% 36%,rgba(163,255,20,.16),rgba(2,8,4,.94) 68%);box-shadow:0 0 0 9px rgba(166,255,20,.035),0 0 48px rgba(131,215,35,.18)} .career-core-feature-crest img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}.career-core-feature-crest b{color:#fff;font:italic 900 2.3rem/1 var(--display-font);letter-spacing:.04em} .career-core-feature-orbit{position:absolute;z-index:2;width:195px;height:195px;border:1px dashed rgba(164,255,20,.25);border-radius:50%;animation:careerHomeOrbit 18s linear infinite} .career-core-feature-orbit::before,.career-core-feature-orbit::after{content:"";position:absolute;width:8px;height:8px;background:var(--u7-lime);box-shadow:0 0 11px rgba(164,255,20,.55)}.career-core-feature-orbit::before{left:18px;top:30px}.career-core-feature-orbit::after{right:13px;bottom:38px} @keyframes careerHomeOrbit{to{transform:rotate(360deg)}} .career-core-feature-copy{top:12%;width:45%;right:4%}.career-core-feature-copy h2{margin-bottom:17px}.career-core-feature-copy>strong{font-size:1.04rem;line-height:1.25;color:var(--u7-yellow)}.career-core-feature-copy>span{line-height:1.45;color:#b8c5ba} .career-core-feature-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.career-core-feature-tags i{padding:6px 8px;border:1px solid rgba(164,255,20,.2);background:rgba(2,10,5,.72);color:#dce6d8;font-size:.5rem;font-style:normal;font-weight:900;letter-spacing:.045em} .career-core-feature .unleashed-world-open{margin-top:22px} .unleashed-world-row.portal-sonic{--row-scene:url("../assets/ui/worlds/sonic-apotos.webp")} .worlds-panel .unleashed-world-row{min-height:72px} @media(max-width:1120px){.career-core-feature-visual{left:6%;width:38%}.career-core-feature-copy{width:48%}.career-core-feature-crest{width:132px;height:132px}.career-core-feature-orbit{width:172px;height:172px}} @media(max-width:720px){.career-core-feature-visual{left:-5%;top:22%;width:48%;opacity:.75}.career-core-feature-copy{right:4%;width:58%;top:11%}.career-core-feature-crest{width:110px;height:110px}.career-core-feature-orbit{width:145px;height:145px}.career-core-feature-tags{gap:4px}.career-core-feature-tags i{font-size:.44rem;padding:5px 6px}} /* 1.0 Candidate F · Store Search + Matchday Center */ .store-search{display:grid;grid-template-columns:auto minmax(240px,1fr) auto auto;gap:12px;align-items:center;margin:0 0 16px;padding:11px 14px;border-color:rgba(98,232,255,.18);background:linear-gradient(90deg,rgba(5,24,29,.92),rgba(8,19,14,.9))}.store-search-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(102,235,255,.2);color:#79ecff;font-size:1.2rem}.store-search label{display:grid;gap:3px}.store-search label small{color:#72978e;font-size:.45rem;font-weight:1000;letter-spacing:.12em}.store-search input{width:100%;border:0;border-bottom:1px solid rgba(123,242,255,.24);outline:0;padding:5px 0 7px;color:#fff;background:transparent;font:800 .68rem var(--body-font)}.store-search input::placeholder{color:#637a73}.store-search>strong{min-width:92px;color:#d8ff5d;font-size:.48rem;letter-spacing:.09em;text-align:right}.store-search .ghost-button{padding:7px 10px}.store-search-hidden{display:none!important} .track-item.track-locked{cursor:pointer}.track-item.track-locked:hover{border-color:rgba(224,255,93,.38);background:linear-gradient(90deg,rgba(113,139,27,.1),rgba(8,17,18,.94))}.track-item.track-locked .track-badge{color:#e6ff73} .career-fixture-heading{align-items:end}.career-matchday-picker{display:grid;gap:3px;min-width:170px}.career-matchday-picker small{color:#718c7d;font-size:.43rem;font-weight:1000;letter-spacing:.1em}.career-matchday-picker select{min-width:170px;padding:7px 9px;border:1px solid rgba(98,220,142,.19);border-radius:5px;color:#e9fff1;background:#08140e;font-size:.54rem;font-weight:900;outline:0}.career-season-fixtures{align-items:start}.career-fixture-result{min-width:0;border:1px solid rgba(137,190,159,.08);border-radius:9px;background:#0a1611;overflow:hidden}.career-fixture-result.player{border-color:rgba(88,216,137,.28);background:rgba(88,216,137,.055)}.career-fixture-result>summary{list-style:none;cursor:pointer;border:0!important;border-radius:0!important;background:transparent!important}.career-fixture-result>summary::-webkit-details-marker{display:none}.career-fixture-result>summary em{grid-column:1/-1;color:#6f8d7d;font-size:.39rem;font-style:normal;letter-spacing:.09em}.career-fixture-result[open]>summary em{color:#d8ff5d}.career-fixture-result-detail{display:grid;gap:8px;padding:0 10px 10px;border-top:1px solid rgba(111,186,137,.08)}.career-fixture-result-clubs{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center;padding-top:9px;font-size:.49rem}.career-fixture-result-clubs b:last-child{text-align:right}.career-fixture-result-clubs span{color:#fff36a;font-weight:1000}.career-fixture-goal-list{display:grid;gap:4px}.career-fixture-goal-row{display:grid;grid-template-columns:38px 1fr;gap:7px;align-items:start;padding:5px 6px;border-radius:5px;background:rgba(255,255,255,.025)}.career-fixture-goal-row>strong{color:#fff36a;font-size:.49rem}.career-fixture-goal-row>span{display:grid;gap:1px}.career-fixture-goal-row b{font-size:.5rem}.career-fixture-goal-row small{color:#7f998b;font-size:.4rem;line-height:1.35}.career-fixture-goal-empty{margin:2px 0;color:#71877b;font-size:.44rem;line-height:1.45}.career-fixture-legacy-goals{display:grid;gap:4px}.career-fixture-legacy-goals>span{display:grid;gap:1px;padding:5px 6px;background:rgba(255,255,255,.02)}.career-fixture-legacy-goals b{font-size:.49rem}.career-fixture-legacy-goals small{color:#788d81;font-size:.4rem}.career-result-matchday-panel{margin-top:16px}.career-result-matchday-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.career-result-matchday-results .career-fixture-result>summary{min-height:48px} @media(max-width:900px){.store-search{grid-template-columns:auto 1fr auto}.store-search>strong{grid-column:2/4;text-align:left}.career-result-matchday-results{grid-template-columns:1fr 1fr}} @media(max-width:620px){.store-search{grid-template-columns:auto 1fr}.store-search .ghost-button{grid-column:1/-1}.store-search>strong{grid-column:1/-1}.career-fixture-heading{align-items:flex-start;flex-direction:column}.career-matchday-picker,.career-matchday-picker select{width:100%;min-width:0}.career-result-matchday-results{grid-template-columns:1fr}} /* 1.0 Candidate G · Crossfield Network leaderboard */ .leaderboard-network-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px} #profile-leaderboard-network-status{min-width:118px;text-align:center} #profile-leaderboard-network-status[data-network-state="live"]{border-color:rgba(169,255,18,.42);color:var(--u7-lime,#a9ff12);background:rgba(86,128,0,.14)} #profile-leaderboard-network-status[data-network-state="syncing"]{border-color:rgba(88,231,255,.36);color:#8eefff;background:rgba(0,104,128,.12)} #profile-leaderboard-network-status[data-network-state="setup"]{border-color:rgba(255,196,0,.42);color:var(--u7-yellow,#ffc400);background:rgba(115,86,0,.13)} #profile-leaderboard-network-status[data-network-state="offline"]{border-color:rgba(255,122,122,.32);color:#ffabab;background:rgba(105,22,22,.11)} @media(max-width:760px){.leaderboard-network-actions{justify-content:flex-start}.leaderboard-network-actions .primary-button{width:100%}}