/* Compact branding and campaign panels; the approved playfield/controls stay intact. */
#branding{position:absolute;z-index:18;top:2%;left:7%;width:86%;text-align:center;pointer-events:none;color:#234e42}
#branding>strong{display:block;font-size:clamp(18px,2.6vw,28px);line-height:1.15;font-weight:900;letter-spacing:-.5px}
#branding p{font:clamp(12px,1.65vw,17px)/1.45 Tahoma,Arial,sans-serif;margin:3px auto 0;max-width:780px;direction:rtl;unicode-bidi:isolate;color:#3d684f}
#hud{top:19%}#progress{top:30%}#hint{top:33%}#toast{top:35%}
#toast{max-width:86%;white-space:normal;text-align:center;line-height:1.35}
.overlay{padding:16% 6% 3%;padding-top:min(19svh,105px)}
.panel-copy h1{font-size:clamp(28px,4.7vw,50px);margin:8px 0;letter-spacing:-1.5px}
.overlay.compact h1{font-size:clamp(27px,4.2vw,45px)}
.intro-stats{margin:12px 0}.panel-copy p{line-height:1.4}.panel-copy p.micro{margin-top:8px}
.panel-actions{display:flex;gap:20px}.panel-actions .text-button{font-size:clamp(11px,1.3vw,14px);padding:9px 0}
.intro-label{bottom:1%;font-size:clamp(7px,1vw,11px)}
.intro-art{min-height:0;min-width:0}.intro-art>img{height:100%;object-fit:contain;max-height:95%}.intro-label{bottom:6%}
#reward{background:#f8e7ba;border:1px solid #dfc17e;border-radius:12px;padding:9px 12px;margin:10px 0;width:92%;color:#785e29}
#reward strong{display:block;font-size:clamp(19px,3vw,30px)}#reward span{display:block;font-size:clamp(10px,1.25vw,13px);font-weight:bold}#reward small{display:block;font-size:clamp(9px,1.15vw,12px);margin-top:4px;line-height:1.3}
.overlay.finale{background:#f8f3dd}.finale .orbit-one{background:#f2df9f}.finale .orbit-two{background:#cbdcaa;border:2px solid #d5b95f}.finale .spark{animation:twinkle 1s ease-in-out infinite alternate}.finale #panel-title{color:#397252}.finale #reward{box-shadow:0 0 22px #edbe6455}
#level-select{z-index:10;display:flex;flex-direction:column;gap:10px;padding:19% 6% 3%;padding-top:min(19svh,105px)}
.select-heading{display:flex;width:100%;align-items:center;justify-content:space-between}.select-heading h2{font-size:clamp(18px,2.7vw,28px);margin:4px 0}.select-heading .eyebrow{letter-spacing:1px}
#level-grid{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;min-height:0;overflow:auto;padding:3px}
.level-card{border:1px solid #a9bb96;border-radius:10px;background:#e5edda;text-align:left;padding:8px 10px;min-height:52px;position:relative}.level-card strong{font-size:19px}.level-card small{display:block;font-size:10px;color:#5a795e;margin-top:2px}.level-card:disabled{opacity:.5;cursor:default;background:#e3e3d6}.level-card.completed{background:#cee1b6;border-color:#8fad75}.level-card.current{outline:2px solid #cead53}.level-card .status{float:right;font-size:11px}.level-card .reward-dot{color:#8c6723;font-weight:bold}
#saved-progress{font-size:clamp(10px,1.2vw,13px);margin:0;color:#628063;align-self:flex-start}
#level-grid{touch-action:pan-y;overscroll-behavior:contain}
body.panel-open #hud,body.panel-open #progress,body.panel-open #hint,body.panel-open #controls{visibility:hidden}
@keyframes twinkle{to{transform:scale(1.2) rotate(14deg);opacity:.6}}
@media(max-height:450px){#branding>strong{font-size:20px}#branding p{font-size:12px;line-height:1.35}#hud{top:20%}#progress{top:31%}#hint{top:34%;font-size:10px}.hint-number{width:17px;height:17px}.overlay,#level-select{padding-top:20svh}.panel-copy h1,.overlay.compact h1{font-size:29px}.panel-copy p{font-size:12px;margin:7px 0}.intro-stats{margin:8px 0}.primary{padding:10px 16px}.panel-copy p.micro{font-size:9px;margin-top:3px}#reward{padding:6px 9px;margin:7px 0}#reward strong{font-size:23px}.level-card{padding:5px 8px;min-height:43px}.level-card strong{font-size:16px}.level-card small{font-size:9px}#level-grid{gap:6px}.select-heading h2{font-size:20px}#level-select{gap:6px}.intro-label{bottom:0}}
@media(orientation:portrait){#branding{top:4%;left:5%;width:90%}#branding p{font-size:15px}.overlay,#level-select{padding-top:30%}#rotate{padding-top:70px}}
@media(prefers-reduced-motion:reduce){.finale .spark{animation:none}}
/* Arabic text fitting only: keep control positions and playfield geometry intact. */
.panel-copy,.select-heading>div,#saved-progress,#toast,#hint-text,.keyboard-note,#rotate,#load-error,.intro-label{direction:rtl;unicode-bidi:isolate;font-family:Tahoma,Arial,sans-serif}
.panel-copy h1,.eyebrow,.intro-label{letter-spacing:0}
.panel-copy{text-align:right}.panel-actions,.intro-stats{direction:rtl}
#branding>strong,#level-number,.level-card strong{direction:ltr;unicode-bidi:isolate}
.level-card{text-align:right;font-family:Tahoma,Arial,sans-serif}.level-card strong{display:block;font-size:15px}.level-card .status{float:left}
.level-card small,#level-name{direction:rtl;unicode-bidi:isolate;letter-spacing:0}
#sound-state{font-size:7px}#panel-description,#panel-footnote{overflow-wrap:anywhere}
@media(max-height:450px){.level-card strong{font-size:12px}.panel-copy h1,.overlay.compact h1{font-size:26px}.panel-copy p.micro{line-height:1.5}}
/* Clinic registration/result integration; does not alter playfield geometry. */
.clinic-overlay{position:absolute;inset:0;z-index:40;background:#f8f6e9f7;display:grid;place-items:center;padding:5%;font-family:Tahoma,Arial,sans-serif}.clinic-card{width:min(560px,88%);background:#fffdf3;border:1px solid #b8c9a4;border-radius:20px;padding:clamp(18px,4vw,34px);box-shadow:0 18px 50px #173e3630;text-align:right}.clinic-card h1{direction:ltr;text-align:center;font-size:clamp(22px,4vw,38px);margin:8px 0;color:#2e6952}.clinic-card>p{text-align:center;color:#65806a;line-height:1.7}.clinic-card form{display:grid;gap:12px}.clinic-card label{display:grid;gap:6px;font-weight:bold;color:#3d684f}.clinic-card input{width:100%;border:1px solid #a9bb96;border-radius:11px;padding:12px 14px;font:16px Tahoma,Arial;background:#fff;color:#234e42;direction:rtl}.clinic-card input:focus{outline:3px solid #f1b74166;border-color:#7c9e68}.clinic-card .primary{width:100%;margin-top:4px}.clinic-error{min-height:1.5em!important;margin:0!important;color:#a23e3e!important;font-size:13px!important;text-align:right!important}.result-card{width:min(650px,92%)}#result-content{background:#f8e7ba;border:1px solid #dfc17e;border-radius:14px;padding:15px;margin:14px 0;line-height:1.9;color:#5e4b28}#result-content strong{color:#2e6952}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions .primary{width:100%;justify-content:center}.result-actions .secondary{background:#9a7534;box-shadow:0 5px 0 #765522}.result-actions .text-button{grid-column:1/-1}.clinic-overlay[hidden]{display:none!important}@media(max-height:450px){.clinic-overlay{padding:3%}.clinic-card{padding:12px 18px}.clinic-card h1{font-size:22px;margin:3px}.clinic-card>p{font-size:11px;margin:5px}.clinic-card form{grid-template-columns:1fr 1fr;gap:8px}.clinic-card form .clinic-error,.clinic-card form .primary{grid-column:1/-1}.clinic-card input{padding:8px 10px}.result-card{font-size:12px}#result-content{padding:8px;margin:6px 0;line-height:1.5}.result-actions .primary{padding:8px}}

/* Stable clinic mascot used on registration and reward cards. */
.clinic-mascot{position:relative;width:clamp(92px,16vw,150px);aspect-ratio:1;margin:-4px auto 8px;display:grid;place-items:center}.clinic-mascot .clinic-orbit{position:absolute;inset:7%;border-radius:50%;background:#e1ebce;border:1px solid #c7d8ad}.clinic-mascot img{position:relative;z-index:1;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 8px 8px #3a654222)}.result-mascot{width:clamp(82px,13vw,125px);margin-bottom:2px}@media(max-height:450px){.clinic-mascot{width:72px;position:absolute;left:20px;top:16px}.result-mascot{width:62px}.clinic-card{position:relative}}
.clinic-error.clinic-warning{color:#7b5a16!important;background:#fff3cf;border:1px solid #e3c36d;border-radius:10px;padding:9px 11px;line-height:1.6}

/* Cards may scroll on short landscape screens; forms retain normal text selection. */
.clinic-overlay{overflow-y:auto;align-items:safe center;touch-action:pan-y}
.clinic-card input{user-select:text;-webkit-user-select:text;touch-action:manipulation}
.reward-milestones{padding:10px;margin:10px 0;background:#f8e7ba;border:1px solid #dfc17e;border-radius:12px;text-align:center;color:#5e4b28;font-size:12px}
.reward-milestones>div{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:7px}
.reward-milestones span{white-space:nowrap}
@media(max-height:650px) and (orientation:landscape){
  .clinic-overlay{padding:12px 3%}.clinic-card{width:min(750px,96%);position:relative;padding:14px 20px 14px 130px}
  .clinic-mascot,.result-mascot{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:106px;margin:0}
  .clinic-card h1{font-size:22px;margin:3px}.clinic-card>p{font-size:11px;margin:5px}
  .clinic-card form{grid-template-columns:1fr 1fr;gap:7px}.clinic-card form .clinic-error,.clinic-card form .primary{grid-column:1/-1}
  .clinic-card input{padding:8px 10px}.clinic-card label{font-size:12px}.clinic-card .primary{padding:9px 12px;font-size:14px}
  .reward-milestones{padding:7px;margin:7px 0;font-size:11px}.reward-milestones>div{margin-top:5px;gap:4px}
}