@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--red:#e4002b;--red2:#ff3154;--wine:#22080e;--wine2:#3a0b17;--gold:#f3d68d;--cream:#fff8eb;--ink:#28171b;--muted:#a99a9c;--line:rgba(255,255,255,.13);--panel:rgba(255,255,255,.055);--shadow:0 30px 100px rgba(0,0,0,.38)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:#19060b}
body{min-height:100vh;margin:0;color:#fff;background:radial-gradient(ellipse at 50% -10%,#601024 0%,transparent 43%),radial-gradient(ellipse at 95% 85%,rgba(228,0,43,.12),transparent 35%),linear-gradient(145deg,#19060b 0%,#280910 52%,#14060a 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
button,input{font:inherit}button{touch-action:manipulation}a{color:inherit}.ambient{position:fixed;z-index:0;width:390px;height:390px;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.15}.ambient-one{background:#ea113c;top:6%;left:-220px}.ambient-two{background:#d7a342;right:-240px;bottom:0;width:500px;height:500px;opacity:.08}
.site-shell{position:relative;z-index:1;width:min(100% - 44px,1030px);margin:0 auto;padding:26px 0 18px;min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#ff3455,#bd001f);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 28px rgba(228,0,43,.25);font-size:24px;font-weight:900}.brand-copy{display:flex;flex-direction:column;gap:5px}.brand-copy strong{font-size:13px;letter-spacing:2px;font-weight:900}.brand-copy small{font-size:9px;letter-spacing:1.5px;color:#cfb8bc;font-weight:700}.top-chip{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.6px;font-weight:900;color:#ecd6d9;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:999px;padding:11px 14px;white-space:nowrap}.live-dot{width:7px;height:7px;border-radius:50%;background:#ebd28b;box-shadow:0 0 0 4px rgba(235,210,139,.10);animation:dotPulse 1.7s infinite}
.screen{flex:1;display:flex;align-items:center;justify-content:center;min-height:410px;animation:screenUp .55s cubic-bezier(.2,.8,.2,1) both}.boot-card{display:flex;flex-direction:column;align-items:center;gap:18px;color:#d9c6c9;font-size:13px}.loader-orbit{width:62px;height:62px;border:1px solid rgba(243,214,141,.35);border-radius:50%;display:grid;place-items:center;position:relative;color:var(--gold);font-size:25px}.loader-orbit:before{content:"";position:absolute;inset:-6px;border:2px solid transparent;border-top-color:var(--red2);border-radius:50%;animation:spin .8s linear infinite}
.hero-card,.game-card,.finish-card,.reward-card,.status-card{width:100%;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:30px;background:linear-gradient(145deg,rgba(61,15,25,.96),rgba(29,8,13,.97));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}.hero-card{padding:clamp(25px,5vw,54px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);align-items:center;gap:28px}.hero-card:before,.game-card:before,.finish-card:before,.reward-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 8%,rgba(243,214,141,.11),transparent 24%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.015))}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-size:10px;letter-spacing:2px;font-weight:900;text-transform:uppercase}.eyebrow:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 13px currentColor}.hero-title{font-size:clamp(38px,6.8vw,76px);letter-spacing:-.075em;line-height:.96;margin:19px 0 16px;font-weight:900}.hero-title span{display:block;color:var(--gold);margin-top:7px}.hero-copy{max-width:570px;color:#d4c7c9;font-size:clamp(14px,1.7vw,17px);line-height:1.75;margin:0}.joke-note{margin:20px 0 0;padding:13px 15px;border-radius:15px;background:rgba(243,214,141,.08);border:1px solid rgba(243,214,141,.17);color:#f8e6b6;font-size:13px;line-height:1.55}.joke-note strong{color:#fff}.hero-art{position:relative;display:grid;place-items:center;min-height:260px}.colonel-aura{position:absolute;width:min(100%,280px);aspect-ratio:1;border:1px solid rgba(243,214,141,.22);border-radius:50%;box-shadow:0 0 0 22px rgba(243,214,141,.025),0 0 0 55px rgba(243,214,141,.018),inset 0 0 60px rgba(243,214,141,.04);animation:auraPulse 4s ease-in-out infinite}.colonel-figure{position:relative;z-index:1;width:175px;height:210px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 20px 24px rgba(0,0,0,.22));animation:floatColonel 4.6s ease-in-out infinite}.colonel-figure svg{width:100%;height:100%}.hero-stars{position:absolute;color:var(--gold);animation:twinkle 2.7s ease-in-out infinite}.star-a{left:9%;top:22%;font-size:19px}.star-b{right:7%;top:35%;font-size:13px;animation-delay:.7s}.star-c{left:24%;bottom:17%;font-size:12px;animation-delay:1.3s}.button-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}.btn{border:0;border-radius:14px;min-height:52px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:900;font-size:13px;cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.btn:focus-visible,.food-option:focus-visible,.memory-card:focus-visible{outline:3px solid #f3d68d;outline-offset:3px}.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(110deg,#f32249,#cc0027);color:#fff;box-shadow:0 12px 27px rgba(228,0,43,.26),inset 0 1px 0 rgba(255,255,255,.22)}.btn-secondary{background:rgba(255,255,255,.065);color:#fff;border:1px solid rgba(255,255,255,.15)}.btn-gold{background:linear-gradient(110deg,#ffe8a6,#d9ad51);color:#37151c;box-shadow:0 12px 25px rgba(217,173,81,.16)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.text-link{color:#dac7ca;text-decoration:none;font-size:12px;font-weight:700}.text-link:hover{color:white}
.level-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 17px}.level-pill{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:14px;padding:11px 10px;display:flex;align-items:center;gap:9px;color:#a99a9c;min-width:0}.level-pill .num{width:27px;height:27px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.07);font-size:11px;font-weight:900}.level-pill .level-text{min-width:0}.level-pill strong{display:block;font-size:10px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-pill small{display:block;font-size:9px;margin-top:4px;opacity:.7}.level-pill.active{background:rgba(228,0,43,.13);border-color:rgba(255,65,94,.47);color:white}.level-pill.active .num{background:var(--red);color:white}.level-pill.done{color:#efda9a;border-color:rgba(243,214,141,.25)}.level-pill.done .num{background:rgba(243,214,141,.15);color:var(--gold)}
.game-card{padding:clamp(17px,3vw,30px)}.game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:19px}.game-head h1,.game-head h2{margin:8px 0 6px;font-size:clamp(25px,4.2vw,39px);letter-spacing:-1.7px;line-height:1.05}.game-head p{margin:0;color:#c4b2b6;font-size:13px;line-height:1.6;max-width:650px}.level-badge{flex:none;border:1px solid rgba(243,214,141,.28);background:rgba(243,214,141,.07);color:var(--gold);border-radius:13px;padding:11px 13px;font-size:10px;font-weight:900;letter-spacing:1px;text-align:center}.level-badge strong{display:block;font-size:21px;margin-bottom:4px}.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}.hud-box{border:1px solid rgba(255,255,255,.105);background:rgba(255,255,255,.035);border-radius:15px;padding:12px 14px;min-width:0}.hud-box span{display:block;color:#a7969a;font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.hud-box strong{display:block;margin-top:6px;font-size:24px;letter-spacing:-.7px;color:#fff}.hud-box strong.gold{color:var(--gold)}.stage-area{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:21px;overflow:hidden;background:radial-gradient(ellipse at 50% 10%,rgba(243,214,141,.09),transparent 50%),linear-gradient(145deg,#260a12,#19070d);min-height:300px}.stage-area canvas{display:block;width:100%;height:360px;touch-action:none;cursor:crosshair}.stage-caption{padding:14px 17px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:10px;align-items:center;color:#bbaeb0;font-size:10px;letter-spacing:1.2px;font-weight:900;text-transform:uppercase}.stage-caption span:last-child{color:var(--gold);letter-spacing:.4px;text-transform:none;font-size:11px}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;color:#9e8c90;font-size:12px;line-height:1.5}.game-bottom strong{color:#f6e1a3}.mobile-controls{display:flex;justify-content:center;gap:12px;padding:12px;position:absolute;bottom:12px;left:0;right:0;pointer-events:none}.control-btn{pointer-events:auto;border:1px solid rgba(255,255,255,.26);border-radius:14px;min-width:62px;height:48px;background:rgba(22,4,9,.86);color:white;font-size:19px;font-weight:900;box-shadow:0 8px 20px #0005;backdrop-filter:blur(10px)}.hidden{display:none!important}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;min-height:300px}.memory-card{appearance:none;border:1px solid rgba(255,255,255,.12);border-radius:16px;min-height:113px;background:linear-gradient(145deg,#4b111e,#2b0911);color:white;cursor:pointer;display:grid;place-items:center;position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease}.memory-card:hover{transform:translateY(-2px);border-color:rgba(243,214,141,.45)}.memory-card .card-back{font-size:29px;color:var(--gold);font-weight:900}.memory-card .card-front{display:none;font-size:33px}.memory-card .card-label{display:none;font-size:10px;letter-spacing:.4px;color:#f6e5bd;font-weight:900;margin-top:6px}.memory-card.flipped,.memory-card.matched{background:linear-gradient(145deg,#f3d68d,#c89635);color:#321117;border-color:#ffe8a8}.memory-card.flipped .card-back,.memory-card.matched .card-back{display:none}.memory-card.flipped .card-front,.memory-card.matched .card-front,.memory-card.flipped .card-label,.memory-card.matched .card-label{display:block}.memory-card.matched{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);opacity:.9}.memory-card.flipped .card-front,.memory-card.matched .card-front{align-self:end}.memory-card-inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.sequence-target{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:19px 12px 23px;border-bottom:1px solid rgba(255,255,255,.09)}.sequence-slot{width:67px;height:68px;border:1px dashed rgba(243,214,141,.4);border-radius:15px;background:rgba(243,214,141,.055);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9d898d}.sequence-slot.filled{background:rgba(243,214,141,.13);border-style:solid;color:#ffe9b0;border-color:rgba(243,214,141,.55);animation:slotPop .28s ease}.sequence-slot span{font-size:24px}.sequence-slot small{font-size:8px;font-weight:900;letter-spacing:.7px}.sequence-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:18px 14px}.food-option{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:12px 6px;min-height:104px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;transition:transform .16s ease,border-color .16s ease,background .16s ease}.food-option:hover{transform:translateY(-3px);border-color:rgba(243,214,141,.45);background:rgba(243,214,141,.08)}.food-option .food-emoji{font-size:29px}.food-option strong{font-size:10px;line-height:1.25}.mini-feedback{text-align:center;color:#d9c8cb;font-size:12px;line-height:1.5;padding:0 12px 16px;min-height:33px}.mini-feedback strong{color:var(--gold)}
.reflex-arena{height:390px;position:relative;overflow:hidden;touch-action:manipulation;background:radial-gradient(circle at 50% 50%,rgba(243,214,141,.07),transparent 45%),repeating-radial-gradient(circle at center,transparent 0 37px,rgba(255,255,255,.018) 38px 39px)}.reflex-target{position:absolute;width:80px;height:86px;border:1px solid rgba(255,255,255,.21);border-radius:22px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;cursor:pointer;box-shadow:0 13px 23px #0003;transition:left .16s ease,top .16s ease,transform .16s ease;background:linear-gradient(145deg,#f1d38a,#c79d4f);color:#3b151b}.reflex-target:active{transform:scale(.92)}.reflex-target .target-face{font-size:33px;line-height:1.2}.reflex-target small{font-size:8px;font-weight:900;letter-spacing:.5px}.reflex-target.pepper{background:linear-gradient(145deg,#641323,#2b0810);border-color:rgba(255,255,255,.15);color:#fff}.reflex-target.pepper .target-face{font-size:30px}.finish-card,.reward-card,.status-card{padding:clamp(25px,5vw,51px);text-align:center}.finish-icon{width:80px;height:80px;margin:0 auto 19px;border-radius:25px;display:grid;place-items:center;font-size:38px;background:linear-gradient(145deg,#ffe9a5,#c79b43);color:#351219;box-shadow:0 15px 35px rgba(217,173,81,.15);animation:iconPop .65s cubic-bezier(.2,.8,.2,1) both}.finish-title{margin:0;font-size:clamp(31px,5vw,53px);letter-spacing:-2.5px;line-height:1.04;font-weight:900}.finish-title span{color:var(--gold)}.finish-copy{max-width:580px;margin:16px auto 0;color:#cab9bd;font-size:14px;line-height:1.75}.finish-card .button-row,.reward-card .button-row,.status-card .button-row{justify-content:center}.reward-layout{max-width:630px;margin:0 auto;text-align:left}.reward-quote{margin:18px 0 25px;padding:19px 20px;border-radius:17px;border:1px solid rgba(243,214,141,.22);background:rgba(243,214,141,.07);color:#f1e1b7;font-size:14px;line-height:1.7}.reward-quote small{display:block;color:#c1aaa9;text-transform:uppercase;letter-spacing:1.6px;font-size:9px;font-weight:900;margin-bottom:8px}.reward-form{display:grid;gap:16px}.field-label{display:block;margin-bottom:8px;color:#eadfe0;font-size:11px;font-weight:900;letter-spacing:.8px}.field-input{width:100%;min-height:52px;padding:13px 15px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(12,2,5,.38);color:white;outline:none}.field-input::placeholder{color:#87767a}.field-input:focus{border-color:rgba(243,214,141,.7);box-shadow:0 0 0 3px rgba(243,214,141,.09)}.prize-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.prize-choice{display:block;cursor:pointer}.prize-choice input{position:absolute;opacity:0;pointer-events:none}.prize-choice-box{display:flex;align-items:center;gap:12px;border-radius:15px;padding:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);min-height:85px;transition:border-color .18s,background .18s}.prize-choice-box .prize-icon{font-size:29px}.prize-choice-box strong{display:block;font-size:12px}.prize-choice-box small{display:block;margin-top:5px;color:#ab989c;font-size:10px;line-height:1.35}.prize-choice input:checked+.prize-choice-box{border-color:#f3d68d;background:rgba(243,214,141,.1);box-shadow:inset 0 0 0 1px rgba(243,214,141,.19)}.form-error{min-height:18px;color:#ffb1bf;font-size:12px;line-height:1.5}.fine-print{color:#9c898e;font-size:10px;line-height:1.6;text-align:center;margin-top:4px}.reward-code{display:inline-block;margin:20px auto 0;padding:15px 20px;border:1px dashed rgba(243,214,141,.65);border-radius:14px;background:rgba(243,214,141,.08);color:var(--gold);font-size:22px;font-weight:900;letter-spacing:3px}.success-note{margin:19px auto 0;max-width:500px;border-radius:15px;padding:14px 16px;background:rgba(60,185,114,.1);border:1px solid rgba(95,216,148,.23);font-size:12px;line-height:1.65;color:#d0f1dc}.error-note{background:rgba(228,0,43,.09);border-color:rgba(255,93,122,.25);color:#ffd3da}.progress-track{height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin:0 0 17px}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:99px;transition:width .45s ease}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#8e7b80;font-size:10px;padding:19px 4px 0}.toast{position:fixed;z-index:50;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;visibility:hidden;max-width:calc(100vw - 28px);background:#fff8eb;color:#30131a;border:1px solid #f3d68d;border-radius:13px;box-shadow:0 15px 40px #0006;padding:13px 17px;font-size:12px;font-weight:800;transition:.22s ease}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes screenUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.45}}@keyframes auraPulse{0%,100%{transform:scale(.98);opacity:.8}50%{transform:scale(1.04);opacity:.45}}@keyframes floatColonel{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes slotPop{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes iconPop{from{transform:scale(.5) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:760px){.site-shell{width:min(100% - 26px,610px);padding-top:14px}.topbar{margin-bottom:15px}.brand-mark{width:42px;height:42px}.brand-copy strong{font-size:10px;letter-spacing:1.3px}.brand-copy small{font-size:8px;letter-spacing:.9px}.top-chip{font-size:8px;letter-spacing:.8px;padding:10px}.hero-card{grid-template-columns:1fr;padding:25px 21px 23px;gap:9px}.hero-title{font-size:clamp(39px,12vw,62px);margin-top:14px}.hero-copy{font-size:14px;line-height:1.68}.hero-art{min-height:160px;grid-row:1;grid-column:1;justify-self:end;width:135px;height:145px;min-height:145px;margin-bottom:-150px;opacity:.95}.colonel-aura{width:132px}.colonel-figure{width:92px;height:119px}.hero-card .hero-copy,.hero-card .eyebrow,.hero-card .hero-title,.hero-card .joke-note,.hero-card .button-row{position:relative;z-index:2}.hero-card .hero-title{padding-right:60px}.hero-card .hero-copy{max-width:92%}.joke-note{font-size:12px;margin-top:16px}.hero-card .button-row{margin-top:20px}.button-row .btn{width:100%}.hero-card .text-link{width:100%;text-align:center}.level-strip{gap:5px}.level-pill{padding:7px 4px;display:flex;flex-direction:column;gap:4px;text-align:center;border-radius:11px}.level-pill .num{width:24px;height:24px;border-radius:8px}.level-pill strong{font-size:8px;letter-spacing:0}.level-pill small{display:none}.game-card{padding:14px;border-radius:22px}.game-head{margin-bottom:14px}.game-head h1,.game-head h2{font-size:27px;letter-spacing:-1.1px}.game-head p{font-size:12px}.level-badge{padding:8px 9px;font-size:8px}.level-badge strong{font-size:17px}.hud{gap:6px;margin-bottom:10px}.hud-box{padding:10px 9px;border-radius:12px}.hud-box span{font-size:8px;letter-spacing:.7px;line-height:1.35}.hud-box strong{font-size:21px;margin-top:4px}.stage-area{border-radius:17px;min-height:270px}.stage-area canvas{height:310px}.stage-caption{padding:11px 12px;font-size:8px;letter-spacing:.7px}.stage-caption span:last-child{font-size:10px}.game-bottom{align-items:flex-start;font-size:10px}.memory-grid{gap:7px;padding:8px;min-height:unset}.memory-card{min-height:clamp(68px,20vw,103px);border-radius:12px}.memory-card .card-back{font-size:24px}.memory-card .card-front{font-size:28px}.memory-card .card-label{font-size:8px}.sequence-options{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 8px;gap:7px}.food-option{min-height:88px;border-radius:12px}.food-option .food-emoji{font-size:25px}.food-option strong{font-size:9px}.sequence-target{gap:5px;padding:15px 5px}.sequence-slot{width:clamp(46px,13vw,61px);height:61px;border-radius:12px}.sequence-slot span{font-size:21px}.sequence-slot small{font-size:7px}.reflex-arena{height:350px}.reflex-target{width:68px;height:75px;border-radius:18px}.reflex-target .target-face{font-size:28px}.finish-card,.reward-card,.status-card{padding:27px 19px;border-radius:22px}.finish-icon{width:69px;height:69px;border-radius:22px;font-size:31px}.finish-title{font-size:36px;letter-spacing:-1.7px}.finish-copy{font-size:13px}.reward-quote{font-size:13px;padding:15px}.prize-choices{gap:8px}.prize-choice-box{min-height:92px;padding:10px;gap:8px;align-items:flex-start;flex-direction:column}.prize-choice-box .prize-icon{font-size:26px}.prize-choice-box strong{font-size:11px}.prize-choice-box small{font-size:9px}.reward-code{font-size:18px;letter-spacing:2px}.site-footer{font-size:9px;line-height:1.5;padding-top:14px;align-items:flex-start}.stage-caption{flex-wrap:wrap}.site-footer span:last-child{text-align:right}}
@media(max-width:380px){.site-shell{width:calc(100% - 18px)}.top-chip{padding:8px;font-size:7px}.hero-card{padding:21px 15px}.hero-title{font-size:39px}.hero-art{width:115px;min-height:120px;height:120px;margin-bottom:-125px}.colonel-aura{width:112px}.colonel-figure{width:80px;height:100px}.hero-card .hero-title{padding-right:44px}.hud-box{padding:9px 7px}.hud-box strong{font-size:18px}.hud-box span{font-size:7px}.level-pill strong{font-size:7px}.reflex-arena{height:320px}.memory-card{min-height:66px}.memory-card .card-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Les commandes tactiles restent sous le canvas, sans masquer les tenders. */
.mobile-controls{position:static;left:auto;right:auto;bottom:auto;pointer-events:auto;border-top:1px solid rgba(255,255,255,.08);background:rgba(12,3,7,.34);padding:10px;backdrop-filter:none}


/* Mise en page responsive finale : progression au-dessus du jeu, jamais à côté. */
.site-shell {
  width: min(calc(100% - 36px), 1180px);
  max-width: 1180px;
}
.screen {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.screen > * {
  width: 100%;
  min-width: 0;
}
.level-strip {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, .9vw, 10px);
  margin: 0 0 18px;
}
.level-pill {
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
}
.level-pill .level-text {
  flex: 1 1 auto;
  min-width: 0;
}
.level-pill strong,
.level-pill small {
  max-width: 100%;
}
.hero-card,
.game-card,
.finish-card,
.reward-card,
.status-card {
  min-width: 0;
}
.game-head > div:first-child {
  min-width: 0;
}
.stage-area canvas {
  width: 100%;
  height: clamp(300px, 43vh, 430px);
}

@media (min-width: 761px) {
  .level-pill {
    justify-content: flex-start;
  }
  .level-pill strong {
    font-size: 10px;
  }
  .level-pill small {
    display: block;
    font-size: 9px;
  }
  .hero-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: clamp(24px, 4vw, 52px);
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: calc(100% - 24px);
    max-width: 610px;
    min-height: 100svh;
    padding: max(12px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom));
  }
  .topbar {
    gap: 10px;
    align-items: center;
  }
  .brand {
    min-width: 0;
    gap: 9px;
  }
  .brand-copy strong {
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: .8px;
  }
  .brand-copy small {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .top-chip {
    flex: 0 0 auto;
    font-size: 8px;
    letter-spacing: .4px;
    padding: 9px 10px;
  }
  .screen {
    min-height: 0;
    justify-content: flex-start;
    gap: 0;
  }
  .level-strip {
    gap: 5px;
    margin-bottom: 12px;
  }
  .level-pill {
    min-height: 61px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 7px 2px;
    border-radius: 12px;
  }
  .level-pill .num {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 10px;
  }
  .level-pill .level-text {
    display: block;
    width: 100%;
    text-align: center;
  }
  .level-pill strong {
    display: block;
    width: 100%;
    font-size: clamp(7px, 2vw, 9px);
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .level-pill small {
    display: none;
  }
  .game-card {
    padding: clamp(12px, 3.5vw, 18px);
    border-radius: 22px;
  }
  .game-head {
    gap: 8px;
  }
  .game-head h1,
  .game-head h2 {
    overflow-wrap: anywhere;
    font-size: clamp(23px, 6vw, 29px);
  }
  .level-badge {
    padding: 8px 7px;
    font-size: 7px;
    letter-spacing: .4px;
  }
  .hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .hud-box {
    min-width: 0;
    padding: 10px 7px;
  }
  .hud-box span {
    font-size: clamp(7px, 2vw, 8px);
    line-height: 1.35;
    letter-spacing: .35px;
    overflow-wrap: anywhere;
  }
  .hud-box strong {
    font-size: clamp(17px, 5vw, 21px);
  }
  .stage-area {
    min-height: 270px;
  }
  .stage-area canvas {
    height: clamp(270px, 40svh, 350px);
  }
  .stage-caption {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .game-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .game-bottom > span {
    flex: 1 1 100%;
  }
  .game-bottom .text-link {
    margin-left: auto;
  }
  .site-footer {
    flex-wrap: wrap;
  }
  .site-footer span:last-child {
    text-align: left;
  }
}

@media (max-width: 390px) {
  .site-shell {
    width: calc(100% - 18px);
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 20px;
  }
  .top-chip {
    font-size: 7px;
    padding: 8px;
  }
  .level-strip {
    gap: 4px;
  }
  .level-pill {
    min-height: 57px;
    padding: 6px 1px;
  }
  .level-pill .num {
    width: 23px;
    height: 23px;
  }
  .level-pill strong {
    font-size: 7px;
  }
  .game-head {
    flex-direction: column;
  }
  .level-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .level-badge strong {
    display: inline;
    margin: 0;
    font-size: 14px;
  }
  .hud-box {
    padding: 9px 5px;
  }
}

/* Limitation de mission sur 7 jours : écran du Colonel + désintégration en poussière */
.cooldown-card {
  width: 100%;
  max-width: 940px;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid rgba(243, 214, 141, .25);
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(243, 214, 141, .12), transparent 43%),
    radial-gradient(ellipse at 100% 100%, rgba(228, 0, 43, .13), transparent 48%),
    linear-gradient(145deg, rgba(61, 15, 25, .98), rgba(25, 6, 11, .99));
  box-shadow: 0 30px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  animation: cooldownArrive .75s cubic-bezier(.16,1,.3,1) both;
}
.cooldown-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background: repeating-conic-gradient(from 8deg at 50% 18%, transparent 0deg 13deg, rgba(255,255,255,.025) 13.5deg 14deg, transparent 14.5deg 27deg);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.cooldown-emblem {
  position: relative;
  width: 126px;
  height: 126px;
  margin: 0 auto 25px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  border: 1px solid rgba(243,214,141,.35);
  background: linear-gradient(145deg, rgba(243,214,141,.14), rgba(255,255,255,.025));
  box-shadow: 0 0 0 9px rgba(243,214,141,.025), 0 18px 55px rgba(0,0,0,.2);
}
.cooldown-orbit { width: 88px; height: 104px; display: flex; align-items: center; justify-content: center; animation: floatColonel 4s ease-in-out infinite; }
.cooldown-orbit svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
.cooldown-lock { position: absolute; right: -9px; bottom: -7px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg,#ff3154,#c80029); box-shadow: 0 8px 24px rgba(228,0,43,.25); font-size: 20px; }
.cooldown-card .eyebrow { justify-content: center; }
.cooldown-card .finish-title { margin: 17px 0 15px; }
.cooldown-card .finish-copy { max-width: 690px; margin: 0 auto; }
.cooldown-quote { max-width: 720px; margin: 24px auto 20px; padding: 18px 21px; border: 1px solid rgba(243,214,141,.21); border-radius: 18px; background: rgba(243,214,141,.07); color: #f3e4ba; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.cooldown-quote small { display: block; margin-bottom: 7px; color: #d9c6c9; font-size: 9px; letter-spacing: 1.7px; font-weight: 900; text-transform: uppercase; }
.cooldown-timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 15px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(0,0,0,.18); }
.cooldown-timer-wrap > span { color: #ad999e; font-size: 9px; letter-spacing: 1.6px; font-weight: 900; }
.cooldown-timer-wrap > strong { color: var(--gold); font-size: clamp(20px, 3.2vw, 29px); letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.cooldown-actions { justify-content: center; gap: 10px; }
.cooldown-card .fine-print { max-width: 590px; margin: 20px auto 0; }

/* Poussière générée à partir de la position réelle des modules */
.colonel-dust-layer { position: fixed; inset: 0; z-index: 2147483647; overflow: hidden; pointer-events: none; contain: strict; }
.colonel-dust-particle { position: absolute; display: block; width: var(--dust-size, 4px); height: var(--dust-size, 4px); margin: 0; border-radius: 2px 50% 50% 50%; opacity: 0; box-shadow: 0 0 8px currentColor; animation: colonelDustFly var(--dust-duration, 1s) cubic-bezier(.15,.65,.25,1) var(--dust-delay, 0s) forwards; will-change: transform, opacity; }
.site-shell.dusting-active > .topbar,
.site-shell.dusting-active > #screen > .reward-card,
.site-shell.dusting-active > .site-footer { animation: colonelModuleDisintegrate .9s cubic-bezier(.35,0,.75,.25) both; pointer-events: none; }
.site-shell.dusting-active > .topbar { animation-delay: 0s; }
.site-shell.dusting-active > #screen > .reward-card { animation-duration: 1.08s; }
.site-shell.dusting-active > .site-footer { animation-delay: .08s; }
.reward-card.dusting-card > * { animation: colonelModuleDisintegrate .78s cubic-bezier(.35,0,.75,.25) both; animation-delay: calc(var(--dust-index, 0) * 70ms); }

@keyframes colonelDustFly { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.3) rotate(0); filter: blur(0); } 12% { opacity: .98; } 100% { opacity: 0; transform: translate3d(var(--dust-x, 40px),var(--dust-y, -80px),0) scale(.1) rotate(var(--dust-rotate,180deg)); filter: blur(2px); } }
@keyframes colonelModuleDisintegrate { 0% { opacity: 1; filter: blur(0) saturate(1); transform: translate3d(0,0,0) scale(1); clip-path: inset(0 0 0 0); } 36% { opacity: .94; filter: blur(.5px) saturate(1.1); transform: translate3d(-3px,-2px,0) scale(1.006); } 68% { opacity: .48; filter: blur(4px) saturate(1.5); transform: translate3d(7px,-5px,0) scale(1.025) rotate(.3deg); clip-path: inset(3% 1% 5% 0); } 100% { opacity: 0; filter: blur(11px) saturate(1.8); transform: translate3d(-8px,-14px,0) scale(1.055) rotate(-.7deg); clip-path: inset(14% 8% 12% 4%); } }
@keyframes cooldownArrive { from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(7px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@media(max-width:760px) {
  .cooldown-card { padding: 27px 18px 23px; border-radius: 23px; }
  .cooldown-emblem { width: 100px; height: 100px; margin-bottom: 21px; border-radius: 28px; }
  .cooldown-orbit { width: 70px; height: 82px; }
  .cooldown-lock { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
  .cooldown-card .eyebrow { font-size: 8px; line-height: 1.5; letter-spacing: 1.2px; }
  .cooldown-card .finish-title { font-size: clamp(31px, 9vw, 40px); overflow-wrap: anywhere; }
  .cooldown-card .finish-copy { font-size: 13px; line-height: 1.7; }
  .cooldown-quote { margin: 19px auto 16px; padding: 15px 14px; font-size: 12px; line-height: 1.7; }
  .cooldown-timer-wrap { width: 100%; padding: 14px 8px; gap: 8px; }
  .cooldown-timer-wrap > span { font-size: 8px; letter-spacing: 1px; }
  .cooldown-timer-wrap > strong { font-size: clamp(19px, 5.6vw, 24px); letter-spacing: -.5px; }
  .cooldown-actions { margin-top: 20px; }
  .cooldown-actions .btn { width: 100%; white-space: normal; line-height: 1.35; }
}
@media(prefers-reduced-motion:reduce) {
  .site-shell.dusting-active > .topbar,
  .site-shell.dusting-active > #screen > .reward-card,
  .site-shell.dusting-active > .site-footer,
  .reward-card.dusting-card > *,
  .colonel-dust-particle { animation-duration: .15s !important; }
}


/* Compteur des 3 tentatives de mission */
.attempts-note,.attempts-warning{margin:18px 0 0;padding:13px 15px;border:1px solid rgba(243,214,141,.22);border-radius:14px;background:rgba(243,214,141,.07);color:#eadbd0;font-size:12px;line-height:1.6;text-align:left}
.attempts-note strong,.attempts-warning strong{color:var(--gold)}
.attempts-warning{border-color:rgba(255,49,84,.25);background:rgba(228,0,43,.08)}
.attempts-inline{margin:-3px 0 13px;padding:8px 11px;border:1px solid rgba(243,214,141,.14);border-radius:10px;background:rgba(243,214,141,.045);color:#c5b2b6;font-size:10px;line-height:1.5}
.attempts-inline strong{color:var(--gold)}

/* Les modules de la page se désintègrent quel que soit l'écran affiché. */
.site-shell.dusting-active > .topbar,
.site-shell.dusting-active > #screen > .reward-card,
.site-shell.dusting-active > #screen > .game-card,
.site-shell.dusting-active > #screen > .finish-card,
.site-shell.dusting-active > #screen > .hero-card,
.site-shell.dusting-active > #screen > .status-card,
.site-shell.dusting-active > .site-footer{animation:colonelModuleDisintegrate .9s cubic-bezier(.35,0,.75,.25) both;pointer-events:none}
.site-shell.dusting-active > #screen > .game-card{animation-duration:1.08s}
.dusting-card > *{animation:colonelModuleDisintegrate .78s cubic-bezier(.35,0,.75,.25) both;animation-delay:calc(var(--dust-index,0) * 65ms)}
@media(max-width:760px){.attempts-note,.attempts-warning{font-size:11px;padding:11px 12px}.attempts-inline{font-size:9px}}
@media(prefers-reduced-motion:reduce){.site-shell.dusting-active > .topbar,.site-shell.dusting-active > #screen > .reward-card,.site-shell.dusting-active > #screen > .game-card,.site-shell.dusting-active > #screen > .finish-card,.site-shell.dusting-active > #screen > .hero-card,.site-shell.dusting-active > #screen > .status-card,.site-shell.dusting-active > .site-footer,.dusting-card > *{animation-duration:.15s!important}}