:root {
    --primary-color: #4A4AFF; --background-color: #f4f6f9; --card-background: #ffffff;
    --text-color: #333333; --text-light-color: #888888; --locked-color: #e0e0e0;
    --accent-color: #ffc107; --success-color: #28a745; --danger-color: #dc3545;
}
html { height: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #e9ebee; color: var(--text-color); min-height: 100%; display: flex; }
#app-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: var(--background-color);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}
.container { flex: 1; padding: 16px; overflow-y: auto; }
h2.page-title { font-size: 20px; text-align: center; margin-bottom: 16px; }
.status-header { background-color: var(--card-background); border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 24px; }
.status-header .rank-info { margin-bottom: 16px; }
.status-header .rank { font-size: 32px; font-weight: bold; color: var(--primary-color); }
.status-header .parts-info { display: flex; align-items: center; justify-content: center; gap: 8px; }
.status-header .parts-count { font-size: 32px; font-weight: bold; color: var(--primary-color); }
.status-header .parts-label { font-size: 20px; font-weight: 500; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.parts-book-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.part-item { position: relative; aspect-ratio: 1 / 1; background-color: var(--card-background); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s ease; border: 2px dashed var(--locked-color); }
.part-item:hover { transform: scale(1.05); }
.part-item .part-image { width: 60%; height: 60%; object-fit: contain; }
.part-item.locked .part-image { filter: grayscale(1) brightness(1.5); opacity: 0.8; }
.part-item.unlocked { border: 2px solid var(--primary-color); }
.demo-button { display: block; width: 90%; max-width: 300px; margin: 24px auto; padding: 12px; font-size: 16px; font-weight: bold; color: white; background-color: var(--success-color); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.game-list { display: flex; flex-direction: column; gap: 16px; }
.game-card { background-color: var(--card-background); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease; }
.game-card:hover { transform: translateY(-4px); }
.game-card .icon { font-size: 32px; }
.game-card .info h3 { margin: 0 0 4px; font-size: 18px; }
.game-card .info p { margin: 0; font-size: 12px; color: var(--text-light-color); }
.record-card { background-color: var(--card-background); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.record-card h3 { margin: 0 0 16px; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
.progress-bar { width: 100%; background-color: var(--locked-color); border-radius: 8px; height: 16px; overflow: hidden; margin-top: 8px; }
.progress-bar-inner { height: 100%; background-color: var(--accent-color); border-radius: 8px; transition: width 0.5s ease; }
.bottom-nav { flex-shrink: 0; display: flex; justify-content: space-around; background-color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 6px 0; border-top: 1px solid #eee; z-index: 100; }
.nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-light-color); font-size: 10px; flex-grow: 1; cursor: pointer; }
.nav-item svg { width: 22px; height: 22px; margin-bottom: 2px; }
.nav-item.active { color: var(--primary-color); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 1000; }
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content { position: relative; background-color: var(--card-background); padding: 24px; border-radius: 16px; width: 85%; max-width: 350px; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-close-btn { margin-top: 20px; padding: 10px 20px; border: none; background-color: var(--primary-color); color: white; border-radius: 8px; cursor: pointer; font-size: 16px; }
.modal-exit-btn { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; color: #aaa; cursor: pointer; line-height: 1; transition: color 0.2s; }
.modal-exit-btn:hover { color: #333; }
#modal-image { width: 100px; height: 100px; margin-bottom: 16px; }
#modal-unlock-date { font-size: 12px; color: var(--text-light-color); margin-top: 12px; }
.game-feedback { margin-top: 10px; font-weight: bold; min-height: 20px;}
.feedback-success { color: var(--success-color); }
.feedback-fail { color: var(--danger-color); }

/* --- Game Styles --- */
#game-content { position: relative; user-select: none; }
#circuit-board { position: relative; width: 300px; height: 200px; background: #013220 url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23005500" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E'); margin: 0 auto; border: 2px solid #ccc; }
.circuit-node { position: absolute; width: 20px; height: 20px; background: #ccc; border-radius: 50%; cursor: pointer; border: 2px solid #666; }
.circuit-node.start { background: var(--accent-color); }
.circuit-node.end { background: var(--danger-color); }
.circuit-node.active { border-color: yellow; }
#circuit-board svg { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; }
#circuit-board line { stroke: #555; stroke-width: 4; transition: stroke 0.3s; }
#circuit-board line.lit { stroke: #00ffff; }
#program-world { display: flex; flex-direction: column; align-items: center; }
#program-grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 2px; background: #a2a2a2; padding: 5px; margin-bottom: 10px; }
.program-cell { width: 40px; height: 40px; background: #d3d3d3; position: relative; }
.program-cell.road { background: #666; }
#program-car { font-size: 25px; position: absolute; transition: all 0.5s linear; }
#program-sequence { height: 40px; min-width: 200px; background: #eee; border: 1px solid #ccc; margin: 5px 0; display: flex; align-items: center; padding: 0 5px; gap: 5px; overflow-x: auto; }
.command-block { font-size: 24px; }
#program-controls button { font-size: 16px; margin: 0 5px; padding: 5px 10px; }
#mechanic-garage { position: relative; width: 300px; height: 200px; background: #f0e68c; margin: 0 auto; border: 2px solid #8B4513; }
#mechanic-car { position: absolute; font-size: 100px; bottom: 30px; left: 50%; transform: translateX(-50%); }
#wheel-slot { position: absolute; width: 30px; height: 30px; border: 2px dashed #666; border-radius: 50%; bottom: 35px; left: 185px; }
#parts-panel { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,0.7); padding: 5px; border-radius: 5px; }
.wheel-option { font-size: 40px; cursor: grab; }

@media (min-width: 500px) {
    #app-wrapper { margin-top: 2rem; margin-bottom: 2rem; border-radius: 10px; max-height: calc(100vh - 4rem); }
    #game-modal-overlay .modal-content { max-width: 650px; }
    #circuit-board { width: 500px; height: 300px; }
    #program-grid { grid-template-columns: repeat(5, 50px); }
    .program-cell { width: 50px; height: 50px; }
    #program-car { font-size: 30px; }
    #mechanic-garage { width: 500px; height: 300px; }
    #mechanic-car { font-size: 150px; }
    #wheel-slot { bottom: 50px; left: 310px; width: 45px; height: 45px; }
}