/* ============================================================
   match.css — 실시간 경기 (가로 화면)
   ============================================================ */
.scene.match{padding:0;overflow:hidden;background:#060c0f}
.pitch-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.m-hud{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.m-hud button{pointer-events:auto}

/* ---------- 스코어보드 ---------- */
.m-top{
  position:absolute;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  padding:6px 10px 6px 12px;border-radius:99px;
  background:rgba(6,12,10,.8);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);box-shadow:0 6px 20px -8px rgba(0,0,0,.8);
}
.m-score{display:flex;align-items:center;gap:9px}
.m-score .ts{font-size:11.5px;font-weight:700;color:var(--txt-2);max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-score .t0{color:#eef4f2}
.m-score .t1{color:#e5606a}
.m-score b{font-size:18px;font-weight:800;letter-spacing:.02em}
.m-clock{font-size:12px;font-weight:700;color:var(--accent);padding-left:9px;border-left:1px solid rgba(255,255,255,.14)}
.m-pause{width:26px;height:26px;border-radius:50%;display:grid;grid-auto-flow:column;gap:3px;place-content:center;background:rgba(255,255,255,.12)}
.m-pause i{width:3px;height:10px;border-radius:1px;background:var(--txt)}

/* ---------- 스태미나 ---------- */
.m-stam{
  position:absolute;left:calc(var(--sal) + 16px);top:calc(var(--sat) + 12px);
  width:132px;height:16px;border-radius:99px;
  background:rgba(6,12,10,.75);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;overflow:hidden;
}
.m-stam i{position:absolute;left:2px;top:2px;bottom:2px;border-radius:99px;background:var(--accent);transition:width .15s linear}
.m-stam span{position:relative;font-size:9px;font-weight:800;color:#08150f;padding-left:8px;letter-spacing:.04em}
.m-stam.low i{background:#e5606a}
.m-stam.low span{color:#fff}

/* ---------- 배너 / 피드 ---------- */
.m-banner{
  position:absolute;top:32%;left:50%;transform:translate(-50%,-50%) scale(.92);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 28px;border-radius:var(--r-l);text-align:center;
  background:rgba(6,12,10,.85);border:1px solid rgba(255,255,255,.16);
  opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.m-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.m-banner b{font-size:32px;font-weight:800;letter-spacing:-.02em}
.m-banner span{font-size:12.5px;color:var(--txt-2)}
.m-banner.good b{color:var(--accent)}
.m-banner.bad b{color:#e5606a}

.m-feed{position:absolute;top:calc(var(--sat) + 36px);left:calc(var(--sal) + 16px);display:flex;flex-direction:column;gap:5px;max-width:40%}
.m-feed .fi{
  padding:4px 9px;border-radius:7px;font-size:11px;font-weight:600;
  background:rgba(6,12,10,.72);border:1px solid rgba(255,255,255,.1);color:var(--txt-2);
  animation:feedIn .18s var(--ease) both;
}
.m-feed .fi.good{color:var(--accent);border-color:var(--accent-line)}
.m-feed .fi.bad{color:#eb8b92;border-color:rgba(229,96,106,.4)}
.m-feed .fi.out{opacity:0;transition:opacity .35s}
@keyframes feedIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---------- 조이스틱 ---------- */
.jzone{position:absolute;left:0;bottom:0;width:46%;height:72%;pointer-events:auto;touch-action:none}
.jstick{position:absolute;left:110px;bottom:96px;width:0;height:0;transform:translate(-50%,-50%);opacity:.5;transition:opacity .12s}
.jstick.on{opacity:1}
.jstick-ring{
  position:absolute;left:-54px;top:-54px;width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,16,12,.35),rgba(8,16,12,.55));
  border:2px solid rgba(255,255,255,.22);
}
.jstick-knob{
  position:absolute;left:-27px;top:-27px;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#c9d6d2);
  border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:transform .02s linear;
}

/* ---------- 액션 버튼 (다이아몬드) ---------- */
.apad{
  position:absolute;right:calc(var(--sar) + 20px);bottom:calc(var(--sab) + 20px);
  display:grid;gap:6px;
  grid-template-columns:repeat(3,auto);
  grid-template-areas:". shoot ." "skill sprint pass" ". tackle .";
  place-items:center;
}
.abtn{
  position:relative;width:70px;height:70px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(14,22,18,.78);border:2px solid rgba(255,255,255,.2);color:var(--txt);
  transition:transform .07s,background .12s,border-color .12s;
  backdrop-filter:blur(4px);
}
.abtn .lb{font-size:13.5px;font-weight:800;letter-spacing:-.03em}
.abtn em{font-style:normal;font-size:8.5px;color:var(--txt-3);letter-spacing:.06em}
.abtn .ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none}
.abtn.hit{transform:scale(.9)}
.abtn.shoot{grid-area:shoot;width:80px;height:80px;background:rgba(62,207,142,.24);border-color:var(--accent-line);color:var(--accent)}
.abtn.shoot.hit,.abtn.shoot.charging{background:rgba(62,207,142,.45);color:#062015}
.abtn.shoot.charging .ring{
  background:conic-gradient(var(--accent) var(--p,0%),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);
  mask:radial-gradient(circle,transparent 60%,#000 62%);
}
.abtn.pass{grid-area:pass;background:rgba(90,180,255,.18);border-color:rgba(90,180,255,.42);color:#8ecdff}
.abtn.skill{grid-area:skill;background:rgba(192,140,255,.18);border-color:rgba(192,140,255,.42);color:#c8a4ff}
.abtn.tackle{grid-area:tackle;background:rgba(229,96,106,.18);border-color:rgba(229,96,106,.42);color:#f19aa1}
.abtn.sprint{grid-area:sprint;width:58px;height:58px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.abtn.sprint.hit{background:rgba(255,224,138,.35);border-color:#ffe08a;color:#3a2b06}
.abtn.cool{opacity:.45}
.abtn.cool .ring{
  background:conic-gradient(rgba(255,255,255,.5) var(--c,0%),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);
  mask:radial-gradient(circle,transparent 62%,#000 64%);
}

/* ---------- 가로 전환 안내 ---------- */
.rotate-gate{
  position:absolute;inset:0;z-index:20;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(4,8,7,.94);text-align:center;padding:24px;pointer-events:auto;
}
.rotate-gate.show{display:flex}
.rotate-gate b{font-size:17px;font-weight:700}
.rotate-gate span{font-size:12.5px;color:var(--txt-3)}
.rg-icon{
  width:54px;height:86px;border-radius:10px;border:3px solid var(--accent);
  animation:rotateHint 2.2s ease-in-out infinite;
}
@keyframes rotateHint{
  0%,30%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}
}

/* ---------- 결과 / 조작 안내 ---------- */
.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sum-grid div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 3px;background:var(--surface-2);border-radius:var(--r-s)}
.sum-grid span{font-size:9.5px;color:var(--txt-3)}
.sum-grid b{font-size:13.5px;font-weight:700}

.key-guide{display:flex;flex-direction:column;gap:6px}
.key-guide div{display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.key-guide b{width:78px;flex:none;color:var(--accent);font-weight:700}
.key-guide span{color:var(--txt-2)}

/* 작은 가로 화면 */
@media (orientation:landscape) and (max-height:420px){
  .abtn{width:60px;height:60px}
  .abtn .lb{font-size:12px}
  .abtn.shoot{width:68px;height:68px}
  .abtn.sprint{width:50px;height:50px}
  .jstick{left:96px;bottom:78px}
  .jstick-ring{left:-46px;top:-46px;width:92px;height:92px}
  .jstick-knob{left:-23px;top:-23px;width:46px;height:46px}
}

/* 대회 배지 · 유니폼 색 점 */
.m-comp{
  align-self:center;margin-top:4px;padding:3px 10px;border-radius:99px;
  font-size:10.5px;font-weight:700;letter-spacing:-.01em;color:var(--txt-2);
  background:rgba(6,12,10,.6);border:1px solid rgba(255,255,255,.12);
}
.m-comp.big{color:#e3ccff;background:rgba(60,30,90,.62);border-color:rgba(192,140,255,.45)}
.kit-dot{
  display:inline-block;width:9px;height:9px;border-radius:3px;margin:0 5px;
  vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.4);
}