/* Hello, Animal! Free printable worksheets responsive CSS. */

/* printables.css */

:root{--ink:#2e3140;--cream:#fff8ea;--paper:#fffef9;--coral:#f4846d;--green:#86c8af;--muted:#6d7180;--yellow:#ffd977}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Trebuchet MS",Verdana,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7951ad;outline-offset:3px}p{line-height:1.65}.shell{width:min(1190px,calc(100% - 56px));margin:auto}.skip-link{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:1000}.skip-link:focus{top:20px}.site-header{border-bottom:1px solid #e9e2d6;background:#fff8ea;position:relative;z-index:5}.nav{min-height:89px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:900;letter-spacing:-1.3px;white-space:nowrap}.brand strong{color:#e4755b}.brand-paw{display:grid;place-items:center;background:#ffe4b3;border-radius:14px;width:43px;height:43px;transform:rotate(-8deg);font-size:27px}.main-nav{display:flex;gap:25px;font-weight:800;font-size:13px;align-items:center}.main-nav a:hover,.main-nav .current{color:#d47662}.nav-cta{background:var(--ink);padding:14px 17px;border-radius:14px;color:#fff;font-size:13px;font-weight:900;white-space:nowrap}.nav-cta span{color:#ffe292;margin-left:7px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;border:2px solid transparent;padding:15px 19px;font-weight:900;font-size:13px;line-height:1.3;transition:transform .16s,box-shadow .16s;white-space:normal;text-align:center}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(60,58,60,.08)}.btn-dark{color:#fff;background:var(--ink)}.btn-light{background:#fff;border-color:#f1e9dc}.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}.eyebrow,.section-kicker{font-size:11px;letter-spacing:1.7px;font-weight:900;color:#ca795c}.print-hero{overflow:hidden;padding:65px 0 79px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;min-height:430px}.hero-copy h1{font-size:clamp(50px,5.2vw,77px);line-height:1.11;margin:21px 0 24px;letter-spacing:-2.6px}.hero-copy h1 em,.intro-row h2 em{font-style:normal;color:var(--coral)}.hero-copy>p{font-size:16px;color:var(--muted);max-width:530px;line-height:1.85}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:29px}.tiny-note{font-size:12px;color:#928b86;font-weight:800;margin-top:28px}.tiny-note span{color:#e38778;font-size:18px;margin-right:5px}.hero-picture{height:415px;position:relative}.picture-orb{position:absolute;width:430px;height:405px;background:#bbdfcd;border-radius:47% 53% 45% 55%;left:50%;top:0;transform:translateX(-50%) rotate(8deg)}.picture-orb:after{content:"";position:absolute;inset:22px;border:2px dashed rgba(255,255,255,.5);border-radius:48%}.picture-card{position:absolute;z-index:2;border:7px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 17px 22px rgba(65,68,69,.12)}.picture-card img{width:95%;height:90%;object-fit:contain}.picture-card span{font-size:11px;font-weight:900;position:absolute;bottom:7px;background:#fff;padding:5px 11px;border-radius:15px}.picture-card-one{width:230px;height:249px;background:#ffd29b;left:25%;top:61px;border-radius:43px;transform:rotate(-9deg)}.picture-card-two{width:165px;height:192px;background:#f4cfdb;right:0;top:0;border-radius:33px;transform:rotate(12deg)}.picture-card-three{width:167px;height:184px;background:#c0dff3;left:3%;bottom:1px;border-radius:34px;transform:rotate(12deg)}.picture-shape{position:absolute;z-index:3;color:#e8a94f;font-size:52px}.shape-a{top:0;left:11%}.shape-b{bottom:4px;right:2%;color:#f58c76}.picture-doodle{position:absolute;right:19%;bottom:32px;font-size:43px;color:#fff;z-index:2}.story-strip{background:var(--paper);border-block:1px solid #ebe4d9}.strip{display:flex;align-items:center;justify-content:space-between;gap:13px;min-height:80px;font-size:12px;font-weight:900;letter-spacing:1.4px;color:#72717b}.strip b{color:#e5a47d;font-size:22px}.section-pad{padding:90px 0}.intro-row{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:34px}.intro-row h2{font-size:clamp(40px,4vw,56px);line-height:1.18;letter-spacing:-1.9px;margin:14px 0 0}.intro-row>p{max-width:380px;font-size:15px;line-height:1.85;color:var(--muted)}.editor-shell{display:grid;grid-template-columns:minmax(0,1fr) 323px;gap:20px;align-items:start}.editor-main{background:#fffef9;padding:27px;border-radius:27px;border:1px solid #efe5d8;min-width:0}.editor-heading h3{font-size:22px;letter-spacing:-.7px;margin:0 0 7px}.editor-heading p{font-size:12px;color:var(--muted);margin:0}.pack-list{display:flex;gap:9px;flex-wrap:wrap;margin:19px 0 24px}.pack-pill{border:1.5px solid #e5d8c8;border-radius:22px;padding:10px 13px;font-size:12px;font-weight:900;background:#fff8ee;color:#6c6670}.pack-pill:hover{background:#f8efe3}.pack-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}.pack-pill small{font-size:10px;opacity:.72;margin-left:5px}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #f0e9de;font-size:12px;font-weight:900;color:#6d746e}.selection-bar div{display:flex;gap:9px}.selection-bar button{border:0;background:transparent;font-weight:900;color:#bb7564;text-decoration:underline;font-size:11px;padding:7px}.card-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:15px}.flash-preview{border:2px solid #ece1d4;background:white;border-radius:20px;overflow:hidden;position:relative;transition:transform .18s,border-color .18s}.flash-preview.picked{border-color:#94c5a9}.flash-preview:hover{transform:translateY(-3px)}.preview-flip{display:block;width:100%;height:212px;background:var(--bubble);border:0;position:relative;text-align:center;color:var(--ink);padding:10px 12px}.flash-preview .card-front,.flash-preview .card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px}.flash-preview .card-front img{width:150px;height:150px;max-width:94%;object-fit:contain;filter:drop-shadow(0 7px 4px rgba(40,45,54,.08))}.flash-preview .card-front strong{font-size:17px;letter-spacing:-.5px}.flash-preview .card-back{align-items:start;text-align:left;gap:5px}.flash-preview .card-back strong{font-size:18px}.flash-preview .card-back small{font-size:11px;color:#535966;line-height:1.5}.flash-preview .card-back .fact-chip{font-size:10px;font-weight:900;color:#b76b53;letter-spacing:.5px}.tap-hint{position:absolute;right:7px;top:7px;font-size:9px;padding:5px 8px;border-radius:15px;background:#fffde7;color:#8b7d65;font-weight:900}.select-label{display:flex;align-items:center;gap:9px;min-height:40px;padding:11px 13px;font-size:11px;font-weight:900;color:#7f7680}.select-label input{accent-color:#5aa785;width:17px;height:17px;cursor:pointer}.more-wrap{text-align:center;margin-top:25px}.gallery-tip{font-size:11px;color:#8a8581;margin:19px 0 0}.print-builder{background:#ddf1e5;border-radius:26px;padding:26px;position:sticky;top:15px;border:1px solid #c8e6d6}.builder-top{display:flex;gap:10px;align-items:center}.builder-icon{background:white;border-radius:16px;padding:10px;font-size:25px}.builder-top h3{font-size:25px;letter-spacing:-.8px;margin:4px 0}.builder-count{background:#fffefa;border-radius:19px;margin:25px 0 27px;padding:19px;display:flex;align-items:baseline;gap:11px}.builder-count strong{font-size:44px;letter-spacing:-1px}.builder-count span{font-size:12px;color:#697a6d;font-weight:800}.print-builder h4{font-size:13px;margin:0 0 12px}.print-modes{display:grid;gap:9px}.print-modes label{display:flex;align-items:start;gap:10px;border-radius:14px;padding:14px 11px;background:#eef8f1;border:1px solid #cce5d6;cursor:pointer}.print-modes label:has(input:checked){background:#fff;border-color:#6cab88;box-shadow:0 0 0 1px #6cab88}.print-modes input{accent-color:#5e9f79;margin-top:4px}.print-modes span{font-weight:900;font-size:12px}.print-modes small{display:block;font-size:10px;color:#737d75;font-weight:600;margin-top:4px}.builder-pages{display:flex;justify-content:space-between;align-items:center;margin:24px 0 19px;font-size:12px;color:#667c6d}.builder-pages strong{color:var(--ink)}.print-primary{width:100%;font-size:14px}.builder-feedback{font-size:11px;min-height:10px;color:#a0644a}.print-tip{border-top:1px dashed #b7d1bf;margin-top:15px;display:flex;gap:10px;padding-top:17px}.print-tip>span{font-size:22px}.print-tip p{font-size:11px;color:#577362;margin:0}.activities{background:#fffef9}.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.activity-card{padding:25px;border-radius:25px;display:flex;flex-direction:column;align-items:start;min-height:385px}.activity-habitat{background:#e0eed9}.activity-bingo{background:#fce3b8}.activity-passport{background:#f3dce7}.activity-bubble{width:50px;height:50px;background:#fff9;display:grid;place-items:center;font-size:26px;border-radius:15px}.activity-number{font-size:10px;letter-spacing:1.5px;font-weight:900;color:#9d7469;margin-top:22px}.activity-card h3{font-size:26px;letter-spacing:-.8px;margin:9px 0}.activity-card p{font-size:13px;color:#707077;line-height:1.65;max-width:320px;margin:0 0 16px}.activity-card .btn{margin-top:auto}.activity-preview{margin:auto 0 20px;min-height:64px;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:12px;background:#ffffff73;border-radius:15px;font-size:28px}.preview-habitat span{font-size:15px;letter-spacing:1px;color:#a7a0a0}.preview-bingo{width:145px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px}.preview-bingo span{background:#fffd;border-radius:6px;font-size:18px;text-align:center}.preview-passport{font-size:26px}.preview-passport span{font-size:10px;letter-spacing:1px;font-weight:900}.color-link{display:flex;gap:16px;align-items:center;background:#fff5e5;border:1px solid #f2e4ca;border-radius:20px;margin-top:30px;padding:22px}.color-link-icon{font-size:37px}.color-link div{flex:1}.color-link strong{font-size:15px}.color-link p{font-size:12px;color:#807a80;margin:4px 0}.parent-section{background:#cce5ce;padding:67px 0}.parent-inner{display:grid;grid-template-columns:1fr 1fr;gap:65px}.parent-inner h2{font-size:43px;line-height:1.2;letter-spacing:-1.5px;margin:15px 0}.parent-inner h2 span{color:#e28c76}.parent-inner>div>p{font-size:14px;color:#657b68;max-width:460px}.parent-points{display:grid;gap:11px}.parent-points>div{display:flex;gap:15px;align-items:start;background:#ffffff72;padding:16px;border-radius:13px}.parent-points>div>span{color:#bd735e;font-size:15px;font-weight:900}.parent-points p{margin:0;font-size:12px;color:#5c7163}.footer{background:#fffef9;padding:33px 0}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-row p,.footer-row>a:last-child{font-size:11px;color:#7f7a82;max-width:300px}.footer .brand{font-size:20px}.footer .brand-paw{width:35px;height:35px;font-size:20px}.resources{border-top:1px solid #eee7d9;margin-top:25px;padding-top:15px;font-size:11px;color:#7c7681}.resources summary{cursor:pointer}.resources a{color:#a96150;text-decoration:underline}
#print-stage{display:none}
@media(max-width:1050px){.main-nav{gap:13px}.editor-shell{grid-template-columns:minmax(0,1fr) 280px}.card-gallery{grid-template-columns:repeat(2,1fr)}.picture-card-one{left:21%}}
@media(max-width:760px){.shell{width:calc(100% - 36px)}.nav{min-height:76px}.brand{font-size:20px}.nav-cta{font-size:11px;padding:10px}.main-nav{display:none}.print-hero{padding:45px 0 70px}.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy h1{font-size:clamp(47px,9vw,65px)}.hero-picture{height:345px;max-width:465px;width:100%;margin:30px auto 0}.picture-orb{width:360px;height:340px;max-width:95%}.picture-card-one{width:185px;height:200px;left:28%;top:46px}.picture-card-two{width:133px;height:154px}.picture-card-three{width:140px;height:145px}.strip{justify-content:center;flex-wrap:wrap;gap:9px;min-height:70px;font-size:9px}.strip b{display:none}.section-pad{padding:65px 0}.intro-row{display:block}.intro-row>p{max-width:600px}.editor-shell{grid-template-columns:1fr}.print-builder{position:static;order:-1}.builder-count{margin:16px 0}.builder-top h3{margin:0}.print-modes{grid-template-columns:repeat(3,1fr)}.print-modes label{padding:10px 8px}.activity-grid{grid-template-columns:1fr}.activity-card{min-height:305px}.parent-inner{grid-template-columns:1fr;gap:15px}.footer-row{flex-wrap:wrap}.color-link{flex-wrap:wrap}.color-link .btn{width:100%}}
@media(max-width:460px){.editor-main,.print-builder{padding:17px}.card-gallery{gap:9px}.preview-flip{height:182px}.flash-preview .card-front img{width:116px;height:125px}.flash-preview .card-front strong{font-size:14px}.flash-preview .card-back strong{font-size:15px}.flash-preview .card-back small{font-size:10px}.pack-list{gap:7px}.pack-pill{font-size:11px;padding:9px 10px}.print-modes{grid-template-columns:1fr}.print-modes label{align-items:center}.selection-bar{align-items:start}.selection-bar div{flex-direction:column;gap:1px}.hero-picture{margin-left:-6px}.picture-orb{left:50%}.picture-card-three{left:0}.intro-row h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*:after,*:before{transition:none!important;scroll-behavior:auto!important}}
@page{size:auto;margin:.34in}
@media print{
html,body{margin:0!important;padding:0!important;background:white!important;color:#252c36!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:"Trebuchet MS",Arial,sans-serif}
body>*:not(#print-stage){display:none!important}
#print-stage{display:block!important;position:static!important;margin:0!important;padding:0!important}
.print-sheet{height:9.75in;width:100%;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.13in;break-after:page;page-break-after:always}
.print-sheet:last-child{break-after:auto;page-break-after:auto}
.paper-card{border:2px dashed #9c9b9b;border-radius:.15in;background:#fff;min-width:0;min-height:0;padding:.15in;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}
.paper-front{background:var(--paper-color,#fff9e5)!important}
.paper-front:before{content:"";position:absolute;top:.21in;left:.21in;right:.21in;bottom:.21in;border:1.4px dashed rgba(255,255,255,.9);border-radius:17px}
.paper-card .paper-kicker{letter-spacing:.09em;color:#8c6961;font-size:9pt;font-weight:900;z-index:1}
.paper-front img{height:3in;max-height:65%;width:88%;object-fit:contain;z-index:1}
.paper-front h2{font-size:24pt;letter-spacing:-.6pt;margin:.07in 0;text-align:center;z-index:1}
.paper-front p{font-size:10pt;margin:0;z-index:1}
.paper-back{background:#fffdf8!important;padding:.25in;align-items:stretch;justify-content:start}
.paper-back h2{margin:.15in 0;font-size:24pt;text-align:center}
.paper-fact-label{font-size:9pt;font-weight:900;letter-spacing:.07em;color:#bf7860;margin-top:.19in}
.paper-back p{font-size:12pt;margin:.03in 0;line-height:1.5}
.paper-back .paper-fact{background:#f1f6ed!important;padding:.17in;border-radius:9px}
.paper-small{font-size:9pt!important;color:#747474}
.paper-back .paper-activity{font-size:10pt;color:#777;margin-top:auto;border-top:1px dashed #d5c9b9;padding-top:.1in}
.paper-empty{border:1px dashed #ddd;opacity:.2}
.worksheet-sheet{height:9.7in;width:100%;padding:.25in .2in;break-after:page;page-break-after:always}
.worksheet-sheet:last-child{break-after:auto;page-break-after:auto}
.worksheet-kicker{letter-spacing:2px;font-weight:900;color:#d17f66;font-size:10pt}
.worksheet-title{font-size:28pt;letter-spacing:-.8pt;margin:.14in 0 .05in}
.worksheet-instructions{font-size:12pt;color:#626b72;margin:.07in 0 .25in}
.worksheet-name{border-bottom:1px solid #aaa;display:inline-block;min-width:2.6in;margin-top:.05in}
.habitat-worksheet{display:grid;grid-template-columns:1fr 1fr;gap:.4in}
.match-column{display:grid;gap:.18in}
.match-row{height:1.1in;display:flex;align-items:center;gap:.14in;border:1.5px solid #dcd6ca;border-radius:.13in;padding:.08in;font-size:14pt;font-weight:900}
.match-row img{height:.85in;width:.85in;object-fit:contain}
.match-number{color:#b06e52}
.match-answer{font-size:15pt}
.match-answer .match-number{font-weight:900}
.answer-list{font-size:16pt;line-height:2.25}
.bingo-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.08in;height:7.5in}
.bingo-square{border:2px solid #9bbfa9;border-radius:.12in;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f7fff5!important;overflow:hidden;gap:.03in}
.bingo-square img{width:84%;height:75%;max-height:2in;object-fit:contain}
.bingo-square span{font-weight:900;font-size:12pt}
.bingo-square.free{background:#fff0c5!important;font-size:44pt}
.passport-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:.12in;height:7.6in}
.passport-box{border:2px dashed #b6cbaa;border-radius:.15in;background:#f6f9f2!important;padding:.15in;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:.07in}
.passport-box .paw{font-size:28pt;color:#b1b9ae}
.passport-box .dotted{border-bottom:2px dotted #b4b4b4;width:85%;height:.2in}
.passport-box small{font-size:9pt}
}


/* touch-ux-v3.css */
/* Hello, Animal! — mobile and tablet UX pass, shared across homepage /stories /printables */
@media screen {
  .touch-menu-toggle{display:none}
  :where(button,a,input,select){touch-action:manipulation}
  :where(a,button,input,select):focus-visible{outline:3px solid #8d66bf!important;outline-offset:3px}
}
@media screen and (max-width:960px){
  .site-header{position:relative;z-index:60}
  .site-header .nav{position:relative;gap:10px;min-height:72px;flex-wrap:nowrap}
  .site-header .brand{min-width:0;flex-shrink:1}
  .site-header .nav-cta{display:none!important}
  .site-header .main-nav{display:none!important}
  .site-header .touch-menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;min-width:98px;padding:9px 13px;border:2px solid #e6d9c6;
    border-radius:15px;background:#fffdfa;color:#303445;font:900 14px "Trebuchet MS",Verdana,sans-serif;
    line-height:1;white-space:nowrap;margin-left:auto;z-index:4
  }
  .touch-menu-icon{font-size:23px;line-height:1}
  .site-header .main-nav.touch-nav-open{
    display:flex!important;flex-direction:column;align-items:stretch;gap:3px;
    position:absolute;top:calc(100% - 2px);left:0;right:0;z-index:100;
    width:100%;max-height:min(72dvh,580px);overflow-y:auto;
    padding:12px;background:#fffdf8;border:2px solid #eadccd;
    border-radius:0 0 20px 20px;box-shadow:0 14px 26px rgba(40,38,52,.17);
  }
  .site-header .main-nav.touch-nav-open a{
    min-height:49px;display:flex;align-items:center;justify-content:flex-start;
    font:900 15px "Trebuchet MS",Verdana,sans-serif;
    padding:12px 15px;border-radius:12px;color:#41434f;white-space:normal;
    line-height:1.35;
  }
  .site-header .main-nav.touch-nav-open a:hover,
  .site-header .main-nav.touch-nav-open a:focus-visible,
  .site-header .main-nav.touch-nav-open a[aria-current="page"]{background:#f6e8dd;color:#ad634c}
  .site-header .main-nav.touch-nav-open a.touch-menu-cta{background:#e0f2e7;color:#3a6b4b;font-weight:900}
  .site-header .main-nav .touch-menu-cta{display:none!important}
  .site-header .main-nav.touch-nav-open .touch-menu-cta{display:flex!important}
  /* Tablet header + hero: keep artwork centered instead of squeezing into a narrow column. */
  .hero .hero-grid{grid-template-columns:1fr;min-height:0;gap:4px}
  .hero .hero-copy{padding:36px 0 12px}
  .hero .hero-visual{max-width:520px;width:100%;height:490px;transform:none!important;margin:0 auto;position:relative}
  .hero .hero-big-circle{width:min(94%,470px);height:auto;aspect-ratio:470/455;left:3%;top:24px}
  .hero .hero-ground{width:77%;left:11%;bottom:26px}
  .hero .hero-animal.hero-lion{left:28%;top:28%;max-width:55%}
  .hero .hero-animal.hero-elephant{left:1%;top:46%;max-width:40%}
  .hero .hero-animal.hero-penguin{right:0;top:17%;max-width:40%}
  .hero-visual .speech-one{left:25%;top:21%}
  .hero-visual .speech-two{right:0;top:67%}
  .game-card .game-illustration{pointer-events:none;opacity:.3}
  .game-card h3,.game-card p,.game-card .btn{position:relative;z-index:3}
  .filter-bar{scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-bottom:16px}
  .filter-bar .filter{scroll-snap-align:start;min-height:46px}
  .color-workspace .color-choice{min-height:52px}
  .palette .crayon{width:47px;height:47px;min-width:47px;min-height:47px;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
  .palette .crayon.selected{box-shadow:0 0 0 3px #424459}
  .palette{gap:11px;justify-content:flex-start}
  .drawing-board{touch-action:manipulation;max-width:100%;-webkit-user-select:none;user-select:none}
  .drawing-board svg{max-width:100%}
  .color-toolbar .btn,.color-buttons .btn,.color-more,.color-surprise{min-height:48px}
  .daily-activity .btn,.daily-sound-controls .btn{min-height:48px}
  .popup-close{height:48px;width:48px;top:10px;right:10px;font-size:18px}
  .popup{max-height:calc(100dvh - 18px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .popup-game .option,.real-sound-game .option,.sound-hint-button{min-height:51px}
  .popup-game .listen-now,.popup-game .btn{min-height:48px}
  .memory-tile{min-height:80px;touch-action:manipulation}
  /* Story reading controls always remain tappable, including long story pages. */
  .story-dialog{max-height:calc(100dvh - 16px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .reader-close{height:48px;width:48px;min-width:48px;font-size:18px}
  .read-aloud-btn,.reader-controls .btn,.reader-footer-row .btn{min-height:48px}
  .choice-button{min-height:76px}
  .quiz-option,.mood-filter{min-height:49px}
  /* Printing settings and flashcard selectors are parents' touch controls. */
  .pack-pill{min-height:47px;display:inline-flex;align-items:center;gap:2px}
  .selection-bar button{min-height:47px;padding:11px 9px}
  .select-label{min-height:49px;cursor:pointer}
  .select-label input{min-width:22px;min-height:22px}
  .print-modes label{min-height:57px;align-items:center}
  .print-modes label input{width:22px;height:22px;min-width:22px;margin-top:0}
  .print-primary,.activity-card .btn,.color-link .btn,.print-builder .btn{min-height:49px}
}
@media screen and (min-width:761px) and (max-width:960px){
  .editor-shell{grid-template-columns:1fr}
  .print-builder{position:static;order:-1}
  .card-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .hero-copy{text-align:left}
  .hero .hero-grid{max-width:750px;margin:auto}
}
@media screen and (max-width:760px){
  .hero .hero-visual{width:min(100%,430px);height:clamp(320px,100vw,410px);margin:6px auto 0!important;transform:none!important}
  .hero .hero-big-circle{width:100%;max-width:400px;height:auto;aspect-ratio:470/455;left:0;top:18px}
  .hero .hero-ground{width:82%;left:8%;bottom:17px}
  .hero .hero-animal.hero-lion{width:clamp(185px,53vw,230px);height:clamp(184px,52vw,225px);left:27%;top:30%;max-width:60%}
  .hero .hero-animal.hero-elephant{width:clamp(125px,35vw,160px);height:clamp(120px,34vw,150px);left:1%;top:47%;max-width:42%}
  .hero .hero-animal.hero-penguin{width:clamp(125px,35vw,155px);height:clamp(119px,34vw,149px);right:0;top:17%;max-width:42%}
  .hero-visual .speech-one{left:28%;top:16%}
  .hero-visual .speech-two{right:2%;top:71%}
  .hero .hero-copy{padding-bottom:8px}
  .game-card .game-illustration{right:-14%;opacity:.23}
  .game-card{min-height:380px}
  .color-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .color-workspace .color-choice{padding:10px 11px;font-size:12px;justify-content:flex-start;gap:7px;text-align:left;min-width:0}
  .color-choices .color-choice-picture{width:28px;height:28px}
  .color-main{padding:15px}
  .drawing-board{height:clamp(270px,78vw,385px)}
  .popup-game{width:calc(100% - 16px);max-height:calc(100dvh - 14px)}
  .popup-game .game-content{padding:44px 18px 22px}
  .popup-game .question{font-size:20px!important}
  .popup-game .score-pips{gap:5px}
  .popup-game .score-pips span{width:36px}
  .story-dialog{width:calc(100% - 12px);border-radius:18px}
  .story-dialog .reader-topbar{padding:10px 13px;min-height:60px}
  .story-dialog .reader-content{padding:14px 16px 20px}
  .story-dialog .reader-picture{min-height:185px}
  .story-dialog .scene-friend{height:180px}
  .story-dialog .scene-partner{width:92px;height:94px;bottom:8px}
  .story-dialog .reader-story-text{padding:17px 18px}
  .story-dialog .reader-story-text h3{font-size:26px}
  .story-dialog .reader-story-text p{font-size:17px;line-height:1.65}
  .story-dialog .reader-controls{position:sticky;bottom:0;z-index:5;background:#fffefa;gap:8px;padding:12px 3px;box-shadow:0 -7px 15px #fffefaef;margin-top:10px}
  .story-dialog .reader-controls .btn,.story-dialog .read-aloud-btn{flex:1 1 auto;padding:10px}
  .story-dialog .reader-controls .btn{font-size:12px}
  .story-dialog .reader-progress p{font-size:10px}
  .story-dialog .choice-grid{gap:10px}
  .story-dialog .choice-button{padding:15px;font-size:15px}
  .editor-shell{grid-template-columns:1fr}
  .print-builder{position:static;order:-1}
  .card-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .print-modes label{font-size:13px}
  .pack-list{gap:9px}
  .pack-pill{white-space:normal}
  .selection-bar{align-items:center}
  .activity-grid .activity-card{min-width:0}
}
@media screen and (max-width:420px){
  .site-header .brand{font-size:18px}
  .site-header .brand-paw{width:36px;height:36px;flex-shrink:0}
  .site-header .touch-menu-toggle{min-width:89px;min-height:48px;font-size:13px;padding:8px 10px}
  .hero h1{font-size:clamp(39px,11vw,49px);overflow-wrap:break-word}
  .hero .hero-visual{width:100%!important;margin:0 auto!important;height:clamp(310px,96vw,375px)!important;transform:none!important}
  .hero .hero-animal.hero-lion{width:54%;height:auto;aspect-ratio:1;left:28%;top:28%}
  .hero .hero-animal.hero-elephant{width:38%;height:auto;aspect-ratio:1.03;left:0;top:48%}
  .hero .hero-animal.hero-penguin{width:36%;height:auto;aspect-ratio:1.03;right:0;top:17%}
  .hero-visual .speech-one{left:17%;top:20%}
  .hero-visual .speech-two{right:0;top:74%}
  .filter-bar{margin-inline:-3px;padding-right:20px}
  .animal-grid{gap:10px}
  .game-card{padding:25px;min-height:366px}
  .game-card h3{font-size:clamp(31px,8vw,42px)}
  .game-extra .game-extra-art{opacity:.23;right:-14%}
  .game-content .option-grid{grid-template-columns:1fr}
  .popup-game .game-content{padding:49px 15px 20px}
  .popup-game .option{min-height:54px}
  .story-dialog .reader-progress p:last-child{display:none}
  .story-dialog .reader-dots span{width:19px}
  .story-dialog .reader-picture{min-height:165px}
  .story-dialog .scene-friend{height:160px}
  .story-dialog .scene-partner{width:77px;height:77px}
  .story-dialog .reader-story-text h3{font-size:23px}
  .story-dialog .reader-story-text p{font-size:16px;line-height:1.65}
  .story-dialog .reader-controls{gap:5px}
  .story-dialog .reader-controls .btn,.story-dialog .read-aloud-btn{font-size:11px;padding:10px 8px}
  .story-dialog .reader-controls .btn{min-width:75px}
  .story-dialog .reader-footer-row .btn{padding:10px 13px}
  .preview-flip{height:174px}
  .flash-preview .card-front img{max-height:110px}
  .selection-bar{gap:6px;flex-wrap:wrap}
  .selection-bar button{min-height:46px}
  .print-modes{grid-template-columns:1fr}
}
@media screen and (max-height:500px) and (max-width:960px){
  .site-header .main-nav.touch-nav-open{max-height:67dvh}
  .story-dialog{max-height:calc(100dvh - 6px)}
  .story-dialog .reader-picture{min-height:115px}
  .story-dialog .scene-friend{height:110px}
  .story-dialog .scene-partner{width:60px;height:60px}
  .story-dialog .reader-content{padding-block:10px}
}
@media screen and (prefers-reduced-motion:reduce){
  .game-card:hover,.animal-card:hover,.flash-preview:hover{transform:none!important}
}

/* touch-ux-v3-fix.css */
/* Keep the mobile-only Today's friend/story link completely hidden on desktop. */
@media screen and (min-width:961px){
 .site-header .main-nav .touch-menu-cta{display:none!important}
}
@media screen and (max-width:960px){
 .site-header .main-nav:not(.touch-nav-open) .touch-menu-cta{display:none!important}
 .site-header .main-nav.touch-nav-open .touch-menu-cta{display:flex!important}
}