:root {
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #edf8f6;
  background: #071511;
  color-scheme: dark;
  --ink: #edf8f6;
  --muted: #9bb8b0;
  --faint: #719087;
  --line: rgba(153, 210, 194, .18);
  --surface: rgba(14, 37, 31, .92);
  --surface-strong: #102e26;
  --surface-soft: #0a211b;
  --mint: #5ce0b5;
  --mint-strong: #2fc696;
  --sky: #6fc9ed;
  --danger: #ff858b;
  --participant-slot1: #0b80a4;
  --participant-slot2: #41c441;
  --participant-slot3: #8e80d4;
  --participant-slot4: #e37ce8;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #071511; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, rgba(44, 190, 149, .2), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(69, 146, 189, .14), transparent 28rem),
    linear-gradient(145deg, #071511 0%, #091b18 48%, #07121a 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(137, 204, 187, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 204, 187, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}
main { position: relative; width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 72px; }
.hero { max-width: 720px; margin: 0 auto 30px; text-align: left; }
.brand-line { display: flex; align-items: center; gap: 9px; color: var(--mint); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
.brand-dot { width: 11px; height: 11px; border-radius: 3px 7px 3px 7px; background: var(--mint); box-shadow: 8px 0 0 rgba(92,224,181,.42), 0 8px 0 rgba(92,224,181,.42); transform: rotate(45deg); margin: 0 8px 8px 0; }
.brand-product { padding-left: 10px; border-left: 1px solid rgba(92,224,181,.35); color: var(--muted); }
h1 { margin: .34em 0 .12em; font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: .98; letter-spacing: -.055em; }
h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 8px; font-size: 1.35rem; }
h3 { margin-bottom: 5px; font-size: 1.05rem; }
.hero-copy { color: var(--muted); font-size: 1.02rem; }
.eyebrow, .label, .panel-label { margin-bottom: 6px; color: var(--mint); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.card { overflow: hidden; margin: 18px 0; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.section-heading { padding: 26px 28px 20px; border-bottom: 1px solid var(--line); }
.section-heading label { margin-top: 16px; }
.section-heading input { max-width: 420px; margin-top: 7px; }
.section-heading > p:last-child, .entry-option p, .panel-note { margin-bottom: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; }
.entry-option { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; min-width: 0; padding: 28px; }
.entry-option + .entry-option { border-left: 1px solid var(--line); }
.option-number { position: absolute; top: 20px; right: 24px; color: rgba(92,224,181,.2); font: 800 2.2rem/1 Georgia, serif; }
label { display: block; color: #c8ddd7; font-size: .82rem; font-weight: 700; }
.field-note { margin-left: 5px; color: var(--faint); font-weight: 500; }
input, textarea, button, select { font: inherit; }
input, textarea, select { width: 100%; border: 1px solid rgba(146,202,187,.28); border-radius: 13px; outline: none; background: rgba(4,17,14,.7); color: var(--ink); transition: border-color .16s, box-shadow .16s, background .16s; }
input { min-height: 48px; padding: 11px 13px; }
textarea { min-height: 54px; padding: 13px 14px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--mint); background: rgba(5,24,19,.94); box-shadow: 0 0 0 3px rgba(92,224,181,.12); }
button { min-height: 46px; border: 1px solid transparent; border-radius: 13px; padding: 10px 17px; background: var(--mint); color: #052018; font-weight: 800; cursor: pointer; transition: transform .16s, filter .16s, border-color .16s, background .16s; }
button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
button:focus-visible { outline: 3px solid rgba(111,201,237,.45); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: wait; transform: none; }
.secondary, .utility, .danger { background: rgba(118,165,153,.11); color: var(--ink); border-color: var(--line); }
.utility { color: var(--sky); }
.danger { color: #ffb7ba; border-color: rgba(255,133,139,.24); background: rgba(255,133,139,.08); }
.join-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
#room-code { font-size: 1.15rem; font-weight: 800; letter-spacing: .16em; text-align: center; }
.room { padding: 0; }
.room-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.room-tabs button { background: rgba(118,165,153,.11); color: var(--muted); border-color: var(--line); }
.room-tabs button[aria-selected="true"] { background: var(--mint); color: #052018; }
.room-overview { padding: 26px 28px 22px; background: linear-gradient(135deg, rgba(28,74,62,.72), rgba(13,42,35,.25)); }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.room-head strong { display: block; font: 800 clamp(2rem,6vw,3.1rem)/1 "Yu Gothic UI", sans-serif; letter-spacing: .13em; }
.room-state { margin: 0; border: 1px solid rgba(92,224,181,.25); border-radius: 999px; padding: 7px 11px; background: rgba(92,224,181,.08); color: #b9f1df; font-size: .78rem; font-weight: 700; }
.room-toolbar { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.participants-panel { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
#participants { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#participants li { border-radius: 999px; padding: 7px 11px; background: rgba(111,201,237,.1); color: #cbeaf7; font-size: .86rem; }
.participant-marker { display: inline-block; width: .72em; height: .72em; margin-right: 7px; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; background: var(--muted); }
.participant-slot1 .participant-marker { background: var(--participant-slot1); }
.participant-slot2 .participant-marker { background: var(--participant-slot2); }
.participant-slot3 .participant-marker { background: var(--participant-slot3); }
.participant-slot4 .participant-marker { background: var(--participant-slot4); }
.participant-badge { margin-left: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; color: var(--ink); font-size: .68rem; }
#messages li { overflow-wrap: anywhere; }
#messages li > .participant-marker { margin-top: .25em; }
.profile-panel { display: grid; grid-template-columns: minmax(150px,.7fr) 1.3fr; gap: 26px; align-items: end; padding: 22px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(4,19,16,.26); }
.rename-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; margin: 0; }
.chat-panel { padding: 24px 28px 26px; }
.chat-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.chat-heading h2 { margin: 0; }
.chat-heading > span { color: var(--faint); font-size: .76rem; }
#messages { min-height: 230px; max-height: min(430px,42vh); overflow-y: auto; margin: 0; padding: 18px; border: 1px solid rgba(133,190,175,.12); border-radius: 17px; background: rgba(3,15,13,.56); scrollbar-color: rgba(92,224,181,.35) transparent; }
#messages:empty { display: grid; place-items: center; }
#messages:empty::before { content: "まだメッセージはありません"; color: var(--faint); font-size: .86rem; }
#send-form { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; padding-top: 12px; background: linear-gradient(to bottom, transparent, var(--surface) 22%); }
#send-button { min-width: 72px; }
.app-status { min-height: 24px; margin: 18px auto 0; color: var(--muted); text-align: center; font-size: .86rem; }
.app-status.error { color: #ffb7ba; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
footer { margin-top: 20px; color: var(--faint); text-align: center; font-size: .82rem; }
footer a { color: #9edcf5; text-underline-offset: 3px; }
.message-report { min-height: 32px; margin-left: 8px; padding: 4px 9px; border-radius: 9px; background: rgba(118,165,153,.12); color: var(--muted); font-size: .7rem; }
dialog { width: min(440px,calc(100% - 32px)); border: 1px solid var(--line); border-radius: 20px; background: #102e26; color: var(--ink); padding: 22px; }
.dialog-actions { display: grid; gap: 8px; margin-top: 16px; }
select { padding: 10px; }
.toast { position: fixed; left: 50%; bottom: max(24px,env(safe-area-inset-bottom)); z-index: 1000; max-width: min(90vw,440px); transform: translateX(-50%); padding: 12px 18px; border: 1px solid rgba(92,224,181,.36); border-radius: 999px; background: #123c30; color: var(--ink); box-shadow: 0 14px 38px rgba(0,0,0,.48); text-align: center; }
.toast.error { border-color: rgba(255,133,139,.45); color: #ffd6d8; }
.toast[hidden] { display: none; }
@media (max-width: 700px) {
  main { width: min(100% - 24px, 560px); padding: 30px 0 54px; }
  .hero { margin-bottom: 22px; }
  h1 { font-size: clamp(2.4rem,13vw,3.8rem); }
  .card { border-radius: 21px; }
  .section-heading, .entry-option, .room-overview, .chat-panel { padding-left: 20px; padding-right: 20px; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry-option + .entry-option { border-left: 0; border-top: 1px solid var(--line); }
  .profile-panel { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
}
@media (max-width: 430px) {
  .brand-line { font-size: .64rem; }
  .hero-copy { font-size: .92rem; }
  .room-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .room-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .room-toolbar .danger { grid-column: 1 / -1; }
  .rename-form { grid-template-columns: 1fr; }
  .rename-form button { width: 100%; }
  #messages { min-height: 210px; max-height: 40vh; padding: 13px; }
  #send-form { grid-template-columns: minmax(0,1fr) auto; }
  #send-button { min-width: 64px; padding-inline: 12px; }
  .toast { bottom: max(14px,env(safe-area-inset-bottom)); width: calc(100% - 28px); }
}