/* ------------------------------------------------------------------ *
 * Game look: button refresh
 * ------------------------------------------------------------------ */

/* Keep the original page background and greyscale theme. Only the play
   controls get a new look: rounded tactical buttons, warm amber selection
   highlights instead of the default green, and a soft inner highlight. */
#controls .elementButton,
#controls .controlButton:not(.icon) {
	border-radius: 10px;
	border-color: rgba(255, 255, 255, 0.22);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.2));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	letter-spacing: 0.02em;
}

#controls .elementButton:hover,
#controls .controlButton:not(.icon):hover {
	border-color: rgba(255, 193, 94, 0.7);
	filter: brightness(1.15);
}

#controls button.icon {
	border-radius: 8px;
	border-color: rgba(255, 255, 255, 0.16);
	background-color: rgba(255, 255, 255, 0.045);
}

#controls button.icon:hover {
	border-color: rgba(255, 193, 94, 0.5);
	background-color: rgba(255, 193, 94, 0.1);
}

#controls .elementButton[current="true"] {
	border-color: #ffc15e !important;
	box-shadow: 0 0 0 2px rgba(255, 193, 94, 0.35), 0 0 18px rgba(255, 150, 0, 0.35);
	filter: brightness(1.08);
}

#categoryControls button {
	border-radius: 7px 7px 0 0;
	font-weight: bold;
	letter-spacing: 0.04em;
}

#categoryControls button:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

#categoryControls button[current="true"] {
	background: linear-gradient(to bottom, rgba(255, 193, 94, 0.35), rgba(255, 140, 0, 0.12));
	border-bottom: 3px solid #ffc15e;
	color: #ffd89b;
}

/* Minimal footer: only the help button remains. */
.sndbx-footer-mini {
	justify-content: flex-start;
	max-width: none;
	margin-top: 0;
	padding: 0 0 0 12px;
	font-size: 1.4em;
	line-height: 1;
	opacity: 0.65;
}

.sndbx-footer-mini .footer-title {
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	line-height: 1;
}

.sndbx-footer-mini .footer-title:hover {
	border-color: rgba(255, 193, 94, 0.6);
	color: #ffd89b;
}

.sndbx-footer-mini #gameInfo {
	display: inline;
	padding-right: 0;
	color: #ffd89b;
}

.sndbx-footer-mini .footer-title:hover {
	opacity: 1;
}

/* Full-width canvases should not waste 55px on the original wide-layout gap. */
#gameDiv.gameDiv-wide {
	margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * Anything Advertising side rails
 * ------------------------------------------------------------------ */

.aa-rail {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	z-index: 5;
}

html.ad-layout-both #left_skyscraper,
html.ad-layout-both #right_skyscraper,
html.ad-layout-wide #left_skyscraper,
html.ad-layout-wide #right_skyscraper {
	display: flex;
	top: 50%;
	transform: translateY(-50%);
}

html.ad-layout-wide .aa-rail {
	width: 300px;
}

html.ad-layout-wide .aa-slot {
	width: 300px;
	height: 250px;
}

/* Responsive bottom banner when the gutters cannot fit side rails. */
.aa-bottom {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 8px auto 0;
	width: 100%;
}

html.ad-layout-banner .aa-bottom {
	display: flex;
}

.aa-bottom.aa-bottom-portrait {
	display: none !important;
}

.aa-bottom .aa-slot {
	width: min(728px, calc(100vw - 24px));
	height: 90px;
}

@media (max-width: 500px) {
	.aa-bottom .aa-slot {
		height: 100px;
	}
}

.aa-bottom:has(.aa-slot[data-aa-ad-status="empty"]),
.aa-bottom:has(.aa-slot[data-aa-ad-status="error"]),
.aa-bottom:has(.aa-slot[data-aa-ad-status="closed"]),
.aa-bottom:has(.aa-slot[data-aa-ad-status="limit"]) {
	display: none !important;
}

html.ad-layout-both #left_skyscraper {
	left: 8px;
}

html.ad-layout-both #right_skyscraper {
	right: 8px;
}

@media (max-height: 700px) {
	.aa-rail {
		display: none !important;
	}
}

.aa-rail-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.32);
	user-select: none;
}

.aa-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 300px;
	overflow: hidden;
	border-radius: 8px;
	background: transparent;
}

.aa-house {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	text-align: center;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.5);
	font-family: Arial, Helvetica, sans-serif;
}

.aa-house strong {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.aa-house span {
	font-size: 11px;
}

.aa-house small {
	font-size: 10px;
	line-height: 1.4;
}

.aa-house code {
	font-family: monospace;
	font-size: 0.95em;
}

/* Collapse individual empty slots, but keep the other slot in the rail. */
.aa-slot[data-aa-ad-status="empty"],
.aa-slot[data-aa-ad-status="error"],
.aa-slot[data-aa-ad-status="closed"],
.aa-slot[data-aa-ad-status="limit"] {
	display: none;
}

/* One floating ad on screens too narrow for the side rails. */
.aa-overlay {
	display: none;
	position: fixed;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
	flex-direction: column;
	gap: 4px;
	width: 160px;
	max-width: 42vw;
}

html.ad-layout-banner .aa-overlay {
	display: flex;
}

.aa-overlay-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.aa-overlay .aa-slot {
	width: 100%;
	height: 600px;
	max-height: 70vh;
}

.aa-overlay-close {
	background: none;
	border: none;
	padding: 0 2px;
	color: #bbb;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.aa-overlay-close:hover {
	color: #fff;
}

.aa-overlay:has(.aa-slot[data-aa-ad-status="empty"]),
.aa-overlay:has(.aa-slot[data-aa-ad-status="error"]),
.aa-overlay:has(.aa-slot[data-aa-ad-status="closed"]),
.aa-overlay:has(.aa-slot[data-aa-ad-status="limit"]) {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Share tab
 * ------------------------------------------------------------------ */

#sndbxSharePanel {
	font-family: "VT323", "Press Start 2P", Arial, Helvetica, sans-serif;
	font-size: 1.05em;
	line-height: 1.35;
}

.sndbx-note {
	color: #b9b9b9;
	font-size: 0.86em;
	margin: 0.35em 0 0.8em;
}

.sndbx-note a {
	color: #7bffff;
}

.sndbx-note code {
	font-family: monospace;
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.08);
	padding: 0 3px;
	word-break: break-all;
}

.sndbx-row {
	display: flex;
	gap: 8px;
	margin: 0.45em 0;
}

.sndbx-name-row .sndbx-input {
	width: 100%;
}

.sndbx-input {
	flex: 1;
	min-width: 0;
	background: #101010;
	color: #fff;
	border: 2px solid var(--theme-dark, #3f3f3f);
	padding: 6px 8px;
	font-family: inherit;
	font-size: 1em;
}

.sndbx-input:focus {
	outline: none;
	border-color: var(--theme, #7f7f7f);
}

.sndbx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0.55em 0;
}

.sndbx-btn {
	border-radius: 6px;
	background: var(--theme-darker, #0f0f0f);
	color: #fff;
	border: 2px solid var(--theme-dark, #3f3f3f);
	padding: 5px 10px;
	font-family: inherit;
	font-size: 0.95em;
	cursor: pointer;
	white-space: nowrap;
}

.sndbx-btn:hover {
	filter: brightness(1.5);
}

.sndbx-btn.primary {
	border-color: #5ee05e;
	color: #bfffbf;
}

.sndbx-btn.danger {
	border-color: #a33;
	color: #ffb3b3;
}

.sndbx-msg {
	padding: 6px 8px;
	margin: 0.5em 0;
	border-left: 4px solid;
	font-size: 0.9em;
}

.sndbx-msg.ok {
	border-color: #5ee05e;
	color: #bfffbf;
	background: rgba(94, 224, 94, 0.06);
}

.sndbx-msg.error {
	border-color: #e05e5e;
	color: #ffb3b3;
	background: rgba(224, 94, 94, 0.06);
}

.sndbx-link {
	display: flex;
	gap: 6px;
	margin: 0.5em 0;
}

.sndbx-link .sndbx-input {
	font-size: 0.78em;
}

.sndbx-account {
	margin: 0.65em 0 0.2em;
	font-size: 0.9em;
	color: #b9b9b9;
}

.sndbx-account a {
	color: #7bffff;
}

.sndbx-list {
	max-height: 215px;
	overflow-y: auto;
	margin-top: 0.35em;
	padding-right: 4px;
}

.sndbx-item {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 6px 0;
}

.sndbx-item-main {
	display: flex;
	flex-direction: column;
}

.sndbx-item-name {
	font-size: 1em;
	word-break: break-word;
}

.sndbx-item-meta {
	font-size: 0.78em;
	color: #999;
}

.sndbx-item-actions {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.sndbx-item-actions .sndbx-btn {
	padding: 2px 8px;
	font-size: 0.85em;
}

.sndbx-usage {
	font-size: 0.72em;
	color: #888;
	margin-top: 0.4em;
}

/* ------------------------------------------------------------------ *
 * Chromebook / low-power profile
 * ------------------------------------------------------------------ */

html.low-power #gameDiv {
	box-shadow: none;
}

html.low-power .menuParent {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html.low-power .aa-rail,
html.low-power .sndbx-btn {
	transition: none;
}


/* ------------------------------------------------------------------ *
 * Add-ons picker — element-button style
 * ------------------------------------------------------------------ */

#addonsMenu .menuText {
	font-family: "Press Start 2P", "VT323", Arial, sans-serif;
	font-size: 10px;
}

.addons-intro {
	margin: 0 0 7px;
	color: #cfcfcf;
	font-family: "VT323", Arial, sans-serif;
	font-size: 1.25em;
	line-height: 1.2;
}

.addons-count {
	margin: 0 0 8px;
	color: #ffd89b;
	font-family: "VT323", Arial, sans-serif;
	font-size: 1.15em;
}

.addons-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.addon-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 47px;
	padding: 7px 6px;
	border: 2px solid #101010;
	border-radius: 5px;
	background: var(--addon-bg, #8a8a8a);
	color: #161616;
	font-family: "Press Start 2P", "VT323", Arial, sans-serif;
	font-size: 9px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
	cursor: pointer;
	filter: grayscale(0.85) brightness(0.55);
	transition: none;
}

.addon-card:hover {
	filter: grayscale(0.2) brightness(1.08);
}

.addon-card.on {
	filter: none;
	border-color: #ffc15e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 10px rgba(255, 150, 0, 0.24);
}

.addon-card .addon-name {
	display: block;
	padding: 0 11px;
}

.addon-card .addon-state {
	position: absolute;
	top: 3px;
	right: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	letter-spacing: 0.1em;
	color: rgba(0, 0, 0, 0.52);
}

.addon-card.on .addon-state {
	color: #5a2b00;
}

#addonsApply {
	position: static;
	margin-top: 10px;
	border: 2px solid #ffc15e;
	border-radius: 5px;
	color: #ffd89b;
}

.addons-advanced {
	margin-top: 8px;
	text-align: center;
	font-family: "VT323", Arial, sans-serif;
	font-size: 1.05em;
	color: #777;
}

.addons-advanced a {
	color: #9fd8ff;
}

@media (max-width: 900px) {
	.addons-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.addons-grid {
		grid-template-columns: 1fr;
	}
}