.flags-page{background:linear-gradient(#edf6ff,#fff 560px);min-height:100vh;padding:18px 0 64px}.flags-shell{gap:18px;width:min(1120px,100% - 28px);margin:0 auto;display:grid}.flags-back{justify-self:start;align-items:center;gap:7px;min-height:44px;font-weight:900;display:inline-flex}.flags-heading{justify-items:start;gap:10px;padding:12px 0;display:grid}.flags-heading>span{font-size:3.4rem}.flags-heading h1{max-width:820px;font-family:var(--font-display);letter-spacing:-.045em;margin:0;font-size:clamp(2.4rem,11vw,5.2rem);line-height:.98}.flags-heading p{max-width:700px;color:var(--color-muted);margin:0;font-size:1.05rem;font-weight:650;line-height:1.5}.flag-search{min-height:54px;box-shadow:var(--shadow-card);background:#fff;border:2px solid #0d28541f;border-radius:17px;align-items:center;gap:10px;padding:0 15px;display:flex}.flag-search input{width:100%;color:var(--color-ink);font:750 1rem var(--font-body);border:0;outline:0}.flag-count{color:var(--color-muted);margin:-4px 2px 0;font-weight:850}.flag-view-toggle{background:#ffffffb8;border:2px solid #0d28541a;border-radius:17px;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;display:grid}.flag-view-toggle button{min-height:46px;color:var(--color-muted);cursor:pointer;font:900 .9rem var(--font-body);background:0 0;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.flag-view-toggle button[aria-pressed=true]{background:var(--color-ink);color:#fff;box-shadow:0 5px 12px #0d28542e}.flag-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.flag-card{text-align:center;content-visibility:auto;contain-intrinsic-size:auto 142px;background:#fff;border:1px solid #0d285417;border-radius:18px;align-content:center;justify-items:center;gap:10px;min-height:142px;padding:14px 8px;display:grid;box-shadow:0 5px #0d28540d}.flag-card span{filter:drop-shadow(0 4px 4px #0d28541f);font-size:clamp(2.9rem,15vw,4.4rem);line-height:1}.flag-card h2{font-family:var(--font-display);margin:0;font-size:.9rem;line-height:1.15}.flag-deck{justify-self:center;gap:14px;width:min(100%,620px);display:grid}.flag-swipe-hint{color:var(--color-muted);text-align:center;margin:0;font-size:.9rem;font-weight:800}.flag-card-stage{isolation:isolate;place-items:center;min-height:370px;display:grid;position:relative}.flag-card-stage:before,.flag-card-stage:after{z-index:-1;content:"";background:#fff;border:1px solid #0d285414;border-radius:28px;width:calc(100% - 30px);height:calc(100% - 24px);position:absolute;box-shadow:0 7px #0d28540a}.flag-card-stage:before{transform:translateY(12px)rotate(-2deg)}.flag-card-stage:after{transform:translateY(6px)rotate(2deg)}.flag-swipe-card{text-align:center;touch-action:none;user-select:none;cursor:grab;background:linear-gradient(155deg,#fff,#f8fbff);border:1px solid #0d28541a;border-radius:28px;align-content:center;justify-items:center;gap:22px;width:100%;min-height:346px;padding:28px 20px;transition:transform .18s,box-shadow .18s;display:grid;box-shadow:0 13px #0d28540f,0 26px 52px #0d285421}.flag-swipe-card:focus-visible{outline-offset:4px;outline:4px solid #397df252}.flag-swipe-card.is-dragging{cursor:grabbing;transition:none;box-shadow:0 18px #0d28540a,0 34px 66px #0d285429}.flag-swipe-card span{filter:drop-shadow(0 10px 9px #0d28542e);pointer-events:none;font-size:clamp(7rem,40vw,12rem);line-height:1}.flag-swipe-card h2{font-family:var(--font-display);letter-spacing:-.035em;pointer-events:none;margin:0;font-size:clamp(1.65rem,8vw,2.55rem);line-height:1.05}.flag-deck-controls{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.flag-deck-controls button{min-height:50px;color:var(--color-ink);cursor:pointer;font:900 .88rem var(--font-body);background:#fff;border:2px solid #0d28541a;border-radius:15px;justify-content:center;align-items:center;gap:7px;display:inline-flex}.flag-deck-controls button:last-child{background:var(--color-coral);color:#fff;border-color:#0000}.flag-deck-controls button:disabled{cursor:not-allowed;opacity:.38}.flag-deck-controls strong{min-width:62px;color:var(--color-muted);text-align:center;font-size:.88rem}.flag-empty{text-align:center;background:#fff;border-radius:18px;padding:30px;font-weight:850}.flag-finish{border-top:1px solid #0d28541a;gap:10px;padding-top:20px;display:grid}.flag-finish button,.flag-finish a,.quiz-feedback button{background:var(--color-coral);color:#fff;cursor:pointer;min-height:50px;font:900 .95rem var(--font-body);border:0;border-radius:15px;justify-content:center;align-items:center;gap:8px;padding:0 18px;display:inline-flex}.flag-finish button.is-complete{background:#269a6e}.flag-finish a{color:var(--color-ink);background:#fff;border:2px solid #0d28541a}.quiz-shell{max-width:760px}.quiz-score{box-shadow:var(--shadow-card);background:#fff;border-radius:999px;justify-self:start;padding:10px 14px;font-weight:850}.quiz-card{box-shadow:var(--shadow-soft);background:#fff;border:1px solid #0d28541a;border-radius:26px;justify-items:center;gap:18px;padding:25px 18px;display:grid}.quiz-flag{filter:drop-shadow(0 7px 7px #0d285426);font-size:clamp(6rem,34vw,11rem);line-height:1}.quiz-card h2{font-family:var(--font-display);text-align:center;margin:0;font-size:clamp(1.5rem,6.5vw,2.2rem)}.quiz-options{gap:10px;width:100%;display:grid}.quiz-options button{min-height:54px;color:var(--color-ink);cursor:pointer;font:850 1rem var(--font-body);background:#fff;border:2px solid #0d28541a;border-radius:15px}.quiz-options button:disabled{opacity:.72}.quiz-options button.is-correct{opacity:1;background:#dcf6e9;border-color:#269a6e}.quiz-options button.is-wrong{border-color:var(--color-coral);opacity:1;background:#fff0ed}.quiz-feedback{color:#843b43;background:#fff0ed;border-radius:16px;gap:10px;width:100%;padding:14px;display:grid}.quiz-feedback.correct{color:#176744;background:#dcf6e9}.quiz-feedback p{margin:0;font-weight:900}.quiz-feedback button{justify-self:start}@media (width>=600px){.flag-view-toggle{justify-self:center;width:380px}.flag-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.flag-card-stage{min-height:450px}.flag-swipe-card{min-height:420px;padding:36px}.flag-finish{grid-template-columns:auto auto;justify-content:start}.quiz-options{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=900px){.flag-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.flags-heading{padding:24px 0 8px}}@media (prefers-reduced-motion:reduce){.flag-swipe-card{transition:none}}
