:root{
  --tbg:#1E5A3A; --tsize:100% 100%,160px 160px;
  --timg:var(--felt-img);
  --felt-img:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.07),rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  --bk-bg:#1F3F7A; --bk-bd:#142A55; --bk-line:#FBF7EE; --bk-size:10px 10px;
  --bk-img:var(--atlas-img);
  --atlas-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0Q7 3 10 5Q7 7 5 10Q3 7 0 5Q3 3 5 0Z' fill='none' stroke='%23FBF7EE' stroke-width='.55' opacity='.8'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%23C99A2E'/%3E%3Ccircle cx='0' cy='0' r='.8' fill='%23FBF7EE' opacity='.7'/%3E%3Ccircle cx='10' cy='0' r='.8' fill='%23FBF7EE' opacity='.7'/%3E%3Ccircle cx='0' cy='10' r='.8' fill='%23FBF7EE' opacity='.7'/%3E%3Ccircle cx='10' cy='10' r='.8' fill='%23FBF7EE' opacity='.7'/%3E%3C/svg%3E");
  --sH:#C1272D; --sD:#C1272D; --sS:#1C1C1C; --sC:#1C1C1C; --ix:.2; --band:none;
  --cloth:#1E5A3A; --cloth2:#246B45; --face:#FBF7EE; --hair:#D9CFBD; --red:#C1272D; --black:#1C1C1C;
  --ochre:#C99A2E; --paper:#F4F1E6; --grid:#B9CBE0; --margin:#D98C8C; --ink:#2A3F9E;
  --shadow:0 2px 6px rgba(0,0,0,.35);
  --cw:70px; --ch:101px; --peek:84px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background-color:var(--tbg);-webkit-tap-highlight-color:transparent}
body{font-family:'PT Sans',sans-serif;color:rgba(251,247,238,.8);
  background-color:var(--tbg);background-image:var(--timg);background-size:var(--tsize);background-attachment:fixed;
}
#app{position:fixed;inset:0;display:block}
body.wide #app{display:flex;justify-content:center;align-items:stretch;gap:0;padding:0}
body.wide #table{flex:none;width:var(--colw,600px);border-left:1px solid rgba(251,247,238,.08);border-right:1px solid rgba(251,247,238,.08)}
body.wide #notebook{flex:none;width:var(--nbw,360px)}
body.wide #app>*{min-height:0;min-width:0}
#table{position:relative;overflow:hidden;height:100%;user-select:none;-webkit-user-select:none}
body.wide #table{height:100%}
#title{position:absolute;left:10px;top:5px;margin:0;font:700 26px/1.1 'PT Serif',serif;color:var(--face);letter-spacing:.5px;z-index:2}
body:not(.wide) #title{font-size:21px}
body.short #title{font-size:18px}

/* banner: current contract */
#banner{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:1;pointer-events:none}
#banner .b-ru{font:700 calc(var(--cw)*.17 + 5px)/1.1 'PT Serif',serif;color:var(--face)}
#banner .b-en{font:400 11px/1.25 'PT Sans',sans-serif;color:rgba(251,247,238,.8);margin-top:2px}
#banner.side{left:10px;transform:none;text-align:left}

/* seats */
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
.seat .fan{position:relative;height:calc(var(--ch)*.5);width:calc(var(--cw)*1.6)}
.seat .fan .back{position:absolute;left:50%;top:0;width:calc(var(--cw)*.5);height:calc(var(--ch)*.5);border-radius:4px;transform-origin:50% 120%}
.plate{position:relative;font:700 13px/1.15 'PT Serif',serif;color:var(--face);padding:0 3px 4px;white-space:nowrap}
.plate svg{position:absolute;left:-4px;right:-4px;bottom:-2px;width:calc(100% + 8px);height:10px;overflow:visible}
.plate svg{clip-path:inset(0 100% 0 0);transition:clip-path 250ms ease-out}
.plate svg path{fill:none;stroke:#F2D27A;stroke-width:2.2;stroke-linecap:round}
.seat.active .plate svg{clip-path:inset(0 0 0 0)}
.meta{display:flex;align-items:center;gap:6px;font:400 11px/1 'PT Sans',sans-serif;color:rgba(251,247,238,.8);white-space:nowrap}
.stack{position:relative;display:flex;align-items:center;gap:5px}
.stack .pile{position:relative;width:13px;height:18px}
.stack .pile i{position:absolute;inset:0;border-radius:3px}
.stack .pile.empty{border:1px dashed rgba(251,247,238,.35);border-radius:3px}
.seat.opp.compact .meta{flex-direction:column;gap:3px}
#seat2.compact .meta{flex-direction:row;gap:8px}
.me{flex-direction:row;gap:8px;align-items:flex-end}

/* cards */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:6px;background:var(--face);border:1px solid var(--hair);box-shadow:var(--shadow);transform-origin:50% 50%;will-change:transform}
.card.s-H{color:var(--sH)} .card.s-D{color:var(--sD)} .card.s-S{color:var(--sS)} .card.s-C{color:var(--sC)}
.card .idx{position:absolute;display:flex;flex-direction:column;align-items:center;width:calc(var(--cw)*var(--ix)*.95);font:700 calc(var(--cw)*var(--ix))/1 'PT Serif',serif;letter-spacing:-.06em}
.card .idx svg{width:calc(var(--cw)*var(--ix)*.7);height:calc(var(--cw)*var(--ix)*.7);margin-top:1px}
.card .tl{left:calc(var(--cw)*.015);top:calc(var(--cw)*.04)}
.card .br{right:calc(var(--cw)*.015);bottom:calc(var(--cw)*.04);transform:rotate(180deg)}
.card .face{position:absolute;inset:0;width:100%;height:100%}
.card svg{display:block}
.back{background-color:var(--bk-bg);background-image:var(--bk-img);background-size:var(--bk-size);background-position:center;box-shadow:var(--shadow);border:1px solid var(--bk-bd)}
.back::after{content:"";position:absolute;inset:3px;border:1px solid var(--bk-line);border-radius:inherit}
/* hand */
#hand{position:absolute;left:0;right:0;bottom:0;z-index:3}
#hand .card{transition:transform 200ms ease-out,translate 120ms ease-out,opacity 120ms;cursor:default}
#hand.myturn .card.ok{cursor:pointer}
#hand.myturn .card.ok:hover{translate:0 -10px}
#hand.myturn .card.no{opacity:.55;translate:0 4px}
#hand .card:focus-visible{outline:2px solid #F2D27A;outline-offset:2px}
#turn{position:absolute;left:50%;transform:translateX(-50%);font:700 11px/1 'PT Sans',sans-serif;color:rgba(251,247,238,.8);opacity:0;transition:opacity 150ms;white-space:nowrap;z-index:3;pointer-events:none}
#turn.on{opacity:1}
#layer{position:absolute;inset:0;pointer-events:none;z-index:4}
#layer .card{pointer-events:none}
#arrow{position:absolute;left:0;top:0;width:44px;height:18px;margin:-9px 0 0 -22px;opacity:0;transition:opacity 150ms;z-index:3;pointer-events:none}
#arrow.on{opacity:.9}
#arrow svg{width:100%;height:100%;overflow:visible}
#arrow path{fill:none;stroke:#FBF7EE;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#midmsg{position:absolute;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:5;display:none;max-width:92%}
#midmsg.on{display:block}
#midmsg .sum{font:400 12px/1.35 'PT Sans',sans-serif;color:rgba(251,247,238,.85);margin-bottom:10px}
#midmsg .sum b{font:700 13px 'PT Serif',serif;color:var(--face)}

/* paper buttons */
.pbtn{font:600 17px/1.1 'Caveat',cursive;color:var(--ink);background:var(--paper);border:1.5px solid transparent;padding:4px 10px 5px;border-radius:2px;box-shadow:var(--shadow);cursor:pointer;position:relative}
.pbtn:active,.pbtn:focus-visible{outline:none;border-color:var(--ink);border-radius:3px 9px 4px 8px / 8px 3px 9px 4px}
.pbtn[hidden]{display:none}

/* notebook */
#notebook{position:fixed;left:0;right:0;bottom:0;height:min(88%,720px);z-index:10;transform:translateY(calc(100% + 12px));transition:transform 420ms cubic-bezier(.4,0,.6,1),visibility 0s linear 420ms;touch-action:none;visibility:hidden}
#notebook.open,#notebook.drag{visibility:visible}
#notebook.open{transition:transform 600ms cubic-bezier(.33,1,.68,1),visibility 0s}
body.wide #notebook{visibility:visible}
#sheetClose{position:absolute;right:10px;top:12px;font-size:14px;padding:2px 8px 3px;z-index:2}
body.wide .scoreBtn{display:none}
#notebook.open{transform:translateY(0)}
#notebook.drag{transition:none}
body.wide #notebook{position:relative;height:100%;transform:none;padding:8px 8px 8px 4px;touch-action:auto}
#peek{position:relative;height:var(--peek);background:var(--paper);border-radius:10px 10px 0 0;box-shadow:var(--shadow);padding:8px 14px 0 40px;cursor:grab;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20M0 20H20' stroke='%23B9CBE0' stroke-width='1'/%3E%3C/svg%3E")}
#peek::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1.5px;background:var(--margin)}
body.wide #peek{display:none}
.grip{position:absolute;left:50%;top:6px;width:44px;height:4px;border-radius:2px;background:#B9CBE0;transform:translateX(-50%)}
.peek-row{display:flex;align-items:center;gap:8px;margin-top:6px;font:400 15px 'Caveat',cursive;color:var(--ink)}
.pk-lbl{font-size:14px;opacity:.75}
.circ{position:relative;display:inline-block;padding:0 8px;font:700 19px/1.2 'Caveat',cursive;color:var(--ink)}
.circ svg{position:absolute;left:-4px;top:-5px;width:calc(100% + 8px);height:calc(100% + 10px);overflow:visible;pointer-events:none}
.circ svg path{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round}
.pk-tot{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;border-top:3px double var(--red);font:700 17px/1.15 'Caveat',cursive;color:var(--ink);padding-top:2px}
.pk-tot span{text-align:center;white-space:nowrap}
.pk-tot small{font-weight:400;font-size:13px;opacity:.8;margin-right:4px}
#paper{position:relative;height:calc(100% - var(--peek));overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:10px 14px 30px 44px;color:var(--ink);font-family:'Caveat',cursive;touch-action:pan-y;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20M0 20H20' stroke='%23B9CBE0' stroke-width='1'/%3E%3C/svg%3E");background-attachment:local}
#paper::before{content:"";position:absolute;left:30px;top:0;width:1.5px;height:max(100%,var(--ph,100%));background:var(--margin)}
body.wide #paper{height:100%;transform:rotate(.5deg);box-shadow:var(--shadow);border-radius:2px;padding:8px 10px 20px 40px}
body.wide #paper::before{left:28px}
.pagehead{font:700 20px/1 'Caveat',cursive;margin:2px 0 6px}
.pagehead span{font-weight:400;font-size:14px;opacity:.75;white-space:nowrap}
#clist{list-style:none;margin:0 0 8px;padding:0;position:relative}
#clist li{position:relative;padding:2px 6px 3px;margin:0 0 1px;line-height:1}
#clist .ru{position:relative;display:inline-block;font:700 17px/1.05 'Caveat',cursive}
#clist .en{display:block;font:400 12px/1.1 'Caveat',cursive;opacity:.72;margin-top:1px}
#clist .num{display:inline-block;width:14px;font:400 14px 'Caveat',cursive;opacity:.7}
#clist .ru svg{position:absolute;left:-3px;right:-3px;top:50%;width:calc(100% + 6px);height:12px;margin-top:-5px;overflow:visible}
#clist .ru svg{clip-path:inset(0 100% 0 0)}
#clist .ru svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
#clist li.done .ru svg{clip-path:inset(0 0 0 0)}
#clist li.done{opacity:.8}
#ring{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;transition:transform 400ms ease-in-out,width 400ms,height 400ms}
#ring path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
#score{border-collapse:collapse;width:100%;font-family:'Caveat',cursive;table-layout:fixed}
#score th,#score td{border:1px solid rgba(42,63,158,.45);padding:2px 3px;text-align:center;font-size:17px;line-height:1.05;height:21px;overflow:hidden;white-space:nowrap}
#score th{font-weight:700;font-size:15px}
#score th:first-child,#score td:first-child{text-align:left;font-size:13px;width:28%;opacity:.85}
#score tfoot td{border-top:4px double var(--red);font-weight:700;font-size:19px}
#score tfoot td:first-child{color:var(--red);opacity:1}
#score tr.cur td:first-child{color:var(--red)}
.writing{animation:write 400ms ease-out both}
@keyframes write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
#result{font:400 17px/1.25 'Caveat',cursive;margin:10px 0 4px;min-height:4px}
#result .circ{font-size:20px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.howto{font:400 14px/1.2 'Caveat',cursive;opacity:.9}
.howto p{margin:4px 0}
.howto .en{opacity:.75}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
/* the next-deal button stays in reach while the sheet is up on a phone */
body:not(.wide) .btns:has(#nextBtn:not([hidden])){position:sticky;bottom:-30px;margin:12px -14px -30px -44px;padding:10px 14px 16px 44px;background:linear-gradient(rgba(244,241,230,0),var(--paper) 30%);z-index:3}
/* rules */
#topBtns{position:absolute;right:8px;top:6px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#topBtns .pbtn{font-size:14px;padding:2px 7px 3px}
body.wide #topBtns{flex-direction:row}
body.short #topBtns,body.rowbtns #topBtns{flex-direction:row}
body.rowbtns:not(.wide) #title{font-size:20px;top:6px}
body.rowbtns:not(.wide) #topBtns{top:6px;right:8px;gap:5px}
body.rowbtns:not(.wide) #topBtns .pbtn{font-size:14px;padding:2px 7px 3px}
.howto .pbtn{margin-top:6px;font-size:15px}
#rules,#style{position:fixed;inset:0;z-index:50;background:rgba(10,14,20,.55);display:flex;align-items:center;justify-content:center;padding:14px}
#rules[hidden],#style[hidden]{display:none}
#style{background:rgba(10,14,20,.22)}
#rules .sheet,#style .sheet{position:relative;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);border-radius:2px;transform:rotate(-.4deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0V20M0 20H20' stroke='%23B9CBE0' stroke-width='1'/%3E%3C/svg%3E")}
#rules .sheet::before,#style .sheet::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1.5px;background:var(--margin);pointer-events:none}
.rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 12px 6px 44px}
.rhead h2{margin:2px 0 0;font:700 27px/1.05 'Caveat',cursive;color:var(--ink)}
.rhead .pbtn{flex:none;font-size:19px;padding:4px 11px 5px}
#rulesBody{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 20px 44px;font:400 20px/1.25 'Caveat',cursive;background:inherit;background-attachment:local}
#rulesBody h3{font:700 23px/1.1 'Caveat',cursive;color:var(--red);margin:14px 0 4px}
#rulesBody p{margin:4px 0}
#rulesBody ul,#rulesBody ol{margin:4px 0;padding-left:18px}
#rulesBody ol{padding-left:0;list-style:none}
#rulesBody li{margin:0 0 5px}
#rulesBody .en{font-size:17px;opacity:.72}
#rulesBody b{font-weight:700}

/* ---------- deck styles ---------- */
.deck-atlas{--bk-img:var(--atlas-img);--bk-size:10px 10px;--bk-bg:#1F3F7A;--bk-bd:#142A55;--bk-line:#FBF7EE;--sD:#C1272D;--sC:#1C1C1C;--ix:.2;--band:none}
.deck-modern{--bk-bg:#C1272D;--bk-bd:#8E1B20;--bk-line:#FBF7EE;--bk-size:9px 9px;--sD:#C1272D;--sC:#1C1C1C;--ix:.27;--band:none;
  --bk-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 5L5 0L10 5L5 10Z' fill='none' stroke='%23FBF7EE' stroke-width='.7' opacity='.85'/%3E%3C/svg%3E")}
.deck-four{--bk-bg:#2A2B30;--bk-bd:#15161A;--bk-line:#C99A2E;--bk-size:12px 12px;--sD:#1F5FB0;--sC:#1E7A3A;--ix:.22;--band:none;
  --bk-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 0L12 12M12 0L0 12' stroke='%23C99A2E' stroke-width='.5' opacity='.55'/%3E%3Ccircle cx='6' cy='6' r='1.3' fill='%23C99A2E'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%23FBF7EE' opacity='.6'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23FBF7EE' opacity='.6'/%3E%3Ccircle cx='12' cy='0' r='1' fill='%23FBF7EE' opacity='.6'/%3E%3Ccircle cx='0' cy='12' r='1' fill='%23FBF7EE' opacity='.6'/%3E%3C/svg%3E")}
.deck-folk{--bk-bg:#FBF7EE;--bk-bd:#D9CFBD;--bk-line:#C1272D;--bk-size:14px 14px;--sD:#C1272D;--sC:#1C1C1C;--ix:.2;--band:block;
  --bk-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' stroke-width='1' stroke-linecap='round'%3E%3Cg stroke='%23C1272D'%3E%3Cpath d='M6 1l2 2M8 1L6 3M1 6l2 2M3 6L1 8M11 6l2 2M13 6l-2 2M6 11l2 2M8 11l-2 2'/%3E%3C/g%3E%3Cpath d='M6 6l2 2M8 6L6 8' stroke='%231C1C1C'/%3E%3C/svg%3E")}
.card:not(.back)::before,.card:not(.back)::after{content:"";display:var(--band);position:absolute;left:32%;right:32%;height:5px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' stroke='%23C1272D' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M1.5 1l3 3M4.5 1l-3 3'/%3E%3C/svg%3E") repeat-x center/auto 100%}
.card:not(.back)::before{top:2px}
.card:not(.back)::after{bottom:2px}

/* ---------- table styles ---------- */
.tbl-felt{--tbg:#1E5A3A;--timg:var(--felt-img);--tsize:100% 100%,160px 160px}
.tbl-linen{--tbg:#243B55;--tsize:9px 9px,160px 160px;
  --timg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 0L9 9M9 0L0 9' stroke='%232E4A6B' stroke-width='.8'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
.tbl-wood{--tbg:#5A3923;--tsize:420px 96px;
  --timg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='96' fill='none'%3E%3Cpath d='M0 1H420M0 49H420' stroke='%23321F12' stroke-width='2.4'/%3E%3Cg stroke='%234A2E1B' stroke-width='1.3'%3E%3Cpath d='M0 12C80 9 150 16 230 12S360 8 420 12M0 22C90 26 170 18 260 23S380 25 420 22M0 36C70 33 160 40 240 35S370 33 420 36M0 60C100 57 190 64 280 59S390 58 420 60M0 72C60 75 150 68 230 73S350 76 420 72M0 86C90 83 200 90 300 85S400 84 420 86'/%3E%3C/g%3E%3Cg stroke='%236E4A31' stroke-width='1'%3E%3Cpath d='M0 17C100 15 200 20 300 17S400 15 420 17M0 41C80 44 180 38 280 42S390 43 420 41M0 66C90 64 210 69 310 66S400 64 420 66M0 79C110 81 200 76 300 80S400 81 420 79'/%3E%3C/g%3E%3Cellipse cx='318' cy='29' rx='9' ry='3.5' stroke='%23321F12' stroke-width='1.2'/%3E%3Cellipse cx='318' cy='29' rx='4' ry='1.5' stroke='%23321F12'/%3E%3Cpath d='M140 49V96M350 1V49' stroke='%23321F12' stroke-width='2'/%3E%3C/svg%3E")}
.tbl-oil{--tbg:#6A2A30;--tsize:34px 34px;
  --timg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Crect width='17' height='34' fill='%23FBF7EE' opacity='.075'/%3E%3Crect width='34' height='17' fill='%23FBF7EE' opacity='.075'/%3E%3Cpath d='M0 8.5H34M0 25.5H34M8.5 0V34M25.5 0V34' stroke='%23FBF7EE' stroke-width='.6' opacity='.07'/%3E%3C/svg%3E")}

/* ---------- style chooser ---------- */
.rhead h2 span{font-weight:400;font-size:18px;opacity:.75;white-space:nowrap}
.sbody{overflow-y:auto;overscroll-behavior:contain;padding:0 14px 16px 44px;font:400 19px/1.2 'Caveat',cursive}
.sbody h3{font:700 23px/1.1 'Caveat',cursive;color:var(--red);margin:8px 0 6px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.opt{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:6px;background:transparent;border:2px solid transparent;border-radius:4px;cursor:pointer;color:var(--ink);text-align:left;font:inherit}
.opt[aria-pressed="true"]{border-color:var(--ink);border-radius:3px 10px 4px 9px / 9px 3px 10px 4px}
.opt .lbl b{display:block;font:700 21px/1.05 'Caveat',cursive}
.opt .lbl small{display:block;font:400 15px/1.1 'Caveat',cursive;opacity:.75}
.opt[aria-pressed="true"] .lbl b::after{content:" ✓";color:var(--red)}
.mini{--cw:36px;--ch:52px;position:relative;display:flex;align-items:center;justify-content:center;height:72px;padding:0 8px;border-radius:3px;background:#1E5A3A}
.opts .mini:not(.swatch){background-color:var(--tbg);background-image:var(--timg);background-size:var(--tsize)}
.mini .card{position:relative;flex:none;margin-right:-13px;box-shadow:var(--shadow)}
.mini .card:nth-child(1){transform:rotate(-6deg)}
.mini .card:nth-child(3){transform:rotate(5deg)}
.mini i.back{position:relative;flex:none;width:var(--cw);height:var(--ch);border-radius:5px;margin-left:4px;transform:rotate(8deg)}
.mini.swatch{background-color:var(--tbg);background-image:var(--timg);background-size:var(--tsize);justify-content:center;gap:10px}
.mini.swatch i.back{transform:rotate(-7deg);margin:0}
.mini.swatch .card{transform:rotate(5deg);margin:0}
.note{margin:12px 0 0;opacity:.85}
.note .en{font-size:16px;opacity:.75}
#midmsg .choice{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#midmsg .suitbtn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:8px 10px 6px}
#midmsg .suitbtn svg{width:30px;height:30px}
#midmsg .suitbtn.red{color:#C1272D}
#midmsg .suitbtn.black{color:#1C1C1C}
#midmsg .suitbtn span{color:var(--ink);font-size:15px}
body:not(.wide) #topBtns .gl{display:none}
.card .cov{position:absolute;inset:-1px;border-radius:inherit;box-shadow:none;z-index:3;pointer-events:none}