/* medsim-anatomy-game.css: mobile-portrait-first layout for MedSim anatomy games (Falcon 9 / Planet Quest quiz look) */
:root{--c:#2ad1d6;--bg:#060a12;--panel:#0b1626;--txt:#e5e7eb;--mut:#9bb4c8;--ok:#39ff14;--no:#ef4444;--sheet-max:46dvh}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overscroll-behavior:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;height:100dvh}
#topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) 8px calc(env(safe-area-inset-left) + 12px);background:linear-gradient(180deg,rgba(6,10,18,.95),rgba(6,10,18,.6));z-index:5}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand .tag{font-size:12px;letter-spacing:.25em;color:var(--c);font-weight:800}
.brand h1{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:28px;letter-spacing:1px;color:#fff;text-shadow:0 0 14px rgba(42,209,214,.5);white-space:nowrap}
button{font-family:inherit;touch-action:manipulation;cursor:pointer}
.icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(42,209,214,.5);background:rgba(42,209,214,.12);color:#fff;font:900 18px Georgia,serif}
#view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#13243a 0%,#060a12 75%)}
#view canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.lbl{position:absolute;transform:translate(-50%,-100%);padding:4px 9px;border-radius:999px;background:rgba(5,12,22,.78);border:1px solid rgba(42,209,214,.45);color:#e8fbfc;font-size:13px;font-weight:600;white-space:nowrap}
.lbl.sel{background:rgba(42,209,214,.92);color:#031014;border-color:#fff;font-weight:900;font-size:15px;z-index:3}
#hoverTip{position:absolute;z-index:4;pointer-events:none;padding:5px 10px;border-radius:10px;background:rgba(5,12,22,.9);border:1px solid var(--c);font-size:14px;font-weight:700}
#hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;font-size:13px;color:var(--mut);background:rgba(5,10,18,.6);padding:6px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .5s}
#loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);font-weight:800;letter-spacing:.06em}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(42,209,214,.2);border-top-color:var(--c);animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#sheet{position:relative;z-index:5;flex:0 0 auto;max-height:var(--sheet-max);overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(160deg,#0b1626,#060a12);border-top:2px solid var(--c);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(42,209,214,.18);padding:0 calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 14px)}
#grab{display:block;width:100%;height:26px;border:0;background:none;padding:0}
#grab i{display:block;margin:8px auto;width:46px;height:5px;border-radius:9px;background:rgba(255,255,255,.3)}
#sheet.collapsed .collapsible{display:none}
#sheet.collapsed #credit{display:none}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(42,209,214,.3);border-radius:14px;padding:10px 14px;margin-bottom:10px;min-height:86px}
.card .k{font-size:12px;letter-spacing:.2em;color:var(--c);font-weight:800}
.card .n{font-size:21px;font-weight:900;color:#fff;margin:3px 0 2px;line-height:1.2}
.card .d{font-size:15px;color:var(--mut);line-height:1.35}
.sec{font-size:12px;letter-spacing:.2em;color:var(--mut);font-weight:800;margin:4px 0 6px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.chip,.tool{min-height:46px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-weight:800;font-size:14px;padding:6px 6px;line-height:1.15}
.chip[aria-pressed="true"]{border-color:var(--c);background:rgba(42,209,214,.16)}
.chip[aria-pressed="false"]{opacity:.55;text-decoration:line-through}
.tool[aria-pressed="true"]{border-color:rgba(42,209,214,.6)}
.go,.btn{border:0;border-radius:12px;font-weight:900;letter-spacing:.06em;font-size:16px}
.go{background:var(--c);color:#031014;box-shadow:0 0 18px rgba(42,209,214,.45)}
.wide{display:block;width:100%;min-height:52px;margin:4px 0 8px}
#credit{font-size:12px;line-height:1.45;color:var(--mut);padding:4px 2px 0}
#credit a,.modal a{color:var(--c)}
/* Quiz panel (ported from the Falcon 9 Pad Quest / Planet Quest quiz styles) */
#quiz{text-align:center;padding-bottom:6px}
#quiz .tag,.qz .tag{font-size:12px;letter-spacing:.25em;color:var(--c);font-weight:800}
#quiz .bar{display:flex;justify-content:space-between;gap:6px;font-weight:800;font-size:13px;margin:6px 0 8px}
#quiz .bar span{background:rgba(42,209,214,.12);border:1px solid rgba(42,209,214,.35);border-radius:999px;padding:5px 10px}
#quiz .prog{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:10px}
#quiz .prog i{display:block;height:100%;background:linear-gradient(90deg,#2ad1d6,#7cf);transition:width .3s}
#quiz .q{font-size:19px;font-weight:800;margin:4px 0 12px;color:#fff;line-height:1.3}
#quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#quiz .opt{min-height:52px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.18);color:#fff;border-radius:12px;padding:8px;font-weight:700;font-size:15px;transition:transform .1s,border-color .15s,background .15s}
#quiz .opt b{color:var(--c);margin-right:6px}
#quiz .opt.ok{background:rgba(57,255,20,.18);border-color:var(--ok)}
#quiz .opt.no{background:rgba(239,68,68,.2);border-color:var(--no)}
#quiz .tapcue{font-size:15px;color:var(--mut);margin:-4px 0 10px}
#quiz .fx{min-height:24px;margin-top:10px;font-weight:900;letter-spacing:.06em;font-size:15px}
#quiz .row{display:flex;gap:8px;justify-content:center;margin-top:6px}
#quiz .row .btn{min-height:46px;padding:0 22px}
.alt{background:rgba(255,255,255,.08);color:#e5e7eb;border:1px solid rgba(255,255,255,.2)}
@media (hover:hover){#quiz .opt:hover{border-color:var(--c);transform:translateY(-2px)}}
/* Result + credits modals (Falcon 9 final-score card) */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);background:radial-gradient(ellipse at center,rgba(8,20,40,.82),rgba(0,0,0,.94))}
.modal[hidden]{display:none}
.qz{width:min(94vw,560px);max-height:100%;overflow:auto;background:linear-gradient(160deg,#0b1626,#060a12);border:2px solid var(--c);border-radius:20px;box-shadow:0 0 40px rgba(42,209,214,.35),inset 0 0 30px rgba(42,209,214,.08);padding:20px;color:var(--txt);text-align:center;animation:pin .35s ease-out}
.qz.left{text-align:left}.qz p{font-size:15px;line-height:1.5}
@keyframes pin{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.qz h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(34px,9vw,52px);line-height:1;margin:6px 0 8px;color:#fff;text-shadow:0 0 18px rgba(42,209,214,.6);letter-spacing:1px}
.qz .stars{font-size:46px;letter-spacing:8px;margin:4px 0}
.qz .stars .on{color:#ffd54a;text-shadow:0 0 16px rgba(255,213,74,.8)}.qz .stars .off{color:rgba(255,255,255,.15)}
.qz .big{font-family:'Bebas Neue',Impact,sans-serif;font-size:64px;line-height:1;color:var(--c)}
.qz .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.qz .stat div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 4px;font-size:12px;letter-spacing:.06em}
.qz .stat b{display:block;font-size:22px;color:#fff;letter-spacing:0}
.qz .badge{display:inline-block;margin:8px 0 2px;padding:6px 14px;border-radius:999px;border:1px solid #ff8a1f;color:#ff8a1f;font-weight:900;font-size:13px;letter-spacing:.12em}
.qz .btn{display:inline-block;margin:10px 4px 0;min-height:48px;padding:0 22px}
.qz .nb{color:#ffd54a;font-weight:900;letter-spacing:.15em}
/* Desktop / landscape: sheet becomes a right-hand panel */
@media (min-width:900px) and (orientation:landscape){
  #app{display:grid;grid-template-columns:1fr 400px;grid-template-rows:auto 1fr}
  #topbar{grid-column:1 / span 2}
  #view{grid-column:1;grid-row:2}
  #sheet{grid-column:2;grid-row:2;max-height:none;border-top:0;border-left:2px solid var(--c);border-radius:0;padding-top:12px}
  #grab{display:none}
  #sheet.collapsed .collapsible,#sheet.collapsed #credit{display:block}
  .brand h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* IFS shell: start screen, How to Play, top-bar buttons, embed mode */
.tb-right{display:flex;gap:8px}
#startScreen{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);background:radial-gradient(ellipse at 50% 30%,rgba(19,36,58,.92),rgba(6,10,18,.97) 70%)}
#startScreen.hidden{display:none}
.st-card{width:min(92vw,420px);text-align:center}
.st-tag{font-size:13px;letter-spacing:.25em;color:var(--c);font-weight:800}
.st-logo{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:clamp(56px,17vw,86px);line-height:.9;color:#fff;margin:10px 0 12px;text-shadow:0 0 22px rgba(42,209,214,.55)}
.st-logo span{display:block;color:var(--c)}
.st-sub{font-size:17px;line-height:1.45;color:#cfe3ee;margin:0 0 20px}
.st-btn{display:block;width:100%;min-height:56px;margin:0 0 12px;border-radius:14px;font-weight:900;font-size:18px;letter-spacing:.08em}
.st-btn.go{background:var(--c);color:#031014;border:0;box-shadow:0 0 24px rgba(42,209,214,.55)}
.st-btn.alt{background:rgba(255,255,255,.07);color:#fff;border:2px solid rgba(255,255,255,.25)}
.st-best{font-weight:900;letter-spacing:.2em;color:#ffd54a;margin:6px 0 4px}
.st-credit{font-size:12px;color:var(--mut);margin:12px 0 0}
.htp{z-index:60;align-items:flex-start;overflow:auto}
.htp-inner{position:relative;max-height:none;margin:auto;scrollbar-color:#2ad1d6 #0b1626}
.htp-inner::-webkit-scrollbar{width:10px}.htp-inner::-webkit-scrollbar-thumb{background:#2ad1d6;border-radius:9px}.htp-inner::-webkit-scrollbar-track{background:#0b1626}
.htp-inner h1{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:32px;line-height:1.05;color:#fff;margin:44px 0 10px}
.htp-inner h2{font-size:18px;color:var(--c);margin:18px 0 6px}.htp-inner h3{font-size:16px;color:#fff;margin:14px 0 4px}
.htp-inner p,.htp-inner li{font-size:15px;line-height:1.55;color:#d6e2ea}.htp-inner ul{padding-left:20px}
.htp-close{position:absolute;top:12px;right:12px;min-height:44px;padding:0 16px;margin:0!important}
.htp-credit{font-size:13px!important;color:var(--mut)!important;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
button:focus-visible{outline:3px solid #ffd54a;outline-offset:2px}
html.ifs-embed #btnHelp{display:none}
#ifs-gate-chip{display:none!important}
@media (max-width:420px){.brand .tag{display:none}.brand h1{font-size:24px}.tb-right{gap:6px}.tb-right .icon{width:44px;height:44px}}
/* "Did you know?" fact pop-up: mobile = compact card just above the bottom sheet; desktop = beside the skeleton with a leader line */
#dyk{position:absolute;z-index:4;left:10px;right:10px;bottom:8px;max-height:25%;overflow:auto;padding:9px 40px 10px 13px;border-radius:14px;background:rgba(6,14,26,.93);border:1px solid rgba(42,209,214,.6);box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 16px rgba(42,209,214,.2);cursor:pointer;transform:translateY(120%);opacity:0;transition:transform .28s ease,opacity .28s ease}
#dyk.in{transform:none;opacity:1}
#dyk[hidden]{display:none}
#dyk .t{font-size:11px;letter-spacing:.22em;color:var(--c);font-weight:800;margin-bottom:3px}
#dyk .b{font-size:14px;line-height:1.38;color:var(--txt)}
#dyk .x{position:absolute;top:4px;right:4px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--mut);font-size:22px;line-height:1;cursor:pointer}
#dyk.desk{bottom:auto;width:270px;max-height:none;transform:translateY(6px)}
#dyk.desk.in{transform:none}
#dykLine{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#dykLine line{stroke:var(--c);stroke-width:1.5;stroke-dasharray:4 4;opacity:.8}
#dykLine circle{fill:var(--c);opacity:.9}
/* Back button (top left of the header, same pill style as the IFS arcade BACK link) */
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.ifs-back{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 14px 0 10px;box-sizing:border-box;border-radius:999px;border:2px solid rgba(255,255,255,.55);background:rgba(15,10,35,.55);color:#fff;font:900 13px/1 inherit;letter-spacing:.4px;text-decoration:none;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex:0 0 auto}
.ifs-back:hover{border-color:var(--c)}
.ifs-back:active{transform:scale(.95)}
.ifs-back:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.ifs-back[hidden]{display:none}
html.ifs-embed .ifs-back{display:none}
@media (max-width:420px){.ifs-back{padding:0;width:44px}.ifs-back span{display:none}.tb-left{gap:8px}}
/* Mobile portrait: hide the system title in the top bar so it never overlaps the ?, sound and info buttons (Back stays) */
@media (orientation:portrait) and (max-width:700px){#topbar .brand{display:none}}

/* name pills: side columns + leader lines (desktop), selected-only (mobile portrait) */
.lblLines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lblLines line{stroke:rgba(42,209,214,.6);stroke-width:1.2}
.lblLines circle{fill:#2ad1d6}
.lblLines line.sel{stroke:#fff;stroke-width:1.6}
.lblLines circle.sel{fill:#fff}
.lbl{z-index:2}

/* other anatomy games block (bottom of the side panel / bottom sheet) */
#moreGames{margin:16px 0 8px;padding-top:12px;border-top:1px solid rgba(42,209,214,.2)}
#moreGames .mg-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fa3b8;margin-bottom:8px}
#moreGames .mg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#moreGames .mg-grid a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border:1px solid rgba(42,209,214,.35);border-radius:10px;color:#e8fbfc;text-decoration:none;font-size:11.5px;font-weight:700;background:rgba(42,209,214,.06);white-space:nowrap}
#moreGames .mg-grid a:hover{background:rgba(42,209,214,.18)}
#moreGames .mg-grid a .i{font-size:18px;line-height:1.1}
#moreGames .mg-grid a[aria-current]{opacity:.5;border-style:dashed;cursor:default}
#moreGames .mg-hub{display:inline-block;margin-top:9px;color:var(--c);font-weight:700;font-size:13px;text-decoration:none}
#sheet.collapsed #moreGames{display:none}
@media (min-width:900px) and (orientation:landscape){#sheet.collapsed #moreGames{display:block}}

/* desktop: Back as a round icon in the top-right group */
.ifs-back.as-icon{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:1px solid rgba(42,209,214,.5);background:rgba(42,209,214,.12)}
.ifs-back.as-icon span{display:none}

/* system name first, then the small IFS MEDSIM tag to its right */
.brand .tag{order:2}

/* shared play gate (js/ifs-play-gate.js) treats a position:fixed start screen as hidden (offsetParent is null), so pin it absolutely to the full-height page instead */
#startScreen{position:absolute;min-height:100%}
#ifs-gate-chip{display:none!important}