:root {
      --ink: #0d0a0e;
      --parchment: #f5efe6;
      --gold: #c9a84c;
      --gold-light: #e8c97a;
      --gold-dim: #a68b3c;
      --mist: #c8bfb0;
      --card-bg: rgba(18, 12, 22, 0.93);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      background-color: var(--ink);
      color: var(--parchment);
      font-family: 'EB Garamond', serif;
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.65;
    }

    /* ── fundo estrelado ── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 28%, rgba(42,20,60,0.9) 0%, transparent 52%),
        radial-gradient(ellipse at 82% 72%, rgba(26,10,36,0.85) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 50%, rgba(20,10,30,0.5) 0%, transparent 70%),
        var(--ink);
    }
    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        radial-gradient(1px 1px at 8%  12%, rgba(255,255,255,.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 22%  6%, rgba(255,255,255,.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 38% 28%, rgba(255,255,255,.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 54% 10%, rgba(255,255,255,.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 22%, rgba(255,255,255,.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 83%  8%, rgba(255,255,255,.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 93% 38%, rgba(255,255,255,.60) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 14% 52%, rgba(201,168,76,.30) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 44% 68%, rgba(201,168,76,.22) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 73% 78%, rgba(201,168,76,.18) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 62%, rgba(201,168,76,.28) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 92%, rgba(255,255,255,.30) 0%, transparent 100%);
      animation: twinkle 6s ease-in-out infinite alternate;
    }
    @keyframes twinkle { from { opacity: .35; } to { opacity: .95; } }

    /* ── screens ── */
    .screen { display: none; position: relative; z-index: 1; min-height: 100vh; padding: 24px 16px 56px; }
    .screen.active { display: block; animation: fadeUp .5s ease; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

    .container { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
    .container-wide { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

    /* ── typography ── */
    h1 {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.9rem, 6vw, 3rem);
      color: var(--gold);
      letter-spacing: .07em;
      text-align: center;
      text-shadow: 0 0 32px rgba(201,168,76,.55), 0 0 70px rgba(201,168,76,.18);
    }
    h2 { font-family: 'Cinzel', serif; font-size: clamp(1.05rem, 3vw, 1.45rem); color: var(--gold-light); letter-spacing: .05em; margin-bottom: 12px; }
    h3 { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold-dim); letter-spacing: .05em; margin-bottom: 8px; }
    p { font-size: 1.08rem; line-height: 1.8; color: var(--parchment); }
    .intro { text-align: center; font-style: italic; color: var(--mist); font-size: 1.12rem; }
    .mantra { text-align: center; font-style: italic; color: rgba(201,168,76,.45); font-size: .92rem; letter-spacing: .05em; margin-top: 6px; }

    /* ── card moldura ── */
    .card-box {
      background: var(--card-bg);
      border: 1px solid rgba(201,168,76,.22);
      border-radius: 14px;
      padding: 30px 26px;
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 55px rgba(0,0,0,.62), inset 0 0 28px rgba(201,168,76,.03);
    }

    /* ── divisor ── */
    .div-line { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 300px; margin: 0 auto; }
    .div-bar { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
    .div-sym { color: var(--gold-light); font-size: 1.15rem; text-shadow: 0 0 8px currentColor; }

    /* ── form ── */
    .campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .campo label { font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity: .8; }
    .campo textarea, .campo input, .campo select {
      background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.22);
      border-radius: 8px; color: var(--parchment);
      font-family: 'EB Garamond', serif; font-size: 1.05rem;
      padding: 11px 15px; outline: none; transition: all .3s; width: 100%;
    }
    .campo textarea { resize: vertical; min-height: 78px; }
    .campo textarea:focus, .campo input:focus, .campo select:focus {
      border-color: rgba(201,168,76,.6); box-shadow: 0 0 0 3px rgba(201,168,76,.07);
      background: rgba(255,255,255,.06);
    }
    .campo select option { background: #1a1118; }

    /* ── gender selector ── */
    .gender-row { display: flex; gap: 12px; }
    .gbtn {
      flex: 1; padding: 14px 10px; text-align: center; cursor: pointer;
      background: rgba(255,255,255,.03); border: 1px solid rgba(201,168,76,.22);
      border-radius: 10px; transition: all .3s; font-family: 'Cinzel', serif;
      font-size: .75rem; letter-spacing: .14em; color: var(--mist);
    }
    .gbtn:hover { border-color: rgba(201,168,76,.5); color: var(--gold-light); }
    .gbtn.sel { background: rgba(201,168,76,.1); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 22px rgba(201,168,76,.14); }
    .gbtn span { display: block; font-size: 2rem; margin-bottom: 7px; }

    /* ── spread grid ── */
    .spread-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
    .sopt {
      padding: 18px 14px; text-align: center; cursor: pointer;
      background: rgba(255,255,255,.03); border: 1px solid rgba(201,168,76,.18);
      border-radius: 10px; transition: all .3s; position: relative; overflow: hidden;
    }
    .sopt:hover { border-color: rgba(201,168,76,.5); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
    .sopt.sel { border-color: var(--gold); background: rgba(201,168,76,.08); box-shadow: 0 0 28px rgba(201,168,76,.14); }
    .sopt-num { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
    .sopt-name { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 5px; }
    .sopt-sub { font-size: .86rem; color: var(--mist); line-height: 1.35; }
    .sopt-nivel { display: inline-block; margin-top: 8px; font-family: 'Cinzel', serif; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); border: 1px solid rgba(201,168,76,.22); border-radius: 20px; padding: 2px 9px; }

    /* ── variants ── */
    .var-list { display: flex; flex-direction: column; gap: 10px; }
    .vopt {
      padding: 14px 18px; cursor: pointer;
      background: rgba(255,255,255,.03); border: 1px solid rgba(201,168,76,.18);
      border-radius: 8px; transition: all .3s;
    }
    .vopt:hover { border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.06); }
    .vopt.sel { border-color: var(--gold); background: rgba(201,168,76,.1); }
    .vopt-name { font-family: 'Cinzel', serif; font-size: .82rem; color: var(--gold-light); margin-bottom: 4px; }
    .vopt-uso { font-size: .94rem; color: var(--mist); }

    /* ── buttons ── */
    .btn-p {
      font-family: 'Cinzel', serif; font-size: .76rem; letter-spacing: .25em; text-transform: uppercase;
      color: #0d0a0e; background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border: none; border-radius: 8px; padding: 15px 40px; cursor: pointer;
      transition: all .3s; width: 100%; box-shadow: 0 4px 22px rgba(201,168,76,.28);
    }
    .btn-p:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,168,76,.45); }
    .btn-p:active { transform: translateY(0); }
    .btn-p:disabled { opacity: .38; cursor: not-allowed; transform: none; }
    .btn-s {
      font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold); background: transparent; border: 1px solid rgba(201,168,76,.38);
      border-radius: 8px; padding: 12px 26px; cursor: pointer; transition: all .3s;
    }
    .btn-s:hover { background: rgba(201,168,76,.08); border-color: var(--gold); }
    .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-row .btn-p, .btn-row .btn-s { flex: 1; min-width: 140px; }

    /* ── shuffle screen ── */
    .shuffle-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62vh; gap: 30px; text-align: center; }
    .shuffle-deck { position: relative; width: 200px; height: 140px; margin: 0 auto; }
    .sh-card {
      position: absolute; width: 68px; height: 98px;
      background: linear-gradient(145deg, #1c1030, #2a1840);
      border: 1px solid rgba(201,168,76,.38); border-radius: 8px;
      box-shadow: 0 4px 18px rgba(0,0,0,.55);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; color: rgba(201,168,76,.35);
    }
    .sh-card:nth-child(1) { left: 0; top: 20px; animation: sh1 1.6s ease-in-out infinite; }
    .sh-card:nth-child(2) { left: 66px; top: 0; animation: sh2 1.6s ease-in-out infinite .22s; }
    .sh-card:nth-child(3) { left: 132px; top: 20px; animation: sh3 1.6s ease-in-out infinite .44s; }
    @keyframes sh1 { 0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-18px) rotate(6deg);} }
    @keyframes sh2 { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-22px) rotate(-4deg);} }
    @keyframes sh3 { 0%,100%{transform:translateY(0) rotate(6deg);} 50%{transform:translateY(-18px) rotate(-6deg);} }

    /* ── card flip ── */
    .tiragem-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
    .tiragem-wrap.g3x3 { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 560px; margin: 0 auto; gap: 12px; }
    .card-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .flip { perspective: 1000px; width: 108px; height: 108px; cursor: pointer; }
    .flip-inner { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,0,.2,1); position: relative; }
    .flip.on .flip-inner { transform: rotateY(180deg); }
    .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px; overflow: hidden; }
    .face-back {
      background: linear-gradient(145deg, #1c1030, #2a1840);
      border: 1px solid rgba(201,168,76,.38);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    }
    .face-back-sym { font-size: 1.9rem; color: rgba(201,168,76,.38); text-shadow: 0 0 10px rgba(201,168,76,.25); }
    .face-back-txt { font-family: 'Cinzel', serif; font-size: .48rem; letter-spacing: .18em; color: rgba(201,168,76,.22); text-transform: uppercase; }
    .face-front { transform: rotateY(180deg); border: 1px solid rgba(201,168,76,.48); }
    .face-front img { width: 100%; height: 100%; object-fit: contain; display: block; background: #1a1030; }
    .flip.on .face-front { box-shadow: 0 0 22px rgba(201,168,76,.42), 0 0 44px rgba(201,168,76,.14); }
    .pos-label { font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dim); text-align: center; max-width: 112px; line-height: 1.3; }

    /* ── reading cards ── */
    .rc-list { display: flex; flex-direction: column; gap: 22px; }
    .rc {
      display: flex; gap: 22px; padding: 22px;
      background: rgba(255,255,255,.018); border: 1px solid rgba(201,168,76,.13);
      border-radius: 12px; transition: all .3s;
      animation: cdin .5s ease both;
    }
    @keyframes cdin { from{opacity:0;transform:translateX(-18px);} to{opacity:1;transform:none;} }
    .rc:hover { border-color: rgba(201,168,76,.28); background: rgba(201,168,76,.03); }
    .rc-img { flex-shrink: 0; width: 92px; height: 92px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(201,168,76,.4); box-shadow: 0 4px 18px rgba(0,0,0,.5); }
    .rc-img img { width: 100%; height: 100%; object-fit: contain; display: block; background: #1a1030; }
    .rc-body { flex: 1; min-width: 0; }
    .rc-pos { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 4px; }
    .rc-name { font-family: 'Cinzel', serif; font-size: 1.18rem; color: var(--gold-light); margin-bottom: 11px; }
    .rc-name .num { color: var(--gold-dim); font-size: .88rem; margin-right: 7px; }
    .rc-interp { font-size: .99rem; line-height: 1.78; color: var(--parchment); margin-bottom: 13px; }
    .badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
    .bdg { font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: 1px solid; }
    .bdg-el { color: #a8d4c8; border-color: rgba(168,212,200,.28); background: rgba(168,212,200,.04); }
    .bdg-pol { color: #d4b8a8; border-color: rgba(212,184,168,.28); background: rgba(212,184,168,.04); }
    .bdg-t { color: var(--mist); border-color: rgba(200,191,176,.22); background: rgba(200,191,176,.03); }
    .kwds { display: flex; flex-wrap: wrap; gap: 5px; }
    .kwd { font-family: 'Cinzel', serif; font-size: .56rem; letter-spacing: .1em; color: var(--gold-dim); border: 1px solid rgba(201,168,76,.18); padding: 2px 8px; border-radius: 20px; background: rgba(201,168,76,.04); }

    /* ── combinations ── */
    .comb-item { padding: 14px 18px; background: rgba(201,168,76,.055); border: 1px solid rgba(201,168,76,.32); border-radius: 8px; margin-bottom: 10px; }
    .comb-title { font-family: 'Cinzel', serif; font-size: .72rem; color: var(--gold); margin-bottom: 5px; }
    .comb-desc { font-size: .94rem; color: var(--mist); line-height: 1.6; }

    /* ── synthesis ── */
    .synth-box { padding: 26px; background: rgba(201,168,76,.045); border: 1px solid rgba(201,168,76,.28); border-top: 2px solid var(--gold); border-radius: 10px; }
    .synth-txt { font-style: italic; font-size: 1.08rem; line-height: 1.88; color: var(--parchment); }

    /* ── mini preview ── */
    .mini-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .mini-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .mini-img { width: 72px; height: 72px; border-radius: 5px; overflow: hidden; border: 1px solid rgba(201,168,76,.38); box-shadow: 0 0 14px rgba(201,168,76,.18); }
    .mini-img img { width: 100%; height: 100%; object-fit: contain; background: #1a1030; }

    /* ── grand tableau ── */
    .gt-scroll { overflow-x: auto; padding: 4px 0 8px; }
    .gt-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; min-width: 540px; }
    .gt-cell {
      position: relative; cursor: pointer; border-radius: 5px; overflow: hidden;
      border: 1px solid rgba(201,168,76,.18); transition: all .25s; aspect-ratio: 1/1;
    }
    .gt-cell:hover { border-color: rgba(201,168,76,.65); transform: scale(1.05); z-index: 2; box-shadow: 0 0 16px rgba(201,168,76,.3); }
    .gt-cell.gt-consulente { border-color: var(--gold); box-shadow: 0 0 18px rgba(201,168,76,.45); }
    .gt-cell img { width: 100%; height: 100%; object-fit: contain; display: block; background: #1a1030; }
    .gt-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); padding: 5px 3px 3px; }
    .gt-cnum { font-family: 'Cinzel', serif; font-size: .48rem; color: rgba(201,168,76,.7); line-height: 1; }
    .gt-cbadge { position: absolute; top: 3px; right: 3px; background: var(--gold); color: #0d0a0e; font-size: .52rem; font-family: 'Cinzel', serif; padding: 1px 5px; border-radius: 10px; font-weight: bold; }

    /* ── GT modal ── */
    .gt-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
    .gt-modal.hidden { display: none; }
    .gt-modal-inner { background: #1a1028; border: 1px solid rgba(201,168,76,.38); border-radius: 14px; padding: 26px; max-width: 480px; width: 100%; max-height: 82vh; overflow-y: auto; position: relative; animation: fadeUp .3s ease; }
    .gt-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--gold); font-size: 1.6rem; cursor: pointer; line-height: 1; }
    .gt-modal-img { float: left; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(201,168,76,.4); margin: 0 16px 12px 0; }
    .gt-modal-img img { width: 100%; height: 100%; object-fit: contain; background: #1a1030; }

    /* ── technique list ── */
    .tech-item { padding: 13px 16px; background: rgba(255,255,255,.02); border-left: 2px solid rgba(201,168,76,.38); border-radius: 0 8px 8px 0; margin-bottom: 10px; }
    .tech-name { font-family: 'Cinzel', serif; font-size: .7rem; color: var(--gold); margin-bottom: 4px; }
    .tech-desc { font-size: .9rem; color: var(--mist); line-height: 1.55; }

    /* ── footer ── */
    .rodape { font-size: .68rem; color: rgba(200,191,176,.18); letter-spacing: .16em; font-family: 'Cinzel', serif; text-align: center; margin-top: 10px; }

    /* ── scrollbar ── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
    ::-webkit-scrollbar-thumb { background: rgba(201,168,76,.28); border-radius: 3px; }

    /* ── responsive ── */
    @media (max-width: 600px) {
      .card-box { padding: 18px 14px; }
      .rc { flex-direction: column; }
      .rc-img { width: 76px; height: 76px; }
      .flip { width: 86px; height: 86px; }
      .spread-grid { grid-template-columns: repeat(2, 1fr); }
      .gt-grid { grid-template-columns: repeat(9, minmax(38px, 1fr)); }
    }