@import url('./browser-view.css');
@import url('./game-view.css');
@import url('./play-view.css');

/************** Globals **************/
html, body, #app-wrapper { margin:0; width:100%; height:100%; overflow:hidden; }
#app { width:100%; height:100%; }
#app-wrapper{ display:flex; flex-direction:column; justify-content:center; }
#app{ flex:0 0 auto; }
* { box-sizing: border-box; }

/************** Font **************/
@font-face{
  font-family: "Liberator";
  src:
    url("./assets/fonts/Liberator/Liberator-Heavy.woff2") format("woff2"),
    url("./assets/fonts/Liberator/Liberator-Heavy.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/************** Theme **************/
:root{
  --red: #ff2a36;
  --panel: #222338;
  --ink: #ffffff;
  --bg: #e4e4e4;

  /* spacing that grows with width (so “extra width becomes gap”) */
  --outer-pad: clamp(8px, 1.2vw, 20px);
  --hgap:      clamp(12px, 2.2vw, 40px);

  /* UI chrome */
  --radius: .5rem;
  --border: 6px solid var(--red);

  /* thumbs */
  --thumb-gap:.5rem;
  --thumb-btn:2rem;
}

html, body { background: var(--bg); color: var(--ink); }
body { font-family: 'Liberator', system-ui, sans-serif; text-transform: uppercase; }

/* Responsive button font sizes scale with the viewport width
   to keep text legible on large and small screens. */
button{
  font-size: clamp(0.8rem, 1.25dvw, 2rem);
  /* Use a fixed radius so corners stay consistent */
  border-radius: var(--radius);
}

/* DO NOT position the brand mark globally; it lives in the grid now. */