@import url('/lib/crt-effects.css');

:root { --tc-accent: #ff2d95; }

body { background: #08080d; margin: 0; overflow: hidden; }
#app { width: 100vw; height: calc(100vh - 48px); }
@media (max-width: 768px) { #app { height: calc(100vh - 40px); } }

* { box-sizing: border-box; }

.tc-root {
    position: relative; width: 100%; height: 100%;
    font-family: 'Space Grotesk', 'IBM Plex Mono', sans-serif;
    color: #e8e8f0; overflow: hidden;
}

.tc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ---- Overlays ---- */
.tc-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 8, 13, 0.72); backdrop-filter: blur(3px);
}
.tc-overlay.soft { background: rgba(8, 8, 13, 0.45); }
.tc-panel {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 520px; padding: 34px 40px; text-align: center;
    background: linear-gradient(180deg, rgba(24, 24, 38, 0.95), rgba(14, 14, 22, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
    box-shadow: 0 24px 70px -30px #000;
    animation: tc-reveal 0.2s ease;
}
@keyframes tc-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.tc-title {
    font-family: 'Space Mono', monospace; font-size: clamp(26px, 5vw, 40px); font-weight: 700;
    letter-spacing: 6px; color: #fff;
    text-shadow: 0 0 28px rgba(255, 45, 149, 0.45);
}
.tc-title.small { font-size: clamp(18px, 3.4vw, 26px); letter-spacing: 4px; }
.tc-tag { font-size: 13px; color: var(--tc-accent); letter-spacing: 1px; }
.tc-hints { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #9a9aac; line-height: 1.5; }
.tc-btnrow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.tc-start {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 26px; border-radius: 3px;
    border: 1px solid var(--tc-accent); background: rgba(255, 45, 149, 0.14);
    color: var(--tc-accent); font-size: 15px; font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.tc-start:hover { background: var(--tc-accent); color: #0b0b12; box-shadow: 0 0 22px -6px var(--tc-accent); }

/* ---- "What's going on" explainer ---- */
.tc-panel.info {
    align-items: stretch; text-align: left; gap: 13px;
    max-width: 600px; max-height: 82%; overflow-y: auto;
}
.tc-info-head { display: flex; justify-content: space-between; align-items: center; }
.tc-x { background: none; border: none; color: #889; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; }
.tc-x:hover { color: #fff; }
.tc-info-sec { font-size: 12.5px; color: #a8a8bc; line-height: 1.55; }
.tc-term { color: var(--tc-accent); font-weight: 600; }
.tc-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-top: 8px; }
.tc-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c8c8d6; }
.tc-dot { width: 10px; height: 10px; background: currentColor; flex: 0 0 auto; }
.tc-info-note { font-size: 11px; color: #7c7c92; margin-top: 8px; font-style: italic; }
@media (max-width: 520px) { .tc-legend { grid-template-columns: 1fr; } }

/* ---- Instrument settings ---- */
.tc-panel.settings { align-items: stretch; text-align: left; gap: 10px; max-width: 640px; max-height: 84%; overflow-y: auto; }
.tc-seclabel { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #5c5c72; margin: 6px 0 2px; }
.tc-preset-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tc-preset {
    font-size: 12px; padding: 7px 13px; cursor: pointer; font-family: inherit; border-radius: 3px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #c4c4d2; transition: all 0.1s;
}
.tc-preset:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.tc-preset.sel { background: var(--tc-accent); border-color: var(--tc-accent); color: #0b0b12; font-weight: 600; }

.tc-vrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tc-vitem {
    display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
    padding: 8px 11px; cursor: pointer; font-family: inherit; border-radius: 3px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.1s;
}
.tc-vitem:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.tc-vitem.sel { border-color: var(--pc); background: rgba(255, 255, 255, 0.06); }
.tc-vdot { width: 10px; height: 10px; background: var(--pc); box-shadow: 0 0 8px var(--pc); flex: 0 0 auto; }
.tc-vname { font-size: 12px; color: #9a9aac; flex: 0 0 auto; }
.tc-vinst { font-size: 12px; color: #e8e8f0; font-weight: 600; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tc-picker { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; }
.tc-fams { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tc-fam {
    flex: 0 0 auto; white-space: nowrap; font-size: 11px; padding: 5px 10px; cursor: pointer; font-family: inherit; border-radius: 3px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: #aab; transition: all 0.1s;
}
.tc-fam:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.tc-fam.sel { color: #0b0b12; background: var(--pc); border-color: var(--pc); font-weight: 600; }
.tc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.tc-cell {
    font-size: 11px; padding: 9px 6px; cursor: pointer; font-family: inherit; text-align: center; border-radius: 3px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #c4c4d2; transition: all 0.1s;
}
.tc-cell:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--pc); color: #fff; }
.tc-cell.sel { background: var(--pc); border-color: var(--pc); color: #0b0b12; font-weight: 600; box-shadow: 0 0 16px -6px var(--pc); }
@media (max-width: 560px) { .tc-vrow { grid-template-columns: 1fr; } .tc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Bottom control bar (tight monospace toolbar, house style) ---- */
.tc-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 7px 12px;
    background: rgba(10, 10, 15, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: 'Space Mono', 'IBM Plex Mono', monospace;
}
.tc-play {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; min-width: 40px; padding: 0 12px; border-radius: 3px;
    border: 1px solid var(--tc-accent); background: transparent;
    color: var(--tc-accent); font-size: 12px; font-family: inherit; cursor: pointer;
    line-height: 1; transition: all 0.15s;
}
.tc-play:hover { background: rgba(255, 45, 149, 0.16); }
.tc-play.playing { background: var(--tc-accent); color: #0b0b12; }
.tc-play.loading { font-size: 11px; cursor: default; }
.tc-play.idle { animation: tc-play-pulse 1.9s ease-in-out infinite; }
@keyframes tc-play-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 149, 0); } 50% { box-shadow: 0 0 12px -3px var(--tc-accent); } }

.tc-btn {
    display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8a8a98; border-radius: 3px; cursor: pointer; font-size: 11px;
    font-family: inherit; line-height: 1; transition: all 0.12s; white-space: nowrap;
}
.tc-btn:hover:not(:disabled) { border-color: var(--tc-accent); color: var(--tc-accent); }
.tc-btn:disabled { opacity: 0.3; cursor: default; }
.tc-btn.active { border-color: var(--tc-accent); color: var(--tc-accent); }

.tc-tempo {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 10px; border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: transparent;
}
.tc-tempo-lbl { font-size: 10px; color: #667; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.tc-tempo-val { color: var(--tc-accent); font-weight: 700; }

.tc-slider {
    -webkit-appearance: none; appearance: none; display: block;
    width: 90px; height: 3px; outline: none; border-radius: 2px;
    background: #1c1c26; cursor: pointer;
}
.tc-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 11px; height: 11px; border-radius: 2px;
    background: var(--tc-accent); box-shadow: 0 0 6px var(--tc-accent); cursor: pointer;
}
.tc-slider::-moz-range-thumb {
    width: 11px; height: 11px; border-radius: 2px; border: none;
    background: var(--tc-accent); box-shadow: 0 0 6px var(--tc-accent); cursor: pointer;
}

@media (max-width: 640px) {
    .tc-panel { padding: 24px 20px; margin: 0 14px; }
    .tc-controls { gap: 6px; }
}