/* island.css: the big island screen (D-022, D-032): full-screen stage, floating glass HUD + quest card, floating map button,
   camera tools, joystick, magic hand, island card, ghost blueprints, magic clouds, fun props, owl label.
   Talks to: app/index.html (#hud, #quest, #stage, footer, #joy, .cam-tools, #magicHand, #islandCard) and components/island/*.
   Update: sizes and colours come from styles/tokens.css. */
#stage { position: fixed; inset: 0; z-index: 1; }
/* still vignette: the screen edges darken softly so the eye rests on the middle (owner 24.10 13:28 realism pass) */
#stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 52%, transparent 62%, rgba(10, 30, 50, .28) 100%); }
body.drive-isle #stage::after { display: none; } /* Guy 28.10 01:31 (true colours): no vignette over his island art */
header#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: max(6px, env(safe-area-inset-top)) 12px 6px; /* compact top bar (owner 18:01): 44px row, 6px 12px */ background: none; border: 0; box-shadow: none; pointer-events: none; display: flex; flex-direction: column; gap: 5px; }
header#hud > * { pointer-events: auto; }
.hud-row { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.hud-row + .hud-row { margin-top: 0; }
.title-chip, .pill, .kids-btn, #quest, .glass-btn {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--sh-1); color: var(--ink);
}
.title-chip { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; padding: 0; justify-content: center; border-bottom: 1px solid var(--glass-line); }
.title-chip #titleText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pill { flex: 1 1 0; justify-content: center; height: 44px; box-shadow: 0 3px 0 rgba(36,28,74,.18), var(--sh-1); border-radius: var(--r-pill); padding: 0 12px 0 6px; font-family: var(--font-num); font-weight: 700; font-size: var(--t-lg); color: var(--ink); gap: 6px; border-bottom: 1px solid var(--glass-line); }
.pill .val { min-width: 1.4em; text-align: start; }
.kids-btn { width: 44px; height: 44px; border-radius: var(--r-btn); border-bottom: 1px solid var(--glass-line); }
#quest { width: 100%; min-height: 48px; margin-top: 2px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: var(--r-card); font: inherit; text-align: right; cursor: pointer; }
#quest:active { transform: scale(.98); }
#quest .q-ic { flex: 0 0 auto; }
#quest .q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* the goal shows in full: up to 2 lines, never cut with "..." */
#questText { font-size: var(--t-sm); line-height: 1.45; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.q-prog { display: flex; align-items: center; gap: 8px; }
.q-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(36,28,74,.14); overflow: hidden; }
.q-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); transition: width .6s var(--ease); }
#questCount { font-family: var(--font-num); font-weight: 700; font-size: var(--t-xs); color: var(--ink-2); direction: ltr; }
/* floating footer: one primary action (the map) */
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: none; padding: 0 var(--s3) calc(12px + env(safe-area-inset-bottom)); pointer-events: none; align-items: center; }
footer > * { pointer-events: auto; }
#mapBtn { max-width: 250px; min-height: 60px; border-radius: 20px; }
#mapBtn .t1 { font-size: var(--t-xl); } #mapBtn .t2 { font-size: var(--t-xs); opacity: .85; }
#custBtn { width: 56px; min-height: 56px; border-radius: 18px; font-size: 11px; }
/* camera tools + joystick */
.cam-tools { display: none; } /* owner 24.10 16:53: no zoom buttons on the island; pinch zoom and the follow camera stay */
.glass-btn { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; padding: 0; cursor: pointer; }
.glass-btn:active { transform: scale(.94); }
#joy { position: absolute; z-index: 4; left: var(--s4); bottom: calc(96px + env(safe-area-inset-bottom)); width: 104px; height: 104px; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0 45%, rgba(255,255,255,.38) 46% 100%); border: 1.5px solid var(--glass-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: var(--sh-1); }
#joy.active { background: radial-gradient(circle, rgba(255,255,255,.34) 0 45%, rgba(255,243,160,.5) 46% 100%); }
.joy-knob { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, #fff, #E9E2FF); box-shadow: 0 3px 0 #B9ACE8, var(--sh-1); pointer-events: none; transition: transform .08s; }
#joy.active .joy-knob { transition: none; }
/* owl: bottom-left above the joystick; label says what it does */
/* owner 24.10 16:53: on the island the help owl is one small corner button (bottom-right, just above the footer), no label strip */
body:not(:has(.screen.open)) .owl-btn { left: auto; right: var(--s2); top: auto; bottom: calc(env(safe-area-inset-bottom) + 86px); width: 44px; height: 44px; padding: 2px; }
body:not(:has(.screen.open)) .owl-btn svg { width: 38px; height: 38px; }
.owl-label { display: none !important; }
.owl-btn.in-game ~ .owl-label, .owl-label.hide { display: none; }
/* magic hand */
/* spec 179 2.2 (Guy 02.11): the giant yellow hand is gone; the same hint is a small guiding star (32 px) over the map button, its light fading in and out */
#magicHand { position: fixed; z-index: 30; width: 32px; height: 32px; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 8px #FFF3A0); }
#magicHand svg { width: 100%; height: 100%; display: block; }
#magicHand.show { opacity: 1; animation: handTap 1.1s var(--ease) infinite; }
#magicHand.calm.show { animation: none; }
@keyframes handTap { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
/* the island card (bottom sheet with grabber) */
#icScrim { position: fixed; inset: 0; z-index: 58; background: rgba(20,12,60,.42); }
#islandCard { position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; margin: 0 auto; max-width: 480px; background: var(--paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 6px var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); text-align: center; box-shadow: var(--sh-3); animation: sheetUp .32s var(--spring) both; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
#icScrim[hidden], #islandCard[hidden] { display: none; }
#icArt svg { width: 220px; height: 140px; display: block; margin: 0 auto; }
#icTitle { margin: 0; font-weight: normal; font-size: var(--t-xl); line-height: 1.6; }
#icText { margin: 0 0 var(--s3); font-size: var(--t-lg); line-height: 1.8; color: var(--ink-2); }
#icGo { width: 100%; min-height: 56px; font-size: var(--t-lg); }
#icGo[hidden] { display: none; }
/* the island V3 place popup's speaker (Guy 28.10 11:33 "אפשר גם לשמוע במידה לוחצים על הרמקול"): a round 52 px button at the card's top corner */
#icSpeak { position: absolute; top: 8px; left: 10px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #155E8C; border-bottom-width: 6px; background: radial-gradient(circle at 40% 35%, #7CCBFF, #2E8FD8); display: grid; place-items: center; cursor: pointer; }
#icSpeak:active { transform: translateY(2px); border-bottom-width: 3px; }
#icSpeak[hidden] { display: none; }
@media (max-height: 430px) { #islandCard.ic-place #icArt svg { height: 84px; } #islandCard.ic-place #icText { margin-bottom: var(--s2); } }
/* review finding 9 (a non-reader cannot read "סגירה"): a round X, 52 px, at the card's top corner (the speaker is at the other one) */
.ic-close { position: absolute; top: 8px; right: 10px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #7C2D12; border-bottom-width: 6px; background: radial-gradient(circle at 40% 35%, #FDBA74, #EA580C); display: grid; place-items: center; padding: 0; cursor: pointer; }
.ic-close:active { transform: translateY(2px); border-bottom-width: 3px; }
/* ghost blueprints, locks, magic clouds, fun */
.slot .ghost { opacity: .5; filter: saturate(.35) brightness(1.25); }
.locked-art { opacity: .78; filter: saturate(.4) brightness(1.12); }
.name-cap { pointer-events: auto; cursor: pointer; }
.lock-glow { animation: slotPulse 1.8s ease-in-out infinite; }
.sys { cursor: pointer; } .magic-cloud { animation: cloudBob 3.6s ease-in-out infinite; }
@keyframes cloudBob { 50% { transform: translateY(-4px); } }
.bob { animation: coinBob 1.6s ease-in-out infinite; } .fun-coin:nth-child(2n) .bob { animation-delay: -.8s; }
@keyframes coinBob { 50% { transform: translateY(-6px); } }
.shroom .cap { transform-box: fill-box; transform-origin: 50% 100%; }
.shroom.boing .cap { animation: boing .6s var(--spring); }
@keyframes boing { 30% { transform: scale(1.25, .7); } 60% { transform: scale(.9, 1.15); } }
.fly { animation: flyPath 9s ease-in-out infinite; } .fly.f1 { animation-duration: 11s; animation-delay: -3s; } .fly.f2 { animation-duration: 13s; animation-delay: -6s; }
@keyframes flyPath { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40px, -30px); } 50% { transform: translate(80px, 10px); } 75% { transform: translate(30px, 30px); } }
.flutter { transform-box: fill-box; transform-origin: center; animation: flutter .22s ease-in-out infinite alternate; }
@keyframes flutter { to { transform: scaleX(.35); } }
.boat-rock { transform-box: fill-box; transform-origin: 50% 100%; animation: boatRock 3s ease-in-out infinite; }
@keyframes boatRock { 50% { transform: rotate(4deg); } }
.cloud.cw1 { animation: driftW 70s linear infinite; } .cloud.cw2 { animation: driftW 95s linear infinite -30s; } .cloud.cw3 { animation: driftW 82s linear infinite -55s; } .cloud.cw4 { animation: driftW 110s linear infinite -80s; }
@keyframes driftW { from { transform: translateX(-200px); } to { transform: translateX(1300px); } }
.flow.slow { animation-duration: 3.2s; } .flow.fall { animation-duration: .7s; }
#islandBubble { z-index: 4; font-size: 12px; line-height: 1.5; padding: 2px 8px; max-width: 128px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .magic-cloud, .bob, .shroom.boing .cap, .fly, .flutter, .boat-rock, .cloud.cw1, .cloud.cw2, .cloud.cw3, .cloud.cw4, .lock-glow, #islandCard { animation: none !important; }
  .flow.fall, .flow.slow { animation: none; }
}
@media (max-width: 370px) { .pill { padding: 0 8px 0 4px; font-size: var(--t-md); } }
.q-say { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #8BDBFF, #1E9BD6); box-shadow: 0 3px 0 #135E8C, inset 0 2px 0 rgba(255,255,255,.5); }
#questText { font-weight: 700; font-family: 'Rubik', var(--font); }
/* D-037 §3: modals as a 3D magic chest card with a floating ribbon header */
#islandCard, #tierSheet, #chestCard { border: 4px solid #FFC93C; border-bottom-width: 8px; border-color: #FFD66B #E9A92A #C7780C;
  background: linear-gradient(180deg, #FFFDF5 0%, #FFF3D6 100%); box-shadow: 0 0 0 3px #6A4BF0, var(--sh-3), inset 0 2px 0 #fff; }
#islandCard { padding-top: 34px; margin-top: 30px; }
#islandCard .grab, #tierSheet .grab { display: none; }
#icTitle, #tierTitle { position: relative; display: block; margin: -58px auto var(--s2) !important; width: max-content; max-width: 92%; padding: 6px 26px; border-radius: 14px;
  color: #fff; font-weight: 700 !important; font-family: 'Rubik', var(--font); font-size: var(--t-lg) !important; line-height: 1.6 !important; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg, #9C86FF, #6A4BF0); box-shadow: 0 4px 0 #3F2AA8, var(--sh-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#icTitle::before, #icTitle::after, #tierTitle::before, #tierTitle::after { content: ''; position: absolute; top: 10px; width: 18px; height: 26px; background: #4B32C8; z-index: -1; }
#icTitle::before, #tierTitle::before { right: -10px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
#icTitle::after, #tierTitle::after { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
#tierSheet { padding-top: 34px; margin-top: 30px; overflow: visible; }
/* the star sheet's own way out (researcher video 25.10: the sheet covered the map's back button) */
.tier-x { position: absolute; top: 8px; left: 8px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 22px; background: #FF6FAE; color: #fff; font: 800 22px 'Rubik', sans-serif; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 #C23F7E; }
.tier-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #C23F7E; }
#tierList { max-height: calc(88dvh - 120px); overflow-y: auto; padding: 4px 2px 6px; }
#icArt { margin-top: var(--s1); background: radial-gradient(closest-side, rgba(255,243,160,.85), rgba(255,243,160,0)); }
#icArt svg { filter: drop-shadow(0 8px 10px rgba(36,28,74,.25)); }
/* family play button (D-038) */
.fam-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, #FFE07A, #FFB72B); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 4px 0 #C7780C, inset 0 2px 0 rgba(255,255,255,.55); }
.fam-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C7780C; }
/* the hangout screens (treehouse, live events, siblings) in one full-screen layer */
#hangoutLayer { position: fixed; inset: 0; z-index: 70; background: var(--paper); overflow: hidden; }
#hangoutLayer[hidden] { display: none; }
body:has(#hangoutLayer:not([hidden])) .owl-btn, body:has(#hangoutLayer:not([hidden])) .owl-label { display: none; }
.ev-pick { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s2); } .ev-pick .btn3d { max-width: none; width: 100%; }
/* D-041 (owner 24.10 11:46): the island and the map stand still; nothing in the background moves, bounces or pulses.
   Only the characters breathe, the tap marker answers a finger, a new building pops in once, a mushroom boings when
   stepped on, and the current map station's halo glows quietly (opacity only). Checked by tests/jitter_check.py.
   The island's wild critters (spec 204, components/island/island-v3-wild.js .v3-wild: sit / walk / fly / swim idles) are characters too: the owner
   27.10 18:49 wants the island alive with visible motion (newest wins), so they move; their own CSS calms them under reduced motion. */
#scene *:not([data-char], [data-char] *, [data-ambient], [data-ambient] *, .v3-wild *, #groundFx *, #pinLayer *, .popin, .shroom.boing .cap, .shimmer),
#mapSvg *:not([data-char], [data-char] *, .cur-glow) { animation: none !important; }
.cur-glow { animation: curGlow 2.6s ease-in-out infinite; }
@keyframes curGlow { 50% { opacity: .55; } }
.shimmer { animation: shimmer 3.2s ease-in-out infinite; } @keyframes shimmer { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .cur-glow, .shimmer { animation: none; } }
/* spec 88 §1.1 (Guy 31.10 13:25, video 02:48): the island card (the "open with a key" popup and its kin) in the hub's Dark Slate glass:
   #1e2631 at .92, white text, a fine cyan frame with a gold hairline, a gold-edged ribbon title and a chunky 3D green-gold button */
#islandCard { background: rgba(30,38,49,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1.5px solid rgba(56,189,248,.6); border-bottom-width: 0;
  box-shadow: 0 0 0 1px rgba(251,191,36,.45), 0 -12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); color: #F8FAFC; }
#icTitle { color: #FFFFFF; background: linear-gradient(180deg, #334155, #1e2631); border: 1.5px solid rgba(251,191,36,.8); box-shadow: 0 4px 0 #0B1220, 0 6px 14px rgba(0,0,0,.45); }
#icTitle::before, #icTitle::after { background: #92400E; }
#icText { color: #F1F5F9; }
#icArt { background: radial-gradient(closest-side, rgba(56,189,248,.26), rgba(56,189,248,0)); }
#icArt svg { filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
#icGo { color: #FFFFFF; text-shadow: 0 2px 0 rgba(20,83,45,.7); background: linear-gradient(180deg, #4ADE80 0%, #22C55E 45%, #15803D 100%);
  border: 2px solid #FBBF24; border-bottom: 6px solid #B45309; border-radius: 18px; box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45); }
#icGo:active { transform: translateY(4px); border-bottom-width: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45); }