:root{--red:#E31837;--black:#111111;--white:#F5F5F5;--yellow:#F0B90B;--green:#39ff88}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--white);font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif}
#app canvas{display:block}
.hidden{display:none!important}
kbd{display:inline-block;background:var(--yellow);color:var(--black);border-radius:4px;padding:1px 7px;font-weight:900;font-family:monospace;box-shadow:0 2px 0 #8a6a00}
#hud{position:fixed;top:12px;left:12px;background:rgba(17,17,17,.82);border-left:4px solid var(--red);padding:8px 12px;border-radius:4px;font-size:13px;pointer-events:none;min-width:240px}
.hud-brand{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.logo-txt{font-weight:900;font-size:20px;letter-spacing:1px;color:var(--white)}.logo-txt b{color:var(--red)}
.chain-pill{background:var(--yellow);color:var(--black);font-weight:900;font-size:11px;padding:2px 7px;border-radius:10px}
.hud-row{display:flex;gap:12px;margin-top:2px}.hud-row.small{font-size:11px}.tk{font-family:monospace;color:var(--yellow)}
.dim{opacity:.6}
#controls{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(17,17,17,.7);padding:6px 14px;border-radius:14px;font-size:12px;pointer-events:none}
#prompt{position:fixed;top:62%;left:50%;transform:translateX(-50%);background:var(--black);border:2px solid var(--yellow);padding:8px 16px;border-radius:6px;font-weight:700;font-size:16px;pointer-events:none;box-shadow:0 0 18px rgba(240,185,11,.5);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 30px rgba(240,185,11,.9)}}
#crosshair{position:fixed;top:50%;left:50%;width:4px;height:4px;margin:-2px;background:rgba(255,255,255,.6);border-radius:50%;pointer-events:none}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(227,24,55,.55),rgba(0,0,0,.92) 70%);z-index:20}
.start-card{text-align:center;max-width:520px;padding:30px}
.start-logo{font-size:64px;font-weight:900;letter-spacing:2px}.start-logo b{color:var(--red);text-shadow:0 0 20px rgba(227,24,55,.8)}
.start-sub{font-weight:900;letter-spacing:4px;margin-bottom:12px}.y{color:var(--yellow)}
#start-btn{margin-top:14px;background:var(--red);color:var(--white);border:3px solid var(--white);padding:14px 26px;font-size:18px;font-weight:900;letter-spacing:2px;cursor:pointer;border-radius:4px}
#start-btn:hover{background:var(--yellow);color:var(--black)}
.fine{font-size:11px;opacity:.6;margin-top:18px}
#panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:10}
.panel-inner{width:min(920px,94vw);max-height:86vh;overflow:auto;background:var(--black);border:3px solid var(--red);border-radius:8px;box-shadow:0 0 0 3px var(--black),0 0 40px rgba(227,24,55,.6)}
.panel-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:var(--red);padding:10px 16px;font-weight:900;font-size:20px;letter-spacing:1px;z-index:1}
#panel-close{background:var(--black);color:var(--white);border:0;font-size:16px;width:32px;height:32px;border-radius:50%;cursor:pointer}
#panel-body{padding:16px 20px;font-size:15px;line-height:1.45}
#panel-body a{color:var(--yellow)}
#panel-body code,.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;word-break:break-all}
.tag{display:inline-block;background:var(--yellow);color:var(--black);font-weight:900;font-size:11px;padding:2px 7px;border-radius:3px;margin-right:6px}
.tag.red{background:var(--red);color:var(--white)}.tag.gray{background:#444;color:var(--white)}
.note{font-size:12px;opacity:.75;border-left:3px solid var(--yellow);padding-left:8px;margin:10px 0}
table.t{width:100%;border-collapse:collapse;font-size:13px}table.t th,table.t td{padding:5px 6px;border-bottom:1px solid #2a2a2a;text-align:left}
table.t th{color:var(--yellow);position:sticky;top:46px;background:var(--black)}
.up{color:#3ddc84}.down{color:#ff4d6a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.card{background:#1b1b1b;border:1px solid #333;border-radius:6px;padding:10px 12px}
.card h4{margin:0 0 6px;color:var(--yellow);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.big{font-size:26px;font-weight:900}
/* Step 10: panel boot-in (runs after the full-screen enter transition reveals) */
#panel.enter .panel-inner{animation:bootIn .55s cubic-bezier(.2,1.4,.4,1) both}
#panel.enter .panel-head{animation:headFlash .9s ease-out both}
#panel.fx-crt .panel-inner{border-color:#39ff88;box-shadow:0 0 0 3px #111,0 0 50px rgba(57,255,136,.55)}
#panel.fx-console .panel-inner{box-shadow:0 0 0 3px #111,0 0 50px rgba(240,185,11,.6)}
#panel.fx-rewards .panel-inner{border-color:#F0B90B}
@keyframes bootIn{0%{transform:scale(.6,.02);filter:brightness(4);opacity:0}35%{transform:scale(1.02,.06);opacity:1}70%{transform:scale(1.01,1.03)}100%{transform:none;filter:none}}
@keyframes headFlash{0%{background:#F5F5F5}30%{background:#F0B90B}100%{background:#E31837}}
/* ---- HD-2D restyle: diorama HUD (original styling) ---- */
#hud{background:linear-gradient(160deg,rgba(28,14,18,.88),rgba(10,8,10,.82));border:1px solid rgba(240,185,11,.35);border-left:4px solid var(--red);border-radius:6px;padding:10px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);text-shadow:0 1px 0 #000}
#hud::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;background:var(--yellow);box-shadow:-10px 0 0 var(--red)}
.logo-txt{text-shadow:0 0 12px rgba(227,24,55,.55),0 2px 0 #000}
#controls{background:linear-gradient(180deg,rgba(24,14,16,.85),rgba(8,6,8,.85));border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 18px rgba(0,0,0,.4);letter-spacing:.3px}
#prompt{background:linear-gradient(180deg,#1b1114,#0c0a0b);border:2px solid var(--yellow);border-radius:8px;letter-spacing:.4px;text-shadow:0 1px 0 #000}
#prompt::before{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--yellow);border-bottom:0}
#start{background:radial-gradient(ellipse at 50% 45%,#5a1420,#0b0608 70%)}
.start-card{background:linear-gradient(180deg,rgba(18,10,12,.82),rgba(8,6,8,.9));border:1px solid rgba(240,185,11,.4);border-radius:10px;box-shadow:0 0 0 4px rgba(17,17,17,.7),0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(227,24,55,.25)}
.start-logo{text-shadow:0 4px 0 #000,0 0 30px rgba(227,24,55,.5)}
#start-btn{box-shadow:0 5px 0 #7a0a1c,0 0 24px rgba(227,24,55,.6);transition:transform .08s}
#start-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #7a0a1c}
body.playing #crosshair{opacity:.35}

/* checkout clerk dialogue */
.clerk-talk { background: linear-gradient(180deg, rgba(40,10,12,.9), rgba(12,8,8,.92)); border: 1px solid rgba(227,24,55,.5); border-radius: 8px; padding: 16px 18px; }
.clerk-name { color: #F0B90B; font-weight: 900; letter-spacing: .14em; font-size: 12px; margin-bottom: 6px; }
.clerk-line { color: #f4ece0; font-size: 20px; line-height: 1.35; font-style: italic; }
.clerk-choices { display: flex; gap: 12px; margin: 16px 0 6px; }
.clerk-btn { flex: 1; padding: 14px 0; font-weight: 900; font-size: 18px; letter-spacing: .12em; border: 0; border-radius: 6px; cursor: pointer; }
.clerk-btn.buy { background: #F0B90B; color: #111; } .clerk-btn.sell { background: #E31837; color: #fff; }
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0 8px; }
.wallet-btn { background: #161212; color: #f4ece0; border: 1px solid #5a4a3a; border-radius: 6px; padding: 11px 10px; font-weight: 800; cursor: pointer; text-align: left; }
.wallet-btn:hover { border-color: #F0B90B; }
.swap-link { display: flex; gap: 6px; margin-top: 8px; } .swap-link input { flex: 1; min-width: 0; background: #0d0d0d; color: #ccc; border: 1px solid #444; border-radius: 4px; padding: 7px 8px; font: 12px monospace; }
.swap-link button, .swap-link a { background: #2a2420; color: #F0B90B; border: 1px solid #5a4a3a; border-radius: 4px; padding: 7px 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.note.warn { color: #ffcf6a; } ul.facts { margin: 6px 0 10px 18px; padding: 0; line-height: 1.5; } ul.facts code { font-size: 11px; word-break: break-all; }
.clerk-back { background: none; border: 0; color: #F0B90B; cursor: pointer; font-weight: 800; padding: 4px 0; }

/* anime4: single loading bar on the title card; the store renders only after Start */
#load-bar{width:min(360px,80%);height:8px;margin:14px auto 6px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
#load-fill{height:100%;width:0;background:linear-gradient(90deg,#e31837,#f0b90b);transition:width .25s}
#load-txt{font-size:12px;opacity:.75;margin-bottom:10px}
#start-btn[disabled]{opacity:.55;cursor:progress}
body.store-ready #load-bar,body.store-ready #load-txt{display:none}
/* ---- anime5: diegetic shop UI (shelf-tag HUD, lightbox start card, receipt-style panels), mute button, photo mode ---- */
#hud{background:#0b0b0d;color:#f2f2f2;border:2px solid #F0B90B;border-left:2px solid #F0B90B;border-radius:6px;padding:0 0 8px;overflow:hidden;min-width:250px;box-shadow:0 0 0 2px #000,0 0 18px rgba(240,185,11,.35),0 8px 24px rgba(0,0,0,.5)}
#hud .hud-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F0B90B;color:#0b0b0d;padding:4px 10px;margin:0 0 6px;border-bottom:3px solid #E31837}
#hud .logo-txt{font-weight:900;letter-spacing:1px;color:#fff;background:#0b0b0d;padding:1px 7px;border-radius:3px;text-shadow:none}#hud .logo-txt b{color:#E31837}
#hud .chain-pill{background:#0b0b0d;color:#F0B90B;border:1px solid #0b0b0d;font-weight:800;font-size:11px;padding:1px 7px;border-radius:10px}
#hud .hud-row{padding:0 10px}#hud .tk{color:#E31837;font-weight:900;text-transform:uppercase;letter-spacing:1px}
#hud #hud-price{color:#F0B90B;font-weight:800}#hud .hud-row.small{color:#c9c9c9}#hud .hud-row.small b{color:#F0B90B}#hud .dim{color:#9a9a9a}
#hud::before,#hud::after{content:none;display:none}
#hud .up{color:#2ee87a}#hud .down{color:#ff4d5e}
.start-card{border:0;border-radius:6px;box-shadow:0 0 0 6px #0b0b0d,0 0 0 8px #c9cbd0,0 0 0 10px #0b0b0d,0 0 40px 12px rgba(227,24,55,.45),0 24px 60px rgba(0,0,0,.7)}
.start-logo{text-shadow:0 0 18px rgba(255,80,100,.55),0 3px 0 #000}
.panel-inner{border-radius:4px;border:0;box-shadow:0 0 0 3px #0b0b0d,0 0 0 5px #c9cbd0,0 0 40px rgba(227,24,55,.55)}
.panel-head{background:linear-gradient(180deg,#ef2140,#b80f2b);box-shadow:inset 0 -3px 0 var(--yellow)}
.panel-head::after{content:"";flex:0 0 90px;height:22px;margin:0 12px 0 auto;opacity:.55;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px)}
#panel-body{background:radial-gradient(#ffffff08 1px,transparent 1px) 0 0/6px 6px}
#mute-btn{position:fixed;top:12px;right:12px;z-index:5;background:#0b0b0d;color:#F0B90B;border:2px solid #F0B90B;border-bottom:3px solid #E31837;box-shadow:0 0 0 2px #000,0 0 12px rgba(240,185,11,.35);border-radius:6px;padding:6px 10px;font:700 13px system-ui,Arial;cursor:pointer}

/* anime8: quick 200 ms fade instead of the CRT boot-in */
#panel.enter .panel-inner{animation:msFade .2s ease-out both}
#panel.enter .panel-head{animation:none}
#panel.fadeout .panel-inner{transition:opacity .16s;opacity:0}
@keyframes msFade{0%{opacity:0;transform:translateY(6px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes msFlash{0%{opacity:.9}100%{opacity:0}}
/* anime12: register ticket (clerk 1 / 2) */
.ms-ticket{position:fixed;right:6%;top:50%;width:300px;transform:translate(0,-40%) rotate(1.2deg) translateY(30px);opacity:0;pointer-events:none;z-index:40;background:#fbf8f1;color:#18141a;font:13px/1.35 "Courier New",monospace;padding:14px 16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 2px #111;transition:opacity .18s,transform .22s cubic-bezier(.2,1.4,.4,1)}
.ms-ticket.on{opacity:1;pointer-events:auto;transform:translate(0,-40%) rotate(1.2deg)}
.ms-ticket .tk-head{display:flex;justify-content:space-between;gap:8px;border-bottom:2px dashed #18141a;padding-bottom:6px;margin-bottom:8px;font-size:12px}
.ms-ticket .tk-head b{color:#E31837;letter-spacing:.5px}
.ms-ticket .tk-big{font:900 22px "Arial Black",Arial,sans-serif;color:#E31837;margin:2px 0 8px;letter-spacing:-.3px}
.ms-ticket .tk-row{display:flex;justify-content:space-between;border-bottom:1px dotted #8a8088;padding:3px 0}
.ms-ticket .tk-fine{font-size:11px;color:#4a4248;margin:9px 0}
.ms-ticket .tk-btns{display:flex;gap:6px;align-items:stretch}
.ms-ticket .tk-open{flex:1;background:#E31837;color:#fff;text-decoration:none;font:900 12px Arial,sans-serif;padding:8px 6px;text-align:center;border:2px solid #111}
.ms-ticket button{background:#111;color:#F0B90B;border:2px solid #111;font:900 11px Arial,sans-serif;padding:6px 8px;cursor:pointer}
.ms-ticket .tk-tear{position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,#fbf8f1 0) 0 0/12px 8px,linear-gradient(45deg,transparent 6px,#fbf8f1 0) 0 0/12px 8px}

/* ---- anime13: first-visit welcome (one beat at a time, skippable) ---- */
#ms-welcome{position:fixed;left:28px;bottom:84px;width:min(420px,80vw);z-index:46;background:#111;color:#fff;font:600 15px/1.4 Arial,sans-serif;padding:14px 18px 12px;border:3px solid #fff;box-shadow:8px 8px 0 #E31837;transform:skewX(-6deg) translateY(16px);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none}
#ms-welcome.on{opacity:1;transform:skewX(-6deg);pointer-events:auto}
#ms-welcome>*{transform:skewX(6deg)}
#ms-welcome .w-tag{display:inline-block;background:#E31837;color:#fff;font:900 12px "Arial Black",Arial;letter-spacing:1px;padding:2px 8px;margin-bottom:6px}
#ms-welcome b{color:#F0B90B}
#ms-welcome kbd{background:#fff;color:#111;border-radius:3px;padding:0 5px;font:900 12px Arial}
#ms-welcome .w-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
#ms-welcome .w-dots{color:#F0B90B;font-size:11px;letter-spacing:2px}
#ms-welcome .w-skip{background:transparent;color:#aaa;border:1px solid #555;font:900 11px Arial;padding:3px 8px;cursor:pointer}

/* ---- anime13: F-info sheets read as register tickets hanging off the counter, not web pages (?ticket=0 restores) ---- */
body.t13 #panel{background:rgba(10,6,12,.22);justify-content:flex-end;padding-right:5vw}
body.t13 .panel-inner{width:min(600px,92vw);max-height:84vh;background:#fbf8f1;color:#18141a;border-radius:2px;box-shadow:0 0 0 2px #18141a,10px 12px 0 rgba(227,24,55,.85),0 18px 40px rgba(0,0,0,.45);transform:rotate(.6deg);position:relative;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;padding-bottom:10px}
body.t13 .panel-head{background:#fbf8f1;color:#E31837;box-shadow:none;border-bottom:2px dashed #18141a;font:900 17px "Arial Black",Arial,sans-serif;letter-spacing:.3px;padding:12px 16px 8px}
body.t13 .panel-head::before{content:"MEMESTOCK STORE · REG 1";display:block;position:absolute;top:2px;left:16px;font:700 9px "Courier New",monospace;color:#6a6068;letter-spacing:1px}
body.t13 .panel-head::after{opacity:.8;background:repeating-linear-gradient(90deg,#18141a 0 2px,transparent 2px 4px,#18141a 4px 5px,transparent 5px 8px,#18141a 8px 11px,transparent 11px 13px)}
body.t13 #panel-close{background:#18141a;color:#F0B90B}
body.t13 #panel-body{background:none;color:#18141a;font:14px/1.45 "Courier New",ui-monospace,monospace}
body.t13 #panel-body h3,body.t13 #panel-body h4{color:#E31837;font-family:"Arial Black",Arial,sans-serif}
body.t13 #panel-body a{color:#b8102b;font-weight:700}
body.t13 #panel-body p,body.t13 #panel-body li,body.t13 #panel-body td,body.t13 #panel-body th,body.t13 #panel-body span,body.t13 #panel-body div{color:inherit}
body.t13 #panel-body .card{background:#fff;border:1px dashed #18141a;color:#18141a;box-shadow:none}
body.t13 #panel-body .note,body.t13 #panel-body .fine,body.t13 #panel-body small{color:#5a5058}
body.t13 #panel-body table{border-collapse:collapse}
body.t13 #panel-body tr{border-bottom:1px dotted #8a8088}
body.t13 #panel-body canvas{background:#18141a;border-radius:2px}
body.t13 #panel-body button{border-radius:2px}
body.t13 #panel.enter .panel-inner{animation:msTicketIn .22s cubic-bezier(.2,1.3,.4,1) both}
@keyframes msTicketIn{from{opacity:0;transform:rotate(.6deg) translateY(-28px)}to{opacity:1;transform:rotate(.6deg)}}
/* anime14: E/F prompt lives in the world (paper ticket at the station / register); the HUD pill is hidden */
body.p14 #prompt{display:none!important}
/* register ticket prints out of the register (positioned by script) */
body.r14 .ms-ticket{right:auto;transform:rotate(1.2deg) translateY(-18px);clip-path:inset(0 0 100% 0);transition:opacity .2s,transform .55s cubic-bezier(.2,1.3,.4,1),clip-path .55s steps(9)}
body.r14 .ms-ticket.on{transform:rotate(1.2deg);clip-path:inset(0 0 0 0)}
/* F-info panel hangs next to the thing it describes, with a pin on it */
body.r14 #panel{background:rgba(10,6,12,.18);display:block;padding:0}
body.r14 #panel.hidden{display:none}
body.r14 #panel .panel-inner{position:absolute;width:min(640px,56vw);max-height:78vh}
#ms-pin14{position:fixed;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#E31837;border:3px solid #fbf8f1;box-shadow:0 2px 6px rgba(0,0,0,.6);z-index:11;pointer-events:none;opacity:0;transition:opacity .2s}
#ms-pin14.on{opacity:1}