/* Match-only interface; all text sizes stay readable without distorting the field. */
#game .scoreboard{
  left:1.5%;top:2%;
  width:clamp(171px,16cqw,260px);
  max-width:min(48%,320px);
  height:auto;min-height:0;
  padding:7px 10px;
  border:1px solid #277bb5;border-radius:10px;
  background:linear-gradient(145deg,#092f58f7 0%,#061c39f5 100%);
  box-shadow:0 7px 22px #00111e66, inset 0 1px 0 #72cfff33;
  font-family:Arial,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
  z-index:8;
}
#game .scoreboard>div {height:auto;border:0}
#game .scorecard-main{display:flex;align-items:center;gap:.72cqw;min-width:0}
#game .scorecard-avatar{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 35% 28%,#ffd66d,#df7726 54%,#763719 100%);
  border:1px solid #ffd86a;box-shadow:0 2px 0 #06152a,0 0 0 2px #17527c;
  color:#fff;font-size:15px;font-weight:900;text-shadow:0 1px 2px #05203c;flex-shrink:0;
}
#game .scorecard-avatar img{width:100%;height:100%;object-fit:cover;display:block}
#game .scorecard-data{min-width:0;flex:1;overflow:hidden}
.match-eyebrow{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:clamp(9px,.66cqw,12px);letter-spacing:.06em;text-transform:uppercase;
  color:#b3d5e8;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.match-eyebrow span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.match-eyebrow span:first-child {color:#ffd443;font-weight:800}
#game #match-level:empty{display:none}
#game .scoreline {display:flex;align-items:baseline;justify-content:space-between;gap:1.1cqw;line-height:1;min-width:0}
#game .scoreline b {
  display:flex;align-items:baseline;gap:3px;width:auto;padding:0;border:0;
  font-size:clamp(18px,1.7cqw,29px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
}
#game .scoreline b+ b {font-size:clamp(11px,.92cqw,15px);color:#d2e7f3;font-weight:700;flex-shrink:0}
#game .scoreline .scorecard-score{font-size:clamp(18px,1.7cqw,29px);letter-spacing:.01em;min-width:0}
#game .scoreline .score-total{display:flex;align-items:baseline;gap:3px}
#game .scoreline .score-total i{font-style:normal;color:#90b7cf;font-size:.75em;font-weight:700}
#game .scoreline .score-total #out-count{color:#d2e7f3}
#game .scoreline b > span:first-child {display:none}
#game .scoreline b+ b:before {content:'OV';color:#90b7cf;font-size:.72em;letter-spacing:.05em;margin-right:.18cqw}
#game #score {color:#fff}
#game #scoreboard-mid {
  font-size:clamp(9px,.65cqw,11px);color:#b9d3e3;display:block;
  padding:4px 0 0;margin-top:4px;border-top:1px solid #235275;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#game #scoreboard-mid b {color:#ffdc67}
#game .delivery-info {display:none}
#game #delivery-type {color:#ffe16a;font-weight:700}
#game .target-progress {height:4px;margin-top:.6cqw;background:#163e56;border-radius:5px;overflow:hidden}
#game #target-fill {display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe63a,#ffb300)}
#game .controls svg[hidden],#game [hidden] {display:none!important}
#game .radar {width:14%;right:1.7%;bottom:8%;border:1px solid #89c8bb;background:radial-gradient(ellipse,#1b644ce8,#053629f5);box-shadow:0 4px 18px #001c2288,inset 0 0 0 5px #63ca9b18;overflow:visible}
#game .radar:before {content:'LIVE FIELD';position:absolute;left:0;right:0;top:-18%;font-size:clamp(8px,.8cqw,12px);font-weight:800;text-align:center;letter-spacing:.1em;color:#e2ffef;text-shadow:0 1px 4px #001c22}
#game .radar .pitch {left:47%;top:25%;width:6%;height:48%;opacity:.8}
.radar-fielder,.radar-bowler,#radar-batter,#game #radarball {position:absolute;width:7%;height:7%;min-width:5px;min-height:5px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #123c36;box-shadow:0 0 0 1px #fff9;background:#edfaff}
.radar-fielder.chasing {background:#80e7ff;box-shadow:0 0 0 2px #80e7ff55}
.radar-bowler {background:#80e7ff;width:6%;height:6%}
#radar-batter {background:#ffdf3a}
#game #radarball {background:#ff334b;border-color:#fff;width:8%;height:8%;z-index:3;box-shadow:0 0 6px #ff374b}
#game #radarball.airborne {box-shadow:0 0 0 3px #ff59624d,0 0 8px #ff5b5b}
.radar-legend {position:absolute;left:-10%;right:-10%;top:106%;font-size:clamp(7px,.65cqw,10px);text-align:center;color:#d3e9df;white-space:nowrap;text-shadow:0 1px 3px #001a11}
#format-modal .overs-btn small {display:block;font-size:11px;font-weight:500;color:#a4d1e3;margin-top:6px}
.tournament-summary {padding:14px;border:1px solid #3a769a;background:#062a46;border-radius:14px;line-height:1.6}
.tournament-summary strong {color:#ffdf55}
#tournament-result .target-line {font-size:17px;color:#bee4f4}
body.in-game:after {display:none!important}
#game {touch-action:manipulation}
#game .shotbar small {display:block;line-height:1.5;letter-spacing:.025em}

/* Scale scorecard with the game stage width */
@container (max-width: 900px){
  .scoreboard{
    width:clamp(150px,28cqw,240px)!important;
    max-width:46%!important;
    padding:6px 8px!important;
    border-radius:9px!important;
  }
  .scorecard-avatar{width:30px!important;height:30px!important;min-width:30px!important;font-size:13px!important}
  .match-eyebrow{font-size:clamp(8px,1.1cqw,11px)!important;margin-bottom:2px!important}
  .scoreline b,.scoreline .scorecard-score{font-size:clamp(13px,2.6cqw,17px)!important}
  .scoreline b+ b{font-size:clamp(9px,1.5cqw,11px)!important}
  #scoreboard-mid{font-size:clamp(8px,1.2cqw,10px)!important;padding-top:3px!important;margin-top:3px!important}
}

@container (max-width: 640px){
  .scoreboard{
    width:clamp(132px,34cqw,210px)!important;
    max-width:52%!important;
    left:1%!important;top:1.4%!important;
    padding:5px 7px!important;
    border-radius:8px!important;
  }
  .scorecard-main{gap:6px!important}
  .scorecard-avatar{width:26px!important;height:26px!important;min-width:26px!important;font-size:11px!important}
  .match-eyebrow{font-size:7px!important;letter-spacing:.04em!important}
  .scoreline b,.scoreline .scorecard-score{font-size:clamp(12px,3.2cqw,15px)!important}
  .scoreline b+ b{font-size:clamp(8px,1.8cqw,10px)!important}
  #scoreboard-mid{font-size:7px!important;padding-top:2px!important;margin-top:2px!important}
  .target-progress{height:3px!important;margin-top:4px!important}
}

/* Mobile landscape: keep scorecard compact inside the field */
@media(max-width:980px) and (orientation:landscape),
       (max-height:520px) and (orientation:landscape){
 #game .scoreboard{
  left:1%;top:1.5%;
  width:clamp(140px,28cqw,210px);
  max-width:38%;
  padding:5px 7px;
  border-radius:8px;
 }
 #game .scorecard-main{gap:5px}
 #game .scorecard-avatar{width:24px;height:24px;min-width:24px;font-size:11px}
 #game .match-eyebrow{font-size:7px;margin-bottom:1px;letter-spacing:.05em}
 #game .scoreline{gap:.7cqw}
 #game .scoreline b,#game .scoreline .scorecard-score{font-size:clamp(12px,2cqw,16px)!important}
 #game .scoreline b+ b{font-size:clamp(9px,1.4cqw,11px)!important}
 #game #scoreboard-mid{font-size:7px;padding:2px 0 0;margin-top:2px}
 #game .controls{top:1.2%;right:.7%;gap:.55cqw}
 #game .controls button{
  width:clamp(36px,7.5cqw,46px)!important;
  height:clamp(36px,7.5cqw,46px)!important;
  min-width:36px!important;min-height:36px!important;
  border-width:2px;
 }
 #game .controls svg{width:62%;height:62%}
}

/* Phone portrait: full-width top HUD bar above the field, still readable */
@media(orientation:portrait) and (max-width:900px){
 body.in-game{
  display:flex;align-items:center;justify-content:center;
  min-height:100svh;height:auto;overflow:auto;
  padding:max(12px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));
  box-sizing:border-box;
 }
 body.in-game #game{
  overflow:visible;flex-shrink:0;
  margin-top:max(128px,22vw);
  margin-bottom:max(120px,22vw);
 }
 #game .scoreboard{
  left:0;right:0;top:auto;
  bottom:calc(100% + 48px);
  width:100%;max-width:none;
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #2a7eb8;
  box-shadow:0 8px 24px #0007;
 }
 #game .scorecard-main{gap:10px}
 #game .scorecard-avatar{width:38px;height:38px;min-width:38px;font-size:15px}
 #game .match-eyebrow{font-size:10px;margin-bottom:4px;letter-spacing:.08em}
 #game .scoreline{gap:14px}
 #game .scoreline b,#game .scoreline .scorecard-score{font-size:clamp(18px,5.5vw,24px)!important}
 #game .scoreline b+ b{font-size:clamp(12px,3.5vw,16px)!important}
 #game #scoreboard-mid{font-size:11px;padding:5px 0 0;margin-top:5px}
 #game .delivery-info {font-size:11px}
 #game .controls {top:auto;bottom:calc(100% + 8px);left:auto;right:0;justify-content:flex-end;gap:10px;width:auto}
 #game .controls button {width:44px;height:44px;min-width:44px;min-height:44px}
 #game .controls svg{width:62%;height:62%}
 #game .shotbar {top:calc(100% + 10px);bottom:auto;left:0;width:100%;padding:10px;font-size:12px;border-radius:10px}
 #game .shotbar small {font-size:9px}.track{min-height:6px;margin:6px 0}
 #game #hit {top:calc(100% + 86px);bottom:auto;left:8px;width:72px;height:72px}#game #hit>b {font-size:10px}
 #game .radar {top:calc(100% + 86px);bottom:auto;right:8px;width:72px;height:72px}
 #game .radar:before {font-size:8px}.radar-legend{font-size:7px}
 #game #flash {font-size:22px}
 #game .target-progress {margin-top:6px;height:4px}
 #game-dialog {max-height:90svh}
}

@media(orientation:portrait) and (max-width:400px){
 #game .scoreboard{padding:8px 10px;border-radius:10px}
 #game .scorecard-avatar{width:34px;height:34px;min-width:34px;font-size:13px}
 #game .scoreline b,#game .scoreline .scorecard-score{font-size:18px!important}
 #game .scoreline b+ b{font-size:12px!important}
 #game .match-eyebrow,#game #scoreboard-mid{font-size:9px}
 #game .controls button{width:42px;height:42px;min-width:42px;min-height:42px}
 body.in-game #game{margin-top:96px;margin-bottom:112px}
}