/* Twin Le Pop (2026-10-08): styles for week-2026-10-05-pop.js and for its card on the hub.
   While the game is open, #adventure carries the class "twinpop" and fills the screen, so
   nothing can sit below the fold on a sideways phone. Every rule here is scoped to that
   class, to .tp-*, or to the one hub card: no other activity changes.
   Sections: hub card; full-screen stage; bar; field and bubbles; marked letters; panels. */

/* ---------- hub card: a wide strip under the six workshops ---------- */
.choice-grid .choice-card[href="#twinpop"]{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:22px;align-items:center;min-height:0}
.choice-card[href="#twinpop"] .choice-drawing{grid-row:1/span 3;margin:0}
.choice-card[href="#twinpop"] strong{align-self:end;font-size:28px}
.choice-card[href="#twinpop"] span{margin:6px 0 10px}
.choice-card[href="#twinpop"] small{align-self:start;justify-self:start;margin:0;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:13px;background:var(--green);color:#fff;font-size:17px;font-weight:500}
@media(max-width:700px){
  .choice-grid .choice-card[href="#twinpop"]{grid-template-columns:minmax(0,132px) minmax(0,1fr);column-gap:14px;min-height:0}
  .choice-card[href="#twinpop"] strong{font-size:23px}
  .choice-card[href="#twinpop"] small{font-size:16px;padding:8px 12px}
}

/* ---------- full-screen stage ---------- */
html.tp-open,html.tp-open body{overflow:hidden}
#adventure.twinpop{position:fixed;z-index:60;inset:0;margin:0;width:auto;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;padding:8px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center;background:#f1f4de;background-image:radial-gradient(#43644d12 1px,transparent 1px);background-size:18px 18px}
#adventure.twinpop .adventure-head{display:contents}
#adventure.twinpop #menu-button{grid-column:1;grid-row:1;min-height:44px;padding:8px 14px;font-size:16px}
#adventure.twinpop #adventure-title{grid-column:2;grid-row:1;margin:0;font-size:26px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#adventure.twinpop #activity-progress{grid-column:3;grid-row:1;font-size:16px;font-weight:600;white-space:nowrap}
#adventure.twinpop #subject,#adventure.twinpop #instruction,#adventure.twinpop #feedback{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#adventure.twinpop #play-space{grid-column:1/-1;grid-row:2;min-height:0;height:100%;display:flex}
.tp{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}

/* ---------- bar: rule, meter, speed, sound ---------- */
.tp-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:44px}
/* a fixed-height slot: swapping the rule for a "why" card must never change the height of the field */
.tp-rule{flex:1 1 250px;min-width:0;margin:0;height:46px;display:flex;align-items:center;overflow:hidden;font-size:18px;line-height:1.2}
.tp-rule b{font-weight:600;background:var(--gold);border-radius:7px;padding:0 6px}
.tp-meter{display:flex;align-items:center;gap:5px}
.tp-meter[hidden]{display:none}
.tp-dot{width:18px;height:18px;border-radius:50%;background:#fffef7;border:2px solid var(--ink)}
.tp-dot.on{background:#8fbf6f;transform:scale(1.12)}
.tp-speed{display:flex;align-items:flex-end;gap:3px;height:24px}
.tp-speed small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:4px;line-height:1.2}
.tp-speed i{width:8px;border-radius:3px;border:2px solid var(--ink);background:#fffef7}
.tp-speed i:nth-of-type(1){height:11px}
.tp-speed i:nth-of-type(2){height:17px}
.tp-speed i:nth-of-type(3){height:23px}
.tp-speed i.on{background:var(--gold)}
#adventure.twinpop .tp-sound{min-height:44px;min-width:44px;padding:6px 12px;font-size:15px;background:#fffef7}
#adventure.twinpop .tp-sound[aria-pressed=false]{background:#e6e9da;color:#56705f}
.tp-why{display:inline-flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;max-width:100%;gap:2px 12px;padding:1px 12px;border:2px solid var(--ink);border-radius:14px;background:#fffef7;font-size:17px;font-weight:500}
.tp-why[hidden]{display:none}
.tp-why.yes{background:#e4efd7}
.tp-why.no{background:#fbe9dc}
.tp-why .w{font:700 25px/1.25 'Baloo 2',Fredoka,system-ui,sans-serif}
.tp-why i.tw{animation-name:tp-nod}

/* ---------- field and bubbles ---------- */
.tp-field{position:relative;flex:1 1 0;min-height:0;overflow:hidden;border:3px solid var(--ink);border-radius:22px;background:linear-gradient(#dff0ea,#fff9e9 78%);box-shadow:4px 5px 0 #b9cab0;touch-action:none;-webkit-user-select:none;user-select:none}
/* two soft hills, like the ground in Pip's drawings; bubbles float in front of them */
.tp-field::before,.tp-field::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%}
.tp-field::before{left:-14%;right:36%;bottom:-36%;height:54%;background:#dee9b9}
.tp-field::after{left:40%;right:-16%;bottom:-40%;height:52%;background:#e7efcb}
.tp-wrap{position:absolute;z-index:1;top:0;left:0;pointer-events:none;will-change:transform}
#adventure.twinpop .tp-b{pointer-events:auto;display:grid;place-items:center;margin:0;padding:0 4px;min-width:0;min-height:0;border:2.5px solid var(--ink);border-radius:50%;font:700 24px/1 'Baloo 2',Fredoka,system-ui,sans-serif;color:var(--ink);background-image:radial-gradient(ellipse 15% 11% at 26% 23%,#fffffff0 0 96%,transparent 100%);box-shadow:inset -7px -9px 0 #244e4114,0 3px 0 #294f3d1f;touch-action:none;cursor:pointer;transition:transform .22s,opacity .4s .35s}
#adventure.twinpop .tp-b:hover{filter:none}
.tp-in{display:block;white-space:nowrap}
.tp-wrap.pop .tp-b{transform:scale(1.05);opacity:0}
#adventure.twinpop .tp-wrap.bad .tp-b{background-color:#dedfd6!important;opacity:0;transition:opacity .45s .8s}
.tp-wrap.bad .tp-in{animation:tp-shake .4s}
.tp-wrap.esc .tp-b{opacity:.8;transition:opacity .3s}
.tp-wrap.fade .tp-b{opacity:0;transition:opacity .35s}
@keyframes tp-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes tp-nod{0%,100%{transform:translateY(0)}40%{transform:translateY(-9%)}70%{transform:translateY(3%)}}
@keyframes tp-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-22%)}70%{transform:translateY(6%)}}

/* ---------- marked letters: the teaching ---------- */
.tp i{font-style:normal;display:inline-block;border-radius:7px;padding:0 1px}
.tp i.tw{background:var(--gold);box-shadow:inset 0 0 0 2px var(--ink);animation:tp-bounce .55s 2}
.tp i.tw+i.tw{animation-delay:.09s}
.tp i.one{box-shadow:inset 0 0 0 2px #9b542c;background:#fffef7}
.tp i.vow{background:#e2d5f0;box-shadow:inset 0 0 0 2px var(--ink)}
.tp i.dif{background:#cfe0f1;box-shadow:inset 0 0 0 2px var(--ink)}
.tp i.dif2{background:#f4c6cf;box-shadow:inset 0 0 0 2px var(--ink)}
.tp-intro i.tw{animation-iteration-count:infinite;animation-duration:1.1s}

/* ---------- panels: intro, round banner, finale ---------- */
.tp-panel{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px 18px;text-align:center;overflow:hidden}
.tp-pip{width:min(340px,80%);flex:0 1 auto;min-height:0}
.tp-pip canvas{border:2px solid #c9d3b8;border-radius:18px}
.tp-examples{display:flex;align-items:flex-start;justify-content:center;gap:14px}
.tp-ex{margin:0;padding:8px 16px 10px;border:2px solid var(--ink);border-radius:20px;background:#fffef7;box-shadow:3px 4px 0 #b9cab0}
.tp-ex.yes{background:#e4efd7}
.tp-ex.no{background:#fbe9dc}
.tp-word{margin:0;font:700 clamp(30px,5.4vw,46px)/1.25 'Baloo 2',Fredoka,system-ui,sans-serif}
.tp-ex figcaption{font-size:16px;font-weight:500}
.tp-actions{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:440px}
.tp-lead{margin:0;font-size:19px;line-height:1.3}
.tp-panel .tools{margin:0}
.tp-panel h3{margin:0;font-size:clamp(26px,4.4vw,36px);line-height:1.1}
.tp-panel .helper{margin:0}
.tp-art{flex:0 1 auto;width:min(380px,82%);min-width:0;min-height:0}
.tp-art .tp-reward{max-width:100%;margin:0;border:2px solid #c9d3b8}
.tp-banner{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:4px;padding:10px;text-align:center;background:#fff9e9e0}
.tp-banner h3{margin:0;font-size:clamp(30px,6vw,52px);line-height:1.1}
.tp-banner p{margin:0;font-size:clamp(18px,3vw,24px)}

/* ---------- narrow phones held upright ---------- */
@media(max-width:600px){
  #adventure.twinpop{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);padding:8px 10px}
  #adventure.twinpop #activity-progress{grid-column:2;grid-row:1;justify-self:end}
  #adventure.twinpop #adventure-title{grid-column:1/-1;grid-row:2;font-size:25px}
  #adventure.twinpop #play-space{grid-row:3}
  .tp-rule{flex-basis:100%;font-size:17px;height:48px}
  .tp-why{font-size:14px;gap:2px 8px;padding:1px 9px}
  .tp-why .w{font-size:22px}
  .tp-dot{width:14px;height:14px}
  .tp-meter{gap:4px}
  .tp-speed small{display:none}
  .tp-speed{margin-left:auto}
  .tp-examples{gap:10px}
  .tp-ex{padding:6px 10px 8px}
}
/* ---------- phones held sideways: every pixel of height goes to the field ---------- */
@media(max-height:460px){
  #adventure.twinpop{padding:5px 10px;row-gap:4px}
  #adventure.twinpop #adventure-title{font-size:23px}
  .tp{gap:4px}
  .tp-rule{font-size:16px}
  .tp-why .w{font-size:22px}
  .tp-field{border-radius:18px;box-shadow:3px 3px 0 #b9cab0}
  .tp-panel{flex-direction:row;gap:6px 26px;padding:6px 14px}
  .tp-pip{display:none}
  .tp-word{font-size:clamp(28px,4.6vw,38px);line-height:1.15}
  .tp-ex{padding:4px 14px 6px}
  .tp-ex figcaption{font-size:15px}
  .tp-lead{font-size:17px}
  .tp-actions{gap:6px}
  .tp-art{width:230px;flex:0 1 230px}
  .tp-panel h3{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .tp i.tw{animation:none!important}
  .tp-wrap.bad .tp-in{animation:none!important;outline:2px solid #9b542c;border-radius:8px}
}