/* Page-specific styles */
body { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; background: #fff; color: #2a2a2a; min-height: 100vh; overflow-x: hidden; }
html.tutorial-loading body { visibility: hidden; }
html.tutorial-loading #cft-intro, html.tutorial-loading #cft-intro * { visibility: visible; }
html.tutorial-loading { background: #0d0a1a; }

/* ===== LOBBY COLORS (green/light — matches FuzzNet) ===== */
#lobby { flex-direction: column; align-items: center; overflow-y: auto; min-height: calc(100vh - 44px); padding: 0 20px 52px; background: linear-gradient(160deg, #f8faf2 0%, #edf2e0 100%); }
.lobby-hero { grid-template-columns: 220px 1fr; }
.lobby-hero-board { width: 220px; height: 220px; border-radius: 16px; box-shadow: 0 8px 32px rgba(98,181,23,0.2), 0 0 0 1px rgba(98,181,23,0.12); flex-shrink: 0; background: #fafdf2; }
#lobby h1 { font-size: 42px; color: #62b517; letter-spacing: 2px; font-weight: 800; margin: 0; line-height: 1.1; }
#lobby .subtitle { font-size: 15px; color: #555; margin: 0; line-height: 1.55; }
.lobby-meta-item { background: #f0f7e6; border: 1px solid #a8c96a; color: #4a8c11; }
.lobby-tutorial-cta { background: linear-gradient(135deg, #62b517 0%, #4a8e10 100%); color: #fff; box-shadow: 0 4px 18px rgba(98,181,23,0.32); }
.lobby-tutorial-cta:hover { box-shadow: 0 6px 24px rgba(98,181,23,0.48); }
.lobby-section-head::before, .lobby-section-head::after { background: linear-gradient(to right, transparent, rgba(98,181,23,0.35), transparent); }
.lobby-section-label { color: #62b517; }
.lo-strip { border: 1px solid #dde8c8; background: #fff; }
.lo-item { background: #fff; border-right: 1px solid #edf2e4; }
.lo-item-icon { background: #f4fae8; border: 1.5px solid #a8c96a; color: #62b517; font-size: 22px; }
.lo-item-title { color: #2a3a10; }
.lo-item-desc { color: #777; }
.lobby-card { background: #fff; border: 1.5px solid #dde8c8; box-shadow: 0 2px 16px rgba(98,181,23,0.08); }
.lobby-card h3 { color: #4a8c11; }
.lobby-card .card-desc { color: #888; }
@keyframes invitedPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(98,181,23,0.45), 0 0 22px rgba(98,181,23,0.18), 0 4px 16px rgba(98,181,23,0.1); } 50% { box-shadow: 0 0 0 2px rgba(98,181,23,0.75), 0 0 38px rgba(98,181,23,0.32), 0 4px 16px rgba(98,181,23,0.18); } }
.lobby-card.lobby-card-focus { border-color: #62b517; background: linear-gradient(180deg, #f0fae4 0%, #fff 100%); animation: invitedPulse 2.6s ease-in-out infinite; }
.lobby-card.lobby-card-focus::before { background: #62b517; box-shadow: 0 4px 12px rgba(98,181,23,0.4); }
.invited-banner { background: linear-gradient(135deg, rgba(98,181,23,0.1) 0%, rgba(209,219,36,0.06) 100%); border: 1.5px solid rgba(98,181,23,0.4); box-shadow: 0 4px 16px rgba(98,181,23,0.12); }
.invited-banner-icon { background: rgba(98,181,23,0.12); border: 1px solid rgba(98,181,23,0.35); color: #4a8c11; }
.invited-banner-title { color: #2a3a10; }
.invited-banner-sub { color: #777; }
.invited-banner-code { color: #4a8c11; }
.invited-banner-arrow { color: #62b517; }
.btn-create { background: #62b517; color: white; }
.btn-join { background: #f0f7e6; color: #4a8c11; border: 1.5px solid #a8c96a; }
.btn-join:hover:not(:disabled) { background: #e2f3cc; border-color: #62b517; }
.lobby-input { background: #f8f7f4; border-color: #ccc; color: #333; }
.lobby-input::placeholder { color: #aaa; }
.lobby-input:focus { border-color: #62b517; }
.role-section-label { color: #888; }
.role-section-label::after { background: #e3e7d6; }
.player-role-box { border-color: #dde8c8; background: #fff; }
.player-role-box.active { border-color: #62b517; background: #fafdf2; }
.player-role-box:hover { border-color: #a8c96a; }
.player-role-box .role-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #62b517; margin-bottom: 6px; }
.color-btn.selected { border-color: #d1db24; box-shadow: 0 0 0 3px rgba(209,219,36,0.3); }
.observer-role-btn { background: #f8faf2; border-color: #dde8c8; color: #777; margin-bottom: 4px; }
.observer-role-btn:hover:not(:disabled) { border-color: #22d3ee; color: #0e7490; background: #ecfeff; }
.observer-role-btn.selected { border-color: #22d3ee; background: #ecfeff; color: #0e7490; box-shadow: 0 0 0 1px rgba(34,211,238,0.25), inset 0 0 12px rgba(34,211,238,0.08); }
.obs-role-title { color: #4a8c11; }
.obs-role-sub { color: #999; }
.observer-role-btn.selected .obs-role-sub { color: #0891b2; }
.obs-role-check { border-color: #cfd6c0; }
.observer-role-btn.selected .obs-role-check { background: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,0.4); }
.error-msg { color: #d44; }
.rules-banner { background: #f4fae8; border-color: #dde8c8; color: #555; }
.rules-banner a { color: #62b517; }
.obs-eye-icon { color: #22d3ee; filter: drop-shadow(0 0 3px rgba(34,211,238,0.45)); }
#observer-banner { background: linear-gradient(180deg, rgba(207,250,254,0.96), rgba(186,230,253,0.96)); border-bottom: 2px solid #22d3ee; box-shadow: 0 2px 10px rgba(34,211,238,0.2); color: #0e7490; }
#observer-banner .obs-pill { background: rgba(34,211,238,0.15); border: 1px solid rgba(34,211,238,0.5); color: #0e7490; }
.waiting-observer-section { max-width: 380px; }
.waiting-observer-label { color: #0891b2; }
.waiting-observer-row { background: #ecfeff; border-color: rgba(34,211,238,0.3); }
.waiting-observer-row .obs-name { color: #0e7490; }
.obs-host-badge { color: #c90; }
@media (max-width: 780px) {
  .lobby-hero { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .lobby-hero-board { margin: 0 auto; }
  #lobby h1 { font-size: 34px; }
  .lo-item:nth-child(1), .lo-item:nth-child(2) { border-bottom: 1px solid #edf2e4; }
}
@media (max-width: 480px) { #lobby h1 { font-size: 28px; } }


/* ===== WAITING ROOM (green/light — matches FuzzNet) ===== */
#waiting{flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 44px);padding:20px;background:linear-gradient(160deg, #f8faf2 0%, #edf2e0 100%);gap:16px;}
.room-code-display{font-size:52px;font-weight:800;letter-spacing:12px;color:#62b517;font-family:monospace;background:#fff;padding:16px 36px;border-radius:14px;border:2px solid #a8c96a;user-select:all;box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.room-share{display:flex;gap:8px;align-items:center;margin-top:4px;}
.copy-btn{padding:8px 16px;font-size:13px;font-weight:700;border:1px solid #a8c96a;border-radius:8px;background:#fff;color:#62b517;cursor:pointer;font-family:inherit;transition:all 0.15s;}
.copy-btn:hover{background:#f4fae8;border-color:#62b517;}
.copy-btn.copied{background:#62b517;color:#fff;}
.room-hint{font-size:14px;color:#888;}
.rules-banner{background:#f4fae8;border:1px solid #dde8c8;border-radius:8px;padding:10px 18px;font-size:13px;color:#555;max-width:400px;text-align:center;}
.rules-banner a{color:#62b517;font-weight:700;}
.player-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px;}
.player-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid #dde8c8;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.player-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;}
.player-name{font-size:14px;font-weight:700;flex:1;color:#2a3a10;}
.player-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;background:#f0f7e6;color:#4a8c11;}
.bot-badge{background:#555;color:#fff;}
.player-item.disconnected{opacity:0.45;}
.waiting-observer-section{width:100%;max-width:380px;}
.waiting-observer-label{font-size:12px;font-weight:800;color:#0891b2;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.waiting-observer-list{display:flex;flex-direction:column;gap:6px;}
.waiting-observer-row{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#ecfeff;border-radius:8px;border:1px solid rgba(34,211,238,0.3);margin-bottom:5px;}
.waiting-observer-row .obs-name{font-size:14px;color:#0e7490;flex:1;font-weight:600;}
.obs-host-badge{font-size:10px;color:#c90;font-weight:700;}
.bot-toggle{padding:10px 20px;font-size:14px;font-weight:600;border:2px dashed #aaa;border-radius:8px;background:transparent;color:#666;cursor:pointer;font-family:inherit;transition:all 0.15s;min-width:240px;}
.bot-toggle:hover{border-color:#62b517;color:#62b517;background:#f4fae8;}
.bot-toggle.active{border-color:#62b517;border-style:solid;color:#62b517;background:#f4fae8;}
.waiting-actions{display:flex;gap:10px;}
.waiting-actions button{padding:12px 28px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.15s;border:none;}
#btn-start-game{background:#62b517;color:#fff;box-shadow:0 4px 16px rgba(98,181,23,0.32);}
#btn-start-game:hover:not(:disabled){filter:brightness(1.06);}
#btn-start-game:disabled{opacity:0.4;cursor:not-allowed;}
#btn-leave{background:#dde8c8;color:#777;}
#btn-leave:hover{background:#d0cdc6;color:#555;}

/* ===== GAME SCREEN ===== */
#game{flex-direction:column;height:calc(100vh - 44px);background:#0d0a1a;overflow:hidden;}
#cancel-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;align-items:center;justify-content:center;}
#cancel-modal.show{display:flex;}
.cancel-card{background:#1a1030;border:1.5px solid rgba(124,58,237,0.4);border-radius:16px;padding:28px;max-width:360px;width:100%;text-align:center;}
.cancel-card h3{color:#c4b5fd;font-size:18px;margin-bottom:12px;}
.cancel-card p{color:#9d8ec4;font-size:13px;margin-bottom:20px;}
.cancel-btns{display:flex;gap:10px;justify-content:center;}
.cancel-btns button{padding:10px 22px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;border:none;}
#btn-confirm-cancel{background:#f87171;color:#fff;}
#btn-dismiss-cancel{background:rgba(255,255,255,0.08);color:#9d8ec4;}
.game-body{display:flex;flex:1;overflow:hidden;}
#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-width:0;position:relative;}
#game-canvas{max-width:100%;max-height:100%;cursor:crosshair;touch-action:none;display:block;}
#side-panel{width:260px;flex-shrink:0;background:#110d20;border-left:1px solid rgba(124,58,237,0.15);display:flex;flex-direction:column;overflow-y:auto;}
/* Side-panel top header: room code + end game */
#sp-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 7px;border-bottom:1px solid rgba(124,58,237,0.18);flex-shrink:0;}
.sp-room-code{font-family:monospace;font-size:12px;font-weight:900;color:#a78bfa;letter-spacing:2px;padding:2px 8px;background:rgba(124,58,237,0.12);border-radius:5px;}
#btn-end-game{display:none;padding:3px 10px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:#f87171;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.15s;}
#btn-end-game:hover{background:rgba(248,113,113,0.2);}
.sp-section{margin-bottom:14px;padding:10px 12px 0;}
.sp-title{font-size:11px;font-weight:800;color:#7c5cbf;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;}
.player-score-row{margin-bottom:10px;padding:8px 10px;background:#1a1030;border-radius:8px;border:1px solid rgba(124,58,237,0.15);transition:border-color 0.2s,box-shadow 0.2s;}
@keyframes turnPulse{0%,100%{box-shadow:0 0 0 1.5px rgba(167,139,250,0.45),0 0 10px rgba(124,58,237,0.2);}50%{box-shadow:0 0 0 2.5px rgba(167,139,250,0.85),0 0 18px rgba(124,58,237,0.45);}}
.player-score-row.active-player{border-color:#a78bfa;background:rgba(124,58,237,0.09);animation:turnPulse 1.9s ease-in-out infinite;}
.turn-badge{font-size:9px;font-weight:900;padding:1px 6px;background:rgba(167,139,250,0.18);border:1px solid rgba(167,139,250,0.5);border-radius:3px;color:#c4b5fd;letter-spacing:0.6px;text-transform:uppercase;white-space:nowrap;}
.psr-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.psr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.psr-name{font-size:12px;font-weight:800;color:#c4b5fd;flex:1;}
.psr-badge{font-size:10px;color:#a78bfa;font-weight:700;}
.animal-bars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;}
.animal-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
.animal-label{font-size:9px;color:#6b5ea8;font-weight:700;letter-spacing:0.3px;line-height:1;}
.animal-icon-img{width:14px;height:14px;object-fit:contain;display:block;}
.animal-bar-bg{width:100%;height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;position:relative;}
.animal-bar-fill{height:100%;border-radius:4px;transition:width 0.4s;min-width:0;}
.animal-val{font-size:9px;color:#9d8ec4;font-weight:700;}
.animal-bar-wrap.complete .animal-label{color:#6ee7b7;}
.animal-bar-wrap.complete .animal-val{color:#6ee7b7;}
.doubled-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);border-radius:6px;font-size:11px;font-weight:700;color:#fbbf24;margin-bottom:6px;}
.round-schedule{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;}
.rs-row{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:700;transition:all 0.2s;}
.rs-row.rs-past{opacity:0.35;}
.rs-row.rs-current{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.4);color:#fde68a;}
.rs-row.rs-future{color:#9d8ec4;border:1px solid transparent;}
.rs-round-num{font-size:10px;color:#6b5ea8;font-weight:800;min-width:22px;}
.rs-row.rs-current .rs-round-num{color:#fbbf24;}
.rs-x2{margin-left:auto;font-size:10px;opacity:0.7;}
.action-btns{display:flex;flex-direction:column;gap:8px;min-height:100px;}
.action-btn{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;border:2px solid transparent;transition:all 0.15s;text-align:left;display:flex;align-items:center;gap:8px;}
.action-btn:disabled{opacity:0.3;cursor:not-allowed;}
.action-btn.selected{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,0.2);}
.btn-sample{background:rgba(251,191,36,0.1);color:#fbbf24;border-color:rgba(251,191,36,0.25);}
.flick-counter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.flick-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(124,58,237,0.4);transition:all 0.2s;}
.flick-dot.used{background:#7c3aed;border-color:#7c3aed;}
/* Fixed-height status area so Confidence Scores never shift position */
#flick-ready-label{height:28px;display:flex;align-items:center;justify-content:center;visibility:hidden;}
#flick-ready-label.visible{visibility:visible;}
.status-hint{font-size:12px;color:#6b5ea8;line-height:1.5;padding:8px 10px;background:#100d1e;border-radius:6px;height:54px;overflow:hidden;}
/* Top section never shrinks; scores section fills remaining space and scrolls */
#sp-top-section{flex-shrink:0;}
#sp-scores-section{flex:1;overflow-y:auto;min-height:0;padding-bottom:8px;}
#status-bar{height:36px;background:#110d20;border-top:1px solid rgba(124,58,237,0.15);display:flex;align-items:center;padding:0 16px;font-size:13px;color:#9d8ec4;flex-shrink:0;}

/* Observer banner */
#observer-banner{display:none;background:rgba(6,182,212,0.08);border-bottom:1px solid rgba(6,182,212,0.25);padding:6px 16px;align-items:center;gap:10px;font-size:12px;color:#22d3ee;font-weight:700;flex-shrink:0;}

/* ===== INFO OVERLAY ===== */
#info-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:190;align-items:center;justify-content:center;}
#info-overlay.show{display:flex;}
#info-card{background:#1a1030;border:1.5px solid rgba(124,58,237,0.4);border-radius:14px;padding:24px;max-width:420px;width:calc(100% - 32px);max-height:80vh;overflow-y:auto;position:relative;}
.info-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#7c5cbf;font-size:20px;cursor:pointer;font-family:inherit;}
#info-title{font-size:18px;font-weight:800;color:#c4b5fd;margin-bottom:12px;}
#info-body{font-size:13px;color:#9d8ec4;line-height:1.65;}
#info-body strong{color:#c4b5fd;}
#info-body ul{padding-left:18px;margin-top:6px;}
#info-body li{margin-bottom:5px;}

/* ===== GAME OVER ===== */
#gameover{flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 44px);background:#0d0a1a;gap:20px;padding:32px;}
#gameover h2{font-size:36px;color:#a78bfa;font-weight:800;letter-spacing:2px;}
.go-winner{font-size:18px;font-weight:700;color:#c4b5fd;}
.final-scores{width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px;}
.final-score-row{background:#120e22;border:1.5px solid rgba(124,58,237,0.25);border-radius:12px;padding:14px 18px;}
.final-score-row.winner{border-color:#a78bfa;background:rgba(124,58,237,0.08);}
.fsr-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.fsr-dot{width:16px;height:16px;border-radius:50%;}
.fsr-name{font-size:15px;font-weight:800;color:#c4b5fd;flex:1;}
.fsr-trophy{font-size:20px;}
.fsr-animals{display:flex;gap:6px;flex-wrap:wrap;}
.fsr-animal{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;}
.fsr-animal.complete{background:rgba(110,231,183,0.12);color:#6ee7b7;border:1px solid rgba(110,231,183,0.3);}
.fsr-animal.partial{background:rgba(124,58,237,0.1);color:#a78bfa;border:1px solid rgba(124,58,237,0.25);}
.go-btns{display:flex;gap:12px;}
#play-again-btn{padding:12px 28px;background:#7c3aed;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(124,58,237,0.4);}
#play-again-btn:hover{filter:brightness(1.1);}

/* ===== TOAST ===== */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1a1030;border:1px solid rgba(124,58,237,0.4);border-radius:10px;padding:10px 20px;font-size:14px;color:#c4b5fd;z-index:300;pointer-events:none;opacity:0;transition:opacity 0.25s;box-shadow:0 4px 20px rgba(0,0,0,0.5);}
#toast.show{opacity:1;}

/* ===== HTP (How-to-Play) panel ===== */
#htp-panel{position:absolute;top:10px;right:10px;z-index:80;background:#1a1030;border:1.5px solid rgba(124,58,237,0.35);border-radius:10px;width:220px;box-shadow:0 4px 20px rgba(0,0,0,0.5);}
#htp-toggle{width:100%;padding:8px 12px;background:none;border:none;color:#a78bfa;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:6px;}
#htp-body{display:none;padding:0 12px 10px;font-size:11px;color:#9d8ec4;line-height:1.6;}
#htp-body.open{display:block;}
#htp-body strong{color:#c4b5fd;}

/* Observer-specific layout */
body.observer-active #side-panel .action-btns{pointer-events:none;opacity:0.5;}

@media(max-width:700px){
  #side-panel{display:none;}
  #game{flex-direction:column;}
  #game-canvas{width:100%;height:auto;}
}

/* ===== ROUND-END SCORING ANIMATION ===== */
.score-fly{
  position:fixed;
  pointer-events:none;
  font-size:15px;
  font-weight:900;
  z-index:500;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  will-change:left,top,opacity,font-size;
  line-height:1;
  text-align:center;
  letter-spacing:0.3px;
}
.score-fly.doubled{color:#fbbf24!important;text-shadow:0 0 14px rgba(251,191,36,0.95),0 0 28px rgba(251,191,36,0.5),0 1px 4px rgba(0,0,0,0.95)!important;}
.score-fly.flying{
  transition:left 0.8s cubic-bezier(0.4,0,0.2,1),
             top 0.8s cubic-bezier(0.4,0,0.2,1),
             opacity 0.6s ease 0.25s,
             font-size 0.8s ease;
  opacity:0;
  font-size:7px;
}
@keyframes barFlash{
  0%{filter:brightness(1);}
  35%{filter:brightness(3.5) drop-shadow(0 0 6px rgba(251,191,36,0.95));}
  100%{filter:brightness(1);}
}
.animal-bar-wrap.bar-flash .animal-bar-fill{
  animation:barFlash 0.8s ease-out;
}

/* =====================================================================
   TUTORIAL — TWO-PHASE SYSTEM
   Phase 1: Full-screen concept intro overlay  (like Byte Club bc-tut-intro)
   Phase 2: Fixed sidebar during game          (like Byte Club bc-tut-panel)
   ===================================================================== */

/* ---------- INTRO OVERLAY ---------- */
#cft-intro{display:none;position:fixed;inset:0;background:rgba(5,3,15,0.97);z-index:500;align-items:center;justify-content:center;padding:24px;}
body.cft-intro-active #cft-intro{display:flex;}
#cft-intro-card{background:#110d24;border:1.5px solid rgba(124,58,237,0.5);border-radius:16px;padding:36px 40px 28px;max-width:860px;width:100%;max-height:calc(100vh - 48px);overflow-y:auto;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 64px rgba(0,0,0,0.92);}
.cfti-header{display:flex;flex-direction:column;gap:8px;}
.cfti-label{font-size:10px;font-weight:700;color:#4b3a6e;text-transform:uppercase;letter-spacing:1.2px;}
.cfti-progress{width:100%;height:4px;background:rgba(124,58,237,0.18);border-radius:4px;overflow:hidden;}
#cfti-prog-fill{height:100%;background:#7c3aed;border-radius:4px;transition:width 0.35s;}
#cfti-title{font-size:24px;font-weight:900;color:#a78bfa;line-height:1.2;margin-top:2px;}
#cfti-body{font-size:14px;color:#9d8ec4;line-height:1.75;flex:1;}
#cfti-body strong{color:#e8e0ff;}
#cfti-body em{color:#c4b5fd;font-style:normal;font-weight:700;}
#cfti-body p{margin-bottom:12px;}
#cfti-body p:last-child{margin-bottom:0;}
.cfti-footer{display:flex;justify-content:space-between;align-items:center;padding-top:4px;}
#cfti-exit{padding:7px 16px;border:1px solid rgba(124,58,237,0.25);border-radius:7px;background:transparent;color:#4b3a6e;font-size:12px;cursor:pointer;font-family:inherit;transition:all 0.12s;}
#cfti-exit:hover{color:#9d8ec4;border-color:rgba(124,58,237,0.5);}
#cfti-next{padding:12px 32px;background:#7c3aed;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter 0.12s;box-shadow:0 4px 16px rgba(124,58,237,0.4);}
#cfti-next:hover{filter:brightness(1.12);}

/* Two-column layout */
.cfti-two-col{display:flex;gap:28px;align-items:flex-start;margin:8px 0;}
.cfti-left{flex:0 0 42%;font-size:14px;line-height:1.75;}
.cfti-right{flex:1;min-width:0;}
@media(max-width:640px){.cfti-two-col{flex-direction:column;}.cfti-left{flex:none;width:100%;}}

/* Compare boxes */
.cfti-compare-box{display:flex;gap:14px;margin:14px 0;}
.cfti-compare-side{flex:1;border-radius:10px;padding:14px 16px;}
.cfti-compare-side.knn{background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.4);}
.cfti-compare-side.nn{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.3);}
.cfti-compare-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:6px;}
.cfti-compare-side.knn .cfti-compare-label{color:#a78bfa;}
.cfti-compare-side.nn  .cfti-compare-label{color:#60a5fa;}
.cfti-compare-text{font-size:12px;color:#9d8ec4;line-height:1.6;}
.cfti-compare-text strong{color:#e8e0ff;}

/* Concept row (icon + label) */
.cfti-concept-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
.cfti-concept-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.3);border-radius:8px;font-size:13px;color:#c4b5fd;font-weight:700;}
.cfti-concept-chip .ci{font-size:18px;}

/* Game map (phase 1 → game mapping) */
.cfti-map{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.cfti-map-row{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#1a1030;border:1px solid rgba(124,58,237,0.25);border-radius:8px;font-size:13px;}
.cfti-map-left{font-weight:800;color:#a78bfa;min-width:140px;flex-shrink:0;}
.cfti-map-arrow{color:#4b3a6e;flex-shrink:0;}
.cfti-map-right{color:#9d8ec4;}

/* ---------- GAME SIDEBAR ---------- */
#cft-panel{display:none;position:fixed;top:44px;right:0;bottom:0;width:272px;z-index:310;background:#110d24;border-left:2px solid #7c3aed;padding:14px 16px 16px;flex-direction:column;gap:12px;box-shadow:-4px 0 28px rgba(0,0,0,0.7);overflow-y:auto;}
body.cft-panel-active #cft-panel{display:flex;}
body.cft-panel-active .game-body{padding-right:272px;}
/* Tutorial loading overlay */
#cft-loading{display:none;position:fixed;inset:0;background:rgba(5,3,15,0.97);z-index:490;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;}
body.cft-loading-active #cft-loading{display:flex;}
.cft-loading-spinner{width:40px;height:40px;border:3px solid rgba(124,58,237,0.2);border-top-color:#7c3aed;border-radius:50%;animation:cft-spin 0.8s linear infinite;}
@keyframes cft-spin{to{transform:rotate(360deg);}}
.cft-header{display:flex;flex-direction:column;gap:6px;}
#cft-step-label{font-size:10px;font-weight:700;color:#4b3a6e;text-transform:uppercase;letter-spacing:1px;}
.cft-progress{width:100%;height:4px;background:rgba(124,58,237,0.18);border-radius:4px;overflow:hidden;}
#cft-prog-fill{height:100%;background:#7c3aed;border-radius:4px;transition:width 0.3s;}
#cft-title{font-size:14px;font-weight:800;color:#a78bfa;line-height:1.3;}
#cft-body{font-size:12px;color:#9d8ec4;line-height:1.6;flex:1;overflow-y:auto;}
#cft-body strong{color:#e8e0ff;}
#cft-body em{color:#c4b5fd;font-style:normal;font-weight:700;}
#cft-body p{margin-bottom:8px;}
#cft-body p:last-child{margin-bottom:0;}
#cft-body ul{padding-left:14px;margin:4px 0;}
#cft-body li{margin-bottom:4px;}
.cft-footer{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px;}
#cft-hint{font-size:11px;color:#4b3a6e;line-height:1.4;min-height:16px;}
#cft-hint em{color:#a78bfa;}
#cft-exit{padding:6px 12px;border:1px solid rgba(124,58,237,0.25);border-radius:7px;background:transparent;color:#4b3a6e;font-size:11px;cursor:pointer;font-family:inherit;text-align:center;transition:all 0.12s;}
#cft-exit:hover{background:rgba(124,58,237,0.1);color:#9d8ec4;}
#cft-next{padding:9px 18px;background:#7c3aed;color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;text-align:center;box-shadow:0 3px 12px rgba(124,58,237,0.35);}
#cft-next:hover{filter:brightness(1.1);}

/* Tutorial glow highlight */
@keyframes cft-pulse{
  0%,100%{outline-color:#a78bfa;box-shadow:0 0 0 2px #a78bfa,0 0 12px 4px rgba(167,139,250,0.45);}
  50%{outline-color:#c4b5fd;box-shadow:0 0 0 3px #c4b5fd,0 0 22px 8px rgba(196,181,253,0.5);}
}
.cft-glow{outline:2px solid #a78bfa !important;outline-offset:3px;animation:cft-pulse 1.1s ease-in-out infinite !important;border-radius:6px;}

@media(max-width:700px){
  #cft-panel{top:auto;bottom:0;left:0;right:0;width:auto;height:auto;max-height:46vh;border-left:none;border-top:2px solid #7c3aed;box-shadow:0 -4px 24px rgba(0,0,0,0.65);}
  body.cft-panel-active #side-panel{display:none;}
}


/* Nav switches to purple when the game (or gameover) screen is active */
body:has(#game.screen.active),
body:has(#gameover.screen.active) {
  --gn-bg: rgba(13,10,26,0.95);
  --gn-border: #7c3aed;
  --gn-shadow: 0 1px 12px rgba(124,58,237,0.3);
  --gn-link: #a78bfa;
  --gn-link-hover: rgba(124,58,237,0.15);
  --gn-divider: #4b3a6e;
  --gn-current: #7c5cbf;
}