@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/orbitron-v35-latin-700.woff2') format('woff2'); }

:root { --accent-color: #00C9FF; --dauber-color: #ef4444; --text-color: #e2e8f0; --text-muted: #a0aec0; --cell-bg: #334155; }
html { height: 100%; width: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { font-family: 'Inter', sans-serif; background-color: #1a202c; min-height: 100vh; margin: 0; padding: 0; color: var(--text-color); display: flex; flex-direction: column; user-select: none; }

.player-view { padding: 20px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
.player-header { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.player-header h2 { margin: 0; font-family: 'Orbitron', sans-serif; color: var(--accent-color); font-size: 1.5rem; text-align: center; }

.player-card-container { margin: 20px 0; width: 100%; max-width: 500px; }
.player-card-container .ticket-90, .player-card-container .ticket-75 { background: white; border-radius: 8px; overflow: hidden; }
.player-card-container .ticket-90-cell, .player-card-container .ticket-75-cell { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.player-card-container .daubed { background-color: var(--dauber-color) !important; color: white !important; border-color: var(--dauber-color); position: relative; }
.player-card-container .daubed::after { content: ''; position: absolute; width: 70%; height: 70%; background: rgba(255,255,255,0.3); border-radius: 50%; }

.ticket-90 { border: 2px solid #000; padding: 5px; margin-bottom: 10px; width: 100%; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; }
.ticket-90-grid { display: grid; grid-template-columns: repeat(9, 1fr); border: 1px solid #000; flex-grow: 1; }
.ticket-90-cell { border: 1px solid #000; height: 10vw; max-height: 50px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.2rem; background: #fff; color: #000; }
.ticket-90-cell.empty { background: #eee; cursor: default !important; }

.ticket-75 { border: 2px solid #000; padding: 10px; width: 100%; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; }
.ticket-75-header { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-weight: 900; font-size: 1.5rem; margin-bottom: 5px; color: #000; }
.ticket-75-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid #000; border-left: 2px solid #000; flex-grow: 1; }
.ticket-75-cell { border-right: 2px solid #000; border-bottom: 2px solid #000; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.5rem; background: #fff; color: #000; }
.ticket-75-cell.free { background: #ddd; font-size: 0.9rem; }

.ticket-footer { text-align: center; font-size: 1rem; color: #000; margin-top: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.player-footer-text { color: white; margin-top: 20px; }

.player-actions { display: flex; flex-direction: column; align-items: center; width: 100%; }
.player-instruction { color: var(--text-muted); font-size: 1rem; margin-bottom: 15px; }
.control-btn { background-color: var(--cell-bg); border: 1px solid #555; color: white; padding: 15px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1.1rem; width: 100%; max-width: 300px; }
.highlight-btn { border-color: var(--accent-color); color: var(--accent-color); }
.highlight-btn:active { background-color: var(--accent-color); color: #000; }