/* The Autism Forge Arcade.  Game-specific styling only: the site themes are
 * not changed.  While the arcade is open it takes the main area and Gamja
 * keeps running (it carries the chat) but folds away; #main chat is shown
 * beside the game instead. */
body { overflow: hidden; }
#chat-frame { flex: 1 0 120px; min-height: 120px; }
body.arcade-open #chat-frame { flex: 0 0 0; min-height: 0; height: 0; }
/* The chat sign-in card is part of the page flow and would leave the open
   arcade no height.  It is hidden while the arcade is open (guests can play)
   and comes back when the arcade closes. */
body.arcade-open #chat-entry { display: none; }

/* site.css gives every section a 2rem margin; the arcade fills its area. */
.arcade { margin: 0; }
.arcade {
	--a-bg: #070b18; --a-panel: #0d1528; --a-line: #22325a; --a-text: #e9f2ff; --a-muted: #9eb5dc;
	--a-teal: #61e6d2; --a-yellow: #ffdf5c; --a-pink: #ff6f91;
	flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
	background: var(--a-bg); color: var(--a-text); border-bottom: 1px solid var(--a-line);
	font-family: system-ui, "Segoe UI", sans-serif;
}
.arcade[hidden] { display: none; }
.arcade button, .arcade input, .arcade select { font: inherit; }

.arcade-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #0a1122; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.arcade-bar h2 { margin: 0 6px 0 2px; padding: 0; border: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--a-yellow); }
.arcade-bar h2::after { display: none; }
.arcade-status { color: var(--a-muted); font-size: 13px; }
/* Game events (joins, levels, results) show here, one line, so they never
   cover the game.  In fullscreen the bar is gone and they show in the stage. */
.arcade-ticker { flex: 1; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--a-teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.5s; }
.arcade-ticker.good { color: #5cff7a; }
.arcade-ticker.warn { color: var(--a-pink); }
.arcade-ticker.result { color: var(--a-yellow); }
.arcade-ticker.fade { opacity: 0; }
.arcade-tools { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.arcade-tools select { background: var(--a-panel); color: var(--a-text); border: 1px solid var(--a-line); border-radius: 8px; padding: 5px 8px; }
.arcade-btn, .arcade-tools .btn, .arcade-tools button, .arcade-tools a {
	background: var(--a-panel); color: var(--a-text); border: 1px solid var(--a-line); border-radius: 9px;
	padding: 6px 11px; cursor: pointer; text-decoration: none; font-size: 14px; line-height: 1.2; min-height: 34px;
	text-transform: none; letter-spacing: 0; margin: 0;
}
.arcade-btn:hover, .arcade-tools button:hover { border-color: var(--a-teal); }
.arcade-btn:focus-visible, .arcade button:focus-visible, .arcade input:focus-visible, .arcade select:focus-visible { outline: 3px solid var(--a-teal); outline-offset: 2px; }
.arcade-btn[aria-pressed="true"] { border-color: var(--a-teal); box-shadow: inset 0 0 0 1px var(--a-teal); }
.arcade-btn .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--a-pink); color: #111; font-size: 12px; font-weight: 800; }
.arcade-btn .badge[hidden] { display: none; }

.arcade-body { flex: 1; display: flex; min-height: 0; position: relative; }
.arcade-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; container-type: size; }

/* ---- the game stage: 16:9, as large as the space allows ------------------ */
.game-stage {
	position: relative; flex: 0 0 auto; margin: 8px auto 0; background: #000; border-radius: 10px; overflow: hidden;
	aspect-ratio: 16 / 9; width: min(100cqw - 16px, (100cqh - 44px) * 16 / 9);
	box-shadow: 0 0 0 1px var(--a-line), 0 10px 30px rgba(0, 0, 0, 0.5); outline: none;
}
.game-stage[hidden] { display: none; }
.game-stage:focus-visible { box-shadow: 0 0 0 3px var(--a-teal); }
.game-stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; margin: 0; aspect-ratio: auto; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
#game-canvas[hidden] { display: none; }
#game-canvas.doom-canvas { image-rendering: pixelated; object-fit: contain; background: #000; }
.arcade-j2me { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #05070f; }
.arcade-j2me[hidden] { display: none; }
.arcade-help { margin: 6px 12px 8px; text-align: center; color: var(--a-muted); font-size: 14px; min-height: 1.4em; }

/* Lobby, results and "watching" controls drawn over the canvas. */
.arcade-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.arcade-overlay[hidden] { display: none; }
.arcade-overlay > * { pointer-events: auto; }
.overlay-card { margin-top: 10%; background: rgba(9, 15, 32, 0.92); border: 1px solid var(--a-line); border-radius: 16px; padding: 18px 22px; min-width: min(420px, 86%); max-width: 92%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
.overlay-lead { margin: 0 0 8px; color: var(--a-teal); font-weight: 700; }
.overlay-note { color: var(--a-muted); font-size: 14px; margin: 10px 0; }
.lobby-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lobby-players li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.lobby-players .chip { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.lobby-players .tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #22325a; color: var(--a-muted); }
.lobby-players .tag.you { background: var(--a-teal); color: #062018; }
.overlay-actions, .overlay-bottom { display: flex; gap: 8px; flex-wrap: wrap; }
.overlay-bottom { position: absolute; bottom: 7%; left: 0; right: 0; justify-content: center; }
.overlay-banner { position: absolute; top: 10px; left: 10px; display: flex; gap: 10px; align-items: center; background: rgba(9, 15, 32, 0.85); border: 1px solid var(--a-line); border-radius: 10px; padding: 6px 10px; font-weight: 700; }
.arcade-overlay button, .arcade-answer button, .arcade-chat-form button, .tile-mode, .live-actions button, .j2me-more {
	background: #16244a; color: var(--a-text); border: 1px solid #36508a; border-radius: 10px; padding: 9px 16px; cursor: pointer; font-weight: 700; min-height: 40px;
}
.arcade button.btn-primary, .tile-mode.primary { background: var(--a-teal); border-color: var(--a-teal); color: #04201a; }
.arcade button:disabled { opacity: 0.55; cursor: default; }
.arcade button.btn-danger { background: transparent; border-color: var(--a-pink); color: var(--a-pink); }

.arcade-toasts { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; max-width: 60%; }
.game-stage:fullscreen .arcade-toasts { display: flex; }
.arcade-toast { background: rgba(9, 15, 32, 0.9); border: 1px solid var(--a-line); border-left: 4px solid var(--a-teal); border-radius: 9px; padding: 7px 11px; font-size: 14px; font-weight: 600; transition: opacity 0.5s; }
.arcade-toast.good { border-left-color: #5cff7a; }
.arcade-toast.warn { border-left-color: var(--a-pink); }
.arcade-toast.result { border-left-color: var(--a-yellow); }
.arcade-toast.fade { opacity: 0; }

/* The compact chat strip inside the stage: shown in fullscreen and when the
   chat panel is hidden. */
.stage-chat { position: absolute; left: 10px; bottom: 10px; max-width: 55%; display: none; flex-direction: column; gap: 3px; pointer-events: none; }
.game-stage:fullscreen .stage-chat, .arcade.chat-hidden .stage-chat { display: flex; }
.stage-chat-line { background: rgba(5, 9, 20, 0.72); border-radius: 7px; padding: 3px 8px; font-size: 13px; transition: opacity 0.8s; overflow-wrap: anywhere; }
.stage-chat-line.fade { opacity: 0; }
.stage-chat-form { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.stage-chat-form[hidden] { display: none; }
.stage-chat-form input { width: 100%; background: rgba(5, 9, 20, 0.92); color: var(--a-text); border: 1px solid var(--a-teal); border-radius: 9px; padding: 9px 12px; }

/* Placed by arcade.js over the cue panel the Trivia renderer leaves for it. */
.arcade-answer { position: absolute; left: 3%; bottom: 3%; width: 66%; box-sizing: border-box; display: flex; gap: 8px; align-items: center; background: #0b1430; border: 1px solid var(--a-teal); border-radius: 12px; padding: 4px 8px; }
.arcade-answer[hidden] { display: none; }
.arcade-answer label { font-weight: 700; color: var(--a-teal); white-space: nowrap; }
.arcade-answer input { flex: 1; min-width: 0; height: 100%; box-sizing: border-box; background: #0b1430; color: var(--a-text); border: 1px solid #36508a; border-radius: 9px; padding: 4px 10px; font-size: 16px; }
.arcade-answer button { min-height: 0; height: 100%; padding: 0 14px; }

/* ---- #main chat beside the game ----------------------------------------- */
.arcade-chat { width: 320px; flex: 0 0 320px; display: flex; flex-direction: column; border-left: 1px solid var(--a-line); background: #0a1020; min-height: 0; }
.arcade-chat[hidden] { display: none; }
.arcade-chat-head { padding: 8px 12px; border-bottom: 1px solid var(--a-line); color: var(--a-muted); font-size: 13px; }
.arcade-chat-head strong { color: var(--a-text); font-size: 15px; }
.arcade-chat-log { flex: 1; overflow: auto; list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.35; }
.chat-line { overflow-wrap: anywhere; }
.chat-line time { color: #5f7397; font-size: 11px; font-variant-numeric: tabular-nums; }
.chat-line.chat-action span { font-style: italic; }
.chat-line.chat-notice { color: var(--a-muted); }
.arcade-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--a-line); }
.arcade-chat-form input { flex: 1; min-width: 0; background: #0b1430; color: var(--a-text); border: 1px solid #36508a; border-radius: 9px; padding: 8px 10px; }

/* ---- the menu ----------------------------------------------------------- */
.arcade-menu { width: 100%; max-width: 1180px; margin: 0 auto; padding: 14px 16px 24px; }
.arcade-menu[hidden] { display: none; }
.arcade-live { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, #12324a, #10173a); border: 1px solid #2c5a7a; border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.arcade-live[hidden] { display: none; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: #5cff7a; box-shadow: 0 0 10px #5cff7a; flex: 0 0 auto; }
.live-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.live-text span { color: var(--a-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.arcade-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.arcade-tab { background: transparent; color: var(--a-muted); border: 1px solid var(--a-line); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 700; }
.arcade-tab[aria-selected="true"] { background: #16244a; color: var(--a-text); border-color: var(--a-teal); }
.arcade-intro h2, .arcade-section { margin: 4px 0 6px; font-size: 22px; border: 0; text-transform: none; letter-spacing: 0; color: var(--a-text); }
.arcade-intro h2::after, .arcade-section::after { display: none; }
.arcade-intro p { margin: 0 0 14px; color: var(--a-muted); max-width: 70ch; }
.arcade-section { margin-top: 22px; }
.arcade-empty { color: var(--a-muted); }
.arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.arcade-tile { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--a-line); background: var(--a-panel); transition: border-color 0.15s, transform 0.15s; }
.arcade-tile:hover, .arcade-tile:focus-within { border-color: var(--a-teal); transform: translateY(-2px); }
.tile-art { height: 92px; display: flex; align-items: center; justify-content: center; font-size: 52px; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 55%), linear-gradient(135deg, var(--from), var(--to)); }
.tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile-body h3 { margin: 0; font-size: 18px; }
.tile-description { margin: 0; color: #c7d4e9; font-size: 14px; line-height: 1.45; flex: 1; }
.tile-meta { margin: 0; color: #8aa0c6; font-size: 12px; }
.tile-modes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tile-mode { padding: 7px 12px; min-height: 36px; font-size: 14px; }
.tile-mode:hover { border-color: var(--a-teal); }

.j2me-filters, .scores-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.j2me-search, .j2me-category, .scores-filters select { background: var(--a-panel); color: var(--a-text); border: 1px solid #36508a; border-radius: 10px; padding: 9px 12px; }
.j2me-search { flex: 1 1 240px; }
.j2me-count { color: var(--a-muted); margin: 0; font-size: 13px; }
.j2me-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.j2me-game { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: var(--a-panel); color: var(--a-text); border: 1px solid var(--a-line); border-radius: 12px; padding: 9px 10px; cursor: pointer; min-height: 56px; }
.j2me-game:hover { border-color: var(--a-teal); }
.j2me-game img, .j2me-icon { grid-row: span 2; width: 32px; height: 32px; image-rendering: pixelated; font-size: 26px; text-align: center; }
.j2me-game strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j2me-game span:not(.j2me-icon) { color: var(--a-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j2me-more { margin: 14px auto 0; display: block; }
.j2me-credit { color: var(--a-muted); font-size: 12px; margin: 18px 0 4px; text-align: center; }
.j2me-credit a { color: var(--a-teal); }
.j2me-more[hidden] { display: none; }
.scores-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.scores-table th, .scores-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--a-line); }
.scores-table th { color: var(--a-muted); font-weight: 700; }
.scores-table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--a-yellow); font-weight: 800; }

/* The Games button shows when something is being played. */
#open-games.live { position: relative; border-color: #5cff7a; }
#open-games.live::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #5cff7a; box-shadow: 0 0 8px #5cff7a; }

/* ---- small screens: chat becomes a drawer over the game ------------------ */
@media (max-width: 820px) {
	.arcade-bar .wide { display: none; }
	/* The page's own header is redundant while the arcade is open on a small
	   screen (the arcade bar has Close); the display strip stays. */
	body.arcade-open header.chat-top { display: none; }
	.arcade-live { flex-wrap: wrap; }
	.live-text { flex: 1 1 calc(100% - 40px); }
	.live-actions { width: 100%; justify-content: flex-start; }
	.arcade-chat { position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 340px); z-index: 5; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6); }
	.arcade-menu { padding: 10px; }
	.arcade-grid { grid-template-columns: 1fr; }
	.tile-art { height: 70px; font-size: 40px; }
	.game-stage { width: min(100cqw - 8px, (100cqh - 40px) * 16 / 9); margin-top: 4px; }
	.arcade-toasts { max-width: 80%; }
	.arcade-toast { font-size: 13px; padding: 5px 9px; }
	.overlay-card { margin-top: 0; padding: 12px 14px; }
}
/* Portrait phones: the 16:9 game across the top, chat filling the space
   underneath (instead of a drawer over a small game). */
@media (max-width: 820px) and (orientation: portrait) and (min-height: 501px) {
	.arcade .arcade-body { flex-direction: column; }
	.arcade .arcade-chat {
		position: static; width: auto; flex: 0 0 34%; min-height: 120px;
		box-shadow: none; border-left: 0; border-top: 1px solid var(--a-line);
	}
	.arcade:not([data-view="menu"]) .arcade-main { flex: 0 0 auto; height: calc((100vw - 8px) * 9 / 16 + 72px); }
	.arcade:not([data-view="menu"]) .arcade-chat { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.arcade-tile, .arcade-toast, .stage-chat-line { transition: none; }
	.arcade-tile:hover, .arcade-tile:focus-within { transform: none; }
}

/* Site themes style every input (html.theme-site … input); the arcade keeps
   its own dark fields on every theme, so these rules carry the shell's id. */
#game-shell input, #game-shell select {
	background: #0b1430; color: var(--a-text); border: 1px solid #36508a;
}
#game-shell input::placeholder { color: var(--a-muted); }
#game-shell input:focus, #game-shell select:focus { outline: 2px solid var(--a-teal); outline-offset: 1px; }
#game-shell .stage-chat-form input { background: rgba(5, 9, 20, 0.92); border-color: var(--a-teal); }
#game-shell .j2me-search, #game-shell .j2me-category, #game-shell .scores-filters select { background: var(--a-panel); }
/* Tools a local game adds to the bar (Doom's campaign picker and Source link)
   take the arcade's look on every theme.  Doom's own Fullscreen button does
   the same as the arcade's, which stays, so Doom's is hidden. */
#game-shell .arcade-tools .btn, #game-shell .arcade-tools button, #game-shell .arcade-tools a {
	/* !important only because site themes set .btn backgrounds with it. */
	background: var(--a-panel) !important; color: var(--a-text); border: 1px solid var(--a-line); box-shadow: none;
}
#game-shell .arcade-tools select { background: var(--a-panel); color: var(--a-text); border: 1px solid var(--a-line); }
#game-shell .arcade-tools .doom-toolbar button[title="Toggle fullscreen"] { display: none; }
#game-shell .arcade-tools .j2me-fullscreen { display: none; }   /* the arcade's own Fullscreen does the same */
#game-shell .doom-toolbar { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#game-shell .arcade-tools a { display: inline-flex; align-items: center; font-weight: 400; }