:root{
  --bg:#0a0f1c; --card:#141d33; --accent:#ffd166; --good:#06d6a0; --bad:#ef476f; --text:#e9f1ff; --muted:#aab7d6;
}
*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden; margin:0; padding:0;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
  background:radial-gradient(1200px 700px at 30% -10%, #1c2b4a 0%, var(--bg) 60%);
  color:var(--text); 
}

/* ---------------- HEADER / NAV ---------------- */
header{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:12px 16px; 
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:100; 
  background:transparent !important;
  backdrop-filter:none !important;
}
/* Remove glass effect on bg-header pages */
.bg-header + body header,
body:has(.bg-header:not(.hidden)) header{
  backdrop-filter:none !important;
  background:transparent !important;
}
.glass{backdrop-filter: blur(6px); background:rgba(10,15,28,.35); border:1px solid rgba(255,255,255,.08); border-radius:12px}
h1{margin:0; font-size:clamp(20px,3vw,28px)}
.nav{display:flex; gap:8px}
.link{background:transparent; color:var(--text); border:1px solid #2a395d; border-radius:8px; padding:6px 10px; cursor:pointer}

/* ---------------- PAGE WIDTH ---------------- */
main{width:100%; max-width:100vw; margin:0; padding:0;}

/* ---------------- CARDS ---------------- */
.card{background:var(--card); padding:16px; border:1px solid #253252; border-radius:12px}
.card .card-inner{background:rgba(10,15,28,.55); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; max-width:860px}
.hidden{display:none !important;}

/* ---------------- UTILS ---------------- */
.grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid2{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(180px,1fr))}
.stack{display:grid; gap:10px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.list{display:grid; gap:8px}
.new-box{border:1px dashed #2a395d; border-radius:10px; padding:8px}
.muted{color:var(--muted)} .small{font-size:.9em}
.table{display:grid; gap:8px}
.table .row{justify-content:space-between; align-items:center}
.kids-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.unlock{border:1px dashed #2a395d; border-radius:10px; padding:8px; max-width:360px}

.q{font-size:clamp(20px, 4vw, 48px); font-weight:800; letter-spacing:1px; text-align:center; line-height:1.2; max-width:95vw; word-wrap:break-word;}
.choices{display:grid; gap:clamp(8px, 1.5vh, 12px); grid-template-columns:1fr 1fr; width:100%; max-width:min(560px, 90vw); margin-inline:auto; padding:0 clamp(8px, 2vw, 16px);}
button{padding:clamp(8px, 1.5vh, 12px) clamp(10px, 2vw, 16px); border-radius:clamp(8px, 2vw, 12px); border:none; background:var(--accent); font-weight:800; cursor:pointer; font-size:clamp(14px, 2.5vw, 16px);}
button:active{transform:translateY(1px)}
.choice{background:#1b2542; color:var(--text); border:2px solid #33415c; padding:clamp(10px, 2vh, 16px) clamp(12px, 2.5vw, 20px); font-size:clamp(16px, 3vw, 24px); border-radius:clamp(10px, 2vw, 14px);}
.choice.correct{border-color:var(--good)} .choice.wrong{border-color:var(--bad)}

footer{opacity:.7; text-align:center; padding:8px}
input,select{font-size:16px; padding:10px 12px; border-radius:10px; border:1px solid #33415c; background:#0e162a; color:var(--text); max-width:100%;}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------------- HEADER ART - NO SCROLLING ---------------- */
.bg-header{
  background:
    url('assets/minersheader.png') center center / contain no-repeat,
    linear-gradient(180deg,rgba(20,29,51,.88),rgba(20,29,51,.88));
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:flex-start;
  padding-top:18vh;
  justify-content:center;
  overflow:hidden;
}
.bg-header .card-inner{
  max-width:800px;
  margin:0 auto;
}

/* Desktop optimizations for player picker */
@media (min-width: 769px) {
  .bg-header .card-inner{
    max-width:900px;
  }
  
  /* Two-column layout for sign-in page */
  #view-families .card-inner{
    max-width:750px;
  }
  
  .login-container{
    grid-template-columns:1fr 1fr !important;
    gap:32px !important;
    align-items:start;
  }
  
  /* Normal desktop sizes for sign-in */
  #view-families input,
  #view-families button{
    font-size:16px;
    padding:10px 12px;
  }
  
  #view-families label{
    font-size:16px;
  }
  
  /* Make player picker comfortable on desktop */
  #view-kids .card-inner{
    padding:16px;
  }
  
  #view-kids h2{
    font-size:22px;
    margin-bottom:10px;
  }
  
  #view-kids .kids-header{
    margin-bottom:14px;
  }
  
  /* Make grid accommodate up to 5 players side by side */
  #view-kids .grid{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    max-width:100%;
    gap:14px;
  }
  
  #view-kids .grid button{
    padding:16px 14px;
    font-size:18px;
  }
  
  /* Ensure kids-header stays on one line */
  .kids-header{
    flex-wrap:nowrap;
  }
  
  .kids-header h2{
    white-space:nowrap;
    font-size:22px;
  }
  
  /* Make unlock section readable */
  .unlock{
    max-width:100%;
    min-width:280px;
    padding:8px 12px;
  }
  
  .unlock summary{
    white-space:nowrap;
    font-size:14px;
  }
  
  .unlock form{
    margin-top:8px;
  }
  
  .unlock input{
    font-size:14px;
    padding:8px 10px;
  }
  
  .unlock button{
    font-size:14px;
    padding:8px 12px;
  }
}


/* ---------------- GAME "MINE" ---------------- */
.mine{
  position:relative; min-height:220px;
  background: linear-gradient(#0e1528,#0a1020);
  border:1px solid #253252; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; margin-bottom:16px;
}
.mine::before{content:""; position:absolute; inset:auto 0 0 0; height:80px; background:linear-gradient(0deg,rgba(0,0,0,.35),transparent)}
.gem{position:absolute; font-size:26px; animation:pop 900ms ease-out forwards; pointer-events:none; text-shadow:0 0 6px rgba(255,255,255,0.5)}
@keyframes pop{
  0%{transform:translateY(0) scale(.6); opacity:0}
  30%{opacity:1}
  70%{transform:translateY(-60px) scale(1.1)}
  100%{transform:translateY(-90px) scale(.95); opacity:0}
}

/* ==== MAP - NO SCROLLING ==== */
.map-wrap{
  position:relative;
  border:1px solid #253252;
  border-radius:12px;
  overflow:hidden;
  background:#0b1222;
  min-height:100vh;
  height:100vh;
  width:100%;
  margin:0;
}
#view-map{
  min-height:100vh;
  height:100vh;
  overflow:hidden;
}
.map-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:1;
}
.map-hud{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:transparent;
  backdrop-filter:none;
  border:none;
  border-radius:12px;
  z-index:3;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.8);
}
.map-hud strong{
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
}
.hotspots{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:auto;
}
.marker{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border:none; background:transparent; cursor:pointer;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation:float 2.4s ease-in-out infinite;
}
.marker::after{content:"💎"; font-size:32px; line-height:44px;}
.marker:focus-visible{outline:2px solid rgba(255,255,255,.6); outline-offset:2px}
.marker:hover{ transform:translate(-50%,-68%); }

@keyframes float{
  0%, 100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-8px); }
}

/* ---------------- GAME VIEW ---------------- */
#view-game{ 
  position:relative;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
#view-game .card, #view-game .card .card-inner{ background:transparent; border:none; padding:0; box-shadow:none; max-width:unset; }
#view-game .card + .card{ display:none; } 
#view-game .game-contents{ position:relative; z-index:1; }
#view-game .glass,
#view-game .card,
#view-game .card .card-inner{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
#view-game .mine,
#view-game .stats,
#view-game .stats-wrap,
#view-game > .card:first-of-type{ display:none !important; }

#view-game #game-canvas{
  position: relative !important;
  width: min(90vw, 1320px) !important;
  height: min(90vh, 900px) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile override - use full screen */
@media (max-width: 768px) {
  #view-game #game-canvas {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}

#view-game #game-canvas .cave-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url('assets/cave.png') center center / contain no-repeat !important;
  pointer-events: none !important;
  border-radius: 12px;
}

#view-game #game-canvas #stage{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(10px, 2vh, 20px) clamp(8px, 2vw, 16px) clamp(40px, 8vh, 80px) !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

#view-game #game-canvas #stage > *{
  pointer-events: auto !important;
}

#hud-top{
  position: absolute !important;
  top: clamp(6px, 1vh, 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  display: inline-flex !important;
  gap: clamp(6px, 1.5vw, 14px) !important;
  align-items: center !important;
  padding: clamp(4px, 1vh, 8px) clamp(6px, 1.5vw, 12px) !important;
  border-radius: 999px !important;
  background: rgba(10,15,28,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  pointer-events: auto !important;
  font-size: clamp(12px, 2.5vw, 16px) !important;
  white-space: nowrap !important;
  max-width: 95vw !important;
  overflow: hidden !important;
}

#hud-top .hud-center{
  display: inline-flex !important;
  gap: clamp(6px, 1.5vw, 14px) !important;
  align-items: center !important;
  font-size: inherit !important;
}

#hud-top button{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ---------------- BANK ---------------- */
#view-bank{
  position:relative; 
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  background:
    url('assets/bank.png') center center / contain no-repeat,
    linear-gradient(180deg,rgba(20,29,51,.10),rgba(20,29,51,.10));
  border-radius:0;
  display:flex;
  flex-direction:column;
}
.bank-panel{ 
  position:absolute; 
  top:70px; 
  right:18px; 
  width:min(480px,44%); 
  max-height:calc(100vh - 88px);
  overflow-y:auto;
}
.bank-panel .card{ 
  background:rgba(10,15,28,.75); 
  border:1px solid rgba(255,255,255,.12);
}
.bank-panel .card .card-inner{ 
  background:rgba(10,15,28,.55); 
}

/* ---------------- MOBILE OPTIMIZATIONS ---------------- */
@media (max-width:768px){
  body{
    font-size:14px;
  }
  
  header{padding:8px 12px;}
  h1{font-size:22px;}
  .nav{gap:6px;}
  .link{padding:6px 8px; font-size:14px;}
  .card{padding:8px;}
  .card .card-inner{padding:8px; max-width:85vw !important;}
  .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px;}
  .grid2{grid-template-columns:1fr; gap:10px;}
  .row{gap:8px;}
  input,select,button{font-size:16px !important;}
  .choice{padding:14px 16px; font-size:20px;}
  .q{font-size:32px;}
  .map-wrap{
    max-width:100vw;
    width:98vw;
    margin:0 1vw;
    aspect-ratio:16/9;
  }
  
  /* Make login/player picker box smaller on mobile */
  .bg-header{
    padding-top:3vh !important;
    align-items:flex-start !important;
  }
  .bg-header .card{
    padding:4px !important;
    margin-top:0 !important;
  }
  .bg-header .card .card-inner{
    max-width:90vw !important;
    width:90vw !important;
    padding:6px !important;
  }
  
  /* Make text smaller on login screen */
  #view-families h2,
  #view-gate h2,
  #view-kids h2,
  .bg-header h2{
    font-size:16px !important;
    margin:0 0 6px 0 !important;
    line-height:1.2 !important;
  }
  
  #view-families p,
  #view-gate p,
  #view-kids p,
  .bg-header p{
    font-size:11px !important;
    margin:4px 0 !important;
    line-height:1.3 !important;
  }
  
  #view-families .list,
  #view-gate .list,
  #view-kids .list,
  .bg-header .list{
    gap:4px !important;
  }
  
  /* Keep 2-column login on mobile too */
  .login-container{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  
  /* Make form inputs and buttons much smaller */
  #view-families input,
  #view-families select,
  #view-families button,
  #view-gate input,
  #view-gate select,
  #view-gate button,
  #view-kids input,
  #view-kids select,
  #view-kids button,
  .bg-header input,
  .bg-header select,
  .bg-header button{
    padding:6px 8px !important;
    font-size:13px !important;
    border-radius:6px !important;
    min-height:auto !important;
  }
  
  /* Make kid selection buttons more compact */
  #view-kids .grid,
  .bg-header .grid{
    gap:6px !important;
    grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)) !important;
  }
  
  #view-kids .grid button,
  .bg-header .grid button{
    padding:8px 6px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }
  
  /* Make family picker buttons smaller */
  #view-families .list button{
    padding:8px 10px !important;
    font-size:13px !important;
  }
  
  /* Smaller unlock details section */
  .bg-header .unlock{
    padding:6px !important;
    max-width:260px !important;
  }
  
  .bg-header .unlock summary{
    font-size:12px !important;
  }
  
  .bg-header .row{
    gap:4px !important;
    flex-wrap:wrap !important;
  }
  
  /* Move map buttons to top right on mobile */
  .map-hud{
    flex-direction:column !important;
    align-items:flex-end !important;
    top:60px !important;
    bottom:auto !important;
    right:8px !important;
    left:auto !important;
    background:transparent !important;
    padding:0 !important;
    gap:8px !important;
  }
  
  .map-hud > div:first-child{
    display:none !important; /* Hide player name/gems on mobile to save space */
  }
  
  .map-hud > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }
  
  /* Final catch-all for home screen sections */
  section.bg-header .card-inner{
    max-width:280px !important;
    padding:8px !important;
  }
  
  section#view-families .card-inner,
  section#view-gate .card-inner,
  section#view-kids .card-inner{
    max-width:280px !important;
    padding:8px !important;
  }
  
}

@media (max-width:480px){
  .map-wrap{
    width:98vw;
    max-width:98vw;
  }
}

/* ---------------- FULLSCREEN MODE ---------------- */
:fullscreen #view-game #game-canvas,
:-webkit-full-screen #view-game #game-canvas,
:-moz-full-screen #view-game #game-canvas,
:-ms-fullscreen #view-game #game-canvas {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
}

/* Dragon choice screen optimizations */
#view-dragon-choice .grid2 {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 500px;
  margin: 0 auto;
}

#view-dragon-choice .choice {
  padding: 12px 14px !important;
  font-size: 0.95em !important;
}

#view-dragon-choice .choice > div:first-child {
  font-size: 1.5em !important;
  margin-bottom: 4px !important;
}

/* Mobile optimizations for dragon choice */
@media (max-width: 768px) {
  #view-dragon-choice .grid2 {
    gap: 10px !important;
    max-width: 90vw;
  }
  
  #view-dragon-choice .choice {
    padding: 10px 12px !important;
    font-size: 0.85em !important;
  }
}

/* Fullscreen map adjustments to keep markers aligned */
:fullscreen .map-wrap,
:-webkit-full-screen .map-wrap,
:-moz-full-screen .map-wrap,
:-ms-fullscreen .map-wrap {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

:fullscreen .map-img,
:-webkit-full-screen .map-img,
:-moz-full-screen .map-img,
:-ms-fullscreen .map-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

:fullscreen .hotspots,
:-webkit-full-screen .hotspots,
:-moz-full-screen .hotspots,
:-ms-fullscreen .hotspots {
  position: absolute !important;
  inset: 0 !important;
}

/* Landscape orientation optimization */
@media (orientation: landscape) {
  #view-game #game-canvas {
    width: 100vw !important;
    height: 100vh !important;
  }
  
  #view-game #game-canvas #stage {
    padding-bottom: 10vh !important;
  }
}

/* iOS-specific fullscreen optimizations */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  #view-game {
    position: fixed !important;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  /* iOS standalone mode (added to home screen) */
  @media (display-mode: standalone) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    header {
      padding-top: max(12px, env(safe-area-inset-top));
    }
  }
}