/* Winterarc – Gestaltung */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --page:#232323; --page-line:#282828; --page-ink:#ECE4D6; --page-muted:#8F887D;
  --surface:#ECE4D6; --sunk:#E1D7C6; --ink:#1C1B19; --muted:#6F675B; --line:#CDC1AD;
  --accent:#FF6A2B; --accent-deep:#E2552A; --accent-soft:#FFD6C2;
  --good:#2F7D4F; --warn:#B8741A; --bad:#C8412E;
  --m0:#FF6A2B; --m1:#1C1B19; --m2:#3F63D1; --m3:#2F7D4F; --m4:#A9822B; --m5:#8E48C0;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --cut:10px;
  padding-top:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--display);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:0 104px;
  background-color:var(--page);color:var(--page-ink);
  background-image:linear-gradient(var(--page-line) 1px,transparent 1px),linear-gradient(90deg,var(--page-line) 1px,transparent 1px);
  background-size:100% 64px,64px 100%;background-attachment:fixed}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
img{max-width:100%;display:block}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}

/* Header */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-block:22px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--page-muted)}
h1{font-weight:800;font-size:clamp(36px,11.2vw,54px);line-height:.86;letter-spacing:-.045em;white-space:nowrap}
.dc{text-align:right;flex:none}
.dc b{display:block;font-weight:800;letter-spacing:-.03em;font-size:34px;line-height:1;color:var(--accent)}
.dc span{font-family:var(--mono);color:var(--page-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.progressbar{height:10px;background-image:radial-gradient(var(--page-muted) 1px,transparent 1.3px);background-size:6px 10px;background-position:0 center}
.progressbar i{display:block;background:var(--accent);height:10px}

/* Karten */
.panel{background:var(--surface);color:var(--ink);padding:16px;position:relative;display:flex;flex-direction:column;gap:14px;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.panel.hot{background:var(--accent)}
.panel.dark{background:#111;color:var(--page-ink)}
.panel.dark .hint,.panel.dark .label{color:var(--page-muted)}
.framed::before,.framed::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid currentColor;opacity:.7;pointer-events:none}
.framed::before{top:14px;right:14px;border-left:0;border-bottom:0}
.framed::after{bottom:14px;left:14px;border-right:0;border-top:0}
.sectiontitle{font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.hint{font-size:13px;color:var(--muted)}
.panel.hot .hint{color:var(--ink);opacity:.8}
.label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
div.label{display:flex;align-items:center;gap:9px;color:inherit}
div.label::before{content:"";flex:none;width:7px;height:7px;border:1.4px solid currentColor;transform:rotate(45deg)}
div.label::after{content:"";flex:1;min-width:20px;height:4px;opacity:.55;background-image:radial-gradient(currentColor .9px,transparent 1.2px);background-size:6px 4px;background-position:0 center}
.unit{font-family:var(--mono);font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.empty{color:var(--muted);font-family:var(--mono);font-size:12px;text-align:center;padding-block:10px}

/* Eingaben */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input:not([type]),textarea,select{
  width:100%;min-width:0;border-radius:0;background:var(--sunk);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:15px;padding:10px 11px}
textarea{resize:vertical;min-height:60px}
input::placeholder,textarea::placeholder{color:#9A9082}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input:disabled,textarea:disabled,select:disabled,.panel button:disabled{opacity:.55;cursor:not-allowed}
.check{display:flex;gap:10px;align-items:center;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.btn{border:0;border-radius:0;padding:12px 16px;font-weight:700;letter-spacing:-.01em;background:var(--accent);color:var(--ink);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.btn:hover{background:var(--accent-deep)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid currentColor;clip-path:none}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.btn.dark{background:var(--ink);color:var(--surface)}
.btn.small{padding:7px 11px;font-size:13px}
.btn.danger{background:var(--bad);color:#fff}
.link{background:none;border:0;padding:0;color:inherit;font-family:var(--mono);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.seg{display:grid;gap:6px}
.seg.two{grid-template-columns:1fr 1fr}.seg.three{grid-template-columns:repeat(3,1fr)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;text-align:center;padding:10px 4px;border:1px solid var(--line);background:var(--sunk);font-weight:600;font-size:14px}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.seg.two input[value=yes]:checked+span{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
details summary{cursor:pointer;font-family:var(--mono);font-size:12px;text-decoration:underline;text-underline-offset:3px}
details[open] summary{margin-bottom:10px}

/* Heute */
.daynav{display:flex;align-items:center;gap:8px}
.daynav .arrow{width:40px;height:40px;border:0;background:var(--surface);color:var(--ink);font-size:18px}
.daynav .when{flex:1;position:relative;text-align:center;background:var(--surface);color:var(--ink);padding:6px 8px;line-height:1.2;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.daynav .when b{display:block;font-weight:800;letter-spacing:-.03em;font-size:24px}
.daynav .when span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.daynav .when input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.weekstrip{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;color:var(--page-muted);font-family:var(--mono);font-size:12px}
.weekstrip b{color:var(--page-ink);font-weight:500}
.ex{display:grid;grid-template-columns:1fr 1fr 1fr 36px;gap:6px;padding:10px;background:var(--sunk);border:1px solid var(--line)}
.ex .ex-name{grid-column:1 / -1}
.ex input{background:var(--surface)}
.ex-del{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;line-height:1}
.ex-last{grid-column:1 / -1;font-size:12px;color:var(--muted);font-family:var(--mono)}
.ex-last:empty{display:none}
.photoRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.thumb{width:88px;height:88px;object-fit:cover;background:var(--sunk);border:1px solid var(--line);cursor:zoom-in}
.savebar{display:flex;gap:10px}
.savebar .btn{flex:1}
.status{color:var(--page-muted);font-family:var(--mono);font-size:11px}
.locked{font-family:var(--mono);font-size:12px;background:#111;color:var(--page-ink);padding:10px 12px}
.ptshead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ptshead div.label{flex:1}
.ptsbig{font-weight:800;line-height:1}
.ptsbig b{font-weight:800;letter-spacing:-.04em;font-size:52px}
.ptsbig span{font-family:var(--mono);font-size:14px;opacity:.7}
.ptsgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pchip{padding:8px 10px;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.28);border:1px solid var(--ink)}
.pchip .top{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pchip .p{font-weight:500}
.pchip .sub{font-size:12px;font-family:var(--mono);opacity:.75}
.pchip.full{background:var(--ink);color:var(--surface)}

/* Crew */
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.weeknav b{font-weight:800;letter-spacing:-.03em;font-size:28px;color:var(--page-ink);display:block;text-align:center}
.weeknav span{font-family:var(--mono);font-size:11px;color:var(--page-muted);display:block;text-align:center}
.weeknav .btn.ghost{color:var(--page-ink)}
.mhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dot{display:inline-block;flex:none;width:9px;height:9px;transform:rotate(45deg)}
.mname{font-weight:700;letter-spacing:-.02em;font-size:19px;flex:1;overflow-wrap:anywhere}
.pill{font-family:var(--mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.pill.good{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.neutral{color:var(--muted)}
.pill.joker{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.sessions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sess{width:26px;height:26px;border:1.5px dashed var(--line)}
.sess.on{border:0;background:var(--mc)}
.sess.extra{border:0;background:var(--mc);opacity:.45}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.stat .v{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.v.good{color:var(--good)}.v.warn{color:var(--warn)}
.rank{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;white-space:nowrap;line-height:1.3}
.rank.r6077{background:#111;color:#F5D000;box-shadow:inset 0 0 0 1.5px #F5D000}
.crown{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;background:#111;color:#F5D000;padding:2px 6px}
.board{display:flex;flex-direction:column;gap:12px}
.brow{display:grid;grid-template-columns:22px 1fr auto;gap:4px 10px;align-items:center}
.brow .pos{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center}
.brow .nm{font-weight:700;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.brow .pts{font-weight:800;font-size:22px;letter-spacing:-.03em;text-align:right}
.brow .bar{grid-column:2 / -1;height:8px;background-image:radial-gradient(var(--muted) .9px,transparent 1.2px);background-size:5px 8px}
.brow .bar i{display:block;height:100%}
.brow .sub{grid-column:2 / -1;font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.meter{height:12px;background:var(--sunk);border:1px solid var(--ink);position:relative}
.meter i{display:block;height:100%;background:var(--accent)}
.panel.hot .meter{background:rgba(255,255,255,.35)}
.panel.hot .meter i{background:var(--ink)}
.kasse{display:flex;flex-direction:column;gap:6px}
.kasse .line{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.kasse .line b{font-weight:800;letter-spacing:-.02em;font-size:17px}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}
.duel .side b{display:block;font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1}
.duel .side span{font-family:var(--mono);font-size:12px}
.duel .vs{font-family:var(--mono);font-size:12px;opacity:.7}
.feed{display:flex;flex-direction:column}
.feeditem{display:flex;flex-direction:column;gap:6px;padding-block:12px;border-top:1px dashed var(--line)}
.feeditem:first-child{border-top:0;padding-top:0}
.feeditem.event .etext{font-weight:700;letter-spacing:-.01em;font-size:16px}
.fhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.fhead .who{font-weight:700}
.fhead .meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.etag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--ink);color:var(--surface);padding:2px 6px}
.exlist{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:13px}
.pr{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--accent);color:var(--ink);padding:1px 6px;margin-left:6px}
.note{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.fphoto{max-height:340px;width:auto;max-width:100%;object-fit:cover;background:var(--sunk);cursor:zoom-in;min-height:120px;min-width:120px}
.reacts{display:flex;flex-wrap:wrap;gap:6px}
.rbtn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 9px;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.rbtn:disabled{cursor:default;opacity:1}
.rbtn.on{background:var(--accent);border-color:var(--accent)}
.rbtn .c{margin-left:5px;font-weight:500;opacity:.75}
.rbtn.plus{border-style:dashed;font-weight:500}
.rwho{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* Verlauf */
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-family:var(--mono);font-size:9px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 4px;border-bottom:1px solid var(--ink)}
td{padding:8px 4px;border-bottom:1px dashed var(--line)}
td.r,th.r{text-align:right}
.tablewrap{overflow-x:auto}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.badge{border:1px solid var(--ink);padding:10px 8px;display:flex;flex-direction:column;gap:4px;min-height:92px;text-align:center;align-items:center;justify-content:center}
.badge .ic{width:30px;height:30px;transform:rotate(45deg);border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:4px}
.badge .ic i{transform:rotate(-45deg);font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700}
.badge b{font-size:12px;line-height:1.15}
.badge span{font-family:var(--mono);font-size:10px;color:var(--muted)}
.badge.on{background:var(--ink);color:var(--surface)}
.badge.on .ic{border-color:var(--accent);background:var(--accent);color:var(--ink)}
.badge.on span{color:var(--page-muted)}
.badge.off{opacity:.45;border-style:dashed}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcell{display:flex;flex-direction:column;gap:4px}
.pcell img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--sunk);cursor:zoom-in}
.pcell .meta{font-family:var(--mono);font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap}
.compare{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sunk);max-width:100%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 50%)}
.compare .line{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);left:50%}
.compare .tag{position:absolute;top:8px;font-family:var(--mono);font-size:10px;font-weight:700;background:#111;color:var(--page-ink);padding:2px 6px}
.wrapTable td b{font-weight:800}

/* Onboarding */
.onb h2{font-weight:800;letter-spacing:-.04em;font-size:40px;line-height:.95}
.steps{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:10px;align-items:baseline;counter-increment:s}
.steps li::before{content:"00" counter(s);font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent-deep);width:32px;flex:none}
.pick{display:flex;gap:8px;flex-wrap:wrap}

/* Leisten, Overlays */
.tabs{position:fixed;left:0;right:0;bottom:0;background:#1A1A1A;border-top:1px solid #333;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:5}
.tabs .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.tabs button{border:0;background:none;padding:8px 2px;color:var(--page-muted);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current="page"]{background:var(--accent);color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--accent);color:var(--ink);padding:10px 16px;font-family:var(--mono);font-size:13px;max-width:calc(100% - 32px);z-index:8}
.banner{background:var(--accent-soft);color:var(--ink);font-family:var(--mono);font-size:12px;padding:12px 14px}
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.92);z-index:9;display:grid;place-items:center;padding:16px}
.lightbox img{max-height:calc(100vh - 80px);max-width:100%;object-fit:contain}
#lightClose{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.cardPreview{width:100%;max-width:280px;aspect-ratio:9/16;background:#111;align-self:center}
@media (max-width:380px){.stats{grid-template-columns:repeat(2,1fr)}.badges,.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Profil-Kopf & Klickbarkeit */
[data-profile]{cursor:pointer}
.brow[data-profile]:hover .nm,.mhead [data-profile]:hover,.who[data-profile]:hover{text-decoration:underline;text-underline-offset:3px}
.mehead{display:flex;flex-direction:column;gap:12px}
.mehead h2{font-weight:800;font-size:clamp(34px,10vw,48px);letter-spacing:-.04em;line-height:.95}
.mehead .big{font-weight:800;font-size:64px;letter-spacing:-.05em;line-height:.9;color:var(--accent)}
.mehead .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mehead .kv b{display:block;font-family:var(--mono);font-size:17px;font-weight:500}
.mehead .kv span{font-family:var(--mono);font-size:10px;color:var(--page-muted);text-transform:uppercase;letter-spacing:.06em}
.mehead .bar{height:8px;background-image:radial-gradient(var(--page-muted) .9px,transparent 1.2px);background-size:5px 8px}
.mehead .bar i{display:block;height:100%;background:var(--accent)}

/* Animationen – nur beim Öffnen einer Seite, nie beim Hintergrund-Aktualisieren */
@keyframes grow{from{transform:scaleX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes stampIn{0%{opacity:0;transform:rotate(-14deg) scale(1.8)}35%{opacity:1;transform:rotate(-8deg) scale(.92)}50%{transform:rotate(-8deg) scale(1.04)}80%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0;transform:rotate(-8deg) scale(1)}}
@keyframes rankIn{0%{opacity:0;transform:scale(.3) rotate(-10deg)}60%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
.anim .bar i,.anim .meter i,.anim .sess.on,.anim .progressbar i{transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.anim .panel,.anim .feeditem{animation:rise .45s ease-out both}
.anim .panel:nth-child(2){animation-delay:.04s}.anim .panel:nth-child(3){animation-delay:.08s}.anim .panel:nth-child(4){animation-delay:.12s}.anim .panel:nth-child(5){animation-delay:.16s}
.rbtn.on{animation:pop .35s ease-out}
.anim .badge.on{animation:pop .5s ease-out both}
.stamp{position:fixed;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none}
.stamp span{font-weight:800;font-size:clamp(40px,12.5vw,84px);letter-spacing:-.04em;color:var(--accent);border:6px solid var(--accent);padding:4px 16px;max-width:92vw;white-space:nowrap;background:rgba(35,35,35,.85);animation:stampIn 1.4s ease-out both}
.celebrate{background:rgba(10,10,10,.94)}
.celebrate .rk-inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;color:var(--page-ink);max-width:340px}
#rankUpBadge .rank{font-size:34px;padding:14px 26px;letter-spacing:.1em;animation:rankIn .9s cubic-bezier(.2,.8,.2,1) both;
  background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%)!important;background-size:200% 100%!important;animation:rankIn .9s cubic-bezier(.2,.8,.2,1) both,shine 2.4s 1s linear infinite}
#rankUpText{font-size:17px;font-weight:600}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.stamp{display:none!important}}