/* MegaBrain O'yin 2 — professional racing UI */
/* v2 TUZATISH (albom/landscape telefon): avval barcha "orientation:landscape"
   qoidalari faqat max-width:700px bilan cheklangan edi. Lekin telefon
   albom holatda bo'lganda VIEWPORT KENGLIGI odatda 700px dan katta bo'ladi
   (masalan iPhone 12/13/14 landscape~812-926px, ko'plab Android telefonlar
   ~850-915px) — shu sabab bu tor qoidalar deyarli hech qaysi haqiqiy
   telefonda ishlamas edi va o'yin siqiq/noqulay chiqardi. Endi barcha
   shunday qoidalar (max-width:900px) VA (max-height:500px) — ikkalasidan
   BIRI to'g'ri kelsa ham ishlaydigan qilib kengaytirildi (xuddi arqon
   tortish o'yinida ishlatilgan, sinovdan o'tgan yechim bilan bir xil). */
#pageOyin2{min-height:100vh;background:linear-gradient(180deg,#f7f4ff 0%,#eef7ff 100%);padding:14px 18px 28px;box-sizing:border-box;color:#172554}
.o2-shell{max-width:1500px;margin:0 auto}
.o2-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:rgba(255,255,255,.94);border:1px solid #e7e4f4;border-radius:22px;padding:12px 16px;box-shadow:0 10px 30px rgba(55,45,120,.08);position:sticky;top:8px;z-index:20}
.o2-head-left,.o2-head-right{display:flex;align-items:center;gap:9px}.o2-title{text-align:center;font-size:clamp(22px,2.4vw,36px);font-weight:900;color:#4c2aa8;white-space:nowrap}.o2-head-btn{border:1px solid #e4e1ef;background:#fff;border-radius:15px;padding:12px 15px;font-weight:800;color:#29315e;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 5px 14px rgba(31,41,88,.06)}.o2-head-btn:hover{transform:translateY(-1px)}.o2-head-btn.danger{color:#dc2626}.o2-head-btn.pause{color:#b45309}
.o2-music-toggle{color:#16a34a}.o2-music-toggle.muted{color:#94a3b8;background:#f1f5f9}
.o2-settings-music-btn{width:100%;border:0;border-radius:10px;padding:11px;font-weight:850;cursor:pointer;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;gap:7px}.o2-settings-music-btn.muted{background:#f1f5f9;color:#64748b}
.o2-config{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:12px 0}.o2-config-card{background:#fff;border:1px solid #e8e5f2;border-radius:17px;padding:11px 13px;box-shadow:0 8px 22px rgba(55,45,120,.06)}.o2-config-card small{display:block;color:#64748b;font-weight:700;font-size:11px;margin-bottom:4px}.o2-config-card strong{font-size:14px;color:#27306a}
/* O'yin 2 boshlangach (body.game-on) sozlamalar ma'lumot kartochkalari
   ("Amal turi", "Xona", "Misol turi", ... "Holat") ekran tepasida
   qolmasligi kerak — faqat header (orqaga/sozlamalar/vaqt) qoladi. */
body.game-on #pageOyin2 .o2-config{display:none!important;}
.o2-track{background:linear-gradient(180deg,#4a5064,#363b48 55%,#2a2e38 100%);border-radius:25px;overflow:hidden;box-shadow:0 15px 35px rgba(34,48,85,.16);border:4px solid #fff;position:relative}.o2-track-top{height:72px;background:linear-gradient(180deg,#bde9ff,#e8f7ff);display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 8px;position:relative;z-index:1}.o2-track-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:repeating-linear-gradient(90deg,#e11d48 0 18px,#f8fafc 18px 36px)}.o2-sign{background:#fff;border:5px solid #1f2937;color:#111827;padding:7px 15px;font-size:18px;font-weight:1000;transform:skew(-5deg);box-shadow:0 5px 0 #374151}.o2-sign.finish{color:#111827}.o2-lanes{padding:14px 22px 18px;display:grid;gap:10px;position:relative}.o2-lane{height:74px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;border-bottom:2px dashed rgba(255,255,255,.28);position:relative}.o2-lane:last-child{border-bottom:0}.o2-lane-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:1000;font-size:17px;box-shadow:0 4px 10px rgba(0,0,0,.25)}.o2-car-wrap{position:relative;height:54px;display:flex;align-items:center}.o2-car{font-size:43px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));transition:transform .45s cubic-bezier(.2,.8,.2,1);display:inline-block;position:relative;z-index:1}.o2-car-emoji{display:inline-block;transform:scaleX(-1)}
.o2-lane .o2-car-wrap::before{display:none}
.o2-lane:nth-child(1) .o2-car-wrap{--o2-lane-glow:#7c3aed}
.o2-lane:nth-child(2) .o2-car-wrap{--o2-lane-glow:#2563eb}
.o2-lane:nth-child(3) .o2-car-wrap{--o2-lane-glow:#16a34a}
.o2-lane:nth-child(4) .o2-car-wrap{--o2-lane-glow:#f59e0b}
/* O'yin boshlangach (body.game-on) mashinalar to'xtab turmasligi
   uchun — har bir mashinada doimiy "harakatlanayotganday" (yengil
   tebranish/silkinish) animatsiya ishlaydi. Bu, to'g'ri javob
   berilganda mashinaning haqiqiy oldinga siljishiga (JS orqali
   .o2-car'ga qo'yiladigan translateX'ga) TA'SIR QILMAYDI — chunki
   animatsiya ICHKI ".o2-car-emoji" elementiga, siljish esa TASHQI
   ".o2-car" elementiga qo'llanadi (ikkalasi alohida-alohida "transform"
   xususiyatidan foydalanadi, shu sabab bir-biriga to'sqinlik qilmaydi).
   Pauza qilinganda (body.o2-paused) yoki o'yin tugaganda animatsiya
   to'xtaydi. */
@keyframes o2CarIdle{0%,100%{transform:scaleX(-1) translateY(0) rotate(0deg);}25%{transform:scaleX(-1) translateY(-2px) rotate(2deg);}75%{transform:scaleX(-1) translateY(1px) rotate(-2deg);}}
@keyframes o2RoadMove{from{background-position:0 0;}to{background-position:-56px 0;}}
.o2-car-wrap{opacity:1;}
body:not(.game-on) .o2-car-wrap,body.o2-paused .o2-car-wrap{background-image:none;}
body.game-on:not(.o2-paused) .o2-car-emoji{animation:o2CarIdle .5s ease-in-out infinite;}
body.game-on:not(.o2-paused) .o2-car-wrap{}.o2-finishline{position:absolute;right:4%;top:72px;bottom:10px;width:18px;background:repeating-linear-gradient(0deg,#fff 0 8px,#111827 8px 16px);opacity:.9}
.o2-game-area{margin-top:13px;display:grid;grid-template-columns:1fr;gap:12px}.o2-player-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.o2-player-grid.o2-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.o2-player-grid.o2-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.o2-player-grid.o2-count-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.o2-player-grid.o2-count-1{grid-template-columns:minmax(280px,560px);justify-content:center;}.o2-player-card{background:#fff;border:1px solid #e6e5ef;border-radius:22px;padding:13px;box-shadow:0 10px 28px rgba(45,43,95,.09);min-width:0}.o2-player-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.o2-player-name{display:flex;align-items:center;gap:8px;font-weight:950;font-size:16px}.o2-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f1eaff;font-size:21px}.o2-stat{font-size:12px;font-weight:900;color:#64748b}.o2-work{display:flex;flex-direction:column;gap:8px}.o2-example-wrap{position:relative;flex:1 1 auto;min-height:0}.o2-example{background:linear-gradient(180deg,#fbfaff,#fff);border:2px solid #e5ddff;border-radius:18px;min-height:235px;height:100%;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.o2-column{--o2-rows:2;font-weight:950;font-size:clamp(27px,3vw,42px);line-height:1.05;text-align:center;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:5.5em}.o2-column .o2-num-row{display:grid;grid-template-columns:1.2em auto;justify-content:center;align-items:center;min-height:calc(150px / max(2,var(--o2-rows)));}.o2-column .o2-op{width:1.2em;text-align:right;padding-right:.12em;font-size:.72em}.o2-column .bar{height:3px;background:#111827;margin:6px auto;border-radius:5px;width:100%}.o2-result-placeholder{display:none}.o2-answer-panel{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}.o2-answer-label{font-size:12px;font-weight:900;color:#4c2aa8}.o2-answer{width:100%;box-sizing:border-box;border:2px solid #ddd6fe;border-radius:14px;padding:12px 14px;font-size:22px;font-weight:900;outline:none;color:#172554;background:#fff;cursor:pointer}.o2-answer::placeholder{color:#a5a0c9;font-size:14px;font-weight:800}.o2-answer:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.11)}
.o2-keypad-overlay{position:absolute;inset:0;background:#fff;border-radius:18px;box-shadow:0 14px 34px rgba(45,43,95,.22);border:2px solid #ddd6fe;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;box-sizing:border-box;opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .16s ease,transform .16s ease;z-index:6}
.o2-keypad-overlay.open{opacity:1;pointer-events:auto;transform:scale(1)}
.o2-kp-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:#f1eefb;color:#5b21b6;font-weight:900;cursor:pointer;line-height:1}.o2-submit{border:0;border-radius:10px;padding:10px;font-weight:950;background:#2563eb;color:#fff;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center}.o2-submit:disabled{opacity:.5;cursor:not-allowed}.o2-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.o2-key{border:1px solid #e4ddf5;background:#f7f4ff;border-radius:10px;padding:10px;font-size:17px;font-weight:900;color:#312e81;cursor:pointer}.o2-key-back{background:#dc2626;border-color:#dc2626;color:#fff}.o2-feedback{min-height:20px;text-align:center;font-size:12px;font-weight:900}.o2-participants{background:#fff;border:1px solid #e6e5ef;border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(45,43,95,.07)}.o2-part-title{font-weight:950;font-size:17px;margin-bottom:10px}.o2-part-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.o2-mini{border:1px solid #e8e6f2;border-radius:16px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}.o2-mini.empty{opacity:.5}.o2-mini-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:950}.o2-mini-name{font-weight:900;font-size:13px}.o2-mini-meta{font-size:11px;color:#64748b}.o2-rule{margin-top:10px;background:#f1f7ff;border:1px solid #bfdbfe;border-radius:14px;padding:11px;font-weight:800;color:#1e3a8a;text-align:center}
.o2-settings{position:fixed;inset:0;background:rgba(20,15,45,.45);backdrop-filter:blur(8px);z-index:100;display:grid;place-items:center;padding:18px}.o2-settings-card{width:min(760px,100%);background:#fff;border-radius:26px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.o2-settings-head{display:flex;justify-content:space-between;align-items:center}.o2-settings-title{font-size:24px;font-weight:950;color:#4c2aa8}.o2-close{border:0;background:#f1f5f9;border-radius:12px;padding:8px 12px;cursor:pointer;font-weight:900}.o2-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}.o2-field{border:1px solid #e5e7eb;border-radius:16px;padding:12px}.o2-field label{display:block;font-size:12px;font-weight:850;color:#64748b;margin-bottom:7px}.o2-field select{width:100%;border:0;background:#f8fafc;border-radius:10px;padding:11px;font-weight:850;color:#1e293b}.o2-player-count{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.o2-count{border:2px solid #e5e7eb;background:#fff;border-radius:12px;padding:11px;font-weight:950;cursor:pointer}.o2-count.active{border-color:#7c3aed;background:#f3e8ff;color:#5b21b6}.o2-count:disabled,.o2-count.o2-count-disabled{opacity:.35;cursor:not-allowed;background:#f1f5f9;border-color:#e5e7eb;color:#94a3b8}.o2-start{width:100%;border:0;border-radius:15px;padding:14px;background:linear-gradient(90deg,#6d28d9,#4f46e5);color:#fff;font-weight:950;font-size:16px;cursor:pointer}

/* O'yin 2 — natijalar / g'olib ekrani. Poyga tugagach (barcha
   ishtirokchilar FINISH chizig'iga yetganda) shu oyna chiqadi:
   kim 1-o'rin (kubok 🏆), 2-, 3-, 4-o'rin ekanligi finishga yetib
   kelish TARTIBI bo'yicha ko'rsatiladi. */
.o2-results{position:fixed;inset:0;background:rgba(20,15,45,.55);backdrop-filter:blur(8px);z-index:110;display:none;place-items:center;padding:18px;}
.o2-results[style*="display: grid"],.o2-results[style*="display:grid"]{display:grid;}
.o2-results-card{width:min(520px,100%);max-height:min(88vh,720px);overflow:auto;background:#fff;border-radius:26px;padding:26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.3);text-align:center;box-sizing:border-box;}
.o2-results-trophy{font-size:56px;line-height:1;margin-bottom:4px;}
.o2-results-title{font-size:24px;font-weight:950;color:#4c2aa8;margin-bottom:4px;}
.o2-results-winner{font-size:15px;font-weight:800;color:#64748b;margin-bottom:18px;}
.o2-results-winner span{color:#b45309;font-weight:950;}
.o2-results-list{display:flex;flex-direction:column;gap:9px;text-align:left;margin-bottom:18px;}
.o2-result-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:11px;border:1px solid #e6e5ef;border-radius:16px;padding:10px 12px;background:#fafaff;}
.o2-result-row.winner{background:linear-gradient(90deg,#fff7e6,#fffdf5);border-color:#fbbf24;box-shadow:0 6px 18px rgba(251,191,36,.25);}
.o2-result-rank{font-size:22px;width:34px;text-align:center;font-weight:950;}
.o2-result-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;}
.o2-result-name{font-weight:950;font-size:14px;}
.o2-result-stats{font-size:11.5px;color:#64748b;font-weight:800;margin-top:2px;}
.o2-results-actions{display:flex;gap:10px;}
.o2-results-btn{flex:1;border:0;border-radius:14px;padding:12px;font-weight:950;font-size:14px;cursor:pointer;}
.o2-results-btn.again{background:linear-gradient(90deg,#6d28d9,#4f46e5);color:#fff;}
.o2-results-btn.exit{background:#f1f5f9;color:#334155;}
@media(max-width:700px){
  .o2-results-card{padding:18px 14px;border-radius:20px;}
  .o2-results-trophy{font-size:44px;}
  .o2-results-title{font-size:19px;}
  .o2-result-avatar{width:32px;height:32px;font-size:16px;}
  .o2-result-name{font-size:12.5px;}
  .o2-result-stats{font-size:10.5px;}
}
@media(max-width:900px){#pageOyin2{padding:8px}.o2-header{grid-template-columns:auto 1fr auto;padding:8px 10px;border-radius:16px}.o2-head-btn{padding:9px 10px}.o2-head-btn span.txt{display:none}.o2-config{grid-template-columns:repeat(3,1fr)}.o2-track-top{height:52px}.o2-lane{height:62px;grid-template-columns:36px 1fr;gap:7px}.o2-car{font-size:34px}.o2-finishline{top:52px}.o2-lanes{padding:6px 9px 10px}.o2-player-grid.o2-count-4{grid-template-columns:repeat(2,1fr)}.o2-example{min-height:205px}.o2-part-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){#pageOyin2{padding:5px 6px 12px}.o2-title{font-size:18px}.o2-header{gap:5px}.o2-head-left,.o2-head-right{gap:4px}.o2-head-btn{border-radius:11px;padding:8px}.o2-config{grid-template-columns:repeat(2,1fr);gap:6px}.o2-config-card{padding:8px}.o2-config-card strong{font-size:12px}.o2-track{border-radius:17px}.o2-track-top{height:42px;padding:0 10px 6px}.o2-sign{font-size:12px;padding:5px 8px;border-width:3px;box-shadow:3px 3px 0 #374151}.o2-lane{height:48px;grid-template-columns:28px 1fr}.o2-lane-num{width:27px;height:27px;font-size:12px}.o2-car{font-size:25px}.o2-finishline{top:42px}.o2-player-grid{gap:6px}.o2-player-grid.o2-count-4{grid-template-columns:1fr 1fr;gap:6px}.o2-player-card{padding:8px;border-radius:15px}.o2-player-head{margin-bottom:6px}.o2-player-name{font-size:12px}.o2-avatar{width:27px;height:27px;font-size:15px}.o2-stat{font-size:9px}.o2-work{gap:6px}.o2-example{min-height:145px;padding:9px}.o2-column{font-size:clamp(21px,5vw,30px)}.o2-answer{font-size:19px;padding:8px}.o2-key{padding:7px;font-size:14px}.o2-submit{padding:8px;font-size:12px}.o2-participants{padding:8px;border-radius:15px}.o2-part-grid{grid-template-columns:repeat(2,1fr);gap:5px}.o2-mini{padding:7px;grid-template-columns:auto 1fr;gap:6px}.o2-mini-meta{grid-column:2}.o2-rule{font-size:11px;padding:8px}.o2-settings-card{padding:15px;border-radius:20px}.o2-form-grid{grid-template-columns:1fr}.o2-settings-title{font-size:19px}}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){#pageOyin2{min-height:100dvh;overflow:hidden}.o2-header{position:relative;top:0}.o2-config{display:none}.o2-track{margin-top:5px}.o2-track-top{height:30px}.o2-lane{height:40px}.o2-car{font-size:23px}.o2-finishline{top:30px}.o2-game-area{margin-top:5px}.o2-player-card{padding:5px}.o2-example{min-height:92px}.o2-work{gap:5px}.o2-key{padding:4px}.o2-answer{padding:5px;font-size:17px}.o2-submit{padding:5px}.o2-participants{display:none}.o2-player-head{margin-bottom:3px}.o2-avatar{width:22px;height:22px}.o2-player-name{font-size:10px}}


/* Oyin 2 — 2..10 qatorli ustunli misolni kartochka ichiga toliq sigdirish */
.o2-example{overflow:hidden;min-height:235px;}
.o2-example:has(.o2-column){contain:layout paint;}
@media (min-width:701px){.o2-example{min-height:clamp(190px,24vh,320px);}.o2-column{font-size:clamp(22px,2.6vw,40px);}.o2-column[style*="--o2-rows: 10"],.o2-column[style*="--o2-rows:10"]{font-size:22px;}.o2-column[style*="--o2-rows: 9"],.o2-column[style*="--o2-rows:9"]{font-size:24px;}.o2-column[style*="--o2-rows: 8"],.o2-column[style*="--o2-rows:8"]{font-size:25px;}.o2-column[style*="--o2-rows: 7"],.o2-column[style*="--o2-rows:7"]{font-size:27px;}}
@media(max-width:900px){.o2-config{grid-template-columns:repeat(4,1fr);}}
@media(max-width:700px){.o2-config{grid-template-columns:repeat(2,1fr)}.o2-example{min-height:160px;padding:7px}.o2-column{font-size:clamp(18px,5vw,29px);line-height:1}.o2-column .o2-num-row{min-height:calc(140px / max(2,var(--o2-rows)));}.o2-column[style*="--o2-rows: 10"],.o2-column[style*="--o2-rows:10"]{font-size:16px}.o2-column[style*="--o2-rows: 9"],.o2-column[style*="--o2-rows:9"]{font-size:17px}.o2-column[style*="--o2-rows: 8"],.o2-column[style*="--o2-rows:8"]{font-size:18px}.o2-column[style*="--o2-rows: 7"],.o2-column[style*="--o2-rows:7"]{font-size:19px}}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){.o2-example{min-height:88px}.o2-column{font-size:clamp(14px,3.1vh,23px)}.o2-column .o2-num-row{min-height:calc(76px / max(2,var(--o2-rows)));}.o2-answer-panel{gap:4px}.o2-answer{padding:4px;font-size:16px}.o2-submit{padding:4px}.o2-key{padding:3px}}

/* FIX04: qatorlar soniga qarab aniq o'lcham — 2..10 qator kartochka ichida */
.o2-column .o2-num-row{min-height:0;height:1em;}
.o2-column.rows-2{font-size:clamp(28px,3vw,42px)}
.o2-column.rows-3{font-size:clamp(26px,2.8vw,39px)}
.o2-column.rows-4{font-size:clamp(24px,2.6vw,36px)}
.o2-column.rows-5{font-size:clamp(22px,2.4vw,33px)}
.o2-column.rows-6{font-size:clamp(21px,2.2vw,31px)}
.o2-column.rows-7{font-size:clamp(20px,2.1vw,29px)}
.o2-column.rows-8{font-size:clamp(19px,2vw,27px)}
.o2-column.rows-9{font-size:clamp(18px,1.9vw,25px)}
.o2-column.rows-10{font-size:clamp(17px,1.8vw,23px)}
@media(max-width:700px){
  .o2-column.rows-2{font-size:28px}.o2-column.rows-3{font-size:25px}.o2-column.rows-4{font-size:23px}.o2-column.rows-5{font-size:21px}.o2-column.rows-6{font-size:20px}.o2-column.rows-7{font-size:19px}.o2-column.rows-8{font-size:18px}.o2-column.rows-9{font-size:17px}.o2-column.rows-10{font-size:16px}
  .o2-column .bar{margin:4px auto}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  .o2-column.rows-2{font-size:22px}.o2-column.rows-3{font-size:20px}.o2-column.rows-4{font-size:18px}.o2-column.rows-5{font-size:17px}.o2-column.rows-6{font-size:16px}.o2-column.rows-7{font-size:15px}.o2-column.rows-8{font-size:14px}.o2-column.rows-9{font-size:13px}.o2-column.rows-10{font-size:12px}
  .o2-example{min-height:108px;padding:4px}
  .o2-column{line-height:.9}
  .o2-column .bar{height:2px;margin:2px 0}
}

/* FIX08 — O'yin 2: mobil ekran va global navigatsiya.
   Global "Orqaga" tugmasi Oyin 2 sahifasida doimiy yashirin qoladi —
   bu sahifaning o'zining ichki "Chiqish" tugmasi bor.
   FIX65: pastki tab-bar (bottomTabbar) endi FAQAT o'yin FAOL ishlab
   turganda (body'da "game-on" klassi ham bor bo'lganda) yashiriladi —
   sozlamalar ekranida (o'yin hali boshlanmagan) tab-bar ko'rinadi,
   o'yin boshlangach yashirinadi, tugab sozlamalarga qaytilganda
   yana ko'rinadi. */
body.oyin2-page #globalHomeBtn{display:none !important;}
body.oyin2-page.game-on #bottomTabbar,
body.oyin2-page.game-on #btSheetBackdrop{display:none !important;}
body.oyin2-page{overflow-x:hidden;}
body.oyin2-page #pageOyin2{min-height:100dvh;height:100dvh;overflow:hidden;}
body.oyin2-page #pageOyin2 .o2-shell{height:100dvh;min-height:0;overflow:auto;box-sizing:border-box;}

/* ============================================================
   O'yin 2 — BUTUN SAHIFA doim bitta ekranga (100dvh) to'liq
   sig'adi, HECH QANDAY holatda pastga aylantirib ko'rish (scroll)
   kerak bo'lmaydi — bu barcha ekran o'lchamlari (telefon, planshet,
   noutbuk, katta monitor) uchun amal qiladi, faqat mobil tor
   ekranlar uchun emas. Yechim: butun sahifa flex-ustun (column)
   qilib qurilib, balandligi 100dvh bilan qattiq belgilanadi;
   ichidagi bo'limlar (sarlavha, poyga yo'li, o'yinchi kartalari)
   flex orqali bo'sh joyni o'zaro bo'lishib oladi va zarur bo'lsa
   (past ekranlarda) o'lchamlari clamp() yordamida avtomatik
   kichrayadi — hech biri sahifadan tashqariga chiqib ketmaydi. */
body.oyin2-page #pageOyin2{
  height:100dvh !important;min-height:100dvh !important;max-height:100dvh !important;
  overflow:hidden !important;box-sizing:border-box !important;
  display:flex !important;flex-direction:column !important;
  padding:clamp(6px,1.4vh,14px) clamp(8px,1.6vw,18px) !important;
}
body.oyin2-page #pageOyin2 .o2-shell{
  flex:1 1 auto !important;min-height:0 !important;height:auto !important;
  display:flex !important;flex-direction:column !important;overflow:hidden !important;
  gap:clamp(4px,1vh,12px) !important;
}
body.oyin2-page #pageOyin2 .o2-header{flex:0 0 auto !important;position:static !important;top:auto !important;}
body.oyin2-page #pageOyin2 .o2-config{flex:0 0 auto !important;margin:0 !important;}
body.oyin2-page #pageOyin2 .o2-track{flex:0 0 auto !important;}
body.oyin2-page #pageOyin2 .o2-track-top{height:clamp(42px,8vh,96px) !important;}
body.oyin2-page #pageOyin2 .o2-lanes{padding:clamp(5px,1.3vh,18px) clamp(10px,2vw,26px) !important;gap:clamp(4px,1.1vh,11px) !important;}
body.oyin2-page #pageOyin2 .o2-lane{height:clamp(38px,7.4vh,98px) !important;}
body.oyin2-page #pageOyin2 .o2-lane-num{width:clamp(26px,5vh,50px) !important;height:clamp(26px,5vh,50px) !important;font-size:clamp(12px,2.1vh,21px) !important;}
body.oyin2-page #pageOyin2 .o2-car{font-size:clamp(20px,4.8vh,56px) !important;}
body.oyin2-page #pageOyin2 .o2-finishline{top:clamp(42px,8vh,96px) !important;}
body.oyin2-page #pageOyin2 .o2-game-area{
  flex:1 1 auto !important;min-height:0 !important;margin-top:clamp(4px,1vh,13px) !important;
  display:flex !important;flex-direction:column !important;overflow:hidden !important;
  gap:clamp(4px,1vh,12px) !important;
}
body.oyin2-page #pageOyin2 .o2-player-grid{flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;}
body.oyin2-page #pageOyin2 .o2-player-card{display:flex !important;flex-direction:column !important;min-height:0 !important;overflow:hidden !important;padding:clamp(6px,1.2vh,13px) !important;}
body.oyin2-page #pageOyin2 .o2-player-head{flex:0 0 auto !important;margin-bottom:clamp(3px,.8vh,10px) !important;}
body.oyin2-page #pageOyin2 .o2-work{flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;gap:clamp(4px,1vh,10px) !important;}
body.oyin2-page #pageOyin2 .o2-example-wrap{flex:1 1 auto !important;min-height:0 !important;}
body.oyin2-page #pageOyin2 .o2-example{height:100% !important;min-height:0 !important;padding:clamp(4px,1vh,16px) !important;}
body.oyin2-page #pageOyin2 .o2-answer-panel{flex:0 0 auto !important;gap:clamp(4px,.8vh,9px) !important;}
body.oyin2-page #pageOyin2 .o2-answer{padding:clamp(6px,1vh,12px) 14px !important;font-size:clamp(15px,2.6vh,25px) !important;}
body.oyin2-page #pageOyin2 .o2-key{padding:clamp(4px,.9vh,10px) !important;font-size:clamp(12px,1.8vh,17px) !important;}
body.oyin2-page #pageOyin2 .o2-submit{padding:clamp(6px,1vh,12px) !important;font-size:clamp(12px,1.7vh,16px) !important;}
body.oyin2-page #pageOyin2 .o2-feedback{min-height:0 !important;}
body.oyin2-page #pageOyin2 .o2-participants{
  flex:0 1 auto !important;min-height:0 !important;overflow-y:auto !important;
  max-height:clamp(56px,15vh,140px) !important;padding:clamp(6px,1.2vh,14px) !important;
}
body.oyin2-page #pageOyin2 .o2-part-title{margin-bottom:clamp(3px,.8vh,10px) !important;}

#o2Settings{display:none;}
#o2Settings[style*="display: grid"],
#o2Settings[style*="display:grid"]{display:grid;}

@media(max-width:700px){
  #o2Settings{position:fixed;inset:0;padding:8px;align-items:center;justify-items:center;overflow:hidden;}
  #o2Settings .o2-settings-card{width:100%;max-width:520px;max-height:calc(100dvh - 16px);overflow:auto;padding:14px;border-radius:18px;box-sizing:border-box;}
  #o2Settings .o2-settings-head{position:sticky;top:0;background:#fff;z-index:2;padding-bottom:8px;}
  #o2Settings .o2-form-grid{grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;}
  #o2Settings .o2-field{padding:8px;border-radius:12px;}
  #o2Settings .o2-field label{font-size:10px;margin-bottom:4px;}
  #o2Settings .o2-field select{padding:8px;font-size:12px;}
  #o2Settings .o2-count{padding:8px 5px;font-size:13px;}
  #o2Settings .o2-start{padding:11px;font-size:14px;}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  #o2Settings{padding:5px;}
  #o2Settings .o2-settings-card{max-height:calc(100dvh - 10px);padding:9px;border-radius:14px;}
  #o2Settings .o2-settings-title{font-size:16px;}
  #o2Settings .o2-form-grid{grid-template-columns:repeat(3,1fr);gap:5px;margin:6px 0;}
  #o2Settings .o2-field{padding:6px;}
  #o2Settings .o2-field label{font-size:9px;}
  #o2Settings .o2-field select{padding:6px;font-size:11px;}
  #o2Settings .o2-count{padding:6px 4px;font-size:11px;}
  #o2Settings .o2-start{padding:8px;font-size:12px;}
}


/* ================================================================
   O'YIN 2 — 2026 MODERN RACE SKIN
   Faqat #pageOyin2 ichidagi poyga yo'li va mashinalar.
   Boshqa bo'limlarga ta'sir qilmaydi.
   ================================================================ */
body.oyin2-page #pageOyin2 .o2-track{
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% -30%,rgba(61,104,255,.24),transparent 48%),
    linear-gradient(180deg,#121a2d 0%,#080d18 100%)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.oyin2-page #pageOyin2 .o2-track-top{
  height:clamp(48px,8vh,86px)!important;
  padding:0 clamp(10px,2vw,26px) 8px!important;
  background:
    linear-gradient(180deg,rgba(22,32,58,.98),rgba(9,14,26,.98))!important;
  align-items:center!important;
}
body.oyin2-page #pageOyin2 .o2-track-top:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% 45%,rgba(0,217,255,.18),transparent 25%),radial-gradient(circle at 85% 45%,rgba(255,0,163,.14),transparent 25%);
  pointer-events:none;
}
body.oyin2-page #pageOyin2 .o2-track-top:after{height:4px!important;background:linear-gradient(90deg,#00d9ff,#7c3aed,#ff2da6,#ffb000)!important;box-shadow:0 0 15px rgba(0,217,255,.55)!important}
body.oyin2-page #pageOyin2 .o2-sign{
  position:relative;z-index:2;border:1px solid rgba(255,255,255,.16)!important;border-radius:12px!important;
  padding:7px 14px!important;background:rgba(255,255,255,.07)!important;color:#f8fbff!important;
  font-size:clamp(11px,1.7vh,18px)!important;letter-spacing:1.5px;box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 6px 20px rgba(0,0,0,.2)!important;
}
body.oyin2-page #pageOyin2 .o2-sign.finish{border-color:rgba(255,190,0,.55)!important;color:#ffd66b!important}
body.oyin2-page #pageOyin2 .o2-lanes{
  position:relative!important;padding:clamp(8px,1.5vh,18px) clamp(10px,2vw,28px)!important;
  gap:clamp(5px,1vh,10px)!important;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 70px),
    linear-gradient(180deg,#151d2e,#0d1422)!important;
}
body.oyin2-page #pageOyin2 .o2-lanes:before{
  content:"";position:absolute;inset:0 0 0 60px;pointer-events:none;opacity:.65;
  background:repeating-linear-gradient(90deg,transparent 0 68px,rgba(94,214,255,.08) 68px 70px,transparent 70px 140px);
}
body.oyin2-page #pageOyin2 .o2-lane{
  height:clamp(46px,7.2vh,82px)!important;grid-template-columns:clamp(28px,4.8vh,44px) 1fr!important;
  gap:clamp(7px,1vw,13px)!important;border-bottom:0!important;position:relative!important;
}
body.oyin2-page #pageOyin2 .o2-lane:after{
  content:"";position:absolute;left:clamp(40px,5vh,55px);right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
}
body.oyin2-page #pageOyin2 .o2-lane-num{
  width:clamp(28px,4.8vh,44px)!important;height:clamp(28px,4.8vh,44px)!important;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 18px color-mix(in srgb,var(--o2-player-color,#7c3aed) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
body.oyin2-page #pageOyin2 .o2-car-wrap{
  height:100%!important;animation:none!important;overflow:visible!important;position:relative!important;
}
body.oyin2-page #pageOyin2 .o2-car-wrap:before{
  content:"";position:absolute;left:0;top:50%;width:75px;height:9px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(70,215,255,.12),rgba(255,255,255,.42));filter:blur(3px);opacity:.55;
}
body.oyin2-page #pageOyin2 .o2-car{
  width:clamp(66px,10vh,112px)!important;height:clamp(34px,5.4vh,58px)!important;
  font-size:0!important;position:absolute!important;left:0;top:50%;transform:translateY(-50%);display:block!important;
  filter:drop-shadow(0 9px 7px rgba(0,0,0,.55));transition:transform .55s cubic-bezier(.16,.84,.22,1)!important;
  z-index:4;animation:none!important;
}
.o2-car-body{position:absolute;inset:10% 0 12%;border-radius:18px 28px 10px 13px;background:linear-gradient(180deg,#f8fbff 0%,#b9c6d9 33%,#46556d 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.75),inset 0 -4px 7px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.45)}
.o2-car-body:before{content:"";position:absolute;left:23%;top:-28%;width:50%;height:55%;border-radius:45% 55% 15% 15%;background:linear-gradient(145deg,#27364f,#8da4be 50%,#172236);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 2px rgba(255,255,255,.45)}
.o2-car-body:after{content:"";position:absolute;left:10%;right:10%;bottom:4%;height:16%;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 45%,rgba(255,255,255,.2));}
.o2-car-red .o2-car-body{background:linear-gradient(180deg,#ff5c62,#df1828 42%,#690d18)}
.o2-car-blue .o2-car-body{background:linear-gradient(180deg,#52d8ff,#1676df 42%,#073c8f)}
.o2-car-green .o2-car-body{background:linear-gradient(180deg,#75f69d,#18a84c 42%,#075b2a)}
.o2-car-gold .o2-car-body{background:linear-gradient(180deg,#ffe36c,#f3a900 42%,#895400)}
.o2-wheel{position:absolute;bottom:-12%;width:20%;height:43%;border-radius:50%;background:radial-gradient(circle,#bfc9d8 0 18%,#111827 20% 56%,#05070b 58%);box-shadow:0 2px 4px rgba(0,0,0,.7)}
.o2-wheel.w1{left:13%}.o2-wheel.w2{right:13%}
.o2-window{position:absolute;top:3%;width:22%;height:33%;background:linear-gradient(135deg,#dff8ff,#17334d);border-radius:8px 10px 3px 3px;opacity:.9;border:1px solid rgba(255,255,255,.28)}
.o2-window.w1{left:31%}.o2-window.w2{left:54%}
.o2-light{position:absolute;top:37%;width:9%;height:13%;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(170,240,255,.95)}.o2-light.l1{right:5%}.o2-light.l2{right:17%}
.o2-spoiler{position:absolute;right:2%;top:0;width:16%;height:12%;border-radius:3px;background:#121a27;box-shadow:0 2px 2px rgba(0,0,0,.45)}
body.oyin2-page #pageOyin2 .o2-lane:nth-child(1) .o2-car-wrap{--o2-player-color:#ef3340}body.oyin2-page #pageOyin2 .o2-lane:nth-child(2) .o2-car-wrap{--o2-player-color:#1595ff}body.oyin2-page #pageOyin2 .o2-lane:nth-child(3) .o2-car-wrap{--o2-player-color:#28d66b}body.oyin2-page #pageOyin2 .o2-lane:nth-child(4) .o2-car-wrap{--o2-player-color:#ffc21a}
body.oyin2-page #pageOyin2 .o2-finishline{top:clamp(48px,8vh,86px)!important;bottom:0!important;width:12px!important;right:4%!important;background:repeating-linear-gradient(0deg,#fff 0 8px,#111827 8px 16px)!important;box-shadow:0 0 15px rgba(255,255,255,.3)!important;z-index:3}
.o2-fx{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}.o2-firework{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 18px 5px #ffd54a;animation:o2Burst .25s ease-out both}.o2-spark{position:absolute;left:3px;top:3px;width:4px;height:18px;border-radius:5px;background:linear-gradient(#fff,#ffd23f,transparent);transform-origin:50% 0;animation:o2Spark .9s cubic-bezier(.1,.7,.2,1) forwards}.o2-winner-pop{position:absolute;padding:7px 12px;border-radius:999px;background:rgba(8,13,24,.9);border:1px solid rgba(255,214,80,.65);color:#ffd95a;font-weight:1000;font-size:14px;letter-spacing:.5px;box-shadow:0 8px 25px rgba(0,0,0,.35);animation:o2Pop 1.4s ease-out both;white-space:nowrap}
@keyframes o2Spark{0%{opacity:1;transform:translate(0,0) rotate(0) scaleY(.6)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(30deg) scaleY(1)}}
@keyframes o2Burst{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes o2Pop{0%{opacity:0;transform:translateY(10px) scale(.75)}18%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(.95)}}

/* Telefon: sahifa viewportga qattiq moslashadi, ichki gorizontal scroll yo'q. */
@media(max-width:700px){
 body.oyin2-page #pageOyin2{padding:5px!important}
 body.oyin2-page #pageOyin2 .o2-shell{width:100%!important;gap:5px!important}
 body.oyin2-page #pageOyin2 .o2-header{border-radius:14px!important;padding:6px 7px!important;gap:5px!important}
 body.oyin2-page #pageOyin2 .o2-head-btn{padding:8px 9px!important;border-radius:10px!important;font-size:12px!important}
 body.oyin2-page #pageOyin2 .o2-title{font-size:15px!important;overflow:hidden;text-overflow:ellipsis}
 body.oyin2-page #pageOyin2 .o2-title{white-space:nowrap}
 body.oyin2-page #pageOyin2 .o2-head-btn .txt{display:none}
 body.oyin2-page #pageOyin2 .o2-config{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
 body.oyin2-page #pageOyin2 .o2-config-card{padding:5px 6px!important;border-radius:9px!important;min-width:0!important}
 body.oyin2-page #pageOyin2 .o2-config-card small{font-size:8px!important}.o2-config-card strong{font-size:10px!important;white-space:nowrap}
 body.oyin2-page #pageOyin2 .o2-track{border-radius:16px!important}
 body.oyin2-page #pageOyin2 .o2-track-top{height:40px!important;padding-bottom:5px!important}
 body.oyin2-page #pageOyin2 .o2-sign{padding:4px 8px!important;border-radius:8px!important;font-size:9px!important}
 body.oyin2-page #pageOyin2 .o2-lanes{padding:6px 8px!important;gap:3px!important}
 body.oyin2-page #pageOyin2 .o2-lane{height:clamp(38px,7.2vh,58px)!important;grid-template-columns:28px 1fr!important;gap:6px!important}
 body.oyin2-page #pageOyin2 .o2-lane:after{left:34px}.o2-car{max-width:88px}
 body.oyin2-page #pageOyin2 .o2-car{width:clamp(58px,15vw,88px)!important;height:clamp(30px,7vw,46px)!important}
 body.oyin2-page #pageOyin2 .o2-car-body{border-radius:13px 20px 8px 10px}
 body.oyin2-page #pageOyin2 .o2-game-area{margin-top:3px!important;gap:3px!important}
 body.oyin2-page #pageOyin2 .o2-player-grid{gap:5px!important}
 body.oyin2-page #pageOyin2 .o2-player-card{border-radius:13px!important;padding:6px!important}
 body.oyin2-page #pageOyin2 .o2-player-name{font-size:11px!important}.o2-avatar{width:25px!important;height:25px!important;font-size:14px!important}
 body.oyin2-page #pageOyin2 .o2-stat{font-size:8px!important}
 body.oyin2-page #pageOyin2 .o2-example{border-radius:10px!important}
 body.oyin2-page #pageOyin2 .o2-answer-label{font-size:9px!important}.o2-feedback{font-size:9px!important}
 body.oyin2-page #pageOyin2 .o2-answer{border-radius:9px!important;padding:6px 8px!important;font-size:16px!important}
}
@media(max-width:700px) and (orientation:portrait){
 body.oyin2-page #pageOyin2 .o2-track{flex:0 0 auto!important}
 body.oyin2-page #pageOyin2 .o2-player-grid.o2-count-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
 body.oyin2-page #pageOyin2 .o2-header{padding:4px 6px!important}
 body.oyin2-page #pageOyin2 .o2-config-card{padding:3px 5px!important}
 body.oyin2-page #pageOyin2 .o2-track-top{height:32px!important}
 body.oyin2-page #pageOyin2 .o2-lane{height:clamp(32px,8vh,48px)!important}
 body.oyin2-page #pageOyin2 .o2-car{height:clamp(25px,6vh,38px)!important;width:clamp(50px,13vw,75px)!important}
 /* Albom holatda kenglik yetarli, balandlik esa tanqis — shu sabab
    o'yinchi kartalari 2x2 (tik uyum) emas, BITTA qatorga yonma-yon
    joylashtiriladi (4 ta bo'lsa ham), aks holda kartalar ekrandan
    balandlikda sig'may qoladi. */
 body.oyin2-page #pageOyin2 .o2-player-grid.o2-count-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 body.oyin2-page #pageOyin2 .o2-player-grid.o2-count-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.oyin2-page #pageOyin2 .o2-player-card{padding:4px!important;border-radius:11px!important}
 body.oyin2-page #pageOyin2 .o2-player-name{font-size:10px!important}
 body.oyin2-page #pageOyin2 .o2-avatar{width:19px!important;height:19px!important;font-size:12px!important}
 body.oyin2-page #pageOyin2 .o2-stat{font-size:7.5px!important}
}

/* O'yin 2 — YORUG' RACE THEME / PUSHTI ISHTIROKCHI KARTALARI */
body.oyin2-page #pageOyin2 .o2-track{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.98),transparent 34%),
    linear-gradient(180deg,#f9fcff 0%,#eef6ff 48%,#e7f0fb 100%) !important;
  border:3px solid #ffffff !important;
  box-shadow:0 18px 42px rgba(88,112,155,.18), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.oyin2-page #pageOyin2 .o2-track-top{
  background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%) !important;
}
body.oyin2-page #pageOyin2 .o2-track-top::after{
  background:repeating-linear-gradient(90deg,#ff6fa8 0 18px,#ffffff 18px 36px) !important;
}
body.oyin2-page #pageOyin2 .o2-lanes{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(226,239,253,.38)) !important;
}
body.oyin2-page #pageOyin2 .o2-lane{
  border-bottom:2px dashed rgba(104,126,160,.30) !important;
}
body.oyin2-page #pageOyin2 .o2-lane:last-child{border-bottom:0 !important}
body.oyin2-page #pageOyin2 .o2-lane::before{
  content:"";
  position:absolute;
  left:clamp(42px,5vw,64px);
  right:4%;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:99px;
  background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 40px);
  opacity:.85;
  z-index:0;
}
body.oyin2-page #pageOyin2 .o2-lane::after{
  opacity:.95 !important;
  z-index:1 !important;
}
body.oyin2-page #pageOyin2 .o2-car-wrap{z-index:2 !important}
body.oyin2-page #pageOyin2 .o2-finishline{
  background:repeating-linear-gradient(0deg,#ff72ab 0 8px,#ffffff 8px 16px) !important;
  box-shadow:0 0 18px rgba(255,105,169,.38) !important;
}
body.oyin2-page #pageOyin2 .o2-player-card{
  background:linear-gradient(145deg,#fff7fb 0%,#ffe8f2 52%,#ffddea 100%) !important;
  border:1px solid #f5a9c7 !important;
  box-shadow:0 12px 30px rgba(218,86,139,.15),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.oyin2-page #pageOyin2 .o2-player-card .o2-example{
  background:linear-gradient(180deg,#ffffff 0%,#fff8fb 100%) !important;
  border-color:#f6bdd3 !important;
}
body.oyin2-page #pageOyin2 .o2-player-card .o2-answer{
  background:#ffffff !important;
  border-color:#efb0cb !important;
}
body.oyin2-page #pageOyin2 .o2-player-card .o2-answer:focus{
  border-color:#ec5f9a !important;
  box-shadow:0 0 0 4px rgba(236,95,154,.12) !important;
}
body.oyin2-page #pageOyin2 .o2-answer-label{color:#c43d78 !important}
body.oyin2-page #pageOyin2 .o2-participants{
  background:linear-gradient(145deg,#fff8fb,#ffeef5) !important;
  border-color:#f4bfd4 !important;
}
body.oyin2-page #pageOyin2 .o2-mini{
  background:rgba(255,255,255,.78) !important;
  border-color:#f1bfd2 !important;
}
body.oyin2-page #pageOyin2 .o2-rule{
  background:#fff5fa !important;
  border-color:#f4bfd4 !important;
  color:#9d315f !important;
}
body.oyin2-page #pageOyin2 .o2-sign{
  border-color:#e8a1bf !important;
  color:#a72f61 !important;
  box-shadow:0 4px 0 #f2c4d7 !important;
}
body.oyin2-page #pageOyin2 .o2-sign.finish{color:#b12d66 !important}

@media(max-width:700px){
  body.oyin2-page #pageOyin2 .o2-player-card{
    border-radius:13px !important;
    box-shadow:0 7px 18px rgba(218,86,139,.13),inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
}

/* O'YIN 2 — FINAL REAL CAR + REALISTIC ASPHALT THEME */
body.oyin2-page #pageOyin2 .o2-track{
  background:linear-gradient(180deg,#565c68 0%,#3c414c 60%,#2b2f37 100%) !important;
  border:3px solid #ffffff !important;
  box-shadow:0 18px 45px rgba(20,24,34,.35) !important;
}
body.oyin2-page #pageOyin2 .o2-track-top{
  background:linear-gradient(180deg,#bde9ff 0%,#e8f7ff 100%) !important;
}
body.oyin2-page #pageOyin2 .o2-track-top:after{
  background:repeating-linear-gradient(90deg,#e11d48 0 18px,#f8fafc 18px 36px) !important;
}
body.oyin2-page #pageOyin2 .o2-sign{
  background:#ffffff !important;color:#111827 !important;border:3px solid #1f2937 !important;
  box-shadow:0 4px 0 #374151 !important;
}
body.oyin2-page #pageOyin2 .o2-sign.finish{color:#111827 !important}
body.oyin2-page #pageOyin2 .o2-lanes{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 74px),
    linear-gradient(180deg,#4d525e 0%,#3a3f49 100%) !important;
  padding:clamp(10px,1.7vh,18px) clamp(10px,2vw,28px) !important;
}
body.oyin2-page #pageOyin2 .o2-lanes:before{
  background:repeating-linear-gradient(90deg,transparent 0 68px,rgba(0,0,0,.15) 68px 70px,transparent 70px 140px) !important;
}
body.oyin2-page #pageOyin2 .o2-lane{border-bottom:2px dashed rgba(255,255,255,.22) !important}

body.oyin2-page #pageOyin2 .o2-lane-num{box-shadow:0 4px 12px rgba(71,85,105,.18),inset 0 1px 0 rgba(255,255,255,.5) !important}

/* Realistic photographic car assets generated from the modern race artwork. */
body.oyin2-page #pageOyin2 .o2-car{
  width:clamp(73px,9.1vw,124px) !important;
  height:clamp(38px,4.68vw,57px) !important;
  font-size:0 !important;
  display:block !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:drop-shadow(0 5px 4px rgba(30,41,59,.16)) !important;
  --o2-x:0px;
  left:var(--o2-x) !important;
  transform:translateY(-50%) !important;
  transition:left .32s cubic-bezier(.16,.84,.22,1) !important;
  animation:o2CarCruise .22s ease-in-out infinite !important;
  will-change:left,transform;
}
body.oyin2-page #pageOyin2 .o2-car-red{background-image:url('../assets/images/oyin2_cars/car-red.png') !important}
body.oyin2-page #pageOyin2 .o2-car-blue{background-image:url('../assets/images/oyin2_cars/car-blue.png') !important}
body.oyin2-page #pageOyin2 .o2-car-green{background-image:url('../assets/images/oyin2_cars/car-green.png') !important}
body.oyin2-page #pageOyin2 .o2-car-gold{background-image:url('../assets/images/oyin2_cars/car-gold.png') !important}
body.oyin2-page #pageOyin2 .o2-car-body{display:none !important}
/* Har bir yo'lak ichida to'liq balandlikni egallagan "ustunsimon"
   chiziqlar o'rniga — YO'LAK MARKAZIDAN o'tuvchi YAGONA gorizontal
   uzuq-uzuq (dashed) chiziq: aynan yo'l o'rtasidagi chizig'iga
   o'xshaydi va mashina harakatlanayotganda (game-on, pauza emas) chapdan
   o'ngga siljib turadi — shu orqali "mashina yurib ketayotgani" ANIQ
   bilinadi. O'yin to'xtagan/pauza qilingan payt chiziq harakatsiz va
   butunlay yashirin (background-image:none) bo'lib qoladi.
*/
body:not(.game-on) #pageOyin2 .o2-car,body.o2-paused #pageOyin2 .o2-car{animation:none !important}
@keyframes o2CarCruise{0%,100%{transform:translateY(-50%) scale(1) rotate(0deg)}50%{transform:translateY(calc(-50% - 2px)) scale(1.012) rotate(.35deg)}}
@keyframes o2CarDrive{0%{transform:translateY(-50%) scale(1) rotate(0deg)}18%{transform:translateY(calc(-50% - 2px)) scale(.97) rotate(-.8deg)}55%{transform:translateY(calc(-50% - 1px)) scale(1.055) rotate(.9deg)}100%{transform:translateY(-50%) scale(1) rotate(0deg)}}
body.oyin2-page #pageOyin2 .o2-car.o2-drive{animation:o2CarDrive .34s cubic-bezier(.18,.8,.22,1) both !important}

/* FINISH chizig'i yonida YANGI, alohida uzuq-uzuq chiziq — u FAQAT
   poyga borayotganda (game-on, pauza qilinmagan) ko'rinadi va
   siljib/animatsiyalanib turadi, aks holda butunlay yashirin bo'ladi.
   Shu bilan o'yinchiga "mashinalar hozir harakatlanmoqda va finishga
   yaqinlashmoqda" degan qo'shimcha, aniq signal beriladi. */
body.oyin2-page #pageOyin2 .o2-finishline:before{
  content:"" !important;position:absolute !important;left:-30px !important;
  top:50% !important;height:3px !important;width:28px !important;transform:translateY(-50%) !important;
  background:repeating-linear-gradient(90deg,#ff72ab 0 8px,transparent 8px 16px) !important;
  opacity:0 !important;pointer-events:none !important;
}
body.game-on:not(.o2-paused) #pageOyin2 .o2-finishline:before{opacity:0 !important;animation:none !important}



/* Pink participant cards. */
body.oyin2-page #pageOyin2 .o2-player-card{
  background:linear-gradient(145deg,#fff7fb 0%,#ffe4f1 100%) !important;
  border:2px solid #f9a8d4 !important;
  box-shadow:0 12px 28px rgba(236,72,153,.12),inset 0 1px 0 #fff !important;
}
body.oyin2-page #pageOyin2 .o2-player-name span:last-child{color:#be185d !important}
body.oyin2-page #pageOyin2 .o2-avatar{background:#fbcfe8 !important}
body.oyin2-page #pageOyin2 .o2-example{background:#ffffff !important;border-color:#f9a8d4 !important}
body.oyin2-page #pageOyin2 .o2-answer{border-color:#f9a8d4 !important;background:#fff !important}
body.oyin2-page #pageOyin2 .o2-answer:focus{border-color:#ec4899 !important;box-shadow:0 0 0 4px rgba(236,72,153,.12) !important}
body.oyin2-page #pageOyin2 .o2-answer-label{color:#be185d !important}
body.oyin2-page #pageOyin2 .o2-submit{background:linear-gradient(90deg,#2563eb,#1d4ed8) !important;box-shadow:0 4px 10px rgba(37,99,235,.28) !important}
body.oyin2-page #pageOyin2 .o2-key{background:#fff1f7 !important;border-color:#fbcfe8 !important;color:#9d174d !important}
body.oyin2-page #pageOyin2 .o2-key-back{background:linear-gradient(90deg,#ef4444,#dc2626) !important;border-color:#dc2626 !important;color:#fff !important}

/* Remove the vertical column/rectangle pattern on the race track and
   replace it with a horizontal dashed line under each lane that keeps
   scrolling while the race is running — this reads as motion ("the
   car is moving") without touching the real forward progress made on
   correct answers. */
body.oyin2-page #pageOyin2 .o2-lanes{background:linear-gradient(180deg,#565c68 0%,#3c414c 55%,#2b2f37 100%) !important}
body.oyin2-page #pageOyin2 .o2-lanes:before{content:none !important;display:none !important;background:none !important}
body.oyin2-page #pageOyin2 .o2-lane{border-bottom:0 !important}
body.oyin2-page #pageOyin2 .o2-lane:after{
  content:"" !important;position:absolute !important;left:clamp(40px,5vh,55px) !important;right:0 !important;bottom:0 !important;height:3px !important;
  opacity:.85 !important;
}

/* O'yin AYNAN boshlangan (sanoq tugab, poyga start bo'lgan) ondagi
   "launch" effekti — har bir mashina bir zumda oldinga aniq "otilib"
   ketadi (lurch) va orqasida qisqa yorqin chaqnash chizig'i chiqadi.
   Bu bilan o'yinchiga mashinalar harakatlanib ketayotgani darhol,
   shubhasiz ko'rinadi — avvalgi sokin/kam sezilarli tebranishdan farqli
   o'laroq. Faqat qisqa vaqt (JS orqali .o2-launch klassi ~750ms
   qo'yiladi/olib tashlanadi) davomida ishlaydi, keyin oddiy yugurish
   (cruise) animatsiyasiga qaytadi. */
@keyframes o2CarLaunchLurch{
  0%{transform:translateY(-50%) scale(1) rotate(0deg);}
  20%{transform:translateY(calc(-50% + 1px)) scale(.96) rotate(-1.5deg);}
  55%{transform:translateY(calc(-50% - 2px)) scale(1.08) rotate(1.5deg);}
  80%{transform:translateY(calc(-50% - 1px)) scale(1.02) rotate(-.5deg);}
  100%{transform:translateY(-50%) scale(1) rotate(0deg);}
}
body.oyin2-page #pageOyin2 .o2-car-wrap.o2-launch .o2-car{
  animation:o2CarLaunchLurch .75s cubic-bezier(.18,.85,.24,1.1) !important;
}
body.oyin2-page #pageOyin2 .o2-car-wrap.o2-launch:after{
  content:"" !important;position:absolute !important;inset:-10px -36px !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 45%,transparent 75%) !important;
  animation:o2LaunchFlash .6s ease-out !important;pointer-events:none !important;z-index:5 !important;
}
@keyframes o2LaunchFlash{
  0%{opacity:0;transform:translateX(-45%);}
  25%{opacity:1;}
  100%{opacity:0;transform:translateX(65%);}
}
/* Old ekranlarda (background-image asosidagi klassik emoji ko'rinishida)
   ham xuddi shu lurch animatsiyasi ishlaydi. */
.o2-car-wrap.o2-launch .o2-car{animation:o2CarLaunchLurch .75s cubic-bezier(.18,.85,.24,1.1) !important;}

/* Fixed defaults: mixed (+/-) and 1-digit numbers. */
body.oyin2-page #pageOyin2 #o2Op:disabled,
body.oyin2-page #pageOyin2 #o2Digits:disabled{opacity:1 !important;color:#1e293b !important;background:#fff1f7 !important;cursor:default !important}

/* Keep the configuration cards hidden only while the race itself is active. */
body.game-on #pageOyin2 .o2-config{display:none !important}

@media(max-width:700px){
  body.oyin2-page #pageOyin2 .o2-car{width:clamp(62px,16.25vw,90px) !important;height:clamp(31px,7.8vw,44px) !important}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  body.oyin2-page #pageOyin2 .o2-car{width:clamp(57px,12.35vw,79px) !important;height:clamp(27px,5.85vw,39px) !important}
}

/* O'YIN 2 — FAQAT YO'L CHIZIG'I HARAKATI
   Maydon/trassa joyida qoladi. Mashina ostidagi yo'l chiziqlari
   o'yin boshlanganda uzluksiz siljib, mashina yurayotgandek ko'rinish beradi.
   Javob, misol va mashina harakat logikasiga tegilmaydi. */
body.oyin2-page #pageOyin2 .o2-car-wrap{
  background-image:repeating-linear-gradient(90deg,#334155 0 16px,transparent 16px 34px) !important;
  background-size:50px 4px !important;
  background-position:0 center;
  background-repeat:repeat-x !important;
  animation:none !important;
}
@keyframes o2RoadDashDrive{
  from{background-position:0 center;}
  to{background-position:-50px center;}
}
body.game-on:not(.o2-paused) #pageOyin2 .o2-car-wrap{
  animation:o2RoadDashDrive .32s linear infinite !important;
}
body:not(.game-on) #pageOyin2 .o2-car-wrap,
body.o2-paused #pageOyin2 .o2-car-wrap{
  animation:none !important;
}

/* O'YIN 2 — haqiqiy yo'l oqimi: maydonning o'zi qimirlamaydi,
   faqat yo'l chiziqlari orqaga oqib, mashina yurayotgan effektini beradi. */
body.oyin2-page #pageOyin2 .o2-lane:after{
  background-image:repeating-linear-gradient(90deg,#f8fafc 0 16px,transparent 16px 34px) !important;
  background-size:auto 3px !important;
  background-position:0 0;
  background-repeat:repeat-x !important;
  opacity:.75 !important;
}
body.game-on:not(.o2-paused) #pageOyin2 .o2-lane:after{
  animation:o2RoadFlow .38s linear infinite !important;
}
body:not(.game-on) #pageOyin2 .o2-lane:after,
body.o2-paused #pageOyin2 .o2-lane:after{
  animation:none !important;
  background-position:0 0;
}
@keyframes o2RoadFlow{
  from{background-position:0 0;}
  to{background-position:-50px 0;}
}

/* Mashina o'yin boshlanishi bilan doimiy, juda yengil tebranib yuradi. */
body.game-on:not(.o2-paused) #pageOyin2 .o2-car:not(.o2-drive){
  animation:o2CarCruise .32s ease-in-out infinite !important;
}
body:not(.game-on) #pageOyin2 .o2-car,
body.o2-paused #pageOyin2 .o2-car{
  animation:none !important;
}

/* ================================================================
   ARQON TORTISH — yangi o'yin. O'yin 2 / Poyga CSS'iga tegmaydi.
   ================================================================ */
#pageOyin2.arqon-active .o2-track,
#pageOyin2.arqon-active .o2-game-area{display:none!important}
#pageOyin2.arqon-active .o2-config{display:none!important}
#pageOyin2.arqon-active .arqon-game{display:flex!important}
#pageOyin2 .arqon-game{display:none;flex-direction:column;gap:12px;min-height:calc(100dvh - 110px)}
.arqon-scorebar{display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;gap:12px;background:#eef0f3;border-radius:22px;padding:12px 24px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.arqon-team-card{min-width:0}.arqon-team-card.right{text-align:right}.arqon-team-name{font-size:22px;font-weight:800;color:#111827}.arqon-team-card strong{display:block;font-size:42px;line-height:1;color:#087ea8;margin-top:3px}.arqon-clock{justify-self:center;display:flex;align-items:center;gap:8px;color:#087ea8;font-size:28px;font-weight:900}.arqon-clock strong{font-variant-numeric:tabular-nums}
.arqon-board{display:grid;grid-template-columns:minmax(170px,200px) minmax(620px,1fr) minmax(170px,200px);gap:14px;align-items:stretch;flex:1;min-height:0}
.arqon-side-card{background:rgba(255,255,255,.96);border:3px solid #e5e7eb;border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.08);min-height:260px;display:flex;flex-direction:column;justify-content:center}
.arqon-side-card.left{border-color:#60a5fa}.arqon-side-card.right{border-color:#f87171}.arqon-side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.arqon-player-name{font-weight:900;font-size:18px}.arqon-side-score{font-weight:900;font-size:20px}.arqon-example-box{background:#fff;border:3px solid #f9a8d4;border-radius:18px;padding:14px;min-height:145px;display:flex;align-items:center;justify-content:center}.arqon-example-text{font-size:clamp(28px,3vw,48px);font-weight:900;line-height:1.12;text-align:center;white-space:pre-line}.arqon-answer-label{display:block;font-size:12px;font-weight:800;color:#be185d;margin:10px 0 5px}.arqon-answer{width:100%;box-sizing:border-box;border:3px solid #f9a8d4;border-radius:12px;padding:10px 12px;font-size:24px;font-weight:800;text-align:center;background:#fff}.arqon-answer:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.12)}.arqon-check{margin-top:8px;border:0;border-radius:12px;padding:10px;width:100%;font-size:18px;font-weight:900;background:#2563eb;color:#fff;cursor:pointer}.arqon-feedback{text-align:center;min-height:22px;font-weight:800;margin-top:6px}
.arqon-center{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:24px;background:#f8fafc;border:3px solid #e5e7eb;box-shadow:0 10px 28px rgba(15,23,42,.08);min-height:420px;--arqon-shift:0%}.arqon-scene{width:100%;height:100%;max-height:100%;object-fit:contain;display:block;transition:transform .38s cubic-bezier(.18,.8,.22,1)}.arqon-center-line{position:absolute;top:4%;bottom:4%;left:50%;border-left:3px dashed rgba(17,24,39,.55);pointer-events:none}.arqon-rope-marker{display:none;position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:18px;height:92%;pointer-events:none;transition:left .42s cubic-bezier(.18,.8,.22,1)}.arqon-rope-marker span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transition:transform .2s}.arqon-center.pull-left .arqon-scene{transform:translateX(1.2%)}.arqon-center.pull-right .arqon-scene{transform:translateX(-1.2%)}.arqon-center.pull-left .arqon-rope-marker span{transform:translate(-50%,-50%) rotate(-10deg)}.arqon-center.pull-right .arqon-rope-marker span{transform:translate(-50%,-50%) rotate(10deg)}
.arqon-hint{text-align:center;background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:9px;font-weight:700;color:#475569}

/* ARQON TORTISH — g'olib bo'lganda butun ekranga chiqadigan kubokli oyna. */
.arqon-results-card{position:relative;overflow:hidden}
.arqon-results-trophy{font-size:74px;animation:arqonTrophyPop .6s cubic-bezier(.18,.8,.22,1)}
.arqon-results-winner-name{font-size:26px;font-weight:950;margin:2px 0 8px;color:#b45309}
.arqon-results-card.team-left .arqon-results-winner-name{color:#1d4ed8}
.arqon-results-card.team-right .arqon-results-winner-name{color:#dc2626}
.arqon-results-sub{font-size:14px;font-weight:700;color:#64748b;margin-bottom:18px}
@keyframes arqonTrophyPop{
  0%{transform:scale(.3) rotate(-15deg);opacity:0}
  60%{transform:scale(1.15) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
@media(max-width:700px){
  .arqon-results-trophy{font-size:56px}
  .arqon-results-winner-name{font-size:21px}
}
#pageOyin2.arqon-active .o2-header .o2-title{font-size:22px}
#pageOyin2.arqon-active .o2-header .o2-head-btn.pause{display:none}
#pageOyin2 .o2-header #arqonMusicHeaderBtn{display:none}
#pageOyin2.arqon-active .o2-header #o2MusicHeaderBtn{display:none}
#pageOyin2.arqon-active .o2-header #arqonMusicHeaderBtn{display:flex}
#pageOyin2.arqon-active .o2-header{margin-bottom:0}
body.arqon-playing #pageOyin2 .arqon-game{display:flex!important}
body.arqon-playing #pageOyin2 .o2-track,body.arqon-playing #pageOyin2 .o2-game-area{display:none!important}
@keyframes arqonCorrectPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.arqon-side-card.correct-pulse{animation:arqonCorrectPulse .35s ease}
@media(max-width:1000px){.arqon-board{grid-template-columns:170px minmax(420px,1fr) 170px}.arqon-scorebar{grid-template-columns:1fr 130px 1fr}.arqon-team-name{font-size:17px}.arqon-team-card strong{font-size:32px}.arqon-side-card{padding:10px}.arqon-example-box{padding:10px}}
@media(max-width:700px){#pageOyin2 .arqon-game{gap:6px;min-height:calc(100dvh - 70px)}.arqon-scorebar{grid-template-columns:1fr 90px 1fr;padding:7px 10px;border-radius:14px}.arqon-team-name{font-size:12px}.arqon-team-card strong{font-size:26px}.arqon-clock{font-size:20px}.arqon-board{grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto;gap:6px}.arqon-center{grid-column:1 / -1;grid-row:1;min-height:230px;max-height:40dvh;border-radius:15px}.arqon-side-card{min-height:0;padding:8px;border-radius:14px}.arqon-side-card.left{grid-column:1;grid-row:2}.arqon-side-card.right{grid-column:2;grid-row:2}.arqon-side-head{margin-bottom:5px}.arqon-player-name{font-size:12px}.arqon-side-score{font-size:15px}.arqon-example-box{min-height:80px;border-width:2px;border-radius:11px;padding:7px}.arqon-example-text{font-size:clamp(22px,7vw,34px)}.arqon-answer{padding:7px;font-size:20px;border-width:2px}.arqon-check{padding:7px;font-size:14px}.arqon-hint{font-size:11px;padding:7px}.arqon-center-line{border-width:2px}.arqon-rope-marker span{font-size:24px}}

/* ================================================================
   ARQON TORTISH — jonli arena dizayni v2
   Static rasm o'rniga CSS personajlar + haqiqiy tortish animatsiyasi.
   Faqat Arqon tortish rejimiga ta'sir qiladi.
   ================================================================ */
.arqon-center{background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 58%,#e8edf5 100%);border-color:#d7dfec;isolation:isolate}
.arqon-arena-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),rgba(231,240,251,.65) 48%,rgba(210,220,235,.6));z-index:0}
.arqon-arena-bg:after{content:"";position:absolute;left:4%;right:4%;bottom:10%;height:18%;border-radius:50%;background:radial-gradient(ellipse,rgba(100,116,139,.16),transparent 68%)}
/* Milliy naqsh — arena tagida o'zbek gilam/suzani uslubidagi rangli
   chizma yo'lak (ikat/girih ohangidagi takrorlanuvchi naqsh). */
.arqon-arena-bg:before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;z-index:0;opacity:.65;background:repeating-linear-gradient(90deg,#1c64d1 0 16px,#f2b705 16px 24px,#e0331e 24px 40px,#f2b705 40px 48px)}
.arqon-center-line{z-index:1;border-left:3px dashed rgba(71,85,105,.38);top:7%;bottom:7%}
.arqon-rope{position:absolute;left:7%;right:7%;top:53%;height:20px;z-index:4;transform-origin:center;transition:transform .5s cubic-bezier(.18,.8,.22,1),filter .3s}
.arqon-rope:before{content:"";position:absolute;left:0;right:0;top:4px;height:13px;border-radius:999px;background:repeating-linear-gradient(0deg,#a86b32 0 3px,#d79a55 3px 6px,#8b572a 6px 9px);box-shadow:0 3px 5px rgba(65,38,18,.25),inset 0 1px rgba(255,255,255,.35)}
.arqon-rope-knot{position:absolute;left:50%;top:-8px;width:34px;height:36px;transform:translateX(-50%);border-radius:8px;background:#e23d2f;box-shadow:0 4px 7px rgba(127,29,29,.25);z-index:2}
.arqon-rope-tail{position:absolute;top:6px;width:92px;height:7px;background:#70431f;border-radius:999px;opacity:.85}.arqon-rope-tail.left{left:-24px;transform:rotate(-12deg)}.arqon-rope-tail.right{right:-24px;transform:rotate(12deg)}
.arqon-people{position:absolute;inset:0;z-index:6;pointer-events:none}
/* Odamlar (arqon tortayotgan ishtirokchilar) — edugames.uz saytidagi
   video sahnaga o'xshab, markazda ANIQ va KATTA ko'rinishi uchun
   o'lcham ~45% kattalashtirildi (104x190 -> 150x276) va .arqon-center
   ning min-height'i shunga mos ravishda oshirildi (320 -> 420), aks
   holda kattalashgan figuralar konteyner ichida kesilib qolar edi. */
.arqon-person{position:absolute;width:150px;height:276px;bottom:7%;transform-origin:50% 88%;transition:transform .45s cubic-bezier(.18,.8,.22,1);filter:drop-shadow(0 10px 7px rgba(15,23,42,.16))}
.arqon-person .tug-figure{width:100%;height:100%;display:block;overflow:visible}
.arqon-person:after{content:"";position:absolute;left:38px;top:263px;width:75px;height:16px;border-radius:50%;background:rgba(15,23,42,.16);filter:blur(1px)}
.left-team .person-1{left:5%;transform:rotate(-11deg)}.left-team .person-2{left:23%;bottom:10%;transform:rotate(-15deg) scale(.93)}
.right-team .person-3{right:23%;bottom:10%;transform:rotate(-15deg) scale(.93)}.right-team .person-4{right:5%;transform:rotate(-11deg)}
.arqon-center.pull-left .arqon-rope{transform:translateX(-5%) rotate(-.5deg);filter:drop-shadow(-5px 2px 2px rgba(30,64,175,.15))}.arqon-center.pull-right .arqon-rope{transform:translateX(5%) rotate(.5deg);filter:drop-shadow(5px 2px 2px rgba(220,38,38,.15))}
.arqon-center.pull-left .left-team .person-1{animation:ropePullLeft1 .62s ease-in-out infinite}.arqon-center.pull-left .left-team .person-2{animation:ropePullLeft2 .62s ease-in-out infinite .06s}.arqon-center.pull-left .right-team .person-3,.arqon-center.pull-left .right-team .person-4{animation:ropeResistRight .72s ease-in-out infinite}
.arqon-center.pull-right .right-team .person-3{animation:ropePullRight1 .62s ease-in-out infinite}.arqon-center.pull-right .right-team .person-4{animation:ropePullRight2 .62s ease-in-out infinite .06s}.arqon-center.pull-right .left-team .person-1,.arqon-center.pull-right .left-team .person-2{animation:ropeResistLeft .72s ease-in-out infinite}
.arqon-center.rope-hit .arqon-rope-knot{animation:ropeKnot .3s ease}.arqon-center.rope-hit .arqon-pull-badge{animation:badgePop .7s ease}
.arqon-pull-badge{position:absolute;left:50%;top:12%;transform:translateX(-50%) scale(.7);opacity:0;z-index:7;background:rgba(15,23,42,.9);color:#fff;padding:8px 16px;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:.3px;pointer-events:none}
.arqon-dust{position:absolute;bottom:8%;width:110px;height:35px;z-index:2;opacity:0;background:radial-gradient(ellipse,rgba(148,163,184,.38),transparent 68%);filter:blur(2px)}.dust-left{left:5%}.dust-right{right:5%}
.arqon-center.pull-left .dust-left,.arqon-center.pull-right .dust-right{animation:dustKick .6s ease-in-out infinite}
@keyframes ropePullLeft1{0%,100%{transform:rotate(-13deg) translateX(0)}50%{transform:rotate(-18deg) translateX(-8px) translateY(3px)}}
@keyframes ropePullLeft2{0%,100%{transform:rotate(-18deg) scale(.93) translateX(0)}50%{transform:rotate(-23deg) scale(.93) translateX(-10px) translateY(4px)}}
@keyframes ropeResistRight{0%,100%{transform:rotate(-18deg) translateX(0)}50%{transform:rotate(-12deg) translateX(6px) translateY(-2px)}}
@keyframes ropeResistLeft{0%,100%{transform:rotate(-13deg) translateX(0)}50%{transform:rotate(-8deg) translateX(6px) translateY(-2px)}}
@keyframes ropePullRight1{0%,100%{transform:rotate(-13deg) translateX(0)}50%{transform:rotate(-18deg) translateX(-8px) translateY(3px)}}
@keyframes ropePullRight2{0%,100%{transform:rotate(-18deg) scale(.93) translateX(0)}50%{transform:rotate(-23deg) scale(.93) translateX(-10px) translateY(4px)}}
@keyframes ropeKnot{0%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.35) rotate(4deg)}100%{transform:translateX(-50%) scale(1)}}
@keyframes badgePop{0%{opacity:0;transform:translateX(-50%) scale(.7)}20%{opacity:1;transform:translateX(-50%) scale(1.05)}75%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.9)}}
@keyframes dustKick{0%,100%{opacity:0;transform:scale(.8)}45%{opacity:1;transform:scale(1.15)}}
.arqon-center.pull-left .arqon-rope-marker{transition:left .5s cubic-bezier(.18,.8,.22,1)}
@media(max-width:700px){.arqon-person{width:88px;height:170px;transform-origin:50% 88%;bottom:6%;}.arqon-person:after{left:22px;top:158px;width:42px;height:11px}.arqon-rope{left:8%;right:8%;top:55%;height:15px}.arqon-rope:before{height:10px;top:3px}.arqon-rope-knot{width:25px;height:27px;top:-5px}.arqon-pull-badge{top:7%;font-size:10px;padding:6px 10px}.left-team .person-1{left:4%}.left-team .person-2{left:20%}.right-team .person-3{right:20%}.right-team .person-4{right:4%}}

/* ARQON TORTISH — misol va javob oynasi O'YIN 2 bilan aynan bir xil.
   Tashqi arqon paneli faqat konteyner vazifasini bajaradi. */
#pageOyin2.arqon-active .arqon-side-card{
  padding:0 !important;
  overflow:hidden !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}
#pageOyin2.arqon-active .arqon-o2-card{
  width:100% !important;
  height:100% !important;
  min-height:320px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
#pageOyin2.arqon-active .arqon-o2-card .o2-work{
  min-height:0 !important;
}
#pageOyin2.arqon-active .arqon-o2-card .o2-example-wrap{
  min-height:0 !important;
}
#pageOyin2.arqon-active .arqon-o2-card .o2-example{
  height:100% !important;
  min-height:0 !important;
}
#pageOyin2.arqon-active .arqon-o2-card .o2-answer{
  cursor:pointer !important;
}
#pageOyin2.arqon-active .arqon-o2-card .o2-keypad-overlay{
  z-index:20 !important;
}
#pageOyin2.arqon-active .arqon-o2-card.correct-pulse{
  animation:arqonCorrectPulse .42s ease-out !important;
}

@media(max-width:900px){
  #pageOyin2.arqon-active .arqon-o2-card{min-height:300px !important}
}
@media(max-width:700px){
  #pageOyin2.arqon-active .arqon-side-card{border-radius:15px !important}
  #pageOyin2.arqon-active .arqon-o2-card{min-height:0 !important;border-radius:15px !important;padding:8px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-example{padding:9px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-answer{font-size:19px !important;padding:8px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-key{padding:7px !important;font-size:14px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-submit{padding:8px !important;font-size:12px !important}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  #pageOyin2.arqon-active .arqon-o2-card{padding:5px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-example{padding:4px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-answer{padding:4px !important;font-size:16px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-key{padding:3px !important}
  #pageOyin2.arqon-active .arqon-o2-card .o2-submit{padding:4px !important}
}

/* 2026-09-09 — Arqon tortishda ×/÷ misoli: bitta qatorli, gorizontal
   ko'rinish (masalan "45×4" yoki "60÷3"), ustunli (rows-2) ko'rinish
   o'rniga. Shrift o'lchamlari .o2-column.rows-2 bilan bir xil bo'lib,
   turli ekran o'lchamlarida (planshet/telefon, portret/albom) mos
   kelishi uchun xuddi shu breakpointlarda moslashadi. */
.o2-hmul{font-weight:950;font-size:clamp(28px,3vw,42px);line-height:1.05;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
.o2-hmul-op{padding:0 .12em}
@media(max-width:700px){.o2-hmul{font-size:clamp(22px,5vw,30px)}}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){.o2-hmul{font-size:clamp(14px,3.1vh,23px)}}


/* ================================================================
   ARQON TORTISH — 2026-08-23 animatsion personajlar
   Faqat Arqon tortish o'yiniga tegishli.
   EduGames uslubidagi 2+2 o'zbek milliy kiyimidagi personajlar
   alohida rasm qatlamlari sifatida animatsiya qilinadi.
   ================================================================ */
#pageOyin2.arqon-active .arqon-person{display:none!important}
/* Rasm ustida suzib turgan ortiqcha yog'och arqon/tugun grafikasi (eski
   CSS-chizilgan arqon) endi rasmlarning o'zida chizilgan, shu sabab
   markazda alohida "osilib turgan" ko'rinishni olib tashlaymiz. */
/* Rasm ustida suzib turgan ortiqcha yog'och arqon/tugun grafikasi (eski
   CSS-chizilgan arqon) AVVAL rasmlarning o'zida chizilgan deb hisoblanib
   butunlay yashirilgan edi. LEKIN har ikkala jamoa rasmida ALOHIDA
   chizilgan arqon uchlari markazda "ustma-ust" tushib, arqon go'yo
   "ikki karra" yoki uzilgandek ko'rinishga sabab bo'lardi. Shu sabab:
   1) rasmlardan markazga cho'zilib boruvchi arqon segmenti olib
      tashlandi (faqat mushtdagi tutqich qoldi), 2) o'rniga BITTA
      YAGONA (uzilmaydigan) arqon elementi qayta yoqildi va aynan
      ikkala mushtning orasidagi bo'shliqni to'ldiradigan qilib
      joylashtirildi — shu bilan arqon endi hech qachon "ustma-ust"
      yoki "uzilgan" ko'rinmaydi, chunki u alohida, doimiy va yagona
      elementdir. */
#pageOyin2.arqon-active .arqon-rope{
  display:block!important;
  left:44%;right:44%;top:44.5%;height:16px;z-index:4;
  transform:translateX(var(--arqon-shift,0%));
  transition:transform .5s cubic-bezier(.18,.8,.22,1);
}
#pageOyin2.arqon-active .arqon-rope-knot,
#pageOyin2.arqon-active .arqon-rope-tail{display:none!important}
@media(max-width:700px){
  #pageOyin2.arqon-active .arqon-rope{left:41%;right:41%;top:45%;height:13px}
}

#pageOyin2.arqon-active .arqon-people{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  display:flex;
  align-items:center;
  /* Har bir to'g'ri javobda butun guruh (ikkala jamoa + orasidagi
     "arqon") g'olib tomonga qarab siljiydi — --arqon-shift qiymatini
     JS (updateRopeUi) hisoblab, .arqon-center elementiga qo'yadi. */
  transform:translateX(var(--arqon-shift,0%));
  transition:transform .5s cubic-bezier(.18,.8,.22,1);
}
#pageOyin2.arqon-active .arqon-people.left-team{justify-content:flex-start}
#pageOyin2.arqon-active .arqon-people.right-team{justify-content:flex-end}

#pageOyin2.arqon-active .arqon-team-art{
  display:block;
  width:53%;
  height:auto;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:50% 86%;
  will-change:transform;
  filter:drop-shadow(0 9px 6px rgba(15,23,42,.15));
}

/* Ishtirokchilarni o'yin maydonining tik markaziga chiqarish (avval faqat
   pastki chetga yopishtirilgan edi).
   MUHIM: rasmlardagi arqon uchlari markazda BIR-BIRIGA TEGIB turishi
   kerak. Avval ikkala rasm aynan 50% nuqtada ("tegib" turgan holda,
   ORTIQCHA joy QOLDIRMAY) joylashtirilgan edi — bu holatda har bir
   to'g'ri javobdan keyingi tortish/qarshilik animatsiyasi (pastda,
   arqonTeamPull*/arqonTeamImpulse*) ikkala rasmni bir-biridan biroz
   MUSTAQIL siljitib qo'yardi, natijada arqon "uzilib" ketayotgandek
   ko'rinardi. Yechim: rasmlar markazda bir-birining USTIGA ~6-8%
   qoplab (overlap) joylashtiriladi — shu orqali animatsiya paytida
   qanchalik siljisa ham arqon uchlari hech qachon ajralib ketmaydi. */
#pageOyin2.arqon-active .left-team .arqon-team-art{
  margin-left:0;
  animation:arqonTeamIdleLeft 2.6s ease-in-out infinite;
}
#pageOyin2.arqon-active .right-team .arqon-team-art{
  margin-right:0;
  animation:arqonTeamIdleRight 2.6s ease-in-out infinite;
}

/* Oddiy holatda ham jonli ko'rinish. */
@keyframes arqonTeamIdleLeft{
  0%,100%{transform:rotate(-.25deg) translate3d(0,0,0)}
  50%{transform:rotate(.25deg) translate3d(-2px,1px,0)}
}
@keyframes arqonTeamIdleRight{
  0%,100%{transform:rotate(-.25deg) translate3d(0,0,0)}
  50%{transform:rotate(.25deg) translate3d(2px,1px,0)}
}

/* 1-Jamoa tortganda */
#pageOyin2.arqon-active .arqon-center.pull-left .left-team .arqon-team-art{
  animation:arqonTeamPullLeft .58s cubic-bezier(.18,.8,.22,1) infinite;
}
#pageOyin2.arqon-active .arqon-center.pull-left .right-team .arqon-team-art{
  animation:arqonTeamResistRight .72s ease-in-out infinite;
}

/* 2-Jamoa tortganda */
#pageOyin2.arqon-active .arqon-center.pull-right .right-team .arqon-team-art{
  animation:arqonTeamPullRight .58s cubic-bezier(.18,.8,.22,1) infinite;
}
#pageOyin2.arqon-active .arqon-center.pull-right .left-team .arqon-team-art{
  animation:arqonTeamResistLeft .72s ease-in-out infinite;
}

@keyframes arqonTeamPullLeft{
  0%,100%{transform:rotate(-1.1deg) translate3d(0,0,0)}
  45%{transform:rotate(-2.8deg) translate3d(-10px,3px,0)}
  70%{transform:rotate(-1.7deg) translate3d(-5px,1px,0)}
}
@keyframes arqonTeamPullRight{
  0%,100%{transform:rotate(-1.1deg) translate3d(0,0,0)}
  45%{transform:rotate(-2.8deg) translate3d(10px,3px,0)}
  70%{transform:rotate(-1.7deg) translate3d(5px,1px,0)}
}
@keyframes arqonTeamResistRight{
  0%,100%{transform:rotate(-.8deg) translate3d(0,0,0)}
  50%{transform:rotate(.8deg) translate3d(5px,-2px,0)}
}
@keyframes arqonTeamResistLeft{
  0%,100%{transform:rotate(-.8deg) translate3d(0,0,0)}
  50%{transform:rotate(.8deg) translate3d(-5px,-2px,0)}
}

/* Tug tug paytida markazdagi belgi ham silkinadi. */
#pageOyin2.arqon-active .arqon-center.pull-left .arqon-rope-knot{
  animation:ropeKnot .3s ease;
}
#pageOyin2.arqon-active .arqon-center.pull-right .arqon-rope-knot{
  animation:ropeKnot .3s ease;
}

@media(max-width:900px){
  #pageOyin2.arqon-active .arqon-team-art{width:54%}
}

@media(max-width:700px){
  /* Kichik ekranlarda animatsiya siljishi (piksel qiymatlari o'zgarmas)
     maydonning NISBIY kattaroq qismini egallaydi, shu sabab qoplama
     (overlap) mobil'da yanada kattaroq (≈10%) qilib olinadi — aks
     holda aynan telefonlarda arqon "uzilib" ko'rinishi eng ko'p
     sezilardi. */
  #pageOyin2.arqon-active .arqon-team-art{
    width:55%;
  }
  #pageOyin2.arqon-active .left-team .arqon-team-art{margin-left:0}
  #pageOyin2.arqon-active .right-team .arqon-team-art{margin-right:0}
}

/* JS bergan bir martalik kuchli tortish impulsi. */
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .left-team .arqon-team-art{
  animation:arqonTeamImpulseLeft .68s cubic-bezier(.18,.8,.22,1);
}
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .right-team .arqon-team-art{
  animation:arqonTeamImpulseResistRight .68s cubic-bezier(.18,.8,.22,1);
}
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .right-team .arqon-team-art{
  animation:arqonTeamImpulseRight .68s cubic-bezier(.18,.8,.22,1);
}
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .left-team .arqon-team-art{
  animation:arqonTeamImpulseResistLeft .68s cubic-bezier(.18,.8,.22,1);
}

@keyframes arqonTeamImpulseLeft{
  0%{transform:rotate(-1deg) translate3d(0,0,0)}
  22%{transform:rotate(-3deg) translate3d(-13px,4px,0)}
  55%{transform:rotate(-1.8deg) translate3d(-6px,1px,0)}
  100%{transform:rotate(-1deg) translate3d(0,0,0)}
}
@keyframes arqonTeamImpulseRight{
  0%{transform:rotate(-1deg) translate3d(0,0,0)}
  22%{transform:rotate(-3deg) translate3d(13px,4px,0)}
  55%{transform:rotate(-1.8deg) translate3d(6px,1px,0)}
  100%{transform:rotate(-1deg) translate3d(0,0,0)}
}
@keyframes arqonTeamImpulseResistRight{
  0%{transform:rotate(-.5deg) translate3d(0,0,0)}
  50%{transform:rotate(1deg) translate3d(6px,-2px,0)}
  100%{transform:rotate(-.5deg) translate3d(0,0,0)}
}
@keyframes arqonTeamImpulseResistLeft{
  0%{transform:rotate(-.5deg) translate3d(0,0,0)}
  50%{transform:rotate(1deg) translate3d(-6px,-2px,0)}
  100%{transform:rotate(-.5deg) translate3d(0,0,0)}
}

/* ARQON TORTISH — yakuniy dizayn/polish (faqat Arqon tortish rejimi) */
#pageOyin2.arqon-active .arqon-game{
  gap:14px;
  padding:4px 2px 8px;
}
#pageOyin2.arqon-active .arqon-scorebar{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(241,245,249,.98));
  border:1px solid rgba(148,163,184,.25);
  border-radius:20px;
  padding:10px 18px;
  box-shadow:0 12px 30px rgba(15,23,42,.09);
}
#pageOyin2.arqon-active .arqon-team-card{
  padding:8px 14px;
  border-radius:15px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.18);
}
#pageOyin2.arqon-active .arqon-team-card.left{box-shadow:inset 4px 0 0 #2563eb}
#pageOyin2.arqon-active .arqon-team-card.right{box-shadow:inset -4px 0 0 #ef4444}
#pageOyin2.arqon-active .arqon-team-name{font-size:18px}
#pageOyin2.arqon-active .arqon-team-card strong{font-size:34px}
#pageOyin2.arqon-active .arqon-clock{
  min-width:104px;justify-content:center;padding:7px 12px;border-radius:14px;
  background:#fff;border:1px solid rgba(148,163,184,.22);box-shadow:0 5px 14px rgba(15,23,42,.07);
  font-size:22px;
}
#pageOyin2.arqon-active .arqon-board{gap:12px}
#pageOyin2.arqon-active .arqon-side-card{
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,250,252,.99));
  border-width:2px;border-radius:18px;padding:12px;
  box-shadow:0 12px 28px rgba(15,23,42,.09);
}
#pageOyin2.arqon-active .arqon-side-left{border-color:rgba(37,99,235,.42)}
#pageOyin2.arqon-active .arqon-side-right{border-color:rgba(239,68,68,.42)}
#pageOyin2.arqon-active .arqon-center{
  min-height:390px;border-radius:22px;border:2px solid rgba(148,163,184,.28);
  box-shadow:0 16px 34px rgba(15,23,42,.11),inset 0 1px rgba(255,255,255,.8);
  background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 60%,#e8edf5 100%);
}
#pageOyin2.arqon-active .arqon-arena-bg{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.98),rgba(231,240,251,.72) 52%,rgba(210,220,235,.62));
}
/* Bitta uzluksiz markaziy arqon: uzunroq qoldiriladi, shuning uchun
   start/tortish animatsiyasida ikki rasm orasida bo'shliq paydo bo'lmaydi. */
#pageOyin2.arqon-active .arqon-rope{
  display:block!important;
  left:35%;right:35%;top:45%;height:15px;z-index:5;
  transform:translate3d(var(--arqon-shift,0%),0,0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.18,.8,.22,1);
  pointer-events:none;
}
#pageOyin2.arqon-active .arqon-rope:before{
  top:2px;height:11px;
  background:repeating-linear-gradient(0deg,#9a5f2b 0 3px,#d59a54 3px 6px,#7b4b24 6px 9px);
  box-shadow:0 3px 6px rgba(65,38,18,.24),inset 0 1px rgba(255,255,255,.4);
}
#pageOyin2.arqon-active .arqon-rope-knot,
#pageOyin2.arqon-active .arqon-rope-tail{display:none!important}
/* Har ikki rasm mustaqil siljiganda ham markazdagi arqon uzilib
   ko'rinmasligi uchun animatsiya amplitudasi kamaytirildi. */
#pageOyin2.arqon-active .arqon-team-art{will-change:transform;filter:drop-shadow(0 10px 7px rgba(15,23,42,.16))}
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .left-team .arqon-team-art,
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .right-team .arqon-team-art{
  animation-duration:.62s;
}
#pageOyin2.arqon-active .arqon-pull-badge{
  top:8%;padding:7px 14px;font-size:13px;box-shadow:0 8px 20px rgba(15,23,42,.18);
}
#pageOyin2.arqon-active .arqon-hint{
  border:1px solid rgba(148,163,184,.28);border-radius:12px;padding:8px 12px;
  background:rgba(255,255,255,.86);box-shadow:0 5px 14px rgba(15,23,42,.06);
}
@media(max-width:700px){
  #pageOyin2.arqon-active .arqon-game{gap:7px;padding:2px 0 5px}
  #pageOyin2.arqon-active .arqon-scorebar{padding:6px 7px;border-radius:14px}
  #pageOyin2.arqon-active .arqon-team-card{padding:5px 7px}
  #pageOyin2.arqon-active .arqon-team-name{font-size:11px}
  #pageOyin2.arqon-active .arqon-team-card strong{font-size:24px}
  #pageOyin2.arqon-active .arqon-clock{min-width:76px;padding:5px 7px;font-size:17px;border-radius:10px}
  #pageOyin2.arqon-active .arqon-center{min-height:225px;border-radius:15px}
  #pageOyin2.arqon-active .arqon-rope{left:30%;right:30%;top:45%;height:12px}
  #pageOyin2.arqon-active .arqon-rope:before{height:9px;top:2px}
  #pageOyin2.arqon-active .arqon-pull-badge{top:6%;font-size:9px;padding:5px 9px}
}