:root{
  --bg: #ffffff;
  --card-bg: #f7f7f8;
  --text: #111111;
  --muted: #6b6b72;
  --accent: #0b5ed7;
  --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

/* simple centered card */
.card{
  width:100%;
  max-width:420px;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:28px;
  box-shadow: 0 6px 24px rgba(15,15,20,0.06);
  text-align:center;
}

/* headings */
.title{
  margin:0 0 8px 0;
  font-weight:700;
  font-size:20px;
}
.subtitle{
  margin:0 0 20px 0;
  color:var(--muted);
  font-size:14px;
}

/* controls */
.controls{
  display:flex;
  justify-content:center;
}

/* primary button - subtle, clean */
.btn{
  --pad-y:12px;
  --pad-x:20px;
  border:0;
  background:var(--accent);
  color:white;
  padding:var(--pad-y) var(--pad-x);
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 14px rgba(11,94,215,0.16);
  display:inline-flex;
  align-items:center;
  gap:10px;
  outline: none;
}

/* subtle press animation */
.btn:active{
  transform:translateY(1px) scale(.998);
  box-shadow: 0 3px 8px rgba(11,94,215,0.12);
}

/* focus for accessibility */
.btn:focus{
  box-shadow: 0 0 0 4px rgba(11,94,215,0.12);
}

/* small micro interaction: ripple effect element */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  width: 8px;
  height: 8px;
  opacity: 1;
  transition: transform 450ms ease, opacity 600ms ease;
}
.ripple.expand{
  transform: translate(-50%,-50%) scale(40);
  opacity: 0;
}

/* ensure button container is positioned for ripple */
.controls { position: relative; }

/* menu styles */
.menu{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:opacity .18s ease, transform .18s ease;
  opacity:1;
  transform:translateY(0);
}
.menu.hidden{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  height:0;
}
.menu-title{
  margin:0;
  font-size:16px;
  font-weight:600;
}
.menu-options{
  display:flex;
  gap:10px;
  width:100%;
  justify-content:center;
}
.menu-btn{ /* slightly lighter pill for menu choices */
  background:#0b5ed7;
  padding:10px 16px;
  border-radius:10px;
}
.back-btn{
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  padding:8px 12px;
}

/* fast mode toggle styling */
.fast-mode-label{
  margin-left:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
}
.fast-mode-label input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: var(--accent);
  cursor:pointer;
}

/* small toast feedback */
.toast {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:28px;
  background:#111;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* small responsive tweak */
@media (max-width:420px){
  .card{padding:20px;}
  .btn{width:100%;}
}

/* play form */
.play-form {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.play-form textarea{
  width:100%;
  resize:vertical;
  min-height:96px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(16,16,20,0.06);
  font-family: inherit;
  font-size:14px;
  color:var(--text);
  background: white;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.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;
}

/* Dialogue styling */
.dialogue{
  max-width:100%;
  background:transparent;
  padding:10px 8px;
  text-align:left;
}
.dialogue-text{
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.4;
  background:#fff;
  padding:12px;
  border-radius:10px;
  box-shadow: 0 4px 16px rgba(15,15,20,0.06);
}

/* new: starter gallery */
.starter-gallery{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.starter{
  background:transparent;
  border:1px solid rgba(16,16,20,0.06);
  border-radius:10px;
  padding:8px;
  width:30%;
  min-width:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.starter img{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f3f3f4);
  box-shadow: 0 6px 14px rgba(15,15,20,0.06);
}
.starter-name{ font-weight:700; font-size:13px; color:var(--text); }
.starter-type{ font-size:12px; color:var(--muted); }
/* pressed/selected state */
.starter[aria-pressed="true"]{
  transform:translateY(-4px);
  border-color: rgba(11,94,215,0.18);
  box-shadow: 0 8px 24px rgba(11,94,215,0.06);
}

/* ensure gallery is usable on small screens */
@media (max-width:420px){
  .starter{ width:100%; flex-direction:row; align-items:center; gap:12px; }
  .starter img{ width:56px; height:56px; }
}

.player-actions{ width:100%; margin-top:12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.action-buttons{ display:flex; gap:8px; width:100%; justify-content:space-between; }
.action-btn{ flex:1; padding:10px 8px; }
.moves-area{ width:100%; margin-top:10px; display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.moves-list{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.move-btn{ padding:8px 10px; background:#0b5ed7; color:#fff; border-radius:8px; font-weight:600; }

/* ensure small screens keep layout */
@media (max-width:420px){
  .action-buttons{ flex-direction:column; }
  .move-btn{ width:100%; }
}

/* Health bars */
.health-bars{ width:100%; margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.health-row{ display:flex; align-items:center; gap:10px; }

/* Hide the opponent's health row by default; show only when .visible is added */
.enemy-health { display: none; }
.enemy-health.visible { display: flex; }

.inventory-panel{
  width:100%;
  margin-top:10px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* small currency display */
#moneyDisplay{
  font-weight:700;
  color:var(--text);
  margin-left:6px;
}

/* shop-specific tweaks: reuse inventory-list visuals */
#shopPanel .inventory-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.shop-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px;
  background:#fff;
  border-radius:8px;
  box-shadow: 0 6px 14px rgba(15,15,20,0.04);
}
.shop-item .price{ color:var(--muted); font-weight:700; }
.shop-item .buy-btn{ background:var(--accent); color:#fff; padding:6px 10px; border-radius:8px; font-weight:600; cursor:pointer; border:0; }