MainShell
{
	// Kill default grey Panel chrome — paint the whole surface.
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	// Project font is Assets/fonts/pressstart2p.ttf (Poppins is not packaged).
	font-family: pressstart2p, "Press Start 2P", Consolas, "Courier New", monospace;
	color: #e8e8e8;
	pointer-events: all;
	background-color: #08060c;

	.shell
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		background-color: #08060c;
		overflow: hidden;
	}

	.screen
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
	}

	// ----- WARNING (soft, not metal) -----
	.warning
	{
		background-color: #0a1a24;
	}

	.warn-frame
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		padding: 32px 40px;
		width: 580px;
		background-color: #0e1c28ee;
		border: 3px solid #3a7a98;
		border-radius: 0;
	}

	.warn-frame.pulse
	{
		animation-name: warnpulse;
		animation-duration: 1.4s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}

	.warn-banner
	{
		font-size: 22px;
		font-weight: 700;
		color: #e8c040;
		letter-spacing: 1px;
		margin-bottom: 18px;
		text-align: center;
		white-space: nowrap;
	}

	.warn-body
	{
		flex-direction: column;
		align-items: center;
		margin-bottom: 16px;
		width: 100%;
	}

	.warn-line
	{
		font-size: 15px;
		color: #c0d8e8;
		text-align: center;
		margin-bottom: 6px;
		width: 100%;
	}

	.warn-line.strong
	{
		font-size: 15px;
		font-weight: 700;
		color: #f0a060;
		margin-top: 6px;
		margin-bottom: 10px;
	}

	.warn-line.dim
	{
		font-size: 13px;
		color: #7a9aac;
		margin-top: 10px;
	}

	.warn-parody
	{
		font-size: 12px;
		color: #6a8a9a;
		margin-bottom: 22px;
		text-align: center;
	}

	// ----- ACCESSIBILITY: Reduce Strobe -----
	// Softens frantic CSS pulses; DeathFeel/BoomFeel also scale shake/flash in code.
	.reduce-strobe .fish.meth,
	.reduce-strobe .meth-aura,
	.reduce-strobe .meth-eyes,
	.reduce-strobe .meth-sweat,
	.reduce-strobe .wd-shiver,
	.reduce-strobe .jacked-veins,
	.reduce-strobe .fish.stoned,
	.reduce-strobe .stoned-aura,
	.reduce-strobe .stoned-eyes,
	.reduce-strobe .stoned-spark
	{
		animation-name: none;
		animation-duration: 0s;
	}

	.reduce-strobe .meth-aura
	{
		opacity: 0.25;
	}

	.reduce-strobe .stoned-aura
	{
		opacity: 0.3;
	}

	.reduce-strobe .boom-shock
	{
		animation-duration: 0.75s;
		opacity: 0.35;
		border-width: 2px;
	}

	.reduce-strobe .boom-white-flash,
	.reduce-strobe .death-flash
	{
		// Code already dims; cap CSS so overlays never full-screen blast
		// (opacity set inline — keep pointer-events none)
	}

	.reduce-strobe .warn-frame.pulse
	{
		animation-name: none;
	}

	.reduce-strobe.ending.strobe-end .ending-frame,
	.reduce-strobe .ending.strobe-end .ending-frame
	{
		animation-name: none;
	}

	.reduce-strobe .fish.just-taped .m80-prop
	{
		animation-duration: 0.2s;
	}

	.reduce-strobe .m80-spark
	{
		animation-name: none;
		opacity: 0.4;
	}

	.settings-help
	{
		font-size: 11px;
		color: #7a9aac;
		text-align: center;
		margin-top: 4px;
		margin-bottom: 14px;
		width: 100%;
		padding: 0 8px;
	}

	// ----- ENDINGS -----
	.ending
	{
		background-color: #080c14;
		justify-content: center;
		align-items: center;
	}

	.ending.end-good
	{
		background-color: #0a2030;
	}

	.ending.end-bad
	{
		background-color: #100808;
	}

	.ending.end-mixed
	{
		background-color: #101018;
	}

	.ending.strobe-end .ending-frame
	{
		animation-name: warnpulse;
		animation-duration: 0.55s;
		animation-iteration-count: infinite;
	}

	.ending-frame
	{
		flex-direction: column;
		align-items: center;
		width: 640px;
		padding: 36px 40px;
		background-color: #102030;
		border: 3px solid #4a90b0;
		border-radius: 0;
	}

	.ending.end-good .ending-frame
	{
		border-color: #50a878;
		background-color: #143028;
	}

	.ending.end-bad .ending-frame
	{
		border-color: #c04040;
		background-color: #281018;
	}

	.ending.end-mixed .ending-frame
	{
		border-color: #a08840;
		background-color: #282018;
	}

	.ending-kicker
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #90b0c0;
		margin-bottom: 10px;
		text-align: center;
	}

	.ending-title
	{
		font-size: 28px;
		font-weight: 800;
		color: #f0f8ff;
		margin-bottom: 8px;
		text-align: center;
	}

	.ending-tagline
	{
		font-size: 12px;
		font-weight: 600;
		color: #a8c0d0;
		margin-bottom: 18px;
		text-align: center;
		max-width: 520px;
	}

	.ending.end-good .ending-tagline
	{
		color: #90d0a8;
	}

	.ending.end-bad .ending-tagline
	{
		color: #e09090;
	}

	.ending.end-mixed .ending-tagline
	{
		color: #d0c080;
	}

	.ending-line
	{
		font-size: 14px;
		font-weight: 600;
		color: #e0eef8;
		text-align: center;
		margin-bottom: 18px;
		min-height: 64px;
		width: 100%;
		line-height: 22px;
	}

	.ending-meta
	{
		font-size: 11px;
		color: #7090a0;
		margin-bottom: 10px;
		text-align: center;
	}

	.ending-hint
	{
		font-size: 11px;
		color: #80a0b0;
		margin-top: 10px;
		text-align: center;
	}

	.ending-menu-btn
	{
		margin-top: 16px;
		min-width: 180px;
		justify-content: center;
	}

	// ----- TITLE SCREEN (arcade / solid game menu) -----
	.menu
	{
		background-color: transparent;
		justify-content: center;
		align-items: center;
	}

	.settings
	{
		background-color: transparent;
	}

	.menu-bg
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #060a10;
		overflow: hidden;
		pointer-events: none;
	}

	.menu-wallpaper
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		image-rendering: pixelated;
	}

	.menu-bg-dim
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #040810;
		opacity: 0.52;
		pointer-events: none;
	}

	.menu-bg-dim.heavy
	{
		opacity: 0.68;
	}

	.menu-center
	{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		z-index: 5;
		font-family: Press Start 2P, pressstart2p, Consolas, Courier New, monospace;
		pointer-events: all;
	}

	// Simple title + buttons — no badge / tagline / footer clutter
	.menu-title
	{
		width: 92%;
		max-width: 1100px;
		font-size: 52px;
		font-weight: 400;
		color: #ffffff;
		letter-spacing: 2px;
		margin-bottom: 12px;
		text-align: center;
		white-space: normal;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		text-shadow:
			-3px -3px 0 #000, 0 -3px 0 #000, 3px -3px 0 #000,
			-3px 0 0 #000, 3px 0 0 #000,
			-3px 3px 0 #000, 0 3px 0 #000, 3px 3px 0 #000;
	}

	.menu-sub
	{
		font-size: 10px;
		font-weight: 400;
		color: #7a98a8;
		letter-spacing: 1px;
		margin-bottom: 28px;
		text-align: center;
		text-shadow: -1px -1px 0 #000, 1px 1px 0 #000;
	}

	.menu-links
	{
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.menu-link
	{
		font-size: 16px;
		font-weight: 400;
		color: #e8f4ff;
		letter-spacing: 2px;
		margin-bottom: 12px;
		padding: 12px 28px;
		cursor: pointer;
		text-align: center;
		background-color: #143040;
		border: 2px solid #3a6080;
		border-radius: 0;
		border-bottom: 4px solid #0a2030;
		width: 260px;
		justify-content: center;
		text-shadow: -2px -2px 0 #000, 2px 2px 0 #000;
	}

	.menu-link.primary
	{
		font-size: 18px;
		color: #102010;
		background-color: #e8c040;
		border-color: #ffe080;
		border-bottom-color: #806020;
		margin-bottom: 18px;
		letter-spacing: 2px;
		text-shadow: none;
		font-weight: 400;
	}

	.menu-link.quiet
	{
		font-size: 12px;
		color: #a0b8c8;
		background-color: #102838;
		border-color: #2a5060;
		border-bottom-color: #0a1820;
		margin-bottom: 10px;
		padding: 10px 20px;
		letter-spacing: 1px;
		width: 220px;
	}

	.menu-link:hover
	{
		color: #ffffff;
		border-color: #6ab0d0;
		background-color: #1a5068;
	}

	.menu-link.primary:hover
	{
		color: #102010;
		background-color: #ffe060;
		border-color: #fff0a0;
	}

	.menu-link.quiet:hover
	{
		color: #e8f0f8;
		background-color: #1a4050;
	}

	.menu-link.danger
	{
		color: #e0a0a0;
		border-color: #604040;
		border-bottom-color: #301818;
	}

	.menu-link.danger:hover
	{
		color: #ff8080;
		background-color: #402028;
		border-color: #a05050;
	}

	// Kept for Settings + warning panels
	.menu-panel
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
		padding: 36px 40px;
		width: 440px;
		background-color: #0e1c28;
		border: 3px solid #2a5068;
		border-radius: 0;
		z-index: 2;
	}

	.menu-panel.simple
	{
		padding: 24px 28px 20px 28px;
		width: 300px;
		background-color: #0e1c28ee;
		border: 3px solid #2a5068;
		border-radius: 0;
	}

	.kicker
	{
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 2px;
		color: #6a9ab8;
		margin-bottom: 12px;
		white-space: nowrap;
		text-transform: uppercase;
	}

	.title
	{
		font-size: 36px;
		font-weight: 700;
		color: #f0f8fc;
		letter-spacing: 0.5px;
		text-transform: none;
		text-align: center;
		white-space: nowrap;
	}

	.menu-panel.simple .title
	{
		font-size: 28px;
		margin-bottom: 20px;
	}

	.title.small
	{
		font-size: 22px;
		margin-bottom: 16px;
	}

	.tagline
	{
		margin-top: 10px;
		margin-bottom: 28px;
		font-size: 14px;
		color: #8ab0c4;
		text-align: center;
		width: 100%;
	}

	.menu-buttons
	{
		flex-direction: column;
		align-items: stretch;
		width: 260px;
	}

	.menu-panel.simple .menu-buttons
	{
		width: 220px;
	}

	.menu-foot
	{
		margin-top: 22px;
		font-size: 11px;
		color: #5a8090;
	}

	// ----- BUTTONS (GBA slab) -----
	.btn
	{
		padding: 14px 20px;
		margin-bottom: 10px;
		background-color: #1a4058;
		border: 2px solid #4a8aaa;
		border-radius: 0;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.5px;
		color: #e8f4fc;
		text-align: center;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		text-transform: none;
	}

	.btn:hover
	{
		border-color: #7ac0d8;
		background-color: #245870;
		color: #ffffff;
	}

	.btn.primary
	{
		background-color: #2a7090;
		border-color: #6ab8d8;
		color: #ffffff;
	}

	.btn.primary:hover
	{
		background-color: #3588a8;
		border-color: #90d0e8;
	}

	.btn.danger
	{
		background-color: #3a4850;
		border-color: #6a7880;
		color: #c8d0d4;
	}

	.btn.danger:hover
	{
		background-color: #4a5860;
		border-color: #889098;
	}

	.btn.disabled
	{
		opacity: 0.4;
		border-color: #3a5060;
		color: #708090;
		pointer-events: none;
		background-color: #152830;
	}

	.btn.slim
	{
		min-width: 44px;
		margin-bottom: 0;
		padding: 8px 14px;
		border-radius: 0;
		font-size: 13px;
	}

	// ----- SETTINGS -----
	.settings
	{
		background-color: #0a1c28;
	}

	.settings-panel
	{
		width: 460px;
		align-items: stretch;
	}

	.setting-row
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
		width: 100%;
	}

	.setting-label
	{
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1px;
		color: #8ab0c4;
		white-space: nowrap;
	}

	.slider-row
	{
		flex-direction: row;
		align-items: center;
	}

	.setting-value
	{
		min-width: 56px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		color: #e0f0f8;
		margin-left: 8px;
		margin-right: 8px;
	}

	// ----- PLAYING (arcade cabinet frame) -----
	.playing
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #060e14;
		justify-content: center;
		align-items: center;
		padding-top: 12px;
		padding-bottom: 12px;
		overflow: hidden;
		flex-wrap: nowrap;
	}

	.play-room
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 0;
	}

	.play-room-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.play-room-dim
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #04101833;
		pointer-events: none;
	}

	.playing.nochill .play-room-dim
	{
		background-color: #18081040;
	}

	.tank-rig
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		width: 1280px;
		flex-shrink: 0;
		z-index: 1;
	}

	.tank-shadow
	{
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 118px;
		height: 16px;
		background-color: #100808;
		opacity: 0.4;
		pointer-events: none;
		z-index: 2;
	}

	.tank-stand
	{
		width: 1280px;
		height: 148px;
		flex-shrink: 0;
		margin-top: -22px;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
	}

	.tank-stand-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.playing.chill
	{
		background-color: #061018;
	}

	.playing.nochill
	{
		background-color: #10080c;
	}

	// Layout only — no outer cabinet bezel (tank is the frame)
	.play-bezel
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		padding: 8px 12px;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		flex-shrink: 0;
		max-height: 100%;
		z-index: 1;
	}

	.playing.nochill .play-bezel
	{
		background-color: transparent;
		border: 0;
	}

	.play-bezel-inner
	{
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.playing.salt-view .tank-water
	{
		background-color: #0a3d5c;
	}

	.playing.salt-view.nochill .tank-water
	{
		background-color: #1a1520;
	}

	// Flat HUD row — fixed height so nothing below jumps
	.cq-topbar
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 1280px;
		height: 72px;
		min-height: 72px;
		max-height: 72px;
		margin-bottom: 4px;
		padding: 4px 4px;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		flex-shrink: 0;
		flex-grow: 0;
		overflow: visible;
	}

	.playing.nochill .cq-topbar
	{
		background-color: transparent;
		border: 0;
	}

	.cq-top-left
	{
		// Empty balance weight for the right census so wallet stays centered
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;
		min-width: 220px;
		width: 220px;
	}

	.cq-top-center
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.cq-top-right
	{
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;
		min-width: 220px;
	}

	// Coach + quest chrome — FIXED height so tips never shove the tank.
	.cq-hint-row
	{
		width: 1280px;
		height: 58px;
		min-height: 58px;
		max-height: 58px;
		flex-shrink: 0;
		flex-grow: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 4px;
		overflow: hidden;
		pointer-events: none;
	}

	// Reserved lanes — empty or filled, same footprint.
	.cq-quest-slot
	{
		height: 34px;
		min-height: 34px;
		max-height: 34px;
		flex-shrink: 0;
		flex-grow: 0;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		pointer-events: all;
		z-index: 6;
	}

	.cq-hint-slot
	{
		height: 28px;
		min-height: 28px;
		max-height: 28px;
		flex-shrink: 0;
		flex-grow: 0;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		pointer-events: none;
		opacity: 0;
	}

	.cq-hint-slot.lit
	{
		opacity: 1;
	}

	.cq-quest
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		max-width: 960px;
		height: 32px;
		min-height: 32px;
		padding: 5px 16px;
		margin-bottom: 0;
		background-color: #141020;
		border: 2px solid #5a3a80;
		border-radius: 0;
		cursor: pointer;
		pointer-events: all;
		box-shadow: 0 0 12px #00000088;
	}

	.cq-quest:hover
	{
		border-color: #90c0e8;
		background-color: #182838;
	}

	.cq-quest-next
	{
		font-size: 9px;
		font-weight: 900;
		letter-spacing: 1px;
		color: #0a1018;
		background-color: #ffd24a;
		padding: 2px 6px;
		border-radius: 0;
		margin-right: 8px;
		flex-shrink: 0;
	}

	.cq-quest.story .cq-quest-next
	{
		background-color: #c890ff;
	}

	.cq-quest.gift .cq-quest-next
	{
		background-color: #f0a050;
	}

	.cq-quest.expand .cq-quest-next
	{
		background-color: #60d090;
	}

	// Story objective — classic purple “do this beat”
	.cq-quest.story
	{
		background-color: #1a1028;
		border-color: #7a4ab8;
	}

	// Free-play coach — cool blue so it reads as guidance, not lore
	.cq-quest.coach
	{
		background-color: #0e1824;
		border-color: #3a6a90;
	}

	.cq-quest.coach .cq-quest-kicker
	{
		color: #7ec8e8;
	}

	.cq-quest.coach .cq-quest-text
	{
		color: #c8e4f4;
	}

	// Pending lot gift — warm so it feels like a character beat
	.cq-quest.gift
	{
		background-color: #241818;
		border-color: #a07040;
	}

	.cq-quest.gift .cq-quest-kicker
	{
		color: #f0c080;
	}

	.cq-quest.gift .cq-quest-text
	{
		color: #ffe8c0;
	}

	// Expand / shop growth — green money nudge
	.cq-quest.expand
	{
		background-color: #102018;
		border-color: #3a8060;
	}

	.cq-quest.expand .cq-quest-kicker
	{
		color: #80d0a0;
	}

	.cq-quest.expand .cq-quest-text
	{
		color: #c8f0d8;
	}

	.cq-quest-kicker
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.8px;
		color: #b898e8;
		margin-right: 10px;
		text-transform: uppercase;
		flex-shrink: 0;
	}

	.cq-quest-text
	{
		font-size: 13px;
		font-weight: 700;
		color: #e8d8ff;
		white-space: nowrap;
	}

	.cq-hint
	{
		flex-shrink: 0;
		flex-grow: 0;
		width: auto;
		max-width: 720px;
		padding: 5px 16px;
		background-color: #0c1a24;
		border: 1px solid #2a4860;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.2px;
		color: #9ab8c8;
		text-align: center;
		justify-content: center;
		align-items: center;
		height: 26px;
		min-height: 26px;
		max-height: 26px;
		white-space: nowrap;
		overflow: hidden;
		pointer-events: none;
	}

	// Tank-local grab tip — absolute overlay, zero shell reflow.
	.decor-throw-tip
	{
		position: absolute;
		left: 50%;
		top: 10px;
		margin-left: -110px;
		width: 220px;
		height: 24px;
		min-height: 24px;
		max-height: 24px;
		padding: 4px 10px;
		background-color: #101820;
		border: 1px solid #6a5840;
		border-radius: 999px;
		color: #f0d090;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
		justify-content: center;
		align-items: center;
		z-index: 80;
		pointer-events: none;
		opacity: 0.92;
	}

	.tank-glass.decor-holding
	{
		// no size change — class is for optional styling only
	}

	.cq-hint.focus
	{
		color: #ffe8a0;
		border-color: #907828;
		background-color: #1a1c10;
	}

	.cq-hint.warn
	{
		color: #ffb8a0;
		border-color: #903838;
		background-color: #1e1014;
	}

	.cq-hint.nudge
	{
		color: #a8ecc8;
		border-color: #388858;
		background-color: #0c1e14;
	}

	.playing.nochill .cq-hint
	{
		background-color: #161014;
		border-color: #483038;
		color: #c0a8b0;
	}

	// Top-bar laptop shortcut — fixed size so spritebox (100% fill) can't blow the layout
	.dw-top-icon
	{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4px 8px 5px 8px;
		margin-right: 8px;
		background-color: #0e2018;
		border: 2px solid #2a6048;
		border-radius: 0;
		cursor: pointer;
		flex-shrink: 0;
		flex-grow: 0;
		width: 54px;
		height: 54px;
		overflow: hidden;
	}

	.dw-top-icon:hover
	{
		border-color: #50c878;
		background-color: #143028;
	}

	.dw-top-icon.on
	{
		border-color: #80e0a0;
		background-color: #1a3828;
	}

	.playing.nochill .dw-top-icon
	{
		background-color: #1a1014;
		border-color: #5a3038;
	}

	.dw-top-icon-box
	{
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		overflow: hidden;
		position: relative;
	}

	.dw-top-sprite
	{
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.dw-top-fallback
	{
		width: 100%;
		height: 100%;
		background-color: #50c878;
		border-radius: 4px;
	}

	.dw-top-label
	{
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #70d0a0;
		margin-top: 2px;
		flex-shrink: 0;
		height: auto;
	}

	// Live fish counts — GBA chip
	.cq-census
	{
		flex-direction: column;
		justify-content: center;
		min-width: 140px;
		max-width: 200px;
		max-height: 80px;
		padding: 6px 10px;
		background-color: #0e1c28aa;
		border: 2px solid #2a4860;
		border-radius: 0;
		flex-shrink: 0;
		overflow: scroll;
	}

	.cq-census-alert
	{
		font-size: 10px;
		font-weight: 700;
		color: #ffb060;
		margin-bottom: 3px;
	}

	.playing.nochill .cq-census
	{
		background-color: #181018aa;
		border-color: #4a3038;
	}

	.cq-census-head
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 4px;
	}

	.cq-census-icon-box
	{
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		margin-right: 6px;
		overflow: hidden;
		position: relative;
	}

	.cq-census-icon
	{
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.cq-census-title
	{
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1px;
		color: #6a9ab0;
		text-transform: uppercase;
		flex-grow: 1;
	}

	.playing.nochill .cq-census-title
	{
		color: #b07080;
	}

	.cq-census-total
	{
		font-size: 12px;
		font-weight: 800;
		color: #e8f4ff;
	}

	.cq-census-rows
	{
		flex-direction: column;
		width: 100%;
	}

	.cq-census-row
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-top: 2px;
	}

	.census-swatch
	{
		width: 22px;
		height: 16px;
		border-radius: 3px;
		margin-right: 6px;
		flex-shrink: 0;
		border: 1px solid #00000055;
		overflow: hidden;
		position: relative;
	}

	.census-swatch.has-sprite
	{
		background-color: #0a1820;
		border-color: #1a3040;
	}

	.census-swatch .swatch-sprite
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.cq-census-name
	{
		font-size: 11px;
		font-weight: 600;
		color: #c0d8e8;
		flex-grow: 1;
	}

	.cq-census-n
	{
		font-size: 12px;
		font-weight: 800;
		color: #ffd24a;
		margin-left: 6px;
	}

	.ach-chip
	{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 54px;
		margin-right: 8px;
		padding: 6px 8px;
		background-color: #1a1810;
		border: 2px solid #6a5830;
		cursor: pointer;
		flex-shrink: 0;
	}

	.ach-chip:hover
	{
		border-color: #d0b050;
	}

	.ach-chip.on
	{
		border-color: #e8c060;
		background-color: #2a2410;
	}

	.ach-chip-kicker
	{
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #d0b050;
	}

	.ach-chip-n
	{
		margin-top: 3px;
		font-size: 10px;
		font-weight: 700;
		color: #f0e0b0;
	}

	.ach-toast
	{
		position: absolute;
		left: 24px;
		bottom: 28px;
		width: 280px;
		flex-direction: column;
		padding: 10px 12px;
		background-color: #14100cee;
		border: 3px solid #c8a040;
		z-index: 80;
		pointer-events: none;
	}

	.ach-toast-kicker
	{
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #d0b050;
		margin-bottom: 4px;
	}

	.ach-toast-name
	{
		font-size: 13px;
		font-weight: 800;
		color: #f8e8b0;
		margin-bottom: 4px;
	}

	.ach-toast-punch
	{
		font-size: 10px;
		font-weight: 600;
		color: #c8b890;
		line-height: 14px;
	}

	.ach-board
	{
		position: absolute;
		left: 50%;
		top: 48%;
		margin-left: -280px;
		margin-top: -250px;
		width: 560px;
		max-height: 500px;
		flex-direction: column;
		padding: 12px 14px;
		background-color: #141018;
		border: 3px solid #6a5830;
		z-index: 170;
		pointer-events: all;
	}

	.ach-board-head
	{
		flex-direction: row;
		align-items: center;
		margin-bottom: 10px;
	}

	.ach-board-title
	{
		font-size: 13px;
		font-weight: 800;
		color: #f0e0b0;
		flex-grow: 1;
	}

	.ach-board-meta
	{
		font-size: 11px;
		font-weight: 700;
		color: #d0b050;
		margin-right: 10px;
	}

	.ach-board-scroll
	{
		flex-direction: column;
		overflow: scroll;
		max-height: 420px;
	}

	.ach-row
	{
		flex-direction: row;
		align-items: flex-start;
		padding: 7px 8px;
		margin-bottom: 4px;
		background-color: #181410;
		border: 2px solid #3a3020;
	}

	.ach-row.on
	{
		border-color: #8a7030;
		background-color: #221c10;
	}

	.ach-row.off
	{
		opacity: 0.72;
	}

	.ach-row-mark
	{
		width: 16px;
		font-size: 12px;
		color: #d0b050;
		margin-right: 8px;
		flex-shrink: 0;
	}

	.ach-row.off .ach-row-mark
	{
		color: #605040;
	}

	.ach-row-text
	{
		flex-direction: column;
		flex-grow: 1;
	}

	.ach-row-name
	{
		font-size: 11px;
		font-weight: 800;
		color: #e8d8b0;
		margin-bottom: 3px;
	}

	.ach-row.off .ach-row-name
	{
		color: #908070;
	}

	.ach-row-hint
	{
		font-size: 9px;
		color: #b0a080;
		line-height: 13px;
	}

	.cq-census-empty
	{
		font-size: 11px;
		color: #6a8898;
		font-style: italic;
	}

	.cq-top-chip
	{
		flex-direction: column;
		justify-content: center;
		min-width: 180px;
		max-width: 320px;
		padding: 6px 12px;
		background-color: #0e1c28aa;
		border: 1px solid #2a4860;
		border-radius: 10px;
	}

	.cq-top-chip.right
	{
		align-items: flex-end;
		text-align: right;
	}

	.playing.nochill .cq-top-chip
	{
		background-color: #181018aa;
		border-color: #4a3038;
	}

	.cq-top-main
	{
		font-size: 15px;
		font-weight: 700;
		color: #e8f4ff;
	}

	.cq-top-sub
	{
		font-size: 11px;
		font-weight: 600;
		color: #7a9aac;
		margin-top: 2px;
	}

	.cq-top-alert
	{
		font-size: 13px;
		font-weight: 700;
		color: #f0a060;
	}

	.playing.nochill .cq-top-alert
	{
		color: #f08080;
	}

	// Kept for shop / other panels that still use pill chrome
	.cq-pill
	{
		flex-direction: column;
		padding: 10px 16px;
		min-width: 200px;
		background-color: #122836;
		border: 2px solid #2a5068;
		border-radius: 10px;
	}

	.cq-pill-label
	{
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 2px;
		color: #6a9ab8;
		text-transform: uppercase;
	}

	.cq-pill-title
	{
		font-size: 16px;
		font-weight: 700;
		color: #e8f4ff;
		margin-top: 2px;
	}

	.cq-pill-sub
	{
		font-size: 11px;
		color: #7a9aac;
		margin-top: 3px;
	}

	// ----- Dogecoin cold wallet (GBA-style hardware; no real brands) -----
	.cold-chip
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: visible;
		flex-shrink: 0;
		cursor: pointer;
	}

	.cold-chip.help-open .cold-chip-shell
	{
		border-color: #c8a040;
	}

	.cold-chip-hint
	{
		font-size: 8px;
		font-weight: 600;
		letter-spacing: 0.3px;
		color: #6a8898;
		margin-top: 3px;
		text-align: center;
		width: 100%;
		justify-content: center;
		// Two short lines: from Grandma · tap for tips
		height: 20px;
		flex-shrink: 0;
		white-space: normal;
	}

	.cold-chip:hover .cold-chip-hint
	{
		color: #a0c0d0;
	}

	.cold-chip-shell
	{
		flex-direction: column;
		align-items: center;
		// Fixed shell — never grows with digit count
		background-color: #222830;
		border: 1px solid #1a1e24;
		border-radius: 10px;
		padding: 0;
		overflow: hidden;
		width: 210px;
		flex-shrink: 0;
	}

	.cold-chip-body
	{
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 6px 10px 6px 10px;
		width: 210px;
		flex-shrink: 0;
		background-color: #2c343e;
	}

	.cold-chip-brand
	{
		font-size: 7px;
		font-weight: 800;
		letter-spacing: 0.6px;
		color: #8a929c;
		margin-bottom: 4px;
		text-align: center;
		width: 100%;
		justify-content: center;
		height: 12px;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.cold-chip-lcd
	{
		// Outer LCD bezel — fixed
		width: 188px;
		padding: 3px;
		background-color: #1a2010;
		border: 2px solid #0c1008;
		border-radius: 4px;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.cold-chip-lcd-glass
	{
		// Fixed viewport grid — both lines share the same center axis
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4px 6px;
		background-color: #0a280a;
		border: 1px solid #306230;
		border-radius: 2px;
		width: 176px;
		height: 52px;
		overflow: hidden;
		flex-shrink: 0;
	}

	.cold-chip-lcd.lit .cold-chip-lcd-glass
	{
		background-color: #0e3010;
		border-color: #50a040;
	}

	.cold-chip-lcd-row
	{
		// Full-width rows so both lines center on the same axis
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		width: 100%;
		flex-shrink: 0;
		overflow: hidden;
	}

	.cold-chip-lcd-row.bal
	{
		height: 30px;
		min-height: 30px;
		max-height: 30px;
	}

	// Income /s — tiny, still centered under balance
	.cold-chip-lcd-row.rate
	{
		height: 14px;
		min-height: 14px;
		max-height: 14px;
		margin-top: 0;
		opacity: 0.72;
	}

	.wallet-lcd-line
	{
		flex-shrink: 0;
		image-rendering: pixelated;
		pointer-events: none;
		// Stay centered in the row regardless of texture width
		align-self: center;
	}

	.wallet-lcd-line.sm
	{
		opacity: 0.9;
	}

	.cold-chip-controls
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 5px;
		width: 100%;
		height: 12px;
		flex-shrink: 0;
	}

	.cold-chip-btn
	{
		width: 14px;
		height: 8px;
		margin-left: 4px;
		margin-right: 4px;
		background-color: #1a1e24;
		border: 1px solid #0a0c10;
		border-radius: 2px;
	}

	.cold-chip-led
	{
		width: 6px;
		height: 6px;
		margin-left: 10px;
		border-radius: 50%;
		background-color: #3a2020;
		border: 1px solid #1a1010;
	}

	.cold-chip-led.on
	{
		background-color: #50e060;
		border-color: #206030;
	}

	.cold-chip.pulse .cold-chip-shell
	{
		border-color: #4a6a40;
	}

	.cold-chip.pulse .cold-chip-brand
	{
		color: #b0c8a0;
	}

	.playing.nochill .cold-chip-shell
	{
		background-color: #2a2428;
		border-color: #1a1014;
	}

	.playing.nochill .cold-chip-body
	{
		background-color: #383038;
	}

	.playing.nochill .cold-chip-rail
	{
		background-color: #403848;
	}

	// Training / meth +stat pops — text only, one color per lane
	.stat-float
	{
		position: absolute;
		width: auto;
		height: auto;
		min-width: 0;
		margin-left: 0;
		font-size: 14px;
		font-weight: 800;
		padding: 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		pointer-events: none;
		z-index: 45;
		white-space: nowrap;
		text-align: center;
		justify-content: center;
		align-items: center;
		overflow: visible;
		// Soft outline so text stays readable over water
		text-shadow:
			-1px -1px 0 #000000,
			1px -1px 0 #000000,
			-1px 1px 0 #000000,
			1px 1px 0 #000000,
			0 0 6px #000000aa;
	}

	// Fallback multi-stat line (weed / legacy)
	.stat-float.combo
	{
		width: auto;
		font-size: 13px;
		letter-spacing: 0.4px;
		color: #fff0a0;
		background-color: transparent;
		border: 0;
	}

	// END — gold (left lane)
	.stat-float.end
	{
		color: #ffe08a;
		background-color: transparent;
		border: 0;
	}

	// SPD — cyan (center, slightly higher)
	.stat-float.spd
	{
		color: #a8e8ff;
		background-color: transparent;
		border: 0;
	}

	// AGI — green (right lane)
	.stat-float.agi
	{
		color: #c8ff90;
		background-color: transparent;
		border: 0;
	}

	.stat-float.weed
	{
		color: #c8ff90;
		background-color: transparent;
		border: 0;
		width: auto;
		margin-left: -70px;
	}

	.stat-float.weed-down
	{
		color: #ffc090;
		background-color: transparent;
		border: 0;
		width: auto;
		margin-left: -50px;
	}

	.stat-float.grow
	{
		color: #a8ffc8;
		font-size: 13px;
	}

	.stat-float.stage
	{
		color: #ffd24a;
		font-size: 16px;
		letter-spacing: 0.6px;
	}

	.stat-float.sell
	{
		color: #ffe080;
		font-size: 15px;
	}

	.stat-float.rare
	{
		color: #f090e0;
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.stat-float.fed
	{
		color: #e8c060;
		font-size: 12px;
	}

	.playing.nochill .stat-float.grow { color: #90e8b0; }
	.playing.nochill .stat-float.stage { color: #ffb040; }
	.playing.nochill .stat-float.sell { color: #ffd070; }
	.playing.nochill .stat-float.rare { color: #ff70c0; }

	.playing.nochill .stat-float.combo
	{
		color: #ffe8b0;
	}

	.playing.nochill .stat-float.end
	{
		color: #ffd080;
	}

	.playing.nochill .stat-float.spd
	{
		color: #f0c0c8;
	}

	.playing.nochill .stat-float.agi
	{
		color: #e0f0a0;
	}

	.playing.nochill .stat-float.weed
	{
		color: #d0f0a0;
	}

	.playing.nochill .stat-float.weed-down
	{
		color: #f0b090;
	}

	// Gym panel mirror of last rep gains
	.train-gain-pops
	{
		font-size: 12px;
		font-weight: 800;
		color: #ffd24a;
		text-align: center;
		margin-bottom: 10px;
		padding: 6px 4px;
		background-color: #1a2810;
		border: 2px solid #80a040;
		border-radius: 6px;
		flex-shrink: 0;
		height: auto;
		white-space: normal;
	}

	.playing.nochill .train-gain-pops
	{
		color: #ffd0a0;
		background-color: #201018;
		border-color: #a06040;
	}

	// Dogecoin ±Ð pops — rise from wallet, no layout shift
	.doge-float-layer
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin-top: 4px;
		flex-direction: column;
		align-items: center;
		pointer-events: none;
		z-index: 45;
		overflow: visible;
	}

	.doge-float
	{
		font-size: 15px;
		font-weight: 800;
		padding: 3px 10px;
		margin-bottom: 2px;
		border-radius: 8px;
		pointer-events: none;
		flex-shrink: 0;
	}

	.doge-float.earn
	{
		color: #ffe08a;
		background-color: #1a3020;
		border: 1px solid #50a060;
	}

	.doge-float.spend
	{
		color: #f0b0b0;
		font-size: 13px;
		font-weight: 700;
		background-color: #301818;
		border: 1px solid #804040;
	}

	.doge-float.funny
	{
		font-size: 16px;
		color: #fff0a0;
		background-color: #2a2410;
		border: 2px solid #e8c040;
	}

	.playing.nochill .doge-float.earn
	{
		background-color: #1a2818;
		border-color: #60a050;
	}

	.playing.nochill .doge-float.spend
	{
		background-color: #281014;
	}

	// Legacy money classes kept so old themes don't hard-fail
	.cq-money
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		padding: 6px 24px;
		background-color: #102a38;
		border: 2px solid #3a7088;
		border-radius: 12px;
		min-width: 180px;
	}

	.cq-money-value
	{
		font-size: 26px;
		font-weight: 800;
		color: #ffd24a;
	}

	.cq-money-rate
	{
		font-size: 12px;
		font-weight: 600;
		color: #7cbc6a;
		margin-top: 1px;
	}

	// Thin mood line — fixed height
	.cq-mood-bar
	{
		position: relative;
		width: 1280px;
		height: 4px;
		min-height: 4px;
		max-height: 4px;
		margin-bottom: 8px;
		background-color: #0a1820;
		border: 0;
		border-radius: 2px;
		overflow: hidden;
		flex-shrink: 0;
		flex-grow: 0;
		opacity: 0.4;
	}

	.cq-mood-bar.lit
	{
		opacity: 0.9;
	}

	.cq-mood-bar.dim .cq-mood-fill
	{
		opacity: 0.25;
	}

	.cq-mood-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background-color: #5a9ab8;
	}

	.playing.nochill .cq-mood-fill
	{
		background-color: #c43c3c;
	}

	.cq-mood-mark
	{
		position: absolute;
		left: 40%;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: #ffd24a;
		opacity: 0.55;
	}

	// Floating game notice — true overlay; never participates in flex layout
	.cq-notice
	{
		position: absolute;
		left: 50%;
		// Sit just under the top bar / switcher, over the tank rim
		top: 118px;
		margin-left: -280px;
		width: 560px;
		// Fixed chrome so long banners don't reflow siblings
		min-height: 34px;
		max-height: 52px;
		padding: 7px 14px;
		background-color: #0e2838;
		border: 1px solid #3a7088;
		border-radius: 8px;
		color: #c8e0ec;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		z-index: 90;
		pointer-events: none;
		opacity: 0.92;
		overflow: hidden;
		// Don't grow the play column when toast mounts
		flex-shrink: 0;
	}

	.cq-notice.status
	{
		opacity: 0.8;
		border-color: #4a6070;
		color: #a8c0cc;
	}

	.cq-notice.urgent
	{
		background-color: #281018;
		border-color: #a04048;
		color: #f0c0c0;
		opacity: 0.95;
	}

	.playing.nochill .cq-notice
	{
		background-color: #1a1014;
		border-color: #704048;
	}

	// Legacy class kept for safety
	.cq-toast
	{
		// redirected style — prefer .cq-notice
		position: absolute;
		left: 50%;
		top: 118px;
		margin-left: -280px;
		width: 560px;
		padding: 7px 14px;
		background-color: #0e2838;
		border: 1px solid #3a7088;
		border-radius: 8px;
		color: #c8e0ec;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		z-index: 40;
		pointer-events: none;
	}

	.cq-toast.urgent
	{
		background-color: #281018;
		border-color: #a04048;
		color: #f0c0c0;
	}

	.cq-stage-row
	{
		position: relative;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		flex-shrink: 0;
		width: 1280px;
	}

	.cq-stage
	{
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
		position: relative;
	}

	// ----- Fish context menu (inside tank-water, same coords as fish) -----
	.fish-menu-layer
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 50;
	}

	.fish-menu-backdrop
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: all;
		background-color: #00000040;
		z-index: 50;
	}

	.fish-menu
	{
		position: absolute;
		width: 228px;
		min-height: 0;
		height: auto;
		padding: 10px 10px 8px 10px;
		background-color: #143848;
		border: 2px solid #5ab8d8;
		border-bottom: 4px solid #0a2838;
		border-right: 3px solid #0a2838;
		border-radius: 0;
		flex-direction: column;
		align-items: stretch;
		flex-shrink: 0;
		pointer-events: all;
		z-index: 80;
	}

	.playing.nochill .fish-menu
	{
		background-color: #1a1018;
		border-color: #8b4a5a;
	}

	.fish-menu-title
	{
		font-size: 14px;
		font-weight: 800;
		color: #e8f4ff;
		text-align: center;
		flex-shrink: 0;
		height: auto;
	}

	// Click to open type-to-rename
	.fish-menu-title.clickable
	{
		cursor: pointer;
		padding: 5px 8px;
		border-radius: 6px;
		border: 1px solid #3a7088;
		background-color: #0e2838;
	}

	.fish-menu-title.clickable:hover
	{
		border-color: #70c8e8;
		background-color: #1a4860;
		color: #ffffff;
	}

	.fish-menu.renaming
	{
		width: 248px;
	}

	// Sandbox.UI.TextEntry field
	.fish-rename-entry
	{
		width: 100%;
		min-height: 32px;
		height: 32px;
		margin: 4px 0 8px 0;
		padding: 4px 8px;
		background-color: #0a2030;
		border: 2px solid #50a0c8;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 700;
		color: #e8f8ff;
		flex-shrink: 0;
		white-space: nowrap;
		cursor: text;
		pointer-events: all;
	}

	.playing.nochill .fish-rename-entry
	{
		background-color: #140c10;
		border-color: #a06070;
		color: #f0e0e8;
	}

	.fish-rename-row
	{
		flex-direction: row;
		width: 100%;
		flex-shrink: 0;
		height: auto;
		justify-content: space-between;
	}

	.fish-rename-row .fish-menu-btn.slim
	{
		padding: 7px 6px;
		margin: 0 2px 0 2px;
		font-size: 11px;
		flex-grow: 1;
		min-width: 0;
		border-bottom-width: 2px;
	}

	.fish-menu-sub
	{
		font-size: 10px;
		color: #7a9aac;
		text-align: center;
		margin-bottom: 4px;
		margin-top: 2px;
		flex-shrink: 0;
		height: auto;
	}

	.fish-menu-stats-line
	{
		font-size: 10px;
		font-weight: 700;
		color: #a0d0e8;
		text-align: center;
		margin-bottom: 4px;
		padding: 4px 0;
		background-color: #0a2030;
		border-radius: 4px;
		flex-shrink: 0;
		height: auto;
	}

	.playing.nochill .fish-menu-stats-line
	{
		color: #d0a0a8;
		background-color: #120a10;
	}

	.fish-menu-stat-bars
	{
		flex-direction: column;
		width: 100%;
		gap: 3px;
		margin-bottom: 8px;
		padding: 0 2px;
		flex-shrink: 0;
		height: auto;
	}

	.fish-stat-bar
	{
		position: relative;
		width: 100%;
		height: 5px;
		background-color: #0a1820;
		border-radius: 2px;
		overflow: hidden;
		border: 1px solid #1a3040;
	}

	.fish-stat-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		border-radius: 2px;
	}

	.fish-stat-bar.end .fish-stat-fill
	{
		background-color: #50c878;
	}

	.fish-stat-bar.spd .fish-stat-fill
	{
		background-color: #50b0ff;
	}

	.fish-stat-bar.agi .fish-stat-fill
	{
		background-color: #e0a040;
	}

	.fish-menu-btn
	{
		padding: 10px 8px;
		margin-bottom: 5px;
		background-color: #1c4a62;
		border: 2px solid #3a7088;
		border-bottom: 4px solid #0e2838;
		border-radius: 0;
		font-size: 13px;
		font-weight: 700;
		color: #e8f4ff;
		text-align: center;
		cursor: pointer;
		flex-shrink: 0;
		height: auto;
		min-height: 0;
		white-space: nowrap;
		overflow: hidden;
		justify-content: center;
	}

	.fish-menu-btn:hover
	{
		border-color: #6ab0d0;
		background-color: #245870;
		border-bottom-color: #143848;
	}

	.fish-menu-btn.primary
	{
		background-color: #1a6040;
		border-color: #40a070;
		border-bottom-color: #0a3020;
		color: #e8ffe8;
		font-weight: 800;
	}

	.fish-menu-btn.primary:hover
	{
		background-color: #247848;
		border-color: #60c890;
		border-bottom-color: #104828;
	}

	.fish-menu-btn.danger
	{
		background-color: #4a2028;
		border-color: #a04048;
		color: #ffd0d0;
	}

	.fish-menu-btn.quiet
	{
		background-color: #1a303c;
		border-color: #3a5060;
		color: #9ab0c0;
		font-weight: 600;
		margin-bottom: 0;
	}

	.fish-menu-btn.locked
	{
		background-color: #142028;
		border-color: #2a3840;
		border-bottom-color: #0a1014;
		color: #6a7880;
		font-weight: 600;
		opacity: 0.85;
	}

	.fish-menu-btn.locked:hover
	{
		border-color: #4a5860;
		background-color: #1a2830;
		color: #9aa8b0;
	}

	.fish-menu-btn.warn
	{
		background-color: #4a3820;
		border-color: #a08040;
		border-bottom-color: #2a2010;
		color: #ffe8c0;
	}

	.fish-menu-btn.warn:hover
	{
		background-color: #5a4828;
		border-color: #c0a050;
	}

	.fish-menu-growth
	{
		width: 100%;
		height: 6px;
		margin: 4px 0 6px 0;
		background-color: #0a1820;
		border: 1px solid #2a4050;
		border-radius: 3px;
		overflow: hidden;
		flex-shrink: 0;
	}

	.fish-menu-growth-fill
	{
		height: 100%;
		background-color: #40c890;
		border-radius: 2px;
	}

	.fish-menu-tip
	{
		font-size: 10px;
		font-weight: 700;
		color: #ffd24a;
		margin: 2px 0 6px 0;
		line-height: 1.25;
		flex-shrink: 0;
	}

	.battle-result-actions
	{
		flex-direction: row;
		gap: 8px;
		margin-top: 10px;
		width: 100%;
		justify-content: center;
		flex-shrink: 0;
	}

	.lot-run-stakes-bar
	{
		flex-direction: row;
		align-items: center;
		gap: 6px;
		width: 100%;
		margin-bottom: 8px;
		padding: 6px 8px;
		background-color: #0a141c;
		border: 1px solid #2a4858;
		border-radius: 6px;
		font-size: 11px;
		font-weight: 700;
		color: #8ab0c0;
		flex-shrink: 0;
	}

	.lot-run-bag
	{
		color: #ffd24a;
	}

	.lot-run-stakes-sep
	{
		color: #4a6878;
	}

	.lot-run-room-stakes
	{
		font-size: 11px;
		font-weight: 700;
		color: #c0e0a0;
		margin: 6px 0 10px 0;
		padding: 6px 8px;
		background-color: #142018;
		border: 1px solid #3a6040;
		border-radius: 6px;
		line-height: 1.3;
		flex-shrink: 0;
	}

	.fish.menu-on.has-sprite .fish-sprite
	{
		// No box — menu is the tell.
	}

	.fish.menu-on:not( .has-sprite ) .fish-body
	{
		border: 2px solid #ffd24a;
	}

	// ----- Right-side inventory (food, m80, juice, meth…) -----
	.inv-panel
	{
		flex-direction: column;
		width: 120px;
		margin-left: 10px;
		padding: 6px 4px;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		flex-shrink: 0;
		flex-grow: 0;
		align-self: flex-start;
		max-height: 640px;
		overflow: scroll;
	}

	.playing.nochill .inv-panel
	{
		background-color: transparent;
		border: 0;
	}

	.inv-title
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #6a9ab0;
		text-align: center;
		margin-bottom: 6px;
		text-transform: uppercase;
		opacity: 0.85;
	}

	.playing.nochill .inv-title
	{
		color: #b07080;
	}

	.inv-slots
	{
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.inv-slot
	{
		flex-direction: column;
		align-items: center;
		padding: 8px 6px 7px 6px;
		margin-bottom: 6px;
		background-color: #0e1c28cc;
		border: 2px solid #2a4860;
		border-radius: 0;
		cursor: pointer;
		position: relative;
	}

	.inv-slot:hover
	{
		border-color: #50a0c8;
		background-color: #143848ee;
	}

	.inv-slot.on
	{
		border-color: #d0a040;
		background-color: #2a2410ee;
	}

	.inv-slot.armed
	{
		border-color: #e04040;
		background-color: #301018ee;
	}

	.inv-slot.hot
	{
		border-color: #50c070;
	}

	.inv-slot.empty
	{
		opacity: 0.45;
	}

	.inv-slot.kick
	{
		border-color: #705040;
	}

	.inv-slot.crime
	{
		border-color: #804050;
	}

	.inv-glyph
	{
		width: 36px;
		height: 28px;
		align-items: center;
		justify-content: center;
		color: #e8c070;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1px;
	}

	.crime-sheet
	{
		position: absolute;
		right: 138px;
		top: 18px;
		width: 280px;
		flex-direction: column;
		padding: 10px 10px 8px 10px;
		background-color: #100810ee;
		border: 3px solid #804050;
		z-index: 45;
	}

	.crime-sheet-title
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #e07070;
		margin-bottom: 4px;
	}

	.crime-sheet-kicker
	{
		font-size: 9px;
		color: #b09080;
		margin-bottom: 8px;
		line-height: 13px;
	}

	.crime-row
	{
		flex-direction: column;
		padding: 7px 8px;
		margin-bottom: 5px;
		background-color: #201018;
		border: 2px solid #603040;
		cursor: pointer;
	}

	.crime-row:hover
	{
		border-color: #e07070;
		background-color: #301820;
	}

	.crime-row.quiet
	{
		opacity: 0.7;
		cursor: default;
	}

	.crime-row-name
	{
		font-size: 10px;
		font-weight: 700;
		color: #f0d0c0;
		margin-bottom: 3px;
	}

	.crime-row-meta
	{
		font-size: 8px;
		color: #a08078;
		line-height: 12px;
	}

	.crime-sheet-close
	{
		margin-top: 4px;
		align-self: flex-end;
	}

	.playing.nochill .inv-slot
	{
		background-color: #180e14;
		border-color: #503038;
	}

	// Laptop under tools — open shop (fixed box; spritebox fills 100%)
	.dw-laptop
	{
		flex-direction: column;
		align-items: center;
		margin-top: 6px;
		padding: 8px 6px 8px 6px;
		background-color: #0e1c28cc;
		border: 1px solid #2a7050;
		border-radius: 10px;
		cursor: pointer;
		flex-shrink: 0;
		flex-grow: 0;
		width: 112px;
		overflow: hidden;
	}

	.dw-laptop:hover
	{
		border-color: #50c878;
		background-color: #142820ee;
	}

	.dw-laptop.on
	{
		border-color: #90e8b0;
		background-color: #1a3828ee;
	}

	.playing.nochill .dw-laptop
	{
		background-color: #181018cc;
		border-color: #5a3038;
	}

	.dw-laptop-box
	{
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		overflow: hidden;
		position: relative;
		margin-bottom: 6px;
	}

	.dw-laptop-sprite
	{
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.dw-laptop-fallback
	{
		width: 100%;
		height: 100%;
		background-color: #40a060;
		border-radius: 6px;
	}

	.dw-laptop-label
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.5px;
		color: #90e8b0;
		text-align: center;
		text-transform: uppercase;
		flex-shrink: 0;
		height: auto;
		white-space: nowrap;
	}

	.dw-laptop-sub
	{
		font-size: 8px;
		font-weight: 600;
		color: #5a9070;
		margin-top: 2px;
		text-align: center;
		flex-shrink: 0;
		height: auto;
	}

	.inv-icon-wrap
	{
		position: relative;
		width: 48px;
		height: 48px;
		margin-bottom: 4px;
		align-items: center;
		justify-content: center;
	}

	.inv-icon
	{
		width: 48px;
		height: 48px;
		pointer-events: none;
	}

	.inv-qty
	{
		position: absolute;
		right: -4px;
		bottom: -2px;
		min-width: 16px;
		padding: 1px 4px;
		background-color: #102838;
		border: 1px solid #4a90b0;
		border-radius: 6px;
		font-size: 10px;
		font-weight: 800;
		color: #ffd24a;
		text-align: center;
	}

	.inv-label
	{
		font-size: 11px;
		font-weight: 700;
		color: #e0f0ff;
		text-align: center;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 110px;
	}

	.inv-label.food-name
	{
		font-size: 10px;
		line-height: 12px;
		min-height: 24px;
		align-items: center;
	}

	.inv-meta
	{
		font-size: 9px;
		color: #7a9aac;
		margin-top: 1px;
		text-align: center;
	}

	.inv-actions
	{
		flex-direction: row;
		justify-content: center;
		margin-top: 5px;
		width: 100%;
	}

	.inv-chip
	{
		padding: 3px 7px;
		margin-left: 2px;
		margin-right: 2px;
		background-color: #1c4a62;
		border: 1px solid #4a9abc;
		border-radius: 6px;
		font-size: 10px;
		font-weight: 700;
		color: #e8f4ff;
		cursor: pointer;
	}

	.inv-chip.quiet
	{
		background-color: #1a303c;
		border-color: #3a5868;
		color: #a0b8c8;
	}

	.inv-foot
	{
		margin-top: 4px;
		font-size: 9px;
		color: #5a7888;
		text-align: center;
	}

	// Tank type switcher — centered above the glass (aquarium-game convention)
	.tank-switcher
	{
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		margin-top: 4px;
		margin-bottom: 8px;
		padding: 4px;
		background-color: #0e2434;
		border: 2px solid #2a5068;
		border-radius: 0;
		flex-shrink: 0;
	}

	.playing.nochill .tank-switcher
	{
		background-color: #181018;
		border-color: #503038;
	}

	.tank-switch
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		min-width: 88px;
		min-height: 34px;
		padding: 8px 20px;
		margin-left: 2px;
		margin-right: 2px;
		background-color: #163848;
		border: 2px solid transparent;
		border-radius: 0;
		cursor: pointer;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.6px;
		color: #c0dce8;
		text-align: center;
	}

	.tank-switch:hover
	{
		background-color: #1e5068;
	}

	.tank-switch.on
	{
		background-color: #2a88b0;
		border-color: #80d0f0;
		color: #ffffff;
	}

	.playing.nochill .tank-switch.on
	{
		background-color: #803040;
		border-color: #e07080;
	}

	.tank-switch.locked
	{
		opacity: 0.5;
		background-color: #122838;
	}




	// Bottom dock — situational actions
	.cq-dock
	{
		flex-direction: column;
		align-items: center;
		width: 1280px;
		margin-top: 8px;
		padding: 10px 14px;
		background-color: #0e2030;
		border: 2px solid #2a5068;
		border-bottom: 4px solid #0a1520;
		border-radius: 12px;
		flex-shrink: 0;
	}

	.playing.nochill .cq-dock
	{
		background-color: #1a1218;
		border-color: #5a3038;
	}

	.cq-dock-row
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex-wrap: wrap;
	}

	.cq-dock-spacer
	{
		width: 16px;
		height: 8px;
	}

	.cq-btn
	{
		padding: 11px 18px;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 0;
		background-color: #1c4a62;
		border: 2px solid #4a9abc;
		border-bottom: 4px solid #0e2838;
		border-radius: 0;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.3px;
		color: #f0f8fc;
		text-align: center;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
	}

	.cq-btn:hover
	{
		background-color: #286a88;
		border-color: #7ad0f0;
		border-bottom-color: #143848;
	}

	.cq-btn.primary
	{
		background-color: #2a80a8;
		border-color: #70c8e8;
		border-bottom-color: #104060;
		color: #ffffff;
	}

	.cq-btn.warn
	{
		background-color: #5a4850;
		border-color: #c09090;
		color: #fff0f0;
	}

	.cq-btn.danger
	{
		background-color: #a04048;
		border-color: #e08080;
		color: #ffffff;
	}

	.cq-btn.quiet
	{
		background-color: #1a3848;
		border-color: #4a6878;
		color: #b0c8d4;
	}

	.cq-btn.slim
	{
		padding: 7px 14px;
		min-width: 56px;
		font-size: 12px;
		border-radius: 0;
	}

	.cq-btn.off
	{
		// Still clickable so handlers can show "need more Ð" feedback
		opacity: 0.45;
		pointer-events: all;
	}

	.cq-btn.on
	{
		border-color: #ffd24a;
		background-color: #3a6870;
	}

	.cq-tab
	{
		padding: 9px 16px;
		margin-left: 4px;
		margin-right: 4px;
		background-color: #1a4054;
		border: 2px solid #3a7088;
		border-radius: 0;
		font-size: 12px;
		font-weight: 700;
		color: #b0d0e0;
		cursor: pointer;
		justify-content: center;
		align-items: center;
	}

	.cq-tab.on
	{
		background-color: #2a88b0;
		border-color: #80d0f0;
		color: #ffffff;
	}

	.cq-tab.off
	{
		opacity: 0.4;
		pointer-events: none;
	}

	.cq-shop-tabs
	{
		flex-direction: row;
		margin-bottom: 10px;
		flex-shrink: 0;
		flex-wrap: wrap;
	}

	.shop-row.owned .shop-col.name
	{
		color: #ffd24a;
	}

	// AI battle panel — must sit ABOVE .shop-backdrop (z 70) or clicks never reach it
	.battle-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -340px;
		margin-top: -280px;
		width: 680px;
		max-height: 560px;
		padding: 14px 16px;
		background-color: #0c1a24;
		border: 3px solid #3a80a0;
		border-radius: 0;
		flex-direction: column;
		z-index: 81;
		pointer-events: all;
		overflow: hidden;
	}

	.playing.nochill .battle-panel
	{
		background-color: #161018;
		border-color: #6a3840;
	}

	.battle-head
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 8px;
		flex-shrink: 0;
	}

	.battle-head-title
	{
		font-size: 18px;
		font-weight: 800;
		color: #e8f4ff;
		letter-spacing: 0.5px;
	}

	.battle-msg
	{
		font-size: 12px;
		font-weight: 600;
		color: #8ab0c0;
		margin-bottom: 8px;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		height: auto;
		flex-shrink: 0;
	}

	.battle-templates
	{
		flex-direction: column;
		width: 100%;
		overflow: scroll;
		max-height: 220px;
		flex-shrink: 1;
		pointer-events: all;
		padding-right: 4px;
	}

	.battle-row
	{
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: 10px 12px;
		margin-bottom: 5px;
		background-color: #0a1822;
		border: 1px solid #2a5060;
		border-radius: 8px;
		cursor: pointer;
		flex-shrink: 0;
		height: auto;
		min-height: 40px;
		pointer-events: all;
	}

	.battle-row-name,
	.battle-row-meta
	{
		pointer-events: none;
	}

	.battle-row.on
	{
		border-color: #50c070;
		background-color: #143828;
	}

	.battle-row.champ
	{
		border-color: #a08020;
		background-color: #1a1810;
	}

	.battle-row.champ.on
	{
		border-color: #e0c040;
		background-color: #2a2410;
	}

	.battle-row.locked
	{
		opacity: 0.5;
		pointer-events: all;
	}

	.battle-row:hover
	{
		border-color: #4a90b0;
		background-color: #123040;
	}

	.battle-row.on:hover
	{
		border-color: #60d080;
		background-color: #184830;
	}

	.battle-row-name
	{
		font-size: 13px;
		font-weight: 700;
		color: #e8f4ff;
		height: auto;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.battle-row-meta
	{
		font-size: 11px;
		font-weight: 600;
		color: #7a9aac;
		margin-top: 2px;
		height: auto;
		flex-shrink: 0;
		white-space: nowrap;
		overflow: hidden;
	}

	.battle-row.locked .battle-row-meta
	{
		color: #a08060;
		white-space: normal;
	}

	.battle-roster
	{
		flex-direction: column;
		width: 100%;
		margin-top: 10px;
		flex-shrink: 0;
		padding-top: 10px;
		border-top: 1px solid #1a3848;
	}

	.battle-roster-label
	{
		font-size: 12px;
		font-weight: 700;
		color: #90b8c8;
		margin-bottom: 6px;
		height: auto;
	}

	.battle-roster-row
	{
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 4px;
	}

	.battle-start-row
	{
		flex-direction: row;
		justify-content: center;
		width: 100%;
		margin-top: 12px;
		flex-shrink: 0;
	}

	.battle-start-row .cq-btn.big
	{
		min-width: 200px;
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 15px;
		font-weight: 800;
		justify-content: center;
		pointer-events: all;
	}

	.battle-start-hint
	{
		width: 100%;
		margin-top: 6px;
		font-size: 11px;
		font-weight: 600;
		color: #e0a060;
		text-align: center;
		flex-shrink: 0;
		height: auto;
	}

	.battle-chip
	{
		flex-direction: row;
		align-items: center;
		padding: 6px 10px;
		margin-right: 6px;
		margin-bottom: 6px;
		background-color: #0a2030;
		border: 2px solid #3a6070;
		border-radius: 8px;
		font-size: 11px;
		color: #c8dce8;
		cursor: pointer;
		pointer-events: all;
	}

	.battle-chip.on
	{
		border-color: #50c070;
		background-color: #1a4030;
		color: #e8ffe8;
	}

	.battle-chip.hurt
	{
		border-color: #804040;
		background-color: #281818;
		color: #c09090;
		opacity: 0.75;
	}

	.battle-chip span,
	.battle-chip .legend-swatch
	{
		pointer-events: none;
	}

	// Visual fight stage (tank-like mini arena)
	.battle-stage-wrap
	{
		width: 100%;
		margin-top: 4px;
		margin-bottom: 8px;
		align-items: center;
		justify-content: center;
	}

	.battle-stage
	{
		position: relative;
		width: 620px;
		height: 210px;
		// visible so name/hp under fish aren't clipped
		overflow: visible;
		border-radius: 12px;
		border: 3px solid #3a7088;
		background-color: #0a2840;
		flex-shrink: 0;
	}

	.playing.nochill .battle-stage
	{
		border-color: #6a3040;
		background-color: #140a12;
	}

	.battle-stage.live
	{
		border-color: #50a0c0;
	}

	.battle-water
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #0c3048;
		opacity: 0.95;
		border-radius: 10px;
	}

	.playing.nochill .battle-water
	{
		background-color: #1a1018;
	}

	.battle-bubbles
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 40px;
		opacity: 0.25;
		background-color: #40a0c020;
	}

	.battle-gravel
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 22px;
		background-color: #3a3020;
		border-top: 2px solid #5a4830;
	}

	.playing.nochill .battle-gravel
	{
		background-color: #2a1818;
		border-top-color: #4a2828;
	}

	.battle-lane
	{
		position: absolute;
		top: 6px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #80b0c8;
		opacity: 0.7;
		pointer-events: none;
	}

	.battle-lane.you-lane
	{
		left: 10px;
		color: #70d090;
	}

	.battle-lane.ai-lane
	{
		right: 10px;
		color: #e07070;
	}

	.battle-flash
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #fff8e0;
		pointer-events: none;
		z-index: 20;
		border-radius: 10px;
	}

	.battle-actor
	{
		position: absolute;
		flex-direction: column;
		align-items: center;
		pointer-events: none;
		z-index: 5;
	}

	.battle-actor.lunge
	{
		z-index: 12;
	}

	.battle-actor.hit
	{
		z-index: 11;
	}

	.battle-actor.down
	{
		opacity: 0.45;
		z-index: 2;
	}

	.battle-actor.win
	{
		z-index: 8;
	}

	.battle-actor-sprite
	{
		width: 100%;
		height: 100%;
	}

	.battle-actor-body
	{
		width: 100%;
		height: 70%;
		border-radius: 50%;
		border: 2px solid #ffffff40;
	}

	.battle-actor-fin
	{
		position: absolute;
		right: -4px;
		top: 30%;
		width: 30%;
		height: 40%;
		border-radius: 40%;
		opacity: 0.85;
	}

	.battle-actor.foe .battle-actor-fin
	{
		right: auto;
		left: -4px;
	}

	.battle-actor-jacked
	{
		position: absolute;
		left: -4px;
		right: -4px;
		top: -4px;
		bottom: 14px;
		border: 2px solid #e0c040;
		border-radius: 8px;
		opacity: 0.55;
		pointer-events: none;
	}

	.battle-actor-name
	{
		position: absolute;
		left: 50%;
		bottom: -14px;
		margin-left: -40px;
		width: 80px;
		font-size: 9px;
		font-weight: 700;
		color: #e8f4ff;
		text-align: center;
		text-shadow: 0 1px 2px #000000cc;
		white-space: nowrap;
		overflow: hidden;
	}

	.battle-actor.foe .battle-actor-name
	{
		color: #ffd0d0;
	}

	.battle-actor-hp
	{
		position: absolute;
		left: 10%;
		right: 10%;
		bottom: -22px;
		height: 5px;
		background-color: #102028;
		border-radius: 3px;
		border: 1px solid #2a4858;
		overflow: hidden;
	}

	.battle-actor-hp-fill
	{
		height: 100%;
		background-color: #40c060;
	}

	.battle-actor-hp-fill.ai
	{
		background-color: #e05050;
	}

	.battle-fx
	{
		position: absolute;
		transform: translate( -50%, -100% );
		font-size: 13px;
		font-weight: 800;
		padding: 2px 8px;
		border-radius: 6px;
		pointer-events: none;
		z-index: 25;
		white-space: nowrap;
		text-shadow: 0 1px 2px #000000aa;
	}

	.battle-fx.hit
	{
		color: #ffe0a0;
		background-color: #301818;
		border: 1px solid #a05040;
	}

	.battle-fx.crit
	{
		color: #fff060;
		font-size: 15px;
		background-color: #402010;
		border: 2px solid #e0a020;
	}

	.battle-fx.dodge
	{
		color: #a0e8ff;
		background-color: #102838;
		border: 1px solid #40a0c8;
	}

	.battle-fx.ko
	{
		color: #ff8080;
		font-size: 16px;
		background-color: #280808;
		border: 2px solid #c04040;
	}

	.battle-log
	{
		flex-direction: column;
		width: 100%;
		max-height: 88px;
		overflow: scroll;
		padding: 8px 10px;
		background-color: #0a1820;
		border-radius: 8px;
		border: 1px solid #2a4050;
	}

	.battle-log-line
	{
		font-size: 11px;
		color: #a0c0d0;
		margin-bottom: 2px;
	}

	.battle-result
	{
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		padding: 12px;
		border-radius: 10px;
	}

	.battle-result.win
	{
		background-color: #143828;
		border: 2px solid #40a060;
	}

	.battle-result.lose
	{
		background-color: #381818;
		border: 2px solid #a04040;
	}

	.battle-result-title
	{
		font-size: 18px;
		font-weight: 800;
		color: #f0f8ff;
	}

	.battle-result-body
	{
		font-size: 12px;
		color: #b0c8d8;
		margin-top: 4px;
		text-align: center;
	}

	.fish.battle-pick .fish-body
	{
		border: 2px solid #50e080;
	}

	// Fish Gym — centered popup (above dim backdrop)
	.train-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -220px;
		margin-top: -200px;
		width: 440px;
		padding: 18px 20px 16px 20px;
		background-color: #0e2434;
		border: 3px solid #3a90b0;
		border-radius: 0;
		flex-direction: column;
		align-items: center;
		z-index: 81;
		pointer-events: all;
		flex-shrink: 0;
	}

	.playing.nochill .train-panel
	{
		background-color: #1a1018;
		border-color: #8b4a5a;
	}

	.train-panel-kicker
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #6ab8d8;
		text-transform: uppercase;
		margin-bottom: 4px;
		text-align: center;
	}

	.playing.nochill .train-panel-kicker
	{
		color: #c08090;
	}

	.train-panel-title
	{
		font-size: 22px;
		font-weight: 800;
		color: #e8f4ff;
		margin-bottom: 8px;
		text-align: center;
		white-space: nowrap;
	}

	// Post-set gains card (after 3 reps)
	.train-panel.train-result
	{
		margin-top: -120px;
		border-color: #40a060;
		background-color: #0e2818;
	}

	.playing.nochill .train-panel.train-result
	{
		border-color: #70a040;
		background-color: #182010;
	}

	.train-result-line
	{
		width: 100%;
		font-size: 16px;
		font-weight: 800;
		color: #b8f0c8;
		text-align: center;
		padding: 14px 12px;
		margin-top: 4px;
		background-color: #0a2010;
		border: 2px solid #3a8050;
		border-radius: 10px;
		height: auto;
		flex-shrink: 0;
		white-space: normal;
	}

	.playing.nochill .train-result-line
	{
		color: #e0f0a0;
		background-color: #141808;
		border-color: #607030;
	}

	// Single-line stats
	.train-side-stats-line
	{
		font-size: 13px;
		font-weight: 700;
		color: #a0d0e8;
		letter-spacing: 0.3px;
		padding: 6px 12px;
		background-color: #0a2030;
		border: 1px solid #2a5068;
		border-radius: 8px;
		margin-bottom: 6px;
		height: auto;
		flex-shrink: 0;
		white-space: nowrap;
		text-align: center;
		justify-content: center;
		width: auto;
	}

	.playing.nochill .train-side-stats-line
	{
		color: #e0b0b8;
		background-color: #120a10;
		border-color: #5a3038;
	}

	.train-side-sub
	{
		font-size: 12px;
		color: #8ab0c4;
		margin-bottom: 10px;
		margin-top: 2px;
		text-align: center;
		flex-shrink: 0;
		height: auto;
	}

	.playing.nochill .train-side-sub
	{
		color: #b08890;
	}

	.train-game-label
	{
		font-size: 11px;
		font-weight: 700;
		color: #ffd24a;
		letter-spacing: 0.5px;
		margin-bottom: 8px;
		text-transform: uppercase;
	}

	.train-reps
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.train-rep-dot
	{
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-left: 5px;
		margin-right: 5px;
		background-color: #1a3040;
		border: 2px solid #3a6080;
	}

	.train-rep-dot.done
	{
		background-color: #40b060;
		border-color: #60d080;
	}

	.train-rep-dot.current
	{
		background-color: #ffd24a;
		border-color: #ffe080;
		width: 14px;
		height: 14px;
	}

	.train-msg
	{
		font-size: 12px;
		font-weight: 700;
		color: #c8e8a0;
		margin-bottom: 10px;
		margin-top: 8px;
		text-align: center;
		min-height: 32px;
		height: auto;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		padding: 8px 6px;
		background-color: #0a2030;
		border-radius: 6px;
		white-space: normal;
	}

	.train-msg.hit
	{
		color: #ffd24a;
		font-weight: 800;
		font-size: 12px;
		border: 1px solid #806030;
	}

	.train-msg span
	{
		white-space: normal;
		text-align: center;
		height: auto;
	}

	.train-msg b
	{
		color: #c8e8a0;
		font-weight: 700;
	}

	.train-track
	{
		position: relative;
		width: 100%;
		height: 44px;
		background-color: #0a2030;
		border: 2px solid #3a7088;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 10px;
		flex-shrink: 0;
	}

	.playing.nochill .train-track
	{
		background-color: #120a10;
		border-color: #6a3040;
	}

	.train-zone
	{
		position: absolute;
		top: 0;
		bottom: 0;
		// Bright green so the hit window is obvious
		background-color: #40c060;
		opacity: 0.92;
		border-left: 1px solid #80f0a0;
		border-right: 1px solid #80f0a0;
	}

	.train-marker
	{
		position: absolute;
		top: 2px;
		bottom: 2px;
		// Centered on left% (matches 0–1 hit logic)
		width: 8px;
		margin-left: -4px;
		background-color: #ffd24a;
		border-radius: 3px;
		border: 1px solid #fff8c0;
		z-index: 2;
	}

	.train-score
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		color: #7a9aac;
		margin-bottom: 12px;
	}

	.train-score b
	{
		color: #e0f0ff;
		font-weight: 700;
	}

	.train-score-sep
	{
		margin-left: 6px;
		margin-right: 6px;
		color: #4a6878;
	}

	.train-actions
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 4px;
		flex-shrink: 0;
	}

	.train-actions .cq-btn
	{
		margin-left: 6px;
		margin-right: 6px;
		margin-bottom: 0;
		justify-content: center;
		min-width: 100px;
	}

	.train-actions .cq-btn.big
	{
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 28px;
		padding-right: 28px;
		font-size: 16px;
		font-weight: 800;
		min-width: 140px;
	}

	// Steroid inject — absolute center above dim
	.inject-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -220px;
		margin-top: -130px;
		width: 440px;
		padding: 20px 22px;
		background-color: #123040;
		border: 2px solid #4a9abc;
		border-radius: 14px;
		flex-direction: column;
		align-items: center;
		z-index: 81;
		pointer-events: all;
		flex-shrink: 0;
	}

	.playing.nochill .inject-panel
	{
		background-color: #1a1018;
		border-color: #8b4a5a;
	}

	.inject-title
	{
		font-size: 22px;
		font-weight: 800;
		color: #e8f4ff;
		margin-bottom: 4px;
	}

	.inject-msg
	{
		font-size: 13px;
		color: #8ab0c4;
		margin-top: 4px;
		margin-bottom: 14px;
		text-align: center;
	}

	.inject-track
	{
		position: relative;
		width: 100%;
		height: 36px;
		background-color: #0a2030;
		border: 2px solid #3a7088;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 16px;
	}

	.inject-zone
	{
		position: absolute;
		left: 42%;
		width: 20%;
		top: 0;
		bottom: 0;
		background-color: #3a9050;
		opacity: 0.75;
	}

	.inject-marker
	{
		position: absolute;
		top: 2px;
		bottom: 2px;
		width: 6px;
		margin-left: -3px;
		background-color: #ffd24a;
		border-radius: 2px;
	}

	.fish.jacked .fish-body
	{
		border: 2px solid #e04040;
	}

	// Overfeed chonk — fat sheets carry the look; CSS backs up placeholder fish.
	.fish.fat .fish-body
	{
		border-radius: 50%;
	}

	.fish.fat-2 .fish-body,
	.fish.fat-3 .fish-body
	{
		border-radius: 50%;
	}

	.fish.fat-3 .fish-belly
	{
		opacity: 0.95;
		height: 55%;
	}

	// Dedicated fat sheet already has the belly — light bounce, no extra blur.
	.fish.has-sprite.fat-2 .fish-sprite,
	.fish.has-sprite.fat-3 .fish-sprite
	{
		border-radius: 0;
	}

	// Stage-3 meatball: slight extra squish on the draw box.
	.fish.has-sprite.fat-3
	{
		// scale still from DrawScale; class is for future VFX hooks
	}

	// Rare breed: pregnant chonk glow + court dance tell.
	.fish.pregnant .pregnant-glow
	{
		position: absolute;
		left: 8%;
		top: 18%;
		right: 8%;
		bottom: 12%;
		border-radius: 50%;
		background-color: #f0a0c8;
		opacity: 0.22;
		pointer-events: none;
		z-index: 1;
	}

	.fish.courting .fish-vis
	{
		// hearts already sell the court; no outline box
	}

	.tank-egg
	{
		position: absolute;
		width: 14px;
		height: 18px;
		margin-left: -7px;
		margin-top: -9px;
		border-radius: 50% 50% 48% 48%;
		background-color: #f0e0c0;
		border: 2px solid #c8a060;
		pointer-events: none;
		z-index: 11;
	}

	.tank-egg.ripe
	{
		background-color: #f0d090;
		border-color: #d09040;
	}

	.tank-egg.hatching
	{
		background-color: #e8b878;
		border-color: #e07040;
	}

	.breed-fx
	{
		position: absolute;
		pointer-events: none;
		z-index: 14;
		margin-left: -6px;
		margin-top: -6px;
	}

	.breed-fx.heart
	{
		width: 12px;
		height: 12px;
		background-color: #f05090;
		border-radius: 50% 50% 0 50%;
		transform: rotate( -45deg );
		border: 1px solid #a02050;
	}

	.breed-fx.bubble
	{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #c0e8f8;
		border: 1px solid #70b0d0;
		opacity: 0.75;
	}

	.breed-fx.hatch
	{
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #fff0a0;
		border: 1px solid #e0a040;
	}

	.mate-ring
	{
		position: absolute;
		margin-left: -50%;
		margin-top: -50%;
		border: 2px solid #f080b0;
		border-radius: 50%;
		pointer-events: none;
		z-index: 10;
		background-color: transparent;
	}

	.lay-flash
	{
		position: absolute;
		margin-left: -50%;
		margin-top: -50%;
		border-radius: 50%;
		border: 2px solid #f0c080;
		background-color: #ffe8b0;
		pointer-events: none;
		z-index: 10;
	}

	// Jacked tint over pixel sprites (red eyes vibe without new sheets yet)
	.fish.has-sprite.jacked .fish-sprite
	{
		// veins overlay sells jacked; no rectangle
	}

	.fish.has-sprite.meth .fish-sprite
	{
		// already has meth overlays; keep sprite readable
	}

	// --- Growth stages (size is DrawScale; CSS sells guppy softness) ---
	.fish.growth-0 .fish-sprite
	{
		// guppy: softer silhouette
		border-radius: 45%;
		opacity: 0.96;
	}

	.fish.growth-1 .fish-sprite
	{
		border-radius: 30%;
	}

	// Rarity: menu color + tank glow. No box outline around the pixel art.

	.fish-menu-sub.rarity-uncommon { color: #7ad8b0; }
	.fish-menu-sub.rarity-rare { color: #7ab8ff; }
	.fish-menu-sub.rarity-paintedrare { color: #f090e0; }
	.fish-menu-sub.rarity-legendary { color: #ffd24a; }
	.fish-menu-sub.rarity-mythical { color: #d0a0ff; }

	// GBA halo: four 4px squares, not a soft oval.
	.fish .rarity-halo
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 1;
	}

	.fish .rarity-halo .h
	{
		position: absolute;
		width: 4px;
		height: 4px;
		pointer-events: none;
	}

	.fish .rarity-halo .n { top: 6%; left: 50%; margin-left: -2px; }
	.fish .rarity-halo .s { bottom: 8%; left: 50%; margin-left: -2px; }
	.fish .rarity-halo .e { right: 8%; top: 50%; margin-top: -2px; }
	.fish .rarity-halo .w { left: 8%; top: 50%; margin-top: -2px; }

	.fish.rarity-uncommon .rarity-halo .h { background-color: #7ad8b0; }
	.fish.rarity-rare .rarity-halo .h { background-color: #7ab8ff; }
	.fish.rarity-paintedrare .rarity-halo .h { background-color: #f090e0; }
	.fish.rarity-legendary .rarity-halo .h
	{
		background-color: #ffd24a;
		animation: goldpulse 0.8s linear infinite;
	}
	.fish.rarity-mythical .rarity-halo .h
	{
		animation: gba-rainbow 0.8s linear infinite;
	}

	.fish .rarity-paint
	{
		position: absolute;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		pointer-events: none;
		z-index: 3;
		opacity: 0.85;
	}

	.fish .rarity-paint.a
	{
		left: 18%;
		top: 28%;
		background-color: #ff60c8;
	}

	.fish .rarity-paint.b
	{
		right: 16%;
		bottom: 24%;
		background-color: #40e0ff;
	}

	// Shop preview: tiny guppy-scale swatch
	.legend-swatch.swatch-guppy
	{
		// slightly smaller art reads as “you buy babies”
	}

	.legend-swatch.swatch-guppy .swatch-sprite
	{
		// scale handled by panel size; keep sprite filling
	}

	.jacked-veins
	{
		position: absolute;
		left: 10%;
		right: 10%;
		top: 30%;
		height: 3px;
		background-color: #c02040;
		opacity: 0.7;
		pointer-events: none;
		z-index: 4;
	}

	.playing.remove-mode .cq-dock
	{
		border-color: #c06060;
	}

	// Post-fight injury — reuses sick look + cooldown badge
	.fight-hurt-badge
	{
		position: absolute;
		left: 50%;
		bottom: -12px;
		margin-left: -16px;
		min-width: 32px;
		padding: 1px 4px;
		background-color: #402018;
		border: 1px solid #a05030;
		border-radius: 4px;
		font-size: 9px;
		font-weight: 800;
		color: #ffb080;
		text-align: center;
		pointer-events: none;
		z-index: 8;
	}

	.fish.fight-hurt.has-sprite .fish-sprite
	{
		opacity: 0.72;
		filter: saturate( 0.55 );
	}

	// Progressive death look (sick-1 … sick-4)
	.fish.sick-1 .fish-body
	{
		opacity: 0.85;
		border: 1px solid #7a9a50;
	}

	.fish.sick-2 .fish-body
	{
		opacity: 0.65;
		border: 1px solid #8a8040;
	}

	.fish.sick-3 .fish-body
	{
		opacity: 0.45;
		border: 1px solid #a05020;
	}

	.fish.sick-4 .fish-body
	{
		opacity: 0.28;
		border: 2px solid #c41e1e;
	}

	.fish.meth .fish-body
	{
		border: 2px solid #ff40a0;
		// Slightly stretched / wired look
		opacity: 1;
	}

	.fish.meth
	{
		// Tiny scale pulse via animation (tweaking)
		animation-name: methpulse;
		animation-duration: 0.18s;
		animation-iteration-count: infinite;
		animation-timing-function: steps( 2, end );
	}

	// ----- Weed gummies high (trippy, slow) -----
	.fish.stoned
	{
		animation-name: stonedwobble;
		animation-duration: 1.6s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}

	.fish.stoned.has-sprite .fish-sprite
	{
		// Soft green-purple haze on the sprite panel
		border: 2px solid #80e060;
		opacity: 0.92;
	}

	.fish.stoned .fish-body
	{
		border: 2px solid #90e050;
		opacity: 0.95;
	}

	.stoned-aura
	{
		position: absolute;
		left: -8px;
		top: -8px;
		right: -8px;
		bottom: -8px;
		border: 2px solid #70d050;
		border-radius: 50%;
		opacity: 0.45;
		pointer-events: none;
		z-index: 2;
		animation-name: stonedaura;
		animation-duration: 1.2s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}

	.stoned-aura.ring2
	{
		left: -14px;
		top: -14px;
		right: -14px;
		bottom: -14px;
		border-color: #c060e0;
		opacity: 0.3;
		animation-duration: 1.8s;
	}

	.stoned-eyes
	{
		position: absolute;
		right: 12%;
		top: 20%;
		width: 14px;
		height: 10px;
		background-color: #a0ff60;
		border: 1px solid #ffffff;
		border-radius: 4px;
		pointer-events: none;
		z-index: 6;
		opacity: 0.9;
	}

	.stoned-spark
	{
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		pointer-events: none;
		z-index: 7;
		opacity: 0.85;
		animation-name: stonedspark;
		animation-duration: 0.9s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}

	.stoned-spark.a
	{
		left: 10%;
		top: -4px;
		background-color: #80ff60;
	}

	.stoned-spark.b
	{
		right: 8%;
		top: 40%;
		background-color: #e080ff;
		animation-duration: 1.1s;
	}

	.stoned-spark.c
	{
		left: 40%;
		bottom: -2px;
		background-color: #60e0ff;
		animation-duration: 1.3s;
	}

	.meth-eyes
	{
		position: absolute;
		right: 14%;
		top: 18%;
		width: 12px;
		height: 8px;
		background-color: #ff1040;
		border: 1px solid #ffffff;
		border-radius: 2px;
		pointer-events: none;
		z-index: 5;
		// Dilated pupils energy
		box-shadow: 0 0 6px #ff2060;
	}

	.meth-aura
	{
		position: absolute;
		left: -4px;
		top: -4px;
		right: -4px;
		bottom: -4px;
		border: 1px solid #ff60c0;
		opacity: 0.55;
		pointer-events: none;
		z-index: 3;
		animation-name: methaura;
		animation-duration: 0.22s;
		animation-iteration-count: infinite;
		animation-timing-function: steps( 2, end );
	}

	.meth-sweat
	{
		position: absolute;
		left: 20%;
		top: -6px;
		width: 4px;
		height: 6px;
		background-color: #a0d0ff;
		opacity: 0.8;
		pointer-events: none;
		z-index: 5;
		border-radius: 2px;
	}

	.hud-stat.addiction-hud
	{
		margin-top: 3px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #ff80c0;
	}

	// Hooked but sober — dull, needy
	.fish.hooked-1 .fish-body
	{
		border: 1px solid #a06080;
	}

	.fish.hooked-2 .fish-body,
	.fish.hooked-3 .fish-body
	{
		border: 1px solid #c04080;
	}

	.fish.hooked-4 .fish-body
	{
		border: 2px solid #e02070;
	}

	// Withdrawal — pale, sinking vibe
	.fish.withdrawing .fish-body
	{
		opacity: 0.55;
		border: 2px solid #606080;
	}

	.wd-shiver
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: 1px dashed #8090b0;
		opacity: 0.5;
		pointer-events: none;
		z-index: 4;
		animation-name: wdshiver;
		animation-duration: 0.35s;
		animation-iteration-count: infinite;
		animation-timing-function: steps( 2, end );
	}

	// Tiny "X" eyes when things get bad
	.sick-x
	{
		position: absolute;
		right: 14%;
		top: 20%;
		width: 10px;
		height: 10px;
		pointer-events: none;
		z-index: 5;
		font-size: 9px;
		font-weight: 800;
		color: #201808;
		text-align: center;
	}

	.fish.sick-2 .sick-x,
	.fish.sick-3 .sick-x,
	.fish.sick-4 .sick-x
	{
		// drawn as two lines via borders
		border-left: 2px solid #101008;
		border-top: 2px solid #101008;
		width: 7px;
		height: 7px;
		// rotate-ish using asymmetric box — keep simple as dark blot
		background-color: #101008;
		opacity: 0.85;
		border-radius: 1px;
	}

	.fish.sick-4 .sick-x
	{
		background-color: #c41e1e;
		opacity: 1;
	}

	.hud-stat.death-warn
	{
		margin-top: 4px;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #ff6040;
	}

	.playing.dying-hard .hud-stat.death-warn
	{
		color: #ff2020;
	}

	// Tank-wide distress flash + vignette
	.death-flash
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #c41e1e;
		pointer-events: none;
		z-index: 8;
	}

	.boom-white-flash
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
		pointer-events: none;
		z-index: 9;
	}

	// Centered on fish via inline left/top; margins keep the ring expanding around that point.
	.boom-shock
	{
		position: absolute;
		width: 80px;
		height: 80px;
		margin-left: -40px;
		margin-top: -40px;
		border: 4px solid #ffd040;
		border-radius: 50%;
		pointer-events: none;
		z-index: 10;
		opacity: 0.7;
		animation-name: boomshock;
		animation-duration: 0.45s;
		animation-timing-function: ease-out;
		animation-iteration-count: 1;
	}

	.tank-glass.booming
	{
		border-color: #ff4020;
	}

	.death-vignette
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 7;
		border: 0 solid #000000;
		opacity: 0;
	}

	.death-vignette.death-stage-1
	{
		opacity: 0.15;
		border: 8px solid #1a1008;
	}

	.death-vignette.death-stage-2
	{
		opacity: 0.28;
		border: 14px solid #180c08;
	}

	.death-vignette.death-stage-3
	{
		opacity: 0.4;
		border: 22px solid #140808;
	}

	.death-vignette.death-stage-4
	{
		opacity: 0.55;
		border: 30px solid #100404;
	}

	.tank-glass.death-stage-3
	{
		border-color: #a04020;
	}

	.tank-glass.death-stage-4
	{
		border-color: #c41e1e;
	}

	.playing.dying .tank-water
	{
		// slight sick tint under the water
		background-color: #0d3248;
	}

	.playing.dying-hard .tank-water
	{
		background-color: #1a2030;
	}

	.playing.nochill .tank-water
	{
		background-color: #1a1018;
	}

	.playing.nochill .tank-glass
	{
		border-color: #8b1a1a;
	}

	.playing.nochill .hud-kicker
	{
		color: #c43c3c;
	}

	.chaos-bar
	{
		position: relative;
		width: 1280px;
		height: 10px;
		margin-bottom: 8px;
		background-color: #1a2430;
		border: 2px solid #2a4050;
		flex-shrink: 0;
		overflow: hidden;
	}

	.chaos-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background-color: #c41e1e;
	}

	.chaos-mark
	{
		position: absolute;
		left: 40%;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: #ffd24a;
		opacity: 0.85;
	}

	.playing.nochill .chaos-bar
	{
		border-color: #5a2020;
		background-color: #18080c;
	}

	.tank-chrome
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.tank-hud
	{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		width: 1280px;
		margin-bottom: 8px;
	}

	.hud-left
	{
		flex-direction: column;
		min-width: 180px;
	}

	.hud-center
	{
		flex-direction: column;
		align-items: center;
		flex-grow: 1;
	}

	.doge-label
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 3px;
		color: #c9a227;
	}

	.doge-value
	{
		font-size: 32px;
		font-weight: 800;
		color: #ffd24a;
		letter-spacing: 1px;
	}

	.doge-rate
	{
		font-size: 12px;
		font-weight: 700;
		color: #8bc34a;
		margin-top: 2px;
	}

	.hud-kicker
	{
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 3px;
		color: #3a8ab0;
	}

	.hud-title
	{
		font-size: 24px;
		font-weight: 800;
		color: #e8f4ff;
		letter-spacing: 1px;
	}

	.hud-right
	{
		flex-direction: column;
		align-items: flex-end;
		min-width: 180px;
	}

	.hud-stat
	{
		font-size: 13px;
		font-weight: 700;
		color: #c0d8e8;
		letter-spacing: 1px;
	}

	.hud-stat.dim
	{
		font-size: 10px;
		color: #5a7080;
		margin-top: 4px;
	}

	// --- Fusion flash (multi-color strobe on combine) ---
	.fusion-flash
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 55;
		background-color: #ffffff;
	}

	.fusion-flash.fusion-white
	{
		background-color: #f8fcff;
	}

	.fusion-flash.fusion-mag
	{
		background-color: #e040c0;
	}

	.fusion-flash.fusion-toxic
	{
		background-color: #40f080;
	}

	// Behind fish (z 12) so the new abom reads on top of the birth ring.
	.fusion-ring
	{
		position: absolute;
		margin-left: -50%;
		margin-top: -50%;
		border: 3px solid #e8a0ff;
		border-radius: 50%;
		pointer-events: none;
		z-index: 10;
	}

	.fusion-spark
	{
		position: absolute;
		width: 18px;
		height: 18px;
		margin-left: -9px;
		margin-top: -9px;
		background-color: #ffffff;
		border: 2px solid #c060ff;
		border-radius: 50%;
		pointer-events: none;
		z-index: 11;
	}

	.tank-glass.fusing
	{
		border-color: #c060ff;
	}

	.tank-glass.combine-pick
	{
		border-color: #e09040;
	}

	.fish.combine-a
	{
		// first parent selected for fuse
		border: 2px solid #ffb040;
	}

	// Monster abomination idle thrash
	// Lovecraftian tentacle beast (monster + normal fuse)
	.fish.tentacle-beast .fish-body
	{
		border-radius: 42% 48% 40% 55%;
		background-color: #1a3040;
		border: 2px solid #60e0a0;
	}

	.fish.tentacle-beast .tentacle-aura
	{
		position: absolute;
		left: -12%;
		top: -10%;
		right: -12%;
		bottom: -14%;
		border-radius: 50%;
		background-color: #204858;
		opacity: 0.35;
		pointer-events: none;
		z-index: 0;
	}

	.fish.tentacle-beast .tentacle-arm
	{
		position: absolute;
		width: 18%;
		height: 42%;
		border-radius: 40% 40% 55% 55%;
		background-color: #2a4858;
		border: 1px solid #50c090;
		pointer-events: none;
		z-index: 1;
	}

	.fish.tentacle-beast .tentacle-arm.t1
	{
		left: -6%;
		top: 28%;
		transform: rotate( -35deg );
	}

	.fish.tentacle-beast .tentacle-arm.t2
	{
		left: 8%;
		bottom: -12%;
		height: 38%;
		transform: rotate( 12deg );
	}

	.fish.tentacle-beast .tentacle-arm.t3
	{
		right: 6%;
		bottom: -10%;
		height: 40%;
		transform: rotate( -18deg );
	}

	.fish.tentacle-beast .tentacle-arm.t4
	{
		right: -8%;
		top: 20%;
		transform: rotate( 42deg );
	}

	.fish.tentacle-beast .tentacle-arm.t5
	{
		left: 38%;
		top: -16%;
		height: 32%;
		width: 14%;
		transform: rotate( 8deg );
	}

	.fish.tentacle-beast .tentacle-eye
	{
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #90ffe0;
		border: 1px solid #104030;
		pointer-events: none;
		z-index: 3;
	}

	.fish.tentacle-beast .tentacle-eye.a
	{
		left: 28%;
		top: 34%;
	}

	.fish.tentacle-beast .tentacle-eye.b
	{
		left: 48%;
		top: 28%;
		width: 12px;
		height: 12px;
	}

	.fish.tentacle-beast .tentacle-eye.c
	{
		left: 62%;
		top: 42%;
		width: 8px;
		height: 8px;
	}

	.fish.monster
	{
		// continuous wrongness
	}

	.fish.monster .monster-aura
	{
		position: absolute;
		left: -12%;
		top: -12%;
		right: -12%;
		bottom: -12%;
		border: 2px solid #a040c0;
		border-radius: 40%;
		opacity: 0.45;
		pointer-events: none;
		animation-name: monster-pulse;
		animation-duration: 0.55s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.fish.monster .monster-glitch
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		opacity: 0.25;
		background-color: #8020a0;
		animation-name: monster-glitch;
		animation-duration: 0.18s;
		animation-iteration-count: infinite;
	}

	.fish.monster .monster-eye-extra
	{
		position: absolute;
		width: 8px;
		height: 8px;
		background-color: #fff8e0;
		border: 1px solid #201010;
		border-radius: 50%;
		pointer-events: none;
		z-index: 4;
		animation-name: monster-eye-blink;
		animation-duration: 0.9s;
		animation-iteration-count: infinite;
	}

	.fish.monster .monster-eye-extra.a
	{
		left: 55%;
		top: 18%;
	}

	.fish.monster .monster-eye-extra.b
	{
		left: 22%;
		top: 55%;
		width: 6px;
		height: 6px;
		animation-duration: 0.55s;
	}

	.fish.monster.has-sprite .fish-sprite
	{
		animation-name: monster-thrash;
		animation-duration: 0.28s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes monster-pulse
	{
		from { opacity: 0.25; }
		to { opacity: 0.65; }
	}

	@keyframes monster-glitch
	{
		0% { opacity: 0.05; left: 0; }
		40% { opacity: 0.35; left: 2px; }
		70% { opacity: 0.1; left: -2px; }
		100% { opacity: 0.2; left: 0; }
	}

	@keyframes monster-eye-blink
	{
		0% { opacity: 1; }
		80% { opacity: 1; }
		85% { opacity: 0.15; }
		100% { opacity: 1; }
	}

	@keyframes monster-thrash
	{
		0% { transform: translate( 0px, 0px ) rotate( 0deg ); }
		25% { transform: translate( 1px, -1px ) rotate( -2deg ); }
		50% { transform: translate( -1px, 1px ) rotate( 2deg ); }
		75% { transform: translate( 1px, 1px ) rotate( -1deg ); }
		100% { transform: translate( 0px, 0px ) rotate( 0deg ); }
	}

	// Monster + meth: even worse thrash, slime, extra eye
	.fish.monster-meth .monster-aura
	{
		border-color: #ff40c0;
		opacity: 0.75;
		animation-duration: 0.28s;
	}

	.fish.monster-meth .monster-glitch
	{
		background-color: #e02080;
		opacity: 0.4;
		animation-duration: 0.1s;
	}

	.fish.monster-meth.has-sprite .fish-sprite
	{
		animation-name: monster-meth-thrash;
		animation-duration: 0.16s;
		animation-iteration-count: infinite;
		border: 2px solid #ff60c0;
	}

	.fish.monster-meth .monster-meth-slime
	{
		position: absolute;
		left: 10%;
		right: 10%;
		bottom: 5%;
		height: 28%;
		background-color: #60c040;
		opacity: 0.35;
		border-radius: 40%;
		pointer-events: none;
		z-index: 2;
		animation-name: monster-slime;
		animation-duration: 0.7s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.fish.monster-meth .monster-meth-vein
	{
		position: absolute;
		width: 3px;
		height: 40%;
		background-color: #c02060;
		opacity: 0.7;
		pointer-events: none;
		z-index: 3;
	}

	.fish.monster-meth .monster-meth-vein.a
	{
		left: 30%;
		top: 20%;
		transform: rotate( 18deg );
	}

	.fish.monster-meth .monster-meth-vein.b
	{
		right: 28%;
		top: 25%;
		height: 50%;
		transform: rotate( -22deg );
	}

	.fish.monster-meth .monster-eye-extra.c
	{
		left: 70%;
		top: 40%;
		width: 10px;
		height: 10px;
		background-color: #ff4060;
		animation-duration: 0.35s;
	}

	@keyframes monster-meth-thrash
	{
		0% { transform: translate( 0px, 0px ) rotate( 0deg ); }
		20% { transform: translate( 3px, -2px ) rotate( -4deg ); }
		40% { transform: translate( -3px, 2px ) rotate( 5deg ); }
		60% { transform: translate( 2px, 3px ) rotate( -3deg ); }
		80% { transform: translate( -2px, -2px ) rotate( 3deg ); }
		100% { transform: translate( 0px, 0px ) rotate( 0deg ); }
	}

	@keyframes monster-slime
	{
		from { opacity: 0.2; height: 22%; }
		to { opacity: 0.45; height: 34%; }
	}

	// Meth-rush glass cracks — clean transparent line sprites over water
	.tank-cracks
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 38;
		overflow: hidden;
	}

	.crack-spr
	{
		position: absolute;
		pointer-events: none;
		opacity: 0.72;
	}

	.crack-sprite
	{
		width: 100%;
		height: 100%;
	}

	.crack-spr.c1
	{
		left: 12%;
		top: 6%;
		width: 160px;
		height: 200px;
	}

	.crack-spr.c2
	{
		left: 38%;
		top: 28%;
		width: 220px;
		height: 132px;
	}

	.crack-spr.c3
	{
		right: 10%;
		top: 10%;
		width: 200px;
		height: 200px;
	}

	.crack-spr.c4
	{
		left: 8%;
		bottom: 14%;
		width: 140px;
		height: 140px;
	}

	.crack-spr.c5
	{
		left: 52%;
		top: 8%;
		width: 140px;
		height: 180px;
		opacity: 0.55;
	}

	.crack-spr.spider
	{
		left: 42%;
		top: 38%;
		width: 220px;
		height: 220px;
		opacity: 0.85;
	}

	.tank-glass.cracks-3 .crack-spr,
	.tank-glass.cracks-4 .crack-spr,
	.tank-glass.cracks-5 .crack-spr
	{
		opacity: 0.88;
	}

	.tank-glass.cracks-5
	{
		border-color: #6a8090;
	}

	.tank-glass.cracks-5 .crack-spr.spider
	{
		opacity: 0.95;
	}

	.tank-glass.meth-rush
	{
		border-color: #e05090;
	}

	// Meth rush minigame panel
	.meth-rush-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -220px;
		margin-top: -160px;
		width: 440px;
		padding: 20px 22px;
		background-color: #1a1020;
		border: 3px solid #e04080;
		border-radius: 0;
		flex-direction: column;
		align-items: center;
		z-index: 81;
		pointer-events: all;
	}

	.meth-rush-kicker
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #ff60a0;
		margin-bottom: 4px;
	}

	.meth-rush-title
	{
		font-size: 20px;
		font-weight: 800;
		color: #ffe0f0;
		margin-bottom: 4px;
	}

	.meth-rush-sub
	{
		font-size: 12px;
		font-weight: 600;
		color: #c090a8;
		margin-bottom: 12px;
		text-align: center;
	}

	.meth-rush-msg
	{
		font-size: 13px;
		font-weight: 700;
		color: #ffd080;
		margin-bottom: 12px;
		min-height: 20px;
		text-align: center;
	}

	.meth-rush-track
	{
		margin-bottom: 10px;
	}

	.meth-rush-score
	{
		flex-direction: row;
		font-size: 12px;
		color: #b090a0;
		margin-bottom: 14px;
	}

	// One clean aquarium frame — GBA glass, not a flat teal slab
	.tank-glass
	{
		position: relative;
		flex-direction: column;
		width: 1280px;
		flex-shrink: 0;
		border: 5px solid #3a88a8;
		border-top-color: #7ec8e0;
		border-left-color: #68b8d0;
		border-right-color: #1a4860;
		border-bottom-color: #0e2838;
		background-color: #061018;
		border-radius: 2px;
		overflow: hidden;
		cursor: pointer;
		z-index: 3;
		box-shadow: 4px 10px 0 #0a1014, 0 18px 22px #00000099;
	}

	.tank-rim
	{
		width: 100%;
		height: 10px;
		background-color: #1a3848;
		flex-shrink: 0;
	}

	.tank-rim.top
	{
		height: 12px;
		background-color: #4a90a8;
		border-bottom: 2px solid #2a6078;
	}

	.tank-rim.bottom
	{
		height: 14px;
		background-color: #142830;
		border-top: 2px solid #0a1820;
	}

	.tank-base
	{
		height: 10px;
		width: 100%;
		background-color: #0c181c;
		flex-shrink: 0;
		border-top: 1px solid #243840;
	}

	.tank-water
	{
		position: relative;
		width: 1280px;
		height: 620px;
		// Deep aquarium — wallpaper teal, not flat navy
		background-color: #063048;
		overflow: hidden;
		flex-shrink: 0;
	}

	.tank-backdrop
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
	}

	.tank-backdrop-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.tank-water.has-backdrop .tank-depth
	{
		opacity: 0.12;
	}

	.tank-water.has-backdrop .tank-caustic
	{
		opacity: 0.04;
	}

	// Fish card must not get sheared by the glass when a fish is on the rim.
	.tank-glass.menu-open
	{
		overflow: visible;
	}

	.tank-glass.menu-open .tank-water
	{
		overflow: visible;
	}

	// Full-tank click catcher under fish — closes menu without eating fish clicks
	.tank-water-hit
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		pointer-events: all;
		cursor: default;
	}

	.playing.chill .tank-glass
	{
		border-color: #48a0c0;
		background-color: #061820;
		border-radius: 4px;
	}

	.playing.chill .tank-rim
	{
		background-color: #2a5868;
	}

	.playing.chill .tank-rim.top
	{
		background-color: #58a0b8;
	}

	.playing.chill .tank-gravel
	{
		background-color: #3a2a28;
	}

	// Depth bands — stacked solids (s&box has no gradients)
	.tank-depth
	{
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
		z-index: 0;
	}

	.tank-depth.d1
	{
		top: 0;
		height: 160px;
		background-color: #0a5878;
		opacity: 0.42;
	}

	.tank-depth.d2
	{
		bottom: 48px;
		height: 220px;
		background-color: #021820;
		opacity: 0.45;
	}

	.tank-caustic
	{
		position: absolute;
		left: 80px;
		right: 80px;
		top: 70px;
		height: 18px;
		background-color: #40c8e8;
		opacity: 0.08;
		pointer-events: none;
		z-index: 0;
		animation-name: tankcaustic;
		animation-duration: 4.2s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}

	.tank-shine
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 220px;
		height: 100%;
		background-color: #68d0f0;
		opacity: 0.07;
		pointer-events: none;
		z-index: 2;
	}

	.tank-scan
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 25;
		overflow: hidden;
	}

	.tank-scan .gba-scan-line
	{
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background-color: #02060c;
		opacity: 0.22;
		pointer-events: none;
	}

	.playing.nochill .tank-scan .gba-scan-line
	{
		background-color: #100408;
		opacity: 0.28;
	}

	.tank-glass-lip
	{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 14px;
		pointer-events: none;
		z-index: 4;
		background-color: #70d8f0;
		opacity: 0.18;
	}

	.tank-glass-lip.left
	{
		left: 0;
	}

	.tank-glass-lip.right
	{
		right: 0;
		width: 18px;
		background-color: #102838;
		opacity: 0.38;
	}

	.tank-bubbles
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 2;
	}

	.tank-bubbles .bubble
	{
		position: absolute;
		border: 2px solid #a8e8ff;
		background-color: #80d0e8;
		opacity: 0.35;
		border-radius: 50%;
		animation-name: tankbubble;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.tank-bubbles .bubble.b1 { left: 70px;  bottom: 36px; width: 8px;  height: 8px;  animation-duration: 5.2s; animation-delay: 0s; }
	.tank-bubbles .bubble.b2 { left: 92px;  bottom: 50px; width: 5px;  height: 5px;  animation-duration: 6.4s; animation-delay: 1.1s; }
	.tank-bubbles .bubble.b3 { left: 118px; bottom: 28px; width: 10px; height: 10px; animation-duration: 4.6s; animation-delay: 0.4s; }
	.tank-bubbles .bubble.b4 { left: 980px; bottom: 40px; width: 7px;  height: 7px;  animation-duration: 5.8s; animation-delay: 0.8s; }
	.tank-bubbles .bubble.b5 { left: 1008px; bottom: 56px; width: 5px; height: 5px;  animation-duration: 6.8s; animation-delay: 1.8s; }
	.tank-bubbles .bubble.b6 { left: 1040px; bottom: 32px; width: 9px; height: 9px;  animation-duration: 4.9s; animation-delay: 0.2s; }
	.tank-bubbles .bubble.b7 { left: 420px; bottom: 30px; width: 6px;  height: 6px;  animation-duration: 7.1s; animation-delay: 2.2s; }
	.tank-bubbles .bubble.b8 { left: 640px; bottom: 44px; width: 4px;  height: 4px;  animation-duration: 5.5s; animation-delay: 1.4s; }
	.tank-bubbles .bubble.b9 { left: 1180px; bottom: 38px; width: 8px; height: 8px;  animation-duration: 6.0s; animation-delay: 0.6s; }

	.tank-gravel
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 42px;
		background-color: #2e2420;
		pointer-events: none;
		z-index: 3;
	}

	.tank-gravel.has-sprite
	{
		background-color: transparent;
		overflow: hidden;
	}

	.tank-gravel-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.tank-gravel .pebble
	{
		position: absolute;
		bottom: 4px;
		background-color: #4a3a34;
		border-radius: 40%;
		pointer-events: none;
	}

	.tank-gravel .pebble.p1 { left: 18px;   width: 28px; height: 14px; background-color: #5a4034; }
	.tank-gravel .pebble.p2 { left: 160px;  width: 36px; height: 12px; background-color: #3a3028; }
	.tank-gravel .pebble.p3 { left: 340px;  width: 22px; height: 16px; background-color: #6a5040; }
	.tank-gravel .pebble.p4 { left: 520px;  width: 40px; height: 13px; background-color: #4a382c; }
	.tank-gravel .pebble.p5 { left: 720px;  width: 26px; height: 15px; background-color: #5a4438; }
	.tank-gravel .pebble.p6 { left: 900px;  width: 34px; height: 12px; background-color: #3e3228; }
	.tank-gravel .pebble.p7 { left: 1080px; width: 30px; height: 16px; background-color: #624838; }
	.tank-gravel .pebble.p8 { left: 1220px; width: 40px; height: 14px; background-color: #4a3a30; }

	.playing.nochill .tank-glass
	{
		border-color: #6a2030;
		background-color: #080408;
	}

	.playing.nochill .tank-water
	{
		background-color: #100810;
	}

	.playing.nochill .tank-depth.d1
	{
		background-color: #401018;
		opacity: 0.35;
	}

	.playing.nochill .tank-depth.d2
	{
		background-color: #080208;
		opacity: 0.55;
	}

	.playing.nochill .tank-caustic
	{
		background-color: #e04040;
		opacity: 0.06;
	}

	.playing.nochill .tank-shine
	{
		background-color: #e06070;
		opacity: 0.05;
	}

	.playing.nochill .tank-glass-lip
	{
		background-color: #e05060;
		opacity: 0.1;
	}

	.playing.nochill .tank-gravel
	{
		background-color: #1a1010;
	}

	.playing.nochill .tank-bubbles .bubble
	{
		border-color: #e08090;
		background-color: #a04050;
		opacity: 0.22;
	}

	@keyframes tankbubble
	{
		0% { bottom: 36px; opacity: 0.05; }
		12% { opacity: 0.4; }
		100% { bottom: 560px; opacity: 0; }
	}

	@keyframes tankcaustic
	{
		0% { top: 64px; opacity: 0.05; }
		50% { top: 88px; opacity: 0.12; }
		100% { top: 64px; opacity: 0.05; }
	}

	// Habitat prop overlay (flavor silhouettes)
	.hab-prop
	{
		position: absolute;
		pointer-events: none;
		z-index: 1;
		opacity: 0;
	}

	// ----- HABITAT THEMES -----
	.tank-glass.hab-glass .tank-water
	{
		// default aquarium look
	}

	.tank-glass.hab-deluxe
	{
		border-color: #6ab0d0;
		border-radius: 6px;
	}

	.tank-glass.hab-deluxe .tank-rim
	{
		background-color: #4a7898;
		height: 12px;
	}

	.tank-glass.hab-deluxe .tank-water
	{
		background-color: #0c4568;
	}

	.tank-glass.hab-deluxe .hab-prop
	{
		opacity: 0.2;
		right: 24px;
		top: 40px;
		width: 48px;
		height: 48px;
		background-color: #80c8e8;
		border-radius: 4px;
	}

	// Bathtub — porcelain pink rim, soapy water
	.tank-glass.hab-bathtub
	{
		border-color: #c8a0b0;
		border-radius: 18px;
	}

	.tank-glass.hab-bathtub .tank-rim
	{
		background-color: #e8d0d8;
		height: 14px;
	}

	.tank-glass.hab-bathtub .tank-rim.top
	{
		background-color: #f0e0e8;
		border-radius: 16px 16px 0 0;
	}

	.tank-glass.hab-bathtub .tank-rim.bottom
	{
		background-color: #d8b8c4;
		border-radius: 0 0 16px 16px;
	}

	.tank-glass.hab-bathtub .tank-water
	{
		background-color: #3a6a88;
	}

	.tank-glass.hab-bathtub .tank-gravel
	{
		background-color: #b0a090;
		height: 18px;
	}

	.tank-glass.hab-bathtub .hab-prop
	{
		opacity: 0.55;
		right: 36px;
		top: 28px;
		width: 36px;
		height: 36px;
		background-color: #e85070;
		border-radius: 50%;
	}

	// Kiddie pool — loud plastic blue
	.tank-glass.hab-kiddie
	{
		border-color: #40a0e0;
		border-radius: 24px;
	}

	.tank-glass.hab-kiddie .tank-rim
	{
		background-color: #58b8f0;
		height: 16px;
	}

	.tank-glass.hab-kiddie .tank-rim.top
	{
		background-color: #70c8f8;
	}

	.tank-glass.hab-kiddie .tank-water
	{
		background-color: #1a80b8;
	}

	.tank-glass.hab-kiddie .tank-gravel
	{
		background-color: #d0b060;
		height: 14px;
	}

	.tank-glass.hab-kiddie .hab-prop
	{
		opacity: 0.4;
		left: 28px;
		top: 24px;
		width: 50px;
		height: 20px;
		background-color: #f0d040;
		border-radius: 8px;
	}

	// Neighbor pool — suburban tile green
	.tank-glass.hab-neighbor
	{
		border-color: #2a8a70;
		border-radius: 4px;
	}

	.tank-glass.hab-neighbor .tank-rim
	{
		background-color: #d0c8b8;
		height: 12px;
	}

	.tank-glass.hab-neighbor .tank-water
	{
		background-color: #0a5a70;
	}

	.tank-glass.hab-neighbor .tank-gravel
	{
		background-color: #90a8a0;
		height: 20px;
	}

	.tank-glass.hab-neighbor .hab-prop
	{
		opacity: 0.35;
		right: 48px;
		bottom: 48px;
		width: 60px;
		height: 40px;
		background-color: #ffffff;
		border-radius: 2px;
	}

	// Sewage duct — brown-green grime
	.tank-glass.hab-sewage
	{
		border-color: #5a5030;
		border-radius: 4px;
	}

	.tank-glass.hab-sewage .tank-rim
	{
		background-color: #4a4030;
		height: 10px;
	}

	.tank-glass.hab-sewage .tank-water
	{
		background-color: #2a3820;
	}

	.tank-glass.hab-sewage .tank-gravel
	{
		background-color: #3a3420;
		height: 26px;
	}

	// Storm drain — gray runoff
	.tank-glass.hab-storm
	{
		border-color: #506070;
		border-radius: 2px;
	}

	.tank-glass.hab-storm .tank-rim
	{
		background-color: #3a4850;
		height: 8px;
	}

	.tank-glass.hab-storm .tank-water
	{
		background-color: #1a2830;
	}

	.tank-glass.hab-storm .tank-gravel
	{
		background-color: #2a3038;
		height: 18px;
	}

	// Abandoned spa — lavender chlorine
	.tank-glass.hab-spa
	{
		border-color: #8060a0;
		border-radius: 14px;
	}

	.tank-glass.hab-spa .tank-rim
	{
		background-color: #c0b0d0;
		height: 12px;
	}

	.tank-glass.hab-spa .tank-water
	{
		background-color: #3a2860;
	}

	.tank-glass.hab-spa .tank-gravel
	{
		background-color: #b0a0c0;
		height: 16px;
	}

	// Community fountain
	.tank-glass.hab-fountain
	{
		border-color: #80a0c0;
		border-radius: 50%;
	}

	.tank-glass.hab-fountain .tank-rim
	{
		background-color: #a0b8c8;
		height: 14px;
	}

	.tank-glass.hab-fountain .tank-water
	{
		background-color: #2060a0;
	}

	.tank-glass.hab-fountain .tank-gravel
	{
		background-color: #90a0b0;
		height: 20px;
	}

	// Stolen hot tub
	.tank-glass.hab-hottub
	{
		border-color: #c07040;
		border-radius: 20px;
	}

	.tank-glass.hab-hottub .tank-rim
	{
		background-color: #d09050;
		height: 14px;
	}

	.tank-glass.hab-hottub .tank-water
	{
		background-color: #4080a0;
	}

	.tank-glass.hab-hottub .tank-gravel
	{
		background-color: #806050;
		height: 12px;
	}

	// Lake — murky natural green
	.tank-glass.hab-lake
	{
		border-color: #3a6040;
		border-radius: 8px;
	}

	.tank-glass.hab-lake .tank-rim
	{
		background-color: #4a6840;
		height: 8px;
	}

	.tank-glass.hab-lake .tank-water
	{
		background-color: #1a4838;
	}

	.tank-glass.hab-lake .tank-gravel
	{
		background-color: #3a5030;
		height: 32px;
	}

	.tank-glass.hab-lake .tank-shine
	{
		background-color: #2a7050;
		opacity: 0.25;
	}

	// Gulf — warm gulf blue
	.tank-glass.hab-gulf
	{
		border-color: #2080a0;
		border-radius: 2px;
	}

	.tank-glass.hab-gulf .tank-rim
	{
		background-color: #c8b080;
		height: 10px;
	}

	.tank-glass.hab-gulf .tank-water
	{
		background-color: #0a6888;
	}

	.tank-glass.hab-gulf .tank-gravel
	{
		background-color: #c8a868;
		height: 22px;
	}

	// Pixel fish sprites (Assets/ui/sprites)
	.fish.has-sprite
	{
		// body chrome hidden; sprite fills the box
	}

	.fish.has-sprite .stat-spd-trail,
	.fish.has-sprite .stat-agi-fin,
	.fish.has-sprite .stat-end-plate,
	.fish.has-sprite .stat-end-band
	{
		display: none;
	}

	.fish.has-sprite .wd-shiver
	{
		border: 0;
		background-color: transparent;
	}

	.spritebox
	{
		pointer-events: none;
	}

	.fish-sprite
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1;
		image-rendering: pixelated;
	}

	.spritebox.mirror-x
	{
		transform: scaleX( -1 );
	}



	.decor-sprite-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.swatch-sprite
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.legend-swatch.has-sprite
	{
		position: relative;
		overflow: hidden;
		background-color: transparent;
	}

	// Facing flip is on .fish.flip (parent scaleX) — sprite inherits.

	.fish.has-sprite .fish-body
	{
		opacity: 0;
	}

	.fish.has-sprite.selected
	{
		// Tape prop is the tell — no hitbox rectangle.
	}

	// Shop / legend mini preview
	.legend-swatch.has-sprite
	{
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		border: 1px solid #2a4858;
	}

	// Cocaine sharks (ocean hazard)
	.shark
	{
		position: absolute;
		pointer-events: none;
		z-index: 6;
		flex-direction: row;
		align-items: center;
	}

	.shark-sprite
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1;
	}

	.shark.flip .shark-sprite
	{
		transform: scaleX( -1 );
	}

	.shark.has-sprite .shark-body,
	.shark.has-sprite .shark-fin,
	.shark.has-sprite .shark-eye,
	.shark.has-sprite .shark-nose
	{
		opacity: 0;
	}

	.shark.flip
	{
		// mirror via child transform-like: swap layout by flipping children positions
	}

	.shark-body
	{
		position: absolute;
		left: 8%;
		right: 12%;
		top: 25%;
		bottom: 20%;
		background-color: #1a2830;
		border: 2px solid #0a1018;
		border-radius: 40%;
	}

	.shark.flip .shark-body
	{
		left: 12%;
		right: 8%;
	}

	.shark-fin
	{
		position: absolute;
		left: 40%;
		top: 0;
		width: 18%;
		height: 35%;
		background-color: #243440;
		border: 2px solid #0a1018;
	}

	.shark-eye
	{
		position: absolute;
		right: 18%;
		top: 38%;
		width: 10px;
		height: 10px;
		background-color: #ff2040;
		border-radius: 50%;
	}

	.shark.flip .shark-eye
	{
		right: auto;
		left: 18%;
	}

	.shark-nose
	{
		position: absolute;
		right: 0;
		top: 35%;
		width: 18%;
		height: 30%;
		background-color: #152028;
		border-radius: 0 50% 50% 0;
	}

	.shark.flip .shark-nose
	{
		right: auto;
		left: 0;
		border-radius: 50% 0 0 50%;
	}

	.shark-label
	{
		position: absolute;
		left: 28%;
		bottom: 8%;
		font-size: 9px;
		font-weight: 800;
		color: #e0e8f0;
		opacity: 0.85;
	}

	.playing.shark-alert .tank-water
	{
		// slight red tint under alert
	}

	.playing.shark-alert .cq-pill-right .cq-pill-sub
	{
		color: #ff6060;
	}

	// Ocean — deep open water
	.tank-glass.hab-ocean
	{
		border-color: #104060;
		border-radius: 0;
	}

	.tank-glass.hab-ocean .tank-rim
	{
		background-color: #0a2030;
		height: 6px;
	}

	.tank-glass.hab-ocean .tank-water
	{
		background-color: #042848;
	}

	.tank-glass.hab-ocean .tank-gravel
	{
		background-color: #1a3040;
		height: 16px;
	}

	.tank-glass.hab-ocean .tank-shine
	{
		opacity: 0.15;
	}

	.tank-glass.hab-ocean .hab-prop
	{
		opacity: 0.12;
		left: 80px;
		top: 80px;
		width: 120px;
		height: 40px;
		background-color: #206080;
		border-radius: 20px;
	}

	// ----- DECOR (pixel sprites + CSS fallbacks on gravel) -----
	// Sizes come ONLY from inline style (DecorDef.Width/Height) — never force width here.
	.decor
	{
		position: absolute;
		// Below fish hit pads (z 20) so swimming fish stay easy to click;
		// still above gravel / bubbles. Drag raises z while held.
		pointer-events: all;
		cursor: grab;
		z-index: 14;
		overflow: hidden;
		flex-direction: column;
		justify-content: flex-end;
		align-items: stretch;
	}

	.decor.dragging
	{
		z-index: 28;
		opacity: 0.95;
		cursor: grabbing;
	}

	.decor.flying
	{
		z-index: 14;
		pointer-events: none;
	}

	// While holding a prop, show grab cursor over the play screen.
	.playing.decor-holding
	{
		cursor: grabbing;
	}

	.decor.has-sprite
	{
		// Must be non-transparent for hit-testing — fully transparent panels often drop clicks in S&box.
		background-color: #00000001;
		border-width: 0;
		border-radius: 0;
	}

	.decor .decor-sprite-fill
	{
		pointer-events: none;
	}

	// Fallback solid blocks only when no sprite (no fixed widths — use inline size)
	.decor-plant
	{
		background-color: #2a8a40;
		border: 2px solid #145020;
		border-radius: 8px 8px 2px 2px;
	}

	.decor-chest
	{
		background-color: #b8860b;
		border: 2px solid #6a4a08;
		border-radius: 3px;
	}

	.decor-bubbler
	{
		background-color: #6a90a8;
		border: 2px solid #304858;
	}

	.decor-forty
	{
		background-color: #3a5a28;
		border: 2px solid #1a3010;
		border-radius: 4px 4px 2px 2px;
	}

	.decor-cuffs
	{
		background-color: #8a8a90;
		border: 2px solid #404048;
		border-radius: 10px;
	}

	.decor-boot
	{
		background-color: #5a3020;
		border: 2px solid #301808;
		border-radius: 2px 8px 4px 2px;
	}

	.decor-meds
	{
		background-color: #e8e0d0;
		border: 2px solid #8a8070;
		border-radius: 2px;
	}

	.decor-doge
	{
		background-color: #ffd24a;
		border: 2px solid #a08020;
		border-radius: 4px 4px 2px 2px;
	}

	.decor-m80crate
	{
		background-color: #8b1a1a;
		border: 2px solid #401010;
		border-radius: 2px;
	}

	.decor-rock
	{
		background-color: #6a6860;
		border: 2px solid #3a3830;
		border-radius: 40% 50% 30% 40%;
	}

	.decor-castle
	{
		background-color: #c0b090;
		border: 2px solid #706050;
		border-radius: 2px 2px 0 0;
	}

	.decor-anchor
	{
		background-color: #505860;
		border: 2px solid #282c30;
		border-radius: 4px 4px 50% 50%;
	}

	.decor-cone
	{
		background-color: #e06020;
		border: 2px solid #803010;
		border-radius: 2px 2px 8px 8px;
	}

	.decor-lava
	{
		background-color: #9020a0;
		border: 2px solid #401050;
		border-radius: 12px 12px 6px 6px;
	}

	.decor-pizza
	{
		background-color: #d0a040;
		border: 2px solid #806020;
		border-radius: 2px;
	}

	.decor-trophy
	{
		background-color: #e0c040;
		border: 2px solid #806020;
		border-radius: 4px 4px 2px 2px;
	}

	.decor-coral
	{
		background-color: #e06090;
		border: 2px solid #803050;
		border-radius: 30% 40% 20% 50%;
	}

	.decor.has-sprite.decor-plant,
	.decor.has-sprite.decor-chest,
	.decor.has-sprite.decor-bubbler,
	.decor.has-sprite.decor-forty,
	.decor.has-sprite.decor-cuffs,
	.decor.has-sprite.decor-boot,
	.decor.has-sprite.decor-meds,
	.decor.has-sprite.decor-doge,
	.decor.has-sprite.decor-m80crate
	{
		background-color: transparent;
		border-width: 0;
	}

	.decor-sprite-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.legend-swatch.has-sprite
	{
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		background-color: transparent;
	}

	.fish
	{
		position: absolute;
		// Fat invisible pad around the drawn body — young/small fish stay clickable.
		pointer-events: all;
		cursor: pointer;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		// Above decor so gravel props don't steal mid-tank clicks.
		z-index: 20;
	}

	// Drawn fish (sprite/body) sits centered inside the hit pad.
	.fish-vis
	{
		position: absolute;
		pointer-events: none;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}

	.fish .fish-sprite,
	.fish .fish-body,
	.fish .m80-prop,
	.fish .monster-glitch,
	.fish .monster-aura,
	.fish .meth-aura,
	.fish .stoned-aura
	{
		pointer-events: none;
	}

	.fish.menu-on
	{
		z-index: 48;
	}

	// Parent flip still used for non-sprite bodies / M80 prop layout.
	// Textured sprites flip via SpriteBox.Mirror (scaleX on the panel that owns BackgroundImage).
	.fish.flip
	{
		transform: scaleX( -1 );
	}

	// Sprite fish: don't rely on parent flip for the texture (BackgroundImage can ignore it).
	.fish.has-sprite.flip
	{
		transform: none;
	}

	.fish.selected .fish-body
	{
		border: 2px solid #ffd24a;
	}

	// ----- M80 taped onto fish -----
	.m80-prop
	{
		position: absolute;
		// Sit on the fish midsection (fish local space; flip parent mirrors it).
		left: 35%;
		top: -6px;
		width: 22px;
		height: 28px;
		pointer-events: none;
		flex-direction: column;
		align-items: center;
		z-index: 5;
	}

	.fish.just-taped .m80-prop
	{
		// Slap-on beat when tape SFX fires.
		animation-name: m80slap;
		animation-duration: 0.35s;
		animation-timing-function: ease-out;
		animation-iteration-count: 1;
	}

	.m80-tape
	{
		position: absolute;
		left: -2px;
		right: -2px;
		top: 12px;
		height: 5px;
		background-color: #d4c48a;
		border: 1px solid #8a7840;
		z-index: 3;
		opacity: 0.95;
	}

	.m80-stick
	{
		position: relative;
		width: 12px;
		height: 22px;
		flex-direction: column;
		align-items: center;
		z-index: 2;
	}

	.m80-cap
	{
		width: 12px;
		height: 4px;
		background-color: #2a2a2a;
		border: 1px solid #101010;
	}

	.m80-body
	{
		width: 12px;
		height: 16px;
		background-color: #c41e1e;
		border: 1px solid #6a1010;
		border-top: none;
	}

	.m80-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 8px;
		font-size: 5px;
		font-weight: 800;
		color: #ffd24a;
		text-align: center;
		letter-spacing: 0px;
	}

	.m80-fuse
	{
		position: absolute;
		top: -6px;
		left: 9px;
		width: 2px;
		height: 8px;
		background-color: #5a4030;
		z-index: 4;
	}

	.m80-spark
	{
		position: absolute;
		top: -9px;
		left: 7px;
		width: 5px;
		height: 5px;
		background-color: #ff9020;
		border-radius: 50%;
		z-index: 5;
		animation-name: m80spark;
		animation-duration: 0.25s;
		animation-iteration-count: infinite;
		animation-timing-function: steps( 2, end );
	}

	.tank-glass.m80-mode
	{
		border-color: #c41e1e;
	}

	.water-drop
	{
		position: absolute;
		pointer-events: none;
		z-index: 26;
	}

	.water-drop.jet
	{
		z-index: 27;
	}

	.water-drop-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.boom-bit
	{
		position: absolute;
		width: 7px;
		height: 7px;
		pointer-events: none;
		border-radius: 1px;
		z-index: 6;
	}

	.px-spark
	{
		position: absolute;
		pointer-events: none;
		z-index: 16;
		border-radius: 0;
	}

	.px-spark.shop
	{
		z-index: 12;
	}

	.fish-body
	{
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 40px;
		overflow: hidden;
		border: 1px solid #00000055;
	}

	.fish-fin
	{
		position: absolute;
		left: -6px;
		top: 20%;
		width: 12px;
		height: 60%;
		border-radius: 4px;
		opacity: 0.9;
	}

	// ----- Trained stats: readable in-tank tells -----
	// SPD — motion streaks trailing behind the swim direction (left of body when facing right).
	.stat-spd-trail
	{
		position: absolute;
		pointer-events: none;
		z-index: 2;
		border-radius: 2px;
		background-color: #80d0ff;
		opacity: 0.35;
	}

	.stat-spd-trail.t1
	{
		left: -10px;
		top: 42%;
		width: 12px;
		height: 3px;
		opacity: 0.4;
	}

	.stat-spd-trail.t2
	{
		left: -18px;
		top: 48%;
		width: 16px;
		height: 2px;
		opacity: 0.3;
		background-color: #a8e0ff;
	}

	.stat-spd-trail.t3
	{
		left: -26px;
		top: 36%;
		width: 20px;
		height: 2px;
		opacity: 0.22;
		background-color: #c0ecff;
		animation-name: spdtrail;
		animation-duration: 0.35s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-direction: alternate;
	}

	.fish.spd-2 .stat-spd-trail.t1,
	.fish.spd-3 .stat-spd-trail.t1
	{
		width: 14px;
		opacity: 0.5;
		box-shadow: 0 0 4px #60c0ff;
	}

	.fish.spd-3 .fish-body,
	.fish.spd-3.has-sprite .fish-sprite
	{
		// Slight cyan edge — torpedo look
		box-shadow: -2px 0 0 #40a8e088;
	}

	// AGI — extra fin flares that flutter faster at higher tiers.
	.stat-agi-fin
	{
		position: absolute;
		pointer-events: none;
		z-index: 3;
		background-color: #e8b050;
		opacity: 0.55;
		border-radius: 3px;
	}

	.stat-agi-fin.top
	{
		right: 28%;
		top: -4px;
		width: 10px;
		height: 8px;
		transform: rotate( -25deg );
	}

	.stat-agi-fin.bot
	{
		right: 28%;
		bottom: -4px;
		width: 10px;
		height: 8px;
		transform: rotate( 25deg );
	}

	.stat-agi-fin.mid
	{
		left: -8px;
		top: 30%;
		width: 8px;
		height: 40%;
		opacity: 0.45;
		background-color: #f0c060;
	}

	.fish.agi-2 .stat-agi-fin,
	.fish.agi-3 .stat-agi-fin
	{
		animation-name: agiflick;
		animation-duration: 0.28s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-direction: alternate;
	}

	.fish.agi-3 .stat-agi-fin
	{
		animation-duration: 0.16s;
		opacity: 0.75;
		box-shadow: 0 0 4px #ffc04088;
	}

	.fish.agi-2:not( .has-sprite ) .fish-fin,
	.fish.agi-3:not( .has-sprite ) .fish-fin
	{
		width: 16px;
		left: -10px;
	}

	// END — plate bulk / armored midsection.
	.stat-end-plate
	{
		position: absolute;
		left: 18%;
		right: 22%;
		top: 28%;
		bottom: 28%;
		pointer-events: none;
		z-index: 2;
		border: 2px solid #40a060aa;
		border-radius: 40%;
		opacity: 0.55;
	}

	.stat-end-band
	{
		position: absolute;
		left: 22%;
		right: 26%;
		top: 48%;
		height: 4px;
		pointer-events: none;
		z-index: 3;
		background-color: #50c87888;
		border-radius: 2px;
	}

	.fish.end-2 .stat-end-plate,
	.fish.end-3 .stat-end-plate
	{
		border-width: 3px;
		opacity: 0.7;
	}

	.fish.end-3 .stat-end-plate
	{
		border-color: #60e090;
		box-shadow: inset 0 0 6px #40a06055;
	}

	.fish.end-2:not( .has-sprite ) .fish-body,
	.fish.end-3:not( .has-sprite ) .fish-body
	{
		border: 2px solid #30805088;
	}

	@keyframes spdtrail
	{
		from { opacity: 0.12; left: -22px; }
		to { opacity: 0.35; left: -28px; }
	}

	@keyframes agiflick
	{
		from { opacity: 0.35; }
		to { opacity: 0.8; }
	}

	.fish-eye
	{
		position: absolute;
		right: 18%;
		top: 28%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #101018;
	}

	.fish-belly
	{
		position: absolute;
		left: 20%;
		right: 20%;
		bottom: 10%;
		height: 30%;
		background-color: #ffffff;
		opacity: 0.18;
		border-radius: 20px;
	}

	.tank-legend
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 8px;
		width: 1280px;
	}

	.legend-item
	{
		flex-direction: row;
		align-items: center;
		margin-left: 12px;
		margin-right: 12px;
	}

	.legend-swatch
	{
		width: 14px;
		height: 10px;
		border-radius: 4px;
		margin-right: 6px;
		border: 1px solid #00000066;
	}

	.legend-name
	{
		font-size: 11px;
		font-weight: 600;
		color: #8aa8b8;
		letter-spacing: 1px;
	}

	.tank-actions
	{
		margin-top: 10px;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		width: 1280px;
	}

	.tank-actions .btn
	{
		min-width: 140px;
		margin-bottom: 0;
		margin-left: 6px;
		margin-right: 6px;
	}

	.pellet
	{
		position: absolute;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #e8c060;
		border: 1px solid #8a6020;
		pointer-events: none;
	}

	// Bloodworms / special feed — tiny worm sprite instead of a dot
	.pellet.pellet-sprite
	{
		width: 22px;
		height: 14px;
		border-radius: 0;
		background-color: transparent;
		border: none;
		margin-left: -8px;
		margin-top: -4px;
	}

	.pellet-sprite-fill
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	// ----- Lot Runs tool (right rail) -----
	.lot-run-tool
	{
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
		padding: 6px 4px;
		cursor: pointer;
		border: 1px solid #5a4830;
		border-radius: 8px;
		background-color: #1a1410;
	}

	.lot-run-tool.on
	{
		border-color: #c09040;
		background-color: #282010;
	}

	.lot-run-tool-icon
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #f0c080;
	}

	.lot-run-tool-label
	{
		font-size: 8px;
		font-weight: 700;
		color: #c0a080;
		margin-top: 4px;
	}

	.pipe-crawl
	{
		flex-direction: column;
		width: 640px;
		flex-shrink: 0;
	}

	.pipe-crawl.hurt
	{
		background-color: #401018;
	}

	.pipe-hud
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 26px;
		margin-bottom: 6px;
	}

	.pipe-hp
	{
		flex-direction: row;
		align-items: center;
	}

	.pipe-pip
	{
		width: 14px;
		height: 12px;
		margin-right: 4px;
		background-color: #402028;
		border: 1px solid #803040;
	}

	.pipe-pip.on
	{
		background-color: #e04050;
		border-color: #ff8090;
	}

	.pipe-hud-mid
	{
		flex-direction: row;
		align-items: center;
	}

	.pipe-room
	{
		font-size: 12px;
		font-weight: 800;
		color: #e8d8b0;
		margin-right: 8px;
	}

	.pipe-prog
	{
		font-size: 11px;
		font-weight: 700;
		color: #90a090;
	}

	.pipe-hud-right
	{
		flex-direction: row;
		align-items: center;
	}

	.pipe-combo
	{
		font-size: 16px;
		font-weight: 800;
		color: #ffe060;
		margin-right: 10px;
	}

	.pipe-bag
	{
		font-size: 11px;
		font-weight: 700;
		color: #c8e090;
	}

	.pipe-field
	{
		position: relative;
		width: 640px;
		height: 196px;
		background-color: #102028;
		border: 3px solid #3a5850;
		overflow: hidden;
		cursor: pointer;
		flex-shrink: 0;
	}

	.pipe-crawl.hot .pipe-field
	{
		border-color: #d0c040;
	}

	.pipe-crawl.boss .pipe-field
	{
		border-color: #a04030;
	}

	.pipe-field.chomp
	{
		background-color: #183040;
	}

	.pipe-ribs
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		pointer-events: none;
	}

	.pipe-rib
	{
		position: absolute;
		left: 0;
		right: 0;
		height: 3px;
		background-color: #1a3840;
	}

	.pipe-rib.r1 { top: 28px; }
	.pipe-rib.r2 { top: 72px; }
	.pipe-rib.r3 { top: 118px; }
	.pipe-rib.r4 { top: 162px; }

	.pipe-flow
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #184858;
		opacity: 0.18;
		pointer-events: none;
	}

	.pipe-zone
	{
		position: absolute;
		top: 8px;
		bottom: 8px;
		background-color: #d8c030;
		opacity: 0.22;
		pointer-events: none;
		border-left: 2px solid #f0e070;
		border-right: 2px solid #f0e070;
	}

	.pipe-crawl.hot .pipe-zone
	{
		opacity: 0.38;
	}

	.pipe-zone-label
	{
		position: absolute;
		left: 168px;
		top: 8px;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #f0e070;
		pointer-events: none;
	}

	.pipe-fish
	{
		position: absolute;
		left: 70px;
		top: 92px;
		width: 64px;
		height: 44px;
		pointer-events: none;
		z-index: 5;
	}

	.pipe-fish.ouch
	{
		opacity: 0.45;
	}

	.pipe-fish-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.pipe-thing
	{
		position: absolute;
		pointer-events: none;
		z-index: 4;
	}

	.pipe-thing.pop
	{
		opacity: 0.2;
	}

	.pipe-thing-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.pipe-shout
	{
		position: absolute;
		left: 200px;
		top: 72px;
		width: 220px;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		font-weight: 800;
		color: #fff4a0;
		pointer-events: none;
		z-index: 8;
	}

	.pipe-hint
	{
		margin-top: 8px;
		font-size: 11px;
		font-weight: 700;
		color: #a8b090;
	}

	.adv-vignette
	{
		position: absolute;
		top: 50%;
		margin-top: -200px;
		flex-direction: column;
		align-items: center;
		z-index: 155;
		pointer-events: none;
	}

	.adv-vignette.left
	{
		left: 50%;
		margin-left: -572px;
	}

	.adv-vignette.right
	{
		left: 50%;
		margin-left: 372px;
	}

	.adv-vignette-frame
	{
		border: 3px solid #6a5040;
		background-color: #0c1014;
		overflow: hidden;
		flex-shrink: 0;
	}

	.adv-vignette-frame.loc
	{
		width: 220px;
		height: 150px;
	}

	.adv-vignette-frame.ev
	{
		width: 196px;
		height: 256px;
	}

	.adv-vignette-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.adv-vignette-cap
	{
		margin-top: 6px;
		padding: 3px 8px;
		background-color: #100810ee;
		border: 2px solid #504038;
		color: #d8c8a8;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.4px;
	}

	.adv-vignette.run-school .adv-vignette-frame { border-color: #506080; }
	.adv-vignette.run-alley .adv-vignette-frame { border-color: #604050; }
	.adv-vignette.run-pool .adv-vignette-frame { border-color: #3080a0; }
	.adv-vignette.run-gas .adv-vignette-frame { border-color: #a07030; }
	.adv-vignette.run-drain .adv-vignette-frame { border-color: #406050; }
	.adv-vignette.run-bingo .adv-vignette-frame { border-color: #904080; }
	.adv-vignette.run-toilet .adv-vignette-frame { border-color: #708090; }
	.adv-vignette.run-faucet .adv-vignette-frame { border-color: #60a0c0; }

	.lot-run-panel
	{
		position: absolute;
		left: 50%;
		top: 48%;
		// panel centered via negative margins (s&box-friendly)
		margin-left: -340px;
		margin-top: -260px;
		width: 680px;
		max-height: 560px;
		flex-direction: column;
		padding: 14px 16px;
		background-color: #141018;
		border: 3px solid #6a5040;
		border-radius: 12px;
		z-index: 160;
		overflow: scroll;
		pointer-events: all;
	}

	.lot-run-panel.run-school
	{
		border-color: #506080;
		background-color: #121820;
	}

	.lot-run-panel.run-alley
	{
		border-color: #604050;
		background-color: #181018;
	}

	.lot-run-panel.run-pool
	{
		border-color: #3080a0;
		background-color: #101820;
	}

	.lot-run-panel.run-gas
	{
		border-color: #a07030;
		background-color: #1a160e;
	}

	.lot-run-panel.run-drain
	{
		border-color: #406050;
		background-color: #101814;
	}

	.lot-run-panel.run-bingo
	{
		border-color: #904080;
		background-color: #181018;
	}

	.lot-run-panel.run-toilet
	{
		border-color: #708090;
		background-color: #101418;
	}

	.lot-run-panel.run-faucet
	{
		border-color: #60a0c0;
		background-color: #102028;
	}

	.lot-run-room-hint
	{
		font-size: 10px;
		font-weight: 700;
		color: #a09080;
		margin-top: 12px;
	}

	.flush-scene, .faucet-scene
	{
		cursor: pointer;
		min-height: 220px;
		justify-content: center;
		align-items: center;
	}

	// ----- Adventure stage art (CSS geometry — no extra sprites) -----
	.adv-stage
	{
		position: relative;
		width: 280px;
		height: 160px;
		margin-bottom: 12px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 10px;
		background-color: #0c1014;
		border: 1px solid #2a3840;
	}

	.adv-stage-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.flush-stage
	{
		background-color: #0e1418;
		border-color: #3a5058;
	}

	.faucet-stage
	{
		background-color: #0c1820;
		border-color: #306080;
	}

	.adv-toilet
	{
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		width: 90px;
		height: 100px;
	}

	.adv-toilet-tank
	{
		width: 56px;
		height: 28px;
		background-color: #d0dce4;
		border: 2px solid #8090a0;
		border-radius: 4px 4px 2px 2px;
		flex-shrink: 0;
	}

	.adv-toilet-bowl
	{
		position: relative;
		width: 72px;
		height: 42px;
		margin-top: -2px;
		background-color: #c0d0dc;
		border: 2px solid #8090a0;
		border-radius: 8px 8px 36% 36%;
		overflow: hidden;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.adv-swirl
	{
		position: absolute;
		border: 2px solid #4090b8;
		border-radius: 50%;
		opacity: 0.55;
	}

	.adv-swirl.a
	{
		width: 36px;
		height: 20px;
		top: 10px;
		animation-name: adv-spin;
		animation-duration: 1.4s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	.adv-swirl.b
	{
		width: 22px;
		height: 12px;
		top: 16px;
		border-color: #70c0e0;
		animation-name: adv-spin;
		animation-duration: 0.9s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: reverse;
	}

	.adv-fish-dot
	{
		position: absolute;
		width: 10px;
		height: 7px;
		background-color: #f0a040;
		border-radius: 50%;
		z-index: 2;
		animation-name: adv-fish-swirl;
		animation-duration: 1.6s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	.adv-fish-dot.home
	{
		position: relative;
		animation-name: none;
		top: 0;
		left: 0;
	}

	.adv-toilet-base
	{
		width: 40px;
		height: 12px;
		background-color: #b0c0cc;
		border: 2px solid #8090a0;
		border-top: 0;
		border-radius: 0 0 6px 6px;
		flex-shrink: 0;
	}

	.adv-pipe-row
	{
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 10px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.adv-pipe
	{
		width: 48px;
		height: 10px;
		background-color: #3a4848;
		border: 1px solid #607070;
		border-radius: 4px;
	}

	.adv-pipe.mid
	{
		width: 64px;
		height: 8px;
		background-color: #2a3838;
	}

	.adv-sink
	{
		position: relative;
		width: 140px;
		height: 100px;
		align-items: center;
	}

	.adv-faucet-neck
	{
		position: absolute;
		top: 8px;
		left: 58px;
		width: 14px;
		height: 28px;
		background-color: #90a0a8;
		border: 1px solid #607080;
		border-radius: 3px;
	}

	.adv-faucet-spout
	{
		position: absolute;
		top: 30px;
		left: 50px;
		width: 30px;
		height: 12px;
		background-color: #a0b0b8;
		border: 1px solid #607080;
		border-radius: 0 6px 6px 0;
	}

	.adv-water-stream
	{
		position: absolute;
		top: 42px;
		left: 68px;
		width: 4px;
		height: 28px;
		background-color: #50a0c8;
		opacity: 0.85;
		animation-name: adv-drip;
		animation-duration: 0.6s;
		animation-iteration-count: infinite;
	}

	.adv-basin
	{
		position: absolute;
		bottom: 8px;
		left: 20px;
		width: 100px;
		height: 36px;
		background-color: #d0dce4;
		border: 2px solid #8090a0;
		border-radius: 6px;
		align-items: center;
		justify-content: center;
	}

	.room-stage
	{
		width: 100%;
		max-width: 420px;
		height: 72px;
		flex-direction: row;
		padding: 0 16px;
	}

	.room-stage.kind-look { border-color: #4a5860; }
	.room-stage.kind-fight { border-color: #a05050; background-color: #181014; }
	.room-stage.kind-loot { border-color: #c0a040; background-color: #18160e; }
	.room-stage.kind-hazard { border-color: #a07030; background-color: #18140c; }
	.room-stage.kind-choice { border-color: #6080a0; }
	.room-stage.kind-boss { border-color: #c04060; background-color: #1a1014; }

	.adv-room-bars
	{
		flex-direction: row;
		align-items: flex-end;
		flex-grow: 1;
		height: 100%;
		padding-bottom: 10px;
	}

	.adv-bar
	{
		width: 18px;
		height: 28px;
		margin-right: 6px;
		background-color: #2a3438;
		border: 1px solid #405058;
		border-radius: 2px;
	}

	.adv-bar.mid
	{
		height: 44px;
		background-color: #343c40;
	}

	.adv-room-mark
	{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #80c0e0;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.adv-enemy-blob
	{
		width: 36px;
		height: 22px;
		border-radius: 40%;
		border: 2px solid #101018;
		flex-shrink: 0;
		animation-name: adv-threat;
		animation-duration: 1.2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.adv-loot-coin
	{
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background-color: #e0c040;
		border: 2px solid #a08020;
		flex-shrink: 0;
	}

	@keyframes adv-spin
	{
		0% { transform: rotate( 0deg ); }
		100% { transform: rotate( 360deg ); }
	}

	@keyframes adv-fish-swirl
	{
		0% { left: 20px; top: 18px; }
		50% { left: 40px; top: 12px; }
		100% { left: 20px; top: 18px; }
	}

	@keyframes adv-drip
	{
		0% { opacity: 0.4; height: 20px; }
		100% { opacity: 0.95; height: 32px; }
	}

	@keyframes adv-threat
	{
		0% { transform: translate( 0px, 0px ); }
		100% { transform: translate( -3px, 2px ); }
	}

	.lot-run-prog
	{
		font-size: 12px;
		color: #c0a880;
	}

	.lot-run-locations
	{
		flex-direction: column;
		width: 100%;
		margin-top: 8px;
	}

	.lot-run-loc
	{
		flex-direction: row;
		align-items: stretch;
		padding: 0;
		margin-bottom: 8px;
		background-color: #1c1820;
		border: 1px solid #4a4050;
		border-radius: 8px;
		cursor: pointer;
		overflow: hidden;
	}

	.lot-run-loc.locked
	{
		opacity: 0.55;
	}

	.lot-run-loc.cleared
	{
		border-color: #60a070;
	}

	.lot-run-loc-art
	{
		width: 56px;
		min-height: 72px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		background-color: #141018;
		border-right: 1px solid #2a2830;
	}

	.lot-run-loc-art.run-toilet { background-color: #101418; }
	.lot-run-loc-art.run-school { background-color: #101820; }
	.lot-run-loc-art.run-alley { background-color: #181018; }
	.lot-run-loc-art.run-pool { background-color: #0c1820; }
	.lot-run-loc-art.run-gas { background-color: #18140c; }
	.lot-run-loc-art.run-drain { background-color: #0c1410; }
	.lot-run-loc-art.run-bingo { background-color: #181018; }

	.lot-run-loc-glyph
	{
		width: 22px;
		height: 22px;
		border-radius: 4px;
		background-color: #506070;
		border: 2px solid #90a8b0;
	}

	.lot-run-loc-art.run-toilet .lot-run-loc-glyph { border-radius: 50%; background-color: #80a0b0; }
	.lot-run-loc-art.run-school .lot-run-loc-glyph { background-color: #6080a0; }
	.lot-run-loc-art.run-alley .lot-run-loc-glyph { background-color: #704858; }
	.lot-run-loc-art.run-pool .lot-run-loc-glyph { border-radius: 50%; background-color: #40a0c0; }
	.lot-run-loc-art.run-gas .lot-run-loc-glyph { background-color: #a08040; }
	.lot-run-loc-art.run-drain .lot-run-loc-glyph { background-color: #407050; }
	.lot-run-loc-art.run-bingo .lot-run-loc-glyph { background-color: #904878; }

	.lot-run-loc-text
	{
		flex-direction: column;
		flex-grow: 1;
		padding: 10px 12px;
		min-width: 0;
	}

	.lot-run-loc-name
	{
		font-size: 13px;
		font-weight: 800;
		color: #f0e0c0;
	}

	.lot-run-loc-note
	{
		font-size: 9px;
		font-weight: 700;
		color: #a09070;
		margin-top: 2px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.lot-run-loc-blurb
	{
		font-size: 11px;
		color: #c8b8a0;
		margin-top: 6px;
	}

	.lot-run-loc-meta
	{
		font-size: 10px;
		font-weight: 700;
		color: #80c0a0;
		margin-top: 6px;
	}

	.lot-run-room
	{
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 12px 8px;
	}

	.lot-run-room-kind
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #a08060;
		text-transform: uppercase;
		margin-bottom: 6px;
	}

	.lot-run-room-title
	{
		font-size: 16px;
		font-weight: 800;
		color: #f8e8d0;
		margin-bottom: 8px;
		text-align: center;
	}

	.lot-run-room-body
	{
		font-size: 12px;
		color: #d0c0b0;
		text-align: center;
		margin-bottom: 14px;
		max-width: 520px;
		line-height: 18px;
	}

	.lot-run-choices
	{
		flex-direction: row;
		justify-content: center;
	}

	.lot-run-choices .cq-btn
	{
		margin-left: 8px;
		margin-right: 8px;
	}

	.lot-run-log
	{
		margin-top: 10px;
		max-height: 100px;
	}

	// ----- Pre-tank lot stage (before Grandma gifts the glass) -----
	.lot-stage
	{
		position: relative;
		width: 900px;
		height: 520px;
		flex-shrink: 0;
		overflow: hidden;
		border: 3px solid #4a3830;
		border-radius: 0;
		background-color: #1a1410;
		align-items: center;
		justify-content: center;
		pointer-events: all;
		cursor: pointer;
		z-index: 5;
	}

	.lot-stage-art
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.lot-stage-fallback
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #2a2018;
	}

	.lot-stage-vignette
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		// Soft edge darken — no fancy gradients in sbox panels if limited
		border: 24px solid #08060caa;
		pointer-events: none;
	}

	.lot-stage-caption
	{
		position: absolute;
		left: 16px;
		bottom: 14px;
		flex-direction: column;
		align-items: flex-start;
		pointer-events: none;
	}

	.lot-stage-title
	{
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #f0d8a0;
	}

	.lot-stage-sub
	{
		font-size: 9px;
		font-weight: 600;
		color: #c0a080;
		margin-top: 4px;
	}

	.lot-stage-go
	{
		font-size: 10px;
		font-weight: 700;
		color: #ffd24a;
		margin-top: 8px;
		letter-spacing: 0.5px;
	}

	.inv-panel-ghost
	{
		opacity: 0;
		pointer-events: none;
	}

	// ----- Grandma RPG prologue (new game only) -----
	.grandma-prologue
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 48px;
		background-color: #0a0814ee;
		pointer-events: all;
		cursor: pointer;
	}

	// ----- Pre-game inner monologue over the trailer lot -----
	.mono-lot
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 220;
		overflow: hidden;
		pointer-events: all;
		cursor: pointer;
		background-color: #0a0604;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
	}

	.mono-lot-pan
	{
		position: absolute;
		left: -8%;
		top: -6%;
		width: 116%;
		height: 116%;
		animation-name: monolot-pan;
		animation-duration: 26s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		pointer-events: none;
	}

	.mono-lot-art
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.mono-lot-fallback
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #2a1c14;
	}

	.mono-lot-shade
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 42%;
		background-color: #080604dd;
		pointer-events: none;
	}

	.mono-lot-place
	{
		position: absolute;
		top: 36px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: center;
		pointer-events: none;
	}

	.mono-lot-place-name
	{
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 3px;
		color: #f0d8a0;
	}

	.mono-lot-place-sub
	{
		font-size: 9px;
		font-weight: 600;
		letter-spacing: 1.5px;
		color: #a88868;
		margin-top: 6px;
	}

	.mono-thought
	{
		position: relative;
		z-index: 2;
		width: 820px;
		max-width: 90%;
		margin-bottom: 56px;
		padding: 18px 22px 14px 22px;
		flex-direction: column;
		align-items: stretch;
		background-color: #120e0cee;
		border: 1px solid #6a5040;
		border-radius: 10px;
		pointer-events: none;
	}

	.mono-thought-label
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #c09060;
		margin-bottom: 10px;
	}

	.mono-thought-text
	{
		font-size: 13px;
		font-weight: 600;
		line-height: 22px;
		color: #f8e8d0;
		// Thought-y feel without true italics if font lacks them
		letter-spacing: 0.3px;
		min-height: 44px;
	}

	.mono-thought-foot
	{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 14px;
	}

	.mono-thought-prog
	{
		font-size: 9px;
		font-weight: 700;
		color: #806050;
	}

	.mono-thought-hint
	{
		font-size: 9px;
		font-weight: 600;
		color: #a88868;
	}

	.playing.looking-around .play-bezel
	{
		// Dim chrome behind the monologue
		background-color: #080604;
	}

	@keyframes monolot-pan
	{
		0%
		{
			transform: translate( 0px, 0px );
		}
		100%
		{
			// Slow drift — “looking around” the lot
			transform: translate( -36px, -18px );
		}
	}

	// Soft porch-shift while peeping through the glass
	@keyframes janitor-peep
	{
		0%
		{
			transform: translate( 0px, 2px );
		}
		100%
		{
			transform: translate( 3px, -3px );
		}
	}

	@keyframes janitor-cameo-in
	{
		0% { opacity: 0; right: -40px; }
		100% { opacity: 1; right: 18px; }
	}

	@keyframes janitor-cameo-out
	{
		0% { opacity: 1; right: 18px; }
		100% { opacity: 0; right: -48px; }
	}

	.janitor-cameo
	{
		position: absolute;
		right: 18px;
		bottom: 72px;
		flex-direction: row;
		align-items: flex-end;
		z-index: 40;
		pointer-events: all;
		cursor: pointer;
	}

	.janitor-cameo.offer .janitor-cameo-sill
	{
		color: #e8d060;
	}

	.janitor-cameo.in
	{
		animation-name: janitor-cameo-in;
		animation-duration: 0.35s;
		animation-timing-function: ease-out;
	}

	.janitor-cameo.out
	{
		animation-name: janitor-cameo-out;
		animation-duration: 0.4s;
		animation-timing-function: ease-in;
		opacity: 0;
		pointer-events: none;
		cursor: default;
	}

	.janitor-cameo-window
	{
		width: 88px;
		height: 104px;
		flex-direction: column;
		background-color: #2a2018;
		border: 3px solid #6a5040;
		flex-shrink: 0;
	}

	.janitor-cameo-pane
	{
		position: relative;
		width: 100%;
		flex-grow: 1;
		background-color: #1a3040;
		overflow: hidden;
	}

	.janitor-cameo-face
	{
		position: absolute;
		left: 6px;
		top: 10px;
		width: 70px;
		height: 70px;
		animation-name: janitor-peep;
		animation-duration: 0.9s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out;
	}

	.janitor-cameo-spr
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.janitor-cameo-face.fallback
	{
		background-color: #4a6850;
		align-items: center;
		justify-content: center;
		color: #c8e0c0;
		font-size: 22px;
	}

	.janitor-cameo-mullion-v
	{
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 2px;
		margin-left: -1px;
		background-color: #3a3028;
	}

	.janitor-cameo-mullion-h
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 2px;
		margin-top: -1px;
		background-color: #3a3028;
	}

	.janitor-cameo-sill
	{
		height: 16px;
		align-items: center;
		justify-content: center;
		background-color: #4a3830;
		color: #c8b090;
		font-size: 7px;
		letter-spacing: 0.5px;
		flex-shrink: 0;
	}

	.janitor-cameo-bubble
	{
		flex-direction: column;
		max-width: 280px;
		margin-left: 8px;
		padding: 8px 10px;
		background-color: #141810;
		border: 2px solid #6a8050;
	}

	.janitor-cameo-name
	{
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #90b070;
		margin-bottom: 4px;
	}

	.janitor-cameo-line
	{
		font-size: 11px;
		font-weight: 600;
		color: #e0f0c8;
		line-height: 15px;
	}

	.grandma-gift-lot
	{
		position: relative;
		width: 280px;
		height: 150px;
		margin-right: 0;
		flex-shrink: 0;
		border: 3px solid #6a5040;
		border-radius: 10px;
		overflow: hidden;
		background-color: #1a1410;
		align-items: center;
		justify-content: center;
	}

	.grandma-gift-lot.popup-size
	{
		width: 300px;
		height: 160px;
		margin-bottom: 10px;
	}

	.grandma-gift-lot-spr
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.grandma-gift-lot .grandma-gift-label
	{
		position: absolute;
		bottom: 8px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #f0d8a0;
		z-index: 2;
	}

	.grandma-dialogue.you-theme
	{
		border-color: #806040;
		background-color: #1a1410ee;
	}

	.grandma-dialogue.you-theme .grandma-dialogue-name
	{
		color: #f0c080;
	}

	.grandma-item-popup.you-theme
	{
		border-color: #806040;
	}

	.grandma-portrait-wrap.you-theme
	{
		border-color: #a07840;
		background-color: #181410;
	}

	.grandma-prologue-stage
	{
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		width: 720px;
		margin-bottom: 16px;
		flex-shrink: 0;
	}

	// Window-only stage (no side portrait) — let the peep own the frame.
	.grandma-prologue.scene-fusion .grandma-prologue-stage
	{
		width: 360px;
		align-items: center;
	}

	.grandma-gift-tank
	{
		position: relative;
		width: 220px;
		height: 160px;
		margin-right: 28px;
		flex-shrink: 0;
		border: 3px solid #3a7088;
		border-radius: 8px;
		background-color: #0c2030;
		overflow: hidden;
	}

	.grandma-gift-glass
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		border: 2px solid #6ab0d088;
		pointer-events: none;
	}

	.grandma-gift-water
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 18px;
		bottom: 22px;
		background-color: #1a506888;
	}

	.grandma-gift-gravel
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 22px;
		background-color: #6a4830;
	}

	.grandma-gift-plant
	{
		position: absolute;
		left: 12px;
		bottom: 18px;
		width: 48px;
		height: 64px;
	}

	.grandma-gift-plant-spr
	{
		width: 100%;
		height: 100%;
	}

	.grandma-gift-fish
	{
		position: absolute;
		width: 40px;
		height: 28px;
	}

	.grandma-gift-fish.a
	{
		left: 90px;
		top: 50px;
	}

	.grandma-gift-fish.b
	{
		left: 140px;
		top: 78px;
		// flip via scale if panel supports transform
		transform: scaleX(-1);
	}

	.grandma-gift-fish-spr
	{
		width: 100%;
		height: 100%;
	}

	.grandma-gift-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #ffd0e0;
		text-align: center;
		justify-content: center;
	}

	// Mini dogecoin cold wallet prop for wallet gift scene
	.grandma-gift-wallet
	{
		position: relative;
		width: 220px;
		height: 160px;
		margin-right: 28px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
	}

	.grandma-gift-wallet-shell
	{
		width: 200px;
		padding: 10px 12px 12px 12px;
		background-color: #2c343e;
		border: 2px solid #1a1e24;
		border-radius: 12px;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.grandma-gift-wallet-brand
	{
		font-size: 7px;
		font-weight: 800;
		letter-spacing: 0.5px;
		color: #8a929c;
		margin-bottom: 6px;
		text-align: center;
		justify-content: center;
		width: 100%;
	}

	.grandma-gift-wallet-lcd
	{
		width: 176px;
		padding: 8px 6px;
		background-color: #1a2010;
		border: 2px solid #0c1008;
		border-radius: 4px;
		flex-direction: column;
		align-items: center;
		margin-bottom: 8px;
	}

	.grandma-gift-wallet-bal
	{
		font-size: 18px;
		font-weight: 800;
		color: #90e050;
		letter-spacing: 1px;
	}

	.grandma-gift-wallet-sub
	{
		font-size: 9px;
		font-weight: 700;
		color: #6a8840;
		margin-top: 4px;
		letter-spacing: 1px;
	}

	.grandma-gift-wallet-leds
	{
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.grandma-gift-wallet-btn
	{
		width: 14px;
		height: 8px;
		background-color: #1a2028;
		border-radius: 2px;
		margin-left: 4px;
		margin-right: 4px;
	}

	.grandma-gift-wallet-led
	{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #40c060;
		margin-left: 8px;
	}

	.grandma-gift-wallet .grandma-gift-label
	{
		position: relative;
		top: 0;
		margin-top: 8px;
	}

	.grandma-prologue.scene-wallet
	{
		background-color: #0c1018ee;
	}

	.grandma-prologue.scene-fusion
	{
		// Warm trailer interior dusk — outside peeper energy.
		background-color: #120e0aee;
	}

	// Janitor peeks through the trailer window (dialogue stage).
	.grandma-gift-window
	{
		position: relative;
		width: 320px;
		height: 220px;
		margin-right: 12px;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grandma-window-wall
	{
		position: relative;
		width: 300px;
		height: 190px;
		background-color: #3a2818;
		border: 3px solid #1a1008;
		border-radius: 6px;
		overflow: hidden;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 18px 22px 10px 22px;
	}

	// Cheap paneling studs
	.grandma-window-stud
	{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 10px;
		background-color: #2a1c10;
		pointer-events: none;
	}

	.grandma-window-stud.a
	{
		left: 18px;
	}

	.grandma-window-stud.b
	{
		right: 18px;
	}

	.grandma-window-frame
	{
		position: relative;
		width: 200px;
		height: 130px;
		background-color: #e8d8b8;
		border: 4px solid #5a4030;
		border-radius: 4px;
		padding: 6px;
		flex-shrink: 0;
		z-index: 2;
	}

	.grandma-window-pane
	{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #203040;
		border: 2px solid #304858;
		overflow: hidden;
		flex-shrink: 0;
	}

	.grandma-window-sky
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		// Dusk lot sky outside
		background-color: #3a5068;
		pointer-events: none;
	}

	.grandma-window-lot-hint
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 28%;
		background-color: #2a2018;
		pointer-events: none;
	}

	// Face pressed against the glass from outside
	.grandma-window-peep
	{
		position: absolute;
		left: 18%;
		top: 8%;
		width: 64%;
		height: 88%;
		align-items: center;
		justify-content: center;
		z-index: 2;
		// Soft bob like he's shifting on the porch
		animation-name: janitor-peep;
		animation-duration: 3.2s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.grandma-window-face
	{
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.grandma-window-face-fallback
	{
		width: 72px;
		height: 72px;
		border-radius: 40px;
		background-color: #304830;
		border: 2px solid #80b070;
		font-size: 28px;
		font-weight: 800;
		color: #c0e8a0;
		align-items: center;
		justify-content: center;
	}

	// Window cross bars
	.grandma-window-mullion-v
	{
		position: absolute;
		left: 48%;
		top: 0;
		bottom: 0;
		width: 4px;
		background-color: #c8b898;
		z-index: 4;
		pointer-events: none;
	}

	.grandma-window-mullion-h
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 48%;
		height: 4px;
		background-color: #c8b898;
		z-index: 4;
		pointer-events: none;
	}

	.grandma-window-glare
	{
		position: absolute;
		left: 8%;
		top: 6%;
		width: 22%;
		height: 36%;
		background-color: #ffffff22;
		border-radius: 4px;
		z-index: 5;
		pointer-events: none;
	}

	.grandma-window-sill
	{
		width: 220px;
		height: 18px;
		margin-top: 2px;
		background-color: #6a5040;
		border: 2px solid #3a2818;
		border-top: 0;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		z-index: 3;
	}

	.grandma-window-tap
	{
		font-size: 11px;
		font-weight: 700;
		color: #d0b090;
		letter-spacing: 0.5px;
	}

	.grandma-gift-window .grandma-gift-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 2px;
		color: #c0a080;
		z-index: 6;
	}

	// Item popup still teaches the combine recipe (after the window bit).
	.grandma-gift-fusion
	{
		position: relative;
		width: 240px;
		height: 140px;
		margin-right: 28px;
		flex-shrink: 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #142018;
		border: 3px solid #5a8060;
		border-radius: 12px;
		overflow: hidden;
	}

	.grandma-gift-fusion.popup-size
	{
		margin-right: 0;
		width: 260px;
		height: 120px;
	}

	.grandma-fusion-fish
	{
		width: 44px;
		height: 32px;
		flex-shrink: 0;
	}

	.grandma-fusion-fish.left
	{
		margin-right: 4px;
	}

	.grandma-fusion-fish.right
	{
		margin-left: 4px;
	}

	.grandma-fusion-plus,
	.grandma-fusion-eq
	{
		font-size: 22px;
		font-weight: 800;
		color: #90c890;
		margin-left: 4px;
		margin-right: 4px;
		flex-shrink: 0;
	}

	.grandma-fusion-blob
	{
		width: 40px;
		height: 36px;
		border-radius: 14px;
		background-color: #604080;
		border: 2px solid #a070c0;
		font-size: 16px;
		font-weight: 800;
		color: #f0e0ff;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-left: 4px;
	}

	.grandma-gift-fusion .grandma-gift-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		color: #a0d0a0;
	}

	// Lot janitor dialogue theme
	.grandma-dialogue.theme-janitor
	{
		border-color: #70a060;
		background-color: #0c1410f2;
	}

	.grandma-dialogue.theme-janitor .grandma-dialogue-name
	{
		color: #90d070;
	}

	.grandma-dialogue.theme-janitor .grandma-dialogue-hint
	{
		color: #80b070;
	}

	.grandma-portrait-wrap.theme-janitor
	{
		border-color: #70a060;
		background-color: #101810;
	}

	.grandma-item-popup.theme-janitor
	{
		border-color: #70a060;
	}

	.grandma-item-popup.theme-janitor .grandma-item-kicker
	{
		color: #90d070;
	}

	// Adventure Mode intro — last ladder gift (after fusion + fight)
	.grandma-prologue.scene-adventure
	{
		background-color: #0a1014ee;
	}

	.grandma-gift-adventure
	{
		position: relative;
		width: 220px;
		height: 180px;
		margin-right: 12px;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #101820;
		border: 3px solid #5080a0;
		border-radius: 12px;
		overflow: hidden;
	}

	.grandma-gift-adventure.popup-size
	{
		margin-right: 0;
		width: 240px;
		height: 130px;
	}

	.grandma-toilet
	{
		position: relative;
		width: 100px;
		height: 120px;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	.grandma-toilet.mini
	{
		width: 72px;
		height: 88px;
	}

	.grandma-toilet-tank
	{
		width: 70%;
		height: 28%;
		background-color: #e8f0f4;
		border: 2px solid #90a8b8;
		border-radius: 6px 6px 2px 2px;
		flex-shrink: 0;
	}

	.grandma-toilet-bowl
	{
		position: relative;
		width: 88%;
		height: 42%;
		margin-top: -2px;
		background-color: #d8e4ec;
		border: 2px solid #90a8b8;
		border-radius: 8px 8px 40% 40%;
		overflow: hidden;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.grandma-toilet-water
	{
		position: absolute;
		left: 12%;
		right: 12%;
		top: 28%;
		bottom: 18%;
		background-color: #40a0c8;
		border-radius: 50%;
		opacity: 0.85;
	}

	.grandma-toilet-fish
	{
		position: absolute;
		width: 36px;
		height: 26px;
		z-index: 2;
		// slight swirl vibe
		animation-name: toilet-swirl;
		animation-duration: 1.8s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	.grandma-toilet-base
	{
		width: 55%;
		height: 14%;
		background-color: #c8d4dc;
		border: 2px solid #90a8b8;
		border-top: 0;
		border-radius: 0 0 8px 8px;
		flex-shrink: 0;
	}

	.grandma-gift-adventure .grandma-gift-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 6px;
		color: #80c0e0;
	}

	@keyframes toilet-swirl
	{
		0%
		{
			transform: translate( -2px, 2px ) rotate( -8deg );
		}
		50%
		{
			transform: translate( 2px, -1px ) rotate( 8deg );
		}
		100%
		{
			transform: translate( -2px, 2px ) rotate( -8deg );
		}
	}

	// Lot bully fight challenge
	.grandma-prologue.scene-fight
	{
		background-color: #140a0aee;
	}

	.grandma-gift-fight
	{
		position: relative;
		width: 200px;
		height: 140px;
		margin-right: 28px;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #281018;
		border: 3px solid #c04050;
		border-radius: 12px;
	}

	.grandma-gift-fight.popup-size
	{
		margin-right: 0;
		width: 220px;
		height: 120px;
	}

	.grandma-fight-badge
	{
		font-size: 28px;
		font-weight: 900;
		color: #ff6070;
		letter-spacing: 2px;
	}

	.grandma-fight-name
	{
		font-size: 20px;
		font-weight: 800;
		color: #ffe0e4;
		margin-top: 4px;
	}

	.grandma-fight-sub
	{
		font-size: 11px;
		font-weight: 700;
		color: #c08088;
		letter-spacing: 1px;
		margin-top: 4px;
	}

	.grandma-gift-fight .grandma-gift-label
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		color: #ff90a0;
	}

	.grandma-dialogue.theme-bully
	{
		border-color: #c04050;
		background-color: #180c10f2;
	}

	.grandma-dialogue.theme-bully .grandma-dialogue-name
	{
		color: #ff7080;
	}

	.grandma-dialogue.theme-bully .grandma-dialogue-hint
	{
		color: #d07080;
	}

	.grandma-portrait-wrap.theme-bully
	{
		border-color: #c04050;
		background-color: #181014;
	}

	.grandma-item-popup.theme-bully
	{
		border-color: #c04050;
	}

	.grandma-item-popup.theme-bully .grandma-item-kicker
	{
		color: #ff7080;
	}

	// Item GET popup after dialogue
	.grandma-item-popup-layer
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 201;
		align-items: center;
		justify-content: center;
		background-color: #080610cc;
		pointer-events: all;
	}

	.grandma-item-popup
	{
		width: 420px;
		padding: 22px 24px 18px 24px;
		background-color: #161020;
		border: 3px solid #e0b040;
		border-radius: 14px;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}

	.grandma-item-kicker
	{
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #e0b040;
		margin-bottom: 6px;
	}

	.grandma-item-title
	{
		font-size: 22px;
		font-weight: 800;
		color: #fff8e8;
		margin-bottom: 14px;
		text-align: center;
	}

	.grandma-item-body
	{
		font-size: 13px;
		font-weight: 600;
		color: #c8b8d0;
		text-align: center;
		margin-top: 12px;
		margin-bottom: 16px;
		white-space: normal;
		width: 100%;
	}

	.grandma-gift-tank.popup-size,
	.grandma-gift-wallet.popup-size
	{
		margin-right: 0;
		width: 200px;
		height: 140px;
	}

	.grandma-portrait-wrap
	{
		width: 160px;
		height: 160px;
		flex-shrink: 0;
		background-color: #1a1428;
		border: 3px solid #c890b0;
		border-radius: 12px;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}

	.grandma-portrait
	{
		width: 144px;
		height: 144px;
		image-rendering: pixelated;
	}

	.grandma-portrait-fallback
	{
		font-size: 18px;
		font-weight: 800;
		color: #e8c0d0;
	}

	.grandma-dialogue
	{
		width: 720px;
		min-height: 120px;
		padding: 14px 18px 12px 18px;
		background-color: #120c1cf2;
		border: 3px solid #e0a0c0;
		border-radius: 12px;
		flex-direction: column;
		flex-shrink: 0;
		pointer-events: none; // whole prologue is the click target
	}

	.grandma-dialogue-name
	{
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #ffb0d0;
		margin-bottom: 8px;
		height: 16px;
		flex-shrink: 0;
	}

	.grandma-dialogue-text
	{
		font-size: 16px;
		font-weight: 600;
		color: #f0e8f8;
		min-height: 48px;
		line-height: 22px;
		white-space: normal;
		flex-grow: 1;
	}

	.grandma-dialogue-foot
	{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		flex-shrink: 0;
	}

	.grandma-dialogue-prog
	{
		font-size: 11px;
		font-weight: 700;
		color: #806878;
	}

	.grandma-dialogue-hint
	{
		font-size: 12px;
		font-weight: 700;
		color: #c890b0;
		letter-spacing: 0.5px;
	}

	// ----- Dogecoin explainer -----
	// Story beat card — middle-school arc / tutorial
	.story-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -320px;
		margin-top: -240px;
		width: 640px;
		max-height: 480px;
		padding: 18px 20px 14px 20px;
		background-color: #141020;
		border: 3px solid #6a48a0;
		border-radius: 14px;
		flex-direction: column;
		z-index: 82;
		pointer-events: all;
		overflow: hidden;
	}

	.story-kicker
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #b898e8;
		text-transform: uppercase;
		margin-bottom: 8px;
	}

	.story-title
	{
		font-size: 22px;
		font-weight: 800;
		color: #f0e8ff;
		margin-bottom: 12px;
	}

	.story-body
	{
		flex-direction: column;
		width: 100%;
		overflow: scroll;
		flex-grow: 1;
		min-height: 0;
		margin-bottom: 12px;
	}

	.story-p
	{
		font-size: 13px;
		font-weight: 600;
		color: #c8b8e0;
		line-height: 20px;
		margin-bottom: 10px;
		width: 100%;
	}

	.story-objective
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 10px 12px;
		margin-bottom: 12px;
		background-color: #1c1430;
		border: 1px solid #5a3a80;
		border-radius: 10px;
		flex-shrink: 0;
	}

	.story-obj-label
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #9070c0;
		text-transform: uppercase;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.story-obj-text
	{
		font-size: 12px;
		font-weight: 700;
		color: #e8d8ff;
		flex-grow: 1;
	}

	.story-actions
	{
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
		flex-shrink: 0;
	}

	.econ-help-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -260px;
		width: 600px;
		max-height: 520px;
		padding: 16px 18px 12px 18px;
		background-color: #102838;
		border: 3px solid #4a9abc;
		border-radius: 14px;
		flex-direction: column;
		// Above dim backdrop (70)
		z-index: 81;
		pointer-events: all;
		overflow: hidden;
	}

	.playing.nochill .econ-help-panel
	{
		background-color: #1a1018;
		border-color: #8b4a5a;
	}

	.econ-help-header
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 10px;
		flex-shrink: 0;
	}

	.econ-help-kicker
	{
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1px;
		color: #6a9ab0;
		text-transform: uppercase;
		margin-right: 10px;
	}

	.econ-help-title
	{
		font-size: 20px;
		font-weight: 800;
		color: #ffd24a;
		flex-grow: 1;
	}

	.econ-help-scroll
	{
		flex-direction: column;
		width: 100%;
		overflow: scroll;
		flex-grow: 1;
		min-height: 0;
	}

	.econ-help-block
	{
		flex-direction: column;
		width: 100%;
		padding: 10px 12px;
		margin-bottom: 8px;
		background-color: #0a2030;
		border: 1px solid #2a5060;
		border-radius: 10px;
		flex-shrink: 0;
	}

	.playing.nochill .econ-help-block
	{
		background-color: #140c12;
		border-color: #503038;
	}

	.econ-help-h
	{
		font-size: 13px;
		font-weight: 800;
		color: #e8f4ff;
		margin-bottom: 4px;
	}

	.econ-help-p
	{
		font-size: 12px;
		color: #a8c0d0;
		line-height: 17px;
	}

	.econ-help-foot
	{
		margin-top: 8px;
		font-size: 10px;
		color: #6a8898;
		text-align: center;
		flex-shrink: 0;
	}

	// ----- DARK WEB marketplace (shop) -----
	// Sibling backdrop + absolute panel (same pattern as battle / inject).
	.shop-backdrop
	{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #040810;
		opacity: 0.78;
		// Below modal panels (train/inject/battle/shop use 80+)
		z-index: 70;
		pointer-events: all;
	}

	.shop-backdrop.shop-dim
	{
		z-index: 79;
	}

	.shop-backdrop.battle-dim
	{
		z-index: 70;
	}

	// Ensure battle chrome is clickable above the dim
	.battle-panel .cq-btn,
	.battle-panel .battle-row,
	.battle-panel .battle-chip
	{
		pointer-events: all;
	}

	.shop-panel
	{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -460px;
		margin-top: -280px;
		width: 920px;
		height: 560px;
		padding: 14px 18px 12px 18px;
		background-color: #0a1418f5;
		border: 3px solid #2a6048;
		border-radius: 0;
		flex-direction: column;
		flex-shrink: 0;
		z-index: 80;
		overflow: hidden;
		pointer-events: all;
	}

	.shop-panel.cq-shop.darkweb
	{
		background-color: #0a1410;
		border-color: #3a9060;
	}

	.playing.nochill .shop-panel
	{
		background-color: #120a10;
		border-color: #6a3040;
	}

	.dw-topbar
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex-shrink: 0;
		margin-bottom: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid #1a4030;
	}

	.dw-topbar-left
	{
		flex-direction: row;
		align-items: center;
	}

	.dw-onion
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #102018;
		background-color: #50c878;
		padding: 3px 6px;
		border-radius: 4px;
		margin-right: 8px;
	}

	.dw-site
	{
		font-size: 13px;
		font-weight: 700;
		color: #90e0b0;
	}

	.dw-topbar-mid
	{
		font-size: 11px;
		color: #5a8870;
		letter-spacing: 0.5px;
	}

	.dw-topbar-right
	{
		flex-direction: row;
		align-items: center;
	}

	.dw-wallet
	{
		font-size: 11px;
		font-weight: 700;
		color: #ffd24a;
		margin-right: 10px;
		padding: 4px 8px;
		background-color: #1a2010;
		border: 1px solid #6a8040;
		border-radius: 6px;
	}

	.shop-header
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex-shrink: 0;
		margin-bottom: 6px;
	}

	.shop-title
	{
		font-size: 22px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #b8f0d0;
		white-space: nowrap;
	}

	.dw-status-pill
	{
		font-size: 10px;
		font-weight: 700;
		color: #70a888;
		letter-spacing: 0.5px;
		padding: 3px 8px;
		border: 1px solid #2a5040;
		border-radius: 10px;
	}

	.shop-close
	{
		min-width: 90px;
		margin-bottom: 0;
	}

	// Fixed slot so buy success/fail never shoves the list
	.shop-msg-slot
	{
		width: 100%;
		height: 36px;
		min-height: 36px;
		max-height: 36px;
		margin-bottom: 6px;
		flex-shrink: 0;
		overflow: hidden;
	}

	.shop-msg
	{
		font-size: 12px;
		color: #8aadc0;
		width: 100%;
		height: 100%;
		flex-shrink: 0;
		overflow: hidden;
		// Single-line status; long tips clip instead of wrapping layout
		white-space: nowrap;
	}

	.shop-msg.dw-msg
	{
		color: #70c898;
		background-color: #0c1c14;
		border: 1px solid #1a4030;
		border-radius: 6px;
		padding: 6px 10px;
		align-items: center;
	}

	// List + optional checkout overlay share one flex region
	.shop-body
	{
		position: relative;
		flex-direction: column;
		flex-grow: 1;
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}

	// Escrow / listing modal — overlay list, don't push rows
	.dw-checkout
	{
		position: absolute;
		left: 8px;
		right: 8px;
		top: 8px;
		z-index: 5;
		flex-direction: column;
		width: auto;
		flex-shrink: 0;
		margin-bottom: 0;
		padding: 12px 14px;
		background-color: #101808f0;
		border: 2px solid #c0a040;
		border-radius: 10px;
		pointer-events: all;
	}

	.dw-checkout-kicker
	{
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #c0a040;
		margin-bottom: 4px;
	}

	.dw-checkout-title
	{
		font-size: 16px;
		font-weight: 800;
		color: #f0f8e8;
		margin-bottom: 4px;
	}

	.dw-checkout-note
	{
		font-size: 11px;
		color: #a0b890;
		margin-bottom: 8px;
	}

	.dw-checkout-meta
	{
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}

	.dw-checkout-meta span
	{
		font-size: 11px;
		font-weight: 700;
		color: #d0e0c0;
		background-color: #1a2810;
		border: 1px solid #3a5030;
		border-radius: 4px;
		padding: 3px 8px;
		margin-right: 6px;
		margin-bottom: 4px;
	}

	.dw-checkout-log
	{
		font-size: 12px;
		color: #80e0a0;
		margin-bottom: 10px;
		min-height: 18px;
	}

	.dw-checkout-actions
	{
		flex-direction: row;
		align-items: center;
	}

	.dw-checkout-actions .cq-btn
	{
		margin-right: 8px;
		margin-bottom: 0;
	}

	.dw-spinner
	{
		font-size: 12px;
		font-weight: 700;
		color: #90c070;
		margin-right: 12px;
	}

	.dw-checkout-foot
	{
		font-size: 9px;
		color: #5a7050;
		margin-top: 8px;
		letter-spacing: 0.5px;
	}

	.shop-list
	{
		flex-direction: column;
		flex-grow: 1;
		width: 100%;
		height: 100%;
		overflow: scroll;
		// Keep first glyphs off the clip edge (s&box scroll panels eat ~1 char otherwise).
		padding-left: 8px;
		padding-right: 10px;
		pointer-events: all;
	}

	.shop-list.checkout-dim
	{
		opacity: 0.35;
		pointer-events: none;
	}

	.shop-row
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		min-height: 38px;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 4px;
		padding-right: 4px;
		border-top: 1px solid #1a3028;
		flex-shrink: 0;
		pointer-events: all;
		overflow: visible;
	}

	.shop-row.buyable
	{
		cursor: pointer;
	}

	// Entire row is one hit target — children must NOT re-fire Buy (double place).
	.shop-row.buyable .shop-col,
	.shop-row.buyable .cq-btn
	{
		pointer-events: none;
	}

	.shop-row.buyable:hover
	{
		background-color: #143028;
	}

	.shop-row.can-buy
	{
		background-color: #0e2018;
		border-left: 3px solid #40a070;
	}

	.shop-row.can-buy:hover
	{
		background-color: #163828;
	}

	.shop-row.cant-buy
	{
		opacity: 0.72;
		border-left: 3px solid #304050;
	}

	.shop-row.locked
	{
		opacity: 0.55;
		border-left: 3px solid #2a2838;
	}

	.shop-row.shop-odds-row
	{
		min-height: 22px;
		opacity: 0.85;
		border-top: none;
		background-color: #0c1814;
	}

	.shop-row.shop-odds-row .shop-col
	{
		font-size: 11px;
		color: #ffd24a;
		font-weight: 700;
	}

	.shop-row.header
	{
		cursor: default;
	}

	.shop-row.header
	{
		border-top: none;
		opacity: 0.6;
		min-height: 24px;
	}

	.shop-row.shady
	{
		background-color: #141008;
		border-top-color: #403018;
	}

	.shop-col
	{
		font-size: 12px;
		font-weight: 600;
		color: #c8d8c8;
		align-items: center;
		flex-shrink: 0;
		overflow: visible;
	}

	// Name: fixed-ish band so decor + shady titles aren't eaten by rate.
	.shop-col.name
	{
		width: 250px;
		min-width: 200px;
		flex-shrink: 0;
		flex-direction: row;
		align-items: center;
		white-space: nowrap;
		overflow: visible;
		padding-right: 10px;
	}

	// Shop mini preview — leave room for the label next to it.
	.shop-col.name .legend-swatch
	{
		width: 28px;
		height: 28px;
		flex-shrink: 0;
		margin-right: 10px;
		border-radius: 6px;
	}

	.shop-col.name .legend-swatch.swatch-wide
	{
		width: 48px;
		height: 24px;
		border-radius: 3px;
	}

	.shop-row.equipped
	{
		opacity: 0.72;
	}

	.shop-col.name .shop-swatch-empty
	{
		background-color: #122018;
		border: 1px solid #1a3830;
		opacity: 0.55;
	}

	// Rate takes remaining width; long shady hints can use it without crushing names.
	.shop-col.rate
	{
		flex-grow: 1;
		flex-shrink: 1;
		width: auto;
		min-width: 140px;
		color: #70c070;
		white-space: nowrap;
		overflow: visible;
		padding-right: 8px;
	}

	.shop-col.cost
	{
		width: 88px;
		flex-shrink: 0;
		color: #ffd24a;
		white-space: nowrap;
		justify-content: flex-end;
		padding-right: 8px;
	}

	.shop-col.act
	{
		width: 96px;
		flex-shrink: 0;
		justify-content: flex-end;
	}

	.shop-col.act .btn
	{
		margin-bottom: 0;
	}

	.shop-list.fish-packs-list
	{
		padding-left: 4px;
		padding-right: 6px;
		overflow: hidden;
	}

	.shop-chase-bar
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex-shrink: 0;
		padding: 4px 6px 8px 6px;
		border-bottom: 1px solid #1a4030;
		margin-bottom: 8px;
	}

	.shop-chase-left
	{
		flex-direction: column;
		flex-grow: 1;
	}

	.shop-chase-title
	{
		font-size: 11px;
		font-weight: 800;
		color: #ffd24a;
		letter-spacing: 0.4px;
	}

	.shop-chase-meta
	{
		font-size: 10px;
		color: #70c898;
		margin-top: 2px;
	}

	.pity-meter
	{
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;
		margin-left: 10px;
	}

	.pity-pip
	{
		width: 10px;
		height: 10px;
		margin-left: 3px;
		background-color: #1a3028;
		border: 1px solid #3a5848;
		border-radius: 2px;
	}

	.pity-pip.on
	{
		background-color: #c0a040;
		border-color: #ffd24a;
	}

	.pity-meter.hot .pity-pip.on
	{
		background-color: #ffd24a;
		border-color: #fff0a0;
		animation: pityhot 0.35s linear infinite;
	}

	.pity-word
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #ffd24a;
		margin-left: 8px;
	}

	.shop-fish-layout
	{
		flex-direction: row;
		flex-grow: 1;
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.shop-packs
	{
		flex-direction: row;
		flex-wrap: wrap;
		flex-grow: 1;
		align-content: flex-start;
		overflow: scroll;
		padding-right: 6px;
		min-width: 0;
	}

	.shop-pack
	{
		flex-direction: column;
		align-items: center;
		width: 124px;
		height: 168px;
		margin-right: 8px;
		margin-bottom: 8px;
		padding: 8px 6px 6px 6px;
		background-color: #0c1814;
		border: 2px solid #2a5040;
		flex-shrink: 0;
		cursor: pointer;
		pointer-events: all;
		overflow: hidden;
	}

	.shop-pack .shop-pack-art,
	.shop-pack .shop-pack-name,
	.shop-pack .shop-pack-water,
	.shop-pack .shop-pack-buy
	{
		pointer-events: none;
	}

	.shop-pack.can-buy
	{
		border-color: #40a070;
		background-color: #10241c;
	}

	.shop-pack.can-buy:hover
	{
		border-color: #70e0a0;
		background-color: #163828;
	}

	.shop-pack.cant-buy
	{
		opacity: 0.72;
		border-color: #304050;
	}

	.shop-pack.locked
	{
		opacity: 0.5;
		border-color: #2a2838;
	}

	.shop-pack.mismatch
	{
		border-color: #a05040;
	}

	.shop-pack-art
	{
		width: 88px;
		height: 72px;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		background-color: #081410;
		border: 1px solid #1a3830;
		overflow: hidden;
	}

	.shop-pack-sprite
	{
		width: 72px;
		height: 56px;
	}

	.shop-pack-blob
	{
		width: 40px;
		height: 24px;
		border-radius: 40%;
	}

	.shop-pack-name
	{
		font-size: 11px;
		font-weight: 800;
		color: #d8f0e0;
		margin-top: 6px;
		white-space: nowrap;
	}

	.shop-pack-water
	{
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #5a8870;
		margin-top: 2px;
	}

	.shop-pack-buy
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: auto;
		padding: 4px 6px;
		background-color: #0a2018;
		border: 1px solid #2a5840;
	}

	.shop-pack-buy.go
	{
		background-color: #184830;
		border-color: #40a070;
	}

	.shop-pack-cost
	{
		font-size: 10px;
		font-weight: 800;
		color: #ffd24a;
	}

	.shop-pack-act
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.5px;
		color: #90e0b0;
	}

	.shop-reveal-stage
	{
		position: relative;
		width: 210px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		padding-left: 8px;
		border-left: 1px solid #1a4030;
		overflow: hidden;
	}

	.buy-card
	{
		position: relative;
		width: 188px;
		height: 248px;
		flex-direction: column;
		align-items: center;
		background-color: #101808;
		border: 3px solid #3a5840;
		overflow: hidden;
		cursor: pointer;
		pointer-events: all;
	}

	.buy-card.idle
	{
		opacity: 0.55;
		cursor: default;
		border-color: #243830;
	}

	.buy-card.tease
	{
		border-color: #e8c050;
		background-color: #181808;
	}

	.buy-card.phase-deal
	{
		animation: buy-deal 0.1s linear both;
	}

	.buy-card.revealed.rarity-uncommon { border-color: #7ad8b0; }
	.buy-card.revealed.rarity-rare { border-color: #7ab8ff; }
	.buy-card.revealed.rarity-paintedrare { border-color: #f090e0; }
	.buy-card.revealed.rarity-legendary { border-color: #ffd24a; }
	.buy-card.revealed.rarity-mythical { border-color: #d0a0ff; }

	.buy-card.revealed.rarity-legendary .buy-card-art { border-color: #ffd24a; background-color: #201808; }
	.buy-card.revealed.rarity-mythical .buy-card-art { border-color: #d0a0ff; background-color: #180820; }
	.buy-card.revealed.rarity-paintedrare .buy-card-art { border-color: #f090e0; }

	.buy-card.spicy
	{
		animation: buy-spicy 0.18s linear 2;
	}

	.buy-card.jackpot
	{
		border-width: 4px;
		animation: buy-jack 0.22s linear 3;
	}

	.buy-card-flap
	{
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		background-color: #1a2818;
		border: 1px solid #3a5040;
		z-index: 4;
		pointer-events: none;
	}

	.buy-card-flap.left { left: 0; }
	.buy-card-flap.right { right: 0; }

	.buy-card.phase-unfold .buy-card-flap.left,
	.buy-card.fish-on .buy-card-flap.left,
	.buy-card.revealed .buy-card-flap.left
	{
		animation: buy-flap-l 0.12s linear both;
	}

	.buy-card.phase-unfold .buy-card-flap.right,
	.buy-card.fish-on .buy-card-flap.right,
	.buy-card.revealed .buy-card-flap.right
	{
		animation: buy-flap-r 0.12s linear both;
	}

	.buy-card.fish-on .buy-card-flap,
	.buy-card.revealed .buy-card-flap
	{
		opacity: 0;
	}

	.buy-card-back
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
		font-size: 48px;
		font-weight: 800;
		color: #3a5848;
		z-index: 3;
		pointer-events: none;
	}

	.buy-card-back.idle-q
	{
		font-size: 42px;
		color: #2a4038;
	}

	.buy-card.fish-on .buy-card-back,
	.buy-card.revealed .buy-card-back
	{
		opacity: 0;
	}

	.buy-card-face
	{
		position: relative;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-top: 16px;
		z-index: 2;
		opacity: 0;
		pointer-events: none;
	}

	.buy-card.fish-on .buy-card-face,
	.buy-card.revealed .buy-card-face
	{
		opacity: 1;
	}

	.buy-card-art
	{
		width: 120px;
		height: 96px;
		align-items: center;
		justify-content: center;
		background-color: #081410;
		border: 1px solid #2a4038;
		overflow: hidden;
	}

	.buy-card-sprite
	{
		width: 108px;
		height: 80px;
	}

	.buy-card-blob
	{
		width: 56px;
		height: 32px;
		border-radius: 40%;
	}

	.buy-card-name
	{
		font-size: 13px;
		font-weight: 800;
		color: #e8f8ee;
		margin-top: 10px;
	}

	.buy-card-stamp
	{
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #8a9a90;
		margin-top: 8px;
		opacity: 0;
		text-transform: uppercase;
	}

	.buy-card.revealed .buy-card-stamp
	{
		opacity: 1;
		animation: buy-stamp 0.12s linear both;
	}

	.buy-card.revealed.rarity-uncommon .buy-card-stamp { color: #7ad8b0; }
	.buy-card.revealed.rarity-rare .buy-card-stamp { color: #7ab8ff; }
	.buy-card.revealed.rarity-paintedrare .buy-card-stamp { color: #f090e0; }
	.buy-card.revealed.rarity-legendary .buy-card-stamp { color: #ffd24a; }
	.buy-card.revealed.rarity-mythical .buy-card-stamp { color: #d0a0ff; }

	.buy-card-hint
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 8px;
		align-items: center;
		justify-content: center;
		font-size: 9px;
		letter-spacing: 0.5px;
		color: #6a8878;
		z-index: 5;
		pointer-events: none;
	}

	.shop-hint
	{
		flex-shrink: 0;
		margin-top: 8px;
		font-size: 10px;
		color: #5a4a58;
		letter-spacing: 1px;
		text-align: center;
	}

	.shop-hint.dw-hint
	{
		color: #4a6858;
	}
}

@keyframes buy-deal
{
	0% { opacity: 0; }
	40% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes buy-flap-l
{
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes buy-flap-r
{
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes buy-stamp
{
	0% { opacity: 0; }
	60% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes buy-spicy
{
	0% { border-color: #f090e0; }
	50% { border-color: #fff0ff; }
	100% { border-color: #f090e0; }
}

@keyframes buy-jack
{
	0% { border-color: #ffd24a; }
	50% { border-color: #fff8d0; }
	100% { border-color: #ffd24a; }
}

@keyframes goldpulse
{
	0% { opacity: 0.55; }
	50% { opacity: 1; }
	100% { opacity: 0.55; }
}

@keyframes gba-rainbow
{
	0%, 24% { background-color: #ff4040; }
	25%, 49% { background-color: #ffd24a; }
	50%, 74% { background-color: #40d070; }
	75%, 100% { background-color: #4080ff; }
}

@keyframes pityhot
{
	0% { background-color: #c0a040; }
	50% { background-color: #ffe080; }
	100% { background-color: #c0a040; }
}

@keyframes warnpulse
{
	0%
	{
		border-color: #3a7a98;
	}

	50%
	{
		border-color: #e0b040;
	}

	100%
	{
		border-color: #3a7a98;
	}
}

@keyframes m80slap
{
	0%
	{
		// start slightly above, then land
		top: -16px;
		opacity: 0.2;
	}

	60%
	{
		top: -4px;
		opacity: 1;
	}

	100%
	{
		top: -6px;
		opacity: 1;
	}
}

@keyframes m80spark
{
	0%
	{
		background-color: #ff9020;
		opacity: 1;
	}

	50%
	{
		background-color: #ffe060;
		opacity: 0.4;
	}

	100%
	{
		background-color: #ff9020;
		opacity: 1;
	}
}

@keyframes boomshock
{
	0%
	{
		width: 40px;
		height: 40px;
		margin-left: -20px;
		margin-top: -20px;
		opacity: 0.95;
		border-color: #ffffff;
	}

	100%
	{
		width: 420px;
		height: 420px;
		margin-left: -210px;
		margin-top: -210px;
		opacity: 0;
		border-color: #ff4020;
	}
}

@keyframes methpulse
{
	0%
	{
		// slightly larger / tense
		opacity: 1;
	}

	50%
	{
		opacity: 0.92;
	}

	100%
	{
		opacity: 1;
	}
}

@keyframes methaura
{
	0%
	{
		opacity: 0.35;
		border-color: #ff40a0;
	}

	50%
	{
		opacity: 0.8;
		border-color: #ffd0ff;
	}

	100%
	{
		opacity: 0.35;
		border-color: #ff40a0;
	}
}

@keyframes stonedwobble
{
	0%
	{
		opacity: 0.88;
	}

	50%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0.88;
	}
}

@keyframes stonedaura
{
	0%
	{
		opacity: 0.25;
		border-color: #70d050;
	}

	33%
	{
		opacity: 0.55;
		border-color: #c060e0;
	}

	66%
	{
		opacity: 0.4;
		border-color: #60c0e0;
	}

	100%
	{
		opacity: 0.25;
		border-color: #70d050;
	}
}

@keyframes stonedspark
{
	0%
	{
		opacity: 0.3;
	}

	50%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0.3;
	}
}

@keyframes wdshiver
{
	0%
	{
		opacity: 0.25;
	}

	50%
	{
		opacity: 0.7;
	}

	100%
	{
		opacity: 0.25;
	}
}