/* Copilot Feature-dle · Home, play screen and result screen */

/* ======================================================= HOME */
.hero { position: relative; margin: 1.5rem 0 2.5rem; }
.hero-pill {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 430px;
  background: var(--blue); color: #fff; border-radius: 40px 999px 999px 40px;
  padding: clamp(2rem, 5vw, 3.75rem) min(40%, 27rem) clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 4.5vw, 4rem);
}
.hero-pill .btn:focus-visible, .hero-pill a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--navy); }
.kicker { margin: 0 0 1.1rem; font: 700 1rem var(--font-head); color: #fff; }
.kicker .tagline { font-size: 1rem; }
.hero-title { margin: 0 0 1.1rem; color: #fff; }
.wm-hero { font-size: clamp(2.5rem, 1.2rem + 6.4vw, 5.6rem); }
.hero-lede { margin: 0 0 1.75rem; max-width: 34ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 300; line-height: 1.5; color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-art { position: absolute; right: 1.5%; top: 6%; bottom: 18px; width: min(36%, 390px); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hero-pip { width: min(100%, 270px); height: auto; animation: bob 4.2s ease-in-out infinite; position: relative; z-index: 2; }
.float-tile { position: absolute; display: grid; place-items: center; width: 58px; height: 68px; border-radius: 16px; font: 900 1.7rem var(--font-head); box-shadow: var(--shadow-md); animation: floaty 6s ease-in-out infinite; z-index: 1; }
.ft1 { background: var(--yellow); color: var(--navy); left: 2%; top: 10%; transform: rotate(-12deg); }
.ft2 { background: var(--pink); color: #000; right: 4%; top: 4%; transform: rotate(10deg); animation-delay: -2s; }
.ft3 { background: var(--green); color: var(--navy); right: 0; top: 46%; transform: rotate(-6deg); animation-delay: -4s; }
.ft4 { background: #fff; color: var(--blue); left: 6%; top: 52%; transform: rotate(8deg); animation-delay: -1s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.hero-tab { position: absolute; left: 53%; bottom: 0; width: 252px; height: 126px; background: #fff; border-radius: 126px 126px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; box-shadow: 0 -2px 0 rgba(255, 255, 255, .6); }

.daily-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 0; overflow: hidden; border-radius: var(--r-xl); margin-bottom: 1rem; }
.daily-main { padding: clamp(1.4rem, 3vw, 2.4rem); }
.daily-main h2 { margin-bottom: .4rem; }
.daily-msg { display: flex; gap: .6rem; align-items: flex-start; max-width: 56ch; margin: .75rem 0 0; }
.daily-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 2.75rem 2rem 5rem; background: var(--yellow-10); border-radius: 999px 0 0 999px; }
.streak-big { display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: var(--font-head); color: var(--navy); }
.streak-big strong { font-size: 3.6rem; font-weight: 900; display: block; margin: .15rem 0; }
.streak-big .ic { color: var(--grey-50); }
.streak-big.is-on .ic { color: var(--orange); fill: var(--orange-50); }
.streak-big span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.countdown { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; color: var(--grey); text-align: center; }
.countdown strong { font-variant-numeric: tabular-nums; color: var(--navy); }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1rem; }
.mode-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .45rem; min-height: 190px; padding: 1.5rem; border-radius: var(--r-lg); background: var(--c); color: var(--c-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.mode-card::after { content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.mode-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-md); color: var(--c-ink); }
.mode-card h3 { margin: .2rem 0 0; color: inherit; font-size: 1.25rem; }
.mode-card p { margin: 0; font-size: .92rem; line-height: 1.45; }
.mode-card:focus-visible { outline-color: var(--navy); }
.mode-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); margin-bottom: .35rem; }

.peek-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.peek-card { display: flex; flex-direction: column; gap: .5rem; justify-content: center; }
.peek-card p { margin: 0; }
.peek-label { font: 700 .78rem var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--grey); }
.peek-big { font: 900 1.7rem/1.15 var(--font-head); color: var(--navy); }
.peek-big small { font-size: 1rem; font-weight: 700; margin: 0; }
.peek-ring { flex-direction: row; align-items: center; gap: 1rem; }

.spotlight { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; margin: 3rem 0; padding: 2.25rem clamp(1.5rem, 5vw, 4.5rem) 2.25rem clamp(1.5rem, 4vw, 3rem); background: var(--c); color: var(--c-ink); border-radius: 40px 999px 999px 40px; }
.spotlight h2, .spotlight p, .spotlight .eyebrow { color: inherit; }
.spotlight p { max-width: 52ch; }
.spot-art { background: rgba(255, 255, 255, .92); border-radius: 50%; padding: 1.2rem 1.2rem .2rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.steps li { background: var(--c-tint); border-radius: var(--r-lg); padding: 1.5rem; }
.steps h3 { margin-bottom: .3rem; }
.steps p { margin: 0; }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--c-ink); font: 900 1.2rem var(--font-head); margin-bottom: .8rem; }

/* ======================================================= PLAY */
.play-wrap { padding-top: 1.5rem; }
.play-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1.25rem; }
.play-h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0; }
.play-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.timer-chip { background: var(--navy); color: #fff; font-variant-numeric: tabular-nums; font-size: .9rem; }
.turn-banner { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.3rem; margin-bottom: 1rem; border-radius: var(--r-pill); background: var(--c); color: var(--c-ink); font: 700 1.15rem var(--font-head); }
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.play-main { display: grid; gap: 1.25rem; min-width: 0; }
.play-side { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1rem); }

.hint-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: end; }
.hint-pip { margin-bottom: -.1rem; }
.hint-bubble { position: relative; background: var(--c); color: var(--c-ink); border-radius: 30px 30px 30px 8px; padding: 1.35rem 1.75rem 1.6rem; }
.hint-bubble::before { content: ""; position: absolute; left: -13px; bottom: 26px; border: 14px solid transparent; border-left: 0; border-right-color: var(--c); }
.hint-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 700 .78rem var(--font-head); text-transform: uppercase; letter-spacing: .09em; }
.hint-pts { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255, 255, 255, .92); color: var(--navy); border-radius: var(--r-pill); padding: .22rem .7rem; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.hint-text { margin: 0; font: 500 clamp(1.25rem, 1rem + 1.3vw, 1.85rem)/1.35 var(--font-body); }
.hint-bubble.is-new { animation: popin .5s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes popin { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.mini-h { margin: 0 0 .65rem; font: 700 .82rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--grey); }
.earlier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.earlier-list li { display: flex; gap: .8rem; align-items: flex-start; background: var(--c-tint); border-radius: var(--r-md); padding: .75rem 1rem; }
.e-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--c-ink); font: 700 .85rem var(--font-head); }
.e-t { padding-top: .12rem; }

.guess-form { background: var(--blue-10); border-radius: var(--r-lg); padding: 1.25rem 1.4rem 1rem; }
.guess-row { display: flex; gap: .75rem; align-items: flex-start; }
.combo { position: relative; flex: 1; min-width: 0; }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: .4rem; list-style: none; background: #fff; border: 2px solid var(--navy-10); border-radius: var(--r-md); box-shadow: var(--shadow-lg); max-height: 18rem; overflow: auto; }
.suggest.up { top: auto; bottom: calc(100% + 6px); }
.suggest li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 46px; padding: .6rem 1rem; border-radius: var(--r-sm); cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--blue); color: #fff; }
.sg-name { font-weight: 700; }
.sg-meta { font-size: .78rem; opacity: .9; text-align: right; }
.guess-msg { min-height: 1.4em; margin: .5rem .25rem 0; font-weight: 500; padding-left: .7rem; border-left: 4px solid transparent; }
.guess-msg:empty { border-left-color: transparent; }
.guess-msg.is-warn { border-left-color: var(--orange); font-weight: 700; }
.guess-msg.is-hot { border-left-color: var(--orange); }
.guess-msg.is-warm { border-left-color: var(--yellow); }
.guess-msg.is-cold { border-left-color: var(--blue); }
.guess-actions { display: flex; flex-wrap: wrap; gap: .4rem .75rem; margin-top: .25rem; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.guess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.guess { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--blue-10); border-left: 6px solid var(--blue-50); }
.guess.is-hot { background: var(--orange-10); border-left-color: var(--orange); }
.guess.is-warm { background: var(--yellow-10); border-left-color: var(--yellow); }
.guess.is-correct { background: var(--green-10); border-left-color: var(--green); }
.guess.is-skip { background: var(--grey-10); border-left-color: var(--grey-50); }
.g-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 .8rem var(--font-head); }
.g-name { font: 700 1rem var(--font-head); }
.g-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; }
.empty { margin: 0; }

.meter { list-style: none; margin: .25rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.meter-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .2rem; border-radius: 16px; border: 2px solid var(--navy-10); background: #fff; color: var(--grey); font: 700 .8rem var(--font-head); transition: transform .2s; }
.meter-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; }
.meter-pts { font-size: .78rem; }
.meter-step.is-used { background: var(--c); color: var(--c-ink); border-color: var(--c); }
.meter-step.is-current { background: var(--c); color: var(--c-ink); border-color: var(--navy); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); transform: translateY(-3px); }
.meter-step.is-locked { border-style: dashed; }
.attempts { display: flex; align-items: center; gap: .65rem; margin: 0; font-weight: 500; }
.score-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 .7rem; }
.score-num { font: 900 2.7rem/1 var(--font-head); color: var(--blue); font-variant-numeric: tabular-nums; }
.score-now small { color: var(--grey); }
.score-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }
.score-lines li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem .5rem; }
.score-lines small { flex-basis: 100%; color: var(--grey); }
.extras-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.extras-list li { display: grid; gap: .4rem; }
.x-label { display: flex; align-items: center; gap: .4rem; font: 700 .85rem var(--font-head); }
.x-name .name-tiles { --tw: 1.7rem; margin-bottom: .3rem; }
.extras small { color: var(--grey); }
.result-host { margin-top: 1.5rem; scroll-margin-top: calc(var(--header-h) + .5rem); }
.is-paused > * { visibility: hidden; }
.is-paused::before { content: "Paused \2013  press Resume to carry on"; display: block; text-align: center; padding: 4rem 1rem; font: 700 1.4rem var(--font-head); color: var(--navy); }

/* ======================================================= RESULT */
.result { margin: 1rem 0 2rem; }
.result-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem); border-radius: 40px 999px 999px 40px; background: var(--green-10); }
.result.is-loss .result-hero { background: var(--yellow-10); }
.result-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); margin: 0 0 .3rem; }
.result-sub { margin: 0 0 .5rem; font-size: 1.1rem; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.score-table { margin: 0 0 1rem; }
.score-table > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.score-table dt { font-weight: 500; }
.score-table dt small { color: var(--grey); }
.score-table dd { margin: 0; font: 700 1.05rem var(--font-head); }
.score-total { border-bottom: 0 !important; padding-top: .8rem !important; }
.score-total dt { font: 700 1.1rem var(--font-head); }
.score-total dd { font: 900 2rem var(--font-head); color: var(--blue); }
.score-total dd small { font-size: .9rem; color: var(--grey); }
.xp-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.xp-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--yellow); color: var(--navy); padding: .35rem .95rem; border-radius: var(--r-pill); font: 700 .95rem var(--font-head); }
.rank-row { margin-top: 1rem; display: grid; gap: .5rem; }
.emoji-grid { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--blue-10); border-radius: var(--r-md); padding: 1rem 1.25rem; font-size: 1.8rem; letter-spacing: .12em; margin-bottom: .75rem; }
.emoji-score { font: 900 1.3rem var(--font-head); letter-spacing: 0; }
.next-daily { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; }
.next-daily strong { font-variant-numeric: tabular-nums; }

.learn { margin: 2.5rem 0 1rem; }
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.learn-card { background: var(--c-tint); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; }
.learn-card h3 { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; font-size: 1.1rem; }
.learn-card h3 .ic { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--c); color: var(--c-ink); }
.learn-card p { margin: 0 0 .6rem; }
.learn-card > :last-child { margin-bottom: 0; }
.learn-wide { grid-column: 1 / -1; }
.usecases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.usecases li { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border-radius: var(--r-md); padding: 1rem; }
.usecases p { margin: .25rem 0 0; font-size: .95rem; }
.uc-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 .9rem var(--font-head); }
.prompt { margin: 0 0 .6rem; background: #fff; border-radius: var(--r-md); padding: 1.1rem 1.3rem; border-left: 6px solid var(--green); display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.prompt blockquote { flex: 1 1 320px; font-size: 1.05rem; line-height: 1.6; font-weight: 500; }
.learn-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.learn-link h3, .learn-link p { margin-bottom: .2rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.result-compact { display: grid; gap: .75rem; background: var(--green-10); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; margin-top: 1rem; }
.result-compact.is-loss { background: var(--yellow-10); }
.rc-top { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.rc-top .chips { margin-bottom: 0; }
.rc-learn { background: #fff; border-radius: var(--r-md); padding: .5rem 1rem; }
.rc-learn summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; font: 700 .95rem var(--font-head); }
.rc-learn .learn-grid { padding: .5rem 0 1rem; }

/* ======================================================= RESPONSIVE */
@media (max-width: 1100px) {
  .hero-pill { padding-right: min(36%, 20rem); }
  .peek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .play-grid { display: flex; flex-direction: column; gap: 1.25rem; }
  .play-main { display: contents; }
  .play-side { position: static; }
  .hint-card { order: 1; }
  .guess-form { order: 2; }
  .play-side { order: 3; }
  .earlier { order: 4; }
  .history { order: 5; }
  .learn-grid, .result-grid { grid-template-columns: 1fr; }
  .usecases { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero-pill { border-radius: 36px 160px 160px 36px; padding: 2rem 1.5rem 13rem 1.5rem; min-height: 0; }
  .hero-art { top: auto; bottom: 0; right: 1rem; height: 12.5rem; width: 14rem; }
  .hero-pip { width: 150px; }
  .float-tile { width: 40px; height: 48px; font-size: 1.2rem; border-radius: 12px; }
  .hero-tab { display: none; }
  .daily-card { grid-template-columns: 1fr; }
  .daily-side { border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 1.5rem; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .spotlight { grid-template-columns: 1fr; border-radius: 36px; text-align: left; }
  .spot-art { display: none; }
  .result-hero { grid-template-columns: 1fr; border-radius: 36px; }
  .result-pip { display: flex; justify-content: center; }
}
@media (max-width: 560px) {
  .hint-card { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .hint-pip { position: absolute; right: .5rem; top: -3.2rem; z-index: 2; }
  .hint-pip .pip { width: 64px; height: auto; }
  .hint-bubble { border-radius: 26px; padding: 1.2rem 1.3rem 1.4rem; }
  .hint-bubble::before { display: none; }
  .guess-row { flex-direction: column; }
  .guess-row .btn { width: 100%; }
  .peek-grid { grid-template-columns: 1fr 1fr; }
  .peek-ring { flex-direction: column; align-items: flex-start; }
  .meter { gap: .3rem; }
  .guess-form { padding: 1rem; }
}