.app-detail-main { flex: 1; padding: 128px 24px 104px; }
.app-detail-container { width: min(100%, 760px); margin: 0 auto; }
.app-detail-heading { margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.app-detail-heading h1 { font-size: var(--text-2xl); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.app-detail-back { background: var(--surface); }
.tool-body { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.tool-body > * { width: 100%; }

@media (max-width: 768px) {
    .app-detail-main { padding: 88px 12px calc(96px + env(safe-area-inset-bottom)); }
    .tool-body { padding: 20px 14px; }
    .app-detail-heading { margin-bottom: 16px; }
    .app-detail-heading h1 { font-size: var(--text-xl); }
}

.app-detail-container-game { max-width: 520px; }

.game-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 16px; }
.game-stat { min-width: 72px; text-align: center; }
.game-stat-value { color: var(--text); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.game-stat-label { margin-top: 4px; color: var(--text-muted); font-size: var(--text-sm); }
.game-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

.countdown-form { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.countdown-form-actions .checkbox-field { margin-right: auto; }
.countdown-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.countdown-columns { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.countdown-group { min-width: 0; }
.countdown-list { display: flex; flex-direction: column; gap: 8px; }
.countdown-item { min-height: 82px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 6px 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.countdown-item-copy { min-width: 0; }
.countdown-item-copy h3 { color: var(--text); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.countdown-item-meta { margin-top: 3px; color: var(--text-muted); font-size: var(--text-sm); }
.countdown-remaining { grid-column: 1; grid-row: 2; overflow-wrap: anywhere; font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--primary); }
.countdown-duration { grid-column: 1; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.countdown-delete { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
@media (hover: hover) { .countdown-delete:hover { color: var(--danger); background: var(--surface); } }

@media (max-width: 560px) {
    .countdown-form { grid-template-columns: 1fr; }
    .countdown-columns { grid-template-columns: 1fr; gap: 16px; }
}