/* ==========================================================
   OCEAN GUARDIAN LAB — WORLD STYLES
   A PLACE, not a dashboard. Designed for ages 7–12.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');

:root {
    --c-deep:    #021a33;
    --c-mid:     #0a3a66;
    --c-water:   #1267a8;
    --c-shallow: #36b6e8;
    --c-foam:    #bdefff;
    --c-sun:     #fff7c2;
    --c-coral:   #ff7a59;
    --c-coral2:  #ffd166;
    --c-sea:     #2fd6a6;
    --c-danger:  #ff5e7e;
    --c-white:   #f4fbff;

    --font-head: 'Baloo 2', system-ui, sans-serif;
    --font-body: 'Fredoka', system-ui, sans-serif;

    --shadow-soft: 0 10px 30px rgba(0, 20, 40, 0.35);
    --r-lg: 28px;
    --r-md: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    width: 100%; height: 100%; overflow: hidden;
    font-family: var(--font-body);
    color: var(--c-white);
    background: #000;
    user-select: none;
}

/* 16:9 aspect ratio wrapper */
#app {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #000;
    overflow: hidden;
}
#game-wrapper {
    position: relative;
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177.78vh;
    overflow: hidden;
    background: var(--c-deep);
}

/* ========================================================
   AMBIENT OCEAN — layered, animated, parallax
   ======================================================== */
#ocean-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(180deg,
        var(--c-shallow) 0%,
        var(--c-water) 28%,
        var(--c-mid) 62%,
        var(--c-deep) 100%);
}

/* sun shimmer at the surface */
.sun-shimmer {
    position: absolute; top: -20%; left: 50%; width: 80vw; height: 60vh;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255,247,194,0.45), transparent 60%);
    filter: blur(20px);
    animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{opacity:.6; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-48%) scale(1.08);} }

/* god rays */
.rays { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5; }
.rays span {
    position: absolute; top: -10%; width: 14vw; height: 130%;
    background: linear-gradient(180deg, rgba(189,239,255,.5), transparent 70%);
    transform-origin: top center; filter: blur(6px);
    animation: sway-ray 9s ease-in-out infinite;
}
.rays span:nth-child(1){ left: 8%;  transform: rotate(8deg);  animation-delay: 0s; }
.rays span:nth-child(2){ left: 28%; transform: rotate(-6deg); animation-delay: 1.5s; }
.rays span:nth-child(3){ left: 48%; transform: rotate(10deg); animation-delay: 3s; }
.rays span:nth-child(4){ left: 68%; transform: rotate(-9deg); animation-delay: 2s; }
.rays span:nth-child(5){ left: 86%; transform: rotate(6deg);  animation-delay: 4s; }
@keyframes sway-ray { 0%,100%{opacity:.25;} 50%{opacity:.7;} }

/* rising bubbles (JS-populated) */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble {
    position: absolute; bottom: -40px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(189,239,255,.2));
    box-shadow: inset 0 0 6px rgba(255,255,255,.5);
    animation: rise linear infinite;
}
@keyframes rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .6; }
    100% { transform: translateY(-105vh) translateX(20px); opacity: 0; }
}

/* drifting fish (JS-populated) */
.drift-fish { position: absolute; inset: 0; pointer-events: none; }
.dfish { position: absolute; font-size: 28px; opacity: .85; animation: drift-across linear infinite; will-change: transform; }
.dfish.flip { transform: scaleX(-1); }
@keyframes drift-across {
    from { transform: translateX(-12vw); }
    to   { transform: translateX(112vw); }
}

/* ocean floor */
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; }
.seaweed {
    position: absolute; bottom: 0; width: 16px; border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, var(--c-sea), #167a5e);
    transform-origin: bottom center; animation: sway 4s ease-in-out infinite;
}
.seaweed.s1 { left: 6%;  height: 16vh; animation-delay: 0s; }
.seaweed.s2 { left: 11%; height: 11vh; animation-delay: .8s; }
.seaweed.s3 { right: 9%; height: 14vh; animation-delay: .4s; }
.seaweed.s4 { right: 15%;height: 9vh;  animation-delay: 1.2s; }
@keyframes sway { 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }
.coral { position: absolute; bottom: 0; font-size: 52px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.coral.c1 { left: 18%; } .coral.c2 { right: 22%; font-size: 64px; }

/* ========================================================
   HUD
   ======================================================== */
.hud {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
}
.hud.hidden { display: none; }
.hud-btn {
    font-family: var(--font-head); font-weight: 700; font-size: 16px;
    color: var(--c-deep); background: rgba(255,255,255,.9);
    border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer;
    box-shadow: var(--shadow-soft); transition: transform .15s;
}
.hud-btn:active { transform: scale(.94); }
.health { display: flex; align-items: center; gap: 10px; background: rgba(2,26,51,.45); padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
.health-label { font-family: var(--font-head); font-weight: 700; font-size: 14px; }
.health-bar { width: 140px; height: 14px; background: rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.health-fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-sea), var(--c-shallow)); transition: width .6s ease, background .6s; }
.health-emoji { font-size: 22px; }

/* ========================================================
   WORLD STAGE + scene transitions
   ======================================================== */
#world { position: relative; z-index: 10; width: 100%; height: 100%; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.scene-in { animation: sceneIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(24px) scale(.98);} to { opacity:1; transform: none; } }

/* Big friendly buttons */
.big-btn {
    font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 3vw, 28px);
    color: #06324f; background: linear-gradient(180deg, #ffe79a, var(--c-coral2));
    border: none; border-radius: 999px; padding: 18px 44px; cursor: pointer;
    box-shadow: 0 12px 0 #d99a2b, var(--shadow-soft); transition: transform .1s, box-shadow .1s;
}
.big-btn:active { transform: translateY(8px); box-shadow: 0 4px 0 #d99a2b, var(--shadow-soft); }
.big-btn.pulse { animation: btnPulse 1.8s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

/* ========================================================
   SCENE: INTRO (cinematic)
   ======================================================== */
.intro-title {
    font-family: var(--font-head); font-weight: 800; line-height: .95;
    font-size: clamp(44px, 11vw, 110px);
    text-shadow: 0 6px 0 rgba(2,26,51,.35), 0 0 40px rgba(54,182,232,.6);
    letter-spacing: 1px;
}
.intro-title .ocean { color: #ffe79a; display: block; }
.intro-title .guardian { color: var(--c-foam); display: block; }
.intro-sub {
    font-family: var(--font-head); font-weight: 600; font-size: clamp(16px, 3vw, 24px);
    margin-top: 12px; color: #d7f3ff; max-width: 22ch;
}
.guardian-char {
    font-size: clamp(80px, 18vw, 160px); margin: 10px 0 6px;
    animation: floatChar 4s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35));
}
@keyframes floatChar { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-18px) rotate(2deg);} }
.intro-cta { margin-top: 26px; }

/* speech bubble */
.speech {
    position: relative; background: #fff; color: #06324f; border-radius: 22px;
    padding: 14px 20px; font-family: var(--font-head); font-weight: 700; font-size: clamp(15px,2.6vw,20px);
    max-width: 30ch; box-shadow: var(--shadow-soft); margin: 0 auto;
}
.speech::after { content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top-color: #fff; }

/* ========================================================
   SCENE: MAP (ocean zones)
   ======================================================== */
.map-head { position: absolute; top: 70px; left: 0; right: 0; }
.map-head h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px,5vw,44px); text-shadow: 0 4px 0 rgba(2,26,51,.3); }
.map-head p { font-family: var(--font-head); font-weight: 600; color: #d7f3ff; margin-top: 4px; }
.zones { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: stretch; max-width: 980px; margin-top: 40px; }
.zone {
    width: 210px; min-height: 240px; border-radius: var(--r-lg);
    background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px); cursor: pointer; padding: 22px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    box-shadow: var(--shadow-soft);
}
.zone:hover { transform: translateY(-8px) scale(1.03); border-color: var(--c-coral2); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.zone:active { transform: scale(.98); }
.zone .z-emoji { font-size: 72px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); animation: floatChar 5s ease-in-out infinite; }
.zone .z-name { font-family: var(--font-head); font-weight: 800; font-size: 22px; }
.zone .z-desc { font-size: 14px; color: #e6f7ff; line-height: 1.35; }
.zone .z-status { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; }
.zone.done { border-color: var(--c-sea); }
.zone.done .z-status { background: var(--c-sea); color: #06324f; }
.zone .z-status.todo { background: rgba(255,255,255,.25); color: #fff; }
.zone.done .z-emoji::after { content: ' ✅'; }

/* ========================================================
   SCENE: GEAR MINI-GAME (cause & effect)
   ======================================================== */
.mission-card {
    background: rgba(2,26,51,.5); backdrop-filter: blur(8px);
    border-radius: var(--r-lg); padding: 18px 22px; max-width: 640px; margin: 70px auto 0;
    box-shadow: var(--shadow-soft); border: 2px solid rgba(255,255,255,.18);
}
.mission-card h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px,3.4vw,30px); }
.mission-card .nelayan { font-size: 16px; color: #d7f3ff; margin-top: 6px; }
.gear-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 26px; max-width: 760px; }
.gear {
    width: 200px; border-radius: var(--r-md); padding: 18px 14px; cursor: pointer;
    background: #fff; color: #06324f; box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    border: 4px solid transparent; transition: transform .15s, border-color .15s;
}
.gear:hover { transform: translateY(-6px); }
.gear:active { transform: scale(.97); }
.gear.correct { border-color: var(--c-sea); animation: goodPick .5s; }
.gear.wrong { border-color: var(--c-danger); animation: badPick .4s; }
@keyframes goodPick { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
@keyframes badPick { 0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-10px);} 75%{ transform: translateX(10px);} }
.gear .g-emoji { font-size: 60px; }
.gear .g-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; text-align: center; }
.gear .g-hint { font-size: 13px; color: #3a6a86; text-align: center; line-height: 1.3; }

/* feedback overlay */
.feedback {
    position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    background: rgba(2,18,35,.6); backdrop-filter: blur(4px); animation: fadeIn .25s;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.feedback-box {
    background: #fff; color: #06324f; border-radius: var(--r-lg); padding: 30px 28px; max-width: 440px; text-align: center;
    box-shadow: var(--shadow-soft); animation: popIn .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes popIn { from{ transform: scale(.7); opacity: 0;} to{ transform: scale(1); opacity:1;} }
.feedback-box .fb-emoji { font-size: 74px; }
.feedback-box h3 { font-family: var(--font-head); font-weight: 800; font-size: 26px; margin: 8px 0; }
.feedback-box.good h3 { color: #128a63; }
.feedback-box.bad h3 { color: #d23b59; }
.feedback-box p { font-size: 17px; line-height: 1.45; color: #2c5670; }
.feedback-box .big-btn { margin-top: 18px; font-size: 20px; padding: 14px 34px; }

/* swimming-away fish anim inside feedback */
.escape { font-size: 40px; display: inline-block; animation: swimAway 1.2s ease-in forwards; }
@keyframes swimAway { from{ transform: translateX(0); opacity:1;} to{ transform: translateX(120px) scale(.6); opacity:0;} }

/* ========================================================
   SCENE: CELEBRATION
   ======================================================== */
.medal { font-size: clamp(90px, 20vw, 170px); animation: floatChar 3.5s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(0,0,0,.35)); }
.cele-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px,7vw,64px); color: #ffe79a; text-shadow: 0 5px 0 rgba(2,26,51,.3); }
.cele-text { font-family: var(--font-head); font-weight: 600; font-size: clamp(16px,3vw,22px); color: #eafaff; max-width: 26ch; margin-top: 10px; }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }

/* ========================================================
   DEVELOPER CREDIT + HUD RIGHT GROUP + ABOUT
   ======================================================== */
.hud-right { display: flex; align-items: center; gap: 10px; }

.credit {
    position: absolute; left: 0; right: 0; bottom: 18px;
    font-family: var(--font-head); font-weight: 600;
    font-size: clamp(12px, 2.4vw, 15px); line-height: 1.5;
    color: #cdeeff; text-shadow: 0 2px 6px rgba(0, 20, 40, 0.5);
    opacity: .9;
}
.credit b { color: #ffe79a; font-weight: 800; }

.about-dev {
    margin: 14px 0; padding: 14px 12px;
    background: linear-gradient(180deg, #eaf8ff, #d4f0ff);
    border-radius: var(--r-md); border: 2px dashed #36b6e8;
}
.about-label { font-size: 13px; color: #3a6a86; font-weight: 600; }
.about-name { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #06324f; margin: 2px 0 6px; }
.about-school { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #128a63; line-height: 1.4; }

/* ========================================================
   SCENE: PANDUAN (tutorial guide)
   ======================================================== */
.panduan-box {
    max-width: 640px; width: 100%; margin: 0 auto;
    background: rgba(2,26,51,.6); backdrop-filter: blur(10px);
    border-radius: var(--r-lg); padding: 28px 24px;
    border: 2px solid rgba(255,255,255,.15);
    box-shadow: var(--shadow-soft);
}
.panduan-step-icon { font-size: clamp(60px, 12vw, 100px); margin-bottom: 8px; }
.panduan-step-title {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(22px, 4vw, 32px); color: #ffe79a;
}
.panduan-step-text {
    font-family: var(--font-body); font-weight: 500;
    font-size: clamp(16px, 2.6vw, 20px); line-height: 1.5;
    color: #eafaff; margin: 12px auto; max-width: 36ch;
}
.panduan-dots {
    display: flex; gap: 8px; justify-content: center; margin: 16px 0 10px;
}
.panduan-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,.25); transition: background .3s, transform .3s;
}
.panduan-dot.active { background: var(--c-coral2); transform: scale(1.3); }
.panduan-nav { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }

/* ========================================================
   SCENE: DRAG & DROP (Pantai Bersih)
   ======================================================== */
.dd-scene { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 700px; margin: 0 auto; }
.dd-mission { background: rgba(2,26,51,.5); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 12px 18px; border: 2px solid rgba(255,255,255,.12); width: 100%; text-align: center; }
.dd-mission h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(16px,2.6vw,22px); }
.dd-mission p { font-size: clamp(13px,1.8vw,15px); color: #d7f3ff; margin-top: 4px; }
.dd-items { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 10px 0; min-height: 80px; }
.dd-item {
    width: 72px; height: 72px; border-radius: 16px;
    background: rgba(255,255,255,.92); color: #06324f;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 32px; cursor: grab; touch-action: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: transform .15s, opacity .2s; user-select: none;
}
.dd-item:active { transform: scale(.95); }
.dd-item.done { opacity: .25; pointer-events: none; }
.dd-clone {
    position: fixed; z-index: 100; pointer-events: none;
    width: 72px; height: 72px; border-radius: 16px;
    background: rgba(255,255,255,.95); color: #06324f;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 32px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transform: scale(1.12); opacity: .9; transition: none;
}
.dd-bins { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.dd-bin {
    width: 110px; min-height: 80px; border-radius: var(--r-md);
    background: rgba(255,255,255,.1); border: 3px dashed rgba(255,255,255,.3);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 6px; gap: 4px; transition: background .2s, border-color .2s, transform .15s;
    font-family: var(--font-head); font-weight: 700; font-size: 14px; text-align: center;
}
.dd-bin .bin-icon { font-size: 36px; }
.dd-bin.hover { background: rgba(255,255,255,.18); border-color: var(--c-coral2); transform: scale(1.04); }
.dd-bin.shake { animation: badPick .4s; }
.dd-counter {
    font-family: var(--font-head); font-weight: 700; font-size: 15px;
    background: rgba(2,26,51,.4); padding: 6px 16px; border-radius: 999px;
}

/* ========================================================
   SCENE: MATCHING (Pasangkan Ikan)
   ======================================================== */
.match-scene { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 700px; margin: 0 auto; }
.match-mission { background: rgba(2,26,51,.5); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 10px 16px; border: 2px solid rgba(255,255,255,.12); width: 100%; text-align: center; }
.match-mission h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(16px,2.6vw,22px); }
.match-grid { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; width: 100%; margin-top: 6px; }
.match-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; max-width: 260px; }
.match-card {
    padding: 12px 10px; border-radius: var(--r-md);
    background: rgba(255,255,255,.9); color: #06324f;
    font-family: var(--font-head); font-weight: 700; font-size: clamp(13px,2vw,16px);
    text-align: center; cursor: pointer; user-select: none;
    border: 3px solid transparent; transition: transform .15s, border-color .2s, background .2s, opacity .2s;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 50px;
}
.match-card:active { transform: scale(.96); }
.match-card.selected { border-color: var(--c-coral2); background: #fff7e6; transform: scale(1.04); }
.match-card.matched { border-color: var(--c-sea); background: #e6fff0; opacity: .7; pointer-events: none; }
.match-card.wrong { border-color: var(--c-danger); animation: badPick .4s; }
.match-card .mc-emoji { font-size: 24px; }

/* ========================================================
   SCENE: SEQUENCING (Rantai Makanan)
   ======================================================== */
.seq-scene { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 700px; margin: 0 auto; }
.seq-mission { background: rgba(2,26,51,.5); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 10px 16px; border: 2px solid rgba(255,255,255,.12); width: 100%; text-align: center; }
.seq-mission h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(16px,2.6vw,22px); }
.seq-mission p { font-size: clamp(13px,1.8vw,15px); color: #d7f3ff; margin-top: 4px; }
.seq-hint { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #ffd166; margin: 4px 0; }
.seq-grid {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    padding: 10px; background: rgba(255,255,255,.06); border-radius: var(--r-md);
    min-height: 80px; max-width: 400px; width: 100%;
}
.seq-item {
    width: 80px; height: 80px; border-radius: var(--r-md);
    background: rgba(255,255,255,.92); color: #06324f;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 32px; cursor: pointer; user-select: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    transition: transform .15s, opacity .25s, background .2s;
}
.seq-item:active { transform: scale(.92); }
.seq-item .seq-label { font-size: 10px; font-family: var(--font-head); font-weight: 700; margin-top: 2px; }
.seq-item.placed { opacity: .25; pointer-events: none; }
.seq-item.wrong { animation: badPick .4s; border-color: var(--c-danger); }
.seq-item.correct-hint { border-color: var(--c-sea); box-shadow: 0 0 16px rgba(47,214,166,.4); }
.seq-slots {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    width: 100%; max-width: 420px;
}
.seq-slot {
    position: relative; width: 80px; height: 80px; border-radius: var(--r-md);
    background: rgba(255,255,255,.08); border: 3px dashed rgba(255,255,255,.25);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 24px; transition: background .25s, border-color .25s, transform .2s;
}
.seq-slot .slot-num { position: absolute; top: -10px; left: -10px; font-family: var(--font-head); font-weight: 800; font-size: 14px; color: rgba(255,255,255,.4); }
.seq-slot.filled {
    background: rgba(47,214,166,.92); color: #06324f;
    border-color: var(--c-sea); font-size: 32px;
    animation: popIn .3s cubic-bezier(.2,.9,.3,1.3);
}
.seq-slot.filled .slot-num { color: rgba(6,50,79,.5); }
.seq-slot .seq-slot-label { font-size: 10px; font-family: var(--font-head); font-weight: 700; }
.seq-slot.filled .seq-slot-label { color: #06324f; }

/* ========================================================
   TURTLE CHARACTER (Tutu si Penyu Pemandu)
   ======================================================== */
.turtle-area {
    position: absolute; right: 12px; bottom: 50px; z-index: 25;
    display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.turtle-char {
    font-size: 48px; cursor: pointer; pointer-events: auto;
    animation: turtleFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));
    transition: transform .2s;
}
.turtle-char:active { transform: scale(.9); }
.turtle-char.hidden { display: none; }
@keyframes turtleFloat {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}
.turtle-speech {
    position: absolute; bottom: 60px; right: 0;
    background: #fff; color: #06324f; border-radius: 18px;
    padding: 10px 14px; max-width: 200px; min-width: 80px;
    font-family: var(--font-head); font-weight: 700; font-size: 13px;
    text-align: center; line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    animation: speechPop .3s cubic-bezier(.2,.9,.3,1.2);
    pointer-events: auto;
}
.turtle-speech::after {
    content: ''; position: absolute; bottom: -10px; right: 20px;
    border: 8px solid transparent; border-top-color: #fff;
}
@keyframes speechPop { from{ transform: scale(.6); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.turtle-speech.hidden { display: none; }

.hidden { display: none !important; }

@media (max-width: 520px) {
    .zone { width: 44%; min-height: 200px; }
    .gear { width: 44%; }
    .health-bar { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}