/* The Board — same quiet monochrome language as the rest of the app. */
.sheet.arena{max-width:600px;padding-bottom:calc(24px + var(--safe-b))}
.arena .sheet-title{font-size:30px;font-weight:700;letter-spacing:-.04em}

/* ---------- tabs ---------- */
.ar-tabs{display:flex;gap:4px;margin:0 0 22px;padding:4px;border-radius:999px;background:var(--surface-2)}
.ar-tab{flex:1;height:44px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--muted);transition:background .2s,color .2s}
.ar-tab[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.ar-tab:active{transform:scale(.97)}

/* ---------- rolling digits ---------- */
.flip{display:inline-flex;font-weight:800;font-size:22px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;vertical-align:baseline}
.flip i{font-style:normal;min-width:.6em;text-align:center}

/* ---------- podium ---------- */
.ar-podium{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px;align-items:end;margin:0 0 26px}
.po{display:grid;justify-items:center;gap:8px;min-width:0;text-align:center;cursor:pointer;--pc:var(--kcal)}
.po-av{position:relative;margin-top:24px}
.po .avatar{width:58px;height:58px;font-size:25px;transition:transform .3s var(--spring)}
.po:hover .avatar{transform:rotate(-6deg) scale(1.05)}
.po[data-pos="1"] .avatar{width:72px;height:72px;font-size:31px}
.po-crown{position:absolute;left:50%;top:-26px;width:30px;height:30px;margin-left:-15px;color:var(--text);transform:rotate(-8deg);transform-origin:50% 100%;animation:crown 2.6s ease-in-out infinite}
.po-crown svg{display:block;width:100%;height:100%;fill:currentColor}
.po-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:15px}
.po-val{display:inline-flex;align-items:baseline;gap:4px}
.po-val small{font-size:12px;font-weight:600;color:var(--muted)}
.po-block{width:100%;height:var(--h);display:grid;place-items:start center;padding-top:9px;border-radius:20px 20px 0 0;background:var(--surface-2)}
.po-block b{font-size:34px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--faint)}
.po[data-pos="1"] .po-block{background:linear-gradient(120deg,#6d6f70,#a9abab 20%,#7c7e7f 40%,#bfc1c1 58%,#858788 78%,#a3a5a5)}
.po[data-pos="1"] .po-block b{color:#0c0c0d}
.po[data-pos="1"]{--h:108px}.po[data-pos="2"]{--h:78px}.po[data-pos="3"]{--h:56px}
.ar-podium.rise .po-block{animation:blockUp .6s var(--ease) both;animation-delay:var(--dl)}
.ar-podium.rise .po-av,.ar-podium.rise .po-name,.ar-podium.rise .po-val{animation:popIn .5s var(--spring) both;animation-delay:calc(var(--dl) + .28s)}
.ar-empty{grid-column:1/-1;padding:22px 16px;text-align:center;font-weight:600;color:var(--muted);border-radius:24px;background:var(--surface-2)}
@keyframes blockUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.7)}to{opacity:1;transform:none}}
@keyframes crown{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(6deg) translateY(-3px)}}

/* ---------- lanes ---------- */
.ar-lanes{--endpad:0px;display:block;margin-bottom:26px}
.ar-lanes[data-mode="week"]{--endpad:12px}
.lane{--pc:var(--kcal);border-bottom:1px solid var(--border);transition:background .2s;border-radius:0}
.lane:last-child{border-bottom:0}
.lane.me .lane-main{background:var(--surface-2);border-radius:22px}
.lane.me{border-bottom-color:transparent}
.lane-main{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:16px 12px;text-align:left}
.ln-rank{font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1;text-align:center;color:var(--faint)}
.lane:first-child .ln-rank{color:var(--text)}
.ln-name{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-weight:700;font-size:17px;letter-spacing:-.02em;min-width:0}
.ln-name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-you{flex-shrink:0;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;background:var(--btn-bg);color:var(--btn-fg)}
.ln-track{position:relative;display:block;height:30px;--p:0}
.ln-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;border-radius:99px;background:var(--surface-3);transform:translateY(-50%)}
.ln-fill{position:absolute;left:0;top:50%;height:4px;width:calc(15px + var(--p) * (100% - 30px - var(--endpad)));transform:translateY(-50%);background:var(--text);border-radius:99px;transition:width 1.1s var(--spring-soft)}
.ln-run{position:absolute;top:0;left:calc(var(--p) * (100% - 30px - var(--endpad)));width:30px;height:30px;font-size:14px;box-shadow:none;transition:left 1.1s var(--spring-soft)}
.ar-lanes[data-mode="week"] .ln-track::after{content:"";position:absolute;right:0;top:50%;width:2px;height:20px;margin-top:-10px;border-radius:2px;background:var(--border-2)}
.ln-val{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:5px;min-width:92px}
.ln-val small{font-size:12px;font-weight:600;color:var(--muted)}
.ln-val .flip{font-size:22px}

.ln-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.lane.open .ln-more{grid-template-rows:1fr}
.ln-more>div{overflow:hidden;min-height:0}
.ln-more-in{display:grid;gap:14px;margin:0 12px;padding:4px 0 18px}
.ln-facts{display:flex;flex-wrap:wrap;gap:8px}
.ln-facts span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:500;background:var(--surface-2);color:var(--muted)}
.ln-facts b{color:var(--text);font-weight:700}
.ln-facts .fire svg{width:15px;height:15px}
.ln-stk{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.ar-cheer{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-weight:650;font-size:15px;transition:transform .25s var(--spring),opacity .2s}
.ar-cheer svg{width:17px;height:17px;stroke-width:2.4}
.ar-cheer:active{transform:scale(.94)}
.ar-cheer:disabled{opacity:.5;pointer-events:none}
.lane.cheered .ln-run{animation:wiggle .7s ease-in-out 2}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg) scale(1.15)}75%{transform:rotate(18deg) scale(1.15)}}

/* ---------- you ---------- */
.ar-me{--pc:var(--kcal);padding:20px;border-radius:30px;background:var(--surface-2)}
.me-top{display:flex;align-items:center;gap:18px}
.me-ring{position:relative;width:108px;height:108px;flex-shrink:0}
.me-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.me-ring circle{fill:none;stroke-width:9}
.me-ring .trk{stroke:var(--surface-3)}
.me-ring .prg{stroke:var(--text);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:calc(264 * (1 - var(--v,0)));transition:stroke-dashoffset 1.2s var(--spring-soft)}
.me-lv{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.me-lv small{font-size:11px;font-weight:600;color:var(--muted)}
.me-lv b{font-size:40px;font-weight:800;letter-spacing:-.05em}
.me-id{min-width:0;display:grid;gap:4px}
.me-title{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.me-sub{font-size:14px;color:var(--muted)}
.me-streak{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;font-size:17px}
.me-streak svg{width:20px;height:20px;fill:currentColor;color:var(--text)}
.me-streak span{font-weight:500;color:var(--muted);font-size:13.5px}

.td{margin-top:22px}
.td-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;color:var(--muted)}
.td-head b{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.td-bar{position:relative;height:8px;margin-top:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.td-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 100%);background:var(--text);border-radius:99px;transition:width 1.1s var(--spring-soft)}
.td-bar u{position:absolute;top:0;bottom:0;left:60%;width:2px;background:var(--bg);opacity:.7}
.td-note{margin-top:9px;font-size:14px;color:var(--muted)}
.td-note.good{color:var(--ok)}

.stk-h{margin:24px 0 12px;font-size:17px;font-weight:700;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:baseline}
.stk-h span{font-size:14px;font-weight:500;color:var(--muted)}
.stk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
.stk{display:grid;justify-items:center;gap:8px;text-align:center;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--text)}
.stk-face{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--c);color:#0c0c0d;transform:rotate(var(--r,0deg));transition:transform .3s var(--spring)}
.stk-face svg{width:27px;height:27px;stroke-width:2.2}
button.stk:hover .stk-face{transform:rotate(calc(var(--r,0deg) * -1)) scale(1.08)}
button.stk:active .stk-face{transform:scale(.92)}
.stk.locked .stk-face{background:var(--surface-3);color:var(--dim);font-size:24px;font-weight:700}
.stk.locked{color:var(--muted)}
.stk.mini{font-size:0}
.stk.mini .stk-face{width:42px;height:42px}
.stk.mini .stk-face svg{width:20px;height:20px}
.stk.wob .stk-face{animation:wiggle .6s ease-in-out}
.stk-cap{margin-top:14px;min-height:40px;padding:12px 14px;border-radius:18px;background:var(--surface-3);font-size:14px;line-height:1.4;color:var(--muted)}
.stk-cap b{font-weight:700;color:var(--text)}

.ar-help{margin:16px 2px 0;text-align:center}

.arena.pre .ln-track{--p:0!important}
.arena.pre .me-ring .prg,.arena.pre .td-bar i{--v:0!important}

@media(max-width:400px){
  .ar-podium{gap:6px}
  .po .avatar{width:50px;height:50px;font-size:22px}
  .po[data-pos="1"] .avatar{width:62px;height:62px}
  .me-ring{width:92px;height:92px}
  .me-title{font-size:22px}
  .stk-face{width:54px;height:54px}
  .ln-val{min-width:80px}
}
@media(prefers-reduced-motion:reduce){
  .po-crown,.lane.cheered .ln-run,.stk.wob .stk-face{animation:none}
  .ar-podium.rise .po-block,.ar-podium.rise .po-av,.ar-podium.rise .po-name,.ar-podium.rise .po-val{animation:none}
  .ln-fill,.ln-run,.me-ring .prg,.td-bar i,.ln-more{transition:none}
}