body.embedded{background:transparent;min-height:0;height:100vh;height:100svh}
.embedded header,.embedded .intro,.embedded footer{display:none}
.embedded main{max-width:none;padding:0;height:100%}
.embedded .game{height:100%;display:flex;flex-direction:column;box-shadow:none}
.embedded .board{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
.embedded .hole{height:100%;min-height:0}
.embedded .dashboard{grid-template-columns:1fr 1fr 1fr auto;align-items:center;padding:16px 24px}
.embedded .dashboard>div:nth-child(3){text-align:right}
.embedded #pause{font-size:13px;padding:9px 12px;margin-left:8px}
@media(max-width:650px){
 .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
 .hole{height:clamp(80px,18svh,132px)}
 .embedded .board{grid-template-rows:repeat(3,minmax(0,1fr))}
 .embedded .dashboard{padding:10px 12px;gap:8px}
 .embedded .dashboard strong{font-size:23px}
 .embedded .dashboard span{font-size:11px}
 .embedded .status{min-height:48px;padding:10px;font-size:13px}
 .embedded .brief h2{font-size:27px}
 .embedded .brief .hint{margin-top:10px!important;margin-bottom:0}
 .embedded .rules{margin:10px 0;gap:18px}
 .embedded .rules img{height:52px}
}

/* Match the landing page's readable type and button treatment. */
.brief{max-width:680px;width:100%;text-align:left}
.brief>p:not(.eyebrow){max-width:600px;margin-left:0;font-size:19px;line-height:1.5}
.brief h2{font-size:42px}
.brief .eyebrow{font-size:13px}
.brief .hint{font-size:15px}
.overlay{padding:32px 40px}
.rules{justify-content:flex-start;gap:40px;margin:20px 0}
.rules strong{font-size:18px}
.rules span{font-size:16px}
.rules img{height:92px;width:116px}
.start-record{display:flex;align-items:baseline;gap:10px;color:#d8e4b4;font-size:18px;margin:14px 0}
.start-record strong{font-size:30px;font-variant-numeric:tabular-nums;color:#f3e9c9}
.start-record span{color:#aebda1}
.primary,.quiet{position:relative;overflow:hidden;isolation:isolate}
.primary{background:#bdd077;border-color:#bdd077;border-radius:4px;font-size:18px;min-height:52px}
.primary::before,.quiet::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(255,255,235,.8) 48%,transparent 72%);transform:translateX(-130%)}
.primary:hover::before,.primary:focus-visible::before,.quiet:hover::before,.quiet:focus-visible::before{animation:game-shine .85s ease both}
@keyframes game-shine{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
.embedded .dashboard span{font-size:16px}
.embedded .dashboard strong{font-size:34px}
.embedded #pause{font-size:16px;min-height:44px}
.status{font-size:16px}
.hole.lacto img{width:88%;left:6%;height:94%}
@media(max-width:650px){
 .overlay{padding:18px}
 .brief h2,.embedded .brief h2{font-size:30px;margin-bottom:10px}
 .brief>p:not(.eyebrow){font-size:16px;max-width:none;margin-bottom:8px}
 .brief .eyebrow{font-size:11px}
 .brief .hint{font-size:13px;line-height:1.4}
 .rules,.embedded .rules{gap:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}
 .rules img,.embedded .rules img{width:100%;height:64px}
 .rules strong{font-size:14px}.rules span{font-size:13px}
 .start-record{font-size:16px;margin:8px 0;gap:8px}.start-record strong{font-size:26px}
 .primary{font-size:17px;width:100%;min-height:48px}
 .embedded .dashboard span{font-size:13px}.embedded .dashboard strong{font-size:26px}
 .embedded #pause{font-size:14px;padding:8px;margin-left:0}
 .embedded .status{font-size:13px;gap:8px}
}
@media(max-height:500px) and (max-width:650px){
 .overlay{padding:14px 16px}.brief .eyebrow{margin-bottom:6px}
 .rules img,.embedded .rules img{height:44px}.rules,.embedded .rules{margin:8px 0}
 .brief h2,.embedded .brief h2{font-size:27px}
 .brief .hint br{display:none}
}
@media(prefers-reduced-motion:reduce){.primary::before,.quiet::before{animation:none!important}}
.hole.golden{border-color:#efc553;background:radial-gradient(ellipse at 50% 80%,#41320e,#173126 75%)}
.share-trigger{display:block;margin-top:12px;min-height:44px;font-size:16px}
#hint:empty{display:none}
#share-dialog{box-sizing:border-box;width:min(480px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;margin:auto;padding:30px 24px 20px;border:1px solid #8b9d694d;border-radius:18px;background:#102b23;color:#f3e9c9;box-shadow:0 20px 70px #0009}
#share-dialog::backdrop{background:#02100ddb;backdrop-filter:blur(5px)}
#share-dialog h2{font-size:28px;margin:12px 0;line-height:1.15}
#share-dialog p{font-size:16px;line-height:1.5}
#share-dialog .eyebrow{font-size:10px;padding-right:30px}
.share-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border:1px solid #e8988866;border-radius:10px;background:#6b302e;color:#fff1e8;font-size:30px;line-height:1}
.share-options{display:flex;gap:12px;margin:18px 0}
.share-options a{flex:1;text-align:center;padding:14px 8px;border-radius:8px;background:#23483c;color:#e6edce;text-decoration:none;font-weight:bold}
.share-options a:hover{background:#315d4e}
#share-dialog label{display:block;font-size:14px;margin-bottom:8px;color:#bcc9ad}
#share-url{width:100%;padding:12px;border:1px solid #80936166;border-radius:6px;background:#081e18;color:#dce4c9;font-size:14px}
#share-copy{width:100%;margin-top:14px}
#share-status{min-height:24px;margin:10px 0 0;color:#cfdfa0}
@media(max-width:650px){.share-trigger{width:100%;font-size:15px;margin-top:8px}#share-dialog{padding:26px 16px 16px}#share-dialog h2{font-size:25px}}
.hole.golden img{filter:sepia(1) saturate(3) drop-shadow(0 0 9px #ffd258)}
.hole.golden .key{color:#ffeaa1;font-weight:700}
.hot-trail{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:5px 12px 5px 5px;background:#30240cf2;border:1px solid #d9b456;border-radius:8px;color:#ffe8a8;font-size:15px;pointer-events:none}
.hot-trail img{width:36px;height:36px;object-fit:cover;border-radius:5px}
.hot .time-track{box-shadow:0 0 14px #f0b936}
@media(max-width:650px){.hot-trail{top:79px;font-size:12px;gap:5px}.hot-trail img{width:25px;height:25px}.embedded .brief .hint{font-size:13px;line-height:1.4}}
@media(max-height:500px) and (max-width:650px){.embedded .rules img{height:38px}.embedded .brief .hint{font-size:12px}.embedded .brief>p{line-height:1.35}}