/* ═══════════════════════════════════════════════════════════
   家・庭づくり画面（main/home/*.js）
   ═══════════════════════════════════════════════════════════ */
.hm{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;gap:6px;
  padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 30%,#1d1640 0%,#0b0820 70%,#05040e 100%);
  color:var(--tx-b,#deccf8);font-family:var(--dot,'DotGothic16',sans-serif);
  overflow:hidden;-webkit-user-select:none;user-select:none;outline:none;}
body.home-open{overflow:hidden;}
.hm *{box-sizing:border-box;}

/* ヘッダー */
.hm-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:0 0 auto;}
.hm-title{flex:1 1 auto;min-width:0;font-size:.95rem;letter-spacing:.06em;color:#fff3d8;
  text-shadow:0 0 8px rgba(255,200,120,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-tabs{display:flex;gap:4px;}

/* ボタン（タップ領域は 44px 以上） */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;
  padding:4px 10px;border:2px solid #7d64c8;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#2c2266,#1a1442);color:#efe6ff;font:inherit;font-size:.8rem;line-height:1.2;
  box-shadow:0 0 0 1px #04020c,inset 0 1px 0 rgba(255,255,255,.12);touch-action:manipulation;}
.hm-btn:hover:not(:disabled){border-color:#d9ccff;}
.hm-btn:focus-visible{outline:3px solid #00e8c8;outline-offset:1px;}
.hm-btn:active:not(:disabled){transform:translateY(1px);}
.hm-btn:disabled{opacity:.42;cursor:default;filter:saturate(.4);}
.hm-btn.hm-primary:not(:disabled){border-color:#ffd98a;background:linear-gradient(180deg,#6a4a1c,#3e2a10);color:#fff4cc;}
.hm-btn.on,.hm-tab[aria-selected="true"]{border-color:#00e8c8;background:linear-gradient(180deg,#14506a,#0c2c44);color:#e4fff8;}
.hm-ic{width:22px;height:22px;image-rendering:pixelated;image-rendering:crisp-edges;flex:0 0 auto;}
.hm-btn-t{white-space:nowrap;}
.hm-close{flex:0 0 auto;}

/* 盤面 */
.hm-stage{flex:1 1 0;min-height:120px;position:relative;overflow:hidden;}
.hm-cv{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:pointer;
  border:2px solid #3a2a60;border-radius:4px;box-shadow:0 0 0 2px #04020c,0 10px 26px rgba(0,0,0,.6);background:#140f2c;}
.hm.editing .hm-cv{border-color:#00e8c8;cursor:crosshair;}

/* 案内 */
.hm-mode{flex:0 0 auto;font-size:.7rem;color:#9a8cc0;letter-spacing:.06em;}
.hm.editing .hm-mode{color:#7dffe0;}
.hm-info{flex:0 0 auto;min-height:2.9em;padding:6px 10px;border-radius:6px;font-size:.78rem;line-height:1.45;
  background:rgba(10,7,22,.86);border:1px solid rgba(125,100,200,.45);color:#efe6ff;}
.hm-info.warn{border-color:#ff6a80;background:rgba(60,10,24,.9);color:#ffe0e6;}
.hm-info.warn::before{content:'✕ ';color:#ff8aa0;font-weight:bold;}

/* 行動ボタン */
.hm-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;}
.hm-row{display:flex;flex-wrap:wrap;gap:4px;}
.hm-row .hm-btn{flex:1 1 0;min-width:64px;}

/* 収納（模様替え） */
.hm-drawer{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;}
.hm-drawer[hidden]{display:none;}
.hm-chips{display:flex;gap:4px;}
.hm-chip{min-height:36px;font-size:.72rem;padding:2px 8px;flex:1 1 0;}
@media (pointer:coarse){.hm-chip{min-height:44px;}}
.hm-inv{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.hm-inv-i{flex:0 0 auto;width:84px;min-height:92px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;
  border:2px solid #4a3a80;border-radius:6px;background:#17113a;color:#efe6ff;font:inherit;font-size:.66rem;line-height:1.25;cursor:pointer;scroll-snap-align:start;}
.hm-inv-i.on{border-color:#00e8c8;background:#0f2f44;}
.hm-inv-i.empty{opacity:.55;}
.hm-inv-i.ng .hm-inv-c{color:#ffb0bd;}
.hm-inv-i:focus-visible{outline:3px solid #00e8c8;}
.hm-item-ic{width:40px;height:40px;image-rendering:pixelated;image-rendering:crisp-edges;flex:0 0 auto;}
.hm-inv-n{text-align:center;word-break:break-all;max-height:2.6em;overflow:hidden;}
.hm-inv-c{color:#ffe08a;}
.hm-empty{font-size:.75rem;color:#9a8cc0;padding:8px;}

/* クラフト */
.hm-craft{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(4,2,14,.72);padding:10px;}
.hm-craft[hidden]{display:none;}
.hm-craft-box{width:min(560px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;
  border-radius:8px;background:linear-gradient(180deg,#231a56 0%,#161040 40%,#0e0a2c 100%);border:2px solid #7d64c8;box-shadow:0 0 0 2px #04020c,0 12px 30px rgba(0,0,0,.6);}
.hm-craft-head{display:flex;align-items:center;gap:8px;}
.hm-craft-title{font-size:1rem;color:#fff3d8;}
.hm-craft-cost{flex:1;font-size:.7rem;color:#9a8cc0;}
.hm-mats{display:flex;flex-wrap:wrap;gap:6px;font-size:.75rem;}
.hm-mat{padding:3px 8px;border-radius:10px;background:rgba(0,232,200,.08);border:1px solid rgba(0,232,200,.35);}
.hm-recipes{display:flex;flex-direction:column;gap:6px;}
.hm-recipe{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;background:rgba(10,7,22,.7);border:1px solid #4a3a80;}
.hm-recipe.locked{opacity:.65;}
.hm-recipe-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hm-recipe-name{font-size:.85rem;color:#fff3d8;}
.hm-recipe-note{font-size:.68rem;color:#b8a8e0;}
.hm-need{display:flex;flex-wrap:wrap;gap:4px;font-size:.68rem;}
.hm-need-i{padding:1px 6px;border-radius:8px;}
.hm-need-i.ok{background:rgba(68,238,136,.12);color:#b8ffd0;}
.hm-need-i.ng{background:rgba(232,48,85,.16);color:#ffc0cc;}
.hm-q{display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#9a8cc0;border:2px dashed #4a3a80;border-radius:6px;}

/* 会話・選択・入力（家の画面の外でも使える） */
.hm-dlg{position:fixed;inset:0;z-index:9100;display:none;align-items:flex-end;justify-content:center;padding:12px 10px max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,2,14,0) 30%,rgba(4,2,14,.55) 100%);font-family:var(--dot,'DotGothic16',sans-serif);}
.hm-dlg.on{display:flex;}
.hm-dlg-box{width:min(620px,100%);display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:8px;color:#efe6ff;
  background:linear-gradient(180deg,#231a56 0%,#161040 38%,#0e0a2c 70%,#0a0720 100%);border:2px solid #d9ccff;
  box-shadow:0 0 0 2px #04020c,inset 0 0 0 2px #241650,0 8px 22px rgba(0,0,0,.55);}
.hm-choice,.hm-prompt{flex-direction:column;align-items:stretch;}
.hm-dlg-face{width:72px;height:72px;object-fit:cover;object-position:top;border-radius:6px;border:2px solid #7d64c8;background:#120c30;flex:0 0 auto;}
.hm-dlg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.hm-dlg-name{font-size:.75rem;color:#00e8c8;letter-spacing:.1em;}
.hm-dlg-text{font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.hm-dlg-text.narr{color:#d8cff0;font-style:normal;}
.hm-dlg-next{align-self:flex-end;min-height:44px;min-width:88px;border:none;background:none;color:#ffe08a;font:inherit;font-size:.75rem;cursor:pointer;}
.hm-dlg-next:focus-visible{outline:3px solid #00e8c8;}
.hm-choice-list{display:flex;flex-direction:column;gap:6px;}
.hm-choice-list.hm-row{flex-direction:row;}
.hm-choice-btn{justify-content:flex-start;flex-direction:column;align-items:flex-start;text-align:left;}
.hm-choice-sub{font-size:.68rem;color:#b8a8e0;}
.hm-input{min-height:44px;width:100%;padding:6px 10px;font:inherit;font-size:1rem;border-radius:6px;border:2px solid #7d64c8;background:#0b0820;color:#fff;-webkit-user-select:text;user-select:text;}
.hm-input:focus{outline:3px solid #00e8c8;}

/* 通知 */
.hm-toast-stack{position:fixed;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9200;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,460px);}
.hm-toast{padding:8px 12px;border-radius:6px;font-family:var(--dot,'DotGothic16',sans-serif);font-size:.78rem;line-height:1.45;text-align:center;color:#fff8e8;
  background:rgba(20,14,48,.95);border:1px solid #ffd98a;box-shadow:0 4px 14px rgba(0,0,0,.5);transition:opacity .5s;}
.hm-toast.out{opacity:0;}

/* PC：横に余裕があれば収納と操作を広く */
@media (min-width:900px){
  .hm{padding:14px 24px;}
  .hm-title{font-size:1.1rem;}
  .hm-actions,.hm-drawer,.hm-info,.hm-mode{width:min(980px,100%);align-self:center;}
  .hm-inv-i{width:96px;}
}
@media (max-height:560px){
  .hm-info{min-height:0;font-size:.72rem;padding:4px 8px;}
  .hm-mode{display:none;}
}
@media (prefers-reduced-motion:reduce){.hm-toast{transition:none;}}
@media (max-width:460px){
  .hm-title-t{font-size:.8rem;}
  .hm-head{flex-wrap:nowrap;}
  .hm-title{flex:1 1 0;}
  .hm-head .hm-btn{padding:4px 7px;}
}
@media (max-width:380px){.hm-head .hm-ic{display:none;}}

/* PC・横長画面：盤面を左に大きく、操作と収納を右の列に */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .hm{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,30vw,420px);
    grid-template-rows:auto auto auto auto minmax(0,1fr);column-gap:18px;row-gap:8px;}
  .hm-head{grid-column:1/-1;}
  .hm-stage{grid-column:1;grid-row:2/6;min-height:0;}
  .hm-mode,.hm-info,.hm-actions,.hm-drawer{grid-column:2;width:auto;align-self:start;}
  .hm-drawer{grid-row:5;min-height:0;max-height:100%;overflow-y:auto;}
  .hm-inv{flex-wrap:wrap;overflow:visible;}
  .hm-inv-i{width:calc(33.3% - 4px);}
  .hm-actions .hm-btn{font-size:.76rem;}
}
/* お知らせは見出しのボタンに重ならないよう、見出しの下に出す */
.hm-toast-stack{top:calc(max(8px,env(safe-area-inset-top)) + 54px);}

/* ═══ フェーズ3：季節・天候の見出し／広げた盤面のスクロール／外観・内装／写真 ═══ */
.hm-title{display:flex;flex-direction:column;justify-content:center;line-height:1.25;}
.hm-title-t{overflow:hidden;text-overflow:ellipsis;}
.hm-sw{font-size:.68rem;letter-spacing:.08em;color:#9fe2c8;text-shadow:none;overflow:hidden;text-overflow:ellipsis;}
.hm-sw[hidden]{display:none;}
/* 広げた庭がスマホで小さくなりすぎるときは、盤面を横にスクロール */
.hm-stage.hm-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;display:flex;align-items:center;}
.hm-stage.hm-scroll .hm-cv{position:relative;left:auto;top:auto;transform:none;margin:auto 4px;flex:0 0 auto;touch-action:pan-x;}
/* 外観・内装（模様替えの下の欄） */
.hm-look{display:flex;flex-direction:column;gap:6px;padding:6px 8px;border-radius:6px;background:rgba(10,7,22,.7);border:1px solid #4a3a80;}
.hm-look-h{font-size:.74rem;color:#fff3d8;}
.hm-look-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hm-look-l{flex:0 0 3.4em;font-size:.74rem;color:#b8a8e0;}
.hm-look-opts{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 0;min-width:0;}
.hm-look-b{flex:0 1 auto;min-width:0;gap:5px;}
.hm-swatch{width:16px;height:16px;border-radius:3px;border:2px solid #1b1226;box-shadow:0 0 0 1px rgba(255,255,255,.35);flex:0 0 auto;}
.hm-look-note{font-size:.66rem;color:#9a8cc0;}
/* 家の改修（クラフト画面の下） */
.hm-craft-sub{font-size:.85rem;color:#ffe08a;margin-top:6px;}
.hm-recipe.done{opacity:.7;}
/* 写真 */
.hm-photo{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(4,2,14,.78);padding:10px;}
.hm-photo-box{width:min(620px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;
  background:linear-gradient(180deg,#231a56 0%,#161040 40%,#0e0a2c 100%);border:2px solid #ffd98a;box-shadow:0 0 0 2px #04020c,0 12px 30px rgba(0,0,0,.6);}
.hm-photo-cv{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:4px;background:#1b1226;}
.hm-photo-name{font-size:.68rem;color:#b8a8e0;word-break:break-all;}
.hm-photo-msg{min-height:1.4em;font-size:.78rem;color:#fff3d8;}
.hm-photo-note{font-size:.64rem;color:#9a8cc0;}
.hm-look-top{display:flex;align-items:center;gap:6px;}
.hm-look-top .hm-look-h{flex:1 1 auto;min-width:0;}
.hm-look-back{flex:0 0 auto;}
.hm-chip-look{flex:1.3 1 0;}
/* 最初の状態に戻す：絞り込みの下の段にひとつだけ（控えめな色。押すと確認が出る） */
.hm-chips{flex-wrap:wrap;}
.hm-chip-reset{flex:1 1 100%;color:#ffd0b0;border-color:#8a5a6a;white-space:nowrap;}
/* 素材アイコン（main/home/sprites.js の HOME_ART.icon('mat.*')） */
.hm-mat,.hm-need-i{display:inline-flex;align-items:center;gap:3px;}
.hm-mat-ic{width:20px;height:20px;image-rendering:pixelated;flex:0 0 auto;}
.hm-need-i .hm-mat-ic{width:18px;height:18px;}
.hm-toast .hm-toast-ic{width:20px;height:20px;image-rendering:pixelated;vertical-align:-5px;margin-right:6px;}