:root {
  --vh: 1vh;            /* real viewport height unit */
  --hud-h: 64px;        /* mobile HUD height */
  --footer-h: 50px;     /* footer height */
  --tile-size: 64px;
  --tile-font: 40px;

  --hud-bg-1: #2b1e14;
  --hud-bg-2: #3a2618;
  --hud-bg-3: #4a2f1d;

  --primarygamecolor: #da782e;   /* Adagio burnt orange */
  --primarygame-dark: #8f420a;
  --primarygame-soft: #e7c4a3;
  --primarygame-glow: rgba(190,90,15,0.55);

  --board-bg: #fbf6ef;
  --tile-bg: #f6e6c8;
  --tile-border: #d6b98c;
  --tile-grad-top: #fff7e8;
  --tile-grad-bottom: #f3dfbd;
  --tile-shadow-inset-light: rgba(255,255,255,0.7);
  --tile-shadow-inset-dark: rgba(0,0,0,0.05);
  --tile-shadow-drop: rgba(0,0,0,0.18);
  --tile-active-shadow: rgba(0,0,0,0.28);

  --ink-dark: #3a2a1a;
  --ink-muted: #7a5a3a;

  --bonus-gold: #d1a63b;
  --bonus-gold-glow: rgb(255 208 93);

  --bonus-bg-1: #e9b44c;
  --bonus-bg-2: #c98c1d;

  --error-red: #b8402a;          /* earthy brick */
  --error-red-glow: rgba(184,64,42,0.5);

}

html[data-theme="classic"] {
  --board-bg: #fbf6ef;
  --tile-grad-top: #fff7e8;
  --tile-grad-bottom: #f3dfbd;
  --tile-border: #d2b789;
  --tile-shadow-inset-light: rgba(255,255,255,0.7);
  --tile-shadow-inset-dark: rgba(0,0,0,0.05);
  --tile-shadow-drop: rgba(0,0,0,0.18);
  --tile-active-shadow: rgba(0,0,0,0.28);
  --ink-dark: #3a2a1a;
  --hud-bg-1: #2b1e14;
  --hud-bg-2: #3a2618;
  --hud-bg-3: #4a2f1d;
  --primarygamecolor: #da782e;
  --primarygame-glow: rgba(190,90,15,0.55);
}

html[data-theme="metal"] {
  --board-bg: radial-gradient(circle at 20% 10%, #25303e 0%, #171f2a 55%, #111821 100%);
  --tile-grad-top: #f8fbff;
  --tile-grad-bottom: #c8d2df;
  --tile-border: #8b99aa;
  --tile-shadow-inset-light: rgba(255,255,255,0.72);
  --tile-shadow-inset-dark: rgba(40,52,66,0.22);
  --tile-shadow-drop: rgba(8,12,16,0.34);
  --tile-active-shadow: rgba(8,12,16,0.42);
  --ink-dark: #213244;
  --hud-bg-1: #1e2a37;
  --hud-bg-2: #273544;
  --hud-bg-3: #32475b;
  --primarygamecolor:#64a2e2;
  --primarygame-glow: rgba(142,198,255,0.52);
}

html[data-theme="wood"] {
  --board-bg: radial-gradient(circle at 20% 10%, #f2e0c4 0%, #d9b98e 60%, #c59a6d 100%);
  --tile-grad-top: #fff4df;
  --tile-grad-bottom: #d8b37d;
  --tile-border: #a27440;
  --tile-shadow-inset-light: rgba(255,244,220,0.58);
  --tile-shadow-inset-dark: rgba(72,40,10,0.20);
  --tile-shadow-drop: rgba(74,43,17,0.25);
  --tile-active-shadow: rgba(74,43,17,0.34);
  --ink-dark: #4a2d16;
  --hud-bg-1: #4f3118;
  --hud-bg-2: #6a3f20;
  --hud-bg-3: #85572d;
  --primarygamecolor: #e09139;
  --primarygame-glow: rgba(230,145,57,0.5);
}

html[data-theme="plastic"] {
  --board-bg: radial-gradient(circle at 15% 20%, #243d62 0%, #182941 55%, #101b2c 100%);
  --tile-grad-top: #ffe777;
  --tile-grad-bottom: #ffc740;
  --tile-border: #e29824;
  --tile-shadow-inset-light: rgba(255,247,194,0.74);
  --tile-shadow-inset-dark: rgba(136,76,8,0.22);
  --tile-shadow-drop: rgba(7,14,26,0.34);
  --tile-active-shadow: rgba(7,14,26,0.45);
  --ink-dark: #3d2a0d;
  --hud-bg-1: #0f233f;
  --hud-bg-2: #1a3457;
  --hud-bg-3: #274a75;
  --primarygamecolor: #4dc6ff;
  --primarygame-glow: rgba(77,198,255,0.56);
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  background: #2b1e14;
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

#gameStartOverlay {
position: fixed;
inset: 0;
background: radial-gradient(
circle at top,
rgba(75,45,25,0.95),
rgba(25,15,8,0.98)
);
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
display:none;
}

.startPanel {
background: linear-gradient(135deg, #3a2618, #2b1e14);
color: #f6e6c8;
padding: 28px 32px;
border-radius: 20px;
max-width: 420px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.startPanel h1 {
margin: 0 0 12px;
font-size: 24px;
font-weight: 600;
color: var(--primarygamecolor);
}

.startPanel ul {
text-align: left;
padding-left: 18px;
font-size: 15px;
line-height: 1.5;
}

#startGameBtn {
margin-top: 18px;
padding: 12px 28px;
font-size: 18px;
font-weight: 800;
border-radius: 14px;
border: none;
background: var(--primarygamecolor);
color: #fff;
cursor: pointer;
box-shadow: 0 0 18px var(--primarygame-glow);
}



#gameRoot {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: calc(var(--vh) * 100);
}

/* ---------- HUD ---------- */
#gameHUD {
  height: var(--hud-h);
  min-height: var(--hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  color: #eafff6;
  background: linear-gradient(135deg, var(--hud-bg-1), var(--hud-bg-2), var(--hud-bg-3));
  box-shadow: inset 0 -1px rgba(255,255,255,0.12);
  z-index: 10;
}

/* ---------- FOOTER ---------- */
#gameFooter {
  height: var(--footer-h);
  min-height: var(--footer-h);
  display: flex;
  gap: 10px;
  padding: 2px 12px;
  color: #eafff6;
  background: linear-gradient(135deg, var(--hud-bg-1), var(--hud-bg-2), var(--hud-bg-3));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
  z-index: 10;
  justify-content: space-between;
}

.footerGroup {
display: flex;
align-items: center;
gap: 8px;
}

.footerCenter {
justify-content: center;
}

.footerRight {
justify-content: flex-end;
}

.footerLabel {
font-size: 9px;
letter-spacing: 0.14em;
opacity: 0.65;
font-weight: 800;
}

.hudBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 68px;
  margin-right: auto;
  padding: 4px 8px;
}

.hudLabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.7;
  font-weight: 700;
}

.hudScore {
  font-size: 26px;
  font-weight: 900;
  color: var(--primarygamecolor);
  line-height: 1;
}

#bonusIndicator {
  font-size: 12px;
  font-weight: 800;
  color: var(--bonus-gold);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rankText {
  font-size: 13px;
  opacity: 0.7;
}
.rankText:empty { display: none; }

#bonusIndicator.active { opacity: 1; }

.hudAction {
  position: relative;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 10px rgba(0,0,0,0.22);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
  opacity: 0.95;
}

.hudAction:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.11));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 6px 14px rgba(0,0,0,0.28);
  opacity: 1;
}

.hudAction:active {
  transform: translateY(0) scale(0.98);
}

.hudActionPill {
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.hudActionIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hudActionIcon svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 140ms ease;
}

.hudActionIcon:hover svg {
  transform: scale(1.06);
}

#statsToggle svg path,
#statsToggle svg rect {
  fill: currentColor;
  stroke: none;
}

#shareToggle svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#exit {
  margin-left: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07));
}

#exit::before {
  content: '×';
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  transform: translateY(-1px);
}

#gameHUD .hudBlock,
#gameHUD .hudAction {
  opacity: 0;
  transform: translateY(-8px);
  animation: hudPopIn 360ms cubic-bezier(.22,.61,.36,1) forwards;
}

#gameHUD .hudBlock { animation-delay: 20ms; }
#statsToggle { animation-delay: 80ms; }
#leaderToggle { animation-delay: 120ms; }
#shareToggle { animation-delay: 160ms; }
#exit { animation-delay: 200ms; }

@keyframes hudPopIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

#leaderboardTabs {
  padding-bottom: 15px;
  display: flex;
  gap: 10px;
}

#leaderboardTabs .leaderboardTab {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  user-select: none;
}

#leaderboardTabs .leaderboardTab.active {
  background: var(--primarygamecolor);
  color: #fff;
}

.shareOverlayBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.24);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: transform 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.shareOverlayBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.45);
}

.shareOverlayBtn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shareOverlayBtn {
  margin-bottom: 10px;
}

#arrange {
position: relative;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.18);
color: #fff;
font-weight: 900;
font-size: 18px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
z-index: 10;
transition: all 120ms ease;
justify-self: end;
}

#arrange::after {
content: '✦';
line-height: 1;
}

#arrange:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.3);
box-shadow: 0 3px 9px rgba(0,0,0,0.22);
}


.stats-open #statsToggle {
opacity: 1;
border-color: rgba(255,255,255,0.55);
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 0 14px rgba(255,255,255,0.14);
}



/* ---------- STATS OVERLAY ---------- */
#statsOverlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
display: none;
z-index: 5000;
}

#statsPanel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
max-height: 70%;
background: linear-gradient(135deg, var(--hud-bg-1), var(--hud-bg-2), var(--hud-bg-3));
color: #eafff6;
border-radius: 18px 18px 0 0;
padding: 12px;
overflow-y: auto;
}

.statsSection {
margin-top: 12px;
border-radius: 14px;
padding: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}

/* first section in panel should sit flush to top */
#statsPanel .statsSection:first-child {
margin-top: 0;
}

/* dim + disable board when STATS is open */
body.stats-open #gameBoard {
filter: blur(1.5px) brightness(0.85);
transition: filter 180ms ease;
opacity: 0.85;
pointer-events: none;
}

.statsTitle{
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 10px;
}

#statsBox .statsGrid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

#statsBox .statCard{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 12px;
}

#statsBox .statLabel{
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
font-weight: 800;
}

#statsBox .statValue{
margin-top: 6px;
font-size: 22px;
font-weight: 900;
color: var(--primarygamecolor);
}

#statsBox .statSub{
margin-top: 6px;
font-size: 12px;
opacity: 0.8;
font-weight: 700;
}

#statsBox .statBig{
grid-column: 1 / -1;
}

.statsNote{
margin-top: 12px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(218,120,46,0.12);
border: 1px dashed rgba(218,120,46,0.35);
font-weight: 800;
}

#statsBox .statsChartWrap{
margin: 10px 0 12px;
padding: 10px 10px 8px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}

#statsBox canvas{
width: 100%;
height: 180px;
display: block;
}

#statsBox .statsChartHint{
margin-top: 8px;
font-size: 12px;
opacity: 0.80;
font-weight: 800;
}

.themeSwatches {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.themeSwatch {
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(255,255,255,0.24);
border-radius: 10px;
padding: 7px 10px;
font-size: 11px;
font-weight: 800;
color: #fff;
background: rgba(255,255,255,0.12);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.themeSwatch:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.45);
}

.themeSwatch.active {
background: var(--primarygamecolor);
border-color: rgba(255,255,255,0.68);
}




/* ---------- BOARD ---------- */
#gameBoard {
  position: relative;
  flex: 1;
  background: var(--board-bg);
  overflow: hidden;
  transition:
    filter 220ms ease,
    opacity 220ms ease;
}

.tile {
  position: absolute;
  width: var(--tile-size);
  height: var(--tile-size);
  line-height: var(--tile-size);
  font-size: var(--tile-font);

  background:
    linear-gradient(
      180deg,
      var(--tile-grad-top) 0%,
      var(--tile-grad-bottom) 100%
    );

  border: 1px solid var(--tile-border);
  border-radius: 8px;

  color: var(--ink-dark);
  font-weight: 800;
  text-align: center;

  box-shadow:
    0 1px 0 var(--tile-shadow-inset-light) inset,
    0 -1px 0 var(--tile-shadow-inset-dark) inset,
    0 6px 12px var(--tile-shadow-drop);

  cursor: grab;
  user-select: none;
  touch-action: none;

  transition:
    left 0.22s cubic-bezier(.22,.61,.36,1),
    top  0.22s cubic-bezier(.22,.61,.36,1),
    transform 0.36s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.18s ease;

  will-change: transform;
}

.tile:active {
  cursor: grabbing;
  box-shadow: 0 10px 20px var(--tile-active-shadow);
  transform:
    rotate(var(--active-tilt, 0deg))
    scale(1.1) !important;
}


.tile.valid {
  color:var(--primarygamecolor);
}
.tile.pulse {
  animation: wordLock 180ms ease-out;
}
.tile.invalid {
  box-shadow: 0 0 10px var(--error-red-glow);
}
.tile.bonusWord {
  color: var(--bonus-gold);
  text-shadow: 0 0 6px var(--bonus-gold-glow);
}

.tile.settle {
  animation: tileSettle 140ms ease-out;
}

@keyframes tileSettle {
  0%   { transform: scale(var(--scale,1)) translateY(0); }
  50%  { transform: scale(calc(var(--scale,1) * 1.04)) translateY(-1px); }
  100% { transform: scale(var(--scale,1)) translateY(0); }
}

@keyframes wordLock {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 16px var(--primarygame-glow); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.bump {
animation: bump 180ms cubic-bezier(.25,.8,.25,1);
}

@keyframes bump {
0%   { transform: scale(1); }
40%  { transform: scale(1.12); }
100% { transform: scale(1); }
}

.wordHandle {
position: absolute;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 50%;
background:var(--primarygamecolor);
color: #fff;
text-align: center;
font-size: 18px;
z-index: 1000;
user-select: none;
cursor: grab;

/* ✅ bigger hitbox */
padding: 14px;                 /* expands tappable area */
box-sizing: content-box;       /* keeps the green circle 20x20 */
background-clip: content-box;  /* keeps padding transparent */
-webkit-tap-highlight-color: transparent;
touch-action: none;
}


.wordScoreBadge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primarygamecolor);
  color: #fff;
  font-size: 12px;
  font-weight:bold;
  padding: 2px 6px 2px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
  transition: opacity 220ms ease;
}

.wordScoreBadge svg.audioIcon {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: #fff;
  opacity: 0.85;
}

.wordScoreBadge svg.playing {
  display: none;
}

.wordScoreBadge.speaking svg.idle {
  display: none;
}

.wordScoreBadge.speaking svg.playing {
  display: inline;
}

.wordScoreBadge svg.audioIcon path:not(:first-child) {
  opacity: 0.75;
}

.wordScoreBadge .audioIcon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: -3px;
fill: #fff;
}

.wordScoreBadge .audioIcon.playing { display: none; }

.wordScoreBadge.speaking .audioIcon.idle { display: none; }
.wordScoreBadge.speaking .audioIcon.playing { display: inline-block; }

.wordScoreBadge.loading .audioIcon.idle,
.wordScoreBadge.loading .audioIcon.playing { display: none; }


.wordScoreBadge.bonusBadge {
  color: #3a2a1a;
  background: var(--bonus-gold);
}

/* ---------- MY WORDS (IN STATS PANEL) ---------- */
#statsWords {
  display:flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #eafff6;
}

.myWordContainer {
  padding: 4px 8px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.myWordText {
  color: var(--primarygame-soft);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.myWordCount {
  font-size: 10px;
  font-weight: normal;
  background-color: var(--primarygame-dark);
  border-radius: 4px;
  color: #fff;
  padding: 0 5px;
  display:none;
}

.viewPopularityButton {
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.14);
  border-radius: 8px;
  color: #fff;
  padding: 4px 10px;
  cursor: pointer;
}

/* ---------- LEADERBOARD OVERLAY ---------- */
#leaderboardOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 20;
}

#leaderboardPanel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70%;
  background: linear-gradient(135deg, var(--hud-bg-1), var(--hud-bg-2), var(--hud-bg-3));
  color: #eafff6;
  border-radius: 18px 18px 0 0;
  padding: 12px;
  overflow-y: auto;
}

#leaderboardThanks {
  margin: 6px 4px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
  display: none;
}

.leaderThanksTitle {
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 9px;
  opacity: 0.75;
  margin-bottom: 6px;
}

.leaderThanksList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.leaderThanksItem {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 11px;
}

.leaderShareTag {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.leaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  font-size: 18px;
}

.leaderRow span:nth-child(1) {
  width:40px;
}
.leaderRow span:nth-child(2) {
  width:calc(100% - 160px);
}
.leaderRow span:nth-child(3) {
  width:60px;
}
.leaderRow span:nth-child(3) {
  width:60px;
  text-align:right;
}

.leaderRow img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.leaderScore { font-weight: 800; color:rgb(255, 174, 44); }

/* Dim everything on the board when leaderboard is open */
body.leaderboard-open #gameBoard {
filter: blur(1.5px) brightness(0.85);
transition: filter 180ms ease;
opacity: 0.85;
pointer-events: none;
}


/* Ensure badges are included */
body.leaderboard-open .wordScoreBadge {
opacity: 0.35;
}


#rotatePrompt {
position: fixed;
inset: 0;
background: #111;
color: #fff;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
}

#hintOverlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.85);
z-index: 9999;
touch-action: pan-y;

display: flex;
align-items: center;
justify-content: center;
gap: 12px;

transform: translateY(-100%);
transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}

#hintOverlay.active {
transform: translateY(0);
}

#shareToast {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%) translateY(18px);
background: rgba(20,14,10,0.92);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
padding: 10px 14px;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
z-index: 12000;
}

#shareToast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

#hintOverlay img,
#hintOverlay video {
max-width: 95vw;
max-height: 82vh;
object-fit: contain;
will-change: transform, opacity;
z-index: 0;
}

.hintNav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.35);
color: #fff;
font-size: 26px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
z-index: 2;
opacity: 0.9;
transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.hintNav:hover {
opacity: 1;
background: rgba(0,0,0,0.55);
transform: translateY(-50%) scale(1.05);
}

.hintNav:active {
transform: translateY(-50%) scale(0.98);
}

.hintNavLeft { left: 14px; }
.hintNavRight { right: 14px; }

.hintContent {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 95vw;
max-height: 95vh;
}

.hintMeta {
background: linear-gradient(180deg, var(--tile-grad-top), var(--tile-grad-bottom));
border: 1px solid var(--tile-border);
color: var(--ink-dark);
padding: 8px 14px;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
z-index: 2;
}

.hintImageHidden {
opacity: 0;
transform: translateX(0);
}

.hintImageInLeft {
animation: hintImageInLeft 320ms ease;
}

.hintImageInRight {
animation: hintImageInRight 320ms ease;
}

@keyframes hintImageInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}

@keyframes hintImageInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}

/* ---------- Snapshots ---------- */
#snapshotBar {
display: flex;
align-items: center;
gap: 6px;
z-index: 10;
}

.snapshotBtn {
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.18);
color: #fff;
font-weight: 800;
font-size: 12px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
transition: all 120ms ease;
position: relative;
overflow: hidden;
}

.snapshotBtn::after {
content: '';
position: absolute;
inset: 6px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.55;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 489.493 489.493' fill='white'><path d='M485.322 117.705c12.204-12.238-3.274-47.577-34.636-78.93-30.99-30.99-65.76-46.396-78.401-34.941l-.246-.236-173.715 156.02c-32.117-27.993-80.684-27.038-111.278 3.534-5.149 5.157-8.051 12.146-8.051 19.437 0 7.292 2.901 14.283 8.051 19.431l78.808 78.801L3.902 463.627c-5.148 5.799-5.262 14.655.015 20.601 5.689 6.403 15.497 6.992 21.916 1.294l182.575-162.137 7.84 7.829 40.601 40.603 0 0 30.336 30.329c5.15 5.147 12.139 8.039 19.424 8.039 7.278 0 14.272-2.898 19.419-8.056 30.561-30.573 31.524-79.158 3.539-111.27L484.771 118.03c.156-.138.406-.169.551-.325z'/></svg>");
}

.snapshotBtn.saved::after {
opacity: 0;
}

.snapshotBtn:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.3);
}

.snapshotBtn.saved {
background: var(--primarygamecolor);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 3px 9px var(--primarygame-glow);
}

#captureImageBtn {
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.18);
color: rgba(255,255,255,0.45);
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
transition: all 120ms ease;
justify-self: center;
}

#captureImageBtn svg {
width: 16px;
height: 16px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#captureImageBtn.ready {
background: var(--primarygamecolor);
color: #fff;
border-color: rgba(255,255,255,0.5);
box-shadow: 0 3px 9px var(--primarygame-glow);
cursor: pointer;
}

#captureImageBtn.ready:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.68);
}

#captureImageBtn.busy {
color: #fff;
animation: capturePulse 900ms ease-in-out infinite;
}

#captureImageBtn.used {
opacity: 0.45;
}

@keyframes capturePulse {
0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 14px var(--primarygame-glow); }
}



@media (max-width: 768px) and (orientation: landscape) {
#rotatePrompt {
display: flex;
}

body {
overflow: hidden;
}
}