@import url('fonts/fonts.css');
:root{font-family:Manrope,Arial,sans-serif;font-synthesis:none;color:#f4f2ff;background:#0d0c16;--lime:#d9ff71;--muted:#a29ab6;--panel:#211d33;--border:#3a334c;--purple:#b8a0ff;--orange:#ffa16c;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--dock-space:132px;--hop-duration:480ms}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;scroll-padding-block-end:calc(var(--dock-space) + var(--safe-bottom) + 20px)}
body{margin:0;min-height:100vh;min-height:100svh;background:#0d0c16;overflow-x:clip}
body[data-playing=true]{--dock-space:174px}
button,input,select,a{-webkit-tap-highlight-color:transparent}
button,.board[role=button]{touch-action:manipulation}
button,input,select{font:inherit}
button{border:0;cursor:pointer;color:inherit}
button:disabled{cursor:default}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
[hidden]{display:none!important}
a{text-decoration:none;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u-icon{display:inline-block;vertical-align:middle;width:24px;height:24px;flex-shrink:0}
.phone{width:100%;max-width:430px;min-height:100vh;min-height:100svh;margin-inline:auto;padding:0 16px calc(var(--dock-space) + var(--safe-bottom) + 20px);background:#151323;box-shadow:0 0 80px #0005}

/* The safe area is applied once; header and controls stay in document flow. */
.app-context-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:40px;padding-top:calc(8px + var(--safe-top));color:#aaa0be;font-size:9px;line-height:1.6}
.app-context-bar>span,.parent-app{min-width:0}
.language-control{display:flex;align-items:center;flex-shrink:0;max-width:136px}
#language-select{max-width:136px;min-height:30px;padding:4px 9px;border:1px solid #4b405d;border-radius:8px;background:#252034;color:#e5dcf5;font:700 10px/1.5 Manrope,'Noto Sans Arabic',Arial,sans-serif;cursor:pointer;direction:ltr}
#language-select option{background:#252034;color:#f4f2ff}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:65px;padding-block:8px}
.wordmark{display:flex;align-items:center;gap:8px;direction:ltr;unicode-bidi:isolate;flex-shrink:0;font:800 25px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.3px}
.logo-mark{display:grid;place-items:center;width:32px;height:35px;flex-shrink:0;border-radius:9px;background:var(--lime);color:#20291c;transform:rotate(-6deg)}
.logo-mark .u-icon{width:26px;height:26px}
.logo-slash{padding-inline:2px;color:var(--lime)}
.wordmark small{display:block;margin-top:4px;color:#aaa0be;font:600 6px/1.7 Manrope,Arial,sans-serif;letter-spacing:1.3px}
.wallet{display:flex;align-items:center;gap:6px;min-width:0;max-width:48%;min-height:42px;padding:8px 9px;background:#292337;border:1px solid #44394e;border-radius:12px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.wallet>svg{width:20px;height:20px;flex-shrink:0}
.wallet-plus{display:grid;place-items:center;width:21px;height:21px;margin-inline-start:2px;border-radius:6px;background:#40344f;color:#d5c8e9;flex-shrink:0}
.wallet-plus .u-icon{width:14px;height:14px}
.wallet:disabled .wallet-plus{opacity:.35}
.account-connection{margin:0 0 9px;color:#ad9dbc;font-size:9px;line-height:1.7;overflow-wrap:anywhere}
.account-connection[data-status=connected]{color:#d0e9a5}
.account-connection[data-status=expired],.account-connection[data-status=error]{color:#f3bfad}
.top-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #353044;margin-bottom:14px}
.tab-group{display:flex;align-items:stretch;gap:19px;flex:1;min-width:0}
.tab-group>button{position:relative;min-width:0;min-height:43px;padding:5px 0 11px;background:transparent;color:#a39ab6;font-size:10px;font-weight:700;line-height:1.5}
.tab-group>button[aria-selected=true]{color:#fff}
.tab-group>button[aria-selected=true]:after{position:absolute;content:'';bottom:-1px;inset-inline:0;height:2px;border-radius:2px;background:var(--lime)}
.tab-label{font:inherit;color:inherit}
#history-count{display:inline-block;padding:1px 4px;margin-inline-start:3px;border-radius:4px;background:#342d45;color:#bfb3d2;font-size:7px;vertical-align:middle}
#activity-tab,[data-i18n="nav.online"]{direction:ltr;unicode-bidi:isolate}
.demo-badge{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-bottom:6px;color:#b8adcc;font-size:8px;font-weight:800;letter-spacing:.8px}
.demo-badge i,.green-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);flex-shrink:0}
.game-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.game-heading>div:first-child{flex:1;min-width:0}
.micro-label{margin:0 0 5px;color:var(--muted);font-size:7px;font-weight:800;line-height:1.7;letter-spacing:1.1px}
.game-heading .micro-label{display:none}
.game-heading h1{margin:0;font-size:19px;font-weight:800;line-height:1.45;letter-spacing:-.6px;overflow-wrap:anywhere}
.utility-buttons{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-button{display:grid;place-items:center;width:34px;height:36px;padding:0;border:1px solid #43384e;border-radius:10px;background:#282034;color:#d1c5e3;flex-shrink:0}
.icon-button svg{width:18px;height:18px}
.icon-button[aria-pressed=true]{color:var(--lime);background:#3d304e}

/* The multiplier has a compact panel, without a mask over the road. */
.score-panel{margin:0 0 10px;padding:9px 12px;border:1px solid #44384f;border-radius:13px;background:#211c30}
.board-score{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:3px 14px;text-align:start;pointer-events:none}
.board-score>span:first-child{grid-column:1;grid-row:1;color:#b6a5ca;font-size:8px;font-weight:800;line-height:1.6;letter-spacing:.9px}
.board-score strong{grid-column:2;grid-row:1 / span 2;display:block;margin:0;color:#fff;font:800 39px/1 'Barlow Condensed','Noto Sans Arabic',Impact,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap}
.board-score strong>span{margin-inline-start:3px;color:var(--lime);font-size:28px}
.score-caption{grid-column:1;grid-row:2;display:block;min-width:0;color:#d5c6e5;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.score-panel[data-state=won] strong{color:var(--lime)}
.score-panel[data-state=crashed] strong{color:#ffb4b3}
.route-progress{grid-column:1 / -1;display:flex;align-items:center;gap:4px;margin-top:5px}
.route-progress>span{flex:1;height:3px;border-radius:2px;background:#51435e}
.route-progress>span.cleared{background:#b7db70}
.route-progress>span.current{height:5px;background:#efdbff;box-shadow:0 0 0 2px #b79fc533}
.route-progress>span.failed{background:#eea5a5}

/* Physical road and car coordinates do not mirror with the Arabic UI. */
.board{position:relative;isolation:isolate;direction:ltr;height:270px;overflow:hidden;border:1px solid #60576f;border-radius:18px;background:#454459;box-shadow:0 5px 0 #0b0913}
.scene-light{display:none}
.road-world{position:absolute;inset:0;transition:none;will-change:transform}
.road-lane{position:absolute;left:0;right:0;height:56px;overflow:hidden;border-top:2px solid #777087;border-bottom:1px solid #2f2c40;background:#49475e}
.road-lane:nth-child(even){background:#414057}
.road-lane:before{position:absolute;content:'';left:0;right:0;top:25px;height:3px;background:repeating-linear-gradient(90deg,#b4a9c6 0 24px,transparent 24px 51px)}
.road-lane:after{position:absolute;content:'';left:0;top:0;width:16px;height:100%;border-right:2px solid #a59aae;background:repeating-linear-gradient(0deg,#877d94 0 10px,#60596f 10px 20px)}
.lane-label{position:absolute;left:24px;top:17px;z-index:4;min-width:43px;padding:5px 6px;border:1px solid #8b7d9d;border-radius:6px;background:#292437;color:#eadcf8;text-align:center;font:700 10px/1.3 'Barlow Condensed','Noto Sans Arabic',sans-serif;letter-spacing:.2px}
.road-lane.next{border-top-color:#b6cc7b}
.road-lane.next .lane-label{border-color:#b8db69;background:#2c3929;color:var(--lime)}
.road-lane.cleared{border-top-color:#8aa275;background:#3d5949}
.road-lane.cleared .lane-label{border-color:#9bb478;background:#2d4334;color:#d9f8c7}
.road-lane.cleared .lane-label:before{content:'✓ ';font-size:8px}
.traffic{position:absolute;left:-105px;top:4px;z-index:2;width:95px;height:48px;opacity:1;animation:traffic var(--speed,4s) linear infinite;animation-delay:var(--delay,-1s);will-change:transform}
.traffic svg{display:block;width:100%;height:100%}
.road-lane.reverse .traffic{left:auto;right:-105px;animation-name:traffic-reverse}
.road-lane.reverse .traffic svg{transform:scaleX(-1)}
.road-lane.cleared .traffic,.road-lane.occupied .traffic,.road-lane.crossing .traffic{display:none}
.road-lane[data-type=truck] .traffic,.road-lane[data-type=oil] .traffic,.road-lane[data-type=barrier] .traffic,.road-lane[data-type=manhole] .traffic,.road-lane[data-type=ambush] .traffic{display:none}
.obstacle-sprite{position:absolute;left:50%;top:1px;z-index:3;width:100px;height:55px;transform:translateX(-50%);opacity:1;pointer-events:none}
.obstacle-sprite svg{display:block;width:100%;height:100%}
.obstacle-sprite[data-mode=marker],.road-lane[data-type=unknown] .obstacle-sprite{top:13px;width:28px;height:28px;padding:4px;border:1px solid #ad9cbe;border-radius:7px;background:#332b45}
.obstacle-sprite[data-mode=hazard]{top:1px;width:100px;height:55px;padding:0;border:0;border-radius:0;background:transparent}
.road-lane[data-type=barrier] .obstacle-sprite[data-mode=hazard]{top:1px;width:110px;height:55px}
.road-lane[data-type=manhole] .obstacle-sprite[data-mode=hazard]{width:90px;height:55px}
.road-lane[data-type=ambush] .obstacle-sprite[data-mode=hazard]{top:1px;width:120px;height:55px}
.road-lane[data-type=oil]{background:#3b5561}
.road-lane[data-type=barrier]{background:#5a4650}
.road-lane[data-type=manhole]{background:#424358}
.road-lane[data-type=ambush]{background:#54445e}
.road-lane.cleared .obstacle-sprite[data-mode=marker],.road-lane.crossing .obstacle-sprite[data-mode=marker],.road-lane.occupied .obstacle-sprite[data-mode=marker],.road-lane.failed .obstacle-sprite[data-mode=marker]{display:none}
.obstacle-sprite.avoided,.road-lane.avoided .obstacle-sprite[data-mode=hazard]{opacity:1;filter:drop-shadow(0 2px 0 #10251a55)}
.road-lane.failed{border-top-color:#bd7c7e;background:#764d59}
.road-lane.failed .lane-label{border-color:#dd9992;color:#ffe1d9;background:#57353e}
.road-lane.failed .obstacle-sprite[data-mode=hazard]{z-index:5}
.road-lane.failed[data-type=traffic] .traffic{display:none}
.road-lane.failed.crossing .traffic{display:none}
.road-lane.failed[data-type=traffic] .obstacle-sprite{display:none}
.board[data-collision=standing] .road-lane.failed .traffic,.board[data-collision=standing] .road-lane.failed .obstacle-sprite{display:none}
.board[data-impact-car=truck] .road-lane.failed .obstacle-sprite{display:none}
.lane-start{position:absolute;left:0;right:0;top:226px;height:180px;border-top:5px solid #bdd48b;background:#4a7156;box-shadow:inset 0 6px 0 #36523b}
.lane-start:before{position:absolute;content:'';inset:15px 0 0;background-image:radial-gradient(#c5dca1 1px,transparent 1px);background-size:13px 11px}
.lane-start:after{position:absolute;content:'';left:22px;top:17px;width:27px;height:22px;border-radius:18px 18px 5px 5px;background:#8b9d5d;box-shadow:7px 2px 0 #68834b,295px 17px 0 #769b63,303px 11px 0 #9aaf69,286px 10px 0 #5c824a}
.lane-finish{border-color:#b0d381;background:#60845b!important}
.lane-finish:before{top:22px;height:12px;background:repeating-linear-gradient(90deg,#e3eac9 0 18px,#273c35 18px 36px)}
.lane-finish .lane-label{background:var(--lime);color:#263b24}
.lane-finish .traffic{display:none}
.distance-pill{position:absolute;right:10px;top:10px;z-index:8;display:flex;align-items:center;gap:3px;padding:6px 7px;border:1px solid #8a7a9e;border-radius:7px;background:#242034;color:#eadcf8;font-size:8px;font-variant-numeric:tabular-nums}
.distance-pill #step-count{font-weight:800;color:#fff}
.distance-pill i{width:2px;height:2px;margin-inline:2px;border-radius:50%;background:#a995be}
.distance-pill>span:last-child{font-size:6px;letter-spacing:.3px}
.player{position:absolute;left:0;top:186px;z-index:7;width:78px;height:78px;transform:translate3d(calc(var(--player-x,180px) - 50%),0,0);transition:none;will-change:transform}
.player>svg{position:relative;z-index:1;display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 #172b2055)}
.player-shadow{position:absolute;left:15px;bottom:4px;width:48px;height:11px;border-radius:50%;background:#172c2355;filter:blur(2px)}
.player.hopping>svg{transform:translate3d(0,var(--hop-lift,0px),0) scale(var(--hop-scale-x,1),var(--hop-scale-y,1))}
.player.hopping .player-shadow{transform:scale(var(--shadow-scale,1))}
.player.crashed>svg{transform:rotate(17deg) translateY(7px);filter:saturate(.75) drop-shadow(0 3px 0 #301a2955)}
.player.fell>svg{transform:scale(.7,.4) translateY(55px)}
.standing-car{position:absolute;left:0;top:4px;z-index:8;width:94px;height:47px;transform:translate3d(0,0,0);opacity:1;pointer-events:none;will-change:transform;filter:drop-shadow(0 3px 3px #15172466)}
.standing-car svg{display:block;width:100%;height:100%}
.standing-car.from-right svg{transform:scaleX(-1)}
.standing-car[data-kind=truck]{top:1px;width:118px;height:53px}
.hop-impact:not(.board){position:absolute;left:50%;top:205px;z-index:10;display:grid;place-items:center;width:80px;height:65px;transform:translateX(-50%);pointer-events:none}
.hop-impact:not(.board) .u-icon,.hop-impact:not(.board) svg{width:100%;height:100%}
.hop-impact.hit:not(.board){animation:impact .38s cubic-bezier(.15,.7,.2,1) both}
.board.hop-impact,.board.hit{animation:board-hit .3s ease}
.board[data-state=crashed]{border-color:#e7979a}
.board[data-state=won]{border-color:#c4e975}
.floating-result{position:absolute;left:50%;top:130px;z-index:11;max-width:calc(100% - 24px);padding:9px 13px;border:1px solid #b9da63;border-radius:11px;background:var(--lime);color:#26341d;font-size:13px;font-weight:800;line-height:1.5;text-align:center;transform:translateX(-50%);box-shadow:0 3px 0 #25361c44;animation:result-in .25s ease}
.floating-result.loss{border-color:#f2b29f;background:#ffd6c4;color:#663638;font-size:11px}
.start-sign{position:absolute;left:18px;bottom:46px;z-index:5;display:flex;align-items:center;gap:7px;color:#effac7;transform:rotate(-7deg);font:800 13px/1.5 'Barlow Condensed',Arial,sans-serif;letter-spacing:1px}
.start-sign>span:first-child{font:inherit;color:inherit}
.start-sign .u-icon{width:22px;height:22px}
.board-footer{position:absolute;left:10px;right:10px;bottom:8px;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#f0ebf8;font-size:7px;font-weight:800;line-height:1.6;letter-spacing:.5px;pointer-events:none}
.board-footer>span{display:flex;align-items:center;gap:5px;max-width:42%;padding:3px 5px;border-radius:5px;background:#242735}
.board-footer>span:last-child{color:#dfd2ee;font-size:7px}
.board-footer .green-dot{width:4px;height:4px}

.challenge-strip{display:flex;align-items:center;gap:10px;min-height:55px;margin-top:13px;padding:10px 11px;border:1px solid #4a3b58;border-radius:13px;background:#251e33}
.challenge-icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #806190;border-radius:10px;background:#40304e;color:#dfc4f9}
.challenge-icon .u-icon{width:23px;height:23px}
.challenge-strip>div{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.challenge-strip>div>span{color:#b09ac4;font-size:7px;font-weight:700;line-height:1.6;letter-spacing:.7px}
.challenge-strip strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.challenge-chance{flex-shrink:0;margin-inline-start:auto;color:var(--lime);font-size:13px;font-weight:800;line-height:1.5;white-space:nowrap}
.challenge-strip.danger{border-color:#987066}
.challenge-strip.danger .challenge-icon{border-color:#bc805d;background:#513940;color:#ffd2a6}
.round-feedback{display:flex;align-items:flex-start;gap:7px;min-height:31px;margin:9px 0 17px;color:#bcaacb;font-size:10px;line-height:1.7}
.feedback-icon{display:flex;align-items:center;flex-shrink:0;color:var(--purple);line-height:1.7}
.feedback-icon .u-icon{width:16px;height:16px;margin-top:1px}
#feedback-text{min-width:0;overflow-wrap:anywhere}
.round-feedback.win{color:var(--lime)}
.round-feedback.loss{color:#ffcab6}
.bet-controls{scroll-margin-block-end:calc(var(--dock-space) + var(--safe-bottom) + 16px)}
.control-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin-bottom:8px;font-size:11px;font-weight:700;line-height:1.5}
.control-heading label>span:first-child{font:inherit;color:inherit}
.control-heading label>span+span{margin-inline-start:4px;color:#a79ab7;font-size:9px;font-weight:400}
.limits{color:#9e8caf;font-size:9px;font-weight:500}
.stake-row{display:flex;gap:8px}
.adjust-button{flex-shrink:0;width:44px;min-height:48px;border:1px solid #4d3c57;border-radius:12px;background:#2c243b;color:#ddc9ee;font-size:24px}
.adjust-button:disabled{opacity:.4}
.stake-input{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0 12px;border:1px solid #5d496c;border-radius:12px;background:#241d32}
.stake-input svg{width:20px;height:20px;flex-shrink:0}
.stake-input input{width:100%;min-width:0;padding:9px 0;border:0;outline:0;appearance:textfield;-moz-appearance:textfield;background:transparent;color:#fff;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;text-align:start;scroll-margin-block-end:calc(var(--dock-space) + var(--safe-bottom) + 16px)}
.stake-input input::-webkit-inner-spin-button,.stake-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stake-input>span{flex-shrink:0;color:#a38bae;font-size:8px}
.stake-input:focus-within{border-color:var(--purple);box-shadow:0 0 0 2px #b8a0ff18}
.input-error{margin:8px 0 0;color:#ffc7b8;font-size:10px;line-height:1.7}
.stake-presets{display:flex;gap:7px;margin-top:8px}
.stake-presets button{flex:1;min-width:0;min-height:36px;border:1px solid #45344f;border-radius:9px;background:#251d33;color:#baa5cb;font-size:11px;font-weight:700}
.stake-presets button.selected{border-color:#9a7fb6;background:#443258;color:#f0e2ff}
.stake-presets button:disabled{opacity:.45}
.round-limit{display:flex;align-items:center;gap:6px;margin:11px 1px 0;color:#b5a0c5;font-size:9px;line-height:1.7}
.round-limit svg{width:15px;height:15px;color:#ceb0ea;flex-shrink:0}
.round-limit strong{margin-inline-start:auto;color:#e6d1f6;font-size:11px;white-space:nowrap}
.standard-difficulty{margin-top:10px;margin-bottom:0;color:#ad97bd;font-size:9px;font-weight:500}
.odds-label{margin-inline-start:auto;color:#c4afd3;font-size:9px;font-weight:500}
.game-note{display:flex;align-items:flex-start;justify-content:center;gap:5px;margin:12px 0 0;color:#a48ab5;font-size:8px;line-height:1.7;text-align:center}
.game-note .u-icon{width:12px;height:12px;flex-shrink:0}
.share-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:36px;margin:12px auto 0;padding:4px 8px;background:transparent;color:#d2b4ed;font-size:11px;line-height:1.6}
.share-button .u-icon{width:17px;height:17px}

/* The dock is the only fixed game control; its children remain in normal flow. */
.action-dock{position:fixed;left:50%;bottom:0;z-index:50;width:calc(100% - 20px);max-width:414px;padding:10px 11px calc(10px + var(--safe-bottom));border:1px solid #6b537c;border-bottom:0;border-radius:18px 18px 0 0;background:#21192f;box-shadow:0 -5px 30px #07040dc9;transform:translateX(-50%)}
.dock-summary{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:10px;min-height:16px;margin:0 0 8px;color:#bba4cc;font-size:9px;line-height:1.6}
.dock-summary>span{min-width:0}
.dock-summary strong{color:#efdef9;font-size:10px;font-weight:700}
.dock-summary>span:last-child{text-align:end}
.dock-balance{display:flex;align-items:flex-start;flex-direction:column;gap:2px;line-height:1.4}
.dock-balance>span{font-size:7px}
.dock-balance strong{font-size:11px}
.dock-summary .round-limit{display:grid;grid-template-columns:13px minmax(0,1fr) auto;min-width:0;margin:0;font-size:8px;gap:4px}
.dock-summary .round-limit strong{font-size:10px}
.dock-summary .round-limit svg{width:13px;height:13px}
.play-actions{position:static;margin:0;min-height:0}
.main-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:54px;padding:10px 15px;border:1px solid #d8f38b;border-radius:12px;background:var(--lime);color:#26331d;box-shadow:0 3px 0 #7f9944;font-size:14px;font-weight:800;line-height:1.5}
.main-button:disabled{border-color:#a8b879;background:#b4c77b;box-shadow:0 3px 0 #66733f;color:#45503a}
.main-button>span:first-child{min-width:0}
.button-detail{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-inline-start:auto;margin-inline-end:10px;font-size:12px;direction:ltr;unicode-bidi:isolate}
.button-detail svg{width:19px;height:19px}
.button-arrow{display:flex;align-items:center;flex-shrink:0;font-size:23px;line-height:1}
.button-arrow .u-icon{width:23px;height:23px}
#start-button{position:static;left:auto;bottom:auto;width:100%;transform:none}
.active-actions{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.17fr);gap:8px;transform:none;width:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.action-clock{position:relative;grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;padding:5px 9px;overflow:hidden;border:1px solid #72556f;border-radius:8px;background:#3d2c46;color:#f0dcef;font-size:9px;line-height:1.5}
.action-clock>span,.action-clock strong{position:relative;z-index:1}
.action-clock>span{min-width:0}
.action-clock strong{flex-shrink:0;min-width:38px;color:#ffd3a5;font-size:12px;font-variant-numeric:tabular-nums;text-align:end}
.action-clock i{position:absolute;inset:0;background:#98637555;transform-origin:left;pointer-events:none}
.action-clock.urgent{border-color:#de9892;background:#7b3d48}
.action-clock.urgent strong{color:#fff4dd}
.action-clock.urgent i{background:#ef9d7e44}
.cashout-button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-width:0;min-height:57px;padding:7px;border:1px solid #9a73b8;border-radius:12px;background:#49345e;color:#f0ddff;box-shadow:0 3px 0 #130d1b;font-size:10px;line-height:1.5}
.cashout-button strong{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.cashout-button:disabled{border-color:#624c75;background:#32263f;color:#9c8bab;box-shadow:none}
.step-button{min-height:57px;padding:7px 8px;flex-direction:column;justify-content:center;gap:2px;font-size:14px}
.step-button>span{display:flex;align-items:center;justify-content:center;gap:8px}
.step-button b{font-size:20px;font-weight:500;line-height:1}
.step-button .u-icon{width:20px;height:20px}
.step-button small{max-width:100%;font-size:9px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.action-dock .game-note{align-items:center;margin:8px 0 0}
#dock-note{margin:0;color:#a993b7;font-size:8px;line-height:1.6;text-align:center}
#cashout-value,#round-cap,.floating-result>span,.demo-event-result strong,.history-row-right>span{display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:100%;vertical-align:middle}
#cashout-value svg{width:17px;height:17px;flex-shrink:0}
#round-cap svg{width:14px;height:14px;flex-shrink:0}
.floating-result>span svg{width:17px;height:17px;flex-shrink:0}
.demo-event-result strong svg{width:15px;height:15px;flex-shrink:0}
.history-row-right>span svg{width:15px;height:15px;flex-shrink:0}

.recent-section{padding:19px 0 17px}
.recent-header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b49bc4;font-size:8px;font-weight:700;line-height:1.5;letter-spacing:.8px}
.recent-header button{display:flex;align-items:center;gap:4px;min-height:29px;padding:0;background:transparent;color:#d1b3e6;font-size:9px;letter-spacing:0}
.recent-header .u-icon{width:14px;height:14px}
.recent-chips{display:flex;gap:6px;min-height:34px;padding:7px 0 1px;overflow-x:auto;scrollbar-width:none}
.recent-chips::-webkit-scrollbar{display:none}
.recent-chip{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:48px;padding:6px 9px;border:1px solid #826196;border-radius:7px;background:#362641;color:#e0befa;font-size:9px;font-weight:800;line-height:1.5}
.recent-chip.loss{border-color:#72474f;background:#3e2534;color:#e2a9ad}
.empty-recent{color:#9f87ad;font-size:9px;line-height:1.8;letter-spacing:0}
.demo-preview{padding:17px 0 23px;border-top:1px solid #3a2d45}
.feed-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feed-heading>div{min-width:0}
.feed-heading .micro-label{margin-bottom:4px;font-size:7px}
.feed-heading h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:16px;font-weight:800;line-height:1.6;letter-spacing:-.4px}
.feed-heading>button{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid #705183;border-radius:10px;background:#362440;color:#dbb8f5}
.feed-heading>button .u-icon{width:19px;height:19px}
.simulation-tag{display:inline-flex;align-items:center;padding:3px 6px;border:1px solid #916f4f;border-radius:5px;background:#48362c;color:#f0d2a6;font-size:7px;font-weight:800;line-height:1.5;letter-spacing:.7px;white-space:nowrap}
.simulation-disclosure{margin:10px 0 8px;color:#bea6cc;font-size:9px;line-height:1.8}
.demo-event{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #3b2d46;animation:feed-in .2s ease}
.demo-avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid var(--actor-color,#b59bce);border-radius:10px;background:#372844;color:#e9d7f7;font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.5px;direction:ltr;unicode-bidi:isolate}
.demo-avatar .u-icon,.demo-avatar svg{width:24px;height:24px}
.demo-event-body{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.demo-event-body strong{color:#ead8f3;font-size:11px;font-weight:700;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
.demo-event-body small{color:#ad94bd;font-size:8px;line-height:1.7}
.demo-event-result{display:flex;align-items:flex-end;flex-direction:column;gap:4px;flex-shrink:0;max-width:44%;margin-inline-start:auto;text-align:end}
.demo-event-result strong{color:var(--lime);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.demo-event-result small{color:#b19bc0;font-size:8px;line-height:1.6}
.demo-event.loss .demo-event-result strong{color:#e2a9ae}
.simulation-summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:15px;padding:12px;border:1px solid #65506d;border-radius:12px;background:#30233b;color:#cbb4d8;font-size:9px;line-height:1.7}
.simulation-summary>span:last-child{margin-inline-start:auto;color:#efd0a8}

.history-heading{padding:8px 0 20px}
.history-heading h2{margin:8px 0 10px;font-size:25px;line-height:1.45;letter-spacing:-.8px;overflow-wrap:anywhere}
.history-heading>p:last-child{margin:0;color:#b1a0bf;font-size:11px;line-height:1.8}
.stats-row{display:grid;grid-template-columns:.8fr 1.2fr 1fr;overflow:hidden;margin-bottom:20px;border:1px solid #51405f;border-radius:13px}
.stats-row>div{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 10px;background:#271e35}
.stats-row>div+div{border-inline-start:1px solid #51405f}
.stats-row span{color:#bfa6d0;font-size:8px;line-height:1.6}
.stats-row strong{color:#e7d6f8;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.4;letter-spacing:-.4px;overflow-wrap:anywhere}
.history-list{min-height:220px}
.history-empty{padding:32px 20px;border:1px dashed #6e4e80;border-radius:15px;color:#c0a5d0;text-align:center}
.history-empty>span{display:block;margin-bottom:15px;color:#cab0e6}
.history-empty>span .u-icon{width:45px;height:45px}
.history-empty h3{margin:0 0 9px;color:#eedff7;font-size:15px;line-height:1.6}
.history-empty p{margin:0;font-size:11px;line-height:1.9}
.history-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #3a2b44}
.history-result{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#33453d;color:var(--lime)}
.history-result .u-icon{width:21px;height:21px}
.history-result.loss{background:#4c2f42;color:#ffc3b1}
.history-row>div:nth-child(2){min-width:0;flex:1}
.history-row-title{font-size:11px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.history-row-detail{margin-top:3px;color:#b197c2;font-size:8px;line-height:1.8;overflow-wrap:anywhere}
.history-row-right{flex-shrink:0;margin-inline-start:auto;color:var(--lime);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:end}
.history-row-right.loss{color:#e0a5ad}
.history-row-right>small{display:block;margin-top:4px;color:#aa90ba;font-size:8px;font-weight:500}
.history-play{margin:23px 0 26px}
.economy-panel{overflow:hidden;margin:16px 0 20px;border:1px solid #594160;border-radius:13px;background:#21192e}
.economy-panel>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px;list-style:none;color:#dac1eb;font-size:11px;font-weight:700;cursor:pointer}
.economy-panel>summary::-webkit-details-marker{display:none}
.economy-panel>summary svg{width:18px;height:18px;color:#b7ce8d}
.economy-panel>summary>span:last-child{margin-inline-start:auto}
.economy-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-top:1px solid #4a3455;background:#4a3455}
.economy-grid>div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:13px 12px;background:#2a1d37}
.economy-grid span{color:#bfa4d0;font-size:9px;line-height:1.6}
.economy-grid strong{color:#e2edc8;font-size:15px;font-variant-numeric:tabular-nums}
.economy-panel>p{margin:0;padding:13px 12px;color:#c0a9cf;font-size:10px;line-height:1.9}
.app-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:7px;padding:16px 0 8px;border-top:1px solid #3b2b46;color:#a389b2;font-size:7px;font-weight:700;line-height:1.7;letter-spacing:.4px}
.app-footer>span:first-child{color:#c2a8d5;font-family:'Barlow Condensed',Impact,sans-serif;font-size:13px;letter-spacing:.7px}
.app-footer>span:nth-child(2){min-width:0;text-align:center}
.app-footer>span:last-child{color:#b99cce}
.app-footer .u-icon{width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:calc(var(--dock-space) + var(--safe-bottom) + 12px);z-index:150;width:max-content;max-width:min(398px,calc(100vw - 28px));padding:11px 15px;border:1px solid #f1e5ff;border-radius:12px;background:#e8deff;color:#292034;box-shadow:0 5px 30px #0007;transform:translateX(-50%);font-size:11px;font-weight:700;line-height:1.7}

/* A connected account balance is visually distinct from the playable demo pool. */
.demo-wallet,.demo-balance-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:8px 10px;border:1px solid #69533d;border-radius:10px;background:#342a25;color:#d8c3a6;font-size:10px;line-height:1.6}
.demo-wallet strong,.demo-balance-summary strong{color:#ffe7b8;font-size:12px;font-weight:800}
.dock-summary .demo-balance-summary{gap:5px;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:8px}
.dock-summary .demo-balance-summary strong{font-size:10px}
.account-wallet{padding:14px;border:1px solid #756087;border-radius:14px;background:#21182f;margin-bottom:22px}
.account-wallet .account-label{margin:0;color:#c7acd9;font-size:10px;line-height:1.7}
#account-balance{display:block;margin:8px 0;color:#e9f9c8;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.4;direction:ltr;unicode-bidi:isolate;text-align:start}
#account-status{margin:0 0 14px;color:#bda5ce;font-size:11px;line-height:1.8;overflow-wrap:anywhere}
.account-wallet[data-status=connected]{border-color:#8fa865}
.account-wallet[data-status=connected] #account-status{color:#d2e6b5}
.account-wallet[data-status=expired] #account-status,.account-wallet[data-status=error] #account-status{color:#f4bfad}
#account-refresh{min-height:43px;font-size:11px}
#demo-balance{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}

dialog{width:calc(100% - 28px);max-width:390px;max-height:calc(100dvh - 28px);overflow-y:auto;padding:22px;border:1px solid #79598c;border-radius:21px;background:#271c36;color:#f6ebff;box-shadow:0 20px 80px #0009;overscroll-behavior:contain}
dialog::backdrop{background:#090612cc;backdrop-filter:blur(5px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.dialog-head .micro-label{margin:0;color:#c3a6d5;font-size:8px}
.dialog-head .icon-button{width:31px;height:31px}
.dialog-head+h2{margin:0 0 23px;font-size:26px;line-height:1.3;letter-spacing:-.8px}
.rules-list{display:flex;flex-direction:column;gap:20px;margin:0 0 20px;padding:0;list-style:none}
.rules-list li{display:flex;gap:12px}
.rules-list li>span{flex-shrink:0;padding-top:2px;color:var(--lime);font-size:10px;font-weight:800}
.rules-list li>div{min-width:0}
.rules-list strong{font-size:12px;line-height:1.7}
.rules-list p{margin:5px 0 0;color:#ccb4dd;font-size:11px;line-height:1.9}
.rules-note{margin-bottom:20px;padding:13px;border:1px solid #4f365e;border-radius:10px;background:#1c1428;color:#bfa2d0;font-size:10px;line-height:1.9}
.dialog-close.main-button{min-height:49px;font-size:12px}
.wallet-coin{margin:8px 0 23px;text-align:center}
.wallet-coin svg{width:70px;height:70px;filter:drop-shadow(0 5px 13px #63deff38)}
#wallet-title{margin:0 0 13px;font-size:25px;line-height:1.4;letter-spacing:-.7px;text-align:center}
.wallet-description{margin:0 0 20px;color:#cbb0db;font-size:12px;line-height:1.9;text-align:center}
.wallet-status{margin:0 0 18px;color:#c7add6;font-size:11px;line-height:1.9;text-align:center;overflow-wrap:anywhere}
#wallet-refresh{padding-block:9px;font-size:12px}
.demo-wallet-heading{margin:20px 0 11px;font-size:17px;line-height:1.5;text-align:center}
.refill-note{margin:15px 0 0;color:#ad8fbe;font-size:10px;line-height:1.8;text-align:center}

/* Text mirrors; roads, animation coordinates and isolated amounts do not. */
#balance,#stake,#multiplier,.lane-label,.distance-pill,.limits,.button-detail,#cashout-value,#clock-value,.recent-chip,.demo-event-result strong,.history-row-right,.stats-row strong,.economy-grid strong,#round-cap{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
html[lang="ar"]{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif}
html[lang="ar"] .wordmark small{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif;font-size:7px;letter-spacing:0;line-height:1.9}
html[lang="ar"] .game-heading h1,html[lang="ar"] .history-heading h2,html[lang="ar"] .dialog-head+h2,html[lang="ar"] #wallet-title{letter-spacing:0;line-height:1.7}
html[lang="ar"] .micro-label,html[lang="ar"] .simulation-tag,html[lang="ar"] .demo-badge,html[lang="ar"] .board-score>span:first-child,html[lang="ar"] .recent-header,html[lang="ar"] .challenge-strip>div>span,html[lang="ar"] .board-footer{letter-spacing:0}
html[lang="ar"] .tab-group>button{font-size:11px;line-height:1.7}
html[lang="ar"] .round-feedback{font-size:11px;line-height:1.9}
html[lang="ar"] .challenge-strip strong{font-size:12px;line-height:1.8}
html[lang="ar"] .challenge-strip>div>span{font-size:8px;line-height:1.7}
html[lang="ar"] .game-note,html[lang="ar"] .simulation-disclosure{font-size:10px;line-height:1.9}
html[lang="ar"] .rules-list strong{line-height:1.9}
html[lang="ar"] .rules-list p,html[lang="ar"] .rules-note{font-size:11px;line-height:2}
html[lang="ar"] .demo-event-body small,html[lang="ar"] .demo-event-result small,html[lang="ar"] .history-row-detail{font-size:9px;line-height:1.9}
html[lang="ar"] .cashout-button{font-size:11px}
html[lang="ar"] .step-button small{font-size:10px}
html[lang="ar"] .action-clock{font-size:10px}
html[lang="ar"] .board-score>span:first-child{font-size:9px}
html[lang="ar"] .score-caption{font-size:11px}
html[lang="ar"] #field-status,html[lang="ar"] #field-mode,html[lang="ar"] .start-sign>span:first-child,html[lang="ar"] .floating-result{direction:rtl;unicode-bidi:isolate;font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif}
html[lang="ar"] #field-status,html[lang="ar"] #field-mode{font-size:8px}
html[dir="rtl"] .action-clock i{transform-origin:right}
html[dir="rtl"] .history-row-right{text-align:left}
html[dir="rtl"] .demo-event-result{align-items:flex-start;text-align:left}

@keyframes traffic{from{transform:translateX(-20px)}to{transform:translateX(550px)}}
@keyframes traffic-reverse{from{transform:translateX(20px)}to{transform:translateX(-550px)}}
@keyframes result-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes impact{0%{opacity:0;transform:translateX(-50%) scale(.35)}45%{opacity:1;transform:translateX(-50%) scale(1.1)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes board-hit{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}100%{transform:none}}
@keyframes feed-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){
 .phone{padding-inline:13px}.app-context-bar{gap:7px;font-size:8px}#language-select{max-width:122px;padding-inline:7px;font-size:9px}.wordmark{gap:6px;font-size:23px}.logo-mark{width:28px;height:32px}.wallet{gap:4px;padding-inline:7px;font-size:11px}.wallet-plus{width:18px;height:18px}.tab-group{gap:12px}.tab-group>button{font-size:9px}.game-heading{gap:7px}.utility-buttons{gap:5px}.icon-button{width:31px;height:34px}.game-heading h1{font-size:17px}.board-score{gap:3px 9px}.board-score strong{font-size:37px}.challenge-strip{gap:8px;padding-inline:9px}.challenge-strip strong{font-size:11px}.challenge-chance{font-size:12px}.button-detail{margin-inline-end:5px}.dock-summary{font-size:8px}.dock-summary strong{font-size:9px}.demo-event{gap:7px}.demo-event-result strong{font-size:11px}.history-row{gap:8px}.history-row-title{font-size:10px}.history-row-right{font-size:11px}.stats-row>div{padding-inline:8px}.stats-row strong{font-size:16px}html[lang="ar"] .tab-group>button{font-size:10px}html[lang="ar"] .round-feedback{font-size:10px}html[lang="ar"] .challenge-strip strong{font-size:11px}html[lang="ar"] .action-clock{font-size:9px}
}
@media(max-height:850px){
 .app-context-bar{min-height:35px;padding-top:calc(5px + var(--safe-top))}
 .app-header{min-height:52px;padding-block:4px}
 .wallet{min-height:44px}
 .account-connection{margin-bottom:3px;font-size:8px;line-height:1.45}
 .top-navigation{margin-bottom:9px}
 .tab-group>button{min-height:38px;padding-block:4px 8px}
 .game-heading{margin-bottom:8px}
 .score-panel{padding-block:7px;margin-bottom:8px}
 .board-score strong{font-size:35px}
 .route-progress{margin-top:3px}
 .challenge-strip{min-height:46px;margin-top:10px;padding-block:8px;gap:9px}
 .round-feedback{min-height:28px;margin-top:5px;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.road-lane .traffic{transform:translateX(180px)}.road-lane.reverse .traffic{transform:translateX(-180px)}.road-lane.failed[data-type=traffic] .traffic{transform:none}}

/* Account-only availability message replaces the former local wallet summary. */
.game-availability{margin:0 0 9px;color:#d9c9e5;font-size:10px;line-height:1.6;text-align:start;overflow-wrap:anywhere}
#start-button:disabled{justify-content:center}
#start-button:disabled .button-arrow{display:none}
#board[aria-disabled="true"]{cursor:default}
#wallet-pending-note{margin:12px 0 0;font-size:11px;line-height:1.7;text-align:center;overflow-wrap:anywhere}

/* Server round status and recovery controls stay inside the mobile action dock. */
.round-status-row{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 8px}
.round-status-row .game-availability{flex:1;min-width:0;margin:0;font-size:9px;line-height:1.6}
.round-retry{flex-shrink:0;max-width:40%;min-height:31px;padding:6px 9px;border:1px solid #8f76a3;border-radius:8px;background:#49365b;color:#f2e3ff;font-size:9px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.round-retry:disabled{opacity:.55}
.round-summary{display:flex;justify-content:flex-end;margin:0 0 8px;min-height:0}
.round-summary .round-limit{max-width:100%;font-size:8px;line-height:1.5}
.round-summary .round-limit strong{white-space:nowrap;font-size:10px}
.history-status{margin:0 0 13px;color:#c4b0d6;font-size:10px;line-height:1.8;overflow-wrap:anywhere}
.history-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.history-tool-button{flex:1;min-width:110px;min-height:40px;padding:9px 12px;border:1px solid #745b89;border-radius:10px;background:#33263f;color:#e3cdee;font-size:10px;font-weight:700;line-height:1.6}
.history-tool-button:disabled{opacity:.5}
.score-panel[data-state=voided] strong{color:#d4c5ec}
.history-result.refund{background:#39443b;color:#d3e9b0}
#balance{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[lang="ar"] .round-status-row .game-availability{font-size:9px;line-height:1.9}
html[lang="ar"] .round-retry{font-size:9px;line-height:1.8}
@media(max-width:360px){.round-status-row{gap:6px}.round-retry{padding:5px 7px;font-size:8px}.round-status-row .game-availability{font-size:8px}.round-summary .round-limit{font-size:7px}.history-tool-button{font-size:9px}html[lang="ar"] .round-status-row .game-availability{font-size:8px}}