/* açiçuk kombat. One 9:16 screen: full-screen on phones, centred on desktop.
   Shared game styles first, then one block per theme (match, rank, bazaar). */
:root{--bg:#0b0d1a;--panel:#12152a;--line:#262a44;--ink:#f3eee2;--dim:#a6a3b8;--gold:#ffb627;--blue:#2f5bff;--blue2:#7fb2ff;--red:#e0283c;--red2:#ff8a6b;--cream:#f6ead2;--disp:"Unbounded",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);display:grid;place-items:center;overflow:hidden}
button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* ===== game screen, shared ===== */
.phone{position:relative;width:min(100vw,calc(100dvh*9/16));height:min(100dvh,calc(100vw*16/9));overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none;color:#fff;container-type:inline-size;--T:var(--disp)}
.phone canvas.bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.phone .shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.lay{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto auto auto;padding:14px 14px 22px;gap:9px}
.fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.hud{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-family:var(--T)}
.logo{display:grid;line-height:.95}
.logo span{font-size:12px;color:var(--gold);letter-spacing:.06em;display:inline-block}
.logo span.flip{animation:flip .5s ease-in-out}@keyframes flip{50%{transform:rotateX(90deg)}}
.logo b{font-size:24px;background:linear-gradient(90deg,var(--blue2) 0 50%,var(--red2) 50%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000)}
.prog{text-align:right}.prog small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);margin-bottom:6px}
.pips{display:flex;gap:5px;justify-content:flex-end}
.pips i{width:11px;height:11px;transform:rotate(45deg);border:1.5px solid #ffffff55;background:#0006;transition:background .3s}
.pips i.s0{background:var(--blue);border-color:var(--blue2)}.pips i.s1{background:var(--red);border-color:var(--red2)}
.pips i.now{border-color:var(--gold)}
.arena{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.f{all:unset;position:relative;display:grid;justify-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.f0{animation:inL .45s cubic-bezier(.2,1.3,.4,1) both}.f1{animation:inR .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes inL{from{transform:translateX(-120%) rotate(-25deg)}}@keyframes inR{from{transform:translateX(120%) rotate(25deg)}}
.plate{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,1.4,.4,1)}
.plate img{position:relative;width:76%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.f0{--c1:var(--blue);--c2:var(--blue2)}.f1{--c1:var(--red);--c2:var(--red2)}
.f:hover .plate,.f:focus-visible .plate{transform:scale(1.05)}
.nm{font:clamp(12px,4.2cqw,17px)/1.1 var(--T);text-transform:uppercase;text-align:center;text-shadow:0 2px 0 #000}
.vs{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;animation:vsIn .5s .2s cubic-bezier(.2,1.6,.4,1) both;font-family:var(--T)}
@keyframes vsIn{from{transform:translate(-50%,-50%) scale(0)}}
.f.win .plate{animation:win .75s cubic-bezier(.2,1.5,.4,1) forwards}@keyframes win{30%{transform:scale(1.22)}100%{transform:scale(1.1)}}
.f.lose{animation:drop .7s .25s cubic-bezier(.5,0,.9,.4) forwards}.f1.lose{animation-name:dropR}
@keyframes drop{to{transform:translate(-30%,140%) rotate(-40deg);opacity:0}}@keyframes dropR{to{transform:translate(30%,140%) rotate(40deg);opacity:0}}
.timer{height:8px;border-radius:4px;background:#0008;overflow:hidden;box-shadow:0 0 0 1px #ffffff22}
.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blue2),var(--gold),var(--red2));transform-origin:left;transform:scaleX(var(--k,1))}
.timer.hot i{animation:blink .25s steps(2) infinite}@keyframes blink{50%{opacity:.4}}
.tape{display:grid;gap:6px;padding:9px 10px;background:#0b0d1ab8;border-radius:12px;border:1px solid #ffffff1a;font-family:var(--T)}
.tape .row{display:grid;grid-template-columns:42px 1fr 46px 1fr 42px;align-items:center;gap:6px;font-size:11px}
.tape .v{font-size:13px}.tape .v:first-child{color:var(--blue2)}.tape .v:last-child{text-align:right;color:var(--red2)}
.tape .lab{text-align:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#cfc9b8}
.tape .bar{height:9px;display:flex;background:#ffffff12;border-radius:2px;overflow:hidden}.tape .bar.l{justify-content:flex-end}
.tape .bar i{width:0;transition:width .6s cubic-bezier(.2,1.2,.4,1);background:repeating-linear-gradient(90deg,var(--c) 0 7px,transparent 7px 9px)}
.tape .bar.l i{--c:var(--blue)}.tape .bar.r i{--c:var(--red)}.tape .bar i.more{filter:brightness(1.35)}
.tape .sum{text-align:center;font-size:13px;color:var(--cream)}
.bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{font:15px var(--T);text-transform:uppercase;color:#fff;border:0;border-radius:12px;padding:11px 0;cursor:pointer;box-shadow:0 5px 0 var(--d),0 0 0 2px #000;text-shadow:0 2px 0 #0006;transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d),0 0 0 2px #000}
.btn.bl{background:linear-gradient(var(--blue2),var(--blue) 45%);--d:#14247a}.btn.rd{background:linear-gradient(var(--red2),var(--red) 45%);--d:#6b0d1c}
.btn small{display:block;font:700 9px var(--body);letter-spacing:.14em;opacity:.85}
.ticker{display:none}
.sfx{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);z-index:9;font:700 10px var(--body);background:#0008;color:#fff;border:1px solid #ffffff40;border-radius:6px;padding:1px 7px;cursor:pointer}
.gate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;align-content:center;gap:6px;background:#0b0d1aa6;border:0;width:100%;cursor:pointer;color:#fff;font-family:var(--T)}
.gate b{font-size:28px;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.07)}}
.dia{position:absolute;width:12px;height:12px;margin:-6px;transform:rotate(45deg);box-shadow:0 0 8px currentColor}
.flash{position:absolute;inset:0;opacity:0;mix-blend-mode:screen}
.conf{position:absolute;top:0;width:8px;height:13px;margin-left:-4px;border-radius:2px}
.shake2{animation:sh2 .7s}@keyframes sh2{10%{transform:translate(-10px,4px) rotate(-1deg)}25%{transform:translate(9px,-6px) rotate(1deg)}40%{transform:translate(-7px,3px)}55%{transform:translate(6px,-2px)}70%{transform:translate(-3px,2px)}85%{transform:translate(2px,0)}}
.num{position:absolute;font:30px var(--T);text-shadow:0 3px 0 #000;white-space:nowrap}
.shake{animation:sh .35s}@keyframes sh{20%{transform:translate(-5px,2px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}
.banner{position:absolute;inset:0;z-index:7;pointer-events:none;display:grid;place-items:center;align-content:center;font-family:var(--T)}
.banner .sl,.banner .sr{position:absolute;top:calc(50% - 38px);height:76px;width:56%}
.banner .sl{left:0;background:var(--blue);animation:sl .3s cubic-bezier(.2,1.3,.4,1) both;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}
.banner .sr{right:0;background:var(--red);animation:sr .3s cubic-bezier(.2,1.3,.4,1) both;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12% 50%)}
@keyframes sl{from{transform:translateX(-100%)}}@keyframes sr{from{transform:translateX(100%)}}
.banner b{position:relative;font-size:36px;line-height:1;text-transform:uppercase;text-shadow:0 3px 0 #000;-webkit-text-stroke:1.5px #000;animation:pop .35s .2s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap}
.banner small{position:relative;margin-top:6px;font:800 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 0 #000;animation:pop .35s .3s both}
@keyframes pop{from{transform:scale(2.4);opacity:0}}
.champ{grid-column:1/-1;display:grid;justify-items:center;margin-top:20%}.champ .f{pointer-events:none;width:56%;animation:none}.champ .plate{filter:drop-shadow(0 0 26px var(--gold))}.champ .nm{font-size:20px;margin-top:6px}
.stamp{position:absolute;left:0;right:0;top:12%;z-index:7;text-align:center;pointer-events:none;animation:stamp .45s .35s cubic-bezier(.3,1.6,.4,1) both;font-family:var(--T)}
.stamp b{display:inline-block;font-size:clamp(28px,11cqw,44px);line-height:1;color:var(--gold);-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000,0 0 28px var(--gold);transform:rotate(-6deg);animation:glow 1.1s 1s ease-in-out infinite}@keyframes glow{50%{transform:rotate(-6deg) scale(1.08)}}
.stamp small{display:block;margin-top:8px;font:800 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 0 #000}
@keyframes stamp{from{transform:scale(3.5);opacity:0}}

/* ===== Theme: match day (football broadcast) ===== */
.t-match{--T:"Oswald",system-ui,sans-serif}
.t-match .shade{background:linear-gradient(#000a,#0000 20%,#0000 60%,#000c 85%,#000e)}
.t-match .logo b,.t-match .nm,.t-match .btn,.t-match .gate b,.t-match .banner b,.t-match .stamp b{font-weight:700;font-style:italic;letter-spacing:.01em}
.t-match .hud{background:#06091acc;border-radius:6px;padding:6px 8px;box-shadow:inset 0 -3px 0 var(--gold)}
.t-match .pips i{transform:none;border-radius:50%;width:10px;height:10px}
.t-match .plate .rim{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(var(--c1) 0 25%,#fff 0 30%,var(--c1) 0 55%,#fff 0 60%,var(--c1) 0 85%,#fff 0 90%,var(--c1) 0);box-shadow:0 0 0 3px #fff,0 0 0 6px #000,0 12px 30px #000c,0 0 40px var(--c1)}
.t-match .plate img{width:74%;box-shadow:0 0 0 3px #000}
.t-match .vs{background:#fff;color:#000;font-weight:700;font-style:italic;font-size:18px;padding:2px 10px;transform:translate(-50%,-50%) skewX(-12deg);box-shadow:4px 4px 0 var(--gold)}
.t-match .btn{border-radius:4px;transform:skewX(-10deg);font-size:18px}.t-match .btn:active{transform:skewX(-10deg) translateY(4px)}
.t-match .ticker{display:block;overflow:hidden;white-space:nowrap;background:var(--gold);color:#111;font:700 13px/24px "Oswald",sans-serif;border-radius:3px;text-transform:uppercase}
.t-match .ticker span{display:inline-block;padding-left:100%;animation:tick 9s linear infinite}@keyframes tick{to{transform:translateX(-100%)}}
.t-match .banner .sl,.t-match .banner .sr{clip-path:none;height:64px;top:calc(50% - 32px)}
.t-match .banner .sl{background:linear-gradient(90deg,var(--blue),#16237a)}.t-match .banner .sr{background:linear-gradient(90deg,#6b0d1c,var(--red))}
.t-match .tape{border-radius:6px}
.t-match .f.win .plate .rim{animation:spin .6s linear 2}@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Theme: rank up (mobile battle game) ===== */
.t-rank{--T:"Russo One",system-ui,sans-serif}
.t-rank .shade{background:radial-gradient(ellipse at 50% 45%,#0000 40%,#000a),linear-gradient(#000b,#0000 18%,#0000 62%,#000d)}
.t-rank .plate{filter:drop-shadow(0 10px 18px #000c)}
.t-rank .plate .rim{position:absolute;inset:2%;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(160deg,#fff6c8,#d8a428 30%,#7a4c06 55%,#ffe27a 75%,#8a5a08)}
.t-rank .plate .rim::after{content:"";position:absolute;inset:5%;clip-path:inherit;background:linear-gradient(180deg,var(--c2),var(--c1) 60%,#000)}
.t-rank .plate img{width:70%;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.t-rank .f:hover .plate .rim{filter:brightness(1.25)}
.t-rank .vs{font-size:34px;color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 0 18px var(--gold),0 4px 0 #000}
.t-rank .nm{color:#fff;-webkit-text-stroke:.5px #000}
.t-rank .btn{border-radius:6px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);box-shadow:none;border-bottom:4px solid var(--d)}
.t-rank .btn:active{transform:translateY(2px)}
.t-rank .hud .rankb{font-size:10px;color:#ffe27a;letter-spacing:.06em}
.t-rank .pips i{transform:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:0;background:#ffffff30}.t-rank .pips i.s0{background:var(--blue2)}.t-rank .pips i.s1{background:var(--red2)}.t-rank .pips i.now{background:var(--gold)}
.t-rank .banner .sl,.t-rank .banner .sr{background:linear-gradient(90deg,#0000,var(--blue) 30%,var(--blue2))}.t-rank .banner .sr{background:linear-gradient(90deg,var(--red2),var(--red) 70%,#0000)}
.t-rank .banner b{color:#ffe27a}
.t-rank .tape{background:#05071299;border-color:#d8a42866}
.t-rank .f.win .plate{filter:drop-shadow(0 0 22px var(--c2))}

/* ===== Theme: modern bazaar (Uzbek tiles, streetwear stickers) ===== */
.t-bazaar{--T:"Unbounded",system-ui,sans-serif}
.t-bazaar .logo b,.t-bazaar .nm,.t-bazaar .btn,.t-bazaar .gate b,.t-bazaar .banner b,.t-bazaar .stamp b,.t-bazaar .vs{font-weight:900}
.t-bazaar .shade{background:linear-gradient(#0b0d1acc,#0b0d1a10 20%,#0b0d1a10 60%,#0b0d1ae0 84%)}
.t-bazaar .plate{filter:drop-shadow(5px 6px 0 #000)}
.t-bazaar .plate .rim{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,transparent 0 66%,#fff 66% 69%,transparent 69%),repeating-conic-gradient(var(--c1) 0 10deg,#fff 10deg 20deg);box-shadow:0 0 0 5px #fff,0 0 0 8px #000}
.t-bazaar .plate img{width:68%;box-shadow:0 0 0 4px #fff}
.t-bazaar .f0 .plate{transform:rotate(-5deg)}.t-bazaar .f1 .plate{transform:rotate(5deg)}
.t-bazaar .nm{background:#fff;color:#111;text-shadow:none;padding:4px 9px;border-radius:6px;box-shadow:3px 3px 0 #000;transform:rotate(-3deg)}.t-bazaar .f1 .nm{transform:rotate(3deg)}
.t-bazaar .vs{background:var(--gold);color:#111;border:3px solid #000;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:14px;box-shadow:3px 3px 0 #000}
.t-bazaar .btn{border:3px solid #000;box-shadow:4px 4px 0 #000;border-radius:14px}.t-bazaar .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.t-bazaar .tape{background:#fff;color:#111;border:3px solid #000;box-shadow:4px 4px 0 #000}.t-bazaar .tape .lab{color:#555}.t-bazaar .tape .v:first-child{color:var(--blue)}.t-bazaar .tape .v:last-child{color:var(--red)}.t-bazaar .tape .bar{background:#eee}.t-bazaar .tape .sum{color:#111}
.t-bazaar .f.win .plate{animation:winB .75s cubic-bezier(.2,1.5,.4,1) forwards}@keyframes winB{30%{transform:scale(1.22) rotate(-12deg)}100%{transform:scale(1.1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.phone *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

@media (min-width:600px) and (min-height:600px){.phone{border-radius:26px;border:3px solid #000;box-shadow:0 0 0 2px var(--line),0 24px 60px rgba(0,0,0,.6);height:min(94dvh,calc(100vw*16/9));width:min(100vw,calc(94dvh*9/16))}}
.lay{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.prog .bar{width:110px;height:6px;border-radius:3px;background:#ffffff22;overflow:hidden;margin-left:auto}
.prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue2),var(--gold),var(--red2));width:0;transition:width .4s}
.nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font-size:clamp(11px,3.6cqw,15px)}
.pl{font:700 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#ffffffb0;margin-top:-4px;text-align:center}
.old{text-decoration:line-through;opacity:.6;font-size:10px;margin-left:3px}
.tape .est{opacity:.7}
.tape .row{grid-template-columns:48px 1fr 46px 1fr 48px}
/* setup screen */
.setup{position:absolute;inset:0;z-index:8;display:grid;align-content:center;gap:16px;padding:24px max(18px,env(safe-area-inset-left,0px));background:#0b0d1ad0;font-family:var(--T);overflow:auto}
.setup .logo{justify-self:center;text-align:center}.setup .logo b{font-size:38px}.setup .logo span{font-size:14px}
.setup h3{margin:0 0 6px;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:700 13px var(--body);border:1px solid #ffffff33;background:#ffffff10;color:#fff;border-radius:999px;padding:7px 13px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--gold);color:#241500;border-color:var(--gold)}
.chips button:disabled{opacity:.35;cursor:not-allowed}
.setup .go{font:900 20px var(--T);text-transform:uppercase;color:#fff;border:0;border-radius:14px;padding:14px 0;cursor:pointer;background:linear-gradient(90deg,var(--blue),var(--red));box-shadow:0 5px 0 #000,0 0 0 2px #000}
.setup .go:disabled{filter:grayscale(1);opacity:.5}
.setup .note{font:500 11px var(--body);color:var(--dim);text-align:center;margin:0}.setup .note a{color:inherit}
.champ .meta{font:700 12px var(--body);color:var(--cream);text-align:center}
.champ .order{display:inline-block;margin-top:4px;font:800 13px var(--body);color:#241500;background:var(--gold);border-radius:10px;padding:8px 14px;text-decoration:none;box-shadow:0 3px 0 #000}
.champ .runner{font:600 11px var(--body);color:var(--dim);text-align:center}
.phone:has(.setup) .lay{visibility:hidden}