html, body { height: 100%; }
* { box-sizing: border-box; }
body { margin: 0; -webkit-text-size-adjust: 100%; }

/* --- Full-page centering that works on iOS toolbars --- */
body{
  min-height: 100dvh;                 /* use dynamic viewport on iOS */
  display: grid;
  place-items: center;                 /* vertical + horizontal */
  background: rgb(18,18,18);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: max(8px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}

/* --- The centered block --- */
.arena-container{
  width: min(92vw, 360px);             /* perfect on 375px screens */
  display: grid;
  justify-items: center;               /* center children */
  text-align: center;
  gap: 12px;
}

/* --- Title with eyebrow --- */
.arena-title{ 
  margin: 0; 
  line-height: 1.1; 
  display: grid; 
  gap: .25rem;
  text-wrap: balance;
}
.arena-title .eyebrow{
  font-weight: 700;
  letter-spacing: .02em;
  color: #e6e6e6;
  font-size: clamp(14px, 3.8vw, 18px);
}
.arena-title .main{
  color: #FFCC00;
  font-weight: 800;
  font-size: clamp(34px, 10vw, 44px);  /* won’t clip on 375px */
}

/* --- Subtext --- */
.subtext{ color:#cfcfcf; margin: 2px 0 12px; }

/* --- Buttons --- */
.battle-options{ width: 100%; display: grid; gap: 10px; }
.battle-options button{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: #161a1e;
  border: 1.5px solid #2a2a2a;
  color: #fff; font-weight: 700;
  padding: 0 14px;
}

/* Short screens get a nudge */
@media (max-height: 680px){
  .arena-title .main{ font-size: clamp(30px, 9vw, 40px); }
  .battle-options button{ height: 44px; }
}


/* Buttons block */
.battle-options{
  display: grid;
  gap: 10px;
}

.battle-options button{
  height: 48px;                   /* smaller than before = more fit */
  border-radius: 12px;
  background: #161a1e;
  border: 1.5px solid #2a2a2a;
  color: #FFCC00;
  font-weight: 700;
  padding: 0 14px;
}

/* Extra breathing room on very short screens */
@media (max-height: 680px){
  .arena-title .main{ font-size: clamp(30px, 9vw, 40px); }
  .battle-options button{ height: 44px; }
}

.battle-options {
  margin-top: 30px;
}

button {
  display: block;
  margin: 10px auto;
  padding: 15px 30px;
  background-color: #1f1f1f;
  color: #fff;
  border: 2px solid #444;
  border-radius: 12px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-color: #333;
  transform: scale(1.05);
}