/* 화면 뼈대: 월드 캔버스, 전광판, 중계 링크 다이얼로그 */
:root {
  font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #fff;
  background: #a3cdc6;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
/* 두 번 두드려 확대되거나 화면이 끌려 움직이지 않게 한다 */
html { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #ccd9ed; outline-offset: 4px; }

.world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* 하늘. 39% 지점이 지평선이고 월드의 안개 색(#a3cdc6)과 이어진다 */
  background: linear-gradient(#1d6a9c 0%, #5aa3bf 22%, #a3cdc6 39%, #a3cdc6 100%);
}
/* 경기장 맵: 하늘 대신 어두운 실내 */
.theme-arena body { background: #03060f; }
.theme-arena .world { background: radial-gradient(ellipse at 50% 30%, #0c1c44 0%, #060b1c 60%, #03060f 100%); }
.arena-canvas { position: absolute; inset: 0; outline: none; }
/* 캔버스가 전광판(DOM)보다 위에 있고, 전광판 자리만 투명하게 뚫어서 보여 준다 */
.arena-canvas canvas { display: block; position: relative; z-index: 1; width: 100%; height: 100%; touch-action: none; }
.arena-canvas::after { content: attr(data-error); position: absolute; top: 55%; left: 15%; font-size: 13px; max-width: 45%; }
.css-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.screen-origin { display: none; }
.world-screen { width: 1280px; height: 720px; background: #03070f; overflow: hidden; pointer-events: auto; backface-visibility: hidden; }
.world-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.idle-screen {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 118%, #0b7d96 0%, #0a2c50 36%, #061326 68%, #030811 100%);
  box-shadow: inset 0 0 90px #0009;
}
.file-mode .idle-screen::after {
  content: "영상은 웹 주소로 열어야 재생돼요";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

dialog {
  margin: auto;
  width: calc(100% - 40px);
  max-width: 410px;
  color: #fff;
  background: #202a39;
  border: 1px solid #536077;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 80px #0009;
}
dialog::backdrop { background: #060b15b0; backdrop-filter: blur(4px); }
dialog form { position: relative; display: flex; flex-direction: column; gap: 18px; }
dialog label { font-size: 18px; font-weight: 700; }
dialog input { width: 100%; padding: 12px; color: #fff; background: #101827; border: 1px solid #58677d; border-radius: 5px; font-size: 13px; outline: none; }
dialog input:focus { border-color: #c3d6fa; }
dialog p { margin: 0; color: #f4aea8; font-size: 12px; }
dialog .close { position: absolute; right: -12px; top: -12px; background: none; border: 0; color: #fff; display: flex; padding: 6px; }
dialog .connect { padding: 11px; background: #465b9c; color: #fff; border: 0; border-radius: 5px; }
dialog .connect:disabled { opacity: 0.5; }