/* «رمز الخزنة»: the board. The log of the thief's failed attempts, the player's own notebook of crossed-out
   digits, and the safe's keypad. */
:root { --accent: #FFB347; }

/* the log */
.log { display: grid; gap: 8px; }
.line { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px 10px; align-items: center; }
.line .lno { width: 28px; height: 28px; border-radius: 8px; background: var(--panel2); color: var(--soft); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.line .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.digits { display: inline-flex; gap: 4px; direction: ltr; }
.dg { width: 30px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--ink); font: 800 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; }
.fb { display: inline-flex; align-items: center; gap: 4px; }
.fb small { color: var(--soft); font-weight: 700; margin-inline-start: 4px; }
.dot { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; }
.dot.p { background: var(--ok); }
.dot.w { background: var(--sun); }
.dot.n { background: transparent; border: 2px solid var(--mute); color: var(--mute); width: 16px; height: 16px; }
.line .st { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--panel2); color: var(--soft); }
.line .st.ok { background: var(--ok); color: #05301C; }
.line .st.bad { background: var(--bad); color: #3A0A0A; }
.line .mine { grid-column: 2 / 4; font-size: .88rem; font-weight: 700; color: var(--soft); }
.line.bad { border-color: #7A3B3B; }
.line.bad .mine { color: var(--bad); }
.line.ok .mine { color: var(--ok); }

/* the notebook */
.book { display: grid; grid-template-columns: 54px repeat(10, 1fr); gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; direction: ltr; }
.book .lbl { display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--soft); direction: rtl; }
.book .hd { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--bg2); font: 800 1rem/1 var(--display); color: var(--ink); border: 0; padding: 0; }
.book .bc { height: 30px; border-radius: 8px; background: var(--panel2); border: 0; padding: 0; font-weight: 800; font-size: .95rem; color: var(--soft); }
.book .x { color: var(--bad); }
.book .v { color: var(--ok); background: #16382B; }
.book .hd.x { color: var(--bad); text-decoration: line-through; }
.book .hd.v { color: var(--ok); }

/* the safe */
.safe { background: linear-gradient(180deg, #33496F, #1C2E4D); border: 1px solid #4A6690; border-radius: 22px; padding: 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .35); }
.dispRow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.disp { flex: 1; display: flex; justify-content: center; gap: 8px; background: #06101E; border: 2px solid #0B1A33; border-radius: 14px; padding: 10px; direction: ltr; box-shadow: inset 0 4px 14px rgba(0, 0, 0, .6); }
.slot { width: 44px; height: 54px; border-radius: 10px; border: 2px solid #1E3353; display: grid; place-items: center; font: 800 2rem/1 var(--display); color: var(--sun); font-variant-numeric: tabular-nums; }
.slot.cur { border-color: var(--sun); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { border-color: #1E3353; } }
.lamp { width: 18px; height: 18px; border-radius: 50%; background: #3A4D6B; box-shadow: inset 0 0 0 3px #0B1A33; flex: none; }
.lamp.red { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
.lamp.green { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.safe.open .disp { border-color: var(--ok); box-shadow: inset 0 0 20px rgba(61, 220, 151, .35); }
.safe.open .slot { color: var(--ok); }
.safe.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; direction: ltr; }
.key { min-height: 50px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #2B4166, #223656); color: var(--ink); font: 800 1.35rem/1 var(--display); box-shadow: 0 4px 0 #0E1A2E; }
.key:active { transform: translateY(2px); box-shadow: 0 2px 0 #0E1A2E; }
.key:disabled { opacity: .35; cursor: not-allowed; }
.key.fn { font-size: 1rem; background: linear-gradient(180deg, #243653, #1C2C45); color: var(--soft); }