/* MafiaReturns IRC Comics - house look (crimson, chalkboard, Neuton masthead, #151515 panels).
   Same-origin only: no web fonts, no external URL, so the page CSP can stay style-src 'self'.
   The strip keeps the 2013 frame geometry (730 x 460, left/right halves, bubbles over the
   faces) but scales with the frame width (container units), so a phone shows a whole frame. */

:root {
	color-scheme: dark;
	--cs-bg: #121212;
	--cs-panel: #151515;
	--cs-item: #181818;
	--cs-line: #2a2a2a;
	--cs-ink: #e0e0e0;
	--cs-dim: #b8b8b8;
	--cs-crimson: crimson;
	--cs-link: #ff6f86;
	--cs-serif: Neuton, Georgia, "Times New Roman", serif;
	--cs-sans: "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
	--cs-mono: "Courier New", monospace;
	--cs-board: url("/images/boxing/background_chalkboard_1_3508x2480.jpg");
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--cs-bg) var(--cs-board) center / cover fixed;
	color: var(--cs-ink);
	font: 16px/1.5 var(--cs-sans);
	text-align: center;
}

a { color: var(--cs-link); }
a:hover { color: #fff; }

:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.cs-page { max-width: 780px; margin: 0 auto; padding: 16px; }

/* No rule lines, and the title is ONE line that shrinks with the page (owner 2026-11-01 18:37 EST). Spaced out and
   uppercase, it is 25-29.1 font sizes wide (Cambria 25.0, Georgia 27.8, DejaVu Serif 29.1, measured 2026-11-01; Neuton
   is not served, so this is the fallback a visitor actually gets), so 1/30 of the masthead fits every one of them. */
.cs-mast {
	container-type: inline-size;
	margin: 8px 0 16px;
	padding: 10px 0;
}
.cs-mast h1 {
	margin: 0;
	padding-left: .5em; /* balances the trailing letter-spacing */
	color: #fff;
	font: 700 min(30px, 3.33cqw)/1.25 var(--cs-serif);
	letter-spacing: .5em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cs-panel {
	background: var(--cs-panel);
	border-radius: 12px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .4), inset 0 0 2px rgba(255, 255, 255, .04);
	margin: 16px 0;
	padding: 16px;
	text-align: left;
}
.cs-panel-title {
	margin: -16px -16px 16px;
	padding: 10px 16px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--cs-board) center / cover;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cs-note {
	background: var(--cs-panel);
	border-left: 4px solid var(--cs-crimson);
	border-radius: 8px;
	margin: 12px 0;
	padding: 12px 16px;
	text-align: left;
}

/* ---- the strip ---- */

/* minmax(0, 1fr): a frame is never wider than the page. A tall balloon stack makes a frame taller than 730:460, and
   with an auto column the aspect ratio then widened it too, past a phone's screen (measured 609 px on a 468 px strip,
   2026-10-30); pinned, the frame just grows taller and the background (object-fit: cover) fills it. */
.cs-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; container-type: inline-size; }

/* REFRESH, EDIT, SHARE float over the first frame's top right corner (owner 2026-10-30), so they take no space of
   their own. A COLUMN down the right edge, sized with the strip: a row across the top met the right speaker's balloons
   on a phone once three long lines stacked up (rendered 2026-10-30), while a column only meets a balloon that reaches
   the right edge, and the first frame's right balloons are kept short of it (.cs-frame:first-of-type below). */
.cs-tools {
	position: absolute;
	top: calc(5px + 1.2cqw);
	right: calc(5px + 1.2cqw);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: max(4px, .8cqw);
}
.cs-tools form { display: flex; margin: 0; }
.cs-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(28px, 5.4cqw);
	height: max(28px, 5.4cqw);
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(15, 15, 15, .72);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
.cs-tool:hover { background: var(--cs-crimson); color: #fff; }
.cs-tool:disabled { background: rgba(15, 15, 15, .72); cursor: not-allowed; opacity: .45; }
.cs-icon { display: block; width: 55%; height: 55%; }
.cs-under-tools { margin-right: calc(12px + max(28px, 5.4cqw)); }
/* the right speaker's balloons in the first frame stop short of the icon column: centred in the right half (25cqw
   from its middle to the edge), they may be at most 2 x (25cqw - icon - margins) wide */
.cs-frame:first-of-type .cs-right .cs-bubble { max-width: calc(50cqw - 2 * max(28px, 5.4cqw) - 7cqw); }

.cs-frame {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	aspect-ratio: 730 / 460;
	border: 5px solid #333;
	background: #888;
	container-type: inline-size;
	overflow: clip;
}
.cs-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cs-side {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	padding-top: 3cqw;
}
.cs-middle { grid-column: 1 / -1; justify-self: center; width: 50%; }

.cs-talk {
	position: relative;
	z-index: 2; /* above a raised hand or tall hair poking into the headroom */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8cqw;
	max-width: 100%;
	padding: 0 2cqw 1.6cqw;
}

.cs-bubble {
	position: relative;
	margin: 0;
	min-width: 19cqw;
	max-width: 46cqw;
	padding: 1.1cqw 2cqw;
	border-radius: 2.7cqw;
	background: #fff;
	color: #111;
	box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
	font: 600 max(10px, 1.8cqw)/1.3 var(--cs-sans);
	overflow-wrap: anywhere;
	text-align: center;
}
.cs-talk .cs-bubble:last-child::after {
	content: "";
	position: absolute;
	bottom: -1.3cqw;
	left: 28%;
	width: 2.4cqw;
	height: 2.4cqw;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
}
.cs-right .cs-talk .cs-bubble:last-child::after { left: auto; right: 28%; }
.cs-bubble.cs-action { border-radius: 0; font-style: italic; }
.cs-bubble.cs-action::after { display: none; }
.cs-who { font-weight: 700; font-style: normal; }

/* 2026-10-21 house-ink characters: every sprite is a 600 px canvas, sized by skeleton, feet on the bottom
   edge; a standing man is 470 px of it. 43.7cqw shows him at the old 250 px of a 730 px frame, and the
   negative margin lets the balloons sit in the canvas's empty headroom, where they sat before. */
.cs-char {
	display: block;
	width: auto;
	height: 43.7cqw;
	max-width: 100%;
	margin-top: -9cqw;
	object-fit: contain;
	object-position: bottom;
}
/* speakers face each other: a picture clearly facing away from the other speaker is mirrored (ComicPage::side) */
.cs-char.cs-flip { transform: scaleX(-1); }
.cs-name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	color: #fff;
	font: 700 max(9px, 1.5cqw)/1.2 var(--cs-sans);
	text-shadow: 0 0 3px #000, 0 0 3px #000;
	pointer-events: none;
}

/* ---- controls ---- */

.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-actions form { margin: 0; }

.cs-btn {
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--cs-crimson);
	color: #fff;
	cursor: pointer;
	font: 700 15px/1.2 var(--cs-sans);
}
.cs-btn:hover { background: #b0102f; }
a.cs-btn { display: inline-flex; align-items: center; text-decoration: none; }
.cs-btn.cs-quiet { background: #333; }
.cs-btn.cs-quiet:hover { background: #4a4a4a; color: #fff; }

/* ---- the line editor (EDIT): shown, order, name, words; dashed rows are empty ones for new lines ---- */

.cs-hint { margin: 0 0 12px; color: var(--cs-dim); font-size: 14px; }
/* Import N older lines above the rows, Import any new lines below them (owner 2026-10-31) */
.cs-import { margin: 0 0 12px; }
/* the editor form's default button: nameless, off screen, so Enter in a box updates the lines and never imports */
.cs-enter { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; }
.cs-rows { margin: 0 0 12px; padding: 0; list-style: none; }
.cs-row {
	display: grid;
	grid-template-columns: 28px 60px minmax(90px, 10em) 1fr;
	gap: 6px;
	align-items: center;
	margin: 6px 0;
	padding: 6px 8px;
	border: 1px solid var(--cs-line);
	border-radius: 10px;
	background: var(--cs-item);
}
.cs-row.cs-typed { box-shadow: inset 4px 0 0 var(--cs-crimson); } /* a line typed on the page, not said in chat */
.cs-row.cs-new { border-style: dashed; }
.cs-row.cs-bot .cs-nick { font-style: italic; } /* MRBot / MRDot: brought unticked, not counted toward the 50 */
.cs-row.cs-bot .cs-nick, .cs-row.cs-bot .cs-text { color: var(--cs-dim); }
.cs-show { width: 20px; height: 20px; margin: 0 4px; }
.cs-plus { color: var(--cs-dim); font-weight: 700; text-align: center; }
.cs-row input[type="text"],
.cs-row input[type="number"] {
	width: 100%;
	min-width: 0;
	min-height: 38px;
	padding: 6px 8px;
	border: 1px solid #3a3a3a;
	border-radius: 6px;
	background: #0f0f0f;
	color: var(--cs-ink);
	font: 15px/1.3 var(--cs-sans);
}
.cs-row input::placeholder { color: #9a9a9a; }
.cs-ord { text-align: center; }
@media (max-width: 560px) {
	.cs-row { grid-template-columns: 28px 56px 1fr; }
	.cs-row .cs-text { grid-column: 1 / -1; }
}

.cs-share { display: block; color: var(--cs-dim); font-size: 14px; }
.cs-share input {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px;
	border: 1px solid var(--cs-line);
	border-radius: 8px;
	background: var(--cs-item);
	color: var(--cs-ink);
	font: 14px/1.4 var(--cs-mono);
}

.cs-foot { margin: 24px 0 8px; color: var(--cs-dim); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}