/* ===== Interactive exercises for the fundamentals paths (Windows first) ===== */
.game{margin-top:15px; padding:clamp(15px,2vw,22px); border-radius:10px; background:var(--bg2); border:1px solid var(--line-strong)}
.game-hud{display:flex; justify-content:space-between; gap:9px; font-family:var(--mono); font-variant-ligatures:none; direction:ltr; font-size:.8rem; color:var(--text-dim)}
.game-hud b{color:#fff}
.brief{font-size:1.04rem; color:#fff; font-weight:500; margin-top:9px; line-height:1.75}
.g-why{margin-top:11px; font-size:.93rem; color:var(--text-dim); line-height:1.7; padding-right:11px; border-right:3px solid var(--c)}
.g-why strong{color:#fff}
.g-end{text-align:center; padding:9px 0}
.g-end b{display:block; font-family:var(--mono); font-variant-ligatures:none; font-size:2.3rem; color:#fff; line-height:1.2}
.g-end p{color:var(--text-dim); margin:4px 0 13px}
.wl-stage{margin-top:12px}
.wl-next{margin-top:11px}
.right-mark,[data-a].right{border-color:var(--green)!important; background:var(--green-dim)!important}
[data-a].wrong{border-color:var(--red)!important; background:var(--red-dim)!important}
[data-a][disabled]{cursor:default}

.wl-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:8px; margin-top:12px}
.wl-fact{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; background:var(--panel2); border:1px solid var(--line); font-size:.9rem; line-height:1.5; color:var(--text-dim)}
.wl-fact>span{font-size:1.4rem; line-height:1}
.wl-fact b{display:block; color:#fff; font-size:.93rem}

/* Mini desktop */
.wl-desk{position:relative; min-height:310px; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; background:radial-gradient(ellipse at 70% 25%,#2f7fe0,#123a78 62%,#0a2148); direction:ltr; border:1px solid var(--line-strong)}
.wl-icons{flex:1; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:12px}
.wl-ic{display:flex; flex-direction:column; align-items:center; gap:2px; width:84px; padding:7px 3px; border-radius:6px; border:1.5px solid transparent; color:#fff; font-size:.72rem; line-height:1.3; text-align:center; font-family:var(--mono); font-variant-ligatures:none; transition:background .15s}
.wl-ic:hover:not([disabled]){background:rgba(255,255,255,.16)}
.wl-ic span{font-size:1.75rem; line-height:1.15}
.wl-bar{display:flex; justify-content:center; align-items:stretch; gap:3px; padding:4px 8px; background:rgba(12,18,32,.88); flex-wrap:wrap}
.wl-bar .wl-ic{width:74px; font-size:.64rem; padding:4px 2px}
.wl-bar .wl-ic span{font-size:1.3rem}

/* Windows-style dialogs */
.wl-win{max-width:440px; margin-inline:auto; border-radius:8px; overflow:hidden; background:#f3f4f7; color:#1b1f28; direction:ltr; text-align:left; box-shadow:0 12px 28px rgba(0,0,0,.4)}
.wl-win-t{display:flex; align-items:center; gap:7px; padding:7px 12px; background:#fff; font-size:.82rem; font-weight:600; border-bottom:1px solid #dcdfe6}
.wl-win-b{padding:13px 15px; font-size:.88rem; line-height:1.55}
.wl-win-b input{width:100%; margin-top:6px; padding:5px 9px; border:1px solid #9aa2b1; border-radius:4px; font-family:var(--mono); font-variant-ligatures:none; font-size:.9rem; color:#111; background:#fff; outline:0}
.wl-win-b input:focus{border-color:#2765c9}
.wl-win-b input.bad{border-color:#d92b1c; animation:shake .35s}
.wl-win-a{display:flex; justify-content:flex-end; gap:7px; padding:9px 13px; background:#e7e9ee}
.wl-win-a button{min-width:76px; padding:4px 13px; text-align:center; border-radius:4px; border:1.5px solid #9aa2b1; background:#fff; color:#111; font-size:.84rem}
.wl-win-a button:hover:not([disabled]){border-color:#2765c9}
.wl-win-a .pri{background:#2765c9; border-color:#2765c9; color:#fff}
.wl-result{margin-top:10px; font-family:var(--mono); font-variant-ligatures:none; font-size:.8rem; line-height:1.6; white-space:pre-wrap}
.wl-uac{background:#1f5fb4; color:#fff; padding:11px 15px; font-weight:600; font-size:.92rem}
.wl-uac.warn{background:#c98512}
.wl-uac small{display:block; font-weight:400; opacity:.9; font-size:.78rem}
.wl-kv{display:grid; grid-template-columns:auto 1fr; gap:2px 13px; font-size:.84rem}
.wl-kv b{font-weight:600; color:#555b67}

/* Sort buttons */
.wl-two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wl-two button{padding:13px 9px; text-align:center; font-weight:700; background:var(--panel2); border:1.5px solid transparent; border-radius:8px; transition:border-color .15s, transform .15s}
.wl-two button:hover:not([disabled]){border-color:var(--blue); transform:translateY(-2px)}

/* Matching */
.wl-match{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:12px}
.wl-col{display:flex; flex-direction:column; gap:7px}
.wl-m{padding:9px 11px; text-align:center; border-radius:7px; background:var(--panel2); border:1.5px solid transparent; font-size:.9rem; font-weight:600; line-height:1.4; transition:border-color .15s, background .15s}
.wl-m:hover:not([disabled]){border-color:var(--blue)}
.wl-m.sel{border-color:var(--amber); background:rgba(255,194,60,.13)}
.wl-m.ok{border-color:var(--green); background:var(--green-dim); cursor:default}
.wl-m.no{border-color:var(--red); background:var(--red-dim)}
.wl-m kbd{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; unicode-bidi:isolate}
.wl-msg{margin-top:11px; font-size:.92rem; color:var(--text-dim)}

/* Explorer tree */
.wl-tree{direction:ltr; text-align:left; background:#111a2b; border:1px solid var(--line-strong); border-radius:8px; padding:9px; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem}
.wl-tree button{display:block; width:100%; text-align:left; padding:3px 8px; border-radius:5px; border:1.5px solid transparent; color:var(--text); transition:background .12s}
.wl-tree button:hover:not([disabled]){background:rgba(79,195,255,.13)}
.wl-tree .root{padding:3px 8px; color:var(--text-faint)}

/* Permissions dialog */
.wl-acl{width:100%; border-collapse:collapse}
.wl-acl button{display:flex; width:100%; justify-content:space-between; align-items:center; gap:9px; padding:6px 9px; border:1.5px solid transparent; border-radius:4px; color:#111; font-size:.86rem; text-align:left}
.wl-acl button:hover:not([disabled]){background:#dfe7f6}

/* File hunt */
.wl-tog{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:9px; font-size:.92rem}
.wl-tog label{display:flex; align-items:center; gap:7px; cursor:pointer}
.wl-files{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:7px; direction:ltr}
.wl-file{display:flex; align-items:center; gap:8px; padding:8px 10px; text-align:left; background:var(--panel2); border:1.5px solid transparent; border-radius:7px; font-family:var(--mono); font-variant-ligatures:none; font-size:.82rem; word-break:break-all; transition:border-color .15s}
.wl-file:hover:not([disabled]){border-color:var(--blue)}
.wl-file.found{border-color:var(--red); background:var(--red-dim)}
.wl-file.safe{border-color:var(--amber)}
.wl-file.hid{outline:1px dashed var(--line-strong)}
.wl-file span{font-size:1.2rem}

/* Terminal missions */
.wl-goals{display:grid; gap:5px; margin-bottom:10px; font-size:.92rem; color:var(--text-dim); list-style:none}
.wl-goals li.ok{color:var(--green)}
.wl-goals li::before{content:'○  '} .wl-goals li.ok::before{content:'✓  '}
.wl-goals code{font-family:var(--mono); font-variant-ligatures:none; direction:ltr; unicode-bidi:isolate}

/* Order exercise */
.wl-chain{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:42px; padding:7px; border:1px dashed var(--line-strong); border-radius:8px}
.wl-link{padding:5px 11px; border-radius:6px; background:var(--green-dim); color:#fff; font-size:.86rem; font-weight:600}
.wl-link:not(:last-child)::after{content:' ←'; color:var(--green)}
.wl-pool{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:7px; margin-top:10px}
.wl-pool .wl-m:disabled{opacity:.5}

/* Network diagram */
.wl-net{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; direction:ltr; padding:13px 8px; border-radius:8px; background:#111a2b; border:1px solid var(--line-strong)}
.wl-net i{font-style:normal; color:var(--text-faint)}
.wl-dev{display:flex; flex-direction:column; align-items:center; gap:2px; width:82px; padding:8px 3px; border:1.5px solid transparent; border-radius:7px; background:var(--panel2); font-family:var(--mono); font-variant-ligatures:none; font-size:.7rem; text-align:center; transition:border-color .15s}
.wl-dev:hover:not([disabled]){border-color:var(--blue)}
.wl-dev span{font-size:1.65rem; line-height:1.2}

/* Layer stack */
.wl-layers{display:grid; gap:5px; max-width:430px; margin-inline:auto; direction:ltr}
.wl-layers button{display:flex; justify-content:space-between; padding:6px 13px; border:1.5px solid transparent; border-radius:6px; background:var(--panel2); font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem; transition:border-color .15s}
.wl-layers button:hover:not([disabled]){border-color:var(--blue)}
.wl-layers b{color:var(--text-faint)}

/* Packet */
.wl-packet{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; direction:ltr; padding:12px; margin-top:11px; border-radius:8px; background:#111a2b; font-family:var(--mono); font-variant-ligatures:none; font-size:.82rem; font-weight:700}
.wl-packet span{padding:9px 12px; border-radius:5px; color:#07111c}
.wl-pdu{margin-top:7px; text-align:center; font-size:.92rem; color:var(--text-dim)}
.wl-fields{display:grid; gap:9px; direction:ltr; font-family:var(--mono); font-variant-ligatures:none}
.wl-fgroup{padding:8px; border-radius:7px; background:#111a2b; border:1px solid var(--line-strong)}
.wl-fgroup h4{font-family:var(--mono); font-size:.72rem; color:var(--text-faint); margin-bottom:5px}
.wl-fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr)); gap:5px}
.wl-fgrid button{display:flex; justify-content:space-between; gap:7px; padding:5px 9px; border:1.5px solid transparent; border-radius:5px; background:var(--panel2); font-size:.75rem; text-align:left; word-break:break-all}
.wl-fgrid button:hover:not([disabled]){border-color:var(--blue)}
.wl-fgrid b{color:var(--text-faint); font-weight:500; white-space:nowrap}

/* Code and process tables */
.wl-code{direction:ltr; text-align:left; white-space:pre-wrap; padding:11px 13px; margin-bottom:10px; border-radius:7px; background:#060a12; border:1px solid var(--line-strong); color:#bdf7dc; font-family:var(--mono); font-variant-ligatures:none; font-size:.86rem; line-height:1.7}
.wl-optgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:7px; direction:ltr}
.wl-optgrid button{padding:9px; text-align:center; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem; background:var(--panel2); border:1.5px solid transparent; border-radius:7px; white-space:pre-line}
.wl-optgrid button:hover:not([disabled]){border-color:var(--blue)}
.wl-ptable{margin-top:11px; direction:ltr; text-align:left; padding:9px 13px; border-radius:7px; background:#111a2b; font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem; white-space:pre; overflow-x:auto}

/* Clickable data tables (processes, registry values, events) */
.wl-rows{display:grid; gap:4px; direction:ltr; text-align:left; overflow-x:auto; font-family:var(--mono); font-variant-ligatures:none; font-size:.76rem}
.wl-rows button,.wl-rows .head{display:grid; grid-template-columns:var(--cols); gap:9px; align-items:center; min-width:490px; padding:6px 10px; border:1.5px solid transparent; border-radius:5px; text-align:left}
.wl-rows button{background:var(--panel2)}
.wl-rows button:hover:not([disabled]){border-color:var(--blue)}
.wl-rows .head{color:var(--text-faint)}
.wl-rules{direction:ltr; text-align:left; margin-bottom:10px; padding:9px 13px; border-radius:7px; background:#111a2b; font-family:var(--mono); font-variant-ligatures:none; font-size:.8rem; line-height:1.8; overflow-x:auto; white-space:pre}
.wl-rules .a{color:var(--green)} .wl-rules .b{color:#ff7d70}

/* Click-to-learn cards */
.wl-exp{margin-top:13px; padding:clamp(12px,2vw,17px); border-radius:10px; background:var(--bg2); border:1px solid var(--line-strong)}
.wl-tabs{display:flex; flex-wrap:wrap; gap:6px}
.wl-tab{padding:6px 13px; border-radius:7px; background:var(--panel2); font-size:.86rem; font-weight:700; transition:background .15s}
.wl-tab:hover{background:var(--panel3)}
.wl-tab.on{background:var(--red-btn); color:#fff}
.wl-panel{margin-top:11px; line-height:1.65}
.wl-panel>b{display:block; color:#fff; font-size:1.05rem}
.wl-panel dl{display:grid; grid-template-columns:auto 1fr; gap:4px 13px; margin-top:7px; font-size:.93rem}
.wl-panel dt{color:var(--text-faint); white-space:nowrap}
.wl-panel dd{color:var(--text-dim)}
@media(max-width:520px){ .wl-panel dl{grid-template-columns:1fr; gap:0} .wl-panel dd{margin-bottom:7px} }
.wl-hs{margin-top:10px; padding:10px 13px; min-height:48px; border-radius:7px; background:#111a2b; color:var(--text-dim); font-size:.93rem}

/* Binary and subnet tools */
.wl-bits{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; direction:ltr; margin-top:12px}
.wl-bit{padding:7px 0; text-align:center; border-radius:6px; background:var(--panel2); border:1.5px solid transparent; font-family:var(--mono); font-variant-ligatures:none}
.wl-bit small{display:block; color:var(--text-faint); font-size:.68rem}
.wl-bit b{font-size:1.15rem; color:var(--text-dim)}
.wl-bit.on{border-color:var(--green); background:var(--green-dim)} .wl-bit.on b{color:#fff}
.wl-big{margin-top:9px; text-align:center; font-family:var(--mono); font-variant-ligatures:none; color:var(--text-dim)}
.wl-big b{color:#fff; font-size:1.3rem}
.wl-sub{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:7px; margin-top:11px; direction:ltr; font-family:var(--mono); font-variant-ligatures:none}
.wl-sub div{padding:8px 11px; border-radius:7px; background:var(--panel2); font-size:.82rem; color:var(--text-faint)}
.wl-sub b{display:block; color:#fff; font-size:1rem; word-break:break-all}
.wl-range{width:100%; margin-top:6px; accent-color:var(--red)}
.wl-form{display:flex; gap:8px; direction:ltr}
.wl-form input{flex:1; min-width:0; padding:7px 11px; border-radius:7px; border:1px solid var(--line-strong); background:#060a12; color:#fff; font-family:var(--mono); font-variant-ligatures:none; outline:0}
.wl-form input.bad{border-color:var(--red); animation:shake .35s}

/* Script editor */
.wl-editor{display:block; width:100%; min-height:150px; margin-top:10px; padding:11px 13px; direction:ltr; text-align:left; resize:vertical; border-radius:7px; background:#060a12; border:1px solid var(--line-strong); color:#bdf7dc; font-family:var(--mono); font-variant-ligatures:none; font-size:.86rem; line-height:1.7; outline:0}
.wl-editor:focus{border-color:var(--blue)}
.wl-output{margin-top:9px; min-height:44px; padding:9px 13px; direction:ltr; text-align:left; white-space:pre-wrap; border-radius:7px; background:#111a2b; color:var(--text-dim); font-family:var(--mono); font-variant-ligatures:none; font-size:.84rem}

/* Achievement line on the completion card */
.fx-badge{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:5px 15px; border-radius:99px; background:rgba(255,194,60,.13); border:1px solid rgba(255,194,60,.45); color:#ffe29a; font-size:.9rem; font-weight:700}
@media(max-width:520px){ .wl-match{grid-template-columns:1fr 1fr; gap:6px} .wl-m{font-size:.8rem; padding:8px 5px} }