﻿* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #050510; font-family: 'Rajdhani', sans-serif; color: #fff; }

/* Global Back Button */
.portal-back-btn {
  position: fixed; top: 20px; left: 20px; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: rgba(5, 5, 16, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 8px;
  color: #00f0ff; text-decoration: none; font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 2px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  transition: all 0.3s ease; text-transform: uppercase;
}
.portal-back-btn:hover {
  background: rgba(0, 240, 255, 0.15); border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
  transform: translateX(-2px);
}
.portal-back-icon {
  width: 12px; height: 12px;
  border-left: 2px solid #00f0ff; border-bottom: 2px solid #00f0ff;
  transform: rotate(45deg);
}

/* 3D Canvas */
#gameContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* UI Layer */
.ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }

.hidden { display: none !important; }

/* Modals */
.modal {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  background: rgba(2, 2, 8, 0.8); backdrop-filter: blur(5px); pointer-events: auto;
}
.glass-panel {
  background: rgba(10, 10, 25, 0.7); border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2), inset 0 0 20px rgba(0, 240, 255, 0.1);
  border-radius: 16px; padding: 40px; text-align: center;
  max-width: 500px; width: 90%;
}
.error-panel {
  border-color: rgba(255, 0, 85, 0.6);
  box-shadow: 0 0 30px rgba(255, 0, 85, 0.3), inset 0 0 20px rgba(255, 0, 85, 0.1);
}

/* Typography */
.title-glitch {
  font-family: 'Orbitron', sans-serif; font-size: 42px; font-weight: 900;
  color: #00f0ff; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
  letter-spacing: 4px;
}
.text-red { color: #ff0055; text-shadow: 0 0 15px rgba(255, 0, 85, 0.8); }
.subtitle { font-size: 18px; color: #a0a0ff; letter-spacing: 2px; margin-bottom: 30px; }

/* Instructions */
.instructions { display: flex; flex-direction: column; gap: 15px; margin-bottom: 40px; text-align: left; }
.inst-item { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px; }
.inst-item .icon { font-size: 24px; }
.inst-item p { margin: 0; font-size: 15px; color: #cbd5e1; }
.inst-item strong { color: #00f0ff; }

/* Buttons */
.btn-primary {
  background: linear-gradient(45deg, #00f0ff, #0088ff); border: none;
  padding: 15px 40px; border-radius: 30px; font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 700; color: #050510; cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5); transition: all 0.2s;
  pointer-events: auto; letter-spacing: 2px;
}
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 240, 255, 0.8); }
.btn-primary:active { transform: scale(0.95); }

/* HUD */
.hud-panel { position: absolute; top: 20px; right: 20px; left: 20px; display: flex; justify-content: space-between; pointer-events: none; }
.hud-top {
  display: flex; justify-content: space-between; width: 100%;
  font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700;
}
.score-display, .fuel-display {
  background: rgba(10, 10, 25, 0.7); padding: 10px 20px; border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}
.glow-text { color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.8); }
.glow-text-magenta { color: #f000ff; text-shadow: 0 0 10px rgba(240, 0, 255, 0.8); }

.stats-box { margin: 30px 0; }
.stats-box p { margin: 0; color: #a0a0ff; font-size: 14px; letter-spacing: 1px; }
.stats-box h2 { font-size: 48px; margin: 5px 0; font-family: 'Orbitron', sans-serif; }
.high-score-text { color: #fbbf24 !important; margin-top: 10px !important; }

/* Banners */
.close-call-banner {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(240, 0, 255, 0.2); border: 1px solid #f000ff;
  color: #f000ff; padding: 8px 24px; border-radius: 20px;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px;
  box-shadow: 0 0 20px rgba(240, 0, 255, 0.4);
  animation: pulse-banner 0.5s infinite alternate;
}
@keyframes pulse-banner { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.1); } }

/* Mobile Tweaks */
@media (max-width: 600px) {
  .title-glitch { font-size: 28px; }
  .glass-panel { padding: 20px; }
  .hud-top { font-size: 14px; flex-direction: column; align-items: flex-end; gap: 10px; }
  .score-display, .fuel-display { padding: 8px 12px; }
}
/ *   B o o t   S c r e e n   * / 
 . b o o t - s c r e e n   { 
     b a c k g r o u n d :   # 0 0 0   ! i m p o r t a n t ;   b a c k d r o p - f i l t e r :   n o n e ; 
     j u s t i f y - c o n t e n t :   f l e x - s t a r t ;   a l i g n - i t e m s :   f l e x - s t a r t ; 
     p a d d i n g :   4 0 p x ; 
 } 
 . t e r m i n a l - t e x t   { 
     f o n t - f a m i l y :   ' C o u r i e r   N e w ' ,   m o n o s p a c e ;   f o n t - s i z e :   1 6 p x ;   c o l o r :   # 0 0 f 0 f f ; 
     w h i t e - s p a c e :   p r e - w r a p ;   t e x t - a l i g n :   l e f t ;   t e x t - s h a d o w :   0   0   5 p x   r g b a ( 0 , 2 4 0 , 2 5 5 , 0 . 5 ) ; 
 } 
 
 / *   T u t o r i a l   A n i m a t i o n   * / 
 . t u t o r i a l - p a n e l   {   m a x - w i d t h :   4 0 0 p x ;   } 
 . t e x t - c y a n   {   c o l o r :   # 0 0 f 0 f f ;   l e t t e r - s p a c i n g :   2 p x ;   } 
 . h i g h l i g h t   {   c o l o r :   # 0 0 f 0 f f ;   f o n t - w e i g h t :   b o l d ;   } 
 . t u t o r i a l - d e s c   {   f o n t - s i z e :   1 8 p x ;   l i n e - h e i g h t :   1 . 6 ;   c o l o r :   # c b d 5 e 1 ;   m a r g i n - b o t t o m :   3 0 p x ;   } 
 
 . a n i m - c o n t a i n e r   { 
     p o s i t i o n :   r e l a t i v e ;   w i d t h :   2 0 0 p x ;   h e i g h t :   2 0 0 p x ;   m a r g i n :   2 0 p x   a u t o ; 
     b o r d e r :   1 p x   d a s h e d   r g b a ( 0 ,   2 4 0 ,   2 5 5 ,   0 . 2 ) ;   b o r d e r - r a d i u s :   1 2 p x ; 
     b a c k g r o u n d :   r g b a ( 0 ,   0 ,   0 ,   0 . 4 ) ; 
 } 
 . t e t h e r - s v g   {   w i d t h :   1 0 0 % ;   h e i g h t :   1 0 0 % ;   } 
 . w i r e - p l a n e t   {   f i l l :   n o n e ;   s t r o k e :   # 0 0 f 0 f f ;   s t r o k e - w i d t h :   2 ;   o p a c i t y :   0 . 8 ;   } 
 . w i r e - o r b i t   {   f i l l :   n o n e ;   s t r o k e :   # 0 0 f 0 f f ;   s t r o k e - w i d t h :   1 ;   s t r o k e - d a s h a r r a y :   4 ;   o p a c i t y :   0 . 4 ;   } 
 . w i r e - t e t h e r   {   s t r o k e :   # 0 0 f 0 f f ;   s t r o k e - w i d t h :   2 ;   o p a c i t y :   0 . 8 ;   } 
 . w i r e - s l i n g s h o t   {   s t r o k e :   # f 0 0 0 f f ;   s t r o k e - w i d t h :   2 ;   s t r o k e - d a s h a r r a y :   4 ;   o p a c i t y :   0 ;   } 
 . w i r e - s h i p   {   f i l l :   # f f f ;   t r a n s f o r m - o r i g i n :   1 0 0 p x   1 0 0 p x ;   } 
 
 / *   C S S   A n i m a t i o n   C o r e   * / 
 @ k e y f r a m e s   d e m o C y c l e   { 
     0 %       {   t r a n s f o r m :   r o t a t e ( 0 d e g ) ;   } 
     4 0 %     {   t r a n s f o r m :   r o t a t e ( 1 8 0 d e g ) ;   } 
     5 0 %     {   t r a n s f o r m :   r o t a t e ( 1 8 0 d e g ) ;   } 
     6 0 %     {   t r a n s f o r m :   r o t a t e ( 1 8 0 d e g )   t r a n s l a t e X ( 1 0 0 p x ) ;   } 
     1 0 0 %   {   t r a n s f o r m :   r o t a t e ( 1 8 0 d e g )   t r a n s l a t e X ( 1 0 0 p x ) ;   } 
 } 
 . w i r e - s h i p   {   a n i m a t i o n :   d e m o C y c l e   3 s   i n f i n i t e   e a s e - i n - o u t ;   } 
 
 @ k e y f r a m e s   t e t h e r F a d e   { 
     0 %       {   o p a c i t y :   0 . 8 ;   } 
     3 9 %     {   o p a c i t y :   0 . 8 ;   } 
     4 0 %     {   o p a c i t y :   0 ;   } 
     1 0 0 %   {   o p a c i t y :   0 ;   } 
 } 
 . w i r e - t e t h e r   {   a n i m a t i o n :   t e t h e r F a d e   3 s   i n f i n i t e   e a s e - i n - o u t ;   t r a n s f o r m - o r i g i n :   1 0 0 p x   1 0 0 p x ;   a n i m a t i o n - n a m e :   d e m o C y c l e ,   t e t h e r F a d e ;   } 
 
 @ k e y f r a m e s   s l i n g P a t h   { 
     0 %       {   o p a c i t y :   0 ;   } 
     4 0 %     {   o p a c i t y :   0 ;   } 
     4 5 %     {   o p a c i t y :   1 ;   } 
     6 0 %     {   o p a c i t y :   0 ;   } 
     1 0 0 %   {   o p a c i t y :   0 ;   } 
 } 
 . w i r e - s l i n g s h o t   {   t r a n s f o r m - o r i g i n :   1 0 0 p x   1 0 0 p x ;   a n i m a t i o n :   d e m o C y c l e   3 s   i n f i n i t e   e a s e - i n - o u t ,   s l i n g P a t h   3 s   i n f i n i t e   e a s e - i n - o u t ;   } 
 
 / *   T o u c h   I n d i c a t o r   * / 
 . t o u c h - i n d i c a t o r   { 
     p o s i t i o n :   a b s o l u t e ;   t o p :   1 0 p x ;   r i g h t :   1 0 p x ;   w i d t h :   4 0 p x ;   h e i g h t :   4 0 p x ; 
     b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 4 ) ;   b o r d e r :   2 p x   s o l i d   # f f f ;   b o r d e r - r a d i u s :   5 0 % ; 
     b o x - s h a d o w :   0   0   1 5 p x   # f f f ; 
     a n i m a t i o n :   t o u c h P r e s s   3 s   i n f i n i t e   e a s e - i n - o u t ; 
 } 
 @ k e y f r a m e s   t o u c h P r e s s   { 
     0 %       {   t r a n s f o r m :   s c a l e ( 1 . 2 ) ;   o p a c i t y :   0 ;   } 
     5 %       {   t r a n s f o r m :   s c a l e ( 0 . 8 ) ;   o p a c i t y :   1 ;   }   / *   P r e s s   * / 
     3 9 %     {   t r a n s f o r m :   s c a l e ( 0 . 8 ) ;   o p a c i t y :   1 ;   } 
     4 0 %     {   t r a n s f o r m :   s c a l e ( 1 . 5 ) ;   o p a c i t y :   0 ;   }   / *   R e l e a s e   * / 
     1 0 0 %   {   t r a n s f o r m :   s c a l e ( 1 . 5 ) ;   o p a c i t y :   0 ;   } 
 }  
 
/* Boot Screen */
.boot-screen {
  background: #000 !important; backdrop-filter: none;
  justify-content: flex-start; align-items: flex-start;
  padding: 40px;
}
.terminal-text {
  font-family: 'Courier New', monospace; font-size: 16px; color: #00f0ff;
  white-space: pre-wrap; text-align: left; text-shadow: 0 0 5px rgba(0,240,255,0.5);
}

/* Tutorial Animation */
.tutorial-panel { max-width: 400px; }
.text-cyan { color: #00f0ff; letter-spacing: 2px; margin-top: 0;}
.highlight { color: #00f0ff; font-weight: bold; }
.tutorial-desc { font-size: 16px; line-height: 1.6; color: #cbd5e1; margin-bottom: 25px; }

.anim-container {
  position: relative; width: 160px; height: 160px; margin: 15px auto;
  border: 1px dashed rgba(0, 240, 255, 0.2); border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
}
.tether-svg { width: 100%; height: 100%; }
.wire-planet { fill: none; stroke: #00f0ff; stroke-width: 2; opacity: 0.8; }
.wire-orbit { fill: none; stroke: #00f0ff; stroke-width: 1; stroke-dasharray: 4; opacity: 0.4; }
.wire-tether { stroke: #00f0ff; stroke-width: 2; opacity: 0.8; }
.wire-slingshot { stroke: #f000ff; stroke-width: 2; stroke-dasharray: 4; opacity: 0; }
.wire-ship { fill: #fff; transform-origin: 100px 100px; }

/* CSS Animation Core */
@keyframes demoCycle {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(180deg); }
  50%  { transform: rotate(180deg); }
  60%  { transform: rotate(180deg) translateX(100px); }
  100% { transform: rotate(180deg) translateX(100px); }
}
.wire-ship { animation: demoCycle 3s infinite ease-in-out; }

@keyframes tetherFade {
  0%   { opacity: 0.8; transform: rotate(0deg); }
  39%  { opacity: 0.8; transform: rotate(180deg); }
  40%  { opacity: 0; transform: rotate(180deg); }
  100% { opacity: 0; transform: rotate(180deg); }
}
.wire-tether { animation: tetherFade 3s infinite ease-in-out; transform-origin: 100px 100px; }

@keyframes slingPath {
  0%   { opacity: 0; transform: rotate(0deg); }
  40%  { opacity: 0; transform: rotate(180deg); }
  45%  { opacity: 1; transform: rotate(180deg); }
  60%  { opacity: 0; transform: rotate(180deg); }
  100% { opacity: 0; transform: rotate(180deg); }
}
.wire-slingshot { transform-origin: 100px 100px; animation: slingPath 3s infinite ease-in-out; }

/* Touch Indicator */
.touch-indicator {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  background: rgba(255, 255, 255, 0.4); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 15px #fff;
  animation: touchPress 3s infinite ease-in-out;
}
@keyframes touchPress {
  0%   { transform: scale(1.2); opacity: 0; }
  5%   { transform: scale(0.8); opacity: 1; } /* Press */
  39%  { transform: scale(0.8); opacity: 1; }
  40%  { transform: scale(1.5); opacity: 0; } /* Release */
  100% { transform: scale(1.5); opacity: 0; }
}
