:root{
  --bg: #0b0b0d;
  --txt: #e8e6e3;
  --muted: #b7b2aa;
  --accent: #7fffd4;
  --line: #2a2a36;

  /* ====== 部屋レイアウト調整つまみ ====== */
  --roomW: 1600px;
  --roomH: 1300px;

  --windowW: 560px;

  --shelfW: 740px;
  --shelfRight: 380px;
  --shelfBottom: 10px;

  --tvW: 620px;
  --tvRight: 460px;
  --tvBottom: 660px;

  --tvBaseW: 1024;
  --tvScale: calc(var(--tvW) / (var(--tvBaseW) * 1px));

  /* idle gif微調整（必要なら） */
  --idleNudgeX: 0px;
  --idleNudgeY: 0px;

  /* handの位置・サイズ */
  --handW: 560px;
  --handRight: 0px;
  --handBottom: 130px;

  /* トレー上に置く画像の位置（hand画像に対する相対） */
  --trayLeft: 102px;
  --trayTop: -183px;
  --trayW: 300px;
  --trayH: 260px;
}

/* base */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family:
    "MS PGothic",
    "MS UI Gothic",
    "ＭＳ ゴシック",
    "MS Gothic",
    monospace;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

/* header */
.topbar{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0f0f13, #09090b);
}
.logo{
  margin:0;
  font-size: 22px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(127,255,212,.15);
}
.sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* layout (左メニュー廃止) */
.layout{ padding: 14px; }
.stage{ min-width: 0; }

/* ====== ROOM ====== */
.room{
  position: relative;
  width: min(var(--roomW), 100%);
  min-height: var(--roomH);
  height: auto;
  margin: 0 auto 40px;

  overflow: visible;
  border: 1px solid var(--line);
  background: #070709;
  box-shadow:
    0 20px 70px rgba(0,0,0,.6),
    inset 0 0 120px rgba(0,0,0,.35);
}

.wall{
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 0;
  background: url("TVROOM/wall.jpg") 0 0 / 220px auto repeat;
  filter: saturate(0.95) contrast(1.02);
}

.floor{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 420px;
  z-index: 1;
  background: url("TVROOM/floor.jpg") center / 520px auto repeat;
  filter: saturate(0.95) contrast(1.03);
}

/* window wrap */
.window-wrap{
  position: absolute;
  left: -10px;
  top: 40px;
  width: var(--windowW);
  z-index: 2;
}

.window-outside{
  position: absolute;
  left: 98px;
  top: 80px;
  width: 340px;
  height: 560px;
  background: url("TVROOM/outside.gif") center / cover no-repeat;
  filter: contrast(1.05) saturate(1.05);
  overflow: hidden;
  border-radius: 10px;
  clip-path: polygon(
    0% 14%,  6% 8%,  14% 4%,  25% 2%,  38% 1%,  50% 0%,
    62% 1%,  75% 2%,  86% 4%,  94% 8%,  100% 14%,
    100% 100%, 0% 100%
  );
  box-shadow: 0 0 18px rgba(255,255,255,.10);
}

.window{
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0.95;
  filter: brightness(0.95) drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

/* poster */
.poster{
  position: absolute;
  right: 80px;
  top: 70px;
  width: 260px;
  z-index: 3;
  transform: rotate(1.1deg);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.65));
}

/* shelf */
.shelf{
  position: absolute;
  right: var(--shelfRight);
  bottom: var(--shelfBottom);
  width: var(--shelfW);
  height: auto;
  z-index: 4;
  filter:
    brightness(1.06)
    saturate(1.12)
    drop-shadow(0 22px 38px rgba(0,0,0,.65));
}

/* TV */
.tv-area{
  position: absolute;
  right: var(--tvRight);
  bottom: var(--tvBottom);
  z-index: 6;
}
.tv-wrap{
  position: relative;
  width: var(--tvW);
}
.tv-img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.screen{
  position: absolute;
  left:  calc(134px * var(--tvScale));
  top:   calc(130px * var(--tvScale));
  width: calc(584px * var(--tvScale));
  height:calc(437px * var(--tvScale));

  z-index: 1;
  overflow: hidden;
  border-radius: calc(12px * var(--tvScale));
  background: #0a0a0a;
  box-shadow: inset 0 0 calc(24px * var(--tvScale)) rgba(0,0,0,.75);
  animation: crt-flicker 0.12s infinite;
}

.screen-inner{
  width: 100%;
  height: 100%;
  position: relative;
  filter: blur(0.15px) contrast(1.05) saturate(1.08);
}

/* CRT overlay */
.crt{
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 3px
  );
  mix-blend-mode: overlay;
}

@keyframes crt-flicker {
  0%   { opacity: 0.96; }
  50%  { opacity: 1; }
  100% { opacity: 0.97; }
}

/* TV content */
.screen img.cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screen iframe.yt{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.screen .textcard{
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: auto;
  background: #0d0d10;
  color: #e8e6e3;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* idle gif */
#idleGif{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: .95;
  transform: translate(var(--idleNudgeX, 0px), var(--idleNudgeY, 0px));
}

/* now playing */
.nowplaying{
  margin-top: 10px;
  width: calc(520px * var(--tvScale));
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(15,15,19,.65);
  padding: 8px 10px;
}
.np-label{ color: var(--accent); margin-right: 6px; }
.np-title{ color: var(--txt); }

/* ===== Hand prop ===== */
.hand-prop{
  position: absolute;
  right: var(--handRight);
  bottom: var(--handBottom);
  width: var(--handW);
  z-index: 7;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55));
  cursor: pointer;
  user-select: none;
}
.hand-img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* tray button sits on top of plate */
.tray-btn{
  position: absolute;
  left: var(--trayLeft);
  top: var(--trayTop);
  width: var(--trayW);
  height: var(--trayH);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.tray-item{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}

.hand-hint{
  position: absolute;
  right: 10px;
  bottom: 12px;
  font-size: 11px;
  color: rgba(232,230,227,.75);
  background: rgba(10,10,12,.45);
  border: 1px solid rgba(42,42,54,.7);
  padding: 5px 8px;
}

/* ===== Popup window：フォルダ風（灰）/ その場表示 / スクロール可 ===== */

/* 暗転は無効 */
.propwin-dim{ display:none !important; }

/* hidden は必ず消す */
.propwin[hidden]{ display:none !important; }

/* フォルダ本体 */
.propwin{
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: 440px;
  z-index: 20;

  background: #bdbdbd;
  border: 1px solid #4a4a4a;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #6e6e6e,
    0 18px 60px rgba(0,0,0,.55);

  max-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* フォルダのタブ */
.propwin-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 6px 8px 7px;
  cursor: move;

  background: linear-gradient(#d6d6d6, #b8b8b8);
  border-bottom: 1px solid #6b6b6b;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #8a8a8a;
}

.propwin-head::before{
  content:"";
  position:absolute;
  left: 10px;
  top: -10px;
  width: 160px;
  height: 12px;

  background: #cfcfcf;
  border: 1px solid #4a4a4a;
  border-bottom: none;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px 0 0 #8a8a8a;

  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

/* タイトル */
.propwin-title{
  position: relative;
  font-size: 12px;
  color: #1b1b1b;
  letter-spacing: .6px;
  padding-left: 6px;
}

/* × ボタン */
.propwin-close{
  width: 28px;
  height: 24px;
  border: 1px solid #4a4a4a;
  background: #c9c9c9;
  color: #111;
  cursor: pointer;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #8a8a8a;
}
.propwin-close:active{
  transform: translate(1px,1px);
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #8a8a8a;
}

/* 本文（スクロール領域） */
.propwin-body{
  padding: 10px;
  overflow: auto;

  background: #a9a9a9;

  box-shadow:
    inset 1px 1px 0 #dcdcdc,
    inset -1px -1px 0 #7a7a7a;
}

/* リスト */
.propwin-list{
  display: grid;
  gap: 6px;
}

/* クリック行（文字は動かさない） */
.propwin-item{
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: #0f0f0f;

  padding: 8px 10px;
  cursor: pointer;

  background: #cfcfcf;
  border: 1px solid #4a4a4a;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #8a8a8a;
}
.propwin-item:active{
  transform: translate(1px,1px);
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #8a8a8a;
}

/* 注釈 */
.propwin-note{
  margin-top: 10px;
  font-size: 11px;
  color: #1a1a1a;
  border-top: 1px solid #6b6b6b;
  padding-top: 8px;
  pointer-events: none;
}

/* =========================================
   FINAL RULE: 動くのは画像だけ
   ========================================= */

/* ウィンドウ内の文字/ボタンは絶対アニメしない */
.propwin,
.propwin *{
  animation: none !important;
  transform: none !important;
}

/* ふわふわ：hand画像だけ */
.hand-prop:hover .hand-img{
  animation: floaty 1.3s ease-in-out infinite !important;
}

/* ふわふわ：トレー画像だけ */
.tray-btn:hover .tray-item{
  animation: floaty 1.1s ease-in-out infinite !important;
}

/* ジャンプ：hand画像だけ（控えめ） */
.hand-prop.is-jump .hand-img{
  animation: jumpHand 0.26s ease-out !important;
}

/* ジャンプ：トレー画像（大きめ） */
.tray-item.is-jump{
  animation: jumpItem 0.26s ease-out !important;
}

/* hand本体は動かさない */
.hand-prop:hover,
.hand-prop.is-jump{
  animation: none !important;
  transform: none !important;
}

/* Anim defs */
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes jumpHand{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}
@keyframes jumpItem{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(-18px); }
  100%{ transform: translateY(0); }
}

/* 動きが苦手な環境では停止 */
@media (prefers-reduced-motion: reduce){
  .hand-prop:hover .hand-img,
  .tray-btn:hover .tray-item,
  .hand-prop.is-jump .hand-img,
  .tray-item.is-jump{
    animation: none !important;
  }
}
/* =========================
   Wall Posters (hand-taped)
   ========================= */

.wall-poster{
  position: absolute;
  z-index: 3;                 /* wall(0)より上、棚(4)より下にしたいなら3 */
  width: 260px;               /* 好きに調整 */
  height: auto;
  pointer-events: none;       /* ポスターをクリック対象にしない */
  filter:
    saturate(0.95)
    contrast(1.02)
    drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transform-origin: 50% 50%;
}

/* “マスキングテープ”風（上に2本） */
.wall-poster::before,
.wall-poster::after{
  content:"";
  position:absolute;
  top: -10px;
  width: 74px;
  height: 22px;
  background: rgba(230,230,230,.72);
  border: 1px solid rgba(120,120,120,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 6px 10px rgba(0,0,0,.28);
  transform: rotate(-6deg);
  opacity: .95;
}

/* 左上テープ */
.wall-poster::before{
  left: 10px;
}

/* 右上テープ（角度ちょい変える） */
.wall-poster::after{
  right: 10px;
  transform: rotate(7deg);
}

/* ---- 位置と傾き：適当に配置（ここを好みで動かす） ---- */
.wall-poster.p1{
  left: 540px;
  top: 50px;
  transform: rotate(-3.5deg);
  width: 260px;
}

.wall-poster.p2{
  left: 920px;
  top: 110px;
  transform: rotate(2.8deg);
  width: 240px;
}

.wall-poster.p3{
  left: 1320px;
  top: 497px;
  transform: rotate(-1.8deg);
  width: 250px;
}
/* =========================
   Dolls (floor-left props)
   ========================= */

.dolls{
  position: absolute;
  left: 120px;
  bottom: 120px;
  width: 600px;      /* 全体の許容幅 */
  height: 320px;
  z-index: 5;
  pointer-events: none;
}

/* =========================
   Doll base
   ========================= */

.doll{
  position: absolute;

  /* ▼ 個別調整用変数（デフォルト） */
  --x: 0px;          /* 左位置 */
  --y: 0px;          /* 下からの位置（高さ）←★追加 */
  --size: 120px;     /* 大きさ */
  --tilt: 0deg;      /* 初期傾き */
  --sway: 2.5deg;    /* 揺れ幅 */
  --speed: 1.6s;     /* 揺れ速度 */

  left: var(--x);
  bottom: var(--y);  /* ← ここがポイント */
  width: var(--size);
  height: auto;

  pointer-events: auto;
  cursor: default;

  transform-origin: 50% 100%;
  transform: rotate(var(--tilt));

}

/* =========================
   Hover sway (image only)
   ========================= */

@keyframes doll-sway{
  0%   { transform: rotate(calc(var(--tilt))); }
  25%  { transform: rotate(calc(var(--tilt) + var(--sway))); }
  50%  { transform: rotate(calc(var(--tilt))); }
  75%  { transform: rotate(calc(var(--tilt) - var(--sway))); }
  100% { transform: rotate(calc(var(--tilt))); }
}

.doll:hover{
  animation: doll-sway var(--speed) ease-in-out infinite;
}

/* =========================
   Individual settings
   ========================= */

.doll.d1{
  --x: -80px;
--y: -10px;
  --size: 270px;
  --tilt: -2deg;
  --sway: 2deg;
}

.doll.d2{
  --x: 100px;
--y: -10px;
  --size: 225px;
  --tilt: 1.5deg;
  --sway: 3deg;
}

.doll.d3{
  --x: 260px;
--y: -17px;
  --size: 165px;
  --tilt: -1deg;
  --sway: 2.5deg;
}

.doll.d4{
  --x: -30px;
  --y: 110px;
  --size: 435px;
  --tilt: 2deg;
  --sway: 3deg;
}

/* =========================
   Motion safety
   ========================= */

@media (prefers-reduced-motion: reduce){
  .doll:hover{
    animation: none;
  }
}
/* =========================
   Room top & bottom frill
   ========================= */

.room-frill{
  position: absolute;
  top: -6px;              /* 上フリル */
  left: 0;
  width: 100%;
  height: 72px;

  background-image: url("TVROOM/flir.png");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 100%;

  z-index: 8;
  pointer-events: none;

  /* 手貼り感 */
  transform: rotate(-0.3deg);
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.35))
    saturate(1.05);
}

/* ===== 下フリル（180度反転） ===== */
.room-frill-bottom{
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 72px;

  background: url("TVROOM/flir.png") repeat-x bottom center / auto 100%;
  transform: rotate(180deg);

  z-index: 8;
  pointer-events: none;

  filter: drop-shadow(0 -4px 6px rgba(0,0,0,.35)) saturate(1.05);
}

/* =========================
   Screen edge pillars
   ========================= */

.pillar{
  position: absolute;
  top: 60px;                 /* 上フリルより少し下 */
  height: calc(100% - 120px);/* 画面に収まる高さ */
  width: auto;

  z-index: 20;               /* roomより前、UIより後 */
  pointer-events: none;

  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.45))
    saturate(0.95);

  opacity: 0.98;
}

/* 左柱 */
.pillar-left{
  left: -140px;               /* 画面外に少しはみ出す */
}

/* 右柱（左右反転） */
.pillar-right{
  right: -140px;
  transform: scaleX(-1);
}
.stage{
  position: relative;
  overflow: hidden; /* 柱のはみ出しを綺麗に切る */
}
/* =========================
   Edge man (over poal)
   ========================= */

/* 個別調整つまみ */
:root{
  --edgeManW: 490px;       /* 大きさ */
  --edgeManTop: 550px;     /* 上からの位置 */
  --edgeManGap: 10px;      /* 画面端からの余白 */
  --edgeManTiltL: 0deg;    /* 左の傾き（必要なら） */
  --edgeManTiltR: 0deg;    /* 右の傾き（必要なら） */
}

.edge-man{
  position: fixed;
  top: var(--edgeManTop);
  width: var(--edgeManW);
  height: auto;

  z-index: 999;            /* poalより上にする */
  pointer-events: none;    /* 飾り */
  user-select: none;

  /* ちょい馴染ませる影 */
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
  transform-origin: 50% 50%;
}

/* 左：左右反転して “手をroomへ” */
.edge-man-left{
  left: var(--edgeManGap);
  transform: scaleX(-1) rotate(var(--edgeManTiltL));
}

/* 右：そのまま */
.edge-man-right{
  right: var(--edgeManGap);
  transform: rotate(var(--edgeManTiltR));
}
@keyframes breath {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(2px) scale(1.01); }
}

.edge-man:hover{
  animation: breath 2.8s ease-in-out infinite;
}
/* =========================
   Corner ornaments (page-anchored)
   スクロールに追従しない＝ページに貼り付く
   ========================= */

:root{
  --ornTop: 3px;
  --ornLeft: 330px;
  --ornRight: 0px;
  --ornW: 320px;
  --ornZ: 1; /* poalより下 */
}

.corner-ornaments{
  position: absolute; /* ★ fixedやめる */
  left: 0;
  top: 0;
  width: 100%;
  height: 0;          /* 飾りだけなので高さゼロでOK */
  pointer-events: none;
  z-index: var(--ornZ);
}

.corner-ornaments .ornament{
  position: absolute;
  top: var(--ornTop);
  width: var(--ornW);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* 左：左右反転 */
.corner-ornaments .orn-l{
  left: var(--ornLeft);
  transform: scaleX(-1) rotate(-1.2deg);
  transform-origin: top left;
}

/* 右 */
.corner-ornaments .orn-r{
  right: var(--ornRight);
  transform: rotate(1.2deg);
  transform-origin: top right;
}
/* =========================
   Global floral frill
   page-wide decoration
   ========================= */

.page-frill{
  position: fixed;        /* ページ全体に常にかかる */
  top: 0;
  left: 0;

  width: 100vw;
  height: 140px;          /* 画像高さに合わせて調整 */

  background-image: url("TVROOM/hana.png");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 100%;

  z-index: 100;             /* room・poalより下にしたいなら調整 */
  pointer-events: none;

  /* ちょっと紙貼り感 */
  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,.35))
    saturate(1.05);
}
/* ========================
   Split layout (image + text)
   ======================== */

.splitcard{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左:画像 / 右:テキスト */
  gap: 10px;
  padding: 10px;
  background: #0d0d10;
}

.split-left,
.split-right{
  border-radius: 8px;
  overflow: hidden;
}

/* 青枠：画像 */
.split-left{
  border: 3px solid #2f7dff; /* 青枠 */
  background: rgba(10,10,12,.75);
  display: grid;
  place-items: center;
}
.split-left img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 写真が潰れない */
  display: block;
}

/* 緑枠：文字 */
.split-right{
  border: 3px solid #7cff2f; /* 緑枠 */
  background: rgba(10,10,12,.75);
  color: #e8e6e3;
  padding: 10px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
/* cover + text split */
.screen .split{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* 左=画像、右=文章 */
  gap: 10px;
  padding: 12px;
  background: #0d0d10;
  overflow: hidden;
}

.screen .split .split-img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像は潰さない */
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}

.screen .split .split-text{
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}