/* Extras shared by the game pages: badge toasts, share window, badge grid, streak, hub cards */

/* Badge toast */
.toast-box{position:fixed;left:0;right:0;bottom:18px;z-index:90;display:grid;gap:8px;justify-items:center;padding:0 var(--gutter);pointer-events:none}
.toast{display:flex;align-items:center;gap:14px;max-width:420px;width:100%;padding:12px 16px;background:var(--vault-2);box-shadow:inset 0 0 0 1px var(--gold),0 12px 40px rgba(0,0,0,.6);
  animation:toast-in .25s ease-out both}
.toast--out{animation:toast-out .45s ease-in both}
.toast__ico{font-size:28px;line-height:1}
.toast strong{display:block;font:800 15px/1.3 var(--body);color:var(--gold-hi)}
.toast span span{display:block;color:var(--muted);font-size:14px;line-height:1.4}
@keyframes toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.toast,.toast--out{animation:none}.toast--out{opacity:0}}

/* Share window */
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(7,5,10,.88);overflow:auto}
.modal__panel{width:min(640px,100%);max-height:100%;overflow:auto;display:grid;gap:14px;padding:22px;background:var(--vault);box-shadow:inset 0 0 0 1px var(--gold)}
.modal__panel h2{font-size:clamp(20px,4vw,26px)}
.modal__hint{color:var(--muted);font-size:14px;line-height:1.55}
.modal__canvas{display:block;width:100%;max-height:52vh;object-fit:contain;background:#07050A;border:1px solid var(--line)}
.modal__panel .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.modal__panel .tabs button{min-height:44px;padding:0 16px;background:#0E0A14;color:var(--text);border:1px solid var(--line);font:700 15px var(--body);cursor:pointer}
.modal__panel .tabs button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.modal__panel .tabs button[aria-pressed="true"]{background:linear-gradient(135deg,#F4B73A,#FFE28F);color:#1A1204;border-color:transparent}
.modal__panel .row{display:flex;flex-wrap:wrap;gap:10px}
html.modal-open{overflow:hidden}

/* Streak and badges */
.streak{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:18px 22px}
.streak strong{font:900 clamp(26px,4vw,36px)/1 var(--display);color:var(--gold-hi)}
.streak span{color:var(--muted);font-size:15px}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.badge{display:grid;gap:6px;justify-items:start;align-content:start;padding:16px 16px 18px;min-height:150px}
.badge__ico{font-size:30px;line-height:1}
.badge strong{font:800 16px/1.3 var(--display);color:var(--text)}
.badge span{color:var(--muted);font-size:14px;line-height:1.45}
.badge--locked{opacity:.5;filter:grayscale(.9)}
.badge--locked .badge__ico{opacity:.7}
.badge em{font-style:normal;font-size:12px;font-weight:800;color:var(--mint)}
@media (max-width:900px){.badges{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.badges{grid-template-columns:1fr}}

/* Games hub cards */
.hub{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.hub__card{display:block;text-decoration:none;color:var(--text);padding:14px 14px 22px}
.hub__art{aspect-ratio:16/9;background:#0e0a13 no-repeat center/cover;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.hub__art--catch{background-image:url(assets/hero.webp);background-size:300% auto;background-position:100% 100%}
.hub__art--flight{background-image:url(assets/hero.webp);background-size:cover;background-position:30% 20%}
.hub__art--empire{background-image:url(assets/hero.webp);background-size:260% auto;background-position:60% 40%}
.hub__art--quiz{background-image:url(assets/hero.webp);background-size:300% auto;background-position:0% 30%}
.hub__body{padding:18px 8px 0}
.hub__body h3{font-size:clamp(20px,2vw,24px)}
.hub__body p{margin:10px 0 14px;color:#DCD2C2;max-width:46ch}
.hub__best{display:block;margin-bottom:14px;color:var(--gold-hi);font-size:14px;font-weight:700;min-height:1.3em}
.hub__sec{margin-top:clamp(40px,6vw,72px)}
.hub__sec > h2{font-size:clamp(22px,3vw,32px);margin-bottom:8px}
.hub__sec > .lead{margin-top:0;margin-bottom:22px}
@media (max-width:900px){.hub{grid-template-columns:1fr}}