:root {
  --ink: #fff8ea;
  --muted: #cbbd9f;
  --panel: rgba(24, 19, 12, 0.82);
  --panel2: rgba(44, 34, 20, 0.94);
  --line: rgba(255, 225, 170, 0.16);
  --accent: #f3b63a;
  --accent2: #e0673a;
  --water: #4fc3f7;
  --food: #ffa64d;
  --raft: #d4a56a;
  --danger: #e8513e;
  --ok: #6fd07a;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d2a38; color: var(--ink);
  font-family: 'Zen Maru Gothic', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; border-radius: 11px; padding: 9px 14px;
  background: #4a3a24; color: var(--ink); border: 1px solid var(--line); transition: transform .08s, filter .15s; }
button:hover:not(:disabled) { filter: brightness(1.18); }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .38; cursor: default; }
button.primary { background: linear-gradient(#f7c451, #d98f24); color: #2b1a05; font-weight: 800; border: 0; box-shadow: 0 3px 0 #8a5510; }
button.danger { background: linear-gradient(#ef6b4e, #b93622); font-weight: 800; border: 0; box-shadow: 0 3px 0 #6e1c10; }
button.ghost { background: transparent; }
button.icon { padding: 7px 11px; background: var(--panel); }
button .dot, .nm .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
input, select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0,0,0,.35); color: var(--ink); width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: #ff8b7a; min-height: 1.2em; }
b { font-weight: 800; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- title / lobby ---------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.1), rgba(0,0,0,.6)); }
.title-card, .end-card { width: min(420px, 100%); background: var(--panel); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
h1 { margin: 0; font-size: 44px; letter-spacing: .06em; color: var(--accent); text-shadow: 0 3px 0 #6b3b0b; line-height: 1.1; }
h1 small { display: block; font-size: 12px; letter-spacing: .4em; color: var(--muted); text-shadow: none; margin-top: 4px; }
.tag { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: .3em; }
.join-row button { white-space: nowrap; flex: none; }
.code-box { font-size: 14px; color: var(--muted); }
.code-box b { font-size: 36px; color: var(--accent); letter-spacing: .25em; display: block; }
#members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#members li { background: rgba(255,255,255,.06); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; }

/* ---------- HUD layout ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.tools { display: flex; gap: 6px; margin-left: auto; }

.daycard { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; min-width: 230px; }
.daycard .dnum { font-size: 38px; font-weight: 800; color: var(--accent); line-height: 1; text-align: center; }
.daycard .dnum small { display: block; font-size: 12px; color: var(--muted); }
.daycard .dinfo { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.daycard .wx { font-size: 16px; font-weight: 800; }
.daycard .lead { color: var(--muted); font-size: 12px; }
.daycard.storm { background: rgba(110, 22, 22, .88); animation: pulse 1.2s infinite; }
.daycard.night { background: rgba(14, 20, 48, .88); }
@keyframes pulse { 50% { filter: brightness(1.35); } }

.resources { display: flex; gap: 10px; flex: 1; justify-content: center; }
.res { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; width: 220px; }
.res .rtop { display: flex; align-items: baseline; gap: 6px; }
.res .ricon { font-size: 22px; }
.res .rname { font-size: 13px; color: var(--muted); }
.res .rval { font-size: 30px; font-weight: 800; line-height: 1; margin-left: auto; }
.res .rmax { font-size: 12px; color: var(--muted); }
.res.water .rval { color: var(--water); }
.res.food .rval { color: var(--food); }
.res.raft .rval { color: var(--raft); }
.meter { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); margin: 6px 0 3px; overflow: visible; }
.meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.meter.water .fill { background: linear-gradient(90deg, #2a8fc4, var(--water)); }
.meter.food .fill { background: linear-gradient(90deg, #c46a1f, var(--food)); }
.meter .tick { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; transform: translateX(-1px); }
.meter .tick.night { background: #ff6a5a; }
.meter .tick.esc { background: #7dff9a; }
.res .hint { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.res .hint b { color: var(--ink); }
.res .hint.bad { color: #ff9a8a; }
.res .hint.good { color: var(--ok); }
.res .track { display: flex; gap: 3px; align-items: center; margin: 6px 0 3px; }
.res .track i { width: 18px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.12); }
.res .track i.on { background: var(--raft); box-shadow: 0 0 6px rgba(212,165,106,.6); }
.res .track span { font-size: 11px; color: var(--muted); margin-left: 6px; }
.res.up { animation: flashUp .9s; }
.res.down { animation: flashDown .9s; }
@keyframes flashUp { 20% { box-shadow: 0 0 0 3px #7dff9a, 0 0 22px #7dff9a; transform: scale(1.04); } }
@keyframes flashDown { 20% { box-shadow: 0 0 0 3px #ff6a5a, 0 0 22px #ff6a5a; transform: scale(1.04); } }
.res .delta { position: absolute; right: 12px; top: 34px; font-size: 26px; font-weight: 800; pointer-events: none; animation: rise 1.8s forwards; text-shadow: 0 2px 6px #000; }
.res .delta.up { color: #7dff9a; }
.res .delta.down { color: #ff7a6a; }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }

/* players */
#players { position: absolute; top: 118px; left: 10px; width: 250px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 360px); overflow: auto; }
.phead { font-size: 11px; color: var(--muted); padding-left: 4px; letter-spacing: .1em; }
.pl { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 12px; padding: 7px 10px; font-size: 13px; }
.pl.active { outline: 2px solid var(--accent); box-shadow: 0 0 16px rgba(243,182,58,.55); background: rgba(60,44,18,.9); }
.pl.mine .nm { color: #fff; }
.pl.dead { opacity: .5; filter: grayscale(.8); }
.pl .nm { font-weight: 800; font-size: 15px; display: flex; gap: 5px; align-items: center; }
.pl .nm .dot { background: var(--c); }
.pl .nm small { font-size: 10px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.pl .nm .sp { flex: 1; }
.pl .meta { color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; }
.pl .meta .doing { color: #ffe0a0; }
.pl .meta .tally { color: #d8b0ff; }
.pl .eq { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.pl .eq img { width: 26px; height: 38px; object-fit: cover; border-radius: 4px; border: 1px solid var(--accent); }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.12); font-weight: 500; white-space: nowrap; }
.badge.para { background: #3f6b22; }
.badge.dead { background: #6b2222; }
.badge.lead { background: #8a6512; }
.badge.voted { background: #2c4f7a; }

/* log */
#logPanel { position: absolute; top: 118px; right: 10px; width: 310px; max-height: calc(100% - 380px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
#logPanel.collapsed { display: none; }
.lhead { font-size: 12px; color: var(--muted); padding: 6px 12px; border-bottom: 1px solid var(--line); }
#log { overflow-y: auto; padding: 6px 12px 10px; font-size: 12.5px; line-height: 1.55; flex: 1; }
#log div { padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
#log div.priv { color: #ffd98a; }
#log div.day { color: var(--accent); font-weight: 800; margin-top: 8px; border-bottom: 1px solid var(--line); }
#log div.bad { color: #ff9a8a; }
#log div.good { color: #8dffa8; }
#log div.night { color: #a8b8ff; }

/* feed (resource notifications) */
#feed { position: absolute; top: 118px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 600px)); min-width: 300px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.feed-item { display: flex; align-items: center; gap: 10px; background: rgba(20,16,10,.9); border: 1px solid var(--line); border-left: 5px solid #888; border-radius: 12px; padding: 7px 12px; animation: feedIn .35s cubic-bezier(.2,.8,.2,1); transition: opacity .5s, transform .5s; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.feed-item.up { border-left-color: #6fd07a; }
.feed-item.down { border-left-color: #e8513e; }
.feed-item.neutral { border-left-color: var(--accent); }
.feed-item.out { opacity: 0; transform: translateY(-8px); }
.feed-item img { width: 34px; height: 50px; object-fit: cover; border-radius: 5px; }
.feed-item .ficon { font-size: 28px; width: 34px; text-align: center; }
.feed-item .ftext { flex: 1; min-width: 0; }
.feed-item .ftitle { font-size: 14px; font-weight: 800; }
.feed-item .fdetail { font-size: 12px; color: var(--muted); }
.feed-item .fval { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.feed-item .fval .fres { font-size: 11px; color: var(--muted); }
.feed-item .fval b { font-size: 24px; }
.feed-item.up .fval b { color: #7dff9a; }
.feed-item.down .fval b { color: #ff7a6a; }
.feed-item .fft { font-size: 11px; color: var(--muted); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* night consumption panel */
#nightPanel { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(10, 16, 40, .93); border: 1px solid rgba(160,180,255,.3); border-radius: 18px; padding: 16px 22px; min-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: feedIn .4s; pointer-events: none; }
#nightPanel h3 { margin: 0 0 8px; color: #b8c6ff; font-size: 18px; }
.nrow { display: grid; grid-template-columns: 90px 40px auto 40px 1fr; gap: 8px; align-items: center; padding: 6px 0; animation: feedIn .5s; font-size: 16px; }
.nrow .nres { font-weight: 800; }
.nrow .nfrom, .nrow .nto { font-size: 26px; font-weight: 800; text-align: center; }
.nrow .narrow { color: #ff9a8a; font-size: 13px; }
.nrow .nok { color: var(--ok); font-size: 13px; }
.nrow .nshort { color: #fff; background: var(--danger); border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 800; }
.nrow.short .nto { color: #ff7a6a; }

/* bottom: prompt + hand */
#bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#prompt { background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 9px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 960px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#prompt:empty { display: none; }
#prompt.hot { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(243,182,58,.35), 0 8px 24px rgba(0,0,0,.4); }
#prompt.vote { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(232,81,62,.35), 0 8px 24px rgba(0,0,0,.4); }
#prompt .ttl { width: 100%; text-align: center; font-weight: 800; font-size: 16px; }
#prompt .sub { width: 100%; text-align: center; font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.act { display: flex; flex-direction: column; align-items: center; min-width: 112px; padding: 7px 12px; }
.act small { font-size: 11px; opacity: .85; font-weight: 500; }
button.big { font-size: 18px; padding: 12px 26px; }
#hand { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 6px 4px 2px; }
.card { width: 86px; height: 134px; border-radius: 9px; background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(0,0,0,.55);
  cursor: pointer; flex: none; position: relative; transition: transform .15s; border: 2px solid rgba(255,255,255,.1); }
.card:hover { transform: translateY(-12px) scale(1.07); z-index: 2; }
.card .cname { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); font-size: 10.5px; text-align: center; padding: 2px 2px; border-radius: 0 0 7px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.eq { border-color: var(--accent); }
.card.eq::before { content: '装備中'; white-space: nowrap; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #2b1a05; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 6px; }
.card.pending { opacity: .5; cursor: pointer; }
.card.pending::after { content: '×'; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; line-height: 19px; text-align: center;
  border-radius: 50%; background: rgba(40, 26, 12, .9); border: 1px solid rgba(255, 220, 160, .5); color: #ffe2b0; font-weight: 900; font-size: 14px; }
.card.pending:hover { opacity: .8; }
.card.new { animation: pop .6s; }
@keyframes pop { from { transform: translateY(-40px) scale(1.3); opacity: 0; } }

/* banner / modal / toast */
#banner { position: absolute; left: 0; right: 0; top: 32%; text-align: center; pointer-events: none; animation: banner .5s; }
#banner h2 { margin: 0; font-size: clamp(34px, 7vw, 76px); color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.8), 0 2px 0 #5b3408; letter-spacing: .08em; }
#banner p { margin: 6px 0 0; font-size: clamp(14px, 2.4vw, 22px); color: #ffe7b5; text-shadow: 0 2px 8px #000; }
#banner.storm h2 { color: #ff9a8a; }
#banner.execute h2 { color: #ff5a4a; }
#banner.night h2 { color: #b8c6ff; }
@keyframes banner { from { opacity: 0; transform: scale(1.15); } }
#modal { position: fixed; z-index: 30; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
#modal .box { background: var(--panel2); border: 1px solid var(--line); border-radius: 18px; padding: 20px; width: min(540px, 100%); max-height: 90%; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
#modal h3 { margin: 0; color: var(--accent); }
.cardview { display: flex; gap: 16px; align-items: flex-start; }
.cardview img { width: 180px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.cardview .info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.reveal { display: flex; gap: 10px; flex-wrap: wrap; }
.reveal figure { margin: 0; text-align: center; font-size: 12px; }
.reveal img { width: 120px; border-radius: 8px; display: block; }
#toast { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); background: rgba(160,40,30,.94); padding: 9px 18px; border-radius: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; font-size: 14px; font-weight: 800; z-index: 5; }
#toast.good { background: rgba(40,120,60,.94); }
#toast.show { opacity: 1; }

.end-card { text-align: center; width: min(560px, 100%); }
.end-card img { width: 100%; border-radius: 12px; }
.end-card h2 { margin: 4px 0 0; font-size: 36px; color: var(--accent); }
.rules { font-size: 13px; line-height: 1.7; }
.rules h4 { margin: 10px 0 2px; color: var(--accent); }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .res { width: 180px; }
  .daycard { min-width: 0; }
  #feed { width: min(420px, calc(100% - 20px)); top: auto; bottom: 330px; }
}
@media (max-width: 820px) {
  #topbar { flex-wrap: wrap; }
  .daycard { padding: 6px 10px; }
  .daycard .dnum { font-size: 26px; }
  .resources { order: 3; width: 100%; gap: 6px; }
  .res { flex: 1; width: auto; padding: 6px 8px; }
  .res .rval { font-size: 22px; }
  .res .hint { display: none; }
  #players { top: auto; bottom: 250px; left: 10px; right: 10px; width: auto; max-height: 90px; flex-direction: row; overflow-x: auto; }
  .phead { display: none; }
  .pl { min-width: 150px; }
  #logPanel { display: none; }
  .card { width: 64px; height: 100px; }
  .act { min-width: 90px; }
  #nightPanel { min-width: 0; width: calc(100% - 20px); }
  .nrow { grid-template-columns: 70px 30px auto 30px 1fr; font-size: 14px; }
}
.btnrow.center { justify-content: center; }
.menu-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.menu-sec h4 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.vol { display: grid; grid-template-columns: 70px 1fr 42px; align-items: center; gap: 10px; font-size: 14px; }
.vol input[type=range] { padding: 0; accent-color: var(--accent); }
.vol output { text-align: right; color: var(--muted); font-size: 12px; }

/* ---------- dramatic overlays (gun / snake) ---------- */
#drama { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
#drama .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%); animation: fadeIn .4s; }
#drama::before, #drama::after { content: ''; position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 1; transition: transform .4s; }
#drama::before { top: 0; animation: barTop .45s ease-out; }
#drama::after { bottom: 0; animation: barBot .45s ease-out; }
@keyframes barTop { from { transform: translateY(-100%); } }
@keyframes barBot { from { transform: translateY(100%); } }
#drama .dimg { position: absolute; left: 50%; top: 42%; width: min(46vw, 520px); transform: translate(-50%, -50%); filter: drop-shadow(0 10px 30px rgba(0,0,0,.8)); }
#drama .dtext { position: absolute; left: 0; right: 0; bottom: 16vh; text-align: center; z-index: 2; }
#drama h2 { margin: 0; font-size: clamp(26px, 4.6vw, 52px); color: #fff; letter-spacing: .06em; text-shadow: 0 3px 16px #000; }
#drama p { margin: 6px 0 0; font-size: clamp(14px, 2vw, 20px); color: #ffd9c8; text-shadow: 0 2px 8px #000; }
#drama .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#drama.aim .vig { background: radial-gradient(ellipse at center, rgba(60,0,0,.15) 25%, rgba(20,0,0,.9) 100%); }
#drama.aim .dimg { animation: gunIn .9s cubic-bezier(.2,.8,.2,1); }
@keyframes gunIn { from { transform: translate(-120%, -50%) rotate(-12deg); opacity: 0; } }
#drama.shot .flash { animation: muzzle .5s; }
#drama.shot .dimg { animation: recoil .35s; }
#drama.kill .vig { background: radial-gradient(ellipse at center, rgba(120,0,0,.25) 20%, rgba(40,0,0,.92) 100%); }
#drama.kill .blood { position: absolute; left: 50%; top: 40%; width: min(34vw, 380px); transform: translate(-50%, -50%) scale(1); animation: splat .35s ease-out; opacity: .7; mix-blend-mode: multiply; }
#drama.kill h2 { color: #ff4a3a; }
#drama.block h2 { color: #ffe080; }
#drama.snake .vig { background: radial-gradient(ellipse at center, rgba(30,60,0,.1) 25%, rgba(10,30,0,.88) 100%); }
#drama.snake .dimg { width: min(34vw, 380px); animation: snakeIn .5s cubic-bezier(.3,1.6,.5,1); }
#drama.snake h2 { color: #b8ff7a; }
@keyframes snakeIn { from { transform: translate(-50%, -20%) scale(.2); opacity: 0; } }
@keyframes muzzle { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes recoil { 30% { transform: translate(-54%, -56%) rotate(-10deg); } }
@keyframes splat { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translate(-10px, 6px); } 40% { transform: translate(9px, -7px); } 60% { transform: translate(-6px, -4px); } 80% { transform: translate(4px, 5px); } }
#prompt .cd { width: 100%; text-align: center; font-size: 13px; color: #ffd98a; font-weight: 800; }
#prompt .cd:empty { display: none; }
#prompt .cd.low { color: #ff7a6a; animation: pulse .6s infinite; }
#prompt.hot2 { border-color: #ff5a4a; box-shadow: 0 0 0 3px rgba(255,90,74,.55), 0 0 30px rgba(255,90,74,.45); animation: pulse 1.2s infinite; }
/* lobby: card count editor */
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.deckrow { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border-radius: 8px; padding: 4px 6px; font-size: 12px; }
.deckrow.changed { outline: 1px solid var(--accent); }
.deckrow img { width: 28px; height: 42px; object-fit: cover; border-radius: 4px; }
.deckrow .nm { flex: 1; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal .box:has(.deckgrid) { width: min(860px, 100%); }
.deckrow button { padding: 2px 8px; }
.deckrow b { width: 20px; text-align: center; font-size: 15px; }
/* hidden: Dragon Install */
#drama.dragon .vig { background: radial-gradient(ellipse at center, rgba(255,60,0,.25) 10%, rgba(60,0,0,.92) 100%); animation: dragonPulse .25s 4 alternate; }
#drama.dragon .dtext { bottom: auto; top: 36%; }
#drama.dragon h2 { font-size: clamp(44px, 9vw, 120px); font-style: italic; font-weight: 800; letter-spacing: .02em; color: #fff3d0;
  text-shadow: 0 0 12px #ff5a00, 0 0 34px #ff2a00, 4px 4px 0 #8a0000; transform: skewX(-12deg); animation: dragonText .5s cubic-bezier(.2,1.6,.4,1); }
#drama.dragon p { font-size: clamp(16px, 2.4vw, 26px); color: #ffb080; letter-spacing: .3em; }
#drama.dragon::before, #drama.dragon::after { background: repeating-linear-gradient(-60deg, #000 0 26px, #3a0000 26px 34px); }
#drama.dkill .vig { background: radial-gradient(ellipse at center, rgba(255,80,0,.35) 10%, rgba(40,0,0,.9) 100%); }
#drama.dkill .dtext { bottom: auto; top: 44%; }
#drama.dkill h2 { color: #ff6a3a; font-style: italic; text-shadow: 0 0 20px #ff2a00, 0 3px 10px #000; }
#drama.dkill .flash { background: linear-gradient(115deg, transparent 44%, rgba(255,120,40,.95) 49%, #fff 50%, rgba(255,120,40,.95) 51%, transparent 56%); animation: slash .45s ease-out forwards; }
@keyframes slash { from { opacity: 1; transform: translateX(-60%); } to { opacity: 0; transform: translateX(40%); } }
@keyframes dragonText { from { transform: skewX(-12deg) scale(2.6); opacity: 0; } }
@keyframes dragonPulse { to { filter: brightness(1.6); } }

/* =====================================================================
   THEME — a castaway's handmade kit: driftwood boards, parchment, rope
   (visual layer only; layout rules above stay as they are)
   ===================================================================== */
:root {
  --wood: linear-gradient(180deg, rgba(96, 64, 34, .95), rgba(62, 40, 20, .95));
  --grain: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 7px),
           repeating-linear-gradient(90deg, rgba(255,220,160,.035) 0 2px, transparent 2px 23px);
  --wood-edge: #2c1b0b;
  --wood-hi: rgba(255, 214, 150, .22);
  --paper: radial-gradient(ellipse at 50% 40%, #f6ead0 45%, #e6d2a4 80%, #cdb07a 100%);
  --pink: #3a2812;
  --pink-soft: #6e5532;
  --pink-accent: #9a3f10;
  --panel: rgba(62, 40, 20, .9);
  --line: rgba(255, 214, 150, .2);
}
body { letter-spacing: .01em; }
h1, h2, #banner h2, .daycard .dnum, #drama h2, .end-card h2, .code-box b { font-family: 'Dela Gothic One', 'Zen Maru Gothic', sans-serif; font-weight: 400; }

/* driftwood panels */
.daycard, .res, .pl, #logPanel, .feed-item, button.icon, .title-card, .end-card {
  background: var(--grain), var(--wood);
  border: 2px solid var(--wood-edge);
  box-shadow: inset 0 1px 0 var(--wood-hi), inset 0 -2px 0 rgba(0,0,0,.25), 0 5px 14px rgba(0,0,0,.45);
}
.daycard { border-radius: 12px 16px 12px 18px; }
.res { border-radius: 14px 12px 16px 12px; }
.pl { border-left-width: 7px; border-left-color: var(--c); border-radius: 10px 14px 12px 10px; }
.pl.active { background: var(--grain), linear-gradient(180deg, rgba(128, 84, 36, .96), rgba(86, 54, 22, .96)); box-shadow: 0 0 0 2px #f3b63a, 0 0 18px rgba(243,182,58,.55); outline: none; }
#logPanel { border-radius: 12px; }
.lhead { font-weight: 700; color: #e9cf9c; letter-spacing: .08em; }
.feed-item { border-radius: 10px 14px 12px 10px; }

/* the day sign: carved board */
.daycard .dnum { color: #ffcf6a; text-shadow: 0 2px 0 #4a2708, 0 0 12px rgba(255,180,60,.25); }
.daycard.storm { background: var(--grain), linear-gradient(180deg, rgba(120, 28, 20, .95), rgba(70, 14, 10, .95)); }
.daycard.night { background: var(--grain), linear-gradient(180deg, rgba(34, 40, 78, .95), rgba(16, 20, 44, .95)); }

/* rope meters */
.meter { height: 11px; border-radius: 6px; background: repeating-linear-gradient(-45deg, #5a3c20 0 4px, #6d4a28 4px 8px); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.meter .fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.res .track i { background: rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.4); border-radius: 3px 5px 3px 5px; }
.res .track i.on { background: linear-gradient(180deg, #d9a766, #9c6a34); box-shadow: 0 0 6px rgba(217,167,102,.5); }

/* painted-wood buttons */
button { border: 2px solid var(--wood-edge); background: var(--grain), linear-gradient(180deg, #6e4a28, #4b3019); color: #f7e7c6; font-weight: 700;
  box-shadow: inset 0 1px 0 var(--wood-hi), 0 3px 0 rgba(0,0,0,.45); }
button.primary { background: var(--grain), linear-gradient(180deg, #f6c15a, #d0861f); color: #2b1603; border-color: #6b3d0c; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #5e3408; }
button.danger { background: var(--grain), linear-gradient(180deg, #d9573c, #9c2e1a); color: #fff3e6; border-color: #4e140a; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #4e140a; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: inherit; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--wood-hi), 0 1px 0 rgba(0,0,0,.45); }
input, select { background: rgba(255, 244, 220, .92); color: var(--pink); border: 2px solid #7a5530; }

/* parchment: the action prompt and pop-ups */
#prompt, #modal .box {
  background: var(--paper);
  color: var(--pink);
  border: 2px solid #8a6a3c;
  border-radius: 6px 14px 8px 16px;
  box-shadow: inset 0 0 30px rgba(120, 80, 30, .35), 0 10px 26px rgba(0,0,0,.5);
}
#prompt .ttl { color: var(--pink); }
#prompt .sub, #modal .muted { color: var(--pink-soft); }
#prompt b, #modal b { color: var(--pink-accent); }
#prompt .ttl b[style], #prompt .sub b[style] { text-shadow: 0 0 1px #000, 0 1px 0 rgba(0,0,0,.5); }
#prompt .cd { color: var(--pink-accent); }
#prompt.hot { border-color: #c98a2a; box-shadow: inset 0 0 30px rgba(120, 80, 30, .35), 0 0 0 3px rgba(243,182,58,.5), 0 10px 26px rgba(0,0,0,.5); }
#prompt.vote { border-color: #9c2e1a; box-shadow: inset 0 0 30px rgba(120, 40, 20, .35), 0 0 0 3px rgba(200,60,40,.45), 0 10px 26px rgba(0,0,0,.5); }
#modal h3 { color: var(--pink-accent); font-family: 'Dela Gothic One', sans-serif; font-weight: 400; letter-spacing: .04em; }
#modal .rules h4 { color: var(--pink-accent); }
#modal .deckrow { background: rgba(120, 80, 30, .12); }
#modal .menu-sec { border-top-color: rgba(120, 80, 30, .3); }
#modal .menu-sec h4, #modal .vol output { color: var(--pink-soft); }
#modal .reveal figcaption { color: var(--pink); }

/* title / lobby / end: a wooden sign */
.title-card, .end-card { border-radius: 14px 20px 16px 22px; }
h1 { color: #ffcf6a; text-shadow: 0 3px 0 #4a2708, 0 6px 14px rgba(0,0,0,.5); letter-spacing: .04em; }
.code-box b { color: #ffcf6a; }
#members li { background: rgba(0,0,0,.22); border: 1px solid rgba(0,0,0,.3); }

/* scene banners: bold, painted */
#banner h2 { color: #fff5dc; text-shadow: 0 3px 0 #4a2708, 0 0 24px rgba(0,0,0,.8); letter-spacing: .06em; }
#banner p { color: #ffe3a8; font-weight: 700; }

/* hand cards look like cards lying on sand */
.card { border: 2px solid rgba(60, 40, 20, .8); box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.card .cname { background: rgba(40, 26, 12, .82); font-weight: 700; }
#toast { border: 2px solid rgba(0,0,0,.35); }
/* equip announcement: a small board in the middle, no fuss */
#announce { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.9); display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 10px 14px 12px 10px; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s;
  background: var(--grain), var(--wood); border: 2px solid var(--wood-edge); box-shadow: inset 0 1px 0 var(--wood-hi), 0 8px 22px rgba(0,0,0,.5);
  font-size: 18px; font-weight: 900; color: #fff3d6; }
#announce.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#announce img { width: 48px; height: 74px; object-fit: cover; border-radius: 6px; border: 2px solid rgba(0,0,0,.4); }
#announce b[style] { text-shadow: 0 1px 0 #000; }
/* hidden: the god's wrath */
#hud.godmode #players, #hud.godmode #logPanel, #hud.godmode #bottom, #hud.godmode #feed, #hud.godmode #topbar { opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#drama.god .vig { background: radial-gradient(ellipse at center, rgba(255,200,80,.12) 20%, rgba(60,30,0,.75) 100%); }
#drama.god .dtext { bottom: auto; top: 58%; }
#drama.god h2 { font-size: clamp(32px, 6.4vw, 92px); color: #ffe39a; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 0 3px #3a1e00, 0 0 3px #3a1e00, 0 0 18px #ffb300, 0 0 48px #ff8a00, 0 4px 0 #6a3a00; animation: godText .7s ease-out; }
#drama.god::before, #drama.god::after { background: #000; }
@keyframes godText { from { opacity: 0; letter-spacing: .3em; filter: blur(8px); } }
#whiteout { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
#whiteout.on { animation: whiteout 3.6s forwards; }
@keyframes whiteout { 0% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* =====================================================================
   UI pass 2 — notices, connection, turn order, warnings, accessibility
   ===================================================================== */
/* toast lives on <body> so it also shows in the title / lobby screens */
#toast { position: fixed; z-index: 40; left: 50%; top: 130px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); }
#toast span { overflow-wrap: anywhere; }
#toast.act { pointer-events: auto; }
#toast button { padding: 4px 12px; font-size: 13px; }
#netBadge { position: fixed; z-index: 41; top: 8px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 10px; font-weight: 800; font-size: 14px;
  background: rgba(120, 30, 20, .94); border: 2px solid rgba(0,0,0,.4); box-shadow: 0 4px 14px rgba(0,0,0,.5); animation: pulse 1.2s infinite; pointer-events: none; }
#replaced { z-index: 45; background: rgba(0,0,0,.72); }
#replaced h2 { margin: 0; font-size: 20px; color: #ffcf6a; }
body.offline #prompt button, body.offline #hand .card, body.offline #btnStart { pointer-events: none; opacity: .5; filter: grayscale(.6); }

/* names as pills: readable on wood and on parchment */
b.chip { display: inline-block; background: var(--c); color: #1c1206; padding: 0 7px; border-radius: 999px; font-weight: 800; line-height: 1.45; text-shadow: none !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
#prompt b.chip, #modal b.chip { color: #1c1206; }

/* lobby */
.invite { display: flex; gap: 6px; align-items: center; }
.invite #btnCopy { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.22); border: 1px dashed rgba(255,214,150,.35); }
.invite select { width: auto; max-width: 46%; padding: 6px 8px; font-size: 12px; }
#members li.me { outline: 2px solid rgba(243,182,58,.6); }
#members li.ghost { opacity: .45; border-style: dashed; }
#hostSettings { display: flex; flex-direction: column; gap: 8px; }
input.copyurl { font-size: 15px; user-select: all; }

/* day sign: day / max, escape checklist */
.daycard .dnum small { display: inline; font-size: 14px; color: var(--muted); }
.daycard .dnum.late { color: #ff6a5a; text-shadow: 0 2px 0 #4a0808, 0 0 12px rgba(255,80,60,.45); }
.daycard .dnum.late small { color: #ff9a8a; }
.daycard .escs { display: flex; gap: 6px; margin-top: 2px; font-size: 13px; }
.daycard .escs span { padding: 0 5px; border-radius: 6px; background: rgba(0,0,0,.28); white-space: nowrap; }
.daycard .escs i { font-style: normal; font-weight: 900; margin-left: 2px; }
.daycard .escs .ok i { color: #7dff9a; }
.daycard .escs .ng { opacity: .7; }
.daycard .escs .ng i { color: #ff8a7a; }

/* resources: shortage tonight, shape-coded meter marks (▼ tonight / ▲ escape) */
.res.short { animation: shortPulse 1.1s infinite; }
.res.short .rval { color: #ff5a4a !important; }
@keyframes shortPulse { 50% { box-shadow: 0 0 0 3px #ff5a4a, 0 0 22px rgba(255,90,74,.7); } }
.meter .tick::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; line-height: 1; }
.res .hint { display: flex; gap: 10px; }
.res .hint .hn { color: #ffb0a0; }
.res .hint.bad .hn { color: #ff6a5a; font-weight: 800; }
.res .hint .he { color: #a8f0b8; margin-left: auto; }
.res .track span { white-space: nowrap; }

/* players: seat order, turn number, own row always in view */
.pl .ord { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #1c1206; font-size: 11px; font-weight: 900; margin-right: 2px; }
.pl .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl.mine { position: sticky; top: 0; bottom: 0; z-index: 2; box-shadow: 0 0 0 2px rgba(120,180,255,.75), 0 5px 14px rgba(0,0,0,.45); }
.pl.mine.active { box-shadow: 0 0 0 2px #f3b63a, 0 0 18px rgba(243,182,58,.55); }
.pl .meta .cd { color: #ffd98a; font-weight: 800; }
.pl .meta .cd.low { color: #ff7a6a; animation: pulse .6s infinite; }
.pl .eq img { cursor: zoom-in; transition: transform .15s; transform-origin: left center; position: relative; }
.pl .eq img:hover, .pl .eq img:focus-visible { transform: scale(2.6); z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
#players { padding: 3px; }
#players.compact { gap: 4px; }
#players.compact .pl { padding: 4px 8px; font-size: 12px; }
#players.compact .pl .nm { font-size: 13px; }
#players.compact .pl .meta { margin-top: 1px; font-size: 11px; }
#players.compact .pl .eq { margin-top: 2px; }
#players.compact .pl .eq img { width: 18px; height: 27px; }

/* prompt */
#prompt.bounce { animation: promptBounce .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes promptBounce { 0% { transform: translateY(14px) scale(.94); } 60% { transform: translateY(-6px) scale(1.04); } }
#prompt.spectate { opacity: .85; }
button.muted { opacity: .62; filter: grayscale(.5); }
button.locking { position: relative; overflow: hidden; }
button.locking::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255,240,200,.45); transform-origin: left; transform: scaleX(0);
  animation: lockFill var(--lockDur, 1s) linear var(--lockDelay, 0s) forwards; pointer-events: none; }
@keyframes lockFill { to { transform: scaleX(1); } }
#prompt.escape { border-color: #2f8a52; box-shadow: inset 0 0 30px rgba(120,80,30,.35), 0 0 0 3px rgba(80,200,120,.55), 0 0 30px rgba(80,200,120,.35), 0 10px 26px rgba(0,0,0,.5); }
button.escbtn { font-size: 24px; padding: 12px 40px; min-width: 200px; background: var(--grain), linear-gradient(180deg, #6fd07a, #2f8a52); color: #08260f; border-color: #1b4d2c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 #1b4d2c, 0 0 22px rgba(111,208,122,.55); animation: escGlow 1.4s infinite; }
@keyframes escGlow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 #1b4d2c, 0 0 34px rgba(111,208,122,.9); } }

/* the hand: room for the hover lift and the 装備中 tag */
#hand { padding: 22px 6px 4px; margin-top: -14px; }

/* tonight is short: red edges */
#vignette { position: absolute; inset: 0; pointer-events: none !important; opacity: 0; transition: opacity 1s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200,30,20,.38) 100%); }
#hud.shortnight #vignette { opacity: 1; animation: vigPulse 2.4s infinite; }
@keyframes vigPulse { 50% { opacity: .55; } }

/* found card flies in, fades by itself; click to look closer */
#flyin { position: absolute; right: 24px; bottom: 210px; pointer-events: none !important; }
#flyin .fly { pointer-events: auto; cursor: zoom-in; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: flyIn .55s cubic-bezier(.2,1.4,.4,1); transition: opacity .5s, transform .5s; }
#flyin .fly img { width: 110px; border-radius: 9px; border: 2px solid rgba(60,40,20,.8); box-shadow: 0 0 0 3px rgba(243,182,58,.6), 0 10px 24px rgba(0,0,0,.6); }
#flyin .fly span { background: var(--grain), var(--wood); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 2px 10px; font-weight: 800; font-size: 13px; }
#flyin .fly.out { opacity: 0; transform: translateY(30px) scale(.8); }
@keyframes flyIn { from { opacity: 0; transform: translate(-40vw, 20vh) rotate(-20deg) scale(.4); } }

/* own death */
#world { transition: filter 1.2s; }
body.mydeath #world { filter: grayscale(1) brightness(.75); transition: filter .4s; }
#drama.mydeath .vig { background: radial-gradient(ellipse at center, rgba(0,0,0,.2) 25%, rgba(0,0,0,.9) 100%); }
#drama.mydeath .dtext { bottom: auto; top: 38%; }
#drama.mydeath h2 { font-size: clamp(44px, 8vw, 96px); color: #e8e0d0; }
#drama.mydeath p { font-size: clamp(16px, 2.4vw, 26px); color: #cbbd9f; letter-spacing: .2em; }

/* vote tally chips (in the feed) */
.tchips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tchip { background: var(--c); color: #1c1206; border-radius: 999px; padding: 0 7px; font-size: 11.5px; font-weight: 700; opacity: .8; }
.tchip b { font-size: 12.5px; }
.tchip.top { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

/* end: short recap */
#endRecap { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 13.5px; max-height: 120px; overflow: auto; }
#endRecap li { display: flex; gap: 5px; align-items: center; }
#endRecap .rd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; border-radius: 6px; background: rgba(0,0,0,.35); font-size: 11px; color: var(--muted); }
#endRecap li.win { color: #8dffa8; font-weight: 800; }
#endSub:empty { display: none; }
#modal .btnrow.seg button { min-width: 64px; }

/* keyboard focus */
:focus-visible { outline: 3px solid #ffd36a; outline-offset: 2px; }
.card:focus-visible { transform: translateY(-12px) scale(1.07); z-index: 2; }

/* narrow screens: feed beside the player list, log folds away */
@media (max-width: 1100px) {
  #feed { top: 118px; bottom: auto; left: 272px; right: auto; transform: none; width: auto; max-width: min(420px, calc(100% - 610px)); min-width: 260px; }
  #flyin { bottom: 230px; }
}
@media (max-width: 900px) {
  #logPanel:not(.collapsed) { display: flex; position: absolute; z-index: 6; top: 118px; right: 10px; width: min(320px, calc(100% - 20px)); max-height: 50%; }
  #feed { left: 272px; right: 10px; max-width: none; }
}
@media (max-width: 820px) {
  #feed { left: 10px; right: 10px; }
  .pl.mine { position: static; }
}
/* large screens: scale the HUD up */
@media (min-width: 1600px) { #hud, #modal .box, .title-card, .end-card, #toast, #netBadge { zoom: 1.2; } }
@media (min-width: 2200px) { #hud, #modal .box, .title-card, .end-card, #toast, #netBadge { zoom: 1.45; } }

@media (prefers-reduced-motion: reduce) {
  .shake { animation: none !important; }
  #whiteout.on { animation-duration: 6s; }
  #drama .flash, #drama.shot .flash { animation: none !important; opacity: 0 !important; }
  .res.short, #hud.shortnight #vignette, .daycard.storm, #netBadge, button.escbtn, #prompt.hot2 { animation: none !important; }
  #prompt.bounce, #flyin .fly, .card.new, #banner, #drama.dragon .vig { animation: none !important; }
}
.screen { overflow-y: auto; place-items: safe center; }
#members li { padding: 7px 12px; }
.pl .nm small { white-space: nowrap; }

/* themed scrollbar for the hand row */
#hand { scrollbar-width: thin; scrollbar-color: #8a6a44 transparent; }
#hand::-webkit-scrollbar { height: 8px; }
#hand::-webkit-scrollbar-thumb { background: #8a6a44; border-radius: 4px; }
#hand::-webkit-scrollbar-track { background: transparent; }

/* meter legend: a tiny bar matching each tick (no glyphs over the icons) */
.res .hint .sw { display: inline-block; width: 3px; height: 11px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.res .hint .hn .sw { background: #ff6a5a; }
.res .hint .he .sw { background: #7dff9a; }
/* end recap: one line per player */
#endRecap { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 4px; max-height: 160px; }
#endRecap li { display: grid; grid-template-columns: 56px auto auto; gap: 8px; align-items: center; }
#endRecap .rd { min-width: 56px; }

.tchips .tlab { font-size: 11px; opacity: .8; margin-right: 2px; align-self: center; }

/* secondary buttons (退出 / 閉じる / 島を眺める …): a darker inset plank with a light outline so they stand out on wood and parchment */
button.ghost { background: rgba(28, 16, 6, .55); border: 2px solid rgba(247, 224, 176, .55); color: #f7e7c6; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35); }
button.ghost:hover:not(:disabled) { background: rgba(60, 36, 14, .8); border-color: #f3c46a; color: #fff3d6; }

/* Discord Activity: no room code / invite link (everyone in the voice channel joins automatically) */
body.discord .code-box, body.discord .invite { display: none; }


/* public Discord-only server opened in a plain browser: nothing to do here */
body.donly #title > * { display: none !important; }
body.donly #title::after { content: 'Discordのボイスチャンネルから起動してください'; color: #f7e7c6; font-size: 20px; font-weight: 700; text-shadow: 0 2px 6px #000; }