/* Tokeny z projektu w Figmie („Rzuć Słowem — kolory”). */
:root {
  --bg: #1e2756;
  --bg-2: #2b3886;
  --card: #ffffff;
  --sunken: #eef1fd;
  --line: #d5dbf3;
  --board: #dce2fa;
  --cell: #f4f6fe;

  /* pola premii są celowo blade, żeby płytki z literami wyraźnie się od nich odcinały */
  --dl: #d4ecfb;
  --tl: #b9d3f6;
  --dw: #fbdbe5;
  --tw: #fbc9c4;
  --start: #ffe7a8;
  --dl-ink: #4f8fb8;
  --tl-ink: #2f63b0;
  --dw-ink: #c0587a;
  --tw-ink: #c2453b;
  --start-ink: #a8771a;

  --tile: #fff4d9;
  --tile-edge: #e0b35e;
  --tile-new: #ffe27a;
  --tile-new-edge: #e0a800;
  --tile-text: #3a2a10;

  --yellow: #ffc93c;
  --yellow-edge: #d99a00;
  --yellow-soft: #fff1c2;
  --mint: #2fd08f;
  --violet: #7c5cff;
  --red: #f0525e;

  --text: #1b2140;
  --muted: #6b7398;
  --on-dark: #ffffff;

  --cell-size: 40px;
  --gap: 4px;
  --radius: 24px;
  --shadow-card: 0 18px 40px rgba(18, 23, 56, 0.3);
  --shadow-pop: 0 16px 36px rgba(18, 23, 56, 0.3);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 105% -10%, var(--bg-2) 0 260px, transparent 261px),
    radial-gradient(circle at -8% 105%, var(--bg-2) 0 300px, transparent 301px),
    var(--bg);
  color: var(--text);
  font: 600 15px/1.45 var(--font);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 900; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
p { margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- logo ---------- */
.logo { display: flex; align-items: center; gap: 10px; color: var(--on-dark); user-select: none; }
.logo-mark { position: relative; width: 50px; height: 42px; flex: none; }
.logo-mark i {
  position: absolute; height: 5px; border-radius: 3px; background: var(--yellow);
}
.logo-mark i:nth-child(1) { left: 1px; top: 13px; width: 18px; }
.logo-mark i:nth-child(2) { left: 6px; top: 21px; width: 13px; }
.logo-mark i:nth-child(3) { left: 0; top: 29px; width: 19px; }
.logo-tile {
  position: absolute; left: 16px; top: 4px; width: 33px; height: 35px; border-radius: 8px;
  display: grid; place-items: center; transform: rotate(-12deg);
  background: var(--tile); color: var(--tile-text); box-shadow: 0 3px 0 var(--tile-edge);
  font-weight: 900; font-size: 20px;
}
.logo-text { font-weight: 900; font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.logo-text b { color: var(--yellow); font-weight: 900; }

/* ---------- górny pasek ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; }
.room-info { display: flex; align-items: center; gap: 12px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.sound-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  background: var(--bg-2); color: var(--on-dark);
}
.sound-btn .icon { width: 20px; height: 20px; }
.sound-btn[aria-pressed="true"] .off, .sound-btn[aria-pressed="false"] .on { display: none; }
.sound-btn[aria-pressed="false"] { opacity: .6; }
.room-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  background: var(--bg-2); color: var(--on-dark);
}
.room-label { opacity: .7; font-size: 14px; }
#roomCode { font-weight: 900; letter-spacing: 2px; }

main { flex: 1; min-height: 0; display: flex; }
.topbar, main { position: relative; z-index: 1; }

/* tło ekranu startowego i poczekalni: obrócona plansza z krzyżówką, przyciemniona mocniej za kartą */
.home-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.home-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 95% at 50% 50%, rgb(30 39 86 / .75), rgb(30 39 86 / .55) 55%, rgb(30 39 86 / 0)),
    rgb(30 39 86 / .5);
}
.home-board {
  --cell-size: 56px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  display: grid; grid-template-columns: repeat(31, var(--cell-size)); grid-auto-rows: var(--cell-size);
  gap: 6px; padding: 17px; border-radius: 28px; background: var(--board);
}
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 16px; overflow: auto; }

/* ---------- karty, przyciski, pola ---------- */
.card { background: var(--card); border-radius: var(--radius); }
.form-card {
  width: 100%; max-width: 470px; padding: 32px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 20px 50px rgba(13, 18, 51, 0.35);
}
.btn {
  font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  border-radius: 14px; padding: 11px 22px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--text); box-shadow: 0 4px 0 #c3cbea;
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #c3cbea; }
.btn.primary { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 4px 0 var(--yellow-edge); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--yellow-edge); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 8px; font-weight: 800; font-size: 14px; color: var(--muted); }
.field.row-between { flex-direction: row; }
input, select {
  font: inherit; font-size: 17px; font-weight: 700; color: var(--text); background: var(--sunken);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 16px; width: 100%;
}
select { width: auto; padding: 8px 12px; font-size: 15px; cursor: pointer; }
input::placeholder { color: var(--muted); font-weight: 600; }
input:focus, select:focus, button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.join-row { display: flex; gap: 10px; }
#codeInput { text-transform: uppercase; letter-spacing: .12em; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
.pill { padding: 4px 11px; border-radius: 99px; background: var(--sunken); color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }

/* tytuł z płytek */
.title-tiles { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.title-tiles .tile { width: 70px; height: 76px; font-size: 40px; border-radius: 14px; box-shadow: 0 6px 0 var(--tile-edge); }
.title-tiles .gap { width: 30px; }

/* poczekalnia */
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-radius: 18px; background: var(--yellow-soft); border: 2px solid var(--yellow);
}
.code-label { font-size: 13px; font-weight: 800; color: var(--muted); }
.code-big { font-size: 30px; font-weight: 900; letter-spacing: 4px; }
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.player-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-weight: 700; font-size: 16px; }
.player-list .tag { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 800; }
.player-list li.waiting { border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); padding: 12px 14px; }
.setting { align-items: center; }
.setting-hint { margin: -6px 0 0; font-size: 13px; }

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  color: var(--on-dark); font-weight: 900; font-size: 15px; background: var(--c, var(--mint));
}
.avatar.off { opacity: .4; }

/* ---------- ekran gry ---------- */
.screen.game {
  display: grid; align-items: stretch; justify-content: stretch; gap: 24px; padding: 0 28px 28px;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.board-area { position: relative; min-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--board); }
/* flex + margin:auto środkuje planszę mniejszą od okna, a większej nie ucina */
.board-viewport { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; cursor: grab; }
.board-viewport::-webkit-scrollbar { display: none; }
.board-viewport.panning, .board-viewport.panning * { cursor: grabbing !important; user-select: none; }
.board {
  display: grid; gap: var(--gap); width: max-content; height: max-content; margin: auto; padding: 90px 60px 170px;
  grid-template-columns: repeat(var(--size, 31), var(--cell-size));
  grid-auto-rows: var(--cell-size);
}
.cell {
  position: relative; border-radius: 8px; background: var(--cell);
  display: grid; place-items: center; font-size: calc(var(--cell-size) * .32); font-weight: 900;
  color: var(--on-dark); user-select: none;
}
.cell.DL { background: var(--dl); color: var(--dl-ink); }
.cell.TL { background: var(--tl); color: var(--tl-ink); }
.cell.DW { background: var(--dw); color: var(--dw-ink); }
.cell.TW { background: var(--tw); color: var(--tw-ink); }
/* pole, na którym inny gracz właśnie układa płytkę */
.cell.draft::after {
  content: attr(data-who); position: absolute; inset: 2px; border-radius: 7px;
  display: grid; place-items: center; font-size: calc(var(--cell-size) * .34); font-weight: 900; color: #fff;
  background: color-mix(in srgb, var(--c) 55%, transparent); border: 2px dashed var(--c);
  animation: draft-pulse 1.4s ease-in-out infinite;
}
@keyframes draft-pulse { 50% { opacity: .55; } }
.cell.START { background: var(--start); color: var(--start-ink); font-size: calc(var(--cell-size) * .5); }
.cell.drop-target { outline: 3px solid var(--violet); outline-offset: -1px; }
.cell.can-place:hover { outline: 2px dashed var(--violet); outline-offset: -2px; cursor: pointer; }

.tile {
  position: relative; display: grid; place-items: center; border-radius: 8px;
  background: var(--tint, var(--tile)); color: var(--tile-text); box-shadow: 0 3px 0 var(--edge, var(--tile-edge));
  font-weight: 900; user-select: none; -webkit-user-select: none;
}
.tile .pts { position: absolute; right: 4px; bottom: 1px; font-size: .4em; font-weight: 800; }
.tile.blank .letter { opacity: .55; }
.cell > .tile { position: absolute; inset: 0 0 3px; font-size: calc(var(--cell-size) * .55); }
/* płytka na polu premii: odcień premii, punkty po przemnożeniu */
.tile.on-DL { --tint: #a6dcf9; --edge: #5aa9d6; --tag: #1e5f8a; }
.tile.on-TL { --tint: #78acf0; --edge: #2463b8; --tag: #10316b; }
.tile.on-DW { --tint: #ffb6cb; --edge: #e0708f; --tag: #8f2448; }
.tile.on-TW { --tint: #ff958c; --edge: #d9443a; --tag: #7d1710; }
.tile .bonus-tag {
  position: absolute; left: 4px; top: 2px; font-size: .32em; font-weight: 900; line-height: 1;
  color: var(--tag, var(--tile-text)); letter-spacing: -.02em;
}
/* etykieta skaluje się z polem; przy dużym oddaleniu byłaby nieczytelna, więc znika */
.cell > .tile .bonus-tag { font-size: calc(var(--cell-size) * .22); left: calc(var(--cell-size) * .08); top: calc(var(--cell-size) * .05); }
.board.compact .tile .bonus-tag { display: none; }
.tile.multiplied .pts { font-weight: 900; }
/* ostatnio zagrane litery: miętowa ramka na obrysie całej płytki (razem z dolnym brzegiem) */
.tile.last::after {
  content: ""; position: absolute; inset: -2px -2px -5px; border-radius: 10px;
  border: 2.5px solid var(--mint); pointer-events: none;
}
/* słowo wskazane w liście zagrań */
.tile.hl {
  z-index: 2; transform: translateY(-3px);
  box-shadow: 0 3px 0 var(--edge, var(--tile-edge)), 0 0 0 3px var(--yellow), 0 6px 18px 2px rgba(255, 201, 60, .7);
  transition: transform .12s, box-shadow .12s;
}
.tile.hl.last::after { border-color: var(--yellow); }
.tile.fresh { animation: tile-land .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tile-land {
  0% { transform: translateY(-10px) scale(1.15); }
  100% { transform: none; }
}
.tile.pending {
  background: var(--tint, var(--tile-new)); box-shadow: 0 4px 0 var(--edge, var(--tile-new-edge)), 0 9px 12px rgba(27, 33, 64, .35);
  transform: translateY(-2px); cursor: grab; touch-action: none; z-index: 1;
}
.tile.pending.valid { box-shadow: 0 4px 0 #1fa36f, 0 6px 16px 2px rgba(47, 208, 143, .6); }
.tile.pending.invalid { box-shadow: 0 4px 0 #c93844, 0 6px 16px 2px rgba(240, 82, 94, .6); }
/* pasek tury */
.turn-wrap {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pass-btn {
  pointer-events: auto; font: inherit; font-weight: 800; font-size: 14px; color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; border: none;
  background: var(--card); box-shadow: 0 3px 0 #c3cbea, 0 8px 18px rgba(18, 23, 56, .2);
}
.pass-btn .icon { width: 16px; height: 16px; }
.final-note {
  padding: 5px 14px; border-radius: 99px; background: var(--red); color: #fff; font-size: 14px; font-weight: 900;
  box-shadow: 0 3px 0 #c93844, 0 8px 18px rgba(18, 23, 56, .25);
}
.turn-banner.final.mine { background: #ff8a7a; box-shadow: 0 4px 0 #c93844, 0 0 26px 4px rgba(240, 82, 94, .5); }

/* duży komunikat na środku ekranu, gdy zaczyna się twoja tura */
.turn-notice {
  position: fixed; left: 50%; top: 42%; z-index: 150; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.6); padding: 18px 36px; border-radius: 28px;
  background: var(--yellow); color: var(--text); font-size: 44px; font-weight: 900; white-space: nowrap;
  box-shadow: 0 8px 0 var(--yellow-edge), 0 0 60px 10px rgba(255, 201, 60, .55);
}
.turn-notice.show { animation: turn-pop 1.8s ease-out forwards; }
@keyframes turn-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  25% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.95); }
}

/* worek: litery, których gracz jeszcze nie widział */
.bag-btn { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
.bag-btn .icon { width: 15px; height: 15px; }
.bag-btn:hover, .bag-btn[aria-expanded="true"] { background: var(--yellow-soft); color: var(--text); box-shadow: inset 0 0 0 2px var(--yellow); }
.bag-pop {
  position: fixed; z-index: 60; width: min(560px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 24px;
  background: var(--card); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 14px;
}
.bag-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bag-title { font-size: 20px; color: var(--text); text-transform: none; letter-spacing: 0; }
.bag-stats { display: flex; gap: 6px; }
.bag-stats .pill b { color: var(--text); font-weight: 900; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 10px 8px; }
.bag-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; }
.bag-item .tile { width: 40px; height: 40px; font-size: 22px; }
.bag-item.gone .tile { opacity: .3; }
.bag-item.gone .count { color: var(--muted); }
.pass-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c3cbea; }
.turn-banner {
  display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 99px;
  background: var(--card); box-shadow: 0 4px 0 #c3cbea, var(--shadow-card); white-space: nowrap; font-weight: 900; font-size: 18px;
}
.turn-banner.mine { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-edge), 0 0 26px 4px rgba(255, 201, 60, .55); }
.turn-banner.urgent .turn-time, .turn-banner.urgent .ring-left { color: var(--red); stroke: var(--red); }
.turn-avatar { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.turn-avatar .avatar { width: 32px; height: 32px; font-size: 14px; border: 2.5px solid var(--card); }
.turn-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.turn-ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: rgba(27, 33, 64, .15); }
.ring-left { stroke: var(--text); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.turn-time { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.turn-time .icon { width: 20px; height: 20px; }
.turn-sep { width: 2px; height: 22px; border-radius: 1px; background: rgba(27, 33, 64, .2); margin-right: 6px; }

/* pływająca karta ze stojakiem */
.dock-wrap {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  pointer-events: none;
}
.dock {
  pointer-events: auto; display: flex; align-items: stretch; gap: 12px; padding: 12px; border-radius: 26px;
  background: var(--card); box-shadow: var(--shadow-card); max-width: 100%;
}
/* komunikat o ruchu nad kartą: pełny tekst, bez zmieniania rozmiaru przycisku */
.move-msg {
  display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 16px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow-card); font-size: 15px; font-weight: 800; text-align: center;
}
.move-msg::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.move-msg.good { box-shadow: inset 0 0 0 2px var(--mint), var(--shadow-card); }
.move-msg.good::before { background: var(--mint); }
.move-msg.bad { box-shadow: inset 0 0 0 2px var(--red), var(--shadow-card); color: #b3263a; }
.move-msg.bad::before { background: var(--red); }
.move-msg .score { color: var(--muted); }
.vbtn, .ibtn {
  font: inherit; color: var(--text); cursor: pointer; border: none; background: var(--sunken);
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.vbtn { flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 18px; font-size: 13px; font-weight: 800; width: 80px; flex: none; }
.vbtn.active { background: var(--yellow-soft); box-shadow: inset 0 0 0 2px var(--yellow); }
.icon-stack { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ibtn { width: 44px; height: 40px; border-radius: 12px; }
.vbtn:hover:not(:disabled), .ibtn:hover:not(:disabled) { filter: brightness(.96); }
.vbtn:disabled, .ibtn:disabled { opacity: .45; cursor: not-allowed; }
.rack {
  display: flex; gap: 8px; padding: 10px 12px 14px; border-radius: 18px; background: var(--sunken);
}
.rack .tile, .rack .slot { width: 56px; height: 60px; border-radius: 12px; flex: none; }
.rack .tile { font-size: 30px; box-shadow: 0 4px 0 var(--tile-edge); cursor: grab; touch-action: none; }
.rack .tile .pts { font-size: 12px; right: 5px; bottom: 3px; }
/* outline rysuje się nad dolnym brzegiem płytki (box-shadow chował się pod nim) */
.rack .tile.selected { transform: translateY(-6px); outline: 3px solid var(--violet); outline-offset: 2px; }
/* ramka wewnątrz płytki — dokładnie w jej kształcie */
.rack .tile.marked {
  transform: translateY(-6px); background: #ffe1e4;
  box-shadow: inset 0 0 0 3px var(--red), 0 4px 0 #c93844;
}
.rack .slot { border: 2px dashed var(--line); }
.rack.drop-target { box-shadow: inset 0 0 0 3px var(--violet); }
.play-btn {
  font: inherit; color: var(--text); cursor: pointer; border: none; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 160px; flex: none; padding: 10px 12px; border-radius: 18px;
  background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-edge);
}
.play-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--yellow-edge); }
.play-btn:disabled { background: var(--sunken); box-shadow: none; cursor: default; color: var(--muted); }
.play-label { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 900; }
.play-label .icon { width: 20px; height: 20px; }
.play-sub { font-size: 13px; font-weight: 800; opacity: .75; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-sub.bad { color: var(--red); opacity: 1; }

.ghost-tile {
  position: fixed; z-index: 100; pointer-events: none; width: 56px; height: 60px; font-size: 30px; border-radius: 12px;
  transform: translate(-50%, -60%) rotate(-6deg); box-shadow: 0 4px 0 var(--tile-edge), 0 14px 24px rgba(0, 0, 0, .3);
}
.ghost-tile .pts { font-size: 12px; }

/* panel boczny */
.sidebar { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.side-card { padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px; }
.side-head.column { flex-direction: column; align-items: flex-start; gap: 2px; }
.hint { font-size: 12px; color: var(--muted); }
.scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.scores li { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 14px; font-size: 16px; font-weight: 700; }
.scores li.current { background: var(--yellow-soft); box-shadow: inset 0 0 0 2px var(--yellow); }
.scores .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores .score { font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.plays-card { flex: 1; min-height: 0; }
.plays { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.plays li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; }
.plays li.latest { background: var(--sunken); }
.plays .avatar { width: 30px; height: 30px; font-size: 13px; }
.plays .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plays .who { font-size: 12px; font-weight: 700; color: var(--muted); }
.plays .words { display: flex; flex-wrap: wrap; gap: 6px; }
.plays .note { font-size: 14px; color: var(--muted); font-weight: 700; }
.plays .pts { font-weight: 900; font-size: 16px; color: var(--muted); }
.plays li.latest .pts { color: var(--text); }
.word-chip {
  font: inherit; font-weight: 900; font-size: 15px; color: var(--text); cursor: help;
  padding: 2px 9px; border-radius: 8px; background: var(--card); border: 1.5px solid var(--line);
}
.word-chip:hover, .word-chip.open { background: var(--yellow-soft); border-color: var(--yellow); }
.plays .empty { color: var(--muted); font-size: 14px; padding: 8px 4px; }

/* dymek z definicją */
.def-pop {
  position: fixed; z-index: 50; width: 300px; padding: 16px 18px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 10px;
}
.def-pop .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.def-pop .word { font-size: 24px; font-weight: 900; }
.def-pop .pos { padding: 3px 10px; border-radius: 99px; background: var(--sunken); color: var(--muted); font-size: 12px; font-weight: 800; }
.def-pop ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.def-pop ol li::marker { font-weight: 900; color: var(--muted); }
.def-pop .foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); font-weight: 700; }
.def-pop a { color: var(--text); font-weight: 800; text-decoration: none; }
.def-pop a:hover { text-decoration: underline; }
.def-pop .state { color: var(--muted); font-size: 14px; }
.def-pop .lemma { margin: -4px 0 0; color: var(--muted); font-size: 14px; }
.def-pop .lemma strong { color: var(--text); }

/* okna dialogowe */
dialog {
  border: none; border-radius: var(--radius); background: var(--card); color: var(--text);
  padding: 24px; width: min(92vw, 400px); box-shadow: var(--shadow-card);
}
dialog::backdrop { background: rgba(13, 18, 51, .6); }
dialog h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 20px; }
dialog .btn.wide { margin-top: 12px; }
.letter-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 14px; }
.letter-grid .tile { height: 40px; font-size: 20px; cursor: pointer; border: none; font-family: inherit; }
.results { padding-left: 24px; margin: 14px 0; display: flex; flex-direction: column; gap: 6px; font-size: 17px; font-weight: 700; }
.results .win { font-weight: 900; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--on-dark); padding: 11px 18px; border-radius: 14px; font-weight: 800;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .topbar { padding: 12px 16px; }
  .logo-text { font-size: 18px; }
  .room-label, #copyLink { display: none; }
  main { display: block; }
  .screen { padding: 8px 16px 24px; gap: 24px; justify-content: flex-start; }
  .form-card { padding: 24px 20px; }
  .title-tiles { gap: 6px; }
  .title-tiles .tile { width: 40px; height: 44px; font-size: 24px; border-radius: 9px; box-shadow: 0 4px 0 var(--tile-edge); }
  .title-tiles .gap { width: 100%; height: 0; }
  .home-board { --cell-size: 40px; gap: 4px; padding: 12px; }
  .screen.game { display: flex; flex-direction: column; align-items: stretch; padding: 0 16px 16px; gap: 12px; overflow: visible; }
  .board-area { height: calc(100dvh - 90px); min-height: 460px; flex: none; }
  .board { padding: 76px 30px 150px; }
  .turn-wrap { top: 10px; gap: 8px; }
  .turn-banner { font-size: 15px; gap: 8px; }
  .turn-avatar { width: 38px; height: 38px; }
  .turn-avatar .avatar { width: 28px; height: 28px; }
  .dock-wrap { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; gap: 8px; }
  .dock { width: 100%; padding: 8px; gap: 6px; flex-wrap: wrap; justify-content: center; border-radius: 20px; }
  .move-msg { font-size: 13px; padding: 6px 12px; }
  .rack { order: -1; width: 100%; justify-content: center; gap: 5px; padding: 8px; }
  .rack .tile, .rack .slot, .ghost-tile { width: 40px; height: 44px; font-size: 22px; border-radius: 9px; }
  .rack .tile .pts, .ghost-tile .pts { font-size: 10px; right: 3px; bottom: 2px; }
  .vbtn { width: 104px; flex-direction: row; padding: 8px 10px; }
  .icon-stack { flex-direction: row; }
  .play-btn { flex: 1; width: auto; min-width: 0; padding: 8px 14px; }
  .play-label { font-size: 17px; }
  .sidebar { min-height: auto; }
  .plays-card { max-height: 420px; }
  .def-pop { width: min(300px, calc(100vw - 32px)); }
  .turn-notice { font-size: 30px; padding: 14px 26px; }
  .sound-btn { width: 36px; height: 36px; }
}