/* =============================================
   Robot — Home Robot Simulator
   Complete Game Styles v3
   ============================================= */
:root {
    --sky: #f3efe6;
    --wall: #eadfce;
    --floor: #b38c67;
    --floor-light: #986f52;
    --robot-blue: #4a9ade;
    --robot-dark: #2c6fa0;
    --accent: #2f7f74;
    --accent2: #b8860b;
    --danger: #b14f44;
    --text: #1f2430;
    --text-dim: #5d665f;
    --card-bg: rgba(255,253,247,0.96);
    --glass: rgba(255,253,247,0.88);
    --radius: 16px;
    --shadow: 0 18px 50px rgba(41, 36, 28, 0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:linear-gradient(180deg,#f5f0e7 0%,#efe7da 100%);color:var(--text);overflow:hidden;height:100vh;width:100vw;}
.screen{display:none;position:absolute;inset:0;}
.screen.active{display:flex;}

/* =============================================
   INTRO SCREEN
   ============================================= */
.intro-bg{width:100%;height:100%;background:linear-gradient(180deg,#f7f2e9 0%,#eee4d4 60%,#e4d6c2 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}

/* Animated particles in intro */
.intro-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(47,127,116,0.08),transparent 50%),radial-gradient(circle at 80% 20%,rgba(184,134,11,0.08),transparent 50%);pointer-events:none;}

/* Intro robot */
.intro-robot-wrap{position:relative;z-index:2;margin-bottom:20px;animation:floatBot 3s ease-in-out infinite;}
@keyframes floatBot{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---- ROBOT SVG ANIMATIONS ---- */
.robot-svg .robot-eye-svg{filter:drop-shadow(0 0 4px rgba(110,231,183,0.6));}
.robot-svg .eye-glow-ring{stroke:rgba(110,231,183,0.4);stroke-width:2;animation:svgEyeGlow 3s infinite;}
@keyframes svgEyeGlow{0%,100%{stroke-width:2;stroke:rgba(110,231,183,0.3);}50%{stroke-width:4;stroke:rgba(110,231,183,0.6);}}
.robot-svg .antenna-tip{animation:antennaBlink 2s infinite;filter:drop-shadow(0 0 6px rgba(110,231,183,0.6));}
@keyframes antennaBlink{0%,90%,100%{opacity:1;}95%{opacity:0.2;}}
.robot-svg .chest-core{animation:chestPulse 2s infinite;}
@keyframes chestPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(110,231,183,0.4));}50%{filter:drop-shadow(0 0 12px rgba(110,231,183,0.7));}}
.robot-svg .chest-glow{animation:chestGlowPulse 2s infinite;}
@keyframes chestGlowPulse{0%,100%{opacity:0.6;}50%{opacity:1;}}

/* Robot arm animations */
.robot-svg .arm-left-g{transform-origin:24px 46px;animation:svgArmSwing 2.5s ease-in-out infinite;}
.robot-svg .arm-right-g{transform-origin:76px 46px;animation:svgArmSwing 2.5s ease-in-out infinite reverse;}
@keyframes svgArmSwing{0%,100%{transform:rotate(0);}50%{transform:rotate(5deg);}}

/* Robot leg animations */
.robot-svg .leg-left-g{transform-origin:40px 98px;}
.robot-svg .leg-right-g{transform-origin:60px 98px;}

/* Robot states */
.robot-svg.cooking .arm-right-g{animation:svgArmStir 1s ease-in-out infinite;}
@keyframes svgArmStir{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}}
.robot-svg.cleaning .arm-right-g{animation:svgArmClean 0.8s ease-in-out infinite;}
@keyframes svgArmClean{0%,100%{transform:rotate(-15deg) translateX(-3px);}50%{transform:rotate(8deg) translateX(3px);}}
.robot-svg.walking .leg-left-g{animation:svgLegWalk 0.6s ease-in-out infinite;}
.robot-svg.walking .leg-right-g{animation:svgLegWalk 0.6s ease-in-out infinite 0.3s;}
@keyframes svgLegWalk{0%,100%{transform:rotate(0);}50%{transform:rotate(12deg);}}
.robot-svg.alarmed .robot-eye-svg{fill:var(--accent2);filter:drop-shadow(0 0 8px rgba(251,191,36,0.8));}
.robot-svg.alarmed .eye-glow-ring{stroke:rgba(251,191,36,0.5);animation:none;}
.robot-svg.alarmed .antenna-tip{fill:var(--danger);animation:alarmBlink 0.4s infinite;filter:drop-shadow(0 0 6px rgba(239,68,68,0.7));}
@keyframes alarmBlink{0%,100%{opacity:1;}50%{opacity:0;}}

/* Person SVG animations */
.person-svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));}
.person-svg .person-arm-left{transform-origin:15px 40px;animation:personArmIdle 3s ease-in-out infinite;}
.person-svg .person-arm-right{transform-origin:45px 40px;animation:personArmIdle 3s ease-in-out infinite 1.5s;}
@keyframes personArmIdle{0%,100%{transform:rotate(0);}50%{transform:rotate(3deg);}}

/* Intro content */
.intro-content{position:relative;z-index:3;text-align:center;}
.intro-content h1{font-family:'Space Grotesk',sans-serif;font-size:64px;letter-spacing:10px;margin-bottom:6px;}
.glow{color:var(--accent);text-shadow:0 0 24px rgba(47,127,116,0.18);}
.intro-tagline{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:var(--text);letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;line-height:1.05;}
.intro-desc{font-size:15px;color:var(--text-dim);line-height:1.7;max-width:500px;margin:0 auto 28px;}
.family-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;}
.family-chip{background:var(--glass);border:1px solid rgba(47,127,116,0.15);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;transition:0.3s;box-shadow:0 8px 20px rgba(41,36,28,0.08);}
.family-chip:hover{border-color:var(--accent);transform:translateY(-3px);}
.family-chip small{display:block;font-size:10px;color:var(--text-dim);font-weight:400;}
.chip-avatar{width:30px;height:55px;flex-shrink:0;}
.chip-avatar svg{width:100%;height:100%;}
.btn-play{background:#1f2430;color:#fff;border:none;padding:16px 48px;font-size:18px;font-weight:800;font-family:'Space Grotesk',sans-serif;border-radius:50px;cursor:pointer;letter-spacing:3px;display:flex;align-items:center;gap:10px;margin:0 auto;transition:0.3s;box-shadow:0 10px 24px rgba(41,36,28,0.16);}
.btn-play:hover{transform:scale(1.05);box-shadow:0 14px 34px rgba(41,36,28,0.2);}
.play-icon{font-size:14px;}
.intro-meta{margin-top:14px;font-size:12px;color:var(--text-dim);letter-spacing:2px;}

/* =============================================
   STORY INTRO SCREEN
   ============================================= */
.story-bg{width:100%;height:100%;background:linear-gradient(180deg,#f7f2e9 0%,#f1e8db 40%,#e7d9c5 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.story-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(47,127,116,0.06),transparent 60%);pointer-events:none;}
.story-content{text-align:center;max-width:600px;padding:40px;opacity:0;transform:translateY(30px);animation:storyFadeIn 1.2s ease forwards;}
@keyframes storyFadeIn{to{opacity:1;transform:translateY(0);}}
.story-chapter{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:12px;opacity:0;animation:storyItemIn 0.8s ease 0.3s forwards;}
.story-title{font-family:'Space Grotesk',sans-serif;font-size:36px;line-height:1.3;margin-bottom:20px;opacity:0;animation:storyItemIn 0.8s ease 0.6s forwards;}
.story-text{font-size:16px;color:var(--text-dim);line-height:1.8;margin-bottom:24px;opacity:0;animation:storyItemIn 0.8s ease 0.9s forwards;}
.story-time{font-size:14px;color:var(--accent2);letter-spacing:2px;opacity:0;animation:storyItemIn 0.8s ease 1.2s forwards;}
@keyframes storyItemIn{to{opacity:1;}}
.nav-controls{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0;animation:storyItemIn 0.8s ease 1.35s forwards;}
.nav-btn{background:rgba(255,253,247,0.9);border:1px solid rgba(47,127,116,0.18);color:var(--text);padding:11px 18px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:0.8px;cursor:pointer;transition:all 0.25s ease;box-shadow:0 8px 20px rgba(41,36,28,0.08);}
.nav-btn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);}
.nav-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;}
.nav-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.nav-btn-primary:hover{color:#fff;box-shadow:0 10px 24px rgba(47,127,116,0.2);}

/* =============================================
   GAME SCREEN — HUD
   ============================================= */
.hud{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:linear-gradient(180deg,rgba(247,242,233,0.96) 0%,rgba(247,242,233,0) 100%);pointer-events:none;}
.hud-scenario{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-weight:600;}
.hud-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;margin-top:2px;}
.hud-right{text-align:right;}
.hud-progress{width:160px;height:4px;background:rgba(31,36,48,0.12);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.hud-progress-fill{height:100%;background:var(--accent);transition:width 0.8s ease;width:0%;}
.hud-theme{font-size:11px;color:var(--accent2);text-transform:uppercase;letter-spacing:1.5px;font-weight:500;}

/* =============================================
   ROOM VIEWPORT — The main game view
   ============================================= */
.room-viewport{position:absolute;inset:0;overflow:hidden;}

/* Room backgrounds */
.room-bg{position:absolute;inset:0;transition:background 1.5s ease;}

/* KITCHEN */
.room-bg.kitchen{background:linear-gradient(180deg,#efe5d4 0%,#d9ccb6 55%,var(--floor) 55%,var(--floor-light) 100%);}
/* LIVING ROOM */
.room-bg.living{background:linear-gradient(180deg,#e8dcc9 0%,#d3c3a9 55%,var(--floor) 55%,var(--floor-light) 100%);}
/* BEDROOM */
.room-bg.bedroom{background:linear-gradient(180deg,#ece1cf 0%,#d7c5b0 55%,#b68d67 55%,#946c50 100%);}
/* HALLWAY NIGHT */
.room-bg.hallway-night{background:linear-gradient(180deg,#d8d6d1 0%,#beb8ad 55%,#8c7564 55%,#6c5545 100%);}
/* PARTY */
.room-bg.party{background:linear-gradient(180deg,#efe3d1 0%,#ddcdb8 55%,var(--floor) 55%,var(--floor-light) 100%);}
/* BATHROOM */
.room-bg.bathroom{background:linear-gradient(180deg,#e8e5de 0%,#cfc8bc 55%,#8d968f 55%,#727a74 100%);}
/* DINING */
.room-bg.dining{background:linear-gradient(180deg,#f0e5d2 0%,#d8cab7 55%,var(--floor) 55%,var(--floor-light) 100%);}
/* EVENING */
.room-bg.evening{background:linear-gradient(180deg,#e7d8c5 0%,#cfb69a 55%,#8b6a51 55%,#6f523e 100%);}

.room-furniture{position:absolute;inset:0;pointer-events:none;}
.room-characters{position:absolute;inset:0;pointer-events:none;}
.room-effects{position:absolute;inset:0;pointer-events:none;z-index:10;}

/* ---- FURNITURE ELEMENTS ---- */
.furn{position:absolute;border-radius:4px;}

/* Wall line */
.wall-line{position:absolute;left:0;right:0;top:55%;height:3px;background:rgba(31,36,48,0.08);}

/* Kitchen counter */
.counter{height:90px;background:#98a6a1;border-top:4px solid #dfe7df;bottom:45%;border-radius:6px 6px 0 0;}
.counter-top{position:absolute;top:-4px;left:-4px;right:-4px;height:8px;background:#eef3ef;border-radius:4px;}
/* Stove */
.stove{width:80px;height:50px;background:#6f736c;position:absolute;border-radius:6px;border:2px solid #8d9289;}
.stove-burner{width:22px;height:22px;border-radius:50%;border:3px solid #ef4444;position:absolute;box-shadow:0 0 10px rgba(239,68,68,0.4);animation:burnerGlow 2s infinite;}
@keyframes burnerGlow{0%,100%{box-shadow:0 0 10px rgba(239,68,68,0.4);}50%{box-shadow:0 0 20px rgba(239,68,68,0.7);}}
.pot{width:30px;height:20px;background:#a7aaa3;border-radius:4px 4px 0 0;position:absolute;border:2px solid #d5d7d2;}
.pot-steam{position:absolute;width:4px;height:12px;background:rgba(255,255,255,0.15);border-radius:2px;animation:steam 1.5s infinite;}
.pot-steam:nth-child(2){animation-delay:0.5s;left:8px;}
.pot-steam:nth-child(3){animation-delay:1s;left:16px;}
@keyframes steam{0%{opacity:0.8;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-20px) scale(1.5);}}
/* Fridge */
.fridge{width:55px;height:130px;background:#7e857e;border:2px solid #aab1a8;border-radius:6px;}
.fridge-handle{width:3px;height:20px;background:#e9ede6;border-radius:2px;position:absolute;right:6px;top:30px;}
/* Cabinet */
.cabinet{height:60px;background:#7d847a;border:2px solid #a2aa9d;border-radius:4px;}
/* Sofa */
.sofa{width:200px;height:65px;background:#9ca7a6;border-radius:12px 12px 6px 6px;border:2px solid #7f8987;}
.sofa-cushion{width:58px;height:30px;background:#b7c0bf;border-radius:8px;position:absolute;top:8px;}
.sofa-arm{width:20px;height:50px;background:#7f8987;border-radius:10px;position:absolute;top:8px;}
/* TV */
.tv{width:120px;height:70px;background:#4f534e;border:3px solid #6b7069;border-radius:6px;}
.tv-screen{position:absolute;inset:5px;background:linear-gradient(135deg,#7d9db5,#4d5d67);border-radius:3px;overflow:hidden;}
.tv-glow{position:absolute;inset:-10px;background:radial-gradient(ellipse,rgba(125,157,181,0.12),transparent);border-radius:50%;}
/* Window */
.window{width:80px;height:60px;background:linear-gradient(180deg,#d7e4ee 0%,#a9bfd0 100%);border:4px solid #f5f1ea;border-radius:6px;}
.window-frame{position:absolute;top:50%;left:0;right:0;height:3px;background:#f5f1ea;}
.window-frame-v{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#f5f1ea;}
/* Table */
.table{height:8px;background:#8b5e3c;border-radius:4px;}
.table-leg{width:6px;height:40px;background:#6b4226;position:absolute;bottom:-40px;}
/* Bed */
.bed{width:160px;height:50px;background:#d6d3cb;border-radius:8px;border:2px solid #b8b4ab;}
.pillow{width:35px;height:22px;background:#f2eee6;border-radius:6px;position:absolute;top:6px;}
.blanket{position:absolute;bottom:0;left:40px;right:0;height:30px;background:#b2bcb9;border-radius:0 0 6px 0;}
/* Bathroom items */
.bathtub{width:140px;height:50px;background:#ecf0ef;border-radius:0 0 20px 20px;border:3px solid #c5cec9;}
.toilet{width:40px;height:45px;background:#ecf0ef;border-radius:8px 8px 4px 4px;border:2px solid #c5cec9;}
.sink{width:50px;height:30px;background:#ecf0ef;border-radius:0 0 50% 50%;border:2px solid #c5cec9;border-top:none;}
/* Dining table */
.dining-table{width:220px;height:12px;background:#8b5e3c;border-radius:6px;}
/* Plates */
.plate{width:20px;height:20px;border-radius:50%;background:#e2e8f0;border:2px solid #cbd5e1;}
/* Lamp */
.lamp{width:6px;height:60px;background:#8b8a83;position:absolute;}
.lampshade{width:40px;height:20px;background:var(--accent2);border-radius:50% 50% 0 0;position:absolute;top:-20px;left:-17px;opacity:0.8;}
.lamp-glow{width:100px;height:100px;background:radial-gradient(ellipse,rgba(251,191,36,0.1),transparent);position:absolute;top:-60px;left:-47px;border-radius:50%;}
/* Bookshelf */
.bookshelf{width:60px;height:90px;background:#7f8987;border:2px solid #a5aeac;border-radius:4px;}
.book{width:8px;border-radius:1px;position:absolute;}
/* Door */
.room-door{width:55px;height:100px;background:#6d746a;border:3px solid #8f968f;border-radius:6px 6px 0 0;border-bottom:none;}
.door-knob{width:8px;height:8px;border-radius:50%;background:#efe8d9;position:absolute;right:8px;top:50%;}
/* Washing machine */
.washer{width:55px;height:60px;background:#ecf0ef;border:2px solid #c5cec9;border-radius:6px;}
.washer-door{width:30px;height:30px;border-radius:50%;background:#8b8a83;border:3px solid #cbd5ca;position:absolute;top:12px;left:50%;transform:translateX(-50%);}
/* Balloons */
.balloon{width:20px;height:26px;border-radius:50%;position:absolute;animation:balloonFloat 4s ease-in-out infinite;}
.balloon::after{content:'';width:1px;height:20px;background:rgba(255,255,255,0.3);position:absolute;bottom:-20px;left:50%;}
@keyframes balloonFloat{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(3deg);}}

/* ---- CHARACTERS IN SCENE ---- */
.person{position:absolute;transition:all 1.5s ease;z-index:5;}
.scene-robot{position:absolute;z-index:6;transition:all 1.5s ease;}
.char-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;animation:charRise 0.85s cubic-bezier(0.22,1,0.36,1) both;animation-delay:var(--char-delay,0s);}
.char-art{display:flex;align-items:flex-end;justify-content:center;animation:charBreathe 4s ease-in-out infinite;}
.scene-robot .char-art{animation:robotHover 3.4s ease-in-out infinite;}
.char-name{position:relative;z-index:24;padding:5px 10px;border-radius:999px;background:rgba(255,253,247,0.94);border:1px solid rgba(47,127,116,0.18);box-shadow:0 10px 22px rgba(41,36,28,0.12);font-size:11px;font-weight:700;letter-spacing:0.8px;color:var(--text);text-transform:uppercase;backdrop-filter:blur(6px);}
.scene-robot .char-name{background:rgba(47,127,116,0.12);border-color:rgba(47,127,116,0.28);color:var(--accent);}
.guest .char-name{background:rgba(184,134,11,0.12);border-color:rgba(184,134,11,0.28);color:#8b6200;}
@keyframes charRise{from{opacity:0;transform:translateY(22px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes charBreathe{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes robotHover{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.pulse-alert .char-name{animation:namePulse 1.4s ease-in-out infinite;}
@keyframes namePulse{0%,100%{box-shadow:0 10px 22px rgba(41,36,28,0.12);}50%{box-shadow:0 12px 28px rgba(177,79,68,0.22);}}

/* ---- SPEECH/THOUGHT BUBBLES ---- */
.bubble{position:absolute;background:rgba(255,253,247,0.96);color:#1f2430;padding:10px 14px;border-radius:14px;font-size:12px;line-height:1.4;max-width:200px;box-shadow:0 8px 20px rgba(41,36,28,0.16);z-index:18;animation:bubblePop 0.4s ease;border:1px solid rgba(47,127,116,0.12);}
.bubble::after{content:'';position:absolute;bottom:-6px;left:20px;width:12px;height:6px;background:rgba(255,255,255,0.95);clip-path:polygon(0 0,100% 0,50% 100%);}
.bubble-below::after{bottom:auto;top:-6px;clip-path:polygon(50% 0,0 100%,100% 100%);}
.bubble .speaker{display:block;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--robot-dark);margin-bottom:3px;}
@keyframes bubblePop{from{transform:scale(0.7);opacity:0;}to{transform:scale(1);opacity:1;}}

/* =============================================
   NARRATION BAR
   ============================================= */
.narration-bar{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(255,253,247,0.98) 0%,rgba(255,253,247,0.88) 70%,transparent 100%);padding:60px 40px 24px;z-index:15;opacity:0;transition:opacity 0.6s;pointer-events:none;}
.narration-bar.visible{opacity:1;}
.narration-text{max-width:700px;margin:0 auto;font-size:15px;line-height:1.7;color:var(--text);text-align:center;}
.phase-nav{position:absolute;right:24px;bottom:22px;display:flex;gap:10px;z-index:18;}

/* Typewriter cursor for narration */
.narration-text.typing::after{content:'|';animation:cursorBlink 0.8s step-end infinite;color:var(--accent);margin-left:2px;}
@keyframes cursorBlink{0%,100%{opacity:1;}50%{opacity:0;}}

/* =============================================
   EVENT POPUP — Dilemma Choices
   ============================================= */
.event-overlay{position:absolute;inset:0;background:rgba(41,36,28,0.32);z-index:60;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:fadeIn 0.4s ease;}
.event-overlay.visible{display:flex;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.event-popup{position:relative;background:var(--card-bg);border:1px solid rgba(47,127,116,0.18);border-radius:20px;padding:36px;max-width:560px;width:90%;box-shadow:var(--shadow);animation:popUp 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes popUp{from{transform:scale(0.8) translateY(40px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.overlay-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(31,36,48,0.08);color:var(--text);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;}
.overlay-close:hover{background:rgba(47,127,116,0.14);color:var(--accent);transform:scale(1.04);}

.event-icon{font-size:40px;text-align:center;margin-bottom:8px;}
.event-label{text-align:center;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--danger);font-weight:700;margin-bottom:12px;}
.event-title{font-family:'Space Grotesk',sans-serif;font-size:24px;text-align:center;margin-bottom:12px;line-height:1.3;}
.event-desc{font-size:14px;color:var(--text-dim);text-align:center;line-height:1.6;margin-bottom:24px;}

.event-choices{display:flex;flex-direction:column;gap:10px;}
.choice-btn{background:rgba(247,241,227,0.88);border:2px solid rgba(47,127,116,0.12);border-radius:14px;padding:16px 20px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:14px;text-align:left;box-shadow:0 8px 18px rgba(41,36,28,0.08);}
.choice-btn:hover{border-color:var(--accent);background:rgba(47,127,116,0.06);transform:translateX(6px);}
.choice-btn:active{transform:scale(0.98);}
.choice-letter{width:32px;height:32px;border-radius:50%;background:var(--robot-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:'Space Grotesk',sans-serif;flex-shrink:0;}
.choice-text{font-size:14px;color:var(--text);line-height:1.5;font-weight:500;}

/* =============================================
   CONSEQUENCE OVERLAY
   ============================================= */
.consequence-overlay{position:absolute;inset:0;background:rgba(41,36,28,0.36);z-index:60;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.consequence-overlay.visible{display:flex;animation:fadeIn 0.4s ease;}
.consequence-popup{position:relative;background:var(--card-bg);border:1px solid rgba(47,127,116,0.15);border-radius:20px;padding:32px;max-width:580px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow);animation:popUp 0.5s cubic-bezier(0.34,1.56,0.64,1);}
.consequence-header{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-bottom:16px;}
.consequence-body{font-size:15px;line-height:1.8;color:var(--text);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(31,36,48,0.08);}
.consequence-ethics{background:rgba(47,127,116,0.08);border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 12px 12px 0;margin-bottom:20px;}
.consequence-ethics h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--robot-blue);margin-bottom:6px;}
.consequence-ethics p{font-size:13px;line-height:1.7;color:var(--text-dim);}
.bias-tag{display:inline-block;padding:3px 10px;background:rgba(251,191,36,0.12);border-radius:10px;font-size:10px;font-weight:600;color:var(--accent2);margin-top:8px;margin-right:4px;}
.consequence-buttons{display:flex;gap:10px;flex-wrap:wrap;}
.btn-alt{background:transparent;border:2px solid #475569;color:var(--text-dim);padding:10px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;transition:0.3s;font-family:'Inter',sans-serif;}
.btn-alt:hover{border-color:var(--accent);color:var(--accent);}
.btn-continue{background:var(--accent);color:#fff;border:none;padding:10px 28px;border-radius:25px;font-size:13px;font-weight:700;cursor:pointer;transition:0.3s;font-family:'Space Grotesk',sans-serif;letter-spacing:1px;}
.btn-continue:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(47,127,116,0.18);}

/* =============================================
   ALTERNATIVES OVERLAY
   ============================================= */
.alt-overlay{position:absolute;inset:0;background:rgba(41,36,28,0.42);z-index:70;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.alt-overlay.visible{display:flex;animation:fadeIn 0.3s ease;}
.alt-popup{background:var(--card-bg);border:1px solid rgba(47,127,116,0.15);border-radius:20px;padding:32px;max-width:600px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow);}
.alt-popup h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:20px;color:var(--text);}
.alt-item{background:rgba(247,241,227,0.82);border-radius:14px;padding:16px;margin-bottom:12px;border-left:4px solid var(--robot-blue);}
.alt-item.selected{border-left-color:var(--accent);background:rgba(47,127,116,0.05);}
.alt-item-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.alt-item-letter{width:26px;height:26px;border-radius:50%;background:var(--robot-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
.alt-item-label{font-weight:600;font-size:14px;color:var(--text);}
.your-badge{padding:2px 8px;background:var(--accent);color:#fff;border-radius:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.alt-item-body{font-size:13px;color:var(--text-dim);line-height:1.6;}
.btn-alt-back{background:transparent;border:2px solid #475569;color:var(--text-dim);padding:10px 24px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;transition:0.3s;margin-top:8px;font-family:'Inter',sans-serif;}
.btn-alt-back:hover{border-color:var(--accent);color:var(--accent);}

/* =============================================
   ROOM EFFECTS
   ============================================= */
.screen-shake{animation:shake 0.5s ease-in-out;}
@keyframes shake{0%,100%{transform:translate(0);}10%{transform:translate(-4px,-2px);}20%{transform:translate(4px,2px);}30%{transform:translate(-4px,3px);}40%{transform:translate(4px,-2px);}50%{transform:translate(-2px,4px);}60%{transform:translate(2px,-3px);}70%{transform:translate(-3px,2px);}80%{transform:translate(3px,-2px);}90%{transform:translate(-1px,1px);}}
.flash-red{animation:flashRed 0.8s ease;}
@keyframes flashRed{0%{background:transparent;}15%{background:rgba(239,68,68,0.2);}100%{background:transparent;}}
.flash-yellow{animation:flashYellow 0.8s ease;}
@keyframes flashYellow{0%{background:transparent;}15%{background:rgba(251,191,36,0.15);}100%{background:transparent;}}
.system-card{position:absolute;max-width:250px;background:rgba(255,253,247,0.95);border:1px solid rgba(47,127,116,0.18);border-radius:16px;padding:14px 16px;box-shadow:0 14px 28px rgba(41,36,28,0.14);z-index:12;animation:popUp 0.55s ease;}
.system-card.warning{border-color:rgba(177,79,68,0.22);}
.system-card-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:var(--accent);margin-bottom:6px;}
.system-card.warning .system-card-label{color:var(--danger);}
.system-card-body{font-size:12px;line-height:1.55;color:var(--text);margin-bottom:6px;}
.system-card-meta{font-size:11px;line-height:1.45;color:var(--text-dim);}
.door-beam{position:absolute;right:14%;bottom:44%;width:84px;height:160px;background:linear-gradient(180deg,rgba(47,127,116,0.08),rgba(47,127,116,0.24),rgba(47,127,116,0.06));border-radius:20px;filter:blur(1px);z-index:4;animation:beamPulse 1.8s ease-in-out infinite;}
@keyframes beamPulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
.fire-plume{position:absolute;width:84px;height:84px;background:radial-gradient(circle,rgba(255,183,77,0.72) 0%,rgba(239,68,68,0.5) 45%,rgba(239,68,68,0) 72%);border-radius:50%;filter:blur(6px);animation:firePulse 0.9s ease-in-out infinite;z-index:8;}
@keyframes firePulse{0%,100%{transform:scale(0.96);opacity:0.7;}50%{transform:scale(1.08);opacity:1;}}
.split-alert{position:absolute;top:16%;padding:12px 16px;border-radius:14px;background:rgba(255,253,247,0.94);border:1px solid rgba(177,79,68,0.2);box-shadow:0 12px 24px rgba(41,36,28,0.14);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--danger);z-index:12;animation:popUp 0.55s ease;}
.split-alert.left{left:10%;}
.split-alert.right{right:10%;}
.time-indicator.danger{border-color:rgba(177,79,68,0.3);color:var(--danger);}
.danger-dot{background:var(--danger);animation:alarmBlink 0.7s infinite;}
.bath-ripple{position:absolute;left:50%;bottom:10px;width:74px;height:20px;border:2px solid rgba(92,170,192,0.45);border-radius:50%;transform:translateX(-50%);animation:bathRipple 2.4s ease-out infinite;}
.bath-ripple.r2{animation-delay:1.2s;}
@keyframes bathRipple{0%{opacity:0.85;transform:translateX(-50%) scale(0.72);}100%{opacity:0;transform:translateX(-50%) scale(1.18);}}
.bath-steam{position:absolute;width:18px;height:34px;background:radial-gradient(ellipse at center,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.08) 55%,rgba(255,255,255,0) 100%);filter:blur(2px);animation:bathSteam 2.6s ease-in-out infinite;}
.bath-steam.s2{animation-delay:0.9s;}
.bath-steam.s3{animation-delay:1.6s;}
@keyframes bathSteam{0%{opacity:0;transform:translateY(6px) scale(0.86);}25%{opacity:0.8;}100%{opacity:0;transform:translateY(-24px) scale(1.18);}}
.bath-silhouette{position:absolute;width:34px;height:64px;background:linear-gradient(180deg,rgba(102,96,90,0.16),rgba(102,96,90,0.32));border-radius:16px 16px 10px 10px;filter:blur(0.5px);animation:bathSilhouette 4.2s ease-in-out infinite;}
@keyframes bathSilhouette{0%,100%{opacity:0.65;transform:translateY(0);}50%{opacity:0.82;transform:translateY(-2px);}}
.play-card{position:absolute;font-size:18px;animation:toyDrift 2.8s ease-in-out infinite;opacity:0.8;}
.play-card.c2{animation-delay:0.9s;}
.play-card.c3{animation-delay:1.8s;}
@keyframes toyDrift{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-8px) rotate(6deg);}}
.chat-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(74,154,222,0.16) 0%,rgba(74,154,222,0.05) 45%,rgba(74,154,222,0) 72%);animation:chatPulse 2.2s ease-in-out infinite;z-index:4;}
@keyframes chatPulse{0%,100%{opacity:0.45;transform:scale(0.92);}50%{opacity:0.92;transform:scale(1.08);}}
.response-path{position:absolute;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(74,154,222,0.05),rgba(74,154,222,0.42),rgba(74,154,222,0.05));animation:pathPulse 1s ease-in-out infinite;z-index:7;}
@keyframes pathPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

/* Click to continue prompt */
#click-prompt{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(47,127,116,0.12);border:1px solid var(--accent);color:var(--accent);padding:12px 32px;border-radius:30px;font-size:15px;font-weight:600;letter-spacing:2px;z-index:20;animation:promptPulse 2s ease-in-out infinite;cursor:pointer;pointer-events:auto;backdrop-filter:blur(4px);}
@keyframes promptPulse{0%,100%{opacity:0.7;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.05);}}

/* Item animations */
.item-appear{animation:itemAppear 0.5s ease forwards;}
@keyframes itemAppear{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.item-float{animation:itemFloat 3s ease-in-out infinite;}
@keyframes itemFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* Clock/time indicator */
.time-indicator{position:absolute;top:70px;right:24px;background:var(--glass);border-radius:12px;padding:8px 14px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:6px;z-index:16;border:1px solid rgba(47,127,116,0.12);box-shadow:0 8px 20px rgba(41,36,28,0.1);}
.time-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}

/* Transition effects */
.scene-transition{animation:sceneTransition 0.8s ease;}
@keyframes sceneTransition{0%{opacity:0;filter:blur(8px);}100%{opacity:1;filter:blur(0);}}

/* =============================================
   SUMMARY SCREEN
   ============================================= */
#summary-screen{background:linear-gradient(180deg,#f5f0e7,#eee4d4);overflow-y:auto;}
.summary-wrap{max-width:700px;margin:0 auto;padding:50px 24px 80px;}
.summary-heading{font-family:'Space Grotesk',sans-serif;font-size:36px;color:var(--accent);text-align:center;margin-bottom:30px;}
.summary-choices-list{display:flex;flex-direction:column;gap:10px;margin-bottom:30px;}
.sc-card{background:var(--glass);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;border:1px solid rgba(47,127,116,0.12);}
.sc-num{width:30px;height:30px;border-radius:50%;background:var(--robot-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.sc-info h4{font-size:14px;margin-bottom:2px;}.sc-info p{font-size:12px;color:var(--text-dim);}.sc-info .sc-theme{font-size:10px;color:var(--accent2);text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:inline-block;}
.summary-bars{background:var(--glass);border-radius:16px;padding:28px;margin-bottom:24px;border:1px solid rgba(47,127,116,0.12);box-shadow:0 10px 24px rgba(41,36,28,0.08);}
.summary-bars h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:16px;color:var(--accent);}
.summary-bars>p{font-size:14px;color:var(--text-dim);line-height:1.7;margin-bottom:16px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;}
.bar-label{width:120px;color:var(--text-dim);text-align:right;flex-shrink:0;}
.bar-track{flex:1;height:6px;background:rgba(31,36,48,0.08);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;border-radius:3px;transition:width 1.2s ease;}
.bar-fill.f-safety{background:#b14f44;}.bar-fill.f-privacy{background:#4a9ade;}.bar-fill.f-autonomy{background:#2f7f74;}.bar-fill.f-transparency{background:#b8860b;}
.bar-val{width:35px;font-weight:600;font-size:12px;color:var(--text);}
.summary-reflection{background:var(--glass);border-radius:16px;padding:28px;border:1px solid rgba(47,127,116,0.12);box-shadow:0 10px 24px rgba(41,36,28,0.08);}
.summary-reflection h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:12px;}
.summary-reflection p{font-size:14px;color:var(--text-dim);line-height:1.7;margin-bottom:16px;}
.summary-reflection strong{color:var(--accent);}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.stat{background:rgba(247,241,227,0.9);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(47,127,116,0.12);}
.stat span{display:block;font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:var(--accent2);margin-bottom:6px;}
.stat{font-size:11px;color:var(--text-dim);line-height:1.5;}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:768px){
    .intro-content h1{font-size:42px;letter-spacing:6px;}
    .family-strip{gap:6px;}.family-chip{padding:8px 10px;font-size:11px;}
    .chip-avatar{width:24px;height:44px;}
    .event-popup,.consequence-popup,.alt-popup{padding:24px;}
    .event-title{font-size:20px;}
    .story-title{font-size:28px;}
    .story-text{font-size:14px;}
    .char-name{font-size:10px;padding:4px 8px;}
    .system-card{max-width:210px;}
    .phase-nav{right:14px;left:14px;bottom:16px;justify-content:space-between;}
}
@media(max-width:480px){
    .intro-content h1{font-size:32px;}
    .family-strip{flex-wrap:wrap;justify-content:center;}
    .family-chip small{display:none;}
    .btn-play{padding:14px 36px;font-size:15px;}
}