@font-face { font-family: "SG"; src: url(/fonts/space-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "SG"; src: url(/fonts/space-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap }

/* One colour: a saturated teal field; dark surfaces are deep shades of it; cards are cream paper. */
:root {
  --field: #0b9a8d;
  --field2: #14b3a3;
  --deep: #06695f;
  --deeper: #03433d;
  --night: #022824;
  --cream: #fff7e8;
  --paper: #fffaf0;
  --ink: #0d2b28;
  --hot: #ffd84a;
  --good: #3ddc84;
  --bad: #ff5a4e;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--cream); font-family: "SG", system-ui, sans-serif; font-weight: 500 }
body { -webkit-tap-highlight-color: transparent; background: radial-gradient(120% 90% at 50% 0%, var(--field2), var(--field) 55%, var(--deep)) fixed }
button { font: inherit; color: inherit }
[hidden] { display: none !important }

/* ---- the wordmark: = drawn as two bars, then EQUALS ---------------------------------------------- */
.mark { display: inline-flex; align-items: center; margin: 0; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--cream); text-shadow: 0.04em 0.05em 0 var(--deeper) }
.mark .eqsign { margin-right: 0.28em }
.eqsign { position: relative; display: inline-block; width: 0.82em; height: 0.62em; flex: none }
.eqsign::before, .eqsign::after { content: ""; position: absolute; left: 0; right: 0; height: 0.2em; border-radius: 0.1em; background: var(--hot); box-shadow: 0.04em 0.05em 0 var(--deeper) }
.eqsign::before { top: 0 }
.eqsign::after { bottom: 0 }

/* ---- shared pieces ------------------------------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; background: var(--c, #fff); color: var(--ink); border-radius: 999px; padding: 0.22em 0.75em 0.22em 0.3em; font-weight: 700; white-space: nowrap; box-shadow: 0 0.12em 0 rgba(0,0,0,.25) }
.chip .shape { width: 1.25em; height: 1.25em; padding: 0.15em; background: rgba(255,255,255,.6); border-radius: 50%; margin-right: 0.35em; flex: none }
.chip.big { font-size: 1.5em }
.netmark { position: fixed; right: 12px; bottom: 12px; background: var(--night); color: var(--cream); padding: 6px 12px; border-radius: 999px; font-size: 14px; opacity: .85; z-index: 50 }
@keyframes pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rise { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes shake { 0%,100% { transform: none } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
.shake { animation: shake .3s }

/* ---- the card (TV and the landing demo) --------------------------------------------------------- */
.card { position: relative; perspective: 1400px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); z-index: 1 }
.card .cin { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4,1.3,.5,1) }
.card .back, .card .face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6%/8%; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden }
.card .back { background: var(--deep); box-shadow: inset 0 0 0 4px rgba(255,247,232,.16), 0 8px 0 var(--night); display: flex; align-items: center; justify-content: center;
  background-image: linear-gradient(rgba(255,247,232,.07) 2px, transparent 2px), linear-gradient(90deg, rgba(255,247,232,.07) 2px, transparent 2px); background-size: 26px 26px; background-position: center }
.card .back .eqsign { font-size: 74px; opacity: .9 }
.card .back .eqsign::before, .card .back .eqsign::after { background: var(--cream); box-shadow: 0 4px 0 var(--night) }
.card .face { transform: rotateY(180deg); background: var(--paper); color: var(--ink); box-shadow: 0 8px 0 var(--night) }
.card.up .cin, .card.won .cin { transform: rotateY(180deg) }
.card.up { transform: scale(1.07); z-index: 3 }
.card.up .face { box-shadow: 0 0 0 5px var(--hot), 0 12px 0 var(--night) }
.card canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block }
.card .plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 92%; display: flex; align-items: center; justify-content: center; padding: 0.12em 0.4em; border-radius: 16px; background: rgba(255,250,240,.86); box-shadow: 0 0 0 2px rgba(13,43,40,.08); transition: background .4s }
.card.bare .plate { background: transparent; box-shadow: none }
.card.bare .math { text-shadow: 0 0 8px var(--paper), 0 0 8px var(--paper), 0 0 4px var(--paper) }
.card .math { white-space: nowrap; transform-origin: center; color: var(--ink); line-height: 1.1 }
.card .math .katex { font-size: 1em }
.card .badge { position: absolute; right: 5%; top: 6%; width: 13%; opacity: 0 }
.card .badge .shape { width: 100%; height: auto; display: block }
.card.won .badge { opacity: 1 }
.card.won .face { box-shadow: inset 0 0 0 7px var(--own), 0 8px 0 var(--night) }
.card.won .plate { background: rgba(255,250,240,.82) }
.card .callout { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%) scale(.5); opacity: 0; background: var(--c, #fff); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 0.15em 0.7em; white-space: nowrap; font-size: 22px; transition: opacity .2s, transform .3s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 3px 0 rgba(0,0,0,.25) }
.card .callout.on { opacity: 1; transform: translateX(-50%) scale(1) }
.card.focus::after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 9%/11%; box-shadow: 0 0 0 6px var(--cream), 0 0 0 11px var(--ink); pointer-events: none }
.card.pulse .face { animation: matchpulse .9s ease-out }
@keyframes matchpulse { 0% { transform: rotateY(180deg) scale(1) } 30% { transform: rotateY(180deg) scale(1.08) } 100% { transform: rotateY(180deg) scale(1) } }

/* ---- TV: one 1920x1080 stage, scaled to fit the window ------------------------------------------ */
body.tv { overflow: hidden }
.stagebox { position: fixed; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0 }
.frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; box-shadow: inset 0 0 0 14px var(--turn, transparent); transition: box-shadow .4s; z-index: 4 }
.screen { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px }

/* landing */
.landing { display: flex; align-items: center; padding: 70px 90px 70px 90px }
.landing .demo { flex: none; width: 1000px; height: 840px; position: relative; border-radius: 40px; background: var(--deeper); box-shadow: 0 14px 0 var(--night); overflow: hidden }
.landing .side { flex: 1; display: flex; flex-direction: column; align-items: center; margin-left: 80px }
.landing .mark { font-size: 120px }
.landing .joincard { margin-top: 44px; background: #fff; padding: 18px; border-radius: 30px; box-shadow: 0 12px 0 var(--deeper) }
.landing .joincard .join { display: block }
.landing .joincard .qr { display: block; width: 400px; height: 400px }
.landing .joincard .addr { display: none }
.scanline { margin: 34px 0 0; font-weight: 700; font-size: 56px }
.herebtn, .backlink { border: 0; cursor: pointer; font-weight: 700; outline: none; border-radius: 999px; text-decoration: none }
.herebtn { margin-top: 30px; font-size: 34px; padding: 0.4em 1.1em; background: var(--deeper); color: var(--cream) }
.herebtn:focus, .herebtn:hover, .backlink:focus, .backlink:hover { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 5px var(--ink), 0 0 0 10px var(--hot) }
.backlink { position: absolute; left: 36px; top: 26px; z-index: 6; color: var(--cream); background: var(--deeper); font-size: 28px; padding: 0.35em 0.9em }
.roster { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 26px; font-size: 30px; max-width: 760px }
.roster .chip { margin: 6px }
.roster .tierchip { margin-left: 0.4em; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 0 0.5em; font-size: 0.8em }

/* the screen's own setup (playing on the TV with a remote or mouse) */
.setup { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px }
.setup .mark { font-size: 96px; margin-bottom: 40px }
.setrow { display: flex; align-items: center; width: 1100px; margin: 10px 0; padding: 18px 30px; border-radius: 26px; background: var(--deep); font-size: 40px; font-weight: 700; cursor: pointer; outline: none }
.setrow .k { flex: 1 }
.setrow .v { display: flex; align-items: center }
.setrow .v b { min-width: 560px; text-align: center; font-weight: 700 }
.setrow .arrow { font-size: 0.9em; opacity: .55; padding: 0 0.5em; user-select: none }
.setrow.on, .setrow:hover { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 6px var(--hot) }
.setrow.go { justify-content: center; background: var(--hot); color: var(--ink); margin-top: 28px; font-size: 48px }
.setrow.go.on { box-shadow: 0 0 0 6px var(--cream), 0 0 0 12px var(--ink) }
.setup .hint { margin-top: 30px; font-size: 28px; opacity: .8 }
.eg { font-size: 0.7em; opacity: .7; margin-left: 0.6em; font-weight: 500 }

/* play */
.play { display: flex }
.side2 { flex: none; width: 380px; padding: 44px 0 34px 40px; display: flex; flex-direction: column }
.side2 .mark { font-size: 54px; margin-bottom: 34px }
.scores { flex: 1; display: flex; flex-direction: column }
.prow { display: flex; align-items: center; padding: 14px 18px 14px 14px; margin-bottom: 12px; border-radius: 22px; background: var(--deep); font-size: 30px; font-weight: 700; transition: transform .3s, background .3s, box-shadow .3s; position: relative }
.prow .shape { width: 44px; height: 44px; flex: none; margin-right: 14px }
.prow .pname { flex: 1; min-width: 0; overflow-wrap: break-word }
.prow .ptier { font-size: 19px; opacity: .75; display: block; font-weight: 500; line-height: 1.15 }
.prow .pairs { font-size: 46px; min-width: 1.2em; text-align: right }
.prow .bonus { font-size: 20px; margin-right: 10px; color: var(--hot); white-space: nowrap }
.prow.cur { background: var(--cream); color: var(--ink); transform: translateX(14px); box-shadow: 0 0 0 6px var(--turn) }
.prow.away { opacity: .45 }
.prow.locked .pname { text-decoration: line-through; opacity: .6 }
.prow .clock { position: absolute; left: 14px; right: 18px; bottom: 6px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden }
.prow .clock i { display: block; height: 100%; background: var(--deep); transform-origin: left }
.turnline { font-size: 30px; font-weight: 700; margin: 6px 0 18px; min-height: 1.2em }
.cornerqr .join { display: flex; align-items: center; color: var(--cream); text-decoration: none; margin-right: 10px }
.cornerqr .qr { width: 120px; height: 120px; border-radius: 10px; margin-right: 16px }
.cornerqr .addr { font-weight: 700; font-size: 17px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; word-break: break-all }
.cornerqr .addr b { display: block; font-size: 38px; letter-spacing: .08em }
.boardwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 40px 30px 30px }
.board { position: relative }
.board .card { position: absolute }

/* end */
.screen.end { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px }
.screen.end .wlabel { font-size: 54px; font-weight: 700; margin-bottom: 20px; animation: rise .5s both }
.screen.end .wins { display: flex; flex-wrap: wrap; justify-content: center; font-size: 52px }
.screen.end .wins .chip { margin: 10px; animation: pop .5s .2s cubic-bezier(.3,1.6,.5,1) both }
.table { list-style: none; padding: 0; margin: 50px 0 0; width: 1000px }
.table li { display: flex; align-items: center; font-size: 40px; font-weight: 700; padding: 14px 26px; margin-bottom: 10px; background: var(--deep); border-radius: 22px; animation: rise .4s both }
.table .rank { width: 1.6em; opacity: .7 }
.table .chip { font-size: 0.9em }
.table .sp { flex: 1 }
.table .pts { min-width: 3.4em; text-align: right }
.table .pts small { font-size: 0.55em; opacity: .7; font-weight: 500; display: block }
.table .bon { color: var(--hot); font-size: 0.65em; margin-right: 1em }
.screen.end .again { margin-top: 36px; font-size: 32px; opacity: .85 }

.leave { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(2,40,36,.75) }
.leavebox { background: var(--field); border-radius: 44px; padding: 64px 76px 76px; text-align: center; box-shadow: 0 16px 0 var(--deeper), 0 0 0 7px var(--cream); animation: pop .3s cubic-bezier(.3,1.6,.5,1) both }
.leavebox h2 { margin: 0 0 60px; font-size: 92px; font-weight: 700; line-height: 1; white-space: nowrap }
.leavebtns { display: flex; justify-content: center }
.leavebtn { flex: none; margin: 0 18px; border: 0; background: var(--night); color: var(--cream); font-weight: 700; font-size: 50px; line-height: 1; padding: 0.55em 1.2em; border-radius: 999px; cursor: pointer; outline: none }
.leavebtn:focus { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 6px var(--ink), 0 0 0 12px var(--hot) }
.soundbtn { position: absolute; right: 30px; bottom: 30px; border: 0; background: var(--hot); color: var(--ink); font-weight: 700; padding: 0.5em 1.1em; border-radius: 999px; font-size: 26px; cursor: pointer; z-index: 20 }
.rest { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(2,40,36,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 48px; font-weight: 700; z-index: 60 }

/* ?tweaks */
.tweaks { position: fixed; left: 10px; bottom: 10px; z-index: 70; font-size: 14px; color: var(--ink) }
.tweaks .tpill { border: 0; background: var(--night); color: var(--cream); border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; opacity: .8 }
.tweaks .tbody { position: relative; background: var(--cream); border-radius: 14px; padding: 12px 34px 12px 12px; margin-top: 6px; max-width: 340px; box-shadow: 0 4px 0 var(--night) }
.tweaks.folded .tbody { display: none }
.tweaks b { display: block; margin: 6px 0 4px }
.tweaks .trow { display: flex; flex-wrap: wrap }
.tweaks .tbtn { border: 0; background: #e9dfcc; border-radius: 8px; padding: 5px 9px; margin: 0 5px 5px 0; cursor: pointer; font-weight: 700 }
.tweaks .tbtn.on { background: var(--ink); color: var(--cream) }
.tweaks .tclose { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ink) }
body.phone .tweaks { position: static; margin: 20px 16px }

/* ---- phone ------------------------------------------------------------------------------------- */
body.phone { min-height: 100%; font-size: 17px }
.app { max-width: 520px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); min-height: 100vh; display: flex; flex-direction: column }
.app > * + * { margin-top: 16px }
.btn { display: block; width: 100%; border: 0; background: var(--hot); color: var(--ink); font-weight: 700; font-size: 20px; padding: 16px 18px; border-radius: 18px; cursor: pointer; box-shadow: 0 5px 0 var(--deeper); transition: transform .08s; text-align: center }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--deeper) }
.btn:disabled { opacity: .5; cursor: default }
.btn.dark { background: var(--night); color: var(--cream); box-shadow: 0 5px 0 rgba(0,0,0,.3) }
.btn.big { font-size: 24px; padding: 19px }
.panel { background: rgba(2,40,36,.32); border-radius: 22px; padding: 16px }
.panel > * + * { margin-top: 12px }
.panel h2 { margin: 0; font-size: 20px }
.note { margin: 0; opacity: .85; font-size: 15px }
.door .mark { font-size: 54px; margin-top: 18px }
.door .tagline { margin: 6px 0 0; font-size: 20px; font-weight: 700 }
.doorcards { display: flex; justify-content: center; margin: 8px 0 }
.doorcards .mini { width: 92px; height: 120px; margin: 0 5px; border-radius: 12px; background: var(--paper); position: relative; box-shadow: 0 5px 0 var(--deeper); overflow: hidden }
.doorcards .mini canvas { width: 100%; height: 100%; display: block }
.doorcards .mini:nth-child(2) { transform: translateY(-8px) }
.coderow { display: flex }
.codein, .namein { flex: 1; min-width: 0; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--cream); color: var(--ink); outline: none }
.namein { letter-spacing: 0; text-transform: none; width: 100% }
.coderow .btn { width: auto; margin-left: 10px; padding: 12px 22px }
.tvlink { color: var(--hot); font-weight: 700 }
.foot { text-align: center; font-size: 14px }
.foot a { color: var(--cream); opacity: .8 }
.small { color: var(--cream); opacity: .85; text-align: center; font-size: 15px }
.ptop { display: flex; align-items: center; justify-content: space-between }
.ptop .mark { font-size: 26px }
.ptop .chip { font-size: 15px }
.lead { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.15 }
.sub { margin: 0; opacity: .85 }
.tiers { display: flex; flex-direction: column }
.tierbtn { display: flex; align-items: baseline; text-align: left; border: 0; border-radius: 14px; padding: 11px 14px; margin-bottom: 7px; background: var(--deeper); color: var(--cream); font-weight: 700; font-size: 17px; cursor: pointer }
.tierbtn .tn { width: 1.8em; opacity: .7 }
.tierbtn .tl { flex: 1 }
.tierbtn .te { font-weight: 500; opacity: .75; font-size: 15px }
.tierbtn.on { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--hot) }
.opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between }
.opt > span { white-space: nowrap; margin-right: 10px }
.opt > span { font-weight: 700 }
.seg { display: flex; flex-wrap: wrap; justify-content: flex-end }
.seg button { border: 0; background: var(--deeper); color: var(--cream); border-radius: 10px; padding: 8px 11px; margin: 0 0 4px 5px; font-weight: 700; font-size: 15px; cursor: pointer }
.seg button.on { background: var(--cream); color: var(--ink) }
.who { display: flex; flex-wrap: wrap }
.who .chip { margin: 0 6px 6px 0; font-size: 15px }
.mirror { display: grid; grid-gap: 7px; width: 100%; margin: 4px auto 0 }
.mirror button { border: 0; padding: 0; border-radius: 10px; background: var(--deeper); box-shadow: 0 4px 0 var(--night); cursor: pointer; position: relative; height: 0; padding-bottom: 76% }
.mirror button .eqsign { position: absolute; left: 50%; top: 50%; font-size: 26px; margin: -0.31em 0 0 -0.41em; opacity: .5 }
.mirror button .eqsign::before, .mirror button .eqsign::after { background: var(--cream); box-shadow: none }
.mirror button.up { background: var(--paper); box-shadow: 0 0 0 3px var(--hot), 0 4px 0 var(--night) }
.mirror button.up .eqsign { opacity: 0 }
.mirror button.won { background: var(--own); opacity: .35; box-shadow: none; cursor: default }
.mirror button.won .eqsign { opacity: 0 }
.mirror.waiting button { cursor: default }
.mine .lead { color: var(--hot) }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px }
.pad button { border: 0; border-radius: 14px; padding: 14px 0; font-size: 28px; font-weight: 700; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--deeper); cursor: pointer }
.pad button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--deeper) }
.pad button.del { background: var(--deeper); color: var(--cream) }
.pad button.go { background: var(--hot) }
.pad button:disabled { opacity: .45 }
.readout { display: flex; align-items: center; justify-content: center; height: 72px; border-radius: 16px; background: var(--night); font-size: 46px; font-weight: 700; letter-spacing: .04em }
.readout.empty { font-size: 20px; font-weight: 500; opacity: .7; letter-spacing: 0 }
.verdict { text-align: center; font-size: 26px; font-weight: 700; padding: 14px; border-radius: 16px }
.verdict.right { background: var(--good); color: var(--ink) }
.verdict.wrong { background: var(--bad); color: var(--ink) }
.mini { list-style: none; padding: 0; margin: 0 }
.mini li { display: flex; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--deep); margin-bottom: 6px; font-weight: 700 }
.mini li.cur { background: var(--cream); color: var(--ink) }
.mini li .shape { width: 26px; height: 26px; margin-right: 10px; flex: none }
.mini li .n { flex: 1 }
.mini li .b { color: var(--hot); font-size: 14px; margin-right: 10px }
.mini li.cur .b { color: var(--deep) }
.mini li .p { font-size: 22px }
.shelf { margin-top: 26px }
.endqr { position: absolute; left: 40px; bottom: 34px; display: flex; width: 380px }

/* the phone's own game */
.playhere .lvrow { display: flex; justify-content: space-between }
.playhere .lv { flex: 1; margin: 0 3px; border: 0; border-radius: 12px; padding: 12px 0; font-size: 20px; font-weight: 700; background: var(--deeper); color: var(--cream); cursor: pointer }
.playhere .lv:first-child { margin-left: 0 } .playhere .lv:last-child { margin-right: 0 }
.playhere .lv.on { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--hot) }
.lvname { margin: 0; font-size: 17px } .lvname span { opacity: .75; font-weight: 500; white-space: pre }
.app.solo { padding-top: max(10px, env(safe-area-inset-top)) }
.app.solo > * + * { margin-top: 10px }
.sbar { display: flex; align-items: center }
.shome { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--deeper); color: var(--cream); font-size: 18px; cursor: pointer; margin-right: 10px }
.sscores { flex: 1; display: flex; justify-content: flex-end }
.sscores .sp { display: flex; align-items: center; margin-left: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--deeper); font-weight: 700; font-size: 16px; transition: background .3s, color .3s }
.sscores .sp .shape { width: 22px; height: 22px; margin-right: 6px }
.sscores .sp b { margin-left: 8px; font-size: 20px }
.sscores .sp.cur { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--c) }
.sturn { margin: 0; font-size: 19px; font-weight: 700; min-height: 1.3em }
.sboard { position: relative; margin: 6px auto 0 }
.sboard .card .face, .sboard .card .back { border-radius: 12px }
.sboard .card .plate { border-radius: 10px }
.sboard .card .badge { width: 18% }
.sboard .card.up .face { box-shadow: 0 0 0 3px var(--hot), 0 6px 0 var(--night) }
.sboard .card .back, .sboard .card .face { box-shadow: 0 5px 0 var(--night) }
.sboard .card.won .face { box-shadow: inset 0 0 0 5px var(--own), 0 5px 0 var(--night) }
.sfinal { display: flex; justify-content: center }
.sfinal .sf { display: flex; flex-direction: column; align-items: center; margin: 0 14px; font-weight: 700 }
.sfinal .sf .shape { width: 40px; height: 40px }
.sfinal .sf b { font-size: 52px; line-height: 1.1 }
.sboard .card.up { transform: scale(1.03) }