/* ============================================================================================
   Jet Lag: Latvia - design system.
   Each theme sets a full "personality" through variables (shape, border, shadow, type, background),
   not just colours. User customisation (accent, roundness, text size, density, pattern, card/button style,
   motion, map look) is layered on top through data-attributes and inline variables set by js/theme.js.
   ============================================================================================ */

/* ---------- 1. sakura: kawaii / soft pastel (default) ---------- */
:root, [data-theme="sakura"] {
  --bg: #fff3f6; --bg2: #ffe4ec; --surface: #ffffff; --surface2: #fff8fa; --line: #f6d3de; --line2: #eebccd;
  --text: #3e2432; --dim: #8f6c7d; --accent: #e2457f; --accent-ink: #ffffff; --accent-deep: #b52d62; --accent-soft: #ffe1eb; --ink-accent: #b52d62;
  --good: #2e9d69; --warn: #d98600; --bad: #d4314d; --gold: #f2b84b;
  --font-d: 'M PLUS Rounded 1c', 'Nunito', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', sans-serif; --font-b: 'Nunito', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', sans-serif;
  --fw-d: 800; --tt-d: none; --ls-d: -.01em; --fs: 16px; --fw-b: 600;
  --r0: 22px; --rsm0: 14px; --rbtn0: 999px; --bw: 1.5px; --bs: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px -12px rgba(190,60,110,.28);
  --card-bg: linear-gradient(180deg, var(--surface), var(--surface2)); --card-blur: 0px;
  --btn-ledge: 3px; --btn-bd: 0px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='0' cy='28' r='26'/%3E%3Ccircle cx='0' cy='28' r='18'/%3E%3Ccircle cx='0' cy='28' r='10'/%3E%3Ccircle cx='56' cy='28' r='26'/%3E%3Ccircle cx='56' cy='28' r='18'/%3E%3Ccircle cx='56' cy='28' r='10'/%3E%3Ccircle cx='28' cy='14' r='26'/%3E%3Ccircle cx='28' cy='14' r='18'/%3E%3Ccircle cx='28' cy='14' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --pat-op: .055; --body-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(.8) sepia(.12) hue-rotate(-12deg);
}
/* ---------- 3. sora: frosted glass sky ---------- */
[data-theme="sora"] {
  --bg: #e6f2fc; --bg2: #cfe4f6; --surface: rgba(255,255,255,.62); --surface2: rgba(255,255,255,.45); --line: rgba(255,255,255,.85); --line2: rgba(120,170,215,.45);
  --text: #17304a; --dim: #54738f; --accent: #2e83d0; --accent-ink: #ffffff; --accent-deep: #1e63a6; --accent-soft: rgba(46,131,208,.14); --ink-accent: #1e63a6;
  --good: #2a9d73; --warn: #cf8a00; --bad: #d1415a; --gold: #f0bb4a;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: 0; --fs: 16px; --fw-b: 600;
  --r0: 30px; --rsm0: 18px; --rbtn0: 999px; --bw: 1px; --bs: 0 10px 40px -14px rgba(40,100,170,.35), 0 1px 0 rgba(255,255,255,.9) inset;
  --card-bg: var(--surface); --card-blur: 16px; --btn-ledge: 0px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #5aa9e6, var(--accent));
  --pat-mask: none; --pat-op: 0;
  --body-bg: radial-gradient(60vmax 40vmax at 15% 8%, rgba(255,255,255,.9), transparent 60%), radial-gradient(50vmax 36vmax at 85% 20%, rgba(190,225,255,.9), transparent 62%), radial-gradient(70vmax 50vmax at 50% 105%, rgba(255,255,255,.7), transparent 60%), linear-gradient(180deg, #bfe0fb 0%, #e8f4ff 55%, #f6fbff 100%);
  --tile-filter: saturate(.9) hue-rotate(8deg);
}
/* ---------- 5. latvija: folk ornament, carmine and cream ---------- */
[data-theme="latvija"] {
  --bg: #f7efe3; --bg2: #efe2cf; --surface: #fffaf1; --surface2: #faf1e2; --line: #e1cdb2; --line2: #c8a98a;
  --text: #34201a; --dim: #86675a; --accent: #9e3039; --accent-ink: #ffffff; --accent-deep: #6f1f27; --accent-soft: #f2d9d6; --ink-accent: #7c2129;
  --good: #3b7f55; --warn: #a96a12; --bad: #a8222c; --gold: #c99a3b;
  --font-d: 'Cormorant Garamond', 'Georgia', serif; --font-b: 'Lora', 'Georgia', serif;
  --fw-d: 700; --tt-d: uppercase; --ls-d: .07em; --fs: 16px; --fw-b: 400;
  --r0: 2px; --rsm0: 2px; --rbtn0: 2px; --bw: 2px; --bs: 0 0 0 4px var(--bg), 0 0 0 5px var(--line2);
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 0px; --btn-bd: 2px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 12l6-6 6 6-6 6zM12 12l6-6 6 6-6 6z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --pat-op: .05; --body-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(.75) sepia(.28);
}
/* ---------- exclusive themes (unlocked through accounts) ---------- */
/* hoshi (epic): starry night, glass cards */
[data-theme="hoshi"] {
  --bg: #0c0f2e; --bg2: #070920; --surface: rgba(30,36,88,.72); --surface2: rgba(40,46,104,.6); --line: rgba(170,175,255,.18); --line2: rgba(170,175,255,.34);
  --text: #e9ebff; --dim: #9ea5d6; --accent: #a393ff; --accent-ink: #120d33; --accent-deep: #7a68e8; --accent-soft: rgba(163,147,255,.16); --ink-accent: #c9c0ff;
  --good: #5ee0b0; --warn: #ffcf70; --bad: #ff6f8e; --gold: #ffd479;
  --font-d: 'M PLUS Rounded 1c', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 800; --tt-d: none; --ls-d: .01em; --fs: 16px; --fw-b: 600;
  --r0: 24px; --rsm0: 14px; --rbtn0: 999px; --bw: 1px; --bs: 0 0 0 1px rgba(163,147,255,.12), 0 14px 40px -16px rgba(120,100,255,.55);
  --card-bg: var(--surface); --card-blur: 14px; --btn-ledge: 0px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #b6a9ff, var(--accent-deep));
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='14' r='1.4'/%3E%3Ccircle cx='60' cy='30' r='1'/%3E%3Ccircle cx='38' cy='72' r='1.8'/%3E%3Ccircle cx='80' cy='80' r='1.2'/%3E%3Ccircle cx='24' cy='46' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  --pat-op: .5; --body-bg: radial-gradient(60vmax 40vmax at 85% -5%, rgba(130,110,255,.28), transparent 60%), radial-gradient(50vmax 40vmax at 0% 100%, rgba(80,120,255,.2), transparent 60%), var(--bg);
  --tile-filter: invert(1) hue-rotate(200deg) brightness(.8) contrast(.9) saturate(.6);
}
[data-theme="hoshi"] .card.accent { box-shadow: var(--bs), 0 0 0 1px var(--accent) inset; }
[data-theme="hoshi"] .topbar { background: rgba(12,15,46,.8); }
/* kintsugi (legendary): black lacquer mended with gold */
[data-theme="kintsugi"] {
  --bg: #141210; --bg2: #0d0c0a; --surface: #1d1a16; --surface2: #23201b; --line: #3a3326; --line2: #8a6d2c;
  --text: #f3ead3; --dim: #b3a684; --accent: #d9ab3f; --accent-ink: #1a1305; --accent-deep: #a67c1c; --accent-soft: rgba(217,171,63,.13); --ink-accent: #e8c466;
  --good: #7cc99a; --warn: #e8b04a; --bad: #e0705f; --gold: #f1c75b;
  --font-d: 'Cormorant Garamond', 'Georgia', serif; --font-b: 'Lora', 'Georgia', serif;
  --fw-d: 700; --tt-d: uppercase; --ls-d: .1em; --fs: 16px; --fw-b: 400;
  --r0: 2px; --rsm0: 2px; --rbtn0: 2px; --bw: 1px; --bs: 0 0 0 1px rgba(217,171,63,.2), 0 0 0 5px var(--bg), 0 0 0 6px rgba(217,171,63,.35);
  --card-bg: linear-gradient(160deg, var(--surface), var(--surface2)); --card-blur: 0px; --btn-ledge: 0px; --btn-bd: 1px; --btn-bg: linear-gradient(180deg, #e7c25f, var(--accent-deep));
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 40l30 10 20-25 30 40 40-10M20 120l25-35 25 15 30-30 20 20' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --pat-op: .45; --body-bg: radial-gradient(70vmax 50vmax at 50% -20%, rgba(217,171,63,.12), transparent 60%), var(--bg);
  --tile-filter: invert(1) sepia(.7) brightness(.7) contrast(.9) saturate(.8);
}
[data-theme="kintsugi"] .card { border-image: linear-gradient(135deg, #8a6d2c, #f1c75b, #8a6d2c) 1; }
[data-theme="kintsugi"] button { color: var(--accent-ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
[data-theme="kintsugi"] button.ghost, [data-theme="kintsugi"] button.soft { color: var(--ink-accent); border: 1px solid var(--line2); }
[data-theme="kintsugi"] .topbar { background: rgba(20,18,16,.9); border-bottom: 1px solid var(--line2); }
/* hanabi (mythic): fireworks over a summer festival, animated sky */
[data-theme="hanabi"] {
  --bg: #0b0a24; --bg2: #14072e; --surface: rgba(34,26,82,.74); --surface2: rgba(46,32,98,.6); --line: rgba(255,140,200,.22); --line2: rgba(255,140,200,.44);
  --text: #fff0fa; --dim: #c9a8dc; --accent: #ff5fa8; --accent-ink: #2a0618; --accent-deep: #d92f84; --accent-soft: rgba(255,95,168,.16); --ink-accent: #ff9fd0;
  --good: #66f0c2; --warn: #ffd166; --bad: #ff6b81; --gold: #ffd166;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: .02em; --fs: 16px; --fw-b: 600;
  --r0: 26px; --rsm0: 16px; --rbtn0: 999px; --bw: 1px; --bs: 0 0 28px -8px rgba(255,95,168,.5), 0 1px 0 rgba(255,255,255,.08) inset;
  --card-bg: var(--surface); --card-blur: 16px; --btn-ledge: 0px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #ff8cc4, var(--accent-deep));
  --pat-mask: none; --pat-op: 0;
  --body-bg: radial-gradient(30vmax 30vmax at 20% 20%, rgba(255,95,168,.38), transparent 65%), radial-gradient(34vmax 34vmax at 80% 30%, rgba(95,170,255,.3), transparent 65%), radial-gradient(28vmax 28vmax at 55% 80%, rgba(255,209,102,.24), transparent 65%), var(--bg);
  --tile-filter: invert(1) hue-rotate(260deg) brightness(.75) contrast(.9) saturate(.7);
}
[data-theme="hanabi"] body { background-attachment: fixed; animation: hanabi 18s ease-in-out infinite alternate; background-size: 140% 140%; }
@keyframes hanabi { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
[data-motion="off"][data-theme="hanabi"] body, [data-motion="reduced"][data-theme="hanabi"] body { animation: none; }
[data-theme="hanabi"] .topbar { background: rgba(11,10,36,.8); }

/* ---------- free themes: everybody can use them ---------- */
/* mezs: summer forest, paper-green, serif */
[data-theme="mezs"] {
  --bg: #eef5ea; --bg2: #dfeed8; --surface: #fbfdf8; --surface2: #f3f8ee; --line: #cfe1c6; --line2: #a6c79a;
  --text: #1f3324; --dim: #5f7a62; --accent: #3d7a4a; --accent-ink: #ffffff; --accent-deep: #2a5a35; --accent-soft: #dcefd9; --ink-accent: #2a5a35;
  --good: #2e9d69; --warn: #b7791f; --bad: #b5443d; --gold: #c8a243;
  --font-d: 'Lora', 'Georgia', serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: 0; --fs: 16px; --fw-b: 600;
  --r0: 10px; --rsm0: 7px; --rbtn0: 8px; --bw: 1.5px; --bs: 0 6px 18px -12px rgba(40,90,50,.4);
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 2px; --btn-bd: 0px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4C10 12 10 24 20 36C30 24 30 12 20 4ZM20 8V34' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --pat-op: .045; --body-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(.7) hue-rotate(40deg) sepia(.15);
}
/* okeans: deep sea, teal on navy */
[data-theme="okeans"] {
  --bg: #08222b; --bg2: #051820; --surface: #0e303b; --surface2: #123a47; --line: #1b4a58; --line2: #2a6c7e;
  --text: #dff7f4; --dim: #8bb9b9; --accent: #2ec4b6; --accent-ink: #04201d; --accent-deep: #1a8f84; --accent-soft: rgba(46,196,182,.14); --ink-accent: #6fe3d6;
  --good: #5fe0b0; --warn: #ffcf70; --bad: #ff7a8a; --gold: #ffd479;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: .01em; --fs: 16px; --fw-b: 600;
  --r0: 18px; --rsm0: 11px; --rbtn0: 999px; --bw: 1px; --bs: 0 12px 30px -14px rgba(0,0,0,.6);
  --card-bg: linear-gradient(180deg, var(--surface), var(--surface2)); --card-blur: 0px; --btn-ledge: 0px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #52e0d2, var(--accent-deep));
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12Q15 0 30 12T60 12' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --pat-op: .5; --body-bg: radial-gradient(60vmax 40vmax at 80% -10%, rgba(46,196,182,.18), transparent 60%), var(--bg);
  --tile-filter: invert(1) hue-rotate(160deg) brightness(.75) saturate(.6);
}
/* saulriets: warm sunset gradient */
[data-theme="saulriets"] {
  --bg: #ffe9d2; --bg2: #ffc9d3; --surface: #fffaf5; --surface2: #fff1e6; --line: #f7cdb4; --line2: #eba98a;
  --text: #4a2418; --dim: #946456; --accent: #e85d3f; --accent-ink: #ffffff; --accent-deep: #b9402a; --accent-soft: #ffe0d3; --ink-accent: #b9402a;
  --good: #2e9d69; --warn: #d98600; --bad: #d4314d; --gold: #f2b84b;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: 0; --fs: 16px; --fw-b: 600;
  --r0: 24px; --rsm0: 14px; --rbtn0: 999px; --bw: 1.5px; --bs: 0 10px 28px -14px rgba(200,80,50,.4);
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 3px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #ff8a5c, var(--accent));
  --pat-mask: none; --pat-op: 0; --body-bg: linear-gradient(170deg, #ffe9d2 0%, #ffd0c2 55%, #ffc2d6 100%);
  --tile-filter: saturate(.9) sepia(.2) hue-rotate(-10deg);
}
/* arcade: neon pixels */
[data-theme="arcade"] {
  --bg: #0b0716; --bg2: #07040f; --surface: #150d2a; --surface2: #1b1138; --line: #2d1c58; --line2: #4a2f8f;
  --text: #f4eaff; --dim: #a898d6; --accent: #ff3df2; --accent-ink: #1a0418; --accent-deep: #b81fae; --accent-soft: rgba(255,61,242,.14); --ink-accent: #3df2ff;
  --good: #3dff9a; --warn: #ffe23d; --bad: #ff4d6d; --gold: #ffe23d;
  --font-d: 'Press Start 2P', 'Courier New', monospace; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 400; --tt-d: uppercase; --ls-d: 0; --fs: 15.5px; --fw-b: 700;
  --r0: 0px; --rsm0: 0px; --rbtn0: 0px; --bw: 3px; --bs: 5px 5px 0 #3df2ff;
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 4px; --btn-bd: 3px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --pat-op: .6; --body-bg: radial-gradient(70vmax 40vmax at 50% 120%, rgba(255,61,242,.22), transparent 60%), var(--bg);
  --tile-filter: invert(1) hue-rotate(250deg) brightness(.75) saturate(.8);
}
[data-theme="arcade"] h1, [data-theme="arcade"] h2, [data-theme="arcade"] h3 { font-size: .86em; line-height: 1.5; } [data-theme="arcade"] button { font-family: var(--font-d); font-size: .62rem; }
[data-theme="arcade"] .card, [data-theme="arcade"] .modal { border-color: #3df2ff; }
/* ---------- character themes (owner only) ---------- */
/* zerotwo: crimson and pink, hearts */
[data-theme="zerotwo"] {
  --bg: #fff0f4; --bg2: #ffd6e2; --surface: #ffffff; --surface2: #fff5f8; --line: #ffc0d2; --line2: #ff8fb1;
  --text: #3a0b1c; --dim: #9a5068; --accent: #e0114a; --accent-ink: #ffffff; --accent-deep: #a80a37; --accent-soft: #ffd9e4; --ink-accent: #b80a3d;
  --good: #1f9d6f; --warn: #d98600; --bad: #c40d3c; --gold: #ff7aa2;
  --font-d: 'Bebas Neue', 'Comfortaa', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 400; --tt-d: uppercase; --ls-d: .06em; --fs: 16px; --fw-b: 700;
  --r0: 6px 22px; --rsm0: 6px; --rbtn0: 4px 14px; --bw: 2px; --bs: 6px 6px 0 rgba(224,17,74,.35);
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 3px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #ff4d83, var(--accent));
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 34C10 26 8 18 13 14c4-3 8-1 9 3 1-4 5-6 9-3 5 4 3 12-9 20z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --pat-op: .07; --body-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(1.1) hue-rotate(-20deg);
}
[data-theme="zerotwo"] h1, [data-theme="zerotwo"] h2 { font-size: 1.35em; } [data-theme="zerotwo"] .topbar { border-bottom: 3px solid var(--accent); }
/* toradora: tiger orange with stripes */
[data-theme="toradora"] {
  --bg: #fff3dd; --bg2: #ffe2b0; --surface: #fffaf0; --surface2: #fff0d6; --line: #efcf9c; --line2: #d9a45a;
  --text: #4a2a10; --dim: #94683a; --accent: #f08a24; --accent-ink: #2a1200; --accent-deep: #b8600e; --accent-soft: #ffe5c2; --ink-accent: #a8540a;
  --good: #3a9a5b; --warn: #c77a0a; --bad: #c44a2d; --gold: #f2b84b;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: 0; --fs: 16px; --fw-b: 700;
  --r0: 18px; --rsm0: 12px; --rbtn0: 14px; --bw: 3px; --bs: 5px 5px 0 #5a2a0a;
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 4px; --btn-bd: 0px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 40L22 20L28 28L48 8L60 20M0 60L20 44L34 56L60 36' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --pat-op: .06; --body-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(.9) sepia(.35) hue-rotate(-10deg);
}
[data-theme="toradora"] .card { border-color: #5a2a0a; } [data-theme="toradora"] .topbar { background: #f08a24; border-bottom: 3px solid #5a2a0a; }
/* evangelion: purple, acid green and warning orange */
[data-theme="evangelion"] {
  --bg: #170f24; --bg2: #0e0818; --surface: #21173a; --surface2: #2a1d4a; --line: #3d2c6b; --line2: #6a4bb0;
  --text: #ece4ff; --dim: #a898d6; --accent: #8cff3c; --accent-ink: #0f1a02; --accent-deep: #5fc01d; --accent-soft: rgba(140,255,60,.12); --ink-accent: #a8ff6a;
  --good: #8cff3c; --warn: #ff6a00; --bad: #ff3d5e; --gold: #ff6a00;
  --font-d: 'Cinzel', 'Georgia', serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: uppercase; --ls-d: .08em; --fs: 15.5px; --fw-b: 600;
  --r0: 2px; --rsm0: 2px; --rbtn0: 2px; --bw: 2px; --bs: 0 0 0 1px rgba(140,255,60,.25), 0 0 24px -8px rgba(140,255,60,.4);
  --card-bg: linear-gradient(180deg, var(--surface), var(--surface2)); --card-blur: 0px; --btn-ledge: 0px; --btn-bd: 2px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='40'%3E%3Cpath d='M12 0L24 0L30 10L24 20L12 20L6 10ZM35 20L47 20L53 30L47 40L35 40L29 30Z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --pat-op: .6; --body-bg: radial-gradient(60vmax 40vmax at 20% -10%, rgba(140,255,60,.1), transparent 60%), radial-gradient(50vmax 40vmax at 90% 110%, rgba(255,106,0,.12), transparent 60%), var(--bg);
  --tile-filter: invert(1) hue-rotate(240deg) brightness(.75) saturate(.6);
}
[data-theme="evangelion"] .card { border-color: var(--line2); border-left: 5px solid var(--accent); } [data-theme="evangelion"] button { letter-spacing: .1em; }
[data-theme="evangelion"] .topbar { background: rgba(23,15,36,.92); border-bottom: 2px solid var(--warn); }
/* killlakill: red, black and white slashes */
[data-theme="killlakill"] {
  --bg: #121212; --bg2: #0a0a0a; --surface: #1d1d1d; --surface2: #262626; --line: #3a3a3a; --line2: #ffffff;
  --text: #ffffff; --dim: #b8b8b8; --accent: #ff1f3d; --accent-ink: #ffffff; --accent-deep: #c40f2a; --accent-soft: rgba(255,31,61,.16); --ink-accent: #ff6178;
  --good: #3dff9a; --warn: #ffe23d; --bad: #ff1f3d; --gold: #ffe23d;
  --font-d: 'Bebas Neue', 'Impact', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 400; --tt-d: uppercase; --ls-d: .05em; --fs: 16px; --fw-b: 700;
  --r0: 0px; --rsm0: 0px; --rbtn0: 0px; --bw: 3px; --bs: 6px 6px 0 #ff1f3d;
  --card-bg: var(--surface); --card-blur: 0px; --btn-ledge: 4px; --btn-bd: 3px; --btn-bg: var(--accent);
  --pat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 60L60 0M-10 20L20 -10M40 70L70 40' stroke='%23000' stroke-width='6'/%3E%3C/svg%3E");
  --pat-op: .5; --body-bg: linear-gradient(115deg, #121212 0 58%, #1c0508 58% 60%, #121212 60%);
  --tile-filter: invert(1) grayscale(.6) brightness(.8);
}
[data-theme="killlakill"] h1, [data-theme="killlakill"] h2 { font-size: 1.4em; } [data-theme="killlakill"] .card, [data-theme="killlakill"] .modal { border-color: #fff; }
[data-theme="killlakill"] .topbar { background: #ff1f3d; border-bottom: 3px solid #fff; color: #fff; }
.theme-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; } .girl { display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .sticker { display: inline-flex; flex-direction: column; align-items: center; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.theme-card .girl { flex: none; }

/* ---------- derived, customisable variables ---------- */
:root {
  --rs: 1; --ts: 1; --sp: 1;
  --r: calc(var(--r0) * var(--rs)); --r-sm: calc(var(--rsm0) * var(--rs)); --r-btn: calc(var(--rbtn0) * var(--rs));
  --ease: cubic-bezier(.2,.8,.2,1);
}
[data-map="normal"] { --tile-filter: none; } [data-map="muted"] { --tile-filter: grayscale(.7) contrast(.9) brightness(1.05); } [data-map="dark"] { --tile-filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.55); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(var(--fs) * var(--ts)); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh; color: var(--text); font: var(--fw-b) 1rem/1.45 var(--font-b); background: var(--body-bg) fixed; overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--accent); opacity: var(--pat-op);
  -webkit-mask: var(--pat-mask); mask: var(--pat-mask);
}
body::after {  /* theme scenery (SVG in /img/bg): set per theme with --art, kept faint so text stays readable */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--art, none) var(--art-pos, center bottom) / var(--art-size, cover) no-repeat; opacity: var(--art-op, .6);
  -webkit-mask-image: var(--art-mask, none); mask-image: var(--art-mask, none);
}
#app { position: relative; z-index: 1; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: var(--fw-d); letter-spacing: var(--ls-d); text-transform: var(--tt-d); margin: 0 0 .5rem; line-height: 1.15; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.15rem; } h3 { font-size: .95rem; }
p { margin: .4rem 0; } a { color: var(--ink-accent); font-weight: 700; }
b, strong { font-weight: 700; }
.boot { padding: 2rem; color: var(--dim); }
.dim { color: var(--dim); } .small { font-size: .85rem; } .xs { font-size: .75rem; } .mono { font-family: ui-monospace, Consolas, monospace; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); } .center { text-align: center; }
.eyebrow { font: 700 .7rem var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem; }
.hide { display: none !important; }

/* ---------- layout ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: calc(12px * var(--sp)) 14px calc(80px + env(safe-area-inset-bottom)); }
.stack { display: flex; flex-direction: column; gap: calc(12px * var(--sp)); }
.row { display: flex; gap: calc(10px * var(--sp)); align-items: center; flex-wrap: wrap; }
.row.sp { justify-content: space-between; } .row.nw { flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: calc(12px * var(--sp)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mt { margin-top: calc(12px * var(--sp)); } .mt2 { margin-top: calc(20px * var(--sp)); }

/* ---------- surfaces ---------- */
.card {
  position: relative; background: var(--card-bg); border: var(--bw) solid var(--line); border-radius: var(--r); padding: calc(16px * var(--sp)); margin: calc(12px * var(--sp)) 0; box-shadow: var(--bs);
  -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur));
}
.card.accent { border-color: var(--accent); background: var(--card-bg); box-shadow: var(--bs), 0 0 0 1px var(--accent) inset; }
.card.flat { box-shadow: none; }
.card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; }
.divider { height: 0; border: 0; border-top: var(--bw) dashed var(--line2); margin: calc(12px * var(--sp)) 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: 0 0 calc(10px * var(--sp)); }
.sec-h h2 { margin: 0; } .sec-h .chip { flex: 0 1 auto; }

/* ---------- controls ---------- */
button {
  appearance: none; border: var(--btn-bd) solid transparent; border-radius: var(--r-btn); padding: calc(11px * var(--sp)) 20px; font: 700 .95rem var(--font-b); letter-spacing: .01em;
  color: var(--accent-ink); background: var(--btn-bg); cursor: pointer; box-shadow: 0 var(--btn-ledge) 0 var(--accent-deep);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s, opacity .2s, filter .2s;
}
button:hover { transform: translateY(-1px); filter: brightness(1.05); }
button:active { transform: translateY(var(--btn-ledge)); box-shadow: 0 0 0 var(--accent-deep); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
button.ghost, button.soft { color: var(--text); background: var(--surface); border: max(var(--btn-bd), 1.5px) solid var(--line2); box-shadow: 0 var(--btn-ledge) 0 var(--line2); }
button.soft { background: var(--accent-soft); border-color: transparent; color: var(--ink-accent); }
button.ghost:active, button.soft:active { box-shadow: 0 0 0 var(--line2); }
button.danger { background: var(--bad); color: #fff; box-shadow: 0 var(--btn-ledge) 0 color-mix(in srgb, var(--bad) 65%, #000); }
button.good-btn { background: var(--good); color: #fff; box-shadow: 0 var(--btn-ledge) 0 color-mix(in srgb, var(--good) 65%, #000); }
button.sm { padding: calc(6px * var(--sp)) 14px; font-size: .82rem; }
button.block { width: 100%; }
button.icon { padding: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
button.link { background: none; border: 0; box-shadow: none; color: var(--ink-accent); padding: 4px 6px; text-decoration: underline; }
button.link:hover, button.link:active { transform: none; box-shadow: none; }
input, select, textarea {
  width: 100%; color: var(--text); background: var(--surface); border: max(var(--bw), 1.5px) solid var(--line2); border-radius: var(--r-sm); padding: calc(11px * var(--sp)) 14px;
  font: var(--fw-b) 1rem var(--font-b); outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0;
}
[data-theme="sora"] input, [data-theme="sora"] select, [data-theme="sora"] textarea { background: rgba(255,255,255,.7); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { resize: vertical; min-height: 84px; }
input[type=color] { padding: 3px; height: 44px; width: 56px; } input[type=file] { padding: 8px; font-size: .9rem; } input[type=range] { padding: 0; accent-color: var(--accent); border: 0; box-shadow: none; }
label { display: block; margin: calc(12px * var(--sp)) 0 5px; color: var(--dim); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.switch { display: flex; align-items: center; gap: 12px; margin: calc(12px * var(--sp)) 0; cursor: pointer; font-weight: 700; color: var(--text); font-size: .95rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.switch .tr { width: 46px; height: 28px; border-radius: var(--r-btn); background: var(--line2); position: relative; flex: none; transition: background .2s; }
.switch .tr::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: calc(var(--r-btn) * .8); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s var(--ease); }
.switch input:checked + .tr { background: var(--accent); } .switch input:checked + .tr::after { transform: translateX(18px); }
.switch input:focus-visible + .tr { box-shadow: 0 0 0 4px var(--accent-soft); }
.seg { display: inline-flex; background: var(--accent-soft); border-radius: var(--r-btn); padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { background: transparent; color: var(--dim); box-shadow: none; border: 0; padding: calc(7px * var(--sp)) 14px; font-size: .85rem; white-space: nowrap; border-radius: var(--r-btn); }
.seg button:hover { transform: none; } .seg button:active { box-shadow: none; transform: none; }
.seg button.on { background: var(--surface); color: var(--ink-accent); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-btn); font-size: .78rem; font-weight: 700; background: var(--accent-soft); color: var(--ink-accent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.plain { background: var(--surface2); border: 1px solid var(--line2); color: var(--text); }
.chip.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 900; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: var(--bw) solid var(--line); padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.topbar .in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar .left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.topbar .right { display: flex; align-items: center; gap: 6px; flex: none; }
.topbar .name { font: var(--fw-d) 1.02rem var(--font-d); letter-spacing: var(--ls-d); text-transform: var(--tt-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--dim); padding: 4px 9px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.conn.wait i { background: var(--warn); animation: blink 1s infinite; } .conn.off i { background: var(--bad); } .conn.off { color: var(--bad); }
@media (max-width: 430px) { .conn span { display: none; } .conn { padding: 6px; } .topbar .right { gap: 4px; } .topbar button.sm { padding: 6px 10px; } .topbar .name { max-width: 34vw; } }

/* ---------- misc components ---------- */
.stat { text-align: center; } .stat .v { font: var(--fw-d) 1.55rem var(--font-d); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-d); } .stat .k { color: var(--dim); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bar { height: 10px; background: var(--accent-soft); border-radius: var(--r-btn); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: var(--r-btn); background: var(--accent); transition: width .7s var(--ease); }
.list > * { padding: calc(10px * var(--sp)) 0; border-bottom: 1px dashed var(--line2); } .list > *:last-child { border-bottom: 0; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.log { font-size: .88rem; } .log .t { color: var(--dim); font-size: .72rem; margin-right: 8px; font-variant-numeric: tabular-nums; }
.log .override, .log .flag { color: var(--warn); } .log .penalty { color: var(--bad); } .log .announce { color: var(--ink-accent); font-weight: 700; }
img.proof { max-width: 100%; border-radius: var(--r-sm); margin-top: 8px; max-height: 340px; border: 1px solid var(--line2); }
.empty { text-align: center; padding: 14px 8px; color: var(--dim); } .empty svg { margin-bottom: 6px; }
.callout { border-radius: var(--r-sm); padding: 10px 14px; background: var(--accent-soft); color: var(--ink-accent); font-weight: 700; font-size: .9rem; }
.callout.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .callout.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } .callout.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.hero { text-align: center; padding: 22px 0 8px; } .hero h1 { font-size: 2.1rem; margin: 8px 0 4px; }
.hero .jp { font: 700 .8rem var(--font-d); letter-spacing: .5em; color: var(--accent); padding-left: .5em; }
.mode { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; color: var(--text); background: var(--card-bg); border: var(--bw) solid var(--line); box-shadow: var(--bs); border-radius: var(--r); padding: 14px; margin: 10px 0; font-weight: 600; }
.mode:hover { transform: translateY(-2px); filter: none; } .mode:active { transform: scale(.99); box-shadow: var(--bs); }
.mode.on { border-color: var(--accent); background: var(--accent-soft); }
.mode:disabled { opacity: .5; cursor: not-allowed; }
.mode .kanji { font: 800 1.7rem var(--font-d); width: 54px; height: 54px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.mode b { font: var(--fw-d) 1rem var(--font-d); display: block; text-transform: var(--tt-d); }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.swatch { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: var(--r-sm); background: var(--surface); color: var(--text); border: 2px solid var(--line2); box-shadow: none; font-size: .78rem; }
.swatch:hover { transform: translateY(-2px); } .swatch:active { transform: scale(.97); box-shadow: none; }
.swatch.on { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch .pv { height: 46px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 6px; border: 1px solid rgba(0,0,0,.12); }
.swatch .pv b { display: block; height: 7px; width: 55%; border-radius: 4px; } .swatch .pv i { display: block; height: 11px; width: 38%; border-radius: 5px; }

/* ---------- modal & notices ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,14,24,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 4000; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s both; }
.modal { background: var(--surface); color: var(--text); border: var(--bw) solid var(--line); border-radius: var(--r) var(--r) 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); width: 100%; max-width: 640px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; animation: sheet .35s var(--ease) both; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); }
[data-theme="sora"] .modal { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.modal.wide { max-width: 780px; }
.modal-h { position: sticky; top: -16px; z-index: 2; margin: -16px -16px 10px; padding: 14px 16px 10px; background: inherit; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line2); }
.modal-h h2 { margin: 0; }
@media (min-width: 700px) { .modal-bg { align-items: center; } .modal { border-radius: var(--r); animation-name: pop; max-height: 88vh; } }
.notices { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.notice { pointer-events: auto; max-width: 520px; width: 100%; background: var(--surface); color: var(--text); border: var(--bw) solid var(--line2); border-left: 6px solid var(--accent); border-radius: var(--r-sm); padding: 11px 16px; font-weight: 700; box-shadow: 0 12px 32px -12px rgba(0,0,0,.4); animation: drop .5s var(--ease) both; }
.notice.card { border-left-color: var(--gold); } .notice.curse { border-left-color: var(--bad); } .notice.question, .notice.answer { border-left-color: var(--good); }
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5200; max-width: 520px; margin: 0 auto; padding: 12px 18px; border-radius: var(--r-sm); background: var(--bad); color: #fff; font-weight: 700; box-shadow: 0 12px 32px -10px rgba(0,0,0,.45); animation: rise .4s var(--ease) both; }
.toast.ok { background: var(--good); }

/* ---------- map ---------- */
.map { height: 52vh; height: 52dvh; min-height: 300px; border-radius: var(--r); border: var(--bw) solid var(--line2); overflow: hidden; background: var(--bg2); box-shadow: var(--bs); position: relative; z-index: 0; }
.map.short { height: 36vh; height: 36dvh; min-height: 230px; }
.leaflet-tile-pane { filter: var(--tile-filter); }
.leaflet-container { background: var(--bg2); font-family: var(--font-b); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); border-radius: var(--r-sm); }
.leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--line); }
.pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin span { transform: rotate(45deg); font: 800 11px var(--font-d); color: #fff; }
.cdot { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .cdot.off { opacity: .35; }
.lbl { background: var(--text); color: var(--bg); padding: 2px 8px; border-radius: var(--r-btn); font: 700 11px var(--font-b); border: 0; box-shadow: none; } .lbl:before { display: none; }
.sheet { animation: rise .3s var(--ease) backwards; }

/* ---------- tasks ---------- */
.task { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin: 8px 0; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.task[open] { border-color: var(--accent); box-shadow: var(--bs); }
.task summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.task summary::-webkit-details-marker { display: none; }
.task summary .t { font: var(--fw-d) .95rem var(--font-d); text-transform: var(--tt-d); flex: 1; min-width: 0; letter-spacing: var(--ls-d); }
.task summary::after { content: ''; width: 9px; height: 9px; border-right: 2.5px solid var(--dim); border-bottom: 2.5px solid var(--dim); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 3px; flex: none; }
.task[open] summary::after { transform: rotate(-135deg); }
.task .body { padding: 0 14px 14px; animation: fade .3s both; }
.task.done { opacity: .6; }
details.sec > summary { list-style: none; cursor: pointer; } details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary h2 { display: inline; }
details.sec > summary::after { content: ''; float: right; width: 9px; height: 9px; margin-top: 7px; border-right: 2.5px solid var(--dim); border-bottom: 2.5px solid var(--dim); transform: rotate(45deg); transition: transform .25s var(--ease); }
details.sec[open] > summary::after { transform: rotate(-135deg); }

/* ---------- game cards ---------- */
.gcard { position: relative; width: 150px; height: 214px; border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text);
  background: linear-gradient(165deg, var(--surface) 0%, var(--accent-soft) 150%); border: calc(var(--bw) + 1px) solid var(--line2); box-shadow: var(--bs); overflow: hidden; }
.gcard .kind { font: 800 .62rem var(--font-b); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-accent); }
.gcard .nm { font: var(--fw-d) .98rem/1.15 var(--font-d); text-transform: var(--tt-d); letter-spacing: var(--ls-d); } .gcard .nm { overflow-wrap: anywhere; hyphens: auto; }
.gcard .ds { font: var(--fw-b) .76rem/1.3 var(--font-b); color: var(--dim); overflow: hidden; flex: 1; }
.gcard .pips { display: flex; gap: 3px; } .gcard .pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); } .gcard .pips i.on { background: var(--accent); }
.gcard.r2 { border-color: var(--accent); } .gcard.r3 { border-color: var(--gold); background: linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, var(--gold) 24%, var(--surface)) 130%); }
.gcard.r3::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 3.6s ease-in-out infinite 1s; pointer-events: none; }
.gcard.small { width: 128px; height: 180px; padding: 10px; } .gcard.small .ds { font-size: .7rem; }
button.gcard { font-weight: 600; transition: transform .2s var(--ease); } button.gcard:hover { transform: translateY(-6px) rotate(-1deg); } button.gcard:active { transform: scale(.97); box-shadow: var(--bs); }
.flip { width: 150px; height: 214px; perspective: 900px; flex: none; }
.flip .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.flip.open .inner { transform: rotateY(180deg); }
.flip .face, .flip .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip .face { transform: rotateY(180deg); } .flip .face .gcard { width: 100%; height: 100%; }
.cback { width: 100%; height: 100%; border-radius: var(--r); background: var(--accent); border: 2.5px solid var(--accent-deep); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.cback::before { content: ''; position: absolute; inset: 8px; border-radius: calc(var(--r) * .7); border: 2px dashed rgba(255,255,255,.55); }
.cback::after { content: ''; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 8px rgba(255,255,255,.28); }
.pickrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.pickrow .opt { cursor: pointer; transition: transform .35s var(--ease), opacity .35s, filter .35s; position: relative; background: none; border: 0; box-shadow: none; padding: 0; border-radius: var(--r); }
.pickrow .opt:hover { transform: translateY(-6px); } .pickrow .opt:active { transform: scale(.98); box-shadow: none; }
.pickrow .opt.sel { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.pickrow.leaving .opt:not(.sel) { opacity: 0; transform: translateY(24px) scale(.9); } .pickrow.leaving .opt.sel { animation: fly .55s var(--ease) .1s forwards; }
@media (max-width: 420px) { .flip, .gcard { width: 128px; height: 182px; } .pickrow { gap: 8px; }  .gcard .nm { font-size: .88rem; } }
.hand { display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hand > * { scroll-snap-align: start; flex: none; animation: dealIn .55s var(--ease) both; }

/* ---------- questions, shop ---------- */
.qcat { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin: 8px 0; overflow: hidden; } .qcat[open] { border-color: var(--accent); }
.qcat summary { list-style: none; cursor: pointer; padding: 13px 16px; font: var(--fw-d) .95rem var(--font-d); text-transform: var(--tt-d); display: flex; justify-content: space-between; align-items: center; }
.qcat summary::-webkit-details-marker { display: none; }
.qcat .qs { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; animation: fade .3s both; }
.qbtn { text-align: left; background: var(--surface2); color: var(--text); border: 1.5px solid var(--line2); box-shadow: none; border-radius: var(--r-sm); padding: 10px 14px; font-weight: 600; }
.qbtn:hover { border-color: var(--accent); } .qbtn:active { transform: scale(.99); box-shadow: none; }
.qbtn.used { opacity: .55; background: transparent; } .qbtn small { display: block; color: var(--ink-accent); font-weight: 700; margin-top: 3px; }
.qbtn:disabled, .pickrow .opt:disabled, button.gcard:disabled { box-shadow: none; transform: none; }
.qitem { border-left: 5px solid var(--accent); padding: 8px 12px; background: var(--surface2); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 8px 0; animation: rise .4s var(--ease) backwards; }
.qitem.yes { border-color: var(--good); } .qitem.no { border-color: var(--bad); } .qitem.wait { border-color: var(--warn); }
.shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.shop .item { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.shop .item b { font-family: var(--font-d); text-transform: var(--tt-d); }
.price { font: var(--fw-d) 1.1rem var(--font-d); color: var(--ink-accent); }

/* ---------- theme personality extras ---------- */
[data-theme="sora"] button:not(.ghost):not(.soft):not(.link):not(.icon) { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
[data-theme="sora"] .topbar { background: rgba(255,255,255,.55); }
[data-theme="latvija"] .card { box-shadow: var(--bs); outline: 1px solid var(--line2); outline-offset: -7px; }
[data-theme="latvija"] .card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -2px; height: 7px; background: repeating-linear-gradient(135deg, var(--accent) 0 5px, transparent 5px 10px); opacity: .85; }
[data-theme="latvija"] .modal { border-radius: 0; } [data-theme="latvija"] .chip { border-radius: 2px; }

/* ---------- animation ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes dealIn { from { opacity: 0; transform: translateY(26px) rotate(4deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fly { to { transform: translateY(-90px) scale(.5); opacity: 0; } }
.stack > *, .grid > * { animation: rise .45s var(--ease) backwards; }
.stack > *:nth-child(2) { animation-delay: .05s; } .stack > *:nth-child(3) { animation-delay: .1s; } .stack > *:nth-child(4) { animation-delay: .15s; } .stack > *:nth-child(n+5) { animation-delay: .2s; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }
/* link buttons stay plain text in every theme */
html[data-theme] button.link, html[data-theme] button.link:hover, html[data-theme] button.link:active { background: none; border: 0; box-shadow: none; color: var(--ink-accent); transform: none; }

/* ============================================================================================
   Accounts: profile, collection, rarity, frames, badges, mascot skins
   ============================================================================================ */
.r-common { --rc: #9aa0a6; } .r-rare { --rc: #3b82c4; } .r-epic { --rc: #a35ee0; } .r-legendary { --rc: #f2b84b; } .r-mythic { --rc: #ff5fa8; } .r-special { --rc: #ff3d5e; }
.tr { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rc, var(--dim)); }
.chip[class*="r-"] { background: color-mix(in srgb, var(--rc) 16%, var(--surface)); color: var(--text); border: 1.5px solid var(--rc); }
.big { font: var(--fw-d) 2rem var(--font-d); color: var(--ink-accent); line-height: 1; }
.pbar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 6px 0; } .pbar u { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 99px; transition: width .5s var(--ease); }
.title-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-accent); margin: 2px 0; }
.profile-head h1 { text-transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* avatar frames */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; flex: none; font-family: var(--font-d); font-weight: 800; color: var(--ink-accent); background: var(--accent-soft); position: relative; }
.avatar b { line-height: 1; }
.avatar.f_plain { border: 3px solid var(--line2); }
.avatar.f_petal { border: 4px solid #f7a8c4; box-shadow: 0 0 0 3px #ffe1eb, 0 0 0 5px #f7a8c4; }
.avatar.f_wave { border: 4px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, repeating-conic-gradient(#4aa8e8 0 20deg, #a6dcff 20deg 40deg) border-box; }
.avatar.f_ornament { border: 4px double #b0792f; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #b0792f; }
.avatar.f_neon { border: 3px solid #38f2c0; box-shadow: 0 0 12px #38f2c0, 0 0 24px rgba(56,242,192,.5), inset 0 0 10px rgba(56,242,192,.4); }
.avatar.f_gold { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #8a6416, #ffe08a, #b5841e, #fff1b8, #8a6416) border-box; box-shadow: 0 0 14px rgba(242,184,75,.5); }
.avatar.f_prism { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from 0deg, #ff5f5f, #ffd45f, #5fff9f, #5fb4ff, #b05fff, #ff5f5f) border-box; animation: spin-ring 6s linear infinite; }
.avatar.f_storm { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from 0deg, #ff8cc4, #fff, #ff5fa8, #ffd1e8, #ff8cc4) border-box; box-shadow: 0 0 18px rgba(255,95,168,.6); animation: spin-ring 8s linear infinite; }
.avatar.f_prism b, .avatar.f_storm b, .avatar.f_galaxy b { animation: spin-ring 6s linear infinite reverse; }
@keyframes spin-ring { to { transform: rotate(360deg); } }
[data-motion="off"] .avatar, [data-motion="off"] .avatar b, [data-motion="reduced"] .avatar, [data-motion="reduced"] .avatar b { animation: none !important; }
.avatar[data-skin="s_mint"] { background: #c9f5e0; } .avatar[data-skin="s_grape"] { background: #e3d3fb; } .avatar[data-skin="s_sky"] { background: #cfe9ff; }
.avatar[data-skin="s_shadow"] { background: #2b2b36; color: #d8d8ff; } .avatar[data-skin="s_gold"] { background: #ffe9a8; } .avatar[data-skin="s_rainbow"] { background: linear-gradient(135deg, #ffd1e8, #d1e8ff, #d1ffe8); }
/* mascot skins (the equipped one applies everywhere the mascot is drawn) */
[data-skin="s_mint"] .mochi { filter: hue-rotate(135deg) saturate(1.1); } [data-skin="s_grape"] .mochi { filter: hue-rotate(-65deg); } [data-skin="s_sky"] .mochi { filter: hue-rotate(175deg); }
[data-skin="s_shadow"] .mochi { filter: brightness(.38) contrast(1.25); } [data-skin="s_gold"] .mochi { filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 6px rgba(242,184,75,.7)); }
[data-skin="s_rainbow"] .mochi { animation: skin-rainbow 5s linear infinite; } @keyframes skin-rainbow { from { filter: hue-rotate(0deg) saturate(1.4); } to { filter: hue-rotate(360deg) saturate(1.4); } }
/* collection tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
html button.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px; min-height: 64px; text-align: left; font-weight: 700; background: var(--surface2); color: var(--text); border: 2px solid var(--rc, var(--line2)); box-shadow: none; border-radius: var(--r-sm); text-transform: none; letter-spacing: 0; }
html button.tile:disabled { opacity: 1; cursor: default; } .tile .tn { font-size: .85rem; line-height: 1.15; overflow-wrap: anywhere; }
html button.tile.locked { opacity: .55; filter: grayscale(.55); } html button.tile.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.tile.r-mythic { background-image: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--rc) 28%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: shine 3.4s linear infinite; }
.tile.r-legendary { box-shadow: 0 0 10px -2px var(--rc); } @keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* stats and cabinet */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; } .stat { display: flex; flex-direction: column; } .stat b { font: var(--fw-d) 1.35rem var(--font-d); color: var(--ink-accent); } .stat span { font-size: .72rem; color: var(--dim); }
.swatch.locked { opacity: .55; filter: grayscale(.5); }
.set-sec { padding: 12px 0; border-top: 1px dashed var(--line2); } .set-sec:first-of-type { border-top: 0; } .set-sec h3 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; } .fold > summary::-webkit-details-marker { display: none; }
.fold > summary h3 { margin: 0; } .fold > summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .2s var(--ease); margin-left: 4px; }
.fold[open] > summary::after { transform: rotate(-135deg); } .fold-body { margin-top: 12px; }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; } .tiles.compact button.tile { min-height: 36px; padding: 5px 7px; } .tiles.compact .tn { font-size: .72rem; }
.owner-row { border-top: 1px dashed var(--line2); padding: 8px 0; } .owner-panel { padding: 10px 0 4px; }
.owner-json { max-height: 260px; overflow: auto; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 8px; white-space: pre-wrap; word-break: break-all; }

/* more avatar frames and mascot skins (3 per tier) */
.avatar.f_leaf { border: 4px solid #5fae6b; box-shadow: 0 0 0 3px #e3f3e1, 0 0 0 5px #5fae6b; } .avatar.f_sky { border: 4px solid #5aa9e6; box-shadow: 0 0 0 3px #e3f1ff; }
.avatar.f_ember { border: 4px solid #ff8a3d; box-shadow: 0 0 10px #ff6a00; } .avatar.f_ice { border: 4px solid #aee6ff; box-shadow: 0 0 12px #7ad0ff, inset 0 0 8px #e6f8ff; }
.avatar.f_rose { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #ff9fb8, #e0114a, #ff9fb8) border-box; box-shadow: 0 0 12px rgba(224,17,74,.4); }
.avatar.f_void { border: 4px solid #1a0b3a; box-shadow: 0 0 0 3px #6a2cff, 0 0 18px #6a2cff; }
.avatar.f_galaxy { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from 0deg, #2a0b5a, #6a2cff, #38c8ff, #ff5fa8, #2a0b5a) border-box; box-shadow: 0 0 20px rgba(106,44,255,.6); animation: spin-ring 10s linear infinite; }
.avatar[data-skin="s_rose"] { background: #ffdbe6; } .avatar[data-skin="s_lemon"] { background: #fff3b8; } .avatar[data-skin="s_ocean"] { background: #bfe6ee; } .avatar[data-skin="s_ember"] { background: #ffd2b0; }
.avatar[data-skin="s_ghost"] { background: #e8e8f0; } .avatar[data-skin="s_sakura"] { background: #ffd6e4; } .avatar[data-skin="s_glitch"] { background: #1c1c28; color: #3df2ff; } .avatar[data-skin="s_cosmic"] { background: #281a5a; color: #ffd6ff; }
[data-skin="s_rose"] .mochi { filter: hue-rotate(-25deg) saturate(1.2); } [data-skin="s_lemon"] .mochi { filter: hue-rotate(60deg) saturate(1.3) brightness(1.05); } [data-skin="s_ocean"] .mochi { filter: hue-rotate(190deg) saturate(1.3) brightness(.9); }
[data-skin="s_ember"] .mochi { filter: hue-rotate(20deg) saturate(1.6) sepia(.4); } [data-skin="s_ghost"] .mochi { filter: grayscale(1) brightness(1.2); opacity: .85; } [data-skin="s_sakura"] .mochi { filter: hue-rotate(-10deg) saturate(1.5) brightness(1.1); }
[data-skin="s_glitch"] .mochi { filter: contrast(1.4) saturate(2) hue-rotate(90deg); } [data-skin="s_cosmic"] .mochi { filter: hue-rotate(250deg) saturate(1.8) brightness(.8) drop-shadow(0 0 8px #8a5cff); }
/* aurora (mythic theme): northern lights */
[data-theme="aurora"] {
  --bg: #06121f; --bg2: #040b14; --surface: rgba(14,40,56,.78); --surface2: rgba(20,52,70,.66); --line: rgba(90,240,192,.2); --line2: rgba(90,240,192,.4);
  --text: #e2fff6; --dim: #8fc9bb; --accent: #5af0c0; --accent-ink: #032018; --accent-deep: #2bb58a; --accent-soft: rgba(90,240,192,.14); --ink-accent: #8ff5d6;
  --good: #5af0c0; --warn: #ffd166; --bad: #ff7a8a; --gold: #b6a2ff;
  --font-d: 'Comfortaa', 'Nunito', sans-serif; --font-b: 'Nunito', 'Segoe UI', sans-serif;
  --fw-d: 700; --tt-d: none; --ls-d: .02em; --fs: 16px; --fw-b: 600;
  --r0: 22px; --rsm0: 14px; --rbtn0: 999px; --bw: 1px; --bs: 0 0 30px -10px rgba(90,240,192,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  --card-bg: var(--surface); --card-blur: 16px; --btn-ledge: 0px; --btn-bd: 0px; --btn-bg: linear-gradient(135deg, #7ffad8, var(--accent-deep));
  --pat-mask: none; --pat-op: 0;
  --body-bg: radial-gradient(40vmax 22vmax at 20% 8%, rgba(90,240,192,.32), transparent 65%), radial-gradient(34vmax 22vmax at 80% 12%, rgba(120,90,255,.3), transparent 65%), radial-gradient(40vmax 20vmax at 50% 30%, rgba(60,200,255,.18), transparent 65%), var(--bg);
  --tile-filter: invert(1) hue-rotate(170deg) brightness(.75) saturate(.7);
}
[data-theme="aurora"] .topbar { background: rgba(6,18,31,.82); }
/* profile */
.portrait { display: block; object-fit: cover; border-radius: var(--r); border: var(--bw) solid var(--line2); box-shadow: var(--bs); max-width: 100%; background: var(--surface2); }
.theme-hero .portrait { width: 150px; height: 180px; } .theme-card .portrait { width: 110px; height: 132px; flex: none; }
.owner-mark { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffe08a, #d9a02f); color: #3a2600 !important; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 14px rgba(217,160,47,.45); }
.owner-mark i { width: 12px; height: 12px; background: #3a2600; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); } .owner-mark b { letter-spacing: .02em; text-transform: none; }
.bio { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.globalbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; max-width: 760px; margin: 0 auto; pointer-events: none; } .globalbar > * { pointer-events: auto; }
html button.tile.locked .tn { color: var(--dim); } html button.tile.on .tn { font-weight: 800; }

/* scenery per theme */
[data-theme="mezs"] { --art: url(/img/bg/mezs.svg); --art-op: .75; } [data-theme="okeans"] { --art: url(/img/bg/okeans.svg); --art-op: .8; } [data-theme="saulriets"] { --art: url(/img/bg/saulriets.svg); --art-op: .7; }
[data-theme="aurora"] { --art: url(/img/bg/aurora.svg); --art-op: .95; } [data-theme="hanabi"] { --art: url(/img/bg/hanabi.svg); --art-op: .9; } [data-theme="arcade"] { --art: url(/img/bg/arcade.svg); --art-op: .85; }
[data-theme="sakura"] { --art: url(/img/sakura.jpg); --art-pos: center top; --art-size: 100% auto; --art-op: .55; --art-mask: linear-gradient(#000 0, #000 12%, transparent 34%); }
.portrait.cut { border: 0; box-shadow: none; background: none; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.theme-hero .portrait.cut { width: auto; height: 210px; } .theme-card .portrait.cut { width: auto; height: 150px; }

/* symbols (shown under the profile name) */
.symbol { display: inline-block; width: 22px; height: 22px; background: var(--accent); flex: none; }
.symbol.y_star { clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); background: #f2b84b; } .symbol.y_leaf { border-radius: 0 100% 0 100%; background: #3aa655; }
.symbol.y_heart { background: #e2457f; clip-path: path('M11 21C2 15 0 9 4 5c3-3 6-1 7 2 1-3 4-5 7-2 4 4 2 10-7 16z'); }
.symbol.y_flame { border-radius: 50% 0 50% 50%; transform: rotate(-45deg) scale(.85); background: linear-gradient(#ffb347, #ff4d2e); } .symbol.y_wave { border-radius: 50%; background: repeating-radial-gradient(circle, #4aa8e8 0 3px, #cfeaff 3px 6px); }
.symbol.y_moon { border-radius: 50%; background: radial-gradient(circle at 70% 40%, transparent 42%, #e9e6ff 43%); filter: drop-shadow(0 0 4px #9d92ff); }
.symbol.y_crown { clip-path: polygon(0 100%, 0 25%, 25% 55%, 50% 0, 75% 55%, 100% 25%, 100% 100%); background: linear-gradient(#ffe08a, #d9a02f); } .symbol.y_comet { border-radius: 50% 50% 50% 0; transform: rotate(-30deg); background: linear-gradient(135deg, #fff, #7ad0ff 55%, transparent); box-shadow: 0 0 10px #7ad0ff; }
.symbol.y_sun { border-radius: 50%; background: radial-gradient(circle, #fff6c2 30%, #ffb800 60%); box-shadow: 0 0 0 3px rgba(255,184,0,.35), 0 0 14px #ffb800; } .symbol.y_void { border-radius: 50%; background: radial-gradient(circle, #000 35%, #6a2cff 62%, transparent 70%); box-shadow: 0 0 14px #6a2cff; }
.symbol.y_gem { clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%); background: linear-gradient(135deg, #9ff, #4aa8ff 50%, #b06bff); } .symbol.y_bolt { clip-path: polygon(60% 0, 20% 55%, 48% 55%, 36% 100%, 82% 40%, 54% 40%); background: linear-gradient(#fff6a0, #ffb800); }
.symbol.y_phoenix { clip-path: polygon(50% 0, 62% 30%, 100% 20%, 74% 52%, 90% 92%, 50% 70%, 10% 92%, 26% 52%, 0 20%, 38% 30%); background: linear-gradient(#ffe08a, #ff4d2e); animation: skin-rainbow 6s linear infinite; }
.symbol.y_galaxy { border-radius: 50%; background: conic-gradient(from 0deg, #2a0b5a, #6a2cff, #38c8ff, #ff5fa8, #2a0b5a); box-shadow: 0 0 12px rgba(106,44,255,.7); animation: spin-ring 8s linear infinite; }
.symbol.y_glitch { clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 40%, 70% 60%, 100% 60%, 100% 100%, 0 100%); background: linear-gradient(90deg, #ff3d6e, #3df2ff); animation: skin-rainbow 3s linear infinite; }
.tile .symbol { margin-top: 2px; }
/* friends and messages */
.friend-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); flex: none; } .dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; text-align: center; line-height: 18px; }
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; padding: 4px 2px; } .msg { max-width: 82%; padding: 7px 11px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); overflow-wrap: anywhere; } .msg.me { align-self: flex-end; background: var(--accent-soft); }
.msg small { display: block; opacity: .6; font-size: .66rem; } .msg.invite { border-style: dashed; }

/* map: fullscreen + the city panel that stays reachable inside it */
.mapwrap { position: relative; }
.map-full { position: absolute; top: 10px; right: 10px; z-index: 5; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--text); border: var(--bw) solid var(--line2); box-shadow: var(--bs); }
.mapwrap.full { position: fixed; inset: 0; z-index: 3000; background: var(--bg); }
.mapwrap.full .map { height: 100%; min-height: 0; border-radius: 0; border: 0; box-shadow: none; }
.mapwrap.full .map-panel { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; max-height: 55%; overflow: auto; max-width: 560px; margin: 0 auto; }
/* teams are colours */
.colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.colorbtn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--surface); color: var(--text); border: 2px solid color-mix(in srgb, var(--c) 45%, var(--line2)); box-shadow: none; }
.colorbtn .swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px #fff inset; }
.colorbtn .names { flex-basis: 100%; font-size: .74rem; opacity: .75; overflow-wrap: anywhere; }
.colorbtn.on { background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-color: var(--c); }
.colorbtn:disabled { opacity: .45; }
.prow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 0; border-bottom: 1px dashed var(--line2); }
.swbtn { width: 22px; height: 22px; padding: 0; border-radius: 50%; box-shadow: none; border: 2px solid transparent; flex: none; } .swbtn.on { border-color: var(--text); outline: 2px solid var(--surface); transform: scale(1.18); }
.swbtn.none { background: var(--surface2); border: 2px dashed var(--line2); }
/* race: the useful numbers on the top card */
.info-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.tile-info { text-align: center; padding: 8px 6px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.tile-info .v { font: var(--fw-d) 1.05rem var(--font-d); font-variant-numeric: tabular-nums; } .tile-info .k { color: var(--dim); font-size: .68rem; }

/* a fullscreen map is position: fixed, which a filter/transform on any ancestor would break */
.card:has(.mapwrap.full), .stack:has(.mapwrap.full), .grid:has(.mapwrap.full) { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; transform: none; }

/* task difficulty as a number */
.diffnum { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: var(--accent-soft); color: var(--ink-accent); font: 800 .85rem var(--font-b); flex: none; }
/* cards follow the theme: the back carries the theme's scenery, the face its colours and fonts */
.cback { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 78%, transparent), color-mix(in srgb, var(--accent-deep) 88%, transparent)), var(--art, none) var(--art-pos, center) / cover, var(--accent); }
.gcard { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%); }

/* phones: the game bar gets two rows (name on top, status and buttons below) so nothing is squeezed out */
@media (max-width: 430px) {
  .topbar .in { flex-wrap: wrap; row-gap: 6px; }
  .topbar .left { flex: 1 1 100%; }
  .topbar .name { max-width: none; }
  .topbar .right { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .info-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* community: people lists, podium, profile facts */
.people { display: flex; flex-direction: column; gap: 2px; }
.person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 6px; border-radius: 14px; background: transparent; color: var(--text); border: 0; box-shadow: none; }
.person:hover, .person:active { background: var(--accent-soft); transform: none; }
.person .rk { width: 22px; text-align: center; font-weight: 800; color: var(--dim); flex: none; }
.person .av { position: relative; flex: none; display: inline-flex; } .person .av i.on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--good); border: 2px solid var(--surface); }
.person .who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .person .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person .who small, .person .val small { color: var(--dim); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .val { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: tabular-nums; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-bottom: 8px; }
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 10px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); color: var(--text); box-shadow: none; min-width: 0; }
.podium .step b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium .step small { color: var(--dim); }
.podium .step .n { font: 800 .95rem var(--font-b); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line2); color: var(--text); }
.podium .s1 { padding-top: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, var(--surface2)), var(--surface2)); } .podium .s1 .n { background: var(--gold); color: #fff; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .facts b { display: block; font: var(--fw-d) 1.1rem var(--font-d); } .facts span { color: var(--dim); font-size: .7rem; }
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--dim); } .presence i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); } .presence.on { color: var(--good); } .presence.on i { background: var(--good); }
.friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; }
.fcell { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; box-shadow: none; color: var(--text); padding: 4px; min-width: 0; } .fcell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rar-rare { border-color: #4a8fd8; } .rar-epic { border-color: #9a63d8; } .rar-legendary { border-color: var(--gold); } .rar-mythic { border-color: #e0457b; }
.steps { margin: 4px 0 0; padding-left: 22px; } .steps li { margin: 4px 0; }
@media (max-width: 430px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- onimai (special look): hearts, hearts and more hearts, very cute and very excited ---------- */
[data-theme="onimai"] {
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z'/%3E%3C/svg%3E");
  --bg: #ffe6f2; --bg2: #ffc4e0; --surface: #fff9fc; --surface2: #fff0f7; --line: #ffc2dd; --line2: #ff9fcb;
  --text: #5b1740; --dim: #a65a85; --accent: #ff4d9a; --accent-ink: #ffffff; --accent-deep: #d6177a; --accent-soft: #ffd9ec; --ink-accent: #c4146f;
  --good: #2e9d69; --warn: #e0900a; --bad: #d4314d; --gold: #ffc24a;
  --font-d: 'M PLUS Rounded 1c', 'Nunito', sans-serif; --font-b: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
  --fw-d: 800; --tt-d: none; --ls-d: .01em; --fs: 16px; --fw-b: 600;
  --r0: 30px; --rsm0: 20px; --rbtn0: 999px; --bw: 2px; --bs: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 28px -12px rgba(255,60,150,.45);
  --card-bg: linear-gradient(180deg, var(--surface), var(--surface2)); --card-blur: 0px; --btn-ledge: 4px; --btn-bd: 0px; --btn-bg: linear-gradient(180deg, #ff7fb8, var(--accent));
  --pat-mask: var(--heart); --pat-op: .09;
  --body-bg: radial-gradient(60vmax 40vmax at 10% 0%, rgba(255,255,255,.85), transparent 60%), radial-gradient(45vmax 35vmax at 92% 8%, rgba(206,186,255,.55), transparent 62%), radial-gradient(45vmax 35vmax at 4% 96%, rgba(255,222,190,.6), transparent 62%), radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(255,120,190,.2) 100%), linear-gradient(180deg, var(--bg), var(--bg2));
  --tile-filter: saturate(1.15) hue-rotate(-14deg); --art: url(/img/bg/onimai.svg); --art-op: .95;
}
[data-theme="onimai"] body::before { background-size: 120px 110px; -webkit-mask-size: 120px 110px; mask-size: 120px 110px; animation: heartdrift 38s linear infinite; }
[data-theme="onimai"] body::after { animation: artpulse 2.4s ease-in-out infinite; }
@keyframes heartdrift { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 120px -110px; mask-position: 120px -110px; } }
@keyframes artpulse { 0%, 100% { opacity: .85; } 14% { opacity: 1; } 28% { opacity: .88; } 42% { opacity: .98; } }
/* very cute: stitched lace cards with a soft pink glow, candy buttons, sparkly headings, sweet details everywhere */
[data-theme="onimai"] ::selection { background: #ff4d9a; color: #fff; }
[data-theme="onimai"] { scrollbar-color: #ff7fb8 #ffe6f2; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23ff4d9a' stroke='%23fff' stroke-width='7'/%3E%3C/svg%3E") 4 4, auto; }
[data-theme="onimai"] ::-webkit-scrollbar { width: 12px; } [data-theme="onimai"] ::-webkit-scrollbar-thumb { background: linear-gradient(#ff9fcf, #ff4d9a); border-radius: 99px; border: 3px solid #ffe6f2; } [data-theme="onimai"] ::-webkit-scrollbar-track { background: #ffe6f2; }
[data-theme="onimai"] .card { outline: 2px dashed rgba(255,255,255,.95); outline-offset: -8px; box-shadow: var(--bs), 0 0 0 3px rgba(255,159,203,.5), 0 0 26px -4px rgba(255,77,154,.35); background-image: radial-gradient(circle at 12px 12px, rgba(255,77,154,.2) 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(255,77,154,.2) 0 3px, transparent 4px), var(--card-bg); }
[data-theme="onimai"] h1, [data-theme="onimai"] .brand { background: linear-gradient(90deg, #d6177a, #ff4d9a, #ff9a3c, #ff4d9a, #d6177a) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: shimmer 6s linear infinite; filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,77,154,.35)); }
[data-theme="onimai"] h1::before, [data-theme="onimai"] h1::after { -webkit-text-fill-color: initial; }
@keyframes shimmer { to { background-position: 220% 0; } }
[data-theme="onimai"] button:not(.ghost):not(.icon):not(.link):not(.tile):not(.person):not(.step):not(.fcell):not(.colorbtn):not(.special-heart) { background-image: linear-gradient(180deg, #ffb0d6 0%, #ff6fb0 45%, #ff3d8a 100%); box-shadow: 0 var(--btn-ledge) 0 #c4146f, 0 10px 18px -6px rgba(255,60,150,.7), 0 1px 0 rgba(255,255,255,.85) inset, 0 -8px 12px -6px rgba(255,255,255,.55) inset; text-shadow: 0 1px 0 rgba(160,10,90,.5); letter-spacing: .02em; position: relative; overflow: hidden; }
[data-theme="onimai"] button:not(.ghost):not(.icon):not(.link):not(.tile):not(.person):not(.step):not(.fcell):not(.colorbtn):not(.special-heart)::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); animation: gleam 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes gleam { 0%, 55% { left: -60%; } 100% { left: 130%; } }
[data-theme="onimai"] input, [data-theme="onimai"] select, [data-theme="onimai"] textarea { border-radius: 999px; border: 2px solid var(--line2); background: #fff; box-shadow: 0 3px 0 var(--line), 0 0 0 0 rgba(255,77,154,0); transition: box-shadow .2s, border-color .2s; } [data-theme="onimai"] textarea { border-radius: 22px; }
[data-theme="onimai"] input:focus, [data-theme="onimai"] select:focus, [data-theme="onimai"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-soft), 0 0 0 4px rgba(255,77,154,.28), 0 0 18px rgba(255,77,154,.4); }
[data-theme="onimai"] .chip { background: linear-gradient(180deg, #fff, var(--accent-soft)); border: 2px solid var(--line2); color: var(--ink-accent); font-weight: 800; box-shadow: 0 2px 0 var(--line); }
[data-theme="onimai"] .topbar { border-bottom: 3px dotted var(--line2); box-shadow: 0 10px 24px -14px rgba(255,60,150,.6); }
[data-theme="onimai"] .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--line2), 0 6px 14px -4px rgba(255,60,150,.55); }
[data-theme="onimai"] h2::after { content: ''; display: block; margin-top: 6px; height: 8px; background: radial-gradient(circle at 4px 4px, var(--accent) 0 2.6px, transparent 3.2px) 0 0 / 14px 8px repeat-x; opacity: .55; }
[data-theme="onimai"] .toast, [data-theme="onimai"] .modal { border: 2px solid var(--line2); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 30px rgba(255,77,154,.45); }
/* a "yandere" touch: a velvet red-wine heartbeat vignette that breathes slowly, plus a little lock that hangs on featured cards */
[data-theme="onimai"] #app::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 58%, rgba(255,128,196,.34) 100%); animation: obsessed 3.2s ease-in-out infinite; }
@keyframes obsessed { 0%, 100% { opacity: .55; } 14% { opacity: 1; } 28% { opacity: .6; } 42% { opacity: .9; } }
[data-theme="onimai"] .card.accent::before { content: ''; position: absolute; left: -10px; top: -14px; width: 38px; height: 38px; background: linear-gradient(135deg, #fff3c4, #ffc24a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 46V32a22 22 0 0 1 44 0v14h-9V32a13 13 0 0 0-26 0v14z'/%3E%3Cpath d='M50 96C12 70 6 52 18 40c10-9 24-4 32 6 8-10 22-15 32-6 12 12 6 30-32 56z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 46V32a22 22 0 0 1 44 0v14h-9V32a13 13 0 0 0-26 0v14z'/%3E%3Cpath d='M50 96C12 70 6 52 18 40c10-9 24-4 32 6 8-10 22-15 32-6 12 12 6 30-32 56z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(160,10,90,.5)); transform: rotate(-14deg); pointer-events: none; z-index: 2; }
@media (max-width: 600px) { [data-theme="onimai"] .card { outline-offset: -6px; } [data-theme="onimai"] #app::before { background: radial-gradient(ellipse at center, transparent 62%, rgba(255,128,196,.26) 100%); } }
[data-motion="off"][data-theme="onimai"] body::before, [data-motion="off"][data-theme="onimai"] body::after, [data-motion="off"][data-theme="onimai"] #app::before, [data-motion="reduced"][data-theme="onimai"] body::before, [data-motion="reduced"][data-theme="onimai"] body::after, [data-motion="reduced"][data-theme="onimai"] #app::before, [data-motion="off"][data-theme="onimai"] button::after, [data-motion="reduced"][data-theme="onimai"] button::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { [data-theme="onimai"] *, [data-theme="onimai"] *::before, [data-theme="onimai"] *::after, [data-theme="onimai"] body::before, [data-theme="onimai"] body::after { animation: none !important; } }
[data-theme="onimai"] h1::before, [data-theme="onimai"] h1::after, [data-theme="onimai"] h2::before, [data-theme="onimai"] .card.accent::after {
  content: ''; display: inline-block; background: var(--accent); -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; }
[data-theme="onimai"] h1::before, [data-theme="onimai"] h1::after { width: .8em; height: .72em; margin: 0 .25em; animation: heartbeat 1.1s ease-in-out infinite; }
[data-theme="onimai"] h1::after { animation-delay: .35s; }
[data-theme="onimai"] h2::before { width: .8em; height: .72em; margin-right: .4em; vertical-align: -.05em; animation: heartbeat 1.4s ease-in-out infinite; }
[data-theme="onimai"] .card { position: relative; }
[data-theme="onimai"] .card.accent::after { position: absolute; right: -8px; top: -14px; width: 44px; height: 40px; opacity: .85; transform: rotate(14deg); pointer-events: none; animation: heartbeat 1.2s ease-in-out infinite; }
[data-theme="onimai"] .topbar { background: rgba(255,230,242,.85); }
[data-theme="onimai"] button:not(.ghost):not(.icon):not(.link):not(.tile):not(.person):not(.step):not(.fcell):not(.colorbtn):hover { animation: heartbeat .7s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 70% { transform: scale(1); } }
[data-motion="off"][data-theme="onimai"] *, [data-motion="reduced"][data-theme="onimai"] * { animation: none !important; }
/* kawaii pass: pastel dream sky, twinkling sparkles, cat-ear avatars, a bow on every card, scalloped top bar, tap-to-pop hearts */
[data-theme="onimai"] {
  --sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath d='M40 38Q42 48 52 50Q42 52 40 62Q38 52 28 50Q38 48 40 38z' fill='%23fff'/%3E%3Cpath d='M180 22Q181.5 28.5 188 30Q181.5 31.5 180 38Q178.5 31.5 172 30Q178.5 28.5 180 22z' fill='%23ffd35e'/%3E%3Cg transform='translate(98 108) scale(.55)'%3E%3Cpath d='M22 34C10 26 8 18 13 14c4-3 8-1 9 3 1-4 5-6 9-3 5 4 3 12-9 20z' fill='%23ff9fcf'/%3E%3C/g%3E%3Cpath d='M220 181Q221.5 187.5 228 189Q221.5 190.5 220 197Q218.5 190.5 212 189Q218.5 187.5 220 181z' fill='%23fff'/%3E%3Cpath d='M60 198Q62 207 71 209Q62 211 60 220Q58 211 49 209Q58 207 60 198z' fill='%23c9b2ff'/%3E%3Ccircle cx='150' cy='232' r='3' fill='%23bfe8ff'/%3E%3Ccircle cx='232' cy='100' r='3' fill='%23ffd35e'/%3E%3Ccircle cx='12' cy='140' r='2.5' fill='%23fff'/%3E%3C/svg%3E");
  --bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46'%3E%3Cpath d='M30 22C20 6 3 8 4 21c1 12 18 11 26 1z' fill='%23ff8fc4' stroke='%23ff4d9a' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M30 22C40 6 57 8 56 21c-1 12-18 11-26 1z' fill='%23ff8fc4' stroke='%23ff4d9a' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M26 28L18 43l9-4 3 6 3-6 9 4-8-15z' fill='%23ff6fb0' stroke='%23ff4d9a' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M9 15c3-4 9-5 13-2M38 13c4-3 10-2 13 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.85'/%3E%3Ccircle cx='30' cy='22' r='5.5' fill='%23ffe08a' stroke='%23ff4d9a' stroke-width='2'/%3E%3C/svg%3E");
  accent-color: var(--accent);
}
[data-theme="onimai"] #app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: var(--sparkles) 0 0 / 260px 260px repeat; animation: sparkledrift 70s linear infinite, twinkle 3.4s ease-in-out infinite alternate; }
@keyframes sparkledrift { to { background-position: 260px 260px; } }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
/* cat ears on every avatar */
[data-theme="onimai"] .avatar::before, [data-theme="onimai"] .avatar::after { content: ''; position: absolute; top: -14%; width: 40%; height: 40%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 78%, #ffe3f1 0 26%, transparent 28%), linear-gradient(160deg, #ffb3d9, #ff6fb0); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-theme="onimai"] .avatar::before { left: 4%; transform: rotate(-20deg); transform-origin: 50% 100%; }
[data-theme="onimai"] .avatar::after { right: 4%; transform: rotate(20deg); transform-origin: 50% 100%; }
/* a bow on every card (accent cards keep their gold padlock) */
[data-theme="onimai"] .card:not(.accent)::before { content: ''; position: absolute; left: -9px; top: -13px; width: 36px; height: 28px; background: var(--bow) center / contain no-repeat; transform: rotate(-14deg); pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 2px rgba(255,60,150,.35)); }
[data-theme="onimai"] .card:not(.accent):nth-of-type(even)::before { left: auto; right: -9px; transform: rotate(14deg) scaleX(-1); }
/* squishy jelly buttons */
[data-theme="onimai"] button:not(.ghost):not(.icon):not(.link):not(.tile):not(.person):not(.step):not(.fcell):not(.colorbtn):not(.special-heart):active { animation: none; transform: translateY(var(--btn-ledge)) scale(1.04, .92); }
/* top bar: a scalloped lace edge instead of a plain line */
[data-theme="onimai"] .topbar { border-bottom: 0; padding-bottom: 10px; }
[data-theme="onimai"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none; background: radial-gradient(circle at 10px 0, rgba(255,230,242,.9) 0 8px, #ff9fcb 8.5px 10.5px, transparent 11px) 0 0 / 20px 10px repeat-x; }
/* hearts and sparkles that pop where you tap (js: theme.js) */
.tap-pop { position: fixed; z-index: 9999; pointer-events: none; font-size: 18px; line-height: 1; transform: translate(-50%, -50%); text-shadow: 0 0 6px #fff, 0 0 2px #fff; animation: tappop .85s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes tappop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot)); } }
[data-motion="off"][data-theme="onimai"] #app::after, [data-motion="reduced"][data-theme="onimai"] #app::after, [data-motion="off"][data-theme="onimai"] .topbar::after, [data-motion="reduced"][data-theme="onimai"] .topbar::after { animation: none !important; }
[data-motion="off"] .tap-pop, [data-motion="reduced"] .tap-pop { display: none; }
@media (prefers-reduced-motion: reduce) { .tap-pop { display: none; } }
/* crazy-cute pass: rising heart balloons, drifting sakura petals, twitching cat ears, swinging bows, sprinkled candy buttons */
[data-theme="onimai"] { --balloons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='600'%3E%3Cg transform='translate(30 60) rotate(-10) scale(0.55)'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23ffa6d2' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M22 30c4-8 12-9 18-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M50 90q-8 40 6 70' fill='none' stroke='%23fff' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(220 250) rotate(8) scale(0.7)'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23d4bcff' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M22 30c4-8 12-9 18-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M50 90q-8 40 6 70' fill='none' stroke='%23fff' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(120 470) rotate(-6) scale(0.5)'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23ffd2a6' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M22 30c4-8 12-9 18-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M50 90q-8 40 6 70' fill='none' stroke='%23fff' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(290 40) rotate(12) scale(0.38)'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23b8ecd0' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M22 30c4-8 12-9 18-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M50 90q-8 40 6 70' fill='none' stroke='%23fff' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(40 300) rotate(-14) scale(0.4)'%3E%3Cpath d='M50 90C8 60 0 36 14 20c12-13 28-6 36 6 8-12 24-19 36-6 14 16 6 40-36 70z' fill='%23bfe3ff' stroke='%23fff' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M22 30c4-8 12-9 18-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M50 90q-8 40 6 70' fill='none' stroke='%23fff' stroke-width='3' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"); --petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg transform='translate(40 50) rotate(30) scale(0.8)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23ffc2dd'/%3E%3C/g%3E%3Cg transform='translate(180 30) rotate(-40) scale(0.6)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23ffd9ec'/%3E%3C/g%3E%3Cg transform='translate(250 140) rotate(70) scale(0.9)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23ffb3d4'/%3E%3C/g%3E%3Cg transform='translate(90 170) rotate(-70) scale(0.7)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23ffd0e6'/%3E%3C/g%3E%3Cg transform='translate(200 250) rotate(20) scale(0.65)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23ffc2dd'/%3E%3C/g%3E%3Cg transform='translate(20 270) rotate(110) scale(0.55)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(140 100) rotate(150) scale(0.5)'%3E%3Cpath d='M0 0C-14-8-14-26-3-32L0-27 3-32C14-26 14-8 0 0z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-theme="onimai"]::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .75; background: var(--balloons) 0 0 / 360px 600px repeat; animation: balloonrise 46s linear infinite; }
html[data-theme="onimai"]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .9; background: var(--petals) 0 0 / 300px 300px repeat; animation: petalfall 28s linear infinite; }
@keyframes balloonrise { from { background-position: 0 0; } to { background-position: -360px -1200px; } }
@keyframes petalfall { from { background-position: 0 0; } to { background-position: -300px 600px; } }
/* ears twitch now and then, bows swing like they are being tugged */
@keyframes earL { 0%, 86%, 100% { transform: rotate(-20deg); } 90% { transform: rotate(-34deg); } 94% { transform: rotate(-14deg); } }
@keyframes earR { 0%, 80%, 100% { transform: rotate(20deg); } 84% { transform: rotate(34deg); } 88% { transform: rotate(12deg); } }
[data-theme="onimai"] .avatar::before { animation: earL 5.5s ease-in-out infinite; }
[data-theme="onimai"] .avatar::after { animation: earR 6.5s ease-in-out infinite; }
@keyframes bowL { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-4deg) translateY(-2px); } }
@keyframes bowR { 0%, 100% { transform: rotate(14deg) scaleX(-1); } 50% { transform: rotate(4deg) scaleX(-1) translateY(-2px); } }
[data-theme="onimai"] .card:not(.accent)::before { animation: bowL 3.6s ease-in-out infinite; }
[data-theme="onimai"] .card:not(.accent):nth-of-type(even)::before { animation-name: bowR; }
/* candy buttons get sprinkles and a ring of white frosting */
[data-theme="onimai"] button:not(.ghost):not(.icon):not(.link):not(.tile):not(.person):not(.step):not(.fcell):not(.colorbtn):not(.special-heart) {
  background-image: radial-gradient(circle at 12% 30%, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle at 30% 72%, #ffe58a 0 1.6px, transparent 2.2px), radial-gradient(circle at 58% 24%, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 78% 68%, #d4bcff 0 1.8px, transparent 2.4px), radial-gradient(circle at 92% 28%, #fff 0 1.6px, transparent 2.2px), linear-gradient(180deg, #ffb0d6 0%, #ff6fb0 45%, #ff3d8a 100%); }
/* little sparkles around small headings and labels */
[data-theme="onimai"] .eyebrow::before, [data-theme="onimai"] .eyebrow::after { content: 'º6'; color: var(--accent); display: inline-block; margin: 0 .35em; font-size: .85em; animation: twinkle 1.8s ease-in-out infinite alternate; }
[data-theme="onimai"] .eyebrow::after { animation-delay: .9s; }
[data-theme="onimai"] ::placeholder { color: #e08fb8; opacity: 1; }
[data-theme="onimai"] .brand::after { content: ' ¶1'; -webkit-text-fill-color: #ff4d9a; display: inline-block; animation: heartbeat 1.3s ease-in-out infinite; }
html[data-motion="off"][data-theme="onimai"]::before, html[data-motion="off"][data-theme="onimai"]::after, html[data-motion="reduced"][data-theme="onimai"]::before, html[data-motion="reduced"][data-theme="onimai"]::after, [data-motion="off"][data-theme="onimai"] .avatar::before, [data-motion="off"][data-theme="onimai"] .avatar::after, [data-motion="reduced"][data-theme="onimai"] .avatar::before, [data-motion="reduced"][data-theme="onimai"] .avatar::after, [data-motion="off"][data-theme="onimai"] .card::before, [data-motion="reduced"][data-theme="onimai"] .card::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme="onimai"]::before, html[data-theme="onimai"]::after { animation: none !important; } }
/* cosmic pass: a pastel galaxy behind everything - swirling nebula, twinkling stars, shooting stars, a sleepy moon, planets with faces, a tiny UFO (elements injected by theme.js) */
#cosmos { display: none; }
[data-theme="onimai"] #cosmos { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  --moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='m' cx='35%' cy='30%'%3E%3Cstop offset='0' stop-color='%23fffbe6'/%3E%3Cstop offset='1' stop-color='%23ffe08a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='url(%23m)' stroke='%23fff' stroke-width='4'/%3E%3Ccircle cx='28' cy='30' r='7' fill='%23ffd35e' opacity='.45'/%3E%3Ccircle cx='74' cy='64' r='9' fill='%23ffd35e' opacity='.4'/%3E%3Ccircle cx='66' cy='26' r='4' fill='%23ffd35e' opacity='.4'/%3E%3Cg transform='translate(50 52) scale(1.05)'%3E%3Cpath d='M-13 0q4 -5 8 0M5 0q4 -5 8 0' fill='none' stroke='%237a2a55' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M-3 7q3 4 6 0' fill='none' stroke='%237a2a55' stroke-width='2.2' stroke-linecap='round'/%3E%3Cellipse cx='-17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3Cellipse cx='17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3C/g%3E%3Cpath d='M80 10l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23fff'/%3E%3C/svg%3E"); --saturn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3CradialGradient id='p' cx='35%' cy='30%'%3E%3Cstop offset='0' stop-color='%23efe5ff'/%3E%3Cstop offset='1' stop-color='%23a98cff'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-20 60 50)'%3E%3Cellipse cx='60' cy='50' rx='54' ry='13' fill='none' stroke='%23ffb3d9' stroke-width='7'/%3E%3Ccircle cx='60' cy='50' r='30' fill='url(%23p)' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M6 50A54 13 0 0 0 114 50' fill='none' stroke='%23ff8fc4' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M6 50A54 13 0 0 0 114 50' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round' opacity='.9'/%3E%3Cg transform='translate(60 46) scale(0.9)'%3E%3Ccircle cx='-11' cy='0' r='3.6' fill='%237a2a55'/%3E%3Ccircle cx='11' cy='0' r='3.6' fill='%237a2a55'/%3E%3Ccircle cx='-10' cy='-1.2' r='1.2' fill='%23fff'/%3E%3Ccircle cx='12' cy='-1.2' r='1.2' fill='%23fff'/%3E%3Cpath d='M-3 6q3 4 6 0' fill='none' stroke='%237a2a55' stroke-width='2.2' stroke-linecap='round'/%3E%3Cellipse cx='-17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3Cellipse cx='17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --planet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='q' cx='35%' cy='30%'%3E%3Cstop offset='0' stop-color='%23e6fff2'/%3E%3Cstop offset='1' stop-color='%237fd8ff'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M22 38L20 8 44 24z' fill='%23ffb3d9' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M78 38L80 8 56 24z' fill='%23ffb3d9' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='56' r='36' fill='url(%23q)' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='30' cy='70' r='6' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='72' cy='72' r='8' fill='%23fff' opacity='.4'/%3E%3Cg transform='translate(50 54) scale(0.95)'%3E%3Ccircle cx='-11' cy='0' r='3.6' fill='%237a2a55'/%3E%3Ccircle cx='11' cy='0' r='3.6' fill='%237a2a55'/%3E%3Ccircle cx='-10' cy='-1.2' r='1.2' fill='%23fff'/%3E%3Ccircle cx='12' cy='-1.2' r='1.2' fill='%23fff'/%3E%3Cpath d='M-3 6q3 4 6 0' fill='none' stroke='%237a2a55' stroke-width='2.2' stroke-linecap='round'/%3E%3Cellipse cx='-17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3Cellipse cx='17' cy='6' rx='5' ry='3.2' fill='%23ff8fc4' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"); --ufo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cdefs%3E%3ClinearGradient id='u' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd0e8'/%3E%3Cstop offset='1' stop-color='%23c9a8ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M34 40a26 26 0 0 1 52 0z' fill='%23d9f3ff' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='52' cy='30' r='3' fill='%237a2a55'/%3E%3Ccircle cx='68' cy='30' r='3' fill='%237a2a55'/%3E%3Cpath d='M57 36q3 3 6 0' fill='none' stroke='%237a2a55' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='44' rx='54' ry='16' fill='url(%23u)' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='24' cy='46' r='4' fill='%23fff3a0'/%3E%3Ccircle cx='42' cy='52' r='4' fill='%23fff3a0'/%3E%3Ccircle cx='60' cy='55' r='4' fill='%23fff3a0'/%3E%3Ccircle cx='78' cy='52' r='4' fill='%23fff3a0'/%3E%3Ccircle cx='96' cy='46' r='4' fill='%23fff3a0'/%3E%3C/svg%3E"); --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.6'/%3E%3Ccircle cx='90' cy='14' r='1.2'/%3E%3Ccircle cx='160' cy='44' r='1.8'/%3E%3Ccircle cx='200' cy='120' r='1.3'/%3E%3Ccircle cx='60' cy='110' r='1.5'/%3E%3Ccircle cx='130' cy='160' r='1.6'/%3E%3Ccircle cx='30' cy='190' r='1.2'/%3E%3Ccircle cx='185' cy='200' r='1.6'/%3E%3C/g%3E%3Cpath d='M110 80Q111 86 117 87Q111 88 110 94Q109 88 103 87Q109 86 110 80z' fill='%23fff'/%3E%3Cpath d='M45 150Q46 154 50 155Q46 156 45 160Q44 156 40 155Q44 154 45 150z' fill='%23ffe9a8'/%3E%3Cpath d='M175 90Q176 94 180 95Q176 96 175 100Q174 96 170 95Q174 94 175 90z' fill='%23d9c8ff'/%3E%3C/svg%3E"); }
#cosmos .neb { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%; will-change: transform;
  background: conic-gradient(from 0deg, rgba(205,184,255,.7), rgba(255,170,215,.3), rgba(168,220,255,.6), rgba(255,210,230,.3), rgba(190,255,225,.5), rgba(255,200,160,.3), rgba(205,184,255,.7));
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); mask: radial-gradient(circle, #000 10%, transparent 68%); opacity: .8; animation: nebspin 160s linear infinite; }
@keyframes nebspin { to { transform: rotate(360deg); } }
#cosmos::before, #cosmos::after { content: ''; position: absolute; inset: 0; background: var(--stars) 0 0 / 220px 220px repeat; animation: twinkle 3.6s ease-in-out infinite alternate; }
#cosmos::after { background-size: 170px 170px; background-position: 60px 40px; animation-duration: 5.2s; animation-delay: -2s; opacity: .8; }
#cosmos .cz { position: absolute; background: center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(150,100,255,.35)); }
#cosmos .moon { width: clamp(64px, 11vw, 150px); aspect-ratio: 1; left: 2%; top: 36%; background-image: var(--moon); animation: bob 7s ease-in-out infinite; }
#cosmos .saturn { width: clamp(80px, 15vw, 200px); aspect-ratio: 6 / 5; right: 2%; top: 14%; background-image: var(--saturn); animation: bob 9s ease-in-out -3s infinite; }
#cosmos .planet { width: clamp(54px, 9vw, 120px); aspect-ratio: 1; right: 8%; bottom: 22%; background-image: var(--planet); animation: bob 6s ease-in-out -1s infinite; }
#cosmos .ufo { width: clamp(54px, 8vw, 100px); aspect-ratio: 3 / 2; left: 0; top: 20%; background-image: var(--ufo); animation: ufofly 42s linear 4s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-14px) rotate(5deg); } }
@keyframes ufofly { 0% { transform: translate(-20vw, 0) rotate(-6deg); } 25% { transform: translate(30vw, -18px) rotate(6deg); } 50% { transform: translate(60vw, 8px) rotate(-6deg); } 75% { transform: translate(95vw, -14px) rotate(6deg); } 100% { transform: translate(125vw, 0) rotate(-6deg); } }
#cosmos .shoot { position: absolute; left: var(--x); top: var(--y); width: 150px; height: 3px; border-radius: 3px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,214,236,.9) 70%, #fff); animation: shoot 11s linear var(--d) infinite; }
#cosmos .shoot::after { content: '\2605'; position: absolute; right: -9px; top: -9px; font-size: 16px; line-height: 1; color: #fff; text-shadow: 0 0 8px #ff9fcf, 0 0 14px #fff; }
@keyframes shoot { 0% { opacity: 0; transform: rotate(32deg) translateX(0); } 2% { opacity: 1; } 12% { opacity: 1; } 16% { opacity: 0; transform: rotate(32deg) translateX(75vmax); } 100% { opacity: 0; transform: rotate(32deg) translateX(75vmax); } }
/* the cards glow like little stars */
[data-theme="onimai"] .card { box-shadow: var(--bs), 0 0 0 3px rgba(205,184,255,.5), 0 0 30px -2px rgba(168,130,255,.4), 0 0 22px -6px rgba(255,77,154,.4); }
@media (max-width: 600px) { #cosmos .moon { left: -2%; top: 62%; } #cosmos .saturn { top: 8%; right: -2%; } #cosmos .planet { bottom: 8%; right: 2%; } }
[data-motion="off"] #cosmos *, [data-motion="reduced"] #cosmos *, [data-motion="off"] #cosmos::before, [data-motion="off"] #cosmos::after, [data-motion="reduced"] #cosmos::before, [data-motion="reduced"] #cosmos::after { animation: none !important; }
[data-motion="off"] #cosmos .shoot, [data-motion="reduced"] #cosmos .shoot, [data-motion="off"] #cosmos .ufo, [data-motion="reduced"] #cosmos .ufo { display: none; }
@media (prefers-reduced-motion: reduce) { #cosmos *, #cosmos::before, #cosmos::after { animation: none !important; } #cosmos .shoot, #cosmos .ufo { display: none; } }
/* the hidden heart (shown only to the owner, only after the special taps, only until the page is reloaded) */
.special-heart { position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 3500; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; box-shadow: none; color: var(--accent); opacity: .35; }
.special-heart:hover, .special-heart:active { opacity: .9; transform: none; }

/* pictures of the special look */
.special-pic { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r); border: var(--bw) solid var(--line2); box-shadow: var(--bs); }
.special-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .special-stickers img { height: 64px; width: auto; max-width: 30%; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 4px 6px rgba(120,20,70,.3)); }

/* the special bundle: an exclusive frame, symbol and the limited-edition markers */
.avatar.f_heartbeat { border: 5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #ff4d9a, #ffd27a, #ff4d9a, #ff9fcf) border-box; box-shadow: 0 0 14px rgba(255,77,154,.55); animation: ringbeat 1.3s ease-in-out infinite; }
@keyframes ringbeat { 0%, 100% { box-shadow: 0 0 10px rgba(255,77,154,.45); } 14% { box-shadow: 0 0 22px 3px rgba(255,77,154,.8); } 28% { box-shadow: 0 0 10px rgba(255,77,154,.45); } 42% { box-shadow: 0 0 18px 2px rgba(255,77,154,.7); } }
.symbol.y_lovelock { background: radial-gradient(circle at 50% 46%, #5b1740 0 11%, transparent 12%), radial-gradient(ellipse at 50% 62%, #5b1740 0 6%, transparent 7%), linear-gradient(135deg, #ff6fb0, #ffd27a 60%, #ff9fcf); clip-path: path('M11 21C2 15 0 9 4 5c3-3 6-1 7 2 1-3 4-5 7-2 4 4 2 10-7 16z'); filter: drop-shadow(0 0 4px rgba(255,77,154,.7)); }
.edition { position: relative; overflow: hidden; padding: 9px 12px 12px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--line2); } .edition i { position: absolute; left: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--accent), #ffd27a); border-radius: 0 4px 4px 0; }
.edition-chip { background: linear-gradient(135deg, #ff4d9a, #ffb347); color: #fff; border: 0; font-weight: 800; letter-spacing: .04em; margin-top: 4px; box-shadow: 0 0 12px rgba(255,77,154,.45); }
.special-heart { animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 70% { transform: scale(1); } }