@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap";:root{--bg-dark:#0a0b10;--bg-card:#141623b3;--bg-card-hover:#1e2232e6;--accent-gold:#f59e0b;--accent-blue:#00e5ff;--accent-purple:#8b5cf6;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#ffffff1a;--glow-shadow:0 0 20px #00e5ff33}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);background-image:radial-gradient(circle at 50% 0,#8b5cf626,#0000 50%),radial-gradient(circle at 50% 100%,#00e5ff1a,#0000 50%);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:500px;min-height:100vh;padding:1.5rem;display:flex}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-10px)rotate(2deg)}to{transform:translateY(0)rotate(0)}}@keyframes pulseGlow{0%{box-shadow:0 0 10px #00e5ff33}50%{box-shadow:0 0 25px #00e5ff80}to{box-shadow:0 0 10px #00e5ff33}}@keyframes sweep{0%{background-position:0%}to{background-position:100%}}.home-screen{z-index:10;flex-direction:column;gap:1.5rem;width:100%;height:100%;display:flex;position:relative}@keyframes breath{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.header{flex-direction:column;align-items:center;gap:1rem;animation:4s ease-in-out infinite breath;display:flex}.title{letter-spacing:2px;text-shadow:0 0 15px #ffffff4d;color:#0000;background:linear-gradient(90deg,#fff,#00e5ff,#fff) 0 0/200%;-webkit-background-clip:text;background-clip:text;align-items:center;gap:.5rem;font-family:Orbitron,sans-serif;font-size:1.8rem;font-weight:800;animation:5s linear infinite sweep;display:flex}.globe-emoji{filter:drop-shadow(0 0 10px #00e5ffcc)}.stats-bar{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;justify-content:space-between;width:100%;padding:.75rem 1rem;animation:4s infinite pulseGlow;display:flex}.stat{flex-direction:column;justify-content:center;align-items:center;gap:.2rem;font-size:.85rem;font-weight:600;display:flex}.stat-label{color:var(--text-muted);letter-spacing:1px;font-size:.75rem}.stat-sub{color:var(--text-main);font-weight:700}.stat.highlight{color:var(--accent-gold);text-shadow:0 0 15px #f59e0bcc;flex-direction:row;font-family:Orbitron,sans-serif;font-size:1rem}.stat.streak{color:#ef4444;text-shadow:0 0 15px #ef4444cc;flex-direction:row;font-family:Orbitron,sans-serif;font-size:1rem}.stat-icon{margin-right:.25rem}.main-content{flex-direction:column;flex:1;gap:1.5rem;display:flex}.globe-section{z-index:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.globe-wrapper{border-radius:50%;justify-content:center;align-items:center;width:100%;height:280px;animation:8s ease-in-out infinite reverse float;display:flex;-webkit-mask-image:radial-gradient(circle,#fff 50%,#0000 100%);mask-image:radial-gradient(circle,#fff 50%,#0000 100%)}.adventure-card{border:1px solid var(--border-color);background:linear-gradient(135deg,#141623cc,#1e223299);border-radius:16px;flex-direction:column;gap:1rem;padding:1.25rem;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000004d}.adventure-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00e5ff33}.adventure-card:before{content:"";background:var(--accent-blue);width:4px;height:100%;box-shadow:0 0 15px var(--accent-blue);position:absolute;top:0;left:0}.adventure-header{color:var(--text-muted);letter-spacing:1.5px;font-size:.75rem;font-weight:700}.adventure-body{flex-direction:column;gap:.5rem;display:flex}.adventure-info{align-items:center;gap:.5rem;font-size:1.1rem;font-weight:600;display:flex}.adventure-icon{color:var(--accent-blue);animation:3s ease-in-out infinite float}.adventure-reward{color:var(--text-muted);font-size:.85rem}.xp-gain{color:var(--accent-gold);font-weight:700}.start-adventure-btn{color:var(--accent-blue);letter-spacing:2px;cursor:pointer;text-shadow:0 0 10px #00e5ff80;background:#00e5ff1a;border:1px solid #00e5ff4d;border-radius:8px;width:100%;margin-top:.5rem;padding:.75rem;font-family:Orbitron,sans-serif;font-weight:700;transition:all .2s}.start-adventure-btn:hover{color:#fff;background:#00e5ff4d;transform:translateY(-2px);box-shadow:0 0 20px #00e5ff66}.modes-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.game-mode-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.game-mode-btn:hover{background:var(--bg-card-hover);border-color:#00e5ff80;transform:translateY(-5px)scale(1.05);box-shadow:0 10px 25px #00e5ff33}.game-mode-btn:active{transform:translateY(0)scale(.95)}.btn-icon{color:var(--text-muted);transition:color .2s}.game-mode-btn:hover .btn-icon{color:var(--accent-blue)}.btn-title{letter-spacing:1px;font-size:.7rem;font-weight:700}.bottom-modes{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.5rem;display:grid}.bottom-mode-btn{border:1px solid var(--border-color);color:var(--text-muted);letter-spacing:1px;cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.85rem;font-size:.75rem;font-weight:700;transition:all .2s;display:flex}.bottom-mode-btn:hover{color:var(--text-main);background:#ffffff0d}
/* Landscape/short-viewport fix — this game shipped with a single fixed
   portrait-column layout (#root max-width:500px, body vertically centered),
   so on a real phone turned sideways the content (280px globe, adventure
   card, mode grids) ran taller than the screen with no way to scroll,
   leaving the Start button and every mode button below the fold and
   unreachable. Direct feedback on an earlier version of this fix (which
   reflowed everything into two columns and shrank the globe): it should
   just look like the PC version — same layout, same full-size globe,
   just able to scroll down a little on a short screen. So this is now
   deliberately minimal: the ONLY change is making the page scrollable.
   Structural DOM/JS untouched — this is the built output (no source
   project shipped alongside it), so the fix has to live entirely in CSS. */
@media (orientation:landscape) and (max-height:500px){
  body{align-items:flex-start;overflow-y:auto}
}

/* World/Explorer, Lab, and Empire modes are rendered with inline React
   styles (no CSS classes of their own beyond the one wrapper class each
   gets), sized for a desktop-only layout: a wide "Active Mission" card,
   large buttons, big fonts. On small/landscape phones these HUD elements
   and popups end up oversized relative to the game view underneath them,
   crowding the screen and blocking the thing the player is actually
   supposed to look at (the globe, the comparison cards). [style*="..."]
   attribute selectors target the exact inline style fragments React
   renders (stable across builds since they're literal rem values in the
   bundle) so these !important overrides land on the right elements
   without needing a source rebuild. .mode-lab-wrap / .mode-empire-wrap are
   applied at runtime by a small tagger script in index.html (these two
   modes' wrappers, unlike .world-explorer-mode, ship with no class of
   their own to hook into). */
@media (max-width:480px), (orientation:landscape) and (max-height:520px){
  .world-explorer-mode > div:first-child{padding:.6rem !important}
  .world-explorer-mode [style*="padding: 0.5rem 1rem"]{padding:.3rem .5rem !important;font-size:.65rem !important;gap:.3rem !important}
  .world-explorer-mode [style*="padding: 0.5rem 1rem"] svg{width:12px !important;height:12px !important}
  .world-explorer-mode [style*="max-width: 400px"]{padding:.5rem .6rem !important;margin-top:.4rem !important;max-width:210px !important;gap:.3rem !important}
  .world-explorer-mode [style*="max-width: 400px"] > div:first-child{font-size:.65rem !important}
  .world-explorer-mode [style*="font-size: 1.1rem"]{font-size:.75rem !important}
  .world-explorer-mode [style*="font-size: 0.8rem"]{font-size:.6rem !important}
  .world-explorer-mode [style*="width: fit-content"]{padding:.3rem !important}

  .mode-lab-wrap{padding:.6rem !important}
  .mode-lab-wrap > div:first-child{margin-bottom:.5rem !important}
  .mode-lab-wrap > div:first-child h2{font-size:1rem !important}
  .mode-lab-wrap [style*="padding: 0.5rem 1rem"]{padding:.3rem .5rem !important;font-size:.7rem !important}
  .mode-lab-wrap > div:nth-child(2){gap:.6rem !important}
  .mode-lab-wrap [style*="padding: 3rem"]{padding:.8rem !important}
  .mode-lab-wrap h2[style*="font-size: 2.5rem"]{font-size:1.3rem !important;margin:0 0 .5rem !important}
  .mode-lab-wrap div[style*="font-size: 1.2rem"]{font-size:.7rem !important;margin-bottom:.3rem !important}
  .mode-lab-wrap div[style*="font-size: 3rem"]{font-size:1.6rem !important}
  .mode-lab-wrap [style*="padding: 1.5rem"]{padding:.6rem !important;font-size:.85rem !important;gap:.4rem !important}
  .mode-lab-wrap [style*="width: 40px"]{width:26px !important;height:26px !important;font-size:.6rem !important}
}
/* Lab, portrait only — the two comparison cards render as a fixed flex
   ROW (side by side). In landscape there's enough width for that to just
   work once padding shrinks (above); in portrait, squeezing two cards
   plus their padding/text into half the (already narrow) screen width
   each was what was cutting the second card and its Higher/Lower buttons
   off-screen. Stacks them instead — plenty of vertical room in portrait. */
@media (max-width:480px){
  .mode-lab-wrap > div:nth-child(2){flex-direction:column !important;gap:.6rem !important;overflow-y:auto !important;padding:.2rem 0 !important}
  .mode-lab-wrap [style*="height: 100%"]{height:auto !important}
}
@media (max-width:480px), (orientation:landscape) and (max-height:520px){
  .mode-empire-wrap{padding:.6rem !important}
  .mode-empire-wrap > div:first-child{margin-bottom:.6rem !important}
  .mode-empire-wrap [style*="padding: 0.5rem 1rem"]{padding:.3rem .5rem !important;font-size:.65rem !important}
  .mode-empire-wrap [style*="padding: 0.5rem 1.5rem"]{padding:.3rem .6rem !important;gap:.4rem !important}
  .mode-empire-wrap [style*="font-size: 0.9rem"]{font-size:.65rem !important}
  .mode-empire-wrap [style*="font-size: 1.2rem"]{font-size:.8rem !important}
  .mode-empire-wrap [style*="padding: 1.5rem"]{padding:.6rem .75rem !important}
  .mode-empire-wrap h3{font-size:.85rem !important;margin:0 0 .25rem !important}
  .mode-empire-wrap [style*="padding: 0.75rem 1.5rem"]{padding:.4rem .6rem !important;font-size:.7rem !important}
}