/* Liar's Dice Bluff: the table, the cups, the dice and the bid picker. Every size is in em: game.js sets one font size per screen. */
:root{--leather:#b9783f;--leather-hi:#d99a5b;--leather-lo:#6e3c18;--ivory:#fbf6e9;--good:#4fb07e;--mid:#f2b33d;--bad:#e2574c}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------------- home */
.home{align-items:center;justify-content:center;gap:1em;padding:1em;text-align:center}
.home-left,.home-right{display:flex;flex-direction:column;align-items:center;gap:.5em}
.home-right{gap:.6em;min-width:14em}
.home-right .pill{width:100%}
.home-art{width:10em;height:6em}
.art-cup{animation:wob 3.2s ease-in-out infinite;transform-origin:70px 84px}
@keyframes wob{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-4deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}
.title{margin:.1em 0 0;font:900 3em/1.05 var(--round);color:var(--ink);letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.4)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.15em}
.best{margin:0;color:var(--gold-hi);font-weight:700;min-height:1.4em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em}
.home.wide{flex-direction:row;gap:3em}

/* ---------------- the stage */
.stage{position:absolute;inset:0;margin:0 auto;max-width:64em;display:grid;gap:.4em;
  padding:max(.4em,env(safe-area-inset-top)) max(.5em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.5em,env(safe-area-inset-left));
  grid-template-columns:minmax(0,1fr);grid-template-rows:2.8em 8.2em minmax(0,1fr) 4.6em 10.4em;grid-template-areas:"bar" "rivals" "table" "mine" "panel"}
#game.wide .stage{grid-template-columns:minmax(0,1fr) 23em;grid-template-rows:4.6em 8.2em minmax(6em,9em);column-gap:1em;align-content:center;
  grid-template-areas:"bar mine" "rivals panel" "table panel"}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:0}
.bar .jewel{width:2.6em;height:2.6em}
.round{font:800 1.1em/1 var(--round);color:var(--ink);white-space:nowrap}
.lvl{font:800 .9em/1 var(--round);color:var(--felt-lo);background:var(--gold);border-radius:999px;padding:.45em .8em;min-width:44px;text-align:center}

/* ---------------- dice (flat, drawn the same in every browser) */
.d{--d:1em;display:inline-grid;width:var(--d);height:var(--d);flex:none;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:calc(var(--d) * .14);border-radius:calc(var(--d) * .2);vertical-align:middle;
  background:radial-gradient(circle at 32% 28%,#fffef9,#f4ecda 62%,#e2d5b9);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset -.06em -.1em .2em rgba(120,95,50,.22),0 .08em 0 #cdbd98,0 .18em .35em rgba(0,0,0,.35);transition:transform .2s,opacity .25s,box-shadow .2s}
.d i{width:80%;height:80%;border-radius:50%;place-self:center;background:radial-gradient(circle at 40% 35%,#4a423a,#16120f 70%)}
.d.f1 i{width:100%;height:100%;background:radial-gradient(circle at 40% 35%,#e0604e,#a82d1f 70%)}
.p1{grid-area:1/1}.p3{grid-area:1/3}.p4{grid-area:2/1}.p5{grid-area:2/2}.p6{grid-area:2/3}.p7{grid-area:3/1}.p9{grid-area:3/3}
.d.hit{transform:translateY(-.08em) scale(1.08);box-shadow:0 0 0 .12em var(--gold),0 0 .6em var(--gold-hi),0 .18em .35em rgba(0,0,0,.35)}
.d.hit.new{animation:lit .35s ease-out}
@keyframes lit{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:translateY(-.08em) scale(1.08)}}
.d.dim{opacity:.42}
.d.lost{opacity:0}
.d.lost.fresh{opacity:1;animation:lost .7s ease-in forwards}
@keyframes lost{0%{transform:scale(1)}30%{transform:scale(1.2);box-shadow:0 0 0 .14em var(--bad),0 0 .8em var(--bad)}100%{transform:translateY(.6em) scale(.2) rotate(70deg);opacity:0}}

/* ---------------- rivals */
.rivals{grid-area:rivals;display:flex;justify-content:center;align-items:stretch;gap:.4em;min-width:0}
.seat{flex:1 1 0;max-width:7.5em;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.12em;padding:.2em .1em;border-radius:1em;transition:background .3s,opacity .3s}
.seat.up{background:rgba(255,236,190,.1);box-shadow:inset 0 0 0 2px rgba(255,217,134,.5)}
.seat.out{opacity:.38}
.ava{width:2.5em;height:2.5em;flex:none}
.seat.up .ava{animation:think 1.1s ease-in-out infinite}
@keyframes think{50%{transform:translateY(-.15em)}}
.face{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .1em .15em rgba(0,0,0,.35))}
.face .m,.face .drop{display:none}
.seat[data-mood=calm] .calm,.seat[data-mood=nervous] .worry,.seat[data-mood=happy] .happy,.seat[data-mood=sad] .sad,.seat[data-mood=nervous] .drop{display:inline}
.seat[data-mood=nervous] .eyes{animation:shifty 1s ease-in-out infinite}
.seat[data-mood=nervous] .drop{animation:drip 1.4s ease-in infinite}
@keyframes shifty{0%,100%{transform:translateX(-2.2px)}50%{transform:translateX(2.2px)}}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(6px);opacity:.2}}
.nm{font:800 .95em/1.1 var(--round);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cupbox{position:relative;width:3.8em;height:2.5em;flex:none}
.dgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1.1em);grid-auto-rows:1.1em;gap:.14em;justify-content:center;align-content:end}
.dgrid .d{--d:1.1em}
.cup{position:absolute;inset:0 .2em;display:grid;place-items:center;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);border-radius:.3em;
  background:linear-gradient(90deg,var(--leather-lo),var(--leather) 30%,var(--leather-hi) 52%,var(--leather) 72%,var(--leather-lo));transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .35s;transform-origin:50% 100%}
.cup::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.45em;background:rgba(0,0,0,.25)}
.cup b{font:900 1.05em/1 var(--round);color:#fff3e0;text-shadow:0 1px 0 rgba(0,0,0,.4);position:relative;z-index:1}
.seat.open .cup{transform:translateY(-1.6em) scale(.9);opacity:0}
.cup.rattle{animation:rattle .55s ease-in-out}
@keyframes rattle{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg) translateY(-.2em)}35%{transform:rotate(8deg)}55%{transform:rotate(-7deg) translateY(-.15em)}75%{transform:rotate(5deg)}}
.bub{min-height:1.6em;display:flex;align-items:center;gap:.25em;padding:.1em .55em;border-radius:999px;background:var(--ivory);color:var(--paper-ink);font:800 .95em/1 var(--round);visibility:hidden;white-space:nowrap}
.bub.on{visibility:visible}
.bub .d{--d:1.3em}
.bub.call{background:var(--bad);color:#fff}

/* ---------------- the middle of the table */
.table{grid-area:table;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;min-height:0;text-align:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,236,190,.1),transparent 70%);border-radius:2em}
.table p{margin:0}
.who{font:800 1.05em/1.2 var(--round);color:var(--ink-soft);min-height:1.2em}
.bigbid{display:flex;align-items:center;gap:.35em;min-height:2.6em}
.bigbid .q{font:900 2.2em/1 var(--round);color:var(--ink)}
.bigbid .q.new{font-size:1.5em;color:var(--ink-soft)}
.bigbid .d{--d:2.5em}
.hint{font:800 .9em/1 var(--round);border-radius:999px;padding:.35em .8em;min-height:1.6em}
.hint:empty{visibility:hidden;padding:0}
.hint.good{background:rgba(79,176,126,.25);color:#bff0d3}
.hint.mid{background:rgba(242,179,61,.22);color:var(--gold-hi)}
.hint.bad{background:rgba(226,87,76,.28);color:#ffd0cb}
.say{font-size:1em;color:var(--ink);min-height:1.3em;max-width:100%;text-wrap:balance}

/* ---------------- your seat */
.mine{grid-area:mine;display:flex;align-items:center;justify-content:center;gap:.7em;min-width:0;background:rgba(0,0,0,.18);border-radius:1.2em;padding:0 .7em}
.me-tag{display:flex;flex-direction:column;align-items:center;font:700 .9em/1.15 var(--round);color:var(--ink-soft)}
.me-tag b{font-size:1.25em;color:var(--gold-hi)}
.mydice{display:flex;gap:.35em;align-items:center}
.mydice .d{--d:2.8em}
#game.wide .mydice .d{--d:2.7em}
.mydice.roll .d{animation:tumble .6s cubic-bezier(.3,.7,.4,1)}
.mydice.roll .d:nth-child(2){animation-delay:.04s}.mydice.roll .d:nth-child(3){animation-delay:.08s}.mydice.roll .d:nth-child(4){animation-delay:.12s}.mydice.roll .d:nth-child(5){animation-delay:.16s}
@keyframes tumble{0%{transform:translateY(-.8em) rotate(-200deg) scale(.6);opacity:0}70%{transform:translateY(.1em) rotate(10deg) scale(1.05);opacity:1}100%{transform:none}}

/* ---------------- the bid picker */
.panel{grid-area:panel;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.picker{display:flex;flex-direction:column;gap:.4em;transition:opacity .25s}
#game:not(.mine-up) .picker{opacity:.55}
.qrow{display:flex;align-items:center;justify-content:center;gap:.8em}
.step{width:1.65em;height:1.65em;min-width:44px;min-height:44px;border-radius:50%;border:0;background:var(--ivory);color:var(--felt);font:900 1.7em/1 var(--round);display:grid;place-items:center;padding:0;
  box-shadow:0 .09em 0 #b9ab8a,0 .18em .35em rgba(0,0,0,.3)}
.step:active{transform:translateY(2px)}
.step:disabled{opacity:.35;cursor:default}
.preview{display:flex;align-items:center;justify-content:center;gap:.3em;min-width:7em;padding:.2em .7em;border-radius:1em;background:rgba(0,0,0,.22)}
.preview .q{font:900 1.8em/1 var(--round)}
.preview .d{--d:2.1em}
.faces{display:flex;justify-content:center;gap:.3em}
.fbtn{width:2.7em;height:2.7em;min-width:44px;min-height:44px;padding:0;border:0;border-radius:.6em;background:rgba(0,0,0,.2);display:grid;place-items:center;transition:transform .12s,background .15s}
.fbtn .d{--d:2em}
.fbtn[aria-pressed=true]{background:var(--gold);transform:translateY(-.12em);box-shadow:0 0 0 .12em var(--gold-hi)}
.fbtn:disabled{opacity:.3;cursor:default}
.fbtn:focus-visible,.step:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.acts{display:flex;gap:.5em;justify-content:center}
.acts .pill{flex:1 1 0;max-width:12em;padding:.55em 1em;min-height:max(44px,2.8em);white-space:nowrap}
.pill.liar{background:linear-gradient(180deg,#ff8a7a,var(--bad) 55%,#a8322a);color:#fff;box-shadow:0 1px 0 #fff6 inset,0 4px 0 #6e1d17,0 8px 16px rgba(0,0,0,.35)}
.after{display:flex;align-items:center;justify-content:center;flex:1}
.after .pill{min-width:12em;min-height:max(44px,2.9em)}

/* ---------------- juice */
.pop{animation:pop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-.25em)}40%{transform:translateX(.25em)}60%{transform:translateX(-.15em)}80%{transform:translateX(.1em)}}

/* ---------------- cards */
.card .label{margin:.6em 0 .3em;font-weight:700;color:var(--paper-soft);font-size:.9em}
.card .choices .choice{flex:1}
.how p{margin:.35em 0;line-height:1.35}
.note.big{font-size:1.1em;color:var(--paper-ink);font-weight:700}
.result.won h2{color:#b0700a}
.result.lost h2{color:var(--felt)}
@media (max-height:420px){.card{padding:.8em 1em .7em}.card h2{margin-bottom:.3em}.card .actions{margin-top:.5em;gap:.25em}.card .note{margin:.15em 0}}