:root{
  --gold-1: #ffd166;
  --gold-2: #f4c542;
  --gold-3: #d8a31e;
  --red-1: #ff4d4f;
  --red-2: #c9181f;
  --accent-1:#ffb03b; /* burnt orange/gold */
  --accent-2:#b91c1c; /* deep casino red */
  --bg-dark:#2b0f07;
  --bg-wood: #3b2b1a; /* dark wood/brown for consistent accents */
  --muted:#6b6b6b;
  --cell-height:56px;
  --text-dark: #3b2b1a; /* consistent dark/brown text for readability */
}

body{
  font-family: 'Helvetica Neue', Arial, system-ui;
  margin:18px;
  color:#fff;
  background:linear-gradient(180deg,#2b0f07 0%, #3b1507 40%, #5a1808 100%);
}
/* main container: use dark text inside for readability against bright tiles */
#game{max-width:980px;margin:12px auto;background:linear-gradient(180deg,#3f1f0d 0%, #51290f 100%);padding:20px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,0.6);border:2px solid rgba(255,215,120,0.08);position:relative;z-index:2;color:var(--text-dark)}

header h1{margin:0 0 10px 0;font-size:20px;color:var(--gold-2)}

#board{width:760px;margin:12px auto;border-radius:6px;background:linear-gradient(180deg,#fdf6e3 0%, #fde9c2 100%);border:3px solid rgba(200,140,40,0.12);box-shadow:inset 0 2px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(0,0,0,0.08);padding:8px}
.board-row{display:flex;align-items:center;height:var(--cell-height);padding:6px 8px;border-radius:4px;margin:6px 0}
.board-row:nth-child(odd){background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));}

/* Multiplier row colors (progressively deeper toward x5) */
.board-row.mul-start { background: linear-gradient(180deg,#efe6d8,#f7f1e6); }
.board-row.mul-1 { background: linear-gradient(180deg,#f7f4ec,#f1e9d8); border-left:6px solid rgba(106,84,61,0.06); }
.board-row.mul-2 { background: linear-gradient(180deg,#f0e6d2,#e8d9be); border-left:6px solid rgba(139,103,59,0.08); }
.board-row.mul-3 { background: linear-gradient(180deg,#e6d6b8,#dcc4a0); border-left:6px solid rgba(153,95,46,0.10); }
.board-row.mul-4 { background: linear-gradient(180deg,#d9c39a,#c9ab79); border-left:6px solid rgba(173,92,35,0.12); }
.board-row.mul-5 { background: linear-gradient(180deg,#bfa176,#a77b45); border-left:6px solid rgba(184,72,24,0.16); color:#fff }

/* Ensure center label contrasts on dark mul-5 */
.board-row.mul-5 .center { background: linear-gradient(180deg,#9e7f55,#8d6a3f); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

.side{flex:1;min-width:220px;display:flex;align-items:center;justify-content:center}
.center{width:200px;text-align:center;color:var(--muted);font-weight:800;background:linear-gradient(180deg,#efe1c6,#e8d0aa);border-radius:6px;padding:8px;border:2px solid rgba(0,0,0,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}

.cell-word{padding:8px 12px;background:linear-gradient(180deg,#fff3cf,#ffe5a8);border-radius:6px;box-shadow:0 4px 6px var(--tile-shadow);border:1px solid var(--tile-edge);color:var(--red-2);font-weight:900;min-width:80px;text-align:center}

/* ensure readable dark text on tiles, board and scoreboard */
.tile-btn .tile-letter{ color: var(--text-dark); }
.cell-word{ color: var(--text-dark); }
.center{ color: var(--text-dark); }
#scoreboard-table th, #scoreboard-table td{ color: var(--text-dark); }
#word-input, #mode-control, button, .meta, .overall-winner{ color: var(--text-dark); }

#controls{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:12px}
.panel{flex:1;min-width:280px}
#tiles{display:flex;flex-wrap:wrap;gap:12px;max-width:540px;margin-top:8px}

/* Scrabble-like tile */
.tile-btn{position:relative; width:64px; height:72px; padding:0;border-radius:6px;border:1px solid rgba(200,140,40,0.18); background: linear-gradient(180deg,#fff6d1,#ffecb2); box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:800; color:var(--bg-wood); font-size:22px}
.tile-btn:active{transform:translateY(2px); box-shadow:0 3px 4px rgba(0,0,0,0.16)}
.tile-btn.hidden{background:#eee;color:#bbb;cursor:default;box-shadow:none}
.tile-btn .tile-letter{font-size:28px; line-height:1;}
.tile-btn .tile-score{position:absolute; left:6px; bottom:6px; background:var(--red-2); color:#fff; border-radius:10px; padding:2px 6px; font-size:12px; font-weight:700}
.tile-btn .tile-count{position:absolute; right:6px; bottom:6px; background:var(--gold-2); color:#fff; border-radius:10px; padding:2px 6px; font-size:12px; font-weight:700}

/* Depleted tile (no more copies) */
.tile-btn.depleted{ background: linear-gradient(180deg,#6b2b1a,#4a1206); border-color: rgba(0,0,0,0.45); color: #fff; box-shadow:0 8px 18px rgba(0,0,0,0.6); }
.tile-btn.depleted .tile-letter{ color:#fff !important; }
.tile-btn.depleted .tile-score, .tile-btn.depleted .tile-count{ background: rgba(255,255,255,0.12); color:#fff }

#selected-word{display:flex;gap:8px;align-items:center;margin-top:10px}
#word-input{min-width:260px;padding:10px;border-radius:8px;border:1px solid #d0c0a8;background:#fff;font-weight:700}
button{padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:linear-gradient(180deg,#fff6ec,#fff0db);cursor:pointer}

#log{margin-top:12px}
#log-list{list-style:none;padding-left:0;max-height:260px;overflow:auto;border:1px solid #eee;padding:10px;background:linear-gradient(180deg,#fff,#faf6ee);border-radius:8px}
.small{font-size:12px;color:var(--muted)}
.meta{margin-bottom:6px}
footer{margin-top:12px}
code{background:#f1f5ff;padding:2px 6px;border-radius:4px}

/* stylized title */
#title{font-family:'Cinzel','Georgia',serif;font-weight:900;color:var(--gold-3);letter-spacing:1px;display:flex;flex-direction:column;align-items:flex-start}
.title-strong{font-family:'Cinzel','Georgia',serif;color:var(--red-2);font-size:28px;margin-left:6px;text-shadow:0 4px 14px rgba(200,100,20,0.22)}
.title-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px;margin-left:6px}

/* Title shine animation */
@keyframes title-shine{
  0%{ text-shadow:0 6px 12px rgba(255,200,80,0.06); transform:translateY(0); }
  50%{ text-shadow:0 14px 34px rgba(255,200,80,0.28); transform:translateY(-2px); }
  100%{ text-shadow:0 6px 12px rgba(255,200,80,0.06); transform:translateY(0); }
}
.title-strong{ animation: title-shine 3.6s ease-in-out infinite; }

/* floating word background */
#word-bg{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:0}
.word-float{position:absolute;font-weight:700;color:rgba(80,60,40,0.06);transform:translateZ(0);white-space:nowrap;will-change:transform,opacity}

/* animations */
@keyframes float-up{
  0%{ transform: translateY(110vh) scale(0.8); opacity:0 }
  10%{ opacity:0.06 }
  50%{ opacity:0.08 }
  100%{ transform: translateY(-30vh) scale(1.2); opacity:0 }
}

/* bonus pulse animation for placed word */
@keyframes bonus-pulse{
  0%{ box-shadow:0 0 0 0 rgba(196,90,0,0.0); transform:scale(1); }
  50%{ box-shadow:0 0 40px 8px rgba(196,90,0,0.12); transform:scale(1.03); }
  100%{ box-shadow:0 0 0 0 rgba(196,90,0,0.0); transform:scale(1); }
}

.bonus-highlight{ animation: bonus-pulse 900ms ease-out both; border-color: var(--gold-3); box-shadow:0 10px 40px rgba(255,200,80,0.24) }

/* Floating single-letter background animation (subtle) */
.floating-letter{ position:fixed; pointer-events:none; z-index:0; color:rgba(255,255,255,0.06); font-weight:900; font-size:18px; transform:translateZ(0); will-change:transform,opacity }

/* Scoreboard styles */
#scoreboard{
  margin-top:16px;
  background: #ffffff !important; /* enforce white */
  color: #000 !important; /* enforce black text */
  padding: 18px 20px; /* a bit more for the mat */
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  border: 6px solid rgba(216,163,30,0.95); /* base gold border */
  position: fixed;
  right: 20px;
  top: 80px;
  width: 360px;
  max-height: calc(100vh - 160px);
  overflow: auto;
  z-index: 1200; /* ensure it's above confetti and other decorations */
  background-clip: padding-box; /* keep inner mat separate from frame */
  /* inner soft mat effect */
  box-shadow: 0 12px 30px rgba(0,0,0,0.18), inset 0 0 0 6px rgba(255,248,220,0.9);
  position: fixed;
}

/* decorative outer bevel using pseudo-element */
#scoreboard::before{
  content: '';
  position: absolute;
  left: -12px; top: -12px; right: -12px; bottom: -12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,245,200,0.25), rgba(212,162,48,0.12));
  z-index: -1; /* sit behind the scoreboard */
  box-shadow: 0 8px 20px rgba(180,120,30,0.18);
}

/* corner ornament (subtle) */
#scoreboard::after{
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  right: -6px; top: -6px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(216,163,30,1) 40%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.95;
}

#scoreboard h3, #scoreboard .overall-winner{ color: #000 !important; }
#scoreboard-table{ width:100%; border-collapse:collapse; background:transparent; }
#scoreboard-table thead th{ background: #f6f6f6; color: #000 !important; font-weight:900; padding:10px }
#scoreboard-table tbody td{ padding:8px 10px; color: #000 !important; background: transparent !important }
#scoreboard-table tbody tr:nth-child(odd){ background: #ffffff !important; }
#scoreboard-table tbody tr:nth-child(even){ background: #f9f9f9 !important; }
#scoreboard .overall-winner{ color: #000 !important; font-size:18px; font-weight:900 }
#scoreboard-table tbody .pass-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#e9ecef; /* light grey */
  color:#333; /* dark text */
  font-weight:700;
  font-size:12px;
  border:1px solid #d0d6db;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04);
}

#scoreboard-table tbody td .pass-badge{ margin:0 auto; }

/* Debug overlay styles */
#debug-overlay{ position: fixed; left: 16px; bottom: 16px; width: 420px; max-height: 240px; overflow:auto; background: rgba(255,255,255,0.92); color:#111; border-radius:8px; padding:8px; font-size:12px; box-shadow:0 8px 20px rgba(0,0,0,0.2); z-index: 1250; border:1px solid rgba(0,0,0,0.06); }
#debug-overlay h4{ margin:0 0 6px 0; font-size:13px; color:#333 }
#debug-overlay ul{ list-style:none; padding-left:6px; margin:0; }
#debug-overlay li{ padding:4px 6px; border-bottom:1px solid rgba(0,0,0,0.04); }
#debug-overlay .debug-small{ font-size:11px; color:#666 }
#debug-toggle{ position: fixed; left: 16px; bottom: 264px; z-index:1251; background:#ffd; border:1px solid #ccc; padding:6px 8px; border-radius:6px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.12) }

/* End of stylesheet */