:root{--red:#b51f2e;--red2:#df3a2f;--navy:#12263f;--cream:#fff8ec;--paper:#fffdf8;--ink:#2a211c;--muted:#756b64;--line:#eadfd3;--gold:#f6b93b;--green:#2f9e63;--blue:#2877c7;--shadow:0 18px 45px rgba(65,42,25,.10);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 10% 0,#fff4cf 0 16%,transparent 34%),#fffaf1;color:var(--ink);padding-bottom:98px}button,input,select{font:inherit}button,a{touch-action:manipulation}a{text-decoration:none;color:inherit}button{color:inherit}.app-top{position:sticky;top:0;z-index:40;height:84px;background:rgba(255,251,244,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px clamp(14px,3vw,48px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:56px;height:56px;border-radius:18px;border:2px solid #f3c4ab;background:#fff6ed;display:grid;place-items:center;font-size:30px}.brand strong,.brand small{display:block}.brand strong{font-size:20px;line-height:1}.brand small{font-size:12px;margin-top:3px;color:#5f534b}.status-row{display:flex;align-items:center;gap:9px}.profile-chip,.pill,.icon-btn{height:50px;border:1px solid var(--line);background:#fff;border-radius:17px;display:flex;align-items:center;gap:9px;padding:0 13px}.profile-chip{cursor:pointer}.profile-chip span:first-child{font-size:25px}.profile-chip b,.profile-chip small{display:block}.profile-chip small{font-size:10px;color:var(--muted)}.pill{font-weight:900}.pill.xp{background:#fff8d8}.icon-btn{width:50px;justify-content:center;font-size:20px;cursor:pointer;padding:0}.page{width:min(1220px,calc(100% - 28px));margin:auto;padding:28px 0 34px}.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:45;width:min(890px,calc(100% - 26px));height:76px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 45px rgba(60,42,30,.16);display:grid;grid-template-columns:repeat(5,1fr);padding:6px}.nav-link{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border-radius:20px;color:#776b63;font-weight:850;font-size:11px}.nav-link span{font-size:22px}.nav-link.active{background:#ffe8dc;color:var(--red)}.hero{border-radius:34px;padding:42px;background:linear-gradient(125deg,#a71e2a,#d94131 62%,#f18c3b);color:#fff;box-shadow:var(--shadow);display:grid;grid-template-columns:1.25fr .75fr;gap:28px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.08);right:-120px;top:-170px}.hero h1{font-size:clamp(40px,6vw,76px);letter-spacing:-3px;line-height:.95;margin:9px 0 16px}.hero p{max-width:720px;line-height:1.6;color:#fff5ef}.eyebrow,.kicker{font-size:11px;letter-spacing:1.5px;font-weight:950}.hero-art{min-height:280px;display:grid;place-items:center;position:relative}.hero-art .truck{font-size:130px;filter:drop-shadow(0 20px 15px rgba(0,0,0,.18));animation:float 3s ease-in-out infinite}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:13px 17px;font-weight:900;cursor:pointer}.btn-primary{background:var(--red);color:#fff}.hero .btn-primary{background:#fff;color:var(--red)}.btn-secondary{background:#fff;border:1px solid var(--line)}.btn-gold{background:var(--gold);color:#3b2b09}.btn-danger{background:#b72d2d;color:#fff}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.hero .btn-row{margin-top:20px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:13px}.stat b,.stat small{display:block}.stat b{font-size:20px}.stat small{opacity:.8}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:28px 0 14px}.section-head h2{margin:3px 0 0;font-size:30px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:19px;box-shadow:0 8px 24px rgba(60,42,30,.04)}.mission-card{display:block;transition:.18s transform,.18s box-shadow}.mission-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.mission-card.done{border-color:#9dd7b2;background:#f5fff7}.mission-card .art{font-size:58px;margin:14px 0}.mission-card h3{margin:4px 0 7px}.mission-card p{margin:0;color:var(--muted);line-height:1.45;min-height:44px}.mission-meta{display:flex;justify-content:space-between;gap:8px;margin-top:15px;font-size:11px;font-weight:900;color:#7a6d65}.zone{background:#fff0e6;border-radius:999px;padding:5px 8px;color:#a64228}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;text-align:left}.quick-card span{font-size:40px}.quick-card b,.quick-card small{display:block}.quick-card small{color:var(--muted);margin-top:4px}.page-hero{border-radius:30px;padding:30px;background:linear-gradient(120deg,#17365e,#2467a4);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}.page-hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2px;margin:7px 0}.page-hero p{margin:0;color:#e9f3ff}.progress{height:11px;background:#efe7df;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#f7b633,#e4542b);border-radius:inherit}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:850;cursor:pointer}.filter.active{background:var(--navy);color:#fff}.lesson-grid,.shop-grid,.badge-grid,.profile-grid{display:grid;gap:14px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.lesson{display:flex;gap:14px}.lesson>span{font-size:42px}.lesson h3{margin:2px 0 5px}.lesson p{margin:0;color:var(--muted);line-height:1.45}.shop-grid{grid-template-columns:repeat(4,1fr)}.shop{text-align:center;cursor:pointer}.shop .art{font-size:60px}.shop.equipped{border:2px solid #6f4baa;background:#faf7ff}.badge-grid{grid-template-columns:repeat(5,1fr)}.badge{text-align:center}.badge .art{font-size:54px}.badge.locked{filter:grayscale(1);opacity:.42}.profile-grid{grid-template-columns:repeat(3,1fr)}.profile-card{text-align:center;cursor:pointer}.profile-card .art{font-size:68px}.profile-card.active{border:2px solid var(--red);background:#fff6f2}.form-card{max-width:720px;margin:auto}.form-card label{display:block;font-weight:900;margin:14px 0 5px}.form-card input,.form-card select{width:100%;border:2px solid var(--line);border-radius:15px;padding:13px;background:#fff}.avatar-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.avatar{width:62px;height:62px;border:2px solid var(--line);background:#fff;border-radius:17px;font-size:32px;cursor:pointer}.avatar.active{border-color:var(--red);background:#fff0eb}.report-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0}.report-stats .card b{font-size:30px;display:block}.report-stats .card span{font-size:12px;color:var(--muted)}.report-table{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.report-row{display:grid;grid-template-columns:1.6fr .7fr .5fr;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}.report-row.head{background:#fff4e8;font-weight:900}.setting-list{display:grid;gap:10px}.setting{display:flex;justify-content:space-between;gap:20px;align-items:center}.setting b,.setting small{display:block}.setting small{color:var(--muted)}.certificate{max-width:980px;margin:auto;background:#fffef8;border:12px double #b98a2e;padding:50px;text-align:center;box-shadow:var(--shadow)}.certificate h1{font-family:Georgia,serif;color:#8d1e1e;font-size:58px;margin:8px}.cert-name{font-family:Georgia,serif;font-size:42px;border-bottom:2px solid #444;display:inline-block;min-width:60%;padding:8px}.game-shell{background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}.game-head{padding:22px 24px;background:linear-gradient(120deg,#fff6ef,#fff);display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line)}.game-head h1{margin:4px 0;font-size:34px}.game-head p{margin:0;color:var(--muted)}.game-body{padding:24px;min-height:480px}.answers{display:grid;gap:10px;margin-top:18px}.answer{border:2px solid var(--line);background:#fff;border-radius:17px;padding:15px;text-align:left;font-weight:800;cursor:pointer}.answer.correct{border-color:#46aa70;background:#effcf3}.answer.wrong{border-color:#d65a5a;background:#fff0f0}.result{text-align:center;max-width:680px;margin:40px auto}.result .burst{font-size:88px}.result h2{font-size:46px;margin:8px}.reward-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:15px}.reward-row span{background:#fff5dc;border-radius:999px;padding:8px 11px;font-weight:900}.toast{position:fixed;left:50%;bottom:106px;transform:translate(-50%,16px);opacity:0;background:#222;color:#fff;padding:12px 16px;border-radius:14px;z-index:100;transition:.18s;pointer-events:none;font-weight:850}.toast.show{opacity:1;transform:translate(-50%,0)}.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;background-image:radial-gradient(circle,#f44336 0 3px,transparent 4px),radial-gradient(circle,#ffc107 0 3px,transparent 4px),radial-gradient(circle,#2196f3 0 3px,transparent 4px);background-size:60px 60px,80px 80px,100px 100px;animation:confetti 1.3s linear forwards}.large-text{font-size:18px}.high-contrast{--ink:#000;--muted:#333;--line:#7e6e63}.reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* mission-specific reusable components */
.gear-grid,.hazard-grid,.sdr-grid,.tool-options{display:grid;gap:12px}.gear-grid{grid-template-columns:repeat(3,1fr)}.gear-item,.hazard-item,.sdr-item,.tool-option{border:2px solid var(--line);background:#fff;border-radius:20px;padding:18px;cursor:pointer;text-align:center}.gear-item span,.hazard-item span,.sdr-item span{font-size:48px;display:block}.gear-item.selected,.sdr-item.selected{border-color:#4d9be8;background:#f0f7ff}.hazard-grid{grid-template-columns:repeat(4,1fr)}.hazard-item.danger{border-color:#d14a4a;background:#fff1ef}.hazard-item.safe{border-color:#4ba56b;background:#f1fff5}.drive-stage{height:390px;border-radius:24px;background:linear-gradient(#bfe6ff 0 35%,#9bcf7e 35% 43%,#52565d 43% 100%);position:relative;overflow:hidden}.drive-stage:after{content:"";position:absolute;left:50%;top:47%;bottom:0;border-left:5px dashed #fff8b2}.drive-truck{position:absolute;font-size:70px;left:4%;bottom:8%;transition:.12s;z-index:3}.drive-ob{position:absolute;font-size:42px;z-index:2}.drive-pad{display:grid;grid-template-columns:repeat(3,60px);gap:7px;justify-content:center;margin:18px}.drive-pad button{height:56px;border:1px solid var(--line);background:#fff;border-radius:16px;font-size:22px}.smoke-stage{height:330px;border-radius:22px;background:linear-gradient(#777,#999 38%,#efe4d7 39%);position:relative;overflow:hidden;padding:20px}.smoke-cloud{position:absolute;inset:0 0 48% 0;background:rgba(60,60,60,.72);font-size:46px;letter-spacing:16px;overflow:hidden}.path-row{position:absolute;bottom:45px;left:4%;right:4%;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.path-tile{height:74px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:28px}.crawler{position:absolute;bottom:15px;left:5%;font-size:44px;transition:.2s}.sdr-grid{grid-template-columns:repeat(3,1fr)}.hose-stage{height:390px;border-radius:24px;background:linear-gradient(#bfe4ff 0 60%,#b7d894 60%);position:relative;overflow:hidden}.target-flame{position:absolute;border:0;background:transparent;font-size:45px;cursor:pointer;transition:.15s}.target-flame.hit{transform:scale(.1);opacity:0}.phone-practice{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px;align-items:center}.phone{max-width:280px;margin:auto;background:#222;border-radius:38px;padding:14px}.phone-screen{height:370px;border-radius:28px;background:linear-gradient(#1a344c,#101419);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.phone-screen b{font-size:70px}.call-steps{display:grid;gap:12px}.call-step{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:18px;padding:15px;background:#fff;cursor:pointer;text-align:left}.call-step.selected{border-color:#49a96e;background:#f3fff6}.call-step>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f2ebe5;font-weight:950}
@keyframes float{50%{transform:translateY(-8px)}}@keyframes confetti{from{background-position:0 -500px,20px -450px,40px -550px}to{background-position:0 500px,20px 600px,40px 470px;opacity:0}}
@media(max-width:950px){.hero{grid-template-columns:1fr}.hero-art{min-height:190px}.card-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}.badge-grid{grid-template-columns:repeat(3,1fr)}.shop-grid{grid-template-columns:repeat(3,1fr)}.hazard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){body{padding-bottom:90px}.app-top{height:70px;padding:8px 10px}.brand small,.profile-chip div,.xp{display:none}.brand-mark{width:44px;height:44px}.profile-chip,.pill,.icon-btn{height:42px}.icon-btn{width:42px}.bottom-nav{height:70px}.nav-link span{font-size:19px}.nav-link{font-size:9px}.page{width:calc(100% - 18px);padding-top:14px}.hero{padding:25px 20px;border-radius:25px}.hero h1{font-size:43px;letter-spacing:-2px}.hero-art .truck{font-size:95px}.stats{grid-template-columns:repeat(2,1fr)}.card-grid,.lesson-grid,.profile-grid{grid-template-columns:1fr}.quick-grid,.shop-grid{grid-template-columns:repeat(2,1fr)}.badge-grid{grid-template-columns:repeat(2,1fr)}.page-hero{display:block;border-radius:24px}.game-head{display:block}.game-head .btn{margin-top:12px}.game-body{padding:17px}.gear-grid{grid-template-columns:repeat(2,1fr)}.hazard-grid{grid-template-columns:repeat(2,1fr)}.sdr-grid{grid-template-columns:1fr}.phone-practice{grid-template-columns:1fr}.report-stats{grid-template-columns:repeat(2,1fr)}.report-row{grid-template-columns:1.3fr .7fr}.report-row>*:last-child{display:none}.certificate{padding:24px;border-width:7px}.certificate h1{font-size:40px}.cert-name{font-size:30px}.drive-stage,.hose-stage{height:330px}}
@media(max-width:420px){.quick-grid,.shop-grid,.hazard-grid{grid-template-columns:1fr}.badge-grid{grid-template-columns:1fr 1fr}.btn-row .btn{width:100%}}
@media print{body{background:#fff;padding:0}.app-top,.bottom-nav,.no-print{display:none!important}.page{width:100%;padding:0}.certificate{box-shadow:none;margin:10mm}.report-table,.report-stats .card{break-inside:avoid}}

.intro-badge{
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    box-shadow:none;
}

.intro-badge img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}