/* CHEER4 v2.3.0 — Complete stylesheet */
#c4-app{display:flex;flex-direction:column;align-items:center;max-width:620px;margin:0 auto;padding:12px 8px 24px;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#1a1a2e;-webkit-tap-highlight-color:transparent;user-select:none}
#c4-app *{box-sizing:border-box}

/* Title */
.c4-title-block{text-align:center;margin-bottom:8px}
.c4-logo{font-size:36px;font-weight:800;letter-spacing:-1px;margin:8px 0 2px;background:linear-gradient(135deg,#6aaa64,#c9b458);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.c4-subtitle{font-size:14px;color:#666;margin:0 0 2px}
.c4-tagline{font-size:12px;color:#999;margin:0;font-style:italic}

/* Stats bar */
.c4-stats-bar{display:flex;justify-content:center;gap:16px;padding:10px 0;margin-bottom:4px}
.c4-stats-bar--modal{margin-bottom:12px}
.c4-stat-item{display:flex;flex-direction:column;align-items:center}
.c4-stat-num{font-size:22px;font-weight:800;line-height:1.1}
.c4-stat-lbl{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px}

/* Countdown */
.c4-countdown{font-size:15px;font-weight:700;color:#6aaa64;text-align:center;padding:10px 0;letter-spacing:.3px}

/* Picker buttons */
.c4-picker-btns{display:flex;gap:8px;margin-bottom:12px}
.c4-icon-btn{padding:8px 16px;background:#f0f0f0;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:#444;transition:background .15s}
.c4-icon-btn:hover{background:#e4e4e4}

/* Category grid — 4 col desktop/tablet, 2 col mobile */
.c4-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:560px}
.c4-cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 8px;border-radius:14px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(0,0,0,.07);animation:c4-fadeUp .4s both}
.c4-cat-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.c4-cat-card:active{transform:scale(.97)}
.c4-cat-card--played{opacity:.55;cursor:default}
.c4-cat-card--played:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.c4-cat-card--locked{opacity:.35;filter:grayscale(.6);cursor:not-allowed}
.c4-cat-card--locked:hover{transform:none}
.c4-cat-emoji{font-size:26px}
.c4-cat-label{font-size:13px;font-weight:700;color:#333}
.c4-cat-done{font-size:10px;color:#6aaa64;font-weight:600}
.c4-cat-progress{font-size:10px;color:#c9b458;font-weight:600}
.c4-cat-locked{font-size:12px;opacity:.6}
.c4-cat-forfeit{font-size:10px;color:#d9534f;font-weight:600}

/* Header */
.c4-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:484px;margin:0 auto 8px}
.c4-back-btn{background:none;border:none;font-size:14px;cursor:pointer;color:#555;font-weight:600;padding:4px 6px}
.c4-header-center{display:flex;flex-direction:column;align-items:center}
.c4-header-cat{font-size:16px;font-weight:700}
.c4-header-hint{font-size:11px;color:#888;font-style:italic}
.c4-stats-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:4px 6px}

/* Board */
.c4-board{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;margin-top:4px;position:relative}
.c4-row{display:flex;gap:6px;justify-content:center}
.c4-row--shake{animation:c4-shake .4s}
.c4-tile{width:62px;height:62px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;border-radius:6px;text-transform:uppercase;border:2px solid #d3d6da;background:transparent;color:#1a1a2e;transition:border-color .1s}
.c4-tile--tbd{border-color:#878a8c}
.c4-tile--correct{background:#6aaa64 !important;border-color:#6aaa64 !important;color:#fff !important}
.c4-tile--present{background:#c9b458 !important;border-color:#c9b458 !important;color:#fff !important}
.c4-tile--absent{background:#787c7e !important;border-color:#787c7e !important;color:#fff !important}
.c4-tile--reveal{animation:c4-flip .35s both}

/* Keyboard — !important on ALL states to override any theme */
.c4-guess-counter{text-align:center;font-size:13px;color:#888;font-weight:600;padding:4px 0}
.c4-keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:484px}
.c4-kb-row{display:flex;justify-content:center;gap:5px}
.c4-kb-key{min-width:36px;height:58px;border-radius:8px;border:none !important;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 8px;background:#d3d6da !important;color:#1a1a2e !important;transition:background .15s,color .15s;touch-action:manipulation;outline:none !important;box-shadow:none !important}
.c4-kb-key:active{transform:scale(.93)}
.c4-kb-wide{min-width:56px;font-size:22px}
.c4-kb-key--correct{background:#6aaa64 !important;color:#fff !important}
.c4-kb-key--present{background:#c9b458 !important;color:#fff !important}
.c4-kb-key--absent{background:#1a1a2e !important;color:#555 !important;cursor:not-allowed;opacity:.5}

/* Toast — centered on board */
.c4-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:#1a1a2e;color:#fff;padding:12px 24px;border-radius:10px;font-size:16px;font-weight:700;z-index:100;opacity:0;transition:opacity .12s,transform .12s;pointer-events:none;white-space:nowrap}
.c4-toast--visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* End state */
.c4-end{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px;width:100%;max-width:300px;animation:c4-fadeUp .4s both}
.c4-share-btn{width:100%;padding:14px;background:#6aaa64;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}
.c4-share-btn:hover{background:#5c9a58}

/* Email CTA */
.c4-email-block{width:100%;margin-top:6px;padding:16px;background:#f0f4ff;border-radius:12px;text-align:center}
.c4-email-heading{font-size:14px;font-weight:700;margin:0 0 10px;color:#333}
.c4-email-form{display:flex;flex-direction:column;gap:6px}
.c4-email-input{padding:12px;border:2px solid #d3d6da;border-radius:8px;font-size:16px;outline:none;width:100%}
.c4-email-input:focus{border-color:#6aaa64}
.c4-email-btn{padding:12px 16px;background:#1a1a2e;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer}

/* Modal */
.c4-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;animation:c4-fadeIn .15s}
.c4-modal{background:#fff;border-radius:16px;padding:24px;width:calc(100% - 32px);max-width:360px;max-height:85vh;overflow-y:auto;animation:c4-slideUp .25s}
.c4-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.c4-modal-header h2{margin:0;font-size:20px}
.c4-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#999;padding:4px 8px}
.c4-modal p{margin:8px 0;font-size:14px;line-height:1.5}
.c4-modal-btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.c4-modal-btns button{width:100%;padding:14px;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer}
.c4-btn-danger{background:#d9534f;color:#fff}
.c4-btn-safe{background:#6aaa64;color:#fff}

/* How to play */
.c4-htp-tiles{display:flex;gap:4px;margin:8px 0}
.c4-htp-tile{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;border-radius:4px;color:#fff}
.c4-htp-correct{background:#6aaa64}
.c4-htp-present{background:#c9b458}
.c4-htp-absent{background:#787c7e}

/* Distribution */
.c4-dist-title{font-size:14px;font-weight:700;margin:12px 0 8px;text-align:center}
.c4-dist-chart{display:flex;flex-direction:column;gap:4px}
.c4-dist-row{display:flex;align-items:center;gap:6px}
.c4-dist-label{width:14px;text-align:right;font-size:13px;font-weight:700;color:#666;flex-shrink:0}
.c4-dist-bar-wrap{flex:1}
.c4-dist-bar{min-width:24px;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:700;color:#fff;text-align:right;background:#d3d6da;transition:width .4s}
.c4-dist-bar--filled{background:#787c7e}

/* Leaderboard */
.c4-lb-loading,.c4-lb-empty{text-align:center;color:#888;font-size:14px;padding:16px 0}
.c4-lb-table{display:flex;flex-direction:column}
.c4-lb-row{display:flex;align-items:center;padding:8px 4px;gap:4px;border-bottom:1px solid #f0f0f0}
.c4-lb-row--header{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;border-bottom:2px solid #e0e0e0}
.c4-lb-row--top{background:#fffbeb}
.c4-lb-rank{width:32px;text-align:center;font-weight:700}
.c4-lb-name{flex:1;font-weight:600;font-size:14px}
.c4-lb-val{width:48px;text-align:center;font-size:14px;font-weight:600}

/* Animations */
@keyframes c4-fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes c4-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes c4-slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes c4-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes c4-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* Mobile — 2 columns */
@media(max-width:520px){
  .c4-cat-grid{grid-template-columns:repeat(2,1fr);max-width:340px}
  .c4-cat-card{padding:18px 10px}
  .c4-cat-emoji{font-size:28px}
  .c4-cat-label{font-size:14px}
}
@media(max-width:420px){
  .c4-tile{width:56px;height:56px;font-size:26px}
  .c4-kb-key{min-width:32px;height:52px;font-size:16px;padding:0 5px}
  .c4-kb-wide{min-width:48px;font-size:20px}
}
@media(max-width:360px){
  .c4-tile{width:50px;height:50px;font-size:24px}
  .c4-kb-key{min-width:28px;height:48px;font-size:15px;padding:0 3px}
  .c4-kb-wide{min-width:44px;font-size:18px}
}