:root{
  --tl-blue:#1769c2;
  --tl-blue2:#0f5aa8;
  --tl-green:#2da867;
  --tl-green2:#218654;
  --tl-purple:#7657c8;
  --tl-purple2:#5e45ac;
  --tl-coral:#e65a4f;
  --tl-coral2:#c94840;
  --tl-orange:#c27b12;
  --tl-navy:#173b63;
  --tl-ink:#2b3e50;
  --tl-muted:#687887;
  --tl-line:#d8e3eb;
  --tl-bg:#eef4f8;
  --tl-white:#fff;
  --tl-focus:#ffb52e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,#f1f5ef 0%,#eef5fb 55%,#eaf3f8 100%);
  color:var(--tl-ink);
  padding:14px 10px 18px;
  text-align:center;
}
main{max-width:1100px;margin:auto}
button{font:inherit;cursor:pointer}
button:focus-visible,
html[data-input-mode="gamepad"] .pad-focus,
html[data-input-mode="keyboard"] .pad-focus{
  outline:4px solid rgba(255,181,46,.86)!important;
  outline-offset:3px!important;
  position:relative;
  z-index:3;
}
.hidden{display:none!important}
.section{
  background:#fff;
  border-radius:20px;
  box-shadow:0 5px 22px #15364f18;
  padding:18px 20px;
  border:1px solid #dce7ee;
  position:relative;
  min-height:0;
}
.screen{display:none}
.screen.show{display:block;animation:tlFade .18s ease}
@keyframes tlFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
h2,h3{color:var(--tl-navy)}
h2{font-size:clamp(1.42rem,2.5vw,1.65rem);margin:4px 0 12px}
h3{margin:0}
.intro{
  max-width:760px;
  margin:4px auto 20px;
  color:var(--tl-muted);
  font-size:clamp(1rem,1.7vw,1.12rem);
  line-height:1.5;
}

/* Accueil : même grammaire visuelle qu'Accords / Cadences, sans toucher au contenu. */
.home-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:930px;
  margin:0 auto;
}
.home-block{
  min-height:174px;
  border:0;
  border-radius:20px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  color:#fff;
  text-align:left;
  box-shadow:0 9px 20px #1e425425;
}
.home-block h3{
  color:#fff;
  font-size:clamp(1.08rem,2vw,1.3rem);
  line-height:1.2;
}
.learn-block{background:linear-gradient(145deg,var(--tl-purple),var(--tl-purple2))}
.recognize-block{background:linear-gradient(145deg,#2780d6,var(--tl-blue2))}
.more-block{background:linear-gradient(145deg,#38b874,var(--tl-green2))}
.challenge-block{background:linear-gradient(145deg,#ef6b5f,var(--tl-coral2))}
.home-block .mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  width:100%;
  margin:0;
}
.home-block>button,
.home-block .mode-grid button{
  min-height:46px;
  margin:0;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  color:var(--tl-navy);
  font-weight:850;
  font-size:.96rem;
  box-shadow:0 4px 10px rgba(18,46,68,.12);
  transition:transform .14s ease,filter .14s ease,background .14s ease;
}
.home-block>button:hover,
.home-block .mode-grid button:hover{transform:translateY(-1px);filter:brightness(.985)}
.learn-block>button{color:var(--tl-purple2)}
.recognize-block .mode-grid button{color:var(--tl-blue2)}
.more-block .mode-grid button{color:var(--tl-green2)}
.challenge-block>button{color:#b73d35}
.learn-block>button,.challenge-block>button{width:100%}

/* Tuto */
#tuto{max-width:920px;margin:0 auto}
.tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:0 auto 12px;
  padding:4px;
  background:#edf3f7;
  border-radius:14px;
}
.tabs button{
  min-height:43px;
  margin:0;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#627889;
  font-weight:850;
  font-size:.88rem;
  line-height:1.2;
}
.tabs button:hover{background:#fff}
.tabs button.selected{
  color:#fff;
  background:linear-gradient(145deg,var(--tl-purple),var(--tl-purple2));
  box-shadow:0 2px 8px rgba(65,49,119,.25);
}
.tutorial-card,.card,.result-card{
  border:1px solid var(--tl-line);
  background:#fbfdff;
  border-radius:18px;
  padding:clamp(14px,2.2vw,20px);
  margin:10px auto;
  max-width:820px;
  box-shadow:0 4px 14px rgba(23,59,99,.06);
}
.tutorial-card h3{font-size:clamp(1.18rem,2.4vw,1.42rem);margin-bottom:10px}
.rule{
  font-size:clamp(1.02rem,2.2vw,1.2rem);
  font-weight:900;
  color:var(--tl-blue);
  margin:10px auto;
}
.example{
  max-width:650px;
  background:#edf9f2;
  border:1px solid #a9d9bf;
  border-left:5px solid var(--tl-green);
  border-radius:13px;
  padding:12px 14px;
  margin:12px auto;
  text-align:left;
  line-height:1.52;
}
.memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:690px;margin:0 auto}
.memo{
  background:#fff;
  border:1px solid #dce6ed;
  border-radius:13px;
  padding:12px;
  line-height:1.55;
}
.exception-box{
  max-width:650px;
  background:#fff7e2;
  border:1px solid #f2d189;
  border-left:5px solid var(--tl-orange);
  border-radius:13px;
  padding:12px 14px;
  margin:10px auto 14px;
  line-height:1.55;
  font-size:1rem;
}
.exception-box span{font-weight:900;color:var(--tl-blue)}
.mini-note{font-size:.9rem;color:var(--tl-muted);line-height:1.45}
.quick-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.quick-actions button,.tutorial-card>button{
  min-height:44px;
  margin:4px 0;
  padding:9px 16px;
  border:0;
  border-radius:11px;
  background:var(--tl-blue);
  color:#fff;
  font-weight:850;
}
.plus-memo{max-width:580px;margin:0 auto 14px}

/* Armures : compactes, centrées, sans grand vide artificiel. */
.staff-image-box{
  width:min(100%,390px);
  min-height:132px;
  margin:7px auto 3px;
  padding:4px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:13px;
  background:#fff;
}
.staff-image-row{height:132px;display:flex;align-items:center;justify-content:center;gap:0}
.staff-image-row img{display:block;height:132px;width:auto;flex:0 0 auto}

/* Exercice */
#game{max-width:900px;margin:0 auto}
.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:34px;
  margin:0 auto 2px;
  max-width:780px;
}
.topbar-spacer{display:none}
#progress{font-weight:850;color:var(--tl-blue);font-size:.9rem}
#gameTitle{margin:0 auto 8px;color:var(--tl-navy)}
.card{
  max-width:780px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding-top:14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:5px 11px;
  margin:0 0 4px;
  border-radius:999px;
  background:#e8f3fd;
  color:var(--tl-blue);
  font-weight:850;
  font-size:.82rem;
}
#game #staffBox{width:100%;display:flex;justify-content:center;align-items:center;min-height:138px}
#game #staffBox:empty{display:none;min-height:0}
#game .staff-image-box{width:min(100%,430px);min-height:148px;margin:0 auto}
#game .staff-image-row{height:148px}
#game .staff-image-row img{height:148px}
.question{
  color:var(--tl-ink);
  font-size:clamp(1.12rem,2.5vw,1.38rem);
  font-weight:850;
  line-height:1.25;
  margin:7px 0 10px;
}
.answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  width:min(100%,610px);
  margin:0 auto;
}
.answers button{
  width:100%;
  min-height:50px;
  margin:0;
  padding:9px 11px;
  border:0;
  border-radius:12px;
  background:linear-gradient(145deg,#35b473,var(--tl-green2));
  color:#fff;
  font-weight:850;
  line-height:1.2;
  box-shadow:0 4px 10px rgba(33,134,84,.15);
}
.answers button:hover{filter:brightness(1.025)}
.answers button.wrong{background:linear-gradient(145deg,#ef655b,#cb423a)}
.answers button.good{background:linear-gradient(145deg,#2780d6,var(--tl-blue2))}
.feedback{
  width:100%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:7px 0 3px;
  font-size:1rem;
  line-height:1.4;
  font-weight:650;
}
.feedback-help{
  width:min(100%,620px);
  font-size:1rem;
  line-height:1.42;
  background:#fff7e2;
  border:1px solid #f2d189;
  border-left:5px solid var(--tl-orange);
  border-radius:12px;
  padding:9px 11px;
  margin:0 auto;
}
.feedback-help small{font-size:.86rem;color:var(--tl-muted)}
.ok{color:#237448;font-weight:850}.ko{color:#b6433b;font-weight:850}
#nextBtn{
  width:min(100%,320px);
  min-height:44px;
  margin:4px auto 0;
  padding:9px 15px;
  border:0;
  border-radius:11px;
  background:var(--tl-blue);
  color:#fff;
  font-weight:850;
}

/* Résultat */
#results{max-width:760px;margin:0 auto}
.result-card{max-width:620px;padding:22px}
#scoreBig{font-size:clamp(3rem,8vw,4.3rem);font-weight:950;line-height:1;color:var(--tl-blue);margin:5px 0}
#scoreText{font-size:1.05rem;line-height:1.45;color:var(--tl-muted);margin:12px auto 18px}
.result-card .red{
  min-height:46px;
  margin:0;
  padding:9px 18px;
  border:0;
  border-radius:11px;
  background:linear-gradient(145deg,#ef655b,#cb423a);
  color:#fff;
  font-weight:850;
}

/* Tableau du tuto */
.table-title{margin-top:20px}
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table td,.table th{border:1px solid #dde5eb;padding:8px}
.table th{background:#eef4ff;color:var(--tl-navy)}
.recap-table{font-size:.9rem}
.recap-table .staff-image-box{width:145px;min-height:62px;padding:0;margin:0 auto}
.recap-table .staff-image-row{height:62px}
.recap-table .staff-image-row img{height:62px}
.armure-cell{width:160px;min-width:160px;background:#fff}

/* Tablette */
@media(max-width:820px){
  body{padding:10px 7px 14px}
  .section{padding:15px}
  .home-block{min-height:160px;padding:15px}
  .home-groups{gap:11px}
  .tutorial-card,.card,.result-card{padding:14px}
}

/* Smartphone */
@media(max-width:620px){
  body{padding:7px 4px 11px}
  .section{padding:11px;border-radius:16px}
  .intro{font-size:.98rem;margin:2px auto 12px}
  .home-groups{grid-template-columns:1fr;gap:9px}
  .home-block{
    min-height:0;
    padding:12px;
    gap:9px;
    border-radius:16px;
  }
  .home-block h3{font-size:1.03rem}
  .home-block .mode-grid{gap:7px}
  .home-block>button,.home-block .mode-grid button{min-height:42px;font-size:.89rem;padding:7px 8px;border-radius:10px}
  h2{margin-bottom:9px}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:4px;margin-bottom:9px}
  .tabs button{min-height:39px;font-size:.78rem;padding:6px 7px}
  .tutorial-card{margin:7px auto;padding:11px}
  .memo-grid{grid-template-columns:1fr;gap:7px}
  .memo,.exception-box,.example{padding:10px 11px}
  .staff-image-box{min-height:106px;width:min(100%,320px);padding:2px 5px}
  .staff-image-row{height:106px}
  .staff-image-row img{height:106px}
  .topbar{min-height:28px;margin-bottom:0}
  #progress{font-size:.78rem}
  #gameTitle{font-size:1.25rem;margin-bottom:5px}
  .card{padding:10px; border-radius:15px}
  .badge{min-height:27px;padding:4px 9px;font-size:.73rem}
  #game #staffBox{min-height:112px}
  #game .staff-image-box{min-height:116px;width:min(100%,345px)}
  #game .staff-image-row{height:116px}
  #game .staff-image-row img{height:116px}
  .question{font-size:1.08rem;margin:4px 0 8px}
  .answers{gap:7px}
  .answers button{min-height:46px;font-size:.9rem;padding:7px 6px}
  .feedback{min-height:61px;font-size:.9rem;padding:5px 0 2px}
  .feedback-help{font-size:.88rem;padding:7px 9px;border-left-width:4px}
  .feedback-help small{font-size:.78rem}
  #nextBtn{min-height:41px;font-size:.9rem}
  .result-card{padding:17px}
  .recap-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .armure-cell{width:125px;min-width:125px}
  .recap-table .staff-image-box{width:112px}
}

/* Très petits écrans : on garde 2 x 2 dans les réponses, car les tonalités restent courtes. */
@media(max-width:360px){
  .section{padding:9px}
  .home-block .mode-grid{grid-template-columns:1fr 1fr}
  .answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .answers button{font-size:.82rem;min-height:44px}
  #game .staff-image-box{width:100%;min-height:104px}
  #game .staff-image-row,#game .staff-image-row img{height:104px}
}

/* Smartphone / tablette paysage : éviter qu'un exercice simple sorte de l'écran. */
@media(orientation:landscape) and (max-height:620px){
  body{padding:6px 8px 9px}
  .section{padding:9px 12px}
  .intro{margin-bottom:8px;font-size:.9rem}
  .home-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .home-block{min-height:118px;padding:10px;gap:7px}
  .home-block h3{font-size:.95rem}
  .home-block>button,.home-block .mode-grid button{min-height:37px;font-size:.8rem;padding:5px 7px}
  #game .topbar{min-height:22px}
  #gameTitle{font-size:1.12rem;margin:0 0 2px}
  .card{padding:7px 10px}
  .badge{min-height:24px;font-size:.68rem;padding:3px 8px}
  #game #staffBox{min-height:88px}
  #game .staff-image-box{min-height:94px;width:min(100%,315px)}
  #game .staff-image-row,#game .staff-image-row img{height:94px}
  .question{font-size:1rem;margin:2px 0 5px}
  .answers{gap:6px;width:min(100%,560px)}
  .answers button{min-height:38px;font-size:.82rem;padding:5px 6px}
  .feedback{min-height:48px;font-size:.82rem;padding:3px 0}
  .feedback-help{font-size:.8rem;padding:5px 8px}
  #nextBtn{min-height:36px;padding:5px 10px;font-size:.82rem}
}

@media(min-width:1200px){
  .section{padding:20px 24px}
  .home-groups{max-width:980px}
}
@media(prefers-reduced-motion:reduce){.screen.show,.home-block>button,.home-block .mode-grid button{animation:none;transition:none}}


.challenge-block>button{background:#fff!important;color:#b73d35!important;border:1px solid rgba(255,255,255,.35)!important}
.challenge-block>button:hover{background:#fff6f5!important}
#results.show{position:relative;overflow-y:auto;overscroll-behavior:contain}
.result-layout{width:min(100%,860px);margin:6px auto 0;display:grid;gap:12px;padding:2px 2px 10px}
.award-card{--award:#c89517;--award-soft:#fff7db;position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"badge kicker reveal" "badge title reveal" "badge message details";column-gap:16px;row-gap:3px;align-items:center;padding:16px 18px;border:1px solid color-mix(in srgb,var(--award) 42%,white);border-radius:18px;background:linear-gradient(135deg,var(--award-soft),#fff 66%);box-shadow:0 9px 22px color-mix(in srgb,var(--award) 10%,transparent);text-align:left}
.award-card[data-award="3"]{--award:#c89517;--award-soft:#fff7db}
.award-card[data-award="2"]{--award:#8c97a8;--award-soft:#f2f5f8}
.award-card[data-award="1"]{--award:#bf7c3c;--award-soft:#fff2e6}
.award-card[data-award="0"]{--award:#a45a54;--award-soft:#fff1ef}
.section-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--award)}
.award-card>.section-eyebrow{grid-area:kicker;margin:0}
.award-badge{grid-area:badge;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--award) 62%,white),var(--award));box-shadow:0 7px 18px color-mix(in srgb,var(--award) 25%,transparent);color:#fff}.award-badge span{font-size:2.25rem;font-weight:950;line-height:1}
.award-title{grid-area:title;color:var(--tl-navy);font-size:1.55rem;line-height:1.05}
.award-message{grid-area:message;margin:3px 0 0;color:#5e7385;line-height:1.4;font-weight:650}
.score-reveal{grid-area:reveal;align-self:center;border:1px solid color-mix(in srgb,var(--award) 45%,white);border-radius:12px;background:#fff;color:var(--award);font-weight:900;min-height:42px;padding:0 14px;white-space:nowrap}
.score-reveal:hover{background:var(--award-soft)}
.score-details{grid-area:details;justify-self:end;display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:11px;background:#fff;border:1px solid color-mix(in srgb,var(--award) 25%,white);color:var(--tl-navy)}
.score-details[hidden]{display:none!important}.score-details strong{font-size:1.22rem;color:var(--award)}.score-details span{font-size:1.05rem;font-weight:900}.score-details small{color:#718595;font-weight:750}
.result-send{padding:12px 14px;border:1px solid #cfe3d8;border-radius:15px;background:linear-gradient(135deg,#f8fcfa,#f2faf6);text-align:left}
.result-send-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.result-send-head h3{margin:2px 0 4px;color:var(--tl-navy);font-size:1.02rem}.result-send-head p{margin:0;max-width:620px;color:var(--tl-muted);font-size:.8rem;line-height:1.4}
.result-send-open,.result-send-submit{border:1px solid #2da76b;border-radius:11px;background:#ecfaf2;color:#08723e;font:inherit;font-weight:900;min-height:40px;padding:0 15px;cursor:pointer;white-space:nowrap}.result-send-open:hover,.result-send-submit:hover{background:#def6e9}
.result-send-form{margin-top:10px;padding-top:10px;border-top:1px solid #d9e9e0}.result-send-preview{display:grid;gap:3px;margin-bottom:9px;padding:9px 11px;border-radius:11px;background:#fff;border:1px solid #dce8ee;color:#34516b;font-size:.78rem;line-height:1.35}.result-send-preview strong{color:var(--tl-navy)}.result-send-preview small{color:#64798c}
.result-send-fields{display:grid;grid-template-columns:1.25fr .65fr 1fr 1fr;gap:9px}.result-send-fields label{display:grid;gap:4px;color:#294864;font-size:.72rem;font-weight:850}.result-send-fields input{width:100%;height:38px;border:1px solid #cbdde8;border-radius:10px;background:#fff;padding:0 10px;color:var(--tl-navy);font:inherit;font-size:.82rem;outline:none}.result-send-fields input:focus{border-color:#2a79c9;box-shadow:0 0 0 3px rgba(42,121,201,.09)}
.result-recipient-help{margin:8px 0 0;color:#64798c;font-size:.75rem}.result-send-consent{display:flex;align-items:center;gap:7px;margin-top:8px;color:#36516c;font-size:.76rem}.result-send-consent input{accent-color:#2da76b}.result-send-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.result-send-cancel{border:1px solid #cadce7;border-radius:11px;background:#fff;color:#36516c;font:inherit;font-size:.8rem;font-weight:850;min-height:38px;padding:0 14px;cursor:pointer}.result-send-submit{background:#1f9e62;color:#fff;border-color:#1f9e62;min-width:112px}.result-send-submit:hover{background:#178451}.result-send-submit:disabled{cursor:default;opacity:.68}.result-send-status{min-height:16px;margin:6px 0 0;text-align:right;color:#64798c;font-size:.75rem;font-weight:750}.result-send-status[data-kind="success"]{color:#08723e}.result-send-status[data-kind="error"]{color:#b6493e}.result-send-status[data-kind="pending"]{color:#246ea9}
.result-actions{display:flex;justify-content:center}.result-actions #again{min-width:180px;min-height:44px;border:0;border-radius:11px;background:var(--tl-blue);color:#fff;font-weight:850;padding:0 18px}
.award-celebration{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}.award-celebration[hidden]{display:none!important}.award-celebration .ring,.award-celebration .core,.award-celebration i{position:absolute;display:grid;place-items:center}.award-celebration .ring{width:120px;height:120px;border-radius:50%;border:8px solid rgba(255,255,255,.45);opacity:0;transform:scale(.35)}.award-celebration .core{width:86px;height:86px;border-radius:50%;font-size:2.6rem;font-weight:900;color:#fff;box-shadow:0 12px 24px rgba(17,39,59,.22)}.award-celebration i{font-style:normal;color:#fff;font-size:1.6rem;opacity:0}.award-celebration[data-award="3"] .core,.award-celebration[data-award="3"] .ring{background:#c89517;border-color:rgba(200,149,23,.35)}.award-celebration[data-award="2"] .core,.award-celebration[data-award="2"] .ring{background:#8c97a8;border-color:rgba(140,151,168,.35)}.award-celebration[data-award="1"] .core,.award-celebration[data-award="1"] .ring{background:#bf7c3c;border-color:rgba(191,124,60,.35)}
.award-celebration.play .r1{animation:awardRing 1.2s ease-out forwards}.award-celebration.play .r2{animation:awardRing 1.2s ease-out .12s forwards}.award-celebration.play .core{animation:awardCore 1.2s ease-out forwards}.award-celebration.play .n1{animation:awardNote1 1.1s ease-out .06s forwards}.award-celebration.play .n2{animation:awardNote2 1.1s ease-out .12s forwards}.award-celebration.play .n3{animation:awardNote3 1.1s ease-out .04s forwards}.award-celebration.play .n4{animation:awardNote4 1.1s ease-out .18s forwards}.award-celebration.play .n5{animation:awardNote5 1.1s ease-out .1s forwards}
@keyframes awardRing{0%{opacity:.26;transform:scale(.35)}100%{opacity:0;transform:scale(1.55)}}@keyframes awardCore{0%{transform:scale(.45);opacity:0}26%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:0}}@keyframes awardNote1{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(-96px,-78px) scale(1.08)}}@keyframes awardNote2{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(106px,-76px) scale(1.08)}}@keyframes awardNote3{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(-122px,10px) scale(1)}}@keyframes awardNote4{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(112px,12px) scale(1)}}@keyframes awardNote5{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(0,-112px) scale(1.12)}}
@media(max-width:700px){.award-card{grid-template-columns:58px 1fr;grid-template-areas:"badge kicker" "badge title" "message message" "reveal reveal" "details details";padding:13px}.award-badge{width:56px;height:56px}.award-badge span{font-size:1.8rem}.award-title{font-size:1.28rem}.score-reveal{width:100%;margin-top:5px}.score-details{justify-self:stretch;justify-content:center;flex-wrap:wrap}.result-send-head{align-items:flex-start;flex-direction:column}.result-send-open{width:100%}.result-send-fields{grid-template-columns:1fr}.result-send-actions>*{flex:1}.result-send-status{text-align:left}}