/* SchoolOpsPro Game Shell — Child-engaging design system */
/* Include via <link rel="stylesheet" href="css/game-shell.css"> after style.css */

/* ── Gradients ── */
.game-card-grad{background:linear-gradient(135deg,#1E293B,#0F172A);border:2px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 4px 24px rgba(0,0,0,0.3)}
.game-card-hero{background:linear-gradient(135deg,var(--primary),#7C3AED);border-radius:20px;padding:28px;color:white;box-shadow:0 8px 32px rgba(79,70,229,0.3)}
.game-card-hero h1,.game-card-hero h2{color:white}

/* ── Animated Team Badges ── */
.game-badge{display:flex;flex-direction:column;align-items:center;padding:10px 16px;border-radius:16px;min-width:80px;transition:all .3s;position:relative}
.game-badge.active{transform:scale(1.12);z-index:10}
.game-badge.active::after{content:'';position:absolute;inset:-3px;border-radius:18px;border:3px solid var(--primary);animation:glow 1s infinite}
.game-emoji{font-size:32px;animation:bounce2 2s infinite}
.game-name{font-size:12px;font-weight:700;margin-top:2px}
.game-score{font-size:24px;font-weight:900;margin-top:2px}

@keyframes glow{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes bounce2{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Options / Buttons ── */
.game-option{display:block;width:100%;padding:14px 18px;margin:6px 0;border:3px solid #e2e8f0;border-radius:14px;background:#fff;font-size:16px;text-align:left;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;color:#1a1a2e}
.game-option:hover{border-color:var(--primary);background:#f0edff;transform:translateX(4px)}
.game-option.correct{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#10B981;color:#065f46;animation:pop .3s}
.game-option.wrong{background:linear-gradient(135deg,#fef2f2,#fce4e4);border-color:#EF4444;color:#991b1b;animation:shake .3s}
.game-option.correct::after{content:'🌟';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px}
.game-option.locked{cursor:not-allowed;pointer-events:none;opacity:.7}

@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── Progress ── */
.game-progress{height:6px;background:var(--border);border-radius:3px;margin:16px 0;overflow:hidden}
.game-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#EC4899);border-radius:3px;transition:width .5s;position:relative}
.game-progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── Toasts ── */
.game-toast{position:fixed;top:30px;left:50%;transform:translateX(-50%);padding:14px 28px;border-radius:50px;font-size:16px;font-weight:800;z-index:300;opacity:0;transition:all .3s;pointer-events:none}
.game-toast.show{opacity:1;animation:toastIn .3s ease-out}
.game-toast.ok{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#065f46;border:3px solid #10B981}
.game-toast.no{background:linear-gradient(135deg,#fef2f2,#fce4e4);color:#991b1b;border:3px solid #EF4444}
@keyframes toastIn{0%{transform:translateX(-50%) translateY(-20px);opacity:0}100%{transform:translateX(-50%) translateY(0);opacity:1}}

/* ── Star particles ── */
.game-star{position:fixed;pointer-events:none;z-index:999;animation:starBurst 2s ease-out forwards;font-size:20px}
@keyframes starBurst{0%{transform:translateY(0) scale(0);opacity:1}100%{transform:translateY(-120px) scale(1.5);opacity:0}}

/* ── Podium leaderboard ── */
.game-podium{padding:16px;border-radius:14px;margin:6px 0;font-size:14px}
.game-podium.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);border:3px solid #F59E0B}
.game-podium.silver{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:3px solid #94A3B8}
.game-podium.bronze{background:linear-gradient(135deg,#fef7ed,#fed7aa);border:3px solid #F97316}


/* ── Mobile Game Responsiveness (S3 extended) ── */
@media(max-width:640px){
  /* Grid games — reduce cell sizes */
  .bingo-grid,.jeopardy-board,.wordsearch-grid,.match-grid{font-size:11px;gap:2px}
  .bingo-grid button,.jeopardy-board button,.match-grid button{min-height:36px;padding:4px;font-size:11px}
  .bingo-cell,.jeopardy-cell,.ws-cell{min-width:28px;min-height:28px}
  
  /* Quiz games — full-width buttons */
  .quiz-options,.kahoot-options{flex-direction:column;gap:6px}
  .quiz-options button,.kahoot-options button,.option-btn{width:100%;font-size:14px;padding:12px}
  
  /* Typing/input games */
  .typing-input,.word-input,.fill-input{padding:12px;font-size:16px}
  .keyboard-grid button,.hangman-key button{min-width:28px;min-height:36px;font-size:12px;padding:4px}
  
  /* Canvas games — scale to viewport */
  .spin-canvas,.trace-canvas{max-width:100%;height:auto}
  
  /* Team/score displays */
  .team-row,.score-row{flex-direction:column;gap:4px}
  .team-badge,.score-badge{font-size:12px;padding:6px 10px}
  
  /* Game cards and grids */
  .game-grid,.card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  
  /* Modals and overlays */
  .game-overlay,.game-modal{width:95vw;max-height:85vh;padding:16px}
  
  /* Sentence builder */
  .sentence-words{gap:4px}
  .sentence-words button{padding:6px 10px;font-size:13px}
  
  /* Category sort */
  .category-box{min-width:100%;margin:4px 0}
  .category-item{font-size:12px;padding:6px}
  
  /* Wheel */
  .spin-wheel-wrap{transform:scale(0.7)}
  
  /* Team challenge */
  .tc-teams{flex-direction:column}
  .tc-team{width:100%}
  
  /* Reveal game */
  .reveal-tiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:400px){
  .keyboard-grid button,.hangman-key button{min-width:24px;min-height:32px;font-size:10px}
  .bingo-cell,.jeopardy-cell{min-width:24px;min-height:24px;font-size:9px}
  .game-grid,.card-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .reveal-tiles{grid-template-columns:repeat(2,1fr)}
  .spin-wheel-wrap{transform:scale(0.55)}
}