/* ===== AIトイ体験（/play） ===== */
[hidden]{display:none!important}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.pg-hero{text-align:center;padding:48px 0 28px;background:radial-gradient(700px 300px at 50% 0%,#e3f3fd 0%,transparent 70%),linear-gradient(180deg,#f5f9ff,#fff)}
.pg-hero h1{font-size:clamp(28px,4.4vw,46px);font-weight:900;color:var(--navy);line-height:1.3;margin-bottom:12px}
.pg-hero p{color:var(--muted);max-width:36em;margin:0 auto}

.pg-play{padding:8px 0 56px}
.pg-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:stretch}

/* --- stage --- */
.pg-stage,.cr-stage{position:relative;overflow:hidden;border-radius:28px;min-height:520px;
  background:radial-gradient(60% 50% at 50% 100%,rgba(60,199,230,.35),transparent 70%),radial-gradient(80% 60% at 50% 0%,#2a3a8f,transparent 70%),linear-gradient(180deg,#121a4a,#0b1036);
  box-shadow:0 30px 60px rgba(20,27,77,.25);isolation:isolate}
.pg-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 22%,#fff9,transparent),radial-gradient(1.5px 1.5px at 30% 12%,#fff8,transparent),radial-gradient(2px 2px at 72% 18%,#fffa,transparent),radial-gradient(1.5px 1.5px at 88% 34%,#fff7,transparent),radial-gradient(2px 2px at 52% 8%,#fff8,transparent),radial-gradient(1.5px 1.5px at 8% 48%,#fff6,transparent),radial-gradient(2px 2px at 92% 58%,#fff6,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
.pg-glow::after{content:"";position:absolute;left:10%;right:10%;bottom:6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,220,255,.45),transparent);filter:blur(4px)}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}

.pg-toys{position:absolute;left:0;right:0;bottom:9%;top:22%;display:flex;justify-content:center;align-items:flex-end;gap:2%}
.pg-tools{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:5}
.pg-tools button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font:600 12px/1.4 inherit;cursor:pointer;backdrop-filter:blur(8px)}
.pg-tools button svg{width:16px;height:16px}
.pg-tools button[aria-pressed="false"]{opacity:.6}
.pg-tip{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;color:rgba(255,255,255,.6);pointer-events:none;letter-spacing:.04em}

/* --- toy --- */
.toy{position:relative;height:var(--th,60%);aspect-ratio:var(--ar);display:flex;flex-direction:column;align-items:center;transition:height .5s cubic-bezier(.3,1.3,.5,1),opacity .4s,filter .4s;flex:none}
.toy-body{position:relative;height:100%;width:100%;transform-origin:50% 100%;transform:rotate(var(--lean,0deg));transition:transform .5s ease-out;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline:none;z-index:2}
.toy-body:focus-visible{filter:drop-shadow(0 0 6px var(--cyan))}
.toy-skin{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
.toy-skin img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)) hue-rotate(var(--hue,0deg));transition:filter .8s}
.toy-cheek{position:absolute;width:15%;aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,110,150,.6),rgba(255,110,150,0));opacity:0;transition:opacity .4s;pointer-events:none}
.toy.blush .toy-cheek{opacity:1}
.toy-lid{position:absolute;border-radius:50% 50% 45% 45%;background:linear-gradient(180deg,#ece5df,#e3dbd4);transform:scaleY(0);transform-origin:50% 0;pointer-events:none;border-bottom:2px solid #6b5a63;transition:transform .07s}
.toy.blink .toy-lid,.toy.asleep .toy-lid,.toy.content .toy-lid,.toy.dormant .toy-lid{transform:scaleY(1)}
.toy.asleep .toy-lid,.toy.content .toy-lid,.toy.dormant .toy-lid{transition:transform .35s}
.toy-shadow{position:absolute;bottom:-3%;left:15%;right:15%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);z-index:1}
.toy-fx{position:absolute;inset:-25% -30% 30%;pointer-events:none;z-index:3}

/* speech bubble */
.toy-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,8px) scale(.9);transform-origin:50% 100%;z-index:6;width:max-content;max-width:min(240px,46vw);padding:9px 14px;border-radius:16px;background:#fff;color:var(--navy);font-size:14px;font-weight:700;line-height:1.55;box-shadow:0 10px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.toy-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:#fff}
.toy-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toy-bubble.typing{letter-spacing:.2em}
.toy-bubble.typing::before{content:"";display:inline-block;width:30px;height:8px;background:radial-gradient(circle 4px,var(--blue) 98%,transparent) 0 0/10px 8px repeat-x;animation:dots 1s steps(3) infinite}
@keyframes dots{from{width:10px}to{width:40px}}

/* speaking rings */
.toy.talking .toy-fx::before,.toy.talking .toy-fx::after{content:"";position:absolute;left:50%;top:62%;width:40%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(60,199,230,.7);transform:translate(-50%,-50%) scale(.6);animation:ring 1.4s ease-out infinite}
.toy.talking .toy-fx::after{animation-delay:.7s;border-color:rgba(47,139,234,.7)}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}

/* solo / trio layout */
.pg-stage .toy{--th:42%;opacity:.55;filter:saturate(.7) brightness(.85)}
.pg-stage .toy.active{--th:74%;opacity:1;filter:none}
.pg-stage[data-mode="trio"] .toy{--th:60%;opacity:1;filter:none}
.pg-stage .toy:not(.active) .toy-bubble{font-size:12px;max-width:150px}
.pg-stage[data-mode="trio"] .toy-bubble{font-size:13px;max-width:min(200px,32vw)}
.pg-stage[data-mode="trio"] .toy:first-child .toy-bubble{left:0;transform:translate(0,8px) scale(.9);transform-origin:20% 100%}
.pg-stage[data-mode="trio"] .toy:first-child .toy-bubble.show{transform:none}
.pg-stage[data-mode="trio"] .toy:first-child .toy-bubble::after{left:30%}
.pg-stage[data-mode="trio"] .toy:last-child .toy-bubble{left:auto;right:0;transform:translate(0,8px) scale(.9);transform-origin:80% 100%}
.pg-stage[data-mode="trio"] .toy:last-child .toy-bubble.show{transform:none}
.pg-stage[data-mode="trio"] .toy:last-child .toy-bubble::after{left:70%}

/* animations */
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.018)}}
.a-squish{animation:squish .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes squish{0%{transform:scale(1,1)}15%{transform:scale(1.16,.8)}38%{transform:scale(.92,1.1) translateY(-5%)}58%{transform:scale(1.05,.95)}78%{transform:scale(.99,1.01)}100%{transform:none}}
.a-hop{animation:hop .9s ease}
@keyframes hop{0%,100%{transform:none}20%{transform:translateY(-6%) rotate(-3deg)}40%{transform:translateY(0) scale(1.04,.96)}60%{transform:translateY(-4%) rotate(3deg)}80%{transform:translateY(0) scale(1.02,.98)}}
.a-jump{animation:jump .8s cubic-bezier(.3,1.2,.5,1)}
@keyframes jump{0%{transform:none}15%{transform:scale(1.08,.88)}45%{transform:translateY(-16%) scale(.95,1.06)}75%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
.a-shy{animation:shy 1.6s ease}
@keyframes shy{0%,100%{transform:none}20%,80%{transform:rotate(-5deg) scale(.96)}50%{transform:rotate(-3deg) scale(.95)}}
.a-droop{animation:droop 1.8s ease}
@keyframes droop{0%,100%{transform:none}25%,75%{transform:scale(1.03,.93) rotate(3deg)}}
.a-tilt{animation:tilt 1.8s ease}
@keyframes tilt{0%,100%{transform:none}20%,80%{transform:rotate(-8deg)}}
.a-sway{animation:sway 2.2s ease-in-out}
@keyframes sway{0%,100%{transform:none}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.a-puff{animation:puff 1.4s ease}
@keyframes puff{0%,100%{transform:none}25%,70%{transform:scale(1.07) translateY(-2%)}}
.a-shake{animation:shake .6s linear}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-4%) rotate(-2deg)}40%,80%{transform:translateX(4%) rotate(2deg)}}
.a-dizzy{animation:dizzy 1.6s ease-in-out}
@keyframes dizzy{0%,100%{transform:none}15%{transform:rotate(-14deg)}35%{transform:rotate(12deg)}55%{transform:rotate(-10deg)}75%{transform:rotate(7deg)}90%{transform:rotate(-3deg)}}
.a-pet{animation:pet 1.4s ease-in-out}
@keyframes pet{0%,100%{transform:none}25%{transform:rotate(-3deg) scale(1.02,.98)}50%{transform:rotate(0) scale(.99,1.02)}75%{transform:rotate(3deg) scale(1.02,.98)}}
.a-nod{animation:nod .6s ease}
@keyframes nod{0%,100%{transform:none}40%{transform:scale(1.02,.96)}}
.toy.talking .toy-skin{animation:talk .26s ease-in-out infinite alternate}
@keyframes talk{from{transform:scale(1,1)}to{transform:scale(1.015,.975)}}
.toy.asleep .toy-skin{animation:snooze 3.6s ease-in-out infinite}
@keyframes snooze{0%,100%{transform:rotate(-2deg) scale(1,.985)}50%{transform:rotate(2deg) scale(1,1.01)}}
.toy.listening .toy-body{--lean:-6deg}

/* marks (漫符) */
.mk{position:absolute;width:15%;aspect-ratio:1;animation:mk 1.6s ease-out forwards;display:grid;place-items:center;font:800 clamp(16px,2.6vw,30px)/1 Poppins,sans-serif;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.mk svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.mk-z{color:#bcd8ff;animation:mkz 2.4s ease-out forwards}
.mk-bang{color:#ffd45c}
.mk-q{color:#9fe6ff}
@keyframes mk{0%{transform:translateY(20%) scale(.3);opacity:0}20%{transform:translateY(0) scale(1.1);opacity:1}70%{opacity:1}100%{transform:translateY(-70%) scale(.9);opacity:0}}
@keyframes mkz{0%{transform:translate(0,0) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(60%,-120%) scale(1.1);opacity:0}}

/* --- talk panel --- */
.pg-talk{display:flex;flex-direction:column;min-height:520px;max-height:620px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:0 20px 40px rgba(20,27,77,.06)}
.pg-modes{display:flex;flex-wrap:wrap;gap:6px}
.pg-modes::-webkit-scrollbar{display:none}
.pg-modes button,.pg-who button{flex:none;border:1.5px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:6px 12px;font:700 13px/1.4 inherit;cursor:pointer;transition:all .15s}
.pg-modes button[aria-selected="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(45,111,224,.28)}
.pg-who{display:flex;gap:6px;margin-top:10px}
.pg-who button{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px}
.pg-who img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--soft)}
.pg-who button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:#f2f7ff}
.pg-stage[data-mode="trio"]~.pg-talk .pg-who{display:none}
.pg-log{flex:1;overflow-y:auto;margin:12px 0;padding:4px 2px;display:flex;flex-direction:column;gap:10px;min-height:160px;scroll-behavior:smooth}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%;animation:msgin .3s ease}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg p{padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.6;background:var(--soft);color:var(--ink);word-break:break-word}
.msg .av{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#eef3fb}
.msg .nm{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:2px}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.msg.toy-msg p{border-bottom-left-radius:4px}
.msg.sys{align-self:center;max-width:100%}
.msg.sys p{background:none;color:var(--muted);font-size:12px;padding:0;text-align:center}
.pg-input{display:flex;gap:8px;align-items:center}
.pg-input input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font:15px/1.4 inherit;color:var(--ink);background:#fbfdff}
.pg-input input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,111,224,.12)}
.pg-mic,.pg-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;position:relative}
.pg-mic{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(45,111,224,.3)}
.pg-mic svg,.pg-send svg{width:22px;height:22px}
.pg-mic.on::before,.pg-mic.on::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);animation:micring 1.2s ease-out infinite}
.pg-mic.on::after{animation-delay:.6s}
@keyframes micring{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
.pg-send{background:var(--soft);color:var(--blue)}
.pg-input[aria-busy="true"]{opacity:.6;pointer-events:none}
.pg-memory{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:14px;background:#f2f7ff;color:var(--navy);font-size:12.5px}
.pg-memory svg{width:18px;height:18px;color:var(--blue)}
.pg-memory-text{flex:1}
.pg-forget{border:0;background:none;color:var(--muted);font:12px inherit;text-decoration:underline;cursor:pointer}

.pg-how{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.pg-how li{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;font-size:13px;color:var(--muted)}
.pg-how b{color:var(--navy);font-size:14.5px}
.pg-how .ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#eef5ff;color:var(--blue);margin-bottom:4px}
.pg-how .ico svg{width:20px;height:20px}

/* --- create --- */
.pg-create{background:var(--soft);padding:72px 0}
.pg-create .sec-head{margin-bottom:28px;text-align:center}
.pg-create .sec-head .label{justify-content:center}
.pg-create .sec-head p{margin-left:auto;margin-right:auto}
.cr-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.cr-form{display:flex;flex-direction:column;gap:14px}
.cr-form fieldset{border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px 18px}
.cr-form legend{float:left;width:100%;font-weight:800;color:var(--navy);font-size:14px;margin-bottom:10px}
.cr-bases{display:flex;gap:10px;clear:both}
.cr-bases label,.cr-colors label,.cr-chips label{cursor:pointer;position:relative}
.cr-bases input,.cr-colors input,.cr-chips input{position:absolute;opacity:0;pointer-events:none}
.cr-bases img{width:72px;height:72px;object-fit:contain;border-radius:16px;border:2px solid var(--line);background:linear-gradient(180deg,#f7fbff,#eaf2fd);padding:4px;transition:all .15s}
.cr-bases input:checked+img{border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,111,224,.15)}
.cr-colors{display:flex;gap:8px;margin-top:12px}
.cr-colors span{display:block;width:30px;height:30px;border-radius:50%;background:hsl(calc(var(--base-hue,345deg) + var(--h)) 70% 72%);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .15s}
.cr-colors input:checked+span{box-shadow:0 0 0 2.5px var(--blue)}
.cr-chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.cr-chips span{display:inline-block;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--navy);transition:all .15s}
.cr-chips input:checked+span{background:var(--grad);border-color:transparent;color:#fff}
.cr-chips input:focus-visible+span,.cr-bases input:focus-visible+img,.cr-colors input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.cr-texts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-texts legend{grid-column:1/-1}
.cr-texts label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:700}
.cr-texts input{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font:15px/1.4 inherit;color:var(--ink)}
.cr-texts input:focus{outline:none;border-color:var(--blue)}
.cr-go{align-self:flex-start}
.cr-go svg{width:18px;height:18px}

.cr-stage{min-height:420px}
.cr-toy-slot{position:absolute;left:0;right:0;top:20%;bottom:10%;display:flex;justify-content:center;align-items:flex-end}
.cr-toy-slot .toy{--th:100%}
.cr-toy-slot .toy:not(.on){display:none}
.toy.dormant .toy-skin img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)) hue-rotate(var(--hue,0deg)) grayscale(.9) brightness(.7)}
.cr-name{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#fff;font:700 15px/1.4 Poppins,"Noto Sans JP",sans-serif;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.cr-name:empty::before{content:"名前をつけてね";opacity:.5;font-weight:500;font-size:13px}
.cr-awake{position:absolute;inset:0;pointer-events:none;z-index:4}
.cr-awake.go::before,.cr-awake.go::after{content:"";position:absolute;left:50%;top:60%;width:30%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);border:3px solid #7fe3ff;box-shadow:0 0 30px #3cc7e6,inset 0 0 30px #3cc7e6;animation:burst 1.2s ease-out forwards}
.cr-awake.go::after{animation-delay:.25s;border-color:#9fb7ff}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.cr-awake .pt{position:absolute;width:6px;height:6px;border-radius:50%;background:#bff3ff;box-shadow:0 0 10px #3cc7e6;animation:pt 1.3s ease-out forwards}
@keyframes pt{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.cr-talk{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px}
.cr-talk .pg-log{height:220px;flex:none}
.cr-cta{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#141B4D,#22348a);color:#cfe0ff;font-size:12.5px;line-height:1.6;transition:transform .15s}
.cr-cta:hover{transform:translateY(-2px)}
.cr-cta b{display:block;color:#fff;font-size:14.5px}
.cr-cta svg{width:20px;height:20px;flex:none;color:var(--cyan)}

.pg-notes{padding:28px 0 8px}
.pg-notes ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.pg-notes li::before{content:"※ "}

@media (max-width:900px){
  .pg-box,.cr-box{grid-template-columns:minmax(0,1fr)}
  .pg-stage{min-height:400px}
  .pg-talk{min-height:0;max-height:none}
  .pg-talk .pg-log{height:240px;flex:none}
  .pg-how{grid-template-columns:repeat(2,1fr)}
  .cr-stage{min-height:340px}
}
@media (max-width:560px){
  .pg-stage{min-height:360px;border-radius:22px}
  .pg-stage .toy{--th:34%}
  .pg-stage .toy.active{--th:66%}
  .pg-stage[data-mode="trio"] .toy{--th:50%}
  .cr-texts{grid-template-columns:1fr}
  .pg-hero{padding:32px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .toy-skin,.pg-glow,.toy.talking .toy-skin,.toy.asleep .toy-skin{animation:none!important}
  .toy-skin[class*="a-"]{animation-duration:.01s!important}
}