:root { --lesson-cyan: #75efe4; --lesson-gold: #ffc766; }

.wave-lesson-card {
  position: fixed;
  left: 50%;
  top: clamp(136px, 17vh, 188px);
  z-index: 24;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 12px 16px;
  border: 1px solid rgba(117, 239, 228, .52);
  border-left: 4px solid var(--lesson-cyan);
  border-radius: 13px;
  background: linear-gradient(105deg, rgba(8, 22, 44, .95), rgba(18, 43, 64, .9));
  color: #f7fbff;
  box-shadow: 0 16px 38px rgba(2, 10, 24, .26);
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.wave-lesson-card span { display:block; color:var(--lesson-cyan); font:800 10px/1.2 system-ui,sans-serif; letter-spacing:.14em; }
.wave-lesson-card strong { display:block; margin-top:4px; color:#fff4ce; font:900 15px/1.2 system-ui,sans-serif; }
.wave-lesson-card p { margin:3px 0 0; color:#d8e6f3; font:600 12px/1.42 system-ui,sans-serif; }

.tower-exclusive-mechanic {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 10px;
  margin: 0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(117,239,228,.28);
  border-radius:10px;
  background:linear-gradient(110deg,rgba(28,68,81,.68),rgba(17,36,61,.74));
}
.tower-exclusive-mechanic span { grid-row:1/3; align-self:center; color:var(--lesson-cyan); font:900 9px/1.25 system-ui,sans-serif; letter-spacing:.1em; }
.tower-exclusive-mechanic strong { color:#fff3c4; font:800 13px/1.2 system-ui,sans-serif; }
.tower-exclusive-mechanic small { color:#d4e5ef; font:600 11px/1.35 system-ui,sans-serif; }

.result-expanded { display:grid; gap:12px; margin:12px 0 16px; }
.result-economy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.result-economy-grid span { display:grid; gap:3px; padding:9px 10px; border:1px solid rgba(152,178,207,.2); border-radius:9px; background:rgba(5,16,35,.35); }
.result-economy-grid small,.result-damage>span { color:#91a9c5; font:800 9px/1.2 system-ui,sans-serif; letter-spacing:.1em; }
.result-economy-grid strong { color:#fff8db; font:800 14px/1.2 system-ui,sans-serif; }
.result-damage { padding:10px 12px; border-radius:10px; background:rgba(5,16,35,.32); }
.result-damage ol { display:grid; gap:5px; margin:7px 0 0; padding:0; list-style:none; }
.result-damage li { display:flex; justify-content:space-between; gap:16px; color:#deebf5; font:650 12px/1.25 system-ui,sans-serif; }
.result-damage li strong { color:var(--lesson-gold); white-space:nowrap; }
.result-advice { display:flex; gap:10px; margin:0; padding:10px 12px; border-left:3px solid var(--lesson-gold); background:rgba(255,199,102,.08); color:#e7eff6; font:600 12px/1.4 system-ui,sans-serif; }
.result-advice b { color:var(--lesson-gold); white-space:nowrap; }
.settings-panel-body::after {
  content:'Public build 2026.08.24.2 · Canonical Cloudflare release';
  display:block;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid rgba(148,174,204,.18);
  color:#8ea6bf;
  font:700 10px/1.3 system-ui,sans-serif;
  letter-spacing:.06em;
}

@media (max-width: 760px) {
  .wave-lesson-card { top: 178px; width:calc(100vw - 18px); padding:9px 12px; }
  .wave-lesson-card p { font-size:11px; }
  .result-economy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .wave-lesson-card { top: 210px; }
  .tower-exclusive-mechanic { grid-template-columns:1fr; }
  .tower-exclusive-mechanic span { grid-row:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wave-lesson-card { backdrop-filter:none; }
}