.attention-shell{width:min(100%,1080px);margin:auto;padding:42px 28px 84px}.attention-shell>.clinic-kicker{margin:0 0 10px}.attention-shell h1{max-width:760px;margin:0;color:var(--navy);font-size:clamp(38px,6vw,60px);line-height:1.04;letter-spacing:-.025em}.attention-lead{max-width:700px;margin:16px 0 0;color:#50606a;font:17px/1.7 var(--sans)}
.attention-panel{position:relative;margin-top:30px;padding:clamp(24px,4vw,38px);overflow:hidden;border:1px solid rgba(168,149,76,.34);border-radius:28px;background:linear-gradient(145deg,rgba(255,253,246,.98),rgba(247,242,228,.98));box-shadow:0 22px 56px rgba(6,27,49,.1)}.attention-panel::before{position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--navy),#376b67 54%,var(--gold));content:""}.attention-panel h2{margin:0 0 10px;color:var(--navy);font-size:clamp(27px,4vw,36px);line-height:1.15}
.attention-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 24px}.attention-choice{position:relative;min-height:390px;display:flex;flex-direction:column;padding:24px;overflow:hidden;border:1px solid #c9cabb;border-radius:20px;color:var(--navy);background:rgba(255,255,255,.78);box-shadow:0 8px 20px rgba(6,27,49,.05);text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.attention-choice::after{position:absolute;right:-30px;bottom:-42px;width:120px;height:120px;border-radius:50%;background:rgba(168,149,76,.1);content:""}.attention-choice:hover{border-color:var(--gold-dark);background:#fffdf6;box-shadow:0 16px 30px rgba(6,27,49,.11);transform:translateY(-3px)}.attention-choice:focus-visible,.attention-responses button:focus-visible,.tracking-square:focus-visible{outline:4px solid var(--gold-2);outline-offset:4px}.attention-choice>strong{position:relative;z-index:1;display:block;margin:12px 0 18px;font:700 clamp(28px,4vw,36px)/1.1 var(--serif)}.attention-choice-tag{position:relative;z-index:1;width:fit-content;display:block;padding:5px 11px;border-radius:999px;color:var(--gold-dark);background:var(--gold-soft);font:800 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}.attention-map{position:relative;z-index:1;display:grid;gap:8px;padding:12px;border:1px solid #e0ded2;border-radius:14px;background:rgba(248,247,242,.82)}.attention-map>span{min-height:52px;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;font-family:var(--sans)}.attention-map i{grid-row:1/3}.attention-map b{align-self:end;font-size:15px}.attention-map small{align-self:start;color:#637078;font-size:12px}.attention-dot,.attention-shape{width:34px;height:34px;display:block}.attention-dot{border-radius:50%}.attention-dot.is-blue{background:#1461c9}.attention-dot.is-green{background:#148151}.attention-shape{background:var(--navy)}.attention-shape.is-circle{border-radius:50%}.attention-shape.is-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.attention-choice-note{position:relative;z-index:1;display:block;margin:14px 0 18px;color:#42535d;font:15px/1.5 var(--sans)}.attention-steps{position:relative;z-index:1;display:grid;gap:9px;padding:12px;border:1px solid #e0ded2;border-radius:14px;background:rgba(248,247,242,.82)}.attention-steps>span{min-height:52px;display:flex;align-items:center;gap:10px;font:14px/1.35 var(--sans)}.attention-steps b{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;color:#6b5914;background:var(--gold-soft);font-size:16px}.attention-select{position:relative;z-index:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;border-radius:12px;color:#fff;background:var(--navy);font:800 15px/1 var(--sans)}.attention-select b{font-size:21px}.attention-choice:hover .attention-select{background:#173f61}.attention-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:20px;border-top:1px solid #ded9ca}.attention-facts span{min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:14px;color:#34434d;background:rgba(239,232,201,.48);font:700 14px/1.35 var(--sans);text-align:center}.attention-facts b{color:var(--gold-dark);font-size:24px}.attention-controls{margin:14px 0 0;color:#5d686e;font:14px/1.5 var(--sans);text-align:center}.attention-controls kbd{display:inline-grid;min-width:25px;height:25px;place-items:center;margin-left:4px;border:1px solid #c9c5b8;border-radius:6px;background:#fff;box-shadow:0 2px 0 #d7d3c5;font:700 14px/1 var(--sans)}
.attention-help{margin:20px 0 0;padding:14px 16px;border-left:4px solid var(--gold);border-radius:0 12px 12px 0;color:#525e66;background:rgba(239,232,201,.48);font:14px/1.65 var(--sans)}.attention-panel .clinic-form{max-width:720px}.attention-panel .clinic-form label{color:var(--navy);font-weight:700}.attention-panel .clinic-form select{min-height:52px;border-color:#aeb9b6;background:#fff}.attention-panel .clinic-form>.clinic-button{min-height:50px;padding-inline:26px}
.attention-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 0 22px;border-bottom:1px solid #ded9ca;font-family:var(--sans)}.attention-stat{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 14px;border:1px solid #d8d7cb;border-radius:14px;color:#34434d;background:rgba(255,255,255,.72);text-align:center}.attention-stat small{color:#6a777d;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.attention-stat strong{font-size:15px;line-height:1.25}.attention-stat-score{border-color:rgba(168,149,76,.55);color:#62551d;background:var(--gold-soft)}.attention-stat-score small{color:#786820}
.attention-rule{width:fit-content;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;margin:24px auto 14px;padding:10px 22px 12px;border-radius:18px;color:var(--navy);background:#e8efed;font-family:var(--sans);text-align:center}.attention-rule small{color:#60736f;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.attention-rule strong{font-size:clamp(18px,3vw,23px);line-height:1.3}.attention-rule.is-switch{color:#68480c;background:#f3e3aa;box-shadow:0 0 0 4px rgba(168,149,76,.16)}.attention-rule.is-switch small{color:#80621e}
.attention-stage{position:relative;height:300px;display:grid;place-items:center;margin:18px 0 22px;overflow:hidden;border:1px solid #cbd6d3;border-radius:24px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(228,237,234,.78) 55%,rgba(207,221,217,.88)),#e5ece9;box-shadow:inset 0 0 45px rgba(6,27,49,.07)}.attention-stage::after{position:absolute;inset:20px;border:1px dashed rgba(55,107,103,.24);border-radius:17px;content:"";pointer-events:none}#wait{position:relative;z-index:1;color:#57676d;font:800 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}.attention-symbol{position:relative;z-index:1;width:132px;height:132px;border:5px solid rgba(255,255,255,.7);border-radius:50%;background:#1461c9;box-shadow:0 18px 36px rgba(20,97,201,.28),0 0 0 1px rgba(6,27,49,.16);animation:attention-pop .18s ease-out}.attention-symbol[data-color=green]{background:#148151;box-shadow:0 18px 36px rgba(20,129,81,.25),0 0 0 1px rgba(6,27,49,.16)}.attention-symbol[data-shape=triangle]{border:0;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.attention-responses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.attention-responses button{min-height:92px;display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 22px;border:2px solid #1461c9;border-radius:20px;color:#0b376f;background:linear-gradient(145deg,#fff,#e9f2ff);box-shadow:0 9px 0 rgba(20,97,201,.16),0 16px 28px rgba(20,97,201,.12);font-family:var(--sans);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.attention-responses button:last-child{border-color:#148151;color:#0c5b38;background:linear-gradient(145deg,#fff,#e7f6ed);box-shadow:0 9px 0 rgba(20,129,81,.16),0 16px 28px rgba(20,129,81,.12)}.response-arrow{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:50%;color:#fff;background:#1461c9;font-size:24px;line-height:1}.attention-responses button:last-child .response-arrow{background:#148151}.response-copy{display:flex;flex-direction:column;align-items:center;gap:2px}.response-copy strong{font-size:clamp(19px,3vw,24px);line-height:1.2}.response-copy small{color:#607287;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.attention-responses button:last-child .response-copy small{color:#547566}.attention-responses button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(20,97,201,.16),0 20px 32px rgba(6,27,49,.15)}.attention-responses button:last-child:not(:disabled):hover{box-shadow:0 11px 0 rgba(20,129,81,.16),0 20px 32px rgba(6,27,49,.15)}.attention-responses button:not(:disabled):active{transform:translateY(5px);box-shadow:0 3px 0 rgba(20,97,201,.16),0 8px 16px rgba(6,27,49,.12)}.attention-responses button:disabled{opacity:.48;cursor:default;box-shadow:none}.attention-feedback{min-height:52px;display:grid;place-items:center;margin:14px 0 8px;color:#3e5058;font:700 16px/1.5 var(--sans);text-align:center}#play>#stop{display:block;margin:10px auto 0}
.attention-arena{position:relative;height:500px;margin:18px 0 16px;overflow:hidden;border:3px solid #7c9994;border-radius:24px;background-color:#dfe9e6;background-image:radial-gradient(rgba(55,107,103,.15) 1.2px,transparent 1.2px),radial-gradient(circle at 50% 45%,rgba(255,255,255,.72),transparent 68%);background-position:0 0,center;background-size:24px 24px,100% 100%;box-shadow:inset 0 0 55px rgba(6,27,49,.1),0 12px 26px rgba(6,27,49,.08)}.tracking-square{position:absolute;left:0;top:0;width:46px;height:46px;min-width:0;padding:0;border:3px solid #275b57;border-radius:11px;opacity:1;background:linear-gradient(145deg,#65a9a2,#397d77);box-shadow:0 7px 14px rgba(6,27,49,.24),inset 0 1px 0 rgba(255,255,255,.3);will-change:transform}.tracking-square:disabled{opacity:1}.tracking-square.is-target{border-color:#774b0c;background:linear-gradient(145deg,#ffd36e,#d88c22);box-shadow:0 8px 18px rgba(117,72,7,.34),0 0 0 4px rgba(255,244,194,.58)}.tracking-square.is-answer{outline:5px solid var(--navy);outline-offset:4px}.tracking-square:not(:disabled){cursor:pointer}
.attention-summary{margin:18px 0 24px;padding:18px;border:1px solid #d7d0be;border-radius:16px;color:#33444e;background:rgba(255,255,255,.7);font:700 18px/1.7 var(--sans)}@keyframes attention-pop{from{opacity:.2;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@media(max-width:900px){.attention-levels{grid-template-columns:1fr}.attention-choice{min-height:0}.attention-map{grid-template-columns:repeat(2,minmax(0,1fr))}.attention-select{margin-top:4px}.attention-facts{grid-template-columns:1fr}}
@media(max-width:700px){.attention-shell{padding:26px 14px 64px}.attention-shell h1{font-size:clamp(36px,12vw,48px)}.attention-lead{font-size:16px;line-height:1.58}.attention-panel{margin-top:22px;padding:20px 16px;border-radius:22px}.attention-levels{gap:13px;margin-top:20px}.attention-choice{padding:21px}.attention-map{grid-template-columns:1fr}.attention-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.attention-stat{min-height:54px;padding:8px}.attention-stat:first-child{grid-column:1/-1}.attention-stage{height:230px;border-radius:18px}.attention-symbol{width:108px;height:108px}.attention-responses{gap:10px}.attention-responses button{min-height:78px;gap:8px;padding:12px 8px;border-radius:15px}.response-arrow{width:32px;height:32px;flex-basis:32px;font-size:19px}.response-copy small{font-size:9px}.attention-arena{height:420px;border-width:2px;border-radius:18px;background-size:20px 20px,100% 100%}.attention-panel .clinic-form>.clinic-button{width:100%}.clinic-actions .clinic-button{flex:1 1 180px}}

/* Cores e Regras: configuração e apresentação de partida */
.attention-section-kicker{margin:0 0 7px;color:var(--gold-dark);font:800 11px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.attention-setup-copy{margin:0;color:#5a6870;font:15px/1.55 var(--sans)}
.attention-choice.is-selected{border-color:#8c792d;background:#fffdf6;box-shadow:0 0 0 3px rgba(168,149,76,.2),0 18px 34px rgba(6,27,49,.12);transform:translateY(-3px)}
.attention-choice.is-selected .attention-select{background:linear-gradient(135deg,#376b67,#224f4b)}
.attention-start{width:min(100%,360px);min-height:56px;display:flex;align-items:center;justify-content:center;margin:8px auto 0;font-size:17px}
.game-config-sound{align-content:start}.game-sound-option{min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #b9c4c2;border-radius:10px;background:#fff;font:700 15px/1.2 var(--sans)}.game-sound-option input{width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:#376b67}
.attention-play-top{position:relative}.attention-stats{grid-template-columns:repeat(4,minmax(0,1fr));padding-right:128px}.attention-sound{position:absolute;right:0;top:8px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;border:1px solid #c9cabb;border-radius:999px;color:#26413e;background:#fff;font:700 12px/1 var(--sans);cursor:pointer}.attention-sound span{font-size:20px}.attention-sound[aria-pressed=false]{color:#6d7475;background:#f0f0ed}.attention-sound[aria-pressed=false] span{text-decoration:line-through}
.attention-stat-timer{border-color:rgba(55,107,103,.45);color:#234f4b;background:#e8f1ee}.attention-stat-timer strong{font-size:20px;font-variant-numeric:tabular-nums}
.attention-time-track{height:8px;margin:-5px 0 22px;overflow:hidden;border-radius:999px;background:#dce4e1}.attention-time-track span{width:100%;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#376b67,#a8954c);transform:scaleX(0);transform-origin:left center;will-change:transform}.attention-time-track.is-urgent span{background:linear-gradient(90deg,#b86b26,#c54437)}
.attention-stage{isolation:isolate;transition:border-color .22s ease,background .22s ease,box-shadow .22s ease}.attention-stage::before{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at center,rgba(255,255,255,.75),transparent 62%);content:"";opacity:.2;transform:scale(.7);transition:opacity .25s ease,transform .25s ease}.attention-stage.is-answer::before{opacity:1;transform:scale(1)}.attention-stage.is-correct{border-color:#4b8e62;background:radial-gradient(circle at 50% 45%,#fff,#dff2e5 58%,#c9e6d2)}.attention-stage.is-error,.attention-stage.is-omission{border-color:#b26b5e;background:radial-gradient(circle at 50% 45%,#fff,#f5e4df 58%,#edd1ca)}.attention-stage.is-switch{animation:attention-rule-pulse .6s ease}
.attention-result-mark{position:absolute;z-index:3;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;opacity:0;color:#fff;background:#376b67;box-shadow:0 12px 30px rgba(6,27,49,.24);font:800 42px/1 var(--sans);pointer-events:none;transform:scale(.45)}.attention-stage.is-correct .attention-result-mark,.attention-stage.is-error .attention-result-mark,.attention-stage.is-omission .attention-result-mark{opacity:1;animation:attention-result .5s cubic-bezier(.2,.8,.2,1) both}.attention-stage.is-error .attention-result-mark,.attention-stage.is-omission .attention-result-mark{background:#a64a3f}
.attention-symbol{transition:opacity .16s ease,transform .16s ease;animation:attention-pop .24s cubic-bezier(.18,.8,.25,1.25)}.attention-symbol[data-shape=triangle]{filter:drop-shadow(0 17px 15px rgba(6,27,49,.18))}
.attention-shell[data-mode=shapes] .attention-panel::before{background:linear-gradient(90deg,#376b67,#6a8f88 55%,#9e8440)}.attention-shell[data-mode=hard] .attention-panel::before{background:linear-gradient(90deg,#704a8a,#376b67 48%,#b17a24)}
@keyframes attention-result{0%{opacity:0;transform:scale(.35) rotate(-12deg)}65%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes attention-rule-pulse{0%,100%{box-shadow:inset 0 0 45px rgba(6,27,49,.07)}50%{box-shadow:inset 0 0 45px rgba(168,149,76,.2),0 0 0 5px rgba(168,149,76,.14)}}
@media(max-width:900px){.attention-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:0}.attention-sound{position:static;width:100%;margin:10px 0}.attention-stat:first-child{grid-column:auto}}
@media(max-width:700px){.attention-choice.is-selected{transform:none}.attention-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.attention-stat:first-child{grid-column:auto}.attention-time-track{margin-top:0}.attention-stage{height:min(35svh,260px)}.attention-result-mark{width:62px;height:62px;font-size:35px}}

/* Tipografia ampliada para leitura confortável em todas as telas de atenção. */
.attention-lead{font-size:1.0625rem}
.attention-choice-tag{font-size:.6875rem}
.attention-map b{font-size:.9375rem}
.attention-map small{font-size:.75rem}
.attention-choice-note{font-size:.9375rem}
.attention-steps>span{font-size:.875rem}
.attention-steps b{font-size:1rem}
.attention-select{font-size:.9375rem}
.attention-facts span,.attention-controls,.attention-controls kbd{font-size:.875rem}
.attention-stat small,.attention-rule small{font-size:.6875rem}
.attention-stat strong{font-size:.9375rem}
.attention-rule strong{font-size:clamp(1.125rem,3vw,1.4375rem)}
#wait{font-size:.875rem}
.response-copy strong{font-size:clamp(1.1875rem,3vw,1.5rem)}
.response-copy small{font-size:.6875rem}
.attention-feedback{font-size:1rem}
.attention-summary{font-size:1.125rem}
.attention-section-kicker{font-size:.6875rem}
.attention-setup-copy{font-size:.9375rem}
.attention-start{font-size:1.0625rem}
.game-sound-option{font-size:.9375rem}
.attention-sound{font-size:.75rem}

.attention-help{
  display:grid;
  gap:6px;
  margin:20px 0 0;
  padding:16px 18px;
  border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;
  color:#354852;
  background:rgba(239,232,201,.48);
  font:1rem/1.65 var(--sans);
}
.attention-help strong{color:var(--navy);font-size:1.0625rem;line-height:1.35}
.attention-help p{margin:0}
.attention-help small{color:#596970;font-size:.875rem;line-height:1.55}

/* Resultado da partida: métricas separadas e fáceis de comparar. */
.attention-summary{display:grid;gap:12px;margin:20px 0 26px;padding:0;border:0;background:transparent;font-family:var(--sans)}
.attention-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.attention-result-item,.attention-result-total{display:flex;align-items:center;gap:12px;min-width:0;border:1px solid #d5dcd9;border-radius:16px;background:#fffdf8}
.attention-result-item{min-height:86px;padding:13px}
.attention-result-item>span:last-child,.attention-result-total>span:last-child{min-width:0;display:grid;gap:2px}
.attention-result-item strong,.attention-result-total strong{color:#061b31;font-size:1.3rem;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.attention-result-item small,.attention-result-total small{color:#536672;font-size:.7rem;font-weight:800;line-height:1.25;letter-spacing:.065em;text-transform:uppercase}
.attention-result-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:#376b67;font-size:1.15rem;font-weight:900;line-height:1}
.attention-result-item.is-success{border-color:#abd0b7;background:#f4fbf6}.attention-result-item.is-success .attention-result-icon{background:#377d51}
.attention-result-item.is-error{border-color:#dfbbb4;background:#fff7f4}.attention-result-item.is-error .attention-result-icon{background:#a44e43}
.attention-result-item.is-omission .attention-result-icon{background:#667781}
.attention-result-item.is-accuracy{border-color:#d9c77e;background:#fffae8}.attention-result-item.is-accuracy .attention-result-icon{color:#59480e;background:#f5c451}
.attention-result-item.is-time .attention-result-icon{background:#376b67}
.attention-result-total{min-height:74px;padding:14px 16px;border-color:#c4ad55;background:linear-gradient(135deg,#fff9df,#f5edcd)}
.attention-result-total .attention-result-icon{color:#4d3e0d;background:#f5c451}
.attention-result-total strong{font-size:1.18rem}.attention-result-total small{color:#62551d}

@media(max-width:760px){
  .attention-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attention-result-item{min-height:80px;padding:11px}
}

@media(max-width:390px){
  .attention-result-item,.attention-result-total{gap:9px}
  .attention-result-icon{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:1rem}
  .attention-result-item strong{font-size:1.15rem}
}

/* HUD de partida: contraste alto e som compacto. */
.attention-stats.game-hud{gap:8px;padding-right:104px}
.attention-stats.game-hud .attention-stat{border-color:#9eabb3;background:#fffdf8;color:#061b31}
.attention-stats.game-hud .attention-stat small{color:#344d60;font-size:.72rem;font-weight:900;letter-spacing:.075em}
.attention-stats.game-hud .attention-stat strong{color:#061b31!important;font-size:1.08rem;font-weight:900}
.attention-stats.game-hud .attention-stat-score{border-color:#b59b45;background:#f4ebc9}
.attention-stats.game-hud .attention-stat-timer{border-color:#8ba5b4;background:#e8f0f2}
.attention-sound{width:34px;min-width:34px;min-height:34px;gap:0;padding:0;font-size:.66rem}
.attention-sound span{font-size:16px}
.attention-sound b{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .attention-stats.game-hud{padding-right:0}
  .attention-sound{position:static;width:34px;min-width:34px;justify-content:center;margin:8px 0 0 auto}
}