* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #f4f1ff;
  background: radial-gradient(circle at 50% -10%, #3b2f78 0%, #1d1838 55%, #120f26 100%) fixed;
  min-height: 100vh;
}
#app { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; }
h1 { margin: 4px 0; font-size: 28px; letter-spacing: 0.5px; }
.title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title.compact { flex-direction: row; gap: 12px; }
.title.compact h1 { font-size: 24px; }
.emblem { width: 72px; height: 72px; }
.tagline { margin: 0; color: #b9b2e6; font-size: 14px; }
.panel { width: 100%; max-width: 480px; background: rgba(44, 37, 82, 0.92); border: 1px solid #463c7d; border-radius: 14px; padding: 16px; }
.lead { margin: 4px 0 12px; color: #d8d3f5; }
.nav { display: flex; gap: 8px; }
.profile, .stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #3a3170; color: #e3ddff; font-size: 13px; }
.chip-coins { background: #4a3d16; color: #ffd34d; }
.chip-energy { background: #173f4a; color: #7fe3f2; }
.demo-note { max-width: 480px; margin: 8px 0 0; text-align: center; font-size: 12px; color: #8f88c0; }

.btn { border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; white-space: nowrap; transition: transform 0.12s, filter 0.12s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-nav { height: 40px; font-size: 14px; background: #463c7d; color: #f4f1ff; }
/* R2: every confirm button is 48px tall with 16px text on every screen. */
.btn-confirm { height: 48px; font-size: 16px; background: #ffd34d; color: #1d1838; font-weight: 600; box-shadow: 0 3px 0 #b8901d; }

.gem { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1d1838; color: #fff; font-size: 12px; font-weight: 700; }
.type-attack { --type: #ff7a59; }
.type-defend { --type: #5aa8ff; }
.type-skill { --type: #b48cff; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.shop-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "gem name" "text text" "price price"; gap: 4px 8px; padding: 10px; border-radius: 10px; background: #f4f1ff; color: #1d1838; border-top: 4px solid var(--type); }
.shop-item .gem { grid-area: gem; background: var(--type); }
.shop-name { grid-area: name; font-weight: 600; align-self: center; }
.shop-text { grid-area: text; font-size: 12px; color: #4b4570; }
.price { grid-area: price; font-size: 13px; color: #8a6a00; font-weight: 600; }
.price::after { content: " coins"; font-weight: 400; }

.enemy { display: flex; align-items: center; gap: 14px; }
.enemy-face { width: 56px; height: 56px; flex: none; border-radius: 12px; background: #d9a066; border: 3px solid #8a5a2b; position: relative; }
.enemy-face::before, .enemy-face::after { content: ""; position: absolute; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #3b2412; }
.enemy-face::before { left: 13px; }
.enemy-face::after { right: 13px; }
.enemy-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.enemy-name { font-weight: 600; }
.hp-bar { height: 10px; border-radius: 5px; background: #3a3170; overflow: hidden; }
.hp-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff5a5a, #ff9a6b); transition: width 0.3s; }
.hp-text { font-size: 13px; color: #d8d3f5; }
.banner { margin: 0; padding: 8px 16px; border-radius: 999px; background: #ffd34d; color: #1d1838; font-weight: 600; }

.hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.card { width: 88px; height: 124px; border-radius: 10px; background: #f4f1ff; color: #1d1838; border: 0; border-top: 6px solid var(--type); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; transition: transform 0.15s, box-shadow 0.15s; }
.card:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); }
.card:disabled { opacity: 0.45; cursor: not-allowed; }
.card .gem { background: var(--type); }
.card-name { font-weight: 600; font-size: 14px; }
.card-text { font-size: 11px; color: #4b4570; text-align: center; }