.hmh-app,.hmh-admin{--hmh-green:#164e43;--hmh-cream:#f6f3eb;--hmh-line:#d8ded8;box-sizing:border-box;font-family:Tahoma,Arial,sans-serif;color:#26352f}
.hmh-app *,.hmh-admin *{box-sizing:border-box}
.hmh-app{max-width:780px;margin:30px auto;padding:0 12px;direction:rtl;font-size:16px}
.hmh-shell{background:#fff;border:1px solid #e4e8e4;border-radius:17px;padding:20px;box-shadow:0 6px 24px #182e2512}
.hmh-heading h2{margin:7px 0 22px;font-size:clamp(21px,4.5vw,30px);line-height:1.6;color:#164e43}
.hmh-eyebrow{font-size:13px!important;letter-spacing:.1px;color:#63736b;margin:0!important}
.hmh-panel{padding:18px;border-radius:12px;background:var(--hmh-cream)}
.hmh-panel h3{margin:0 0 15px;font-size:21px;color:#193e34}
.hmh-panel p{line-height:2}
.hmh-start-form,.hmh-finish-form,.hmh-answer-form{display:flex;flex-direction:column;gap:13px}
.hmh-start-form label,.hmh-finish-form label{font-weight:600}
.hmh-start-form input,.hmh-finish-form input{padding:13px;border-radius:8px;border:1px solid #b7c7bd;font-size:17px;width:100%;background:white;color:#1a3026}
.hmh-app button.hmh-action{width:100%;margin-top:8px;padding:13px 20px;border:0;background:var(--hmh-green);color:white;border-radius:9px;font-size:16px;font-weight:bold;cursor:pointer}
.hmh-app button:disabled{opacity:.52!important;cursor:not-allowed!important}
.hmh-statusbar{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;font-size:13px;margin-bottom:12px}
.hmh-progress{display:flex;gap:4px;margin-bottom:12px;direction:ltr}
.hmh-progress i{flex:1;height:7px;border-radius:20px;background:#dfe5df}.hmh-progress .on{background:#327d69}
.hmh-option{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--hmh-line);padding:12px;border-radius:9px;cursor:pointer}
.hmh-option input{width:19px;height:19px;accent-color:var(--hmh-green)}
.hmh-alert{margin:14px 0 0;background:#fae8e4;color:#742d28;padding:11px 14px;border-radius:8px;line-height:1.8}
.hmh-alert.hmh-good{background:#e0efe5;color:#24533d}
.hmh-penalty{padding:9px 13px;background:#6a3028;color:white;display:flex;gap:10px;align-items:center;margin-bottom:13px;border-radius:9px;font-size:13px}
.hmh-penalty[hidden]{display:none!important}
.hmh-penalty .hmh-count{font-weight:900;font-size:26px;min-width:28px;display:inline-block;text-align:center}
.hmh-panorama{position:relative;overflow:hidden;width:100%;height:min(65vh,490px);min-height:290px;background:#182523;border-radius:12px;touch-action:none}
.hmh-panorama .hmt-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.hmh-panorama .hmt-controls{position:absolute;bottom:35px;left:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none;z-index:8}
.hmh-panorama .hmt-controls button{border:0;border-radius:6px;padding:7px 10px;background:#ffffffea;color:#1b2d25;font-size:12px;pointer-events:auto;cursor:pointer}
.hmh-panorama .hmt-status{position:absolute;bottom:7px;right:10px;left:10px;color:white;text-shadow:0 2px 4px #000;pointer-events:none;font-size:11px;z-index:7}
.hmh-panorama .hmh-hotspot-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.hmh-panorama button.hmh-spot{position:absolute;transform:translate(-50%,-50%);z-index:6;display:flex;align-items:center;justify-content:center;width:45px;height:45px;border:2px solid #faf1c8;border-radius:50%;background:#d8ad50df;color:#28210b;font-size:19px;font-weight:bold;cursor:pointer;pointer-events:auto;box-shadow:0 1px 15px #000a}
.hmh-panorama button.hmh-spot-card{width:45px;height:45px;font-size:19px;background:#d8ad50df}
.hmh-tip{font-size:13px;color:#63766b}
.hmh-victory{text-align:center}.hmh-medal{font-size:58px;color:#ba8c36}.hmh-result-time{font-size:42px;color:#175c47;direction:ltr;display:block}
.hmh-admin .hmh-question-config{background:#fff;padding:12px 18px;margin:12px 0;border:1px solid #d0d7d0;border-radius:9px;max-width:900px}
.hmh-admin .hmh-question-config legend{font-weight:bold;padding:0 9px}
.hmh-admin .hmh-hotspot-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hmh-admin .hmh-admin-preview{max-width:760px;margin:12px 0 28px}
.hmh-admin .hmh-admin-preview .hmh-panorama{height:380px}
.hmh-admin .hmh-preview-badge{position:absolute;top:10px;right:10px;background:#fff9;padding:8px 10px;border-radius:6px;z-index:4;color:#1c342a;font-size:13px;pointer-events:none}
@media(max-width:600px){.hmh-shell{padding:12px}.hmh-panel{padding:12px}.hmh-panorama{height:52vh;min-height:280px}.hmh-statusbar{font-size:11px}}

/* v0.2 — fullscreen immersive game (separate from the admin panorama editor) */
body.hmh-playing{overflow:hidden!important}
body.hmh-playing #hmh-game.hmh-app{
 position:fixed!important;inset:0!important;z-index:2147483000!important;
 display:block!important;width:100vw!important;max-width:none!important;
 height:100vh!important;height:100dvh!important;min-height:0!important;
 padding:0!important;margin:0!important;overflow:hidden!important;
 background:#e9eee8;color:#223b32;font-family:Tahoma,Arial,sans-serif;
}
.hmh-app>.hmh-shell{
 height:100%;width:100%;max-width:none;overflow:hidden;display:flex;
 flex-direction:column;border:0;border-radius:0;box-shadow:none;
 padding:clamp(10px,1.6vh,18px) clamp(12px,3vw,48px);
 background:linear-gradient(158deg,#eff2e9 0%,#fff 50%,#e3ede5 100%);
}
.hmh-app .hmh-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;border-bottom:1px solid #d6e0d7;margin-bottom:10px;padding-bottom:8px}
.hmh-app .hmh-heading h2{font-size:clamp(18px,3vw,28px);line-height:1.35;margin:2px 0;color:#1b5141}
.hmh-app .hmh-main{display:flex;flex-direction:column;align-items:stretch;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 max(16px, env(safe-area-inset-bottom))}
.hmh-app .hmh-main>.hmh-panel{width:100%;max-width:1080px;margin:0 auto;background:#f8f8f4;flex:1;display:flex;flex-direction:column;min-height:min-content;gap:8px}
.hmh-app .hmh-panel h3{margin:0 0 3px;font-size:clamp(18px,2.4vw,23px)}
.hmh-app .hmh-panel p{margin:3px 0;line-height:1.65}
.hmh-app .hmh-statusbar,.hmh-app .hmh-progress,.hmh-app .hmh-penalty{width:100%;max-width:1080px;margin-left:auto;margin-right:auto;flex-shrink:0}
.hmh-app .hmh-panorama{height:clamp(280px,57dvh,850px);min-height:280px;max-height:none;border-radius:12px;flex-shrink:0}
.hmh-app .hmh-panel .hmh-answer-form{gap:clamp(9px,1.1vh,18px);width:100%;max-width:760px;margin:auto;justify-content:center}
.hmh-app .hmh-panel .hmh-option{font-size:clamp(14px,1.8vw,18px);padding:clamp(10px,1.7vh,18px)}
.hmh-app .hmh-panel .hmh-question{font-size:clamp(17px,2.2vw,23px);font-weight:600;max-width:760px;margin:clamp(5px,2vh,20px) auto;width:100%;line-height:1.9}
.hmh-app .hmh-start-form{max-width:560px;width:100%;margin:auto}
.hmh-app .hmh-nav{display:flex;align-items:center;gap:7px}
.hmh-app .hmh-nav a,.hmh-app .hmh-nav button{font-size:12px;text-decoration:none;white-space:nowrap;background:#fff;color:#285343;border:1px solid #bed0c3;border-radius:8px;padding:8px 10px;cursor:pointer}
.hmh-app .hmh-nav a:hover,.hmh-app .hmh-nav button:hover{background:#e4eee6}
.hmh-app .hmh-feedback{position:absolute;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,24,19,.68);backdrop-filter:blur(6px);pointer-events:auto;animation:hmh-appear .15s ease-out}
.hmh-app .hmh-feedback-card{width:min(100%,390px);text-align:center;border-radius:22px;padding:30px 22px 28px;box-shadow:0 15px 55px #101f1f66;background:#e5f3e8;color:#174533;display:flex;flex-direction:column;align-items:center;gap:10px}
.hmh-app .hmh-feedback-wrong .hmh-feedback-card{background:#fff0e8;color:#7b3028}
.hmh-app .hmh-feedback-icon{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:50px;line-height:1;border:3px solid currentColor;font-weight:bold}
.hmh-app .hmh-feedback-card strong{font-size:clamp(21px,5vw,28px);line-height:1.6}
.hmh-app .hmh-feedback-card p{margin:0;font-size:14px}
.hmh-app .hmh-feedback-count{font-size:58px;font-variant-numeric:tabular-nums;line-height:1.2}
@keyframes hmh-appear{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.hmh-admin .hmh-transfer-tools{background:#f8faf8;border:1px solid #d4e3d8;border-radius:10px;max-width:990px;padding:14px 20px;margin:14px 0 26px}
.hmh-admin .hmh-transfer-tools form{margin:14px 0}
@media(max-width:650px){
 .hmh-app>.hmh-shell{padding:8px 9px}
 .hmh-app .hmh-heading{margin-bottom:5px}
 .hmh-app .hmh-heading h2{font-size:16px}
 .hmh-app .hmh-heading .hmh-eyebrow{font-size:10px!important}
 .hmh-app .hmh-nav a,.hmh-app .hmh-nav button{font-size:10px;padding:6px}
 .hmh-app .hmh-panel{padding:11px;gap:5px}
 .hmh-app .hmh-panorama{height:max(43dvh,260px);min-height:260px}
 .hmh-app .hmh-statusbar{font-size:11px;gap:4px}
 .hmh-app .hmh-option{padding:10px}
 .hmh-app .hmh-tip{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.hmh-app .hmh-feedback{animation:none}}

/* v0.2.2 — identical visible markers for the first and final panorama. */
.hmh-app .hmh-panorama button.hmh-spot,
.hmh-app .hmh-panorama button.hmh-spot-card,
.hmh-app .hmh-panorama button.hmh-spot-number{
 width:45px;height:45px;min-width:45px;min-height:45px;
 background:#d8ad50eb;border:2px solid #faf1c8;color:#28210b;
 font-size:21px;z-index:10;opacity:1;visibility:visible;
 box-shadow:0 0 0 5px #f1ce7d44,0 3px 17px #0009;
 -webkit-tap-highlight-color:transparent;
}
.hmh-app .hmh-feedback{
 position:fixed;inset:0;z-index:2147483640;
 background:rgba(12,24,19,.72);
}
/* In native fullscreen this element is in the top layer; the feedback MUST be its child. */
.hmh-app .hmh-panorama:fullscreen .hmh-feedback{position:absolute;inset:0;z-index:2147483640}
.hmh-app .hmh-feedback-card{animation:hmh-feedback-pop .26s cubic-bezier(.15,1.2,.38,1) both}
@keyframes hmh-feedback-pop{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(prefers-reduced-motion:reduce){.hmh-app .hmh-feedback-card{animation:none}}

/* v0.2.3 — visual final answer uses the same overlay as textual and first panorama questions. */
.hmh-app .hmh-panorama button.hmh-spot-number{touch-action:manipulation}

/* v0.2.5 - prevent theme justification/Unicode joining from breaking mobile labels. */
.hmh-app .hmh-start-form label{direction:rtl;text-align:right;text-align-last:right;white-space:normal;line-height:1.6;unicode-bidi:plaintext;}
.hmh-app .hmh-start-form input{direction:rtl;text-align:right;unicode-bidi:plaintext;}
.hmh-app .hmh-start-form,.hmh-app .hmh-start-form p{text-align:right;text-align-last:right;}
.hmh-app .hmh-nav button.hmh-screen-toggle,
.hmh-app .hmh-panorama .hmt-controls button{white-space:nowrap;text-align:center;text-align-last:center;direction:rtl;unicode-bidi:plaintext;line-height:1.5;font-family:Tahoma,Arial,sans-serif;}
.hmh-app .hmh-panel > p{ text-align:right;text-align-last:right; }