@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --primary-color: #004d9c; 
    --secondary-color: #d90000; 
    --background-color: #f0f8ff;
    --font-color: #2c2c2c; 
    --border-color: #2c2c2c; 
    --highlight-color: #ffd700;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; font-family: 'Press Start 2P', cursive, sans-serif; background-color: var(--background-color); color: var(--font-color); overflow: hidden; }
.container { width: 100%; max-width: 480px; height: 100vh; margin: 0 auto; background-color: #fff; border-left: 2px solid var(--border-color); border-right: 2px solid var(--border-color); position: relative; overflow-y: auto; }
.screen { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; width: 100%; min-height: 100%; text-align: center; }
.screen.active { display: flex; }

h1 { font-size: 1.5rem; color: var(--primary-color); text-shadow: 2px 2px #fff, 4px 4px var(--border-color); margin-bottom: 20px; }
h2 { font-size: 1.2rem; color: var(--secondary-color); margin-bottom: 20px; }
p { font-size: 0.8rem; line-height: 1.8; margin-bottom: 15px; }

.btn-8bit { font-family: 'Press Start 2P', cursive; padding: 15px 25px; background-color: var(--primary-color); color: #fff; border: 2px solid var(--border-color); box-shadow: 4px 4px 0 var(--border-color); cursor: pointer; transition: all 0.1s ease-in-out; font-size: 1rem; margin-top: 20px; }
.btn-8bit:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--border-color); }
.btn-8bit:active { transform: translate(4px, 4px); box-shadow: none; }
.btn-8bit:disabled { background-color: #888; box-shadow: 4px 4px 0 #555; cursor: not-allowed; }
.btn-small { padding: 10px 15px; font-size: 0.8rem; margin-top: 10px; background-color: #6c757d; }

#screen-start { background: linear-gradient(to bottom, #87CEEB, #FFFACD); }
.rules-box { background-color: rgba(255, 255, 255, 0.8); border: 2px solid var(--border-color); padding: 15px; margin-top: 20px; }
.rules-box p { text-align: left; margin-bottom: 10px; }

#screen-select-horse { justify-content: flex-start; }
.horse-list { list-style: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.horse-item { border: 4px solid var(--border-color); padding: 10px; cursor: pointer; transition: all 0.2s; }
.horse-item.selected { background-color: var(--highlight-color); transform: scale(1.05); box-shadow: 0 0 15px var(--highlight-color); }
.horse-img { width: 80px; height: 80px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.horse-name { font-size: 0.8rem; margin-bottom: 5px; }
.horse-desc { font-size: 0.6rem; line-height: 1.4; }

#screen-race { background-color: #00A800; justify-content: center; padding: 0; position: relative; }
.race-field { display: flex; width: 100%; height: 70%; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.start-gate { width: 60px; height: 100%; background-color: #888; flex-shrink: 0; display: flex; flex-direction: column; transition: background-color 0.2s; }
.start-gate.open { background-color: #ccc; }
.gate-box { flex: 1; display: flex; align-items: center; justify-content: center; border-bottom: 2px dashed #666; }
.gate-box:last-child { border-bottom: none; }
.gate-number { width: 30px; height: 30px; background-color: #333; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.player-gate .gate-number { background-color: var(--highlight-color); color: #000; }
.race-track { flex-grow: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.lane { flex: 1; position: relative; border-bottom: 2px dashed rgba(255, 255, 255, 0.4); }
.lane:last-child { border-bottom: none; }
.horse-racer { width: 48px; height: 32px; position: absolute; left: -50px; top: 50%; transform: translateY(-50%); transition: left 5s cubic-bezier(0.4, 0, 0.6, 1); will-change: left; z-index: 10; }
.horse-racer.running { left: 10px; }
.horse-racer svg { width: 100%; height: 100%; image-rendering: pixelated; }
.player-horse svg { filter: drop-shadow(0 0 3px gold) drop-shadow(0 0 3px gold); }
.race-info { position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px; z-index: 20; text-align: center; }
.race-info p { margin: 0; }
.jikkyo { font-size: 1.2rem; margin-top: 5px; height: 2rem; }
.skip-btn { position: absolute; top: 15px; right: 15px; z-index: 30; }
.goal-line { position: absolute; right: 50px; top: 0; bottom: 0; display: flex; align-items: center; z-index: 5; }
.goal-line::before { content: ''; display: block; width: 4px; height: 100%; background-color: #fff; box-shadow: 2px 0px #000; }
.goal-line span { color: #fff; text-shadow: 2px 2px #000; font-size: 0.8rem; line-height: 1; margin-left: 8px; writing-mode: vertical-rl; text-orientation: upright; }

#screen-result-win { background: linear-gradient(to bottom, #FFD700, #FFA500); } 
#screen-result-lose { background: linear-gradient(to bottom, #4682B4, #B0C4DE); } 
.result-text { font-size: 2.5rem; margin: 20px 0; animation: bounce-result 0.5s ease infinite alternate; } 
.prize-img { width: 150px; height: 150px; background-color: #fff; border: 4px solid var(--border-color); margin: 20px 0; display: flex; align-items: center; justify-content: center; } 
@keyframes bounce-result { from { transform: translateY(0); } to { transform: translateY(-10px); } } 
#screen-form { justify-content: flex-start; padding-top: 40px; } 
.form-group { width: 90%; margin-bottom: 15px; text-align: left; } 
.form-group label { display: block; font-size: 0.8rem; margin-bottom: 5px; } 
.form-group input, .form-group select { width: 100%; padding: 10px; font-family: sans-serif; font-size: 1rem; border: 2px solid var(--border-color); } 
#screen-complete { justify-content: flex-start; padding-top: 40px; } 
.ticket-box { border: 4px dashed var(--secondary-color); padding: 20px; width: 90%; background-color: #fff8e1; } 
.ticket-box p { font-size: 0.7rem; text-align: left; margin-bottom: 10px; } 
.ticket-box strong { font-size: 1rem; } 
.qr-placeholder { width: 150px; height: 150px; margin: 15px auto; background-color: #fff; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; } 
.staff-confirm-btn { background-color: var(--secondary-color); } 
.used-stamp { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-size: 4rem; color: rgba(255, 0, 0, 0.5); border: 8px solid rgba(255, 0, 0, 0.5); border-radius: 50%; padding: 20px; z-index: 100; pointer-events: none; } 
.is-used .used-stamp { display: block; }