/* v59 The Loft + Sentence Sprint (web/js/loft.js) */
.loft-chip{background:rgba(40,24,10,.9);border-color:#e3b955;color:#f7ecd6}
.loft-board ol{list-style:none;padding:0;margin:10px 0;counter-reset:r}
.loft-board li{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid #4a3a24;counter-increment:r}
.loft-board li::before{content:counter(r);font:700 16px Georgia,serif;color:#d9b66a}
.loft-board li b{color:#ffd36a}.loft-board li small{color:#bba88a;font-size:12px}
.loft-board li.me{background:#3a2a14;border-radius:10px}
.loft-best b{color:#ffd36a}

.loft-race-page{background:radial-gradient(ellipse at 50% 0,#3a2414 0,#1a100a 55%,#110a06 100%);min-height:calc(100dvh - 96px)}
.loft-race{position:relative;max-width:1060px;margin:0 auto;padding:18px 20px 40px;color:#f3e5c9}
.lr-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.lr-head h1{font-size:22px;margin:2px 0 0;letter-spacing:-.01em}
.lr-head .h-kick{color:#d9b66a;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.lr-back{border:1px solid #4a3019;background:#24170d;color:#f2e6cf;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}
.lr-from{margin-left:auto;font-size:13px;color:#cdb98f;background:#24170d;border:1px solid #4a3019;border-radius:999px;padding:6px 12px}
.lr-track{background:linear-gradient(#1b120a,#140d07);border:1px solid #3a2614;border-radius:18px;padding:8px 12px;box-shadow:inset 0 2px 12px #0008}
.lr-lane{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;height:66px;border-bottom:1px dashed #3a2a18}
.lr-lane:last-child{border-bottom:0}
.lr-who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-who small{font-size:12px;color:#bba88a}
.lr-lane.me .lr-who b{color:#ffd36a}
.lr-run{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0 46px,#ffffff07 46px 48px)}
.lr-run::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:10px;background:repeating-conic-gradient(#f3ead2 0 25%,#1a120a 0 50%) 0 0/10px 10px;border-radius:2px;opacity:.85}
.lr-lane.me .lr-run{background:linear-gradient(90deg,#e3b95514,#e3b95500 70%),repeating-linear-gradient(90deg,transparent 0 46px,#ffffff07 46px 48px)}
.lr-fig{position:absolute;left:0;bottom:2px;width:64px;height:64px;transition:left .12s linear}
.lr-fig svg{width:100%;height:100%;display:block;overflow:visible}
.lr-lane.ghost .lr-fig{opacity:.55;filter:saturate(.6) drop-shadow(0 0 6px #9fd6ff88)}
.lr-lane.ghost.fin .lr-fig{opacity:.8}
.lr-lane.me .lr-fig{filter:drop-shadow(0 3px 4px #0009)}
.lr-pace{display:block;width:34px;height:34px;margin:18px auto 0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d8,#e3b955 55%,#8a6a2a);box-shadow:0 0 14px #ffd36a66}
.lr-dot{display:block;width:30px;height:30px;margin:22px auto 0;border-radius:50%;background:#9fd6ff55}
.lr-text{user-select:none;-webkit-user-select:none;margin:18px 0 8px;background:#f7efdc;color:#3a2a14;border-radius:16px;padding:20px 24px;font:500 24px/1.75 "Atkinson Hyperlegible",Verdana,system-ui,sans-serif;max-height:9.2em;overflow:hidden;box-shadow:0 10px 30px #0006;letter-spacing:.01em}
.lr-text span{border-radius:3px;white-space:pre-wrap}
.lr-text span.ok{color:#2f8a5e}
.lr-text span.cur{background:#ffd36a;box-shadow:0 2px 0 #8a5a00}
.lr-text span.mk:not(.ok){color:#7a1f2a;font-weight:800}
.lr-text span.bad{background:#ff8a7a;color:#5a0f12;animation:lrBad .3s ease-out}
.lr-text span.shake{animation:lrShake .25s}
@keyframes lrBad{0%{transform:scale(1.35)}100%{transform:none}}
@keyframes lrShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.lr-in{width:100%;font:500 20px system-ui,sans-serif;padding:12px 16px;border-radius:12px;border:2px solid #e3b955;background:#24170d;color:#fff;caret-color:#ffd36a}
.lr-in:focus{outline:none;box-shadow:0 0 0 4px #e3b95544}
.lr-tip{min-height:26px;margin:8px 2px 0;font-weight:700;color:#ffb3a8;opacity:0;transition:opacity .2s}
.lr-tip.on{opacity:1}
.lr-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px;color:#cdb98f;font-size:14px}
.lr-stats b{color:#fff;font-size:20px;margin-right:4px}
.lr-prac{margin-left:auto;font-size:12px;border:1px solid #4a3019;border-radius:999px;padding:3px 10px}
.lr-count{position:absolute;inset:0;display:none;place-items:center;pointer-events:none;font:900 120px Georgia,serif;color:#ffd36a;text-shadow:0 6px 30px #000}
.lr-count.on{display:grid}
.lr-count.pop{animation:lrPop .5s ease-out}
.lr-count.go{color:#7ee0ad}
@keyframes lrPop{from{transform:scale(1.6);opacity:.3}to{transform:none;opacity:1}}
.lr-done{position:absolute;left:50%;top:90px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));background:#fffaf0;color:#3a2a10;border-radius:22px;padding:26px 26px 22px;text-align:center;box-shadow:0 30px 90px #000c;animation:rwRow .4s ease-out both;z-index:5}
.lr-done h2{margin:8px 0 12px;font-size:26px}
.lr-medal{width:92px;height:92px;margin:0 auto;border-radius:50%;display:grid;place-content:center;font-family:Georgia,serif;box-shadow:inset 0 0 0 5px #fff6,0 8px 22px #0004}
.lr-medal b{font-size:28px;line-height:1}.lr-medal small{font:700 11px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.lr-medal.gold{background:radial-gradient(circle at 35% 30%,#fff7cf,#f0c040 55%,#b07812)}
.lr-medal.silver{background:radial-gradient(circle at 35% 30%,#fff,#c8ced6 55%,#7d8792)}
.lr-medal.bronze{background:radial-gradient(circle at 35% 30%,#ffe3c8,#d08a4e 55%,#8a4f22)}
.lr-medal.plain{background:radial-gradient(circle at 35% 30%,#fff,#e6d6b0 60%,#a8956a)}
.lr-nums{display:flex;justify-content:center;gap:12px;list-style:none;padding:0;margin:0 0 14px}
.lr-nums li{flex:1;background:#fff;border:1px solid #e6d6b0;border-radius:14px;padding:10px 6px}
.lr-nums b{display:block;font:700 26px Georgia,serif;color:#8a5a00}.lr-nums span{font-size:12px;color:#7a6a4a}
.lr-perfect{color:#1d6e47;font-weight:700}
.lr-perfect .rw-mini{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:6px;background:radial-gradient(circle at 34% 30%,#effff6 0 14%,#7ee0ad 15% 46%,#2fa36a 47%);box-shadow:inset 0 0 0 1.5px #1f7a4e}
.lr-watch{text-align:left;background:#fff3e6;border:1px solid #f0cfa8;border-radius:14px;padding:10px 16px;margin-bottom:8px}
.lr-watch p{margin:0 0 4px;font-weight:700;color:#8a3a1a}
.lr-watch ul{margin:0;padding-left:18px}.lr-watch li{margin:2px 0}.lr-watch q{font-style:italic}
.lr-note{color:#6b5a3a;font-size:14px}
.lr-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.lr-acts .btn{padding:11px 18px;border-radius:999px;border:1px solid #c9a24a;background:#fff;color:#3a2a10;font-weight:700;cursor:pointer}
.lr-acts .btn.cta{background:#2a1d0c;color:#f7ecd6;border-color:#2a1d0c}
@media (max-width:640px){
  .loft-race{padding:10px 10px 30px}
  .lr-head h1{font-size:17px}.lr-from{margin-left:0}
  .lr-lane{grid-template-columns:78px 1fr;height:52px}
  .lr-who b{font-size:12px}.lr-who small{font-size:10px}
  .lr-fig{width:48px;height:48px}
  .lr-text{font-size:19px;padding:14px 16px;max-height:8.8em}
  .lr-stats{gap:12px;font-size:12px}.lr-stats b{font-size:17px}
  .lr-done{top:40px;padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){.lr-fig{transition:none}.lr-text span.bad,.lr-text span.shake,.lr-count.pop,.lr-done{animation:none}}
