:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--app-h:100dvh;--bg:#0f0d14;--card:#14101cdb;--text:#fff6e8;--muted:#b9aeb0;--accent:#ff4d3d;--accent2:#ffc53d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0;font-family:Rubik,system-ui,sans-serif;overflow:hidden}body{touch-action:none;position:fixed;inset:0}#gl{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui{top:var(--sat);right:var(--sar);bottom:var(--sab);left:var(--sal);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed}button{-webkit-user-select:none;user-select:none;touch-action:manipulation}#ui>*{pointer-events:auto}.card{background:var(--card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);min-width:min(320px,92vw);max-width:min(92vw,480px);max-height:calc(var(--app-h) - var(--sat) - var(--sab) - 24px);text-align:center;border:2px solid #ffffff14;border-radius:24px;padding:28px 28px 24px;animation:.35s cubic-bezier(.2,1.6,.4,1) pop;overflow:auto;box-shadow:0 30px 80px #0009}@keyframes pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.vs-row{justify-content:space-between;align-items:center;gap:18px;display:flex}.fighter-col{cursor:pointer;flex-direction:column;align-items:center;gap:6px;width:120px;display:flex}.fighter-col .ava{object-fit:cover;background:#333;border:4px solid #fff;border-radius:50%;width:84px;height:84px;transition:transform .15s;box-shadow:0 6px #0006}.fighter-col:hover .ava{transform:scale(1.06)}.fighter-col .name{letter-spacing:.04em;text-transform:uppercase;font-size:20px;font-weight:900}.fighter-col .stats{color:var(--muted);font-size:12px}.fighter-col .hint{color:#7a6f72;font-size:10px}.vs{color:var(--accent);text-shadow:0 4px #6a1006;font-size:34px;font-style:italic;font-weight:900}.btn{font:inherit;letter-spacing:.06em;text-transform:uppercase;color:#1a0a06;cursor:pointer;background:linear-gradient(#ffd45c,#ff9a2e);border:none;border-radius:16px;margin-top:22px;padding:16px 30px;font-size:20px;font-weight:900;transition:transform 80ms,box-shadow 80ms;display:inline-block;box-shadow:0 6px #a34a0a,0 12px 24px #0006}.btn:active{transform:translateY(4px);box-shadow:0 2px #a34a0a}.btn.secondary{background:linear-gradient(#fff,#d9d4e6);box-shadow:0 6px #6d6580,0 12px 24px #0006}.btn.secondary:active{box-shadow:0 2px #6d6580}.btn-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.result-title{text-transform:uppercase;font-size:30px;font-weight:900;line-height:1.05}.result-title .who{color:var(--accent2)}.result-sub{color:var(--muted);margin-top:8px;font-size:14px;font-style:italic}.result-meta{justify-content:center;gap:16px;margin-top:14px;font-size:14px;display:flex}.result-meta span{background:#ffffff0f;border-radius:10px;padding:6px 12px}.trophy{filter:drop-shadow(0 6px #0006);margin-bottom:8px;font-size:54px;line-height:1}#banner{top:calc(var(--sat) + 8%);text-transform:uppercase;color:var(--accent2);-webkit-text-stroke:3px #2a0d05;text-shadow:0 8px #2a0d05;pointer-events:none;white-space:nowrap;font-size:clamp(36px,10vw,90px);font-style:italic;font-weight:900;position:fixed;left:50%;transform:translate(-50%)scale(0)}#banner.show{animation:.9s cubic-bezier(.2,1.8,.4,1) forwards bang}@keyframes bang{0%{transform:translate(-50%)scale(0)rotate(-8deg)}60%{transform:translate(-50%)scale(1.15)rotate(3deg)}to{transform:translate(-50%)scale(1)rotate(-2deg)}}#timer{top:calc(var(--sat) + 14px);color:#ffffffb3;pointer-events:none;font-size:18px;font-weight:900;position:fixed;left:50%;transform:translate(-50%)}.hidden{display:none!important}input[type=file]{display:none}@media (width<=480px){.card{border-radius:20px;padding:20px 16px 18px}.vs-row{gap:10px}.fighter-col{width:108px}.fighter-col .ava{width:72px;height:72px}.fighter-col .name{font-size:17px}.vs{font-size:28px}.btn{padding:14px 22px;font-size:17px}.result-title{font-size:26px}}html.mobile .card,html.mobile .menu2 .me,html.mobile .sb,html.mobile .mb,html.mobile .card-row,html.mobile .dir{-webkit-backdrop-filter:none}html.mobile .card{background:#14101cf0}html.mobile .sb,html.mobile .menu2 .me,html.mobile .mb,html.mobile .card-row{background:#14101ce0}html.mobile .fighter-col:hover .ava{transform:none}
