:root {
  --ink: #111;
  --paper: #f7f0df;
  --paper-2: #fffaf0;
  --pink: #ff0f7b;
  --pink-dark: #c5005b;
  --yellow: #ffd51f;
  --blue: #48a7ff;
  --blue-dark: #0d57c8;
  --navy: #071a3d;
  --red: #c9221b;
  --green: #087847;
  --muted: #655f54;
  --line: #c9c1b2;
  --shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 12% 3%, rgba(255, 213, 31, .34), transparent 22rem),
    radial-gradient(circle at 92% 20%, rgba(255, 15, 123, .16), transparent 27rem),
    linear-gradient(135deg, #efe5cf, #fffaf0 44%, #eee2ca);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0, 0, 0, .025) 6px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, .09) 8px);
  mix-blend-mode: multiply;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 5px 14px rgba(7, 26, 61, .2);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 4px solid var(--blue-dark);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: var(--navy);
  border-radius: 8px;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.duel-nav {
  position: sticky;
  top: 10px;
  z-index: 30;
  width: min(1100px, calc(100% - 32px));
  min-height: 58px;
  margin: 14px auto 12px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border: 2px solid rgba(17, 17, 17, .9);
  border-radius: 999px;
  background: rgba(255, 250, 240, .92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .13);
  backdrop-filter: blur(12px);
}

.back-link {
  width: fit-content;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.back-link:hover {
  background: rgba(7, 26, 61, .08);
}

.nav-brand {
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.nav-brand em {
  color: var(--pink);
  font-style: normal;
}

.connection-pill {
  justify-self: end;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(7, 26, 61, .07);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.connection-pill[data-state="connecting"] {
  color: #7b5900;
  background: rgba(255, 213, 31, .35);
}

.connection-pill[data-state="online"] {
  color: var(--green);
  background: rgba(8, 120, 71, .12);
}

.connection-pill[data-state="error"] {
  color: var(--red);
  background: rgba(201, 34, 27, .11);
}

.duel-wrap {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 50px;
}

.duel-hero {
  min-height: 230px;
  padding: clamp(24px, 5vw, 52px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background:
    linear-gradient(118deg, rgba(255, 250, 240, .96) 0 57%, rgba(255, 213, 31, .93) 57% 100%);
  box-shadow: var(--shadow);
}

body:not([data-screen="setup"]) .duel-hero {
  display: none;
}

.duel-hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: 48px;
  top: 8px;
  border: 20px solid rgba(255, 15, 123, .12);
  border-radius: 50%;
}

.kicker,
.eyebrow {
  display: inline-block;
  font-weight: 1000;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.kicker {
  padding: 7px 12px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-size: 13px;
  transform: rotate(-1deg);
}

.eyebrow {
  color: var(--pink-dark);
  font-size: 12px;
}

.duel-hero .hero-title {
  margin: 14px 0 8px;
  font-size: clamp(52px, 9vw, 94px);
  font-weight: 1000;
  line-height: .86;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.duel-hero .hero-title span {
  display: block;
  color: var(--navy);
}

.duel-hero p {
  max-width: 650px;
  margin: 18px 0 0;
  font-size: clamp(18px, 2.5vw, 25px);
  font-weight: 900;
  line-height: 1.15;
}

.hero-stamp {
  z-index: 1;
  flex: 0 0 auto;
  padding: 23px 17px;
  border: 5px solid var(--pink);
  border-radius: 50%;
  color: var(--pink-dark);
  background: rgba(255, 250, 240, .78);
  font-size: 21px;
  font-weight: 1000;
  line-height: .95;
  text-align: center;
  transform: rotate(9deg);
}

.screen {
  margin-top: 24px;
  padding: clamp(20px, 4vw, 38px);
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: rgba(255, 250, 240, .94);
  box-shadow: var(--shadow);
}

.notice-banner {
  margin-top: 18px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--ink);
}

.notice-banner[data-state="error"] {
  color: #fff;
  background: var(--red);
}

.notice-banner[data-state="success"] {
  color: #fff;
  background: var(--green);
}

.section-heading h2,
.panel h2 {
  margin: 5px 0 7px;
  color: var(--navy);
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -.045em;
}

.section-heading p,
.panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.section-heading.compact h2 {
  font-size: 27px;
}

.match-format-picker {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.format-card {
  min-height: 84px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 4px 5px 0 var(--line);
  text-align: left;
  white-space: normal;
}

.format-card > span:first-child {
  font-size: 31px;
}

.format-card strong,
.format-card small {
  display: block;
}

.format-card strong {
  font-size: 18px;
}

.format-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.format-card:hover:not(:disabled) {
  box-shadow: 6px 7px 0 var(--yellow);
}

.format-card.is-selected {
  background: #fff3f9;
  box-shadow: 6px 7px 0 var(--pink);
}

.format-card:disabled {
  opacity: .68;
}

.tournament-note {
  min-height: 132px;
  margin-top: 22px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 3px dashed var(--ink);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 213, 31, .22), rgba(255, 15, 123, .09));
}

.tournament-note-copy {
  flex: 1;
  min-width: 0;
}

.tournament-note[hidden],
.game-picker[hidden],
.tournament-track[hidden],
.tournament-result[hidden] {
  display: none;
}

.tournament-note > span {
  font-size: 47px;
}

.tournament-note strong {
  color: var(--navy);
  font-size: 18px;
}

.tournament-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.tournament-mode-picker {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tournament-mode-picker button {
  padding: 8px 11px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 3px 0 var(--line);
  font-size: 12px;
  font-weight: 900;
}

.tournament-mode-picker button:hover:not(:disabled) {
  box-shadow: 3px 4px 0 var(--yellow);
}

.tournament-mode-picker button.is-selected {
  color: #fff;
  background: var(--navy);
  box-shadow: 3px 4px 0 var(--pink);
}

.tournament-mode-picker button:disabled {
  opacity: .62;
}

.tournament-note .tournament-selection-status {
  min-height: 18px;
  margin-top: 10px;
  color: var(--navy);
  font-size: 12px;
}

.tournament-selection-status.is-complete {
  color: #087544;
}

.game-picker {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.game-category-tabs {
  grid-column: 1 / -1;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: #f0eadc;
  box-shadow: 4px 5px 0 var(--line);
}

.game-category-tab {
  min-height: 40px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  box-shadow: none;
  font-size: 11px;
  white-space: nowrap;
}

.game-category-tab:hover:not(:disabled) {
  color: var(--pink-dark);
  background: #fff7ca;
  box-shadow: 2px 3px 0 var(--yellow);
}

.game-category-tab > span {
  font-size: 15px;
  line-height: 1;
}

.game-category-tab > b {
  font-size: 11px;
}

.game-category-tab > small {
  min-width: 22px;
  height: 22px;
  margin: 0;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--navy);
  background: #e7eef8;
  font-size: 9px;
  font-weight: 1000;
}

.game-category-tab.is-selected {
  color: #fff;
  background: var(--navy);
  box-shadow: 3px 4px 0 var(--pink);
}

.game-category-tab.is-selected > small {
  color: var(--navy);
  background: var(--yellow);
}

.game-card {
  min-height: 205px;
  padding: 18px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 17px;
  background: #fff;
  box-shadow: 5px 6px 0 var(--line);
  text-align: left;
  white-space: normal;
}

.game-card-copy {
  min-width: 0;
}

.game-card:hover:not(:disabled) {
  box-shadow: 7px 8px 0 var(--yellow);
}

.game-card.is-selected {
  background: #fff3f9;
  box-shadow: 7px 8px 0 var(--pink);
}

.game-card.is-selected::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--pink);
  font-size: 14px;
}

.game-picker.is-custom-tournament .game-card.is-selected::after {
  content: attr(data-selection-order);
}

.game-card:disabled {
  opacity: .68;
}

.game-icon {
  align-self: center;
  font-size: 42px;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .12));
}

.game-card strong,
.game-card small {
  display: block;
}

.game-card .game-instruction {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(7, 26, 61, .28);
  color: var(--navy);
  font-size: 12px;
  line-height: 1.35;
}

.game-card .game-instruction::before {
  content: "Jak hrát: ";
  color: var(--pink-dark);
  font-weight: 950;
}

.game-card strong {
  padding-right: 20px;
  font-size: 19px;
  line-height: 1.05;
}

.game-card small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.difficulty {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue-dark);
  background: rgba(72, 167, 255, .16);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.setup-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
}

.panel {
  padding: clamp(20px, 3vw, 30px);
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fff;
}

.online-panel {
  box-shadow: 7px 8px 0 var(--blue);
}

.practice-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--navy);
  box-shadow: 7px 8px 0 var(--yellow);
}

.practice-panel .eyebrow,
.practice-panel h2,
.practice-panel p {
  color: #fff;
}

.practice-panel .eyebrow {
  color: var(--yellow);
}

.field-label {
  display: block;
  margin: 20px 0 7px;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.text-input {
  width: 100%;
  min-height: 49px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  color: var(--ink);
  background: var(--paper-2);
  font-weight: 900;
}

.text-input::placeholder {
  color: #8b8377;
  font-weight: 700;
}

.primary-actions {
  margin-top: 13px;
}

.primary-button,
.ready-button,
.start-button {
  color: var(--ink);
  background: var(--pink);
}

.primary-actions .primary-button {
  width: 100%;
}

.secondary-button {
  color: var(--ink);
  background: var(--yellow);
}

.practice-panel .secondary-button {
  width: 100%;
  margin-top: auto;
}

.quiet-button {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.or-divider {
  margin: 20px 0 0;
  position: relative;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.or-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}

.or-divider span {
  position: relative;
  padding: 0 10px;
  background: #fff;
}

.join-form .field-label {
  margin-top: 16px;
}

.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.room-input {
  font-family: "Courier New", monospace;
  font-size: 22px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.microcopy,
.practice-note {
  margin-top: 14px !important;
  font-size: 12px;
  line-height: 1.35 !important;
}

.practice-note {
  color: rgba(255, 255, 255, .64);
}

.lobby-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 22px;
}

.room-ticket {
  min-width: 270px;
  padding: 16px 18px;
  border: 3px dashed var(--ink);
  border-radius: 15px;
  background: var(--yellow);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(1deg);
}

.room-ticket > span {
  display: block;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-ticket > strong {
  display: block;
  margin: 3px 0 9px;
  font-family: "Courier New", monospace;
  font-size: 34px;
  letter-spacing: .13em;
}

.ticket-actions {
  display: flex;
  gap: 6px;
}

.ticket-actions button {
  padding: 7px 9px;
  font-size: 11px;
  box-shadow: none;
}

.players {
  margin: 30px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.player-card {
  min-width: 0;
  padding: 17px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.player-one {
  box-shadow: 6px 7px 0 var(--pink);
}

.player-two {
  box-shadow: 6px 7px 0 var(--blue);
}

.player-avatar {
  font-size: 30px;
}

.player-card small,
.player-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.player-card strong {
  margin-top: 3px;
  font-size: 19px;
}

.ready-state {
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(7, 26, 61, .08);
  font-size: 11px;
  white-space: nowrap;
}

.ready-state.is-ready {
  color: #fff;
  background: var(--green);
}

.versus {
  font-size: 25px;
  font-weight: 1000;
  transform: rotate(-5deg);
}

.lobby-game-panel {
  display: grid;
  grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 20px;
  background: #f7f5ee;
}

.compact-picker {
  grid-column: 2;
  margin: 0;
  gap: 9px;
}

.compact-picker .game-category-tabs {
  padding: 6px;
  gap: 5px;
  box-shadow: 3px 4px 0 var(--line);
}

.compact-picker .game-category-tab {
  min-height: 34px;
  padding: 5px 7px;
  gap: 4px;
}

.compact-picker .game-category-tab > span { font-size: 12px; }
.compact-picker .game-category-tab > b { font-size: 9px; }
.compact-picker .game-category-tab > small { min-width: 19px; height: 19px; font-size: 8px; }

.compact-formats {
  margin: 0;
}

.compact-formats .format-card {
  min-height: 72px;
  padding: 10px 12px;
}

.lobby-tournament-note {
  min-height: 174px;
  grid-column: 2;
  margin: 0;
  padding: 16px;
}

.compact-picker .game-card {
  min-height: 150px;
  padding: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  box-shadow: 3px 4px 0 var(--line);
}

.compact-picker .game-icon {
  font-size: 27px;
}

.compact-picker .game-card strong {
  font-size: 14px;
}

.compact-picker .game-card small {
  font-size: 11px;
}

.compact-picker .game-card .game-instruction {
  font-size: 11px;
}

.lobby-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.lobby-actions .quiet-button {
  margin-right: auto;
}

.ready-button,
.start-button {
  min-width: 180px;
}

.ready-button.is-ready {
  color: #fff;
  background: var(--green);
}

.lobby-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.game-screen {
  padding: 18px;
  background: rgba(255, 250, 240, .97);
}

.match-bar {
  padding: 12px 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.match-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.remote-player {
  justify-content: flex-end;
  text-align: right;
}

.match-player span:not(.color-dot) {
  min-width: 0;
}

.match-player small,
.match-player strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-player small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.match-player strong {
  font-size: 15px;
}

.match-player > b {
  min-width: 52px;
  font-size: 29px;
  line-height: 1;
}

.color-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.color-dot.pink {
  background: var(--pink);
}

.color-dot.blue {
  background: var(--blue);
}

.match-center {
  text-align: center;
}

.match-center span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.match-center h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1;
}

.tournament-track {
  margin-top: 7px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.tournament-game {
  min-width: 42px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper-2);
  font-size: 10px;
  font-weight: 950;
}

.tournament-game.is-current {
  color: var(--navy);
  border-color: var(--navy);
  background: var(--yellow);
}

.tournament-game.is-won {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.tournament-game.is-lost {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
}

.tournament-game.is-draw {
  color: var(--navy);
  border-color: var(--blue);
  background: rgba(72, 167, 255, .25);
}

.game-stage {
  min-height: 550px;
  margin-top: 14px;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fff;
}

.exit-game {
  display: block;
  margin: 10px 0 0 auto;
  padding: 7px 11px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.game-intro {
  min-height: 550px;
  padding: 32px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255, 213, 31, .3), transparent 21rem),
    var(--paper-2);
}

.game-intro-count {
  display: block;
  color: var(--pink);
  font-size: clamp(82px, 18vw, 160px);
  font-weight: 1000;
  line-height: .8;
  text-shadow: 6px 7px 0 var(--ink);
}

.game-intro p {
  max-width: 570px;
  margin: 22px auto 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

/* Office Panic */
.panic-shell {
  min-height: 550px;
  padding: 18px;
  background:
    linear-gradient(rgba(7, 26, 61, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 26, 61, .035) 1px, transparent 1px),
    #f7f5ee;
  background-size: 24px 24px;
}

.panic-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
}

.panic-hud p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.panic-timer {
  height: 17px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.panic-timer > span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform-origin: left;
}

.panic-time {
  min-width: 72px;
  color: var(--navy);
  font-size: 30px;
  font-weight: 1000;
  line-height: 1;
  text-align: right;
}

.panic-grid {
  min-height: 440px;
  margin-top: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: rgba(255, 255, 255, .86);
}

.panic-slot {
  min-height: 125px;
  position: relative;
  border: 2px dashed rgba(7, 26, 61, .13);
  border-radius: 13px;
}

.panic-event {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
  white-space: normal;
  animation: panic-pop .15s ease-out both;
}

.panic-event[data-kind="bad"] {
  color: #fff;
  background: var(--pink-dark);
}

.panic-event .event-emoji {
  font-size: clamp(28px, 5vw, 46px);
}

.panic-event .event-label {
  font-size: clamp(11px, 1.8vw, 15px);
  line-height: 1.1;
  text-align: center;
}

.panic-event.is-hit {
  pointer-events: none;
  animation: panic-hit .25s ease-in both;
}

.panic-feedback {
  min-height: 27px;
  padding: 4px 10px;
  color: var(--green);
  font-size: 16px;
  font-weight: 1000;
  text-align: center;
}

.panic-feedback.is-bad {
  color: var(--red);
}

@keyframes panic-pop {
  from { opacity: 0; transform: scale(.65) rotate(var(--tilt)); }
  to { opacity: 1; transform: scale(1) rotate(var(--tilt)); }
}

@keyframes panic-hit {
  to { opacity: 0; transform: scale(1.24) rotate(var(--tilt)); }
}

/* Deadline Chicken */
.deadline-shell {
  min-height: 550px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 15, 123, .12), transparent 22rem),
    var(--paper-2);
  user-select: none;
}

.deadline-rounds {
  margin-bottom: 16px;
  display: flex;
  gap: 7px;
}

.deadline-round-dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  font-size: 11px;
  font-weight: 1000;
}

.deadline-round-dot.is-active {
  background: var(--yellow);
  transform: scale(1.15);
}

.deadline-round-dot.is-done {
  color: #fff;
  background: var(--green);
}

.deadline-heading {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(23px, 4vw, 38px);
  line-height: 1;
  text-align: center;
}

.deadline-gauge {
  width: min(690px, 95%);
  height: 92px;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(7, 26, 61, .12) 9.5% 10%),
    #fff;
  box-shadow: 7px 8px 0 var(--blue);
}

.deadline-fill {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, var(--green), var(--yellow) 70%, var(--pink));
}

.deadline-line {
  width: 6px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  background: var(--ink);
}

.deadline-fog {
  position: absolute;
  inset: 0 0 0 68%;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(7, 26, 61, .91) 0 12px, rgba(13, 87, 200, .91) 12px 24px);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .15s;
}

.deadline-gauge:not(.is-foggy) .deadline-fog {
  opacity: .18;
}

.deadline-readout {
  min-height: 35px;
  margin: 18px 0 12px;
  font-size: 25px;
  font-weight: 1000;
  text-align: center;
}

.deadline-hold {
  min-width: min(340px, 90%);
  min-height: 92px;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 8px 9px 0 var(--ink);
  font-size: clamp(20px, 4vw, 29px);
  text-transform: uppercase;
}

.deadline-hold.is-held {
  color: #fff;
  background: var(--pink);
  box-shadow: 3px 4px 0 var(--ink);
  transform: translate(5px, 5px);
}

.deadline-help {
  max-width: 600px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.deadline-verdict {
  min-height: 48px;
  margin-top: 14px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
}

.deadline-verdict.is-bust {
  color: var(--red);
}

/* Papírový curling */
.curling-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 16px;
  background: #e9dfc8;
}

.curling-board-wrap {
  min-width: 0;
  display: grid;
  place-items: center;
}

.curling-canvas {
  display: block;
  width: min(100%, 550px);
  height: auto;
  max-height: 72vh;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background: #c9925d;
  box-shadow: 8px 9px 0 var(--navy);
  touch-action: none;
}

.curling-sidebar {
  padding: 18px;
  align-self: start;
  border: 3px solid var(--ink);
  border-radius: 15px;
  background: var(--paper-2);
  box-shadow: 6px 7px 0 var(--yellow);
}

.curling-sidebar h3 {
  margin: 4px 0 8px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.curling-status {
  min-height: 50px;
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
}

.curling-legend {
  margin: 18px 0;
  display: grid;
  gap: 8px;
}

.curling-legend > div {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.stone-swatch {
  width: 17px;
  height: 17px;
  display: inline-block;
  margin-right: 6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  vertical-align: middle;
}

.stone-swatch.pink {
  background: var(--pink);
}

.stone-swatch.blue {
  background: var(--blue);
}

.shot-pips {
  display: inline-flex;
  gap: 3px;
}

.shot-pips i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.shot-pips i.is-used {
  background: var(--ink);
}

.curling-help {
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.curling-live-score {
  margin-top: 13px;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

/* Alt+Tab Duel */
.alttab-shell {
  min-height: 550px;
  padding: 22px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(72, 167, 255, .25), transparent 24rem),
    linear-gradient(145deg, #14284c, #071a3d 68%);
}

.alttab-topline {
  width: min(720px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.alttab-rounds {
  display: flex;
  gap: 7px;
}

.alttab-rounds i {
  width: 18px;
  height: 9px;
  display: block;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.alttab-rounds i.is-current {
  border-color: #fff;
}

.alttab-rounds i.is-good {
  border-color: #55e895;
  background: #55e895;
}

.alttab-rounds i.is-bad {
  border-color: #ff5b4d;
  background: #ff5b4d;
}

.alttab-score {
  font-size: 15px;
  white-space: nowrap;
}

.alttab-monitor {
  width: min(720px, 100%);
  overflow: hidden;
  border: 5px solid #050b18;
  border-radius: 13px;
  background: #f6f8fb;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .35);
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}

.monitor-chrome {
  min-height: 36px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d9e4f5;
  background: #202d45;
  font-size: 11px;
  font-weight: 800;
}

.monitor-chrome i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff5b4d;
}

.monitor-chrome i:nth-child(2) { background: var(--yellow); }
.monitor-chrome i:nth-child(3) { background: #55e895; }
.monitor-chrome span { margin-left: 6px; }

.monitor-work {
  min-height: 275px;
  padding: 22px;
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(33, 107, 63, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 107, 63, .08) 1px, transparent 1px),
    #f8fbf8;
  background-size: 42px 30px;
}

.fake-sheet {
  width: min(570px, 92%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #a9b8ac;
  background: #fff;
  box-shadow: 0 8px 25px rgba(7, 26, 61, .1);
}

.fake-sheet > * {
  min-width: 0;
  padding: 8px 6px;
  overflow: hidden;
  border-right: 1px solid #d8e0d9;
  border-bottom: 1px solid #d8e0d9;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-sheet b {
  color: #fff;
  background: #217346;
  text-align: center;
}

.alttab-alert {
  width: min(470px, calc(100% - 30px));
  min-height: 86px;
  padding: 14px 17px;
  position: absolute;
  left: 50%;
  bottom: 21px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--paper-2);
  box-shadow: 6px 7px 0 var(--ink);
  transform: translateX(-50%);
}

.alttab-alert-icon {
  font-size: 37px;
  line-height: 1;
}

.alttab-alert strong,
.alttab-alert small {
  display: block;
}

.alttab-alert strong {
  color: var(--navy);
  font-size: 19px;
}

.alttab-alert small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.alttab-monitor[data-state="boss"] {
  border-color: #ff5b4d;
  transform: rotate(-.35deg) scale(1.008);
}

.alttab-monitor[data-state="boss"] .alttab-alert {
  color: #fff;
  background: #ff5b4d;
  animation: boss-pulse .42s ease-in-out infinite alternate;
}

.alttab-monitor[data-state="boss"] .alttab-alert strong,
.alttab-monitor[data-state="boss"] .alttab-alert small {
  color: #fff;
}

.alttab-monitor[data-state="safe"] .alttab-alert {
  background: #dff0ff;
}

.alttab-monitor[data-state="success"] { border-color: #55e895; }
.alttab-monitor[data-state="mistake"] { border-color: #ff5b4d; }

@keyframes boss-pulse {
  to { transform: translateX(-50%) scale(1.025) rotate(.4deg); }
}

.alttab-button {
  min-width: min(360px, 90%);
  padding: 13px 30px;
  border: 3px solid #050b18;
  border-radius: 13px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 6px 7px 0 #050b18;
}

.alttab-button span,
.alttab-button small {
  display: block;
}

.alttab-button span {
  font-size: 24px;
  letter-spacing: .04em;
}

.alttab-button small {
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
}

.alttab-feedback {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

/* Tabulková námořní bitva */
.battleship-shell {
  min-height: 550px;
  padding: 20px;
  background:
    linear-gradient(rgba(13, 87, 200, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 87, 200, .055) 1px, transparent 1px),
    #edf7ff;
  background-size: 27px 27px;
}

.battleship-status {
  margin: 0 auto 15px;
  text-align: center;
}

.battleship-status h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: clamp(23px, 4vw, 34px);
  line-height: 1;
}

.battleship-status p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.battleship-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 390px));
  justify-content: center;
  gap: clamp(18px, 4vw, 44px);
}

.battleship-board-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.battleship-board-heading strong {
  color: var(--navy);
  font-size: 16px;
}

.battleship-board-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.battleship-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #cce9ff;
  box-shadow: 7px 8px 0 var(--navy);
}

.battleship-grid.own-grid {
  background: #f1e9d8;
  box-shadow: 7px 8px 0 var(--pink);
}

.battleship-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  position: relative;
  border: 2px solid rgba(7, 26, 61, .38);
  border-radius: 5px;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.enemy-grid .battleship-cell:not([aria-disabled="true"]):hover {
  background: var(--yellow);
  transform: scale(1.06);
}

.battleship-cell[aria-disabled="true"] {
  cursor: default;
}

.battleship-cell.is-ship {
  border-color: var(--navy);
  background: var(--navy);
}

.battleship-cell.is-miss::after,
.battleship-cell.is-hit::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--blue-dark);
}

.battleship-cell.is-hit {
  border-color: var(--ink);
  background: #ff806f;
}

.battleship-cell.is-hit::after {
  inset: 18%;
  border: 3px solid #fff;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--ink);
}

.battleship-cell.is-sunk {
  background: var(--red);
  animation: sunk-pop .35s ease both;
}

@keyframes sunk-pop {
  50% { transform: scale(1.13) rotate(3deg); }
}

.battleship-legend {
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.battleship-legend i {
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 4px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  vertical-align: -2px;
}

.battleship-legend .ship { background: var(--navy); }
.battleship-legend .hit { background: #ff806f; }
.battleship-legend .miss { background: #fff; }

/* Task Stack */
.taskstack-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(220px, 290px);
  grid-template-areas: "board sidebar" "controls sidebar";
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 15, 123, .22), transparent 20rem),
    #071a3d;
}

.taskstack-board-wrap {
  grid-area: board;
  width: min(100%, 330px);
  margin: auto;
  position: relative;
}

.taskstack-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 66vh;
  border: 4px solid var(--ink);
  border-radius: 12px;
  background: #0b1730;
  box-shadow: 8px 9px 0 var(--pink);
  touch-action: none;
}

.taskstack-overlay {
  position: absolute;
  inset: 0;
  place-content: center;
  padding: 20px;
  border-radius: 10px;
  color: #fff;
  background: rgba(7, 26, 61, .88);
  text-align: center;
}

.taskstack-overlay:not([hidden]) {
  display: grid;
}

.taskstack-overlay strong,
.taskstack-overlay span {
  display: block;
}

.taskstack-overlay strong {
  color: var(--yellow);
  font-size: 29px;
}

.taskstack-overlay span {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
}

.taskstack-sidebar {
  grid-area: sidebar;
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: 7px 8px 0 var(--yellow);
}

.taskstack-sidebar h3 {
  margin: 4px 0 13px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.taskstack-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.taskstack-stats > div {
  padding: 9px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  text-align: center;
}

.taskstack-stats small,
.taskstack-stats strong {
  display: block;
}

.taskstack-stats small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskstack-stats strong {
  margin-top: 2px;
  color: var(--navy);
  font-size: 22px;
}

.taskstack-status {
  min-height: 55px;
  margin: 15px 0 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.taskstack-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.taskstack-controls {
  grid-area: controls;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.taskstack-controls button {
  width: 48px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 9px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 4px 0 #000;
  font-size: 21px;
}

/* Inbox Pong */
.pong-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(215px, 270px);
  align-items: center;
  gap: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 15, 123, .2), transparent 24rem),
    radial-gradient(circle at 85% 75%, rgba(72, 167, 255, .2), transparent 22rem),
    #06152f;
}

.pong-board-wrap {
  min-width: 0;
  display: grid;
  place-items: center;
}

.pong-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--navy);
  box-shadow: 8px 9px 0 var(--pink);
  touch-action: none;
}

.pong-sidebar {
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: 7px 8px 0 var(--blue);
}

.pong-sidebar h3 {
  margin: 4px 0 10px;
  color: var(--navy);
  font-size: 25px;
  line-height: 1;
}

.pong-status {
  min-height: 68px;
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.pong-mini-score {
  margin: 13px 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: #fff;
  text-align: center;
}

.pong-mini-score strong {
  color: var(--navy);
  font-size: 31px;
}

.pong-mini-score span {
  color: var(--pink);
  font-size: 21px;
  font-weight: 1000;
}

.pong-rally {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pong-rally b {
  color: var(--navy);
  font-size: 19px;
}

.pong-help {
  margin: 14px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.pong-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pong-controls button {
  min-height: 48px;
  padding: 7px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 23px;
}

/* Meeting Escape */
.escape-shell {
  min-height: 550px;
  padding: 17px;
  display: grid;
  align-content: center;
  gap: 13px;
  background:
    linear-gradient(rgba(13, 87, 200, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 87, 200, .045) 1px, transparent 1px),
    #eef8ff;
  background-size: 28px 28px;
}

.escape-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.escape-hud > div {
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: 3px 4px 0 var(--line);
  text-align: center;
}

.escape-hud small,
.escape-hud strong {
  display: block;
}

.escape-hud small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.escape-hud strong {
  margin-top: 2px;
  color: var(--navy);
  font-size: 20px;
}

.escape-board-wrap {
  position: relative;
}

.escape-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: #dff2ff;
  box-shadow: 7px 8px 0 var(--navy);
  touch-action: manipulation;
}

.escape-progress {
  height: 10px;
  margin: 12px 4px 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.escape-progress span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform: scaleX(0);
  transform-origin: left center;
}

.escape-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.escape-status {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.escape-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.escape-controls button {
  min-width: 130px;
  padding: 11px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink);
}

.escape-controls button:last-child {
  background: var(--blue);
}

/* Jargon Decoder */
.jargon-shell {
  min-height: 550px;
  padding: 20px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 213, 31, .38), transparent 19rem),
    radial-gradient(circle at 90% 85%, rgba(255, 15, 123, .14), transparent 22rem),
    var(--paper);
}

.jargon-topline {
  width: min(820px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.jargon-rounds {
  display: flex;
  gap: 7px;
}

.jargon-rounds i {
  width: 28px;
  height: 10px;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.jargon-rounds i.is-current {
  box-shadow: 0 0 0 2px var(--yellow);
}

.jargon-rounds i.is-good { background: #55e895; }
.jargon-rounds i.is-bad { background: #ff5b4d; }

.jargon-score {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}

.jargon-card {
  width: min(820px, 100%);
  padding: 22px;
  border: 3px solid var(--ink);
  border-radius: 17px;
  background: var(--paper-2);
  box-shadow: 8px 9px 0 var(--pink);
}

.jargon-card h3 {
  margin: 5px 0 14px;
  color: var(--navy);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
}

.jargon-preview {
  min-height: 74px;
  padding: 15px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 12px;
  color: #fff;
  background: var(--navy);
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
}

.jargon-preview.is-hidden-phrase {
  color: var(--navy);
  background:
    repeating-linear-gradient(-45deg, rgba(72,167,255,.28) 0 10px, rgba(255,255,255,.3) 10px 20px),
    #dff2ff;
  font-size: 16px;
}

.jargon-answer {
  min-height: 63px;
  margin: 13px 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 5px;
  border: 2px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.jargon-answer b {
  padding: 5px 8px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--navy);
  background: #e9f4ff;
  font-size: 13px;
}

.jargon-tiles {
  min-height: 104px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
}

.jargon-tiles button {
  padding: 9px 13px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 14px;
}

.jargon-tiles button:disabled {
  opacity: .24;
}

.jargon-undo {
  display: block;
  margin: 10px auto 0;
  padding: 7px 11px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.jargon-feedback {
  min-height: 19px;
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.jargon-card.is-mistake {
  animation: jargon-shake .32s ease both;
}

@keyframes jargon-shake {
  25% { transform: translateX(-8px) rotate(-.3deg); }
  60% { transform: translateX(7px) rotate(.3deg); }
}

/* Kávová štafeta */
.coffee-shell {
  min-height: 550px;
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 213, 31, .4), transparent 19rem),
    linear-gradient(125deg, #f1e0c7, #fffaf0 52%, #e5caab);
}

.coffee-topline,
.calendar-topline,
.printer-topline {
  width: min(920px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.coffee-rounds,
.calendar-rounds,
.printer-rounds {
  display: flex;
  gap: 7px;
}

.coffee-rounds i,
.calendar-rounds i,
.printer-rounds i {
  width: 27px;
  height: 10px;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.coffee-rounds i.is-current,
.calendar-rounds i.is-current,
.printer-rounds i.is-current {
  box-shadow: 0 0 0 2px var(--yellow);
}

.coffee-rounds i.is-good,
.calendar-rounds i.is-good,
.printer-rounds i.is-good { background: #55e895; }

.coffee-rounds i.is-bad,
.calendar-rounds i.is-bad,
.printer-rounds i.is-bad { background: #ff5b4d; }

.coffee-score,
.calendar-score,
.printer-score {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}

.coffee-layout {
  width: min(920px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.65fr);
  gap: 17px;
}

.coffee-ticket {
  min-height: 352px;
  padding: 24px 20px 28px;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 5px 5px 18px 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(7, 26, 61, .07) 27px),
    #fff;
  box-shadow: 7px 8px 0 #8d5934;
  transform: rotate(-1deg);
}

.coffee-ticket::before {
  content: "KUCHYŇKA • 2026";
  display: block;
  margin: -8px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--line);
  color: var(--muted);
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.coffee-ticket h3 {
  margin: 4px 0 16px;
  color: var(--navy);
  font-size: clamp(27px, 4vw, 39px);
  line-height: 1;
}

.coffee-order {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
  transition: opacity .15s ease;
}

.coffee-order li {
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-weight: 900;
}

.coffee-order li > span:first-child {
  font-size: 22px;
  text-align: center;
}

.coffee-ticket-fold {
  position: absolute;
  inset: 92px 18px 24px;
  display: grid;
  place-items: center;
  border: 3px dashed var(--ink);
  border-radius: 12px;
  color: var(--navy);
  background: rgba(255, 213, 31, .92);
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: rotate(2deg) scale(.94);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.coffee-ticket.is-folded .coffee-order { opacity: 0; }

.coffee-ticket.is-folded .coffee-ticket-fold {
  opacity: 1;
  transform: rotate(2deg) scale(1);
}

.coffee-station {
  padding: 15px;
  display: grid;
  align-content: center;
  gap: 14px;
  border: 3px solid var(--ink);
  border-radius: 17px;
  background: var(--navy);
  box-shadow: 7px 8px 0 var(--pink);
}

.coffee-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.coffee-group {
  padding: 9px;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
}

.coffee-group h3 {
  margin: 0 0 7px;
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.coffee-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.coffee-group:first-child > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coffee-group button {
  min-height: 63px;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}

.coffee-group button span {
  font-size: 21px;
}

.coffee-group button b {
  font-size: 10px;
  line-height: 1.05;
}

.coffee-group button.is-selected {
  border-color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--pink);
}

.coffee-group button:disabled:not(.is-selected) { opacity: .42; }

.coffee-serve {
  width: 100%;
  min-height: 48px;
  border: 2px solid #fff;
  color: var(--ink);
  background: var(--pink);
  box-shadow: 3px 4px 0 #fff;
}

.coffee-feedback,
.calendar-feedback,
.printer-feedback {
  min-height: 20px;
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.coffee-shell.is-mistake .coffee-station {
  animation: coffee-shake .3s ease both;
}

@keyframes coffee-shake {
  30% { transform: translateX(-7px); }
  70% { transform: translateX(7px); }
}

/* Kalendářový squeeze */
.calendar-shell {
  min-height: 550px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 10px;
  background:
    linear-gradient(rgba(72, 167, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 167, 255, .08) 1px, transparent 1px),
    #edf7ff;
  background-size: 22px 22px;
}

.calendar-brief {
  width: min(850px, 100%);
  margin: 0 auto;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 5px 6px 0 var(--pink);
}

.calendar-icon {
  font-size: 39px;
}

.calendar-brief h3 {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: clamp(20px, 3.5vw, 30px);
  line-height: 1;
}

.calendar-clock {
  min-width: 72px;
  padding: 7px 9px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  text-align: center;
}

.calendar-clock b {
  font-size: 22px;
}

.calendar-clock small {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 900;
}

.calendar-timer {
  width: min(850px, 100%);
  height: 9px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.calendar-timer span,
.printer-timer span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform-origin: left;
}

.calendar-grid {
  width: min(850px, 100%);
  min-height: 330px;
  margin: 0 auto;
  padding: 9px;
  display: grid;
  grid-template-rows: repeat(8, minmax(37px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px 11px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 7px 8px 0 var(--blue);
}

.calendar-slot {
  min-width: 0;
  min-height: 0;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 7px;
  border: 2px solid #8cb8df;
  border-radius: 7px;
  color: var(--navy);
  background: #f2f9ff;
  box-shadow: none;
  text-align: left;
}

.calendar-slot span {
  font-family: monospace;
  font-size: 12px;
  font-weight: 900;
}

.calendar-slot b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-slot.is-busy {
  border-color: #bbb3a7;
  color: #645e55;
  background: repeating-linear-gradient(-45deg, #e9e4dc 0 8px, #f4efe7 8px 16px);
  opacity: 1;
}

.calendar-slot:not(.is-busy):hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--yellow);
}

.calendar-slot.is-wrong {
  border-color: var(--red);
  color: var(--red);
  background: #ffe8e5;
  opacity: 1;
}

.calendar-slot.is-selected {
  border-color: var(--ink);
  color: var(--ink);
  background: #55e895;
  opacity: 1;
}

.calendar-slot.is-reveal {
  border-color: var(--pink);
  color: var(--pink-dark);
  background: #fff0f7;
  opacity: 1;
}

/* Tiskárnový exorcista */
.printer-shell {
  min-height: 550px;
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 15, 123, .13), transparent 20rem),
    repeating-linear-gradient(135deg, rgba(7, 26, 61, .04) 0 10px, transparent 10px 20px),
    #eeeae3;
}

.printer-console {
  width: min(850px, 100%);
  margin: 0 auto;
  padding: 17px;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 18px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: #d6d1c8;
  box-shadow: 8px 9px 0 var(--navy);
}

.printer-machine {
  min-height: 170px;
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #f8f5ef;
}

.printer-machine > span {
  z-index: 2;
  font-size: 91px;
  filter: grayscale(.25) drop-shadow(4px 5px 0 rgba(0, 0, 0, .16));
}

.printer-paper {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 1;
  width: 74px;
  height: 68px;
  padding: 9px;
  border: 2px solid var(--ink);
  color: var(--navy);
  background: #fff;
  font-family: monospace;
  font-size: 10px;
  text-align: center;
  transform: translateX(-50%);
}

.printer-machine i {
  width: 13px;
  height: 13px;
  position: absolute;
  right: 14px;
  bottom: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #ff5b4d;
  box-shadow: 0 0 12px rgba(255, 91, 77, .8);
}

.printer-display {
  min-height: 150px;
  padding: 17px;
  display: grid;
  align-content: center;
  border: 3px solid var(--ink);
  border-radius: 12px;
  color: #b9ffcf;
  background: #102619;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, .8);
  font-family: monospace;
}

.printer-code {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.printer-display h3 {
  min-height: 56px;
  margin: 8px 0 13px;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.08;
}

.printer-timer {
  height: 11px;
  overflow: hidden;
  border: 2px solid #b9ffcf;
  border-radius: 999px;
  background: #07110a;
}

.printer-actions {
  width: min(850px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.printer-actions button {
  min-height: 66px;
  padding: 9px 13px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  border: 3px solid var(--ink);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  box-shadow: 4px 5px 0 var(--yellow);
  text-align: left;
}

.printer-actions button small {
  width: 21px;
  height: 21px;
  position: absolute;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: var(--navy);
  font-family: monospace;
  font-size: 10px;
}

.printer-actions button span {
  font-size: 28px;
}

.printer-actions button b {
  padding-right: 20px;
  font-size: 13px;
}

.printer-actions button.is-wrong {
  color: var(--red);
  background: #ffe6e1;
  box-shadow-color: var(--red);
  opacity: .65;
}

.printer-actions button.is-correct {
  background: #55e895;
  box-shadow-color: var(--green);
  opacity: 1;
}

.printer-shell.is-mistake .printer-console {
  animation: printer-rattle .28s ease both;
}

.printer-shell.is-repaired .printer-machine i {
  background: #55e895;
  box-shadow: 0 0 12px rgba(85, 232, 149, .8);
}

.printer-shell.is-failed .printer-machine > span {
  filter: grayscale(1) drop-shadow(4px 5px 0 rgba(0, 0, 0, .16));
}

@keyframes printer-rattle {
  25% { transform: translateX(-6px) rotate(-.25deg); }
  65% { transform: translateX(6px) rotate(.25deg); }
}

/* PokéStín */
.poke-shadow-shell {
  min-height: 550px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 13px;
  background:
    radial-gradient(circle at 8% 12%, rgba(72, 167, 255, .23), transparent 20rem),
    radial-gradient(circle at 94% 87%, rgba(255, 15, 123, .15), transparent 22rem),
    repeating-linear-gradient(135deg, rgba(7, 26, 61, .035) 0 8px, transparent 8px 18px),
    var(--paper);
}

.poke-shadow-topline {
  width: min(900px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.poke-shadow-rounds {
  display: flex;
  gap: 6px;
}

.poke-shadow-rounds i {
  width: 24px;
  height: 10px;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.poke-shadow-rounds i.is-current {
  box-shadow: 0 0 0 2px var(--yellow);
}

.poke-shadow-rounds i.is-good { background: #55e895; }
.poke-shadow-rounds i.is-bad { background: #ff5b4d; }

.poke-shadow-score {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}

.poke-shadow-arena {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, .88fr) minmax(370px, 1.12fr);
  align-items: stretch;
  gap: 14px;
}

.poke-shadow-visual,
.poke-shadow-panel {
  border: 3px solid var(--ink);
  border-radius: 17px;
}

.poke-shadow-visual {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  color: #fff;
  background: var(--navy);
  box-shadow: 7px 8px 0 var(--blue);
}

.poke-shadow-clock {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-weight: 900;
}

.poke-shadow-clock span {
  margin-right: auto;
  color: #b9dcff;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.poke-shadow-clock b {
  color: var(--yellow);
  font-size: 25px;
  line-height: 1;
}

.poke-shadow-clock small {
  color: #b9dcff;
  font-size: 11px;
}

.poke-shadow-timer {
  height: 10px;
  margin: 8px 0 10px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
}

.poke-shadow-timer span {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--yellow);
  transform: scaleX(1);
  transform-origin: left center;
}

.poke-shadow-portrait {
  width: min(270px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #fff9ba 0 15%, rgba(255, 255, 255, .15) 48%, transparent 49%),
    var(--yellow);
}

.poke-shadow-sprite {
  width: 92%;
  height: 92%;
  position: relative;
  z-index: 1;
  object-fit: contain;
  user-select: none;
  filter: brightness(0) saturate(100%) drop-shadow(7px 8px 0 rgba(7, 26, 61, .24));
  transition: filter .24s ease, transform .24s ease;
}

.poke-shadow-portrait.is-revealed .poke-shadow-sprite {
  filter: drop-shadow(7px 8px 0 rgba(7, 26, 61, .22));
  transform: scale(1.04);
}

.poke-shadow-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--navy);
  font-size: 112px;
  font-weight: 1000;
}

.poke-shadow-portrait.is-missing .poke-shadow-sprite { display: none; }
.poke-shadow-portrait.is-missing .poke-shadow-fallback { display: grid; }

.poke-shadow-identity {
  min-height: 20px;
  margin: 9px 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
}

.poke-shadow-panel {
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  box-shadow: 7px 8px 0 var(--pink);
}

.poke-shadow-panel h3 {
  margin: 5px 0 12px;
  color: var(--navy);
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1;
}

.poke-shadow-hints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.poke-shadow-hints p {
  min-height: 55px;
  margin: 0;
  padding: 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  line-height: 1.2;
}

.poke-shadow-hints p > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--muted);
  font-size: 12px;
}

.poke-shadow-hints p.is-revealed {
  border-style: solid;
  border-color: var(--blue-dark);
  color: var(--navy);
  background: #e9f4ff;
}

.poke-shadow-hints p.is-revealed > span { background: var(--blue-dark); }

.poke-shadow-options {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.poke-shadow-options button {
  min-height: 61px;
  padding: 9px 12px;
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 11px;
  color: var(--navy);
  background: #fff;
  box-shadow: 4px 5px 0 var(--yellow);
  font-size: 15px;
  text-align: center;
}

.poke-shadow-options button small {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: var(--navy);
  font-family: monospace;
  font-size: 10px;
}

.poke-shadow-options button b { padding: 0 17px; }

.poke-shadow-options button.is-correct,
.poke-shadow-options button.is-correct:disabled {
  color: var(--ink);
  background: #55e895;
  box-shadow-color: var(--green);
  opacity: 1;
}

.poke-shadow-options button.is-wrong,
.poke-shadow-options button.is-wrong:disabled {
  color: #fff;
  background: var(--red);
  box-shadow-color: var(--red);
  opacity: 1;
}

.poke-shadow-feedback {
  min-height: 34px;
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 720px) {
  .poke-shadow-shell {
    min-height: 510px;
    padding: 11px 8px 16px;
  }

  .poke-shadow-arena {
    grid-template-columns: 1fr;
  }

  .poke-shadow-visual {
    padding: 10px;
    grid-template-columns: minmax(135px, 190px) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 11px;
    align-items: center;
    box-shadow: 5px 6px 0 var(--blue);
  }

  .poke-shadow-clock,
  .poke-shadow-timer {
    grid-column: 2;
  }

  .poke-shadow-portrait {
    grid-column: 1;
    grid-row: 1 / 4;
    width: min(190px, 100%);
  }

  .poke-shadow-identity {
    grid-column: 2;
    align-self: start;
    text-align: left;
  }

  .poke-shadow-panel {
    padding: 14px;
    box-shadow: 5px 6px 0 var(--pink);
  }

  .poke-shadow-panel h3 {
    margin-bottom: 9px;
    font-size: 24px;
  }

  .poke-shadow-hints p { min-height: 48px; }
  .poke-shadow-options button { min-height: 56px; }
}

@media (max-width: 420px) {
  .poke-shadow-rounds { gap: 4px; }
  .poke-shadow-rounds i { width: 18px; }

  .poke-shadow-visual {
    grid-template-columns: 132px 1fr;
  }

  .poke-shadow-panel h3 { font-size: 22px; }
  .poke-shadow-hints { gap: 6px; }
  .poke-shadow-hints p { padding: 7px; font-size: 10px; }
  .poke-shadow-hints p > span { display: none; }
  .poke-shadow-hints p { grid-template-columns: 1fr; }
  .poke-shadow-options { gap: 7px; }
  .poke-shadow-options button { padding: 8px 5px; font-size: 13px; }
  .poke-shadow-options button b { padding: 0 13px; }
}

@media (max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  .poke-shadow-shell {
    min-height: 330px;
    padding: 8px;
    align-content: start;
    gap: 7px;
  }

  .poke-shadow-topline { min-height: 18px; }
  .poke-shadow-rounds { gap: 4px; }
  .poke-shadow-rounds i { width: 18px; height: 8px; }

  .poke-shadow-arena {
    grid-template-columns: minmax(145px, .72fr) minmax(0, 1.28fr);
    gap: 8px;
  }

  .poke-shadow-visual {
    padding: 7px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 0;
    box-shadow: 4px 5px 0 var(--blue);
  }

  .poke-shadow-clock,
  .poke-shadow-timer,
  .poke-shadow-portrait,
  .poke-shadow-identity {
    grid-column: 1;
  }

  .poke-shadow-clock { grid-row: 1; }
  .poke-shadow-clock b { font-size: 20px; }
  .poke-shadow-timer { grid-row: 2; margin: 4px 0; }

  .poke-shadow-portrait {
    grid-row: 3;
    width: min(145px, 100%);
  }

  .poke-shadow-identity {
    grid-row: 4;
    min-height: 15px;
    margin-top: 3px;
    font-size: 10px;
    text-align: center;
  }

  .poke-shadow-panel {
    padding: 8px;
    box-shadow: 4px 5px 0 var(--pink);
  }

  .poke-shadow-panel .eyebrow { font-size: 8px; }

  .poke-shadow-panel h3 {
    margin: 2px 0 5px;
    font-size: 19px;
  }

  .poke-shadow-hints { gap: 5px; }

  .poke-shadow-hints p {
    min-height: 38px;
    padding: 5px;
    gap: 4px;
    font-size: 9px;
  }

  .poke-shadow-hints p > span {
    width: 20px;
    height: 20px;
  }

  .poke-shadow-options {
    margin-top: 6px;
    gap: 5px;
  }

  .poke-shadow-options button {
    min-height: 44px;
    padding: 5px 7px;
    font-size: 12px;
  }

  .poke-shadow-feedback {
    min-height: 24px;
    padding-top: 5px;
    font-size: 10px;
  }
}

/* Kanto Trumf */
.kanto-trumf-shell {
  min-height: 570px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 5%, rgba(255, 213, 31, .34), transparent 18rem),
    radial-gradient(circle at 94% 12%, rgba(72, 167, 255, .22), transparent 21rem),
    #f7f5ee;
}

.kanto-trumf-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: stretch;
  gap: 12px;
}

.kanto-trumf-disciplines {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr);
  align-items: center;
  gap: 9px;
}

.kanto-trumf-discipline {
  min-width: 0;
  min-height: 87px;
  padding: 10px 14px;
  display: grid;
  align-content: center;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
}

.kanto-trumf-discipline.is-current {
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--pink);
}

.kanto-trumf-discipline.is-next {
  border-style: dashed;
  color: var(--navy);
  background: #e7f3ff;
}

.kanto-trumf-discipline span,
.kanto-trumf-discipline small {
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.kanto-trumf-discipline small {
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.kanto-trumf-discipline strong {
  overflow: hidden;
  margin: 2px 0;
  font-size: clamp(23px, 4vw, 38px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanto-trumf-arrow {
  color: var(--pink);
  font-size: 27px;
  font-weight: 1000;
}

.kanto-trumf-clock {
  padding: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  color: #fff;
  background: var(--navy);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 6px 0 var(--blue);
  transition: background .2s ease;
}

.kanto-trumf-clock > span {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kanto-trumf-clock b {
  font-size: 31px;
  line-height: 1;
}

.kanto-trumf-clock small {
  align-self: end;
  padding-bottom: 3px;
  font-weight: 900;
}

.kanto-trumf-clock > i {
  height: 6px;
  margin-top: 6px;
  grid-column: 1 / -1;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  border-radius: 999px;
}

.kanto-trumf-clock > i span {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: left;
  background: var(--yellow);
}

.kanto-trumf-clock.is-urgent { background: var(--red); }
.kanto-trumf-clock.is-revealed { background: var(--green); }

.kanto-trumf-locks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.kanto-trumf-locks > span:not(.kanto-trumf-lock-mark) {
  min-width: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanto-trumf-locks > span.is-locked {
  border-color: var(--green);
  color: #045f39;
  background: #dff8e9;
}

.kanto-trumf-lock-mark { color: var(--pink); }

.kanto-trumf-hand {
  min-width: 0;
  padding: 12px;
  border: 2px solid rgba(17, 17, 17, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
}

.kanto-trumf-hand-heading {
  margin-bottom: 9px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.kanto-trumf-hand-heading h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1;
}

.kanto-trumf-round-count {
  flex: none;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
}

.kanto-trumf-cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.kanto-trumf-card {
  min-width: 0;
  min-height: 196px;
  padding: 7px;
  position: relative;
  display: grid;
  grid-template-rows: 78px minmax(28px, auto) auto auto;
  align-content: start;
  gap: 5px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  color: var(--navy);
  background: #fff;
  box-shadow: 3px 4px 0 var(--blue);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.kanto-trumf-card:disabled { opacity: .72; }

.kanto-trumf-card:not(:disabled):hover {
  transform: translateY(-3px) rotate(-.5deg);
  box-shadow: 4px 7px 0 var(--blue);
}

.kanto-trumf-card.is-selected {
  border-color: var(--pink-dark);
  background: #fff6c8;
  box-shadow: 4px 6px 0 var(--pink);
  transform: translateY(-3px);
}

.kanto-trumf-card.is-locked {
  border-color: var(--green);
  background: #e7f9ee;
  box-shadow: 4px 6px 0 var(--green);
  opacity: 1;
}

.kanto-trumf-card.is-spent,
.kanto-trumf-card.is-spent:disabled {
  filter: grayscale(1);
  opacity: .36;
  box-shadow: none;
  transform: none;
}

.kanto-trumf-card img {
  width: 100%;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(7, 26, 61, .12));
}

.kanto-trumf-card > strong {
  min-width: 0;
  align-self: center;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.kanto-trumf-shortcut {
  width: 21px;
  height: 21px;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: var(--navy);
  font-family: monospace;
  font-size: 10px;
}

.kanto-trumf-card-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.kanto-trumf-card-stats > span {
  min-width: 0;
  padding: 4px 2px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f2f0ea;
}

.kanto-trumf-card-stats > span.is-current {
  border-color: #d49c00;
  background: #fff0a4;
}

.kanto-trumf-card-stats small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanto-trumf-card-stats b { font-size: 11px; }

.kanto-trumf-card em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.kanto-trumf-card.is-selected em { color: var(--pink-dark); }
.kanto-trumf-card.is-locked em { color: var(--green); }

.kanto-trumf-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.kanto-trumf-status {
  min-height: 34px;
  margin: 0;
  padding: 8px 11px;
  display: grid;
  align-items: center;
  border-left: 5px solid var(--blue);
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.kanto-trumf-confirm {
  min-width: 178px;
  min-height: 48px;
  background: var(--pink-dark);
}

.kanto-trumf-reveal {
  padding: 10px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 6px 7px 0 var(--yellow);
}

.kanto-trumf-reveal-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 9px;
}

.kanto-trumf-reveal-card img {
  width: 62px;
  height: 62px;
  grid-row: 1 / 4;
  object-fit: contain;
}

.kanto-trumf-reveal-card small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kanto-trumf-reveal-card strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanto-trumf-reveal-card b {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--navy);
  background: var(--yellow);
  font-size: 11px;
}

.kanto-trumf-reveal-versus {
  color: var(--pink);
  font-size: 23px;
  font-weight: 1000;
}

.kanto-trumf-reveal > p {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.game-stage:fullscreen .kanto-trumf-shell {
  width: min(1200px, 100%);
  margin: auto;
}

@media (max-width: 840px) {
  .kanto-trumf-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kanto-trumf-shell { padding: 10px 7px 15px; }

  .kanto-trumf-topline { grid-template-columns: 1fr; }

  .kanto-trumf-discipline { min-height: 72px; padding: 8px 10px; }
  .kanto-trumf-discipline strong { font-size: 23px; }

  .kanto-trumf-clock {
    grid-template-columns: auto auto auto minmax(60px, 1fr);
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
  }

  .kanto-trumf-clock > span { grid-column: auto; }
  .kanto-trumf-clock b { font-size: 23px; }
  .kanto-trumf-clock small { align-self: center; padding: 0; }
  .kanto-trumf-clock > i { grid-column: auto; margin: 0; }

  .kanto-trumf-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .kanto-trumf-card {
    min-height: 151px;
    padding: 4px;
    grid-template-rows: 52px minmax(23px, auto) auto auto;
    gap: 3px;
    border-width: 2px;
  }
  .kanto-trumf-card img { height: 52px; }
  .kanto-trumf-card > strong { font-size: 10px; }
  .kanto-trumf-card-stats { gap: 2px; }
  .kanto-trumf-card-stats > span { padding: 3px 1px; }
  .kanto-trumf-card-stats small { font-size: 7px; }
  .kanto-trumf-card-stats b { font-size: 9px; }
  .kanto-trumf-card em { font-size: 7px; }
  .kanto-trumf-shortcut { width: 18px; height: 18px; font-size: 9px; }

  .kanto-trumf-actions { grid-template-columns: 1fr; }
  .kanto-trumf-confirm { width: 100%; }

  .kanto-trumf-reveal { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 8px; }
  .kanto-trumf-reveal-card { grid-template-columns: 48px minmax(0, 1fr); column-gap: 5px; }
  .kanto-trumf-reveal-card img { width: 48px; height: 48px; }
  .kanto-trumf-reveal-card strong { font-size: 13px; }
  .kanto-trumf-reveal-card b { font-size: 9px; }
}

@media (max-width: 380px) {
  .kanto-trumf-disciplines { gap: 5px; }
  .kanto-trumf-arrow { font-size: 18px; }
  .kanto-trumf-discipline span,
  .kanto-trumf-discipline small { font-size: 8px; }
  .kanto-trumf-discipline strong { font-size: 18px; }
  .kanto-trumf-locks { gap: 4px; font-size: 9px; }
  .kanto-trumf-hand { padding: 8px; }
  .kanto-trumf-card > strong { font-size: 12px; }
}

@media (max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  .kanto-trumf-shell { gap: 7px; padding: 7px; }
  .kanto-trumf-topline { grid-template-columns: minmax(0, 1fr) 92px; gap: 7px; }
  .kanto-trumf-discipline { min-height: 59px; padding: 5px 8px; }
  .kanto-trumf-discipline strong { font-size: 19px; }
  .kanto-trumf-clock { display: grid; grid-template-columns: 1fr auto; padding: 5px; }
  .kanto-trumf-clock > span { grid-column: 1 / -1; }
  .kanto-trumf-clock > i { grid-column: 1 / -1; margin-top: 3px; }
  .kanto-trumf-locks > span:not(.kanto-trumf-lock-mark) { padding: 4px 7px; }
  .kanto-trumf-hand { padding: 7px; }
  .kanto-trumf-hand-heading { margin-bottom: 5px; }
  .kanto-trumf-hand-heading h3 { font-size: 16px; }
  .kanto-trumf-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .kanto-trumf-card { min-height: 124px; padding: 4px; grid-template-rows: 40px 20px auto auto; border-width: 2px; }
  .kanto-trumf-card img { height: 40px; }
  .kanto-trumf-card > strong { font-size: 9px; }
  .kanto-trumf-card-stats { gap: 2px; }
  .kanto-trumf-card-stats small { display: none; }
  .kanto-trumf-card-stats b { font-size: 8px; }
  .kanto-trumf-card em { font-size: 7px; }
  .kanto-trumf-shortcut { width: 15px; height: 15px; font-size: 8px; }
  .kanto-trumf-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .kanto-trumf-confirm { width: auto; min-width: 145px; min-height: 38px; padding: 7px 10px; }
  .kanto-trumf-status { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .kanto-trumf-reveal { padding: 5px 8px; }
  .kanto-trumf-reveal-card img { width: 40px; height: 40px; }
}

/* Safari Draft */
.safari-draft-shell {
  min-height: 590px;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(255, 213, 31, .48), transparent 18rem),
    radial-gradient(circle at 96% 10%, rgba(8, 120, 71, .2), transparent 22rem),
    linear-gradient(145deg, #fff8d8, #edf8e9 55%, #e5f5ff);
}

.safari-draft-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 12px;
}

.safari-draft-heading {
  min-width: 0;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--green);
}

.safari-draft-heading h3,
.safari-draft-section-title h3 {
  margin: 2px 0;
  color: var(--navy);
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1;
}

.safari-draft-heading p {
  margin: 4px 0 0;
  color: #2f3c31;
  font-size: 11px;
  font-weight: 800;
}

.safari-draft-clock {
  padding: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  color: #fff;
  background: var(--navy);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 6px 0 var(--blue);
  transition: background .2s ease;
}

.safari-draft-clock > span {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.safari-draft-clock b { font-size: 31px; line-height: 1; }

.safari-draft-clock small {
  align-self: end;
  padding-bottom: 3px;
  font-weight: 950;
}

.safari-draft-clock > i {
  height: 6px;
  margin-top: 6px;
  grid-column: 1 / -1;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  border-radius: 999px;
}

.safari-draft-clock > i span {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: left;
  background: var(--yellow);
}

.safari-draft-clock.is-urgent { background: var(--red); }
.safari-draft-clock.is-revealed { background: var(--green); }

.safari-draft-locks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.safari-draft-locks > span:not(:nth-child(2)) {
  min-width: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safari-draft-locks > span:nth-child(2) { color: var(--pink); }

.safari-draft-locks > span.is-locked {
  border-color: var(--green);
  color: #045f39;
  background: #dff8e9;
}

.safari-draft-target-section,
.safari-draft-kit {
  min-width: 0;
  padding: 10px;
  border: 2px solid rgba(17, 17, 17, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .75);
}

.safari-draft-section-title {
  margin-bottom: 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.safari-draft-section-title h3 { font-size: clamp(18px, 2.8vw, 24px); }

.safari-draft-round-label {
  flex: none;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
}

.safari-draft-targets {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.safari-draft-target {
  min-width: 0;
  min-height: 170px;
  padding: 8px;
  position: relative;
  display: grid;
  grid-template-rows: 76px minmax(24px, auto) auto auto;
  align-content: start;
  gap: 4px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  color: var(--navy);
  background: #fff;
  box-shadow: 3px 4px 0 var(--blue);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.safari-draft-target:not(:disabled):hover {
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: 4px 7px 0 var(--blue);
}

.safari-draft-target.is-selected {
  border-color: var(--pink-dark);
  background: #fff7ca;
  box-shadow: 4px 6px 0 var(--pink);
  transform: translateY(-3px);
}

.safari-draft-target:disabled { opacity: .78; }
.safari-draft-target.is-selected:disabled { opacity: 1; }

.safari-draft-target img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(7, 26, 61, .12));
}

.safari-draft-target > strong {
  min-width: 0;
  align-self: center;
  overflow: hidden;
  font-size: 15px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safari-draft-shortcut,
.safari-draft-points {
  position: absolute;
  top: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  font-size: 10px;
  font-weight: 950;
}

.safari-draft-shortcut {
  width: 23px;
  height: 23px;
  left: 6px;
  border-radius: 7px;
  color: #fff;
  background: var(--navy);
  font-family: monospace;
}

.safari-draft-points {
  min-width: 34px;
  height: 23px;
  right: 6px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow);
}

.safari-draft-types {
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.safari-draft-types small {
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safari-draft-types small[data-type="fire"] { background: #d94c25; }
.safari-draft-types small[data-type="water"] { background: #3479c9; }
.safari-draft-types small[data-type="electric"] { color: var(--navy); background: #f2c200; }
.safari-draft-types small[data-type="psychic"],
.safari-draft-types small[data-type="poison"] { background: #9152a5; }
.safari-draft-types small[data-type="rock"],
.safari-draft-types small[data-type="ground"] { background: #87633c; }
.safari-draft-types small[data-type="ice"] { color: var(--navy); background: #7fd4e5; }

.safari-draft-target em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.safari-draft-target.is-selected em { color: var(--pink-dark); }

.safari-draft-kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 10px;
}

.safari-draft-kit-main { min-width: 0; }

.safari-draft-balls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.safari-draft-ball {
  min-width: 0;
  min-height: 58px;
  padding: 7px;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  color: var(--navy);
  background: #fff;
  box-shadow: 2px 3px 0 var(--blue);
  text-align: left;
}

.safari-draft-ball:not(:disabled):hover { transform: translateY(-2px); }

.safari-draft-ball.is-selected {
  border-color: var(--pink-dark);
  background: #fff7ca;
  box-shadow: 3px 4px 0 var(--pink);
}

.safari-draft-ball:disabled { opacity: .55; }
.safari-draft-ball.is-selected:disabled { opacity: 1; }

.safari-draft-ball-orb {
  width: 34px;
  height: 34px;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(#e34242 0 44%, var(--ink) 44% 55%, #fff 55%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.safari-draft-ball--great .safari-draft-ball-orb {
  background: linear-gradient(#3188d4 0 44%, var(--ink) 44% 55%, #fff 55%);
}

.safari-draft-ball--ultra .safari-draft-ball-orb {
  background: linear-gradient(#f0c915 0 30%, #252525 30% 44%, var(--ink) 44% 55%, #fff 55%);
}

.safari-draft-ball > span:last-child { min-width: 0; display: grid; }

.safari-draft-ball strong,
.safari-draft-ball small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safari-draft-ball strong { font-size: 12px; }
.safari-draft-ball small { color: var(--muted); font-size: 9px; font-weight: 850; }

.safari-draft-ball-key {
  position: absolute;
  right: 4px;
  top: 3px;
  color: var(--muted);
  font-family: monospace;
  font-size: 8px;
}

.safari-draft-opponent-kit {
  padding: 7px 9px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 2px dashed var(--green);
  border-radius: 12px;
  color: var(--navy);
  background: #edfaef;
}

.safari-draft-opponent-kit > span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.safari-draft-opponent-kit > div { display: grid; gap: 3px; }

.safari-draft-opponent-ball {
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.safari-draft-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.safari-draft-status {
  min-height: 36px;
  margin: 0;
  padding: 8px 11px;
  display: grid;
  align-items: center;
  border-left: 5px solid var(--green);
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.safari-draft-confirm {
  min-width: 184px;
  min-height: 48px;
  background: var(--pink-dark);
}

.safari-draft-reveal {
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  background: #fff;
  box-shadow: 5px 6px 0 var(--yellow);
}

.safari-draft-reveal-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.safari-draft-reveal-choice > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.safari-draft-reveal-choice img { width: 60px; height: 60px; object-fit: contain; }
.safari-draft-reveal-choice > span { min-width: 0; display: grid; gap: 2px; }

.safari-draft-reveal-choice strong,
.safari-draft-reveal-choice b,
.safari-draft-reveal-choice em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safari-draft-reveal-choice strong { color: var(--navy); font-size: 16px; }
.safari-draft-reveal-choice b { font-size: 9px; }
.safari-draft-reveal-choice em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 900; }
.safari-draft-reveal-choice.is-caught em { color: var(--green); }
.safari-draft-versus { color: var(--pink); font-size: 21px; font-weight: 1000; }

.safari-draft-reveal > p {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--navy);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.game-stage:fullscreen .safari-draft-shell { width: min(1120px, 100%); margin: auto; }

@media (max-width: 620px) {
  .safari-draft-shell { padding: 10px 7px 15px; gap: 8px; }
  .safari-draft-topline { grid-template-columns: 1fr; gap: 8px; }
  .safari-draft-heading { padding: 8px 10px; box-shadow: 4px 5px 0 var(--green); }
  .safari-draft-heading h3 { font-size: 22px; }
  .safari-draft-heading p { display: none; }
  .safari-draft-clock { grid-template-columns: auto auto auto minmax(60px, 1fr); align-items: center; gap: 5px; padding: 6px 9px; }
  .safari-draft-clock > span { grid-column: auto; }
  .safari-draft-clock b { font-size: 22px; }
  .safari-draft-clock small { align-self: center; padding: 0; }
  .safari-draft-clock > i { grid-column: auto; margin: 0; }
  .safari-draft-locks { gap: 4px; font-size: 9px; }
  .safari-draft-locks > span:not(:nth-child(2)) { padding: 5px 6px; }
  .safari-draft-target-section,
  .safari-draft-kit { padding: 8px; }
  .safari-draft-section-title { margin-bottom: 6px; }
  .safari-draft-section-title h3 { font-size: 17px; }
  .safari-draft-targets { gap: 5px; }
  .safari-draft-target { min-height: 143px; padding: 4px; grid-template-rows: 58px 22px auto auto; gap: 3px; border-width: 2px; }
  .safari-draft-target img { height: 58px; }
  .safari-draft-target > strong { font-size: 10px; }
  .safari-draft-shortcut { width: 18px; height: 18px; left: 3px; top: 3px; border-width: 1px; font-size: 8px; }
  .safari-draft-points { min-width: 27px; height: 18px; right: 3px; top: 3px; padding: 0 3px; border-width: 1px; font-size: 8px; }
  .safari-draft-types { gap: 2px; }
  .safari-draft-types small { padding: 2px 3px; font-size: 6px; }
  .safari-draft-target em { font-size: 7px; }
  .safari-draft-kit { grid-template-columns: 1fr; }
  .safari-draft-opponent-kit { padding: 5px 7px; }
  .safari-draft-opponent-kit > div { grid-template-columns: repeat(3, 1fr); }
  .safari-draft-opponent-ball { font-size: 8px; }
  .safari-draft-ball { min-height: 55px; padding: 5px; grid-template-columns: 28px minmax(0, 1fr); gap: 5px; }
  .safari-draft-ball-orb { width: 27px; height: 27px; border-width: 2px; }
  .safari-draft-ball strong { font-size: 9px; }
  .safari-draft-ball small { font-size: 7px; }
  .safari-draft-actions { grid-template-columns: 1fr; gap: 6px; }
  .safari-draft-confirm { width: 100%; min-height: 44px; }
  .safari-draft-reveal { padding: 7px; gap: 5px; }
  .safari-draft-reveal-choice { grid-template-columns: 43px minmax(0, 1fr); column-gap: 4px; }
  .safari-draft-reveal-choice img { width: 43px; height: 43px; }
  .safari-draft-reveal-choice strong { font-size: 11px; }
  .safari-draft-reveal-choice b,
  .safari-draft-reveal-choice em { font-size: 7px; }
}

@media (max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  .safari-draft-shell { min-height: 340px; padding: 6px; gap: 5px; }
  .safari-draft-topline { grid-template-columns: minmax(0, 1fr) 92px; gap: 6px; }
  .safari-draft-heading { padding: 5px 8px; }
  .safari-draft-heading h3 { font-size: 17px; }
  .safari-draft-heading p { display: none; }
  .safari-draft-clock { display: grid; grid-template-columns: 1fr auto; padding: 5px; }
  .safari-draft-clock > span { grid-column: 1 / -1; }
  .safari-draft-clock > i { grid-column: 1 / -1; margin-top: 3px; }
  .safari-draft-locks > span:not(:nth-child(2)) { padding: 3px 5px; }
  .safari-draft-target-section { padding: 5px; }
  .safari-draft-section-title { margin-bottom: 3px; }
  .safari-draft-section-title h3 { font-size: 14px; }
  .safari-draft-target { min-height: 103px; grid-template-rows: 38px 18px auto auto; }
  .safari-draft-target img { height: 38px; }
  .safari-draft-kit { padding: 5px; grid-template-columns: minmax(0, 1fr) 142px; gap: 5px; }
  .safari-draft-ball { min-height: 44px; }
  .safari-draft-opponent-kit > div { grid-template-columns: 1fr; }
  .safari-draft-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .safari-draft-confirm { width: auto; min-width: 150px; min-height: 36px; padding: 6px 9px; }
  .safari-draft-status { min-height: 29px; padding: 4px 7px; font-size: 9px; }
  .safari-draft-reveal { padding: 4px 7px; }
  .safari-draft-reveal-choice img { width: 36px; height: 36px; }
}

/* Evoluční pexeso */
.evolution-memory-shell {
  min-height: 550px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 8%, rgba(255, 213, 31, .35), transparent 18rem),
    radial-gradient(circle at 95% 90%, rgba(72, 167, 255, .22), transparent 21rem),
    #f7f5ee;
}

.evolution-memory-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 112px;
  align-items: stretch;
  gap: 11px;
}

.evolution-memory-turn {
  min-width: 0;
  min-height: 83px;
  padding: 11px 15px;
  display: grid;
  align-content: center;
  color: var(--navy);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--pink);
}

.evolution-memory-turn strong {
  overflow: hidden;
  margin: 1px 0;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evolution-memory-turn small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evolution-memory-scores {
  min-width: 184px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr);
  align-items: center;
  gap: 7px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
}

.evolution-memory-scores article {
  min-width: 0;
  display: grid;
  justify-items: center;
}

.evolution-memory-scores span {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.evolution-memory-scores strong {
  color: var(--navy);
  font-size: 31px;
  line-height: 1;
}

.evolution-memory-scores b { color: var(--pink); }

.evolution-memory-clock {
  padding: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--navy);
  box-shadow: 4px 5px 0 var(--blue);
}

.evolution-memory-clock > span {
  grid-column: 1 / -1;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.evolution-memory-clock b {
  font-size: 29px;
  line-height: 1;
}

.evolution-memory-clock small {
  align-self: end;
  padding-bottom: 3px;
  font-size: 11px;
  font-weight: 900;
}

.evolution-memory-clock > i {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
}

.evolution-memory-clock > i span {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: left;
  background: var(--yellow);
}

.evolution-memory-clock.is-urgent { background: var(--red); }
.evolution-memory-clock.is-evaluating { background: var(--green); }

.evolution-memory-board {
  width: 100%;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
}

.evolution-memory-card {
  min-width: 0;
  aspect-ratio: 4 / 5;
  padding: 6px;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background:
    linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, .12) 42% 48%, transparent 48%),
    var(--navy);
  box-shadow: 3px 4px 0 var(--pink);
  transition: transform .15s ease, box-shadow .15s ease;
}

.evolution-memory-card:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 4px 7px 0 var(--pink);
}

.evolution-memory-card:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

.evolution-memory-card:disabled { opacity: .78; }

.evolution-memory-card.is-revealed,
.evolution-memory-card.is-matched {
  color: var(--navy);
  background: #fff;
}

.evolution-memory-card.is-revealed { box-shadow: 3px 4px 0 var(--yellow); }

.evolution-memory-card.is-matched {
  background: #c7f6d7;
  box-shadow: 3px 4px 0 var(--green);
  opacity: 1;
}

.evolution-memory-card-back {
  grid-row: 1 / -1;
  color: var(--yellow);
  font-size: clamp(32px, 7vw, 62px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--pink);
}

.evolution-memory-card img {
  width: min(100%, 96px);
  height: min(78px, 8vw);
  object-fit: contain;
}

.evolution-memory-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(9px, 1.15vw, 13px);
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evolution-memory-card-marker {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--blue);
  font-size: 10px;
  font-weight: 1000;
}

.evolution-memory-card.is-matched .evolution-memory-card-marker { background: var(--green); }

.evolution-memory-status {
  min-height: 45px;
  margin: 0;
  padding: 9px 13px;
  display: grid;
  place-items: center;
  color: var(--navy);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.game-stage:fullscreen .evolution-memory-shell {
  width: min(1200px, 100%);
  min-height: 0;
  margin: auto;
}

@media (max-width: 760px) {
  .evolution-memory-shell { padding: 11px 8px 15px; gap: 9px; }

  .evolution-memory-topline {
    grid-template-columns: minmax(0, 1fr) 94px;
    gap: 7px;
  }

  .evolution-memory-turn { min-height: 73px; padding: 8px 11px; box-shadow: 4px 5px 0 var(--pink); }
  .evolution-memory-turn strong { font-size: 24px; }

  .evolution-memory-scores {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 5px 10px;
  }

  .evolution-memory-scores article { display: flex; align-items: baseline; gap: 5px; }
  .evolution-memory-scores strong { font-size: 23px; }
  .evolution-memory-clock { min-width: 0; padding: 7px; }
  .evolution-memory-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .evolution-memory-card { aspect-ratio: 1 / 1.08; padding: 4px; border-width: 2px; border-radius: 10px; }
  .evolution-memory-card img { height: min(58px, 14vw); }
  .evolution-memory-card strong { font-size: clamp(9px, 2.7vw, 12px); }
  .evolution-memory-card-marker { width: 18px; height: 18px; border-width: 1px; }
}

@media (max-width: 390px) {
  .evolution-memory-turn strong { font-size: 20px; }
  .evolution-memory-turn small { font-size: 9px; }
  .evolution-memory-clock > span { font-size: 8px; }
  .evolution-memory-clock b { font-size: 24px; }
  .evolution-memory-status { padding: 7px; font-size: 10px; }
}

@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .evolution-memory-shell { min-height: 330px; padding: 7px; gap: 7px; }
  .evolution-memory-topline { grid-template-columns: minmax(0, 1fr) 170px 88px; }
  .evolution-memory-turn { min-height: 57px; padding: 5px 9px; }
  .evolution-memory-turn strong { font-size: 19px; }
  .evolution-memory-scores { grid-column: auto; grid-row: auto; padding: 4px 7px; }
  .evolution-memory-scores strong { font-size: 20px; }
  .evolution-memory-clock { padding: 5px; }
  .evolution-memory-clock b { font-size: 21px; }
  .evolution-memory-board { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .evolution-memory-card { aspect-ratio: 1 / 1.08; }
  .evolution-memory-card img { height: min(43px, 7vw); }
  .evolution-memory-card strong { font-size: 8px; }
  .evolution-memory-status { min-height: 32px; padding: 5px 8px; font-size: 9px; }
}

/* Kancelářský Pictionary */
.pictionary-shell {
  min-height: 550px;
  padding: 16px;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 90, 165, .16), transparent 18rem),
    #f7f5ee;
}

.pictionary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pictionary-rounds {
  display: flex;
  gap: 7px;
}

.pictionary-rounds i {
  width: 34px;
  height: 8px;
  background: #d6d2c9;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.pictionary-rounds i.is-current { background: var(--yellow); }
.pictionary-rounds i.is-done { background: #55e895; }

.pictionary-timer {
  min-width: 74px;
  padding: 6px 10px;
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 1000;
  text-align: center;
}

.pictionary-timer.is-urgent {
  color: #fff;
  background: var(--red);
}

.pictionary-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2px 20px;
  margin: 10px 0;
}

.pictionary-brief .eyebrow { grid-column: 1 / -1; }

.pictionary-brief h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
}

.pictionary-brief p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.pictionary-board-wrap {
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 7px 0 var(--pink);
}

.pictionary-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 15 / 8;
  cursor: crosshair;
  touch-action: none;
}

.pictionary-canvas.is-readonly { cursor: default; }

.pictionary-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 11px;
}

.pictionary-toolbar button {
  min-width: 122px;
  padding: 9px 14px;
}

.pictionary-clear {
  color: var(--navy);
  background: #fff;
  box-shadow: none;
}

.pictionary-done { background: #55e895; }

.pictionary-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.pictionary-choices:not([hidden]) { display: grid; }

.pictionary-choices button {
  min-height: 52px;
  padding: 10px;
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 var(--blue);
}

.pictionary-choices button.is-correct { background: #a7f3c2; }
.pictionary-choices button.is-wrong { color: #fff; background: var(--red); }

.pictionary-feedback {
  min-height: 22px;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.game-stage:fullscreen {
  display: grid;
  align-items: center;
  padding: 20px;
  background: var(--paper-2);
}

.game-stage:fullscreen .pictionary-shell {
  width: min(1200px, 100%);
  margin: auto;
}

/* Result */
.result-screen {
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 213, 31, .55), transparent 22rem),
    var(--paper-2);
}

.result-card {
  position: relative;
  z-index: 2;
  text-align: center;
}

.result-emoji {
  display: block;
  font-size: 76px;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .15));
}

.result-card h2 {
  margin: 7px 0 8px;
  color: var(--navy);
  font-size: clamp(38px, 7vw, 68px);
  line-height: .95;
  letter-spacing: -.055em;
}

.result-copy {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.result-scores {
  max-width: 660px;
  margin: 28px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
}

.result-scores article {
  min-width: 0;
  padding: 17px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 6px 7px 0 var(--pink);
}

.result-scores article:last-child {
  box-shadow-color: var(--blue);
}

.result-scores small,
.result-scores strong,
.result-scores span {
  display: block;
}

.result-scores small {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-scores strong {
  margin: 4px 0;
  color: var(--navy);
  font-size: 52px;
  line-height: 1;
}

.result-scores span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.result-scores > div {
  font-size: 35px;
  font-weight: 1000;
}

.tournament-result {
  max-width: 760px;
  margin: -10px auto 24px;
  padding: 15px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
}

.tournament-scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.tournament-scoreline strong {
  color: var(--navy);
  font-size: 31px;
}

.tournament-scoreline span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tournament-result-games {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.tournament-result-game {
  padding: 8px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-result-game.is-won {
  border-color: var(--green);
  background: rgba(85, 232, 149, .17);
}

.tournament-result-game.is-lost {
  border-color: var(--red);
  background: rgba(255, 91, 77, .12);
}

.tournament-result-game.is-draw {
  border-color: var(--blue);
  background: rgba(72, 167, 255, .13);
}

.tournament-result-game.is-next {
  border-color: var(--pink);
  box-shadow: inset 0 0 0 1px var(--pink);
}

.pictionary-gallery {
  max-width: 960px;
  margin: 32px auto;
  text-align: left;
}

.pictionary-gallery > h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: clamp(23px, 4vw, 32px);
  letter-spacing: -.035em;
}

.pictionary-gallery > p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.pictionary-gallery-round h4 {
  margin: 24px 0 12px;
  color: var(--navy);
  font-size: 16px;
}

.pictionary-drawing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pictionary-drawing-card {
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 4px 5px 0 var(--pink);
  overflow-wrap: anywhere;
}

.pictionary-drawing-card:nth-child(2) {
  box-shadow: 4px 5px 0 var(--blue);
}

.pictionary-drawing-card canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 480;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.pictionary-drawing-prompt {
  margin: 12px 0 4px;
  color: var(--navy);
  font-size: 18px;
}

.pictionary-drawing-author {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pictionary-drawing-card button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .pictionary-drawing-grid { grid-template-columns: minmax(0, 1fr); }
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

/* Public Pictionary gallery */
.duel-nav:has(.nav-gallery-link) { grid-template-columns: 1fr auto auto 1fr; }
.public-gallery { max-width: 1120px; }
.gallery-hero { max-width: 820px; margin: 45px 0 32px; }
.gallery-hero h1 {
  margin: 12px 0 20px;
  color: var(--navy);
  font-size: clamp(38px, 7vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
}
.gallery-hero h1 em { color: var(--pink); font-style: normal; }
.gallery-hero > p { color: var(--muted); font-size: 19px; font-weight: 750; }
.gallery-hero .gallery-explainer { max-width: 630px; font-size: 14px; line-height: 1.6; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 26px 0; }
.gallery-sort { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-sort [aria-pressed="true"] { background: var(--navy); color: white; }
#gallery-count { color: var(--muted); font-size: 13px; font-weight: 800; }
.public-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.public-drawing-card { box-shadow: 4px 5px 0 var(--blue); }
.public-drawing-card:nth-child(3n + 1) { box-shadow: 4px 5px 0 var(--pink); }
.public-drawing-card:nth-child(3n) { box-shadow: 4px 5px 0 var(--yellow); }
.public-drawing-card h3 a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gallery-like { min-width: 90px; }
.gallery-like[aria-pressed="true"] { background: var(--pink); color: white; }
.gallery-card-status { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.gallery-card-status:empty { display: none; }
.pictionary-publish { margin: 8px 0 0 6px; }
.gallery-status { color: var(--muted); font-weight: 700; }
.gallery-more { margin: 30px 0; text-align: center; }
.gallery-invitation { margin: 40px 0 25px; padding: clamp(20px, 4vw, 36px); border: 2px solid var(--ink); border-radius: 18px; background: var(--paper-2); }
.gallery-invitation h2 { margin: 0; color: var(--navy); font-size: clamp(23px, 4vw, 34px); letter-spacing: -.035em; }
.gallery-invitation p { max-width: 650px; color: var(--muted); font-weight: 700; line-height: 1.6; }
.gallery-invitation a { display: inline-flex; padding: 12px 18px; border-radius: 999px; box-shadow: 0 5px 14px rgba(7, 26, 61, .2); font-weight: 900; text-decoration: none; }
.gallery-detail { max-width: 800px; margin: 25px auto; }
.gallery-detail h2 { color: var(--navy); font-size: 28px; }
.public-gallery button:focus-visible, .public-gallery a:focus-visible, .pictionary-publish:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (max-width: 900px) {
  .public-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .public-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-hero { margin-top: 28px; }

}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  width: 10px;
  height: 18px;
  position: absolute;
  top: -30px;
  animation: confetti-fall var(--duration) linear var(--delay) both;
}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 780px, 0) rotate(760deg); }
}

footer {
  width: min(1100px, calc(100% - 32px));
  margin: -27px auto 30px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

noscript {
  display: block;
  padding: 20px;
  color: #fff;
  background: var(--red);
  font-weight: 900;
  text-align: center;
}

@media (max-width: 820px) {
  .duel-hero {
    min-height: 210px;
    background: rgba(255, 250, 240, .95);
  }

  .hero-stamp {
    position: absolute;
    right: 22px;
    top: 20px;
    opacity: .55;
    transform: scale(.75) rotate(9deg);
  }

  .game-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card {
    min-height: 175px;
  }

  .setup-grid,
  .lobby-game-panel,
  .curling-shell {
    grid-template-columns: 1fr;
  }

  .compact-picker,
  .lobby-tournament-note {
    grid-column: 1;
  }

  .practice-panel .secondary-button {
    margin-top: 24px;
  }

  .compact-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .curling-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .curling-sidebar > .eyebrow,
  .curling-sidebar > h3,
  .curling-status {
    grid-column: 1 / -1;
  }

  .curling-legend {
    margin: 0;
  }

  .curling-help {
    padding: 0;
    border: 0;
  }

  .curling-live-score {
    grid-column: 1 / -1;
    margin: 0;
  }

  .taskstack-shell {
    grid-template-columns: minmax(230px, 1fr) minmax(205px, 250px);
  }

  .taskstack-sidebar {
    padding: 13px;
  }

  .pong-shell {
    grid-template-columns: 1fr;
  }

  .pong-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px 16px;
  }

  .pong-sidebar > .eyebrow,
  .pong-sidebar > h3,
  .pong-status {
    grid-column: 1 / -1;
  }

  .pong-mini-score,
  .pong-help {
    margin: 0;
  }

  .coffee-layout {
    grid-template-columns: minmax(205px, .68fr) minmax(0, 1.5fr);
  }

  .coffee-group {
    padding: 7px;
  }

  .coffee-group button {
    min-height: 58px;
  }

  .printer-console {
    grid-template-columns: 155px 1fr;
  }
}

@media (max-width: 620px) {
  .duel-nav:has(.nav-gallery-link) { grid-template-columns: 1fr auto; }
  .duel-nav:has(.nav-gallery-link) .nav-brand { display: none; }
  .duel-nav {
    width: calc(100% - 18px);
    grid-template-columns: auto 1fr;
    top: 6px;
    margin-top: 8px;
  }

  .nav-brand {
    justify-self: end;
  }

  .connection-pill {
    display: none;
  }

  .duel-wrap,
  footer {
    width: calc(100% - 18px);
  }

  .duel-hero {
    min-height: 190px;
    padding: 24px 20px;
  }

  .duel-hero .hero-title {
    font-size: 52px;
  }

  .duel-hero p {
    max-width: 92%;
    font-size: 17px;
  }

  .hero-stamp {
    right: -8px;
    top: 7px;
    transform: scale(.53) rotate(9deg);
  }

  .screen {
    padding: 17px 13px;
  }

  .game-picker {
    grid-template-columns: 1fr;
  }

  .game-category-tabs {
    padding: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .game-category-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .match-format-picker {
    grid-template-columns: 1fr;
  }

  .compact-formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #setup-game-picker .game-card {
    min-height: 164px;
    padding-right: 18px;
    grid-template-rows: auto auto;
    row-gap: 5px;
  }

  #setup-game-picker .game-icon {
    grid-row: 1 / 3;
  }

  #setup-game-picker .difficulty {
    position: static;
    grid-column: 2;
    justify-self: start;
    margin: 0;
  }

  .lobby-top {
    grid-template-columns: 1fr;
  }

  .room-ticket {
    min-width: 0;
  }

  .players {
    grid-template-columns: 1fr;
  }

  .versus {
    height: 16px;
    text-align: center;
  }

  .compact-picker {
    grid-template-columns: 1fr;
  }

  .compact-picker .game-card {
    min-height: 128px;
  }

  .lobby-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lobby-actions .quiet-button {
    margin: 0;
    order: 3;
  }

  .ready-button,
  .start-button {
    width: 100%;
  }

  .lobby-status {
    text-align: center;
  }

  .game-screen {
    padding: 9px;
  }

  .match-bar {
    padding: 9px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .match-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .local-player {
    grid-column: 1;
    grid-row: 2;
  }

  .remote-player {
    grid-column: 2;
    grid-row: 2;
  }

  .match-player > b {
    min-width: 34px;
    font-size: 23px;
  }

  .game-stage,
  .game-intro,
  .panic-shell,
  .deadline-shell,
  .alttab-shell,
  .battleship-shell,
  .taskstack-shell,
  .pong-shell,
  .escape-shell,
  .jargon-shell,
  .coffee-shell,
  .calendar-shell,
  .printer-shell,
  .pictionary-shell {
    min-height: 510px;
  }

  .panic-shell {
    padding: 10px;
  }

  .panic-grid {
    min-height: 410px;
    gap: 6px;
    padding: 6px;
  }

  .panic-slot {
    min-height: 110px;
  }

  .panic-event {
    inset: 3px;
    width: calc(100% - 6px);
    padding: 5px;
    box-shadow: 3px 3px 0 var(--ink);
  }

  .deadline-shell {
    padding: 16px 8px;
  }

  .deadline-gauge {
    height: 78px;
  }

  .deadline-hold {
    min-width: 90%;
  }

  .curling-shell {
    padding: 7px;
  }

  .curling-canvas {
    max-height: none;
  }

  .curling-sidebar {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .curling-sidebar > * {
    grid-column: 1 !important;
  }

  .alttab-shell {
    padding: 13px 8px;
  }

  .alttab-topline {
    padding: 0 5px;
  }

  .alttab-rounds {
    gap: 4px;
  }

  .alttab-rounds i {
    width: 13px;
  }

  .monitor-work {
    min-height: 235px;
    padding: 12px;
  }

  .alttab-alert {
    width: calc(100% - 20px);
    padding: 11px;
  }

  .alttab-alert strong {
    font-size: 16px;
  }

  .alttab-button {
    min-width: 82%;
  }

  .battleship-shell {
    padding: 14px 9px 22px;
  }

  .battleship-boards {
    grid-template-columns: minmax(0, 320px);
    gap: 26px;
  }

  .battleship-grid {
    gap: 4px;
    box-shadow: 5px 6px 0 var(--navy);
  }

  .battleship-grid.own-grid {
    box-shadow: 5px 6px 0 var(--pink);
  }

  .taskstack-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "board" "controls" "sidebar";
    padding: 12px 8px 20px;
  }

  .taskstack-canvas {
    max-height: none;
  }

  .taskstack-sidebar {
    width: min(100%, 330px);
    margin: 0 auto;
  }

  .pong-shell {
    padding: 9px;
    gap: 13px;
  }

  .pong-sidebar {
    display: block;
    padding: 14px;
  }

  .pong-status {
    min-height: 44px;
  }

  .pong-mini-score {
    margin: 10px 0;
  }

  .pong-help {
    margin: 10px 0;
  }

  .escape-shell {
    padding: 10px 7px 15px;
  }

  .escape-hud {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .escape-hud > div {
    padding: 6px;
  }

  .escape-canvas {
    min-height: 155px;
  }

  .escape-bottom {
    display: grid;
    gap: 10px;
  }

  .escape-status {
    text-align: center;
  }

  .escape-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .escape-controls button {
    min-width: 0;
  }

  .jargon-shell {
    padding: 13px 7px;
  }

  .jargon-rounds {
    gap: 4px;
  }

  .jargon-rounds i {
    width: 20px;
  }

  .jargon-card {
    padding: 14px 10px;
    box-shadow: 5px 6px 0 var(--pink);
  }

  .jargon-preview {
    min-height: 88px;
    padding: 11px;
  }

  .jargon-answer {
    min-height: 72px;
  }

  .jargon-tiles {
    min-height: 155px;
    gap: 6px;
  }

  .jargon-tiles button {
    padding: 8px 10px;
    font-size: 13px;
  }

  .coffee-shell {
    padding: 13px 7px 18px;
  }

  .coffee-rounds,
  .calendar-rounds,
  .printer-rounds {
    gap: 4px;
  }

  .coffee-rounds i,
  .calendar-rounds i,
  .printer-rounds i {
    width: 18px;
  }

  .coffee-layout {
    grid-template-columns: 1fr;
  }

  .coffee-ticket {
    min-height: 305px;
    padding: 20px 17px;
    transform: none;
  }

  .coffee-station {
    padding: 10px;
  }

  .coffee-groups {
    grid-template-columns: 1fr;
  }

  .coffee-group button {
    min-height: 59px;
  }

  .calendar-shell {
    padding: 13px 7px 18px;
  }

  .calendar-brief {
    grid-template-columns: auto 1fr;
    padding: 9px;
  }

  .calendar-icon {
    display: none;
  }

  .calendar-clock {
    min-width: 0;
    grid-column: 1 / -1;
    padding: 4px;
  }

  .calendar-grid {
    min-height: 322px;
    grid-template-rows: repeat(8, minmax(34px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    padding: 7px;
    gap: 5px;
  }

  .calendar-slot {
    min-height: 35px;
    padding: 4px 5px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px;
  }

  .calendar-slot span,
  .calendar-slot b {
    font-size: 10px;
  }

  .printer-shell {
    padding: 13px 7px 18px;
  }

  .printer-console {
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .printer-machine {
    min-height: 104px;
  }

  .printer-machine > span {
    font-size: 67px;
  }

  .printer-paper {
    height: 55px;
  }

  .printer-display {
    min-height: 132px;
    padding: 13px;
  }

  .printer-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .printer-actions button {
    min-height: 58px;
  }

  .pictionary-shell {
    padding: 12px 7px 16px;
  }

  .pictionary-brief {
    grid-template-columns: 1fr;
  }

  .pictionary-brief p {
    margin-top: 5px;
    text-align: left;
  }

  .pictionary-board-wrap {
    box-shadow: 4px 5px 0 var(--pink);
  }

  .pictionary-canvas {
    min-height: 260px;
  }

  .pictionary-toolbar button {
    flex: 1;
    min-width: 0;
  }

  .pictionary-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .pictionary-choices button {
    min-height: 58px;
    padding: 8px 6px;
    font-size: 12px;
  }

  .result-scores {
    gap: 8px;
  }

  .result-scores article {
    padding: 12px 7px;
  }

  .result-scores strong {
    font-size: 40px;
  }
}

/* Oakovo PokéBingo */
.oak-bingo-shell {
  --oak-blue: #153f67;
  --oak-blue-light: #d9edf2;
  --oak-red: #d64232;
  --oak-cream: #f4ecd4;
  min-height: 550px;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
  color: #172226;
  background:
    linear-gradient(rgba(21, 63, 103, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 63, 103, .055) 1px, transparent 1px),
    radial-gradient(circle at 82% 12%, rgba(214, 66, 50, .16), transparent 19rem),
    #d7e5df;
  background-size: 19px 19px, 19px 19px, auto, auto;
}

.oak-bingo-topline {
  display: grid;
  grid-template-columns: minmax(92px, .72fr) minmax(190px, 1.35fr) minmax(92px, .72fr) minmax(110px, .8fr);
  gap: 8px;
}

.oak-bingo-progress,
.oak-bingo-score,
.oak-bingo-discards,
.oak-bingo-clock {
  min-height: 61px;
  border: 2px solid #172226;
  box-shadow: 3px 4px 0 rgba(23, 34, 38, .22);
}

.oak-bingo-progress,
.oak-bingo-score,
.oak-bingo-discards {
  padding: 8px 11px;
  display: grid;
  align-content: center;
  background: var(--oak-cream);
}

.oak-bingo-topline small,
.oak-bingo-specimen-label,
.oak-bingo-section-title span {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .16em;
}

.oak-bingo-topline strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}

.oak-bingo-score {
  color: #fff;
  background: var(--oak-red);
}

.oak-bingo-score strong { font-size: 27px; }
.oak-bingo-discards strong { color: var(--oak-red); letter-spacing: .08em; }

.oak-bingo-clock {
  padding: 7px 9px;
  color: #fff;
  background: var(--oak-blue);
  transition: background-color .18s ease;
}

.oak-bingo-clock > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.oak-bingo-clock b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

.oak-bingo-clock > i {
  height: 8px;
  margin-top: 5px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(0, 0, 0, .27);
}

.oak-bingo-clock > i span {
  width: 100%;
  height: 100%;
  display: block;
  background: #8ed7c3;
  transition: width 50ms linear;
}

.oak-bingo-clock.is-urgent { background: var(--oak-red); }
.oak-bingo-clock.is-urgent > i span { background: var(--yellow); }

.oak-bingo-arena {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(285px, .75fr);
  gap: 10px;
}

.oak-bingo-board-panel,
.oak-bingo-card-panel {
  border: 2px solid #172226;
  box-shadow: 4px 5px 0 rgba(23, 34, 38, .24);
}

.oak-bingo-board-panel {
  padding: 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(21, 63, 103, .07) 24px),
    #fbf5e4;
}

.oak-bingo-section-title {
  min-height: 42px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.oak-bingo-section-title span { color: var(--oak-red); }

.oak-bingo-section-title h3 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}

.oak-bingo-section-title > small {
  padding: 5px 8px;
  border: 1px solid rgba(23, 34, 38, .4);
  background: rgba(255, 255, 255, .48);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.oak-bingo-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.oak-bingo-board > button {
  min-height: 111px;
  padding: 8px;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 5px;
  overflow: hidden;
  color: #172226;
  text-align: left;
  border: 2px solid #172226;
  border-radius: 3px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 2px 3px 0 var(--oak-blue);
  transition: transform .13s ease, box-shadow .13s ease, background-color .13s ease;
}

.oak-bingo-board > button:not(:disabled):hover,
.oak-bingo-board > button:not(:disabled):focus-visible {
  z-index: 2;
  background: #fff;
  box-shadow: 4px 5px 0 var(--yellow);
  transform: translate(-1px, -1px) rotate(-.4deg);
}

.oak-bingo-board > button:focus-visible {
  outline: 4px solid var(--blue-dark);
  outline-offset: 2px;
}

.oak-bingo-board > button:disabled { opacity: 1; }

.oak-bingo-board > button.is-invalid {
  background: #ffe1dd;
  box-shadow: 3px 4px 0 var(--oak-red);
  animation: oak-bingo-nope .24s ease-in-out 2;
}

@keyframes oak-bingo-nope {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.oak-bingo-shortcut {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--oak-blue);
  font-size: 9px;
  font-weight: 1000;
}

.oak-bingo-rule {
  min-height: 49px;
  padding-right: 17px;
  display: grid;
  align-content: start;
  gap: 3px;
}

.oak-bingo-rule small {
  color: var(--oak-red);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.oak-bingo-rule strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.45vw, 16px);
  line-height: 1.05;
}

.oak-bingo-occupant:not([hidden]) {
  min-height: 38px;
  padding: 3px 5px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: #fff;
  border: 1px solid #172226;
  background: var(--oak-blue);
}

.oak-bingo-occupant img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .18));
}

.oak-bingo-occupant b {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.oak-bingo-board > button.is-filled {
  background: #dcebe5;
  box-shadow: 2px 3px 0 #4e846f;
}

.oak-bingo-lines {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.oak-bingo-lines span {
  height: 7px;
  overflow: hidden;
  color: transparent;
  border: 1px solid rgba(23, 34, 38, .55);
  background: rgba(23, 34, 38, .12);
}

.oak-bingo-lines span.is-complete { background: #4e9d73; }
.oak-bingo-lines span.is-new { background: var(--yellow); animation: oak-bingo-stamp .36s ease-out; }

@keyframes oak-bingo-stamp {
  from { transform: scale(1.5); }
  to { transform: scale(1); }
}

.oak-bingo-card-panel {
  padding: 11px;
  display: grid;
  align-content: start;
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 255, 255, .25), transparent 9rem),
    var(--oak-blue);
  color: #fff;
}

.oak-bingo-specimen-label {
  width: fit-content;
  padding: 4px 7px;
  color: #172226;
  background: var(--yellow);
  transform: rotate(-1deg);
}

.oak-bingo-specimen {
  min-height: 128px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.oak-bingo-portrait {
  width: 116px;
  height: 116px;
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid #172226;
  border-radius: 50% 48% 46% 52%;
  background:
    linear-gradient(transparent 48%, rgba(23, 34, 38, .2) 49% 51%, transparent 52%),
    var(--oak-blue-light);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
}

.oak-bingo-portrait img {
  width: 105px;
  height: 105px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(23, 34, 38, .22));
}

.oak-bingo-portrait > span {
  display: none;
  color: var(--oak-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  font-weight: 1000;
}

.oak-bingo-portrait.is-missing img { display: none; }
.oak-bingo-portrait.is-missing > span { display: block; }

.oak-bingo-identity small {
  color: #acd9e5;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.oak-bingo-identity h3 {
  margin: 2px 0 7px;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.8vw, 31px);
  line-height: .95;
}

.oak-bingo-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.oak-bingo-types span {
  padding: 3px 6px;
  color: #172226;
  border: 1px solid #172226;
  background: #fff;
  font-size: 8px;
  font-weight: 1000;
  text-transform: uppercase;
}

.oak-bingo-facts {
  margin: 8px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.oak-bingo-facts > div {
  min-height: 42px;
  padding: 5px 7px;
  color: #172226;
  border: 1px solid #172226;
  background: var(--oak-cream);
}

.oak-bingo-facts dt {
  color: #5f6b69;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.oak-bingo-facts dd {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.oak-bingo-discard {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  color: #172226;
  border: 2px solid #172226;
  border-radius: 3px;
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--oak-red);
}

.oak-bingo-discard kbd {
  padding: 1px 5px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .55);
  font: inherit;
  font-size: 9px;
}

.oak-bingo-discard:disabled {
  color: rgba(255, 255, 255, .7);
  background: #526478;
  box-shadow: none;
  opacity: 1;
}

.oak-bingo-card-help {
  margin: 9px 1px 0;
  color: #dbeaf0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.oak-bingo-status-row {
  min-height: 39px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.oak-bingo-feedback,
.oak-bingo-new-lines {
  min-height: 35px;
  margin: 0;
  padding: 8px 10px;
  display: grid;
  align-items: center;
  border: 2px solid #172226;
  background: var(--oak-cream);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
}

.oak-bingo-feedback.is-error { color: #fff; background: var(--oak-red); }
.oak-bingo-feedback.is-success { color: #fff; background: #39795d; }
.oak-bingo-new-lines { min-width: 175px; color: #fff; background: var(--oak-blue); }

.game-stage:fullscreen .oak-bingo-shell {
  width: min(1180px, 100%);
  margin: auto;
}

@media (max-width: 760px) {
  .oak-bingo-shell { min-height: 510px; padding: 8px; gap: 8px; }

  .oak-bingo-topline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .oak-bingo-clock { grid-column: 1 / -1; grid-row: 1; min-height: 49px; }
  .oak-bingo-progress, .oak-bingo-score, .oak-bingo-discards { min-height: 48px; padding: 6px 8px; }
  .oak-bingo-topline strong { font-size: 18px; }
  .oak-bingo-score strong { font-size: 22px; }
  .oak-bingo-arena { grid-template-columns: 1fr; }
  .oak-bingo-card-panel { grid-row: 1; }
  .oak-bingo-specimen { min-height: 93px; grid-template-columns: 86px minmax(0, 1fr); }
  .oak-bingo-portrait { width: 86px; height: 86px; }
  .oak-bingo-portrait img { width: 80px; height: 80px; }
  .oak-bingo-portrait > span { font-size: 54px; }
  .oak-bingo-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oak-bingo-facts > div { min-height: 37px; padding: 4px 6px; }
  .oak-bingo-board > button { min-height: 96px; padding: 6px; }
  .oak-bingo-rule strong { font-size: clamp(11px, 3.2vw, 15px); }
  .oak-bingo-occupant:not([hidden]) { grid-template-columns: 31px minmax(0, 1fr); }
  .oak-bingo-occupant img { width: 31px; height: 31px; }
  .oak-bingo-status-row { grid-template-columns: 1fr; gap: 5px; }
  .oak-bingo-feedback, .oak-bingo-new-lines { min-height: 32px; }
  .oak-bingo-new-lines { min-width: 0; }
}

@media (max-width: 390px) {
  .oak-bingo-board-panel { padding: 7px; }
  .oak-bingo-section-title h3 { font-size: 18px; }
  .oak-bingo-section-title > small { display: none; }
  .oak-bingo-board { gap: 5px; }
  .oak-bingo-board > button { min-height: 88px; border-width: 1px; box-shadow: 1px 2px 0 var(--oak-blue); }
  .oak-bingo-rule { min-height: 43px; padding-right: 13px; }
  .oak-bingo-rule small { font-size: 6px; }
  .oak-bingo-rule strong { font-size: 10px; }
  .oak-bingo-shortcut { width: 17px; height: 17px; top: 3px; right: 3px; }
  .oak-bingo-occupant:not([hidden]) { min-height: 31px; padding: 2px; grid-template-columns: 27px minmax(0, 1fr); }
  .oak-bingo-occupant img { width: 27px; height: 27px; }
  .oak-bingo-occupant b { font-size: 8px; }
}

@media (min-width: 761px) and (max-height: 760px) {
  .oak-bingo-shell { padding: 8px; gap: 7px; }
  .oak-bingo-progress, .oak-bingo-score, .oak-bingo-discards, .oak-bingo-clock { min-height: 51px; padding-block: 5px; }
  .oak-bingo-board > button { min-height: 96px; }
  .oak-bingo-specimen { min-height: 105px; grid-template-columns: 92px minmax(0, 1fr); }
  .oak-bingo-portrait { width: 92px; height: 92px; }
  .oak-bingo-portrait img { width: 86px; height: 86px; }
  .oak-bingo-facts > div { min-height: 37px; }
  .oak-bingo-card-help { margin-top: 6px; }
}

/* Post-it Sprint */
.postit-sprint-shell {
  min-height: 550px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: center;
  gap: 9px;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, .17), transparent 13rem),
    repeating-linear-gradient(20deg, rgba(94, 53, 22, .04) 0 2px, transparent 2px 8px),
    #d5a46f;
}

.postit-sprint-topline,
.inbox-zero-topline,
.cursor-maze-topline,
.meeting-tetris-topline {
  width: min(900px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.postit-sprint-rounds,
.inbox-zero-rounds,
.cursor-maze-rounds,
.meeting-tetris-rounds {
  display: flex;
  gap: 6px;
}

.postit-sprint-rounds i,
.inbox-zero-rounds i,
.cursor-maze-rounds i,
.meeting-tetris-rounds i {
  width: 27px;
  height: 10px;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.postit-sprint-rounds i.is-current,
.inbox-zero-rounds i.is-current,
.cursor-maze-rounds i.is-current,
.meeting-tetris-rounds i.is-current {
  box-shadow: 0 0 0 3px var(--yellow);
}

.postit-sprint-rounds i.is-good,
.inbox-zero-rounds i.is-good,
.cursor-maze-rounds i.is-good,
.meeting-tetris-rounds i.is-good { background: #55e895; }

.postit-sprint-rounds i.is-bad,
.inbox-zero-rounds i.is-bad,
.cursor-maze-rounds i.is-bad,
.meeting-tetris-rounds i.is-bad { background: #ff5b4d; }

.postit-sprint-score,
.inbox-zero-score,
.cursor-maze-score,
.meeting-tetris-score {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}

.postit-sprint-brief {
  width: min(900px, 100%);
  min-height: 66px;
  margin-inline: auto;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 3px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 5px 0 rgba(17, 17, 17, .24);
}

.postit-sprint-brief > div:first-child {
  min-width: 100px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.postit-sprint-next {
  color: var(--pink);
  font-size: 38px;
  line-height: .8;
}

.postit-sprint-brief p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.postit-sprint-clock,
.inbox-zero-clock,
.cursor-maze-clock,
.meeting-tetris-clock {
  min-width: 78px;
  padding: 7px 9px;
  color: #fff;
  background: var(--navy);
  text-align: center;
}

.postit-sprint-clock b,
.inbox-zero-clock b,
.cursor-maze-clock b,
.meeting-tetris-clock b {
  font-size: 24px;
  line-height: 1;
}

.postit-sprint-clock small,
.inbox-zero-clock small,
.cursor-maze-clock small,
.meeting-tetris-clock small {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 900;
}

.postit-sprint-timer,
.inbox-zero-timer,
.paper-shredder-timer {
  width: min(900px, 100%);
  height: 9px;
  margin-inline: auto;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
}

.postit-sprint-timer span,
.inbox-zero-timer span,
.paper-shredder-timer span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform: scaleX(1);
  transform-origin: left center;
}

.postit-sprint-board {
  width: min(900px, 100%);
  min-height: 355px;
  margin-inline: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  border: 5px solid #704420;
  background:
    radial-gradient(circle, rgba(73, 40, 17, .2) 0 1px, transparent 1.5px) 0 0 / 15px 15px,
    #b97e49;
  box-shadow: inset 0 0 0 3px #e4bd8d, 7px 8px 0 rgba(17, 17, 17, .28);
}

.postit-note {
  min-width: 0;
  min-height: 94px;
  padding: 7px;
  position: relative;
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, .38);
  border-radius: 2px 3px 8px 2px;
  background: var(--yellow);
  box-shadow: 3px 5px 7px rgba(64, 34, 12, .3);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(27px, 4.5vw, 42px);
  transform: rotate(var(--postit-rotation));
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}

.postit-note::after {
  content: "";
  width: 32%;
  height: 9px;
  position: absolute;
  top: -5px;
  left: 34%;
  background: rgba(255, 255, 255, .5);
  transform: rotate(-1deg);
}

.postit-note.is-pink { background: #ff91c5; }
.postit-note.is-blue { background: #8bcbff; }
.postit-note.is-green { background: #8be8b9; }

.postit-note:hover:not(:disabled),
.postit-note:focus-visible {
  z-index: 2;
  transform: translateY(-2px) rotate(var(--postit-rotation)) scale(1.025);
}

.postit-note:disabled { opacity: 1; }
.postit-note.is-done {
  filter: grayscale(.75);
  opacity: .18;
  transform: rotate(var(--postit-rotation)) scale(.82);
}

.postit-note.is-wrong { animation: postit-sprint-nope .16s ease-in-out 2; }

@keyframes postit-sprint-nope {
  0%, 100% { transform: translateX(0) rotate(var(--postit-rotation)); }
  50% { transform: translateX(6px) rotate(var(--postit-rotation)); }
}

.postit-sprint-feedback,
.inbox-zero-feedback,
.cursor-maze-feedback,
.paper-shredder-feedback,
.meeting-tetris-feedback {
  min-height: 21px;
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

/* Inbox Zero */
.inbox-zero-shell {
  min-height: 550px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 12px;
  background:
    linear-gradient(rgba(13, 87, 200, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 87, 200, .045) 1px, transparent 1px),
    #eaf5fb;
  background-size: 25px 25px;
}

.inbox-zero-window {
  width: min(900px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 7px 8px 0 var(--blue);
}

.inbox-zero-toolbar {
  min-height: 38px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: var(--navy);
}

.inbox-zero-toolbar span {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: var(--pink);
}

.inbox-zero-toolbar span:nth-child(2) { background: var(--yellow); }
.inbox-zero-toolbar span:nth-child(3) { background: #55e895; }

.inbox-zero-toolbar b {
  margin-left: 5px;
  font-size: 10px;
  letter-spacing: .08em;
}

.inbox-zero-message {
  min-height: 205px;
  padding: 25px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background:
    linear-gradient(100deg, rgba(72, 167, 255, .09), transparent 55%),
    #fff;
}

.inbox-zero-avatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: 31px;
  font-weight: 1000;
}

.inbox-zero-sender {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.inbox-zero-copy h3 {
  margin: 5px 0 9px;
  color: var(--navy);
  font-size: clamp(23px, 4vw, 35px);
  line-height: 1;
}

.inbox-zero-copy p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.inbox-zero-timer {
  width: calc(100% - 34px);
  margin-bottom: 15px;
}

.inbox-zero-actions {
  padding: 0 17px 17px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.inbox-zero-actions button {
  min-height: 76px;
  padding: 10px;
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: 3px 4px 0 var(--ink);
}

.inbox-zero-actions button small {
  position: absolute;
  top: 5px;
  left: 7px;
  color: var(--muted);
  font-size: 9px;
}

.inbox-zero-actions button span { font-size: 23px; }
.inbox-zero-actions button b { font-size: 14px; }
.inbox-zero-actions button.is-correct { color: #fff; background: var(--green); opacity: 1; }
.inbox-zero-actions button.is-wrong { color: #fff; background: var(--red); opacity: 1; }

.inbox-zero-feedback {
  min-height: 43px;
  padding: 11px 14px;
  border-top: 2px solid var(--ink);
  background: #eef7ff;
}

/* Kurzorový labyrint */
.cursor-maze-shell {
  min-height: 550px;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  grid-template-areas: "top top" "board bottom";
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 213, 31, .3), transparent 17rem),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(7, 26, 61, .04) 25px),
    #eef5ef;
}

.cursor-maze-topline {
  grid-area: top;
  display: grid;
  grid-template-columns: 1fr auto auto;
}

.cursor-maze-board-wrap {
  grid-area: board;
  min-width: 0;
  display: grid;
  place-items: center;
}

.cursor-maze-canvas {
  width: min(100%, 720px);
  height: auto;
  display: block;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 6px 7px 0 var(--pink);
  cursor: crosshair;
  touch-action: none;
}

.cursor-maze-bottom {
  grid-area: bottom;
  align-self: stretch;
  padding: 17px;
  display: grid;
  align-content: center;
  gap: 18px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--paper-2);
  box-shadow: 5px 6px 0 var(--yellow);
}

.cursor-maze-feedback {
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: left;
}

.cursor-maze-controls {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 48px);
  justify-content: center;
  gap: 6px;
}

.cursor-maze-controls button {
  width: 52px;
  height: 48px;
  padding: 0;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 23px;
}

.cursor-maze-controls [data-maze-direction="up"] { grid-column: 2; }
.cursor-maze-controls [data-maze-direction="left"] { grid-column: 1; grid-row: 2; }
.cursor-maze-controls [data-maze-direction="down"] { grid-column: 2; grid-row: 2; }
.cursor-maze-controls [data-maze-direction="right"] { grid-column: 3; grid-row: 2; }

/* Papírová skartovačka */
.paper-shredder-shell {
  min-height: 550px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #071a3d;
  background-size: 25px 25px;
}

.paper-shredder-topline {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 15px;
}

.paper-shredder-topline .eyebrow { color: #ff8cc3; }

.paper-shredder-topline h3 {
  margin: 3px 0 0;
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1;
}

.paper-shredder-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.paper-shredder-stats > span {
  min-height: 50px;
  padding: 7px;
  display: grid;
  align-content: center;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, .08);
  text-align: center;
}

.paper-shredder-stats small,
.paper-shredder-stats b { display: block; }

.paper-shredder-stats small {
  color: #b9c8de;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.paper-shredder-stats b {
  margin-top: 2px;
  font-size: 20px;
}

.paper-shredder-clock { color: var(--navy); background: var(--yellow) !important; }
.paper-shredder-clock small { color: var(--navy); }
.paper-shredder-clock b { white-space: nowrap; }

.paper-shredder-timer {
  width: 100%;
  border-color: #fff;
  background: rgba(255, 255, 255, .17);
}

.paper-shredder-machine {
  min-height: 355px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 80px;
  align-items: stretch;
  overflow: hidden;
  border: 3px solid #000;
  border-radius: 14px;
  background: #d8dce2;
  box-shadow: 6px 7px 0 var(--pink);
}

.paper-shredder-intake,
.paper-shredder-archive {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #fff;
  background: #202733;
  text-align: center;
}

.paper-shredder-intake {
  border-right: 4px solid #000;
  box-shadow: 7px 0 14px rgba(0, 0, 0, .26);
}

.paper-shredder-intake b {
  font-size: 10px;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.paper-shredder-intake span {
  color: var(--yellow);
  font-size: 28px;
}

.paper-shredder-archive {
  color: #fff;
  border-left: 4px solid #000;
  background: var(--green);
  box-shadow: -7px 0 14px rgba(0, 0, 0, .2);
}

.paper-shredder-archive span { font-size: 31px; }
.paper-shredder-archive b { font-size: 9px; writing-mode: vertical-rl; }

.paper-shredder-lanes {
  min-width: 0;
  padding: 8px 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(17, 17, 17, .08) 0 2px, transparent 2px 30px),
    #b9c0c9;
}

.paper-shredder-lane {
  min-height: 75px;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-block: 2px dashed rgba(17, 17, 17, .52);
  background: rgba(255, 255, 255, .2);
}

.paper-shredder-shortcut {
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  border-right: 2px solid var(--ink);
  background: var(--navy);
  font-size: 14px;
  font-weight: 1000;
}

.paper-shredder-track {
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.paper-shredder-document {
  width: min(205px, 42%);
  min-height: 58px;
  padding: 7px 9px;
  position: absolute;
  top: 50%;
  left: -7%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-2);
  box-shadow: 3px 4px 0 rgba(17, 17, 17, .36);
  text-align: left;
  transform: translate(-50%, -50%) rotate(var(--document-tilt));
  will-change: left;
}

.paper-shredder-document:hover:not(:disabled),
.paper-shredder-document:focus-visible {
  z-index: 4;
  background: var(--yellow);
  transform: translate(-50%, -52%) rotate(var(--document-tilt)) scale(1.025);
}

.paper-shredder-document > span:first-child { font-size: 23px; }
.paper-shredder-document b,
.paper-shredder-document small { display: block; }
.paper-shredder-document b {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paper-shredder-document small {
  width: fit-content;
  margin-top: 3px;
  padding: 2px 4px;
  color: #fff;
  background: var(--red);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .06em;
}

.paper-shredder-document.is-shredded { animation: shredder-eat .22s ease-in forwards; }
.paper-shredder-document.is-destroyed { animation: shredder-bad .22s ease-in forwards; }

@keyframes shredder-eat {
  to { opacity: 0; transform: translate(-50%, 75%) rotate(10deg) scale(.25); }
}

@keyframes shredder-bad {
  50% { background: #ff796f; transform: translate(-50%, -50%) rotate(-7deg) scale(1.08); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(8deg) scale(.8); }
}

.paper-shredder-shell.is-mistake .paper-shredder-machine { animation: shredder-machine-nope .14s ease-in-out 2; }

@keyframes shredder-machine-nope {
  50% { transform: translateX(4px); filter: saturate(1.7); }
}

.paper-shredder-feedback {
  min-height: 38px;
  padding: 9px 12px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .08);
}

.paper-shredder-feedback.is-bad { border-color: #ff796f; background: rgba(201, 34, 27, .45); }

/* Meeting Tetris */
.meeting-tetris-shell {
  min-height: 550px;
  padding: 13px;
  display: grid;
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 15, 123, .12), transparent 20rem),
    linear-gradient(rgba(13, 87, 200, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 87, 200, .04) 1px, transparent 1px),
    #eef5fb;
  background-size: auto, 24px 24px, 24px 24px, auto;
}

.meeting-tetris-topline {
  display: grid;
  grid-template-columns: 1fr auto auto;
}

.meeting-tetris-layout {
  width: min(960px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  align-items: stretch;
  gap: 11px;
}

.meeting-tetris-calendar,
.meeting-tetris-queue {
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--paper-2);
}

.meeting-tetris-calendar { padding: 11px; box-shadow: 5px 6px 0 var(--blue); }
.meeting-tetris-queue { padding: 13px; box-shadow: 5px 6px 0 var(--pink); }

.meeting-tetris-calendar-head {
  min-height: 43px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.meeting-tetris-calendar-head h3,
.meeting-tetris-queue h3 {
  margin: 2px 0 7px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
}

.meeting-tetris-grid {
  min-height: 378px;
  padding: 7px;
  display: grid;
  grid-template-rows: repeat(6, minmax(54px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 5px;
  border: 2px solid var(--ink);
  background: #fff;
}

.meeting-tetris-grid button {
  min-width: 0;
  min-height: 54px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fbfd;
  box-shadow: none;
  text-align: left;
}

.meeting-tetris-grid button:hover:not(:disabled) { background: #fff4b9; }
.meeting-tetris-grid button:disabled { opacity: 1; }
.meeting-tetris-grid button span { color: var(--muted); font-size: 9px; font-weight: 900; }
.meeting-tetris-grid button b { overflow: hidden; font-size: 10px; line-height: 1.08; text-overflow: ellipsis; }
.meeting-tetris-grid button.is-busy { color: #fff; border-color: var(--navy); background: var(--navy); }
.meeting-tetris-grid button.is-busy span { color: #bfd0e8; }
.meeting-tetris-grid button.is-placed { border-color: #176745; background: #bcebd3; }
.meeting-tetris-grid button.is-placed.is-start { border-left: 6px solid var(--green); }
.meeting-tetris-grid button.is-wrong { color: #fff; background: var(--red); animation: meeting-tetris-nope .17s ease-in-out 2; }

@keyframes meeting-tetris-nope {
  50% { transform: translateX(4px); }
}

.meeting-tetris-cards {
  min-height: 284px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
}

.meeting-tetris-cards button {
  min-width: 0;
  min-height: 78px;
  padding: 8px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 3px 0 var(--line);
  text-align: left;
}

.meeting-tetris-cards button span,
.meeting-tetris-cards button b { display: block; }
.meeting-tetris-cards button span { color: var(--pink-dark); font-size: 9px; font-weight: 1000; }
.meeting-tetris-cards button b { margin-top: 4px; font-size: 11px; line-height: 1.05; }
.meeting-tetris-cards button.is-selected { background: var(--yellow); box-shadow: 3px 4px 0 var(--ink); transform: translateY(-1px); }
.meeting-tetris-cards button.is-placed { opacity: .25; text-decoration: line-through; }

.meeting-tetris-tools {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.meeting-tetris-tools button {
  min-height: 40px;
  padding: 7px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--yellow);
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 10px;
}

.meeting-tetris-help {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
}

.meeting-tetris-feedback {
  width: min(960px, 100%);
  min-height: 36px;
  margin-inline: auto;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}

/* Access Denied */
.access-denied-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 224, 92, .16), transparent 18rem),
    radial-gradient(circle at 88% 90%, rgba(255, 15, 123, .14), transparent 21rem),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #071c36;
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

.access-denied-topline,
.access-denied-layout,
.access-denied-feedback {
  width: min(960px, 100%);
  margin-inline: auto;
}

.access-denied-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.access-denied-rounds {
  min-width: 0;
  display: flex;
  gap: 6px;
}

.access-denied-rounds i {
  width: 52px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  transition: background .18s ease, transform .18s ease;
}

.access-denied-rounds i.is-current { background: var(--yellow); transform: translateY(-1px); }
.access-denied-rounds i.is-good { background: #55d994; }
.access-denied-rounds i.is-bad { background: #ff655c; }

.access-denied-score {
  min-width: 108px;
  padding: 7px 11px;
  color: var(--navy);
  border: 2px solid #fff;
  border-radius: 7px;
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--pink);
  font-size: 12px;
  text-align: center;
}

.access-denied-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
  align-items: stretch;
  gap: 11px;
}

.access-denied-terminal,
.access-denied-controls {
  min-width: 0;
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.access-denied-terminal {
  min-height: 414px;
  padding: 13px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(115px, 1fr);
  align-content: start;
  gap: 8px;
  border-color: #88a4c9;
  background: rgba(2, 15, 31, .9);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, .42);
}

.access-denied-terminal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.access-denied-terminal-head .eyebrow { color: #8db9ed; }

.access-denied-terminal-head h3 {
  margin: 2px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-denied-lock {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #88a4c9;
  border-radius: 9px;
  background: #102b4c;
  font-size: 26px;
  box-shadow: inset 0 0 15px rgba(92, 190, 255, .15);
}

.access-denied-clock {
  min-width: 67px;
  padding: 6px 7px;
  color: var(--navy);
  border: 2px solid #fff;
  border-radius: 6px;
  background: var(--yellow);
  text-align: center;
}

.access-denied-clock b,
.access-denied-clock small { display: block; }
.access-denied-clock b { font-size: 18px; line-height: 1; }
.access-denied-clock small { margin-top: 2px; font-size: 7px; font-weight: 1000; text-transform: uppercase; }

.access-denied-timer {
  height: 8px;
  overflow: hidden;
  border: 1px solid #88a4c9;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}

.access-denied-timer span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform-origin: left;
}

.access-denied-current {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.access-denied-slot {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #6e87a8;
  border: 2px dashed #5c789d;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  font-size: 23px;
  font-style: normal;
  font-weight: 1000;
}

.access-denied-slot.is-filled {
  color: #fff;
  border-style: solid;
  border-color: var(--yellow);
  background: #163961;
  box-shadow: 0 0 0 2px rgba(255, 224, 92, .1), inset 0 0 19px rgba(255, 224, 92, .08);
  font-size: 31px;
}

.access-denied-slot.is-revealed { border-color: #ff655c; background: #531c2e; }

.access-denied-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #b9cbe3;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.access-denied-legend span { display: flex; align-items: center; gap: 5px; }
.access-denied-legend i { width: 9px; height: 9px; border-radius: 50%; }
.access-denied-legend .is-exact { background: #55d994; }
.access-denied-legend .is-misplaced { background: var(--yellow); }
.access-denied-legend .is-absent { background: #657995; }

.access-denied-history {
  min-height: 115px;
  max-height: 179px;
  padding: 7px;
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: auto;
  border: 1px solid #4e688a;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  scrollbar-color: #6c86a8 transparent;
}

.access-denied-history:empty::before {
  min-height: 98px;
  display: grid;
  place-items: center;
  color: #6882a4;
  content: "Žádné pokusy · terminál zatím mlčí";
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.access-denied-attempt {
  min-height: 38px;
  padding: 4px 7px;
  display: grid;
  grid-template-columns: 25px minmax(105px, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid #345276;
  border-radius: 6px;
  background: #0f2949;
}

.access-denied-attempt.is-solved { border-color: #55d994; background: #124132; }
.access-denied-attempt > small { color: #829abc; font-size: 8px; font-weight: 1000; }

.access-denied-attempt-code {
  min-width: 0;
  display: flex;
  gap: 4px;
}

.access-denied-attempt-code i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #577497;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  font-size: 15px;
  font-style: normal;
}

.access-denied-attempt-code i.is-exact {
  border-color: #55d994;
  background: #1b7555;
  box-shadow: inset 0 0 0 1px #55d994;
}

.access-denied-attempt-code i.is-misplaced {
  border-color: var(--yellow);
  background: #725f13;
  box-shadow: inset 0 0 0 1px var(--yellow);
}

.access-denied-attempt-code i.is-absent {
  opacity: .38;
  filter: grayscale(1);
}

.access-denied-attempt-result { display: flex; gap: 5px; }

.access-denied-attempt-result b {
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 8px;
  white-space: nowrap;
}

.access-denied-attempt-result .is-exact { color: #062f20; background: #55d994; }
.access-denied-attempt-result .is-misplaced { color: var(--navy); background: var(--yellow); }

.access-denied-controls {
  padding: 15px;
  display: grid;
  grid-template-rows: auto auto minmax(36px, auto) 1fr auto auto;
  align-content: start;
  gap: 8px;
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: 6px 7px 0 var(--pink);
}

.access-denied-controls .eyebrow { color: var(--pink-dark); }

.access-denied-controls h3 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1;
}

.access-denied-rule {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.access-denied-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 7px;
}

.access-denied-keypad button {
  min-width: 0;
  min-height: 76px;
  padding: 6px 3px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 3px 0 var(--line);
}

.access-denied-keypad button:hover:not(:disabled),
.access-denied-keypad button:focus-visible { background: var(--yellow); transform: translateY(-1px); }
.access-denied-keypad button[aria-pressed="true"] { background: #dceaff; }
.access-denied-keypad button:disabled { opacity: .38; }

.access-denied-keypad small {
  position: absolute;
  top: 4px;
  left: 5px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 1000;
}

.access-denied-keypad span { font-size: 26px; }
.access-denied-keypad b { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.access-denied-actions {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 7px;
}

.access-denied-actions button {
  min-height: 43px;
  padding: 7px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 9px;
}

.access-denied-actions .access-denied-submit { color: #fff; background: var(--green); }
.access-denied-actions button:disabled { opacity: .32; box-shadow: none; }

.access-denied-shortcuts {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.access-denied-feedback {
  min-height: 38px;
  padding: 8px 11px;
  display: grid;
  place-items: center;
  border: 2px solid #88a4c9;
  background: rgba(2, 15, 31, .86);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.access-denied-shell.is-mistake .access-denied-terminal { animation: access-denied-nope .14s ease-in-out 2; }
.access-denied-shell.is-cracked .access-denied-terminal { box-shadow: 0 0 0 3px #55d994, 6px 7px 0 rgba(0, 0, 0, .42); }
.access-denied-shell.is-denied .access-denied-terminal { box-shadow: 0 0 0 3px #ff655c, 6px 7px 0 rgba(0, 0, 0, .42); }

@keyframes access-denied-nope {
  50% { transform: translateX(4px); filter: saturate(1.5); }
}

/* Harcov na korunu */
.harcov-price-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  color: var(--navy);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    radial-gradient(circle at 8% 10%, rgba(255, 213, 31, .9), transparent 17rem),
    linear-gradient(135deg, #57c5b7, #238e93);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.harcov-price-topline,
.harcov-price-layout {
  width: min(960px, 100%);
  margin-inline: auto;
}

.harcov-price-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.harcov-price-rounds {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(12px, 1fr));
  gap: 5px;
}

.harcov-price-rounds i {
  height: 8px;
  border: 1px solid rgba(7, 26, 61, .62);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: background .18s ease, transform .18s ease;
}

.harcov-price-rounds i.is-current { background: var(--yellow); transform: translateY(-1px); }
.harcov-price-rounds i.is-good { background: #42cc83; }
.harcov-price-rounds i.is-bad { background: #ff5c57; }

.harcov-price-score {
  min-width: 106px;
  padding: 7px 11px;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--pink-dark);
  box-shadow: 3px 4px 0 var(--yellow);
  font-size: 12px;
  text-align: center;
}

.harcov-price-layout {
  display: grid;
  grid-template-columns: minmax(280px, .83fr) minmax(0, 1.17fr);
  align-items: stretch;
  gap: 15px;
}

.harcov-price-receipt {
  min-width: 0;
  min-height: 420px;
  padding: 19px 20px 22px;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px;
  border: 3px solid var(--ink);
  color: #241e18;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(80, 65, 47, .035) 6px),
    #fff9e9;
  box-shadow: 7px 8px 0 rgba(7, 26, 61, .38);
  transform: rotate(-.45deg);
}

.harcov-price-receipt::before,
.harcov-price-receipt::after {
  height: 8px;
  position: absolute;
  right: -3px;
  left: -3px;
  content: "";
  background: linear-gradient(135deg, transparent 5px, #fff9e9 0) 0 0 / 10px 10px repeat-x;
}

.harcov-price-receipt::before { top: -8px; transform: rotate(180deg); }
.harcov-price-receipt::after { bottom: -8px; }

.harcov-price-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.harcov-price-brand > span {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 2px solid #241e18;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 24px;
}

.harcov-price-brand div { min-width: 0; display: grid; }
.harcov-price-brand b { font-size: 17px; letter-spacing: .05em; }
.harcov-price-brand small { margin-top: 2px; font-size: 8px; font-weight: 950; letter-spacing: .11em; }

.harcov-price-brand em {
  padding: 5px;
  border: 1px solid #766b5d;
  color: #766b5d;
  font-family: monospace;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.harcov-price-rule {
  height: 2px;
  border-top: 2px dashed #887c6c;
}

.harcov-price-date {
  color: #6f6559;
  font-family: monospace;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.harcov-price-meal {
  min-height: 157px;
  padding: 14px 0;
  display: grid;
  align-content: center;
  gap: 8px;
  border-block: 1px dashed #b0a391;
}

.harcov-price-meal > span {
  color: var(--pink-dark);
  font-family: monospace;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.harcov-price-meal h3 {
  margin: 0;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.04;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.harcov-price-receipt-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  font-family: monospace;
  font-weight: 1000;
}

.harcov-price-receipt-bottom span { font-size: 10px; }
.harcov-price-receipt-bottom strong { font-size: 21px; white-space: nowrap; }

.harcov-price-stamp {
  padding: 6px 9px;
  position: absolute;
  right: 18px;
  bottom: 56px;
  border: 3px solid var(--pink-dark);
  border-radius: 5px;
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 1000;
  line-height: .9;
  text-align: center;
  transform: rotate(-7deg);
}

.harcov-price-panel {
  min-width: 0;
  min-height: 420px;
  padding: 17px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-content: start;
  gap: 11px;
  border: 3px solid var(--ink);
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 95% 5%, rgba(72, 167, 255, .24), transparent 16rem),
    var(--navy);
  box-shadow: 7px 8px 0 var(--pink);
}

.harcov-price-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.harcov-price-question-row .eyebrow { color: #8ec7ff; }

.harcov-price-question-row h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1;
  letter-spacing: -.035em;
}

.harcov-price-clock {
  min-width: 69px;
  padding: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3px;
  border: 2px solid #fff;
  border-radius: 8px;
  color: var(--navy);
  background: var(--yellow);
  text-align: center;
}

.harcov-price-clock b { font-size: 20px; line-height: 1; }
.harcov-price-clock small { padding-bottom: 1px; font-size: 8px; font-weight: 1000; }

.harcov-price-timer {
  height: 8px;
  overflow: hidden;
  border: 1px solid #7090bc;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.harcov-price-timer span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transform-origin: left;
}

.harcov-price-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 9px;
}

.harcov-price-options button {
  min-width: 0;
  min-height: 93px;
  padding: 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2px 7px;
  border: 2px solid #fff;
  border-radius: 12px;
  color: var(--navy);
  background: #fff;
  box-shadow: 3px 4px 0 var(--blue);
  text-align: left;
}

.harcov-price-options button:hover:not(:disabled) {
  background: #fff8cf;
  box-shadow: 4px 5px 0 var(--yellow);
}

.harcov-price-options button:disabled { opacity: 1; }

.harcov-price-options button > span {
  width: 29px;
  height: 29px;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  border: 2px solid var(--navy);
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-size: 11px;
}

.harcov-price-options strong {
  min-width: 0;
  font-size: clamp(18px, 2.2vw, 25px);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.harcov-price-options small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.harcov-price-options button.is-correct {
  border-color: #43db8b;
  background: #dffff0;
  box-shadow: 4px 5px 0 #43db8b;
}

.harcov-price-options button.is-correct > span { border-color: #087847; background: #087847; }

.harcov-price-options button.is-wrong {
  border-color: #ff655c;
  background: #ffe3df;
  box-shadow: 4px 5px 0 #ff655c;
}

.harcov-price-options button.is-wrong > span { border-color: #b8251e; background: #b8251e; }

.harcov-price-feedback {
  min-height: 39px;
  margin: 0;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  border-left: 5px solid var(--yellow);
  color: var(--navy);
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.harcov-price-shell.is-correct .harcov-price-feedback { border-color: #43db8b; background: #dffff0; }
.harcov-price-shell.is-wrong .harcov-price-feedback { border-color: #ff655c; background: #ffe3df; }

.harcov-price-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #a9bddd;
  font-size: 8px;
  font-weight: 850;
}

.harcov-price-source a { color: #fff; font-weight: 1000; text-underline-offset: 2px; white-space: nowrap; }

/* KPI ruleta */
.kpi-roulette-shell {
  min-height: 550px;
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 11% 12%, rgba(255, 213, 31, .23), transparent 20rem),
    radial-gradient(circle at 91% 86%, rgba(255, 15, 123, .25), transparent 22rem),
    linear-gradient(135deg, #091c42, #102d5d 54%, #071a3d);
}

.kpi-roulette-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.kpi-roulette-rounds {
  min-width: 0;
  flex: 1;
  display: flex;
  gap: 7px;
}

.kpi-roulette-rounds i {
  height: 9px;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  transition: background .2s ease, transform .2s ease;
}

.kpi-roulette-rounds i.is-current {
  background: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 213, 31, .16);
  transform: scaleY(1.45);
}

.kpi-roulette-rounds i.is-done { background: var(--blue); }
.kpi-roulette-rounds i.is-jackpot { background: var(--pink); }

.kpi-roulette-score {
  min-width: 132px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 10px;
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 4px 5px 0 var(--pink);
}

.kpi-roulette-score small {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.kpi-roulette-score strong { font-size: 27px; line-height: 1; }

.kpi-roulette-layout {
  min-height: 440px;
  display: grid;
  grid-template-columns: minmax(340px, 1.12fr) minmax(280px, .88fr);
  gap: 14px;
}

.kpi-roulette-machine,
.kpi-roulette-panel {
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
}

.kpi-roulette-machine {
  min-height: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    rgba(0, 0, 0, .14);
  background-size: 22px 22px;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, .25);
}

.kpi-roulette-machine > p {
  max-width: 340px;
  margin: 0;
  color: #c9d8f1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.kpi-roulette-wheel-wrap {
  width: min(330px, 100%);
  position: relative;
  aspect-ratio: 1;
  filter: drop-shadow(8px 11px 0 rgba(0, 0, 0, .28));
}

.kpi-roulette-pointer {
  width: 58px;
  height: 52px;
  position: absolute;
  left: 50%;
  top: -17px;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 39px;
  line-height: 1;
  text-shadow: 0 3px 0 var(--ink);
  transform: translateX(-50%);
  transform-origin: 50% 10%;
}

.kpi-roulette-shell.is-spinning .kpi-roulette-pointer {
  animation: kpi-pointer-rattle .13s ease-in-out infinite alternate;
}

@keyframes kpi-pointer-rattle {
  from { transform: translateX(-50%) rotate(-8deg); }
  to { transform: translateX(-50%) rotate(8deg); }
}

.kpi-roulette-wheel {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border: 8px solid #fff8e7;
  border-radius: 50%;
  outline: 4px solid var(--ink);
  background: conic-gradient(from -22.5deg,
    #ff397f 0 45deg,
    #ffd51f 45deg 90deg,
    #48a7ff 90deg 135deg,
    #f27435 135deg 180deg,
    #31c47c 180deg 225deg,
    #b78cff 225deg 270deg,
    #ff655c 270deg 315deg,
    #63d5df 315deg 360deg);
  box-shadow: inset 0 0 0 3px rgba(17, 17, 17, .35), inset 0 0 30px rgba(0, 0, 0, .2);
  transition: transform 1.15s cubic-bezier(.12, .66, .12, 1);
  will-change: transform;
}

.kpi-roulette-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 35% 27%, rgba(255, 255, 255, .4), transparent 31%);
}

.kpi-roulette-segment {
  width: 42px;
  height: 52px;
  margin: -26px -21px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--ink);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
  transform: rotate(var(--segment-angle)) translateY(-119px);
}

.kpi-roulette-segment b { font-size: 25px; font-weight: 1000; }
.kpi-roulette-segment small { margin-top: 2px; font-size: 16px; }

.kpi-roulette-hub {
  width: 92px;
  height: 92px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 7px solid #fff8e7;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 2px rgba(255, 255, 255, .25);
  font-size: 23px;
  font-weight: 1000;
  letter-spacing: -.07em;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.kpi-roulette-panel {
  padding: clamp(18px, 3vw, 29px);
  display: grid;
  grid-template-rows: auto auto minmax(48px, auto) 1fr auto auto;
  align-content: center;
  gap: 11px;
  color: var(--navy);
  background:
    linear-gradient(100deg, rgba(255, 213, 31, .16), transparent 55%),
    #fff8e7;
  box-shadow: 6px 7px 0 var(--pink);
}

.kpi-roulette-panel .eyebrow { color: var(--pink-dark); }

.kpi-roulette-panel h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 1000;
  letter-spacing: -.055em;
  line-height: .94;
}

.kpi-roulette-copy {
  margin: 0;
  color: #4d5d77;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.kpi-roulette-history {
  min-height: 102px;
  margin: 0;
  padding: 8px;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  border: 2px dashed #b8ad98;
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
  list-style: none;
}

.kpi-roulette-history:empty::before {
  content: "Zatím pouze odborné odhady";
  grid-column: 1 / -1;
  align-self: center;
  color: #8b806c;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.kpi-roulette-history > li {
  min-height: 39px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  border: 1px solid #c7bca7;
  border-radius: 7px;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(7, 26, 61, .14);
  animation: kpi-result-in .26s ease-out both;
}

@keyframes kpi-result-in {
  from { opacity: 0; transform: translateY(7px) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

.kpi-roulette-history small { color: #807560; font-size: 9px; font-weight: 900; }
.kpi-roulette-history b { font-size: 16px; }
.kpi-roulette-history em { font-size: 15px; font-style: normal; }

.kpi-roulette-button {
  min-height: 58px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--pink);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.kpi-roulette-button:disabled { opacity: .72; }
.kpi-roulette-shortcut { color: #746b5b; font-size: 8px; font-weight: 900; text-align: center; text-transform: uppercase; }

.kpi-roulette-feedback {
  min-height: 41px;
  margin: 0;
  padding: 9px 12px;
  display: grid;
  place-items: center;
  border-left: 5px solid var(--yellow);
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 760px) {
  .kpi-roulette-shell { min-height: 510px; padding: 8px; gap: 8px; }
  .kpi-roulette-layout { min-height: 440px; grid-template-columns: 1fr; grid-template-rows: minmax(244px, .9fr) minmax(190px, .8fr); gap: 8px; }
  .kpi-roulette-machine { padding: 10px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .kpi-roulette-wheel-wrap { width: min(240px, 100%); grid-row: 1 / 3; justify-self: center; }
  .kpi-roulette-machine > p { width: 105px; font-size: 7px; line-height: 1.35; }
  .kpi-roulette-pointer { width: 45px; height: 42px; top: -14px; font-size: 31px; }
  .kpi-roulette-wheel { inset: 7px; border-width: 6px; }
  .kpi-roulette-segment { width: 34px; height: 41px; margin: -20px -17px; transform: rotate(var(--segment-angle)) translateY(-84px); }
  .kpi-roulette-segment b { font-size: 19px; }
  .kpi-roulette-segment small { font-size: 12px; }
  .kpi-roulette-hub { width: 68px; height: 68px; border-width: 5px; font-size: 18px; }
  .kpi-roulette-panel { padding: 11px 13px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 6px 10px; }
  .kpi-roulette-panel .eyebrow { grid-column: 1; }
  .kpi-roulette-panel h3 { grid-column: 1; font-size: 23px; }
  .kpi-roulette-copy { display: none; }
  .kpi-roulette-history { min-height: 79px; grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 5px; gap: 4px; }
  .kpi-roulette-history > li { min-height: 31px; padding: 3px; grid-template-columns: 1fr; place-items: center; gap: 0; }
  .kpi-roulette-history > li small,
  .kpi-roulette-history > li em { display: none; }
  .kpi-roulette-button { min-width: 154px; min-height: 47px; grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 7px 10px; font-size: 11px; }
  .kpi-roulette-shortcut { display: none; }
  .kpi-roulette-feedback { min-height: 35px; padding: 6px 8px; font-size: 9px; }
}

@media (max-width: 390px) {
  .kpi-roulette-score { min-width: 104px; padding-inline: 7px; }
  .kpi-roulette-score small { font-size: 7px; }
  .kpi-roulette-score strong { font-size: 22px; }
  .kpi-roulette-layout { grid-template-rows: minmax(229px, .9fr) minmax(195px, .8fr); }
  .kpi-roulette-machine { grid-template-columns: 1fr; }
  .kpi-roulette-wheel-wrap { width: min(215px, 100%); grid-row: auto; }
  .kpi-roulette-machine > p { display: none; }
  .kpi-roulette-segment { transform: rotate(var(--segment-angle)) translateY(-74px); }
  .kpi-roulette-panel { grid-template-columns: minmax(0, 1fr) 126px; }
  .kpi-roulette-button { min-width: 0; }
}

.game-stage:fullscreen .postit-sprint-shell,
.game-stage:fullscreen .inbox-zero-shell,
.game-stage:fullscreen .cursor-maze-shell,
.game-stage:fullscreen .paper-shredder-shell,
.game-stage:fullscreen .meeting-tetris-shell,
.game-stage:fullscreen .access-denied-shell,
.game-stage:fullscreen .harcov-price-shell,
.game-stage:fullscreen .kpi-roulette-shell {
  width: min(1180px, 100%);
  margin: auto;
}

@media (max-width: 760px) {
  .postit-sprint-shell,
  .inbox-zero-shell,
  .cursor-maze-shell,
  .paper-shredder-shell,
  .meeting-tetris-shell { min-height: 510px; padding: 8px; }

  .postit-sprint-rounds i,
  .inbox-zero-rounds i,
  .cursor-maze-rounds i,
  .meeting-tetris-rounds i { width: 18px; }

  .postit-sprint-brief {
    min-height: 61px;
    grid-template-columns: minmax(85px, auto) minmax(0, 1fr) auto;
    gap: 7px;
  }

  .postit-sprint-brief > div:first-child { min-width: 0; grid-template-columns: 1fr; gap: 1px; }
  .postit-sprint-next { font-size: 28px; }
  .postit-sprint-brief p { font-size: 10px; }
  .postit-sprint-clock,
  .inbox-zero-clock,
  .cursor-maze-clock,
  .meeting-tetris-clock { min-width: 62px; padding: 6px; }
  .postit-sprint-clock b,
  .inbox-zero-clock b,
  .cursor-maze-clock b,
  .meeting-tetris-clock b { font-size: 19px; }

  .postit-sprint-board {
    min-height: 408px;
    padding: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border-width: 4px;
    box-shadow: inset 0 0 0 2px #e4bd8d, 4px 5px 0 rgba(17, 17, 17, .28);
  }

  .postit-note { min-height: 88px; font-size: 29px; }

  .inbox-zero-shell { align-content: start; gap: 8px; }
  .inbox-zero-message {
    min-height: 195px;
    padding: 16px 12px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
  }
  .inbox-zero-avatar { width: 52px; height: 52px; font-size: 23px; box-shadow: 3px 4px 0 var(--ink); }
  .inbox-zero-copy h3 { font-size: 22px; }
  .inbox-zero-copy p { font-size: 12px; }
  .inbox-zero-clock { grid-column: 1 / -1; justify-self: stretch; }
  .inbox-zero-actions { padding: 0 9px 10px; gap: 6px; }
  .inbox-zero-actions button { min-height: 69px; padding: 7px 3px; grid-template-columns: 1fr; gap: 1px; }
  .inbox-zero-actions button span { font-size: 20px; }
  .inbox-zero-actions button b { font-size: 10px; }

  .cursor-maze-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "board" "bottom";
    align-content: start;
  }
  .cursor-maze-canvas { width: 100%; border-width: 3px; box-shadow: 4px 5px 0 var(--pink); }
  .cursor-maze-bottom {
    padding: 9px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    box-shadow: 3px 4px 0 var(--yellow);
  }
  .cursor-maze-feedback { min-height: 46px; text-align: left; }
  .cursor-maze-controls { grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 38px); gap: 4px; }
  .cursor-maze-controls button { width: 42px; height: 38px; font-size: 18px; }

  .paper-shredder-topline { grid-template-columns: 1fr; align-items: start; gap: 8px; }
  .paper-shredder-topline h3 { font-size: 19px; }
  .paper-shredder-stats > span { min-height: 43px; padding: 4px; }
  .paper-shredder-stats b { font-size: 17px; }
  .paper-shredder-machine { min-height: 355px; grid-template-columns: minmax(0, 1fr); }
  .paper-shredder-intake,
  .paper-shredder-archive { display: none; }
  .paper-shredder-lane { min-height: 76px; }
  .paper-shredder-document { width: min(185px, 56%); min-height: 58px; }

  .meeting-tetris-shell { align-content: start; }
  .meeting-tetris-layout { grid-template-columns: 1fr; }
  .meeting-tetris-queue { grid-row: 1; padding: 9px; }
  .meeting-tetris-calendar { grid-row: 2; padding: 8px; }
  .meeting-tetris-cards { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .meeting-tetris-cards button { min-height: 62px; padding: 6px; }
  .meeting-tetris-cards button b { font-size: 9px; }
  .meeting-tetris-help { display: none; }
  .meeting-tetris-calendar-head { min-height: 35px; }
  .meeting-tetris-grid { min-height: 332px; grid-template-rows: repeat(6, minmax(46px, 1fr)); padding: 5px; gap: 4px; }
  .meeting-tetris-grid button { min-height: 46px; padding: 3px 4px; grid-template-columns: 39px minmax(0, 1fr); }
  .meeting-tetris-grid button b { font-size: 9px; }

  .access-denied-shell { min-height: 510px; padding: 8px; align-content: start; }
  .access-denied-rounds i { width: 34px; }
  .access-denied-layout { grid-template-columns: 1fr; gap: 8px; }
  .access-denied-terminal { min-height: 342px; padding: 9px; grid-template-rows: auto auto auto auto minmax(88px, 1fr); }
  .access-denied-terminal-head { gap: 7px; }
  .access-denied-terminal-head h3 { font-size: 15px; }
  .access-denied-lock { width: 42px; height: 42px; font-size: 22px; }
  .access-denied-clock { min-width: 60px; padding: 5px; }
  .access-denied-current { min-height: 61px; gap: 6px; }
  .access-denied-slot { width: 54px; height: 54px; font-size: 19px; }
  .access-denied-slot.is-filled { font-size: 26px; }
  .access-denied-history { min-height: 88px; max-height: 128px; }
  .access-denied-history:empty::before { min-height: 72px; }
  .access-denied-legend { flex-wrap: wrap; gap: 4px 12px; }
  .access-denied-controls { padding: 10px; grid-template-rows: auto auto auto auto auto; }
  .access-denied-controls .eyebrow,
  .access-denied-shortcuts { display: none; }
  .access-denied-controls h3 { font-size: 17px; }
  .access-denied-keypad { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 5px; }
  .access-denied-keypad button { min-height: 57px; padding: 4px 2px; }
  .access-denied-keypad span { font-size: 21px; }
  .access-denied-keypad b { font-size: 7px; }
  .access-denied-actions button { min-height: 40px; }

  .harcov-price-shell { min-height: 510px; padding: 8px; align-content: start; }
  .harcov-price-layout { grid-template-columns: 1fr; gap: 9px; }
  .harcov-price-receipt { min-height: 193px; padding: 12px 14px 15px; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 6px; transform: none; }
  .harcov-price-brand > span { width: 35px; height: 35px; font-size: 19px; }
  .harcov-price-brand b { font-size: 14px; }
  .harcov-price-meal { min-height: 77px; padding: 7px 0; gap: 4px; }
  .harcov-price-meal h3 { font-size: 20px; }
  .harcov-price-stamp { right: 13px; bottom: 41px; padding: 4px 6px; font-size: 7px; }
  .harcov-price-receipt-bottom strong { font-size: 17px; }
  .harcov-price-panel { min-height: 294px; padding: 10px; gap: 7px; }
  .harcov-price-question-row h3 { font-size: 20px; }
  .harcov-price-clock { min-width: 63px; padding: 5px; }
  .harcov-price-options { gap: 6px; }
  .harcov-price-options button { min-height: 62px; padding: 6px; grid-template-columns: 26px minmax(0, 1fr); }
  .harcov-price-options button > span { width: 25px; height: 25px; }
  .harcov-price-options strong { font-size: 18px; }
  .harcov-price-feedback { min-height: 34px; padding: 5px 7px; }
}

@media (max-width: 390px) {
  .postit-sprint-brief p { display: none; }
  .postit-sprint-brief { grid-template-columns: 1fr auto; }
  .postit-sprint-board { min-height: 375px; }
  .postit-note { min-height: 79px; }
  .inbox-zero-message { min-height: 210px; }
  .inbox-zero-copy h3 { font-size: 19px; }
  .cursor-maze-topline,
  .meeting-tetris-topline { gap: 5px; }
  .cursor-maze-bottom { grid-template-columns: 1fr; }
  .cursor-maze-feedback { min-height: 35px; text-align: center; }
  .paper-shredder-stats small { font-size: 6px; }
  .paper-shredder-document { width: min(165px, 63%); padding-inline: 6px; }
  .paper-shredder-document b { font-size: 9px; }
  .meeting-tetris-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-denied-score { min-width: 94px; padding-inline: 7px; }
  .access-denied-attempt { grid-template-columns: 20px minmax(92px, 1fr) auto; padding-inline: 5px; gap: 4px; }
  .access-denied-attempt-code { gap: 2px; }
  .access-denied-attempt-code i { width: 24px; height: 24px; font-size: 13px; }
  .access-denied-attempt-result { gap: 2px; }
  .access-denied-attempt-result b { padding-inline: 3px; font-size: 7px; }
  .access-denied-rule { font-size: 9px; }
  .access-denied-keypad b { display: none; }
  .harcov-price-score { min-width: 88px; padding-inline: 6px; }
  .harcov-price-rounds { gap: 3px; }
  .harcov-price-receipt { min-height: 183px; }
  .harcov-price-brand em,
  .harcov-price-options small,
  .harcov-price-source span { display: none; }
  .harcov-price-meal h3 { font-size: 17px; }
  .harcov-price-options strong { font-size: 16px; }
  .harcov-price-source { justify-content: end; }
}

@media (min-width: 761px) and (max-height: 720px) {
  .postit-sprint-shell,
  .inbox-zero-shell,
  .cursor-maze-shell,
  .paper-shredder-shell,
  .meeting-tetris-shell { padding: 8px; gap: 7px; }
  .postit-sprint-board { min-height: 315px; }
  .postit-note { min-height: 80px; }
  .inbox-zero-message { min-height: 168px; padding-block: 15px; }
  .cursor-maze-canvas { width: min(100%, 660px); }
  .paper-shredder-machine { min-height: 315px; }
  .paper-shredder-lane { min-height: 65px; }
  .meeting-tetris-grid { min-height: 332px; grid-template-rows: repeat(6, minmax(47px, 1fr)); }
  .meeting-tetris-grid button { min-height: 47px; }
  .meeting-tetris-cards { min-height: 250px; }
  .meeting-tetris-cards button { min-height: 68px; }
  .access-denied-shell { padding: 8px; gap: 7px; }
  .access-denied-terminal { min-height: 370px; }
  .access-denied-keypad button { min-height: 65px; }
  .harcov-price-shell { min-height: 430px; padding: 8px; gap: 7px; }
  .harcov-price-receipt,
  .harcov-price-panel { min-height: 355px; }
  .harcov-price-options button { min-height: 75px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}