/* Every rule is scoped to the game, so it will not restyle your WordPress theme. */ #els-brain-game { --bc-bg: #080e1d; --bc-panel: #101a2b; --bc-text: #f4f7ff; --bc-muted: #c2d0e5; --bc-blue: #419dff; --bc-cyan: #76e9ff; --bc-line: #26364e; position: relative; isolation: isolate; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 24px auto; overflow: hidden; border: 1px solid #223450; border-radius: 26px; color: var(--bc-text); background: radial-gradient(ellipse at 90% 0%, #13336788, transparent 52%), var(--bc-bg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: left; color-scheme: dark; } #els-brain-game *, #els-brain-game *::before, #els-brain-game *::after { box-sizing: border-box; } #els-brain-game [hidden] { display: none !important; } #els-brain-game h2, #els-brain-game h3, #els-brain-game h4, #els-brain-game p { color: inherit; font-family: inherit; padding: 0; margin: 0; } #els-brain-game button, #els-brain-game textarea { font: inherit; text-transform: none; letter-spacing: normal; } #els-brain-game button { -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; } #els-brain-game button:disabled { cursor: default; } #els-brain-game button:focus-visible, #els-brain-game textarea:focus-visible { outline: 3px solid var(--bc-cyan); outline-offset: 4px; } #els-brain-game img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; } #els-brain-game .elsbc__shell { max-width: 780px; margin: 0 auto; padding: 25px 32px 26px; } #els-brain-game .elsbc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #els-brain-game .elsbc__logo { width: 108px; height: 60px !important; object-fit: contain; } #els-brain-game .elsbc__top-actions { display: flex; align-items: center; gap: 10px; } #els-brain-game .elsbc__streak { padding: 7px 13px; background: #ffae5d0d; border: 1px solid #705037; border-radius: 99px; font-size: 15px; font-weight: 750; color: #ffd1a7; } #els-brain-game .elsbc__sound { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--bc-line); border-radius: 50%; background: #132136; color: #b8c9e3; padding: 0; } #els-brain-game .elsbc__sound svg { width: 21px; height: 21px; } #els-brain-game .elsbc__heading { text-align: center; margin: 16px 0 25px; } #els-brain-game .elsbc__date { color: var(--bc-cyan); font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 11px; } #els-brain-game .elsbc__title { font-size: clamp(24px, 4.3vw, 39px); font-weight: 900; line-height: 1.13; letter-spacing: -.8px; } #els-brain-game .elsbc__title span { color: #a3d8ff; } #els-brain-game .elsbc__subtitle { margin-top: 12px; font-size: 15px; color: var(--bc-muted); } #els-brain-game .elsbc__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--bc-line); border-radius: 15px; background: #101a2c; margin-bottom: 23px; overflow: hidden; } #els-brain-game .elsbc__stat { display: flex; flex-direction: column; min-width: 0; padding: 16px 13px; border-right: 1px solid var(--bc-line); } #els-brain-game .elsbc__stat:last-child { border: 0; } #els-brain-game .elsbc__stat-label { color: var(--bc-muted); font-size: 14px; letter-spacing: .5px; font-weight: 750; white-space: normal; } #els-brain-game .elsbc__stat strong { font-size: clamp(18px, 3.2vw, 27px); line-height: 1.2; letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-top: 5px; } #els-brain-game .elsbc__stat--accent strong { color: var(--bc-cyan); } /* Give these figures their own colour instead of inheriting the theme's strong colour. The repeated wrapper ID outranks Enfold's common two-ID overrides. */ #els-brain-game#els-brain-game .elsbc__stats [data-role="score"], #els-brain-game#els-brain-game .elsbc__stats [data-role="brains"], #els-brain-game#els-brain-game .elsbc__stats [data-role="best"], #els-brain-game#els-brain-game .elsbc__stats .elsbc__stat:not(.elsbc__stat--accent) .elsbc__stat-label, #els-brain-game#els-brain-game .elsbc__result-stats strong, #els-brain-game#els-brain-game .elsbc__final, #els-brain-game#els-brain-game .elsbc__daily-best strong { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #els-brain-game .elsbc__game { max-width: 540px; margin: 0 auto; } #els-brain-game .elsbc__round-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 10px; font-size: 15px; color: var(--bc-muted); margin-bottom: 11px; } #els-brain-game .elsbc__round-state::before { content: ""; display: inline-block; height: 6px; width: 6px; margin-right: 7px; border-radius: 50%; background: var(--bc-cyan); } #els-brain-game .elsbc__next { white-space: nowrap; } #els-brain-game .elsbc__next strong { color: var(--bc-cyan); margin-left: 4px; font-variant-numeric: tabular-nums; } #els-brain-game .elsbc__arena { position: relative; border: 1px solid #29415d; border-radius: 19px; padding: 11px; background: #080f1d; box-shadow: 0 18px 55px #0005, inset 0 0 35px #24466b14; } #els-brain-game .elsbc__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } #els-brain-game .elsbc__tile { position: relative; aspect-ratio: 1; padding: 0; display: grid; place-items: center; min-width: 0; border-radius: 12px; border: 1px solid #304565; border-bottom: 4px solid #11213a; background: linear-gradient(145deg, #223650, #18283f); color: #536b8b; box-shadow: inset 0 1px 0 #ffffff0c, 0 3px 6px #0004; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; overflow: visible; } #els-brain-game .elsbc__tile:disabled { opacity: 1; } #els-brain-game .elsbc__tile .elsbc__hidden-mark { width: 24%; height: 24%; opacity: .6; } #els-brain-game .elsbc__tile:not(:disabled):active { transform: translateY(2px) scale(.96); border-bottom-width: 2px; } #els-brain-game .elsbc__tile--brain { background: radial-gradient(circle at 50% 35%, #174877, #0e294b); border-color: #367ab8; border-bottom-color: #123962; box-shadow: inset 0 0 20px #53c6ff12; } #els-brain-game .elsbc__tile--brain img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 4px 7px #0005); } #els-brain-game .elsbc__tile--bomb { background: radial-gradient(circle at 50% 35%, #513761, #2b223f); border-color: #7965a0; border-bottom-color: #38284e; color: #e3cafb; } #els-brain-game .elsbc__tile--bomb svg { width: 65%; height: 65%; } #els-brain-game .elsbc__tile--missed { opacity: .53; } #els-brain-game .elsbc__tile--hit { border-color: #e4c5ff; box-shadow: 0 0 23px #b287e655; } #els-brain-game .elsbc__tile--new { animation: elsbc-open .12s ease-out both; } #els-brain-game .elsbc__panel { position: relative; text-align: center; border-radius: 14px; } #els-brain-game .elsbc__intro { position: absolute; inset: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; background: linear-gradient(145deg, #0e1d32f5, #071222f5); border: 1px solid #355270; } #els-brain-game .elsbc__intro-brain { width: clamp(66px, 17vw, 115px); height: auto; margin-bottom: 16px !important; filter: drop-shadow(0 7px 17px #46b8ff44); } #els-brain-game .elsbc__eyebrow { font-size: 14px; letter-spacing: 1.7px; font-weight: 800; color: var(--bc-cyan) !important; margin-bottom: 7px !important; } #els-brain-game .elsbc__intro h3 { font-size: clamp(19px, 3vw, 27px); font-weight: 850; line-height: 1.3; letter-spacing: -.5px; } #els-brain-game .elsbc__intro p:not(.elsbc__eyebrow) { font-size: 16px; color: var(--bc-muted); line-height: 1.7; margin-top: 10px; } #els-brain-game .elsbc__primary { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; min-height: 51px; border: 1px solid #78d9ff; border-radius: 11px; padding: 13px 18px; background: linear-gradient(105deg, #1986fa, #37b5ff); color: #061226; font-size: 14px; font-weight: 900; letter-spacing: .6px; box-shadow: 0 5px 18px #218ffa30; transition: filter .15s, transform .15s; } #els-brain-game .elsbc__primary:active, #els-brain-game .elsbc__secondary:active { transform: scale(.98); } #els-brain-game .elsbc__primary:disabled { opacity: .55; } #els-brain-game .elsbc__intro .elsbc__primary { width: min(220px, 100%); margin-top: 21px; } #els-brain-game .elsbc__intro-foot { font-size: 14px; color: #8fa4bf; margin-top: 12px; } #els-brain-game .elsbc__effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 4; } #els-brain-game .elsbc__particle { position: absolute; width: 5px; height: 5px; background: var(--bc-cyan); border-radius: 50%; animation: elsbc-particle .65s ease-out forwards; } #els-brain-game .elsbc__float { position: absolute; font-size: 20px; font-weight: 900; color: #e1faff; text-shadow: 0 2px 10px #070f1d; transform: translate(-50%, -50%); animation: elsbc-float .75s ease-out forwards; } #els-brain-game .elsbc__feedback { min-height: 24px; font-size: 15px; text-align: center; color: #b5c8e4 !important; padding: 0 8px !important; margin: 14px 0 0 !important; } #els-brain-game .elsbc__result { padding: 23px 25px 16px; border: 1px solid #5085d3; background: radial-gradient(circle at 90% 5%, #319beb44, transparent 65%), linear-gradient(155deg, #143c72, #0e2143 75%); animation: elsbc-result-in .35s ease-out both; } #els-brain-game .elsbc__result-mark { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 10px; border-radius: 25px; background: #54baff16; border: 1px solid #65b5ef46; transform: rotate(-5deg); } #els-brain-game .elsbc__result-mark img { width: 67px; height: 67px; object-fit: contain; transform: rotate(5deg); } #els-brain-game .elsbc__result-kicker { color: #94edff; font-size: 14px; font-weight: 850; letter-spacing: 1.4px; } #els-brain-game .elsbc__result h3 { font-size: 16px; font-weight: 850; letter-spacing: .5px; margin-top: 6px; } /* Keep both result headings readable even when the theme has its own heading rules. */ #els-brain-game#els-brain-game .elsbc__result-kicker { font-size: clamp(20px, 3.4vw, 24px) !important; line-height: 1.35; } #els-brain-game#els-brain-game .elsbc__result h3 { font-size: clamp(23px, 4vw, 29px) !important; line-height: 1.3; color: #fff !important; margin-top: 9px; } #els-brain-game .elsbc__final { font-size: clamp(42px, 8vw, 68px); font-weight: 950; line-height: 1.1; letter-spacing: -2px; margin: 11px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #els-brain-game .elsbc__final.elsbc__compact { font-size: clamp(31px, 6.5vw, 48px); letter-spacing: -1px; } #els-brain-game .elsbc__points-label { color: #adc8e8; font-size: 14px; font-weight: 800; letter-spacing: 2.5px; } #els-brain-game .elsbc__result-message { color: #d0e2f6 !important; font-size: 15px; margin: 12px 0 14px !important; } #els-brain-game .elsbc__result-stats { background: #040d203a; border: 1px solid #5081bd40; border-radius: 11px; padding: 9px 12px; margin-bottom: 16px; text-align: left; } #els-brain-game .elsbc__result-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; padding: 5px 0; } #els-brain-game .elsbc__result-stats span { color: #b9cfeb; } #els-brain-game .elsbc__result-stats strong { font-variant-numeric: tabular-nums; } #els-brain-game .elsbc__share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; } #els-brain-game .elsbc__secondary { display: grid; place-items: center; min-height: 47px; padding: 10px 8px; border: 1px solid #5378ac; border-radius: 10px; background: #153563; color: #e4f1ff; font-size: 14px; font-weight: 800; letter-spacing: .15px; transition: background .15s, transform .15s; line-height: 1.35; } #els-brain-game .elsbc__secondary:disabled { opacity: .5; } #els-brain-game .elsbc__text-button { padding: 10px 8px; min-height: 44px; color: #cce1ff; border: 0; background: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; line-height: 1.5; } #els-brain-game .elsbc__board-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; } #els-brain-game .elsbc__daily-best { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; color: #afc5e2; font-size: 14px; letter-spacing: .7px; } #els-brain-game .elsbc__daily-best strong { color: #f5dbaa; font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: 0; } #els-brain-game .elsbc__device-note { width: 100%; text-align: center; font-size: 14px; color: #8a9db7; letter-spacing: 0; margin-top: -4px; } #els-brain-game .elsbc__footer { text-align: center; margin-top: 20px; padding-top: 17px; border-top: 1px solid #22334c; } #els-brain-game .elsbc__footer p { color: #cbdbf0; font-size: 15px; } #els-brain-game .elsbc__footer > span { color: #8a9db7; font-size: 14px; } #els-brain-game .elsbc__fallback { border: 1px solid #466b98; border-radius: 12px; background: #14253c; padding: 17px; margin-top: 12px; text-align: left; } #els-brain-game .elsbc__fallback strong { font-size: 14px; } #els-brain-game .elsbc__fallback p { font-size: 15px; margin: 5px 0 10px; color: var(--bc-muted); } #els-brain-game .elsbc__fallback textarea { display: block; resize: vertical; width: 100%; min-height: 90px; border: 1px solid #526d91; border-radius: 7px; padding: 10px; background: #091426; color: #e4efff; font-size: 16px; } #els-brain-game .elsbc__noscript { text-align: center; padding: 15px !important; color: #ffd1a7 !important; } #els-brain-game .elsbc__pop { animation: elsbc-stat-pop .27s ease-out; } #els-brain-game .elsbc__bomb-shake { animation: elsbc-shake .35s ease-out; } @media (hover: hover) { #els-brain-game .elsbc__tile:not(:disabled):hover { transform: translateY(-2px); border-color: #6292c7; background: linear-gradient(145deg, #30486a, #223b59); box-shadow: 0 5px 15px #47a5ff18; } #els-brain-game .elsbc__primary:hover { filter: brightness(1.1); } #els-brain-game .elsbc__secondary:not(:disabled):hover { background: #21487a; } #els-brain-game .elsbc__sound:hover { border-color: #6486b6; color: white; } } @media (max-width: 550px) { #els-brain-game { border-radius: 19px; margin: 14px auto; } #els-brain-game .elsbc__shell { padding: 18px 15px 20px; } #els-brain-game .elsbc__logo { width: 92px; height: 51px !important; } #els-brain-game .elsbc__streak { font-size: 14px; padding: 6px 9px; } #els-brain-game .elsbc__top-actions { gap: 7px; } #els-brain-game .elsbc__heading { margin: 15px 0 20px; } #els-brain-game .elsbc__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; } #els-brain-game .elsbc__stat { padding: 12px 15px; } #els-brain-game .elsbc__stat:nth-child(2) { border-right: 0; } #els-brain-game .elsbc__stat:nth-child(-n+2) { border-bottom: 1px solid var(--bc-line); } #els-brain-game .elsbc__stat strong { font-size: 25px; } #els-brain-game .elsbc__arena { padding: 8px; border-radius: 15px; } #els-brain-game .elsbc__grid { gap: 6px; } #els-brain-game .elsbc__tile { border-radius: 9px; border-bottom-width: 3px; } #els-brain-game .elsbc__intro { inset: 8px; padding: 13px; } #els-brain-game .elsbc__intro-brain { margin-bottom: 8px !important; } #els-brain-game .elsbc__intro p:not(.elsbc__eyebrow) { font-size: 14px; margin-top: 5px; line-height: 1.55; } #els-brain-game .elsbc__intro .elsbc__primary { margin-top: 12px; min-height: 45px; padding: 9px 16px; } #els-brain-game .elsbc__intro-foot { font-size: 12px; margin-top: 8px; } #els-brain-game .elsbc__eyebrow { font-size: 12px; letter-spacing: 1px; } #els-brain-game .elsbc__result { padding: 18px 14px 10px; } #els-brain-game .elsbc__round-bar { font-size: 14px; } #els-brain-game .elsbc__result-stats > div { font-size: 14px; } } @media (max-width: 355px) { #els-brain-game .elsbc__shell { padding-inline: 10px; } #els-brain-game .elsbc__intro-brain { width: 50px; } #els-brain-game .elsbc__intro-foot { font-size: 12px; } #els-brain-game .elsbc__share-actions { grid-template-columns: 1fr; } #els-brain-game .elsbc__round-bar { gap: 4px; font-size: 13px; } } @keyframes elsbc-open { 0% { transform: scale(.87); } 65% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes elsbc-stat-pop { 50% { transform: scale(1.15); color: #a9f4ff; } } @keyframes elsbc-result-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes elsbc-shake { 25% { transform: translateX(-4px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } } @keyframes elsbc-float { to { opacity: 0; transform: translate(-50%, -160%); } } @keyframes elsbc-particle { to { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(.2); } } @media (prefers-reduced-motion: reduce) { #els-brain-game *, #els-brain-game *::before, #els-brain-game *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } #els-brain-game .elsbc__tile.elsbc__tile--blast-away { animation: none !important; } #els-brain-game .elsbc__effects { display: none; } } /* Theme isolation: restore the layout within this one shortcode wrapper. */ #els-brain-game { display: block; float: none; clear: both; min-width: 0; max-width: 1000px; width: 100%; } #els-brain-game .elsbc__shell { width: 100%; float: none; } #els-brain-game button, #els-brain-game input, #els-brain-game textarea, #els-brain-game a { font-family: inherit; box-sizing: border-box; margin: 0; float: none; max-width: 100%; } #els-brain-game button { appearance: none; -webkit-appearance: none; text-shadow: none; } #els-brain-game .elsbc__sound { width: 44px; height: 44px; } #els-brain-game .elsbc__secondary { font-size: 15px; } #els-brain-game .elsbc__stat-label { font-size: 14px; } #els-brain-game a.elsbc__primary { text-decoration: none; } #els-brain-game h2, #els-brain-game h3 { text-transform: none; word-break: normal; } #els-brain-game input:focus-visible, #els-brain-game a:focus-visible { outline: 3px solid var(--bc-cyan); outline-offset: 3px; } #els-brain-game .elsbc__game { width: 100%; max-width: 560px; } #els-brain-game .elsbc__arena, #els-brain-game .elsbc__grid { width: 100%; min-width: 0; } #els-brain-game .elsbc__grid { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; float: none; } #els-brain-game .elsbc__tile { width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; aspect-ratio: 1 / 1; line-height: 1; } #els-brain-game .elsbc__tile img { width: 88%; height: 80%; max-width: 100%; object-fit: contain; } #els-brain-game .elsbc__tile--bomb { background: radial-gradient(circle at 50% 35%,#704a26,#342d30); border-color: #b7834b; border-bottom-color: #493424; } #els-brain-game .elsbc__tile--bomb svg { width: 78%; height: 78%; } #els-brain-game .elsbc__tile--hit { border-color: #ffd99a; box-shadow: 0 0 20px #ffb85833; } #els-brain-game .elsbc__intro-brain { width: clamp(75px,22vw,138px); height: auto; filter: drop-shadow(0 3px 8px #46b8ff22); } #els-brain-game .elsbc__result-mark { width: 90px; height: 72px; border-radius: 20px; } #els-brain-game .elsbc__result-mark img { width: 77px; height: 56px; } #els-brain-game .elsbc__allowance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border: 1px solid #294c6c; background: #12315060; border-radius: 12px; margin: 0 0 16px; padding: 12px 16px; } #els-brain-game .elsbc__allowance > div:first-child { display: flex; flex-direction: column; gap: 3px; } #els-brain-game .elsbc__allowance span { font-size: 14px; letter-spacing: .7px; color: #a8c6e8; } #els-brain-game .elsbc__allowance strong { font-size: 16px; color: #8fefff; } #els-brain-game .elsbc__play-dots { display: flex; gap: 5px; } #els-brain-game .elsbc__play-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #7ceaff; box-shadow: 0 0 8px #7ceaff22; } #els-brain-game .elsbc__play-dots i.is-used { background: #375168; box-shadow: none; } #els-brain-game .elsbc__submit { display: block; margin: 0 0 17px; text-align: left; padding: 0; border: 0; } #els-brain-game .elsbc__submit label { display: block; font-size: 14px; font-weight: 800; color: #bee5ff; letter-spacing: .7px; margin: 0 0 7px; } #els-brain-game .elsbc__name-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; } #els-brain-game .elsbc__name-row input[type="text"] { display: block; width: 100%; min-width: 0; height: 47px; border-radius: 9px; padding: 10px 12px; border: 1px solid #5980a8; background: #071a32; color: #fff; font-size: 16px; line-height: 1.4; box-shadow: none; } #els-brain-game .elsbc__name-row input::placeholder { color: #94aeca; opacity: 1; } #els-brain-game .elsbc__name-row button { padding-inline: 14px; } #els-brain-game .elsbc__submit p { font-size: 14px; color: #bbd0e7; margin: 7px 0 0; line-height: 1.55; } /* The completed panel covers the original 5x5 board; restarting restores its normal flow. */ #els-brain-game .elsbc__arena--result .elsbc__grid { position: absolute; top: 11px; left: 11px; width: calc(100% - 22px); opacity: .2; pointer-events: none; } #els-brain-game .elsbc__arena--intro .elsbc__grid { position: absolute; top: 11px; left: 11px; width: calc(100% - 22px); } #els-brain-game .elsbc__arena--intro .elsbc__intro { position: relative; inset: auto; min-height: var(--els-board-height,0px); z-index: 2; } #els-brain-game .elsbc__arena--result .elsbc__result { position: relative; z-index: 2; min-height: var(--els-board-height,0px); } #els-brain-game .elsbc__result .elsbc__leaderboard { margin-top: 17px; text-align: left; } #els-brain-game .elsbc__play-dots .is-locked { opacity: .25; } #els-brain-game .elsbc__optin { margin: 0 0 16px; padding: 16px; text-align: left; border: 1px solid #5f9cbb; border-radius: 13px; background: #082349; } #els-brain-game .elsbc__optin-title { color: #fff !important; font-size: 16px; font-weight: 850; } #els-brain-game .elsbc__optin > p:not(.elsbc__optin-title) { color: #c7e0f8 !important; font-size: 15px; margin: 7px 0 13px; } #els-brain-game .elsbc__optin .elsbc__primary { font-size: 15px; letter-spacing: .1px; } #els-brain-game .elsbc__optin .elsbc__submit { margin: 14px 0 0; } #els-brain-game .elsbc__submit input[type="text"], #els-brain-game .elsbc__submit input[type="email"] { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-height: 48px; margin: 0 0 13px !important; padding: 11px 12px !important; border: 1px solid #6c96bd !important; border-radius: 8px !important; background: #091a30 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.5; box-shadow: none; } #els-brain-game .elsbc__submit input::placeholder { color: #afc5dd !important; -webkit-text-fill-color: #afc5dd !important; opacity: 1; } #els-brain-game .elsbc__submit .elsbc__consent { display: flex; align-items: flex-start; gap: 10px; margin: 15px 0 8px; } #els-brain-game .elsbc__consent input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; position: static !important; flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 2px 0 0 !important; padding: 0 !important; opacity: 1 !important; accent-color: #51bfff; cursor: pointer; } #els-brain-game .elsbc__consent span { font-size: 15px; font-weight: 450; line-height: 1.65; letter-spacing: 0; color: #f1f7ff !important; } #els-brain-game .elsbc__form-privacy { margin: 10px 0 13px !important; } #els-brain-game .elsbc__submit > .elsbc__secondary { width: 100%; min-height: 48px; font-size: 15px; } #els-brain-game .elsbc__form-privacy a, #els-brain-game .elsbc__preferences a { color: #9fe8ff !important; text-decoration: underline; } #els-brain-game .elsbc__preferences { max-width: 560px; margin: 12px auto 0; padding: 15px; text-align: left; border: 1px solid #486c97; border-radius: 12px; background: #112742; } #els-brain-game .elsbc__preferences p { font-size: 15px; color: #d0e4fb !important; } #els-brain-game .elsbc__preferences .elsbc__secondary { width: 100%; margin: 12px 0; } #els-brain-game .elsbc__limit-message { padding: 14px 11px; margin: 0 0 14px; border: 1px solid #5983b5; background: #08224566; border-radius: 11px; } #els-brain-game .elsbc__limit-message strong { display: block; font-size: 16px; color: #9defff; } #els-brain-game .elsbc__limit-message span { display: block; font-size: 14px; color: #b4d6f4; margin-top: 5px; } #els-brain-game .elsbc__limit-message p { font-size: 15px; margin-top: 9px; } #els-brain-game .elsbc__leaderboard { max-width: 560px; margin: 24px auto 0; border: 1px solid #2b405d; border-radius: 16px; background: #0f1a2a; overflow: hidden; } #els-brain-game .elsbc__leaderboard-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 19px; border-bottom: 1px solid #293951; gap: 10px; } #els-brain-game .elsbc__leaderboard-head h3 { font-size: 15px; font-weight: 850; letter-spacing: 1px; line-height: 1.4; } #els-brain-game .elsbc__leaderboard-head > span { font-size: 13px; white-space: nowrap; letter-spacing: .8px; color: #95e5ff; background: #193554; border: 1px solid #355c7c; border-radius: 6px; padding: 4px 6px; } #els-brain-game .elsbc__leader-row { display: grid; width:100%; margin:0; border:0; border-radius:0; background:transparent; color:inherit; box-shadow:none; text-align:left; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; padding: 12px 17px; gap: 8px; border-bottom: 1px solid #1d2d42; font-size: 16px; } #els-brain-game .elsbc__leader-row.is-you { background: #173d5c55; } #els-brain-game .elsbc__leader-position { font-size: 16px; color: #a0b7d3; } #els-brain-game .elsbc__leader-name { min-width: 0; overflow-wrap: anywhere; color: #e8f0ff; } #els-brain-game .elsbc__leader-row strong { font-size: 16px; font-variant-numeric: tabular-nums; color: #a8eaff; } #els-brain-game .elsbc__leader-list > p { padding: 20px; font-size: 16px; text-align: center; color: #b6c9e0; } #els-brain-game .elsbc__your-rank { display: flex; justify-content: space-between; padding: 15px 19px; font-size: 14px; letter-spacing: .7px; background: #17304a44; } #els-brain-game .elsbc__your-rank strong { color: #9debff; font-size: 16px; letter-spacing: 0; } #els-brain-game .elsbc__leader-note { font-size: 14px; text-align: center; padding: 12px 16px; color: #99b1d0; } #els-brain-game .elsbc__leader-more { padding: 13px 16px; border-bottom: 1px solid #293951; } #els-brain-game .elsbc__leader-more .elsbc__secondary { width: 100%; min-height: 48px; font-size: 15px; } #els-brain-game .elsbc__leader-more p { margin-top: 9px; color: #d7e7fc !important; font-size: 14px; line-height: 1.6; text-align: center; } #els-brain-game .elsbc__leader-more p:empty { display: none; } #els-brain-game .elsbc__save-panel { margin: 16px 0 0; padding: 17px; border: 1px solid #6fa9d7; border-radius: 13px; background: #091b33; text-align: left; } #els-brain-game .elsbc__save-panel h4 { color: #fff !important; font-size: 19px; font-weight: 850; line-height: 1.4; } #els-brain-game .elsbc__save-panel p { margin: 9px 0 14px; color: #d6e7fb !important; font-size: 15px; line-height: 1.65; } #els-brain-game .elsbc__save-panel .elsbc__save-image { width: 100%; max-width: 378px; height: auto; margin: 0 auto; border-radius: 10px; pointer-events: auto; touch-action: auto; user-select: auto !important; -webkit-user-select: auto !important; -webkit-touch-callout: default !important; } #els-brain-game .elsbc__save-actions { display: grid; gap: 9px; margin-top: 14px; } #els-brain-game .elsbc__save-actions .elsbc__secondary { min-height: 48px; font-size: 15px; text-decoration: none; } #els-brain-game .elsbc__card-note { margin: 15px 0 9px !important; color: #d7e8fc !important; font-size: 15px; line-height: 1.6; } #els-brain-game .elsbc__golden-note { width: 100%; margin-top: 15px !important; padding: 13px; border: 1px solid #c3923c; border-radius: 11px; background: #4c341640; color: #ffdf9b !important; font-size: 15px !important; line-height: 1.6 !important; } #els-brain-game .elsbc__golden-note strong { display: block; color: #ffe8ae !important; font-size: 16px; margin-bottom: 5px; } #els-brain-game .elsbc__golden-status { margin: 0 0 12px !important; padding: 10px 12px; border: 1px solid #8b6934; border-radius: 10px; background: #3c2d1d; color: #ffe4a7 !important; font-size: 15px; line-height: 1.6; } #els-brain-game .elsbc__tile--brain.elsbc__tile--golden { background: radial-gradient(circle at 50% 35%, #755318, #342917); border-color: #e2b55d; border-bottom-color: #795823; box-shadow: inset 0 0 22px #ffc85026, 0 0 15px #ffc24f22; } #els-brain-game .elsbc__tile--golden img { filter: sepia(1) saturate(1.85) hue-rotate(355deg) contrast(1.12) drop-shadow(0 3px 8px #f7c45488); } #els-brain-game .elsbc__float--golden { color: #ffe3a0; font-size: 23px; white-space: nowrap; text-shadow: 0 2px 12px #6b4000; } #els-brain-game .elsbc__privacy-note { display: block; margin-top: 7px; } #els-brain-game .elsbc__reconnect { display: block; margin: 0 auto; } #els-brain-game .elsbc__impact { animation: elsbc-impact .42s ease-out; } #els-brain-game .elsbc__impact .elsbc__fuse-spark { animation: elsbc-ignition .24s ease-in-out 3; transform-origin: 80px 15px; } #els-brain-game .elsbc__board-blast { animation: elsbc-board-blast .55s ease-out; } #els-brain-game .elsbc__blast { position: absolute; width: 30px; height: 30px; border: 4px solid #ffd78c; background: #ffd78c44; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 25px #ffb65f99; animation: elsbc-blast .55s ease-out both; } #els-brain-game .elsbc__spark { width: 7px; height: 7px; background: #ffb959; box-shadow: 0 0 7px #ffc16888; } #els-brain-game .elsbc__arena--exploding { overflow: hidden; } #els-brain-game .elsbc__grid--exploding { perspective: 650px; } #els-brain-game .elsbc__tile.elsbc__tile--blast-away { animation: elsbc-tile-burst .64s cubic-bezier(.15,.65,.25,1) var(--blast-delay,0ms) both !important; transition: none !important; will-change: transform, opacity; pointer-events: none; } #els-brain-game .elsbc__blast--board { width: 44px; height: 44px; animation: elsbc-board-wave .65s ease-out both; } #els-brain-game .elsbc__board-flash { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--blast-origin-x,50%) var(--blast-origin-y,50%),#fff3bb99,#ffc26033 60%,transparent); animation: elsbc-board-flash .5s ease-out both; } @keyframes elsbc-tile-burst { 0% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); } 16% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 0; transform: translate3d(var(--blast-x),var(--blast-y),0) rotate(var(--blast-turn)) scale(.22); } } @keyframes elsbc-board-wave { 0% { opacity: .95; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(22); } } @keyframes elsbc-board-flash { from { opacity: .65; } to { opacity: 0; } } @keyframes elsbc-impact { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-9deg); filter: brightness(1.9); } 35% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } } @keyframes elsbc-ignition { 50% { transform: scale(1.5) rotate(30deg); opacity: .5; } } @keyframes elsbc-blast { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(9); } } @keyframes elsbc-board-blast { 0% { box-shadow: 0 0 35px #ffd99266; } 15% { transform: translate(4px,-3px); filter: brightness(1.4); } 35% { transform: translate(-5px,2px); } 55% { transform: translate(3px,0); } 75% { transform: translate(-2px,-1px); } 100% { transform: none; } } @media (max-width: 550px) { #els-brain-game .elsbc__shell { padding-inline: 10px; } #els-brain-game .elsbc__allowance { padding: 10px 12px; gap: 8px; } #els-brain-game .elsbc__allowance span { font-size: 13px; } #els-brain-game .elsbc__allowance strong { font-size: 15px; } #els-brain-game .elsbc__play-dots { gap: 4px; } #els-brain-game .elsbc__play-dots i { width: 6px; height: 6px; } #els-brain-game .elsbc__intro-brain { width: 88px; } #els-brain-game .elsbc__leader-row { padding: 12px 14px; } } /* Break out of a theme's mobile content padding while staying inside the screen. */ @media (max-width: 640px) { #els-brain-game { width: calc(100vw - 20px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 10px) !important; margin-right: 0 !important; } #els-brain-game .elsbc__arena--result .elsbc__grid, #els-brain-game .elsbc__arena--intro .elsbc__grid { top: 8px; left: 8px; width: calc(100% - 16px); } #els-brain-game .elsbc__optin { padding: 12px; } } @media (max-width: 355px) { #els-brain-game .elsbc__shell { padding-inline: 7px; } #els-brain-game .elsbc__intro-brain { width: 62px; } #els-brain-game .elsbc__play-dots { display: none; } #els-brain-game .elsbc__name-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #els-brain-game *, #els-brain-game *::before, #els-brain-game *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } #els-brain-game .elsbc__tile.elsbc__tile--blast-away { animation: none !important; } #els-brain-game .elsbc__effects { display: none; } } /* Version 3: isolated collection, verification and reward presentation. */ #els-brain-game#els-brain-game .elsbc__view-nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0; } #els-brain-game#els-brain-game .elsbc__tabs { grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } #els-brain-game#els-brain-game .elsbc__tabs button, #els-brain-game#els-brain-game .elsbc__pathway-link { min-width:0;min-height:48px;padding:12px 10px;border:1px solid #30476b;border-radius:12px;background:#10213a;color:#c7d6ed;font-size:16px;font-weight:800;line-height:1.5;text-align:center;overflow-wrap:anywhere; } #els-brain-game#els-brain-game .elsbc__tabs button[aria-selected="true"] { background:#1f5084;border-color:#71c7ff;color:white; } #els-brain-game .elsbc__tabs span { display:inline-block;margin-left:5px;font-size:14px; } #els-brain-game#els-brain-game .elsbc__pathway-link { display:grid;place-items:center;font-family:inherit;letter-spacing:normal;text-transform:uppercase;text-decoration:none; } #els-brain-game#els-brain-game .elsbc__pathway-link:hover, #els-brain-game#els-brain-game .elsbc__pathway-link:focus-visible { border-color:#71c7ff;background:#1a3b61;color:white; } @media(max-width:600px) { #els-brain-game#els-brain-game .elsbc__view-nav { grid-template-columns:minmax(0,1fr); } #els-brain-game#els-brain-game .elsbc__tabs { grid-column:1; } } #els-brain-game#els-brain-game .elsbc__collection h2 { font-size:30px;line-height:1.2;color:white!important;margin:8px 0 12px; } #els-brain-game .elsbc__collection-head p,#els-brain-game .elsbc__collection>p { color:#c2d0e5;font-size:16px;line-height:1.6;margin:14px 0; } #els-brain-game .elsbc__season-note { padding:16px;background:#b586211b;border:1px solid #6b5839;border-radius:12px; } #els-brain-game .elsbc__collection-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:22px 0; } #els-brain-game#els-brain-game .elsbc__collection-card { position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid #324765;border-radius:16px;text-align:left;background:#101a2c;color:white;transition:transform .2s; } #els-brain-game .elsbc__collection-card:not(:disabled):hover { transform:translateY(-4px); } #els-brain-game .elsbc__collection-card:disabled { opacity:1; } #els-brain-game .elsbc__collection-card strong { min-height:2.6em;font-size:17px;line-height:1.3;overflow-wrap:anywhere; } #els-brain-game .elsbc__collection-card>span { font-size:14px;color:#d4e3f9; } #els-brain-game .elsbc__collection-card small { font-size:14px;color:#b9cde7; } #els-brain-game .elsbc__card-art { position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:230px;margin:0 auto;aspect-ratio:3/4;border:0;border-radius:0;background:transparent;overflow:visible;filter:drop-shadow(0 7px 12px #0005) drop-shadow(0 0 10px var(--card-glow,transparent)); } #els-brain-game .elsbc__card-face { position:absolute;display:block;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:auto;max-width:100%;aspect-ratio:var(--card-ratio,3/4);border-radius:5.5% / var(--card-round-y,4.125%);overflow:hidden;background:transparent; } #els-brain-game#els-brain-game .elsbc__card-face>img { display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;margin:0!important;padding:0!important;border:0!important; } #els-brain-game .elsbc__card-art--locked { filter:grayscale(1);opacity:.48; } #els-brain-game .elsbc__card-art[data-rarity="rare"] { --card-glow:#7eabff33; } #els-brain-game .elsbc__card-art[data-rarity="epic"] { --card-glow:#d87bff55; } #els-brain-game .elsbc__card-art[data-rarity="legendary"] { --card-glow:#ffc64866; } #els-brain-game .elsbc__card-art[data-rarity="ultra-rare"] { --card-glow:#ffd35b77; } #els-brain-game .elsbc__card-art[data-rarity="limited"] { --card-glow:#faca7755; } #els-brain-game .elsbc__featured-tag { position:absolute;top:17px;left:16px;border-radius:6px;background:#041627dd;color:#ffdf88;font-size:12px;padding:3px 6px; } #els-brain-game .elsbc__featured-badge { display:block;font-size:14px;line-height:1.35;color:var(--card-colour,#c6d7ed);white-space:normal; } #els-brain-game .elsbc__podium-label { display:block;font-size:11px;letter-spacing:1px;font-weight:800;color:#f8d68b; } #els-brain-game .elsbc__leader-row--podium { border:1px solid #b28c4240;background:linear-gradient(100deg,#c1921925,#162439); } #els-brain-game .elsbc__power { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin:12px 0;border:1px solid #a58a47;border-radius:13px;background:#7f601a1c; } #els-brain-game .elsbc__power strong { color:#ffdf8d; } #els-brain-game .elsbc__power p { color:#d5ddeb;font-size:14px;line-height:1.5;margin-top:5px; } #els-brain-game .elsbc__power button { flex-shrink:0;max-width:150px;min-height:46px; } #els-brain-game .elsbc__tile--safe { outline:2px solid #8cead7;outline-offset:-5px;box-shadow:0 0 20px #72efbb33; } #els-brain-game .elsbc__tile--safe::after { content:"✓";position:absolute;right:8%;top:1%;color:#aaf3cd;font-size:20px;font-weight:900; } #els-brain-game .elsbc__tile--defused { background:radial-gradient(circle,#285557,#123139);border-color:#77cbba; } #els-brain-game .elsbc__tile--defused svg { width:62%;height:62%;opacity:.8; } #els-brain-game .elsbc__tile--defused::after { content:"✓";position:absolute;right:5%;bottom:1%;color:#b2ffe5;font-size:24px;font-weight:900; } #els-brain-game .elsbc__announcement { position:absolute;z-index:7;left:4%;right:4%;top:37%;pointer-events:none;text-align:center;color:white;text-shadow:0 3px 6px #000,0 0 25px #48bcff;font-size:clamp(25px,5vw,43px);font-weight:950;line-height:1.2; } #els-brain-game .elsbc__announcement--major { color:#ffe9aa;text-shadow:0 3px 6px #000,0 0 25px #ffc04c; } #els-brain-game .elsbc__announcement--show { animation:elsbc-score-shout .9s ease both; } #els-brain-game .elsbc__gold-reveal { position:absolute;inset:0;z-index:8;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;overflow:hidden;padding:16px 20px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#a97c34ee,#101729f5 70%);box-shadow:inset 0 0 80px #f3bc4c55; } #els-brain-game .elsbc__gold-reveal>.elsbc__card-art { max-width:150px;flex-shrink:1;min-height:0; } #els-brain-game .elsbc__gold-reveal>strong { font-size:24px;line-height:1.2;color:white;z-index:1; } #els-brain-game .elsbc__gold-reveal>span,#els-brain-game .elsbc__gold-reveal>p,#els-brain-game .elsbc__gold-reveal>button { position:relative;z-index:1; } #els-brain-game .elsbc__gold-reveal>p { font-size:14px;line-height:1.35;color:#ffe9bd;max-width:380px; } #els-brain-game .elsbc__gold-reveal>span { font-size:13px;font-weight:800;color:#ffdf94; } #els-brain-game .elsbc__gold-reveal .elsbc__gold-points { font-size:18px; } #els-brain-game .elsbc__gold-reveal button { min-height:44px;padding:9px 22px;margin-top:3px; } #els-brain-game .elsbc__gold-rays { position:absolute;inset:-80%;background:repeating-conic-gradient(from 0deg,#ffdf8829 0deg 9deg,transparent 9deg 30deg);animation:elsbc-gold-rays 16s linear infinite;pointer-events:none; } #els-brain-game.elsbc--golden { border-color:#ffe1a0;box-shadow:0 0 55px #dcb15944; } #els-brain-game.elsbc--golden .elsbc__arena { min-height:480px; } #els-brain-game .elsbc__grid--celebrate .elsbc__tile { animation:elsbc-gold-shake .55s ease both; } #els-brain-game .elsbc__grid--celebrate .elsbc__tile:nth-child(even) { animation-delay:.08s; } #els-brain-game .elsbc__gold-reveal::after { content:"✦ · ✧ · ✦";position:absolute;top:7%;font-size:45px;letter-spacing:20px;color:#ffe8a8;opacity:.35;animation:elsbc-gold-sparkle 1.8s ease infinite alternate;pointer-events:none; } #els-brain-game .elsbc__bonus { display:flex;align-items:center;gap:18px;text-align:left;background:#071a34;border:1px solid #3b6295;border-radius:15px;padding:15px;margin:16px 0; } #els-brain-game .elsbc__result-replay { width:100%;margin:0 0 18px;scroll-margin-block:20px; } #els-brain-game .elsbc__bonus>div:last-child { min-width:0; } #els-brain-game .elsbc__bonus strong { display:block;font-size:21px;color:#b8f6ff;line-height:1.3; } #els-brain-game .elsbc__bonus span { font-size:13px;color:#b7cce9;letter-spacing:1px;font-weight:800; } #els-brain-game .elsbc__bonus p { font-size:14px;line-height:1.45;margin-top:5px;color:#cbd9ec; } #els-brain-game .elsbc__bonus-wheel { width:88px;height:88px;flex-shrink:0;position:relative;border-radius:50%;border:3px solid #d3ddf5;background:conic-gradient(#517fc6 0deg 72deg,#369899 72deg 144deg,#7869c5 144deg 216deg,#ae8941 216deg 288deg,#455975 288deg 360deg);box-shadow:0 0 0 5px #2b456d; } #els-brain-game .elsbc__bonus-wheel i { position:absolute;font-size:13px;font-style:normal;font-weight:900;color:white;text-shadow:0 1px 3px #000; } #els-brain-game .elsbc__bonus-wheel i:nth-child(1) { top:12%;right:22%; } #els-brain-game .elsbc__bonus-wheel i:nth-child(2) { top:46%;right:7%; } #els-brain-game .elsbc__bonus-wheel i:nth-child(3) { bottom:8%;right:40%; } #els-brain-game .elsbc__bonus-wheel i:nth-child(4) { top:49%;left:11%; } #els-brain-game .elsbc__bonus-wheel i:nth-child(5) { top:16%;left:23%; } #els-brain-game .elsbc__bonus-wheel--spin { animation:elsbc-bonus-turn 1.2s cubic-bezier(.12,.55,.13,1) both; } #els-brain-game .elsbc__new-best { color:#ffe396;font-size:20px;font-weight:900;letter-spacing:1px;margin:12px 0; } #els-brain-game .elsbc__discoveries { display:grid;gap:9px;margin:16px 0; } #els-brain-game .elsbc__discovery-button { padding:13px 15px;min-height:48px;line-height:1.4;border:1px solid var(--card-colour);border-radius:12px;background:#0b1930;color:var(--card-colour);font-size:16px;font-weight:750; } #els-brain-game .elsbc__collectible-modal { position:fixed;inset:0;z-index:2147483647;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;border:0;background:#020713d9;display:flex;align-items:center;justify-content:center;padding:20px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));color:var(--bc-text);overflow:hidden; } #els-brain-game .elsbc__collectible-modal::backdrop { background:transparent; } #els-brain-game .elsbc__collectible-dialog { position:relative;display:flex;flex-direction:column;width:100%;max-width:510px;max-height:100%;min-height:0;overflow:hidden;border:0;border-radius:22px;background:radial-gradient(ellipse at top,#1a3355,#0e1729 70%);padding:42px 0 0;box-shadow:0 30px 100px #0008;text-align:center; } #els-brain-game#els-brain-game .elsbc__card-close { position:absolute;z-index:3;top:6px;right:6px;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px;border:0;border-radius:50%;box-shadow:none;background:transparent;color:#e7efff!important;text-decoration:none!important;line-height:1;filter:drop-shadow(0 1px 3px #0008); } #els-brain-game .elsbc__card-close svg { display:block;width:24px;height:24px;pointer-events:none; } #els-brain-game#els-brain-game .elsbc__card-close:hover { color:white!important; } #els-brain-game .elsbc__collectible-body { min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 24px 24px; } #els-brain-game#els-brain-game .elsbc__collectible-dialog h3 { color:white!important;font-size:28px!important;line-height:1.2;margin:0 24px 18px; } #els-brain-game .elsbc__collectible-body>strong { display:block;margin:16px 0;color:#ffe2a0; } #els-brain-game .elsbc__collectible-dialog p { margin:12px 0;font-size:16px;line-height:1.6;color:#d4dff0; } #els-brain-game .elsbc__collectible-dialog .elsbc__save-image { max-width:330px;margin:16px auto; } #els-brain-game .elsbc__collectible-dialog textarea { width:100%;min-height:95px;border:1px solid #476285;padding:12px;background:#08172b;color:white; } #els-brain-game .elsbc__rules { padding:14px;border:1px solid #29405f;border-radius:12px;text-align:left;margin-top:18px; } #els-brain-game .elsbc__rules summary { cursor:pointer;font-size:16px;font-weight:750;min-height:30px; } #els-brain-game .elsbc__rules p { font-size:15px!important;line-height:1.65;margin:12px 0; } #els-brain-game [data-role="verify-error"] { color:#ffd4be;font-weight:700; } #els-brain-game#els-brain-game [data-action="leaderboard-only"] { display:block;width:fit-content;max-width:100%;margin:12px auto 0;text-align:center; } #els-brain-game .elsbc__leader-row:hover { filter:brightness(1.16); } #els-brain-game .elsbc__leader-row:focus-visible { outline-offset:-4px; } #els-brain-game .elsbc__public-dialog { max-width:720px; } #els-brain-game .elsbc__public-stats { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 24px; } #els-brain-game .elsbc__public-stats>div { display:flex;flex-direction:column;gap:5px;min-width:0;padding:16px 10px;border:1px solid #35506f;border-radius:12px;background:#0a182b; } #els-brain-game .elsbc__public-stats span { color:#b9d3ec;font-size:12px;font-weight:800;letter-spacing:.5px; } #els-brain-game#els-brain-game .elsbc__public-stats strong { color:white!important;font-size:clamp(20px,4vw,29px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; } #els-brain-game .elsbc__public-dialog h3 { overflow-wrap:anywhere; } #els-brain-game .elsbc__public-dialog h4 { font-size:21px;font-weight:800; } #els-brain-game .elsbc__public-dialog .elsbc__public-order { font-size:14px;color:#b9d3ec;margin:6px 0 18px; } #els-brain-game [data-role="public-status"]:empty { display:none; } #els-brain-game .elsbc__public-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; } #els-brain-game .elsbc__public-card { display:flex;flex-direction:column;gap:6px;min-width:0;width:100%;padding:12px 10px;border:1px solid #35506f;border-radius:14px;background:#0a182b;color:inherit;text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; } #els-brain-game .elsbc__public-card .elsbc__card-art { flex:0 0 auto;width:100%;margin:0 auto 6px;transition:transform .3s ease; } #els-brain-game#els-brain-game .elsbc__public-card>strong { color:white!important;font-size:15px;line-height:1.4;overflow-wrap:anywhere; } #els-brain-game .elsbc__public-card>span { font-size:12px;font-weight:800;color:#c1d9f3; } #els-brain-game .elsbc__public-card>small { font-size:12px;line-height:1.5;color:#b9cde4; } #els-brain-game .elsbc__public-card-detail .elsbc__card-art { width:100%;max-width:280px;margin:0 auto 18px; } #els-brain-game .elsbc__public-card-detail>strong { display:block;color:#ffe2a0;font-size:15px; } /* The shared modal inspector uses CSS 3D only; the original card art also powers PNG exports. */ #els-brain-game .elsbc__collectible-body .elsbc__card-art--3d { --card-view-height:clamp(180px,48vh,400px);--card-view-height:clamp(180px,48dvh,400px); display:block;width:100%;max-width:330px;height:auto;aspect-ratio:auto;margin:0 auto 16px;filter:none; } #els-brain-game .elsbc__card-stage { position:relative;width:100%;height:var(--card-view-height);perspective:1100px;perspective-origin:50% 45%;border-radius:14px;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; } #els-brain-game .elsbc__card-stage:focus-visible { outline:2px solid var(--bc-cyan);outline-offset:-3px; } #els-brain-game .elsbc__card-stage--dragging { cursor:grabbing; } #els-brain-game .elsbc__card-object { position:absolute;left:50%;top:50%;width:min(84%,calc(var(--card-view-height) * .84 * var(--card-view-ratio,.75)));aspect-ratio:var(--card-ratio,3/4);transform-style:preserve-3d;transform:translate(-50%,-50%);pointer-events:none; } #els-brain-game .elsbc__card-object>.elsbc__card-front,#els-brain-game .elsbc__card-back { position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:5.5% / var(--card-round-y,4.125%);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 16px 30px #0005,0 0 20px var(--card-glow,#61baff22); } #els-brain-game .elsbc__card-object>.elsbc__card-front { transform:translateZ(2px); } #els-brain-game .elsbc__card-front::after { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--foil-x,50%) var(--foil-y,50%),#e6fcff55,transparent 48%),linear-gradient(120deg,transparent 24%,#c9fbff22 43%,#ffffff08 49%,transparent 62%);mix-blend-mode:screen;opacity:.28; } #els-brain-game .elsbc__card-back { transform:rotateY(180deg) translateZ(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;padding:11% 8%;overflow:hidden;border:2px solid var(--card-colour,#8dccff);background:radial-gradient(ellipse at 15% 0%,#2d568a,#0b1731 65%),#0b1731;color:white; } #els-brain-game .elsbc__card-back::before { content:"";position:absolute;inset:3%;border:1px solid var(--card-colour,#8dccff);border-radius:4%;opacity:.65; } #els-brain-game .elsbc__card-back::after { content:"";position:absolute;width:135%;aspect-ratio:1;left:-18%;top:0;border:1px solid #97cfff44;border-radius:28%;transform:rotate(45deg);box-shadow:inset 0 0 0 12px #7dbaff08,0 0 0 18px #7dbaff08,0 0 0 38px #7dbaff08;pointer-events:none; } #els-brain-game .elsbc__card-back-logo { position:relative;z-index:1;display:block;width:84%;aspect-ratio:430.83/238.77;background-position:center;background-size:contain;background-repeat:no-repeat; } #els-brain-game .elsbc__card-back-label { position:relative;z-index:1;font-size:clamp(9px,2.2vw,11px);font-weight:800;letter-spacing:2px;color:#c7def6; } #els-brain-game .elsbc__card-back-name { position:relative;z-index:1;max-width:100%;font-size:clamp(13px,3vw,19px);line-height:1.25;font-weight:800;overflow-wrap:anywhere; } #els-brain-game .elsbc__card-back-rarity { position:relative;z-index:1;max-width:100%;border:1px solid var(--card-colour,#8dccff);border-radius:20px;padding:5px 10px;font-size:clamp(9px,2vw,11px);line-height:1.3;font-weight:800;letter-spacing:1px;color:var(--card-colour,#8dccff); } #els-brain-game .elsbc__card-edge { position:absolute;display:block;background:linear-gradient(90deg,#7e90a8,#f2f7ff 35%,#a8bfd8 65%,#5a7191);backface-visibility:visible; } #els-brain-game .elsbc__card-edge--left,#els-brain-game .elsbc__card-edge--right { width:4px;height:calc(100% - 20px);top:10px;transform:rotateY(90deg); } #els-brain-game .elsbc__card-edge--left { left:-2px; } #els-brain-game .elsbc__card-edge--right { right:-2px; } #els-brain-game .elsbc__card-edge--top,#els-brain-game .elsbc__card-edge--bottom { height:4px;width:calc(100% - 20px);left:10px;transform:rotateX(90deg); } #els-brain-game .elsbc__card-edge--top { top:-2px; } #els-brain-game .elsbc__card-edge--bottom { bottom:-2px; } #els-brain-game .elsbc__card-view-hint { display:block;margin:0 0 10px;color:#bed2eb;font-size:13px;line-height:1.5; } #els-brain-game .elsbc__card-view-controls { display:flex;justify-content:center;gap:9px; } #els-brain-game#els-brain-game .elsbc__card-view-controls>button { display:inline-flex;align-items:center;justify-content:center;min-width:94px;min-height:44px;width:auto;margin:0;padding:10px 15px;border:1px solid #45638b;border-radius:24px;background:#10243f;color:#e4f0ff;box-shadow:none;font-size:12px;font-weight:800;letter-spacing:.5px;line-height:1.3; } #els-brain-game#els-brain-game .elsbc__card-view-controls>button:hover { border-color:var(--card-colour,#8dccff);background:#183453; } #els-brain-game .elsbc__card-view-sr { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } #els-brain-game .elsbc__public-card-detail>[data-action="back-public-profile"] { display:block;margin:0 0 18px;text-align:left; } #els-brain-game .elsbc__public-discovery { margin:18px 0;padding:18px 14px;border:1px solid #35506f;border-radius:12px;background:#0a182b; } #els-brain-game .elsbc__public-discovery>span { display:block;color:#b9d3ec;font-size:12px;font-weight:800;letter-spacing:.6px;margin-bottom:6px; } #els-brain-game .elsbc__public-discovery>time { display:block;color:white;font-size:18px;font-weight:750;line-height:1.6;overflow-wrap:anywhere; } @media(max-width:600px) { #els-brain-game .elsbc__public-cards { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; } #els-brain-game .elsbc__public-card { padding:10px 8px; } #els-brain-game .elsbc__public-stats>div { padding:12px 7px; } #els-brain-game .elsbc__public-stats span { font-size:11px; } } #els-brain-game [data-role="code"] { font-size:25px;letter-spacing:6px;text-align:center; } #els-brain-game#els-brain-game .elsbc__collection-card strong, #els-brain-game#els-brain-game .elsbc__collectible-dialog h3, #els-brain-game#els-brain-game .elsbc__gold-reveal>strong { color:white!important;-webkit-text-fill-color:white!important; } @keyframes elsbc-score-shout { 0%{opacity:0;transform:translateY(16px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.04)}65%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-24px) scale(.98)} } @keyframes elsbc-gold-rays { to{transform:rotate(360deg)} } @keyframes elsbc-gold-shake { 0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-2deg)}65%{transform:translateY(2px) rotate(2deg)} } @keyframes elsbc-gold-sparkle { to{opacity:.7;transform:translateY(8px)} } @keyframes elsbc-bonus-turn { from{transform:rotate(0)}to{transform:rotate(var(--bonus-turn,1800deg))} } @media(max-width:600px) { #els-brain-game .elsbc__collection-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } #els-brain-game .elsbc__collection-card { padding:8px; } #els-brain-game .elsbc__collection-card strong { font-size:16px; } #els-brain-game .elsbc__power { flex-direction:column;align-items:stretch; } #els-brain-game .elsbc__power button { max-width:none; } #els-brain-game .elsbc__gold-reveal { gap:4px;padding:12px; } #els-brain-game .elsbc__gold-reveal>.elsbc__card-art { max-width:106px; } #els-brain-game .elsbc__gold-reveal>strong { font-size:21px; } #els-brain-game .elsbc__gold-reveal>p { font-size:13px; } #els-brain-game .elsbc__gold-reveal>span { font-size:12px; } #els-brain-game .elsbc__gold-reveal .elsbc__gold-points { font-size:16px; } #els-brain-game .elsbc__collectible-body { padding:14px 16px 20px; } #els-brain-game .elsbc__bonus { gap:14px;padding:13px; } } @media(prefers-reduced-motion:reduce) { #els-brain-game .elsbc__gold-rays,#els-brain-game .elsbc__gold-reveal::after,#els-brain-game .elsbc__grid--celebrate .elsbc__tile,#els-brain-game .elsbc__announcement--show,#els-brain-game .elsbc__bonus-wheel--spin { animation:none!important; } #els-brain-game .elsbc__collection-card { transition:none!important; } } /* Theme-resistant text colours stay inside the game wrapper. */ #els-brain-game#els-brain-game strong,#els-brain-game#els-brain-game b { color:inherit!important;-webkit-text-fill-color:inherit!important; } #els-brain-game#els-brain-game [data-role="multiplier"] { color:#76e9ff!important;-webkit-text-fill-color:#76e9ff!important; } #els-brain-game#els-brain-game [data-role="bonus-label"] { color:#b8f6ff!important;-webkit-text-fill-color:#b8f6ff!important; } #els-brain-game#els-brain-game [data-role="power-name"],#els-brain-game#els-brain-game [data-role="collectible-rarity"] { color:#ffdf8d!important;-webkit-text-fill-color:#ffdf8d!important; } /* Version 3.1: a roomy desktop board, bounded controls, and phone-first spacing. */ #els-brain-game[data-layout="screen"] { width:var(--els-viewport-width,100%)!important;max-width:none!important;margin-left:var(--els-screen-offset,0px)!important;margin-right:0!important;border-radius:0;min-height:100vh;min-height:100dvh; } #els-brain-game .elsbc__shell { max-width:1480px;padding:28px clamp(14px,3vw,48px) 36px; } #els-brain-game .elsbc__game { width:100%;max-width:920px; } #els-brain-game .elsbc__stats,#els-brain-game .elsbc__allowance { max-width:1140px;margin-left:auto;margin-right:auto; } #els-brain-game .elsbc__leaderboard { width:100%;max-width:920px;margin-left:auto;margin-right:auto; } #els-brain-game .elsbc__brand { display:block;font-size:14px;font-weight:850;letter-spacing:3px;text-transform:uppercase;color:#d0e9ff;margin-bottom:12px; } #els-brain-game#els-brain-game .elsbc__title { font-size:clamp(33px,4.6vw,68px)!important;line-height:1.08!important;letter-spacing:-1.3px;color:#ffffff!important; } #els-brain-game#els-brain-game .elsbc__title span { color:#a3d8ff!important; } #els-brain-game .elsbc__subtitle { font-size:18px; } #els-brain-game .elsbc__stat { padding:22px 20px; } #els-brain-game .elsbc__stat strong { font-size:clamp(24px,2.8vw,40px); } /* A shared fitted size keeps all four figures equal, including a long personal best. */ #els-brain-game#els-brain-game .elsbc__stats .elsbc__stat>strong { font-size:var(--els-stat-size,clamp(24px,2.8vw,40px))!important;line-height:1.2;white-space:nowrap;min-width:0; } #els-brain-game .elsbc__intro-brain { width:clamp(96px,15vw,180px); } #els-brain-game .elsbc__intro h3 { font-size:clamp(24px,3.2vw,40px); } #els-brain-game .elsbc__collection-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:22px; } #els-brain-game .elsbc__collection-back { display:flex;justify-content:center;margin:24px 0 8px; } #els-brain-game .elsbc__collection-back>button { min-width:220px;padding:14px 25px; } #els-brain-game#els-brain-game .elsbc__collection-card { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;background:linear-gradient(145deg,#14233b,#0b1528); } #els-brain-game .elsbc__collection-card .elsbc__card-art { flex:0 0 auto;min-height:0;transition:transform .3s ease; } #els-brain-game .elsbc__card-art--locked { filter:none;opacity:1; } #els-brain-game .elsbc__card-art--locked .elsbc__card-face>img { filter:grayscale(1);opacity:.35; } #els-brain-game .elsbc__card-lock { position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:52px;height:52px;display:grid;place-items:center;border:1px solid #7085a0;border-radius:16px;background:#0b142aee;color:white;box-shadow:0 8px 20px #0008; } #els-brain-game .elsbc__card-lock svg { width:28px;height:28px; } #els-brain-game .elsbc__leader-row--place-1 { border-color:#d4ae6e88;background:linear-gradient(100deg,#bd902a29,#162439);box-shadow:inset 0 0 24px #ffc75415,0 0 18px #ffc75426; } #els-brain-game .elsbc__leader-row--place-2 { border-color:#c7d7e777;background:linear-gradient(100deg,#d6e4f225,#162439);box-shadow:inset 0 0 24px #dceaff13,0 0 18px #dceaff22; } #els-brain-game .elsbc__leader-row--place-3 { border-color:#c68c6277;background:linear-gradient(100deg,#b1764328,#162439);box-shadow:inset 0 0 24px #cb8e5a18,0 0 18px #cb8e5a26; } #els-brain-game .elsbc__leader-row--place-2 .elsbc__podium-label { color:#d8e8f9; } #els-brain-game .elsbc__leader-row--place-3 .elsbc__podium-label { color:#e4b48c; } #els-brain-game .elsbc__wheel-wrap { width:144px;height:144px;position:relative;flex-shrink:0; } #els-brain-game .elsbc__wheel-pointer { position:absolute;z-index:2;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:23px solid #ff4d60;filter:drop-shadow(0 2px 3px #0008); } #els-brain-game .elsbc__bonus-wheel { width:100%;height:100%;transform:rotate(var(--bonus-turn,0deg)); } #els-brain-game .elsbc__bonus-wheel i:nth-child(n) { top:50%;left:50%;right:auto;bottom:auto;width:34px;height:24px;margin:-12px 0 0 -17px;text-align:center;font-size:16px;line-height:24px;transform:rotate(calc(36deg + var(--slot)*72deg)) translateY(-46px) rotate(calc(-36deg - var(--slot)*72deg)); } #els-brain-game .elsbc__play-dots { flex-wrap:wrap;max-width:260px; } @media(hover:hover) and (prefers-reduced-motion:no-preference) { #els-brain-game#els-brain-game .elsbc__collection-card:hover,#els-brain-game#els-brain-game .elsbc__collection-card:focus-visible, #els-brain-game#els-brain-game .elsbc__public-card:hover,#els-brain-game#els-brain-game .elsbc__public-card:focus-visible { transform:translateY(-7px);border-color:var(--card-colour,#68baff);box-shadow:0 16px 32px #0005,0 0 22px #6aa6ef22; } #els-brain-game .elsbc__collection-card:hover .elsbc__card-art,#els-brain-game .elsbc__public-card:hover .elsbc__card-art { transform:scale(1.025); } } @media(min-width:1300px) { #els-brain-game .elsbc__collection-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media(max-width:900px) { #els-brain-game .elsbc__collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:600px) { #els-brain-game .elsbc__shell { padding:18px 12px 25px; } #els-brain-game .elsbc__collection-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } #els-brain-game .elsbc__stat { padding:13px 9px; } #els-brain-game .elsbc__stat strong { font-size:24px; } #els-brain-game .elsbc__subtitle { font-size:16px; } #els-brain-game .elsbc__brand { font-size:12px;letter-spacing:2px; } #els-brain-game .elsbc__wheel-wrap { width:112px;height:112px; } #els-brain-game .elsbc__bonus-wheel i:nth-child(n) { font-size:14px;transform:rotate(calc(36deg + var(--slot)*72deg)) translateY(-34px) rotate(calc(-36deg - var(--slot)*72deg)); } #els-brain-game .elsbc__collection-card:active { transform:scale(.99); } } @media(max-width:380px) { #els-brain-game .elsbc__bonus { flex-direction:column;text-align:center;gap:16px; } } @media(prefers-reduced-motion:reduce) { #els-brain-game .elsbc__collection-card,#els-brain-game .elsbc__collection-card .elsbc__card-art,#els-brain-game .elsbc__public-card,#els-brain-game .elsbc__public-card .elsbc__card-art { transition:none!important;transform:none!important; } } /* Version 3.2: larger result, allowance and board-status text, isolated from theme rules. */ #els-brain-game#els-brain-game .elsbc__result-stats > div { font-size:18px!important;line-height:1.5;gap:18px;padding:8px 0; } #els-brain-game#els-brain-game .elsbc__result-stats span { font-size:inherit!important;overflow-wrap:anywhere; } #els-brain-game#els-brain-game .elsbc__result-stats strong { font-size:20px!important;line-height:1.4;flex-shrink:0; } #els-brain-game#els-brain-game .elsbc__allowance { padding:16px 20px;gap:14px 20px; } #els-brain-game#els-brain-game .elsbc__allowance span { font-size:18px!important;line-height:1.45;letter-spacing:.3px; } #els-brain-game#els-brain-game .elsbc__allowance strong { font-size:20px!important;line-height:1.45; } #els-brain-game#els-brain-game .elsbc__round-bar { font-size:18px!important;line-height:1.5;gap:10px 18px;margin-bottom:14px; } #els-brain-game#els-brain-game .elsbc__round-bar span,#els-brain-game#els-brain-game .elsbc__next strong { font-size:inherit!important; } #els-brain-game .elsbc__card-availability { margin-top:auto;font-weight:750;line-height:1.45; } #els-brain-game .elsbc__collection-card[data-availability="current"] { border-color:#cfac6999; } #els-brain-game .elsbc__collection-card[data-availability="current"] .elsbc__card-availability { color:#ffe3a3; } @media(max-width:600px) { #els-brain-game#els-brain-game .elsbc__result-stats { padding:10px 12px; } #els-brain-game#els-brain-game .elsbc__result-stats > div { font-size:17px!important;gap:12px; } #els-brain-game#els-brain-game .elsbc__result-stats strong { font-size:18px!important; } #els-brain-game#els-brain-game .elsbc__allowance { padding:14px; } #els-brain-game#els-brain-game .elsbc__allowance span { font-size:17px!important; } #els-brain-game#els-brain-game .elsbc__allowance strong { font-size:19px!important; } #els-brain-game#els-brain-game .elsbc__round-bar { font-size:17px!important; } } /* Version 3.3: remembered-player controls, clear verification actions and footer icons. */ #els-brain-game .elsbc__player { max-width:1140px;margin:0 auto 20px;padding:16px 20px;border:1px solid #294c6c;border-radius:12px;background:#10253b; } #els-brain-game .elsbc__player-line { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; } #els-brain-game .elsbc__player-line span { color:#b8d8f4;font-size:16px; } #els-brain-game .elsbc__player-line strong { color:white;font-size:20px;overflow-wrap:anywhere; } #els-brain-game .elsbc__player-line button { width:auto;min-width:180px; } #els-brain-game [data-role="nickname-form"] { margin-top:18px; } #els-brain-game [data-role="nickname-form"] label { font-weight:750;display:block;margin-bottom:8px; } #els-brain-game .elsbc__nickname-row { display:flex;align-items:center;flex-wrap:wrap;gap:10px; } #els-brain-game .elsbc__nickname-row input { flex:1;min-width:150px;min-height:48px;border:1px solid #6287a9;border-radius:9px;padding:10px 12px;font:inherit;background:#071a32;color:white; } #els-brain-game .elsbc__nickname-row .elsbc__primary { width:auto;min-width:180px; } #els-brain-game [data-role="nickname-form"] p { margin-top:10px;line-height:1.6;color:#c2dbef;font-size:16px; } #els-brain-game .elsbc__verification-home { max-width:920px;margin:auto; } #els-brain-game .elsbc__verification-home:not(:empty) { margin-bottom:20px; } #els-brain-game .elsbc__verification-options { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0; } #els-brain-game .elsbc__verification-options span { grid-column:1/-1;color:#d9eafd;font-size:16px;line-height:1.6; } #els-brain-game [data-role="send-error"],#els-brain-game [data-role="verify-error"],#els-brain-game [data-role="nickname-note"] { color:#ffd5bb!important;font-size:16px;line-height:1.6; } #els-brain-game .elsbc__socials { display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:22px 0 16px; } #els-brain-game .elsbc__socials a { display:grid;place-items:center;width:48px;height:48px;padding:11px;border:1px solid #466382;border-radius:14px;background:#12283f;color:#e9f5ff;text-decoration:none;transition:transform .18s,border-color .18s,background .18s; } #els-brain-game .elsbc__socials svg { width:24px;height:24px; } #els-brain-game .elsbc__socials a:hover { border-color:#7de3ff;background:#1b4263;transform:translateY(-3px); } #els-brain-game .elsbc__socials a:focus-visible { outline:3px solid #76e9ff;outline-offset:4px; } @media(max-width:600px) { #els-brain-game .elsbc__player { padding:14px; } #els-brain-game .elsbc__player-line button,#els-brain-game .elsbc__nickname-row .elsbc__primary { width:100%; } } @media(prefers-reduced-motion:reduce) { #els-brain-game .elsbc__socials a { transition:none;transform:none; } } /* Remembered-player greeting beside the daily streak. */ #els-brain-game .elsbc__profile-card { display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:16px;padding:14px;border:1px solid var(--card-colour,#79cfff);border-radius:12px;background:#091a30; } #els-brain-game .elsbc__profile-card .elsbc__card-art { width:76px;max-width:76px;margin:0;border-radius:8px; } #els-brain-game .elsbc__profile-card .elsbc__card-tag { display:none; } #els-brain-game .elsbc__profile-card small,#els-brain-game .elsbc__profile-card span { display:block;font-size:14px;color:#b7cee8;line-height:1.5; } #els-brain-game#els-brain-game .elsbc__profile-card strong { display:block;color:white!important;-webkit-text-fill-color:white!important;font-size:20px;line-height:1.4;overflow-wrap:anywhere;margin:4px 0; } #els-brain-game .elsbc__profile-card button { width:auto;min-width:120px; } @media(max-width:600px) { #els-brain-game .elsbc__profile-card { grid-template-columns:70px minmax(0,1fr);gap:12px; } #els-brain-game .elsbc__profile-card .elsbc__card-art { width:70px;max-width:70px; } #els-brain-game .elsbc__profile-card button { grid-column:1/-1;width:100%; } } #els-brain-game .elsbc__top-actions { flex-wrap:wrap;justify-content:flex-end;min-width:0; } #els-brain-game#els-brain-game .elsbc__welcome { color:#d8e9fb!important;font-size:18px;line-height:1.5;max-width:320px;text-align:right;overflow-wrap:anywhere; } #els-brain-game#els-brain-game .elsbc__welcome strong { color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font:inherit;font-weight:850; } @media(max-width:600px) { #els-brain-game .elsbc__top { align-items:flex-start; } #els-brain-game .elsbc__logo { flex-shrink:0; } #els-brain-game .elsbc__top-actions { gap:8px; } #els-brain-game#els-brain-game .elsbc__welcome { flex-basis:100%;width:100%;min-width:0;max-width:none;font-size:17px; } #els-brain-game#els-brain-game .elsbc__welcome strong { display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } } /* Keep the 5x5 board compact while the surrounding page stays full width. */ #els-brain-game#els-brain-game .elsbc__game { width:100%!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important; } @media(min-width:641px) { #els-brain-game#els-brain-game .elsbc__game { max-width:clamp(360px,calc(100vh - 160px),640px)!important; max-width:clamp(360px,calc(100svh - 160px),640px)!important; } } /* Card-specific atmospheres stay behind the content and use cached preview art. */ #els-brain-game .elsbc__collectible-dialog[data-card-theme] { isolation:isolate;background:radial-gradient(ellipse at 12% 0%,var(--scene-top),transparent 75%),linear-gradient(145deg,var(--scene-deep),#080f1d);box-shadow:0 28px 95px #000b,0 0 60px color-mix(in srgb,var(--scene-accent) 12%,transparent); } #els-brain-game .elsbc__collectible-dialog[data-card-theme]::before { content:"";position:absolute;inset:-24px;z-index:0;pointer-events:none;background-image:linear-gradient(180deg,#08101c55,#08101ccc),var(--scene-art);background-size:cover;background-position:center;filter:blur(24px) saturate(1.15);opacity:.25; } #els-brain-game .elsbc__collectible-dialog[data-card-theme]::after { content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--scene-header),var(--scene-pattern);background-size:100% auto,260px 260px;background-repeat:no-repeat,repeat;background-position:top center,center;opacity:.65; } #els-brain-game .elsbc__collectible-dialog[data-card-theme]>.elsbc__collectible-body,#els-brain-game .elsbc__collectible-dialog[data-card-theme]>.elsbc__discovery-body,#els-brain-game .elsbc__collectible-dialog[data-card-theme]>.elsbc__discovery-footer { position:relative;z-index:1; } #els-brain-game .elsbc__collectible-modal[data-card-atmosphere="active"] { background:radial-gradient(ellipse at center,color-mix(in srgb,var(--scene-accent) 14%,#030812e8),#020611ed 75%); } #els-brain-game .elsbc__collectible-dialog[data-card-theme="christmas"] { background:radial-gradient(ellipse at top left,#214f3f,transparent 70%),radial-gradient(ellipse at bottom right,#4b2533,transparent 68%),#0b1720; } #els-brain-game .elsbc__collectible-dialog[data-card-theme] .elsbc__public-discovery { background:#081321c9;border-color:color-mix(in srgb,var(--scene-accent) 36%,#17253c); } #els-brain-game .elsbc__collectible-dialog[data-card-theme] .elsbc__eyebrow { color:var(--scene-glow); } #els-brain-game .elsbc__card-mystery { display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:12%;background:radial-gradient(ellipse at top left,#24517a,#09162d 75%);border:2px solid var(--card-colour,#a2c9ff);border-radius:inherit; } #els-brain-game .elsbc__card-mystery::before { content:"";position:absolute;inset:4%;border:1px solid #b9d8ff55;border-radius:4%; } #els-brain-game .elsbc__card-art--concealed .elsbc__card-mystery { display:flex; } #els-brain-game .elsbc__card-art--concealed .elsbc__card-front>img { visibility:hidden; } #els-brain-game .elsbc__card-art--concealed .elsbc__card-back-name,#els-brain-game .elsbc__card-art--concealed .elsbc__card-back-rarity { visibility:hidden; } #els-brain-game .elsbc__card-art--concealed .elsbc__card-front::after { opacity:.6; } /* Discovery uses the native top layer, so 720-degree turns stay large and unclipped. */ #els-brain-game .elsbc__gold-reveal.elsbc__collectible-modal { position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;z-index:2147483647;border:0;border-radius:0;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center;gap:0;overflow:hidden;background:#020713e8;box-shadow:none; } #els-brain-game .elsbc__gold-reveal.elsbc__collectible-modal::after { content:none;animation:none; } #els-brain-game .elsbc__discovery-dialog { max-width:560px;padding-top:40px; } #els-brain-game .elsbc__discovery-body { min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 24px 12px;display:flex;flex-direction:column;align-items:center;gap:10px; } #els-brain-game .elsbc__discovery-body>strong { display:block;font-size:clamp(22px,4vw,29px);font-weight:850;line-height:1.2;color:#fff; } #els-brain-game .elsbc__discovery-body>span { font-size:13px;line-height:1.5;font-weight:750;color:#ffe2a3; } #els-brain-game .elsbc__discovery-body>p { font-size:14px;line-height:1.5;margin:0;color:#dce8f7; } #els-brain-game .elsbc__discovery-body>.elsbc__eyebrow { font-size:12px;letter-spacing:2px; } #els-brain-game .elsbc__discovery-body>.elsbc__discovery-progress { color:#c3d5e8;font-size:12px;font-weight:500; } #els-brain-game .elsbc__discovery-body .elsbc__card-art--discovery { --card-view-height:clamp(170px,43vh,370px);--card-view-height:clamp(170px,43dvh,370px);display:block;max-width:310px;aspect-ratio:auto;flex:0 0 auto;filter:none; } #els-brain-game .elsbc__card-art--discovery .elsbc__card-stage { cursor:default; } #els-brain-game .elsbc__discovery-footer { flex:0 0 auto;padding:8px 24px 20px; } #els-brain-game#els-brain-game .elsbc__discovery-footer>button { display:block;min-height:44px;width:100%;max-width:300px;margin:0 auto;padding:11px 22px;background:#0d2037e8;border:1px solid var(--scene-accent,#f3d182);color:#fff;font-size:13px;font-weight:850; } @keyframes elsbc-card-breathe { 0%,100%{scale:1}50%{scale:1.016} } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #els-brain-game .elsbc__collection-card:not(:disabled):hover .elsbc__card-art,#els-brain-game .elsbc__public-card:hover .elsbc__card-art { animation:elsbc-card-breathe 2.4s ease-in-out infinite; } #els-brain-game .elsbc__card-stage:hover:not(.elsbc__card-stage--dragging):not(.elsbc__card-stage--animating) .elsbc__card-object { animation:elsbc-card-breathe 2.4s ease-in-out infinite; } } @media(prefers-reduced-motion:reduce) { #els-brain-game .elsbc__card-art,#els-brain-game .elsbc__card-object { animation:none!important;scale:1!important; } } @media(max-width:600px) { #els-brain-game .elsbc__discovery-body { padding:5px 16px 10px;gap:8px; } #els-brain-game .elsbc__discovery-footer { padding:7px 16px 16px; } } /* Version 3.13: smooth foil inspection, direct seal tearing and local opening light. */ #els-brain-game .elsbc__discovery-dialog { width:100%;max-width:900px;background:radial-gradient(ellipse at 50% 15%,#263a52,#0b1423 70%); } #els-brain-game .elsbc__discovery-body { min-width:0;max-width:100%;overflow-x:hidden;overflow-y:auto;padding-top:14px;gap:12px; } #els-brain-game .elsbc__discovery-footer { min-width:0;overflow:hidden; } #els-brain-game .elsbc__pack-stage { position:relative;isolation:isolate;flex:0 0 auto;width:100%;max-width:100%;min-width:0;height:clamp(210px,46vh,420px);height:clamp(210px,46dvh,420px);margin:4px 0 10px;overflow:hidden;overflow:clip; } #els-brain-game#els-brain-game .elsbc__pack { position:absolute;top:7%;left:50%;width:auto;height:86%;aspect-ratio:.68;min-height:0;max-width:70%;padding:0;margin:0;border:0;border-radius:7px;background:none;box-shadow:none;transform:translateX(-50%);cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;z-index:2; } #els-brain-game#els-brain-game .elsbc__pack[data-pack-dragging] { cursor:grabbing; } #els-brain-game .elsbc__pack-wrapper { position:absolute;inset:0;display:block;transform:perspective(1000px) translateY(calc(var(--pack-lift,0)*1px)) rotateX(calc(var(--pack-x,0)*1deg)) rotateY(calc(var(--pack-y,-6)*1deg)) rotateZ(-1deg);filter:drop-shadow(8px 17px 13px #0009); } #els-brain-game .elsbc__pack-shell,#els-brain-game .elsbc__pack-tear { position:absolute;inset:0;display:block;overflow:hidden;clip-path:polygon(0 0,5% 1%,10% 0,15% 1%,20% 0,25% 1%,30% 0,35% 1%,40% 0,45% 1%,50% 0,55% 1%,60% 0,65% 1%,70% 0,75% 1%,80% 0,85% 1%,90% 0,95% 1%,100% 0,99% 98%,95% 100%,90% 99%,85% 100%,80% 99%,75% 100%,70% 99%,65% 100%,60% 99%,55% 100%,50% 99%,45% 100%,40% 99%,35% 100%,30% 99%,25% 100%,20% 99%,15% 100%,10% 99%,5% 100%,0 99%);background:linear-gradient(100deg,#61758c 0%,#14243a 2%,#b9cadb 4%,#3a5069 7%,#17273c 13%,#3c5269 37%,#142135 73%,#9eb4c8 96%,#1c2c40 98%,#bccbdc);box-shadow:inset 0 0 0 1px #c0d4e877; } #els-brain-game .elsbc__pack-shell::before,#els-brain-game .elsbc__pack-shell::after { content:"";position:absolute;left:1%;right:1%;height:7%;background:repeating-linear-gradient(90deg,#d2deeb99 0 1px,#13243888 1px 3px),linear-gradient(#a1afc0,#26384b,#7e94ab);border-block:1px solid #0d1a2c;z-index:1; } #els-brain-game .elsbc__pack-shell::before { top:0;mask-image:linear-gradient(90deg,transparent calc(var(--tear-progress,0)*100%),#000 calc(var(--tear-progress,0)*100%)); } #els-brain-game .elsbc__pack-shell::after { bottom:0; } #els-brain-game .elsbc__pack-foil { position:absolute;inset:8% 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:8% 5%;overflow:hidden;border:1px solid #a4c0da55;background:radial-gradient(ellipse at calc(var(--pack-sheen,35)*1%) 20%,#91adc63b,transparent 65%),linear-gradient(125deg,transparent 24%,#f1f8ff12 25%,transparent 27%,transparent 62%,#b6cfe31a 63%,transparent 66%),repeating-linear-gradient(45deg,transparent 0 14px,#8eaac009 14px 15px),radial-gradient(ellipse at 40% 30%,#334b63,#101d30 78%);color:#e8f3ff;text-align:center;box-shadow:inset 5px 0 8px #0004,inset -6px 0 10px #cde4f015; } #els-brain-game .elsbc__pack-foil::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(174deg,#ffffff19,transparent 8%,#0002 12%,transparent 17%),linear-gradient(7deg,#e4f1ff16,transparent 10%,#0002 14%,transparent 21%); } #els-brain-game .elsbc__pack-foil::after { content:"";position:absolute;inset:-20% -40%;pointer-events:none;opacity:0;transform:translateX(-140%) rotate(-15deg);background:linear-gradient(90deg,transparent 32%,#b7d8f014 44%,#eef9ff48 50%,#b7d8f014 56%,transparent 68%); } #els-brain-game .elsbc__pack-edition { position:relative;font-size:clamp(7px,1.4vw,10px);line-height:1.2;font-weight:700;letter-spacing:2px;color:#afc7df; } #els-brain-game .elsbc__pack-logo { position:relative;display:block;width:72%;height:21%;background-position:center;background-repeat:no-repeat;background-size:contain; } #els-brain-game .elsbc__pack-emblem { position:relative;font-size:clamp(27px,5vw,52px);line-height:1;color:#d5edff;text-shadow:0 0 18px #93c9ef44; } #els-brain-game .elsbc__pack-brand { position:relative;font-size:clamp(17px,2.6vw,26px);line-height:1.05;font-weight:900;letter-spacing:2px; } #els-brain-game .elsbc__pack-label { position:relative;font-size:clamp(7px,1.3vw,10px);line-height:1.3;letter-spacing:1.7px;color:#afc7df; } #els-brain-game .elsbc__pack-opening { position:absolute;top:7%;left:1%;width:calc(var(--tear-progress,0)*98%);height:1.5%;background:#03070c;border-top:1px solid rgba(var(--pack-rgb),.8);box-shadow:0 -2px 7px rgba(var(--pack-rgb),.7); } #els-brain-game .elsbc__pack-tear { inset:0 0 auto;height:9%;background:repeating-linear-gradient(90deg,#d0dce98c 0 1px,#24374c88 1px 3px),linear-gradient(100deg,#a6b7cc,#354f69 40%,#a5b7cb);transform-origin:95% 60%;transform:translate(calc(var(--tear-progress,0)*65%),calc(var(--tear-progress,0)*-35%)) rotate(calc(var(--tear-progress,0)*-12deg));border-bottom:2px solid #0a1524;z-index:3; } #els-brain-game .elsbc__pack-tear>span { position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(7px,1.3vw,9px);line-height:1;letter-spacing:1.6px;font-weight:850;color:#ecf5ff;text-shadow:0 1px 3px #000;background:linear-gradient(90deg,transparent,#0c1e3090,transparent); } #els-brain-game .elsbc__pack-light { position:absolute;inset:0;opacity:0;pointer-events:none;z-index:3; } #els-brain-game .elsbc__pack-aura { position:absolute;left:50%;top:13.5%;width:min(95%,600px);height:60%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(var(--pack-rgb),.62),rgba(var(--pack-rgb),.25) 22%,rgba(var(--pack-rgb),.08) 44%,rgba(var(--pack-rgb),0) 72%);filter:blur(7px); } #els-brain-game .elsbc__pack-aura::after { content:"";position:absolute;inset:27% 18%;transform:rotate(-7deg);background:radial-gradient(ellipse at 35% 55%,rgba(var(--pack-rgb),.65),transparent 45%),radial-gradient(ellipse at 65% 40%,rgba(var(--pack-rgb),.45),transparent 40%),radial-gradient(ellipse at center,#fff7,transparent 53%);filter:blur(6px); } #els-brain-game .elsbc__pack-mouth { position:absolute;top:12.8%;left:50%;width:calc(clamp(210px,46vh,420px)*.54);width:calc(clamp(210px,46dvh,420px)*.54);height:1.6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#fffdf2 0%,color-mix(in srgb,var(--pack-colour) 70%,white) 40%,rgba(var(--pack-rgb),0) 75%);box-shadow:0 0 13px 3px rgba(var(--pack-rgb),.8),0 0 32px 10px rgba(var(--pack-rgb),.45);filter:blur(.7px); } #els-brain-game .elsbc__pack-flare { position:absolute;left:50%;top:13.6%;width:calc(clamp(210px,46vh,420px)*1.1);width:calc(clamp(210px,46dvh,420px)*1.1);max-width:96%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(var(--pack-rgb),.2) 14%,rgba(var(--pack-rgb),.8) 42%,#fff 50%,rgba(var(--pack-rgb),.8) 58%,rgba(var(--pack-rgb),.2) 86%,transparent);filter:blur(.4px); } #els-brain-game .elsbc__pack-flare::after { content:"";position:absolute;inset:-6px 18%;border-radius:50%;background:radial-gradient(ellipse,#fff9,rgba(var(--pack-rgb),.5) 28%,transparent 72%);filter:blur(4px); } #els-brain-game .elsbc__pack-bokeh { position:absolute;left:50%;top:13%;width:calc(clamp(210px,46vh,420px)*.85);width:calc(clamp(210px,46dvh,420px)*.85);height:30%;transform:translate(-50%,-30%); } #els-brain-game .elsbc__pack-bokeh i { position:absolute;border:1px solid rgba(var(--pack-rgb),.45);border-radius:50%;background:radial-gradient(circle,transparent 40%,rgba(var(--pack-rgb),.2) 70%,transparent 75%);filter:blur(.6px); } #els-brain-game .elsbc__pack-bokeh i:nth-child(1) { width:19px;height:19px;left:12%;top:13%;opacity:.6; } #els-brain-game .elsbc__pack-bokeh i:nth-child(2) { width:9px;height:9px;left:72%;top:7%;opacity:.4; } #els-brain-game .elsbc__pack-bokeh i:nth-child(3) { width:12px;height:12px;left:86%;top:38%;opacity:.3; } #els-brain-game .elsbc__pack-motes { position:absolute;inset:0 18% 70%; } #els-brain-game .elsbc__pack-motes i { position:absolute;top:48%;left:var(--mote-x);width:2px;height:3px;border-radius:50%;background:#fff9df;box-shadow:0 0 4px 1px var(--pack-colour);opacity:0; } #els-brain-game .elsbc__pack-motes i:nth-child(1) { --mote-x:12%;--mote-y:-25px;--mote-drift:-12px;--mote-delay:0ms; } #els-brain-game .elsbc__pack-motes i:nth-child(2) { --mote-x:25%;--mote-y:-43px;--mote-drift:-8px;--mote-delay:55ms; } #els-brain-game .elsbc__pack-motes i:nth-child(3) { --mote-x:36%;--mote-y:-30px;--mote-drift:7px;--mote-delay:20ms; } #els-brain-game .elsbc__pack-motes i:nth-child(4) { --mote-x:43%;--mote-y:-58px;--mote-drift:-4px;--mote-delay:65ms; } #els-brain-game .elsbc__pack-motes i:nth-child(5) { --mote-x:58%;--mote-y:-34px;--mote-drift:10px;--mote-delay:35ms; } #els-brain-game .elsbc__pack-motes i:nth-child(6) { --mote-x:67%;--mote-y:-48px;--mote-drift:6px;--mote-delay:70ms; } #els-brain-game .elsbc__pack-motes i:nth-child(7) { --mote-x:78%;--mote-y:-23px;--mote-drift:12px;--mote-delay:90ms; } #els-brain-game .elsbc__pack-motes i:nth-child(8) { --mote-x:88%;--mote-y:-39px;--mote-drift:8px;--mote-delay:40ms; } #els-brain-game .elsbc__pack-stage>.elsbc__card-art--discovery { position:absolute;left:50%;top:50%;width:100%;max-width:350px;--card-view-height:clamp(210px,46vh,420px);--card-view-height:clamp(210px,46dvh,420px);transform:translate(-50%,-50%);z-index:4; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="sealed"][data-pack-interaction="tearing"] .elsbc__pack-light { opacity:calc(var(--tear-progress,0)*.85); } #els-brain-game .elsbc__gold-reveal:not([data-reveal-phase="sealed"]) .elsbc__pack-tear { animation:elsbc-pack-tear .6s cubic-bezier(.2,.7,.3,1) both; } #els-brain-game .elsbc__gold-reveal:not([data-reveal-phase="sealed"]) .elsbc__pack-wrapper { animation:elsbc-pack-drop 1s cubic-bezier(.25,.6,.35,1) both; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="opening"] .elsbc__pack-light { animation:elsbc-pack-light .6s ease-out both; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="opening"] .elsbc__pack-shell::before { opacity:0; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="opening"] .elsbc__pack-opening { width:98%; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="opening"] .elsbc__pack-motes i { animation:elsbc-pack-mote .48s ease-out var(--mote-delay) both; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="spinning"] .elsbc__pack-light,#els-brain-game .elsbc__gold-reveal[data-reveal-phase="shown"] .elsbc__pack-light { opacity:0!important;visibility:hidden;animation:none; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="spinning"] [data-role="gold-card"] { animation:elsbc-card-emerge .5s cubic-bezier(.15,.7,.2,1) both; } #els-brain-game .elsbc__gold-reveal[data-reveal-phase="shown"] .elsbc__pack { visibility:hidden; } #els-brain-game .elsbc__gold-reveal:not([data-reveal-phase="sealed"]) [data-role="gold-rarity"] { color:var(--pack-colour); } #els-brain-game#els-brain-game .elsbc__gold-reveal[data-reveal-phase="sealed"] .elsbc__discovery-footer>button { border-color:#97bddf; } @keyframes elsbc-pack-tear { 0%{transform:translate(calc(var(--tear-progress,0)*65%),calc(var(--tear-progress,0)*-35%)) rotate(calc(var(--tear-progress,0)*-12deg));opacity:1}100%{transform:translate(130%,-160%) rotate(-26deg);opacity:0} } @keyframes elsbc-pack-drop { 0%,40%{transform:perspective(1000px) translateY(calc(var(--pack-lift,0)*1px)) rotateX(calc(var(--pack-x,0)*1deg)) rotateY(calc(var(--pack-y,-6)*1deg)) rotateZ(-1deg);opacity:1}100%{transform:perspective(1000px) translateY(60%) rotateX(15deg) rotateY(3deg) rotateZ(4deg) scale(.92);opacity:0} } @keyframes elsbc-pack-light { 0%{opacity:calc(.15 + var(--tear-progress,0)*.7);transform:scale(.97)}28%{opacity:1;transform:scale(1)}55%{opacity:.88}100%{opacity:0;transform:scale(1.03)} } @keyframes elsbc-pack-mote { 0%{opacity:0;transform:translate(0,0) scale(.4)}24%{opacity:.9}100%{opacity:0;transform:translate(var(--mote-drift),var(--mote-y)) scale(.3)} } @keyframes elsbc-card-emerge { 0%{opacity:0;transform:translate(-50%,-8%) scale(.55)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)} } @keyframes elsbc-foil-sweep { 0%{opacity:0;transform:translateX(-100%) rotate(-15deg)}15%{opacity:.6}65%{opacity:.6}85%,100%{opacity:0;transform:translateX(100%) rotate(-15deg)} } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #els-brain-game .elsbc__gold-reveal[data-reveal-phase="sealed"] .elsbc__pack[data-pack-hover] .elsbc__pack-foil::after { animation:elsbc-foil-sweep 2.8s ease-in-out infinite; } } @media(max-width:600px) { #els-brain-game .elsbc__discovery-body { padding-top:8px;gap:9px; } #els-brain-game .elsbc__pack-stage { margin:0 0 5px; } } @media(prefers-reduced-motion:reduce) { #els-brain-game .elsbc__pack-wrapper,#els-brain-game .elsbc__pack-tear,#els-brain-game .elsbc__pack-light,#els-brain-game .elsbc__pack-motes i,#els-brain-game .elsbc__pack-foil::after,#els-brain-game [data-role="gold-card"] { animation:none!important; } #els-brain-game .elsbc__gold-reveal:not([data-reveal-phase="sealed"]) .elsbc__pack { visibility:hidden; } } /* Thin laminated edges, angle-dependent gloss and a soft contact shadow. */ #els-brain-game .elsbc__card-stage { perspective:1400px; } #els-brain-game .elsbc__card-stage::before { content:"";position:absolute;left:50%;bottom:2.5%;width:58%;height:3%;border-radius:50%;background:#0008;filter:blur(9px);transform:translateX(-50%) scaleX(var(--card-shadow-scale,1));pointer-events:none; } #els-brain-game .elsbc__card-object>.elsbc__card-front { transform:translateZ(1.2px); } #els-brain-game .elsbc__card-front>img { filter:brightness(var(--card-luminance,1)); } #els-brain-game .elsbc__card-front::before { content:"";position:absolute;inset:0;z-index:1;border:1px solid #f4faff70;border-radius:inherit;box-shadow:inset 1px 1px 2px #fff8,inset -1px -1px 2px #0009;pointer-events:none; } #els-brain-game .elsbc__card-front::after { z-index:2;background:radial-gradient(ellipse at var(--foil-x,50%) var(--foil-y,50%),#f1faff88,transparent 50%),linear-gradient(112deg,transparent 25%,#daeaff1c 40%,#fff8 48%,#eaf4ff24 53%,transparent 65%);background-size:170% 150%,190% 100%;background-position:var(--foil-x,50%) var(--foil-y,50%);mix-blend-mode:screen;opacity:var(--card-gloss,.16); } #els-brain-game .elsbc__card-back { transform:rotateY(180deg) translateZ(1.2px);box-shadow:0 10px 22px #0006,inset 0 0 0 1px #eff7ff55; } #els-brain-game .elsbc__card-edge { background:repeating-linear-gradient(90deg,#e0e6ed 0 .6px,#77828d .6px 1px,#c4cdd5 1px 1.5px); } #els-brain-game .elsbc__card-edge--left,#els-brain-game .elsbc__card-edge--right { width:2.4px; } #els-brain-game .elsbc__card-edge--left { left:-1.2px; } #els-brain-game .elsbc__card-edge--right { right:-1.2px; } #els-brain-game .elsbc__card-edge--top,#els-brain-game .elsbc__card-edge--bottom { height:2.4px; } #els-brain-game .elsbc__card-edge--top { top:-1.2px; } #els-brain-game .elsbc__card-edge--bottom { bottom:-1.2px; } /* Version 3.14: pack-relative printing and a deforming foil tear. */ #els-brain-game#els-brain-game .elsbc__pack { top:14%;height:78%; } #els-brain-game .elsbc__pack-shell::before { content:none; } #els-brain-game .elsbc__pack-foil { display:block;padding:0; } #els-brain-game#els-brain-game svg.elsbc__pack-print,#els-brain-game#els-brain-game svg.elsbc__pack-ribbon { position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;pointer-events:none; } #els-brain-game#els-brain-game svg.elsbc__pack-print { overflow:hidden; } #els-brain-game#els-brain-game svg.elsbc__pack-ribbon { z-index:3;overflow:visible; } #els-brain-game#els-brain-game .elsbc__pack-print text { fill:#edf5ff!important;font-family:Arial,Helvetica,sans-serif!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important; } #els-brain-game#els-brain-game .elsbc__pack-print .elsbc__pack-print-small { font-size:11px!important;font-weight:700!important;fill:#afc7df!important; } #els-brain-game#els-brain-game .elsbc__pack-print .elsbc__pack-print-brand { font-size:24px!important;font-weight:900!important; } #els-brain-game#els-brain-game .elsbc__pack-print .elsbc__pack-print-caption { font-size:9px!important;font-weight:500!important;fill:#c2d4e5!important; } #els-brain-game#els-brain-game .elsbc__pack-ribbon text { font:850 10px Arial,Helvetica,sans-serif!important;letter-spacing:0!important;fill:#eef6ff!important; } #els-brain-game .elsbc__pack-aura { top:20.5%; } #els-brain-game .elsbc__pack-mouth { top:20%; } #els-brain-game .elsbc__pack-flare { top:20.5%; } #els-brain-game .elsbc__pack-bokeh { top:20%; } #els-brain-game .elsbc__pack-motes { inset:6% 18% 64%; } /* Version 3.15: crisp vector printing without filtering the letterforms. */ #els-brain-game .elsbc__pack-wrapper { filter:none; } #els-brain-game .elsbc__pack-wrapper::before { content:"";position:absolute;inset:3% 1%;border-radius:4%;background:#02071199;box-shadow:9px 16px 20px #0007;transform:translateY(4px);pointer-events:none; } #els-brain-game#els-brain-game svg.elsbc__pack-print,#els-brain-game#els-brain-game svg.elsbc__pack-ribbon { shape-rendering:geometricPrecision;text-rendering:geometricPrecision; }