/* ワードウルフ「ゆるフラット」
   デザインの正本: Claude Design キャンバス（ゆるフラット 全画面 / 1台モード）
   CSP で style 属性が使えないため、見た目はすべてクラスで指定する。 */

:root {
  --lawn: #c8d3a9;
  --lawn-dim: #bcc59f;
  --ink: #23301f;
  --muted: #3f4c38;
  --cream: #f5f0e1;
  --cream2: #e4dcc6;
  --dash: #ddd5bf;
  --track: #aebc8c;
  --shadow: #9dad7f;
  --tomato: #e2553f;
  --tomato-ink: #c4412d;
  --danger: #a8341f;
  --wolf: #44586e;
  --fox: #e9a34e;
  --bg: var(--lawn);
  --sh: var(--shadow);
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", sans-serif;
  color: var(--ink);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  overflow-x: hidden;
}
body {
  transition: background-color 0.35s ease;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
input,
textarea {
  border: 0;
  margin: 0;
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 背景テーマ（body に付ける） ---------- */
body.th-pause {
  --bg: var(--lawn-dim);
}
body.th-wolf {
  --bg: #aebac6;
  --sh: rgba(35, 48, 31, 0.18);
}
body.th-fox {
  --bg: #e6d08f;
  --sh: rgba(35, 48, 31, 0.18);
}
body.tint {
  --bg: var(--t);
  --sh: rgba(35, 48, 31, 0.16);
}

/* ---------- プレイヤー色（参加順 0〜14） ---------- */
.c0 { --c: #e2553f; --t: #f0a090; --e1: 30%; --e2: 56%; --ey: 36%; }
.c1 { --c: #8fa9c4; --t: #b9cadb; --e1: 42%; --e2: 68%; --ey: 34%; }
.c2 { --c: #e7b94c; --t: #f0d48e; --e1: 20%; --e2: 46%; --ey: 44%; }
.c3 { --c: #e9a1a0; --t: #f3c6c4; --e1: 36%; --e2: 62%; --ey: 30%; }
.c4 { --c: #b6a6cf; --t: #d2c8e3; --e1: 32%; --e2: 58%; --ey: 42%; }
.c5 { --c: #efe2b8; --t: #f2e9cb; --e1: 24%; --e2: 50%; --ey: 36%; }
.c6 { --c: #6fb3a6; --t: #a9d3ca; --e1: 28%; --e2: 54%; --ey: 40%; }
.c7 { --c: #ee9a55; --t: #f5c59a; --e1: 38%; --e2: 64%; --ey: 38%; }
.c8 { --c: #a3a04a; --t: #d3d19a; --e1: 22%; --e2: 48%; --ey: 34%; }
.c9 { --c: #7fc4e0; --t: #b6dfef; --e1: 34%; --e2: 60%; --ey: 44%; }
.c10 { --c: #b98a6a; --t: #dcc2ae; --e1: 30%; --e2: 56%; --ey: 32%; }
.c11 { --c: #d9779c; --t: #edb4c9; --e1: 26%; --e2: 52%; --ey: 40%; }
.c12 { --c: #9aa3a8; --t: #cbd0d3; --e1: 40%; --e2: 66%; --ey: 36%; }
.c13 { --c: #c9d86b; --t: #e3ebae; --e1: 24%; --e2: 50%; --ey: 42%; }
.c14 { --c: #7e86c6; --t: #b9bee3; --e1: 36%; --e2: 62%; --ey: 34%; }

/* ---------- 画面の骨組み ---------- */
.site-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 22px max(20px, env(safe-area-inset-bottom));
  color: var(--ink);
  font-size: 12px;
}
.site-footer a {
  color: inherit;
  text-underline-offset: 3px;
}
#app {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.scr {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 22px
    max(24px, calc(env(safe-area-inset-bottom) + 12px));
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.top-r {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grow {
  flex-grow: 1;
}
.row {
  display: flex;
  align-items: center;
}
.wrap {
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.centerx {
  justify-content: center;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 0;
}
.vmid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}
.center {
  text-align: center;
}
.g4 { gap: 4px; }
.g6 { gap: 6px; }
.g8 { gap: 8px; }
.g10 { gap: 10px; }
.g12 { gap: 12px; }
.g16 { gap: 16px; }
.w100 { width: 100%; }

/* ---------- 文字 ---------- */
.h1 {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
  margin: 0;
}
.h2 {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
}
.title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.win {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.1;
}
.who {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.who-sub {
  font-size: 22px;
  font-weight: 900;
  margin-top: 4px;
}
.word {
  font-size: 60px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.word.long {
  font-size: 40px;
}
.tm {
  font-size: 116px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tm.m {
  font-size: 84px;
  letter-spacing: -0.04em;
}
.tm.s {
  font-size: 30px;
  letter-spacing: 0;
}
.tm.paused {
  color: #7e8c6c;
}
.big-n {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.big-n small {
  font-size: 32px;
  color: var(--muted);
}
.sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.mut {
  color: var(--muted);
  font-weight: 700;
}
.t12 { font-size: 12px; }
.t13 { font-size: 13px; }
.t14 { font-size: 14px; }
.t15 { font-size: 15px; }
.t16 { font-size: 16px; }
.t17 { font-size: 17px; }
.t20 { font-size: 20px; }
.t22 { font-size: 22px; }
.b7 { font-weight: 700; }
.b9 { font-weight: 900; }
.num {
  font-variant-numeric: tabular-nums;
}
.lh {
  line-height: 1.65;
}
.err {
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.err:empty {
  display: none;
}

/* ---------- ボタン ---------- */
.btn {
  min-height: 62px;
  padding: 0 20px;
  border-radius: 31px;
  background: var(--ink);
  color: var(--cream);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  transition: transform 0.08s ease, opacity 0.2s;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn.red { background: var(--tomato-ink); color: #fff7ea; }
.btn.cr { background: var(--cream); color: var(--ink); }
.btn.ln { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); color: var(--ink); }
.btn.dg { background: transparent; box-shadow: inset 0 0 0 2.5px var(--tomato-ink); color: var(--danger); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.soft { background: var(--cream2); color: var(--ink); }
.btn.sm { min-height: 56px; font-size: 16px; border-radius: 28px; }
.btn:disabled,
.btn.off {
  background: var(--track);
  color: var(--muted);
  box-shadow: none;
}
.btn.pressed {
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.35);
}
.btns {
  display: flex;
  gap: 10px;
}
.btns > .btn {
  flex: 1 1 0;
  width: auto;
}
.btns > .btn.x2 {
  flex-grow: 2.4;
  padding: 0 12px;
  white-space: nowrap;
}
.pill {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px var(--ink);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pill.on {
  background: var(--ink);
  color: var(--cream);
}
.ib {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 240, 225, 0.65);
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 900;
}
.ib.dark {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  background: var(--ink);
  color: var(--cream);
}
.code {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 15px;
  background: rgba(245, 240, 225, 0.65);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
}
.code.dark {
  background: var(--ink);
  color: var(--cream);
}
.rc {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(245, 240, 225, 0.65);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rc.dark {
  background: var(--ink);
  color: var(--cream);
}
.chip {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--track);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sheet .chip,
.box .chip {
  box-shadow: inset 0 0 0 2px var(--dash);
}
.chip.on,
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
  box-shadow: none;
}
.tag {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--cream);
  white-space: nowrap;
}
.tag.lt {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
.stg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stg > span {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  background: rgba(245, 240, 225, 0.55);
  color: var(--muted);
}
.stg > .on {
  background: var(--ink);
  color: var(--cream);
}
.stg > .dn {
  text-decoration: line-through;
  opacity: 0.75;
}

/* ---------- カード ---------- */
.card {
  background: var(--cream);
  border-radius: 22px;
}
.pad { padding: 16px 18px; }
.pad-l { padding: 24px 22px 22px; }
.fs { box-shadow: 7px 8px 0 var(--sh); }
.tilt { transform: rotate(-2deg); box-shadow: 6px 7px 0 var(--sh); }
.tilt3 { transform: rotate(-3deg); box-shadow: 8px 9px 0 var(--sh); }
.wordcard {
  width: min(284px, 100%);
  padding: 42px 16px 48px;
  text-align: center;
}
.soft-card {
  background: rgba(245, 240, 225, 0.6);
  border-radius: 18px;
  padding: 12px 14px;
}
.notice {
  background: var(--cream);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.notice > svg {
  flex-shrink: 0;
}

/* ---------- タイマーのバー ---------- */
.bar {
  height: 12px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 6px;
}
.bar > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--tomato);
  transition: width 0.25s linear;
}
.bar.paused > span {
  background: #8e9c78;
}
.bar.short {
  width: min(260px, 80%);
  margin: 0 auto;
}

/* ---------- キャラクター ---------- */
.bl {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c, #ccc);
  width: 58px;
  height: 58px;
}
.bl > i {
  position: absolute;
  width: 11%;
  height: 11%;
  border-radius: 50%;
  background: var(--ink);
  top: var(--ey, 38%);
}
.bl > i:nth-of-type(1) { left: var(--e1, 28%); }
.bl > i:nth-of-type(2) { left: var(--e2, 54%); }
.bl.zz > i {
  height: 4%;
  width: 15%;
  border-radius: 2px;
  margin-top: 4%;
}
.bl.gone { opacity: 0.42; }
.bl.me { box-shadow: 0 0 0 4px var(--cream); }
.bl.look-l { --e1: 14%; --e2: 36%; }
.bl.look-r { --e1: 50%; --e2: 74%; }
.bl.look-u { --ey: 18%; --e1: 30%; --e2: 56%; }
.bl.look-d { --ey: 58%; --e1: 30%; --e2: 56%; }
.bl.look-c { --ey: 38%; --e1: 30%; --e2: 58%; }
.bl.s-dot { width: 14px; height: 14px; }
.bl.s-xs { width: 22px; height: 22px; }
.bl.s-s { width: 30px; height: 30px; }
.bl.s-sm { width: 46px; height: 46px; }
.bl.s-m { width: 58px; height: 58px; }
.bl.s-l { width: 96px; height: 96px; }
.bl.s-xl { width: 140px; height: 140px; }
.bl .ear {
  position: absolute;
  top: -19%;
  width: 34%;
  height: 42%;
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bl .ear.l { left: 3%; transform: rotate(-16deg); }
.bl .ear.r { right: 3%; transform: rotate(16deg); }
.bl.fox .ear { top: -30%; width: 27%; height: 54%; }
.bl.wolf,
.bl.fox { margin-top: 10%; }
.bl .mouth {
  position: absolute;
  left: 36%;
  top: 60%;
  width: 28%;
  height: 12%;
  border-radius: 0 0 40px 40px;
  background: var(--ink);
}
.bl .okb {
  position: absolute;
  right: -3px;
  bottom: -1px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--bg);
}
.bl.s-xs .okb,
.bl.s-s .okb {
  width: 14px;
  height: 14px;
  right: -5px;
  bottom: -4px;
  box-shadow: none;
}
.peek {
  position: absolute;
  right: -40px;
  width: 104px;
  height: 104px;
  pointer-events: none;
  --e1: 14%;
  --e2: 33%;
  --ey: 34%;
}
.cast {
  position: relative;
  width: 280px;
  height: 150px;
}
.cast > .bl { position: absolute; }
.cast > .a1 { left: 10px; top: 52px; width: 84px; height: 84px; --e1: 52%; --e2: 76%; }
.cast > .a2 { left: 84px; top: 14px; width: 118px; height: 118px; --e1: 24%; --e2: 48%; --ey: 40%; }
.cast > .a3 { left: 186px; top: 58px; width: 78px; height: 78px; --e1: 14%; --e2: 40%; --ey: 44%; }
.cast > .a4 { left: 150px; top: 108px; width: 44px; height: 44px; --e1: 62%; --e2: 84%; --ey: 22%; }
.cheer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  min-height: 96px;
  flex-wrap: wrap;
}
.cheer > .bl:nth-child(odd) { transform: translateY(-14px) rotate(-8deg); }
.cheer > .bl:nth-child(3n) { transform: translateY(-4px) rotate(6deg); }
.cheer > .bl.loser { transform: none; }

/* 人の並び */
.g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 16px;
  column-gap: 6px;
}
.pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pc.dim { opacity: 0.35; }
.q {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.q > .bl { width: 24px; height: 24px; }
.q > .dn { opacity: 0.35; }
.q > .now { width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--ink); }
.dots {
  display: inline-flex;
  gap: 5px;
}
.dots > i {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--ink);
  animation: dot 1.2s infinite ease-in-out;
}
.dots > i:nth-child(2) { animation-delay: 0.15s; }
.dots > i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* ---------- 投票 ---------- */
.vc {
  position: relative;
  min-height: 116px;
  border-radius: 24px;
  background: rgba(245, 240, 225, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.vc.big { min-height: 180px; font-size: 19px; }
.vc.on,
.vc[aria-pressed="true"] {
  background: var(--cream);
  box-shadow: inset 0 0 0 4px var(--tomato-ink);
}
.vc .ck {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--tomato-ink);
  color: #fff7ea;
  display: none;
  align-items: center;
  justify-content: center;
}
.vc.on .ck,
.vc[aria-pressed="true"] .ck {
  display: flex;
}
.vc:disabled { opacity: 0.4; }
.vr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: 15px;
  font-weight: 700;
}
.vr .nm { width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: rgba(245, 240, 225, 0.65);
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qn.me { background: var(--ink); color: var(--cream); }
.sec {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.12em;
  margin: 18px 0 4px;
}
.sec-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.tc {
  min-height: 38px;
  padding: 0 14px 0 6px;
  border-radius: 19px;
  background: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
}

/* ---------- 結果 ---------- */
.rr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border-bottom: 2px dashed var(--dash);
  font-size: 15px;
  font-weight: 700;
}
.rr:last-child { border-bottom: 0; }
.rr > .w { max-width: 40%; text-align: right; font-weight: 900; overflow-wrap: anywhere; }
.rr > .nm { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.role {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 0;
  width: 36px;
  border-radius: 9px;
  text-align: center;
  flex-shrink: 0;
}
.role.lg { font-size: 20px; width: auto; padding: 4px 14px; border-radius: 12px; }
.rv { background: var(--cream2); color: var(--ink); }
.rw { background: var(--wolf); color: var(--cream); }
.rf { background: var(--fox); color: var(--ink); }
.ans {
  background: var(--cream);
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 24px;
  font-weight: 900;
}
.okw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  background: var(--ink);
  color: var(--cream);
  font-size: 17px;
  font-weight: 900;
}

/* ---------- 入力・設定 ---------- */
.lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.in {
  width: 100%;
  min-height: 58px;
  border-radius: 18px;
  background: var(--cream);
  padding: 0 18px;
  font-size: 20px;
  font-weight: 700;
}
.in:focus {
  box-shadow: inset 0 0 0 2.5px var(--ink);
}
.in[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2.5px var(--tomato-ink);
}
.in::placeholder {
  color: #9a9a86;
  font-weight: 500;
}
.cb {
  width: 100%;
  min-height: 76px;
  border-radius: 18px;
  background: var(--cream);
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
}
.cb:focus {
  box-shadow: inset 0 0 0 2.5px var(--ink);
}
textarea.memo {
  width: 100%;
  min-height: 220px;
  flex-grow: 1;
  border-radius: 18px;
  background: #eae3cf;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  resize: none;
}
.sr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 2px dashed var(--track);
  font-size: 15px;
  font-weight: 700;
  gap: 12px;
}
.sheet .sr,
.box .sr {
  border-bottom-color: var(--dash);
}
.sr.disabled { opacity: 0.45; }
.sr small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.seg {
  display: inline-flex;
  background: rgba(245, 240, 225, 0.65);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  flex-shrink: 0;
}
.sheet .seg,
.box .seg {
  background: var(--cream2);
}
.seg > button {
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.seg > button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
}
.seg > button.bad[aria-pressed="true"] {
  background: var(--tomato-ink);
  color: #fff7ea;
}
.stp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 900;
}
.stp > span {
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stp > button {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stp > button:disabled { opacity: 0.3; }
.tg {
  width: 52px;
  height: 30px;
  border-radius: 15px;
  background: rgba(245, 240, 225, 0.8);
  position: relative;
  flex-shrink: 0;
}
.sheet .tg,
.box .tg {
  background: var(--dash);
}
.tg::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #fff;
  transition: left 0.15s ease;
}
.tg[aria-checked="true"] {
  background: var(--ink);
}
.tg[aria-checked="true"]::after {
  left: 25px;
}
.nr {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 6px 0 10px;
  border-radius: 16px;
  background: var(--cream);
  font-size: 17px;
  font-weight: 700;
}
.nr > .nm { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.nr > .x {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.nr.add {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--ink);
}
.nr.add input {
  flex-grow: 1;
  min-width: 0;
  min-height: 44px;
  background: none;
  font-size: 17px;
  font-weight: 700;
}
.nr.add .plus {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 2px var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.mode {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 24px;
  text-align: left;
  width: 100%;
  background: var(--cream);
}
.mode.dark {
  background: var(--ink);
  color: var(--cream);
}
.mode b {
  display: block;
  font-size: 18px;
  font-weight: 900;
}
.mode small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 2px;
}
.mi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  border-bottom: 2px dashed var(--dash);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  width: 100%;
}
.mi:last-of-type { border-bottom: 0; }
.mi.danger { color: var(--danger); }
.mi:disabled { opacity: 0.45; }
.mi > svg { flex-shrink: 0; }
.mi .tag { margin-left: auto; }

/* ---------- 重なる画面（dialog） ---------- */
dialog {
  border: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font);
  max-width: none;
  max-height: none;
}
dialog::backdrop {
  background: rgba(27, 36, 24, 0.55);
}
dialog.box {
  width: min(380px, calc(100vw - 40px));
  background: var(--cream);
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.18);
}
dialog.sheet {
  width: 100%;
  max-width: 440px;
  margin: auto auto 0;
  background: var(--cream);
  border-radius: 30px 30px 0 0;
  padding: 12px 22px max(26px, calc(env(safe-area-inset-bottom) + 14px));
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
}
dialog.sheet.tall {
  min-height: 70vh;
  min-height: 70dvh;
}
dialog.sheet > .inner {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}
dialog[open] {
  animation: pop 0.18s ease-out;
}
dialog.sheet[open] {
  animation: rise 0.22s ease-out;
}
@keyframes pop {
  from { transform: scale(0.96); opacity: 0; }
}
@keyframes rise {
  from { transform: translateY(40px); opacity: 0; }
}
.grab {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #d6cfb9;
  margin: 0 auto 12px;
  flex-shrink: 0;
}
.cr2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 2px dashed var(--dash);
  font-size: 15px;
}
.cr2:last-child { border-bottom: 0; }
.cr2 > span:first-child { font-size: 13px; font-weight: 700; color: var(--muted); }
.cr2 > span:last-child { font-weight: 900; text-align: right; }

/* あそびかた */
#rules ol {
  padding-left: 1.3em;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}
#rules p {
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0;
}

/* ---------- 通知 ---------- */
#connection {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, calc(100vw - 32px));
  z-index: 20;
  background: var(--cream);
  border-radius: 23px;
  box-shadow: 5px 6px 0 rgba(35, 48, 31, 0.25);
  min-height: 46px;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
}
#connection:empty {
  display: none;
}
#connection button {
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 900;
}
.spin {
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.offline #app {
  opacity: 0.55;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  z-index: 30;
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
#toast:empty {
  display: none;
}
.boot {
  margin: auto;
  font-weight: 700;
  color: var(--muted);
}

/* ---------- 小さい画面 ---------- */
@media (max-height: 700px) {
  .tm { font-size: 92px; }
  .who { font-size: 46px; }
  .bl.s-xl { width: 112px; height: 112px; }
  .wordcard { padding: 32px 14px 36px; }
}
@media (max-width: 350px) {
  .scr { padding-left: 16px; padding-right: 16px; }
  .word { font-size: 48px; }
  .title { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 入力欄はそれ自体の枠でフォーカスを示す */
.in:focus-visible,
.cb:focus-visible,
textarea.memo:focus-visible,
.nr.add input:focus-visible {
  outline: none;
}
.nr.add:focus-within {
  box-shadow: inset 0 0 0 3.5px var(--ink);
}
textarea.memo:focus {
  box-shadow: inset 0 0 0 2.5px var(--ink);
}

/* 余白の調整（部品の margin より後に置いて必ず効かせる） */
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; }
.mb10 { margin-bottom: 10px; }

/* ---------- 実装からの追加 ---------- */
.box .ans { background: var(--cream2); }
.box .cr2 > span:last-child { color: var(--ink); }
.sr.wrap { padding: 8px 0 10px; }
.roomcode {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hold-wrap { position: relative; }
.hold-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(290px, 92%);
  transform: translate(-50%, -50%) rotate(-3deg);
  padding: 26px 16px 30px;
  text-align: center;
  box-shadow: 8px 9px 0 var(--sh);
  z-index: 2;
}
.hold-wrap.holding > .g3 { opacity: 0.3; }
.peek-wrap { position: relative; }
.peek.at-mid { top: calc(50% + 70px); }