@font-face{font-family:Vazirmatn;src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{--ink:#163239;--deep:#102c32;--sand:#f0b453;--sand-light:#f8d98b;--cream:#fff8e8;--red:#e35d44;--green:#4d9d67;--yellow:#ffd368}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0c2429;font-family:Vazirmatn,Tahoma,sans-serif;color:var(--ink)}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:active{transform:translateY(3px)}
.app{position:relative;width:100%;height:100%;height:100dvh;max-width:520px;margin:auto;overflow:hidden;background:#f4c66d;box-shadow:0 0 80px #0008;isolation:isolate}
.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.is-active{display:block}
.splash{display:none;place-items:center;align-content:center;background:radial-gradient(circle at 50% 37%,#35646b 0 20%,#173940 53%,#102a30 100%);color:var(--cream);text-align:center;z-index:20}
.splash.is-active{display:grid}.sun-mark{position:absolute;top:21%;width:190px;height:190px;border:1px solid #f5c96d33;border-radius:50%;display:grid;place-items:center}.sun-mark:before,.sun-mark:after{content:"";position:absolute;inset:18px;border:1px dashed #f5c96d42;border-radius:50%}.sun-mark:after{inset:-18px}.sun-mark span{font-size:74px;color:#f7c65f;filter:drop-shadow(0 8px 18px #e2923b66)}
.splash-camel{position:relative;font-size:84px;margin-top:75px;filter:sepia(.5) saturate(1.5) drop-shadow(0 12px 3px #061b1f66);animation:splashBob 1s ease-in-out infinite}
.splash h1{font-size:clamp(42px,13vw,64px);letter-spacing:-3px;margin:10px 0 0}.splash p{margin:0;color:#e8c989;letter-spacing:2px}.loader{width:120px;height:4px;background:#ffffff22;border-radius:9px;margin-top:34px;overflow:hidden}.loader i{display:block;width:50%;height:100%;background:#f5bd55;border-radius:9px;animation:load 1.45s ease-in-out forwards}
@keyframes load{to{width:100%}}@keyframes splashBob{50%{transform:translateY(-7px) rotate(-1deg)}}
.menu{background:linear-gradient(#4b858b 0%,#95c5b6 38%,#f2cb75 64%,#d9913f 100%)}.menu-sky{position:absolute;inset:0;overflow:hidden}.menu-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#173a4112 1px,transparent 1px),linear-gradient(#173a4112 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#0006,transparent 70%)}
.menu-sun{position:absolute;width:165px;height:165px;border-radius:50%;background:#ffd878;inset-block-start:13%;inset-inline-start:calc(50% - 82px);box-shadow:0 0 0 18px #ffdc7940,0 0 0 42px #ffdc791a}.dune{position:absolute;width:130%;height:38%;bottom:-15%;border-radius:50% 50% 0 0;transform:rotate(-8deg)}.dune-a{background:#d79948;right:-50%;bottom:2%}.dune-b{background:#c77a34;left:-52%;bottom:-9%;transform:rotate(8deg)}
.menu-top{position:absolute;z-index:2;top:0;inset-inline:0;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 0;display:flex;align-items:center;justify-content:space-between}.icon-button{width:48px;height:48px;border-radius:16px;background:#173940cc;color:#fff6df;font-size:21px;border:1px solid #fff3;box-shadow:0 8px 18px #17394033}.best-chip{padding:7px 20px 6px;border-radius:18px;background:#fff5dfd9;text-align:center;box-shadow:0 7px 18px #17394022}.best-chip small{display:block;font-size:10px;opacity:.65}.best-chip strong{font-size:14px}
.hero-lockup{position:absolute;z-index:2;inset-inline:20px;top:16%;text-align:center}.eyebrow{display:inline-block;padding:6px 14px;border-radius:99px;background:#17394022;color:#183b41;font-size:12px;font-weight:700}.hero-lockup h1{font-size:clamp(58px,18vw,90px);line-height:1;margin:12px 0 -5px;letter-spacing:-5px;color:#fff7df;text-shadow:0 7px 0 #b96b2d,0 13px 23px #3a3d2633}.hero-lockup h1 span{color:#ffd05d}.camel-emblem{position:relative;height:210px;display:grid;place-items:center}.emblem-ring{position:absolute;width:185px;height:185px;border:2px dashed #17394042;border-radius:50%;animation:spin 30s linear infinite}.emblem-ring:before,.emblem-ring:after{content:"✦";position:absolute;color:#fff2c4;top:7px;left:20px}.emblem-ring:after{top:auto;left:auto;bottom:5px;right:22px}.camel-emoji{font-size:142px;line-height:1;filter:drop-shadow(0 14px 4px #6f412c44);animation:camelFloat 2.2s ease-in-out infinite}.hero-lockup p{font-size:14px;font-weight:700;margin:0;color:#213e3e}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes camelFloat{50%{transform:translateY(-7px) rotate(-1.5deg)}}
.menu-actions{position:absolute;z-index:3;bottom:calc(47px + env(safe-area-inset-bottom,0px));inset-inline:24px;text-align:center}.primary-button{width:100%;min-height:60px;padding:12px 22px;border-radius:20px;background:linear-gradient(135deg,#173d43,#0f2a30);color:#fff8e7;font-weight:900;font-size:20px;box-shadow:0 9px 0 #081f23,0 16px 32px #0f292e4d;display:flex;align-items:center;justify-content:center;gap:12px}.primary-button b{font-size:27px;color:#ffcf64}.primary-button:active{box-shadow:0 5px 0 #081f23,0 10px 20px #0f292e4d}.control-hint{font-size:12px;font-weight:700;color:#17383e;margin:21px 0 0}.control-hint span{display:inline-grid;place-items:center;width:30px;height:30px;background:#fff3d3b8;border-radius:50%;margin-left:7px}.menu footer{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:2;inset-inline:0;text-align:center;font-size:9px;color:#663a24aa}
.game{background:#9bc8b7}.game canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.hud{position:absolute;z-index:4;top:0;inset-inline:0;padding:calc(11px + env(safe-area-inset-top,0px)) 12px 0;display:grid;grid-template-columns:1fr 64px 1fr;gap:8px;direction:rtl;pointer-events:none}.meter-card,.distance-card{background:#102f35dc;border:1px solid #fff3;box-shadow:0 6px 18px #0b272d33;color:#fff;border-radius:14px;backdrop-filter:blur(5px)}.meter-card{height:52px;padding:7px 9px}.meter-label{display:flex;justify-content:space-between;font-size:10px;line-height:16px}.meter-label b{font-size:11px}.meter-track{height:8px;border-radius:9px;background:#ffffff20;overflow:hidden}.meter-track i{display:block;height:100%;width:100%;border-radius:inherit;transition:width .25s,background .25s}.health-card i{background:linear-gradient(90deg,#e05e47,#ff9b68)}.stamina-card i{background:linear-gradient(90deg,#dca330,#ffe07d)}.distance-card{height:57px;text-align:center;padding:6px 2px}.distance-card strong{display:block;font-size:21px;line-height:24px}.distance-card span{font-size:9px;color:#f6d986}.pause-button{position:absolute;z-index:7;top:calc(77px + env(safe-area-inset-top,0px));inset-inline-start:13px;width:45px;height:45px;border-radius:14px;background:#12343bd9;color:#fff;font-size:17px;border:1px solid #fff3}.status-pill{position:absolute;z-index:4;top:calc(83px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:5px 12px;background:#e9f0dedd;border:1px solid #fff9;border-radius:99px;font-size:10px;font-weight:900;color:#28503f;transition:.25s}.status-pill.tired{background:#ffdc85;color:#80461f}.status-pill.danger{background:#ef775f;color:#fff;animation:pulse .7s infinite alternate}.tutorial{position:absolute;z-index:6;bottom:20%;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:9px;padding:9px 16px;border-radius:99px;background:#102f35e8;color:#fff8e7;white-space:nowrap;font-size:12px;pointer-events:none}.tutorial.show{display:flex;animation:tutorialBob .8s ease-in-out infinite alternate}.tutorial span{font-size:21px}.countdown{position:absolute;z-index:8;inset:0;display:none;place-items:center;font-size:90px;font-weight:900;color:#fff7dc;text-shadow:0 8px 0 #c16c2e,0 14px 30px #17394066}.countdown.show{display:grid}.jump-zone{position:absolute;z-index:3;inset:110px 0 0;background:transparent;width:100%;height:calc(100% - 110px)}
@keyframes tutorialBob{to{transform:translate(-50%,-7px)}}@keyframes pulse{to{transform:translateX(-50%) scale(1.06)}}
.modal{position:absolute;inset:0;z-index:30;display:none;place-items:center;padding:24px;background:#0c292fbd;backdrop-filter:blur(7px)}.modal.open{display:grid;animation:fadeIn .2s}.modal-card{position:relative;width:min(100%,400px);background:#fff6df;border-radius:28px;padding:30px 24px 24px;box-shadow:0 14px 0 #0a2227,0 30px 70px #0007;text-align:center;border:2px solid #fff}.modal-card:before{content:"";position:absolute;inset:7px;border:1px dashed #c5985c60;border-radius:22px;pointer-events:none}.close-button{position:absolute;z-index:2;top:13px;inset-inline-end:13px;width:44px;height:44px;border-radius:14px;background:#173940;color:#fff;font-size:26px}.modal-kicker{display:inline-block;color:#a06432;font-size:11px;font-weight:900}.modal h2{margin:4px 0 20px;font-size:26px}.guide-list{display:grid;gap:10px;margin-bottom:22px;text-align:right}.guide-list>div{display:flex;align-items:center;gap:12px;padding:10px;border-radius:17px;background:#f2e4c6}.guide-icon{width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:26px;color:#fff}.jump-icon{background:#4d898b}.cactus-icon{background:#4f9a62}.tired-icon{background:#dd8148}.guide-list p{margin:0}.guide-list strong,.guide-list small{display:block}.guide-list strong{font-size:14px}.guide-list small{font-size:10px;color:#6c6556;margin-top:3px}.compact{min-height:54px;font-size:16px;border-radius:17px}.small-card{max-width:330px}.ghost-button{width:100%;min-height:48px;margin-top:12px;background:transparent;font-weight:700;color:#754b30}.result-icon{width:75px;height:75px;display:grid;place-items:center;margin:-70px auto 8px;border-radius:50%;background:#173940;color:#ffd373;font-size:42px;border:5px solid #fff6df;box-shadow:0 8px 20px #0003}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.result-grid div{background:#eddfbf;padding:12px 5px;border-radius:16px}.result-grid small,.result-grid strong{display:block}.result-grid small{font-size:10px;color:#7e6a4e}.result-grid strong{font-size:18px}.record-line{font-size:11px;color:#6e5a43;margin:10px 0 20px}.record-line.new{color:#b36b23;font-weight:900}.toast{position:absolute;z-index:50;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,20px);opacity:0;background:#102f35e8;color:#fff;padding:10px 18px;border-radius:99px;font-size:12px;white-space:nowrap;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fadeIn{from{opacity:0}}@media (max-height:680px){.hero-lockup{top:13%}.camel-emblem{height:160px}.camel-emoji{font-size:110px}.emblem-ring{width:145px;height:145px}.hero-lockup h1{font-size:55px}.menu-actions{bottom:35px}.control-hint{margin-top:14px}}
@media (min-width:521px){.app{border-inline:1px solid #ffffff20}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* هویت بصری عربی و کنترل زبان */
.menu-sky:after{background:linear-gradient(45deg,#173a4112 12.5%,transparent 12.5%,transparent 37.5%,#173a4112 37.5%,#173a4112 62.5%,transparent 62.5%,transparent 87.5%,#173a4112 87.5%);background-size:34px 34px;mask-image:linear-gradient(#0007,transparent 72%)}
.menu-top{padding-inline:10px;gap:5px}.icon-button{width:44px;height:44px;flex:none}.lang-button{width:auto;min-width:82px;padding-inline:10px;font-size:12px;font-weight:900;color:#ffd470}.best-chip{padding:6px 9px 5px;min-width:88px}.best-chip small{font-size:8px}.best-chip strong{font-size:12px}.control-hint i{font-style:normal}
.camel-art{position:relative;width:min(92vw,410px);height:190px;object-fit:contain;filter:drop-shadow(0 14px 5px #6f412c55);animation:camelFloat 2.2s ease-in-out infinite;z-index:1}
@media(max-width:350px){.menu-top{gap:3px;padding-inline:6px}.icon-button{width:40px;height:40px}.lang-button{min-width:74px;padding-inline:7px;font-size:11px}.best-chip{min-width:80px;padding-inline:5px}.camel-art{height:160px}}
