* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:#000; font-family:sans-serif; }
#root { position:fixed; inset:0; background:#000; }

#frame { position:absolute; background:#000; overflow:visible; isolation:isolate; z-index:0; }
#frame::after { content:""; position:absolute; inset:0; box-shadow:0 0 0 9999px rgba(0,0,0,1); pointer-events:none; z-index:2; }
#video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
#scene { position:absolute; inset:0; z-index:10; touch-action:none; }

#fxCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:16; pointer-events:none; }
#fxCenterHandle { position:absolute; z-index:60; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%; border:2px solid #4dd0e1;
  background:rgba(77,208,225,.25); display:none; touch-action:none; cursor:grab; }
#fxCenterHandle.show { display:block; }
#fxCenterHandle::after { content:"＋"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }

/* ===== 擬音（オノマトペ）レイヤー：エフェクト(16)の上・吹き出し(20)の下 ===== */
#soundLayer { position:absolute; inset:0; z-index:18; touch-action:none; pointer-events:none; }
#soundLayer.active { pointer-events:auto; }   /* 擬音モードの間だけ空きスペースのタップを受ける */
.soundwrap { position:absolute; inset:0; pointer-events:none; }
.sound { position:absolute; transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;
  pointer-events:none; cursor:grab; touch-action:none; }
#soundLayer.active .sound { pointer-events:auto; }   /* 擬音モードのときだけ擬音に触れる */
.sound.dragging { cursor:grabbing; opacity:.85; }
.sound.selected { outline:2px dashed rgba(255,152,0,.9); outline-offset:2px; }

#bubbleLayer { position:absolute; inset:0; z-index:20; touch-action:none; pointer-events:none; }
.bubble { position:absolute; pointer-events:auto; touch-action:none; cursor:grab; transform-origin:center center; }
.bubble.dragging { cursor:grabbing; }
.bubble.selected .bubble-svg { outline:2px dashed rgba(77,208,225,.9); outline-offset:3px; border-radius:6px; }
.bubble-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* ===== 天気パネル（すべてのレイヤーの上・縦並び／イラストを主役に） ===== */
#weatherLayer { position:absolute; inset:0; z-index:30; pointer-events:none; }
.weather-panel { position:absolute; pointer-events:auto; touch-action:none; cursor:grab;
  transform-origin:top left; user-select:none; -webkit-user-select:none; }
.weather-panel.dragging { cursor:grabbing; }
.weather-panel.selected { outline:2px dashed rgba(77,208,225,.95); outline-offset:4px; border-radius:14px; }
.wp-inner { display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 16px; border-radius:14px; }
.wp-inner.wp-bg-white  { background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.18); }
.wp-inner.wp-bg-clear  { background:none; }
/* 表示順：市町村名 → 時刻/いつ → イラスト（主役） → 気温 → 降水確率＋湿度 */
.wp-city  { font-size:12px; font-weight:700; letter-spacing:1px; order:1; margin-bottom:0; }
.wp-time  { font-size:10px; opacity:.8; order:2; margin-bottom:1px; }
.wp-when  { font-size:11px; letter-spacing:2px; opacity:.85; order:2; margin-bottom:1px; }
.wp-mark  { line-height:1; order:3; margin:3px 0 4px; }
.wp-mark svg { display:block; width:96px; height:auto; }   /* ← イラストを一番大きく（主役） */
.wp-temp  { font-weight:700; font-size:18px; order:4; }     /* イラストより控えめ */
.wp-temp .wp-sep { opacity:.55; margin:0 4px; font-weight:400; }
.wp-hum   { opacity:.85; font-size:12px; order:5; }

/* ===== 午前・午後・夜間 の3区分表示 ===== */
.wp-periods { order:3; display:flex; justify-content:center; align-items:flex-end; gap:8px; margin:3px 0 4px; }
.wp-period  { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:40px; }
.wp-pname   { font-size:11px; letter-spacing:1px; opacity:.85; }
.wp-pmark   { line-height:0; }
.wp-pmark svg { display:block; width:46px; height:auto; }   /* 区分マークは主役より小さめ */
.wp-ppop    { display:inline-flex; align-items:center; gap:2px; font-size:11px; line-height:1; }
.wp-ppop .wp-metaicon { display:inline-flex; align-items:center; }
.wp-ppop .wp-metaicon svg { display:block; width:12px; height:12px; }
.wp-temp.wp-temp-sm { font-size:16px; }   /* 3区分表示時の気温は少し小さく */

/* ===== 降水確率＋湿度（アイコン付き・横並び。降水確率が左、湿度が右） ===== */
.wp-meta { order:5; display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; margin-top:1px; }
.wp-meta .wp-metaitem { display:inline-flex; align-items:center; gap:3px; line-height:1; }
.wp-meta .wp-metaicon { display:inline-flex; align-items:center; }
.wp-meta .wp-metaicon svg { display:block; width:13px; height:13px; }

/* ===== 天気パネル 文字色（白背景） ===== */
/* まず共通の基準色（市町村名・気温など）を濃グレーに。個別色はこの後で上書き */
.wp-bg-white .wp-city, .wp-bg-white .wp-time, .wp-bg-white .wp-when,
.wp-bg-white .wp-temp, .wp-bg-white .wp-hum, .wp-bg-white .wp-meta { text-shadow:none; }
.wp-inner.wp-bg-white .wp-city  { color:#1f2933; }                 /* 市町村名：濃グレー */
.wp-inner.wp-bg-white .wp-time,
.wp-inner.wp-bg-white .wp-when  { color:#6b7785; opacity:1; }      /* きょう/時刻：中グレー */
.wp-inner.wp-bg-white .wp-temp  { color:#1f2933; }                 /* 気温ベース：濃グレー */
.wp-inner.wp-bg-white .wp-temp .wp-tmax { color:#ff8f00; }         /* 最高気温：オレンジ */
.wp-inner.wp-bg-white .wp-temp .wp-tmin { color:#2e90d9; }         /* 最低気温：青 */
.wp-inner.wp-bg-white .wp-temp .wp-sep  { color:#9aa5b1; }         /* 区切り「/」 */
.wp-inner.wp-bg-white .wp-hum   { color:#5a6b7a; opacity:1; }
.wp-inner.wp-bg-white .wp-meta  { color:#5a6b7a; }                 /* meta ベース */
.wp-inner.wp-bg-white .wp-meta .wp-pop  { color:#2e90d9; }         /* 降水確率：青（傘も同色） */
.wp-inner.wp-bg-white .wp-meta .wp-hum2 { color:#5a6b7a; opacity:1; } /* 湿度：青グレー（しずくも同色） */
/* 3区分（白背景）：区分名は中グレー、降水確率は青 */
.wp-inner.wp-bg-white .wp-pname { color:#6b7785; }
.wp-inner.wp-bg-white .wp-ppop  { color:#2e90d9; }

/* ===== 天気パネル 文字色（透過背景・写真の上） ===== */
.wp-bg-clear .wp-city, .wp-bg-clear .wp-time, .wp-bg-clear .wp-when,
.wp-bg-clear .wp-temp, .wp-bg-clear .wp-hum, .wp-bg-clear .wp-meta { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.wp-inner.wp-bg-clear .wp-temp .wp-tmax { color:#ffd166; }         /* 最高：明るいオレンジ */
.wp-inner.wp-bg-clear .wp-temp .wp-tmin { color:#8ec5ff; }         /* 最低：明るい水色 */
.wp-inner.wp-bg-clear .wp-meta .wp-pop  { color:#8ec5ff; }         /* 降水確率：明るい水色 */
.wp-inner.wp-bg-clear .wp-meta .wp-hum2 { color:#e6eef5; }         /* 湿度：ほぼ白 */
/* 3区分（透過背景）：区分名は白、降水確率は明るい水色。影付き */
.wp-bg-clear .wp-pname, .wp-bg-clear .wp-ppop { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.wp-inner.wp-bg-clear .wp-ppop { color:#8ec5ff; }

.wp-resize { position:absolute; right:-9px; bottom:-9px; width:22px; height:22px; border-radius:50%;
  background:rgba(77,208,225,.9); border:2px solid #fff; cursor:nwse-resize; display:none; touch-action:none; }
.weather-panel.selected .wp-resize { display:block; }
.wp-loading { font-size:12px; padding:6px 2px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.wp-bg-white .wp-loading { color:#333; text-shadow:none; }

.charwrap { position:absolute; }
.char { position:absolute; transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; cursor:grab; }
.char.dragging { cursor:grabbing; }
.char.selected { outline:2px dashed rgba(77,208,225,.9); outline-offset:2px; }
.shadow { position:absolute; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 75%); border-radius:50%; }

#guide { position:absolute; top:14px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.5); padding:8px 16px; border-radius:20px;
  font-size:13px; z-index:31; white-space:nowrap; transition:opacity .3s; }

.iconbtn { min-width:46px; height:42px; padding:0 12px; border-radius:21px; border:none;
  background:rgba(255,255,255,.18); color:#fff; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; }
.iconbtn.round { width:50px; min-width:50px; height:50px; border-radius:50%; padding:0; font-size:20px; }
.iconbtn.wide { width:auto; min-width:50px; height:50px; border-radius:25px; padding:0 12px; font-size:14px; }
.iconbtn:active { background:rgba(255,255,255,.32); }
.iconbtn.on { background:#4dd0e1; color:#063; }
#shutter { width:74px; height:74px; border-radius:50%; background:#fff;
  border:5px solid rgba(255,255,255,.5); cursor:pointer; flex:0 0 auto; }
#shutter:active { transform:scale(.92); }

#mainbar { position:fixed; z-index:40; display:flex; align-items:center; gap:12px;
  background:rgba(0,0,0,.4); border-radius:40px; padding:8px 12px;
  flex-wrap:nowrap; max-width:100vw; overflow:auto; scrollbar-width:none; }
#mainbar::-webkit-scrollbar { display:none; }
#full { position:fixed; z-index:40; }
#t-char { position:fixed; z-index:40; }
#t-sound { position:fixed; z-index:40; font-size:19px; font-weight:700; }
#t-fx { position:fixed; z-index:40; }
#t-bubble { position:fixed; z-index:40; }
#t-weather { position:fixed; z-index:40; }

#picker { position:fixed; z-index:40; display:flex; gap:8px; overflow:auto;
  background:rgba(0,0,0,.4); scrollbar-width:none; padding:8px; }
#picker::-webkit-scrollbar { display:none; }
.thumb { flex:0 0 auto; width:54px; height:54px; border-radius:10px;
  background:#222 center/contain no-repeat; border:3px solid transparent; cursor:pointer; }
.thumb.active { border-color:#4dd0e1; }

#tools { position:fixed; left:8px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:7px; flex-wrap:nowrap;
  background:rgba(0,0,0,.45); border-radius:26px; padding:9px 7px;
  max-height:96vh; overflow:auto; scrollbar-width:none; transition:opacity .2s; }
#tools::-webkit-scrollbar { display:none; }
#tools.disabled { opacity:.35; pointer-events:none; }
#tools button { width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.2); color:#fff; font-size:18px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; padding:0; }
#tools button.del { background:#e53935; }
#tools button.on  { background:#4dd0e1; color:#063; }

/* ===== 擬音モードのとき、キャラ専用ボタン（傾き・アクスタ化・影）を隠す ===== */
#tools.sound-mode #t-tilt,
#tools.sound-mode #t-acryl,
#tools.sound-mode #t-shadow { display:none; }

.popup { position:fixed; z-index:70; display:none; flex-direction:column; gap:10px;
  background:rgba(0,0,0,.85); border-radius:14px; padding:0 16px 14px; color:#fff; font-size:12px;
  min-width:210px; max-height:88vh; overflow:auto; scrollbar-width:none; }
.popup::-webkit-scrollbar { display:none; }
.popup.show { display:flex; }
.popup label { display:flex; align-items:center; gap:8px; }
.popup input[type=range] { flex:1; }
.popup input[type=text] { flex:1; background:#111; color:#fff; border:none; border-radius:8px; padding:4px; }
.popup .row { display:flex; justify-content:space-between; align-items:center; }
.popup .reset { background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:10px; padding:3px 8px; cursor:pointer; font-size:11px; }
.popup select { flex:1; background:#111; color:#fff; border:none; border-radius:8px; padding:4px; }
.popup select:disabled { opacity:.4; cursor:not-allowed; }
.popup input[type=color] { width:44px; height:26px; border:none; background:none; padding:0; }
.popup textarea { width:100%; background:#111; color:#fff; border:none; border-radius:8px; padding:6px; font-size:13px; resize:vertical; min-height:52px; }
.popup .del-btn { background:#e53935; border:none; color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-size:12px; }
.popup .info { font-size:11px; opacity:.8; line-height:1.4; }
.popup .btnrow { display:flex; gap:8px; }
.popup .btnrow button { flex:1; background:rgba(255,255,255,.18); border:none; color:#fff; border-radius:8px; padding:6px; cursor:pointer; font-size:12px; }
.popup .btnrow button:active { background:rgba(255,255,255,.34); }

.wp-status { font-size:11px; padding:6px 8px; border-radius:8px; line-height:1.4; }
.wp-status.info { background:rgba(255,255,255,.1); color:#ddd; }
.wp-status.ok   { background:rgba(77,208,225,.2); color:#b2ebf2; }
.wp-status.err  { background:rgba(229,57,53,.25); color:#ffcdd2; }

.pop-handle { position:sticky; top:0; margin:0 -16px 4px; padding:8px 38px 6px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.08); border-radius:14px 14px 0 0;
  cursor:grab; touch-action:none; user-select:none; font-size:11px; color:#bbb; }
.pop-handle:active { cursor:grabbing; }
.pop-handle::before { content:"⋮⋮"; letter-spacing:2px; }
.pop-close { position:absolute; top:5px; right:8px; width:26px; height:26px; z-index:2;
  border:none; border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.pop-close:active { background:rgba(255,255,255,.34); }

/* ============================================================
   縦画面レイアウト
   ============================================================ */
body.portrait #picker  { left:74px; right:0; bottom:150px; flex-direction:row; }
body.portrait #mainbar { left:50%; bottom:30px; transform:translateX(-50%); flex-direction:row; }
body.portrait #full     { right:14px; top:14px; }
body.portrait #t-char   { right:14px; top:76px; }
body.portrait #t-sound  { right:14px; top:138px; }
body.portrait #t-fx     { right:14px; top:200px; }
body.portrait #t-bubble { right:14px; top:262px; }
body.portrait #t-weather{ right:14px; top:324px; }
body.portrait #tools button { width:42px; height:42px; font-size:17px; }

/* ============================================================
   横画面レイアウト（右端から：丸ボタン列 → mainbar → picker の3段。重なり回避）
   ============================================================ */
/* 右端：丸ボタン列。縦位置は固定値をやめ、画面高さいっぱいに等間隔で配置 */
body.landscape #full     { right:10px; left:auto; top:6px; }
body.landscape #t-char   { right:10px; left:auto; top:calc(6px + (100vh - 12px - 50px) * 0.2); }
body.landscape #t-sound  { right:10px; left:auto; top:calc(6px + (100vh - 12px - 50px) * 0.4); }
body.landscape #t-fx     { right:10px; left:auto; top:calc(6px + (100vh - 12px - 50px) * 0.6); }
body.landscape #t-bubble { right:10px; left:auto; top:calc(6px + (100vh - 12px - 50px) * 0.8); }
body.landscape #t-weather{ right:10px; left:auto; top:calc(100vh - 6px - 50px); }

/* シャッターのある mainbar：丸ボタン列の内側へ（重ならないよう right を広げる） */
body.landscape #mainbar { right:56px; left:auto; top:50%; transform:translateY(-50%);
  flex-direction:column; max-height:96vh; }

/* イラスト選択バー（picker）：さらに内側へ（mainbar と重ならない位置） */
body.landscape #picker  { top:0; bottom:0; right:150px; left:auto; flex-direction:column; width:70px; }

body.landscape #tools { gap:5px; padding:8px 6px; max-height:98vh; }
body.landscape #tools button { width:36px; height:36px; font-size:14px; }

canvas { display:none; }
#fxCanvas { display:block; }