:root{
  --accent:#d1495b;
  --accent2:#6c5ce7;
  --grad:linear-gradient(120deg, var(--accent), var(--accent2));
  --btn-c1:var(--accent);
  --btn-c2:var(--accent2);
  --btn-grad:linear-gradient(120deg, var(--btn-c1), var(--btn-c2));
  --bg:#f7f2ec;
  --card-bg:#fff;
  --text:#29252b;
  --muted:#66606a;
  --card-border:#e3d9df;
  --danger:#be3131;
  --hero-grid:rgba(20,20,40,0.05);
}
:root[data-theme="dark"]{
  --accent:#ff7d90;
  --accent2:#a29bfe;
  /* ボタンの塗りは文字用のaccentよりトーンを落として、暗い背景で発光しすぎないようにする */
  --btn-c1:#d1495b;
  --btn-c2:#6c5ce7;
  --bg:#151418;
  --card-bg:#211f25;
  --text:#f0edf2;
  --muted:#bbb3bd;
  --card-border:#3a3540;
  --danger:#ff8f7a;
  --hero-grid:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle, var(--hero-grid) 1px, transparent 1px),
    radial-gradient(900px circle at 15% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(800px circle at 100% 10%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 55%);
  background-size:22px 22px, auto, auto;
  background-attachment:fixed;
  color:var(--text);
}
.site-nav{width:100%;padding:.7rem 1rem;font-size:.85rem}
.site-nav a{
  display:inline-flex;
  align-items:center;
  color:var(--text);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:999px;
  padding:.35rem .9rem;
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.site-nav a:hover{border-color:var(--accent);transform:translateY(-1px)}
footer a{color:inherit}
.site-header{text-align:center;padding:.8rem 1rem}
.site-header h1{
  margin:0;
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:-0.01em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.subtitle,.status,.label{color:var(--muted)}
.subtitle{margin:.35rem 0 0}
main{width:100%;max-width:560px;padding:1rem 1rem 2rem}
.hidden{display:none!important}
.panel,.turn-box{
  width:100%;
  margin:0 0 1rem;
  padding:1.25rem;
  border-radius:12px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  text-align:center;
}
.panel h2,.panel h3{margin-top:0}
.text-input{
  padding:.65rem .75rem;
  border:1px solid var(--card-border);
  border-radius:7px;
  background:var(--card-bg);
  color:var(--text);
  font:inherit;
  text-align:center;
}
.panel>.text-input{width:min(100%,260px);display:block;margin:.5rem auto 1rem}
.primary{
  border:0;
  border-radius:8px;
  padding:.75rem 1rem;
  background:var(--btn-grad);
  color:#fff;
  font:inherit;
  font-weight:bold;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--btn-c1) 35%, transparent);
}
.primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.secondary{
  border:1px solid var(--accent);
  border-radius:8px;
  padding:.6rem .9rem;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-weight:bold;
  cursor:pointer;
}
.link-button{border:0;padding:.35rem;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent);
  border-radius:8px;
  padding:.75rem 1rem;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.secondary-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.online-choice{display:flex;flex-direction:column;align-items:center;gap:1rem}
.join-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.join-row .text-input{width:140px;text-transform:uppercase;letter-spacing:.14em}
.error{min-height:1.2em;color:var(--danger)}
.host-code{padding-bottom:1rem;border-bottom:1px solid var(--card-border)}
.room-code{color:var(--accent);font-size:2rem;font-weight:bold;letter-spacing:.2em}
.roster{padding:0;list-style:none}
.roster li{margin:.35rem 0;padding:.5rem;border-radius:6px;background:color-mix(in srgb, var(--accent) 8%, var(--card-bg));font-weight:bold}
.game{display:flex;flex-direction:column;align-items:center}
.turn-box{margin-bottom:.7rem}
.turn-box p{margin:.25rem}
.topic{font-size:1.4rem;font-weight:bold;color:var(--accent);word-break:break-all;min-height:1.7em}
canvas{width:min(100%,320px);height:auto;aspect-ratio:1;border:3px solid var(--accent);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair;box-shadow:0 2px 8px #0002}
.drawing-controls{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:.8rem 0}
.guess-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.8rem 0}
.guess-row .text-input{min-width:200px}
.guess-log{list-style:none;padding:0;margin:.4rem 0 .8rem;width:100%;display:flex;flex-direction:column;gap:.35rem;max-height:11rem;overflow-y:auto}
.guess-log li{padding:.4rem .7rem;border-radius:6px;background:color-mix(in srgb, var(--accent2) 10%, var(--card-bg));border:1px solid var(--card-border);font-size:.9rem;text-align:left;word-break:break-all;transition:opacity .3s ease}
.guess-log li.fade-out{opacity:0}
.scores{padding:0;list-style:none;width:100%}
.scores li{margin:.3rem 0;padding:.5rem;border-radius:6px;background:color-mix(in srgb, var(--accent) 7%, var(--card-bg))}
.howto{text-align:left}
.howto h2{text-align:center}
.howto li{margin:.5rem 0;line-height:1.55}
.site-footer{margin-top:auto;padding:1.2rem;color:var(--muted);font-size:.82rem;text-align:center}
:root[data-theme="dark"] canvas{background:#fff}
@media(max-width:480px){
  .site-header h1{font-size:1.45rem}
  .panel{padding:1rem}
  .room-code{font-size:1.7rem}
  .drawing-controls{width:100%;justify-content:center;gap:.4rem}
  .drawing-controls button{padding:.65rem .55rem;font-size:.9rem}
  .result-actions{flex-direction:column}
}
.connection-health{position:sticky;top:.5rem;z-index:20;margin:.5rem auto;padding:.7rem 1rem;max-width:42rem;border:1px solid #d97706;border-radius:.6rem;background:#fffbeb;color:#92400e;font-weight:700;text-align:center}
.connection-health.hidden{display:none}