/* millionaire-arena/arena.css — استوديو فاتح بهويّة حروف (طلب إبراهيم ٢٨ أكتوبر: «جو فاتح… مع هوية حروف ودروس»).
   يُحمَّل بعد ../_walk/walk.css: نصٌّ كحليّ بحدٍّ أبيض فوق المشهد، وبطاقاتٌ زجاجيّة بيضاء. */
html,body{background:#E9F1FA}
:root{--hexclip:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* العدّاد أعلى الشاشة: أبيض بظلٍّ كحليّ */
#hud{color:#1A3365;text-shadow:0 0 8px #fff,0 0 3px #fff,0 0 1px #fff}
#hTitle b{color:#C46A00}
#hTitle .pz{display:inline-block;unicode-bidi:isolate;margin-inline-start:16px}
#hTimer{display:grid;place-items:center;width:52px;height:58px;clip-path:var(--hexclip);background:#FF9000;color:#fff;font-size:24px;font-weight:800;text-shadow:none}
#hTimer.low{background:#FF4343}
#hTimer.off{background:#8796AD}
#back svg{stroke:#1A3365}

/* المساعدات: سداسيّ + اسم، بلا صناديق */
#mLife{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 62px);left:50%;transform:translateX(-50%);display:flex;gap:18px;z-index:4;
  pointer-events:none;direction:rtl;white-space:nowrap}
.ll{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800;color:#1A3365;text-shadow:0 0 6px #fff,0 0 2px #fff}
.ll i{flex:none;width:22px;height:25px;clip-path:var(--hexclip);background:#00C6FF}
.ll.used{opacity:.45} .ll.used i{background:#8796AD} .ll.used span{text-decoration:line-through}

/* بطاقة السؤال (اللمس، الشاشات الصغيرة، ومن لا يرى الشاشة الكبيرة) */
#mCard{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 96px);left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));z-index:4;
  background:rgba(255,255,255,.9);border:1px solid rgba(26,51,101,.14);border-radius:22px;padding:12px 16px 14px;color:#1A3365;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(26,51,101,.16)}
#mCardHead{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;padding:0;color:#C46A00;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
#mCardTog{color:#5B6B8C;font-size:13px}
#mQ{margin:4px 0 10px;font-size:22px;line-height:1.55;font-weight:800;color:#1A3365}
#mOpts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mo{display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px 6px 10px;border-radius:999px;background:#14285C;border:2px solid #FF9000;
  color:#fff;font:inherit;font-size:18px;font-weight:800;text-align:right;line-height:1.3;cursor:pointer}
.mo i{flex:none;font-style:normal;width:30px;height:34px;display:grid;place-items:center;clip-path:var(--hexclip);background:#FF9000;color:#fff;font-size:16px}
.mo.sel{background:#FF9000;border-color:#FFBB00} .mo.sel i{background:#1A3365}
.mo.ok{background:#1FBF75;border-color:#9CF0C9} .mo.ok i{background:#0F7A4A}
.mo.bad{background:#FF4343;border-color:#FFB0B0} .mo.bad i{background:#A32020}
.mo.gone{opacity:.25;border-color:#8796AD;pointer-events:none} .mo.gone span{visibility:hidden}
.mo .pct{margin-inline-start:auto;color:#FFBB00;font-size:15px}
#mCard.mini #mQ{display:none} #mCard.mini #mOpts{display:none}
/* الحاسب: حين تكون الشاشة الكبيرة خارج النظر تظهر البطاقة صغيرةً في الزاوية لا في الوسط */
#mCard.side{left:16px;right:auto;transform:none;top:calc(max(14px,env(safe-area-inset-top)) + 70px);width:min(440px,34vw);padding:10px 12px 12px}
#mCard.side #mQ{font-size:17px;line-height:1.5;margin:2px 0 8px} #mCard.side #mOpts{grid-template-columns:1fr;gap:6px}
#mCard.side .mo{font-size:15px;min-height:36px;padding:3px 10px 3px 8px} #mCard.side .mo i{width:24px;height:27px;font-size:13px}

/* التأكيد النهائيّ */
#mPrompt{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;text-align:center;color:#1A3365;
  text-shadow:0 0 8px #fff,0 0 3px #fff;pointer-events:none;width:min(560px,calc(100vw - 24px))}
#mPrompt p{margin:0;font-size:30px;font-weight:800;color:#C46A00}
#mPromptHint{display:block;font-size:17px;font-weight:700;color:#1A3365;margin-top:2px}
#mPrompt .row{justify-content:center;margin-top:10px;display:none}
#mPrompt button{pointer-events:auto;min-height:54px;padding:0 26px;border-radius:999px;font:inherit;font-size:20px;font-weight:800;border:0;text-shadow:none}
#mYes{background:#FF9000;color:#fff;box-shadow:0 8px 22px rgba(255,144,0,.35)}
#mNo{background:#fff;color:#1A3365;border:1px solid rgba(26,51,101,.22)!important}
html.touch #mPrompt .row,html.drag #mPrompt .row{display:flex}

/* القائمة: «جولة جديدة» و«غيّر الدرس» (تظهر في الإيقاف بعد بدء اللعب) */
.milMenu{display:none;gap:10px;margin:0 0 14px}
html.milStarted .milMenu{display:flex}
html.milStarted #start .keys{display:none} /* الإيقاف: القائمة وزرّ المتابعة بلا تمرير */
.milMenu button{flex:1;min-height:50px;border-radius:16px;font:inherit;font-size:18px;font-weight:800;background:#EEF3FA;color:#1A3365;border:1px solid #D3DCEB}
#go.wait{opacity:.55;cursor:progress}
#menuBtn{left:calc(14px + env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 2px);width:48px;height:48px}
/* (قديم) اختيار البنك */
.milIntro{margin:0 0 16px;font-size:17px;line-height:1.75;font-weight:700;color:#2A3B5F}
.milIntro b{color:#A35C00}
.milBank{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:17px;font-weight:800;color:#1A3365}
.milBank select{flex:1;min-height:46px;border-radius:14px;border:1px solid #D3DCEB;background:#F3F7FC;font:inherit;font-size:17px;font-weight:800;color:#1A3365;padding:0 12px}

html.cine #mCard,html.cine #mPrompt,html.cine #mLife,html.shot #mCard,html.shot #mPrompt,html.shot #mLife,html:not(.playing) #mPrompt{display:none!important}
html:not(.playing) #mLife,html:not(.playing) #mCard{display:none!important}

@media (max-width:700px){
  #mLife{gap:10px;top:calc(max(12px,env(safe-area-inset-top)) + 40px)} .ll{font-size:12.5px;gap:4px} .ll i{width:15px;height:17px}
  #mCard{top:calc(max(12px,env(safe-area-inset-top)) + 64px);padding:8px 10px 10px;border-radius:16px}
  #mQ{font-size:16px;line-height:1.5;margin:2px 0 8px} .mo{font-size:14px;min-height:38px;padding:4px 8px 4px 6px;gap:6px} .mo i{width:24px;height:27px;font-size:13px}
  #mPrompt p{font-size:22px} #mPromptHint{font-size:14px}
  html.touch #mPrompt{background:rgba(255,255,255,.92);border:1px solid rgba(255,144,0,.4);border-radius:18px;padding:8px 10px 10px;box-shadow:0 10px 26px rgba(26,51,101,.16)}
  #mPrompt button{min-height:48px;font-size:17px;padding:0 18px}
  #hTimer{width:40px;height:45px;font-size:18px}
}
@media (max-height:560px){
  #mLife{top:46px} #mCard{top:72px;width:min(640px,60vw);left:auto;right:12px;transform:none} #mQ{font-size:16px} .mo{font-size:14px;min-height:36px}
}

/* ══ اللمس حسب الاتّجاه (engine: html.portrait/landscape · --ctl-b/--ctl-l/--ctl-r مساحة أزرار التحكّم · --vvh) ══
   لا طبقة تلتقط لمسةً خارج صندوقها، ولا شيء فوق العصا والأزرار ومنطقة السحب على يمينها. */
#mLife,#mPrompt{pointer-events:none}
#mCard,#mPrompt button{pointer-events:auto}
html.touch.portrait #mCard{max-height:calc(var(--vvh,100vh) - var(--ctl-b) - 64px - 150px);overflow-y:auto;overscroll-behavior:contain}
html.touch.portrait #mPrompt{left:50%;transform:translateX(-50%)}
/* الأفقيّ: البطاقة والتأكيد في الشريط الأوسط بين عمود العصا وعمود الأزرار، مضغوطان */
html.touch.landscape #mLife{top:calc(max(8px,var(--st)) + 34px);gap:10px} html.touch.landscape .ll{font-size:12.5px;gap:4px} html.touch.landscape .ll i{width:14px;height:16px}
html.touch.landscape #mCard{top:calc(max(8px,var(--st)) + 56px);left:var(--ctl-l);right:var(--ctl-r);width:auto;transform:none;
  max-height:calc(var(--vvh,100vh) - max(8px,var(--st)) - 56px - 110px);overflow-y:auto;overscroll-behavior:contain;padding:5px 10px 7px;border-radius:14px}
html.touch.landscape #mCardHead{font-size:12.5px} html.touch.landscape #mCardTog{font-size:11.5px}
html.touch.landscape #mQ{font-size:14.5px;line-height:1.45;margin:1px 0 5px}
html.touch.landscape #mOpts{grid-template-columns:1fr 1fr;gap:5px}
html.touch.landscape .mo{font-size:12.5px;min-height:30px;padding:2px 8px 2px 6px;gap:5px;border-width:1.5px} html.touch.landscape .mo i{width:20px;height:22px;font-size:11px}
html.touch.landscape #mPrompt{left:var(--ctl-l);right:var(--ctl-r);width:auto;transform:none;bottom:auto;padding:5px 8px 7px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(255,144,0,.4);box-shadow:0 10px 26px rgba(26,51,101,.16)}
html.touch.landscape #mPrompt p{font-size:17px} html.touch.landscape #mPromptHint{font-size:12px;margin-top:0}
html.touch.landscape #mPrompt .row{margin-top:5px;gap:8px} html.touch.landscape #mPrompt button{min-height:38px;font-size:15px;padding:0 16px}
html.touch.landscape #hTimer{width:36px;height:40px;font-size:17px}
#loading{background:#E9F1FA}
#brand h1,#brand p{color:#1A3365;text-shadow:0 0 6px #fff,0 0 2px #fff}