/* Iron Physique: see docs/superpowers/design/iron-physique-DESIGN.md.
   Zero radius, chrome-edged cards, hard shadows, yellow = primary/achievement, magenta = heat, cobalt = telemetry. */

:root {
    --bg: #0d0e12;
    --card: #14161f;
    --raise: #1e2230;
    --chrome: #cbd5e1;
    --steel: #94a3b8;
    --slate: #334155;
    --slate2: #64748b;
    --yel: #facc15;
    --mag: #f43f5e;
    --cob: #38bdf8;
    --txt: #e3e2e7;

    --head: Oswald, 'Arial Narrow', sans-serif;
    --body: 'Space Grotesk', Inter, system-ui, sans-serif; /* Space Grotesk has no Cyrillic: Inter takes over */
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { background: var(--bg); }

body {
    font: 400 15px/1.4 var(--body);
    color: var(--txt);
    min-height: 100vh;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px);
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }

.os { font-family: var(--head); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
.mono-inline { font-family: var(--mono); font-size: 13px; color: var(--yel); }
.muted { color: var(--steel); }
.yel { color: var(--yel); }
.mag { color: var(--mag); }
.cob { color: var(--cob); }
.center { text-align: center; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
.hazard { height: 6px; background: repeating-linear-gradient(45deg, var(--yel) 0 6px, #000 6px 12px); }
.bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--raise); border-bottom: 2px solid var(--slate2); }
.bar h1 { flex: 1; min-width: 0; font-size: 20px; line-height: 1.2; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--yel); font-size: 17px; border: 1px solid var(--slate); background: var(--card); text-align: center; }
.icon-btn:active { transform: translate(1px, 1px); }

/* ---------- layout ---------- */
#view { padding: 16px 16px 32px; }
body.with-tabs #view { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.section { margin: 18px 0 8px; }
.section:first-child { margin-top: 0; }

/* ---------- cards ---------- */
.card {
    display: block; width: 100%; position: relative;
    background: var(--card);
    border: 1px solid; border-color: var(--chrome) var(--slate) var(--slate) var(--chrome);
    box-shadow: 3px 3px 0 #000;
    margin-bottom: 14px; padding: 14px 14px 12px;
}
.card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--yel); }
.card.mg::before { background: var(--mag); }
.card.ir::before { background: var(--slate2); }
.card.tap:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.card-title { font-size: 19px; color: #fff; overflow-wrap: anywhere; }
.meta { margin: 4px 0 10px; }
.top3 { margin-top: 6px; overflow-wrap: anywhere; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.h { color: var(--steel); margin-bottom: 8px; }
.val { font-size: 12px; font-weight: 600; }
.podium { font-size: 22px; line-height: 1.6; color: var(--yel); }
.leaders .row { margin-bottom: 4px; }
.leaders .row span:last-child { text-align: right; overflow-wrap: anywhere; }

.badge { display: inline-block; padding: 3px 8px; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.badge.y { color: var(--yel); background: #000; border-color: var(--yel); }
.badge.m { color: var(--mag); background: #240c15; border-color: var(--mag); }
.badge.i { color: var(--chrome); background: var(--raise); border-color: var(--slate2); }

/* ---------- progress ---------- */
.pb { height: 12px; margin: 4px 0 10px; background: var(--bg); border: 2px solid var(--slate); padding: 1px; display: flex; gap: 2px; }
.pb span { display: block; height: 100%; background: var(--cob); }
.pb.done span { background: var(--yel); }
.pb.segs span { flex: 1; background: transparent; }
.pb.segs span.on { background: var(--cob); }
.pb.segs.done span.on { background: var(--yel); }
.card .pb:last-child { margin-bottom: 0; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 10px 4px 8px; margin-bottom: 0; }
.stat b { display: block; font: 700 26px/1.15 var(--head); color: #fff; }

/* ---------- buttons ---------- */
.btn-wrap { filter: drop-shadow(3px 3px 0 #000); margin-top: 14px; }
.btn {
    display: block; width: 100%; text-align: center; padding: 13px 10px;
    font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .06em;
    background: var(--yel); color: #0d0e12; border: 2px solid #fff;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn:active { transform: translate(2px, 2px); }
.btn.sec { background: var(--card); color: var(--chrome); border: 1px solid var(--slate2); font-weight: 600; font-size: 14px; }
.btn.off { opacity: .55; font-size: 12px; }
.last { margin-top: 12px; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { padding: 7px 11px; border: 1px solid var(--slate2); background: var(--card); color: var(--chrome); font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.chip.on { background: var(--yel); color: #0d0e12; border-color: #fff; }

/* ---------- leaderboard ---------- */
.table { margin-bottom: 14px; }
.lb { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--slate); }
.lb .n { width: 30px; font: 600 18px var(--head); color: var(--steel); }
.lb .n.p { color: var(--yel); }
.lb .nm { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.lb .nm .sub { display: block; font-size: 11px; color: var(--steel); font-weight: 400; }
.lb.me { background: rgba(250, 204, 21, .09); border-left: 3px solid var(--yel); }
.lb .mono { font-size: 11px; white-space: nowrap; }
.mini { display: flex; gap: 6px; padding: 4px 6px 10px 38px; flex-wrap: wrap; }
.mini span { flex: 1; min-width: 80px; border: 1px solid var(--slate); background: var(--bg); padding: 4px 6px; font: 600 9px var(--mono); color: var(--steel); text-transform: uppercase; }
.mini b { display: block; font-size: 13px; color: var(--cob); font-weight: 700; }
.sub-title { margin-bottom: 4px; }
.note { margin: 10px 4px; line-height: 1.5; text-transform: none; letter-spacing: .02em; }
.today { padding: 4px 0 6px; border-bottom: 1px solid var(--slate); }
.today.me { background: rgba(250, 204, 21, .06); }
.today .lb { border: 0; padding-bottom: 2px; }
.exrow { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 38px; }
.exrow .ic { width: 22px; text-align: center; }
.exrow .pb { flex: 1; margin: 4px 0; height: 10px; }
.exrow .mono { font-size: 11px; min-width: 54px; text-align: right; }

/* ---------- notices / skeleton ---------- */
.notice { text-align: center; padding: 28px 8px 20px; }
.notice-icon { font-size: 36px; margin-bottom: 12px; }
.notice-title { font-size: 20px; color: var(--yel); margin-bottom: 10px; }
.notice p { margin: 8px 0; }
.skeleton { height: 16px; background: var(--raise); margin-bottom: 10px; animation: pulse 1.2s infinite alternate; }
.skeleton.short { width: 55%; }
@keyframes pulse { from { opacity: .35; } to { opacity: .8; } }

/* ---------- tabs ---------- */
.tabs {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 6;
    display: flex; background: var(--bg); border-top: 2px solid var(--slate2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs button { flex: 1; height: 52px; display: grid; place-items: center; font: 600 15px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); border-right: 1px solid var(--slate); text-align: center; }
.tabs button:last-child { border-right: 0; }
.tabs button.on { background: var(--yel); color: #0d0e12; font-weight: 700; }

/* ---------- add sheet / number pad ---------- */
.shade { position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .66); }
.sheet {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 9;
    background: var(--card); border-top: 3px solid var(--yel); box-shadow: 0 -6px 0 #000;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow-y: auto;
}
.sheet-title { font-size: 20px; }
.x { width: 32px; height: 32px; display: grid; place-items: center; color: var(--steel); text-align: center; }
.num { font: 700 34px var(--mono); text-align: center; padding: 12px; margin: 10px 0; background: var(--bg); border: 2px solid var(--slate); color: #fff; }
.num.empty { color: var(--slate2); }
.num small { font-size: 14px; color: var(--steel); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pad button { background: var(--raise); border: 1px solid var(--slate2); text-align: center; padding: 14px 0; font: 700 18px var(--mono); }
.pad button:active { background: var(--slate); }
.pad .ok { background: var(--yel); color: #0d0e12; border-color: #fff; font-family: var(--head); letter-spacing: .06em; text-transform: uppercase; }
.pad .ok:disabled { background: var(--raise); color: var(--slate2); border-color: var(--slate); }
.err { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--mag); background: #240c15; color: #fda4af; font-size: 13px; }
.hint { margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20;
    max-width: calc(100% - 32px); padding: 10px 14px; background: #000; color: var(--yel); border: 1px solid var(--yel);
    font: 600 12px var(--mono); letter-spacing: .04em; text-align: center; box-shadow: 3px 3px 0 #000;
}
.toast.show { animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
    .skeleton, .toast.show { animation: none; }
}