/* Base */
:root { font-family: var(--font-body); color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
button, input, summary { font: inherit; }
button, input { border: var(--border-control) solid var(--purple); border-radius: var(--radius-control); min-height: var(--tap-size); }
input { color: var(--ink); background: var(--paper); width: 100%; padding: var(--space-3); }
input::placeholder { color: var(--muted); opacity: 1; }
button { color: var(--ink); background: var(--surface); padding: var(--space-3) var(--space-4); font-weight: 900; cursor: pointer; }
button:hover:not(:disabled) { box-shadow: var(--shadow-control); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button:disabled, input:disabled { color: var(--muted); cursor: not-allowed; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--space-1); }
label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Shared layout / brand */
.shell { max-width: var(--page-max); margin: auto; padding: var(--space-4) var(--gutter) var(--space-8); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 40px; margin-bottom: var(--space-4); }
.brand-small { display: flex; align-items: center; gap: var(--space-3); font-weight: 900; font-size: var(--text-sm); }
.brand-mark { display: flex; gap: 2px; }
.brand-mark span { display: grid; place-items: center; width: 22px; height: 28px; background: var(--yellow); color: var(--brand-ink); border: var(--border-control) solid var(--brand-ink); border-radius: var(--space-1); font-family: var(--font-display); box-shadow: 0 2px 0 var(--brand-ink); }
.brand-mark span:nth-child(2n) { background: var(--pink); }
.brand-caption { display: none; }
.connection { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); margin: 0; white-space: nowrap; }
.dot { width: 10px; height: 10px; border: var(--border-control) solid var(--muted); border-radius: 50%; flex-shrink: 0; }
.connection[data-status="connected"] .dot { border-color: var(--teal); background: var(--teal); }
.layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.intro, .ticket { min-width: 0; }
.bingo-word { display: grid; grid-template-columns: repeat(5, 1fr); margin: var(--space-3) 0 var(--space-8); gap: var(--space-1); transform: rotate(-3deg); }
.bingo-word span { background: var(--yellow); color: var(--brand-ink); border: var(--border-ticket) solid var(--brand-ink); text-align: center; font: 900 clamp(2rem, 10vw, 4rem)/1.2 var(--font-display); box-shadow: var(--shadow-tile); border-radius: var(--radius-sm); }
.bingo-word span:nth-child(2n) { background: var(--pink); }
.intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; margin-bottom: var(--space-4); }
.intro > p { color: var(--muted); line-height: 1.7; font-size: var(--text-base); }
.rule-ticket { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); border-top: var(--border-control) dashed var(--line); padding-top: var(--space-4); }
.five { font: 900 var(--text-3xl)/1 var(--font-display); color: var(--purple); }
.rule-ticket p { line-height: 1.6; font-size: var(--text-sm); margin: 0; }
.ticket, .panel { background: var(--surface); border: var(--border-ticket) solid var(--purple); border-radius: var(--radius-ticket) var(--radius-ticket) var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-ticket-mobile); }
.ticket { padding: var(--space-6) var(--space-4); position: relative; }
.ticket h2 { margin-bottom: var(--space-2); font-size: var(--text-xl); letter-spacing: -.035em; }

/* Shared controls / feedback */
.muted, .hint { color: var(--muted); }
.muted { margin-bottom: var(--space-6); line-height: 1.5; }
.primary { display: flex; width: 100%; justify-content: space-between; align-items: center; color: var(--brand-ink); background: var(--yellow); margin-top: var(--space-4); }
.primary:disabled { color: var(--brand-ink); background: color-mix(in srgb, var(--yellow) 55%, var(--surface)); }
.divider { border-top: var(--border-control) dashed var(--line); margin: var(--space-8) 0 var(--space-6); text-align: center; }
.divider span { position: relative; top: -.65em; padding: 0 var(--space-3); background: var(--surface); color: var(--muted); font-size: var(--text-sm); }
.join-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2); }
.code-input { font-weight: 900; letter-spacing: .15em; text-transform: uppercase; min-width: 0; }
.hint { font-size: var(--text-xs); margin: var(--space-2) 0 0; line-height: 1.4; }
.quiet { width: 100%; border-color: var(--line); background: var(--paper); }
.error { border-left: var(--space-1) solid var(--error); padding-left: var(--space-3); color: var(--error); line-height: 1.5; font-weight: 700; }
.toast { color: var(--teal); font-weight: 700; line-height: 1.5; font-size: var(--text-sm); margin: var(--space-3) 0; }
.toast:empty { display: none; }
#share-link { margin-top: var(--space-2); font-size: var(--text-xs); }
#share-label { margin-top: var(--space-4); }
.progress-toggle { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-size); margin: var(--space-4) 0 0; padding: var(--space-2); border: var(--border-thin) solid var(--line); border-radius: var(--radius-control); line-height: 1.4; cursor: pointer; }
.progress-toggle input { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; padding: 0; accent-color: var(--purple); }
.progress-toggle:focus-within { outline: var(--focus-ring); outline-offset: var(--space-1); }
.progress-note { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; margin: var(--space-3) 0; }
.ticket-footer { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--muted); border-top: var(--border-control) dashed var(--line); padding-top: var(--space-4); margin-top: var(--space-6); }
.ticket-footer .icon { color: var(--purple); width: 16px; height: 16px; }

/* Home / Lobby */
#lobby-share { display: none; }
.shell[data-screen="lobby"] #lobby-share { display: block; }
.shell[data-screen="lobby"] .intro > h2, .shell[data-screen="lobby"] .intro > p, .shell[data-screen="lobby"] .rule-ticket { display: none; }
.room-stamp { border: var(--border-ticket) dashed var(--purple); border-radius: var(--radius-panel); text-align: center; padding: var(--space-6) var(--space-2); background: var(--paper); }
.room-stamp > span { display: block; color: var(--muted); font-size: var(--text-sm); }
.room-stamp strong { display: block; font: 900 clamp(2.5rem, 8vw, 6rem)/1.3 var(--font-display); letter-spacing: .1em; padding-left: .1em; }
.players { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.players li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-4) 0; border-bottom: var(--border-thin) solid var(--line); }
.players li > span:nth-child(2) { overflow-wrap: anywhere; font-weight: 700; }
.seat-number { display: grid; place-items: center; width: 32px; height: 32px; border: var(--border-control) solid var(--purple); border-radius: 50%; background: var(--paper); }
.seat-status { font-size: var(--text-xs); color: var(--muted); }
.lobby-message { font-weight: 700; line-height: 1.5; margin: var(--space-6) 0 var(--space-3); }
@media (min-width: 768px) {
  .brand-caption { display: inline; }
  .layout { grid-template-columns: 1fr 1fr; gap: var(--space-8); min-height: calc(100svh - 128px); }
  .ticket { padding: var(--space-8); box-shadow: var(--shadow-ticket); }
  .intro { max-width: 560px; }
  .bingo-word span { font-size: clamp(2rem, 6vw, 4rem); }
}
@media (min-width: 1024px) { .layout { gap: var(--space-12); } .ticket { max-width: 520px; width: 100%; justify-self: end; } }