/* TAGMON: a 16-bit game screen. Ink windows, bone borders, pixel type. No rounded cards, no shadows. */
@font-face{font-family:Press;src:url(/PressStart2P-Regular.ttf)}
@font-face{font-family:VT;src:url(/VT323-Regular.ttf)}
:root{--ink:#0e0b16;--night:#191428;--bone:#f3efe0;--dim:#9a93ad;--line:#3b3353;--leaf:#58c05a;--ember:#ff5a4f;--gold:#ffd24a;--sky:#7ad0e8;--px:4px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--bone);font:22px/1.25 VT,ui-monospace,monospace;
  background-image:linear-gradient(#211a36 2px,transparent 2px),linear-gradient(90deg,#211a36 2px,transparent 2px);background-size:32px 32px;background-position:-1px -1px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--sky)}h2,h3{font:400 14px/1.4 Press,monospace;margin:0;color:var(--bone)}
b{font-weight:400;color:#fff}.dim{color:var(--dim)}.botn{color:var(--gold)}.err{color:var(--ember)}
kbd{font:inherit;background:var(--bone);color:var(--ink);padding:0 6px}
:focus-visible{outline:var(--px) solid var(--gold);outline-offset:2px}
main{max-width:1200px;margin:0 auto;padding:0 16px 40px}

/* window: the one container on the page. Its title sits on the top border like an RPG menu. */
.win{position:relative;background:var(--ink);border:var(--px) solid var(--bone);padding:30px 20px 18px;min-width:0}
.win>h2{position:absolute;top:-4px;left:16px;background:var(--bone);color:var(--ink);padding:6px 10px 4px}
.win h3{margin:20px 0 8px;color:var(--gold)}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px}.block{margin-top:20px}

.btn{display:inline-block;font:400 12px/1 Press,monospace;padding:12px 14px;background:var(--bone);color:var(--ink);border:0;text-decoration:none;cursor:pointer;
  box-shadow:inset -4px -4px 0 #b9b29c,inset 4px 4px 0 #fff}
.btn:hover{background:#fff}.btn:active{box-shadow:inset 4px 4px 0 #b9b29c,inset -4px -4px 0 #fff;transform:translateY(2px)}
.btn.hot{background:var(--ember);color:#fff;box-shadow:inset -4px -4px 0 #b3322d,inset 4px 4px 0 #ff9a8f}.btn.hot:hover{background:#ff6f64}
.btn.hot:active{box-shadow:inset 4px 4px 0 #b3322d,inset -4px -4px 0 #ff9a8f}
.btn.wide{width:100%;padding:16px;font-size:14px}.btn[disabled]{opacity:.5;pointer-events:none}

.bar{display:flex;align-items:center;gap:20px;max-width:1200px;margin:0 auto;padding:14px 16px}
.logo{display:flex;align-items:center;gap:10px;font:400 18px/1 Press,monospace;color:var(--bone);text-decoration:none}
.bar nav{display:flex;gap:18px;margin-left:auto}.bar nav a{font:400 11px/1 Press,monospace;color:var(--dim);text-decoration:none}.bar nav a:hover{color:var(--gold)}

/* the battle screen */
.screen{position:relative;border:var(--px) solid var(--bone);background:#000;line-height:0;overflow:hidden}
.screen canvas{width:100%;height:auto;display:block;cursor:pointer}
.hud{position:absolute;background:rgba(14,11,22,.92);border:var(--px) solid var(--bone);padding:8px 10px;line-height:1.1;font-size:clamp(14px,1.8vw,22px)}
.hudBoss{left:12px;top:12px;width:min(46%,340px)}.hudBoss b{font:400 clamp(9px,1.15vw,14px)/1.3 Press,monospace;display:block;margin-bottom:6px}
.hudTime{right:12px;top:12px;color:var(--dim)}.hudTime b{color:var(--gold)}
.hp{height:clamp(8px,1.2vw,14px);background:#3a1420;border:2px solid var(--bone);margin-bottom:4px}
.hp i{display:block;height:100%;width:100%;background:var(--leaf);transition:width .5s steps(12)}.hp.mid i{background:var(--gold)}.hp.low i{background:var(--ember)}
.msg{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(14,11,22,.94);border:var(--px) solid var(--bone);padding:10px 30px 10px 14px;min-height:3em;line-height:1.15;font-size:clamp(15px,2vw,26px)}
.msg p{margin:0}.next{position:absolute;right:10px;bottom:8px;width:0;height:0;border:6px solid transparent;border-top-color:var(--bone);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.dmg{position:absolute;font:400 clamp(12px,2vw,22px)/1 Press,monospace;color:#fff;text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink);pointer-events:none;animation:rise .9s steps(9) forwards}
.dmg.crit{color:var(--gold);font-size:clamp(16px,2.8vw,32px)}
@keyframes rise{to{transform:translateY(-60px);opacity:0}}
.status{margin:10px 2px 0;color:var(--dim);display:flex;gap:26px;flex-wrap:wrap}.status b{color:var(--gold)}

/* how to play */
.rules{list-style:none;margin:0;padding:0;counter-reset:r}
.rules li{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:2px dashed var(--line);counter-increment:r}.rules li:last-child{border:0}
.rules li>div::before{content:counter(r) ". ";color:var(--gold)}
.art{flex:none;width:132px;height:64px;display:flex;align-items:flex-end;justify-content:center;gap:2px;background:var(--night);border:2px solid var(--line)}
.art i{font-style:normal;color:var(--gold);align-self:center;font-size:20px}
.plain{margin:0 0 14px;padding-left:26px}.plain li{margin:6px 0}

/* try it */
.field{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:10px;margin-bottom:8px}.field span{color:var(--dim)}
input{font:inherit;color:var(--bone);background:var(--night);border:2px solid var(--line);padding:6px 10px;width:100%;min-width:0;border-radius:0}
input:focus{border-color:var(--gold);outline:none}input::placeholder{color:#6a6380}
.simOut{margin-top:14px;min-height:60px}.simOut img{width:100%;display:block;border:2px solid var(--line)}.simOut p{margin:10px 0 0}

/* lists */
.rank{margin:0;padding:0;list-style:none;counter-reset:n}
.rank li{counter-increment:n;display:flex;gap:10px;align-items:center;padding:4px 0;border-bottom:2px dashed var(--line);cursor:pointer}.rank li:hover{color:var(--gold)}
.rank li::before{content:counter(n);color:var(--dim);width:22px}.rank li em{margin-left:auto;font-style:normal;color:var(--gold)}.rank li:last-child{border:0}
.log{margin:0;padding:0;list-style:none;max-height:300px;overflow:hidden}.log.short{max-height:170px}
.log li{padding:3px 0;border-bottom:2px dashed var(--line)}.log li[data-h]{cursor:pointer}
.log li i{font-style:normal;color:var(--sky);margin-right:8px}.log li.k-hit i{color:var(--ember)}.log li.k-cashout i,.log li.k-buy i,.log li.k-fuse i,.log li.k-lucky i{color:var(--gold)}.log li.k-hatch i,.log li.k-duel i{color:var(--leaf)}
.ledger{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;margin:0 0 10px}.ledger div{display:flex;justify-content:space-between;border-bottom:2px dashed var(--line);padding:4px 0}
.ledger dt{color:var(--dim)}.ledger dd{margin:0;color:var(--gold)}

/* inventory slots: shop items and creatures */
.lead{margin:0 0 14px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.slot{background:var(--night);border:2px solid var(--line);padding:10px 8px 8px;text-align:center;cursor:pointer;min-width:0}
.slot:hover,.slot:focus-visible{border-color:var(--gold)}
.slot canvas{display:block;margin:0 auto 6px}.slot b{display:block;font:400 10px/1.5 Press,monospace;overflow:hidden;text-overflow:ellipsis}
.slot span{display:block;color:var(--dim);font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot em{display:block;font-style:normal;color:var(--gold);font-size:19px}
.tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.tools input{width:220px;margin-left:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button{font:400 10px/1 Press,monospace;background:var(--night);color:var(--dim);border:2px solid var(--line);padding:9px 10px;cursor:pointer}
.tabs button.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}

footer{max-width:900px;margin:0 auto;padding:10px 16px 50px;color:var(--dim);font-size:19px;text-align:center}

/* modal sheet */
.modal{position:fixed;inset:0;background:rgba(8,6,14,.82);display:none;place-items:center;z-index:50;padding:14px}.modal.on{display:grid}
.sheet{width:min(760px,100%);max-height:92vh;overflow:auto;padding-top:22px}
.pHead{display:flex;gap:18px;align-items:center}.pHead canvas{flex:none;border:2px solid var(--line)}
.pHead h2{font-size:20px;margin-bottom:8px}.close{float:right}
.tags{display:flex;gap:14px;flex-wrap:wrap;color:var(--gold)}
.xp{height:14px;border:2px solid var(--bone);margin:14px 0 4px;background:#241c3a}.xp div{height:100%;background:var(--sky)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.babies{display:flex;gap:10px;flex-wrap:wrap}.baby{text-align:center;font-size:18px}.baby canvas{border:2px solid var(--line);display:block}
.mini{list-style:none;margin:0;padding:0}.mini li{padding:3px 0;border-bottom:2px dashed var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}

@media(max-width:860px){.two{grid-template-columns:1fr}.bar nav{display:none}.bar .btn{margin-left:auto}.cols{grid-template-columns:1fr}.field{grid-template-columns:1fr;gap:2px}.tools input{margin-left:0;width:100%}
  .hud{border-width:2px;padding:4px 6px}.hudBoss{left:6px;top:6px}.hudTime{right:6px;top:6px}.msg{left:6px;right:6px;bottom:6px;border-width:2px;padding:5px 24px 5px 8px}.ledger{grid-template-columns:1fr}.art{width:104px}.pHead{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.next,.dmg{animation:none}}
/* message window sits under the picture, so it never hides the fight */
.screen .msg{position:relative;left:auto;right:auto;bottom:auto;border-width:4px 0 0;background:var(--ink)}
@media(max-width:860px){.screen .msg{border-width:2px 0 0}}

.underScreen{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}.underScreen .status{margin:0;flex:1}

/* agent log: one row per mention the bot handled */
.logo img{image-rendering:pixelated;display:block}
.dot{display:inline-block;width:10px;height:10px;background:var(--ember);margin-right:8px}.dot.on{background:var(--leaf)}
.alog{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.alog li{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:2px dashed var(--line)}
.alog .tag{flex:none;min-width:74px;text-align:center;font:400 9px/1 Press,monospace;padding:5px 4px 4px;background:var(--sky);color:var(--ink);text-transform:uppercase}
.alog li.k-hatch .tag,.alog li.k-duel .tag{background:var(--leaf)}.alog li.k-cashout .tag,.alog li.k-wallet .tag,.alog li.k-lucky .tag,.alog li.k-treasure .tag{background:var(--gold)}.alog li.k-tired .tag,.alog li.k-bank .tag,.alog li.k-chat .tag{background:var(--dim)}
.alog .who{flex:none;color:var(--ember);text-decoration:none}.alog .who:hover{text-decoration:underline}
.alog .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alog .age{flex:none;color:var(--dim)}
.alog .mini{flex:none;font:400 9px/1 Press,monospace;padding:5px 6px 4px;border:2px solid var(--sky);color:var(--sky);text-decoration:none}.alog .mini:hover{background:var(--sky);color:var(--ink)}
.alog .mini.x{border-color:var(--bone);color:var(--bone)}.alog .mini.x:hover{background:var(--bone);color:var(--ink)}.alog .mini.off{border-color:var(--line);color:var(--dim)}
@media(max-width:860px){.alog li{flex-wrap:wrap}.alog .txt{flex-basis:100%;white-space:normal;order:5}}

/* ===== multi-page layout ===== */
.page[hidden]{display:none}
.bar{position:sticky;top:0;z-index:30;background:rgba(25,20,40,.96);border-bottom:var(--px) solid var(--ink);max-width:none;padding:10px max(16px,calc((100vw - 1200px)/2 + 16px));gap:14px}
.bar nav{margin-left:10px;gap:4px;flex:1}
.bar nav a{padding:10px 10px 8px;color:var(--dim);border-bottom:var(--px) solid transparent}.bar nav a:hover{color:var(--bone)}.bar nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.btn.live{background:var(--ink);color:var(--bone);box-shadow:inset 0 0 0 2px var(--ember);display:flex;align-items:center;gap:8px}.btn.live:hover{background:#221a36}
.btn.live i{width:8px;height:8px;background:var(--ember);animation:blink 1s steps(2) infinite}.btn.live b{color:var(--gold)}
main{padding-top:18px}
.lead{margin:0 0 14px}h2.big{font-size:20px;position:static;background:none;color:var(--bone);padding:0}
.grow{flex:1;min-width:0}
/* find your creature */
.finder{display:flex;gap:8px;align-items:center}.finder .at{color:var(--gold);font-size:28px}.finder input{flex:1}
.findOut{margin-top:16px}.eggRow{display:flex;gap:16px;align-items:center}.eggRow img{image-rendering:pixelated;flex:none}
.found{display:flex;gap:16px;align-items:center}.found canvas{flex:none;border:2px solid var(--line)}.found h3{margin:0 0 6px;font-size:16px}.found p{margin:0 0 10px}
.forms{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.forms figure{margin:0;text-align:center;font-size:18px;line-height:1.1}
.forms canvas{display:block;border:2px solid var(--line)}.forms figcaption span{color:var(--dim)}
.forms figure.now canvas{border-color:var(--gold);outline:2px solid var(--gold)}.forms figure.now figcaption{color:var(--gold)}.forms figure.later canvas{filter:brightness(.55) saturate(.6)}
.forms.big{gap:14px}.forms.big figure{font-size:20px}
.art img{image-rendering:pixelated;align-self:center}
.simOut img{max-width:420px}
/* dex */
.dexGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:14px}
.dexCard{background:var(--night);border:2px solid var(--line);padding:10px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.dexCard:hover,.dexCard:focus-visible{border-color:var(--gold)}
.dexCard .strip{grid-column:1/-1;display:flex;justify-content:space-around;align-items:flex-end;padding:6px 2px 4px;margin-bottom:6px}
.dexCard b{font:400 11px/1.4 Press,monospace}.dexCard span{color:var(--dim);text-align:right}.dexCard em{grid-column:1/-1;font-style:normal;color:var(--gold);font-size:19px}
.bossGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.bossCard{background:var(--night);border:2px solid var(--line);padding:8px;text-align:center}.bossCard.now{border-color:var(--ember)}
.bossPic{height:150px;background-size:cover;background-position:center 70%;display:flex;align-items:flex-end;justify-content:center;image-rendering:pixelated;margin-bottom:8px}
.bossPic img{image-rendering:pixelated;max-height:140px;max-width:96%}
.bossCard b{display:block;font:400 11px/1.4 Press,monospace}.bossCard span{color:var(--dim)}.bossCard em{display:block;font-style:normal;color:var(--ember)}
/* players table */
.tableWrap{overflow-x:auto}
.ranks{width:100%;border-collapse:collapse}.ranks th{font:400 9px/1 Press,monospace;color:var(--dim);text-align:left;padding:6px 10px 8px;border-bottom:var(--px) solid var(--line);white-space:nowrap}
.ranks td{padding:6px 10px;border-bottom:2px dashed var(--line);vertical-align:middle;white-space:nowrap}.ranks td:nth-child(3){white-space:normal;line-height:1.05}
.ranks tbody tr[data-h]{cursor:pointer}.ranks tbody tr[data-h]:hover,.ranks tbody tr:focus-visible{background:#1c1630}.ranks td.pic{width:56px;padding-right:0}.ranks td.pic canvas{display:block;border:2px solid var(--line)}
/* profile */
.pHead canvas{flex:none;border:2px solid var(--line)}.ledger.one{grid-template-columns:1fr}
/* docs */
.docCols{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}.docs h3{margin:18px 0 6px;color:var(--gold)}.docs p{margin:0 0 8px;max-width:62ch}
table.doc{border-collapse:collapse;width:100%;margin:6px 0 10px}table.doc th{font:400 9px/1 Press,monospace;color:var(--dim);text-align:left;padding:4px 8px 6px}table.doc td{padding:4px 8px;border-top:2px dashed var(--line);vertical-align:top}table.doc td:first-child{color:#fff;width:42%}
/* footer */
footer{max-width:1200px;padding:18px 16px 50px;border-top:var(--px) solid var(--line);margin-top:10px}
footer nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}footer nav a{font:400 10px/1 Press,monospace;color:var(--dim);text-decoration:none}footer nav a:hover{color:var(--gold)}
footer p{max-width:70ch;margin:0 auto}
@media(max-width:860px){.bar{flex-wrap:wrap;padding:8px 12px}.bar nav{display:flex;order:5;flex-basis:100%;margin:0;overflow-x:auto}.bar nav a{white-space:nowrap}.bar .btn{font-size:10px;padding:9px 10px}.bar .btn.live{margin-left:auto}
  .docCols{grid-template-columns:1fr}.found{flex-direction:column;align-items:flex-start}.forms canvas{width:60px;height:60px}.forms.big canvas{width:96px;height:96px}.finder{flex-wrap:wrap}}

.bossCard em[hidden]{display:none}

/* anything marked hidden stays hidden, whatever layout class it has */
[hidden]{display:none!important}