/* Mysterium Coniunctionis — MC-R1.0 rules + visual refinement
   Visual intent: retain the room's severe Hg instrument language while borrowing
   Harmonic Cartography's nested smoked-glass hierarchy and Celestial Mechanics'
   editorial cadence / breathing room. */

body.mysterium-room{
  --mc-glass:rgba(9,14,17,.86);
  --mc-glass-deep:rgba(3,7,9,.94);
  --mc-keyline:rgba(174,203,210,.16);
  --mc-keyline-soft:rgba(174,203,210,.085);
  --mc-gold-line:rgba(213,173,97,.30);
  --mc-cyan-line:rgba(145,218,232,.22);
  background:
    radial-gradient(ellipse at 20% 5%,rgba(68,111,137,.13),transparent 34rem),
    radial-gradient(ellipse at 80% 36%,rgba(200,154,72,.07),transparent 34rem),
    linear-gradient(180deg,#020405 0%,#05090b 48%,#020304 100%);
}

.mysterium-shell{padding-top:clamp(28px,3vw,48px)}

.mysterium-masthead{
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--mc-keyline);
  border-radius:20px;
  margin-bottom:10px;
  padding:clamp(22px,3vw,36px);
  background:
    radial-gradient(ellipse at 17% 54%,rgba(145,218,232,.075),transparent 29rem),
    radial-gradient(ellipse at 66% -20%,rgba(213,173,97,.065),transparent 26rem),
    linear-gradient(115deg,rgba(11,17,20,.93),rgba(3,7,9,.96) 72%);
  box-shadow:0 30px 90px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
}
.mysterium-masthead::before,.mysterium-masthead::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(145,218,232,.08);
  border-radius:50%;
}
.mysterium-masthead::before{width:560px;height:190px;right:19%;top:13%;transform:rotate(-9deg)}
.mysterium-masthead::after{width:300px;height:300px;right:27%;top:-96px;border-color:rgba(213,173,97,.09)}
.mysterium-title-mark{width:58px;height:76px;border:1px solid rgba(213,173,97,.17);border-radius:50%;background:radial-gradient(circle,rgba(213,173,97,.07),transparent 68%)}
.mysterium-masthead h1{letter-spacing:.055em;max-width:900px}
.mysterium-subtitle{color:#ddd4c4}
.mysterium-masthead-actions{flex-wrap:wrap;justify-content:flex-end;max-width:560px}
.mysterium-masthead-actions button{border-radius:7px;background:rgba(3,8,10,.55);backdrop-filter:blur(8px)}

.mysterium-rule-status{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin:0 0 14px;
  overflow:hidden;
  border:1px solid var(--mc-keyline);
  border-radius:12px;
  background:var(--mc-keyline-soft);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.mysterium-rule-status>div,.mysterium-rule-status>button{
  appearance:none;
  border:0;
  min-width:0;
  min-height:56px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:10px 14px;
  text-align:left;
  color:inherit;
  background:linear-gradient(180deg,rgba(8,13,15,.96),rgba(3,7,9,.96));
}
.mysterium-rule-status>button{cursor:pointer}
.mysterium-rule-status>button:hover,.mysterium-rule-status>button:focus-visible{outline:none;background:linear-gradient(180deg,rgba(20,20,16,.95),rgba(5,9,10,.96));box-shadow:inset 0 0 0 1px rgba(213,173,97,.28)}
.mysterium-rule-status span{color:#6f8589;font:700 7px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
.mysterium-rule-status strong{overflow:hidden;text-overflow:ellipsis;color:#bdc9ca;font:700 9px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.09em;text-transform:uppercase}
.mysterium-rule-status>button strong{color:#dfc47f}

.instrument-grid{gap:14px}
.bead-library,.conjunction-card,.conjunction-field{
  border-color:var(--mc-keyline);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(11,17,20,.91),rgba(4,8,10,.96)),
    var(--mc-glass);
  box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.02);
}
.bead-library,.conjunction-card{overflow:hidden}
.bead-library::before,.conjunction-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:86px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(145,218,232,.025),transparent);
}
.conjunction-field{border-color:rgba(213,173,97,.21)}
.field-head,.panel-head{position:relative;z-index:2}
.orbital-stage{
  margin:0 10px 10px;
  border:1px solid rgba(145,218,232,.08);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 51%,rgba(220,178,91,.09),transparent 22%),
    radial-gradient(circle at 50% 54%,rgba(92,152,175,.075),transparent 50%),
    linear-gradient(rgba(145,218,232,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(145,218,232,.014) 1px,transparent 1px),
    #020506;
  background-size:auto,auto,48px 48px,48px 48px,auto;
  box-shadow:inset 0 0 100px rgba(0,0,0,.44),0 20px 50px rgba(0,0,0,.25);
}
.orbital-stage::before,.orbital-stage::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
  width:38px;height:38px;
  opacity:.55;
}
.orbital-stage::before{left:15px;top:15px;border-left:1px solid rgba(213,173,97,.35);border-top:1px solid rgba(213,173,97,.35)}
.orbital-stage::after{right:15px;bottom:15px;border-right:1px solid rgba(145,218,232,.28);border-bottom:1px solid rgba(145,218,232,.28)}
.field-legend{margin:0 10px 10px;border-radius:9px;border:1px solid rgba(174,203,210,.08);background:rgba(0,0,0,.19)}
.bead-search input{border-radius:8px;background:rgba(1,4,5,.75)}
.library-bead{border-radius:9px;padding-left:5px;padding-right:5px}
.library-bead:hover,.library-bead:focus-visible{background:linear-gradient(90deg,rgba(145,218,232,.07),rgba(213,173,97,.025),transparent)}
.conjunction-card .analysis-body section{border-radius:8px}

.mysterium-transport{
  border-radius:12px;
  border:1px solid var(--mc-keyline);
  background:linear-gradient(180deg,rgba(8,13,15,.82),rgba(3,7,9,.9));
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.mysterium-transport button{border-radius:7px}
.mysterium-law{gap:10px}
.mysterium-law>div{border:1px solid rgba(174,203,210,.095);border-top-color:rgba(213,173,97,.26);border-radius:12px;background:linear-gradient(180deg,rgba(9,14,17,.78),rgba(3,7,9,.82));padding:18px}

.play-deck{
  overflow:hidden;
  border:1px solid var(--mc-keyline);
  border-radius:18px;
  margin:0 0 14px;
  box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.play-deck-head,.challenge-brief,.move-workbench,.move-ledger{background:linear-gradient(180deg,rgba(8,13,15,.97),rgba(3,7,9,.97))}
.challenge-brief{position:relative}
.challenge-brief::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(213,173,97,.24),transparent)}
.game-type-tabs button,.challenge-actions button,.ledger-head button,.break-options button,.commit-move,.play-end-actions button{border-radius:7px}
.constellation-checklist{border-radius:10px}

.mysterium-dialog{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0b1012,#040708);box-shadow:0 50px 160px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.025)}
.rules-dialog{width:min(1100px,calc(100% - 28px));max-height:calc(100vh - 32px);overflow:auto}
.rules-dialog form{padding:clamp(24px,4vw,46px)}
.rules-dialog h2{font-size:clamp(2rem,4vw,3.8rem);letter-spacing:.015em;margin-bottom:10px}
.rules-lede{max-width:900px;font:400 clamp(.92rem,1.4vw,1.05rem)/1.65 Georgia,serif!important;color:#c6c2b8!important}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.rules-grid section,.rules-challenges article{position:relative;border:1px solid rgba(174,203,210,.11);border-radius:12px;background:linear-gradient(150deg,rgba(145,218,232,.025),rgba(213,173,97,.018),rgba(0,0,0,.08));padding:17px 18px}
.rules-grid h3,.rules-challenges h3,.saved-group>h3{margin:0 0 9px;color:#d4b66f;font:700 9px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}
.rules-grid p,.rules-challenges p{margin:0;color:#aeb9b9;font-size:13px;line-height:1.62}
.rules-grid ol{margin:0;padding-left:19px;color:#aeb9b9;font-size:13px;line-height:1.65}
.rules-grid strong{color:#d7d4ca;font-weight:600}
.rules-challenges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0 22px}
.rules-challenges article{min-height:220px;padding-top:44px}
.rules-challenges article>span{position:absolute;left:17px;top:16px;color:#789095;font:700 8px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em}
.rules-challenges article::after{content:"";position:absolute;left:17px;right:17px;top:32px;height:1px;background:linear-gradient(90deg,rgba(213,173,97,.31),transparent)}
.rules-grid-lower{margin-top:0}
.saved-dialog{width:min(780px,calc(100% - 28px));max-height:calc(100vh - 32px);overflow:auto}
.saved-group{display:grid;gap:7px}
.saved-group+ .saved-group{margin-top:18px;padding-top:16px;border-top:1px solid rgba(174,203,210,.1)}
.saved-item{border-radius:9px;background:linear-gradient(180deg,rgba(8,13,15,.85),rgba(2,5,7,.9))}
.saved-game{border-color:rgba(213,173,97,.16)}
.saved-item button:first-child{min-width:0}
.saved-item strong{overflow-wrap:anywhere}

@media(max-width:1200px){
  .mysterium-rule-status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rules-challenges{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .mysterium-masthead{grid-template-columns:auto 1fr}
  .mysterium-masthead-actions{grid-column:1/-1;justify-content:flex-start;max-width:none;padding-top:2px}
  .rules-grid{grid-template-columns:1fr}
  .rules-challenges{grid-template-columns:1fr 1fr}
  .rules-challenges article{min-height:0}
}
@media(max-width:820px){
  .mysterium-rule-status{order:2;grid-template-columns:1fr 1fr}
  .play-deck-head{order:3}
  .first-play{order:4}.challenge-brief{order:5}.conjunction-field{order:6!important}.bead-library{order:7!important}.move-workbench{order:8}.move-ledger{order:9}.conjunction-card{order:10!important}.mysterium-transport{order:11!important}.mysterium-law{order:12!important}.mysterium-footer{order:13!important}
  .orbital-stage{margin:0 7px 7px}
}
@media(max-width:600px){
  .mysterium-masthead{grid-template-columns:1fr;padding:20px}
  .mysterium-title-mark{display:none}
  .mysterium-masthead-actions{grid-column:auto}
  .mysterium-rule-status{grid-template-columns:1fr}
  .mysterium-rule-status>div,.mysterium-rule-status>button{min-height:52px}
  .rules-challenges{grid-template-columns:1fr}
  .rules-dialog form{padding:22px 18px}
}

.challenge-actions button[hidden]{display:none!important}


/* MC conceptual layer — symbolic geometry + chamber keeper */
.mysterium-symbolic-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin:0 0 14px}
.symbolic-card{position:relative;overflow:hidden;border:1px solid var(--mc-keyline);border-radius:18px;background:linear-gradient(180deg,rgba(11,17,20,.93),rgba(4,8,10,.97));box-shadow:0 26px 80px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.02);padding:20px 20px 18px}
.symbolic-card::before{content:"";position:absolute;inset:0 0 auto;height:96px;pointer-events:none;background:linear-gradient(180deg,rgba(145,218,232,.025),transparent)}
.symbolic-head{position:relative;z-index:1;max-width:52rem}
.symbolic-kicker{margin:0 0 8px;color:#90a8ad;font:700 11px/1.35 ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
.symbolic-card h2{margin:0;color:#ece6d8;font:400 clamp(1.45rem,2.6vw,2.15rem)/1.08 Georgia,serif}
.symbolic-lede{margin:10px 0 0;color:#bfc3bc;font:400 1rem/1.55 Georgia,serif}
.symbolic-lede strong{color:#ddd5c7}
.symbolic-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.symbolic-tags span{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid rgba(213,173,97,.2);border-radius:999px;background:rgba(213,173,97,.05);color:#d0b77a;font:700 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.geometry-visual,.keeper-visual{margin-top:16px;border:1px solid rgba(174,203,210,.09);border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(145,218,232,.045),transparent 42%),linear-gradient(180deg,rgba(4,8,10,.86),rgba(2,5,7,.96));box-shadow:inset 0 0 70px rgba(0,0,0,.36)}
.geometry-visual{padding:12px}
.geometry-visual svg,.keeper-visual svg{display:block;width:100%;height:auto}
.geometry-visual .plane rect{fill:rgba(6,10,12,.58);stroke:rgba(145,218,232,.2)}
.geometry-visual .plane-back rect{stroke:rgba(145,218,232,.15)}
.geometry-visual .plane-mid rect{stroke:rgba(174,203,210,.18)}
.geometry-visual .plane-front rect{stroke:rgba(213,173,97,.28)}
.geometry-visual .dots circle{fill:#d8c186;stroke:rgba(255,255,255,.06);stroke-width:1}
.geometry-visual .plane-back .dots circle{fill:rgba(145,218,232,.7)}
.geometry-visual .plane-mid .dots circle{fill:rgba(226,213,176,.8)}
.geometry-visual text{fill:#92a9ae;font:700 14px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em}
.geometry-visual .axis path{fill:none;stroke:rgba(213,173,97,.45);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.geometry-visual .axis-y path,.geometry-visual .axis-z path{stroke:rgba(145,218,232,.35)}
.geometry-visual .axis text{fill:#d2b97f}
.keeper-visual{padding:18px}
.keeper-visual .halo circle{fill:none;stroke:rgba(145,218,232,.14);stroke-width:1.4}
.keeper-visual .figure circle,.keeper-visual .figure path{fill:none;stroke:rgba(223,192,121,.82);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.keeper-visual .figure path:nth-child(3){stroke:rgba(145,218,232,.55)}
.keeper-visual .bow path,.keeper-visual .bow circle{fill:none;stroke:rgba(145,218,232,.78);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.keeper-visual .stars circle,.keeper-visual .stars path{fill:none;stroke:rgba(223,192,121,.72);stroke-width:1.5;stroke-linecap:round}
.keeper-notes{display:grid;gap:10px;margin-top:14px}
.keeper-notes p{margin:0;color:#b4bbbc;font-size:14px;line-height:1.62}
.keeper-notes strong{color:#ded8ca}
@media(max-width:980px){.mysterium-symbolic-grid{grid-template-columns:1fr}.geometry-visual text{font-size:12px}}
@media(max-width:560px){.symbolic-card{padding:16px}.geometry-visual,.keeper-visual{padding:10px}.symbolic-tags span{font-size:10px}}

/* MC-R3 Hermetic Navigator visual pass — beaded celestial bow hero */
.mysterium-masthead{position:relative;overflow:hidden;isolation:isolate}
.mysterium-hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(3,6,8,.9) 0%,rgba(3,6,8,.45) 46%,rgba(3,6,8,.12) 100%),url('assets/hermetic-navigator-beaded-bow-hero.png');background-size:cover;background-position:center top;opacity:.58;z-index:-1;pointer-events:none}
.mysterium-masthead>*:not(.mysterium-hero-art){position:relative}
.mysterium-masthead h1,.mysterium-masthead .mysterium-subtitle{ text-shadow:0 2px 24px rgba(0,0,0,.8)}