@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --ink: #302c4a;
  --muted: #76738a;
  --pink: #ff8db8;
  --pink-pale: #fff0f6;
  --blue: #8fd8ff;
  --blue-pale: #edf9ff;
  --mint: #8ee3c0;
  --mint-pale: #eafff5;
  --lemon: #ffe27c;
  --lemon-pale: #fff9df;
  --lilac: #c7afff;
  --lilac-pale: #f5efff;
  --line: #eceaf2;
  --shadow: 0 8px 0 rgba(69, 54, 105, .09), 0 15px 28px rgba(99, 82, 142, .08);
  --mono: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
  --display: 'Fredoka', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body { margin: 0; min-width: 320px; background: #fff; color: var(--ink); font-family: var(--mono); font-size: 15px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 3px solid #5c54b8; outline-offset: 4px; }
::selection { background: var(--lemon); color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.app-shell { max-width: 1280px; margin: auto; padding: 0 32px; }
.site-header { min-height: 84px; display: flex; align-items: center; gap: 36px; border-bottom: 2px solid #f4f1f8; }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 39px; height: 39px; border: 3px solid var(--pink); border-radius: 50%; background: linear-gradient(145deg,#fff 18%,#ffe5f0); box-shadow: inset -3px -4px 7px #ffc4dc, inset 3px 3px 5px #fff, 0 4px 0 #f2c8da; display: grid; place-items: center; position: relative; }
.brand-mark::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(145deg,#fff,#ffb5d1); box-shadow: 2px 3px 5px #df8eaf; }
.brand-mark::after { content: ''; position: absolute; width: 9px; height: 4px; left: 7px; top: 6px; border-radius: 50%; background: rgba(255,255,255,.95); transform: rotate(-35deg); }
.brand-name { font: 700 24px/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.brand-name span { color: #ee6da0; }
.brand-name sup { color: var(--muted); font: 10px var(--mono); vertical-align: top; margin-left: 3px; }
.primary-nav { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.primary-nav a { display: grid; min-height: 44px; place-items: center; padding: 0 16px; border: 2px solid transparent; border-radius: 18px; color: var(--muted); font-weight: 900; font-size: 13px; transition: transform .18s ease, background .18s ease, color .18s ease; }
.primary-nav a:hover { background: var(--blue-pale); color: var(--ink); transform: translateY(-2px); }
.primary-nav a.active { background: var(--lemon-pale); border-color: #ffe27c; color: var(--ink); box-shadow: 0 3px 0 #f3d56f; }
.header-meta { color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 2px 0 #57bc91; }
.mobile-menu { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 2px solid #f0d0df; border-radius: 16px; color: var(--ink); background: var(--pink-pale); box-shadow: 0 4px 0 #f1d7e3; }
.mobile-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--display); }
h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -.04em; }
h1 em { color: #e96b9a; font-style: normal; }
.button { min-height: 58px; padding: 0 27px; border: 3px solid #ed76a6; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; background: linear-gradient(145deg,#ffb5d2,#ff8db8); color: #52283c; box-shadow: inset 3px 3px 0 rgba(255,255,255,.85), inset -4px -5px 0 rgba(222,87,140,.18), 0 7px 0 #e8a1be, 0 12px 19px rgba(214,105,154,.15); font: 700 17px var(--display); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-3px) rotate(-1deg); filter: saturate(1.08); }
.button:active:not(:disabled) { transform: translateY(4px) scale(.96,.92); box-shadow: inset 4px 5px 8px rgba(192,72,123,.18), 0 2px 0 #e8a1be; }
.button:disabled { cursor: wait; opacity: .75; }
.button svg { width: 20px; height: 20px; }
.button-outline { background: linear-gradient(145deg,#fff,#f5efff); border-color: #bba4ef; color: #55447e; box-shadow: inset 3px 3px 0 #fff, inset -4px -5px 0 rgba(155,125,219,.13), 0 6px 0 #d4c7ee; }
.sound-toggle { min-height:46px; padding:0 15px; border-width:2px; border-radius:17px; gap:7px; font-size:12px; box-shadow:inset 2px 2px 0 #fff,0 4px 0 #d4c7ee; }

.draw-layout { max-width: 980px; margin: 42px auto 55px; display: grid; grid-template-columns: minmax(0,1fr) 270px; align-items: center; gap: 28px; }
.draw-layout.has-roll { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.draw-layout.has-roll .draw-stage { width:100%; max-width:980px; }
.draw-layout.has-roll .telemetry { grid-column:1; grid-row:2; width:min(100%,340px); justify-self:center; }
.draw-layout.pre-roll { max-width: 620px; display: flex; justify-content: center; margin-top: 28px; }
.pre-roll .draw-stage { width: 100%; }
.pre-roll .signal-field { min-height: 410px; }
.pre-roll .draw-action { min-height: 82px; }
.draw-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.signal-field { width: min(100%, 620px); min-height: 400px; display: grid; place-items: center; position: relative; isolation: isolate; }
.signal-field::before { content: ''; position: absolute; z-index: -2; width: min(76vw,370px); aspect-ratio: 1; border: 4px solid rgba(255,255,255,.95); border-radius: 44% 56% 56% 44% / 44% 44% 56% 56%; background: radial-gradient(circle at 33% 23%,rgba(255,255,255,.98) 0 4%,transparent 21%),linear-gradient(145deg,#ffd3e4 0%,#ffa7c7 47%,#d8bdff 100%); box-shadow: inset -16px -23px 35px rgba(180,97,161,.14), inset 14px 14px 25px rgba(255,255,255,.9), 0 12px 0 #ead8f3, 0 24px 42px rgba(157,126,196,.17); animation: float-jelly 5s ease-in-out infinite; transition: border-radius 1.2s ease, box-shadow 1.2s ease, filter .5s ease; }
.jelly-blue { position:absolute; z-index:-1; width:min(76vw,370px); aspect-ratio:1; border:4px solid rgba(255,255,255,.95); border-radius:52% 48% 43% 57% / 49% 41% 59% 51%; background:radial-gradient(circle at 33% 23%,rgba(255,255,255,.98) 0 4%,transparent 21%),linear-gradient(145deg,#d9f8ff,#a4e5ff 46%,#b9b5ff); background-size:160% 160%; background-position:25% 25%; box-shadow:inset -17px -21px 34px rgba(74,137,185,.14),inset 14px 14px 27px rgba(255,255,255,.92),0 12px 0 #cddcf2,0 24px 42px rgba(122,151,193,.17); opacity:0; pointer-events:none; animation:float-jelly 5s ease-in-out infinite,morph-jelly 7.8s ease-in-out infinite alternate,gradient-drift 9s ease-in-out infinite alternate; transition:opacity 1.25s cubic-bezier(.22,.72,.25,1),filter .8s ease; }
.signal-field.has-result .jelly-blue { opacity:1; }
.signal-field::after { content: ''; position: absolute; top: 27%; left: 27%; width: 31px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.9); transform: rotate(-35deg); filter: blur(.2px); pointer-events: none; }
.signal-field.has-result::before { border-radius:52% 48% 43% 57% / 49% 41% 59% 51%; box-shadow:inset -17px -21px 34px rgba(74,137,185,.14),inset 14px 14px 27px rgba(255,255,255,.92),0 12px 0 #cddcf2,0 24px 42px rgba(122,151,193,.17); }
.signal-field.is-rolling::before,.signal-field.is-rolling .jelly-blue { animation:wobble-jelly .22s ease-in-out infinite alternate; }
.signal-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; z-index: 1; text-align: center; padding: 30px; }
.signal-label { color: #82566f; font-size: 14px; font-weight: 900; letter-spacing: .1em; }
.signal-display strong { color: #fff; font: 700 clamp(64px,8vw,112px)/1 var(--display); letter-spacing: -.04em; text-shadow: 0 4px 0 rgba(96,98,155,.2), 0 7px 18px rgba(94,74,132,.14); white-space: nowrap; }
.signal-field.has-result .signal-display strong { color: #fff; font-size: clamp(54px,7vw,94px); }
.signal-sub { min-height: 25px; color: #795d8e; font-size: 14px; font-weight: 900; }
.orbit,.crosshair,.field-coordinate { display: none; }
.draw-action { min-height: 78px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; }
.champion-marquee { position:relative; isolation:isolate; width:min(100%,430px); min-height:94px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:-3px 0 18px; padding:18px 23px; border:3px solid #7964b3; border-radius:27px; background:linear-gradient(145deg,#625096,#8d73ce 52%,#64539a); box-shadow:inset 4px 4px 0 rgba(255,255,255,.22),inset -5px -6px 0 rgba(48,31,91,.14),0 7px 0 #d8cff0,0 14px 25px rgba(92,72,139,.15); color:#fff; transform-origin:center; }
.champion-marquee::before { content:""; position:absolute; z-index:-1; inset:6px; border-radius:20px; background:radial-gradient(circle,#fff2a7 0 3px,transparent 3.6px) top left/23px 8px repeat-x,radial-gradient(circle,#ffd45f 0 3px,transparent 3.6px) bottom right/23px 8px repeat-x,radial-gradient(circle,#fff2a7 0 3px,transparent 3.6px) top left/8px 23px repeat-y,radial-gradient(circle,#ffd45f 0 3px,transparent 3.6px) bottom right/8px 23px repeat-y; filter:drop-shadow(0 0 4px rgba(255,220,99,.7)); animation:champion-lights .85s steps(2,end) infinite; pointer-events:none; }
.champion-marquee::after { content:""; position:absolute; z-index:-1; top:-95%; left:-30%; width:25%; height:290%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:rotate(19deg); animation:champion-shine 3.6s ease-in-out infinite; pointer-events:none; }
.champion-label,.champion-result { position:relative; z-index:1; }
.champion-label { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 8px; color:#fff6bf; font:700 16px var(--display); letter-spacing:.04em; }
.champion-label small { grid-column:2; color:#ded6f8; font:900 10px var(--mono); letter-spacing:.14em; }
.champion-crown { grid-row:1/3; font-size:29px; filter:drop-shadow(0 3px 0 rgba(52,35,88,.22)); animation:champion-crown 2.4s ease-in-out infinite; }
.champion-result { display:grid; grid-template-columns:auto auto; align-items:end; justify-items:end; column-gap:5px; font-variant-numeric:tabular-nums; }
.champion-result strong { font:700 31px/1 var(--display); letter-spacing:-.04em; text-shadow:0 3px 0 rgba(47,32,82,.26); }
.champion-result>span { margin-bottom:2px; color:#fff0a6; font-size:10px; font-weight:900; }
.champion-result small { grid-column:1/3; max-width:210px; margin-top:6px; overflow:hidden; color:#ede8fb; font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.champion-marquee.is-loading .champion-result strong { animation:champion-pulse 1.15s ease-in-out infinite; }
.champion-marquee.champion-enter { animation:champion-arrive .82s cubic-bezier(.18,1.38,.28,1) both; }
.champion-marquee.champion-enter .champion-result strong { animation:champion-score-pop .85s cubic-bezier(.18,1.5,.28,1) .12s both; }
.reset-readout { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 800; }
.reset-readout svg { color: #8d7ad0; }
.reset-readout strong { color: var(--ink); margin-left: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.telemetry { display: flex; flex-direction: column; gap: 13px; }
.telemetry.score-intro { animation:telemetry-arrive .55s ease-out both; }
.telemetry-top { padding: 0 3px 4px; }
.micro-heading,.score-label { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.score-label { display:none; }
.score-block .score-meta { margin-top:0; }
.online-indicator { display: none; }
.score-block { padding: 23px; border: 3px solid #d9ccff; border-radius: 27px; background: linear-gradient(145deg,#fff,#f7f2ff); box-shadow: inset 4px 4px 0 #fff, inset -5px -6px 0 rgba(167,143,226,.11), var(--shadow); }
.score-block > strong { display: block; margin: 8px 0 13px; color: #7360bd; font: 700 50px/1 var(--display); letter-spacing: -.04em; }
.score-scale,.progress-track { height: 13px; overflow: hidden; border: 2px solid #f0eafa; border-radius: 20px; background: #fff; box-shadow: inset 0 2px 4px rgba(63,48,91,.08); }
.score-scale span,.progress-track span { display: block; height: 100%; min-width: 7px; border-radius: inherit; background: linear-gradient(90deg,#9de9ce,#ffe27c,#ff95bd); transition: width .5s cubic-bezier(.34,1.56,.64,1); }
.scale-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #858197; font-size: 10px; font-weight: 900; }
.telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.telemetry-grid > div { min-height: 82px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 2px solid #f1edf7; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #f0edf4; }
.telemetry-grid span { color: var(--muted); font-size: 10px; font-weight: 900; }
.telemetry-grid strong { color: var(--ink); font: 700 24px var(--display); }
.telemetry-grid strong[class^="tier-"] { font-size: 17px; }
.tier-static { color: #8d7c98 !important; }.tier-trace { color: #458cb1 !important; }.tier-signal { color: #398d70 !important; }.tier-anomaly { color: #d06b48 !important; }.tier-cosmic { color: #7656bb !important; }.tier-trash,.tier-common { color:#777582 !important; }.tier-uncommon { color:#398d70 !important; }.tier-rare { color:#458cb1 !important; }.tier-epic { color:#8053b1 !important; }.tier-mythic { color:#b64275 !important; }.tier-empty { color: var(--muted) !important; }
.telemetry-note { display: none; }

.findings-section { max-width: 900px; margin: 0 auto 90px; padding: 0 0 20px; transform-origin:top center; }
.findings-section.badge-intro { animation:findings-arrive .72s cubic-bezier(.2,.95,.25,1) .08s both; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading h2,.archive-heading h2 { margin: 0; font: 600 clamp(27px,4vw,37px)/1.1 var(--display); letter-spacing: -.03em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.badge-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.badge-row { min-height: 86px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid #f2eaf2; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #f3eff5; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.badge-row:nth-child(5n+1) { border-color: #f7d4e2; background: linear-gradient(135deg,#fff,#fff7fb); }
.badge-row:nth-child(5n+2) { border-color: #d7edfb; background: linear-gradient(135deg,#fff,#f7fcff); }
.badge-row:nth-child(5n+3) { border-color: #d2f1e2; background: linear-gradient(135deg,#fff,#f7fff9); }
.badge-row:nth-child(5n+4) { border-color: #f5e8ad; background: linear-gradient(135deg,#fff,#fffdf2); }
.badge-row:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 8px 0 #f0ebf3; }
.badge-number { display: none; }
.badge-glyph { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 17px; background: linear-gradient(145deg,#fff,#ffe7f0); box-shadow: inset -3px -4px 6px #f7c6d9, inset 3px 3px 4px #fff, 0 3px 0 #ebdbe4; color: #a45078; font: 700 22px var(--display); }
.badge-info { min-width: 0; }
.badge-info h3 { overflow: hidden; margin: 0 0 2px; color: var(--ink); font: 600 18px/1.1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.badge-info p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.3; }
.family-note { color: #8a72bc; font-size: 10px; font-weight: 900; }
.badge-points { color: #8b69bf; font: 800 15px var(--display); white-space: nowrap; }
.badge-points span { display: block; color: var(--muted); font: 800 10px var(--mono); text-align: right; }
.rarity-tag { display: inline-flex; align-items: center; width: max-content; padding: 4px 8px; border-radius: 10px; background: #f2eff6; color: #70647d; font: 900 9px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rarity-common { background: #f0f1f3; color: #737783; }.rarity-uncommon { background: #e8f7ee; color: #37845c; }.rarity-rare { background: #e9f4ff; color: #3976aa; }.rarity-epic { background: #f3eaff; color: #8053b1; }.rarity-anomaly { background: #fff0df; color: #b7692b; }.rarity-mythic { background: #ffe8f2; color: #b64275; }
.badge-echo { opacity: .58; }
.empty-reading { min-height: 110px; display: grid; place-items: center; padding: 24px; border: 2px dashed #e9dfef; border-radius: 24px; background: #fff; color: var(--muted); text-align: center; font-weight: 800; }
.empty-glyph { display: none; }
.empty-reading p { margin: 0; }
.empty-reading span { display: none; }
.afterword { display: none; }

.inner-page { min-height: calc(100vh - 170px); max-width: 980px; margin: 0 auto; padding: 48px 0 90px; }
.page-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-hero h1 { margin: 0; }
.page-hero h1 br { display: none; }
.page-hero .stage-overline { display: none; }
.page-hero > p { max-width: 300px; margin: 0 0 5px; color: var(--muted); font-size: 14px; font-weight: 700; }
.eyebrow { display: none; }
.stage-overline { display: none; }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 26px 0 38px; }
.summary-grid > div { padding: 18px; border: 2px solid #eee9f5; border-radius: 22px; background: linear-gradient(145deg,#fff,#faf8ff); box-shadow: 0 5px 0 #f0edf4; }
.summary-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.summary-grid strong { display: block; margin-top: 4px; color: var(--ink); font: 700 clamp(30px,4vw,42px)/1 var(--display); }
.summary-grid strong small { color: #8b69bf; font: 800 12px var(--mono); }
.archive-heading { display: flex; align-items: center; justify-content: space-between; margin: 35px 0 14px; }
.archive-heading h2 { font-size: 29px; }
.archive-heading > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-list { display: grid; gap: 10px; }
.archive-entry { width: 100%; min-height: 74px; display: grid; grid-template-columns: 90px minmax(0,1fr) auto auto 20px; align-items: center; gap: 14px; padding: 10px 18px; border: 2px solid #ece8f1; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #f1edf4; text-align: left; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.archive-entry:hover { transform: translateY(-3px); }
.archive-ordinal,.archive-date,.archive-tier,.archive-ep { color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-entry strong { font: 700 29px var(--display); }
.archive-ep { color: #8162b5; }
.archive-hint { display: none; }
.big-empty { display: grid; justify-items: center; gap: 12px; padding: 45px 18px; border: 2px dashed #e9dfef; border-radius: 26px; text-align: center; background: #fff; }
.big-empty > span { display: none; }
.big-empty h3 { margin: 0; font-size: 27px; }
.big-empty p { margin: 0; color: var(--muted); }

.atlas-progress { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 14px 22px; margin: 26px 0; }
.atlas-progress > div:first-child > span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.atlas-progress strong { display: block; margin-top: 1px; font: 700 48px/1 var(--display); }
.atlas-progress strong small { color: var(--muted); font: 600 24px var(--display); }
.atlas-progress .progress-track { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
.atlas-progress > span { display: none; }
.atlas-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.segmented { display: flex; gap: 7px; }
.segmented button { min-height: 42px; padding: 0 14px; border: 2px solid #eee9f3; border-radius: 15px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 900; transition: transform .18s ease, background .18s ease; }
.segmented button:hover { transform: translateY(-2px); }
.segmented button span { margin-left: 4px; opacity: .7; }
.segmented button.active { border-color: #ffe27c; background: var(--lemon-pale); color: var(--ink); box-shadow: 0 3px 0 #f3d56f; }
.search-field { position: relative; width: min(280px,100%); }
.search-field input { width: 100%; min-height: 44px; padding: 0 40px 0 14px; border: 2px solid #ece8f3; border-radius: 15px; background: #fff; color: var(--ink); outline: none; font-weight: 700; }
.search-field input:focus { border-color: #a996db; }
.search-field span:last-child { position: absolute; right: 13px; top: 8px; color: #8d7ac5; font-size: 19px; }
.atlas-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.atlas-card { min-height: 180px; display: flex; flex-direction: column; padding: 15px; border: 2px solid #eeeaf3; border-radius: 23px; background: linear-gradient(145deg,#fff,#faf9fc); box-shadow: 0 5px 0 #f0edf4; opacity: .68; transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.atlas-card:hover { transform: translateY(-3px) rotate(-.5deg); opacity: 1; }
.atlas-card.unlocked { opacity: 1; border-color: #c5eddb; background: linear-gradient(145deg,#fff,#f1fff8); }
.atlas-card-top,.atlas-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atlas-glyph { color: #a46184; font: 700 26px var(--display); }
.atlas-card:not(.unlocked) .atlas-glyph { color: #9d99a8; }
.atlas-state { padding: 4px 8px; border-radius: 12px; background: #f4f0f7; color: var(--muted); font-size: 10px; font-weight: 900; }
.atlas-card.unlocked .atlas-state { background: var(--mint-pale); color: #398d70; }
.atlas-card h3 { margin: 12px 0 4px; font: 600 17px var(--display); }
.atlas-card p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.atlas-card-bottom { margin-top: auto; padding-top: 9px; border-top: 1px solid #f0edf4; color: #8162b5; font-size: 12px; font-weight: 900; }
.small-empty { padding: 35px 15px; border: 2px dashed #e9dfef; border-radius: 20px; color: var(--muted); text-align: center; font-weight: 800; }

.lab-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: 13px; margin-top: 25px; }
.lab-input-panel,.lab-result-panel { min-height: 285px; padding: 23px; border: 3px solid #d7edfb; border-radius: 27px; background: linear-gradient(145deg,#fff,#f2fbff); box-shadow: inset 4px 4px 0 #fff, inset -5px -6px 0 rgba(122,188,218,.11), var(--shadow); }
.lab-input-panel form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
.lab-input-panel label { color: var(--muted); font-size: 13px; font-weight: 900; }
.lab-input-panel input { width: 100%; min-height: 71px; padding: 0 16px; border: 2px solid #b7e0f1; border-radius: 19px; background: #fff; color: var(--ink); outline: none; font: 700 40px var(--display); box-shadow: inset 0 3px 7px rgba(95,140,165,.1); }
.lab-input-panel input:focus { border-color: #6cc5ec; }
.lab-input-panel input::-webkit-inner-spin-button { appearance: none; }
.lab-input-panel .button { min-height: 50px; padding: 0 18px; border-color: #7ac7e6; background: linear-gradient(145deg,#bcecff,#8fd8ff); color: #28546a; box-shadow: inset 3px 3px 0 #fff, inset -4px -5px 0 rgba(72,152,191,.17), 0 6px 0 #b2d9e7; font-size: 15px; }
.lab-input-panel > p { display: none; }
.lab-result-panel { border-color: #d8c9ff; background: linear-gradient(145deg,#fff,#f7f2ff); }
.lab-big-number { display: block; margin: 17px 0 12px; color: #775fbc; font: 700 clamp(54px,6vw,76px)/1 var(--display); letter-spacing: -.04em; }
.lab-result-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding-bottom: 13px; border-bottom: 2px solid #ebe3fa; font-size: 12px; font-weight: 900; }
.lab-result-stats strong { color: #775fbc; font-size: 18px; }.lab-result-stats span:last-child { color: var(--muted); }
.lab-mini-list { display: grid; gap: 5px; margin-top: 12px; }.lab-mini-list > span { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }.lab-mini-list i { width: 22px; color: #a46184; font-size: 16px; font-style: normal; }.lab-mini-list em { margin-left: auto; color: #8162b5; font-style: normal; }
.lab-findings { padding-bottom: 45px; }

.site-footer { display: flex; justify-content: center; padding: 20px 0 30px; color: #938da0; font-size: 12px; font-weight: 800; }
.site-footer span:nth-child(n+2) { display: none; }
.site-footer i { padding: 0 5px; color: #ed83ad; font-style: normal; }
.toast { position: fixed; z-index: 10; right: 22px; bottom: 22px; max-width: min(360px,calc(100vw - 44px)); padding: 14px 19px; border: 2px solid #f0c1d5; border-radius: 18px; background: linear-gradient(145deg,#fff,#fff0f6); color: var(--ink); box-shadow: inset 3px 3px 0 #fff, 0 6px 0 #f1d7e3, var(--shadow); font-weight: 900; opacity: 0; transform: translateY(15px) scale(.95); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }.toast.show { opacity: 1; transform: translateY(0) scale(1); }
@keyframes float-jelly { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes wobble-jelly { from { transform: rotate(-5deg) scale(1.02,.95); border-radius: 48% 52% 58% 42% / 43% 59% 41% 57%; } to { transform: rotate(5deg) scale(.98,1.04); border-radius: 57% 43% 44% 56% / 55% 43% 57% 45%; } }
@keyframes morph-jelly { 0%,100%{border-radius:52% 48% 43% 57% / 49% 41% 59% 51%} 35%{border-radius:43% 57% 51% 49% / 54% 45% 55% 46%} 68%{border-radius:57% 43% 46% 54% / 43% 58% 42% 57%} }
@keyframes gradient-drift { from{background-position:18% 26%} to{background-position:82% 74%} }
@keyframes champion-lights { 0%,100%{filter:drop-shadow(0 0 3px rgba(255,220,99,.6));opacity:.72} 50%{filter:drop-shadow(0 0 7px rgba(255,232,125,1));opacity:1} }
@keyframes champion-shine { 0%,24%{left:-35%;opacity:0} 42%{opacity:1} 62%,100%{left:120%;opacity:0} }
@keyframes champion-crown { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-3px)} }
@keyframes champion-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes champion-arrive { 0%{opacity:0;transform:translateY(17px) scale(.72,.62)} 62%{opacity:1;transform:translateY(-3px) scale(1.04,.96)} 82%{transform:translateY(1px) scale(.98,1.02)} 100%{transform:none} }
@keyframes champion-score-pop { 0%{opacity:0;transform:translateY(10px) scale(.55)} 65%{opacity:1;transform:translateY(-2px) scale(1.12)} 100%{transform:none} }

@media (max-width: 900px) {
  .app-shell { padding: 0 25px; }.site-header { gap: 18px; }.primary-nav { gap: 3px; }.primary-nav a { padding: 0 11px; font-size: 12px; }
  .draw-layout { grid-template-columns: minmax(0,1fr) 235px; gap: 15px; }.signal-field { min-height: 340px; }.signal-field::before,.jelly-blue { width: min(67vw,320px); }
  .badge-list { grid-template-columns: 1fr 1fr; }.atlas-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .app-shell { padding: 0 19px; }.site-header { min-height: 72px; }.header-meta { margin-left: auto; }.mobile-menu { display: inline-flex; }
  .primary-nav { display: none; position: absolute; z-index: 8; top: 72px; left: 0; right: 0; margin: 0; padding: 8px 19px 16px; border-bottom: 2px solid #f4f1f8; background: #fff; flex-direction: column; align-items: stretch; gap: 5px; }
  .menu-open .primary-nav { display: flex; }.primary-nav a { justify-content: start; min-height: 48px; padding: 0 15px; }
  .draw-layout { display: flex; flex-direction: column; gap: 19px; margin: 25px auto 43px; }.draw-stage { width: 100%; }.signal-field { min-height: min(90vw,380px); }.signal-field::before,.jelly-blue { width: min(82vw,350px); }.signal-display strong { font-size: clamp(63px,17vw,91px); }.signal-field.has-result .signal-display strong { font-size: clamp(48px,13vw,74px); }.signal-label,.signal-sub { font-size: 13px; }
  .draw-action { min-height: 66px; gap: 13px; }.draw-action .button { width: min(100%,330px); }.telemetry { width: 100%; gap: 10px; }.telemetry-top { display: none; }.score-block { padding: 17px 19px; }.score-block > strong { font-size: 42px; }.telemetry-grid > div { min-height: 70px; }
  .findings-section { margin-bottom: 60px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.section-heading p { font-size: 12px; }
  .inner-page { padding: 34px 0 70px; }.page-hero { display: block; margin-bottom: 18px; }.page-hero h1 { font-size: clamp(39px,11vw,55px); }.page-hero > p { margin-top: 6px; }
  .summary-grid { gap: 8px; margin: 18px 0 28px; }.summary-grid > div { padding: 14px; }.summary-grid span { font-size: 10px; }.summary-grid strong { font-size: clamp(28px,8vw,37px); }
  .archive-heading { margin-top: 27px; }.archive-heading h2 { font-size: 25px; }.archive-entry { grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 13px; }.archive-ordinal,.archive-tier { display: none; }.archive-entry strong { grid-column: 1; grid-row: 1; font-size: 26px; }.archive-date { grid-column: 1; grid-row: 2; }.archive-ep { grid-column: 2; grid-row: 1/3; }.archive-entry svg { grid-column: 3; grid-row: 1/3; }
  .atlas-progress { gap: 10px; margin: 19px 0; }.atlas-progress strong { font-size: 40px; }.atlas-progress .progress-track { grid-column: 1/-1; grid-row: 2; }.atlas-controls { flex-direction: column; align-items: stretch; }.segmented button { flex: 1; padding: 0 8px; font-size: 11px; }.search-field { width: 100%; }.atlas-card { min-height: 165px; padding: 13px; }.atlas-card h3 { font-size: 16px; }
  .lab-layout { grid-template-columns: 1fr; }.lab-input-panel,.lab-result-panel { min-height: 0; padding: 19px; }.lab-input-panel form { margin-top: 12px; }.lab-big-number { font-size: 66px; }
}
@media (max-width: 420px) { .app-shell { padding: 0 15px; }.brand-name { font-size: 21px; }.brand-mark { width: 35px; height: 35px; }.header-meta { display: none; }.mobile-menu { margin-left: auto; }.badge-list { grid-template-columns: 1fr; }.badge-row { min-height: 77px; }.atlas-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.atlas-card { min-height: 173px; padding: 11px; }.atlas-card h3 { font-size: 14px; }.atlas-card p { font-size: 11px; } }
@media (max-width: 420px) { .site-header { gap: 8px; }.brand-name { font-size: 19px; }.account-actions { gap: 4px; margin-left: auto; }.nav-sound { width: 38px; min-height: 40px; justify-content: center; padding: 0; }.nav-sound span { display: none; }.account-link { min-height: 40px; padding: 0 8px; font-size: 10px; }.mobile-menu { width: 40px; height: 40px; margin-left: 0; flex: 0 0 auto; }.pre-roll .signal-field { min-height: min(105vw,390px); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.account-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.nav-sound { display:inline-flex; gap:5px; cursor:pointer; }
.nav-sound span { font-size:10px; }
.account-link,.settings-link { display:grid; min-height:42px; place-items:center; padding:0 12px; border:2px solid #eee9f3; border-radius:15px; color:var(--ink); font-size:12px; font-weight:900; background:#fff; }
.join-link { border-color:#f0c1d5; background:var(--pink-pale); color:#a3416d; box-shadow:0 3px 0 #f1d7e3; }
.preview-tag { display:inline-flex; align-items:center; padding:6px 10px; border-radius:12px; background:var(--lemon-pale); color:#695c37; font-size:10px; font-weight:900; letter-spacing:.04em; }
.narrow-page { max-width:690px; }
.jelly-panel { border:3px solid #f0eaf4; border-radius:27px; background:linear-gradient(145deg,#fff,#fcf9ff); box-shadow:inset 4px 4px 0 #fff,inset -5px -6px 0 rgba(167,143,226,.08),var(--shadow); }
.join-form,.settings-form { display:grid; gap:13px; padding:24px; }
.join-form label,.settings-form>label,.settings-label { color:var(--muted); font-size:11px; font-weight:900; }
.join-form input,.settings-form>input { width:100%; min-height:52px; padding:0 14px; border:2px solid #ece7f2; border-radius:16px; outline:none; background:#fff; color:var(--ink); font-weight:800; }
.join-form input:focus,.settings-form>input:focus { border-color:#bca9e8; }
.join-form p { margin:0; color:var(--muted); font-size:12px; }
.profile-card { display:flex; align-items:center; gap:16px; padding:10px 0 20px; }
.profile-avatar,.leader-avatar { width:56px; height:56px; display:grid; flex:0 0 auto; place-items:center; border:3px solid #fff; border-radius:21px; background:linear-gradient(145deg,#fff,var(--player-color,#ffe1ed)); box-shadow:inset -4px -5px 8px rgba(155,95,133,.12),inset 4px 4px 7px #fff,0 5px 0 #efe9f2; color:var(--ink); font:700 25px var(--display); }
.profile-card h1 { margin:0; font-size:clamp(32px,5vw,48px); }
.profile-settings { margin-left:auto; padding:10px 15px; border-radius:14px; background:var(--blue-pale); color:#416c83; font-size:11px; font-weight:900; }
.favorite-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.favorite-chip { padding:4px 8px; border-radius:10px; background:var(--pink-pale); color:#9b5172; font-size:10px; font-weight:900; }
.profile-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 30px; }
.profile-links a { display:grid; gap:5px; padding:17px; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.profile-links a:hover { transform:translateY(-3px); }
.profile-links b { font:600 20px var(--display); }
.profile-links span { color:var(--muted); font-size:12px; font-weight:800; }
.top-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.top-badge { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:7px; padding:10px; border:2px solid #f0eaf4; border-radius:17px; background:#fff; }
.top-badge>span { grid-row:span 2; color:#ab6688; font:700 20px var(--display); }
.top-badge b { overflow:hidden; font:600 12px var(--display); text-overflow:ellipsis; white-space:nowrap; }
.top-badge small { color:var(--muted); font-weight:800; }
.top-badges>p { color:var(--muted); }
.leader-best { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; margin:17px 0; padding:17px 20px; border:2px solid #f4e6b2; border-radius:22px; background:linear-gradient(145deg,#fff,#fff9e6); box-shadow:0 5px 0 #f4edda; }
.leader-best span:first-child { color:var(--muted); font-size:10px; font-weight:900; }
.leader-best strong { grid-row:2; font:700 30px var(--display); }
.leader-best b { justify-self:end; grid-column:2; grid-row:1; font:700 17px var(--display); }
.leader-best span:last-child { justify-self:end; grid-column:2; grid-row:2; color:#9a7b35; font-size:12px; font-weight:900; }
.board-tabs { margin:20px 0 12px; }
.board-sort { margin:-2px 0 12px; }
.leader-list { display:grid; gap:9px; }
.leader-row { min-height:72px; display:grid; grid-template-columns:42px 42px 1fr auto; align-items:center; gap:10px; padding:10px 14px; border:2px solid #eeeaf3; border-radius:20px; background:#fff; box-shadow:0 4px 0 #f1edf4; }
.leader-row-champion { position:relative; isolation:isolate; overflow:hidden; border-color:#7964b3; background:linear-gradient(145deg,#625096,#8d73ce 52%,#64539a); box-shadow:inset 4px 4px 0 rgba(255,255,255,.22),inset -5px -6px 0 rgba(48,31,91,.14),0 5px 0 #d8cff0,0 10px 18px rgba(92,72,139,.15); color:#fff; }
.leader-row-champion::before { content:""; position:absolute; z-index:-1; inset:5px; border-radius:15px; background:radial-gradient(circle,#fff2a7 0 2px,transparent 2.7px) top left/18px 7px repeat-x,radial-gradient(circle,#ffd45f 0 2px,transparent 2.7px) bottom right/18px 7px repeat-x,radial-gradient(circle,#fff2a7 0 2px,transparent 2.7px) top left/7px 18px repeat-y,radial-gradient(circle,#ffd45f 0 2px,transparent 2.7px) bottom right/7px 18px repeat-y; filter:drop-shadow(0 0 4px rgba(255,220,99,.7)); animation:champion-lights .85s steps(2,end) infinite; pointer-events:none; }
.leader-row-champion::after { content:""; position:absolute; z-index:-1; top:-95%; left:-30%; width:25%; height:290%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:rotate(19deg); animation:champion-shine 3.6s ease-in-out infinite; pointer-events:none; }
.leader-row-champion .leader-place,.leader-row-champion .leader-name,.leader-row-champion .leader-name small,.leader-row-champion>strong { color:#fff; }
.leader-row-champion .leader-name small { color:#ede8fb; }
.leader-row-champion>strong { color:#fff0a6; }
.leader-crown { display:inline-block; color:#fff6bf; font-size:23px; filter:drop-shadow(0 3px 0 rgba(52,35,88,.22)); animation:champion-crown 2.4s ease-in-out infinite; }
.leader-poem { display:block; overflow:hidden; color:#fff6bf; font:700 11px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.leader-row-champion .leader-poem { color:#fff2a7; }
.leader-row-silver,.leader-row-bronze { position:relative; isolation:isolate; overflow:hidden; }
.leader-row-silver { border-color:#b7c8db; background:linear-gradient(145deg,#f9fbff,#e8eff8 58%,#dfe8f2); box-shadow:inset 3px 3px 0 rgba(255,255,255,.9),inset -4px -5px 0 rgba(101,126,153,.11),0 5px 0 #d6e0eb,0 9px 16px rgba(113,137,161,.13); }
.leader-row-bronze { border-color:#d7b08e; background:linear-gradient(145deg,#fffaf5,#f6e5d6 58%,#efd6c1); box-shadow:inset 3px 3px 0 rgba(255,255,255,.88),inset -4px -5px 0 rgba(155,95,52,.1),0 5px 0 #ead2bf,0 9px 16px rgba(170,111,72,.12); }
.leader-row-silver::before,.leader-row-bronze::before { content:""; position:absolute; z-index:-1; top:-90%; left:-35%; width:28%; height:280%; transform:rotate(18deg); animation:podium-glint 4.8s ease-in-out infinite; pointer-events:none; }
.leader-row-silver::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); }
.leader-row-bronze::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent); animation-delay:1.1s; }
.leader-number { display:block; color:#2e2750; font:700 23px/1.05 var(--display); letter-spacing:-.03em; }
.leader-player { display:block; margin-top:2px; font:700 13px/1.1 var(--display); }
.leader-row-champion .leader-number { color:#fff; font-size:28px; text-shadow:0 3px 0 rgba(47,32,82,.26); }
.leader-row-silver .leader-number { color:#5e7187; }
.leader-row-bronze .leader-number { color:#9a633e; }
.leader-row-silver .leader-name small,.leader-row-bronze .leader-name small { color:#6f7e8e; }
@keyframes podium-glint { 0%,28%{left:-35%;opacity:0} 43%{opacity:.8} 61%,100%{left:120%;opacity:0} }
.leader-place { color:#9a92a5; font:700 19px var(--display); text-align:center; }
.leader-avatar { width:39px; height:39px; border-radius:15px; font-size:18px; }
.leader-name { font:700 15px var(--display); }
.leader-name small { display:block; color:var(--muted); font:700 11px var(--mono); }
.leader-row>strong { color:#8062b5; font-size:13px; }
.badge-detail { display:grid; justify-items:center; gap:8px; padding:34px 20px; text-align:center; }
.detail-glyph { width:78px; height:78px; display:grid; place-items:center; border-radius:27px; background:var(--pink-pale); color:#b4527d; font:700 39px var(--display); box-shadow:inset -5px -6px 9px #f7c6d9,inset 5px 5px 8px #fff,0 5px 0 #efdce5; }
.badge-detail h1 { margin:8px 0 0; font-size:38px; }
.badge-detail p { max-width:430px; margin:0; color:var(--muted); }
.badge-detail>strong { color:#8162b5; font:700 22px var(--display); }
.badge-detail .rarity-tag { margin-top:7px; }
.rank-signin { color:#956281; text-decoration:underline; text-underline-offset:3px; }
.badge-detail>span:last-child { color:var(--muted); font-size:12px; font-weight:800; }
.back-link { display:inline-block; margin-bottom:14px; color:#7966ae; font-size:12px; font-weight:900; }
.result-card { display:grid; justify-items:center; gap:10px; padding:30px 20px; text-align:center; }
.result-card>span { color:var(--muted); font-size:12px; font-weight:900; }
.result-card>strong { color:#6d5aab; font:700 clamp(55px,12vw,87px)/1 var(--display); }
.result-card>div { display:flex; gap:14px; color:#765fae; }
.result-poem { margin:8px 0 0; color:#685676; font:600 19px var(--display); }
.set-list { display:grid; gap:10px; }
.set-card { overflow:hidden; border:2px solid #eeeaf3; border-radius:21px; background:#fff; box-shadow:0 4px 0 #f1edf4; }
.set-complete { border-color:#bce8d3; }
.set-toggle { width:100%; min-height:72px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:12px 16px; border:0; background:transparent; text-align:left; }
.set-toggle>span:first-child { display:grid; gap:2px; }
.set-toggle b { font:600 19px var(--display); }
.set-toggle small { color:var(--muted); font-weight:800; }
.set-toggle>i { grid-column:2; grid-row:1; color:#a16eb8; font:700 25px var(--display); font-style:normal; }
.set-bar { grid-column:1/-1; height:9px; overflow:hidden; border-radius:10px; background:#f1eef5; }
.set-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a8e5c8,#ffe27c,#ff9fc4); }
.set-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 14px 14px; }
.set-badge { display:grid; grid-template-columns:25px 1fr; align-items:center; gap:5px; padding:8px; border-radius:13px; background:var(--mint-pale); }
.set-badge.locked { background:#f5f3f7; color:#8d8995; }
.set-badge>span { font:700 17px var(--display); text-align:center; }
.set-badge>b { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.feed-list,.friend-list { display:grid; gap:12px; }
.feed-card { padding:18px; }
.feed-top,.feed-stats,.feed-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.feed-top { color:var(--muted); font-size:12px; }
.feed-top b { color:var(--ink); }
.feed-number { display:inline-block; margin:12px 0 5px; color:#7561b9; font:700 46px var(--display); }
.feed-stats { justify-content:flex-start; color:var(--muted); font-size:12px; }
.feed-stats b { color:#8062b5; }
.feed-actions { justify-content:flex-start; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.feed-actions button,.feed-actions a,.friend-row button,.settings-account button { min-height:38px; padding:0 12px; border:2px solid #eee8f1; border-radius:13px; background:#fff; color:var(--muted); font-size:11px; font-weight:900; }
.feed-actions button.liked { border-color:#ffc2d9; background:var(--pink-pale); color:#d75187; }
.friend-tabs { flex-wrap:wrap; margin-bottom:17px; }
.friend-content { min-height:150px; }
.friend-row { min-height:62px; display:flex; align-items:center; gap:10px; padding:9px 13px; border:2px solid #eeeaf3; border-radius:18px; background:#fff; }
.friend-row b { flex:1; font:600 16px var(--display); }
.friend-row>span:not(.leader-avatar) { color:var(--muted); font-size:11px; }
.friend-row button:disabled { opacity:.6; }
.invite-card { display:grid; justify-items:center; gap:12px; padding:27px; }
.invite-card>span { color:var(--muted); font-size:11px; font-weight:900; }
.invite-card>strong { color:#775fbc; font:700 43px var(--display); letter-spacing:.12em; }
.text-button { border:0; background:transparent; color:#7c68b2; font-size:11px; font-weight:900; }
.friend-search { display:block; width:100%; margin-bottom:14px; }
.settings-label { margin-top:4px; }
.color-options { display:flex; flex-wrap:wrap; gap:10px; }
.color-options label { position:relative; cursor:pointer; }
.color-options input { position:absolute; opacity:0; }
.color-options i { display:block; width:33px; height:33px; border:3px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 2px #eee8f1,0 3px 0 #eae5ed; }
.color-options input:checked+i { box-shadow:0 0 0 3px var(--ink),0 4px 0 #eae5ed; }
.favorite-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.favorite-options label { display:flex; align-items:center; gap:8px; padding:8px; border:2px solid #f0eaf4; border-radius:13px; font-size:10px; font-weight:900; }
.favorite-options input { accent-color:#d779a1; }
.favorite-options label:has(input:checked) { border-color:#f2bdd2; background:var(--pink-pale); }
.settings-account { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:14px 18px; }
.about-card { padding:clamp(22px,4vw,40px); }
.about-card p { color:var(--muted); font:700 16px/1.75 var(--mono); }
.about-card ul { padding-left:20px; color:var(--muted); line-height:1.8; }
.about-card h2 { margin:24px 0 8px; font-size:25px; }
.about-card ol { padding-left:23px; color:var(--muted); line-height:1.7; }
.about-card ol li { padding:3px 0 7px; }
.about-card ol b { color:var(--ink); }
.about-card .score-formula { margin:20px 0 12px; color:#765fae; font:700 20px var(--display); text-align:center; }
.about-card .score-example { margin:15px 0 20px; color:var(--muted); font:700 14px var(--mono); }
.about-card .badge-rarity-note { margin:20px 0; color:var(--muted); font:700 13px/1.7 var(--mono); }
.about-card .badge-rarity-note b { color:var(--ink); }
.about-page { max-width:900px; }
.about-hero { margin-bottom:24px; }
.about-hero h1 { max-width:780px; margin:14px 0 13px; }
.about-hero p { max-width:720px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.about-section { padding:10px 0 27px; border-bottom:2px solid #f1edf6; }
.about-section:last-of-type { border-bottom:0; }
.about-section h2 { margin-top:18px; }
.about-principles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.about-principles article { min-height:104px; display:flex; flex-direction:column; gap:7px; padding:18px; border:2px solid #eee8f4; border-radius:20px; background:linear-gradient(145deg,#fff,#faf7ff); }
.about-principles article:nth-child(2) { background:linear-gradient(145deg,#fff,#f1fbff); border-color:#dceef8; }
.about-principles article:nth-child(3) { background:linear-gradient(145deg,#fff,#fff9e6); border-color:#f3e6ac; }
.about-principles article:nth-child(4) { background:linear-gradient(145deg,#fff,#f0fff7); border-color:#d6f0e3; }
.about-principles b { font:700 19px var(--display); }
.about-principles span { color:var(--muted); font-size:13px; font-weight:700; line-height:1.45; }
.faq-list { display:grid; gap:9px; }
.faq-list details { border:2px solid #eee9f4; border-radius:17px; background:#fff; }
.faq-list summary { cursor:pointer; padding:15px 17px; color:var(--ink); font-weight:900; list-style-position:inside; }
.faq-list details p { margin:0; padding:0 17px 16px; font-size:14px; }
.about-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:28px; }
.about-cta h2 { margin:0 0 5px; font-size:28px; }
.about-cta p { margin:0; }
.guest-note { display:grid; gap:5px; margin-bottom:14px; padding:19px 22px; border:3px solid #d9ccff; border-radius:24px; background:linear-gradient(145deg,#fff,#f6f1ff); box-shadow:0 6px 0 #eee8f8; }
.guest-note>span { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.09em; }
.guest-note>strong { color:#735db2; font:700 25px var(--display); }
.guest-note p { margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.settings-account a { min-height:38px; display:inline-flex; align-items:center; padding:0 12px; border:2px solid #f0c1d5; border-radius:13px; background:var(--pink-pale); color:#a3416d; font-size:11px; font-weight:900; }
.rarity-table { width:100%; overflow:hidden; border:2px solid #eee9f4; border-radius:17px; background:#fff; border-spacing:0; font-size:13px; }
.rarity-table th,.rarity-table td { padding:10px 13px; border-bottom:1px solid #f0edf4; color:var(--muted); text-align:left; }
.rarity-table th { background:#faf7ff; color:var(--ink); font-size:11px; font-weight:900; }
.rarity-table tr:last-child td { border-bottom:0; }.rarity-table td:last-child { color:#8162b5; font-weight:900; text-align:right; }
.button-poem { min-height:48px; padding:0 15px; border-color:#b69ee7; background:linear-gradient(145deg,#e8dcff,#c7afff); color:#514076; box-shadow:inset 3px 3px 0 #fff,inset -4px -5px 0 rgba(138,105,204,.16),0 5px 0 #d2c3ef; font-size:13px; }
.save-nudge { margin-top:5px; color:#8767a3; font-size:12px; font-weight:900; }
.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:auto; padding:18px; background:rgba(48,44,74,.28); backdrop-filter:blur(4px); }
.poem-modal { position:relative; width:min(640px,100%); max-height:min(90vh,760px); overflow:auto; padding:24px; }
.poem-modal h2 { margin:0; font:600 29px var(--display); }
.modal-close { position:absolute; top:13px; right:15px; width:40px; height:40px; border:2px solid #f0eaf4; border-radius:14px; background:#fff; color:var(--muted); font-size:25px; }
.poem-number { margin:3px 0 14px; color:var(--muted); font-size:12px; font-weight:900; }
.poem-preview { min-height:64px; display:grid; place-items:center; padding:10px; border:2px solid #f4e5b0; border-radius:19px; background:linear-gradient(145deg,#fff,#fff9e6); color:#725d37; font:600 20px var(--display); text-align:center; }
.poem-selected { display:flex; flex-wrap:wrap; gap:6px; min-height:42px; align-items:center; padding:9px 0; color:var(--muted); font-size:11px; }
.poem-selected button,.poem-bank button,.poem-punctuation button { min-height:36px; padding:0 11px; border:2px solid #f1d3e0; border-radius:13px; background:var(--pink-pale); color:#8e4968; font-size:12px; font-weight:900; }
.poem-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.poem-tools select { min-height:38px; max-width:70%; padding:0 10px; border:2px solid #eee8f2; border-radius:12px; background:#fff; color:var(--ink); font-weight:800; }
.poem-bank { min-height:70px; display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; padding:10px; border:2px solid #f0eaf4; border-radius:17px; background:#fff; }
.poem-bank button { border-color:#d8ebf4; background:var(--blue-pale); color:#466d80; }
.poem-punctuation { display:flex; align-items:center; gap:6px; padding:11px 0; }
.poem-punctuation button { min-width:38px; border-color:#e5d9fa; background:var(--lilac-pale); color:#665190; }
.poem-modal>.button { width:100%; }
.poem-modal>.button:disabled { opacity:.5; }

@media(max-width:1000px) {
  .site-header { gap:12px; }.account-actions { gap:5px; }.account-link,.settings-link { padding:0 9px; font-size:10px; }.primary-nav a { padding:0 8px; font-size:11px; }
}
@media(max-width:700px) {
  .account-actions { margin-left:auto; }.primary-nav { top:72px; }.account-link,.settings-link { min-height:40px; }
  .profile-links { grid-template-columns:1fr; }.top-badges { grid-template-columns:1fr 1fr; }.leader-best { margin-top:10px; }.leader-row { grid-template-columns:32px 38px 1fr auto; gap:7px; padding:9px; }.leader-name { font-size:13px; }.leader-row>strong { font-size:11px; }
  .set-badges { grid-template-columns:1fr 1fr; }.friend-tabs button { min-height:40px; padding:0 10px; }.preview-tag { font-size:9px; }.poem-modal { padding:20px 16px; }
}
@media(max-width:420px) { .account-actions .settings-link { display:none; }.account-link { padding:0 9px; }.account-actions { margin-left:auto; }.profile-card { gap:10px; }.profile-avatar { width:48px; height:48px; border-radius:17px; }.profile-card h1 { font-size:30px; } }

.slot-number { display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.slot-reel { display:inline-block; height:1em; min-width:.56em; overflow:hidden; border-radius:.16em; vertical-align:top; }
.slot-reel-track { display:flex; flex-direction:column; line-height:1em; transform:translateY(var(--slot-y)); }
.slot-reel-track span { display:block; height:1em; line-height:1em; }
.slot-reel.spinning .slot-reel-track { animation:slot-spin 1.45s cubic-bezier(.12,.74,.14,1) both; animation-delay:var(--spin-delay); will-change:transform; }
.slot-comma { align-self:flex-end; margin:0 .015em; line-height:1.02; }
.signal-field.is-rolling .signal-display strong { perspective:900px; filter:drop-shadow(0 0 11px rgba(255,255,255,.48)); }
.signal-field.is-revealing.tier-mythic::before { filter:saturate(1.28) brightness(1.04); }
.signal-field.is-revealing.tier-anomaly::before { filter:saturate(1.16); }
.prize-sparks { position:absolute; z-index:2; inset:0; pointer-events:none; }
.prize-sparks span { position:absolute; top:50%; left:50%; color:#ffcf48; font:700 23px/1 var(--display); opacity:0; filter:drop-shadow(0 2px 2px rgba(201,147,36,.35)); }
.prize-sparks.firing span { animation:prize-burst 1.7s cubic-bezier(.16,.72,.2,1) var(--spark-delay) both; }
.tier-mythic .prize-sparks span { font-size:30px; color:#ffd84f; }
.tier-epic .prize-sparks span { font-size:26px; }
.tier-anomaly .prize-sparks span { font-size:26px; }
.score-block { position:relative; isolation:isolate; transform-origin:center 35%; }
.score-block.score-unlocking { animation:jelly-score-arrive .96s cubic-bezier(.2,1.45,.3,1) both; }
.score-block::after { content:""; position:absolute; z-index:-1; left:50%; top:43%; width:72%; aspect-ratio:1; border:3px solid rgba(178,157,232,.62); border-radius:48%; opacity:0; transform:translate(-50%,-50%) scale(.2); pointer-events:none; }
.score-unlocking::after { animation:score-splash-ring .78s .08s cubic-bezier(.12,.7,.2,1) both; }
.score-meta { display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.04em; }
.score-meta span { display:flex; flex-direction:column; gap:2px; }
.score-meta span:last-child { text-align:right; }
.score-meta b { color:#8162b5; font:800 11px var(--mono); }
.score-splash { position:absolute; z-index:0; left:50%; top:43%; width:0; height:0; pointer-events:none; }
.score-splash i { position:absolute; width:8px; height:10px; border-radius:65% 35% 65% 35%; background:linear-gradient(145deg,#fff,#9fdfff); box-shadow:0 1px 3px rgba(100,150,195,.2); opacity:0; transform:translate(-50%,-50%) scale(.2); }
.score-unlocking .score-splash i { animation:score-splash .7s cubic-bezier(.15,.7,.25,1) var(--splash-delay) both; }
.score-block > :not(.score-splash) { position:relative; z-index:1; }
.score-unlocking>strong.score-bump { animation:score-pop .58s cubic-bezier(.2,1.55,.35,1) both; }
.score-gain { position:absolute; top:52px; right:22px; color:#39a982; font:900 13px var(--display); opacity:0; pointer-events:none; }
.score-gain.show { animation:score-gain 1.05s cubic-bezier(.18,.72,.2,1) both; }
.summary-grid strong { min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.badge-row.badge-reveal { opacity:0; transform-origin:center; animation:badge-land .76s cubic-bezier(.16,1.22,.32,1) var(--badge-delay) both; }
.badge-glyph { position:relative; }
.badge-reveal .badge-glyph { animation:glyph-pop .72s cubic-bezier(.18,1.5,.28,1) calc(var(--badge-delay) + 80ms) both; }
.badge-glyph i { position:absolute; top:-9px; right:-8px; display:grid; width:21px; height:21px; place-items:center; border:2px solid #fff; border-radius:50%; background:linear-gradient(145deg,#fff3a9,#ffc94f); box-shadow:0 2px 0 #edb54c; color:#b57b21; font:normal 12px/1 var(--display); opacity:0; }
.badge-reveal .badge-glyph i { animation:badge-star .7s cubic-bezier(.12,1.5,.28,1) calc(var(--badge-delay) + 150ms) both; }
.badge-match { display:inline-flex; align-items:center; min-height:19px; margin-top:5px; padding:2px 8px; border-radius:10px; background:#fff1f7; color:#a44773; font:800 10px/1.25 var(--mono); }
.badge-reveal .badge-match { animation:match-glint .85s ease-out calc(var(--badge-delay) + 330ms) both; }
@keyframes slot-spin { 0%{transform:translateY(0)} 74%{transform:translateY(var(--slot-y))} 84%{transform:translateY(calc(var(--slot-y) - .12em))} 93%{transform:translateY(calc(var(--slot-y) + .035em))} 100%{transform:translateY(var(--slot-y))} }
@keyframes telemetry-arrive { 0%{opacity:0;transform:translateY(15px);filter:blur(3px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes jelly-score-arrive { 0%{opacity:0;transform:translateY(24px) scale(.42,.38)} 56%{opacity:1;transform:translateY(-5px) scale(1.09,.9)} 74%{transform:translateY(2px) scale(.96,1.07)} 88%{transform:translateY(-1px) scale(1.02,.98)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes score-splash-ring { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 24%{opacity:.7} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)} }
@keyframes score-splash { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 18%{opacity:.95;transform:translate(-50%,-50%) scale(1.2)} 100%{opacity:0;transform:translate(calc(-50% + var(--splash-x)),calc(-50% + var(--splash-y))) scale(.45)} }
@keyframes findings-arrive { 0%{opacity:0;transform:translateY(24px) scale(.96,.94)} 72%{opacity:1;transform:translateY(-2px) scale(1.005,1.01)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes badge-land { 0%{opacity:0;transform:translateY(-20px) scale(.78) rotate(-2deg)} 68%{opacity:1;transform:translateY(3px) scale(1.025) rotate(.3deg)} 100%{opacity:1;transform:translateY(0) scale(1) rotate(0)} }
@keyframes badge-star { 0%{opacity:0;transform:scale(.1) rotate(-50deg)} 60%{opacity:1;transform:scale(1.3) rotate(18deg)} 100%{opacity:.95;transform:scale(1) rotate(0)} }
@keyframes prize-burst { 0%{opacity:0;filter:blur(1px);transform:translate3d(-50%,-50%,0) scale(.18) rotate(-35deg)} 14%{opacity:.9;filter:drop-shadow(0 2px 5px rgba(201,147,36,.42));transform:translate3d(-50%,-50%,0) scale(.82) rotate(-5deg)} 38%{opacity:1;transform:translate3d(-50%,-50%,0) scale(var(--spark-scale)) rotate(12deg)} 78%{opacity:.78;transform:translate3d(calc(var(--spark-x) - 50%),calc(var(--spark-y) - 50%),0) scale(.82) rotate(100deg)} 100%{opacity:0;filter:blur(2px);transform:translate3d(calc(var(--spark-x) - 50%),calc(var(--spark-y) - 50%),0) scale(.48) rotate(150deg)} }
@keyframes score-pop { 0%{transform:scale(.72);filter:brightness(1.7)} 68%{transform:scale(1.13);filter:brightness(1.25)} 100%{transform:scale(1);filter:brightness(1)} }
@keyframes score-gain { 0%{opacity:0;transform:translateY(7px) scale(.82)} 20%{opacity:1;transform:translateY(0) scale(1.08)} 70%{opacity:1;transform:translateY(-13px) scale(1)} 100%{opacity:0;transform:translateY(-22px) scale(.96)} }
@keyframes glyph-pop { 0%{transform:scale(.72) rotate(-12deg)} 62%{transform:scale(1.16) rotate(7deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes match-glint { 0%{opacity:0;transform:translateY(4px);filter:brightness(1.5)} 45%{opacity:1;transform:translateY(-1px);filter:brightness(1.12)} 100%{opacity:1;transform:translateY(0);filter:brightness(1)} }
@media (prefers-reduced-motion:reduce) {
  .slot-reel.spinning .slot-reel-track { animation:none!important; transform:translateY(var(--slot-y))!important; }
  .badge-row.badge-reveal { animation:none!important; opacity:1; transform:none; }
  .badge-reveal .badge-glyph,.badge-reveal .badge-glyph i,.badge-reveal .badge-match,.prize-sparks.firing span,.score-gain { animation:none!important; }
  .badge-reveal .badge-glyph i { opacity:1; }.badge-reveal .badge-match { opacity:1; transform:none; filter:none; }
  .prize-sparks { display:none; }
  .score-unlocking>strong { animation:none!important; }
}
@media (max-width:700px) { .summary-grid strong { font-size:clamp(16px,5vw,25px); letter-spacing:-.04em; } }
@media (max-width:700px) { .champion-marquee { width:min(100%,390px); margin-top:-6px; } }
@media (max-width:520px) {
  .guest-account { display:none; }
  .champion-marquee { min-height:88px; padding:16px 18px; }
  .champion-label { font-size:13px; }.champion-crown { font-size:24px; }.champion-result strong { font-size:26px; }
  .about-principles { grid-template-columns:1fr; }
  .about-cta { align-items:stretch; flex-direction:column; }.about-cta .button { width:100%; }
  .rarity-table th,.rarity-table td { padding:9px 8px; font-size:11px; }
}