.practice-intro .eyebrow { color: var(--green); }
.practice-card [data-answer="normal"] { --choice-tint: #9e9e8c; }
.practice-card [data-answer="fire"] { --choice-tint: #ed4033; }
.practice-card [data-answer="water"] { --choice-tint: #4585e6; }
.practice-card [data-answer="electric"] { --choice-tint: #f5c733; }
.practice-card [data-answer="grass"] { --choice-tint: #59ad4a; }
.practice-card [data-answer="ice"] { --choice-tint: #66c7e6; }
.practice-card [data-answer="fighting"] { --choice-tint: #de6e26; }
.practice-card [data-answer="poison"] { --choice-tint: #9459d1; }
.practice-card [data-answer="ground"] { --choice-tint: #996336; }
.practice-card [data-answer="flying"] { --choice-tint: #8abdee; }
.practice-card [data-answer="psychic"] { --choice-tint: #eb5287; }
.practice-card [data-answer="bug"] { --choice-tint: #94a82b; }
.practice-card [data-answer="rock"] { --choice-tint: #a8a180; }
.practice-card [data-answer="ghost"] { --choice-tint: #73528f; }
.practice-card [data-answer="dragon"] { --choice-tint: #4d61db; }
.practice-card [data-answer="dark"] { --choice-tint: #40383b; }
.practice-card [data-answer="steel"] { --choice-tint: #78a8b8; }
.practice-card [data-answer="fairy"] { --choice-tint: #eb73e8; }
.practice-card { max-width: 760px; margin: 0 auto 32px; }
.practice-session { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
#session-count { font-weight: 750; }
.practice-question { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.practice-question img { width: 50px; height: 50px; border-radius: 12px; }
.practice-question h2 { margin: 0; line-height: 1.3; }
.practice-card .type-grid { margin: 24px 0; }
.practice-card .type-choice { min-height: 68px; position: relative; background: color-mix(in srgb, var(--choice-tint, var(--purple)) 8%, var(--surface-strong)); border-color: color-mix(in srgb, var(--choice-tint, var(--purple)) 30%, var(--surface-strong)); }
.practice-card .type-choice-content { width: 88px; flex: 0 1 88px; }
@media(max-width: 420px) { .practice-card .type-choice-content { width: 78px; flex-basis: 78px; } }
.practice-card .answer-correct { background: color-mix(in srgb, var(--green) 18%, var(--surface-strong)); border-color: var(--green); border-width: 2px; }
.practice-card .answer-incorrect { background: color-mix(in srgb, var(--attack-color) 18%, var(--surface-strong)); border-color: var(--attack-color); border-width: 2px; }
.answer-marker { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; color: white; }
.answer-correct .answer-marker { border-radius: 50%; background: #237a43; }
.answer-incorrect .answer-marker { border-radius: 4px; background: #c5303e; }
.practice-card .type-choice { padding-left: 28px; padding-right: 28px; }
.practice-card .type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width: 600px) { .practice-card .type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
#subject-icons { display: flex; gap: 6px; flex-shrink: 0; }
.practice-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 22px; font-weight: 650; cursor: pointer; }
.practice-toggle input { width: 22px; height: 22px; accent-color: #287444; }
@media(max-width: 420px) { .practice-question { flex-wrap: wrap; } }
.practice-feedback:not(:empty) { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 20px; }
.practice-feedback h3 { font-size: 1.15rem; margin: 0 0 10px; }
.practice-feedback p { margin: 8px 0; }
.practice-next { width: 100%; min-height: 48px; border: 0; border-radius: 14px; font: inherit; font-weight: 750; background: #287444; color: white; cursor: pointer; }
.practice-link { display: inline-block; color: var(--purple); font-weight: 700; margin-top: 12px; }
.earned-badges { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.earned-badges svg { width: 64px; max-width: 100%; display: block; margin: 0 auto 10px; }
.earned-badges span { display: block; text-align: center; font-size: .75rem; }
.achievements input { display: block; box-sizing: border-box; width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; background: var(--surface-strong); color: var(--text); }
.practice-next:disabled { opacity: .5; cursor: default; }
.victory-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); gap: 24px; align-items: start; }
.victory-layout .practice-card { width: 100%; max-width: none; box-sizing: border-box; }
.practice-feedback details { margin-top: 14px; }
.practice-feedback summary { cursor: pointer; font-weight: 650; }
.next-action { margin-bottom: 16px; }
.practice-question { margin-top: 20px; }
.victory-layout #practice-card .type-grid { margin: 16px 0; }
.victory-layout #practice-card .type-choice { min-height: 54px; }
.victory-layout .practice-question { margin-top: 12px; margin-bottom: 12px; }
.victory-layout .practice-feedback:not(:empty) { padding-top: 12px; margin-bottom: 0; }
@media(max-width:800px) {
  .victory-layout { grid-template-columns: minmax(0,1fr); }
  .next-action:has(button:not([hidden])) { position: sticky; bottom: max(8px,env(safe-area-inset-bottom)); z-index: 5; background: var(--surface-strong); border-radius: 14px; padding: 6px; box-shadow: 0 3px 16px #0002; }
}
@media(max-width: 380px) { .practice-card .type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
body:has(.victory-layout) main { max-width: 1120px; }
.victory-layout { grid-template-columns: minmax(0,1fr) 340px; }
#practice-card { border-top: 4px solid #328652; }
#reset-session { background: transparent; border-color: transparent; color: var(--secondary); font-size: .85rem; padding: 8px; }
#reset-session:hover { background: var(--surface-soft); color: var(--text); }
#answers, .next-action { max-width: 540px; margin-inline: auto; }
.victory-layout #practice-card #answers { margin-inline: auto; }
#diploma-export { border-top: 1px solid var(--line); padding-top: 14px; }
#diploma-export summary { cursor: pointer; font-weight: 750; color: var(--green); padding-block: 6px; }
#diploma-export label { display: block; margin-top: 16px; font-size: .9rem; }
#diploma-export button { margin-top: 16px; }
#trainer-name-count.at-limit { color: #c8303e; font-weight: 750; }
:root[data-theme="dark"] #trainer-name-count.at-limit { color: #ff737c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #trainer-name-count.at-limit { color: #ff737c; }
}
.achievements .tool-hint { font-size: .8rem; }
.achievements #achievement-status { font-size: .95rem; }
@media (min-width: 801px) {
  .victory-layout:has(#feedback:empty):not(:has(#diploma-export[open])) { align-items: stretch; }
}
@media (min-width: 801px) and (max-width: 1060px) { .practice-card .type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 800px) {
  .victory-layout { grid-template-columns: minmax(0,1fr); gap: 20px; margin-bottom: 32px; }
  .victory-layout .practice-card { margin-bottom: 0; }
}
@media (max-width: 350px) { .practice-card .type-choice { padding-inline: 23px; } .answer-marker { right: 4px; width: 17px; height: 17px; } }