/* Mascot cheer animation */
.mascot-cheer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mascot-cheer {
  width: 90px;
  height: auto;
  transition: transform 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  filter: drop-shadow(0 4px 8px #0008);
}
.mascot-cheer.cheer {
  animation: mascot-bounce 0.7s cubic-bezier(.68,-0.55,.27,1.55) 1;
}
@keyframes mascot-bounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.15,0.85) translateY(-10px); }
  50% { transform: scale(0.95,1.1) translateY(-18px); }
  70% { transform: scale(1.1,0.9) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}
.mascot-cheer.hidden { display: none; }
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&display=swap');

:root{
  --bg:#0e4d6f;
  --bg2:#0c3f59;
  --panel:#0b6b94;
  --panel-dark:#084b66;
  --accent:#ffc23c;
  --accent2:#71d79f;
  --accent3:#ff6b5f;
  --white:#f8fbff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: 
    radial-gradient(circle at 20% 80%, rgba(113, 215, 159, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 194, 60, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #0e4d6f 0%, #0c3f59 50%, #0a2e41 100%);
  color:var(--white);
  min-height: 100vh;
}

.game-title-rumble{
  margin-top:20px;
  margin-bottom:24px;
  text-shadow: 
    0 0 10px rgba(255, 194, 60, 0.5),
    0 0 20px rgba(255, 194, 60, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

/* Rules summary panel (top helper card) */
#rules-summary.rules-panel{
  max-width:720px;
  margin:0 auto 24px auto;
  padding:20px 24px;
  background: linear-gradient(135deg, rgba(246, 239, 230, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius:24px;
  border:4px solid #e7d9c7;
  box-shadow:
    0 12px 0 #c4b29a, 
    0 20px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color:var(--text-mid);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#rules-summary.rules-panel:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 0 #c4b29a, 
    0 24px 48px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#rules-summary.rules-panel ul{
  margin:10px 0 8px;
  padding-left:22px;
}
#rules-summary.rules-panel li{
  font-size:15px;
  margin:8px 0;
  line-height: 1.6;
}
#rules-summary.rules-panel li em{
  opacity: 0.85;
  font-style: normal;
  font-size: 14px;
}
.rules-panel-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.rules-emoji{
  font-size:24px;
}
.rules-title{
  font-weight:900;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.08em;
  background: linear-gradient(135deg, #0e4d6f, #116b94);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rules-hint{
  margin:8px 0 0;
  font-size:13px;
  opacity:.8;
}
.rules-hint kbd{
  background: #e8f4fa;
  padding: 3px 8px;
  border-radius: 6px;
  border: 2px solid #c3dbe5;
  font-weight: 800;
  font-size: 12px;
}

#game{ 
  max-width:1000px; 
  margin:0 auto; 
  padding:30px 20px 40px; 
}

/* Subtle glass effect on major panels */
#game > header.hud, #arena > div, #result{ 
  backdrop-filter: blur(8px); 
}

/* HUD */
.hud{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:14px;
  background: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
  border:3px solid rgba(255, 255, 255, 0.1);
  border-radius:20px;
  padding:16px 18px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hud > div{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  font-weight:800; 
  font-size: 15px;
}
.hud span:first-child{ 
  opacity:.9; 
  font-weight:700; 
  font-size: 14px;
}

/* Arena */
#arena{ 
  display:grid; 
  grid-template-columns:1fr; 
  gap:20px; 
  margin-top:24px; 
}
#opponent-area{
  position:relative;
  min-height:180px;
  background: 
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.12), transparent 70%),
    linear-gradient(145deg, rgba(11, 107, 148, 0.4), rgba(8, 75, 102, 0.4));
  border:3px solid rgba(255, 255, 255, 0.15);
  border-radius:24px; 
  padding:20px;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}
#opponent-name{
  position:absolute; 
  right:20px; 
  top:16px;
  background: linear-gradient(135deg, rgba(11, 107, 148, 0.9), rgba(8, 75, 102, 0.9));
  border:2px solid rgba(255, 255, 255, 0.2);
  padding:8px 16px; 
  border-radius:30px; 
  font-weight:900;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}
.speech{
  max-width:660px; 
  line-height:1.4; 
  font-size:20px; 
  font-weight:800;
  background: linear-gradient(145deg, #ffffff, #f0f8ff); 
  color:#083a52; 
  padding:20px 24px; 
  border-radius:20px;
  border:4px solid #d4ebff; 
  box-shadow: 
    0 12px 0 #8ec5e8,
    0 16px 32px rgba(0, 0, 0, 0.25);
  position: relative;
}
.speech::before{
  content: '';
  position: absolute;
  top: -12px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #d4ebff;
}
.hidden{ display:none; }

#player-area{ 
  text-align:center; 
  padding:10px 0 12px; 
}

#timing-bar-wrapper{ 
  margin:14px auto 8px; 
  width:min(600px, 94%); 
}
#timing-bar{ 
  position:relative; 
  height:18px; 
  background: linear-gradient(180deg, #062835, #083a52); 
  border-radius:24px; 
  overflow:hidden; 
  border:3px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
#timing-window{ 
  position:absolute; 
  top:0; 
  bottom:0; 
  width:14%; 
  background: linear-gradient(90deg, #55d69b, #a1f7cf, #55d69b); 
  box-shadow:
    0 0 20px rgba(134, 243, 203, 0.8),
    inset 0 0 12px rgba(255, 255, 255, 0.4); 
  border-right:2px solid rgba(255, 255, 255, 0.3); 
  border-left:2px solid rgba(255, 255, 255, 0.3); 
  transform:translateX(0%);
  animation: pulseGlow 1s infinite;
}

.buttons{ 
  display:flex; 
  justify-content:center; 
  gap:20px; 
  margin-top:16px; 
  flex-wrap:wrap; 
}
.mini-legend{
  margin-top:14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  opacity:.95;
  font-weight: 700;
}
.mini-legend span{
  padding:6px 14px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.mini-legend span:hover{
  transform: translateY(-2px);
}
.move-btn{
  font-weight:900; 
  font-size:20px; 
  letter-spacing:.8px;
  padding:18px 28px; 
  border-radius:24px; 
  border:0; 
  cursor:pointer;
  color:#062b3a; 
  background:var(--white); 
  box-shadow:0 10px 0 #bfd4e1, 0 12px 24px rgba(0, 0, 0, 0.3); 
  border:4px solid #e6f3fa;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: visible;
}
.move-btn[data-move="revise"]{ 
  background: linear-gradient(135deg, #79c5ff, #5eb1ff); 
  box-shadow:0 10px 0 #4c98d1, 0 12px 24px rgba(76, 152, 209, 0.4); 
  border-color:#bfe4ff; 
}
.move-btn[data-move="clarify"]{ 
  background: linear-gradient(135deg, #7ee3a7, #5ed89b); 
  box-shadow:0 10px 0 #56b882, 0 12px 24px rgba(86, 184, 130, 0.4); 
  border-color:#c4f5da; 
}
.move-btn[data-move="submit"]{ 
  background: linear-gradient(135deg, #ff8a7d, #ff6f5f); 
  box-shadow:0 10px 0 #cf6256, 0 12px 24px rgba(207, 98, 86, 0.4); 
  border-color:#ffd4cf; 
}
.move-btn:hover:not([disabled]){ 
  transform: translateY(-4px) scale(1.02); 
  box-shadow:0 14px 0 rgba(0,0,0,.25), 0 16px 32px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}
.move-btn:active{ 
  transform: translateY(2px) scale(0.98); 
  box-shadow:0 6px 0 rgba(0,0,0,.25), 0 8px 16px rgba(0, 0, 0, 0.3); 
}
.move-btn[disabled]{ 
  filter:grayscale(.6) brightness(.8); 
  cursor:not-allowed; 
  opacity: 0.7;
}

#result{
  margin-top:20px; 
  text-align:center;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15)); 
  border:3px solid rgba(255, 255, 255, 0.15); 
  border-radius:20px; 
  padding:20px;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
#round-result{ 
  font-size:20px; 
  font-weight:900; 
  margin:10px auto;
  padding: 16px 20px;
  border-radius: 16px;
  line-height: 1.4;
}
#match-result{ 
  font-size:28px; 
  font-weight:900; 
  margin:16px auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.coupon-high{ 
  background: linear-gradient(135deg, #ffe497, #ffd96b); 
  color:#522f00; 
  padding:14px 20px; 
  border-radius:18px; 
  font-weight:800; 
  display:inline-block; 
  box-shadow:0 8px 0 #c9aa32, 0 12px 24px rgba(201, 170, 50, 0.4);
  border: 3px solid #fff4cd;
}
.coupon-mid{ 
  background: linear-gradient(135deg, #b8f5d5, #9ef0c3); 
  color:#063c2b; 
  padding:14px 20px; 
  border-radius:18px; 
  font-weight:800; 
  display:inline-block; 
  box-shadow:0 8px 0 #3d8f69, 0 12px 24px rgba(61, 143, 105, 0.4);
  border: 3px solid #d8fce9;
}
.coupon-low{ 
  background: linear-gradient(135deg, #bfd4e1, #a9c4d6); 
  color:#06303f; 
  padding:14px 20px; 
  border-radius:18px; 
  font-weight:700; 
  display:inline-block;
  border: 3px solid #dfe9f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.post-buttons{ 
  display:flex; 
  justify-content:center; 
  gap:16px; 
  margin-top: 16px;
}
#play-again{
  background: linear-gradient(135deg, #ffc23c, #ffb01a); 
  color:#522f00; 
  border:4px solid #ffe497; 
  box-shadow:0 10px 0 #9a6b00, 0 12px 24px rgba(154, 107, 0, 0.4); 
  border-radius:20px; 
  padding:16px 32px; 
  font-weight:900; 
  font-size:20px; 
  cursor:pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.5px;
}
#play-again:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 0 #9a6b00, 0 16px 32px rgba(154, 107, 0, 0.5);
  filter: brightness(1.1);
}
#play-again:active{
  transform: translateY(2px);
  box-shadow:0 6px 0 #9a6b00, 0 8px 16px rgba(154, 107, 0, 0.4);
}

#combo{ 
  font-size:20px; 
  font-weight:900; 
  background: linear-gradient(135deg, rgba(255, 194, 60, 0.9), rgba(255, 176, 26, 0.9)); 
  display:inline-block; 
  padding:10px 20px; 
  border-radius:16px;
  border: 3px solid rgba(255, 228, 151, 0.8);
  box-shadow: 
    0 6px 0 rgba(154, 107, 0, 0.8),
    0 8px 20px rgba(255, 194, 60, 0.4);
  animation: comboShake 0.4s ease;
  color: #522f00;
}

@keyframes comboShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-5deg) scale(1.05); }
  75% { transform: rotate(5deg) scale(1.05); }
}

#leaderboard{ 
  margin-top:20px; 
  text-align:left; 
  max-width:600px; 
  margin-left:auto; 
  margin-right:auto; 
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)); 
  border-radius:16px; 
  padding:18px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
#leaderboard h3{ 
  margin:0 0 12px; 
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#leaderboard ol{ 
  margin:0; 
  padding-left:32px; 
}
#leaderboard li{ 
  padding:6px 0; 
  font-weight: 700;
  font-size: 16px;
}

/* Help button */
.help-btn{
  width:100%; 
  height:100%;
  font-weight:900; 
  font-size:13px; 
  letter-spacing:.6px; 
  cursor:pointer;
  background: linear-gradient(135deg, #71d79f, #5ed89b); 
  color:#063c2b; 
  border:3px solid #b8f5d5; 
  border-radius:16px; 
  box-shadow:0 7px 0 #3d8f69, 0 8px 16px rgba(61, 143, 105, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.help-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 9px 0 #3d8f69, 0 10px 20px rgba(61, 143, 105, 0.5);
  filter: brightness(1.1);
}
.help-btn:active{ 
  transform:translateY(2px); 
  box-shadow:0 4px 0 #2d6d50, 0 6px 12px rgba(45, 109, 80, 0.4); 
}

/* Modal */
.modal.hidden{ display:none; }
.modal{ 
  position:fixed; 
  inset:0; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:50; 
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-backdrop{ 
  position:absolute; 
  inset:0; 
  background:rgba(0, 37, 53, 0.75); 
  backdrop-filter:blur(6px); 
}
.modal-card{ 
  position:relative; 
  max-width:700px; 
  width:92%; 
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(135deg, #f2fbff 0%, #ffffff 100%); 
  color:#062d3f; 
  border:4px solid #cbe9ff; 
  box-shadow:
    0 14px 0 #83bce0, 
    0 20px 48px rgba(0, 0, 0, 0.4); 
  border-radius:28px; 
  padding:32px 36px 36px; 
  font-size:16px; 
  line-height:1.6;
  animation: modalSlideIn 0.4s cubic-bezier(0.25, 1.4, 0.35, 1);
}
@keyframes modalSlideIn {
  from { transform: translateY(40px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-card h2{ 
  margin-top:0; 
  font-size:28px; 
  font-weight:900;
  background: linear-gradient(135deg, #0e4d6f, #116b94);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.modal-card h3{
  font-size: 18px;
  font-weight: 900;
  color: #0e4d6f;
  margin: 16px 0 8px 0;
}
.modal-card ul{ 
  padding-left:28px; 
  margin:12px 0 20px; 
}
.modal-card li{ 
  margin:8px 0;
  line-height: 1.7;
}
.modal-card p{
  line-height: 1.6;
  margin: 12px 0;
}
.modal-actions{ 
  text-align:center; 
  margin-top:8px; 
}
.modal-actions .primary{ 
  background: linear-gradient(135deg, #ffc23c, #ffb01a); 
  color:#522f00; 
  font-weight:900; 
  font-size:19px; 
  padding:14px 32px; 
  border:4px solid #ffe497; 
  border-radius:20px; 
  cursor:pointer; 
  box-shadow:0 8px 0 #9a6b00, 0 10px 24px rgba(154, 107, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.5px;
}
.modal-actions .primary:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 0 #9a6b00, 0 12px 28px rgba(154, 107, 0, 0.5);
  filter: brightness(1.1);
}
.modal-actions .primary:active{ 
  transform:translateY(2px); 
  box-shadow:0 5px 0 #6f4d00, 0 7px 16px rgba(111, 77, 0, 0.4); 
}
.hint{ 
  opacity:.8; 
  font-size:14px; 
  margin-top:18px; 
  text-align:center;
  line-height: 1.5;
}
.modal kbd{ 
  background:#e8f4fa; 
  padding:4px 10px; 
  border-radius:8px; 
  border:2px solid #c3dbe5; 
  font-weight:800; 
  font-size: 13px;
}

/* --- Elegance upgrades (appended to override earlier rules) --- */
/* Opponent panel refinements */
#opponent-area{
  min-height:180px;
  border-radius:24px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(145deg, rgba(11, 107, 148, 0.4), rgba(8, 75, 102, 0.4));
}

/* Speech pop-in */
.speech{ 
  background:linear-gradient(145deg,#ffffff,#f0f8ff); 
  border-radius:20px; 
  border-width:4px; 
  box-shadow:
    0 12px 0 #8ec5e8,
    0 16px 32px rgba(0, 0, 0, 0.25); 
}
.speech.pop{ 
  animation:popIn .4s cubic-bezier(.25,1.5,.35,1); 
}
@keyframes popIn{
  0%{transform:scale(.75) translateY(12px); opacity:0;}
  60%{transform:scale(1.04); opacity:1;}
  100%{transform:scale(1);} 
}

/* Timing window glow */
@keyframes pulseGlow{
  0%,100%{filter:brightness(1); box-shadow: 0 0 20px rgba(134, 243, 203, 0.8), inset 0 0 12px rgba(255, 255, 255, 0.4);}
  50%{filter:brightness(1.3); box-shadow: 0 0 30px rgba(134, 243, 203, 1), inset 0 0 16px rgba(255, 255, 255, 0.6);} 
}

/* Buttons with icons and hover lift */
.move-btn { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  border-radius:24px; 
  box-shadow:0 10px 0 rgba(0,0,0,.2), 0 12px 24px rgba(0, 0, 0, 0.3); 
  font-weight:900; 
  font-size:20px; 
  padding:18px 28px; 
  transition: transform .2s cubic-bezier(.25,1.5,.35,1), box-shadow .2s, filter .2s; 
}
.move-btn .icon{ 
  font-size:28px; 
}
.move-btn[data-move="revise"]{ 
  box-shadow:0 10px 0 #4c98d1, 0 12px 24px rgba(76, 152, 209, 0.4); 
}
.move-btn[data-move="clarify"]{ 
  box-shadow:0 10px 0 #56b882, 0 12px 24px rgba(86, 184, 130, 0.4); 
}
.move-btn[data-move="submit"]{ 
  box-shadow:0 10px 0 #cf6256, 0 12px 24px rgba(207, 98, 86, 0.4); 
}

/* Round indicators */
.indicators{ 
  margin:8px 0 4px; 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
  font-size:13px; 
  font-weight: 800;
}
.indicators .row{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
}
.indicators .dots{ 
  display:flex; 
  gap:8px; 
}
.indicators .dot{ 
  width:20px; 
  height:20px; 
  border-radius:50%; 
  background: linear-gradient(135deg, #244e63, #1a3a4d); 
  box-shadow:
    0 3px 0 #0d2530 inset,
    0 2px 6px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.indicators .dot.win{ 
  background:linear-gradient(135deg,#71d79f,#3aa86f); 
  box-shadow:
    0 3px 0 #1a6b45 inset,
    0 2px 6px rgba(26, 107, 69, 0.4),
    0 0 12px rgba(113, 215, 159, 0.5);
  border-color: rgba(184, 245, 213, 0.6);
}
.indicators .dot.loss{ 
  background:linear-gradient(135deg,#ff8a7d,#dd5e50); 
  box-shadow:
    0 3px 0 #a1362a inset,
    0 2px 6px rgba(161, 54, 42, 0.4),
    0 0 12px rgba(255, 138, 125, 0.5);
  border-color: rgba(255, 212, 207, 0.6);
}

/* Daily badge */
.badge{ 
  position:absolute; 
  left:20px; 
  top:16px; 
  background: linear-gradient(135deg, #ffc23c, #ffb01a); 
  color:#522f00; 
  font-weight:900; 
  font-size:13px; 
  padding:6px 14px; 
  border-radius:40px; 
  box-shadow:0 5px 0 #9a6b00, 0 6px 16px rgba(154, 107, 0, 0.4); 
  letter-spacing:.6px;
  border: 3px solid #ffe497;
}

/* Ripple for buttons */
.move-btn .btn-ripple{ 
  position:absolute; 
  inset:0; 
  border-radius:inherit; 
  overflow:hidden; 
  pointer-events:none; 
}
.move-btn .btn-ripple::after{ 
  content:""; 
  position:absolute; 
  left:50%; 
  top:50%; 
  width:0; 
  height:0; 
  background:rgba(255,255,255,.4); 
  border-radius:50%; 
  transform:translate(-50%,-50%); 
  animation:ripple .5s ease-out forwards; 
}
@keyframes ripple{ 
  from{ width:0; height:0; opacity:.9; } 
  to{ width:260%; height:260%; opacity:0; } 
}

/* Layout fixes */
#opponent-area.has-badge{ 
  padding-top:70px; 
}
#daily-badge{ 
  z-index:2; 
}
.speech{ 
  margin-top:6px; 
}

/* Align indicator labels */
.indicators .row span:first-child{ 
  width:100px; 
  display:inline-block; 
  font-weight:900; 
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Coupon spacing & emphasis */
#coupon{ 
  margin:12px 0 18px; 
  line-height:1.4;
  font-size: 16px;
}
.coupon-high strong, .coupon-mid strong{ 
  font-size:20px; 
  letter-spacing:.6px; 
}

/* Reusable small button (matches app button style) */
.small-btn{
  font-weight:900; 
  font-size:13px; 
  letter-spacing:.5px; 
  cursor:pointer;
  background: linear-gradient(135deg, #71d79f, #5ed89b); 
  color:#063c2b; 
  border:3px solid #b8f5d5; 
  border-radius:14px; 
  box-shadow:0 6px 0 #3d8f69, 0 7px 16px rgba(61, 143, 105, 0.3);
  padding:8px 14px; 
  margin-left:10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.small-btn.alt{ 
  background: linear-gradient(135deg, #ff6b5f, #ff5a50); 
  color:#3a0b06; 
  border-color:#ffc6c1; 
  box-shadow:0 6px 0 #a74b42, 0 7px 16px rgba(167, 75, 66, 0.3); 
}
.small-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 0 #3d8f69, 0 9px 20px rgba(61, 143, 105, 0.4);
}
.small-btn.alt:hover{
  box-shadow:0 8px 0 #a74b42, 0 9px 20px rgba(167, 75, 66, 0.4);
}
.small-btn:active{ 
  transform:translateY(2px); 
  box-shadow:0 4px 0 #2d6d50, 0 5px 12px rgba(45, 109, 80, 0.3); 
}
.small-btn.alt:active{
  box-shadow:0 4px 0 #8a3d35, 0 5px 12px rgba(138, 61, 53, 0.3);
}

/* Animated, color-coded feedback for round results */
.result-win {
  color: #1fae4b;
  background: linear-gradient(135deg, #eafff1 0%, #d4f5dd 100%);
  border-radius: 14px;
  border: 3px solid #71d79f;
  box-shadow: 
    0 4px 16px rgba(113, 215, 159, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.result-loss {
  color: #e23c2a;
  background: linear-gradient(135deg, #fff0ee 0%, #ffe5e2 100%);
  border-radius: 14px;
  border: 3px solid #ff8a7d;
  box-shadow: 
    0 4px 16px rgba(255, 138, 125, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.result-tie {
  color: #bfa800;
  background: linear-gradient(135deg, #fffbe7 0%, #fff5d1 100%);
  border-radius: 14px;
  border: 3px solid #ffe497;
  box-shadow: 
    0 4px 16px rgba(255, 228, 151, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.result-anim {
  animation: popResult .5s cubic-bezier(.25,1.5,.35,1);
}
@keyframes popResult {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* Silhouette emoji overlay on move buttons */
.silhouette-emoji {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  opacity: 0.12;
  pointer-events: none;
  filter: grayscale(1) brightness(0.7);
  z-index: 0;
}
.move-btn {
  position: relative;
  overflow: hidden;
}
.move-btn .icon, .move-btn .label {
  position: relative;
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .game-title-rumble {
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  
  #rules-summary.rules-panel {
    padding: 16px 20px;
    margin: 10px auto 16px;
  }
  
  .hud {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 14px;
  }
  
  .help-block {
    grid-column: span 3;
  }
  
  .move-btn {
    padding: 14px 20px;
    font-size: 18px;
  }
  
  .move-btn .icon {
    font-size: 24px;
  }
  
  .buttons {
    gap: 14px;
  }
  
  #opponent-area {
    min-height: 160px;
  }
  
  .speech {
    font-size: 18px;
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .move-btn {
    width: 100%;
    justify-content: center;
  }
  
  .mini-legend {
    flex-direction: column;
    align-items: center;
  }
}