.screen {
  background: var(--panel);
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  padding: 18px;
  min-height: 380px;
  position: relative;
}
.eject-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 6px 8px;
}
.dialog {
  border: 3px solid #000;
  background: #101020;
  padding: 12px;
  margin: 12px 0;
  min-height: 48px;
}
.dialog .who { color: var(--accent); font-weight: bold; }
.standings { list-style: none; padding: 0; }
.standings li { border: 2px solid #000; padding: 8px; margin: 6px 0; background: #101020; }
.standings li.me { border-color: var(--accent); }
.hand { display: flex; gap: 10px; flex-wrap: wrap; }
.card {
  border: 3px solid #000; background: #223; padding: 12px; min-width: 84px;
  text-align: center; cursor: pointer; color: #fff; font-family: inherit;
}
.card .emoji { font-size: 26px; display: block; }
.card:disabled, .card.used { opacity: 0.4; cursor: not-allowed; }
/* ---- Серп: dieselpunk board-game presentation ---- */
.screen.serp {
  position: relative; overflow: hidden; min-height: 470px; padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
}
.screen.serp .eject-btn { z-index: 3; font-family: inherit; }
.serp-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.serp-overlay {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: space-between; min-height: 470px; padding: 16px; gap: 12px;
}
.serp-top { display: flex; flex-direction: column; gap: 10px; padding-right: 84px; }
.serp-title {
  font-size: clamp(30px, 7vw, 52px); font-weight: 800; letter-spacing: 8px; line-height: 1;
  color: #e8c98a; text-shadow: 2px 2px 0 #000, 0 0 16px rgba(201, 162, 74, 0.5);
}
.serp-sub { color: #d8c6a0; letter-spacing: 2px; font-size: 12px; margin-top: 5px; font-style: italic; }
.serp-factions { display: flex; gap: 8px; flex-wrap: wrap; }
.serp-crest {
  display: flex; align-items: center; gap: 6px;
  background: rgba(20, 16, 12, 0.66); border: 2px solid #6b5a2f; border-top: 3px solid var(--fc);
  padding: 5px 8px;
}
.serp-crest-img { line-height: 0; }
.serp-crest-txt { line-height: 1.15; }
.serp-leader { color: #f0e4c4; font-weight: bold; font-size: 13px; }
.serp-fname { color: #c7b58c; font-size: 11px; }
.serp-mat {
  background: linear-gradient(#e9dcc0, #d8c7a2);
  border: 3px solid #6b4f2a; border-radius: 6px;
  box-shadow: 0 0 0 2px #2a2013, 0 10px 24px rgba(0, 0, 0, 0.55); padding: 12px 14px;
  color: #3a2c17;
}
.serp-mat-h { color: #4a3720; letter-spacing: 1px; margin-bottom: 10px; font-weight: bold; }
.serp-mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.serp-col {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: linear-gradient(#f3e8ce, #e2d2ac); border: 2px solid #8a6c3c; border-radius: 4px;
  padding: 8px; cursor: pointer; font-family: inherit; color: #3a2c17;
  transition: transform 0.08s, box-shadow 0.1s, border-color 0.1s;
}
.serp-col:hover { transform: translateY(-3px); border-color: #b9863a; box-shadow: 0 6px 16px rgba(120, 80, 20, 0.4); }
.serp-col-top { display: flex; align-items: center; gap: 6px; }
.serp-col-ico { line-height: 0; }
.serp-col-lbl { flex: 1; font-size: 13px; letter-spacing: 0.5px; font-weight: bold; }
.serp-col-pts { color: #9a6b1c; font-weight: bold; font-size: 13px; }
.serp-col-div { height: 2px; background: repeating-linear-gradient(90deg, #8a6c3c 0 6px, transparent 6px 10px); }
.serp-col-bot { display: flex; align-items: center; gap: 6px; opacity: 0.9; }
.serp-col-bico { line-height: 0; }
.serp-col-blbl { font-size: 12px; font-style: italic; }
.serp-col.used {
  position: relative; cursor: not-allowed; opacity: 0.55; filter: grayscale(0.5);
  border-color: #6b5330; box-shadow: none;
}
.serp-col.used:hover { transform: none; border-color: #6b5330; box-shadow: none; }
.serp-col-used {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;
  color: #f3e8ce; background: rgba(40, 28, 12, 0.55); border-radius: 4px;
}
@media (max-width: 560px) {
  .serp-mat-grid { grid-template-columns: repeat(2, 1fr); }
}
.serp-results {
  background: rgba(14, 10, 6, 0.84); border: 3px solid #6b5a2f; box-shadow: 0 0 0 1px #000; padding: 14px;
}
.serp-results-h { text-align: center; color: #e8c98a; letter-spacing: 6px; font-size: 20px; margin-bottom: 10px; text-shadow: 1px 1px 0 #000; }
.serp-medallion {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: rgba(122, 34, 34, 0.4); border: 1px solid #b23b3b; color: #f3dcc0; padding: 6px 10px; margin-bottom: 12px;
}
.serp-rank { display: flex; flex-direction: column; gap: 6px; }
.serp-rankrow {
  display: flex; align-items: center; gap: 10px;
  background: rgba(30, 24, 16, 0.7); border: 2px solid #4a3f24; padding: 6px 10px;
}
.serp-rankrow.win { border-color: #c9a24a; box-shadow: inset 0 0 0 1px #c9a24a; background: rgba(60, 48, 20, 0.6); }
.serp-rankrow.me .serp-rank-name { color: #ffe9a8; }
.serp-place { width: 22px; text-align: center; font-size: 18px; font-weight: bold; color: #c9a24a; }
.serp-rank-txt { flex: 1; }
.serp-rank-name { color: #f0e4c4; font-size: 14px; }
.serp-complaint { color: #cc8877; font-size: 12px; font-style: italic; }
.serp-score { font-size: 20px; font-weight: bold; color: #e8d9b3; width: 40px; text-align: right; }
.serp-medal { width: 24px; font-size: 18px; text-align: center; }
.serp-again {
  font-family: inherit; margin-top: 12px; background: linear-gradient(#33291c, #241c12);
  border: 2px solid #7a6636; color: #f0e4c4; padding: 10px 16px; cursor: pointer; letter-spacing: 1px;
}
.serp-again:hover { border-color: #c9a24a; }

/* ---- Взрывные котята layout ---- */
.kittens .opponents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.player-panel {
  border: 3px solid #000; background: #14141f; padding: 8px; margin: 6px 0;
}
.player-panel.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.player-panel.me { background: #16221a; }
.player-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.player-name { font-weight: bold; font-size: 13px; }
.defuse-badge { font-size: 12px; background: #000; border: 2px solid #333; padding: 1px 5px; }
.hand { display: flex; gap: 6px; flex-wrap: wrap; }
.gcard {
  position: relative;
  width: 60px; height: 86px;
  border: 3px solid #000; border-radius: 6px;
  background: linear-gradient(#f3ead0, #ddd0a8);
  overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: transform 0.12s;
}
/* Ilya's own cards are larger and legible; hover pops a big preview above. */
.player-panel.me .gcard { width: 84px; height: 120px; }
/* Small lift only (keeps hitbox width, so neighbours stay hoverable). The big
   readable version is the floating .card-preview below. */
.gcard:not(.back):hover {
  transform: translateY(-8px);
  z-index: 5;
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}
/* Hearthstone-style floating preview — never intercepts the mouse. */
.card-preview {
  position: fixed; z-index: 300; pointer-events: none;
  border: 3px solid var(--accent); border-radius: 8px; overflow: hidden;
  background: linear-gradient(#f3ead0, #ddd0a8);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center;
}
.card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.gcard.has-img .gcard-img { display: block; }
.gcard.has-img .gcard-name { display: none; }
.gcard-name { font-size: 8px; font-weight: 900; color: #20140a; padding: 2px; line-height: 1.15; text-transform: uppercase; word-break: break-word; hyphens: auto; }
.gcard.back {
  background: repeating-linear-gradient(45deg, #6a1030 0 7px, #8a1a44 7px 14px);
  border-color: #000;
}
.gcard.back .back-mark { font-size: 22px; filter: grayscale(0.2) brightness(1.1); }
.gcard.selectable, .gcard.clickable { cursor: pointer; }
/* Face-down cards only get a small lift on hover; face-up cards zoom (above). */
.gcard.back.selectable:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* Steal animation: card slides out and flips face-down -> face-up, then flies. */
.steal-fly {
  position: fixed; z-index: 200; perspective: 800px; pointer-events: none;
  transition: transform 0.55s ease-in, opacity 0.55s ease-in;
}
.steal-fly.lift { transform: translateY(-16px) scale(1.15); }
.steal-fly .flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.7s;
}
.steal-fly.revealed .flip { transform: rotateY(0deg); }
.steal-fly .face, .steal-fly .back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: 3px solid #000; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}
.steal-fly .face { background: linear-gradient(#f3ead0, #ddd0a8); }
.steal-fly .face img { width: 100%; height: 100%; object-fit: cover; }
.steal-fly .back {
  transform: rotateY(180deg); color: #fff; font-size: 22px;
  background: repeating-linear-gradient(45deg, #6a1030 0 7px, #8a1a44 7px 14px);
}
.kittens .table { display: flex; gap: 12px; align-items: stretch; margin: 10px 0; }
.deck-pile {
  width: 62px; height: 88px; border: 3px solid #000; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #6a1030 0 8px, #8a1a44 8px 16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: 26px;
}
.deck-label { font-size: 9px; letter-spacing: 1px; margin-top: 2px; }
.table-info { flex: 1; }
.future-preview {
  border: 3px solid var(--accent); background: #14141f; padding: 10px; margin: 4px 0 10px;
}
.future-cap { font-weight: bold; color: var(--accent); margin-bottom: 8px; }
.future-note { margin-top: 8px; font-size: 12px; color: #e3a; }
.nope-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px; border: 3px dashed var(--red); background: #2a1214;
  animation: nope-pulse 0.7s infinite;
}
.nope-info { display: flex; flex-direction: column; gap: 8px; }
.nope-cap { color: var(--red); font-weight: bold; }
.nope-btn {
  position: relative; overflow: hidden;
  background: var(--red); color: #fff; align-self: flex-start;
}
/* Timer fill: sweeps across over the 5s window. When full, time is up. */
.nope-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(0, 0, 0, 0.42);
  border-right: 2px solid rgba(0, 0, 0, 0.7);
  animation: nope-fill 5s linear forwards;
  z-index: 0;
}
.nope-btn-label { position: relative; z-index: 1; }
@keyframes nope-fill { from { width: 0; } to { width: 100%; } }
@keyframes nope-pulse { 50% { box-shadow: 0 0 14px var(--red); } }
.log { margin-top: 6px; font-size: 11px; color: #9fb3c8; }
.log-line { padding: 1px 0; }
/* ---- Цивилизация: 4X-style world loading screen ---- */
.screen.civ {
  color: #e9e4cf;
  overflow: hidden;
  background:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 10%, #163862 0%, #0a1020 72%);
}
.civ-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.civ-globe {
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 0 10px #4aa3ff);
  animation: civ-spin 6s linear infinite;
}
@keyframes civ-spin { to { transform: rotate(360deg); } }
.civ-title {
  font-size: clamp(22px, 6vw, 40px); font-weight: 900; letter-spacing: 4px;
  color: #f2d47a; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(242, 212, 122, 0.5);
}
.civ-phase {
  color: #9fc3ff; letter-spacing: 2px; font-size: 13px; margin-top: 4px;
  animation: civ-blink 1.1s steps(1) infinite;
}
@keyframes civ-blink { 50% { opacity: 0.35; } }
.civ-rows { display: flex; flex-direction: column; gap: 8px; }
.civ-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.3); border: 2px solid #2a3a5a; padding: 6px 8px; border-radius: 4px;
}
.civ-emoji { font-size: 24px; width: 28px; text-align: center; }
.civ-names { width: 150px; display: flex; flex-direction: column; line-height: 1.15; }
.civ-leader { font-weight: bold; }
.civ-name { font-size: 11px; color: #9fb3d8; }
.civ-bar {
  flex: 1; height: 14px; border: 2px solid #000; background: #050912;
  border-radius: 3px; overflow: hidden;
}
.civ-bar.big { height: 18px; }
.civ-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(#5aa0ff, #2e6fd0); transition: width 0.1s linear;
}
.civ-fill.fail { background: linear-gradient(#e3453a, #a1231a); }
.civ-status { width: 60px; text-align: right; font-size: 12px; }
.civ-status.ok { color: var(--green); font-weight: bold; }
.civ-status.err { color: var(--red); font-weight: bold; }
.civ-overall { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.civ-overall-label { font-size: 12px; letter-spacing: 1px; color: #cfe0ff; width: 130px; }
.civ-tip { text-align: center; color: #c8b98a; font-style: italic; font-size: 12px; min-height: 18px; }
.civ-footer { margin-top: 12px; }
.civ-footer .who { color: var(--accent); font-weight: bold; }
.civ-failmsg {
  color: var(--red); font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  margin-top: 10px; font-size: clamp(16px, 4vw, 24px);
  text-shadow: 0 0 10px rgba(227, 69, 58, 0.5);
}
/* ---- Майнкрафт: first-person blocky house ---- */
.screen.mc { background: #101418; }
.mc-banner {
  border: 3px solid #000; background: #0e0e12; color: #e8e8f0;
  padding: 8px 10px; margin-bottom: 10px; font-size: 13px;
}
.mc-view { position: relative; max-width: 560px; margin: 0 auto; line-height: 0; }
.mc-gl {
  width: 100%; display: block; border: 3px solid #000; background: #6db3e6; cursor: pointer;
}
.mc-crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 3px 14px no-repeat,
    linear-gradient(#fff, #fff) center / 14px 3px no-repeat;
  mix-blend-mode: difference; opacity: 0.85;
}
.mc-hotbar {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; background: rgba(0, 0, 0, 0.45);
  border: 2px solid #1a1a1a;
}
.mc-slot {
  width: 26px; height: 26px; background: #8b8b8b;
  border: 2px solid #373737; box-shadow: inset 1px 1px 0 #c6c6c6;
  display: flex; align-items: center; justify-content: center;
}
.mc-slot.sel { border-color: #fff; box-shadow: 0 0 0 2px #fff; }
.mc-cake-icon {
  width: 16px; height: 13px; background: #f2ede0; position: relative;
  border: 1px solid #7a2b22;
}
.mc-cake-icon::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #c0392b;
}
.loadrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bar { flex: 1; height: 16px; border: 2px solid #000; background: #000; }
.bar > span { display: block; height: 100%; background: var(--green); width: 0; }
.bar.fail > span { background: var(--red); }
canvas { image-rendering: pixelated; border: 3px solid #000; width: 100%; background: #163d1f; }
.gauge {
  width: 40px; height: 220px; border: 3px solid #000; margin: 0 auto;
  background: #101020; position: relative;
}
.gauge .zone { position: absolute; left: 0; right: 0; background: var(--zone); }
.gauge .needle { position: absolute; left: -6px; right: -6px; height: 4px; background: var(--accent); }
.timer { margin: 10px 0 4px; font-weight: bold; letter-spacing: 1px; color: var(--accent); }
.daisy-court { image-rendering: pixelated; border: 3px solid #000; background: #0d1710; max-width: 100%; height: auto; }
.dialog.win { border-left: 3px solid #3aa657; color: #cfeecf; }
.daisy-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.daisy-lvl-label { font-size: 12px; color: var(--muted, #a99); letter-spacing: 1px; }
.daisy-lvl {
  font-family: inherit; cursor: pointer; width: 26px; height: 26px; padding: 0;
  color: #e8d9b3; background: #241c12; border: 2px solid #6b5a2f; border-radius: 4px;
  font-weight: bold; transition: transform .06s, border-color .1s, background .1s;
}
.daisy-lvl:hover { border-color: #c9a24a; transform: translateY(-1px); }
.daisy-lvl.active { background: #c9a24a; color: #201406; border-color: #efe0b0; }
.daisy-lvl:focus-visible { outline: 2px solid #efe0b0; outline-offset: 2px; }
.daisy-lvl-name { font-size: 13px; font-weight: bold; color: #e8c98a; margin-left: 4px; }
/* level 5: no real zone — a taunting red sliver instead of the green band */
.gauge .zone.impossible { background: #b23b3b; animation: daisy-glitch 0.5s steps(2) infinite; }
@keyframes daisy-glitch { 0% { transform: translateY(-6px); } 50% { transform: translateY(6px); } 100% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .gauge .zone.impossible { animation: none; } }