/* Original game layout, with the vocabulary arcade's simple raised controls.
   Day 2 slide accent: steel blue #4682B4. */
:root{
  --blue:#4682B4;--blue-deep:#326A98;--blue-dark:#204969;
  --blue-soft:#DDECF7;--sky:#EFF6FC;
  --grape:#4682B4;--grape-deep:#326A98;--grape-dark:#204969;--grape-soft:#E4EFF8;
  --ink:#142D44;--muted:#465F74;
}
html{background:#C8DEEF}
body{font-family:"Segoe UI",system-ui,sans-serif;font-size:19px;background:linear-gradient(160deg,#EDF6FD,#C8DEEF) fixed}
.wrap{max-width:960px;padding:24px 20px 36px}
#s-title.active{min-height:calc(100vh - 60px)}
.panel{border:2px solid #BDD5E8;box-shadow:0 7px 0 #ACC8DE,0 16px 30px #20496912;padding:24px}
h2{font-size:30px}
.btn{font-size:22px;padding:14px 30px;border-radius:16px;min-height:56px}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:disabled{opacity:.58}
button:focus-visible,summary:focus-visible{outline:4px solid #204969;outline-offset:4px}
.cover{max-width:700px;width:100%;margin:auto;text-align:center;padding:30px}
.day-label{font-size:17px;font-weight:800;color:var(--blue-deep);letter-spacing:.06em;margin:0 0 8px}
.cover h1{font-size:clamp(38px,6vw,62px);font-weight:900;line-height:1.1;color:var(--blue-dark);letter-spacing:-.035em}
.cover-pets{display:flex;justify-content:center;gap:22px;margin:24px auto;max-width:360px}
.cover-pet{width:calc(50% - 11px);background:white;padding:6px;border:2px solid #BCD3E5;border-radius:18px;box-shadow:0 6px 0 #AAC7DD;transform:rotate(-5deg);animation:pet-in .5s ease-out both}
.cover-pet:nth-child(2){transform:rotate(5deg);animation-delay:.1s}
.cover-pet svg{display:block;width:100%;border-radius:12px}
.cover-pet:hover{translate:0 -5px;transition:translate .2s}
.lede{font-size:22px;margin:18px auto 22px;max-width:480px;line-height:1.4}
.cover .btn{min-width:200px}
.tiny,footer{font-size:16px}
.tiny{margin:20px 0 0}
@keyframes pet-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
#s-howto .panel{margin:28px auto;max-width:840px}
.cap{font-size:20px;background:transparent;margin:12px auto 20px;padding:0}
.steps{gap:12px;margin-bottom:24px}
.step{border:2px solid #D5E5F2;padding:18px 12px}
.step p{font-size:20px;line-height:1.4}
.step .n{width:36px;height:36px;font-size:20px}
.step svg{height:100px;margin:10px auto}
.pill{font-size:18px}
.icon-btn{height:44px}
.info p{font-size:20px}
.info{padding:14px}
.tray{position:sticky;top:8px;z-index:3;padding:14px;margin-bottom:22px}
.tray h3{font-size:21px;margin-bottom:12px}
.tray h3 .ct{font-size:18px}
.slots{max-width:660px;margin:0 auto}
.slot{aspect-ratio:auto;height:110px}
.slot > svg{width:73px;height:80px;margin:0 auto}
.slot .lab{font-size:16px;padding:4px 0}
.slot .lab.cat,.lblb.cat{background:#AB5318}
.slot .lab.rabbit,.lblb.rabbit{background:#38711D}
.slot .x{width:26px;height:26px;font-size:20px}
.pool-h{font-size:20px}
.pool{grid-template-columns:repeat(4,1fr);gap:16px;max-width:730px;margin:0 auto 22px}
.photo{border:2px solid #BCD3E5;box-shadow:0 5px 0 #AAC7DD;padding:5px 5px 0;border-radius:16px}
.photo .n{font-size:17px;color:var(--ink);padding:6px 0}
.photo .new{font-size:16px;z-index:1}
.photo.used{opacity:.35}
.photo,.gobar{scroll-margin-top:205px}
.why-not{font-size:18px}
dialog.overlay{inset:0;margin:auto;border:0;border-radius:22px;width:360px;max-width:calc(100% - 32px);height:fit-content;max-height:calc(100% - 32px);padding:0;background:white;box-shadow:0 10px 0 #20496950,0 20px 70px #102C5060}
dialog.overlay[open]{display:block}
dialog.overlay::backdrop{background:#102C5077;backdrop-filter:blur(3px)}
.sheet{padding:22px;max-width:none;border:2px solid #BCD3E5}
.sheet h3{font-size:26px}
.sheet svg{width:190px}
.lblb{font-size:22px;min-height:56px}
.putback{font-size:18px;padding:12px;min-height:44px}
.tagline{font-size:16px;letter-spacing:.06em}
.inter p{font-size:21px}
.feat{font-size:18px}
.tests{gap:18px;margin:22px 0 28px}
.tcard{aspect-ratio:auto;height:295px}
.tcard .face{box-shadow:0 5px 0 #ACC8DE}
.tcard .back{padding:6px}
.tcard .back svg{width:100%;height:auto;min-height:0;flex:1;object-fit:cover}
.tcard .said{font-size:18px;line-height:1.2;margin-top:8px;min-height:43px}
.tcard .said small{display:block;font-size:16px;margin-top:4px;color:#992039}
.tcard .blind{display:none!important}
.tcard .res{width:36px;height:36px;font-size:22px}
.tcard.ok .back{outline:3px solid var(--good)}
.accbar .lab,.verdict{font-size:21px}
.verdict{min-height:32px}
.learned .big{font-size:28px}
.map{font-size:19px}
.callout p{font-size:21px}
.extra{margin:18px 0;border:2px solid #D4E3EF;border-radius:14px;padding:12px 16px;background:#F5F9FD}
.extra summary{font-size:18px;font-weight:700;cursor:pointer;min-height:28px}
.extra[open] summary{margin-bottom:14px}
.ftable{font-size:18px}
.ftable th{font-size:16px;letter-spacing:0}
.model-note{font-size:17px;color:var(--muted)}
.bigline{font-size:22px}
.word b{font-size:19px}
.word span{font-size:18px}
.bars .row{font-size:20px}
@media(max-width:640px){
  .wrap{padding:16px 14px 28px}
  .panel{padding:20px 16px}
  .cover{padding:26px 18px}
  .cover-pets{gap:16px;max-width:300px}
  .cover-pet{width:calc(50% - 8px)}
  .steps{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:36px 76px 1fr;align-items:center;gap:12px;text-align:left;padding:14px 10px}
  .step svg{width:76px;height:70px;margin:0}
  .step .n{margin:0}
  .step p{font-size:19px}
  .pool{grid-template-columns:repeat(2,1fr);gap:14px;max-width:460px}
  .slots{grid-template-columns:repeat(3,1fr);gap:10px}
  .slot{height:54px;border-width:2px}
  .slot.full{display:flex;align-items:center;justify-content:center;gap:3px;border-width:2px}
  .slot > svg{width:32px;height:36px;margin:0;border-radius:5px;flex:none}
  .slot .lab{position:static;font-size:16px;padding:0;background:transparent;color:var(--ink)}
  .slot .lab.cat,.slot .lab.rabbit{background:transparent}
  .slot .x{width:20px;height:20px;font-size:16px;right:-6px;top:-6px}
  .tests{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .tcard{height:265px}
  .tcard .said{font-size:17px;min-height:45px}
  .tcard .said small{font-size:16px}
  .learned{gap:8px;padding:12px}
  .learned .big{font-size:24px}
  .bars .row{grid-template-columns:82px 1fr 54px;font-size:18px}
  .ftable td,.ftable th{padding:8px 4px}
  .callout p{font-size:20px}
}
@media(max-width:360px){
  .slot > svg{width:22px;height:25px}
  .step{grid-template-columns:30px 1fr}
  .step svg{display:none}
  .step .n{width:30px;height:30px}
  .tcard{height:230px}
  .tcard .said{font-size:16px}
  .day-label{font-size:16px}
}

/* Clay v2 recovery: the same pet sprites and interaction, with raster art throughout. */
.pet-photo{display:block;position:relative;width:100%;aspect-ratio:100/110;overflow:hidden;border-radius:inherit;background-image:url('/play/pet-detector/assets/scenes-clay.webp');background-size:200% 100%;background-position:var(--scene) center;isolation:isolate}
.pet-sprite{position:absolute;display:block;left:8%;bottom:4.54545%;width:84%;background-image:url('/play/pet-detector/assets/pets-clay.webp');background-repeat:no-repeat}
.cover-pet>.pet-photo{border-radius:12px}
.photo>.pet-photo{border-radius:10px}
.slot>.pet-photo{width:73px;height:80px;aspect-ratio:auto;margin:0 auto;border-radius:7px}
.sheet .pet-photo{width:180px;margin:0 auto 14px;border-radius:12px;box-shadow:0 4px 0 #BDD5E8}
.icon-btn.b-sound{width:auto;padding:0 13px;font-size:16px;font-weight:750;white-space:nowrap}
.info-mark,.status-mark{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;font-size:21px;font-weight:900;color:#fff;background:var(--blue-deep)}
.callout.good .status-mark{background:var(--good)}
.callout.blind .status-mark{background:var(--bad)}
.callout.warn .status-mark{background:#A96300}
.step-art{display:flex;gap:8px;align-items:center;justify-content:center;height:124px;margin:10px auto 14px}
.example-card{width:83px;flex:none;background:white;border:2px solid #BDD5E8;padding:3px;border-radius:10px;box-shadow:0 3px 0 #ACC8DE;overflow:hidden}
.example-card .pet-photo{border-radius:6px}
.example-card b{display:block;font-size:15px;line-height:1.4;margin:3px -3px -3px;color:#fff}
.example-card b.cat,.fly-label.cat{background:#AB5318}
.example-card b.rabbit,.fly-label.rabbit{background:#38711D}
.example-card b.question-label{background:var(--blue-deep)}
.step-arrow{font-size:25px;font-weight:800;color:var(--blue-deep)}
.training-example{width:60px}
.clay-device{position:relative;width:100%;height:100%}
.clay-device img{width:100%;height:100%;object-fit:contain;display:block}
.device-caption{position:absolute;left:17%;right:20%;top:43%;transform:translateY(-50%);text-align:center;font-size:clamp(13px,1.6vw,18px);font-weight:850;color:var(--blue-dark);line-height:1.25}
.step-art>.clay-device{width:88px;flex:none;height:124px}
.step-art .device-caption{font-size:14px}
#s-howto .panel{margin:10px auto}
#s-howto .cap{font-size:19px;max-width:670px;line-height:1.45;margin:12px auto 18px}
.step p{font-size:19px}
.machine-stage{position:relative;aspect-ratio:560/230;max-width:560px;margin:14px auto 18px}
.training-device{position:absolute;left:65%;top:0;width:32%;height:100%}
.training-arrow{position:absolute;left:47%;top:32%;font-size:44px;font-weight:800;color:var(--blue-deep)}
.machine-stage .fly{position:absolute;width:11.8%;border:2px solid #BDD5E8;border-radius:8px;background:#fff;padding:3px;box-shadow:0 3px 0 #ACC8DE;transition:left .7s cubic-bezier(.5,0,.8,.6),top .7s cubic-bezier(.5,0,.8,.6),transform .7s,opacity .7s}
.fly .pet-photo{border-radius:4px}
.fly-label{display:block;border-radius:0 0 4px 4px;color:#fff;font-size:clamp(9px,1.1vw,12px);font-weight:800;text-align:center}
.feature-preview{display:flex;gap:5px;width:120px;flex:none}
.feature-preview>.pet-photo,.feature-preview>.scene-photo{width:calc(50% - 2.5px);aspect-ratio:100/110;border-radius:7px}
.scene-photo{display:block;aspect-ratio:100/110;background-image:url('/play/pet-detector/assets/scenes-clay.webp');background-size:200% 100%;border-radius:7px}
.value-picture{display:block;flex:none;width:40px;overflow:hidden;border-radius:6px}
.value-picture>.pet-photo,.value-picture>.scene-photo{width:100%;aspect-ratio:100/110}
.rating-star{display:block;color:#C4D5E2;font-size:62px;line-height:1.1;text-shadow:0 3px 0 #A2B8C8}
.rating-star.on{color:#FFC940;text-shadow:0 3px 0 #B98713;animation:starpop .5s cubic-bezier(.2,1.6,.4,1) both}
.rating-star:nth-child(2){animation-delay:.18s}.rating-star:nth-child(3){animation-delay:.36s}
.tests{gap:14px;margin:16px auto 20px;max-width:760px}
.tcard{height:clamp(185px,28vh,240px)}
.tcard .back>.pet-photo{flex:1;min-height:0;width:auto;aspect-ratio:100/110;align-self:center}
.tcard .said{flex:none;font-size:17px;min-height:43px;margin-top:6px}
.tcard .said small{font-size:15px}
.pool{max-width:650px;gap:12px;margin-bottom:16px}
.pool.round-two{max-width:780px;grid-template-columns:repeat(6,1fr)}
.tray{margin-bottom:16px}
.tray h3{margin-bottom:9px}
.slot{height:100px}
.slot>.pet-photo{height:72px;width:65.45px}
.slot .lab{padding:2px 0}
.pool-h{margin-bottom:8px;font-size:19px}
.why-not{font-size:17px}
.gobar{gap:8px}
@media(min-width:641px) and (max-height:800px){
  .wrap{padding-top:14px;padding-bottom:24px}
  .pool{max-width:560px}.pool.round-two{max-width:730px}
  .info{padding:9px 12px}.info p{font-size:18px}
  .photo .n{font-size:16px;padding:3px 0}
  .tray{padding:10px 12px}.tray h3{font-size:19px;margin-bottom:7px}
  .slot{height:82px}.slot>.pet-photo{width:51px;height:56px}
  .slots{max-width:570px}
  .btn{font-size:20px;min-height:50px;padding:11px 26px}
  .panel{padding:20px}
  #s-test .panel{padding:14px 20px}
  #s-test .tagline{font-size:14px;padding:3px 12px;margin-bottom:5px}
  #s-test h2{font-size:26px!important;line-height:1.2}
  #s-test p.muted{font-size:17px;line-height:1.3}
  .tests{gap:12px;max-width:680px;margin:10px auto 12px}
  .tcard{height:clamp(162px,24.5vh,190px)}
  .accbar{margin-bottom:7px}.accbar .lab{font-size:18px}
  .accbar .track{height:16px}
  .verdict{font-size:18px;min-height:27px;margin-bottom:8px}
}
@media(max-width:640px){
  .step{grid-template-columns:32px 122px 1fr;gap:9px}
  .step-art{width:122px;height:96px;margin:0;gap:4px}
  .step-art .example-card{width:56px;padding:2px;border-radius:7px}
  .step-art .example-card b{font-size:12px}
  .step-art .training-example{width:40px}
  .step-art>.clay-device{width:63px;height:96px}
  .step-art .device-caption{font-size:11px}
  .step-arrow{font-size:18px}
  .step p{font-size:17px}
  .step .n{width:30px;height:30px;font-size:17px}
  .pool,.pool.round-two{grid-template-columns:repeat(3,1fr);gap:10px}
  .photo .n{font-size:15px}
  .photo .new{font-size:13px;padding:2px 6px}
  .tray{padding:10px}.tray h3{font-size:18px}.tray h3 .ct{font-size:15px}
  .slot{height:54px}.slot>.pet-photo{width:32px;height:36px;margin:0}
  .tcard{height:240px}
  .feature-preview{width:86px}
  .learned{align-items:flex-start}
  .learned .big{font-size:23px}
  .map{font-size:17px}
}
@media(max-width:410px){
  .step{grid-template-columns:26px 104px 1fr;padding:12px 7px;gap:6px}
  .step-art{width:104px}.step-art .example-card{width:48px}
  .step-art .training-example{width:34px}.step-art>.clay-device{width:54px}
  .step p{font-size:16px}.step .n{width:26px;height:26px;font-size:16px}
  .slot .lab{font-size:14px}.slot>.pet-photo{width:26px;height:29px}
  .photo .n{font-size:14px}
  .tcard{height:215px}
}