@font-face {
	font-family: 'Atari';
	src: url('/watari/fonts/digital808.medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Square';
	src: url('/watari/fonts/square.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Digital';
	src: url('/watari/fonts/digital808.medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@keyframes scan {
	0% { background-position: 0 0; }
	100% { background-position: 0 100%; }
}

body {
	background: #0a0a0a;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	font-family: 'Atari', 'Courier New', monospace;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

#game-container, {
	max-width: 800px;
	min-height: 600px;
	max-height: 90vh;
	position: relative; 
	  align-items: center;     /* Vertically centers children */
	  justify-content: center; /* Horizontally centers children */
	  height: 100vh; 
}

#scanlines {
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	pointer-events: none;
	z-index: 10;
	background: repeating-linear-gradient(
		0deg,
		rgba(0,0,0,0) 0px,
		rgba(0,0,0,0) 2px,
		rgba(0,0,0,0.3) 2px,
		rgba(0,0,0,0.3) 3px,
		rgba(0,0,0,0) 3px,
		rgba(0,0,0,0) 4px
	);
	background-size: 100% 4px;
	animation: scan 1s linear infinite;
	opacity: 0.5;
}

/* Vignette effect */
#game-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 11;
	background: radial-gradient(
		ellipse at center,
		transparent 60%,
		rgba(0,0,0,0.6) 100%
	);
}

#gameCanvas {
	display: block;
	background: #000;
	width: 100%;
	height: auto;
	max-width: 800px;
	max-height: 600px;
	aspect-ratio: 4/3;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	border: 4px solid #222;
	align-items:center;
}

#controls {
	display: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 20;
}

.ctrl-btn {
	pointer-events: auto;
	font-family: 'Atari', monospace;
	text-transform: uppercase;
	font-size: 38px;
	letter-spacing: 2px;
	color: #dedede;
	opacity: .7;
	user-select: none;
	touch-action: none;
	transition: all 0.05s;
}

.ctrl-btn:active {
	transform: scale(0.92);
}

#dpad {
	position: absolute;
	bottom: 4%;
	left: 3%;
	width: 34vw;
	height: 34vw;
	max-width: 150px;
	max-height: 150px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	pointer-events: none;
}

.dpad-btn {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: rgba(255,255,255,0.85);
	background: rgba(100,200,255,0.12);
	border: 2px solid rgba(100,200,255,0.3);
	user-select: none;
	touch-action: none;
}

.dpad-btn:active {
	background: rgba(100,200,255,0.35);
}

.dpad-up    { grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.dpad-left  { grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.dpad-right { grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.dpad-down  { grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }

.action-btn {
	position: absolute;
	bottom: 8%;
	right: 6%;
	width: 22vw;
	height: 22vw;
	max-width: 92px;
	max-height: 92px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(255,60,60,0.25);
	border: 2px solid rgba(255,80,80,0.6);
	box-shadow: 0 0 12px rgba(255,60,60,0.25);
}

.action-btn:active {
	background: rgba(255,60,60,0.5);
}
 
@media (pointer: coarse) {
	#controls {
		display: block;
	}
}
 
.loading {
	color: #444;
	font-family: 'Atari', monospace;
	font-size: 14px;
	text-align: center;
	padding: 20px;
	letter-spacing: 2px;
	animation: blink 1s step-end infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

.atari-red { color: #ff4444; }
.atari-blue { color: #4488ff; }
.atari-green { color: #44ff44; }
.atari-yellow { color: #ffdd44; }
.atari-purple { color: #cc44ff; }
.atari-orange { color: #ff8844; }

@media (max-width: 820px) {
	#game-container {
		width: 100%;
		max-width: 800px;
		border-width: 4px;
	}
}

@media (max-width: 500px) {
	#game-container {
		border-width: 2px;
	}
}

.menu-screen {
	width: 100%;
	max-width: 800px;
	min-height: 600px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 24px;
	background: #0a0a0a;
	border: 4px solid #1a1a1a;
	border-radius: 4px;
	color: #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px; 
}

@media (max-width: 820px) {
	.menu-screen {
		width: 800px;
		max-width: none;
		transform: scale(var(--menu-scale, 1));
		transform-origin:   center;
	}
}
  
.screen-title {
	color: #eaa113;
	font-size: 42px;
	max-height: 42px; 
	margin-top:60px;
	letter-spacing: 5px;
	margin: 0;
}

.big-button {
	font-family: 'Atari', monospace;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #eaa113;
	border: 0;
	border-radius: 5px;
	color: #000;
	font-size: 30px;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 15px;
	padding-bottom: 4px;
}

.big-button:disabled {
	background: #333;
	color: #666;
	cursor: not-allowed;
}

/* ---------- Start screen ---------- */

.start-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top:100px;
}

.side-sprite {
	width: 130px;
	height: 130px;
	image-rendering: pixelated;
}

.watari-title {
	color: #eaa113;
	font-size: 120px;
	letter-spacing: 6px;
	margin: 0;
	text-shadow: 0 0 25px rgba(90, 89, 88, 0.6);
}

.credits {
	text-align: center;
	color: #eee;
}

.credit-line {
	margin: 1px 0;
	line-height: 31px;
	font-size: 32px;
	letter-spacing: 2px;
	text-transform: uppercase;
}


.instructions-loop {
	font-size: 24px;
	color: #888;
	text-transform: uppercase;
	text-align: center;
	min-height: 2.4em;
	letter-spacing: 2px;
	max-width: 600px;
}

.start-button {
	background: #eaa113;
	color: #000;
	font-size: 48px;
	padding-top: 0px;
	padding-left: 24px;
	padding-right: 20px;
	padding-bottom: 5px;
	margin-bottom: 18px;
}

#audioplayer {
	height:5px;
	width: 5px;
}

/* ---------- Team select screen ---------- */

.teamselect-body {
	width: 95%; 
	display: flex;
	gap: 10px;
	align-items: flex-start;
	justify-content: center;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 8px;
	flex: 1;
}

.team-tile {
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--team-color, #444);
	border-radius: 3px;
	padding: 6px 4px;
	text-align: center;
	cursor: pointer;
	color: #ccc;
}

.team-tile.selected {
	background: var(--team-color, #444);
	color: #000;
	box-shadow: 0 0 12px var(--team-color, #444);
}

.team-tile-name {
	font-size: 42px;
	letter-spacing: 4px;
}

.team-tile-style {
	font-size: 18px;
	opacity: 0.8;
	margin-top: 0px;
}

.team-tile-attr {
	display: inline-block; 
	opacity:.7;
	margin-right: 3px;
}

.team-preview-panel {
	width: 140px;
	padding-top: 60px;
	padding-left: 10px;
	flex-shrink: 0;
	text-align: center;
}

.team-preview-sprite {
	width: 130px;
	height: 130px;
	image-rendering: pixelated; 
	animation: randomHop 10s infinite;
}	 
 
@keyframes randomHop {
  0% { transform: translate(0, 0); }
  20% { transform: translate(0px, -10px); }
  40% { transform: translate(5px, 0px); }
  55% { transform: translate(0px, -10px); }
  70% { transform: translate(0px, 0px); }
  84% { transform: translate(-6px, 0px); }
  0% { transform: translate(0, 0); }
}

.team-preview-name {
	font-size: 12px;
	color: #fff;
	margin-top: 4px;
}

.team-preview-style {
	font-size: 26px;
	margin-top: 2px;
	letter-spacing: 1px;
	color: #888787;
}


.winners-panel {
	width: 100%;
	max-width: 600px;
	text-align: center;
}

.winners-title {
	color: #5e5e5e;
	font-size: 32px;
	max-height: 35px;
	letter-spacing: 2px;
	margin-bottom: 0px;
}

.winners-list {
	font-size: 20px;
	color: #aaa;
	max-height: 50px;
	overflow-y: auto;
}

.winner-entry {
	padding: 2px 0;
	display-inline: block;
}

.winners-empty {
	color: #555;
	font-style: italic;
}

/* ---------- Interstitial / control panel ---------- */

.interstitial-title h2 {
	font-size: 30px; 
}	

.interstitial-body {
	width: 100%;
	display: flex;
	gap: 16px;
}

.panel-col {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 3px;
	padding: 10px;
	box-sizing: border-box;
}

.standings-col { flex: 0 0 28%; }
.scores-col { flex: 0 0 28%; }
.ace-col { flex: 0 0 40%; }

.panel-heading {
	color: #eaa113;
	font-size: 25px;
	letter-spacing: 1px;
	margin-bottom: 4px;
	margin-top: -4px;
}

.standings-row {
	display: flex;
	gap: 7px;
	font-size: 19px;
	padding: 0px 0;
	color: #ddd;
}

.standings-row.is-player {
	color: #dfc200;
	font-weight: bold;
}

#standings-list .standings-row:nth-child(2) {
	border-bottom: 1px solid #444;
}

.standings-rank { width: 1.5em; }
.standings-code { flex: 1; }
.standings-record { width: 3em; text-align: right; }
.standings-points { width: 3em; text-align: right; }

.league-score-row {
	font-size: 22px;
	color: #ccc;
	padding: 2px 0;
}

.league-score-empty {
	font-size: 22px;
	color: #888; 
}

.ace-box {
	display: flex;
	gap: 3px;
	margin-bottom: 16px;
}

.ace-portrait {
	width: 74px;
	height: 90px;
	margin-right: 10px;
	border: 1px #eaa113 solid;
	background-color: #eaa113;
	opacity: .8;
	object-fit: cover;
	image-rendering: pixelated;
	flex-shrink: 0;
}

.ace-label {
	color: #eaa113;
	font-size: 25px;
	letter-spacing: 1px;
	margin-bottom: 2px;
	margin-top: -4px;
}

.ace-quote {
	font-size: 23px;
	line-height: 21px; 
	color: #ddd; 
}

.next-game-info {
	text-align: center;
}

.next-game-label {
	color: #eaa113;
	font-size: 25px; 
	letter-spacing: 1px;
}

.next-opponent {
	font-size: 55px;
	color: #fff;
	margin: 0px 0 12px;
}