.daily-switch { gap: clamp(12px, 2.5vw, 24px); flex-wrap: wrap; }
.connections-view { max-width: 760px; margin: auto; }
.connections-intro { margin: 24px 0 16px; text-align: center; color: var(--paper); }
.connections-board { padding: 0 0 12px; }
.connections-tiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.connections-tile { min-height: 88px; display: flex; justify-content: center; align-items: center; text-align: center; padding: 12px 8px; border: 1px solid #59604c; border-radius: 7px; background: #30372a; color: #f0efdf; font-size: clamp(12px,1.8vw,17px); font-weight: 750; line-height: 1.18; text-transform: uppercase; overflow-wrap: anywhere; transition: background .14s, border-color .14s, transform .14s; }
.connections-tile:hover:not(:disabled) { background: #424c36; border-color: #b5c78a; }
.connections-tile[aria-pressed="true"] { background: #c7dd83; border-color: #e2edb8; color: #19200f; transform: translateY(-2px); }
.connections-tile:focus-visible, .connections-view button:focus-visible, .connections-admin button:focus-visible { outline: 3px solid #e4cda2; outline-offset: 3px; }
.connections-tile:disabled { cursor: default; opacity: 1; }
.connections-solved { display: grid; gap: 8px; margin-bottom: 8px; }
.connections-solved:empty { display: none; }
.tone-0 { --group-bg: #67552c; --group-edge: #d2b572; }
.tone-1 { --group-bg: #3e5734; --group-edge: #a5c37b; }
.tone-2 { --group-bg: #354b61; --group-edge: #91b9d2; }
.tone-3 { --group-bg: #59405e; --group-edge: #c1a0c8; }
.connections-group { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 88px; border-radius: 7px; padding: 14px 18px; background: var(--group-bg); border: 1px solid var(--group-edge); text-align: center; color: #fff8e9; }
.connections-group.is-new-group { animation: connections-reveal .55s cubic-bezier(.2,.8,.2,1) both; }
.connections-group.is-new-group::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 30%,#fff4 48%,transparent 66%); transform: translateX(-110%); animation: connections-shine .8s .12s ease-out both; }
.connections-group strong { font-size: 16px; text-transform: uppercase; line-height: 1.25; }
.connections-group p { margin: 6px 0 0; font-size: 15px; line-height: 1.35; }
.connections-group small { display: block; margin-top: 8px; line-height: 1.4; }
.connections-mistakes { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 22px 0 14px; color: var(--muted); font-size: 14px; }
.connections-dots { display: flex; gap: 9px; }
.connections-dots span { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #7a8567; }
.connections-dots .is-live { background: #b3be98; border-color: #b3be98; }
.connections-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.connections-actions button { min-height: 44px; border-radius: 24px; padding: 10px 22px; }
.connections-actions button:disabled { opacity: .45; cursor: default; }
.connections-selection { text-align: center; min-height: 16px; font-size: 12px; color: var(--muted); }
.connections-view .daily-notice, .connections-outcome { text-align: center; }
.connections-outcome { color: var(--cyan); font-size: 18px; font-weight: 650; }
.connections-view .daily-bottom { margin-top: 22px; flex-wrap: wrap; }
.connections-empty { padding: 48px 20px; border: 1px dashed var(--line); text-align: center; line-height: 1.6; color: var(--muted); }
.connections-archive-list { display: grid; gap: 8px; margin-top: 20px; max-height: 55vh; overflow-y: auto; }
.connections-admin { --ink:#181b14; --panel:#22271c; --line:#414936; --muted:#b3b9a7; --cyan:#c7dd83; --paper:#f0efdf; width: min(1080px,calc(100vw - 24px)); max-height: 92vh; padding: 24px; border: 1px solid var(--line); background: var(--ink); color: var(--paper); overflow-y: auto; }
.connections-admin::backdrop { background: #000b; }
.connections-admin > header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.connections-admin h2 { margin: 0; font-family: var(--heading-type); }
.connections-admin h3 { margin: 22px 0 12px; }
.connections-admin p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.connections-editor > label, .connections-field label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.connections-admin input { width: 100%; min-width: 0; background: #12160f; color: var(--paper); border: 1px solid #667153; padding: 10px; border-radius: 4px; font-size: 14px; }
.connections-admin input:focus-visible { outline: 2px solid var(--cyan); }
.connections-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.connections-field { min-width: 0; padding: 14px; border: 1px solid var(--group-edge); border-radius: 6px; background: color-mix(in srgb,var(--group-bg) 22%,#181b14); }
.connections-field legend { color: var(--group-edge); padding: 0 6px; font-size: 13px; }
.connections-word-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.connections-queue-item { padding: 14px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.connections-queue-item small { display: block; margin-top: 5px; color: var(--muted); }
.connections-queue-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.connections-queue-actions button { font-size: 10px; padding: 7px 9px; }
.connections-preview { max-width: 760px; margin: 22px auto; }
.connections-preview details { margin-top: 16px; }
.connections-preview summary { cursor: pointer; padding: 10px 0; }
@keyframes connections-reveal { 0% { opacity: .3; transform: scale(.93,.8); } 65% { opacity: 1; transform: scale(1.012,1.04); } 100% { opacity: 1; transform: none; } }
@keyframes connections-shine { to { transform: translateX(110%); } }
@media(max-width:600px) {

  body[data-site-tab="dailies"] .account-shell { margin-left: auto; max-width: 100%; }
  .daily-toolbar { gap: 10px; align-items: flex-start; }
  .daily-switch { gap: 12px; }
  .daily-switch button { font-size: 11px; }
  .connections-tiles { gap: 5px; }
  .connections-tile { min-height: 78px; padding: 8px 4px; font-size: 11px; }
  .connections-group { min-height: 78px; padding: 12px; }
  .connections-group strong { font-size: 13px; }
  .connections-group p { font-size: 12px; }
  .connections-actions { gap: 7px; }
  .connections-actions button { padding-inline: 16px; font-size: 12px; }
  .connections-fields { grid-template-columns: 1fr; }
  .connections-admin { padding: 16px; }
  .connections-queue-item { flex-direction: column; }
  .connections-queue-actions { justify-content: flex-start; }
}
/* These brief game-feedback animations intentionally play under reduced motion. */


/* September 2026: compact broadcast presentation. */
.connections-view{padding-top:0}.connections-tiles{gap:8px}.connections-tiles button{min-height:68px;padding:12px 8px;border-radius:3px;font-size:14px}.connections-board{margin-top:12px}.connections-controls{margin-top:16px}
@media(max-width:600px){.connections-tiles{gap:5px}.connections-tiles button{font-size:11px;padding:8px 4px;min-height:62px}}

.connections-suggest { margin-top: 24px; border-top: 1px solid var(--line); padding: 18px 0; }
.connections-suggest summary { cursor: pointer; font-weight: 600; }
.connections-suggest > p { color: var(--muted); font-size: 14px; }
#connectionsSuggestionForm { display: grid; gap: 14px; max-width: 640px; margin-top: 16px; }
#connectionsSuggestionForm label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
#connectionsSuggestionForm input { min-width: 0; width: 100%; border: 1px solid var(--line); background: var(--ink); color: var(--paper); padding: 10px; font: inherit; }
#connectionsSuggestionSend { justify-self: start; }
#connectionsSuggestions article { border-bottom: 1px solid var(--line); padding: 14px 0; }
#connectionsSuggestions p { overflow-wrap: anywhere; }
