/* Fase 20B.13 · Pulido visual de Juegos del Cuervo
   Capa aislada: no modifica lógica, audio, backend ni navegación global. */

#crowGamesOverlay .games-mode,
#crowGamesOverlay .games-option,
#crowGamesOverlay .games-stat,
#crowGamesOverlay .games-question,
#crowGamesOverlay .games-result,
#crowGamesOverlay .btn,
#crowGamesOverlay .close{
  -webkit-tap-highlight-color:transparent;
}

#crowGamesOverlay .games-mode,
#crowGamesOverlay .games-option,
#crowGamesOverlay .btn,
#crowGamesOverlay .close{
  transition:border-color .18s ease,background .18s ease,transform .12s ease,box-shadow .18s ease,color .18s ease;
}

#crowGamesOverlay .games-mode:focus-within,
#crowGamesOverlay .games-option:focus-visible,
#crowGamesOverlay .btn:focus-visible,
#crowGamesOverlay .close:focus-visible,
#crowGamesOverlay .games-sound-toggle:focus-visible{
  outline:2px solid rgba(184,134,98,.72);
  outline-offset:2px;
}

#crowGamesOverlay .games-option:active:not(:disabled),
#crowGamesOverlay .btn:active:not(:disabled),
#crowGamesOverlay .close:active{
  transform:scale(.975);
}

@media(max-width:620px){
  #crowGamesOverlay{
    padding:0;
    align-items:stretch;
    background:rgba(5,5,7,.78);
    backdrop-filter:blur(11px);
  }

  #crowGamesOverlay .crow-games-sheet{
    width:100%;
    max-width:none;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    background:
      radial-gradient(circle at 88% 2%,rgba(140,41,71,.12),transparent 28%),
      linear-gradient(180deg,#111115,#0d0d11 54%,#0b0b0e);
    box-shadow:none;
    overscroll-behavior:contain;
  }

  #crowGamesOverlay .sheet-head{
    padding:max(13px,var(--safeT)) 17px 13px;
    min-height:68px;
    background:rgba(13,13,17,.94);
    border-bottom-color:#2a272e;
    backdrop-filter:blur(15px);
  }

  #crowGamesOverlay .sheet-head .eyebrow{
    font-size:9px;
    letter-spacing:.17em;
    color:#a77c60;
  }

  #crowGamesOverlay .sheet-head h3{
    font-size:23px;
    line-height:1.05;
  }

  #crowGamesOverlay .close{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-color:#39343b;
    background:#17161b;
    font-size:22px;
  }

  #crowGamesOverlay .sheet-body{
    padding:16px 16px calc(24px + var(--safeB));
  }

  #crowGamesOverlay .games-lobby{
    gap:12px;
  }

  #crowGamesOverlay .games-hero{
    padding:16px;
    border-radius:20px;
    border-color:#382f37;
    background:
      radial-gradient(circle at 93% 12%,rgba(184,134,98,.12),transparent 31%),
      linear-gradient(145deg,#171319,#111116 64%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  }

  #crowGamesOverlay .games-hero-top{
    grid-template-columns:minmax(0,1fr) 82px;
    gap:10px;
    align-items:center;
  }

  #crowGamesOverlay .games-hero h4{
    font-size:24px;
    line-height:1.05;
    letter-spacing:-.025em;
  }

  #crowGamesOverlay .games-hero p{
    margin-top:8px;
    max-width:34ch;
    color:#aaa098;
    font-size:11px;
    line-height:1.48;
  }

  #crowGamesOverlay .games-raven-portrait{
    width:82px;
    height:102px;
  }

  #crowGamesOverlay .games-raven-portrait img{
    width:82px;
    height:102px;
  }

  #crowGamesOverlay .games-raven-portrait:before{
    inset:18px 0 5px;
  }

  #crowGamesOverlay .games-stats{
    gap:7px;
    margin-top:14px;
  }

  #crowGamesOverlay .games-stat{
    min-width:0;
    padding:10px 6px 9px;
    border-radius:13px;
    border-color:#332e35;
    background:rgba(10,10,14,.78);
  }

  #crowGamesOverlay .games-stat b{
    font-size:22px;
    line-height:1;
  }

  #crowGamesOverlay .games-stat span{
    margin-top:5px;
    font-size:7.5px;
    letter-spacing:.11em;
  }

  #crowGamesOverlay .games-mode-grid{
    gap:10px;
  }

  #crowGamesOverlay .games-mode{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    min-height:0;
    padding:15px;
    border-radius:18px;
    border-color:#332e35;
    background:linear-gradient(145deg,#17161b,#111115 72%);
    overflow:hidden;
  }

  #crowGamesOverlay .games-mode:before{
    content:"";
    position:absolute;
    left:0;
    top:15px;
    bottom:15px;
    width:2px;
    border-radius:99px;
    background:linear-gradient(180deg,#b88662,#8c2947);
    opacity:.65;
  }

  #crowGamesOverlay .games-mode-icon{
    grid-row:1/4;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin:0;
    border:1px solid #423942;
    border-radius:14px;
    background:rgba(184,134,98,.055);
    color:#d0a17f;
    font-size:22px;
  }

  #crowGamesOverlay .games-mode h5{
    font-size:21px;
    line-height:1.05;
    margin-top:1px;
  }

  #crowGamesOverlay .games-mode p{
    margin:6px 0 12px;
    color:#9a918a;
    font-size:11px;
    line-height:1.45;
  }

  #crowGamesOverlay .games-mode .btn{
    grid-column:2;
    width:100%;
    min-height:46px;
    border-radius:13px;
    font-size:12px;
  }

  #crowGamesOverlay .games-play-head{
    margin:1px 0 11px;
    align-items:center;
  }

  #crowGamesOverlay .games-play-kicker{
    font-size:8px;
    letter-spacing:.15em;
  }

  #crowGamesOverlay .games-play-title{
    margin-top:3px;
    font-size:23px;
  }

  #crowGamesOverlay #gamesQuitBtn{
    min-height:42px;
    min-width:70px;
    padding:8px 13px;
    border-color:#39343b;
  }

  #crowGamesOverlay .games-progress{
    height:6px;
    margin:11px 0 13px;
    background:#27242b;
  }

  #crowGamesOverlay .games-scoreline{
    gap:6px;
    margin-bottom:10px;
  }

  #crowGamesOverlay .games-score-chip{
    padding:6px 9px;
    border-radius:999px;
    border-color:#38323a;
    color:#a99f98;
    font-size:9px;
    background:#111015;
  }

  #crowGamesOverlay .games-timer{
    padding:9px 10px 10px;
    margin-bottom:10px;
    border-radius:14px;
    background:linear-gradient(180deg,#151318,#101014);
  }

  #crowGamesOverlay .games-timer-head{
    min-height:24px;
    font-size:8.5px;
  }

  #crowGamesOverlay .games-timer-head b{
    font-size:15px;
    min-width:34px;
    text-align:right;
  }

  #crowGamesOverlay .games-sound-toggle{
    min-width:38px;
    min-height:38px;
    border-radius:11px;
  }

  #crowGamesOverlay .games-question{
    padding:17px 15px 16px;
    border-radius:19px;
    border-color:#373139;
    background:
      radial-gradient(circle at 100% 0,rgba(184,134,98,.055),transparent 28%),
      #111116;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  }

  #crowGamesOverlay .games-question-number{
    color:#a1785d;
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
  }

  #crowGamesOverlay .games-question-text{
    margin-top:9px;
    font-size:24px;
    line-height:1.16;
    letter-spacing:-.022em;
  }

  #crowGamesOverlay .games-clues{
    gap:8px;
    margin-top:14px;
  }

  #crowGamesOverlay .games-clue{
    padding:9px 11px;
    border-left-width:3px;
    border-radius:0 10px 10px 0;
    background:rgba(184,134,98,.065);
    color:#c1b6ac;
    font-size:11.5px;
    line-height:1.45;
  }

  #crowGamesOverlay .games-options{
    gap:9px;
    margin-top:15px;
  }

  #crowGamesOverlay .games-option{
    position:relative;
    min-height:58px;
    padding:13px 14px;
    border-radius:15px;
    border-color:#3d3740;
    background:linear-gradient(180deg,#18171c,#141318);
    color:#e3dcd4;
    font-size:13px;
    font-weight:650;
    line-height:1.3;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  }

  #crowGamesOverlay .games-option:active:not(:disabled){
    border-color:#795e65;
    background:#1c1920;
  }

  #crowGamesOverlay .games-option.correct{
    border-color:#57926c;
    background:linear-gradient(180deg,rgba(77,139,101,.19),rgba(77,139,101,.10));
    color:#c7ead1;
    box-shadow:inset 3px 0 0 #67b586;
  }

  #crowGamesOverlay .games-option.wrong{
    border-color:#984b58;
    background:linear-gradient(180deg,rgba(161,74,88,.19),rgba(161,74,88,.10));
    color:#f0bec4;
    box-shadow:inset 3px 0 0 #b54d58;
  }

  #crowGamesOverlay .games-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
    margin-top:14px;
  }

  #crowGamesOverlay .games-feedback{
    min-height:0;
    font-size:11px;
    line-height:1.45;
  }

  #crowGamesOverlay .games-actions>div:last-child{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
  }

  #crowGamesOverlay .games-actions>div:last-child .btn:only-child{
    grid-column:1/-1;
  }

  #crowGamesOverlay .games-actions .btn{
    min-height:46px;
    border-radius:13px;
  }

  #crowGamesOverlay .games-result{
    padding:28px 18px 24px;
    border-radius:21px;
    border-color:#3a333b;
    background:
      radial-gradient(circle at 50% 0,rgba(184,134,98,.13),transparent 42%),
      linear-gradient(180deg,#161318,#111116 70%);
  }

  #crowGamesOverlay .games-result-mark{
    font-size:48px;
  }

  #crowGamesOverlay .games-result h4{
    margin-top:7px;
    font-size:30px;
    line-height:1.05;
  }

  #crowGamesOverlay .games-result p{
    max-width:38ch;
    margin-left:auto;
    margin-right:auto;
    color:#a49a92;
    font-size:11px;
  }

  #crowGamesOverlay .games-result-score{
    margin:18px 0 6px;
    font-size:46px;
  }

  #crowGamesOverlay .games-result-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:19px;
  }

  #crowGamesOverlay .games-result-actions .btn{
    min-height:48px;
    border-radius:14px;
  }
}

@media(max-width:380px){
  #crowGamesOverlay .sheet-body{padding-left:13px;padding-right:13px}
  #crowGamesOverlay .games-hero{padding:14px}
  #crowGamesOverlay .games-hero-top{grid-template-columns:minmax(0,1fr) 70px}
  #crowGamesOverlay .games-raven-portrait,
  #crowGamesOverlay .games-raven-portrait img{width:70px;height:92px}
  #crowGamesOverlay .games-hero h4{font-size:22px}
  #crowGamesOverlay .games-mode{grid-template-columns:43px minmax(0,1fr);column-gap:10px;padding:13px}
  #crowGamesOverlay .games-mode-icon{width:40px;height:40px;font-size:20px}
  #crowGamesOverlay .games-question-text{font-size:22px}
}

@media(hover:hover) and (pointer:fine){
  #crowGamesOverlay .games-mode:hover{
    border-color:#4a3e46;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.14);
  }
}

html[data-theme="light"] #crowGamesOverlay .crow-games-sheet{
  background:linear-gradient(180deg,#fffdf9,#f7f2eb);
}
html[data-theme="light"] #crowGamesOverlay .sheet-head{
  background:rgba(255,253,249,.95);
}
html[data-theme="light"] #crowGamesOverlay .games-mode{
  background:linear-gradient(145deg,#fffdf9,#f8f2eb 72%);
  border-color:#d9cec3;
}
html[data-theme="light"] #crowGamesOverlay .games-mode-icon{
  background:rgba(184,134,98,.07);
  border-color:#d7c8ba;
}
html[data-theme="light"] #crowGamesOverlay .games-stat,
html[data-theme="light"] #crowGamesOverlay .games-score-chip,
html[data-theme="light"] #crowGamesOverlay .games-timer{
  background:#fffaf5;
  border-color:#ddd3c8;
}
html[data-theme="light"] #crowGamesOverlay .games-question{
  background:linear-gradient(180deg,#fffdf9,#fbf6f0);
  border-color:#ddd3c8;
}
html[data-theme="light"] #crowGamesOverlay .games-option{
  background:linear-gradient(180deg,#fffdf9,#faf5ef);
  border-color:#d7cfc5;
  color:#3c332d;
}
html[data-theme="light"] #crowGamesOverlay .games-result{
  background:radial-gradient(circle at 50% 0,rgba(184,134,98,.10),transparent 42%),linear-gradient(180deg,#fffdf9,#f7f2eb);
  border-color:#ddd3c8;
}