/* محطة تحقيق مرئية: مساحة هادئة وبطاقات لمس كبيرة مع نفس أزرار المنصة البارزة. */
body.md-cosmos .ww-root.dt-root { height:auto; min-height:calc(100dvh - 120px); background:#101d40; }
.dt-hud { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; padding:.75rem 1rem; background:#172b52; }
.dt-hud>div:not(.ww-hud-btns) { display:grid; gap:.2rem; }
.dt-hud span { color:#cbdcf0; font-size:.85rem; }.dt-hud b { color:#fff; font-size:1.2rem; }
.dt-hud .ww-hud-btns { margin-inline-start:auto; display:flex; gap:.5rem; }
.dt-stage { width:min(100%,850px); margin:auto; padding:clamp(1rem,3vw,2rem); }
.dt-mission { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }.dt-mission p { color:#a8e6ef; margin:0 0 .2rem; }.dt-mission h2 { margin:0; font-size:clamp(1.35rem,3vw,2rem); line-height:1.6; color:#fff; }
.dt-magnifier { width:64px; height:64px; flex-shrink:0; display:grid; place-items:center; border:2px solid #75c6db; border-radius:20px; color:#ffdb73; font-size:3.2rem; background:#233c63; }
.dt-route { display:flex; gap:.5rem; justify-content:center; margin:.5rem 0 1.2rem; }.dt-route i { font-style:normal; color:#577194; font-size:1.5rem; }.dt-route .on { color:#ffda68; text-shadow:0 2px 0 #a96316; }
.dt-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
body.md-cosmos .dt-choice { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; min-width:0; min-height:170px; padding:1.1rem 1rem; background:#eef8ff; color:#183350; border:2px solid #b9dfec; border-radius:22px; box-shadow:0 6px 0 #547b95; font-family:inherit; transition:translate .12s; }
body.md-cosmos .dt-choice:not(:disabled):hover { background:#fff; border-color:#ffd471; }.dt-choice:not(:disabled):active { translate:0 4px; }
.dt-choice:focus-visible,.dt-root button:focus-visible { outline:3px solid #ffe597; outline-offset:5px; }
.dt-choice-number { position:absolute; top:.5rem; inset-inline-start:.7rem; color:#52697d; font-weight:700; font-size:.9rem; }
.dt-picture { width:100%; display:flex; justify-content:center; align-items:center; min-height:80px; }.dt-picture>svg { width:82px; height:82px; }
.dt-dots { display:grid; grid-template-columns:repeat(3,25px); gap:5px; }.dt-dots svg { width:25px; height:25px; }
.dt-pattern { display:grid; grid-template-columns:repeat(var(--pattern-count),minmax(0,1fr)); place-items:center; gap:2px; width:100%; max-width:230px; }.dt-pattern svg { width:100%; max-width:34px; height:auto; aspect-ratio:1; }
.dt-caption { font-size:1rem; font-weight:700; }.dt-mark { position:absolute; bottom:.5rem; inset-inline-end:.7rem; font-size:1.5rem; font-weight:800; }
body.md-cosmos .dt-choice:disabled { opacity:1; cursor:default; filter:none; }
body.md-cosmos .dt-choice.dt-wrong,body.md-cosmos .dt-choice.dt-eliminated { background:#d6e0e9; color:#576b7b; box-shadow:0 3px 0 #547b95; }.dt-eliminated .dt-picture { opacity:.35; }
body.md-cosmos .dt-choice.dt-correct { background:#d8f5dc; border:3px solid #6adb84; box-shadow:0 6px 0 #287a43; }.dt-correct .dt-mark { color:#18612e; }
.dt-feedback { min-height:3.5rem; display:flex; align-items:center; margin-top:1.1rem; color:#ffe29b; font-size:1.05rem; line-height:1.7; }.dt-success { color:#c5f5d4; }
.dt-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }.dt-keyboard { text-align:center; color:#b6c9e2; font-size:.8rem; margin-top:1.2rem; }
.dt-root .dt-overlay { overflow:auto; padding:1rem; align-items:flex-start; }.dt-panel { margin:auto; max-width:670px; width:100%; }.dt-panel h2 { line-height:1.6; }.dt-panel p { line-height:1.8; color:#cfdef1; }.dt-case-icon { font-size:3rem; }
.dt-root .ww-gameover-extra form { flex-wrap:wrap; }.dt-root .ww-gameover-extra input { min-width:0; flex:1 1 180px; }
@media(max-width:520px) { .dt-stage { padding:1rem; }.dt-options { gap:.8rem; }body.md-cosmos .dt-choice { min-height:145px; padding:1rem .4rem; }.dt-magnifier { width:48px; height:48px; font-size:2.4rem; }.dt-feedback { font-size:1rem; }.dt-keyboard { display:none; } }
@media(prefers-reduced-motion:reduce) { .dt-root * { transition:none!important; animation:none!important; } }
@media(forced-colors:active) { .dt-choice.dt-correct { outline:4px solid Highlight; }.dt-picture svg { forced-color-adjust:none; } }