/* Grab Bag Mode */

.grab-bag-round {
  display: none;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  flex-direction: column;
  z-index: 2000 !important;
  overflow: hidden !important;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.grab-bag-round.visible {
  display: flex;
}

.grab-bag-round .status-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grab-bag-end-btn {
  margin-left: auto;
  color: #e6dcff;
  border: 2px solid #b07ec4;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.grab-bag-start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 16px 28px;
  text-align: center;
  color: #e8e4dc;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.grab-bag-start h2 {
  margin: 8px 0 0;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: #f5f0e6;
}

.grab-bag-start p {
  margin: 0;
  max-width: 420px;
  line-height: 1.4;
  color: #9a9286;
  font-size: 0.9rem;
}

.grab-bag-start-status {
  max-width: 420px;
  color: #c4a35a;
  font-size: 0.82rem;
}

.grab-bag-category-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.grab-bag-category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: #292826;
  border: 2px solid #c4a35a;
  border-radius: 10px;
  color: #f5ecd7;
  cursor: pointer;
  text-align: left;
}

.grab-bag-category-btn:active {
  background: #3a342c;
}

.grab-bag-category-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.grab-bag-category-count {
  font-size: 0.8rem;
  color: #c4a35a;
  white-space: nowrap;
}

.grab-bag-loading,
.grab-bag-empty {
  color: #afa38c;
  padding: 20px 0;
}

.grab-bag-game {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  padding: 8px 16px 16px;
  box-sizing: border-box;
}

.grab-bag-game.keyboard-host {
  padding-bottom: 4px;
}

.grab-bag-answer-wrap,
.grab-bag-nav,
.grab-bag-actions {
  flex-shrink: 0;
}

.grab-bag-review-banner {
  display: none;
  text-align: center;
  color: #c4a35a;
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0 0 8px;
}

.grab-bag-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #afa38c;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.grab-bag-group-name {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f5f0e6;
  margin: 4px 0 16px;
  line-height: 1.25;
}

.grab-bag-cells {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 16px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.grab-bag-cell {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #5a544a;
  border-radius: 8px;
  background: #1b1a18;
  color: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grab-bag-cell.filled {
  color: #ffffff;
  border-color: #c4a35a;
  background: #2a2620;
  text-transform: uppercase;
}

.grab-bag-cell.missed {
  color: #c4a35a;
  border-color: #6b5a3a;
  background: #241f18;
  opacity: 0.85;
}

.grab-bag-cell.just-filled {
  animation: grabBagFill 280ms ease-out;
}

@keyframes grabBagFill {
  from { transform: scale(0.98); background: #3d3424; }
  to { transform: scale(1); background: #2a2620; }
}

.grab-bag-answer-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.grab-bag-answer-input {
  width: 100%;
  max-width: 360px;
  height: 48px;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  background: #1b1a18;
  border: 2px solid #5a544a;
  border-radius: 8px;
  color: #f5f0e6;
  outline: none;
}

.grab-bag-answer-input:focus {
  border-color: #c4a35a;
}

.grab-bag-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.grab-bag-arrow {
  height: 48px;
  min-width: 48px;
  font-size: 1.5rem;
  background: #222222;
  border-radius: 50%;
  border: 1px solid #4a453e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.grab-bag-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.grab-bag-btn {
  min-width: 110px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 2px solid #5a544a;
  background: #292826;
  color: #e8e4dc;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.grab-bag-btn.primary {
  border-color: #c4a35a;
  color: #f5ecd7;
}

.grab-bag-btn.danger {
  border-color: #a86b6b;
  color: #f0d6d6;
}

.grab-bag-round #iosKeyboard.keyboard-active,
.grab-bag-round #iosKeyboard.grab-bag-keyboard {
  display: flex !important;
  flex-direction: column;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 600px !important;
  flex: 0 0 auto;
  order: 20;
  margin: 8px auto 0;
  z-index: 1;
  border-radius: 10px;
  align-self: center;
}

.mode-button.grab-bag-mode {
  background: #292826;
  border: 2px solid #c49ad4;
  color: #f5e8f8;
}

@media (max-width: 768px) {
  .grab-bag-group-name {
    font-size: 1.15rem;
  }

  .grab-bag-cell {
    min-height: 44px;
    font-size: 0.98rem;
  }

  .grab-bag-round #iosKeyboard.keyboard-active,
  .grab-bag-round #iosKeyboard.grab-bag-keyboard {
    max-width: 100% !important;
  }
}