/* =====================================================================
   Peanut Drop (id "pgsuika") — grid drop-and-merge game.
   Self-contained dark "arcade" surface sitting on the light lobby page.
   Every selector is prefixed .pgsuika- so nothing collides with the
   shared Peanut Games styles. Theme: navy #0C2340, gold #f4b400, white text.
   ===================================================================== */

.pgsuika-wrap { color: #fff; -webkit-font-smoothing: antialiased; }
.pgsuika-center { display: flex; justify-content: center; }

.pgsuika-panel {
  background: #0C2340;
  border: 1px solid rgba(244, 180, 0, 0.28);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(12, 35, 64, 0.28);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ------------------------------ Buttons ---------------------------------- */
.pgsuika-btn {
  font: inherit; font-weight: 800; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent;
  padding: 10px 18px; transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.pgsuika-btn:active { transform: scale(.97); }
.pgsuika-btn:focus-visible { outline: 2px solid #f4b400; outline-offset: 2px; }
.pgsuika-btn-gold { background: #f4b400; color: #0C2340; box-shadow: 0 3px 10px rgba(244, 180, 0, 0.28); }
.pgsuika-btn-gold:hover { background: #ffc21f; }
.pgsuika-ctrl-btn {
  background: #13355c; color: #fff; border-color: rgba(244, 180, 0, 0.35);
  width: 52px; font-size: 18px; padding: 10px 0;
}
.pgsuika-ctrl-btn:hover { background: #1a4372; }

/* ------------------------------ Start card ------------------------------- */
.pgsuika-start-card { max-width: 440px; text-align: center; }
.pgsuika-start-emoji { font-size: 46px; line-height: 1; }
.pgsuika-start-title { font-size: 28px; font-weight: 800; color: #fff; margin: 6px 0 2px; }
.pgsuika-rules p { color: #c5d3e6; font-size: 14px; line-height: 1.45; margin: 8px 0; }
.pgsuika-name-input {
  width: 100%; max-width: 280px; margin: 14px auto 4px; display: block;
  padding: 11px 14px; text-align: center; font-size: 15px;
  color: #fff; background: #081a30;
  border: 1px solid rgba(244, 180, 0, 0.45); border-radius: 10px;
}
.pgsuika-name-input::placeholder { color: #6f86a3; }
.pgsuika-name-input:focus { outline: 2px solid #f4b400; outline-offset: 1px; border-color: #f4b400; }
.pgsuika-start-btn { margin-top: 14px; font-size: 16px; padding: 12px 30px; }

/* ------------------------------ HUD -------------------------------------- */
.pgsuika-hud { display: flex; gap: 14px; justify-content: center; margin-bottom: 6px; }
.pgsuika-stat {
  background: #13355c; border-radius: 12px; padding: 8px 20px; text-align: center;
  min-width: 130px; border: 1px solid rgba(255, 255, 255, 0.06);
}
.pgsuika-stat-label { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #9fb4cf; }
.pgsuika-stat-val { display: block; font-size: 25px; font-weight: 800; color: #f4b400; font-variant-numeric: tabular-nums; }

.pgsuika-msg { min-height: 22px; text-align: center; font-weight: 800; font-size: 15px; opacity: 0; transition: opacity .15s ease; }
.pgsuika-msg.show { opacity: 1; }
.pgsuika-msg.combo { color: #ffd24a; text-shadow: 0 1px 8px rgba(244, 180, 0, 0.5); }
.pgsuika-msg.flash { color: #ff9e3d; }

/* ------------------------------ Layout ----------------------------------- */
.pgsuika-main { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.pgsuika-boardwrap { display: flex; flex-direction: column; align-items: center; }
.pgsuika-side { display: flex; flex-direction: column; gap: 12px; min-width: 180px; }

/* chute (the "next drop" hovering over the selected column) */
.pgsuika-chute { display: flex; gap: 4px; padding: 0 6px 4px; }
.pgsuika-chute-slot {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.pgsuika-chute-slot.pgsuika-selected { background: rgba(244, 180, 0, 0.14); }

/* the board: 6 columns, each a vertical stack of 9 cells */
.pgsuika-board { display: flex; gap: 4px; background: #081a30; padding: 6px; border-radius: 12px; }
.pgsuika-col { display: flex; flex-direction: column; gap: 4px; cursor: pointer; border-radius: 8px; }
.pgsuika-col:hover { background: rgba(255, 255, 255, 0.03); }
.pgsuika-col.pgsuika-selected { box-shadow: inset 0 0 0 2px #f4b400; }
.pgsuika-cell {
  width: 44px; height: 44px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------ Peanuts ---------------------------------- */
.pgsuika-peanut {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; line-height: 1; color: #0C2340;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.20), inset 0 2px 4px rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.pgsuika-d1 { font-size: 18px; }
.pgsuika-d2 { font-size: 15px; }
.pgsuika-d3 { font-size: 12px; }
.pgsuika-d4 { font-size: 10px; }

.pgsuika-t1  { background: #ead6a8; color: #5a4a1e; }
.pgsuika-t2  { background: #f4b400; color: #0C2340; }
.pgsuika-t3  { background: #ffc93c; color: #4a3400; }
.pgsuika-t4  { background: #ff9e3d; color: #3a1c00; }
.pgsuika-t5  { background: #ff7043; color: #fff; }
.pgsuika-t6  { background: #ef5350; color: #fff; }
.pgsuika-t7  { background: #ec407a; color: #fff; }
.pgsuika-t8  { background: #ab47bc; color: #fff; }
.pgsuika-t9  { background: #7e57c2; color: #fff; }
.pgsuika-t10 { background: #5c6bc0; color: #fff; }
.pgsuika-t11 { background: #42a5f5; color: #08233f; }
.pgsuika-t12 { background: #26c6da; color: #08233f; }

/* chute peanut gently bobs so it reads as "ready to drop" */
.pgsuika-chute-slot .pgsuika-peanut { animation: pgsuika-bob 1.1s ease-in-out infinite; }
@keyframes pgsuika-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ------------------------------ Controls --------------------------------- */
.pgsuika-controls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.pgsuika-drop-btn { padding: 11px 30px; font-size: 16px; }

/* ------------------------------ Side panel ------------------------------- */
.pgsuika-nextbox { background: #13355c; border-radius: 12px; padding: 10px 12px 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.06); }
.pgsuika-next-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #9fb4cf; }
.pgsuika-next { display: flex; justify-content: center; margin-top: 8px; min-height: 40px; }

.pgsuika-lb { background: #13355c; border-radius: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.06); }
.pgsuika-lb-title { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #f4b400; margin-bottom: 6px; }
.pgsuika-lb-list { display: flex; flex-direction: column; }
.pgsuika-lb-row { display: flex; gap: 8px; align-items: center; padding: 4px 6px; font-size: 13px; color: #dfe8f4; border-radius: 6px; }
.pgsuika-lb-row + .pgsuika-lb-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pgsuika-lb-rank { width: 30px; color: #9fb4cf; font-variant-numeric: tabular-nums; }
.pgsuika-lb-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgsuika-lb-score { color: #f4b400; font-weight: 700; font-variant-numeric: tabular-nums; }
.pgsuika-lb-row.is-you { background: rgba(244, 180, 0, 0.16); box-shadow: inset 0 0 0 1px rgba(244, 180, 0, 0.5); }
.pgsuika-lb-row.is-you .pgsuika-lb-name { color: #fff; font-weight: 800; }
.pgsuika-lb-empty { font-size: 12px; color: #9fb4cf; padding: 4px 6px; }

.pgsuika-hint { text-align: center; color: #9fb4cf; font-size: 12px; margin-top: 12px; }

/* ------------------------------ Game over -------------------------------- */
.pgsuika-over-card { max-width: 440px; text-align: center; }
.pgsuika-over-title { font-size: 27px; font-weight: 800; color: #fff; }
.pgsuika-over-scorelabel { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #9fb4cf; margin-top: 10px; }
.pgsuika-over-score { font-size: 44px; font-weight: 800; color: #f4b400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pgsuika-over-note { color: #7ee0a1; font-weight: 800; margin-top: 4px; }
.pgsuika-over-rank { color: #dfe8f4; margin-top: 2px; }
.pgsuika-over-lb { margin-top: 16px; text-align: left; }
.pgsuika-again-btn { margin-top: 16px; font-size: 16px; padding: 12px 30px; }

/* ------------------------------ Small screens ---------------------------- */
@media (max-width: 560px) {
  .pgsuika-main { flex-direction: column; align-items: center; }
  .pgsuika-side { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .pgsuika-cell, .pgsuika-chute-slot { width: 40px; height: 40px; }
  .pgsuika-peanut { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .pgsuika-chute-slot .pgsuika-peanut { animation: none; }
}