/* BOPPi playful tabletop skin: loaded after style.css. Chunky borders, colour blocking, hard offset shadows, Fredoka for headings. */
body,button,input,select,textarea{font-family:var(--ova-font)}
.wordmark,.screen-title,.title,.screen-head h2,.tgroup,.usgroup h3,.panel h3,.cv-body h3,.task .t,.codeline,.code,.pname,.tag,.badge,.clevel{font-family:var(--ova-display)}
.wordmark{font-weight:700;letter-spacing:0}
.wordmark b{font-weight:700}
.screen-title,.title,.screen-head h2,.tgroup,.usgroup h3,.panel h3{font-weight:700;letter-spacing:-.01em}
.code,.codeline{font-weight:700}

/* ---- heat identities ---- */
.lvl-sweet{--lvb:var(--ova-sweet);--lvt:#26344a}
.lvl-flirty{--lvb:var(--ova-cheeky);--lvt:#26344a}
.lvl-spicy{--lvb:var(--ova-spicy);--lvt:#ffffff}

/* ---- controls ---- */
.primary,.accept,.ghost,.round,.cv-btns button,.task .btns button,.panel .btns button,.picks button,.seg button,.chip,.langpick button,.deckpick button,.lvlpick button,.skiprow button{
  border:3px solid var(--ova-ink);box-shadow:0 4px 0 var(--ova-ink);transition:transform 90ms ease,box-shadow 90ms ease,background-color var(--ova-duration)}
.chip{border-width:2px;box-shadow:0 3px 0 var(--ova-ink)}
.primary:active:not(:disabled),.accept:active,.ghost:active,.round:active,.cv-btns button:active:not(:disabled),.task .btns button:active,.panel .btns button:active,.picks button:active,.seg button:active,.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ova-ink)}
.primary,.accept,.round.big,.cv-btns button.go,.task .btns button.ok.go{background:var(--ova-accent);color:#26344a;border-color:var(--ova-ink)}
.primary,.accept,.ghost,.cv-btns button,.task .btns button,.panel .btns button{font-family:var(--ova-display);font-weight:600;font-size:17px}
.primary:disabled{opacity:.5;box-shadow:none}
.ghost{background:var(--ova-surface);border-color:var(--ova-ink)}
.round{background:var(--ova-surface);color:var(--ova-ink)}
.round small{font-family:var(--ova-display);font-weight:600;font-size:13px;color:inherit}
.round.big{width:84px;height:84px;color:#26344a}
.round.big small{color:#26344a;font-size:15px}
.seg button.on,.deckpick button[aria-checked=true],.langpick button[aria-checked=true],.picks button.on{box-shadow:0 1px 0 var(--ova-ink);transform:translateY(3px)}
.lvlpick button{box-shadow:0 3px 0 var(--ova-ink);border-width:2px}
.lvlpick button[aria-pressed=true]{box-shadow:0 1px 0 currentColor;transform:translateY(2px)}
.lvlpick button:not([aria-pressed=true]){opacity:.7;border-color:var(--ova-border);box-shadow:none}
.lvlpick button[aria-pressed=true].lv-sweet{background:var(--ova-sweet-surface);border-color:var(--ova-sweet)}
.lvlpick button[aria-pressed=true].lv-flirty{background:var(--ova-cheeky-surface);border-color:var(--ova-cheeky)}
.lvlpick button[aria-pressed=true].lv-spicy{background:var(--ova-spicy-surface);border-color:var(--ova-spicy)}
.avrow button{border:3px solid var(--ova-border)}
.avrow button[aria-checked=true]{border-color:var(--ova-ink);box-shadow:0 0 0 3px var(--ova-accent)}
input:not([type=checkbox]),textarea,select{border:3px solid var(--ova-control-border);border-radius:var(--ova-radius-control);background:var(--ova-surface);color:var(--ova-ink)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--ova-accent);outline-offset:1px}
.toggle input,.check input{accent-color:var(--ova-accent)}

/* ---- panels ---- */
.player,.usgroup,.task,#log li,.panel,details{border:2px solid var(--ova-ink);box-shadow:var(--ova-shadow-card)}
.task.claimed{border-color:var(--ova-accent);box-shadow:0 4px 0 var(--ova-accent)}
#app .tabs{border:2px solid var(--ova-ink);box-shadow:var(--ova-shadow-card)}
#app .tabs button[aria-selected=true]{background:var(--ova-accent);color:#26344a}
.testmode{border:2px solid var(--ova-cheeky);}
.status{color:var(--ova-accent-ink)}

/* ---- bottom navigation ---- */
#nav{background:var(--ova-surface);border-top:3px solid var(--ova-ink);gap:6px;padding:8px 10px 2px}
#nav button{font-family:var(--ova-display);font-weight:600;font-size:13px;border-radius:14px;color:var(--ova-text-muted)}
#nav button[aria-current=page]{background:var(--ova-accent);color:#26344a;box-shadow:0 3px 0 var(--ova-ink);border:2px solid var(--ova-ink);min-height:50px}
#nav button[aria-current=page] .ic{stroke:#26344a}
#task-badge{background:var(--ova-spicy);color:#fff;border:2px solid var(--ova-surface)}

/* ---- the playing card ---- */
.card .inner::before{background:#1d2840;transform:translateZ(-10px) translateY(8px);box-shadow:0 20px 30px rgba(29,40,64,.32),0 4px 0 rgba(0,0,0,.3)}
#deck::after{background:rgba(29,40,64,.34)}
.face.front,.face{background:#fffaee;background-image:radial-gradient(rgba(38,52,74,.055) 1px,transparent 1.2px);background-size:7px 7px;border:0}
.face{box-shadow:0 2px 0 rgba(0,0,0,.25),0 14px 24px rgba(29,40,64,.26)}
.cface{--pad:clamp(14px,4.4vw,20px);padding:0 0 clamp(10px,2vh,16px);gap:clamp(5px,1.1vh,10px);border:5px solid var(--lvb,var(--ova-ink));border-radius:var(--ova-radius-card);color:#26344a}
.cface>:not(.chead){margin-inline:var(--pad)}
.chead{background:var(--lvb);color:var(--lvt);padding:8px var(--pad);margin:0}
.clevel{color:inherit;font-weight:600;font-size:14px;letter-spacing:.16em}
.cdot{width:22px;height:22px;background:var(--ova-accent);border:3px solid #26344a}
.cemoji{display:flex;align-items:center;justify-content:center;height:clamp(64px,13vh,118px);padding:0;border-radius:18px;border:3px solid var(--lvb);
  background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.75),transparent 55%),var(--lv);font-size:clamp(40px,7.2vh,68px);line-height:1}
.ctitle{font-family:var(--ova-display);font-weight:700;letter-spacing:-.01em;line-height:1.04;font-size:clamp(26px,4.8vh,40px);margin:0;color:#26344a}
.ctext{color:#26344a;font-size:clamp(14px,1.95vh,17px)}
.cquote{font-style:normal;font-weight:700;color:#26344a;background:var(--lv);border:2px dashed var(--lvb);border-radius:14px;padding:7px 11px;transform:rotate(-1deg);font-size:clamp(13px,1.9vh,15px)}
.cface .chips span{background:#fff;border:2px solid #26344a;color:#26344a;font-weight:700}
.cface .chips span.match{background:var(--ova-cheeky-surface);border-color:#26344a;color:#26344a}
.cstamp{background:var(--ova-accent);color:#26344a;border:2px solid #26344a}
.cfoot .wordmark{font-size:24px;color:#26344a}
.cfoot .wordmark b{color:var(--ova-accent)}
.ctag{color:#5a6578;font-weight:700}
.used-tag{border-width:3px;font-family:var(--ova-display)}
.cv-card{background:#fffaee;border:0;box-shadow:0 4px 0 rgba(0,0,0,.3),0 30px 60px rgba(0,0,0,.4)}
.cv-card .cface{margin:12px 12px 0;border-radius:20px;min-height:min(56vh,420px)}
.cv-meta{color:#5a6578;padding:8px 22px 0}
.cv-btns button{background:#fff;color:#26344a;border-color:#26344a;box-shadow:0 4px 0 #26344a}
.cv-btns button.go{background:var(--ova-accent)}
.cv-close{color:#5a6578}
.cv-card .cquote{font-size:16px}
#serve-card .face{box-shadow:0 2px 0 rgba(0,0,0,.3),0 24px 44px rgba(0,0,0,.4)}

/* ---- motion: sending flicks the card across the table, passing flings it away ---- */
#serve-card.passing{animation:passAway .3s ease-in forwards}
@keyframes passAway{to{transform:translate(-120vw,70px) rotate(-26deg);opacity:0}}
.accept,.primary{animation:none}
@keyframes land{from{transform:translateY(60px) rotate(-5deg) rotateX(14deg);opacity:0}60%{transform:translateY(-6px) rotate(1deg)}to{transform:none;opacity:1}}
@keyframes openCard{from{transform:rotateX(18deg) translateY(40px) scale(.9) rotate(-2deg);opacity:0}70%{transform:translateY(-4px) scale(1.01)}to{transform:none;opacity:1}}
.fx.sneaky{font-size:30px}

/* ---- overlays and toasts keep the night palette ---- */
#toast,#nag{border:2px solid #fff4df;font-family:var(--ova-display);font-weight:600}
@media (min-width:820px) and (min-height:620px){
  html{background:color-mix(in srgb,var(--ova-background) 88%,#26344a)}
  #app{box-shadow:0 0 0 3px var(--ova-ink),0 30px 80px rgba(29,40,64,.28)}
}
#topbar-signout{min-height:40px;padding:6px 14px;font-family:var(--ova-display);font-weight:600}
#screen-shop.welcome [data-back]{visibility:hidden}
#welcome-continue{margin-top:12px}

/* the instruction is never clipped: the picture panel and quote give way first (see fitFace in app.js) */
.cface .ctext{flex-shrink:0;overflow:visible}
.cface .cemoji,.cface .ctitle,.cface .chead{flex-shrink:0}
.cface.compact .cemoji{height:clamp(44px,8vh,64px);font-size:clamp(30px,5vh,40px)}
.cface.noquote .cquote{display:none}

/* version sits next to the logo; the bottom bar is the last thing on the screen */
.brandrow{display:flex;align-items:center;gap:8px}
.ver{font-size:12px;line-height:16px;font-weight:700;color:var(--ova-text-muted);letter-spacing:.04em}
#nav{padding-bottom:calc(8px + var(--safe-b))}

/* the offer page right after sign-up */
.offer h3{font:700 1.5rem/1.15 var(--ova-display);text-align:center;margin:6px 0 14px}
.tier{position:relative;background:var(--ova-surface);border:3px solid var(--ova-ink);border-radius:20px;box-shadow:var(--ova-shadow-card);padding:16px;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.tier.best{border-color:var(--ova-accent);box-shadow:0 5px 0 var(--ova-accent)}
.ribbon{position:absolute;top:-14px;left:16px;background:var(--ova-accent);color:#26344a;font:700 13px/1 var(--ova-display);letter-spacing:.06em;text-transform:uppercase;border:3px solid var(--ova-ink);border-radius:999px;padding:5px 12px}
.tier-h{font:700 1.25rem/1.2 var(--ova-display)}
.te{font-size:1.4rem}
.tier-price b{font:700 1.8rem/1 var(--ova-display)}
.tier-price s{color:var(--ova-text-muted);margin-left:6px}
.tier-price span{display:block;font-size:.9rem;color:var(--ova-text-muted);font-weight:700;margin-top:2px}
.tier p{margin:2px 0 6px;font-size:.95rem;color:var(--ova-text-muted)}
.tier .buy{min-height:52px;border-radius:16px;background:var(--ova-accent);color:#26344a;border:3px solid var(--ova-ink);box-shadow:0 4px 0 var(--ova-ink);font:700 1.1rem var(--ova-display);cursor:pointer}
.tier .buy:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 var(--ova-ink)}
.tier .buy[disabled]{background:var(--ova-sweet-surface);color:var(--ova-success);box-shadow:none;cursor:default}
.trust{text-align:center;font-size:.9rem;font-weight:700;color:var(--ova-text-muted);margin:4px 0 8px}
#offer-browse,#offer-back{display:block;margin:0 auto 12px;font-weight:700;text-decoration:underline;color:var(--ova-ink)}

.moreopts{background:var(--ova-surface);border:2px solid var(--ova-ink);border-radius:16px;padding:0;box-shadow:0 3px 0 var(--ova-ink)}
.moreopts>summary{cursor:pointer;font:600 1.05rem var(--ova-display);padding:14px 16px;list-style:none;min-height:48px}
.moreopts>summary::-webkit-details-marker{display:none}
.moreopts>summary::after{content:"+";float:right;font-size:1.4rem;line-height:1;color:var(--ova-accent-ink)}
.moreopts[open]>summary::after{content:"–"}
.moreopts>:not(summary){margin:0 12px 12px}

@keyframes chipPulse{0%,100%{transform:none;box-shadow:0 3px 0 var(--ova-ink)}50%{transform:scale(1.07);box-shadow:0 3px 0 var(--ova-accent),0 0 0 4px var(--ova-accent)}}
#remaining.pulse{animation:chipPulse 1.3s ease-in-out infinite}
.note.warn{background:var(--ova-cheeky-surface);color:var(--ova-cheeky-ink);border:2px solid var(--ova-cheeky);border-radius:14px;padding:10px 12px;text-align:left}
.lobby-links{display:flex;justify-content:center;gap:18px}
.lobby-links .link{font-weight:700;text-decoration:underline;color:var(--ova-ink)}