.dino-screen{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:#0e1014;--bg:#0e1014;--card-bg:#1a1d24;--text:#e8e4dc;--muted:#8a8580;--border:#3a3a40;--dark:#0e1014;--gold:#c9a84c;--gold-light:#f0d080;--option-bg:#1a1a24}
.dino-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.dino-topbar .back-btn{flex-shrink:0}
.dino-hearts{display:flex;gap:4px;font-size:1.2rem;line-height:1;direction:ltr}
.dino-heart{transition:transform 0.3s, opacity 0.3s;display:inline-block;filter:drop-shadow(0 0 4px rgba(239,68,68,0.6))}
.dino-heart.lost{opacity:0.18;filter:grayscale(1);transform:scale(0.8)}
.dino-heart.gained{animation:dinoHeartPop 0.55s ease-out}
@keyframes dinoHeartPop{0%{transform:scale(0.4);opacity:0}50%{transform:scale(1.5);opacity:1}100%{transform:scale(1);opacity:1}}
.dino-score-display{display:flex;gap:14px;align-items:center;font-family:'Tajawal',monospace;font-weight:900;direction:ltr;flex-wrap:wrap;justify-content:center}
.ds-best{color:var(--gold);font-size:0.92rem;display:flex;align-items:center;gap:4px;opacity:0.85}
.ds-current{color:var(--text);font-size:1.6rem;letter-spacing:2px;min-width:70px;text-align:center;text-shadow:0 0 12px rgba(201,168,76,0.4);transition:transform 0.2s, color 0.2s}
.ds-current.milestone{color:var(--gold);transform:scale(1.25);text-shadow:0 0 24px rgba(201,168,76,0.9)}
.dino-canvas-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:10px;touch-action:none;user-select:none;-webkit-user-select:none}
.dino-canvas-wrap canvas{width:100%;max-width:980px;aspect-ratio:2.2/1;height:auto;background:linear-gradient(180deg,#0e1014 0%,#1a1d24 55%,#0e1014 100%);border-radius:16px;border:1px solid var(--border);image-rendering:pixelated;image-rendering:crisp-edges;display:block;direction:ltr;cursor:pointer;transition:box-shadow 0.4s, transform 0.08s}
.dino-canvas-wrap canvas.boss-mode{box-shadow:inset 0 0 80px rgba(239,68,68,0.35),0 0 30px rgba(239,68,68,0.2);animation:dinoShake 0.4s ease-in-out infinite alternate}
.dino-canvas-wrap canvas.hit-flash{animation:dinoHitFlash 0.4s ease-in-out}
@keyframes dinoHitFlash{0%,100%{filter:none}50%{filter:brightness(1.7) saturate(1.4)}}
@keyframes dinoShake{from{transform:translate(0,0)}to{transform:translate(2px,-1px)}}
.dino-overlay{position:absolute;inset:10px;background:rgba(14,16,20,0.94);backdrop-filter:blur(10px);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--text);pointer-events:auto;max-width:980px;margin:0 auto;left:10px;right:10px;overflow:auto}
.do-emoji{font-size:3.5rem;line-height:1;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(201,168,76,0.4))}
.do-title{font-family:'Tajawal',sans-serif;font-weight:900;color:var(--gold);font-size:1.55rem;margin-bottom:8px}
.do-instr{font-size:0.96rem;color:var(--text);margin-bottom:10px;line-height:1.7}
.do-hint{font-size:0.82rem;color:var(--muted);margin-bottom:14px;line-height:1.9}
.do-hint kbd{background:rgba(201,168,76,0.15);border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:2px 7px;font-family:inherit;font-size:0.8rem;font-weight:900;margin:0 2px}
.do-score-final{font-size:3.2rem;font-family:'Tajawal',sans-serif;font-weight:900;color:var(--gold);margin:6px 0;text-shadow:0 0 22px rgba(201,168,76,0.5)}
.do-best{font-size:0.95rem;color:var(--text);margin-bottom:10px;opacity:0.85}
.do-newrec{color:#4ade80;font-weight:900;margin-bottom:14px;font-size:1.05rem;animation:dinoPulseGlow 0.9s ease-in-out infinite alternate}
@keyframes dinoPulseGlow{from{text-shadow:0 0 6px rgba(74,222,128,0.45)}to{text-shadow:0 0 22px rgba(74,222,128,0.95)}}
.do-btn{background:linear-gradient(135deg,var(--gold),#a8720c);color:#0e1014;border:none;border-radius:12px;padding:13px 28px;font-family:'Tajawal',sans-serif;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.35);transition:transform 0.12s}
.do-btn:hover,.do-btn:active{transform:translateY(-1px)}
.do-btn-sec{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:13px 22px;font-family:'Tajawal',sans-serif;font-weight:700;font-size:0.95rem;cursor:pointer}
.do-btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.do-skins{display:flex;gap:10px;justify-content:center;margin:10px 0 14px;flex-wrap:wrap}
.do-skin{background:rgba(201,168,76,0.08);border:1.5px solid var(--border);border-radius:12px;padding:8px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;transition:border-color 0.2s, background 0.2s}
.do-skin.active{border-color:var(--gold);background:rgba(201,168,76,0.18)}
.do-skin-icon{font-size:1.6rem;line-height:1}
.do-skin-name{font-size:0.72rem;color:var(--text);font-weight:700}
.dino-controls{display:flex;gap:14px;justify-content:center;padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));align-items:stretch}
.dino-ctrl-btn{flex:1;max-width:200px;min-height:62px;background:linear-gradient(180deg,rgba(201,168,76,0.18),rgba(201,168,76,0.08));border:2px solid var(--gold);border-radius:14px;color:var(--gold);font-family:'Tajawal',sans-serif;font-weight:900;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;user-select:none;-webkit-user-select:none;transition:transform 0.08s, background 0.15s;touch-action:none}
.dino-ctrl-btn:active,.dino-ctrl-btn.pressed{background:linear-gradient(180deg,var(--gold),#a8720c);color:#0e1014;transform:translateY(2px) scale(0.97)}
.dino-ctrl-icon{font-size:1.5rem;line-height:1}
.dino-milestone{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(0);font-family:'Tajawal',sans-serif;font-weight:900;color:var(--gold);font-size:2.2rem;text-shadow:0 0 30px rgba(201,168,76,0.95),0 0 8px #000;pointer-events:none;text-align:center;line-height:1.2;white-space:nowrap}
.dino-milestone.show{animation:dinoMilestone 1.6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes dinoMilestone{0%{transform:translate(-50%,-50%) scale(0)}25%{transform:translate(-50%,-50%) scale(1.2)}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-100%) scale(0.8);opacity:0}}
.dino-boss-banner{position:absolute;left:0;right:0;top:8px;text-align:center;font-family:'Tajawal',sans-serif;font-weight:900;color:#fff;background:linear-gradient(90deg,transparent,rgba(239,68,68,0.85),transparent);padding:6px 14px;letter-spacing:1px;pointer-events:none;font-size:0.95rem;text-shadow:0 0 10px #000}
@media(max-width:640px){
  .dino-topbar{padding:10px 12px;gap:6px}
  .dino-canvas-wrap canvas{aspect-ratio:1.55/1}
  .dino-canvas-wrap{padding:8px}
  .do-title{font-size:1.3rem}
  .do-score-final{font-size:2.4rem}
  .do-emoji{font-size:2.8rem}
  .dino-milestone{font-size:1.5rem}
  .ds-current{font-size:1.3rem;min-width:52px}
  .dino-ctrl-btn{font-size:0.95rem;min-height:64px}
  .dino-hearts{font-size:1.05rem}
}
body.dino-active .mute-btn,body.dino-active .net-indicator,body.dino-active .install-btn,body.in-game .mute-btn,body.in-game .net-indicator,body.in-game .install-btn,body.wanees-active .mute-btn,body.wanees-active .net-indicator,body.wanees-active .install-btn{display:none !important}
body.in-game *,body.dino-active *,body.wanees-active *{touch-action:manipulation}
body.in-game input,body.in-game textarea{touch-action:auto}
@supports (-webkit-touch-callout:none){
  input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{font-size:16px !important}
}
.dino-mute-btn{background:rgba(201,168,76,0.12);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dino-mute-btn:active{transform:scale(0.92)}
.dino-biome-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);background:rgba(14,16,20,0.92);border:2px solid var(--gold);border-radius:14px;padding:18px 28px;text-align:center;pointer-events:none;backdrop-filter:blur(8px);box-shadow:0 0 40px rgba(201,168,76,0.4)}
.dino-biome-banner.show{animation:dinoBiomeReveal 2.6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes dinoBiomeReveal{0%{transform:translate(-50%,-50%) scale(0)}15%{transform:translate(-50%,-50%) scale(1.1)}25%,75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(0.9);opacity:0}}
.dbb-emoji{font-size:2.6rem;line-height:1;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(201,168,76,0.5))}
.dbb-label{font-family:'Tajawal',sans-serif;color:var(--muted);font-size:0.75rem;letter-spacing:2px;margin-bottom:4px}
.dbb-name{font-family:'Tajawal',sans-serif;font-weight:900;color:var(--gold);font-size:1.6rem}