/* putu.xyz: a card table. Pixel swirl behind, slate game-UI panels in front, selectable things are cards (cards.css). */
:root{
  --ink:#0f181a;
  --slate:#2b3c40;
  --slate-hi:#3b5257;
  --edge:#162124;
  --text:#f3efe3;
  --muted:#a8bcbe;
  --red:#fe5f55;   --red-dk:#a8352e;
  --blue:#1e9bf0;  --blue-dk:#155f94;
  --gold:#f2b23a;  --gold-dk:#a3741c;
  --green:#4bc292; --purple:#b072c9;
  --card:#f3eee0;  --card-edge:#cfc5ab;
  --suit-dark:#2e3d5a; --suit-red:#e2453c;
  --display:"Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --label:"Silkscreen", ui-monospace, Consolas, monospace;
  --mono:ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r:10px;
  --shadow-text:0 2px 0 rgba(0,0,0,.45);
  --h-shadow:0 3px 0 rgba(0,0,0,.5);
  --body:var(--display);   --h-weight:700;
  --panel:rgba(10,18,20,.5);   --panel-edge:rgba(255,255,255,.06);
  --back:#d8433a;  --back-dk:var(--red-dk);  --tip-bg:#3a4f54;
  /* the pixel swirl behind every page (swirl.js reads these) */
  --sw-0:#122022; --sw-1:#055c8c; --sw-2:#cc3d36; --sw-3:#f2e6cc;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* background stays on body only, so it propagates to the viewport and the fixed swirl canvas paints above it */
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased;font-variant-ligatures:none}
img{max-width:100%}
a{color:var(--gold)}
a:hover{color:#ffd27a}

/* ---------- backdrop ---------- */
#swirl{position:fixed;inset:0;width:100%;height:100%;z-index:-2;image-rendering:pixelated;display:block}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 72%,transparent) 80%)}
.crt{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%)}

/* ---------- page frame ---------- */
.page{max-width:1180px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:64px;min-height:100vh}
main{display:flex;flex-direction:column;gap:80px}
.top{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;text-shadow:var(--shadow-text);color:var(--text);text-decoration:none}
.logo:hover{color:var(--text)}
.logo-mark{width:22px;height:30px;border-radius:4px;background:var(--card);border:2px solid var(--card-edge);box-shadow:3px 3px 0 rgba(0,0,0,.5);position:relative;transform:rotate(-8deg);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.logo:hover .logo-mark{transform:rotate(6deg) scale(1.1)}
.logo-mark::after{content:"\2660\FE0E";position:absolute;inset:0;display:grid;place-items:center;color:var(--suit-dark);font-size:14px}
.logo-tld{color:var(--gold);margin-left:-.2em}
.ext{font-size:.8em;opacity:.7}
.top nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.top nav a{color:var(--muted);text-decoration:none;font-size:16px;padding:4px 10px;border-radius:7px}
.top nav a:hover{color:var(--text);background:rgba(0,0,0,.3)}
.top nav a[aria-current="page"]{color:#fff;background:var(--red);box-shadow:0 3px 0 var(--red-dk)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--h-weight);line-height:1.05;text-wrap:balance;text-shadow:var(--h-shadow)}
h1{font-size:clamp(44px,7vw,84px)}
h2{font-size:clamp(30px,4vw,42px)}
h3{font-size:22px}
p{margin:0}
.eyebrow{font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--muted);max-width:46ch;font-size:19px}
.prose{display:flex;flex-direction:column;gap:14px;max-width:62ch;color:var(--muted)}
.prose strong{color:var(--text);font-weight:600}
code{font-family:var(--mono);font-size:.85em;background:rgba(0,0,0,.35);padding:1px 6px;border-radius:5px;color:var(--text)}
kbd{font-family:var(--mono);font-size:.8em;padding:1px 6px;border-radius:5px;background:var(--card);color:var(--suit-dark);box-shadow:0 2px 0 var(--card-edge)}

.panel{background:var(--panel);border:2px solid var(--panel-edge);border-radius:18px}
.slate{background:var(--slate);border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--slate-hi);border-radius:14px}

/* ---------- buttons ---------- */
.bbtn{display:inline-flex;align-items:center;gap:8px;font:600 18px/1 var(--display);color:#fff;border:0;border-radius:9px;padding:12px 18px 11px;cursor:pointer;text-decoration:none;text-shadow:0 2px 0 rgba(0,0,0,.3);
  background:var(--blue);box-shadow:0 4px 0 var(--blue-dk);transition:transform .07s,box-shadow .07s,filter .15s}
.bbtn:hover{color:#fff;filter:brightness(1.1);animation:btn-juice .3s}
.bbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--blue-dk)}
.bbtn--gold{background:var(--gold);box-shadow:0 4px 0 var(--gold-dk)}
.bbtn--gold:active{box-shadow:0 0 0 var(--gold-dk)}
.bbtn--red{background:var(--red);box-shadow:0 4px 0 var(--red-dk)}
.bbtn--red:active{box-shadow:0 0 0 var(--red-dk)}
.bbtn--ghost{background:var(--slate-hi);box-shadow:0 4px 0 var(--edge)}
.bbtn--ghost:active{box-shadow:0 0 0 var(--edge)}
@keyframes btn-juice{0%{scale:1}35%{scale:1.08}70%{scale:.97}100%{scale:1}}

/* ---------- shared sections ---------- */
.sec{display:flex;flex-direction:column;gap:26px}
.sec-head{display:flex;flex-direction:column;gap:10px;min-width:0}
.page-head{display:flex;flex-direction:column;gap:16px;padding-top:28px}

.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media (min-width:920px){.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hero-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.table{padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.table-note{font-family:var(--label);font-size:11px;letter-spacing:.08em;color:var(--muted);text-align:center}

/* home: the ID card under the intro, then a row of prototype cards the same size as the hand's cards */
.home-id{width:min(300px,100%);margin-top:10px}
/* while the deck deals, cards flying to these sections pass above the deck */
.is-dealt :is(.hero-copy,main > .sec){position:relative;z-index:31}
.proto-row{--cw:clamp(84px,21vw,132px);display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:30px 20px 34px}
.proto-row > .bc{width:var(--cw)}
@media (max-width:640px){.proto-row{gap:12px;padding:22px 12px 26px}}

.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:28px 20px}
@media (min-width:820px){.feature{grid-template-columns:220px minmax(0,1fr);padding:32px 36px;gap:44px}}
.feature > .bc{width:min(220px,60vw);justify-self:center}
.feature-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:6px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:13px;font-weight:600;padding:2px 10px;border-radius:6px;color:#fff;background:var(--slate-hi);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.tag--blue{background:var(--blue)} .tag--red{background:var(--red)} .tag--green{background:var(--green)} .tag--purple{background:var(--purple)} .tag--gold{background:var(--gold);color:#2a1d00}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-top:30px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}}

.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;color:var(--muted)}
.steps li::before{content:counter(step);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;background:var(--edge);color:var(--gold)}

footer{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;color:var(--muted);font-size:14px;border-top:2px solid rgba(255,255,255,.07);padding-top:20px;margin-top:auto}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}

@media (max-width:640px){
  body{font-size:16px}
  .page{gap:44px}
  main{gap:60px}
  .top nav{margin-left:0;width:100%}
  .top nav a{font-size:15px;padding:4px 8px}
  .bbtn{font-size:16px;padding:11px 14px 10px}
}
@media (prefers-reduced-motion:reduce){
  .bbtn:hover{animation:none}
}

/* ---------- intro (home): page hidden behind the deck until the hand is dealt ---------- */
html.is-intro{overflow:hidden}
.is-intro :is(.top,.hero-copy,.table-note,main > .sec,footer){opacity:0;translate:0 22px}
.is-intro .table{background-color:transparent;border-color:transparent}
.is-dealt :is(.top,.hero-copy,.table-note,main > .sec,footer){opacity:1;translate:0 0;transition:opacity .5s,translate .7s cubic-bezier(.2,1.5,.4,1)}
.is-dealt .table{background-color:var(--panel);border-color:var(--panel-edge);transition:background-color .5s .35s,border-color .5s .35s}
.is-dealt .top{transition-delay:.55s}
.is-dealt .hero-copy{transition-delay:.4s}
.is-dealt .table-note{transition-delay:.95s}
.is-dealt main > .sec{transition-delay:.75s}
.is-dealt footer{transition-delay:.85s}

/* ---------- arriving through a card transition: a card-back cover shrinks to a card and drops away ---------- */
html.is-wiping::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background:var(--back-bg);animation:wipe-out .8s .1s cubic-bezier(.6,0,.35,1) both}
@keyframes wipe-out{
  0%{clip-path:inset(0 round 0);transform:none}
  48%{clip-path:inset(calc(50% - 21vmin) calc(50% - 15.7vmin) round 12px);transform:none}
  100%{clip-path:inset(calc(50% - 21vmin) calc(50% - 15.7vmin) round 12px);transform:translateY(115vh) rotate(-16deg)}
}
.is-wiping .page > *{animation:page-rise .7s cubic-bezier(.2,1.4,.4,1) both}
.is-wiping .page > :nth-child(1){animation-delay:.35s}
.is-wiping .page > :nth-child(2){animation-delay:.42s}
.is-wiping .page > :nth-child(3){animation-delay:.5s}
@keyframes page-rise{from{opacity:0;translate:0 26px}}