/* ───────── Style themes: football and gaming ─────────
   Loaded after profile.css, only for these two themes. Same page and same parts, a different world:
   each changes the card, the ground under it, the sky and the shape of the rows. Colours come from themes.css.
   Both work in the dark version (default) and the light one (.mode-light). */

/* ═══════════════ Football: a pitch under floodlights ═══════════════ */
body.profile-football { background: #04150D; }
body.profile-football.profile-light { background: #EDF5EA; }

.pf.theme-football {
  --sky:
    radial-gradient(34vmax 20vmax at 4% -4%, rgba(255, 236, 170, .34), transparent 70%),
    radial-gradient(34vmax 20vmax at 96% -4%, rgba(255, 236, 170, .34), transparent 70%),
    linear-gradient(180deg, #0B2A18 0%, #061C10 40%, #04150D 72%);
  --page: #04150D;
  --txt-2: #BFD3C4;
  --txt-3: #8FAE98;
  --edge: rgba(242, 246, 238, .12);
  --row: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  --row-shadow: inset 0 0 0 1px rgba(242, 246, 238, .13), inset 0 1px 0 rgba(255, 255, 255, .08);
  --key: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 70%);
  --key-shadow: inset 0 0 0 1.5px rgba(242, 246, 238, .28), 0 16px 30px -16px rgba(0, 0, 0, .9);
  --back: repeating-linear-gradient(90deg, #0F4D2D 0 12.5%, #0B4225 12.5% 25%);
  --back-txt: #FFFFFF;
  --back-hint: #CFE5D5;
  --chalk: rgba(242, 246, 238, .5);
}
.pf.theme-football.mode-light {
  --sky: linear-gradient(180deg, #F7FBF4 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #10261A;
  --txt-2: #3E5A47;
  --txt-3: #5E7C67;
  --edge: rgba(11, 69, 39, .12);
  --row: #FFFFFF;
  --row-shadow: inset 0 0 0 1px rgba(11, 69, 39, .12), 0 14px 30px -24px rgba(11, 69, 39, .55);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(11, 69, 39, .14), 0 14px 26px -16px rgba(11, 69, 39, .55);
  --back: repeating-linear-gradient(90deg, #22914F 0 12.5%, #1C8446 12.5% 25%);
  --back-hint: #E2F3E7;
}

/* Sky: two floodlight cones from the top corners, switched on as the card arrives. */
.theme-football .sky::before, .theme-football .sky::after {
  content: ''; position: absolute; top: -6vh; width: 64vmax; height: 120vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 240, 190, .2), rgba(255, 240, 190, 0) 72%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; filter: blur(10px);
}
.theme-football .sky::before { left: -26vmax; transform: rotate(-30deg); }
.theme-football .sky::after { right: -26vmax; transform: rotate(30deg); }
.motion .theme-football:not(.mode-light) .sky::before, .motion .theme-football:not(.mode-light) .sky::after { animation: lights-on 1.6s linear .35s backwards; }
.motion .theme-football:not(.mode-light) .sky::after { animation-delay: .5s; }
@keyframes lights-on { 0% { opacity: 0; } 18% { opacity: .9; } 24% { opacity: .15; } 34% { opacity: 1; } 42% { opacity: .55; } 100% { opacity: 1; } }
.theme-football .aur-1, .theme-football .aur-2 { opacity: .3; }
.theme-football .aur-3 { opacity: .12; }
/* Daytime: no floodlights; the mown stripes of the pitch fade in at the bottom of the page. */
.theme-football.mode-light .sky::before {
  inset: 38% 0 0; width: auto; height: auto; clip-path: none; transform: none; filter: none;
  background: repeating-linear-gradient(90deg, rgba(30, 138, 74, .09) 0 9vmax, transparent 9vmax 18vmax);
  -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%);
}
.theme-football.mode-light .sky::after { display: none; }
.theme-football.mode-light .aur { opacity: .35; }

/* The card is a pitch: mown stripes, chalk lines, centre circle and a penalty box. */
.theme-football .face, .theme-football .edge, .theme-football .card-hit { border-radius: 14px; }
.theme-football .front {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 12.5%, transparent 12.5% 25%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 244, 200, .14), transparent 60%),
    linear-gradient(170deg, var(--h1), var(--h2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.theme-football .front-rings { left: 12px; top: 12px; right: 12px; bottom: 12px; width: auto; height: auto; border: 1.5px solid var(--chalk); border-radius: 3px; }
.theme-football .front-rings i { animation: none !important; border: 0; border-radius: 0; width: auto; height: auto; left: auto; top: auto; }
.theme-football .front-rings i:nth-child(1) { left: 50%; top: 0; bottom: 0; border-inline-start: 1.5px solid var(--chalk); }
.theme-football .front-rings i:nth-child(2) { left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border: 1.5px solid var(--chalk); border-radius: 50%; transform: translate(-50%, -50%); }
.theme-football .front-rings i:nth-child(3) { left: 0; top: 31%; bottom: 31%; width: 13%; border: 1.5px solid var(--chalk); border-left: 0; }
.theme-football .front-rings i:nth-child(4) { left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(242, 246, 238, .75); transform: translate(-50%, -50%); }
[dir="ltr"] .theme-football .front-rings i:nth-child(3) { left: auto; right: 0; border-left: 1.5px solid var(--chalk); border-right: 0; }
.theme-football .front-avatar { box-shadow: 0 0 0 3px #F2F6EE, 0 12px 26px -8px rgba(0, 0, 0, .6); }
.theme-football .front-avatar-glyph { background: rgba(255, 255, 255, .16); }
.theme-football .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 6.6vw, 1.85rem); line-height: 1.3; text-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 0 22px rgba(0, 0, 0, .35); }
.theme-football .front-role, .theme-football .front-org { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.theme-football .holo { opacity: .1; }
.theme-football .back { box-shadow: inset 0 0 0 1.5px var(--chalk); }
.theme-football .back-qr { border-radius: 10px; box-shadow: 0 0 0 4px rgba(242, 246, 238, .35); }

/* The ground under the card: a lit patch of pitch; the floor ripples become chalk circles from the centre spot. */
.theme-football .floor::before {
  content: ''; position: absolute; width: 960px; height: 460px; left: -480px; top: -300px;
  background:
    radial-gradient(circle at 50% 65%, transparent 99px, var(--chalk) 100px 102px, transparent 103px),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--chalk) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(34, 145, 79, .6) 0 64px, rgba(24, 118, 64, .6) 64px 128px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.theme-football.mode-light .floor::before { opacity: .5; }
.theme-football .floor span { border: 2px solid rgba(242, 246, 238, .85); box-shadow: none; }

/* Rows: a little squarer; round icons and round keys, like a ball. */
.theme-football .lk, .theme-football .hrs, .theme-football .hrs-head, .theme-football .xch-open, .theme-football .notice-x { border-radius: 12px; }
.theme-football .xch-open::before { border-radius: 13.5px; }
.theme-football .lk-ic, .theme-football .hrs-ic, .theme-football .xch-open-ic { border-radius: 50%; }
.theme-football .hrs-ic::after { border-radius: 50%; }
.theme-football .key-ic, .theme-football .key-ic::after { border-radius: 50%; }
.theme-football .tool { border-radius: 12px; }
.theme-football .save { border-radius: 14px; }
.theme-football .save::after { border-radius: 12px; }
.theme-football .save-rim { clip-path: inset(0 round 14px); }
.theme-football .vid-rim { clip-path: inset(0 round 14px); }
.theme-football .vid-frame { border-radius: 14px; }
.theme-football .vid-wait, .theme-football .vid-frame iframe { border-radius: 12px; }
.theme-football .vid-head h2, .theme-football .cat-head h2 { letter-spacing: 0; }

/* ═══════════════ Gaming: a cyberpunk city at night ═══════════════
   Signal yellow, cyan and alarm red on black. The card is a yellow ID plate with cut corners, a barcode and a
   hazard stripe; rows are black terminal panels with a yellow edge; the ground is a yellow grid running toward you. */
body.profile-gaming { background: #08080C; }
body.profile-gaming.profile-light { background: #EEEDE6; }

.pf.theme-gaming {
  --y: #F7E61B; --y-rgb: 247, 230, 27;
  --c: #00E6F6; --c-rgb: 0, 230, 246;
  --r: #FF2A55; --r-rgb: 255, 42, 85;
  --ink: #08080C;
  --cut: 10px;    /* cut corners: --cut top left, --cut2 bottom right; each part sets its own */
  --sky:
    radial-gradient(55% 38% at 88% -4%, rgba(var(--c-rgb), .16), transparent 70%),
    radial-gradient(70% 45% at 8% 104%, rgba(var(--r-rgb), .17), transparent 70%),
    #08080C;
  --page: #08080C;
  --txt: #F4F2E8;
  --txt-2: #BAB7A6;
  --txt-3: #8C8977;
  --edge: rgba(var(--y-rgb), .16);
  --row: linear-gradient(90deg, rgba(var(--y-rgb), .07), rgba(255, 255, 255, .015) 60%), #0F0F15;
  --row-shadow: inset -3px 0 0 var(--y), inset 0 0 0 1px rgba(var(--y-rgb), .14);
  --key: #0F0F15;
  --key-shadow: inset 0 0 0 1.5px rgba(var(--y-rgb), .55), 0 14px 26px -18px rgba(var(--y-rgb), .7);
  --back: #08080C;
  --back-txt: #F4F2E8;
  --back-hint: #BAB7A6;
  --glass: rgba(255, 255, 255, .05);
}
[dir="ltr"] .pf.theme-gaming { --row-shadow: inset 3px 0 0 var(--y), inset 0 0 0 1px rgba(var(--y-rgb), .14); }
.pf.theme-gaming.mode-light {
  --sky: linear-gradient(180deg, #F6F5EF 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #0B0B10;
  --txt-2: #3D3C35;
  --txt-3: #67655A;
  --edge: rgba(8, 8, 12, .14);
  --row: #FFFFFF;
  --row-shadow: inset -4px 0 0 var(--y), inset 0 0 0 1px rgba(8, 8, 12, .16), 0 14px 28px -24px rgba(8, 8, 12, .6);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px var(--ink), 0 12px 24px -18px rgba(8, 8, 12, .7);
  --glass: #FFFFFF;
}
[dir="ltr"] .pf.theme-gaming.mode-light { --row-shadow: inset 4px 0 0 var(--y), inset 0 0 0 1px rgba(8, 8, 12, .16), 0 14px 28px -24px rgba(8, 8, 12, .6); }

/* Cut corners. */
.theme-gaming .face, .theme-gaming .edge, .theme-gaming .lk, .theme-gaming .hrs, .theme-gaming .xch-open, .theme-gaming .tool,
.theme-gaming .notice-x, .theme-gaming .key-ic, .theme-gaming .save, .theme-gaming .save::after, .theme-gaming .vid-frame,
.theme-gaming .lang-sw {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut2, var(--cut))), calc(100% - var(--cut2, var(--cut))) 100%, 0 100%, 0 var(--cut));
}

/* Sky: black streets, a faint grid, scanlines; cyan light from one side, red from below. */
.theme-gaming .sky::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(var(--y-rgb), .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(var(--y-rgb), .045) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000, transparent); mask-image: radial-gradient(90% 70% at 50% 30%, #000, transparent);
}
.theme-gaming .sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.theme-gaming .aur-1 { background: radial-gradient(circle, rgba(var(--c-rgb), .2) 0%, rgba(var(--c-rgb), 0) 60%); }
.theme-gaming .aur-2 { background: radial-gradient(circle, rgba(var(--y-rgb), .1) 0%, rgba(var(--y-rgb), 0) 60%); }
.theme-gaming .aur-3 { background: radial-gradient(circle, rgba(var(--r-rgb), .26) 0%, rgba(var(--r-rgb), 0) 60%); }
.theme-gaming .scene::before { background: radial-gradient(closest-side, rgba(var(--y-rgb), .22), rgba(var(--c-rgb), .08) 55%, transparent 75%); }
.theme-gaming.mode-light .sky::before { background: linear-gradient(rgba(8, 8, 12, .06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(8, 8, 12, .06) 1px, transparent 1px) 0 0 / 32px 32px; }
.theme-gaming.mode-light .sky::after { display: none; }
.theme-gaming.mode-light .aur { opacity: .35; }

/* The card: a signal-yellow ID plate. */
.theme-gaming .face, .theme-gaming .edge { border-radius: 2px; --cut: 30px; --cut2: 14px; }
/* Where the browser bevels corners itself, the card's faces use that instead of the clip-path above: a clip on a
   3D layer that moves has to be pushed through a mask on every frame, and that made the card stutter. (Its glow
   below stays hidden, as it was under the clip.) */
@supports (corner-shape: bevel) {
  .theme-gaming .face, .theme-gaming .edge { clip-path: none; border-radius: var(--cut) 0 var(--cut2) 0; corner-shape: bevel; }
}
.theme-gaming .card-hit { border-radius: 2px; }
.theme-gaming .edge { background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), var(--y); }
.theme-gaming .front {
  color: var(--ink);
  background:
    radial-gradient(rgba(8, 8, 12, .16) 1px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(160deg, #FFF04A 0%, var(--y) 45%, #E9D200 100%);
  box-shadow: inset 0 0 0 1px rgba(8, 8, 12, .25), 0 50px 90px -44px rgba(var(--y-rgb), .55);
}
@supports (corner-shape: bevel) { .theme-gaming .front { box-shadow: inset 0 0 0 1px rgba(8, 8, 12, .25); } }
/* the halftone dots fade out toward the name */
.theme-gaming .front::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 240, 74, 0) 0%, rgba(247, 230, 27, .92) 38%, #F2DD12 100%);
}
/* a barcode and a hazard stripe, on the side away from the name */
.theme-gaming .front::after {
  content: ''; position: absolute; inset-inline-end: 20px; bottom: 16px; width: 34%; height: 30px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px) 0 0 / 62% 13px no-repeat,
    repeating-linear-gradient(-45deg, var(--ink) 0 5px, transparent 5px 10px) 0 100% / 100% 8px no-repeat;
}
[dir="ltr"] .theme-gaming .front::after { background-position: 100% 0, 0 100%; }
.theme-gaming .front-rings { left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }
.theme-gaming .front-rings i { animation: none !important; border: 0; border-radius: 0; width: auto; height: auto; left: auto; top: auto; }
.theme-gaming .front-rings i:nth-child(1) { left: 36px; top: 0; width: 30%; height: 5px; background: var(--c); }
.theme-gaming .front-rings i:nth-child(2) { left: calc(36px + 30% + 6px); top: 0; width: 10px; height: 5px; background: var(--r); }
.theme-gaming .front-rings i:nth-child(3) { right: 0; bottom: 24px; width: 5px; height: 26%; background: var(--ink); }
.theme-gaming .front-rings i:nth-child(4) { display: none; }
.theme-gaming .front-avatar { border-radius: 0; box-shadow: 0 0 0 3px var(--ink), 6px 6px 0 3px var(--c); }
[dir="ltr"] .theme-gaming .front-avatar { box-shadow: 0 0 0 3px var(--ink), -6px 6px 0 3px var(--c); }
.theme-gaming .front-avatar-glyph { background: var(--ink); color: var(--y); }
.theme-gaming .front-chip { border-radius: 2px; background: var(--ink); box-shadow: none; }
.theme-gaming .front-chip img { border-radius: 2px; }
.theme-gaming .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 6.8vw, 1.95rem); line-height: 1.3; text-shadow: -1.5px 0 rgba(var(--c-rgb), .9), 1.5px 0 rgba(var(--r-rgb), .75); }
.theme-gaming .front-role { opacity: 1; font-weight: 600; }
.theme-gaming .holo { display: none; }
.theme-gaming .sheen { mix-blend-mode: overlay; }
/* As the card lands, the name glitches once. */
.motion .landed.theme-gaming .front-name { animation: glitch .75s steps(1) .1s backwards; }
@keyframes glitch {
  0% { transform: translate(0); clip-path: inset(0 0 0 0); }
  12% { transform: translate(-5px, 1px); clip-path: inset(8% 0 58% 0); text-shadow: -4px 0 var(--c), 4px 0 var(--r); }
  24% { transform: translate(4px, -1px); clip-path: inset(56% 0 6% 0); }
  36% { transform: translate(-2px); clip-path: inset(28% 0 34% 0); text-shadow: -3px 0 var(--c), 3px 0 var(--r); }
  48% { transform: translate(3px); clip-path: inset(0 0 72% 0); }
  60%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}
.theme-gaming .back { box-shadow: inset 0 0 0 2px var(--y); }
.theme-gaming .back::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--y) 0 6px, transparent 6px 12px); opacity: .85; }
.theme-gaming .back-qr { border-radius: 2px; box-shadow: 0 0 0 3px var(--y); }
.theme-gaming .back-url { color: var(--y); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* The ground: a yellow grid that runs toward you. The first floor ripple becomes a still, masked window and the grid
   slides inside it (a transform the compositor moves, so nothing is repainted per frame). */
.theme-gaming .floor span { display: none; }
.theme-gaming .floor span:first-child {
  display: block; width: 820px; height: 560px; left: -410px; top: -280px; overflow: hidden;
  border: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; animation: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
}
.theme-gaming .floor span:first-child::before {
  content: ''; position: absolute; left: 0; right: 0; top: -44px; bottom: 0;
  background:
    linear-gradient(rgba(var(--y-rgb), .5) 1.5px, transparent 1.5px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(var(--y-rgb), .5) 1.5px, transparent 1.5px) 0 0 / 44px 44px;
}
.theme-gaming.mode-light .floor span:first-child::before { background: linear-gradient(rgba(8, 8, 12, .35) 1.5px, transparent 1.5px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(8, 8, 12, .35) 1.5px, transparent 1.5px) 0 0 / 44px 44px; }
.motion .landed.theme-gaming .floor span:first-child::before { animation: grid-run 1.6s linear infinite; }
@keyframes grid-run { to { transform: translateY(44px); } }

/* Rows, keys and buttons: terminal panels with cut corners. Focus rings are drawn inside, since the cut would hide them. */
.theme-gaming .lk, .theme-gaming .hrs, .theme-gaming .xch-open, .theme-gaming .tool, .theme-gaming .notice-x { border-radius: 0; --cut: 0px; --cut2: 12px; }
.theme-gaming .hrs-head { border-radius: 0; }
.theme-gaming .lk:focus-visible, .theme-gaming .hrs-head:focus-visible, .theme-gaming .xch-open:focus-visible, .theme-gaming .tool:focus-visible { outline: 2px solid var(--c); outline-offset: -5px; }
.theme-gaming .lk-ic, .theme-gaming .hrs-ic { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); }
.theme-gaming .xch-open-ic { border-radius: 0; }
.theme-gaming .hrs-ic::after { border-radius: 0; }
.theme-gaming .lk-title, .theme-gaming .hrs-title, .theme-gaming .xch-open-t b { letter-spacing: .01em; }
.theme-gaming .xch-open { background: linear-gradient(90deg, rgba(var(--r-rgb), .2), rgba(var(--r-rgb), .04) 70%), #0F0F15; box-shadow: inset -3px 0 0 var(--r), inset 0 0 0 1px rgba(var(--r-rgb), .3); }
[dir="ltr"] .theme-gaming .xch-open { box-shadow: inset 3px 0 0 var(--r), inset 0 0 0 1px rgba(var(--r-rgb), .3); }
.theme-gaming .xch-open::before { display: none; }
.theme-gaming.mode-light .xch-open { background: #FFFFFF; }
.theme-gaming .key-ic { border-radius: 0; --cut: 0px; --cut2: 14px; }
.theme-gaming .key-ic::after { display: none; }
.theme-gaming .key:focus-visible .key-ic { box-shadow: inset 0 0 0 3px var(--c); }
.theme-gaming .save { border-radius: 0; --cut: 0px; --cut2: 18px; box-shadow: 0 18px 40px -18px rgba(var(--y-rgb), .7); }
.theme-gaming .save::after { border-radius: 0; inset: 2px; --cut: 0px; --cut2: 17px; }
.theme-gaming .save:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.theme-gaming .vid-frame { border-radius: 0; --cut: 22px; --cut2: 22px; }
.theme-gaming .save-rim, .theme-gaming .vid-rim { clip-path: none; } /* the frame's own cut-corner clip shapes them */
.theme-gaming .vid-wait, .theme-gaming .vid-frame iframe { border-radius: 0; }
.theme-gaming .hrs-week li { border-radius: 0; }
.theme-gaming .tool .i { color: var(--accent); }
.theme-gaming .lang-sw, .theme-gaming .lang-knob, .theme-gaming .lang-opt, .theme-gaming .thm-open { border-radius: 0; --cut: 0px; --cut2: 8px; }
.theme-gaming .thm-open { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.theme-gaming .made-with { border-radius: 0; }
.theme-gaming .cat-open { border-radius: 0; color: var(--y); background: #0F0F15; box-shadow: inset 0 0 0 1.5px rgba(var(--y-rgb), .6); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.theme-gaming .cat-open .i { color: var(--c); }
.theme-gaming.mode-light .cat-open { color: var(--ink); background: var(--y); box-shadow: none; }
.theme-gaming.mode-light .cat-open .i { color: var(--ink); }

/* ═══════════════ Seven more worlds: crypto, AI, café, sports store, digital store, game shop, tactical ═══════════════
   Same parts as above. On these cards the ring layer (.front-rings and its four <i>) is a free canvas for the
   theme's marks; it is mirrored on English pages, so the marks always stay on the side away from the name. */
:is(.theme-crypto, .theme-ai, .theme-cafe, .theme-sport, .theme-digital, .theme-gamestore, .theme-tactical) .front-rings { left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; overflow: hidden; border-radius: inherit; }
:is(.theme-crypto, .theme-ai, .theme-cafe, .theme-sport, .theme-digital, .theme-gamestore, .theme-tactical) .front-rings i { animation: none !important; border: 0; border-radius: 0; width: auto; height: auto; left: auto; top: auto; background: none; }
[dir="ltr"] :is(.theme-crypto, .theme-ai, .theme-cafe, .theme-sport, .theme-digital, .theme-gamestore, .theme-tactical) .front-rings { transform: scaleX(-1); }
:is(.theme-crypto, .theme-ai, .theme-cafe, .theme-sport, .theme-digital, .theme-gamestore, .theme-tactical) .front-name { position: relative; }
body.profile-crypto { background: #070708; }
body.profile-ai { background: #060714; }
body.profile-cafe { background: #1A0E0A; }
body.profile-sport { background: #111214; }
body.profile-digital { background: #0F1112; }
body.profile-gamestore { background: #0A0614; }
body.profile-tactical { background: #0A0B0C; }
body.profile-crypto.profile-light { background: #F5F3EE; }
body.profile-ai.profile-light { background: #F4F3FF; }
body.profile-cafe.profile-light { background: #F8F0E6; }
body.profile-sport.profile-light { background: #F6F5F3; }
body.profile-digital.profile-light { background: #EFF6F4; }
body.profile-gamestore.profile-light { background: #F6F1FF; }
body.profile-tactical.profile-light { background: #F3F2EE; }

/* ═══════════════ Crypto: a glossy black card with gold and the coin's mark ═══════════════ */
.pf.theme-crypto {
  --gold-rgb: 232, 190, 85;
  --gloss: linear-gradient(118deg, rgba(255, 255, 255, .075) 0 36%, transparent 36.2%);
  --sky: radial-gradient(60% 40% at 85% -5%, rgba(var(--gold-rgb), .16), transparent 70%), linear-gradient(180deg, #131315, #070708 60%);
  --page: #070708;
  --txt-2: #C6C1B4; --txt-3: #918C80;
  --edge: rgba(var(--gold-rgb), .14);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), #0F0F11;
  --row-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .16), inset 0 1px 0 rgba(255, 255, 255, .06);
  --key: linear-gradient(160deg, #1E1E22, #0C0C0E);
  --key-shadow: inset 0 0 0 1.5px rgba(var(--gold-rgb), .42), 0 16px 30px -18px rgba(var(--gold-rgb), .6);
  --back: linear-gradient(150deg, #26262B, #08080A);
  --back-txt: #F2CF6B; --back-hint: #C6C1B4;
}
.pf.theme-crypto.mode-light {
  --sky: linear-gradient(180deg, #FBFAF7 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #141416; --txt-2: #4A473F; --txt-3: #6E6A60;
  --edge: rgba(20, 20, 22, .12);
  --row: #FFFFFF;
  --row-shadow: inset 0 0 0 1px rgba(20, 20, 22, .1), 0 14px 30px -24px rgba(20, 20, 22, .5);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(140, 106, 18, .32), 0 14px 26px -18px rgba(20, 20, 22, .5);
}
.theme-crypto .edge { background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), linear-gradient(150deg, #F2CF6B, #7A5A12); }
.theme-crypto .front {
  background: var(--gloss), radial-gradient(70% 60% at 100% 0%, rgba(var(--gold-rgb), .14), transparent 65%), linear-gradient(150deg, #2C2C31 0%, #121214 55%, #070708 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.theme-crypto .front-rings i:nth-child(1) { left: 22px; bottom: 20px; width: 40px; height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 46'%3E%3Cdefs%3E%3ClinearGradient id='au' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE7A0'/%3E%3Cstop offset='.5' stop-color='%23E8BE55'/%3E%3Cstop offset='1' stop-color='%23A97C1C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 7H19C25.5 7 28.5 10.2 28.5 14.6C28.5 18 26.6 20.2 23.8 21.1C27.4 21.9 30.5 24.6 30.5 29.3C30.5 34.6 26.8 38 19.8 38H5ZM11.2 12.4V19H18.2C20.8 19 22.2 17.7 22.2 15.7C22.2 13.7 20.8 12.4 18.2 12.4ZM11.2 24V32.6H19C22.2 32.6 24 31.1 24 28.3C24 25.5 22.2 24 19 24ZM9 1H13V7H9ZM16 1H20V7H16ZM9 38H13V44H9ZM16 38H20V44H16Z' fill='url(%23au)' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="ltr"] .theme-crypto .front-rings i:nth-child(1) { transform: scaleX(-1); } /* the mark reads the right way round on English pages too */
.theme-crypto .front-name { background: linear-gradient(180deg, #FFE7A0, #E8BE55 55%, #B88A24); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.theme-crypto .front-role, .theme-crypto .front-org { color: #E6E0D2; }
.theme-crypto .front-avatar { box-shadow: 0 0 0 3px #E8BE55, 0 0 0 7px rgba(var(--gold-rgb), .18), 0 14px 28px -10px rgba(0, 0, 0, .7); }
.theme-crypto .front-avatar-glyph { background: rgba(var(--gold-rgb), .12); color: #F2CF6B; }
.theme-crypto .front-chip { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .4); }
.theme-crypto .holo { opacity: .2; }
.theme-crypto .back { background: var(--gloss), var(--back); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); }
.theme-crypto.mode-light .back { --back-txt: #F2CF6B; --back-hint: #C6C1B4; }
.theme-crypto .back-qr { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .75); }
.theme-crypto .floor span { border-color: rgba(var(--gold-rgb), .85); box-shadow: 0 0 16px rgba(var(--gold-rgb), .45), inset 0 0 16px rgba(var(--gold-rgb), .2); }
.theme-crypto .lk-ic, .theme-crypto .hrs-ic { border-radius: 50%; }

/* ═══════════════ AI: a soft mesh of light, a sparkle and a little network ═══════════════ */
.pf.theme-ai {
  --sky:
    radial-gradient(60% 45% at 80% -5%, rgba(109, 91, 255, .38), transparent 70%),
    radial-gradient(55% 40% at 0% 30%, rgba(18, 181, 232, .2), transparent 70%),
    radial-gradient(60% 40% at 90% 100%, rgba(255, 121, 217, .18), transparent 70%),
    #060714;
  --page: #060714;
  --txt-2: #BFBBEA; --txt-3: #8F8BC2;
  --edge: rgba(169, 156, 255, .16);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  --row-shadow: inset 0 0 0 1px rgba(169, 156, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
  --back: linear-gradient(150deg, #19154A, #070818);
}
.pf.theme-ai.mode-light {
  --sky: radial-gradient(70% 45% at 85% -5%, rgba(109, 91, 255, .16), transparent 70%), radial-gradient(60% 40% at 0% 40%, rgba(18, 181, 232, .12), transparent 70%), linear-gradient(180deg, #FAF9FF, var(--paper) 55%, var(--paper-2));
  --page: var(--paper);
  --txt: #17153A; --txt-2: #4B4874; --txt-3: #6F6C96;
  --row: rgba(255, 255, 255, .86);
  --row-shadow: inset 0 0 0 1px rgba(90, 69, 230, .12), 0 16px 34px -26px rgba(90, 69, 230, .6);
  --back: linear-gradient(150deg, #FFFFFF, var(--paper-2));
}
.theme-ai .sky::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(214, 200, 255, .2) 0 1px, transparent 1.5px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(80% 55% at 50% 25%, #000, transparent); mask-image: radial-gradient(80% 55% at 50% 25%, #000, transparent); }
.theme-ai.mode-light .sky::before { background: radial-gradient(circle, rgba(90, 69, 230, .2) 0 1px, transparent 1.5px) 0 0 / 26px 26px; }
.theme-ai .front {
  background:
    radial-gradient(70% 95% at 0% 100%, rgba(18, 181, 232, .95), transparent 62%),
    radial-gradient(60% 80% at 100% 0%, rgba(255, 121, 217, .78), transparent 60%),
    radial-gradient(80% 90% at 90% 100%, rgba(66, 46, 240, .9), transparent 70%),
    linear-gradient(150deg, #7563FF, #3B2BD9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .5), 0 50px 90px -40px rgba(109, 91, 255, .9);
}
.theme-ai .front-rings i:nth-child(1) { left: 33%; top: 15%; width: 70px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M26.00 12.00C27.65 24.10 35.90 32.35 48.00 34.00C35.90 35.65 27.65 43.90 26.00 56.00C24.35 43.90 16.10 35.65 4.00 34.00C16.10 32.35 24.35 24.10 26.00 12.00Z' fill='%23fff'/%3E%3Cpath d='M52.00 2.00C52.67 6.95 56.05 10.32 61.00 11.00C56.05 11.68 52.67 15.05 52.00 20.00C51.33 15.05 47.95 11.68 43.00 11.00C47.95 10.32 51.33 6.95 52.00 2.00Z' fill='%23fff' fill-opacity='.85'/%3E%3Cpath d='M51.00 47.00C51.38 49.75 53.25 51.62 56.00 52.00C53.25 52.38 51.38 54.25 51.00 57.00C50.62 54.25 48.75 52.38 46.00 52.00C48.75 51.62 50.62 49.75 51.00 47.00Z' fill='%23fff' fill-opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.theme-ai .front-rings i:nth-child(2) { left: 3%; bottom: 6%; width: 46%; height: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M8 14L58 8M8 14L58 30M8 14L58 52M8 14L58 74M8 40L58 8M8 40L58 30M8 40L58 52M8 40L58 74M8 66L58 8M8 66L58 30M8 66L58 52M8 66L58 74M58 8L110 24M58 8L110 56M58 30L110 24M58 30L110 56M58 52L110 24M58 52L110 56M58 74L110 24M58 74L110 56' stroke='%23fff' stroke-opacity='.22' stroke-width='.7'/%3E%3Ccircle cx='8' cy='14' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='8' cy='40' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='8' cy='66' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='8' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='30' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='52' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='74' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='110' cy='24' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='110' cy='56' r='2.4' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat; }
.theme-ai .front-rings i:nth-child(3) { left: calc(33% - 30px); top: calc(15% - 30px); width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent); }
.motion .landed.theme-ai .front-rings i:nth-child(1) { animation: ai-spark 3.6s ease-in-out infinite !important; }
.lite.motion .landed.theme-ai .front-rings i:nth-child(1) { animation: none !important; }
@keyframes ai-spark { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.82) rotate(12deg); opacity: .75; } }
.theme-ai .front-avatar { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px rgba(255, 121, 217, .5), 0 14px 28px -10px rgba(0, 0, 0, .45); }
.theme-ai .front-chip { border-radius: 50%; }
.theme-ai .front-chip img { border-radius: 50%; }
.theme-ai .front-name { text-shadow: 0 2px 22px rgba(40, 20, 160, .45); }
.theme-ai .back { box-shadow: inset 0 0 0 1.5px rgba(169, 156, 255, .45); }
.theme-ai .back-qr { border-radius: 18px; box-shadow: 0 0 0 4px rgba(255, 121, 217, .35); }
.theme-ai .lk, .theme-ai .hrs, .theme-ai .xch-open, .theme-ai .notice-x { border-radius: 26px; }
.theme-ai .lk-ic, .theme-ai .hrs-ic, .theme-ai .xch-open-ic, .theme-ai .key-ic, .theme-ai .key-ic::after { border-radius: 50%; }
.theme-ai .floor span { border-color: rgba(214, 200, 255, .8); }

/* ═══════════════ Café: an espresso card, a latte seen from above with its art, a few beans ═══════════════ */
.pf.theme-cafe {
  --sky:
    radial-gradient(60% 40% at 80% -6%, rgba(231, 181, 126, .22), transparent 70%),
    radial-gradient(70% 50% at 0% 105%, rgba(154, 90, 40, .3), transparent 70%),
    linear-gradient(180deg, #2A1712, #1A0E0A 60%);
  --page: #1A0E0A;
  --txt: #F8EBD8; --txt-2: #DCC3A6; --txt-3: #A88E73;
  --edge: rgba(231, 181, 126, .16);
  --row: linear-gradient(160deg, rgba(245, 226, 196, .08), rgba(245, 226, 196, .025)), #26150F;
  --row-shadow: inset 0 0 0 1px rgba(231, 181, 126, .2), inset 0 1px 0 rgba(245, 226, 196, .08);
  --key: radial-gradient(circle at 35% 30%, #5E3524, #2E1A12 72%);
  --key-shadow: inset 0 0 0 1.5px rgba(231, 181, 126, .42), 0 16px 30px -18px rgba(0, 0, 0, .9);
  --back: linear-gradient(150deg, #4E2D1F, #2A1710);
  --back-txt: #F5E2C4; --back-hint: #D9B98E;
}
.pf.theme-cafe.mode-light {
  --sky: linear-gradient(180deg, #FCF7F0 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #3A1D18; --txt-2: #66473A; --txt-3: #86685A;
  --edge: rgba(69, 35, 31, .12);
  --row: #FFFBF6;
  --row-shadow: inset 0 0 0 1px rgba(69, 35, 31, .13), 0 14px 30px -24px rgba(69, 35, 31, .55);
  --key: #FFFBF6;
  --key-shadow: inset 0 0 0 1.5px rgba(122, 63, 26, .25), 0 14px 26px -16px rgba(69, 35, 31, .5);
}
.theme-cafe .sky::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg transform='translate(30 34) rotate(28) scale(0.9)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.09'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.16' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(104 58) rotate(-36) scale(0.7)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.08'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.14' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(62 118) rotate(70) scale(0.8)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.09'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.16' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(132 132) rotate(12) scale(0.6)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.07'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.13' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 150px 150px; opacity: .55; -webkit-mask-image: radial-gradient(85% 60% at 50% 20%, #000, transparent); mask-image: radial-gradient(85% 60% at 50% 20%, #000, transparent); }
.theme-cafe.mode-light .sky::before { opacity: .35; }
.theme-cafe .edge { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), linear-gradient(150deg, #9A5A28, #3B2117); }
.theme-cafe .front {
  background: radial-gradient(80% 70% at 100% 0%, rgba(231, 181, 126, .24), transparent 60%), linear-gradient(150deg, #5B3423 0%, #3B2117 55%, #2A1710 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 226, 196, .16), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
/* the latte, half off the card on the side away from the name, and beans scattered beside it */
.theme-cafe .front-rings i:nth-child(1) { left: -10.6%; top: 29%; width: 51.8%; height: 82.2%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='cr' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23D9A774'/%3E%3Cstop offset='.55' stop-color='%23B97E4B'/%3E%3Cstop offset='.88' stop-color='%237C4626'/%3E%3Cstop offset='1' stop-color='%235A2E17'/%3E%3C/radialGradient%3E %3CradialGradient id='sc' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='.7' stop-color='%23F1E6D5'/%3E%3Cstop offset='1' stop-color='%23D6C2A6'/%3E%3C/radialGradient%3E%3C/defs%3E %3Ccircle cx='105' cy='109' r='95' fill='%23000000' fill-opacity='.24'/%3E%3Ccircle cx='100' cy='100' r='94' fill='url(%23sc)'/%3E%3Ccircle cx='100' cy='100' r='73' fill='none' stroke='%23D2BEA2' stroke-width='2'/%3E %3Cg transform='rotate(-40 100 100)'%3E%3Crect x='150' y='88' width='40' height='24' rx='12' fill='%23FBF6EE' stroke='%23E3D3BC' stroke-width='1.5'/%3E%3C/g%3E %3Ccircle cx='103' cy='105' r='63' fill='%23000000' fill-opacity='.16'/%3E%3Ccircle cx='100' cy='100' r='62' fill='%23FBF6EE' stroke='%23E6D7C2' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='52' fill='url(%23cr)'/%3E %3Cpath d='M100 142C76 124 66 104 72 90C77 79 90 76 100 88C110 76 123 79 128 90C134 104 124 124 100 142Z' fill='%23F6EAD6'/%3E %3Cg fill='none' stroke='%23C8915E' stroke-linecap='round'%3E%3Cpath d='M80 96C86 90 94 92 100 100C106 92 114 90 120 96' stroke-width='3'/%3E%3Cpath d='M84 108C90 102 96 104 100 110C104 104 110 102 116 108' stroke-width='2.6'/%3E%3Cpath d='M89 119C94 114 97 116 100 120C103 116 106 114 111 119' stroke-width='2.2'/%3E%3C/g%3E %3Cpath d='M100 72V144' stroke='%23F6EAD6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='71' r='3.2' fill='%23F6EAD6'/%3E %3Cpath d='M62 70A62 62 0 0 1 130 46' fill='none' stroke='%23FFFFFF' stroke-opacity='.8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.theme-cafe .front-rings i:nth-child(2) { left: 34.1%; top: 10.3%; width: 5.3%; height: 12.1%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cdefs%3E%3ClinearGradient id='bn' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A4E2A'/%3E%3Cstop offset='1' stop-color='%233E1F0E'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cellipse cx='12' cy='17' rx='10.5' ry='15.5' fill='url(%23bn)'/%3E%3Cpath d='M12.5 2.5C7 11 17.5 22 11.5 31.5' fill='none' stroke='%232A1308' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='8' cy='10' rx='2.5' ry='5' fill='%23FFFFFF' fill-opacity='.14'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(28deg); }
.theme-cafe .front-rings i:nth-child(3) { left: 45.9%; top: 25.2%; width: 4.1%; height: 9.3%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cdefs%3E%3ClinearGradient id='bn' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A4E2A'/%3E%3Cstop offset='1' stop-color='%233E1F0E'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cellipse cx='12' cy='17' rx='10.5' ry='15.5' fill='url(%23bn)'/%3E%3Cpath d='M12.5 2.5C7 11 17.5 22 11.5 31.5' fill='none' stroke='%232A1308' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='8' cy='10' rx='2.5' ry='5' fill='%23FFFFFF' fill-opacity='.14'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-34deg); }
.theme-cafe .front-rings i:nth-child(4) { left: 42.9%; top: 43.9%; width: 4.4%; height: 10.3%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cdefs%3E%3ClinearGradient id='bn' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A4E2A'/%3E%3Cstop offset='1' stop-color='%233E1F0E'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cellipse cx='12' cy='17' rx='10.5' ry='15.5' fill='url(%23bn)'/%3E%3Cpath d='M12.5 2.5C7 11 17.5 22 11.5 31.5' fill='none' stroke='%232A1308' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='8' cy='10' rx='2.5' ry='5' fill='%23FFFFFF' fill-opacity='.14'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(64deg); opacity: .9; }
.theme-cafe .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 6.6vw, 1.85rem); line-height: 1.3; color: #F5E2C4; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.theme-cafe .front-role, .theme-cafe .front-org { color: #E7B57E; }
.theme-cafe .front-org { color: #F5E2C4; }
.theme-cafe .front-avatar { box-shadow: 0 0 0 3px #F5E2C4, 0 0 0 7px rgba(231, 181, 126, .35), 0 14px 28px -10px rgba(0, 0, 0, .6); }
.theme-cafe .front-avatar-glyph { background: rgba(245, 226, 196, .12); }
.theme-cafe .front-chip { background: rgba(245, 226, 196, .1); box-shadow: inset 0 0 0 1px rgba(245, 226, 196, .3); }
.theme-cafe .holo { opacity: .12; }
.theme-cafe .back { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg transform='translate(30 34) rotate(28) scale(0.9)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.09'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.16' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(104 58) rotate(-36) scale(0.7)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.08'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.14' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(62 118) rotate(70) scale(0.8)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.09'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.16' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(132 132) rotate(12) scale(0.6)' fill='none'%3E%3Cellipse cx='0' cy='0' rx='10.5' ry='15.5' fill='%23E7B57E' fill-opacity='0.07'/%3E%3Cpath d='M0.5 -14.5C-5 -6 5.5 5 -0.5 14.5' stroke='%23E7B57E' stroke-opacity='0.13' stroke-width='2.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px, var(--back); box-shadow: inset 0 0 0 1px rgba(245, 226, 196, .14); }
.theme-cafe .back::before { content: ''; position: absolute; inset: 9px; border-radius: 15px; border: 1px solid rgba(231, 181, 126, .35); pointer-events: none; }
.theme-cafe.mode-light .back { --back-txt: #F5E2C4; --back-hint: #D9B98E; }
.theme-cafe .back-qr { box-shadow: 0 0 0 4px rgba(231, 181, 126, .45); }
.theme-cafe .floor span { border-color: rgba(231, 181, 126, .85); box-shadow: 0 0 16px rgba(231, 181, 126, .45), inset 0 0 16px rgba(231, 181, 126, .2); }
.theme-cafe .lk, .theme-cafe .hrs, .theme-cafe .xch-open, .theme-cafe .notice-x { border-radius: 18px; }

/* ═══════════════ Sports store: dark charcoal, a thick orange ring, white speed hatching ═══════════════ */
.pf.theme-sport {
  --sky:
    radial-gradient(60% 40% at 90% -5%, rgba(255, 106, 26, .22), transparent 70%),
    radial-gradient(60% 45% at 0% 105%, rgba(232, 32, 42, .16), transparent 70%),
    linear-gradient(180deg, #19191C, #111214 60%);
  --page: #111214;
  --txt-2: #BEBFC4; --txt-3: #8C8D93;
  --edge: rgba(255, 255, 255, .1);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)), #1A1B1E;
  --row-shadow: inset -3px 0 0 #FF6A1A, inset 0 0 0 1px rgba(255, 255, 255, .08);
  --key: linear-gradient(160deg, #26272B, #17181B);
  --key-shadow: inset 0 0 0 1.5px rgba(255, 122, 46, .55), 0 16px 30px -18px rgba(255, 106, 26, .7);
  --back: linear-gradient(150deg, #2A2B30, #111214);
}
[dir="ltr"] .pf.theme-sport { --row-shadow: inset 3px 0 0 #FF6A1A, inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pf.theme-sport.mode-light {
  --sky: linear-gradient(180deg, #FCFBFA 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #17181B; --txt-2: #4A4B50; --txt-3: #6C6D73;
  --edge: rgba(23, 24, 27, .12);
  --row: #FFFFFF;
  --row-shadow: inset -4px 0 0 #FF5A1F, inset 0 0 0 1px rgba(23, 24, 27, .1), 0 14px 28px -24px rgba(23, 24, 27, .5);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(224, 74, 16, .3), 0 14px 26px -16px rgba(23, 24, 27, .45);
}
[dir="ltr"] .pf.theme-sport.mode-light { --row-shadow: inset 4px 0 0 #FF5A1F, inset 0 0 0 1px rgba(23, 24, 27, .1), 0 14px 28px -24px rgba(23, 24, 27, .5); }
.theme-sport .sky::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 0 46%, rgba(255, 255, 255, .025) 46% 62%, transparent 62%); }
.theme-sport.mode-light .sky::before { background: linear-gradient(160deg, transparent 0 46%, rgba(23, 24, 27, .03) 46% 62%, transparent 62%); }
.theme-sport .edge { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), linear-gradient(150deg, #3A3B40, #17181B); }
.theme-sport .front {
  background: linear-gradient(160deg, transparent 0 56%, rgba(255, 255, 255, .035) 56% 76%, transparent 76%), linear-gradient(150deg, #2A2B30 0%, #18191C 55%, #0F1012 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
/* the ring, low in the corner away from the name */
.theme-sport .front-rings i:nth-child(1) {
  left: -25.3%; bottom: -27.1%; width: 55.9%; height: 88.8%; border-radius: 50%;
  background: linear-gradient(160deg, #FF8A1F, #FF3B2F);
  -webkit-mask-image: radial-gradient(closest-side, transparent 72%, #000 72.5%); mask-image: radial-gradient(closest-side, transparent 72%, #000 72.5%);
}
.theme-sport .front-rings i:nth-child(2) { left: 34%; top: 41%; width: 60px; height: 15px; background: repeating-linear-gradient(120deg, #FFFFFF 0 3px, transparent 3px 9px); }
.theme-sport .front-rings i:nth-child(3) { left: 27%; top: 20px; width: 70px; height: 40px; background: radial-gradient(circle, rgba(255, 255, 255, .24) 1.2px, transparent 1.8px) 0 0 / 10px 10px; }
.theme-sport .front-rings i:nth-child(4) {
  left: 49%; top: 24px; width: 26px; height: 26px; border-radius: 50%; border: 6px solid #FF5A1F;
  -webkit-mask-image: conic-gradient(from 40deg, #000 0 74%, transparent 0); mask-image: conic-gradient(from 40deg, #000 0 74%, transparent 0);
}
.theme-sport .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 6.8vw, 1.95rem); line-height: 1.3; letter-spacing: .01em; }
[dir="ltr"] .theme-sport .front-name { text-transform: uppercase; }
.theme-sport .front-role { color: #FF8A3D; opacity: 1; font-weight: 700; }
.theme-sport .front-avatar { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px rgba(255, 106, 26, .7), 0 14px 28px -10px rgba(0, 0, 0, .6); }
.theme-sport .front-chip { background: rgba(255, 255, 255, .08); }
.theme-sport .holo { opacity: .2; }
.theme-sport .back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.theme-sport .back::before {
  content: ''; position: absolute; inset-inline-end: -56px; top: -66px; width: 112px; height: 112px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(160deg, #FF8A1F, #FF3B2F);
  -webkit-mask-image: radial-gradient(closest-side, transparent 72%, #000 72.5%); mask-image: radial-gradient(closest-side, transparent 72%, #000 72.5%);
}
.theme-sport .back::after { content: ''; position: absolute; inset-inline-end: 22px; bottom: 16px; width: 54px; height: 10px; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .8) 0 2.5px, transparent 2.5px 8px); pointer-events: none; }
.theme-sport.mode-light .back { --back-txt: #F4F3FF; --back-hint: #BEBFC4; }
.theme-sport .back-qr { box-shadow: 0 0 0 4px rgba(255, 106, 26, .6); }
.theme-sport .floor span { border-color: rgba(255, 106, 26, .9); box-shadow: 0 0 16px rgba(255, 106, 26, .55), inset 0 0 16px rgba(255, 106, 26, .25); }
.theme-sport .lk, .theme-sport .hrs, .theme-sport .xch-open, .theme-sport .notice-x, .theme-sport .tool { border-radius: 12px; }
.theme-sport .lk-ic, .theme-sport .hrs-ic { border-radius: 50%; }
.theme-sport .key-ic, .theme-sport .key-ic::after { border-radius: 50%; }
.theme-sport .save { border-radius: 14px; }
.theme-sport .save::after { border-radius: 12px; }
.theme-sport .save-rim { clip-path: inset(0 round 14px); }

/* ═══════════════ Digital store: teal and charcoal, gold circuit traces running into a chip ═══════════════ */
.pf.theme-digital {
  --trace-rgb: 232, 216, 160;
  --sky:
    radial-gradient(60% 40% at 85% -5%, rgba(22, 149, 127, .3), transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(22, 149, 127, .14), transparent 70%),
    linear-gradient(180deg, #16191B, #0F1112 60%);
  --page: #0F1112;
  --txt-2: #B8C4C1; --txt-3: #87938F;
  --edge: rgba(63, 211, 182, .14);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), #191C1E;
  --row-shadow: inset 0 0 0 1px rgba(63, 211, 182, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
  --key: linear-gradient(160deg, #24282B, #16191B);
  --key-shadow: inset 0 0 0 1.5px rgba(63, 211, 182, .45), 0 16px 30px -18px rgba(22, 149, 127, .8);
  --back: linear-gradient(150deg, #2E3134, #17191B);
  --back-txt: #F2F5F4; --back-hint: #B8C4C1;
}
.pf.theme-digital.mode-light {
  --sky: linear-gradient(180deg, #F8FCFB 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #13201D; --txt-2: #42524E; --txt-3: #64746F;
  --edge: rgba(11, 92, 80, .12);
  --row: #FFFFFF;
  --row-shadow: inset 0 0 0 1px rgba(14, 122, 104, .16), 0 14px 30px -24px rgba(14, 122, 104, .55);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(14, 122, 104, .3), 0 14px 26px -16px rgba(14, 122, 104, .45);
}
.theme-digital .sky::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(63, 211, 182, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(63, 211, 182, .05) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 20%, #000, transparent); mask-image: radial-gradient(90% 60% at 50% 20%, #000, transparent);
}
.theme-digital.mode-light .sky::before { background: linear-gradient(rgba(14, 122, 104, .07) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(14, 122, 104, .07) 1px, transparent 1px) 0 0 / 28px 28px; }
.theme-digital .edge { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), linear-gradient(150deg, #16957F, #24282B); }
.theme-digital .front {
  background: linear-gradient(150deg, #313438 0%, #24272A 50%, #1A1C1E 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
/* the teal board on the side away from the name, notched where the chip sits */
.theme-digital .front-rings i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 42%; background: linear-gradient(160deg, #1BA38B, #0E6E5F); clip-path: polygon(0 0, 100% 0, 100% 22%, 84% 32%, 84% 68%, 100% 78%, 100% 100%, 0 100%); }
.theme-digital .front-rings i:nth-child(2) { left: 0; top: 0; bottom: 0; width: 42%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 143 214' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23E8D8A0' stroke-opacity='.85' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M113 84H98L74.6 58H78.2M113 91H98L80.9 72H63.2M113 98H98L87.2 86H37.2M113 105H98L93.5 100H51.2M113 112H98L96.2 114H25.2M113 119H98L89.9 128H43.2M113 126H98L83.6 142H61.2M113 133H98L77.3 156H79.2M18 186H52L62 176H90M30 200H70L78 192H104'/%3E%3Ccircle cx='75' cy='58' r='3.2'/%3E%3Ccircle cx='60' cy='72' r='3.2'/%3E%3Ccircle cx='34' cy='86' r='3.2'/%3E%3Ccircle cx='48' cy='100' r='3.2'/%3E%3Ccircle cx='22' cy='114' r='3.2'/%3E%3Ccircle cx='40' cy='128' r='3.2'/%3E%3Ccircle cx='58' cy='142' r='3.2'/%3E%3Ccircle cx='76' cy='156' r='3.2'/%3E%3Ccircle cx='90' cy='176' r='2.6'/%3E%3Ccircle cx='104' cy='192' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 100% 100% no-repeat; }
.theme-digital .front-rings i:nth-child(3) { left: calc(42% - 30px); top: 36%; width: 56px; height: 28%; border-radius: 7px; background: linear-gradient(160deg, #22252A, #141618); box-shadow: inset 0 0 0 1px rgba(var(--trace-rgb), .4), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.theme-digital .front-rings i:nth-child(4) { left: calc(42% - 17px); top: calc(50% - 9px); width: 30px; height: 18px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(var(--trace-rgb), .55) 0 2px, transparent 2px 5px) 0 0 / 100% 3px no-repeat, repeating-linear-gradient(90deg, rgba(var(--trace-rgb), .55) 0 2px, transparent 2px 5px) 0 100% / 100% 3px no-repeat, linear-gradient(rgba(63, 211, 182, .2), rgba(63, 211, 182, .2)) 50% 50% / 60% 40% no-repeat; }
.theme-digital .front-name { letter-spacing: .01em; }
.theme-digital .front-role { color: #7FE0CC; opacity: 1; }
.theme-digital .front-avatar { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px rgba(27, 163, 139, .6), 0 14px 28px -10px rgba(0, 0, 0, .6); }
.theme-digital .front-chip, .theme-digital .front-chip img { border-radius: 10px; }
.theme-digital .front-chip { background: rgba(255, 255, 255, .14); }
.theme-digital .holo { opacity: .2; }
.theme-digital .back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.theme-digital .back::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(#16957F, #16957F) 0 0 / 100% 7px no-repeat, linear-gradient(#16957F, #16957F) 0 100% / 100% 7px no-repeat; pointer-events: none; }
.theme-digital.mode-light .back { --back-txt: #F2F5F4; --back-hint: #B8C4C1; }
.theme-digital .back-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #E8D8A0; }
.theme-digital .back-qr { box-shadow: 0 0 0 4px rgba(27, 163, 139, .6); }
.theme-digital .floor span { border-color: rgba(63, 211, 182, .85); box-shadow: 0 0 16px rgba(63, 211, 182, .45), inset 0 0 16px rgba(63, 211, 182, .2); }
.theme-digital .lk, .theme-digital .hrs, .theme-digital .xch-open, .theme-digital .notice-x { border-radius: 16px; }
.theme-digital .lk-ic, .theme-digital .hrs-ic { border-radius: 12px; }

/* ═══════════════ Game shop: a purple console card with an RGB light strip ═══════════════ */
.pf.theme-gamestore {
  --rgb: linear-gradient(90deg, #00F0FF, #7B2FF7, #FF2E97, #FFB000, #00F0FF);
  --sky:
    radial-gradient(60% 45% at 85% -5%, rgba(123, 47, 247, .42), transparent 70%),
    radial-gradient(60% 45% at 0% 100%, rgba(255, 46, 151, .22), transparent 70%),
    radial-gradient(40% 30% at 10% 10%, rgba(0, 240, 255, .12), transparent 70%),
    #0A0614;
  --page: #0A0614;
  --txt-2: #C8BAE8; --txt-3: #9485BA;
  --edge: rgba(192, 139, 255, .18);
  --row: linear-gradient(160deg, rgba(192, 139, 255, .1), rgba(192, 139, 255, .03)), #120A22;
  --row-shadow: inset 0 0 0 1px rgba(192, 139, 255, .22), inset 0 -2px 0 rgba(0, 240, 255, .4);
  --key: linear-gradient(160deg, #2A1550, #140A28);
  --key-shadow: inset 0 0 0 1.5px rgba(0, 240, 255, .45), 0 16px 30px -16px rgba(255, 46, 151, .7);
  --back: linear-gradient(150deg, #23104C, #0A0614);
}
.pf.theme-gamestore.mode-light {
  --sky: radial-gradient(70% 45% at 85% -5%, rgba(123, 47, 247, .14), transparent 70%), linear-gradient(180deg, #FBF8FF 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #180C33; --txt-2: #4A3C6E; --txt-3: #6E6190;
  --edge: rgba(106, 31, 214, .12);
  --row: #FFFFFF;
  --row-shadow: inset 0 0 0 1px rgba(106, 31, 214, .14), inset 0 -2px 0 rgba(255, 46, 151, .5), 0 14px 30px -24px rgba(106, 31, 214, .6);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(106, 31, 214, .3), 0 14px 26px -16px rgba(255, 46, 151, .5);
  --back: linear-gradient(150deg, #FFFFFF, var(--paper-2));
}
.theme-gamestore .sky::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='%23C08BFF' fill-opacity='.35'/%3E%3C/svg%3E") 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(85% 60% at 50% 25%, #000, transparent); mask-image: radial-gradient(85% 60% at 50% 25%, #000, transparent); }
.theme-gamestore.mode-light .sky::before { opacity: .8; }
.theme-gamestore .front {
  background: radial-gradient(80% 90% at 100% 0%, rgba(255, 46, 151, .45), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(0, 240, 255, .28), transparent 60%), linear-gradient(150deg, #5E22D6 0%, #2A0E63 55%, #14062E 100%);
  box-shadow: inset 0 0 0 1px rgba(192, 139, 255, .4), 0 50px 90px -40px rgba(123, 47, 247, .95);
}
.theme-gamestore .front-rings i:nth-child(1), .theme-gamestore .front-rings i:nth-child(2) { left: 0; width: 200%; background: var(--rgb) 0 0 / 50% 100% repeat-x; }
.theme-gamestore .front-rings i:nth-child(1) { bottom: 0; height: 5px; }
.theme-gamestore .front-rings i:nth-child(2) { top: 0; height: 2px; opacity: .75; }
.motion .landed.theme-gamestore .front-rings i:nth-child(1), .motion .landed.theme-gamestore .front-rings i:nth-child(2) { animation: rgb-run 5s linear infinite !important; }
.lite.motion .landed.theme-gamestore .front-rings i:nth-child(1), .lite.motion .landed.theme-gamestore .front-rings i:nth-child(2) { animation: none !important; }
@keyframes rgb-run { to { transform: translateX(-50%); } }
.theme-gamestore .front-rings i:nth-child(3) { left: 22px; bottom: 22px; width: 104px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='1.6' stroke-linejoin='round'%3E %3Cpath d='M15 9h10v8h8v10h-8v8H15v-8H7V17h8z'/%3E%3Ccircle cx='82' cy='11' r='4.6'/%3E%3Ccircle cx='92' cy='22' r='4.6'/%3E%3Ccircle cx='82' cy='33' r='4.6'/%3E%3Ccircle cx='72' cy='22' r='4.6'/%3E %3Crect x='40' y='20' width='8' height='4' rx='2'/%3E%3Crect x='52' y='20' width='8' height='4' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.theme-gamestore .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 6.8vw, 1.95rem); line-height: 1.3; text-shadow: 0 0 18px rgba(255, 46, 151, .55), 0 2px 0 rgba(0, 0, 0, .3); }
.theme-gamestore .front-avatar { border-radius: 18px; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #7B2FF7, 0 0 22px 6px rgba(0, 240, 255, .4); }
.theme-gamestore .front-chip, .theme-gamestore .front-chip img { border-radius: 10px; }
.theme-gamestore .back::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rgb); pointer-events: none; }
.theme-gamestore .back { box-shadow: inset 0 0 0 1.5px rgba(192, 139, 255, .45); }
.theme-gamestore .back-qr { box-shadow: 0 0 0 3px #7B2FF7, 0 0 18px 4px rgba(0, 240, 255, .35); }
.theme-gamestore .floor span { border-color: rgba(0, 240, 255, .85); }
.theme-gamestore .floor span:nth-child(2) { border-color: rgba(255, 46, 151, .85); box-shadow: 0 0 16px rgba(255, 46, 151, .55); }
.theme-gamestore .lk, .theme-gamestore .hrs, .theme-gamestore .xch-open, .theme-gamestore .notice-x { border-radius: 16px; }
.theme-gamestore .lk-ic, .theme-gamestore .hrs-ic { border-radius: 12px; }

/* ═══════════════ Tactical: a military shooter's operator card ═══════════════
   Digital camo under a game HUD: a compass strip, target brackets locked on the photo, a radar minimap with a sweep;
   gold HUD marks on gunmetal. Rows and keys are chamfered HUD panels. */
.pf.theme-tactical {
  --gold: #E8B54A; --gold-rgb: 232, 181, 74;
  --camo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 0h12v4h-12zM28 0h12v4h-12zM0 4h8v4h-8zM28 4h8v4h-8zM0 8h8v4h-8zM28 8h8v4h-8zM0 12h8v4h-8zM28 12h4v4h-4zM76 12h4v4h-4zM0 16h4v4h-4zM24 16h8v4h-8zM76 16h4v4h-4zM0 20h4v4h-4zM24 20h4v4h-4zM56 20h4v4h-4zM76 20h4v4h-4zM24 24h4v4h-4zM52 24h8v4h-8zM72 24h8v4h-8zM48 28h12v4h-12zM72 28h8v4h-8zM48 32h8v4h-8zM72 32h4v4h-4zM44 36h12v4h-12zM44 40h12v4h-12zM16 44h4v4h-4zM40 44h12v4h-12zM16 48h4v4h-4zM40 48h12v4h-12zM16 52h4v4h-4zM40 52h12v4h-12zM12 56h4v4h-4zM36 56h12v4h-12zM12 60h4v4h-4zM36 60h12v4h-12zM8 64h8v4h-8zM32 64h12v4h-12zM8 68h8v4h-8zM32 68h12v4h-12zM4 72h8v4h-8zM32 72h12v4h-12zM4 76h8v4h-8zM28 76h12v4h-12z' fill='%23262A23'/%3E%3Cpath d='M76 4h4v4h-4zM20 12h8v4h-8zM48 12h8v4h-8zM16 16h8v4h-8zM8 20h16v4h-16zM4 24h16v4h-16zM68 28h4v4h-4zM64 32h8v4h-8zM60 36h8v4h-8zM56 40h8v4h-8zM52 44h12v4h-12zM52 48h8v4h-8zM52 52h4v4h-4zM24 56h12v4h-12zM16 60h12v4h-12zM16 64h8v4h-8zM68 64h8v4h-8zM60 68h12v4h-12zM60 72h4v4h-4z' fill='%2330352B'/%3E%3Cpath d='M44 0h8v4h-8zM44 4h8v4h-8zM40 8h12v4h-12zM40 12h8v4h-8zM36 16h12v4h-12zM36 20h12v4h-12zM36 24h8v4h-8zM8 28h4v4h-4zM32 28h12v4h-12zM8 32h4v4h-4zM32 32h8v4h-8zM4 36h8v4h-8zM32 36h8v4h-8zM4 40h4v4h-4zM32 40h4v4h-4zM0 44h8v4h-8zM28 44h8v4h-8zM0 48h8v4h-8zM28 48h4v4h-4zM0 52h4v4h-4zM28 52h4v4h-4zM0 56h4v4h-4zM76 56h4v4h-4zM76 60h4v4h-4zM76 64h4v4h-4zM52 68h4v4h-4zM48 72h8v4h-8zM48 76h8v4h-8z' fill='%23131512'/%3E%3C/svg%3E");
  --sky: radial-gradient(60% 40% at 50% -6%, rgba(var(--gold-rgb), .12), transparent 70%), linear-gradient(180deg, #15171A, #0A0B0C 60%);
  --page: #0A0B0C;
  --txt: #ECEAE2; --txt-2: #BAB9AF; --txt-3: #8B8A80;
  --edge: rgba(var(--gold-rgb), .14);
  --row: linear-gradient(90deg, rgba(var(--gold-rgb), .07), rgba(255, 255, 255, .015) 60%), #121411;
  --row-shadow: inset -3px 0 0 var(--gold), inset 0 0 0 1px rgba(var(--gold-rgb), .16);
  --key: #121411;
  --key-shadow: inset 0 0 0 1.5px rgba(var(--gold-rgb), .5), 0 14px 26px -18px rgba(0, 0, 0, .9);
  --back: #1B1E1A;
  --back-txt: #ECEAE2; --back-hint: #BAB9AF;
}
[dir="ltr"] .pf.theme-tactical { --row-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(var(--gold-rgb), .16); }
.pf.theme-tactical.mode-light {
  --sky: linear-gradient(180deg, #F8F7F3 0%, var(--paper) 55%, var(--paper-2) 100%);
  --page: var(--paper);
  --txt: #161814; --txt-2: #474A42; --txt-3: #6A6D64;
  --edge: rgba(22, 24, 20, .12);
  --row: #FFFFFF;
  --row-shadow: inset -4px 0 0 var(--gold), inset 0 0 0 1px rgba(22, 24, 20, .14), 0 14px 28px -24px rgba(22, 24, 20, .55);
  --key: #FFFFFF;
  --key-shadow: inset 0 0 0 1.5px rgba(22, 24, 20, .35), 0 12px 24px -18px rgba(22, 24, 20, .6);
}
[dir="ltr"] .pf.theme-tactical.mode-light { --row-shadow: inset 4px 0 0 var(--gold), inset 0 0 0 1px rgba(22, 24, 20, .14), 0 14px 28px -24px rgba(22, 24, 20, .55); }
.theme-tactical .sky::before { content: ''; position: absolute; inset: 0; background: var(--camo) 0 0 / 120px 120px; opacity: .45; -webkit-mask-image: radial-gradient(90% 60% at 50% 18%, #000, transparent); mask-image: radial-gradient(90% 60% at 50% 18%, #000, transparent); }
.theme-tactical .sky::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.theme-tactical.mode-light .sky::before { opacity: .05; }
.theme-tactical.mode-light .sky::after { display: none; }

/* The card: gunmetal camo, bevelled corners where the browser can draw them. */
.theme-tactical .face, .theme-tactical .edge, .theme-tactical .card-hit { border-radius: 6px; }
@supports (corner-shape: bevel) { .theme-tactical .face, .theme-tactical .edge { border-radius: 18px 4px; corner-shape: bevel; } }
.theme-tactical .edge { background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), linear-gradient(150deg, #8A6A24, #1B1E1A); }
.theme-tactical .front {
  background: var(--camo) 0 0 / 80px 80px, #1B1E1A;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .32), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
/* shade under the name so it always reads */
.theme-tactical .front::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 75% at 100% 100%, rgba(8, 9, 8, .82), transparent 72%), linear-gradient(180deg, rgba(8, 9, 8, .45), transparent 30%); }
[dir="ltr"] .theme-tactical .front::before { background: radial-gradient(80% 75% at 0% 100%, rgba(8, 9, 8, .82), transparent 72%), linear-gradient(180deg, rgba(8, 9, 8, .45), transparent 30%); }
.theme-tactical .front-rings i:nth-child(1) {
  left: 35%; width: 36%; top: 12px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24'%3E%3Cpath d='M0 13V19M5 16V19M10 16V19M15 16V19M20 13V19M25 16V19M30 16V19M35 16V19M40 13V19M45 16V19M50 16V19M55 16V19M60 13V19M65 16V19M70 16V19M75 16V19M80 13V19M85 16V19M90 16V19M95 16V19M100 13V19M105 16V19M110 16V19M115 16V19M120 13V19M125 16V19M130 16V19M135 16V19M140 13V19M145 16V19M150 16V19M155 16V19M160 13V19' stroke='%23ECEAE2' stroke-opacity='.6' stroke-width='1'/%3E%3Ctext x='20' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3E300%3C/text%3E%3Ctext x='40' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3ENW%3C/text%3E%3Ctext x='60' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3E330%3C/text%3E%3Ctext x='100' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3E30%3C/text%3E%3Ctext x='120' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3ENE%3C/text%3E%3Ctext x='140' y='10' font-family='monospace' font-size='7' font-weight='700' text-anchor='middle' fill='%23ECEAE2' fill-opacity='.75'%3E60%3C/text%3E%3Ctext x='80' y='10.5' font-family='monospace' font-size='9' font-weight='700' text-anchor='middle' fill='%23E8B54A'%3EN%3C/text%3E%3Cpath d='M80 19.5L83.5 24H76.5Z' fill='%23E8B54A'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
[dir="ltr"] .theme-tactical .front-rings i:nth-child(1) { transform: scaleX(-1); } /* its letters read the right way round on English pages too */
.theme-tactical .front-rings i:nth-child(2) { right: 13px; top: 11px; width: 88px; height: 88px; background: linear-gradient(#E8B54A, #E8B54A) 0 0 / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 0 / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 0 / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 0 / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 100% / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 100% / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 100% / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 100% / 2px 16px no-repeat; }
.motion .landed.theme-tactical .front-rings i:nth-child(2) { animation: lock-on .7s steps(4) .15s backwards !important; }
.lite.motion .landed.theme-tactical .front-rings i:nth-child(2) { animation: none !important; }
@keyframes lock-on { from { transform: scale(1.35); opacity: 0; } 50% { opacity: 1; } }
.theme-tactical .front-rings i:nth-child(3) { left: 18px; bottom: 16px; width: 78px; height: 78px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 78'%3E%3Ccircle cx='39' cy='39' r='37' fill='%23080908' fill-opacity='.62' stroke='%23E8B54A' stroke-opacity='.85' stroke-width='1.4'/%3E %3Ccircle cx='39' cy='39' r='25' fill='none' stroke='%23E8B54A' stroke-opacity='.28'/%3E%3Ccircle cx='39' cy='39' r='13' fill='none' stroke='%23E8B54A' stroke-opacity='.28'/%3E %3Cpath d='M39 4V74M4 39H74' stroke='%23E8B54A' stroke-opacity='.22'/%3E%3Cpath d='M39.00 6.00L39.00 2.00M55.50 10.42L57.50 6.96M67.58 22.50L71.04 20.50M72.00 39.00L76.00 39.00M67.58 55.50L71.04 57.50M55.50 67.58L57.50 71.04M39.00 72.00L39.00 76.00M22.50 67.58L20.50 71.04M10.42 55.50L6.96 57.50M6.00 39.00L2.00 39.00M10.42 22.50L6.96 20.50M22.50 10.42L20.50 6.96' stroke='%23E8B54A' stroke-opacity='.7' stroke-width='1.2'/%3E %3Cpath d='M39 33L43.5 43L39 40.5L34.5 43Z' fill='%23ECEAE2'/%3E%3Ccircle cx='52' cy='24' r='2.4' fill='%23E8B54A'/%3E%3Ccircle cx='25' cy='50' r='2.4' fill='%23E8B54A'/%3E %3Ccircle cx='57' cy='48' r='2.6' fill='%23FF4B3E'/%3E%3Ccircle cx='57' cy='48' r='5' fill='none' stroke='%23FF4B3E' stroke-opacity='.5'/%3E%3Ccircle cx='28' cy='21' r='2.6' fill='%23FF4B3E'/%3E%3C/svg%3E") center / contain no-repeat; }
.theme-tactical .front-rings i:nth-child(4) { left: 21px; bottom: 19px; width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--gold-rgb), .5), rgba(var(--gold-rgb), 0) 24%, transparent); }
.motion .landed.theme-tactical .front-rings i:nth-child(4) { animation: radar 3.2s linear infinite !important; }
.lite.motion .landed.theme-tactical .front-rings i:nth-child(4) { animation: none !important; }
.theme-tactical .front-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 6.8vw, 1.95rem); line-height: 1.3; letter-spacing: .02em; color: #F2F0E8; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
[dir="ltr"] .theme-tactical .front-name { text-transform: uppercase; letter-spacing: .07em; }
.theme-tactical .front-role { color: var(--gold); opacity: 1; font-weight: 700; letter-spacing: .02em; }
.theme-tactical .front-avatar { border-radius: 3px; box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .9), 0 14px 28px -10px rgba(0, 0, 0, .7); }
.theme-tactical .front-avatar-glyph { background: rgba(255, 255, 255, .06); color: #ECEAE2; }
.theme-tactical .front-chip, .theme-tactical .front-chip img { border-radius: 4px; }
.theme-tactical .front-chip { background: rgba(8, 9, 8, .5); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .4); }
.theme-tactical .holo { display: none; }
.theme-tactical .back { background: linear-gradient(90deg, rgba(8, 9, 8, .25), rgba(8, 9, 8, .7)), var(--camo) 0 0 / 80px 80px, #1B1E1A; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .32); }
[dir="ltr"] .theme-tactical .back { background: linear-gradient(270deg, rgba(8, 9, 8, .25), rgba(8, 9, 8, .7)), var(--camo) 0 0 / 80px 80px, #1B1E1A; }
.theme-tactical .back::before { content: ''; position: absolute; inset: 9px; background: linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 0 0 / 14px 1.5px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 0 0 / 1.5px 14px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 100% 0 / 14px 1.5px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 100% 0 / 1.5px 14px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 0 100% / 14px 1.5px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 0 100% / 1.5px 14px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 100% 100% / 14px 1.5px no-repeat, linear-gradient(rgba(232, 181, 74, .65), rgba(232, 181, 74, .65)) 100% 100% / 1.5px 14px no-repeat; pointer-events: none; }
.theme-tactical .back-qr { position: relative; border-radius: 2px; box-shadow: none; }
.theme-tactical .back-qr::after { content: ''; position: absolute; inset: -7px; background: linear-gradient(#E8B54A, #E8B54A) 0 0 / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 0 / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 0 / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 0 / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 100% / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 0 100% / 2px 16px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 100% / 16px 2px no-repeat, linear-gradient(#E8B54A, #E8B54A) 100% 100% / 2px 16px no-repeat; pointer-events: none; }
.theme-tactical .back-url { color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.theme-tactical.mode-light .back { --back-txt: #ECEAE2; --back-hint: #BAB9AF; }
/* The ground: a gold radar sweep instead of ripples. */
.theme-tactical .floor span { border-color: rgba(var(--gold-rgb), .7); box-shadow: 0 0 14px rgba(var(--gold-rgb), .35); }
.theme-tactical .floor::before {
  content: ''; position: absolute; width: 520px; height: 520px; left: -260px; top: -260px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--gold-rgb), .3), rgba(var(--gold-rgb), 0) 22%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.motion .landed.theme-tactical .floor::before { animation: radar 4.8s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }

/* HUD panels: square, with one chamfered corner; focus rings drawn inside, since the cut would hide them. */
.theme-tactical .lk, .theme-tactical .hrs, .theme-tactical .xch-open, .theme-tactical .notice-x, .theme-tactical .tool {
  border-radius: 2px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.theme-tactical .hrs-head { border-radius: 2px; }
.theme-tactical .xch-open::before { display: none; }
.theme-tactical .xch-open { background: linear-gradient(90deg, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), .03) 70%), #121411; box-shadow: inset -3px 0 0 var(--gold), inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
[dir="ltr"] .theme-tactical .xch-open { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
.theme-tactical.mode-light .xch-open { background: #FFFFFF; }
.theme-tactical .lk:focus-visible, .theme-tactical .hrs-head:focus-visible, .theme-tactical .xch-open:focus-visible, .theme-tactical .tool:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.theme-tactical .lk-ic, .theme-tactical .hrs-ic, .theme-tactical .xch-open-ic, .theme-tactical .hrs-ic::after { border-radius: 2px; }
.theme-tactical .lk-ic, .theme-tactical .hrs-ic { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); }
.theme-tactical .key-ic { border-radius: 2px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.theme-tactical .key-ic::after { display: none; }
.theme-tactical .key:focus-visible .key-ic { box-shadow: inset 0 0 0 3px var(--gold); }
.theme-tactical .save { border-radius: 3px; }
.theme-tactical .save::after { border-radius: 2px; }
.theme-tactical .save-rim { clip-path: inset(0 round 3px); }
.theme-tactical .vid-rim { clip-path: inset(0 round 4px); }
.theme-tactical .vid-frame { border-radius: 4px; }
.theme-tactical .vid-wait, .theme-tactical .vid-frame iframe { border-radius: 3px; }
.theme-tactical .hrs-week li { border-radius: 2px; }
.theme-tactical .lang-sw, .theme-tactical .lang-knob, .theme-tactical .lang-opt, .theme-tactical .thm-open { border-radius: 4px; }
.theme-tactical .cat-open { border-radius: 3px; }