/* ✅ MemoRiii Training – Clean & Fixed */

#adminModal {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
}

#adminModal.open {
  display: block;
}

#adminModal .modal-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: var(--card, #101319);
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.45);
  overflow: auto;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

#adminModal.fullscreen .modal-card {
  width: 100vw;
  height: 100vh;
  border-left: none;
  box-shadow: none;
}

#adminModal .modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

#adminModal .btn.small {
  padding: 6px 10px;
  border-radius: 8px;
}

body.training-page .training-gate {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none !important;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 14, 0.82);
  backdrop-filter: blur(2px);
  padding: 20px;
}

body.training-page .training-gate.show {
  display: flex !important;
}

body.training-page .training-gate-card {
  width: min(560px, 92vw);
  border: 1px solid rgba(120, 227, 255, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.98), rgba(4, 9, 16, 0.98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  padding: 18px;
}

body.training-page .training-gate-title {
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 700;
}

body.training-page .training-gate-text {
  margin: 0 0 12px;
  color: var(--text-muted, #b8c2d4);
  line-height: 1.45;
}

body.training-page .training-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.training-page .training-gate-actions .btn {
  text-decoration: none;
}

body.training-locked #skipBtn {
  opacity: .55;
  pointer-events: none;
}

.footer-legal-btn{background:transparent;border:none;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
body.training-page.legal-overlay-open{overflow:hidden}
body.training-page .legal-overlay{position:fixed;inset:0;display:none !important;align-items:center;justify-content:center;padding:20px;background:rgba(4,8,14,.86);backdrop-filter:blur(7px);z-index:12000}
body.training-page .legal-overlay.is-open{display:flex !important}
body.training-page .legal-overlay-card{width:min(1060px,100%);height:min(90vh,920px);background:#0a1420;border:1px solid rgba(47,227,200,.45);border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:0 24px 70px rgba(0,0,0,.55)}
body.training-page .legal-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(47,227,200,.25);background:rgba(47,227,200,.08)}
body.training-page .legal-overlay-head h3{margin:0;font-size:1rem;color:#dffaf5}
body.training-page .legal-overlay-close{border:1px solid rgba(47,227,200,.5);background:rgba(7,30,44,.75);color:#dffaf5;width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:1.1rem;line-height:1}
body.training-page .legal-overlay-frame{width:100%;height:100%;border:0;background:#fff}

body.training-page .site-header .nav [hidden] {
  display: none !important;
}

body.training-page .site-header .nav [data-public-only][hidden],
body.training-page .site-header .nav [data-auth-only][hidden] {
  display: none !important;
}

body.training-page.auth-nav-authenticated .site-header .nav [data-public-only],
body.training-page.auth-nav-public .site-header .nav [data-auth-only] {
  display: none !important;
}

body.training-page {
  margin: 0;
  font: 16px/1.4 "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #e8f3ff;
  background:
    radial-gradient(1400px 820px at 65% -240px, rgba(47,227,200,.18), transparent 72%),
    radial-gradient(1100px 720px at -30% 10%, rgba(22,46,72,.35), transparent 70%),
    #050a12;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-stage {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(6px, 1.2vh, 12px) 0 clamp(18px, 2.6vh, 24px);
  min-height: 0;
  overflow: hidden;
}

.app-stage .training-section {
  flex: 0 0 auto;
  display: flex;
  padding: 0;
  border-top: 0;
  min-height: 0;
}

.training-container {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(24px,4vh,32px);
  width:min(1100px,94vw);
  margin:0 auto;
  min-height:0;
}

.training-layer{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(28px,5vw,64px);
  padding:clamp(16px,2.2vw,24px) clamp(24px,4vw,36px) clamp(16px,2.4vw,24px);
}

.training-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(4,16,24,.78), rgba(6,20,32,.55));
  border:1px solid rgba(47,227,200,.12);
  border-radius:36px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  z-index:0;
}

.training-aside{
  width:clamp(180px, 22vw, 240px);
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 2.6vh, 24px);
  z-index:1;
}

.training-title{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.training-title h1 {
  margin: 0 0 8px;
  line-height: 1.08;
  overflow: visible;
}
.training-title .trainer-toggle{ width:fit-content; }
.training-title .badge:not(.trainer-toggle){ cursor:default; }

.training-stage-wrap{
  position:relative;
  flex:0 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:0;
  z-index:1;
}

.training-head {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.training-actions { display:none !important; }

.wrap {
  width: min(1180px, 92vw);
  margin: 48px auto 80px auto;
}

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

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

.title h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: .4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(47,227,200,.18);
  border: 1px solid rgba(47,227,200,.35);
  color: #c8fff7;
  font-weight: 600;
}

.badge-primary{
  background:linear-gradient(135deg, #2fe3c8, #12bfa5);
  border:none;
  color:#041312;
  font-weight:700;
  box-shadow:0 14px 28px rgba(15,189,165,.45);
}

.trainer-toggle{
  background:linear-gradient(135deg, #2fe3c8, #12bfa5);
  border:none;
  color:#041312;
  font-weight:700;
  box-shadow:0 12px 24px rgba(15,189,165,.35);
  cursor:pointer;
  transition:background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.trainer-toggle:hover{ transform:translateY(-1px); }
.trainer-toggle[aria-pressed="true"],
.trainer-toggle.is-active{
  box-shadow:0 0 0 2px rgba(47,227,200,.65), 0 18px 36px rgba(15,189,165,.55);
}

.mode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mode .btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,20,28,.65);
  color: #e8f3ff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease;
}

.mode .btn.primary {
  background: linear-gradient(135deg, #2fe3c8, #12bfa5);
  color: #041312;
  border-color: rgba(10,36,34,.45);
  box-shadow: 0 16px 32px rgba(15,189,165,.45);
}

.mode .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.35);
}

.mode .btn.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
}

#hud.card {
  margin-top: 22px;
  background: rgba(6,18,28,.78);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  width: 100%;
}

#hud .row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

#hud .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(47,227,200,.12);
  border: 1px solid rgba(47,227,200,.28);
}

#hud .bar {
  flex: 0 0 260px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

#hud {
  display: none !important;
}

#progbar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, #2fe3c8, #12bfa5);
  border-radius: inherit;
  transition: width .35s ease;
}

.stage-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding-block: clamp(0px, 1vh, 8px);
  align-self:stretch;
  justify-self:stretch;
}

.stage {
  position:relative;
  padding: clamp(0px, 2vh, 12px);
  background: transparent;
  border-radius: 32px;
  border: none;
  box-shadow: none;
  display:flex;
  justify-content:center;
  align-items:center;
  width:min(520px, 88vw, calc(var(--train-available-h, 820px) * 0.58));
  margin:0 auto;
  flex:0 0 auto;
  align-self:center;
  justify-self:center;
  min-height:var(--train-stage-h, 520px);
  max-height:var(--train-stage-h, 520px);
  height:var(--train-stage-h, 520px);
  isolation:isolate;
}

.stage::before,
.stage::after{
  content:"";
  position:absolute;
  left:50%;
  width:calc(100% - clamp(48px, 8vw, 96px));
  max-width:460px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(47,227,200,.32), transparent);
  box-shadow:0 0 0 1px rgba(47,227,200,.08);
  border-radius:999px;
  opacity:.65;
  pointer-events:none;
}

.stage::before{ top:calc(-1 * clamp(36px, 6vh, 48px)); transform:translateX(-50%); }
.stage::after{ bottom:calc(-1 * clamp(36px, 6vh, 48px)); transform:translateX(-50%); }

.imgbox {
  width:100%;
  max-width:560px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.imgwrap {
  --overlay-h: 132px;
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:#040a12;
  flex:0 0 auto;
  display:block;
  width:min(520px, 88vw, calc(var(--train-available-h, 820px) * 0.58));
  max-height:var(--train-available-h, 820px);
  aspect-ratio:9 / 16;
  margin:0 auto;
  padding-bottom:var(--overlay-h);
  box-shadow:
    0 34px 72px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 22px rgba(47,227,200,.35),
    0 0 48px rgba(47,227,200,.12),
    0 0 0 2px rgba(47,227,200,.22);
  isolation:isolate;
}

.imgwrap img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  z-index:1;
  background:radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,.35), transparent 80%);
}

.imgwrap img.hide{
  display:none !important;
}

#phFallback{
  position:absolute;
  inset:0;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:radial-gradient(120% 120% at 50% 35%, rgba(47,227,200,.18), rgba(6,14,20,.82));
  color:rgba(232,243,255,.72);
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  z-index:0;
}

#phFallback.hide{
  display:none !important;
}

.meta {
  margin-top: 14px;
  text-align: center;
  color: rgba(234,240,247,.6);
}

#overlay {
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:calc((100% - clamp(24px, 5vw, 42px)) * 1.25);
  max-width:calc((100% - 32px) * 1.25);
  padding:20px 30px 26px;
  text-align:center;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  z-index:2;
  height:calc(var(--overlay-h, 132px) * 1.25);
  min-height:calc(var(--overlay-h, 132px) * 1.25);
  max-height:calc(var(--overlay-h, 132px) * 1.25);
  overflow:hidden;
  border-radius:18px;
}

#overlay h3 {
  margin:0;
  font-size:clamp(0.95rem, 1.8vw, 1.05rem);
  font-weight:700;
  color:var(--fg, #e9eef7);
  text-shadow:0 3px 8px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.25;
  white-space:normal;
  width:100%;
  max-height:calc(var(--overlay-h, 120px) * 0.55);
  overflow:hidden;
  padding-inline:8px;
}

#overlayChoices {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:clamp(10px, 2.4vw, 16px);
  width:100%;
  overflow:visible;
  padding-inline:8px;
}

.choice {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(47,227,200,.30);
  background:linear-gradient(135deg, rgba(5,26,28,.90), rgba(8,34,36,.68));
  color:#eaf0f7;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
  white-space:nowrap;
  flex:0 1 auto;
  min-width: auto;
  text-overflow:clip;
  overflow:visible;
}

.choice:hover,
.choice:focus-visible {
  transform: translateY(-1px);
  border-color: #2fe3c8;
  box-shadow: 0 14px 26px rgba(16,189,166,.38);
  outline: none;
}

.choice.active {
  border-color: #2fe3c8;
  box-shadow: 0 0 0 3px rgba(47,227,200,.22) inset;
}

#overlayChoices > .choice {
  background: linear-gradient(135deg, rgba(6,24,26,.92), rgba(5,18,20,.74));
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5,10,16,.72);
  backdrop-filter: blur(12px);
  z-index: 9999;
}

.modal.open { display: flex; }

.modal-card {
  width: min(780px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: rgba(6,16,24,.92);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 32px 70px rgba(0,0,0,.6);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,20,30,.88);
}

.modal .live {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid .cell {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip,
.auto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
}

.bad {
  background: linear-gradient(135deg,#d35252,#8c1f1f);
  color:#fff;
}

.placeholder {
  display: none !important;
}

#startOverlay .hint {
  display: none !important;
}

@media (max-width: 720px) {
  body.training-page {
    display:block;
    min-height:auto;
  }
  .app-stage {
    padding:0 0 12px;
    overflow:visible;
  }
  .app-stage .training-section {
    display:block;
  }
  .wrap { margin: 32px auto 60px; }
  .training-layer{
    flex-direction:row;
    gap:10px;
    align-items:flex-start;
    justify-content:center;
    padding:16px 10px 18px;
  }
  .training-aside{
    width:94px;
    min-width:94px;
    gap:10px;
  }
  .training-stage-wrap{
    width:auto;
    min-width:0;
  }
  .training-title{ align-items:flex-start; }
  .training-title h1{
    margin-bottom:6px;
    max-width:94px;
    font-size:clamp(.92rem, 3.2vw, 1.05rem);
    line-height:1;
    white-space:nowrap;
  }
  .training-title .trainer-toggle{
    max-width:94px;
    justify-content:center;
    white-space:normal;
    text-align:center;
    line-height:1.12;
    padding:6px 8px;
    font-size:.74rem;
  }
  .training-badges{ align-items:center; }
  .training-badges .badge{ width:auto; }
  .stage-shell{ padding-block:0; }
  .stage { padding: 8px; border-radius: 26px; width:min(300px, calc(100vw - 126px), calc(var(--train-available-h, 720px) * 0.58)); }
  .stage::before,
  .stage::after{ display:none; }
  .imgwrap { border-radius: 22px; width:min(300px, calc(100vw - 126px), calc(var(--train-available-h, 720px) * 0.58)); }
  .meta{ display:none; }
  #overlay {
    width:calc(100% - 18px);
    padding:12px 14px 14px;
    border-radius:16px;
  }
  #overlay h3{ font-size:clamp(0.9rem, 3.2vw, 1rem); max-height:48px; }
  #overlayChoices{ gap:clamp(8px, 4vw, 14px); }
  .choice{ padding:9px 14px; }
}

@media (max-width: 540px) {
  .training-layer{
    gap:8px;
    padding-inline:8px;
  }
  .training-aside{
    width:86px;
    min-width:86px;
  }
  .training-title .trainer-toggle{
    max-width:86px;
    padding:6px 7px;
    font-size:.69rem;
  }
  .stage {
    width:min(292px, calc(100vw - 110px), calc(var(--train-available-h, 640px) * 0.58));
    padding:8px;
  }
  .imgwrap {
    width:min(292px, calc(100vw - 110px), calc(var(--train-available-h, 640px) * 0.58));
    border-radius:20px;
  }
  #overlay {
    width:calc(100% - 14px);
    padding:10px 12px 12px;
    border-radius:14px;
  }
  #overlay h3{ font-size:clamp(0.85rem, 4vw, 0.96rem); max-height:44px; }
  #overlayChoices{ gap:clamp(6px, 5vw, 12px); }
  .choice{ padding:8px 12px; }
}

@media (max-width: 400px){
  .training-aside{
    width:78px;
    min-width:78px;
  }
  .training-title .trainer-toggle{
    max-width:78px;
    font-size:.64rem;
    padding:5px 6px;
  }
  .stage {
    width:min(280px, calc(100vw - 98px), calc(var(--train-available-h, 640px) * 0.58));
  }
  .imgwrap {
    width:min(280px, calc(100vw - 98px), calc(var(--train-available-h, 640px) * 0.58));
  }
  #overlay{
    padding:10px 12px 12px;
  }
  #overlay h3{ font-size:clamp(0.82rem, 4.6vw, 0.92rem); max-height:42px; }
  #overlayChoices{ gap:8px; }
  .choice{
    padding:8px 10px;
    font-size:.95rem;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  .training-layer{
    gap:8px;
    padding:8px 10px 10px;
  }
  .training-aside{
    width:82px;
    min-width:82px;
    gap:6px;
  }
  .training-title h1{
    max-width:82px;
    margin-bottom:3px;
    font-size:.82rem;
  }
  .training-title .trainer-toggle{
    max-width:82px;
    padding:5px 6px;
    font-size:.61rem;
    line-height:1.08;
  }
  .stage{
    width:min(320px, calc(100vw - 112px), calc(var(--train-available-h, 520px) * 0.86));
    padding:4px;
  }
  .imgwrap{
    --overlay-h:82px;
    width:min(320px, calc(100vw - 112px), calc(var(--train-available-h, 520px) * 0.86));
  }
  #overlay{
    height:92px;
    min-height:92px;
    max-height:92px;
    padding:6px 8px 8px;
    gap:6px;
  }
  #overlay h3{
    max-height:32px;
    font-size:.72rem;
    line-height:1.1;
  }
  #overlayChoices{
    justify-content:flex-start;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-inline:0;
    scrollbar-width:none;
  }
  #overlayChoices::-webkit-scrollbar{ display:none; }
  .choice{
    flex:0 0 auto;
    padding:6px 10px;
    font-size:.72rem;
    line-height:1.05;
  }
}