:root {
  --paper: #EDE6D6; --paper-dim: #E1D8C2; --paper-line: #C9BC9C;
  --ink: #1D1812; --ink-soft: #4A4237;
  --red: #8C1D18; --red-dark: #5C1210; --red-glow: #C4453A;
  --gold: #B8933A; --gold-soft: #D9C68A; --gold-bright: #E4C878;
  --blue: #2B4A5E; --blue-dark: #1D3542; --blue-glow: #4E85A0;
  --wood-1: #3B2A1E; --wood-2: #2A1D14; --brass: #C6A059;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--ink); }
body { font-family: 'Libre Franklin', sans-serif; color: var(--ink); }

.sh-root { min-height: 100vh; width: 100%; display: flex; justify-content: center; background: var(--ink); }
.sh-shell {
  width: 100%; max-width: 430px; min-height: 100vh; background: var(--paper); position: relative;
  display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(0,0,0,0.55);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(140,29,24,0.05), transparent 40%),
    radial-gradient(circle at 88% 94%, rgba(43,74,94,0.05), transparent 40%);
}
.sh-display { font-family: 'Oswald', sans-serif; letter-spacing: 0.02em; }
.sh-eyebrow { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; color: var(--ink-soft); }
.sh-stamp { width: 34px; height: 34px; border-radius: 999px; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; }

.sh-btn {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 15px;
  border: 2px solid var(--ink); border-radius: 2px; padding: 14px 20px; min-height: 50px; background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s ease; width: 100%;
}
.sh-btn:active { transform: scale(0.97); }
.sh-btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.sh-btn-primary:active { box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.sh-btn-red { background: var(--red); color: var(--paper); border-color: var(--red); box-shadow: 0 3px 0 var(--red-dark); }
.sh-btn-red:active { box-shadow: 0 1px 0 var(--red-dark); }
.sh-btn-blue { background: var(--blue); color: var(--paper); border-color: var(--blue); box-shadow: 0 3px 0 var(--blue-dark); }
.sh-btn-blue:active { box-shadow: 0 1px 0 var(--blue-dark); }
.sh-btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 3px 0 #8a6b25; }
.sh-btn-gold:active { box-shadow: 0 1px 0 #8a6b25; }
.sh-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.sh-btn-list { border: 2px solid var(--ink); justify-content: flex-start; }
.sh-back-btn {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600;
  background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 8px 4px;
}
.sh-back-btn:active { opacity: .6; }

.sh-card { background: var(--paper-dim); border: 1px solid var(--paper-line); border-radius: 3px; padding: 16px; }
.sh-input {
  font-family: 'Libre Franklin', sans-serif; font-size: 16px; border: none; border-bottom: 2px solid var(--ink);
  background: transparent; padding: 10px 4px; width: 100%; color: var(--ink); outline: none;
}
.sh-input::placeholder { color: var(--ink-soft); opacity: .5; }
.sh-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--paper-line) 15%, var(--paper-line) 85%, transparent); width: 100%; }

/* ---------- Policy tiles ---------- */
.sh-tile {
  border-radius: 3px; padding: 22px 14px; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: .04em; border: 2px solid transparent; cursor: pointer; transition: transform .12s cubic-bezier(.2,.8,.2,1); flex: 1;
  box-shadow: 0 3px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
.sh-tile:active { transform: scale(0.95) translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.sh-tile-liberal { background: linear-gradient(160deg, var(--blue-glow), var(--blue)); color: var(--paper); }
.sh-tile-fascist { background: linear-gradient(160deg, var(--red-glow), var(--red)); color: var(--paper); }
.sh-tile-reveal { animation: shTileReveal .6s cubic-bezier(.2,.8,.2,1) both; cursor: default; }
.sh-tile-reveal:active { transform: none; }
@keyframes shTileReveal {
  0% { transform: rotateY(-100deg) scale(.85); opacity: 0; }
  55% { transform: rotateY(10deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); }
}

/* ---------- Board ---------- */
.sh-board {
  position: relative; border-radius: 6px; padding: 16px 14px 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(160deg, var(--wood-1), var(--wood-2));
  box-shadow: inset 0 0 0 1px rgba(198,160,89,0.35), inset 0 2px 6px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.35);
}
.sh-board::before, .sh-board::after {
  content: ''; position: absolute; width: 6px; height: 6px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #f0dca0, var(--brass));
  box-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.sh-board::before { top: 8px; left: 8px; }
.sh-board::after { top: 8px; right: 8px; }
.sh-board-ribbon {
  text-align: center; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; color: var(--gold-bright); margin-bottom: 12px; opacity: .85;
}
.sh-board-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sh-board-row:last-child { margin-bottom: 0; }
.sh-board-row-tracker { margin-top: 2px; }
.sh-board-label {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 10px;
  line-height: 1.2; color: var(--gold-soft); width: 46px; flex-shrink: 0;
}
.sh-board-label-liberal { color: var(--blue-glow); }
.sh-board-label-fascist { color: var(--red-glow); }
.sh-slot-row { display: flex; gap: 5px; flex: 1; }
.sh-slot {
  position: relative; flex: 1; aspect-ratio: 1; border-radius: 3px;
  background: rgba(237,230,214,0.06); border: 1.5px solid rgba(198,160,89,0.4);
  display: flex; align-items: center; justify-content: center; overflow: visible;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
}
.sh-slot-num { font-family: 'Oswald', sans-serif; font-size: 11px; color: rgba(237,230,214,0.35); }
.sh-slot-icon { font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.sh-slot-filled {
  animation: shSlotPop .45s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 8px 1px rgba(0,0,0,0.3);
}
.sh-slot-liberal.sh-slot-filled { background: linear-gradient(160deg, var(--blue-glow), var(--blue)); border-color: var(--blue-glow); }
.sh-slot-fascist.sh-slot-filled { background: linear-gradient(160deg, var(--red-glow), var(--red)); border-color: var(--red-glow); }
@keyframes shSlotPop { 0% { transform: scale(.4); opacity: 0; } 65% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.sh-power-badge {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.sh-power-icon {
  font-size: 15px; width: 22px; height: 22px; border-radius: 999px;
  background: rgba(228,200,120,0.18); border: 1px solid rgba(228,200,120,0.5);
  display: flex; align-items: center; justify-content: center;
}
.sh-power-text { font-family: 'Oswald', sans-serif; font-size: 6px; font-weight: 700; letter-spacing: .08em; color: var(--gold-bright); }
.sh-legend-row { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(198,160,89,0.25); }
.sh-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: rgba(237,230,214,0.75); }
.sh-legend-item span:first-child { font-size: 13px; }
.sh-slot-veto {
  position: absolute; bottom: -7px; font-family: 'Oswald', sans-serif; font-size: 6.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--wood-2); background: var(--gold-bright); padding: 1px 3px; border-radius: 1px;
}
.sh-slot-win {
  position: absolute; top: -7px; font-family: 'Oswald', sans-serif; font-size: 6.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--paper); background: rgba(0,0,0,0.55); padding: 1px 3px; border-radius: 1px;
}
.sh-tracker-row { display: flex; gap: 8px; flex: 1; }
.sh-tracker-pip {
  width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--brass);
  background: rgba(237,230,214,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.sh-tracker-pip-filled { background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold)); animation: shSlotPop .3s ease both; }
.sh-tracker-danger { animation: shPulseDanger 1.1s ease-in-out infinite; }
@keyframes shPulseDanger { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,69,58,0); } 50% { box-shadow: 0 0 0 5px rgba(196,69,58,0.35); } }

/* ---------- Legislative tile labels ---------- */
.sh-tile-label { display: block; }
.sh-tile-sub { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 5px; }

/* ---------- Player nameplates ---------- */
.sh-seats { padding: 12px 16px 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.sh-seat {
  position: relative; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 7px 10px; border-radius: 2px; background: var(--paper-dim); border: 1px solid var(--paper-line);
  color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,0.06); animation: shFadeIn .3s ease both;
}
.sh-seat-tag {
  display: block; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 1px;
}
.sh-seat-president { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border-color: var(--gold); box-shadow: 0 2px 4px rgba(184,147,58,0.4); }
.sh-seat-chancellor { background: linear-gradient(160deg, var(--blue-glow), var(--blue)); border-color: var(--blue-glow); color: var(--paper); box-shadow: 0 2px 4px rgba(43,74,94,0.4); }
.sh-seat-dead { background: transparent; border-color: var(--paper-line); color: var(--ink-soft); opacity: .5; text-decoration: line-through; }

/* ---------- Motion ---------- */
.fade-in { animation: shFadeIn .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes shFadeIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

.sh-safe-bottom { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.sh-safe-top { padding-top: max(20px, env(safe-area-inset-top)); }
.sh-code { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .3em; font-size: 32px; background: none; border: none; color: var(--red); cursor: pointer; }

/* ---------- Chat ---------- */
.sh-chat-toggle-btn {
  position: relative; background: none; border: none; font-size: 18px; cursor: pointer; line-height: 1; padding: 2px;
}
.sh-chat-badge {
  position: absolute; top: -6px; right: -8px; background: var(--red); color: var(--paper);
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 2px var(--paper);
}
.sh-chat-overlay {
  position: absolute; inset: 0; z-index: 60; background: var(--paper);
  flex-direction: column; animation: shFadeIn .25s ease both;
}
.sh-chat-header {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--paper-line); flex-shrink: 0;
}
.sh-chat-close { background: none; border: none; font-size: 18px; color: var(--ink-soft); cursor: pointer; padding: 4px; }
.sh-chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sh-chat-msg { max-width: 82%; align-self: flex-start; }
.sh-chat-msg-mine { align-self: flex-end; text-align: right; }
.sh-chat-msg-name {
  display: block; font-family: 'Oswald', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin-bottom: 2px;
}
.sh-chat-msg-text {
  display: inline-block; background: var(--paper-dim); border: 1px solid var(--paper-line); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; line-height: 1.4; word-break: break-word;
}
.sh-chat-msg-mine .sh-chat-msg-text { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.sh-chat-composer {
  display: flex; gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--paper-line); flex-shrink: 0;
}
.sh-chat-input {
  flex: 1; font-family: 'Libre Franklin', sans-serif; font-size: 15px; border: 1.5px solid var(--paper-line);
  border-radius: 8px; padding: 10px 12px; outline: none; background: var(--paper-dim); color: var(--ink);
}
.sh-chat-input:focus { border-color: var(--ink); }

/* ---------- Rules tabs ---------- */
.sh-rules-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; flex-shrink: 0; }
.sh-rules-tab {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(237,230,214,0.35); background: none;
  color: rgba(237,230,214,0.75); white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.sh-rules-tab-active { background: var(--gold); border-color: var(--gold); color: var(--wood-2); }
.sh-rules-body p { margin-bottom: 10px; }
.sh-rules-body ul { margin-bottom: 10px; }
.sh-rules-body table td { padding: 3px 8px 3px 0; }