/* ---------------------------------------------------------------- Kare Kare (js/games/kare.js)
   A picture under a grid of tiles that flip open one by one, on a dark card of its own (the same
   family as Azınlık). Beside it the game's own chat (the feed and the guess box), as tall as the
   picture; the picture is sized by kare.js (--kr-fit-w) so the card fits the window. The scoreboard
   goes to the room's right column on wide screens and stays in the card otherwise.
   At the answer the whole picture fades in with the answer on a gold label. The layout follows the
   card's own width (container query on .kr). */
#kare-root { padding: 12px 16px 0; }
#kare-root[hidden] { display: none; }
/* the scoreboard carries the colours too: on wide screens it sits in the room's right column (kare.js placeScores) */
.kr, .kr-scoreboard { --kr-gold: #ffd166; --kr-teal: #22c3ad; --kr-coral: #ff6b5e; --kr-ink: #f2f5ff; --kr-dim: rgba(242, 245, 255, .68);
  --kr-tile: #26304d; --kr-tile-2: #1f2840; --kr-line: rgba(255, 255, 255, .08); color-scheme: dark; }
.kr { display: grid; gap: 8px; container: kr / inline-size; }
.kr-show { position: relative; overflow: hidden; display: grid; align-content: start; gap: clamp(12px, 1.5cqw, 20px);
  padding: clamp(16px, 2.2cqw, 30px) clamp(16px, 2.6cqw, 36px); border-radius: var(--radius); color: var(--kr-ink);
  background:
    radial-gradient(90% 60% at 15% -20%, rgba(34, 195, 173, .2), transparent 60%),
    radial-gradient(70% 60% at 100% 120%, rgba(255, 209, 102, .16), transparent 70%),
    linear-gradient(165deg, #1c2744, #10162b 75%);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07); }

.kr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kr-brand { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, 1.15cqw, 17px); font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; }
.kr-brand svg { width: 1.5em; height: 1.5em; fill: var(--kr-gold); }
.kr-brand svg .dim { fill: rgba(255, 255, 255, .28); }
.kr-brand svg .hot { fill: var(--kr-teal); }
.kr-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.kr-meta span { font-size: clamp(12px, 1.05cqw, 15px); font-weight: 700; padding: .25em .85em; border-radius: 999px;
  background: rgba(255, 255, 255, .09); font-variant-numeric: tabular-nums; }
.kr-meta span:empty, .kr-meta span[hidden] { display: none; }
.kr-worth { margin-left: auto; font-size: clamp(12px, 1.1cqw, 15px); color: var(--kr-dim); font-variant-numeric: tabular-nums; }
.kr-worth b { color: var(--kr-gold); font-size: 1.35em; font-weight: 900; }
.kr-worth[hidden] { display: none; }
.kr-host:empty { display: none; }
.kr-stop { color: var(--kr-ink); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.kr-stop:hover { background: rgba(255, 107, 94, .18); border-color: var(--kr-coral); }
.kr-stop:focus-visible { outline: 2px solid var(--kr-gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- the picture */
.kr-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6cqw, 22px); }
.kr-play { display: grid; gap: 10px; min-width: 0; width: min(100%, var(--kr-fit-w, 100%)); justify-self: center; }
.kr-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: #0b1020; box-shadow: 0 0 0 1px var(--kr-line), 0 14px 30px -18px rgba(0, 0, 0, .9); }
.kr-board { position: absolute; inset: 0; display: grid; gap: 2px; padding: 2px;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr)); }
.kr-cell { position: relative; overflow: hidden; border-radius: 3px; perspective: 400px;
  background: linear-gradient(145deg, var(--kr-tile), var(--kr-tile-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .35); }
.kr-cell::after { content: ""; position: absolute; inset: 32%; border-radius: 2px; background: rgba(255, 255, 255, .035); }
.kr-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: rotateY(90deg); }
.kr-cell.open::after { display: none; }
.kr-cell.open img { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .25s; }
.kr-show[data-phase="intro"] .kr-cell { animation: kr-wave 1.6s ease-in-out infinite; animation-delay: var(--d, 0ms); }
@keyframes kr-wave { 50% { background: linear-gradient(145deg, #34436b, var(--kr-tile)); } }

.kr-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kr-fade .6s ease-out both; }
.kr-full[hidden] { display: none; }
@keyframes kr-fade { from { opacity: 0; transform: scale(1.03); } }
.kr-answer { position: absolute; left: 50%; bottom: clamp(10px, 2cqw, 22px); transform: translateX(-50%); display: grid; justify-items: center;
  gap: 2px; max-width: calc(100% - 24px); padding: .45em 1.3em .55em; border-radius: 14px; text-align: center;
  background: rgba(10, 14, 28, .82); backdrop-filter: blur(6px); box-shadow: 0 0 0 2px var(--kr-gold);
  animation: kr-rise .5s .15s cubic-bezier(.2, 1.4, .4, 1) both; }
.kr-answer[hidden] { display: none; }
.kr-answer small { font-size: clamp(11px, 1cqw, 13px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kr-gold); }
.kr-answer b { font-size: clamp(20px, 3.2cqw, 40px); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
@keyframes kr-rise { from { opacity: 0; transform: translate(-50%, 16px); } }
.kr-cover { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center;
  background: radial-gradient(70% 70% at 50% 50%, rgba(16, 22, 43, .55), rgba(16, 22, 43, .2)); }
.kr-cover[hidden] { display: none; }
.kr-cover b { font-size: clamp(24px, 4.6cqw, 56px); font-weight: 900; animation: kr-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.kr-cover span { max-width: 42ch; margin: 0 auto; color: var(--kr-dim); font-size: clamp(13px, 1.3cqw, 17px); line-height: 1.45; }
@keyframes kr-pop { from { opacity: 0; transform: scale(.85); } }

.kr-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kr-progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--kr-teal), var(--kr-gold)); transition: transform .4s ease-out; }
.kr-show.final .kr-main { display: none; }

/* ---------------------------------------------------------------- beside the picture: scores, then the feed */
.kr-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.kr-feed h4, .kr-scores h4 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kr-dim); }
.kr-scores { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; }
.kr-scores-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* in the room's right column: a widget like "Bu space'te" above it */
.kr-scores.widget { padding: 0 12px 14px; max-height: calc(100vh - 220px); }
.kr-scores.widget .kr-scores-head { padding: 14px 4px 2px; }
.kr-scores.widget h4 { padding: 0; font-size: 19px; font-weight: 800; letter-spacing: normal; text-transform: none; color: var(--text); }
.kr-scores.widget .kr-mine { padding: 0 4px; }
/* scrollbars in the game's colours, not the browser's light default (they brighten while hovered) */
.kr-lines, .kr-scores { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.kr-lines:hover, .kr-scores:hover { scrollbar-color: rgba(255, 255, 255, .32) transparent; }
.kr-leaders, .kr-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kr-leaders li, .kr-standings li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.kr-standings li { grid-template-columns: auto minmax(0, 1fr) auto; }
.kr-leaders li.me, .kr-standings li.me { background: rgba(255, 209, 102, .14); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .4); }
.kr-leaders li.kr-empty { display: block; color: var(--kr-dim); font-size: 13px; background: none; padding: 4px 0; }
.kr-rank { width: 1.4em; text-align: center; font-weight: 900; color: var(--kr-dim); font-variant-numeric: tabular-nums; }
.kr-leaders li:first-child .kr-rank { color: var(--kr-gold); }
.kr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kr-leaders b, .kr-standings b { font-variant-numeric: tabular-nums; font-weight: 900; }
.kr-mine { margin: 0; color: var(--kr-dim); font-size: 13px; }
.kr-mine:empty { display: none; }
.kr-hits { margin: 0; font-size: 14px; color: var(--kr-dim); }
.kr-hits:empty { display: none; }
.kr-hits b { color: var(--kr-teal); font-size: 1.25em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the game's chat: the feed and the guess box */
.kr-feed { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: 14px; background: rgba(8, 12, 26, .45); box-shadow: inset 0 0 0 1px var(--kr-line); }
.kr-lines { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
.kr-lines-empty { margin: auto 0; color: var(--kr-dim); font-size: 13px; text-align: center; text-wrap: balance; }
.kr-line { padding: 3px 8px; border-radius: 8px; overflow-wrap: anywhere; color: var(--kr-ink); }
.kr-line.msg { color: rgba(242, 245, 255, .86); }
.kr-line.me { background: rgba(255, 255, 255, .05); }
.kr-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; }
.kr-who { font-weight: 700; color: var(--kr-ink); }
.kr-line.hit { background: rgba(34, 195, 173, .14); color: #7ee2b8; }
.kr-line.hit b { color: var(--kr-ink); }
.kr-line.close { background: rgba(255, 209, 102, .1); color: #ffcf7a; }
.kr-line.close b { color: var(--kr-ink); }
.kr-line.muted { color: var(--kr-dim); font-size: 13px; }
.kr-line.answer { background: rgba(255, 209, 102, .12); color: var(--kr-dim); box-shadow: inset 2px 0 0 var(--kr-gold); }
.kr-line.answer b { color: var(--kr-gold); }
.kr-line.divider { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-inline: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kr-dim); }
.kr-line.divider::before, .kr-line.divider::after { content: ""; flex: 1; height: 1px; background: var(--kr-line); }
.kr-line.divider:first-child { margin-top: 0; }
.kr-pts { font-weight: 800; color: var(--kr-gold); font-variant-numeric: tabular-nums; }
.kr-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--kr-dim); white-space: nowrap; }

.kr-guess { display: flex; gap: 8px; }
.kr-guess .input { flex: 1; min-width: 0; padding: 10px 13px; font-size: 16px; border-radius: 12px; color: var(--kr-ink);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.kr-guess .input:focus { border-color: var(--kr-gold); box-shadow: 0 0 0 1px var(--kr-gold); }
.kr-guess .input:disabled { opacity: .6; }
.kr-guess .btn { padding-inline: 16px; }
.kr-field { position: relative; flex: 1; min-width: 0; display: flex; }
/* Enter anywhere on the page jumps into the box (kare.js enterToGuess): a key cap says so while the box waits */
.kr-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 7px; border-radius: 6px;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--kr-dim);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(255, 255, 255, .08);
  pointer-events: none; }
.kr-guess:focus-within .kr-key, .kr-field .input:not(:placeholder-shown) + .kr-key, .kr-field .input:disabled + .kr-key { display: none; }
@media (hover: hover) {
  .kr-guess:not(:focus-within) .kr-field .input:placeholder-shown:not(:disabled) { padding-right: 64px; }
}
@media (hover: none) { .kr-key { display: none; } }   /* touch screens: no Enter key to press */
.kr-note { margin: -2px 0 0; font-size: 13px; color: var(--kr-dim); }
.kr-note:empty { display: none; }
.kr-note.good { color: #7ee2b8; }
.kr-note.good b { color: var(--kr-gold); }
.kr-note.muted b { color: var(--kr-ink); }
.kr-link { padding: 0; border: 0; background: none; color: var(--kr-gold); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* ---------------------------------------------------------------- the end */
.kr-final { display: grid; justify-items: center; gap: 14px; text-align: center; }
.kr-final[hidden] { display: none; }
.kr-final h3 { margin: 6px 0 0; font-size: clamp(24px, 4cqw, 46px); font-weight: 900; text-wrap: balance; animation: kr-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.kr-podium { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.kr-winner { position: relative; display: grid; justify-items: center; gap: 6px; }
.kr-winner .crown { position: absolute; top: -18px; width: 30px; fill: var(--kr-gold); }
.kr-standings { width: min(420px, 100%); text-align: left; }
.kr-final-buttons { justify-content: center; }
.kr-confetti { position: absolute; inset: 0; pointer-events: none; }
.kr-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; }

/* the card is wide enough: the side column sits beside the picture, exactly as tall (size containment
   keeps its content from stretching the row; the feed scrolls instead). It holds the guesses, and the
   scoreboard under them when the room's right column isn't there to take it */
@container kr (min-width: 720px) {
  .kr-main { grid-template-columns: min(var(--kr-fit-w, 100%), calc(100% - 282px)) minmax(260px, 480px); justify-content: center; }
  .kr-play { width: 100%; }
  .kr-side { contain: size; }
  .kr-scores { flex: 0 1 auto; max-height: 42%; }
}
/* narrow: under the picture the game's chat (short, so the box stays above the dock), the scoreboard after it */
@container kr (max-width: 719.98px) {
  .kr-feed { flex: none; }
  .kr-feed h4 { display: none; }
  .kr-lines { flex: none; height: 96px; }
}
@container kr (max-width: 480px) {
  .kr-worth { margin-left: 0; width: 100%; }
  .kr-board { gap: 1px; padding: 1px; }
  .kr-cell { border-radius: 2px; }
}

/* ---------------------------------------------------------------- lines from the game in the room chat (js/room/chat-panel.js) */
.chat-sys { margin: 4px 8px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4;
  background: var(--surface); color: var(--text-2); }
.chat-sys.good { background: rgba(34, 195, 173, .12); color: #7ee2b8; }
.chat-sys.good b { color: var(--text); }
.chat-sys.close { background: rgba(255, 209, 102, .1); color: #ffcf7a; }
.chat-sys.close b { color: var(--text); }
.chat-sys.muted { color: var(--muted); }
.chat-sys-pts { font-weight: 800; color: #ffd166; font-variant-numeric: tabular-nums; }
.chat-sys-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text-2); }