:root{--bleu: #3a7fd0;--bleu-vif: #79bdff;--or: #d99a2b;--or-vif: #ffd34d;--tuile-bleue: #6f95b8;--tuile-or: #b9863f;--vert-vif: #34e06a;--rouge: #ff5470;--nuit: #05080e;--encre: #eef3ff;--carte: #0d1219;--bord: #232d3c}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;overflow:hidden}body{background:radial-gradient(140% 110% at 50% -10%,#131c2c 0%,#0a1119 50%,var(--nuit) 100%);color:var(--encre);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-variant-numeric:tabular-nums}button{font-family:inherit;cursor:pointer;border:none}.penalx-pos{position:relative;display:flex;flex-direction:column;height:100vh}.floor{flex:1 1 auto;display:flex;min-height:0}.pitch-area{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 0 0 10px}.pitch-frame{width:100%;flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);min-height:0;padding:10px 8px}.shot-status{position:absolute;left:50%;bottom:8px;transform:translate(-50%);background:#04080eb8;padding:6px 18px;border-radius:999px;font-size:15px;letter-spacing:1px;color:var(--or-vif);z-index:20}.pitch{flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);min-height:0}.goal-frame{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px #00000080}.goal-top{flex:0 0 auto;height:clamp(10px,1.4vw,18px);background:linear-gradient(180deg,#f4f6f2,#cfd4c8);border-bottom:3px solid var(--or-vif)}.goal-body{flex:1 1 auto;display:flex;min-height:0;background:var(--stade) center / cover no-repeat}.goal-post{flex:0 0 auto;width:clamp(8px,1.1vw,16px);background:linear-gradient(90deg,#e7ebe2,#b9c0b2)}.goal-post-right{background:linear-gradient(270deg,#e7ebe2,#b9c0b2)}.cadran-grid{position:relative;flex:1 1 auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:2px;background:#00000059}.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.6vh,8px);padding:4px;transition:filter .15s ease,transform .12s ease}.tile.is-blue{background:var(--tuile-or)}.tile.is-yellow{background:var(--tuile-bleue)}.tile:hover{filter:brightness(1.12)}.tile-badge{width:clamp(22px,3.2vw,44px);height:clamp(22px,3.2vw,44px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(12px,1.7vw,20px);background:#ffffff1f}.tile.is-blue .tile-badge{border:2px solid var(--bleu-vif);color:var(--bleu-vif)}.tile.is-yellow .tile-badge{border:2px solid var(--or-vif);color:var(--or-vif)}.tile-stake{min-width:60%;padding:2px 6px;border-radius:5px;background:#04080eb8;color:var(--encre);font-size:clamp(11px,1.3vw,15px);font-weight:700;text-align:center}.pitch-area.is-locked .tile,.pitch-area.is-locked .spot,.pitch-area.is-locked .spot-add_bet{pointer-events:none}.tile.is-target{z-index:4;animation:cadran-cible .7s ease}@keyframes cadran-cible{0%,to{transform:scale(1)}45%{transform:scale(1.18);box-shadow:0 0 0 6px #ffffffa6,0 10px 20px #0000008c}}.tile.flash,.spot.flash{animation:spot-flash .4s ease}@keyframes spot-flash{0%{box-shadow:0 0 0 5px #ffffffd9}to{box-shadow:none}}.tile.is-win,.spot.is-win{box-shadow:0 0 0 3px var(--vert-vif),0 6px 16px #00000080!important}.tile.is-lose,.spot.is-lose{filter:grayscale(.75) brightness(.55)}.goal-top.is-hit{animation:barre-frappee .6s ease}@keyframes barre-frappee{0%,to{filter:none}40%{filter:brightness(1.9) drop-shadow(0 0 12px var(--or-vif))}}.ballon{position:absolute;left:50%;bottom:4%;width:clamp(14px,2.4vw,24px);aspect-ratio:1;margin-left:calc(-1*clamp(7px,1.2vw,12px));background:center / contain no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));pointer-events:none;z-index:5;opacity:0;transform:translate(0) scale(.75);transition:transform .5s cubic-bezier(.3,.5,.25,1),opacity .15s ease}.ballon.is-flying{opacity:1;transform:translate(var(--tx, 0),var(--ty, 0)) scale(.85)}.spot-row{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:6px;padding:10px;border-radius:6px;background:var(--gazon) center / cover no-repeat}.spot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(8px,1.3vw,14px) clamp(10px,1.6vw,18px);border-radius:8px;font-weight:700;font-size:clamp(12px,1.4vw,16px);color:var(--encre);background:#060c089e;box-shadow:0 3px 8px #00000059;transition:transform .12s ease,box-shadow .12s ease,filter .15s ease}.spot:hover{transform:translateY(-2px)}.spot-stake{flex:0 0 auto;min-width:2.4em;padding:3px 8px;border-radius:5px;background:#04080ebf;font-size:clamp(11px,1.2vw,14px);text-align:center}.spot-yellow .spot-label{color:var(--or-vif)}.spot-blue .spot-label{color:var(--bleu-vif)}.spot-add_bet{justify-content:center;color:#05130c;background:linear-gradient(180deg,var(--vert-vif) 0%,#1c8f45 100%);font-size:clamp(13px,1.6vw,18px);text-transform:uppercase;letter-spacing:.5px}.spot-add_bet:hover:not(:disabled){filter:brightness(1.08)}.spot-add_bet:disabled{opacity:.4;cursor:default;filter:grayscale(.7)}.tickets-panel{width:280px;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;background:#04080e80;border-left:1px solid rgba(255,255,255,.08)}.coupon-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 16px;background:linear-gradient(180deg,#0f2430,#0a1620);border-bottom:1px solid rgba(255,255,255,.08)}.action-status{min-height:16px;font-size:12px;color:#90a3c4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.coupon-actions-row{display:flex;gap:8px}.action-button{flex:1 1 0;padding:10px 12px;border-radius:6px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;transition:filter .15s ease,transform .08s ease}.action-button:hover:not(:disabled){filter:brightness(1.1)}.action-button:active:not(:disabled){transform:translateY(1px)}.action-button:disabled{opacity:.4;cursor:default;filter:grayscale(.6)}.action-clear{color:#1c2016;background:linear-gradient(180deg,#e7ebe2,#b9c0b2)}.action-draw{color:#05130c;background:linear-gradient(180deg,var(--vert-vif) 0%,#1c8f45 100%)}.coupon-head{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 22px;gap:8px;padding:10px 16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#90a3c4;border-bottom:1px solid rgba(255,255,255,.08)}.coupon-head span:last-child{text-align:right}.coupon-list{flex:0 1 auto;max-height:180px;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0}.coupon-list li{display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}.coupon-list .coupon-label{color:var(--encre)}.coupon-list .coupon-value{color:var(--or-vif);font-weight:700;text-align:right}.coupon-list .ticket-payout{font-weight:700}.coupon-list .ticket-payout.win{color:#9fd88a}.coupon-list .ticket-payout.lose{color:#7a8a9a}.coupon-list .ticket-payout.pending{color:#7a8a9a;font-weight:400}.coupon-remove{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ff547029;color:var(--rouge);font-size:14px;line-height:1}.coupon-remove:hover{background:#ff547052}.coupon-list li.coupon-empty{display:block;padding:24px 16px;color:#4d5b73;font-size:13px;text-align:center}.coupon-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}.page-button{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bleu);color:#fff;font-size:13px}.page-button:disabled{opacity:.3;cursor:default}.page-tag{font-size:13px;color:#90a3c4;min-width:40px;text-align:center}.round-tickets{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}.round-tickets-head{flex:0 0 auto;display:flex;justify-content:space-between;padding:10px 16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#90a3c4}.round-tickets-list{flex:1 1 auto;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0}.round-tickets-list li{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}.round-tickets-list .ticket-code{color:var(--or-vif);font-weight:700}.round-tickets-list .ticket-cancel{background:transparent;color:#e07b7b;font-size:12px;border:1px solid #6e3030;border-radius:4px;padding:2px 6px}.round-tickets-list .ticket-payout{font-weight:700}.round-tickets-list .ticket-payout.win{color:#9fd88a}.round-tickets-list .ticket-payout.lose{color:#7a8a9a}.round-tickets-list .ticket-payout.pending{color:#7a8a9a;font-weight:400}.stake-prompt-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020407b3;display:flex;align-items:center;justify-content:center;z-index:70}.stake-prompt{width:min(320px,88vw);padding:22px;border-radius:12px;background:var(--carte);border:1px solid var(--bord);box-shadow:0 16px 44px #0009;display:flex;flex-direction:column;gap:14px}.stake-prompt-title{font-size:15px;color:#90a3c4}.stake-prompt-title b{color:var(--or-vif)}.stake-prompt input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--bord);background:#060a10;color:var(--encre);font-size:22px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.stake-prompt input:focus{outline:2px solid var(--bleu)}.stake-prompt-actions{display:flex;gap:10px}.stake-prompt-actions .action-button{flex:1 1 0}.action-confirm{color:#fff;background:linear-gradient(180deg,var(--bleu) 0%,#163f8a 100%)}.action-cancel{color:var(--encre);background:#ffffff14}.video-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:60;cursor:pointer}.video-overlay .js-shot-video{max-width:100%;max-height:100%}.video-hint{position:absolute;right:18px;bottom:18px;padding:6px 14px;border-radius:999px;background:#ffffff1f;color:#cfd8e8;font-size:12px;letter-spacing:.4px}.shot-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 100% at 50% 30%,#090f18bf,#05090fd9 70%,#020407eb);display:flex;align-items:center;justify-content:center;z-index:50}.shot-card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px;max-height:92vh;overflow-y:auto}.shot-status{font-size:18px;letter-spacing:1px;color:var(--or-vif)}.shot-result{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 40px;border-radius:20px;background:#0a0f18;box-shadow:0 16px 44px #0009}.result-label{font-size:16px;color:#cfd8e8}.result-label b{color:var(--or-vif)}.shot-tickets-head{margin-top:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#90a3c4}.shot-tickets{width:min(440px,86vw);max-height:min(340px,40vh);background:var(--carte);border:1px solid var(--bord);border-radius:8px;list-style:none;margin:0;padding:0;overflow-y:auto}.shot-tickets li{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #1c2536;font-size:14px}.shot-tickets li:last-child{border-bottom:none}.button{display:block;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#05130c;background:linear-gradient(180deg,var(--vert-vif) 0%,#1c8f45 100%);box-shadow:0 3px 8px #0006;transition:filter .15s ease,transform .08s ease}.button:hover:not(:disabled){filter:brightness(1.1)}.button:active:not(:disabled){transform:translateY(1px)}.notification{position:fixed;top:16px;left:50%;transform:translate(-50%);padding:10px 18px;border-radius:6px;background:#3a1f1f;color:#f4b8b8;font-size:14px;z-index:100;box-shadow:0 4px 14px #0006}.notification.success{background:#1a2e3a;color:#b8dcf4}.loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060a99;display:flex;align-items:center;justify-content:center;z-index:200}.loading-spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--bord);border-top-color:var(--or-vif);animation:spin-turn .8s linear infinite}@keyframes spin-turn{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 900px){.tile-badge{width:clamp(18px,4vw,30px);height:clamp(18px,4vw,30px)}}@media (max-width: 780px){.floor{flex-direction:column;overflow-y:auto}.tickets-panel{width:auto}.spot-row{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}}