:root { --accent: #FF7043; --bg: #FFF5F0; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family: 'Hiragino Maru Gothic Pro','BIZ UDPGothic',sans-serif; background:var(--bg); min-height:100vh; transition:background 0.6s; }
.app { max-width:430px; margin:0 auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.header { display:flex; justify-content:space-between; align-items:center; background:white; border-radius:22px; padding:14px 18px; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.time { font-size:2.6rem; font-weight:900; color:var(--accent); line-height:1; }
.date-label { font-size:0.82rem; color:#999; margin-top:3px; }
.char-block { text-align:center; flex:1; }
.char-emoji { font-size:3rem; line-height:1; display:block; animation:bounce 2.4s ease-in-out infinite; }
.char-name { font-size:0.78rem; color:#888; margin-top:3px; }
@keyframes bounce { 0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-8px) rotate(-5deg)} 60%{transform:translateY(-4px) rotate(3deg)} }
.settings-btn { background:none; border:none; font-size:1.6rem; cursor:pointer; padding:4px; border-radius:50%; transition:transform 0.2s; }
.settings-btn:active { transform:rotate(60deg); }
.now-card { background:var(--accent); border-radius:26px; padding:22px 20px 18px; text-align:center; color:white; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.now-top { font-size:0.88rem; opacity:0.85; margin-bottom:4px; }
.now-main { font-size:2.1rem; font-weight:900; margin:6px 0; text-shadow:0 2px 6px rgba(0,0,0,0.15); }
.now-msg { font-size:1rem; opacity:0.92; margin-bottom:14px; }
.progress-wrap { background:rgba(255,255,255,0.3); border-radius:99px; height:10px; overflow:hidden; margin-bottom:6px; }
.progress-bar { height:100%; background:white; border-radius:99px; transition:width 1s linear; width:0%; }
.time-left { font-size:0.8rem; opacity:0.85; }
.progress-card { background:white; border-radius:22px; padding:16px 18px 20px; box-shadow:0 4px 14px rgba(0,0,0,0.07); }
.pc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pc-title { font-size:0.86rem; color:#999; font-weight:700; }
.pc-badge { background:var(--accent); color:white; font-size:0.88rem; font-weight:900; padding:4px 14px; border-radius:99px; transition:background 0.4s; }
.pc-road { position:relative; height:78px; margin:0 6px; }
.pc-rail { position:absolute; left:5%; right:5%; top:28px; height:13px; background:#EBEBEB; border-radius:99px; overflow:hidden; }
.pc-fill { height:100%; background:var(--accent); border-radius:99px; width:0%; transition:width 0.75s cubic-bezier(0.34,1.4,0.64,1); position:relative; }
.pc-fill::after { content:''; position:absolute; right:0; top:0; bottom:0; width:24px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5)); border-radius:0 99px 99px 0; }
.pc-walker { position:absolute; top:8px; font-size:2rem; transform:translateX(-50%); left:5%; z-index:3; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.18)); transition:left 0.75s cubic-bezier(0.34,1.4,0.64,1); }
.pc-walker.rushing { animation:rushShake 0.16s ease-in-out infinite; }
@keyframes rushShake { 0%,100%{transform:translateX(-50%) rotate(0deg)} 25%{transform:translateX(calc(-50% - 9px)) rotate(-10deg)} 75%{transform:translateX(calc(-50% + 9px)) rotate(10deg)} }
.pc-goal { position:absolute; top:8px; right:0; font-size:1.8rem; line-height:1; z-index:1; }
.pc-station { position:absolute; top:21px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; z-index:2; }
.stn-dot { width:23px; height:23px; border-radius:50%; background:white; border:3px solid #D8D8D8; transition:background 0.35s,border-color 0.35s,transform 0.35s; }
.stn-dot.done { background:var(--accent); border-color:var(--accent); transform:scale(1.15); }
.stn-dot.current { border-color:var(--accent); animation:dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(150,150,150,0.4)} 50%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(150,150,150,0)} }
.stn-emoji { font-size:1.15rem; line-height:1; transition:transform 0.3s; }
.stn-dot.done ~ .stn-emoji { transform:scale(1.2); }
.pc-fill.all-done { background:linear-gradient(90deg,#FF9EBC,#FFD700,#7CB9E8,#77DD77); background-size:200% 100%; animation:rainbow 2s linear infinite; }
@keyframes rainbow { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.task-list { background:white; border-radius:22px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:8px; }
.task-item { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:16px; background:#f7f7f7; cursor:pointer; transition:transform 0.15s,background 0.15s; border:2.5px solid transparent; user-select:none; }
.task-item.reordered { animation:reorderPop 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.task-item:active { transform:scale(0.97); }
.task-item.active { background:#fff8ff; border-color:var(--accent); transform:scale(1.02); }
.task-item.done { background:#f0fff5; opacity:0.65; }
.task-item.done .task-label { text-decoration:line-through; color:#aaa; }
.t-emoji { font-size:1.6rem; }
.task-label { flex:1; font-size:1.12rem; font-weight:700; color:#333; }
.t-time { font-size:0.75rem; color:#bbb; }
.t-check { font-size:1.5rem; }
.menu-card { background:white; border-radius:18px; padding:14px 20px; box-shadow:0 4px 12px rgba(0,0,0,0.06); cursor:pointer; transition:transform 0.15s; user-select:none; }
.menu-card:active { transform:scale(0.98); }
.menu-label { font-size:0.82rem; color:#999; margin-bottom:4px; }
.menu-row { display:flex; align-items:center; justify-content:space-between; }
.menu-row strong { font-size:1.1rem; color:#333; }
.menu-arrow { font-size:0.9rem; color:var(--accent); }
.sheet-bg,.settings-bg { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.sheet-bg.open,.settings-bg.open { opacity:1; pointer-events:all; }
.bottom-sheet { position:fixed; bottom:0; left:0; right:0; background:white; border-radius:28px 28px 0 0; padding:12px 20px 40px; z-index:300; max-height:70vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); max-width:430px; margin:0 auto; }
.bottom-sheet.open { transform:translateY(0); }
.sheet-handle { width:40px; height:5px; background:#e0e0e0; border-radius:99px; margin:0 auto 14px; }
.sheet-title { font-size:1rem; font-weight:700; color:#555; text-align:center; margin-bottom:14px; }
.picker-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.picker-item { display:flex; align-items:center; padding:14px 18px; border-radius:16px; background:#f7f7f7; cursor:pointer; font-size:1.1rem; font-weight:700; color:#333; transition:background 0.15s,transform 0.15s; border:2.5px solid transparent; }
.picker-item:active { transform:scale(0.97); }
.picker-item.selected { background:#fff8ff; border-color:var(--accent); color:var(--accent); }
.picker-item-check { margin-left:auto; font-size:1.2rem; }
.sheet-close-btn { width:100%; padding:14px; border:none; border-radius:16px; background:#f0f0f0; font-size:1rem; font-weight:700; color:#666; cursor:pointer; }
.settings-panel { position:fixed; top:0; right:0; bottom:0; width:min(360px,100vw); background:white; z-index:300; display:flex; flex-direction:column; padding:50px 20px 40px; gap:12px; transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); overflow-y:auto; }
.settings-panel.open { transform:translateX(0); }
.sp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.sp-title { font-size:1.2rem; font-weight:900; color:#333; }
.sp-close { background:#f0f0f0; border:none; border-radius:50%; width:34px; height:34px; font-size:1rem; cursor:pointer; }
.reset-today-btn { width:100%; padding:14px; border:none; border-radius:16px; background:#FFF1E8; color:var(--accent); font-size:1rem; font-weight:900; cursor:pointer; }
.reset-today-btn:active { transform:scale(0.98); }
.sp-hint { font-size:0.8rem; color:#aaa; }
.sp-divider { height:1px; background:#F0F0F0; margin:6px 0 10px; }
.sp-section-title { font-size:1rem; font-weight:900; color:#333; margin-bottom:4px; }
.sp-schedule { display:flex; flex-direction:column; gap:10px; }
.sp-schedule-item { background:#F8F8F8; border-radius:16px; padding:12px 14px; }
.ssi-label { font-size:1rem; font-weight:700; color:#444; margin-bottom:10px; }
.ssi-times { display:flex; align-items:center; gap:8px; }
.ssi-time-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ssi-time-label { font-size:0.7rem; color:#AAA; font-weight:700; }
.ssi-input { width:100%; padding:10px 6px; border:2px solid #E4E4E4; border-radius:12px; font-size:1.05rem; font-weight:700; color:#333; text-align:center; background:white; outline:none; -webkit-appearance:none; transition:border-color 0.15s; }
.ssi-input:focus { border-color:var(--accent); }
.ssi-arrow { font-size:1rem; color:#CCC; flex-shrink:0; }
.ssi-reset { display:block; width:100%; margin-top:8px; padding:6px; border:none; border-radius:8px; background:none; font-size:0.75rem; color:#BBBBBB; cursor:pointer; text-align:right; }
.ssi-reset:active { color:var(--accent); }
.sp-list { display:flex; flex-direction:column; gap:8px; flex:1; }
.sp-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:14px; background:#f7f7f7; font-size:1rem; font-weight:700; color:#333; }
.sp-delete { background:#FFE4E4; border:none; border-radius:8px; padding:6px 12px; font-size:0.85rem; color:#E05555; cursor:pointer; }
.sp-empty { color:#bbb; font-size:0.9rem; text-align:center; padding:20px; }
.sp-add-row { display:flex; gap:8px; margin-top:8px; }
.sp-input { flex:1; padding:13px 16px; border:2px solid #e0e0e0; border-radius:14px; font-size:1rem; outline:none; transition:border-color 0.15s; }
.sp-input:focus { border-color:var(--accent); }
.sp-add-btn { padding:13px 18px; background:var(--accent); color:white; border:none; border-radius:14px; font-size:1rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.task-manage-list { display:flex; flex-direction:column; gap:8px; }
.tm-item { background:#F8F8F8; border-radius:16px; padding:12px; display:flex; gap:10px; align-items:flex-start; }
.tm-item.reordered { animation:reorderPop 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.tm-main { flex:1; min-width:0; }
.tm-title { font-size:1rem; font-weight:900; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-time { font-size:0.75rem; color:#999; margin-top:3px; }
.tm-time-edit { display:flex; align-items:center; gap:6px; margin-top:8px; }
.tm-time-group { flex:1; display:flex; flex-direction:column; gap:3px; }
.tm-time-group span { font-size:0.68rem; color:#AAA; font-weight:700; }
.tm-time-input { width:100%; padding:8px 4px; border:2px solid #E4E4E4; border-radius:10px; background:white; color:#333; font-size:0.88rem; font-weight:700; text-align:center; outline:none; }
.tm-time-input:focus { border-color:var(--accent); }
.tm-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.tm-btn { border:none; border-radius:9px; padding:7px 9px; background:#ECECEC; color:#666; font-size:0.82rem; font-weight:900; cursor:pointer; }
.tm-btn:disabled { opacity:0.35; cursor:default; }
.tm-delete { background:#FFE4E4; color:#E05555; }
.tm-fixed { background:#F0F0F0; color:#AAA; }
.task-add-box { background:#F8F8F8; border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.task-add-row { display:flex; gap:8px; align-items:center; }
.task-emoji-input { width:64px; padding:12px 8px; border:2px solid #E4E4E4; border-radius:12px; font-size:1rem; text-align:center; outline:none; background:white; }
.task-name-input { flex:1; min-width:0; padding:12px 10px; border:2px solid #E4E4E4; border-radius:12px; font-size:1rem; outline:none; background:white; }
.task-time-input { flex:1; min-width:0; padding:11px 6px; border:2px solid #E4E4E4; border-radius:12px; font-size:0.95rem; font-weight:700; text-align:center; outline:none; background:white; }
.task-emoji-input:focus,.task-name-input:focus,.task-time-input:focus { border-color:var(--accent); }
@keyframes reorderPop { 0%{transform:translateY(14px) scale(0.96);opacity:0.65} 65%{transform:translateY(-4px) scale(1.02);opacity:1} 100%{transform:translateY(0) scale(1);opacity:1} }
.task-cheer { position:fixed; inset:0; pointer-events:none; z-index:500; display:flex; align-items:center; justify-content:center; }
.tc-flash { position:fixed; inset:0; background:rgba(255,255,255,0.75); opacity:0; pointer-events:none; }
.task-cheer.playing .tc-flash { animation:tcFlash 0.45s ease forwards; }
@keyframes tcFlash { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }
.tc-body { text-align:center; position:relative; z-index:2; opacity:0; transform:translateY(160%) scale(0.2); }
.task-cheer.playing .tc-body { animation:tcChar 2.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes tcChar { 0%{transform:translateY(160%) scale(0.2) rotate(-12deg);opacity:0} 18%{transform:translateY(-28px) scale(1.3) rotate(6deg);opacity:1} 26%{transform:translateY(14px) scale(0.93) rotate(-4deg);opacity:1} 33%{transform:translateY(-10px) scale(1.08) rotate(3deg);opacity:1} 40%{transform:translateY(0) scale(1) rotate(0);opacity:1} 50%{transform:translateY(0) scale(1) rotate(0);opacity:1} 56%{transform:translateY(-14px) scale(1.06) rotate(-6deg);opacity:1} 62%{transform:translateY(0) scale(1) rotate(0);opacity:1} 68%{transform:translateY(-10px) scale(1.05) rotate(5deg);opacity:1} 74%{transform:translateY(0) scale(1) rotate(0);opacity:1} 82%{transform:translateY(-10px) scale(1.15) rotate(-3deg);opacity:1} 100%{transform:translateY(-220%) scale(0.4) rotate(8deg);opacity:0} }
.tc-char { font-size:6.5rem; line-height:1; display:block; }
.tc-name { font-size:1rem; font-weight:700; color:#555; margin-top:2px; }
.tc-msg { font-size:1.9rem; font-weight:900; color:var(--accent); text-shadow:0 3px 10px rgba(0,0,0,0.12); margin-top:6px; opacity:0; }
.task-cheer.playing .tc-msg { animation:tcMsg 2.6s ease forwards; }
@keyframes tcMsg { 0%,30%{opacity:0;transform:scale(0.7)} 42%{opacity:1;transform:scale(1.1)} 50%{opacity:1;transform:scale(1)} 74%{opacity:1} 100%{opacity:0} }
.tc-stars { position:fixed; inset:0; pointer-events:none; }
.tc-star { position:fixed; font-size:1.6rem; transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; animation:tcStar 1.1s ease forwards; }
@keyframes tcStar { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 20%{transform:translate(-50%,-50%) scale(1.3);opacity:1} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0} }
.overlay { position:fixed; inset:0; background:radial-gradient(circle at top,#fff8d8 0%,#fff 42%,#ffeaf3 100%); display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn 0.3s; overflow:hidden; }
.overlay::before { content:''; position:absolute; inset:-30%; background:conic-gradient(from 0deg,rgba(255,215,0,0.3),rgba(255,112,67,0.18),rgba(124,185,232,0.22),rgba(119,221,119,0.18),rgba(255,215,0,0.3)); animation:spinGlow 8s linear infinite; }
.overlay-inner { text-align:center; position:relative; z-index:2; padding:34px 24px; border-radius:32px; background:rgba(255,255,255,0.78); box-shadow:0 18px 45px rgba(0,0,0,0.16); animation:popIn 0.55s cubic-bezier(0.175,0.885,0.32,1.275); }
.overlay-emoji { font-size:7rem; margin-bottom:16px; filter:drop-shadow(0 8px 12px rgba(0,0,0,0.16)); animation:celebrateEmoji 1s ease-in-out infinite alternate; }
.overlay-text { font-size:2.35rem; font-weight:900; color:var(--accent); line-height:1.45; text-shadow:0 3px 0 rgba(255,255,255,0.9),0 8px 18px rgba(0,0,0,0.14); }
.overlay-hint { margin-top:18px; font-size:0.9rem; font-weight:800; color:#999; }
.confetti-layer { position:absolute; inset:0; pointer-events:none; z-index:1; }
.confetti-piece { position:absolute; top:-32px; font-size:1.55rem; animation:confettiFall var(--dur) linear forwards; transform:translateX(-50%); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes popIn { from{transform:scale(0.3);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes spinGlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes celebrateEmoji { from{transform:scale(1) rotate(-8deg)} to{transform:scale(1.12) rotate(8deg)} }
@keyframes confettiFall { 0%{transform:translate(-50%,-40px) rotate(0deg);opacity:1} 100%{transform:translate(calc(-50% + var(--drift)),110vh) rotate(720deg);opacity:0.95} }