/* Slovní fotbal: the players on top, the chain of words in the room that is
   left, then the letter on a large ivory tile with the clock under it, one
   status line, and the field for the word at the very bottom. fotbal.js keeps
   the whole thing inside the visible part of the page (the keyboard of a
   phone covers the rest) and sets .short / .tight / .tiny as that gets lower,
   .wide on a desktop, where the players stand in a column on the left. */
.fotbal{
  --fotbal-heart:#ff5c7c;--fotbal-rose:#ff8ba0;
  position:absolute;inset:0;margin:0 auto;max-width:620px;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"players" "talk" "mid" "form";
  padding:0 10px;overflow:hidden;
}
.fotbal [hidden]{display:none!important}

/* ── players ─────────────────────────────────────────────────────────── */
.fotbal-players{grid-area:players;display:flex;justify-content:center;gap:6px;padding:6px 0 4px}
.fotbal-pl{
  flex:1 1 0;min-width:0;max-width:210px;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ava nm" "ava hearts" "ava sub";
  align-items:center;column-gap:8px;row-gap:1px;padding:5px 10px 5px 6px;
  border:1.5px solid var(--line);border-radius:16px;background:rgba(13,18,10,.3);
  transition:border-color .2s,background-color .2s,opacity .2s;
}
.fotbal-pl .ava{grid-area:ava;width:38px;height:38px;font-size:1.05rem}
.fotbal-pl .nm{grid-area:nm;min-width:0;font-weight:600;font-size:.88rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fotbal-pl .sub{grid-area:sub;min-width:0;font-size:.7rem;line-height:1.15;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fotbal-hearts{grid-area:hearts;display:flex;gap:2px;padding:2px 0}
.fotbal-hearts i{
  flex:none;width:12px;height:11px;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5S3.6 15.4 1.9 9.9C.7 6 3 2 6.7 2c2.2 0 3.9 1.2 5.3 3.200C13.4 3.2 15.1 2 17.3 2 21 2 23.3 6 22.1 9.9 20.4 15.4 12 20.5 12 20.500z' fill='none' stroke='%23fbf5ea' stroke-opacity='.38' stroke-width='2'/%3E%3C/svg%3E");
}
.fotbal-hearts i.on{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5S3.6 15.4 1.9 9.9C.7 6 3 2 6.7 2c2.2 0 3.9 1.2 5.3 3.200C13.4 3.2 15.1 2 17.3 2 21 2 23.3 6 22.1 9.9 20.4 15.4 12 20.5 12 20.500z' fill='%23ff5c7c'/%3E%3C/svg%3E");
}
/* three or four at a table: everything under the avatar */
.fotbal-players:not([data-n="2"]) .fotbal-pl{
  grid-template-columns:minmax(0,1fr);grid-template-areas:"ava" "nm" "hearts" "sub";
  justify-items:center;text-align:center;padding:6px 4px 5px;
}
.fotbal-players:not([data-n="2"]) .fotbal-pl .nm,
.fotbal-players:not([data-n="2"]) .fotbal-pl .sub{max-width:100%}
.fotbal-pl.turn{border-color:var(--gold);background:rgba(118,176,67,.13)}
.fotbal-pl.turn .ava{box-shadow:0 0 0 2.5px var(--gold)}
.fotbal-pl.best{border-color:var(--gold)}
.fotbal-pl.out{opacity:.5}
.fotbal-pl.shake{animation:shake .3s}

/* ── the chain of words ──────────────────────────────────────────────── */
.fotbal-talk{grid-area:talk;position:relative;min-height:0;display:flex;flex-direction:column}
.fotbal-chain{
  flex:1;min-height:0;margin:0;padding:14px 2px 4px;list-style:none;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px);mask-image:linear-gradient(to bottom,transparent 0,#000 24px);
}
.fotbal-chain::-webkit-scrollbar{display:none}
.fotbal-chain::before{content:"";flex:1 0 0} /* a short chain sits at the bottom, next to the letter */
.fotbal-row{flex:none;display:flex;align-items:baseline;gap:10px;padding:3px 0;line-height:1.2;opacity:.74}
.fotbal-row:last-child{opacity:1}
.fotbal-row .who{
  flex:0 0 5.2em;min-width:0;text-align:right;
  font-size:.78rem;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fotbal-row.me .who{color:var(--gold)}
.fotbal-row .w{min-width:0;font:400 1.3rem/1.15 var(--display);letter-spacing:.01em;color:var(--ivory);overflow-wrap:anywhere}
.fotbal-row .w em{font-style:normal;color:var(--gold)}
.fotbal-row .ev{font-size:.92rem;font-style:italic;color:var(--mist)}
.fotbal-row .tag{
  flex:none;align-self:center;padding:.1em .6em;border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;line-height:1.3;color:var(--mist);white-space:nowrap;
}
.fotbal-row .tag.lost{color:var(--fotbal-rose);border-color:rgba(255,139,160,.42)}
.fotbal-row.no .w{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.62}
.fotbal-row.wait .w{color:var(--gold)}
.fotbal-row.new{animation:fotbal-in .32s var(--ease)}
@keyframes fotbal-in{from{opacity:0;translate:0 10px}}
.fotbal-empty{
  position:absolute;left:0;right:0;bottom:8px;margin:0;padding:0 12px;
  font-size:.9rem;line-height:1.35;text-align:center;color:var(--mist);
}

/* ── the letter, the clock, the status, the report button ─────────────── */
.fotbal-mid{
  grid-area:mid;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"top" "clock" "status" "report";justify-items:center;gap:8px;padding:6px 0 4px;
}
.fotbal-letter,.fotbal-end{grid-area:top}
.fotbal-letter{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px}
.fotbal-cap{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mist)}
.fotbal-letter .fotbal-cap{justify-self:end;text-align:right}
.fotbal-tile{
  grid-column:2;
  display:grid;place-items:center;min-width:100px;height:100px;padding:0 18px 7px;
  border-radius:22px;background:var(--ivory);color:var(--ink);
  font:400 4.3rem/1 var(--display);
  box-shadow:inset 0 -7px 0 var(--cherry),0 16px 28px -16px rgba(0,0,0,.85);
  transition:box-shadow .2s;
}
.fotbal-letter.mine .fotbal-tile{box-shadow:inset 0 -7px 0 var(--cherry),0 0 0 3px var(--gold),0 16px 28px -16px rgba(0,0,0,.85)}
.fotbal-alt{grid-column:3;justify-self:start;display:flex;align-items:center;gap:8px}
.fotbal-alt small{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mist)}
.fotbal-alt b{
  display:grid;place-items:center;min-width:50px;height:50px;padding:0 8px 2px;
  border:1.5px dashed rgba(244,240,232,.5);border-radius:14px;
  font:400 2rem/1 var(--display);color:var(--ivory);
}
.fotbal-end{margin:0;padding:14px 8px;font:400 1.5rem/1.2 var(--display);text-align:center;color:var(--ivory)}

.fotbal-clock{grid-area:clock;width:100%;max-width:360px;display:flex;align-items:center;gap:8px}
.fotbal-bar{flex:1;height:8px;border-radius:999px;background:rgba(0,0,0,.36);overflow:hidden}
.fotbal-bar i{display:block;height:100%;border-radius:inherit;background:var(--gold);transform-origin:0 50%;transition:transform .1s linear,background-color .2s}
.fotbal-clock b{flex:none;min-width:2ch;font:600 .95rem/1 var(--ui);font-variant-numeric:tabular-nums;text-align:right;color:var(--ivory)}
.fotbal-clock.low .fotbal-bar i{background:var(--fotbal-heart)}
.fotbal-clock.low b{color:var(--fotbal-rose)}

.fotbal-status{grid-area:status;max-width:100%;padding:.4em .9em;font-size:.93rem}
.fotbal-status.bad{background:var(--cherry);color:#fff;font-weight:600}
.fotbal-status.shake{animation:shake .3s}
/* "should it have counted? report it": under a refused word, until it is used */
.fotbal-report{grid-area:report;justify-self:center;min-height:44px;max-width:100%;padding:.3em 1em;font-size:.86rem;white-space:normal}
.fotbal-report[hidden]{display:none}
.fotbal.tight .fotbal-report{min-height:36px;padding:.15em .8em;font-size:.8rem}

/* ── the field ───────────────────────────────────────────────────────── */
.fotbal-form{grid-area:form;display:flex;gap:8px;padding:4px 0 10px}
.fotbal .fotbal-input{
  flex:1;min-width:0;width:auto;min-height:50px;padding:.3em 1.1em;
  border:2px solid transparent;border-radius:999px;
  font:600 1.15rem var(--ui);color:var(--ink);background:rgba(244,240,232,.84);
  transition:background-color .2s,border-color .2s;
}
.fotbal .fotbal-form.mine .fotbal-input{background:var(--ivory)}
.fotbal .fotbal-input::placeholder{color:rgba(23,23,15,.48);font-weight:500}
.fotbal .fotbal-input:focus{outline:none;border-color:var(--gold)}
.fotbal-send{flex:none;min-height:50px;padding:.3em 1.25em;white-space:nowrap}

.fotbal-sum{margin:.2em 0 .6em;font-size:.9rem;opacity:.75;text-align:center}

/* ── not much height (a small phone) ─────────────────────────────────── */
.fotbal.short .fotbal-players{padding:4px 0 2px}
.fotbal.short .fotbal-pl .ava{width:30px;height:30px;font-size:.9rem}
.fotbal.short .fotbal-players:not([data-n="2"]) .fotbal-pl{padding:4px 3px 3px}
.fotbal.short .fotbal-mid{gap:6px;padding:4px 0 2px}
.fotbal.short .fotbal-tile{min-width:76px;height:76px;padding:0 14px 6px;border-radius:18px;font-size:3.2rem;box-shadow:inset 0 -6px 0 var(--cherry),0 14px 24px -14px rgba(0,0,0,.85)}
.fotbal.short .fotbal-letter.mine .fotbal-tile{box-shadow:inset 0 -6px 0 var(--cherry),0 0 0 3px var(--gold)}
.fotbal.short .fotbal-alt b{min-width:42px;height:42px;font-size:1.6rem}
.fotbal.short .fotbal-status{padding:.3em .8em;font-size:.88rem}
.fotbal.short .fotbal-form{padding:3px 0 8px}

/* ── the keyboard is up: little room is left ─────────────────────────── */
.fotbal.tight .fotbal-players{gap:4px;padding:3px 0 1px}
.fotbal.tight .fotbal-players .fotbal-pl{
  flex:0 1 auto;grid-template-columns:auto auto;grid-template-areas:"ava hearts";justify-items:start;justify-content:center;
  column-gap:5px;padding:2px 7px 2px 3px;border-radius:999px;
}
.fotbal.tight .fotbal-pl .ava{width:22px;height:22px;font-size:.7rem}
.fotbal.tight .fotbal-pl .ava .chipico{display:none}
.fotbal.tight .fotbal-pl .nm,.fotbal.tight .fotbal-pl .sub{display:none}
.fotbal.tight .fotbal-hearts i{width:10px;height:9px}
.fotbal.tight .fotbal-chain{padding-top:8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px);mask-image:linear-gradient(to bottom,transparent 0,#000 12px)}
.fotbal.tight .fotbal-row{padding:1px 0}
.fotbal.tight .fotbal-row .w{font-size:1.12rem}
.fotbal.tight .fotbal-empty{bottom:2px;font-size:.8rem}
.fotbal.tight .fotbal-mid{
  grid-template-columns:auto minmax(0,1fr);grid-template-areas:"top status" "clock clock" "report report";
  align-items:center;justify-items:start;gap:5px 10px;padding:3px 0 1px;
}
.fotbal.tight .fotbal-letter{width:auto;display:flex;gap:6px}
.fotbal.tight .fotbal-letter .fotbal-cap,.fotbal.tight .fotbal-alt small{display:none}
.fotbal.tight .fotbal-tile{min-width:46px;height:46px;padding:0 8px 4px;border-radius:12px;font-size:2rem;box-shadow:inset 0 -4px 0 var(--cherry)}
.fotbal.tight .fotbal-letter.mine .fotbal-tile{box-shadow:inset 0 -4px 0 var(--cherry),0 0 0 2px var(--gold)}
.fotbal.tight .fotbal-alt b{min-width:32px;height:32px;padding:0 5px 1px;border-radius:9px;font-size:1.25rem}
.fotbal.tight .fotbal-status{justify-self:stretch;padding:.3em .7em;font-size:.86rem;text-align:left;border-radius:14px}
.fotbal.tight .fotbal-clock{max-width:none}
.fotbal.tight .fotbal-bar{height:6px}
.fotbal.tight .fotbal-clock b{font-size:.82rem}
.fotbal.tight .fotbal-end{padding:4px 2px;font-size:1.05rem;text-align:left}
.fotbal.tight .fotbal-form{padding:3px 0 5px}
.fotbal.tight .fotbal-input,.fotbal.tight .fotbal-send{min-height:46px}
.fotbal.tiny .fotbal-players{display:none}

/* ── a wide screen: the players in a column on the left ──────────────── */
.fotbal.wide{
  max-width:900px;grid-template-columns:230px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"players talk" "players mid" "players form";column-gap:26px;padding:0 16px;
}
.fotbal.wide .fotbal-players{flex-direction:column;justify-content:flex-start;gap:8px;padding:18px 0 0}
.fotbal.wide .fotbal-players .fotbal-pl{
  flex:none;max-width:none;
  grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ava nm" "ava hearts" "ava sub";
  justify-items:start;text-align:left;padding:8px 12px 8px 8px;
}
.fotbal.wide .fotbal-pl .ava{width:44px;height:44px;font-size:1.2rem}
.fotbal.wide .fotbal-pl .nm{font-size:.95rem}
.fotbal.wide .fotbal-hearts i{width:14px;height:13px}
.fotbal.wide .fotbal-row .who{flex-basis:7em;font-size:.84rem}
.fotbal.wide .fotbal-row .w{font-size:1.5rem}
.fotbal.wide .fotbal-mid{gap:10px;padding:10px 0 6px}
.fotbal.wide:not(.short) .fotbal-tile{min-width:124px;height:124px;border-radius:26px;font-size:5.4rem}
.fotbal.wide .fotbal-form{padding:6px 0 18px}

@media (prefers-reduced-motion:reduce){
  .fotbal-row.new,.fotbal-pl.shake,.fotbal-status.shake{animation:none}
  .fotbal-bar i{transition:none}
}