/* Į sveikatą!. Benas stands at the head of the table; every player sits in a card with their own glass portrait. */
.toast-panel{--brass:#e6b95c;--go:#4fd36b;--early:#ff6a55;display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.toast-head{display:flex;align-items:center;gap:12px}
.toast-head>div:first-child{flex:1;min-width:0}
.toast-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.toast-head h1 em{color:var(--brass);font-style:italic}
.toast-track{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.toast-track li{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff10;color:#d8c39c;font:800 12px/1 system-ui;transition:background .25s,transform .25s,border-color .25s}
.toast-track li.golden{border-color:#f5d36c88;color:#ffe08a;background:radial-gradient(circle at 35% 30%,#ffe9a066,#a6761a33)}
.toast-track li.current{transform:scale(1.15);border-color:var(--brass);box-shadow:0 0 12px #e6b95c88;color:#fff}
.toast-track li.ok{background:#7cc77066;border-color:#9ad08a}
.toast-track li.first{background:#ffd34fcc;border-color:#fff1a8;color:#3a2400}
.toast-track li.early,.toast-track li.miss{background:#e8604c99;border-color:#ff9a87}

/* Benas and his speech bubble. */
.toast-stage{position:relative;container-type:inline-size;height:clamp(200px,34dvh,320px);border-radius:16px;overflow:hidden;border:1px solid #7a5530;background:
  linear-gradient(180deg,transparent 0 80%,#5a3519 80%,#7b4c25 84%,#3c220f 100%),
  radial-gradient(ellipse at 30% 30%,#3b2512,#120b06 75%);box-shadow:inset 0 0 50px #000a,0 10px 30px #0007;transition:box-shadow .2s,border-color .2s}
.toast-stage.is-golden{border-color:#f5d36c99}
.toast-benas{position:absolute;left:4%;bottom:2%;height:96%;aspect-ratio:2/3;max-width:46%;background:no-repeat 0 0/400% 400%;filter:drop-shadow(0 8px 12px #000a)}
.toast-bubble{position:absolute;left:44%;right:4%;top:10%;display:grid;gap:6px;padding:12px 16px;border-radius:18px 18px 18px 4px;background:#fff6e3;color:#2a1708;box-shadow:0 8px 24px #0009}
.toast-bubble::before{content:"";position:absolute;left:-10px;bottom:10px;border:10px solid transparent;border-right-color:#fff6e3;border-left:0}
.toast-count{font:800 11px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#8a5a1e}
.toast-bubble.golden .toast-count{color:#a87708}
.toast-line{margin:0;font:700 clamp(17px,2.6vw,24px)/1.25 Georgia,serif;text-wrap:balance;min-height:2.5em}

/* Everybody at the table. */
.toast-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.toast-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"pic name total" "pic status status";align-items:center;column-gap:8px;row-gap:2px;padding:6px 10px 6px 6px;border-radius:14px;border:2px solid transparent;background:#ffffff0c;transition:background .25s,border-color .25s}
.toast-portrait{grid-area:pic;width:56px;height:56px;border-radius:10px;background:no-repeat 0 50%/200% 100%;border:1px solid #c79f5466;transition:background-position .08s}
.toast-portrait.is-face{background-size:cover;background-position:center}
.toast-card[data-state=raised] .toast-portrait:not(.is-face){background-position:100% 50%}
.toast-card[data-state=raised] .toast-portrait{border-color:var(--go);box-shadow:0 0 12px #4fd36b88}
.toast-card[data-state=early] .toast-portrait{filter:saturate(.5) brightness(.8);animation:toast-shake .35s}
.toast-card[data-state=missed] .toast-portrait{filter:grayscale(1) brightness(.6)}
.toast-place{position:absolute;left:2px;top:2px;min-width:1.6em;padding:2px 4px;border-radius:6px;background:#140c06cc;font:800 11px/1 ui-monospace,monospace;font-style:normal;color:#d8c39c;text-align:center}
.toast-card b{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#f1dcb4}
.toast-card b em{color:var(--brass);font-style:normal;font-size:10px}
.toast-card output{grid-area:total;font:800 15px/1 ui-monospace,monospace;color:#ffe9bd;font-variant-numeric:tabular-nums}
.toast-status{grid-area:status;font:800 12px/1.2 ui-monospace,monospace;font-style:normal;color:#cdb68d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.toast-card[data-state=raised] .toast-status{color:#9be89f}
.toast-card[data-state=early] .toast-status{color:var(--early)}
.toast-card[data-state=missed] .toast-status{color:#9c8a70}
.toast-card.is-first{background:#ffd34f22}
.toast-card.is-first .toast-status{color:#ffd34f}
.toast-card.is-slowest .toast-status{color:#e0a080}
.toast-card.is-me{background:#e6b95c2e;border-color:var(--brass);box-shadow:0 0 14px #e6b95c55}
.toast-card.is-me .toast-place{color:#1b1204;background:var(--brass)}
.toast-card.is-leading b::after{content:" ★";color:var(--brass)}

/* The button. */
.toast-controls{display:grid;gap:8px}
.toast-button{min-height:76px;padding:8px 14px;border:0;border-radius:16px;display:grid;gap:2px;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;color:#2a1403;background:linear-gradient(#ffd77a,#ee9d2f);box-shadow:0 6px 0 #9a5d12,0 12px 24px #0008;transition:transform .06s,box-shadow .06s,filter .2s}
.toast-button strong{font:900 24px/1 Georgia,serif;letter-spacing:.05em}
.toast-button small{font:600 12px/1.2 system-ui;color:#5b3a12}
.toast-button:active{transform:translateY(4px);box-shadow:0 2px 0 #9a5d12}
.toast-button.is-early{background:linear-gradient(#ffb3a5,#d8493a);box-shadow:0 3px 0 #7a2015;color:#3a0a04}
.toast-button.is-early small{color:#4a1008}
.toast-button.is-raised{background:linear-gradient(#d8f5d0,#9bd48f);box-shadow:0 3px 0 #4a7a3e}
.toast-button[aria-disabled=true]:not(.is-early):not(.is-raised){filter:grayscale(.6) brightness(.7);box-shadow:0 3px 0 #5b3a12}
.toast-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.toast-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}

@keyframes toast-shake{0%,100%{transform:none}25%{transform:translateX(-4px) rotate(-3deg)}75%{transform:translateX(4px) rotate(3deg)}}
@media(min-width:900px){
  .toast-panel{grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"pause pause" "head head" "stage controls" "stage table";align-items:start;column-gap:18px}
  .toast-panel>.toast-pause{grid-area:pause}
  .toast-panel>.toast-head{grid-area:head}
  .toast-panel>.toast-stage{grid-area:stage;height:clamp(300px,52dvh,440px)}
  .toast-panel>.toast-table{grid-area:table;grid-template-columns:1fr 1fr}
  .toast-panel>.toast-controls{grid-area:controls}
  .toast-button{min-height:96px}
}
@media(max-width:560px){.toast-track li{width:24px;height:24px}.toast-bubble{left:40%}.toast-table{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.toast-card[data-state=early] .toast-portrait{animation:none}.toast-button,.toast-portrait{transition:none}}

/* Practice page against bots (/?toast-preview). */
.toast-practice{display:grid;gap:14px;max-width:760px;margin:0 auto}
.toast-practice.is-playing{max-width:1100px}
.toast-practice-setup{display:grid;gap:12px;padding:18px;border:1px solid #7a5530;border-radius:16px;background:#1b110acc}
.toast-practice-setup h1{margin:0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,serif}
.toast-practice-setup h1 em{color:#e6b95c;font-style:italic}
.toast-practice-setup p{margin:0;color:#d9c093}
.toast-practice-setup .toast-options{display:flex;flex-wrap:wrap;gap:10px}
.toast-practice-setup label{display:grid;gap:4px;font:600 12px/1.2 system-ui;color:#e9d3a8}
.toast-practice-setup select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid #7a5530;background:#120b06;color:#ffe9bd;font:600 14px system-ui}
.toast-practice-actions{display:flex;flex-wrap:wrap;gap:8px}
.toast-practice-note{margin:0;color:#a58a63;font-size:12px;text-align:center}
.toast-practice-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.toast-practice-results li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#ffffff0c;color:#f1dcb4}
.toast-practice-results li img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.toast-practice-results li.loser{background:#8c2b2038;border:1px solid #d8493a55}
.toast-practice-results li em{font-style:normal;font-weight:800;color:#a8e59a}
.toast-practice-results li.loser em{color:#ff8e7c}
.toast-practice-pause{display:flex;justify-content:flex-end}
@media (orientation:landscape) and (max-height:650px) and (max-width:1400px){
  body.toast-practice-page.game-screen .toast-practice{gap:0}
  body.toast-practice-page.game-screen .toast-practice-note{display:none}
  body.toast-practice-page.game-screen .toast-panel{padding:6px 64px 4px max(14px,env(safe-area-inset-left));border:0;border-radius:0;margin:0}
  body.toast-practice-page.game-screen .toast-practice-pause{position:fixed;z-index:44;right:max(8px,env(safe-area-inset-right));top:8px}
  body.toast-practice-page.game-screen .toast-practice-pause .button{width:48px;min-width:0;min-height:44px;padding:0;font-size:0}
  body.toast-practice-page.game-screen .toast-practice-pause .button::before{content:"Ⅱ";font-size:18px}
  body.toast-practice-page.game-screen .toast-practice-pause .button.is-paused::before{content:"▶"}
}