/* MYO laboratory theme — local design for approval. Loading artwork is unchanged. */
body{background:#061421;color:#ecf6ff}
body>header{background:linear-gradient(110deg,#142e43ed,#0a1c2eed);border-bottom:1px solid #7ccfff3d;box-shadow:0 6px 32px #020b1655;position:relative;z-index:2;height:72px;min-height:72px;padding:0 26px}
header .brand{color:#e6f6ff;letter-spacing:1px;font-size:29px;text-shadow:0 0 20px #55beff44}
header .mark{background:linear-gradient(145deg,#315d7a,#11273d);border:1px solid #88d9ff80;color:#acddf7;box-shadow:inset 0 1px 1px #d5f5ff55,0 0 18px #39b5f026}
header .brand-sub{color:#98bbd3;font-size:10px;font-weight:500;letter-spacing:1.4px}
header .difficulty-current{gap:14px;color:#d9f1ff}
header .quiet{color:#b6d3e5;border:1px solid #84c6ef35;background:#5482a518;border-radius:9px;padding:9px 12px;font-size:12px}
header .quiet:hover{border-color:#87d8ff;background:#3c8ac13d}
header .quiet span{border-color:#74bad57a}
main{background:radial-gradient(ellipse at 50% 0,#22476255,transparent 68%),linear-gradient(120deg,#091a2a,#0d2235 60%,#081827);grid-template-columns:218px 1fr;min-height:0}
main .course{background:linear-gradient(165deg,#203e5266,#0b1d2bb3);border-right:1px solid #78bad92b;padding:26px 16px;display:flex;flex-direction:column}
main .eyebrow{color:#93c4e2;font-size:11px;letter-spacing:1.7px}
main .course h1{font-size:22px;line-height:1.4;margin:14px 0;color:#e7f6ff}
main .course>.muted{color:#9ab4c8;font-size:12px;line-height:1.6}
main .progress-track{height:5px;background:#051726;border:1px solid #7bcfff21;margin-top:22px}
main .progress-track i{background:linear-gradient(90deg,#2c8cca,#6bdcff);box-shadow:0 0 12px #4acbff}
main .progress-caption{color:#8fb4cc;font-size:12px;margin:10px 0 24px}
main .course nav{gap:10px}
main .level{padding:13px 9px;gap:10px;color:#9bb7cb;border:1px solid #92c5e51c;border-radius:12px;background:#28506b15;min-height:66px}
main .level b{font-size:12px;line-height:1.45;font-weight:600}
main .level small{color:#8baabd;font-size:10px;line-height:1.45}
main .level-number{min-width:28px;height:28px;font-size:12px;background:#072236;border-color:#6a9fb94a;color:#a7c9de}
main .level.active{color:#effaff;background:linear-gradient(120deg,#37779959,#2a537933);border:1px solid #80d8ff9c;box-shadow:inset 0 1px 0 #e0f7ff24,0 0 24px #2b98ce14}
main .level.active .level-number{background:linear-gradient(135deg,#2b9ed3,#215277);color:#fff;border-color:#8addff;box-shadow:0 0 14px #39c5ff26}
main .lock{color:#7091a8;font-size:11px}
main .course .reset{margin-top:auto;padding:16px 0 0;color:#8fb7ce;font-size:12px;text-align:left}
main .workspace{padding:22px 24px 12px;gap:0}
main .workspace-title{margin-bottom:18px;min-height:43px}
main .workspace-title h2{font-size:25px;margin:5px 0 0;color:#edf8ff;font-weight:700;letter-spacing:-.5px}
main .workspace-title .eyebrow{font-size:10px}
main .pill{border-color:#72cffb65;background:#2c6c9130;color:#bae9ff;padding:9px 14px;font-size:11px;font-weight:600}
main .game-grid{grid-template-columns:minmax(220px,1fr) minmax(360px,40%);gap:20px}
main .anatomy{background:radial-gradient(ellipse at 50% 42%,#284b60 0,#112c40 46%,#091b2c 100%);border:1px solid #a4d8f05c;border-radius:20px;box-shadow:inset 0 1px 0 #d2efff30,0 16px 38px #010b1747;overflow:hidden}
main .canvas-top{padding:16px 18px;border-bottom:1px solid #85c3df20;background:#28496330;color:#c6eaff;font-size:13px;letter-spacing:.3px}
main .canvas-top:after{content:'MYO / АНАТОМИЯ';font-size:9px;letter-spacing:2px;color:#6f9ab5}
main #skeletonWrap{background:radial-gradient(ellipse at 50% 95%,#52bfff19,transparent 45%)}
main #modelStatus{background:#112a3d;color:#d8f1ff}
main .canvas-bottom{padding:12px 14px;gap:10px;border-top:1px solid #89c4e123;color:#b4d1e2;font-size:11px;background:#09223755}
main .focus-region,main .zoom button{background:#47718d22;border:1px solid #8acfed4a;color:#c4eaff;border-radius:7px}
main .focus-region{padding:7px 9px;font-size:10px}
main .zoom button{width:28px;height:28px}
main #viewPrompt{padding:10px;background:#0518296b;color:#84bad8;font-size:11px;letter-spacing:.2px}
main .task-panel{padding:20px 18px 16px;border:1px solid #a3d2ec66;border-radius:20px;background:linear-gradient(150deg,#31546cb5,#16364eab 55%,#10293de6);backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #d8f2ff30,0 16px 38px #010b173b;overflow:hidden}
main .task-head .eyebrow{color:#a3cce6;font-size:10px;letter-spacing:1.3px}
main #counter{font-size:12px;color:#b6d9ec;background:#8fcbea16;border:1px solid #89c5e436;border-radius:6px;padding:4px 7px}
main .task-panel h2{font-size:24px;line-height:1.3;color:#f2faff;margin:15px 0 5px;font-weight:700}
main .latin{color:#99bfd6;font-size:14px;margin:0 0 12px}
main .instruction{font-size:12px;color:#c2d7e5;line-height:1.65;padding:0 0 15px;border-color:#92c6e02d}
main .tray-heading{color:#b3d0e1;font-size:12px;font-weight:500;margin:15px 0 9px}
main #tray{gap:8px;padding:2px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
main .muscle-card{background:radial-gradient(ellipse at 50% 30%,#46708950,#112c4166);border:1px solid #96cbe044;border-radius:11px;padding:5px;color:#d7eafa;transition:border-color .15s,background .15s,box-shadow .15s}
main .muscle-card:hover:not(:disabled){background:#3f789344;border-color:#97e5ff}
main .muscle-card.selected{background:linear-gradient(145deg,#3a73975e,#15435d88);border-color:#77ddff;box-shadow:0 0 0 1px #63ccf06b,inset 0 0 22px #40b8ea14}
main .muscle-card .card-name{font-size:11px;line-height:1.35;min-height:28px;color:#d5e9f6}
main .muscle-card .grab{display:none}
main .muscle-card.placed:disabled{opacity:.38}
main .stage-progress{gap:6px;margin-top:13px}
main .stage-progress i{background:#42627a;height:4px}
main .stage-progress i.done{background:#68d7ff;box-shadow:0 0 8px #58d5ff55}
main .primary{background:linear-gradient(110deg,#288bbb,#19678f);border:1px solid #85d6fa;border-radius:10px;color:#effaff;font-weight:700;box-shadow:inset 0 1px 0 #d0f5ff30,0 0 20px #26aaff18}
main .hint{color:#c0e8fc;border-color:#83c6e96b;background:#508bab24;border-radius:8px}
main .success-title{color:#86e3ff;font-size:25px;font-weight:700;text-shadow:0 0 18px #58cfff33}
main .facts{border-color:#57bde8;color:#d0e2ed;line-height:1.6}
main .facts b{color:#8dbad4;font-size:10px;letter-spacing:1.4px}
main .error{color:#ffb5a6}
main .level-complete{background:#3384a43b;border:1px solid #86d7f755;color:#cef3ff}
main #rotationPanel,main #attachmentPanel{border:1px solid #7abbde4d;background:#0b253955;border-radius:10px;color:#c7e1ef}
main #rotationHost{background:radial-gradient(#345c75,#112b40);border:1px solid #7abbde33}
main #rotationPanel label{color:#b9d5e7}
main #rotationStatus{color:#cce8f8}
main footer,main footer button{color:#739db8;font-size:10px}
body>dialog{background:linear-gradient(145deg,#24465b,#10283e);color:#e9f6ff;border:1px solid #9ad6f388;box-shadow:0 24px 100px #0009}
body>dialog::backdrop{background:#03101dcc;backdrop-filter:blur(12px)}
body>dialog .close{background:#72b5d72b;color:#e9f8ff}
body>dialog .difficulty-select select{background:#15344b;border:1px solid #7bbbd66b;color:#e6f4ff}
body>dialog .primary{background:#2177a1;border:1px solid #8adaf7;color:#effaff}
body>dialog .quiet,body>dialog a{color:#9fdfff}
#exitFullscreen{background:#153b54eb;border:1px solid #79ccef7d;border-radius:9px;color:#e2f5ff}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline-color:#8fe4ff}
@media(min-width:1600px){main{grid-template-columns:245px 1fr}main .workspace{padding:26px 30px 14px}main .course{padding:30px 20px}main .game-grid{grid-template-columns:minmax(300px,1fr) minmax(440px,38%)}main .task-panel{padding:25px}main .task-panel h2{font-size:28px}main .instruction{font-size:14px}main .muscle-card .card-name{font-size:13px}}
@media(max-width:1100px){main{grid-template-columns:180px 1fr}main .course{padding:20px 12px}main .workspace{padding:16px}main .game-grid{grid-template-columns:minmax(210px,1fr) minmax(320px,43%);gap:14px}main .task-panel{padding:15px}main .task-panel h2{font-size:21px}main .level{padding:10px 6px;gap:7px}main .course h1{font-size:19px}}
@media(max-width:1000px){main{grid-template-columns:1fr}main .course{display:none}body>header{height:60px;min-height:60px;padding:0 14px}main .workspace{padding:14px}main .game-grid{grid-template-columns:minmax(210px,1fr) minmax(320px,44%)}}
@media(max-width:640px){body>header{height:52px;min-height:52px;padding:0 9px;gap:6px}header .brand{font-size:20px;gap:5px}header .quiet{padding:6px;font-size:9px}header .difficulty-current{gap:4px}main .workspace{padding:8px}main .workspace-title{min-height:30px;margin-bottom:9px}main .workspace-title h2{font-size:15px}main .workspace-title .eyebrow{font-size:8px}main .pill{padding:5px 7px;font-size:8px}main .game-grid{grid-template-columns:minmax(120px,41%) minmax(0,1fr);gap:7px}main .anatomy,main .task-panel{border-radius:13px}main .task-panel{padding:9px 7px}main .task-panel h2{font-size:15px;margin:8px 0 4px}main .task-head .eyebrow{font-size:7px;letter-spacing:.5px}main #counter{font-size:9px;padding:3px}main .latin{font-size:10px;margin-bottom:6px}main .instruction{font-size:10px;line-height:1.4;padding-bottom:8px}main .tray-heading{font-size:9px;margin:8px 0 6px}main #tray{gap:4px}main .muscle-card .card-name{font-size:9px;min-height:27px}main .canvas-top{padding:11px;font-size:10px}main .canvas-top:after{display:none}main .canvas-bottom{padding:6px;font-size:9px;gap:6px}main .focus-region{font-size:9px;padding:5px}main #viewPrompt{font-size:9px;padding:7px}main .stage-progress{margin-top:8px}main .success-title{font-size:18px}main footer,main footer button{font-size:9px}}
@media(max-height:650px){body>header{height:48px;min-height:48px}main .workspace{padding:10px 14px}main .workspace-title{min-height:30px;margin-bottom:9px}main .workspace-title h2{font-size:19px}main .course{padding-top:15px}main .level{min-height:45px;padding:7px}main .course .progress-caption{margin-bottom:10px}main .task-panel{padding:12px}main .task-panel h2{font-size:19px;margin:7px 0 3px}main .latin{font-size:11px;margin-bottom:5px}main .instruction{font-size:10px;padding-bottom:7px}main .tray-heading{margin:8px 0 5px}main .muscle-card .card-name{font-size:9px;min-height:25px}main .canvas-top{padding:10px}main .canvas-bottom{padding:7px}main #viewPrompt{padding:6px}}
@media(prefers-reduced-motion:reduce){main .muscle-card{transition:none}}
@media(min-width:641px){main #tray{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}}

/* Laboratory room surrounds the live model; panels float over the same environment. */
body{background:#193044 url('assets/akv-laboratory-background.jpeg') center center / cover no-repeat fixed}
body>header{background:linear-gradient(110deg,#12283ddd,#0b2134bb);backdrop-filter:blur(12px)}
main{background:linear-gradient(90deg,#06182836,#0b23391a 60%,#07192c36);padding:12px;gap:14px}
main .course{border:1px solid #81c3e781;border-radius:18px;background:linear-gradient(145deg,#193449df,#102336e8);backdrop-filter:blur(15px);box-shadow:inset 0 1px 0 #d1f0ff25,0 12px 40px #04101f4a}
main .workspace{padding:0 0 0 0}
main .workspace-title{padding:6px 10px;margin-bottom:10px;text-shadow:0 2px 9px #031422}
main .anatomy{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
main .canvas-top{align-self:flex-start;background:#102b3dc7;backdrop-filter:blur(12px);border:1px solid #8cd4ff55;border-radius:10px;padding:10px 15px;margin:0 12px;color:#e0f4ff}
main .canvas-top:after{display:none}
main #skeletonWrap{background:none;isolation:isolate;overflow:hidden}
main #anatomyCanvas{position:relative;z-index:1}
main .canvas-bottom{margin:0 10px;border:1px solid #8bd1f866;border-radius:11px;background:#112c42d9;backdrop-filter:blur(15px);box-shadow:inset 0 1px 0 #d1efff25;padding:10px 12px}
main #viewPrompt{background:transparent;color:#deeffb;text-shadow:0 1px 6px #061421;padding:9px}
main .task-panel{background:linear-gradient(145deg,#1c3b52d9,#0c2238e8);border-color:#8bcaef88;backdrop-filter:blur(17px);box-shadow:inset 0 1px 0 #deefff33,0 12px 40px #04101f4a}
main .muscle-card{background:linear-gradient(145deg,#54748c35,#17354a55)}
main footer,main footer button{color:#b7d1e4;text-shadow:0 1px 5px #031322}
@media(max-width:1000px){main{padding:10px}main .workspace{padding:0}}
@media(max-width:640px){main{padding:6px;gap:6px}main .workspace{padding:0}main .canvas-top{margin:0 2px;padding:9px;font-size:10px}main .canvas-bottom{margin:0 2px;padding:6px}main .workspace-title{padding:3px 2px}main .game-grid{gap:7px}main #viewPrompt{font-size:9px}main .task-panel{background:#112c42de}}

/* Reference stand: brushed steel drum, thin cyan rim and central support rod. */

/* Align all three columns with the route panel; place labels beside their controls. */
main .workspace{position:relative;padding:0!important}
main .workspace>footer{position:absolute;bottom:7px;left:15px;right:15px;pointer-events:none}
main .workspace>footer span{display:none}
main .workspace>footer button{pointer-events:auto;position:absolute;right:0;bottom:0;font-size:9px}
main .game-grid{height:100%;flex:1;min-height:0}
main .task-panel{height:100%;padding-bottom:30px}
main .anatomy{height:100%;min-height:0}
main .course .workspace-title{padding:0;margin:0 0 20px;min-height:0;text-shadow:none}
main .course .workspace-title h2{font-size:18px;line-height:1.4;margin-top:8px}
main .course .workspace-title .eyebrow{font-size:9px;letter-spacing:1px}
main .course h1{font-size:18px;margin:9px 0}
main .course .progress-track{margin-top:14px}
main .course .progress-caption{margin-bottom:17px}
main .task-stage{display:flex;align-items:center;gap:8px;flex-shrink:0}
main .task-stage .pill{font-size:11px;letter-spacing:0;padding:4px 8px;border-radius:6px}
main .view-inline{margin-left:auto;white-space:nowrap;font-size:11px;color:#e3f5ff}
main .canvas-bottom .focus-region{margin-left:0}
main .canvas-bottom{flex-wrap:wrap}
main #viewPrompt{padding-bottom:14px}
@media(max-width:1100px){main .task-head{gap:8px;flex-wrap:wrap}main .task-head .eyebrow{font-size:9px}main .task-stage .pill{font-size:10px}}
@media(max-width:640px){main .task-panel{padding-bottom:20px}main .task-head .eyebrow{font-size:7px}main .task-stage{gap:5px}main .task-stage .pill{font-size:9px;padding:3px 5px}main .view-inline{margin:0;flex:0 0 auto;font-size:8px}main .canvas-bottom .focus-region{width:auto;flex:1;padding:5px 2px;font-size:8px}main .canvas-bottom{gap:4px}main .canvas-bottom>span:not(.view-inline){font-size:8px}main .canvas-bottom .zoom{width:100%;justify-content:center}main .workspace>footer{bottom:3px;right:8px}}

main .canvas-bottom .view-inline{margin-left:auto}
main .preview-window .model-thumb{max-width:100%;max-height:100%;object-fit:contain}
main #rotationPanel{display:grid;grid-template-columns:minmax(90px,42%) 1fr;gap:8px 12px;padding:10px;margin:8px 0}
main #rotationPanel[hidden]{display:none}
main #rotationHost{width:100%;height:150px;grid-row:1 / 3;touch-action:none;cursor:grab;user-select:none;margin:0}
main #rotationHost:active{cursor:grabbing}
main #rotationHost canvas{width:100%!important;height:100%!important;pointer-events:none}
main .rotation-guide{color:#bdd8ea;font-size:12px;line-height:1.5;margin:0;align-self:center}
main #rotationPanel #checkRotation{font-size:12px;align-self:end;padding:8px}
main #rotationStatus{font-size:11px;line-height:1.4}
@media(max-width:640px){main #rotationPanel{grid-template-columns:1fr;padding:6px;gap:5px}main #rotationHost{height:90px;grid-row:auto}main .rotation-guide{font-size:9px}main #rotationPanel #checkRotation{font-size:10px;padding:5px}main #rotationStatus{font-size:9px}}
/* Supplied icon and readable frosted-glass anatomy cards. */
header .app-icon{display:block;width:48px;height:48px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px #40baff30)}
body.answer-shown main .instruction{display:none}
body.answer-shown main #feedback{justify-content:flex-start;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8ccbe077 transparent;margin-top:10px;padding:2px 5px 6px 2px}
main .fact-cards{display:grid;gap:12px;flex:none}
main .fact-card{border:1px solid #c6edff68;border-radius:17px;padding:16px 18px;background:linear-gradient(135deg,#a6dfff28,#7195b320 45%,#1a395369);box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #77bcd22b,0 7px 20px #020d1726;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
main .fact-card h3{font-size:18px;line-height:1.2;font-weight:750;color:#e8f8ff;margin:0 0 9px;letter-spacing:0}
main .fact-card p{font-size:17px;line-height:1.5;font-weight:500;color:#f1f8fd;margin:0;overflow-wrap:anywhere}
main .fact-card h3:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:#ff7777}
main .fact-card-1 h3:before{background:#559cff}
@media(max-width:640px){header .app-icon{width:36px;height:36px}main .fact-card{padding:12px;border-radius:13px}main .fact-card h3{font-size:16px}main .fact-card p{font-size:15px;line-height:1.45}main .fact-cards{gap:9px}}

main .fact-card-2 h3:before{background:#bd85ff}
main .fact-card-3 h3:before{background:#ffa24d}
body>header{padding-left:29px}
header .brand-sub{max-width:155px;margin-left:4px;letter-spacing:1.1px}
@media(min-width:1600px){body>header{padding-left:33px}}
@media(max-width:1100px){body>header{padding-left:25px}}
@media(max-width:1000px){body>header{padding-left:10px}}
@media(max-width:640px){body>header{padding-left:8px}}

main #showHint{align-self:flex-start;width:auto;padding:8px 16px;margin:6px 0;font-size:13px;flex-shrink:0}main #showHint[aria-pressed="true"]{border-color:#8ae2ff;background:#4baed04d}main #showHint[hidden]{display:none}

/* Home Screen iPhone layout, with native coordinates for touch picking. */
body.installed-app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.installed-app #startScreen{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:auto;height:auto}
#rotatePhone{display:none;position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse at center,#234960,#071827 80%);color:#e7f6ff;padding:calc(24px + env(safe-area-inset-top)) 28px calc(24px + env(safe-area-inset-bottom));text-align:center;align-items:center;justify-content:center}
#rotatePhone h2{font-size:27px}#rotatePhone p{font-size:17px;line-height:1.6;max-width:360px}.rotate-symbol{display:block;font-size:80px;color:#87dbff}
@media(pointer:coarse) and (orientation:portrait) and (max-width:600px){.installed-app #rotatePhone{display:flex}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
 body>header{height:40px;min-height:40px;padding-top:0;padding-bottom:0}header .brand{font-size:23px}header .quiet{padding:5px 9px;font-size:11px}
 main{padding:5px 8px}main .game-grid{grid-template-columns:minmax(180px,1fr) minmax(300px,46%);gap:10px}main .task-panel{padding:8px 12px}main .task-panel h2{font-size:17px;margin:4px 0}main .task-head .eyebrow{font-size:8px}main .latin{font-size:11px;margin:1px 0 4px}main .instruction{font-size:10px;line-height:1.3;padding:3px 0}main #showHint{padding:4px 10px;margin:3px 0;font-size:11px}main .tray-heading{display:none}main #tray{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}main .muscle-card .card-name{font-size:9px;min-height:22px}main .stage-progress{margin-top:4px}main #viewPrompt{padding:3px;font-size:9px}main .canvas-bottom{padding:4px}
 main #rotationPanel{grid-template-columns:85px 1fr;gap:3px 7px;padding:5px;margin:3px 0}main #rotationHost{height:65px}main .rotation-guide,main #rotationStatus{font-size:9px}main #rotationPanel #checkRotation{padding:4px;font-size:10px}main .fact-card{padding:10px 12px}main .fact-card p{font-size:15px}main .fact-card h3{font-size:16px;margin-bottom:5px}main .success-title{font-size:19px}
 #startScreen .start-card{padding:12px 16px;max-height:100%;overflow:auto}#startScreen .start-card h1{font-size:23px;margin:3px 0}#startScreen #loadingDetails{font-size:11px;margin:4px 0}#startScreen #difficultyOptions{grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}#startScreen .difficulty-option{padding:7px}#startScreen .difficulty-option b{font-size:12px}#startScreen .difficulty-option small{font-size:9px;line-height:1.3}#startScreen #startFullscreen{padding:8px;margin-top:2px}
}

#startActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}#startActions[hidden]{display:none}#startScreen #startActions .primary{margin:0;font-size:13px;padding:12px 8px}#startScreen #continueGame:disabled{opacity:.45}body>dialog{z-index:600}@media(max-width:380px){#startActions{grid-template-columns:1fr}}

/* Touch pickup lives in the lower-right corner; mouse pickup stays unrestricted. */
.loading-percent{display:none}
body.mobile-device{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.mobile-device main{min-height:0;overflow:hidden;flex:1}
body.mobile-device main .muscle-card .card-name{justify-content:flex-start;text-align:left}
body.mobile-device main .canvas-bottom .view-inline{margin-left:0;text-align:left;flex:0 0 100%}
main .pair-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:stretch}
main .side-preview{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding-bottom:14px;overflow:hidden}
main .side-preview .side-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:14px;color:#b5d9ec}
body[data-difficulty="resident"] main .muscle-card:disabled:not(.placed){opacity:1;cursor:default}
body.mobile-device #fullscreenToggle,body.mobile-device #fullscreenNotice,body.mobile-device #rotatePhone{display:none!important}
body.mobile-device #startScreen{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.mobile-device #startScreen .start-card{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:calc(100% - 24px);overscroll-behavior:contain}
main #rotationHost{position:relative}
main #rotationHost>.grab{display:none}
@media(any-pointer:coarse){
 main .muscle-card .grab,main #rotationHost.rotation-ready>.grab{display:flex;position:absolute;inset:auto 0 0 auto;width:44px;height:44px;align-items:flex-end;justify-content:flex-end;padding:4px 7px;z-index:2;font-size:23px;line-height:1;color:#afe7ff;border-radius:0 0 10px 0;background:linear-gradient(135deg,transparent 44%,#489bc34d);touch-action:none;cursor:grab}
 main .muscle-card .card-name{padding-right:27px}
 main .muscle-card:disabled .grab{visibility:hidden}
 main .muscle-card .grab:active,main #rotationHost.rotation-ready>.grab:active{cursor:grabbing;color:#fff}
}

/* Resident cards are reference pairs, so their captions use the full card width. */
body[data-difficulty="resident"] main .muscle-card .card-name{justify-content:center;text-align:center;padding-left:0;padding-right:0}

/* Phone Professor controls share a single full-width column in both orientations. */
body.mobile-device[data-difficulty="professor"] main #rotationPanel{grid-template-columns:minmax(0,1fr);gap:6px;padding:6px}
body.mobile-device[data-difficulty="professor"] main .rotation-guide{display:none}
body.mobile-device[data-difficulty="professor"] main #rotationHost{grid-column:1 / -1;grid-row:auto;width:100%;min-width:0;margin:0}
body.mobile-device[data-difficulty="professor"] main #rotationPanel #checkRotation{grid-column:1 / -1;width:100%;min-width:0;justify-self:stretch;white-space:nowrap;font-size:clamp(10px,2.8vw,13px);line-height:1.2;letter-spacing:normal;padding:6px 4px;margin:0}

/* Phone Professor tray cards select a muscle; transfer uses the rotation field. */
body.mobile-device[data-difficulty="professor"] main .muscle-card .grab{display:none}
body.mobile-device[data-difficulty="professor"] main .muscle-card .card-name{padding-right:0;flex:1;min-height:0}

/* Keep the original portrait and desktop arrangement; move the existing legend on phone rotation. */
main .hint-tools{display:contents}
body.mobile-device[data-difficulty="professor"] main .muscle-card .preview-window{display:none}
@media(orientation:landscape){
 body.mobile-device main .hint-tools{display:flex;align-items:center;gap:8px;min-width:0;margin:3px 0}
 body.mobile-device main .hint-tools #showHint{margin:0;flex:0 0 auto;align-self:center}
 body.mobile-device main .hint-tools .canvas-bottom{display:flex;flex:1;min-width:0;justify-content:space-between;align-items:center;gap:4px;margin:0;padding:5px 6px;font-size:10px;flex-wrap:nowrap}
 body.mobile-device main .hint-tools .canvas-bottom>span{white-space:nowrap;font-size:10px}
 body.mobile-device main .hint-tools .canvas-bottom .view-inline{flex:0 1 auto;margin:0;font-size:10px;text-align:left}
 body.mobile-device main .task-panel{overflow-y:auto;overscroll-behavior:contain}
 body.mobile-device main #tray{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:100%;gap:7px;flex:1 0 180px;min-height:180px;max-height:260px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:#76b8d6 transparent}
 body.mobile-device main .muscle-card{display:flex;flex-direction:column;padding:7px 5px;min-height:0;touch-action:pan-y;scroll-snap-align:start}
 body.mobile-device main .muscle-card .preview-window{display:flex;flex:1;min-height:0;width:100%;margin:0 0 5px;overflow:hidden;touch-action:pan-y}
 body.mobile-device main .muscle-card .preview-window.pair-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.mobile-device main #tray .model-thumb{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
 body.mobile-device main .muscle-card .card-name{flex:0 0 auto;min-height:38px;font-size:12px;line-height:1.25;overflow-wrap:anywhere}
 body.mobile-device[data-difficulty="professor"] main .muscle-card .preview-window{display:flex}
 body.mobile-device[data-difficulty="professor"] main .muscle-card .card-name{flex:0 0 auto;min-height:38px}
}

/* Approved layout only: original artwork, shading and materials stay intact. */
body>header .help-square{width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center;font-size:22px;line-height:1;flex-shrink:0}
#headerProgress{display:none}
main .task-panel{padding-bottom:12px}
.model-credits{margin-top:20px;padding-top:14px;border-top:1px solid #9ad6f344}
.model-credits summary{cursor:pointer;font-weight:700;padding:8px 0}
#modal{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
#modal li{margin-bottom:9px;line-height:1.5}
@media(orientation:landscape){
 body.mobile-device>header{height:46px;min-height:46px;gap:9px;padding:2px 10px;position:relative}
 body.mobile-device>header .brand{font-size:23px;flex:0 0 auto}
 body.mobile-device>header .brand-sub{display:none}
 body.mobile-device>header .help-square{width:40px;height:40px;min-width:40px;font-size:22px}
 body.mobile-device #headerProgress{display:block;position:absolute;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;pointer-events:none}
 body.mobile-device>header .difficulty-current{margin-left:auto}
 body.mobile-device #changeDifficulty{font-size:0;min-height:40px;padding:6px 10px}
 body.mobile-device #changeDifficulty::after{content:attr(data-current) ' ▾';font-size:12px}
 body.mobile-device main{padding:4px 6px;grid-template-columns:1fr}
 body.mobile-device main .course{display:none}
 body.mobile-device main .game-grid{grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:8px}
 body.mobile-device main .task-panel{padding:6px 8px;overflow:hidden}
 body.mobile-device main .task-head{min-height:0}
 body.mobile-device main .task-head .eyebrow{font-size:9px}
 body.mobile-device main .task-stage,body.mobile-device main .latin,body.mobile-device main .instruction,body.mobile-device main .tray-heading,body.mobile-device main #viewPrompt{display:none}
 body.mobile-device main .task-panel h2{font-size:17px;line-height:1.2;margin:4px 0 5px}
 body.mobile-device main .hint-tools{margin:0 0 6px;gap:5px;min-height:36px}
 body.mobile-device main .hint-tools #showHint{min-height:36px;padding:5px 8px;font-size:11px}
 body.mobile-device main .hint-tools .canvas-bottom{min-height:36px;padding:4px;gap:3px}
 body.mobile-device main .hint-tools .canvas-bottom>span{font-size:9px}
 body.mobile-device main #tray{flex:1;min-height:0;max-height:none;grid-auto-rows:max(165px,calc(100% - 12px))}
 body.mobile-device main .stage-progress{margin-top:4px}
 body.mobile-device main #feedback:empty{display:none}
 body.mobile-device[data-difficulty="professor"] main .task-panel{overflow-y:auto}
 body.mobile-device[data-difficulty="professor"] main #tray{flex:1 0 165px;min-height:165px}
}

/* Restore flex sizing; fixed pixel viewport heights can survive rotation incorrectly. */
body.mobile-device>header #help{display:grid;visibility:visible;opacity:1;flex:0 0 40px;place-items:center;font-size:22px}
body.mobile-device>header .brand-sub{display:none}
body.mobile-device #startScreen .start-card{overflow-y:auto}
#startScreen.is-loading .start-rules{display:none}
#startScreen .start-rules{text-align:left;margin:14px 0;padding-top:12px;border-top:1px solid #9ad6f344}
#startScreen .start-rules h2{font-size:18px;margin:0 0 8px}
#startScreen .start-rules p,#startScreen .start-rules li{font-size:13px;line-height:1.5;color:inherit}
#startScreen .start-rules ul{padding-left:20px;margin:8px 0}
#startScreen .start-rules li{margin-bottom:6px}
#startScreen .start-rules a{font-size:13px;color:#9fdfff}

body.mobile-device{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;min-height:0}
body.mobile-device>main{flex:1 1 0;height:auto;min-height:0;margin:0;grid-template-rows:minmax(0,1fr)}
body.mobile-device main .workspace{height:100%;min-height:0}
body.mobile-device main .game-grid{grid-template-rows:minmax(0,1fr);min-height:0}
/* Keep the original horizontal loading composition fully visible. */
body.mobile-device #startScreen.is-loading .loading-scene{display:block;position:absolute;inset:auto;left:50%;top:50%;width:min(100vw,177.6833dvh);height:auto;aspect-ratio:1672/941;transform:translate(-50%,-50%)}
body.mobile-device #startScreen .loading-scene>img{width:100%;height:100%;object-fit:contain}
body.mobile-device #startScreen .loading-scene .loading-live{left:54.1%;top:66%;bottom:auto;transform:none;width:41.65%;height:22.5%;padding:2%;font-size:clamp(12px,1.55vw,24px)}
body.mobile-device #rotatePhone{display:none!important}
@media(orientation:landscape){body.mobile-device #rotatePhone{display:none!important}}

/* Portrait artwork and its matching loading meter. */
@media(orientation:portrait){
body.mobile-device #startScreen.is-loading .loading-scene{display:block;inset:auto;left:50%;top:50%;width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5625));height:auto;aspect-ratio:9/16;padding:0;transform:translate(-50%,-50%);container-type:inline-size}
body.mobile-device #startScreen .loading-scene>img{display:block;width:100%;height:100%;object-fit:contain}
body.mobile-device #startScreen .loading-scene .loading-live{position:absolute;left:5.37%;top:83.5%;bottom:auto;transform:none;width:89.26%;height:15.31%;padding:0;display:block;border:1px solid #a3c4e3;border-radius:3cqw;background:linear-gradient(125deg,#19304b,#10253d 55%,#233c58);box-shadow:inset 0 0 3cqw #57a7ef18;backdrop-filter:none;-webkit-backdrop-filter:none;color:#c4e8ff}
body.mobile-device #startScreen .loading-live progress{position:absolute;left:6%;top:27%;width:74%;height:12%;border-width:1px;border-radius:99px}
body.mobile-device #startScreen .loading-percent{display:block;position:absolute;right:5%;top:24%;font-size:4.3cqw;line-height:1.2;font-variant-numeric:tabular-nums}
body.mobile-device #startScreen #loadingMessage{position:absolute;left:0;top:48%;width:100%;font-size:3.4cqw;line-height:1.2;text-align:center}
body.mobile-device #startScreen .loading-live::after{content:'';position:absolute;left:6%;right:6%;bottom:30%;height:1px;background:#8dcaee55}

}

/* Professor works directly with the assigned muscle, without a selection tray. */
body[data-difficulty="professor"] main #tray,body[data-difficulty="professor"] main .tray-heading{display:none}
body[data-difficulty="professor"] main #rotationPanel:not([hidden]){display:grid;flex:1 1 0;min-height:180px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,1fr) auto auto;gap:8px}
body[data-difficulty="professor"] main #rotationPanel>.eyebrow,body[data-difficulty="professor"] main .rotation-guide{display:none}
body[data-difficulty="professor"] main #rotationHost{grid-row:1;grid-column:1;width:100%;height:100%;min-height:100px;margin:0}
body[data-difficulty="professor"] main #rotationPanel #checkRotation{grid-row:2;grid-column:1;width:100%;margin:0;white-space:nowrap}
body[data-difficulty="professor"] main #rotationStatus{grid-row:3;grid-column:1}
body.mobile-device[data-difficulty="professor"] main .task-panel{overflow-y:auto}

/* Landscape legend beside the model; portrait keeps its original bottom legend. */
#placementGuide{display:none}
@media(orientation:landscape){
 body.mobile-device main .anatomy{flex-direction:row;align-items:stretch;gap:4px}
 body.mobile-device main .anatomy .canvas-bottom{order:-1;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;align-self:flex-end;justify-content:center;flex:0 0 auto;width:max-content;margin:0 0 6px 6px;padding:9px 10px;gap:9px;font-size:10px}
 body.mobile-device main .anatomy .canvas-bottom>span{font-size:10px;white-space:nowrap}
 body.mobile-device main .anatomy .canvas-bottom .view-inline{margin:0;flex:0 0 auto;text-align:left;font-size:10px}
 body.mobile-device main #skeletonWrap{min-width:0;height:100%;flex:1 1 0}
 body.mobile-device main .hint-tools #placementGuide:not([hidden]){display:block;flex:1;min-width:0;font-size:11px;line-height:1.35;text-align:left}
}

/* Plain anatomical labels, retaining their placement in both orientations. */
main .anatomy .canvas-bottom{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}

/* The supplied room includes its platform; align that platform with the full-body feet. */
body{background-attachment:fixed;background-size:var(--room-size,cover);background-position:var(--room-position,center)}

/* The entire mobile room fits the viewport; the independent stand follows the model. */
body.mobile-device{background-image:url('assets/akv-laboratory-mobile.png');background-size:contain;background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-color:#193044}
#mobileModelPodium{position:absolute;z-index:0;pointer-events:none;max-width:none;height:auto;object-fit:contain}
#mobileModelPodium[hidden],body:not(.mobile-device) #mobileModelPodium{display:none}

/* Approved mobile laboratory: independent orientation artwork and satin glass. */
body.mobile-device{isolation:isolate;background-image:url('assets/myo-room-portrait-v2.png');background-size:cover;background-position:center;background-attachment:scroll}
#mobileRoomBackground{display:none}
body.mobile-device #mobileRoomBackground{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#mobileRoomBackground>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#mobileRoomBackground>img[hidden]{display:none}
body.mobile-device main{padding-bottom:max(4px,env(safe-area-inset-bottom));grid-template-columns:1fr;background:none}
body.mobile-device main .course{display:none}
body.mobile-device main .game-grid{grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:6px}
body.mobile-device main .anatomy{position:relative;display:block;height:100%;min-height:0}
body.mobile-device main #skeletonWrap{position:absolute;inset:0;width:100%;height:100%}
body.mobile-device main .anatomy .canvas-bottom{position:absolute;left:0;top:auto;bottom:8px;margin:0;padding:3px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none;text-shadow:0 1px 4px #051525}
body.mobile-device main .anatomy .canvas-bottom .view-inline{margin:0;text-align:left}
body.mobile-device main #viewPrompt{position:absolute;left:0;top:68px;right:0;padding:3px;z-index:3;text-align:left;pointer-events:none;font-size:9px;text-shadow:0 1px 4px #051525}
body.mobile-device main .task-panel{background:linear-gradient(145deg,rgba(40,81,109,.76),rgba(22,54,77,.84));backdrop-filter:blur(24px) saturate(110%);-webkit-backdrop-filter:blur(24px) saturate(110%);border:1px solid rgba(154,205,232,.58);box-shadow:inset 0 1px 0 rgba(224,246,255,.15),0 8px 26px rgba(4,16,31,.15)}
body.mobile-device main .muscle-card{background:linear-gradient(145deg,rgba(90,135,167,.12),rgba(18,49,70,.22))}
@media(orientation:landscape){
 body.mobile-device{background-image:url('assets/myo-room-landscape-v2.png')}
 body.mobile-device main #tray{grid-auto-rows:max(115.5px,calc(70% - 8.4px))}
}