@font-face{font-family:"Archivo Black";src:url(assets/archivo-black.ttf)}
:root{--pink:#ff2d95;--orange:#ff8a1f;--green:#3dff8a;--red:#ff2d55;--ink:#0b0610;--acc:var(--green)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;overflow:hidden;font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;color:#fff}
#stage{position:relative;width:1080px;height:1920px;display:flex;flex-direction:column;transform-origin:0 0;overflow:hidden}
.loss{--acc:var(--red)}
.bg{position:absolute;inset:-30px;background:url(assets/lobby.jpg) center/cover;filter:brightness(.35) saturate(1.2) blur(6px)}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(11,6,16,.9) 100%),linear-gradient(180deg,rgba(11,6,16,.7),rgba(11,6,16,.2) 30%,rgba(11,6,16,.85))}
.loss .vig{background:radial-gradient(ellipse at 50% 40%,transparent 25%,rgba(120,0,30,.55) 80%,rgba(40,0,10,.95) 100%),linear-gradient(180deg,rgba(11,6,16,.7),rgba(11,6,16,.2) 30%,rgba(11,6,16,.85))}
#portrait{position:absolute;z-index:-1;right:-90px;top:-110px;width:900px;height:900px;object-fit:cover;opacity:.9;-webkit-mask-image:radial-gradient(circle at 55% 42%,#000 42%,transparent 68%);filter:drop-shadow(0 0 40px var(--pink)) drop-shadow(0 0 60px var(--acc));animation:fadeIn .8s ease both}
.top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:40px 50px 0;z-index:5}
.brand{font-size:58px;letter-spacing:4px;text-shadow:0 0 18px rgba(255,45,149,.6)}
.brand .p{color:var(--pink)}.brand .o{color:var(--orange)}
.cash{font-family:Arial,sans-serif;font-weight:bold;font-size:34px;color:var(--green);background:rgba(14,8,22,.85);border:3px solid #3a2a48;border-radius:40px;padding:10px 26px}
.toggle{position:relative;z-index:5;display:flex;gap:14px;padding:22px 50px 0}
.toggle a{font-family:Arial,sans-serif;font-weight:bold;font-size:24px;letter-spacing:2px;text-transform:uppercase;color:#bba7cc;text-decoration:none;border:2px solid #57406a;border-radius:30px;padding:8px 22px;background:rgba(14,8,22,.7)}
.toggle a.on{color:#fff;border-color:var(--pink);box-shadow:0 0 14px rgba(255,45,149,.6)}
.hero{position:relative;z-index:3;padding:30px 60px 0;min-height:500px;flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:40px}
#verdict{font-size:210px;line-height:1;letter-spacing:8px;color:var(--acc);text-shadow:0 0 14px var(--acc),0 0 50px var(--acc),0 0 100px var(--acc);animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
#margin{font-family:Arial,sans-serif;font-weight:bold;font-size:38px;letter-spacing:6px;color:#e8dcf2;margin-top:14px}
#margin b{color:var(--orange)}
#taunt{font-family:Georgia,serif;font-style:italic;font-size:36px;color:#ffc2d6;margin-top:18px;max-width:560px;line-height:1.3}
.tag{display:inline-block;margin-top:20px;font-size:26px;letter-spacing:6px;color:var(--ink);background:linear-gradient(90deg,var(--pink),var(--orange));padding:8px 20px;border-radius:8px;transform:rotate(-3deg);box-shadow:0 0 20px rgba(255,45,149,.6)}
.statsWrap{position:relative;z-index:4;flex:none;padding:10px 60px 40px}
#stats{--edge:var(--green);border-radius:28px;padding:34px 44px 26px;background:linear-gradient(160deg,rgba(30,18,44,.78),rgba(10,6,16,.86));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:3px solid color-mix(in srgb,var(--edge) 70%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--edge) 45%,transparent),inset 0 0 30px color-mix(in srgb,var(--edge) 12%,transparent),0 20px 40px rgba(0,0,0,.5);font-family:Arial,sans-serif;font-weight:bold;animation:rise .7s .25s ease-out both}
.loss #stats{--edge:var(--pink)}
#stats .hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:18px;border-bottom:2px solid rgba(255,255,255,.12)}
#stats .trk{font-family:"Archivo Black",sans-serif;font-size:36px;letter-spacing:3px}
#stats .meta{font-size:22px;color:#bba7cc;letter-spacing:2px;text-align:right}
#stats table{width:100%;border-collapse:collapse;margin-top:8px}
#stats th{font-size:24px;letter-spacing:4px;color:#bba7cc;text-align:right;padding:14px 0 10px}
#stats th.you{color:var(--green)}#stats th.riv{color:var(--pink)}
#stats td{font-size:32px;padding:12px 0;text-align:right;color:#d9cfe4;border-top:1px solid rgba(255,255,255,.07);font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
#stats td:first-child{text-align:left;font-family:Arial,sans-serif;color:#9d8bb0;font-size:26px;letter-spacing:2px}
#stats tr{animation:rowIn .45s ease-out both}
#stats tr.k td{font-size:42px;color:#fff;padding:16px 0}#stats tr.k td:first-child{font-size:30px;color:#e8dcf2}
#stats td.by,#stats tr.k td.by{color:var(--green);text-shadow:0 0 12px rgba(61,255,138,.7)}
#stats td.br,#stats tr.k td.br{color:var(--pink);text-shadow:0 0 12px rgba(255,45,149,.75)}
.money{position:relative;z-index:3;margin:0 60px;display:flex;justify-content:space-between;align-items:center;height:120px;padding:0 40px;border-radius:24px;background:rgba(14,8,22,.9);border:3px solid #3a2a48;font-family:Arial,sans-serif;font-weight:bold;font-size:40px}
#mVal{font-size:52px;color:var(--green);text-shadow:0 0 16px rgba(61,255,138,.6)}
.loss #mVal{color:var(--red);text-shadow:0 0 16px rgba(255,45,85,.6)}
.btns{position:relative;z-index:3;display:flex;gap:30px;margin:30px 60px 60px}
.btns button{flex:1;height:170px;border-radius:30px;font-family:inherit;font-size:58px;letter-spacing:3px;color:#fff;cursor:pointer}
.sec{background:rgba(14,8,22,.9);border:4px solid #57406a}
.pri{flex:1.3!important;border:0;background:linear-gradient(135deg,var(--pink),#ff5fa8 50%,var(--orange));box-shadow:0 0 30px rgba(255,45,149,.7),inset 0 -8px 0 rgba(0,0,0,.2)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@keyframes fadeIn{from{opacity:0;transform:translateX(60px)}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-30px)}}
