/* Dil · Hearts — a round rosewood card table with a deep-red velvet top and a brass heart in the
   middle, a lacquered head with two ember LED counters (your points this hand, your score) and a
   brass plate for the hand and the pass. Cream cards; the backs are red lacquer with a gold lattice. */
body{--velvet-1:#8a1f2a;--velvet-2:#5c1019;--velvet-3:#3a0a10}
.hero-art svg{overflow:visible}
.dl-levels{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ================= the table ================= */
body.in-game{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
#play.active{flex:1 1 auto;min-height:0;width:100%;max-width:1500px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage" "side";gap:6px}
.stage{grid-area:stage;min-height:0;min-width:0;display:grid;place-items:center}
.board{--pad:10px;position:relative;display:flex;flex-direction:column;gap:8px;padding:var(--pad);border-radius:26px;
  background:repeating-linear-gradient(97deg,rgba(42,20,6,0) 0 9px,rgba(42,20,6,.16) 9px 10px,rgba(42,20,6,0) 10px 23px,rgba(255,210,150,.05) 23px 25px),linear-gradient(135deg,#6e2a18,#4e1c0e 50%,#33110a);
  border:2px solid #2a0c06;box-shadow:inset 0 0 0 2px rgba(233,185,90,.3),0 3px 0 #1c0804,0 24px 50px rgba(0,0,0,.55)}
.bd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;flex:none;border-radius:14px;
  background:linear-gradient(180deg,var(--lacquer-1),var(--lacquer-2) 55%,var(--lacquer-3));border:1.5px solid var(--gold-1);
  box-shadow:inset 0 1px 0 rgba(255,225,170,.35),inset 0 -2px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.3)}
.bd-count{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.bd-count>span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f3d9b8;opacity:.85;line-height:1;white-space:nowrap}
.led{display:inline-flex;gap:2px;padding:4px 5px;background:#140604;line-height:0;border-radius:6px;border:1.5px solid var(--gold-2);box-shadow:inset 0 2px 7px rgba(0,0,0,.85),0 1px 0 rgba(255,225,170,.25)}
.led svg{width:14px;height:24px;display:block;filter:drop-shadow(0 0 2.5px rgba(255,80,30,.6))}
.led .on{fill:#ff5a2a}.led .off{fill:#3a1208}
.plate{display:flex;align-items:baseline;gap:8px;padding:4px 16px;border-radius:8px;color:#3a2406;min-width:0;
  background:linear-gradient(180deg,#f6dc95,#caa04a 60%,#9a7224);border:1px solid #5a3a10;box-shadow:inset 0 1px 0 rgba(255,250,220,.8),0 2px 4px rgba(0,0,0,.35)}
.plate-k{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.plate b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.2rem;white-space:nowrap}

.velvet{position:relative;flex:none;border-radius:50% / 46%;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.05 0 0 0 0 0.08 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 60% at 50% 45%,var(--velvet-1),var(--velvet-2) 70%,var(--velvet-3));
  box-shadow:inset 0 4px 22px rgba(0,0,0,.6),0 0 0 2px rgba(233,185,90,.55),0 0 0 9px #4e1c0e,0 0 0 10px rgba(233,185,90,.35)}
.velvet.square{border-radius:22px}
/* the brass heart inlay */
.inlay{position:absolute;pointer-events:none;opacity:.32}
.inlay svg{width:100%;height:100%}

/* a seat's name plate */
.seat{position:absolute;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:rgba(0,0,0,.42);border:1.5px solid rgba(233,185,90,.4);
  font-size:.95rem;white-space:nowrap;transform:translate(-50%,-50%);z-index:300;transition:box-shadow .3s,border-color .3s;color:var(--cream)}
.seat i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.seat b{font-family:"Yeseva One",serif;font-weight:400;color:var(--gold-text)}
.seat small{color:#ffb3a0;font-size:.85rem}
.seat .bot{font-size:.75rem;color:var(--cream-dim);font-style:italic}
.seat.turn{border-color:#f2cf7e;box-shadow:0 0 0 3px rgba(242,207,126,.35),0 0 18px rgba(242,207,126,.5)}
.seat.away{opacity:.6}

/* ---------- a card ---------- */
.pc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .09);
  background:linear-gradient(180deg,#fffaf0,#f1e3c2);border:1px solid #8a6a40;color:#1d140e;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.2);
  transition:transform .32s cubic-bezier(.2,.75,.3,1),opacity .3s,box-shadow .15s;will-change:transform}
.pc.red{color:#a3291a}
.pc::after{content:"";position:absolute;inset:3px;border-radius:calc(var(--cw) * .07);border:1px solid rgba(202,160,74,.45);pointer-events:none}
.pc .ix{position:absolute;left:8%;top:3%;display:flex;flex-direction:column;align-items:center;font-family:"Yeseva One",serif;font-size:max(13px,calc(var(--cw) * .27));line-height:1}
.pc .ix i{font-style:normal;font-family:Georgia,"Times New Roman",serif;font-size:.9em}
.pc .pip{position:absolute;left:0;right:0;top:38%;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:calc(var(--cw) * .56);line-height:1}
.pc .court{position:absolute;left:24%;right:12%;top:20%;bottom:14%;border:1.5px solid currentColor;border-radius:5px;display:grid;place-items:center;
  font-family:"Yeseva One",serif;font-size:calc(var(--cw) * .42);background:radial-gradient(circle at 50% 40%,rgba(233,185,90,.3),rgba(233,185,90,0) 70%)}
.pc .nt{position:absolute;left:6%;bottom:5%;min-width:38%;padding:1px 4px;border-radius:999px;text-align:center;font-family:"Yeseva One",serif;font-size:max(11px,calc(var(--cw) * .17));
  color:#f4e7c9;background:#2f6a48}
.pc .nt.sour{background:#8a1f14}
.pc .nt.tri{background:#3a1a5a}
/* the back: red lacquer, a gold lattice and a little heart medallion */
.pc.back{background:
  radial-gradient(circle at 50% 50%,#f2cf7e 0 9%,rgba(0,0,0,0) 10%),
  repeating-linear-gradient(45deg,rgba(233,185,90,.35) 0 1.5px,rgba(0,0,0,0) 1.5px 9px),
  repeating-linear-gradient(-45deg,rgba(233,185,90,.35) 0 1.5px,rgba(0,0,0,0) 1.5px 9px),
  linear-gradient(160deg,#b23a20,#7a1a10);border-color:#4a1408}
.pc.back::after{inset:4px;border-color:rgba(242,207,126,.7)}
.pc.mine{cursor:pointer}
.pc.mine.can:hover{transform:var(--t) translateY(-8px)!important}
.pc.dim{filter:brightness(.72) saturate(.7)}
.pc.pick{box-shadow:0 0 0 3px #f2cf7e,0 0 16px rgba(242,207,126,.8)}
.pc.got::before{content:"";position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:#f2cf7e;box-shadow:0 0 8px #f2cf7e;z-index:2}
.pc.nope{animation:nope .32s}
@keyframes nope{20%{translate:-5px 0}50%{translate:5px 0}80%{translate:-3px 0}}
.pc.ring{animation:ring .7s ease-out}
@keyframes ring{0%{filter:brightness(1.25) drop-shadow(0 0 12px #f2cf7e)}100%{filter:none}}
.pc.sourglow{animation:sourglow .9s ease-out}
@keyframes sourglow{0%{filter:drop-shadow(0 0 14px #ff5a3a) brightness(1.1)}100%{filter:none}}
.pc:focus-visible{outline:3px solid #1f4fa3;outline-offset:2px}
.no-anim .pc{transition:none!important}

/* the trick's words, in the middle of the table */
.mid-say{position:absolute;left:50%;transform:translate(-50%,0);text-align:center;pointer-events:none;color:var(--cream);font-family:"Yeseva One",serif;
  text-shadow:0 2px 10px rgba(0,0,0,.6);font-size:1.05rem;z-index:250;white-space:nowrap;opacity:0;transition:opacity .3s}
.mid-say.on{opacity:1}

/* ---------- the side ---------- */
.side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.say{text-align:center;font-size:1.02rem;line-height:1.25;height:auto;overflow:visible;min-height:2.7em;max-width:52ch;display:flex;flex-direction:column;justify-content:center}
.say b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.18rem;color:var(--cream)}
.say small{display:block;color:var(--cream-dim);font-size:1rem;margin-top:2px}
.gold-tool{background:var(--gold-1)!important;color:#2a1706;border-color:var(--gold-1)!important;font-weight:700}
.gold-tool:disabled{opacity:.45}
.answers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.answers button{min-height:52px;min-width:96px;padding:8px 16px;border-radius:14px;font-family:"Yeseva One",serif;font-size:1.1rem;background:rgba(0,0,0,.32);border:1.5px solid rgba(233,185,90,.45)}
.answers button small{display:block;font-family:Alegreya,Georgia,serif;font-size:.8rem;color:var(--cream-dim)}
.answers button.right{background:#2f6a48;border-color:#9ce0b4}
.answers button.wrong{background:#8a1f14;border-color:#ffb3a0}
.answers button:disabled{cursor:default}
.scoresheet{width:100%;border-collapse:collapse;margin:10px 0;font-size:1rem;background:#fbf3e2;color:#2a1a10;border-radius:10px;overflow:hidden}
.scoresheet th,.scoresheet td{padding:6px 8px;border-bottom:1px solid rgba(90,58,26,.25);text-align:right;font-variant-numeric:tabular-nums}
.scoresheet th{font-family:"Yeseva One",serif;font-weight:400;color:#8a2413;text-align:right}
.scoresheet td:first-child,.scoresheet th:first-child{text-align:left}
.scoresheet tr.tot td{font-weight:700;border-top:2px solid #5a3a1a}
.scoresheet .moon{color:#3a1a5a;font-style:italic}

@media (min-aspect-ratio:5/4){
  #play{--side:clamp(220px,25vw,340px)}
  #play.active{grid-template-columns:minmax(0,1fr) var(--side);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"stage ." "stage side" "stage .";column-gap:clamp(12px,2vw,28px)}
  .side{align-items:stretch}
  .say{text-align:left;max-width:none}
  .tools,.answers{justify-content:flex-start}
}
@media (min-aspect-ratio:5/4) and (min-height:621px){
  #play.active{grid-template-columns:minmax(0,1fr) auto var(--side) minmax(0,1fr);grid-template-areas:". stage . ." ". stage side ." ". stage . .";max-width:none}
}
@media (min-aspect-ratio:5/4) and (max-height:620px){
  body.in-game .top{position:fixed;top:0;right:0;width:calc(var(--side) + max(8px,env(safe-area-inset-right)) + 8px);max-width:none;margin:0;
    padding:calc(6px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 8px;min-height:0;gap:6px;z-index:6}
  body.in-game .back{padding:6px;min-height:44px}
  body.in-game .back>span{display:none}
  body.in-game .top .title{display:none}
  #play{padding-top:calc(6px + env(safe-area-inset-top))}
  #play.active{grid-template-rows:calc(52px + env(safe-area-inset-top)) auto minmax(0,1fr);grid-template-areas:"stage ." "stage side" "stage ."}
  .board{--pad:6px;border-radius:16px;gap:5px}
  .bd-head{padding:2px 8px}
  .bd-count>span{display:none}
  .led svg{width:11px;height:19px}
  .plate{padding:2px 10px}.plate b{font-size:1rem}.plate-k{font-size:.7rem}
  .say{font-size:1rem;min-height:0}
  .say b{font-size:1.04rem}
  .say small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tool{min-width:0;padding:4px 10px}
  .seat{font-size:.85rem;padding:2px 8px 2px 4px}.seat .bot{display:none}
}
@media (max-aspect-ratio:5/4) and (max-width:560px){
  #play{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .board{--pad:5px;border-radius:16px;gap:5px}
  .bd-head{padding:3px 8px;gap:6px}
  .bd-count>span{display:none}
  .led svg{width:11px;height:19px}
  .plate{padding:2px 10px}.plate-k{display:none}.plate b{font-size:1.05rem}
  .seat{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){.pc{transition:opacity .2s}}