:root { --red:#ff5b4d; --pink:#ffd8d2; --cream:#fff7e8; --ink:#181417; --yellow:#ffd84d; --blue:#6bd1ff; font-family:Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); min-height:100vh; background-image:radial-gradient(var(--pink) 1px,transparent 1px); background-size:18px 18px; }
header, footer { display:flex; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); border-bottom:3px solid var(--ink); background:var(--cream); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
header a { color:var(--ink); text-decoration:none; }
header i { color:var(--red); font-style:normal; }
main { width:min(1100px,calc(100% - 2rem)); margin:auto; padding:clamp(2.5rem,7vw,6rem) 0; }
.panel { background:var(--cream); border:3px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:clamp(1.4rem,5vw,4rem); }
.join { display:grid; grid-template-columns:1.25fr .75fr; gap:2rem; }
.join .kicker, .join h1, .join .fine { grid-column:1; }
.kicker { margin:0 0 .8rem; color:var(--red); font-size:.7rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(3rem,7vw,6.8rem); line-height:.9; letter-spacing:-.06em; font-weight:400; }
h1 em { color:var(--red); }
form { grid-column:2; grid-row:1/5; align-self:center; display:grid; gap:.55rem; padding:1.2rem; background:var(--pink); border:3px solid var(--ink); }
label { display:grid; gap:.4rem; margin-top:.45rem; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
small { font-weight:400; text-transform:none; letter-spacing:0; }
input, textarea { width:100%; min-height:46px; padding:.9rem; border:3px solid var(--ink); border-radius:0; background:white; color:var(--ink); font:1rem/1.3 Arial,sans-serif; }
textarea { min-height:110px; resize:vertical; }
button { min-height:46px; cursor:pointer; border:3px solid var(--ink); padding:.9rem 1rem; background:var(--yellow); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
button:hover:not(:disabled) { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline:4px solid var(--blue); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
.secondary { background:white; }
.button-row { display:flex; flex-wrap:wrap; gap:.8rem; }
.form-help { margin:.1rem 0 .5rem; font-size:.75rem; line-height:1.35; }
.fine { align-self:end; margin:2rem 0 0; font-size:.75rem; font-weight:700; }
.game-head { display:flex; justify-content:space-between; gap:2rem; border-bottom:3px solid var(--ink); padding-bottom:1.5rem; }
h2 { margin:0; max-width:760px; font:400 clamp(2.2rem,5vw,4.7rem)/.95 Georgia,serif; letter-spacing:-.045em; }
#scores { display:flex; flex-wrap:wrap; justify-content:flex-end; align-content:start; gap:.5rem; list-style:none; margin:0; padding:0; }
#scores li { padding:.45rem .6rem; border:2px solid var(--ink); background:white; font-size:.72rem; font-weight:800; white-space:nowrap; }
#scores li.host { background:var(--blue); }
#scores li.away { opacity:.55; border-style:dashed; }
#scores small { display:inline-block; margin-left:.2rem; }
#content { padding-top:2rem; }
.notice { margin:1.5rem 0 0; padding:.8rem 1rem; border:2px solid var(--ink); background:var(--blue); font-size:.85rem; font-weight:800; }
.invite { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(260px,1.3fr); gap:2rem; align-items:center; }
.room-code { display:inline-block; margin:.5rem 0; padding:.25em .38em; background:var(--ink); color:white; font:900 clamp(2.5rem,8vw,6rem)/1 monospace; letter-spacing:.1em; }
.share-box { display:grid; gap:.5rem; padding:1rem; border:3px solid var(--ink); background:var(--pink); }
.share-box label { margin:0; }
.instruction { max-width:700px; font:1.15rem/1.55 Georgia,serif; }
.prompt-card { margin-top:2rem; padding:clamp(1.2rem,4vw,2rem); border:3px solid var(--ink); background:white; box-shadow:6px 6px 0 var(--red); }
.prompt-card h3 { margin:.2rem 0 1rem; font:400 clamp(1.65rem,4vw,2.8rem)/1.05 Georgia,serif; }
.prompt-card p:not(.kicker) { line-height:1.5; }
.custom-round { margin-top:2rem; border:2px solid var(--ink); background:white; }
.custom-round summary { cursor:pointer; padding:1rem; font-weight:900; text-transform:uppercase; }
.custom-round .action-form { padding:0 1rem 1rem; }
.action-form { max-width:680px; display:grid; grid-column:auto; grid-row:auto; gap:1rem; padding:0; background:none; border:0; }
.action-form label { font-size:.78rem; }
.waiting { padding:2rem; border:3px dashed var(--ink); background:var(--pink); font-weight:800; line-height:1.5; }
.host-controls { margin-top:1.5rem; padding:1.2rem; border:3px solid var(--ink); background:var(--blue); line-height:1.5; }
.host-controls p { margin:.3rem 0 1rem; }
.options { display:grid; gap:1rem; }
.option { width:100%; text-align:left; background:white; font-size:1.08rem; line-height:1.35; text-transform:none; }
.option.own { background:#ddd; box-shadow:none; }
.result { padding:1rem; border:3px solid var(--ink); background:white; }
.result.truth { background:var(--yellow); }
.result h3 { margin:0 0 .5rem; font:400 1.5rem Georgia,serif; }
.result p { margin:.3rem 0; font-size:.85rem; }
.next { margin-top:1.5rem; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.rules div { padding:1rem; border:2px solid var(--ink); background:white; line-height:1.4; }
.rules strong { display:block; font-size:1.5rem; color:var(--red); }
#error, .connection { position:fixed; z-index:2; right:1rem; bottom:1rem; max-width:380px; margin:0; padding:1rem; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-weight:800; }
#error { background:var(--red); color:white; }
.connection { background:var(--blue); }
#error:empty, .connection:empty { display:none; }
footer { position:sticky; top:100vh; border-top:3px solid var(--ink); border-bottom:0; justify-content:center; text-align:center; }
[hidden] { display:none !important; }

@media (max-width:760px) {
  main { width:min(100% - 1.25rem,1100px); padding:1.5rem 0 3rem; }
  .panel { padding:1.15rem; box-shadow:6px 6px 0 var(--ink); }
  .join, .invite { grid-template-columns:1fr; }
  .join .kicker, .join h1, .join .fine, form { grid-column:1; grid-row:auto; }
  .game-head { display:block; }
  #scores { justify-content:flex-start; margin-top:1.5rem; }
  .rules { grid-template-columns:1fr; }
  .room-code { font-size:clamp(2.5rem,17vw,5rem); }
  .share-box input { font-size:.82rem; }
  #error, .connection { left:.7rem; right:.7rem; bottom:.7rem; max-width:none; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}