/* Small, practical game HUD: the world carries the visual weight. */
#viewport canvas { cursor:none; }
#reticle { z-index:2; }
#captureHint { position:fixed;top:108px;right:14px;z-index:3;pointer-events:none;white-space:nowrap;background:#182a29d9;border:1px solid #d0b6878c;border-radius:3px;padding:8px 12px;color:#f4e4c4;font:700 10px Arial,sans-serif;letter-spacing:1px; }
#fullscreenButton { position:absolute;top:68px;right:14px;z-index:3;pointer-events:auto;border:1px solid #d5c6a280;background:#182c2acc;color:#f4e8ce;padding:7px 10px;border-radius:3px;font:700 10px Arial,sans-serif;letter-spacing:.7px; }
#fullscreenButton:hover { background:#a16d4b; }
.topbar { height:58px; padding:0 18px; background:linear-gradient(#18201bd9,#18201b00); }
.brand { font:800 16px Arial,sans-serif; letter-spacing:1.1px; gap:8px; }
.brandmark { width:25px; height:25px; font-size:13px; }
.brand small { font:700 7px Arial,sans-serif; letter-spacing:1.9px; margin-top:2px; }
.jobline { background:#1a2524bf; border:1px solid #d0c4a34d; padding:7px 12px; }
.jobline span { font-size:8px; letter-spacing:1px; }
.jobline strong { font:700 12px Arial,sans-serif; letter-spacing:1.2px; }
.weather { background:#1a2524bf; border:1px solid #d0c4a34d; padding:7px 10px; min-width:110px; }
.weather span { font-size:8px; }
.weather b { font:700 12px Arial,sans-serif; letter-spacing:.4px; }
.objective { top:70px; left:18px; width:258px; padding:12px 14px; background:#202a28d9; border-left:2px solid #d3ab6d; box-shadow:0 6px 14px #0d15154a; }
.objective small { font-size:9px; margin-bottom:6px; color:#e3c183; }
.objective div { font:500 12px/1.4 Arial,sans-serif; }
#reticle { font:18px Arial,sans-serif; color:#f3e8c6; }
.bottom { left:14px; right:14px; bottom:12px; gap:10px; }
.tooltray { gap:4px; padding:5px; background:#192522df; border:1px solid #c8baa079; border-radius:4px; }
.tool { flex:0 0 76px; width:76px; height:58px; background:#303f3bbd; border:1px solid #a3b2a276; border-radius:3px; }
.tool:hover,.tool.active { background:#9e6d4c; border-color:#f0cf98; }
.tool span { font:21px Arial,sans-serif; }
.tool small { font:700 9px/1.1 Arial,sans-serif; margin-top:4px; white-space:normal; overflow-wrap:anywhere; }
.tabletButton { position:relative; padding:13px 52px 13px 16px; background:#f2bb78; border:2px solid #ffe1aa; font-size:13px; border-radius:3px; box-shadow:0 0 0 3px #1a3129,0 5px 24px #f2bb7870; text-align:left; }
.tabletButton span { display:block; font-size:16px; }
.tabletButton small { display:block; font-size:9px; letter-spacing:1.4px; margin-bottom:2px; }
.tabletButton kbd { position:absolute; right:10px; bottom:9px; }
.tabletButton kbd { font-size:8px; padding:3px; }
.trainerGuide { background:#25433c; border:2px solid #edb675; border-radius:12px; padding:16px 18px; margin:0 0 18px; box-shadow:inset 0 0 28px #e9b47812; }
.trainerGuide small { color:#ffd49a; font-weight:800; letter-spacing:1.4px; }
.trainerGuide h3 { color:#fff1d6; font:700 27px 'Barlow Condensed',Arial,sans-serif; margin:5px 0 8px; }
.trainerGuide p { margin:5px 0; }
.trainerGuide b { color:#ffc787; margin-right:8px; }
.trainerGuide .coachHint { border-top:1px solid #eeb67580; margin-top:12px; padding-top:10px; }
#prompt { color:#ffe0a0; }
#targetName { font:700 17px Arial,sans-serif; }
#menu { background:transparent; backdrop-filter:blur(2px); }
.menuBack { background:linear-gradient(90deg,#132520f5 0%,#142723dd 49%,#1c322685 100%); }
.gridLines { opacity:.12; }
.menuContent h1 { text-shadow:0 6px 22px #091311b3; transform:rotate(-1.5deg); }
.menuContent h1 .siteName { display:block; font-size:.52em; line-height:1.1; letter-spacing:1px; white-space:nowrap; }
.menuContent h1 em { display:block; font-size:.68em; line-height:1; font-style:normal; white-space:nowrap; }
.brand { font-size:clamp(11px,1.2vw,16px); letter-spacing:.3px; }
.menuContent h1 em { color:#e7a664; }
.menuContent p { color:#eee5d1; }
.menuActions button { border-radius:4px; box-shadow:4px 5px 0 #0717138c; }
.menuVisual { top:19%; width:27%; height:63%; background:linear-gradient(145deg,#a2c2b415,#21384179); }
.menuVisual:before { display:none; }
.whoLearning { display:flex; align-items:center; gap:15px; width:min(100%,520px); margin:28px 0 12px; padding:12px 15px; color:#f3f0df; text-decoration:none; background:#132b28e8; border:1px solid #91aa9170; border-left:3px solid #e7a664; box-shadow:0 12px 24px #07120f66; transition:background .2s,transform .2s; }
.whoLearning:hover,.whoLearning:focus-visible { background:#20443b; transform:translateY(-2px); }
.whoLearning img { width:64px; height:64px; flex:none; border-radius:50%; object-fit:cover; border:2px solid #eac594; background:#0b0b0c; }
.whoLearningCopy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.whoLearningCopy small { color:#eac594; font-size:9px; font-weight:800; letter-spacing:1.6px; }
.whoLearningCopy strong { font:700 25px 'Barlow Condensed',sans-serif; letter-spacing:.4px; }
.whoLearningCopy>span { color:#d0d9cd; font-size:11px; line-height:1.45; }
.whoLearningArrow { margin-left:auto; align-self:center; color:#eac594; font-size:26px; }
.whoHudLogo { position:absolute; left:5px; bottom:calc(100% + 9px); width:66px; height:66px; display:block; pointer-events:auto; border-radius:50%; border:2px solid #edb575; background:#0b0b0c; box-shadow:0 5px 15px #000a; transition:transform .2s,box-shadow .2s; }
.whoHudLogo:hover,.whoHudLogo:focus-visible { transform:scale(1.08); box-shadow:0 5px 18px #e7a66488; }
.whoHudLogo img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.satReading { display:flex; flex-direction:column; gap:3px; padding:18px 22px; background:#102a33; border:1px solid #6a9290; border-left:4px solid #e6ac75; }
.satReading small { color:#c4d5d1; font-size:10px; font-weight:800; letter-spacing:1.4px; }
.satReading strong { color:#f9cb94; font:700 clamp(42px,6vw,66px)/1 'Barlow Condensed',sans-serif; }
.satReading span { color:#c1d3d0; font-size:14px; }
.tdLesson { margin-top:12px; padding:15px 19px; background:#24464b; border:1px solid #789795; }
.tdLesson>b { color:#f9cb94; font-size:11px; letter-spacing:1.3px; }
.tdLesson p { margin:10px 0 0; font-size:14px; line-height:1.55; }
.tdLesson strong { color:#fff0d4; }
.reading { font-size:clamp(22px,3vw,40px); line-height:1.2; overflow-wrap:anywhere; }
.equipmentWorksheet { margin:0 0 22px; padding:0 0 19px; border-bottom:2px solid #5b7e80; }
.diagnosisTop { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.8fr); gap:20px; padding:18px 20px; margin:0 0 18px; background:#244750; border:1px solid #77999a; border-left:4px solid #edb37c; }
.diagnosisTop small { display:block; color:#f4c58d; font-size:10px; font-weight:800; letter-spacing:1.2px; }
.diagnosisTop h3 { margin:5px 0 8px; color:#fff0d8; font:700 27px 'Barlow Condensed',sans-serif; }
.diagnosisTop p { margin:0 0 8px; font-size:13px; line-height:1.45; }
.diagnosisTop label { display:block; margin:0 0 6px; color:#f7dfbc; font-size:12px; font-weight:700; }
.diagnosisTop select { display:block; width:100%; padding:11px; background:#e8eee8; color:#18303a; border:0; }
.diagnosisTop button { display:block; width:100%; margin:8px 0; padding:11px; border:1px solid #eda86e; background:#eda86e; color:#172b34; font-size:12px; font-weight:800; letter-spacing:1px; }
.diagnosisTop button:hover { filter:brightness(1.12); }
.diagnosisTop div:last-child small { color:#bdd5cf; font-weight:600; letter-spacing:0; }
@media(max-width:700px) { .diagnosisTop { grid-template-columns:1fr; } }
.worksheetHeading { padding:11px 13px; margin:0 0 12px; background:#244750; border-left:4px solid #edb37c; }
.worksheetHeading small { display:block; color:#f7d7aa; font-size:11px; font-weight:800; letter-spacing:1.5px; }
.tabletCols .worksheetHeading h3 { margin:3px 0 0; color:#f4e7d2; font-size:23px; }
.comparisonCard { margin:13px 0 17px; padding:15px; background:#19343d; border:1px solid #69898a; }
.comparisonCard h4 { margin:0 0 5px; color:#f2c48d; font:700 19px 'Barlow Condensed',sans-serif; }
.comparisonCard p { margin:0 0 9px; }
.comparisonCard ul { padding:0; list-style:none; }
.comparisonCard li { padding:7px 0; border-top:1px solid #78918a66; color:#f4f0e5; font-size:13px; }
.comparisonCard li b { margin-right:5px; }
.comparisonCard li small { display:block; color:#a9c5c4; font-size:11px; margin-top:3px; }
.comparisonCard label { display:block; margin:11px 0 5px; color:#f3dfbc; font-size:12px; font-weight:700; }
.comparisonEntry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.comparisonEntry input { min-width:0; padding:9px 10px; background:#e6eee9; color:#14313a; border:1px solid #98b9b0; font:700 17px 'DM Sans',sans-serif; }
.comparisonEntry button { width:auto; margin:0; background:#e7ac76; color:#152d32; }
.comparisonEntry :disabled { opacity:.55; cursor:not-allowed; }
.comparisonResult { margin-top:9px; padding:9px 11px; font-size:12px; line-height:1.45; border:1px solid #96b6a7; background:#28534a; }
.comparisonResult.high { background:#66362e; border-color:#ed8d75; }
.comparisonResult.low { background:#274d69; border-color:#8fc9ee; }
.comparisonResult.retry { background:#5a4b2e; border-color:#e1c881; }
.repairChecklist { margin:14px 0; padding:14px 17px; background:#183c41; border:1px solid #9ab3a3; border-left:4px solid #e4b57f; }
.repairChecklist>b { color:#f7d1a0; font-size:11px; letter-spacing:1.2px; }
.repairChecklist ol { list-style:none; margin:9px 0; padding:0; }
.repairChecklist li { padding:5px 0; font-size:13px; }
.repairChecklist button { width:100%; margin:5px 0; background:#dca570; color:#183038; font-weight:800; }
.repairChecklist p { margin:6px 0 0; color:#b9d2cf; font-size:12px; }
.measureWorkflow { margin:16px 0; padding:15px 17px; background:#153841; border:1px solid #789a9e; border-left:4px solid #e7ad73; }
.measureWorkflow h3 { margin:0 0 5px; color:#f3cc99; font:800 17px 'Barlow Condensed',Arial,sans-serif; letter-spacing:.8px; }
.measureWorkflow>p { margin:6px 0 12px; color:#d0e0dc; font-size:13px; line-height:1.5; }
.measureSteps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.measureSteps button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:105px; padding:12px; text-align:left; background:#244a52; border:1px solid #8eafb0; color:#f4f1e6; }
.measureSteps button:hover,.measureSteps button:focus-visible { background:#32616a; border-color:#f4c18b; }
.measureSteps button.next { border-color:#f4bd80; box-shadow:inset 0 0 0 1px #f4bd80; }
.measureSteps button.done { background:#20493e; border-color:#7db79a; }
.measureSteps span { color:#f2c28b; font-size:10px; font-weight:800; letter-spacing:.8px; }
.measureSteps b { font-size:13px; line-height:1.35; }
.measureSteps small { margin-top:auto; color:#cde2d9; font-size:11px; font-weight:800; }
.secondaryChecks { margin:13px 0; border:1px solid #668a8c; background:#193741; }
.secondaryChecks summary { cursor:pointer; padding:12px 14px; color:#f4d1aa; font-size:12px; font-weight:800; letter-spacing:.4px; }
.secondaryChecks[open] summary { border-bottom:1px solid #668a8c; }
.secondaryChecks .testGrid { margin:10px; }
.walkinWorkflow { border:1px solid #6d9490; background:#183841; padding:16px; }
.walkinWorkflow h3 { margin:0 0 8px; color:#f2ba82; }
.walkinWorkflow p { margin:8px 0 14px; }
.walkinWorkflow .testGrid { margin:12px 0; }
.walkinWorkflow .testGrid button small { display:block; margin-top:5px; color:#b7d1cf; font-weight:400; }
.walkinWorkflow .openLadder { width:100%; }
.panelBody button[data-test] .testActionLabel {
  display:block; width:100%; line-height:1.4; font-weight:800; white-space:normal;
}
.panelBody button[data-test] .testQuestion {
  display:block; width:100%; margin-top:8px; color:#d0e2df;
  font:500 11px/1.5 'DM Sans',Arial,sans-serif;
  text-transform:none; letter-spacing:normal; white-space:normal; overflow-wrap:break-word;
}
.evidenceCard { margin:14px 0; padding:16px; border:1px solid #789795; border-radius:10px; background:#183841; }
.evidenceCard h3 { margin:0 0 8px; color:#f4c58d; }
.evidenceCard h4 { margin:15px 0 6px; color:#f4c58d; }
.evidenceCard ol,.evidenceCard ul { margin:10px 0; padding-left:22px; }
.evidenceCard li { margin:8px 0; }
.evidenceCard li b,.evidenceCard li span { display:block; }
.evidenceCard li span { color:#c9ddd8; overflow-wrap:anywhere; }
.evidenceCard label { display:block; margin:12px 0 5px; color:#f7dfbc; font-weight:700; }
.evidenceCard select { width:100%; padding:10px; background:#e8eee8; color:#18303a; }
.referenceChecks { padding:14px; }
.serviceActions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.serviceActions button { padding:13px; background:#244a52; border:1px solid #89a6a6; color:#f3f1e7; font-size:12px; font-weight:800; }
.serviceActions button:hover { border-color:#f4bd80; }
.controlSummary { display:flex; align-items:center; gap:14px; padding:15px; background:#153841; border-left:4px solid #e7ad73; }
.controlSummary b { color:#f4cc9a; font-size:13px; }
.controlSummary strong { color:#f6f5ec; font:800 30px 'Barlow Condensed',Arial,sans-serif; }
.controlSummary span { color:#d0e0dc; font-size:12px; }
@media(max-width:850px){
  .measureSteps{grid-template-columns:1fr}.measureSteps button{min-height:72px}
  .serviceActions{grid-template-columns:1fr}
  #captureHint{top:108px;right:8px;max-width:calc(100vw - 260px);white-space:normal;text-align:center;font-size:9px}
  .topbar{padding:0 10px}.jobline{display:none}.objective{left:10px;top:66px;width:228px}
  .bottom{left:7px;right:7px;bottom:7px}.tooltray{max-width:75vw;overflow:auto}
  .tool{flex-basis:54px;min-width:54px;width:54px;height:54px}.tool small{font-size:7px}
  .tabletButton{padding:10px 9px}.menuContent{padding:34px}.menuContent h1{font-size:clamp(78px,14vw,130px)}
  .menuContent h1 .siteName{font-size:.42em}.menuContent h1 em{font-size:.52em}
  .whoLearning{margin-top:22px}.whoLearning img{width:52px;height:52px}.whoLearningCopy strong{font-size:20px}.whoHudLogo{width:52px;height:52px}
}


/* Softer interface silhouette to match the rounded equipment and characters. */
.objective,.weather,.jobline,#captureHint,#fullscreenButton,#toast { border-radius:10px; }
.tooltray { border-radius:12px; }
.tool,.tabletButton,.menuActions button,.panelActions button,.part,.trainingGrid button,.testGrid button,.serviceActions button,.measureSteps button { border-radius:9px; }
.panel { border-radius:18px; }
.panel:before { border-radius:18px 0 8px 0; }
.menuVisual { clip-path:none; border-radius:22px; }
.visualCard,.whoLearning,.tabletCols>div,.reading,.plate,.schematic,.tabletTabs span,.secondaryChecks,.walkinWorkflow,.controlSummary { border-radius:10px; }


/* Text legibility and wrap safety throughout the simulator, not just the RTU dialog. */
.panel h2 { font-size:clamp(26px,3.5vw,42px); line-height:1.16; padding-right:36px; overflow-wrap:break-word; }
.panelBody, .panelActions, .trainerGuide, .tabletCols, .serviceActions { min-width:0; overflow-wrap:break-word; }
.panelBody button { white-space:normal; line-height:1.45; overflow-wrap:break-word; }
.panelBody .serviceActions button {
  min-width:0; min-height:84px; text-align:left; padding:14px 16px; line-height:1.4;
}
.panelBody .testGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.panelBody .testGrid button { min-width:0; }
@media(max-width:1050px) {
  .panelBody .testGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .panel { padding:24px 18px; width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .panel h2 { font-size:clamp(24px,6.2vw,34px); }
  .panelBody .testGrid, .panelBody .serviceActions { grid-template-columns:minmax(0,1fr); }
  .panelActions { flex-wrap:wrap; }
}