/* The players' chat (assets/chat.js): the panel the bubble opens, and the stream of /chat/. The site's look: an indigo window with a bevelled edge and the hard menu shadow, a night
   header in the display face with the typed voice under it, sunflower codenames, a lime "on air" lamp, bevel buttons. Its own colours, so it looks the same on every page. */
.nc { --sun: #fdcb5e; --yellow: #f7dd1a; --lime: #acca52; --lilac: #d6d2f8; --night: #17143d; --deep: #2a2566; --cyan: #44e4ff;
  display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; color: #fff; font: 15px/1.45 Verdana, Tahoma, "DejaVu Sans", sans-serif; text-align: left;
  background: var(--deep); border: 2px solid; border-color: #8a83e0 #0d0b26 #0d0b26 #8a83e0; outline: 1px solid #000; }
.nc *, .nc *::before, .nc *::after { box-sizing: border-box; }
.nc[hidden], .nc [hidden] { display: none !important; }
/* docked to the left edge of the page, the full height, sliding in from the left (owner, 2026-10-24); a phone gets the whole screen */
.nc-pop { position: fixed; z-index: 40; left: 0; top: var(--nc-vt, 0px); width: min(400px, 100vw); height: var(--nc-vh, 100dvh); border-width: 0 2px 0 0; outline: 0;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-shadow: 8px 0 0 rgba(0, 0, 0, .35); animation: nc-in .2s ease-out; }
@keyframes nc-in { from { transform: translateX(-100%); } }
@media (max-width: 560px), (max-height: 520px) { .nc-pop { right: 0; width: auto; border: 0; box-shadow: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } }
html.nc-lock, html.nc-lock body { overflow: hidden; overscroll-behavior: none; }      /* the page under the full-screen panel stays put */
.nc-page { margin: 20px 0 0; box-shadow: 8px 8px 0 rgba(0, 0, 0, .35); }      /* (its height: the chat page's own layout) */

/* the header: a lamp, the channel's name, the typed line, close */
.nc-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 14px; background: var(--night); border-bottom: 2px solid #000; }
.nc-lamp { flex: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4ffd0, var(--lime) 55%, #5d7420); box-shadow: 0 0 0 2px #000, 0 0 10px 2px rgba(172, 202, 82, .7); }
.nc-off .nc-lamp { background: radial-gradient(circle at 35% 30%, #8a8a8a, #4a4a4a 60%, #2a2a2a); box-shadow: 0 0 0 2px #000; }
.nc-title { flex: 1; min-width: 0; }
.nc-title h2 { margin: 0; padding: 0; background: none; font: 17px/1.15 "Bowlby One", "Arial Black", Impact, sans-serif; color: var(--yellow); letter-spacing: .01em; }
.nc-title p { margin: 2px 0 0; font: bold 11px/1.3 "Courier New", Courier, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 40px; min-height: 40px; padding: 0 12px; background: #2c2770; color: var(--sun); font: bold 13px/1 Verdana, Tahoma, sans-serif;
  text-decoration: none; border: 2px solid; border-color: #5f58c4 #0d0b26 #0d0b26 #5f58c4; outline: 1px solid #000; cursor: pointer; }
.nc-btn:hover { background: #3a348a; }
.nc-btn:active { border-color: #0d0b26 #5f58c4 #5f58c4 #0d0b26; }
.nc-btn svg { width: 16px; height: 16px; fill: currentColor; }
.nc-go { background: var(--sun); color: #000; border-color: #fff3c9 #8a5f00 #8a5f00 #fff3c9; }
.nc-go:hover { background: #ffdc85; }
.nc-go:active { border-color: #8a5f00 #fff3c9 #fff3c9 #8a5f00; }
.nc-go:disabled { opacity: .6; cursor: default; }

/* the stream */
.nc-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nc-log { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px 0 10px; list-style: none; scrollbar-color: #5f58c4 transparent;
  background: repeating-linear-gradient(transparent 0 23px, rgba(95, 88, 196, .12) 23px 24px), #221e5c; }
.nc-m { position: relative; padding: 7px 64px 5px 14px; }
.nc-mine { padding-right: 124px; }
.nc-m + .nc-m:not(.nc-cont) { border-top: 1px dashed rgba(95, 88, 196, .55); }
.nc-cont { padding-top: 0; }
.nc-cont .nc-h { display: none; }
.nc-h { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.nc-who { font-weight: bold; font-size: 13px; color: var(--sun); overflow-wrap: anywhere; }
.nc-mine { box-shadow: inset 3px 0 0 var(--lime); background: rgba(172, 202, 82, .07); }
.nc-mine .nc-who { color: var(--lime); }
.nc-acct { padding: 0 4px; border: 1px solid currentColor; font: bold 9px/14px Verdana, Tahoma, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.nc-h time { font: 11px/1 "Courier New", Courier, monospace; color: #a9a4e0; letter-spacing: .03em; }
.nc-t { margin: 1px 0 0; color: #f1efff; overflow-wrap: anywhere; }
.nc-rep { position: absolute; top: 4px; right: 8px; min-height: 28px; padding: 0 8px; background: none; color: #a9a4e0; font: 11px/1 Verdana, Tahoma, sans-serif; border: 1px solid transparent; cursor: pointer; opacity: 0; }
.nc-act { min-height: 28px; padding: 0 8px; background: none; color: #a9a4e0; font: 11px/1 Verdana, Tahoma, sans-serif; border: 1px solid transparent; cursor: pointer; }
.nc-acts { position: absolute; top: 4px; right: 8px; display: flex; align-items: center; gap: 2px; opacity: 0; }
.nc-m:hover .nc-rep, .nc-m:hover .nc-acts, .nc-rep:focus-visible, .nc-rep:disabled, .nc-acts:focus-within { opacity: 1; }
.nc-ed { font: italic 11px/1 Verdana, Tahoma, sans-serif; color: #a9a4e0; }
.nc-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.nc-edit .nc-in { flex: 1 0 100%; margin: 2px 0; min-height: 36px; font-size: 16px; }      /* (16: iOS zooms the page into a smaller field) */
.nc-ask { margin: 4px 0 0; font: bold 12px/1.3 Verdana, Tahoma, sans-serif; color: var(--sun); }
.nc-ask .nc-act { color: var(--sun); border-color: #5f58c4; margin-left: 6px; }
.nc-busy .nc-acts { display: none; }
.nc-rep:hover, .nc-act:hover { color: #fff; border-color: #5f58c4; }
.nc-rep:disabled { cursor: default; color: var(--lime); }
.nc:not(.nc-named) .nc-rep, .nc:not(.nc-named) .nc-acts, .nc-mine .nc-rep { display: none; }
@media (hover: none) { .nc-rep { opacity: 1; min-height: 44px; min-width: 44px; top: 0; right: 2px; } .nc-acts { opacity: 1; top: 0; right: 2px; } .nc-act { min-height: 44px; min-width: 44px; } }
.nc-sp { margin: 0; max-width: none; }
.nc-sp summary { display: inline-block; min-height: 0; padding: 0 6px; background: #000; color: var(--sun); font: bold 11px/20px "Courier New", Courier, monospace; letter-spacing: .1em; cursor: pointer; list-style: none; }
.nc-sp summary::-webkit-details-marker { display: none; }
.nc-sp[open] summary { background: none; color: #a9a4e0; padding-left: 0; }
.nc-top { margin-bottom: auto; }      /* (few messages sit at the bottom, by the line, as in any chat) */
.nc-note { padding: 10px 14px; font: bold 12px/1.4 "Courier New", Courier, monospace; letter-spacing: .04em; color: var(--sun); text-align: center; }
.nc-note button { margin-top: 8px; }
.nc-more { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); }

/* posting: the codename strip (opened by the first Send), then the line and Send */
.nc-join { flex: none; padding: 12px 14px 10px; background: var(--night); border-top: 2px solid #000; animation: nc-up .18s ease-out; }
@keyframes nc-up { from { transform: translateY(8px); opacity: 0; } }
.nc-join[hidden] { display: none; }
.nc-join h3 { margin: 0 0 8px; font: bold 12px/1.3 "Courier New", Courier, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.nc-join label { display: block; margin: 0 0 8px; font: bold 12px/1.3 Verdana, Tahoma, sans-serif; color: var(--lilac); }
.nc-join label small { font-weight: normal; color: #a9a4e0; }
.nc-in { display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 0 10px; font: 16px/1.4 Verdana, Tahoma, sans-serif; color: #1b1838; background: #fff; border: 2px solid; border-color: #0d0b26 #8a83e0 #8a83e0 #0d0b26; border-radius: 0; }
.nc-in[aria-invalid="true"] { border-color: #c4314b; }
.nc-join .nc-tick { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-weight: normal; font-size: 12px; line-height: 1.35; color: var(--lilac); cursor: pointer; }
.nc-tick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--lime); }
.nc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nc-link { padding: 6px 2px; background: none; border: 0; color: var(--sun); font: bold 12px/1.3 Verdana, Tahoma, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nc-msg { margin: 8px 0 0; font: bold 12px/1.4 Verdana, Tahoma, sans-serif; color: var(--sun); }
.nc-msg:empty { display: none; }
.nc-say { flex: none; display: flex; gap: 8px; padding: 10px 10px 8px; background: #1d1950; border-top: 2px solid #000; }
.nc-say .nc-in { flex: 1; min-width: 0; margin: 0; min-height: 44px; }
.nc-say .nc-go { min-height: 44px; }
.nc-me { flex: none; margin: 0; padding: 0 12px 8px; background: #1d1950; font: 11px/1.5 "Courier New", Courier, monospace; letter-spacing: .03em; color: #a9a4e0; }
.nc-me b { color: var(--sun); }
.nc-me .nc-link { padding: 0; font: inherit; }
.nc-me .nc-quiet { color: #a9a4e0; text-decoration-color: rgba(169, 164, 224, .5); }
.nc :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.nc .nc-in:focus-visible { outline-offset: 0; }
@media (pointer: coarse) { .nc-btn { min-width: 44px; min-height: 44px; } .nc-tick input { width: 24px; height: 24px; } .nc-in { min-height: 44px; } .nc-link { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nc-pop, .nc-join { animation: none; } }