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

/* Make the menu/overlay translucent so canvas is visible */
#overlays { background: transparent !important; }
#loading  { background: transparent !important; }

/* Main menu panel: glassy look over gameplay */
#panel-1 {
  background: rgba(39, 48, 66, 0.35) !important;   /* was solid */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Optional: lighten text for contrast on transparent background */
#panel-1 .text { text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* Disable the dim overlay click-blocker background */
.alerts .overlay { background: rgba(0,0,0,0.35); }

/* Buttons: ensure hover contrast over gameplay */
.button.text { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* Ensure canvas stays visually behind UI */
#canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; }

/* ----- Footer (overlayed, subtle, always readable) ----- */
.site-footer{
  position:fixed; left:0; right:0; bottom:10px; z-index:10000;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 10px;
  color:#cfe9d6;
  background:rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius:12px;
  margin:auto; width:max(320px, 48%);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.footer-nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.site-footer a{color:#8fd3ff; text-decoration:none; font-weight:600}
.site-footer a:hover{text-decoration:underline}
.site-footer .dot{opacity:.6}
.site-footer small{opacity:.8}
@media (max-width:680px){
  .site-footer { width:92%; font-size:13px; }
}

/* === NEWS / ABOUT PANEL === */
#news_box, #news_box * {
  font-family: Ubuntu, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  text-align: left !important;
  color: #eaf5ef !important;
  letter-spacing: .1px;
}

/* Container */
#news_box{
  /* sizing & layout */
  max-width: 460px;
  margin: 10px auto;
  padding: 14px 16px 16px;
  max-height: 62vh;
  overflow: auto;

  /* look & feel — subtler, more transparent */
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* Headings */
#news_box h2{
  font-family: Raleway, system-ui, sans-serif !important;
  font-weight: 900;
  font-size: 22px !important;
  line-height: 1.2;
  margin: 0 0 10px 0;
  color: #bdf4cd !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
#news_box h3{
  font-family: Raleway, system-ui, sans-serif !important;
  font-weight: 800;
  font-size: 16px !important;
  margin: 14px 0 6px 0;
  color: #dfffe9 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Body text */
#news_box p{
  font-size: 14.5px !important;
  line-height: 1.55;
  margin: 6px 0;
  color: #f1fff7 !important;
}
#news_box em { font-style: italic; }
#news_box strong { font-weight: 800; }

/* Lists aligned & neat */
#news_box ul{
  list-style: disc;
  margin: 6px 0 8px 18px;
  padding: 0;
}
#news_box li{
  font-size: 14.5px !important;
  line-height: 1.5;
  margin: 3px 0;
}

/* Controls grid for perfect alignment */
#news_box .controls{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  margin: 6px 0 2px 0;
}
#news_box .controls .label{
  font-weight: 800;
  color: #dfffe9;
}
#news_box .controls kbd{
  background: rgba(13,17,23,.65);
  border: 1px solid #2b2f36;
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Make the big “News” heading less gigantic/overbearing */
#panel-1 .left > h1.left.text{
  font-size: 32px !important;
  margin: 0 0 8px 8px !important;
  color: #7bd39a !important;
  filter: none !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Footer: slightly more transparent + centered */
.site-footer{
  position: fixed; left: 0; right: 0; bottom: 10px; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px;
  color: #cfe9d6;
  background: rgba(0,0,0,0.14);              /* reduced opacity */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  margin: auto; width: max(320px, 48%);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);     /* softer shadow */
  border: 1px solid rgba(255,255,255,.06);
}
.footer-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.site-footer a{color:#8fd3ff;text-decoration:none;font-weight:700}
.site-footer a:hover{text-decoration:underline}
.site-footer .dot{opacity:.55}
.site-footer small{opacity:.8}
@media (max-width:780px){ .site-footer{ width:92%; font-size:13px; } }

/* --- Fix oversized text inside the News box --- */
#news_box{
  font-size: 15px !important;         /* baseline for everything inside */
}
#news_box *{
  font-size: inherit;                  /* cancel any global vw-based fonts */
}

/* Keep headings the intended sizes */
#news_box h2{ font-size: 22px !important; }
#news_box h3{ font-size: 16px !important; }

/* Controls row sizing & weight */
#news_box .controls .label{
  font-size: 15px !important;
  font-weight: 800;
  color: #dfffe9;
}
#news_box .controls div:not(.label){
  font-size: 15px !important;
  font-weight: 600;
}

/* Keyboard caps stay slightly smaller for balance */
#news_box .controls kbd{
  font-size: 13px !important;
}
/* === RIGHT PANEL (Options) STYLING === */

/* Container */
#panel-1 .right {
  max-width: 460px;
  margin: 10px auto;
  padding: 14px 16px 16px;
  background: rgba(0, 0, 0, 0.18);   /* same as news */
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  color: #eaf5ef !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55;
}

/* Headings */
#panel-1 .right h1,
#panel-1 .right h2 {
  font-family: Raleway, system-ui, sans-serif !important;
  font-weight: 900;
  font-size: 20px !important;
  margin: 10px 0 6px 0;
  color: #bdf4cd !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
#panel-1 .right h1.text.title {
  font-size: 16px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #dfffe9 !important;
  margin: 14px 0 6px 0;
}

/* Labels & checkboxes */
#panel-1 .right label {
  font-size: 14.5px !important;
  line-height: 1.5;
  margin-left: 6px !important;
  color: #f1fff7 !important;
}
#panel-1 .right input[type=checkbox] {
  transform: scale(1.1);
  margin-left: 0;
}

/* Sliders (volume) */
#panel-1 .right input[type=range] {
  accent-color: #22b560; /* green thumb/track */
}
/* --- Fix overlapping/stacking in the News column --- */

/* Stop the parent column from forcing huge line-height inside */
#panel-1 .left { line-height: initial !important; }

/* Give the News box and *all* its children a sane baseline */
#news_box,
#news_box * {
  line-height: 1.55 !important;   /* consistent spacing */
}

/* Ensure blocks break cleanly after each section */
#news_box h2,
#news_box h3,
#news_box p,
#news_box ul,
#news_box .controls { 
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  display: block;                  /* avoid inline oddities */
  clear: both;                     /* guard against any floated globals */
}

/* Controls grid: crisp alignment, normal line height */
#news_box .controls{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  line-height: 1.4 !important;     /* a touch tighter for rows */
}

/* Keep label/value sizes consistent with body text */
#news_box .controls .label,
#news_box .controls div:not(.label){
  font-size: 15px !important;
  font-weight: 600;
}

/* Keyboard caps stay slightly smaller */
#news_box .controls kbd{
  font-size: 13px !important;
}

/* === CLEANUP and RESTYLE the OPTIONS panel to match NEWS panel === */

/* Make outer right panel match the left panel visually */
#panel-1 .right {
  max-width: 460px;
  margin: 10px auto;
  padding: 14px 16px 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  color: #eaf5ef !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55;
}

/* Match the green heading ("Options") */
#panel-1 .right > h1.right.text {
  font-family: Raleway, system-ui, sans-serif !important;
  font-weight: 900;
  font-size: 32px !important;
  margin: 0 0 8px 8px !important;
  color: #7bd39a !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  filter: none !important;
}

/* Headings: Performance, Audio */
#panel-1 .right h1.right.text.title {
  background: none !important;     /* REMOVE dark pill */
  box-shadow: none !important;
  font-family: Raleway, system-ui, sans-serif !important;
  font-weight: 800;
  font-size: 16px !important;
  margin: 12px 0 6px 0 !important;
  color: #dfffe9 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 !important;
  border: none !important;
}

/* Remove any leftover background pills or shadows */
#panel-1 .right .text,
#panel-1 .right .text.title,
#panel-1 .right .text.header {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Input checkboxes and labels */
#panel-1 .right input[type="checkbox"] {
  transform: scale(1.1);
  vertical-align: middle;
  margin: 6px 0 6px 0;
}
#panel-1 .right label {
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  margin-left: 6px !important;
  vertical-align: middle;
  color: #f1fff7 !important;
}

/* Sliders */
#panel-1 .right input[type=range] {
  accent-color: #22b560;
  width: 92%;
  margin: 8px 0 14px 0;
  display: block;
}

/* Optional: ensure spacing below last section */
#panel-1 .right {
  padding-bottom: 20px;
}