/* huroof-arena/arena.css — استوديو فاتح بهويّة حروف (الإثارة بالضوء على المسرح). يُحمَّل بعد ../_walk/walk.css */
html,body{background:#DDE6F1}
: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 1px 1px #fff}
#hTitle{font-size:22px}
.tm{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:800;opacity:.5;transition:opacity .2s}
.tm i{font-style:normal;width:40px;height:45px;display:grid;place-items:center;clip-path:var(--hexclip);background:var(--c);color:#fff;font-size:23px;text-shadow:none}
.tm.on{opacity:1}
.tm.on .n{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:4px;text-underline-offset:7px}
#hTimer{display:grid;place-items:center;width:50px;height:56px;clip-path:var(--hexclip);background:#1FBF75;color:#fff;font-size:23px;font-weight:800;text-shadow:none}
#hTimer.warn{background:#FF9000} #hTimer.low{background:#FF4343} #hTimer.off{display:none}
#back svg{stroke:#1A3365}

/* بطاقة السؤال: دائماً على اللمس؛ على الحاسب حين تكون الشاشة الكبيرة خارج النظر (في الزاوية) */
#qcard{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 70px);left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));z-index:4;
  background:rgba(255,255,255,.92);border:1px solid rgba(26,51,101,.12);border-radius:22px;padding:12px 16px 14px;color:#1A3365;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(26,51,101,.16)}
#qcard .top{display:flex;align-items:center;gap:12px}
#qL{flex:none;width:48px;height:54px;display:grid;place-items:center;background:var(--c,#FF9000);color:#fff;font-size:30px;font-weight:800;clip-path:var(--hexclip)}
#qT{margin:0;font-size:21px;line-height:1.5;font-weight:800;flex:1}
#qO{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mo{display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px 6px 10px;border-radius:999px;background:#F3F7FC;border:2px solid #FF9000;
  color:#1A3365;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;color:#fff} .mo.sel i{background:#1A3365}
.mo.ok{background:#1FBF75;border-color:#9CF0C9;color:#fff} .mo.ok i{background:#0F7A4A}
.mo.bad{background:#FF4343;border-color:#FFB0B0;color:#fff} .mo.bad i{background:#A32020}
.mo.dim{opacity:.4}
#qO.lock .mo{pointer-events:none}
#qH{margin:8px 0 0;font-size:16px;line-height:1.55;font-weight:800;color:#5B6B8C}
#qH.ok{color:#0F8F55} #qH.bad{color:#CB3535}
#qcard.pick .top,#qcard.pick #qO{display:none} #qcard.pick #qH{margin:0;text-align:center;color:#1A3365}
#qcard.pick{width:auto;max-width:min(760px,calc(100vw - 24px));padding:8px 18px}
html:not(.touch) #qcard.side{left:16px;right:auto;transform:none;width:min(440px,34vw);padding:10px 12px 12px}
html:not(.touch) #qcard.side #qT{font-size:17px} html:not(.touch) #qcard.side #qO{grid-template-columns:1fr;gap:6px}
html:not(.touch) #qcard.side .mo{font-size:15px;min-height:36px;padding:3px 10px 3px 8px} html:not(.touch) #qcard.side .mo i{width:24px;height:27px;font-size:13px}

/* «هل هذه إجابتك النهائيّة؟» */
#qPrompt{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 10px #fff,0 0 4px #fff;pointer-events:none;width:min(600px,calc(100vw - 24px))}
#qPromptT{margin:0;font-size:30px;font-weight:800;color:#C46A00}
#qPromptHint{display:block;font-size:17px;font-weight:700;color:#1A3365;margin-top:2px}
#qPrompt .row{justify-content:center;margin-top:10px;display:none}
#qPrompt 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}
#qYes{background:#FF9000;color:#fff;box-shadow:0 8px 22px rgba(255,144,0,.35)}
#qNo{background:#fff;color:#1A3365;border:1px solid #D3DCEB!important}
html.touch #qPrompt .row,html.drag #qPrompt .row{display:flex}
#qPrompt.wait .row{display:none!important}

/* شاشة البداية */
.opts{display:grid;gap:10px;margin:0 0 14px}
.og{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:800}
.og b{min-width:64px;color:#5B6B8C}
.og button{min-height:44px;padding:4px 16px;border-radius:14px;background:#F3F7FC;border:2px solid #D8E2F0;font-size:17px;font-weight:800;color:#1A3365}
.og button.on{border-color:#FF9000;background:#FFF4E5;color:#A35C00}
.og .bank{color:#1A3365}
.og .menu{min-height:46px;padding:4px 18px;border-radius:14px;background:#1A3365;border:0;color:#fff;font-size:16px;font-weight:800}
#go.wait{opacity:.55;pointer-events:none}
#menuBtn{left:calc(14px + var(--sl,0px));top:calc(max(12px,env(safe-area-inset-top)) + 2px);width:48px;height:48px}
.rules{margin:0 0 16px;padding:0 20px 0 0;font-size:16px;line-height:1.75;font-weight:700;color:#2A3B5F}
.rules .s{color:#0089B8} .rules .o{color:#C46A00}

html.cine #qcard,html.cine #qPrompt,html.shot #qcard,html.shot #qPrompt,html:not(.playing) #qPrompt,html:not(.playing) #qcard{display:none!important}

@media (max-width:700px){
  .tm{font-size:14px;gap:5px} .tm i{width:28px;height:32px;font-size:16px} #hTitle{font-size:15px} #hud{gap:9px}
  #hTimer{width:36px;height:41px;font-size:16px}
  #qcard{padding:8px 10px 10px;border-radius:16px}
  #qL{width:36px;height:40px;font-size:21px} #qT{font-size:15.5px;line-height:1.45}
  .mo{font-size:14px;min-height:38px;padding:4px 8px 4px 6px;gap:6px} .mo i{width:24px;height:27px;font-size:13px}
  #qH{font-size:13.5px}
  #qPromptT{font-size:22px} #qPromptHint{font-size:14px}
  #qPrompt button{min-height:48px;font-size:17px;padding:0 18px}
  .og{gap:6px} .og b{min-width:auto;width:100%} .og button{min-height:40px;padding:2px 12px;font-size:15px}
  .rules{font-size:14.5px}
}
@media (max-height:560px){ html:not(.touch) #qT{font-size:16px} html:not(.touch) .mo{font-size:14px;min-height:36px} }

/* ══ اللمس حسب الاتّجاه (المحرّك: html.portrait / html.landscape · --vvh · --ctl-b/--ctl-l/--ctl-r مساحة أدوات اللمس) ══
   البطاقة صندوقٌ واحد لا يتجاوز حدوده، و«هل هذه إجابتك النهائيّة؟» تنتقل داخلها (arena.js) فلا تقع على الأزرار. */
html.touch #qcard{top:calc(var(--st,0px) + 68px);max-height:calc(var(--vvh,100vh) - var(--ctl-b,0px) - var(--st,0px) - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* عرضيّ: عمودٌ يساراً ≤ ٤٤٪ فوق منطقة العصا، والنصف الأيمن كلّه للنظر بالسحب والأزرار */
html.touch.landscape #qcard{left:calc(10px + var(--sl,0px));right:auto;transform:none;top:calc(var(--st,0px) + 68px);width:min(44vw,460px);
  max-height:calc(var(--vvh,100vh) - var(--st,0px) - 68px - 150px - var(--sb,0px));padding:8px 10px;border-radius:16px}
html.touch.landscape #qcard.pick{width:auto;max-width:44vw;padding:6px 12px}
html.touch.landscape #qL{width:32px;height:36px;font-size:19px} html.touch.landscape #qT{font-size:14.5px;line-height:1.45}
html.touch.landscape #qO{gap:5px;margin-top:6px} html.touch.landscape .mo{font-size:13px;min-height:34px;padding:2px 8px 2px 6px;gap:5px}
html.touch.landscape .mo i{width:22px;height:25px;font-size:12px} html.touch.landscape #qH{font-size:12.5px;margin-top:5px}
/* التأكيد داخل البطاقة على اللمس */
html.touch #qcard #qPrompt{position:static;transform:none;width:auto;margin:8px 0 0;padding:8px 0 0;background:none;border:0;border-top:1px solid rgba(255,144,0,.35);border-radius:0;text-shadow:none}
html.touch #qcard #qPromptT{font-size:19px} html.touch #qcard #qPromptHint{font-size:13px}
html.touch #qcard #qPrompt .row{margin-top:6px;gap:8px} html.touch #qcard #qPrompt button{min-height:44px;font-size:16px;padding:0 18px}
html.touch.landscape #qcard #qPromptT{font-size:16px} html.touch.landscape #qcard #qPrompt button{min-height:40px;font-size:15px}