/* FRONTIER — Clean styles
   Dark UI, simple layout, lightweight. */

/* Base hero: only the image here (no gradient) */
#screen-home .hero{
  position: relative;
  overflow: hidden;
  min-height: 480px;
  padding: 56px 32px 40px;
  border: 1px solid #2a3344;
  border-radius: 16px;
  box-shadow: 0 30px 60px #0009 inset, 0 12px 32px #0006;
  isolation: isolate; /* prevents overlay blending outside image */
}

/* Wrap image background separately */
#screen-home .hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("img/hero-synthwave.png") center/cover no-repeat;
  z-index: 0;
}

/* Darkening overlay layered above the image only */
#screen-home .hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55));
  pointer-events:none;
  opacity: 1;
  transition: opacity .28s ease;
  z-index: 1;
}

/* Reveal full color on hover */
@media (hover:hover){
  #screen-home .hero:hover::after{ opacity: 0; }
}

/* Ensure content is above overlays */
#screen-home .hero > * {
  position: relative;
  z-index: 2;
}

/* (nice-to-have) respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #screen-home .hero::after{ transition:none; }
}


/* --------- Base --------- */
:root{
  --bg:#0b0e16;
  --bg-2:#0f1421;
  --panel:#111626ea;
  --panel-b:#2a3344;
  --text:#cdd6f4;
  --muted:#9aa3b6;
  --ui:#9ae6b4;
  --accent:#ffd36e;
  --danger:#ff6b6b;
  --topbar-h:48px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

/* --------- Topbar --------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(180deg, #0d1220f0, #0b0e16e6);
  border-bottom:1px solid #1b2231;
  backdrop-filter:saturate(1.2) blur(6px);
}
.brand{font-weight:700; letter-spacing:.5px}
.nav{display:flex; gap:8px}

/* --------- Buttons --------- */
.btn{
  appearance:none; border:1px solid #2a3344; background:#12192a; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
  transition:.15s ease background, .15s ease border-color, .15s ease opacity, .15s ease transform;
}
.btn:hover{background:#152034; border-color:#334055}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(180deg,#1b2a45,#15243d); border-color:#3b4d6b; color:#e7f6ff}
.btn.primary:hover{background:linear-gradient(180deg,#213250,#172a46); border-color:#4c6186}
.btn.danger{background:linear-gradient(180deg,#3a1b25,#2c141b); border-color:#6b2a3a; color:#ffdfe3}
.btn.danger:hover{background:linear-gradient(180deg,#4a202d,#351824); border-color:#8a394e}
.btn[disabled],
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Small helpers */
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.stack{display:flex; flex-direction:column}
.micro{color:var(--muted); font-size:12px}

/* --------- Screens --------- */
main{min-height:calc(100vh - var(--topbar-h))}
.screen{display:none; padding:16px}
.screen.active{display:block}

/* Full-bleed game screen */
#screen-game{padding:0}
#game{
  display:block;
  width:100%;
  height:calc(100vh - var(--topbar-h));
  background:#060a12;
  border:none;              /* no border */
  border-radius:0;          /* no rounding */
}

/* --------- Home / Hero --------- */
.hero{max-width:900px; margin:40px auto 24px; text-align:center}
.hero h1{margin:0 0 6px; font-size:44px; letter-spacing:.5px}
.tagline{color:var(--muted); margin:0 0 16px}
.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0}
.note{color:#7f8aa1}

/* --------- Atlas --------- */
.atlas-wrap{
  position:relative;
  height: calc(100vh - 120px);
  min-height:480px;
  background:#070a12;
  border:1px solid #131b2a;
  border-radius:14px;
  overflow:hidden;
}
#atlas{
  display:block;
  width:100%;
  height:100%;
}

/* overlay with right panel */
.atlas-overlay{
  position:absolute; inset:0;
  pointer-events:none;
}
.atlas-overlay .panel{
  position:absolute; top:12px; right:12px;
  width:330px; max-width:90vw;
  background:var(--panel);
  border:1px solid var(--panel-b);
  border-radius:14px; padding:14px;
  pointer-events:auto;
  box-shadow:0 18px 50px #0008;
}
.atlas-overlay h2{margin:0 0 6px; font-size:18px}
.atlas-overlay .panel .stack .btn,
.atlas-overlay .panel .row .btn{width:100%}
.atlas-overlay .panel .row .btn.ghost{width:auto}

/* --------- Game HUD --------- */
.hud{
  position:absolute; left:12px; top:72px; z-index:5;
  pointer-events:none;
}
.hud-col{
  background:rgba(11,16,26,0.78);
  border:1px solid #263149;
  border-radius:10px;
  padding:10px 12px;
  color:#d7e3f7;
  box-shadow:0 12px 30px #0006;
  pointer-events:auto;
}
.hud .micro{font-size:11px}

/* Minimap */
#minimap{
  position:absolute;
  right:16px; bottom:86px; z-index:4;
  background:#060a12; border:1px solid #1d2638; border-radius:10px;
  box-shadow:0 12px 30px #0006;
  width: 180px;
  height: 180px;
}
.hint{
  position:absolute; bottom:14px; right:14px; z-index:3;
  color:var(--muted); font-size:12px; background:#0d1423b0; border:1px solid #243251;
  padding:6px 10px; border-radius:10px;
}

/* --------- Album --------- */
.album-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.filters{display:flex; gap:8px}
select{
  background:#0f1726; color:var(--text); border:1px solid #24304a; padding:6px 10px; border-radius:8px;
}
.album-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.album-grid .empty{
  grid-column:1 / -1;
  text-align:center; color:var(--muted); padding:20px 0;
}
.card{
  position:relative;
  background:#0f1626; border:1px solid #263149; border-radius:12px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px); border-color:#34507a; box-shadow:0 14px 40px #0007}
.card-thumb{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#0a0f1a}
.card-body{padding:10px}
.card-title{font-weight:600; margin-bottom:4px}
.card-meta{color:var(--muted); font-size:12px}
.card-rarity{
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#2a3344,#3bd4a0);
}

/* --------- Modal --------- */
.modal.hidden{display:none}
.modal.open{display:block}
.modal{position:fixed; inset:0; z-index:60}
.modal-backdrop{position:absolute; inset:0; background:#000a}
.modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(900px,92vw); max-height:90vh; overflow:auto;
  background:#0f1626; border:1px solid #2a3344; border-radius:14px; padding:14px;
  box-shadow:0 22px 60px #0009;
}
.modal-close{
  position:absolute; right:10px; top:10px;
  width:28px; height:28px; line-height:26px; text-align:center;
  border-radius:50%; border:1px solid #39455f; background:#121a2b; color:#cdd6f4; cursor:pointer;
}
#modal-body .modal-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start;
}
.modal-thumb{width:100%; border-radius:10px; border:1px solid #263149; background:#0a0f1a}
.modal-title{margin:2px 0 0}
.modal-meta{color:var(--muted); margin-bottom:8px}
.modal-stats .stat{padding:4px 0; border-bottom:1px dashed #22304a}
.modal-stats .stat:last-child{border-bottom:none}

/* --------- Settings --------- */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-b);
  border-radius:14px;
  padding:14px;
  box-shadow:0 18px 50px #0008;
}
.panel.narrow{max-width:640px; margin:0 auto}
.settings-group{margin-top:8px}
.settings-group h3{margin:.2rem 0 .6rem; font-size:16px}

.radio-row{display:flex; align-items:center; gap:8px}
.radio-title{
  flex:1; text-align:center; padding:8px 10px;
  background:#0f1726; border:1px solid #24304a; border-radius:10px; color:#e6eefc;
  min-height:36px; display:flex; align-items:center; justify-content:center;
}
#radio-volume{flex:1}

/* Range input (minimal) */
input[type="range"]{
  -webkit-appearance:none; height:6px; border-radius:999px; background:#1b2437; border:1px solid #2a3348;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:#dfe9ff; border:1px solid #3a4d75; box-shadow:0 2px 6px #0008;
}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border:none; border-radius:50%; background:#dfe9ff;
}

/* --------- Footer --------- */
.footer{
  display:flex; gap:8px; align-items:center; justify-content:center;
  color:#9aa3b6; padding:12px 8px; border-top:1px solid #1b2231; margin-top:10px;
}
.footer a{color:#cdd6f4; text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .sep{opacity:.5}

/* --------- Noscript --------- */
.noscript{
  margin:10px auto; max-width:600px;
  background:#1a2233; border:1px solid #2b3958; color:#fff; padding:10px 12px; border-radius:10px;
}

/* --------- Small screens --------- */
@media (max-width: 920px){
  .atlas-overlay .panel{width:auto; left:12px; right:12px}
  #modal-body .modal-grid{grid-template-columns:1fr}
  #minimap{right:12px; bottom:84px}
}

/* — Square corners everywhere — */
:root { --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; }

:where(button,.btn,.panel,.card,.modal-card,.modal-close,.topbar,.footer,
.hud,.atlas-wrap,.atlas-overlay,.album-head,.album-grid .card,#minimap,
canvas,input,select,.row > *,.stack > *,#radio-mute,#radio-prev,#radio-next) {
  border-radius: 0 !important;
}

/* If anything still stays rounded, uncomment this nuclear line: */
/* * { border-radius: 0 !important; } */

/* Square off remaining rounded corners */
.hero, .hero img, .hero .panel, .hero .card { border-radius: 0 !important; }

#hud, #hud .hud-col, .hint { border-radius: 0 !important; }

/* === CosmoLab preview — absolute (scrolls with page), clean circle + static label === */
#cosmolab-preview{
  position: absolute;                 /* scrolls with the page */
  top: calc(var(--topbar-h) + 40px);  /* near hero */
  right: 24px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  background: transparent;
  z-index: 4;                         /* below sticky topbar (z:10) */
  cursor: pointer;
  user-select: none;
  transition: none;                   /* no hover/click motion */
}

/* static label under the circle */
#cosmolab-label{
  position: absolute;
  font-size: 12px;
  color: #9aa3b6;
  letter-spacing: .6px;
  white-space: nowrap;
  pointer-events: none;               /* clicks still hit the canvas */
  z-index: 4;
}