.nboard-wrap { margin-top: 1rem; padding: .7rem; border-radius: 22px; border: 2px solid var(--line-soft); background: var(--bg-2); transition: border-color .4s, box-shadow .4s; }
.nboard-wrap.turn-red { border-color: rgb(239 68 68 / .7); box-shadow: 0 0 0 4px rgb(239 68 68 / .12), 0 20px 50px -25px rgb(239 68 68 / .6); }
.nboard-wrap.turn-blue { border-color: rgb(59 130 246 / .7); box-shadow: 0 0 0 4px rgb(59 130 246 / .12), 0 20px 50px -25px rgb(59 130 246 / .6); }
.nboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
@media (max-width: 560px) { .nboard { gap: .35rem; } .nboard-wrap { padding: .4rem; } }
.ncard { position: relative; aspect-ratio: 1.5; border-radius: 14px; display: grid; place-items: center; padding: .35rem; font-weight: 900; font-size: clamp(.8rem, 2.2vw, 1.15rem); line-height: 1.3; text-align: center; color: #111827;
  background: linear-gradient(170deg, #ffffff 0%, #f1f3f6 100%); border: 1px solid #e3e6eb; box-shadow: 0 3px 0 #cfd4dc, 0 8px 16px -10px rgb(0 0 0 / .55);
  transition: transform .3s var(--ease), box-shadow .3s, background .4s, color .4s; overflow: hidden; }
/* players see clean white cards with a gold frame and corner marks */
.ncard::before { content: ''; position: absolute; inset: 5px; border-radius: 10px; border: 1.5px solid rgb(var(--primary-rgb) / .55); pointer-events: none; }
.ncard::after { content: ''; position: absolute; top: 9px; inset-inline-start: 9px; width: 8px; height: 8px; transform: rotate(45deg); background: rgb(var(--primary-rgb) / .8); pointer-events: none; box-shadow: calc(var(--dir, 1) * 0px) 0 0 transparent; }
.ncard .w { position: relative; z-index: 1; padding: .15rem .35rem; }
.ncard.can { cursor: pointer; }
.ncard.can:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--primary), 0 16px 26px -12px rgb(0 0 0 / .55); }
.ncard.can:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* the guide's key: strong solid colours */
.is-guide .ncard.c-red:not(.open) { background: linear-gradient(170deg, #ef4444, #c81e1e); border-color: #991b1b; color: #fff; box-shadow: 0 3px 0 #7f1d1d, 0 8px 16px -10px rgb(0 0 0 / .6); }
.is-guide .ncard.c-blue:not(.open) { background: linear-gradient(170deg, #3b82f6, #1d4ed8); border-color: #1e3a8a; color: #fff; box-shadow: 0 3px 0 #1e3a8a, 0 8px 16px -10px rgb(0 0 0 / .6); }
.is-guide .ncard.c-neutral:not(.open) { background: linear-gradient(170deg, #e7dcc4, #cdbf9f); border-color: #a8957a; color: #3f3423; box-shadow: 0 3px 0 #9c8a6d; }
.is-guide .ncard.c-black:not(.open) { background: #0b0b0d; border-color: #000; color: #fff; box-shadow: inset 0 0 0 3px #ef4444, 0 3px 0 #000; }
.is-guide .ncard:not(.open)::before { border-color: rgb(255 255 255 / .45); }
.is-guide .ncard:not(.open)::after { background: rgb(255 255 255 / .75); }
.ncard .bk { position: absolute; z-index: 0; width: 30%; aspect-ratio: 1; opacity: .2; background: linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%); }
/* revealed cards: everyone sees the colour */
.ncard.open { animation: flipin .55s var(--ease); }
@keyframes flipin { from { transform: rotateY(90deg) scale(.9); } }
.ncard.open::before { border-color: rgb(255 255 255 / .5); border-style: dashed; }
.ncard.open::after { background: rgb(255 255 255 / .8); }
.ncard.open.c-red { background: linear-gradient(170deg, #ef4444, #c81e1e); border-color: #991b1b; color: #fff; box-shadow: 0 2px 0 #7f1d1d; }
.ncard.open.c-blue { background: linear-gradient(170deg, #3b82f6, #1d4ed8); border-color: #1e3a8a; color: #fff; box-shadow: 0 2px 0 #1e3a8a; }
.ncard.open.c-neutral { background: linear-gradient(170deg, #e7dcc4, #cdbf9f); border-color: #a8957a; color: #3f3423; box-shadow: 0 2px 0 #9c8a6d; }
.ncard.open.c-black { background: #0b0b0d; border-color: #000; color: #fff; box-shadow: 0 0 0 3px #ef4444, 0 10px 30px -8px rgb(239 68 68 / .7); }
.ncard.open.c-black .bk { opacity: .6; color: #ef4444; width: 46%; }
/* for the guide, already-revealed cards are faded so the remaining ones stand out */
.is-guide .ncard.open { opacity: .45; filter: saturate(.6); }
.ncard em.by { position: absolute; bottom: 7px; inset-inline-end: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.ncard em.by.t-red { background: #ef4444; } .ncard em.by.t-blue { background: #3b82f6; }
.turn-banner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1rem; border-radius: 16px; margin-bottom: 1rem; color: #fff; font-weight: 700; animation: pop .35s var(--ease); }
.turn-banner b { font-size: 1.15rem; font-weight: 900; }
.turn-banner.t-red { background: linear-gradient(100deg, #b91c1c, #ef4444); }
.turn-banner.t-blue { background: linear-gradient(100deg, #1d4ed8, #3b82f6); }
.turn-banner.is-mine { box-shadow: 0 0 0 3px var(--primary), 0 14px 30px -14px var(--primary); }
.turn-banner .tb-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.turn-banner .grow { flex: 1; }
.turn-banner .rt-timer { background: rgb(0 0 0 / .25); border-color: rgb(255 255 255 / .35); color: #fff; }
.clue-form, .clue-show, .clue-wait { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.clue-form .input { width: auto; flex: 1; min-width: 150px; height: 46px; }
.clue-form select.input { flex: 0; min-width: 70px; }
.clue { font-size: 1.4rem; font-weight: 900; padding: .3rem 1rem; border-radius: 14px; background: var(--tint); border: 1px solid var(--line); }
.clue b { color: var(--primary-ink); margin-inline-start: .4rem; }
.turn { padding: .3rem .9rem; border-radius: 99px; font-weight: 900; font-size: .85rem; color: #fff; }
.turn.t-red { background: #ef4444; } .turn.t-blue { background: #3b82f6; }
.end-banner { text-align: center; }
.end-banner h3 { font-size: 1.8rem; margin: 0; }
.teams-mini { display: flex; flex-direction: column; gap: .8rem; }
.tcol { border-radius: 14px; padding: .7rem; background: var(--bg-2); border: 2px solid var(--line-soft); display: flex; flex-direction: column; gap: .35rem; }
.tcol.t-red.is-turn { border-color: #ef4444; } .tcol.t-blue.is-turn { border-color: #3b82f6; }
.tcol .th { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; }
.tcol.t-red .th b { color: #ef4444; } .tcol.t-blue .th b { color: #3b82f6; }
.tcol .left { font-size: 1.3rem; } .tcol .left small { font-size: .7rem; color: var(--text-mute); font-family: var(--font-ar); }
.tm { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; }
.tm svg { width: 15px; height: 15px; color: var(--text-mute); }
.tm em { font-style: normal; font-size: .7rem; padding: .05rem .4rem; border-radius: 99px; background: var(--tint); color: var(--primary-ink); }
.tm small { color: var(--text-mute); }
.score { font-size: .8rem; color: var(--text-mute); font-weight: 700; }
.nlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 220px; overflow-y: auto; font-size: .85rem; }
.nlog li { display: flex; align-items: center; gap: .4rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.t-red { background: #ef4444; } .dot.t-blue { background: #3b82f6; }