:root {
  --wine: #6e1b36; --wine2: #50001f; --deep: #3a0016; --fire: #ff5a24; --flame: #ff7a2f;
  --gold: #e7a02a; --parch: #e8e1d8; --taupe: #9e906e; --ink: #18120f;
  --pride: #44b89a; --wisdom: #e7a02a; --desire: #8e84e2; --joy: #ff5a24;
  --c: 84px; --m: 64px; --r: 34px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wine); color: var(--parch);
  font-family: Labrada, Georgia, serif; font-size: 16px; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
h1 { font-family: Texturina, serif; font-weight: 900; margin: 0; }

/* the field: slow sunburst, like the Smuggler cards */
#rays { position: fixed; inset: -60vmax; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--wine) 0 7deg, #7d2141 7deg 14deg);
  animation: spin 160s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.screen { position: fixed; inset: 0; z-index: 1; padding: calc(var(--sat) + 8px) 10px calc(var(--sab) + 8px); }

.btn { font-family: Texturina, serif; font-weight: 900; font-size: 20px; letter-spacing: .02em; color: var(--ink);
  background: var(--fire); padding: 12px 22px; border-radius: 6px; box-shadow: 0 4px 0 var(--deep), inset 0 0 0 2px #ffb08f;
  min-height: 48px; transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--deep), inset 0 0 0 2px #ffb08f; }
.btn.big { font-size: 30px; padding: 14px 44px; }
.btn.alt { background: var(--parch); box-shadow: 0 4px 0 var(--deep), inset 0 0 0 2px #fff; }
.btn[disabled] { filter: saturate(.2) brightness(.7); cursor: default; }

/* ---------- home ---------- */
#home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; overflow: hidden; }
#wordmark { width: min(86vw, 62vh); aspect-ratio: 1 / .78; object-fit: cover; object-position: top; border-radius: 4px;
  box-shadow: 0 0 0 4px var(--taupe), 0 18px 60px #000a; animation: bob 5s ease-in-out infinite; z-index: 2; }
@keyframes bob { 50% { transform: translateY(-1.2vh) rotate(-.6deg); } }
#tag { margin: 0; font-size: clamp(18px, 2.6vh, 26px); font-weight: 600; text-align: center; z-index: 2; text-shadow: 0 2px 0 var(--deep); }
#homeBtns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; z-index: 2; }
#homeBtns .big { flex-basis: 100%; max-width: 340px; margin: 0 auto; }
#pyre { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#pyre .flame { position: absolute; bottom: -6vh; width: 22vmin; height: 46vmin; background: var(--fire);
  clip-path: polygon(50% 0, 68% 30%, 60% 44%, 82% 62%, 74% 100%, 26% 100%, 16% 66%, 36% 48%, 30% 26%);
  transform-origin: 50% 100%; animation: lick 1.3s ease-in-out infinite alternate; opacity: .92; }
#pyre .flame:nth-child(even) { background: var(--flame); animation-duration: .9s; }
@keyframes lick { from { transform: scaleY(.72) skewX(-5deg); } to { transform: scaleY(1.12) skewX(6deg); } }
#pyre .fall { position: absolute; top: -24vmin; width: 17vmin; border-radius: 3px; box-shadow: 0 6px 18px #0008; animation: fall linear infinite; }
@keyframes fall { from { transform: translateY(0) rotate(var(--a)); } 80% { opacity: 1; filter: none; }
  to { transform: translateY(125vh) rotate(var(--b)); opacity: 0; filter: brightness(.3) sepia(1); } }

/* ---------- setup ---------- */
#setup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; text-align: center; }
#setup h1 { font-size: clamp(22px, 4.4vh, 44px); text-shadow: 0 3px 0 var(--deep); }
.pickRow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pick { font-family: Texturina, serif; font-weight: 900; font-size: clamp(17px, 3vh, 24px); min-width: 70px; min-height: 48px; padding: 6px 14px;
  background: var(--deep); color: var(--parch); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--taupe); }
.pick.on { background: var(--parch); color: var(--ink); box-shadow: inset 0 0 0 4px var(--fire); }
#setup .btn.big { font-size: clamp(22px, 4vh, 30px); padding: 10px 30px; }
#setup nav { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 1vh; }

/* ---------- table ---------- */
#game { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "rivals" "square" "msg" "net" "bar"; }
#rivals { grid-area: rivals; display: flex; gap: 6px; min-height: 46px; }
.rival { flex: 1 1 0; min-width: 0; background: var(--deep); border-radius: 6px; padding: 4px 6px; text-align: left;
  box-shadow: inset 0 0 0 2px #0000; display: flex; flex-direction: column; gap: 2px; }
.rival.turn { box-shadow: inset 0 0 0 3px var(--fire); }
.rival.out { opacity: .5; }
.rival .nm { font-family: Texturina, serif; font-weight: 900; font-size: 15px; white-space: nowrap; display: flex; justify-content: space-between; gap: 4px; }
.rival .mini { display: none; }
.rival { height: 64px; overflow: hidden; }
.rival .cnt2 { display: none; }
.rival.out .cnt2 { display: inline; }
.rival .stock { font-size: 12px; gap: 1px 5px; }
.stock { display: flex; gap: 5px; align-items: center; font-weight: 800; font-size: 14px; flex-wrap: wrap; }
.stock i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.tok { width: 1.15em; height: 1.15em; border-radius: 50%; vertical-align: middle; }

#square { grid-area: square; display: flex; gap: calc(var(--m) * .08); justify-content: center; align-items: flex-end;
  background: #0003; border-radius: 8px; padding: 6px 4px; }
#square .grp { display: flex; gap: calc(var(--m) * .08); align-items: flex-end; }
#square .lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .85; height: 14px; white-space: nowrap; overflow: hidden; }
#square .sep { width: 2px; align-self: stretch; background: var(--taupe); opacity: .5; margin: 0 2px; }
.col { display: flex; flex-direction: column; gap: 2px; }

.card { position: relative; width: var(--s); height: var(--s); flex: 0 0 auto; border-radius: calc(var(--s) * .04); display: block;
  background: var(--deep) center / cover; box-shadow: 0 2px 5px #0007; }
.card img.face { width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }
.card.empty { background: #0002; box-shadow: inset 0 0 0 2px #fff2; }
.card .val { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--parch);
  font-family: Texturina, serif; font-weight: 900; font-size: calc(var(--s) * .3); line-height: 1; padding: 2px 5px 4px;
  border-radius: 0 0 50% 50% / 0 0 40% 40%; min-width: 46%; text-align: center; box-shadow: 0 0 0 1.5px var(--taupe); }
.card .cnt { position: absolute; inset: 0; display: grid; place-items: center; font-family: Texturina, serif; font-weight: 900;
  font-size: calc(var(--s) * .36); color: var(--parch); text-shadow: 0 2px 0 var(--deep), 0 0 8px var(--deep); }
.card.can { box-shadow: 0 0 0 3px var(--fire), 0 0 16px var(--flame); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--parch), 0 0 22px var(--flame); } }
.card.in { animation: drop .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes drop { from { transform: translateY(-40%) scale(1.5) rotate(-8deg); opacity: 0; } }
.fires { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: var(--m); height: var(--m); }
.fires .f { border-radius: 3px; background: #0004 center / 240% no-repeat; background-position: 86% 62%; box-shadow: inset 0 0 0 1px #fff2;
  display: grid; place-items: center; font-family: Texturina, serif; font-weight: 900; font-size: calc(var(--m) * .2); color: #fff5; }
.fires .f.lit { box-shadow: 0 0 8px var(--fire); color: transparent; }

#msg { grid-area: msg; display: flex; gap: 8px; align-items: center; height: 58px; background: var(--parch); color: var(--ink);
  border-radius: 6px; padding: 4px 10px; box-shadow: inset 0 0 0 2px var(--taupe); }
#hand { --s: 50px; width: 50px; height: 50px; flex: 0 0 auto; }
#hand:empty { display: none; }
#say { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.15; flex: 1; }
#say.shake { animation: shake .3s; color: #b3001b; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

#net { grid-area: net; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; min-height: 0; }
.row { display: flex; align-items: center; min-height: var(--s); --s: var(--c); }
.row .card + .card { margin-left: 0; }
.row .seam { position: relative; width: 0; z-index: 3; }
.row .seam img { position: absolute; width: calc(var(--s) * .34); left: calc(var(--s) * -.17); top: calc(var(--s) * -.17);
  border-radius: 50%; box-shadow: 0 0 0 2px var(--parch), 0 0 10px var(--gold); animation: drop .5s cubic-bezier(.2, 1.6, .4, 1); }
.slot { width: var(--s); height: var(--s); flex: 0 0 auto; border-radius: calc(var(--s) * .04); margin-left: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; font-size: calc(var(--s) * .17);
  border: 2px dashed #fff4; color: #fff7; line-height: 1.05; text-align: center; }
.slot.ok { border: 3px solid var(--fire); color: var(--parch); background: #ff5a2433; animation: pulse 1.1s ease-in-out infinite; }
.slot .gain { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; font-size: calc(var(--s) * .2); }
.slot .plus { font-family: Texturina, serif; font-size: calc(var(--s) * .3); line-height: .8; }

#bar { grid-area: bar; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 56px;
  background: var(--deep); border-radius: 6px; padding: 5px 8px; }
#bar .stock { font-size: 19px; gap: 9px; }
#bar .acts { display: flex; gap: 8px; }
#bar .btn { font-size: 16px; padding: 8px 12px; min-width: 98px; }
#bar .me { font-family: Texturina, serif; font-weight: 900; }
#bar .me { display: flex; align-items: center; gap: 10px; }
@media (max-width: 520px) {
  #bar { flex-direction: column; align-items: stretch; gap: 6px; }
  #bar .me { justify-content: center; } #bar .who { display: none; }
  #bar .acts .btn { flex: 1; min-width: 0; min-height: 44px; }
  #say { font-size: 14px; }
}
kbd { font: inherit; font-size: .7em; opacity: .7; margin-left: 6px; display: none; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 10; background: #20000ccc; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 10px; }
.sheet { background: var(--parch); color: var(--ink); border-radius: 8px; padding: 16px; width: min(560px, 100%); max-height: 100%; overflow: hidden;
  box-shadow: 0 0 0 4px var(--taupe), 0 20px 60px #000; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  animation: drop .3s cubic-bezier(.2, 1.3, .4, 1); }
.sheet h1 { font-size: clamp(22px, 4.2vh, 30px); line-height: 1; }
.sheet .acts .btn { font-size: 17px; padding: 10px 16px; }
.sheet p { margin: 0; font-size: 17px; line-height: 1.3; }
.sheet .bigcard { width: min(64vw, 34vh, 380px); flex: 0 0 auto; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 6px 20px #0006; }
.sheet .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sheet .btn .tok { width: 1.1em; height: 1.1em; }
.sheet.fire { background: var(--deep); color: var(--parch); box-shadow: 0 0 0 4px var(--fire), 0 0 80px var(--fire); }
.sheet table { border-collapse: collapse; width: 100%; font-size: 17px; }
.sheet td, .sheet th { padding: 5px 6px; border-bottom: 1px solid #0002; text-align: left; }
.sheet.fire td { border-color: #fff2; }
.sheet td.n { text-align: right; font-weight: 800; }
.sheet tr.win td { background: #ff5a2433; font-weight: 800; }
.sheet .rules, .sheet .small, .sheet .net, .sheet table { flex: 0 1 auto; min-height: 0; overflow: auto; }
.sheet > h1, .sheet > .acts, .sheet > .btn, .sheet > p { flex: 0 0 auto; }
.sheet .rules { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.sheet .rules b { font-family: Texturina, serif; }
.sheet .small { font-size: 13px; text-align: left; line-height: 1.35; }
.payrow { display: flex; gap: 14px; justify-content: center; }
.payrow button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 18px; padding: 6px; border-radius: 6px; min-width: 60px; }
.payrow button .tok { width: 44px; height: 44px; }
.payrow button.sel { background: #ff5a2444; box-shadow: inset 0 0 0 3px var(--fire); }
.sheet .net { width: 100%; overflow: auto; display: flex; flex-direction: column; gap: 4px; --c: 64px; }

/* ---------- desktop: rivals get a column with their networks ---------- */
@media (min-width: 1000px) and (min-height: 600px) {
  #game { grid-template-columns: minmax(0, 1fr) 30vw; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "square rivals" "msg rivals" "net rivals" "bar rivals"; gap: 8px; padding: 12px; }
  #rivals { flex-direction: column; overflow: auto; }
  .rival { flex: 0 0 auto; padding: 8px 10px; height: auto; }
  .rival .cnt2 { display: inline; } .rival .stock { font-size: 17px; gap: 8px; }
  .rival .nm { font-size: 20px; }
  .rival .mini { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
  .rival .mini .row { --s: var(--r); min-height: var(--r); }
  #say { font-size: 19px; }
  #msg { height: 76px; } #hand { --s: 66px; width: 66px; height: 66px; }
  #bar .btn { font-size: 20px; padding: 10px 18px; }
  #bar .stock { font-size: 24px; gap: 14px; }
  kbd { display: inline; }
}