/* ═══════════════════════════════════════════════════════════════════════════
   THE TAVERN — one continuous room.

   The first pass read as a picture of a room sitting on top of a message
   board: a letterbox banner, then a column of bordered boxes. The fix is not
   more decoration, it is continuity. The timber wall and the firelight do not
   stop at the bottom of the scene — they carry on behind everything you read,
   and the talk is pinned to that wall as paper. Nothing here is a "card".

   Loaded after style.css, so it wins on equal specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

.tav{
  --paper:#f0e4c4;
  --paper-2:#e8d9b2;
  --ink-paper:#2b1e0e;
  --smoke:#c3ad83;
  --ember:#e0913a;

  /* the room does not end — the wall runs the whole page */
  background:
    /* firelight, falling off as you move away from the hearth */
    radial-gradient(120% 46% at 50% 8%, rgba(224,145,58,.20), transparent 62%),
    radial-gradient(80% 30% at 50% 2%, rgba(255,196,110,.16), transparent 70%),
    /* timber boards */
    repeating-linear-gradient(90deg,
      #241909 0 58px, #1e1407 58px 60px, #291d0d 60px 118px, #1e1407 118px 120px),
    #1b1207;
  background-attachment:fixed, fixed, fixed, fixed;
  color:#efe0be;
  padding-bottom:0;
}

/* ── the scene ──────────────────────────────────────────────────────────── */
.tav-stage{background:none;padding-top:18px}

.tav-room{
  height:clamp(300px,44vh,430px);
  border:0;border-radius:0;
  background:transparent;
  /* Dissolve into the wall instead of sitting in a frame. The fade starts low
     and the folk stand well above it — an earlier version faded from 76% and
     sheared everyone off at the knees. */
  box-shadow:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
}
.tav-wall{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.66) 0, transparent 30%, transparent 58%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(90deg,
      #2a1d10 0 58px, #221707 58px 60px, #302213 60px 118px, #221707 118px 120px),
    #241909;
}
.tav-beam{height:7%;background:linear-gradient(to bottom,#181005,#0d0904);border-bottom:2px solid #080503}
.tav-floor{
  height:22%;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.72) 70%, rgba(27,18,7,1)),
    repeating-linear-gradient(90deg,#3a2911 0 96px,#2d1f0c 96px 99px);
  border-top:1px solid #0d0904;
}
.tav-hearth{width:130px;height:140px;bottom:22%}
.tav-lantern{width:20px;height:31px;top:8%}
.tav-lantern--l{left:11%}
.tav-lantern--r{right:11%}

/* people you can actually see, standing on the floor rather than in the fade */
.tav-folk{bottom:20%;gap:clamp(10px,4vw,44px);padding:0 22px}
.tav-body{max-width:132px}
.tav-head{width:52px;height:52px;font-size:.82rem;
  box-shadow:0 0 0 2px #120c05, 0 0 26px -4px rgba(240,190,110,.6)}
.tav-cloak{width:84px;height:60px;margin-top:-12px}
.tav-body[data-depth=far]{margin-bottom:22px;filter:brightness(.7)}
.tav-body[data-depth=far] .tav-head{width:42px;height:42px;font-size:.7rem}
.tav-body[data-depth=far] .tav-cloak{width:68px;height:49px}
.tav-plate{font-size:.55rem;max-width:126px;letter-spacing:.13em;color:#e0cca4;text-shadow:0 1px 5px #000,0 0 12px rgba(0,0,0,.9)}
.tav-body[data-depth=far] .tav-plate{max-width:100px}

/* ── the strip: a line spoken over the room, not a widget ───────────────── */
.tav-strip{
  background:none;border:0;border-radius:0;
  padding:4px 2px 0;margin-top:0;
  font-size:.86rem;color:var(--smoke);gap:14px;
}
.tav-dot{display:none}
.tav-special{font-style:italic}
.tav-gates b,.tav-purse{color:var(--gold-l)}
.tav-purse{border-bottom:1px solid rgba(194,161,77,.4);padding-bottom:2px}

/* ── doors: little hanging signs ────────────────────────────────────────── */
.tav-doors{gap:10px;margin-top:14px;padding-bottom:16px;
  border-bottom:1px solid rgba(138,109,42,.28)}
.tav-doors a,.tav-doors button{
  border:0;border-radius:0;padding:7px 14px;
  background:linear-gradient(#3a2a12,#241806);
  color:#d9c191;
  box-shadow:0 2px 0 #14100a, 0 8px 16px -12px #000;
  border-top:1px solid rgba(226,190,110,.22);
}
.tav-doors a:hover,.tav-doors button:hover{color:#f7e9c6;background:linear-gradient(#4a3618,#2e2009)}

/* ── the talk: paper pinned to the wall ─────────────────────────────────── */
.tav-log{padding-top:30px;gap:4px}

.tav-mark{color:var(--smoke)}
.tav-mark::before,.tav-mark::after{background:rgba(194,161,77,.26)}

.tav-run{margin-bottom:30px}

.tav-face{width:42px;height:42px;font-size:.7rem;
  box-shadow:0 0 0 2px #120c05,0 6px 14px -8px #000}
.tav-face--sm{width:30px;height:30px}

.tav-who b{color:#f0dfb4;font-size:.68rem}
.tav-when{color:var(--smoke)}

/* a torn scrap, lit from the fire, lifted off the wall */
.tav-scrap{
  position:relative;
  background:
    /* grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    linear-gradient(158deg, var(--paper) 0%, var(--paper-2) 100%);
  color:var(--ink-paper);
  border:0;
  border-radius:2px 10px 3px 9px;
  padding:13px 17px;
  box-shadow:
    0 1px 0 rgba(255,248,225,.55) inset,
    0 14px 26px -16px rgba(0,0,0,.95),
    0 2px 5px -3px rgba(0,0,0,.6);
  transform:rotate(-.35deg);
}
.tav-said:nth-child(even) .tav-scrap{transform:rotate(.4deg)}
.tav-said.is-me>.tav-col>.tav-scrap{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
    linear-gradient(158deg,#6d1d1d 0%,#511313 100%);
  color:#f8e9cc;
  border-radius:10px 2px 9px 3px;
  transform:rotate(.3deg);
}
.tav-scrap p{line-height:1.6}

/* the pin */
.tav-scrap::before{
  content:"";position:absolute;top:-6px;left:20px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe6a8,#8a6d2a 70%,#4a3714);
  box-shadow:0 2px 4px -1px rgba(0,0,0,.8);
}
.tav-said.is-me>.tav-col>.tav-scrap::before{left:auto;right:20px}
.tav-said.is-cont .tav-scrap::before{display:none}
.tav-said.is-cont .tav-scrap{transform:rotate(0deg)}

/* ── notices and wagers: also paper, not dark boxes ─────────────────────── */
.tav-card{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#f3e8ca,#e4d3a9);
  color:var(--ink-paper);
  border:0;border-radius:3px 12px 3px 12px;
  padding:18px 20px;
  box-shadow:0 1px 0 rgba(255,250,230,.6) inset, 0 18px 32px -20px rgba(0,0,0,.95);
  transform:rotate(-.25deg);
}
.tav-card h3{color:#5c1b1b;font-size:1.02rem}
.tav-card h3,.tav-card h4{color:#7a5514}
.tav-card p{color:#3c2c14}
.tav-card .muted{color:#6d5a34}
.tav-tally{color:#6d5a34}
.tav-tally a{color:#7a3030;font-weight:600}

.tav-opt{
  color:#2b1e0e;background:rgba(255,252,240,.5);
  border:1px solid rgba(120,95,45,.4);border-radius:2px}
.tav-opt:hover:not(.is-result){border-color:#7a5514;background:rgba(255,252,240,.85)}
.tav-fill{background:rgba(160,120,40,.28)}
.tav-pct{color:#6d5a34}

.tav-draw{border-color:#7a5514;color:#f0d9a0}
.tav-draw.is-drawn{border-color:#7a5514}

/* ── the reply line and actions: quiet ink on paper ─────────────────────── */
.tav-acts{padding-left:54px}
.tav-replyform input{
  background:rgba(20,14,6,.5);border:1px solid rgba(194,161,77,.28);
  color:#f2e6c9;border-radius:16px}
.tav-replyform input:focus{border-color:var(--gold)}
.tav-replyform button{border-radius:16px;background:#6d1d1d;border-color:#8b2a2a}
.tav-open,.tav-cta,.tav-del{border-color:rgba(194,161,77,.3);color:var(--smoke)}

/* ── the dock ───────────────────────────────────────────────────────────── */
.tav-dock{
  background:linear-gradient(to top,#1b1207 62%,rgba(27,18,7,.9) 85%,rgba(27,18,7,0));
  box-shadow:none;
}
.tav-bar{
  background:linear-gradient(#2c1f0d,#1f1508);
  border:1px solid rgba(194,161,77,.34);
  border-radius:3px;
  box-shadow:0 -1px 0 rgba(226,190,110,.14) inset, 0 18px 34px -24px #000;
}
.tav-bar input,.tav-bar select{border-color:rgba(194,161,77,.22);background:rgba(12,8,3,.4)}
.tav-signin{
  background:linear-gradient(#2c1f0d,#1f1508);
  border:1px solid rgba(194,161,77,.3);border-left:3px solid var(--gold-d);
}

@media (max-width:640px){
  .tav-room{height:clamp(230px,32vh,290px)}
  .tav-head{width:40px;height:40px}
  .tav-cloak{width:64px;height:46px}
  .tav-body[data-depth=far] .tav-head{width:33px;height:33px}
  .tav-body[data-depth=far] .tav-cloak{width:53px;height:38px}
  .tav-body{max-width:88px}
  .tav-plate{max-width:84px;font-size:.46rem}
  .tav-acts{padding-left:0}
  .tav-scrap,.tav-card{transform:none}
  .tav-said:nth-child(even) .tav-scrap{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tav-scrap,.tav-card{transform:none}
}

/* ── the long table ────────────────────────────────────────────────────────
   Crude silhouettes read as domes no matter how they are shaped. Put a table
   in front and they become people seated at it — the table hides the half
   that never looked right, and the room gains a foreground.               */
.tav-table{
  position:absolute;left:-2%;right:-2%;bottom:0;height:23%;z-index:3;
  background:
    linear-gradient(to bottom,
      #6b4a1e 0, #573a15 10%, #3d280e 34%, #2a1b09 62%, #1b1207 100%);
  border-top:2px solid #8a6330;
  box-shadow:0 -14px 34px -14px rgba(0,0,0,.95), 0 -1px 0 rgba(255,214,140,.22) inset;
  border-radius:44% 44% 0 0 / 16% 16% 0 0;
}
/* grain along the boards */
.tav-table::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.22) 0 2px, transparent 2px 46px, rgba(255,220,150,.05) 46px 47px, transparent 47px 92px);
}
.tav-tankard,.tav-candle{position:absolute;bottom:56%;z-index:4}
.tav-tankard{
  width:15px;height:19px;border-radius:2px 2px 4px 4px;
  background:linear-gradient(#8e7b52,#5a4a28);
  box-shadow:0 1px 0 rgba(255,230,170,.3) inset, 0 5px 10px -5px #000;
}
.tav-tankard::after{
  content:"";position:absolute;right:-5px;top:4px;width:6px;height:9px;
  border:2px solid #6b5a33;border-left:0;border-radius:0 5px 5px 0;
}
.tav-tankard--a{left:22%}
.tav-tankard--b{right:24%}
.tav-candle{
  left:50%;transform:translateX(-50%);width:7px;height:17px;border-radius:2px;
  background:linear-gradient(#f3e5c0,#c9b184);
  box-shadow:0 5px 10px -5px #000;
}
.tav-candle::after{
  content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  width:6px;height:10px;border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 50% 65%, #fff2c0, #f0a33a 55%, rgba(240,120,30,0) 78%);
  animation:tavCandle 2.3s ease-in-out infinite alternate;
}
@keyframes tavCandle{from{opacity:.7;transform:translateX(-50%) scaleY(.9)}to{opacity:1;transform:translateX(-50%) scaleY(1.08)}}

/* the folk sit behind the table, so only head and shoulders show */
.tav-folk{bottom:15%;z-index:2}
.tav-plate{display:none}          /* names live on the paper below, not floating in the scene */
.tav-body{max-width:none}

@media (max-width:640px){
  .tav-table{height:26%}
  .tav-tankard{width:11px;height:14px}
  .tav-candle{width:6px;height:13px}
}
@media (prefers-reduced-motion:reduce){ .tav-candle::after{animation:none} }

/* ── The Cardsharp's Hand ─────────────────────────────────────────────────
   Real playing cards laid on the paper, not a tarot back. Five slots that
   fill one night at a time, and once full you decide each night whether the
   new card is worth breaking the hand for.                                */
.tav-hand h3{margin-bottom:14px}
.tav-rank{color:#7a3030;font-style:normal}

.tav-cards{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.pcard{
  position:relative;width:58px;height:82px;flex-shrink:0;
  background:linear-gradient(160deg,#fffdf6,#f0e7d2);
  border:1px solid #b9a271;border-radius:5px;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.7) inset;
  color:#241a10;display:block;
}
.pcard__r{position:absolute;top:5px;left:7px;font-family:var(--display);font-size:1.05rem;line-height:1;font-weight:700}
.pcard__s{position:absolute;bottom:6px;right:8px;font-size:1.45rem;line-height:1}
.pcard.is-red{color:#9c1f1f}
.pcard.is-empty{
  background:repeating-linear-gradient(45deg,rgba(120,95,45,.13) 0 6px,transparent 6px 12px);
  border-style:dashed;border-color:rgba(120,95,45,.5);box-shadow:none;
}
.pcard--new{
  box-shadow:0 0 0 2px var(--gold), 0 10px 20px -10px #000;
  transform:rotate(-3deg);
}

/* the nightly decision */
.tav-swap{border-top:1px solid rgba(120,95,45,.3);padding-top:13px;margin-top:4px}
.tav-swap p{color:#3c2c14}
.tav-swaprow{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.tav-swapbtns{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:200px}
.tav-swapbtn,.tav-keepbtn{
  font-family:var(--serif);font-size:.82rem;cursor:pointer;
  border-radius:3px;padding:7px 11px;
  border:1px solid rgba(120,95,45,.45);background:rgba(255,252,240,.6);color:#2b1e0e;
}
.tav-swapbtn:hover{border-color:#7a5514;background:#fffdf4}
.tav-keepbtn{background:#6d1d1d;color:#f6e7c4;border-color:#8b2a2a}
.tav-keepbtn:hover{background:#8b2a2a}

.tav-prize{
  margin-top:14px;padding:11px 14px;border-radius:3px;
  background:rgba(122,85,20,.13);border-left:3px solid #7a5514;color:#3c2c14;font-size:.92rem;
}
.tav-prize b{color:#5c1b1b}
.tav-prize-hint{margin-top:12px;font-size:.85rem}

@media (max-width:640px){
  .pcard{width:48px;height:68px}
  .pcard__r{font-size:.9rem}
  .pcard__s{font-size:1.2rem}
  .tav-cards{gap:6px}
}

/* ── Hands on the Table ───────────────────────────────────────────────────
   Everyone's hand is public, ranked best first. It is a faire game — half the
   fun is seeing who is holding kings and who is holding a seven.           */
.tav-showdown{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#f3e8ca,#e4d3a9);
  color:#2b1e0e;border-radius:3px 12px 3px 12px;padding:14px 16px;
  box-shadow:0 1px 0 rgba(255,250,230,.6) inset, 0 18px 32px -20px rgba(0,0,0,.95);
  transform:rotate(-.2deg);
}
.tav-showgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.tav-showtile{
  padding:11px 12px;border-radius:3px;
  background:rgba(255,252,240,.42);
  border:1px solid rgba(120,95,45,.28);
}
.tav-showtile.is-mine{background:rgba(122,85,20,.16);border-color:rgba(122,85,20,.55)}
.tav-showhead{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tav-showhead .tav-face{box-shadow:0 0 0 1px rgba(60,40,15,.5);flex-shrink:0}
.tav-showname{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.62rem;color:#3c2c14;line-height:1.25;
}
.tav-showcards{display:flex;gap:4px;margin-bottom:8px}
.pcard--tiny{width:26px;height:36px;border-radius:3px}
.pcard--tiny .pcard__r{top:2px;left:3px;font-size:.6rem}
.pcard--tiny .pcard__s{bottom:2px;right:3px;font-size:.68rem}
.tav-showrank{display:block;font-size:.78rem;color:#5c1b1b;font-weight:600}
.tav-showfoot{
  margin:12px 0 0;padding-top:11px;border-top:1px solid rgba(120,95,45,.3);
  font-size:.78rem;color:#6d5a34;line-height:1.5;
}
@media (max-width:640px){
  .tav-showgrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
  .pcard--tiny{width:22px;height:31px}
  .tav-showtile{padding:9px 10px}
}

/* ── The House's card back ────────────────────────────────────────────────
   Her own damask (assets/img/damask-v4.jpg), cropped to card proportions.
   Used for the deck you draw from and for the slots not yet dealt, so an
   unfinished hand reads as face-down cards rather than empty boxes.      */
.tav-draw{
  background:
    linear-gradient(rgba(20,10,4,.34),rgba(20,10,4,.34)),
    url("/assets/img/card-back.jpg") center/cover no-repeat;
  border:1px solid #8a6d2a;
  box-shadow:0 1px 0 rgba(255,226,160,.28) inset, 0 8px 18px -10px rgba(0,0,0,.9);
  position:relative;
}
.tav-draw span{
  position:relative;z-index:2;
  text-shadow:0 1px 3px #000, 0 0 10px rgba(0,0,0,.9);
  color:#f6e4b6;
}
/* the thin gold rule a real card back carries */
.tav-draw::before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(226,190,110,.45);
  border-radius:3px;pointer-events:none;
}
.tav-draw:hover{box-shadow:0 0 22px -4px rgba(226,190,110,.6), 0 10px 20px -10px #000}
.tav-draw.is-drawn{
  background:linear-gradient(165deg,#f6ecd2,#dcc79a);
  border-color:var(--gold);
}
.tav-draw.is-drawn::before{border-color:rgba(120,95,45,.45)}
.tav-draw.is-drawn span{color:#3a2a14;text-shadow:none}

/* cards still to come, face down */
.pcard.is-empty{
  background:
    linear-gradient(rgba(20,10,4,.28),rgba(20,10,4,.28)),
    url("/assets/img/card-back.jpg") center/cover no-repeat;
  border:1px solid rgba(138,109,42,.75);
  border-style:solid;
  box-shadow:0 4px 10px -7px rgba(0,0,0,.8);
  opacity:.72;
}
.pcard.is-empty::after{
  content:"";position:absolute;inset:3px;border:1px solid rgba(226,190,110,.3);border-radius:3px;
}
.pcard--tiny.is-empty::after{inset:2px}

/* ── Your own words ───────────────────────────────────────────────────────
   Only the leader could strike anything, so a typo was permanent. These sit
   quiet until you hover your own line.                                    */
.tav-own{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px;
  opacity:0;transition:opacity .18s}
.tav-said:hover .tav-own,.tav-own:focus-within{opacity:.85}
.tav-said.is-me .tav-own{justify-content:flex-end}
.tav-editbox summary,.tav-mine-del{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.5rem;color:var(--smoke);cursor:pointer;
  border:1px solid rgba(194,161,77,.28);background:transparent;
  border-radius:2px;padding:4px 9px;list-style:none;
}
.tav-editbox summary::-webkit-details-marker{display:none}
.tav-editbox summary:hover,.tav-mine-del:hover{color:#f0e2c0;border-color:var(--gold-d)}
.tav-mine-del{border-color:rgba(139,42,42,.4);color:#c98a8a}
.tav-mine-del:hover{color:#f0c8c8;border-color:var(--wine-l)}
.tav-editbox form{display:flex;gap:6px;margin-top:7px;min-width:230px}
.tav-editbox input{
  flex:1;min-width:0;background:rgba(20,14,6,.5);border:1px solid rgba(194,161,77,.28);
  border-radius:14px;color:#f2e6c9;font-family:var(--serif);font-size:.88rem;padding:7px 12px;
}
.tav-editbox input:focus{outline:none;border-color:var(--gold)}
.tav-editbox button{
  border:0;border-radius:14px;background:var(--wine);color:#f6e7c4;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;font-size:.52rem;padding:7px 13px;
}
.tav-edited{
  display:inline-block;margin-left:7px;font-size:.68rem;font-style:italic;
  color:rgba(60,44,20,.55);vertical-align:1px;
}
.tav-said.is-me .tav-edited{color:rgba(248,233,204,.5)}

/* ── Buying a card ────────────────────────────────────────────────────────
   The coin sink. One card a night is free; if you cannot wait, buy the next.
   Capped by the hand itself — five cards means four purchases at most. */
.tav-buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(120,95,45,.3)}
.tav-buybtn{
  border:1px solid #7a5514;border-radius:3px;cursor:pointer;
  background:linear-gradient(#f0dfae,#dcc384);color:#3a2a10;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.58rem;padding:9px 15px;
  box-shadow:0 1px 0 rgba(255,250,225,.7) inset, 0 6px 14px -9px rgba(0,0,0,.7);
}
.tav-buybtn:hover{background:linear-gradient(#f7e9c2,#e6cf93)}
.tav-buynote{flex:1;min-width:190px;font-size:.84rem;color:#6d5a34;line-height:1.5}

/* ══ The way in ═══════════════════════════════════════════════════════════
   You do not walk into a place like this, you are let into it. Barred doors,
   a peep slot, somebody deciding they know your face — then the light and the
   noise. About a second and three quarters, once a session, and a click at any
   point cuts it short.

   Hidden unless <html> carries .tav-enter, which only the head script adds, so
   scripting off means no doors rather than doors that never open. */
.tavdoor{display:none}

.tav-enter .tavdoor{
  display:block;position:fixed;inset:0;z-index:300;
  background:#080502;overflow:hidden;
  perspective:1200px;perspective-origin:50% 44%;
  animation:tavdoor-gone .01s linear 1.78s forwards;
}
/* Belt and braces: the doors end hidden on their own, the script removes the
   node, and either alone is enough. A stuck overlay would take the Tavern
   with it. */
@keyframes tavdoor-gone{to{visibility:hidden;pointer-events:none}}

/* the firelight waiting on the other side */
.tavdoor__glow{
  position:absolute;inset:0;
  background:radial-gradient(58% 44% at 50% 42%,
    rgba(224,145,58,.55), rgba(224,145,58,.13) 46%, transparent 72%);
  animation:tavdoor-glow 1.05s ease .82s both;
}
@keyframes tavdoor-glow{0%{opacity:0}38%{opacity:1}100%{opacity:0}}

.tavdoor__leaf{
  position:absolute;top:-2%;bottom:-2%;width:50.4%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.6),transparent 20%,transparent 68%,rgba(0,0,0,.66)),
    repeating-linear-gradient(90deg,#2b1e11 0 44px,#1d1308 44px 47px,#33230f 47px 91px,#1d1308 91px 94px),
    #241909;
  box-shadow:inset 0 0 130px 34px rgba(0,0,0,.72);
}
/* two iron bands, riveted */
.tavdoor__leaf::before,.tavdoor__leaf::after{
  content:"";position:absolute;left:0;right:0;height:21px;
  background-image:
    radial-gradient(circle,#6f5a3a 0 2.6px,transparent 3.3px),
    linear-gradient(180deg,#42362a,#1b1209 56%,#0c0805);
  background-size:58px 100%,100% 100%;
  background-position:16px center,0 0;
  background-repeat:repeat-x,no-repeat;
  border-top:1px solid #5d4c34;border-bottom:1px solid #000;
}
.tavdoor__leaf::before{top:23%}
.tavdoor__leaf::after{bottom:23%}

.tavdoor__leaf--l{left:0;transform-origin:left center;border-right:2px solid #090502}
.tavdoor__leaf--r{right:0;transform-origin:right center;border-left:2px solid #090502}
.tav-enter .tavdoor__leaf--l{animation:tavdoor-swing-l .76s cubic-bezier(.55,0,.3,1) 1.02s both}
.tav-enter .tavdoor__leaf--r{animation:tavdoor-swing-r .76s cubic-bezier(.55,0,.3,1) 1.02s both}
/* Hinged on the outer edge and swung toward you, so they sweep past the eye
   instead of shrinking politely into the distance. */
@keyframes tavdoor-swing-l{
  0%{transform:rotateY(0);opacity:1}
  62%{opacity:1}
  100%{transform:rotateY(-96deg);opacity:0}
}
@keyframes tavdoor-swing-r{
  0%{transform:rotateY(0);opacity:1}
  62%{opacity:1}
  100%{transform:rotateY(96deg);opacity:0}
}

/* the slot they look you over through */
.tavdoor__slot{
  position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  width:min(134px,34vw);height:34px;z-index:3;overflow:hidden;border-radius:2px;
  background:#0a0603;border:2px solid #17100a;
  box-shadow:0 0 0 3px #120c07,0 12px 30px -12px #000;
  animation:tavdoor-slotgo .26s ease 1.0s forwards;
}
@keyframes tavdoor-slotgo{to{opacity:0}}
.tavdoor__peek{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 62%,rgba(224,145,58,.5),transparent 72%),#2b1708;
}
/* a pair of eyes, sizing you up */
.tavdoor__peek::after{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:58px;height:10px;
  background:
    radial-gradient(circle at 13px 50%,#f7e6ba 0 3px,transparent 3.7px),
    radial-gradient(circle at 45px 50%,#f7e6ba 0 3px,transparent 3.7px);
  animation:tavdoor-eyes .52s ease .5s both;
}
@keyframes tavdoor-eyes{0%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
.tavdoor__shutter{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#33240f,#1c1308);
  border-bottom:2px solid #0a0603;
  animation:tavdoor-shutter .9s cubic-bezier(.6,0,.3,1) .2s both;
}
@keyframes tavdoor-shutter{
  0%{transform:translateY(0)}
  30%{transform:translateY(-100%)}
  70%{transform:translateY(-100%)}
  100%{transform:translateY(0)}
}

.tavdoor__word{
  position:absolute;left:0;right:0;bottom:25%;z-index:3;margin:0;padding:0 26px;
  text-align:center;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.66rem,2.3vw,.9rem);letter-spacing:.3em;color:#bf9f4d;
  animation:tavdoor-word 1.24s ease .08s both;
}
@keyframes tavdoor-word{0%{opacity:0}24%{opacity:.9}60%{opacity:.9}100%{opacity:0}}

/* Never for anyone who asked for stillness — the head script already checks,
   this is the second lock on the same door. */
@media(prefers-reduced-motion:reduce){ .tav-enter .tavdoor{display:none} }

/* Past the week, the buttons give way to this — quieter than a control,
   so a line that has settled into the record looks settled rather than
   broken. Matches the controls' type, minus the border and the cursor. */
.tav-kept{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.5rem;color:rgba(195,173,131,.5);padding:4px 2px;cursor:default;
}

/* A face is a way to that person's page. Kept quiet — a slight lift, no
   underline, no colour change — so the tavern still reads as a conversation
   rather than a directory. */
.tav-facelink{display:inline-flex;border-radius:50%;transition:transform .16s var(--ease)}
.tav-facelink:hover,.tav-facelink:focus-visible{transform:translateY(-2px)}
.tav-namelink{color:inherit}
.tav-namelink:hover,.tav-namelink:focus-visible{color:var(--gold-l);text-decoration:underline}

/* ══ The Roll of Hands ═════════════════════════════════════════════════════
   Rounds already played, and the one in play. A hand of five used to be the
   end of the game; now the House can call a round, write it down here, and
   deal again — which is what keeps it going until the gates. */
.roll{padding:110px 0 70px;max-width:820px}
.roll__eyebrow{font-family:var(--display);font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);text-align:center}
.roll h1{color:#f4e6c2;text-align:center;margin:10px 0 12px}
.roll__lead{color:var(--smoke);text-align:center;max-width:560px;margin:0 auto;line-height:1.65}
.roll__back{text-align:center;margin-top:16px}
.roll__back a{color:var(--gold-l);font-family:var(--display);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase}
.roll__back a:hover{text-decoration:underline}

.roll__said,.roll__warn{
  margin:26px auto 0;max-width:600px;text-align:center;padding:11px 14px;border-radius:3px;
  font-size:.95rem;
}
.roll__said{background:rgba(60,90,60,.22);border:1px solid #3f6b46;color:#cfe6cf}
.roll__warn{background:rgba(139,42,42,.2);border:1px solid var(--wine-l);color:#eec8c8}

.roll h2{color:var(--gold-l);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;margin:44px 0 18px}

.roll__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.roll__tile{
  background:linear-gradient(180deg,#241a10,#1a1209);
  border:1px solid #4a3820;border-radius:4px;padding:12px 13px;
}
.roll__tile.is-top{border-color:var(--gold);box-shadow:0 0 26px -12px rgba(226,199,127,.55)}
.roll__who{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.roll__who .postpic,.roll__who .postpic--init{
  width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--gold-d);
}
.roll__name{font-family:var(--display);font-size:.82rem;color:#f0dfb4;line-height:1.2}
.roll__name small{display:block;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.roll__cards{display:flex;gap:4px;flex-wrap:wrap}
.roll__rank{margin-top:8px;font-family:var(--display);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-l)}
.roll__rank small{color:var(--smoke);letter-spacing:.08em}
.roll__none{color:var(--smoke);text-align:center}

.roll__close{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(226,199,127,.2);
}
.roll__close span{color:var(--smoke);font-size:.86rem}

.roll__round{
  background:rgba(20,14,8,.55);border:1px solid #3a2b18;border-radius:4px;
  padding:13px 15px;margin-bottom:13px;
}
.roll__rhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid rgba(226,199,127,.16)}
.roll__rhead b{font-family:var(--display);font-size:.8rem;color:var(--gold-l);letter-spacing:.12em}
.roll__rhead span{font-size:.76rem;color:var(--smoke)}
.roll__line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0}
.roll__line.is-win .roll__lname{color:var(--gold-l)}
.roll__lname{flex:1;min-width:120px;font-family:var(--display);font-size:.76rem;
  letter-spacing:.08em;color:#e0cca4}
.roll__lname a{color:inherit}
.roll__lname a:hover{text-decoration:underline}
.roll__crown{color:var(--gold);margin-right:5px}
.roll__lcards{display:flex;gap:3px;flex-wrap:wrap}
.roll__lrank{min-width:120px;text-align:right;font-size:.76rem;color:var(--smoke)}

@media(max-width:640px){
  .roll{padding-top:92px}
  .roll__lrank{min-width:0;text-align:left;width:100%}
}

/* ── raising a cup to a line ────────────────────────────────────────────
   The server has handled these all along; they only ever wanted a button.
   Kept faint until you hover the line, so a conversation reads as talk
   rather than as a row of controls under every sentence. */
.tav-reacts{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;
  opacity:.42;transition:opacity .18s}
.tav-said:hover .tav-reacts,.tav-reacts:focus-within{opacity:1}
.tav-reacts:has(.is-mine){opacity:1}          /* one you gave always shows */
.tav-reactform{display:inline-flex;margin:0;padding:0;border:0;background:none}
.tav-react{
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  font-size:.82rem;line-height:1;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(194,161,77,.28);background:rgba(255,240,200,.05);
  color:var(--smoke);transition:border-color .16s,background .16s,transform .16s;
}
.tav-react b{font-family:var(--display);font-size:.62rem;letter-spacing:.06em;color:#e0cca4}
.tav-react:hover{border-color:var(--gold-d);background:rgba(255,240,200,.12);transform:translateY(-1px)}
.tav-react.is-mine{border-color:var(--gold);background:rgba(226,199,127,.16)}
.tav-react.is-mine b{color:var(--gold-l)}
.tav-react.is-read{cursor:default}
.tav-react.is-read:hover{transform:none;border-color:rgba(194,161,77,.28);background:rgba(255,240,200,.05)}
@media(prefers-reduced-motion:reduce){.tav-react:hover{transform:none}}

/* ── the standing tally ─────────────────────────────────────────────────
   Rounds taken across the whole run, which is what turns a series of
   evenings into a contest worth coming back for. */
.roll__tally{margin-top:14px}
.tally{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tally__row{
  display:flex;align-items:center;gap:12px;
  background:rgba(20,14,8,.55);border:1px solid #3a2b18;border-radius:4px;
  padding:9px 14px;
}
.tally__row.is-first{border-color:var(--gold);background:rgba(226,199,127,.09)}
.tally__pos{
  width:22px;flex-shrink:0;text-align:center;
  font-family:var(--display);font-size:.78rem;color:var(--smoke);
}
.tally__row.is-first .tally__pos{color:var(--gold-l)}
.tally .postpic,.tally .postpic--init{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--gold-d);
}
.tally__name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tally__name a{color:#f0dfb4}
.tally__name a:hover{text-decoration:underline}
.tally__name{font-family:var(--display);font-size:.84rem;color:#f0dfb4}
.tally__name small{font-family:var(--serif);font-size:.72rem;color:var(--smoke);letter-spacing:.02em}
.tally__score{text-align:right;flex-shrink:0}
.tally__score b{display:block;font-family:var(--display);font-size:1.2rem;color:var(--gold-l);line-height:1}
.tally__score small{font-size:.68rem;color:var(--smoke)}
.roll__note{text-align:center;color:var(--smoke);font-size:.82rem;margin-top:12px}

/* ── searching the talk, and what is new ────────────────────────────────
   Coming back to a long evening, you could not tell where you had left off,
   and by October there will be a lot to scroll past. */
.tav-find{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;
}
.tav-find form{display:flex;gap:7px;align-items:center;flex:1;min-width:220px}
.tav-find input{
  flex:1;min-width:150px;font-family:var(--serif);font-size:.92rem;padding:8px 12px;
  border:1px solid rgba(226,199,127,.28);border-radius:999px;
  background:rgba(255,246,225,.06);color:#f0e2c0;
}
.tav-find input::placeholder{color:var(--smoke)}
.tav-find input:focus{outline:2px solid var(--gold-d);outline-offset:1px}
.tav-find button{
  font-family:var(--display);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold-d);background:transparent;color:var(--gold-l);
}
.tav-find button:hover{background:rgba(226,199,127,.12)}
.tav-find__clear{font-size:.78rem;color:var(--smoke);white-space:nowrap}
.tav-find__clear:hover{color:var(--gold-l);text-decoration:underline}
.tav-find__new{
  font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-l);white-space:nowrap;
}
.tav-find__new b{font-size:.86rem}
.tav-found{color:var(--smoke);margin:0 0 18px;font-size:.94rem}
.tav-found a{color:var(--gold-l)}
.tav-found a:hover{text-decoration:underline}

/* A line said since you were last here. A mark down the edge rather than a
   colour change, so it does not shout over the conversation. */
.tav-said.is-new .tav-scrap{box-shadow:inset 3px 0 0 var(--gold)}
.tav-said.is-new .tav-when::after{
  content:"new";margin-left:7px;padding:1px 6px;border-radius:999px;
  font-family:var(--display);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(226,199,127,.18);color:var(--gold-l);
}

/* ── the room, as October nears ─────────────────────────────────────────
   The hearth already dims when nobody has spoken. This is the other half:
   it builds as the faire gets closer, so the date is something the room
   feels rather than a number on a strip. Nothing here is announced — you
   just notice the fire is bigger than it was last month. */
.tav-room[data-near="month"] .tav-hearth{filter:brightness(1.12) saturate(1.06)}
.tav-room[data-near="week"]  .tav-hearth{filter:brightness(1.28) saturate(1.14)}
.tav-room[data-near="eve"]   .tav-hearth{filter:brightness(1.45) saturate(1.22)}
.tav-room[data-near="open"]  .tav-hearth{filter:brightness(1.6) saturate(1.3)}

.tav-room[data-near="week"]  .tav-lantern,
.tav-room[data-near="eve"]   .tav-lantern,
.tav-room[data-near="open"]  .tav-lantern{filter:brightness(1.25)}

/* A warmth over the whole room, strongest on the eve. */
.tav-room::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 60% at 50% 96%,rgba(224,145,58,.30),transparent 70%);
  transition:opacity .6s var(--ease);
}
.tav-room[data-near="week"]::after{opacity:.5}
.tav-room[data-near="eve"]::after{opacity:.85}
.tav-room[data-near="open"]::after{opacity:1}
.tav-room[data-near="ended"] .tav-hearth{filter:brightness(.72) saturate(.8)}

/* ── what the House is giving ──────────────────────────────────────────── */
/* The sealed state is the one that matters — not knowing is half the pull —
   so it gets the wax seal and the gift sits on it like something waiting to
   be opened, rather than a grey box announcing that information is missing. */
.roll__prizes{margin:34px 0 8px}
.roll__prizes h2{font-family:var(--display);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-l);padding-bottom:9px;margin-bottom:16px;
  border-bottom:1px solid rgba(138,109,42,.34)}
.prizes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.prize{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:22px 18px;border-radius:4px;
  background:linear-gradient(#2c2010,#1b1309);
  border:1px solid rgba(226,199,127,.28);
  box-shadow:inset 0 1px 0 rgba(226,199,127,.14),0 14px 30px -22px #000;
}
.prize--first{border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(226,199,127,.24),0 14px 30px -20px #000}
.prize__rank{font-family:var(--display);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:#c9ab7f}
.prize--first .prize__rank{color:var(--gold-l)}
/* The seal: a blob of wax with the gift pressed into it. */
.prize__sealed{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;font-size:2rem;line-height:1;
  background:radial-gradient(circle at 34% 30%,#a33232,#6e1a1a 62%,#4a1010);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.45),
             0 8px 18px -8px rgba(0,0,0,.8);
  margin:4px 0 2px;
}
.prize__hint{font-family:var(--serif);font-style:italic;font-size:.9rem;color:#a8916b}
.prize__what{font-family:var(--display);font-size:1.05rem;color:#f5e9c8;line-height:1.4}
.prize__note{margin-top:14px;font-size:.9rem;color:#c9ab7f;line-height:1.7;text-align:center}

/* ── pinned to the top of the board ───────────────────────────────────────── */
/* A pinned note keeps its place however old it gets, so it has to say why it
   is up there — otherwise it reads as the board being out of order. */
.tav-run.is-pinned{
  position:relative;
  border:1px solid rgba(226,199,127,.42);border-radius:6px;
  background:linear-gradient(180deg,rgba(226,199,127,.08),rgba(226,199,127,.02));
  padding:12px 14px 6px;margin-bottom:18px;
  box-shadow:0 12px 30px -24px #000;
}
.tav-pinned{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-family:var(--display);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-l);
}
.tav-pinned b{color:#f5e9c8;letter-spacing:.08em}
.tav-said{position:relative}
.tav-pin{position:absolute;top:2px;right:0;opacity:0;transition:opacity .16s var(--ease)}
.tav-said:hover .tav-pin,.tav-pin:focus-within{opacity:1}
.tav-pin button{
  border:1px solid rgba(226,199,127,.4);border-radius:3px;cursor:pointer;padding:3px 9px;
  background:rgba(36,26,16,.9);color:#e4c77f;
  font-family:var(--display);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
}
.tav-pin button:hover{background:var(--gold-d);color:#1a120b}
/* No hover on a touch screen, so the control simply stays put. */
@media(hover:none){.tav-pin{opacity:1;position:static;margin-bottom:6px}}

/* The tavern song. A control, not an ornament — it says what pressing it will
   do, and it looks obviously pressable so nobody wonders whether the House is
   about to start singing at them unbidden. */
.tav-song{
  margin-left:auto;cursor:pointer;
  border:1px solid rgba(226,199,127,.45);border-radius:3px;
  padding:5px 12px;background:rgba(36,26,16,.7);color:#e4c77f;
  font-family:var(--display);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.tav-song:hover,.tav-song:focus-visible{background:var(--gold-d);color:#1a120b}
.tav-song.is-playing{background:var(--wine);border-color:var(--wine-l);color:#f8edd1}
@media(max-width:620px){.tav-song{margin-left:0}}

/* ── When the round ends ────────────────────────────────────────────────────
   The round closes itself now, so both places that show a hand say when.
   Quiet by default; the last three days go gold so the deadline arrives as a
   warning rather than a surprise. */
.tav-roundend{
  margin:14px 0 4px;padding:9px 13px;border-radius:3px;font-size:.86rem;line-height:1.6;
  background:rgba(122,85,20,.09);border-left:3px solid var(--line2);color:#4a3722;
}
.tav-roundend b{color:#5c1b1b}
.tav-roundend a{color:#7a2020;font-weight:600}
.tav-roundend__soon{
  display:inline-block;margin-left:5px;padding:1px 8px;border-radius:2px;
  background:#6d1d1d;color:#f6e7c4;font-family:var(--display);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
}
.roll__ends{
  text-align:center;margin:-6px 0 18px;font-size:.86rem;line-height:1.6;
  color:#b9a582;
}
.roll__ends b{color:var(--gold-l)}

/* The standing high hand, above the table on the Roll. The one figure on the
   page that outlives a round, so it is given a frame of its own rather than
   another line of prose. */
.roll__high{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;
  max-width:640px;margin:0 auto 22px;padding:12px 18px;border-radius:4px;
  background:linear-gradient(180deg,rgba(226,199,127,.13),rgba(226,199,127,.05));
  border:1px solid var(--gold-d);
}
.roll__high__k{
  font-family:var(--display);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);width:100%;
}
.roll__high b{font-family:var(--display);font-size:1.12rem;color:var(--gold-l)}
.roll__high__r{
  padding:2px 9px;border-radius:2px;background:rgba(226,199,127,.16);
  border:1px solid var(--gold-d);color:#f0e0b4;font-size:.82rem;
}
.roll__high small{width:100%;color:#b9a582;font-size:.79rem;line-height:1.55}

/* Throwing a card back. The control lives on the card itself rather than in a
   row of buttons underneath — it is the card you are acting on, so that is
   where the handle belongs. Hidden until the card is hovered or the button
   itself is focused, so a full hand does not read as five buttons. */
.pcard{position:relative}
.pcard__redeal{position:absolute;bottom:-7px;right:-7px;margin:0;line-height:0}
.pcard__redeal button{
  width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--gold-d);background:#3b2a12;color:var(--gold-l);
  font-size:.78rem;line-height:1;
  opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s,background .15s;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.8);
}
.pcard:hover .pcard__redeal button,
.pcard__redeal button:focus-visible{opacity:1;transform:scale(1)}
.pcard__redeal button:hover{background:var(--wine);color:#f8edd1}
.pcard__redeal button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
/* No hover on a touch screen, so the handle is simply always there. */
@media(hover:none){.pcard__redeal button{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pcard__redeal button{transition:none}}

/* A picture of the prize itself, once the seal is broken. Square and modest —
   it sits in the card beside its own name, not on a wall of its own. */
.prize__pic{
  display:block;width:100%;max-width:190px;height:auto;margin:0 auto 10px;
  border-radius:4px;border:1px solid var(--gold-d);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9);
}
@media(max-width:560px){.prize__pic{max-width:150px}}