/* End of a deal and end of a match: a full-height sheet over the table. */
.overlay.full{align-items:stretch}
.overlay.full .sheet{width:min(480px,100%);max-height:none;height:100%;padding:0;gap:0;border:0;border-radius:0;background:var(--bg);overflow:auto}

.res{flex:1;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);color:var(--text)}
.res-top{flex:none;display:flex;flex-direction:column}
.res-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:20px 20px 14px}
.res .res-h h2{font-size:var(--head-size);color:var(--text)}
.res-h small{font-size:13px;color:var(--muted);text-align:right}
.res-cards{display:flex;justify-content:center;gap:6px;padding:0 20px 14px}
.res-sc{display:flex}
.res-side{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px;box-sizing:border-box}
.rs-n{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-p{font-family:var(--f-display);font-weight:var(--w-display);font-size:72px;line-height:1.05;font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.rs-u{font-size:14px;font-weight:600}
.res-out{display:flex;align-items:center;gap:16px;padding:16px 20px}
.ro-n{flex:none;font-family:var(--f-display);font-weight:var(--w-display);font-size:44px;line-height:1.1;font-feature-settings:"lnum" 1}
.ro-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.ro-t strong{font-size:18px;font-weight:700;line-height:1.3}
.ro-t small{font-size:13px;line-height:1.4}
.res-body{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:16px;padding:16px 20px}
.res-scale{display:flex;gap:6px}
.res-scale div{flex:1;min-width:0;height:58px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl)}
.res-scale b{font-family:var(--f-display);font-weight:var(--w-head);font-size:17px;line-height:20px;font-feature-settings:"lnum" 1}
.res-scale span{font-size:12px;line-height:14px;color:var(--muted);white-space:nowrap}
.res-scale .on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.res-scale .on span{color:inherit}
.res-pen{display:flex;flex-direction:column;gap:8px}
.res-pen .pips i.new{outline:2px solid var(--text);outline-offset:1px}
.res-notes{display:flex;flex-direction:column;gap:6px}
.res-notes p,.res-next{margin:0;font-size:14px;line-height:1.45}
.res-notes p{font-weight:600}
.res-next{color:var(--muted)}
.res-foot{flex:none;display:flex;flex-direction:column;gap:12px;padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));background:var(--bg)}
/* the end of a match: the coins and the two buttons stay in view on a screen too short for the whole sheet — the rest scrolls under them */
.res.over .res-foot{position:sticky;bottom:0;z-index:1;padding-top:12px;border-top:1px solid var(--line)}
.res-wait{position:relative;overflow:hidden;min-height:56px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 16px;background:var(--surface);border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);font-weight:700;font-size:15px}
.res-wait i{position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--accent);transform-origin:left center;animation:tdrain 7s linear both}
.res-coins{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-weight:var(--w-display);font-size:34px;font-feature-settings:"lnum" 1}
.res-coins.pos{color:var(--good)}
.res-coins.neg{color:var(--bad)}
.res-coins small{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--muted)}
.rc-n{font-variant-numeric:tabular-nums}
/* what the match brought besides the stake: a task done, a run of wins, a reward — a line each */
.res-earn{display:flex;flex-direction:column;gap:6px}
.re-row{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:14px;line-height:1.3}
.re-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-row b{flex:none;font-family:var(--f-display);font-weight:var(--w-head);font-size:16px;font-feature-settings:"lnum" 1;color:var(--good)}
@media (max-height:700px){.res-earn{gap:3px}.re-row{font-size:13px}.re-row b{font-size:15px}.res.over .res-foot{gap:8px;padding-top:8px}.res.over .res-coins{font-size:28px}}
.res-free{margin:0;font-size:14px;line-height:1.45;text-align:center;color:var(--muted)}
.res .row2{gap:10px}
.res .row2 .ghost{min-height:54px;font-size:15px}

/* ================= Адрас: two fields of colour ================= */
[data-theme="adras"] .res-side.mine{background:#F7B92C;color:#15174A}
[data-theme="adras"] .res-side.foe{position:relative;background:#C4283F;color:#FFF4E0;padding-left:28px}
[data-theme="adras"] .res-side.foe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(135deg,#F7B92C 50%,transparent 50%) 0 0/12px 12px,linear-gradient(45deg,#F7B92C 50%,transparent 50%) 0 0/12px 12px}
[data-theme="adras"] .res-out{position:relative;background:#FFF4E0;color:#15174A;margin-bottom:10px}
[data-theme="adras"] .res-out::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:linear-gradient(135deg,#FFF4E0 50%,transparent 50%) 0 0/10px 10px,linear-gradient(225deg,#FFF4E0 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .res-out.bad .ro-n{color:#C4283F}
[data-theme="adras"] .ro-t small{color:#3A3C6E}
[data-theme="adras"] .res-wait{border:0;background:#F7B92C;color:#15174A;font-family:var(--f-display);font-weight:700}
[data-theme="adras"] .res-wait i{background:#15174A}

/* ================= Ганч: an arched niche ================= */
[data-theme="ganch"] .res-top{position:relative;z-index:0;margin:18px 20px 0;padding:76px 20px 20px;align-items:center;text-align:center}
[data-theme="ganch"] .res-top::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 372' preserveAspectRatio='none'%3E%3Cpath d='M.5 371.5V118C.5 64 96 40 175 .5 254 40 349.5 64 349.5 118V371.5Z' fill='%2316263D' stroke='%23C9A55C' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8.500 363.500V120C8.500 73 100 50 175 11 250 50 341.500 73 341.500 120V363.500Z' fill='none' stroke='%232B3F5C' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-theme="ganch"] .res-h{flex-direction:column;align-items:center;gap:2px;padding:0 0 6px}
[data-theme="ganch"] .res .res-h h2{font-size:15px;font-family:var(--f-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9A55C}
[data-theme="ganch"] .res-h small{text-align:center}
[data-theme="ganch"] .res-sc{align-self:stretch;justify-content:center;gap:36px;position:relative}
[data-theme="ganch"] .res-sc::after{content:":";position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--f-display);font-size:60px;line-height:76px;color:#3A5275}
[data-theme="ganch"] .res-side{flex:1 1 0;padding:0;align-items:center;flex-direction:column-reverse}
[data-theme="ganch"] .rs-u{display:none}
[data-theme="ganch"] .rs-n{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
[data-theme="ganch"] .rs-p{font-size:76px;line-height:76px}
[data-theme="ganch"] .res-out{flex-direction:column;gap:2px;padding:14px 0 0;margin-top:14px;border-top:1px solid #2B3F5C;align-self:stretch;text-align:center}
[data-theme="ganch"] .ro-n{font-size:34px;color:#C9A55C}
[data-theme="ganch"] .ro-t{align-items:center}
[data-theme="ganch"] .ro-t strong{font-family:var(--f-display);font-size:24px;color:#C9A55C}
[data-theme="ganch"] .ro-t small{color:var(--muted)}
[data-theme="ganch"] .res-scale{gap:0}
[data-theme="ganch"] .res-scale div{border:0;border-bottom:2px solid #2B3F5C;border-radius:0}
[data-theme="ganch"] .res-scale b{font-size:24px;line-height:28px}
[data-theme="ganch"] .res-scale .on{background:none;border-color:#C9A55C;color:#C9A55C}
[data-theme="ganch"] .res-scale .on span{color:var(--text)}
[data-theme="ganch"] .res-wait{background:#C9A55C;border:0;color:#0F1B2D;font-family:var(--f-display);font-size:18px;letter-spacing:.06em}
[data-theme="ganch"] .res-wait i{background:#0F1B2D;height:3px}

/* ================= Топчан: a receipt with a stamp ================= */
[data-theme="topchan"] .res::before{content:"";flex:none;height:12px;border-bottom:2px solid #27211C;background:repeating-linear-gradient(90deg,#AE3F1A 0 14px,#F5ECDC 14px 17px,#E3A72F 17px 25px,#F5ECDC 25px 28px,#1C6B63 28px 42px,#27211C 42px 44px,#F5ECDC 44px 47px)}
[data-theme="topchan"] .res-top{margin:0 25px 0 20px}
[data-theme="topchan"] .res-h{padding:16px 0 12px}
[data-theme="topchan"] .res-sc{flex-direction:column;padding:10px 16px 0;background:#FFFBF2;border:2px solid #27211C;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:5px 5px 0 #27211C}
[data-theme="topchan"] .res-cards{order:-1}
[data-theme="topchan"] .res-side{flex-direction:row;align-items:baseline;gap:8px;padding:0}
[data-theme="topchan"] .rs-n{font-size:16px;letter-spacing:0;text-transform:none}
[data-theme="topchan"] .res-side::after{content:"";order:1;flex:1;border-bottom:2px dotted #A99C85}
[data-theme="topchan"] .rs-p{order:2;font-size:46px;line-height:50px}
[data-theme="topchan"] .rs-u{display:none}
[data-theme="topchan"] .res-out{padding:14px 16px 16px;background:#FFFBF2;border:2px solid #27211C;border-top:0;border-radius:0 0 14px 14px;box-shadow:5px 5px 0 #27211C;position:relative}
[data-theme="topchan"] .res-out::before{content:"";position:absolute;left:16px;right:16px;top:0;border-top:2px dashed #27211C}
[data-theme="topchan"] .ro-n{width:84px;height:84px;box-sizing:border-box;display:grid;place-items:center;border:3px solid #AE3F1A;border-radius:50%;box-shadow:inset 0 0 0 3px #FFFBF2,inset 0 0 0 4.5px #AE3F1A;color:#AE3F1A;font-size:30px;transform:rotate(-9deg)}
[data-theme="topchan"] .res-out.good .ro-n{border-color:#1C6B63;box-shadow:inset 0 0 0 3px #FFFBF2,inset 0 0 0 4.5px #1C6B63;color:#1C6B63}
[data-theme="topchan"] .ro-t small{color:var(--muted)}
[data-theme="topchan"] .res-scale div{background:#FFFBF2;border-radius:10px}
[data-theme="topchan"] .res-scale .on{background:#E3A72F;border-color:#27211C;color:#27211C}
[data-theme="topchan"] .res-pen .pips i.new{outline:0;height:22px}
[data-theme="topchan"] .res-foot{padding:12px 24px calc(22px + env(safe-area-inset-bottom,0px)) 20px;border-top:2px solid #27211C;background:#EADFC9}
[data-theme="topchan"] .res-wait{background:#FFFBF2;box-shadow:3px 3px 0 #27211C}
[data-theme="topchan"] .res-wait i{background:#AE3F1A}
[data-theme="ganch"] .res .row2 .primary{font-size:17px;letter-spacing:.06em}

/* ================= the summary shows itself in the order it is read =================
   The heading, the points of each side (they count up), the verdict stamped down, the scale, the penalty marks set
   one by one (app.js: revealResult), then what comes next. Only transform and opacity move. */
.res.show .res-h{animation:r-up .3s .04s both}
.res.show .res-cards{animation:r-up .3s .1s both}
.res.show .res-side.mine{animation:r-left .34s .14s both}
.res.show .res-side.foe{animation:r-right .34s .22s both}
.res.show .res-out{animation:r-up .3s .8s both}
.res.show .ro-n{animation:r-stamp .38s .92s both}
.res.show .res-scale{animation:r-up .3s 1.05s both}
.res.show .res-pen{animation:r-up .3s 1.15s both}
.res.show .res-notes,.res.show .res-next{animation:r-up .3s 1.5s both}
.res.show .res-foot{animation:r-up .3s 1.62s both}
.res.show .re-row,.re-row.new{animation:r-up .3s both}   /* each line of the earnings a moment after the one before (delays are set by revealResult) */
.res .re-row.new{animation-delay:0s!important}
.res .re-row.kept{animation:none!important}
.res-pen .pips i.pop{animation:r-pip .26s both}
@keyframes r-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes r-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes r-right{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes r-stamp{from{opacity:0;transform:scale(1.7)}55%{opacity:1;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes r-pip{from{transform:scale(2.2)}to{transform:none}}
/* looks whose marks and verdict are already turned keep their turn while they arrive */
[data-theme="adras"] .res-pen .pips i.pop{animation-name:r-pip-a}
@keyframes r-pip-a{from{transform:rotate(45deg) scale(2.2)}to{transform:rotate(45deg)}}
[data-theme="topchan"] .res.show .ro-n{animation-name:r-stamp-t}
@keyframes r-stamp-t{from{opacity:0;transform:rotate(-32deg) scale(1.7)}55%{opacity:1;transform:rotate(-6deg) scale(.94)}to{opacity:1;transform:rotate(-9deg)}}
[data-theme="ganch"] .res.show .res-side.mine,[data-theme="ganch"] .res.show .res-side.foe{animation-name:r-up}
@media (prefers-reduced-motion:reduce){.res.show *,.re-row.new{animation:none!important}}