/* ================================================================
   ARQON TORTISH — MODERN GAME UI v3 — 2026-08-25
   Faqat #pageOyin2.arqon-active ichidagi Arqon tortish rejimiga ta'sir qiladi.
   O'yin 2 / Poyga va boshqa sahifalar o'zgarmaydi.
   ================================================================ */
#pageOyin2.arqon-active{
  --arqon-blue:#2563eb;
  --arqon-blue-dark:#1d4ed8;
  --arqon-red:#ef4444;
  --arqon-red-dark:#dc2626;
  --arqon-ink:#172033;
  --arqon-muted:#64748b;
  --arqon-card:#ffffff;
  background:
    radial-gradient(circle at 10% 0%,rgba(59,130,246,.12),transparent 28%),
    radial-gradient(circle at 90% 0%,rgba(239,68,68,.11),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3fb 100%) !important;
}
#pageOyin2.arqon-active .o2-header{
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(148,163,184,.2) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.07) !important;
  backdrop-filter:blur(16px);
}
#pageOyin2.arqon-active .o2-title{font-weight:950;letter-spacing:-.025em}
#pageOyin2.arqon-active .arqon-game{gap:14px !important;min-height:calc(100dvh - 104px);}

/* Scoreboard */
#pageOyin2.arqon-active .arqon-scorebar{
  position:relative;
  grid-template-columns:minmax(220px,1fr) 180px minmax(220px,1fr) !important;
  gap:20px !important;
  padding:13px 16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 12px 35px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.8) !important;
  overflow:hidden;
}
#pageOyin2.arqon-active .arqon-scorebar:after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(148,163,184,.12);pointer-events:none;
}
#pageOyin2.arqon-active .arqon-team-card{
  position:relative;padding:8px 14px !important;border-radius:17px;background:#fff !important;border:1px solid rgba(148,163,184,.18);box-shadow:0 5px 18px rgba(15,23,42,.045);overflow:hidden;
}
#pageOyin2.arqon-active .arqon-team-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--arqon-blue);}
#pageOyin2.arqon-active .arqon-team-card.right:before{left:auto;right:0;background:var(--arqon-red)}
#pageOyin2.arqon-active .arqon-team-top{display:flex;align-items:center;gap:8px;min-height:24px}
#pageOyin2.arqon-active .arqon-team-card.right .arqon-team-top{justify-content:flex-end}
#pageOyin2.arqon-active .arqon-team-dot{width:9px;height:9px;border-radius:50%;background:var(--arqon-blue);box-shadow:0 0 0 4px rgba(37,99,235,.1);flex:0 0 auto}
#pageOyin2.arqon-active .arqon-team-card.right .arqon-team-dot{background:var(--arqon-red);box-shadow:0 0 0 4px rgba(239,68,68,.1)}
#pageOyin2.arqon-active .arqon-team-tag{font-size:9px;font-weight:950;letter-spacing:.12em;color:var(--arqon-blue);background:#eff6ff;border-radius:999px;padding:4px 7px}
#pageOyin2.arqon-active .arqon-team-card.right .arqon-team-tag{color:#dc2626;background:#fef2f2}
#pageOyin2.arqon-active .arqon-team-name{font-size:15px !important;font-weight:950;color:var(--arqon-ink) !important}
#pageOyin2.arqon-active .arqon-team-card strong{font-size:34px !important;line-height:.95;color:var(--arqon-blue) !important;margin:2px 0 0 !important}
#pageOyin2.arqon-active .arqon-team-card.right strong{color:var(--arqon-red) !important}
#pageOyin2.arqon-active .arqon-score-caption{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#94a3b8;margin-top:3px}
#pageOyin2.arqon-active .arqon-team-card.right{text-align:right}
#pageOyin2.arqon-active .arqon-clock{
  min-width:145px;justify-self:center;display:flex;justify-content:center;align-items:center;gap:9px;padding:8px 12px;border-radius:17px;background:#111827 !important;color:#fff !important;box-shadow:0 8px 20px rgba(15,23,42,.2);font-size:inherit !important;
}
#pageOyin2.arqon-active .arqon-clock-icon{font-size:21px;filter:grayscale(1) brightness(3)}
#pageOyin2.arqon-active .arqon-clock small{display:block;color:#94a3b8;font-size:8px;font-weight:900;letter-spacing:.14em;line-height:1}
#pageOyin2.arqon-active .arqon-clock strong{display:block;color:#fff;font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#pageOyin2.arqon-active .arqon-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.13);animation:arqonLive 1.5s ease-in-out infinite}
@keyframes arqonLive{50%{opacity:.45;transform:scale(.8)}}

/* Main arena */
#pageOyin2.arqon-active .arqon-board{grid-template-columns:minmax(255px,290px) minmax(560px,1fr) minmax(255px,290px) !important;gap:16px !important}
#pageOyin2.arqon-active .arqon-center{
  min-height:500px !important;
  border-radius:28px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  background:linear-gradient(180deg,#eaf3ff 0%,#f8fbff 55%,#dfe8f2 100%) !important;
  box-shadow:0 20px 45px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#pageOyin2.arqon-active .arqon-arena-bg{background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.98),rgba(231,240,251,.62) 48%,rgba(202,216,232,.68)) !important}
#pageOyin2.arqon-active .arqon-arena-bg:after{bottom:8%;height:23%;background:radial-gradient(ellipse,rgba(71,85,105,.18),transparent 66%)}
#pageOyin2.arqon-active .arqon-arena-bg:before{height:13px;opacity:.82;background:repeating-linear-gradient(90deg,#2563eb 0 20px,#fbbf24 20px 30px,#ef4444 30px 50px,#fbbf24 50px 60px) !important}
#pageOyin2.arqon-active .arqon-arena-topline{position:absolute;left:20px;right:20px;top:14px;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-size:10px;font-weight:950;letter-spacing:.13em}
#pageOyin2.arqon-active .arqon-arena-topline span{color:#2563eb;background:rgba(255,255,255,.72);border:1px solid rgba(37,99,235,.15);padding:6px 9px;border-radius:999px;width:max-content;max-width:100%;box-sizing:border-box}
#pageOyin2.arqon-active .arqon-arena-topline span:last-child{justify-self:end;color:#dc2626;border-color:rgba(239,68,68,.15)}
#pageOyin2.arqon-active .arqon-arena-topline i{font-style:normal;color:#64748b;font-size:9px;letter-spacing:.16em;text-align:center}
#pageOyin2.arqon-active .arqon-center-line{top:10%;bottom:9%;border-left:2px dashed rgba(71,85,105,.34);z-index:3}
#pageOyin2.arqon-active .arqon-center-line:before,#pageOyin2.arqon-active .arqon-center-line:after{content:"";position:absolute;left:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #94a3b8;transform:translateX(-50%)}
#pageOyin2.arqon-active .arqon-center-line:before{top:-5px}#pageOyin2.arqon-active .arqon-center-line:after{bottom:-5px}
#pageOyin2.arqon-active .arqon-rope{left:8% !important;right:8% !important;top:54% !important;height:26px !important;z-index:7 !important}
#pageOyin2.arqon-active .arqon-rope:before{top:6px;height:15px;background:repeating-linear-gradient(0deg,#7b4a24 0 3px,#b87838 3px 6px,#d69a54 6px 9px,#8b572a 9px 12px) !important;box-shadow:0 5px 8px rgba(65,38,18,.25),inset 0 2px rgba(255,255,255,.35) !important}
#pageOyin2.arqon-active .arqon-rope-knot{width:42px;height:42px;top:-8px;background:linear-gradient(145deg,#ef4444,#b91c1c) !important;border:3px solid rgba(255,255,255,.8);box-shadow:0 6px 12px rgba(127,29,29,.28) !important}
#pageOyin2.arqon-active .arqon-rope-knot:after{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:17px}
#pageOyin2.arqon-active .arqon-rope-tail{height:8px !important;background:#6b401f !important}
#pageOyin2.arqon-active .arqon-pull-badge{top:9% !important;background:rgba(15,23,42,.94);box-shadow:0 8px 20px rgba(15,23,42,.2);font-size:12px !important;padding:8px 13px !important}
#pageOyin2.arqon-active .arqon-people{z-index:6}
#pageOyin2.arqon-active .arqon-team-art{width:58% !important;filter:drop-shadow(0 13px 8px rgba(15,23,42,.18)) !important}

/* Question cards */
#pageOyin2.arqon-active .arqon-side-card{min-height:500px !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important}
#pageOyin2.arqon-active .arqon-o2-card{
  position:relative;width:100% !important;height:100% !important;min-height:500px !important;padding:14px !important;box-sizing:border-box !important;border-radius:24px !important;background:rgba(255,255,255,.94) !important;border:1px solid rgba(148,163,184,.22) !important;box-shadow:0 16px 34px rgba(15,23,42,.09) !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;gap:10px !important;
}
#pageOyin2.arqon-active .arqon-o2-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--arqon-blue);}
#pageOyin2.arqon-active .arqon-o2-card.team-red:before{background:var(--arqon-red)}
#pageOyin2.arqon-active .arqon-o2-card:after{content:"";position:absolute;left:0;bottom:0;width:var(--card-progress,0%);height:3px;background:var(--arqon-blue);transition:width .3s ease}
#pageOyin2.arqon-active .arqon-o2-card.team-red:after{background:var(--arqon-red)}
#pageOyin2.arqon-active .arqon-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#pageOyin2.arqon-active .arqon-card-teamline{display:flex;align-items:center;gap:9px;min-width:0}
#pageOyin2.arqon-active .arqon-card-badge{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--card-accent) 10%,#fff);font-size:18px;border:1px solid color-mix(in srgb,var(--card-accent) 16%,#fff)}
#pageOyin2.arqon-active .arqon-card-kicker{display:block;font-size:8px;line-height:1;color:#94a3b8;font-weight:950;letter-spacing:.15em;margin-bottom:4px}
#pageOyin2.arqon-active .arqon-card-teamline strong{display:block;font-size:15px;color:#172033;line-height:1}
#pageOyin2.arqon-active .arqon-card-score{font-size:26px;font-weight:950;color:var(--arqon-blue)}
#pageOyin2.arqon-active .team-red .arqon-card-score{color:var(--arqon-red)}
#pageOyin2.arqon-active .arqon-card-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 9px;border-radius:11px;background:#f8fafc;color:#64748b;font-size:9px;font-weight:800;border:1px solid #eef2f7}
#pageOyin2.arqon-active .arqon-card-meta .o2-stat{font-size:8px;color:#94a3b8 !important;white-space:nowrap}
#pageOyin2.arqon-active .arqon-work{display:flex !important;flex-direction:column !important;gap:10px !important;min-height:0 !important;flex:1 !important}
#pageOyin2.arqon-active .arqon-example-wrap{display:flex !important;flex-direction:column !important;gap:6px;min-height:0 !important;flex:1 !important}
#pageOyin2.arqon-active .arqon-example-title{display:flex;justify-content:space-between;align-items:center;padding:0 2px;font-size:9px;font-weight:950;letter-spacing:.05em;color:#475569}
#pageOyin2.arqon-active .arqon-example-title span:last-child{font-weight:700;color:#94a3b8;letter-spacing:0}
#pageOyin2.arqon-active .arqon-example-box{position:relative;display:flex !important;align-items:center !important;justify-content:center !important;flex:1 !important;min-height:180px !important;margin:0 !important;padding:12px !important;border:2px solid #e2e8f0 !important;border-radius:17px !important;background:linear-gradient(145deg,#fff,#f8fbff) !important;box-shadow:inset 0 1px 0 #fff,0 5px 16px rgba(15,23,42,.04) !important;overflow:hidden}
#pageOyin2.arqon-active .team-blue .arqon-example-box{border-color:#bfdbfe !important;background:linear-gradient(145deg,#fff,#eff6ff) !important}
#pageOyin2.arqon-active .team-red .arqon-example-box{border-color:#fecaca !important;background:linear-gradient(145deg,#fff,#fff1f2) !important}
#pageOyin2.arqon-active .arqon-example-box:before{content:"?";position:absolute;right:9px;top:6px;font-size:42px;font-weight:950;color:rgba(148,163,184,.08);pointer-events:none}
#pageOyin2.arqon-active .arqon-example-box .o2-column,#pageOyin2.arqon-active .arqon-example-box>div{font-weight:950 !important;color:#172033 !important}
#pageOyin2.arqon-active .arqon-answer-panel{display:flex !important;flex-direction:column !important;gap:6px !important;padding:10px !important;border-radius:15px !important;background:#f8fafc !important;border:1px solid #e5e7eb !important}
#pageOyin2.arqon-active .arqon-answer-label{display:flex !important;justify-content:space-between;align-items:center;margin:0 !important;font-size:9px !important;color:#475569 !important;font-weight:950 !important;letter-spacing:.07em}
#pageOyin2.arqon-active .arqon-answer-label small{font-size:8px;color:#94a3b8;letter-spacing:0;font-weight:700}
#pageOyin2.arqon-active .arqon-answer{height:50px !important;padding:7px 12px !important;border:2px solid #dbe3ee !important;border-radius:12px !important;background:#fff !important;color:#172033 !important;font-size:23px !important;font-weight:950 !important;box-shadow:0 3px 10px rgba(15,23,42,.04) !important}
#pageOyin2.arqon-active .team-blue .arqon-answer:focus{border-color:#60a5fa !important;box-shadow:0 0 0 4px rgba(37,99,235,.1) !important}
#pageOyin2.arqon-active .team-red .arqon-answer:focus{border-color:#f87171 !important;box-shadow:0 0 0 4px rgba(239,68,68,.1) !important}
#pageOyin2.arqon-active .arqon-feedback{min-height:17px;margin:0 !important;font-size:10px;font-weight:900}
#pageOyin2.arqon-active .o2-keypad-overlay{z-index:30 !important;border-radius:15px !important;background:rgba(15,23,42,.62) !important;backdrop-filter:blur(8px)}
#pageOyin2.arqon-active .o2-keypad{padding:12px !important;gap:7px !important}
#pageOyin2.arqon-active .o2-key{border-radius:10px !important;background:#fff !important;border:1px solid #e2e8f0 !important;color:#172033 !important;box-shadow:0 3px 7px rgba(15,23,42,.08) !important;font-weight:900}
#pageOyin2.arqon-active .o2-key-back{background:#fee2e2 !important;color:#b91c1c !important}
#pageOyin2.arqon-active .o2-submit{border-radius:10px !important;background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;box-shadow:0 5px 12px rgba(37,99,235,.25) !important;font-weight:950}

#pageOyin2.arqon-active .arqon-hint{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 13px !important;border-radius:14px !important;background:rgba(255,255,255,.76) !important;border:1px solid rgba(148,163,184,.2) !important;box-shadow:0 7px 18px rgba(15,23,42,.05) !important;color:#64748b !important;font-size:10px !important}
#pageOyin2.arqon-active .arqon-hint-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#fff7ed;flex:0 0 auto}
#pageOyin2.arqon-active .arqon-o2-card.is-winning{transform:translateY(-2px);box-shadow:0 18px 38px rgba(37,99,235,.13) !important}
#pageOyin2.arqon-active .team-red.is-winning{box-shadow:0 18px 38px rgba(239,68,68,.13) !important}

/* Result window remains game-specific but receives the same modern language. */
#pageOyin2.arqon-active + .o2-settings{}
#arqonResults .arqon-results-card{border-radius:28px !important;border:1px solid rgba(148,163,184,.2);box-shadow:0 30px 80px rgba(15,23,42,.22) !important}

@media(max-width:1100px){
  #pageOyin2.arqon-active .arqon-board{grid-template-columns:220px minmax(480px,1fr) 220px !important}
  #pageOyin2.arqon-active .arqon-center{min-height:460px !important}
  #pageOyin2.arqon-active .arqon-team-art{width:61% !important}
}
@media(max-width:850px){
  #pageOyin2.arqon-active .arqon-scorebar{grid-template-columns:1fr 125px 1fr !important;gap:8px !important}
  #pageOyin2.arqon-active .arqon-board{grid-template-columns:1fr 1fr !important;grid-template-rows:auto auto !important}
  #pageOyin2.arqon-active .arqon-center{grid-column:1 / -1;grid-row:1;min-height:330px !important}
  #pageOyin2.arqon-active .arqon-side-card{min-height:330px !important}
  #pageOyin2.arqon-active .arqon-o2-card{min-height:330px !important}
}
@media(max-width:700px){
  #pageOyin2.arqon-active .arqon-game{gap:8px !important}
  #pageOyin2.arqon-active .arqon-scorebar{grid-template-columns:1fr 92px 1fr !important;padding:7px !important;border-radius:17px !important;gap:5px !important}
  #pageOyin2.arqon-active .arqon-team-card{padding:6px 8px !important;border-radius:13px !important}
  #pageOyin2.arqon-active .arqon-team-name{font-size:10px !important}
  #pageOyin2.arqon-active .arqon-team-tag{font-size:7px;padding:3px 5px}
  #pageOyin2.arqon-active .arqon-team-dot{width:7px;height:7px}
  #pageOyin2.arqon-active .arqon-team-card strong{font-size:22px !important}
  #pageOyin2.arqon-active .arqon-score-caption{font-size:7px}
  #pageOyin2.arqon-active .arqon-clock{min-width:0;padding:6px 5px;border-radius:12px;gap:5px}
  #pageOyin2.arqon-active .arqon-clock-icon{font-size:15px}
  #pageOyin2.arqon-active .arqon-clock small{font-size:6px}
  #pageOyin2.arqon-active .arqon-clock strong{font-size:17px}
  #pageOyin2.arqon-active .arqon-board{gap:7px !important}
  #pageOyin2.arqon-active .arqon-center{min-height:235px !important;border-radius:18px !important}
  #pageOyin2.arqon-active .arqon-arena-topline{top:8px;left:9px;right:9px;font-size:7px;gap:4px}
  #pageOyin2.arqon-active .arqon-arena-topline span{padding:4px 6px}
  #pageOyin2.arqon-active .arqon-arena-topline i{font-size:6px}
  #pageOyin2.arqon-active .arqon-rope{top:54% !important;left:5% !important;right:5% !important;height:18px !important}
  #pageOyin2.arqon-active .arqon-rope:before{top:4px;height:11px}
  #pageOyin2.arqon-active .arqon-rope-knot{width:31px;height:31px;top:-5px}
  #pageOyin2.arqon-active .arqon-rope-knot:after{font-size:12px}
  #pageOyin2.arqon-active .arqon-team-art{width:65% !important}
  #pageOyin2.arqon-active .arqon-side-card{min-height:0 !important}
  #pageOyin2.arqon-active .arqon-o2-card{min-height:300px !important;padding:9px !important;border-radius:17px !important;gap:7px !important}
  #pageOyin2.arqon-active .arqon-card-badge{width:29px;height:29px;border-radius:9px;font-size:14px}
  #pageOyin2.arqon-active .arqon-card-kicker{font-size:6px;margin-bottom:3px}
  #pageOyin2.arqon-active .arqon-card-teamline strong{font-size:11px}
  #pageOyin2.arqon-active .arqon-card-score{font-size:20px}
  #pageOyin2.arqon-active .arqon-card-meta{padding:5px 6px;font-size:7px}
  #pageOyin2.arqon-active .arqon-card-meta .o2-stat{font-size:6px}
  #pageOyin2.arqon-active .arqon-example-title{font-size:7px}
  #pageOyin2.arqon-active .arqon-example-box{min-height:115px !important;border-radius:12px !important;padding:7px !important}
  #pageOyin2.arqon-active .arqon-answer-panel{padding:7px !important;border-radius:11px !important;gap:4px !important}
  #pageOyin2.arqon-active .arqon-answer-label{font-size:7px !important}
  #pageOyin2.arqon-active .arqon-answer-label small{font-size:6px}
  #pageOyin2.arqon-active .arqon-answer{height:38px !important;font-size:18px !important;border-radius:9px !important}
  #pageOyin2.arqon-active .arqon-feedback{font-size:7px;min-height:12px}
  #pageOyin2.arqon-active .arqon-hint{font-size:8px !important;padding:6px 8px !important}
  #pageOyin2.arqon-active .arqon-hint-icon{width:19px;height:19px;border-radius:6px}
}
@media(max-width:700px) and (orientation:landscape){
  #pageOyin2.arqon-active .arqon-center{min-height:205px !important}
  #pageOyin2.arqon-active .arqon-o2-card{min-height:240px !important}
  #pageOyin2.arqon-active .arqon-example-box{min-height:88px !important}
}

/* ARQON: screenshotdagi yuqoridagi gorizontal rangli taxta/bar olib tashlandi. */
#pageOyin2.arqon-active .arqon-arena-bg:before{
  display:none !important;
  content:none !important;
}



/* PATCH 2026-08-25 — 1366x768 notebook fit for O'yin 2 + Arqon tortish */
@media (min-width:1000px) and (max-width:1600px) and (max-height:800px){
  html,body{overflow:hidden !important}

  body.oyin2-page #pageOyin2{
    height:100dvh !important;min-height:100dvh !important;max-height:100dvh !important;
    overflow:hidden !important;padding:6px 10px 8px !important;box-sizing:border-box !important;
  }
  body.oyin2-page #pageOyin2 .o2-shell{
    width:100% !important;max-width:none !important;height:100% !important;min-height:0 !important;
    display:flex !important;flex-direction:column !important;gap:6px !important;overflow:hidden !important;
  }
  /* FIX20260828: bu yerda avval .o2-track (poyga yo'li) ni majburan
     32% balandlikka va height:auto ga torttirib, 1366x768 (va shunga
     mos effektiv CSS-viewport beradigan 4K ekranlarda, masalan
     Windows 250% masshtab) uchun poyga yo'lini yassilab, mashinalarni
     juda kichraytirib qo'yardi (boshqa ekranlardagi ko'rinishdan farq
     qilardi). Endi bu maxsus torttirish OLIB TASHLANDI — poyga yo'li
     doim asosiy (oyin2-poyga.css dagi) responsiv o'lchamlarda,
     boshqa barcha ekranlar bilan bir xil ko'rinishda chiqadi. */

  /* Arqon: barcha bloklar bitta viewportga sig'adi. */
  body.game-on #pageOyin2.arqon-active .arqon-game{
    height:100% !important;min-height:0 !important;max-height:none !important;
    padding:0 !important;gap:6px !important;overflow:hidden !important;
    display:flex !important;flex-direction:column !important;
  }
  body.game-on #pageOyin2.arqon-active .arqon-scorebar{flex:0 0 58px !important;height:58px !important;min-height:58px !important;padding:5px 8px !important;box-sizing:border-box !important}
  body.game-on #pageOyin2.arqon-active .arqon-team-card{padding:5px 10px !important}
  body.game-on #pageOyin2.arqon-active .arqon-team-name{font-size:14px !important}
  body.game-on #pageOyin2.arqon-active .arqon-team-card strong{font-size:26px !important}
  body.game-on #pageOyin2.arqon-active .arqon-clock{min-width:92px !important;padding:5px 9px !important;font-size:18px !important}
  body.game-on #pageOyin2.arqon-active .arqon-board{
    flex:1 1 0 !important;min-height:0 !important;height:auto !important;
    grid-template-columns:minmax(210px,.8fr) minmax(420px,1.5fr) minmax(210px,.8fr) !important;
    gap:8px !important;overflow:hidden !important;
  }
  body.game-on #pageOyin2.arqon-active .arqon-side-card,
  body.game-on #pageOyin2.arqon-active .arqon-o2-card{min-height:0 !important;height:100% !important;padding:8px !important;overflow:hidden !important}
  body.game-on #pageOyin2.arqon-active .arqon-center{min-height:0 !important;height:100% !important;border-radius:17px !important}
  body.game-on #pageOyin2.arqon-active .arqon-team-art{width:57% !important;max-height:78% !important;object-fit:contain !important}
  body.game-on #pageOyin2.arqon-active .arqon-rope{display:block !important;left:30% !important;right:30% !important;top:52% !important;height:14px !important;z-index:8 !important}
  body.game-on #pageOyin2.arqon-active .arqon-rope-knot,
  body.game-on #pageOyin2.arqon-active .arqon-rope-tail{display:none !important}
  body.game-on #pageOyin2.arqon-active .arqon-example-box{min-height:0 !important;height:100% !important;padding:8px !important}
  body.game-on #pageOyin2.arqon-active .arqon-answer{height:42px !important;font-size:19px !important;padding:5px 10px !important}
  body.game-on #pageOyin2.arqon-active .arqon-hint{flex:0 0 32px !important;min-height:32px !important;padding:4px 9px !important;font-size:9px !important;box-sizing:border-box !important}
}

/* ================================================================
   ARQON TORTISH — FINAL MOBILE KEYPAD + CLEAN ARENA PATCH
   2026-08-26
   ================================================================ */
/* Screenshotdagi keraksiz gorizontal dekorativ taxta/belgini butunlay olib tashlash. */
#pageOyin2.arqon-active .arqon-arena-bg:before,
#pageOyin2.arqon-active .arqon-arena-bg:after{
  display:none !important;
  content:none !important;
}

/* Telefon: virtual raqamli klaviatura kartochka ichidagi joyni to'liq va qulay ishlatsin. */
@media (max-width:700px){
  #pageOyin2.arqon-active .o2-keypad-overlay{
    position:absolute !important;
    inset:0 !important;
    padding:10px !important;
    border-radius:14px !important;
    background:rgba(248,250,255,.97) !important;
    border:1px solid rgba(99,102,241,.18) !important;
    box-shadow:0 12px 28px rgba(30,41,59,.16) !important;
    backdrop-filter:blur(10px) !important;
    transform:translateY(0) scale(.98) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    z-index:50 !important;
  }
  #pageOyin2.arqon-active .o2-keypad-overlay.open{
    transform:translateY(0) scale(1) !important;
  }
  #pageOyin2.arqon-active .o2-kp-close{
    top:7px !important;
    right:7px !important;
    width:30px !important;
    height:30px !important;
    border:1px solid #ddd6fe !important;
    background:#fff !important;
    color:#4f46e5 !important;
    font-size:15px !important;
    box-shadow:0 3px 8px rgba(79,70,229,.10) !important;
    z-index:3 !important;
  }
  #pageOyin2.arqon-active .o2-keypad{
    width:100% !important;
    max-width:330px !important;
    margin:24px auto 0 !important;
    padding:0 !important;
    gap:7px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #pageOyin2.arqon-active .o2-key{
    min-height:44px !important;
    height:clamp(44px,10vw,54px) !important;
    padding:7px 4px !important;
    border-radius:12px !important;
    border:1px solid #ddd6fe !important;
    background:linear-gradient(180deg,#ffffff,#f5f3ff) !important;
    color:#3730a3 !important;
    font-size:20px !important;
    font-weight:950 !important;
    box-shadow:0 3px 8px rgba(79,70,229,.08) !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }
  #pageOyin2.arqon-active .o2-key:active{
    transform:scale(.96) !important;
    background:#ede9fe !important;
  }
  #pageOyin2.arqon-active .o2-key-back{
    background:#fff1f2 !important;
    border-color:#fecdd3 !important;
    color:#e11d48 !important;
  }
  #pageOyin2.arqon-active .o2-submit{
    min-height:44px !important;
    height:clamp(44px,10vw,54px) !important;
    padding:7px 6px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#4f46e5,#2563eb) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:950 !important;
    box-shadow:0 6px 14px rgba(79,70,229,.24) !important;
    touch-action:manipulation !important;
  }
  #pageOyin2.arqon-active .arqon-answer{
    min-height:42px !important;
    height:42px !important;
    font-size:20px !important;
    border-radius:11px !important;
  }
}

/* Juda kichik telefonlar uchun tugmalar yana ixchamroq, lekin barmoq bilan bosishga qulay. */
@media (max-width:380px){
  #pageOyin2.arqon-active .o2-keypad{max-width:285px !important;gap:5px !important;margin-top:22px !important}
  #pageOyin2.arqon-active .o2-key,
  #pageOyin2.arqon-active .o2-submit{height:42px !important;min-height:42px !important;border-radius:10px !important}
  #pageOyin2.arqon-active .o2-key{font-size:18px !important}
  #pageOyin2.arqon-active .o2-submit{font-size:13px !important}
}

/* Telefon yotiq holatda ham klaviatura ekrandan chiqib ketmasin. */
@media (max-width:700px) and (orientation:landscape){
  #pageOyin2.arqon-active .o2-keypad-overlay{padding:7px !important}
  #pageOyin2.arqon-active .o2-keypad{max-width:390px !important;gap:5px !important;margin-top:18px !important}
  #pageOyin2.arqon-active .o2-key,
  #pageOyin2.arqon-active .o2-submit{height:36px !important;min-height:36px !important}
  #pageOyin2.arqon-active .o2-key{font-size:17px !important}
  #pageOyin2.arqon-active .o2-kp-close{width:27px !important;height:27px !important}
}