/* In-game HUD: status line, timer, mistakes, hearts, word input, letter picker, player list, chat, sidebar. */

:root {
  --chat-w: min(360px, 32vw);
  --hearts-space: calc(74px * var(--u));   /* room kept under the counters for the bottom-left hearts */
}
@media (pointer: coarse) { :root { --hearts-space: 0px; } }

.game-ui, .hud { position: absolute; inset: 0; }

/* ================================================================ status line */
.hud-top {
  position: absolute;
  top: calc(10px + var(--sat));
  left: 50%;
  width: min(720px, calc(100% - 2 * var(--chat-w) - 40px));
  margin-left: calc(min(720px, calc(100% - 2 * var(--chat-w) - 40px)) / -2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.status-text { font: 700 calc(30px * var(--u)) / 1.15 var(--font); }
.status-name { color: #ffe45c; }
.status-tiles { display: inline-flex; gap: 6px; }
.tile {
  display: inline-grid;
  place-items: center;
  width: calc(64px * var(--u));
  height: calc(64px * var(--u));
  font: 700 calc(46px * var(--u)) / 1 var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 60%, #e6edf7);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
  animation: tile-pop .45s cubic-bezier(.2, 1.6, .4, 1) both;
  animation-delay: calc(var(--i) * .07s);
}
.status-tiles.small .tile {
  width: calc(44px * var(--u));
  height: calc(44px * var(--u));
  font-size: calc(30px * var(--u));
  border-width: 3px;
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--ink);
}
@keyframes tile-pop { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }
.status-sub { font: 700 calc(17px * var(--u)) / 1.2 var(--font); color: #dff1ff; }

.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; }
.chain-word {
  padding: 3px 9px 2px;
  font: 700 calc(17px * var(--u)) / 1.2 var(--font);
  letter-spacing: .03em;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
}
.chain-word:not(:last-child) { opacity: .82; }
.chain-word .hi { color: var(--good); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; margin-left: .12em; }
.chain-word.new { animation: pop-in .35s ease both; }
.chain-arrow { font: 700 18px / 1 var(--font); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }

/* ================================================================ bottom stack (no transforms: .hearts uses position: fixed) */
.hud-bottom {
  position: absolute;
  left: calc(8px + var(--sal));
  right: calc(8px + var(--sar));
  bottom: calc(max(var(--reserve-center), var(--kb)) + 16px + var(--sab));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.turn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }

.timer { position: relative; flex: none; width: calc(104px * var(--u)); height: calc(104px * var(--u)); }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer-face { fill: #fff; stroke: var(--ink); stroke-width: 5; }
.timer-track { fill: none; stroke: #dde6f2; stroke-width: 8; }
.timer-ring { fill: none; stroke: var(--timer); stroke-width: 8; stroke-linecap: round; transition: stroke .25s; }
.timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 calc(31px * var(--u)) / 1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.timer.urgent { animation: urgent .5s ease-in-out infinite alternate; }
.timer.urgent .timer-ring { stroke: var(--red); }
.timer.urgent .timer-num { color: var(--red-lo); }
@keyframes urgent { to { transform: scale(1.09); } }

.mistakes { display: flex; gap: 6px; }
.mistake {
  position: relative;
  width: calc(36px * var(--u));
  height: calc(36px * var(--u));
  background: radial-gradient(circle at 35% 30%, #ff9a9a, var(--mistake) 55%, #d12a2a);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  transition: filter .25s, opacity .25s;
}
.mistake svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mistake .x-out { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.mistake .x-in { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.mistake .crack { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: 0; }
.mistake.used { filter: grayscale(1) brightness(.8); opacity: .55; }
.mistake.used .crack { opacity: 1; }
.mistake.fresh { animation: crack .5s ease; }
@keyframes crack {
  0% { transform: scale(1.4) rotate(-12deg); filter: none; opacity: 1; }
  40% { transform: scale(1.1) rotate(8deg); }
}

.hearts {
  position: fixed;
  left: calc(14px + var(--sal));
  bottom: calc(14px + var(--sab));
  display: flex;
  align-items: center;
  gap: 2px;
}
.heart { display: inline-block; width: calc(58px * var(--u)); height: calc(58px * var(--u)); color: var(--heart); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .22)); }
.heart .icon { width: 100%; height: 100%; }
.heart.lost { color: #8c95a2; }
.heart.lost .shine { opacity: .25; }
.heart.breaking { animation: heart-break .8s ease; }
@keyframes heart-break {
  0% { transform: scale(1.35); color: var(--heart); }
  25% { transform: scale(1.35) rotate(-16deg); color: var(--heart); }
  55% { transform: scale(.9) rotate(10deg); }
  100% { transform: none; }
}
.out-tag { margin-left: 6px; font: 700 calc(24px * var(--u)) / 1 var(--font); color: #ff6b6b; }
@media (pointer: coarse) {
  .hearts { position: static; }
  .heart { width: calc(44px * var(--u)); height: calc(44px * var(--u)); }
}

/* ================================================================ word input */
.word-form { position: relative; display: flex; gap: 8px; width: min(100%, 470px); animation: pop-in .3s ease both; }
.word-field {
  flex: 1;
  min-width: 0;
  height: calc(66px * var(--u));
  padding: 0 16px;
  font: 700 calc(34px * var(--u)) / 1 var(--font);
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  caret-color: var(--blue);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .07), 0 5px 0 var(--ink);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  transition: background .15s, box-shadow .15s;
}
.word-field::placeholder { color: #b7c0cc; letter-spacing: .12em; }
.word-field:focus { box-shadow: inset 0 4px 0 rgba(0, 0, 0, .07), 0 5px 0 var(--ink), 0 0 0 5px rgba(47, 125, 255, .55); }
.word-form.mismatch .word-field { background: #fff4e5; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .07), 0 5px 0 var(--ink), 0 0 0 5px rgba(255, 154, 31, .75); }
.word-form.ok .word-field { background: #e2ffe7; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .07), 0 5px 0 var(--ink), 0 0 0 5px rgba(61, 220, 84, .8); }
.word-send { flex: none; width: calc(66px * var(--u)); height: calc(66px * var(--u)); min-height: 0; padding: 0; font-size: calc(30px * var(--u)); border-width: 4px; border-radius: 18px; }
@media (pointer: coarse) {
  .word-form:not(:focus-within)::before {
    content: 'Tap to type!';
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    font: 700 18px / 1 var(--font);
    color: #fff;
    -webkit-text-stroke: 5px var(--ink);
    paint-order: stroke fill;
    white-space: nowrap;
    animation: nudge 1s ease-in-out infinite alternate;
  }
}
@keyframes nudge { to { transform: translate(-50%, -5px); } }

/* ================================================================ letter picker */
.picker-row { display: flex; gap: calc(18px * var(--u)); }
.letter-btn {
  position: relative;
  width: calc(96px * var(--u));
  height: calc(96px * var(--u));
  padding: 0;
  font: 700 calc(60px * var(--u)) / 1 var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 55%, #e2eaf6);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 7px 0 var(--ink);
  cursor: pointer;
  animation: tile-pop .45s cubic-bezier(.2, 1.6, .4, 1) both;
  animation-delay: var(--d);
  transition: transform .1s ease, box-shadow .1s ease;
}
.letter-btn:hover:not(:disabled) { transform: translateY(-4px) rotate(-3deg); }
.letter-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.letter-btn.chosen { color: #fff; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; background: linear-gradient(180deg, var(--green-hi), var(--green) 55%, var(--green-lo)); transform: scale(1.1); }
.letter-btn:disabled:not(.chosen) { opacity: .45; cursor: default; }
.letter-key {
  position: absolute;
  top: -12px;
  left: -12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font: 700 16px / 1 var(--font);
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
@media (pointer: coarse) { .letter-key { display: none; } }

/* ================================================================ player list (top-right) */
.plist {
  position: absolute;
  top: calc(10px + var(--sat));
  right: calc(10px + var(--sar));
  width: calc(240px * var(--u));
  overflow: hidden;
  font: 600 15px / 1.2 var(--font);
  background: rgba(16, 22, 32, .55);
  border: 2px solid rgba(0, 0, 0, .55);
  border-radius: 12px;
}
.plist-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  font: 700 15px / 1 var(--font);
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 0;
  cursor: pointer;
}
.plist-title { flex: 1; text-align: left; }
.plist-title::after { content: ' ▾'; font-size: 12px; opacity: .8; }
.plist.collapsed .plist-title::after { content: ' ▸'; }
.plist-count { font-weight: 600; opacity: .75; }
.plist-wins-head { width: 26px; text-align: center; }
.plist-rows { max-height: min(55vh, 600px); overflow-y: auto; }
.plist.collapsed .plist-rows { display: none; }
.plist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transition: background .2s;
}
.plist-row.me { background: rgba(255, 228, 92, .16); }
.plist-row.turn { background: rgba(61, 220, 84, .38); box-shadow: inset 4px 0 0 var(--good); }
.plist-row.out .pl-text { opacity: .55; text-decoration: line-through; }
.plist-row.offline { opacity: .55; }
.pl-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pl-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plist-row.me .pl-text { color: #ffe45c; }
.pl-crown { font-size: 13px; }
.pl-tag { flex: none; padding: 2px 5px 1px; font: 700 10px / 1 var(--font); color: #fff; background: #5b6b80; border-radius: 5px; text-shadow: none; }
.pl-tag.bot { background: #7a5cff; }
.pl-tag.admin { padding:3px 7px; color:#fff9dc; border:1px solid #ffe7a4; background:linear-gradient(120deg,#704ac7,#d2882a,#704ac7); box-shadow:0 0 9px #e7ad69aa; letter-spacing:.05em; }
.pl-hearts { display: inline-flex; }
.pl-heart { width: 17px; height: 17px; color: var(--heart); }
.pl-shield { margin-right: 2px; font-size: 13px; }
.pl-heart.lost { color: #6b7380; }
.pl-heart .icon { width: 100%; height: 100%; }
.pl-out { padding: 2px 6px 1px; font: 700 11px / 1 var(--font); color: #fff; background: var(--red); border-radius: 5px; text-shadow: none; }
.pl-wins { text-align: center; font-weight: 700; }

/* ================================================================ chat (top-left) */
.chat { position: absolute; z-index: 40; top: calc(10px + var(--sat)); left: calc(10px + var(--sal)); width: var(--chat-w); }
.chat-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 22px;
  background: rgba(16, 22, 32, .55);
  border: 2px solid rgba(0, 0, 0, .55);
  border-radius: 12px;
  cursor: pointer;
}
.chat-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  padding: 2px 5px;
  font: 700 12px / 1.2 var(--font);
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.chat-box { display: flex; flex-direction: column; }
.chat-log {
  height: clamp(90px, 23vh, 200px);
  padding: 6px 10px;
  font: 600 15px / 1.35 var(--font);
  background: rgba(16, 22, 32, 0);
  border-radius: 10px 10px 0 0;
  pointer-events: auto;
  transition: background .6s;
}
.chat.awake .chat-log { background: rgba(16, 22, 32, .42); }
.chat-msg {
  color: #fff;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 3px rgba(0, 0, 0, .85);
  paint-order: stroke fill;
  user-select: text;
  -webkit-user-select: text;
  transition: opacity 1.2s;
}
.chat.faded .chat-msg { opacity: 0; }
.chat-name { font-weight: 700; }
.chat-msg.system { color: #ffe27a; }
.chat-msg.system.alert { color: #ff6477; font-weight: 700; text-shadow: 0 1px 4px #320713; }
.chat-input {
  width: 100%;
  padding: 8px 10px;
  font: 600 16px / 1.2 var(--font);
  color: #fff;
  background: rgba(16, 22, 32, .42);
  border: 0;
  border-radius: 0 0 10px 10px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  transition: opacity .6s, background .2s;
}
.chat-input::placeholder { color: rgba(255, 255, 255, .72); }
.chat-input:focus { background: rgba(16, 22, 32, .72); }
.chat:not(.awake) .chat-input:not(:focus) { opacity: .45; }

/* ================================================================ sidebar buttons (left) */
.side {
  position: absolute;
  left: calc(12px + var(--sal));
  top: 50%;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: calc(20px * var(--u)) calc(12px * var(--u));
  transform: translateY(-45%);
}
.side-btn {
  --c: var(--blue); --hi: var(--blue-hi); --lo: var(--blue-lo);
  position: relative;
  display: grid;
  place-items: center;
  width: calc(66px * var(--u));
  height: calc(66px * var(--u));
  padding: 0;
  background: linear-gradient(180deg, var(--hi) 0%, var(--c) 50%, var(--lo) 100%);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.side-btn:hover { filter: brightness(1.08); transform: translateY(-2px) rotate(-2deg); }
.side-btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 var(--ink); }
.side-btn.green  { --c: var(--green);  --hi: var(--green-hi);  --lo: var(--green-lo); }
.side-btn.orange { --c: var(--orange); --hi: var(--orange-hi); --lo: var(--orange-lo); }
.side-btn.purple { --c: var(--purple); --hi: var(--purple-hi); --lo: var(--purple-lo); }
.side-btn.pink   { --c: var(--pink);   --hi: var(--pink-hi);   --lo: var(--pink-lo); }
.side-btn.grey   { --c: var(--grey);   --hi: var(--grey-hi);   --lo: var(--grey-lo); }
.side-face { display: grid; place-items: center; width: 72%; height: 72%; }
.side-face .icon { width: 100%; height: 100%; }
.side-label {
  position: absolute;
  left: 50%;
  bottom: calc(-10px * var(--u));
  transform: translateX(-50%);
  font: 700 calc(14px * var(--u)) / 1 var(--font);
  white-space: nowrap;
}
.side-badge {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 24px;
  padding: 3px 6px 2px;
  font: 700 12px / 1 var(--font);
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  background: var(--grey-lo);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.side-badge.ready { min-width: 26px; font-size: 15px; background: var(--yellow); animation: badge-bounce 1s ease-in-out infinite; }
@keyframes badge-bounce { 50% { transform: translateY(-4px) scale(1.1); } }

/* invite popover */
.invite-pop {
  position: absolute;
  left: calc(100% + 14px);
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 250px;
  padding: 12px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e8f2ff);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
  pointer-events: auto;
}
.invite-pop.pop { animation: pop-in .3s ease both; }
.invite-pop-title { font: 700 20px / 1 var(--font); }
.invite-pop-code { display: flex; gap: 5px; }
.mini-tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  font: 700 26px / 1 var(--font);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--ink);
}
.invite-pop-msg { font: 700 15px / 1.2 var(--font); color: #3a4452; }
.invite-pop-msg.ok { color: var(--green-lo); }
.invite-pop-link {
  max-width: 100%;
  padding: 5px 8px;
  font: 600 13px / 1.3 var(--font);
  color: #34506e;
  background: #fff;
  border: 2px dashed #9fb3c8;
  border-radius: 8px;
  overflow-wrap: anywhere;
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}

/* ================================================================ counters (🏆 / 💵) */
.counters {
  position: absolute;
  left: calc(12px + var(--sal));
  bottom: calc(14px + var(--reserve-side) + var(--hearts-space) + var(--sab));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: calc(128px * var(--u));
  padding: 4px 14px 4px 8px;
  font: 700 calc(22px * var(--u)) / 1.2 var(--font);
  font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--ink);
}
.counter.wins { background: linear-gradient(180deg, #ffe58a, #ffc21a 55%, #e79a00); }
.counter.coins { background: linear-gradient(180deg, #8af296, #3ddc54 55%, #1ea536); }
.counter-icon { font-size: 1.05em; -webkit-text-stroke: 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.counter.bump { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.15) rotate(-3deg); } }

/* ================================================================ compact screens */
@media (max-width: 720px), (max-height: 520px) {
  :root { --chat-w: min(320px, 78vw); }
  .hud-top { left: 0; right: 0; width: auto; margin: 0 auto; padding: 0 64px; }
  .chat-toggle { display: grid; place-items: center; }
  .chat:not(.open) .chat-box { display: none; }
  .chat.open .chat-box { margin-top: 6px; }
  .chat.open .chat-log { background: rgba(16, 22, 32, .6); }
  .plist { width: auto; min-width: 150px; max-width: 220px; }
}
/* Phones in portrait: the status line goes under the top row of buttons. */
@media (max-width: 720px) and (orientation: portrait) {
  .hud-top { top: calc(64px + var(--sat)); padding: 0 10px; }
  .side { top: 40%; }
}
/* Phones in landscape: short screen → 3×2 button grid at the top-left under the chat button. */
@media (max-height: 520px) and (orientation: landscape) {
  .side { top: calc(66px + var(--sat)); transform: none; grid-template-columns: repeat(3, auto); }
  .status-text { font-size: 22px; }
}
/* Touch phones: the bottom-left belongs to the joystick, so the counters move to the top row. */
@media (pointer: coarse) and (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .counters { top: calc(10px + var(--sat)); bottom: auto; left: calc(66px + var(--sal)); flex-direction: row; }
  .counter { min-width: 0; padding: 3px 10px 3px 6px; font-size: 17px; }
  .chat.open .chat-box { margin-top: 12px; }
}
/* Keyboard open on a phone: keep only what matters for typing. */
.kb-open .side, .kb-open .counters { display: none; }