/* ---------- pastel theme palettes ---------- */
/* --bg: lightest tint, --mid: accent/border, --dark: strong accent/text */
:root,
[data-theme="blue"]      { --bg: #E8F4FA; --mid: #A9D6E5; --dark: #468FAF; }
[data-theme="purple"]    { --bg: #F0E8F7; --mid: #C9B6D9; --dark: #8064A2; }
[data-theme="pink"]      { --bg: #FCE8F0; --mid: #F3B6C8; --dark: #C85C7C; }
[data-theme="green"]     { --bg: #E8F5E9; --mid: #A8D5BA; --dark: #4F8F63; }
[data-theme="yellow"]    { --bg: #FFF9DB; --mid: #F5E6A8; --dark: #C9A227; }
[data-theme="orange"]    { --bg: #FFF0E1; --mid: #F6C28B; --dark: #D98236; }
[data-theme="gray"]      { --bg: #F2F4F5; --mid: #C9CED3; --dark: #68737D; }
[data-theme="cyan"]      { --bg: #E4F7F8; --mid: #A6DADC; --dark: #4F9FA3; }
[data-theme="lavender"]  { --bg: #F2EEFA; --mid: #C8B9E3; --dark: #8066A6; }

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  justify-content: center;
  background: #111;
  font-family: 'Orbitron', sans-serif;
  color: #1c1c1c;
}

/* screen is mounted portrait: rotated 800x480 -> treat as 480 wide x 800 tall.
   no bezel drawn here -- runs inside the physical screen's own bezel. */
.kiosk {
  width: 480px;
  height: 800px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* faint glare so the screen reads as glass, not a flat rectangle */
.kiosk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
  z-index: 5;
}

.screen {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow: hidden;
}
.screen.active { display: flex; }

/* soft spotlight glow roughly where the mascot sits, for a bit of stage
   presence instead of it just floating on a flat background */
#screen-start {
  background: radial-gradient(circle at 50% 42%, var(--mid) 0%, transparent 55%), var(--bg);
}

/* ---------- shared type ---------- */
h1 { margin: 0; font-size: 32px; letter-spacing: 1px; }
.brand { text-align: center; margin-bottom: 12px; }
.brand h1 {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--dark);
}
.tagline { margin: 8px 0 0; font-size: 23px; font-weight: 700; color: var(--dark); }

/* pulsing "someone's actually in there" indicator -- meant to catch a
   passing glance the way a lit sign or a blinking light does */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #10151a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
}
.live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #ff4d4d;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(0.7); }
}

/* ---------- vending machine character (assets/vending_machine.svg) ---------- */
.cabinet-dock { display: contents; }
#screen-start .cabinet-dock { flex: 1; display: flex; }

.cabinet {
  position: relative;
  margin: 8px auto 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#vending-machine {
  width: 240px;
  height: auto;
  animation: idleBob 3.4s ease-in-out infinite;
}

/* game screen: the mascot is docked small and permanent, inline in the
   status card -- its expression is the only place mood shows up now,
   chat carries all the actual text */
#screen-game .cabinet {
  flex: none;
  margin: 0;
  width: 56px;
}
#screen-game #vending-machine { width: 56px; }
#screen-game #them-bubble,
#screen-game #intro-bubble {
  display: none;
}
.cabinet.pulse #body { animation: bodyFlash .5s ease; }
@keyframes bodyFlash {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

/* idle mischief on the attract loop (see idleAntic in app.js) -- .screen's
   overflow: hidden does the actual "peeking around the corner" work here,
   clipping the mascot as it slides toward/past the edge */
.cabinet.peek-right { animation: peekRight 3.2s ease-in-out; }
@keyframes peekRight {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  40%, 55% { transform: translateX(150px) rotate(4deg); }
}
.cabinet.peek-left { animation: peekLeft 3.2s ease-in-out; }
@keyframes peekLeft {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  40%, 55% { transform: translateX(-150px) rotate(-4deg); }
}
.cabinet.wander-off { animation: wanderOff 4.5s ease-in-out; }
@keyframes wanderOff {
  0%       { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  35%      { transform: translate(200px, 30px) rotate(8deg); opacity: 1; }
  50%      { transform: translate(200px, 30px) rotate(8deg); opacity: 0; }
  51%      { transform: translate(-200px, 30px) rotate(-8deg); opacity: 0; }
  65%      { opacity: 1; }
  100%     { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
.brand h1.title-wiggle { animation: titleWiggle .6s ease-in-out 2; }
@keyframes titleWiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-4px) rotate(-2deg); }
  40%      { transform: translateX(4px) rotate(2deg); }
  60%      { transform: translateX(-3px) rotate(-1deg); }
  80%      { transform: translateX(3px) rotate(1deg); }
}

.inventory-section {
  margin-bottom: 6px;
}
.inventory-label {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.7;
  margin-bottom: 4px;
}

.btn-text {
  border: none;
  background: transparent;
  color: var(--dark);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.7;
  margin-top: 8px;
  padding: 0;
}
.btn-text:hover { opacity: 1; }
@keyframes idleBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(0.6deg); }
}
#arm-right {
  transform-origin: 245px 200px;
  animation: wave 1.8s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-22deg); }
  75%      { transform: rotate(8deg); }
}
#price-display {
  transition: fill .3s ease;
  transform-box: fill-box;
  transform-origin: center;
}
#price-display.price-pop { animation: pricePop .5s ease; }
@keyframes pricePop {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.5); }
}

.speech-bubble {
  position: relative;
  width: 290px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mid);
  border-radius: 16px;
  padding: 14px 16px;
  opacity: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transform: scale(1);
  transition: opacity .25s ease, transform .25s ease;
}
.speech-bubble.fade { opacity: 0; transform: scale(0.94); }
.speech-bubble p { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 600; }

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 8px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 11px 9px 0;
  border-style: solid;
  border-color: var(--mid) transparent transparent;
}

/* "them" bubble: slides in from off-screen, then fully retreats before
   VENDI's bubble reuses the same spot -- the two are never shown together.
   Declared after .speech-bubble's tail rules so these overrides win. */
.them-bubble {
  position: absolute;
  top: 74px;
  left: -26px;
  width: 220px;
  min-height: 0;
  background: var(--mid);
  border-color: var(--dark);
  transform: translateX(-420px);
  transition: transform .5s ease, opacity .25s ease;
  z-index: 1;
}
.them-bubble.show { transform: translateX(0); }
.them-bubble p { font-size: 18px; font-weight: 700; }
.them-bubble::after { bottom: auto; right: auto; top: 50%; left: -10px; transform: translateY(-50%);
  border-width: 8px 10px 8px 0; border-color: transparent var(--mid) transparent transparent; }
.them-bubble::before { bottom: auto; right: auto; top: 50%; left: -13px; transform: translateY(-50%);
  border-width: 9px 11px 9px 0; border-color: transparent var(--dark) transparent transparent; }

.btn-primary, .btn-secondary {
  border: none;
  border-radius: 14px;
  padding: 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary {
  margin-top: 8px;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
/* idle breathing pulse so the CTA reads as "come tap me" from a distance,
   not just on hover -- a kiosk in a gym won't get a mouseover */
#screen-start .btn-primary { animation: ctaPulse 2s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
  50%      { transform: scale(1.035); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); }
}
#screen-game .btn-primary {
  margin-top: auto;
  padding: 16px 20px;
  font-size: 16px;
}
.btn-secondary {
  margin-top: 10px;
  background: transparent;
  border: 2px solid var(--mid);
  color: var(--dark);
  font-size: 15px;
  font-weight: 400;
  box-shadow: none;
}
.btn-secondary:hover { background: rgba(0, 0, 0, 0.04); }
.btn-secondary:active { transform: translateY(1px); }

/* ---------- game screen ---------- */
/* everything about VENDI's live status -- mascot, name, mood, resources --
   grouped into one card instead of three stacked rows, so it reads as a
   single unit and the chat below gets the vertical space it needs */
.status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--mid);
  border-radius: 14px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.status-main {
  flex: 1;
  min-width: 0;
}
.game-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.game-header h1 { font-size: 20px; margin: 0; }
.mood-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--dark);
  opacity: 0.65;
  font-weight: 400;
}

.score-pill {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  background: #fff;
  border: 2px solid var(--dark);
  border-radius: 16px;
  padding: 4px 12px;
}
.score-pill.pop { animation: scorePop .4s ease; }
@keyframes scorePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.wallet-bar {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
}
.wallet-bar .sep { opacity: 0.4; font-weight: 400; }
.wallet-bar .spacer { flex: 1; }
.wallet-bar .vendi-stat {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.55;
}

.scoreboard {
  background: linear-gradient(160deg, #1a1f26, #0c0e11 70%);
  color: #fff;
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.scoreboard h2 { margin: 0 0 12px; font-size: 20px; text-align: center; }
.scoreboard dl { margin: 0; }
.scoreboard dl div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
}
.scoreboard dl dt { font-weight: 400; opacity: 0.8; }
.scoreboard dl dd { margin: 0; font-weight: 700; }
.final-score {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.final-score span { color: var(--mid); font-size: 26px; text-shadow: 0 0 12px var(--mid); }
.vs-vendi {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
  opacity: 0.7;
}

/* horizontal "vending slots" strip -- scrolls sideways so all 7 items fit
   without eating the vertical space chat needs */
.buy-options {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.buy-option {
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--mid);
  border-radius: 12px;
  padding: 9px 4px 8px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.buy-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  background: var(--bg);
}
.buy-option .name { font-size: 11px; font-weight: 700; margin-top: 1px; }
.buy-option .price { font-size: 13px; color: var(--dark); font-weight: 700; }
.buy-option .stock { font-size: 9px; color: #888; }
.buy-option.unavailable { opacity: .55; filter: grayscale(0.7); }
.buy-option.unavailable .stock { color: #c0392b; font-weight: 700; }

/* scarcity is a real gameplay signal now (see Economy's lower starting
   stock) -- a plain, unmissable color does the job without needing motion */
.buy-option.low-stock .stock {
  color: #c0392b;
  font-weight: 700;
}

/* the one item worth gambling on -- a dashed border sets it apart as a
   different kind of card, not just a louder version of the same one */
.buy-option.mystery {
  border: 2px dashed var(--dark);
}

.chat-panel {
  display: flex;
  flex-direction: column;
  flex: 2;
  min-height: 200px;
  background: #f6f8fa;
  border: 1px solid var(--mid);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.chat-panel-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mute-toggle {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 3px 8px;
  cursor: pointer;
}
.mute-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--mid) transparent;
}
.chat-log::-webkit-scrollbar { width: 5px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--mid); border-radius: 3px; }

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 88%;
  animation: bubbleIn .22s ease;
}
.chat-row.student { align-self: flex-end; flex-direction: row-reverse; }
.chat-row.vendi { align-self: flex-start; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--dark);
}
.chat-bubble {
  min-width: 0;
  padding: 9px 13px;
  border-radius: 15px;
  font-size: 15px;
  line-height: 1.42;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-wrap: break-word;
}
.chat-row.student .chat-bubble {
  background: var(--dark);
  color: #fff;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.chat-row.vendi .chat-bubble {
  background: #fff;
  border: 1px solid var(--mid);
  color: #1c1c1c;
  border-bottom-left-radius: 4px;
}

/* "VENDI is typing" -- replaces the old static "..." placeholder */
.chat-bubble.typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mid);
  animation: typingBounce 1s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.offer-bubble {
  border: 2px solid var(--dark);
  border-radius: 14px;
  padding: 11px 13px;
}
.offer-heading {
  margin: 0 0 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  color: var(--dark);
  opacity: 0.85;
}
.offer-terms {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}
.offer-terms li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.offer-each { font-weight: 400; opacity: 0.6; font-size: 12px; }
.offer-total {
  margin: 0 0 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--mid);
  font-size: 13px;
  opacity: 0.8;
}
.offer-actions {
  display: flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.offer-accept, .offer-decline {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease;
}
.offer-accept {
  background: var(--dark);
  color: #fff;
}
.offer-accept:hover { transform: translateY(-1px); }
.offer-accept:active { transform: translateY(0); }
.offer-decline {
  background: transparent;
  border: 1.5px solid var(--mid);
  color: var(--dark);
}
.offer-decline:hover { background: rgba(0, 0, 0, 0.04); }

.chat-input-row {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--mid);
  background: #fff;
}
.chat-input-row input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--mid);
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease;
}
.chat-input-row input:focus { border-color: var(--dark); }
.chat-input-row button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--dark);
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input-row button:active { transform: scale(0.94); }

/* custom on-screen keyboard -- hidden by default, shown (and other game-
   screen chrome hidden) via #screen-game.keyboard-open, see app.js */
.keyboard {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: #1c1f26;
  border-radius: 12px;
  padding: 8px 6px;
  margin-top: 8px;
}
#screen-game.keyboard-open .keyboard { display: flex; }
#screen-game.keyboard-open .inventory-section,
#screen-game.keyboard-open .btn-primary,
#screen-game.keyboard-open .btn-text {
  display: none;
}
.keyboard-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.keyboard-row {
  display: flex;
  gap: 4px;
}
.key {
  flex: 1;
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a3f4b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.key:active { background: #545a68; }
.key.wide { flex: 1.6; font-size: 12px; }
.key.space { flex: 5; }
.key.accent { background: var(--dark); }
.key.shift-on { background: var(--dark); }