/* ==========================================================================
   Codenames – Begriffskarten aus Karton, Hinweis als Holzplättchen, Agentenkarten beim Umdrehen
   ========================================================================== */
.cn { --cn-r: var(--red); --cn-b: #2f5fa8; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 10px; }
.cn-rail { flex: none; }
.cn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px #fff8ea; }
.cn-dot.r { background: var(--cn-r); } .cn-dot.b { background: var(--cn-b); }
.cn-eye { display: inline-flex; margin-left: 4px; vertical-align: -2px; }
.cn-eye svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Agenten übrig + Hinweis */
.cn-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cn-score { flex: none; display: flex; min-width: 50px; }
.cn-score.b { justify-content: flex-end; }
.cn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 5px; border-radius: 99px; color: #fff6ea; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); opacity: .6; transition: opacity .3s; }
.cn-pill.now { opacity: 1; }
.cn-pill.r { background: var(--grain), var(--cn-r); } .cn-pill.b { background: var(--grain), var(--cn-b); }
.cn-pill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-pill b { font: 800 15px var(--display); font-variant-numeric: tabular-nums; }
.cn-clue { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cn-clue .tiles { --t: 30px; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cn-clue .tile { animation: fxFlipIn .5s var(--ease) both; }
.cn-num { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font: 800 19px var(--display); color: #fff6ea; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); animation: popIn .4s var(--spring) .2s both; }
.cn-num.r { background: var(--grain), var(--cn-r); } .cn-num.b { background: var(--grain), var(--cn-b); }

/* Spielfeld */
.cn-board { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
/* Das Raster füllt den freien Platz: Karten werden je nach Bildschirm höher oder breiter (zwischen 3:4 und 2:1) */
.cn-grid { --gap: clamp(4px, 1.2cqw, 10px); display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: var(--gap);
  width: min(100cqw, (100cqh - 4 * var(--gap)) * 2 + 4 * var(--gap)); height: min(100cqh, (100cqw - 4 * var(--gap)) / .75 + 4 * var(--gap)); }
@container (max-aspect-ratio: 1/1) { .cn-card .w { font-size: clamp(11px, 3.8cqw, 24px); } }
.cn-card { position: relative; min-height: 0; padding: 0; border: 0; background: none; perspective: 600px; cursor: default; font: inherit; }
.cn-card .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.cn-card.open .in { transform: rotateY(180deg); }
.cn-card .f { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 7px 12px -6px rgba(0, 0, 0, .5); }
.cn-card .fr { color: var(--ink); background: var(--grain), var(--card); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line-2), 0 2px 3px rgba(0, 0, 0, .3), 0 7px 12px -6px rgba(0, 0, 0, .5); }
.cn-card .w { max-width: 100%; padding: 0 5%; text-align: center; font: 700 clamp(10px, 2.7cqw, 24px)/1.08 var(--display); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.cn-card .bk { transform: rotateY(180deg); gap: 1px; color: #fff6ea; background: var(--grain), var(--slate); }
.cn-card .bk .cn-ic { display: flex; } .cn-card .bk .cn-ic svg { width: clamp(16px, 4.6cqw, 40px); height: clamp(16px, 4.6cqw, 40px); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cn-card .bk .w { font-size: clamp(8px, 1.9cqw, 17px); opacity: .85; }
.cn-card.k-r .bk { background: var(--grain), var(--cn-r); }
.cn-card.k-b .bk { background: var(--grain), var(--cn-b); }
.cn-card.k-n .bk { color: var(--ink-2); background: var(--grain), var(--paper-3); }
.cn-card.k-x .bk { background: var(--grain), #1d1714; color: #e9c77d; }
/* Chefs sehen die Farben schon vorher: farbiger Rand unten auf der Karte */
.cn-card.k-r .fr { box-shadow: inset 0 -7px 0 var(--cn-r), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line-2), 0 2px 3px rgba(0, 0, 0, .3); }
.cn-card.k-b .fr { box-shadow: inset 0 -7px 0 var(--cn-b), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line-2), 0 2px 3px rgba(0, 0, 0, .3); }
.cn-card.k-n .fr { box-shadow: inset 0 -7px 0 var(--paper-3), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line-2), 0 2px 3px rgba(0, 0, 0, .3); }
.cn-card.k-x .fr { box-shadow: inset 0 -7px 0 #1d1714, inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line-2), 0 2px 3px rgba(0, 0, 0, .3); }
.cn-card.open { z-index: 0; }
.cn-card.can { cursor: pointer; }
.cn-card.can .in { transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), translate .25s var(--spring); }
@media (hover: hover) { .cn-card.can:hover .in { translate: 0 -3px; } }
.cn-card.sel .fr { box-shadow: inset 0 0 0 3px var(--mustard), inset 0 0 0 4px var(--line-2), 0 6px 14px -4px rgba(0, 0, 0, .6); }
.cn-card.sel .in { translate: 0 -4px; }
.cn-card .marks { position: absolute; right: -5px; top: -7px; z-index: 2; display: flex; pointer-events: none; }
.cn-card .marks .av { --s: 20px; margin-left: -6px; animation: popIn .3s var(--spring); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); border-radius: 50%; }
.cn-flip { animation: cnFlip .6s var(--spring); }
@keyframes cnFlip { 40% { scale: 1.08; } }

/* Fuß: Hinweis geben / fertig */
.cn-foot { flex: none; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cn-give { display: flex; gap: 6px; width: 100%; max-width: 480px; }
.cn-give input { flex: 1; min-width: 0; padding: 11px 14px; border: 0; border-radius: 10px; font: 700 16px var(--text); color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 0 0 2.5px var(--mustard), var(--shadow-1); outline: none; user-select: text; -webkit-user-select: text; }
.cn-give .btn { flex: none; padding: 9px 13px; }
.cn-give .btn svg, .cn-foot .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cn-step { flex: none; display: flex; align-items: center; border-radius: 10px; background: var(--grain), var(--paper); box-shadow: var(--shadow-1); }
.cn-step button { width: 34px; height: 44px; border: 0; background: none; cursor: pointer; font: 800 20px var(--display); color: var(--ink-2); }
.cn-step b { min-width: 22px; text-align: center; font: 800 20px var(--display); color: var(--ink); }
.cn-left { display: inline-flex; gap: 4px; }
.cn-left i { width: 10px; height: 10px; border-radius: 50%; background: var(--mustard); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.cn-win.r { color: var(--red); } .cn-win.b { color: #2f5fa8; }

/* Tisch-Bildschirm */
.cn.table { padding: 8px 24px 20px; gap: 12px; }
.cn.table .cn-clue .tiles { --t: 50px; }
.cn.table .cn-num { min-width: 54px; height: 54px; font-size: 30px; }
.cn.table .cn-pill { padding: 4px 14px 4px 8px; } .cn.table .cn-pill b { font-size: 24px; } .cn.table .cn-pill svg { width: 26px; height: 26px; }
.cn.table .cn-card .marks .av { --s: 30px; }