/* ---------- real gameplay: the in-game clips, with the board that picks them right under the screen (#gameplay) ---------- */
#gameplay [data-tone="silver"]{--tone:#d9e2ec}
#gameplay [data-tone="gold"]{--tone:#f5c04a}
#gameplay [data-tone="fire"]{--tone:#ff7a36}
#gameplay [data-tone="sapphire"]{--tone:#66b3ff}

.section--gameplay{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(72px,8vw,120px)}
.gp-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.gp-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.6}
.gp-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 52% 40% at 50% 47%,rgba(13,10,11,.72),rgba(13,10,11,.2) 70%,transparent 85%),
  linear-gradient(180deg,var(--bg) 0%,rgba(13,10,11,.5) 12%,rgba(13,10,11,.15) 38%,rgba(13,10,11,.45) 74%,var(--bg) 100%)}
/* embers drifting up across the arena */
.gp-embers{position:absolute;inset:0;z-index:1;opacity:.75;background-image:
  radial-gradient(2px 2px at 8% 30%,#ffb35c,transparent),radial-gradient(2px 2px at 22% 70%,#ff7a36,transparent),
  radial-gradient(1.5px 1.5px at 37% 45%,#ffd28a,transparent),radial-gradient(2px 2px at 54% 85%,#ff8a3d,transparent),
  radial-gradient(1.5px 1.5px at 66% 20%,#ffc070,transparent),radial-gradient(2px 2px at 79% 60%,#ff7a36,transparent),
  radial-gradient(1.5px 1.5px at 91% 40%,#ffd28a,transparent);
  background-size:100% 50%;animation:gpEmbers 14s linear infinite}
@keyframes gpEmbers{from{background-position:0 0}to{background-position:0 -100%}}

/* ---------- one piece: the screen and its caption on top, the board right under it ----------
   The theater's data-tone is the clip on screen: the screen's glow, the caption's edge and the shaft of light
   down to the board all take its colour, and so does the picked tile. --gap is the room between the screen's
   gold rim and the board (the shaft crosses it), --rim the rim's width. */
.gp-theater{--gap:clamp(20px,2.2vw,28px);--rim:9px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,880px) minmax(0,1fr);grid-template-areas:"bl screen br" "cl board cr";column-gap:clamp(8px,2vw,28px);row-gap:var(--gap);margin-top:clamp(4px,1.5vw,16px)}
.gp-brazier{width:min(100%,120px);height:auto;align-self:end;margin-bottom:8%;animation:gpFlicker 2.6s ease-in-out infinite}
.gp-brazier--l{grid-area:bl;justify-self:end}
.gp-brazier--r{grid-area:br;justify-self:start;transform:scaleX(-1);animation-delay:-1.3s}
@keyframes gpFlicker{0%,100%{filter:drop-shadow(0 0 22px rgba(255,120,40,.35)) brightness(1)}35%{filter:drop-shadow(0 0 40px rgba(255,150,60,.65)) brightness(1.14)}65%{filter:drop-shadow(0 0 28px rgba(255,110,40,.45)) brightness(.95)}}
.gp-screen{grid-area:screen;position:relative;margin:0;border-radius:8px;background:#120c0d;transition:box-shadow .6s;
  box-shadow:0 0 0 2px #1f0f06,0 0 0 5px #c8902e,0 0 0 7px #5a3410,0 0 0 var(--rim) rgba(245,192,74,.4),0 40px 90px -30px #000,0 0 110px -10px color-mix(in srgb,var(--tone) 55%,transparent)}
.gp-screen::before{content:"";position:absolute;left:50%;top:-22px;z-index:3;width:44px;height:38px;margin-left:-22px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:radial-gradient(circle at 50% 45%,#fff2c4 0 12%,var(--gold) 30%,#a9661a 70%,#5a3410);box-shadow:0 0 18px rgba(255,170,60,.8);pointer-events:none}
.gp-frame{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:8px 8px 0 0;background:#120c0d}
.gp-frame>img,.gp-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gp-fx{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 62%,rgba(255,244,220,.95),color-mix(in srgb,var(--tone) 70%,transparent) 32%,rgba(179,32,42,.35) 55%,transparent 75%)}
.gp-fx i{position:absolute;left:50%;top:58%;width:7px;height:7px;margin:-3px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--tone) 55%,transparent 72%);opacity:0}
.gp-fx i:nth-child(1){--a:0deg;--d:-46%}.gp-fx i:nth-child(2){--a:30deg;--d:-38%}.gp-fx i:nth-child(3){--a:60deg;--d:-52%}
.gp-fx i:nth-child(4){--a:90deg;--d:-40%}.gp-fx i:nth-child(5){--a:120deg;--d:-48%}.gp-fx i:nth-child(6){--a:150deg;--d:-36%}
.gp-fx i:nth-child(7){--a:180deg;--d:-44%}.gp-fx i:nth-child(8){--a:210deg;--d:-50%}.gp-fx i:nth-child(9){--a:240deg;--d:-38%}
.gp-fx i:nth-child(10){--a:270deg;--d:-46%}.gp-fx i:nth-child(11){--a:300deg;--d:-40%}.gp-fx i:nth-child(12){--a:330deg;--d:-52%}
.gp-frame.is-out .gp-fx{animation:gpFxIn .26s ease-in forwards}
.gp-frame.is-out>video,.gp-frame.is-out>img{animation:gpEmberOut .26s ease-in forwards}
.gp-frame.is-in .gp-fx{opacity:1;animation:gpFxOut .56s ease-out forwards}
.gp-frame.is-in .gp-fx i{animation:gpSpark .6s ease-out forwards}
.gp-frame.is-in>video,.gp-frame.is-in>img{animation:gpEmberIn .56s ease-out}
@keyframes gpFxIn{from{opacity:0}to{opacity:1}}
@keyframes gpFxOut{from{opacity:1}to{opacity:0}}
@keyframes gpSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * 9)) scale(.4)}}
@keyframes gpEmberOut{to{filter:brightness(2.2) saturate(1.3) blur(2px);transform:scale(1.03)}}
@keyframes gpEmberIn{0%{filter:brightness(2);transform:scale(1.04)}25%{transform:translateX(-5px)}45%{transform:translateX(4px)}65%{transform:translateX(-2px)}100%{filter:none;transform:none}}
.gp-toggle{position:absolute;right:14px;bottom:14px;z-index:5;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line2);border-radius:50%;background:rgba(13,10,11,.74);color:var(--cream);cursor:pointer;transition:border-color .25s}
.gp-toggle:hover{border-color:var(--gold)}
.gp-toggle svg{width:15px;height:15px}
.gp-toggle .i-play,.gp-toggle[aria-pressed="true"] .i-pause{display:none}
.gp-toggle[aria-pressed="true"] .i-play{display:block}
html:not(.js) .gp-toggle{display:none}

/* what is on screen, on a strip along the screen's lower edge; its name wears the same chip as the picked tile's label */
.gp-says{display:grid;border-top:2px solid color-mix(in srgb,var(--tone) 70%,#5a3410);border-radius:0 0 8px 8px;background:linear-gradient(180deg,#1d1314,#120c0d);transition:border-color .6s}
.gp-say{grid-area:1/1;align-self:center;margin:0;padding:12px clamp(16px,3vw,36px) 13px;text-align:center;text-wrap:pretty;font-size:calc(15px * var(--fs, 1));line-height:1.55;color:var(--muted);visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.gp-say.is-on{visibility:visible;opacity:1;transition:opacity .35s}
.gp-say b{display:inline-block;margin-right:.75em;padding:.3em .85em .26em;border-radius:999px;background:var(--tone);font:700 calc(13px * var(--fs, 1))/1.1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:#1a0f05;vertical-align:.1em}
html:not(.js) .gp-say:not(.is-on){display:none}

/* ---------- the board: pick a tile or roll the die ---------- */
.gp-board{grid-area:board;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:clamp(10px,1.6vw,20px)}
/* a shaft of the clip's colour, from the screen's rim down behind the tile it came from (the script sets --bx, --by, --bw) */
.gp-beam{position:absolute;z-index:-1;left:var(--bx,0);top:calc(var(--rim) - var(--gap));width:var(--bw,0);height:calc(var(--gap) - var(--rim) + var(--by,0px));transform:translateX(-50%);pointer-events:none;transition:left .5s var(--ease),opacity .4s}
.gp-beam::before{content:"";position:absolute;z-index:1;left:50%;top:0;width:20px;height:11px;margin-left:-10px;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--tone)}
.gp-beam::after{content:"";position:absolute;inset:0;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 80%,transparent),color-mix(in srgb,var(--tone) 30%,transparent) 60%,transparent)}
.gp-board.is-moving .gp-beam{opacity:0}
html:not(.js) .gp-beam{display:none}
.gp-note{position:relative;max-width:1040px;margin:clamp(18px,2.4vw,30px) auto 0;text-align:center}

.gp-causeway{position:relative;container-type:inline-size;margin-bottom:3.6%}
.gp-slab{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(255,90,30,.18))}
/* the hint hangs from the causeway's front, under the tile labels (the causeway's margin-bottom makes room for its tail) */
.gp-banner{position:absolute;z-index:3;left:0;right:0;top:62%;width:46%;margin-inline:auto;transform-origin:50% 0;pointer-events:none;animation:gpSway 4.5s ease-in-out infinite}
.gp-banner img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.gp-banner span{position:absolute;inset:6% 17% 16%;display:grid;place-items:center;text-align:center;text-wrap:balance;font:700 calc(max(11px,2cqw) * var(--fs, 1))/1.1 var(--serif);letter-spacing:.05em;text-transform:uppercase;color:#3b1b06;text-shadow:0 1px 0 rgba(255,240,200,.55)}
@keyframes gpSway{50%{transform:rotate(-1deg) translateY(2px)}}
/* the tiles lie flat on the causeway's top, like the board they come from */
.gp-track{--flat:perspective(520px) rotateX(52deg);position:absolute;left:5.5%;right:5.5%;bottom:49%;display:flex;justify-content:space-between;align-items:flex-end}
.gp-tile{position:relative;width:12.2cqw;padding:0;border:0;background:none;color:inherit;font:inherit;filter:drop-shadow(0 6px 5px rgba(0,0,0,.7));transition:transform .25s var(--ease)}
button.gp-tile{cursor:pointer}
.gp-hex{display:block;width:100%;aspect-ratio:1;clip-path:polygon(26% 8%,74% 8%,97% 50%,74% 92%,26% 92%,3% 50%);overflow:hidden;transform:var(--flat);transform-origin:50% 100%}
.gp-hex img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
button.gp-tile:hover{transform:translateY(-4px)}
button.gp-tile:not([aria-pressed="true"]) .gp-hex{animation:gpInvite 2.6s ease-in-out infinite}
button.gp-tile:nth-of-type(3) .gp-hex{animation-delay:-.65s}
button.gp-tile:nth-of-type(5) .gp-hex{animation-delay:-1.3s}
button.gp-tile:nth-of-type(7) .gp-hex{animation-delay:-1.95s}
@keyframes gpInvite{50%{filter:brightness(1.35) saturate(1.2)}}
.gp-tile-label{position:absolute;top:calc(100% + 1.2cqw);left:50%;transform:translateX(-50%);padding:.35cqw .9cqw;border-radius:999px;background:rgba(13,10,11,.72);white-space:nowrap;font:700 max(calc(9px * var(--fs, 1)),1.6cqw)/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tone);text-shadow:0 1px 0 #000}
.gp-tile[aria-pressed="true"]{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tone) 90%,transparent)) drop-shadow(0 6px 5px rgba(0,0,0,.7))}
.gp-tile[aria-pressed="true"] .gp-tile-label{background:var(--tone);color:#1a0f05;text-shadow:none}
.gp-tile.is-step .gp-hex{animation:gpStep .3s ease-out}
.gp-tile.is-landed .gp-hex{animation:gpLand .7s ease-out}
@keyframes gpStep{40%{transform:var(--flat) translateY(3px) scale(.97)}}
@keyframes gpLand{0%{filter:brightness(2.6)}30%{transform:var(--flat) translateY(4px) scale(.94)}100%{filter:none;transform:var(--flat)}}
.gp-pawn{position:absolute;left:0;bottom:2.4cqw;z-index:2;width:11.4cqw;height:auto;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 10px 6px rgba(0,0,0,.55))}
.gp-pawn.is-idle{animation:gpIdle 1.8s ease-in-out infinite}
@keyframes gpIdle{50%{translate:0 -3px}}
.gp-confetti{position:absolute;inset:0;z-index:3;pointer-events:none}
.gp-confetti i{position:absolute;width:7px;height:11px;border-radius:2px;background:var(--c);opacity:0;animation:gpConfetti 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes gpConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.gp-pop{position:absolute;z-index:4;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--tone);color:#1a0f05;font:800 max(calc(11px * var(--fs, 1)),1.7cqw)/1.2 var(--serif);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.5);pointer-events:none;animation:gpPop 1.2s ease-out forwards}
@keyframes gpPop{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}70%{opacity:1;transform:translate(-50%,-18px)}100%{opacity:0;transform:translate(-50%,-30px)}}

/* the die rests on its altar, at the board's right end */
.gp-dice{display:grid;justify-items:center;gap:8px;width:clamp(104px,10vw,136px);padding-top:clamp(10px,1.4vw,18px)}
.gp-altar{position:relative;width:100%}
.gp-altar img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.gp-die{position:absolute;left:50%;top:-4%;--size:clamp(40px,4.2vw,56px);--half:calc(var(--size) / 2);width:var(--size);height:var(--size);margin-left:calc(var(--size) / -2);perspective:600px}
.gp-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.16,.86,.3,1.04)}
.gp-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:16%;backface-visibility:hidden;background:linear-gradient(145deg,#fffaf0,#e6d6bd);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset -5px -7px 12px rgba(0,0,0,.14),inset 4px 5px 8px rgba(255,255,255,.7)}
.gp-pips{display:grid;grid-template-columns:repeat(3,1fr);gap:9%;width:70%;height:70%}
.gp-pips .pip{border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a463e,#120a08 70%)}
.gp-die.is-rolling{animation:gpDieHop .95s ease-out}
@keyframes gpDieHop{0%{transform:none}22%{transform:translateY(-44px)}50%{transform:none}64%{transform:translateY(-12px)}78%,100%{transform:none}}
.gp-roll{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 30px;border:0;background:none;color:#2a1405;white-space:nowrap;font:800 calc(14px * var(--fs, 1))/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:filter .3s,transform .3s var(--ease);animation:gpCall 2.4s ease-in-out infinite}
.gp-roll::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);background:linear-gradient(180deg,#ffe9a6 0%,#f5c04a 45%,#d8901f 100%)}
.gp-roll:hover{filter:drop-shadow(0 0 16px rgba(255,160,60,.6)) brightness(1.06);transform:translateY(-1px)}
@keyframes gpCall{50%{filter:drop-shadow(0 0 14px rgba(255,160,60,.55))}}
.gp-board.is-moving button.gp-tile,.gp-board.is-moving .gp-roll{pointer-events:none}

/* the crowd cheers from both ends of the board */
.gp-crowd{display:flex;align-items:flex-end;align-self:start;padding-top:clamp(28px,3.4vw,48px)}
.gp-crowd--l{grid-area:cl;justify-content:flex-end}
.gp-crowd--r{grid-area:cr;justify-content:flex-start}
.gp-crowd img{width:min(50%,62px);height:auto;margin:0 -5px;transform-origin:50% 100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6));animation:gpBob 2.4s ease-in-out infinite}
.gp-crowd img:nth-child(2){animation-delay:-1.2s}
.gp-crowd--r img:nth-child(1){animation-delay:-.6s}
.gp-crowd--r img:nth-child(2){animation-delay:-1.8s}
@keyframes gpBob{50%{transform:translateY(-6px) rotate(-3deg)}}
.gp-theater.is-cheer .gp-crowd img{animation:gpCheer .55s ease-out 2}
@keyframes gpCheer{35%{transform:translateY(-24px) scale(1.06) rotate(4deg)}70%{transform:translateY(0) scale(.97)}}

/* letter-spacing that suits Latin capitals spreads CJK too thin and breaks Thai apart */
html:is(:lang(ja),:lang(ko),:lang(zh)) :is(.gp-roll,.gp-banner span,.gp-tile-label,.gp-say b){letter-spacing:.06em}
html:lang(th) :is(.gp-roll,.gp-banner span,.gp-tile-label,.gp-say b){letter-spacing:0}

/* the crowd needs the room beside the screen; without it they step out */
@media (max-width:1180px){
  .gp-crowd{display:none}
}
@media (max-width:760px){
  .gp-theater{--gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"screen" "board"}
  .gp-brazier{display:none}
  .gp-say{padding:10px 14px 11px;text-align:left;font-size:calc(14px * var(--fs, 1))}
  .gp-say b{margin-right:.6em;font-size:calc(12px * var(--fs, 1))}
  .gp-toggle{right:10px;bottom:10px;width:38px;height:38px}
  .gp-beam::before{width:16px;height:9px;margin-left:-8px}
  .gp-board{grid-template-columns:minmax(0,1fr)}
  .gp-causeway{margin-bottom:10%}
  .gp-banner{top:60%;width:66%}
  .gp-dice{grid-template-columns:auto auto;align-items:center;justify-content:center;width:auto;gap:14px;margin-top:4px;padding-top:0}
  .gp-altar{width:64px}
  /* the crowd stands at the board's lower corners, either side of the die */
  .gp-crowd{display:flex;grid-area:board;align-self:end;padding-top:0}
  .gp-crowd--l{justify-self:start}
  .gp-crowd--r{justify-self:end}
  .gp-crowd img{width:42px}
}