/* Storybook detail layer for the three existing games. */
.reef-game-card > .reef-feedback{
  position:static;transform:none;left:auto;bottom:auto;width:100%;max-width:none;
  margin:12px 0;padding:12px 15px;min-height:48px;text-align:left;
  font-size:14px;line-height:1.6;border-radius:14px;box-shadow:none;
}
.reef-game-section .reef-safety{position:static;bottom:auto}
.reef-scene .reef-photo-label,.reef-scene.is-photo-trio .reef-photo-label{
  font-size:11px!important;line-height:1.4;letter-spacing:.03em;
}
.reef-progress{
  margin:17px 0 18px;padding:13px 16px;border:1px solid #b8d2d3;border-radius:15px;
  background:linear-gradient(105deg,#e4f8f2,#f4edff);color:#254d62
}
.reef-progress-copy{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px}
.reef-progress-copy strong{color:#214967}
.reef-progress-text{font-size:12px;color:#71406f;font-weight:800;font-variant-numeric:tabular-nums}
.reef-progress-track{height:9px;margin-top:9px;overflow:hidden;border-radius:9px;background:#d2d9e5}
.reef-progress-track span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#159b9a,#bb3479);transform:scaleX(0);transform-origin:left center}
.reef-notebook{
  position:relative;margin:16px 0 20px;padding:18px 19px 15px 22px;border:1px solid #d9c59a;
  border-left:6px solid #e0ab50;border-radius:5px 16px 16px 5px;
  background:repeating-linear-gradient(to bottom,#fff8e7 0,#fff8e7 29px,#e8d9b6 30px);
  box-shadow:0 8px 18px #28475a12;color:#31566a
}
.reef-notebook-heading{display:flex;align-items:center;gap:13px;margin-bottom:9px}
.reef-notebook-stamp{
  display:grid;place-items:center;width:47px;height:47px;border:1px solid #b87a56;border-radius:50%;
  color:#8c3e66;background:#ffecce;font-size:8px;line-height:1.1;text-align:center;font-weight:900;letter-spacing:.08em;transform:rotate(-8deg)
}
.reef-notebook-kicker{margin:0;color:#8d326e;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.reef-notebook-heading h4{margin:1px 0 0;color:#204966;font:normal 23px/1.1 Georgia,serif}
.reef-notebook-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;margin:0;padding:0;list-style:none}
.reef-notebook-list li{display:flex;gap:9px;align-items:baseline;min-height:30px;padding:5px 0;font-size:12px;line-height:1.45}
.reef-notebook-list .reef-notebook-empty{grid-column:1/-1;color:#59717a}
.reef-notebook-number{flex:none;color:#a42d69;font-size:10px;font-weight:900;letter-spacing:.04em}
.reef-notebook-list li:not(.reef-notebook-empty) .reef-notebook-number:before{content:""}
.reef-notebook-list li:not(.reef-notebook-empty){border-bottom:1px dotted #c8b891}
.reef-notebook-list li:not(.reef-notebook-empty):after{content:"";flex:none;width:6px;height:6px;margin-left:auto;border:1px solid #9b7545;border-radius:50%}
.reef-target.photo-target{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
  left:68%;top:40%;width:clamp(126px,17vw,158px);height:clamp(108px,14vw,128px);
  padding:8px 8px 6px;transform:translate(-50%,-50%);overflow:hidden;border:2px solid #fff8df;
  border-radius:14px;background:linear-gradient(145deg,#fffaf0,#e6f7ef);box-shadow:0 7px 17px #063d5070
}
.reef-target.photo-target:after{content:none}
.reef-target.photo-target img{display:block;width:100%;height:calc(100% - 19px);max-width:none;min-height:0;object-fit:contain;border-radius:7px}
.reef-photo-label{
  display:block;max-width:100%;padding:2px 7px;border-radius:10px;background:#fff8e9;color:#294e63;
  font:900 8px/1.25 "Trebuchet MS",Arial,sans-serif;letter-spacing:.06em;text-align:center;white-space:nowrap
}
.reef-target.photo-target:hover{transform:translate(-50%,-50%) scale(1.035)}
.reef-target.photo-target.photo-jelly{width:clamp(152px,21vw,184px);height:clamp(100px,13vw,116px);left:66%;top:39%}
.reef-target.photo-target.photo-coral{left:43%;top:31%;width:clamp(124px,16vw,150px)}
.reef-target.photo-target.photo-mollusk{left:77%;top:65%;width:clamp(136px,18vw,160px)}
.reef-target.photo-target.photo-habitat{left:68%;top:42%;width:clamp(150px,20vw,176px);height:clamp(110px,15vw,132px)}
.reef-target.photo-target.crevice-target{left:64%;top:74%;right:auto;bottom:auto;width:clamp(116px,15vw,138px);height:clamp(94px,12vw,108px)}
.reef-photo-backdrop{
  position:absolute;inset:0;z-index:-4;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 48%;opacity:.57;pointer-events:none
}
.reef-scene-photo-stamp{
  position:absolute;z-index:3;left:10px;top:10px;padding:4px 8px;border:1px solid #fff4c7;
  border-radius:12px;background:#fff8e9eF;color:#31566a;font-size:8px;font-weight:900;
  letter-spacing:.08em;line-height:1.35;pointer-events:none
}
.reef-observation-strip{
  position:absolute;z-index:3;top:8px;right:9px;display:grid;
  grid-template-columns:repeat(3,minmax(54px,68px));gap:4px;justify-content:end;max-width:77%;
  pointer-events:none
}
.reef-observation-heading{
  grid-column:1/-1;justify-self:end;padding:2px 6px;border-radius:8px;
  background:#163f58eF;color:#fff4cd;font-size:7px;font-weight:900;letter-spacing:.08em;line-height:1.4
}
.reef-observation-strip figure{
  min-width:0;margin:0;padding:3px;border:1px solid #fff4d8;border-radius:8px;
  background:#fff8e9;box-shadow:0 3px 8px #073d5066;text-align:center
}
.reef-observation-strip img{width:100%;height:39px;object-fit:contain;border-radius:4px;background:#dceff0}
.reef-observation-strip figcaption{padding-top:2px;color:#294e63;font-size:7px;font-weight:900;line-height:1.2}
.reef-scene.is-photo-trio .reef-food-zone{
  position:absolute;inset:24% 2% 18% 25%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;align-items:stretch;pointer-events:none
}
.reef-scene.is-photo-trio .reef-target.photo-target{
  position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;z-index:1;
  width:100%;height:100%;min-width:0;min-height:0;max-height:150px;padding:7px;
  transform:none;pointer-events:auto
}
.reef-scene.is-photo-trio .reef-target.photo-target:hover{transform:translateY(-2px)}
.reef-scene.is-photo-trio .reef-target.photo-target img{height:calc(100% - 20px)}
.reef-scene.is-photo-trio .reef-photo-label{font-size:clamp(7px,.8vw,9px)}
.reef-scene.is-photo-trio .comparison-jelly,.reef-scene.is-photo-trio .comparison-coral{left:auto;top:auto}
.reef-target.photo-target.comparison-jelly{left:50%;top:58%}
.reef-target.photo-target.comparison-coral{left:84%;top:72%}
.reef-target.photo-target.room-coral{left:82%;top:69%}
.reef-scene.is-photo-trio .reef-observation-strip{display:none}
.reef-scene.is-photo-trio .reef-scene-photo-stamp{left:10px;top:10px}
.reef-scene .reef-theo{left:2%;top:48%;width:clamp(82px,10vw,108px);height:clamp(100px,13vw,136px)}
.reef-scene .reef-theo.is-reaching{left:57%}
.reef-game-section .reef-scene:not(.is-photo-trio){background:linear-gradient(180deg,rgba(35,117,151,.18),rgba(9,64,89,.25)),linear-gradient(#58cbd3 0%,#158ca9 58%,#08718d 100%)}
.reef-game-section .reef-scene:not(.is-photo-trio) .reef-photo-backdrop{opacity:.52}
.reef-photo-backdrop{filter:saturate(.95)}
.reef-real-turtle{position:relative}
.reef-real-turtle:before{content:"";position:absolute;inset:5px;border:1px solid #ffffffa6;border-radius:11px;pointer-events:none}
.reef-real-turtle{
  display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.15fr);gap:18px;align-items:center;
  margin:17px 0;padding:13px;border:1px solid #acd3d2;border-radius:16px;
  background:linear-gradient(110deg,#e3f7ef,#edf0ff 58%,#fff0e6);color:#34596a
}
.reef-real-turtle img{width:100%;height:152px;object-fit:contain;border-radius:10px;background:#d8edf0}
.reef-real-kicker{margin:0 0 4px;color:#a32366;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.reef-real-turtle h4{margin:0 0 7px;color:#204966;font:normal 22px/1.1 Georgia,serif}
.reef-real-turtle p:last-child{margin:0;font-size:13px;line-height:1.55}
.reef-photo-credits{margin:12px 0 5px;padding:10px 13px;border:1px solid #c3d5d5;border-radius:12px;background:#fffaf1;color:#34596a;font-size:12px;line-height:1.55}
.reef-photo-credits summary{min-height:42px;display:flex;align-items:center;cursor:pointer;color:#075f7c;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.reef-photo-credits p{margin:3px 0 8px}
.reef-photo-credits ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 15px;margin:0;padding-left:17px}
.reef-photo-credits a{color:#075f7c;text-underline-offset:3px}
.game-panel .ocean-play{isolation:isolate}
.game-panel .litter{
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  width:82px;height:72px;padding:34px 4px 5px;border:2px solid #fff9d9;border-radius:17px 17px 13px 13px;
  color:#294c5a;background-color:#fff5dc;background-repeat:no-repeat;background-position:center 5px;background-size:28px 28px;
  font-family:"Trebuchet MS",Arial,sans-serif;font-size:10px;font-weight:900;line-height:1.1;letter-spacing:.02em;
  text-shadow:0 1px #fff;box-shadow:0 5px 13px #073b5155
}
.game-panel .litter:before{content:"";position:absolute;inset:3px;border:1px solid #ffffffa8;border-radius:12px;pointer-events:none}
.game-panel .litter-one{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 4h8v6l4 4v21H12V14l4-4z' fill='%23f4bd62' stroke='%23784950' stroke-width='2'/%3E%3Cpath d='M16 4h8v6h-8z' fill='%23e7e4f5' stroke='%23784950' stroke-width='2'/%3E%3Cpath d='M15 22h10' stroke='%23fff1c9' stroke-width='3'/%3E%3C/svg%3E")}
.game-panel .litter-two{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m8 11 21-4 4 22-22 4z' fill='%23ed9bbd' stroke='%23764968' stroke-width='2'/%3E%3Cpath d='m12 15 15-3m-13 8 15-3' stroke='%23fff4e4' stroke-width='2'/%3E%3C/svg%3E")}
.game-panel .litter-three{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 8h16v25H12z' rx='4' fill='%239bd9cc' stroke='%23427477' stroke-width='2'/%3E%3Cpath d='M12 12h16M12 28h16' stroke='%23fff4c9' stroke-width='2'/%3E%3C/svg%3E")}
.game-panel .litter-four{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 10q7-4 12 1 6-5 12-1l-4 24H12z' fill='%23c9b4eb' stroke='%23674f84' stroke-width='2'/%3E%3Cpath d='M9 15q11 5 22 0' fill='none' stroke='%23fdf5ff' stroke-width='2'/%3E%3C/svg%3E")}
.game-panel .litter-five{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 10h18l3 20H8z' fill='%23f3a883' stroke='%23764e57' stroke-width='2'/%3E%3Ccircle cx='20' cy='21' r='5' fill='none' stroke='%23fff3d4' stroke-width='3'/%3E%3C/svg%3E")}
.game-panel .litter-six{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 10h20l-3 23H13z' fill='%2398d0eb' stroke='%23415f79' stroke-width='2'/%3E%3Cpath d='M8 10h24M14 15h12' stroke='%23fff4dc' stroke-width='2'/%3E%3C/svg%3E")}
.game-panel .litter:hover:not(:disabled){transform:translateY(-2px);background-color:#fff9ea}
.game-panel .litter:disabled{opacity:0;visibility:hidden}
.cleanup-detail-board{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);gap:12px;margin-top:13px;
}
.cleanup-detail,.cleanup-checklist{
  min-width:0;padding:13px 15px;border:1px solid #4c98a5;border-radius:15px;
  background:linear-gradient(145deg,#104f68,#13465f);color:#e7f8ef
}
.cleanup-detail{min-height:91px}
.cleanup-detail-kicker,.cleanup-checklist h3{
  margin:0 0 5px;color:#ffd77b;font-size:10px;line-height:1.35;font-weight:900;letter-spacing:.13em;text-transform:uppercase
}
.cleanup-detail-copy{margin:0;font-size:12px;line-height:1.5}
.cleanup-checklist h3{font-size:10px}
.cleanup-checklist ol{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:0;padding:0;list-style:none}
.cleanup-checklist li{display:flex;align-items:center;gap:6px;min-width:0;color:#c9e7e8;font-size:10px;line-height:1.35}
.cleanup-checklist li:before{content:"";width:10px;height:10px;flex:none;border:1px solid #a8d6d1;border-radius:50%}
.cleanup-checklist li.is-found{color:#fff0c5}
.cleanup-checklist li.is-found:before{border-color:#ffd77b;background:#ffd77b;box-shadow:inset 0 0 0 2px #12526a}
.cleanup-progress{height:7px;margin-top:11px;overflow:hidden;border-radius:9px;background:#073b51}
.cleanup-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f8c85e,#ee8bac);transform:scaleX(0);transform-origin:left}
.cleanup-finish{grid-column:1/-1;padding:10px 13px;border:1px solid #d9bd62;border-radius:12px;background:#fff1c4;color:#354c56;font-size:12px;line-height:1.55}
.cleanup-finish[hidden]{display:none}
.cleanup-detail-copy strong{color:#fff2c5}
@media(max-width:700px){
 .game-panel .litter{width:67px;height:65px;padding-top:31px;font-size:9px;background-size:25px 25px}
 .cleanup-detail-board{grid-template-columns:1fr}
 .cleanup-checklist ol{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cleanup-detail{min-height:0}
 .reef-notebook-list{grid-template-columns:1fr}
 .reef-notebook-list li{min-height:27px}
 .reef-target.photo-target{width:clamp(116px,38vw,142px);height:108px;top:58%}
 .reef-target.photo-target.photo-jelly{width:clamp(140px,44vw,166px);height:96px;top:57%}
 .reef-target.photo-target.photo-habitat{width:clamp(136px,42vw,158px);height:108px;top:55%}
 .reef-target.photo-target.photo-mollusk{width:clamp(120px,38vw,140px);height:101px;left:76%;top:70%}
 .reef-target.photo-target.photo-coral{left:39%;top:48%;width:clamp(112px,36vw,134px);height:108px}
 .reef-target.photo-target.crevice-target{width:114px;height:91px;left:64%;top:74%}
 .reef-real-turtle{grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);gap:12px;padding:11px}
 .reef-real-turtle img{height:120px}
 .reef-real-turtle h4{font-size:19px}
 .reef-real-turtle p:last-child{font-size:12px}
 .reef-photo-credits ul{grid-template-columns:1fr}
 .reef-scene .reef-theo{left:2%;top:48%;width:78px;height:96px}
 .reef-scene .reef-theo.is-reaching{left:49%}
 .reef-scene-photo-stamp{left:8px;top:8px;font-size:7px}
 .reef-observation-strip{top:7px;right:7px;max-width:78%;grid-template-columns:repeat(3,minmax(44px,60px));gap:3px}
 .reef-observation-strip img{height:35px}
 .reef-observation-heading{font-size:6px}
 .reef-scene.is-photo-trio{height:390px}
 .reef-scene.is-photo-trio .reef-food-zone{inset:24% 2% 18% 28%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
 .reef-scene.is-photo-trio .reef-target.photo-target{max-height:none;padding:6px}
 .reef-scene.is-photo-trio .reef-target.photo-target img{height:calc(100% - 19px)}
 .reef-scene.is-photo-trio .reef-scene-photo-stamp{left:8px;top:8px}
 .reef-target.photo-target.comparison-jelly{left:50%;top:58%}
 .reef-target.photo-target.comparison-coral{left:83%;top:72%}
 .reef-target.photo-target.room-coral{left:82%;top:70%}
}
@media(max-width:390px){
 .game-panel .litter{width:59px;height:58px;padding:28px 2px 4px;background-size:22px 22px;font-size:8px}
 .cleanup-checklist ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reef-notebook{padding:14px 13px 12px}
 .reef-progress{padding:11px}
 .reef-progress-copy{font-size:12px}
 .reef-target.photo-target{width:110px;height:98px;padding:6px}
 .reef-target.photo-target.photo-jelly{width:134px;height:88px}
 .reef-target.photo-target.photo-habitat{width:132px;height:100px}
 .reef-target.photo-target.photo-mollusk{width:110px;height:94px}
 .reef-target.photo-target.crevice-target{width:104px;height:86px}
 .reef-real-turtle{grid-template-columns:1fr}
 .reef-real-turtle img{height:160px}
 .reef-scene.is-photo-trio{height:370px}
 .reef-scene.is-photo-trio .reef-food-zone{inset:25% 2% 17% 27%}
 .reef-observation-strip{max-width:76%;grid-template-columns:repeat(3,minmax(39px,54px))}
}
@media(prefers-reduced-motion:reduce){
 .reef-progress-track span,.cleanup-progress span{transition:none!important}
 .game-panel .litter{transition:none!important}
}