/* =====================================================================
   الملجأ (جولة 17ج) — عالم توب داون بملء الشاشة + حوار بأسلوب الروايات المصوّرة.
   الألوان من الثيم (--accent/--text/--line) والخط نفسه.
   ===================================================================== */
#scr-shelter { --shb:calc(var(--wipbar,0px) + var(--safe-b,0px)); padding:0; background:#050608; align-items:stretch; justify-content:stretch }
#scr-shelter > .sh-stage { margin:0 }
.sh-stage { position:absolute; inset:0; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none }
#shCv, #shPost { position:absolute; left:0; top:50%; transform:translateY(-50%); image-rendering:pixelated; image-rendering:crisp-edges; display:block }
#shPost[hidden] { display:none }
#shPfx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; mix-blend-mode:screen; opacity:.7 }

/* الشريط العلوي */
.sh-hud { position:absolute; top:10px; inset-inline:10px; display:flex; gap:8px; align-items:center; z-index:3; pointer-events:none }
.sh-hud > * { pointer-events:auto }
.sh-pill { display:inline-flex; align-items:center; gap:6px; background:#0b0d12e6; border:1px solid #ffffff1f; color:var(--text); padding:7px 12px; font:inherit; font-weight:700; cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) }
.sh-pill svg { width:16px; height:16px }
#shName { max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ffe7b0 }
#shName::after { content:''; width:8px; height:2px; background:currentColor; opacity:.45; margin-inline-start:6px; transform:rotate(-45deg); box-shadow:0 3px 0 -1px currentColor }
#shJobs { background:#2e7d4acc; border-color:#9be15d55; font-size:.85rem; cursor:default }
#shJobs[hidden] { display:none }
.sh-hud .scrap-chip { margin-inline-start:auto }
.sh-hint { position:absolute; bottom:calc(18px + var(--shb)); left:50%; transform:translateX(-50%); background:#0b0d12cc; border:1px solid #ffffff1a; padding:6px 12px; font-size:.82rem; z-index:3; pointer-events:none; animation:shFade 9s forwards; white-space:nowrap }
@keyframes shFade { 80% { opacity:1 } 100% { opacity:0 } }
.sh-prompt { position:absolute; bottom:22%; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; background:#0b0d12ee; border:1px solid #ffd16688; color:#ffd166; padding:6px 12px; z-index:3; pointer-events:none; font-weight:700; white-space:nowrap }
.sh-prompt[hidden] { display:none }
.sh-prompt kbd, .vn-ch kbd { font-family:ui-monospace,monospace; background:#ffd166; color:#0b0d12; padding:0 5px; font-size:.75rem; font-weight:800 }
.sh-loading { position:absolute; inset:0; display:grid; place-items:center; background:#050608; z-index:5; font-size:1.1rem; opacity:.8 }
.sh-loading[hidden] { display:none }
/* شريط وضع الترتيب */
.sh-arr { position:absolute; bottom:calc(14px + var(--shb)); left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:#0b0d12f0; border:1px solid #ffd16688; padding:8px 12px; max-width:calc(100% - 20px) }
.sh-arr[hidden] { display:none } .sh-arr span { color:#ffd166; font-weight:700; font-size:.9rem }

/* الجوال: عصا تحكم + زر تفاعل */
.sh-joy, .sh-act { display:none }
@media (pointer:coarse) {
  .sh-joy { display:block; position:absolute; bottom:calc(28px + var(--shb)); left:26px; width:110px; height:110px; border-radius:50%; background:#ffffff0d; border:2px solid #ffffff22; z-index:4; touch-action:none }
  .sh-joy i { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#ffffff33; border:2px solid #ffffff55 }
  .sh-act { display:grid; place-items:center; position:absolute; bottom:calc(44px + var(--shb)); right:28px; width:76px; height:76px; border-radius:50%; background:#1a1d28cc; border:2px solid #ffffff22; color:#ffffff66; font:inherit; font-weight:800; z-index:4 }
  .sh-act.on { background:var(--accent); color:#fff; border-color:#ffd166; box-shadow:0 0 18px #ffd16655 }
  .sh-hint { display:none }
  .sh-prompt { bottom:calc(150px + var(--shb)) }
}

/* =====================================================================
   الحوار — رواية مصوّرة: الشاشة تتعتّم، المتكلم كبير على جنب، والنص سينمائي تحت
   ===================================================================== */
.sh-vn { position:absolute; inset:0; z-index:8; opacity:0; transition:opacity .22s }
.sh-vn[hidden] { display:none } .sh-vn.on { opacity:1 }
.vn-dim { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 70%, #0b0d1299, #000e 75%); cursor:pointer }
.vn-stage { position:absolute; inset:0 0 0 0; pointer-events:none }
.vn-actor { position:absolute; bottom:0; width:min(40vw,420px); height:min(78vh,640px); display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transform:translateY(18px); transition:opacity .25s, transform .25s, filter .25s }
.vn-actor.show { opacity:1; transform:none }
.vn-actor.right { right:2vw } .vn-actor.left { left:2vw }
.vn-actor:not(.speak) { filter:brightness(.45) saturate(.6) }
.vn-actor.speak { filter:drop-shadow(0 0 24px #0008) }
.vn-spr { height:92%; width:auto; aspect-ratio:2/3; image-rendering:pixelated; image-rendering:crisp-edges }
.vn-pic { max-height:100%; max-width:100%; object-fit:contain; object-position:bottom }
.vn-actor.left .vn-spr { transform:scaleX(-1) }
/* تعابير بدون رسم خاص: لون وحركة خفيفة */
.m-happy { animation:vnBob 1.6s ease-in-out infinite; filter:brightness(1.08) saturate(1.1) }
.m-sad { filter:grayscale(.45) brightness(.8) hue-rotate(-12deg); transform-origin:bottom; animation:vnSag 3s ease-in-out infinite }
.m-scared { animation:vnShake .18s linear infinite; filter:brightness(.85) contrast(1.1) }
.m-angry { filter:sepia(.4) saturate(2.2) hue-rotate(-25deg); animation:vnPulse 1s ease-in-out infinite }
.vn-actor.left .m-happy, .vn-actor.left .m-sad, .vn-actor.left .m-scared, .vn-actor.left .m-angry { transform:scaleX(-1) }
@keyframes vnBob { 50% { translate:0 -6px } }
@keyframes vnSag { 50% { translate:0 4px } }
@keyframes vnShake { 25% { translate:-2px 0 } 75% { translate:2px 0 } }
@keyframes vnPulse { 50% { scale:1.02 } }
@media (prefers-reduced-motion: reduce) { .m-happy, .m-sad, .m-scared, .m-angry { animation:none } }
.vn-box { position:absolute; left:50%; bottom:calc(18px + var(--shb)); transform:translateX(-50%); width:min(900px,calc(100% - 24px)); z-index:2; cursor:pointer;
  background:linear-gradient(180deg,#0e1016f2,#07080cf7); border:2px solid #ffffff22; box-shadow:0 0 0 2px #000, 0 24px 70px #000d; padding:20px 22px 16px; min-height:128px; animation:shUp .2s ease-out }
.vn-box::before { content:''; position:absolute; top:-2px; inset-inline-start:18px; width:80px; height:2px; background:var(--accent) }
@keyframes shUp { from { transform:translate(-50%,14px); opacity:0 } }
.vn-name { position:absolute; top:-18px; inset-inline-start:18px; background:var(--accent); color:#fff; font-weight:800; padding:4px 16px; font-size:1rem;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) }
.vn-name[hidden] { display:none }
.sh-vn.narr .vn-txt { font-style:italic; color:#c9c2b0; text-align:center }
.vn-txt { font-size:1.15rem; line-height:2; white-space:pre-line; min-height:2em }
.vn-txt.typing::after { content:''; display:inline-block; width:.45em; height:1em; margin-inline-start:2px; vertical-align:-.15em; background:var(--accent); animation:shBlink .6s steps(1) infinite }
@keyframes shBlink { 50% { opacity:0 } }
.vn-next { position:absolute; bottom:10px; inset-inline-end:16px; width:0; height:0; border-inline:6px solid transparent; border-top:8px solid #ffd166; animation:vnBob 1s ease-in-out infinite }
.vn-next[hidden] { display:none }
.vn-ch { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:7px; margin-top:12px }
.vn-ch[hidden] { display:none }
/* لوحات (الإدارة، الاسم) فوق نفس التعتيم */
.sh-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,calc(100% - 20px)); max-height:86%; overflow:auto; z-index:2;
  background:#0b0d12f5; border:2px solid #ffffff22; box-shadow:0 0 0 2px #000, 0 24px 70px #000d; padding:18px 20px }
.sh-panel.sm { width:min(440px,calc(100% - 20px)) }
.sh-panel h3 { margin:0 0 6px; color:#ffe7b0 }
.sd-in { width:100%; padding:10px; background:#000a; color:var(--text); border:1px solid var(--line); font:inherit; margin:8px 0 }
.ro-list { display:flex; flex-direction:column; gap:6px; margin:10px 0 }
.ro-row { display:grid; grid-template-columns:24px 1fr auto minmax(170px,240px); gap:10px; align-items:center; background:#12151d; border:1px solid #ffffff14; padding:6px 10px }
.ro-row.away { opacity:.6 }
.ro-row canvas { width:24px; height:36px; image-rendering:pixelated }
.ro-who b { display:block } .ro-who small { opacity:.65; font-size:.74rem }
.ro-rank { display:flex; gap:4px }
.ro-rank button { background:#1a1d28; color:var(--text); border:1px solid #ffffff22; padding:5px 8px; font:inherit; font-size:.8rem; cursor:pointer }
.ro-rank button.on { background:#ffd166; color:#1a1308; border-color:#ffd166; font-weight:800 }
.ro-row select { background:#000a; color:var(--text); border:1px solid #ffffff22; padding:6px; font:inherit; font-size:.8rem; min-width:0 }
.ro-acts { display:flex; gap:8px; justify-content:flex-end }
@media (max-width:640px) {
  .vn-actor { width:62vw; height:52vh } .vn-actor.left { left:-6vw } .vn-actor.right { right:-6vw }
  .vn-box { bottom:calc(10px + var(--shb)); padding:18px 14px 12px } .vn-txt { font-size:1.02rem; line-height:1.85 } .vn-ch { grid-template-columns:1fr }
  .ro-row { grid-template-columns:24px 1fr; } .ro-rank, .ro-row select { grid-column:1/-1 }
  .sh-hud { gap:5px; top:8px; inset-inline:6px } .sh-pill { padding:5px 8px; font-size:.78rem; white-space:nowrap }
  #shName { max-width:28vw } #shJobs { font-size:.72rem } .sh-hud .scrap-chip.big { padding:4px 8px; font-size:.85rem }
}
body:has(#ptb:not([hidden])) #scr-shelter .sh-hud { top:62px }
body:has(#ptb:not([hidden])) #scr-shelter .sh-roster { top:108px }
@media (max-width:640px) { body:has(#ptb:not([hidden])) #scr-shelter .sh-hud { top:52px } }

/* زر الملجأ في القائمة: ذهبي مميّز، و«جديد» تطلع يوم واحد بس من أول دخول */
#btn_shelter { position:relative; overflow:hidden; border-color:#ffd16666 !important;
  background:linear-gradient(100deg,#2a1d0e 0%,#3d2410 45%,#1a1308 100%) !important; box-shadow:0 0 0 1px #ffd16633, 0 0 22px #e8541e33 }
#btn_shelter::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,#ffd16622 50%,transparent 70%); transform:translateX(-100%); animation:shShine 3.8s ease-in-out infinite; pointer-events:none }
#btn_shelter .t-ic { color:#ffd166 }
#btn_shelter b { color:#ffe7b0; text-shadow:0 0 10px #e8541e88; display:inline-flex; align-items:center; gap:8px }
body.sh-new #btn_shelter b::after { content:'جديد'; font-size:.66rem; font-weight:800; background:#ffd166; color:#1a1308; padding:2px 7px; line-height:1.3; text-shadow:none; border-radius:3px }
body.sh-locked #btn_shelter { filter:grayscale(.7) brightness(.8) }
body.sh-locked #btn_shelter b::after { content:'مقفل'; font-size:.64rem; font-weight:800; background:#ffffff22; color:#ffe7b0; padding:2px 7px; border-radius:3px; text-shadow:none }
#btn_shelter:hover { filter:brightness(1.15) }
@keyframes shShine { 0%, 55% { transform:translateX(-100%) } 100% { transform:translateX(100%) } }
@media (prefers-reduced-motion: reduce) { #btn_shelter::before { animation:none } }

/* =====================================================================
   جولة 17د — تنسيق النص، أزرار الاختيار، بطاقات الأثر، لوحة الفريق
   ===================================================================== */
/* تنسيق النص: *عريض* _مائل_ !!كبير!! ~همس~ [لون]…[/] */
.vn-txt b { font-weight:900; color:#fff }
.vn-txt i { font-style:italic }
.rt-big { font-size:1.45em; font-weight:900; line-height:1.3; letter-spacing:.3px }
.rt-wh { font-size:.82em; opacity:.62; font-style:italic }
.rt-red { color:#ff5b57 } .rt-gold { color:#ffd166 } .rt-green { color:#9be15d } .rt-blue { color:#7cc4ff } .rt-grey { color:#9a9aa6 }
.vn-name.sys { background:#2a2416; color:#ffd166; border:1px solid #ffd16666 }

/* إضافات داخل الصندوق: نقاط المستوى، شارات، مهارات، نتائج */
.vn-x:empty { display:none }
.vn-x { margin-bottom:8px; display:flex; flex-direction:column; gap:8px }
.vn-pips { display:flex; align-items:center; gap:5px }
.vn-pips i { width:14px; height:14px; border:2px solid #ffd16688; background:transparent; transform:rotate(45deg) }
.vn-pips i.on { background:#ffd166; border-color:#ffd166; box-shadow:0 0 8px #ffd16688 }
.vn-pips b { margin-inline-start:8px; color:#ffe7b0; font-size:.95rem }
.vn-chips, .vn-res { display:flex; flex-wrap:wrap; gap:6px }
.vn-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:.8rem; font-weight:800; background:#ffffff10; border:1px solid #ffffff22; color:var(--text) }
.vn-chip.ok { background:#1d3a1f; border-color:#9be15d55; color:#b9f08a }
.vn-chip.bad { background:#3a1616; border-color:#ff5b5755; color:#ffa3a0 }
.vn-chip.gold { background:#3a2c10; border-color:#ffd16677; color:#ffd166 }
.vn-chip.dim { opacity:.7 }
.vn-skills { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px }
.vn-skill { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; background:#12151d; border:1px solid #ffffff14; padding:6px 10px }
.vn-skill b { font-size:.85rem } .vn-skill em { font-style:normal; font-weight:900; color:#ffd166 }
.vn-skill .pp { display:flex; gap:3px } .vn-skill .pp i { flex:1; height:6px; background:#ffffff18 } .vn-skill .pp i.on { background:#ffd166 }
.vn-bar { display:block; height:4px; background:#ffffff14; margin-top:5px; overflow:hidden }
.vn-bar i { display:block; height:100%; background:#9be15d; transition:width .4s }
.vn-bar.k-hunger i { background:linear-gradient(90deg,#e8a33c,#e8541e) } .vn-bar.k-trust i { background:#7cc4ff }

/* أزرار الاختيار */
.vn-ch button { position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-align:start; min-height:46px;
  background:linear-gradient(180deg,#1c202c,#151821); color:var(--text); border:1px solid #ffffff1c; padding:10px 14px; font:inherit; font-size:.98rem; cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .15s, border-color .15s, transform .15s; opacity:0; animation:vnChIn .28s ease-out forwards; animation-delay:calc(var(--i,0) * 55ms) }
.vn-ch button::before { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:#ffd166; transform:scaleY(0); transition:transform .15s }
.vn-ch button kbd { display:grid; place-items:center; width:24px; height:24px; padding:0; border-radius:50%; font-size:.75rem; flex:none; transition:transform .15s }
.vn-ch button > span { flex:1; min-width:0 }
.vn-ch button small { width:100%; font-size:.74rem; opacity:.7; padding-inline-start:34px }
.vn-ch button:hover:not(:disabled), .vn-ch button:focus-visible { border-color:#ffd166aa; background:linear-gradient(180deg,#2d2716,#211c10); outline:none; transform:translateX(-4px) }
.vn-ch button:hover:not(:disabled)::before, .vn-ch button:focus-visible::before { transform:scaleY(1) }
.vn-ch button:hover:not(:disabled) kbd { transform:scale(1.12) }
.vn-ch button:active:not(:disabled) { transform:translateX(-4px) scale(.98) }
.vn-ch button.hot { border-color:#ffd16655 } .vn-ch button.hot > span { color:#ffe7b0 }
.vn-ch button.sec { background:transparent; border-color:#ffffff14; min-height:40px; font-size:.9rem; color:#c9c6bd }
.vn-ch button.sec kbd { background:#ffffff22; color:#ddd }
.vn-ch button.picked { animation:vnPick .14s ease-out forwards; border-color:#ffd166; background:#3d3214 }
.vn-ch button:disabled { opacity:.42 !important; cursor:not-allowed; filter:grayscale(.6) }
@keyframes vnChIn { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
@keyframes vnPick { 50% { filter:brightness(1.6) } to { opacity:1; filter:brightness(1.2) } }
@media (prefers-reduced-motion: reduce) { .vn-ch button { animation:none; opacity:1 } }

/* بطاقات الأثر */
.sh-fxl { position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:12; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none }
.fxc { display:inline-flex; align-items:center; gap:8px; padding:8px 18px 8px 14px; font-weight:900; font-size:1.08rem; letter-spacing:.2px;
  background:#0b0d12f2; border:1px solid; box-shadow:0 8px 30px #000c; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  opacity:0; animation:fxIn .35s ease-out forwards, fxOut .5s ease-in 3.4s forwards }
.fxc span { font-size:1.15rem }
.fxc.good { border-color:#9be15d; color:#b9f08a; text-shadow:0 0 10px #9be15d66 }
.fxc.bad { border-color:#ff5b57; color:#ffa3a0; text-shadow:0 0 10px #ff5b5766; animation:fxIn .35s ease-out forwards, fxShake .35s .35s, fxOut .5s ease-in 3.4s forwards }
.fxc.k-scrap { border-color:#ffd166; color:#ffd166 }
.fxa { width:0; height:0; border-inline:6px solid transparent }
.fxc.good .fxa { border-bottom:9px solid currentColor } .fxc.bad .fxa { border-top:9px solid currentColor }
.fxc.k-hunger.good .fxa { border-bottom:0; border-top:9px solid currentColor } .fxc.k-hunger.bad .fxa { border-top:0; border-bottom:9px solid currentColor }
@keyframes fxIn { from { opacity:0; transform:translateY(14px) scale(.9) } to { opacity:1; transform:none } }
@keyframes fxOut { to { opacity:0; transform:translateY(-16px) } }
@keyframes fxShake { 25% { translate:-4px 0 } 75% { translate:4px 0 } }

/* لوحة الفريق: تنطوي، ولكل موظف مزاج/شبع/طاقة، واللي برا عدّاد وشريط تقدّم */
.sh-roster { position:absolute; top:56px; inset-inline-start:10px; z-index:3; width:214px; display:flex; flex-direction:column; gap:4px; max-height:calc(100% - 140px - var(--shb)); }
.shr-h { display:flex; align-items:center; gap:8px; background:#0b0d12e6; border:1px solid #ffffff1f; color:#ffe7b0; font:inherit; font-weight:800; font-size:.85rem; padding:6px 10px; cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) }
.shr-h em { font-style:normal; background:#ffd166; color:#1a1308; font-size:.72rem; padding:0 6px; border-radius:8px }
.shr-car { margin-inline-start:auto; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s }
.sh-roster.min .shr-car { transform:rotate(-135deg) }
.sh-roster.min .shr-list { display:none }
.shr-list { display:flex; flex-direction:column; gap:4px; overflow:auto; scrollbar-width:thin }
.shr { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:start; background:#0b0d12d9; border:1px solid #ffffff14; padding:6px 8px; cursor:pointer; transition:border-color .15s }
.shr:hover { border-color:#ffd16655 }
.shr canvas { width:18px; height:27px; image-rendering:pixelated }
.shr-b { display:flex; flex-direction:column; gap:3px; min-width:0 }
.shr-t { display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.shr-t b { font-size:.82rem }
.shr-t small { margin-inline-start:auto; font-size:.66rem; padding:0 5px; border-radius:3px }
.st-ok { color:#9be15d } .st-bad { color:#ffa3a0; background:#3a1616 } .st-away { color:#7cc4ff } .st-back { color:#1a1308; background:#ffd166 }
.bdg { font-style:normal; font-size:.62rem; font-weight:800; padding:0 5px; background:#ffffff18; color:#ddd; border-radius:3px }
.bdg.chief { background:#ffd166; color:#1a1308 } .bdg.dep { background:#ffd16633; color:#ffd166 }
.sb { position:relative; display:block; height:5px; background:#ffffff12; overflow:hidden }
.sb em { position:absolute; opacity:0; pointer-events:none }
.sb i { display:block; height:100%; transition:width .6s }
.sb.k-mood i { background:#9be15d } .sb.k-hunger i { background:#e8a33c } .sb.k-energy i { background:#7cc4ff } .sb.k-job i { background:linear-gradient(90deg,#2e7d4a,#9be15d); transition:width 1s linear }
.shr.away { opacity:.9 } .shr.away canvas { opacity:.5 }
.shr.done { border-color:#ffd166; box-shadow:0 0 12px #ffd16633; animation:shrPulse 1.6s ease-in-out infinite }
@keyframes shrPulse { 50% { box-shadow:0 0 20px #ffd16666 } }
.shr-job { display:flex; justify-content:space-between; gap:6px; font-size:.72rem }
.shr-job span { opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.shr-job em { font-style:normal; font-weight:800; color:#7cc4ff; font-variant-numeric:tabular-nums; direction:ltr }
.shr.done .shr-job em { color:#ffd166 }
#shJobs.done { background:#8a6a12cc; border-color:#ffd16688; animation:shrPulse 1.6s ease-in-out infinite }
#shJobs { font-variant-numeric:tabular-nums }
body:has(#ptb:not([hidden])) #scr-shelter .sh-roster { top:108px; max-height:calc(100% - 190px - var(--shb)) }
@media (max-width:640px) {
  .sh-roster { width:180px; top:50px }
  body:has(#ptb:not([hidden])) #scr-shelter .sh-roster { top:96px }
  .sh-fxl { top:14% } .fxc { font-size:.9rem }
  .vn-skills { grid-template-columns:1fr 1fr }
}
@media (pointer:coarse) { .sh-roster { max-height:calc(100% - 250px - var(--shb)) } }
/* الجوال: عدّاد المهام يكفي في لوحة الفريق — الشريط العلوي يطلع فيه بس «رجعوا» */
@media (max-width:640px) { #shJobs:not(.done) { display:none } #shJobs.done { font-size:.72rem; padding:5px 8px } }
.vn-x:not(:empty) + .vn-txt:empty { display:none }

/* =====================================================================
   جولة 17هـ — فقاعات الكلام، الذكريات، الورشة، شريط الترتيب
   ===================================================================== */
.sh-bub { position:absolute; left:0; top:0; z-index:4; pointer-events:none; max-width:min(260px,60vw); padding:6px 10px; font-size:.82rem; line-height:1.6;
  background:#0b0d12f0; color:var(--text); border:1px solid #ffffff2a; box-shadow:0 6px 20px #000b; opacity:0; white-space:normal; text-align:center }
.sh-bub::after { content:''; position:absolute; left:50%; bottom:-6px; margin-left:-5px; border-inline:5px solid transparent; border-top:6px solid #0b0d12f0 }
.sh-bub.on { animation:bubIn .25s ease-out forwards }
@keyframes bubIn { from { opacity:0; margin-top:6px } to { opacity:1; margin-top:0 } }
.sh-bub b { color:#fff } .sh-bub .rt-big { font-size:1.2em }
.vn-mems { display:flex; flex-direction:column; gap:5px; max-height:34vh; overflow:auto }
.vn-mem { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:baseline; background:#12151d; border:1px solid #ffffff12; border-inline-start:3px solid #ffd16688; padding:6px 10px; font-size:.9rem }
.vn-mem em { font-style:normal; font-size:.72rem; color:#9a9aa6 }
.vn-store { display:flex; flex-wrap:wrap; gap:6px }
.vn-it { display:inline-flex; align-items:center; gap:6px; background:#12151d; border:1px solid #ffffff18; padding:4px 8px; font-size:.8rem }
.vn-it img { width:24px; height:24px; image-rendering:pixelated } .vn-it em { font-style:normal; color:#ffd166; font-weight:800 }
.vn-note { margin:0; font-size:.74rem; opacity:.65 }
.sh-arr-x { display:inline-flex; gap:6px; align-items:center }
.sh-arr-x:empty { display:none }
.sh-arr-sel { background:#1a1d28; color:var(--text); border:1px solid #ffd16666; padding:5px 8px; font:inherit; font-size:.82rem; max-width:200px }
@media (max-width:640px) { .vn-mem { grid-template-columns:1fr; gap:2px } .sh-bub { font-size:.74rem; max-width:62vw } }