/* Styles for Hot Potato */
:root{
  --bg: #0b0b0f;
  --fg: #ffffff;
  --accent: #ff7a1a;
  --muted: #98a2b3;
}
@font-face{
  font-family:'AdigianaUltra';
  src: url('/assets/fonts/Adigiana Ultra.ttf') format('truetype');
  font-display: swap;
}
@font-face{
  font-family:'PotatoSansBold';
  src: url('/assets/fonts/Potato_sans-Bold.otf') format('opentype');
  font-display: swap;
}
@font-face{
  font-family:'PotatoSansBlack';
  src: url('/assets/fonts/Potato_sans-Black.otf') format('opentype');
  font-display: swap;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; height:100%; background:var(--bg);
  color:var(--fg); font-family: PotatoSansBold, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container{
  min-height:100vh; display:flex; flex-direction:column;
  background: url('/assets/background.jpg') center/cover no-repeat fixed;
}
.overlay{
  backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.45);
  min-height:100vh; padding: clamp(12px, 3vw, 36px);
}
header h1{
  font-family: AdigianaUltra, PotatoSansBlack, system-ui, sans-serif;
  font-weight:900; letter-spacing:.5px; margin:0 0 8px 0; 
  font-size: clamp(28px, 4vw, 56px);
  text-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tagline{ color: var(--muted); margin-bottom: 20px; }
.card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: clamp(12px, 2.2vw, 24px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.controls{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px; }
button, .btn{
  border:0; border-radius: 14px; padding: 14px 18px;
  font-size: clamp(16px, 2.5vw, 18px); font-weight:700;
  background: var(--accent); color:#111; cursor:pointer;
  box-shadow: 0 6px 14px rgba(255,122,26,0.3);
}
button.secondary{
  background:#1a1f2e; color:#fff; border:1px solid rgba(255,255,255,0.14);
}
button.ghost{
  background:transparent; border:1px dashed rgba(255,255,255,0.3); color:#fff;
}
button:focus{ outline: 3px solid #ffd36d; outline-offset: 2px; }
.lang-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.lang-item{ background:#151824; border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:16px; display:flex; justify-content:center; align-items:center; font-size:18px; cursor:pointer;}
.lang-item:hover{ border-color: rgba(255,255,255,0.25); }
.badge{ display:inline-flex; align-items:center; gap:8px; }
.state-indicator{ margin-top: 6px; color:#ffe2c4; }
#playingViz{ margin-top:18px; display:none; justify-content:center; align-items:center; min-height: 160px; }
#playingViz img{ max-width: min(360px, 86vw); border-radius: 16px; border:2px solid rgba(255,255,255,0.18); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
#promptScreen{ display:none; text-align:center; }
.prompt-box{
  margin-top: 12px;
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
}
.prompt-text{
  font-size: clamp(20px, 3.6vw, 30px);
  line-height: 1.35;
}
.small{ font-size: 14px; }
footer{ margin-top:auto; padding-top: 24px; color: var(--muted); font-size: 14px; }
.settings{ margin-top:12px }
.category-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.category-list label{
  background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding:8px 12px; display:flex; gap:8px; align-items:center; cursor:pointer;
}
.gif-lg{ width: min(520px, 92vw); border-radius: 18px; margin: 8px auto; display:block; border:2px solid rgba(255,255,255,0.2) }
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }