* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, system-ui, sans-serif; background: #000; color: #e5e5e5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.inline-form { display: inline; }
button { font-family: inherit; }

/* Home */
.home-body { background: #0c0a09; padding: 1.5rem; }
.home-body header { margin-bottom: 1.5rem; }
.home-body h1 { font-size: 1.5rem; font-weight: 700; color: #f5f5f4; }
.home { text-align: center; padding: 4rem 1rem; max-width: 400px; margin: 0 auto; }
.home h2 { font-size: 1.5rem; margin-bottom: 1rem; color: #f5f5f4; }
.home p { color: #a8a29e; margin-bottom: 2rem; }
.btn-primary { display: inline-block; background: #b45309; color: #fff; border: none; padding: 0.625rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; font-weight: 600; }
.btn-primary:hover { background: #d97706; }

/* Game viewport — portrait, iPhone-optimized */
.game-body { display: flex; justify-content: center; align-items: flex-start; min-height: 100dvh; overflow: hidden;
             padding-top: env(safe-area-inset-top, 0); }
.viewport { width: 430px; height: 780px; background: #0c0a09; overflow: hidden; display: flex; flex-direction: column; transform-origin: top center; position: relative; }

/* HUD */
.hud { height: 28px; background: #111; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: 11px; flex-shrink: 0; }
.hud-title { font-weight: 700; color: #78716c; }
.hud-essence { color: #fbbf24; font-weight: 700; font-family: ui-monospace, monospace; }
.hud-round { color: #57534e; margin-left: auto; }

/* Hero bar */
.hero-bar { height: 24px; background: #0f0e0c; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; padding: 0 12px; gap: 6px; font-size: 10px; flex-shrink: 0; }
.hero-icon { width: 16px; height: 16px; background: #b45309; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; }
.hero-name { font-weight: 700; font-size: 11px; }
.hero-sep { color: #292524; }
.hero-effect { color: #57534e; }

/* Play area */
.play-area { flex: 1; overflow: hidden; min-height: 0; }

/* Zones (lineup, bench) */
.zone { border-top: 1px solid #1a1a1a; padding: 4px 10px; flex-shrink: 0; }
.lineup-zone { background: #11100e; min-height: 108px; }
.bench-zone { background: #0a0908; min-height: 108px; }
.zone.drag-over { background: #1a1810; }
.zone-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.zone-label { font-size: 9px; color: #57534e; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.zone-hint { font-size: 9px; color: #44403c; }

/* Card row */
.card-row { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-row::-webkit-scrollbar { display: none; }

/* Unit cards — same size everywhere (shop, lineup, bench) */
.unit-card { width: 76px; height: 82px; background: #161412; border: 1.5px solid #292524; border-radius: 6px; padding: 6px 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; position: relative; touch-action: none; transition: transform 0.1s, opacity 0.1s, box-shadow 0.1s; cursor: grab; -webkit-user-select: none; user-select: none; }
.unit-card:active { cursor: grabbing; }
.unit-card.dragging { opacity: 0.4; transform: scale(0.95); }
.unit-card.drag-over { box-shadow: 0 0 0 2px #fbbf24; }
.unit-card-empty { background: #0d0c0a; border-style: dashed; border-color: #1a1a1a; cursor: default; }
.uc-name { font-weight: 700; font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.uc-stats { font-size: 10px; font-family: ui-monospace, monospace; display: flex; gap: 2px; align-items: center; }
.uc-atk { color: #fbbf24; font-weight: 700; }
.uc-sep { color: #44403c; font-size: 8px; }
.uc-hp { color: #65a30d; font-weight: 700; }
.uc-tag { font-size: 7px; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.05em; }
.uc-cost { position: absolute; top: 3px; right: 5px; font-size: 9px; color: #fbbf24; font-weight: 700; font-family: ui-monospace, monospace; }

/* Shop cards — tappable buttons */
.shop-card { cursor: pointer; border: 1.5px solid; }
.shop-card:active { transform: scale(0.96); }
.shop-card-locked { opacity: 0.4; cursor: default; }

/* Family colors */
.ut-sloomph { border-color: #2dd4bf; background: #0f2322; }
.ut-sloomph .uc-name { color: #99f6e4; }
.ut-rustborn { border-color: #a78bfa; background: #16132a; }
.ut-rustborn .uc-name { color: #ddd6fe; }
.ut-ironbound { border-color: #f59e0b; background: #221a0a; }
.ut-ironbound .uc-name { color: #fde68a; }
.ut-wyldpack { border-color: #22c55e; background: #0a1f10; }
.ut-wyldpack .uc-name { color: #bbf7d0; }
.ut-default { border-color: #44403c; }

/* Shop phase */
.shop-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.shop-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.shop-hint { font-size: 10px; color: #44403c; }

/* Action bar */
.action-bar { min-height: 44px; background: #111; border-top: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; padding-bottom: env(safe-area-inset-bottom, 0); flex-shrink: 0; }
.btn-action { background: #292524; color: #d6d3d1; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-action:active { background: #44403c; }
.btn-fight { display: inline-block; background: #b45309; color: #fff; border: none; padding: 8px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: none; }
.btn-fight:active { background: #d97706; }

/* Battle result */
.battle-result { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
.br-title { font-size: 14px; font-weight: 700; color: #a8a29e; }
.br-synergies { display: flex; gap: 6px; font-size: 10px; flex-wrap: wrap; justify-content: center; }
.br-syn { color: #2dd4bf; }
.battle-log { width: 100%; max-height: 220px; overflow-y: auto; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 4px; padding: 6px 8px; font-family: ui-monospace, monospace; font-size: 10px; }
.log-entry { display: flex; gap: 4px; align-items: center; padding: 1px 4px; margin: 1px 0; font-size: 9px; }
.log-player { border-left: 2px solid #3b82f6; }
.log-enemy { border-left: 2px solid #ef4444; }
.le-actor { font-weight: 600; min-width: 55px; font-size: 9px; }
.le-arrow { color: #44403c; font-size: 8px; }
.le-target { min-width: 55px; font-size: 9px; }
.le-dmg { color: #fbbf24; font-weight: 600; font-size: 9px; }
.le-ko { color: #ef4444; font-weight: 700; font-size: 7px; text-transform: uppercase; }
.br-outcome { font-weight: 700; font-size: 16px; padding: 6px 16px; border-radius: 4px; margin-top: 4px; }
.outcome-victory { color: #65a30d; background: #0f1a08; }
.outcome-won { color: #65a30d; background: #0f1a08; }
.outcome-lost { color: #ef4444; background: #1a0808; }