/* ==========================================================================
   小日子群島造型（scene.css）
   - 全部規則都掛在 body[data-skin="island"] 底下：經典造型（預設，不加 data-skin）
     完全不吃這個檔的任何一條規則，外觀零變動。
   - 顏色一律引用 styles.css 既有變數（--primary、--surface…），四套配色與深淺色自動跟著變。
   - 只包在 @media screen：列印輸出維持經典樣式，不印陰影。
   - 第 1 期：黏土質感的面板、按鈕、檢視切換、行程卡、輸入框、對話框。
     日期格的島嶼／房間造型在第 2、3 期加入。
   ========================================================================== */
@media screen {
  body[data-skin="island"] {
    --clay-hi: rgba(255, 255, 255, .75);
    --clay-lo: rgba(80, 60, 40, .07);
    --clay-drop: rgba(80, 60, 40, .10);
    --clay-sink: rgba(80, 60, 40, .10);
  }
  body.dark[data-skin="island"] {
    --clay-hi: rgba(255, 255, 255, .07);
    --clay-lo: rgba(0, 0, 0, .20);
    --clay-drop: rgba(0, 0, 0, .35);
    --clay-sink: rgba(0, 0, 0, .30);
  }

  /* 面板：凸起的軟陶板（上緣亮邊＋下緣暗邊＋柔和落影） */
  body[data-skin="island"] .panel {
    border-color: transparent;
    border-radius: 22px;
    box-shadow: 0 8px 18px var(--clay-drop), inset 0 2px 0 var(--clay-hi), inset 0 -3px 0 var(--clay-lo);
  }

  /* 一般按鈕：小顆軟陶，按下時往下沉 */
  body[data-skin="island"] .ghost-btn,
  body[data-skin="island"] .small-btn,
  body[data-skin="island"] .date-jump {
    border-color: transparent;
    box-shadow: 0 3px 8px var(--clay-drop), inset 0 2px 0 var(--clay-hi), inset 0 -2px 0 var(--clay-lo);
  }
  body[data-skin="island"] .ghost-btn:hover {
    box-shadow: 0 6px 14px var(--clay-drop), inset 0 2px 0 var(--clay-hi), inset 0 -2px 0 var(--clay-lo);
  }
  body[data-skin="island"] .ghost-btn:active,
  body[data-skin="island"] .small-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 3px var(--clay-drop), inset 0 2px 4px var(--clay-sink);
  }

  /* 主要按鈕：主色軟陶，亮邊與暗邊用半透明白／黑，配色切換時自動跟著主色 */
  body[data-skin="island"] .primary-btn {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 30%, transparent),
      inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .12);
  }
  body[data-skin="island"] .primary-btn:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 36%, transparent),
      inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .12);
  }
  body[data-skin="island"] .primary-btn:active {
    transform: translateY(2px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 24%, transparent), inset 0 2px 5px rgba(0, 0, 0, .18);
  }

  /* 檢視切換：下凹的軌道，選中的按鈕是凸起的主色小顆 */
  body[data-skin="island"] .view-switch {
    border-color: transparent;
    box-shadow: inset 0 2px 5px var(--clay-sink), inset 0 -1px 0 var(--clay-hi);
  }
  body[data-skin="island"] .view-btn.active {
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 30%, transparent),
      inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12);
  }

  /* 行程卡：薄薄一片軟陶，置頂卡保留琥珀內框 */
  body[data-skin="island"] .task-card {
    border-color: transparent;
    border-radius: 14px;
    box-shadow: 0 3px 8px var(--clay-drop), inset 0 1px 0 var(--clay-hi);
  }
  body[data-skin="island"] .task-card:hover {
    box-shadow: 0 6px 14px var(--clay-drop), inset 0 1px 0 var(--clay-hi);
  }
  body[data-skin="island"] .task-card.pinned {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55), 0 3px 8px var(--clay-drop), inset 0 1px 0 var(--clay-hi);
  }

  /* 輸入框：下凹的軟陶槽；保留邊框讓焦點狀態清楚 */
  body[data-skin="island"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
  body[data-skin="island"] select,
  body[data-skin="island"] textarea {
    box-shadow: inset 0 2px 4px var(--clay-sink);
  }

  /* 對話框：大塊軟陶卡片 */
  body[data-skin="island"] dialog {
    border-radius: 26px;
    box-shadow: 0 18px 40px var(--clay-drop), inset 0 2px 0 var(--clay-hi), inset 0 -3px 0 var(--clay-lo);
  }

  /* ------------------------------------------------------------------------
     第 2 期：月與週檢視的島嶼（scene.js 的 ensureIslandDefs()／islandArtHtml()）
     ------------------------------------------------------------------------ */
  /* 島上用色：草地取 --sport（每套配色都是綠色系）、屋頂取 --primary、金色取 --accent-amber，
     所以切換配色時整片群島一起換色。暗部統一帶藍紫、亮部帶暖黃（Figma 調整版定案）。 */
  body[data-skin="island"] {
    --isl-sea-hi: #eaf6f5; --isl-sea: #c4e0e6;
    --isl-soil-hi: #eccb9c; --isl-soil-lo: #6b4a33; --isl-shade: #23305e; --isl-warm: #fff3d6; --isl-ring: rgba(255, 255, 255, .65);
    --isl-grass: color-mix(in srgb, var(--sport) 45%, #bcd68f);
    --isl-grass-hi: color-mix(in srgb, var(--isl-grass) 35%, #f4fbe0);
    --isl-grass-lo: color-mix(in srgb, var(--isl-grass) 70%, #1f5a40);
    --isl-grass-lip: color-mix(in srgb, var(--isl-grass) 55%, #24543d);
    --isl-leaf: color-mix(in srgb, var(--isl-grass) 55%, #2f7d5a);
    --isl-leaf-hi: color-mix(in srgb, var(--isl-grass) 45%, #e6f7d4);
    --isl-leaf-lo: color-mix(in srgb, var(--isl-grass) 35%, #145a44);
    --isl-wall: #fffdf4; --isl-wall-lo: #f0dfc0; --isl-wall-sh: #cbb692; --isl-wall-sh2: #a48c6c;
    --isl-roof: var(--primary);
    --isl-roof-hi: color-mix(in srgb, var(--primary) 68%, #fff);
    --isl-roof-sh: color-mix(in srgb, var(--primary) 72%, #3a2a2a);
    --isl-roof-lo: color-mix(in srgb, var(--primary) 48%, #2a1a2a);
    --isl-amber: var(--accent-amber); --isl-mint: var(--sport);
    --isl-win: #8fb9d0; --isl-lamp: #ffd66b; --isl-sand: #f1dfb4; --isl-trunk: #9a7453; --isl-chimney: #d2ab82;
    --isl-tower-hi: #fffaf0; --isl-tower-lo: #bdb0b4; --isl-lantern: #e2574c;
    --isl-sun-hi: #ffe79a; --isl-moon: #f5edc9;
    --isl-cloud: #fffdf6; --isl-cloud-sh: #c9cfe6; --isl-rain: #d0d6e6; --isl-rain-sh: #9aa3c2;
    --isl-storm: #7b8492; --isl-storm-sh: #4a4f6e; --isl-drop: #6fa8d4; --isl-snow: #ffffff; --isl-fog: rgba(140, 150, 175, .55);
  }
  body.dark[data-skin="island"] {
    --isl-sea-hi: #23394f; --isl-sea: #14243a;
    --isl-soil-hi: #7d6450; --isl-soil-lo: #33251f; --isl-shade: #070a1c; --isl-warm: #ffe9b8; --isl-ring: rgba(255, 255, 255, .18);
    --isl-grass: color-mix(in srgb, var(--sport) 30%, #2c5743);
    --isl-grass-hi: color-mix(in srgb, var(--isl-grass) 70%, #6f9c7d);
    --isl-grass-lo: color-mix(in srgb, var(--isl-grass) 70%, #0f2219);
    --isl-grass-lip: color-mix(in srgb, var(--isl-grass) 55%, #10241b);
    --isl-leaf: color-mix(in srgb, var(--isl-grass) 60%, #1d4a38);
    --isl-leaf-hi: color-mix(in srgb, var(--isl-grass) 60%, #5d8c72);
    --isl-leaf-lo: color-mix(in srgb, var(--isl-grass) 40%, #0b1d16);
    --isl-wall: #bdb19e; --isl-wall-lo: #a0947f; --isl-wall-sh: #8f8472; --isl-wall-sh2: #6c6354;
    --isl-win: #39445a; --isl-sand: #8c7f63; --isl-trunk: #5d4635; --isl-chimney: #7a6450;
    --isl-tower-hi: #d6cfc4; --isl-tower-lo: #8a8088;
    --isl-cloud: #8f97ad; --isl-cloud-sh: #5b6178; --isl-rain: #6d7590; --isl-rain-sh: #474d66;
    --isl-storm: #4c5262; --isl-storm-sh: #2a2e3d; --isl-fog: rgba(170, 180, 205, .35);
  }

  /* 海面：月／週網格整片當成海，日期格是半透明的浮島區塊，裡面的行程卡維持實心好閱讀 */
  body[data-skin="island"] .month-grid,
  body[data-skin="island"] .week-grid {
    padding: 12px;
    border-radius: 22px;
    background: linear-gradient(var(--isl-sea-hi), var(--isl-sea));
    box-shadow: inset 0 2px 6px var(--clay-sink);
  }
  body[data-skin="island"] .month-day,
  body[data-skin="island"] .week-day {
    position: relative;
    border-color: transparent;
    background: color-mix(in srgb, var(--surface-strong) 42%, transparent);
    box-shadow: inset 0 1px 0 var(--clay-hi);
  }
  /* 熱力底色改由島上的房子多寡表現，這裡統一蓋掉（mh-* 只在經典造型生效） */
  body[data-skin="island"] .month-day.mh-1,
  body[data-skin="island"] .month-day.mh-2,
  body[data-skin="island"] .month-day.mh-3 {
    background: color-mix(in srgb, var(--surface-strong) 42%, transparent);
  }
  body[data-skin="island"] .month-day.today,
  body[data-skin="island"] .week-day.today {
    background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 70%, transparent), 0 6px 16px var(--clay-drop);
  }
  body[data-skin="island"] .month-day.holiday,
  body[data-skin="island"] .week-day.holiday {
    background: color-mix(in srgb, var(--danger) 8%, color-mix(in srgb, var(--surface-strong) 42%, transparent));
  }
  body[data-skin="island"] .month-day.outside { opacity: .5; filter: saturate(.6); }
  /* 今天的日期數字改成主色小膠囊 */
  body[data-skin="island"] .month-day.today .day-head > span:first-child,
  body[data-skin="island"] .week-day.today .day-head > span:last-child {
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
  }
  /* 天氣已經畫在島的天空，日期旁的 emoji 不重複顯示 */
  body[data-skin="island"] .month-day .weather-mini,
  body[data-skin="island"] .week-day .weather-mini { display: none; }

  /* 島嶼本身 */
  body[data-skin="island"] .isle-art {
    height: 64px;
    margin: -4px 0 6px;
    pointer-events: none;
  }
  body[data-skin="island"] .week-day .isle-art { height: 96px; }
  body[data-skin="island"] .isle-art svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: transform .28s cubic-bezier(.3, 1.4, .5, 1);
  }
  body[data-skin="island"] .month-day:hover .isle-art svg,
  body[data-skin="island"] .week-day:hover .isle-art svg { transform: translateY(-3px); }
  /* ------------------------------------------------------------------------
     第 3 期：日檢視（scene.js 的 dayRoomFor()／timelineSkyHtml()）
     ------------------------------------------------------------------------ */
  body[data-skin="island"] {
    --isl-floor-hi: #f6e8d0; --isl-floor-lo: #d8c2a0; --isl-wl-hi: #fffaf0; --isl-wl-lo: #efe1c8;
    --isl-wr-hi: #f1e4cd; --isl-wr-lo: #d6c3a5; --isl-sky-hi: #9fd6f0; --isl-sky-lo: #e2f4fb;
    --isl-pot: #c97b5a; --isl-ink: #3a3340;
    --isl-sky-night: #3a4a86; --isl-sky-dawn: #f6c49a; --isl-sky-day: #bfe6f5;
  }
  body.dark[data-skin="island"] {
    --isl-floor-hi: #574d5d; --isl-floor-lo: #3b3444; --isl-wl-hi: #443e52; --isl-wl-lo: #353040;
    --isl-wr-hi: #383240; --isl-wr-lo: #292531; --isl-sky-hi: #131a33; --isl-sky-lo: #27345c;
    --isl-pot: #8a5a44; --isl-ink: #15131a;
    --isl-sky-night: #0c1230; --isl-sky-dawn: #6a4a5a; --isl-sky-day: #2a4a6a;
  }

  /* 房間舞台：置中，高度約 170px，手機寬度以寬度為準 */
  body[data-skin="island"] .isle-room {
    margin: 0 auto 14px;
    max-width: 520px;
    border-radius: 18px;
    background: linear-gradient(var(--isl-sea-hi), var(--isl-sea));
    box-shadow: inset 0 2px 6px var(--clay-sink);
    pointer-events: none;
  }
  body[data-skin="island"] .isle-room svg { display: block; width: 100%; height: auto; max-height: 190px; }

  /* 便條牆：清單模式的行程卡像貼在牆上的便條紙，左右微微傾斜、上方一顆圖釘 */
  body[data-skin="island"] .day-task-lane .task-card {
    border-radius: 6px 6px 12px 12px;
    background: color-mix(in srgb, var(--category-color, var(--primary)) 16%, var(--surface-strong));
    box-shadow: 0 6px 12px var(--clay-drop), inset 0 1px 0 var(--clay-hi);
    transform: rotate(-.6deg);
    overflow: visible;
  }
  body[data-skin="island"] .day-task-lane .task-card:nth-child(even) { transform: rotate(.6deg); }
  body[data-skin="island"] .day-task-lane .task-card::before { border-radius: 6px 0 0 12px; }
  body[data-skin="island"] .day-task-lane .task-card::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--category-color, var(--primary));
    box-shadow: inset -1px -2px 0 rgba(0, 0, 0, .22), inset 1px 1px 0 rgba(255, 255, 255, .5), 0 2px 3px var(--clay-drop);
    pointer-events: none;
  }
  body[data-skin="island"] .day-task-lane .task-card:hover { transform: rotate(0deg) translateY(-2px); }
  body[data-skin="island"] .day-task-lane { padding-top: 8px; }

  /* 時間軸天空：淡淡鋪在時間軸底下，行程方塊在上面 */
  body[data-skin="island"] .isl-sky {
    position: absolute;
    inset: 0;
    opacity: .32;
    pointer-events: none;
  }
  body.dark[data-skin="island"] .isl-sky { opacity: .55; }
  body[data-skin="island"] .isl-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid color-mix(in srgb, var(--isl-amber) 80%, transparent);
    z-index: 3;
    pointer-events: none;
  }
  body[data-skin="island"] .isl-now[hidden] { display: none; }
  body[data-skin="island"] .isl-now-orb {
    position: absolute;
    top: -8px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, var(--isl-sun-hi), var(--isl-amber));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--isl-amber) 25%, transparent);
  }
  body[data-skin="island"] .isl-now.is-night { border-top-color: color-mix(in srgb, var(--isl-moon) 70%, transparent); }
  body[data-skin="island"] .isl-now.is-night .isl-now-orb {
    background: radial-gradient(circle at 70% 30%, transparent 5px, var(--isl-moon) 5.5px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--isl-moon) 18%, transparent);
  }

  /* 白天太陽、夜景月亮與星星；夜景時亮著的窗與燈塔發光 */
  body[data-skin="island"] .isl-night { display: none; }
  body.dark[data-skin="island"] .isl-night { display: inline; }
  body.dark[data-skin="island"] .isl-day { display: none; }
  body.dark[data-skin="island"] .isl-lit { filter: drop-shadow(0 0 2px var(--isl-lamp)); }
}

/* ------------------------------------------------------------------------
   第 4 期：角色出場框（mascot.js）。平常隱藏，有話要說才從右下角探出來。
   ------------------------------------------------------------------------ */
/* 經典造型（或角色說到一半切回經典）一律不顯示；只有群島造型下面那條會把它打開 */
.mascot-dock { display: none; }
@media screen {
  body[data-skin="island"] .mascot-dock {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: min(380px, calc(100vw - 24px));
    pointer-events: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .22s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
  }
  body[data-skin="island"] .mascot-dock.is-on { opacity: 1; transform: none; }
  body[data-skin="island"] .mascot-dock[hidden] { display: none; }
  body[data-skin="island"] .mascot-bubble {
    pointer-events: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 40px;
    padding: 10px 14px;
    border: 0;
    border-radius: 18px 18px 4px 18px;
    color: var(--text);
    background: var(--surface-strong);
    text-align: left;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 10px 24px var(--clay-drop), inset 0 2px 0 var(--clay-hi), inset 0 -3px 0 var(--clay-lo);
    cursor: pointer;
  }
  body[data-skin="island"] .mascot-bubble:hover { transform: none; }
  body[data-skin="island"] .mascot-dock.has-action .mascot-bubble { box-shadow: 0 10px 24px var(--clay-drop), inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
  body[data-skin="island"] .mascot-name { display: block; margin-bottom: 2px; color: var(--primary); font-size: 13px; }
  body[data-skin="island"] .mascot-art { flex: 0 0 92px; width: 92px; height: 92px; }
  body[data-skin="island"] .mascot-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
  body[data-skin="island"] .mascot-dock.is-on .mascot-art svg { animation: mascot-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
  body[data-skin="island"] .mascot-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@keyframes mascot-hop {
  0% { transform: translateY(14px) scale(.92); }
  60% { transform: translateY(-6px) scale(1.03); }
  100% { transform: none; }
}
/* 手機：底部導航與右下角新增鈕都在，角色改從左下角、導航列上方出來 */
@media screen and (max-width: 760px) {
  body[data-skin="island"] .mascot-dock {
    right: auto;
    left: 10px;
    /* 與右下角新增鈕同高（styles.css：body.has-bottom-nav .fab-add 為 118px），避開快速新增列與底部導航 */
    bottom: calc(env(safe-area-inset-bottom) + 118px);
    flex-direction: row-reverse;
    max-width: calc(100vw - 90px);
  }
  body[data-skin="island"] .mascot-bubble { border-radius: 18px 18px 18px 4px; font-size: 13.5px; }
  body[data-skin="island"] .mascot-art { flex-basis: 76px; width: 76px; height: 76px; }
}
@media print { .mascot-dock { display: none !important; } }
body.widget-mode .mascot-dock { display: none !important; }

/* 文字設定視窗裡的「角色」區（兩種造型都看得到，所以不掛 data-skin）。
   全域 input{width:100%} 會撐開勾選框與時間欄，這裡還原成原生寬度。 */
.mascot-settings .mascot-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.mascot-settings label.mascot-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-weight: 600; font-size: 14px; }
.mascot-settings input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.mascot-settings input[type="time"] { width: auto; padding: 8px 10px; }
.mascot-settings select { width: auto; max-width: 100%; }
.mascot-settings .mascot-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin-top: 8px; }
.mascot-settings .muted { margin: 4px 0 0; font-size: 12px; }

/* 桌機：同一週的島用小木橋連起來（手機單欄排列時不畫） */
@media screen and (min-width: 761px) {
  body[data-skin="island"] .week-grid > .week-day:not(:nth-child(7n))::after,
  body[data-skin="island"] .month-grid > .month-day:not(:nth-child(7n))::after {
    content: "";
    position: absolute;
    right: -9px;
    width: 8px;
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--isl-trunk) 0 2px, transparent 2px 3px);
    opacity: .7;
    pointer-events: none;
  }
  body[data-skin="island"] .month-grid > .month-day:not(:nth-child(7n))::after { top: 78px; }
  body[data-skin="island"] .week-grid > .week-day:not(:nth-child(7n))::after { top: 112px; }
}

/* 手機：日期格是整寬一列。島放進日期列右側的空位（日期／＋按鈕的左邊），
   日期列加高到放得下島，行程卡維持整寬不被擠窄。 */
@media screen and (max-width: 760px) {
  body[data-skin="island"] .month-day .day-head,
  body[data-skin="island"] .week-day .day-head {
    min-height: 44px;
    align-items: flex-start;
  }
  body[data-skin="island"] .isle-art,
  body[data-skin="island"] .week-day .isle-art {
    position: absolute;
    top: 4px;
    right: 62px;
    width: 76px;
    height: 50px;
    margin: 0;
  }
}