.game-cell{width:60px;height:60px;border:2px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:700;background:var(--panel2);color:var(--ink);margin:3px;cursor:pointer;transition:all .15s;user-select:none}
.game-cell.win{background:rgba(52,211,153,.25);border-color:var(--green);color:var(--green);box-shadow:0 0 18px rgba(52,211,153,.4)}
.game-cell.lose{background:rgba(248,113,113,.15);border-color:var(--red);color:var(--red)}
.game-cell.cur{background:rgba(34,211,238,.25);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(34,211,238,.4);transform:scale(1.05)}
.game-cell.min{background:rgba(167,139,250,.2);border-color:var(--violet);color:var(--violet)}
.game-cell.max{background:rgba(252,211,77,.2);border-color:var(--amber);color:var(--amber)}
.game-cell:hover{transform:scale(1.05)}
.dijkstra-node{position:absolute;width:64px;height:64px;border-radius:50%;background:var(--panel2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:700;color:var(--ink);transform:translate(-50%,-50%);transition:all .3s}
.dijkstra-node.start{background:var(--cyan);color:#04222b;border-color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.5)}
.dijkstra-node.end{background:var(--amber);color:#04222b;border-color:var(--amber);box-shadow:0 0 18px rgba(252,211,77,.5)}
.dijkstra-node.visited{background:rgba(52,211,153,.3);border-color:var(--green);color:var(--green)}
.dijkstra-node.current{background:var(--amber);color:#04222b;border-color:var(--amber);transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 24px rgba(252,211,77,.6)}
.dijkstra-edge{stroke:var(--line);stroke-width:2;fill:none}
.dijkstra-edge.in-path{stroke:var(--cyan);stroke-width:3;fill:none;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
.dijkstra-label{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--muted);text-anchor:middle}
.dijkstra-canvas{width:100%;height:480px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;display:block;position:relative}
.tnode{padding:8px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;display:inline-block;margin:4px;font-family:"JetBrains Mono",monospace;font-size:14px;min-width:50px;text-align:center}
.tnode.cur{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,.1)}
.tnode.lose{color:var(--red);background:rgba(248,113,113,.1);border-color:var(--red)}
.tnode.win{color:var(--green);background:rgba(52,211,153,.1);border-color:var(--green)}
.tresult-tag{display:inline-block;padding:3px 10px;border-radius:5px;font-family:"JetBrains Mono",monospace;font-size:11px;margin-left:6px}
.tag-min{background:rgba(167,139,250,.2);color:var(--violet);border:1px solid var(--violet)}
.tag-max{background:rgba(252,211,77,.2);color:var(--amber);border:1px solid var(--amber)}
.tag-equal{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.tree-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line)}
.tree-row:last-child{border-bottom:none}
.tree-label{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);min-width:60px}

/* Animations */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes glow{0%,100%{box-shadow:0 0 8px rgba(34,211,238,.3)}50%{box-shadow:0 0 20px rgba(34,211,238,.6)}}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.animate-pulse{pulse:animation;pulse-duration:1.5s;pulse-iteration-count:infinite}
.animate-glow{animation:glow 2s ease-in-out infinite}
.animate-slide{animation:slideIn .4s ease-out}
.animate-fade{animation:fadeIn .3s ease-out}
.animate-bounce{animation:bounce .6s ease-in-out}

/* XP Bar Animation */
.xp-bar{position:relative;overflow:hidden}
.xp-bar::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 2s infinite}

/* Quest Progress */
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .5s ease-out;border-radius:4px}

/* Mini-test animations */
.result-box.ok{background:rgba(52,211,153,.15);border:1px solid var(--green);color:var(--green);padding:10px 14px;border-radius:8px;margin-top:10px}
.result-box.fail{background:rgba(248,113,113,.15);border:1px solid var(--red);color:var(--red);padding:10px 14px;border-radius:8px;margin-top:10px}

/* Quest box */
.quest{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.quest-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:10px;background:var(--bg2);border-radius:8px}
.quest-bar .xp{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--amber);font-weight:600}
.quest-bar .prog{flex:1;margin:0 14px;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.quest-body{min-height:100px}

/* Test question styles */
.test-q{transition:all .2s ease}
.test-q label{display:block;padding:10px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.test-q label:hover{background:var(--panel);border-color:var(--cyan)}
.test-q label.right{background:rgba(52,211,153,.2);border-color:var(--green);color:var(--green)}
.test-q label.bad{background:rgba(248,113,113,.2);border-color:var(--red);color:var(--red)}
.ans input[type=radio]{margin-right:10px}

/* Info card for tasks */
.info-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.info-card h4{margin:0 0 10px;color:var(--cyan)}

/* Callout styles */
.callout{padding:14px 16px;border-radius:10px;margin:14px 0}
.callout.cyan{background:rgba(34,211,238,.1);border-left:3px solid var(--cyan)}
.callout.green{background:rgba(52,211,153,.1);border-left:3px solid var(--green)}
.callout.amber{background:rgba(252,211,77,.1);border-left:3px solid var(--amber)}
.callout.red{background:rgba(248,113,113,.1);border-left:3px solid var(--red)}
.callout.violet{background:rgba(167,139,250,.1);border-left:3px solid var(--violet)}
.callout .ct{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;color:var(--muted)}

/* Button styles */
.btn-c{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 16px;color:var(--ink);font-family:Manrope,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-c:hover{background:var(--panel);border-color:var(--cyan);transform:translateY(-1px)}
.btn-c.primary{background:var(--cyan);border-color:var(--cyan);color:#04222b}
.btn-c.primary:hover{background:#1bb8d4;border-color:#1bb8d4}

/* Interactive option */
.iv-opt{padding:8px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:all .15s;font-size:13px}
.iv-opt:hover,.iv-opt.sel{background:var(--panel);border-color:var(--cyan);color:var(--cyan)}

/* Section styles */
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--cyan)}
.sec-head h2{margin:0;font-size:20px;font-weight:700}

/* Theory block */
.theory-block{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.theory-block h4{margin:0 0 10px;color:var(--amber)}

/* Badges */
.badge,.b{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}
.b.fgos{background:rgba(34,211,238,.15);color:var(--cyan);border:1px solid var(--cyan)}
.b.fop{background:rgba(167,139,250,.15);color:var(--violet);border:1px solid var(--violet)}
.b.exam{background:rgba(252,211,77,.15);color:var(--amber);border:1px solid var(--amber)}

/* Grid layouts */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.agrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}

/* Card link */
.card-link{display:block;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:all .2s}
.card-link:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cl-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);margin-bottom:6px}
.cl-title{font-size:16px;font-weight:700;margin-bottom:8px}
.cl-desc{font-size:13px;color:var(--muted);line-height:1.5}
.card-sm{padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}

/* Code box */
.code-box{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6}

/* Result box */
.result-box{padding:12px 16px;border-radius:8px;font-weight:600;margin-top:10px}

/* Intro block */
.intro{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:24px}
.intro .hook{font-size:16px;line-height:1.7;margin:0 0 14px}
.intro .badges{display:flex;gap:8px;flex-wrap:wrap}