/* The Yakuza · loaded after ../straits-deal/style.css (page chrome, buttons, seats, hand tray, dialogs) and
   ../big-two/style.css (card faces, the table with a seat on each side, the phone layout). This file adds what is this
   game's own: its palette, the chips, the cards on the table, the vault and alarm counters and the showdown. */
body[data-skin="irezumi"]{--table-art:url('./skins/irezumi/art/table.webp');--back-art:url('./skins/irezumi/art/back.webp');--hero-art:url('./skins/irezumi/art/hero.webp');
 --bg:#0a0f1c;--panel:#111a2c;--panel-2:#18233a;--panel-3:#22304e;--line:#2c3c5e;--line-2:#526a96;--text:#f5eedc;--muted:#cfc6ad;--faint:#9a927d;--lime:#e9b949;--lime-ink:#241a02;--cyan:#8fc1d8;--coral:#d8483a;--gold:#e9b949;
 --paper:#f3e9d2;--suit-red:#c23a2c;--suit-black:#1c2740;--card-edge:#cdbf9e;--glow:#24427a}
.yk-page{--pw:clamp(64px,11vh,104px)}

/* Chips: a disc with its number, and as many pips round the rim as the number, in the colour of its round. */
.yk-chip{--chip:#f4efe2;--chip-ink:#1c2740;position:relative;flex:none;display:grid;place-items:center;width:var(--cw,44px);height:var(--cw,44px);min-height:0;padding:0;border-radius:50%;border:3px dashed color-mix(in srgb,var(--chip-ink) 55%,transparent);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--chip) 80%,#fff),var(--chip) 60%,color-mix(in srgb,var(--chip) 78%,#000));color:var(--chip-ink);font:850 calc(var(--cw,44px)*.48)/1 var(--font);box-shadow:0 3px 0 color-mix(in srgb,var(--chip) 55%,#000),0 6px 10px #0008;transition:transform .12s var(--ease),box-shadow .12s}
.yk-chip[data-colour="yellow"]{--chip:#f1c93d}.yk-chip[data-colour="orange"]{--chip:#ef8a2e}.yk-chip[data-colour="red"]{--chip:#d8483a;--chip-ink:#fff7ea}
button.yk-chip:hover:not(:disabled){background:radial-gradient(circle at 35% 30%,#fff,var(--chip) 70%);transform:translateY(-3px)}
button.yk-chip:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--chip) 55%,#000)}
button.yk-chip:disabled{opacity:1;cursor:default}
.yk-chip.empty{background:none;border:2px dashed color-mix(in srgb,var(--text) 26%,transparent);box-shadow:none;color:transparent}
.yk-chip.empty.now{border-color:var(--lime);animation:yk-wait 1.1s ease-in-out infinite alternate}
.yk-chip.mine{outline:3px solid var(--lime);outline-offset:2px}
.yk-chip.old{opacity:.72}
.yk-chip.fresh{animation:yk-pop .35s var(--ease)}
@keyframes yk-pop{from{transform:scale(.3) rotate(-40deg);opacity:0}}
@keyframes yk-wait{to{border-color:color-mix(in srgb,var(--lime) 30%,transparent)}}
.yk-chips{display:flex;gap:6px;align-items:center;--cw:30px}
.yk-chips .yk-chip{border-width:2px;box-shadow:0 2px 0 color-mix(in srgb,var(--chip) 55%,#000)}
.b2-seat .yk-chips{margin-top:2px}
.yk-pool{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:54px;--cw:50px}
.yk-pool:empty{display:none}
.yk-pool p{font:500 13px var(--font);color:var(--muted)}

/* The table: vaults and alarms, then the five cards. */
.yk-score{display:flex;gap:18px;align-items:center;justify-content:center}
.yk-tally{display:flex;gap:6px;align-items:center;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.yk-tally i{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);background:var(--panel-3) center/cover;opacity:.45;transition:opacity .3s,transform .3s}
.yk-tally i.on{opacity:1;transform:scale(1.08);border-color:var(--gold)}
.yk-tally.vaults i.on{background-image:url('./skins/irezumi/art/vault.webp')}
.yk-tally.alarms i.on{background-image:url('./skins/irezumi/art/alarm.webp');border-color:var(--coral)}
.yk-board{display:flex;justify-content:center;gap:8px;min-height:calc(var(--pw)*1.44)}
.yk-board .sd-card{--w:var(--pw);flex:none;box-shadow:0 6px 16px #000a}
.yk-board .sd-card.fresh{animation:yk-deal .45s var(--ease) backwards}
.yk-board .sd-card.used{box-shadow:0 0 0 3px var(--lime),0 6px 16px #000a}
.yk-slot{flex:none;width:var(--pw);height:calc(var(--pw)*1.44);border-radius:calc(var(--pw)*.09);border:2px dashed color-mix(in srgb,var(--text) 20%,transparent)}
@keyframes yk-deal{from{transform:translateY(-40px) rotate(-8deg);opacity:0}}
.yk-page .b2-stage{gap:10px}
.yk-page .b2-now{width:min(100%,600px)}
.yk-holding{font:650 14px var(--font);color:var(--text)}
.yk-holding b{color:var(--lime)}
/* Seats show a crew member's four chips, and at the showdown their cards. */
.yk-page .b2-seat.is-happy{border-color:color-mix(in srgb,var(--lime) 60%,transparent)}
.yk-page .b2-seat.is-wrong{border-color:var(--coral);outline:2px solid var(--coral)}
.yk-shown{display:flex;gap:4px;align-items:center;margin-top:6px}
.yk-shown .sd-card{--w:40px;box-shadow:0 2px 5px #0008}
.yk-shown span{font:600 12px/1.2 var(--font);color:var(--text)}
/* The showdown: hands turned over one at a time, in the order of the red chips. */
.yk-showdown{display:grid;gap:5px;width:100%;margin:2px 0;padding:0;list-style:none;text-align:left}
.yk-showdown li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 8px;border-radius:10px;background:color-mix(in srgb,var(--bg) 60%,transparent);animation:yk-turn .5s var(--ease) backwards;animation-delay:calc(var(--i)*1.1s);--cw:30px}
.yk-showdown li.wrong{background:color-mix(in srgb,var(--coral) 30%,var(--bg))}
.yk-showdown .yk-cards{display:flex;gap:3px}
.yk-showdown .sd-card{--w:30px;box-shadow:none}
.yk-showdown .sd-card .b2-mid,.yk-shown .sd-card .b2-mid,.yk-showdown .b2-corner.flip,.yk-shown .b2-corner.flip{display:none}
.yk-showdown .b2-corner,.yk-shown .b2-corner{position:static;height:100%;align-content:center;min-width:0;width:100%}
.yk-showdown .b2-corner b,.yk-shown .b2-corner b{font-size:calc(var(--w)*.42)}.yk-showdown .b2-corner i,.yk-shown .b2-corner i{font-size:calc(var(--w)*.36)}
.yk-showdown strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yk-showdown em{font:normal 600 13px var(--font);color:var(--muted);text-align:right}
.yk-showdown li.wrong em{color:#fff}
.yk-verdict{font:800 20px/1.2 var(--font);animation:yk-turn .6s var(--ease) backwards;animation-delay:calc(var(--i)*1.1s)}
.yk-verdict.good{color:var(--lime)}.yk-verdict.bad{color:var(--coral)}
@keyframes yk-turn{from{opacity:0;transform:translateY(8px) scale(.96)}}
/* The two pocket cards are held, not played: no fan, no picking. */
.yk-page .sd-hand-card,.yk-page .sd-hand-card:hover,.yk-page .sd-hand-card:focus-visible{margin-left:6px;transform:rotate(var(--rot,0deg));cursor:default}
.yk-page .sd-hand-card:first-child{margin-left:0}
@media (max-height:900px) and (min-width:641px){.yk-page{--pw:clamp(54px,10vh,84px)}.yk-pool{--cw:44px;min-height:46px}.yk-tally i{width:24px;height:24px}}
@media (max-width:640px){
 .yk-page{--pw:clamp(44px,13vw,60px);--hw:84px}
 .yk-board{gap:4px}
 .yk-pool{--cw:46px;gap:8px}
 .yk-chips{--cw:22px;gap:3px;justify-content:center;flex-wrap:wrap}
 .yk-chips .yk-chip{font-size:11px;border-width:1.5px}
 .b2-side .yk-chips{max-width:60px}
 .yk-score{gap:10px}.yk-tally i{width:22px;height:22px}.yk-tally span{display:none}
 /* At the showdown the list of hands needs the whole width: the side seats step back. */
 body.yk-showing .b2-side{display:none}
 .yk-page .sd-hand-card,.yk-page .sd-hand-card:hover{margin-left:6px;transform:none}
 .yk-page .sd-hand-card:first-child{margin-left:auto}
 .yk-showdown li{grid-template-columns:auto auto minmax(0,1fr);gap:6px}
 .yk-showdown em{grid-column:1/-1;text-align:left}
}
@media (prefers-reduced-motion:reduce){.yk-showdown li,.yk-verdict{animation:none}}
/* Two cards are the whole hand, so they are shown in full. */
@media (min-width:641px){
 .yk-page{--hand-peek:calc(var(--hw)*1.44 + 30px)}
 .yk-page .sd-hand,.yk-page .sd-hand-tray:hover .sd-hand{transform:translateY(4%)}
}
/* Table talk: five set lines, shown as a bubble over whoever said one. */
.yk-talk{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:2px}
.yk-talk button.ghost{min-height:30px;padding:.15rem .6rem;font-size:12.5px;border-radius:999px}
.yk-say{position:absolute;z-index:8;left:50%;top:-14px;transform:translateX(-50%);padding:3px 12px;border-radius:999px;background:var(--paper);color:#1c2740;font:700 13px/1.3 var(--font);white-space:nowrap;box-shadow:0 4px 10px #0009;pointer-events:none}
.yk-say.fresh{animation:yk-pop .3s var(--ease)}
.yk-page .b2-seat{position:relative}
/* The middle of the table never slides under the seats above and below it; on a short window the table scrolls. */
.yk-page .b2-main{overflow-y:auto;scrollbar-width:none}
.yk-page .b2-centre{flex:1 0 auto}
.yk-page .b2-top{padding-top:18px}