/* Idea Lab (/lab): small ideas for Artache's games, each with a thirty-second toy and a heart. Same sea and shore as the homepage. */
.lab-hero{padding-block:72px 200px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end}
.lab-title{font-size:clamp(54px,10vw,128px);gap:0}
.lab-title .sp{width:.28em}
.lab-title .lab{color:var(--b3)}
.lab-hero .sub{max-width:32ch}
.lab-how ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.lab-how li{counter-increment:s;position:relative;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border:1px solid rgba(26,90,166,.12);border-radius:12px;padding:14px 16px 14px 56px;display:flex;flex-direction:column;box-shadow:0 14px 34px -24px rgba(26,90,166,.6);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lab-how li:hover{transform:translateX(-4px)}
.lab-how li::before{content:"0" counter(s);position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:13px;color:var(--red)}
.lab-how b{font-family:var(--display);font-size:18px}
.lab-how span{color:var(--soft);font-size:14px}
@media (max-width:820px){.lab-hero{grid-template-columns:1fr;padding-block:56px 170px}}

/* Leader strip, overlapping the shoreline */
.lab-board{position:relative;z-index:2;margin-top:-56px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--abyss);color:var(--sun);border-radius:14px;padding:16px 20px;box-shadow:0 20px 40px -24px rgba(19,34,75,.7)}
.lb-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--b1)}
#leader{font-family:var(--display);font-weight:600;font-size:18px}
#leader a{border-bottom:1px solid color-mix(in srgb,var(--sun) 40%,transparent)}
#leader .lh{color:var(--red);margin-right:6px}

.group-note{max-width:62ch;color:var(--soft);font-size:17px;margin:-8px 0 22px}
.group-note em{font-family:"Caveat",cursive;font-style:normal;font-size:1.35em;color:var(--ink)}
.ideas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.idea{position:relative;padding:0 0 18px;overflow:hidden;gap:10px;transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s}
.idea:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(26,90,166,.65)}
.idea>.tag{margin:6px 20px 0}
.idea h3{font-family:var(--display);font-size:24px;line-height:1.15;margin:0 20px;text-wrap:balance}
.idea .pitch{margin:0 20px;color:var(--soft);font-size:16px;max-width:52ch}
.idea.lead{outline:2px solid var(--red);outline-offset:-2px}
.idea.lead::after{content:"Most loved";position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:99px;background:var(--red);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

@media (min-width:860px){
  .idea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"pic toy" "tag toy" "h3 toy" "pitch toy" "foot toy" "game game";column-gap:4px;row-gap:10px;padding-bottom:20px}
  .idea-pic{grid-area:pic}.idea>.tag{grid-area:tag}.idea h3{grid-area:h3}.idea .pitch{grid-area:pitch}.idea-foot{grid-area:foot;align-self:end}.from-game{grid-area:game}
  .idea .toy{grid-area:toy;margin:20px 20px 0 0;min-height:300px}
  .idea.lead::after{right:auto;left:12px}
}

/* Picture strip: the GPT picture when it exists, else a drawn stand-in per idea */
.idea-pic{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--abyss)}
.idea-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.idea-pic.has-img img{opacity:1}
.idea-pic::before{z-index:0}.idea-pic img{z-index:1}
.idea-pic::before{content:"";position:absolute;inset:0}
.idea-pic.has-img::before{display:none}
.idea-pic[data-art=light]::before{background:radial-gradient(60% 90% at 50% 105%,#ffcf73 0,#d9822b 22%,transparent 60%),linear-gradient(180deg,#0b1424,#1a2238)}
.idea-pic[data-art=no]::before{background:radial-gradient(circle at 75% 30%,rgba(255,255,255,.5),transparent 40%),repeating-linear-gradient(-8deg,transparent 0 18px,rgba(60,40,20,.08) 18px 19px),linear-gradient(180deg,#efe2c4,#d8c39a)}
.idea-pic[data-art=handshake]::before{background:radial-gradient(22% 60% at 50% 50%,#ffcf9a,transparent 70%),radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent),radial-gradient(1px 1px at 85% 70%,#fff 50%,transparent),linear-gradient(120deg,#0b1736,#0f4c5c)}
.idea-pic[data-art=night]::before{background:radial-gradient(40% 50% at 85% 100%,rgba(122,20,32,.9),transparent 70%),radial-gradient(10% 18% at 30% 35%,rgba(255,200,120,.6),transparent),linear-gradient(180deg,#0c0a18,#1d1430)}
.idea-pic[data-art=rewind]::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),radial-gradient(40% 70% at 50% 50%,rgba(215,24,42,.5),transparent 70%),#07070a}

/* The toy: a small dark stage, tap or click to play. Each toy draws inside it */
.toy{position:relative;margin:4px 20px 0;border-radius:10px;overflow:hidden;min-height:220px;background:#0d1322;color:#e8ecf4;font-family:var(--mono);font-size:13px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.toy .start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 60%,rgba(140,200,242,.15),transparent 70%),#0d1322;border:0;color:#e8ecf4;font:inherit;width:100%;cursor:pointer;z-index:3}
.toy .start b{font-family:var(--display);font-size:18px;letter-spacing:.01em}
.toy .start span{color:#8ea3c4}
.toy .start i{width:46px;height:46px;border-radius:50%;background:var(--sun);display:grid;place-items:center;color:var(--ink);font-style:normal;font-size:18px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.toy .start:hover i{transform:scale(1.12)}
.toy .hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8ea3c4;z-index:2;pointer-events:none}
.toy .hud b{color:var(--red)}
.toy .msg{position:absolute;left:12px;right:12px;bottom:12px;font-size:13px;line-height:1.45;color:#e8ecf4;z-index:2;pointer-events:none;text-shadow:0 1px 6px #000}
.toy .again{position:absolute;right:10px;bottom:10px;z-index:4;background:none;border:1px solid #2f3b57;border-radius:99px;color:#e8ecf4;font:inherit;font-size:11px;padding:6px 12px;cursor:pointer}
.toy .again:hover{border-color:var(--red)}

/* Toy: warm light */
.t-light canvas{display:block;width:100%;height:100%;min-height:240px;cursor:crosshair}
/* Toy: say no (ContraryQuest), storybook paper */
.t-no{min-height:250px;padding:38px 14px 14px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#f4ead2,#e6d5ae);color:#2a2116;font-family:Georgia,serif}
.t-no .hud{color:#7a6545}
.t-no .who{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7a6545}
.t-no .ask{font-size:17px;line-height:1.4}
.t-no .out{font-style:italic;font-size:15px;line-height:1.4;color:#5a4528;min-height:1.4em}
.t-no .ch{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.t-no .ch button{text-align:left;border:1.5px solid #2a2116;border-radius:3px;background:#fffaf0;color:#2a2116;font:15px Georgia,serif;padding:8px 12px;cursor:pointer;box-shadow:2px 2px 0 #2a2116;transition:transform .15s,box-shadow .15s}
.t-no .ch button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #2a2116}
.t-no .again{border-color:#2a2116;color:#2a2116}
/* Toy: read the dream (AI-ICE) */
.t-ice{min-height:270px;padding:36px 12px 12px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(60% 50% at 50% 30%,rgba(255,207,154,.18),transparent 70%),linear-gradient(160deg,#0b1736,#0f4c5c);color:#eef4ff}
.t-ice .dream{display:flex;align-items:center;gap:10px}
.t-ice .orb{width:40px;height:40px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff,#ffcf9a 40%,rgba(255,207,154,0) 72%);animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}
.t-ice .meter{flex:1;display:flex;flex-direction:column;gap:4px}
.t-ice .meter span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a9c4e0}
.t-ice .bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.t-ice .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffcf9a,#fff3e2);border-radius:99px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.t-ice .hint{font-family:var(--body);font-size:14px;font-style:italic;color:#ffe2c2;min-height:2.6em;line-height:1.35}
.t-ice .hand{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.t-ice .hand button{border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(10,20,45,.6);color:#eef4ff;font:inherit;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s,border-color .2s}
.t-ice .hand button:hover{transform:translateY(-3px);border-color:#ffcf9a}
.t-ice .hand button b{font-family:var(--display);font-size:22px;color:#ffcf9a}
.t-ice .hand button span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.t-ice .hand button i{font-style:normal;font-size:18px}
/* Toy: a solo night (Overgame) */
.t-ovg{min-height:280px;padding:36px 12px 12px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#0c0a18,#1d1430);color:#efe8ff}
.t-ovg .zones{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.t-ovg .pl{border-radius:8px;padding:7px 6px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:11px;transition:background .4s,border-color .4s}
.t-ovg .pl b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.01em;margin-bottom:2px}
.t-ovg .pl.z-green{border-color:#3d8f5a}.t-ovg .pl.z-amber{border-color:#d9a33b}.t-ovg .pl.z-red{border-color:#c0283a;background:rgba(122,20,32,.45)}
.t-ovg .pl.me{box-shadow:0 0 0 1px #efe8ff inset}
.t-ovg .pl.pick{cursor:pointer}
.t-ovg .pl.pick:hover{background:rgba(255,255,255,.12)}
.t-ovg .line{font-size:13px;line-height:1.45;color:#d7cdea;min-height:2.9em}
.t-ovg .ch{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.t-ovg .ch button{flex:1;min-width:110px;border:1px solid #5a3a6a;border-radius:8px;background:rgba(255,255,255,.04);color:#efe8ff;font:inherit;padding:10px;cursor:pointer}
.t-ovg .ch button:hover{border-color:#efe8ff}
.t-ovg .ch button.break:hover{border-color:#c0283a}
/* Toy: rewind (DeadenD) */
.t-rewind{background:#07070a;padding:40px 12px 12px;min-height:240px;display:flex;flex-direction:column;gap:10px}
.t-rewind .reel{display:flex;gap:4px}.t-rewind .reel i{flex:1;height:4px;background:#1c2030}.t-rewind .reel i.on{background:#c9cfdb}
.t-rewind .txt{font-family:Georgia,serif;font-style:italic;font-size:16px;line-height:1.45;color:#e8ecf4}
.t-rewind .ch{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.t-rewind .ch button{text-align:left;background:none;border:1px solid #2a3046;color:#e8ecf4;font:inherit;padding:9px 12px;cursor:pointer}
.t-rewind .ch button::before{content:"› ";color:var(--red)}
.t-rewind .ch button:hover{border-color:var(--red)}
.t-rewind .ch button.known{border-color:#7a2a35}
.t-rewind .ch button.known::after{content:" · you remember";color:#8a6b72;font-size:11px}
.t-rewind .dead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#07070a;text-align:center;padding:16px;z-index:3}
.t-rewind .dead h4{margin:0;font:700 52px/1 Georgia,serif;color:var(--red);transform:skewX(-6deg);animation:jolt .45s steps(3) 1}
.t-rewind .dead p{margin:0;font-family:Georgia,serif;font-style:italic;color:#c9cfdb;max-width:28em}
.t-rewind .dead button{background:none;border:1px solid var(--red);color:#fff;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
@keyframes jolt{0%{transform:translateX(-12px) skewX(-6deg)}50%{transform:translateX(8px) skewX(-10deg)}100%{transform:translateX(0) skewX(-6deg)}}
/* Heart */
.idea-foot{display:flex;align-items:center;gap:12px;margin:6px 20px 0}
.heart{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--red) 45%,transparent);background:#fff;color:var(--ink);font:600 15px var(--body);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
.heart .h{color:transparent;-webkit-text-stroke:1.5px var(--red);font-size:17px;line-height:1;transition:color .2s}
.heart:hover{transform:scale(1.06)}
.heart[aria-pressed=true]{background:color-mix(in srgb,var(--red) 10%,#fff);border-color:var(--red)}
.heart[aria-pressed=true] .h{color:var(--red);animation:beat .9s ease-out 1}
.heart .n{font-family:var(--mono);font-size:13px;min-width:1ch}
.idea-foot .why{font-size:13px;color:var(--soft)}
@keyframes beat{0%{transform:scale(1)}25%{transform:scale(1.45)}50%{transform:scale(.95)}100%{transform:scale(1)}}

.lab-rules .card{max-width:760px}
.lab-rules h3{font-family:var(--display);margin:0;font-size:22px}
.lab-rules a{color:var(--b3);border-bottom:1px solid currentColor}
/* From the game: cleared screenshots and art from each project's pack */
.from-game{margin:14px 20px 0;padding-top:12px;border-top:1px dashed rgba(19,34,75,.18)}
.from-game figcaption{font-size:12px;line-height:1.45;color:var(--soft);margin-bottom:8px}
.from-game figcaption b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--abyss);margin-bottom:2px}
.from-game .shots{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.from-game img{height:150px;width:auto;flex:none;border-radius:8px;scroll-snap-align:start;background:rgba(19,34,75,.06)}
@media (min-width:860px){.from-game img{height:170px}}
@media (prefers-reduced-motion:reduce){.heart[aria-pressed=true] .h,.t-rewind .dead h4{animation:none}}
.from-game a{color:inherit}