/* ===== JOINT QUEST v10 — STYLES ===== */
/* Single center-panel layout. Left/right panels deferred to app version. */

/* ===== RESET ===== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--app-width: 100vw;
	--app-height: 100dvh;
}

html, body {
	background: black;
	font-family: Arial, sans-serif;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
	position: fixed;
	inset: 0;
	overscroll-behavior: none;
	touch-action: none;
}

button,
input,
.victory-modal {
	touch-action: manipulation;
}

/* ===== APP CONTAINER ===== */
.app-container {
	display: flex;
	width: var(--app-width);
	height: 100vh;
	height: var(--app-height);
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overscroll-behavior: none;
	position: fixed;
	inset: 0;
	padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

/* ===== GAME CONTAINER ===== */
.game-container {
	background: rgba(255, 255, 255, 0.2);
	padding: 15px;
	border-radius: 10px;
	margin: 15px auto;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	width: min(400px, 90vw);
	aspect-ratio: 9 / 16;
	max-height: calc(var(--app-height) - 12px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

/* ===== DOUG CONTAINER ===== */
.doug-container {
	background: rgba(255, 255, 255, 0.2);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	position: relative;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1;
	isolation: isolate;
}

.doug-avatar {
	width: 90px;
	height: 90px;
	background: url('assets/characters/char-dougbag.png') center/cover;
	border-radius: 10px;
	position: relative;
	z-index: 200;
	flex-shrink: 0;
	margin-left: -20px;
}

.title-card {
	width: min(400px, 90vw);
	aspect-ratio: 1 / 1;
	height: auto;
	background: url('assets/titlecard1.png') center/contain no-repeat;
	border-radius: 15px;
	opacity: 0;
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	z-index: 2147483647;
	pointer-events: none;
}

.title-card.title-intro-active {
	display: block;
	cursor: pointer;
	pointer-events: auto;
	animation: titleCardIntro 0.9s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}

.title-card.title-intro-dismiss {
	display: block;
	pointer-events: none;
	animation: titleCardDismiss 0.26s ease-in forwards;
}

@keyframes titleCardIntro {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0) rotate(-540deg);
	}
	55% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08) rotate(18deg);
	}
	78% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.98) rotate(-6deg);
	}
	88% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
}

@keyframes titleCardDismiss {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.86) rotate(8deg);
	}
}

/* ===== GUEST AVATAR ===== */
.guest-avatar {
	width: 90px;
	height: 90px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 10px;
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
	z-index: 200;
	opacity: 0;
	transition: opacity 0.32s ease-in-out, transform 0.32s ease-in-out;
}

.guest-avatar.fade-in {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* ===== SPEECH BUBBLES ===== */
.speech-bubble, .guest-speech-bubble {
	background: white;
	border: 2px solid #333;
	border-radius: 15px;
	padding: 12px;
	width: 200px;
	height: 90px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	z-index: 120;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
}

.speech-bubble {
	left: 76px;
	top: 6px;
}

.guest-speech-bubble {
	left: 50%;
	top: 6px;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.24s ease-in-out;
	z-index: 220;
}

.guest-speech-bubble.fade-in {
	opacity: 1;
}

.speech-content {
	color: #333;
	font-size: 14px;
	line-height: 1.2;
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.speech-pointer {
	position: absolute;
	left: -10px;
	top: 20%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid white;
}

.guest-speech-pointer {
	position: absolute;
	top: 75%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.guest-speech-bubble.speaker-guest .guest-speech-pointer {
	right: -10px;
	border-left: 10px solid white;
}

.guest-speech-bubble.speaker-doug .guest-speech-pointer {
	left: -8px;
	border-right: 10px solid white;
}

/* ===== TUTORIAL BUTTONS ===== */
.lets-play-btn {
	background: #4CAF50;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: 12px;
	cursor: pointer;
	align-self: center;
	margin: 10px 20px -10px 20px;
}

.lets-play-btn:hover { background: #45a049; }

.skip-tutorial-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 8px;
	cursor: pointer;
	align-self: flex-end;
}

/* ===== INVENTORY ===== */
.inventory-container {
	background: rgba(255, 255, 255, 0.2);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: visible !important;
	z-index: 10 !important;
}

.inventory-slots {
	display: flex;
	justify-content: center;
	gap: 3px;
	flex-wrap: nowrap;
	width: 100%;
	overflow: visible !important;
}

.inventory-slot {
	width: calc((100% - 15px) / 6);
	max-width: 45px;
	min-width: 30px;
	height: 40px;
	background: rgba(255, 255, 255, 0.3);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.3s;
	flex-shrink: 1;
}

.inventory-slot.filled { border-color: gold; background: rgba(255, 215, 0, 0.3); }
.inventory-slot.for-sale { border-color: #4CAF50; background: rgba(76, 175, 80, 0.3); }

.inventory-tile {
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.8);
	font-weight: bold;
	position: relative;
	z-index: 2;
}

.inventory-tile.money {
	background: rgba(76, 175, 80, 0.8);
	color: white;
	font-size: 14px;
}

.inventory-tile.multiplier {
	background: rgba(255,215,0,0.15);
	border: 1px solid rgba(255,215,0,0.7);
	color: #ffd700;
	font-weight: 800;
	text-shadow: 0 0 4px rgba(0,0,0,.7);
}

.inventory-tile.multiplier.pulse {
	animation: multPulse 0.9s ease-in-out infinite;
}

@keyframes multPulse {
	0%   { filter: brightness(1); }
	50%  { filter: brightness(1.3); }
	100% { filter: brightness(1); }
}

/* Inventory slot backgrounds */
.inventory-slot::before {
	content: '';
	position: absolute;
	top: 2px; left: 2px; right: 2px; bottom: 2px;
	border-radius: 4px;
	opacity: 0.8;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.inventory-slot[data-slot="full-dube-tube"]::before { background-image: url('assets/full_dube_tube.png'); opacity: 1; z-index: 1; }
.inventory-slot[data-slot="full-dube-tube"].has-stock::before { opacity: 1 !important; z-index: 1; }
.inventory-slot[data-slot="fatty"]::before { background-image: url('assets/joint.png'); }
.inventory-slot[data-slot="lighter"]::before { background-image: url('assets/lighter.png'); }
.inventory-slot[data-slot="headphones"]::before { background-image: url('assets/headphones.png'); }
.inventory-slot[data-slot="track"]::before {
	background-image: url('assets/backpack.png') !important;
	opacity: 1 !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	position: absolute !important;
	top: -20% !important; left: -20% !important; right: -20% !important; bottom: -20% !important;
	z-index: 10 !important;
}

.inventory-slot.filled::before { display: none; }
.inventory-slot[data-slot="full-dube-tube"].filled::before { display: block !important; }
.inventory-slot[data-slot="track"].filled { border: none !important; background: transparent !important; }

/* Crafted joint count badge on the full-dube-tube slot */
#slot-full-dube-tube.has-count {
	background: transparent;
	color: #ffd700;
	font-size: 13px;
	font-weight: 900;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9);
	position: absolute;
	bottom: 2px;
	right: 3px;
	width: auto;
	height: auto;
	z-index: 20;
}

#slot-full-dube-tube {
	background: transparent;
}

/* ===== GAME CONTROLS ===== */
.game-controls {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 0 10px 0;
	flex-wrap: wrap;
}

.btn {
	padding: 0;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
}

.btn:hover:not(:disabled) { transform: scale(1.05); }

.btn-undo { background-image: url('assets/undo_button.png'); width: 44px; height: 44px; }
.btn-music { background-image: url('assets/music_button.png'); width: 44px; height: 44px; opacity: 0.3; transition: opacity 0.3s ease, transform 0.6s ease; transform-style: preserve-3d; }
.btn-music.playing { background-image: url('assets/stop-button.png'); opacity: 1 !important; }
.btn-music:hover:not(.playing) { opacity: 0.5; }
.btn-sound { background-image: url('assets/sound-button.png'); background-size: contain; background-position: center; background-repeat: no-repeat; width: 44px; height: 44px; opacity: 1; transition: opacity 0.3s ease; }
.btn-sound.muted { opacity: 0.3; }
.btn-new-game { background-image: url('assets/new_game_button.png'); width: 44px; height: 44px; }

@keyframes musicBtnPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
	50%  { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.music-btn-pulse { animation: musicBtnPulse 0.8s ease-out 5; }

@keyframes flipHorizontal {
	0%   { transform: rotateY(0deg); }
	50%  { transform: rotateY(90deg); }
	100% { transform: rotateY(0deg); }
}

.btn-music.flip { animation: flipHorizontal 0.6s ease; }

/* ===== OBJECTIVES BAR ===== */
.objectives-bar {
	text-align: center;
	padding: 4px 8px;
	margin-bottom: 8px;
	font-size: 0.8rem;
	color: #ffd700;
	font-weight: bold;
	background: rgba(255, 215, 0, 0.1);
	border-radius: 6px;
	border: 1px solid rgba(255, 215, 0, 0.3);
}

/* ===== GAME GRID ===== */
.game-grid {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	touch-action: none;
	flex: 0 0 auto;
	min-height: 0;
	position: relative;
	transition: grid-template-columns 0.55s ease, grid-template-rows 0.55s ease, width 0.55s ease;
	transform-origin: center center;
}

.game-grid.tutorial-complete {
	animation: gridTutorialComplete 1.35s ease-in-out forwards;
}

@keyframes gridTutorialComplete {
	0%, 100% { transform: scale(1); }
	55%      { transform: scale(1.04); }
}

.milestone-pop {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(72%, 320px);
	aspect-ratio: 1;
	object-fit: contain;
	pointer-events: none;
	z-index: 1400;
	transform: translate(-50%, -50%) scale(0) rotate(-540deg);
	opacity: 0;
	animation: milestonePop 1.35s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}

@keyframes milestonePop {
	0% {
		transform: translate(-50%, -50%) scale(0) rotate(-540deg);
		opacity: 0;
	}
	55% {
		transform: translate(-50%, -50%) scale(1.14) rotate(24deg);
		opacity: 1;
	}
	78% {
		transform: translate(-50%, -50%) scale(0.96) rotate(-8deg);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
		opacity: 1;
	}
}

/* ===== TILE SYSTEM ===== */
.tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
	position: relative;
	touch-action: none;
}

@keyframes craft-grow-shake {
  0%   { transform: scale(0)    rotate(0deg);   opacity: 0; }
  25%  { transform: scale(0.7)  rotate(-10deg); opacity: 0.7; }
  50%  { transform: scale(1.15) rotate(8deg);   opacity: 1; }
  75%  { transform: scale(0.95) rotate(-4deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}

.tile.craft-spawn {
  animation: craft-grow-shake 0.65s ease-out forwards;
}

.tile:hover:not(.falling):not(.cascading):not(.spawning):not(.swapping) {
	transform: scale(1.05);
	transition: transform 0.2s ease-out;
}

.tile.selected {
	border: 3px solid #FFFFFF !important;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
	z-index: 100 !important;
}

.tile.super.selected {
	border: 3px solid gold;
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
}

.tile.super-customer-tutorial-highlight {
	border: 3px solid gold !important;
	box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.9), 0 0 28px 8px rgba(255, 215, 0, 0.35) !important;
	animation: tutorialPulse 1.1s ease-in-out infinite;
	z-index: 20;
}

.tile.lit-joint {
	border: 2px solid #ff4500;
	background-color: rgba(255, 69, 0, 0.3);
	animation: flicker 1s infinite alternate;
}

/* ===== TILE ANIMATIONS ===== */
@keyframes flicker {
	0%   { opacity: 0.8; }
	100% { opacity: 1.0; }
}

.tile.swapping {
	z-index: 1000;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tile.cascading {
	z-index: 999;
	pointer-events: none;
	transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tile.matched {
	animation: tileMatch 0.16s ease-out forwards;
	pointer-events: none;
	z-index: 50;
}

@keyframes tileMatch {
	0%   { transform: scale(1);    opacity: 1; filter: brightness(2.2); }
	55%  { transform: scale(1.18); opacity: 0.9; filter: brightness(1.8); }
	100% { transform: scale(0);    opacity: 0; }
}

.tile.spawning {
	animation: tileSpawn 0.3s ease-out;
}

.tile.spawning.spawn-from-left {
	animation: tileSpawnFromLeft 0.42s ease-out;
}

.tile.spawning.spawn-from-right {
	animation: tileSpawnFromRight 0.42s ease-out;
}

.tile.spawning.spawn-from-top {
	animation: tileSpawnFromTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes tileSpawnFromTop {
	0%   { transform: translateY(-120%) scale(0.9); opacity: 0; }
	65%  { transform: translateY(6%) scale(1.03); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes tileSpawn {
	0%   { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes tileSpawnFromLeft {
	0%   { transform: translateX(-110%) scale(0.9); opacity: 0; }
	70%  { transform: translateX(8%) scale(1.02); opacity: 1; }
	100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes tileSpawnFromRight {
	0%   { transform: translateX(110%) scale(0.9); opacity: 0; }
	70%  { transform: translateX(-8%) scale(1.02); opacity: 1; }
	100% { transform: translateX(0) scale(1); opacity: 1; }
}

.tile.super-spawn {
	animation: superTileSpawn 0.6s ease-out;
}

@keyframes superTileSpawn {
	0%   { transform: scale(0); opacity: 0; box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
	100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
}

.tile.craft-spawn {
	animation: craftSpawn 0.28s ease-out forwards;
}

@keyframes craftSpawn {
	0%   { transform: scale(0.1) rotate(-270deg); opacity: 0; }
	100% { transform: scale(1)   rotate(0deg);    opacity: 1; }
}

/* ===== TILE BACKGROUNDS ===== */
.bud           { background: url('assets/purple_bud.png') center/cover transparent !important; }
.grinder       { background: url('assets/grinder.png') center/cover transparent !important; }
.paper         { background: url('assets/paper.png') center/cover transparent !important; }
.lighter       { background: url('assets/lighter.png') center/cover transparent !important; }
.headphones    { background: url('assets/headphones.png') center/cover transparent !important; }
.joint         { background: url('assets/joint.png') center/cover transparent !important; }
.ground-bud    { background: url('assets/busted_purple_bud.png') center/cover transparent !important; }
.dube-tube     { background: url('assets/empty_dube_tube.png') center/cover transparent !important; }
.full-dube-tube { background: url('assets/full_dube_tube.png') center/cover transparent !important; }
.lit-joint-img { background: url('assets/lit_joint.png') center/cover transparent !important; }
.fatty         { background: url('assets/joint.png') center/cover transparent !important; }
.wild-card     { background: url('assets/wild_card.png') center/cover transparent !important; }
.backpack      { background: url('assets/backpack.png') center/cover transparent !important; opacity: 1 !important; }
.ticket        { background: url('assets/ticket.png') center/cover transparent !important; }
.ice-cream     { background: url('assets/ice_cream.png') center/cover transparent !important; }

/* Super tile variants — same image, gold ring added via ::before */
.super.bud           { background: url('assets/purple_bud.png') center/cover transparent !important; }
.super.grinder       { background: url('assets/grinder.png') center/cover transparent !important; }
.super.paper         { background: url('assets/paper.png') center/cover transparent !important; }
.super.lighter       { background: url('assets/lighter.png') center/cover transparent !important; }
.super.headphones    { background: url('assets/headphones.png') center/cover transparent !important; }
.super.joint         { background: url('assets/joint.png') center/cover transparent !important; }
.super.dube-tube     { background: url('assets/empty_dube_tube.png') center/cover transparent !important; }
.super.full-dube-tube { background: url('assets/full_dube_tube.png') center/cover transparent !important; }
.super.ground-bud    { background: url('assets/busted_purple_bud.png') center/cover transparent !important; }
.super.lighter       { background: url('assets/lighter.png') center/cover transparent !important; }
.super.headphones    { background: url('assets/headphones.png') center/cover transparent !important; }
.fatty-tile          { background: url('assets/joint.png') center/cover transparent !important; }

/* Hide text on image tiles */
.bud, .grinder, .paper, .lighter, .headphones, .joint,
.ground-bud, .dube-tube, .full-dube-tube, .super.bud, .super.grinder,
.super.paper, .super.lighter, .super.headphones, .super.joint,
.super.dube-tube, .super.full-dube-tube, .wild-card, .fatty,
.lit-joint-img, .ticket, .ice-cream {
	font-size: 0 !important;
	color: transparent !important;
	background-color: transparent !important;
}

/* ===== SUPER TILE GLOW RING ===== */
.tile.super {
	position: relative;
	overflow: hidden;
}

.tile.super::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	border: 2px solid rgba(255, 215, 0, 0.8);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: smokeRingBehind 2s ease-out infinite;
	pointer-events: none;
	z-index: -1;
}

@keyframes smokeRingBehind {
	0%   { width: 10%;  height: 10%;  opacity: 0.9; border-width: 3px; border-color: rgba(255, 215, 0, 0.9); }
	70%  { width: 90%;  height: 90%;  opacity: 0.4; border-width: 2px; border-color: rgba(255, 215, 0, 0.6); }
	100% { width: 120%; height: 120%; opacity: 0.3; border-width: 1px; border-color: rgba(255, 215, 0, 0.4); }
}

/* ===== CHARACTER HEAD TILES ===== */
.char-bill-head    { background: url('assets/characters/head-bill.png') center/cover transparent !important; }
.char-ky-head      { background: url('assets/characters/head-ky.png') center/cover transparent !important; }
.char-suzy-head    { background: url('assets/characters/head-suzy.png') center/cover transparent !important; }
.char-kezia-head   { background: url('assets/characters/head-kezia.png') center/cover transparent !important; }
.char-marisol-head { background: url('assets/characters/head-marisol.png') center/cover transparent !important; }
.char-yuna-head    { background: url('assets/characters/head-yuna.png') center/cover transparent !important; }
.char-priya-head   { background: url('assets/characters/head-priya.png') center/cover transparent !important; }
.char-sythe-head   { background: url('assets/characters/head-sythe.png') center/cover transparent !important; }
.char-jakub-head   { background: url('assets/characters/head-jakub.png') center/cover transparent !important; }
.char-drec-head    { background: url('assets/characters/head-drec.png') center/cover transparent !important; }
.char-dubgee-head  { background: url('assets/characters/head-dubgee.png') center/cover transparent !important; }
.char-steve-head   { background: url('assets/characters/head-steve.png') center/cover transparent !important; }
.char-ammoye-head  { background: url('assets/characters/head_ammoye.png') center/cover transparent !important; }
.char-kils-head    { background: url('assets/characters/head-kils.png') center/cover transparent !important; }
.char-vicious-head { background: url('assets/characters/head-vicious.png') center/cover transparent !important; }
.char-ryan-head    { background: url('assets/characters/head-ryan.png') center/cover transparent !important; }
.char-bawts-head   { background: url('assets/characters/head-bawts.png') center/cover transparent !important; }
.char-keith-head   { background: url('assets/characters/head-keith.png') center/cover transparent !important; }

/* ===== CHARACTER FULL AVATARS ===== */
.char-bill-full    { background: url('assets/characters/char-bill.png') center/cover transparent !important; }
.char-ky-full      { background: url('assets/characters/char-ky.png') center/cover transparent !important; }
.char-suzy-full    { background: url('assets/characters/char-suzy.png') center/cover transparent !important; }
.char-kezia-full   { background: url('assets/characters/char-kezia.png') center/cover transparent !important; }
.char-marisol-full { background: url('assets/characters/char-marisol.png') center/cover transparent !important; }
.char-yuna-full    { background: url('assets/characters/char-yuna.png') center/cover transparent !important; }
.char-priya-full   { background: url('assets/characters/char-priya.png') center/cover transparent !important; }
.char-sythe-full   { background: url('assets/characters/char-sythe.png') center/cover transparent !important; }
.char-jakub-full   { background: url('assets/characters/char-jakub.png') center/cover transparent !important; }
.char-drec-full    { background: url('assets/characters/char-drec.png') center/cover transparent !important; }
.char-dubgee-full  { background: url('assets/characters/char-dubgee.png') center/cover transparent !important; }
.char-steve-full   { background: url('assets/characters/char-steve.png') center/cover transparent !important; }
.char-ammoye-full  { background: url('assets/characters/char_ammoye.png') center/cover transparent !important; }
.char-kils-full    { background: url('assets/characters/char-kils.png') center/cover transparent !important; }

/* ===== GUEST TILE GLOWS ===== */
.tile.char-ammoye-head.guest-tile,
.tile.char-kils-head.guest-tile {
	box-shadow: 0 0 10px 3px #ffd700, 0 0 20px 6px rgba(255, 215, 0, 0.4);
	border: 2px solid #ffd700 !important;
	animation: glow-gold 1.8s ease-in-out infinite;
	z-index: 10;
}

.tile.kils-story-highlight {
	box-shadow: 0 0 10px 3px #9b59ff, 0 0 20px 6px rgba(155, 89, 255, 0.45);
	border: 2px solid #b784ff !important;
	animation: glow-purple 1.8s ease-in-out infinite;
	z-index: 10;
}

.tile.char-dubgee-head.guest-tile {
	box-shadow: 0 0 10px 3px #9b59b6, 0 0 20px 6px rgba(155, 89, 182, 0.4);
	border: 2px solid #9b59b6 !important;
	animation: glow-purple 1.8s ease-in-out infinite;
	z-index: 10;
}

.tile.char-steve-head.guest-tile {
	box-shadow: 0 0 10px 3px #e67e22, 0 0 20px 6px rgba(230, 126, 34, 0.4);
	border: 2px solid #e67e22 !important;
	animation: glow-orange 1.8s ease-in-out infinite;
	z-index: 10;
}

.tile.char-vicious-head.guest-tile {
	box-shadow: 0 0 10px 3px #e74c3c, 0 0 20px 6px rgba(231, 76, 60, 0.4);
	border: 2px solid #e74c3c !important;
	animation: glow-red 1.8s ease-in-out infinite;
	z-index: 10;
}

.tile.char-ryan-head.guest-tile {
	box-shadow: 0 0 10px 3px #1abc9c, 0 0 20px 6px rgba(26, 188, 156, 0.4);
	border: 2px solid #1abc9c !important;
	animation: glow-cyan 1.8s ease-in-out infinite;
	z-index: 10;
}

@keyframes glow-gold   { 0%,100% { box-shadow: 0 0 10px 3px #ffd700, 0 0 20px 6px rgba(255,215,0,.4); } 50% { box-shadow: 0 0 16px 6px #ffd700, 0 0 30px 12px rgba(255,215,0,.6); } }
@keyframes glow-purple { 0%,100% { box-shadow: 0 0 10px 3px #9b59b6, 0 0 20px 6px rgba(155,89,182,.4); } 50% { box-shadow: 0 0 16px 6px #9b59b6, 0 0 30px 12px rgba(155,89,182,.6); } }
@keyframes glow-orange { 0%,100% { box-shadow: 0 0 10px 3px #e67e22, 0 0 20px 6px rgba(230,126,34,.4); } 50% { box-shadow: 0 0 16px 6px #e67e22, 0 0 30px 12px rgba(230,126,34,.6); } }
@keyframes glow-red    { 0%,100% { box-shadow: 0 0 10px 3px #e74c3c, 0 0 20px 6px rgba(231,76,60,.4); } 50% { box-shadow: 0 0 16px 6px #e74c3c, 0 0 30px 12px rgba(231,76,60,.6); } }
@keyframes glow-cyan   { 0%,100% { box-shadow: 0 0 10px 3px #1abc9c, 0 0 20px 6px rgba(26,188,156,.4); } 50% { box-shadow: 0 0 16px 6px #1abc9c, 0 0 30px 12px rgba(26,188,156,.6); } }

/* ===== TUTORIAL HIGHLIGHTS ===== */
.tutorial-highlight {
	--tutorial-x: 0px;
	--tutorial-y: 0px;
	border: 3px solid #FFD700 !important;
	box-shadow: 0 0 14px #FFD700, inset 0 0 10px rgba(255, 215, 0, 0.4) !important;
	animation: tutorialHintSlide 1.25s ease-in-out infinite;
	z-index: 90;
}

@keyframes tutorialHintSlide {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		box-shadow: 0 0 10px #FFD700, inset 0 0 8px rgba(255, 215, 0, 0.35);
	}
	50% {
		transform: translate(var(--tutorial-x), var(--tutorial-y)) scale(1.04);
		box-shadow: 0 0 20px #FFD700, inset 0 0 14px rgba(255, 215, 0, 0.55);
	}
}

/* ===== CHARACTER HIGHLIGHT ===== */
.tile.character-highlight {
	box-shadow: 0 0 12px rgba(0, 150, 255, 0.9), inset 0 0 8px rgba(0, 150, 255, 0.3);
	animation: characterPulse 1.2s ease-in-out infinite;
}

@keyframes characterPulse {
	0%, 100% { box-shadow: 0 0 8px rgba(0, 150, 255, 0.7), inset 0 0 6px rgba(0, 150, 255, 0.2); }
	50%       { box-shadow: 0 0 20px rgba(0, 150, 255, 1), inset 0 0 12px rgba(0, 150, 255, 0.4); }
}

/* ===== VICTORY MODALS ===== */
.victory-modal {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	justify-content: center;
	align-items: center;
}

.victory-modal .modal-content {
	background: rgba(10, 10, 30, 0.98);
	color: white;
	padding: 30px;
	border-radius: 20px;
	text-align: center;
	max-width: 380px;
	width: 90%;
	border: 3px solid #FFD700;
	box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.victory-modal h2 {
	color: #FFD700;
	font-size: 28px;
	margin-bottom: 15px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.victory-modal p {
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 0;
	color: #f7fafc;
}

.email-input {
	width: 100%;
	padding: 12px;
	margin: 15px 0 10px 0;
	border: 2px solid #ffd700;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-size: 16px;
	box-sizing: border-box;
	text-align: center;
}

.email-input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.email-submit {
	width: 100%;
	padding: 12px;
	margin: 5px 0;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	background: #FFD700;
	color: #333;
	transition: all 0.3s;
}

.email-submit:hover {
	background: #fff;
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.btn-keep-playing {
	width: 100%;
	padding: 12px;
	margin: 5px 0;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	background: rgba(255,255,255,0.1);
	color: #aaa;
	transition: all 0.3s;
}

.btn-keep-playing:hover {
	background: rgba(255,255,255,0.2);
	color: white;
}

/* ===== CHEAT MODAL ===== */
.cheat-modal {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cheat-modal .modal-content {
	background: rgba(0, 0, 0, 0.95);
	padding: 30px;
	border-radius: 15px;
	border: 2px solid #ffd700;
	max-width: 350px;
	width: 90%;
	text-align: center;
}

.cheat-modal h2 { color: #ffd700; margin-bottom: 20px; }

#cheat-password-input {
	width: 100%;
	padding: 12px;
	border-radius: 5px;
	border: 2px solid #ffd700;
	background: rgba(0,0,0,0.3);
	color: white;
	font-size: 1rem;
	margin-bottom: 15px;
	text-align: center;
}

#cheat-password-input::placeholder { color: rgba(255,255,255,0.5); }

.btn-submit {
	width: 100%;
	padding: 12px;
	background: #ffd700;
	color: #1a1a2e;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	transition: all 0.3s;
}

.btn-submit:hover { background: #fff; transform: scale(1.05); }

/* ===== MUSICAL NOTES ANIMATION ===== */
.flow-note {
	position: absolute;
	color: #000;
	opacity: 0;
	pointer-events: none;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	will-change: transform, opacity;
}

/* ===== CELEBRATION ===== */
.celebration-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: none;
}

.celebration-image {
	max-width: 80%;
	max-height: 50%;
	object-fit: contain;
	animation: celebrationPop 0.5s ease-out;
}

@keyframes celebrationPop {
	0%   { transform: scale(0.3); opacity: 0; }
	50%  { transform: scale(1.1); }
	100% { transform: scale(1);   opacity: 1; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.game-container { aspect-ratio: 9 / 16 !important; margin: 0 auto !important; }
	.inventory-slots { gap: clamp(3px, 1vw, 6px); }
	.inventory-slot { height: 35px; min-width: 25px; }
	.inventory-tile { font-size: 10px; }
	.tile { font-size: clamp(18px, 5vw, 26px); border-radius: 8px; }
	.tile:active { transform: scale(0.95); transition: transform 0.1s; }
	.btn:active { transform: scale(0.98); }
	.game-grid, .tile, .inventory-slots {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}
}

@media (max-width: 480px) {
	.inventory-slot { width: clamp(28px, 14vw, 40px); height: clamp(28px, 14vw, 40px); }
	.inventory-tile { font-size: clamp(7px, 3.5vw, 12px); }
	.title-card { width: min(400px, 90vw); height: auto; }
	.doug-container { height: 80px; min-height: 80px; }
	.speech-bubble, .guest-speech-bubble { top: -2px; }
}