/* Jack’s punch deck. IBM 5081 stock: manila, iron gall, ledger terracotta. */
:root{
  --paper:#d9cb9e;
  --paper-2:#dfdbcf;
  --well:#cfc19a;
  --ink:#161814;
  --navy:#161814;
  --scarlet:#b2533e;
  --gold:#7b8070;
  --dim:#7b8070;
  --font:"Courier New", Courier, "Lucida Console", monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.45}
body{padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
button,textarea{font:inherit;color:inherit;background:var(--paper);border:1.5px solid var(--navy);
  border-radius:0;appearance:none}
button{padding:.7rem .9rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:2.8rem}
button:active{background:var(--navy);color:var(--paper)}
textarea{display:block;width:100%;resize:vertical;min-height:5.2rem;padding:.7rem .7rem;line-height:1.45;
  caret-color:var(--scarlet);outline:none;background:var(--well);font-size:16px}
textarea::placeholder{color:var(--dim)}
a{color:var(--navy)}

.site-mark{margin:0 0 18px;letter-spacing:.16em;text-transform:uppercase;color:var(--scarlet);font-size:10px}
.site-mark a{color:inherit;text-decoration:none}
.site-mark a:hover,.site-mark a:focus-visible{text-decoration:underline}

#app{max-width:44rem;margin:0 auto}
header{margin-bottom:1.6rem;border-bottom:3px solid var(--navy);padding-bottom:1rem}
.guild{margin:0 0 8px;font-size:10px;letter-spacing:.2em;color:var(--navy)}
h1{margin:0 0 8px;font-size:clamp(1.3rem,4vw,1.7rem);letter-spacing:.14em;font-weight:400}
.rule{margin:0;font-size:11px;letter-spacing:.06em;color:var(--dim)}

#dealer{display:flex;align-items:center;gap:14px;margin:0 0 1.4rem;padding:10px 12px;
  border:1.5px solid var(--navy);background:var(--well)}
#jackPet{width:96px;height:96px;flex:0 0 96px;image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--paper);border:1.5px solid var(--navy)}
.dealer-name{margin:0;letter-spacing:.16em;font-size:12px}
#jackForm{margin:4px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#dealer.dealing #jackForm{color:var(--scarlet)}

.label{margin:0 0 8px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
#controls{display:flex;flex-direction:column;gap:1.2rem}
#controls[hidden]{display:none}
.spread-buttons{display:flex;flex-wrap:wrap;gap:6px}
.spread-btn{font-size:11px;padding:.4rem .65rem;min-height:2.2rem}
.spread-btn.active{background:var(--navy);color:var(--paper);border-color:var(--navy)}
#draw-btn{background:var(--navy);color:var(--paper);border-color:var(--navy);width:100%;letter-spacing:.16em}
.small-note{margin:0;font-size:11px;color:var(--dim)}

#reading-area[hidden],#question-echo[hidden],#hopper-loading[hidden],#reading-text[hidden],#reading-actions[hidden]{display:none}
#cards-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 1.2rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 12px}
#cards-grid[data-count="5"],#cards-grid[data-count="10"]{flex-wrap:nowrap;justify-content:flex-start;
  scroll-snap-type:x proximity}
.card-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;
  color:inherit;text-decoration:none;background:transparent;border:0;padding:0;min-height:0;
  letter-spacing:normal;text-transform:none;
  flex:0 0 auto;scroll-snap-align:center;cursor:pointer;
  opacity:0;transform:translate(var(--from-x,0),var(--from-y,0)) rotate(-16deg) scale(.28);
  transition:transform .55s cubic-bezier(.2,.85,.2,1),opacity .32s ease}
.card-wrap.dealt{opacity:1;transform:none}
.card-wrap:active{background:transparent;color:inherit}
.card-wrap:focus-visible{outline:2px solid var(--scarlet);outline-offset:3px}
.ttg-card{display:block;width:min(42vw,8.4rem);height:auto;aspect-ratio:1/1.414;object-fit:cover;
  border:1.5px solid var(--navy);background:var(--well);
  filter:drop-shadow(2px 3px 0 rgba(22,24,20,.18))}
.ttg-card.reversed{transform:rotate(180deg);filter:drop-shadow(2px 3px 0 rgba(178,83,62,.28))}
#cards-grid[data-count="1"] .ttg-card{width:min(70vw,12rem)}
#cards-grid[data-count="3"] .ttg-card{width:min(28vw,8.2rem)}
.card-position{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.card-name-below{font-size:11px;text-align:center;color:var(--ink);max-width:8.4rem;line-height:1.25}
.card-name-below.reversed{font-style:italic;color:var(--scarlet)}
.inspect-hint{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.question-echo{margin:0 0 12px;font-size:13px;color:var(--navy)}
#hopper-loading{margin:1rem 0;letter-spacing:.12em;color:var(--navy)}
#reading-text{margin:0;padding:14px;border:1.5px solid var(--navy);background:var(--well);white-space:pre-wrap;font-size:15px;line-height:1.5}
#reading-text p{margin:0 0 1em}
#reading-text p:last-child{margin:0}
#reading-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
#reading-actions[hidden]{display:none}
.action-btn{font-size:10px}
.action-btn.done{background:var(--navy);color:var(--paper)}
.inspect{width:min(40rem,calc(100vw - 16px));max-height:min(92vh,40rem);border:2px solid var(--navy);
  background:var(--paper);color:var(--ink);padding:0;overflow:auto}
.inspect::backdrop{background:rgba(22,24,20,.5)}
.inspect-inner{margin:0;padding:16px 14px 0}
.inspect-kicker{margin:0 0 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--scarlet)}
.inspect-grid{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:14px;align-items:start}
.inspect-card .ttg-card{width:100%}
.inspect-station{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.inspect-copy h2{margin:0 0 8px;font-size:clamp(1.1rem,4vw,1.45rem);letter-spacing:.06em;font-weight:400}
.inspect-meta{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--scarlet)}
.inspect-copy p{margin:0 0 .75rem}
.inspect-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;
  position:sticky;bottom:0;padding:10px 0 14px;background:var(--paper);border-top:1.5px solid var(--navy);margin-top:8px}
.inspect-link{color:var(--navy);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

.doors{max-width:44rem;margin:2rem auto 0;display:flex;flex-wrap:wrap;gap:8px}
.door{display:inline-block;padding:.5rem .75rem .4rem;border:1.5px solid var(--navy);color:var(--navy);
  text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:10px;background:var(--well)}
.door b{display:block;font-size:8px;letter-spacing:.16em;color:var(--scarlet);font-weight:400}
.door:hover{background:var(--navy);color:var(--paper)}

@media(max-width:640px){
  #dealer{gap:10px;padding:8px}
  #jackPet{width:72px;height:72px;flex-basis:72px}
  .spread-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .spread-btn{width:100%}
  .inspect{width:100vw;max-width:100vw;height:min(92vh,100dvh);max-height:none;margin:0;border-left:0;border-right:0;border-bottom:0}
  .inspect:modal{margin:auto 0 0}
  .inspect-grid{grid-template-columns:1fr}
  .inspect-card{max-width:10rem}
  #reading-actions{position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom);background:var(--paper)}
}
@media(prefers-reduced-motion:reduce){
  .card-wrap{transition:none;transform:none}
}