/* Styles for the generated word-practice page on germanwithlevels.com/flashcards/.
   Loaded only by that page; the standalone demo keeps style.css. Sized so the
   whole game fits a laptop viewport at 100% zoom. */

.wp-wrap{width:100%;max-width:880px;margin:0 auto;padding:0 22px}

/* page header */
.fc-head{text-align:center;margin:18px 0 14px}
.fc-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px}
.fc-eyebrow-pill{display:inline-block;background:#fbeedd;color:#d0763a;border-radius:999px;padding:7px 14px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:11px}
.fc-eyebrow-soon{display:inline-block;background:#fff;border:1px solid #e5ddcf;color:#8a877c;border-radius:999px;padding:6px 12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:11px}
.fc-head h1{font-family:'Nunito',sans-serif;font-weight:900;font-size:clamp(28px,3.8vw,38px);letter-spacing:-1px;line-height:1.06;margin:0 0 8px;color:#1f1f1d}
.fc-head h1 em{font-style:normal;color:#ec8a4a}
.fc-sub{font-size:14.5px;line-height:1.5;color:#5f5c55;max-width:460px;margin:0 auto}

/* mode picker */
.wp-modes{display:flex;justify-content:center;align-items:stretch;gap:20px;margin:16px 0 18px;flex-wrap:wrap}
.wp-mode-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.wp-mode-label{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:11px;color:#8a877c}
.wp-mode-label-sound{color:#d0763a}
.wp-mode-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wp-mode-divider{width:1px;background:#e5e1d6;margin:2px 2px;align-self:stretch}
.wp-pill{border:1px solid #e2ddd1;background:#fff;color:#3c3a35;border-radius:999px;padding:9px 16px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,background .15s ease,color .15s ease;white-space:nowrap}
.wp-pill:hover{border-color:#c9c3b4;transform:translateY(-1px)}
.wp-pill[aria-pressed="true"]{background:#141414;border-color:#141414;color:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.wp-pill:disabled{opacity:.55;cursor:wait}
.wp-pill:focus-visible,.wp-orb:focus-visible,.wp-photo:focus-visible,.wp-row:focus-visible,.wp-key:focus-visible,.wp-button:focus-visible,.wp-ghost-button:focus-visible{outline:3px solid #ec8a4a;outline-offset:3px}

/* game card */
.wp-card{background:#fff;border:1px solid #eee9df;border-radius:20px;box-shadow:0 24px 70px -34px rgba(59,75,56,.35),0 2px 6px rgba(59,75,56,.05);overflow:hidden;margin:0 0 8px}
.wp-card-top{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid #f0ede6}
.wp-timer{position:relative;width:38px;height:38px;flex:none;color:#ec8a4a}
.wp-timer.is-low{color:#c14953}
.wp-timer svg{width:38px;height:38px;transform:rotate(-90deg)}
.wp-timer-track,.wp-timer-arc{fill:none;stroke-width:3.4}
.wp-timer-track{stroke:#efece4}
.wp-timer-arc{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100.53;transition:stroke-dashoffset .15s linear}
.wp-timer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:#2b2a26}
.wp-card-mid{flex:1;min-width:110px}
.wp-card-mode{font-weight:700;font-size:13.5px;color:#2b2a26;margin:0 0 6px}
.wp-bar{height:5px;border-radius:999px;background:#eceae2;overflow:hidden}
.wp-bar i{display:block;height:100%;width:0;background:#4a7fa5;border-radius:inherit;transition:width .25s ease}
.wp-count{font-weight:600;font-size:13.5px;color:#55534c;white-space:nowrap}
.wp-xp{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.wp-xp span{font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;color:#ec8a4a}
.wp-xp small{font-weight:700;font-size:10px;letter-spacing:.08em;color:#8a877c}

/* stage */
.wp-stage{padding:18px 18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:230px}
.wp-question{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(18px,2.2vw,21px);letter-spacing:-.3px;margin:0 0 4px;color:#1f1f1d}
.wp-hint{font-size:13.5px;color:#6f6c63;margin:0 0 14px}
.wp-word-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 16px;flex-wrap:wrap}
.wp-word{font-family:'Nunito',sans-serif;font-weight:900;font-size:clamp(26px,3.4vw,36px);letter-spacing:-1px;margin:0;color:#1f1f1d}
.wp-article{font-weight:900}
.wp-a-der{color:#3d6ea5}
.wp-a-die{color:#bf4a55}
.wp-a-das{color:#4c8a44}
.wp-orb{border:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:transform .15s ease,box-shadow .15s ease}
.wp-orb:hover{transform:scale(1.05)}
.wp-orb:active{transform:scale(.97)}
.wp-orb-small{width:46px;height:46px}
.wp-orb-small svg{width:20px;height:20px}
.wp-orb-big{width:84px;height:84px;margin:4px 0 0}
.wp-orb-big svg{width:30px;height:30px}
.wp-orb-orange{background:#ec8a4a;box-shadow:0 10px 26px -12px rgba(236,138,74,.9)}
.wp-orb-blue{background:#4a7fa5;box-shadow:0 10px 26px -12px rgba(74,127,165,.9)}
.wp-orb-big.wp-orb-orange{box-shadow:0 0 0 10px rgba(236,138,74,.09),0 0 0 1px rgba(236,138,74,.2),0 14px 32px -16px rgba(0,0,0,.3)}
.wp-orb-big.wp-orb-blue{box-shadow:0 0 0 10px rgba(74,127,165,.09),0 0 0 1px rgba(74,127,165,.2),0 14px 32px -16px rgba(0,0,0,.3)}
.wp-orb-invite{animation:wp-pulse 1.1s ease-in-out infinite}
@keyframes wp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.wp-listen{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.wp-listen-hint{font-size:12.5px;color:#94918a;margin:12px 0 0}

/* photo options */
.wp-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:560px}
.wp-photo{position:relative;background:#fff;border:2.5px solid #eae6db;border-radius:14px;padding:6px;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.wp-photo:hover:not(:disabled){border-color:#d8b394;transform:translateY(-2px)}
.wp-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:9px}
.wp-photo:disabled{cursor:default}
.wp-photo.is-correct{border-color:#7fb069}
.wp-photo.is-wrong{border-color:#d0655c}
.wp-photo-mark{position:absolute;top:10px;inset-inline-end:10px;width:27px;height:27px;border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
.wp-photo.is-correct .wp-photo-mark{display:flex;background:#5c9a4e}
.wp-photo.is-correct .wp-photo-mark::before{content:"✓"}
.wp-photo.is-wrong .wp-photo-mark{display:flex;background:#c14953}
.wp-photo.is-wrong .wp-photo-mark::before{content:"✕"}

/* picture for typing mode */
.wp-figure{background:#faf9f5;border:1px solid #f0ede6;border-radius:14px;padding:8px;margin-bottom:16px}
.wp-figure img{display:block;width:min(58vw,190px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:9px}

/* listen-pick rows */
.wp-rows{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px}
.wp-row{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #e6e2d6;border-radius:13px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:start;transition:border-color .15s ease,transform .15s ease}
.wp-row:hover:not(:disabled){border-color:#c9c3b4;transform:translateY(-1px)}
.wp-row:disabled{cursor:default}
.wp-row.is-correct{border-color:#7fb069;background:#f4faf1}
.wp-row.is-wrong{border-color:#d0655c;background:#fbf0ee}
.wp-row-word{font-weight:700;font-size:15.5px;color:#1f1f1d}
.wp-chip{border-radius:7px;padding:3px 8px;font-weight:800;font-size:12px}
.wp-chip.wp-a-der{background:#e9f0f8;color:#3d6ea5}
.wp-chip.wp-a-die{background:#f9e9eb;color:#bf4a55}
.wp-chip.wp-a-das{background:#ebf3e8;color:#4c8a44}

/* typing */
.wp-answer{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:560px}
.wp-answer input{width:100%;background:#fff;border:1.5px solid #ddd8ca;border-radius:13px;padding:12px 16px;font:inherit;font-size:16.5px;text-align:center;outline:none;color:#1f1f1d}
.wp-answer input:focus{border-color:#ec8a4a;box-shadow:0 0 0 3px rgba(236,138,74,.16)}
.wp-answer input::placeholder{color:#a4a099}
.wp-keys{display:flex;gap:10px}
.wp-key{width:44px;height:40px;border:none;border-radius:10px;background:#f1efe8;color:#2b2a26;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .15s ease,transform .15s ease}
.wp-key:hover{background:#e7e4d9;transform:translateY(-1px)}
.wp-button{border:none;border-radius:999px;background:#4a7fa5;color:#fff;font-family:inherit;font-weight:700;font-size:14.5px;padding:11px 24px;cursor:pointer;transition:background .15s ease,transform .15s ease;white-space:nowrap}
.wp-button:hover{background:#407194;transform:translateY(-1px)}

/* audio status note */
.wp-audio-note{margin:0 18px 14px;text-align:center;font-size:12.5px;font-weight:600;color:#b0763a;background:#fbf3e4;border-radius:10px;padding:8px 12px}

/* feedback bar */
.wp-feedback{display:flex;align-items:center;gap:14px;margin:0 18px 18px;border-radius:13px;padding:12px 16px;text-align:start}
.wp-feedback[hidden]{display:none}
.wp-feedback.is-bad{background:#f9e7e4}
.wp-feedback.is-good{background:#ebf3e8}
.wp-feedback-icon{font-weight:800;font-size:17px;flex:none}
.wp-feedback.is-bad .wp-feedback-icon,.wp-feedback.is-bad strong{color:#b04b45}
.wp-feedback.is-good .wp-feedback-icon,.wp-feedback.is-good strong{color:#376e53}
.wp-feedback-text{flex:1;min-width:0}
.wp-feedback-text strong{display:block;font-size:14.5px;margin-bottom:1px}
.wp-feedback-text p{margin:0;font-size:13.5px;line-height:1.45}
.wp-feedback.is-bad p{color:#8f4640}
.wp-feedback.is-good p{color:#3f6b50}

/* finish */
.wp-finish{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
.wp-finish-badge{width:44px;height:44px;border-radius:50%;background:#ec8a4a;color:#fff;font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -14px rgba(236,138,74,.9);margin-bottom:10px}
.wp-finish-score{font-weight:700;font-size:14px;color:#6f6c63;margin:0 0 4px}
.wp-finish h2{font-family:'Nunito',sans-serif;font-weight:900;font-size:23px;letter-spacing:-.5px;margin:0 0 6px;color:#1f1f1d}
.wp-finish-message{font-size:14px;color:#5f5c55;margin:0 0 16px;max-width:400px}
.wp-store-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.wp-store-badge{display:inline-flex;align-items:center;gap:9px;background:#111;color:#fff;border-radius:12px;padding:9px 15px;text-decoration:none;transition:transform .15s ease}
.wp-store-badge:hover{transform:translateY(-2px)}
.wp-store-label{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.wp-store-caption{font-size:10px;opacity:.85}
.wp-store-name{font-weight:700;font-size:15px}
.wp-finish-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wp-ghost-button{border:1.5px solid #ddd8ca;background:#fff;border-radius:999px;padding:9px 17px;font-family:inherit;font-weight:700;font-size:13.5px;color:#3c3a35;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.wp-ghost-button:hover{border-color:#c9c3b4;transform:translateY(-1px)}
.wp-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:90}

/* explainer cards below the game */
.fc-about{margin:28px 0 4px}
.fc-about h2{font-family:'Nunito',sans-serif;text-align:center;font-weight:900;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.6px;margin:0 0 6px;color:#1f1f1d}
.fc-about h2 em{font-style:normal;color:#ec8a4a}
.fc-about-lead{text-align:center;color:#6f6c63;font-size:13.5px;line-height:1.55;max-width:520px;margin:0 auto 16px}
.fc-about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fc-about-grid article{background:#fff;border:1px solid #eee9df;border-radius:15px;padding:15px 14px;box-shadow:0 14px 40px -26px rgba(59,75,56,0.45)}
.fc-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:#fbeedd;color:#d0763a}
.fc-about-grid h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;margin:8px 0 4px;color:#1f1f1d}
.fc-about-grid p{font-size:12.5px;line-height:1.55;color:#6f6c63;margin:0}

@media(max-width:760px){
  .wp-modes{gap:12px}
  .wp-mode-divider{display:none}
  .wp-card-top{flex-wrap:wrap;row-gap:8px}
  .wp-card-mid{order:3;flex-basis:100%}
  .wp-stage{padding:18px 14px 16px}
  .wp-photos{gap:8px}
  .wp-photo{padding:4px;border-radius:12px}
  .wp-photo-mark{top:7px;inset-inline-end:7px;width:23px;height:23px;font-size:12px}
  .wp-feedback{flex-wrap:wrap;margin:0 14px 16px}
  .wp-feedback .wp-button{margin-inline-start:auto}
  .fc-about-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .wp-pill,.wp-photo,.wp-row,.wp-key,.wp-button,.wp-ghost-button,.wp-orb,.wp-store-badge,.wp-bar i,.wp-timer-arc{transition:none!important;transform:none!important}
  .wp-orb-invite{animation:none}
  .wp-confetti{display:none}
}