/* style.css (SHARED) */

/* ===== Base ===== */
:root{
  --bg:#ffffff;
  --fg:#000000;
  --focus:#005fcc;
  --font:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Safer “centered” layout without iOS 100vh weirdness */
.shell{
  width:100%;
  max-width:420px;
  margin:0 auto;
  padding:24px 20px;
  min-height:100svh; /* modern mobile-safe viewport */
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ===== Accessibility ===== */
button:focus-visible,
select:focus-visible,
input:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* Screen-reader only */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ===== Typography ===== */
.title-style{
  font-weight:400;
  font-size:2rem;
  text-transform:uppercase;
  letter-spacing:0.3em;
  text-align:center;
  padding-left:0.3em; /* optical centering */
  margin:0 0 1.5rem 0;
  padding-bottom:1rem;
  border-bottom:1px solid var(--fg);
}

/* ===== Launcher ===== */
.launchOnly{
  text-align:center;
}

.hint{
  margin:14px 0 0 0;
  font-size:0.85rem;
  line-height:1.4;
}

/* ===== Form Layout ===== */
#controls{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.form-group{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  width:100%;
}

label{
  font-size:1rem;
  white-space:nowrap;
}

select{
  background:#fff;
  border:1px solid var(--fg);
  color:var(--fg);
  padding:8px 12px;
  font-family:inherit;
  font-size:1rem;
  border-radius:0;
  cursor:pointer;
  min-width:140px;
  text-align:right;
  -webkit-appearance:none;
  appearance:none;
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:160px;
  height:2px;
  background:var(--fg);
  border:none;
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  background:var(--fg);
  border:none;
  box-shadow:0 0 0 6px rgba(0,0,0,0.01);
}

.form-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:0.5rem;
}

/* ===== Buttons ===== */
.btn{
  font-family:inherit;
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:15px 0;
  cursor:pointer;
  border:1px solid var(--fg);
  border-radius:0;
  background:#fff;
  color:var(--fg);
  transition:opacity 0.12s ease;
}

/* Filled = active/selected */
.btn.filled{
  background:var(--fg);
  color:var(--bg);
  font-weight:700;
}

.btn:hover{ opacity:0.82; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

/* Launcher button matches title aesthetic */
.btn-launch{
  font-size:2rem;
  font-weight:400;
  letter-spacing:0.3em;
  text-transform:uppercase;
  padding:25px 50px;
  padding-left:calc(50px + 0.3em);
}

/* ===== Footer ===== */
.separator{
  border:0;
  border-top:1px solid var(--fg);
  margin:2rem 0 1.25rem 0;
}

#credits{
  text-align:left;
  font-size:0.75rem;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.hotkeys{
  margin-top:8px;
  opacity:0.75;
}

/* ===== Small screens ===== */
@media (max-width:360px){
  .shell{ padding:18px 16px; }
  select{ min-width:120px; }
  input[type="range"]{ width:140px; }
}