/* ===== Word Slot - Game Styles ===== */

body { overflow-x: hidden; }

/* --- Top Bar --- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  background: var(--surface);
  border-bottom: 3px solid var(--color-coral);
  box-shadow: var(--shadow-sm);
}
.top-bar .title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.top-bar .title a { color: var(--text-muted); transition: color .2s; }
.top-bar .title a:hover { color: var(--primary); }
.top-bar .title span { color: var(--text); font-weight: 900; }
.top-bar-actions { display: flex; gap: .4rem; align-items: center; }
.icon-btn {
  background: var(--surface2);
  border: 2px solid var(--surface2);
  color: var(--text-muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  transition: border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--secondary); color: var(--secondary); }

/* --- Compact Game Container --- */
.game-page {
  max-width: 600px;
  margin: 0 auto;
  padding: .5rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: calc(100vh - 48px);
}

/* --- Player Setup (inline) --- */
.player-bar {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}
.player-bar input {
  padding: .35rem .6rem;
  font-size: .85rem;
  border-radius: 10px;
  width: 100px;
  min-width: 0;
}
.player-bar .btn { padding: .35rem .6rem; font-size: .8rem; border-radius: 10px; }
.player-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.player-tags .player-tag { font-size: .75rem; padding: .15rem .5rem; }

/* --- Player Select Buttons --- */
.player-select-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
}
.player-select-btn {
  padding: .3rem .7rem;
  font-size: .8rem;
  border-radius: 999px;
  border: 2px solid var(--surface2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all .15s;
}
.player-select-btn:hover {
  border-color: var(--secondary);
}
.player-select-btn.selected {
  background: var(--color-coral);
  color: #5A3A3A;
  border-color: transparent;
}

/* --- Slot Area (compact) --- */
.slot-section {
  text-align: center;
}
.round-info {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
  font-weight: 600;
}
.slot-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.slot-box {
  width: 100px;
  height: 100px;
  background: var(--surface);
  border: 3px solid var(--surface2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 900;
  position: relative;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--text);
}
.slot-box .slot-label {
  position: absolute;
  top: 3px; left: 6px;
  font-size: .55rem;
  color: var(--text-muted);
  font-weight: 400;
}
.slot-box.spinning {
  border-color: var(--secondary);
}
.slot-box.spinning .slot-value {
  animation: slotSlide .1s ease-in-out infinite;
}
.slot-box.decided {
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(255, 107, 157, .2);
}

@keyframes slotSlide {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.slot-hint {
  font-size: .95rem;
  color: var(--text-muted);
  margin-top: .3rem;
  min-height: 1.3em;
}
.slot-hint strong { color: var(--primary); }

.spin-btn {
  margin-top: .4rem;
  padding: .6rem 2.2rem;
  font-size: 1rem;
  border-radius: 999px;
}

/* --- Answer Section --- */
.answer-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  box-shadow: var(--shadow);
}
.answer-form {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.answer-form input[type="text"] {
  flex: 1 1 100px;
  min-width: 0;
  padding: .4rem .5rem;
  font-size: .85rem;
}
.answer-form .btn {
  padding: .4rem .8rem;
  font-size: .85rem;
  flex-shrink: 0;
  border-radius: 10px;
}
.furigana-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-top: .3rem;
  font-size: .8rem;
}
.furigana-row label { flex-shrink: 0; color: var(--text-muted); }
.furigana-row input { flex: 1; min-width: 0; padding: .3rem .5rem; font-size: .8rem; }
.furigana-row .char-count { flex-shrink: 0; color: var(--primary); font-weight: 700; }

.validation-result {
  margin-top: .4rem;
  padding: .5rem .7rem;
  border-radius: 12px;
  font-size: .8rem;
  display: none;
}
.validation-result.show { display: block; }
.validation-result.ok { background: rgba(52, 211, 153, .12); border: 2px solid var(--accent-green); }
.validation-result.ng { background: rgba(255, 107, 157, .1); border: 2px solid var(--primary); }
.validation-result.pass { background: rgba(251, 191, 36, .1); border: 2px solid var(--accent-yellow); }

@media (max-width: 400px) {
  .answer-form { flex-direction: column; }
  .answer-form input[type="text"] { width: 100%; }
}

/* --- Scoreboard (compact horizontal) --- */
.score-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  box-shadow: var(--shadow);
}
.score-section h4 {
  font-size: .7rem;
  color: var(--text-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.score-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
}
.score-item {
  font-size: .8rem;
  display: flex;
  gap: .3rem;
  align-items: center;
}
.score-item .name { font-weight: 700; }
.score-item .pts { color: var(--primary); font-weight: 700; }

/* --- Log (compact) --- */
.log-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .3rem;
}
.log-header h4 {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.clear-log-btn {
  background: var(--surface2);
  border: 2px solid var(--surface2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: .15rem .5rem;
  font-size: .65rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: border-color .2s, color .2s;
}
.clear-log-btn:hover { border-color: var(--primary); color: var(--primary); }

.log-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .3rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--surface2);
  font-size: .75rem;
  flex-wrap: wrap;
}
.log-entry:last-child { border-bottom: none; }
.log-actions {
  display: flex;
  gap: .2rem;
  flex-shrink: 0;
}
.log-actions button {
  background: var(--surface2);
  border: none;
  color: var(--text-muted);
  border-radius: 6px;
  padding: .15rem .35rem;
  font-size: .6rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: color .2s, background .2s;
}
.log-actions button:hover { color: var(--primary); background: rgba(255,107,157,.08); }
.log-entry .valid { color: var(--accent-green); }
.log-entry .invalid { color: var(--primary); }
.log-entry .reason { font-size: .65rem; color: var(--text-muted); }

/* Log edit */
.log-edit-form {
  padding: .4rem 0;
  border-bottom: 1px solid var(--surface2);
  font-size: .8rem;
}
.log-edit-row {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex-wrap: wrap;
}
.log-edit-form select, .log-edit-form input {
  padding: .2rem .4rem;
  font-size: .8rem;
  border-radius: 8px;
  min-width: 0;
}
.log-edit-form input { flex: 1; min-width: 60px; }
.log-edit-buttons {
  display: flex;
  gap: .2rem;
  margin-top: .3rem;
}
.log-edit-buttons button {
  padding: .2rem .6rem;
  font-size: .7rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}
.log-edit-buttons .save-btn { background: var(--accent-green); color: #fff; }
.log-edit-buttons .cancel-btn { background: var(--surface2); color: var(--text-muted); }

/* --- Help Modal --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(90, 58, 58, .3);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-box h3 { margin-bottom: .8rem; font-weight: 900; }
.modal-box ul { margin: 0 0 0 1.2rem; line-height: 1.8; font-size: .85rem; color: var(--text-muted); }
.modal-close {
  position: absolute;
  top: .5rem; right: .8rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color .2s;
}
.modal-close:hover { color: var(--primary); }

/* --- Mobile fine-tune --- */
@media (max-width: 480px) {
  .slot-box { width: 85px; height: 85px; font-size: 1.8rem; }
  .slot-row { gap: .7rem; }
  .game-page { padding: .4rem .5rem; }
}