/* v4：トップの最初の画面だけ、AIゴリラの作業部屋（v2 案A の絵と room.js）を v3 のトンマナ（黒地・詰めた英字・黄色・光・粒）で。
 * 600px 以上：横いっぱい（100vw）・高さは画面の約85〜100%。部屋（1440×890 の横長の舞台）を object-fit:cover と同じ考えで敷く。
 *   舞台の幅 --sw = max(100vw, 高さ×1440/890)。焦点（ゴリラの顔と人形＝舞台の 57%）を画面の 60% 付近へ。はみ出しは下 35%・上 65% で切る。
 *   見出し・ボタンは舞台の外（.hero-txt）に置き、ヘッダーの下から始める（かぶらない）。
 * 599px 以下：v2 のスマホの縦の構図（寄りの絵）。ボタンは部屋の下（.under）。
 * 部品の位置は v2 の top.css と同じ（Codex の 配置.json を % にしたもの）。その下（帯・索引・…・フッター）は v3.css のまま。 */
.room-wrap{position:relative;background:var(--k);overflow:hidden;
  --rh:clamp(560px,calc(100svh - 62px),1000px);
  --sw:max(100vw,calc(var(--rh) * 1440 / 890));
  height:var(--rh)}
.room{position:absolute;width:var(--sw);aspect-ratio:1440/890;container-type:inline-size;overflow:hidden;background:#06080d;
  left:clamp(calc(100vw - var(--sw)),calc(60vw - var(--sw) * .57),0px);
  bottom:calc((var(--rh) - var(--sw) * 890 / 1440) * .35);
  --W:1440;--H:890;touch-action:pan-y}
.room .L{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* 部屋の絵は少し暗く落として黒になじませる */
.L.bg{left:0;top:0;width:100%;filter:brightness(.66) saturate(.88) contrast(1.05)}
.L.mon{left:75%;top:20.79%;width:24.31%;filter:drop-shadow(0 0 1.6cqw rgba(47,211,255,.55))}
.L.body{left:38.54%;top:26.97%;width:45.14%}
.L.head{left:49.31%;top:12.92%;width:26.39%;transform-origin:50% 80%}
.L.gsp{display:none}
.L.head2{visibility:hidden}
.room.surprised .L.head{visibility:hidden}.room.surprised .L.head2{visibility:visible}
.L.desk{left:0;top:43.71%;width:100%;filter:brightness(.85) saturate(.9)}
.pupil{position:absolute;width:.66%;aspect-ratio:1;margin:-.33% 0 0 -.33%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#0A0F1B 20%);pointer-events:none;z-index:4}
.L.sign{left:.35%;top:72.47%;width:15.28%;filter:brightness(.7)}
.L.shelf{left:15.49%;top:75.73%;width:84.03%;filter:brightness(.8)}
.room .z1{z-index:1}.room .z2{z-index:2}.room .z3{z-index:3}.room .z5{z-index:5}.room .z6{z-index:6}.room .z7{z-index:7}
/* 端だけ黒へ溶かす（左は見出しの読みやすさのため広め・右と上は細く・下は次の帯へ） */
.hero-vig{position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.66) 24%,rgba(5,5,5,0) 50%),
             linear-gradient(270deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 5%),
             linear-gradient(180deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,0) 8%),
             linear-gradient(0deg,#050505 0%,rgba(5,5,5,0) 13%)}
.room-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--y);box-shadow:0 0 18px 2px rgba(255,230,0,.7);z-index:11}

/* 見出し・ボタン（舞台の外。ヘッダーの下から始まるので、かぶらない） */
.hero-txt{position:absolute;z-index:10;left:var(--gut);top:0;padding-top:clamp(28px,7svh,84px);width:min(48%,660px)}
.eyebrow2{margin:0 0 14px;font-family:var(--disp);font-weight:900;font-size:clamp(12px,1.05vw,16px);letter-spacing:.22em;color:var(--hi,#2FD3FF);text-transform:uppercase}
.hero-txt h1{margin:0;font-weight:900;color:var(--ink);text-shadow:0 4px 24px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.6)}
html[lang="ja"] .hero-txt h1{font-family:var(--jp);font-size:clamp(44px,5.8vw,104px);line-height:1.08;letter-spacing:-.04em}
html[lang="en"] .hero-txt h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(64px,8.6vw,156px);line-height:.88;letter-spacing:-.02em}
.hero-txt h1 .ln{display:block}
.hero-txt h1 .y{color:var(--y);text-shadow:0 0 28px rgba(255,230,0,.4),0 4px 24px rgba(0,0,0,.85)}
.hero-txt .lead{margin:18px 0 0;max-width:30em;font-weight:700;font-size:clamp(14px,1.2vw,18px);line-height:1.6;color:#EEE8DC;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.acts{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:clamp(18px,3svh,34px)}
.acts .play{font-size:clamp(20px,2.1vw,34px);min-height:56px}
.now2{flex:1 1 100%;margin:0;font-size:13px;letter-spacing:.06em;color:var(--mute);display:flex;gap:.6em;align-items:baseline;text-shadow:0 1px 6px #000}
.now2 .now-l{font-weight:800;color:var(--hi,#2FD3FF)}
.now2 .now-n{font-family:var(--disp);font-weight:900;color:var(--ink);font-size:1.3em}
.now2 .now-t{color:var(--ink);font-weight:700}
.btn-o{display:inline-flex;align-items:center;gap:.5em;min-height:50px;padding:0 1.3em;background:rgba(5,5,5,.55);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--disp);font-weight:900;font-size:clamp(15px,1.15vw,18px);text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
html[lang="ja"] .btn-o{font-family:var(--jp);text-transform:none}
.btn-o:hover{background:var(--ink);color:#000}
.btn-o svg{width:1.2em;height:1.2em;flex:none}
.hint{margin:12px 0 0;font-weight:800;font-size:13px;color:#E9E3D6;text-shadow:0 1px 6px #000}
.hint::after{content:"";display:inline-block;width:26px;height:16px;margin-left:6px;border-top:3px dashed var(--y);border-right:3px dashed var(--y);border-radius:0 12px 0 0;transform:rotate(-12deg)}
.dash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
.dash polyline{fill:none;stroke:var(--y);stroke-width:.45cqw;stroke-linecap:round;stroke-dasharray:.6cqw 1.4cqw}

/* 人形 */
.doll2{position:absolute;left:0;top:0;width:20.83%;aspect-ratio:1;z-index:9;touch-action:none;cursor:grab;will-change:transform;-webkit-tap-highlight-color:transparent;border:0;padding:0;background:none}
.doll2:active{cursor:grabbing}
.doll2 img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 1cqw rgba(255,230,0,.35))}
.doll2 .f{visibility:hidden}.doll2.flying .f{visibility:visible}.doll2.flying .s{visibility:hidden}
.doll2:focus-visible{outline:3px solid var(--y);outline-offset:-10%}

/* 棚（ゲーム5本の入口）：黒い札・ネオンの縁 */
.slots{position:absolute;left:15.49%;top:75.73%;width:84.03%;aspect-ratio:2400/420;z-index:9}
.slot{position:absolute;top:11.43%;width:16.08%;height:63.33%;display:block;overflow:hidden;text-decoration:none;outline:.18cqw solid rgba(244,238,223,.35);transition:transform .2s,outline-color .2s,box-shadow .2s}
.slot img{width:100%;height:100%;object-fit:cover}
.slot:nth-child(1){left:4.83%}.slot:nth-child(2){left:23.5%}.slot:nth-child(3){left:42%}.slot:nth-child(4){left:60.5%}.slot:nth-child(5){left:79.08%}
.slot .nm{position:absolute;left:0;right:0;bottom:0;padding:.35cqw .5cqw;background:rgba(5,5,5,.86);color:var(--ink);font-family:var(--disp);font-weight:900;font-size:max(11px,.95cqw);line-height:1.15;text-align:left}
.slot .nn{position:absolute;left:.5cqw;top:.3cqw;font-family:var(--disp);font-weight:900;font-size:max(14px,1.7cqw);line-height:1;color:var(--ink);text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.7)}
@media (hover:hover){.slot:hover{transform:translateY(-.6cqw);outline-color:var(--gm);box-shadow:0 0 2cqw var(--gm)}}
.slot:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.signtx{display:none}
/* 1200px 未満は舞台の左右が切れて棚が欠けるので、棚と札は出さない（すぐ下の GAMES / 05 が入口） */
@media (max-width:1199px){ .slots,.L.shelf,.L.sign{display:none} }

/* 光と粒：ランプの光・モニターの光・呼吸・ほこりの粒（止めると消える） */
.room .lamp{position:absolute;left:56%;top:0;width:26%;height:52%;z-index:6;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 28%,rgba(255,214,120,.38),transparent 66%);animation:lamp 4s ease-in-out infinite}
@keyframes lamp{50%{opacity:.6}}
.L.body.breathe{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{50%{transform:scaleY(1.012)}}
.motes{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.motes i{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * .45cqw);height:calc(var(--s) * .45cqw);border-radius:50%;background:#FFE9A8;box-shadow:0 0 .8cqw .2cqw rgba(255,214,120,.7);
  opacity:0;animation:mote calc(6s + var(--s) * 5s) var(--d) ease-in-out infinite}
@keyframes mote{0%{transform:translate3d(0,0,0);opacity:0}30%{opacity:.9}100%{transform:translate3d(2cqw,-14cqw,0);opacity:0}}
.mon-glow{position:absolute;left:73%;top:18%;width:28%;height:32%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(47,211,255,.35),transparent);animation:lamp 3s ease-in-out infinite}
.room.still .lamp,.room.still .L.body,.room.still .mon-glow{animation:none}
html.still .room .motes,html.still .room .dash{display:none}

/* ── スマホ（599px 以下）：v2 の縦の構図。見出しは部屋の上の暗い所、ボタンは部屋の下 */
@media (max-width:599px){
  .room-wrap{height:auto}
  .room{position:relative;left:auto;bottom:auto;width:100%;aspect-ratio:390/640;--W:390;--H:640}
  .L.bg{top:-5.94%}
  .L.mon{left:69.74%;top:45.31%;width:44.87%}
  .L.body{left:-26.41%;top:46.41%;width:105.13%}
  .L.head{left:-9.74%;top:29.69%;width:79.49%}
  .L.desk{left:-85.9%;top:61.25%;width:210.26%}
  .pupil{width:2.15%;margin:-1.075% 0 0 -1.075%}
  .L.body,.L.head,.mon-glow{display:none}
  .L.gsp{display:block;left:-6%;top:24%;width:100%}
  .hero-vig{background:linear-gradient(180deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.6) 24%,rgba(5,5,5,0) 40%),linear-gradient(0deg,#050505 0%,rgba(5,5,5,0) 12%)}
  .hero-txt{width:auto;right:var(--gut);padding-top:22px}
  .eyebrow2{font-size:11px;margin-bottom:8px}
  html[lang="ja"] .hero-txt h1{font-size:clamp(40px,12.4vw,72px)}
  html[lang="en"] .hero-txt h1{font-size:clamp(56px,17vw,110px)}
  .hero-txt .lead,.hero-txt .acts,.hero-txt .hint{display:none}
  .doll2{width:46%}
  .motes i:nth-child(n+7){display:none}
  .dash polyline{stroke-width:1.2cqw;stroke-dasharray:1.6cqw 3.6cqw}
}
/* 部屋の下（スマホ）：遊ぶ・ゲームを選ぶ・投げる・リセット */
.under{display:none}
@media (max-width:599px){
  .under{display:block;position:relative;z-index:10;padding:14px var(--gut) 18px}
  .under .lead2{margin:0 0 12px;font-weight:700;font-size:15px;color:#E9E3D6}
  .under .play{display:flex;width:100%;justify-content:space-between;font-size:28px;min-height:62px}
  .under .now2{margin-top:6px}
  .under .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .under .row .btn-o{justify-content:center;padding:0 10px}
  .under .exp{display:flex;justify-content:space-between;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .room .lamp,.L.body,.mon-glow{animation:none!important}
  .slot,.slot:hover{transform:none!important;transition:none}
  .dash,.motes{display:none}
}
/* JS が無いときも見本の位置に人形を置く（JS が動いたら物理の位置へ） */
.doll2{left:42.71%;top:1.69%}
@media (max-width:599px){.doll2{left:60.51%;top:26.09%}}
.room.ready .doll2{left:0;top:0}
.pupil.p1{left:64.95%;top:35.77%}.pupil.p2{left:68.43%;top:35.6%}
@media (max-width:599px){.pupil.p1{left:29.84%;top:53.58%}.pupil.p2{left:39.7%;top:52.21%}}