.test-scope { margin:-8px 0 22px; padding:12px 16px; border-left:2px solid var(--gold); color:#bfb393; font-size:12px; line-height:1.6; background:#d4bb8207; }
.test-badge { color:#e2cc9a; border-color:#d4bb8255; }
.test-badge:not(.legacy-badge) { color:var(--mint); border-color:#a1e7c74d; }
.catalog-panel { border:1px solid var(--line); border-radius:12px; background:#0b1e22; margin:20px 0; }
.catalog-panel>summary { padding:16px 21px; font-size:13px; }
.catalog-content { padding:0 21px 22px; }
.catalog-section,.catalog-notes { margin-top:21px; }
.catalog-section h3,.catalog-notes h3 { font-size:14px; font-weight:500; color:#cadacf; margin:0 0 12px; }
.catalog-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.catalog-card { border:1px solid var(--line); border-radius:10px; padding:17px; background:linear-gradient(130deg,#16352b,#102428); }
.catalog-card h4 { font-family:Georgia,serif; font-weight:400; font-size:20px; color:#e0e9d6; margin:0 0 9px; }
.catalog-card p { font-size:12px; color:#a9beb1; line-height:1.65; margin:0 0 11px; }
.catalog-card-count { display:block; font-size:10px; color:#c2ca97; }
.catalog-card.equipment-card { background:#101f2a; }
.equipment-card .catalog-card-count { color:#8fb9cf; }
.composition-table { border-collapse:collapse; width:100%; font-size:12px; text-align:left; }
.composition-table th,.composition-table td { padding:10px 12px; border-bottom:1px solid var(--line); }
.composition-table th { font-weight:500; color:#bcd2c4; }
.composition-table td { color:#9db5a8; }
.composition-table thead { background:#a1e7c708; }
.catalog-note { color:var(--muted); font-size:12px; line-height:1.7; margin:13px 0 0; }
.catalog-notes { border-top:1px solid var(--line); padding-top:18px; }
.catalog-notes ul { font-size:12px; line-height:1.7; color:#a1b8ad; padding-left:20px; margin:0; }
.catalog-notes li+li { margin-top:6px; }
.equipment-items { display:grid; gap:8px; margin-top:10px; }
.equipped-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#101f2566; }
.equipped-item strong { font-size:11px; font-weight:500; color:#c3d6cc; }
.equipped-item p { font-size:10px; line-height:1.5; margin:3px 0 0; color:var(--muted); }
.equipment-exchange { padding:6px 8px; font-size:9px; flex-shrink:0; }
.equipment-totals { font-size:9px; color:#9fc8b3; line-height:1.6; margin:10px 0 0; }
.equipment-exchange-help { font-size:9px; margin-bottom:0; }
.public-equipment { color:#b4c6c0; }
.salon-home { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1000px; margin:30px auto 50px; }
.salon-card { border:1px solid var(--line); border-radius:16px; padding:30px; background:linear-gradient(135deg,#122b29,#0b1d22); }
.salon-card h2 { font-family:Georgia,serif; font-size:29px; letter-spacing:-.7px; font-weight:400; margin:8px 0 12px; }
.salon-card>p:not(.eyebrow),.salon-card>div>p:not(.eyebrow) { color:var(--muted); line-height:1.7; font-size:13px; }
.salon-card label { display:block; margin:17px 0 7px; color:#c1d4c7; font-size:12px; }
.salon-card input,.room-toolbar input { width:100%; min-height:44px; border:1px solid #a3c3b53d; border-radius:7px; background:#08191da6; color:var(--text); padding:10px 12px; font-size:15px; }
.salon-card input:focus { border-color:var(--mint); }
.salon-card form>.button { width:100%; margin-top:23px; min-height:43px; }
#join-code { text-transform:uppercase; letter-spacing:3px; font-family:Consolas,monospace; }
.resume-card { grid-column:1/-1; }
#resume-list { display:flex; flex-wrap:wrap; gap:10px; }
.resume-card h2 { font-size:23px; }
.resume-card .help { font-size:11px; margin-bottom:0; }
.room-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:17px 21px; margin-bottom:20px; background:#0e2527; border:1px solid var(--line); border-radius:12px; }
.room-toolbar>div:first-child { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
#room-code { font:22px Consolas,monospace; letter-spacing:4px; color:var(--mint); }
#member-count { font-size:12px; color:var(--muted); }
.room-tools { display:flex; gap:8px; flex-wrap:wrap; }
.room-tools .button { font-size:11px; }
#invite-fallback { width:100%; }
#invite-fallback label { display:block; margin:4px 0 7px; font-size:11px; color:var(--muted); }
#invite-link { font-size:12px; }
.lobby-card { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:35px; min-height:360px; }
#member-list { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.member-row { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#0a1d204f; }
.member-name { overflow-wrap:anywhere; min-width:0; }
.member-row .avatar { flex-shrink:0; }
.member-row .you-label { margin:0; }
.member-host { color:var(--gold); font-size:9px; margin-left:auto; }
.lobby-start { border-left:1px solid var(--line); padding-left:30px; text-align:center; align-self:center; }
.lobby-orbit { display:block; font-size:74px; line-height:1.2; color:#97c9b2; text-shadow:0 0 60px #a1e7c740; }
.lobby-start .button { width:100%; margin-top:15px; }
.lobby-start .help { font-size:10px; }
.connection-lost { color:var(--coral)!important; }
#connection-status { max-width:280px; }
.your-turn.waiting { color:var(--muted); background:transparent; border-color:var(--line); }
.active-marker { font-size:9px; color:var(--mint); margin-left:6px; }
.roster-name,.player-heading h2 { overflow-wrap:anywhere; }
#feedback { margin-bottom:18px; }
.session-meta { max-width:none; }
.setup-panel { border:1px solid var(--line); border-radius:18px; padding:26px; margin:20px 0; background:linear-gradient(135deg,#112d2b,#0b1e24 70%); }
.setup-progress { display:flex; flex-wrap:wrap; gap:12px 28px; list-style:none; padding:0 0 20px; margin:0 0 23px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.setup-progress li.current { color:var(--mint); }
.setup-progress li.completed { color:#a8bfae; }
.setup-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.setup-heading h2 { margin:7px 0 11px; font:400 34px Georgia,serif; letter-spacing:-.7px; }
.setup-heading p:not(.eyebrow) { color:#b0c7bd; font-size:13px; line-height:1.7; margin-bottom:20px; }
.setup-symbol { font-size:65px; color:#a1e7c78a; padding:0 20px; }
.setup-intro { color:#bbcec4; font-size:13px; line-height:1.75; max-width:850px; }
.setup-content-note { color:var(--muted); font-size:12px; line-height:1.65; }
.roll-results { padding:0; margin:22px 0; list-style:none; display:grid; gap:10px; }
.roll-result { display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid var(--line); border-radius:10px; padding:14px 18px; background:#08191c66; }
.roll-player { display:flex; align-items:center; gap:13px; min-width:0; }
.roll-player strong { overflow-wrap:anywhere; font-weight:500; }
.roll-rank { color:var(--mint); font:24px Georgia,serif; min-width:25px; }
.roll-dice { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.setup-die { display:grid; place-items:center; width:38px; height:38px; border:1px solid #a1e7c74d; border-radius:8px; background:#244537; color:#daefce; font-size:20px; }
.reroll-arrow { color:var(--muted); font-size:12px; }
.reroll-needed { color:var(--gold); font-size:10px; }
.initiative-character { display:block; margin-top:3px; color:#a1bbae; font-size:11px; }
#initiative-config-form { padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:20px 0; }
#initiative-config-form h3 { margin:0 0 8px; font-size:15px; font-weight:500; }
.initiative-dice-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin:18px 0; }
.initiative-die-field label { display:block; font-size:12px; color:#c5d8cc; margin-bottom:8px; overflow-wrap:anywhere; }
.initiative-die-field select { width:100%; min-height:44px; padding:9px 12px; border:1px solid #a1e7c73d; border-radius:7px; color:var(--text); background:#0b2024; }
.setup-action { display:flex; align-items:center; gap:20px; }
.setup-action>.button { flex-shrink:0; min-height:44px; }
.setup-action>.help { font-size:12px; max-width:590px; margin:0; }
.draft-order { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:22px 0; }
.draft-order>li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 8px; padding:12px; border:1px solid var(--line); border-radius:9px; color:var(--muted); flex:1 1 160px; font-size:11px; }
.draft-order>li strong { font-size:12px; font-weight:500; color:#c9d9cf; overflow-wrap:anywhere; }
.draft-order>li span:last-child { grid-column:2; }
.draft-order>li.current { border-color:#a1e7c780; background:#a1e7c70c; color:var(--mint); }
.draft-rank { grid-row:1/3; color:var(--gold); font:20px Georgia,serif; }
.character-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:20px 0; }
.character-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0; padding:22px 13px; min-height:172px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(155deg,#1b3733,#10242a); color:var(--text); transition:border-color .15s,background .15s; }
.character-card:hover:not(:disabled),.character-card.is-selected { border-color:var(--mint); background:linear-gradient(155deg,#254b3e,#132e30); }
.character-card.is-selected { box-shadow:0 0 0 1px var(--mint) inset; }
.character-card strong { font:400 20px Georgia,serif; overflow-wrap:anywhere; }
.character-monogram { display:grid; place-items:center; width:58px; height:58px; border:1px solid #bce8c33b; border-radius:50%; color:#c4d9b5; font:24px Georgia,serif; background:#97c9b208; }
.character-availability { color:#a8c4b2; font-size:10px; line-height:1.5; }
.character-card:disabled { opacity:.65; }
.character-card.is-taken { opacity:.5; background:#09191d; }
.draft-confirmation { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:17px 0 0; border-top:1px solid var(--line); }
.draft-confirmation p { color:#bfcebd; font-size:12px; }
.draft-confirmation .button { min-height:44px; flex-shrink:0; }
.preparation-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:12px 0 26px; }
.preparation-card { border:1px solid var(--line); border-radius:13px; padding:22px; background:#0b1c2166; }
.preparation-number { font:28px Georgia,serif; color:#a1e7c77a; }
.preparation-card h3 { margin:12px 0 17px; font:400 23px Georgia,serif; }
.preparation-lead { display:block; color:var(--mint); font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.preparation-card p { color:#9db8ad; font-size:12px; line-height:1.8; margin-bottom:0; }
.preparation-bottom { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; padding-top:20px; border-top:1px solid var(--line); }
.preparation-bottom h3 { font-size:14px; font-weight:500; }
.preparation-bottom .setup-action { flex-direction:column; align-items:stretch; }
.ready-list { list-style:none; padding:0; display:grid; gap:8px; }
.ready-list li { display:flex; align-items:center; gap:10px; font-size:12px; color:#b6c5bf; }
.ready-marker { color:var(--muted); }
.is-ready .ready-marker,.is-ready .ready-state { color:var(--mint); }
.ready-state { font-size:10px; color:var(--muted); margin-left:auto; }
.turn-guide { border:1px solid #a1e7c72b; background:#132d2b; border-radius:13px; padding:18px 22px; margin:22px 0 15px; }
.turn-guide-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.turn-guide-heading h2 { font:400 23px Georgia,serif; margin:4px 0; }
.turn-guide-heading .eyebrow { font-size:8px; margin:0; }
.turn-guide-heading button { flex-shrink:0; font-size:11px; }
#turn-guide-context { color:#b7d1bf; font-size:12px; margin:14px 0; }
#turn-guide-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:19px; }
#turn-guide-steps>li { display:flex; gap:10px; align-items:flex-start; }
.guide-step-number { width:23px; height:23px; display:grid; place-items:center; flex-shrink:0; font-size:11px; color:var(--mint); border:1px solid #a1e7c736; border-radius:50%; }
#turn-guide-steps strong { font-size:11px; font-weight:500; color:#cfddd4; }
#turn-guide-steps p { font-size:11px; color:#99b2a8; line-height:1.7; margin:5px 0 0; }
#turn-guide-steps>li.done .guide-step-number { background:#a1e7c71a; }
.playing-order { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:15px 0 22px; }
.playing-order>.eyebrow { font-size:9px; }
#playing-order { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
#playing-order>li { display:grid; grid-template-columns:18px auto auto; align-items:center; gap:0 6px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:#93aaa0; font-size:9px; }
#playing-order>li strong { font-size:11px; font-weight:500; color:#b8cec1; overflow-wrap:anywhere; }
#playing-order>li>span:nth-child(3) { grid-row:2; grid-column:2/4; }
#playing-order>li.current { border-color:#a1e7c767; background:#a1e7c707; }
.turn-order-number { grid-row:1/3; color:var(--gold); font-size:12px; }
.order-current { color:var(--mint); font-size:9px; }
.roster-character { font-size:10px; color:#a8c6b4; margin:2px 0; }
.player-heading .character-name { color:var(--mint); margin:3px 0; font-size:12px; }
@media(max-width:800px) {
  .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .preparation-steps { grid-template-columns:1fr; }
  .preparation-card { padding:20px; }
  #turn-guide-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-cards { grid-template-columns:1fr; }
  .salon-home { gap:16px; }
  .salon-card { padding:23px; }
  .salon-card h2 { font-size:26px; }
  .lobby-card { grid-template-columns:minmax(0,1fr) 210px; gap:22px; }
  .lobby-start { padding-left:22px; }
  #member-list { grid-template-columns:1fr; }
  .intro { gap:15px; }
  .session-meta { max-width:220px; }
}
@media(max-width:650px) {
  .initiative-dice-fields { grid-template-columns:1fr; }
  .setup-panel { padding:19px 16px; }
  .setup-heading h2 { font-size:27px; }
  .setup-symbol { display:none; }
  .setup-progress { gap:10px 17px; font-size:10px; }
  .setup-action,.draft-confirmation { flex-direction:column; align-items:stretch; gap:12px; }
  .roll-result { padding:12px; gap:10px; }
  .roll-player { gap:8px; font-size:12px; }
  .roll-rank { min-width:16px; font-size:20px; }
  .setup-die { width:28px; height:32px; font-size:16px; }
  .roll-dice { gap:5px; }
  .character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .character-card { min-height:153px; padding:17px 10px; }
  .character-card strong { font-size:19px; }
  .draft-order>li { flex-basis:130px; }
  .draft-confirmation .button { width:100%; }
  .preparation-bottom { grid-template-columns:1fr; gap:10px; }
  .ready-state { flex-shrink:0; }
  .turn-guide { padding:16px; }
  .turn-guide-heading { align-items:flex-start; gap:12px; }
  .turn-guide-heading h2 { font-size:21px; }
  .turn-guide-heading button { font-size:9px; padding:8px; }
  #turn-guide-steps { grid-template-columns:1fr; gap:13px; }
  .equipment-items,.equipment-totals,.equipment-exchange-help { grid-column:1/-1; }
  .catalog-content { padding:0 16px 18px; }
  .catalog-panel>summary { padding:15px 16px; flex-wrap:wrap; gap:5px; }
  .catalog-card { padding:15px; }
  .composition-table th,.composition-table td { padding:9px 7px; }
  .composition-table { font-size:11px; }
  .equipment-totals,.equipment-exchange-help { font-size:10px; }
  .salon-home,.lobby-card { grid-template-columns:1fr; }
  .salon-home { margin-top:20px; }
  .salon-card { padding:23px 20px; }
  .resume-card { grid-column:auto; }
  .lobby-start { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; }
  .lobby-orbit { font-size:50px; }
  .room-toolbar { padding:16px; }
  .room-tools { width:100%; }
  .room-tools .button { flex:1; }
  .test-scope { font-size:11px; margin-top:0; }
  .session-meta { max-width:none; align-items:flex-start; }
  #connection-status { flex-basis:100%; font-size:10px; text-align:left; }
}