/* Interactive, rounded selections on every page except the home breaker panel */
:root { --gold1: #FFD23A; --gold2: #FF9D00; --navy: #0A1A3D; }
.course-card, .rec, .plan, .card-sm[onclick], .sec-chip { position: relative; }
.course-card, .rec { border-radius: 18px !important; border: 1px solid var(--border); border-left-width: 1px !important; overflow: visible;
  background: linear-gradient(180deg, #fff, #f7f9fc) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s; }
.rec { padding-left: 22px; }
.rec::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 5px 5px 0; background: var(--ph, var(--navy)); transition: top .25s, bottom .25s, width .25s; }
.course-card:not(.locked):hover, .rec[onclick]:hover, .fx-hot { transform: translateY(-5px) scale(1.012) !important; border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--gold2), 0 18px 34px -14px rgba(10,26,61,.45), 0 0 26px -6px rgba(255,157,0,.55) !important; }
.rec[onclick]:hover::before { top: 8px; bottom: 8px; width: 8px; background: linear-gradient(var(--gold1), var(--gold2)); }
.course-card::after, .rec::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,210,58,.22) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; }
.course-card:hover::after, .rec[onclick]:hover::after { opacity: 1; background-position: -40% 0; transition: background-position .9s ease, opacity .2s; }
.course-card h3, .course-card h4, .rec h4 { transition: color .2s; }
.course-card:hover h3, .course-card:hover h4, .rec[onclick]:hover h4 { color: var(--navy); }

/* hover overlay: big faded symbol drawn in + particles */
.fxo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.fxo.open { overflow: visible; }
.fxsym { position: absolute; right: 10px; bottom: 6px; width: 84px; height: 84px; color: var(--gold2); opacity: 0; transform: translateX(18px) scale(.8) rotate(-8deg); transition: opacity .3s, transform .45s cubic-bezier(.2,1.2,.3,1); }
.fxsym svg { width: 100%; height: 100%; display: block; stroke: currentColor; stroke-width: 1.6; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,157,0,.55)); }
.fxsym svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-hot > .fxo .fxsym, .fx-hot .fxo .fxsym { opacity: .6; transform: none; }
.fx-hot .fxsym svg * { animation: fxdraw .9s ease forwards; }
@keyframes fxdraw { to { stroke-dashoffset: 0; } }
.fxsym.spin svg { animation: fxspin 3.2s linear infinite; transform-origin: 50% 50%; }
.fxsym.ring svg { animation: fxring .6s ease-in-out infinite; transform-origin: 50% 10%; }
.fxsym.water { color: #1B75D0; } .fxsym.water svg { filter: drop-shadow(0 0 6px rgba(27,117,208,.5)); }
.fxsym.fire { color: #E8590C; } .fxsym.fire svg { animation: fxflick .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes fxspin { to { transform: rotate(360deg); } }
@keyframes fxring { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes fxflick { from { transform: scale(1, .94); } to { transform: scale(1.05, 1.06) rotate(2deg); } }
.course-card > *:not(.fxo), .rec > *:not(.fxo) { position: relative; z-index: 1; }

/* section chips (practice quizzes etc.) */
.sec-wrap { max-height: 380px; overflow: auto; padding: 8px 4px 12px; margin: 4px -4px 0; }
.sec-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: linear-gradient(180deg,#fff,#f2f5f9);
  font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .2s; }
.sec-chip svg { width: 24px; height: 24px; flex: none; color: var(--navy); transition: transform .35s cubic-bezier(.2,1.4,.3,1), color .2s; }
.sec-chip small { color: var(--muted); font-size: 11.5px; }
.sec-chip:hover, .sec-chip.fx-hot { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gold2), 0 10px 20px -10px rgba(255,157,0,.7); }
.sec-chip:hover svg { transform: scale(1.35) rotate(-8deg); color: var(--gold2); }
.sec-chip.on { background: linear-gradient(135deg, var(--navy), #17337a); color: #fff; border-color: var(--navy); }
.sec-chip.on small { color: #cdd6ee; } .sec-chip.on svg { color: var(--gold1); }
.sec-chip .fxo { border-radius: 999px; }

/* friendlier controls everywhere */
.btn-primary, .btn-outline, .btn-sm, .hero-btn { border-radius: 999px !important; transition: transform .18s, box-shadow .2s, background .2s, color .2s; }
.btn-primary:hover { background: linear-gradient(135deg, var(--navy), #1B3A8A) !important; box-shadow: 0 8px 18px -8px rgba(10,26,61,.7), 0 0 0 2px var(--gold1); transform: translateY(-2px); }
.btn-sm:hover, .btn-outline:hover { box-shadow: 0 0 0 2px var(--gold2), 0 8px 16px -8px rgba(10,26,61,.5); transform: translateY(-2px); filter: brightness(.97); }
.tabs { gap: 6px; border-bottom: 0 !important; flex-wrap: wrap; }
.tab { border: 1px solid var(--border) !important; border-radius: 999px !important; margin: 0 !important; padding: 7px 16px !important; background: #fff !important; transition: transform .18s, box-shadow .2s, background .2s; }
.tab:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold2); }
.tab.active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.form-select, .form-input { border-radius: 12px !important; }
.card { border-radius: 18px !important; }
.card-sm { border-radius: 14px; }
.card-sm[onclick] { transition: transform .22s, box-shadow .22s; cursor: pointer; } .card-sm[onclick]:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gold2), 0 12px 22px -12px rgba(10,26,61,.4); }
.opt { border-radius: 14px !important; transition: transform .15s, box-shadow .2s, background .2s; }
.opt:not(:disabled):hover { transform: translateX(4px); box-shadow: 0 0 0 2px var(--gold2); }
.fxclick { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .fxsym svg *, .fxsym svg { animation: none !important; stroke-dashoffset: 0 !important; }
  .course-card:hover, .rec:hover, .sec-chip:hover, .tab:hover, .btn-sm:hover { transform: none !important; }
}
@media (hover: none) { .fxsym { width: 70px; height: 70px; } }

/* page emblem: colored and prominent */
.corner-sym { top: 6px !important; right: 6px !important; opacity: 1 !important; color: var(--navy) !important; padding: 12px; border-radius: 22px;
  background: radial-gradient(circle at 30% 25%, #fff6cf, #FFD23A 55%, #FF9D00 130%); box-shadow: 0 10px 22px -10px rgba(255,157,0,.8), inset 0 0 0 2px rgba(10,26,61,.12);
  transition: transform .35s cubic-bezier(.2,1.3,.3,1); animation: emblemIn .6s cubic-bezier(.2,1.3,.3,1) both; }
.corner-sym:hover { transform: rotate(-6deg) scale(1.08); }
.corner-sym .vcsym { width: 84px; height: 84px; stroke-width: 2.2; filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
@keyframes emblemIn { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .corner-sym { padding: 8px; border-radius: 16px; } .corner-sym .vcsym { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .corner-sym { animation: none; } }
.corner-sym ~ .page-title, .corner-sym ~ .page-sub { max-width: calc(100% - 120px); }
.corner-sym .vcsym { width: 68px; height: 68px; }
@media (max-width: 640px) { .corner-sym ~ .page-title, .corner-sym ~ .page-sub { max-width: calc(100% - 78px); } }