/* 🗺 THE LEARNING PLAN (js/plan.js over js/plan-core.js, 2026-09-18; the face
   rebuilt 2026-09-23 from the Plan GUI lab: the TOWER is the picture and
   FRAU ADLER's box is the voice). The screen on #plan-screen, the strip on
   the results panel (#plan-result), the setlist card (#plan-card) and the
   menu door (#plan-btn). Loads after stage.css, so the door's rules can
   outrank the Stage grid's. */

/* ------------------------------------------------------------ the screen */
#plan-screen { align-items: safe flex-start; }
.plan-panel { max-width: 1120px; width: 100%; text-align: left; padding: 8px 22px 18px; box-sizing: border-box; }
.plan-panel .back-bar { position: sticky; top: 0; z-index: 3; height: 0; }
.pln-head { text-align: center; margin: 8px 0 6px; }
.pln-head h1 { margin: 6px 0 4px; font-size: 30px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pln-goalline { color: #cfe6ff; font-size: 15px; }
.pln-goalline b { color: #fff; }
.pln-dim { color: rgba(255, 255, 255, .55); font-size: 13px; }

/* the buttons: one lit choice, one alternative, chips for a pick, tiny links */
.pln-pri { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; padding: 8px 22px; cursor: pointer;
  border: 0; border-radius: 12px; background: linear-gradient(180deg, #5fe0ff, #29c4f2); color: #06121a; font: 800 17px/1.15 inherit; font-family: inherit;
  letter-spacing: .6px; text-transform: uppercase; box-shadow: 0 6px 22px rgba(52, 211, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: pln-lit 1.6s ease-in-out infinite; max-width: 100%; text-align: center; }
.pln-pri small { font: 600 10px/1 inherit; font-family: inherit; letter-spacing: 1.5px; opacity: .55; }
.pln-pri.gold { background: linear-gradient(180deg, #ffe58a, #f1c232); box-shadow: 0 6px 22px rgba(255, 215, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .5); animation-name: pln-lit-gold; }
.pln-pri:hover:not(:disabled) { filter: brightness(1.06); }
.pln-pri:disabled { opacity: .6; cursor: progress; animation: none; }
@keyframes pln-lit { 0%, 100% { box-shadow: 0 6px 22px rgba(52, 211, 255, .35); } 50% { box-shadow: 0 6px 34px rgba(52, 211, 255, .7); } }
@keyframes pln-lit-gold { 0%, 100% { box-shadow: 0 6px 22px rgba(255, 215, 94, .35); } 50% { box-shadow: 0 6px 34px rgba(255, 215, 94, .75); } }
.pln-btn { font: inherit; font-size: 13px; font-weight: 700; color: #e6ecf5; padding: 7px 13px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .06); }
.pln-btn:hover { border-color: var(--cyan); color: #fff; }
.pln-tiny { font: inherit; font-size: 12px; color: rgba(255, 255, 255, .6); background: transparent; border: 0; padding: 3px 6px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.pln-tiny:hover { color: #fff; }
.pln-chip { font: inherit; font-size: 12.5px; font-weight: 700; color: #cfd8e3; padding: 6px 12px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }
.pln-chip:hover { border-color: rgba(255, 255, 255, .45); }
.pln-chip.on { border-color: rgba(52, 211, 255, .7); background: rgba(52, 211, 255, .16); color: #fff; }
.pln-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.pln-lbl { font-size: 12px; color: rgba(255, 255, 255, .6); margin-right: 2px; min-width: 82px; }
.pln-have { font-size: 12.5px; color: var(--gold); font-weight: 700; margin-right: 4px; }

/* ------------------------------------------------------------ Frau Adler's box */
.pln-scene.builder { min-height: min(72vh, 620px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.pln-coach { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 10px; }
.pln-portrait { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid rgba(255, 215, 94, .55);
  box-shadow: 0 0 40px rgba(255, 215, 94, .16), 0 12px 30px #0009; animation: pln-nod 1.8s ease-in-out infinite; }
.pln-coach.busy .pln-portrait { animation: none; }
@keyframes pln-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pln-box { position: relative; min-height: 112px; padding: 16px 18px 14px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 32, 50, .96), rgba(16, 20, 31, .96)); border: 1px solid rgba(255, 215, 94, .45); box-shadow: 0 10px 40px #000a;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text choices" "chips chips" "more more"; gap: 8px 18px; align-items: center; }
.pln-name { position: absolute; left: 18px; top: -13px; background: var(--gold); color: #2a2010; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pln-text { grid-area: text; margin: 0; font-size: 16.5px; line-height: 1.5; color: #f1f5fb; min-height: 50px; }
.pln-caret { display: inline-block; width: 8px; color: var(--gold); animation: pln-caret 1s steps(2) infinite; }
@keyframes pln-caret { to { opacity: 0; } }
.pln-choices { grid-area: choices; display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 230px; max-width: 320px; }
.pln-choices .pln-btn { text-align: center; }
.pln-tinyrow { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: center; }
.pln-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.pln-more { grid-area: more; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 6px; }
.pln-busy { display: flex; flex-direction: column; gap: 6px; }
.pln-busy span { font-size: 13px; color: #cfd8e3; }
.pln-busy i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pln-busy i::after { content: ""; display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, #34d3ff, #7dffb2); animation: pln-busy 1.2s ease-in-out infinite; }
@keyframes pln-busy { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ------------------------------------------------------------ the tower */
/* the floating ← Back sits over the top-left on a wide screen; the title starts past it */
.pln-hud { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 8px 104px; }
.pln-t { font-size: 18px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.pln-t small { display: block; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .55); text-transform: none; letter-spacing: .3px; margin-top: 2px; }
.pln-pill { margin-left: auto; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.pln-pill.green { color: #7be0a8; border-color: rgba(125, 255, 178, .5); background: rgba(47, 163, 107, .18); }
.pln-pill.blue { color: #9cc3ff; border-color: rgba(52, 160, 255, .5); background: rgba(52, 140, 255, .14); }
.pln-pill.amber { color: #f1c56a; border-color: rgba(224, 160, 60, .6); background: rgba(224, 160, 60, .14); }
.pln-pill.gold { color: var(--gold); border-color: rgba(255, 215, 94, .6); background: rgba(255, 215, 94, .14); }
.pln-jbtn { padding: 5px 10px; font-size: 15px; }
.pln-cele { margin: 4px 0 8px; padding: 10px 16px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(125, 255, 178, .16), rgba(125, 255, 178, .06)); border: 1px solid rgba(125, 255, 178, .5); animation: pln-pop .5s ease-out; }
.pln-cele b { display: block; font-size: 22px; color: #7dffb2; letter-spacing: 1px; }
.pln-cele span { color: #e6ecf5; font-size: 14px; }
@keyframes pln-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.pln-tview { position: relative; height: clamp(240px, calc(100vh - 380px), 560px); overflow: hidden auto; border-radius: 14px;
  background: radial-gradient(600px 400px at 50% 60%, #141a2a, #0a0a14 70%); border: 1px solid rgba(255, 255, 255, .1); }
.pln-tower { position: relative; margin: 0 auto; width: min(100%, 680px); }
.pln-floor { position: absolute; left: 0; right: 0; background: #12172480; border-top: 1px solid #262d40; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; cursor: pointer; box-sizing: border-box; }
.pln-floor:hover { background: #1a213380; }
.pln-num { width: 44px; text-align: center; font-size: 12px; font-weight: 700; color: #55607a; border-right: 1px solid #262d40; height: 100%; display: grid; place-items: center; flex: none; }
.pln-floor.done { background: #10231a80; }
.pln-floor.done .pln-num { color: #6fbf8f; }
.pln-floor.now { background: linear-gradient(180deg, #1c2338, #141a2a); border-top-color: var(--gold); border-bottom: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(255, 215, 94, .2), 0 0 40px rgba(255, 215, 94, .08); z-index: 2; cursor: default; }
.pln-floor.now .pln-num { color: var(--gold); font-size: 15px; }
.pln-floor.gate { border-top-color: rgba(255, 215, 94, .5); }
.pln-floor.crown { background: linear-gradient(180deg, #3a2f14, #1c1a12); border-top-color: var(--gold); }
.pln-floor.buf { border-top-style: dashed; }
.pln-floor.view { outline: 2px solid var(--cyan); outline-offset: -2px; }
.pln-doors { display: flex; gap: 6px; flex: 1; align-items: center; min-width: 0; overflow: hidden; }
.pln-door { display: inline-grid; place-items: center; width: 26px; height: 32px; border-radius: 6px 6px 2px 2px; font-size: 13px; background: #1a2030; border: 1px solid #2f3850; opacity: .5; flex: none; }
.pln-door.done { background: #1f5a3a; border-color: #2fa36b; opacity: 1; }
.pln-door.done.aside { background: #3a2a1a; border-color: #8a6a3a; opacity: .8; }
.pln-door.check { border-color: var(--gold); }
.pln-door.rem { border-style: dashed; }
.pln-floor.now .pln-door { width: 90px; height: 70px; grid-template-rows: 1fr auto; font-size: 22px; padding: 6px 4px 5px; opacity: .55; box-sizing: border-box; }
.pln-floor.now .pln-door small { font-size: 9.5px; line-height: 1.15; font-weight: 600; color: #cfd8e3; text-align: center; max-height: 22px; overflow: hidden; }
.pln-floor.now .pln-door.done { opacity: 1; }
.pln-floor.now .pln-door.lit { opacity: 1; border-color: var(--gold); background: #2a2414; box-shadow: 0 0 0 2px rgba(255, 215, 94, .35); animation: pln-door 1.4s ease-in-out infinite; }
@keyframes pln-door { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 94, .35); } 50% { box-shadow: 0 0 0 4px rgba(255, 215, 94, .7); } }
.pln-lbl2 { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex: none; }
.pln-floor.done .pln-lbl2, .pln-floor.later .pln-lbl2 { color: #7b8296; }
.pln-lock { color: #55607a; font-size: 12px; flex: none; }
.pln-hero { position: absolute; width: 40px; height: 60px; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 4px #000a); z-index: 3; pointer-events: none; transition: left .5s ease, top .6s cubic-bezier(.2, .8, .2, 1); }
.pln-date { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--orange); z-index: 3; pointer-events: none; }
.pln-date span { position: absolute; right: 8px; top: 4px; background: #2a2010; color: var(--orange); border: 1px solid var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* ------------------------------------------------------------ the 📖 journal */
.pln-journal { position: relative; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.pln-journal .pln-close { position: absolute; right: 12px; top: 10px; }
.pln-journal h3 { margin: 4px 0 8px; font-size: 12px; letter-spacing: 2px; font-weight: 900; color: var(--gold); }
.pln-strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 12px; }
.pln-cell { width: 30px; height: 28px; border-radius: 6px; font: inherit; font-size: 11px; color: rgba(255, 255, 255, .55); cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); padding: 0; }
.pln-cell.later { opacity: .6; }
.pln-cell.done { background: rgba(47, 163, 107, .3); border-color: #2f6b4b; color: #aef0c8; opacity: 1; }
.pln-cell.today { outline: 2px solid var(--gold); color: #fff; opacity: 1; }
.pln-cell.ms, .pln-cell.cap { border-color: var(--gold); font-size: 13px; }
.pln-cell.cap { background: rgba(255, 215, 94, .16); }
.pln-cell.buf { border-style: dashed; }
.pln-ms { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; columns: 2; column-gap: 24px; }
.pln-ms li { display: grid; grid-template-columns: 56px 1fr 22px; column-gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .07); break-inside: avoid; }
.pln-ms li:first-child { border-top: 0; }
.pln-ms li b { color: #eef4fb; font-weight: 700; }
.pln-ms li i { grid-column: 2; color: rgba(255, 255, 255, .45); font-style: normal; font-size: 12px; }
.pln-ms li.done b { color: #7dffb2; }
.pln-msday { color: var(--gold); font-weight: 800; grid-row: span 2; }
.pln-msst { grid-row: span 2; text-align: right; }
.pln-log { font-size: 12.5px; color: #d6dee9; max-height: 220px; overflow: auto; }
.pln-log div { padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .07); line-height: 1.4; }
.pln-log em { color: var(--gold); font-style: normal; margin-right: 6px; font-weight: 700; }
.pln-foot { margin-top: 12px; text-align: right; }

/* ------------------------------------------------------------ the results strip */
.pln-result { margin: 12px auto 4px; max-width: 560px; text-align: left; border: 1px solid rgba(52, 211, 255, .6); border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 60, 90, .5), rgba(10, 16, 28, .6)); padding: 12px 16px 14px; }
.pln-result.hidden { display: none; }
.pln-res-h { font-size: 11px; letter-spacing: .12em; color: #8fdcff; margin-bottom: 4px; }
.pln-res-line { font-size: 16px; color: #eef4fb; }
.pln-res-line b { margin-right: 8px; }
.pln-yes { color: #7dffb2; } .pln-no { color: #ffb4bd; }
.pln-res-note { margin: 6px 0 10px; font-size: 13.5px; color: #c9d3e0; line-height: 1.45; }
.pln-res-note .pln-cele { margin: 10px 0 0; }
.pln-res-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pln-res-acts .mode-btn { margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ the menu */
.plan-card .db-ico { font-size: 22px; }
/* the door: its own row under the two hero doors, outlined in the accent so
   it reads as new without competing with PLAY or ADVENTURE */
.menu-under > #plan-btn.mode-btn { grid-column: span 6; border-color: rgba(52, 211, 255, .55); }
html[data-menu="stage"] #menu .menu-under:has(> #atlantis-btn.hidden) > #plan-btn.mode-btn,
html[data-menu="stage"] #menu .menu-under > #plan-btn.mode-btn { grid-column: span 6; border-color: rgba(52, 211, 255, .55); color: #dff6ff; }

/* ------------------------------------------------------------ a phone */
@media (max-width: 620px) {
  .plan-panel .back-bar { height: auto; }   /* the bar takes real height here and pushes the title down */
  .pln-hud { padding-left: 0; }
}
@media (max-width: 900px) {
  .pln-ms { columns: 1; }
  .pln-box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "chips" "more" "choices"; gap: 8px; }
  .pln-choices { min-width: 0; max-width: none; }
}
@media (max-width: 560px) {
  .plan-panel { padding: 8px 12px 14px; }
  .pln-head h1 { font-size: 24px; }
  .pln-coach { grid-template-columns: minmax(0, 1fr); }
  .pln-portrait { width: 64px; height: 64px; margin-left: 14px; margin-bottom: -22px; position: relative; z-index: 1; animation: none; }
  .pln-box { padding-top: 22px; }
  .pln-name { left: 92px; top: -10px; }
  .pln-text { font-size: 15px; }
  .pln-tview { height: clamp(220px, calc(100vh - 430px), 420px); }
  .pln-floor.now .pln-door { width: 66px; height: 66px; font-size: 20px; }
  .pln-t { font-size: 15px; }
  .pln-t small { display: none; }
  .pln-pill { font-size: 10px; white-space: normal; max-width: 100%; text-align: right; }
  .pln-hero { width: 32px; height: 48px; }
  .pln-lbl { min-width: 0; width: 100%; }
}