/* Hermes Tama r1-6 — R1-first: pet is ~70% of screen, compact dock */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #05080f;
  color: #eef4ff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    max(2px, env(safe-area-inset-top, 0px))
    max(4px, env(safe-area-inset-right, 0px))
    max(4px, env(safe-area-inset-bottom, 0px))
    max(4px, env(safe-area-inset-left, 0px));
  gap: 4px;
  background: #05080f;
  overflow: hidden;
}

/* ===== HUGE pet stage ===== */
#petStage.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Take almost everything — dock is ~52px */
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(254, 80, 0, 0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  background: #0b1220;
}

#c {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#topHud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 6px 0;
  pointer-events: none;
}
#nameChip {
  pointer-events: none;
  background: rgba(8,12,22,0.78);
  border: 1px solid rgba(254,80,0,0.5);
  border-radius: 10px;
  padding: 4px 8px;
  max-width: 58%;
}
#nameChip #meta {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nameChip #stageTag {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
  color: #fe5000;
  letter-spacing: 0.06em;
}
#topBtns {
  pointer-events: auto;
  display: flex;
  gap: 4px;
}
#topBtns button {
  appearance: none;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(8,12,22,0.75);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  touch-action: manipulation;
}

/* thin bars over bottom of stage */
.meters-overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 28px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.meters-overlay .bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.meters-overlay .bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6b6b, #fe5000);
  transition: width 0.2s ease;
}
.meters-overlay .bar.mood i { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.meters-overlay .bar.disc i { background: linear-gradient(90deg, #38bdf8, #7ec8e8); }

#coach {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  z-index: 5;
  margin: 0;
  font-size: 10px;
  font-weight: 750;
  color: #f1f5f9;
  text-align: center;
  background: rgba(8,12,22,0.72);
  border-radius: 8px;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

#speech {
  position: absolute;
  left: 50%;
  top: 36px;
  transform: translateX(-50%);
  max-width: 86%;
  z-index: 6;
  background: rgba(8,12,22,0.9);
  color: #fff;
  font-weight: 750;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
  pointer-events: none;
}
#alertDot {
  position: absolute;
  top: 36px;
  right: 10px;
  z-index: 6;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fe5000;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 0.7s infinite;
  box-shadow: 0 0 10px rgba(254,80,0,0.55);
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.hidden { display: none !important; }

/* ===== Bottom dock only ===== */
#dock {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px 40px;
  gap: 5px;
  align-items: stretch;
  min-height: 52px;
}
.cycle, .menu {
  appearance: none;
  border: 1px solid rgba(126,200,232,0.25);
  background: rgba(255,255,255,0.07);
  color: #eef4ff;
  border-radius: 12px;
  min-height: 52px;
  font-size: 18px;
  font-weight: 800;
  touch-action: manipulation;
}
.cycle:active, .menu:active { transform: scale(0.96); background: rgba(255,255,255,0.12); }
.care {
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: 52px;
  background: linear-gradient(135deg, #ff8a3d, #fe5000 55%, #e04500);
  color: #1a0800;
  box-shadow: 0 6px 16px rgba(254,80,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  touch-action: manipulation;
}
.care:active { transform: scale(0.97); }
.care-emoji { font-size: 22px; line-height: 1; }
#careLabel {
  font-size: 16px;
  letter-spacing: 0.08em;
}
.menu { font-size: 16px; }

/* icon tray — only when ☰ open */
#actions.tray {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding-bottom: 2px;
}
#actions.tray.hidden { display: none !important; }
.act {
  appearance: none;
  border: 1px solid rgba(126,200,232,0.2);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  min-height: 40px;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.act.sel {
  border-color: #fe5000;
  background: rgba(254,80,0,0.25);
  box-shadow: 0 0 0 2px rgba(254,80,0,0.4);
}
.act.need { border-color: rgba(254,80,0,0.6); }
.act .g { font-size: 18px; line-height: 1; }

#r1Chip {
  position: fixed;
  left: 4px;
  bottom: max(2px, env(safe-area-inset-bottom, 0px));
  z-index: 20;
  font: 700 8px ui-monospace, Menlo, monospace;
  color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: 5px;
  pointer-events: none;
  max-width: 45vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* overlays */
.screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(4,8,14,0.88);
}
.screen.hidden { display: none; }
.card {
  width: min(320px, 100%);
  max-height: calc(100% - 8px);
  overflow: auto;
  background: linear-gradient(180deg, #152238, #0e1726);
  border: 1px solid rgba(126,200,232,0.22);
  border-radius: 16px;
  padding: 14px 12px 10px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.card.left { text-align: left; }
.egg-art { font-size: 36px; margin-bottom: 4px; }
.card h1 { font-size: 20px; color: #7ec8e8; margin-bottom: 2px; }
.card h2 { color: #7ec8e8; margin-bottom: 6px; font-size: 16px; }
.sub { color: #fe5000; font-weight: 800; font-size: 11px; margin-bottom: 6px; }
.desc { color: #8aa4b8; font-size: 11px; line-height: 1.4; margin-bottom: 10px; }
.big {
  appearance: none; border: 0; width: 100%;
  border-radius: 12px; padding: 12px;
  min-height: 46px;
  font-weight: 850; font-size: 15px;
  background: linear-gradient(135deg, #ff7a33, #fe5000);
  color: #1a0800;
  margin-top: 6px;
  touch-action: manipulation;
}
.big.alt {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #eff6ff;
}
.link {
  appearance: none; border: 0; background: transparent;
  color: #7f93a8; font-weight: 700; font-size: 12px;
  margin-top: 6px; padding: 8px; width: 100%;
  min-height: 36px;
}
#statsBody {
  color: #cfe0ef;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin: 6px 0 10px;
  max-height: 40dvh;
  overflow: auto;
}
#awayBody { color: #cfe0ef; font-size: 12px; margin: 6px 0 10px; white-space: pre-line; }

#reactArena {
  position: relative;
  width: min(150px, 60vw);
  height: min(150px, 60vw);
  margin: 8px auto;
}
#reactTarget {
  position: absolute;
  inset: 28%;
  border: 3px solid rgba(126,200,232,0.55);
  border-radius: 50%;
}
#reactRing {
  position: absolute;
  inset: 0;
  border: 4px solid #fe5000;
  border-radius: 50%;
  pointer-events: none;
}
#reactHit {
  position: absolute;
  inset: 32%;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff8a4a, #fe5000);
  color: #1a0800;
  font-weight: 900;
  font-size: 14px;
}

/* short R1 height — still keep pet dominant */
@media (max-height: 340px) {
  #dock { min-height: 48px; grid-template-columns: 40px 1fr 40px 36px; }
  .cycle, .menu, .care { min-height: 48px; }
  #careLabel { font-size: 14px; }
  .care-emoji { font-size: 18px; }
  #topBtns button { width: 26px; height: 26px; font-size: 12px; }
  .meters-overlay { bottom: 24px; }
  #coach { font-size: 9px; }
}

/* taller phones — pet still majority */
@media (min-height: 500px) {
  #dock { min-height: 56px; }
  .cycle, .menu, .care { min-height: 56px; }
  .care-emoji { font-size: 24px; }
  #careLabel { font-size: 18px; }
}