.game-field{width:100%;margin:0 auto}.field{display:flex;height:clamp(150px,20vw,250px);background:#2d5016;border:3px solid #fff;position:relative;overflow:hidden;border-radius:10px}@media (max-width: 768px){.field{height:150px}}.end-zone{width:10%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:clamp(.6rem,1.5vw,.8rem);writing-mode:vertical-rl;text-orientation:mixed;transition:background-color .3s ease}.end-zone.defending{background:#1a5f1a}.end-zone.attacking{background:#8b0000;box-shadow:inset 0 0 20px #ffff004d}@media (max-width: 600px){.end-zone span{display:none}}.field-main{width:80%;position:relative;background-image:repeating-linear-gradient(90deg,transparent,transparent 9.9%,rgba(255,255,255,.3) 9.9%,rgba(255,255,255,.3) 10%)}.yard-line{position:absolute;top:0;bottom:0;width:2px;background:#fffc}.yard-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:clamp(.8rem,2vw,1.2rem);text-shadow:1px 1px 2px rgba(0,0,0,.8)}@media (max-width: 600px){.yard-number{display:none}}.first-down-marker{position:absolute;top:0;bottom:0;width:4px}.first-down-line{position:absolute;top:0;bottom:0;width:4px;background:#ff0;opacity:.8}.first-down-label{position:absolute;top:-20px;left:50%;transform:translate(-50%);background:#ff0;color:#000;padding:2px 6px;border-radius:3px;font-size:.7rem;font-weight:700}.football{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,3vw,2rem);transition:left .5s ease-in-out;z-index:10}.football.player-1{filter:hue-rotate(0deg)}.football.player-2{filter:hue-rotate(180deg)}.field-info{margin-top:10px;text-align:center}.possession-indicator{font-size:clamp(.9rem,2vw,1.1rem);font-weight:700;color:#f97316}.scoreboard{background:#1a1a1a;border:3px solid #f97316;border-radius:10px;padding:20px;width:100%}.score-section{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}@media (max-width: 600px){.score-section{flex-direction:column}}.team-score{text-align:center;position:relative;padding:10px;border-radius:8px;transition:all .3s ease}.team-score.has-possession{background:#f9731633;border:2px solid #f97316;box-shadow:0 0 15px #f973164d}.team-score h3{margin-bottom:10px;color:#f97316}.possession-indicator{font-size:.8rem;font-weight:700;color:#ff0;text-shadow:1px 1px 2px rgba(0,0,0,.8);margin-top:5px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.score{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.game-info{text-align:center;display:flex;flex-direction:column;gap:10px}.quarter{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:700;color:#fff}.down-distance{font-size:clamp(1rem,2.5vw,1.3rem);color:#ff0;font-weight:700}.field-position{font-size:clamp(.9rem,2vw,1.1rem);color:#ccc}.dice-roller{display:flex;flex-direction:column;align-items:center;gap:15px;padding:15px;background:#ffffff1a;border-radius:10px;width:100%}.dice-container{display:flex;gap:15px}.die{width:clamp(60px,10vw,80px);height:clamp(60px,10vw,80px);background:#fff;border:2px solid #333;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:clamp(2rem,5vw,3rem);font-weight:700;color:#333;box-shadow:0 4px 8px #0000004d;transition:transform .3s}.die.rolling{animation:roll .8s ease-in-out}@keyframes roll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}.roll-button{padding:clamp(10px,2vw,12px) clamp(20px,4vw,30px);font-size:clamp(1rem,2vw,1.2rem);font-weight:700;background:#f97316;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.roll-button:hover:not(:disabled){background:#ea580c}.roll-button:disabled{background:#666;cursor:not-allowed}.roll-result{font-size:1.1rem;font-weight:700;color:#f97316}.play-log{width:100%;background:#00000080;border:2px solid #333;border-radius:10px;padding:20px;flex:1;min-width:0}.play-log h3{margin-bottom:15px;color:#f97316;text-align:center}.plays-container{max-height:clamp(200px,30vh,300px);overflow-y:auto}@media (max-width: 768px){.plays-container{max-height:200px}}.play-entry{padding:8px 12px;margin-bottom:5px;background:#ffffff0d;border-left:3px solid #f97316;color:#ccc;font-size:.9rem;line-height:1.4}.play-entry:first-child{background:#f9731633;color:#fff;font-weight:700}.no-plays{text-align:center;color:#666;font-style:italic}.plays-container::-webkit-scrollbar{width:8px}.plays-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.plays-container::-webkit-scrollbar-thumb{background:#f97316;border-radius:4px}.plays-container::-webkit-scrollbar-thumb:hover{background:#ea580c}.controls{display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px;background:#ffffff0d;border-radius:10px;width:100%}.control-button{padding:10px 20px;font-size:1rem;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:all .3s;width:100%;max-width:300px}.coin-toss{background:#10b981;color:#fff}.coin-toss:hover{background:#059669}.punt{background:#6366f1;color:#fff}.punt:hover{background:#4f46e5}.field-goal{background:#f59e0b;color:#fff}.field-goal:hover{background:#d97706}.extra-point{background:#8b5cf6;color:#fff}.extra-point:hover:not(:disabled){background:#7c3aed}.two-point{background:#ef4444;color:#fff}.two-point:hover{background:#dc2626}.control-button:disabled{background:#666;cursor:not-allowed;opacity:.6}.extra-point-controls{text-align:center}.extra-point-controls p{margin-bottom:10px;font-weight:700;color:#f97316}.waiting-message{font-weight:700;color:#ff0;text-align:center}.game{display:flex;flex-direction:column;gap:20px;align-items:center;padding:0 10px}.game-controls-section{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1200px}.dice-and-actions{display:flex;flex-direction:column;align-items:center;gap:15px}.quick-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.quick-action-button{padding:8px 16px;font-size:.9rem;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:all .3s;min-width:80px}.quick-action-button.punt{background:#6366f1;color:#fff}.quick-action-button.punt:hover{background:#4f46e5}.quick-action-button.field-goal{background:#f59e0b;color:#fff}.quick-action-button.field-goal:hover{background:#d97706}.extra-point-instructions{text-align:center;background:#f973161a;border:2px solid #f97316;border-radius:8px;padding:15px;margin:10px 0}.extra-point-instructions p{color:#f97316;font-weight:700;margin-bottom:10px}.extra-point-buttons{display:flex;flex-direction:column;gap:10px;align-items:center}.extra-point-option{color:#ccc;font-size:.9rem;padding:8px 12px;background:#ffffff0d;border-radius:5px;border:1px solid #666}.quick-action-button.two-point{background:#ef4444;color:#fff}.quick-action-button.two-point:hover{background:#dc2626}.conversion-message{text-align:center;background:#ffff001a;border:2px solid #ffff00;border-radius:8px;padding:15px;margin:10px 0}.conversion-message p{color:#ff0;font-weight:700;margin:0}@media (min-width: 768px){.game{display:grid;grid-template-columns:1fr;grid-template-areas:"scoreboard" "field" "controls-section" "controls";gap:30px;max-width:1400px;margin:0 auto}.game-controls-section{grid-area:controls-section;flex-direction:row;align-items:flex-start}.dice-and-actions{flex-shrink:0;width:280px;margin-right:30px}}@media (min-width: 1024px){.dice-and-actions{width:320px}}.app{max-width:1400px;margin:0 auto;padding:clamp(10px,2vw,20px);text-align:center}h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:clamp(20px,3vw,30px);color:#f97316;text-shadow:2px 2px 4px rgba(0,0,0,.5)}@media (max-width: 600px){h1{font-size:1.8rem}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a1a;color:#fff;min-height:100vh}