/*version 2*/
    :root{
      --paper:#9E90D8;
      --accent:#ffcc66;
      --ink:#111;
      --text:#000;
      --heading:#fff;
      --cardW: clamp(98px, 22vw, 190px); 
      --cardH: calc(var(--cardW) * 1.58);
      --gap: 12px;
    }
    body{
      margin:0; background:var(--paper);
      font-family:'Patrick Hand', cursive;
      font-size: clamp(16px, 1.8vw, 18px);
      line-height: 1.4;
      font-weight: 600;
      color: var(--text);
      display:flex; min-height:100dvh; flex-direction:column;
    }
    #mainDiv{
        background: var(--paper);
    }
    h1{font-size:1.3rem;text-transform:uppercase;margin:0;letter-spacing: -0.5px;}
    .container{ max-width:900px; margin:0 auto; padding:16px; flex: 1 0 auto; }
    header{ display:flex; justify-content:center; flex-direction:column; align-items:center; gap:10px; }
    header img{ max-width:160px; height:auto; }
    .actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
    button.cartoon{
      background:var(--accent); border:none; border-radius:16px; padding:12px 14px; font-size:1.1rem; cursor:pointer;
      box-shadow:3px 3px 0 var(--ink);
    }
    .table{ position:relative; min-height: calc(var(--cardH) * 2 + 60px); margin-top:30px;margin-bottom:20px; display:flex; justify-content:center; align-items:center; overflow:visible; }
   .card{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width: var(--cardW); height: var(--cardH);
      backface-visibility:hidden; border:none; box-shadow:none; border-radius:8px;
      background:url('https://bittydeck.com/img/verso_.png') center/cover no-repeat;
    }
    .status{
      text-align:center; margin-top:10px; font-size:1.3rem; color: var(--text);
      display:block; min-height: 1.5rem;
    }
    .result{ margin-top:14px; border:2px dashed var(--ink); border-radius:10px; padding:12px; background:#fff; display:none; font-size:1.1rem; color: var(--ink);    max-height: 60vh;
    overflow: scroll; }
    /* Barra de rolagem do resultado */
    .result {
      overflow: auto;               /* deixa rolagem aparecer quando necessário */
      scrollbar-width: thin;        /* Firefox */
      scrollbar-color: #b394ff #efeaff; /* Firefox: polegar | trilho */
    }
    
    /* WebKit (Chrome/Edge/Safari) */
    .result::-webkit-scrollbar {
      width: 10px;
    }
    .result::-webkit-scrollbar-track {
      background: #efeaff;
      border-radius: 8px;
    }
    .result::-webkit-scrollbar-thumb {
      background: #b394ff;
      border-radius: 8px;
      border: 2px solid #efeaff; /* dá “respiro” */
    }
    .result::-webkit-scrollbar-thumb:hover {
      background: #9b82ff;
    }
    #deck{ position:relative; width:100%; min-height: calc(var(--cardH) * 2 + 40px); display:flex; justify-content:center; align-items:center; }
    .spread{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--gap); max-width: calc(var(--cardW) * 3 + var(--gap) * 2); margin: 0 auto; }
    .face{ position:relative; display:flex; flex-direction:column; align-items:center; }
    .face img{ width: var(--cardW); height: var(--cardH); display:block; object-fit: cover; border-radius:8px; }

    /* Modal base */
    .modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
    .modal.open{ display:flex; }
    .modal[hidden]{ display:none !important; }
    .modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
    .modal .dialog{ position:relative; z-index:1; width:min(90vw, 500px); max-height:min(85vh, 600px); overflow:auto; display:flex; flex-direction:column; background:#fff8e6; border:3px solid var(--ink); border-radius:16px; box-shadow:6px 6px 0 var(--ink); padding:16px 16px 20px; color: var(--ink); }
    .modal .dialog h2{ margin:0 0 8px; font-size:clamp(18px, 2.8vw, 24px); }
    .modal .dialog .hint{ margin:0 0 8px; opacity:.85; font-size:0.95rem; }
    .modal .dialog .error{ margin-top:6px; color:#b00020; font-weight:700; display:none; }
    .modal .dialog .modal-actions{ margin-top:10px; display:flex; justify-content:flex-end; gap:8px; }
    .modal .close{ position:absolute; top:6px; right:6px; background:transparent; border:2px solid var(--ink); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; line-height:28px; }

    /* Modal pergunta */
    .modal .dialog textarea{ width:100%; min-height:120px; max-height:40vh; resize:vertical; border:2px solid var(--ink); border-radius:12px; padding:10px 12px; font-size:0.9rem; background:#fff; box-sizing:border-box; }
    /* Modal "What is this?" */
    .modal .dialog .content{
      white-space: pre-line;
      font-size: 1.1rem;
    }
    h2,h3,strong { color: #000000; }
    a { color: var(--heading); text-decoration-thickness: 1.5px; }

    /* --- Crystal ball (mostra só no ritual) --- */
    .scry{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:5; }
    .scry.hidden{ display:none; }
    .orb{
      width: min(50vmin, calc(var(--cardH) * 0.85));
      height: min(50vmin, calc(var(--cardH) * 0.85));
      border-radius: 50%;
      position: relative; overflow: hidden;
      background:
        radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,.95), rgba(200,180,255,.35) 50%, rgba(20,10,40,.25) 70%, rgba(0,0,0,.35) 100%);
      box-shadow:
        0 0 30px rgba(255,255,255,.25),
        0 0 70px rgba(173,133,255,.25),
        inset 0 0 20px rgba(255,255,255,.25);
    }
    .orb::after{ content:""; position:absolute; left:50%; bottom:-12%; width: 60%; height: 20%; transform: translateX(-50%); background: radial-gradient(60% 80% at 50% 0%, rgba(0,0,0,.25), transparent 70%); filter: blur(5px); }
    .swirl{ position:absolute; inset:-20%; background: conic-gradient(from 0deg, rgba(255,255,255,.12) 0 12%, rgba(255,255,255,0) 12% 46%, rgba(255,255,255,.12) 46% 60%, rgba(255,255,255,0) 60% 100%); filter: blur(6px); animation: spin 9s linear infinite; }
    .mist{ position:absolute; inset:-10%; background: radial-gradient(ellipse at 30% 35%, rgba(255,255,255,.24), transparent 45%), radial-gradient(ellipse at 70% 60%, rgba(255,255,255,.18), transparent 55%); filter: blur(8px); opacity:.8; animation: drift 6.5s ease-in-out infinite alternate; }
    .glow{ position:absolute; inset:0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 55%); mix-blend-mode: screen; animation: pulse 3.2s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes drift { from { transform: translate(-2%, -3%) scale(1.02); } to { transform: translate(2%, 3%) scale(1.06); } }
    @keyframes pulse { 0%,100% { opacity:.45 } 50% { opacity:.75 } }

    /* Footer */
    footer.site-footer{
      background:#222; color:#fff; padding:12px 16px; text-align:center; margin-top:20px; flex-shrink:0;
      font-size: clamp(14px, 1.6vw, 14px);
    }
    footer.site-footer a{ color:#fff; text-decoration: underline; text-decoration-thickness:1.5px; }

    /* Mobile */
    @media (max-width: 640px){
      .container{ padding:12px; }
      header img{ max-width:135px; }
      h1{ font-size:1.2rem; }
      button.cartoon{ padding:10px 12px; font-size:1.2rem; }
      .table{ min-height: calc(var(--cardH) * 2 + 40px); margin-top:20px; }
      .status{ font-size:1.7rem; }
      .result{ font-size:1.3rem; padding:10px; }
      
      .spread{ max-width: calc(var(--cardW) * 2 + var(--gap) * 1); }
      .spread.count-3 .face, 
      .spread.count-1 .face{ 
        position: static; 
        transform: none; 
        z-index: auto; 
      }
    }
    /* escala final das cartas selecionadas */
    .spread .carta-virada.selecionada {
      transform: scale(1.30);
    }
    
    /* container especial quando empilho em diagonal no mobile */
    .spread.diagonal-stack {
      position: relative;
      width: 100%;
      max-width: calc(var(--cardW) * 1.6);
      height: calc(var(--cardH) * 1.6);
      margin-inline: auto;
      display: block; /* deixa de ser flex enquanto empilhado */
    }
    
    /* base para cada carta posicionada */
    .spread.diagonal-stack .carta-virada {
      position: absolute !important;
      top: 50%; left: 50%;
      transform-origin: center center;
      /* a classe .selecionada já dá scale(1.15); o JS soma translate/rotate */
    }
    
    /* desktop/tablet: manter em linha */
    @media (min-width: 641px) {
      .spread:not(.diagonal-stack) {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--gap);
        justify-content: center;
      }
    }
    /* Modal de língua - cartoon */
    .lang-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
    .lang-btn{
      background:#fff; border:2px solid var(--ink); border-radius:16px; padding:14px 8px; cursor:pointer;
      box-shadow:3px 3px 0 var(--ink); font-size:0.95rem; text-align:center;
    }
    .lang-btn:hover{ transform: translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
    #shareWrap {
        display: none; /* escondido até o JS decidir mostrar */
    }

    /* NOVOS ESTILOS PARA ANIMAÇÃO DE CARTAS */
    .monte-cartas {
      cursor: pointer;
      transition: transform 0.3s ease;
      position: relative;
      width: var(--cardW);
      height: var(--cardH);
    }
    .monte-cartas:hover {
      transform: scale(1.05);
    }
    .carta-embaralhando {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all 0.3s ease;
      border-radius: 8px;
    }
    .montes-container {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin: 16px 0;
      flex-wrap: wrap;
    }
    .monte {
      position: relative;
      transition: transform 0.3s ease;
      width: var(--cardW);
      height: var(--cardH);
        box-shadow: black 5px 5px;
        border-radius: 5px;
    }
    .monte:hover {
      transform: translateY(-8px);
      cursor:pointer;
    }
    
    /* Cartas viradas */
    .carta-virada {
      position: relative;
      width: var(--cardW);
      height: var(--cardH);
      cursor: pointer;
      perspective: 1000px;
    }
    .carta-virada .frente,
    .carta-virada .verso {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 8px;
      transition: transform 0.6s ease;
    }
    .carta-virada .verso {
      background: url('https://bittydeck.com/img/verso_.png') center/cover no-repeat;
      transform: rotateY(0deg);
    }
    .carta-virada .frente {
      transform: rotateY(180deg);
    }
    .carta-virada.virar .verso {
      transform: rotateY(180deg);
    }
    .carta-virada.virar .frente {
      transform: rotateY(0deg);
    }
    
    .carta-selecionavel {
      transition: all 0.3s ease;
      border-radius: 8px;
    }
    .carta-selecionavel:hover {
      transform: scale(1.05);
    }
    .carta-selecionavel.selecionada {
      border: 3px solid var(--accent);
      box-shadow: 0 0 12px rgba(255, 204, 102, 0.5);
      transform: scale(1.1);
    }
    
    /* Grid responsivo para cartas */
    .grid-cartas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      margin: 0 auto;
      max-width: calc(var(--cardW) * 3 + var(--gap) * 2);
    }
    
    @media (max-width: 768px) {
      .grid-cartas {
        grid-template-columns: repeat(3, 1fr);
        max-width: calc(var(--cardW) * 3 + var(--gap) * 2);
    }
    
    @media (max-width: 480px) {
      .grid-cartas {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      
      .montes-container {
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }
      
      .monte {
        margin-bottom: 8px;
      }
      
      .lang-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }