/* Play menu: one card in the middle of the screen over the lobby, which is blurred behind it. */
@property --mm-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
#main-menu{--glass:rgba(255,255,255,.06);--glass-strong:rgba(255,255,255,.12);--line:rgba(255,255,255,.14);--cream:#f4f0d8;--lime:#b8f557;--aqua:#5fe0ff;--ink:#0c211c;position:fixed;inset:0;z-index:12;display:flex;padding:clamp(12px,3vw,40px);background:transparent;color:#fff;font-family:var(--font);overflow:hidden auto;-webkit-tap-highlight-color:transparent}
#main-menu[hidden],#main-menu [hidden]{display:none!important}
/* The lobby behind: out of focus, darker towards the edges. */
#main-menu::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(6,22,19,.28) 0,rgba(4,14,12,.62) 70%,rgba(2,8,7,.82) 100%);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);animation:mm-shade .5s ease both}
/* Two slow lights drifting behind the card. */
#main-menu::after{content:"";position:fixed;inset:-20%;pointer-events:none;background:radial-gradient(circle at 34% 38%,rgba(184,245,87,.2) 0,rgba(184,245,87,0) 30%),radial-gradient(circle at 68% 64%,rgba(95,224,255,.17) 0,rgba(95,224,255,0) 32%);animation:mm-drift 16s ease-in-out infinite alternate}
@keyframes mm-shade{from{opacity:0}to{opacity:1}}
@keyframes mm-drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.12)}}
body.menu-open #game-hud{visibility:hidden}
body.menu-open #menu-open,body.menu-open #online-badge,body.match-active #menu-open{display:none}
#menu-open{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:6;border:0;border-radius:999px;background:linear-gradient(120deg,#c9ff6b,#9fe23f);color:#0c211c;padding:13px 34px;font:800 15px var(--font);letter-spacing:.08em;cursor:pointer;white-space:nowrap;box-shadow:0 5px 0 #5f8a1f,0 12px 26px rgba(4,16,14,.45);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;animation:mm-pulse 2.2s ease-in-out infinite}
#menu-open:hover{filter:brightness(1.08);transform:translateX(-50%) translateY(-2px)}
#menu-open:active{transform:translateX(-50%) translateY(4px);box-shadow:0 1px 0 #5f8a1f,0 6px 14px rgba(4,16,14,.4)}
@keyframes mm-pulse{0%,100%{box-shadow:0 5px 0 #5f8a1f,0 12px 26px rgba(4,16,14,.45),0 0 0 0 rgba(184,245,87,.5)}50%{box-shadow:0 5px 0 #5f8a1f,0 12px 26px rgba(4,16,14,.45),0 0 0 12px rgba(184,245,87,0)}}
#online-badge{position:fixed;right:18px;top:16px;z-index:6;max-width:calc(100vw - 150px);background:#203b2ce8;border:1px solid #94d5a4;border-radius:20px;color:#d5ffd9;padding:9px 16px;font:600 12px var(--font);cursor:pointer}
/* In a match the gold and diamonds own the top-right corner: the room tag sits under them and stops short of the centre title. */
body.match-active #online-badge{top:62px;padding:6px 12px;font-size:11px;max-width:calc(50vw - 270px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:900px){body.match-active #online-badge{display:none}}

/* Logo and card, stacked and centred. */
.mm-stack{position:relative;z-index:1;margin:auto;display:grid;justify-items:center;gap:clamp(14px,2.6vh,26px);width:min(410px,100%)}
.mm-logo{display:grid;justify-items:center;gap:10px;text-align:center;animation:mm-drop .6s cubic-bezier(.2,.9,.2,1) both}
.mm-logo small{display:flex;align-items:center;gap:12px;font:800 11px/1 var(--font);letter-spacing:.42em;text-indent:.42em;color:var(--lime)}
.mm-logo small::before,.mm-logo small::after{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--lime))}
.mm-logo small::after{transform:scaleX(-1)}
.mm-logo b{font:800 clamp(44px,8vw,78px)/.86 var(--display,var(--font));letter-spacing:.01em;color:#fff;text-shadow:0 5px 0 rgba(3,14,12,.9),0 16px 40px rgba(0,0,0,.55);animation:mm-float 5s ease-in-out infinite}
.mm-logo em{font-style:normal;background:linear-gradient(180deg,#e2ff9c 10%,#9fe23f 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 5px 0 rgba(3,14,12,.9))}
@keyframes mm-drop{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.mm-panel{position:relative;width:100%;display:grid;gap:12px}
.mm-panel>*{animation:mm-in .45s cubic-bezier(.2,.8,.2,1) both}
.mm-panel>:nth-child(2){animation-delay:.06s}.mm-panel>:nth-child(3){animation-delay:.12s}.mm-panel>:nth-child(4){animation-delay:.18s}.mm-panel>:nth-child(n+5){animation-delay:.24s}
@keyframes mm-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mm-panel button,.mm-panel input,.mm-panel select{font-family:inherit;color:inherit}
.mm-panel button{cursor:pointer}
.mm-panel button:disabled{cursor:default;opacity:.55}
.mm-panel :focus-visible{outline:2px solid #fff;outline-offset:2px}
.mm-panel small,.mm-panel p{margin:0}
.mm-panel svg{flex:none}

/* The card: dark glass with a light that travels round its edge. */
.mm-sheet{padding:20px;background:linear-gradient(165deg,rgba(26,54,46,.8) 0,rgba(10,26,23,.86) 55%,rgba(7,18,17,.9) 100%);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(184,245,87,.08);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);animation:mm-card .5s cubic-bezier(.2,.9,.2,1) both}
.mm-sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--mm-turn),var(--lime) 0,rgba(184,245,87,0) 22%,rgba(95,224,255,0) 48%,var(--aqua) 62%,rgba(95,224,255,0) 82%,var(--lime) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;animation:mm-turn 7s linear infinite}
@keyframes mm-turn{to{--mm-turn:360deg}}
@keyframes mm-card{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.mm-title{display:flex;align-items:center;gap:10px;margin:0;font:800 clamp(24px,3vw,30px)/1 var(--display,var(--font));letter-spacing:.02em}
.mm-title svg{width:26px;height:26px;padding:7px;box-sizing:content-box;border-radius:12px;background:rgba(184,245,87,.14);color:var(--lime)}
.mm-label{display:block;font:800 10px/1 var(--font);letter-spacing:.18em;color:rgba(244,240,216,.72)}
.mm-field{display:grid;gap:7px}
.mm-field>small{font:600 12px/1.45 var(--font);color:rgba(241,244,234,.8)}

/* The three ways to play. */
.mm-list{display:grid;gap:10px}
.mm-item{--accent:#fff;position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px 12px 12px;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.mm-item>i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);transition:transform .2s ease}
.mm-item>i svg{width:24px;height:24px}
.mm-item>span{flex:1;display:grid;gap:5px;min-width:0}
.mm-item b{font:800 17px/1 var(--font);letter-spacing:.02em;white-space:nowrap}
.mm-item small{font:600 12px/1.2 var(--font);color:rgba(255,255,255,.68)}
.mm-item>em{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font:normal 800 18px/1 var(--font);color:rgba(255,255,255,.8);transition:transform .2s ease,background .2s ease,color .2s ease}
.mm-item:hover,.mm-item:focus-visible{transform:translateY(-2px);background:var(--glass-strong);border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent)}
.mm-item:hover>i,.mm-item:focus-visible>i{transform:scale(1.08) rotate(-4deg)}
.mm-item:hover>em,.mm-item:focus-visible>em{transform:translateX(4px);background:var(--accent);color:var(--ink)}
.mm-item:active{transform:translateY(1px)}
.mm-play{padding:16px 16px 16px 14px;background:linear-gradient(115deg,#d6ff86 0,#b8f557 45%,#8fdc3a 100%);border:0;color:var(--ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 0 #5f8a1f,0 18px 40px rgba(110,190,40,.3)}
.mm-play::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);transform:translateX(-100%);animation:mm-shine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes mm-shine{0%,62%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.mm-play>i{width:52px;height:52px;border-radius:16px;background:var(--ink);color:var(--lime)}
.mm-play>i svg{width:28px;height:28px}
.mm-play b{font:800 23px/1 var(--display,var(--font));letter-spacing:.03em}
.mm-play small{color:rgba(12,33,28,.74);font-weight:700}
.mm-play>em{width:32px;height:32px;background:rgba(12,33,28,.14);color:var(--ink)}
.mm-play:hover,.mm-play:focus-visible{background:linear-gradient(115deg,#e2ffa2 0,#c6fb6c 45%,#9ee64a 100%);transform:translateY(-3px);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 9px 0 #5f8a1f,0 24px 50px rgba(110,190,40,.42)}
.mm-play:hover>em,.mm-play:focus-visible>em{background:var(--ink);color:var(--lime)}
.mm-play:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #5f8a1f,0 8px 18px rgba(110,190,40,.3)}

/* Player name */
.mm-name{display:flex;align-items:center;gap:12px;padding:9px 12px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:16px;transition:border-color .16s ease,background .16s ease}
.mm-name:focus-within{border-color:var(--lime);background:rgba(0,0,0,.34)}
.mm-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#d6ff86,#8fdc3a);color:var(--ink);font:800 18px/1 var(--display,var(--font));box-shadow:0 0 0 3px rgba(184,245,87,.18)}
.mm-namebox{flex:1;display:grid;gap:4px;min-width:0}
.mm-name input{width:100%;min-width:0;height:22px;padding:0;background:none;border:0;font:800 16px/1 var(--font);color:#fff}
.mm-name input:focus{outline:none}
.mm-name svg{width:16px;height:16px;color:rgba(255,255,255,.45)}

.mm-ghost,.mm-back{justify-self:start;display:flex;align-items:center;gap:8px;padding:8px 2px;background:none;border:0;font:800 12px var(--font);letter-spacing:.12em;color:rgba(255,255,255,.82);transition:color .14s ease}
.mm-ghost{justify-self:center}
.mm-ghost svg{width:18px;height:18px}
.mm-ghost:hover,.mm-back:hover{color:var(--lime)}
.mm-back{padding:7px 12px 7px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:11px}
.mm-back:hover{border-color:var(--lime)}
#mm-cancel.mm-ghost{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
#mm-cancel.mm-ghost:hover{border-color:#ffb1a2;color:#ffd9d0}
.mm-foot{font:600 11px/1.4 var(--font);letter-spacing:.06em;color:rgba(255,255,255,.55);text-align:center;animation:mm-in .5s .35s both}

.mm-inline input,.mm-pair select{min-width:0;height:44px;padding:0 13px;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:12px;font:700 14px var(--font);color:#fff}
.mm-panel input::placeholder{color:rgba(255,255,255,.45)}
.mm-inline input:focus,.mm-pair select:focus{background:rgba(0,0,0,.38);border-color:var(--lime);outline:none}
.mm-pair select option{background:#12292b;color:#fff}

.mm-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:14px}
.mm-switch button{height:40px;background:none;border:0;border-radius:10px;font:800 13px var(--font);letter-spacing:.03em;color:rgba(255,255,255,.75);transition:background .14s ease,color .14s ease,box-shadow .14s ease}
.mm-switch button:hover{background:rgba(255,255,255,.1)}
.mm-switch button[aria-checked="true"]{background:linear-gradient(120deg,#c9ff6b,#9fe23f);color:var(--ink);box-shadow:0 4px 14px rgba(110,190,40,.35)}

.mm-primary{height:54px;padding:0 20px;background:linear-gradient(115deg,#d6ff86 0,#b8f557 45%,#8fdc3a 100%);border:0;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 0 #5f8a1f,0 14px 30px rgba(110,190,40,.28);font:800 15px var(--font);letter-spacing:.06em;color:var(--ink)!important;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.mm-primary:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-2px)}
.mm-primary:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 #5f8a1f}
.mm-primary:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)!important;box-shadow:none;opacity:1}
.mm-inline{display:flex;gap:8px}
.mm-inline>*{flex:1}
.mm-inline>button:not(.mm-primary){height:44px;padding:0 10px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;font:800 12px var(--font);letter-spacing:.04em;transition:background .14s ease,border-color .14s ease}
.mm-inline>button:not(.mm-primary):hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.mm-inline>.mm-primary{flex:none;height:44px;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 0 #5f8a1f}
.mm-inline>button.mm-danger{border-color:rgba(255,150,130,.45);color:#ffd9d0}
.mm-inline>button.mm-danger:hover{background:rgba(120,36,28,.8);border-color:#ffb1a2}
.mm-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mm-pair label{display:grid;gap:7px}
.mm-pair select{width:100%}

.mm-code{flex:1;display:grid;place-items:center;height:52px;padding:0 8px;background:rgba(0,0,0,.34);border:1px dashed rgba(184,245,87,.55);border-radius:14px;font:800 clamp(19px,2.3vw,25px)/1 var(--font);letter-spacing:.09em;white-space:nowrap;color:var(--lime);text-shadow:0 0 18px rgba(184,245,87,.35);user-select:all}
.mm-inline>.mm-code+.mm-primary{height:52px}
.mm-link{padding:0;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;color:var(--lime)!important}
.mm-rows{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center}
.mm-chips{display:flex;gap:6px}
.mm-chips:empty{display:none}
.mm-chips span{padding:6px 10px;background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:20px;font:800 11px/1 var(--font);letter-spacing:.08em}
.mm-members,.mm-rooms{display:grid;max-height:132px;overflow:auto;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:14px}
.mm-members:empty{display:none}
.mm-members>div{display:flex;align-items:center;gap:10px;padding:9px 12px}
.mm-members>div+div,.mm-rooms>button+button{border-top:1px solid rgba(255,255,255,.08)}
.mm-members i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(184,245,87,.22)}
.mm-members span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px var(--font)}
.mm-members small{font:800 10px var(--font);letter-spacing:.1em;color:var(--cream)}
.mm-rooms{max-height:176px}
.mm-rooms>p{padding:14px 12px;font:600 12px/1.5 var(--font);color:rgba(255,255,255,.8)}
.mm-rooms>button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:0;text-align:left}
.mm-rooms>button:hover{background:rgba(255,255,255,.1)}
.mm-rooms>button span{flex:1;display:grid;gap:3px;min-width:0}
.mm-rooms>button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 13px var(--font)}
.mm-rooms>button small{font:600 11px var(--font);color:rgba(255,255,255,.75)}
.mm-rooms>button em{padding:6px 10px;border-radius:999px;background:var(--lime);font:normal 800 10px var(--font);letter-spacing:.1em;color:var(--ink)}

.mm-search{display:flex;align-items:center;gap:16px}
.mm-search b{position:relative;display:grid;place-items:center;flex:none;width:92px;height:92px;font:800 40px/1 var(--display,var(--font));font-variant-numeric:tabular-nums;color:var(--lime)}
.mm-search b::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--lime);animation:mm-spin 1.1s linear infinite}
@keyframes mm-spin{to{transform:rotate(360deg)}}
.mm-search span{font:700 15px/1.3 var(--font)}
.mm-status{font:700 13px/1.4 var(--font)}
.mm-status:empty,.mm-notice:empty{display:none}
.mm-notice{padding:10px 12px;background:rgba(60,46,6,.86);border-left:3px solid #f6d25c;border-radius:10px;font:700 12px/1.45 var(--font)}

@media(max-width:520px){.mm-item b{font-size:15px}.mm-play b{font-size:20px}.mm-item small{font-size:11px}.mm-sheet{padding:16px;border-radius:22px}}
@media(max-height:680px){
 .mm-stack{gap:10px}.mm-logo{gap:6px}.mm-logo b{font-size:clamp(30px,8vh,48px)}.mm-logo small{font-size:9px}
 .mm-panel{gap:9px}.mm-sheet{padding:14px}.mm-list{gap:8px}
 .mm-item{padding:8px 12px 8px 9px}.mm-item>i{width:38px;height:38px;border-radius:12px}.mm-play{padding:10px 12px 10px 10px}.mm-play>i{width:42px;height:42px}.mm-play b{font-size:19px}
 .mm-name{padding:6px 10px}.mm-avatar{width:30px;height:30px;font-size:15px}.mm-foot{display:none}
 .mm-title{font-size:22px}.mm-switch button{height:34px}.mm-primary{height:44px}.mm-code,.mm-inline>.mm-code+.mm-primary{height:42px}.mm-code{font-size:18px}.mm-members{max-height:78px}.mm-rooms{max-height:92px}.mm-search b{width:70px;height:70px;font-size:30px}
 #menu-open{bottom:70px;padding:9px 22px;font-size:12px}
}
@media(max-height:460px){.mm-logo small,.mm-item small{display:none}.mm-logo b{font-size:26px}.mm-stack{gap:6px}.mm-panel{gap:6px}.mm-item>i{width:32px;height:32px}.mm-play>i{width:34px;height:34px}.mm-item{padding:6px 10px 6px 8px}.mm-play{padding:7px 10px 7px 8px}.mm-ghost{padding:2px}#main-menu{padding-block:8px}}
@media(prefers-reduced-motion:reduce){.mm-panel>*,.mm-sheet,.mm-sheet::before,.mm-logo,.mm-logo b,#main-menu::before,#main-menu::after,#menu-open,.mm-play::after,.mm-search b::before,.mm-foot{animation:none}.mm-item,.mm-item>i,.mm-item>em,.mm-primary,.mm-switch button{transition:none}}

/* One-step first-visit guide. The spotlight leaves the real button clickable. */
.cv-first-play{position:fixed;inset:0;z-index:10000;pointer-events:none;font-family:var(--font);color:#fffaf0}
.cv-first-play-spot{position:fixed;border:2px solid #ffe7a5;border-radius:16px;box-shadow:0 0 0 200vmax #070810bf,0 0 24px #ffa63866;box-sizing:border-box}
.cv-first-play p{position:fixed;width:220px;margin:0;text-align:center;font-size:20px;font-weight:800;line-height:1.3;text-shadow:0 2px 4px #000}
.cv-first-play-hand{position:fixed;width:78px;height:94px;overflow:visible;filter:drop-shadow(0 5px 3px #0006);animation:cv-guide-tap 1.15s ease-in-out infinite;transform-origin:30% 10%}
#main-menu.cv-guide-active .cv-play-grid{animation:none!important;transform:none!important}
@keyframes cv-guide-tap{0%,100%{transform:translate(0,8px) rotate(-15deg)}50%{transform:translate(-3px,0) rotate(-15deg)}}
@media(prefers-reduced-motion:reduce){.cv-first-play-hand{animation:none;transform:rotate(-15deg)}}

/* Connection quality: the host's delay as seen by a guest, in the room screen and the room badge. */
#mm-count[data-quality]::after,#online-badge[data-quality]::before{content:'';display:inline-block;width:8px;height:8px;margin:0 0 1px 7px;border-radius:50%;vertical-align:middle}
#online-badge[data-quality]::before{margin:0 7px 1px 0}
#mm-count[data-quality=""]::after,#online-badge[data-quality=""]::before{display:none}
#mm-count[data-quality=good]::after,#online-badge[data-quality=good]::before{background:#7be36b;box-shadow:0 0 6px #7be36b}
#mm-count[data-quality=fair]::after,#online-badge[data-quality=fair]::before{background:#f3c23a;box-shadow:0 0 6px #f3c23a}
#mm-count[data-quality=poor]::after,#online-badge[data-quality=poor]::before{background:#ef5a4a;box-shadow:0 0 6px #ef5a4a}

.cv-first-play-skip{position:fixed;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));pointer-events:auto;min-height:44px;padding:10px 20px;border:1px solid #fff6;border-radius:8px;background:#24202e;color:#fff5e5;font:700 14px var(--font);cursor:pointer}.cv-first-play-skip:focus-visible{outline:3px solid #ffce80;outline-offset:3px}