/* SmartPrep Italian Year 7 · Verb Conjugation Challenge — standalone activity. */
:root{--v-navy:#1e3a8a;--v-blue:#2563eb;--v-purple:#7c3aed;--v-teal:#0f766e;--v-muted:#64748b;--v-border:#e2e8f0;--v-green:#047857;--v-red:#b91c1c}
*,*::before,*::after{box-sizing:border-box}
body.verb-page{margin:0;min-height:100vh;text-align:left;background:linear-gradient(150deg,#eef5ff 0%,#f5f3ff 55%,#f8fafc 100%);font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;color:#1e293b}
.verb-page [hidden]{display:none!important}
.verb-page button,.verb-page select,.verb-page input{font-family:inherit}
.verb-page button:focus-visible,.verb-page select:focus-visible,.verb-page input:focus-visible,.verb-page a:focus-visible,.verb-page summary:focus-visible{outline:3px solid #818cf8;outline-offset:3px}
header.smartprep-banner{width:100%;height:82px;min-height:82px;margin:0;padding:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e3a8a;box-shadow:0 4px 8px rgba(0,0,0,.11);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center}
header.smartprep-banner .smartprep-title{margin:0;color:#fff;font-size:1.6rem;font-weight:700;line-height:1.2}
header.smartprep-banner .smartprep-subtitle{margin:2px 0 0;color:rgba(255,255,255,.9);font-size:1rem;font-weight:400;line-height:1.2}
.verb-nav{align-items:center;gap:10px;min-height:56px}
.nav-context{color:white;font-weight:700;padding:8px 12px}
.hub-link{display:inline-flex;align-items:center;padding:10px 15px;background:#334155;color:#fff;text-decoration:none;border-radius:8px;font-weight:750;font-size:.9rem}
.hub-link:hover{background:#1e293b}
.verb-main{width:min(880px,calc(100% - 28px));margin:0 auto;padding:28px 0 18px;flex:1}
.page-intro{text-align:center;margin-bottom:22px}
.year-badge{display:inline-block;background:#fef08a;border:1.5px solid #eab308;color:#854d0e;border-radius:50px;padding:7px 15px;font-size:.77rem;font-weight:800;letter-spacing:.04em}
.page-intro h2{margin:10px 0 8px;color:var(--v-navy);font-size:clamp(1.65rem,4vw,2.2rem)}
.page-intro h2 em{color:#6d28d9;font-style:normal}
.page-intro p{max-width:715px;margin:0 auto;line-height:1.6;font-size:.99rem;color:#475569}
.learning-steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:18px;color:#475569;font-size:.85rem;font-weight:700}
.learning-steps span:nth-child(odd){padding:8px 11px;border-radius:999px;background:#eff6ff;color:#1e40af}
.learning-steps span:nth-child(even){color:#94a3b8;font-size:1.3rem}
/* Use aria-pressed instead of the generic .active class: phonics-style.css
   applies a global .active background !important, which broke text contrast. */
.view-switch{display:flex;gap:10px;margin-bottom:17px;justify-content:center}
.view-tab{padding:12px 18px;border-radius:12px;background:#fff;border:2px solid #cbd5e1;color:#334155;font-weight:800;cursor:pointer;font-size:.95rem;box-shadow:0 2px 5px rgba(15,23,42,.045);transition:background-color .16s,border-color .16s,color .16s}
.view-tab[aria-pressed="true"]{background:#1e3a8a;border-color:#1e3a8a;color:#fff;box-shadow:0 4px 9px rgba(30,58,138,.22)}
.view-tab[aria-pressed="false"]:hover{background:#eef2ff;border-color:#818cf8;color:#1e3a8a}
.view-tab[aria-pressed="true"]:hover{background:#172e70;border-color:#172e70}
.activity-panel,.reference-panel{background:#fff;border:1px solid var(--v-border);border-radius:20px;box-shadow:0 10px 27px rgba(15,23,42,.065);width:100%}
.activity-panel{padding:clamp(18px,4vw,34px);margin:0 0 20px}
.eyebrow,.game-kicker{color:#6d28d9;font-weight:850;letter-spacing:.1em;font-size:.78rem}
.activity-panel h3{margin:9px 0 12px;color:var(--v-navy);font-size:clamp(1.3rem,3.3vw,1.65rem)}
.panel-description{max-width:720px;color:#526176;line-height:1.6;margin:0 0 20px}
.field-label{display:block;color:#334155;font-size:.92rem;font-weight:750}
.field-label select{width:100%;display:block;background:white;margin-top:8px;padding:12px 13px;border:1.5px solid #cbd5e1;border-radius:10px;color:#1e293b;font-weight:550;font-size:.97rem;cursor:pointer}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.action-primary,.action-secondary{border-radius:12px;padding:12px 19px;cursor:pointer;font-weight:800;font-size:.97rem;border:1px solid transparent;transition:background .15s,transform .12s}
.action-primary{background:var(--v-purple);color:white;box-shadow:0 4px 8px rgba(124,58,237,.13)}
.action-primary:hover{background:#6d28d9;transform:translateY(-1px)}
.action-secondary{color:#1e40af;background:#eff6ff;border-color:#bfdbfe}
.action-secondary:hover{background:#dbeafe}
.action-primary:disabled,.action-secondary:disabled{opacity:.55;cursor:default;transform:none}
.start-button{margin-top:18px;min-width:205px}
.microcopy,.set-note{color:#64748b;font-size:.88rem;line-height:1.55;margin:12px 0 0}
.set-note{padding:10px 13px;background:#f0fdfa;color:#115e59;border:1px solid #99f6e4;border-radius:10px}
.learn-title-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 12px}
.verb-group-tag{display:inline-block;background:#ccfbf1;color:#115e59;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:850}
.learn-title-row h4{color:var(--v-navy);font-size:clamp(1.35rem,3.5vw,1.7rem);margin:8px 0 0;text-transform:capitalize}
.learn-title-row h4 span{font-size:1rem;text-transform:none;color:#64748b;font-weight:550}
.form-count{color:#64748b;font-size:.77rem;font-weight:800;letter-spacing:.08em}
.table-scroller{overflow-x:auto;max-width:100%}
.conjugation-table,.endings-table{border-collapse:collapse;width:100%;min-width:410px;text-align:left}
.conjugation-table th,.conjugation-table td,.endings-table th,.endings-table td{padding:11px 15px;border-bottom:1px solid #e2e8f0}
.conjugation-table thead th,.endings-table thead th{background:#eff6ff;color:#1e40af;font-size:.83rem}
.conjugation-table tbody tr:nth-child(even){background:#f8fafc}
.conjugation-table tbody th{font-weight:800;color:#334155;width:25%}
.conjugation-table td.form{color:#1e3a8a;font-weight:850;font-size:1.13rem}
.conjugation-table td.meaning{color:#64748b;font-size:.9rem}
.learn-note,.learn-example{margin-top:17px;border-radius:11px;padding:13px 16px;line-height:1.6;font-size:.93rem}
.learn-note{background:#faf5ff;border-left:4px solid #8b5cf6;color:#5b21b6}
.learn-example{background:#f0fdfa;border:1px solid #99f6e4;color:#115e59}
.learn-example strong{color:#134e4a}
.learn-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.learn-actions #go-practice{margin-left:auto}
.game-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.round-badge{padding:6px 11px;background:#f3e8ff;color:#6b21a8;border-radius:999px;font-size:.89rem;font-weight:800}
.score-text{color:var(--v-green);font-weight:850;font-size:.9rem}
.verb-progress{height:10px;border-radius:20px;background:#e9e7f5;margin:13px 0 20px;overflow:hidden}
.verb-progress-fill{height:100%;width:0%;border-radius:20px;background:linear-gradient(90deg,#14b8a6,#8b5cf6);transition:width .2s}
.game-info{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:17px}
.verb-chip,.person-chip{background:#eff6ff;color:#475569;border:1px solid #dbeafe;border-radius:999px;padding:8px 11px;font-size:.77rem;font-weight:850;letter-spacing:.03em}
.verb-chip strong,.person-chip strong{color:#1e40af;font-size:1rem;margin-left:6px;letter-spacing:normal}
.person-chip{background:#f0fdfa;border-color:#ccfbf1}.person-chip strong{color:#115e59}
.english-translation{margin:13px 0 19px;color:#334155;font-weight:650;font-size:clamp(1.02rem,2.8vw,1.17rem);line-height:1.5}
.question-card{background:#f8f7ff;border-radius:14px;padding:22px 16px;border:1px solid #e9d5ff;border-left:5px solid #8b5cf6}
.question-label{font-size:.7rem;color:#6d28d9;font-weight:900;letter-spacing:.09em;margin-bottom:13px}
.italian-sentence{display:flex;align-items:center;gap:.23em;flex-wrap:wrap;color:var(--v-navy);font-size:clamp(1.2rem,3.4vw,1.65rem);font-weight:780;line-height:1.7}
.sentence-fragment{white-space:pre-wrap}
.answer-input{width:clamp(125px,28vw,205px);max-width:100%;padding:8px 10px;text-align:center;font-size:clamp(1rem,3vw,1.27rem);border:2px dashed #a78bfa;border-radius:11px;color:#1e3a8a;background:white;font-weight:750}
.answer-input.is-right,.drop-target.is-right{border-color:#10b981;background:#dcfce7;color:#166534}
.answer-input.is-wrong,.drop-target.is-wrong{border-color:#ef4444;background:#fee2e2;color:#991b1b}
.drop-target{min-width:150px;min-height:53px;padding:8px 16px;border-radius:12px;border:2px dashed #a78bfa;color:#6d28d9;background:white;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(1rem,3vw,1.25rem);font-weight:800;cursor:pointer;touch-action:manipulation}
.drop-target.filled{background:#ede9fe;border-style:solid}.drop-target.drag-hover{border-color:#2563eb;background:#dbeafe}
.interaction-instructions{color:#64748b;font-size:.88rem;line-height:1.6;margin:15px 0 10px}
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.word-tile{min-height:53px;padding:13px 7px;font-size:clamp(.96rem,2.5vw,1.13rem);font-weight:850;border-radius:12px;border:2px solid #c7d2fe;background:#eef2ff;color:#3730a3;cursor:grab;touch-action:manipulation}
.word-tile:hover{border-color:#8b5cf6;background:#ede9fe}.word-tile.selected{background:#ddd6fe;color:#5b21b6;border-color:#7c3aed;box-shadow:0 0 0 2px #ede9fe}.word-tile:disabled{cursor:default}
.helper-row{display:flex;justify-content:flex-end;margin:13px 0 0}
.hint-button{padding:9px 13px;border:1px solid #fbbf24;background:#fffbeb;color:#854d0e;border-radius:999px;font-weight:800;cursor:pointer;font-size:.87rem}
.hint-button:hover{background:#fef3c7}.hint-button:disabled{opacity:.55;cursor:default}
.hint-text{background:#fffbeb;border-left:4px solid #f59e0b;padding:12px 14px;border-radius:9px;margin:10px 0;color:#78350f;line-height:1.55}
.action-row,.results-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.feedback{padding:12px 16px;margin-top:17px;border-radius:12px;font-weight:800;line-height:1.5}
.feedback.correct{background:#dcfce7;border:1px solid #86efac;color:#166534}.feedback.incorrect{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.explanation{background:#faf5ff;border:1px solid #ddd6fe;border-radius:12px;padding:13px 16px;margin-top:10px;line-height:1.55;color:#334155}
.explanation-heading{color:#6b21a8;font-weight:900;font-size:.85rem}.explanation p{margin:8px 0 0}.full-answer{color:#1e3a8a;font-size:1.07rem;font-weight:850}
.quit-link{background:none;border:0;text-decoration:underline;color:#64748b;display:block;margin:22px auto 0;padding:6px;cursor:pointer;font-size:.9rem}
.quit-link:hover{color:#1e3a8a}
.results-panel{text-align:center}.results-emoji{font-size:3rem}.results-summary{color:#475569;line-height:1.55}
.results-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:24px 0}
.results-stats>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:13px;padding:15px 7px}
.results-stats strong{display:block;color:#6d28d9;font-size:clamp(1.2rem,3.2vw,1.85rem)}
.results-stats span{display:block;margin-top:4px;color:#64748b;font-size:.81rem}
.mistake-review{padding:17px;text-align:left;margin:20px 0;max-height:340px;overflow:auto;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px}
.mistake-review h4{margin:0 0 12px;color:#9a3412}.mistake-entry{padding:10px 0;border-top:1px dashed #fed7aa;line-height:1.55}.mistake-entry strong{color:#1e3a8a}
.reference-panel{overflow:hidden;margin:0 0 24px}.reference-panel summary{cursor:pointer;padding:18px 20px;color:var(--v-navy);font-weight:800}.reference-panel[open] summary{background:#f8fafc;border-bottom:1px solid #e2e8f0}
.reference-content{padding:4px 20px 18px;color:#475569;font-size:.92rem;line-height:1.65}
.endings-table{margin:9px 0 12px;min-width:400px}.endings-table th,.endings-table td{text-align:center}
.verb-footer{text-align:center;color:#6b7280;padding:19px 10px 34px;font-size:.83rem}.verb-footer p{margin:5px 0}
@media(max-width:640px){.verb-main{width:calc(100% - 18px);padding-top:20px}.activity-panel{padding:20px 15px}.settings-grid{grid-template-columns:1fr}.view-tab{flex:1;padding:12px 7px;font-size:.88rem}.learn-actions #go-practice{margin-left:0;flex:1 1 100%}.learn-actions .action-secondary{flex:1 1 42%}.learning-steps{gap:5px;font-size:.72rem}.learning-steps span:nth-child(odd){padding:7px}.italian-sentence{font-size:1.25rem}.tile-grid{gap:7px}.word-tile{padding:11px 3px;min-height:52px;font-size:.94rem}.results-stats{gap:6px}.results-stats span{font-size:.7rem}.nav-context{font-size:.87rem}}
@media(max-width:355px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.view-tab{font-size:.78rem}.hub-link{font-size:.83rem}.nav-context{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.verb-page *{transition:none!important}}

/* ==========================================================
   Version 1.2: Conjugation Jigsaw. Scoped to the verb game so
   phonics-style.css and weekly grammar pages remain unchanged.
   ========================================================== */
.verb-page .view-switch { flex-wrap:wrap; }
.verb-page .view-tab { flex:1 1 195px; white-space:normal; }
.verb-page .jigsaw-panel h4 { color:#1e3a8a; }
.verb-page .jigsaw-round-title { font-size:1.25rem; margin:12px 0 4px; }
.verb-page .jigsaw-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding:16px; border:1px solid #dbeafe; background:#f8fafc; border-radius:17px; margin-top:10px; }
.verb-page .jigsaw-column { min-width:0; }
.verb-page .jigsaw-column h5 { margin:0 0 13px; text-align:center; font-size:.78rem; letter-spacing:.07em; color:#475569; font-weight:850; }
.verb-page .jigsaw-piece-list { display:flex; flex-direction:column; gap:10px; min-height:48px; }
.verb-page .jigsaw-piece { width:100%; min-height:57px; padding:12px 13px; border-radius:13px; border:2px solid #a5b4fc; font-weight:850; font-size:clamp(.91rem,2.5vw,1.12rem); line-height:1.3; cursor:grab; touch-action:manipulation; overflow-wrap:anywhere; position:relative; transition:background .12s,box-shadow .12s; }
.verb-page .jigsaw-piece:active { cursor:grabbing; }
.verb-page .jigsaw-subject { background:#e0e7ff; color:#312e81; border-color:#a5b4fc; }
.verb-page .jigsaw-form { background:#f0fdfa; color:#115e59; border-color:#5eead4; }
.verb-page .jigsaw-piece:hover, .verb-page .jigsaw-piece:focus-visible { box-shadow:0 0 0 3px #ddd6fe; }
.verb-page .jigsaw-piece.piece-selected { background:#4338ca; border-color:#312e81; color:#fff; box-shadow:0 0 0 3px #c7d2fe; }
.verb-page .jigsaw-piece.piece-hover { border-color:#d97706; background:#fef3c7; color:#78350f; }
.verb-page .jigsaw-piece.piece-dragging { opacity:.5; }
.verb-page .jigsaw-feedback { padding:12px 15px; border-radius:10px; font-size:.92rem; font-weight:700; margin:12px 0 0; line-height:1.5; background:#eff6ff; color:#1d4ed8; }
.verb-page .jigsaw-feedback.correct { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.verb-page .jigsaw-feedback.incorrect { background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; }
.verb-page .jigsaw-built-section { margin-top:19px; padding:16px; border:1px solid #dbeafe; border-radius:14px; background:#fff; }
.verb-page .jigsaw-built-section h4 { margin:0 0 12px; font-size:1.02rem; }
.verb-page .jigsaw-connected { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:11px; }
.verb-page .jigsaw-connected:empty::before { content:'Your connected pairs will appear here.'; color:#64748b; font-size:.87rem; font-style:italic; }
.verb-page .jigsaw-joined-pair { display:flex; align-items:stretch; min-width:0; filter:drop-shadow(0 2px 3px rgba(6,95,70,.12)); }
.verb-page .jigsaw-connected-left, .verb-page .jigsaw-connected-right { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center; border:2px solid #10b981; padding:10px 12px; min-height:47px; font-weight:850; overflow-wrap:anywhere; position:relative; }
.verb-page .jigsaw-connected-left { background:#ccfbf1; color:#064e3b; border-radius:12px 0 0 12px; z-index:1; }
.verb-page .jigsaw-connected-left::after { content:''; position:absolute; right:-9px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:#ccfbf1; border:2px solid #10b981; z-index:2; }
.verb-page .jigsaw-connected-right { background:#f0fdf4; color:#14532d; border-left:0; padding-left:18px; border-radius:0 12px 12px 0; }
.verb-page .jigsaw-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-top:15px; }
.verb-page .jigsaw-complete { text-align:center; }
.verb-page .jigsaw-celebration { font-size:2.65rem; margin:6px 0 10px; }
.verb-page .jigsaw-complete h4 { font-size:1.45rem; margin:4px 0 10px; }
.verb-page .jigsaw-complete h5 { color:#1e3a8a; font-size:1.08rem; margin:24px 0 10px; }
.verb-page .jigsaw-review { max-width:650px; margin:0 auto; display:grid; gap:8px; }
.verb-page .jigsaw-review-row { display:grid; grid-template-columns:minmax(90px,1fr) 28px minmax(110px,1.6fr) auto; gap:8px; align-items:center; text-align:left; background:#f8fafc; border-radius:10px; padding:7px 10px; border:1px solid #e2e8f0; }
.verb-page .jigsaw-review-person { font-weight:850; color:#334155; }
.verb-page .jigsaw-review-arrow { text-align:center; }
.verb-page .jigsaw-review-form { color:#047857; font-weight:850; overflow-wrap:anywhere; }
.verb-page .jigsaw-reference-only { background:#fffbeb; border-color:#fde68a; }
.verb-page .jigsaw-review-note { background:#fef3c7; color:#92400e; padding:4px 6px; border-radius:6px; white-space:nowrap; font-size:.7rem; font-weight:750; }
@media(max-width:640px) {
  .verb-page .view-switch { gap:7px; }
  .verb-page .view-tab { flex:1 1 calc(50% - 7px); font-size:.86rem; padding:12px 8px; }
  .verb-page #practice-tab { flex-basis:100%; }
  .verb-page .jigsaw-board { gap:8px; padding:9px; }
  .verb-page .jigsaw-piece { font-size:.89rem; padding:10px 5px; min-height:53px; }
  .verb-page .jigsaw-piece-list { gap:8px; }
  .verb-page .jigsaw-connected { grid-template-columns:1fr; }
  .verb-page .jigsaw-review-row { grid-template-columns:minmax(65px,.9fr) 20px minmax(85px,1.4fr); font-size:.9rem; }
  .verb-page .jigsaw-review-note { grid-column:3; justify-self:start; }
}
@media(max-width:390px) {
  .verb-page .jigsaw-column h5 { font-size:.67rem; }
  .verb-page .jigsaw-piece { font-size:.82rem; }
}