/* Neon Cyber UI Kit v0.3.0 — bundle (generated by tools/build_kit.py, do not edit) */ /* Neon Cyber — core Seventh skin for the same kit: dark glass, glowing neon edges. Same class names, same sc.js, same blocks and tests. See ../STYLE.md. Load this INSTEAD of super-casual/kit/core.css. Ported from clean-flat/kit/core.css (it carries every owner rule); coloured controls are dark GLASS tinted by their neon, so white text + white icon always reads (one colour per button). */ @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700;800&family=Audiowide&display=swap'); :root { --sc-font: 'Oxanium', 'Segoe UI', sans-serif; --sc-title-font: 'Audiowide', 'Oxanium', sans-serif; --sc-outline: #2A3160; /* the outline of every NEUTRAL surface: near-black, cool. Coloured elements derive their own ("the dark of" their fill) in their component file. The icon artwork's warm brown is NOT a CSS colour */ --sc-line: 2px; --sc-line-sm: 1.5px; --sc-text-stroke: 0; /* flat text: no outline … */ --sc-text-drop: 0; /* … and no 3D bottom edge */ --sc-min-text: 10px; --sc-safe-top: env(safe-area-inset-top, 0px); --sc-safe-right: env(safe-area-inset-right, 0px); --sc-safe-bottom: env(safe-area-inset-bottom, 0px); --sc-safe-left: env(safe-area-inset-left, 0px); /* ---------- THEME TOKENS ---------- Everything a theme may change lives here. Components never hardcode a colour: they use these, or a color-mix() step of these. A theme is a :root block that overrides some of them — see THEMES.md. */ /* surfaces, darkest → lightest (a light theme runs them lightest → darkest) */ --sc-ground: #070818; /* page / game background */ --sc-well: #0B0E24; /* inset areas: bar tracks, slot insides, input wells */ --sc-panel: #111536; /* panels, popups, bars */ --sc-raise: #181D47; /* raised neutral tiles: flat icon buttons, cards */ --sc-edge: #333B78; /* neutral borders and dividers */ /* text */ --sc-ink: #EAF6FF; /* main text */ --sc-dim: #8B97D1; /* secondary text */ --sc-sheen: #FFFFFF; /* the highlight colour laid over surfaces at low opacity (a light theme uses a dark one) */ --sc-shade: #03040C; /* what a surface is mixed with for its darker steps (a light theme uses a soft grey-blue, or it turns muddy) */ --sc-surface-shade: #05061A; /* what a LIGHT surface darkens toward (a soft grey-blue); coloured lips still use --sc-shade */ --sc-glyph-filter: none; /* recolours the white glyph icons: a light theme sets brightness(0) */ --sc-glyph-on-button: none; /* the same, for glyphs sitting on a button's accent fill (they follow the button label) */ /* accents: ONE value per colour name; fills, glows and tinted text are derived from it below */ --sc-accent: var(--sc-c-cyan); /* what a component uses when it has no data-color */ --sc-c-sky: #1FB6FF; --sc-c-blue: #4F86FF; --sc-c-cyan: #00E5FF; --sc-c-mint: #2BFFC6; --sc-c-green: #39FF88; --sc-c-olive: #B8FF3D; --sc-c-yellow: #FFE14D; --sc-c-orange: #FF8A1F; --sc-c-red: #FF3D6E; --sc-c-pink: #FF4FD8; --sc-c-purple: #A77BFF; --sc-c-white: #E8F4FF; --sc-c-dark: #6B75B0; /* the button: its fill is the accent mixed into this tint, its label the accent mixed into this light */ --sc-button-tint: #0B0E24; /* warm and dark here; a theme usually sets it to its own --sc-ground */ --sc-button-label: #FFFFFF; --sc-button-fill: .5; /* how much accent is in the fill: 1 = this style's tinted glass, 1.7 = solid accent */ --sc-button-label-mix: 0; /* how much of the accent is mixed into the label (0 = the plain label colour) */ --sc-button-dark-label: ''; /* none: every button is white text + white icon on dark neon glass */ --sc-label-outline: none; /* flat: labels are not outlined — every white label must clear its fill on its own */ /* what makes white text readable on a gold fill: every label on a fill carries this outline */ /* colour names whose button label is the dark outline colour instead (light fills) */ --sc-scrim: #03040E; /* the veil laid over the game behind popups and result screens (text sits on it, so a light theme makes it light) */ /* shape and type */ --sc-round: 1.25; /* roundness, one knob: 0 = square, 1 = this style, 2.5 = soft, 6 = pills */ --sc-r: calc(8px * var(--sc-round)); /* the radius components use (derived — themes set --sc-round) */ --sc-cut: 0; /* button cut corner, share of its height: 0 = no cut */ --sc-spine: 0; /* button's thick left edge, share of its height: 0 = same as the other edges */ --sc-glow: 1.6; /* strength of the light around accents: 0 = none, 1 = this style, 2 = neon */ --sc-caps: none; /* small labels: uppercase | none */ --sc-tracking: .8; /* letter-spacing multiplier */ --sc-weight: 800; /* text weight — must be a weight the font was loaded with */ --sc-nav-icons: "home:home-color shop:shop-color settings:settings-color map:map-color mail:mail-color calendar:calendar-color profile:profile-color user:profile-color avatar:profile-color friends:friends-color quest:quest-color lock:lock-color check:check-color alert:bell-color notification:bell-color medal:medal-color star:star-color book:book-color alarm:alarm-color box:box-color compass:compass-color"; /* tab bars + tabs show these COLOURED icons in place of the white glyphs (sc.js) */ --sc-tip-x: .4; /* where the fingertip is inside THIS style's hand icon — sc.js */ --sc-tip-y: .07; /* reads these to aim the Tutorial Hand (measured off hand.png) */ } [class^="sc-"][hidden], [class*=" sc-"][hidden], [role="tabpanel"][hidden] { display:none !important; } /* ---------- Colour palette ---------- Same four variables as Super Casual, different jobs: --base dark tint of the accent (the fill) --band slightly lighter top of that fill --line the accent at full brightness (border AND text) --lip the accent as a glow --ink the text colour inside the component */ [data-color="sky"] { --line:var(--sc-c-sky); } [data-color="blue"] { --line:var(--sc-c-blue); } [data-color="cyan"] { --line:var(--sc-c-cyan); } [data-color="white"] { --line:var(--sc-c-white); } [data-color="dark"] { --line:var(--sc-c-dark); } [data-color="green"] { --line:var(--sc-c-green); } [data-color="olive"] { --line:var(--sc-c-olive); } [data-color="yellow"] { --line:var(--sc-c-yellow); } [data-color="orange"] { --line:var(--sc-c-orange); } [data-color="red"] { --line:var(--sc-c-red); } [data-color="purple"] { --line:var(--sc-c-purple); } [data-color="pink"] { --line:var(--sc-c-pink); } [data-color="mint"] { --line:var(--sc-c-mint); } [data-color="gold"] { --line:var(--sc-c-yellow); } [data-color="lavender"] { --line:var(--sc-c-pink); } /* derived from --line, so a theme only ever names the accent */ [data-color] { --band:color-mix(in srgb, var(--line) 22%, var(--sc-ground)); --base:color-mix(in srgb, var(--line) 12%, var(--sc-ground)); --lip:color-mix(in srgb, var(--line) calc(35% * var(--sc-glow)), transparent); --ink:color-mix(in srgb, var(--line) 50%, var(--sc-ink)); } [data-color="white"], [data-color="dark"] { --lip:color-mix(in srgb, var(--line) calc(25% * var(--sc-glow)), transparent); } /* ---------- Flat text (replaces the outlined 3D text) ---------- */ .sc-text { --fs:25px; --ink:var(--sc-ink); --sc-fs:max(var(--fs), var(--sc-min-fs, 0px)); position:relative; display:inline-block; font-family:var(--sc-font); font-weight:var(--sc-weight); font-size:var(--sc-fs) !important; line-height:1; color:var(--ink); letter-spacing:calc(.04em * var(--sc-tracking)); white-space:nowrap; -webkit-text-stroke:0; } .sc-text::before { content:none; } /* no 3D copy in this style */ /* ---------- Lit surface (shared by Button, Icon Button, Counter "+") ---------- Flat dark fill, one thin accent line, a soft glow. No lip, no shine dot. */ :where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus) { --line:var(--sc-accent); --sc-outline:var(--line); --band:color-mix(in srgb, var(--line) 22%, var(--sc-ground)); --base:color-mix(in srgb, var(--line) 12%, var(--sc-ground)); --lip:color-mix(in srgb, var(--line) calc(35% * var(--sc-glow)), transparent); --ink:color-mix(in srgb, var(--line) 50%, var(--sc-ink)); --r:var(--sc-r); --lipH:0px; --bw:var(--sc-line); position:relative; box-sizing:border-box; isolation:isolate; cursor:pointer; border:var(--bw) solid var(--sc-outline); border-radius:var(--r); background:linear-gradient(var(--band), var(--base)); box-shadow:0 0 0 1px #0000, 0 0 12px -2px var(--lip), inset 0 1px 0 color-mix(in srgb, var(--sc-sheen) 8%, transparent); -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none; transition:box-shadow .12s, background .12s, transform .06s; } :where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus)::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sc-sheen) 6%, transparent), #0000 70%); /* faint top light, not a gloss band */ } :where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus)::before { content:none; } :where(.sc-button, .sc-icon-button):focus-visible { box-shadow:0 0 0 2px var(--line), 0 0 16px -2px var(--lip); } /* ---------- Neon: faint grid on solid screens ---------- */ .sc-screen[data-backdrop="solid"] { background-image:linear-gradient(color-mix(in srgb, var(--sc-accent) 7%, transparent) 1px, #0000 1px), linear-gradient(90deg, color-mix(in srgb, var(--sc-accent) 7%, transparent) 1px, #0000 1px); background-size:28px 28px; } /* glyphs:start — generated by tools/build_kit.py from the Icon Library, do not edit */ :where(img[src*="assets/"][src$="/magic.ring--glyph-ring.png"], img[src*="assets/"][src$="/stat.altitude.png"], img[src*="assets/"][src$="/stat.checkpoint.png"], img[src*="assets/"][src$="/stat.combo.png"], img[src*="assets/"][src$="/stat.depth.png"], img[src*="assets/"][src$="/stat.distance.png"], img[src*="assets/"][src$="/stat.lap.png"], img[src*="assets/"][src$="/stat.moves.png"], img[src*="assets/"][src$="/stat.score.png"], img[src*="assets/"][src$="/stat.speed.png"], img[src*="assets/"][src$="/stat.wave.png"], img[src*="assets/"][src$="/ui.arrow-down.png"], img[src*="assets/"][src$="/ui.arrow-left.png"], img[src*="assets/"][src$="/ui.arrow-right.png"], img[src*="assets/"][src$="/ui.arrow-up.png"], img[src*="assets/"][src$="/ui.back.png"], img[src*="assets/"][src$="/ui.ban.png"], img[src*="assets/"][src$="/ui.battery.png"], img[src*="assets/"][src$="/ui.calendar.png"], img[src*="assets/"][src$="/ui.camera.png"], img[src*="assets/"][src$="/ui.cart.png"], img[src*="assets/"][src$="/ui.chat.png"], img[src*="assets/"][src$="/ui.check.png"], img[src*="assets/"][src$="/ui.clock.png"], img[src*="assets/"][src$="/ui.close.png"], img[src*="assets/"][src$="/ui.cloud-save.png"], img[src*="assets/"][src$="/ui.compass.png"], img[src*="assets/"][src$="/ui.crosshair.png"], img[src*="assets/"][src$="/ui.dislike.png"], img[src*="assets/"][src$="/ui.edit.png"], img[src*="assets/"][src$="/ui.exit.png"], img[src*="assets/"][src$="/ui.eye.png"], img[src*="assets/"][src$="/ui.eye-off.png"], img[src*="assets/"][src$="/ui.fast-forward.png"], img[src*="assets/"][src$="/ui.flag.png"], img[src*="assets/"][src$="/ui.fullscreen.png"], img[src*="assets/"][src$="/ui.hand.png"], img[src*="assets/"][src$="/ui.home.png"], img[src*="assets/"][src$="/ui.hourglass.png"], img[src*="assets/"][src$="/ui.infinity.png"], img[src*="assets/"][src$="/ui.info.png"], img[src*="assets/"][src$="/ui.jump.png"], img[src*="assets/"][src$="/ui.language.png"], img[src*="assets/"][src$="/ui.levels.png"], img[src*="assets/"][src$="/ui.like.png"], img[src*="assets/"][src$="/ui.lock.png"], img[src*="assets/"][src$="/ui.mail.png"], img[src*="assets/"][src$="/ui.map.png"], img[src*="assets/"][src$="/ui.menu.png"], img[src*="assets/"][src$="/ui.minus.png"], img[src*="assets/"][src$="/ui.more.png"], img[src*="assets/"][src$="/ui.music.png"], img[src*="assets/"][src$="/ui.music-off.png"], img[src*="assets/"][src$="/ui.notification.png"], img[src*="assets/"][src$="/ui.pause.png"], img[src*="assets/"][src$="/ui.pin.png"], img[src*="assets/"][src$="/ui.play.png"], img[src*="assets/"][src$="/ui.plus.png"], img[src*="assets/"][src$="/ui.power.png"], img[src*="assets/"][src$="/ui.question.png"], img[src*="assets/"][src$="/ui.radar.png"], img[src*="assets/"][src$="/ui.redo.png"], img[src*="assets/"][src$="/ui.refresh.png"], img[src*="assets/"][src$="/ui.restart.png"], img[src*="assets/"][src$="/ui.sale.png"], img[src*="assets/"][src$="/ui.search.png"], img[src*="assets/"][src$="/ui.settings.png"], img[src*="assets/"][src$="/ui.share.png"], img[src*="assets/"][src$="/ui.shop.png"], img[src*="assets/"][src$="/ui.skull.png"], img[src*="assets/"][src$="/ui.sleep.png"], img[src*="assets/"][src$="/ui.sound.png"], img[src*="assets/"][src$="/ui.sound-off.png"], img[src*="assets/"][src$="/ui.target.png"], img[src*="assets/"][src$="/ui.trash.png"], img[src*="assets/"][src$="/ui.undo.png"], img[src*="assets/"][src$="/ui.unlock.png"], img[src*="assets/"][src$="/ui.vibrate.png"], img[src*="assets/"][src$="/ui.video.png"], img[src*="assets/"][src$="/ui.warning.png"], img[src*="assets/"][src$="/ui.wifi.png"], img[src*="assets/"][src$="/ui.wrench.png"], img[src*="assets/"][src$="/ui.zoom-in.png"], img[src*="assets/"][src$="/ui.zoom-out.png"]) { filter:var(--sc-glyph-filter); } .sc-button > :where(img[src*="assets/"][src$="/magic.ring--glyph-ring.png"], img[src*="assets/"][src$="/stat.altitude.png"], img[src*="assets/"][src$="/stat.checkpoint.png"], img[src*="assets/"][src$="/stat.combo.png"], img[src*="assets/"][src$="/stat.depth.png"], img[src*="assets/"][src$="/stat.distance.png"], img[src*="assets/"][src$="/stat.lap.png"], img[src*="assets/"][src$="/stat.moves.png"], img[src*="assets/"][src$="/stat.score.png"], img[src*="assets/"][src$="/stat.speed.png"], img[src*="assets/"][src$="/stat.wave.png"], img[src*="assets/"][src$="/ui.arrow-down.png"], img[src*="assets/"][src$="/ui.arrow-left.png"], img[src*="assets/"][src$="/ui.arrow-right.png"], img[src*="assets/"][src$="/ui.arrow-up.png"], img[src*="assets/"][src$="/ui.back.png"], img[src*="assets/"][src$="/ui.ban.png"], img[src*="assets/"][src$="/ui.battery.png"], img[src*="assets/"][src$="/ui.calendar.png"], img[src*="assets/"][src$="/ui.camera.png"], img[src*="assets/"][src$="/ui.cart.png"], img[src*="assets/"][src$="/ui.chat.png"], img[src*="assets/"][src$="/ui.check.png"], img[src*="assets/"][src$="/ui.clock.png"], img[src*="assets/"][src$="/ui.close.png"], img[src*="assets/"][src$="/ui.cloud-save.png"], img[src*="assets/"][src$="/ui.compass.png"], img[src*="assets/"][src$="/ui.crosshair.png"], img[src*="assets/"][src$="/ui.dislike.png"], img[src*="assets/"][src$="/ui.edit.png"], img[src*="assets/"][src$="/ui.exit.png"], img[src*="assets/"][src$="/ui.eye.png"], img[src*="assets/"][src$="/ui.eye-off.png"], img[src*="assets/"][src$="/ui.fast-forward.png"], img[src*="assets/"][src$="/ui.flag.png"], img[src*="assets/"][src$="/ui.fullscreen.png"], img[src*="assets/"][src$="/ui.hand.png"], img[src*="assets/"][src$="/ui.home.png"], img[src*="assets/"][src$="/ui.hourglass.png"], img[src*="assets/"][src$="/ui.infinity.png"], img[src*="assets/"][src$="/ui.info.png"], img[src*="assets/"][src$="/ui.jump.png"], img[src*="assets/"][src$="/ui.language.png"], img[src*="assets/"][src$="/ui.levels.png"], img[src*="assets/"][src$="/ui.like.png"], img[src*="assets/"][src$="/ui.lock.png"], img[src*="assets/"][src$="/ui.mail.png"], img[src*="assets/"][src$="/ui.map.png"], img[src*="assets/"][src$="/ui.menu.png"], img[src*="assets/"][src$="/ui.minus.png"], img[src*="assets/"][src$="/ui.more.png"], img[src*="assets/"][src$="/ui.music.png"], img[src*="assets/"][src$="/ui.music-off.png"], img[src*="assets/"][src$="/ui.notification.png"], img[src*="assets/"][src$="/ui.pause.png"], img[src*="assets/"][src$="/ui.pin.png"], img[src*="assets/"][src$="/ui.play.png"], img[src*="assets/"][src$="/ui.plus.png"], img[src*="assets/"][src$="/ui.power.png"], img[src*="assets/"][src$="/ui.question.png"], img[src*="assets/"][src$="/ui.radar.png"], img[src*="assets/"][src$="/ui.redo.png"], img[src*="assets/"][src$="/ui.refresh.png"], img[src*="assets/"][src$="/ui.restart.png"], img[src*="assets/"][src$="/ui.sale.png"], img[src*="assets/"][src$="/ui.search.png"], img[src*="assets/"][src$="/ui.settings.png"], img[src*="assets/"][src$="/ui.share.png"], img[src*="assets/"][src$="/ui.shop.png"], img[src*="assets/"][src$="/ui.skull.png"], img[src*="assets/"][src$="/ui.sleep.png"], img[src*="assets/"][src$="/ui.sound.png"], img[src*="assets/"][src$="/ui.sound-off.png"], img[src*="assets/"][src$="/ui.target.png"], img[src*="assets/"][src$="/ui.trash.png"], img[src*="assets/"][src$="/ui.undo.png"], img[src*="assets/"][src$="/ui.unlock.png"], img[src*="assets/"][src$="/ui.vibrate.png"], img[src*="assets/"][src$="/ui.video.png"], img[src*="assets/"][src$="/ui.warning.png"], img[src*="assets/"][src$="/ui.wifi.png"], img[src*="assets/"][src$="/ui.wrench.png"], img[src*="assets/"][src$="/ui.zoom-in.png"], img[src*="assets/"][src$="/ui.zoom-out.png"]), :is(.sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"]) > :where(img[src*="assets/"][src$="/magic.ring--glyph-ring.png"], img[src*="assets/"][src$="/stat.altitude.png"], img[src*="assets/"][src$="/stat.checkpoint.png"], img[src*="assets/"][src$="/stat.combo.png"], img[src*="assets/"][src$="/stat.depth.png"], img[src*="assets/"][src$="/stat.distance.png"], img[src*="assets/"][src$="/stat.lap.png"], img[src*="assets/"][src$="/stat.moves.png"], img[src*="assets/"][src$="/stat.score.png"], img[src*="assets/"][src$="/stat.speed.png"], img[src*="assets/"][src$="/stat.wave.png"], img[src*="assets/"][src$="/ui.arrow-down.png"], img[src*="assets/"][src$="/ui.arrow-left.png"], img[src*="assets/"][src$="/ui.arrow-right.png"], img[src*="assets/"][src$="/ui.arrow-up.png"], img[src*="assets/"][src$="/ui.back.png"], img[src*="assets/"][src$="/ui.ban.png"], img[src*="assets/"][src$="/ui.battery.png"], img[src*="assets/"][src$="/ui.calendar.png"], img[src*="assets/"][src$="/ui.camera.png"], img[src*="assets/"][src$="/ui.cart.png"], img[src*="assets/"][src$="/ui.chat.png"], img[src*="assets/"][src$="/ui.check.png"], img[src*="assets/"][src$="/ui.clock.png"], img[src*="assets/"][src$="/ui.close.png"], img[src*="assets/"][src$="/ui.cloud-save.png"], img[src*="assets/"][src$="/ui.compass.png"], img[src*="assets/"][src$="/ui.crosshair.png"], img[src*="assets/"][src$="/ui.dislike.png"], img[src*="assets/"][src$="/ui.edit.png"], img[src*="assets/"][src$="/ui.exit.png"], img[src*="assets/"][src$="/ui.eye.png"], img[src*="assets/"][src$="/ui.eye-off.png"], img[src*="assets/"][src$="/ui.fast-forward.png"], img[src*="assets/"][src$="/ui.flag.png"], img[src*="assets/"][src$="/ui.fullscreen.png"], img[src*="assets/"][src$="/ui.hand.png"], img[src*="assets/"][src$="/ui.home.png"], img[src*="assets/"][src$="/ui.hourglass.png"], img[src*="assets/"][src$="/ui.infinity.png"], img[src*="assets/"][src$="/ui.info.png"], img[src*="assets/"][src$="/ui.jump.png"], img[src*="assets/"][src$="/ui.language.png"], img[src*="assets/"][src$="/ui.levels.png"], img[src*="assets/"][src$="/ui.like.png"], img[src*="assets/"][src$="/ui.lock.png"], img[src*="assets/"][src$="/ui.mail.png"], img[src*="assets/"][src$="/ui.map.png"], img[src*="assets/"][src$="/ui.menu.png"], img[src*="assets/"][src$="/ui.minus.png"], img[src*="assets/"][src$="/ui.more.png"], img[src*="assets/"][src$="/ui.music.png"], img[src*="assets/"][src$="/ui.music-off.png"], img[src*="assets/"][src$="/ui.notification.png"], img[src*="assets/"][src$="/ui.pause.png"], img[src*="assets/"][src$="/ui.pin.png"], img[src*="assets/"][src$="/ui.play.png"], img[src*="assets/"][src$="/ui.plus.png"], img[src*="assets/"][src$="/ui.power.png"], img[src*="assets/"][src$="/ui.question.png"], img[src*="assets/"][src$="/ui.radar.png"], img[src*="assets/"][src$="/ui.redo.png"], img[src*="assets/"][src$="/ui.refresh.png"], img[src*="assets/"][src$="/ui.restart.png"], img[src*="assets/"][src$="/ui.sale.png"], img[src*="assets/"][src$="/ui.search.png"], img[src*="assets/"][src$="/ui.settings.png"], img[src*="assets/"][src$="/ui.share.png"], img[src*="assets/"][src$="/ui.shop.png"], img[src*="assets/"][src$="/ui.skull.png"], img[src*="assets/"][src$="/ui.sleep.png"], img[src*="assets/"][src$="/ui.sound.png"], img[src*="assets/"][src$="/ui.sound-off.png"], img[src*="assets/"][src$="/ui.target.png"], img[src*="assets/"][src$="/ui.trash.png"], img[src*="assets/"][src$="/ui.undo.png"], img[src*="assets/"][src$="/ui.unlock.png"], img[src*="assets/"][src$="/ui.vibrate.png"], img[src*="assets/"][src$="/ui.video.png"], img[src*="assets/"][src$="/ui.warning.png"], img[src*="assets/"][src$="/ui.wifi.png"], img[src*="assets/"][src$="/ui.wrench.png"], img[src*="assets/"][src$="/ui.zoom-in.png"], img[src*="assets/"][src$="/ui.zoom-out.png"]) { filter:var(--sc-glyph-on-button); } /* glyphs:end */ /* ===== screen ===== */ /* Screen Shell — Neon Cyber Layout only: the 400x870 design box, the scale-to-fit maths and the safe areas are identical in every style. Only the backdrop colours differ. Requires: core.css, sc.js Full-page mobile layout that floats above the game canvas. Never scrolls. Content is designed at 400×870 and scaled to fit any phone; the shell itself stretches to the real screen shape, so bars stick to the real edges. data-width design width in px default: 400 data-height design height in px default: 870 data-backdrop none (game visible, taps pass through empty space) | dim (dark see-through, blocks the game) | solid (opaque dark background) default: none data-fit screen (fixed, whole viewport) | parent (fills the parent box, for previews) default: screen data-enter fade | pop | none animation when shown default: fade hidden not shown; show with SC.screen.show(id) Regions (all optional): .sc-screen-top bar at the top edge (row; data-align between | start | center | end, default between) .sc-screen-middle fills the rest, content centered (column) .sc-screen-bottom bar at the bottom edge (row; data-align, default center) data-stack on top/bottom → vertical column instead of a row Edge margins are 12 real pixels + the phone's safe area (notch, home bar), at any scale. Events: "show" · "hide" JS: SC.screen.show(el|id) · hide(el|id) · fit() */ .sc-screen { --sc-s:1; /* scale, set by sc.js */ --sc-min-fs:calc(var(--sc-min-text) / var(--sc-s)); /* keeps small text readable when the screen shrinks */ --gap:14px; position:fixed; left:0; top:0; z-index:900; box-sizing:border-box; width:var(--sc-w, 100vw); height:var(--sc-h, 100vh); transform:scale(var(--sc-s)); transform-origin:0 0; display:flex; flex-direction:column; overflow:hidden; padding: calc((12px + var(--sc-safe-top)) / var(--sc-s)) calc((12px + var(--sc-safe-right)) / var(--sc-s)) calc((12px + var(--sc-safe-bottom)) / var(--sc-s)) calc((12px + var(--sc-safe-left)) / var(--sc-s)); font-family:var(--sc-font); user-select:none; -webkit-user-select:none; pointer-events:none; /* empty space lets taps reach the game */ animation:sc-screen-fade .2s ease-out; } .sc-screen[data-fit="parent"] { position:absolute; } .sc-screen[hidden] { display:none; } /* Backdrops */ .sc-screen[data-backdrop="dim"] { background:color-mix(in srgb, var(--sc-scrim) 70%, transparent); pointer-events:auto; } .sc-screen[data-backdrop="solid"] { background:radial-gradient(ellipse 80% 35% at 50% 30%, color-mix(in srgb, var(--sc-c-yellow) 10%, transparent), transparent 70%), linear-gradient(color-mix(in srgb, var(--sc-well) 97%, var(--sc-sheen)), color-mix(in srgb, var(--sc-panel) 99%, var(--sc-sheen))); pointer-events:auto; } /* Regions */ .sc-screen-top, .sc-screen-bottom { flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); min-height:0; } .sc-screen-bottom { justify-content:center; margin-top:auto; } /* stays at the bottom even without a middle */ .sc-screen-top[data-align="start"], .sc-screen-bottom[data-align="start"] { justify-content:flex-start; } .sc-screen-top[data-align="center"], .sc-screen-bottom[data-align="center"] { justify-content:center; } .sc-screen-top[data-align="end"], .sc-screen-bottom[data-align="end"] { justify-content:flex-end; } .sc-screen-top[data-align="between"], .sc-screen-bottom[data-align="between"] { justify-content:space-between; } .sc-screen-top[data-stack], .sc-screen-bottom[data-stack] { flex-direction:column; } .sc-screen-middle { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--gap); } .sc-screen-top > *, .sc-screen-middle > *, .sc-screen-bottom > * { pointer-events:auto; } /* Enter / leave */ .sc-screen[data-enter="pop"] > * { animation:sc-screen-pop .28s cubic-bezier(.3,1.5,.6,1) backwards; } .sc-screen[data-enter="none"], .sc-screen[data-enter="none"] > * { animation:none; } .sc-screen.sc-closing { animation:sc-screen-fade .16s ease-in reverse forwards; } @keyframes sc-screen-fade { from { opacity:0; } } @keyframes sc-screen-pop { from { opacity:0; transform:scale(.85); } } /* ===== button ===== */ /* Button — Neon Cyber Requires: ../../core.css, ../sc.js ONE element. No pseudo-elements, no clip-path, no stacked boxes, no SVG — so there is nothing behind the button that could show through at a corner, which is what every layered attempt kept doing. data-texture="dots" adds the halftone the reference has: a fine grain over the fill only — it sits below the two corner gradients in the stack, so the frame colour stays clean, exactly as in the original. How the shape is made: · the frame is a real CSS border — thin on top/right/bottom, deliberately thicker on the LEFT, exactly as measured on the reference (3px vs 13px on a 145px-tall button) · border-radius rounds all four corners · the two 45° corners are two diagonal gradients in the frame colour, painted over the fill: a hard colour stop on a 225°/45° gradient is a triangle in that corner · the fill is a third gradient underneath them Because the outline is a plain rounded rectangle and the cut corners are FILLED rather than cut away, the silhouette has no notches at all. Nothing to mask, nothing to leak, and it themes from --line with color-mix, so every data-color works without generating anything. Numbers measured off the reference button (365 x 145): corner cut 30px (0.21 of the height) · radius 12px (0.083) · border 3px, left 13px (0.021 / 0.09) fill rgb(120,47,17) at the top to rgb(170,68,25) at the bottom — 30%/58% of the frame colour over a dark maroon, because mixing with black comes out too green */ .sc-button { --h:54px; --cut:calc(var(--h) * var(--sc-cut)); /* leg of the 45° corner, in the frame colour */ --r:calc(var(--h) * .083 * var(--sc-round)); --edge:max(1.5px, calc(var(--h) * .03)); --spine:max(var(--edge), calc(var(--h) * var(--sc-spine))); /* the thicker left edge */ --fs:calc(var(--h) * .38); --grain:#0000; /* data-texture="dots" switches this on */ --grain-cell:3px; /* measured: the reference's texture correlates over ~2-3px */ /* a solid toy-like fill: the accent itself, lighter at the top and a touch darker at the bottom (--sc-button-fill still scales it) */ --fill-top:color-mix(in srgb, color-mix(in srgb, var(--line) 90%, var(--sc-sheen)) calc(58% * var(--sc-button-fill)), var(--sc-button-tint)); --fill-bot:color-mix(in srgb, var(--line) calc(58% * var(--sc-button-fill)), var(--sc-button-tint)); --lipc:color-mix(in srgb, var(--line) 76%, var(--sc-shade)); /* the underside: the same colour, darker */ --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); /* the outline: the same colour, darkest — never one brown for every button */ --lipH:calc(var(--h) * .11); --label:var(--sc-button-label); /* always the light label — it carries a dark outline, like the icons do */ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--fs) * .4); height:var(--h); min-width:calc(var(--h) * 2.5); padding:0 calc(var(--h) * .34); border:var(--edge) solid var(--sc-outline); border-left-width:var(--spine); border-radius:var(--r); background: linear-gradient(225deg, var(--line) calc(var(--cut) * .7071), #0000 0), /* top-right corner */ linear-gradient( 45deg, var(--line) calc(var(--cut) * .7071), #0000 0), /* bottom-left corner */ radial-gradient(var(--grain) .55px, #0000 .9px) 0 0 / var(--grain-cell) var(--grain-cell), linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), /* soft top light */ linear-gradient(var(--fill-top), var(--fill-bot)); background-clip:padding-box; appearance:none; cursor:pointer; vertical-align:middle; font-family:var(--sc-font); font-size:var(--fs); font-weight:var(--sc-weight); line-height:1; white-space:nowrap; box-shadow:inset 0 calc(var(--lipH) * -1) 0 var(--lipc); /* the 3D underside, inside the outline */ padding-bottom:calc(var(--lipH) * .6); /* the label sits on the face, not on the lip */ filter:drop-shadow(0 0 calc(var(--h) * .09) color-mix(in srgb, var(--line) calc(24% * var(--sc-glow)), #0000)); -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none; transition:translate .06s, filter .12s; } .sc-button > .sc-text { --fs:inherit; --ink:var(--label); font-size:var(--fs); -webkit-text-stroke:0; text-shadow:0 1px 0 color-mix(in srgb, var(--sc-outline) 55%, transparent); } /* white letters with the icon outline */ .sc-button > img { height:calc(var(--fs) * 1.25); width:auto; flex:none; pointer-events:none; } /* no filter here: the glyph rule in core.css colours glyphs to match the label */ /* The halftone. It is one more layer in the same background stack — still a single element. */ /* dark = the quiet, secondary button: a neutral slate fill (the warm base tint would turn it maroon) and a pale label */ .sc-button[data-color="dark"] { --line:var(--sc-well); --fill-top:var(--sc-panel); --fill-bot:var(--sc-raise); --label:var(--sc-ink); --lipc:var(--sc-edge); --sc-outline:var(--sc-edge); --sc-glyph-on-button:var(--sc-glyph-filter); } /* the quiet secondary: white with a grey edge — dark label AND dark glyph (one colour per button) */ .sc-button[data-texture="dots"] { --grain:color-mix(in srgb, var(--sc-sheen) 9%, transparent); } /* ~±8 per channel, matching the reference */ .sc-button[data-size="sm"] { --h:40px; } .sc-button[data-size="lg"] { --h:68px; } .sc-button[data-width="full"] { display:flex; width:100%; min-width:0; } .sc-button:active, .sc-button.sc-pressed { translate:0 calc(var(--lipH) * .6); box-shadow:inset 0 calc(var(--lipH) * -.35) 0 var(--lipc); padding-bottom:calc(var(--lipH) * .2); filter:brightness(1.06); } .sc-button:focus-visible { outline:2px solid var(--line); outline-offset:3px; } .sc-button:disabled, .sc-button[aria-disabled="true"] { --line:var(--sc-edge); --fill-top:color-mix(in srgb, var(--sc-raise) 88%, var(--sc-sheen)); --fill-bot:var(--sc-raise); --label:var(--sc-dim); /* a quiet stone-grey plate, lilac label — still outlined, still readable */ cursor:not-allowed; translate:none; filter:none; --lipc:color-mix(in srgb, var(--sc-raise) 65%, var(--sc-surface-shade)); opacity:.9; } .sc-button:disabled > img { filter:grayscale(1) opacity(.45); } /* ---- Neon Cyber: dark glass tinted by the neon, a neon edge, a glow; white text AND white icon (one colour per button) ---- */ .sc-button { --fill-top:color-mix(in srgb, var(--line) 34%, var(--sc-well)); --fill-bot:color-mix(in srgb, var(--line) 20%, var(--sc-well)); --label:#FFFFFF; --sc-outline:var(--line); --lipc:color-mix(in srgb, var(--line) 45%, var(--sc-well)); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--line) 55%, transparent)); } .sc-button > .sc-text { text-shadow:0 0 8px color-mix(in srgb, var(--line) 80%, transparent); } .sc-button[data-color="dark"] { --line:var(--sc-c-dark); --fill-top:var(--sc-raise); --fill-bot:var(--sc-panel); --label:var(--sc-ink); --sc-glyph-on-button:none; } /* ===== icon-button ===== */ /* Icon Button — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js (and the style's assets/offsets.css for optical centering) */ .sc-icon-button { --size:52px; position:relative; box-sizing:border-box; width:var(--size); height:var(--size); padding:0; flex:none; display:inline-grid; place-items:center; vertical-align:middle; cursor:pointer; font-family:var(--sc-font); -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none; transition:box-shadow .12s, background .12s, transform .06s; } .sc-icon-button[data-size="sm"] { --size:42px; --r:6px; } .sc-icon-button[data-size="lg"] { --size:66px; --r:10px; } .sc-icon-button[data-shape="round"] { --r:50%; } .sc-icon-button > img { width:52%; height:52%; object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%); } .sc-icon-button > img[data-flip] { transform:scaleX(-1); translate:calc(var(--ox, 0%) * -1) var(--oy, 0%); } .sc-icon-button:active, .sc-icon-button.sc-pressed { background:linear-gradient(var(--base), var(--band)); box-shadow:0 0 18px -2px var(--lip), inset 0 0 12px -4px var(--line); transform:translateY(1px); } .sc-icon-button:disabled { cursor:not-allowed; transform:none; filter:grayscale(1) brightness(.7); } /* Round: every variant can be a circle; the icon shrinks a touch so it clears the curve */ .sc-icon-button[data-shape="round"] > img { width:48%; height:48%; } /* Flat: the neutral one — dark, bordered, no accent colour (PORTED meaning: it is NOT borderless) */ .sc-icon-button[data-variant="flat"] { border:1.5px solid color-mix(in srgb, var(--sc-edge) 99%, var(--sc-sheen)); border-radius:calc(var(--size) * .16 * var(--sc-round)); background:linear-gradient(var(--sc-raise), color-mix(in srgb, var(--sc-raise) 69%, var(--sc-surface-shade))); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--sc-sheen) 7%, transparent); } .sc-icon-button[data-variant="flat"] > img { width:66%; height:66%; } /* flat buttons carry items (boosters, shortcuts): let the item fill the tile */ .sc-icon-button[data-variant="flat"][data-shape="round"] { border-radius:50%; } .sc-icon-button[data-variant="flat"]:active, .sc-icon-button[data-variant="flat"].sc-pressed { background:linear-gradient(color-mix(in srgb, var(--sc-raise) 69%, var(--sc-surface-shade)), var(--sc-raise)); box-shadow:none; } /* Ring: a pale edge on a dim fill — reads on any background, no accent */ .sc-icon-button[data-variant="ring"] { border:1.5px solid color-mix(in srgb, var(--sc-ink) 97%, var(--sc-shade)); border-radius:calc(var(--size) * .16 * var(--sc-round)); background:color-mix(in srgb, color-mix(in srgb, var(--sc-panel) 80%, var(--sc-surface-shade)) 72%, transparent); box-shadow:0 0 10px -3px color-mix(in srgb, color-mix(in srgb, var(--sc-ink) 97%, var(--sc-shade)) 40%, transparent); } .sc-icon-button[data-variant="ring"][data-shape="round"] { border-radius:50%; } .sc-icon-button[data-variant="ring"][data-shape="round"] > img { margin-bottom:0; } /* With a label: icon on top, text underneath — works on every variant (PORTED grid layout) */ /* this style's font is wide: the tile grows with its label instead of letting the word touch the frame */ .sc-icon-button:has(> .sc-text) { width:auto; min-width:var(--size); padding-inline:calc(var(--size) * .13); height:calc(var(--size) * 1.14); grid-template-rows:1fr auto; padding-top:calc(var(--size) * .08); padding-bottom:calc(var(--size) * .1); } .sc-icon-button:has(> .sc-text) > img { width:calc(var(--size) * .58); height:100%; align-self:end; justify-self:center; } .sc-icon-button > .sc-text { --fs:calc(var(--size) * .2); --ink:var(--sc-ink); font-size:var(--fs); letter-spacing:calc(.06em * var(--sc-tracking)); text-transform:var(--sc-caps); } /* ---- Clean Flat: the default icon button is SOLID colour with a soft lip, like the text button — a white glyph on a pale tint was unreadable. Flat / ring variants stay light and their glyphs go dark (text follows the icon). ---- */ .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"] { background:var(--line); border-color:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)); } .sc-icon-button:not([data-variant])::after, .sc-icon-button[data-variant="glossy"]::after { content:none; } /* its white glyph stays white on the solid fill: the glyph rule in core.css (tools/glyph_list.py) covers solid icon buttons too */ .sc-icon-button[data-color="dark"] { --line:var(--sc-panel); border-color:var(--sc-edge); --sc-glyph-on-button:var(--sc-glyph-filter); } .sc-icon-button[data-color="dark"] { box-shadow:inset 0 -3px 0 var(--sc-edge); } /* ---- Neon Cyber: glass icon buttons ---- */ .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"] { background:color-mix(in srgb, var(--line) 26%, var(--sc-well)); border-color:var(--line); box-shadow:0 0 14px -2px color-mix(in srgb, var(--line) 70%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--line) 30%, var(--sc-well)); } .sc-icon-button[data-color="dark"] { --line:var(--sc-c-dark); } /* ===== counter ===== */ /* Resource Counter — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js (same markup and attributes) A translucent dark pill with a hairline edge, the icon sitting on its left end, a white number, and a small accent "+" square. No gloss, no 3D lip. */ .sc-counter { --icon:38px; --pill:30px; --fs:17px; --plus:26px; --minv:56px; position:relative; display:inline-flex; align-items:center; vertical-align:middle; height:var(--icon); padding-left:calc(var(--icon) * .42); box-sizing:border-box; font-family:var(--sc-font); user-select:none; -webkit-user-select:none; } .sc-counter[data-size="sm"] { --icon:30px; --pill:24px; --fs:14px; --plus:22px; --minv:44px; } .sc-counter[data-size="lg"] { --icon:48px; --pill:38px; --fs:22px; --plus:32px; --minv:70px; } .sc-counter > img { position:absolute; left:0; top:50%; z-index:1; width:var(--icon); height:var(--icon); object-fit:contain; transform:translateY(-50%); translate:var(--ox, 0%) var(--oy, 0%); pointer-events:none; } .sc-counter-pill { display:flex; align-items:center; height:var(--pill); padding-left:calc(var(--icon) * .64); padding-right:calc(var(--pill) * .3); border:2px solid var(--sc-outline); border-radius:999px; background:color-mix(in srgb, var(--sc-well) 92%, transparent); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)); } .sc-counter:has(.sc-counter-plus) .sc-counter-pill { padding-right:3px; } .sc-counter-value { min-width:var(--minv); padding:0 calc(var(--fs) * .4); text-align:center; } .sc-counter-value .sc-text { --fs:inherit; --ink:var(--sc-ink); font-size:var(--fs); font-variant-numeric:tabular-nums; } /* "+" : a small accent square, flat */ .sc-counter-plus { --r:999px; --lipH:0px; --bw:2px; width:var(--plus); height:var(--plus); flex:none; padding:0; display:grid; place-items:center; } .sc-counter-plus svg { width:56%; height:56%; overflow:visible; } .sc-counter-plus path { fill:none; stroke-linecap:round; } .sc-counter-plus .o { stroke:none; stroke-width:0; } /* no dark outline stroke in this style */ .sc-counter-plus .f { stroke:var(--line); stroke-width:5; } .sc-counter-plus:active, .sc-counter-plus.sc-pressed { transform:scale(.92); box-shadow:0 0 14px -2px var(--lip); } .sc-counter.sc-bump > img { animation:sc-count-bump .3s ease-out; } .sc-counter.sc-bump .sc-counter-value .sc-text { animation:sc-counter-bump .28s ease-out; } @keyframes sc-counter-bump { 40% { transform:scale(1.22); } } @keyframes sc-count-bump { 40% { transform:translateY(-50%) scale(1.18); } } /* ---- Clean Flat: the icon sits INSIDE the pill, and the "+" is a solid circle concentric with the pill's round end ---- */ .sc-counter { height:var(--pill); padding-left:0; --plus:calc(var(--pill) - 10px); } .sc-counter > img { left:calc(var(--pill) * .16); width:calc(var(--pill) * .72); height:calc(var(--pill) * .72); z-index:2; } .sc-counter .sc-counter-pill { box-sizing:border-box; height:var(--pill); padding-left:calc(var(--pill) * .98); box-shadow:none; /* flat: no lip, so the visual centre is the real centre */ } .sc-counter:has(.sc-counter-plus) .sc-counter-pill { padding-right:3px; } /* 3px = the gap above and below the circle */ .sc-counter .sc-counter-plus { background:var(--line); border:0; box-shadow:none; } .sc-counter .sc-counter-plus::after { content:none; } .sc-counter .sc-counter-plus svg { width:52%; height:52%; } .sc-counter .sc-counter-plus .f { stroke:#FFFFFF; stroke-width:4; } .sc-counter.sc-bump > img { animation:sc-count-bump-in .3s ease-out; } @keyframes sc-count-bump-in { 40% { transform:translateY(-50%) scale(1.18); } } /* ===== slot ===== */ /* Reward Slot — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js (same markup and attributes) A dark cell with a hairline edge. Rarity is the border colour and the glow, not the fill. */ .sc-slot { --size:84px; --slot:var(--sc-edge); --slot-glow:#0000; position:relative; display:inline-block; vertical-align:middle; flex:none; box-sizing:border-box; width:var(--size); height:var(--size); border:var(--sc-line-sm) solid var(--slot); border-radius:var(--sc-r); background:linear-gradient(color-mix(in srgb, var(--sc-raise) 84%, var(--sc-surface-shade)), color-mix(in srgb, var(--sc-panel) 80%, var(--sc-surface-shade))); box-shadow:0 0 14px -4px var(--slot-glow), inset 0 1px 0 color-mix(in srgb, var(--sc-sheen) 7%, transparent); font-family:var(--sc-font); user-select:none; -webkit-user-select:none; } .sc-slot[data-size="sm"] { --size:60px; border-radius:calc(var(--sc-r) * 0.75); } .sc-slot[data-size="lg"] { --size:104px; border-radius:calc(var(--sc-r) * 1.25); } /* Rarity = edge colour + glow */ .sc-slot[data-color="white"] { --slot:color-mix(in srgb, var(--sc-dim) 79%, var(--sc-sheen)); --slot-glow:color-mix(in srgb, color-mix(in srgb, var(--sc-dim) 79%, var(--sc-sheen)) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="dark"] { --slot:var(--sc-edge); --slot-glow:#0000; } .sc-slot[data-color="green"] { --slot:color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)); --slot-glow:color-mix(in srgb, color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="sky"] { --slot:color-mix(in srgb, var(--sc-c-sky) 87%, var(--sc-ink)); --slot-glow:color-mix(in srgb, color-mix(in srgb, var(--sc-c-sky) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="purple"] { --slot:var(--sc-c-purple); --slot-glow:color-mix(in srgb, var(--sc-c-purple) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="yellow"] { --slot:var(--sc-c-yellow); --slot-glow:color-mix(in srgb, var(--sc-c-yellow) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="red"] { --slot:var(--sc-c-red); --slot-glow:color-mix(in srgb, var(--sc-c-red) calc(35% * var(--sc-glow)), transparent); } .sc-slot[data-color="lavender"] { --slot:var(--sc-c-pink); --slot-glow:color-mix(in srgb, var(--sc-c-pink) calc(35% * var(--sc-glow)), transparent); } .sc-slot > img[data-sc-icon] { position:absolute; left:16%; top:12%; width:68%; height:68%; object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%); } .sc-slot-count { position:absolute; right:7%; bottom:5%; z-index:1; line-height:1; } .sc-slot-count .sc-text { --fs:calc(var(--size) * .2); --ink:var(--sc-ink); font-size:var(--fs); font-variant-numeric:tabular-nums; } /* Tag: a small flat chip on the top edge */ .sc-slot-tag { --t:calc(var(--size) * .13); position:absolute; left:50%; top:calc(var(--size) * -.08); z-index:2; transform:translateX(-50%); padding:calc(var(--t) * .28) calc(var(--t) * .55); white-space:nowrap; line-height:1; background:color-mix(in srgb, var(--sc-panel) 80%, var(--sc-surface-shade)); border:1px solid var(--slot); border-radius:calc(var(--sc-r) * 0.5); } .sc-slot-tag .sc-text { --fs:var(--t); --ink:var(--slot); font-size:var(--fs); display:block; letter-spacing:calc(.1em * var(--sc-tracking)); } /* States: the overlay image needs its own size, or it renders at the icon's natural pixels */ .sc-slot-state { position:absolute; z-index:3; pointer-events:none; object-fit:contain; } .sc-slot[data-state]::after { content:""; position:absolute; inset:0; border-radius:inherit; background:color-mix(in srgb, color-mix(in srgb, var(--sc-ground) 74%, var(--sc-surface-shade)) 70%, transparent); z-index:1; } .sc-slot[data-state="locked"]::after { background:color-mix(in srgb, var(--sc-well) 88%, transparent); } /* locked: a closed, calm tile — the item is only a faint silhouette under it */ /* claimed: the tick sits in the middle. This style puts the count bottom-right, so a corner tick would cover it. */ .sc-slot[data-state="claimed"] .sc-slot-state { left:50%; top:44%; width:46%; height:46%; transform:translate(-50%,-50%); filter:none; } .sc-slot[data-state="locked"] .sc-slot-state { left:50%; top:50%; width:44%; height:44%; transform:translate(-50%,-50%); opacity:1; filter:none; } /* the lock gets the icon outline, like every white glyph on this style's surfaces */ .sc-slot[data-state] .sc-slot-count { opacity:.5; } .sc-slot[data-state="locked"] { --slot:var(--sc-edge); --slot-glow:#0000; } .sc-slot[data-state="locked"] > img[data-sc-icon] { opacity:.14; filter:grayscale(1); } .sc-slot[data-state="locked"] .sc-slot-tag { opacity:.55; } .sc-pop-in { animation:sc-pop-in .3s cubic-bezier(.2,1.3,.5,1) both; animation-delay:var(--sc-delay, 0s); } @keyframes sc-pop-in { from { opacity:0; transform:scale(.7); } } .sc-slot.sc-bump .sc-slot-count .sc-text { animation:sc-slot-bump .3s ease-out; } @keyframes sc-slot-bump { 40% { transform:scale(1.3); } } /* ===== progress ===== */ /* Progress Bar — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js An outlined pill track with a bottom edge; the fill is the accent with the button's top band. Label on the bar. */ :where(.sc-progress) { --line:color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-progress { --h:16px; position:relative; display:flex; align-items:center; width:100%; min-width:80px; box-sizing:border-box; font-family:var(--sc-font); user-select:none; -webkit-user-select:none; } .sc-progress[data-size="sm"] { --h:10px; } .sc-progress[data-size="lg"] { --h:24px; } .sc-progress-bar { position:relative; flex:1; height:var(--h); } .sc-progress-track { position:absolute; inset:0; overflow:hidden; box-sizing:border-box; background:var(--sc-well); border:2px solid var(--sc-outline); border-radius:999px; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)); } .sc-progress-fill { position:absolute; left:0; top:0; bottom:0; width:var(--pct, 0%); border-radius:999px; /* the fill is the BRIGHT accent (--line), not the dark button tint (--base) */ background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), var(--line); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)), 0 0 10px -1px var(--lip); transition:width .45s cubic-bezier(.3,.9,.4,1); } .sc-progress[data-value="0"] .sc-progress-fill { visibility:hidden; } .sc-progress-label { position:absolute; inset:0; z-index:1; display:grid; place-items:center; line-height:1; } .sc-progress-label .sc-text { --fs:calc(var(--h) * .62); --ink:var(--sc-ink); font-size:var(--fs); font-variant-numeric:tabular-nums; text-shadow:0 0 3px var(--sc-panel), 0 0 2px var(--sc-panel); /* dark text with a white halo: it sits half on the fill, half on the track */ /* the label sits half on the bright fill, half on the dark track */ } .sc-progress[data-size="sm"] .sc-progress-label { display:none; } .sc-progress > img[data-sc-icon] { position:relative; z-index:2; flex:none; width:calc(var(--h) * 1.6); height:calc(var(--h) * 1.6); margin-right:calc(var(--h) * .4); object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%); } /* Star markers — PORTED: each marker holds TWO stacked images (empty + lit); without sizing them they render at the icon's natural 160px, which is what put giant stars over the bar */ .sc-progress-marker { position:absolute; top:50%; left:var(--at); z-index:2; width:calc(var(--h) * 1.5); height:calc(var(--h) * 1.5); min-width:20px; min-height:20px; transform:translate(-50%, -50%); pointer-events:none; } .sc-progress-marker img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .sc-progress-marker img:first-child { opacity:.7; } .sc-progress-marker img:last-child { opacity:0; } .sc-progress-marker.sc-lit img:last-child { opacity:1; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sc-c-yellow) 50%, transparent)); animation:sc-marker-pop .4s cubic-bezier(.2,1.5,.5,1); } @keyframes sc-marker-pop { from { transform:scale(.3); } 60% { transform:scale(1.3); } } .sc-progress:has(.sc-progress-marker) .sc-progress-label { display:none; } /* ---- Neon Cyber: glowing fill ---- */ .sc-progress-fill { box-shadow:0 0 12px color-mix(in srgb, var(--line) 70%, transparent); } /* ===== title ===== */ /* Screen Title — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js No gradient letters and no 3D stack: a wide-tracked uppercase word with a soft glow and a hairline under it. */ :where(.sc-title) { --g1:var(--sc-ink); --g2:color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)); --g3:color-mix(in srgb, color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-title { --fs:44px; --sc-outline:color-mix(in srgb, var(--g2) 80%, var(--sc-shade)); position:relative; display:inline-block; margin:0; padding:0 .06em .14em; font-family:var(--sc-title-font, var(--sc-font)); font-weight:700; font-size:var(--fs); line-height:1.05; letter-spacing:0; text-transform:none; white-space:nowrap; } .sc-title[data-size="sm"] { --fs:24px; } .sc-title[data-size="md"] { --fs:34px; } /* no 3D layers here: ::before and ::after are the ornament (below) */ .sc-title > span { position:relative; z-index:1; color:var(--g1); text-shadow:none; color:var(--g2); } /* the ornament: a thin line fading out at both ends, and a small diamond at its middle (the reference's title rule) */ .sc-title::after { /* a short rounded bar, centred */ content:""; position:absolute; left:50%; bottom:-2px; width:1.4em; height:.14em; translate:-50% 0; border-radius:99px; background:var(--g2); opacity:.35; } .sc-title::before { content:none; } .sc-title[data-color="gold"] { --g1:color-mix(in srgb, var(--sc-c-yellow) 50%, var(--sc-ink)); --g2:var(--sc-c-yellow); --g3:color-mix(in srgb, var(--sc-c-yellow) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-color="red"] { --g1:color-mix(in srgb, var(--sc-c-red) 49%, var(--sc-ink)); --g2:var(--sc-c-red); --g3:color-mix(in srgb, var(--sc-c-red) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-color="blue"] { --g1:color-mix(in srgb, var(--sc-c-blue) 56%, var(--sc-ink)); --g2:var(--sc-c-blue); --g3:color-mix(in srgb, var(--sc-c-blue) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-color="green"] { --g1:color-mix(in srgb, var(--sc-c-green) 44%, var(--sc-ink)); --g2:color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)); --g3:color-mix(in srgb, color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-color="purple"] { --g1:color-mix(in srgb, var(--sc-c-purple) 51%, var(--sc-ink)); --g2:var(--sc-c-purple); --g3:color-mix(in srgb, var(--sc-c-purple) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-color="white"] { --g1:var(--sc-sheen); --g2:color-mix(in srgb, var(--sc-dim) 79%, var(--sc-sheen)); --g3:color-mix(in srgb, color-mix(in srgb, var(--sc-dim) 79%, var(--sc-sheen)) calc(40% * var(--sc-glow)), transparent); } .sc-title[data-animate="drop"] { animation:sc-title-drop .5s cubic-bezier(.2,1.2,.4,1) both; } .sc-title[data-animate="pop"] { animation:sc-title-pop .4s cubic-bezier(.2,1.3,.4,1) both; } .sc-title[data-animate="shake"] { animation:sc-title-shake .6s ease-out both; } @keyframes sc-title-drop { from { transform:translateY(-18px); opacity:0; letter-spacing:calc(.24em * var(--sc-tracking)); } } @keyframes sc-title-pop { from { transform:scale(.88); opacity:0; } } @keyframes sc-title-shake { 0% { transform:scale(1.15); opacity:0; } 30% { transform:scale(1); opacity:1; } 45% { transform:translateX(-5px); } 60% { transform:translateX(4px); } 100% { transform:none; } } /* ===== stars ===== */ /* Star Rating — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (sizes, arc layout, pop-in with --d delays, data-animate). Only difference: a soft gold glow on an earned star instead of a glossy rim. */ .sc-stars { --s:40px; --gap:calc(var(--s) * .08); display:inline-flex; align-items:center; gap:var(--gap); vertical-align:middle; user-select:none; -webkit-user-select:none; } .sc-stars[data-size="sm"] { --s:22px; --gap:1px; } .sc-stars[data-size="lg"] { --s:88px; --gap:calc(var(--s) * .08); } .sc-star { position:relative; width:var(--s); height:var(--s); flex:none; } .sc-star img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; } .sc-star .sc-star-empty { opacity:.6; } .sc-star .sc-star-full { opacity:0; transform:scale(.4); } .sc-star.sc-on .sc-star-full { opacity:1; transform:none; filter:drop-shadow(0 0 calc(var(--s) * .16) color-mix(in srgb, var(--sc-c-yellow) 45%, transparent)); } .sc-star.sc-on .sc-star-empty { opacity:0; } /* Arc layout: middle raised, outer stars tilted outward */ .sc-stars[data-layout="arc"] { align-items:flex-end; padding-top:calc(var(--s) * .45); } .sc-stars[data-layout="arc"] .sc-star:nth-child(1) { transform:rotate(-14deg); } .sc-stars[data-layout="arc"] .sc-star:nth-child(2) { width:calc(var(--s) * 1.06); height:calc(var(--s) * 1.06); margin-bottom:calc(var(--s) * .45); } .sc-stars[data-layout="arc"] .sc-star:nth-child(3) { transform:rotate(14deg); } /* Pop-in */ .sc-star.sc-pop .sc-star-full { animation:sc-star-pop .45s cubic-bezier(.2,1.5,.5,1) both; animation-delay:var(--d, 0s); } .sc-star.sc-pop .sc-star-empty { animation:sc-star-empty .45s ease-out both; animation-delay:var(--d, 0s); } .sc-stars[data-animate] .sc-star:not(.sc-on) .sc-star-empty { animation:sc-star-fade .4s ease-out both; animation-delay:var(--d, 0s); } @keyframes sc-star-pop { 0% { opacity:0; transform:scale(0) rotate(-30deg); } 70% { opacity:1; transform:scale(1.2) rotate(6deg); } 100% { opacity:1; transform:none; } } @keyframes sc-star-empty { 0% { opacity:.6; } 60% { opacity:.6; } 100% { opacity:0; } } @keyframes sc-star-fade { from { opacity:0; transform:scale(.6); } } /* ===== timer ===== */ /* Countdown Timer — Neon Cyber Requires: ../../core.css, ../sc.js Two looks, and the DEFAULT is the ring — data-variant="pill" is the opt-in, matching sc.js. The ring is a conic gradient masked into a band; digits stay near-white until the timer runs low, when the whole thing turns red. State through colour, meaning through contrast. */ :where(.sc-timer) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-timer { --s:48px; position:relative; display:inline-grid; place-items:center; box-sizing:border-box; width:var(--s); height:var(--s); font-family:var(--sc-font); vertical-align:middle; } .sc-timer[data-size="sm"] { --s:36px; } .sc-timer[data-size="lg"] { --s:72px; } /* the ring is an SVG circle driven by stroke-dashoffset from sc.js — style the strokes, not a box */ .sc-timer svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; } .sc-timer .sc-timer-bg { fill:var(--sc-well); stroke:color-mix(in srgb, var(--sc-sheen) 11%, transparent); stroke-width:1.5; } .sc-timer .sc-timer-track { fill:none; stroke:color-mix(in srgb, var(--sc-panel) 94%, var(--sc-sheen)); stroke-width:4; } .sc-timer .sc-timer-ring { fill:none; stroke:var(--line); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 4px var(--lip)); } .sc-timer > .sc-text { position:relative; --fs:calc(var(--s) * .3); --ink:var(--sc-ink); font-size:var(--fs); font-variant-numeric:tabular-nums; letter-spacing:calc(.02em * var(--sc-tracking)); } /* pill */ .sc-timer[data-variant="pill"] { --s:28px; --cut:calc(var(--s) * .3); display:inline-flex; align-items:center; justify-content:center; gap:6px; width:auto; height:var(--s); padding:0 calc(var(--s) * .45); border:1px solid color-mix(in srgb, var(--sc-sheen) 12%, transparent); background:color-mix(in srgb, var(--sc-well) 78%, transparent); clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .sc-timer[data-variant="pill"][data-size="sm"] { --s:22px; } .sc-timer[data-variant="pill"][data-size="lg"] { --s:36px; } .sc-timer[data-variant="pill"] > .sc-text { --fs:calc(var(--s) * .5); } .sc-timer[data-variant="pill"] > img[data-sc-icon] { width:calc(var(--s) * .72); height:calc(var(--s) * .72); margin-left:calc(var(--s) * -.12); object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); } .sc-timer[data-variant="pill"] .sc-timer-bg, .sc-timer[data-variant="pill"] .sc-timer-track, .sc-timer[data-variant="pill"] .sc-timer-ring { display:none; } .sc-timer.sc-warn { --line:var(--sc-c-red); --lip:color-mix(in srgb, var(--sc-c-red) calc(45% * var(--sc-glow)), transparent); } .sc-timer.sc-warn > .sc-text { --ink:color-mix(in srgb, var(--sc-c-red) 49%, var(--sc-ink)); } .sc-timer.sc-warn[data-variant="pill"] { border-color:var(--sc-c-red); box-shadow:0 0 12px -3px color-mix(in srgb, var(--sc-c-red) 45%, transparent); } .sc-timer.sc-warn { animation:sc-timer-pulse .5s ease-in-out infinite alternate; } .sc-timer.sc-done { animation:none; opacity:.5; } @keyframes sc-timer-pulse { to { transform:scale(1.08); } } @media (prefers-reduced-motion:reduce) { .sc-timer.sc-warn { animation:none; } } /* ===== float ===== */ /* Floating Text — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector — the rise/pop keyframes use --dx and --rot that sc.js sets, and the translate(-50%, …) centring is part of the positioning, so none of it may change. Skin: flat text (no outline in this style), so it gets a hard dark shadow to stay readable over gameplay. */ .sc-float { --fs:24px; --fill:var(--sc-ink); position:fixed; z-index:3000; left:0; top:0; pointer-events:none; display:flex; align-items:center; gap:calc(var(--fs) * .15); white-space:nowrap; animation:sc-float-rise .85s cubic-bezier(.2,.8,.3,1) forwards; } .sc-float .sc-text { --fs:inherit; --ink:var(--fill); font-size:var(--fs); text-shadow:0 2px 0 #000000c7, 0 0 10px #000000a6; } .sc-float img { width:calc(var(--fs) * 1.2); height:calc(var(--fs) * 1.2); object-fit:contain; } .sc-float[data-size="sm"] { --fs:17px; } .sc-float[data-size="lg"] { --fs:36px; } .sc-float[data-color="gold"] { --fill:color-mix(in srgb, var(--sc-c-yellow) 82%, var(--sc-ink)); } .sc-float[data-color="green"] { --fill:color-mix(in srgb, var(--sc-c-green) 73%, var(--sc-ink)); } .sc-float[data-color="red"] { --fill:color-mix(in srgb, var(--sc-c-red) 75%, var(--sc-ink)); } .sc-float[data-color="sky"] { --fill:color-mix(in srgb, var(--sc-c-sky) 64%, var(--sc-ink)); } .sc-float[data-color="purple"] { --fill:color-mix(in srgb, var(--sc-c-purple) 65%, var(--sc-ink)); } .sc-float[data-style="pop"] { animation:sc-float-pop 1s cubic-bezier(.2,.8,.3,1) forwards; } @keyframes sc-float-rise { 0% { opacity:0; transform:translate(-50%, -30%) scale(.6); } 18% { opacity:1; transform:translate(calc(-50% + var(--dx) * .3), -65%) scale(1.15); } 35% { transform:translate(calc(-50% + var(--dx) * .5), -90%) scale(1); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), -190%) scale(.95); } } @keyframes sc-float-pop { 0% { opacity:0; transform:translate(-50%, -50%) scale(.2) rotate(var(--rot)); } 22% { opacity:1; transform:translate(-50%, -60%) scale(1.45) rotate(var(--rot)); } 40% { transform:translate(-50%, -65%) scale(1) rotate(var(--rot)); } 75% { opacity:1; transform:translate(-50%, -80%) scale(1) rotate(var(--rot)); } 100% { opacity:0; transform:translate(-50%, -120%) scale(.9) rotate(var(--rot)); } } /* ===== popup ===== */ /* Popup — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js (same markup, same SC.popup API) */ .sc-popup { position:fixed; inset:0; z-index:1000; box-sizing:border-box; display:grid; place-content:unsafe center; place-items:center; overflow:hidden; padding:calc(14px + var(--sc-safe-top)) calc(14px + var(--sc-safe-right)) calc(14px + var(--sc-safe-bottom)) calc(14px + var(--sc-safe-left)); background:color-mix(in srgb, var(--sc-scrim) 72%, transparent); backdrop-filter:blur(2px); animation:sc-popup-fade .18s ease-out; font-family:var(--sc-font); } .sc-popup[hidden] { display:none; } .sc-popup.sc-closing { animation:sc-popup-fade .16s ease-in reverse forwards; } @keyframes sc-popup-fade { from { opacity:0; } } .sc-popup-box { --line:color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); --p-ink:var(--sc-ink); --soft:var(--sc-dim); position:relative; width:330px; max-width:none; box-sizing:border-box; flex:none; scale:var(--sc-pop-s, 1); --sc-min-fs:calc(var(--sc-min-text) / var(--sc-pop-s, 1)); --gold:var(--sc-c-yellow); --rivet:11px; border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--sc-r) * 1.5); background: var(--sc-panel); box-shadow:0 20px 50px -18px color-mix(in srgb, var(--sc-shade) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--sc-shade) 10%, transparent); /* a floating white card */ border-color:var(--sc-panel); animation:sc-popup-pop .26s cubic-bezier(.2,1.2,.4,1); } .sc-popup.sc-closing .sc-popup-box { animation:sc-popup-out .16s ease-in forwards; } @keyframes sc-popup-pop { from { transform:translateY(8px); opacity:0; } } @keyframes sc-popup-out { to { transform:translateY(6px); opacity:0; } } .sc-popup[data-color="red"] .sc-popup-box { --line:var(--sc-c-red); --lip:color-mix(in srgb, var(--sc-c-red) calc(35% * var(--sc-glow)), transparent); } .sc-popup[data-color="green"] .sc-popup-box { --line:color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-popup[data-color="yellow"] .sc-popup-box { --line:var(--sc-c-yellow); --lip:color-mix(in srgb, var(--sc-c-yellow) calc(35% * var(--sc-glow)), transparent); } .sc-popup[data-color="purple"] .sc-popup-box { --line:var(--sc-c-purple); --lip:color-mix(in srgb, var(--sc-c-purple) calc(35% * var(--sc-glow)), transparent); } /* Header: a hairline under the title, not a coloured cap */ .sc-popup-header { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 44px 12px; border-bottom:1px solid color-mix(in srgb, var(--sc-sheen) 8%, transparent); } .sc-popup-header > .sc-text { --fs:22px; font-size:var(--fs); --ink:var(--sc-ink); font-family:var(--sc-title-font, var(--sc-font)); font-weight:700; letter-spacing:0; text-transform:none; text-shadow:none; } .sc-popup-header > .sc-icon-button { position:absolute; right:8px; top:8px; --size:34px; } .sc-popup-sub { font:600 11px var(--sc-font); letter-spacing:calc(.14em * var(--sc-tracking)); text-transform:var(--sc-caps); color:var(--soft); } .sc-popup-body { display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 20px 20px; text-align:center; } .sc-popup-message { margin:0; line-height:1.4; } .sc-popup-message .sc-text { --fs:14px; font-size:var(--fs); --ink:var(--sc-ink); white-space:normal; line-height:1.4; font-weight:600; } .sc-popup-hint { margin:0; font-size:12px; line-height:1.4; color:var(--soft); } .sc-popup-value { margin:0; padding:0 16px 4px; line-height:1; } .sc-popup-value .sc-text { --fs:26px; font-size:var(--fs); --ink:var(--line); } .sc-popup-section { align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px; border:1px solid var(--sc-outline); border-radius:var(--sc-r); background:var(--sc-raise); } .sc-popup-actions { display:flex; justify-content:center; gap:10px; width:100%; } .sc-popup-actions[data-layout="stack"] { flex-direction:column; align-items:stretch; } .sc-popup-actions[data-layout="stack"] .sc-button { width:100%; min-width:0; } .sc-panel { /* PORTED layout: stretches to the popup and lays its content out, only the surface is this style's */ align-self:stretch; box-sizing:border-box; padding:14px; border:1px solid var(--sc-outline); border-radius:var(--sc-r); background:var(--sc-raise); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; } /* ===== bubble ===== */ /* Count Bubble — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js and the host component CSS. A small solid accent chip. The number is dark so it reads on the bright fill. */ :where(.sc-bubble) { --line:var(--sc-c-red); --lip:color-mix(in srgb, var(--sc-c-red) calc(45% * var(--sc-glow)), transparent); } .sc-bubble { position:absolute; right:-6px; top:-6px; z-index:4; display:grid; place-items:center; box-sizing:border-box; min-width:19px; height:19px; padding:0 5px; border-radius:calc(var(--sc-r) * 1.25); background:var(--line); box-shadow:0 0 10px -2px var(--lip); pointer-events:none; user-select:none; -webkit-user-select:none; } .sc-bubble > .sc-text { --fs:11px; --ink:color-mix(in srgb, var(--sc-well) 93%, var(--sc-surface-shade)); font-size:var(--fs); font-variant-numeric:tabular-nums; } /* data-badge-color maps onto the accent */ .sc-bubble[data-color="sky"] { --line:color-mix(in srgb, var(--sc-c-sky) 87%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-c-sky) 87%, var(--sc-ink)) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="blue"] { --line:var(--sc-c-blue); --lip:color-mix(in srgb, var(--sc-c-blue) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="green"] { --line:color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="yellow"] { --line:var(--sc-c-yellow); --lip:color-mix(in srgb, var(--sc-c-yellow) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="orange"] { --line:color-mix(in srgb, var(--sc-c-orange) 90%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-c-orange) 90%, var(--sc-ink)) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="red"] { --line:var(--sc-c-red); --lip:color-mix(in srgb, var(--sc-c-red) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="purple"] { --line:var(--sc-c-purple); --lip:color-mix(in srgb, var(--sc-c-purple) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="pink"] { --line:var(--sc-c-pink); --lip:color-mix(in srgb, var(--sc-c-pink) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="mint"] { --line:var(--sc-c-mint); --lip:color-mix(in srgb, var(--sc-c-mint) calc(45% * var(--sc-glow)), transparent); } .sc-bubble[data-color="dark"] { --line:color-mix(in srgb, var(--sc-dim) 73%, var(--sc-shade)); --lip:#0000; } /* ---- Clean Flat: a clean notification badge — solid colour, white number, a white ring that separates it from whatever it sits on, and a soft shadow. Round for one digit, a pill for more. ---- */ .sc-bubble { min-width:20px; height:20px; padding:0 6px; right:-7px; top:-7px; border-radius:999px; box-shadow:0 0 0 2px var(--sc-panel), 0 2px 6px color-mix(in srgb, var(--sc-shade) 30%, transparent); } .sc-bubble > .sc-text { --fs:12px; --ink:#FFFFFF; font-weight:900; text-shadow:none; line-height:1; } /* ===== toggle ===== */ /* Toggle — Neon Cyber Requires: ../../core.css, ../sc.js (same markup, role="switch", change event) A chunky outlined switch: dark-outlined track (gold when ON, with the button's top band), a cream knob with its own outline and bottom edge, the state word beside it. Same markup, same behaviour as every other style. CONTRAST RULE (applies to every component in this style): the label is ALWAYS near-white on the dark track, in both states. Never tint the text with the accent — accent-on-dark reads at about 3:1 and disappears at small sizes. The accent carries the state through the THUMB, the BORDER and the GLOW; the text carries the meaning, so it stays readable. */ :where(.sc-toggle) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); --on-label:#FFFFFF; } /* the label is light in BOTH states; on the gold track it carries the outline */ .sc-toggle { --h:44px; --w:calc(var(--h) * 2.3); --thumb:calc(var(--h) - var(--pad) * 2 - var(--bw) * 2); --pad:calc(var(--h) * .13); --bw:var(--sc-line); --track:var(--sc-well); --edge:var(--sc-outline); /* the outline is the same dark line the icons have, in both states */ --knob:var(--sc-panel); /* a white knob in both states — flat switches */ --label:var(--sc-ink); /* near-white in BOTH states — this is the contrast rule */ position:relative; display:inline-block; flex:none; box-sizing:border-box; width:var(--w); height:var(--h); padding:0; vertical-align:middle; border:var(--bw) solid var(--edge); border-radius:calc(var(--h) / 2); background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), var(--track); box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)); font-family:var(--sc-font); cursor:pointer; appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none; transition:border-color .16s, box-shadow .16s, background .16s; } .sc-toggle[data-size="sm"] { --h:36px; --bw:2px; } .sc-toggle[data-size="lg"] { --h:54px; } /* ON: the accent lights the edge, the thumb and the glow — never the text */ .sc-toggle:is([data-checked="true"], [data-checked=""]) { --knob:var(--sc-panel); --track:var(--line); --label:var(--on-label); --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)), 0 0 calc(var(--h) * .28) var(--lip); } .sc-toggle-thumb { position:absolute; top:var(--pad); left:var(--pad); width:var(--thumb); height:var(--thumb); box-sizing:border-box; pointer-events:none; border-radius:50%; background:linear-gradient(180deg, color-mix(in srgb, var(--knob) 92%, var(--sc-sheen)), color-mix(in srgb, var(--knob) 88%, var(--sc-shade))); border:2px solid var(--sc-outline); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-ink) 70%, var(--sc-shade)); transition:transform .18s cubic-bezier(.3,1.1,.5,1), background .16s; } .sc-toggle:is([data-checked="true"], [data-checked=""]) > .sc-toggle-thumb { transform:translateX(calc(var(--w) - var(--h))); } /* the word sits on the free side of the track */ .sc-toggle-label { position:absolute; top:0; bottom:0; left:calc(var(--h) - var(--bw)); right:calc(var(--h) * .22); display:grid; place-items:center; pointer-events:none; } .sc-toggle:is([data-checked="true"], [data-checked=""]) > .sc-toggle-label { left:calc(var(--h) * .22); right:calc(var(--h) - var(--bw)); } .sc-toggle-label > .sc-text { --fs:calc(var(--h) * .36); --ink:var(--label); font-size:var(--fs); font-weight:var(--sc-weight); letter-spacing:.04em; text-transform:uppercase; -webkit-text-stroke:0; text-shadow:0 1px 0 color-mix(in srgb, var(--sc-outline) 55%, transparent); } .sc-toggle:active, .sc-toggle.sc-pressed { scale:.97; } .sc-toggle:focus-visible { outline:2px solid var(--line); outline-offset:3px; } .sc-toggle:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.5; } @media (prefers-reduced-motion:reduce) { .sc-toggle, .sc-toggle-thumb { transition:none; } } /* ---- Neon Cyber: ON = glass track with a neon edge and a glowing knob ---- */ .sc-toggle:is([data-checked="true"], [data-checked=""]) { --track:color-mix(in srgb, var(--line) 26%, var(--sc-well)); --sc-outline:var(--line); border-color:var(--line); box-shadow:0 0 14px -2px color-mix(in srgb, var(--line) 70%, transparent); } .sc-toggle:is([data-checked="true"], [data-checked=""]) > .sc-toggle-thumb { background:var(--line); box-shadow:0 0 10px var(--line); border-color:var(--line); } .sc-toggle { --knob:var(--sc-dim); } /* OFF knob: visible grey on the dark track */ /* ===== slider ===== */ /* Slider — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector: --p (0…1 from sc.js), the half-thumb margins that keep the thumb inside the bar, the fill that ends under the thumb centre, the 44px touch target, sizes, the icon and the value label are all behaviour. Skin: an outlined pill rail, accent fill with the button's top band, and a round cream knob with its own outline — the toggle's knob on a rail. */ :where(.sc-slider) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-slider { --h:16px; --thumb:32px; --p:0; position:relative; display:flex; align-items:center; gap:10px; width:100%; min-width:120px; box-sizing:border-box; min-height:44px; font-family:var(--sc-font); cursor:pointer; outline:none; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; } .sc-slider[data-size="sm"] { --h:11px; --thumb:26px; } .sc-slider[data-size="lg"] { --h:22px; --thumb:40px; min-height:52px; } .sc-slider-bar { position:relative; flex:1; height:var(--thumb); margin:0 calc(var(--thumb) / 2); } .sc-slider-track { position:absolute; left:calc(var(--thumb) / -2); right:calc(var(--thumb) / -2); top:50%; height:var(--h); transform:translateY(-50%); box-sizing:border-box; overflow:hidden; background:var(--sc-well); border:2px solid var(--sc-outline); border-radius:999px; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)); } .sc-slider-fill { position:absolute; left:0; top:0; bottom:0; width:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)); background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), var(--line); border-radius:999px; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)); } .sc-slider-thumb { position:absolute; top:50%; left:calc(var(--p) * 100%); width:var(--thumb); height:var(--thumb); box-sizing:border-box; transform:translate(-50%, -50%); pointer-events:none; border:2px solid var(--sc-outline); border-radius:50%; background:var(--sc-panel); /* white knob ringed in the accent (border below) */ box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-ink) 70%, var(--sc-shade)), 0 0 8px var(--lip); transition:scale .08s; } .sc-slider.sc-dragging .sc-slider-thumb { scale:1.12; } .sc-slider:focus-visible .sc-slider-track { outline:2px solid var(--line); outline-offset:3px; } .sc-slider > img[data-sc-icon] { flex:none; width:calc(var(--thumb) * .9); height:calc(var(--thumb) * .9); object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%); } .sc-slider-value { flex:none; min-width:calc(var(--thumb) * 1.5); text-align:right; line-height:1; pointer-events:none; } .sc-slider-value .sc-text { --fs:calc(var(--h) * .5 + 8px); --ink:var(--sc-ink); font-size:var(--fs); font-variant-numeric:tabular-nums; } .sc-slider:is([disabled], fieldset:disabled .sc-slider) { cursor:not-allowed; filter:grayscale(1) brightness(.7); } .sc-slider .sc-slider-thumb { border-color:var(--line); } /* ---- Neon Cyber: glowing fill and knob ---- */ .sc-slider-fill { box-shadow:0 0 12px color-mix(in srgb, var(--line) 70%, transparent); } .sc-slider .sc-slider-thumb { background:var(--sc-ink); box-shadow:0 0 12px var(--line); } /* ===== checkbox ===== */ /* Checkbox — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (sizes, 44px touch target, the tick's scale-in, pressed / focus / disabled). Skin: a chunky outlined box with a bottom edge; checked = accent fill with the top band and the tick. */ :where(.sc-checkbox) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-checkbox { --box:30px; --cb-fs:16px; position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; margin:0; border:0; background:none; font-family:var(--sc-font); color:inherit; cursor:pointer; appearance:none; vertical-align:middle; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; } .sc-checkbox[data-size="sm"] { --box:24px; --cb-fs:13px; min-height:40px; } .sc-checkbox[data-size="lg"] { --box:38px; --cb-fs:20px; min-height:52px; } .sc-checkbox > .sc-text { --fs:var(--cb-fs); --ink:var(--sc-ink); font-size:var(--fs); } .sc-checkbox-box { position:relative; flex:none; box-sizing:border-box; width:var(--box); height:var(--box); border:2.5px solid var(--sc-outline); border-radius:calc(var(--box) * .16 * var(--sc-round)); background:var(--sc-well); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)); transition:transform .06s, border-color .14s, background .14s, box-shadow .14s; } .sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box { --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), var(--line); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)), 0 0 12px -3px var(--lip); } .sc-checkbox-box > img { position:absolute; left:50%; top:50%; width:76%; height:76%; object-fit:contain; pointer-events:none; transform:translate(-50%, -50%) scale(0); opacity:0; translate:var(--ox, 0%) var(--oy, 0%); } .sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box > img { opacity:1; transform:translate(-50%, -50%) scale(1); transition:transform .2s cubic-bezier(.2,1.5,.5,1); } .sc-checkbox:active > .sc-checkbox-box, .sc-checkbox.sc-pressed > .sc-checkbox-box { transform:scale(.92); } .sc-checkbox:focus-visible > .sc-checkbox-box { outline:2px solid var(--line); outline-offset:3px; } .sc-checkbox:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.7); } @media (prefers-reduced-motion:reduce) { .sc-checkbox-box, .sc-checkbox-box > img { transition:none !important; } } /* ---- Neon Cyber: checked = glass box with a neon edge ---- */ .sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box { background:color-mix(in srgb, var(--line) 26%, var(--sc-well)); border-color:var(--line); box-shadow:0 0 14px -2px color-mix(in srgb, var(--line) 70%, transparent); } /* ===== tabs ===== */ /* Tabs — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js Dim labels on a dark strip; the selected tab lights up and gets a 2px underline. No pill, no gloss. */ :where(.sc-tabs) { --line:color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-tabs { --h:44px; --tab-fs:15px; --tab-icon:24px; display:flex; gap:0; width:100%; box-sizing:border-box; font-family:var(--sc-font); border-bottom:0; padding:2px; border-radius:999px; background:var(--sc-well); box-shadow:inset 0 0 0 2px var(--sc-outline); /* an outlined trough the gold chip slides in */ } .sc-tabs[data-size="sm"] { --h:36px; --tab-fs:13px; --tab-icon:20px; } .sc-tabs[data-size="lg"] { --h:54px; --tab-fs:18px; --tab-icon:28px; } .sc-tab { position:relative; flex:1 1 0; min-width:0; height:var(--h); box-sizing:border-box; margin:0; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 10px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; appearance:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; transition:color .14s; } .sc-tab::after { /* the underline */ content:""; position:absolute; inset:5px 4px; z-index:-1; border-radius:999px; border:2px solid var(--sc-outline); background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 30%, transparent) 0%, color-mix(in srgb, var(--sc-sheen) 12%, transparent) 38%, #0000 46%), var(--line); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)), 0 0 10px -1px var(--lip); opacity:0; transform:scale(.9); transition:opacity .16s, transform .16s; } .sc-tab[aria-selected="true"] { --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); } .sc-tab[aria-selected="true"]::after { opacity:1; transform:none; } .sc-tab > .sc-text { --fs:var(--tab-fs); --ink:var(--sc-dim); font-size:var(--fs); text-transform:var(--sc-caps); transition:color .14s; } .sc-tab[aria-selected="true"] > .sc-text { --ink:#FFFFFF; -webkit-text-stroke:0; text-shadow:0 1px 0 color-mix(in srgb, var(--sc-outline) 55%, transparent); } /* white with the outline, on the gold chip */ .sc-tab[aria-selected="true"] > img[data-sc-icon] { filter:none; } .sc-tab { isolation:isolate; } .sc-tab > img[data-sc-icon] { width:var(--tab-icon); height:var(--tab-icon); flex:none; object-fit:contain; pointer-events:none; opacity:.7; translate:var(--ox, 0%) var(--oy, 0%); transition:opacity .14s; } .sc-tab[aria-selected="true"] > img[data-sc-icon] { opacity:1; } .sc-tab > img[data-flip] { transform:scaleX(-1); } .sc-tab.sc-tab-tight > img[data-sc-icon] { display:none; } .sc-tab:active, .sc-tab.sc-pressed { filter:brightness(1.3); } .sc-tab:disabled { opacity:.35; cursor:not-allowed; } .sc-tab:focus-visible { outline:2px solid var(--line); outline-offset:-3px; } /* ---- Neon Cyber: the selected tab is a glass chip with a neon edge ---- */ .sc-tabs .sc-tab::after { background:color-mix(in srgb, var(--line) 26%, var(--sc-well)); border-color:var(--line); box-shadow:0 0 14px -2px color-mix(in srgb, var(--line) 70%, transparent); } /* ===== tabbar ===== */ /* Bottom Tab Bar — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js A flat dark bar with a lit top edge. The selected item does not rise — it lights up and keeps a marker above it. */ :where(.sc-tabbar) { --line:color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)); --lip:color-mix(in srgb, color-mix(in srgb, var(--sc-accent) 87%, var(--sc-ink)) calc(35% * var(--sc-glow)), transparent); } .sc-tabbar { --bar-h:62px; --icon:24px; --icon-on:26px; position:relative; display:flex; align-items:stretch; box-sizing:border-box; width:100%; height:var(--bar-h); background:color-mix(in srgb, var(--sc-well) 95%, transparent); border-top:2.5px solid var(--sc-outline); font-family:var(--sc-font); } .sc-screen .sc-tabbar { flex:1 1 100%; align-self:flex-end; margin-left:calc((12px + var(--sc-safe-left)) / var(--sc-s) * -1); margin-right:calc((12px + var(--sc-safe-right)) / var(--sc-s) * -1); margin-bottom:calc((12px + var(--sc-safe-bottom)) / var(--sc-s) * -1); height:calc(var(--bar-h) + var(--sc-safe-bottom) / var(--sc-s)); padding-bottom:calc(var(--sc-safe-bottom) / var(--sc-s)); } .sc-tabbar-item { position:relative; flex:1 1 0; min-width:0; margin:0; padding:0; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; appearance:none; outline:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .sc-tabbar-item > img[data-sc-icon] { width:var(--icon); height:var(--icon); object-fit:contain; pointer-events:none; opacity:.62; translate:var(--ox, 0%) var(--oy, 0%); transition:opacity .16s, width .16s, height .16s; } .sc-tabbar-item > img[data-flip] { transform:scaleX(-1); } .sc-tabbar-item { isolation:isolate; } .sc-tabbar-item > .sc-text { --fs:11px; --ink:var(--sc-dim); font-size:var(--fs); letter-spacing:.02em; } /* Selected: a marker on the bar's top edge, a lit icon and label */ .sc-tabbar-item[aria-selected="true"]::before { content:""; position:absolute; left:12%; right:12%; top:6px; bottom:6px; z-index:-1; border-radius:calc(var(--sc-r) * .9); border:2px solid var(--sc-outline); background:var(--sc-raise); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-raise) 70%, var(--sc-surface-shade)), 0 0 12px -2px var(--lip); } .sc-tabbar-item[aria-selected="true"]::after { /* soft pool of light under the marker */ content:""; position:absolute; left:32%; right:32%; top:6px; height:3px; border-radius:2px; z-index:0; background:var(--line); /* a small gold cap on the raised tile */ } .sc-tabbar-item[aria-selected="true"] > img[data-sc-icon] { width:var(--icon-on); height:var(--icon-on); opacity:1; } .sc-tabbar-item[aria-selected="true"] > .sc-text { --ink:var(--line); } .sc-tabbar-item > .sc-bubble { top:8px; right:calc(50% - var(--icon) / 2 - 10px); } .sc-tabbar-item.sc-pressed > img[data-sc-icon] { scale:.9; } .sc-tabbar-item:focus-visible::after { content:""; position:absolute; inset:5px; border:2px solid var(--line); border-radius:calc(var(--sc-r) * 0.75); } .sc-tabbar-item:disabled { cursor:not-allowed; opacity:.3; } @media (prefers-reduced-motion:reduce) { .sc-tabbar-item > img { transition:none; } } /* ---- Clean Flat: tab bars carry COLOURED icons (home-color, shop-color, settings-color…, see ICON-SHEETS-EXT.md N1). Unselected items stay in colour but calmer; the selected one is full colour on its raised tile. ---- */ .sc-tabbar-item > img[data-sc-icon] { opacity:.7; } .sc-tabbar-item[aria-selected="true"] > img[data-sc-icon] { opacity:1; } .sc-tabbar-item > .sc-bubble { top:3px; right:calc(50% - var(--icon) / 2 - 17px); } /* the badge sits beside the icon's corner, not on it */ /* ===== tag ===== */ /* Tag Ribbon — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (sizes, data-tilt, the attached variant and its three data-pos anchors, the pop-in). Skin: the pack's rarity chip — same construction as the button: a real border, and the two 45° corners filled with the frame colour by diagonal gradients. One element. */ :where(.sc-tag) { --line:var(--sc-c-red); --lip:color-mix(in srgb, var(--sc-c-red) calc(35% * var(--sc-glow)), transparent); } .sc-tag { --t:13px; --cut:calc(var(--t) * .62); --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); position:relative; display:inline-block; box-sizing:border-box; vertical-align:middle; white-space:nowrap; line-height:1; padding:calc(var(--t) * .3) calc(var(--t) * .7); border:2px solid var(--sc-outline); border-radius:999px; background: linear-gradient(225deg, var(--line) calc(var(--cut) * .7071), #0000 0), linear-gradient( 45deg, var(--line) calc(var(--cut) * .7071), #0000 0), linear-gradient(180deg, color-mix(in srgb, var(--line) 80%, var(--sc-sheen)) 0 45%, var(--line) 45%); background-clip:padding-box; box-shadow:0 0 10px -3px var(--lip); font-family:var(--sc-font); pointer-events:none; user-select:none; -webkit-user-select:none; } .sc-tag[data-size="sm"] { --t:10px; } .sc-tag[data-size="lg"] { --t:16px; } .sc-tag[data-tilt] { rotate:-6deg; } .sc-tag > .sc-text { --fs:var(--t); --ink:var(--sc-ink); font-size:var(--fs); display:block; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 1px 0 color-mix(in srgb, var(--sc-outline) 60%, transparent); } /* Attached to a host (built by sc.js from data-tag) */ .sc-tag.sc-tag-attached { position:absolute; z-index:5; --t:11px; } .sc-tag-attached[data-pos="top-left"] { left:-6px; top:-8px; } .sc-tag-attached[data-pos="top-right"] { right:-6px; top:-8px; } .sc-tag-attached[data-pos="top"] { left:50%; top:0; translate:-50% -55%; } .sc-tag-attached { animation:sc-tag-pop .28s cubic-bezier(.2,1.4,.5,1) backwards; } @keyframes sc-tag-pop { from { scale:.6; opacity:0; } } @media (prefers-reduced-motion:reduce) { .sc-tag-attached { animation:none; } } /* ===== banner ===== */ /* Title Banner — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Tactical Dark file: sizes driven by --b-fs, the band sc.js wraps round the text, and both entrance animations. Skin: a cloth ribbon hanging from a wooden rod with silver caps, swallow-tail ends, dark outline — the reference's pennants, laid sideways for a title. */ :where(.sc-banner) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-banner { --b-fs:18px; --b-h:calc(var(--b-fs) * 2.3); --cut:calc(var(--b-h) * .5); --sc-outline:color-mix(in srgb, var(--line) 80%, var(--sc-shade)); position:relative; display:inline-flex; box-sizing:border-box; height:var(--b-h); margin:0; font-family:var(--sc-font); white-space:nowrap; user-select:none; -webkit-user-select:none; vertical-align:middle; filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--sc-shade) 22%, transparent)); } .sc-banner[data-size="sm"] { --b-fs:13px; } .sc-banner[data-size="lg"] { --b-fs:26px; } .sc-banner::before { content:none; } .sc-banner::after { content:none; } .sc-banner-band { position:relative; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:100%; min-width:calc(var(--b-h) * 3.6); padding:0 calc(var(--b-fs) * 1.6); z-index:1; background:var(--line); box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--line) 76%, var(--sc-shade)); border-radius:999px; } .sc-banner-band > .sc-text { --fs:var(--b-fs); --ink:var(--sc-ink); font-size:var(--fs); letter-spacing:.02em; text-transform:none; --ink:#FFFFFF; } .sc-banner[data-animate="unfurl"] { animation:sc-banner-unfurl .4s cubic-bezier(.2,1.2,.5,1) backwards; } .sc-banner[data-animate="drop"] { animation:sc-banner-drop .4s cubic-bezier(.2,1.3,.5,1) backwards; } @keyframes sc-banner-unfurl { from { transform:scaleX(.2); opacity:0; } } @keyframes sc-banner-drop { from { transform:translateY(-40%); opacity:0; } } @media (prefers-reduced-motion:reduce) { .sc-banner { animation:none !important; } } /* ---- Neon Cyber: the banner is neon glass like the buttons — white text on a bright neon fill was too weak ---- */ .sc-banner-band { background:color-mix(in srgb, var(--line) 28%, var(--sc-well)); box-shadow:inset 0 0 0 2px var(--line), 0 0 14px -2px color-mix(in srgb, var(--line) 70%, transparent); } .sc-banner-band > .sc-text { text-shadow:0 0 8px color-mix(in srgb, var(--line) 80%, transparent); } /* ===== hint ===== */ /* Hint Bubble — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (data-pos, data-size, --ax/--ay pointer placement, floating bubbles) — only the skin changed: dark panel, thin accent edge, near-white text. */ :where(.sc-hint) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-hint { --h-fs:14px; --ax:50%; --ay:50%; --edge:color-mix(in srgb, var(--line) 65%, color-mix(in srgb, var(--sc-panel) 80%, var(--sc-surface-shade))); --bw:1.5px; --panel:color-mix(in srgb, var(--sc-panel) 96%, var(--sc-surface-shade)); position:relative; isolation:isolate; display:inline-block; box-sizing:border-box; max-width:230px; width:max-content; padding:calc(var(--h-fs) * .5) calc(var(--h-fs) * .85) calc(var(--h-fs) * .55); border:var(--bw) solid var(--edge); border-radius:calc(var(--sc-r) * 0.75); background:var(--panel); box-shadow:0 0 16px -6px var(--lip), 0 8px 20px -10px #000; font:600 var(--h-fs)/1.3 var(--sc-font); color:var(--sc-ink); text-align:center; white-space:normal; overflow-wrap:break-word; user-select:none; -webkit-user-select:none; pointer-events:none; } .sc-hint[data-size="sm"] { --h-fs:12px; } /* Pointer: two rotated squares. ::before = edge colour, ::after = panel colour one border-width further in. */ .sc-hint { --arrow:calc(13px * var(--hint-s, 1)); --ad:calc(var(--bw) * 1.4142); } .sc-hint[data-size="sm"] { --arrow:calc(10px * var(--hint-s, 1)); } .sc-hint:is([data-pos="left"], [data-pos="right"]) { min-height:calc(var(--h-fs) * 3); display:inline-flex; align-items:center; } .sc-hint::before, .sc-hint::after { content:""; position:absolute; z-index:-1; width:var(--arrow); height:var(--arrow); rotate:45deg; border-radius:calc(var(--sc-r) * 0.125); pointer-events:none; } .sc-hint::before { background:var(--edge); } .sc-hint::after { background:var(--panel); } .sc-hint:is(:not([data-pos]), [data-pos="top"])::before { left:calc(var(--ax) - var(--arrow) / 2); bottom:calc(var(--arrow) / -2 - var(--ad) / 2); } .sc-hint:is(:not([data-pos]), [data-pos="top"])::after { left:calc(var(--ax) - var(--arrow) / 2); bottom:calc(var(--arrow) / -2 + var(--ad) / 2); } .sc-hint[data-pos="bottom"]::before { left:calc(var(--ax) - var(--arrow) / 2); top:calc(var(--arrow) / -2 - var(--ad) / 2); } .sc-hint[data-pos="bottom"]::after { left:calc(var(--ax) - var(--arrow) / 2); top:calc(var(--arrow) / -2 + var(--ad) / 2); } .sc-hint[data-pos="left"]::before { top:calc(var(--ay) - var(--arrow) / 2); right:calc(var(--arrow) / -2 - var(--ad) / 2); } .sc-hint[data-pos="left"]::after { top:calc(var(--ay) - var(--arrow) / 2); right:calc(var(--arrow) / -2 + var(--ad) / 2); } .sc-hint[data-pos="right"]::before { top:calc(var(--ay) - var(--arrow) / 2); left:calc(var(--arrow) / -2 - var(--ad) / 2); } .sc-hint[data-pos="right"]::after { top:calc(var(--ay) - var(--arrow) / 2); left:calc(var(--arrow) / -2 + var(--ad) / 2); } /* Floating bubbles created by sc.js */ .sc-hint.sc-hint-float { position:fixed; left:0; top:0; z-index:1160; transform-origin:var(--ox, 50%) var(--oy, 100%); animation:sc-hint-pop .18s ease-out; } .sc-hint.sc-hint-float.sc-closing { animation:sc-hint-out .14s ease-in forwards; } @keyframes sc-hint-pop { from { opacity:0; scale:.85; } } @keyframes sc-hint-out { to { opacity:0; scale:.9; } } @media (prefers-reduced-motion:reduce) { .sc-hint.sc-hint-float { animation:none; } } /* ===== toast ===== */ /* Toast Message — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (data-pos layers, kinds incl. reward, in/out animations). Skin: flat dark bar, accent stripe on the left carries the kind, message stays near-white. */ .sc-toast-layer { position:fixed; left:0; right:0; z-index:1200; display:flex; justify-content:center; pointer-events:none; padding:0 12px; } .sc-toast-layer[data-pos="top"] { top:calc(12px + var(--sc-safe-top)); } .sc-toast-layer[data-pos="bottom"] { bottom:calc(12px + var(--sc-safe-bottom)); } .sc-toast { --line:var(--sc-accent); position:relative; display:inline-flex; align-items:center; gap:10px; box-sizing:border-box; max-width:100%; min-height:44px; padding:8px 18px 8px 16px; overflow:hidden; border:1px solid color-mix(in srgb, var(--sc-sheen) 10%, transparent); border-radius:calc(var(--sc-r) * 0.75); background:color-mix(in srgb, color-mix(in srgb, var(--sc-panel) 96%, var(--sc-surface-shade)) 97%, transparent); box-shadow:0 10px 28px -12px #000, 0 0 18px -8px var(--line); font-family:var(--sc-font); user-select:none; -webkit-user-select:none; animation:sc-toast-in .24s cubic-bezier(.2,1.2,.4,1); } .sc-toast::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line); box-shadow:0 0 10px -1px var(--line); } .sc-toast[data-kind="success"] { --line:var(--sc-c-green); } .sc-toast[data-kind="error"] { --line:var(--sc-c-red); } .sc-toast[data-kind="reward"] { --line:var(--sc-c-yellow); } .sc-toast > .sc-text { --fs:15px; --ink:var(--sc-ink); font-size:var(--fs); white-space:normal; text-align:center; line-height:1.25; } .sc-toast > img { width:26px; height:26px; flex:none; object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); } .sc-toast-layer[data-pos="bottom"] .sc-toast { animation-name:sc-toast-in-up; } .sc-toast.sc-closing { animation:sc-toast-out .2s ease-in forwards; } @keyframes sc-toast-in { from { opacity:0; transform:translateY(-120%); } } @keyframes sc-toast-in-up { from { opacity:0; transform:translateY(120%); } } @keyframes sc-toast-out { to { opacity:0; transform:scale(.9); } } @media (prefers-reduced-motion:reduce) { .sc-toast { animation-duration:.01s !important; } } /* ===== row ===== */ /* Item Row — Neon Cyber Requires: ../../core.css, super-casual/kit/sc.js A dark strip with a hairline edge and a 2px accent bar down its left side. */ .sc-row { --row-accent:var(--sc-edge); --title:var(--sc-ink); position:relative; display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; min-width:0; min-height:68px; overflow:hidden; padding:10px 12px; border:1px solid color-mix(in srgb, var(--sc-sheen) 8%, transparent); border-radius:var(--sc-r); background:linear-gradient(90deg, color-mix(in srgb, var(--sc-raise) 84%, var(--sc-surface-shade)), color-mix(in srgb, var(--sc-panel) 80%, var(--sc-surface-shade)) 60%); font-family:var(--sc-font); user-select:none; -webkit-user-select:none; } .sc-row::before { /* the accent edge */ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--row-accent); box-shadow:0 0 10px -1px var(--row-accent); } .sc-row[data-color="yellow"] { --row-accent:var(--sc-c-yellow); } .sc-row[data-color="blue"] { --row-accent:var(--sc-c-blue); } .sc-row[data-color="sky"] { --row-accent:color-mix(in srgb, var(--sc-c-sky) 87%, var(--sc-ink)); } .sc-row[data-color="green"] { --row-accent:color-mix(in srgb, var(--sc-c-green) 86%, var(--sc-ink)); } .sc-row[data-color="purple"] { --row-accent:var(--sc-c-purple); } .sc-row[data-color="red"] { --row-accent:var(--sc-c-red); } .sc-row[data-color="dark"] { --row-accent:var(--sc-edge); } .sc-row[data-color="white"] { --row-accent:color-mix(in srgb, var(--sc-ink) 97%, var(--sc-shade)); } .sc-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; } .sc-row-title { min-width:0; overflow:hidden; white-space:nowrap; line-height:1.1; padding:1px 0 2px; } .sc-row-title.sc-long { -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); } .sc-row-title > .sc-text { --fs:16px; --ink:var(--title); font-size:var(--fs); } .sc-row > .sc-row-title { flex:1; } .sc-row[data-variant="leader"] { min-height:50px; padding:6px 14px 6px 10px; gap:10px; } .sc-row-rank { flex:none; display:grid; place-items:center; min-width:28px; height:26px; padding:0 6px; box-sizing:border-box; border:1px solid color-mix(in srgb, var(--sc-sheen) 10%, transparent); border-radius:calc(var(--sc-r) * 0.5); background:var(--sc-well); } .sc-row-rank > .sc-text { --fs:14px; --ink:var(--sc-dim); font-size:var(--fs); font-variant-numeric:tabular-nums; } .sc-row-avatar { flex:none; position:relative; width:38px; height:38px; box-sizing:border-box; overflow:hidden; border:1px solid var(--row-accent); border-radius:calc(var(--sc-r) * 0.75); background:var(--sc-well); } .sc-row-avatar > img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); } .sc-row-score { flex:none; margin-left:auto; display:flex; align-items:center; gap:9px; } .sc-row-score > img { width:24px; height:24px; object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); } .sc-row-score > .sc-text { --fs:18px; --ink:var(--sc-ink); font-size:var(--fs); min-width:52px; text-align:right; font-variant-numeric:tabular-nums; } .sc-row > .sc-button, .sc-row > .sc-icon-button { flex:none; } .sc-row > .sc-button { min-width:88px; } .sc-row[data-state="done"] { opacity:.5; } /* ===== loading ===== */ /* Loading Bar — Neon Cyber Requires: ../../core.css, ../sc.js, ../progress/progress.css PORTED from the Super Casual file (layout, the bouncing icon, the fading tip). Skin: near-white label, dim tip. */ .sc-loading { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:340px; margin:0 auto 18px; font-family:var(--sc-font); user-select:none; -webkit-user-select:none; } .sc-loading > .sc-progress { width:100%; } .sc-loading-icon { width:56px; height:56px; object-fit:contain; animation:sc-loading-bounce .9s ease-in-out infinite; translate:var(--ox, 0%) var(--oy, 0%); } .sc-loading-label > .sc-text { --fs:17px; --ink:var(--sc-ink); font-size:var(--fs); letter-spacing:calc(.1em * var(--sc-tracking)); text-transform:var(--sc-caps); font-variant-numeric:tabular-nums; } .sc-loading-tip { min-height:2.4em; max-width:300px; text-align:center; font:600 14px/1.3 var(--sc-font); color:color-mix(in srgb, var(--sc-dim) 81%, var(--sc-sheen)); transition:opacity .25s; } .sc-loading-tip.sc-fade { opacity:0; } @keyframes sc-loading-bounce { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-8px); } } @media (prefers-reduced-motion:reduce) { .sc-loading-icon { animation:none; } } /* ===== alert ===== */ /* Notification Dot — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file selector-for-selector (.sc-alert is the element, .sc-alert-attached the modifier; default kind shows the alert icon, data-kind="dot" is the plain dot; tab-bar anchoring; pop + pulse). Skin: a glowing red dot instead of a glossy one. */ .sc-alert { --a:20px; position:absolute; right:-7px; top:-7px; z-index:6; width:var(--a); height:var(--a); pointer-events:none; animation:sc-alert-pop .3s cubic-bezier(.2,1.5,.5,1) backwards, sc-alert-pulse 1.6s ease-in-out .4s infinite; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sc-c-red) 60%, transparent)); } .sc-alert > img { width:100%; height:100%; object-fit:contain; display:block; translate:var(--ox, 0%) var(--oy, 0%); } .sc-alert[data-kind="dot"] { --a:11px; right:-3px; top:-3px; box-sizing:border-box; border-radius:50%; background:var(--sc-c-red); box-shadow:0 0 8px 0 color-mix(in srgb, var(--sc-c-red) 70%, transparent); filter:none; } .sc-alert:not(.sc-alert-attached) { position:relative; display:inline-block; right:auto; top:auto; vertical-align:middle; } /* Tab bar item: sit on the icon corner (this style's bar has no lift) */ .sc-tabbar-item > .sc-alert { top:6px; right:calc(50% - var(--icon) / 2 - 9px); } .sc-tabbar-item[aria-selected="true"] > .sc-alert { top:6px; right:calc(50% - var(--icon-on) / 2 - 9px); } @keyframes sc-alert-pop { from { scale:.2; opacity:0; } } @keyframes sc-alert-pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.12); } } @media (prefers-reduced-motion:reduce) { .sc-alert { animation:none; } } /* ===== level ===== */ /* Level Badge — Neon Cyber Requires: ../../core.css, ../sc.js PORTED from the Super Casual file (sizes, pop, and the XP-bar integration where the badge sits on a progress bar's left end). Skin: sc.js inserts the badge art ; this style hides it and draws a hexagon plate in CSS instead, so the number stays near-white on a dark accent-tinted plate. */ :where(.sc-level) { --line:var(--sc-accent); --lip:color-mix(in srgb, var(--sc-accent) calc(35% * var(--sc-glow)), transparent); } .sc-level { --lv:40px; position:relative; display:inline-grid; place-items:center; flex:none; vertical-align:middle; width:var(--lv); height:var(--lv); font-family:var(--sc-font); user-select:none; -webkit-user-select:none; filter:drop-shadow(0 0 .8px color-mix(in srgb, var(--line) 80%, #0000)) drop-shadow(0 0 .8px color-mix(in srgb, var(--line) 80%, #0000)); } .sc-level::before { content:""; position:absolute; inset:0; background:linear-gradient(color-mix(in srgb, var(--line) 38%, color-mix(in srgb, var(--sc-well) 97%, var(--sc-surface-shade))), color-mix(in srgb, var(--line) 18%, color-mix(in srgb, var(--sc-well) 70%, var(--sc-surface-shade)))); clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); } .sc-level[data-size="sm"] { --lv:28px; } .sc-level[data-size="lg"] { --lv:56px; } .sc-level > img { display:none; } .sc-level > .sc-text { --fs:calc(var(--lv) * .4); --ink:var(--sc-ink); font-size:var(--fs); position:relative; font-variant-numeric:tabular-nums; } .sc-level.sc-pop { animation:sc-level-pop .45s cubic-bezier(.2,1.5,.5,1); } @keyframes sc-level-pop { 0% { scale:1; } 35% { scale:1.3; } 100% { scale:1; } } /* On a progress bar's left end (like an XP bar) */ .sc-progress > .sc-level { --lv:max(30px, calc(var(--h) * 2.1)); position:relative; z-index:2; margin-right:calc(var(--lv) * -.3); } .sc-progress:has(> .sc-level) .sc-progress-label { padding-left:calc(var(--h) * .6); } @media (prefers-reduced-motion:reduce) { .sc-level.sc-pop { animation:none; } } /* ===== topbar ===== */ /* Top Bar — Neon Cyber Requires: ../../core.css, ../sc.js, ../counter/counter.css, ../level/level.css PORTED from the Super Casual file (the player is a real