/* /arcade — a retro game centre: dark room, neon signs, CRT scanlines, cabinets. Always dark
   (it's a night arcade) whatever the site theme. */
.arcade-page { --neon-pink: #ff3ea5; --neon-blue: #39d0ff; --neon-yellow: #ffe066; --floor: #0b0618;
	background: radial-gradient(ellipse at top, #24104a 0%, var(--floor) 55%) fixed, var(--floor); color: #efe6ff; }
.arcade-page::after { /* CRT scanlines over everything */
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.arcade-page .site-header { background: rgba(11, 6, 24, .9); border-bottom: 2px solid var(--neon-pink); }
.arcade-page .site-header a { color: #efe6ff; }
.arcade-page a { color: var(--neon-blue); }
.arcade-page .muted { color: #a998cc; }
.arc-main { padding-bottom: 40px; }

.arc-marquee { text-align: center; padding: 26px 8px 10px; }
.arc-marquee h1 { font-family: "Press Start 2P", monospace; font-size: clamp(20px, 6vw, 40px); line-height: 1.4; margin: 0 0 14px; letter-spacing: 2px; }
.arc-neon { color: #fff; text-shadow: 0 0 6px var(--neon-pink), 0 0 16px var(--neon-pink), 0 0 32px var(--neon-pink); }
.arc-neon.arc-blue { text-shadow: 0 0 6px var(--neon-blue), 0 0 16px var(--neon-blue), 0 0 32px var(--neon-blue); }
.arc-sub { margin: 0 auto 10px; max-width: 560px; line-height: 1.7; }
.arc-insert { font-family: "Press Start 2P", monospace; color: var(--neon-yellow); font-size: 14px; letter-spacing: 3px;
	text-shadow: 0 0 8px var(--neon-yellow); animation: arc-blink 1.1s steps(2) infinite; margin: 8px 0 0; }
@keyframes arc-blink { 50% { opacity: .1; } }

.arc-h { font-size: 1.1rem; color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 224, 102, .5); margin: 22px 0 10px; }
.arc-count { color: #fff; }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.arc-empty, .arc-closed { grid-column: 1 / -1; text-align: center; padding: 26px 10px; border: 2px dashed #4a3577; border-radius: 12px; color: #c9b9ee; }

/* a cabinet */
.cab { position: relative; display: flex; flex-direction: column; border-radius: 14px 14px 8px 8px; overflow: hidden;
	background: linear-gradient(#2a1458, #170b33); border: 2px solid var(--neon-blue);
	box-shadow: 0 0 14px rgba(57, 208, 255, .35), inset 0 0 20px rgba(0, 0, 0, .6); }
.cab.busy { border-color: var(--neon-pink); box-shadow: 0 0 14px rgba(255, 62, 165, .35), inset 0 0 20px rgba(0, 0, 0, .6); }
.cab-marquee { padding: 8px 10px; text-align: center; font-weight: 700; color: #1a0f33; background: var(--neon-yellow);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 12px rgba(255, 224, 102, .6); }
.cab-screen { aspect-ratio: 4 / 3; margin: 10px; border-radius: 10px; overflow: hidden; background: #000; display: grid; place-items: center;
	border: 3px solid #0a0614; box-shadow: inset 0 0 18px rgba(57, 208, 255, .25); }
.cab-screen img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: saturate(1.15) contrast(1.05); }
.cab-pixel { font-family: "Press Start 2P", monospace; font-size: 32px; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }
.cab-info { padding: 0 12px; }
.cab-info p { margin: 2px 0; font-size: .9rem; }
.cab-sys { font-family: "Press Start 2P", monospace; font-size: 9px !important; color: var(--neon-blue); letter-spacing: 1px; }
.cab-meta { color: #b9a9d9; font-size: .82rem !important; }
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.led.green { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: arc-blink 1.6s steps(2) infinite; }
.led.red { background: #f87171; box-shadow: 0 0 8px #f87171; }
.cab-coin { margin: 12px; padding: 10px; text-align: center; border-radius: 999px; font-weight: 700; text-decoration: none;
	color: #1a0f33 !important; background: var(--neon-yellow); box-shadow: 0 0 12px rgba(255, 224, 102, .7); }
.cab.busy .cab-coin { background: #f3eaff; box-shadow: none; }
.cab-coin:active { transform: scale(.97); }
.cab-big { max-width: 360px; margin: 0 auto; }
.cab-big .cab-coin { font-size: 1.15rem; padding: 14px; }
.arc-how ol { line-height: 1.9; padding-left: 22px; }

/* the shop floor (assets/arcade-floor.js): everyone on this page, walking */
.arc-floor { margin: 6px 0 4px; }
.fl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.fl-count { color: var(--neon-yellow); font-weight: 700; text-shadow: 0 0 8px rgba(255, 224, 102, .5); }
.fl-view { position: relative; border: 2px solid var(--neon-pink); border-radius: 12px; overflow: hidden; outline: none;
	box-shadow: 0 0 16px rgba(255, 62, 165, .35); touch-action: manipulation; }
.fl-view:focus-visible { border-color: var(--neon-yellow); }
.fl-view canvas { display: block; cursor: pointer; image-rendering: pixelated; }
.fl-coin { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 20px);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; border-radius: 999px; padding: 10px 18px;
	font: 700 1rem "Noto Sans Thai", sans-serif; color: #1a0f33; background: var(--neon-yellow); cursor: pointer;
	box-shadow: 0 0 14px rgba(255, 224, 102, .8); animation: fl-pop .25s ease-out; }
@keyframes fl-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.fl-emotes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.fl-btn { border: 1px solid #4a3577; background: #1b0f3a; color: #efe6ff; border-radius: 999px; padding: 5px 11px;
	font: 600 .9rem "Noto Sans Thai", sans-serif; cursor: pointer; }
.fl-btn:hover { border-color: var(--neon-blue); }
.fl-btn:active { transform: scale(.94); }
.fl-hint { text-align: center; color: #a998cc; font-size: .82rem; margin: 6px 0 0; }
.fl-say-btn { border-color: var(--neon-yellow); color: var(--neon-yellow); }
.fl-say { margin-top: 8px; padding: 10px; border: 1px solid #4a3577; border-radius: 12px; background: #140a2c; }
.fl-say-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.fl-say-tabs .fl-btn { flex: none; }
.fl-say-tabs .fl-btn.on { background: var(--neon-yellow); color: #1a0f33; border-color: var(--neon-yellow); }
.fl-say-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.fl-line { border: 1px solid #3a2a63; background: #f6efe0; color: #3a2618; border-radius: 10px; padding: 6px 10px;
	font: 600 .88rem "Noto Sans Thai", sans-serif; cursor: pointer; text-align: left; }
.fl-line:hover { background: #fff7d6; }
.fl-line:active { transform: scale(.97); }
.fl-fav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.fl-fav-line b { display: inline-block; min-width: 1.3em; margin-right: 3px; border-radius: 6px; background: #3a2618; color: #ffe27a; text-align: center; font-size: .78rem; }
.fl-say-help { margin: 0 0 8px; font-size: .82rem; color: #c9b9ee; }
.fl-say-help input { vertical-align: -2px; }
.fl-line.pinned { box-shadow: inset 0 0 0 2px var(--neon-yellow); }
.fl-line.pinned::before { content: "⭐ "; }
.fl-top { flex-wrap: wrap; }
.fl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fl-branch { display: inline-flex; align-items: center; gap: 4px; }
.fl-branch select { border: 1px solid #4a3577; background: #1b0f3a; color: #efe6ff; border-radius: 999px; padding: 5px 8px;
	font: 600 .88rem "Noto Sans Thai", sans-serif; }
.fl-note { margin: 0 0 6px; padding: 7px 12px; border-radius: 10px; background: #2a1a4f; color: #ffe27a; font-size: .88rem; }
.fl-me { margin: 0 0 8px; padding: 10px 12px; border: 1px solid #4a3577; border-radius: 12px; background: #140a2c; font-size: .9rem; }
.fl-me p { margin: 0 0 8px; }
.fl-me code { font: 700 1rem "Press Start 2P", monospace; font-size: .72rem; color: #ffe27a; letter-spacing: 1px; }
.fl-add { display: flex; gap: 6px; margin-bottom: 8px; }
.fl-add input, #fl-move-link { flex: 1; min-width: 0; border: 1px solid #4a3577; background: #0b0618; color: #efe6ff;
	border-radius: 8px; padding: 6px 10px; font: .9rem "Noto Sans Thai", sans-serif; }
#fl-move-link { width: 100%; margin-top: 6px; font-size: .75rem; }
.fl-friends { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.fl-friends li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl-x { padding: 3px 8px; }
.fl-move summary { cursor: pointer; color: #c9b9ee; }
.fl-move p { margin: 6px 0; color: #c9b9ee; font-size: .85rem; }
.fl-move .fl-secret { color: #ffd27a; font-weight: 700; }
.fl-move-qr img { display: block; max-width: 100%; height: auto; margin: 6px 0; image-rendering: pixelated; background: #fff; border-radius: 6px; }

/* insert coin: the cabinet's screen grows to fill the window (assets/arcade-floor.js zoomIn) */
.fl-zoom { position: fixed; z-index: 100; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 6px;
	background: #000; border-radius: 6px; box-shadow: 0 0 0 4px #141218, 0 0 40px rgba(57, 208, 255, .6);
	transition: left .75s cubic-bezier(.6, 0, .3, 1), top .75s cubic-bezier(.6, 0, .3, 1), width .75s cubic-bezier(.6, 0, .3, 1),
		height .75s cubic-bezier(.6, 0, .3, 1), border-radius .75s; }
.fl-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .9; }
.fl-zoom p, .fl-zoom b { position: relative; margin: 0; opacity: 0; transition: opacity .3s .55s; text-align: center; }
.fl-zoom p { font: 700 clamp(18px, 5vw, 34px) "Noto Sans Thai", sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px #000; padding: 0 16px; }
.fl-zoom b { font: 14px "Press Start 2P", monospace; color: #ffe066; text-shadow: 0 0 10px #ffe066; animation: arc-blink 1s steps(2) infinite; }
.fl-zoom::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .25) 0 2px, transparent 2px 4px); }
.fl-zoom.big { border-radius: 0; animation: fl-flash .9s ease-out; }
.fl-zoom.big p, .fl-zoom.big b { opacity: 1; }
@keyframes fl-flash { 70% { filter: brightness(1); } 82% { filter: brightness(2.4); } 100% { filter: brightness(1); } }

/* ⛶ full screen shop: the picture takes all the height, the bars stay at the bottom */
.arc-floor.fl-full { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	display: flex; flex-direction: column; background: #0b0618; overflow: auto; }
.arc-floor.fl-full .fl-view { flex: 1 1 0; min-height: 0; display: grid; align-items: center; overflow: hidden; }
.arc-floor.fl-full .fl-hint, .arc-floor.fl-full .fl-me { display: none; }
.arc-floor.fl-full .fl-emotes, .arc-floor.fl-full .fl-fav { flex: none; margin-top: 6px; }
html.fl-full-page, html.fl-full-page body { overflow: hidden; }
@media (max-height: 500px) { /* a phone on its side: one row of buttons only */
	.arc-floor.fl-full .fl-fav { display: none; }
	.arc-floor.fl-full .fl-top { margin-bottom: 4px; }
}

/* a dark cabinet: open it with your game (assets/arcade.js rentSheet) */
.arc-rent { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 2, 14, .78); }
.arc-rent-card { width: min(440px, 100%); max-height: 90vh; overflow: auto; padding: 18px; border-radius: 16px; background: #1b0f3a;
	border: 2px solid var(--neon-yellow); box-shadow: 0 0 24px rgba(255, 224, 102, .35); }
.arc-rent-card h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--neon-yellow); }
.arc-rent-card p { margin: 0 0 10px; font-size: .9rem; line-height: 1.6; }
.arc-rent-sub { color: #c9b9ee; }
.arc-rent-list { display: grid; gap: 6px; margin-bottom: 12px; }
.arc-rent-game { display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; padding: 10px 12px;
	border-radius: 10px; border: 1px solid #4a3577; background: #2a1458; color: #efe6ff; font: 600 .95rem "Noto Sans Thai", sans-serif; cursor: pointer; }
.arc-rent-game span { font: 10px "Press Start 2P", monospace; color: var(--neon-blue); }
.arc-rent-game:hover, .arc-rent-game:focus-visible { border-color: var(--neon-yellow); outline: none; }
.arc-rent-file { display: block; text-align: center; padding: 11px; border-radius: 999px; background: var(--neon-yellow); color: #1a0f33;
	font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.arc-rent-close { display: block; width: 100%; padding: 9px; border: 0; background: none; color: #c9b9ee; font: inherit; cursor: pointer; }
.cab-players { font-size: .82rem !important; color: #ffe066; }
.cab-screen { position: relative; }
.cab-live { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 4px; font: 700 10px/1.4 "Press Start 2P", monospace;
	color: #fff; background: #e11d48; box-shadow: 0 0 8px rgba(225, 29, 72, .8); animation: arc-blink 1.6s steps(2) infinite; }

/* blinking text / lights and the white flash can trouble people sensitive to motion or flicker:
   keep them still (shown, not hidden) when the device asks for less motion */
@media (prefers-reduced-motion: reduce) {
	.arc-insert, .led.green, .fl-zoom b, .cab-live { animation: none; }
	.fl-zoom.big, .fl-coin { animation: none; }
}

/* a cabinet whose game has no cover of ours: a made-up title screen in the console's colours with
   our name for it (as assets/arcade-floor.js draws on the floor), never the host's own picture */
.cab-title { display: grid; place-items: center; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; text-align: center;
	font-weight: 800; font-size: 1.05rem; line-height: 1.35; background: #2a2f3a; color: #eceef2; overflow-wrap: anywhere; }
.cab-title[data-sys="snes"] { background: #5b4b9a; color: #d9d0ff; }
.cab-title[data-sys="nes"] { background: #a83232; color: #ffd6d6; }
.cab-title[data-sys="gb"] { background: #3f5f2a; color: #c7e39a; }
.cab-title[data-sys="gbc"] { background: #0e7490; color: #bdf4fb; }
.cab-title[data-sys="gba"] { background: #4338ca; color: #d6dcff; }
/* the host's live picture: only when this visitor asks (assets/arcade.js liveOn) */
.cab-see { position: absolute; right: 6px; bottom: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid #4a3577;
	background: rgba(11, 6, 24, .82); color: #efe6ff; font: 600 .78rem "Noto Sans Thai", sans-serif; cursor: pointer; }
.cab-see:hover, .cab-see:focus-visible { border-color: var(--neon-blue); outline: none; }
.cab-flag { align-self: center; margin: -4px 0 10px; padding: 4px 10px; font-size: .78rem; color: #a998cc !important; text-decoration: none; }
.cab-flag:hover, .cab-flag:focus-visible { color: #fda4af !important; text-decoration: underline; }

/* no zoom on a quick double tap (iPad / iPhone Safari zoomed in for good on the floor and the cards);
   scrolling the page still works. The pinch is stopped in assets/arcade.js */
html, body { touch-action: manipulation; }
.fl-view, .fl-view canvas { touch-action: manipulation; }
button, a, .chip { touch-action: manipulation; }