:root {
    --bg: #121212; --card-bg: #1e1e1e; --ctrl-bg: #2d2d2d; --accent: #ffb300;
    --text-main: #eee; --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    background: var(--bg); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0; padding: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--safe-top);
}

/* Top Bar */
.top-bar {
    height: 48px; background: #212121; border-bottom: 1px solid #333;
    display: flex; align-items: center; padding: 0 10px; flex-shrink: 0; gap: 8px; z-index: 20; position: relative;
}
.select-group { display: flex; gap: 6px; flex: 1; }
select { 
    background: #333; color: #ccc; border: 1px solid #444; padding: 6px 4px; border-radius: 6px; 
    font-size: 13px; font-weight: bold; max-width: 85px;
}
.round-trigger {
    background: #29b6f6; color: #000; border: none; padding: 6px 12px; border-radius: 6px; 
    font-size: 14px; font-weight: 900; display: flex; align-items: center; gap: 4px; cursor: pointer;
    box-shadow: 0 2px 5px rgba(41, 182, 246, 0.3); white-space: nowrap;
}
.settings-btn { font-size: 20px; padding: 4px; cursor: pointer; opacity: 0.8; margin-left: auto; }

/* Round Panel (折叠面板) */
.round-panel {
    background: #2a2a2a; border-bottom: 1px solid #333;
    height: 0; overflow: hidden; opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0;
}
.round-panel.open { height: 50px; opacity: 1; }

.round-option {
    width: 32px; height: 32px; border-radius: 50%; background: #333; border: 1px solid #555;
    color: #888; display: flex; align-items: center; justify-content: center; 
    font-weight: bold; cursor: pointer; font-size: 14px; transition: all 0.1s;
}
.round-option:active { transform: scale(0.9); }
.round-option.active { background: #29b6f6; color: black; border-color: #29b6f6; transform: scale(1.1); }

/* Mode Bar */
.mode-bar {
    height: 0; overflow: hidden; background: var(--accent); color: black;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 13px; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-bar.active { height: 32px; }
.mode-bar.report { background: #9c27b0; color: white; }
.mode-bar.vouch { background: #2e7d32; color: white; }
.mode-bar.knife { background: #c62828; color: white; }
.mode-bar.walk { background: #1565c0; color: white; }

/* Grid */
.grid-container {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px;
    display: grid; gap: 8px; padding-bottom: calc(60px + var(--safe-bottom));
    transition: grid-template-columns 0.3s;
}
.grid-container.mode-15 { grid-template-columns: repeat(3, 1fr); }
.grid-container.mode-13 { grid-template-columns: repeat(3, 1fr); }
.grid-container.mode-8  { grid-template-columns: repeat(2, 1fr); }

.cell {
    background: var(--card-bg); border: 1px solid #333; border-radius: 8px;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    transition: transform 0.05s; will-change: transform; cursor: pointer; min-height: 100px;
}
.cell:active { transform: scale(0.98); }
.cell.selected { border: 2px solid var(--accent); filter: brightness(1.3); z-index: 2; }
.cell-id-bar {
    height: 24px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.cell-tags { 
    flex: 1; padding: 4px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; 
    overflow-y: auto;
}
.cell-tags::-webkit-scrollbar { display: none; }
.mini-tag {
    font-size: 11px; padding: 3px 5px; border-radius: 3px; line-height: 1.2; height: auto;
    white-space: nowrap; font-weight: bold; text-shadow: 0 1px 1px rgba(0,0,0,0.3); max-width: 100%;
}
.knife-badge {
    position: absolute; top: 0; right: 0; background: linear-gradient(135deg, #b71c1c, #e53935); color: white;
    width: 24px; height: 24px; border-radius: 0 0 0 8px; display: none; align-items: center; justify-content: center;
    font-size: 13px; z-index: 10; box-shadow: -1px 1px 3px rgba(0,0,0,0.5);
}
.cell.has-knife .knife-badge { display: flex; }

/* Bottom Control */
.bottom-ctrl {
    position: fixed; bottom: 0; left: 0; width: 100%; height: calc(50px + var(--safe-bottom));
    background: #212121; border-top: 1px solid #333; display: flex; align-items: flex-start; justify-content: space-around;
    padding: 5px 10px 0 10px; z-index: 100; box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.ctrl-btn {
    width: 23%; height: 40px; background: #383838; border: none; border-radius: 8px;
    font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.1s;
}
.ctrl-btn:active { transform: scale(0.95); }
.ctrl-btn.active { background: #555; border: 1px solid #fff; filter: brightness(1.2); transform: translateY(-2px); }

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(2px); z-index: 200;
    display: none; flex-direction: column; justify-content: flex-end;
}
.modal-overlay.active { display: flex; }
.sheet {
    background: #252525; border-radius: 16px 16px 0 0; padding: 20px;
    padding-bottom: calc(30px + var(--safe-bottom)); max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

/* Settings */
.settings-title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 20px; text-align: center; }
.settings-btn-item {
    padding: 15px; margin-bottom: 12px; border-radius: 10px; border: none; font-size: 15px; font-weight: bold;
    text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-tag-mgr { background: #1a2a3a; color: #64b5f6; border: 1px solid #64b5f6; }
.btn-reset-round { background: #372a18; color: #ffca28; border: 1px solid #ffca28; }
.btn-new-game { background: #3a1c1c; color: #ef5350; border: 1px solid #ef5350; }
.btn-clear-cache { background: #333; color: #999; border: 1px solid #555; font-size: 13px; }
.btn-about { background: #1a2a1a; color: #81c784; border: 1px solid #81c784; }

/* Tag Editor */
.tag-list-editor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; max-height: 200px; overflow-y: auto; align-content: flex-start; }
.tag-edit-item {
    padding: 6px 10px; border-radius: 4px; font-size: 12px; background: #333; color: #eee; border: 1px solid #555;
    display: flex; align-items: center; gap: 6px;
}
.tag-edit-item .del-btn {
    color: #ef5350; font-weight: bold; cursor: pointer; border-left: 1px solid #555; padding-left: 6px; font-size: 14px;
}
.add-tag-row { display: flex; gap: 5px; }
.add-input { flex: 1; background: #222; border: 1px solid #444; color: white; padding: 10px; border-radius: 6px; font-size: 14px; }
.color-select { background: #333; color: white; border: 1px solid #444; border-radius: 6px; font-size: 14px; }
.add-btn { background: #2e7d32; color: white; border: none; padding: 0 15px; border-radius: 6px; font-weight: bold; font-size: 20px; cursor: pointer; }

/* Record Modal */
.tab-header { display: flex; background: #333; border-radius: 8px; padding: 3px; margin-bottom: 12px; }
.tab-item { flex: 1; text-align: center; padding: 8px; font-size: 13px; font-weight: bold; color: #888; border-radius: 6px; transition: all 0.2s; cursor: pointer; }
.tab-item.active { background: #555; color: white; }
.tab-content { display: none; flex-wrap: wrap; gap: 8px; overflow-y: auto; align-content: flex-start; }
.tab-content.show { display: flex; }
.tag-btn { padding: 8px 12px; border-radius: 4px; font-size: 12px; background: #333; color: #ccc; border: 1px solid #444; cursor: pointer; }
.tag-btn.active { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; font-weight: bold; }

/* About Modal */
.about-content {
    display: flex; flex-direction: column; gap: 16px;
}

.about-section {
    display: flex; flex-direction: column; gap: 6px;
}

.about-label {
    font-size: 12px; color: #888; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
}

.about-value {
    font-size: 15px; color: #eee; font-weight: 600;
}

.about-link {
    font-size: 15px; color: #29b6f6; text-decoration: none; font-weight: 600;
    display: inline-block; padding: 8px 12px; background: rgba(41, 182, 246, 0.1);
    border-radius: 6px; border: 1px solid rgba(41, 182, 246, 0.3);
    transition: all 0.2s;
}
.about-link:active { background: rgba(41, 182, 246, 0.2); transform: scale(0.98); }

.about-divider {
    height: 1px; background: #444; margin: 8px 0;
}

.about-disclaimer {
    background: rgba(255, 193, 7, 0.05); border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 8px; padding: 12px;
}

.disclaimer-title {
    font-size: 13px; color: #ffc107; font-weight: bold; margin-bottom: 8px;
}

.disclaimer-text {
    font-size: 11px; color: #bbb; line-height: 1.6;
}

.about-version {
    text-align: center; font-size: 10px; color: #555; font-family: monospace;
    margin-top: 8px; letter-spacing: 1px;
}