/* =====================================================================
   قطار الناجي (جولة 19.2) — لوحة تحكم قطار: فولاذ، براغي، شريط تحذير، لمبات.
   ===================================================================== */
#scr-train { --trb:calc(var(--wipbar,0px) + var(--safe-b,0px)); --ph:208px; --amber:#ffd166; --amb2:#ffb46e; --steel:linear-gradient(180deg,#2c303c 0%,#1b1e27 50%,#13151c 100%);
  --cut:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  padding:0; background:#050608; align-items:stretch; justify-content:stretch; overflow:hidden }
.tri { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.tri.sm { width:14px; height:14px }
/* المسرح */
.tr-stage { position:absolute; inset:58px 0 calc(var(--ph) + 10px + var(--trb)) 0; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; transition:bottom .25s ease }
#scr-train.pcol .tr-stage { bottom:calc(46px + var(--trb)) }
.tr-stage canvas { display:block; image-rendering:pixelated }
.tr-stage .tr-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:auto }
.tr-stage.fx-on #trCv { opacity:0 }
.tr-stage::after { content:''; position:absolute; inset:0; background:#000; opacity:0; pointer-events:none }
.tr-stage.flash::after { animation:trFade .55s ease-out }
@keyframes trFade { 0% { opacity:.9 } 100% { opacity:0 } }
/* الشريط العلوي */
.tr-top { position:absolute; top:8px; inset-inline:10px; z-index:5; display:flex; gap:8px; align-items:center }
.tr-btn, .tr-name, .tr-scrap, .tr-zone, .tr-view { position:relative; height:42px; box-sizing:border-box; color:var(--text); font:inherit; background:var(--steel); border:1px solid #ffffff1c;
  box-shadow:inset 0 1px 0 #ffffff17, inset 0 -2px 0 #0006, 0 6px 16px #0009; clip-path:var(--cut) }
.tr-btn { width:42px; display:grid; place-items:center; cursor:pointer; transition:color .15s } .tr-btn:hover { color:#ff6b6b }
.tr-name { display:flex; align-items:center; gap:8px; padding:0 14px 0 12px; cursor:pointer; background:linear-gradient(180deg,#a87a2a,#6a4a14 60%,#4a3410); border-color:#ffd98a55; color:#2a1a06 }
.tr-name small { font-size:.62rem; font-weight:800; opacity:.7 } .tr-name b { font-size:1rem; color:#fff1cc; text-shadow:0 1px 0 #3a2408 } .tr-name .tri { color:#fff1cc; opacity:.65 }
.tr-name:hover .tri { opacity:1 }
.tr-zone { display:flex; align-items:center; gap:8px; padding:0 14px; margin-inline-start:auto; background:#07080b; font-family:ui-monospace,monospace; overflow:hidden; max-width:38vw }
.tr-zone i { width:8px; height:8px; border-radius:50%; background:var(--amb2); box-shadow:0 0 8px var(--amb2); animation:trBlink 1.6s steps(2) infinite }
.tr-zone b { font-family:var(--font); font-size:.78rem; color:var(--amb2); text-shadow:0 0 8px #ffb46e88; white-space:nowrap }
.tr-zone.pop b { animation:trZone 1.4s ease-out }
@keyframes trZone { 0% { color:#fff; text-shadow:0 0 18px #fff } }
@keyframes trBlink { 50% { opacity:.25 } }
.tr-scrap { display:inline-flex; align-items:center; gap:7px; padding:0 14px } .tr-scrap b { color:var(--amber); font-size:1.18rem; font-variant-numeric:tabular-nums; text-shadow:0 0 10px #ffd16655 } .tr-scrap small { opacity:.55; font-size:.7rem }
.tr-scrap i, .sc { display:inline-block; width:13px; height:13px; background:var(--amber); clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%); vertical-align:-1px }
/* مفتاح برا/داخل: ذراع ينزلق */
.tr-view { display:flex; align-items:stretch; padding:4px; gap:0; cursor:pointer; min-width:150px }
.tr-view span { position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; gap:5px; font-weight:800; font-size:.78rem; opacity:.5; transition:opacity .2s, color .2s }
.tr-view span em { font-style:normal }
.tr-view .kn { position:absolute; top:4px; bottom:4px; inset-inline-start:4px; width:calc(50% - 4px); background:linear-gradient(180deg,#e8541e,#9a2a0e); box-shadow:0 0 14px #e8541e66, inset 0 1px 0 #ffffff33; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); transition:inset-inline-start .25s cubic-bezier(.3,1.4,.5,1) }
.tr-view:not(.in) .o, .tr-view.in .i { opacity:1; color:#fff } .tr-view.in .kn { inset-inline-start:50% }
/* لوحة التحكم السفلية */
.tr-panel { position:absolute; inset-inline:8px; bottom:calc(6px + var(--trb)); height:var(--ph); z-index:4; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#171a22 0%,#0e1016 100%); border:1px solid #ffffff1a; box-shadow:0 -10px 30px #000a, inset 0 1px 0 #ffffff12; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);
  transition:transform .25s ease }
.tr-panel::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:repeating-linear-gradient(-45deg,#e8a21e 0 7px,#14151a 7px 14px); opacity:.85 }
.tr-panel::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 10px 14px,#5a5d66 1.5px,transparent 2px),radial-gradient(circle at calc(100% - 10px) 14px,#5a5d66 1.5px,transparent 2px) }
#scr-train.pcol .tr-panel { transform:translateY(calc(var(--ph) - 40px)) }
#scr-train.pcol .tr-col .tri { transform:rotate(180deg) }
.tr-panel[hidden], .tr-pop[hidden] { display:none }
.tr-tabs { display:flex; gap:4px; padding:8px 10px 0; border-bottom:1px solid #ffffff10 }
.tr-tabs button { position:relative; display:flex; align-items:center; gap:7px; font:inherit; font-weight:800; font-size:.82rem; color:var(--text); opacity:.55; background:#ffffff06; border:1px solid #ffffff10; border-bottom:0; padding:7px 14px 8px; cursor:pointer;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px); transition:opacity .15s, background .15s }
.tr-tabs button:hover { opacity:.85 }
.tr-tabs button.on { opacity:1; color:#ffe7b0; background:linear-gradient(180deg,#3a2e14,#1a160c) }
.tr-tabs button.on::after { content:''; position:absolute; inset:auto 8px 0; height:2px; background:var(--amber); box-shadow:0 0 10px var(--amber) }
.tr-tabs .tr-col { margin-inline-start:auto; opacity:.7; padding:7px 10px } .tr-col .tri { transition:transform .25s }
.tr-body { flex:1; overflow:auto; padding:8px 10px 10px; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; scrollbar-color:#ffd16644 transparent }
.tr-sec h4 { display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:.8rem; color:#d9d4c7 } .tr-sec h4 small { opacity:.5; font-weight:400 } .tr-sec h4 .tri { color:var(--amber) }
.tr-row { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; scrollbar-color:#ffd16633 transparent }
/* بطاقة القطعة: صندوق شحن ببطاقة سعر */
.tr-item, .tr-paint { position:relative; flex:none; width:88px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text); font:inherit; padding:5px 4px 6px; cursor:pointer;
  background:linear-gradient(180deg,#252a35,#161921); border:1px solid #ffffff18; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:transform .14s, border-color .14s, box-shadow .14s }
.tr-it-v { display:grid; place-items:center; width:100%; height:54px; background:radial-gradient(ellipse at 50% 80%,#ffffff10,transparent 70%) }
.tr-item canvas { width:56px; height:52px; image-rendering:pixelated }
.tr-item b, .tr-paint b { font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.tr-item em, .tr-paint em { display:inline-flex; align-items:center; gap:4px; font-style:normal; font-weight:900; font-size:.76rem; color:var(--amber) }
.tr-item .cnt { position:absolute; top:4px; inset-inline-end:6px; font-size:.68rem; background:#000a; padding:0 6px; border-radius:99px }
.tr-item .own { position:absolute; top:4px; inset-inline-start:6px; font-size:.58rem; opacity:.55 }
.tr-lit { position:absolute; top:22px; inset-inline-end:4px; color:var(--amber); filter:drop-shadow(0 0 4px #ffd166) } .tr-lit .tri { width:12px; height:12px }
.tr-item:hover, .tr-paint:hover { transform:translateY(-2px); border-color:#ffd16677 }
.tr-item.on, .tr-paint.on { border-color:var(--amber); background:linear-gradient(180deg,#4a3a14,#1c170b); box-shadow:inset 0 0 18px #ffd16633 }
.tr-item.on::before, .tr-paint.on::before { content:''; position:absolute; top:5px; left:5px; width:6px; height:6px; border-radius:50%; background:#9be15d; box-shadow:0 0 8px #9be15d }
.tr-item.poor em, .tr-paint.poor em { color:#ff6b62 } .tr-item.full { opacity:.45 }
.tr-item.excl em, .tr-paint.excl em { color:#c9a3ff; font-size:.62rem } .tr-item.excl, .tr-paint.excl { cursor:default }
.tr-item:disabled:hover, .tr-paint:disabled:hover { transform:none }
.sw { display:block; width:52px; height:32px; margin:5px 0 3px; background:linear-gradient(180deg,var(--b) 0 68%,var(--t) 68% 80%,var(--b) 80%); border:1px solid #0009; box-shadow:inset 0 2px 0 #fff2, 0 3px 8px #0008 }
.sw.in { background:linear-gradient(180deg,var(--b) 0 72%,var(--t) 72%); box-shadow:inset 0 0 0 2px #0004, inset 0 2px 0 #fff1, 0 3px 8px #0008 }
.tr-empty { flex:none; align-self:center; margin:6px 8px; font-size:.78rem; opacity:.55 }
.tr-h-sp { flex:1 }
.tr-div { flex:none; position:relative; width:2px; margin:4px 6px; background:repeating-linear-gradient(180deg,#ffd16655 0 4px,transparent 4px 8px) }
.tr-div span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-90deg); font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:1px; color:#ffd166; background:#11131a; padding:1px 6px; white-space:nowrap }
.tr-seg { display:flex; gap:4px; align-self:flex-start; padding:3px; background:#0008; border:1px solid #ffffff12 }
.tr-seg button { display:flex; align-items:center; gap:6px; font:inherit; font-weight:800; font-size:.76rem; color:var(--text); opacity:.55; background:none; border:0; padding:6px 12px; cursor:pointer }
.tr-seg button.on { opacity:1; background:#ffd1661a; color:#ffe7b0 }
.tr-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px }
.tr-chips button { font:inherit; font-size:.72rem; font-weight:700; color:var(--text); background:#ffffff08; border:1px solid #ffffff18; padding:4px 10px; cursor:pointer; border-radius:99px }
.tr-chips button.on { border-color:var(--amber); color:#ffe7b0; background:#ffd16614 }
.tr-tg { display:inline-flex; align-items:center; gap:5px; margin-inline-start:auto; font:inherit; font-size:.72rem; font-weight:700; color:var(--text); opacity:.6; background:#ffffff08; border:1px solid #ffffff18; padding:3px 10px; cursor:pointer; border-radius:99px }
.tr-tg.on { opacity:1; border-color:#9be15d77; color:#d9f7c2 }
.tr-wag { flex:none; width:150px; display:flex; flex-direction:column; gap:5px; background:linear-gradient(180deg,#232733,#151820); border:1px solid #ffffff18; padding:8px; font-size:.74rem; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
.tr-wag small { opacity:.55 }
.tr-wag-h { display:flex; align-items:center; gap:6px } .tr-wag-h em { font-style:normal; display:grid; place-items:center; width:20px; height:20px; flex:none; background:#ffd1661c; color:var(--amber); font-weight:900; font-size:.7rem }
.tr-wag-h b { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#ffe7b0 }
.tr-wag-h button { background:none; border:0; color:var(--text); opacity:.55; cursor:pointer; padding:2px } .tr-wag-h button:hover { opacity:1; color:var(--amber) }
.tr-wag select { font:inherit; font-size:.76rem; background:#0b0d12; color:var(--text); border:1px solid #ffffff22; padding:4px }
.tr-wag.add { justify-content:center; border-style:dashed; background:#ffffff05 }
.tr-go { display:flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:900; font-size:.8rem; color:#fff; background:linear-gradient(180deg,#e8541e,#9a2a0e); border:0; padding:8px 10px; cursor:pointer; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
.tr-go > i { display:inline-flex; align-items:center; gap:3px; font-style:normal; background:#0005; padding:0 7px; border-radius:99px } .tr-go.poor > i { color:#ffb3ad }
/* نافذة القطعة: تتبع القطعة */
.tr-pop { position:absolute; z-index:7; display:flex; flex-direction:column; gap:6px; padding:8px; font-size:.8rem; background:var(--steel); border:1px solid #ffd16666; box-shadow:0 12px 30px #000c;
  clip-path:var(--cut); animation:trPopIn .16s cubic-bezier(.3,1.4,.5,1) }
.tr-pop.out { animation:trPopOut .14s ease-in forwards }
@keyframes trPopIn { from { opacity:0; transform:translateY(6px) scale(.95) } }
@keyframes trPopOut { to { opacity:0; transform:translateY(4px) scale(.96) } }
.tr-pop b { display:flex; align-items:center; gap:6px; color:#ffe7b0 } .tr-pop div { display:flex; gap:6px }
.tr-pop button { display:flex; align-items:center; gap:5px; font:inherit; font-weight:800; font-size:.74rem; color:#fff; border:1px solid #ffffff22; padding:6px 10px; cursor:pointer; background:linear-gradient(180deg,#3a5a2a,#1a2a12) }
.tr-pop button + button { background:linear-gradient(180deg,#5a3a1a,#2a1a0a) }
/* تلميح E فوق الشي القريب */
.tr-prompt { position:absolute; z-index:6; transform:translate(-50%,-100%); display:flex; align-items:center; gap:6px; padding:4px 10px 4px 5px; white-space:nowrap; pointer-events:none;
  background:#000c; border:1px solid #ffd16688; color:#ffe7b0; font-size:.76rem; font-weight:800; box-shadow:0 4px 14px #000a; animation:trPrompt .2s ease-out }
.tr-prompt[hidden] { display:none }
.tr-prompt::after { content:''; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:#ffd16688 }
.tr-prompt kbd { display:grid; place-items:center; min-width:18px; height:18px; font:inherit; font-size:.7rem; font-weight:900; color:#1a1408; background:var(--amber); box-shadow:0 2px 0 #8a6a14 }
.tr-prompt .tri { width:14px; height:14px; color:var(--amber) }
@keyframes trPrompt { from { opacity:0; transform:translate(-50%,-80%) } }
/* أزرار الجوال */
.tr-pad { position:absolute; bottom:10px; left:12px; right:12px; direction:ltr; z-index:6; display:none; align-items:flex-end; justify-content:space-between; pointer-events:none }
.tr-pad-mv { display:flex; gap:10px; direction:ltr }
.tr-pad button { pointer-events:auto; display:grid; place-items:center; color:#fff; background:#0009; border:1px solid #ffffff2a; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; backdrop-filter:blur(2px) }
.tr-pad-mv button { width:58px; height:58px; border-radius:50% } .tr-pad-mv button .tri { width:26px; height:26px }
.tr-pad-mv button.dn { background:#ffd16633; border-color:var(--amber) }
.tr-pad-act { width:64px; height:64px; border-radius:50%; opacity:.35; transition:opacity .2s, transform .2s, box-shadow .2s } .tr-pad-act .tri { width:28px; height:28px }
.tr-pad-act.on { opacity:1; border-color:var(--amber); background:radial-gradient(circle,#4a3a14,#1a1408); box-shadow:0 0 18px #ffd16677; color:var(--amber); animation:trActPulse 1.4s ease-in-out infinite }
@keyframes trActPulse { 50% { transform:scale(1.07) } }
@media (pointer:coarse) { .tr-pad:not([hidden]) { display:flex } .tr-prompt kbd { display:none } }
/* سطر الراديو: أنميشن حسب المحرك */
.tr-sub { --sc:#d9f7c2; position:absolute; z-index:5; left:50%; transform:translateX(-50%); max-width:min(620px,92%); display:flex; gap:10px; align-items:center; padding:9px 16px 9px 12px;
  background:linear-gradient(90deg,#000d,#000a); border:1px solid color-mix(in srgb,var(--sc) 40%,transparent); color:var(--sc); font-size:.9rem; line-height:1.6; pointer-events:none;
  box-shadow:0 0 24px color-mix(in srgb,var(--sc) 18%,transparent), 0 8px 24px #000a; text-shadow:0 0 8px color-mix(in srgb,var(--sc) 55%,transparent); animation:trSubIn .3s ease-out }
.tr-sub.out { animation:trSubOut .4s ease-in forwards }
.tr-sub[hidden] { display:none }
.tr-sub.pos-bottom { bottom:12px } .tr-sub.pos-top { top:12px } .tr-sub.pos-center { top:50%; transform:translate(-50%,-50%) }
@keyframes trSubIn { from { opacity:0; filter:blur(4px) } }
@keyframes trSubOut { to { opacity:0; filter:blur(3px) } }
.tr-sub-ic { position:relative; flex:none; display:grid; place-items:center; width:30px; height:30px; color:var(--sc) }
.tr-sub-ic i { position:absolute; inset:2px; border:1px solid var(--sc); border-radius:50%; opacity:0; animation:trWave 1.8s ease-out infinite }
.tr-sub-ic i:nth-child(3) { animation-delay:.6s } .tr-sub-ic i:nth-child(4) { animation-delay:1.2s }
@keyframes trWave { 0% { transform:scale(.6); opacity:.7 } 100% { transform:scale(1.5); opacity:0 } }
.tr-sub-t { white-space:pre-wrap }
.tr-sub .c { opacity:0; animation:trCh .01s linear forwards }
@keyframes trCh { to { opacity:1 } }
.tr-sub.fx-type .tr-sub-t::after { content:''; display:inline-block; width:7px; height:1em; margin-inline-start:2px; vertical-align:-2px; background:var(--sc); animation:trBlink .8s steps(2) infinite }
.tr-sub.fx-glitch .c.g { color:#ff5b57; text-shadow:2px 0 #00e5ff, -2px 0 #ff2a6d }
.tr-sub.fx-glitch { animation:trSubIn .3s ease-out, trGl 3.2s steps(1) infinite .3s }
@keyframes trGl { 0%,92%,100% { transform:translateX(-50%) } 93% { transform:translate(calc(-50% + 3px),1px); filter:hue-rotate(40deg) } 95% { transform:translate(calc(-50% - 2px),-1px) } }
.tr-sub.pos-center.fx-glitch { animation:trSubIn .3s ease-out }
.tr-sub.fx-shake .c { display:inline-block; animation:trCh .01s linear forwards, trJit .18s steps(2) infinite; animation-delay:inherit, var(--j,0s) }
.tr-sub.fx-shake .c { animation-name:trCh, trJit }
@keyframes trJit { 0% { transform:translate(0,0) } 50% { transform:translate(.6px,-.8px) rotate(-2deg) } 100% { transform:translate(-.6px,.6px) rotate(1deg) } }
.tr-sub.fx-whisper { font-style:italic; letter-spacing:.6px; background:linear-gradient(90deg,#0000,#000b 20%,#000b 80%,#0000); border-color:transparent; box-shadow:none }
.tr-sub.fx-whisper .c { animation:trWh 1.1s ease-out forwards }
@keyframes trWh { 0% { opacity:0; filter:blur(4px); transform:translateY(-3px) } 100% { opacity:.85; filter:blur(0) } }
.tr-sub.fx-whisper .c { display:inline-block; white-space:pre }
.tr-sub.fx-pulse .tr-sub-t { animation:trPulse 1.3s ease-in-out infinite }
@keyframes trPulse { 50% { text-shadow:0 0 18px var(--sc), 0 0 2px #fff; opacity:.75 } }
.tr-sub.fx-words .w { display:inline-block; opacity:0; animation:trWord .35s cubic-bezier(.3,1.5,.5,1) forwards }
@keyframes trWord { 0% { opacity:0; transform:translateY(6px) scale(.8); filter:blur(3px) } 100% { opacity:1; transform:none; filter:none } }
.tr-sub.fx-scramble .tr-sub-t { font-variant-numeric:tabular-nums }
/* المذكرة: دفتر ميداني */
.tr-book { position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:radial-gradient(ellipse at center,#0008,#000d); padding:14px; animation:trBkIn .22s ease-out }
.tr-book.out { animation:trBkOut .2s ease-in forwards } .tr-book[hidden] { display:none }
@keyframes trBkIn { from { opacity:0 } } @keyframes trBkOut { to { opacity:0 } }
.tr-bk { position:relative; box-sizing:border-box; width:min(820px,100%); height:min(520px,100%); display:flex; align-items:stretch; color:#2a2218; filter:drop-shadow(0 24px 50px #000);
  background:#3a2a1c; padding:10px; clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); animation:trBkPop .3s cubic-bezier(.3,1.3,.5,1) }
@keyframes trBkPop { from { transform:translateY(16px) rotate(-1deg) scale(.97) } }
.tr-bk::before { content:''; position:absolute; inset:4px; border:1px dashed #c9a27a33; pointer-events:none }
.tr-bk-x { position:absolute; top:16px; inset-inline-end:16px; z-index:3; display:grid; place-items:center; width:32px; height:32px; border:0; background:#2a1a10; color:#efe4cc; cursor:pointer; border-radius:50%; box-shadow:0 2px 6px #0008 }
.tr-bk-x:hover { background:#8c1620 }
.tr-bk-l, .tr-bk-p { background:linear-gradient(90deg,#d9cdb0,#ece2c8 30%,#e6dbbf); box-shadow:inset 0 0 50px #7a5a3055 }
.tr-bk-l { width:36%; height:100%; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; border-inline-end:2px solid #8a6a4a55; box-shadow:inset -14px 0 20px -12px #5a3a2066, inset 0 0 50px #7a5a3055 }
.tr-bk-cover { padding:16px 16px 10px; border-bottom:2px double #7a5a3055 } .tr-bk-cover b { display:block; font-size:1.15rem; letter-spacing:.3px } .tr-bk-cover small { opacity:.6; font-size:.75rem }
.tr-bk-l ol { list-style:none; margin:0; padding:6px 10px 12px; overflow:auto; flex:1; scrollbar-width:thin }
.tr-bk-l li button { display:flex; align-items:baseline; gap:8px; width:100%; font:inherit; text-align:start; background:none; border:0; border-bottom:1px dotted #7a5a3055; padding:8px 6px; cursor:pointer; color:inherit; font-size:.86rem; transition:background .15s }
.tr-bk-l li button:hover { background:#7a5a3014 }
.tr-bk-l li button.on { background:#7a5a3026; font-weight:800; box-shadow:inset 3px 0 0 #8c1620 }
.tr-bk-l li em { font-style:normal; font-family:ui-monospace,monospace; font-size:.72rem; opacity:.55 }
.tr-bk-l li button span { flex:1 }
.tr-bk-l li button.new::after { content:'جديد'; font-size:.58rem; font-weight:800; background:#8c1620; color:#fff; padding:1px 7px; transform:rotate(-4deg) }
.tr-bk-l li.lk { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px dotted #7a5a3055; opacity:.75 }
.tr-bk-l li.lk .rd { flex:1; display:flex; flex-direction:column; gap:3px } .tr-bk-l li.lk .rd i { display:block; height:7px; background:#1a140e; opacity:.85 } .tr-bk-l li.lk .rd i:nth-child(n+3) { display:none }
.tr-bk-l li.lk small { width:100%; display:flex; align-items:center; gap:4px; font-size:.66rem; opacity:.75 }
.tr-bk-p { position:relative; flex:1; min-width:0; height:100%; box-sizing:border-box; display:flex; flex-direction:column; padding:22px 26px 14px; overflow:hidden;
  background-image:linear-gradient(90deg,transparent 30px,#b0301a33 30px 31px,transparent 31px),repeating-linear-gradient(180deg,transparent 0 27px,#3a5a7233 27px 28px),linear-gradient(90deg,#e6dbbf,#efe6cf 60%,#e2d6b8) }
.tr-bk-p::after { content:''; position:absolute; width:120px; height:120px; bottom:24px; left:30px; border-radius:50%; border:10px solid #7a4a2018; filter:blur(1px); pointer-events:none }
.tr-bk-p.turn-next { animation:trTurnN .35s ease-out } .tr-bk-p.turn-prev { animation:trTurnP .35s ease-out }
@keyframes trTurnN { from { opacity:0; transform:translateX(-24px) } } @keyframes trTurnP { from { opacity:0; transform:translateX(24px) } }
.tr-bk-p header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.tr-bk-no { font-family:ui-monospace,monospace; font-size:.74rem; opacity:.6; letter-spacing:.5px }
.tr-bk-st { font-weight:900; font-size:.8rem; color:#8c1620; border:2px solid #8c1620; padding:1px 10px; transform:rotate(-6deg); opacity:.75; letter-spacing:1px }
.tr-bk-p h3 { margin:0 0 10px; font-size:1.3rem; line-height:1.3 }
.tr-bk-body { flex:1; overflow:auto; font-size:.98rem; line-height:28px; padding-inline-end:6px; scrollbar-width:thin }
.tr-bk-p footer { margin-top:8px; font-size:.78rem; opacity:.6; text-align:end; font-style:italic }
.tr-bk-empty { flex:1; display:grid; place-content:center; justify-items:center; gap:8px; opacity:.55 } .tr-bk-empty .tri { width:40px; height:40px }
.tr-bk-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding-top:8px; font-family:ui-monospace,monospace; font-size:.78rem }
.tr-bk-nav button { display:grid; place-items:center; width:32px; height:32px; border:1px solid #7a5a3066; background:#fff4; color:inherit; cursor:pointer; border-radius:50% } .tr-bk-nav button:disabled { opacity:.3; cursor:default }
@media (max-width:640px) { .tr-bk { flex-direction:column; padding:6px } .tr-bk-p { height:auto; min-height:0 } .tr-bk-l { width:auto; height:auto; max-height:34%; border-inline-end:0; border-bottom:2px solid #8a6a4a55 } .tr-bk-cover { padding:10px 12px 6px } .tr-bk-p { padding:16px 18px 10px } }
/* المتجر والباتل باس */
.tr-shopsec { margin-top:14px } .tr-shopsec[hidden] { display:none }
.tr-shop-h { display:flex; align-items:center; gap:8px; font-size:1rem; margin:0 0 8px } .tr-shop-h small { opacity:.6; font-weight:400; font-size:.75rem } .tr-shop-h .tri { color:#ffd166 }
.tr-shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px }
.tr-sc { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; background:linear-gradient(180deg,#2a2e3a,#12141b); border:1px solid #ffffff1f; color:var(--text); font:inherit; cursor:pointer; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
.tr-sc:hover { border-color:#ffd16677 }
.tr-sc canvas { width:64px; height:56px; image-rendering:pixelated } .tr-sc b { font-size:.78rem } .tr-sc small { font-size:.65rem; opacity:.6 } .tr-sc em { display:inline-flex; align-items:center; gap:4px; font-style:normal; font-weight:900; color:#ffd166 }
.tr-sc.own { opacity:.5; cursor:default }
.tr-pbadge { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:4px; padding:3px 5px; background:#0007; border:1px solid #ffd16644; font-size:.6rem }
.tr-pbadge canvas { width:24px; height:24px; image-rendering:pixelated } .tr-pbadge .sw { width:20px; height:14px; margin:0 } .tr-pbadge small { opacity:.75 } .tr-pbadge .tri { color:#ffd166 }
/* زر القائمة: قطار صغير رمادي يمشي داخل الزر */
#btn_train { position:relative; overflow:hidden; border-color:#ffd16666 !important }
#btn_train .tr-mini { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.85; pointer-events:none }
#btn_train > .t-ic, #btn_train > b { position:relative; z-index:1; text-shadow:0 2px 4px #000, 0 0 8px #000 }
#btn_train b { color:#ffe7b0 }
/* مقاسات */
@media (max-width:760px) { .tr-zone { display:none } .tr-view { min-width:0 } .tr-view span em { display:none } .tr-view span { padding:0 10px } }
@media (max-width:640px) { #scr-train { --ph:162px } .tr-stage { top:54px } .tr-item, .tr-paint { width:74px } .tr-it-v { height:44px } .tr-item canvas { width:46px; height:42px } .tr-name { padding:0 10px } .tr-name small, .tr-name .tri { display:none }
  .tr-tabs button span { display:none } .tr-tabs button { padding:7px 12px } .tr-scrap small { display:none } }
@media (max-height:480px) { #scr-train { --ph:128px } .tr-stage { top:50px } .tr-top { top:4px } .tr-btn, .tr-name, .tr-scrap, .tr-zone, .tr-view { height:38px }
  .tr-item b, .tr-paint b, .tr-item .own { display:none } .tr-it-v { height:36px } .tr-item canvas { width:38px; height:34px } .tr-sec h4 { display:none } .tr-tabs button span { display:none } .tr-tabs { padding-top:5px }
  .tr-pad-mv button { width:50px; height:50px } .tr-pad-act { width:56px; height:56px } }
@media (prefers-reduced-motion: reduce) { .tr-stage.flash::after, .tr-zone.pop b, .tr-sub, .tr-sub *, .tr-prompt, .tr-pop, .tr-book, .tr-bk, .tr-bk-p, .tr-pad-act.on { animation:none !important } }

/* شارة «نسخة تجريبية» ما تتداخل مع شريط القطار: تنزل تحته وتصغر */
body:has(#scr-train.active) .ptb { top:calc(60px + var(--safe-t,0px)) !important; bottom:auto !important; --ptb-s:.7; opacity:.5 }
body:has(#scr-train.active) .ptb span { display:none }
@media (max-height:480px) { body:has(#scr-train.active) .ptb { display:none } }

/* صور المذكرة (جولة 19.5): كاميرا قديمة */
.tr-ph { display:grid; gap:14px; margin:6px 4px 14px; justify-items:center; align-items:start }
.tr-ph.img1 { grid-template-columns:minmax(0,320px); justify-content:center }
.tr-ph.img2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.tr-ph.img3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.tr-ph.grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 12px; max-width:330px; margin-inline:auto }
.tr-ph.img2 { max-width:440px; margin-inline:auto } .tr-ph.img3 { max-width:480px; margin-inline:auto }
.tr-ph.grid4 figcaption { padding:3px 2px 4px; font-size:.7rem }
.tr-ph figure { position:relative; margin:0; width:100%; background:#f4efe2; padding:6px 6px 0; box-shadow:0 6px 14px #0006, 0 1px 0 #fff inset; transform:rotate(var(--r)); transition:transform .25s, box-shadow .25s; cursor:zoom-in }
.tr-ph figure:hover { transform:rotate(0) scale(1.03); z-index:2 }
.tr-ph img, .tr-ph .tr-ph-miss { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#1a1714; filter:sepia(.35) contrast(1.12) saturate(.7) brightness(.92) }
.tr-ph.img3 img, .tr-ph.img3 .tr-ph-miss { aspect-ratio:3/4 }
.tr-ph figure::after { content:''; position:absolute; inset:6px 6px auto; aspect-ratio:4/3; pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,#2a180a66), repeating-radial-gradient(circle at 30% 40%,#0000 0 2px,#00000010 2px 3px); mix-blend-mode:multiply }
.tr-ph.img3 figure::after { aspect-ratio:3/4 }
.tr-ph figcaption { padding:5px 2px 7px; min-height:14px; text-align:center; font-size:.8rem; color:#2a2218; font-style:italic }
.tr-ph figure:not(:has(figcaption)) { padding-bottom:16px }
.tr-ph .tape { position:absolute; top:-7px; left:50%; width:46px; height:14px; margin-left:-23px; background:#e8dcb0aa; box-shadow:0 1px 2px #0003; transform:rotate(calc(var(--r) * -1.4)) }
.tr-phz { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:#000c; cursor:zoom-out; animation:trBkIn .2s ease-out }
.tr-phz figure { position:relative; margin:0; width:min(560px,86%); background:#f4efe2; padding:10px 10px 0; transform:rotate(-1.5deg); box-shadow:0 30px 80px #000; animation:trBkPop .3s cubic-bezier(.3,1.3,.5,1) }
.tr-phz img { display:block; width:100%; max-height:70vh; object-fit:contain; background:#1a1714; filter:sepia(.35) contrast(1.12) saturate(.7) brightness(.92) }
.tr-phz figcaption { padding:8px 4px 12px; text-align:center; color:#2a2218; font-style:italic } .tr-phz .tape { position:absolute; top:-8px; left:50%; width:70px; height:18px; margin-left:-35px; background:#e8dcb0aa }
.tr-bk-body p { margin:0 }
@media (max-width:640px) { .tr-ph.img3 { grid-template-columns:repeat(3,1fr) } .tr-ph figcaption { font-size:.68rem } }

/* ارتفاع اللوحات بالجوال + تحسين زر القائمة (جولة 19.9) */
.tr-pad-y { display:flex; flex-direction:column; gap:6px; pointer-events:auto; margin-inline:auto 10px }
.tr-pad-y[hidden] { display:none }
.tr-pad-y button { width:46px; height:40px; border-radius:10px } .tri.up { transform:rotate(180deg) }
/* أيقونة الزر: نفس الشكل الأصلي (خط فاصل بين الأيقونة والنص)، والجزء حول الأيقونة ضبابي */
#btn_train > .t-ic { position:relative; z-index:1; color:#ffe7b0; background:rgba(8,10,14,.22); backdrop-filter:blur(6px) saturate(1.1); -webkit-backdrop-filter:blur(6px) saturate(1.1) }
.menu-col #btn_train.tile.sm > .t-ic { margin:0; padding:0; border-radius:0; box-shadow:none; border:0; border-inline-end:1px solid #ffffff2e }
#btn_train > .t-ic svg, #btn_train > .t-ic img { filter:drop-shadow(0 0 5px #ffd16677) }
/* جولة 20: أغراض القطار داخل بطاقة المستوى — شريط مرتب بدون تداخل */
.tier .tr-pbadge { width:100%; box-sizing:border-box; margin:2px 0 0; justify-content:center; flex-wrap:nowrap; overflow:hidden; border-radius:4px; background:linear-gradient(90deg,#ffd16612,#ffd16626,#ffd16612); border-color:#ffd16655 }
.tier .tr-pbadge small { display:none } .tier .tr-pbadge canvas { width:20px; height:20px } .tier .tr-pbadge .sw { width:16px; height:12px }
.tier .tr-pbadge::before { content:'+ قطار'; font-size:.6rem; color:#ffd166; font-weight:800; margin-inline-end:2px; white-space:nowrap }
.tier .tr-pbadge > svg { display:none }
/* جولة 21: عنوان قسم القطار بنفس طابع أقسام المتجر */
#scr-shop .tr-shop-h { display:flex; align-items:center; gap:10px; margin:18px 0 10px; font-size:1rem; letter-spacing:.04em }
#scr-shop .tr-shop-h::after { content:''; flex:1; height:2px; background:linear-gradient(90deg,transparent,#ffd166 30%,transparent); opacity:.5 }
#scr-shop .tr-sc { clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); border-radius:0 }

/* جولة 40: مزايا الحمولة */
.tr-perk { position:absolute; top:4px; inset-inline-end:4px; unicode-bidi:isolate; font-style:normal; font-size:10px; font-weight:700; line-height:1; padding:2px 4px; border-radius:4px; background:rgba(110,200,120,.18); color:#9be15d; border:1px solid rgba(155,225,93,.35); pointer-events:none }
.tr-perkbar { margin:0 0 6px; padding:6px 10px; border-radius:8px; background:rgba(155,225,93,.08); border:1px solid rgba(155,225,93,.22); font-size:12px; color:#cfe8c0; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center }
.tr-perkbar b { color:#9be15d } .tr-perkbar small { opacity:.7 }
@media (max-height:480px) { .tr-perkbar { padding:3px 8px; font-size:11px; margin-bottom:4px } .tr-perkbar small { display:none } }

/* =====================================================================
   جولة 64: الدكان الجديد — تبويبات واضحة (مخزني / الدكان / الألوان / العربات)،
   شبكة تلتف بدل صف واحد ينقص من الجنب، وتمرير عمودي ظاهر داخل اللوحة.
   الجوال بالعرض: اللوحة تصير جانبية بطول الشاشة، والقطار ياخذ الباقي.
   ===================================================================== */
#scr-train { --ph:clamp(236px, 36vh, 300px) }
.tr-body { overscroll-behavior:contain }
.tr-body::-webkit-scrollbar { display:block; width:7px } .tr-body::-webkit-scrollbar-thumb { background:#ffd16640; border-radius:9px } .tr-body::-webkit-scrollbar-track { background:transparent }
.tr-body { scrollbar-width:thin !important }
.tr-sec { display:flex; flex-direction:column; gap:8px; min-height:0 }
.tr-bar { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap }
.tr-bar .tr-chips { margin:0 }
.tr-hint { font-size:.7rem; opacity:.55; line-height:1.5 }
.tr-cnt { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:#d9d4c7 } .tr-cnt small { opacity:.55; font-weight:400 } .tr-cnt .tri { color:var(--amber) }
.tr-bar .tr-tg { margin-inline-start:auto }
.tr-chips button { display:inline-flex; align-items:center; gap:6px }
.tr-chips button i { font-style:normal; font-size:.62rem; font-weight:900; min-width:16px; padding:0 5px; border-radius:99px; background:#ffffff12; text-align:center }
.tr-chips button.on i { background:#ffd16633; color:#ffe7b0 }
.tr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(98px, 1fr)); gap:8px; align-content:start; padding:2px }
.tr-grid.pt { grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)) }
.tr-grid.wg { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) }
.tr-grid .tr-item, .tr-grid .tr-paint, .tr-grid .tr-wag { width:auto; min-width:0 }
.tr-grid .tr-item b, .tr-grid .tr-paint b { max-width:100% }
.tr-perkbar { margin:0 }
.tr-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; margin:0; text-align:center; opacity:1; font-size:.8rem; background:#ffffff05; border:1px dashed #ffffff1c }
.tr-empty > .tri { width:28px; height:28px; color:var(--amber); opacity:.8 } .tr-empty b { color:#ffe7b0 } .tr-empty small { opacity:.6; max-width:36ch; line-height:1.6 }
.tr-empty .tr-go { margin-top:4px }
.tr-tabs button .tr-badge { position:absolute; top:-2px; inset-inline-end:2px; font-style:normal; font-size:.58rem; font-weight:900; min-width:16px; height:16px; line-height:16px; padding:0 4px; text-align:center; border-radius:99px; background:var(--amber); color:#1a1408; box-shadow:0 0 8px #ffd16688 }
/* أيقونة العملة الموحّدة (رمز #i-scrap نفسه حق الموقع) */
#scr-train .fz-cur { width:14px; height:14px; flex:none; color:var(--amber); fill:currentColor; vertical-align:-2px }
#scr-train .tr-scrap .fz-cur { width:18px; height:18px; filter:drop-shadow(0 0 6px #ffd16655) }
.tr-item.poor em .fz-cur, .tr-paint.poor em .fz-cur { color:#ff6b62 }
.tr-item.shop.full em { color:#9aa3b5; font-size:.66rem }

/* الجوال بالعرض (والشاشات القصيرة): لوحة جانبية بطول الشاشة */
@media (max-height:520px) and (orientation:landscape) {
  #scr-train { --pw:min(330px, 42vw) }
  .tr-stage { inset:50px 0 var(--trb) calc(var(--pw) + 14px); transition:left .25s ease }
  #scr-train.pcol .tr-stage { bottom:var(--trb); left:66px }
  .tr-panel { top:50px; bottom:calc(6px + var(--trb)); height:auto; right:auto; left:8px; width:var(--pw); flex-direction:row; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:width .25s ease }
  .tr-panel::before { inset:0 auto 0 0; width:3px; height:auto; background:repeating-linear-gradient(-45deg,#e8a21e 0 7px,#14151a 7px 14px) }
  .tr-panel::after { display:none }
  .tr-tabs { flex-direction:column; padding:8px 0 8px 6px; border-bottom:0; border-inline-start:0; border-left:1px solid #ffffff10; order:2 }
  .tr-tabs button { padding:9px 10px; clip-path:none; border:1px solid #ffffff10; border-left:0 }
  .tr-tabs button span { display:none !important }
  .tr-tabs button.on::after { inset:8px auto 8px 0; width:2px; height:auto }
  .tr-tabs .tr-col { margin-inline-start:0; margin-top:auto; padding:9px 10px }
  .tr-tabs .tr-col .tri { transform:rotate(-90deg) }
  #scr-train.pcol .tr-col .tri { transform:rotate(90deg) }
  #scr-train.pcol .tr-panel { transform:none; width:58px }
  #scr-train.pcol .tr-body { display:none }
  .tr-body { order:1; padding:8px 8px 10px }
  .tr-sec h4 { display:flex }
  .tr-grid { grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px }
  .tr-grid.wg { grid-template-columns:1fr }
  .tr-item b, .tr-paint b, .tr-item .own { display:block }
  .tr-it-v { height:40px } .tr-item canvas { width:44px; height:40px }
  .tr-hint { display:none }
  .tr-perkbar { font-size:.66rem } .tr-perkbar small { display:none }
  .tr-seg button { padding:5px 8px; font-size:.7rem }
}

/* ---------- جولة 68: صورة عرض اللون (برا فوق + داخل تحت) ---------- */
.tr-pcv { display:block; width:120px; height:90px; image-rendering:pixelated; border:1px solid #0009; box-shadow:0 4px 12px #0009, inset 0 0 0 1px #ffffff14; background:#06070b; margin:2px 0 4px }
.tr-paint.pc { width:132px }
.tr-sc.pc .tr-pcv { width:132px; height:99px }
@media (max-height:520px) and (orientation:landscape) { .tr-paint.pc { width:112px } .tr-paint.pc .tr-pcv { width:104px; height:78px } }
/* جولة 79: أزرار الفلترة صغيرة باللمس (22 بكسل) — نكبّر منطقة اللمس بدون ما يتغير الشكل ولا المساحة */
@media (pointer: coarse) { .tr-chips button { position: relative } .tr-chips button::after { content: ''; position: absolute; inset: -6px -3px } }