/**
 * ====================================================================
 * BREW MASTER — MOBILE RESPONSIVE STYLESHEET
 * ====================================================================
 * Dedicated mobile layout overrides strictly scoped to <= 767px.
 * Desktop / PC (>= 768px) is 100% untouched and preserved in base CSS.
 * ====================================================================
 */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ====================================================================
   1. MOBILE PORTRAIT (<= 767px)
   ==================================================================== */
@media screen and (max-width: 767px) {
  /* ------------------------------------------------------------
     TOP STATUS BAR (COMPACT MOBILE HUD)
     ------------------------------------------------------------ */
  .status-bar {
    min-height: 46px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .status-bar .hamburger {
    font-size: 20px !important;
    padding: 2px 4px !important;
  }
  .status-bar .status-logo img {
    height: 22px !important;
  }
  .status-bar .day-box {
    padding: 2px 8px !important;
    gap: 4px !important;
  }
  .status-bar .day-box .d {
    font-size: 11px !important;
  }
  .status-bar .day-box .t {
    font-size: 10.5px !important;
    padding: 1px 6px !important;
  }
  .status-bar .playtest-badge {
    display: none !important;
  }
  .status-bar .chip {
    font-size: 11px !important;
    padding: 2px 7px !important;
    gap: 3px !important;
  }
  .status-bar .chip.chip-level {
    padding: 2px 7px !important;
    gap: 3px !important;
  }
  .status-bar .chip.chip-level .lvl-lbl,
  .status-bar .chip.chip-level .lvl-xp-text,
  .status-bar .chip.chip-level .lvl-progress-wrap {
    display: none !important;
  }
  .status-right .btn-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  /* ------------------------------------------------------------
     ORDER SCREEN MOBILE (CUSTOMER AT COUNTER & MOBILE BG)
     ------------------------------------------------------------ */
  #orderScreen {
    display: none;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  #orderScreen.active {
    display: flex !important;
  }

  /* Dedicated Mobile Background */
  .order-scene {
    position: absolute !important;
    inset: 0 !important;
    background: #2d1f17 url('../backgrounds/cafe/background_order_mobile.png') center bottom / cover no-repeat !important;
    background: #2d1f17 url('../assets/backgrounds/cafe/background_order_mobile.png') center bottom / cover no-repeat !important;
    z-index: 1 !important;
  }

  /* Customer positioned directly at counter black line, full body visible without clipping */
  .order-customer {
    position: absolute !important;
    left: 4% !important;
    bottom: 22% !important;
    transform: none !important;
    width: clamp(140px, 36vw, 190px) !important;
    height: clamp(160px, 32vh, 230px) !important;
    overflow: visible !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .order-customer .customer-avatar {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    pointer-events: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Speech bubble & actions container: positioned beside customer above counter */
  .order-bubble-wrap {
    position: absolute !important;
    top: auto !important;
    bottom: 25% !important;
    left: 36% !important;
    transform: none !important;
    width: calc(62% - 10px) !important;
    max-width: 380px !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  .order-speech-bubble {
    width: 100% !important;
    background: #fffcf5 !important;
    border: 2.5px solid #452b1b !important;
    border-radius: 20px !important;
    padding: 12px 14px 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(45, 26, 16, 0.28) !important;
    position: relative !important;
  }

  /* Downward tail pointing straight to customer */
  .order-speech-bubble::before {
    content: '' !important;
    position: absolute !important;
    bottom: -13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    border: 8px solid transparent !important;
    border-top-color: #452b1b !important;
    display: block !important;
    z-index: 1 !important;
  }

  .order-speech-bubble::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    border: 7px solid transparent !important;
    border-top-color: #fffcf5 !important;
    display: block !important;
    z-index: 2 !important;
  }

  .dialogue-text-wrap {
    min-height: 38px !important;
  }

  .dialogue-line {
    font-size: clamp(13.5px, 3.8vw, 15.5px) !important;
    line-height: 1.35 !important;
  }

  .dialogue-footer {
    padding-right: 0 !important;
    margin-top: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .order-drink-pill {
    font-size: 12.5px !important;
    padding: 3px 10px !important;
  }

  .dialogue-skip-hint {
    font-size: 10.5px !important;
  }

  .dialogue-choices-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .dialogue-choice-btn {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  #confirmOrderBtn {
    position: static !important;
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #ffd75e, #f59e0b) !important;
    color: #26150a !important;
    border: 2px solid #452b1b !important;
    box-shadow: 0 4px 16px rgba(245, 197, 66, 0.45) !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  /* Delivered cup placed on counter */
  .order-delivery-area {
    position: absolute !important;
    bottom: 23% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
  }

  /* ------------------------------------------------------------
     BREWING SCREEN MOBILE (VERTICAL HIERARCHY)
     Top: Order Card -> Center: Cup -> Bottom: Shelf -> Controls
     ------------------------------------------------------------ */
  #brewingScreen {
    display: none;
    flex-direction: column !important;
    position: relative !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 6px 8px calc(66px + env(safe-area-inset-bottom, 8px)) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  #brewingScreen.active {
    display: flex !important;
  }

  .brewing-scene {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 0.75 !important;
    background-size: cover !important;
  }

  /* 1. TOP: Customer Order & Recipe Ticket Banner */
  .brew-order-card {
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    background: rgba(30, 20, 14, 0.94) !important;
    border: 1.5px solid rgba(245, 197, 66, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .boc-top-actions {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .btn-back-to-order {
    min-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .boc-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .boc-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .boc-label {
    font-size: 9px !important;
    color: #f5c542 !important;
  }

  .boc-order-info {
    font-size: 11.5px !important;
    color: #fff !important;
  }

  .boc-drink {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 0 0 6px !important;
    border-left: 1.5px solid rgba(245, 197, 66, 0.3) !important;
    border-top: none !important;
  }

  .boc-drink-img {
    width: 24px !important;
    height: 24px !important;
  }

  .boc-drink-name {
    font-size: 12.5px !important;
    color: #ffd75e !important;
  }

  .boc-progress {
    margin: 2px 0 4px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .progress-track {
    height: 6px !important;
  }

  .boc-recipe-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  .boc-recipe-list .recipe-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #eee !important;
  }

  .brewing-equipment {
    display: none !important;
  }

  /* 2. CENTER: Cup Stage & Drop Zone */
  .brew-cup-stage {
    position: relative !important;
    order: 2 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 110px !important;
    max-height: 190px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .drop-zone {
    width: clamp(90px, 24vw, 110px) !important;
    height: clamp(90px, 24vw, 110px) !important;
    flex-shrink: 0 !important;
  }

  .cup-base-img {
    max-width: 85% !important;
    max-height: 85% !important;
  }

  .brew-cup-caption {
    font-size: 10.5px !important;
    bottom: -16px !important;
  }

  .brew-contents {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: 92vw !important;
    max-height: 56px !important;
    overflow-y: auto !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 12px !important;
    padding: 4px 6px !important;
    margin-top: 6px !important;
  }

  .brew-ingredient {
    padding: 2px 6px !important;
    font-size: 10px !important;
    gap: 3px !important;
  }

  .brew-ingredient .ing-img {
    width: 15px !important;
    height: 15px !important;
  }

  /* 3. BOTTOM: Ingredient Shelf Panel (4 Columns Grid) */
  .brewing-ingredients-panel {
    position: relative !important;
    order: 3 !important;
    width: 100% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    background: rgba(28, 16, 10, 0.95) !important;
    border: 1.5px solid rgba(245, 197, 66, 0.35) !important;
    flex: 1 !important;
    min-height: 120px !important;
    max-height: 28vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .ing-panel-shelf-top {
    margin-bottom: 0 !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .shelf-awning-img {
    display: none !important;
  }

  .ing-panel-title {
    font-size: 11.5px !important;
    font-weight: 800 !important;
  }

  .ing-panel-sub {
    font-size: 9.5px !important;
  }

  .brewing-ingredients {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    max-height: none !important;
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 5px !important;
  }

  .brewing-ingredient-card {
    min-height: 48px !important;
    padding: 4px 2px !important;
    border-radius: 9px !important;
    gap: 2px !important;
  }

  .brewing-ingredient-card .ing-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .brewing-ingredient-card .ing-icon .ing-img {
    width: 22px !important;
    height: 22px !important;
  }

  .brewing-ingredient-card .ing-name {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    max-width: 95% !important;
  }

  .brewing-ingredient-card .ing-qty {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  /* 4. CONTROLS: Sticky Bar at Viewport Bottom */
  .brewing-controls {
    order: 4 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    z-index: 45 !important;
    background: linear-gradient(180deg, rgba(35, 24, 18, 0.95), rgba(18, 11, 8, 0.98)) !important;
    backdrop-filter: blur(8px) !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 8px)) !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1.5px solid rgba(245, 197, 66, 0.3) !important;
    box-sizing: border-box !important;
  }

  .brewing-controls .btn-clear-brew {
    flex: 1 !important;
    min-height: 46px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }

  .brewing-controls .btn-confirm {
    flex: 2 !important;
    min-height: 46px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }

  /* Result screen mobile */
  .result-customer .result-avatar {
    width: 110px !important;
    height: 110px !important;
  }
  .result-message {
    font-size: 20px !important;
  }
  .result-details {
    gap: 12px !important;
    font-size: 12px !important;
  }
  #nextCustomerBtn {
    min-height: 48px !important;
    width: 100% !important;
    max-width: 280px !important;
    font-size: 16px !important;
  }
}

/* ====================================================================
   2. SMALL MOBILE (<= 479px)
   ==================================================================== */
@media screen and (max-width: 479px) {
  .status-bar .chip[title="Gems"],
  .status-bar .chip#comboChip {
    display: none !important;
  }
  .order-customer {
    width: 120px !important;
    height: 150px !important;
    bottom: 20% !important;
    left: 4% !important;
    transform: none !important;
    overflow: visible !important;
  }
  .order-customer .customer-avatar {
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .order-bubble-wrap {
    width: calc(64% - 8px) !important;
    left: 35% !important;
    bottom: 23% !important;
    top: auto !important;
    transform: none !important;
  }
  .order-speech-bubble {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .dialogue-choice-btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
  .brewing-ingredients {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .drop-zone {
    width: 88px !important;
    height: 88px !important;
  }
}

/* ====================================================================
   3. MOBILE LANDSCAPE (<= 520px height)
   ==================================================================== */
@media screen and (max-height: 520px) and (orientation: landscape) {
  .status-bar {
    min-height: 38px !important;
    padding: 2px 8px !important;
  }
  #orderScreen .order-customer {
    left: 16% !important;
    bottom: 16% !important;
    transform: none !important;
    width: 160px !important;
    height: 240px !important;
  }
  #orderScreen .order-bubble-wrap {
    left: 48% !important;
    top: 6px !important;
    transform: none !important;
    width: min(48vw, 420px) !important;
  }
  #brewingScreen {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding-bottom: 8px !important;
    overflow-y: auto !important;
  }
  #brewingScreen .brew-order-card {
    width: 28% !important;
  }
  #brewingScreen .brew-cup-stage {
    width: 34% !important;
  }
  #brewingScreen .brewing-ingredients-panel {
    width: 36% !important;
  }
  #brewingScreen .brewing-controls {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
  }
}