:root{
  /* tylerirl.com: black, one cyan accent, Dracula colours for meaning, monospace everywhere */
  --bg:#000000; --panel:rgba(2,6,8,.78); --line:rgba(139,233,253,.22);
  --neon:#8be9fd; --neon2:#eaeaea; --acid:#50fa7b; --gold:#f1fa8c;
  --pink:#ff79c6; --lilac:#bd93f9; --sky:#8be9fd; --red:#ff5555;
  --txt:#eaeaea; --dim:#7c8a90;
  --mono:'JetBrains Mono','Fira Mono','Menlo','Consolas',monospace;
  --label:'Share Tech Mono','JetBrains Mono','Fira Mono','Menlo','Consolas',monospace;
  --cute:var(--mono);
  --sticker:0 0 0 rgba(0,0,0,0);
  --stage:radial-gradient(circle at 50% 40%,rgba(139,233,253,.30) 0%,rgba(139,233,253,.10) 42%,rgba(139,233,253,.02) 70%,transparent 78%),#010506;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Courier New",ui-monospace,monospace; min-height:100%;}
body{background:
  radial-gradient(ellipse 80% 50% at 10% 0%,rgba(139,233,253,.26),transparent 60%),
  radial-gradient(ellipse 70% 50% at 100% 100%,rgba(139,233,253,.14),transparent 60%),
  radial-gradient(ellipse 60% 40% at 90% 10%,rgba(189,147,249,.12),transparent 60%),
  var(--bg);background-attachment:fixed;}
/* sparkle dust + soft scanlines */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(circle,#fff 0 1px,transparent 1.6px) 12px 20px/110px 130px,
    radial-gradient(circle,var(--pink) 0 1.2px,transparent 1.8px) 70px 90px/150px 170px,
    radial-gradient(circle,var(--neon2) 0 1px,transparent 1.6px) 40px 140px/190px 210px;
  animation:twinkle 5s ease-in-out infinite;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);}
@keyframes twinkle{50%{opacity:.2;}}
#app{max-width:1060px;margin:0 auto;min-height:100vh;position:relative;z-index:1;}
.title-wrap,#screen-avatar .panel,.panel.combat-panel{max-width:560px;margin-left:auto;margin-right:auto;}
.screen{display:none;min-height:100vh;padding:16px;}
.screen.active{display:block;animation:fadein .25s ease-out;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}}
.hidden{display:none!important;}
.btn{background:#0d1418;border:2px solid var(--neon);color:var(--txt);border-radius:999px;
  font-family:var(--cute);font-weight:bold;padding:11px 20px;cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;font-size:14px;
  box-shadow:0 4px 0 #000;transition:transform .08s,box-shadow .08s,background .15s;}
.btn:hover{background:#12202a;}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000;}
.btn:focus-visible{outline:2px solid var(--neon2);outline-offset:3px;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:0 4px 0 #000;background:#0d1418;}
.btn.big{font-size:18px;padding:14px 28px;border-width:3px;background:var(--neon);color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);box-shadow:0 5px 0 #0e3a44,0 0 22px rgba(139,233,253,.55);}
.btn.big:hover{background:#b5f1fe;}
.btn.big:active{box-shadow:0 1px 0 #0e3a44;}
.btn.big:disabled{background:var(--neon);box-shadow:0 5px 0 #0e3a44;}
.btn.small{font-size:12px;padding:7px 13px;box-shadow:0 3px 0 #000;}
.panel{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:18px;
  margin:10px 0;box-shadow:var(--sticker),0 0 30px rgba(0,0,0,.5);}
.panel h2{font-family:var(--cute);text-align:center;letter-spacing:3px;color:var(--neon2);margin-top:0;
  text-shadow:2px 2px 0 var(--neon);}
/* TITLE */
.title-wrap{text-align:center;padding-top:6vh;}
.title-coin{width:84px;height:84px;border-radius:50%;border:3px solid var(--gold);object-fit:cover;
  box-shadow:0 0 0 3px #000,0 0 26px rgba(241,250,140,.45);animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-7px) rotate(4deg);}}
h1.game-title{font-family:var(--cute);font-size:clamp(40px,13vw,62px);line-height:.95;margin:10px 0;color:var(--neon2);
  text-shadow:3px 3px 0 var(--neon),-1px -1px 0 #000,0 0 28px rgba(139,233,253,.6);letter-spacing:2px;}
h1.game-title .is{color:var(--neon);text-shadow:3px 3px 0 var(--neon2),-1px -1px 0 #000;
  display:inline-block;animation:dread 4s steps(1) infinite;}
@keyframes dread{0%,91%,100%{transform:none;opacity:1;}92%{transform:translate(-3px,1px) skewX(-8deg);opacity:.75;}
  94%{transform:translate(3px,-1px) skewX(6deg);}96%{transform:none;opacity:.85;}}
.kicker{color:var(--dim);letter-spacing:3px;font-size:12px;text-transform:uppercase;margin-top:10px;}
.title-sub{color:var(--pink);margin:6px 0 22px;}
.meta-bar{display:flex;gap:10px;justify-content:center;margin:24px 0 10px;color:var(--dim);font-size:13px;}
.meta-stat{border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(6,9,11,.8);}
.meta-bar b{color:var(--gold);}
.unlock-shop{display:grid;gap:8px;margin:14px 0;text-align:left;}
.unlock{border:1px solid var(--line);border-radius:12px;background:rgba(6,9,11,.8);padding:10px 12px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;}
.unlock .uinfo b{color:var(--neon2);display:block;}
.unlock .uinfo span{color:var(--dim);font-size:12px;}
.unlock .btn{flex:none;}
.unlock.owned{opacity:.55;}
.foot{margin-top:26px;color:#5a666b;font-size:11px;}
/* AVATAR */
#screen-avatar .panel{text-align:center;}
#avatar-canvas{width:min(300px,72vw);height:auto;background:var(--stage);border:3px solid var(--neon);border-radius:16px;
  box-shadow:var(--sticker);}
#avatar-canvas.pop{animation:pop .3s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop{from{transform:scale(.92) rotate(-2deg);}}
.avatar-name{font-family:var(--cute);text-align:center;font-size:22px;color:var(--neon2);margin:10px 0;letter-spacing:2px;}
.row{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap;}
/* MAIN SCREEN: top bar, nine-day track, then board + sidebar */
#topbar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.brand{font-family:var(--cute);font-weight:bold;font-size:17px;letter-spacing:2px;color:var(--neon2);text-shadow:2px 2px 0 var(--neon);}
.brand b{color:var(--neon);text-shadow:2px 2px 0 var(--neon2);}
#doom{font-size:12px;color:var(--dim);}
#doom b{color:#ff8b8b;font-family:var(--cute);letter-spacing:1px;}
#timeline{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-bottom:10px;align-items:end;}
#timeline .day{position:relative;height:30px;border-radius:9px;background:#070c0f;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;color:var(--dim);}
#timeline .day.past{opacity:.4;}
#timeline .day.now{border-color:var(--gold);color:#1a1300;background:linear-gradient(180deg,#ffe58a,#f0b93a);
  box-shadow:0 0 14px rgba(241,250,140,.45);}
#timeline .day.now.night{border-color:var(--lilac);color:#0f0a2a;background:linear-gradient(180deg,#d6c9ff,#8d76e6);
  box-shadow:0 0 14px rgba(189,147,249,.5);}
#timeline .day.boss{height:44px;border:2px solid #ff5555;background:#1a0606;color:#ff8b8b;font-size:18px;overflow:hidden;}
#timeline .day.boss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:.85;}
#timeline .day.boss em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:8px;letter-spacing:.5px;line-height:1.5;
  background:rgba(20,0,6,.82);color:#ffb3b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px;text-align:center;}
#timeline .day.boss.now{box-shadow:0 0 18px rgba(255,85,85,.8);animation:throb 1.4s ease-in-out infinite;}
#timeline .day.boss.beaten{border-color:var(--acid);opacity:.6;}
#timeline .day.boss.beaten img{filter:grayscale(1);}
#timeline .day.boss.beaten::after{content:"✓";position:absolute;top:1px;right:4px;color:var(--acid);font-size:14px;text-shadow:1px 1px 0 #000;}
.play{display:flex;flex-direction:column;gap:10px;}
.box,#hud{background:var(--panel);border:2px solid var(--line);border-radius:16px;box-shadow:var(--sticker);}
.box{padding:8px 10px 10px;min-width:0;}
.box-h{font-family:var(--cute);font-weight:bold;font-size:11px;letter-spacing:2px;color:var(--dim);
  display:flex;justify-content:space-between;margin-bottom:6px;}
.box-h span{color:var(--neon2);}
/* HUD */
#hud{display:flex;gap:10px;align-items:center;padding:8px;}
#hud-avatar{width:76px;height:auto;flex:none;border:2px solid var(--neon);border-radius:12px;background:var(--stage);cursor:pointer;}
.hud-stats{flex:1;min-width:0;font-size:13px;}
.hud-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:5px;}
#hud-name{font-family:var(--cute);font-weight:bold;font-size:15px;letter-spacing:1px;color:var(--neon2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#hud-day{font-weight:bold;white-space:nowrap;font-size:12px;}
.hpbar{position:relative;width:100%;height:20px;background:#061216;border:2px solid #000;
  border-radius:999px;overflow:hidden;margin-bottom:6px;box-shadow:0 0 0 1px var(--line);}
.hpbar>div{height:100%;background:linear-gradient(180deg,#c6f4fe,#8be9fd);width:100%;transition:width .25s;border-radius:999px;}
.hpbar>div.low{background:linear-gradient(180deg,#ff8a8a,#d92b2b);animation:blink 1s steps(2) infinite;}
.hpbar.foe>div{background:linear-gradient(180deg,#cdbcff,#7b5fd6);}
.hpbar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:16px;color:#fff;
  text-shadow:1px 1px 0 #000;font-weight:bold;}
.hud-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
#hud-chips{display:contents;}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--txt);background:#0d1418;
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;}
.chip.cult b{color:var(--gold);font-size:12px;}
.cult-coin{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid #000;}
#hud-moves{display:flex;gap:2px;margin-top:7px;}
#hud-moves i{flex:1;max-width:14px;height:6px;border-radius:2px;background:var(--gold);}
#hud-moves.night i{background:var(--lilac);}
#hud-moves i.spent{background:#16252b;}
#hud-district{font-size:11px;color:var(--dim);margin-top:5px;}
/* RELICS: an icon strip on phones, a readable list in the desktop sidebar */
#relic-bar{display:flex;gap:5px;flex-wrap:wrap;cursor:pointer;}
.relic{display:flex;align-items:center;gap:8px;min-width:0;}
.relic .rtxt{display:none;min-width:0;}
.relic-ico{width:38px;height:38px;flex:none;border:2px solid var(--line);border-radius:10px;
  background:radial-gradient(circle,#12222a,#020406 80%);object-fit:contain;display:block;}
.relic-ico.empty{border-style:dashed;opacity:.5;background:none;}
.relic-ico.off{opacity:.25;filter:grayscale(1);border-color:var(--red);}
/* MAP */
.board{min-width:0;}
.dlabels{display:flex;justify-content:space-between;font-family:var(--cute);font-weight:bold;font-size:10px;letter-spacing:2px;
  padding:0 10px;margin:3px auto;opacity:.8;width:min(100%,var(--board));}
.map-frame{position:relative;width:min(100%,var(--board));margin:0 auto;}
#map-wrap{border:2px solid var(--line);border-radius:16px;background:#010203;padding:6px;box-shadow:var(--sticker);
  aspect-ratio:1;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;}
#map-wrap::-webkit-scrollbar{display:none;}
#minimap{position:absolute;right:10px;top:10px;width:clamp(72px,24%,132px);height:auto;image-rendering:pixelated;pointer-events:none;
  border:2px solid var(--line);border-radius:8px;background:rgba(0,0,0,.82);box-shadow:var(--sticker);opacity:.92;}
.tile.wall{background:
    linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px) 0 0/100% 50%,
    linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px) 0 0/50% 100%,
    color-mix(in srgb,var(--dc,#555) 7%,#04080a)!important;
  border-color:#000;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);}
.board{--board:74vh;}
#map{display:grid;gap:3px;aspect-ratio:1;
  background:repeating-linear-gradient(45deg,#020405 0 6px,#04080a 6px 12px);border-radius:6px;} /* undrawn cells are the fog */
.tile{font-size:clamp(15px,calc(var(--board)/20),26px)!important;}
.tile{aspect-ratio:1;min-width:0;border-radius:9px;
  background:color-mix(in srgb,var(--dc,#555) 20%,#0c1519);
  border:1px solid color-mix(in srgb,var(--dc,#555) 45%,transparent);
  display:flex;align-items:center;justify-content:center;font-size:clamp(15px,4.6vw,26px);line-height:1;
  position:relative;user-select:none;transition:background .15s,transform .1s;}
#map.night .tile{background:color-mix(in srgb,var(--dc,#555) 9%,#081013);}
.tile.fog{background:repeating-linear-gradient(45deg,#020405 0 5px,#04080a 5px 10px)!important;border-color:#131324;}
.tile.poi span{display:flex;align-items:center;justify-content:center;width:82%;height:82%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#0e1d23,#1a1731 75%);border:2px solid #17313a;
  box-shadow:0 2px 0 #000;filter:drop-shadow(0 0 4px rgba(0,0,0,.6));}
.tile.poi.t1 span{border-color:var(--pink);} .tile.poi.t2 span{border-color:#8d8aa6;}
.tile.poi.t5 span{border-color:var(--sky);} .tile.poi.t6 span{border-color:var(--gold);}
.tile.poi.t7 span{border-color:#ffb86c;} .tile.poi.t8 span{border-color:#ff5555;border-radius:10px;}
.tile.poi.t9 span{border-color:var(--lilac);animation:bob 2.4s ease-in-out infinite;}
.tile .tok{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;}
.tile.foe .tok{width:84%;height:84%;border-radius:50%;border:2px solid var(--red);box-shadow:0 2px 0 #000;}
.tile.foe.elite .tok{border-color:var(--gold);box-shadow:0 2px 0 #000,0 0 10px rgba(241,250,140,.6);}
.tile.foe.elite::after{content:"💀";position:absolute;right:0;bottom:0;font-size:.5em;}
.tile.moveable{cursor:pointer;box-shadow:inset 0 0 0 2px rgba(243,227,181,.3);}
.tile.moveable:hover{background:color-mix(in srgb,var(--dc,#555) 28%,#10202a);transform:scale(1.07);z-index:2;}
.tile.you{box-shadow:0 0 0 2px var(--acid),0 0 14px rgba(80,250,123,.5);z-index:3;}

@keyframes hop{0%{transform:translateY(-22%) scale(1.12);}60%{transform:translateY(3%) scale(.97);}}
.tile.hunter{box-shadow:inset 0 0 0 2px var(--red);background:#1a0606!important;}
.tile.hunter span{animation:wobble .7s ease-in-out infinite;}
@keyframes wobble{50%{transform:scale(1.18) rotate(-8deg);}}
.tile.gate-open{box-shadow:inset 0 0 0 2px #ff5555,0 0 14px rgba(255,85,85,.6);animation:blink 1s steps(2) infinite;}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;font-size:10px;color:var(--dim);margin-top:6px;}
.legend span{white-space:nowrap;}
.lg-foe::before,.lg-elite::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--red);margin-right:4px;vertical-align:-2px;}
.lg-elite::before{border-color:var(--gold);}
#map-log{height:120px;overflow-y:auto;border-radius:10px;background:#020304;
  padding:8px 10px;font-size:12px;line-height:1.45;color:var(--dim);}
#map-log .good{color:var(--acid);} #map-log .bad{color:var(--red);} #map-log .gold{color:var(--gold);}
.hint{color:#5a666b;font-size:11px;text-align:center;margin-top:10px;}
#boss-banner{background:#1a0606;border:2px solid #ff5555;border-radius:14px;color:#ff8b8b;text-align:center;
  font-family:var(--cute);padding:9px 10px;margin-bottom:10px;font-weight:bold;letter-spacing:2px;
  box-shadow:0 0 18px rgba(255,85,85,.35);animation:throb 1.4s ease-in-out infinite;}
#boss-banner small{display:block;font-family:"Courier New",ui-monospace,monospace;font-weight:normal;
  letter-spacing:0;font-size:11px;color:#b98a8a;margin-top:4px;}
@keyframes throb{50%{box-shadow:0 0 30px rgba(255,85,85,.75);}}
@keyframes blink{50%{opacity:.6;}}
@media (min-width:900px){
  .play{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto minmax(0,1fr);gap:12px;align-items:stretch;
    grid-template-areas:"board hud" "board relics" "board log";}
  #hud{grid-area:hud;} .board{grid-area:board;--board:calc(100vh - 264px);} #relic-box{grid-area:relics;} #log-box{grid-area:log;display:flex;flex-direction:column;}
  #log-box{min-height:0;}
  #log-box #map-log{flex:1 1 0;height:0;min-height:110px;}
  #boss-banner:not(.hidden) ~ .play .board{--board:calc(100vh - 345px);}
  #relic-bar{flex-direction:column;flex-wrap:nowrap;gap:6px;}
  .relic .rtxt{display:block;}
  .relic .rtxt b{display:block;font-size:12px;color:var(--neon2);}
  .relic .rtxt span{display:block;font-size:11px;line-height:1.3;color:var(--dim);}
  .relic-ico{width:36px;height:36px;}
  .brand{font-size:20px;}
}
/* COMBAT */
.combat-panel{text-align:center;}
.fighters{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin:10px 0;}
.fighter{flex:1;max-width:200px;min-width:0;}
.portrait{position:relative;}
.portrait canvas{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#000;border:3px solid var(--line);border-radius:14px;
  box-shadow:var(--sticker);}
#port-you canvas{border-color:var(--neon);background:var(--stage);}
.portrait.boss canvas{border-color:#ff5555;box-shadow:var(--sticker),0 0 22px rgba(255,85,85,.6);}
.portrait.hit canvas{animation:hit .28s ease-out;}
@keyframes hit{0%{transform:translateX(0);filter:brightness(1.7) saturate(.5);}25%{transform:translateX(-6px) rotate(-2deg);}
  55%{transform:translateX(5px) rotate(1.5deg);filter:none;}100%{transform:none;}}
.portrait.dead canvas{filter:grayscale(1) brightness(.5);transform:rotate(-5deg) translateY(4px);transition:all .4s;}
.float{position:absolute;top:34%;transform:translateX(-50%);pointer-events:none;z-index:5;
  font-family:var(--cute);font-weight:bold;font-size:24px;color:#fff;white-space:nowrap;
  text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;animation:floatup .85s ease-out forwards;}
.float.dmg{color:#ff79c6;}
.float.crit{font-size:34px;color:var(--gold);}
.float.heal{color:var(--acid);font-size:19px;}
.float.psn{color:var(--lilac);font-size:19px;}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.6);}18%{opacity:1;transform:translate(-50%,-6px) scale(1.2);}
  100%{opacity:0;transform:translate(-50%,-58px) scale(1);}}
.fighter .cname{font-family:var(--cute);margin:8px 0 6px;font-size:13px;letter-spacing:1px;color:var(--neon2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fighter .hpbar{width:100%;}
#combat-relics{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:26px;}
#combat-relics .relic-ico{width:24px;height:24px;border-width:1px;border-radius:6px;}
.vs{font-family:var(--cute);font-size:26px;color:var(--neon);font-weight:bold;margin-top:22%;text-shadow:2px 2px 0 #000;}
#combat-log{height:150px;overflow-y:auto;background:#020304;border:2px solid var(--line);border-radius:14px;
  text-align:left;padding:8px 10px;font-size:12px;line-height:1.45;margin:10px 0;color:var(--dim);}
#combat-log .good{color:var(--acid);} #combat-log .bad{color:var(--red);}
#combat-log .crit{color:var(--gold);font-weight:bold;}
#btn-combat-done{margin-top:6px;}
/* MODAL */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:16px;animation:fadein .15s ease-out;}
#modal-panel{max-width:480px;width:100%;max-height:86vh;overflow-y:auto;animation:pop .22s cubic-bezier(.3,1.5,.5,1);}
.note{text-align:center;color:var(--dim);font-size:13px;line-height:1.5;margin:8px 0;}
.note.good{color:var(--acid);} .note .bad,.bad{color:var(--red);}
.draft-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.card{border:2px solid var(--line);border-radius:14px;background:#04070a;padding:8px;cursor:pointer;text-align:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.6);transition:transform .12s,border-color .12s;min-width:0;}
.card:hover{border-color:var(--pink);transform:translateY(-4px) rotate(-1deg);}
.card:active{transform:translateY(1px);}
.card img{width:100%;height:76px;object-fit:contain;background:radial-gradient(circle,#12222a,#020406 75%);border-radius:10px;}
.card b{display:block;font-family:var(--cute);font-size:12px;color:var(--neon2);margin:6px 0 4px;}
.card span{display:block;font-size:11px;line-height:1.35;color:var(--dim);}
.shop-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  background:#04070a;padding:8px;margin:8px 0;font-size:13px;}
.shop-row img,.heal-ico{width:44px;height:44px;flex:none;object-fit:contain;border-radius:9px;
  background:radial-gradient(circle,#12222a,#020406 75%);}
.heal-ico{display:flex;align-items:center;justify-content:center;font-size:22px;}
.sinfo{flex:1;min-width:0;}
.sinfo b{display:block;color:var(--neon2);}
.sinfo span{color:var(--dim);font-size:12px;}
.shop-row .btn{flex:none;}
.build-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:10px 0;}
.bet-row{display:flex;gap:8px;justify-content:center;margin:12px 0;flex-wrap:wrap;}
.coinflip{font-size:60px;text-align:center;margin:10px;line-height:1.1;}
.coinflip.spin{animation:flip .35s linear infinite;}
@keyframes flip{50%{transform:rotateY(90deg) translateY(-12px);}}
.stat-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--dim);margin:5px 0;}
.stat-line b{color:var(--txt);text-align:right;}
.choice{display:block;width:100%;text-align:left;font-family:inherit;color:var(--txt);cursor:pointer;
  background:#04070a;border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;
  box-shadow:3px 3px 0 rgba(0,0,0,.6);transition:transform .1s,border-color .1s;}
.choice:hover{border-color:var(--pink);transform:translateX(3px);}
.choice:disabled{opacity:.4;cursor:not-allowed;transform:none;border-color:var(--line);}
.choice b{display:block;font-family:var(--cute);font-size:14px;color:var(--neon2);letter-spacing:1px;text-transform:uppercase;}
.choice span{display:block;font-size:12px;color:var(--dim);margin-top:2px;}
.boss-face{display:block;width:96px;height:96px;margin:0 auto 6px;border-radius:16px;border:3px solid #ff5555;
  image-rendering:pixelated;box-shadow:var(--sticker),0 0 22px rgba(255,85,85,.6);}
/* JUICE */
.confetti{position:fixed;left:50%;top:45%;z-index:120;font-size:26px;pointer-events:none;
  animation:confetti 1s cubic-bezier(.15,.8,.3,1) forwards;}
@keyframes confetti{0%{transform:translate(-50%,-50%) scale(.3);opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.2);opacity:0;}}
#app.quake{animation:quake .28s linear;}
@keyframes quake{20%{transform:translate(-5px,3px);}40%{transform:translate(5px,-3px);}60%{transform:translate(-3px,-2px);}80%{transform:translate(3px,2px);}}
body.danger::after{box-shadow:inset 0 0 90px rgba(255,85,85,.45);animation:throbv 1.1s ease-in-out infinite;}
@keyframes throbv{50%{box-shadow:inset 0 0 140px rgba(255,85,85,.7);}}
.chip.cult{position:relative;}
.gain{position:absolute;left:60%;top:-4px;font-weight:bold;font-size:13px;pointer-events:none;white-space:nowrap;
  text-shadow:1px 1px 0 #000;animation:gain .95s ease-out forwards;}
.gain.up{color:var(--gold);} .gain.down{color:var(--red);}
@keyframes gain{0%{opacity:0;transform:translateY(6px);}20%{opacity:1;}100%{opacity:0;transform:translateY(-26px);}}
.float.loot{color:var(--gold);font-size:20px;top:12%;}
.top-right{display:flex;align-items:center;gap:10px;}
.mute,.icon-btn{background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px;padding:3px 8px;line-height:1.2;color:var(--txt);}
.title-wrap .mute{margin-top:18px;box-shadow:none;}
/* scouting */
#tile-info{min-height:34px;margin:6px auto 0;width:min(100%,var(--board));padding:7px 12px;font-size:12px;line-height:1.4;color:var(--dim);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center;}
#tile-info b{color:var(--neon2);}
.odds{font-weight:bold;white-space:nowrap;}
.odds.easy{color:var(--acid);} .odds.fair{color:var(--gold);} .odds.risky{color:#ffb86c;} .odds.deadly{color:var(--red);}
.tile.foe::before{content:"";position:absolute;left:3px;top:3px;width:22%;height:22%;max-width:11px;max-height:11px;border-radius:50%;
  border:1.5px solid #000;z-index:2;background:var(--pip,transparent);}
.tile.d-easy{--pip:var(--acid);} .tile.d-fair{--pip:var(--gold);} .tile.d-risky{--pip:#ffb86c;} .tile.d-deadly{--pip:var(--red);}
.tile.d-deadly .tok{animation:blink 1s steps(2) infinite;}
.tile.sel{box-shadow:0 0 0 3px var(--gold)!important;z-index:4;}
.tile.reveal{animation:reveal .35s ease-out backwards;}
@keyframes reveal{from{opacity:0;transform:scale(.6);}}
/* drafts */
.card{position:relative;animation:deal .32s cubic-bezier(.3,1.5,.5,1) backwards;}
@keyframes deal{from{opacity:0;transform:translateY(26px) rotate(4deg) scale(.9);}}
.card.rare{border-color:var(--gold);box-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 16px rgba(241,250,140,.35);}
.card.cursed{border-color:var(--lilac);box-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 16px rgba(189,147,249,.45);}
.card em{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:bold;letter-spacing:1px;
  text-transform:uppercase;padding:1px 8px;border-radius:999px;background:var(--gold);color:#221a00;}
.card.cursed em{background:var(--lilac);color:#120a30;}
.card u{position:absolute;top:6px;right:6px;text-decoration:none;font-size:9px;font-weight:bold;color:#0b2a00;background:var(--acid);
  border-radius:999px;padding:0 6px;transform:rotate(8deg);}
.delta{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:6px;}
.delta i{font-style:normal;font-size:10px;font-weight:bold;border-radius:999px;padding:1px 6px;white-space:nowrap;}
.delta i.up{background:rgba(80,250,123,.16);color:var(--acid);} .delta i.down{background:rgba(255,107,107,.16);color:var(--red);}
/* rarity + synergies */
.card.legendary{border-color:var(--pink);background:linear-gradient(160deg,#2a1230,#04070a 55%,#10203a);
  box-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 22px rgba(255,121,198,.6);animation:deal .32s cubic-bezier(.3,1.5,.5,1) backwards,shine 2.2s ease-in-out infinite;}
.card.legendary em{background:linear-gradient(90deg,var(--pink),var(--gold),var(--sky));color:#1a0a20;}
@keyframes shine{50%{box-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 34px rgba(241,250,140,.75);}}
.relic-ico.legendary{border-color:var(--pink);box-shadow:0 0 8px rgba(255,121,198,.6);}
.shop-row.rare{border-color:var(--gold);} .shop-row.legendary{border-color:var(--pink);box-shadow:0 0 12px rgba(255,121,198,.4);} .shop-row.cursed{border-color:var(--lilac);}
.shop-row .delta,.shop-row .sets{justify-content:flex-start;}
b.rare{color:var(--gold)!important;} b.legendary{color:var(--pink)!important;} b.cursed{color:var(--lilac)!important;}
.rtxt small{font-size:10px;opacity:.9;}
.sets{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:5px;}
.sets i{font-style:normal;font-size:9px;font-weight:bold;letter-spacing:.5px;white-space:nowrap;border-radius:999px;padding:1px 6px;
  color:var(--sc);border:1px solid color-mix(in srgb,var(--sc) 55%,transparent);}
.sets i.hit{background:var(--sc);color:#000000;box-shadow:0 0 10px var(--sc);}
.syn-hit{flex-basis:100%;font-size:10px!important;color:var(--acid)!important;font-weight:bold;}
.syn-h{margin-top:10px;}
#syn-bar,.syn-list{display:flex;flex-direction:column;gap:4px;}
.syn{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:baseline;font-size:11px;padding:5px 9px;border-radius:10px;
  border:1px solid var(--line);background:#04070a;color:var(--dim);opacity:.75;}
.syn b{color:var(--sc);font-family:var(--cute);letter-spacing:1px;font-size:11px;}
.syn em{font-style:normal;font-weight:bold;color:var(--sc);}
.syn span{grid-column:1/-1;line-height:1.35;}
.syn span i{font-style:normal;opacity:.6;}
.syn.on{opacity:1;border-color:var(--sc);background:color-mix(in srgb,var(--sc) 10%,#04070a);box-shadow:0 0 10px color-mix(in srgb,var(--sc) 30%,transparent);}
.syn.on span{color:var(--txt);}
.syn.none{display:block;opacity:.6;font-size:10px;}
#btn-continue{display:block;margin:0 auto 14px;}
#btn-link{display:block;margin:0 auto 4px;background:var(--acid);color:#0b2a00;border-color:var(--acid);text-shadow:none;box-shadow:0 5px 0 #1c5a2c,0 0 22px rgba(80,250,123,.5);}
#link-note:empty{display:none;} #link-note{margin:0 0 14px;}
.tile.dig{box-shadow:inset 0 0 0 2px var(--gold);animation:blink 1s steps(2) infinite;}
/* run setup */
.pick-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0;}
.pick{font-family:var(--cute);font-weight:bold;font-size:12px;letter-spacing:1px;color:var(--dim);cursor:pointer;
  background:#04070a;border:2px solid var(--line);border-radius:999px;padding:6px 12px;transition:transform .1s,border-color .1s;}
.pick:hover{border-color:var(--pink);transform:translateY(-2px);}
.pick.on{color:#fff;border-color:var(--neon);background:var(--neon);box-shadow:0 3px 0 #0e3a44;}
#tribe-desc{display:flex;gap:10px;align-items:center;justify-content:center;text-align:left;font-size:12px;color:var(--dim);margin:8px 0 4px;}
#tribe-desc b{display:block;color:var(--neon2);font-size:13px;}
#tribe-desc span{display:block;}
#combat-choice{margin:10px 0 0;text-align:left;border:2px solid #ff5555;border-radius:14px;padding:10px 12px;background:#120505;
  box-shadow:0 0 22px rgba(255,85,85,.4);animation:pop .22s cubic-bezier(.3,1.5,.5,1);}
#combat-choice .kicker{color:#ff8b8b;margin:0 0 4px;}
.draft-cards.four{grid-template-columns:repeat(2,1fr);}
@media (min-width:600px){ .draft-cards.four{grid-template-columns:repeat(4,1fr);} #modal-panel:has(.draft-cards.four){max-width:620px;} }
.tile:not(.fog):not(.wall){cursor:pointer;}
#minimap{pointer-events:auto;cursor:zoom-in;transition:width .2s;}
#minimap.big{width:min(70%,360px);cursor:zoom-out;opacity:1;}
.nft-row{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--dim);margin:6px 0 2px;}
.nft-row select,.nft-row input{font-family:inherit;font-size:13px;color:var(--txt);background:#04070a;border:2px solid var(--line);
  border-radius:999px;padding:6px 10px;outline:none;}
.nft-row input{width:86px;text-align:center;}
.nft-row select:focus,.nft-row input:focus{border-color:var(--pink);}
#nft-msg{min-height:18px;margin:2px 0 8px;font-size:11px;}
.share{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.share pre{margin:0;padding:10px 12px;background:#020304;border:1px solid var(--line);border-radius:12px;font-family:inherit;
  font-size:12px;line-height:1.5;color:var(--txt);white-space:pre-wrap;word-break:break-word;text-align:left;user-select:all;}
.share .row{margin-top:8px;}
/* SMOOTHNESS */
#map-inner{position:relative;}
#you-tok{position:absolute;aspect-ratio:1;z-index:4;pointer-events:none;border-radius:9px;
  box-shadow:0 0 0 2px var(--acid),0 0 14px rgba(80,250,123,.5);background:var(--stage);
  transition:left .16s cubic-bezier(.3,.9,.4,1),top .16s cubic-bezier(.3,.9,.4,1);}
#you-tok.snap{transition:none;}
#you-tok img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;}
#you-tok img.hop{animation:hop .26s ease-out;}
.tile.you{box-shadow:none;}
.tile.path{box-shadow:inset 0 0 0 2px rgba(80,250,123,.55);background:color-mix(in srgb,var(--acid) 14%,#0c1519);}
.chip.bump-up{animation:bumpup .7s ease-out;} .chip.bump-down{animation:bumpdown .7s ease-out;}
@keyframes bumpup{0%{transform:scale(1.35);background:var(--acid);color:#0b2a00;}100%{transform:none;}}
@keyframes bumpdown{0%{transform:scale(1.35);background:var(--red);color:#2a0000;}100%{transform:none;}}
.hpbar.bump{animation:bumpbar .6s ease-out;}
@keyframes bumpbar{0%{box-shadow:0 0 0 3px var(--acid);}100%{box-shadow:0 0 0 1px var(--line);}}
.splash{position:fixed;left:0;right:0;top:34%;z-index:110;text-align:center;pointer-events:none;padding:14px 10px;
  font-family:var(--cute);font-weight:bold;font-size:clamp(30px,8vw,62px);letter-spacing:4px;color:var(--neon2);
  text-shadow:3px 3px 0 var(--neon),0 0 30px rgba(0,0,0,.9);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.86) 20%,rgba(0,0,0,.86) 80%,transparent);
  animation:splash 1.6s cubic-bezier(.2,.9,.3,1) forwards;}
.splash small{display:block;font-size:.3em;letter-spacing:5px;color:var(--dim);text-shadow:none;margin-top:4px;text-transform:uppercase;}
.splash.night{color:#d6c9ff;text-shadow:3px 3px 0 #5a43b8,0 0 30px rgba(0,0,0,.9);}
.splash.boss{color:#ff8b8b;text-shadow:3px 3px 0 #7a0018,0 0 40px rgba(255,85,85,.8);}
@keyframes splash{0%{opacity:0;transform:scaleX(1.6) scaleY(.6);letter-spacing:22px;}14%{opacity:1;transform:none;letter-spacing:4px;}
  76%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-14px);}}
#map.night{transition:filter .6s;}
#map-wrap{transition:background .6s,box-shadow .6s;}
#map.night ~ #you-tok{box-shadow:0 0 0 2px var(--lilac),0 0 18px rgba(189,147,249,.7);}
#screen-combat.active .combat-panel{animation:encounter .32s cubic-bezier(.2,.9,.3,1);}
@keyframes encounter{0%{transform:scale(1.12);opacity:0;filter:brightness(2.2) blur(3px);}100%{transform:none;opacity:1;filter:none;}}
.portrait.lunge-r{animation:lunger .2s ease-out;} .portrait.lunge-l{animation:lungel .2s ease-out;}
@keyframes lunger{40%{transform:translateX(16px) rotate(3deg);}} @keyframes lungel{40%{transform:translateX(-16px) rotate(-3deg);}}
.hpbar>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;opacity:.6;border-radius:999px;transition:width .45s ease-out .22s;}
.hpbar>div{position:relative;}
#btn-combat-done.auto{position:relative;overflow:hidden;}
#btn-combat-done.auto::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:rgba(255,255,255,.75);
  transform-origin:left;animation:autobar 1.7s linear forwards;}
@keyframes autobar{from{transform:scaleX(1);}to{transform:scaleX(0);}}
.hunter-tok{position:absolute;aspect-ratio:1;z-index:3;pointer-events:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,calc(var(--board)/20),26px);background:#1a0606;box-shadow:inset 0 0 0 2px var(--red),0 0 12px rgba(255,85,85,.5);
  transition:left .22s ease-in-out,top .22s ease-in-out;animation:reveal .3s ease-out;}
.hunter-tok span{animation:wobble .7s ease-in-out infinite;}
.map-float{position:absolute;z-index:6;pointer-events:none;display:flex;justify-content:center;white-space:nowrap;
  font-family:var(--cute);font-weight:bold;font-size:15px;color:var(--gold);text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  animation:mapfloat 1.4s ease-out forwards;}
@keyframes mapfloat{0%{opacity:0;transform:translateY(0) scale(.7);}15%{opacity:1;transform:translateY(-18px) scale(1.1);}100%{opacity:0;transform:translateY(-60px);}}
.tile.foe .tok.ph{display:block;background:linear-gradient(110deg,#12222a 30%,#17313a 50%,#12222a 70%) 0 0/250% 100%;animation:shimmer 1.1s linear infinite;}
@keyframes shimmer{to{background-position:-150% 0;}}
#avatar-canvas.loading{animation:blink .7s steps(2) infinite;filter:saturate(.3);}
/* shop + build sheets */
.sheet-top{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px;}
.sheet-top .chip{font-size:12px;padding:4px 10px;}
.chip.sale{color:#0b2a00;background:var(--acid);border-color:var(--acid);font-weight:bold;}
.chip.markup{color:#2a0000;background:#ffb86c;border-color:#ffb86c;font-weight:bold;}
.shop-row img,.heal-ico{width:56px;height:56px;}
.rar-tag{font-size:9px;letter-spacing:1px;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:0 6px;margin-left:4px;vertical-align:1px;}
.shop-row .btn .cult-coin{width:16px;height:16px;background:none;border-radius:50%;}
.btn.price{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--gold);border-color:var(--gold);}
.btn.price:disabled{color:var(--dim);border-color:var(--line);}
.bar.hp{margin-top:5px;height:8px;} .bar.hp>div{background:linear-gradient(90deg,#8be9fd,#c6f4fe);}
.build-top{display:flex;gap:12px;align-items:stretch;margin-bottom:10px;}
#build-ava{width:112px;height:auto;flex:none;align-self:center;border:3px solid var(--neon);border-radius:14px;background:var(--stage);box-shadow:var(--sticker);}
.stat-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.stat-grid div{background:#04070a;border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.stat-grid span{font-size:9px;letter-spacing:1px;color:var(--dim);}
.stat-grid b{font-family:var(--cute);font-size:15px;color:var(--neon2);white-space:nowrap;}
/* settings */
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:#04070a;padding:9px 12px;margin:8px 0;font-size:13px;}
.set-row b{display:block;color:var(--neon2);} .set-row span{color:var(--dim);font-size:12px;}
.tog{font-family:var(--cute);font-weight:bold;font-size:12px;letter-spacing:1px;text-transform:uppercase;min-width:54px;padding:7px 10px;cursor:pointer;
  color:var(--dim);background:#0d1418;border:2px solid var(--line);border-radius:999px;}
.tog.on{color:#0b2a00;background:var(--acid);border-color:var(--acid);}
.seg{display:flex;gap:4px;} .seg .tog{min-width:40px;}
.btn.danger{border-color:var(--red);color:var(--red);}
.icon-btn{margin-left:-4px;}
/* calm mode: keep the information, drop the motion */
body.calm .splash{animation:none;opacity:0;}
body.calm .portrait.hit canvas,body.calm .portrait.lunge-r,body.calm .portrait.lunge-l,body.calm .tile.d-deadly .tok,body.calm .tile.gate-open,
body.calm #boss-banner,body.calm .hpbar>div.low,body.calm #timeline .day.boss.now,body.calm .card.legendary{animation:none;}
body.calm.danger::after{animation:none;}
body.calm::before{animation:none;}
@media (max-width:520px){ .stat-grid{grid-template-columns:repeat(2,1fr);} #build-ava{width:96px;} .shop-row img,.heal-ico{width:48px;height:48px;} }
.tile{aspect-ratio:auto!important;}
.tile.poi .npc{width:86%;height:86%;border-radius:50%;object-fit:cover;display:block;}
.tile.poi.t11 span{border-color:#50fa7b;background:#06180d;box-shadow:0 2px 0 #000,0 0 12px rgba(80,250,123,.55);animation:bob 2.4s ease-in-out infinite;}
.name-in{display:block;width:min(100%,300px);margin:10px auto;text-align:center;background:#04070a;border:2px solid var(--line);border-radius:999px;
  padding:8px 14px;outline:none;font-size:20px;}
.name-in:focus{border-color:var(--pink);}
.name-in::placeholder{color:var(--neon2);opacity:.75;}
/* tiers */
.card .delta i,.card .sets i{white-space:normal;text-align:center;}
.relic-ico.gold{border-color:#f1fa8c;background:radial-gradient(circle,#6b5410,#1c1505 80%);box-shadow:0 0 8px rgba(241,250,140,.7);}
.relic-ico.diamond{border-color:#9ff3ff;background:radial-gradient(circle,#1d5f73,#06161c 80%);box-shadow:0 0 10px rgba(159,243,255,.85);animation:shine 2.2s ease-in-out infinite;}
.tier-tag{font-size:9px;letter-spacing:1px;border-radius:999px;padding:0 6px;vertical-align:1px;white-space:nowrap;}
.tier-tag.gold{color:#221a00;background:#f1fa8c;} .tier-tag.diamond{color:#002a33;background:#9ff3ff;}
.shop-row.gold{border-color:#f1fa8c;} .shop-row.diamond{border-color:#9ff3ff;box-shadow:0 0 12px rgba(159,243,255,.4);}
.relic{position:relative;}
.relic .copies{position:absolute;left:24px;top:-4px;font-style:normal;font-size:10px;font-weight:bold;color:#0b2a00;background:#50fa7b;border-radius:999px;padding:0 5px;z-index:1;}
.card u.dup{background:#50fa7b;}
.btn.fuse{border-color:#50fa7b;color:#0b2a00;background:#50fa7b;animation:blink 1s steps(2) infinite;}
.npc-face{display:block;width:96px;height:96px;margin:0 auto 4px;border-radius:50%;object-fit:cover;border:3px solid #50fa7b;
  box-shadow:0 0 0 3px #000,0 0 26px rgba(80,250,123,.5);animation:bob 2.6s ease-in-out infinite;}
.fly-relic{position:fixed;left:0;top:0;width:96px;height:96px;z-index:140;pointer-events:none;filter:drop-shadow(0 0 14px rgba(241,250,140,.9));}
#hud-avatar.equip{animation:equip .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes equip{0%{transform:scale(1.35) rotate(-6deg);box-shadow:0 0 0 4px var(--gold),0 0 30px var(--gold);}100%{transform:none;}}
/* boss entrance */
.combat-panel{position:relative;overflow:hidden;}
#boss-intro{display:none;}
#boss-intro.show{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;position:absolute;inset:0;z-index:20;padding:16px;
  background:repeating-linear-gradient(-45deg,rgba(40,0,10,.93) 0 22px,rgba(18,0,5,.93) 22px 44px);animation:biout 2.1s ease-in forwards;pointer-events:none;}
.bi-warn{font-family:var(--cute);font-weight:bold;letter-spacing:8px;color:#ff5555;font-size:15px;animation:blink .35s steps(2) infinite;}
.bi-name{font-family:var(--cute);font-weight:bold;font-size:clamp(30px,8vw,54px);letter-spacing:3px;color:#fff;text-align:center;line-height:1;
  text-shadow:4px 4px 0 #ff5555,0 0 40px rgba(255,85,85,.9);animation:bistamp .55s cubic-bezier(.2,1.6,.4,1) .15s backwards;}
.bi-mech{max-width:420px;text-align:center;font-size:13px;line-height:1.5;color:#ffb3b3;animation:fadein .4s ease-out .8s backwards;}
@keyframes bistamp{0%{transform:scale(3.4) rotate(-8deg);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes biout{0%,86%{opacity:1;}100%{opacity:0;}}
.portrait.slam{animation:slam .6s cubic-bezier(.2,1.5,.4,1);}
@keyframes slam{0%{transform:translateX(160%) rotate(14deg) scale(1.3);}70%{transform:translateX(-6%) rotate(-2deg);}100%{transform:none;}}
/* keyboard highlight: what Enter will pick */
.card,.choice,button,input,select{outline:none;}
body.kb .ksel{outline:3px solid var(--acid);outline-offset:3px;box-shadow:0 0 0 6px rgba(80,250,123,.22),0 0 22px rgba(80,250,123,.55)!important;
  z-index:5;animation:kpulse 1.1s ease-in-out infinite;}
body.kb .card.ksel,body.kb .choice.ksel{transform:translateY(-4px);border-color:var(--acid);}
body.kb .card.ksel::after,body.kb .choice.ksel::after,body.kb .btn.ksel::after,body.kb .pick.ksel::after,body.kb .tog.ksel::after{
  content:"▶";position:absolute;left:-2px;top:50%;transform:translate(-100%,-50%);color:var(--acid);font-size:15px;text-shadow:1px 1px 0 #000;
  animation:knudge .7s ease-in-out infinite;pointer-events:none;}
body.kb .card.ksel::after{left:50%;top:-4px;transform:translate(-50%,-100%) rotate(90deg);animation:none;}
body.kb .btn.ksel,body.kb .pick.ksel,body.kb .tog.ksel,body.kb .choice.ksel{position:relative;}
@keyframes kpulse{50%{outline-color:#e9ffd0;}}
@keyframes knudge{50%{transform:translate(-130%,-50%);}}
body.calm.kb .ksel,body.calm.kb .ksel::after{animation:none;}
/* meme maker */
.meme-cv{display:block;width:min(100%,340px);height:auto;margin:0 auto 10px;border:3px solid var(--neon);border-radius:14px;box-shadow:var(--sticker);}
.meme-in{display:block;width:100%;margin:6px 0;font-family:Impact,'Arial Black',sans-serif;font-size:18px;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt);background:#04070a;border:2px solid var(--line);border-radius:12px;padding:10px 12px;outline:none;}
.meme-in:focus{border-color:var(--pink);}
.meme-fry{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;color:var(--dim);margin-top:8px;cursor:pointer;}
.meme-fry input{width:18px;height:18px;accent-color:var(--neon);}
/* achievements */
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px;
  width:min(360px,calc(100vw - 24px));pointer-events:none;}
.toast{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#06090b;border:2px solid var(--gold);
  box-shadow:var(--sticker),0 0 26px rgba(241,250,140,.55);animation:toast 4.6s ease forwards;}
.toast img{width:44px;height:44px;flex:none;border-radius:10px;background:radial-gradient(circle,#12222a,#020406 80%);object-fit:contain;}
.toast em{display:block;font-style:normal;font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:bold;}
.toast b{display:block;font-family:var(--cute);color:var(--neon2);font-size:15px;letter-spacing:1px;}
.toast span{display:block;font-size:11px;color:var(--dim);}
@keyframes toast{0%{opacity:0;transform:translateY(-24px) scale(.9);}6%{opacity:1;transform:none;}90%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-12px);}}
.ach{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;background:rgba(6,9,11,.8);padding:8px 10px;font-size:13px;opacity:.6;}
.ach .relic-ico{filter:grayscale(1) brightness(.6);}
.ach.on{opacity:1;border-color:var(--gold);}
.ach.on .relic-ico{filter:none;}
.ach .uinfo b{color:var(--neon2);} .ach .uinfo span{display:block;color:var(--dim);font-size:12px;}
.ach .rew{font-size:11px!important;margin-top:2px;} .ach .rew b{display:inline;}
.relic-ico.locked{font-size:13px;}
/* end of run */
.end-avatar{display:block;width:120px;height:auto;margin:8px auto;border:3px solid var(--neon);border-radius:16px;background:var(--stage);box-shadow:var(--sticker);}
.end-avatar.dead{filter:grayscale(.85) brightness(.8);transform:rotate(-4deg);}
.drip-total{text-align:center;font-family:var(--cute);font-weight:bold;letter-spacing:2px;color:var(--dim);margin:12px 0 4px;font-size:13px;}
.drip-total b{display:block;font-size:44px;line-height:1.1;color:var(--gold);text-shadow:3px 3px 0 #000,0 0 22px rgba(241,250,140,.5);}
.next-unlock{margin-top:8px;}
.bar{height:10px;border-radius:999px;background:#0d1418;border:1px solid var(--line);overflow:hidden;}
.bar>div{height:100%;background:linear-gradient(90deg,var(--neon),var(--gold));border-radius:999px;transition:width .8s ease-out;}
/* collection */
.codex{margin:18px 0 0;}
.codex-grid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px;}
.codex-grid .relic-ico{width:34px;height:34px;}
.relic-ico.unknown{display:flex;align-items:center;justify-content:center;color:#2a3d44;font-weight:bold;font-size:15px;background:#04070a;border-style:dashed;}
.relic-ico.rare{border-color:var(--gold);} .relic-ico.cursed{border-color:var(--lilac);}
/* PHONES */
#map-wrap{touch-action:none;} /* a finger on the map swipes to move; the camera follows on its own */
html,body{overscroll-behavior-y:contain;}
@media (pointer:coarse){
  .btn.small,.pick,.mute,.icon-btn{min-height:40px;padding-left:15px;padding-right:15px;}
  .choice{padding:13px 14px;}
  .shop-row .btn{min-width:64px;}
}
@media (max-width:520px){
  .screen{padding:10px;} .panel{padding:14px;}
  #hud-avatar{width:60px;} .relic-ico{width:32px;height:32px;}
  #timeline .day.boss em{display:none;} .brand{font-size:15px;}
  .vs{font-size:18px;} .float{font-size:20px;} .float.crit{font-size:28px;}
  .tile{font-size:26px!important;}
  #topbar{margin-bottom:6px;} #timeline{margin-bottom:8px;gap:3px;}
  #doom{flex:1;text-align:right;}
  .legend{display:none;} /* the tile info line already names what you tap */
  #tile-info{font-size:12px;}
  /* drafts read as a list: one relic per row, art on the left */
  .draft-cards,.draft-cards.four{grid-template-columns:1fr;gap:10px;}
  .card{display:grid;grid-template-columns:72px 1fr;gap:0 12px;text-align:left;align-items:center;padding:10px;}
  .card img{grid-row:1 / span 5;width:72px;height:72px;}
  .card b{margin:0 0 2px;font-size:14px;} .card span{font-size:12px;}
  .card .delta,.card .sets{justify-content:flex-start;}
  .card em{left:46px;}
  #modal{padding:8px;align-items:flex-end;} #modal-panel{max-height:92vh;border-radius:18px 18px 10px 10px;margin:0;}
  .share .row .btn{flex:1 1 40%;}
  #minimap.big{width:86%;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

/* ================= tylerirl.com theme: structure and type ================= */
html{background:#000;color-scheme:dark;}
html,body{font-family:var(--mono);letter-spacing:.01em;}
body{background:#000;}
body::before{opacity:.5;background:
  radial-gradient(circle,rgba(139,233,253,.9) 0 1px,transparent 1.6px) 12px 20px/110px 130px,
  radial-gradient(circle,rgba(139,233,253,.5) 0 1.2px,transparent 1.8px) 70px 90px/150px 170px,
  radial-gradient(circle,rgba(234,234,234,.6) 0 1px,transparent 1.6px) 40px 140px/190px 210px;}
body::after{background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.14) 2px 4px);}
/* the site's corner brackets */
.corner-brackets{position:fixed;inset:0;pointer-events:none;z-index:98;}
.corner-brackets::before,.corner-brackets::after,.corner-brackets .bottom::before,.corner-brackets .bottom::after{content:"";position:absolute;width:40px;height:40px;
  border:0 solid rgba(139,233,253,.5);}
.corner-brackets::before{top:15px;left:15px;border-top-width:2px;border-left-width:2px;}
.corner-brackets::after{top:15px;right:15px;border-top-width:2px;border-right-width:2px;}
.corner-brackets .bottom::before{bottom:15px;left:15px;border-bottom-width:2px;border-left-width:2px;}
.corner-brackets .bottom::after{bottom:15px;right:15px;border-bottom-width:2px;border-right-width:2px;}
@media (max-width:520px){ .corner-brackets{display:none;} }
/* the site's floating "Return Home" card */
.floating-home{position:fixed;top:18px;right:62px;z-index:60;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 14px;transition:all .3s ease;backdrop-filter:blur(4px);}
.floating-home:hover{border-color:rgba(139,233,253,.5);background:rgba(139,233,253,.05);transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,233,253,.15);}
.floating-home b{display:block;font-size:12px;color:#fff;} .floating-home span{display:block;font-size:10px;color:#bdbdbd;}
.floating-home i{font-style:normal;color:var(--neon);font-size:16px;}
body:not(.on-title) .floating-home{display:none;}
@media (max-width:700px){ .floating-home{position:static;margin:0 auto 14px;width:max-content;} }
/* surfaces: thin cyan lines on near-black glass, no chunky shadows */
.panel,.box,#hud,#map-wrap,.unlock,.ach,.shop-row,.card,.choice,.set-row,.syn,#tile-info,.meta-stat,.share pre,#combat-log,#map-log,.toast,#combat-choice{
  border-width:1px;border-radius:12px;box-shadow:none;}
.panel,.box,#hud{background:var(--panel);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--line);}
#map-wrap{border:1px solid var(--line);background:rgba(0,0,0,.5);}
.card,.choice{box-shadow:none;}
.card:hover,.choice:hover{border-color:var(--neon);box-shadow:0 0 20px rgba(139,233,253,.18);}
/* headings: lowercase with the site's blinking cursor; labels: tiny spaced capitals */
.panel h2,#modal-panel h2{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--neon);text-transform:lowercase;letter-spacing:.1em;text-shadow:0 0 14px rgba(139,233,253,.45);}
.panel h2::after,#modal-panel h2::after,.brand::after{content:"_";animation:tirlblink 1s steps(2) infinite;}
@keyframes tirlblink{50%{opacity:0;}}
.kicker,.box-h,.dlabels,.hint,.legend,#doom,.foot,.stat-grid span{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;color:#666;}
.kicker,.box-h{font-size:.6rem;}
.box-h span{color:var(--neon);}
.hint,.legend{font-size:.55rem;letter-spacing:.1em;}
.brand{font-family:var(--mono);font-size:1rem;text-transform:lowercase;letter-spacing:.1em;color:var(--neon);text-shadow:0 0 12px rgba(139,233,253,.4);}
.brand b{color:#fff;text-shadow:none;font-weight:700;}
#doom b{font-family:var(--mono);color:#ff8b8b;}
/* buttons: the site's bordered, square-ish buttons that fill on hover */
.btn{font-family:var(--mono);font-weight:500;border-radius:4px;border:1px solid var(--neon);background:#0d1418;color:var(--neon);box-shadow:none;
  text-transform:lowercase;letter-spacing:.06em;transition:all .2s;}
.btn:hover{background:var(--neon);color:#000;}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn:disabled,.btn:disabled:hover{background:#0d1418;color:#3d4a4f;border-color:#243036;box-shadow:none;opacity:1;}
.btn.big{font-size:15px;padding:13px 26px;border-width:1px;background:rgba(139,233,253,.12);color:var(--neon);text-shadow:none;
  box-shadow:0 0 22px rgba(139,233,253,.25),inset 0 0 18px rgba(139,233,253,.08);text-transform:lowercase;letter-spacing:.12em;}
.btn.big:hover{background:var(--neon);color:#000;box-shadow:0 0 30px rgba(139,233,253,.5);}
.btn.big:active{box-shadow:none;}
.btn.big:disabled,.btn.big:disabled:hover{background:rgba(139,233,253,.04);color:#3d4a4f;box-shadow:none;}
.btn.small{font-size:11px;padding:7px 12px;border-color:#333;color:#8a979c;background:transparent;box-shadow:none;border-radius:6px;}
.btn.small:hover{border-color:var(--neon);color:var(--neon);background:rgba(139,233,253,.1);box-shadow:0 0 20px rgba(139,233,253,.2);}
.btn.price{color:var(--gold);border-color:rgba(241,250,140,.5);} .btn.price:hover{background:rgba(241,250,140,.12);color:var(--gold);border-color:var(--gold);box-shadow:0 0 18px rgba(241,250,140,.2);}
.btn.fuse,.btn.fuse:hover{background:var(--acid);color:#000;border-color:var(--acid);}
.btn.danger{border-color:rgba(255,85,85,.5);color:var(--red);} .btn.danger:hover{background:rgba(255,85,85,.12);border-color:var(--red);color:var(--red);}
#btn-link{background:rgba(80,250,123,.14);color:var(--acid);border-color:var(--acid);box-shadow:0 0 22px rgba(80,250,123,.25);}
#btn-link:hover{background:var(--acid);color:#000;}
.pick,.tog,.chip,.mute,.icon-btn,.meta-stat,.tier-tag,.rar-tag,.sets i,.delta i,.card em,.card u,.nft-row select,.nft-row input,.name-in,.meme-in{border-radius:4px;}
.pick{font-family:var(--mono);font-weight:500;border-width:1px;background:transparent;color:#8a979c;text-transform:lowercase;}
.pick:hover{border-color:var(--neon);color:var(--neon);transform:none;}
.pick.on{background:rgba(139,233,253,.14);color:var(--neon);border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.25);}
.tog{font-family:var(--mono);border-width:1px;background:transparent;}
.tog.on{background:rgba(80,250,123,.14);color:var(--acid);border-color:var(--acid);}
.chip{background:rgba(139,233,253,.04);border:1px solid var(--line);}
.chip.sale{background:rgba(80,250,123,.14);color:var(--acid);border-color:var(--acid);}
.chip.markup{background:rgba(255,184,108,.14);color:#ffb86c;border-color:#ffb86c;}
.mute,.icon-btn{border:1px solid #333;}
.mute:hover,.icon-btn:hover{border-color:var(--neon);}
.name-in,.meme-in,.nft-row select,.nft-row input{font-family:var(--mono);border-width:1px;background:rgba(0,0,0,.5);}
.name-in:focus,.meme-in:focus,.nft-row select:focus,.nft-row input:focus{border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.2);}
.name-in{color:var(--neon);text-transform:lowercase;letter-spacing:.1em;}
.name-in::placeholder{color:#5f7f88;opacity:1;}
/* title screen, after the site's hero */
h1.game-title{font-family:var(--mono);font-weight:800;text-transform:lowercase;letter-spacing:.02em;line-height:1.05;font-size:clamp(34px,9vw,58px);
  color:#fff;text-shadow:0 0 18px rgba(139,233,253,.75),0 0 46px rgba(139,233,253,.35);}
h1.game-title .is{color:var(--neon);text-shadow:0 0 18px rgba(139,233,253,.9);}
h1.game-title .is::after{content:"_";animation:tirlblink 1s steps(2) infinite;}
.title-sub{color:#bdbdbd;font-size:13px;letter-spacing:.08em;}
.title-coin{border:1px solid rgba(139,233,253,.5);box-shadow:0 0 30px rgba(139,233,253,.35);}
.meta-stat{background:rgba(139,233,253,.04);border:1px solid var(--line);font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:11px;}
.unlock .uinfo b,.ach .uinfo b,.sinfo b,.set-row b,.choice b,.card b,.relic .rtxt b{font-family:var(--mono);}
.choice b{text-transform:lowercase;letter-spacing:.06em;}
.foot{font-size:.55rem;color:#555;}
/* portraits read as holograms on black */
#avatar-canvas,#hud-avatar,#port-you canvas,.portrait canvas,.end-avatar,#build-ava,.meme-cv{border-width:1px;border-radius:10px;box-shadow:0 0 24px rgba(139,233,253,.14);}
.portrait.boss canvas{border-color:var(--red);box-shadow:0 0 26px rgba(255,85,85,.4);}
.relic-ico{border-width:1px;border-radius:6px;background:radial-gradient(circle,#12222a,#020406 80%);}
.avatar-name{font-family:var(--mono);}
/* bars */
.hpbar{border:1px solid rgba(139,233,253,.35);border-radius:3px;background:#061216;box-shadow:none;height:18px;}
.hpbar>div{border-radius:2px;background:linear-gradient(90deg,#3fb8d0,#8be9fd);}
.hpbar>div.low{background:linear-gradient(90deg,#b92b2b,#ff5555);}
.hpbar.foe>div{background:linear-gradient(90deg,#b0478a,#ff79c6);}
.hpbar>i{border-radius:2px;}
.hpbar span{font-size:11px;line-height:16px;}
.bar{border-radius:3px;border-color:var(--line);} .bar>div{border-radius:2px;background:linear-gradient(90deg,#3fb8d0,#8be9fd);}
#hud-moves i{border-radius:1px;background:var(--neon);} #hud-moves.night i{background:var(--lilac);} #hud-moves i.spent{background:#12202a;}
/* nine-day track */
#timeline .day{border-radius:4px;border:1px solid var(--line);background:rgba(139,233,253,.03);font-family:var(--label);color:#666;}
#timeline .day.now{background:rgba(139,233,253,.18);color:var(--neon);border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.35);}
#timeline .day.now.night{background:rgba(189,147,249,.18);color:var(--lilac);border-color:var(--lilac);box-shadow:0 0 14px rgba(189,147,249,.35);}
#timeline .day.boss{border-width:1px;border-radius:4px;}
#timeline .day.boss em{font-family:var(--label);}
#boss-banner{font-family:var(--mono);border-width:1px;border-radius:12px;text-transform:lowercase;background:rgba(255,85,85,.06);}
#boss-banner small{font-family:var(--mono);}
/* map */
.tile{border-radius:4px;}
.tile.wall{border-radius:2px;}
.tile.poi span{border-width:1px;box-shadow:0 0 10px rgba(139,233,253,.12);filter:none;}
.tile.foe .tok{border-width:1px;box-shadow:0 0 8px rgba(255,85,85,.35);}
.tile.moveable{box-shadow:inset 0 0 0 1px rgba(139,233,253,.45);}
#you-tok{border-radius:4px;box-shadow:0 0 0 1px var(--acid),0 0 16px rgba(80,250,123,.55);}
#you-tok img{border-radius:3px;}
.hunter-tok{border-radius:4px;}
#minimap{border-width:1px;border-radius:6px;box-shadow:none;}
#tile-info{background:rgba(0,0,0,.5);}
#tile-info b{color:var(--neon);}
/* dialogs and fights */
#modal{background:rgba(0,0,0,.84);}
#modal-panel{background:rgba(2,6,8,.94);border:1px solid rgba(139,233,253,.35);box-shadow:0 0 60px rgba(139,233,253,.12);}
.note{font-size:12px;}
.vs{font-family:var(--mono);color:var(--neon);text-shadow:0 0 12px rgba(139,233,253,.5);}
.fighter .cname{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:#bdbdbd;}
.float{font-family:var(--mono);}
.drip-total{font-family:var(--label);} .drip-total b{font-family:var(--mono);text-shadow:0 0 22px rgba(241,250,140,.5);}
.stat-grid b{font-family:var(--mono);color:var(--neon);}
.splash{font-family:var(--mono);text-transform:lowercase;letter-spacing:.12em;color:#fff;text-shadow:0 0 18px rgba(139,233,253,.8);}
.splash.night{color:var(--lilac);text-shadow:0 0 18px rgba(189,147,249,.8);} .splash.boss{color:#ff8b8b;text-shadow:0 0 22px rgba(255,85,85,.9);}
.bi-name{font-family:var(--mono);text-transform:lowercase;text-shadow:0 0 30px rgba(255,85,85,.9);} .bi-warn{font-family:var(--label);}
.toast{background:rgba(2,6,8,.95);border:1px solid var(--gold);box-shadow:0 0 26px rgba(241,250,140,.25);}
.toast b{font-family:var(--mono);color:#fff;} .toast em{font-family:var(--label);}
.card em,.card u{font-family:var(--label);}
.card.rare{border-color:rgba(241,250,140,.7);} .card.cursed{border-color:rgba(189,147,249,.8);} .card.legendary{border-color:var(--pink);background:linear-gradient(160deg,rgba(255,121,198,.10),rgba(2,6,8,.9) 55%,rgba(139,233,253,.08));}
.syn b{font-family:var(--mono);}
.share pre{background:rgba(0,0,0,.6);}
::selection{background:rgba(139,233,253,.3);color:#fff;}
/* map floors: a hint of the district colour on near-black, not a wash of it */
.tile{background:color-mix(in srgb,var(--dc,#555) 9%,#070d10);border:1px solid color-mix(in srgb,var(--dc,#555) 34%,transparent);}
#map.night .tile{background:color-mix(in srgb,var(--dc,#555) 4%,#04080a);}
.tile.moveable:hover{background:color-mix(in srgb,var(--dc,#555) 22%,#0c1519);}
.tile.wall{background:
    linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,transparent 2px) 0 0/100% 50%,
    linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px) 0 0/50% 100%,
    color-mix(in srgb,var(--dc,#555) 5%,#020405)!important;border-color:#000;}
.tile.path{background:color-mix(in srgb,var(--acid) 14%,#070d10);}
.tile.foe .tok.ph{background:linear-gradient(110deg,#0c1a20 30%,#1d4450 50%,#0c1a20 70%) 0 0/250% 100%;}
/* leaderboard */
.end-rank{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.7;color:var(--txt);}
.end-rank:empty{display:none;}
.end-rank b{color:var(--gold);}
.dim{color:var(--dim);}
.board{display:flex;flex-direction:column;gap:4px;margin:10px 0;}
.brow{display:grid;grid-template-columns:34px minmax(0,1fr) auto 56px;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(139,233,253,.03);font-size:12px;}
.brow i{font-style:normal;font-family:var(--label);color:#666;text-align:right;}
.brow.top i{color:var(--gold);}
.brow.me{border-color:var(--acid);background:rgba(80,250,123,.08);box-shadow:0 0 14px rgba(80,250,123,.18);}
.bname{min-width:0;}
.bname b{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bname span{display:block;color:var(--dim);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brel{display:flex;gap:2px;}
.brel .relic-ico{width:22px;height:22px;border-radius:4px;}
.brow em{font-style:normal;font-weight:700;color:var(--gold);text-align:right;font-size:14px;}
#modal-panel:has(.board){max-width:620px;}
@media (max-width:520px){ .brel{display:none;} .brow{grid-template-columns:28px minmax(0,1fr) 50px;} }
.relic .copies{left:20px;top:-5px;background:#ffb86c;color:#2a1400;border-radius:3px;font-family:var(--label);letter-spacing:.05em;}
.card u.dup{background:#ffb86c;color:#2a1400;}
/* the main site's 3D background sits behind everything; the page itself goes see-through for it */
body.bg3d{background:transparent;}
body.bg3d::before{display:none;}
body:not(.bg3d) #bg3d-canvas{display:none!important;} /* three.js sets display inline */
body.bg3d #modal{background:rgba(0,0,0,.78);}