@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format("woff2")}
/* Layout concept: lab bench. Sticker-style panels (thick edge, hard shadow) like the rest of the hub, with green and amber instead of purple and lime. */
:root {
  --bg: #f3f0e4; --surface: #fffdf5; --surface-2: #e6e2cc; --ink: #1c2a20; --ink-2: #55665a; --line: #cfc9a8;
  --edge: #1c2a20; --accent: #1f7a4a; --accent-ink: #ffffff; --hi: #e07a1a; --good: #1f8a5a; --bad: #c8452a;
  --night: #123a4a; --night-2: #1d5a6e; --moon: #fff2c4;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-title: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1812; --surface: #14251c; --surface-2: #1e382a; --ink: #eef5ea; --ink-2: #a8c0ae; --line: #2a4a38;
    --edge: #020a05; --accent: #5fdc98; --accent-ink: #05200f; --hi: #ffb04a; --good: #4ade9a; --bad: #ff8a5c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1812; --surface: #14251c; --surface-2: #1e382a; --ink: #eef5ea; --ink-2: #a8c0ae; --line: #2a4a38;
  --edge: #020a05; --accent: #5fdc98; --accent-ink: #05200f; --hi: #ffb04a; --good: #4ade9a; --bad: #ff8a5c; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; padding-inline: 16px; padding-block: 0 56px; overflow-x: hidden; }
.wrap { max-width: 960px; margin-inline: auto; min-width: 0; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.12; text-wrap: balance; }
h1 { font-family: var(--font-title); font-size: clamp(1.7rem, 6.8vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.lede { color: var(--ink-2); max-width: 62ch; margin-top: 6px; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, .av:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }

header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; padding-block: 22px 16px; }
header.top p { color: var(--ink-2); max-width: 44ch; margin-top: 6px; }
.back { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; text-decoration: none; color: var(--ink); background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.top-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { font-family: var(--font-mono); font-size: 0.8rem; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--edge); border-radius: 999px; padding: 4px 12px; }
.chip.alt { background: var(--hi); color: #2a0f1a; }
.theme-btn { font-size: 0.85rem; font-weight: 700; background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 5px 13px; cursor: pointer; }

nav.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; background: var(--bg); }
nav.tabs button { font-weight: 600; background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 7px 18px; cursor: pointer; }
nav.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 3px 3px 0 var(--edge); }
section.panel { padding-top: 20px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
section.panel > * { min-width: 0; }
[hidden] { display: none !important; }

.btn { font-weight: 700; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--edge); border-radius: 12px; box-shadow: 3px 3px 0 var(--edge); padding: 9px 18px; cursor: pointer; transition: transform .08s, box-shadow .08s; text-decoration: none; display: inline-block; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn.small { padding: 4px 12px; font-size: 0.85rem; box-shadow: 2px 2px 0 var(--edge); }
.row, .run { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font-weight: 600; font-size: 0.9rem; background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--hi); color: #2a0f1a; }

/* game menu */
.gmenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.gcard { display: grid; gap: 8px; align-content: start; text-align: left; background: var(--surface); border: 2px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--edge); padding: 18px; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.gcard:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--edge); }
.gname { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.gblurb { color: var(--ink-2); font-size: 0.95rem; }
.gbest { font-family: var(--font-mono); font-size: 0.78rem; background: var(--surface-2); border: 2px solid var(--edge); border-radius: 10px; padding: 2px 10px; justify-self: start; }

/* arena */
.arena { display: grid; gap: 14px; }
.arena-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.status { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lives { display: inline-flex; gap: 3px; }
.hrt { width: 18px; height: 17px; color: var(--accent); display: inline-block; }
.hrt.lost { color: var(--line); }
.hrt svg { display: block; width: 100%; height: 100%; }
.scene { border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--edge); overflow: hidden; background: var(--night); max-width: 520px; width: 100%; margin-inline: auto; }
.scene-svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.qbox { background: var(--surface); border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--edge); padding: 18px; display: grid; gap: 14px; min-width: 0; }
.qhead { font-size: 1.15rem; }
.quote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.35; padding: 12px 16px; background: var(--surface-2); border-left: 6px solid var(--accent); border-radius: 0 12px 12px 0; position: relative; }
.blank { display: inline-block; min-width: 4.5ch; border-bottom: 3px solid var(--accent); color: transparent; font-style: normal; }
.blank.filled { color: var(--good); border-color: var(--good); font-weight: 700; text-shadow: 0 0 12px color-mix(in srgb, var(--good) 50%, transparent); }
.blank.miss { color: var(--bad); border-color: var(--bad); }
mark.hl { background: color-mix(in srgb, var(--hi) 55%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }
.stamp { display: inline-block; margin-left: 10px; font-family: var(--font-mono); font-style: normal; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); background: var(--good); border: 2px solid var(--edge); border-radius: 8px; padding: 1px 8px; transform: rotate(-5deg); animation: stampin .35s cubic-bezier(.3,1.6,.5,1); }
.stamp.off { background: var(--bad); }
@keyframes stampin { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-5deg); opacity: 1; } }
.opts { display: grid; gap: 8px; }
.opts.bins { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opt { text-align: left; font-weight: 600; background: var(--surface-2); border: 2px solid var(--edge); border-radius: 12px; padding: 10px 14px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.opt:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
.opt .key { font-family: var(--font-mono); font-size: 0.75rem; opacity: .6; }
.opt:disabled { cursor: default; }
.opt.good { background: color-mix(in srgb, var(--good) 28%, var(--surface)); border-color: var(--good); }
.opt.bad { background: color-mix(in srgb, var(--bad) 25%, var(--surface)); border-color: var(--bad); }
.fb { min-height: 1.4em; }
.fbt { padding: 8px 14px; border-left: 6px solid var(--accent); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.fbt.good { border-color: var(--good); } .fbt.bad { border-color: var(--bad); }
.hint, .note { color: var(--ink-2); font-size: 0.9rem; }

.result { background: var(--surface); border: 2px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--edge); padding: 22px; display: grid; gap: 14px; }
.bigscore { font-family: var(--font-display); font-size: 3rem; font-weight: 800; font-style: italic; }
.tip { border-left: 6px solid var(--hi); background: var(--surface-2); border-radius: 0 12px 12px 0; padding: 8px 14px; }
.tip ul { margin: 6px 0 0; padding-left: 18px; }

/* scene art */
.sky { fill: var(--night); } .star { fill: #fff; opacity: .8; animation: twinkle 3s ease-in-out infinite; } .star:nth-child(2n) { animation-delay: 1s; } .star:nth-child(3n) { animation-delay: 2s; }
@keyframes twinkle { 50% { opacity: .25; } }
.moon { fill: var(--moon); } .tower { fill: #3a2f66; } .window { fill: #ffd87a; } .balcony { fill: #5b4a94; } .rail line { stroke: #5b4a94; stroke-width: 3; }
.skin { fill: #f6d3b4; } .jhair { fill: #2a1a14; } .jdress { fill: #d8264a; } .rhair { fill: #5a3a22; } .rtunic { fill: #2b5fd9; } .eye { fill: #1b1b2f; }
.mouth { fill: none; stroke: #1b1b2f; stroke-width: 1.4; stroke-linecap: round; } .jarm, .limb { stroke: #f6d3b4; stroke-width: 3; stroke-linecap: round; }
.rail2 { stroke: #8a5a2b; stroke-width: 3; } .rung { stroke: #8a5a2b; stroke-width: 3; } .vine { fill: none; stroke: #2fa05a; stroke-width: 4; stroke-linecap: round; }
.romeo { transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.duel-svg .ground { fill: #2a2f66; } .fighter .tunic { fill: #2b5fd9; } .fighter.foe .tunic { fill: #b3122f; } .fighter .hair { fill: #5a3a22; } .fighter.foe .hair { fill: #1d1210; }
.fighter .blade { stroke: #e8eef8; stroke-width: 3; stroke-linecap: round; } .fighter .hilt { stroke: #f2b83a; stroke-width: 4; stroke-linecap: round; }
.fighter .m-sad { display: none; fill: none; stroke: #1b1b2f; stroke-width: 1.6; } .fighter .m-idle { fill: none; stroke: #1b1b2f; stroke-width: 1.6; } .fighter.hurt .m-sad { display: block; } .fighter.hurt .m-idle { display: none; }
.spark { fill: #ffd87a; stroke: #fff; stroke-width: 1.5; }
.hps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px; background: var(--night-2); }
.hp { color: #fff; font-family: var(--font-mono); font-size: 0.72rem; display: grid; gap: 3px; }
.hp .track { height: 9px; background: #0b0e24; border-radius: 6px; overflow: hidden; border: 1px solid #000; }
.hp i { display: block; height: 100%; background: #3d8bff; transition: width .4s; } .hp.foe i { background: #ff4d6a; }

/* Fate's Order */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.slot { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border: 2px dashed var(--line); border-radius: 10px; color: var(--ink-2); min-width: 0; }
.slot .num { font-family: var(--font-mono); font-size: 0.8rem; flex: none; width: 1.6em; }
.slot.done { border: 2px solid var(--edge); background: color-mix(in srgb, var(--hi) 30%, var(--surface)); color: var(--ink); animation: slotin .4s cubic-bezier(.3,1.6,.5,1); }
.slot small { font-family: var(--font-mono); color: var(--ink-2); margin-left: 6px; }
@keyframes slotin { from { transform: scale(.92); } to { transform: scale(1); } }
.ocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.ocard { text-align: left; background: var(--surface-2); border: 2px solid var(--edge); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 500; }
.ocard:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
.ocard.used { opacity: .3; cursor: default; }

/* Character Match */
.avs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.av { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; background: var(--surface-2); border: 2px solid var(--edge); border-radius: 16px; padding: 10px 6px 8px; cursor: pointer; min-width: 0; transition: background .15s, transform .15s; }
.av.target { background: color-mix(in srgb, var(--hi) 40%, var(--surface)); transform: scale(1.04); }
.av .figure { display: block; width: 84px; transform-origin: 50% 100%; }
.avsvg { display: block; width: 100%; height: auto; overflow: visible; }
.av .blush, .av .m-happy, .av .m-sad { display: none; }
.av.happy .m-idle, .av.sad .m-idle { display: none; }
.av.happy .m-happy, .av.happy .blush { display: block; } .av.sad .m-sad { display: block; }
.av .eyes { animation: blink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.aname { font-weight: 700; font-size: 0.9rem; text-align: center; }
.got { display: grid; gap: 3px; width: 100%; }
.gtag { font-size: 0.74rem; line-height: 1.25; background: var(--good); color: #fff; border-radius: 8px; padding: 2px 6px; text-align: center; animation: slotin .4s cubic-bezier(.3,1.6,.5,1); }
:root:not([data-theme="light"]) .gtag { color: #04210f; }
.bubble { position: absolute; top: -14px; left: 50%; transform: translate(-50%, 6px) scale(.8); background: #fff; color: #2a0f1a; border: 2px solid var(--edge); border-radius: 12px; font-size: 0.78rem; font-weight: 700; padding: 2px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .25s cubic-bezier(.3,1.6,.5,1); z-index: 3; }
.bubble.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 2px dashed var(--line); border-radius: 14px; min-height: 64px; }
.tcard { background: var(--surface); color: var(--ink); border: 2px solid var(--edge); border-radius: 10px; box-shadow: 2px 2px 0 var(--edge); padding: 8px 12px; font-size: 0.9rem; font-weight: 600; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; max-width: 100%; text-align: left; }
.tcard.sel { background: var(--hi); color: #2a0f1a; transform: translateY(-2px); }
.tcard.lifted { opacity: .35; }
.tcard.gone { display: none; }
.tcard.ghost { position: fixed; z-index: 80; margin: 0; cursor: grabbing; box-shadow: 6px 8px 0 rgba(0,0,0,.35); transform: rotate(-3deg) scale(1.04); background: var(--hi); color: #2a0f1a; }

/* Learn */
.lgrid, .qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.lcard { background: var(--surface); border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--edge); padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.lcard.wide { grid-column: 1 / -1; }
.lcard p { color: var(--ink-2); font-size: 0.95rem; }
.lcard .q { font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: 1rem; border-left: 4px solid var(--accent); padding-left: 10px; }
.lcard .q.big { font-size: 1.1rem; }
.angle b { color: var(--ink); } .meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent) !important; }
.lsub { margin-top: 10px; }
.evlist, .ranks { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.evlist small, .ranks small { font-family: var(--font-mono); color: var(--ink-2); margin-left: 8px; }
.ranks { list-style: none; padding: 0; } .ranks li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-2); }
.ranks li.on { border: 2px solid var(--edge); background: color-mix(in srgb, var(--hi) 35%, var(--surface)); color: var(--ink); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-btn { font-size: 0.8rem; font-weight: 600; background: var(--surface-2); border: 2px solid var(--edge); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.table-wrap { overflow-x: auto; border: 2px solid var(--edge); border-radius: 14px; background: var(--surface); box-shadow: 4px 4px 0 var(--edge); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 2px solid var(--edge); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
#me { display: grid; gap: 14px; }

/* effects */
.rj-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.rj-petal { position: absolute; width: 11px; height: 15px; border-radius: 50% 0 50% 0; }
.rj-heart { position: absolute; color: var(--accent); }
.rj-toast { position: fixed; left: 50%; bottom: 22px; z-index: 70; transform: translate(-50%, 160%); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-style: italic; font-weight: 700; padding: 11px 20px; border: 2px solid var(--edge); border-radius: 14px; box-shadow: 4px 4px 0 var(--edge); max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }
.rj-toast.on { transform: translate(-50%, 0); opacity: 1; }
.rj-waltz { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 30, .55); }
.rj-waltz-box { width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; background: var(--night); color: var(--moon); border: 2px solid var(--edge); border-radius: 18px; box-shadow: 6px 6px 0 var(--edge); padding: 14px 14px 18px; background-image: radial-gradient(circle at 50% 30%, #2d3470 0%, var(--night) 70%); }
.rj-waltz-box svg { width: 100%; height: auto; }
.rj-waltz-t { font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 1.15rem; text-align: center; }
.rj-twirl { transform-box: view-box; transform-origin: 50% 100%; animation: twirl 1.6s ease-in-out infinite; }
.rj-dancer { transform: none; }
@keyframes twirl { 0% { transform: scaleX(1) translateY(0); } 25% { transform: scaleX(.1) translateY(-8px); } 50% { transform: scaleX(-1) translateY(0); } 75% { transform: scaleX(-.1) translateY(-8px); } 100% { transform: scaleX(1) translateY(0); } }

@media (max-width: 480px) {
  body { padding-inline: 10px; }
  .qbox, .result { padding: 14px; }
  .quote { font-size: 1.05rem; }
  .top-actions { gap: 6px; } .theme-btn, .chip { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- graphics upgrade ---- */
.hero-art { margin-block: 0 14px; border: 2px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--edge); overflow: hidden; background: var(--night); line-height: 0; }
.hero-art svg { display: block; width: 100%; height: auto; max-height: 150px; }
.hero-art .hstar { animation: twinkle 3s ease-in-out infinite; } .hero-art .hstar:nth-child(2n) { animation-delay: 1s; } .hero-art .hstar:nth-child(3n) { animation-delay: 2s; }
.hero-art .glow { animation: glowpulse 3.4s ease-in-out infinite; }
@keyframes glowpulse { 50% { opacity: .55; } }
.gcard { position: relative; overflow: hidden; }
.gicon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; border: 2px solid var(--edge); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.gicon svg { width: 36px; height: 36px; }
.ic-s { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ic-g { fill: none; stroke: #d99a1a; stroke-width: 4; stroke-linecap: round; }
.ic-f { fill: var(--hi, #e0245a); stroke: none; } .ic-d { fill: currentColor; }
.ic-fs { fill: color-mix(in srgb, currentColor 14%, transparent); stroke: currentColor; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.ic-t { font: 700 11px var(--font-mono); fill: currentColor; text-anchor: middle; }
.gcard:hover .gicon { transform: rotate(-6deg) scale(1.06); } .gicon { transition: transform .15s; }
.av { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--surface-2)); }
.skyline rect { fill: #241c4a; } .cypress { fill: #14452f; } .lights rect { fill: #ffd87a; animation: glowpulse 4s ease-in-out infinite; } .lights rect:nth-child(2n) { animation-delay: 1.3s; }
.tpost { fill: #6b4a2b; } .tcup { fill: #8a6a3b; } .flame { fill: #ff8a2a; animation: flick .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; } .flame2 { fill: #ffd34d; animation: flick .4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flick { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.88, 1.12) rotate(3deg); } }
.fighter .pommel { fill: #f2b83a; } .fighter .m-happy, .fighter .blush { display: none; } .fighter .eyes { animation: blink 4s infinite; transform-box: fill-box; transform-origin: center; }
.fighter.hurt .m-idle { display: none; }
.fighter .avsvg { overflow: visible; }

.scene-svg .m-happy, .scene-svg .blush, .scene-svg .m-sad { display: none; }
.scene-svg .juliet.happy .m-happy, .scene-svg .juliet.happy .blush, .scene-svg .romeo.hurt .m-sad { display: block; }
.scene-svg .juliet.happy .m-idle, .scene-svg .romeo.hurt .m-idle { display: none; }
.scene-svg .eyes { animation: blink 4s infinite; transform-box: fill-box; transform-origin: center; }

/* share dialog */
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.share-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 4, 15, 0.8); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.share-box { position: relative; width: min(100%, 460px); max-height: 100%; overflow-y: auto; background: var(--surface); color: var(--ink); border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--edge); padding: 18px; display: grid; gap: 12px; }
.share-img { width: 100%; max-width: 340px; height: auto; justify-self: center; border-radius: 12px; border: 2px solid var(--edge); aspect-ratio: 1080 / 1350; background: var(--surface-2); }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-note { font-size: 0.88rem; color: var(--ink-2); }
.share-note textarea { width: 100%; font: inherit; background: var(--surface-2); color: var(--ink); border: 2px solid var(--edge); border-radius: 10px; padding: 8px; margin-top: 6px; }
.share-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1.4rem; line-height: 1; background: var(--surface-2); color: var(--ink); border: 2px solid var(--edge); border-radius: 10px; cursor: pointer; }
.share-box h2 { padding-right: 44px; }
#reset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Geography scenes */
.rj-waltz .m-idle, .rj-waltz .m-sad { display: none; } .rj-waltz .m-happy, .rj-waltz .blush { display: block; }

.pts { margin: 8px 0 0; padding-left: 1.1rem; display: grid; gap: 4px; font-size: 0.93rem; color: var(--ink-2); } .lcard .angle { margin-top: 10px; }



.mount-svg .snowf { animation: snowfall 6s linear infinite; } @keyframes snowfall { from { transform: translateY(-10px); } to { transform: translateY(14px); } }
.fighter .drop { fill: #5ab8f0; stroke: #1f6aa8; stroke-width: 2; stroke-linejoin: round; }

/* Diagrams */
.dg-explorer { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 780px) { .dg-explorer { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .dg-stage { position: sticky; top: 64px; } }
.dg-stage { background: #f6fbef; border: 2px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--edge); padding: 6px; min-width: 0; }
.dg-svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.dg-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.dg-info, .dg-result { background: var(--surface); border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--edge); padding: 14px 16px; display: grid; gap: 8px; }
.dg-info p, .dg-result p { color: var(--ink-2); font-size: 0.95rem; }
.dg-hook { color: var(--ink) !important; }
.dg-target { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.dg-result h3 { font-size: 2rem; }
.dpart { cursor: pointer; outline: none; }
.m-label .dpart { pointer-events: none; }
.dpart .sh { transition: filter .15s, stroke .15s; }
.dpart:hover .sh, .dpart:focus-visible .sh { filter: brightness(1.12) saturate(1.1); }
.dpart.sel .sh, .dpart.target .sh { stroke: #e0990a; stroke-width: 4; }
.dpart.sel .shl { stroke: #e0990a; }
.dpart.right .sh { stroke: #1f8a4a; stroke-width: 4; }
.dpart.wrong .sh { stroke: #d6451f; stroke-width: 4; fill-opacity: .7; }
.dpart.target .sh { animation: dgpulse 1s ease-in-out infinite alternate; }
@keyframes dgpulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.dlabels .dlabel, .dlabel.on { pointer-events: none; }
.dlabel line { stroke: #14261c; stroke-width: 1.4; opacity: .65; }
.dlabel circle { fill: #14261c; }
.dlabel text { font: 600 13px var(--font-body); fill: #14261c; }
.dlabels .dlabel { opacity: 0; transition: opacity .2s; }
.show-labels .dlabels .dlabel { opacity: 1; }
.dnum { cursor: pointer; outline: none; }
.dnum .nc { fill: #14261c; stroke: #fff; stroke-width: 2.5; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.dnum text { font: 700 12px var(--font-mono); fill: #fff; pointer-events: none; }
.dnum:hover .nc, .dnum.hov .nc, .dnum:focus-visible .nc { fill: #e0990a; transform: scale(1.25); }
.dnum:hover text, .dnum.hov text { fill: #14261c; }
.dnum.done { display: none; }
.dnum.bad .nc { fill: #d6451f; }
.dg-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-chip { font-weight: 600; font-size: 0.92rem; background: var(--surface); color: var(--ink); border: 2px solid var(--edge); border-radius: 10px; box-shadow: 2px 2px 0 var(--edge); padding: 7px 12px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.dg-chip.sel { background: var(--hi); color: #2a0f1a; transform: translateY(-2px); }
.dg-chip.lifted { opacity: .35; }
.dg-chip.ghost { position: fixed; z-index: 90; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 6px 8px 0 rgba(0,0,0,.35); transform: rotate(-3deg) scale(1.05); background: var(--hi); color: #2a0f1a; }
.hint.good { color: var(--good); } .hint.bad { color: var(--bad); }

/* Mobile portrait: keep the characters and the cards on screen together, and keep the tabs to one row. */
@media (max-width: 640px) {
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: none; white-space: nowrap; padding: 6px 14px; font-size: 0.95rem; }
  #arena { scroll-margin-top: 52px; }
  .avs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 50px); z-index: 4; background: var(--surface); padding-block: 6px; margin-inline: -4px; padding-inline: 4px; border-bottom: 2px solid var(--line); }
  .av { padding: 5px 2px 4px; border-radius: 12px; gap: 2px; }
  .av .figure { width: 100%; max-width: 52px; }
  .aname { font-size: clamp(0.5rem, 2.3vw, 0.62rem); line-height: 1.1; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .av .got { font-size: 0.6rem; }
  .bubble { font-size: 0.68rem; padding: 1px 6px; top: -10px; }
  .tray { gap: 6px; }
  .tcard { padding: 7px 10px; font-size: 0.86rem; }
}
@media (max-width: 480px) { nav.tabs { margin-inline: -10px; padding-inline: 10px; } }