:root{
  --bg:#03050c; --s1:#07101a; --s2:#0b1424; --s3:#0e1a2c; --border:#122035;
  --blue:#4890d0; --blueD:#183a65; --teal:#24d4bc;
  --atk:#c84828; --atk-glow:#ff8a6e;
  --def:#22bc60; --def-glow:#6bf2a2;
  --utl:#7838cc; --utl-glow:#b794ff;
  --eco:#c09820; --eco-glow:#f4d27a;
  --text:#a0bcd4; --text-bright:#dbe8f4;
  --dim:#2a3e58; --faint:#1a2a40;
  --locked:#050a14; --rune:#1a3450;
  --boss:#8b0000; --boss-glow:#ff4444;
  --crit:#ffcf33; --crit-bright:#fff2a8;
  --omen:#b794ff;
}
html, body { 
  height: 100dvh; width: 100vw; overflow: hidden; 
  margin: 0; padding: 0; box-sizing: border-box; 
  touch-action: none; overscroll-behavior: none;
  background: var(--bg); color: var(--text); 
  font-family: 'Cinzel', serif;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 1s ease;
}
/* VOID MODE — scoped to canvas only, leaving UI legible */
#stage canvas { transition: filter 1.8s ease; }
body.void-mode #stage canvas { filter: hue-rotate(170deg) saturate(1.35) brightness(1.05); }
body.void-mode #hd .word { color: var(--utl-glow); text-shadow: 0 0 18px var(--utl); }
body.void-mode #hd .rnd { color: var(--utl-glow); }
body.void-mode { background: #060312; }

*, *::before, *::after { box-sizing: inherit; -webkit-tap-highlight-color: transparent; user-select: none; }
body::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: 
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(72,144,208,.10), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(36,212,188,.06), transparent 70%);
}
#device {
  width: 100%; max-width: 430px; height: 100%; 
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: transparent;
}
@media (min-width: 431px) { 
  #device { 
    height: 90vh; max-height: 850px; 
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 0 0 1px #0a1422, 0 30px 80px -10px rgba(0,0,0,.9), 0 0 120px -20px rgba(72,144,208,.25); 
  } 
}
#device::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:60;
  background: 
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.10) 3px, rgba(0,0,0,0) 4px),
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply; opacity:.5;
}
/* Chromatic aberration / accent flash overlay */
#device::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:61;
  opacity:0; transition: opacity .15s; mix-blend-mode:screen;
}
#device.chroma-gold::after   { opacity:.85; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,207,51,.5), transparent 70%); }
#device.chroma-red::after    { opacity:.70; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,40,40,.5),  transparent 70%); }
#device.chroma-purple::after { opacity:.75; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(183,148,255,.55), transparent 70%); }

#app { position:absolute; inset:0; display:flex; flex-direction:column; z-index:10; overflow:hidden; }

#stage { flex:1 1 0; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px; }
#stage canvas { width: 100%; height: 100%; object-fit: contain; display:block; }

#hd { height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--s1),transparent); position:relative; z-index:5; transition: background .6s, border-color .6s; }
#hd.boss { background:linear-gradient(180deg,#2a0808,transparent); border-bottom-color:var(--boss); }
#hd .rnd { font-size:8px; letter-spacing:.14em; color:var(--blue); transition: color .5s; }
#hd.boss .rnd { color:#ff4444; }
#hd .rnd b { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--text); display:block; letter-spacing:0; }
#hd.boss .rnd b { color:#ffb3b3; }
#hd .word { font-family:'Cinzel Decorative',serif; font-size:17px; font-weight:900; letter-spacing:.42em; color:var(--text); text-indent:.42em; text-shadow:0 0 14px rgba(72,144,208,.55); transition: color .5s, text-shadow .5s; }
#hd.boss .word { color:#ff4444; text-shadow:0 0 18px rgba(255,68,68,.7); }
#hd .rightSide { display:flex; align-items:center; gap:8px; }
#hd .hp { display:flex; gap:4px; align-items:center; }
#hd .pip { width:9px; height:9px; transform:rotate(45deg); background:var(--atk); border:1px solid #e87a5a; box-shadow:0 0 6px rgba(200,72,40,.7); transition: background .3s, box-shadow .3s, transform .3s; }
#hd .pip.dead { background:var(--locked); border-color:var(--dim); box-shadow:none; transform:rotate(45deg) scale(.7); }
#hd .pip.lowhp { animation: lowHpPulse 1.1s ease-in-out infinite; }
@keyframes lowHpPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200,72,40,.7); transform: rotate(45deg) scale(1); }
  50%      { box-shadow: 0 0 14px rgba(255,80,60,1), 0 0 22px rgba(255,80,60,.5); transform: rotate(45deg) scale(1.12); }
}
.hexPip { font-size:8px; color:#ff5555; background:rgba(255,0,0,.1); padding:3px 6px; border:1px solid #ff5555; border-radius:3px; cursor:help; animation:pulseHex 2s infinite; font-family:'Share Tech Mono',monospace; font-weight:bold; }
@keyframes pulseHex { 50% { box-shadow:0 0 8px rgba(255,0,0,.5); } }
.omenPip { font-size:14px; color:var(--omen); text-shadow:0 0 8px var(--omen); cursor:pointer; padding:2px 4px; animation:omenIdle 3s ease-in-out infinite; }
@keyframes omenIdle { 0%,100%{opacity:.7;} 50%{opacity:1; text-shadow:0 0 14px var(--omen);} }

#mt { height:42px; flex:0 0 42px; display:flex; gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.metric { flex:1; background:var(--bg); padding:5px 8px; display:flex; flex-direction:column; justify-content:center; gap:3px; border-top:2px solid transparent; transition:border-color .2s, background-color 1s; }
.metric .top { display:flex; justify-content:space-between; align-items:baseline; }
.metric .val { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--text); }
.metric .trk { height:3px; background:#0e1a2c; border-radius:2px; overflow:hidden; }
.metric .fil { height:100%; width:0%; transition:width .07s ease; border-radius:2px; position:relative; }
.metric.met { border-top-color:currentColor; } 
.metric.met .fil{ box-shadow:0 0 8px currentColor; }
.metric.met .val { color:var(--text-bright); }
.metric.dps { color:var(--atk); } .metric.surv{ color:var(--def); } .metric.gold{ color:var(--eco); }
.metric.over .fil { animation: overflowPulse .8s ease-in-out infinite; }
@keyframes overflowPulse { 50%{filter:brightness(1.6); box-shadow:0 0 14px currentColor;} }

.badge { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:7.5px; letter-spacing:.18em; color:var(--teal); background:rgba(3,5,12,.82); border:1px solid #133e3a; padding:4px 10px; border-radius:2px; white-space:nowrap; box-shadow:0 0 14px rgba(36,212,188,.18); display:flex; gap:8px; }
.badge .x { font-family:'Share Tech Mono',monospace; color:var(--text); }
.phaseTag { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:7.5px; letter-spacing:.3em; color:var(--dim); }

#infoPanel { position:absolute; bottom:0; left:0; right:0; padding:6px 14px; background:rgba(3,5,12,.94); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; justify-content:center; z-index:20; backdrop-filter:blur(4px); transition: transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity .2s; }
#infoPanel.hidden { transform:translateY(100%); opacity:0; pointer-events:none; }
#infoPanel .i-name { font-size:10px; letter-spacing:.2em; color:var(--text); font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:6px; }
#infoPanel .i-desc { font-size:8px; color:var(--dim); letter-spacing:.08em; }
#infoPanel .i-stats { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--blue); margin-top:2px; }
#infoPanel .i-fuse { color:var(--crit); font-family:'Share Tech Mono',monospace; font-size:8px; }

#pnl { flex:0 0 162px; height:162px; border-top:1px solid var(--border); background:linear-gradient(180deg,var(--s1),var(--bg)); position:relative; z-index:5; display:flex; flex-direction:column; overflow:hidden; }
.pnlHd { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:6px 12px; }
.pnlHd .t { font-size:9px; letter-spacing:.22em; color:var(--blue); }
.pnlHd .sp { font-size:8px; letter-spacing:.1em; color:var(--dim); }
.pnlHd .sp b { font-family:'Share Tech Mono',monospace; color:var(--eco); font-size:12px; }
.pnlHd .hexBadge { font-family:'Share Tech Mono',monospace; font-size:7.5px; color:#ff8888; letter-spacing:.08em; padding-left:6px; }

.shopGrid { display:flex; gap:4px; padding:0 8px 6px; overflow-x:auto; flex:1 1 0; min-height:0; align-items:stretch; scroll-behavior:smooth; }
.shopGrid::-webkit-scrollbar { height:3px; }
.shopGrid::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.card { flex:1 0 18%; min-width:62px; max-width:90px; background:var(--s2); border:1px solid var(--border); border-radius:3px; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; position:relative; transition:transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color .15s, box-shadow .15s; }
.card:active { transform:scale(.92); }
.card.sel { border-color:var(--teal); box-shadow:0 0 12px rgba(36,212,188,.35), inset 0 0 18px rgba(36,212,188,.08); }
.card.cant { opacity:.4; }
.card.fuse-hint { border-color:var(--crit); box-shadow:0 0 12px rgba(255,207,51,.4); }
.card.evo-hint { border-color:var(--utl-glow); box-shadow:0 0 14px rgba(183,148,255,.45); }
.card .glyph { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid currentColor; margin-top:2px; }
.card.unc .glyph { border-width:2px; } 
.card.rare .glyph { border-width:2px; animation:spin 7s linear infinite; box-shadow:inset 0 0 8px currentColor; }
.card.leg .glyph { border-width:2px; animation:spin 4s linear infinite; background:radial-gradient(circle, rgba(255,207,51,.2), transparent 70%); box-shadow:0 0 12px var(--crit), inset 0 0 8px currentColor; }
.card .nm { font-size:7px; letter-spacing:.08em; color:var(--text); text-align:center; }
.card .cost { position:absolute; top:2px; right:3px; font-family:'Share Tech Mono',monospace; font-size:8px; }
.card .tag { font-size:6px; letter-spacing:.12em; padding:1px 3px; border-radius:2px; margin-top:1px; }
.card .rarBadge { position:absolute; top:2px; left:3px; font-size:6px; letter-spacing:.08em; color:var(--dim); }
.card.leg .rarBadge { color:var(--crit); text-shadow:0 0 6px var(--crit); }
.card.rare .rarBadge { color:var(--blue); }
.card.unc .rarBadge { color:var(--def); }
.card .fuseTag { position:absolute; bottom:1px; left:50%; transform:translateX(-50%); font-family:'Share Tech Mono',monospace; font-size:6.5px; color:var(--crit); text-shadow:0 0 6px var(--crit); }

.tray { display:flex; gap:6px; padding:4px 12px; flex:1 1 0; overflow-y:auto; flex-wrap:wrap; align-content:flex-start; }
.tray .empty { font-size:8px; letter-spacing:.14em; color:var(--dim); padding:10px 4px; width:100%; text-align:center; }
.inv { width:40px; height:40px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid currentColor; cursor:pointer; position:relative; background:var(--s2); transition:transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .15s; }
.inv:active { transform:scale(.85); }
.inv.sel { box-shadow:0 0 14px rgba(36,212,188,.5); border-color:var(--teal); transform:scale(1.05); }
.inv .g { font-size:14px; line-height:1; } 
.inv .n { font-size:5px; letter-spacing:.06em; margin-top:1px; }
.inv .fuseBadge { position:absolute; top:-5px; right:-5px; background:linear-gradient(135deg, var(--crit), #e8a000); color:#1a0f00; font-family:'Share Tech Mono',monospace; font-size:7px; font-weight:bold; border-radius:8px; padding:1px 4px; box-shadow:0 0 8px var(--crit); letter-spacing:0; }

.readout { display:flex; gap:4px; padding:2px 8px 6px; flex:1 1 0; min-height:0; overflow-x:auto; align-items:stretch; }
.rtile { flex:1 0 auto; min-width:48px; max-width:60px; background:var(--s2); border:1px solid var(--border); border-radius:3px; padding:4px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; }
.rtile .g { font-size:13px; line-height:1; } 
.rtile .n{ font-size:5.5px; letter-spacing:.06em; color:var(--text); text-align:center; }
.rtile .bar { width:90%; height:2px; background:#0e1a2c; border-radius:2px; overflow:hidden; } 
.rtile .barf{ height:100%; width:0%; transition:width .05s linear; }
.rtile .fire { position:absolute; top:-7px; left:50%; transform:translateX(-50%); font-size:6px; letter-spacing:.1em; color:#fff; opacity:0; white-space:nowrap; }
.rtile .fire.go { animation:firelabel .4s ease; }
@keyframes firelabel { 0%{opacity:0; transform:translate(-50%,3px);} 30%{opacity:1; transform:translate(-50%,0);} 100%{opacity:0; transform:translate(-50%,-4px);} }
.rtile .fuseTag { position:absolute; top:-2px; right:2px; font-family:'Share Tech Mono',monospace; font-size:6.5px; color:var(--crit); text-shadow:0 0 4px var(--crit); }

.sheet { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 16px; text-align:center; min-height:0; overflow-y:auto; }
.sheet h2 { font-size:14px; letter-spacing:.26em; color:var(--text); font-weight:600; }
.sheet h2.victory { color:var(--def-glow); text-shadow:0 0 18px rgba(107,242,162,.6); }
.sheet h2.defeat { color:var(--atk-glow); text-shadow:0 0 18px rgba(255,138,110,.6); }
.sheet .rows { width:100%; display:flex; flex-direction:column; gap:4px; margin:2px 0; }
.sheet .row { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.1em; padding:5px 10px; background:var(--s2); border:1px solid var(--border); border-radius:2px; }
.sheet .row b { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0; }
.sheet .verdict { font-size:8px; letter-spacing:.2em; padding:2px 0; }
.sheet .win { color:var(--teal); } .sheet .lose{ color:var(--atk); }
.sheet .tally.ticking { color:var(--crit); }

/* Boss reveal — dramatic red background */
.bossSheet { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 16px; text-align:center; min-height:0; overflow-y:auto; background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(139,0,0,.25), transparent 70%); }
.bossSheet h2 { font-family:'Cinzel Decorative',serif; font-size:14px; letter-spacing:.18em; color:var(--boss-glow); font-weight:900; text-shadow:0 0 20px var(--boss-glow), 0 0 6px #fff; animation:bossPulse 2s ease-in-out infinite; }
@keyframes bossPulse { 50%{ text-shadow:0 0 30px var(--boss-glow), 0 0 12px #fff; } }
.bossSheet .bname { font-family:'Cinzel',serif; font-size:11px; letter-spacing:.22em; color:#ffb3b3; font-weight:700; }
.bossSheet .bmod { font-size:7.5px; letter-spacing:.1em; color:var(--text); padding:6px 10px; background:rgba(139,0,0,.18); border:1px solid #4a1010; border-radius:2px; line-height:1.55; max-width:340px; }
.bossSheet .bmod b { color:var(--boss-glow); font-family:'Share Tech Mono',monospace; }

.btn { font-family:'Cinzel',serif; font-weight:600; letter-spacing:.2em; font-size:10px; padding:8px 0; width:100%; background:var(--s2); color:var(--text); border:1px solid var(--border); border-radius:3px; cursor:pointer; transition:transform .1s, box-shadow .15s, background .15s; text-transform:uppercase; display:flex; align-items:center; justify-content:center; min-height:36px; }
.btn:active { transform:scale(.95); }
.btnRow { flex:0 0 auto; display:flex; gap:6px; padding:6px 10px 8px; }
.btn.primary { background:linear-gradient(180deg,#1a2b1c,#0c1510); border-color:#2a5e36; color:#bfeccb; }
.btn.invoke { border-color:#6e2b1c; color:#f0b49a; background:linear-gradient(180deg,#241410,#140a08); box-shadow:0 0 16px rgba(200,72,40,.32), inset 0 0 14px rgba(200,72,40,.12); }
.btn.return { border-color:#1c5e57; color:#aef0e6; background:linear-gradient(180deg,#0c1a19,#06100f); box-shadow:0 0 16px rgba(36,212,188,.3), inset 0 0 14px rgba(36,212,188,.1); }
.btn.boss { border-color:#8b0000; color:#ffb3b3; background:linear-gradient(180deg,#3a0c0c,#1a0505); box-shadow:0 0 18px rgba(139,0,0,.6); }
.btn.ghost { background:transparent; color:var(--dim); }
.btn[disabled] { opacity:.3; pointer-events:none; }

#nav { height:48px; flex:0 0 48px; display:flex; border-top:1px solid var(--border); background:var(--bg); position:relative; z-index:5; transition:background-color 1s; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--dim); position:relative; transition:color .15s; }
.tab .ic { font-size:13px; } .tab .tx{ font-size:7px; letter-spacing:.16em; }
.tab.on { color:var(--teal); }
.tab.on::after { content:""; position:absolute; bottom:5px; width:20px; height:2px; background:var(--teal); border-radius:2px; box-shadow:0 0 8px var(--teal); }

#sanctum { position:absolute; inset:0; bottom:48px; display:flex; flex-direction:column; background:var(--bg); z-index:8; overflow:hidden; transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateY(calc(100% + 48px)); pointer-events:none; }
#sanctum.active { transform:translateY(0); pointer-events:auto; }
.snHd { flex:0 0 auto; padding:14px 14px 10px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-end; background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(192,152,32,.10), transparent); }
.snHd h1 { font-family:'Cinzel Decorative',serif; font-size:22px; letter-spacing:.3em; font-weight:900; text-indent:.3em; color:var(--text-bright); text-shadow:0 0 18px rgba(192,152,32,.4); }
.snHd .treas { text-align:right; } 
.snHd .treas .v{ font-family:'Share Tech Mono',monospace; font-size:16px; color:var(--eco); }
.snHd .treas .v.flash { animation: treasFlash .5s ease; }
@keyframes treasFlash { 50%{ color:var(--crit); transform:scale(1.15); text-shadow:0 0 12px var(--crit);} }
.snBody { flex:1 1 0; overflow-y:auto; padding:12px 14px 16px; display:flex; flex-direction:column; gap:14px; }
.snSec h3 { font-size:9px; letter-spacing:.24em; color:var(--blue); margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.grimoire { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.gcard { background:var(--s1); border:1px solid var(--border); border-radius:4px; padding:8px; display:flex; flex-direction:column; justify-content:space-between; gap:4px; }
.gcard.active { border-color:var(--teal); box-shadow:0 0 12px rgba(36,212,188,.18); }
.gcard .gtop { display:flex; gap:6px; align-items:center; }
.gcard .gname { font-size:9.5px; letter-spacing:.12em; color:var(--text); }
.gcard .gbias { font-size:6.5px; letter-spacing:.06em; color:var(--dim); line-height:1.35; min-height:24px; }
.gcard .gbtn { font-family:'Cinzel',serif; font-size:7px; letter-spacing:.14em; padding:6px 0; border-radius:2px; border:1px solid var(--border); background:var(--s2); color:var(--text); cursor:pointer; text-align:center; }
.gcard .gbtn.owned { color:var(--dim); border-style:dashed; }
.gcard .gbtn.active { color:#bfeccb; border-color:#2a5e36; background:#141f16; }
.gcard .gbtn.buy { color:var(--eco); border-color:#4a3c18; }
.expList { display:flex; flex-direction:column; gap:6px; }
.expRow { display:flex; justify-content:space-between; align-items:center; background:var(--s1); border:1px solid var(--border); border-radius:3px; padding:8px 10px; }
.expRow .ei .en { font-size:8.5px; letter-spacing:.12em; color:var(--text); }
.expRow .ei .ed { font-size:6.5px; letter-spacing:.04em; color:var(--dim); margin-top:2px; }
.expRow .ebtn { font-family:'Cinzel',serif; font-size:7.5px; letter-spacing:.12em; padding:6px 10px; border-radius:2px; border:1px solid #4a3c18; background:var(--s2); color:var(--eco); cursor:pointer; }
.expRow .ebtn.owned { color:var(--dim); border-color:var(--border); border-style:dashed; }
.expRow .ebtn[disabled] { opacity:.35; }
.snStats { display:flex; gap:8px; padding:8px 10px; background:var(--s1); border:1px solid var(--border); border-radius:3px; }
.snStats .ss { flex:1; text-align:center; }
.snStats .ss .lbl { display:block; margin-bottom:3px; font-size:8px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; }
.snStats .ss .v { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--text-bright); }

#tutOverlay { position:absolute; inset:0; background:rgba(0,0,0,.82); z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(3px); }
#tutOverlay.show { opacity:1; pointer-events:all; }
.tutBox { background:var(--s1); border:1px solid var(--teal); border-radius:4px; padding:18px; width:82%; max-width:320px; text-align:center; box-shadow:0 0 24px rgba(36,212,188,.22); animation:tutPop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes tutPop { from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;} }
.tutBox h3 { color:var(--teal); font-size:13px; letter-spacing:.2em; margin-bottom:10px; }
.tutBox p { color:var(--text); font-size:9.5px; letter-spacing:.08em; line-height:1.6; margin-bottom:14px; font-family:'Share Tech Mono',monospace; }
.tutBox p b { color:var(--crit); }
.tutBox button { font-family:'Cinzel',serif; background:var(--teal); color:#000; border:none; padding:9px 20px; border-radius:2px; font-size:9px; font-weight:bold; letter-spacing:.2em; cursor:pointer; }

#omenOverlay { position:absolute; inset:0; z-index:101; opacity:0; pointer-events:none; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(120,56,204,.35), rgba(0,0,0,.92) 70%); backdrop-filter:blur(4px); transition:opacity .4s; }
#omenOverlay.show { opacity:1; pointer-events:all; }
.omenBox { background:linear-gradient(180deg, #0f0a1a, #050308); border:1px solid var(--utl); border-radius:4px; padding:20px 22px; width:80%; max-width:320px; text-align:center; box-shadow:0 0 30px rgba(120,56,204,.45), inset 0 0 24px rgba(120,56,204,.1); animation:omenPop .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes omenPop { from{transform:scale(.7) rotate(-3deg); opacity:0;} to{transform:scale(1) rotate(0); opacity:1;} }
.omenBox .otag { font-size:8px; letter-spacing:.32em; color:var(--utl-glow); margin-bottom:8px; }
.omenBox .oglyph { font-family:'Cinzel',serif; font-size:36px; color:var(--utl-glow); text-shadow:0 0 18px var(--utl), 0 0 6px #fff; margin-bottom:4px; animation:omenGlow 2s ease-in-out infinite; }
@keyframes omenGlow { 50%{ text-shadow:0 0 28px var(--utl-glow), 0 0 12px #fff; } }
.omenBox .oname { font-family:'Cinzel Decorative',serif; font-size:16px; color:var(--text-bright); letter-spacing:.12em; margin-bottom:8px; }
.omenBox .odesc { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--text); letter-spacing:.06em; line-height:1.55; margin-bottom:14px; }
.omenBox button { font-family:'Cinzel',serif; background:var(--utl); color:#fff; border:none; padding:9px 22px; border-radius:2px; font-size:9px; font-weight:bold; letter-spacing:.22em; cursor:pointer; }

/* Tier-bloom spotlight overlay */
#bloomOverlay { position:absolute; inset:0; z-index:99; opacity:0; pointer-events:none; background:radial-gradient(ellipse 80% 80% at 50% 50%, rgba(36,212,188,.4), transparent 60%); transition:opacity .3s; }
#bloomOverlay.show { opacity:1; animation:bloomBurst 1.4s ease forwards; }
@keyframes bloomBurst { 0%{opacity:0;} 20%{opacity:1;} 100%{opacity:0;} }
.bloomText { position:absolute; top:35%; left:50%; transform:translate(-50%,-50%); font-family:'Cinzel Decorative',serif; font-size:18px; letter-spacing:.3em; color:var(--teal); text-shadow:0 0 24px var(--teal), 0 0 10px #fff; font-weight:900; opacity:0; animation:bloomTextRise 1.4s ease forwards; }
@keyframes bloomTextRise { 0%,15%{opacity:0; transform:translate(-50%,-30%) scale(.6);} 35%{opacity:1; transform:translate(-50%,-50%) scale(1);} 75%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-70%) scale(1.1);} }
.bloomText.evo { color:var(--utl-glow); text-shadow:0 0 24px var(--utl-glow), 0 0 10px #fff; }
#bloomOverlay.evo { background:radial-gradient(ellipse 80% 80% at 50% 50%, rgba(183,148,255,.45), transparent 60%); }

#toast { position:absolute; bottom:60px; left:50%; transform:translateX(-50%) translateY(8px); background:rgba(7,16,26,.96); border:1px solid var(--border); color:var(--text); font-size:8.5px; letter-spacing:.12em; padding:7px 14px; border-radius:3px; opacity:0; transition:opacity .25s, transform .25s; z-index:50; pointer-events:none; white-space:nowrap; font-family:'Share Tech Mono',monospace; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@keyframes spin { to{ transform:rotate(360deg); } }
@keyframes tick-in { from{ opacity:0; transform:scale(.97) translateY(4px); } to{ opacity:1; transform:none; } }
.tickin { animation:tick-in .2s ease both; }

/* Screen shakes */
@keyframes shake-small { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-1px,1px);} 50%{transform:translate(1px,-1px);} 75%{transform:translate(-1px,-1px);} }
@keyframes shake-mid { 0%{transform:translate(1px,1px) rotate(0);} 20%{transform:translate(-2px,-2px) rotate(-1deg);} 40%{transform:translate(-3px,0) rotate(1deg);} 60%{transform:translate(3px,2px) rotate(0);} 80%{transform:translate(1px,-1px) rotate(1deg);} 100%{transform:translate(0,0) rotate(0);} }
@keyframes shake-big { 0%{transform:translate(2px,1px) rotate(0);} 15%{transform:translate(-5px,-3px) rotate(-1.5deg);} 30%{transform:translate(-6px,2px) rotate(1.5deg);} 45%{transform:translate(6px,4px) rotate(0);} 60%{transform:translate(-3px,-2px) rotate(1deg);} 75%{transform:translate(3px,1px) rotate(-1deg);} 100%{transform:translate(0,0) rotate(0);} }
.shake   { animation:shake-mid .35s cubic-bezier(.36,.07,.19,.97) both; }
.shake-s { animation:shake-small .2s ease both; }
.shake-b { animation:shake-big .55s cubic-bezier(.36,.07,.19,.97) both; }

/* ============================================================
   FRIEND-LAUNCH ADDITIONS — outcome preview, gallery, daily, ascension
   ============================================================ */

/* OUTCOME PREVIEW — during Inscribe phase, the bars show a projection */
.metric .fil.projected { 
  opacity: 0.55; 
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 100%) !important;
}
.metric.proj-met { border-top-color: var(--def-glow); }
.metric.proj-met .val { color: var(--def-glow); }
.metric .val .proj { color: var(--crit); font-family:'Share Tech Mono',monospace; }

/* BOSS PREVIEW PIP — small countdown chip in chrome */
.bossPreview { 
  font-family:'Share Tech Mono',monospace; font-size:7.5px; letter-spacing:.08em;
  padding:2px 5px; border-radius:2px; cursor:help;
  border:1px solid; transition: color .3s, border-color .3s;
}
.bossPreview.close { color: var(--boss-glow); border-color:var(--boss); background:rgba(139,0,0,.15); animation: bossPreviewPulse 1.6s ease-in-out infinite; }
.bossPreview.warn  { color: #e8a000; border-color:#5a3e10; background:rgba(192,152,32,.08); }
.bossPreview.calm  { color: var(--dim); border-color:var(--faint); }
@keyframes bossPreviewPulse { 50% { box-shadow:0 0 8px rgba(255,68,68,.5); } }

/* GALLERY OF SEALS */
.galleryGrid {
  display:grid; grid-template-columns: 1fr 1fr; gap:6px;
}
.sealCard {
  background:var(--s1); border:1px solid var(--border); border-radius:4px;
  padding:6px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .1s, border-color .15s, box-shadow .15s;
}
.sealCard:active { transform: scale(.97); }
.sealCard.victory { border-color:#1c5e57; box-shadow:0 0 10px rgba(36,212,188,.15); }
.sealCard.defeat  { border-color:#6e2b1c; }
.sealCard.void    { border-color:var(--utl); box-shadow:0 0 10px rgba(120,56,204,.2); }
.sealCard.ascension { border-color:var(--crit); box-shadow:0 0 10px rgba(255,207,51,.2); }
.sealCard .sealImg {
  width:100%; aspect-ratio:1; display:block; border-radius:2px;
  background:var(--bg); image-rendering: pixelated;
}
.sealCard .sealMeta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:4px; font-size:7.5px; letter-spacing:.08em;
}
.sealCard .sealMeta .r { color:var(--text); font-family:'Share Tech Mono',monospace; }
.sealCard .sealMeta .g { color:var(--eco); font-family:'Share Tech Mono',monospace; }
.sealCard .sealOmen {
  position:absolute; top:4px; right:6px;
  font-size:14px; color:var(--omen); text-shadow:0 0 6px var(--omen);
}
.sealCard .sealMode {
  position:absolute; top:4px; left:6px; font-size:6.5px; letter-spacing:.12em;
  padding:1px 4px; border-radius:2px; background:rgba(0,0,0,.6);
}
.sealCard .sealMode.daily { color:var(--crit); }
.sealCard .sealMode.asc   { color:var(--boss-glow); }

#sealDetail {
  position:absolute; inset:0; background:rgba(3,5,12,.95); 
  z-index:90; display:flex; flex-direction:column; padding:14px;
  opacity:0; pointer-events:none; transition:opacity .25s; overflow-y:auto;
}
#sealDetail.show { opacity:1; pointer-events:all; }
#sealDetail .closeBtn {
  position:absolute; top:8px; right:10px; cursor:pointer; color:var(--dim);
  font-size:18px; padding:4px 10px;
}
#sealDetail h2 { 
  font-family:'Cinzel Decorative',serif; font-size:14px; letter-spacing:.18em; 
  text-align:center; margin-bottom:8px;
}
#sealDetail h2.victory { color:var(--def-glow); }
#sealDetail h2.defeat  { color:var(--atk-glow); }
#sealDetail h2.void    { color:var(--utl-glow); }
#sealDetail .sealBig {
  width: 70%; max-width: 260px; aspect-ratio:1; margin: 4px auto;
  display:block; border:1px solid var(--border); border-radius:4px;
  background:var(--bg);
}
#sealDetail .epitaph {
  text-align:center; font-family:'Cinzel',serif; font-size:10px;
  color:var(--text-bright); padding: 8px 4px; letter-spacing:.06em;
  font-style: italic; line-height:1.5;
}
#sealDetail .sealStatsGrid {
  display:grid; grid-template-columns: 1fr 1fr; gap:6px;
  background:var(--s1); border:1px solid var(--border); border-radius:3px;
  padding:8px; margin:6px 0;
}
#sealDetail .sealStat { font-size:8px; letter-spacing:.1em; display:flex; justify-content:space-between; }
#sealDetail .sealStat b { font-family:'Share Tech Mono',monospace; color:var(--text-bright); font-size:10px; }

/* MODE SELECT — buttons on complete panel */
.modeRow { display:grid; grid-template-columns: 1fr 1fr; gap:6px; padding:0 10px 8px; }
.modeRow .btn { padding:8px 4px; font-size:9px; flex:none; min-height: 34px; }
.btn.daily { 
  border-color:#4a3c18; color:var(--crit); 
  background: linear-gradient(180deg, #1a1408, #0c0a04);
  box-shadow:0 0 12px rgba(192,152,32,.25);
}
.btn.asc {
  border-color:#5a1414; color:var(--boss-glow);
  background: linear-gradient(180deg, #1a0808, #0c0404);
}
.btn.gallery {
  border-color:#1c4858; color:var(--blue);
  background: linear-gradient(180deg, #0a141a, #050a0c);
}

/* Analytics stats grid on complete panel */
.analytics { 
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:4px; 
  background:var(--s2); border:1px solid var(--border); border-radius:3px; padding:6px;
  margin: 4px 0;
}
.analytics .a { text-align:center; }
.analytics .a .v { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-bright); }
.analytics .a .k { font-size:6.5px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; margin-top:1px; }

/* Daily badge in header */
.dailyBadge {
  font-family:'Share Tech Mono',monospace; font-size:7.5px; letter-spacing:.1em;
  color:var(--crit); border:1px solid #4a3c18; padding:2px 5px; border-radius:2px;
  background: rgba(192,152,32,.12);
}
.ascBadge {
  font-family:'Share Tech Mono',monospace; font-size:7.5px; letter-spacing:.1em;
  color:var(--boss-glow); border:1px solid #5a1414; padding:2px 5px; border-radius:2px;
  background: rgba(139,0,0,.15);
}

/* Mode select header on sanctum */
.dailyStatus, .ascStatus {
  background:var(--s1); border:1px solid var(--border); border-radius:3px;
  padding:8px 10px; display:flex; justify-content:space-between; align-items:center;
  font-size:8px; letter-spacing:.1em;
}
.dailyStatus b, .ascStatus b { font-family:'Share Tech Mono',monospace; font-size:11px; }
.dailyStatus.beaten { border-color: #1c5e57; }
.dailyStatus.beaten b { color: var(--def-glow); }

/* ============================================================
   COMPACT REWARD SHEET — fits in 162px panel without scrolling
   ============================================================ */
.sheet.sheet-reward { gap: 6px; padding: 7px 12px; justify-content: center; }
.rwd-verdict {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: 10px; letter-spacing: .24em; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.rwd-verdict.win  { color: var(--def-glow); text-shadow:0 0 12px rgba(107,242,162,.4); }
.rwd-verdict.lose { color: var(--atk-glow); text-shadow:0 0 12px rgba(255,138,110,.4); }
.rwd-verdict .rwd-heart {
  font-family:'Share Tech Mono',monospace; font-size: 9px; letter-spacing:.06em;
  color: var(--atk); padding-left: 8px; border-left: 1px solid #3a2a30;
}
.rwd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rwd-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  background: var(--s2); border: 1px solid var(--border); border-radius: 2px;
}
.rwd-stat .rwd-key { font-size: 6.5px; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
.rwd-stat .rwd-val { font-family: 'Share Tech Mono', monospace; font-size: 10px; display:flex; align-items:baseline; }
.rwd-stat .rwd-val b { font-family: 'Share Tech Mono', monospace; font-weight: 700; }
.rwd-stat.dps  .rwd-val { color: var(--atk); }
.rwd-stat.surv .rwd-val { color: var(--def); }
.rwd-stat.gold .rwd-val { color: var(--eco); }
.rwd-stat.xp   .rwd-val { color: var(--blue); }
.rwd-stat .rwd-tgt { font-size: 7.5px; opacity: 0.55; margin-left: 2px; }
.rwd-btn { min-height: 30px; padding: 6px 0; font-size: 10px; margin-top: 2px; }

/* ============================================================
   SANCTUM RUN-RESULT BANNER — clear "start again" entry point
   ============================================================ */
.runResult {
  padding: 14px 14px 12px; margin-bottom: 4px;
  background: linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid var(--border); border-radius: 4px;
  text-align: center;
}
.runResult.victory { border-color: #1c5e57; box-shadow: 0 0 18px rgba(36,212,188,.2); }
.runResult.defeat  { border-color: #6e2b1c; box-shadow: 0 0 16px rgba(200,72,40,.15); }
.runResult .rr-verdict {
  font-family: 'Cinzel Decorative', serif;
  font-size: 13px; letter-spacing: .22em; margin-bottom: 6px; font-weight: 900;
}
.runResult.victory .rr-verdict { color: var(--def-glow); text-shadow: 0 0 14px rgba(107,242,162,.55); }
.runResult.defeat  .rr-verdict { color: var(--atk-glow); text-shadow: 0 0 14px rgba(255,138,110,.55); }
.runResult .rr-summary {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9.5px; color: var(--text); letter-spacing: .1em; margin-bottom: 12px;
}
.runResult .rr-modes {
  display: flex; gap: 6px; justify-content: stretch;
}
.runResult .rr-modes .btn { flex: 1; padding: 9px 0; font-size: 9.5px; min-height: 36px; }

/* Active-run indicator — orient the player when visiting Sanctum mid-run */
.runActive {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; margin-bottom: 4px;
  background: rgba(36,212,188,.06);
  border: 1px solid rgba(36,212,188,.18); border-radius: 3px;
  font-size: 8px; letter-spacing: .12em;
}
.runActive .ra-label { color: var(--teal); }
.runActive .ra-detail { color: var(--text); font-family: 'Share Tech Mono', monospace; }