/* Every choice says who you will play and starts that mode directly. */
body.is-intro .topnote{display:none}
body.is-intro .page{max-width:1100px;padding-top:12px}
body.is-intro .layout{display:block}
body.is-intro :is(.aside,.modebar,.banner,.foot){display:none}
body.is-intro .board{min-height:0;height:clamp(570px,calc(100svh - 136px),700px)}
body.is-intro .boardtop,body.is-intro .controls{display:none}
body.is-intro .board .arena{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto auto;gap:24px;align-items:center;align-content:center;min-height:0;padding:38px 44px;height:100%}
.start-copy{grid-column:1;grid-row:1;text-align:left}
body.is-intro .board .start-copy h2{font:700 clamp(42px,4.2vw,58px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:0 0 12px}
.start-copy h2 em{font-family:'Kalam',cursive;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-2px;color:#f0cf89;white-space:nowrap}
.start-explainer{font-size:13px;line-height:1.5;color:#f0ead2;margin:0 0 8px}
.start-format{display:flex;gap:18px;align-items:center;font-size:13px;color:#d4d9bf}
.start-format span+span{position:relative}
.start-format span+span:before{content:'·';position:absolute;left:-11px;color:#e1bd80}
body.is-intro .board .hands{grid-column:2;grid-row:1/3;position:relative;isolation:isolate;align-self:center;height:360px;width:100%;gap:6px;margin:0}
body.is-intro .hands:before{content:'';position:absolute;z-index:-1;width:94%;aspect-ratio:1;border:1px dashed #dde1b91b;border-radius:50%;background:radial-gradient(ellipse,#cfdea116,transparent 67%);transform:rotate(-12deg)}
body.is-intro .handgroup{display:flex;flex-direction:column;align-items:center;flex:1 1 0;width:0;min-width:0;height:100%;max-height:none}
body.is-intro .board .hands .hand{width:100%;height:calc(100% - 35px);min-height:0}
body.is-intro .hand canvas{transform:translateY(-8%) scale(1.5);transform-origin:50% 65%}
body.is-intro .handlabel{position:relative;font-size:10px;line-height:18px;letter-spacing:1.3px;margin-top:8px;color:#e0dfc7;opacity:.85}
body.is-intro .vs{font:700 16px 'Kalam',cursive;color:#e1cc98;transform:rotate(-8deg);margin-bottom:32px}
.start-choices{grid-column:1;grid-row:2;display:grid;gap:10px;width:100%;max-width:370px}
.start-choice{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:80px;width:100%;padding:15px 20px;border:1px solid #e4dfba55;border-radius:7px;background:#153d304d;color:#f4edce;text-align:left;transition:background-color .15s,border-color .15s}
.start-choice-copy{display:grid;gap:5px;min-width:0}
.start-choice strong{font:700 16px/1.25 'DM Sans',sans-serif}
.start-choice small{font:400 12px/1.4 'DM Sans',sans-serif;color:#c4d2bb}
.start-choice-arrow{flex:none;font-size:23px;line-height:1}
.start-choice-online{background:#f2d28b;border-color:#ffe3a7;box-shadow:0 3px 0 #b99959;color:#244535}
.start-choice-online small{color:#415742}
.start-choice:focus-visible{outline:3px solid #fff5d5;outline-offset:4px}
@media(hover:hover){.start-choice:hover{background:#315a45;border-color:#eee3b48c}.start-choice-online:hover{background:#ffe2a0;border-color:#ffe3a7}}
@media(max-width:1024px){
 body.is-intro .page{padding-top:10px}
 body.is-intro .board{display:block;height:min(760px,var(--board-height));min-height:590px}
 body.is-intro .board .arena{height:100%;grid-template-columns:1fr;grid-template-rows:auto minmax(160px,1fr) auto;gap:14px;padding:24px}
 .start-copy{grid-column:1;grid-row:1;text-align:center}
 body.is-intro .board .start-copy h2{font-size:42px;letter-spacing:-1.5px;margin:0 0 8px}
 .start-format{justify-content:center;font-size:11px}
 .start-explainer{font-size:11px;margin-bottom:6px}
 body.is-intro .board .hands{grid-column:1;grid-row:2;height:100%;max-height:300px;min-height:0;gap:8px}
 body.is-intro .hands:before{width:min(94%,285px)}
 body.is-intro .hand canvas{transform:translateY(-8%) scale(1.45)}
 .start-choices{grid-column:1;grid-row:3;justify-self:center;max-width:360px;gap:8px}
 .start-choice{min-height:74px;padding:13px 16px;gap:10px}
 .start-choice strong{font-size:15px}
 .start-choice small{font-size:11px}
}
@media(max-width:1024px) and (max-height:700px){
 body.is-intro .board .arena{padding:18px 20px;gap:10px}
 body.is-intro .board .start-copy h2{font-size:36px}
 .start-choice{min-height:70px;padding-block:11px}
}
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
 body.is-intro .page{padding-top:6px}
 body.is-intro .board{min-height:250px}
 body.is-intro .board .arena{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px 24px;padding:8px 28px}
 .start-copy{grid-column:1;grid-row:1;text-align:left}
 body.is-intro .board .start-copy h2{font-size:30px;letter-spacing:-1.5px;margin:0}
 .start-format{justify-content:flex-start;font-size:10px}
 body.is-intro .board .hands{grid-column:2;grid-row:1/3;height:100%;max-height:none}
 body.is-intro .hands:before{width:70%}
 body.is-intro .handlabel{font-size:10px;letter-spacing:1px}
 .start-choices{grid-column:1;grid-row:2;gap:6px;max-width:360px}
 .start-choice{min-height:50px;padding:6px 12px}
 .start-choice-copy{gap:3px}
 .start-choice strong{font-size:13px}
 .start-choice small{font-size:10px}
}
.start-rival{margin:1px 0 5px;text-align:left;font-size:12px;line-height:1.5;color:#eee8ce}.start-rival span{display:block;font-size:10px;color:#becbb2;margin-top:3px}.start-invite{display:flex;align-items:center;gap:8px;border:0;background:none;color:#ede5c9;min-height:44px;font:600 13px 'DM Sans';text-align:left;padding:4px 2px}.start-invite .friends-icon{flex-shrink:0}.start-invite:focus-visible{outline:2px solid #f7dfaa;outline-offset:2px}
@media(max-width:1024px){.start-rival{font-size:11px}.start-invite{justify-content:center}.start-choices{gap:7px}body.is-intro .board{min-height:630px}}
body.is-intro .start-choices .start-rival{display:block;margin:2px 0 6px;font-size:12px;line-height:1.5;color:#eee8ce}body.is-intro .start-choices .start-rival span{font-size:10px;color:#becbb2}

@media(max-width:380px){body.is-intro .board .start-copy h2{font-size:36px}.start-copy h2 em{letter-spacing:-1.5px}}
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){body.is-intro .board{min-height:360px}body.is-intro .board .start-copy h2{font-size:30px}.start-explainer{font-size:10px;margin:4px 0}.start-format{font-size:10px}}
/* Show the reward before asking for an identity. */
.start-prize{grid-column:2;grid-row:1/3;align-self:center;text-align:center;position:relative;padding:20px 6px;color:#f5ebc9}
.start-prize-art{height:255px;display:grid;place-items:center;background:radial-gradient(ellipse,#ded29c24,transparent 68%)}
.start-prize-art .hand-style-art{width:220px;height:255px;object-fit:contain;filter:drop-shadow(0 16px 12px #0b261b40)}
.start-prize-copy{min-width:0}
.start-prize h3{font:700 24px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.6px;margin:0 0 9px}
.start-prize p{max-width:310px;margin:0 auto;font:400 13px/1.5 'DM Sans',sans-serif;color:#d5dcc3}
.start-entry-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;color:#c6d2ba;font-size:11px}
.start-entry-links button{background:none;border:0;color:#eee5c5;padding:7px 0;min-height:36px;font:500 11px 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1024px){
 body.is-intro .board .arena{grid-template-rows:auto minmax(135px,1fr) auto;gap:8px}
 .start-prize{grid-column:1;grid-row:2;padding:0;display:grid;grid-template-columns:86px minmax(0,190px);align-items:center;justify-content:center;gap:12px;text-align:left}
 .start-prize-art{height:106px}.start-prize-art .hand-style-art{width:90px;height:106px}
 .start-prize h3{font-size:18px;line-height:1.25;margin-bottom:6px}.start-prize p{font-size:11px;margin:0}
 .start-entry-links{font-size:10px}.start-entry-links button{font-size:10px}
}
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){.start-prize{grid-column:2;grid-row:1/3;display:block}.start-prize-art,.start-prize-art .hand-style-art{height:120px;width:100%}.start-prize h3{font-size:18px}.start-prize p{font-size:10px}.start-entry-links{display:none}}

.start-choice-friend .friends-icon{flex:none}.start-choice-friend .start-choice-copy{flex:1}