/* Crossword Craze v2.0.0 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');

.cwc-wrap { font-family:'Nunito',sans-serif; max-width:960px; margin:0 auto; padding:12px; }
.cwc-wrap *, .cwc-wrap *::before, .cwc-wrap *::after { box-sizing:border-box; }

/* SCREENS */
.cwc-screen { display:none; flex-direction:column; align-items:center; gap:16px; }

/* START SCREEN */
#cwc-screen-start { padding:30px 16px; text-align:center; }
.cwc-logo { font-family:'Fredoka One',cursive; font-size:clamp(26px,5vw,40px); background:linear-gradient(135deg,#FF6B9D,#A855F7,#3B82F6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cwc-tagline { color:#6B7280; font-weight:600; font-size:15px; margin-top:4px; }
.cwc-diff-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:360px; margin-top:8px; }
.cwc-diff-btn { padding:18px 12px; border:3px solid transparent; border-radius:16px; font-family:'Fredoka One',cursive; font-size:19px; cursor:pointer; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff; }
.cwc-diff-btn span { font-family:'Nunito',sans-serif; font-size:11px; font-weight:700; opacity:.8; }
.cwc-diff-btn:hover { transform:scale(1.05); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.cwc-diff-easy   { border-color:#10B981; color:#065F46; background:#D1FAE5; }
.cwc-diff-medium { border-color:#F59E0B; color:#92400E; background:#FEF3C7; }
.cwc-diff-hard   { border-color:#3B82F6; color:#1E40AF; background:#DBEAFE; }
.cwc-diff-expert { border-color:#A855F7; color:#6B21A8; background:#F3E8FF; }

/* LOADING */
#cwc-screen-loading { min-height:300px; justify-content:center; }
.cwc-spinner { width:46px; height:46px; border:5px solid #E5E7EB; border-top-color:#A855F7; border-radius:50%; animation:cwc-spin .8s linear infinite; }
@keyframes cwc-spin { to{transform:rotate(360deg)} }
.cwc-loading-txt { font-family:'Fredoka One',cursive; font-size:22px; color:#A855F7; animation:cwc-pulse 1.2s ease-in-out infinite; }
@keyframes cwc-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ERROR */
#cwc-screen-error { min-height:200px; justify-content:center; }
.cwc-error-box { background:#FEE2E2; border:2px solid #EF4444; border-radius:14px; padding:20px; color:#991B1B; font-weight:700; text-align:center; max-width:380px; }

/* GAME SCREEN */
#cwc-screen-game { flex-direction:column; width:100%; }
.cwc-game-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.cwc-pills { display:flex; gap:8px; flex-wrap:wrap; }
.cwc-pill { background:#fff; border-radius:50px; padding:6px 14px; font-weight:800; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.1); color:#A855F7; }
.cwc-pill-title { color:#374151; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cwc-btns { display:flex; gap:6px; flex-wrap:wrap; }

/* BUTTONS */
.cwc-btn { font-family:'Nunito',sans-serif; font-weight:800; font-size:12px; padding:8px 14px; border:none; border-radius:50px; cursor:pointer; transition:transform .15s,box-shadow .15s; white-space:nowrap; }
.cwc-btn:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.18); }
.cwc-btn-green  { background:#D1FAE5; color:#065F46; }
.cwc-btn-yellow { background:#FEF3C7; color:#92400E; }
.cwc-btn-orange { background:#FFEDD5; color:#C2410C; }
.cwc-btn-pink   { background:#FFE4F0; color:#BE185D; }
.cwc-btn-white  { background:#F3F4F6; color:#374151; }

/* CLUE BAR */
.cwc-clue-bar { background:linear-gradient(135deg,#FFF0F7,#F0F4FF); border:2px solid #E9D5FF; border-radius:14px; padding:10px 14px; display:flex; align-items:center; gap:10px; margin-bottom:12px; min-height:48px; font-size:13px; font-weight:700; color:#1E1B2E; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cwc-badge { background:#A855F7; color:#fff; border-radius:50px; padding:3px 10px; font-size:11px; font-weight:800; white-space:nowrap; flex-shrink:0; }
.cwc-clue-text { flex:1; }

/* GAME BODY */
.cwc-game-body { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cwc-grid-wrap { background:#fff; border-radius:16px; padding:14px; box-shadow:0 4px 16px rgba(0,0,0,.1); flex-shrink:0; }
#cwc-grid { display:grid; gap:3px; user-select:none; }

/* CELLS */
.cwc-cell { position:relative; border-radius:5px; }
.cwc-black { background:#1E1B2E; }
.cwc-white { background:#fff; border:2px solid #E5E7EB; cursor:text; transition:transform .1s; }
.cwc-white:hover { border-color:#A855F7; transform:scale(1.05); }
.cwc-active { border-color:#FF6B9D!important; background:#FFF0F7!important; box-shadow:0 0 0 3px rgba(255,107,157,.3); transform:scale(1.08)!important; z-index:2; }
.cwc-highlighted { background:#F0F4FF!important; border-color:#A5B4FC!important; }
.cwc-correct { background:#D1FAE5!important; border-color:#10B981!important; }
.cwc-incorrect { background:#FEE2E2!important; border-color:#EF4444!important; animation:cwc-shake .3s ease; }
@keyframes cwc-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.cwc-num { position:absolute; top:1px; left:2px; font-size:clamp(6px,1.1vw,9px); font-weight:800; color:#6B7280; line-height:1; pointer-events:none; }
.cwc-letter { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Fredoka One',cursive; font-size:clamp(12px,2.2vw,20px); color:#1E1B2E; pointer-events:none; text-transform:uppercase; }
.cwc-revealed-letter { color:#F59E0B; }

/* CLUES PANEL */
.cwc-clues-panel { flex:1; min-width:200px; max-width:320px; display:flex; flex-direction:column; gap:10px; max-height:540px; overflow-y:auto; }
.cwc-clues-panel::-webkit-scrollbar { width:4px; }
.cwc-clues-panel::-webkit-scrollbar-thumb { background:#D8B4FE; border-radius:99px; }
.cwc-clues-section { background:#fff; border-radius:14px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cwc-clues-section h3 { font-family:'Fredoka One',cursive; font-size:17px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.cwc-clues-section.cwc-across h3 { color:#FF6B9D; }
.cwc-clues-section.cwc-down   h3 { color:#3B82F6; }
.cwc-clue-item { display:flex; gap:7px; padding:5px 7px; border-radius:7px; cursor:pointer; transition:background .15s; font-size:12px; line-height:1.4; }
.cwc-clue-item:hover { background:#F9FAFB; }
.cwc-clue-active { background:#FFF0F7!important; }
.cwc-clue-done { opacity:.4; text-decoration:line-through; }
.cwc-clue-num { font-weight:800; color:#A855F7; min-width:20px; font-size:11px; }
.cwc-clue-text { color:#374151; font-weight:600; }

/* WIN MODAL */
.cwc-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:9999; align-items:center; justify-content:center; }
.cwc-modal-overlay.cwc-show { display:flex; }
.cwc-win-box { background:#fff; border-radius:22px; padding:36px 28px; text-align:center; max-width:360px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:cwc-popin .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes cwc-popin { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.cwc-win-emoji { font-size:68px; display:block; margin-bottom:10px; }
.cwc-win-title { font-family:'Fredoka One',cursive; font-size:34px; background:linear-gradient(135deg,#FF6B9D,#A855F7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; }
.cwc-win-sub { color:#6B7280; font-weight:600; font-size:14px; margin-bottom:20px; }
.cwc-win-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* CONFETTI */
.cwc-confetti { position:fixed; pointer-events:none; z-index:99999; border-radius:3px; animation:cwc-fall linear forwards; }
@keyframes cwc-fall { 0%{opacity:1;transform:translateY(-20px) rotate(0)} 100%{opacity:0;transform:translateY(110vh) rotate(720deg)} }

/* HIDDEN INPUT */
#cwc-input { position:fixed; top:-100px; left:-100px; opacity:0; width:1px; height:1px; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .cwc-game-body { flex-direction:column; }
  .cwc-clues-panel { max-width:100%; max-height:260px; flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .cwc-clues-section { min-width:180px; }
}

/* ── v1.5 START SCREEN ─────────────────────────── */
.cwc-tagline { color:#5A6A8A; font-size:13px; font-weight:600; margin:0; letter-spacing:0.5px; }

.cwc-filters { display:flex; flex-direction:column; gap:12px; width:100%; max-width:480px; }

.cwc-filter-group { display:flex; flex-direction:column; gap:6px; }

.cwc-filter-label {
  font-family:'Orbitron',monospace;
  font-size:9px;
  letter-spacing:3px;
  color:#5A6A8A;
  padding-left:2px;
}

.cwc-filter-btns { display:flex; flex-wrap:wrap; gap:6px; }

.cwc-filter-btn {
  background:#161C2C;
  border:1px solid #1E2A48 !important;
  border-radius:6px;
  padding:7px 14px;
  font-family:'Orbitron',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:#5A6A8A;
  cursor:pointer;
  transition:all 0.14s;
}

.cwc-filter-btn:hover {
  border-color:#F5C828 !important;
  color:#F5C828;
}

.cwc-filter-btn.cwc-active {
  background:rgba(245,200,40,0.12);
  border-color:#F5C828 !important;
  color:#F5C828;
}

.cwc-btn-play {
  width:100%;
  max-width:480px;
  padding:15px;
  background:#F5C828;
  color:#000;
  border:none !important;
  border-radius:10px;
  font-family:'Orbitron',monospace;
  font-size:15px;
  font-weight:900;
  letter-spacing:4px;
  cursor:pointer;
  transition:all 0.15s;
  margin-top:4px;
}

.cwc-btn-play:hover {
  background:#FFD040;
  box-shadow:0 0 28px rgba(245,200,40,0.45);
  transform:translateY(-2px);
}

/* ── HAWKS ARCADE BRAND v1.5 ───────────────────── */
.ha-logo-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:6px;
}
.ha-logo-img {
  width:220px;
  height:auto;
  filter:drop-shadow(0 0 18px rgba(245,200,40,0.35));
  animation:ha-logo-float 3s ease-in-out infinite;
}
@keyframes ha-logo-float {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}

/* Override start screen to dark arcade theme */
#cwc-screen-start {
  background: #08090F;
  color: #EEF2FF;
  min-height: 460px;
  border-radius: 14px;
}