* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0ede8; color: #1a1a1a; min-height: 100vh; padding: 1.2rem 1rem env(safe-area-inset-bottom); padding-top: max(1.2rem, env(safe-area-inset-top)); }
.app { max-width: 680px; margin: 0 auto; }
h1 { font-size: 22px; font-weight: 700; margin-bottom: 1.2rem; color: #1a1a1a; letter-spacing: -0.5px; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; position: -webkit-sticky; position: sticky; top: 0; z-index: 40; background: #f0ede8; padding: 0.8rem 0; }
.add-btn { font-size: 14px; padding: 10px 20px; border-radius: 10px; background: #1a1a1a; border: none; color: #fff; cursor: pointer; font-family: inherit; font-weight: 600; min-height: 44px; white-space: nowrap; }
.song-card { background: #fff; border: 1.5px solid #d8d4cc; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
.song-card.gold { background: #fff5b0; border: 2px solid #d4a000; position: relative; }
.song-card.gold::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,220,0,0.55), transparent); animation: shimmer 10s ease-in-out infinite; pointer-events: none; }
@keyframes shimmer { 0% { left: -100%; } 25% { left: 150%; } 100% { left: 150%; } }
.song-card.gold .song-title { color: #5c3d00; }
.song-card.gold .song-artist { color: #7a5200; }
.song-card.gold .song-bpm-badge { color: #7a5200; }
.song-card.gold .status-dot { background: #d4a000; }
.song-card.gold .song-card-body { border-top-color: #e8c840; }
.goal-reached-badge { font-size: 10px; font-weight: 700; background: #fbbf24; color: #5c3000; border-radius: 99px; padding: 3px 8px; white-space: nowrap; }
.song-card-header { display: flex; align-items: center; gap: 8px; padding: 1.1rem 1.1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.song-card-header:active { background: #faf9f7; }
.drag-handle { font-size: 16px; color: #ccc; cursor: grab; flex-shrink: 0; padding: 4px 6px; touch-action: none; user-select: none; line-height: 1; -webkit-tap-highlight-color: transparent; }
.song-card.dragging { opacity: 0.25; }
.song-card-body { padding: 1rem 1.1rem 0.8rem; border-top: 1.5px solid #f0ede8; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-dot.done { background: #5a9a1a; }
.status-dot.fail { background: #EF9F27; }
.status-dot.none { background: #e0ddd6; }
.song-card-title { flex: 1; min-width: 0; }
.song-title { font-size: 16px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-artist { font-size: 12px; color: #666; margin-top: 3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-bpm-badge { font-size: 11px; font-weight: 700; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.song-chevron { font-size: 16px; color: #bbb; flex-shrink: 0; margin-left: 2px; transition: transform 0.2s; }
.song-card.open .song-chevron { transform: rotate(90deg); }
.header-action-btns { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.icon-btn { font-size: 16px; color: #999; background: none; border: none; cursor: pointer; padding: 0 6px; border-radius: 8px; font-family: inherit; min-height: 44px; min-width: 40px; display: flex; align-items: center; justify-content: center; }
.spotify-btn { color: #1DB954; text-decoration: none; font-size: 22px; }
.youtube-btn { color: #FF0000; text-decoration: none; font-size: 20px; }
.remove-btn { color: #ccc; font-size: 16px; }
.bpm-row { display: flex; align-items: center; gap: 0; margin-bottom: 8px; }
.bpm-half { flex: 1; display: flex; align-items: center; gap: 8px; }
.step-half { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-left: 12px; }
.bpm-box { text-align: center; }
.bpm-num { font-size: 26px; font-weight: 700; color: #1a1a1a; letter-spacing: -1px; line-height: 1; }
.bpm-label { font-size: 10px; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.bpm-arrow { font-size: 20px; color: #aaa; padding-bottom: 4px; }
.step-box { text-align: right; width: 100%; }
.step-box-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 2px; text-align: center; }
.progress-bar { height: 7px; background: #ede9e2; border-radius: 99px; margin-bottom: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #7ab82e, #5a9a1a); border-radius: 99px; transition: width 0.4s ease; }
.step-row { display: none; }
.step-btn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #d8d4cc; background: #faf9f7; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; padding: 0; }
.step-btn:active { background: #e2ddd6; }
.step-btn:disabled { opacity: 0.3; cursor: default; }
.step-val { font-size: 22px; font-weight: 700; color: #5a9a1a; min-width: 36px; text-align: center; letter-spacing: -0.5px; flex-shrink: 0; }
.step-val.neg { color: #EF9F27; }
.step-controls { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.action-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: stretch; }
.btn-wrap { flex: 1; position: relative; padding: 0; min-width: 0; display: flex; }
.nailed-btn, .retry-btn { width: 100%; padding: 8px 8px; border-radius: 10px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; border: none; min-height: 56px; height: 100%; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; line-height: 1.3; }
.nailed-btn { background: #5a9a1a; color: #fff; }
.nailed-btn:active { background: #4d8516; }
.nailed-btn:disabled { opacity: 0.35; cursor: default; }
.nailed-btn.used:disabled { opacity: 1; }
.nailed-btn.faded { opacity: 0.35; }
.nailed-btn.dimmed { opacity: 0.35; }
.nailed-btn.used { background: #c8e6a0; color: #3b6d11; border: 2.5px solid #5a9a1a; }
.nailed-btn.golden { background: #fbbf00; color: #5c3000; border: 3px solid #b8860b; font-size: 15px; font-weight: 800; letter-spacing: 0.3px; box-shadow: 0 0 24px rgba(251,191,0,0.7), 0 0 0 6px rgba(251,191,0,0.25), 0 4px 12px rgba(0,0,0,0.2); animation: golden-pulse 2s ease-in-out infinite; transform: scale(1.03); }
.nailed-btn.golden:active { background: #d4a000; transform: scale(0.98); }
@keyframes golden-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(251,191,0,0.7), 0 0 0 6px rgba(251,191,0,0.25), 0 4px 12px rgba(0,0,0,0.2); } 50% { box-shadow: 0 0 36px rgba(251,191,0,0.9), 0 0 0 8px rgba(251,191,0,0.35), 0 4px 16px rgba(0,0,0,0.25); } }
@keyframes golden-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
.retry-btn { background: #EF9F27; color: #fff; }
.retry-btn:active { background: #d98c1f; }
.retry-btn.dimmed { opacity: 0.35; }
.retry-btn.used { background: #fde4b0; color: #854f0b; border: 2.5px solid #EF9F27; }
.nailed-btn.with-undo, .retry-btn.with-undo { padding-left: 64px; }
.btn-vink { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 140px; font-weight: 700; line-height: 1; pointer-events: none; opacity: 0.22; z-index: 4; }
.btn-undo { position: absolute; top: 0; left: 0; height: 100%; width: 56px; cursor: pointer; font-family: inherit; font-size: 20px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.undo-green { background: #c8e6a0; color: #3b6d11; border: 2.5px solid #5a9a1a; }
.undo-orange { background: #fde4b0; color: #854f0b; border: 2.5px solid #EF9F27; }
.streak { font-size: 12px; color: #777; margin-bottom: 6px; font-weight: 500; }
.metro-section { border-top: 1.5px solid #ede9e2; border-bottom: 1.5px solid #ede9e2; padding-top: 14px; margin-bottom: 8px; padding-bottom: 8px; }
.metro-outer { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; }
.metro-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.metro-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.note-select { font-size: 16px; padding: 0 2px 0 6px; border-radius: 7px; border: 1.5px solid #d8d4cc; background: #faf9f7; color: #1a1a1a; cursor: pointer; font-family: inherit; font-weight: 500; height: 38px; width: 58px; flex-shrink: 0; }
.bpm-mode-toggle { display: none; }
.play-btn { width: 82px; height: 82px; border-radius: 50%; border: 2.5px solid #5a9a1a; background: #f0ede8; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; position: relative; overflow: hidden; }
.play-btn:active { background: #e8e4de; }
.play-btn.active { background: #fff8ee; border-color: #EF9F27; }
.play-btn.active:active { background: #fef0d8; }
.play-btn .bpm-ghost { position: absolute; font-weight: 700; letter-spacing: -2px; line-height: 1; color: transparent; pointer-events: none; }
.play-btn .bpm-ghost.d2 { font-size: 52px; -webkit-text-stroke: 1.5px rgba(0,0,0,0.18); }
.play-btn .bpm-ghost.d3 { font-size: 38px; -webkit-text-stroke: 1.5px rgba(0,0,0,0.18); }
.play-btn.active .bpm-ghost { -webkit-text-stroke: 1.5px rgba(180,100,0,0.25); }
.play-btn .play-icon { position: relative; z-index: 1; }
.tempo-slider { position: relative; height: 32px; background: #ede9e2; border-radius: 16px; border: 1.5px solid #d8d4cc; display: flex; align-items: center; flex: 1; min-width: 80px; cursor: pointer; user-select: none; }
.tempo-slider-thumb { position: absolute; width: calc(50% - 3px); height: 26px; background: #5a9a1a; border-radius: 13px; left: 3px; transition: left 0.15s ease; pointer-events: none; }
.tempo-slider-thumb.right { left: calc(50%); }
.tempo-slider-labels { display: flex; width: 100%; pointer-events: none; }
.tempo-slider-labels span { flex: 1; text-align: center; font-size: 10px; font-weight: 700; line-height: 32px; position: relative; z-index: 1; color: #aaa; letter-spacing: 0; }
.tempo-slider-labels span.active { color: #fff; }
.beat-wrap { background: #ede9e2; border: 1px solid #d8d4cc; border-radius: 8px; padding: 8px 6px; overflow: hidden; }
.beats { display: flex; justify-content: space-evenly; width: 100%; gap: 2px; }
.beat-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #558800; background: transparent; transition: background 0.05s; flex-shrink: 1; min-width: 6px; }
.beat-dot.lit { background: #aaff00; }
.beat-dot.lit.accent { background: #ffaa00; }
.cal-section { border-top: 1.5px solid #ede9e2; padding-top: 6px; }
.cal-nav { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; height: 32px; }
.cal-nav button { background: #ede9e2; border: none; cursor: pointer; color: #555; font-size: 16px; padding: 0; border-radius: 6px; font-weight: 700; min-height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; }
.cal-nav button:active { background: #e2ddd6; }
.cal-nav button:disabled { opacity: 0.25; }
.cal-nav-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: 0.4px; pointer-events: none; }
.cal-today-btn { font-size: 11px; font-weight: 700; color: #555; background: #ede9e2; border: none; border-radius: 6px; padding: 0 10px; height: 32px; cursor: pointer; font-family: inherit; }
.cal-month-name { display: none; }
.cal-months { display: grid; grid-template-columns: 1fr; gap: 0; }
.cal-month-block { min-width: 0; padding: 0; }
.cal-month-name { font-size: 10px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 28px); gap: 1.5px; }
.cal-dow { font-size: 9px; color: #999; text-align: center; padding-bottom: 2px; font-weight: 700; }
.cal-cell { height: 28px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: #666; line-height: 1.1; border: 1px solid #e8e4dc; font-weight: 600; background: #faf9f7; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.today { font-weight: 800; color: #1a1a1a; border: 2px solid #999; background: #fff; }
.cal-cell.done { background: #5a9a1a; color: #fff; font-weight: 700; border-color: #5a9a1a; }
.cal-cell.fail { background: #EF9F27; color: #fff; font-weight: 700; border-color: #EF9F27; }
.cal-cell.done.today-used, .cal-cell.fail.today-used { position: relative; overflow: visible; }
.cal-vink { position: absolute; font-size: 28px; font-weight: 700; opacity: 0.35; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; line-height: 1; }
.cal-cell.missed { background: #fdf0ef; border-color: #f0c4c0; color: #c08080; position: relative; overflow: hidden; }
.cal-cell.missed::before, .cal-cell.missed::after { content: ''; position: absolute; width: 22px; height: 1.5px; background: #d97070; top: 50%; left: 50%; }
.cal-cell.missed::before { transform: translate(-50%,-50%) rotate(45deg); }
.cal-cell.missed::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.cal-cell.on-track { background: #fffbec; border: 1px solid #f0c040; }
.goal-pill { display: inline-block; font-size: 11px; font-weight: 600; background: #fde4b0; color: #854f0b; border-radius: 99px; padding: 3px 10px; }
.goal-pill-reached { display: inline-block; font-size: 11px; font-weight: 600; background: #c8e6a0; color: #3b6d11; border-radius: 99px; padding: 3px 10px; }
.progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.edit-panel { background: #faf9f7; border-radius: 10px; padding: 12px; margin-bottom: 14px; border: 1.5px solid #e8e4dc; }
.edit-panel-title { font-size: 12px; font-weight: 700; color: #666; margin-bottom: 10px; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-field label { font-size: 11px; color: #666; display: block; margin-bottom: 3px; font-weight: 600; }
.edit-field input { width: 100%; padding: 10px 9px; border-radius: 7px; border: 1.5px solid #d8d4cc; background: #fff; color: #1a1a1a; font-size: 16px; font-family: inherit; }
.edit-btns { display: flex; gap: 6px; margin-top: 10px; }
.edit-save { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; cursor: pointer; background: #5a9a1a; color: #fff; border: none; font-family: inherit; font-weight: 600; min-height: 44px; }
.edit-cancel { padding: 12px 14px; border-radius: 8px; font-size: 14px; cursor: pointer; background: #ede9e2; color: #555; border: none; font-family: inherit; font-weight: 500; min-height: 44px; }
.tap-row { display: flex; gap: 6px; align-items: center; }
.tap-row input { flex: 1; }
.tap-btn { padding: 10px 14px; border-radius: 7px; border: 1.5px solid #d8d4cc; background: #faf9f7; color: #555; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-height: 44px; }
.tap-btn:active { background: #e2ddd6; transform: scale(0.96); }
.tap-btn.tapping { border-color: #5a9a1a; color: #5a9a1a; background: #f0faf3; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1.2rem; }
.modal { background: #fff; border-radius: 20px; border: 1.5px solid #d8d4cc; padding: 1.4rem; width: 100%; max-width: 460px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; cursor: default; }
.modal h2 { font-size: 18px; font-weight: 700; margin-bottom: 1rem; }
.modal label { font-size: 13px; color: #666; display: block; margin-bottom: 4px; margin-top: 12px; font-weight: 600; }
.modal input { width: 100%; padding: 12px 10px; border-radius: 10px; border: 1.5px solid #d8d4cc; color: #1a1a1a; font-size: 16px; font-family: inherit; }
.modal-delete { width: 100%; padding: 10px; border: none; background: transparent; color: #d44; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 1rem; border-top: 1px solid #ede9e2; padding-top: 12px; }
.modal-btns { display: flex; gap: 8px; margin-top: 1.2rem; }
.modal-btns button { flex: 1; padding: 14px; border-radius: 10px; font-size: 15px; cursor: pointer; border: none; font-family: inherit; font-weight: 600; min-height: 50px; }
.modal-save { background: #5a9a1a; color: #fff; }
.modal-cancel { background: #ede9e2; color: #555; }
.modal-search-row { display: flex; gap: 8px; margin-top: 10px; }
.modal-search-btn { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #d8d4cc; background: #faf9f7; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; }
.modal-search-btn.spotify { color: #1DB954; border-color: #a8dbb9; }
.modal-search-btn.youtube { color: #FF0000; border-color: #ffb3b3; }
.modal-metro-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.modal-metro-row input { flex: 1; }
.modal-play-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: #ede9e2; cursor: pointer; font-size: 14px; color: #333; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit; }
.modal-play-btn.active { background: #5a9a1a; color: #fff; }
.confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 300; padding-bottom: env(safe-area-inset-bottom); }
.confirm-box { background: #fff; border-radius: 20px 20px 0 0; padding: 1.4rem; width: 100%; max-width: 520px; box-shadow: 0 -4px 30px rgba(0,0,0,0.15); }
.confirm-box p { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 0.4rem; }
.confirm-box span { font-size: 14px; color: #666; }
.confirm-btns { display: flex; gap: 8px; margin-top: 1.2rem; }
.confirm-btns button { flex: 1; padding: 14px; border-radius: 10px; font-size: 15px; cursor: pointer; border: none; font-family: inherit; font-weight: 600; min-height: 50px; }
.confirm-delete { background: #d44; color: #fff; }
.confirm-cancel { background: #ede9e2; color: #555; }
.empty-state { text-align: center; color: #999; font-size: 14px; padding: 3rem 0; }
.data-btns { display: flex; gap: 6px; margin-bottom: 1.2rem; flex-wrap: wrap; }
.data-btn { font-size: 13px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #d8d4cc; background: #fff; color: #444; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 5px; font-weight: 500; min-height: 44px; }
.data-btn.import-btn { color: #1a6bbf; border-color: #90c4f0; background: #e8f4ff; }
.hamburger-wrap { position: relative; }
.hamburger-btn { font-size: 20px; background: #fff; border: 1.5px solid #d8d4cc; border-radius: 10px; cursor: pointer; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; font-family: inherit; color: #444; }
.hamburger-btn:active { background: #f0ede8; }
.hamburger-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1.5px solid #d8d4cc; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); min-width: 200px; z-index: 50; overflow: hidden; }
.hamburger-menu.open { display: block; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 14px; font-weight: 500; color: #1a1a1a; cursor: pointer; border: none; background: none; width: 100%; font-family: inherit; text-align: left; }
.menu-item:active { background: #f0ede8; }
.menu-item.disabled { color: #bbb; cursor: default; }
.menu-item.disabled:active { background: none; }
.menu-divider { height: 1px; background: #ede9e2; margin: 4px 0; }
.menu-soon { font-size: 10px; font-weight: 600; color: #ccc; margin-left: auto; }
.toast { position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; font-size: 13px; padding: 10px 20px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 200; white-space: nowrap; font-weight: 500; }
.toast.show { opacity: 1; }
.sound-options { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sound-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #e8e4dc; background: #faf9f7; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: #1a1a1a; width: 100%; text-align: left; transition: border-color 0.15s, background 0.15s; }
.sound-option:active { background: #ede9e2; }
.sound-option.selected { border-color: #5a9a1a; background: #f0faf3; }
.sound-option .sound-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sound-option.selected .sound-radio { border-color: #5a9a1a; }
.sound-option.selected .sound-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #5a9a1a; }
/* Guitar celebration overlay */
.guitar-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);display:flex;z-index:510;overflow:hidden;opacity:0;transition:opacity 0.3s; }
.guitar-wrapper { position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:100%;overflow:hidden;perspective:600px;z-index:10;pointer-events:none; }
.guitar-hero-img { position:absolute;left:50%;mix-blend-mode:screen;transform-origin:bottom center;width:min(250vw,1400px);bottom:-30%;transform:translateX(-50%) rotateX(-60deg);opacity:0;transition:width 0.25s cubic-bezier(0.22,1,0.36,1),bottom 0.25s cubic-bezier(0.22,1,0.36,1),transform 0.25s cubic-bezier(0.22,1,0.36,1),opacity 0.08s; }
.guitar-hero-img.visible { width:min(90vw,500px);bottom:-5%;transform:translateX(-50%) rotateX(-10deg);opacity:1; }
.guitar-hero-img.exit { width:min(250vw,1400px);bottom:-30%;transform:translateX(-50%) rotateX(-60deg);opacity:0;transition:width 0.6s cubic-bezier(0.55,0,1,0.45),bottom 0.6s cubic-bezier(0.55,0,1,0.45),transform 0.6s cubic-bezier(0.55,0,1,0.45),opacity 0.5s 0.1s; }
.guitar-overlay-cal { position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:5; }
.guitar-overlay-cal .cal-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:3px; }
.guitar-overlay-cal .cal-cell { width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.guitar-overlay-cal .cal-cell.done { background:#5a9a1a;color:#fff;border:1px solid #4a8a10; }
.guitar-overlay-cal .cal-cell.fail { background:#EF9F27;color:#fff;border:1px solid #df8f17; }
.guitar-overlay-cal .cal-cell.empty-day { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.2); }