/* Tajná slova: the two teams on top, then what is going on (the clue, the
   clock, the captain's form), the 5 × 5 board in the room that is left, the
   guesser's buttons and the log of clues. On a wide screen the board stands
   on the left and everything else beside it.
   A card is a slip of ivory paper; uncovered it takes its owner's colour.
   Captains see a covered card tinted, with a small mark in the corner. */
.tajna{
  --tj-red:#c92a2a;--tj-blue:#2c6aa0;--tj-none:#cdc3b0;--tj-black:#17170f;
  --tj-red-soft:#f8d3d9;--tj-blue-soft:#cfe0ef;
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto minmax(44px,auto);
  grid-template-areas:"teams" "now" "main" "bar" "log";
  overflow:hidden;
}

/* ── teams ───────────────────────────────────────────────────────────── */
.tajna-teams{grid-area:teams;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px 2px;width:100%;max-width:640px;justify-self:center}
.tajna-team{
  display:flex;align-items:center;gap:6px;min-width:0;padding:4px 6px;
  border:1.5px solid var(--line);border-radius:12px;background:rgba(13,18,10,.34);
  border-left-width:5px;
  transition:border-color .2s,background-color .2s;
}
.tajna-team.red{border-left-color:var(--tj-red)}
.tajna-team.blue{border-left-color:var(--tj-blue)}
.tajna-team.on{border-color:var(--gold);background:rgba(118,176,67,.11)}
.tajna-team.on.red{border-left-color:var(--tj-red)}
.tajna-team.on.blue{border-left-color:var(--tj-blue)}
.tajna-team.won{border-color:var(--gold)}
.tajna-count{display:grid;justify-items:center;flex:none;min-width:34px;line-height:1}
.tajna-count b{font-family:var(--display);font-weight:400;font-size:1.7rem}
.tajna-team.red .tajna-count b{color:#ff8fa3}
.tajna-team.blue .tajna-count b{color:#8fc4f0}
.tajna-count small{font-size:.62rem;color:var(--mist);margin-top:2px}
.tajna-mems{display:grid;gap:2px;min-width:0;flex:1}
.tajna-m{display:flex;align-items:center;gap:5px;min-width:0;padding:1px 4px 1px 2px;border-radius:999px}
.tajna-m .ava{width:24px;height:24px;font-size:.74rem;flex:none}
.tajna-m .ava .chipico{right:-4px;bottom:-3px;width:13px;height:13px;padding:1.5px}
.tajna-role{flex:none;width:18px;height:18px;color:var(--mist)}
.tajna-role svg{display:block;width:100%;height:100%}
.tajna-nm{display:grid;min-width:0;line-height:1.1}
.tajna-nm .nm{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tajna-nm .rl{font-size:.66rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tajna-m.me .nm{color:var(--gold)}
.tajna-m.turn{background:rgba(118,176,67,.2)}
.tajna-m.turn .tajna-role{color:var(--gold)}
.tajna-m.turn .ava{box-shadow:0 0 0 2px var(--gold)}
.tajna-off{color:var(--gold)}

/* ── what is going on ────────────────────────────────────────────────── */
.tajna-now{grid-area:now;display:grid;justify-items:center;gap:2px;padding:4px 10px 4px;min-width:0}
.tajna-line{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
.tajna-status{margin:0;padding:.36em .9em;font-size:.9rem;min-width:0}
.tajna-status[data-team=red]:not(.go){box-shadow:inset 0 -2px 0 var(--tj-red)}
.tajna-status[data-team=blue]:not(.go){box-shadow:inset 0 -2px 0 var(--tj-blue)}
.tajna-clock{
  flex:none;min-width:3.2em;padding:.3em .6em;border-radius:999px;text-align:center;
  font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;
  background:rgba(13,18,10,.45);border:1.5px solid var(--line);
}
.tajna-clock.late{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.tajna-clue{
  margin:2px 0 0;display:flex;align-items:center;gap:.5em;max-width:100%;
  font-family:var(--ui);font-stretch:80%;font-weight:700;font-size:clamp(1.35rem,6.4vw,2rem);line-height:1.1;
  letter-spacing:.04em;text-transform:uppercase;
}
.tajna-clue .w{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tajna-clue .n{
  flex:none;display:grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .3em;border-radius:.4em;
  color:#fff;font-stretch:100%;letter-spacing:0;
}
.tajna-clue.red .n{background:var(--tj-red)}
.tajna-clue.blue .n{background:var(--tj-blue)}
.tajna-info{margin:0;min-height:1.3em;max-width:30rem;font-size:.84rem;line-height:1.3;text-align:center;color:var(--mist)}
.tajna-info.big{color:var(--ivory);font-weight:600;font-size:.95rem}

/* the captain's clue: the word, how many cards, send */
.tajna-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:100%;max-width:520px;margin-top:2px}
.tajna-input{
  flex:1 1 130px;min-width:0;width:auto;min-height:46px;margin:0;padding:.4em .8em;
  font:inherit;font-size:1.05rem;font-weight:600;
  -webkit-user-select:text;user-select:text;
}
.tajna-num{display:flex;align-items:center;flex:none;border:1.5px solid var(--line);border-radius:999px;background:rgba(13,18,10,.35)}
.tajna-step{
  width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;
  font-size:1.5rem;line-height:1;font-weight:600;color:var(--ivory);
}
.tajna-step:disabled{opacity:.3}
.tajna-step:active:not(:disabled){background:rgba(244,240,232,.14)}
.tajna-n{min-width:1.3em;text-align:center;font-family:var(--display);font-size:1.5rem;line-height:1}
.tajna-give{flex:1 1 auto;min-height:46px;padding:.4em 1em;font-size:.98rem;white-space:nowrap}
.tajna-err{flex:1 0 100%;margin:0;font-size:.86rem;font-weight:600;text-align:center;color:var(--gold)}
.tajna-form.shake{animation:shake .3s}
/* "should it have counted? report it", under the message about an unknown clue */
.tajna-report{flex:0 1 auto;margin:0 auto;min-height:40px;padding:.25em 1em;font-size:.82rem;white-space:normal}
.tajna-report[hidden]{display:none}
.tajna.low:not(.wide) .tajna-report{position:absolute;right:0;top:calc(100% + 30px);z-index:2}

/* ── the board ───────────────────────────────────────────────────────── */
.tajna-main{grid-area:main;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.tajna-board{
  --gap:5px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:var(--gap);
  width:100%;height:100%;
}
.tajna-card{
  position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0 2px;overflow:hidden;
  border:0;border-radius:7px;
  color:var(--ink);background:var(--ivory);
  box-shadow:inset 0 -3px 0 rgba(23,23,15,.16),0 2px 5px -2px rgba(0,0,0,.6);
  cursor:default;
  transition:background-color .25s,color .25s,transform .12s var(--ease);
}
.tajna-w{
  display:inline-block;white-space:nowrap;line-height:1;
  font-family:var(--ui);font-stretch:75%;font-weight:700;letter-spacing:.01em;text-transform:uppercase;
  pointer-events:none;
}
.tajna-board.pick .tajna-card:not(.open){cursor:pointer}
.tajna-board.pick .tajna-card:not(.open):active{transform:scale(.96)}
.tajna-card:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* uncovered: the owner's colour, flat on the table */
.tajna-card.open{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tajna-card.open .tajna-w{opacity:.82}
.tajna-card.o0{background:var(--tj-red);color:#fff}
.tajna-card.o1{background:var(--tj-blue);color:#fff}
.tajna-card.o2{background:var(--tj-none);color:rgba(23,23,15,.66)}
.tajna-card.o3{background:var(--tj-black);color:var(--ivory);box-shadow:inset 0 0 0 2px var(--ivory)}
.tajna-card.new{animation:tajna-turn .42s var(--ease)}
@keyframes tajna-turn{from{transform:rotateX(88deg) scale(1.06)}}

/* the key, on cards still covered: a tint and a mark in the corner */
.tajna-mk{position:absolute;top:2px;right:2px;width:7px;height:7px;display:none}
.tajna.wide .tajna-mk{top:5px;right:5px;width:10px;height:10px}
.tajna-card.k0{background:var(--tj-red-soft);box-shadow:inset 0 -4px 0 var(--tj-red),0 2px 5px -2px rgba(0,0,0,.6)}
.tajna-card.k1{background:var(--tj-blue-soft);box-shadow:inset 0 -4px 0 var(--tj-blue),0 2px 5px -2px rgba(0,0,0,.6)}
.tajna-card.k2{background:#efe8da;color:rgba(23,23,15,.66)}
.tajna-card.k3{background:#3a3a2e;color:var(--ivory);box-shadow:inset 0 0 0 2px var(--tj-black),inset 0 -4px 0 var(--tj-black),0 2px 5px -2px rgba(0,0,0,.6)}
.tajna-card.k0 .tajna-mk{display:block;border-radius:50%;background:var(--tj-red)}
.tajna-card.k1 .tajna-mk{display:block;background:var(--tj-blue);transform:rotate(45deg) scale(.85)}
.tajna-card.k3 .tajna-mk{
  display:block;
  background:
    linear-gradient(45deg,transparent 42%,var(--ivory) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--ivory) 42% 58%,transparent 58%);
}

/* marked for uncovering */
.tajna-card.sel{outline:3px solid var(--gold);outline-offset:-1px;background:#dcefc6;transform:translateY(-2px);animation:tajna-sel 1.2s ease-in-out infinite}
@keyframes tajna-sel{50%{outline-color:rgba(118,176,67,.5)}}
.tajna-card.shake{animation:shake .3s}

/* ── the guesser's buttons ───────────────────────────────────────────── */
.tajna-bar{grid-area:bar;display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 10px 2px}
.tajna-bar .btn{min-height:46px;padding:.4em 1.1em;font-size:.98rem;white-space:nowrap;flex:0 1 11em}

/* ── the log ─────────────────────────────────────────────────────────── */
.tajna-log{
  grid-area:log;justify-self:center;width:100%;max-width:640px;min-height:0;max-height:22vh;
  margin:0;padding:4px 10px 8px;list-style:none;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(244,240,232,.3) transparent;
  font-size:.8rem;line-height:1.25;
}
.tajna-log li{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;padding:3px 0 3px 8px;border-left:3px solid var(--line)}
.tajna-log li+li{margin-top:3px}
.tajna-log li.red{border-left-color:var(--tj-red)}
.tajna-log li.blue{border-left-color:var(--tj-blue)}
.tajna-log li.empty{border:0;padding-left:0;justify-content:center;color:var(--mist)}
.tajna-log b{font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
.tajna-log b.none{text-transform:none;font-weight:400;color:var(--mist)}
.tajna-log i{font-style:normal;color:var(--mist);font-size:.74rem}
.tajna-log .p{padding:1px 6px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap}
.tajna-log .p.o0{background:var(--tj-red);color:#fff}
.tajna-log .p.o1{background:var(--tj-blue);color:#fff}
.tajna-log .p.o2{background:var(--tj-none);color:var(--ink)}
.tajna-log .p.o3{background:var(--tj-black);color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--ivory)}

.tajna-sum{margin:.2em 0 .6em;font-size:.92rem;opacity:.8;text-align:center}

/* ── a wide screen: the board on the left, the rest beside it ────────── */
.tajna.wide{
  grid-template-columns:minmax(0,920px) clamp(250px,28%,340px);
  grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:"main teams" "main now" "main bar" "main log";
  justify-content:center;column-gap:10px;padding:8px;
}
.tajna.wide .tajna-teams{grid-template-columns:1fr;padding:6px 0}
.tajna.wide .tajna-now{padding:8px 0}
.tajna.wide .tajna-clue{font-size:1.9rem}
.tajna.wide .tajna-bar{padding:4px 0 8px}
.tajna.wide .tajna-log{max-height:none;padding:6px 0;font-size:.86rem}
.tajna.wide .tajna-card{border-radius:10px}

/* a short screen: everything a little tighter */
.tajna.low .tajna-teams{padding:3px 6px 0}
.tajna.low .tajna-team{padding:2px 5px}
.tajna.low .tajna-count b{font-size:1.35rem}
.tajna.low .tajna-m .ava{display:none}
.tajna.low .tajna-now{padding:2px 8px;gap:1px}
.tajna.low .tajna-status{padding:.25em .8em;font-size:.84rem}
.tajna.low .tajna-clue{font-size:1.25rem}
.tajna.low .tajna-info{font-size:.78rem}
/* the captain's form in one row, without the hint: the board needs the room */
.tajna.low.cluing:not(.wide) .tajna-info{display:none}
.tajna.low:not(.wide) .tajna-form{flex-wrap:nowrap;gap:4px}
.tajna.low:not(.wide) .tajna-input{flex:1 1 60px;min-height:44px;padding:.3em .6em;font-size:1rem}
.tajna.low:not(.wide) .tajna-step{width:36px;height:42px}
.tajna.low:not(.wide) .tajna-give{flex:none;min-height:44px;padding:.3em .7em;font-size:.86rem}
.tajna.low:not(.wide) .tajna-err{position:absolute;left:0;right:0;top:100%;z-index:2;padding:3px 8px;background:var(--plum-3);border-radius:8px}
.tajna.low:not(.wide) .tajna-form{position:relative}
.tajna.low .tajna-bar{padding:4px 8px 0}
.tajna.low .tajna-bar .btn{min-height:44px}
.tajna.low .tajna-log{max-height:44px;padding:2px 8px 4px;font-size:.74rem}
.tajna.low.wide .tajna-log{max-height:none}

@media (prefers-reduced-motion:reduce){
  .tajna-card.sel,.tajna-card.new{animation:none}
}