:root {
  color-scheme: light;
  --bg: #f8fafc;
  --panel: #ffffff;
  --raised: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --lime: #047857;
  --emerald: #047857;
  --emerald-light: #ecfdf5;
  --blue: #e8f3f0;
  --tech-blue: #0284c7;
  --danger: #be123c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select {
  font: inherit;
  border-radius: 8px;
}

button {
  cursor: pointer;
  border: 0;
  transition: background .15s, transform .15s, box-shadow .15s, border-color .15s;
}

button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

a {
  color: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

button:hover:not(:disabled) {
  filter: none;
}

/* Topbar & Header */
.topbar {
  height: 76px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand strong {
  font-size: 21px;
  letter-spacing: 2px;
  color: var(--text);
  font-weight: 700;
}

.logo {
  position: relative;
  font: bold 26px/36px Georgia, serif;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1.5px solid var(--emerald);
  border-radius: 8px;
  text-align: center;
  color: var(--emerald);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.12);
}

.logo span {
  position: absolute;
  font: 9px monospace;
  left: 3px;
  top: 2px;
  color: var(--muted);
  font-weight: 600;
}

.brand-note {
  font-size: 12px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 13px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.connection {
  font-size: 12px;
  color: var(--muted);
  margin-right: 18px;
}

.quiet {
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all .15s;
}

.quiet:hover:not(:disabled) {
  background: var(--raised);
  color: var(--text);
  border-color: var(--line);
}

/* Buttons */
.btn {
  padding: 11px 20px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line-strong);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  transition: all .15s;
}

.btn:hover:not(:disabled) {
  background: var(--raised);
  border-color: #94a3b8;
  color: var(--text);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.primary {
  background: #047857;
  color: #ffffff;
  border: 1px solid #047857;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25);
}

.primary:hover:not(:disabled) {
  background: #065f46;
  border-color: #065f46;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.35);
}

.danger {
  color: var(--danger);
}

.small {
  font-size: 13px;
  padding: 8px 12px;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: ui-monospace, Consolas, monospace;
}

.eyebrow {
  font: 11px ui-monospace, Consolas, monospace;
  letter-spacing: 2px;
  color: var(--emerald);
  font-weight: 600;
}

/* Layout & Entrance */
#root {
  max-width: 1600px;
  margin: auto;
  padding: 28px 32px;
}

.welcome {
  max-width: 1060px;
  margin: 40px auto;
}

.welcome-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
}

.welcome-title h1 {
  font-size: 36px;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 8px 0;
  color: var(--text);
}

.welcome-title p {
  color: var(--muted);
  font-size: 14px;
}

.edition {
  font: 12px monospace;
  color: var(--muted);
}

.entrances {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}

.entrance {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.entrance h2 {
  font-size: 21px;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 600;
}

.entrance > p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 25px;
}

.field {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 17px;
  font-weight: 500;
}

.field input, .field select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}

.field input::placeholder {
  color: #94a3b8;
}

.field input:focus, .field select:focus {
  outline: 2px solid var(--emerald);
  outline-offset: 1px;
  border-color: var(--emerald);
}

.choices {
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
}

.choice {
  flex: 1;
  text-align: left;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 9px;
  transition: all .15s;
}

.choice:hover {
  background: var(--raised);
  border-color: var(--line-strong);
}

.choice.active {
  background: var(--emerald-light);
  border: 1.5px solid var(--emerald);
  color: var(--emerald);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
}

.choice strong {
  display: block;
  font-size: 16px;
  color: var(--text);
}

.choice.active strong {
  color: #065f46;
}

.choice span {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--muted);
}

.choice.active span {
  color: #047857;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.wide {
  width: 100%;
}

.join-code {
  font: 25px ui-monospace, monospace;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.practice-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
}

.form-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 22px;
  margin: 9px 0;
}

/* Lobby */
.lobby {
  max-width: 960px;
  margin: 20px auto;
}

.lobby-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.room-code {
  font: 40px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 5px;
  margin-top: 6px;
  color: var(--tech-blue);
  font-weight: 700;
}

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px;
}

.lobby-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 23px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.lobby-panel h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text);
}

.seat-row {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.seat-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}

.seat-name small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.avatar {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e2e8f0;
  color: #334155;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
}

.avatar.mine {
  background: var(--emerald-light);
  color: #047857;
  border-color: rgba(4, 120, 87, 0.3);
}

.ready-badge {
  font-size: 12px;
  color: #047857;
  font-weight: 600;
  background: var(--emerald-light);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.waiting-badge {
  font-size: 12px;
  color: #475569;
  background: var(--raised);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.lobby-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}
/* Game Header */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.game-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-title h1 {
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
}

.mode-chip {
  font: 14px monospace;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.room-label {
  font: 12px monospace;
  color: var(--muted);
}

.game-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Table Mat Light Mode */
.table {
  background: #e6f0ed;
  border: 1px solid #cadfd9;
  border-radius: 18px;
  min-height: 360px;
  padding: 19px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(44, 76, 64, 0.06), inset 0 2px 6px rgba(255, 255, 255, 0.7);
  color: #0f172a;
}

.table:before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #b0cdc5;
  border-radius: 12px;
  pointer-events: none;
}

/* Players on Table */
.players {
  display: flex;
  justify-content: center;
  gap: 18px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.player {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 130px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: all .15s ease;
}

.player.turn {
  background: #ffffff;
  border-color: #059669;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.player.turn .avatar {
  background: var(--emerald, #059669);
  color: #ffffff;
}

.player-name {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}

.player-cards {
  color: #64748b;
  font-size: 11px;
}

/* Play Field Area */
.play-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  min-height: 235px;
  padding: 24px 0 20px;
  position: relative;
}

.turn-caption {
  font-size: 12px;
  color: #475569;
  margin-bottom: 12px;
  text-align: center;
}

/* Played Substance Display */
.played {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  min-width: 240px;
  max-width: 520px;
  padding: 20px 30px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  animation: arrive .2s ease-out;
}

.played-formula {
  font: 40px/1.2 Georgia, serif;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
  color: #0f172a;
}

.played-name {
  font-size: 15px;
  color: #334155;
  font-weight: 500;
}

.played-meta {
  font: 12px monospace;
  color: #64748b;
  margin-top: 8px;
}

.center-empty {
  text-align: center;
}

.center-empty h2 {
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 1px;
  margin: 12px 0;
  color: #0f172a;
}

.center-empty p {
  color: #475569;
  font-size: 13px;
}

/* Mode B Context Atoms */
.context-atoms {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.context-atom {
  padding: 9px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: 24px Georgia, serif;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.context-atom small {
  font: 13px monospace;
  color: #64748b;
  margin-left: 5px;
}

.context-card {
  max-width: 620px;
  text-align: center;
}

.context-card .played-meta {
  color: #64748b;
}

.table-bottom {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 11px;
  position: relative;
  border-top: 1px solid #cadfd9;
  padding-top: 12px;
}

/* Turn Ribbon Banner */
.turn-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 13px 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9px;
  color: #065f46;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
}

.turn-ribbon strong {
  color: #047857;
  font-size: 14px;
  font-weight: 600;
}

.turn-ribbon span {
  font-size: 12px;
  color: #065f46;
}

/* Hand Head & Tools */
.hand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 23px 0 16px;
}

.hand-head h2 {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.hand-head h2 span {
  font: 14px monospace;
  color: var(--muted);
  margin-left: 9px;
}

.hand-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.hand-tools select {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
  border-radius: 6px;
}

.hand {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 3px 14px;
  scrollbar-color: #cbd5e1 transparent;
  min-height: 180px;
}

.element-stack {
  flex: 0 0 89px;
  position: relative;
}

.element-card {
  display: block;
  width: 100%;
  height: 125px;
  padding: 10px 10px 8px;
  background: var(--card, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  position: relative;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform .15s, box-shadow .15s;
  text-align: left;
}

.element-stack.selected .element-card {
  transform: translateY(-6px);
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.atomic-number {
  font: 10px monospace;
}

.element-symbol {
  display: block;
  font: 41px/1 Georgia, serif;
  text-align: center;
  margin: 8px 0 5px;
}

.element-name {
  display: block;
  text-align: center;
  font-size: 11px;
}

.element-mass {
  display: block;
  text-align: center;
  font: 10px/1.7 monospace;
}

.quantity {
  position: absolute;
  right: 6px;
  top: 7px;
  font: 11px monospace;
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 5px;
  border-radius: 4px;
}

.stack-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font: 11px monospace;
  color: var(--muted);
}

.stack-controls button {
  width: 25px;
  height: 25px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 17px;
  line-height: 1;
}

.stack-controls .picked {
  color: var(--emerald);
  font-weight: bold;
}

/* Composer Bar */
.composer {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 17px 20px;
  margin-top: 4px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

.composer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.selection-text {
  font-size: 14px;
  color: var(--text);
}

.selection-text small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.composer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.composer-actions .btn {
  font-size: 13px;
}

/* Match Chips */
.match-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-height: 180px;
  margin-top: 13px;
  scrollbar-color: #cbd5e1 transparent;
  padding-bottom: 4px;
}

.match {
  flex-shrink: 0;
  padding: 10px 15px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  text-align: left;
  border-radius: 8px;
  max-width: 240px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all .15s ease;
}

.match:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.match.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.match strong {
  display: block;
  font: 19px Georgia, serif;
  color: #0f172a;
}

.match.active strong {
  color: #065f46;
}

.match span {
  display: block;
  font-size: 12px;
  margin: 3px 0;
  color: #475569;
}

.match.active span {
  color: #047857;
}

.match small {
  font-size: 11px;
  color: #64748b;
}

.match.active small {
  color: #047857;
}

.quiet-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

/* Pending Note */
.pending-note {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 16px;
  color: #92400e;
  font-size: 13px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.08);
}
/* Dialogs & Modals */
dialog {
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--text);
  border-radius: 16px;
  max-width: calc(100vw - 24px);
  width: 640px;
  max-height: 92dvh;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

dialog.editor-modal {
  width: 1100px;
}

#modal-body {
  padding: 25px;
}

.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 19px;
}

.modal-heading h2 {
  font-size: 21px;
  font-weight: 600;
  color: #0f172a;
}

.close {
  width: 34px;
  height: 34px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 23px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .15s;
}

.close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Substance Library */
.search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  margin-bottom: 12px;
  border-radius: 8px;
  transition: border-color .15s, outline .15s;
}

.search:focus {
  border-color: var(--emerald);
  outline: 2px solid var(--emerald);
}

.library-list {
  max-height: 53vh;
  overflow-y: auto;
  scrollbar-color: #cbd5e1 transparent;
}

.library-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid #e2e8f0;
  background: transparent;
  width: 100%;
  text-align: left;
  color: #0f172a;
  transition: background .15s;
  border-radius: 6px;
}

.library-row:hover {
  background: #f8fafc;
}

.library-row strong {
  font: 21px Georgia;
  color: #0f172a;
}

.library-row span {
  display: block;
  font-size: 13px;
  margin-top: 3px;
  color: #334155;
}

.library-row small {
  font-size: 12px;
  color: var(--muted);
}

.detail-formula {
  font: 38px Georgia;
  margin: 20px 0;
  color: #0f172a;
}

.tag {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  margin: 4px;
}

/* Rules Handbook */
.rule-block {
  font-size: 14px;
  color: #334155;
  line-height: 1.8;
  margin-bottom: 20px;
}

.rule-block h3 {
  font-size: 16px;
  color: #0f172a;
  font-weight: 600;
  margin: 14px 0 8px;
}

/* History */
.history-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: #0f172a;
}

.history-row small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Molecular Canvas Editor */
.editor-meta {
  font-size: 12px;
  color: var(--muted);
}

.editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0;
}

.editor-tool {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all .15s;
}

.editor-tool:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.editor-tool.active {
  background: #047857;
  color: #ffffff;
  border-color: #047857;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(4, 120, 87, 0.2);
}

.tool-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
  margin: 0 4px;
}

.canvas-wrap {
  height: 430px;
  min-height: 260px;
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  touch-action: none;
}

.molecule-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}

.molecule-canvas .node {
  cursor: grab;
}

.molecule-canvas .node text {
  font: 600 17px Arial;
  pointer-events: none;
}

.molecule-canvas .node circle {
  stroke: #94a3b8;
  stroke-width: 1.5;
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06));
}

.molecule-canvas .node.active circle {
  stroke: #059669;
  stroke-width: 3;
  fill: #ecfdf5;
  filter: drop-shadow(0 0 6px rgba(5, 150, 105, 0.25));
}

.molecule-canvas .node[data-element=H] text {
  font-size: 13px;
  font-weight: 500;
}

.molecule-canvas .bond-line {
  stroke: #475569;
  stroke-width: 2.5;
  pointer-events: none;
}

.molecule-canvas .bond-hit {
  stroke: transparent;
  stroke-width: 17;
  cursor: pointer;
}

.molecule-canvas .preview-line {
  stroke: #059669;
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.canvas-hint {
  position: absolute;
  left: 13px;
  bottom: 10px;
  font-size: 11px;
  color: #64748b;
  pointer-events: none;
}

.editor-status {
  font-size: 13px;
  min-height: 23px;
  color: #475569;
  margin-top: 10px;
}

.editor-status.error {
  color: #e11d48;
  font-weight: 500;
}

.reference-box {
  background: #f8fafc;
  padding: 14px;
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
}

.reference-svg {
  width: 100%;
  height: 220px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 10px 0;
}

.reference-svg line {
  stroke: #475569;
  stroke-width: 2;
}

.reference-svg text {
  font: 15px Arial;
  fill: #0f172a;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 7px;
  stroke-linejoin: round;
}

.editor-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 16px;
}

/* Proposal & Voting Cards */
.vote-card {
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.vote-card h3 {
  font-size: 17px;
  color: #0f172a;
}

.vote-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}

.vote-buttons {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.vote-buttons [data-accept="true"],
.vote-buttons .btn.primary {
  background: #047857;
  color: #ffffff;
  border: 1px solid #047857;
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.15);
}

.vote-buttons [data-accept="true"]:hover,
.vote-buttons .btn.primary:hover {
  background: #065f46;
  border-color: #065f46;
}

.vote-buttons [data-accept="false"] {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

.vote-buttons [data-accept="false"]:hover {
  background: #ffe4e6;
  color: #9f1239;
  border-color: #fda4af;
}

.result {
  font-size: 30px;
  margin: 20px 0;
  color: #0f172a;
}

.error-banner {
  border: 1px solid #fecdd3;
  color: #9f1239;
  background: #fff1f2;
  padding: 13px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 15px;
}

#toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #059669;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 30;
  max-width: 90vw;
  transition: .18s;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1450px){.table{min-height:410px}.play-field{min-height:280px}.hand{justify-content:center}}@media(max-width:800px){.topbar{height:63px;padding:0 15px}.brand{gap:8px}.brand strong{font-size:18px}.brand-note,.connection,.edition{display:none}.top-actions{gap:0}.top-actions .quiet{font-size:12px;padding:8px}.logo{width:32px;height:32px;font-size:23px;line-height:32px}#root{padding:17px 14px}.welcome{margin:16px 0}.welcome-title h1{font-size:29px}.welcome-title{margin-bottom:22px}.entrances{grid-template-columns:1fr}.entrance{padding:22px}.lobby-grid{grid-template-columns:1fr}.lobby-head{align-items:flex-end}.room-code{font-size:32px}.lobby-panel{padding:19px}.lobby-footer{align-items:flex-start;flex-direction:column}.lobby-footer>.btn{width:100%}.game-header{gap:8px;align-items:flex-start}.game-title{gap:8px}.game-title h1{font-size:17px}.game-controls{gap:0}.game-controls .quiet{font-size:11px;padding:7px}.room-label{font-size:10px}.table{padding:12px 10px;min-height:310px;border-radius:12px}.table:before{inset:6px}.players{gap:4px}.player{min-width:0;padding:6px;gap:6px}.player .avatar{width:30px;height:30px;border-radius:8px;font-size:13px}.player-name{font-size:11px}.player-cards{font-size:10px}.play-field{min-height:218px;padding:18px 0;gap:12px}.played{min-width:200px;padding:18px 24px;max-width:100%}.played-formula{font-size:34px}.table-bottom{font-size:10px;gap:7px;padding:10px 4px 0}.context-atom{font-size:22px;padding:8px 10px}.turn-ribbon{padding:10px 12px;margin-top:12px;gap:8px}.turn-ribbon span{font-size:10px}.turn-ribbon strong{font-size:12px}.hand-head{margin-top:18px;margin-bottom:10px}.hand-head h2{font-size:14px}.hand-tools{gap:1px}.hand-tools .quiet{font-size:11px;padding:5px}.hand-tools select{font-size:10px;padding:5px}.hand{gap:10px;min-height:162px}.element-stack{flex-basis:74px}.element-card{height:111px;padding:7px}.element-symbol{font-size:35px;margin-top:9px}.element-name{font-size:10px}.composer{padding:13px}.composer-top{flex-direction:column;align-items:stretch;gap:12px}.composer-actions{justify-content:space-between}.composer-actions .btn{padding:10px 15px}.composer-actions .primary{flex:1}.selection-text{font-size:13px}.match-list{margin-top:11px}.match{padding:8px 11px}.match strong{font-size:18px}#modal-body{padding:17px}.modal-heading h2{font-size:18px}.canvas-wrap{height:360px}.editor-toolbar{gap:5px}.editor-tool{padding:7px 9px;font-size:11px}.tool-divider{margin:0 1px}.editor-bottom{align-items:stretch;flex-direction:column}.editor-bottom .btn{width:100%}.editor-meta{font-size:11px}.reference-svg{height:180px}.pending-note{font-size:12px;padding:10px}.practice-line{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:root .element-card:disabled{opacity:1;cursor:default}.stack-controls>span{white-space:nowrap;font-size:10px}@media(max-width:800px){.hand .stack-controls button{width:20px;height:24px;flex:0 0 20px}.hand .stack-controls{gap:2px}}