/* Pixel Retro UI Kit v0.3.0 — bundle (generated by tools/build_kit.py, do not edit) */
/*
Pixel Retro — core
Fourth skin for the same kit. Same class names, same sc.js, same blocks and tests.
See ../STYLE.md. Load this INSTEAD of super-casual/kit/core.css.
Ported from fantasy-rpg-casual/kit/core.css: same tokens, pixel values. Palette: Sweetie 16 (GrafxKid, CC0).
*/
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Press+Start+2P&display=swap');
:root {
--sc-font: 'Jersey 10', 'Courier New', monospace; /* every digit distinct at game sizes (Pixelify Sans drew 2 and 5 like 8) */
--sc-title-font: 'Press Start 2P', 'Courier New', monospace;
--sc-outline: #0B0C14; /* 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: 3px;
--sc-line-sm: 3px;
--sc-px: 3px; /* one art pixel: outlines, highlights, the notch in every corner */
/* the pixel corner: a one-pixel notch cut from each corner (the classic 8-bit rounded rectangle) */
--sc-notch: polygon(var(--sc-px) 0, calc(100% - var(--sc-px)) 0, calc(100% - var(--sc-px)) var(--sc-px), 100% var(--sc-px), 100% calc(100% - var(--sc-px)), calc(100% - var(--sc-px)) calc(100% - var(--sc-px)), calc(100% - var(--sc-px)) 100%, var(--sc-px) 100%, var(--sc-px) calc(100% - var(--sc-px)), 0 calc(100% - var(--sc-px)), 0 var(--sc-px), var(--sc-px) var(--sc-px));
--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: #1A1C2C; /* page / game background */
--sc-well: #12131F; /* inset areas: bar tracks, slot insides, input wells */
--sc-panel: #333C57; /* panels, popups, bars */
--sc-raise: #3F4A69; /* raised neutral tiles: flat icon buttons, cards */
--sc-edge: #566C86; /* neutral borders and dividers */
/* text */
--sc-ink: #F4F4F4; /* main text */
--sc-dim: #94B0C2; /* secondary text */
--sc-sheen: #FFFFFF; /* the highlight colour laid over surfaces at low opacity (a light theme uses a dark one) */
--sc-shade: #0B0C14; /* what a surface is mixed with for its darker steps (a light theme uses a soft grey-blue, or it turns muddy) */
--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-yellow); /* what a component uses when it has no data-color */
--sc-c-sky: #41A6F6; --sc-c-blue: #6B85D6; --sc-c-cyan: #73EFF7; --sc-c-mint: #38D9A9;
--sc-c-green: #38B764; --sc-c-olive: #A7F070; --sc-c-yellow: #FFCD75; --sc-c-orange: #EF7D57;
--sc-c-red: #CB6B7D; --sc-c-pink: #E05D8B; --sc-c-purple: #9A78CE;
--sc-c-white: #F4F4F4; --sc-c-dark: #566C86;
/* the button: its fill is the accent mixed into this tint, its label the accent mixed into this light */
--sc-button-tint: #0B0C14; /* warm and dark here; a theme usually sets it to its own --sc-ground */
--sc-button-label: #F4F4F4;
--sc-button-fill: 1.7; /* 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: ''; /* NEVER a dark label here: the icons are white, so the text is white too (rule from the owner) */
--sc-label-outline: var(--sc-outline); /* 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: #0B0C14; /* 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: 0; /* 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: 0; /* strength of the light around accents: 0 = none, 1 = this style, 2 = neon */
--sc-caps: none; /* small labels: uppercase | none */
--sc-tracking: .6; /* letter-spacing multiplier */
--sc-weight: 400; /* Jersey 10 has one weight; a faked bold smears the pixels */ /* 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) */
}
/* Jersey 10 has a short x-height: at the kit's pixel sizes it would read small. font-size-adjust scales it to a
normal reading size everywhere at once; titles use Press Start 2P, which is already large, so they opt out. */
[class^="sc-"], [class*=" sc-"] { font-size-adjust:.56; }
.sc-title, .sc-title *, .sc-popup-header > .sc-text { font-size-adjust:none; }
[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:color-mix(in srgb, var(--line) 38%, var(--sc-shade));
--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); }
/* pixel icons stay crisp when a style scales them UP (hero art, shop cards) */
img[src*="/assets/"] { image-rendering:auto; }
/* glyphs:start — generated by tools/build_kit.py from the Icon Library, do not edit */
:where(img[src*="assets/"][src$="/armor.armor--glyph.png"],
img[src*="assets/"][src$="/armor.boots--glyph.png"],
img[src*="assets/"][src$="/armor.gauntlet--glyph.png"],
img[src*="assets/"][src$="/armor.helmet--glyph.png"],
img[src*="assets/"][src$="/board.dice--glyph.png"],
img[src*="assets/"][src$="/board.puzzle--glyph.png"],
img[src*="assets/"][src$="/chess.knight.png"],
img[src*="assets/"][src$="/chess.pawn.png"],
img[src*="assets/"][src$="/chess.queen.png"],
img[src*="assets/"][src$="/chess.rook.png"],
img[src*="assets/"][src$="/emote.cry.png"],
img[src*="assets/"][src$="/emote.female.png"],
img[src*="assets/"][src$="/emote.grin.png"],
img[src*="assets/"][src$="/emote.male.png"],
img[src*="assets/"][src$="/emote.neutral.png"],
img[src*="assets/"][src$="/emote.party.png"],
img[src*="assets/"][src$="/emote.sad.png"],
img[src*="assets/"][src$="/emote.smile.png"],
img[src*="assets/"][src$="/fantasy.guild-banner--glyph.png"],
img[src*="assets/"][src$="/farm.acorn--glyph.png"],
img[src*="assets/"][src$="/farm.leaf--glyph.png"],
img[src*="assets/"][src$="/farm.sun--glyph.png"],
img[src*="assets/"][src$="/farm.tree--glyph.png"],
img[src*="assets/"][src$="/food.cupcake--glyph.png"],
img[src*="assets/"][src$="/food.fish--glyph.png"],
img[src*="assets/"][src$="/food.mushroom--glyph.png"],
img[src*="assets/"][src$="/fx.burst.png"],
img[src*="assets/"][src$="/fx.sparkle.png"],
img[src*="assets/"][src$="/fx.star-four.png"],
img[src*="assets/"][src$="/horror.ghost--glyph-ghost.png"],
img[src*="assets/"][src$="/horror.jack-o-lantern--glyph.png"],
img[src*="assets/"][src$="/horror.spider-web--glyph.png"],
img[src*="assets/"][src$="/item.bandage--glyph.png"],
img[src*="assets/"][src$="/item.bomb--glyph.png"],
img[src*="assets/"][src$="/item.clover--glyph.png"],
img[src*="assets/"][src$="/item.coin--glyph.png"],
img[src*="assets/"][src$="/item.coin-pile--glyph.png"],
img[src*="assets/"][src$="/item.emblem.png"],
img[src*="assets/"][src$="/item.fire--glyph.png"],
img[src*="assets/"][src$="/item.fist.png"],
img[src*="assets/"][src$="/item.flask.png"],
img[src*="assets/"][src$="/item.gem--glyph.png"],
img[src*="assets/"][src$="/item.heart-arrow.png"],
img[src*="assets/"][src$="/item.hood.png"],
img[src*="assets/"][src$="/item.magnet--glyph.png"],
img[src*="assets/"][src$="/item.mask.png"],
img[src*="assets/"][src$="/item.money-bag--glyph.png"],
img[src*="assets/"][src$="/item.muscle.png"],
img[src*="assets/"][src$="/item.piggy-bank--glyph.png"],
img[src*="assets/"][src$="/item.potion--pixel.png"],
img[src*="assets/"][src$="/item.rocket-ship--glyph.png"],
img[src*="assets/"][src$="/item.rosette.png"],
img[src*="assets/"][src$="/item.rosette-star.png"],
img[src*="assets/"][src$="/item.scales--glyph.png"],
img[src*="assets/"][src$="/item.ticket--glyph.png"],
img[src*="assets/"][src$="/magic.castle--glyph.png"],
img[src*="assets/"][src$="/magic.cauldron--glyph.png"],
img[src*="assets/"][src$="/magic.crystal-ball--glyph.png"],
img[src*="assets/"][src$="/magic.feather--glyph.png"],
img[src*="assets/"][src$="/magic.ring--glyph-ring.png"],
img[src*="assets/"][src$="/magic.scroll--glyph.png"],
img[src*="assets/"][src$="/magic.wand--glyph.png"],
img[src*="assets/"][src$="/magic.winged-boots--glyph.png"],
img[src*="assets/"][src$="/magic.wings--glyph.png"],
img[src*="assets/"][src$="/magic.witch-hat--glyph.png"],
img[src*="assets/"][src$="/mining.anvil--glyph.png"],
img[src*="assets/"][src$="/mining.hammer--glyph.png"],
img[src*="assets/"][src$="/mining.pickaxe--glyph.png"],
img[src*="assets/"][src$="/money.baht.png"],
img[src*="assets/"][src$="/money.bitcoin.png"],
img[src*="assets/"][src$="/money.dollar.png"],
img[src*="assets/"][src$="/money.dollar-circle.png"],
img[src*="assets/"][src$="/money.euro.png"],
img[src*="assets/"][src$="/money.euro-circle.png"],
img[src*="assets/"][src$="/money.pound.png"],
img[src*="assets/"][src$="/money.pound-circle.png"],
img[src*="assets/"][src$="/money.ruble.png"],
img[src*="assets/"][src$="/money.won.png"],
img[src*="assets/"][src$="/money.yen.png"],
img[src*="assets/"][src$="/money.yen-circle.png"],
img[src*="assets/"][src$="/pixel.cartridge--glyph-cartridge.png"],
img[src*="assets/"][src$="/pixel.door.png"],
img[src*="assets/"][src$="/pixel.joystick.png"],
img[src*="assets/"][src$="/pixel.ladder.png"],
img[src*="assets/"][src$="/reward.chest--glyph.png"],
img[src*="assets/"][src$="/reward.crown--pixel.png"],
img[src*="assets/"][src$="/reward.gift--glyph.png"],
img[src*="assets/"][src$="/reward.medal--glyph.png"],
img[src*="assets/"][src$="/reward.star--glyph.png"],
img[src*="assets/"][src$="/reward.trophy--glyph.png"],
img[src*="assets/"][src$="/scifi.alien--glyph-alien.png"],
img[src*="assets/"][src$="/scifi.planet--glyph.png"],
img[src*="assets/"][src$="/scifi.starfighter--glyph-ship.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.energy--glyph-bolt-pixel.png"],
img[src*="assets/"][src$="/stat.key--pixel.png"],
img[src*="assets/"][src$="/stat.lap.png"],
img[src*="assets/"][src$="/stat.lives--pixel.png"],
img[src*="assets/"][src$="/stat.moves.png"],
img[src*="assets/"][src$="/stat.score.png"],
img[src*="assets/"][src$="/stat.shield--glyph.png"],
img[src*="assets/"][src$="/stat.speed.png"],
img[src*="assets/"][src$="/stat.time.png"],
img[src*="assets/"][src$="/stat.wanted--glyph.png"],
img[src*="assets/"][src$="/stat.wave.png"],
img[src*="assets/"][src$="/ui.alarm-clock.png"],
img[src*="assets/"][src$="/ui.alert.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.at.png"],
img[src*="assets/"][src$="/ui.back.png"],
img[src*="assets/"][src$="/ui.ban.png"],
img[src*="assets/"][src$="/ui.bank.png"],
img[src*="assets/"][src$="/ui.battery.png"],
img[src*="assets/"][src$="/ui.bluetooth.png"],
img[src*="assets/"][src$="/ui.bluetooth-off.png"],
img[src*="assets/"][src$="/ui.book.png"],
img[src*="assets/"][src$="/ui.bookmark.png"],
img[src*="assets/"][src$="/ui.bookmark-add.png"],
img[src*="assets/"][src$="/ui.bookmark-x.png"],
img[src*="assets/"][src$="/ui.brush.png"],
img[src*="assets/"][src$="/ui.building.png"],
img[src*="assets/"][src$="/ui.calculator.png"],
img[src*="assets/"][src$="/ui.calendar.png"],
img[src*="assets/"][src$="/ui.camera.png"],
img[src*="assets/"][src$="/ui.caret-down.png"],
img[src*="assets/"][src$="/ui.caret-left.png"],
img[src*="assets/"][src$="/ui.caret-left-small.png"],
img[src*="assets/"][src$="/ui.caret-right.png"],
img[src*="assets/"][src$="/ui.caret-up.png"],
img[src*="assets/"][src$="/ui.cart.png"],
img[src*="assets/"][src$="/ui.chart.png"],
img[src*="assets/"][src$="/ui.chart-pie.png"],
img[src*="assets/"][src$="/ui.chat.png"],
img[src*="assets/"][src$="/ui.check.png"],
img[src*="assets/"][src$="/ui.circle.png"],
img[src*="assets/"][src$="/ui.clapper.png"],
img[src*="assets/"][src$="/ui.clock.png"],
img[src*="assets/"][src$="/ui.close.png"],
img[src*="assets/"][src$="/ui.cloud.png"],
img[src*="assets/"][src$="/ui.cloud-save.png"],
img[src*="assets/"][src$="/ui.cloud-thought.png"],
img[src*="assets/"][src$="/ui.column.png"],
img[src*="assets/"][src$="/ui.compass.png"],
img[src*="assets/"][src$="/ui.copy.png"],
img[src*="assets/"][src$="/ui.credit-card.png"],
img[src*="assets/"][src$="/ui.crosshair.png"],
img[src*="assets/"][src$="/ui.cube.png"],
img[src*="assets/"][src$="/ui.dislike.png"],
img[src*="assets/"][src$="/ui.download.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.file.png"],
img[src*="assets/"][src$="/ui.film.png"],
img[src*="assets/"][src$="/ui.filter.png"],
img[src*="assets/"][src$="/ui.flag.png"],
img[src*="assets/"][src$="/ui.flip-h.png"],
img[src*="assets/"][src$="/ui.flip-v.png"],
img[src*="assets/"][src$="/ui.folder.png"],
img[src*="assets/"][src$="/ui.friends.png"],
img[src*="assets/"][src$="/ui.fullscreen.png"],
img[src*="assets/"][src$="/ui.gamepad.png"],
img[src*="assets/"][src$="/ui.graduation.png"],
img[src*="assets/"][src$="/ui.hand.png"],
img[src*="assets/"][src$="/ui.hands-sparkle.png"],
img[src*="assets/"][src$="/ui.hash.png"],
img[src*="assets/"][src$="/ui.head.png"],
img[src*="assets/"][src$="/ui.headphones--glyph.png"],
img[src*="assets/"][src$="/ui.headset.png"],
img[src*="assets/"][src$="/ui.hint.png"],
img[src*="assets/"][src$="/ui.home.png"],
img[src*="assets/"][src$="/ui.hourglass.png"],
img[src*="assets/"][src$="/ui.id-card.png"],
img[src*="assets/"][src$="/ui.image.png"],
img[src*="assets/"][src$="/ui.infinity.png"],
img[src*="assets/"][src$="/ui.info.png"],
img[src*="assets/"][src$="/ui.inventory.png"],
img[src*="assets/"][src$="/ui.invite.png"],
img[src*="assets/"][src$="/ui.jump.png"],
img[src*="assets/"][src$="/ui.keyboard.png"],
img[src*="assets/"][src$="/ui.language.png"],
img[src*="assets/"][src$="/ui.layer-add.png"],
img[src*="assets/"][src$="/ui.layers.png"],
img[src*="assets/"][src$="/ui.layers-alt.png"],
img[src*="assets/"][src$="/ui.layout.png"],
img[src*="assets/"][src$="/ui.leaderboard.png"],
img[src*="assets/"][src$="/ui.letters.png"],
img[src*="assets/"][src$="/ui.levels.png"],
img[src*="assets/"][src$="/ui.like.png"],
img[src*="assets/"][src$="/ui.link.png"],
img[src*="assets/"][src$="/ui.link-alt.png"],
img[src*="assets/"][src$="/ui.list.png"],
img[src*="assets/"][src$="/ui.lock.png"],
img[src*="assets/"][src$="/ui.login.png"],
img[src*="assets/"][src$="/ui.luggage.png"],
img[src*="assets/"][src$="/ui.mail.png"],
img[src*="assets/"][src$="/ui.map.png"],
img[src*="assets/"][src$="/ui.megaphone--glyph.png"],
img[src*="assets/"][src$="/ui.menu.png"],
img[src*="assets/"][src$="/ui.mic--glyph.png"],
img[src*="assets/"][src$="/ui.mic-off.png"],
img[src*="assets/"][src$="/ui.minimize.png"],
img[src*="assets/"][src$="/ui.minus.png"],
img[src*="assets/"][src$="/ui.monitor.png"],
img[src*="assets/"][src$="/ui.more.png"],
img[src*="assets/"][src$="/ui.move.png"],
img[src*="assets/"][src$="/ui.music.png"],
img[src*="assets/"][src$="/ui.music-off.png"],
img[src*="assets/"][src$="/ui.newspaper.png"],
img[src*="assets/"][src$="/ui.notification.png"],
img[src*="assets/"][src$="/ui.notification-off.png"],
img[src*="assets/"][src$="/ui.pause.png"],
img[src*="assets/"][src$="/ui.phone.png"],
img[src*="assets/"][src$="/ui.phone-call.png"],
img[src*="assets/"][src$="/ui.pin.png"],
img[src*="assets/"][src$="/ui.play.png"],
img[src*="assets/"][src$="/ui.plug.png"],
img[src*="assets/"][src$="/ui.plus.png"],
img[src*="assets/"][src$="/ui.power.png"],
img[src*="assets/"][src$="/ui.printer.png"],
img[src*="assets/"][src$="/ui.profile.png"],
img[src*="assets/"][src$="/ui.qr.png"],
img[src*="assets/"][src$="/ui.quest.png"],
img[src*="assets/"][src$="/ui.question.png"],
img[src*="assets/"][src$="/ui.quote.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.repeat.png"],
img[src*="assets/"][src$="/ui.reply.png"],
img[src*="assets/"][src$="/ui.restart.png"],
img[src*="assets/"][src$="/ui.rewind.png"],
img[src*="assets/"][src$="/ui.sale.png"],
img[src*="assets/"][src$="/ui.scan.png"],
img[src*="assets/"][src$="/ui.scissors.png"],
img[src*="assets/"][src$="/ui.screwdriver.png"],
img[src*="assets/"][src$="/ui.search.png"],
img[src*="assets/"][src$="/ui.send.png"],
img[src*="assets/"][src$="/ui.settings.png"],
img[src*="assets/"][src$="/ui.share.png"],
img[src*="assets/"][src$="/ui.shelf.png"],
img[src*="assets/"][src$="/ui.shop.png"],
img[src*="assets/"][src$="/ui.shuffle.png"],
img[src*="assets/"][src$="/ui.skip-back.png"],
img[src*="assets/"][src$="/ui.skull.png"],
img[src*="assets/"][src$="/ui.skull--pixel.png"],
img[src*="assets/"][src$="/ui.sleep.png"],
img[src*="assets/"][src$="/ui.sliders.png"],
img[src*="assets/"][src$="/ui.sliders-v.png"],
img[src*="assets/"][src$="/ui.sort-down.png"],
img[src*="assets/"][src$="/ui.sort-up.png"],
img[src*="assets/"][src$="/ui.sound.png"],
img[src*="assets/"][src$="/ui.sound-off.png"],
img[src*="assets/"][src$="/ui.stop.png"],
img[src*="assets/"][src$="/ui.swap-h.png"],
img[src*="assets/"][src$="/ui.swap-v.png"],
img[src*="assets/"][src$="/ui.target.png"],
img[src*="assets/"][src$="/ui.toggle.png"],
img[src*="assets/"][src$="/ui.trash.png"],
img[src*="assets/"][src$="/ui.tv.png"],
img[src*="assets/"][src$="/ui.undo.png"],
img[src*="assets/"][src$="/ui.unlock.png"],
img[src*="assets/"][src$="/ui.upload.png"],
img[src*="assets/"][src$="/ui.vibrate.png"],
img[src*="assets/"][src$="/ui.video.png"],
img[src*="assets/"][src$="/ui.wallet.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"],
img[src*="assets/"][src$="/vehicle.plane--glyph.png"],
img[src*="assets/"][src$="/weapon.arrow--glyph.png"],
img[src*="assets/"][src$="/weapon.axe--glyph.png"],
img[src*="assets/"][src$="/weapon.axe-double--glyph.png"],
img[src*="assets/"][src$="/weapon.bow--glyph.png"],
img[src*="assets/"][src$="/weapon.dagger--glyph.png"],
img[src*="assets/"][src$="/weapon.sword--glyph.png"],
img[src*="assets/"][src$="/weapon.swords-crossed--glyph.png"],
img[src*="assets/"][src$="/weapon.whip--glyph.png"],
img[src*="assets/"][src$="/world.anchor.png"],
img[src*="assets/"][src$="/world.beetle.png"],
img[src*="assets/"][src$="/world.bug.png"],
img[src*="assets/"][src$="/world.drop.png"],
img[src*="assets/"][src$="/world.horseshoe.png"],
img[src*="assets/"][src$="/world.lifebuoy.png"],
img[src*="assets/"][src$="/world.moon.png"],
img[src*="assets/"][src$="/world.mountain.png"],
img[src*="assets/"][src$="/world.mountains.png"],
img[src*="assets/"][src$="/world.paw.png"],
img[src*="assets/"][src$="/world.pinwheel.png"],
img[src*="assets/"][src$="/world.snowflake.png"],
img[src*="assets/"][src$="/world.snowglobe.png"],
img[src*="assets/"][src$="/world.tornado.png"],
img[src*="assets/"][src$="/world.yin-yang.png"]) { filter:var(--sc-glyph-filter); }
.sc-button > :where(img[src*="assets/"][src$="/armor.armor--glyph.png"],
img[src*="assets/"][src$="/armor.boots--glyph.png"],
img[src*="assets/"][src$="/armor.gauntlet--glyph.png"],
img[src*="assets/"][src$="/armor.helmet--glyph.png"],
img[src*="assets/"][src$="/board.dice--glyph.png"],
img[src*="assets/"][src$="/board.puzzle--glyph.png"],
img[src*="assets/"][src$="/chess.knight.png"],
img[src*="assets/"][src$="/chess.pawn.png"],
img[src*="assets/"][src$="/chess.queen.png"],
img[src*="assets/"][src$="/chess.rook.png"],
img[src*="assets/"][src$="/emote.cry.png"],
img[src*="assets/"][src$="/emote.female.png"],
img[src*="assets/"][src$="/emote.grin.png"],
img[src*="assets/"][src$="/emote.male.png"],
img[src*="assets/"][src$="/emote.neutral.png"],
img[src*="assets/"][src$="/emote.party.png"],
img[src*="assets/"][src$="/emote.sad.png"],
img[src*="assets/"][src$="/emote.smile.png"],
img[src*="assets/"][src$="/fantasy.guild-banner--glyph.png"],
img[src*="assets/"][src$="/farm.acorn--glyph.png"],
img[src*="assets/"][src$="/farm.leaf--glyph.png"],
img[src*="assets/"][src$="/farm.sun--glyph.png"],
img[src*="assets/"][src$="/farm.tree--glyph.png"],
img[src*="assets/"][src$="/food.cupcake--glyph.png"],
img[src*="assets/"][src$="/food.fish--glyph.png"],
img[src*="assets/"][src$="/food.mushroom--glyph.png"],
img[src*="assets/"][src$="/fx.burst.png"],
img[src*="assets/"][src$="/fx.sparkle.png"],
img[src*="assets/"][src$="/fx.star-four.png"],
img[src*="assets/"][src$="/horror.ghost--glyph-ghost.png"],
img[src*="assets/"][src$="/horror.jack-o-lantern--glyph.png"],
img[src*="assets/"][src$="/horror.spider-web--glyph.png"],
img[src*="assets/"][src$="/item.bandage--glyph.png"],
img[src*="assets/"][src$="/item.bomb--glyph.png"],
img[src*="assets/"][src$="/item.clover--glyph.png"],
img[src*="assets/"][src$="/item.coin--glyph.png"],
img[src*="assets/"][src$="/item.coin-pile--glyph.png"],
img[src*="assets/"][src$="/item.emblem.png"],
img[src*="assets/"][src$="/item.fire--glyph.png"],
img[src*="assets/"][src$="/item.fist.png"],
img[src*="assets/"][src$="/item.flask.png"],
img[src*="assets/"][src$="/item.gem--glyph.png"],
img[src*="assets/"][src$="/item.heart-arrow.png"],
img[src*="assets/"][src$="/item.hood.png"],
img[src*="assets/"][src$="/item.magnet--glyph.png"],
img[src*="assets/"][src$="/item.mask.png"],
img[src*="assets/"][src$="/item.money-bag--glyph.png"],
img[src*="assets/"][src$="/item.muscle.png"],
img[src*="assets/"][src$="/item.piggy-bank--glyph.png"],
img[src*="assets/"][src$="/item.potion--pixel.png"],
img[src*="assets/"][src$="/item.rocket-ship--glyph.png"],
img[src*="assets/"][src$="/item.rosette.png"],
img[src*="assets/"][src$="/item.rosette-star.png"],
img[src*="assets/"][src$="/item.scales--glyph.png"],
img[src*="assets/"][src$="/item.ticket--glyph.png"],
img[src*="assets/"][src$="/magic.castle--glyph.png"],
img[src*="assets/"][src$="/magic.cauldron--glyph.png"],
img[src*="assets/"][src$="/magic.crystal-ball--glyph.png"],
img[src*="assets/"][src$="/magic.feather--glyph.png"],
img[src*="assets/"][src$="/magic.ring--glyph-ring.png"],
img[src*="assets/"][src$="/magic.scroll--glyph.png"],
img[src*="assets/"][src$="/magic.wand--glyph.png"],
img[src*="assets/"][src$="/magic.winged-boots--glyph.png"],
img[src*="assets/"][src$="/magic.wings--glyph.png"],
img[src*="assets/"][src$="/magic.witch-hat--glyph.png"],
img[src*="assets/"][src$="/mining.anvil--glyph.png"],
img[src*="assets/"][src$="/mining.hammer--glyph.png"],
img[src*="assets/"][src$="/mining.pickaxe--glyph.png"],
img[src*="assets/"][src$="/money.baht.png"],
img[src*="assets/"][src$="/money.bitcoin.png"],
img[src*="assets/"][src$="/money.dollar.png"],
img[src*="assets/"][src$="/money.dollar-circle.png"],
img[src*="assets/"][src$="/money.euro.png"],
img[src*="assets/"][src$="/money.euro-circle.png"],
img[src*="assets/"][src$="/money.pound.png"],
img[src*="assets/"][src$="/money.pound-circle.png"],
img[src*="assets/"][src$="/money.ruble.png"],
img[src*="assets/"][src$="/money.won.png"],
img[src*="assets/"][src$="/money.yen.png"],
img[src*="assets/"][src$="/money.yen-circle.png"],
img[src*="assets/"][src$="/pixel.cartridge--glyph-cartridge.png"],
img[src*="assets/"][src$="/pixel.door.png"],
img[src*="assets/"][src$="/pixel.joystick.png"],
img[src*="assets/"][src$="/pixel.ladder.png"],
img[src*="assets/"][src$="/reward.chest--glyph.png"],
img[src*="assets/"][src$="/reward.crown--pixel.png"],
img[src*="assets/"][src$="/reward.gift--glyph.png"],
img[src*="assets/"][src$="/reward.medal--glyph.png"],
img[src*="assets/"][src$="/reward.star--glyph.png"],
img[src*="assets/"][src$="/reward.trophy--glyph.png"],
img[src*="assets/"][src$="/scifi.alien--glyph-alien.png"],
img[src*="assets/"][src$="/scifi.planet--glyph.png"],
img[src*="assets/"][src$="/scifi.starfighter--glyph-ship.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.energy--glyph-bolt-pixel.png"],
img[src*="assets/"][src$="/stat.key--pixel.png"],
img[src*="assets/"][src$="/stat.lap.png"],
img[src*="assets/"][src$="/stat.lives--pixel.png"],
img[src*="assets/"][src$="/stat.moves.png"],
img[src*="assets/"][src$="/stat.score.png"],
img[src*="assets/"][src$="/stat.shield--glyph.png"],
img[src*="assets/"][src$="/stat.speed.png"],
img[src*="assets/"][src$="/stat.time.png"],
img[src*="assets/"][src$="/stat.wanted--glyph.png"],
img[src*="assets/"][src$="/stat.wave.png"],
img[src*="assets/"][src$="/ui.alarm-clock.png"],
img[src*="assets/"][src$="/ui.alert.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.at.png"],
img[src*="assets/"][src$="/ui.back.png"],
img[src*="assets/"][src$="/ui.ban.png"],
img[src*="assets/"][src$="/ui.bank.png"],
img[src*="assets/"][src$="/ui.battery.png"],
img[src*="assets/"][src$="/ui.bluetooth.png"],
img[src*="assets/"][src$="/ui.bluetooth-off.png"],
img[src*="assets/"][src$="/ui.book.png"],
img[src*="assets/"][src$="/ui.bookmark.png"],
img[src*="assets/"][src$="/ui.bookmark-add.png"],
img[src*="assets/"][src$="/ui.bookmark-x.png"],
img[src*="assets/"][src$="/ui.brush.png"],
img[src*="assets/"][src$="/ui.building.png"],
img[src*="assets/"][src$="/ui.calculator.png"],
img[src*="assets/"][src$="/ui.calendar.png"],
img[src*="assets/"][src$="/ui.camera.png"],
img[src*="assets/"][src$="/ui.caret-down.png"],
img[src*="assets/"][src$="/ui.caret-left.png"],
img[src*="assets/"][src$="/ui.caret-left-small.png"],
img[src*="assets/"][src$="/ui.caret-right.png"],
img[src*="assets/"][src$="/ui.caret-up.png"],
img[src*="assets/"][src$="/ui.cart.png"],
img[src*="assets/"][src$="/ui.chart.png"],
img[src*="assets/"][src$="/ui.chart-pie.png"],
img[src*="assets/"][src$="/ui.chat.png"],
img[src*="assets/"][src$="/ui.check.png"],
img[src*="assets/"][src$="/ui.circle.png"],
img[src*="assets/"][src$="/ui.clapper.png"],
img[src*="assets/"][src$="/ui.clock.png"],
img[src*="assets/"][src$="/ui.close.png"],
img[src*="assets/"][src$="/ui.cloud.png"],
img[src*="assets/"][src$="/ui.cloud-save.png"],
img[src*="assets/"][src$="/ui.cloud-thought.png"],
img[src*="assets/"][src$="/ui.column.png"],
img[src*="assets/"][src$="/ui.compass.png"],
img[src*="assets/"][src$="/ui.copy.png"],
img[src*="assets/"][src$="/ui.credit-card.png"],
img[src*="assets/"][src$="/ui.crosshair.png"],
img[src*="assets/"][src$="/ui.cube.png"],
img[src*="assets/"][src$="/ui.dislike.png"],
img[src*="assets/"][src$="/ui.download.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.file.png"],
img[src*="assets/"][src$="/ui.film.png"],
img[src*="assets/"][src$="/ui.filter.png"],
img[src*="assets/"][src$="/ui.flag.png"],
img[src*="assets/"][src$="/ui.flip-h.png"],
img[src*="assets/"][src$="/ui.flip-v.png"],
img[src*="assets/"][src$="/ui.folder.png"],
img[src*="assets/"][src$="/ui.friends.png"],
img[src*="assets/"][src$="/ui.fullscreen.png"],
img[src*="assets/"][src$="/ui.gamepad.png"],
img[src*="assets/"][src$="/ui.graduation.png"],
img[src*="assets/"][src$="/ui.hand.png"],
img[src*="assets/"][src$="/ui.hands-sparkle.png"],
img[src*="assets/"][src$="/ui.hash.png"],
img[src*="assets/"][src$="/ui.head.png"],
img[src*="assets/"][src$="/ui.headphones--glyph.png"],
img[src*="assets/"][src$="/ui.headset.png"],
img[src*="assets/"][src$="/ui.hint.png"],
img[src*="assets/"][src$="/ui.home.png"],
img[src*="assets/"][src$="/ui.hourglass.png"],
img[src*="assets/"][src$="/ui.id-card.png"],
img[src*="assets/"][src$="/ui.image.png"],
img[src*="assets/"][src$="/ui.infinity.png"],
img[src*="assets/"][src$="/ui.info.png"],
img[src*="assets/"][src$="/ui.inventory.png"],
img[src*="assets/"][src$="/ui.invite.png"],
img[src*="assets/"][src$="/ui.jump.png"],
img[src*="assets/"][src$="/ui.keyboard.png"],
img[src*="assets/"][src$="/ui.language.png"],
img[src*="assets/"][src$="/ui.layer-add.png"],
img[src*="assets/"][src$="/ui.layers.png"],
img[src*="assets/"][src$="/ui.layers-alt.png"],
img[src*="assets/"][src$="/ui.layout.png"],
img[src*="assets/"][src$="/ui.leaderboard.png"],
img[src*="assets/"][src$="/ui.letters.png"],
img[src*="assets/"][src$="/ui.levels.png"],
img[src*="assets/"][src$="/ui.like.png"],
img[src*="assets/"][src$="/ui.link.png"],
img[src*="assets/"][src$="/ui.link-alt.png"],
img[src*="assets/"][src$="/ui.list.png"],
img[src*="assets/"][src$="/ui.lock.png"],
img[src*="assets/"][src$="/ui.login.png"],
img[src*="assets/"][src$="/ui.luggage.png"],
img[src*="assets/"][src$="/ui.mail.png"],
img[src*="assets/"][src$="/ui.map.png"],
img[src*="assets/"][src$="/ui.megaphone--glyph.png"],
img[src*="assets/"][src$="/ui.menu.png"],
img[src*="assets/"][src$="/ui.mic--glyph.png"],
img[src*="assets/"][src$="/ui.mic-off.png"],
img[src*="assets/"][src$="/ui.minimize.png"],
img[src*="assets/"][src$="/ui.minus.png"],
img[src*="assets/"][src$="/ui.monitor.png"],
img[src*="assets/"][src$="/ui.more.png"],
img[src*="assets/"][src$="/ui.move.png"],
img[src*="assets/"][src$="/ui.music.png"],
img[src*="assets/"][src$="/ui.music-off.png"],
img[src*="assets/"][src$="/ui.newspaper.png"],
img[src*="assets/"][src$="/ui.notification.png"],
img[src*="assets/"][src$="/ui.notification-off.png"],
img[src*="assets/"][src$="/ui.pause.png"],
img[src*="assets/"][src$="/ui.phone.png"],
img[src*="assets/"][src$="/ui.phone-call.png"],
img[src*="assets/"][src$="/ui.pin.png"],
img[src*="assets/"][src$="/ui.play.png"],
img[src*="assets/"][src$="/ui.plug.png"],
img[src*="assets/"][src$="/ui.plus.png"],
img[src*="assets/"][src$="/ui.power.png"],
img[src*="assets/"][src$="/ui.printer.png"],
img[src*="assets/"][src$="/ui.profile.png"],
img[src*="assets/"][src$="/ui.qr.png"],
img[src*="assets/"][src$="/ui.quest.png"],
img[src*="assets/"][src$="/ui.question.png"],
img[src*="assets/"][src$="/ui.quote.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.repeat.png"],
img[src*="assets/"][src$="/ui.reply.png"],
img[src*="assets/"][src$="/ui.restart.png"],
img[src*="assets/"][src$="/ui.rewind.png"],
img[src*="assets/"][src$="/ui.sale.png"],
img[src*="assets/"][src$="/ui.scan.png"],
img[src*="assets/"][src$="/ui.scissors.png"],
img[src*="assets/"][src$="/ui.screwdriver.png"],
img[src*="assets/"][src$="/ui.search.png"],
img[src*="assets/"][src$="/ui.send.png"],
img[src*="assets/"][src$="/ui.settings.png"],
img[src*="assets/"][src$="/ui.share.png"],
img[src*="assets/"][src$="/ui.shelf.png"],
img[src*="assets/"][src$="/ui.shop.png"],
img[src*="assets/"][src$="/ui.shuffle.png"],
img[src*="assets/"][src$="/ui.skip-back.png"],
img[src*="assets/"][src$="/ui.skull.png"],
img[src*="assets/"][src$="/ui.skull--pixel.png"],
img[src*="assets/"][src$="/ui.sleep.png"],
img[src*="assets/"][src$="/ui.sliders.png"],
img[src*="assets/"][src$="/ui.sliders-v.png"],
img[src*="assets/"][src$="/ui.sort-down.png"],
img[src*="assets/"][src$="/ui.sort-up.png"],
img[src*="assets/"][src$="/ui.sound.png"],
img[src*="assets/"][src$="/ui.sound-off.png"],
img[src*="assets/"][src$="/ui.stop.png"],
img[src*="assets/"][src$="/ui.swap-h.png"],
img[src*="assets/"][src$="/ui.swap-v.png"],
img[src*="assets/"][src$="/ui.target.png"],
img[src*="assets/"][src$="/ui.toggle.png"],
img[src*="assets/"][src$="/ui.trash.png"],
img[src*="assets/"][src$="/ui.tv.png"],
img[src*="assets/"][src$="/ui.undo.png"],
img[src*="assets/"][src$="/ui.unlock.png"],
img[src*="assets/"][src$="/ui.upload.png"],
img[src*="assets/"][src$="/ui.vibrate.png"],
img[src*="assets/"][src$="/ui.video.png"],
img[src*="assets/"][src$="/ui.wallet.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"],
img[src*="assets/"][src$="/vehicle.plane--glyph.png"],
img[src*="assets/"][src$="/weapon.arrow--glyph.png"],
img[src*="assets/"][src$="/weapon.axe--glyph.png"],
img[src*="assets/"][src$="/weapon.axe-double--glyph.png"],
img[src*="assets/"][src$="/weapon.bow--glyph.png"],
img[src*="assets/"][src$="/weapon.dagger--glyph.png"],
img[src*="assets/"][src$="/weapon.sword--glyph.png"],
img[src*="assets/"][src$="/weapon.swords-crossed--glyph.png"],
img[src*="assets/"][src$="/weapon.whip--glyph.png"],
img[src*="assets/"][src$="/world.anchor.png"],
img[src*="assets/"][src$="/world.beetle.png"],
img[src*="assets/"][src$="/world.bug.png"],
img[src*="assets/"][src$="/world.drop.png"],
img[src*="assets/"][src$="/world.horseshoe.png"],
img[src*="assets/"][src$="/world.lifebuoy.png"],
img[src*="assets/"][src$="/world.moon.png"],
img[src*="assets/"][src$="/world.mountain.png"],
img[src*="assets/"][src$="/world.mountains.png"],
img[src*="assets/"][src$="/world.paw.png"],
img[src*="assets/"][src$="/world.pinwheel.png"],
img[src*="assets/"][src$="/world.snowflake.png"],
img[src*="assets/"][src$="/world.snowglobe.png"],
img[src*="assets/"][src$="/world.tornado.png"],
img[src*="assets/"][src$="/world.yin-yang.png"]),
:is(.sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"]) > :where(img[src*="assets/"][src$="/armor.armor--glyph.png"],
img[src*="assets/"][src$="/armor.boots--glyph.png"],
img[src*="assets/"][src$="/armor.gauntlet--glyph.png"],
img[src*="assets/"][src$="/armor.helmet--glyph.png"],
img[src*="assets/"][src$="/board.dice--glyph.png"],
img[src*="assets/"][src$="/board.puzzle--glyph.png"],
img[src*="assets/"][src$="/chess.knight.png"],
img[src*="assets/"][src$="/chess.pawn.png"],
img[src*="assets/"][src$="/chess.queen.png"],
img[src*="assets/"][src$="/chess.rook.png"],
img[src*="assets/"][src$="/emote.cry.png"],
img[src*="assets/"][src$="/emote.female.png"],
img[src*="assets/"][src$="/emote.grin.png"],
img[src*="assets/"][src$="/emote.male.png"],
img[src*="assets/"][src$="/emote.neutral.png"],
img[src*="assets/"][src$="/emote.party.png"],
img[src*="assets/"][src$="/emote.sad.png"],
img[src*="assets/"][src$="/emote.smile.png"],
img[src*="assets/"][src$="/fantasy.guild-banner--glyph.png"],
img[src*="assets/"][src$="/farm.acorn--glyph.png"],
img[src*="assets/"][src$="/farm.leaf--glyph.png"],
img[src*="assets/"][src$="/farm.sun--glyph.png"],
img[src*="assets/"][src$="/farm.tree--glyph.png"],
img[src*="assets/"][src$="/food.cupcake--glyph.png"],
img[src*="assets/"][src$="/food.fish--glyph.png"],
img[src*="assets/"][src$="/food.mushroom--glyph.png"],
img[src*="assets/"][src$="/fx.burst.png"],
img[src*="assets/"][src$="/fx.sparkle.png"],
img[src*="assets/"][src$="/fx.star-four.png"],
img[src*="assets/"][src$="/horror.ghost--glyph-ghost.png"],
img[src*="assets/"][src$="/horror.jack-o-lantern--glyph.png"],
img[src*="assets/"][src$="/horror.spider-web--glyph.png"],
img[src*="assets/"][src$="/item.bandage--glyph.png"],
img[src*="assets/"][src$="/item.bomb--glyph.png"],
img[src*="assets/"][src$="/item.clover--glyph.png"],
img[src*="assets/"][src$="/item.coin--glyph.png"],
img[src*="assets/"][src$="/item.coin-pile--glyph.png"],
img[src*="assets/"][src$="/item.emblem.png"],
img[src*="assets/"][src$="/item.fire--glyph.png"],
img[src*="assets/"][src$="/item.fist.png"],
img[src*="assets/"][src$="/item.flask.png"],
img[src*="assets/"][src$="/item.gem--glyph.png"],
img[src*="assets/"][src$="/item.heart-arrow.png"],
img[src*="assets/"][src$="/item.hood.png"],
img[src*="assets/"][src$="/item.magnet--glyph.png"],
img[src*="assets/"][src$="/item.mask.png"],
img[src*="assets/"][src$="/item.money-bag--glyph.png"],
img[src*="assets/"][src$="/item.muscle.png"],
img[src*="assets/"][src$="/item.piggy-bank--glyph.png"],
img[src*="assets/"][src$="/item.potion--pixel.png"],
img[src*="assets/"][src$="/item.rocket-ship--glyph.png"],
img[src*="assets/"][src$="/item.rosette.png"],
img[src*="assets/"][src$="/item.rosette-star.png"],
img[src*="assets/"][src$="/item.scales--glyph.png"],
img[src*="assets/"][src$="/item.ticket--glyph.png"],
img[src*="assets/"][src$="/magic.castle--glyph.png"],
img[src*="assets/"][src$="/magic.cauldron--glyph.png"],
img[src*="assets/"][src$="/magic.crystal-ball--glyph.png"],
img[src*="assets/"][src$="/magic.feather--glyph.png"],
img[src*="assets/"][src$="/magic.ring--glyph-ring.png"],
img[src*="assets/"][src$="/magic.scroll--glyph.png"],
img[src*="assets/"][src$="/magic.wand--glyph.png"],
img[src*="assets/"][src$="/magic.winged-boots--glyph.png"],
img[src*="assets/"][src$="/magic.wings--glyph.png"],
img[src*="assets/"][src$="/magic.witch-hat--glyph.png"],
img[src*="assets/"][src$="/mining.anvil--glyph.png"],
img[src*="assets/"][src$="/mining.hammer--glyph.png"],
img[src*="assets/"][src$="/mining.pickaxe--glyph.png"],
img[src*="assets/"][src$="/money.baht.png"],
img[src*="assets/"][src$="/money.bitcoin.png"],
img[src*="assets/"][src$="/money.dollar.png"],
img[src*="assets/"][src$="/money.dollar-circle.png"],
img[src*="assets/"][src$="/money.euro.png"],
img[src*="assets/"][src$="/money.euro-circle.png"],
img[src*="assets/"][src$="/money.pound.png"],
img[src*="assets/"][src$="/money.pound-circle.png"],
img[src*="assets/"][src$="/money.ruble.png"],
img[src*="assets/"][src$="/money.won.png"],
img[src*="assets/"][src$="/money.yen.png"],
img[src*="assets/"][src$="/money.yen-circle.png"],
img[src*="assets/"][src$="/pixel.cartridge--glyph-cartridge.png"],
img[src*="assets/"][src$="/pixel.door.png"],
img[src*="assets/"][src$="/pixel.joystick.png"],
img[src*="assets/"][src$="/pixel.ladder.png"],
img[src*="assets/"][src$="/reward.chest--glyph.png"],
img[src*="assets/"][src$="/reward.crown--pixel.png"],
img[src*="assets/"][src$="/reward.gift--glyph.png"],
img[src*="assets/"][src$="/reward.medal--glyph.png"],
img[src*="assets/"][src$="/reward.star--glyph.png"],
img[src*="assets/"][src$="/reward.trophy--glyph.png"],
img[src*="assets/"][src$="/scifi.alien--glyph-alien.png"],
img[src*="assets/"][src$="/scifi.planet--glyph.png"],
img[src*="assets/"][src$="/scifi.starfighter--glyph-ship.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.energy--glyph-bolt-pixel.png"],
img[src*="assets/"][src$="/stat.key--pixel.png"],
img[src*="assets/"][src$="/stat.lap.png"],
img[src*="assets/"][src$="/stat.lives--pixel.png"],
img[src*="assets/"][src$="/stat.moves.png"],
img[src*="assets/"][src$="/stat.score.png"],
img[src*="assets/"][src$="/stat.shield--glyph.png"],
img[src*="assets/"][src$="/stat.speed.png"],
img[src*="assets/"][src$="/stat.time.png"],
img[src*="assets/"][src$="/stat.wanted--glyph.png"],
img[src*="assets/"][src$="/stat.wave.png"],
img[src*="assets/"][src$="/ui.alarm-clock.png"],
img[src*="assets/"][src$="/ui.alert.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.at.png"],
img[src*="assets/"][src$="/ui.back.png"],
img[src*="assets/"][src$="/ui.ban.png"],
img[src*="assets/"][src$="/ui.bank.png"],
img[src*="assets/"][src$="/ui.battery.png"],
img[src*="assets/"][src$="/ui.bluetooth.png"],
img[src*="assets/"][src$="/ui.bluetooth-off.png"],
img[src*="assets/"][src$="/ui.book.png"],
img[src*="assets/"][src$="/ui.bookmark.png"],
img[src*="assets/"][src$="/ui.bookmark-add.png"],
img[src*="assets/"][src$="/ui.bookmark-x.png"],
img[src*="assets/"][src$="/ui.brush.png"],
img[src*="assets/"][src$="/ui.building.png"],
img[src*="assets/"][src$="/ui.calculator.png"],
img[src*="assets/"][src$="/ui.calendar.png"],
img[src*="assets/"][src$="/ui.camera.png"],
img[src*="assets/"][src$="/ui.caret-down.png"],
img[src*="assets/"][src$="/ui.caret-left.png"],
img[src*="assets/"][src$="/ui.caret-left-small.png"],
img[src*="assets/"][src$="/ui.caret-right.png"],
img[src*="assets/"][src$="/ui.caret-up.png"],
img[src*="assets/"][src$="/ui.cart.png"],
img[src*="assets/"][src$="/ui.chart.png"],
img[src*="assets/"][src$="/ui.chart-pie.png"],
img[src*="assets/"][src$="/ui.chat.png"],
img[src*="assets/"][src$="/ui.check.png"],
img[src*="assets/"][src$="/ui.circle.png"],
img[src*="assets/"][src$="/ui.clapper.png"],
img[src*="assets/"][src$="/ui.clock.png"],
img[src*="assets/"][src$="/ui.close.png"],
img[src*="assets/"][src$="/ui.cloud.png"],
img[src*="assets/"][src$="/ui.cloud-save.png"],
img[src*="assets/"][src$="/ui.cloud-thought.png"],
img[src*="assets/"][src$="/ui.column.png"],
img[src*="assets/"][src$="/ui.compass.png"],
img[src*="assets/"][src$="/ui.copy.png"],
img[src*="assets/"][src$="/ui.credit-card.png"],
img[src*="assets/"][src$="/ui.crosshair.png"],
img[src*="assets/"][src$="/ui.cube.png"],
img[src*="assets/"][src$="/ui.dislike.png"],
img[src*="assets/"][src$="/ui.download.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.file.png"],
img[src*="assets/"][src$="/ui.film.png"],
img[src*="assets/"][src$="/ui.filter.png"],
img[src*="assets/"][src$="/ui.flag.png"],
img[src*="assets/"][src$="/ui.flip-h.png"],
img[src*="assets/"][src$="/ui.flip-v.png"],
img[src*="assets/"][src$="/ui.folder.png"],
img[src*="assets/"][src$="/ui.friends.png"],
img[src*="assets/"][src$="/ui.fullscreen.png"],
img[src*="assets/"][src$="/ui.gamepad.png"],
img[src*="assets/"][src$="/ui.graduation.png"],
img[src*="assets/"][src$="/ui.hand.png"],
img[src*="assets/"][src$="/ui.hands-sparkle.png"],
img[src*="assets/"][src$="/ui.hash.png"],
img[src*="assets/"][src$="/ui.head.png"],
img[src*="assets/"][src$="/ui.headphones--glyph.png"],
img[src*="assets/"][src$="/ui.headset.png"],
img[src*="assets/"][src$="/ui.hint.png"],
img[src*="assets/"][src$="/ui.home.png"],
img[src*="assets/"][src$="/ui.hourglass.png"],
img[src*="assets/"][src$="/ui.id-card.png"],
img[src*="assets/"][src$="/ui.image.png"],
img[src*="assets/"][src$="/ui.infinity.png"],
img[src*="assets/"][src$="/ui.info.png"],
img[src*="assets/"][src$="/ui.inventory.png"],
img[src*="assets/"][src$="/ui.invite.png"],
img[src*="assets/"][src$="/ui.jump.png"],
img[src*="assets/"][src$="/ui.keyboard.png"],
img[src*="assets/"][src$="/ui.language.png"],
img[src*="assets/"][src$="/ui.layer-add.png"],
img[src*="assets/"][src$="/ui.layers.png"],
img[src*="assets/"][src$="/ui.layers-alt.png"],
img[src*="assets/"][src$="/ui.layout.png"],
img[src*="assets/"][src$="/ui.leaderboard.png"],
img[src*="assets/"][src$="/ui.letters.png"],
img[src*="assets/"][src$="/ui.levels.png"],
img[src*="assets/"][src$="/ui.like.png"],
img[src*="assets/"][src$="/ui.link.png"],
img[src*="assets/"][src$="/ui.link-alt.png"],
img[src*="assets/"][src$="/ui.list.png"],
img[src*="assets/"][src$="/ui.lock.png"],
img[src*="assets/"][src$="/ui.login.png"],
img[src*="assets/"][src$="/ui.luggage.png"],
img[src*="assets/"][src$="/ui.mail.png"],
img[src*="assets/"][src$="/ui.map.png"],
img[src*="assets/"][src$="/ui.megaphone--glyph.png"],
img[src*="assets/"][src$="/ui.menu.png"],
img[src*="assets/"][src$="/ui.mic--glyph.png"],
img[src*="assets/"][src$="/ui.mic-off.png"],
img[src*="assets/"][src$="/ui.minimize.png"],
img[src*="assets/"][src$="/ui.minus.png"],
img[src*="assets/"][src$="/ui.monitor.png"],
img[src*="assets/"][src$="/ui.more.png"],
img[src*="assets/"][src$="/ui.move.png"],
img[src*="assets/"][src$="/ui.music.png"],
img[src*="assets/"][src$="/ui.music-off.png"],
img[src*="assets/"][src$="/ui.newspaper.png"],
img[src*="assets/"][src$="/ui.notification.png"],
img[src*="assets/"][src$="/ui.notification-off.png"],
img[src*="assets/"][src$="/ui.pause.png"],
img[src*="assets/"][src$="/ui.phone.png"],
img[src*="assets/"][src$="/ui.phone-call.png"],
img[src*="assets/"][src$="/ui.pin.png"],
img[src*="assets/"][src$="/ui.play.png"],
img[src*="assets/"][src$="/ui.plug.png"],
img[src*="assets/"][src$="/ui.plus.png"],
img[src*="assets/"][src$="/ui.power.png"],
img[src*="assets/"][src$="/ui.printer.png"],
img[src*="assets/"][src$="/ui.profile.png"],
img[src*="assets/"][src$="/ui.qr.png"],
img[src*="assets/"][src$="/ui.quest.png"],
img[src*="assets/"][src$="/ui.question.png"],
img[src*="assets/"][src$="/ui.quote.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.repeat.png"],
img[src*="assets/"][src$="/ui.reply.png"],
img[src*="assets/"][src$="/ui.restart.png"],
img[src*="assets/"][src$="/ui.rewind.png"],
img[src*="assets/"][src$="/ui.sale.png"],
img[src*="assets/"][src$="/ui.scan.png"],
img[src*="assets/"][src$="/ui.scissors.png"],
img[src*="assets/"][src$="/ui.screwdriver.png"],
img[src*="assets/"][src$="/ui.search.png"],
img[src*="assets/"][src$="/ui.send.png"],
img[src*="assets/"][src$="/ui.settings.png"],
img[src*="assets/"][src$="/ui.share.png"],
img[src*="assets/"][src$="/ui.shelf.png"],
img[src*="assets/"][src$="/ui.shop.png"],
img[src*="assets/"][src$="/ui.shuffle.png"],
img[src*="assets/"][src$="/ui.skip-back.png"],
img[src*="assets/"][src$="/ui.skull.png"],
img[src*="assets/"][src$="/ui.skull--pixel.png"],
img[src*="assets/"][src$="/ui.sleep.png"],
img[src*="assets/"][src$="/ui.sliders.png"],
img[src*="assets/"][src$="/ui.sliders-v.png"],
img[src*="assets/"][src$="/ui.sort-down.png"],
img[src*="assets/"][src$="/ui.sort-up.png"],
img[src*="assets/"][src$="/ui.sound.png"],
img[src*="assets/"][src$="/ui.sound-off.png"],
img[src*="assets/"][src$="/ui.stop.png"],
img[src*="assets/"][src$="/ui.swap-h.png"],
img[src*="assets/"][src$="/ui.swap-v.png"],
img[src*="assets/"][src$="/ui.target.png"],
img[src*="assets/"][src$="/ui.toggle.png"],
img[src*="assets/"][src$="/ui.trash.png"],
img[src*="assets/"][src$="/ui.tv.png"],
img[src*="assets/"][src$="/ui.undo.png"],
img[src*="assets/"][src$="/ui.unlock.png"],
img[src*="assets/"][src$="/ui.upload.png"],
img[src*="assets/"][src$="/ui.vibrate.png"],
img[src*="assets/"][src$="/ui.video.png"],
img[src*="assets/"][src$="/ui.wallet.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"],
img[src*="assets/"][src$="/vehicle.plane--glyph.png"],
img[src*="assets/"][src$="/weapon.arrow--glyph.png"],
img[src*="assets/"][src$="/weapon.axe--glyph.png"],
img[src*="assets/"][src$="/weapon.axe-double--glyph.png"],
img[src*="assets/"][src$="/weapon.bow--glyph.png"],
img[src*="assets/"][src$="/weapon.dagger--glyph.png"],
img[src*="assets/"][src$="/weapon.sword--glyph.png"],
img[src*="assets/"][src$="/weapon.swords-crossed--glyph.png"],
img[src*="assets/"][src$="/weapon.whip--glyph.png"],
img[src*="assets/"][src$="/world.anchor.png"],
img[src*="assets/"][src$="/world.beetle.png"],
img[src*="assets/"][src$="/world.bug.png"],
img[src*="assets/"][src$="/world.drop.png"],
img[src*="assets/"][src$="/world.horseshoe.png"],
img[src*="assets/"][src$="/world.lifebuoy.png"],
img[src*="assets/"][src$="/world.moon.png"],
img[src*="assets/"][src$="/world.mountain.png"],
img[src*="assets/"][src$="/world.mountains.png"],
img[src*="assets/"][src$="/world.paw.png"],
img[src*="assets/"][src$="/world.pinwheel.png"],
img[src*="assets/"][src$="/world.snowflake.png"],
img[src*="assets/"][src$="/world.snowglobe.png"],
img[src*="assets/"][src$="/world.tornado.png"],
img[src*="assets/"][src$="/world.yin-yang.png"]) { filter:var(--sc-glyph-on-button); }
/* glyphs:end */
/* ===== screen ===== */
/*
Screen Shell — Pixel Retro
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 — Pixel Retro
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:var(--sc-px); /* one art pixel */
--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:var(--line); --fill-bot:var(--line); /* flat: pixel art shades in hard steps, never a blend */
--lipc:color-mix(in srgb, var(--line) 62%, var(--sc-shade)); /* the underside: the same colour, darker */
--sc-outline:color-mix(in srgb, var(--line) 38%, var(--sc-shade)); /* the outline: the same colour, darkest — never one brown for every button */
--lipH:calc(var(--sc-px) * 2);
--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) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), /* 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; text-transform:uppercase; letter-spacing:.04em;
box-shadow:inset 0 calc(var(--lipH) * -1) 0 var(--lipc), inset 0 var(--sc-px) 0 color-mix(in srgb, var(--sc-sheen) 35%, transparent); /* dark step at the bottom, light pixel row on top */
clip-path:var(--sc-notch); /* the 8-bit corner */
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); --o:max(2px, calc(var(--fs) * .09)); -webkit-text-stroke:0; text-shadow:var(--o) 0 0 var(--sc-outline), calc(var(--o) * -1) 0 0 var(--sc-outline), 0 var(--o) 0 var(--sc-outline), 0 calc(var(--o) * -1) 0 var(--sc-outline), 0 calc(var(--o) * 2) 0 var(--sc-outline); } /* white letters with the icon outline */
.sc-button > img { height:calc(var(--fs) * 1.25); width:auto; flex:none; pointer-events:none; filter:drop-shadow(1px 0 0 var(--sc-outline)) drop-shadow(-1px 0 0 var(--sc-outline)) drop-shadow(0 1px 0 var(--sc-outline)) drop-shadow(0 -1px 0 var(--sc-outline)); } /* the white glyph gets the same dark edge as the letters */
/* 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"] { --fill-top:var(--sc-raise); --fill-bot:var(--sc-raise); --label:color-mix(in srgb, var(--sc-ink) 97%, var(--sc-shade)); }
.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:var(--sc-panel); --fill-bot:var(--sc-panel); --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-shade)); opacity:.9;
}
.sc-button:disabled > img { filter:grayscale(1) opacity(.45); }
/* ===== icon-button ===== */
/*
Icon Button — Pixel Retro
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-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:0; }
.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-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-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:0; }
.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); }
/* ===== counter ===== */
/*
Resource Counter — Pixel Retro
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 {
clip-path:var(--sc-notch);
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:0;
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-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); } }
/* ===== slot ===== */
/*
Reward Slot — Pixel Retro
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-shade)), color-mix(in srgb, var(--sc-panel) 80%, var(--sc-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-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-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:drop-shadow(1px 0 0 var(--sc-outline)) drop-shadow(-1px 0 0 var(--sc-outline)) drop-shadow(0 1px 0 var(--sc-outline)) drop-shadow(0 -1px 0 var(--sc-outline)); }
.sc-slot[data-state="locked"] .sc-slot-state { left:50%; top:50%; width:44%; height:44%; transform:translate(-50%,-50%); opacity:1;
filter:drop-shadow(1px 0 0 var(--sc-outline)) drop-shadow(-1px 0 0 var(--sc-outline)) drop-shadow(0 1px 0 var(--sc-outline)) drop-shadow(0 -1px 0 var(--sc-outline)) drop-shadow(0 2px 0 var(--sc-outline)); } /* 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 — Pixel Retro
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 {
clip-path:var(--sc-notch);
position:absolute; inset:0; overflow:hidden; box-sizing:border-box;
background:var(--sc-well); border:2px solid var(--sc-outline); border-radius:0; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-shade));
}
.sc-progress-fill {
position:absolute; left:0; top:0; bottom:0; width:var(--pct, 0%); border-radius:0;
/* the fill is the BRIGHT accent (--line), not the dark button tint (--base) */
background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), var(--line);
box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 62%, var(--sc-shade)), 0 0 10px -1px var(--lip);
-webkit-mask:repeating-linear-gradient(90deg, #000 0 calc(var(--h) * .9), #0000 calc(var(--h) * .9) calc(var(--h) * .9 + var(--sc-px))); /* segmented: blocks, not a smooth bar */
mask:repeating-linear-gradient(90deg, #000 0 calc(var(--h) * .9), #0000 calc(var(--h) * .9) calc(var(--h) * .9 + var(--sc-px)));
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;
--o:max(2px, calc(var(--fs) * .09)); -webkit-text-stroke:0; text-shadow:var(--o) 0 0 var(--sc-outline), calc(var(--o) * -1) 0 0 var(--sc-outline), 0 var(--o) 0 var(--sc-outline), 0 calc(var(--o) * -1) 0 var(--sc-outline), 0 calc(var(--o) * 2) 0 var(--sc-outline); /* 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; }
/* ===== title ===== */
/*
Screen Title — Pixel Retro
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:28px; --sc-outline:color-mix(in srgb, var(--g2) 38%, 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:400; font-size:var(--fs); line-height:1.2;
letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; /* arcade capitals */
}
.sc-title[data-size="sm"] { --fs:16px; }
.sc-title[data-size="md"] { --fs:22px; }
/* no 3D layers here: ::before and ::after are the ornament (below) */
.sc-title > span {
position:relative; z-index:1; color:var(--g1);
text-shadow:0 .12em 0 var(--sc-outline), .06em .06em 0 var(--sc-outline);
}
/* 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 {
content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
background:repeating-linear-gradient(90deg, var(--g2) 0 6px, #0000 6px 9px); opacity:.9; /* a dashed pixel rule */
}
.sc-title::before {
content:""; position:absolute; left:50%; bottom:-3px; width:6px; height:6px; translate:-50% 0; /* a square pixel, not a diamond */
background:var(--g2); box-shadow:0 0 0 3px var(--sc-ground);
}
.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 — Pixel Retro
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 — Pixel Retro
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 — Pixel Retro
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 — Pixel Retro
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:inset 0 0 0 var(--sc-px) var(--sc-edge), inset 0 0 0 calc(var(--sc-px) * 2) var(--sc-panel), inset 0 0 0 calc(var(--sc-px) * 3) var(--sc-raise); /* the classic RPG text-box frame: light rim, gap, inner rim */
clip-path:var(--sc-notch);
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:14px; font-size:var(--fs); --ink:var(--gold); font-family:var(--sc-title-font, var(--sc-font)); font-weight:400; letter-spacing:.04em; text-transform:uppercase; text-shadow:0 3px 0 var(--sc-outline); font-weight:400; }
.sc-popup-header > .sc-icon-button { position:absolute; right:8px; top:8px; --size:34px; }
.sc-popup-sub { font:400 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:400; }
.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 color-mix(in srgb, var(--sc-sheen) 7%, transparent); border-radius:var(--sc-r); background:color-mix(in srgb, color-mix(in srgb, var(--sc-panel) 68%, var(--sc-shade)) 50%, transparent);
}
.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 color-mix(in srgb, var(--sc-sheen) 7%, transparent); border-radius:var(--sc-r); background:color-mix(in srgb, color-mix(in srgb, var(--sc-panel) 68%, var(--sc-shade)) 50%, transparent);
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
}
/* ===== bubble ===== */
/*
Count Bubble — Pixel Retro
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-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; }
/* ===== toggle ===== */
/*
Toggle — Pixel Retro
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:var(--sc-ink); } /* the label is light in BOTH states; on the gold track it carries the outline */
.sc-toggle {
clip-path:var(--sc-notch);
--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:color-mix(in srgb, var(--sc-dim) 70%, var(--sc-sheen)); /* OFF: a pale grey knob */
--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:0;
background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), var(--track);
box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-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-ink); --track:var(--line); --label:var(--on-label); --sc-outline:color-mix(in srgb, var(--line) 38%, var(--sc-shade));
box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--line) 62%, 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:0; 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:var(--sc-px) 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; --o:max(2px, calc(var(--fs) * .09)); -webkit-text-stroke:0; text-shadow:var(--o) 0 0 var(--sc-outline), calc(var(--o) * -1) 0 0 var(--sc-outline), 0 var(--o) 0 var(--sc-outline), 0 calc(var(--o) * -1) 0 var(--sc-outline), 0 calc(var(--o) * 2) 0 var(--sc-outline);
}
.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; } }
/* ===== slider ===== */
/*
Slider — Pixel Retro
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 {
clip-path:var(--sc-notch);
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:0;
box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--sc-well) 70%, var(--sc-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) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), var(--line);
border-radius:0; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 62%, var(--sc-shade));
}
.sc-slider-thumb {
clip-path:var(--sc-notch);
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:0;
background:linear-gradient(var(--sc-ink), color-mix(in srgb, var(--sc-ink) 86%, var(--sc-shade)));
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); }
/* ===== checkbox ===== */
/*
Checkbox — Pixel Retro
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 {
clip-path:var(--sc-notch);
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-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) 38%, var(--sc-shade));
background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), var(--line);
box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 62%, 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; } }
/* ===== tabs ===== */
/*
Tabs — Pixel Retro
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:0; 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:0; border:2px solid var(--sc-outline);
background:linear-gradient(180deg, color-mix(in srgb, var(--sc-sheen) 22%, transparent) 0 var(--sc-px), color-mix(in srgb, var(--sc-sheen) 10%, transparent) var(--sc-px) 45%, #0000 45%), var(--line); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--line) 62%, 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) 38%, 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:var(--sc-ink); --o:max(2px, calc(var(--fs) * .09)); -webkit-text-stroke:0; text-shadow:var(--o) 0 0 var(--sc-outline), calc(var(--o) * -1) 0 0 var(--sc-outline), 0 var(--o) 0 var(--sc-outline), 0 calc(var(--o) * -1) 0 var(--sc-outline), 0 calc(var(--o) * 2) 0 var(--sc-outline); } /* white with the outline, on the gold chip */
.sc-tab[aria-selected="true"] > img[data-sc-icon] { filter:drop-shadow(1px 0 0 var(--sc-outline)) drop-shadow(-1px 0 0 var(--sc-outline)) drop-shadow(0 1px 0 var(--sc-outline)) drop-shadow(0 -1px 0 var(--sc-outline)); }
.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; }
/* ===== tabbar ===== */
/*
Bottom Tab Bar — Pixel Retro
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:.85; translate:var(--ox, 0%) var(--oy, 0%); /* coloured icons: calmer when unselected, never faded out */
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-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; } }
/* ===== tag ===== */
/*
Tag Ribbon — Pixel Retro
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 {
clip-path:var(--sc-notch);
--t:13px; --cut:calc(var(--t) * .62); --sc-outline:color-mix(in srgb, var(--line) 38%, 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:0;
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 — Pixel Retro
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) 38%, 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;
margin-top:calc(var(--b-fs) * .45); /* room for the rod */
filter:drop-shadow(0 2px 0 var(--sc-outline)) drop-shadow(0 0 8px var(--lip));
}
.sc-banner[data-size="sm"] { --b-fs:13px; }
.sc-banner[data-size="lg"] { --b-fs:26px; }
.sc-banner::before { /* the wooden rod with silver caps, across the top */
content:""; position:absolute; left:calc(var(--cut) * -.35); right:calc(var(--cut) * -.35); top:calc(var(--b-fs) * -.42); height:calc(var(--b-fs) * .5); z-index:2;
border:2px solid var(--sc-outline); border-radius:0;
background:linear-gradient(90deg, #C9CED8 0 6%, #8B5A2B 6% 94%, #C9CED8 94%);
}
.sc-banner::after { /* the dark outline of the cloth: the same shape, a little bigger */
content:""; position:absolute; inset:-2px; background:var(--sc-outline); z-index:0;
clip-path:polygon(0 0, 100% 0, calc(100% - var(--cut) * .55) 50%, 100% 100%, 0 100%, calc(var(--cut) * .55) 50%);
}
.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:linear-gradient(180deg, color-mix(in srgb, var(--line) 82%, var(--sc-sheen)) 0 45%, var(--line) 45% 82%, color-mix(in srgb, var(--line) 70%, var(--sc-shade)) 82%); /* lighter top, darker bottom band */
clip-path:polygon(0 0, 100% 0, calc(100% - var(--cut) * .55) 50%, 100% 100%, 0 100%, calc(var(--cut) * .55) 50%);
}
.sc-banner-band > .sc-text { --fs:var(--b-fs); --ink:var(--sc-ink); font-size:var(--fs); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 2px 0 color-mix(in srgb, var(--sc-outline) 60%, transparent); }
.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; } }
/* ===== hint ===== */
/*
Hint Bubble — Pixel Retro
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-shade))); --bw:1.5px; --panel:color-mix(in srgb, var(--sc-panel) 96%, var(--sc-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:400 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 — Pixel Retro
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 {
clip-path:var(--sc-notch);
--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-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 — Pixel Retro
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 {
clip-path:var(--sc-notch);
--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-shade)), color-mix(in srgb, var(--sc-panel) 80%, var(--sc-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 — Pixel Retro
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:400 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 — Pixel Retro
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:0;
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 — Pixel Retro
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-shade))), color-mix(in srgb, var(--line) 18%, color-mix(in srgb, var(--sc-well) 70%, var(--sc-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 — Pixel Retro
Requires: ../../core.css, ../sc.js, ../counter/counter.css, ../level/level.css
PORTED from the Super Casual file (the player is a real