:root {
  --tg-bg: #061f10;
  --tg-text: #fff7c8;
  --dos-green: #008000;
  --dos-green-dark: #004800;
  --dos-lime: #55ff55;
  --dos-yellow: #ffff55;
  --dos-red: #ff5555;
  --dos-blue: #0000aa;
  --dos-cyan: #55ffff;
  --dos-white: #ffffff;
  --dos-black: #000000;
  --panel: #0000aa;
  --shadow: 6px 6px 0 #000000;
  color-scheme: dark;
  font-family: "Courier New", "Lucida Console", monospace;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  color: var(--tg-text);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    #003f18;
  overscroll-behavior: none;
  user-select: none;
  image-rendering: pixelated;
}

button { font: inherit; }

.app-shell {
  width: min(1040px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.topbar, .actions, .score-board, .players { display: flex; gap: 8px; }

.topbar {
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 8px;
  border: 4px double var(--dos-yellow);
  background: var(--dos-blue);
  box-shadow: var(--shadow);
  padding: 8px 10px;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--dos-cyan);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--dos-yellow);
  font-size: clamp(2rem, 8vw, 4.1rem);
  line-height: .9;
  text-shadow: 3px 3px 0 var(--dos-red), 6px 6px 0 var(--dos-black);
}

.game-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.score-panel, .table, .hand-panel, .rules-dialog form {
  border: 4px double var(--dos-white);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.score-panel { padding: 10px; }
.contract-card { padding: 10px; border: 2px solid var(--dos-cyan); background: #000052; }
.label { color: var(--dos-cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.contract-card strong { display: block; margin: 6px 0; color: var(--dos-yellow); font-size: 1.12rem; text-transform: uppercase; }
.contract-card p { margin: 0; color: var(--dos-white); line-height: 1.35; }

.round-progress { margin: 12px 0; color: var(--dos-yellow); font-weight: 700; }
.progress-track { height: 16px; margin-top: 6px; overflow: hidden; border: 2px solid var(--dos-white); background: var(--dos-black); }
.progress-track span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--dos-lime) 0 8px, #00aa00 8px 16px); transition: width .25s steps(8); }

.score-board { flex-direction: column; }
.score { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px; border: 2px solid #5555ff; background: #000052; color: var(--dos-white); }
.score.active { border-color: var(--dos-yellow); color: var(--dos-yellow); outline: 2px solid var(--dos-red); }
.score small { grid-column: 1 / -1; color: var(--dos-cyan); }

.table {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, #009000 0 43%, #006800 44% 62%, #004800 63%),
    var(--dos-green);
}
.table::before {
  content: "";
  position: absolute;
  inset: 42px 56px 72px;
  border: 6px double #55ff55;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 8px, rgba(255,255,255,.05) 8px 16px);
}
.table::after {
  content: "KING";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,85,.22);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  text-shadow: 4px 4px 0 rgba(0,0,0,.3);
  pointer-events: none;
}

.players { position: absolute; inset: 14px; justify-content: space-between; pointer-events: none; z-index: 2; }
.player { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border: 2px solid var(--dos-white); background: var(--dos-blue); color: var(--dos-white); }
.player b { display: inline-grid; min-width: 24px; min-height: 22px; place-items: center; background: var(--dos-black); color: var(--dos-yellow); }
.player.active { border-color: var(--dos-yellow); color: var(--dos-yellow); }

.trick-area { position: absolute; inset: 96px 40px 90px; display: grid; place-items: center; grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 10px; z-index: 3; }
.status-text { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border: 2px solid var(--dos-yellow); background: var(--dos-black); color: var(--dos-yellow); text-align: center; font-weight: 800; z-index: 4; }

.hand-panel { grid-column: 1 / -1; padding: 10px; background: #000052; }
.actions { margin-bottom: 10px; }
.primary-button, .secondary-button, .ghost-button {
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--dos-white);
  border-radius: 0;
  color: var(--dos-yellow);
  background: var(--dos-blue);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--dos-black);
  text-transform: uppercase;
}
.primary-button:active, .secondary-button:active, .ghost-button:active { transform: translate(3px, 3px); box-shadow: none; }
.secondary-button, .ghost-button { color: var(--dos-cyan); background: #000052; }

.hand { display: flex; justify-content: center; gap: clamp(4px, 1.3vw, 8px); min-height: 126px; overflow-x: auto; padding: 8px 2px 12px; scroll-snap-type: x proximity; }
.card {
  position: relative;
  display: flex;
  flex: 0 0 clamp(58px, 10vw, 78px);
  height: clamp(92px, 16vw, 116px);
  flex-direction: column;
  justify-content: space-between;
  padding: 7px;
  border: 2px solid var(--dos-black);
  border-radius: 0;
  background: #fff8dc;
  color: var(--dos-black);
  box-shadow: 4px 4px 0 rgba(0,0,0,.75);
  scroll-snap-align: center;
  transition: transform .08s steps(2), opacity .08s steps(2);
}
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; pointer-events: none; }
.card::after { content: attr(data-corner); position: absolute; right: 7px; bottom: 4px; transform: rotate(180deg); font-weight: 900; }
.hand-card:not(.disabled):active { transform: translateY(-10px); }
.card strong { align-self: center; font-size: 2.2rem; line-height: 1; }
.card span { font-weight: 950; text-align: left; z-index: 1; }
.card.red { color: #aa0000; }
.card.disabled { opacity: .45; filter: grayscale(1); }
.played-card { pointer-events: none; }

.rules-dialog li { margin: 8px 0; }

@media (max-width: 820px) {
  .app-shell { width: 100%; }
  .game-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(420px, 1fr) auto; }
  .score-panel { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .score-board { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hand-panel { grid-column: auto; position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; }
  .table { min-height: 430px; }
  .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .app-shell { padding-inline: 8px; }
  .topbar { align-items: flex-start; gap: 8px; }
  .topbar-actions { display: grid; grid-template-columns: 1fr; }
  .score-board { grid-template-columns: 1fr 1fr; gap: 6px; }
  .score { padding: 7px; font-size: .86rem; }
  .players { inset: 8px; flex-wrap: wrap; align-content: flex-start; }
  .player { height: 32px; font-size: .82rem; }
  .trick-area { inset: 118px 10px 86px; grid-template-columns: repeat(2, auto); align-content: center; justify-content: center; gap: 10px; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .card { flex-basis: 54px; width: 54px; height: 86px; }
  .played-card { width: 58px; min-width: 58px; height: 92px; }
  .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card strong { font-size: 1.55rem; }
}

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.avatar {
  --avatar-bg: #375a7f;
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--dos-black);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0 18%, transparent 18% 100%),
    var(--avatar-bg);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.18), 2px 2px 0 var(--dos-black);
  image-rendering: pixelated;
}
.avatar > span { filter: saturate(1.25) contrast(1.08); font-size: 1.35rem; line-height: 1; transform: translateY(1px); }
.score-avatar { grid-row: 1 / 3; width: 38px; height: 38px; align-self: center; }
.mini-avatar { width: 30px; height: 30px; }
.mini-avatar > span { font-size: 1.1rem; }

.score { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.score small { grid-column: 2 / -1; }
.score span:not(.avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player span:not(.avatar) { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.played-card {
  width: clamp(58px, 10vw, 78px);
  min-width: clamp(58px, 10vw, 78px);
  justify-self: center;
  align-self: center;
}

.portrait-dialog, .rules-dialog { width: min(720px, calc(100% - 24px)); border: 0; padding: 0; color: var(--dos-white); background: transparent; }
.portrait-dialog::backdrop, .rules-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.portrait-dialog form, .rules-dialog form { max-height: min(86svh, 720px); overflow: auto; padding: 18px; background: var(--dos-blue); color: var(--dos-white); }
.portrait-dialog h2, .rules-dialog h2 { margin-top: 0; color: var(--dos-yellow); text-transform: uppercase; }
.portrait-dialog p, .rules-dialog p, .rules-dialog li { color: var(--dos-white); line-height: 1.35; }
.portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.portrait-choice {
  display: grid;
  gap: 7px;
  justify-items: center;
  min-height: 112px;
  padding: 10px 6px;
  border: 2px solid var(--dos-white);
  background: #000052;
  color: var(--dos-white);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--dos-black);
}
.portrait-choice.selected { color: var(--dos-yellow); border-color: var(--dos-yellow); outline: 2px solid var(--dos-red); }
.portrait-avatar { width: 58px; height: 58px; }
.portrait-avatar > span { font-size: 2.25rem; }
.portrait-choice > span:not(.avatar) { font-size: .84rem; line-height: 1.15; text-align: center; }

.portrait-dialog form { border: 4px double var(--dos-white); box-shadow: var(--shadow); }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; }
  .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table::before { inset: 34px 28px 72px; }
}

@media (max-width: 520px) {
  .app-shell { padding: max(8px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .topbar-actions { display: grid; grid-template-columns: 1fr; width: min(128px, 36vw); }
  .ghost-button { padding-inline: 8px; font-size: .78rem; }
  .table { min-height: 390px; }
  .table::before { inset: 84px 10px 76px; border-width: 4px; }
  .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .portrait-choice { min-height: 102px; }
  .portrait-avatar { width: 50px; height: 50px; }
  .portrait-avatar > span { font-size: 1.9rem; }
  .status-text { font-size: .84rem; padding: 8px; }
  .hand { justify-content: flex-start; min-height: 104px; }
}

.network-dialog { width: min(640px, calc(100% - 24px)); border: 0; padding: 0; color: var(--dos-white); background: transparent; }
.network-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.network-dialog form { max-height: min(86svh, 680px); overflow: auto; padding: 18px; border: 4px double var(--dos-white); background: var(--dos-blue); color: var(--dos-white); box-shadow: var(--shadow); }
.network-dialog h2 { margin-top: 0; color: var(--dos-yellow); text-transform: uppercase; }
.network-dialog p, .network-field, .invite-preview { color: var(--dos-white); line-height: 1.35; }
.network-field { display: block; margin: 14px 0 6px; color: var(--dos-cyan); font-weight: 900; text-transform: uppercase; }
.invite-link { width: 100%; min-height: 40px; padding: 0 10px; border: 2px solid var(--dos-white); background: #000052; color: var(--dos-yellow); font: inherit; font-weight: 900; }
.invite-preview { margin: 12px 0; padding: 10px; border: 2px solid var(--dos-cyan); background: #000052; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

@media (max-width: 520px) {
  .actions { grid-template-columns: 1fr; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
}

.lobby-players {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid #5555ff;
  background: #000052;
  color: var(--dos-white);
}

.lobby-player.muted {
  color: var(--dos-cyan);
}
.lobby-player span { display: grid; gap: 2px; }
.lobby-player small { color: var(--dos-cyan); font-size: .76rem; }
.telegram-avatar { object-fit: cover; }

.compact-invite-link {
  min-height: auto;
  margin: 8px 0 12px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  color: var(--dos-cyan);
  font-size: .78rem;
  text-transform: none;
}

.invite-main-button {
  flex: 1 1 180px;
  min-height: 46px;
}

.copy-link-button {
  flex: 0 1 auto;
  min-height: 34px;
  padding-inline: 10px;
  font-size: .78rem;
}