/* ─────────────────────────────────────────────────────────────────────────────
   생존의 법칙 — STYLESHEET
   Nature / food-chain theme  ·  dark earth, warm amber, forest moss
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ── */
:root {
  /* Deep earth / forest floor */
  --earth:      #1c1208;
  --earth-dark: #100900;
  --earth-lite: #2c1c0c;

  /* Mossy forest surfaces */
  --moss:       #162014;
  --moss-dark:  #0c1408;
  --moss-lite:  #223a1c;

  /* Warm amber accent (natural gold) */
  --amber:      #c89028;
  --amber-lt:   #eaca6a;
  --amber-dk:   #7c5414;

  /* Aged parchment text / surfaces */
  --parchment:  #f0e8c0;
  --parch-dk:   #d4b870;
  --parch-bdr:  #9c7838;
  --ink:        #1c0e04;

  /* Neutrals */
  --silver:    #909090;
  --silver-lt: #d8d8d8;
  --red-dk:    #7b1c1c;

  /* Legacy aliases so JS-embedded references still work */
  --felt:      #162014;
  --felt-dark: #100900;
  --felt-lite: #223a1c;
  --gold:      #c89028;
  --gold-lt:   #eaca6a;
  --gold-dk:   #7c5414;

  --chat-font: .8rem;
  --chat-w:    240px;

  /* Card tier gradients — nature-themed */
  --c0:  #3a1e06, #7a4e16;   /* 기생충 */
  --c1:  #785006, #cc9c1e;   /* 사자  */
  --c2:  #2a1808, #6a4820;   /* 곰    */
  --c3:  #263240, #567090;   /* 늑대  */
  --c4:  #36300c, #84702c;   /* 하이에나 */
  --c5:  #5a200e, #be4e2c;   /* 여우  */
  --c6:  #183020, #3a6e50;   /* 살쾡이 */
  --c7:  #28300e, #586830;   /* 뱀    */
  --c8:  #1a2c10, #4a6e30;   /* 개구리 */
  --c9:  #1e2028, #4e5060;   /* 거미  */
  --c10: #283a10, #669828;   /* 메뚜기 */
  --c11: #1c2c0c, #3c5018;   /* 잡초  */
  --c12: #361e06, #785a1e;   /* 똥    */
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

body {
  font-family: 'Noto Serif KR', serif;
  background: var(--earth-dark);
  color: var(--parchment);
  min-height: 100vh;
  overflow: hidden;
}

.screen { width: 100vw; min-height: 100vh; }
.hidden { display: none !important; }

/* ── Buttons ── */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: filter .15s, transform .1s;
}
button:hover  { filter: brightness(1.15); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }

.btn-gold {
  background: linear-gradient(135deg, var(--amber-dk), var(--amber));
  color: var(--ink);
  font-weight: 700;
  padding: 8px 18px;
  border: 1px solid var(--amber-lt);
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.btn-silver {
  background: linear-gradient(135deg, #4a4030, #887060);
  color: var(--parchment);
  padding: 8px 18px;
}
.btn-muted {
  background: #2a1e14;
  color: #9a8870;
  padding: 8px 16px;
}
.big-btn { padding: 10px 28px; font-size: 1rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ENTER (landing)
   ════════════════════════════════════════════════════════════════════════════ */
#enter-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(40,80,20,.22) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 75%, rgba(100,60,10,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 0%,  rgba(200,144,40,.14) 0%, transparent 55%),
    var(--earth-dark);
  height: 100vh;
  overflow-y: auto;
  padding: 14px 16px;
}

.enter-wrap { width: 100%; max-width: 680px; }
.enter-header { text-align: center; margin-bottom: 28px; }

.enter-card-deco {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 36px;
  height: 140px;
}
.deco-card {
  width: 80px;
  height: 125px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 16px rgba(200,144,40,.18);
  position: relative;
}
.deco-card-l {
  transform: rotate(-15deg) translateY(10px);
  z-index: 1;
  margin-right: -18px;
}
.deco-card-c {
  transform: translateY(0px);
  z-index: 3;
}
.deco-card-r {
  transform: rotate(15deg) translateY(10px);
  z-index: 1;
  margin-left: -18px;
}

.enter-body {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.enter-panel { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }

.field-row input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--amber-dk);
  background: rgba(255,240,200,.05);
  color: var(--parchment);
  font-family: inherit;
  font-size: .95rem;
}
.field-row input::placeholder { color: rgba(240,232,192,.38); }
.field-row input:focus { outline: none; border-color: var(--amber); }

.full-btn { width: 100%; padding: 9px 0; font-size: .95rem; }
.field-status { font-size: .82rem; color: #ef9a9a; min-height: 1.1em; }

/* 비공개 체크박스 */
.private-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  color: var(--parch-dk);
  cursor: pointer;
  user-select: none;
}
.private-label input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--amber);
  cursor: pointer;
}

/* 공개방 목록 */
.public-rooms-panel { margin-bottom: 18px; }
.rooms-count { font-family: 'Noto Serif KR', serif; font-size: .85rem; color: var(--parch-dk); font-weight: 400; }
.no-rooms-msg { font-size: .85rem; color: var(--silver); text-align: center; padding: 10px 0; }

.public-room-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(200,144,40,.15);
}
.public-room-row:last-child { border-bottom: none; }
.pr-name { flex: 1; font-size: .9rem; color: var(--parchment); }
.pr-count { font-size: .8rem; color: var(--silver); white-space: nowrap; }
.pr-join-btn { padding: 4px 14px; font-size: .8rem; white-space: nowrap; }
.pr-ingame-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: .7rem;
  background: rgba(200,100,30,.25);
  color: #e8a860;
  border: 1px solid rgba(200,100,30,.4);
  border-radius: 4px;
  vertical-align: middle;
}

.enter-rules { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════════════
   LOBBY
   ════════════════════════════════════════════════════════════════════════════ */
#lobby-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--chat-w, 0px);
  background:
    radial-gradient(ellipse at 20% 25%, rgba(40,80,20,.22) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 75%, rgba(100,60,10,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 0%,  rgba(200,144,40,.14) 0%, transparent 55%),
    var(--earth-dark);
  overflow-y: auto;
  padding: 30px 16px;
}

.lobby-wrap { width: 100%; max-width: 860px; }

.lobby-header { text-align: center; margin-bottom: 28px; }

/* ── Logo ── */
.game-logo {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--amber);
  text-shadow:
    0 0 22px rgba(200,144,40,.65),
    0 0  8px rgba(200,144,40,.30),
    0 2px 5px rgba(0,0,0,.9);
  letter-spacing: .06em;
  line-height: 1.15;
}
.game-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 1.0rem;
  color: var(--parch-dk);
  margin-top: 8px;
  letter-spacing: .28em;
  opacity: .85;
}

.lobby-body {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.lobby-left  { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.lobby-right { flex: 1 1 220px; }

/* Panel */
.panel {
  background: rgba(240,232,192,.055);
  border: 1px solid var(--amber-dk);
  border-radius: 6px;
  padding: 16px 18px;
}
.panel-title {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-weight: 700;
  color: var(--amber);
  font-size: .95rem;
  letter-spacing: .06em;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(200,144,40,.28);
  padding-bottom: 6px;
}

.name-row { display: flex; gap: 8px; }
.name-row input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--amber-dk);
  background: rgba(255,240,200,.05);
  color: var(--parchment);
  font-family: inherit;
  font-size: .95rem;
}
.name-row input::placeholder { color: rgba(240,232,192,.38); }
.name-row input:focus { outline: none; border-color: var(--amber); }

.btn-row { display: flex; gap: 10px; }
.hint { font-size: .8rem; color: var(--silver); margin-top: 10px; }

#lobby-join-status { font-size: .85rem; color: #ef9a9a; margin-top: 6px; min-height: 1.2em; }

/* Room code row in lobby header */
.room-code-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--amber-dk);
  border-radius: 6px;
  padding: 5px 14px;
}
.room-code-label { font-size: .8rem; color: var(--parch-dk); letter-spacing: .05em; }
.room-code-value {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--amber);
  letter-spacing: .18em;
  font-weight: 700;
}
.copy-btn { padding: 3px 10px; font-size: .75rem; border-radius: 3px; }

.leave-btn {
  align-self: flex-start;
  font-size: .72rem;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 4px;
  opacity: .6;
}
.leave-btn:hover { opacity: 1; }

/* Lobby player list */
#lobby-players { list-style: none; display: flex; flex-direction: column; gap: 6px; }
#lobby-players li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255,240,200,.04);
  border-radius: 4px;
  border: 1px solid rgba(200,144,40,.14);
}
.lp-name  { flex: 1; font-size: .9rem; }
.lp-ready {
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #2a1e14;
  color: #8a7a60;
}
.lp-ready.yes { background: #1a3010; color: #88c870; }

/* Rules */
.rules-list { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--parch-dk); }
.rules-list li { line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   GAME SCREEN LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
#game-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.game-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 48px 1fr;
  height: 100vh;
  gap: 0;
  padding-right: var(--chat-w);
}

/* Header row */
.game-header {
  grid-column: 1;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #100900, #1c1208);
  border-bottom: 2px solid var(--amber-dk);
  padding: 0 14px;
  gap: 12px;
  z-index: 10;
}
.header-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-right { margin-left: auto; display: flex; gap: 8px; }

.logo-small {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  color: var(--amber);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.round-badge {
  background: rgba(200,144,40,.18);
  border: 1px solid var(--amber-dk);
  border-radius: 12px;
  padding: 1px 10px;
  font-size: .78rem;
  color: var(--amber-lt);
  font-family: 'Noto Serif KR', serif;
}

.turn-banner {
  flex: 1;
  text-align: center;
  font-family: 'Noto Serif KR', serif;
  font-size: .92rem;
  color: var(--parch-dk);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.turn-card-icon {
  width: 16px;
  height: 22px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
}

.turn-banner.my-turn {
  color: var(--amber-lt);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(200,144,40,.18);
  border-radius: 6px;
  padding: 2px 18px;
  animation: pulse-glow 1.2s ease-in-out infinite;
}
.turn-banner.others-turn {
  color: var(--parchment);
  font-size: .98rem;
  font-weight: 600;
}
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(200,144,40,.7);  background: rgba(200,144,40,.12); }
  50%       { text-shadow: 0 0 20px rgba(200,144,40,1), 0 0 4px rgba(255,240,200,.4); background: rgba(200,144,40,.28); }
}

.opponent-box.active-player {
  border-color: var(--amber) !important;
  animation: active-pulse 1.2s ease-in-out infinite;
}
@keyframes active-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(200,144,40,.35); }
  50%       { box-shadow: 0 0 20px rgba(200,144,40,.80); }
}

/* ── Game Body ── */
.game-body {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(40,70,20,.30) 0%, transparent 50%),
    linear-gradient(180deg, #141c10 0%, #0e1208 100%);
  overflow: hidden;
  position: relative;
}

/* ── Opponents ── */
#opponents-area {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid rgba(200,144,40,.12);
  min-height: 80px;
  align-items: stretch;
}

.opponent-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(200,144,40,.18);
  border-radius: 6px;
  padding: 6px 8px;
  transition: border-color .3s;
  overflow: hidden;
}
.me-box {
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  padding: 0;
  gap: 0;
  border-color: rgba(200,144,40,.5) !important;
  background: rgba(200,144,40,.08) !important;
  display: grid;
  place-items: center;
}
.me-name {
  color: var(--amber) !important;
  font-weight: 700;
  flex: none;
  margin-bottom: 5px;
}
.opponent-box.player-finished {
  opacity: .55;
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}
.opp-finish-badge {
  margin-top: 4px;
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .04em;
  text-align: center;
  padding: 4px 0;
  border-top: 1px solid rgba(200,144,40,.28);
}
.pending-hand-notice {
  width: 100%;
  text-align: center;
  color: var(--silver);
  font-size: .95rem;
  padding: 20px 0;
  opacity: .85;
  animation: pulse-glow 2s ease-in-out infinite;
}
.my-finish-badge {
  width: 100%;
  text-align: center;
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--amber);
  padding: 18px 0;
  letter-spacing: .06em;
  text-shadow: 0 0 14px rgba(200,144,40,.75);
  animation: pulse-glow 1.6s ease-in-out infinite;
}

.opp-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.opp-name {
  font-family: 'Noto Serif KR', serif;
  font-size: .72rem;
  color: var(--amber-lt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.opp-count {
  font-size: .62rem;
  color: var(--silver);
  white-space: nowrap;
  flex-shrink: 0;
}
.opp-role {
  font-family: 'Noto Serif KR', serif;
  font-size: .65rem;
  color: var(--amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}
.card-back {
  width: 16px;
  height: 25px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ── Table ── */
#table-area {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-dk) transparent;
}

.table-felt {
  width: 100%;
  max-width: 620px;
  min-height: 120px;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(28,48,20,.88),
      rgba(10,16,8,.94));
  border: 2px solid var(--amber-dk);
  border-radius: 14px;
  box-shadow:
    0 0 32px rgba(0,0,0,.65),
    inset 0 0 22px rgba(0,0,0,.45),
    inset 0 0 60px rgba(10,20,8,.5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
  gap: 12px;
  position: relative;
}

/* subtle inner leaf-vein texture */
.table-felt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(40,70,20,.18) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 20%, rgba(60,40,10,.12) 0%, transparent 40%);
  pointer-events: none;
}

.turn-label {
  font-family: 'Noto Serif KR', serif;
  font-size: .85rem;
  color: rgba(240,232,192,.42);
  text-align: center;
  letter-spacing: .06em;
}

#turn-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#turn-history-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.turn-play-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(0,0,0,.22);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
}
.turn-play-group.dim {
  filter: brightness(0.48) grayscale(25%);
}
.turn-play-namerow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.turn-play-name {
  font-family: 'Noto Serif KR', serif;
  font-size: .7rem;
  color: var(--amber-lt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.turn-play-desc {
  font-size: .9rem;
  color: var(--silver);
  white-space: nowrap;
  flex-shrink: 0;
}
.turn-play-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#turn-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ── My Hand ── */
#hand-area {
  padding: 8px 12px 10px;
  background: rgba(0,0,0,.38);
  border-top: 2px solid var(--amber-dk);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

#hand-resizer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  cursor: row-resize;
  background: transparent;
  z-index: 10;
  transition: background .15s;
}
#hand-resizer:hover,
#hand-resizer.dragging { background: rgba(200,144,40,.38); }

.hand-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hand-label {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .06em;
}
.my-role-badge {
  font-family: 'Noto Serif KR', serif;
  font-size: .72rem;
  padding: 1px 9px;
  border-radius: 10px;
  background: rgba(200,144,40,.18);
  border: 1px solid var(--amber-dk);
  color: var(--amber-lt);
}

.card-count-badge {
  background: rgba(200,144,40,.26);
  border: 1px solid var(--amber-dk);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: .72rem;
  color: var(--amber-lt);
}

#my-hand {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  flex: 1;
  min-height: 20px;
  padding: 10px 10px 0;
  overflow: visible;
}

/* 팬 레이아웃 */
#my-hand .survival-card {
  width:  calc(100px * var(--hand-scale, 1));
  height: calc(156px * var(--hand-scale, 1));
  margin-right: calc(-28px * var(--hand-scale, 1));
  transition: transform .15s, box-shadow .15s, margin-right .15s, z-index 0s;
  z-index: 1;
}
#my-hand.resizing .survival-card {
  transition: none !important;
}
#my-hand .survival-card:last-child { margin-right: 0; }
#my-hand .survival-card:hover,
#my-hand .survival-card.selected {
  z-index: 10;
  margin-right: calc(4px * var(--hand-scale, 1));
}

#action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.auto-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--parch-dk);
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border: 1px solid rgba(200,144,40,.25);
  border-radius: 6px;
  white-space: nowrap;
}
.auto-label input[type="checkbox"] { cursor: pointer; accent-color: var(--amber); }
.auto-countdown {
  color: var(--silver);
  font-size: .85rem;
  min-width: 36px;
}

/* ── Chat (fixed persistent panel) ── */
#chat-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: var(--chat-w);
  background: rgba(8,6,2,.90);
  border-left: 2px solid var(--amber-dk);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;
}

#chat-resizer {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background .15s;
}
#chat-resizer:hover,
#chat-resizer.dragging { background: rgba(200,144,40,.38); }

.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 5px 14px;
  border-bottom: 1px solid var(--amber-dk);
  flex-shrink: 0;
  background: rgba(0,0,0,.30);
}
.chat-title {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .06em;
}
.chat-font-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-size-btn {
  background: rgba(255,240,200,.07);
  color: var(--parch-dk);
  border: 1px solid rgba(200,144,40,.28);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
}
.chat-size-btn:hover { background: rgba(200,144,40,.18); }
.chat-font-display {
  font-size: .7rem;
  color: var(--silver);
  min-width: 34px;
  text-align: center;
}

#chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-dk) transparent;
}

.chat-msg {
  font-size: var(--chat-font, .8rem);
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg .cm-name {
  font-weight: 700;
  color: var(--amber);
  margin-right: 3px;
}
.chat-msg .cm-role {
  font-size: .78em;
  color: var(--parch-dk);
  font-weight: 400;
  margin-right: 3px;
}
.chat-msg .cm-time {
  font-size: .68rem;
  color: var(--silver);
  margin-left: 4px;
}
.chat-msg.system .cm-name { color: var(--silver-lt); }
.chat-msg.system .cm-body { color: var(--silver); font-style: italic; }

.chat-input-row {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--amber-dk);
}
.chat-input-row input {
  flex: 1;
  padding: 5px 8px;
  background: rgba(255,240,200,.06);
  border: 1px solid rgba(200,144,40,.28);
  border-radius: 4px;
  color: var(--parchment);
  font-family: inherit;
  font-size: var(--chat-font, .8rem);
}
.chat-input-row input::placeholder { color: rgba(240,232,192,.28); }
.chat-input-row input:focus { outline: none; border-color: var(--amber); }
.chat-input-row button { padding: 5px 10px; font-size: .78rem; }

/* ════════════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.survival-card {
  width: 100px;
  height: 156px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  transition: transform .15s, box-shadow .15s, border-color .15s, z-index 0s;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}

.survival-card:hover {
  transform: translateY(-14px) scale(1.05);
  box-shadow: 0 14px 22px rgba(0,0,0,.7), 0 0 14px rgba(200,144,40,.28);
}

.survival-card.selected {
  transform: translateY(-22px) scale(1.07);
  border-color: var(--amber);
  box-shadow: 0 16px 30px rgba(0,0,0,.72), 0 0 20px rgba(200,144,40,.75);
}

.survival-card.unavailable {
  pointer-events: none;
  transform: none !important;
  filter: grayscale(80%) brightness(0.55);
}

/* 내 차례 아닐 때 */
#my-hand.hand-locked .survival-card {
  pointer-events: none;
  cursor: default;
  filter: brightness(0.42) saturate(0.45);
  transform: none !important;
  transition: none;
}

.survival-card.turn-card {
  width: 100px;
  height: 156px;
  cursor: default;
  transform: none;
  flex-shrink: 0;
}
.survival-card.turn-card:hover {
  transform: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
}

/* Corner rank */
.card-rank-top, .card-rank-bot {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  position: relative;
  z-index: 1;
  font-size: 1rem;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
  line-height: 1;
  width: 100%;
}
.card-rank-top { text-align: left; }
.card-rank-bot { text-align: right; transform: rotate(180deg); }

/* Illustration */
.card-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  position: relative;
  z-index: 1;
}
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  z-index: 0;
}
.card-emoji {
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  color: rgba(255,255,255,.92);
}
.card-title-en {
  font-family: 'Cinzel', serif;
  font-size: .38rem;
  color: rgba(255,255,255,.8);
  text-align: center;
  letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  line-height: 1.2;
  max-width: 64px;
  word-break: break-word;
}
.card-title-ko {
  font-family: 'Noto Serif KR', serif;
  font-size: .42rem;
  color: rgba(255,255,255,.7);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  line-height: 1.2;
}

.card-parasite .card-emoji { font-size: 2rem; }

/* Ornate border overlay */
.survival-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  pointer-events: none;
}

/* Per-rank gradients — nature themed */
.card-rank-0  { background: linear-gradient(160deg, #3a1e06, #7a4e16); } /* 기생충 — dark mud */
.card-rank-1  { background: linear-gradient(160deg, #785006, #cca01e); } /* 사자  — savanna gold */
.card-rank-2  { background: linear-gradient(160deg, #2a1808, #6a4820); } /* 곰    — forest brown */
.card-rank-3  { background: linear-gradient(160deg, #263240, #567090); } /* 늑대  — slate blue */
.card-rank-4  { background: linear-gradient(160deg, #36300c, #84702c); } /* 하이에나 — dusty tan */
.card-rank-5  { background: linear-gradient(160deg, #5a200e, #be4e2c); } /* 여우  — rusty fox */
.card-rank-6  { background: linear-gradient(160deg, #183020, #3a6e50); } /* 살쾡이 — forest teal */
.card-rank-7  { background: linear-gradient(160deg, #28300e, #586830); } /* 뱀    — olive drab */
.card-rank-8  { background: linear-gradient(160deg, #1a2c10, #4a6e30); } /* 개구리 — pond green */
.card-rank-9  { background: linear-gradient(160deg, #1e2028, #4e5060); } /* 거미  — dusky grey */
.card-rank-10 { background: linear-gradient(160deg, #283a10, #669828); } /* 메뚜기 — meadow */
.card-rank-11 { background: linear-gradient(160deg, #1c2c0c, #3c5018); } /* 잡초  — dark leaf */
.card-rank-12 { background: linear-gradient(160deg, #361e06, #785a1e); } /* 똥    — rich earth */

/* ════════════════════════════════════════════════════════════════════════════
   OVERLAYS
   ════════════════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--chat-w, 0px);
  z-index: 100;
  backdrop-filter: blur(4px);
}

.overlay-box {
  background: linear-gradient(155deg, #130a02 0%, #221404 55%, #160e04 100%);
  border: 2px solid var(--amber);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow:
    0 0 44px rgba(200,144,40,.28),
    0 8px 32px rgba(0,0,0,.8);
  font-size: 0.88rem;
}
.overlay-box.wide { max-width: 580px; }
.rules-modal-box { max-height: 80vh; overflow-y: auto; }
.rules-btn-small { font-size: 0.75rem; padding: 3px 9px; }

.overlay-title {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  font-weight: 800;
  color: var(--amber);
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 0 0 14px rgba(200,144,40,.55);
}

/* Tax overlay */
#tax-content { display: flex; flex-direction: column; gap: 14px; }
.tax-item {
  background: rgba(255,240,200,.04);
  border: 1px solid rgba(200,144,40,.18);
  border-radius: 6px;
  padding: 12px 14px;
}
.tax-header { font-family: 'Noto Serif KR', serif; color: var(--amber-lt); font-size: .88rem; margin-bottom: 8px; }
.tax-cards-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.tax-arrow { color: var(--amber); font-size: 1.2rem; margin: 0 4px; }
.overlay-note { text-align: center; color: var(--silver); font-size: .82rem; margin-top: 14px; }

/* Rankings table */
#rankings-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255,240,200,.04);
  border-radius: 5px;
  border: 1px solid rgba(200,144,40,.14);
}
.rk-pos {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  width: 28px;
  text-align: center;
}
.pos-1 { color: var(--amber); }
.pos-2 { color: var(--silver-lt); }
.pos-last { color: #ef5350; }
.rk-name { flex: 1; font-size: .9rem; }
.rk-ready {
  font-size: .75rem;
  min-width: 50px;
  text-align: center;
  color: var(--silver);
  font-family: 'Noto Serif KR', serif;
}
.rk-ready.voted {
  color: #88c870;
  font-weight: 700;
}
.rk-role {
  font-family: 'Noto Serif KR', serif;
  font-size: .78rem;
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid rgba(200,144,40,.38);
  color: var(--amber-lt);
}

.vote-status {
  text-align: center;
  color: var(--silver);
  font-size: .78rem;
  margin-bottom: 8px;
  min-height: 1em;
}

/* 난입 배치 섹션 */
#pending-section {
  border-top: 1px solid rgba(200,144,40,.28);
  margin: 12px 0 8px;
  padding-top: 12px;
}
.pending-assign-wrap { display: flex; flex-direction: column; gap: 8px; }
.pending-assign-title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 700;
  color: var(--amber);
  font-size: .88rem;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.pending-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pending-name { flex: 1; font-size: .9rem; color: var(--parchment); }
.pending-pos-select {
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid var(--amber-dk);
  background: #1c1208;
  color: var(--parchment);
  font-family: inherit;
  font-size: .85rem;
}
.pending-pos-select option {
  background: #1c1208;
  color: var(--parchment);
}
.pending-wait-msg {
  text-align: center;
  color: var(--parch-dk);
  font-size: .88rem;
  padding: 6px 0;
}

/* Finish strip in header */
.finish-chip {
  font-size: .72rem;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(200,144,40,.18);
  border: 1px solid var(--amber-dk);
  color: var(--amber-lt);
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18,10,2,.96);
  border: 1px solid var(--amber-dk);
  border-radius: 6px;
  padding: 10px 22px;
  color: var(--parchment);
  font-size: .88rem;
  z-index: 200;
  pointer-events: none;
  transition: opacity .3s;
  box-shadow: 0 4px 14px rgba(0,0,0,.75);
}
.toast.error-toast { border-color: #e53935; color: #ef9a9a; }

/* ── Draw overlay ── */
.draw-round-label {
  text-align: center;
  font-family: 'Noto Serif KR', serif;
  font-size: .78rem;
  color: var(--silver);
  margin: 8px 0 4px;
  letter-spacing: .04em;
}
.draw-round-label.final { color: var(--amber); }

.draw-rows { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 6px; }
.draw-row.tied { border-color: rgba(239,83,80,.5); background: rgba(239,83,80,.07); }

.draw-final-order {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.draw-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: rgba(255,240,200,.04);
  border: 1px solid rgba(200,144,40,.18);
  border-radius: 4px;
}
.dor-pos  { font-family:'Cinzel',serif; font-weight:700; color:var(--amber); min-width:20px; }
.dor-name { flex:1; font-size:.9rem; }
.dor-role { font-size:.75rem; color:var(--silver); font-family:'Noto Serif KR',serif; }
.draw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,240,200,.04);
  border: 1px solid rgba(200,144,40,.14);
  border-radius: 6px;
  min-width: 160px;
}
.draw-row.winner { border-color: var(--amber); background: rgba(200,144,40,.10); }
.draw-name { flex:1; font-size:.9rem; }
.draw-card { font-family:'Cinzel',serif; font-weight:700; font-size:1.2rem; color:var(--amber); }
.draw-winner { text-align:center; font-family:'Nanum Myeongjo','Noto Serif KR',serif; color:var(--amber); font-size:1.1rem; margin-top:4px; text-shadow:0 0 10px rgba(200,144,40,.65); }

/* ── Tax choose ── */
#tax-hand-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:8px 0; }
#tax-received-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.tax-received-label { font-size:.8rem; color:var(--silver); width:100%; text-align:center; margin-bottom:4px; }

#tax-hand-row .survival-card {
  width: 120px; height: 187px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, outline .1s;
}
#tax-hand-row .survival-card .card-rank-top,
#tax-hand-row .survival-card .card-rank-bot {
  font-size: 1.4rem;
}
#tax-hand-row .survival-card .card-emoji { font-size: 2.6rem; }
#tax-hand-row .survival-card:hover { transform: translateY(-8px) scale(1.05); }
#tax-hand-row .survival-card.selected {
  transform: translateY(-12px) scale(1.08);
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.7), 0 0 22px rgba(200,144,40,.85);
}

/* ── Action splash ── */
.my-turn-splash {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,16,4,.96);
  border: 1.5px solid var(--amber);
  border-radius: 10px;
  padding: 10px 36px;
  z-index: 610;
  text-align: center;
  pointer-events: none;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(200,144,40,.82);
  letter-spacing: .04em;
  animation: myTurnSplashAnim 1.8s ease-out forwards;
}
@keyframes myTurnSplashAnim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.88); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  22%  { transform: translateX(-50%) translateY(0) scale(1); }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1.02); }
}

.action-splash {
  position: fixed;
  top: 48%;
  left: calc(50% - var(--chat-w, 240px) / 2);
  transform: translate(-50%, -50%);
  background: rgba(8,18,6,.93);
  border: 1px solid var(--amber-dk);
  border-radius: 14px;
  padding: 12px 28px 14px;
  z-index: 600;
  text-align: center;
  pointer-events: none;
  animation: actionSplashAnim 1.6s ease-out forwards;
  max-width: min(90vw, 420px);
}
.action-splash.pass-action { border-color: rgba(144,144,144,.35); }
.as-name {
  display: block;
  font-size: .85rem;
  color: var(--parch-dk);
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.as-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.as-card-img {
  width: 100px;
  height: 156px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  flex-shrink: 0;
}
.as-text {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  color: var(--amber-lt);
  letter-spacing: .03em;
}
.pass-action .as-text { color: var(--silver); font-size: 1.05rem; }
@keyframes actionSplashAnim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  22%  { transform: translate(-50%, -50%) scale(1); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

/* ── Score column ── */
.rk-score {
  font-size: .82rem;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  cursor: default;
  border-radius: 4px;
  padding: 1px 4px;
}
.rk-score.positive { color: #88c870; }
.rk-score.negative { color: #ef9a9a; }
.rk-score.zero     { color: var(--silver); }
.rk-score.positive:hover,
.rk-score.negative:hover { filter: brightness(1.2); }

/* ── Score board ── */
#score-board { margin: 14px 0 6px; }
.score-board-title {
  font-size: .78rem;
  color: var(--amber);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200,144,40,.22);
}
.score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: default;
  transition: background .12s;
}
.score-row:hover  { background: rgba(255,240,200,.04); }
.score-me         { background: rgba(200,144,40,.08); }
.sr-rank  { width: 32px; font-size: .75rem; color: var(--silver); }
.sr-name  { flex: 1; font-size: .88rem; }
.sr-score { font-size: .9rem; font-weight: 700; min-width: 48px; text-align: right; }
.sr-score.positive { color: #88c870; }
.sr-score.negative { color: #ef9a9a; }
.sr-score.zero     { color: var(--silver); }

/* ── Score tooltip ── */
.score-tooltip {
  position: fixed;
  background: #0e0802;
  border: 1px solid var(--amber-dk);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: .78rem;
  white-space: nowrap;
  z-index: 9999;
  color: var(--parchment);
  box-shadow: 0 6px 20px rgba(0,0,0,.7);
  pointer-events: none;
}
.sb-row   { display: flex; gap: 14px; justify-content: space-between; padding: 2px 0; }
.sb-role  { color: var(--parch-dk); min-width: 60px; }
.sb-pts   { color: var(--amber); font-weight: 600; }
.sb-divider { border: none; border-top: 1px solid rgba(255,255,255,.10); margin: 4px 0; }
.sb-total .sb-pts { color: var(--amber-lt); font-size: .85rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--amber-dk); border-radius: 3px; }

/* ── Turn timer ── */
.turn-timer-display {
  font-size: .85rem;
  color: #f0a040;
  font-weight: 600;
  min-width: 50px;
}
.nextround-timer-display {
  text-align: center;
  font-size: .85rem;
  color: var(--silver);
  margin-bottom: 6px;
}

/* ── Role change display (prev → new) ── */
.rk-role-change { display: flex; align-items: center; gap: 4px; }
.rk-prev-role {
  font-size: .78rem;
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid rgba(158,158,158,.3);
  color: var(--silver);
}
.rk-arrow { font-size: .8rem; font-weight: 700; }
.arrow-up   { color: #81c784; }
.arrow-down { color: #ef9a9a; }
.arrow-same { color: var(--silver); }

/* ── Round meta (tax badge) ── */
#round-meta { text-align: center; margin-bottom: 10px; min-height: 1.2em; }
.tax-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(201,162,39,.15);
  border: 1px solid rgba(201,162,39,.4);
  color: var(--gold);
  letter-spacing: .04em;
}
.no-tax-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(102,187,106,.1);
  border: 1px solid rgba(102,187,106,.35);
  color: #81c784;
  letter-spacing: .04em;
}

/* ── Patch note widget (top-right) ── */
#patchnote-widget {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 200;
  text-align: right;
}
.patchnote-toggle-btn {
  background: rgba(30,25,15,.85);
  border: 1px solid rgba(212,175,55,.35);
  color: var(--text-muted);
  font-size: .78rem;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.patchnote-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
.patchnote-dropdown {
  margin-top: 8px;
  background: rgba(22,18,10,.96);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 10px;
  padding: 16px 18px;
  width: 300px;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  max-height: 70vh;
  overflow-y: auto;
}
.patchnote-dropdown.hidden { display: none; }
.patch-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212,175,55,.2);
}
.patch-nav-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.patch-nav-version {
  font-size: .92rem;
  color: var(--gold);
  letter-spacing: .06em;
}
.patch-nav-date {
  font-size: .72rem;
  color: var(--text-muted);
}
.patch-nav-btn {
  background: none;
  border: 1px solid rgba(212,175,55,.3);
  color: var(--gold);
  font-size: 1.2rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.patch-nav-btn:hover { background: rgba(212,175,55,.15); }
.patch-nav-btn:disabled { opacity: .25; cursor: default; }
.patch-pages { overflow: hidden; }
.patch-page { display: none; }
.patch-page.active { display: block; }
.patch-version {
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .05em;
  margin-left: 6px;
}
.patch-block { margin-bottom: 14px; }
.patch-block:last-child { margin-bottom: 0; }
.patch-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  letter-spacing: .04em;
}
.patch-tag-new  { background: rgba(100,160,255,.15); border: 1px solid rgba(100,160,255,.4); color: #90c8ff; }
.patch-tag-fix  { background: rgba(255,180,80,.12);  border: 1px solid rgba(255,180,80,.35); color: #ffc87a; }
.patch-tag-etc  { background: rgba(160,160,160,.12); border: 1px solid rgba(160,160,160,.3); color: #bbb; }
.patch-list {
  margin: 0;
  padding-left: 18px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.patch-list li { margin-bottom: 2px; }