@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#082c50;--dark:#0e3d60;--ink:#153c58;--muted:#688399;--teal:#087f88;--sky:#14bed1;--mint:#def7f0;--line:#e0eaf0;--bg:#f2f8fc;--gold:#ffba34;--shadow:0 12px 38px rgba(37,105,138,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#eaf6fb,#f7fafc 420px);color:var(--ink);font-family:Cairo,Tahoma,Arial,sans-serif;font-size:15px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{text-decoration:none;color:inherit}.wrap{max-width:1200px;margin:auto;padding:0 22px}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #e6edf3}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:77px}.logo{display:flex;gap:11px;align-items:center;font-weight:900;font-size:16px;color:#092d54;white-space:nowrap;line-height:1.2}.logo b{color:var(--teal)}.logo small{display:block;letter-spacing:2px;font:600 9px Arial;color:#8aa0af;margin-top:5px}.logo-mark{width:43px;height:43px;border-radius:15px;background:#d7f7f1;display:grid;place-items:center;color:var(--teal);font-size:27px}
nav{display:flex;flex-wrap:wrap;gap:5px}nav a{padding:9px 15px;border-radius:11px;font-weight:800;font-size:13px;color:#486b80}nav a.active,nav a:hover{background:#e6f7f5;color:#087d86}.save-indicator{font-size:11px;color:var(--muted);white-space:nowrap}.save-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34ba88;margin-left:5px}
.hero{background:linear-gradient(118deg,#062c58 4%,#087e92 86%);color:white;border-radius:28px;min-height:297px;margin:31px 0 23px;padding:36px 43px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:0 19px 45px rgba(8,68,102,.15)}.hero:before{content:"";position:absolute;left:-80px;bottom:-160px;width:420px;height:420px;background:radial-gradient(circle,#22d1c96e,transparent 67%);border-radius:50%}.hero:after{content:"";position:absolute;right:30%;top:-160px;width:400px;height:400px;border-radius:50%;border:70px solid #ffffff08}.hero-text{position:relative;z-index:1;max-width:675px}.eyebrow{font:800 12px Arial;letter-spacing:2px;color:#96efef;text-transform:uppercase}.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.35;margin:12px 0 13px;font-weight:900}.hero p{font-size:16px;line-height:2;color:#d8f2f9;max-width:550px;margin:0 0 20px}.hero-art{position:relative;z-index:1;flex:0 0 230px;height:220px;display:grid;place-items:center}.hero-art:before{content:"";width:207px;height:207px;border-radius:55px;background:linear-gradient(145deg,#32cfd64a,#ffffff22);position:absolute;transform:rotate(15deg);border:2px solid #ffffff22}.hero-art span{font-size:104px;filter:drop-shadow(0 8px 8px #0003);transform:rotate(-7deg)}.hero-art i{position:absolute;font-size:37px;left:13px;top:20px;font-style:normal}.hero-art em{position:absolute;font-size:31px;right:12px;bottom:9px;font-style:normal}
.btn{border:0;border-radius:13px;padding:12px 22px;background:#087f88;color:#fff;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;box-shadow:0 5px 12px #087f8826}.btn:hover{filter:brightness(1.08)}.btn.light{background:white;color:#0d6575}.btn.subtle{background:#e9f4f8;color:#19586d;box-shadow:none}.btn.outline{border:2px solid #cbe4e9;color:#126c79;background:white;box-shadow:none}.btn.gold{background:#ffc84f;color:#2d4361}.btn.small{padding:8px 14px;font-size:13px;min-height:36px}.btn.danger{background:#fbe5e1;color:#9e3838;box-shadow:none}.btn-group{display:flex;gap:9px;flex-wrap:wrap}
.section{margin:32px 0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.section-title h2{font-size:25px;margin:0;color:var(--navy)}.section-title p{margin:0;color:var(--muted)}.top-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:25px}.stat{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.stat b{font-size:28px;color:var(--navy);display:block;line-height:1.4}.stat span{color:var(--muted);font-size:13px;font-weight:700}.stat .icon{font-size:27px;float:left}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:19px;min-width:0}.game-card{padding:0;overflow:hidden;transition:transform .15s,box-shadow .15s}.game-card:hover{transform:translateY(-3px);box-shadow:0 20px 30px #0c6b9e22}.game-cover{height:130px;display:flex;justify-content:space-between;padding:19px;align-items:center;position:relative;overflow:hidden}.game-cover:after{content:"";position:absolute;left:-22px;bottom:-40px;border-radius:50%;width:140px;height:140px;border:25px solid #ffffff44}.game-cover .emoji{font-size:76px;z-index:1;filter:drop-shadow(0 8px 4px #0001)}.game-cover .count{position:relative;z-index:1;align-self:flex-start;font:800 12px Arial;letter-spacing:1px;color:#244d65}.game-content{padding:16px 18px 19px}.game-content h3{margin:1px 0 5px;font-size:20px;color:#103456}.game-content p{color:var(--muted);margin:0 0 16px;font-size:13px;line-height:1.9;min-height:47px}.game-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.pill{font-size:11px;font-weight:800;border-radius:40px;padding:5px 11px;background:#eef6f9;color:#3d7186}.pill.done{color:#198455;background:#e0f7e8}
.band{padding:19px;background:#e9f8f5;border-radius:20px;border:1px solid #d2efea;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:23px}.band h3{margin:0 0 5px}.band p{color:#47838a;margin:0;font-size:13px}.age-select{display:flex;gap:7px}.age-select button{background:white;border:1px solid #c6e3df;padding:8px 14px;border-radius:11px;color:#3c7682;font-weight:800}.age-select button.active{background:var(--teal);color:white}
.notice{background:#f0f8fb;border:1px solid #d7e9f1;border-radius:16px;padding:15px 18px;margin:15px 0;line-height:1.9;color:#447087}.notice strong{color:#144d61}.crumb{color:var(--muted);font-size:13px;margin:27px 0 10px}.crumb a{color:var(--teal);font-weight:900}.game-header{background:linear-gradient(100deg,#07345a,#0f7894);color:white;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:25px 29px;border-radius:23px;margin-bottom:16px;overflow:hidden}.game-header h1{font-size:27px;margin:4px 0}.game-header p{margin:0;color:#cfedf2}.game-header .art{font-size:67px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:17px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:23px;padding:22px;box-shadow:var(--shadow);min-width:0}.panel h2{margin:0 0 13px;font-size:21px;color:#123d57}.panel h3{margin:12px 0;color:#0e5065}.panel p{line-height:1.9}.panel .muted{color:var(--muted)}.side-panel{background:#f9fcff}.tabs{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap}.tabs button{border:1px solid #d8e7ed;background:white;border-radius:10px;padding:9px 18px;color:#537589;font-weight:800}.tabs button.active{background:#087f88;color:white;border-color:#087f88}.math-question{text-align:center;font-size:clamp(30px,5vw,48px);color:#0a3b5d;font-weight:900;direction:ltr;margin:31px 0 24px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.choices button{border:2px solid #d6e8ed;background:white;border-radius:15px;padding:17px;font:900 23px Arial;color:#194567}.choices button:hover:not(:disabled){border-color:#20a6b0;background:#e8faf6}.choices button.correct{background:#dbf7e7;color:#177348;border-color:#48bf83}.choices button.wrong{background:#fff0f0;color:#b34b4b;border-color:#e8a3a3}
.progress-track{background:#e2edf1;height:9px;overflow:hidden;border-radius:99px}.progress-track div{height:100%;background:linear-gradient(90deg,#17b9cc,#5ccb84);border-radius:99px;transition:width .2s}.flexline{display:flex;justify-content:space-between;align-items:center;gap:12px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.field{display:block;margin:8px 0 14px}.field span{display:block;margin-bottom:7px;color:#567689;font-weight:800;font-size:13px}.field input,.field select,.field textarea{width:100%;border:1px solid #cfdfe7;padding:11px 13px;border-radius:11px;background:white;color:#153b52;outline:0}.field textarea{min-height:95px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0ba3a4;box-shadow:0 0 0 3px #0aa2a41d}.feedback{border-radius:13px;padding:12px 16px;background:#eef8f9;color:#226478;margin:14px 0;font-weight:800}.feedback.good{background:#e4f8e9;color:#1d754b}.feedback.bad{background:#fff2e8;color:#ac593c}
.maze-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(100%,468px);aspect-ratio:1;margin:15px auto;border:7px solid #e6edf1;border-radius:14px;overflow:hidden;direction:ltr;background:#e6edf1;gap:2px}.maze-board button{border:0;border-radius:3px;min-width:0;padding:0;background:#ecf7e2;font-size:clamp(12px,2vw,23px);display:grid;place-items:center}.maze-board button.wall{background:#334d67}.maze-board button.goal{background:#ffdc83}.maze-board button.coin{background:#b1e4a5}.maze-board button.player{background:#b8f1eb;box-shadow:inset 0 0 0 2px #17b4bb}.maze-board button:focus-visible{outline:3px solid orange;outline-offset:-3px}.maze-controls{display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr;flex-wrap:wrap}.maze-controls button{min-width:47px;min-height:45px;background:#e8f5f8;border:1px solid #cde5ea;border-radius:11px;font-size:22px;color:#145a6b}.maze-controls button:hover{background:#bde8e9}
.story-image{background:linear-gradient(140deg,#d2edff,#e6f9e9);height:245px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:110px;margin:10px 0}.story-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.story-actions button{border:1px solid #cde5ec;background:#f3fafd;border-radius:14px;padding:15px;color:#12657a;font-weight:900}
.detective-board{background:#eabf91;border-radius:17px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.clue{background:#fff9dd;min-height:110px;box-shadow:0 5px 9px #694c3244;border-radius:4px;padding:13px;text-align:center;font-weight:800;display:grid;align-content:center;gap:5px;transform:rotate(-2deg)}.clue:nth-child(2){transform:rotate(2deg);background:#e9f3fa}.clue:nth-child(3){transform:rotate(1deg);background:#edfae8}.clue:nth-child(4){transform:rotate(-1deg);background:#fff}.clue i{font-size:31px;font-style:normal}.suspects{display:grid;gap:10px}.suspects button{background:white;border:2px solid #dbe8f0;border-radius:12px;text-align:right;padding:12px 14px;color:#284e66;font-weight:800}.suspects button.active{border-color:#0a9a9b;background:#e7f8f5}
.city-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;gap:3px;padding:8px;background:#a4cf9f;border-radius:16px}.city-board button{border:0;background:#ddf4cb;border-radius:6px;font-size:clamp(14px,2.5vw,29px);display:grid;place-items:center;padding:0;min-width:0}.city-board button:hover{outline:2px solid #fff}.city-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.city-tools button{border:2px solid #dde8ef;background:white;border-radius:12px;min-height:76px;padding:8px 2px;display:grid;place-items:center;font-weight:800;color:#315970;font-size:11px}.city-tools button b{font-size:27px}.city-tools button.active{border-color:#0d9298;background:#e2f8f4}.meters{display:grid;gap:13px}.meter-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800}.meter-top b{font-size:14px}.meter{background:#e6f0f2;height:9px;border-radius:60px;overflow:hidden;margin-top:6px}.meter div{height:100%;background:linear-gradient(90deg,#21b4d4,#5cd587);border-radius:60px}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mission-card{background:white;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;gap:13px;align-items:start}.mission-card input{width:19px;height:19px;accent-color:#07888e;margin-top:6px}.mission-card h3{margin:0 0 7px}.mission-card p{margin:0;color:#658296;line-height:1.7}.prompt-card{padding:20px;display:flex;flex-direction:column;gap:12px}.prompt-card h3{margin:0}.prompt-card p{line-height:1.9;color:#516e82;margin:0;flex:1}.footer{border-top:1px solid #dcebf0;margin-top:50px;padding-top:20px;padding-bottom:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#7a92a3;font-size:12px}.footer span{margin:0 6px}
#toast{position:fixed;z-index:99;bottom:26px;left:25px;background:#133f57;color:#fff;padding:12px 18px;border-radius:13px;box-shadow:0 12px 23px #12435b55;opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.play-layout{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.save-indicator{display:none}}
@media(max-width:670px){.wrap{padding:0 13px}.header-inner{flex-wrap:wrap;gap:6px;padding-top:9px;padding-bottom:8px}.header nav{order:2;flex-basis:100%;justify-content:space-between}.header nav a{font-size:11px;padding:6px}.logo{font-size:13px}.logo small{font-size:8px}.hero{margin:15px 0;padding:25px 20px;min-height:unset}.hero-art{display:none}.hero p{font-size:13px}.top-stats{gap:7px}.stat{padding:12px;border-radius:12px}.stat b{font-size:22px}.stat span{font-size:10px}.stat .icon{font-size:18px}.cards,.check-grid{grid-template-columns:1fr}.game-cover{height:110px}.section-title h2{font-size:21px}.panel{padding:15px}.game-header{padding:17px}.game-header h1{font-size:22px}.game-header .art{font-size:52px}.form-grid{grid-template-columns:1fr}.story-actions{grid-template-columns:1fr}.maze-board{gap:1px}.city-tools{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* V1.3: Maze touch controls, responsive layout, and accessible pieces */
.maze-board{width:min(100%,560px);border-radius:20px;gap:3px;border-width:8px;box-shadow:0 10px 28px #123e5e14}
.maze-board button{position:relative;min-height:0;aspect-ratio:1;touch-action:manipulation;transition:background-color .12s;font-size:clamp(16px,2.3vw,27px)}
.maze-board button.floor{background:#e9f5dd}
.maze-board button.start{background:#c1efe1;box-shadow:inset 0 0 0 2px #39b7a6}
.maze-board button.wall{background:#284562}
.maze-board button.coin{background:#bbebaa;color:#f3ae12;text-shadow:0 2px 2px #815c1544}
.maze-board button.goal{background:#ffe29a}
.maze-board button:hover{filter:brightness(.95)}
.maze-board button:focus-visible{outline:3px solid #13a3ac;outline-offset:-3px}
.maze-board button[aria-current]{box-shadow:inset 0 0 0 3px #19a2bd}
.maze-toolbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 17px}
.maze-toolbox button{background:white;border:2px solid #dceaf0;border-radius:12px;min-height:52px;color:#1e566a;font-weight:800}
.maze-toolbox button.active{border-color:#0a9299;background:#ddf8f3;box-shadow:0 4px 14px #0c8e9820}
.maze-status{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;font-weight:900;margin:13px 0 3px}
.maze-status span{border:1px solid #d7e9ee;border-radius:9px;padding:8px 16px;background:#f4fafc}
.maze-hint{text-align:center;font-size:13px;margin:7px 0 12px}
.maze-actions{margin-top:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.maze-controls button{min-height:52px;min-width:55px}
.play-layout,.panel,.game-header{min-width:0}
@media(max-width:1000px){.play-layout{grid-template-columns:minmax(0,1fr)}.maze-board{width:min(100%,540px)}}
@media(max-width:670px){.maze-board{gap:2px;border-width:5px;width:min(100%,450px)}.maze-board button{font-size:clamp(15px,4.3vw,24px)}.maze-toolbox{grid-template-columns:repeat(2,1fr)}}