:root {
  font-family: Inter, system-ui, sans-serif;
  color-scheme: dark;
  --bg: #0f1526;
  --panel: #171f35;
  --panel-2: #1e2742;
  --panel-3: #101728;
  --border: #334161;
  --text: #eef3ff;
  --muted: #b7c0dc;
  --accent: #7f90ff;
  --accent-2: #5d71f3;
  --warning: #ffd694;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;padding-top:84px;background:radial-gradient(circle at top,#172342 0%,var(--bg) 38%,#0a1020 100%);color:var(--text)}
a{color:inherit}
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;background:rgb(12 18 34 / 94%);border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgb(0 0 0 / 28%);backdrop-filter:blur(10px)}
.site-title{color:var(--text);font-size:clamp(1.05rem,2.8vw,1.7rem);font-weight:900;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.account-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.account-bar span{color:var(--muted);font-size:.95rem;margin-right:6px}
main{width:min(1200px,calc(100% - 24px));margin:18px auto}
.card{background:linear-gradient(180deg,rgba(32,42,69,.95),rgba(18,25,44,.96));border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 18px 42px rgba(0,0,0,.18)}
.hidden{display:none!important}
label{display:grid;gap:6px;margin:12px 0;color:var(--muted)}
input,select,button,textarea{box-sizing:border-box;width:100%;min-height:46px;border-radius:12px;border:1px solid #45557e;font:inherit;padding:10px 12px}
input,select,textarea{background:var(--panel-3);color:var(--text);outline:none}input::placeholder,textarea::placeholder{color:#95a1c8}
input:focus,select:focus,textarea:focus{border-color:#7f90ff;box-shadow:0 0 0 3px rgba(127,144,255,.18)}
button{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#0b1020;font-weight:800;cursor:pointer;margin:5px 0;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;box-shadow:0 8px 18px rgba(0,0,0,.18)}button:hover{filter:brightness(1.06);transform:translateY(-1px)}button:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.secondary{background:linear-gradient(180deg,#2b3558,#1d2744);color:var(--text)}
.danger{background:linear-gradient(180deg,#f3939b,#d95e68)}
#room > header,.row{display:flex;justify-content:space-between;gap:10px}.row input{flex:1}.row button{width:auto}
#word{text-align:center;font-size:clamp(1.5rem,6vw,3rem);letter-spacing:.08em;padding:25px 5px;white-space:pre-wrap;overflow-wrap:anywhere}
#alphabet{display:grid;grid-template-columns:repeat(auto-fit,minmax(45px,1fr));gap:5px}
.hangman-players-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.hangman-player-card{background:var(--panel-3);border:1px solid #3f4665;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}.hangman-player-card.is-self{border-color:#7b8cff;box-shadow:0 0 0 2px rgb(123 140 255 / 18%)}.hangman-player-card.is-solved{border-color:#66d18f}.hangman-player-card.is-hanged{border-color:#ff8a8a}.hangman-player-card.is-creator{border-color:#e6d37a}
.hangman-player-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.hangman-player-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hangman-player-score{white-space:nowrap;font-weight:700}.hangman-player-image{display:flex;justify-content:center;align-items:center;min-height:175px;background:#efefef;border-radius:10px;padding:6px}.hangman-figure{width:100%;max-width:170px;height:auto;color:#5a5a5a}.sketch{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}.sketch-2{opacity:.55;stroke-width:3.5}.sketch-3{opacity:.32;stroke-width:3}.hangman-player-status{text-align:center;font-weight:650;min-height:22px}#message{margin-top:12px;color:var(--warning)}
@media(max-width:760px){body{padding-top:110px}.site-header{padding:10px 14px;gap:10px;flex-wrap:wrap;justify-content:center}.site-title{width:100%;text-align:center}.account-bar{justify-content:center}main{width:min(100%,calc(100% - 20px))}.hangman-players-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hangman-player-card{padding:8px}.hangman-player-image{min-height:135px}.hangman-figure{max-width:140px}}

.creator-image {
  background: #fff8d9;
}

.creator-card-visual {
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #44412f;
  text-align: center;
}

.creator-card-visual span {
  font-size: 3rem;
  line-height: 1;
}

#alphabet button.letter-correct,
#alphabet button.letter-correct:disabled {
  background: #4fc77a;
  border-color: #75e39a;
  color: #071b0e;
  opacity: 1;
}

#alphabet button.letter-wrong,
#alphabet button.letter-wrong:disabled {
  background: #ee7078;
  border-color: #ff9a9f;
  color: #260608;
  opacity: 1;
}

#alphabet button:disabled:not(.letter-correct):not(.letter-wrong) {
  opacity: .45;
  cursor: not-allowed;
}

.home-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.account-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  max-width: 420px;
}
.account-box span { width: 100%; text-align: right; }
.small-button { width: auto; min-height: 38px; padding: 6px 10px; }
.secondary { background: linear-gradient(180deg, #2b3558, #1d2744); color: var(--text); }
.auth-panel {
  margin: 18px 0;
  padding: 15px;
  background: #171a29;
  border: 1px solid #4b5270;
  border-radius: 12px;
}
.home-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.home-action-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(25,32,55,.96), rgba(19,26,45,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#reservedPasswordWrap small { display: block; margin-top: -5px; color: #ffd694; }
.message { min-height: 24px; color: var(--warning); }
@media (max-width: 700px) {
  .home-title-row { display: grid; }
  .account-box { justify-content: flex-start; max-width: none; }
  .account-box span { text-align: left; }
  .home-game-grid { grid-template-columns: 1fr; }
}


.site-footer {
  width: min(980px, calc(100% - 24px));
  margin: 0 auto 24px;
  padding: 14px 0;
  color: #aeb5d0;
  text-align: center;
  font-size: .92rem;
}

.site-footer p {
  margin: 0;
}


.stats-panel,
.leaderboard-panel {
  margin: 18px 0;
  padding: 16px;
  background: #1b1f31;
  border: 1px solid #444b6b;
  border-radius: 14px;
}

.stats-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stats-heading-row h2 {
  margin: 0;
}

.stats-heading-row .small-button {
  width: auto;
  min-height: 38px;
  margin: 0;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.stat-card {
  background: #131726;
  border: 1px solid #3f4665;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.stat-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-card span {
  color: #c8cceb;
  font-size: .92rem;
}

.leaderboard-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #3b405c;
  text-align: left;
}

.leaderboard-table th:first-child,
.leaderboard-table td:first-child {
  width: 60px;
  text-align: center;
}

.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.leaderboard-table tr.is-current-user td {
  background: rgb(123 140 255 / 12%);
  font-weight: 700;
}


.round-results {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #4b5377;
  border-radius: 14px;
  background: #171b2b;
}
.round-results h2 { margin-top: 0; }
#guesserResults { display: grid; gap: 10px; }
.guesser-result {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid #3f4665;
  border-radius: 10px;
  background: #111522;
}
.guesser-result code {
  grid-column: 1 / -1;
  font-size: 1.05rem;
  white-space: pre-wrap;
  color: #f4f5ff;
}
.guesser-result small { grid-column: 1 / -1; color: #c8cceb; }
#forceFinish { margin: 14px 0; }

.scoring-info {
  margin: 18px 0;
  padding: 16px 18px;
  background: #191d2e;
  border: 1px solid #414866;
  border-radius: 14px;
}

.scoring-info h2 {
  margin: 0 0 10px;
}

.scoring-info ul {
  margin: 0;
  padding-left: 22px;
}

.scoring-info li + li {
  margin-top: 7px;
}

.scoring-info p {
  margin: 12px 0 0;
  color: #cfd5ef;
}


.advanced-settings {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
}
.advanced-settings summary { cursor: pointer; font-weight: 700; }
.advanced-settings-grid { display: grid; gap: .8rem; margin-top: .9rem; }
.checkbox-label { display: flex; align-items: center; gap: .6rem; }
.checkbox-label input { width: auto; }
#wordEntryTimer { margin-bottom: .75rem; font-weight: 700; }

.home-intro p {
  margin: 0;
  font-size: 1.05rem;
}

@media (max-width: 560px) {
  body { padding-top: 64px; }
  .site-header { min-height: 48px; padding-inline: 12px; }
}


.connection-banner {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  width: min(92vw, 720px);
  padding: 10px 14px;
  border-radius: 0 0 12px 12px;
  background: #8a3a16;
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
  font-weight: 700;
}
.connection-lost button,
.connection-lost input,
.connection-lost select {
  pointer-events: none;
}
@media (max-width: 560px) {
  .connection-banner { top: 48px; }
  #room > header { display: grid; gap: 6px; }
  .row { flex-direction: column; }
  .row > * { width: 100%; }
}

.phase-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:1rem 1.2rem;border-radius:16px;background:linear-gradient(135deg,#26304a,#171e31);border:2px solid #596887;color:#fff;box-shadow:0 10px 28px #0004}.phase-banner.hidden{display:none}.phase-banner.is-own-role{background:linear-gradient(135deg,#6d4b12,#3f2b0c);border-color:#ffcf62;box-shadow:0 0 0 4px #ffcf6222,0 12px 30px #0004}.phase-banner.is-action{background:linear-gradient(135deg,#145d3a,#0c3824);border-color:#65dda0}.phase-banner.is-vote{background:linear-gradient(135deg,#6c2d17,#40190d);border-color:#ff9c67}.phase-banner strong{display:block;font-size:clamp(1.15rem,2.4vw,1.65rem)}.phase-banner span{display:block;margin-top:.25rem;color:#e3e8f5}.phase-clock{min-width:90px;text-align:center;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:900;font-variant-numeric:tabular-nums;padding:.35rem .65rem;border-radius:12px;background:#0004}.phase-clock.warning{background:#8a5b00}.phase-clock.danger{background:#9f1d2d;animation:phasePulse .7s infinite alternate}#wordEntry,#game,#vote{border-radius:16px;padding:1rem;border:1px solid rgba(255,255,255,.12)}#game #creator{margin-top:0}.sticky-actions{position:sticky;bottom:.5rem;z-index:20;background:#151a2bdd;padding:.65rem;border-radius:14px;backdrop-filter:blur(8px)}@keyframes phasePulse{from{transform:scale(1)}to{transform:scale(1.06)}}@media(max-width:560px){.phase-banner{position:sticky;top:52px;z-index:22;padding:.75rem .85rem}.phase-clock{min-width:72px}.phase-banner span{font-size:.88rem}#alphabet,#guessControls,#vote button{scroll-margin-bottom:85px}#guessControls{position:sticky;bottom:.5rem;z-index:20;background:#151a2bee;padding:.7rem;border-radius:14px;backdrop-filter:blur(8px)}}

.yatzy-page .home-action-card,.yatzy-page #lobby{background:linear-gradient(180deg,#171f35,#11182a);border-color:#334161}
.yatzy-page #lobby>button,.yatzy-page .home-action-card>button{border-radius:12px}