:root { --ink:#f3efe4; --muted:#96988f; --lime:#b8ef43; --red:#ee5b4b; --panel:#1b1d19; --line:#35382f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 50% 20%,#292b24 0,#171914 42%,#0c0d0b 100%); font-family:Inter,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
button { font:inherit; }
.game-shell { width:min(1180px,95vw); margin:auto; padding:18px 0 30px; }
.topbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:0 4px 16px; }
.brand { display:flex; align-items:center; gap:11px; letter-spacing:.13em; }
.brand-mark { display:grid; place-items:center; width:42px; aspect-ratio:1; color:#111; background:var(--lime); border-radius:50%; font-size:12px; font-weight:900; }
.brand strong,.brand small { display:block; }.brand small { color:var(--muted); font-size:9px; margin-top:4px; }
.ghost-button { border:1px solid #55594e; border-radius:999px; background:transparent; color:var(--ink); padding:9px 16px; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
.ghost-button:hover { border-color:var(--lime); color:var(--lime); }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.throw-method-control{display:flex;flex-direction:column;gap:3px;color:#7f8b87;font-size:6px;letter-spacing:.14em}.throw-method-control select{height:30px;padding:0 25px 0 9px;border:1px solid #55594e;border-radius:15px;color:#e7eee8;background:#151a17;font:700 9px Arial,sans-serif;cursor:pointer}.throw-method-control select:focus{outline:1px solid var(--lime);outline-offset:1px}
.sound-button,.room-button { display:grid; place-items:center; width:36px; height:36px; padding:0; color:#dfe7df; border:1px solid #55594e; border-radius:50%; background:#151a17; cursor:pointer; transition:.18s; }.sound-button span,.room-button span{font-size:16px;line-height:1;filter:saturate(.8)}.sound-button:hover,.room-button:hover{border-color:var(--lime);background:#263022}.sound-button[aria-pressed="true"]{border-color:#773f39;background:#251817}.sound-button[aria-pressed="true"] span{filter:saturate(.75)}.room-button[aria-pressed="true"]{border-color:#8c9fbd;background:#172235;box-shadow:0 0 12px #5379ab35}
.aim-help { position:relative; }
.help-button { display:grid; place-items:center; width:36px; height:36px; padding:5px; border:1px solid #55594e; border-radius:50%; background:#151a17; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; }
.help-button:hover,.help-button[aria-expanded="true"] { border-color:var(--lime); background:#263022; transform:translateY(-1px); }
.help-button img { display:block; width:100%; height:100%; object-fit:contain; }
.aim-tooltip { position:absolute; z-index:30; top:calc(100% + 13px); right:0; width:min(350px,84vw); padding:20px 21px 18px; color:#e9eee7; border:1px solid #9abb5266; border-radius:4px; background:linear-gradient(145deg,#1b2929f7,#101a1df7); box-shadow:0 20px 55px #000c,0 0 24px #b8ef4314; backdrop-filter:blur(10px); }
.aim-tooltip[hidden] { display:none; }
.aim-tooltip::before { content:""; position:absolute; right:10px; top:-7px; width:12px; height:12px; border-left:1px solid #9abb5266; border-top:1px solid #9abb5266; background:#182526; transform:rotate(45deg); }
.aim-tooltip > strong { display:block; margin-bottom:13px; color:var(--lime); font-size:11px; letter-spacing:.17em; }
.aim-tooltip ol { margin:0; padding-left:20px; }
.aim-tooltip li { padding:0 0 10px 4px; color:#b8c4c0; font-size:11px; line-height:1.5; }
.aim-tooltip li::marker { color:var(--lime); font-weight:900; }
.aim-tooltip li b { color:#f0f3ed; }
.aim-tooltip small { display:block; margin-top:3px; padding-top:11px; border-top:1px solid #ffffff18; color:#819491; font-size:9px; line-height:1.45; letter-spacing:.04em; }
.aim-tooltip .help-method{margin-top:10px;padding-top:10px;border-top:1px solid #ffffff18}.aim-tooltip .help-method h3{margin:0;color:#d9ec9f;font-size:8px;letter-spacing:.15em}.aim-tooltip .help-method ol{margin:7px 0 5px;padding-left:18px}.aim-tooltip .help-method li{padding:0 0 5px 2px;font-size:9px;line-height:1.38}.aim-tooltip .help-method small{margin:0;padding:0;border:0;color:#7f8d87;font-size:8px;line-height:1.35}.aim-tooltip .gesture-help h3{color:#a8c9ef}.aim-tooltip .gesture-help li::marker{color:#83aee0}
.scoreboard { display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; max-width:760px; margin:16px auto 12px; }
.player-card { display:grid; grid-template-columns:1fr auto; align-items:end; padding:10px 18px; border-bottom:2px solid #30332c; opacity:.55; transition:.25s; }
.player-card.active { opacity:1; border-color:var(--lime); background:linear-gradient(90deg,transparent,rgba(184,239,67,.06)); }
.player-card.active .status-dot { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.player-label { font-size:11px; letter-spacing:.16em; align-self:start; }.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#777; margin-right:6px; }
.ai-identity { display:flex; align-items:center; gap:8px; letter-spacing:normal; }
.ai-identity > img { width:35px; height:35px; flex:none; border-radius:50%; object-fit:cover; object-position:center 28%; border:1px solid #ffffff32; }
.ai-identity span,.ai-identity b,.ai-identity small { display:block; }.ai-identity b{font-size:10px;letter-spacing:.12em}.ai-identity small{margin:3px 0 0;color:#849390;font-size:6px;line-height:1.2;letter-spacing:.04em;text-transform:none}
.ai-identity .status-dot { vertical-align:1px; }
.ai-reaction { grid-column:1/-1; min-height:13px; margin-top:4px; color:#d8c98e; font:italic 9px/1.25 Georgia,serif; opacity:0; transform:translateY(3px); transition:opacity .2s,transform .2s; }
.ai-reaction.show { opacity:1; transform:translateY(0); }.ai-reaction.bad{color:#db917b}.ai-reaction.good{color:#c7f14d}
.score { grid-row:1/3; grid-column:2; font:700 clamp(42px,6vw,68px)/.8 Georgia,serif; }
.turn-score { color:var(--muted); font-size:9px; letter-spacing:.12em; }.turn-score strong { color:var(--ink); }
.versus { text-align:center; color:#65685f; font:italic 18px Georgia,serif; }
.play-area { display:grid; grid-template-columns:minmax(320px,690px) 230px; justify-content:center; gap:28px; align-items:center; }
.board-column { min-width:0; }
.range-scene { position:relative; width:100%; height:min(58vh,540px); min-height:390px; overflow:hidden; perspective:650px; background:linear-gradient(#686b64 0 12%,#9b9a8e 12% 53%,#5d5143 53% 54%,#322b24 54% 100%); border:1px solid #44473e; box-shadow:inset 0 0 80px #0009,0 22px 50px #0008; }
.range-scene::before { content:""; position:absolute; inset:54% 0 0; background:repeating-linear-gradient(90deg,transparent 0 11%,#201b17 11.3% 11.7%,transparent 12% 22%),linear-gradient(150deg,#4b4035,#27211c); transform-origin:50% 0; transform:rotateX(58deg) scale(1.7); }
.range-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#0008,transparent 24% 76%,#0008),linear-gradient(0deg,#0007,transparent 48%); z-index:7; }
.back-wall { position:absolute; z-index:1; left:17%; right:17%; top:8%; bottom:42%; background:linear-gradient(#aaa99d,#777970); border:8px solid #4a4d47; box-shadow:0 14px 18px #0005,inset 0 0 30px #0004; }
.back-wall::before,.back-wall::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:#60625c; }.back-wall::before{left:33%}.back-wall::after{right:33%}
.hall-sign { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); color:#d9d6c8; background:#373a34; padding:4px 10px; font-size:7px; letter-spacing:.18em; white-space:nowrap; }
.ceiling-light { position:absolute; z-index:2; top:3%; width:22%; height:2.4%; background:#fffce7; box-shadow:0 0 22px #fffbd9; transform:perspective(100px) rotateX(-30deg); }.light-one{left:18%}.light-two{right:18%}
.lane { position:absolute; z-index:1; bottom:-8%; height:61%; width:2px; background:#d9d0b8aa; transform-origin:bottom; }.lane-left{left:18%;transform:rotate(18deg)}.lane-right{right:18%;transform:rotate(-18deg)}
.oche { position:absolute; z-index:2; left:22%; right:22%; bottom:7%; height:7px; background:#d8c282; box-shadow:0 4px 8px #000; transform:perspective(90px) rotateX(60deg); }
.board { width:38%; aspect-ratio:1; position:absolute; z-index:3; left:50%; top:30%; border-radius:50%; cursor:default; user-select:none; touch-action:none; filter:drop-shadow(0 10px 15px #000b); transform:translate(-50%,-50%) scale(1); transform-origin:50% 50%; transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .55s; }
.board > img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.impact-flash{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.impact-flash path,.impact-flash circle{fill:#ffe066;stroke:#fff2a8;stroke-width:3;filter:drop-shadow(0 0 16px #ffd64d);opacity:0;transform-origin:500px 500px}.impact-flash.active path,.impact-flash.active circle{animation:impactZoneFlash .82s ease-out 1}@keyframes impactZoneFlash{0%{opacity:0}16%{opacity:.72}34%{opacity:.13}53%{opacity:.62}75%{opacity:.1}100%{opacity:0}}
.checkout-guide{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.checkout-guide path,.checkout-guide circle{fill:url(#checkoutHatch);stroke:#c9faff;stroke-width:7;stroke-dasharray:12 5;filter:drop-shadow(0 0 7px #bdf9ff) drop-shadow(0 0 18px #25d8f4) drop-shadow(0 0 30px #0ebbd8);transform-origin:500px 500px;animation:checkoutZonePulse 1.05s ease-in-out infinite}.checkout-guide[hidden]{display:none}@keyframes checkoutZonePulse{0%,100%{opacity:.48}50%{opacity:1}}
.crosshair { --x:50%; --y:50%; position:absolute; left:var(--x); top:var(--y); width:34px; height:34px; border:1px solid var(--lime); border-radius:50%; transform:translate(-50%,-50%) scale(.75); opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:0 0 14px #b8ef4366; }
.range-scene.aiming .crosshair { opacity:1; animation:pulse .75s infinite alternate; }
@keyframes pulse { to { transform:translate(-50%,-50%) scale(1.15); } }
.marker { --dart-angle:0deg; position:absolute; z-index:2; width:14%; aspect-ratio:1; transform-origin:50% 50%; transform:translate(-50%,-50%) rotate(var(--dart-angle)); pointer-events:none; animation:land .26s cubic-bezier(.2,1.5,.45,1); }
.marker img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; backface-visibility:hidden; filter:drop-shadow(3px 5px 3px #000b); }
@keyframes land { from{opacity:0;transform:translate(-50%,-50%) rotate(var(--dart-angle)) scale(1.65)} 70%{opacity:1;transform:translate(-50%,-50%) rotate(var(--dart-angle)) scale(.94)} }
.flying-dart { --fly-x:50%; --fly-y:50%; --fly-mid-x:50%; --fly-mid-y:42%; --fly-duration:.68s; position:absolute; z-index:6; left:50%; top:68%; width:150px; aspect-ratio:1; opacity:0; pointer-events:none; transform-origin:50% 50%; filter:drop-shadow(0 8px 5px #0009); }
.flying-dart img { display:none; }
.flying-dart::before{content:"";position:absolute;inset:0;background:url("assets/dart-flight-rear-sprite.png") 0 0/1800% 100% no-repeat}.flying-dart.flying::before{animation:dartRearFrames var(--fly-duration) steps(17) forwards}@keyframes dartRearFrames{to{background-position:100% 0}}
.flying-dart.flying { animation:dartFlyX var(--fly-duration) linear forwards,dartFlyY var(--fly-duration) linear forwards; }
@keyframes dartFlyX {
  from { left:50%; }
  to { left:var(--fly-x); }
}
@keyframes dartFlyY {
  0% { top:68%; opacity:1; transform:translate(-50%,-50%) scale(1.28); animation-timing-function:cubic-bezier(.12,.62,.28,1); }
  55% { top:var(--fly-mid-y); opacity:1; transform:translate(-50%,-50%) scale(.63); animation-timing-function:cubic-bezier(.55,0,.88,.45); }
  88% { opacity:1; }
  100% { top:var(--fly-y); opacity:0; transform:translate(-50%,-50%) scale(.19); }
}
@keyframes boardImpact {
  0%,100% { transform:translate(-50%,-50%); }
  25% { transform:translate(calc(-50% + 2px),calc(-50% - 1px)) rotate(.18deg); }
  50% { transform:translate(calc(-50% - 1px),calc(-50% + 1px)) rotate(-.14deg); }
  75% { transform:translate(calc(-50% + 1px),-50%); }
}
.board.impact-shake { animation:boardImpact .13s ease-out; }
.gesture-dart{--gesture-x:50%;--gesture-y:80%;position:absolute;z-index:10;left:var(--gesture-x);top:var(--gesture-y);width:clamp(110px,15%,190px);opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(90deg) scale(.82);transform-origin:50% 50%;filter:drop-shadow(0 12px 8px #000a);transition:opacity .1s,transform .1s}.gesture-dart img{display:block;width:100%;height:auto}.range-scene.gesture-arming .gesture-dart{opacity:1;transform:translate(-50%,-50%) rotate(90deg) scale(1)}.range-scene.gesture-mode{cursor:ns-resize;touch-action:none}.range-scene.gesture-mode .board{cursor:ns-resize}.range-scene.gesture-mode .crosshair{display:none}
.shot-feedback { position:absolute; z-index:9; left:18px; bottom:18px; width:max-content; max-width:calc(58% - 24px); padding:9px 16px; color:#fff4cf; border:1px solid rgba(255,225,139,.72); border-radius:4px; background:rgba(55,42,24,.7); box-shadow:0 12px 40px rgba(0,0,0,.28); font:italic 600 clamp(17px,2.6vw,30px)/1.1 Georgia,serif; text-align:center; opacity:0; pointer-events:none; transform:scale(.2); transform-origin:0 100%; text-shadow:0 3px 12px rgba(0,0,0,.75); }
.shot-feedback.visible { animation:shotFeedback 1.5s cubic-bezier(.16,.86,.22,1) forwards; }
@keyframes shotFeedback {
  0% { opacity:0; transform:scale(.16); }
  25% { opacity:1; transform:scale(1.14); }
  42%,72% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.05); }
}
.instruction { color:#aaa; text-align:center; font-size:11px; letter-spacing:.05em; }.instruction span { color:var(--lime); }
.side-panel { border-left:1px solid var(--line); padding-left:24px; min-height:390px; display:flex; flex-direction:column; gap:22px; }
.side-panel small { color:var(--muted); font-size:9px; letter-spacing:.16em; display:block; margin-bottom:8px; }
.round-block strong { font:700 32px Georgia,serif; white-space:nowrap; }.dart-icons { display:flex; gap:10px; color:var(--red); font-size:26px; }.dart-icons span.used { opacity:.15; }
.last-throws { flex:1; }.throw-list { display:flex; flex-direction:column; gap:7px; }.throw-list p { margin:0; display:flex; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid #2d3029; font-size:11px; }.throw-list b { color:var(--lime); }.throw-list .empty { color:#6f716a; font-style:italic; }
.rule { border:1px solid #3b3f34; padding:13px; background:#151713; }.rule strong { color:var(--lime); font-size:10px; letter-spacing:.14em; }.rule p { color:#999b92; font-size:10px; line-height:1.45; margin:6px 0 0; }
.mode-block{padding:9px 10px 10px;border:1px solid #ffffff20;background:#0b191db5}.mode-block label{display:block;margin-bottom:6px;color:#aebbb7;font-size:7px;letter-spacing:.15em}.mode-block select{width:100%;padding:7px 28px 7px 8px;border:1px solid #ffffff25;border-radius:2px;color:#f1ead8;background:#10272d;font:700 10px Arial,sans-serif;cursor:pointer}.mode-block p{margin:6px 0 0;color:#82918e;font-size:7px;line-height:1.35}.solo-mode #aiCard,.solo-mode .versus,.solo-mode #opponentSettings{display:none}.solo-mode .side-panel .scoreboard{display:block}.solo-mode #humanCard{width:100%}.mode-hidden{display:none!important}
.toast { position:fixed; top:20px; left:50%; transform:translate(-50%,-20px); opacity:0; padding:11px 20px; border:1px solid #fff3d052; border-radius:14px; color:#fff4dc; background:linear-gradient(135deg,#162426d9,#34251fc4); box-shadow:0 10px 30px #0007,inset 0 1px #ffffff18; font:italic 600 13px/1.2 Georgia,"Times New Roman",serif; letter-spacing:.025em; text-shadow:0 2px 8px #000b; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:10; transition:opacity .3s,transform .3s; pointer-events:none; }.toast.show { opacity:.92; transform:translate(-50%,0); }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:#080908dd; }.modal[hidden]{display:none}.modal-card { width:min(390px,90vw); text-align:center; padding:40px; background:#1c1e19; border:1px solid #4b4f42; box-shadow:0 30px 80px #000; }.modal-card small{color:var(--lime);letter-spacing:.2em}.modal-card h2{font:700 48px Georgia,serif;margin:15px}.modal-card p{color:#aaa}.modal-card button{border:0;background:var(--lime);padding:12px 25px;font-weight:900;cursor:pointer}
.leg-break { position:fixed; z-index:19; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 35%,#243430ee,#080b0bee 70%); backdrop-filter:blur(8px); }
.leg-break[hidden]{display:none}.leg-break-card{width:min(660px,94vw);padding:30px 34px 24px;text-align:center;border:1px solid #d4b27866;background:linear-gradient(145deg,#192827f5,#0d1618f8);box-shadow:0 30px 90px #000}.leg-break-card>small{color:#d4b278;font-size:8px;letter-spacing:.25em}.leg-break-card h2{margin:10px 0 4px;color:#fff3d2;font:italic 600 clamp(28px,5vw,48px)/1 Georgia,serif}.leg-match-score{margin:9px 0 20px;color:var(--lime);font:700 40px/1 Georgia,serif}.leg-match-score span{padding:0 12px;color:#71817e}.leg-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.leg-stats-grid article{padding:14px 16px;border:1px solid #ffffff18;background:#ffffff08}.leg-stats-grid h3{margin:0 0 9px;color:#e7d295;font-size:9px;letter-spacing:.17em}.leg-stats-grid dl,.leg-stats-grid dl div{margin:0}.leg-stats-grid dl div{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #ffffff0f}.leg-stats-grid dt{color:#8fa09c;font-size:8px}.leg-stats-grid dd{margin:0;color:#eef2ec;font:600 12px Georgia,serif}.leg-break-card>p{margin:17px 0 13px;color:#b4c1bd;font-size:10px}.break-progress{height:2px;overflow:hidden;background:#ffffff12}.break-progress span{display:block;width:100%;height:100%;background:var(--lime);transform-origin:0 50%;animation:breakCountdown 4.5s linear forwards}@keyframes breakCountdown{to{transform:scaleX(0)}}
@media(max-width:560px){.leg-break-card{padding:24px 18px}.leg-stats-grid{grid-template-columns:1fr}.leg-match-score{margin-bottom:12px}}
.break-dismiss{display:block;padding-top:12px;border-top:1px solid #ffffff14;color:#71817e;font-size:7px;letter-spacing:.14em}
@media (max-width:760px) { .game-shell{width:94vw}.scoreboard{grid-template-columns:1fr 34px 1fr}.player-card{padding:8px}.play-area{grid-template-columns:1fr}.range-scene{height:58vh;min-height:360px}.board{width:44%}.side-panel{min-height:0;border-left:0;border-top:1px solid var(--line);padding:16px 0 0;display:grid;grid-template-columns:1fr 1fr}.last-throws{grid-column:1/-1}.rule{display:none}.topbar{padding-bottom:10px}.score{font-size:38px} }

/* Salle sportive lumineuse et mise en page grand écran */
body { background:radial-gradient(circle at 50% -10%,#41636b 0,#1d343d 38%,#0e1b21 100%); }
.game-shell { width:min(1540px,97vw); padding:12px 0 22px; }
.topbar { padding-bottom:11px; border-color:#ffffff20; }
.scoreboard { max-width:900px; margin:10px auto 9px; grid-template-columns:1fr 70px 1fr; }
.player-card { padding:7px 20px 9px; border-color:#ffffff1d; }
.score { font-size:clamp(38px,4.6vw,62px); }
.play-area { grid-template-columns:minmax(520px,1fr) 260px; gap:22px; align-items:stretch; }
.range-scene { height:calc(100vh - 190px); min-height:520px; max-height:790px; perspective:900px; background:linear-gradient(#dce9e8 0 12%,#f1eee3 12% 55%,#d9b27d 55% 56%,#b9783f 56% 100%); border:1px solid #779097; border-radius:3px; box-shadow:inset 0 0 55px #24505d25,0 24px 55px #07111699; }
.range-scene::before { inset:56% -15% -34%; background:repeating-linear-gradient(90deg,transparent 0 9.7%,#8e562a55 9.9% 10.1%,transparent 10.3% 20%),repeating-linear-gradient(0deg,#cc9258 0 12px,#c2874f 12px 24px); transform:rotateX(59deg) scale(1.5); box-shadow:inset 0 28px 45px #5d341d4d; }
.range-scene::after { background:linear-gradient(90deg,#14364138,transparent 18% 82%,#14364138),linear-gradient(0deg,#27150744,transparent 35%); }
.back-wall { left:25%; right:25%; top:10%; bottom:43%; background:linear-gradient(#f9f6e9,#d9e3df); border:7px solid #5f7c82; border-top-color:#85a5aa; box-shadow:0 13px 24px #24434b3b,inset 0 0 28px #5e808329; }
.back-wall::before,.back-wall::after { background:#9db2b0; }
.hall-sign { color:#f6f1de; background:#27758a; padding:5px 13px; border-radius:2px; font-weight:800; }
.ceiling-light { top:3%; width:25%; height:2.2%; background:#fff; box-shadow:0 0 28px #fff,0 10px 35px #f7edc899; }
.light-one{left:13%}.light-two{right:13%}
.skylight { position:absolute; z-index:1; top:14%; width:16%; height:23%; display:flex; gap:3px; padding:5px; background:#6b8b91; box-shadow:0 8px 20px #14384138; }
.skylight-left{left:4%}.skylight-right{right:4%}
.skylight i { flex:1; background:linear-gradient(145deg,#e9fbff,#8dcfe0 52%,#dff7f8); box-shadow:inset 0 0 10px #fff9; }
.wall-stripe { position:absolute; z-index:1; left:0; right:0; top:43%; height:5%; background:linear-gradient(#2d8298 0 48%,#f1c84d 48% 68%,#f7f3e8 68%); box-shadow:0 2px 6px #2d59643a; }
.pennants { position:absolute; z-index:2; left:4%; right:4%; top:7%; display:flex; justify-content:space-around; border-top:1px solid #52747b; }
.pennants i { width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:22px solid #e85e4d; }
.pennants i:nth-child(even){border-top-color:#efc847}.pennants i:nth-child(3n){border-top-color:#2a8098}
.club-badge { position:absolute; z-index:2; right:7%; top:39%; width:64px; height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; background:#e6614e; border:4px solid #f5cf59; border-radius:50%; font:900 20px/1 Arial; box-shadow:0 5px 12px #24434b55; }
.club-badge small { font-size:6px; letter-spacing:.1em; margin-top:4px; }
.lane { background:#fff0c9cc; box-shadow:0 0 3px #fff8; }.lane-left{left:13%;transform:rotate(15deg)}.lane-right{right:13%;transform:rotate(-15deg)}
.court-mark { position:absolute; z-index:1; bottom:4%; width:23%; height:30%; border:3px solid #f5dfaaab; border-radius:50%; transform:perspective(300px) rotateX(65deg); }
.court-mark-left{left:-10%}.court-mark-right{right:-10%}
.oche { left:27%; right:27%; bottom:5%; height:8px; background:#f3d15d; border:1px solid #9b6f25; box-shadow:0 4px 9px #4b2b19aa; }
.board { width:min(31%,310px); top:30%; filter:drop-shadow(0 11px 15px #17313a88); }
.board { transition-duration:.8s; }
.strength-meter { position:absolute; z-index:8; left:28px; bottom:24px; width:min(280px,31%); padding:12px 14px 10px; color:#eef7f2; background:#10272dcc; border:1px solid #dff8ee55; border-radius:3px; box-shadow:0 8px 25px #09202755; opacity:.3; transform:translateY(7px); transition:opacity .2s,transform .2s; pointer-events:none; backdrop-filter:blur(5px); }
.range-scene.aiming .strength-meter { opacity:1; transform:translateY(0); }
.meter-head,.meter-foot { display:flex; align-items:center; justify-content:space-between; }.meter-head{font-size:9px;letter-spacing:.17em;margin-bottom:8px}.meter-head strong{color:#f4d45f;font-size:11px}.meter-foot{margin-top:6px;color:#9cb3b1;font-size:6px;letter-spacing:.12em}.meter-foot em{color:#c7f14d;font-style:normal;font-weight:900}.strength-meter.fatigued .meter-foot em{color:#f16450}.strength-meter.ideal .meter-head strong{color:#c7f14d;text-shadow:0 0 8px #c7f14d88}
.meter-track { position:relative; height:11px; overflow:hidden; background:#07191e; border:1px solid #ffffff2a; }.meter-track b{position:absolute;z-index:2;inset:0 auto 0 0;width:18%;background:linear-gradient(90deg,#47a9c2,#f1ce54 68%,#ef6958);transition:width .04s linear}.ideal-zone{position:absolute;z-index:3;left:65%;width:10%;top:-1px;bottom:-1px;border-left:2px solid #d8ff73;border-right:2px solid #d8ff73;background:#c7f14d38;box-shadow:0 0 10px #c7f14d66}
.instruction { color:#bbc6c3; margin:10px 0 0; }
.side-panel { min-height:520px; padding:24px 22px; gap:27px; border:1px solid #ffffff18; border-radius:3px; background:linear-gradient(160deg,#20333aeb,#13252bea); box-shadow:0 20px 45px #07111666; }
.rule { border-color:#5a7478; background:#10242a; }.rule p{color:#aebcb9}

@media (max-width:900px) {
  .game-shell{width:95vw}.scoreboard{grid-template-columns:1fr 38px 1fr}.player-card{padding:7px 10px}.play-area{grid-template-columns:1fr}.range-scene{height:62vh;min-height:400px}.board{width:min(38%,250px)}.side-panel{min-height:0;padding:16px;display:grid;grid-template-columns:1fr 1fr}.last-throws{grid-column:1/-1}.rule{display:none}.score{font-size:38px}.club-badge{display:none}
}
@media (max-width:600px) { .strength-meter{left:12px;bottom:12px;width:45%;padding:9px}.meter-foot span{display:none} }
@media (max-height:760px) and (min-width:901px) {
  .range-scene{height:calc(100vh - 170px);min-height:450px}.scoreboard{margin:6px auto}.side-panel{min-height:450px;padding-top:18px}.topbar{padding-bottom:7px}.game-shell{padding-top:8px}
}

/* Tableau de match latéral et cadrage de visée */
.play-area { margin-top:14px; }
.range-scene { height:calc(100vh - 105px); max-height:850px; }
.side-panel { gap:18px; padding:20px; }
.side-panel .scoreboard { width:100%; margin:0 0 3px; display:flex; flex-direction:column; gap:5px; }
.side-panel .player-card { width:100%; min-height:82px; padding:13px 10px 12px; background:#ffffff08; border:1px solid #ffffff12; border-left:3px solid transparent; }
.side-panel .player-card.active { border-color:#ffffff12; border-left-color:var(--lime); background:linear-gradient(90deg,#c7f14d18,transparent); }
.side-panel .score { font-size:45px; }
.side-panel .versus { height:16px; line-height:16px; font-size:11px; color:#829294; }
.board { transition-property:transform,filter,top; transition-duration:.8s; }
.strength-meter { left:50%; top:9px; bottom:auto; width:280px; max-width:40%; opacity:0; visibility:hidden; transform:translate(-50%,-7px); }
.range-scene.aiming .strength-meter { opacity:1; visibility:visible; transform:translate(-50%,0); }

@media (max-width:900px) {
  .range-scene{height:65vh}.side-panel .scoreboard{grid-column:1/-1;display:grid;grid-template-columns:1fr 34px 1fr}.side-panel .player-card{min-height:70px}.side-panel .versus{align-self:center}.strength-meter{max-width:62%}
}
@media (max-width:600px) { .strength-meter{left:50%;top:7px;bottom:auto;width:58%;max-width:none;transform:translate(-50%,-5px)}.range-scene.aiming .strength-meter{transform:translate(-50%,0)} }

/* Décor photo du pub et mouvements de caméra */
.range-scene { background:#1b100b; isolation:isolate; }
.range-scene::before { display:none; }
.range-scene::after { z-index:6; background:radial-gradient(circle at 50% 34%,transparent 0 25%,#12090518 55%,#07030272 100%),linear-gradient(0deg,#08030255,transparent 38%); }
.bar-backdrop { position:absolute; z-index:0; inset:-2%; background:url("assets/bar-interior.png") center center/cover no-repeat; transform:scale(1); transform-origin:50% 37%; transition:transform 1.25s cubic-bezier(.2,.72,.18,1),filter 1.25s; filter:saturate(.92) brightness(.82); }
.room-competition .bar-backdrop{background-image:url("assets/competition-arena.png");background-position:center center;filter:saturate(.9) brightness(.82)}
.room-competition .bar-crowd{display:none}.room-competition .bar-light-wash{opacity:.22;background:radial-gradient(ellipse at 50% 30%,#9ebbea38 0,transparent 32%),linear-gradient(90deg,#d6192d12,transparent 35% 65%,#315b9e16)}
.room-competition .range-scene.turn-human .bar-backdrop{filter:saturate(1) brightness(.9)}.room-competition .range-scene.turn-ai .bar-backdrop{filter:saturate(.82) brightness(.72)}
.room-competition .ambience-block{opacity:.48}.room-competition .ambience-block input{cursor:not-allowed}
.bar-light-wash { position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.3; background:radial-gradient(ellipse at 47% 15%,#ffd99555 0,transparent 35%),radial-gradient(ellipse at 78% 42%,#8ce1ca20 0,transparent 28%); mix-blend-mode:screen; animation:barLightBreath 9s ease-in-out infinite alternate; transition:opacity 1.2s,filter 1.2s; }
@keyframes barLightBreath{0%{opacity:.22;transform:scale(1)}52%{opacity:.34}100%{opacity:.27;transform:scale(1.025)}}
.range-scene.turn-human .bar-light-wash{filter:hue-rotate(-5deg) saturate(1.08)}.range-scene.turn-ai .bar-light-wash{opacity:.2;filter:hue-rotate(25deg) saturate(.8)}
.range-scene.turn-human .bar-backdrop{filter:saturate(.98) brightness(.86)}.range-scene.turn-ai .bar-backdrop{filter:saturate(.82) brightness(.76)}
.bar-crowd { position:absolute; z-index:2; inset:auto 0 0; height:31%; overflow:hidden; pointer-events:none; opacity:.3; filter:blur(3px); }
.bar-crowd i{position:absolute;bottom:-22%;width:12%;height:78%;border-radius:48% 48% 18% 18%;background:linear-gradient(#090c0d,#020303);box-shadow:0 0 22px #000;transform-origin:50% 100%;animation:crowdSway 6s ease-in-out infinite alternate}.bar-crowd i::before{content:"";position:absolute;left:50%;top:-23%;width:48%;aspect-ratio:1;border-radius:50%;background:#080b0c;transform:translateX(-50%)}.bar-crowd i:nth-child(1){left:-2%;height:68%;animation-delay:-1s}.bar-crowd i:nth-child(2){left:9%;height:53%;animation-delay:-4s}.bar-crowd i:nth-child(3){right:10%;height:58%;animation-delay:-2s}.bar-crowd i:nth-child(4){right:-1%;height:75%;animation-delay:-5s}.bar-crowd i:nth-child(5){right:22%;height:46%;opacity:.72;animation-delay:-3s}@keyframes crowdSway{to{transform:rotate(1.2deg) translateX(2px)}}
.wall-scoreboard{position:absolute;z-index:3;right:4%;top:12%;width:22%;min-width:128px;padding:8px 10px;color:#d8e0d9;border:4px solid #211b16;border-radius:3px;background:linear-gradient(#14201e,#0a1111);box-shadow:0 8px 18px #000b,inset 0 0 16px #000;transform:perspective(500px) rotateY(-4deg);pointer-events:none}.wall-scoreboard small{display:block;margin-bottom:6px;color:#9f8856;font-size:6px;letter-spacing:.17em;text-align:center}.wall-scoreboard div{display:flex;align-items:center;justify-content:center;gap:6px}.wall-scoreboard span{color:#9eaaa5;font-size:6px;letter-spacing:.08em}.wall-scoreboard b{display:block;margin-top:2px;color:#d8f38c;font:700 17px/1 Georgia,serif;text-align:center}.wall-scoreboard em{color:#53615e;font-style:normal}
.range-scene.player-focus .bar-backdrop { transform:scale(1.1) translateY(1.2%); filter:saturate(1.02) brightness(.9); }
.range-scene.focusing .bar-backdrop { filter:saturate(1.08) brightness(.96); }
.board { width:min(22%,230px); top:35%; transition-property:transform,filter,top,width; transition-duration:.8s, .8s, 1.2s, 1.2s; transition-timing-function:cubic-bezier(.2,.75,.2,1); }
.range-scene.player-focus .board { width:min(30%,305px); top:36%; }
.range-scene.focusing .board { filter:drop-shadow(0 0 28px #efbc6655) drop-shadow(0 14px 18px #000c); }

@media (max-width:900px) { .board{width:min(27%,210px)}.range-scene.player-focus .board{width:min(38%,260px)} }

/* La force est indiquée directement par le cercle de visée */
.crosshair { --force-color:#ff3d35; --ring-scale:1; --force-glow:12px; width:66px; height:66px; border:2px solid var(--force-color); transform:translate(-50%,-50%) scale(var(--ring-scale)); box-shadow:0 0 var(--force-glow) var(--force-color),inset 0 0 8px color-mix(in srgb,var(--force-color) 45%,transparent); transition:opacity .12s,border-color .05s,box-shadow .05s; will-change:transform,left,top; }
.release-point{--release-x:0px;--release-y:0px;position:absolute;left:50%;top:50%;width:7px;height:7px;border:1px solid #172127;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff,0 0 10px var(--force-color);transform:translate(calc(-50% + var(--release-x)),calc(-50% + var(--release-y)));will-change:transform}.release-point::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;background:var(--force-color);transform:translate(-50%,-50%)}
.range-scene.aiming .crosshair { animation:none; transform:translate(-50%,-50%) scale(var(--ring-scale)); }

/* Choix du niveau de l'adversaire */
.difficulty-block small { margin-bottom:7px; }
.difficulty-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.difficulty-buttons button { min-width:0; padding:5px 2px 6px; border:1px solid #ffffff20; border-radius:2px; color:#91a09f; background:#0c1d22; cursor:pointer; text-transform:uppercase; letter-spacing:.05em; font-size:7px; transition:.18s; }
.difficulty-buttons button img { display:block; width:36px; height:36px; margin:0 auto 5px; border-radius:50%; object-fit:cover; object-position:center 28%; filter:saturate(.75); }
.difficulty-buttons button span,.difficulty-buttons button small { display:block; }.difficulty-buttons button small{margin:2px 0 0;color:inherit;font-size:5px;letter-spacing:.08em}
.difficulty-buttons button:hover { color:#fff; border-color:#ffffff55; }
.difficulty-buttons button.active { color:#17200e; background:var(--lime); border-color:var(--lime); font-weight:900; box-shadow:0 0 12px #c7f14d33; }
.difficulty-buttons button.active img { filter:saturate(1); box-shadow:0 0 0 2px #17200e55; }
.sensitivity-block { padding:11px 12px 9px; border:1px solid #ffffff17; background:#0b191d88; }
.ambience-block { padding:11px 12px 9px; border:1px solid #ffffff17; background:#0b191d88; }
.setting-label,.setting-scale { display:flex; align-items:center; justify-content:space-between; }
.setting-label small { margin:0; }.setting-label strong { color:var(--lime); font-size:9px; letter-spacing:.08em; }
.sensitivity-block input,.ambience-block input { width:100%; height:16px; margin:8px 0 3px; accent-color:var(--lime); cursor:pointer; }
.setting-scale { color:#6f8381; font-size:6px; letter-spacing:.12em; }
.checkout-assist { padding:11px 12px; border:1px solid #ffffff17; background:#0b191db5; }
.checkout-assist header { display:flex; align-items:center; justify-content:space-between; }.checkout-assist header small{margin:0}
.assist-switch { position:relative; width:28px; height:15px; cursor:pointer; }.assist-switch input{position:absolute;opacity:0}.assist-switch span{position:absolute;inset:0;border-radius:10px;background:#3c4847;transition:.2s}.assist-switch span::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#b9c1bf;transition:.2s}.assist-switch input:checked+span{background:#73952f}.assist-switch input:checked+span::after{left:15px;background:#dfff83}
.checkout-advice { min-height:39px; margin-top:9px; }.checkout-advice strong{display:block;color:#f2ead8;font:600 14px/1.2 Georgia,serif}.checkout-advice p{margin:5px 0 0;color:#83928f;font-size:7px;line-height:1.35;letter-spacing:.04em}.checkout-route{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.checkout-route span{padding:3px 5px;border:1px solid #ffffff1b;border-radius:2px;color:#dbc98f;background:#ffffff08;font:700 9px/1 Arial,sans-serif}.checkout-route span.double{color:#17200e;border-color:var(--lime);background:var(--lime);box-shadow:0 0 8px #b8ef4338}.checkout-route i{color:#60716e;font-style:normal;font-size:8px}.checkout-advice.disabled{display:grid;place-items:center;color:#647471;font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.volley-summary { position:absolute; z-index:9; right:18px; bottom:18px; width:min(245px,40%); padding:12px 14px; color:#dce4df; border:1px solid #d4b27855; border-left:3px solid #d4b278; background:#101b1de8; box-shadow:0 12px 32px #0009; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .24s,transform .24s; }
.volley-summary.show{opacity:1;transform:translateY(0)}.volley-summary.bust{border-left-color:#ef6958}.volley-summary small{display:block;color:#8fa09c;font-size:7px;letter-spacing:.16em}.volley-summary strong{display:block;margin:5px 0;color:#f3e5bb;font:600 17px/1 Georgia,serif}.volley-summary p{margin:0;color:#9aaba7;font-size:8px;line-height:1.4}.volley-summary.bust strong{color:#ff8d80}

/* Caméra rapprochée des impacts */
.impact-camera { position:absolute; z-index:8; left:18px; top:18px; width:min(400px,36%); color:#f3eee2; background:#120b08e8; border:1px solid #d4b27866; border-radius:3px; box-shadow:0 14px 35px #0009,0 0 0 1px #000 inset; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:0 0; transition:opacity .25s,transform .25s,visibility .25s; pointer-events:none; backdrop-filter:blur(5px); }
.impact-camera { border:7px solid #181512; border-radius:8px; outline:1px solid #655848; background:#080a09; box-shadow:0 16px 34px #000c,inset 0 0 0 1px #4b4237,0 0 18px #d4b27818; }
.impact-camera::after{content:"";position:absolute;right:8px;bottom:5px;width:4px;height:4px;border-radius:50%;background:#b8ef43;box-shadow:0 0 5px #b8ef43}
.impact-camera.visible { opacity:1; visibility:visible; transform:none; }
.impact-camera header,.impact-camera footer { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:linear-gradient(90deg,#24150e,#100906); font-size:7px; letter-spacing:.15em; }
.impact-camera header b { color:#e2bd64; font-size:8px; }.impact-camera footer span{color:#968679}.impact-camera footer strong{color:#c7f14d;font-size:10px}
.impact-camera.owner-ai header span { color:#e2bd64; }.impact-camera.owner-human header span { color:#c7f14d; }
.impact-viewport { position:relative; width:100%; height:270px; overflow:hidden; perspective:1700px; perspective-origin:25% 52%; background:linear-gradient(145deg,#e7dfcf 0 42%,#2a1a10 43% 100%); }
.impact-board { position:absolute; width:1527px; height:1527px; transform-style:preserve-3d; transition:left .45s cubic-bezier(.2,.75,.2,1),top .45s cubic-bezier(.2,.75,.2,1),transform .45s cubic-bezier(.2,.75,.2,1),transform-origin .45s; }
.impact-board > img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; backface-visibility:hidden; }
.impact-dart { position:absolute; z-index:3; width:36%; aspect-ratio:716/210; transform-origin:2.5% 50%; transform:translate(-2.5%,-50%) rotateZ(10deg) rotateY(var(--camera-angle,0deg)); filter:drop-shadow(7px 9px 4px #0009); animation:impactCamLand .32s cubic-bezier(.2,1.4,.4,1); backface-visibility:hidden; }
.impact-dart img { display:block; width:100%; height:100%; object-fit:contain; }
@keyframes impactCamLand { from{opacity:0;transform:translate(-2.5%,-50%) rotateZ(10deg) rotateY(var(--camera-angle,0deg)) scale(1.8)} }
@media (max-width:900px) { .impact-camera{width:min(300px,42%);left:10px;top:10px}.impact-viewport{height:185px} }
@media (max-width:600px) { .impact-camera{width:42%}.impact-camera header span{font-size:6px}.impact-viewport{height:120px}.impact-camera footer span{display:none} }

/* Panneau latéral vertical, aéré et aligné sur la hauteur de la salle. */
@media (min-width:901px) {
  .play-area { align-items:start; }
  .side-panel { display:flex; flex-direction:column; gap:0; height:calc(100vh - 105px); min-height:520px; max-height:850px; padding:15px 17px; overflow:hidden; }
  .side-panel > * { flex:none; min-width:0; }
  .side-panel > * + * { margin-top:10px; padding-top:10px; border-top:1px solid #ffffff20; }
  .side-panel .scoreboard { display:flex; flex-direction:column; width:100%; margin:0; gap:4px; }
  .mode-block{padding:6px 8px}.mode-block p{margin-top:4px}.mode-block select{padding-block:5px}
  .side-panel .rule{display:none}
  .side-panel .player-card { width:100%; min-height:70px; padding:8px 10px; }
  .side-panel .versus { height:12px; line-height:12px; font-size:9px; }
  .side-panel .score { font-size:39px; }
  .side-panel .player-label { font-size:9px; }.side-panel .turn-score{font-size:7px}
  .side-panel .ai-identity>img{width:29px;height:29px}.side-panel .ai-identity b{font-size:8px}.side-panel .ai-identity small{display:block;font-size:5px}
  .side-panel .ai-reaction { min-height:9px; margin-top:1px; font-size:7px; }
  .difficulty-block small{margin-bottom:4px}.difficulty-buttons button{padding-block:3px 4px}.difficulty-buttons button img{width:30px;height:30px;margin-bottom:3px}
  .sensitivity-block,.ambience-block { width:100%; padding:5px 7px 4px; border:0; background:transparent; }.sensitivity-block input,.ambience-block input{height:13px;margin:4px 0 1px}
  .checkout-assist { padding:6px 8px; border-left:0; border-right:0; border-bottom:0; background:#0b191d80; }.checkout-advice{min-height:28px;margin-top:5px}.checkout-advice p{margin-top:3px}.checkout-advice strong{font-size:11px}
  .round-block,.darts-block { width:100%; padding:0; border:0; background:transparent; }.round-block small,.darts-block small{margin-bottom:2px;font-size:6px}.round-block strong{font-size:22px}.dart-icons{gap:6px;font-size:19px}
  .last-throws { flex:1; min-height:45px; overflow:hidden; }.last-throws>small{margin-bottom:3px}.throw-list{gap:3px}.throw-list p{padding-bottom:3px;font-size:8px}.throw-list p:nth-child(n+4){display:none}
  .rule { padding:6px 8px; }.rule p{margin-top:2px;font-size:7px;line-height:1.25}
  .difficulty-block,.ambience-block,.checkout-assist { padding-bottom:10px; border-bottom:1px solid #ffffff20; }
  .difficulty-block + .sensitivity-block,.ambience-block + .checkout-assist,.checkout-assist + .round-block { margin-top:10px; padding-top:0; border-top:0; }
}