/* TAROTEYES mobile simplification layer.
   Intentionally separate from the large page styles so mobile tuning can evolve
   without changing the desktop composition. */

@media (max-width:620px){
  /* Mobile-only simplification requested for the upload pass.
     Keep the defaults active in the runtime, but remove their large visual panels. */
  .tlh10-mode-wrap,
  .tlh14-deck-policy{
    display:none!important;
  }

  /* The reader already has its own focused ritual UI on phones.
     Remove the desktop-style reader top bar during the mobile experience. */
  .tlv10__topbar{
    display:none!important;
  }

  /* Orientation defaults remain active; the large selector and explanatory hint
     are desktop controls and only add clutter on a phone. */
  .tlv13__orientation-choice,
  .tlv10__physical-hint{
    display:none!important;
  }

  /* Intake/questions: the method recommendation is useful on desktop, but it
     consumes too much vertical space on a phone after the method is chosen. */
  .tlh11-intake-layout .tlh11-method-sidebar{
    display:none!important;
  }
  .tlh11-intake-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Shuffle/cut ritual: make the physical deck deliberately smaller so the
     controls and the deck can coexist without crowding the viewport. */
  .tlv10__physical-app{
    --shuffle-card-w:104px!important;
    --shuffle-card-h:180px!important;
  }
  .tlv10__physical-deck{
    width:var(--shuffle-card-w)!important;
    height:var(--shuffle-card-h)!important;
    top:59%!important;
  }
  .tlv10__physical-shadow{
    width:178px!important;
    height:54px!important;
    top:70%!important;
  }

  /* Card selection: cards stay central and slightly smaller on phones. */
  .tlv10__selector-workspace{
    grid-template-rows:minmax(390px,56vh) 94px!important;
  }
  .tlv10__selector-stage{
    --tarotlab-fan-center-y:42%!important;
    min-height:390px!important;
  }
  .tlv10__fan{
    width:100%!important;
    height:300px!important;
    top:42%!important;
  }
  .tlv10__fan-card{
    width:96px!important;
    height:144px!important;
  }
  .tlv10__focus-marker{
    top:42%!important;
    transform:translate(-50%,calc(-50% - 72px - 9px))!important;
  }

  /* The direct-number trick no longer sits over the card fan. On mobile only
     the actual number input and action remain, compact at the bottom. */
  .tlv10__selector-open-note{
    top:auto!important;
    bottom:10px!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    z-index:540!important;
  }
  .tlv10__choice-trick{
    display:block!important;
    padding:6px 7px!important;
    border-radius:11px!important;
    background:rgba(4,15,22,.92)!important;
    backdrop-filter:blur(10px)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
  }
  .tlv10__choice-trick-copy{
    display:none!important;
  }
  .tlv10__number-jump{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:6px!important;
  }
  .tlv10__number-jump input{
    width:68px!important;
    height:38px!important;
    min-height:38px!important;
    font-size:16px!important;
  }
  .tlv10__number-jump button{
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }
  .tlv10__selector-help,
  .tlv30__selector-undo-note,
  .tlv10__focus-copy{
    display:none!important;
  }

  /* Keep side arrows usable, but less dominant than the cards. */
  .tlv10__fan-arrow{
    width:48px!important;
    height:48px!important;
  }
  .tlv10__fan-arrow span{
    height:36px!important;
    margin-top:-5px!important;
    font-size:42px!important;
    line-height:36px!important;
  }
  .tlv10__fan-arrow--prev{left:5px!important}
  .tlv10__fan-arrow--next{right:5px!important}
}

@media (max-width:400px){
  .tlv10__physical-app{
    --shuffle-card-w:96px!important;
    --shuffle-card-h:166px!important;
  }
  .tlv10__selector-workspace{
    grid-template-rows:minmax(365px,54vh) 88px!important;
  }
  .tlv10__selector-stage{min-height:365px!important}
  .tlv10__fan{height:278px!important}
  .tlv10__fan-card{
    width:90px!important;
    height:135px!important;
  }
  .tlv10__focus-marker{
    transform:translate(-50%,calc(-50% - 67.5px - 8px))!important;
  }
}