/* 試用版の活動記録。既存タイマー画面と独立した軽量な2D表現。 */
.habit-panel {
    display: grid;
    gap: 12px;
    padding: 2px 0 20px;
}

.habit-heading,
.habit-calendar-head,
.habit-taskchute-status,
.habit-settings > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.habit-heading h2 { margin: 0; color: #f6fffb; }
.habit-heading p { margin: 4px 0 0; color: #c9d9d2; font-size: 13px; }
.habit-trial-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #7fcdb7;
    border-radius: 999px;
    color: #c9ffe8;
    font-size: 11px;
}

.habit-town {
    position: relative;
    min-height: 120px;
    overflow: hidden;
    padding: 14px 16px 12px 92px;
    border: 1px solid rgba(168, 230, 207, .35);
    border-radius: 18px;
    background: linear-gradient(145deg, #2c5364, #203a43 58%, #254a3c);
    box-shadow: inset 0 -24px rgba(31, 80, 53, .38);
}

.habit-character {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: grid;
    justify-items: center;
    color: #fff7cf;
    font-size: 42px;
    filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .35));
}
.habit-character small { margin-top: -5px; font-size: 10px; white-space: nowrap; }
.habit-town-scene { min-height: 54px; font-size: 31px; letter-spacing: 4px; word-break: break-word; }
.habit-town p { margin: 6px 0 0; color: #ecfff6; font-size: 13px; line-height: 1.45; }

.habit-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.habit-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: #303d46;
    color: #d7e7e0;
    font-size: 12px;
}
.habit-stat strong { color: #9ff0cf; font-size: 13px; }
.habit-stat-wide { grid-column: 1 / -1; background: #35404f; }

.habit-calendar-head { margin-top: 3px; }
.habit-calendar-head h3 { margin: 0; font-size: 16px; }
.habit-calendar-head button {
    width: 36px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: #4c6571;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}
.habit-weekdays,
.habit-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.habit-weekdays { color: #aab8bd; font-size: 11px; text-align: center; }
.habit-calendar { min-height: 230px; }
.habit-day {
    position: relative;
    min-height: 38px;
    border: 1px solid #4b5b62;
    border-radius: 9px;
    background: #2d353d;
    color: #eaf5f1;
    font-size: 13px;
}
.habit-day.today { border-color: #8dd7c1; }
.habit-day.selected { outline: 2px solid #ffd98a; outline-offset: -2px; }
.habit-marks { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 2px; }
.habit-mark { width: 6px; height: 6px; border-radius: 50%; }
.habit-mark.plan { background: #9dceff; }
.habit-mark.done { background: #83df9c; }
.habit-mark.main { background: #ffd66e; box-shadow: 0 0 6px #ffd66e; }

.habit-day-detail,
.habit-reference,
.habit-settings,
.habit-taskchute-status {
    padding: 12px;
    border: 1px solid #4b5b62;
    border-radius: 13px;
    background: #303843;
}
.habit-day-detail h3 { margin: 0 0 7px; font-size: 15px; }
.habit-day-detail ul { margin: 0; padding-left: 18px; color: #e7f2ed; font-size: 13px; }
.habit-day-detail li { margin: 6px 0; }
.habit-reference { color: #d9e2e5; font-size: 12px; }
.habit-reference strong { color: #a8e6cf; }
.habit-reference p { margin: 7px 0; line-height: 1.5; }
.habit-reference pre {
    max-height: 180px;
    overflow: auto;
    margin: 7px 0 0;
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 8px;
    background: #222b31;
    color: #cbd8d3;
    font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.habit-settings { display: grid; gap: 9px; color: #e3edf0; font-size: 13px; }
.habit-settings summary { cursor: pointer; color: #b9e6d4; }
.habit-settings > label { justify-content: flex-start; }
.habit-settings input[type="checkbox"] { width: auto; margin: 0 5px 0 0; }
.habit-fixture-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.habit-fixture-actions button {
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: #4d7180;
    color: #fff;
    font-size: 12px;
}
.habit-fixture-actions .habit-danger { background: #8c5252; }
.habit-sync-control {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid #55727a;
    border-radius: 9px;
    background: #27343d;
}
.habit-sync-control strong { color: #b9e6d4; }
.habit-sync-control label { display: flex; align-items: center; gap: 4px; }
.habit-sync-control p { margin: 0; color: #d4e0e1; font-size: 12px; line-height: 1.45; }
.habit-sync-control small { color: #b7c6c8; font-size: 11px; line-height: 1.45; }
.habit-sync-control button {
    justify-self: start;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: #4d7180;
    color: #fff;
    font-size: 12px;
}
.habit-sync-control button:disabled { opacity: .56; cursor: not-allowed; }

.habit-taskchute-status { margin: 0 0 10px; color: #dff7ec; font-size: 12px; }
.habit-taskchute-status > div { display: grid; gap: 3px; }
.habit-taskchute-status #habitTownLink { color: #9dceff; cursor: pointer; }
.habit-taskchute-status label { flex: 1; min-width: 135px; color: #cbdad6; }
.habit-taskchute-status select { margin: 4px 0 0; padding: 7px; font-size: 12px; }
.habit-start-flash { animation: habit-start-pulse .55s ease-out; }
@keyframes habit-start-pulse { from { box-shadow: 0 0 0 0 #a8e6cf; } to { box-shadow: 0 0 0 12px transparent; } }

.habit-celebration-overlay {
    position: fixed;
    z-index: 2200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 16, 23, .72);
    animation: habit-overlay-in .18s ease-out;
}
.habit-celebration-card {
    width: min(360px, 100%);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #b9f3d7;
    border-radius: 18px;
    background: #29443e;
    color: #f4fff9;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .42);
    overflow: hidden;
}
.habit-celebration-card h2 { margin: 0 0 10px; font-size: 20px; }
.habit-celebration-card ul { min-height: 0; flex: 1 1 auto; overflow: auto; margin: 0 0 16px; padding-left: 20px; }
.habit-celebration-card li { margin: 6px 0; }
.habit-celebration-card button { flex: 0 0 auto; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: #a8e6cf; color: #26332e; font-weight: 700; }
@keyframes habit-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.habit-celebration-overlay.calm { animation: none; }
.habit-celebration-overlay.calm .habit-celebration-card { box-shadow: 0 7px 22px rgba(0, 0, 0, .32); }

.trial-disabled-control { opacity: .52; cursor: not-allowed !important; }

@media (max-width: 480px) {
    .habit-heading { align-items: flex-start; flex-direction: column; }
    .habit-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .habit-town { padding-left: 82px; }
    .habit-character { left: 9px; font-size: 36px; }
    .habit-town-scene { font-size: 26px; }
    .habit-taskchute-status { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .habit-start-flash,
    .habit-celebration-overlay { animation: none; }
}