/* Mobile web gameplay fixes for Interstellar Speed.
   Loaded after styles.css so these rules intentionally override desktop layout. */

html,
body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  position:fixed;
  inset:0;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

#game,
#view,
canvas,
.hud,
.touch{
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
}

#view,
canvas{
  width:100vw;
  height:100dvh;
}

.mobile-actions{display:none;}

@media (hover:none) and (pointer:coarse){
  .hud{z-index:20;}

  .top{
    top:max(6px,env(safe-area-inset-top));
    left:max(6px,env(safe-area-inset-left));
    right:auto;
    gap:6px;
  }

  .top .panel:first-child{
    padding:6px 8px;
    max-width:52vw;
    font-size:11px;
  }

  .top .panel:first-child .row{
    gap:6px 8px;
  }

  .top .panel:first-child .label{
    font-size:9px;
  }

  .top .panel:first-child .value{
    font-size:11px;
  }

  .bar{
    width:76px;
    height:8px;
  }

  .right{
    display:grid !important;
    position:absolute;
    top:max(6px,env(safe-area-inset-top));
    right:max(6px,env(safe-area-inset-right));
    gap:4px;
    z-index:35;
    pointer-events:none;
  }

  .mini{
    width:clamp(118px,31vw,190px);
    height:clamp(82px,21vw,132px);
    border-radius:10px;
    opacity:.94;
    box-shadow:0 8px 24px rgba(0,0,0,.42);
  }

  .legend{display:none;}

  .bottom{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:calc(88px + env(safe-area-inset-bottom));
    z-index:25;
  }

  .command-deck{
    max-width:100%;
    grid-template-columns:1fr;
    gap:6px;
  }

  .mission-console,
  .controls-console{
    display:none;
  }

  .power-console{
    padding:7px 9px;
    max-width:58vw;
    opacity:.88;
  }

  .power-card,
  .active-power,
  .power-hint{
    font-size:11px;
    line-height:1.2;
  }

  .touch{
    display:block !important;
    z-index:50;
    pointer-events:none;
  }

  .stick{
    width:118px;
    height:118px;
    left:max(14px,env(safe-area-inset-left));
    bottom:calc(14px + env(safe-area-inset-bottom));
    background:rgba(2,6,23,.18);
    backdrop-filter:blur(4px);
  }

  .stick i{
    width:52px;
    height:52px;
  }

  .thrust{
    width:124px;
    height:124px;
    right:max(14px,env(safe-area-inset-right));
    bottom:calc(14px + env(safe-area-inset-bottom));
  }

  .thrust button{
    width:98px;
    height:98px;
    font-size:12px;
    touch-action:none;
  }

  .mobile-actions{
    position:fixed;
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(140px + env(safe-area-inset-bottom));
    z-index:65;
    display:grid;
    grid-template-columns:repeat(2,58px);
    gap:8px;
    pointer-events:auto;
  }

  .mobile-actions button{
    height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(3,7,18,.68);
    color:#e7f0ff;
    font:800 10px/1.05 system-ui,-apple-system,Segoe UI,sans-serif;
    letter-spacing:.03em;
    text-transform:uppercase;
    box-shadow:0 8px 22px rgba(0,0,0,.36);
    backdrop-filter:blur(6px);
    touch-action:none;
  }

  .mobile-actions button.active{
    background:linear-gradient(180deg,#38bdf8,#2563eb);
    color:#03111f;
    border-color:rgba(186,230,253,.85);
  }

  .overlay .card{
    width:min(380px,calc(100vw - 22px));
    padding:12px 14px;
    font-size:13px;
  }

  .shop-overlay{padding:10px;}
  .shop-panel{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    overflow:auto;
    padding:14px;
  }
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  .top .panel:first-child{max-width:58vw;}
  .mini{width:128px;height:90px;}
  .bottom{display:none;}
  .mobile-actions{
    grid-template-columns:repeat(2,56px);
    bottom:calc(138px + env(safe-area-inset-bottom));
  }
}