/* ===== Intro (temp) ===== */
 
html, body{
 margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}
.intro{
  position:fixed; inset:0; z-index:9999;
  background:#fff; overflow:hidden;
  pointer-events:auto;
}
.intro__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
}

.intro__img--1{ opacity:0 ; }


.intro__shade{
  position:absolute; inset:0;
  background:rgb(232, 232, 232);
  opacity:0;
}

.intro__title{
  position:absolute; left:50%; top:52%;
  transform:translate(-50%,-50%);
  color:#333232;
  letter-spacing:.08em;
  opacity:0;
  text-align:center;
  padding:0 16px;
  font-family:"Zen Loop", sans-serif; 
  font-weight: 500;
  font-size:clamp(40px, 6vw, 100px);
  background-color: transparent;
}

.intro.is-on .intro__img--1{
  animation:
    intro1_in  2.4s cubic-bezier(0.6, 0.0, 0.5, 1) both 0.5s,
    intro1_out 1.6s cubic-bezier(0.6, 0.0, 0.5, 1) forwards  2.9s;
}

.intro.is-on .intro__img--2{
  opacity:0;
  transform:scale(1);

  animation:
    intro2_fade 2.4s cubic-bezier(0.6, 0.0, 0.5, 1) forwards 4.0s,
    intro2_zoom 3.7s cubic-bezier(.81,.02,.95,.51) forwards 6.2s;
}
.intro.is-on .intro__shade{
  animation:intro_shade 5.4s ease forwards 7.2s; /* 3.0〜6.8 */
}
.intro.is-on .intro__title{
  animation:intro_title 3.2s cubic-bezier(.69,.03,.55,1) both 9.3s; /* 3.4〜6.6 */
}

.intro.is-ending{
  animation: intro_fadeout 0.8s ease forwards;
}

@keyframes intro1_in{
  0%{
    opacity:0;
    transform:scale(1.01);
    filter:blur(10px) brightness(1.06);
  }
  /*
  60%{
    opacity:0.15; /* ここが「始まった点が分かりにくい」肝 
    transform:scale(1.005);
    filter:blur(8px) brightness(1.04);
  }*/
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0) brightness(1);
  }
}

@keyframes intro1_out{
  0%{
    opacity:1;
    transform:scale(1);
    filter:blur(0) brightness(1);
  }
  100%{
    opacity:0;
    transform:scale(1.02);
    filter:blur(6px) brightness(0.98);
  }
}


@keyframes intro2_fade{
  from{ opacity:0; }
  to  { opacity:1; }
}

@keyframes intro2_zoom{
  from{ transform:scale(1); opacity:1; }
  to  { transform:scale(5.0);opacity:0; }
}

@keyframes intro_shade{
  0%{opacity:0; background:rgba(255, 255, 255, 0)}
  50%{opacity:1; background:rgb(232, 232, 232)}
  100%{opacity:0; background:rgba(232, 232, 232, 0)}
}
@keyframes intro_title{
  0%{opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{opacity:0}
}

@keyframes intro_fadeout{
  from{ opacity:1; }
  to  { opacity:0; }
}

/* 省アニメ設定の人は即スキップ */
@media (prefers-reduced-motion: reduce){
  .intro{display:none !important;}
}


/* 省アニメ設定の人は即スキップ */
@media (prefers-reduced-motion: reduce){
  .intro{display:none !important;}
}


/*ここまでintro*/
body{
    margin: 0;
}

.hotspot{
  position: absolute;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100svh;
  overflow: hidden;
  /*aspect-ratio: 1 / 1;*/
}

/*ヘルプ*/
#help-btn{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9000; /* board-layer/overlayより上に */
  width: 34px; height: 34px;
  border-radius: 999px;
  cursor: pointer;
  color:#f0f8ff;
  background-color: #4c4a4891;
}

#help-panel{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(320px, 92vw);
  z-index: 8500;
  transform: translateX(100%);
  transition: transform 260ms ease;
  background: #ffffff3b;
  color: #0b0b0b;
  padding: 5% 1.5% ;
  line-height: 3.0;
}
.help-actions{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.help-jump{
  width: 50%;
  background-color: #ffffff4f;
  border: none;
}
#help-panel.is-open{
  transform: translateX(0);
}

#help-close{
  position: absolute;
  top: 10px; left: 10px;
}
#help-body{ padding: 52px 16px 16px; }

#help-btn.is-pulse {
  animation: helpPulse 1.2s ease;
}

@keyframes helpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(180,220,255,.6);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 12px 4px rgba(180,220,255,.8);
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(180,220,255,0);
    transform: scale(1);
  }
}

/* パン専用 */
#scene .scene-pan{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  --panX: 0px;

  transform: translate3d(var(--panX), 0, 0) !important;
}


#scene-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none !important;
  will-change: auto;
}



#desk-hotspot {
  position: absolute;
  left: 0%;
  top: 37%;
  width: 20%;
  height: 20%;
  cursor: pointer;
}

#pc-hotspot{
  position: absolute;
  left: 20%;
  top: 0%;
  width: 54%;
  height: 35%;
  display: none;
  cursor: pointer;
}
.back-hotspot {
  position: absolute;
  top: 0;
  width: 5vw;
  height: 100vh;
  cursor: pointer;
  display: none; /* scene.js で制御 */
}

/* 左 */
#back-hotspot-left {
  left: 0;
  cursor: pointer;
}

/* 右 */
#back-hotspot-right {
  right: 0;
  cursor: pointer;
}

/* デバッグ用（あとで消す） */
/*
.back-hotspot {
  background: rgba(0,0,255,0.15);
}
*/
#note-hotspot {
  position: absolute;
  left: 70%;
  top: 45%;
  width: 220px;
  height: 300px;
  cursor: pointer;

  display: none;               /* sceneでON/OFF 
  background: rgba(255,0,0,0.2); /* デバッグ用。後で消す */
  z-index: 5;
}


#cabinet-hotspot {
  position: absolute;
  right: 0%;
  top: 30%;
  width: 10%;
  height: 30%;
  cursor: pointer;
  /*display: none;*/
  z-index: 5;
}

#photoframe-hotspot {
  position: absolute;
  top: 47%;
  right: 27%;
  width: 4%;
  height: 6%;
  cursor: pointer;
  /*display: none;*/
  z-index: 5;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/*
#hotspot-layer{
  position: absolute;
  pointer-events: none;                   /* レイヤー自体はクリック透過
  z-index: 50;
  inset: 0;
}
*/
.teaser-hotspot,
.plier-box,
.cabinet-cat-box,
.walking-cat-box{
  pointer-events: auto;                   /* 中身はクリック可 */

}

/*******************ミニゲーム*********************************************************/
#ui-overlay{ pointer-events: none; }

/* 通常モードではゲーム要素を完全停止 */
body.default-mode .game-only{
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ゲーム中のみ有効化 */
body.game-mode .game-only{
  pointer-events: auto;
}

.note-cabinet-hotspot{
  position: absolute;
  left: 30%;
  top: 37%;
  width: 10%;
  height: 6%;
  display: none;
  cursor: pointer;
}

.teaser-hotspot{
  position: absolute;

  width: 9%;
  height: 6%;
  display: block;
  cursor: pointer;
}

.cabinet-cat-box{
  position: absolute;
 /* top: 80%;
  right:3%;*/
  width: 15%;
  height: 15%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

#cabinet-cat{
  width: 100%;
  height: auto !important;
  display: block;
  pointer-events: none;
}

body.is-cabinet .cabinet-cat-box{
  display: block;
  pointer-events: auto;
}

.walking-cat-box{
  position: absolute;
  top: 78%;
  right:-3%;
  width: 20%;
  height: 18%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

#walking-cat{
  width: 100%;
  height: auto !important;
  display: block;
  pointer-events: none;
}

.plier-box{
  position: absolute;
 /* top: 83%;
  right:10%;*/
  width: 5%;
  height: 10%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform .6s ease, opacity .4s ease;
}

#plier{
  width: 100%;
  height: auto !important;
  display: block;
  filter: drop-shadow(5px 8px 6px rgba(0, 0, 0, 0.596));
}

body.is-cabinet .cabinet-cat-box{
  opacity: 1;
  pointer-events: auto;
}
/*
body.cabinet-cat-move #cabinet-cat{
  transform: translateX(120px);
  transition: transform .6s ease;
}
*/



/* cabinet入室で座り猫だけ表示 */
body.is-cabinet .cabinet-cat-box{
  opacity: 1;
  pointer-events: auto;
}

/* 座り→立ち+移動（同時） */
body.cat-go .cabinet-cat-box{
  opacity: 0;
  pointer-events: none;
}

body.cat-go .walking-cat-box{
  opacity: 1;
}

body.plier-show .plier-box{
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

body.plier-got .plier-box{
  opacity: 0;
  pointer-events: none;
}

body.no-anim * {
  transition: none !important;
}

body.room-bright #scene{
  filter: brightness(1.08) saturate(1.05);
  transition: filter .8s ease;
}

#shelf-overlay{
  position:fixed;
  inset:0;
  display:flex;
  place-items: center;
  pointer-events:none;
  opacity:0;
  transition: opacity .3s ease;
  z-index:200;
}

/* 天板エリアだけを切り出す箱 */
.cabinet-shelf{
  position: absolute;
  left: 20%;
  top: 40%;
  width: 40%;   /* 20%→60% なら幅は40% */
  height: 12%;  /* 天板の高さ分（仮）。あとで調整 */

}

/* 暗幕（focus-shelfの時だけ出す） */
body.focus-shelf::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.797);
  z-index: 9998;
}

/* 棚オーバーレイ本体 */
#shelf-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: 200ms ease;
}

body.focus-shelf #shelf-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* 棚画像の“基準箱” */
#shelf-overlay .shelf-zoom-stage{
  position: relative;
  height: 80vh;
  width: auto;
}

/* 画像はcontainで全体を表示 */
#shelf-overlay #shelf-zoom-img{
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10%;
}

/*棚拡大画像の消え方*/
#shelf-overlay{
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 220ms ease, transform 1000ms ease;
}
body.focus-shelf #shelf-overlay{
  opacity: 1;
  pointer-events: auto;
}
body.shelf-closing #shelf-overlay{
  opacity: 0;
  transform: scale(0.8);
  filter: blur(5px);
}

.cab-slot{
  position:absolute;
  width:100%;
  opacity: 0;
  pointer-events:none;
}

.cab-slot img{ width:100%; height:auto; display:block; }

/* オーバーレイ表示中だけ候補になる */
body.focus-shelf .cab-slot{ pointer-events:none; }

/* 持ってるものだけ出す */
/* 静止表示（持ってる物） */
body.focus-shelf.ov-plier  .cab-slot-1{ opacity:1; }
body.focus-shelf.ov-hammer .cab-slot-2{ opacity:1; }
body.focus-shelf.ov-nailpuller  .cab-slot-3{ opacity:1; }

#drop-ghost{
  position:absolute;
  left: 0;
  top: 0;
  opacity:0;
  pointer-events:none;
  z-index: 50; /* cab-slotより上に */
}
#drop-ghost img{
  width:100%;
  height:auto;
  display:block;
}

#drop-ghost{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#drop-ghost.drop-anim{
  transition: transform 600ms cubic-bezier(.2,.8,.3,1);
}

/*プライヤー*/
.cab-slot-1{ 
  opacity: 0;
  position: absolute;
  left:5%; 
  top:0%; 
  rotate: 12deg;
  width: 20%; /* ツールの大きさ */

}

.cab-slot-1 img{
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}
.cab-slot.is-hidden{ opacity:0 !important; }

body.focus-shelf .cab-slot-1{
  opacity: 0;
}

body.focus-shelf.plier-drop .cab-slot-1{ opacity: 1; }

body.plier-taken .plier-box{
  display:none;
}








/* cabinetのシーン　背景棚：初期は隠す（最優先） */
.cabinet-tools .cab-tool-slot-1,
.cabinet-tools .cab-tool-slot-2,
.cabinet-tools .cab-tool-slot-3{
  display: none;
}

/* 取得後だけ表示 */
body.is-cabinet.plier-in-shelf .cabinet-tools .cab-tool-slot-1,
body.is-cabinet.hammer-in-shelf .cabinet-tools .cab-tool-slot-2,
body.is-cabinet.nailpuller-in-shelf .cabinet-tools .cab-tool-slot-3{
  display: block;
}


/* 位置合わせ（ここをu/v方式 or %で調整） */
.cabinet-tools{ position:absolute; inset:0; pointer-events:none; width: 20%; height: 5%;}
.cab-tool-slot-1{
  position:absolute;
  left: 0%;
  top: 0%;
  width: 30%;
  height: 140%;
}

.cab-tool-slot-1 img{
  width: 100%;
  height: auto;
  rotate: 5deg;
  scale: 0.7;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
}
.cab-tool-plier{ width:100%; height:auto; display:block; }

.cab-tool-slot-2{
  position:absolute;
  left: 30%;
  top: 40%;
  width: 38%;
  height: 140%;
}

.cab-tool-slot-2 img{
  width: 100%;
  height: auto;
  rotate: 5deg;
  scale: 1.0;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
}
.cab-tool-plier{ width:100%; height:auto; display:block; }

.cab-tool-slot-3{
  position:absolute;
  left: 75%;
  top: 80%;
  width: 30%;
  height: 140%;
  rotate: -30deg;
}

.cab-tool-slot-3 img{
  width: 100%;
  height: auto;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
}
.cab-tool-nailpuller{ width:100%; height:auto; display:block; }

/*ハンマー*/
.keyboard-hotspot{
  display:none;
  pointer-events:none;
}

body.is-desk .keyboard-hotspot{
  display:block;
  pointer-events:auto;
}

.keyboard-hotspot{
  position: absolute;
  left: 25%;
  top: 39%;
  width: 35%;
  height: 20%;
  display: none;
  cursor: pointer;
}

#kbd-lift{
  display: none;
}
.hammer-box{ 
  display:none; 
  position: absolute; /* 念のため */
  width: 25%;
  height: 15%;
  cursor: pointer;
  z-index: 20;
}

.hammer-box img{
  width: 100%;
  filter: drop-shadow(2px 4px 6px black);
}

body.is-desk.hammer-spawn .hammer-box{ display:block; }
body.hammer-taken .hammer-box{ display:none; }

.cab-slot-2{
  left: 35%;
  top: 10%;
  width: 35%;
  height: auto;
  filter: drop-shadow(2px 4px 6px black);
}
/*ハンマー取得後にハンマーゲットできないようにする*/
body.hammer-taken .hammer-box{ display:none !important; }


/*ここからくぎ抜き*/
/* 通常は消す */
#nailpuller-hotspot, .nailpuller-box{ display:none; }

/* ズーム開始hotspotはroomでだけ有効 */
body.is-room #ac-zoom-hotspot{ 
  display:block; 
  pointer-events:auto;
  width: 15%;
  height: 10%; 
  cursor: pointer;
}

/* 通常：uv版を小さく薄く見せる（取れない） */
.nailpuller-hint-box{ display:none; pointer-events:none; }
body.is-room:not(.room-zoom-ac) .nailpuller-hint-box{
  display:block;
  position:absolute;
  width: 4%;
  opacity:.55;
  z-index: 10;
  pointer-events:none; /* 取得はズーム中だけ */
}

.nailpuller-hint-box img{
  width: 100%;
}
/* ズーム中：uv版は消す（ズレるから） */
body.room-zoom-ac .nailpuller-hint-box{ display:none !important; }

body.room-zoom-ac #nailpuller-hotspot .gameonly{
  display:block;
  position:absolute;
  left: 58%;
  top: 10%;
  width: 20%;
  height: 22%;
  z-index: 42;
}

body.room-zoom-ac .nailpuller-zoom{

  position:absolute;
  left: 65%;
  top: 22.5%;
  width: 9%;
  z-index: 40;
  pointer-events:none;
}
body.room-zoom-ac .nailpuller-zoom img{ width:100%; height:auto; display:block;   filter: brightness(0.5);}

/* ズーム中は大きくはっきり
body.is-room.room-zoom-ac .nailpuller-box{
  display:block;
  position:absolute;
  left: 65% !important;
  top: 22% !important;
  width: 9%;
  opacity: 1;
  z-index: 41;
  pointer-events:none;
  filter: blur(1px) brightness(0.6);
} */

/* ズーム中 */
body.is-room.room-zoom-ac #scene-img{
  transform: scale(2.0) !important;
  transform-origin: 62% 21%;
  object-position: 62% 21%;
  transition: transform 240ms ease, object-position 240ms ease;
}

/* ズーム中：最初はツールを隠す */
body.room-zoom-ac .nailpuller-zoom,
body.room-zoom-ac #nailpuller-hotspot{
  opacity: 0;
  display: none;
  transform: translateY(-6px) scale(.98);
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: none; /* readyまでクリックさせない */
}

/* ズーム中は他のhotspot殺す（ズレ事故防止） */
body.room-zoom-ac .hotspot{ pointer-events:none !important; }
/* ただしツールクリックは有効 */
body.room-zoom-ac #nailpuller-hotspot{
  display:block;
  position:absolute;
  left: 65%;
  top: 22%;
  width: 8%;
  height: 5%;
  z-index: 42;
  cursor: pointer;
}


/* ツール画像（見た目） */
body.room-zoom-ac .nailpuller-box{
  display:block;
  position:absolute;
  left: 65%;
  top: 23%;
  width: 5%;
  z-index: 40;
  pointer-events:none;
}
body.room-zoom-ac .nailpuller-box img{
  width:100%;
  height:auto;
  display:block;
  filter: blur(1px)brightness(0.8);
}
/*ゲットした後は見せない*/
body.nailpuller-taken .nailpuller-hint-box{ display:none !important; }
body.nailpuller-taken #ac-zoom-hotspot{ display:none !important; } /* 任意 */
  

/* readyになったら表示＋クリック可 */
body.room-zoom-ac.nailpuller-ready .nailpuller-zoom,
body.room-zoom-ac.nailpuller-ready #nailpuller-hotspot{
  display: block!important;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ズーム中：readyになるまで nailpuller は絶対に表示しない */
body.room-zoom-ac:not(.nailpuller-ready) .nailpuller-box,
body.room-zoom-ac:not(.nailpuller-ready) #nailpuller-hotspot{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ready以降だけ表示 */
body.room-zoom-ac.nailpuller-ready .nailpuller-box,
body.room-zoom-ac.nailpuller-ready #nailpuller-hotspot{
  display: block !important;
  visibility: visible !important;
}

.cab-slot-3{
  left: 65%;
  top: 37%;
  width: 35%;
  rotate: -30deg;
  height: auto;
  filter: drop-shadow(2px 4px 6px black);
}


#drop-ghost.drop-tool-nailpuller{
  transform: translateY(-60%) scale(1.4) rotate(-18deg);
}

/*板が落ちる*/
/* 板レイヤー：背景と同じ条件で重ねる */
#board-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 5; /* scene-imgより上ならOK。ホットスポットより上にしたくない場合は調整 */
  display:none;
}

.b-s1{z-index: 9;}
.b-s2{z-index: 8;}
.b-l1{z-index: 7;}
.b-l2{z-index: 6;}

/* game中だけ板を表示（クリア後は落下で消える） */
body.game-mode.is-room #board-layer { display:block; }

/* 板4枚：1024正方形+透過なのでcoverで一致 */
#board-layer .board{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: translateY(0) rotate(0);
  opacity:1;
  will-change: transform, opacity;
}
/*ズーム中に見せない*/
body.room-zoom-ac .board{
  opacity: 0;
  display: none;
}
/* クリア演出：順番に落ちる（bodyの data-clear-step で制御） */
body.game-clearing[data-clear-step="1"] .b-s1{ animation: boardFallS1 700ms ease forwards; }
body.game-clearing[data-clear-step="2"] .b-s2{ animation: boardFallS2 700ms ease forwards; }
body.game-clearing[data-clear-step="3"] .b-l1{ animation: boardFallL1 800ms ease forwards; }
body.game-clearing[data-clear-step="4"] .b-l2{ animation: boardFallL2 850ms ease forwards; }

/* 落下（transformY + rotate）好きに調整してOK */
@keyframes boardFallS1{
  to{ transform: translateY(22%) rotate(-10deg); opacity:0; }
}
@keyframes boardFallS2{
  to{ transform: translateY(26%) rotate(12deg); opacity:0; }
}
@keyframes boardFallL1{
  to{ transform: translateY(34%) rotate(-6deg); opacity:0; }
}
@keyframes boardFallL2{
  to{ transform: translateY(38%) rotate(8deg); opacity:0; }
}

/* 色温度（＝雰囲気）段階：scene-imgにfilter */
/* ゲーム開始時（板あり）＝暗い状態 */
body.game-mode.is-room #scene-img {
  filter: brightness(0.75) saturate(0.85) contrast(1.05);
}
/*
body.game-clearing #board-layer { display:block !important; }
*/
#scene-img{
  transition: filter 450ms ease;
}

/* 板が落ちるにつれて明るく */
body.game-clearing[data-clear-step="1"] #scene-img{ filter: brightness(0.94) saturate(0.85) contrast(1.02) hue-rotate(0deg) sepia(0); }
body.game-clearing[data-clear-step="2"] #scene-img{ filter: brightness(0.98) saturate(1.00) contrast(1.02) hue-rotate(1deg) sepia(0.2); }
body.game-clearing[data-clear-step="3"] #scene-img{ filter: brightness(1.02) saturate(1.05) contrast(1.01) hue-rotate(2deg) sepia(0.7); }
body.game-clearing[data-clear-step="4"] #scene-img{ filter: brightness(1.06) saturate(1.10) contrast(1.01) hue-rotate(5deg) sepia(1.0); }

/* 完了（明るい状態固定） */
body.game-cleared #scene-img{
  /*filter: brightness(1.06) saturate(1.10) contrast(1.01);*/
  filter:sepia(1.2) brightness(1.05) hue-rotate(8deg)
}
/* 完了後は板レイヤーを非表示でもOK（すでにopacity0だけど保険） */
body.game-cleared #board-layer{ display:none; }

/* 落下済みフラグ（JSが付ける） */
body.board-s1-done .b-s1 { opacity:0 !important; pointer-events:none !important; }
body.board-s2-done .b-s2 { opacity:0 !important; pointer-events:none !important; }
body.board-l1-done .b-l1 { opacity:0 !important; pointer-events:none !important; }
body.board-l2-done .b-l2 { opacity:0 !important; pointer-events:none !important; }

/*DIY ホットスポット*/
.scene-pan { position: relative; }

.diy-spot { display:none; }

body.is-room .room-only { display:block; }
body.is-desk .desk-only { display:block; }
body.is-cabinet .cabinet-only { display:block; }

.diy-spot{
  position:absolute;
  width:9%; height:10%;
  border-radius:50%;
  pointer-events:auto;
  /* 位置合わせ用：後で消す 
  background: rgba(255,255,255,.25);
  outline: 1px solid rgba(255,255,255,.35);*/
}

.diy-spot::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  top:-10px;
  transform: translate(-50%,-100%);
  white-space: pre-line;
  width: 200px;
  padding:20px;
  border-radius:3px;
  font-size:13px;
  background: rgba(228, 226, 226, 0.615);
  color:#090909;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}

.diy-spot:hover::after{
  opacity:1;
  transform: translate(-50%,-115%);
}


/*************************ガイド用**********************************************************************************************/
@media  (max-width:1199px){
  #ui-guide{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 99999;
}

#ui-guide.is-show{ opacity: 1; }

#ui-guide .guide-text{
  position: absolute;
  top: 70%;
  padding: 10px 14px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
}

#ui-guide .guide-arrows{
  display:flex;
  position: absolute;
  top: 60%;
  gap: 48px;
  font-size: 34px;
  color:#fff;
}

#ui-guide .g-left{
  animation: nudgeL 1.2s ease-in-out infinite;
}
#ui-guide .g-right{
  animation: nudgeR 1.2s ease-in-out infinite;
}

@keyframes nudgeL{
  0%,100%{ transform: translateX(0); opacity:.7; }
  50%{ transform: translateX(-10px); opacity:1; }
}
@keyframes nudgeR{
  0%,100%{ transform: translateX(0); opacity:.7; }
  50%{ transform: translateX(10px); opacity:1; }
}
}



/* ===== PC(>=1300) の縦ビュー切替 =========================================================== */
@media (min-width: 1300px) {
  body.view-y-top { --opY: 0; }
  body.view-y-mid { --opY: 0.5; }
  body.view-y-bot { --opY: 1; }

  #scene-img { object-position: 50% calc(var(--opY, 0.5) * 100%); }

  /* クリック矢印 */
  .y-nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:50;
    width:80px;height:80px;
    border-radius:999px;
    display:none;
    place-items:center;
    cursor:pointer;
    user-select:none;
    font-size: 3.0rem;
    color: #ffffff;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.585));
  }
  .y-nav.is-show{ display:grid; }
  .y-nav--up{ top:14px; }
  .y-nav--down{ bottom:14px; }

  /* hoverゾーン */
  .y-hover-zone{
    position:absolute;
    left:25%;
    width:50%;
    height:10%;
    z-index:40;
  }
  .y-hover-zone--top{ top:0; }
  .y-hover-zone--bot{ bottom:0; }
}

@media (max-width: 1299px){
  .y-nav, .y-hover-zone{ display:none !important; }
}




/***********************************************************************************************************************/
@media  (min-width:768px) and  (max-width:1199px){
  #scene{
    touch-action: none; 
    width: 100%;
    height:100svh;
    overflow: hidden;
  }

  #scene .scene-inner{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* まず中央 */
  }

}










/* スマホ */
@media (max-width:767px){
  .intro__title{
    min-width: 315px;    
    font-size:clamp(20px, 11vw, 100px);
  }
  #scene{
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    position: relative;
    touch-action: none; /* 自前で操作する前提 */
  }

  #scene .scene-inner{
    width: 100svh;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* まず中央 */
  }
/*
  #scene .scene-inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
*/
  #pc-hotspot{
    top: 10%;
  }
  #note-hotspot{
    width: 17%;
    height: 20%;
  }
  #scene.is-cabinet img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 0%r;
  display: block;
  }
  #scene.is-room img{
    object-position: center center;
  }

.teaser-hotspot{
  position: absolute;
  left: 81%;
  top: 70%;
  width: 9%;
  height: 6%;
  display: none;
  cursor: pointer;
}

.cabinet-tools{
  top: 35%;
}
.cab-tool-slot-1 {
  top: 40%;
}

.cab-tool-slot-2 {
  top: 75%;
}

.cabinet-shelf{
  position: absolute;
  left: 20%;
  top: 42%;
  width: 40%;   /* 20%→60% なら幅は40% */
  height: 12%;  /* 天板の高さ分（仮）。あとで調整 */

}
}


@media (max-width: 767px) and (orientation: landscape) {
  /* スマホ横向き専用 */

.nailpuller-hint-box{
  top: 18%;
}

.cabinet-shelf{
  top:41%
}


}