/* Tiểu Đệ's island home (src/web/island-scene.ts). The picture keeps its
   3:2 shape, so every place is a fixed percentage of it: Tiểu Đệ is moved
   there by the scene class on <body> (scene-desk, scene-video, …), shown in
   the AI-painted pose for that work, and .night darkens the same picture and
   lights its lamps. Only the pose on screen is downloaded (CSS backgrounds). */
.island {
	--bed-x: 15%; --bed-y: 47%;
	--desk-x: 34%; --desk-y: 40%;
	--video-x: 46.5%; --video-y: 36%;
	--paint-x: 59%; --paint-y: 37%;
	--hammock-x: 75%; --hammock-y: 49%;
	--beach-x: 80%; --beach-y: 22%;
	--think-x: 38%; --think-y: 27%;
	position: relative;
	aspect-ratio: 3 / 2;
	width: 100%;
	margin-top: 8px;
	overflow: hidden;
	isolation: isolate;
	background: #2a1650 url("/static/island-day.webp") center / cover no-repeat;
}
@media (max-width: 760px) {
	.island { background-image: url("/static/island-day-900.webp"); }
}

/* Night: the same island under a dark sky, its lights glowing */
.island-night { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; pointer-events: none; z-index: 1; }
.night .island-night { opacity: 1; }
.island-night::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 40, 0.82) 0%, rgba(20, 18, 70, 0.62) 30%, rgba(14, 22, 64, 0.55) 100%); mix-blend-mode: multiply; }
.island-night::after {
	content: "";
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	background:
		radial-gradient(circle at 13% 33%, rgba(255, 210, 120, 0.55), transparent 9%),
		radial-gradient(circle at 31% 36%, rgba(255, 200, 110, 0.5), transparent 7%),
		radial-gradient(circle at 48.5% 36%, rgba(255, 255, 230, 0.55), transparent 6%),
		radial-gradient(circle at 63% 42%, rgba(255, 210, 130, 0.45), transparent 8%),
		radial-gradient(circle at 88% 45%, rgba(255, 210, 130, 0.4), transparent 7%),
		radial-gradient(circle at 10% 64%, rgba(255, 200, 110, 0.35), transparent 5%);
	animation: lights 3.6s ease-in-out infinite;
}
@keyframes lights { 50% { opacity: 0.8; } }
.isl-moon { position: absolute; top: 7%; left: 44%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #c7c2f0); box-shadow: 0 0 40px rgba(199, 194, 240, 0.8); z-index: 1; }
.isl-stars { position: absolute; inset: 0 0 72% 0; background-image: radial-gradient(1.5px 1.5px at 8% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 12%, #fff, transparent), radial-gradient(1px 1px at 35% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 18%, #fff, transparent), radial-gradient(1px 1px at 70% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 10%, #fff, transparent), radial-gradient(1px 1px at 93% 38%, #fff, transparent); animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.5; } }

/* Tiểu Đệ walks between places (x from the left, y from the bottom of the picture) */
.actor { position: absolute; left: var(--desk-x); bottom: var(--desk-y); width: 10%; transform: translateX(-50%); transition: left 1.6s cubic-bezier(0.45, 0, 0.25, 1), bottom 1.6s cubic-bezier(0.45, 0, 0.25, 1), width 0.4s; z-index: 2; }
.scene-sleep .actor { left: var(--bed-x); bottom: var(--bed-y); width: 14%; }
.scene-desk .actor, .scene-help .actor { left: var(--desk-x); bottom: var(--desk-y); }
.scene-video .actor { left: var(--video-x); bottom: var(--video-y); }
.scene-paint .actor { left: var(--paint-x); bottom: var(--paint-y); }
.scene-rest .actor { left: var(--hammock-x); bottom: var(--hammock-y); width: 14%; }
.scene-promote .actor { left: var(--beach-x); bottom: var(--beach-y); }
.scene-think .actor { left: var(--think-x); bottom: var(--think-y); }

.robot-tap { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.robot-tap:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 20px; }
.sprite { display: block; width: 100%; aspect-ratio: 4 / 5; background: url("/static/robot/stand.webp") center bottom / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(40, 10, 60, 0.45)); transform-origin: center bottom; animation: breathe 3.2s ease-in-out infinite; }
.scene-desk .sprite { background-image: url("/static/robot/desk.webp"); }
.scene-think .sprite { background-image: url("/static/robot/think.webp"); }
.scene-video .sprite { background-image: url("/static/robot/video.webp"); }
.scene-paint .sprite { background-image: url("/static/robot/paint.webp"); }
.scene-promote .sprite { background-image: url("/static/robot/promote.webp"); }
.scene-help .sprite { background-image: url("/static/robot/help.webp"); }
.scene-sleep .sprite { background-image: url("/static/robot/sleep.webp"); aspect-ratio: 2 / 1; animation-duration: 5s; }
.scene-rest .sprite { background-image: url("/static/robot/rest.webp"); aspect-ratio: 2 / 1; animation: hammock 4.5s ease-in-out infinite; transform-origin: center; }
/* While walking to a new place: the walking pose, a bouncy step */
.walking .sprite { background-image: url("/static/robot/walk.webp"); aspect-ratio: 4 / 5; animation: hop 0.36s ease-in-out infinite alternate; }
.walking .actor { width: 10%; }
/* A very weak wallet shows in the colour */
.status-thoi_thop .sprite { filter: saturate(0.5) drop-shadow(0 8px 10px rgba(40, 10, 60, 0.45)); }
.status-chet_lam_sang .sprite { filter: grayscale(0.9) drop-shadow(0 8px 10px rgba(40, 10, 60, 0.45)); animation: none; }
.scene-promote .actor { animation: stroll 6s ease-in-out infinite alternate; }
@keyframes breathe { 50% { transform: scale(1.02, 0.985); } }
@keyframes hammock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes hop { to { transform: translateY(-6%); } }
@keyframes stroll { to { margin-left: 4%; } }

/* Speech bubble above the head, never over Tiểu Đệ */
.bubble { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: min(300px, 62vw); padding: 10px 14px; border-radius: 16px; background: rgba(13, 11, 31, 0.9); border: 1px solid rgba(124, 247, 255, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(13, 11, 31, 0.9); }
.bubble code { display: block; color: var(--lime); font: 600 13px/1.45 ui-monospace, "JetBrains Mono", Consolas, monospace; white-space: pre-wrap; }
.bubble code::after { content: "▋"; animation: caret 1s steps(1) infinite; }
.scene-promote .bubble, .scene-rest .bubble { left: auto; right: 0; transform: none; }
.scene-promote .bubble::after, .scene-rest .bubble::after { left: auto; right: 24px; }
.scene-sleep .bubble { left: 0; transform: none; }
.scene-sleep .bubble::after { left: 24px; }

/* Tap: a happy jump */
.boing .sprite { animation: boing 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes boing { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(4%) scale(1.08, 0.9); } 55% { transform: translateY(-28%) scale(0.95, 1.06); } 100% { transform: translateY(0) scale(1, 1); } }

@media (max-width: 520px) {
	.actor, .walking .actor { width: 13%; }
	.scene-sleep .actor, .scene-rest .actor { width: 18%; }
	.bubble { padding: 6px 10px; max-width: 58vw; }
	.bubble code { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.actor { transition: none; }
	.island-night::after, .isl-stars, .actor, .sprite { animation: none !important; }
}