[hidden]{display:none!important}
:root{--green:#168454;--green2:#35d78b;--dark:#0d1917;--ink:#182824;--muted:#66766f;--line:#e0eae4;--pale:#f2f7f4;--surface:#fff;--soft:#e9f5ec}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f8f6;color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}.app-shell{max-width:1580px;margin:auto}.topbar{min-height:78px;padding:12px clamp(16px,3vw,38px);background:#10221c;display:flex;align-items:center;justify-content:space-between;gap:20px;color:white}.brand{display:flex;align-items:center;gap:13px;min-width:0}.brand img{height:48px;width:48px;object-fit:cover;border-radius:11px}.brand strong{font-size:15px;letter-spacing:.085em}.brand small{display:block;font-size:11px;color:#a9cbc0;letter-spacing:.02em}.top-nav{display:flex;align-items:center;gap:8px}.top-nav a,.nav-current{font-weight:650;padding:10px 16px;border-radius:10px;color:#bed8cb}.top-nav a:hover{background:#ffffff13;color:white}.nav-current{background:#23754f;color:white}.hero{background:#10351f linear-gradient(90deg,#091d15 0%,rgba(9,27,20,.95) 33%,rgba(9,27,20,.52) 73%),linear-gradient(130deg,#06342c,#0a5443,#031e1d);min-height:182px;color:white;display:flex;align-items:center;padding:30px clamp(20px,4vw,55px)}.hero-content{max-width:760px}.eyebrow{color:#2c9f70;font-size:11px;font-weight:800;letter-spacing:.18em;margin:0 0 7px}.hero .eyebrow{color:#83e7ae}.hero h1{font-size:clamp(28px,3.4vw,41px);line-height:1.15;letter-spacing:-.035em;margin:0 0 8px}.hero p{max-width:660px;margin-bottom:12px;color:#d7e8dc}.small-pill{display:inline-block;background:#ffffff21;border:1px solid #ffffff3e;padding:4px 12px;border-radius:100px;color:#e7f6eb;font-size:11px}main{padding:24px clamp(14px,2.6vw,38px) 32px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:5px 0 16px}.section-title h2{font-size:24px;letter-spacing:-.035em;margin:0}.muted{color:var(--muted)}.compact{font-size:13px;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(292px,360px) minmax(0,1fr);align-items:start;gap:18px}.panel,.stage,.report-paper,.history{background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:0 3px 17px #0b251309}.setup{padding:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.panel-heading h3,.stage h3{font-size:16px;margin:0}.step{font-size:10px;font-weight:800;color:#237a4e;background:#e8f8ed;padding:5px 9px;border-radius:100px}.divide{border-top:1px solid var(--line);padding-top:17px;margin-top:18px}.exercise-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.exercise{border:1px solid #e4ebe5;border-radius:11px;background:#f8faf8;padding:9px 8px;text-align:left;display:flex;gap:8px;align-items:center;min-height:52px;font-size:11.5px;font-weight:700;line-height:1.3}.exercise:hover{border-color:#43b87e}.exercise.active{background:#e7f6ec;border-color:#43b87e;color:#14643e;box-shadow:0 0 0 1px #43b87e inset}.exercise small{display:block;font-size:10px;font-weight:500;color:#617f6c}.mode-icon{width:27px;height:27px;flex:0 0 27px;border-radius:7px;background:#e5ece8;color:#28774e;display:grid;place-items:center;font-size:14px}.active .mode-icon{background:#d1eedc}.field-label{display:block;font-size:12px;font-weight:700;color:#3b4e43;margin:10px 0 5px}.setup input[type=text],.setup input[type=number],.setup input:not([type]){background:#fbfdfb;border:1px solid #cfdbd3;color:#203329;border-radius:9px;padding:10px 11px;width:100%;min-height:42px;outline-offset:2px;font-size:14px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;margin:12px 0;cursor:pointer}.toggle input{accent-color:#148353;width:18px;height:18px}.helper{color:#607267;font-size:11px;line-height:1.5;background:#f3f8f5;border-radius:9px;padding:10px;margin:12px 0 14px}.controls{display:flex;flex-direction:column;gap:10px}.action-buttons{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}.camera-wide{width:100%}.btn{border-radius:9px;min-height:42px;border:1px solid transparent;padding:9px 12px;font-size:12px;font-weight:800;white-space:normal}.btn-round{width:132px;height:132px;border-radius:999px;padding:14px 10px;font-size:15px;line-height:1.15;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 24px rgba(12,43,26,.12)}.btn-main{background:#177b4e;color:white}.btn-main:hover:enabled{background:#116641}.btn-soft{background:#e9f6ed;color:#236941;border-color:#c7e6d2}.btn-soft:hover{background:#d9efdf}.btn-stop{background:#fff4e9;color:#9a4a18;border-color:#f7d6b5}.btn-quiet{color:#647b6c;background:white;border:1px solid #d6e4d9}.stage{padding:15px;min-width:0}.camera-header{display:flex;justify-content:space-between;align-items:center;margin:0 1px 11px;gap:10px}.camera-header p{font-size:12px;color:#62746b;margin:2px 0 0;min-height:18px}.status-tag{display:flex;align-items:center;gap:7px;background:#f4f7f4;border:1px solid #e3eae4;border-radius:30px;font-size:11px;font-weight:750;color:#7f8d85;padding:5px 9px;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:#9cad9f}.status-tag.live{color:#167b4c}.status-tag.live .status-dot{background:#26bc76;box-shadow:0 0 0 3px #d7f6e2}.camera-frame{width:100%;position:relative;background:#0b1c15;border-radius:13px;overflow:hidden;aspect-ratio:16/9;isolation:isolate}.camera-frame video{display:block;width:100%;height:100%;object-fit:fill}.camera-frame video.mirrored{transform:scaleX(-1)}.camera-frame canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.camera-placeholder{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,#274938,#0d2419 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:white;padding:22px}.camera-placeholder strong{font-size:20px;letter-spacing:-.025em}.camera-placeholder>span:not(.placeholder-icon){font-size:12px;color:#bfdbcc}.camera-placeholder .placeholder-help{opacity:.76}.placeholder-icon{font-size:52px;line-height:1;color:#58d48f}.camera-footnote{position:absolute;bottom:8px;left:10px;background:#07180fb0;color:#d8e5dc;font-size:10px;border-radius:6px;padding:4px 7px;pointer-events:none}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:11px}.stat{border:1px solid #e4ede6;border-radius:10px;padding:11px;background:#fafcfb;min-width:0}.stat span{display:block;font-size:10.5px;font-weight:650;color:#637467;line-height:1.3}.stat strong{display:block;font-size:clamp(17px,2vw,27px);letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat:first-child strong{color:#147349;font-variant-numeric:tabular-nums}.assist{background:#edf8f1;border-left:3px solid #36b378;color:#466e56;margin-top:10px;padding:10px 12px;font-size:12px;border-radius:7px}.metric-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;font-size:11px;font-weight:700;color:#567264}.metric-strip span{background:#f2f8f3;border:1px solid #e2ece4;padding:5px 9px;border-radius:100px}.report-area{margin-top:28px}.actions{display:flex;gap:7px;flex-wrap:wrap}.report-paper{padding:22px}.report-heading{display:flex;justify-content:space-between;gap:10px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:18px}.report-heading>div>strong{font-size:20px}.report-heading img{width:58px;height:58px;object-fit:cover;border-radius:10px}.report-heading p{font-size:12px;margin:3px 0}.report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.report-kpis>div{padding:13px;border-radius:9px;background:#f2f8f4;border:1px solid #e4ede7}.report-kpis span{display:block;color:#697f70;font-size:11px}.report-kpis strong{font-size:22px;font-variant-numeric:tabular-nums}.report-lower{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:22px}.report-lower h3{font-size:14px;margin:0 0 5px}.micro{font-size:11px;margin:0 0 10px}.bars{height:200px;display:flex;align-items:end;gap:6px;background:repeating-linear-gradient(0deg,#fff,#fff 39px,#eaf0eb 40px);border-bottom:1px solid #dce9e0;padding:8px 8px 0;overflow-x:auto}.barwrap{display:flex;flex-direction:column;justify-content:end;align-items:center;min-width:27px;height:100%;gap:3px;font-size:10px;color:#698071}.bar{width:20px;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(#40cc86,#168856)}.empty{color:#849589;font-size:12px;margin:auto}.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.zone-cell{background:#eff7f1;border:1px solid #d9e9dc;padding:13px 4px;text-align:center;border-radius:7px}.zone-cell strong{display:block;font-size:17px}.zone-cell small{font-size:10px;color:#63796b}.side-row{display:flex;justify-content:space-between;border-bottom:1px solid #edf1ed;padding:10px 0}.history{margin-top:24px;padding:21px}.history .section-title{align-items:center}.history p{font-size:12px}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;color:#68796c;background:#f2f7f3;padding:12px}td{border-bottom:1px solid #e8eee9;padding:11px 12px}td button{border:0;background:#eaf5ed;color:#1a7144;padding:7px 9px;border-radius:7px;font-weight:700}.disclaimer{font-size:11px;color:#7a887e;padding:18px 5px 0;max-width:950px}.camera-frame:focus-within{outline:2px solid #47be87}@media(max-width:1100px){.layout{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}.exercise-list{grid-template-columns:1fr 1fr}.stat strong{font-size:18px}.setup{padding:14px}}@media(max-width:900px){.layout{grid-template-columns:1fr}.exercise-list{grid-template-columns:repeat(3,1fr)}.report-lower{grid-template-columns:1fr 1fr}}@media(max-width:640px){.topbar{flex-wrap:wrap}.top-nav{width:100%;justify-content:space-between}.top-nav a,.nav-current{padding:8px 12px}.hero{min-height:170px}.exercise-list{grid-template-columns:repeat(2,1fr)}.section-title{align-items:start;flex-direction:column}.camera-header{align-items:start}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.report-lower{grid-template-columns:1fr}.history{padding:14px}.action-buttons{gap:12px}.btn-round{width:108px;height:108px;font-size:14px}}@media print{body{background:white}.topbar,.hero,.layout,.history,.disclaimer,.report-area>.section-title{display:none!important}main{padding:0}.report-area,.report-paper{display:block!important;margin:0;border:0;box-shadow:none}.report-paper{padding:12px}.bars{print-color-adjust:exact}.bar,.zone-cell,.report-kpis>div{print-color-adjust:exact}}


/* V23: grafismo de treino realmente aplicado: painel escuro, câmara em destaque,
   comandos grandes e redondos, navegação lateral em ecrãs largos. */
:root{--ink:#eaf8f0;--muted:#a7c4b6;--line:#1b5a47;--surface:#093227;--dark:#092a22;--bg:#051b15}
html{background:#041910}
body{background:radial-gradient(circle at 57% -10%,#13533c 0%,#06271e 42%,#041910 95%);color:#eaf8f0;min-height:100vh}
.app-shell{max-width:none;min-height:100vh}
.topbar{background:#031b15;box-shadow:2px 0 18px #0003;border-bottom:1px solid #165139}
.brand{color:white}.brand img{width:60px;height:60px;object-fit:cover;border-radius:14px;border:1px solid #2c7a55}.brand small{color:#b8d9c8}
.top-nav a,.nav-current{color:#d0e4da}.top-nav a:hover,.top-nav a:focus-visible{background:#123e2e;color:#fff}.nav-current{background:#08784b;color:#fff;border:1px solid #13a061}
.hero{background:linear-gradient(90deg,rgba(2,20,14,.94) 0%,rgba(3,26,17,.69) 43%,rgba(4,35,23,.1) 100%),linear-gradient(130deg,#06342c 0%,#0a5443 48%,#031e1d 100%);min-height:170px;border-bottom:1px solid #1b6246;padding:20px clamp(16px,3vw,40px)}
.hero .hero-content{max-width:610px}.hero h1{color:white;font-size:clamp(26px,2.6vw,36px);text-shadow:0 2px 12px #0008}.hero p{color:#dfefe5}.hero .eyebrow{color:#65e5a5}
main{padding:20px clamp(14px,2.3vw,35px) 45px;max-width:1850px;margin:0 auto}
.section-title h2{color:#edf9f2;font-size:24px}.section-title .eyebrow{color:#64d69a}.section-title .muted{color:#b0cabc}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:16px;align-items:start}
.setup{grid-column:2;grid-row:1;padding:18px}
.stage{grid-column:1;grid-row:1;padding:14px}
.panel,.stage,.report-paper,.history{background:linear-gradient(145deg,#0c352b,#08281f);border:1px solid #235b49;border-radius:16px;box-shadow:0 8px 25px #0002}
.panel-heading h3,.stage h3{color:#f7fffa}.step{background:#154e35;color:#84f3b4}
.exercise-list{grid-template-columns:1fr 1fr;gap:7px}.exercise{background:#0c4031;color:#dbefe5;border:1px solid #245a43;border-radius:10px;min-height:51px;padding:8px;font-size:12px}.exercise:hover:enabled{background:#185940;border-color:#59c08a}.exercise.active{background:#0d7348;border:1px solid #5de0a0;color:#fff;box-shadow:0 0 0 1px #39b67f inset}.exercise small,.active .exercise small{color:#c7e6d5}.mode-icon{background:#135e40;color:#d8f9e4}.active .mode-icon{background:#29a363;color:#fff}
.divide{border-color:#265b48}.field-label{color:#c5e1d2}.setup input[type=text],.setup input[type=number],.setup input:not([type]){background:#09271e;border-color:#376c53;color:white;border-radius:10px}.setup input::placeholder{color:#9ebfad}.toggle{color:#e9f6ed}.toggle input{accent-color:#18b970}.helper{background:#103e2b;color:#c1dece;border:1px solid #215d43}
.btn{border-radius:10px;font-size:13px;min-height:44px}.camera-wide{background:#124c36!important;color:#e7fff0!important;border:1px solid #43825c!important;font-size:14px!important}.camera-wide:hover{background:#1b684a!important}
.action-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.btn-round{width:140px;height:140px;border-radius:100%;font-size:15px;line-height:1.3;letter-spacing:.015em;box-shadow:inset 0 0 0 3px #ffffff24,0 8px 23px #0005;white-space:normal}.btn-main.btn-round{background:linear-gradient(135deg,#00d56e,#007e42);color:#fff;border:5px solid #69f6af}.btn-main.btn-round:hover:enabled{background:#00aa5b;color:white}.btn-stop.btn-round{background:linear-gradient(135deg,#ff554d,#c9000b);color:#fff;border:5px solid #ff7676}.btn-stop.btn-round:hover:enabled{background:#e51f28;color:white}.btn-round:disabled{opacity:.47;box-shadow:none;cursor:not-allowed}
.camera-header p{color:#b6d4c3}.camera-header h3{font-size:17px}.status-tag{background:#143a2f;color:#bed6c9;border-color:#225743}.status-tag.live{color:#86ecae}.camera-frame{border-radius:12px;background:#021610;border:1px solid #1b6b43;box-shadow:inset 0 0 0 2px #133d2d}.camera-placeholder{background:radial-gradient(circle at 45% 35%,#166344,#051f16 77%)}
.camera-footnote{background:#031a13cf;color:#dbf0e2}
.stats-grid{gap:10px}.stats-grid .stat{background:#092d23;border:1px solid #20583f;border-radius:12px;padding:14px}.stats-grid .stat span{color:#b2cebf;font-size:12px}.stats-grid .stat strong,.stats-grid .stat:first-child strong{color:white;font-size:clamp(22px,3vw,34px)}.stats-grid .stat:first-child strong{color:#62f3a5}
.assist{background:#0c4731;color:#c7ebd5;border-left:4px solid #3dd58d}.metric-strip{color:#c3e1d0}.metric-strip span{background:#103b2b;border:1px solid #275d45}
.history,.report-paper{background:#fff;color:#233b2e;border:1px solid #d9e6dd}.history .section-title h2,.report-area .section-title h2{color:#ecf9f1}.history .section-title h2{color:#203d2c}.history .muted,.report-paper .muted{color:#63796a}.history .eyebrow{color:#258755}.report-kpis>div{background:#f3f9f4}.history th{color:#415948}.history .btn-quiet{color:#216c4a}
.disclaimer{color:#a6c8b2}
@media(min-width:1300px){
 .app-shell{padding-left:210px}.topbar{position:fixed;z-index:20;inset:0 auto 0 0;width:210px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:36px;padding:18px 11px;overflow-y:auto}.brand{flex-direction:column;align-items:flex-start;gap:12px;padding:5px}.brand img{width:66px;height:66px}.brand strong{font-size:17px}.top-nav{display:flex;flex-direction:column;align-items:stretch;gap:7px}.top-nav a,.nav-current{display:block;padding:12px 14px;border-radius:10px}.hero{margin:0}.setup{min-width:0}
}
@media(max-width:1299px){.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px}.brand{flex-direction:row}.top-nav{display:flex;gap:8px}.layout{grid-template-columns:minmax(0,1fr) minmax(275px,325px)}}
@media(max-width:950px){.layout{grid-template-columns:1fr}.stage{grid-column:1;grid-row:1}.setup{grid-column:1;grid-row:2}.exercise-list{grid-template-columns:repeat(3,1fr)}.stats-grid .stat strong{font-size:24px}}
@media(max-width:640px){.topbar{gap:6px}.brand img{width:42px;height:42px}.brand strong{font-size:13px}.brand small{font-size:10px}.top-nav{justify-content:flex-end;flex-wrap:wrap}.top-nav a,.top-nav .nav-current{font-size:12px;padding:6px 9px}.hero{min-height:134px;padding:18px}.hero h1{font-size:25px}.hero p{font-size:12px}.exercise-list{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.btn-round{width:124px;height:124px;font-size:14px}.report-paper{padding:14px}}
@media print{body{background:white;color:#222}.app-shell{padding:0}.report-paper{box-shadow:none}.report-area .section-title h2{color:#222}}

/* V24: Branding original Andebol Treinos, sem imagens de clubes. */
.hero {background:linear-gradient(118deg,#062820 5%,#0e5943 55%,#062d27 100%)!important;position:relative;isolation:isolate;overflow:hidden}
.hero:after{content:"";pointer-events:none;position:absolute;right:-7%;top:-80%;width:53%;height:260%;border:1px solid rgba(121,245,169,.11);border-radius:50%;box-shadow:0 0 0 55px rgba(121,245,169,.028),0 0 0 110px rgba(121,245,169,.023);z-index:-1}
.hero .hero-content{position:relative;z-index:1}
.install-guide{margin-top:24px;padding:22px;border-radius:16px;background:linear-gradient(120deg,#0b3528,#082a23);border:1px solid #28684a;color:#effff5}
.install-guide h2{margin:0 0 4px;font-size:20px}.install-guide p{color:#c2ddce;font-size:13px}
.install-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}
.install-steps p{margin:0;border:1px solid #2b7254;padding:12px;border-radius:10px;background:#083727;line-height:1.6}
.install-guide .install-note{font-size:11px;color:#a6c9b5}
@media(max-width:760px){.install-steps{grid-template-columns:1fr}.hero:after{width:80%;right:-50%}}
@media print{.install-guide{display:none!important}}

.camera-frame canvas{touch-action:none}.camera-frame:has(canvas){cursor:default}

.language-control{display:flex;align-items:center;margin-left:6px}.language-control select{background:#173c30;color:#fff;border:1px solid #3b6b59;border-radius:9px;padding:8px 10px;font-weight:800;min-width:64px}.language-control select:focus{outline:2px solid #62d59a;outline-offset:2px}

.video-report{margin-top:20px;padding-top:18px;border-top:1px solid #dce9e0}.video-report video{display:block;width:min(100%,760px);max-height:460px;background:#06140f;border-radius:12px;margin:10px 0}.video-report .actions{margin-top:8px}

/* Câmara ampliada + modo ecrã inteiro + controlos sobre a imagem */
.stage{min-width:0}.camera-frame{aspect-ratio:16/9;min-height:clamp(420px,58vh,760px)}
.camera-frame video,.camera-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.fullscreen-button{position:absolute;z-index:8;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff55;background:#061b14cc;color:#fff;font-size:24px;display:grid;place-items:center;padding:0}
.fullscreen-button:hover{background:#0b5038}.stage-overlay-controls{position:absolute;z-index:7;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay-action{pointer-events:auto;width:148px;height:148px;border-radius:50%;border:5px solid #ffffff66;color:#fff;font-weight:900;font-size:16px;box-shadow:0 12px 28px #0008}.overlay-start{background:linear-gradient(135deg,#00d56e,#007e42)}.overlay-stop{background:linear-gradient(135deg,#ff554d,#c9000b)}
.camera-frame.training-running .stage-overlay-controls{opacity:0;pointer-events:none;transition:opacity .15s}.camera-frame.training-running.controls-visible .stage-overlay-controls{opacity:1;pointer-events:auto}.camera-frame.training-running .overlay-start{display:none}.camera-frame.training-running .overlay-stop{display:flex;align-items:center;justify-content:center}
.camera-frame:not(.training-running) .overlay-stop{display:none!important}
.camera-frame:fullscreen,.camera-frame:-webkit-full-screen{width:100vw;height:100vh;min-height:100vh;aspect-ratio:auto;border-radius:0;background:#021610}.camera-frame:fullscreen video,.camera-frame:fullscreen canvas,.camera-frame:-webkit-full-screen video,.camera-frame:-webkit-full-screen canvas{object-fit:contain}.camera-frame:fullscreen .camera-footnote,.camera-frame:-webkit-full-screen .camera-footnote{bottom:18px;left:18px}.camera-frame:fullscreen .fullscreen-button,.camera-frame:-webkit-full-screen .fullscreen-button{top:18px;right:18px}
@media(max-width:950px){.camera-frame{min-height:clamp(360px,56vh,660px)}}
@media(max-width:640px){.camera-frame{min-height:52vh}.overlay-action{width:118px;height:118px;font-size:14px}.fullscreen-button{width:44px;height:44px}}


/* Tablet-first on-screen reaction mode: no camera dependency. */
body.reaction-mode .camera-header h3{font-size:0}
body.reaction-mode .camera-header h3::after{content:'Reação no ecrã';font-size:17px}
body.reaction-mode #cameraButton,body.reaction-mode #cameraTag,body.reaction-mode .camera-footnote,
body.reaction-mode #amplitude,body.reaction-mode #showSkeleton,body.reaction-mode #mirror{display:none!important}
body.reaction-mode .camera-frame{min-height:min(72vh,820px);background:radial-gradient(circle at 50% 45%,#123c2d,#041c14 72%);touch-action:none}
body.reaction-mode .camera-frame video{display:none!important}
body.reaction-mode .camera-frame canvas{pointer-events:auto!important;cursor:pointer!important;touch-action:none}
body.reaction-mode .camera-placeholder{display:none!important}
body.reaction-mode .stage{padding:12px}
body.reaction-mode .layout{grid-template-columns:minmax(250px,320px) minmax(0,1fr)}
body.reaction-mode .metric-strip{display:none}
body.reaction-mode .camera-header p::before{content:'Tablet/PC · sem câmara · toca na bola assim que aparecer';}
body.reaction-mode .camera-header p{font-size:0}
body.reaction-mode .camera-header p::before{font-size:12px}
body.reaction-mode .overlay-action{width:170px;height:170px;font-size:18px}
body.reaction-mode .camera-frame:fullscreen,body.reaction-mode .camera-frame:-webkit-full-screen{background:radial-gradient(circle at 50% 45%,#123c2d,#041c14 72%)}
body.reaction-mode .camera-frame:fullscreen canvas,body.reaction-mode .camera-frame:-webkit-full-screen canvas{object-fit:fill}
@media(max-width:1024px){body.reaction-mode .layout{grid-template-columns:1fr}body.reaction-mode .setup{order:2}body.reaction-mode .stage{order:1}body.reaction-mode .camera-frame{min-height:68vh}.reaction-mode .overlay-action{width:156px;height:156px}}
@media(orientation:landscape) and (max-width:1400px){body.reaction-mode .camera-frame{min-height:74vh}body.reaction-mode main{padding-top:10px}}


/* Reaction tablet v2: full training surface, no stop overlay. */
body.reaction-mode .layout{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
body.reaction-mode .stage{order:1!important;width:100%!important;max-width:none!important;padding:8px!important}
body.reaction-mode .setup{order:2!important;width:100%!important;max-width:none!important}
body.reaction-mode .camera-frame{width:100%!important;min-height:78vh!important;height:78vh!important;aspect-ratio:auto!important;border-radius:14px!important}
body.reaction-mode #stopButton,body.reaction-mode #overlayStopButton{display:none!important}
body.reaction-mode .camera-frame.training-running .stage-overlay-controls{display:none!important}
body.reaction-mode .camera-frame.training-running #fullscreenButton{opacity:.22}
body.reaction-mode .camera-frame.training-running:hover #fullscreenButton{opacity:1}
@media (orientation:landscape){body.reaction-mode .camera-frame{min-height:84vh!important;height:84vh!important}}
@media (max-width:700px){body.reaction-mode main{padding-left:4px!important;padding-right:4px!important}body.reaction-mode .stage{padding:4px!important}body.reaction-mode .camera-frame{min-height:76vh!important;height:76vh!important;border-radius:8px!important}}

/* Reaction V4: keep exactly the same application layout/size as every other exercise. */
body.reaction-mode .layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important;
  gap:16px!important;
  align-items:start!important;
}
body.reaction-mode .stage{
  grid-column:1!important;
  grid-row:1!important;
  order:unset!important;
  width:auto!important;
  max-width:none!important;
  padding:14px!important;
}
body.reaction-mode .setup{
  grid-column:2!important;
  grid-row:1!important;
  order:unset!important;
  width:auto!important;
  max-width:none!important;
}
body.reaction-mode .camera-frame{
  width:100%!important;
  height:auto!important;
  min-height:clamp(420px,58vh,760px)!important;
  aspect-ratio:16/9!important;
  border-radius:12px!important;
}
@media(max-width:1299px){
  body.reaction-mode .layout{grid-template-columns:minmax(0,1fr) minmax(275px,325px)!important}
}
@media(max-width:950px){
  body.reaction-mode .layout{grid-template-columns:1fr!important}
  body.reaction-mode .stage{grid-column:1!important;grid-row:1!important;padding:14px!important}
  body.reaction-mode .setup{grid-column:1!important;grid-row:2!important}
  body.reaction-mode .camera-frame{height:auto!important;min-height:clamp(360px,56vh,660px)!important;aspect-ratio:16/9!important}
}
@media(max-width:640px){
  body.reaction-mode main{padding-left:14px!important;padding-right:14px!important}
  body.reaction-mode .stage{padding:14px!important}
  body.reaction-mode .camera-frame{height:auto!important;min-height:52vh!important;aspect-ratio:16/9!important;border-radius:12px!important}
}

.camera-select-row{display:grid;grid-template-columns:96px minmax(150px,1fr);gap:8px 10px;align-items:center;margin:10px 0 12px}.camera-facing{width:100%;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.15);padding:0 10px;background:#10241c;color:#fff}.camera-facing:focus{outline:2px solid #1ea867;outline-offset:2px}.camera-device-wrap{display:flex;align-items:center;gap:6px;min-width:0}.camera-device{min-width:0;flex:1}.camera-refresh{width:38px;height:38px;min-width:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#17352a;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0}.camera-refresh:hover{background:#1f4939}.camera-current{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media(max-width:700px){.camera-select-row{grid-template-columns:1fr}.camera-current{grid-column:1}.camera-facing{max-width:none}}