@font-face{font-family:BC;src:url(/fonts/BarlowCondensed-ExtraBold.ttf);font-display:swap}
@font-face{font-family:BCS;src:url(/fonts/BarlowCondensed-SemiBold.ttf);font-display:swap}
@font-face{font-family:DM;src:url(/fonts/DMMono-Regular.ttf);font-display:swap}
:root{--ink:#0B0908;--panel:#15100D;--line:#382B25;--paper:#EFE8DC;--dim:#A89F92;--red:#E2231A;--edge:#F2A23A}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);min-height:100%;-webkit-text-size-adjust:100%}
body{font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:radial-gradient(90% 520px at 50% -80px,rgba(226,35,26,.2),transparent 70%) no-repeat,var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--edge)}
#app{max-width:920px;margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 18px 150px}
.mono{font:12px/1.5 DM,ui-monospace,monospace;letter-spacing:.14em;color:var(--edge);text-transform:uppercase}
.mono.dim{color:var(--dim)}
.logo{font:92px/.9 BC,Impact,sans-serif;color:var(--red);letter-spacing:.01em;text-shadow:0 0 34px rgba(226,35,26,.45)}
h1,h2{font-family:BC,Impact,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
h2{font-size:34px;line-height:1}
.lead{font-size:20px;line-height:1.4;max-width:34em;margin:18px 0 26px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;padding:12px 20px;border-radius:6px;font:26px/1 BC,Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.btn.red{background:var(--red);color:#fff;box-shadow:0 0 34px rgba(226,35,26,.45)}
.btn.paper{background:var(--paper);color:var(--ink)}
.btn.line{border:1px solid var(--line);color:var(--paper);background:var(--panel)}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
.btn small{font:13px DM,monospace;letter-spacing:.12em;opacity:.85}
.stack{display:grid;gap:12px;max-width:520px}
.note{margin-top:22px;display:grid;gap:6px}
.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.foot a{margin-right:18px}
/* header */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.top .logo{font-size:70px}
.back{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font:22px/1 sans-serif;flex:none}
.title{flex:1;text-align:center;font:30px/1 BC,Impact,sans-serif;letter-spacing:.04em}
.bar{height:9px;background:#221a16;border-radius:2px;overflow:hidden;display:flex;margin:10px 0 8px}
.bar i{display:block;height:100%}.bar .v{background:var(--red)}.bar .p{background:var(--paper)}
/* mode cards on home */
.mode{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);margin-top:14px;padding:16px 16px 0;border-radius:4px}
.mode .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mode p{color:var(--dim);margin:6px 0 12px;max-width:40em}
.strip{display:flex;gap:6px;padding:12px 0;border-top:1px dashed var(--line);border-bottom:10px solid transparent;overflow:hidden;position:relative;background:repeating-linear-gradient(90deg,transparent 0 10px,#211813 10px 22px) top/100% 5px no-repeat}
.strip img,.strip .noimg{width:74px;height:74px;object-fit:cover;flex:none;border-radius:2px}
.strip .empty{color:#5d4c42}
/* set cards */
.set{background:var(--panel);border:1px solid var(--line);border-radius:4px;margin-top:14px}
.set header{display:flex;justify-content:space-between;gap:10px;padding:12px 14px 8px}
.frames{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;border-top:6px solid #1d1511;border-bottom:6px solid #1d1511;background:#110c0a;scrollbar-width:thin}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:10px;background:var(--paper);border-radius:4px;margin-top:14px}
.fr{position:relative;flex:none;width:168px;height:168px;border-radius:2px;overflow:hidden;background:#221a16}
.grid .fr{width:auto;height:auto;aspect-ratio:1}
.fr img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#221a16;font:13px DM,monospace;color:var(--dim);letter-spacing:.1em}
.fr svg{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none}
.fr.keep svg.x,.fr.go svg.o,.fr.plain svg{display:none}
.fr svg.o path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.fr svg.x path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round}
.fr.go img{filter:saturate(.55) brightness(.75)}
.fr .sz,.fr .du{position:absolute;bottom:4px;font:11px DM,monospace;letter-spacing:.08em;color:var(--edge);text-shadow:0 1px 3px #000}
.fr .sz{right:6px}.fr .du{left:6px}
.fr .nm{position:absolute;left:0;right:0;top:0;padding:4px 6px;font:10px DM,monospace;color:#fff;background:linear-gradient(#000a,#0000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.set footer{padding:10px 14px 12px;color:var(--dim);font-size:15px}
/* RIDD bar */
.dock{position:fixed;left:0;right:0;bottom:0;padding:14px 18px max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--ink) 34%)}
.dock .btn{max-width:884px;margin:0 auto}
/* sheets */
#sheet{position:fixed;inset:0;background:rgba(5,3,3,.82);display:flex;align-items:flex-end;justify-content:center;z-index:5;padding:16px}
#sheet[hidden],#toast[hidden]{display:none}
.card{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px 20px 20px;max-height:92vh;overflow:auto}
.card h2{margin:6px 0 12px}.card p{margin:0 0 14px}.card ul{margin:0 0 18px 0;list-style:none}
.card li{padding-left:16px;position:relative;font:22px/1.35 BCS,sans-serif}.card li:before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--red)}
.card input{width:100%;min-height:54px;border-radius:6px;border:1px solid var(--line);background:#0e0a08;color:var(--paper);padding:0 14px;font-size:18px;margin-bottom:10px}
.err{color:#ff8a80;font-size:15px;min-height:1.4em}
.links{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}.links button{color:var(--dim);text-decoration:underline;font-size:16px;padding:6px 0}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--paper);color:var(--ink);padding:12px 18px;border-radius:6px;font:20px/1.2 BCS,sans-serif;letter-spacing:.03em;z-index:6;max-width:92vw;text-align:center}
.prog{height:12px;background:#221a16;border-radius:2px;overflow:hidden;margin:18px 0 10px;max-width:520px}.prog i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
@media (min-width:700px){#sheet{align-items:center}.logo{font-size:128px}.fr{width:190px;height:190px}}
@media (max-width:420px){.fr{width:132px;height:132px}.logo{font-size:78px}.btn{font-size:23px}}