/* 2Fold — self-contained itch.io HTML5 build. */

:root{
  --purple:#a855f7;
  --bg-overlay: rgba(248,250,252,0.82);
  --panel: rgba(255,255,255,0.92);
  --text: #0f172a;
  --text2:#334155;
  --muted:#64748b;
  --muted2:#94a3b8;
  --red:#f43f5e;
  --blue:#0ea5e9;
  --indigo:#4f46e5;
  --shadow: 0 20px 50px rgba(2,6,23,0.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); }
body{ background:#93c5fd; }
#root{ min-height:100%; }



.brand{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0.95;
}

.brand .brand-text{ line-height:1.05; }
.brand .brand-text .name{
  font-weight:900;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.85);
}
.brand .brand-text .sub{
  font-weight:700;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.85);
}



.btn{
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.95);
  color: rgba(15,23,42,0.9);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, color .15s ease;
  user-select:none;
}
.btn:active{ transform: scale(0.98); }
.btn.secondary{ background: rgba(15,23,42,0.92); color:white; border:none; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }
.btn.red{ background: rgba(244,63,94,0.92); color:white; border:none; }
.btn.blue{ background: rgba(14,165,233,0.92); color:white; border:none; }
.btn.indigo{ background: rgba(79,70,229,0.92); color:white; border:none; }

.select{
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
}


/* Grid */
.gridWrap{
  margin-top: 14px;
  border-radius: 18px;
  overflow:hidden;
  border: 4px solid rgba(226,232,240,0.92);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,0.9);
}
.grid{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  aspect-ratio: 1 / 1;
}
.cell{
  border: 1px solid rgba(226,232,240,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background: rgba(255,255,255,0.95);
  transition: background .12s ease, transform .08s ease;
}
.cell:hover{ background: rgba(248,250,252,0.95); }
.cell:active{ transform: scale(0.985); }
.cell.locked{ cursor: default; }


/* Icons */
.svgIcon{ width: 80%; height: 80%; }

/* Modal */
.modalBack{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
  z-index: 50;
}
.modal{
  width: min(420px, 92vw);
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(226,232,240,0.9);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.modal .content{ padding: 18px; }
.modal h3{ margin:0 0 8px 0; font-size: 20px; font-weight: 900; color: rgba(15,23,42,0.95); }
.modal .footer{
  padding: 12px;
  background: rgba(248,250,252,0.95);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 420px){
h1{ font-size: 30px; }
}


/* Purple (inert) tiles */
.cell.purple{ background: rgba(168,85,247,0.08); }



/* --- New menu + HUD additions --- */
.menuWrap{
  min-height: calc(100vh - 40px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.menuCard{
  width: min(520px, 96vw);
  background: var(--panel);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.menuCard.wide{ width: min(720px, 96vw); }
.menuBrand{ margin-bottom: 10px; }
.menuTitle{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 12px;
}
.label{ font-weight: 800; color: var(--text2); width: 120px; font-size: 13px; }
.input, .select{
  flex:1;
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.9);
}
.menuButtons{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.profileBadge{
  display:flex;
  gap: 12px;
  align-items:center;
  border:1px solid rgba(226,232,240,0.9);
  background: rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 10px 12px;
  margin: 10px 0 14px;
}
.portrait{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(15,23,42,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
}
.profileMeta{ flex:1; }
.profileName{ font-weight: 950; font-size: 14px; }
.profileSub{ font-weight: 800; color: var(--muted); font-size: 12px; margin-top: 2px; }

.topBar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.9);
  border:1px solid rgba(226,232,240,0.9);
  border-radius: 18px;
  margin-bottom: 10px;
}
.topLeft{ display:flex; gap:10px; align-items:center; }
.status .turn{ font-weight: 950; font-size: 13px; text-align:center; }
.status .sub{ font-weight: 800; font-size: 12px; color: var(--muted); text-align:center; }

.scores{ display:flex; gap:8px; }
.bottomHud{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
  flex-wrap: wrap;
}
.purpleToggle.armed{
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.55);
  color: rgba(88,28,135,0.95);
}
.powerBar{
  display:flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.powerBtn{
  flex:1;
  border-radius: 16px;
  padding: 8px 10px;
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.95);
  cursor:pointer;
  text-align:left;
  user-select:none;
}
.powerBtn.ready{
  box-shadow: inset 0 0 0 2px rgba(79,70,229,0.16);
}
.powerBtn .pName{ font-weight: 950; font-size: 12px; }
.powerBtn .pCost{ font-weight: 900; font-size: 11px; color: var(--muted); margin-top: 2px; }

.powerMeter{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 4px;
  min-width: 86px;
}
.pmLabel{ font-weight: 900; font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.pmBar{
  width: 86px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow:hidden;
}
.pmFill{
  height: 100%;
  width: 0%;
  background: rgba(79,70,229,0.7);
}
.pmNum{ font-weight: 950; font-size: 12px; color: var(--text2); }

.toast{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,0.92);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
  z-index: 50;
}

.cell.blocked{
  box-shadow: inset 0 0 0 2px rgba(100,116,139,0.35);
  background: rgba(148,163,184,0.08);
}
.boulder{
  width: 78%;
  height: 78%;
  border-radius: 16%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  background: rgba(100,116,139,0.12);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.22);
}
.boulder.drop{
  animation: boulderDrop 320ms ease-out;
}
@keyframes boulderDrop{
  0%{ transform: translateY(-60px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}

.powerSlots{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.powerSlot{
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  padding: 10px;
}
@media (max-width: 640px){
  }
.achRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 0;
  font-weight: 800;
  color: var(--text2);
  border-bottom: 1px dashed rgba(226,232,240,0.9);
}
.achRow:last-child{ border-bottom: none; }
.unlockRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(226,232,240,0.85);
}
.unlockRow:last-child{ border-bottom:none; }
.unlockRow.ok .unlockTag{
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.35);
}
.unlockTag{
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  color: var(--text2);
}
.profileList{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.profileRow{
  display:flex;
  gap: 10px;
  align-items:center;
  border:1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  padding: 10px;
}
.profileRow.active{
  box-shadow: inset 0 0 0 2px rgba(79,70,229,0.14);
}
.profileRowMain{ flex:1; }
/* --- Particle FX --- */
.fxLayer {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}

.fxBurst {
  position: absolute;
  width: 10%;
  height: 10%;
  pointer-events: none;
}

.fxBurst.lock::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 0 2px var(--fx-color);
  opacity: 1;
  animation: burstAnim 0.6s ease-out forwards;
}

@keyframes burstAnim {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* --- Improved Grid Feel --- */
.gridWrap {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Make placed shapes pop in */
.svgIcon circle, .svgIcon polygon, .svgIcon path {
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Better locked state */
.cell.locked .svgIcon circle, .cell.locked .svgIcon polygon, .cell.locked .svgIcon path {
  animation: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

/* Highlight valid moves lightly on hover */
.cell:not(.locked):not(.purple):not(.blocked):hover {
  background: rgba(255,255,255,1);
  box-shadow: inset 0 0 0 2px rgba(14,165,233,0.2);
}



/* --- Extra UI panel --- */
/* --- Floating Text --- */
.floatLayer {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

.floatItem {
  position: absolute;
  font-weight: 900;
  font-size: 16px;
  text-shadow: 0 2px 0 rgba(255,255,255,1), 0 0 4px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  animation: floatUp 0.9s ease-out forwards;
  white-space: nowrap;
}

@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; margin-top: 10px; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; margin-top: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; margin-top: -30px; }
}


/* --- New: Shop / Achievements / Combo / Danger FX --- */
.subTitle{
  margin-top: 14px;
  font-weight: 800;
  color: var(--text);
}
.small.muted{ color: var(--muted); margin: 6px 0 10px; }
.shopList{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.shopRow{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.08); }
.shopRow.locked{ opacity:0.65; }
.shopLeft{ flex:1; }
.shopName{ font-weight:900; }
.shopDesc{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.shopRight{ display:flex; gap:8px; align-items:center; }
.achList{ display:flex; flex-direction:column; gap:10px; margin: 10px 0 16px; }
.achRow{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.08); }
.achRow.ok{ outline: 2px solid rgba(34,197,94,0.35); }
.achName{ font-weight:900; }
.achDesc{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.pmBar.combo{ height: 10px; }
.comboMeter .pmLabel{ color: var(--text2); }

.objectiveHud{
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.08);
  max-width: 260px;
}
.objectiveHud .objName{ font-weight: 900; font-size: 13px; }
.objectiveHud .objDesc{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.objectiveHud .objProg{ font-weight: 800; font-size: 12px; margin-top: 6px; }

.app.danger::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.45) 100%);
  mix-blend-mode: multiply;
  animation: dangerPulse 1.1s ease-in-out infinite;
  z-index: 1;
}
@keyframes dangerPulse{
  0%,100%{ opacity:0.6; }
  50%{ opacity:0.95; }
}
.app.fx-power::after,
.app.fx-purple::after,
.app.fx-charge::after,
.app.fx-boulderBreak::after,
.app.fx-claim::after,
.app.fx-purify::after{
  content:"";
  position: fixed;
  inset:-40px;
  pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.0) 0%, rgba(168,85,247,0.18) 45%, rgba(168,85,247,0.0) 70%);
  animation: fxFlash 0.35s ease-out forwards;
  z-index: 2;
}
@keyframes fxFlash{
  0%{ opacity:0; transform: scale(0.98); }
  30%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.02); }
}

.chargePick{ text-align:center; }
.chargeRow{ display:flex; gap:10px; justify-content:center; margin-top: 12px; flex-wrap:wrap; }

/* Compact select for loadout slots */
.powerSlot{ overflow:hidden; }
.select.powerSelect{
  width: 100%;
  max-width: 160px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
}

/* Menu credits */
.creditsLine{
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
  text-align: center;
}

/* Rules modal formatting */
.rulesText p{ margin: 8px 0; line-height: 1.25; }
.rulesText ul{ margin: 8px 0 10px 18px; padding: 0; }
.rulesText li{ margin: 6px 0; }
/* --- v12 Match Integrity & Complete Loop Pass --- */
body{
  min-height:100%;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.85), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.5), transparent 24%),
    linear-gradient(155deg, #93c5fd 0%, #dbeafe 48%, #f8fafc 100%);
  background-attachment:fixed;
}
#root{ min-height:100vh; }
.app{
  position:relative;
  z-index:0;
  width:min(980px, 100%);
  margin:0 auto;
  padding:14px;
}
.gameShell{
  position:relative;
  z-index:3;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(226,232,240,.95);
  border-radius:22px;
  padding:12px;
  box-shadow:var(--shadow);
}
.btn.primary{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow:0 8px 20px rgba(79,70,229,.22);
}
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.btn:focus-visible,
.select:focus-visible,
.input:focus-visible,
.cell:focus-visible,
.powerBtn:focus-visible{
  outline:3px solid rgba(79,70,229,.36);
  outline-offset:2px;
}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.progressSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.045);
  color:var(--text2);
  font-size:13px;
  font-weight:750;
}
.menuGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 12px;
  margin-top:14px;
}
.menuField{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.menuField > span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.seedField{ grid-column:1 / -1; }
.seedControls{ display:flex; gap:8px; }
.seedControls .input{ min-width:0; }
.featureStrip{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.featureStrip span{
  padding:6px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
}
.featureStrip .unlocked{ color:#166534; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.22); }
.featureStrip .locked{ color:#92400e; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.22); }
.menuExplain{ line-height:1.45; }
.startBtn{ min-width:150px; }
.topBar{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  gap:10px;
  align-items:stretch;
  padding:10px;
}
.playerIdentity{
  min-width:0;
  padding:9px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(226,232,240,.95);
}
.playerIdentity.blueSide{ text-align:right; }
.playerIdentity.redSide{ box-shadow:inset 3px 0 0 rgba(244,63,94,.75); }
.playerIdentity.blueSide{ box-shadow:inset -3px 0 0 rgba(14,165,233,.75); }
.identityLabel{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}
.identityName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
  font-size:13px;
  font-weight:900;
}
.identityScore{ margin-top:3px; font-size:20px; font-weight:950; }
.redSide .identityScore{ color:var(--red); }
.blueSide .identityScore{ color:var(--blue); }
.matchStatus{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:150px;
  padding:5px 10px;
}
.matchStatus .turn{ max-width:240px; text-align:center; font-size:13px; font-weight:950; }
.statusSub{ margin-top:4px; color:var(--muted); font-size:10px; font-weight:800; }
.actionPips{ display:flex; gap:5px; margin-top:6px; }
.actionPips span{
  width:22px;
  height:7px;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  transition:background .15s ease, transform .15s ease;
}
.actionPips span.filled{ background:var(--indigo); transform:translateY(-1px); }
.foldProgress{
  max-width:500px;
  margin:4px auto 8px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.045);
}
.foldTop{ display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--text2); }
.foldTrack{ height:9px; margin-top:6px; border-radius:999px; overflow:hidden; background:rgba(15,23,42,.1); }
.foldFill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, #0ea5e9, #7c3aed); transition:width .25s ease; }
.instruction{
  max-width:500px;
  margin:0 auto 8px;
  text-align:center;
  color:var(--text2);
  font-size:12px;
  font-weight:800;
  min-height:18px;
}
.gridWrap{ width:min(500px, 100%); }
.cell{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
}
.cell:disabled{ opacity:1; cursor:default; }
.cell.validTarget{
  position:relative;
  box-shadow:inset 0 0 0 2px rgba(79,70,229,.3);
}
.cell.validTarget::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(79,70,229,.75);
  right:4px;
  top:4px;
  pointer-events:none;
}
.bottomHud{
  align-items:stretch;
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(150px, .55fr) minmax(190px, .8fr);
}
.actionTools{ display:flex; align-items:stretch; gap:8px; min-width:0; }
.actionTools .purpleToggle{ flex:0 0 auto; }
.powerBar{ min-width:0; }
.powerBtn{ min-width:0; }
.powerBtn.selected{
  border-color:rgba(124,58,237,.65);
  background:rgba(168,85,247,.1);
  box-shadow:inset 0 0 0 2px rgba(124,58,237,.2);
}
.powerBtn:disabled{ cursor:not-allowed; opacity:.7; }
.lockedSystem{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:48px;
  border:1px dashed rgba(100,116,139,.4);
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.meterStack{ display:flex; align-items:center; justify-content:center; gap:10px; }
.powerMeter,
.comboMeter{ min-width:84px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.objectiveHud{ max-width:none; }
.objectiveHud .objBonus{ margin-top:5px; color:#7c3aed; font-size:11px; font-weight:850; }
.resultPanel{ display:flex; flex-direction:column; gap:12px; }
.resultScores{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.resultScores > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background:rgba(15,23,42,.045);
}
.resultScores span{ color:var(--muted); font-size:11px; font-weight:850; text-transform:uppercase; }
.resultScores b{ font-size:24px; }
.breakdownGrid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  padding:10px 12px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:14px;
  font-size:13px;
}
.rewardCard{
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(79,70,229,.1), rgba(168,85,247,.1));
  border:1px solid rgba(124,58,237,.18);
}
.rewardCard > div:first-child{ display:flex; justify-content:space-between; gap:12px; }
.unlockCallout{ margin-top:7px; font-size:12px; font-weight:900; color:#6d28d9; }
.seedResult{ text-align:center; color:var(--muted); font-size:12px; font-weight:800; }
.scoreDetailTable{ display:flex; flex-direction:column; gap:0; }
.scoreDetailTable > div{
  display:grid;
  grid-template-columns:1fr 80px 80px;
  gap:8px;
  padding:8px 4px;
  border-bottom:1px solid rgba(226,232,240,.85);
}
.scoreDetailTable b{ text-align:right; }
.scoreHeader{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.scoreTotalRow{ font-size:15px; }
.profileRowMain{ flex:1; min-width:120px; }
.profileRow{ display:flex; align-items:center; gap:8px; }

@media (max-width:760px){
  .app{ padding:8px; }
  .topBar{ grid-template-columns:1fr 1fr; }
  .matchStatus{ grid-column:1 / -1; grid-row:1; order:-1; min-width:0; }
  .playerIdentity{ grid-row:2; }
  .bottomHud{ grid-template-columns:1fr; }
  .actionTools{ flex-wrap:wrap; }
  .actionTools .purpleToggle{ flex:1; }
  .powerBar{ flex-basis:100%; }
  .meterStack{ justify-content:space-between; }
  .powerMeter,.comboMeter{ align-items:flex-start; flex:1; }
  .pmBar{ width:100%; }
}
@media (max-width:560px){
  .menuGrid{ grid-template-columns:1fr; }
  .seedField{ grid-column:auto; }
  .menuCard,.menuCard.wide{ width:min(100%, 96vw); padding:14px; }
  .topBar{ gap:6px; padding:7px; }
  .identityLabel{ font-size:8px; }
  .identityName{ font-size:11px; }
  .identityScore{ font-size:17px; }
  .gameShell{ padding:8px; border-radius:16px; }
  .controls .btn{ flex:1 1 calc(33% - 8px); padding:8px; }
  .powerBar{ flex-direction:column; }
  .resultScores{ grid-template-columns:1fr; }
  .scoreDetailTable > div{ grid-template-columns:1fr 58px 58px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .app.danger::before{ animation:none; opacity:.65; }
}

/* v13 finite-match and balance pass */
.endReason{
  align-self:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(79,70,229,.1);
  color:#4338ca;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.resultBreakdowns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.breakdownCard{
  min-width:0;
  padding:10px;
  border-radius:14px;
  background:rgba(15,23,42,.035);
  border:1px solid rgba(15,23,42,.08);
}
.breakdownTitle{
  margin-bottom:7px;
  font-size:12px;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.completedObjectiveList{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:8px;
  color:#5b21b6;
  font-size:11px;
  font-weight:850;
}
.aiQuip{
  padding:9px 11px;
  border-left:3px solid rgba(124,58,237,.55);
  border-radius:8px;
  background:rgba(168,85,247,.07);
  color:var(--text2);
  font-size:12px;
  font-style:italic;
  line-height:1.4;
}
.confirmText{
  margin:4px 0 0;
  color:var(--text2);
  line-height:1.5;
}
.objectiveHud .objName.complete{ color:#166534; }
.resumeBtn{ box-shadow:0 8px 22px rgba(79,70,229,.22); }

/* Ordinary play uses hover/focus only. Target dots are reserved for armed actions. */
.cell:not(.validTarget):not(:disabled):hover,
.cell:not(.validTarget):not(:disabled):focus-visible{
  box-shadow:inset 0 0 0 2px rgba(14,165,233,.22);
}

@media (max-width:760px){
  .bottomHud{
    position:sticky;
    bottom:max(6px, env(safe-area-inset-bottom));
    z-index:25;
    padding:9px;
    border:1px solid rgba(148,163,184,.34);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 34px rgba(15,23,42,.2);
    backdrop-filter:blur(12px);
  }
  .actionTools{
    display:grid;
    grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr);
    align-items:stretch;
  }
  .actionTools .purpleToggle{ min-height:48px; }
  .powerBar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    flex-basis:auto;
  }
  .powerBtn{ min-height:48px; }
  .meterStack{ grid-column:1 / -1; }
  .objectiveHud{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .resultBreakdowns{ grid-template-columns:1fr; }
  .actionTools{ grid-template-columns:1fr; }
  .powerBar{ grid-template-columns:1fr 1fr; }
  .bottomHud{ bottom:max(4px, env(safe-area-inset-bottom)); }
  .purpleToggle{ white-space:normal; line-height:1.15; }
}

/* v14 progression, matchup, and rematch pass */
.nextUnlockCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border:1px solid rgba(79,70,229,.18);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(14,165,233,.06));
}
.nextUnlockCard.complete{ color:#166534; background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22); font-weight:850; }
.nextUnlockTitle{ font-size:13px; font-weight:950; }
.miniProgress{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 10px;
  align-items:center;
  font-size:11px;
  color:var(--text2);
}
.miniProgress b{ color:var(--text); font-size:11px; }
.miniTrack{
  grid-column:1 / -1;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(15,23,42,.1);
}
.miniFill{
  height:100%;
  min-width:2px;
  border-radius:inherit;
  background:linear-gradient(90deg,#6366f1,#0ea5e9);
}
.matchupPreview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.kitCard{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.09);
  background:rgba(255,255,255,.78);
}
.kitCard b{ font-size:12px; }
.kitCard span{ color:var(--text2); font-size:11px; line-height:1.4; }
.humanKit{ box-shadow:inset 3px 0 0 rgba(14,165,233,.55); }
.aiKit{ box-shadow:inset -3px 0 0 rgba(168,85,247,.55); text-align:right; }
.versusMark{ align-self:center; font-size:11px; font-weight:950; color:#64748b; }
.shopRow.equipped{ border-color:rgba(14,165,233,.35); box-shadow:0 0 0 2px rgba(14,165,233,.08); }
.shopName{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.equippedTag{
  padding:2px 7px;
  border-radius:999px;
  background:rgba(14,165,233,.12);
  color:#0369a1;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.upgradeCompare,.unlockProgressList{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:6px;
  color:var(--text2);
  font-size:11px;
  line-height:1.4;
}
.shopRight{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.careerGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.careerGrid > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px;
  border-radius:13px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.07);
}
.careerGrid b{ font-size:18px; }
.careerGrid span{ color:var(--text2); font-size:10px; font-weight:800; }
.levelProgressCard{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 12px;
  align-items:center;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(99,102,241,.07);
  border:1px solid rgba(99,102,241,.15);
}
.levelProgressCard .miniTrack{ grid-column:1 / -1; }
.rewardBeforeAfter{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.rewardBeforeAfter > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
  border-radius:11px;
  background:rgba(255,255,255,.55);
}
.rewardBeforeAfter span{ color:var(--text2); font-size:10px; font-weight:800; }
.rewardBeforeAfter b{ font-size:12px; }
.rewardEarned{ display:flex; gap:12px; align-items:center; justify-content:center; padding-top:4px; }
.inlineEquip{
  margin:3px 3px 0;
  padding:4px 8px;
  border:0;
  border-radius:999px;
  background:#4f46e5;
  color:white;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.resultActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

@media (max-width:700px){
  .matchupPreview{ grid-template-columns:1fr; }
  .versusMark{ justify-self:center; }
  .aiKit{ text-align:left; box-shadow:inset 3px 0 0 rgba(168,85,247,.55); }
  .careerGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shopRow{ align-items:flex-start; flex-direction:column; }
  .shopRight{ width:100%; justify-content:stretch; }
  .shopRight .btn{ flex:1; }
}
@media (max-width:480px){
  .rewardBeforeAfter{ grid-template-columns:1fr; }
  .careerGrid{ grid-template-columns:1fr 1fr; }
  .resultActions .btn{ flex:1 1 100%; }
}

/* v15 Fold completion, tactical readability, and AI fairness foundation */
.turnSequence{
  width:min(500px,100%);
  margin:0 auto 7px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.turnStep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:6px 8px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:rgba(255,255,255,.7);
  color:var(--muted);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.turnStep span{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(148,163,184,.16);
  font-weight:950;
}
.turnStep.active{
  border-color:rgba(79,70,229,.45);
  background:rgba(79,70,229,.08);
  color:#4338ca;
  box-shadow:0 5px 16px rgba(79,70,229,.12);
}
.turnStep.done{
  border-color:rgba(34,197,94,.32);
  background:rgba(34,197,94,.08);
  color:#166534;
}
.turnStep.done span{ background:rgba(34,197,94,.18); }
.aiStatus{
  width:min(500px,100%);
  margin:0 auto 8px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(124,58,237,.16);
  border-radius:12px;
  background:rgba(168,85,247,.055);
  color:var(--text2);
}
.aiStatus > div:first-child{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.aiStatus b{ font-size:11px; }
.aiStatus span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }
.aiMeters{ display:flex; flex:0 0 auto; gap:6px; }
.aiMeters span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(124,58,237,.1);
  color:#6d28d9;
  font-size:10px;
  font-weight:900;
}
.cell.freeLockTarget{
  position:relative;
  z-index:1;
  box-shadow:inset 0 0 0 3px rgba(34,197,94,.72), 0 0 0 2px rgba(34,197,94,.18);
  animation:freeLockPulse .8s ease-in-out infinite alternate;
}
.cell.freeLockTarget::before{
  content:"FREE";
  position:absolute;
  left:2px;
  bottom:2px;
  padding:1px 3px;
  border-radius:4px;
  background:rgba(22,101,52,.92);
  color:white;
  font-size:6px;
  font-weight:950;
  letter-spacing:.04em;
  pointer-events:none;
}
.cell.lineFlash{
  z-index:2;
  animation:lineFlash 1.05s ease-out;
}
@keyframes freeLockPulse{
  from{ filter:brightness(1); }
  to{ filter:brightness(1.12); }
}
@keyframes lineFlash{
  0%,100%{ box-shadow:inset 0 0 0 0 rgba(250,204,21,0); }
  25%,70%{ box-shadow:inset 0 0 0 4px rgba(250,204,21,.95), 0 0 14px rgba(250,204,21,.72); }
}
.floatItem{
  max-width:165px;
  text-align:center;
  line-height:1.15;
  white-space:normal;
}
@media (max-width:560px){
  .turnStep{ padding:5px 3px; gap:3px; font-size:8px; }
  .turnStep span{ width:16px; height:16px; }
  .aiStatus{ align-items:flex-start; }
  .aiMeters{ flex-direction:column; gap:3px; }
  .cell.freeLockTarget::before{ font-size:5px; }
}
.kitCard small{ display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; }


/* --- v16 Turn Resolution, Final Fold & Opponent Readability --- */
.finalFoldBanner{
  width:min(500px,100%);
  margin:4px auto 9px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(245,158,11,.45);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(254,243,199,.96), rgba(255,255,255,.94));
  color:#92400e;
  box-shadow:0 8px 24px rgba(245,158,11,.16);
  text-align:center;
}
.finalFoldBanner b{ font-size:12px; letter-spacing:.12em; }
.finalFoldBanner span{ font-size:11px; font-weight:800; }
.app.finalFoldActive .foldTrack{ box-shadow:0 0 0 2px rgba(245,158,11,.18); }
.turnTranscript{
  width:min(500px,100%);
  margin:0 auto 8px;
  padding:7px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  background:rgba(15,23,42,.045);
}
.transcriptRow{
  display:grid;
  grid-template-columns:22px minmax(70px,auto) 1fr;
  align-items:start;
  gap:7px;
  font-size:10px;
  line-height:1.35;
  color:var(--text2);
}
.transcriptRow b{ font-size:10px; }
.transcriptIndex{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(79,70,229,.1);
  color:#4338ca;
  font-weight:950;
}
.cell.actionPulse{
  z-index:3;
  animation:actionTargetPulse .62s ease-out;
}
@keyframes actionTargetPulse{
  0%{ box-shadow:inset 0 0 0 0 rgba(79,70,229,0), 0 0 0 rgba(79,70,229,0); transform:scale(.94); }
  42%{ box-shadow:inset 0 0 0 4px rgba(79,70,229,.8), 0 0 18px rgba(79,70,229,.45); transform:scale(1.02); }
  100%{ box-shadow:inset 0 0 0 0 rgba(79,70,229,0), 0 0 0 rgba(79,70,229,0); transform:scale(1); }
}
.chargeUnavailable{
  margin-top:10px;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(245,158,11,.1);
  color:#92400e;
  font-size:11px;
  font-weight:850;
}
.decisiveTurn{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.045);
  border:1px solid rgba(148,163,184,.2);
}
.decisiveTurn > b{ display:block; margin-bottom:6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.decisiveRow{ display:grid; grid-template-columns:minmax(72px,auto) 1fr; gap:8px; padding:3px 0; font-size:11px; color:var(--text2); }
.decisiveRow span:first-child{ font-weight:900; }
@media (max-width:560px){
  .finalFoldBanner{ flex-direction:column; gap:3px; }
  .transcriptRow{ grid-template-columns:20px 64px 1fr; gap:5px; font-size:9px; }
  .decisiveRow{ grid-template-columns:64px 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .cell.actionPulse{ animation-duration:.01ms; }
}

/* v17 — guided onboarding, milestone menu, and tactical previews */
.gameIdentity{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(79,70,229,.11),rgba(14,165,233,.08));
  border:1px solid rgba(79,70,229,.22);
}
.gameIdentity h1{ margin:0; font-size:34px; line-height:1; letter-spacing:-.045em; }
.gameIdentity p{ margin:6px 0 0; color:var(--text2); font-size:12px; font-weight:750; }
.gameLogo{ position:relative; width:58px; height:58px; flex:0 0 58px; }
.gameLogo .logoCircle{ position:absolute; left:2px; top:9px; width:30px; height:30px; border:7px solid var(--red); border-radius:50%; }
.gameLogo .logoTriangle{ position:absolute; right:0; bottom:2px; width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:34px solid var(--blue); filter:drop-shadow(0 5px 8px rgba(37,99,235,.18)); }
.menuTopRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.primaryPlayCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(34,197,94,.28);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.primaryPlayCard > div{ display:flex; flex-direction:column; gap:3px; }
.primaryPlayCard b{ font-size:14px; }
.primaryPlayCard span{ color:var(--text2); font-size:11px; }
.heroBtn{ min-width:150px; }
.setupToggle{ width:100%; justify-content:center; }
.advancedSetup{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(15,23,42,.025);
}
.matchupPreview.inactive{ opacity:.7; filter:saturate(.65); }
.secondaryNav{ justify-content:center; }
.profileMark{ position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,rgba(244,63,94,.12),rgba(37,99,235,.12)); }
.profileMark .markCircle{ position:absolute; left:7px; top:9px; width:17px; height:17px; border:4px solid var(--red); border-radius:50%; }
.profileMark .markTriangle{ position:absolute; right:5px; bottom:7px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:18px solid var(--blue); }
.smallMark .markCircle{ left:5px; top:7px; width:13px; height:13px; border-width:3px; }
.smallMark .markTriangle{ right:4px; bottom:5px; border-left-width:8px; border-right-width:8px; border-bottom-width:14px; }

.coachCard{
  width:min(560px,100%);
  margin:0 auto 8px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  border:1px solid rgba(14,165,233,.28);
  background:linear-gradient(135deg,rgba(224,242,254,.94),rgba(255,255,255,.94));
  color:#0c4a6e;
}
.coachCard > div{ display:flex; flex-direction:column; gap:2px; }
.coachCard b{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.coachCard span{ font-size:11px; line-height:1.35; font-weight:700; }
.coachDismiss{ flex:0 0 auto; padding:7px 10px; }
.boardLegend{
  width:min(560px,100%);
  margin:0 auto 8px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:9px;
  font-weight:800;
  color:var(--text2);
}
.boardLegend span{ display:flex; align-items:center; gap:5px; }
.boardLegend i{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.legendPotential{ border:2px solid #64748b; background:transparent; }
.legendLocked{ background:linear-gradient(135deg,var(--red),var(--blue)); }
.legendBoulder{ background:#64748b; box-shadow:inset 0 0 0 3px #cbd5e1; }

.turnStep.pending{ opacity:.52; }
.turnStep.active{ border-color:rgba(79,70,229,.45); background:rgba(79,70,229,.08); }
.turnStep.ready{ border-color:rgba(34,197,94,.62); background:rgba(34,197,94,.13); box-shadow:0 0 0 2px rgba(34,197,94,.08); }
.turnStep.completed{ border-color:rgba(34,197,94,.28); background:rgba(34,197,94,.07); opacity:.82; }
.turnStep.completed span{ background:rgba(34,197,94,.18); color:#166534; }
.turnStep.ready span{ background:#22c55e; color:white; }

.cell.preview-gain{ box-shadow:inset 0 0 0 4px rgba(34,197,94,.78),0 0 12px rgba(34,197,94,.24); z-index:3; }
.cell.preview-deny{ box-shadow:inset 0 0 0 4px rgba(244,63,94,.76),0 0 12px rgba(244,63,94,.24); z-index:3; }
.cell.preview-purple{ box-shadow:inset 0 0 0 4px rgba(168,85,247,.82),0 0 14px rgba(168,85,247,.28); z-index:3; }
.cell.preview-change{ box-shadow:inset 0 0 0 4px rgba(14,165,233,.72); z-index:3; }
.cell.previewTarget{ outline:3px solid rgba(15,23,42,.8); outline-offset:-4px; }
.previewPanel{
  width:min(560px,100%);
  margin:8px auto 0;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  border:1px solid rgba(79,70,229,.3);
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
}
.previewPanel > b{ flex:0 0 auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#4338ca; }
.previewPanel > span{ flex:1; font-size:11px; font-weight:750; color:var(--text2); }
.previewButtons{ display:flex; gap:7px; }
.featureUnlockList{ display:grid; gap:8px; }
.featureUnlockCard{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.3);
  background:rgba(240,253,244,.9);
  color:#166534;
}
.featureUnlockCard span{ font-size:11px; line-height:1.4; font-weight:700; }
.goalMilestone{ margin:10px 0 4px; }

@media (max-width:560px){
  .gameIdentity{ padding:12px; gap:12px; }
  .gameIdentity h1{ font-size:28px; }
  .gameLogo{ width:48px; height:48px; flex-basis:48px; transform:scale(.84); transform-origin:center; }
  .menuTopRow{ align-items:flex-start; }
  .primaryPlayCard{ align-items:stretch; flex-direction:column; }
  .heroBtn{ width:100%; }
  .coachCard{ align-items:flex-start; }
  .boardLegend{ justify-content:flex-start; padding:0 4px; }
  .previewPanel{
    position:sticky;
    bottom:max(6px,env(safe-area-inset-bottom));
    z-index:30;
    flex-wrap:wrap;
  }
  .previewPanel > span{ flex-basis:100%; order:2; }
  .previewButtons{ width:100%; order:3; }
  .previewButtons .btn{ flex:1; }
}

/* v18 mode identity, records, turn comparison, and final-board review */
.modeRecordCard,
.challengeBestPreview,
.recordCallout,
.challengeRecordResult{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(79,70,229,.18);
  background:linear-gradient(135deg,rgba(238,242,255,.92),rgba(255,255,255,.94));
}
.modeRecordCard > b,
.recordCallout > b,
.challengeRecordResult > b{ color:#4338ca; font-size:12px; }
.modeRecordRows{ display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--text2); font-size:11px; font-weight:800; }
.challengeSetupBlock{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
.challengeCodeControls{ display:flex; gap:7px; }
.challengeCodeControls .codeInput{ min-width:0; flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; }
.challengeBestPreview{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; color:var(--text2); }
.challengeBestPreview.empty{ opacity:.72; }
.challengeRecordResult.new{ border-color:rgba(34,197,94,.38); background:rgba(240,253,244,.95); }
.challengeRecordResult small{ color:var(--text2); font-weight:750; }
.recordCallout{ margin-top:8px; border-color:rgba(245,158,11,.32); background:rgba(255,251,235,.95); }
.recordCallout > b{ color:#92400e; }
.modeRecordsGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.modeRecordMini{ display:flex; flex-direction:column; gap:4px; padding:11px; border:1px solid rgba(148,163,184,.22); border-radius:14px; background:rgba(255,255,255,.82); }
.modeRecordMini b{ color:var(--text); }
.modeRecordMini span{ color:var(--text2); font-size:11px; font-weight:750; }
.transcriptStack{ width:min(560px,100%); margin:0 auto 8px; display:grid; gap:7px; }
.turnTranscript{ margin:0; width:100%; }
.turnTranscript.previousTurn{ opacity:.82; }
.turnTranscript.previousTurn summary{ cursor:pointer; list-style:none; padding:8px 10px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--text2); }
.turnTranscript.previousTurn summary::-webkit-details-marker{ display:none; }
.transcriptHeading{ padding:7px 10px 4px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:#4338ca; }
.completedObjectiveStrip{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.completedObjectiveStrip span{ padding:4px 7px; border-radius:999px; background:rgba(34,197,94,.1); color:#166534; font-size:9px; font-weight:900; }
.reviewBanner{ width:min(560px,100%); margin:0 auto 8px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(245,158,11,.34); background:rgba(255,251,235,.96); }
.reviewBanner > div{ display:flex; flex-direction:column; gap:2px; }
.reviewBanner b{ color:#92400e; font-size:11px; letter-spacing:.06em; }
.reviewBanner span{ color:#78350f; font-size:10px; font-weight:750; }
.cell.reviewLine{ box-shadow:inset 0 0 0 3px rgba(245,158,11,.72),0 0 13px rgba(245,158,11,.24); z-index:2; }
.reviewingMatch .cell.actionPulse{ outline:3px solid #f59e0b; outline-offset:-4px; }
.reviewingMatch .instruction{ color:#92400e; }
.floatItem{ max-width:92px; white-space:nowrap; font-size:11px; text-shadow:0 1px 2px rgba(255,255,255,.9); }

@media (max-width:760px){
  .challengeSetupBlock{ grid-template-columns:1fr; }
  .modeRecordsGrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .toast{ top:max(8px,env(safe-area-inset-top)); bottom:auto; width:min(92vw,420px); padding:8px 10px; font-size:11px; text-align:center; }
  .challengeCodeControls{ flex-wrap:wrap; }
  .challengeCodeControls .codeInput{ flex-basis:100%; }
  .challengeBestPreview{ align-items:flex-start; flex-direction:column; }
  .reviewBanner{ align-items:stretch; flex-direction:column; }
  .transcriptRow{ font-size:10px; }
}
.objectiveSequenceResult{ display:flex; flex-direction:column; gap:4px; margin-top:7px; padding:8px 10px; border-radius:11px; background:rgba(15,23,42,.045); }
.objectiveSequenceResult b{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.objectiveSequenceResult span{ font-size:10px; color:var(--text2); font-weight:750; line-height:1.45; }


/* v19 challenge contract and exact-record presentation */
.challengeContractSummary{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(59,130,246,.28);border-radius:14px;background:rgba(239,246,255,.92);}
.challengeContractSummary b{color:#1e3a8a;font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.challengeContractSummary span{color:var(--text);font-size:11px;font-weight:800;}
.challengeContractSummary small{color:var(--text2);font-size:10px;font-weight:700;line-height:1.4;}
.challengeContractSummary.legacy{border-color:rgba(245,158,11,.35);background:rgba(255,251,235,.96);}
.challengeContractSummary.legacy b{color:#92400e;}
.challengeHistory{display:grid;gap:8px;margin-top:14px;}
.challengeHistoryRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(148,163,184,.24);border-radius:14px;background:rgba(255,255,255,.82);}
.challengeHistoryRow>div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.challengeHistoryRow b{font-size:11px;color:var(--text);overflow-wrap:anywhere;}
.challengeHistoryRow span{font-size:10px;color:var(--text2);font-weight:750;}
.challengeHistoryRow.legacy{border-color:rgba(245,158,11,.32);background:rgba(255,251,235,.9);}
.challengeRecordResult span{overflow-wrap:anywhere;}
@media (max-width:560px){.challengeHistoryRow{align-items:stretch;flex-direction:column}.challengeHistoryRow .btn{width:100%}}
.challengeCodeField{grid-column:1 / -1;}
.challengeContractSummary{grid-column:1 / -1;}
.challengeCodeControls .codeInput{font-size:11px;}


/* v20 temporary Challenge sandbox, canonical records, and contract generation */
.challengeBuildSandbox{grid-column:1/-1;display:grid;gap:10px;padding:12px;border:1px solid rgba(14,116,144,.24);border-radius:14px;background:linear-gradient(135deg,rgba(236,254,255,.96),rgba(240,249,255,.9));}
.challengeBuildSandbox.inactive{display:flex;flex-direction:column;gap:3px;border-style:dashed;color:var(--text2);}
.sandboxHead,.sandboxFoot,.historyHead,.historyControls{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sandboxHead>div{display:flex;flex-direction:column;gap:3px;}
.sandboxHead b{font-size:12px;color:#164e63;}
.sandboxHead span,.sandboxFoot span{font-size:10px;color:var(--text2);font-weight:750;line-height:1.4;}
.buildTag{padding:4px 8px;border-radius:999px;background:rgba(8,145,178,.12);color:#155e75!important;white-space:nowrap;}
.sandboxPowers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.sandboxPower{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px;border:1px solid rgba(148,163,184,.24);border-radius:12px;background:rgba(255,255,255,.84);}
.sandboxPower.equipped{border-color:rgba(14,165,233,.42);box-shadow:inset 0 0 0 1px rgba(14,165,233,.12);}
.sandboxPower>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sandboxPower b{font-size:10px;color:var(--text);}
.sandboxPower span,.sandboxPower label span{font-size:9px;color:var(--text2);font-weight:750;}
.sandboxPower label{display:flex;align-items:center;gap:5px;}
.select.compact{min-width:72px;padding:5px 7px;font-size:10px;}
.sandboxToggle{min-width:70px;padding:6px 8px;}
.challengeBestPreview.openRecord{border-color:rgba(168,85,247,.28);background:rgba(250,245,255,.92);}
.historyHead span{font-size:10px;color:var(--text2);font-weight:750;}
.historyControls .input{min-width:0;flex:1;}
.challengeHistoryRow small{font-size:9px;color:#475569;font-weight:750;line-height:1.35;}
@media (max-width:700px){.sandboxPowers{grid-template-columns:1fr}.sandboxPower{grid-template-columns:auto minmax(0,1fr)}.sandboxPower label{grid-column:1/-1}.sandboxHead,.sandboxFoot,.historyHead,.historyControls{align-items:stretch;flex-direction:column}.sandboxFoot .btn,.historyControls .btn{width:100%}}

/* v21 release-candidate data safety, accessibility, and preferences */
.srOnly{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.storageNotice{
  width:min(960px,calc(100% - 24px));
  margin:10px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(245,158,11,.45);
  border-radius:14px;
  background:rgba(255,251,235,.98);
  box-shadow:0 8px 24px rgba(120,53,15,.08);
  color:#78350f;
  z-index:60;
}
.storageNotice>div{display:flex;flex-direction:column;gap:2px;}
.storageNotice b{font-size:12px;}
.storageNotice span{font-size:10px;font-weight:750;}
.preferencesPanel,
.dataSafetyCard{
  border:1px solid rgba(99,102,241,.2);
  border-radius:14px;
  background:rgba(248,250,252,.88);
  padding:10px 12px;
}
.preferencesPanel summary{cursor:pointer;font-weight:900;color:#4338ca;}
.preferencesGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.preferencesGrid label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:850;color:var(--text2);}
.dataSafetyCard{display:grid;gap:10px;margin-top:12px;}
.dataSafetyCard>div:first-child{display:flex;flex-direction:column;gap:3px;}
.dataSafetyCard span{font-size:10px;color:var(--text2);font-weight:750;}
.hiddenFileInput{display:none!important;}
.importPreview{display:grid;gap:12px;}
.importStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.importStats span{padding:8px 9px;border-radius:10px;background:rgba(15,23,42,.05);font-size:10px;font-weight:800;color:var(--text2);}
.previewGlyph{
  position:absolute;
  inset:4px auto auto 4px;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:rgba(15,23,42,.84);
  color:white;
  font-size:10px;
  font-weight:1000;
  line-height:1;
  pointer-events:none;
}
.cell:focus-visible{outline:3px solid #111827;outline-offset:2px;z-index:12;}
.cell.preview-gain .previewGlyph{background:#15803d;}
.cell.preview-deny .previewGlyph{background:#b91c1c;}
.cell.preview-purple .previewGlyph{background:#7e22ce;}
.soundToggle[aria-pressed="true"]{border-color:rgba(220,38,38,.3);background:rgba(254,242,242,.9);color:#991b1b;}
.forceReducedMotion *,
.forceReducedMotion *::before,
.forceReducedMotion *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}
.modal:focus{outline:none;}
.modalBack{overscroll-behavior:contain;}
@media (max-width:620px){
  .preferencesGrid,.importStats{grid-template-columns:1fr;}
  .storageNotice{align-items:stretch;flex-direction:column;}
  .storageNotice .btn{width:100%;}
}


/* v22 RC2 transactional save and recovery states */
.storageActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.storageNotice.conflict{border-color:#d97706;background:#fff7ed;color:#7c2d12;}
.storageNotice.recovery{border-color:#b91c1c;background:#fff1f2;color:#881337;}
.saveStatus{margin:8px auto 0;max-width:980px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.12);font-size:11px;font-weight:800;color:#334155;text-align:center;box-shadow:0 4px 14px rgba(15,23,42,.06);}
.saveStatus.recovered{background:#ecfdf5;color:#166534;border-color:#86efac;}
.mergeConflicts{display:grid;gap:8px;max-height:280px;overflow:auto;padding-right:4px;}
.mergeConflictCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#f8fafc;}
.mergeConflictCard span{font-size:11px;color:#475569;}
.mergeConflictCard select{grid-row:1 / span 2;grid-column:2;min-width:190px;}
.recoveryScreen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#eff6ff,#eef2ff);}
.recoveryCard{width:min(620px,100%);padding:28px;border-radius:22px;background:white;box-shadow:0 24px 70px rgba(15,23,42,.18);border:1px solid rgba(15,23,42,.1);}
.recoveryCard h1{margin-top:0;}
@media (max-width:640px){.storageActions{display:grid;grid-template-columns:1fr;}.mergeConflictCard{grid-template-columns:1fr}.mergeConflictCard select{grid-row:auto;grid-column:auto;width:100%;}.saveStatus{margin-inline:8px;}}

/* v23 RC3 objective-resume integrity and Match Chronicle review */
.reviewPanel{
  width:min(680px,100%);
  margin:0 auto 10px;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid rgba(245,158,11,.38);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,251,235,.98),rgba(255,255,255,.96));
  box-shadow:0 12px 32px rgba(120,53,15,.1);
}
.reviewHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.reviewHeader>div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.reviewHeader b{color:#92400e;font-size:11px;letter-spacing:.07em;text-transform:uppercase;}
.reviewHeader span{color:#78350f;font-size:10px;font-weight:780;line-height:1.4;}
.reviewStats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.reviewStats>span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:8px 9px;
  border:1px solid rgba(245,158,11,.2);
  border-radius:11px;
  background:rgba(255,255,255,.72);
  color:#92400e;
  font-size:9px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.reviewStats b{color:var(--text);font-size:11px;letter-spacing:0;text-transform:none;white-space:nowrap;}
.reviewSlider{width:100%;accent-color:#d97706;cursor:pointer;}
.reviewNav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;}
.reviewNav .btn{min-height:34px;}
.reviewNav .turning{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.1);color:#92400e;}
.reviewEvents{display:grid;gap:5px;max-height:148px;overflow:auto;padding-right:2px;}
.reviewEvent{display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:start;padding:6px 8px;border-radius:9px;background:rgba(15,23,42,.045);}
.reviewEvent>span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(245,158,11,.16);color:#92400e;font-size:9px;font-weight:950;}
.reviewEvent p{margin:1px 0 0;color:var(--text2);font-size:10px;font-weight:750;line-height:1.4;}
.reviewObjective{padding:7px 9px;border-radius:9px;background:rgba(34,197,94,.1);color:#166534;font-size:10px;font-weight:900;}
.reviewTurnBadge{padding:4px 9px;border-radius:999px;background:rgba(245,158,11,.14);color:#92400e;font-size:10px;font-weight:950;}
.cell.reviewChanged{outline:3px dashed rgba(13,148,136,.92);outline-offset:-5px;z-index:3;}
.cell.reviewChanged::after{
  content:"CHANGED";
  position:absolute;
  right:2px;
  top:2px;
  padding:1px 3px;
  border-radius:4px;
  background:rgba(15,118,110,.94);
  color:#fff;
  font-size:5px;
  font-weight:950;
  letter-spacing:.04em;
  pointer-events:none;
}
.reviewingMatch .instruction{color:#92400e;}
.reviewingMatch .cell{cursor:default;}
.turningPointCard{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:11px 12px;
  border:1px solid rgba(245,158,11,.38);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(254,243,199,.7));
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(146,64,14,.08);
}
.turningPointCard:hover,.turningPointCard:focus-visible{border-color:#d97706;box-shadow:0 0 0 3px rgba(245,158,11,.16),0 9px 22px rgba(146,64,14,.12);}
.turningPointCard b{color:#92400e;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.turningPointCard span{font-size:11px;font-weight:800;line-height:1.45;}
.turningPointCard small{color:#a16207;font-size:9px;font-weight:800;}
.forceReducedMotion .cell.reviewChanged,
.forceReducedMotion .turningPointCard{transition:none!important;animation:none!important;}

@media (max-width:680px){
  .reviewStats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .reviewHeader{align-items:stretch;flex-direction:column;}
  .reviewHeader .btn{width:100%;}
  .reviewNav .btn{flex:1 1 calc(50% - 7px);}
}
@media (max-width:420px){
  .reviewStats{grid-template-columns:1fr 1fr;}
  .reviewNav .btn{flex-basis:100%;}
  .cell.reviewChanged::after{content:"•";font-size:8px;padding:0 3px;}
}
.reviewResources{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.reviewResources>span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(15,23,42,.045);
  color:var(--text2);
  font-size:10px;
  font-weight:760;
  line-height:1.35;
}
.reviewResources b{color:#92400e;font-size:9px;letter-spacing:.05em;text-transform:uppercase;}
@media (max-width:680px){.reviewResources{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:420px){.reviewResources{grid-template-columns:1fr;}}

/* v24 RC4 — board-first responsive play and viewport-safe dialogs */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }

/* Every menu/recovery surface stacks notices above its card. */
.menuWrap{
  flex-direction:column;
  gap:10px;
  width:100%;
  min-width:0;
  overflow-x:clip;
}
.menuWrap > .menuCard,
.menuWrap > .storageNotice,
.menuWrap > .saveStatus{ flex:0 0 auto; min-width:0; }

/* Shared viewport-safe modal shell. */
.modalBack{
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.modal{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(620px,100%);
  max-width:100%;
  max-height:calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow:hidden;
  overscroll-behavior:contain;
}
.modal.resultModal{ width:min(760px,100%); }
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:15px 18px 11px;
  border-bottom:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.99);
}
.modalHeader h3{
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.modalClose{
  appearance:none;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(148,163,184,.34);
  border-radius:12px;
  background:rgba(248,250,252,.96);
  color:var(--text2);
  font:900 24px/1 system-ui,sans-serif;
  cursor:pointer;
}
.modalClose:focus-visible{ outline:3px solid rgba(79,70,229,.36); outline-offset:2px; }
.modal .content{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:16px 18px 20px;
  scroll-padding:16px;
}
.modal .content:focus{ outline:none; }
.modal .footer{
  position:relative;
  z-index:2;
  flex-wrap:wrap;
  align-items:center;
  min-height:58px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(226,232,240,.9);
  box-shadow:0 -10px 24px rgba(15,23,42,.06);
}
.resultModal .footer{ justify-content:center; }
.resultModal .footer .btn{ flex:1 1 135px; }
.resultUpgrade{ align-self:center; width:100%; }

/* Compact in-match persistence notice; expands without displacing the board repeatedly. */
.saveStatus.compact{
  width:max-content;
  max-width:calc(100% - 20px);
  margin:5px auto 2px;
  padding:4px 10px;
  font-size:10px;
  box-shadow:none;
}
details.storageNotice.compact{
  width:min(980px,calc(100% - 20px));
  margin:5px auto 2px;
  padding:0;
  overflow:hidden;
}
details.storageNotice.compact > summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  cursor:pointer;
  list-style:none;
}
details.storageNotice.compact > summary::-webkit-details-marker{ display:none; }
details.storageNotice.compact > summary::after{
  content:"Details";
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:900;
}
details.storageNotice.compact > summary span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
details.storageNotice.compact .storageActions{
  padding:0 10px 10px;
  justify-content:flex-start;
}

/* Command hierarchy: play commands stay visible, secondary commands live in one panel. */
.commandDock{
  position:relative;
  z-index:35;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0;
}
.commandDock > .btn{ min-height:42px; }
.matchOptions{ position:relative; min-width:0; }
.matchOptions > summary{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  list-style:none;
  white-space:nowrap;
}
.matchOptions > summary::-webkit-details-marker{ display:none; }
.matchOptions[open] > summary{ border-color:rgba(79,70,229,.4); background:rgba(238,242,255,.98); }
.matchOptionsPanel{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  width:min(330px,calc(100vw - 28px));
  padding:9px;
  border:1px solid rgba(148,163,184,.3);
  border-radius:15px;
  background:rgba(255,255,255,.99);
  box-shadow:0 18px 44px rgba(15,23,42,.22);
}
.matchOptionsPanel .btn{ min-width:0; }
.cancelAction{ border-color:rgba(245,158,11,.45); color:#92400e; background:#fffbeb; }

/* Desktop/laptop: stable board stage at left, information rail at right. */
@media (min-width:921px){
  .app{ width:min(1120px,100%); }
  .gameShell{
    min-height:620px;
    padding:12px 12px 12px 532px;
  }
  .gameShell > .commandDock{
    position:absolute;
    top:12px;
    left:12px;
    width:500px;
  }
  .gameShell > .gridWrap{
    position:absolute;
    top:64px;
    left:12px;
    width:500px;
    margin:0;
  }
  .gameShell > .previewPanel{
    position:absolute;
    top:574px;
    left:12px;
    width:500px;
    margin:0;
  }
  .gameShell > :not(.commandDock):not(.gridWrap):not(.previewPanel){
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .foldProgress{ margin-top:0; }
  .turnSequence{ width:100%; }
  .instruction{ text-align:left; padding-inline:2px; }
  .coachCard{ align-items:flex-start; }
  .boardLegend{ justify-content:flex-start; }
  .bottomHud{
    grid-template-columns:1fr;
    gap:9px;
  }
  .actionTools{ flex-wrap:wrap; }
  .powerBar{ flex:1 1 220px; }
  .meterStack{ justify-content:space-between; }
  .transcriptStack{
    max-height:178px;
    overflow:hidden;
  }
  .turnTranscript{
    max-height:118px;
    overflow:auto;
    margin-bottom:0;
  }
  .turnTranscript.previousTurn[open]{ max-height:102px; }
  .reviewPanel{ max-height:585px; overflow:auto; }
}

/* Mobile/tablet: compact match state, board, sticky tactical tray, then expandable detail. */
@media (max-width:920px){
  .app{ width:100%; padding:6px; }
  .gameShell{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    padding:8px;
  }
  .gameShell > .commandDock{ order:0; }
  .gameShell > .finalFoldBanner,
  .gameShell > .foldProgress,
  .gameShell > .turnSequence,
  .gameShell > .instruction{ order:1; }
  .gameShell > .gridWrap{ order:2; margin:0 auto; }
  .gameShell > .previewPanel{ order:3; }
  .gameShell > .bottomHud{ order:4; }
  .gameShell > .reviewPanel{ order:5; }
  .gameShell > .boardLegend{ order:6; }
  .gameShell > .transcriptStack{ order:7; }
  .gameShell > .aiStatus{ order:8; }
  .gameShell > .coachCard{ order:9; }
  .gridWrap{ width:min(100%,500px); margin-top:0; }
  .foldProgress,.instruction,.turnSequence,.finalFoldBanner{ width:100%; max-width:500px; }
  .foldProgress{ margin-top:0; margin-bottom:0; }
  .instruction{ margin-bottom:0; min-height:0; }
  .turnSequence{ margin-bottom:0; }
  .boardLegend{ margin-top:2px; margin-bottom:0; }
  .transcriptStack{
    width:100%;
    max-width:500px;
    max-height:190px;
    overflow:hidden;
    margin-bottom:0;
  }
  .turnTranscript{
    max-height:128px;
    overflow:auto;
    margin-bottom:0;
  }
  .bottomHud{ width:min(100%,500px); margin-inline:auto; }
  .coachCard{ width:min(100%,500px); margin-bottom:0; }
  .reviewPanel{ width:min(100%,500px); margin-bottom:0; }
}

@media (max-width:560px){
  .modalBack{ padding:6px; }
  .modal{
    width:100%;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:15px;
  }
  .modalHeader{ padding:11px 12px 9px; }
  .modalHeader h3{ font-size:17px; }
  .modal .content{ padding:12px; }
  .modal .footer{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .modal .footer .btn{ width:100%; min-width:0; }
  .resultModal .footer .btn{ flex:auto; }
  .menuWrap{ padding:8px; min-height:100dvh; }
  .storageNotice{ width:100%; margin:0; }
  .saveStatus{ max-width:100%; }
  .commandDock{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .commandDock > .btn,
  .matchOptions > summary{ min-height:40px; padding:8px 7px; font-size:11px; }
  .commandDock .cancelAction{ grid-column:1 / -1; }
  .matchOptionsPanel{
    position:fixed;
    top:auto;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:8px;
    width:auto;
  }
  .topBar{ padding:4px; }
  .matchStatus{ padding:2px 6px; }
  .statusSub{ margin-top:2px; }
  .playerIdentity{ padding:7px 8px; }
  .foldTop{ font-size:10px; }
  .turnStep{ padding:5px 6px; }
  .turnStep b{ font-size:9px; }
  .instruction{ font-size:10px; line-height:1.25; }
  .boardLegend{ font-size:8px; gap:5px 9px; }
  .bottomHud{ padding:7px; }
  details.storageNotice.compact > summary{ align-items:flex-start; flex-wrap:wrap; }
  details.storageNotice.compact > summary span{ flex-basis:calc(100% - 76px); }
}

@media (max-width:360px){
  .modal .footer{ grid-template-columns:1fr; }
  .commandDock{ grid-template-columns:1fr 1fr; }
  .matchOptions{ grid-column:1 / -1; }
  .turnSequence{ gap:4px; }
  .turnStep span{ width:20px; height:20px; }
  .identityName{ max-width:118px; }
}
@media (max-width:920px){
  .gameShell > .instruction{
    min-height:32px;
    display:grid;
    place-items:center;
  }
}
@media (max-width:360px){
  .topBar{
    grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);
    gap:4px;
    padding:4px;
  }
  .matchStatus{
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:2px;
  }
  .matchStatus .turn{ font-size:10px; line-height:1.1; }
  .statusSub{ display:none; }
  .actionPips{ margin-top:4px; gap:3px; }
  .actionPips span{ width:13px; height:5px; }
  .playerIdentity{ grid-row:1; padding:6px; }
  .identityLabel{ display:none; }
  .identityName{ max-width:100%; font-size:9px; }
  .identityScore{ margin-top:1px; font-size:15px; }
  .commandDock{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .matchOptions{ grid-column:auto; }
  .commandDock > .btn,
  .matchOptions > summary{ padding:7px 4px; font-size:10px; }
  details.storageNotice.compact > summary{ min-height:38px; flex-wrap:nowrap; align-items:center; }
  details.storageNotice.compact > summary span{ display:none; }
}

/* v25 RC5 — tactical telegraphs, tactile turn resolution, and authored board language */
.menuTopRow > *{min-width:0}.menuTopRow .profileBadge{margin:0;flex:0 1 250px;max-width:100%}.menuTopRow .menuBrand{margin:0;flex:1 1 auto}
.tacticalForecast,.turnImpact{width:100%;max-width:500px;margin:0 auto;border:1px solid rgba(100,116,139,.24);border-radius:13px;background:rgba(248,250,252,.9);color:var(--text2)}
.tacticalForecast>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px;padding:7px 10px;cursor:pointer;list-style:none}.tacticalForecast>summary::-webkit-details-marker{display:none}.tacticalForecast>summary::after{content:"+";font-size:16px;font-weight:950;color:#475569}.tacticalForecast[open]>summary::after{content:"−"}.tacticalForecast>summary b,.turnImpact b{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#334155;white-space:nowrap}.tacticalForecast>summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:850}
.forecastList{display:grid;gap:4px;padding:0 8px 8px}.forecastItem{display:grid;grid-template-columns:9px 1fr;gap:7px;align-items:start;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.72);font-size:10px;font-weight:750;line-height:1.35}.forecastItem i{width:8px;height:8px;margin-top:2px;border-radius:50%;background:#64748b}.forecastItem.slow i{background:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.12)}.forecastItem.tax i{background:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.12)}.forecastItem.combo i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.12)}.forecastItem.final i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.turnImpact{display:flex;align-items:center;gap:9px;padding:7px 10px;border-color:rgba(13,148,136,.26);background:linear-gradient(90deg,rgba(240,253,250,.94),rgba(255,255,255,.9))}.turnImpact b{color:#0f766e}.turnImpact span{min-width:0;font-size:10px;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell{position:relative}.edgeCoord{position:absolute;z-index:6;display:grid;place-items:center;min-width:13px;height:13px;border-radius:4px;background:rgba(15,23,42,.72);color:#fff;font-size:6px;font-weight:1000;line-height:1;pointer-events:none;opacity:.72}.colCoord{top:2px;right:2px}.rowCoord{left:2px;bottom:2px}.coordinateChip{position:absolute;right:7px;bottom:7px;z-index:38;min-width:34px;padding:5px 8px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(15,23,42,.88);color:#fff;box-shadow:0 5px 18px rgba(15,23,42,.22);font:950 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;pointer-events:none}.reviewEvent{grid-template-columns:22px auto 1fr}.reviewCoord{align-self:center;padding:3px 5px;border-radius:6px;background:rgba(15,23,42,.08);font:950 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#334155}
.cell.aiTarget{z-index:8;outline:3px solid rgba(15,23,42,.88);outline-offset:-4px;animation:aiTargetBeat .65s ease-in-out infinite alternate}.cell.ai-power{box-shadow:inset 0 0 0 4px rgba(168,85,247,.66),0 0 15px rgba(168,85,247,.28)}.cell.ai-purple{box-shadow:inset 0 0 0 4px rgba(168,85,247,.8),0 0 15px rgba(168,85,247,.34)}.cell.ai-color{box-shadow:inset 0 0 0 4px rgba(245,158,11,.78),0 0 15px rgba(245,158,11,.28)}.cell.ai-place{box-shadow:inset 0 0 0 4px rgba(14,165,233,.72),0 0 15px rgba(14,165,233,.25)}@keyframes aiTargetBeat{from{filter:brightness(1)}to{filter:brightness(1.13)}}.aiTelegraphing .aiStatus{border-color:rgba(245,158,11,.44);background:linear-gradient(90deg,rgba(255,251,235,.96),rgba(255,255,255,.94))}.aiTelegraphing .instruction{color:#92400e}
.fxBurst::before,.fxBurst::after{content:"";position:absolute;inset:10%;pointer-events:none}.fxBurst.place::before{border:2px solid var(--fx-color);border-radius:50%;animation:placeSeam .55s ease-out forwards}.fxBurst.freeLock::before{border:3px solid #22c55e;border-radius:7px;animation:freeStamp .7s cubic-bezier(.2,.8,.2,1) forwards}.fxBurst.steal::before{background:linear-gradient(135deg,transparent 43%,var(--fx-color) 44% 55%,transparent 56%);animation:stealFracture .7s ease-out forwards}.fxBurst.line::after{inset:45% -18%;height:10%;border-radius:999px;background:#facc15;box-shadow:0 0 8px #facc15;animation:lineTrace .65s ease-out forwards}.fxBurst.purple::before,.fxBurst.purpleClear::before{border:3px solid #a855f7;border-radius:12%;animation:purpleRipple .7s ease-out forwards}.fxBurst.purpleClear::after{inset:40% -35%;height:20%;background:#fff;box-shadow:0 0 12px #a855f7;animation:lineTrace .6s ease-out forwards}.fxBurst.claim::before{border:4px double var(--fx-color);animation:claimClose .65s ease-out forwards}.fxBurst.purify::before{border:3px solid #67e8f9;border-radius:50%;animation:purifyDrain .75s ease-out forwards}.fxBurst.boulderBreak::before{background:conic-gradient(from 20deg,transparent 0 8%,#475569 9% 14%,transparent 15% 31%,#64748b 32% 38%,transparent 39% 58%,#334155 59% 65%,transparent 66%);animation:rockBurst .72s ease-out forwards}@keyframes placeSeam{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.8);opacity:0}}@keyframes freeStamp{0%{transform:scale(1.8) rotate(-8deg);opacity:0}35%{opacity:1}100%{transform:scale(.7);opacity:0}}@keyframes stealFracture{0%{transform:scale(.5) rotate(-12deg);opacity:1}100%{transform:scale(1.8) rotate(12deg);opacity:0}}@keyframes lineTrace{0%{transform:scaleX(0);opacity:1}100%{transform:scaleX(1.2);opacity:0}}@keyframes purpleRipple{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.9) rotate(35deg);opacity:0}}@keyframes claimClose{0%{transform:scale(1.8);opacity:0}45%{opacity:1}100%{transform:scale(.6);opacity:0}}@keyframes purifyDrain{0%{transform:scale(1.8);opacity:.2}60%{opacity:1}100%{transform:scale(.25);opacity:0}}@keyframes rockBurst{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.2) rotate(30deg);opacity:0}}
.app.fx-slow::after,.app.fx-finalFold::after,.app.fx-boulder::after,.app.fx-purpleClear::after{content:"";position:fixed;inset:-30px;pointer-events:none;z-index:2;animation:fxFlash .42s ease-out forwards}.app.fx-slow::after{background:linear-gradient(90deg,rgba(14,165,233,.2),transparent 38%,rgba(14,165,233,.18))}.app.fx-boulder::after{background:radial-gradient(circle at 50% 45%,transparent 0 35%,rgba(71,85,105,.25) 58%,transparent 75%)}.app.fx-purpleClear::after{background:repeating-linear-gradient(120deg,transparent 0 13%,rgba(168,85,247,.14) 14% 16%,transparent 17% 28%)}.app.fx-finalFold::after{background:linear-gradient(90deg,rgba(244,63,94,.18),transparent 36% 64%,rgba(37,99,235,.18));animation:foldClosure .55s ease-out forwards}@keyframes foldClosure{0%{clip-path:inset(0 48%);opacity:1}100%{clip-path:inset(0);opacity:0}}.actionPips .slowLost{background:rgba(14,165,233,.16);border:1px dashed rgba(14,165,233,.72);position:relative}.actionPips .slowLost::after{content:"−";position:absolute;inset:0;display:grid;place-items:center;color:#0369a1;font-size:8px;font-weight:1000}.slowActive .matchStatus{box-shadow:inset 0 0 0 2px rgba(14,165,233,.2)}
.gameShell{background-image:linear-gradient(135deg,rgba(244,63,94,.025) 0 49.7%,rgba(37,99,235,.025) 50.3% 100%)}.gridWrap{background:linear-gradient(135deg,rgba(255,241,242,.92),rgba(255,255,255,.94) 49.5%,rgba(239,246,255,.92) 50.5%);border-color:rgba(148,163,184,.55)}.grid::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 49.65%,rgba(100,116,139,.14) 49.8% 50.2%,transparent 50.35%);z-index:1}.grid{position:relative}.cell{z-index:2;background-color:rgba(255,255,255,.88)}
@media (min-width:921px){.gameShell>.tacticalForecast,.gameShell>.turnImpact{max-width:none}.gameShell>.tacticalForecast{margin-top:0}}@media (max-width:920px){.gameShell>.tacticalForecast,.gameShell>.turnImpact{order:1}}@media (max-width:560px){.edgeCoord{opacity:0}.cell:focus-visible .edgeCoord,.cell:hover .edgeCoord,.cell.actionPulse .edgeCoord,.cell.aiTarget .edgeCoord,.cell.reviewChanged .edgeCoord{opacity:.8}.coordinateChip{right:5px;bottom:5px;min-width:31px;padding:4px 6px;font-size:9px}.turnImpact{align-items:flex-start;flex-direction:column;gap:2px}.turnImpact span{width:100%;white-space:nowrap}.tacticalForecast>summary{padding:6px 8px}.reviewEvent{grid-template-columns:20px auto 1fr;gap:5px}}@media (max-width:420px){.menuTopRow{flex-direction:column;align-items:stretch;gap:8px}.menuTopRow .menuBrand{width:100%;overflow-wrap:anywhere}.menuTopRow .profileBadge{width:100%;max-width:none;flex-basis:auto;margin:0;padding:8px 10px}.menuTopRow .profileMeta{min-width:0}.menuTopRow .profileName,.menuTopRow .profileSub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (prefers-reduced-motion:reduce){.cell.aiTarget{animation:none;outline-width:4px}.fxBurst::before,.fxBurst::after{animation-duration:.01ms!important}}

/* v26 RC6 — precision touch, stable turn continuity, and non-displacing mobile feedback */
.turnRibbon{
  position:relative;
  z-index:36;
  width:100%;
  max-width:500px;
  height:42px;
  min-height:42px;
  margin:0 auto;
  overflow:visible;
}
.turnRibbonSummary{
  width:100%;
  height:42px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(79,70,229,.24);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(238,242,255,.96),rgba(255,255,255,.96));
  color:var(--text2);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  cursor:pointer;
  text-align:left;
}
.turnRibbonSummary b{
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#4338ca;
}
.turnRibbonSummary span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:850;
}
.turnRibbonSummary i{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(79,70,229,.1);
  color:#4338ca;
  font-style:normal;
  font-size:14px;
  font-weight:950;
}
.turnRibbonDrawer{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:80;
  display:grid;
  gap:8px;
  max-height:min(320px,60dvh);
  padding:10px;
  overflow:auto;
  border:1px solid rgba(100,116,139,.28);
  border-radius:14px;
  background:rgba(255,255,255,.99);
  box-shadow:0 20px 50px rgba(15,23,42,.24);
}
.ribbonSection{display:grid;gap:6px;}
.ribbonSection>b{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#334155;
}
.ribbonSection .forecastList{padding:0;}
.ribbonSection.impactSection{
  padding-top:8px;
  border-top:1px solid rgba(148,163,184,.22);
}
.ribbonSection.impactSection p{
  margin:0;
  font-size:11px;
  line-height:1.45;
  font-weight:800;
  color:#0f766e;
}

.boardStepBadge{
  position:absolute;
  top:6px;
  left:50%;
  z-index:39;
  transform:translateX(-50%);
  padding:5px 9px;
  border:1px solid rgba(79,70,229,.28);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#4338ca;
  box-shadow:0 5px 16px rgba(15,23,42,.13);
  font-size:9px;
  font-weight:950;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
}

.selectedCellTray{border-color:rgba(79,70,229,.38);}
.selectedCellIdentity{
  flex:0 0 auto;
  display:grid;
  gap:2px;
  min-width:74px;
  padding-right:9px;
  border-right:1px solid rgba(148,163,184,.26);
}
.selectedCellIdentity b{
  color:#312e81;
  font:950 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.selectedCellIdentity span{
  color:#64748b;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.previewPanel.selectedCellTray>b{display:none;}
.precisionTouchActive .cell.previewTarget{
  outline:4px solid rgba(15,23,42,.9);
  outline-offset:-5px;
}
.precisionTouchActive .cell.previewTarget::after{
  content:"TAP AGAIN";
  position:absolute;
  left:50%;
  bottom:3px;
  z-index:9;
  transform:translateX(-50%);
  padding:2px 4px;
  border-radius:4px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
}

.aiTelegraph-slow.aiEffectTarget-red .playerIdentity.redSide,
.aiTelegraph-slow.aiEffectTarget-blue .playerIdentity.blueSide{
  outline:3px solid rgba(14,165,233,.62);
  box-shadow:0 0 0 5px rgba(14,165,233,.1),0 10px 24px rgba(14,165,233,.16);
  animation:apTargetPulse .7s ease-in-out infinite alternate;
}
.aiTelegraph-claim .cell.ai-claim{box-shadow:inset 0 0 0 4px rgba(79,70,229,.78),0 0 16px rgba(79,70,229,.32);}
.aiTelegraph-purify .cell.ai-purify{box-shadow:inset 0 0 0 4px rgba(6,182,212,.78),0 0 16px rgba(6,182,212,.32);}
.aiTelegraph-boulderBreak .cell.ai-boulderBreak{box-shadow:inset 0 0 0 4px rgba(71,85,105,.82),0 0 18px rgba(71,85,105,.34);}
@keyframes apTargetPulse{from{filter:brightness(1)}to{filter:brightness(1.08)}}

@media (min-width:921px){
  .gameShell>.turnRibbon{max-width:none;margin-top:0;}
}

@media (max-width:920px){
  .gameShell>.commandDock{order:0;}
  .gameShell>.finalFoldBanner,
  .gameShell>.foldProgress,
  .gameShell>.turnRibbon{order:1;}
  .gameShell>.gridWrap{order:2;}
  .gameShell>.previewPanel{order:3;}
  .gameShell>.bottomHud{order:4;}
  .gameShell>.turnSequence,
  .gameShell>.instruction,
  .gameShell>.coachCard,
  .gameShell>.boardLegend{order:5;}
  .gameShell>.reviewPanel{order:6;}
  .gameShell>.transcriptStack{order:7;}
  .gameShell>.aiStatus{order:8;}
  .gameShell>.turnSequence,
  .gameShell>.instruction{width:100%;max-width:500px;}
}

@media (max-width:560px){
  .gameShell{gap:6px;padding:7px;}
  .foldProgress{padding:6px 8px;}
  .turnRibbon,
  .turnRibbonSummary{height:38px;min-height:38px;}
  .turnRibbonSummary{padding:5px 8px;}
  .turnRibbonSummary span{font-size:9px;}
  .turnRibbonDrawer{position:fixed;top:auto;right:7px;bottom:calc(7px + env(safe-area-inset-bottom));left:7px;max-height:min(390px,72dvh);}
  .turnSequence{margin-top:2px;}
  .instruction{min-height:0!important;padding:2px 4px;}
  .boardStepBadge{top:4px;padding:4px 7px;font-size:8px;}
  .previewPanel.selectedCellTray.pending{
    position:fixed;
    right:7px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    left:7px;
    z-index:74;
    width:auto;
    margin:0;
    padding:9px;
    border-radius:15px;
    box-shadow:0 18px 48px rgba(15,23,42,.28);
  }
  .selectedCellTray.pending .selectedCellIdentity{min-width:68px;}
  .selectedCellTray.pending>span{order:2;flex-basis:100%;}
  .selectedCellTray.pending .previewButtons{order:3;width:100%;}
  .selectedCellTray.pending .previewButtons .btn{min-height:46px;font-size:13px;}
  .previewPanel.hoverOnly{position:static;box-shadow:none;}
  .precisionTouchActive .cell.previewTarget::after{display:none;}
}

@media (pointer:coarse) and (max-width:560px){
  .previewPanel.hoverOnly{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .aiTelegraph-slow.aiEffectTarget-red .playerIdentity.redSide,
  .aiTelegraph-slow.aiEffectTarget-blue .playerIdentity.blueSide{animation:none;background:rgba(224,242,254,.72);}
}
.turnRibbonSummary:disabled{cursor:default;opacity:.9;}

/* v27 RC7 — orientation, overlay, normal document scrolling, and secondary-screen closure */
html{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
body{
  height:auto !important;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:visible;
  overscroll-behavior-y:auto;
}
#root{ min-height:100dvh; }

.secondaryMenuWrap{
  min-height:100dvh;
  align-items:flex-start;
  padding-top:max(10px, env(safe-area-inset-top));
  padding-bottom:max(18px, env(safe-area-inset-bottom));
}
.secondaryCard{
  position:relative;
  overflow:visible;
}
.secondaryStickyHeader{
  position:sticky;
  top:0;
  z-index:42;
  display:grid;
  grid-template-columns:minmax(88px,auto) minmax(0,1fr) minmax(88px,auto);
  align-items:center;
  gap:10px;
  margin:-14px -14px 14px;
  padding:10px 14px;
  border-bottom:1px solid rgba(148,163,184,.25);
  border-radius:18px 18px 12px 12px;
  background:rgba(248,250,252,.96);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  backdrop-filter:blur(14px);
}
.secondaryTitle{
  min-width:0;
  margin:0;
  text-align:center;
  color:#0f172a;
  font-size:18px;
  line-height:1.15;
  font-weight:950;
  outline:none;
}
.secondaryBack{ justify-self:start; }
.secondaryHeaderSpacer{ width:88px; }
.secondaryTitle:focus-visible{
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(79,70,229,.28);
}

.ribbonSection.selectedActionSection{
  padding:9px;
  border:1px solid rgba(79,70,229,.22);
  border-radius:12px;
  background:rgba(238,242,255,.72);
}
.ribbonSection.selectedActionSection p,
.ribbonSection.noticeSection p{
  margin:0;
  color:var(--text2);
  font-size:11px;
  line-height:1.45;
  font-weight:800;
}
.ribbonPreviewActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.commandDock.precisionCommands .btn{
  min-height:42px;
}

@media (max-width:560px){
  .secondaryStickyHeader{
    grid-template-columns:auto minmax(0,1fr) auto;
    margin:-12px -12px 12px;
    padding:8px 10px;
  }
  .secondaryTitle{ font-size:15px; }
  .secondaryBack{ min-width:76px; padding:8px 9px; font-size:11px; }
  .secondaryHeaderSpacer{ width:76px; }
  .precisionCommandMode .selectedCellTray.pending{ display:none !important; }
  .commandDock.precisionCommands{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .commandDock.precisionCommands .btn{ min-height:40px; }
}

/* A short landscape viewport receives a true two-column match stage. */
@media (orientation:landscape) and (max-height:520px) and (max-width:980px){
  .app{
    --landscape-board:min(calc(100dvh - 18px), 55vw);
    width:100%;
    max-width:none;
    min-height:100dvh;
    margin:0;
    padding:4px;
  }
  .app > .saveStatus.compact{ display:none; }
  .app > details.storageNotice.compact{
    position:fixed;
    right:6px;
    bottom:6px;
    z-index:95;
    width:min(330px,calc(100vw - var(--landscape-board) - 18px));
    margin:0;
  }
  .topBar{
    position:absolute;
    top:4px;
    right:4px;
    left:calc(var(--landscape-board) + 12px);
    z-index:34;
    grid-template-columns:1fr 1fr;
    gap:3px;
    padding:2px;
  }
  .topBar .matchStatus{
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    min-height:28px;
    padding:1px 4px;
  }
  .topBar .playerIdentity{
    grid-row:2;
    min-width:0;
    padding:4px 6px;
    border-radius:10px;
  }
  .identityLabel{ font-size:7px; }
  .identityName{ margin-top:0; font-size:9px; }
  .identityScore{ margin-top:0; font-size:14px; }
  .matchStatus .turn{ font-size:10px; }
  .statusSub{ display:none; }
  .actionPips{ margin-top:2px; gap:3px; }
  .actionPips span{ width:16px; height:5px; }

  .gameShell{
    display:grid;
    grid-template-columns:var(--landscape-board) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
    align-items:start;
    gap:4px 8px;
    min-height:calc(100dvh - 8px);
    padding:4px;
    border-radius:14px;
  }
  .gameShell > .gridWrap{
    position:relative;
    top:auto;
    left:auto;
    grid-column:1;
    grid-row:1 / span 8;
    align-self:start;
    width:var(--landscape-board);
    height:var(--landscape-board);
    margin:0;
    border-width:3px;
    border-radius:14px;
  }
  .gameShell > .commandDock{
    position:relative;
    top:auto;
    left:auto;
    grid-column:2;
    grid-row:1;
    width:100%;
    margin:76px 0 0;
    gap:4px;
  }
  .commandDock > .btn,
  .matchOptions > summary{
    min-height:34px;
    padding:6px 5px;
    font-size:9px;
    border-radius:10px;
  }
  .matchOptionsPanel{
    position:fixed;
    top:6px;
    right:6px;
    bottom:6px;
    left:auto;
    width:min(330px,46vw);
    max-height:calc(100dvh - 12px);
    overflow:auto;
  }
  .gameShell > .foldProgress{
    grid-column:2;
    grid-row:2;
    width:100%;
    max-width:none;
    margin:0;
    padding:5px 7px;
  }
  .foldTop{ font-size:9px; }
  .foldTrack{ height:7px; margin-top:4px; }
  .gameShell > .turnRibbon{
    grid-column:2;
    grid-row:3;
    width:100%;
    max-width:none;
    height:34px;
    min-height:34px;
    margin:0;
  }
  .turnRibbonSummary{
    height:34px;
    min-height:34px;
    padding:4px 7px;
    border-radius:10px;
  }
  .turnRibbonSummary span{ font-size:8px; }
  .turnRibbonDrawer{
    position:fixed;
    top:6px;
    right:6px;
    bottom:6px;
    left:auto;
    width:min(360px,48vw);
    max-height:none;
  }
  .gameShell > .bottomHud{
    position:relative;
    bottom:auto;
    grid-column:2;
    grid-row:4;
    width:100%;
    max-width:none;
    max-height:calc(var(--landscape-board) - 190px);
    margin:0;
    padding:5px;
    overflow:auto;
    border-radius:11px;
    box-shadow:none;
  }
  .bottomHud,
  .actionTools,
  .powerBar{
    grid-template-columns:1fr !important;
    gap:4px;
  }
  .actionTools .purpleToggle,
  .powerBtn{ min-height:34px; font-size:9px; }
  .pName,.pCost,.objName,.objDesc,.objProg,.objBonus,.pmLabel,.pmNum{ font-size:8px !important; }
  .meterStack{ gap:5px; }
  .powerMeter,.comboMeter{ min-width:0; }

  .gameShell > .finalFoldBanner{
    position:fixed;
    top:6px;
    left:6px;
    z-index:70;
    width:calc(var(--landscape-board) - 12px);
    margin:0;
    padding:6px;
    pointer-events:none;
  }
  .gameShell > .previewPanel,
  .gameShell > .turnSequence,
  .gameShell > .instruction,
  .gameShell > .coachCard,
  .gameShell > .boardLegend,
  .gameShell > .transcriptStack,
  .gameShell > .aiStatus{
    display:none;
  }
  .gameShell > .reviewPanel{
    grid-column:2;
    grid-row:2 / span 3;
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 86px);
    margin:0;
    overflow:auto;
  }
  .reviewingMatch .gameShell > .foldProgress,
  .reviewingMatch .gameShell > .turnRibbon,
  .reviewingMatch .gameShell > .bottomHud{ display:none; }
  .boardStepBadge{ top:3px; padding:3px 6px; font-size:7px; }
  .coordinateChip{ right:4px; bottom:4px; }
  .modalBack{ padding:4px; }
  .modal{ max-height:calc(100dvh - 8px); }
}

@media (prefers-reduced-motion:reduce){
  .secondaryStickyHeader{ backdrop-filter:none; }
}

/* RC7 secondary headers live outside content cards so sticky positioning is reliable. */
.secondaryMenuWrap{ overflow:visible; }
.secondaryMenuWrap > .secondaryStickyHeader{
  width:min(720px,96vw);
  margin:0;
  flex:0 0 auto;
}
.secondaryMenuWrap > .secondaryCard{ margin-top:0; }
@media (max-width:560px){
  .secondaryMenuWrap > .secondaryStickyHeader{ width:min(100%,96vw); }
}

/* `clip` prevents horizontal spill without turning body into a competing scroll container. */
html,body{
  overflow-x:clip !important;
  overflow-y:visible !important;
}

/* Active-match notices live in the Turn Ribbon; completed-match notices remain visible above result dialogs. */
.gameToast{ display:none; pointer-events:none; }
.matchComplete .gameToast{
  display:block;
  top:max(8px,env(safe-area-inset-top));
  bottom:auto;
  z-index:120;
  max-width:min(420px,calc(100vw - 16px));
  text-align:center;
}

/* Match Options must remain above the Turn Ribbon in the compressed landscape rail. */
.commandDock{ z-index:46; }
.commandDock:has(.matchOptions[open]){ z-index:92; }

/* Expanded ribbon details sit above ordinary commands; an open Match Options panel remains topmost. */
.turnRibbon.open{ z-index:105; }
.commandDock:has(.matchOptions[open]){ z-index:120; }


/* v28 1.0 Candidate — atomic settlement and recoverable completed Results */
.primaryPlayCard.completedResultReady{
  border-color:rgba(79,70,229,.45);
  box-shadow:0 12px 28px rgba(79,70,229,.12);
  background:linear-gradient(135deg,rgba(238,242,255,.96),rgba(255,255,255,.98));
}
.settlementNotice{
  display:grid;
  gap:4px;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  font-size:12px;
}
.settlementNotice b{ font-size:13px; }
.settlementNotice.pending{
  border-color:rgba(217,119,6,.38);
  background:rgba(254,243,199,.78);
  color:#78350f;
}
.settlementNotice.settled{
  border-color:rgba(5,150,105,.32);
  background:rgba(209,250,229,.72);
  color:#065f46;
}
.rewardEarned.pending{ opacity:.82; }
.settlementRetry{ border-color:rgba(217,119,6,.55)!important; }
@media (max-width:560px){
  .settlementNotice{ padding:9px 10px; font-size:11px; }
}
.settlementNotice.temporary{
  border-color:rgba(124,58,237,.34);
  background:rgba(237,233,254,.78);
  color:#5b21b6;
}