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

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Be Vietnam Pro', sans-serif;
  background-color: #0b0914;
  overflow: hidden;
  color: #fff;
  /* Chống nảy trang trên iOS (overscroll bounce) */
  overscroll-behavior: none; 
}

/* --- QUẢN LÝ CÁC SCREEN CHUNG --- */
.game-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
  z-index: 1;
}

.game-screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.hidden {
  display: none !important;
}

/* ================= SCENE 0: WELCOME SCREEN ================= */
#welcome-screen {
  background: radial-gradient(circle at center, #1e133a 0%, #0b0914 100%);
}

#welcome-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.welcome-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 600px;
  padding: 0 24px;
  animation: fadeInDown 1.2s ease-out;
}

.floating-heart-icon {
  font-size: 56px;
  margin-bottom: 20px;
  animation: heartPulse 2s infinite ease-in-out;
}

.welcome-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: #d1c4e9;
  margin-bottom: 8px;
  line-height: 1.5;
}

.welcome-question {
  font-size: clamp(18px, 2.5vw, 22px);
  color: #fff;
  font-weight: 500;
  margin-bottom: 36px;
}

.welcome-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.primary-btn {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  color: white;
}

.primary-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 65, 108, 0.4);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

/* ================= SCENE 1: PUZZLE SCREEN ================= */
#puzzle-screen {
  background-color: #121019;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 20px;
}

.puzzle-header-hint {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}

.puzzle-header-hint span {
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  color: #ffd54f;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 213, 79, 0.3);
}

.action-hint-btn {
  background: #ff416c;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
  transition: all 0.2s;
}

.action-hint-btn:hover {
  background: #ff4b2b;
  transform: scale(1.05);
}

.puzzle-area {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

svg#original-puzzle-svg {
  width: min(100%, 70vh);
  height: min(100%, 70vh);
  max-width: 800px;
  max-height: 800px;
  overflow: visible;
  /* 3 DÒNG QUAN TRỌNG NHẤT ĐỂ SỬA LỖI VUỐT MÀN HÌNH */
  touch-action: none; 
  -webkit-user-select: none;
  user-select: none;
}

.piece {
  /* Khóa hành động mặc định của trình duyệt trên mảnh ghép */
  touch-action: none;
  -webkit-touch-callout: none;
}

.success-banner-container {
  display: none;
  position: relative;
  z-index: 30;
  background: rgba(18, 16, 25, 0.85);
  border: 1px solid rgba(255, 65, 108, 0.4);
  padding: 20px 30px;
  border-radius: 24px;
  backdrop-filter: blur(15px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.success-banner-container.show-banner {
  display: block;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.banner-content h2 {
  font-size: 22px;
  color: #ff9a9e;
  margin-bottom: 8px;
}

.banner-content p {
  font-size: 14px;
  color: #d1c4e9;
  margin-bottom: 16px;
}

.epic-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 15px;
  padding: 12px 30px;
  border-radius: 50px;
  animation: pulseGlow 2s infinite;
}

.epic-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
}

/* ================= SCENE 2: UNIVERSE & ENVELOPE ================= */
#universe-screen {
  background: radial-gradient(circle at center, #1b133a 0%, #050308 100%);
}

#universe-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.universe-ui {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.envelope-card-wrapper {
  text-align: center;
  cursor: pointer;
  perspective: 1000px; 
}

.envelope-box {
  width: 140px;
  height: 100px;
  background-color: #ff9a9e;
  position: relative;
  margin: 0 auto 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  animation: floatEnvelope 3s ease-in-out infinite;
  transition: transform 0.3s;
}

.envelope-card-wrapper:hover .envelope-box {
  transform: scale(1.05);
}

.envelope-flap {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #fca9c5;
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  transform-origin: top;
  transition: transform 0.6s ease;
  z-index: 4;
  border-radius: 8px 8px 0 0;
}

.envelope-paper {
  position: absolute;
  width: 120px; height: 80px;
  background: #fffdf9;
  top: 10px; left: 10px;
  border-radius: 4px;
  display: flex; justify-content: center; align-items: center;
  font-size: 32px;
  z-index: 2;
  transition: all 0.8s ease;
}

.envelope-front-bottom {
    position: absolute; bottom: 0; left:0; width: 100%; height: 100%;
    background: #ff758c;
    clip-path: polygon(0 100%, 100% 100%, 50% 50%);
    z-index: 3;
    border-radius: 0 0 8px 8px;
}
.envelope-front-left {
    position: absolute; bottom: 0; left:0; width: 100%; height: 100%;
    background: #ff8fa3;
    clip-path: polygon(0 0, 0 100%, 50% 50%);
    z-index: 3;
    border-radius: 8px 0 0 8px;
}
.envelope-front-right {
    position: absolute; bottom: 0; right:0; width: 100%; height: 100%;
    background: #ff8fa3;
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    z-index: 3;
    border-radius: 0 8px 8px 0;
}

.envelope-card-wrapper.open .envelope-box {
    animation: none; 
}
.envelope-card-wrapper.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1; 
}
.envelope-card-wrapper.open .envelope-paper {
    transform: translateY(-90px) scale(1.2) rotate(-5deg);
    opacity: 0; 
}

.envelope-instruction {
  font-size: 15px;
  color: #ffdc7d;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: opacity 0.3s;
}

.envelope-card-wrapper.open .envelope-instruction {
  opacity: 0;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 3, 8, 0.8);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.4s ease;
}

.letter-paper-card {
  background: #fffdf9;
  color: #2b2b2b;
  width: 100%;
  max-width: 520px;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8);
  position: relative;
  font-family: 'Be Vietnam Pro', sans-serif;
  animation: scaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close-btn:hover {
  color: #ff416c;
}

.letter-heading {
  font-family: 'Great Vibes', cursive;
  font-size: 38px;
  color: #d6694f;
  margin-bottom: 20px;
}

.letter-text-content p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
  color: #4a4a4a;
}

.letter-signature-text {
  font-family: 'Great Vibes', cursive;
  font-size: 32px;
  color: #d6694f;
  text-align: right;
  margin-top: 20px;
}

.letter-footer-note {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #8c8c8c;
  border-top: 1px dashed #e0e0e0;
  padding-top: 14px;
}

/* ================= TOAST NOTIFICATION ================= */
#custom-toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-150px);
    background: rgba(20, 15, 30, 0.95);
    border: 1px solid rgba(255, 65, 108, 0.5);
    padding: 14px 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    width: max-content;
    max-width: 90%;
}

#custom-toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast-icon { font-size: 20px; }
.toast-text { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; }

/* Animations Keyframes */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes heartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); } 50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.9); } }
@keyframes floatEnvelope { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ================= SCENE 3: TROLL ================= */
#troll-screen {
    background: #f1f1f1;
    font-size: calc(16px + (20 - 16)*(100vw - 320px)/(1024 - 320));
    color: #000;
}

.troll {
	font-size: 0.625em;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 22em;
	height: 39em;
}
.troll div {
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	position: absolute;
}

/* Head */
.troll__head {
	animation-name: head;
	top: 2.5em;
	left: 8em;
	width: 14em;
	height: 11.5em;
}
.troll__head div {
	background: #171717;
	border-radius: 0.5em;
	transform-origin: 0.5em 0.5em;
	width: 1em;
	z-index: -1;
}
.troll__face {
	width: 100%;
	height: auto;
}

/* Arms */
.troll__head > div {
	top: calc(100% - 3.25em);
	left: calc(50% - 0.5em);
}
.troll__head > div div {
	top: calc(100% - 1em);
}
.troll__right-arm {
	animation-name: rightArm;
	height: 11em;
	transform: rotate(85deg);
}
.troll__left-arm {
	animation-name: leftArm;
	height: 10em;
	transform: rotate(-12deg);
}
.troll__right-lower-arm {
	animation-name: rightLowerArm;
	height: 4em;
	transform: rotate(-145deg);
}
.troll__left-lower-arm {
	animation-name: leftLowerArm;
	height: 7em;
	transform: rotate(143deg);
}
div.troll__right-hand, div.troll__left-hand {
	border-radius: 0.75em;
	left: -0.25em;
	transform-origin: 0.75em 0.5em;
	height: 1.5em;
	width: 1.5em;
}
.troll__right-hand {
	animation-name: rightHand;
	transform: rotate(-30deg);
}
.troll__left-hand {
	animation-name: leftHand;
	transform: rotate(90deg);
}

/* Body */
.troll__upper-body {
	animation-name: upperBody;
	height: 7em;
	transform: rotate(-5deg);
}
.troll__lower-body {
	animation-name: lowerBody;
	height: 8em;
	transform: rotate(18deg);
}

/* Legs */
.troll__right-thigh {
	animation-name: rightThigh;
	height: 9.25em;
	transform: rotate(100deg);
}
.troll__left-thigh {
	animation-name: leftThigh;
	height: 6.25em;
	transform: rotate(-25deg);
}
.troll__right-lower-leg {
	animation-name: rightLowerLeg;
	height: 4.5em;
	transform: rotate(-120deg);
}
.troll__left-lower-leg {
	animation-name: leftLowerLeg;
	height: 6.75em;
	transform: rotate(24deg);
}
.troll__right-foot, .troll__left-foot {
	height: 3em;
}
.troll__right-foot {
	animation-name: rightFoot;
	transform: rotate(95deg);
}
.troll__left-foot {
	animation-name: leftFoot;
	transform: rotate(-90deg);
}

/* Troll Animations */
@keyframes head {
	from, to { transform: translate(0,0) rotate(0) }
	10% { transform: translate(-0.25em,0.25em) rotate(0) }
	20% { transform: translate(-1.25em,1.5em) rotate(-4deg) }
	30% { transform: translate(-2.75em,3em) rotate(-8deg) }
	40% { transform: translate(-5.25em,1.5em) rotate(-16deg) }
	50% { transform: translate(-6.25em,-0.5em) rotate(-24deg) }
	60% { transform: translate(-6.25em,-0.75em) rotate(-20deg) }
	70% { transform: translate(-4.25em,1.25em) rotate(-18deg) }
	80% { transform: translate(-2.25em,4.25em) rotate(0) }
	90% { transform: translate(-0.75em,3.75em) rotate(0) }
}
@keyframes rightArm {
	from, to { height: 11em; transform: rotate(85deg) }
	10% { height: 10.5em; transform: rotate(80deg) }
	20% { height: 9.5em; transform: rotate(70deg) }
	30% { height: 8em; transform: rotate(60deg) }
	40% { height: 7em; transform: rotate(45deg) }
	50% { height: 8.75em; transform: rotate(36deg) }
	60% { height: 9.25em; transform: rotate(27deg) }
	70% { height: 8.25em; transform: rotate(35deg) }
	80% { height: 6.5em; transform: rotate(40deg) }
	90% { height: 7.5em; transform: rotate(56deg) }
}
@keyframes leftArm {
	from, to { height: 10em; transform: rotate(-12deg) }
	10% { height: 9em; transform: rotate(-20deg) }
	20% { height: 9em; transform: rotate(-27deg) }
	30% { height: 8.5em; transform: rotate(-35deg) }
	40% { height: 10em; transform: rotate(-87deg) }
	50% { height: 9.75em; transform: rotate(-70deg) }
	60% { height: 9.25em; transform: rotate(-80deg) }
	70% { height: 8.25em; transform: rotate(-80deg) }
	80% { height: 8.75em; transform: rotate(-65deg) }
	90% { height: 9em; transform: rotate(-43deg) }
}
@keyframes rightLowerArm {
	from, to { height: 4em; transform: rotate(-145deg) }
	10% { height: 3.5em; transform: rotate(-150deg) }
	20% { height: 4em; transform: rotate(-130deg) }
	30% { height: 4em; transform: rotate(-95deg) }
	40% { height: 6em; transform: rotate(-148deg) }
	50% { height: 5.75em; transform: rotate(-145deg) }
	60% { height: 5.5em; transform: rotate(-150deg) }
	70% { height: 4em; transform: rotate(-150deg) }
	80% { height: 3.25em; transform: rotate(-100deg) }
	90% { height: 4.5em; transform: rotate(-105deg) }
}
@keyframes leftLowerArm {
	from, to { height: 7em; transform: rotate(143deg) }
	10% { height: 7em; transform: rotate(140deg) }
	20% { height: 5em; transform: rotate(110deg) }
	30% { height: 3em; transform: rotate(95deg) }
	40% { height: 4em; transform: rotate(147deg) }
	50% { height: 3.25em; transform: rotate(130deg) }
	60% { height: 4.5em; transform: rotate(120deg) }
	70% { height: 4.5em; transform: rotate(120deg) }
	80% { height: 4.25em; transform: rotate(143deg) }
	90% { height: 4.25em; transform: rotate(125deg) }
}
@keyframes rightHand {
	from, to { transform: rotate(-30deg) }
	10% { transform: rotate(-30deg) }
	20% { transform: rotate(-100deg) }
	30% { transform: rotate(-45deg) }
	40% { transform: rotate(-65deg) }
	50% { transform: rotate(-75deg) }
	60% { transform: rotate(-60deg) }
	70% { transform: rotate(-30deg) }
	80% { transform: rotate(-60deg) }
	90% { transform: rotate(-30deg) }
}
@keyframes leftHand {
	from, to { transform: rotate(90deg) }
	10% { transform: rotate(90deg) }
	20% { transform: rotate(90deg) }
	30% { transform: rotate(30deg) }
	40% { transform: rotate(90deg) }
	50% { transform: rotate(0deg) }
	60% { transform: rotate(90deg) }
	70% { transform: rotate(45deg) }
	80% { transform: rotate(-90deg) }
	90% { transform: rotate(60deg) }
}
@keyframes upperBody {
	from, to { transform: rotate(-5deg) }
	10% { transform: rotate(5deg) }
	20% { transform: rotate(12deg) }
	30% { transform: rotate(15deg) }
	40% { transform: rotate(24deg) }
	50% { transform: rotate(30deg) }
	60% { transform: rotate(16deg) }
	70% { transform: rotate(11deg) }
	80% { transform: rotate(-10deg) }
	90% { transform: rotate(-8deg) }
}
@keyframes lowerBody {
	from, to { height: 8em; transform: rotate(18deg) }
	10% { height: 8.5em; transform: rotate(-2deg) }
	20% { height: 8em; transform: rotate(-10deg) }
	30% { height: 6.75em; transform: rotate(-18deg) }
	40% { height: 7em; transform: rotate(-24deg) }
	50% { height: 8.75em; transform: rotate(-20deg) }
	60% { height: 10.25em; transform: rotate(-5deg) }
	70% { height: 8em; transform: rotate(6deg) }
	80% { height: 5.75em; transform: rotate(18deg) }
	90% { height: 5.75em; transform: rotate(25deg) }
}
@keyframes rightThigh {
	from, to { height: 9.25em; transform: rotate(100deg) }
	10% { height: 8.75em; transform: rotate(110deg) }
	20% { height: 9.25em; transform: rotate(50deg) }
	30% { height: 9.75em; transform: rotate(53deg) }
	40% { height: 8.75em; transform: rotate(53deg) }
	50% { height: 9.25em; transform: rotate(45deg) }
	60% { height: 8.5em; transform: rotate(46deg) }
	70% { height: 8.25em; transform: rotate(38deg) }
	80% { height: 8.5em; transform: rotate(38deg) }
	90% { height: 7.75em; transform: rotate(65deg) }
}
@keyframes leftThigh {
	from, to { height: 6.25em; transform: rotate(-25deg) }
	10% { height: 7em; transform: rotate(-23deg) }
	20% { height: 8.75em; transform: rotate(-29deg) }
	30% { height: 10.5em; transform: rotate(-78deg) }
	40% { height: 10em; transform: rotate(-88deg) }
	50% { height: 10em; transform: rotate(-87deg) }
	60% { height: 9em; transform: rotate(-95deg) }
	70% { height: 8em; transform: rotate(-64deg) }
	80% { height: 5.5em; transform: rotate(-45deg) }
	90% { height: 5.75em; transform: rotate(-42deg) }
}
@keyframes rightLowerLeg {
	from, to { height: 4.5em; transform: rotate(-120deg) }
	10% { height: 5em; transform: rotate(-115deg) }
	20% { height: 7em; transform: rotate(-90deg) }
	30% { height: 5.25em; transform: rotate(-85deg) }
	40% { height: 5em; transform: rotate(-80deg) }
	50% { height: 5.25em; transform: rotate(-70deg) }
	60% { height: 5.5em; transform: rotate(-70deg) }
	70% { height: 6em; transform: rotate(-50deg) }
	80% { height: 5.5em; transform: rotate(-70deg) }
	90% { height: 6.5em; transform: rotate(-95deg) }
}
@keyframes leftLowerLeg {
	from, to { height: 6.75em; transform: rotate(24deg) }
	10% { height: 6em; transform: rotate(45deg) }
	20% { height: 4.75em; transform: rotate(85deg) }
	30% { height: 6.75em; transform: rotate(135deg) }
	40% { height: 6.25em; transform: rotate(132deg) }
	50% { height: 6.25em; transform: rotate(125deg) }
	60% { height: 5.75em; transform: rotate(110deg) }
	70% { height: 5.75em; transform: rotate(88deg) }
	80% { height: 6.75em; transform: rotate(45deg) }
	90% { height: 6em; transform: rotate(35deg) }
}
@keyframes rightFoot {
	from, to { transform: rotate(95deg) }
	10% { transform: rotate(150deg) }
	20% { transform: rotate(130deg) }
	30% { transform: rotate(95deg) }
	40% { transform: rotate(100deg) }
	50% { transform: rotate(110deg) }
	60% { transform: rotate(103deg) }
	70% { transform: rotate(70deg) }
	80% { transform: rotate(65deg) }
	90% { transform: rotate(80deg) }
}
@keyframes leftFoot {
	from, to { transform: rotate(-90deg) }
	10% { transform: rotate(-105deg) }
	20% { transform: rotate(-90deg) }
	30% { transform: rotate(-70deg) }
	40% { transform: rotate(-85deg) }
	50% { transform: rotate(-85deg) }
	60% { transform: rotate(-70deg) }
	70% { transform: rotate(-90deg) }
	80% { transform: rotate(-70deg) }
	90% { transform: rotate(-60deg) }
}

@media screen and (prefers-color-scheme: dark) {
	#troll-screen {
		background: #171717;
	}
	.troll__head div {
		background: #f1f1f1;
	}
}
/* ================= THÊM: CSS CHO PRELOADER VÀ NÚT KẾT THÚC ================= */
#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0b0914; z-index: 99999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease;
}

.heart-loader {
    font-size: 60px;
    animation: heartPulse 1s infinite;
    margin-bottom: 20px;
}

#preloader p {
    color: #ff9a9e; font-size: 16px; font-weight: 500; letter-spacing: 1px;
}

#troll-closure {
    position: absolute;
    bottom: 8%; left: 50%; transform: translateX(-50%);
    text-align: center; z-index: 100;
    width: 90%; max-width: 400px;
    animation: slideUp 0.8s ease-out;
}

#troll-closure h3 {
    color: #ff416c; font-size: 22px; margin-bottom: 20px;
    text-shadow: 0 2px 5px rgba(255,255,255,0.9);
}