/* Simple centering and TV layout */
html,body{
	height:100%;
	margin:0;
}
body{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#111;
	font-family:system-ui,Segoe UI,Arial;
}
.tv-container{
	position:relative;
	width:640px;
	max-width:90%;
}
#static-canvas{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:0; /* behind CRT image */
  pointer-events:none;
}
#static-video{
	position:absolute;
	left:50%;
	top:50%;
	/* smaller framed video, centered over the CRT screen */
	width:70%;
	height:auto;
	max-width:85%;
	max-height:80%;
	transform:translate(-50%,-50%);
	z-index:0; /* behind CRT image */
	object-fit:cover;
	pointer-events:none;
	display:none; /* start hidden until turned on */
	opacity:0.98;
	border-radius:2px;
}

/* Balloon-specific sizing (smaller to better fit the TV screen) */
#static-video.balloon-video{
	left: 44%;
	width: var(--balloon-width, 36%);
	height: auto;
	max-width: var(--balloon-max-width, 66%);
	max-height: var(--balloon-max-height, 72%);
	object-fit: contain; /* preserve whole frame */
	transition: width 160ms ease, max-width 160ms ease, max-height 160ms ease;
}

/* Millfield PSA sizing (smaller than other videos) */
#static-video.millfield-video{
	left: 43.5%;
	width: var(--millfield-width, 44%);
	height: auto;
	max-width: var(--millfield-max-width, 50%);
	max-height: var(--millfield-max-height, 60%);
	object-fit: contain;
	/* squeeze horizontally while preserving video height */
	transform: translate(-50%,-50%) scaleX(var(--millfield-squeeze, 0.85));
	transform-origin: center center;
	transition: width 160ms ease, max-width 160ms ease, max-height 160ms ease, transform 160ms ease;
}

/* hide canvas by default when using video; canvas kept as fallback */
#static-canvas{ display:none; }
#crt{
	display:block;
	width:100%;
	height:auto;
	user-select:none;
	-webkit-user-drag:none;
	position:relative;
	z-index:1;
}
#power-btn{
	position:absolute;
	left:62%;
	bottom:41%;
	/* Use percentages so the hit area scales with the container/image */
	width:8.75%; /* approx 56px @ 640px container width */
	aspect-ratio: 2 / 1; /* keeps a rectangular shape while scaling */
	background: transparent; /* overlay hidden visually but still present for clicks */
	border: none;

	padding:0;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	z-index:2; /* on top of CRT */
}
.dial{
	display:block;
	width:90%;
	height:90%;
	border-radius:4px;
	background:transparent;
	background-size:contain;
	background-repeat:no-repeat;
	box-shadow:0 2px 6px rgba(0,0,0,0.6);
	pointer-events:none;
}

/* If you place a dial image at images/dial.png it will be used automatically */
.dial{ background-image: url('images/dial.png'); }

/* top overlay dial (images/dial_1.png) */
#dial-1{
	position:absolute;
	right:31%;
	bottom:50%;
	width:5%; /* scales similarly to power button */
	height:auto;
	z-index:3; /* on top of controls */
	transform-origin:center center;
	touch-action:none; /* let JS handle pointer events smoothly */
	cursor:grab;
	user-select:none;
	-webkit-user-drag:none;
	transition: transform 120ms ease, filter 120ms ease; /* smooth visual feedback */
}
#dial-1.dragging{ cursor:grabbing; }

/* hide hotspots (visual only) */
.dial-hotspot{
	display:none !important;
	pointer-events:none !important;
}
.dial-hotspot.left{ right:13%; }
.dial-hotspot.right{ right:4%; }

/* Toggle visibility quickly by adding .hidden-hotspots to .tv-container */
.tv-container.hidden-hotspots .dial-hotspot{ display:none; }

/* helper: use .static-dial on the image to force it fully visible and non-interactive */
:root{ --dial-size: 100%; /* override this to change size globally */ --millfield-squeeze: 0.85; /* horizontal squeeze for PSA video (1 = no squeeze) */ }
.static-dial{
	filter:none !important;
	opacity:1 !important;
	pointer-events:none !important;
	/* use a variable for quick tuning (percent of container width) */
	width: var(--dial-size) !important;
	height: auto !important;
	/* allow custom rotation anchor point (percentages or keywords) */
	transform-origin: var(--dial-origin, 60% 60%);
	/* position helpers to nudge placement while positioning */
	right:0% !important;
	bottom:0% !important;
}
/* hide any dial-hotspot siblings that follow the static dial image */
.static-dial ~ .dial-hotspot{ display:none !important; }

/* visual indicator for rotation origin (dev aid) */
.dial-origin-handle{
	display:none !important;
	pointer-events:none !important;
}
.dial-origin-handle.dragging{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.06); }

.dial-origin-label{
	display:none !important;
	pointer-events:none !important;
}

/* helper: position the label slightly above the handle by default */
.dial-origin-label.above{ transform: translate(-50%, -140%); }
.dial-origin-label.right{ transform: translate(8px, -50%); }

/* rotation percentage indicator (small, unobtrusive) */
.dial-rotation-indicator{
	position:absolute;
	right:3%;
	bottom:4%;
	padding:6px 8px;
	background: rgba(0,0,0,0.55);
	color:#fff;
	font-size:12px;
	border-radius:4px;
	z-index:6;
	pointer-events:none;
}

#power-btn:focus{ outline:none; }
#power-btn:focus-visible{ outline:3px solid #ffd; border-radius:6px; }