/* Sumlub26 — a gallery wall. The cards are the artwork; everything else is a caption. */
:root{
  --wall:#f1f0ec; --wall-2:#e8e6e0; --card:#fffefb; --ink:#121211; --ink-2:#4f4d48; --mute:#8f8c85; --line:#d9d6ce;
  --red:#cc3823; --green:#0f7b6c; --late:#cc3823; --ok:#2f8a5b; --focus:#2f5bff;
  --f-mark:"Bricolage Grotesque","Anuphan",system-ui,sans-serif;
  --f-text:"Anuphan","Sukhumvit Set","Thonburi",system-ui,sans-serif;
  --f-index:"Playfair Display",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--wall);color:var(--ink);font-family:var(--f-text);font-size:15px;line-height:1.6;
  padding-inline:20px;padding-block:0 96px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.muted{color:var(--mute)}
h1,h2,h3{margin:0;font-weight:600}

/* top */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(241,240,236,.9);backdrop-filter:blur(10px);margin-inline:-20px;padding:14px 20px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.mark{font-family:var(--f-mark);font-weight:700;font-size:21px;letter-spacing:-.03em;text-decoration:none;line-height:1}
.mark i{font-style:normal;color:var(--red)}
.top-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0}
.clock{font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.clock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.clock.over{color:var(--late)}
.clock.over::before{background:var(--late)}
.top-r a{font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.top-r a:hover{color:var(--ink)}

/* buttons */
.btn{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:12px 26px;border-radius:999px;font-weight:500;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:7px 16px;font-size:13px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:0;color:var(--ink);font-size:13px;border-bottom:1px solid var(--line);cursor:pointer}
.link:hover{border-color:var(--ink)}
.seg{display:inline-flex;gap:2px}
.seg button{border:0;background:none;padding:4px 10px;border-radius:999px;font-size:13px;color:var(--mute)}
.seg button[aria-pressed=true]{color:var(--ink);background:var(--wall-2)}

/* ===================================================================
   CARD MOCKUP — every size is relative to the card's own width
   (container query units), so a 70px tile and a 380px hero are the same
   printed object. Index ≈ standard poker index: 4.5 mm in, 4 mm down.
   =================================================================== */
.pc{container-type:inline-size;position:relative;width:100%;aspect-ratio:5/7;border-radius:5.5% / 3.95%;overflow:hidden;
  background:var(--card);color:var(--ink);isolation:isolate;
  box-shadow:0 1px 1px rgba(0,0,0,.06),0 6px 14px rgba(20,18,14,.08),0 22px 40px -18px rgba(20,18,14,.25)}
.pc.red{color:var(--red)}
.pc.green{color:var(--green)}
.pc .art{position:absolute;inset:0;background:center/cover no-repeat;z-index:0}
/* no artwork yet: plain tinted stock so the white index tab still reads */
.pc .blank{position:absolute;inset:0;background:#efede6}
.pc .blank::after{content:"";position:absolute;inset:5cqw;border:.6cqw solid rgba(0,0,0,.05);border-radius:3cqw}
/* INDEX — one white tab on the top edge, flush with the top-left corner, scooped (inverted radius) where
   it meets the card on the right and below. Rank + suit sit side by side inside it. */
.pc .ix{--r:5cqw;position:absolute;z-index:2;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:1cqw;
  min-width:17cqw;padding:3cqw 3cqw 2.8cqw;background:#fff;border-radius:0 0 var(--r) 0;line-height:1;color:inherit}
.pc .ix::before,.pc .ix::after{content:"";position:absolute;width:var(--r);height:var(--r);
  background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .25cqw),#fff var(--r))}
.pc .ix::after{left:100%;top:0}
.pc .ix::before{left:0;top:100%}
.pc .ix.br{top:auto;left:auto;bottom:0;right:0;transform:rotate(180deg)}
.pc .ix .rk{font-family:var(--f-index);font-weight:700;font-size:12cqw;letter-spacing:-.04em}
.pc .ix .su{font-size:9.5cqw}
.pc .ix.jk .rk{font-family:var(--f-text);font-weight:700;font-size:5.2cqw;letter-spacing:.14em;margin-right:-.14em}
.pc .ix.jk .su{font-size:7cqw}
.pc .art~.ix{box-shadow:0 .6cqw 2cqw rgba(0,0,0,.18)}
.pc .safe{position:absolute;z-index:3;inset:4.8%;border:1.5px dashed rgba(255,255,255,.95);outline:1.5px dashed rgba(0,0,0,.5);outline-offset:-3px;border-radius:3cqw;pointer-events:none}
.pc.back{background:#111 url("back.webp") center/cover no-repeat}

.flip{perspective:1400px}
.flip .in{position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.flip .in>.pc{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .in>.pc+.pc{position:absolute;inset:0;transform:rotateY(180deg)}
.flip.up .in{transform:rotateY(180deg)}

/* ---------- my hand ---------- */
.hand{min-height:62vh;display:grid;place-items:center;padding-block:40px 24px}
.draw{display:grid;justify-items:center;gap:26px;text-align:center}
.deck{position:relative;width:170px;aspect-ratio:5/7}
.deck .pc{position:absolute;inset:0}
.deck .pc:nth-child(1){transform:translate(-12px,8px) rotate(-7deg)}
.deck .pc:nth-child(2){transform:translate(8px,3px) rotate(4deg)}
.deck.shuffle .pc:nth-child(1){animation:s1 .32s ease-in-out infinite alternate}
.deck.shuffle .pc:nth-child(2){animation:s2 .32s ease-in-out infinite alternate}
.deck.shuffle .pc:nth-child(3){animation:s3 .32s ease-in-out infinite alternate}
@keyframes s1{to{transform:translate(-64px,6px) rotate(-16deg)}}
@keyframes s2{to{transform:translate(60px,0) rotate(14deg)}}
@keyframes s3{to{transform:translateY(-16px)}}
.ticker{font-family:var(--f-index);font-weight:700;font-size:clamp(52px,10vw,96px);line-height:1;min-height:1em;font-variant-numeric:tabular-nums}
.ticker .r{color:var(--red)}
.reel{--rw:108px;position:relative;width:min(760px,92vw);padding-block:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.strip{display:flex;gap:14px;will-change:transform}
.ri{flex:none;width:var(--rw)}
.reel-mark{position:absolute;left:50%;top:4px;bottom:4px;width:2px;transform:translateX(-50%);background:var(--red);border-radius:2px}
.reel-mark::before,.reel-mark::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:7px solid transparent}
.reel-mark::before{top:-2px;border-top-color:var(--red)}
.reel-mark::after{bottom:-2px;border-bottom-color:var(--red)}
canvas.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70}
.diptych{display:flex;gap:clamp(20px,5vw,64px);justify-content:center;align-items:flex-start;flex-wrap:wrap}
.piece{display:grid;gap:14px;justify-items:center;width:min(320px,42vw)}
.piece>.pc,.piece>.flip,.piece>.holder{width:100%}
.cap{display:grid;justify-items:center;gap:6px;text-align:center}
.cap .t{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}
.cap .s{font-size:12.5px}
.cap .s.late{color:var(--late)}
.cap .s.ok{color:var(--ok)}

/* ---------- deck wall ---------- */
.wall{padding-top:56px;border-top:1px solid var(--line);margin-top:24px}
.wall-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.wall-h h2{font-family:var(--f-mark);font-weight:700;font-size:28px;letter-spacing:-.03em}
.wall-h .meta{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.count{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
details.pending{margin-bottom:28px}
details.pending summary{cursor:pointer;list-style:none;display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
details.pending summary::-webkit-details-marker{display:none}
details.pending summary::after{content:"+";color:var(--mute)}
details.pending[open] summary::after{content:"−"}
details.pending.over summary{color:var(--late)}
.plist{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px}
.plist span{display:inline-flex;gap:8px;align-items:baseline}
.plist .t{font-family:var(--f-mono);font-size:11.5px;color:var(--late);font-variant-numeric:tabular-nums}
.plist .m{color:var(--mute);font-size:12px}
.row-s{margin-bottom:34px}
.row-s .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);margin-bottom:12px;display:flex;gap:8px;align-items:baseline}
.row-s .lbl b{font-family:var(--f-index);font-size:18px;color:var(--ink);letter-spacing:0}
.row-s .lbl b.r{color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:14px 12px}
.tile{display:grid;gap:7px;min-width:0;max-width:100%;background:none;border:0;padding:0;text-align:center}
.tile .pc{transition:transform .2s ease}
button.tile:hover .pc{transform:translateY(-4px)}
button.tile:active .pc{transform:translateY(-1px) scale(.96)}
button.tile:disabled{cursor:default}
button.tile:disabled:hover .pc{transform:none}
.tile .n{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tile .l{font-family:var(--f-mono);font-size:10px;color:var(--late);line-height:1.2;font-variant-numeric:tabular-nums}
.tile.me .n{color:var(--ink);font-weight:600}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:34px 26px}
.person{display:grid;gap:10px;min-width:0}
.person .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.person .pair .tile{width:100%}
.person .who{font-size:13px;text-align:center}
.person .who .l{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--late)}

/* ---------- sheet (prompt + upload) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(18,18,17,.28);backdrop-filter:blur(2px)}
.sheet{position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--card);box-shadow:-20px 0 60px rgba(0,0,0,.15);
  display:flex;flex-direction:column;animation:slide .35s cubic-bezier(.2,.7,.2,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--wall-2)}
.sheet-h b{font-family:var(--f-index);font-size:22px}
.sheet-h b .r{color:var(--red)}
.sheet-h b .g{color:var(--green)}
.x{border:0;background:none;font-size:22px;line-height:1;color:var(--mute);padding:4px 8px}
.x:hover{color:var(--ink)}
.sheet-b{flex:1;overflow:auto;padding:22px;display:grid;gap:26px;align-content:start}
.sheet .preview{width:200px;justify-self:center}
.sheet .preview.editing{width:240px;cursor:grab;touch-action:none;user-select:none}
.sheet .preview.grabbing{cursor:grabbing}
.edit-row{display:grid;justify-items:center;gap:6px;width:240px}
.zoom{width:100%;accent-color:var(--ink)}
.blk{display:grid;gap:10px}
.blk .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}
textarea,input[type=text],input[type=password],input[type=datetime-local],.field{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:8px 0;font:inherit;font-size:15px;color:var(--ink);resize:none;border-radius:0}
textarea:focus,input:focus{outline:none;border-color:var(--ink)}
pre.prompt{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--f-text);font-size:12.5px;line-height:1.7;color:var(--ink-2);
  background:var(--wall);border-radius:10px;padding:12px 14px;max-height:260px;overflow:auto}
pre.prompt mark{background:#ffe7a3;color:var(--ink);padding:0 2px}
.drop{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;cursor:pointer;font-size:14px;color:var(--ink-2);transition:border-color .2s}
.drop:hover{border-color:var(--ink)}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12.5px}
.checks li.bad{color:var(--late)}
.checks li.ok{color:var(--ok)}
.checks li.warn{color:#a8721b}
.note{font-size:13px;min-height:1.2em}
.note.ok{color:var(--ok)}
.note.bad{color:var(--late)}
.sheet-f{padding:16px 22px;border-top:1px solid var(--wall-2);display:flex;gap:12px;align-items:center;justify-content:space-between}
.safe-t{font-size:12px;color:var(--mute);display:flex;gap:6px;align-items:center;justify-self:center}

/* tap-to-flip cards */
.flip.tap{cursor:pointer}
.flip.tap:hover .in{transform:translateY(-3px)}
.flip.tap.up:hover .in{transform:rotateY(180deg) translateY(-3px)}
.in-r{animation:inr .35s cubic-bezier(.2,.7,.2,1)}
.in-l{animation:inl .35s cubic-bezier(.2,.7,.2,1)}
@keyframes inr{from{transform:translateX(60px) rotate(3deg);opacity:0}}
@keyframes inl{from{transform:translateX(-60px) rotate(-3deg);opacity:0}}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;background:rgba(241,240,236,.94);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;overflow:auto}
.vbox{display:grid;gap:18px;justify-items:center;width:min(360px,100%)}
.vbox .holder{width:100%}
.vstage{width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vrow{display:flex;align-items:center;gap:20px}
.nav{border:1px solid var(--line);background:var(--card);width:42px;height:42px;border-radius:50%;font-size:22px;line-height:1;display:grid;place-items:center;padding:0 0 3px}
.nav:hover{border-color:var(--ink)}
.nav:disabled{opacity:.3;cursor:default}
.vbox .cap .d{font-size:14px;color:var(--ink-2);max-width:320px}

/* simple pages */
.center{min-height:80vh;display:grid;place-items:center;text-align:center}
.banner{font-size:13px;color:var(--ink-2);padding:10px 0;text-align:center}
.banner b{color:var(--ink)}

/* admin table */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13.5px}
table.t th,table.t td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.t th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:500}
.thumb{width:46px;aspect-ratio:5/7;object-fit:cover;border-radius:4px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.12)}

@media (max-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}}
@media (max-width:700px){
  html{overflow-x:hidden}
  body{padding-inline:16px;overflow-x:hidden}
  .top{margin-inline:-16px;padding:10px 16px}
  .top-r{gap:6px 12px}
  .clock{font-size:12px}
  .mark{font-size:19px}
  .wall-h{margin-bottom:18px}
  .wall-h .meta{gap:10px 14px}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .vbox{width:min(320px,100%)}
  .diptych{gap:16px}
  .piece{width:min(260px,calc(50vw - 26px))}
  .reel{--rw:86px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 8px}
  .sheet{top:auto;height:92vh;width:100%;border-radius:18px 18px 0 0;animation-name:up}
  @keyframes up{from{transform:translateY(40px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .flip .in{transition:none}
  .deck.shuffle .pc{animation:none}
  .sheet{animation:none}
}