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: #0e1c28;
		border: 1px solid #3a7a98;
		border-radius: 14px;
	}

	.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: 16px;
	}

	.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: 13px;
		color: #90b0c0;
		margin-bottom: 8px;
		text-align: center;
	}

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

	.ending-line
	{
		font-size: 16px;
		color: #d0e4f0;
		text-align: center;
		margin-bottom: 16px;
		min-height: 48px;
		width: 100%;
	}

	.ending-meta
	{
		font-size: 12px;
		color: #7090a0;
		margin-bottom: 8px;
	}

	.ending-hint
	{
		font-size: 12px;
		color: #80a0b0;
		margin-top: 12px;
	}

	// ----- 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-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: 10px;
		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: 1px solid #2a5068;
		border-radius: 14px;
		z-index: 2;
	}

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

	.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 (soft pill) -----
	.btn
	{
		padding: 14px 20px;
		margin-bottom: 10px;
		background-color: #1a4058;
		border: 2px solid #4a8aaa;
		border-radius: 12px;
		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: 10px;
		font-size: 13px;
	}

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

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

	// ----- ACHIEVEMENTS (main menu) -----
	.achievements-panel
	{
		width: 520px;
		max-height: 560px;
		align-items: stretch;
	}

	.achievements-meta
	{
		font-size: 12px;
		font-weight: 700;
		color: #8ab0c4;
		margin-bottom: 12px;
		text-align: center;
		width: 100%;
	}

	.achievements-scroll
	{
		flex-direction: column;
		width: 100%;
		max-height: 380px;
		overflow: scroll;
		margin-bottom: 14px;
		flex-grow: 1;
		min-height: 0;
	}

	.achievements-row
	{
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
		padding: 10px 12px;
		margin-bottom: 6px;
		background-color: #0a2030;
		border: 1px solid #2a5060;
		border-radius: 10px;
		flex-shrink: 0;
	}

	.achievements-row.got
	{
		border-color: #3a8060;
		background-color: #0c2820;
	}

	.achievements-row.locked
	{
		opacity: 0.72;
	}

	.achievements-star
	{
		font-size: 16px;
		color: #ffd24a;
		margin-right: 10px;
		flex-shrink: 0;
		width: 18px;
		text-align: center;
	}

	.achievements-row.locked .achievements-star
	{
		color: #5a7080;
	}

	.achievements-body
	{
		flex-direction: column;
		flex-grow: 1;
		min-width: 0;
	}

	.achievements-row-title
	{
		font-size: 13px;
		font-weight: 800;
		color: #e8f4ff;
		margin-bottom: 2px;
	}

	.achievements-row-desc
	{
		font-size: 11px;
		color: #8aa8b8;
	}

	.achievements-row.got .achievements-row-title
	{
		color: #b8f0d0;
	}

	.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;
	}

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

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

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

	.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;
	}

	// Fixed-height coach slot — empty or filled, same size (no layout jump)
	.cq-hint-row
	{
		width: 1280px;
		height: 30px;
		min-height: 30px;
		max-height: 30px;
		flex-shrink: 0;
		flex-grow: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 4px;
		overflow: visible;
	}

	.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;
	}

	.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: 10px;
		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 — soft chip, thin edge
	.cq-census
	{
		flex-direction: column;
		justify-content: center;
		min-width: 140px;
		max-width: 200px;
		max-height: 80px;
		padding: 6px 10px;
		background-color: #0e1c28aa;
		border: 1px solid #2a4860;
		border-radius: 10px;
		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;
	}

	.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;
	}

	// ----- Cold Chip: GBA-style hardware wallet (generic, no brand) -----
	.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.5px;
		color: #6a8898;
		margin-top: 3px;
		text-align: center;
		width: 100%;
		justify-content: center;
		height: 10px;
		flex-shrink: 0;
	}

	.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: 9px;
		font-weight: 800;
		letter-spacing: 2px;
		color: #8a929c;
		margin-bottom: 4px;
		text-align: center;
		width: 100%;
		justify-content: center;
		height: 12px;
		flex-shrink: 0;
	}

	.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 (no bubble/box)
	.stat-float
	{
		position: absolute;
		width: auto;
		height: auto;
		min-width: 0;
		margin-left: -60px;
		font-size: 13px;
		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;
	}

	// Combined multi-stat line: "+4 END  +2 SPD  +1 AGI"
	.stat-float.combo
	{
		width: auto;
		margin-left: -80px;
		font-size: 13px;
		letter-spacing: 0.4px;
		color: #fff0a0;
		background-color: transparent;
		border: 0;
	}

	.stat-float.end
	{
		color: #ffe08a;
		background-color: transparent;
		border: 0;
	}

	.stat-float.spd
	{
		color: #a8e8ff;
		background-color: transparent;
		border: 0;
	}

	.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;
	}

	.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 — overlays tank, does not push 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;
		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;
		opacity: 0.92;
	}

	.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
	{
		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: 158px;
		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: 12px;
		flex-direction: column;
		align-items: stretch;
		flex-shrink: 0;
		pointer-events: all;
		z-index: 51;
	}

	.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: 200px;
	}

	// 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: 8px;
		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-on.has-sprite .fish-sprite
	{
		border: 2px solid #ffd24a;
	}

	.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: 1px solid #2a4860;
		border-radius: 10px;
		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;
	}

	.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: 14px;
		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: 10px;
		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: 10px;
		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: 10px;
	}

	.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: 12px;
		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;
	}

	// Achievement toast — corner chip, discreet
	.cq-ach-toast
	{
		position: absolute;
		right: 24px;
		bottom: 100px;
		width: 280px;
		padding: 10px 12px;
		background-color: #102838;
		border: 2px solid #3a90b0;
		border-radius: 10px;
		flex-direction: column;
		align-items: flex-start;
		z-index: 55;
		pointer-events: none;
		opacity: 0.94;
	}

	.cq-ach-kicker
	{
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 1.5px;
		color: #6ab8d8;
		text-transform: uppercase;
	}

	.cq-ach-title
	{
		font-size: 14px;
		font-weight: 700;
		color: #ffd24a;
		margin-top: 2px;
		text-align: left;
	}

	.cq-ach-body
	{
		font-size: 11px;
		color: #90b0c0;
		margin-top: 2px;
		text-align: left;
	}

	.cq-ach-body
	{
		font-size: 12px;
		color: #c0dce8;
		margin-top: 4px;
		text-align: center;
	}

	.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: 2px solid #3a80a0;
		border-radius: 12px;
		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.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: 2px solid #3a90b0;
		border-radius: 14px;
		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 — size is mainly from DrawScaleX/Y; CSS sells the roundness.
	.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%;
	}

	.fish.has-sprite.fat-2 .fish-sprite,
	.fish.has-sprite.fat-3 .fish-sprite
	{
		// Soft belly emphasis without recoloring the sheet too hard
		border-radius: 40%;
	}

	// Jacked tint over pixel sprites (red eyes vibe without new sheets yet)
	.fish.has-sprite.jacked .fish-sprite
	{
		// slight red wash via border glow
		border: 2px solid #e04040;
	}

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

	.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;
	}

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

	.crack
	{
		position: absolute;
		background-color: #c8e0f0;
		opacity: 0.55;
		pointer-events: none;
	}

	.crack.c1
	{
		left: 18%;
		top: 12%;
		width: 2px;
		height: 28%;
	}

	.crack.c2
	{
		left: 18%;
		top: 22%;
		width: 14%;
		height: 2px;
	}

	.crack.c3
	{
		right: 22%;
		top: 18%;
		width: 2px;
		height: 35%;
	}

	.crack.c4
	{
		right: 12%;
		top: 40%;
		width: 18%;
		height: 2px;
	}

	.crack.c5
	{
		left: 40%;
		top: 8%;
		width: 2px;
		height: 42%;
	}

	.crack.c6
	{
		left: 28%;
		bottom: 22%;
		width: 22%;
		height: 2px;
	}

	.crack.c7
	{
		left: 55%;
		top: 30%;
		width: 2px;
		height: 40%;
	}

	.crack.c8
	{
		left: 8%;
		bottom: 18%;
		width: 2px;
		height: 25%;
	}

	.crack.spider
	{
		left: 48%;
		top: 48%;
		width: 3px;
		height: 3px;
		border-radius: 50%;
		opacity: 0.7;
		background-color: #e8f4ff;
	}

	.tank-glass.cracks-3 .crack,
	.tank-glass.cracks-4 .crack,
	.tank-glass.cracks-5 .crack
	{
		opacity: 0.7;
		background-color: #e0f0ff;
	}

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

	.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: 2px solid #e04080;
		border-radius: 14px;
		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 — the only heavy bezel left
	.tank-glass
	{
		position: relative;
		flex-direction: column;
		width: 1280px;
		flex-shrink: 0;
		border: 2px solid #3a6080;
		background-color: #0a1824;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
	}

	// Thin lip, not a second frame
	.tank-rim
	{
		width: 100%;
		height: 4px;
		background-color: #243848;
		flex-shrink: 0;
	}

	.tank-rim.top
	{
		background-color: #2a4858;
	}

	.tank-rim.bottom
	{
		background-color: #1e3444;
	}

	.tank-water
	{
		position: relative;
		width: 1280px;
		height: 620px;
		// Deep aquarium blue
		background-color: #0b3a5a;
		overflow: hidden;
		flex-shrink: 0;
	}

	// 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: #4a8aaa;
		background-color: #0a2030;
		border-radius: 4px;
	}

	.playing.chill .tank-rim
	{
		background-color: #3a6078;
	}

	.playing.chill .tank-rim.top
	{
		background-color: #4a7890;
	}

	.playing.chill .tank-gravel
	{
		background-color: #6a5040;
	}



	.tank-shine
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 48px;
		background-color: #1a6088;
		opacity: 0.35;
		pointer-events: none;
	}

	.tank-bubbles
	{
		position: absolute;
		right: 40px;
		bottom: 40px;
		width: 8px;
		height: 120px;
		background-color: #4aa0c8;
		opacity: 0.15;
		pointer-events: none;
	}

	.tank-gravel
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 28px;
		background-color: #5a4030;
		pointer-events: none;
		z-index: 1;
	}

	// 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
	}

	.spritebox
	{
		pointer-events: none;
	}

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

	.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
	{
		border: 2px solid #ffd24a;
	}

	// 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;
		// Grab target — above fish so props on gravel are always clickable.
		pointer-events: all;
		cursor: grab;
		z-index: 18;
		overflow: hidden;
		flex-direction: column;
		justify-content: flex-end;
		align-items: stretch;
	}

	.decor.dragging
	{
		z-index: 22;
		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.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;
		pointer-events: all;
		cursor: pointer;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 12;
	}

	.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;
	}

	.boom-bit
	{
		position: absolute;
		width: 7px;
		height: 7px;
		pointer-events: none;
		border-radius: 1px;
		z-index: 6;
	}

	.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;
	}

	// ----- Dogecoin explainer (Cold Chip click) -----
	.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: 1px solid #2a6048;
		border-radius: 12px;
		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;
	}

	.shop-msg
	{
		font-size: 12px;
		color: #8aadc0;
		margin-bottom: 8px;
		flex-shrink: 0;
	}

	.shop-msg.dw-msg
	{
		color: #70c898;
		background-color: #0c1c14;
		border: 1px solid #1a4030;
		border-radius: 6px;
		padding: 6px 10px;
	}

	// Escrow / listing modal
	.dw-checkout
	{
		flex-direction: column;
		width: 100%;
		flex-shrink: 0;
		margin-bottom: 10px;
		padding: 12px 14px;
		background-color: #101808;
		border: 2px solid #c0a040;
		border-radius: 10px;
	}

	.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%;
		overflow: scroll;
		padding-right: 6px;
		pointer-events: all;
	}

	.shop-row
	{
		flex-direction: row;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding-top: 6px;
		padding-bottom: 6px;
		border-top: 1px solid #1a3028;
		flex-shrink: 0;
		pointer-events: all;
	}

	.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.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;
	}

	.shop-col.name
	{
		width: 220px;
		flex-direction: row;
		white-space: nowrap;
	}

	.shop-col.rate
	{
		width: 360px;
		color: #70c070;
		white-space: nowrap;
	}

	.shop-col.cost
	{
		width: 100px;
		color: #ffd24a;
		white-space: nowrap;
	}

	.shop-col.act
	{
		width: 100px;
		justify-content: flex-end;
	}

	.shop-col.act .btn
	{
		margin-bottom: 0;
	}

	.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 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;
	}
}