/* Mobile responsiveness for Pomme */
/* All rules inside max-width: 767px — desktop completely untouched */

@media (max-width: 767px) {

  /* === Touch & iOS fixes === */
  body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }

  /* Prevent iOS auto-zoom on inputs (requires >= 16px font-size) */
  #form input, #chat-message, #login-name, #login-password,
  #newgame-name { font-size: 16px !important; }

  /* === Login form === */
  #login {
    width: 90% !important;
    left: 5% !important;
    margin-left: 0 !important;
    padding: 20px !important;
    font-size: 24px !important;
    box-sizing: border-box;
  }
  #login input {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #login button {
    font-size: 20px !important;
    width: 100% !important;
    padding: 12px !important;
  }

  /* === Game header compaction === */
  #buttons {
    width: 100% !important;
    padding: 5px 10px !important;
    box-sizing: border-box;
  }
  #buttons h1 { font-size: 14px !important; }
  #buttons #fblike, #buttons #beta {
    display: none !important;
  }
  #howto { display: none !important; }

  /* === Room buttons === */
  #room-buttons {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 5px !important;
    min-width: 0 !important;
  }
  #room-buttons .icon {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
    width: 12px !important;
    height: 12px !important;
    margin-right: 6px !important;
  }
  #room-buttons #room-avatar-wrapper { display: none !important; }
  #room-buttons #show-bg, #room-buttons #hide-bg { display: none !important; }

  /* === Champion announcement === */
  #champion {
    width: 90% !important;
    margin-left: -45% !important;
  }

  /* === Hand & votes: flat row, all cards visible === */
  #hand, #votes {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden !important;
    box-sizing: border-box;
    padding: 0 5px !important;
  }
  #hand div, #votes div {
    display: inline-block !important;
    float: none !important;
    vertical-align: bottom !important;
    top: auto !important;
  }

  /* === Match area === */
  #match {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
  }
  #match img { max-width: 90vw !important; max-height: 35vh !important; }
  #match div { padding: 5px !important; }

  /* === Countdown === */
  #countdown {
    top: 0 !important;
    right: 5px !important;
    left: auto !important;
    margin-left: 0 !important;
    font-size: 16px !important;
    width: auto !important;
    text-align: right !important;
    z-index: 100;
  }

  /* === Orders text === */
  #orders {
    width: 90% !important;
    left: 5% !important;
    margin-left: 0 !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  /* === Banner text: large gradient text like desktop === */
  #banner {
    font-size: 48px !important;
    opacity: 0.3 !important;
    text-align: center !important;
    width: 100% !important;
    pointer-events: none;
    overflow: visible !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* === "your hand:" label === */
  #whose { font-size: 16px !important; }

  /* === Inline player strip === */
  #mobile-players {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 89;
    background: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 6px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  #mobile-players span {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 5px;
    border-radius: 3px;
  }
  #mobile-players .mp-room { font-weight: bold; color: #555; margin-right: 6px; border-right: 1px solid #ccc; padding-right: 10px; }
  #mobile-players .mp-empty { color: #999; font-style: italic; }
  #mobile-players .mp-copy { background: #333; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
  #mobile-players .mp-judge { font-weight: bold; background: rgba(255, 180, 80, 0.4); }
  #mobile-players .mp-picked { color: #27ae60; }
  #mobile-players .mp-winner { font-weight: bold; color: #8e44ad; }
  #mobile-players .mp-skipped { color: #999; text-decoration: line-through; }
  #mobile-players .mp-you { background: rgba(52, 152, 219, 0.2); }

  /* === Mobile toggle buttons === */
  #mobile-toggles {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #333;
  }
  #mobile-chat-toggle {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  #mobile-chat-toggle.unread::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
  }

  /* === Status sidebar: slide-in drawer from right === */
  #status {
    position: fixed !important;
    top: 0 !important;
    right: -300px !important;
    width: 280px !important;
    height: 100% !important;
    z-index: 200 !important;
    transition: right 0.3s ease;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  }
  #status.mobile-open { right: 0 !important; }

  /* === Chat: slide-up overlay from bottom === */
  #chat_container, #chat_bg {
    position: fixed !important;
    bottom: -100% !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    z-index: 150 !important;
    transition: bottom 0.3s ease;
  }
  #chat_container.mobile-open, #chat_bg.mobile-open { bottom: 40px !important; }
  #form {
    position: fixed !important;
    bottom: -100% !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 151 !important;
    transition: bottom 0.3s ease;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    padding: 5px !important;
  }
  #form.mobile-open { bottom: 40px !important; }
  #chat-message {
    flex: 1 !important;
    min-width: 0;
  }
  #chat-send {
    display: inline-block !important;
    padding: 8px 14px;
    margin-left: 5px;
    font-size: 14px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #chat { width: 100% !important; }

  /* === Emoticons: inline trigger + on-screen panel === */
  #open-emoticons {
    position: static !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 5px;
    margin-right: 2px;
    vertical-align: middle;
    flex-shrink: 0;
    order: 2;
  }
  #chat-send { order: 3; }
  #emoticons {
    position: fixed !important;
    bottom: 80px !important;
    right: 5px !important;
    left: auto !important;
    width: 110px !important;
    padding: 2px 0px 2px 5px !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    box-sizing: content-box !important;
  }

  /* === Modal overrides === */
  #profile_view, #profile_edit, #discard-container, #room-edit,
  #webcam-container > div, #attract-container, #newgame, #credits_box {
    width: 92% !important;
    left: 4% !important;
    margin-left: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }

  /* === Discard cards === */
  #discard-cards {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center;
  }

  /* === Card Preview: disabled, direct tap-to-select === */
  #card-preview { display: none !important; }

  /* === Enhanced Win Display === */
  #win-backdrop {
    display: none !important;
  }
  #win {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 96vw !important;
    padding: 15px !important;
    z-index: 30 !important;
    text-align: center;
    white-space: nowrap;
  }
  #win-name {
    display: block;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    white-space: normal;
  }
  #win img {
    display: inline-block;
    max-height: 40vh !important;
    max-width: 44vw !important;
    vertical-align: top;
  }

  /* === Lobby page === */
  #games {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  #welcome {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    text-align: center;
  }
  #options {
    position: relative !important;
    left: auto !important;
    margin: 10px auto !important;
    text-align: center;
  }
  #lobby #chat_container, #lobby #chat_bg, #lobby #form, #combo-wrapper {
    display: none !important;
  }
  #lobby {
    overflow-y: auto !important;
    padding: 10px !important;
  }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 768px) {
  #mobile-toggles { display: none; }
  #mobile-players { display: none; }
  #chat-send { display: none; }
  #card-preview { display: none !important; }
  #win-backdrop { display: none !important; }
  #win-name { display: none !important; }
  #win { transform: none !important; }
}