/* =====================================================================
   جولة 58ب — طرفية الأكواد (صفحة «استبدال كود»): قفل المنشأة
   فتحة الكود بزوايا تصويب · مؤشر طول الكود · قفل بكسل ينفتح لما يصح الكود ويهتز لما يغلط
   بدون الإطار الأبيض المزعج وقت الكتابة — التركيز يبان بتوهج الزوايا بلون اللعبة
   ===================================================================== */
#scr-codes .codes-page { width: min(600px, 100%) }
.cdt-wrap { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; margin: 2px auto 0 }
.cdt { --ok: #3ee08f; --bad: #ff4d5a; --amb: #ffcf9a;
  position: relative; padding: 14px 16px 12px; isolation: isolate;
  background: linear-gradient(180deg, #171a22, #0b0c10 70%);
  border: 1px solid #ffffff14; box-shadow: inset 0 1px 0 #ffffff12, 0 14px 30px #0009;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .25s }
.cdt::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, #0a0b0f 8px 16px); opacity: .9 }

/* السطر العلوي: لمبة + اسم الطرفية */
.cdt-top { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: .8rem; color: #d8d2c6 }
.cdt-top b { font-weight: 900 }
.cdt-led { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: cdtLed 1.6s steps(1) infinite }
@keyframes cdtLed { 50% { opacity: .25 } }
.cdt-id { margin-inline-start: auto; font-size: .66rem; letter-spacing: 1px; opacity: .4 }

/* الشاشة: قفل + فتحة الكود */
.cdt-screen { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--accent) 20%, #07080b), #050608 70%);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 8px 22px #000c }
.cdt-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px) }
.cdt-screen::before { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -32%; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amb) 22%, transparent), transparent) }

.cdt-lock { flex: none; width: 44px; height: 48px; display: grid; place-items: center; color: #7d8391; transition: color .3s, filter .3s }
.cdt-lock svg { width: 34px; height: 38px; overflow: visible }
.cdt-shk { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) }
.cdt:focus-within .cdt-lock { color: #b9bfcb; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)) }

.cdt-slot { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; min-height: 56px; padding: 0 12px; cursor: text;
  background: #040506; border: 1px solid #ffffff10; transition: border-color .2s, background .2s }
.cdt-br { position: absolute; width: 12px; height: 12px; border: 0 solid #ffffff38; transition: all .22s ease; pointer-events: none }
.cdt-br.a { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px } .cdt-br.b { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px }
.cdt-br.c { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px } .cdt-br.d { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px }
.cdt:focus-within .cdt-slot { background: #07080b; border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
.cdt:focus-within .cdt-br { width: 16px; height: 16px; border-color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)) }

/* الكتابة نفسها: بدون أي إطار أو ظل من الأنماط العامة */
#scr-codes .cdt .cd-in, #scr-codes .cdt .cd-in:focus, #scr-codes .cdt .cd-in:focus-visible {
  width: 100%; min-width: 0; margin: 0; padding: 10px 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; border-radius: 0;
  font: 700 1.5rem/1.2 ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; letter-spacing: .26em; text-align: center; text-transform: uppercase;
  color: var(--amb); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); caret-color: var(--accent); -webkit-tap-highlight-color: transparent }
#scr-codes .cdt .cd-in::placeholder { font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: #ffffff3d; text-shadow: none }
#scr-codes .cdt .cd-in.ar { font-family: inherit; letter-spacing: normal }
/* لما الخانة فاضية: النص العربي التوضيحي بخط اللعبة وبدون تباعد (التباعد يفكّك الحروف) */
#scr-codes .cdt .cd-in:placeholder-shown { font-family: inherit; letter-spacing: normal; text-transform: none }
#scr-codes .cdt .cd-in::selection { background: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff }

/* مؤشر الطول: خانة تولّع مع كل حرف */
.cdt-meter { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 4px; margin: 10px 2px 12px }
.cdt-meter i { background: #ffffff10; transition: background .15s, box-shadow .15s }
.cdt-meter i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent) }

/* الزر */
.cdt-go { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; overflow: hidden; cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 900; color: #fff; border: 1px solid #ff5a6655;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, #fff 8%), color-mix(in srgb, var(--accent) 60%, #000));
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 1px 0 #ffffff33, 0 0 22px -6px var(--accent); transition: filter .15s, transform .1s; -webkit-tap-highlight-color: transparent }
.cdt-go svg { width: 18px; height: 18px; transition: transform .2s }
.cdt-go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, #ffffff26 50%, transparent 60%) -200% 0 / 250% 100% no-repeat; pointer-events: none }
.cdt-go:hover { filter: brightness(1.12) } .cdt-go:hover svg { transform: translateX(-4px) } .cdt-go:hover::after { animation: cdtShine .9s ease }
@keyframes cdtShine { to { background-position: 200% 0 } }
.cdt-go:active { transform: translateY(1px) }
.cdt-go:focus { outline: none } .cdt-go:focus-visible { box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 2px #0a0b10, 0 0 0 4px color-mix(in srgb, var(--accent) 80%, #fff) }
.cdt.has .cdt-go { animation: cdtReady 2s ease-in-out infinite }
@keyframes cdtReady { 50% { box-shadow: inset 0 1px 0 #ffffff33, 0 0 30px -2px var(--accent) } }
.cdt-go:disabled { cursor: wait; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 80%, #000) 0 10px, color-mix(in srgb, var(--accent) 55%, #000) 10px 20px); background-size: 28px 28px; animation: cdtBusy .6s linear infinite }
@keyframes cdtBusy { to { background-position: 28px 0 } }

.cdt .cd-msg { min-height: 1.4em; margin: 10px 0 0; text-align: center; font-size: .9rem; font-weight: 800 }
.cdt .cd-msg.bad { color: var(--bad) } .cdt .cd-msg.good { color: var(--ok) }
.cdt-note { margin: 0; text-align: center; font-size: .78rem; opacity: .6; line-height: 1.7 }

/* الحالات: يتحقق · انفتح · غلط */
.cdt.busy .cdt-screen::before { opacity: 1; animation: cdtScan 1s linear infinite }
@keyframes cdtScan { to { left: 102% } }
.cdt.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent) }
.cdt.ok .cdt-lock { color: var(--ok); filter: drop-shadow(0 0 8px var(--ok)) }
.cdt.ok .cdt-shk { transform: translateY(-4px) }
.cdt.ok .cdt-br { border-color: var(--ok); filter: drop-shadow(0 0 4px var(--ok)) }
.cdt.ok .cdt-meter i.on, .cdt.ok .cdt-meter i { background: var(--ok); box-shadow: 0 0 6px var(--ok); transition-delay: calc(var(--i, 0) * 1ms) }
.cdt.ok .cdt-screen { animation: cdtOk .8s ease-out }
@keyframes cdtOk { 0% { box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 0 60px color-mix(in srgb, var(--ok) 60%, transparent) } 100% { box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 8px 22px #000c } }
.cdt.ok .cdt-go { background: linear-gradient(180deg, #2fbf76, #13663e); border-color: #3ee08f66; box-shadow: inset 0 1px 0 #ffffff33, 0 0 22px -6px var(--ok); animation: none }
.cdt.bad { animation: cdtShake .42s cubic-bezier(.36, .07, .19, .97) }
.cdt.bad .cdt-lock { color: var(--bad); filter: drop-shadow(0 0 8px var(--bad)) }
.cdt.bad .cdt-br { border-color: var(--bad) }
.cdt.bad .cdt-screen { animation: cdtBad .6s ease-out }
.cdt.bad .cd-msg { animation: cdtGlitch .5s steps(2) }
@keyframes cdtShake { 15%, 55% { transform: translateX(-6px) } 35%, 75% { transform: translateX(6px) } 90% { transform: translateX(-2px) } }
@keyframes cdtBad { 0% { box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 0 60px color-mix(in srgb, var(--bad) 55%, transparent) } 100% { box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 8px 22px #000c } }
@keyframes cdtGlitch { 0% { transform: translateX(3px); text-shadow: -2px 0 #2affe1 } 50% { transform: translateX(-3px); text-shadow: 2px 0 #ff2a4a } 100% { transform: none; text-shadow: none } }

/* الجوال بالعرض: أصغر عشان الصفحة كلها تبان */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-codes .codes-page { width: min(560px, 100%) !important }
  .cdt-wrap { gap: 8px }
  .cdt { padding: 10px 12px 8px }
  .cdt-top { margin: 0 0 7px; font-size: .74rem }
  .cdt-screen { padding: 8px; gap: 8px }
  .cdt-lock { width: 32px; height: 36px } .cdt-lock svg { width: 26px; height: 29px }
  .cdt-slot { min-height: 44px; padding: 0 8px }
  #scr-codes .cdt .cd-in, #scr-codes .cdt .cd-in:focus { font-size: 1.15rem; letter-spacing: .2em; padding: 7px 0 }
  .cdt-meter { margin: 7px 2px 8px; height: 3px }
  .cdt-go { padding: 9px 12px; font-size: .95rem; min-height: 0 }
  .cdt .cd-msg { margin-top: 6px; font-size: .82rem }
  .cdt-note { font-size: .7rem }
}
@media (prefers-reduced-motion: reduce) { .cdt *, .cdt { animation: none !important; transition: none !important } }