*{box-sizing:border-box}
:root{--green:#075831;--green2:#0d7b46;--gold:#d79c2e;--cream:#fff7e9;--brown:#6a4d2f;--red:#c83d30}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:#d8c8ac;color:#2a2117}
button,input{font:inherit}
button{cursor:pointer}
.phone-shell{width:min(100%,540px);min-height:100vh;margin:auto;background:#efe5d2;box-shadow:0 0 35px #0003;overflow:hidden;position:relative}
.screen{display:none;min-height:100vh;position:relative}
.screen.active{display:block}

/* الصفحة الرئيسية: الصورة المعتمدة نفسها، والأزرار الحقيقية فوقها */
.poster-home{background:url("assets/reference/home-approved.jpg") center top/100% auto no-repeat,#efe1c7}
.home-hotspots{position:absolute;inset:0}
.hotspot{position:absolute;border:0;background:transparent}
.simple-hotspot{top:42%;right:7%;width:42%;height:19%}
.advanced-hotspot{top:42%;left:7%;width:42%;height:19%}
.board-hotspot{top:63%;right:27%;width:21%;height:14%}
.about-hotspot{top:63%;left:6%;width:21%;height:14%}
.hotspot:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px #0a6b40;border-radius:22px}

/* البداية */
.start-screen{background:linear-gradient(#ffffff25,#fff8e4bb),url("assets/reference/start-approved.jpg") center/cover no-repeat}
.topbar{height:78px;background:linear-gradient(180deg,#064d2c,#043c23);color:white;display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;padding:0 14px;font-size:25px;position:relative;z-index:3}
.topbar strong{text-align:center}
.round-btn{width:48px;height:48px;border-radius:50%;border:2px solid #d9b663;background:#fff4d8;color:#16432d;font-weight:900}
.start-scene{position:relative;height:430px;overflow:hidden}
.start-character{position:absolute;left:-5px;bottom:0;width:45%;height:88%;object-fit:cover;object-position:left center;border-radius:0 35px 0 0;mix-blend-mode:multiply}
.speech-bubble{position:absolute;right:7%;top:55px;width:61%;background:#fff8e9f3;border:2px solid #c8aa7b;border-radius:24px;padding:20px 16px;text-align:center;font-size:21px;font-weight:700;line-height:1.7;box-shadow:0 8px 20px #0002}
.name-card{width:87%;margin:-12px auto 25px;background:#fff8e9f7;border:2px solid #c8aa7b;border-radius:22px;padding:16px;text-align:center;box-shadow:0 10px 25px #0003;position:relative;z-index:2}
.name-card strong{display:block;color:#0a5632;font-size:20px;margin-bottom:10px}
.name-card input{width:100%;height:53px;border:1px solid #bfae91;border-radius:12px;padding:0 15px;text-align:center;background:#fffdfa;font-size:18px}
.green-btn{border:0;border-radius:16px;background:linear-gradient(#168c50,#075831);color:#fff;font-weight:700;padding:14px 20px;box-shadow:0 5px 0 #05452a;margin-top:12px}
.name-card .green-btn{width:100%;font-size:21px}
#selectedModeText{display:block;margin-top:12px;color:#705a3d}

/* اللعب */
.game-screen{background:#cab391;overflow:hidden}
.game-stage-bg{position:absolute;inset:0;background-position:center;background-size:cover;transition:background-image .35s ease}
.game-stage-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff18,#fff5dd35 45%,#0000000d)}
.game-overlay{position:relative;z-index:1;min-height:100vh;padding:12px 18px 18px}
.stats-bar{height:105px;background:#fff8eaf2;border:1px solid #c9ae82;border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr) 54px;align-items:center;box-shadow:0 5px 15px #0002}
.stats-bar>div{text-align:center;border-left:1px solid #d9c7a8}
.stats-bar>div:nth-child(3){border-left:0}
.stats-bar span,.stats-bar b{display:block}
.stats-bar span{font-weight:700;font-size:15px}
.stats-bar b{font-size:24px;color:#075831;margin-top:7px}
.stats-sound{justify-self:center}
.progress{height:18px;background:#fff7e8dc;border:2px solid #c7b18f;border-radius:999px;margin:18px 3px;overflow:hidden;padding:3px}
.progress>div{height:100%;width:5%;border-radius:999px;background:linear-gradient(90deg,#16a257,#0d7b46);transition:width .35s}
.question-zone{position:relative;min-height:520px}
.question-card{width:78%;min-height:480px;background:#fff8eefa;border:2px solid #c7ab7b;border-radius:24px;padding:17px 15px 20px;box-shadow:0 9px 25px #0003;position:relative;z-index:2}
.stage-badge{display:table;margin:0 auto 8px;background:#075831;color:#fff;border-radius:999px;padding:7px 18px;font-weight:700}
.question-card h2{min-height:105px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:24px;line-height:1.6;margin:4px 0 12px}
.answers{display:grid;gap:12px}
.answer{min-height:67px;border:2px solid #c9b58f;border-radius:15px;background:#fffdf7;color:#2a2117;font-size:18px;font-weight:700;padding:11px 12px;transition:.18s}
.answer.correct{background:#28a745!important;border-color:#17752b!important;color:#fff!important;transform:scale(1.015)}
.answer.wrong{background:#d74538!important;border-color:#9d2018!important;color:#fff!important}
.answer:disabled{cursor:default;opacity:1}
.feedback{min-height:47px;margin-top:11px;text-align:center;font-weight:700;font-size:17px;color:#8a2c22}
.question-character{position:absolute;z-index:3;right:-19px;bottom:0;width:31%;height:65%;object-fit:cover;object-position:center;border-radius:70px 0 0 0;box-shadow:-8px 0 20px #0002}
.game-actions{display:flex;justify-content:space-between;gap:12px;margin-top:4px}
.hint-btn,.end-btn{border:2px solid #f0d393;border-radius:17px;padding:13px 18px;color:white;font-weight:700;font-size:17px;box-shadow:0 5px 0 #0004}
.hint-btn{background:linear-gradient(#f0bd4e,#cf8d21)}
.end-btn{background:linear-gradient(#d64a37,#a7271f)}

/* النتيجة */
.result-screen{background:linear-gradient(#fff0d16b,#f8ead2e8),url("assets/reference/result-approved.jpg") center top/cover fixed}
.result-hero{padding:20px 18px 12px;text-align:center}
.result-ribbon{display:table;margin:0 auto 16px;padding:10px 45px;background:linear-gradient(#0b6840,#06462d);color:#fff;border-radius:8px 8px 22px 22px;font-size:25px;font-weight:700;box-shadow:0 5px 15px #0003}
.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.score-box{background:#fff9edf4;border:2px solid #c5a97c;border-radius:20px;padding:17px}
.score-box small,.score-box strong,.score-box b{display:block}
.score-box strong{font-size:40px;color:#075831;margin:5px 0}
.score-box b{font-size:21px;color:#075831}
.kaaba-mark{font-size:86px}
.finish-phrase{margin:10px auto 13px;background:#fff7e7e6;border-radius:15px;padding:11px;font-weight:700}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.result-stats>div{background:#fff8eaf2;border:1px solid #cdb48e;border-radius:13px;padding:9px}
.result-stats span,.result-stats b{display:block}.result-stats b{font-size:21px;color:#075831;margin-top:4px}
.result-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result-buttons .green-btn{padding:12px 8px}
.leaderboard-card{margin:8px 12px 16px;background:#fff8eaf4;border:2px solid #0b5a36;border-radius:18px;overflow:hidden;box-shadow:0 8px 20px #0002}
.leaderboard-card h3{margin:0;background:#075831;color:#fff;padding:11px;text-align:center;font-size:21px}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:470px}
th,td{padding:9px 8px;text-align:center;border-bottom:1px solid #ead8bb;font-size:14px}
th{color:#44351f;background:#f6ead5}
tbody tr:nth-child(even){background:#f8eddc}
.credit{background:#064a2c;color:#fff;text-align:center;font-size:19px;padding:16px;margin-top:8px}
.board-screen{background:#efe4d1}
.leaderboard-card.standalone{margin-top:35px}
.about-card{width:90%;margin:40px auto;background:#fff8e9;border:2px solid #c9ad80;border-radius:20px;padding:22px;text-align:center;line-height:1.9}

/* الوضع البسيط: لا نعرض التلميح */
.game-screen.simple-mode .hint-btn{visibility:hidden}

/* تعديلات الجوال الصغير */
@media(max-width:430px){
  .topbar{height:64px;font-size:21px}.round-btn{width:42px;height:42px}
  .start-scene{height:395px}.speech-bubble{font-size:18px;top:38px}
  .game-overlay{padding:9px 10px 14px}.stats-bar{height:88px}
  .stats-bar b{font-size:20px}.question-zone{min-height:500px}
  .question-card{width:82%;min-height:455px;padding:13px 10px}
  .question-card h2{font-size:21px;min-height:95px}
  .answer{font-size:16px;min-height:62px}
  .question-character{right:-11px;width:29%;height:59%}
  .game-actions button{font-size:15px;padding:11px 12px}
}
.game-screen{min-height:100vh;background:linear-gradient(#ead8b6,#d8c39d);padding:8px 10px 12px;display:none}.game-screen.active{display:flex;flex-direction:column;gap:8px}.game-screen .stats-bar{flex:0 0 76px;height:76px;width:100%;margin:0;border-radius:18px;grid-template-columns:repeat(3,1fr) 44px}.game-screen .stats-bar span{font-size:12px}.game-screen .stats-bar b{font-size:18px;margin-top:3px}.game-screen .round-btn{width:36px;height:36px}.game-screen .progress{height:12px;margin:0 3px;padding:2px}.visual-scene{position:relative;flex:0 0 31vh;min-height:210px;max-height:310px;overflow:hidden;border-radius:20px;border:2px solid #c7a56f;box-shadow:0 5px 14px #0002}.visual-scene .game-stage-bg{position:absolute;inset:0;background-size:cover;background-position:center}.game-screen .question-card{width:100%;min-height:0;border-radius:19px;padding:9px 10px 10px;margin:0}.game-screen .stage-badge{font-size:13px;padding:4px 16px;margin:0 auto 4px}.game-screen .question-card h2{min-height:0;margin:3px 0 7px;font-size:17px;line-height:1.45}.game-screen .answers{gap:6px}.game-screen .answer{min-height:43px;border-radius:12px;font-size:14px;padding:7px 10px}.game-screen .feedback{min-height:24px;margin-top:4px;font-size:13px}.game-screen .game-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px}.game-screen .hint-btn,.game-screen .end-btn{min-height:45px;padding:8px;font-size:14px}.question-character{display:none!important}@media(max-width:430px){.game-screen{padding:7px 8px 9px;gap:6px}.game-screen .stats-bar{flex-basis:68px;height:68px}.visual-scene{flex-basis:29vh;min-height:195px}.game-screen .question-card h2{font-size:16px}.game-screen .answer{min-height:40px;font-size:13px}}@media(max-height:740px){.visual-scene{flex-basis:26vh;min-height:165px}.game-screen .stats-bar{flex-basis:62px;height:62px}.game-screen .answer{min-height:36px;padding:5px 8px}}
/* ===== v8: القالب المعتمد فعليًا ===== */
.game-screen{
  min-height:100svh!important;
  height:100svh;
  overflow:hidden;
  padding:8px 10px 10px!important;
  gap:7px!important;
  background:linear-gradient(180deg,#b9dcf5 0 47%,#d9c29a 47% 100%)!important;
}
.game-screen.active{display:flex!important;flex-direction:column}
.play-top{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;flex:0 0 72px}
.circle-control{width:48px;height:48px;border-radius:50%;border:2px solid #cba85e;background:#fff7e7;color:#4e5459;font-size:24px;font-weight:900;box-shadow:0 3px 7px #0003}
.stats-pill{height:70px;background:#fff8e9f7;border:2px solid #d3b273;border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;box-shadow:0 4px 10px #0002}
.stats-pill>div{text-align:center;border-left:1px solid #d8c39a}
.stats-pill>div:last-child{border-left:0}
.stats-pill span,.stats-pill b{display:block}
.stats-pill span{font-size:12px;font-weight:700}
.stats-pill b{font-size:19px;color:#075831;margin-top:2px}
.stats-pill>div:last-child b{color:#ad231e}
.compact-progress{flex:0 0 8px!important;height:8px!important;margin:0 3px!important;padding:1px!important}

.scene-wrap{position:relative;flex:1 1 42%;min-height:0;overflow:hidden;border-radius:18px;border:2px solid #d0ad6a;box-shadow:0 4px 11px #0002;background:#c8d7d7}
.scene-wrap .game-stage-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:background-image .3s}
.scene-title{position:absolute;top:10px;right:10px;background:linear-gradient(#087244,#075831);color:white;border-radius:16px;padding:7px 18px;font-size:16px;font-weight:800;box-shadow:0 3px 8px #0003}

.quiz-panel{flex:0 0 auto;width:100%;background:#fff9ecf8;border:2px solid #d0ad72;border-radius:22px;padding:8px 10px 9px;box-shadow:0 5px 13px #0002}
.quiz-panel .stage-badge{font-size:12px;padding:3px 15px;margin:0 auto 3px}
.quiz-panel h2{font-size:16px;line-height:1.35;min-height:0!important;margin:3px 0 6px;text-align:center}
.quiz-panel .answers{gap:5px}
.quiz-panel .answer{min-height:38px!important;padding:5px 9px!important;border-radius:12px;font-size:13px!important;text-align:right}
.quiz-panel .feedback{min-height:18px;margin-top:3px;font-size:12px}

.play-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:0 0 48px}
.play-actions button{min-height:44px!important;padding:7px 8px!important;border-radius:15px!important;font-size:14px!important;margin:0!important}
.question-character{display:none!important}

/* الجوال 412×915 هو المقاس المرجعي */
@media(max-width:430px){
 .game-screen{padding:6px 7px 8px!important;gap:5px!important}
 .play-top{grid-template-columns:44px 1fr 44px;gap:5px;flex-basis:62px}
 .circle-control{width:40px;height:40px;font-size:19px}
 .stats-pill{height:60px;border-radius:17px}
 .stats-pill span{font-size:10px}.stats-pill b{font-size:16px}
 .scene-wrap{flex-basis:43%}
 .scene-title{font-size:13px;padding:5px 13px}
 .quiz-panel{padding:6px 7px 7px;border-radius:17px}
 .quiz-panel h2{font-size:14px;margin:2px 0 4px}
 .quiz-panel .answer{min-height:34px!important;font-size:12px!important;padding:4px 7px!important}
 .quiz-panel .answers{gap:4px}
 .play-actions{flex-basis:42px}
 .play-actions button{min-height:39px!important;font-size:12px!important}
}
@media(max-height:760px){
 .play-top{flex-basis:55px}.stats-pill{height:53px}
 .scene-wrap{flex-basis:38%}
 .quiz-panel h2{font-size:13px}
 .quiz-panel .answer{min-height:31px!important}
}

/* ===== v9: الصور الطولية المعتمدة ===== */
.portrait-start,.portrait-result{background:#e9dcc4!important;overflow:hidden;min-height:100svh;position:relative}
.portrait-template{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.portrait-back{position:absolute;top:1.2%;left:2%;width:15%;height:10%;border:0;background:transparent;z-index:4}
.portrait-sound{position:absolute;top:1.6%;right:2%;width:42px;height:42px;border-radius:50%;border:2px solid #d7b45f;background:#fff4d9;z-index:5;font-size:18px}
.portrait-name-input{position:absolute;z-index:5;left:17%;right:17%;top:72.7%;width:66%;height:7.2%;border:0;background:#fffaf3;text-align:center;font-size:17px;border-radius:10px;outline:none}
.portrait-start-button{position:absolute;z-index:5;left:17%;right:17%;top:83.2%;width:66%;height:9.5%;border:0;background:transparent}
.portrait-mode{position:absolute;z-index:5;bottom:1%;left:10%;right:10%;text-align:center;color:#5e4c31;font-size:11px}

.portrait-result .result-template{filter:saturate(.96)}
.dynamic-result-layer{position:absolute;inset:0;z-index:3}
.dyn-score{position:absolute;top:9.6%;left:6%;width:43%;height:22%;background:#fff9eefa;border:1.5px solid #c8a674;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 3px 8px #0002}
.dyn-score small{font-size:13px;font-weight:700}.dyn-score strong{font-size:32px;color:#075831;margin:3px 0}.dyn-score b{font-size:16px;color:#075831}
.dyn-finish{position:absolute;top:32.3%;left:5%;right:5%;margin:0;background:#fff9eef2;border-radius:10px;padding:8px;text-align:center;font-size:13px;font-weight:700}
.dyn-stats{position:absolute;top:39.5%;left:5%;right:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dyn-stats>div{background:#fff9eef5;border:1px solid #d0b486;border-radius:9px;text-align:center;padding:5px}.dyn-stats span,.dyn-stats b{display:block;font-size:12px}.dyn-stats b{font-size:17px;color:#075831}
.dyn-buttons{position:absolute;top:49.5%;left:5%;right:5%;display:grid;grid-template-columns:1fr 1fr;gap:7px}.dyn-buttons button{border:0;border-radius:12px;background:linear-gradient(#15894f,#075831);color:#fff;font-weight:700;padding:9px 4px;font-size:12px}
.dyn-board{position:absolute;top:58%;left:2%;right:2%;height:31%;background:#fff9eef8;border:1.5px solid #075831;border-radius:12px;overflow:hidden}.dyn-board h3{margin:0;background:#075831;color:#fff;text-align:center;padding:7px;font-size:16px}.dyn-board table{min-width:0;width:100%}.dyn-board th,.dyn-board td{padding:5px 2px;font-size:10px}

.scene-wrap .game-stage-bg{background-size:cover!important;background-position:center center!important}
.scene-wrap{min-height:0}

@media(max-width:430px){
  .portrait-name-input{font-size:15px}.portrait-sound{width:36px;height:36px;font-size:15px}
  .dyn-score strong{font-size:27px}.dyn-board th,.dyn-board td{font-size:9px;padding:4px 1px}
}

/* ===== V11: إصلاح البداية والنهاية والمشاهد ===== */
.clean-start{
  min-height:100svh!important;
  background:linear-gradient(#efe3cd,#d9c29b)!important;
  overflow:auto!important;
}
.clean-start-scene{
  position:relative;
  width:100%;
  height:64svh;
  min-height:480px;
  max-height:650px;
  overflow:hidden;
}
.clean-start-scene img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.start-back,.start-sound{
  position:absolute;top:12px;z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:2px solid #d4af5e;background:#fff6df;
  font-size:20px;font-weight:800;
}
.start-back{left:12px}.start-sound{right:12px}
.clean-name-card{
  width:90%;
  margin:-10px auto 18px;
  position:relative;z-index:6;
  background:#fff9edf7;
  border:2px solid #caaa78;
  border-radius:20px;
  padding:14px;
  text-align:center;
  box-shadow:0 7px 18px #0002;
}
.clean-name-card strong{display:block;color:#075831;font-size:18px;margin-bottom:9px}
.clean-name-card input{
  width:100%;height:50px;border:1.5px solid #cbb48c;border-radius:12px;
  background:white;text-align:center;font-size:16px;padding:0 10px;
}
.clean-start-btn{
  width:100%;height:52px;margin-top:10px;border:0;border-radius:14px;
  background:linear-gradient(#178d50,#075831);color:white;font-weight:800;font-size:18px;
  box-shadow:0 4px 0 #054128;
}
.clean-name-card small{display:block;margin-top:8px;color:#6f5b3f}

/* المشاهد: لا قص للرجل الحاج */
.scene-wrap .game-stage-bg{
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#qCount{direction:ltr;unicode-bidi:embed}

/* شاشة النهاية: لا صورة كاملة فيها درجات أو أزرار وهمية */
.clean-result{
  min-height:100svh!important;
  background:linear-gradient(#f5e7ca,#d8bf91)!important;
  overflow:auto!important;
}
.result-scene{
  height:30svh;min-height:220px;max-height:310px;
  background:url("assets/scenes/farewell.jpg") center/cover no-repeat;
  position:relative;border-bottom:3px solid #c9a35f;
}
.result-ribbon{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(#0b7143,#06472d);color:#fff;
  padding:9px 38px;border-radius:8px 8px 20px 20px;
  font-size:22px;font-weight:800;white-space:nowrap;
}
.clean-result-card{
  width:92%;margin:-18px auto 12px;position:relative;z-index:2;
  background:#fff9edf8;border:2px solid #c9aa78;border-radius:20px;padding:12px;
  box-shadow:0 7px 18px #0002;text-align:center;
}
.clean-score small,.clean-score strong,.clean-score b{display:block}
.clean-score strong{font-size:35px;color:#075831;margin:3px 0}
.clean-score b{font-size:17px;color:#075831}
.clean-finish{margin:8px 0;background:#f8edd7;border-radius:10px;padding:8px;font-weight:700}
.clean-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.clean-stats>div{border:1px solid #d2b98f;border-radius:10px;padding:6px;background:#fffdfa}
.clean-stats span,.clean-stats b{display:block;font-size:12px}.clean-stats b{font-size:18px;color:#075831}
.clean-result-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.clean-result-buttons button{
  border:0;border-radius:12px;background:linear-gradient(#16894f,#075831);
  color:#fff;font-weight:700;padding:10px 5px;font-size:13px;
}
.clean-board{
  width:94%;margin:0 auto 12px;background:#fff9eef8;border:2px solid #075831;border-radius:14px;overflow:hidden;
}
.clean-board h3{margin:0;background:#075831;color:white;text-align:center;padding:8px;font-size:17px}
.clean-board table{width:100%;min-width:0}
.clean-board th,.clean-board td{font-size:10px;padding:5px 2px}
.clean-result .credit{margin-top:0}

@media(max-width:430px){
  .clean-start-scene{height:62svh;min-height:455px}
  .clean-name-card{margin-top:-4px;padding:11px}
  .clean-name-card strong{font-size:16px}
  .clean-name-card input{height:46px;font-size:15px}
  .clean-start-btn{height:48px;font-size:16px}
  .result-scene{height:27svh;min-height:205px}
  .clean-score strong{font-size:30px}
}

/* ===== V12: ضبط شاشة الجوال الرئيسية والبداية والنهاية ===== */

/* الصفحة الرئيسية: حجم الشاشة يطابق الصورة نفسها، لذلك لا يبقى فراغ أسفلها */
.poster-home{
  width:100%;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:498 / 714;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
.phone-shell:has(.poster-home.active){
  min-height:0!important;
  height:auto!important;
}

/* مناطق الضغط مطابقة لمواضع الأزرار داخل الصورة */
.simple-hotspot{
  top:42.4%!important;
  right:10.0%!important;
  width:38.2%!important;
  height:18.0%!important;
}
.advanced-hotspot{
  top:42.4%!important;
  left:9.4%!important;
  width:38.2%!important;
  height:18.0%!important;
}
.board-hotspot{
  top:63.0%!important;
  right:30.0%!important;
  width:20.0%!important;
  height:16.0%!important;
}
.about-hotspot{
  top:63.0%!important;
  left:9.0%!important;
  width:20.0%!important;
  height:16.0%!important;
}

/* البداية: ملء شاشة الهاتف وعدم ترك فراغ كبير أسفل البطاقة */
.clean-start{
  height:100svh!important;
  min-height:100svh!important;
  overflow:hidden!important;
  display:none;
}
.clean-start.active{
  display:flex!important;
  flex-direction:column;
}
.clean-start-scene{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
.clean-start-scene img{
  object-fit:cover!important;
  object-position:center top!important;
}
.clean-name-card{
  flex:0 0 auto;
  margin:-8px auto 12px!important;
  width:92%!important;
}

/* النهاية: توزيع العناصر على كامل شاشة الجوال */
.clean-result{
  height:100svh!important;
  min-height:100svh!important;
  overflow:hidden!important;
  display:none;
}
.clean-result.active{
  display:flex!important;
  flex-direction:column;
}
.clean-result .result-scene{
  flex:0 0 29svh!important;
  height:auto!important;
  min-height:210px!important;
  max-height:none!important;
}
.clean-result-card{
  flex:0 0 auto;
  margin:-14px auto 8px!important;
  width:94%!important;
}
.clean-board{
  flex:1 1 auto;
  width:94%!important;
  margin:0 auto 8px!important;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.clean-board .table-scroll{
  flex:1 1 auto;
  overflow:auto;
}
.clean-board table{
  height:100%;
}
.clean-result .credit{
  flex:0 0 auto;
  margin:0!important;
  padding:10px!important;
}

@media(max-width:430px){
  .poster-home{
    aspect-ratio:498 / 714;
  }
  .clean-start-scene{
    min-height:0!important;
  }
  .clean-name-card{
    padding:10px!important;
    margin:-4px auto 8px!important;
  }
  .clean-name-card input{height:43px!important}
  .clean-start-btn{height:45px!important}
  .clean-result .result-scene{
    flex-basis:27svh!important;
    min-height:195px!important;
  }
  .clean-result-card{
    padding:9px!important;
    margin:-10px auto 6px!important;
  }
  .clean-board h3{padding:6px!important;font-size:15px!important}
  .clean-board th,.clean-board td{padding:4px 2px!important}
}

/* ===== V13: سجل مختصر في الصفحة الرئيسية ===== */
.home-top5-panel{
  display:none;
  width:100%;
  background:#ead5ad;
  padding:10px 12px 14px;
  box-sizing:border-box;
}
#homeScreen.active + .home-top5-panel{
  display:block;
}
.home-top5-title{
  background:linear-gradient(#0c7043,#064b2e);
  color:#fff;
  text-align:center;
  font-weight:900;
  font-size:18px;
  padding:8px 10px;
  border-radius:12px 12px 0 0;
}
.home-top5-table-wrap{
  background:#fff9ed;
  border:2px solid #0a633b;
  border-top:0;
  overflow:hidden;
}
.home-top5-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  direction:rtl;
}
.home-top5-table th,
.home-top5-table td{
  text-align:center;
  padding:6px 3px;
  border-bottom:1px solid #ead9bb;
  font-size:12px;
}
.home-top5-table th{
  background:#f5e6c9;
  color:#3d2a17;
  font-weight:900;
}
.home-top5-table tr:last-child td{border-bottom:0}
.home-top5-table .empty-home-score{
  padding:14px 5px;
  color:#725f43;
}
.home-top10-btn{
  display:block;
  width:100%;
  border:0;
  border-radius:0 0 12px 12px;
  padding:9px;
  background:linear-gradient(#168c50,#075831);
  color:white;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}
.home-top10-btn:active{transform:translateY(1px)}

/* مع إضافة السجل يصبح طول الصفحة حسب المحتوى، بلا مساحة فارغة مصطنعة */
.phone-shell:has(#homeScreen.active){
  height:auto!important;
  min-height:0!important;
}
@media(max-width:430px){
  .home-top5-panel{padding:8px 8px 10px}
  .home-top5-title{font-size:16px;padding:7px}
  .home-top5-table th,.home-top5-table td{font-size:11px;padding:5px 2px}
  .home-top10-btn{padding:8px;font-size:13px}
}


.send-diagnostic{
  margin:16px auto 8px;
  padding:12px 14px;
  max-width:520px;
  border-radius:12px;
  font-weight:700;
  line-height:1.7;
  text-align:center;
  direction:rtl;
  background:#fff7dd;
  border:1px solid #d8b35d;
}
.send-diagnostic.send-ok{
  background:#e9f8ee;
  border-color:#4a9b62;
}
.send-diagnostic.send-fail{
  background:#fff0f0;
  border-color:#c85b5b;
}