/* Challenge Trials: illustrated routes, legible goals, and recoverable runs. */
.tr-dialog, .tr-banner, .tr-result {
  --tr-paper: #edf0dc;
  --tr-muted: #adcbc0;
  --tr-accent: #bfe0ac;
  --tr-gold: #e8d18e;
  color: var(--tr-paper);
  font-size: 13px;
}
.tr-dialog {
  width: min(1190px, calc(100% - 32px));
  max-width: 1190px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  background: #102125;
  border: 1px solid #819d818c;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 100px #000b;
}
.tr-dialog[open] { display: flex; flex-direction: column; }
.tr-dialog::backdrop { background: #050d12d4; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.tr-dialog button, .tr-banner button, .tr-result button { touch-action: manipulation; }
.tr-dialog button:focus-visible, .tr-banner button:focus-visible, .tr-result button:focus-visible { outline: 2px solid #f0d992; outline-offset: 3px; }
.tr-dialog button:disabled, .tr-banner button:disabled, .tr-result button:disabled { cursor: default; opacity: .48; }
.tr-dialog h2, .tr-dialog h3, .tr-result h2 { font-family: Georgia, "Times New Roman", "Noto Serif TC", serif; font-weight: 400; }
.tr-heading { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 28px 21px; flex-shrink: 0; background: radial-gradient(ellipse at 60% 10%, #65856424, transparent 60%), linear-gradient(110deg,#243f36,#172a30); border-bottom: 1px solid #88a88b33; }
.tr-heading h2 { margin: 7px 0 8px; font-size: 36px; line-height: 1.1; letter-spacing: .3px; }
.tr-heading p { max-width: 780px; color: #bad0c4; font-size: 12px; line-height: 1.7; }
.tr-eyebrow { display: block; font-size: 9px; font-weight: 700; line-height: 1.6; letter-spacing: 1.35px; color: var(--tr-accent); text-transform: uppercase; }
.tr-close { background: #172720; border: 1px solid #829b765c; color: #e5eddd; border-radius: 12px; width: 44px; min-width: 44px; min-height: 44px; font-size: 29px; line-height: 1; }
.tr-close:hover { background: #344e3d; border-color: #b7d691; }
.tr-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #68876a #132629; }
#trials-context { padding: 19px 25px 17px; }
.tr-context-copy { display: flex; align-items: center; gap: 17px; }
.tr-level { flex-shrink: 0; padding: 9px 11px; border: 1px solid #dfcc8477; background: #5a593a23; color: #ead592; border-radius: 9px; font-size: 11px; font-weight: 700; }
.tr-context-copy p { color: #bcd0c3; font-size: 11px; line-height: 1.8; max-width: 840px; }
.tr-access-note { margin: 12px 0 0; padding: 10px 13px; border-left: 2px solid #e9c780; border-radius: 5px; background: #594d2d42; color: #eddbaf; font-size: 12px; line-height: 1.7; }
.tr-routes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; padding: 0 24px 23px; align-items: stretch; }
.tr-route { --tr-accent: #bddea8; display: flex; flex-direction: column; min-width: 0; border: 1px solid #89ac714f; border-radius: 16px; overflow: hidden; background: linear-gradient(155deg,#294332,#152a2b 75%); }
.tr-route-tide { --tr-accent: #aedbe4; }
.tr-route-loom { --tr-accent: #d5b7ef; }
.tr-route.tr-route-tide { border-color: #87b1c14f; background: linear-gradient(155deg,#26474b,#172b35 75%); }
.tr-route.tr-route-loom { border-color: #b099cf4f; background: linear-gradient(155deg,#42394e,#1d2c39 75%); }
.tr-route-art { position: relative; height: 157px; min-height: 157px; overflow: hidden; isolation: isolate; background: #203c39; }
.tr-landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .83; }
.tr-route-art::after { position: absolute; inset: 0; z-index: 5; content: ''; pointer-events: none; background: linear-gradient(0deg,#16312cbf,transparent 53%),linear-gradient(90deg,#10292144,transparent 70%); }
.tr-route-tide .tr-route-art::after { background: linear-gradient(0deg,#18333ebf,transparent 55%); }
.tr-route-loom .tr-route-art::after { background: linear-gradient(0deg,#2b2940bf,transparent 55%); }
.tr-enemy-art { position: absolute; object-fit: contain; width: 154px; height: 159px; bottom: -13px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 8px 3px #0006); }
.tr-enemy-0 { z-index: 1; left: 22%; width: 114px; height: 117px; bottom: 2px; opacity: .65; }
.tr-enemy-1 { z-index: 3; }
.tr-enemy-2 { z-index: 2; left: 79%; width: 115px; height: 117px; bottom: 2px; opacity: .78; }
.tr-route-orbit { position: absolute; z-index: 0; width: 112px; height: 112px; border: 1px solid #e0ebae65; border-radius: 50%; top: 11px; left: calc(50% - 56px); box-shadow: 0 0 0 12px #dcebbc0b,0 0 45px #d4e7a529; }
.tr-route:hover .tr-enemy-1 { animation: tr-route-awaken 700ms ease-out both; }
.tr-card-main { display: flex; flex-direction: column; flex: 1; padding: 17px 19px 19px; }
.tr-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tr-card-heading h3 { margin: 5px 0 10px; font-size: 26px; line-height: 1.1; color: #f0efdf; }
.tr-emblem { flex-shrink: 0; width: 52px; height: 57px; color: var(--tr-accent); overflow: visible; }
.tr-card-heading>.tr-emblem { width: 43px; height: 47px; margin: -5px -4px 0 0; }
.tr-gold { color: #ecd58e; }
.tr-silver { color: #c4d8e5; }
.tr-bronze { color: #d9ac84; }
.tr-unearned { color: #829b8c; opacity: .65; }
.tr-description { color: #bccfc0; font-size: 12px; line-height: 1.75; min-height: 63px; }
.tr-recommended { align-self: flex-start; margin: 12px 0 13px; color: #c6d4c5; font-size: 10px; padding: 3px 8px; border: 1px solid #9fa89455; border-radius: 20px; }
.tr-recommended.is-ready { color: var(--tr-accent); border-color: #afcc8e66; background: #b9da8220; }
.tr-ranks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.tr-ranks button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 2px; border: 1px solid #7b9a774b; border-radius: 8px; background: #122829a3; color: #c5d9c2; }
.tr-ranks button span { font-size: 16px; font-family: Georgia,serif; }
.tr-ranks button small { font-size: 10px; line-height: 1; }
.tr-ranks button:hover:not(:disabled) { background: #3c5649; border-color: var(--tr-accent); }
.tr-ranks button[aria-pressed="true"] { color: #172a25; background: var(--tr-accent); border-color: var(--tr-accent); font-weight: 700; box-shadow: 0 3px 12px #0002; }
.tr-ranks button:disabled { opacity: .42; border-style: dashed; }
.tr-rule { border-left: 2px solid var(--tr-accent); margin: 17px 0; padding: 1px 0 1px 10px; }
.tr-rule strong { color: var(--tr-accent); font-size: 8px; letter-spacing: 1.1px; }
.tr-rule p { color: #d6e0cf; font-size: 11px; line-height: 1.75; margin-top: 4px; min-height: 38px; }
.tr-stat-label { display: block; color: #a8c5b7; font-size: 8px; line-height: 1.6; letter-spacing: .65px; }
.tr-waves-preview { display: grid; gap: 7px; list-style: none; padding: 0; margin: 9px 0 0; }
.tr-waves-preview li { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 6px 8px; background: #10232683; border: 1px solid #99b68328; border-radius: 8px; }
.tr-wave-number { flex-shrink: 0; display: grid; place-items: center; width: 27px; height: 29px; color: var(--tr-accent); border: 1px solid #afc7913f; border-radius: 7px; font-size: 15px; font-family: Georgia,serif; background: #7897671f; }
.tr-waves-preview strong { display: block; color: #dfebd7; font-weight: 600; font-size: 11px; line-height: 1.45; }
.tr-waves-preview small { color: #b2cabc; display: block; font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tr-waves-preview small span { margin: 0 3px; opacity: .5; }
.tr-tactic { font-size: 11px; line-height: 1.75; color: #c4d7bd; margin: 12px 0 16px; min-height: 57px; }
.tr-record { display: flex; align-items: center; gap: 8px; margin: auto 0 13px; border-top: 1px solid #98b68732; padding: 12px 0 0; min-height: 65px; }
.tr-record>.tr-emblem { width: 34px; height: 38px; }
.tr-record>div { min-width: 0; }
.tr-record span { display: block; color: #aac3b3; font-size: 8px; line-height: 1.5; letter-spacing: .45px; }
.tr-record strong { display: block; color: #e4e8d6; margin-top: 3px; font-size: 11px; line-height: 1.5; font-weight: 600; }
.tr-record b { color: #819b83; margin: 0 3px; }
.tr-record small { display: block; font-size: 9px; color: #a4c0af; margin-top: 2px; }
.tr-enter { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 15px; min-height: 45px; border: 1px solid var(--tr-accent); border-radius: 9px; background: var(--tr-accent); color: #173024; font-size: 12px; font-weight: 750; }
.tr-enter span { font-size: 18px; }
.tr-enter:hover:not(:disabled) { background: #ecf4d8; border-color: #ecf4d8; }
.tr-goals { margin: 0 24px 23px; border: 1px solid #a6bc9240; border-radius: 13px; padding: 16px 18px; background: #1f332cc4; }
.tr-goals h3 { font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #d6e4c3; margin: 0 0 12px; }
.tr-medal-goals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.tr-medal-goals article { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tr-medal-goals .tr-emblem { width: 39px; height: 43px; }
.tr-medal-goals strong { display: block; color: #e7e8d3; font-size: 13px; font-family: Georgia,"Times New Roman",serif; font-weight: 400; }
.tr-medal-goals p { font-size: 10px; line-height: 1.7; color: #c1d0bb; margin-top: 4px; }
.tr-goals>p { color: #9fbaa9; font-size: 10px; line-height: 1.7; margin-top: 12px; }
.tr-goals>p+p { margin-top: 4px; }
.tr-footer { flex-shrink: 0; padding: 13px 26px; background: #142629; border-top: 1px solid #87a6852a; color: #b1c9b7; font-size: 10px; line-height: 1.65; }
.tr-footer .tr-replace-note { color: #e2cd98; margin-bottom: 5px; }
#trials-saved { display: flex; align-items: center; gap: 17px; margin: 0 24px 19px; border: 1px solid #e0c97d77; border-radius: 13px; background: linear-gradient(125deg,#39473379,#253a3680); padding: 12px 15px 12px 12px; overflow: hidden; }
#trials-saved[hidden] { display: none; }
.tr-saved-art { flex-shrink: 0; width: 115px; height: 85px; border-radius: 9px; overflow: hidden; }
.tr-saved-art .tr-route-art { height: 85px; min-height: 85px; }
.tr-saved-art .tr-enemy-art { width: 75px; height: 85px; bottom: -8px; }
.tr-saved-art .tr-enemy-0, .tr-saved-art .tr-enemy-2 { width: 50px; height: 61px; bottom: 0; }
.tr-saved-art .tr-route-orbit { width: 67px; height: 67px; left: calc(50% - 33px); top: 0; }
.tr-saved-copy { flex: 1; min-width: 0; }
.tr-saved-copy h3 { font-size: 18px; line-height: 1.3; color: #f0e8c9; margin: 3px 0 5px; }
.tr-saved-copy p { font-size: 11px; line-height: 1.6; color: #cddbc1; font-variant-numeric: tabular-nums; }
.tr-saved-copy p span { padding: 0 4px; opacity: .5; }
.tr-saved-copy small { font-size: 10px; color: #a8c4b5; display: block; margin-top: 3px; line-height: 1.6; }
.tr-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 45px; padding: 10px 15px; border: 1px solid #afcf9a90; color: #dfedcc; background: #284437; border-radius: 9px; font-size: 12px; font-weight: 650; }
.tr-action:hover:not(:disabled) { background: #3d5e45; border-color: #c4dfa6; }
.tr-action-gold { color: #243425; background: #dfd18f; border-color: #dfd18f; }
.tr-action-gold:hover:not(:disabled) { background: #f1e3a6; border-color: #f1e3a6; }
.tr-action-quiet { background: #142a2b; color: #bfdbc8; border-color: #8aab8559; }
.tr-banner { position: relative; margin: 17px 0; padding: 17px 19px 12px; border: 1px solid #a5c28a59; border-radius: 15px; background: radial-gradient(ellipse at 0 0,#67835027,transparent 60%),linear-gradient(130deg,#263d31,#162b30); overflow: hidden; }
.tr-banner[hidden], .tr-result[hidden] { display: none; }
.tr-banner-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.tr-banner-title { display: flex; gap: 11px; align-items: center; min-width: 0; }
.tr-banner-title .tr-emblem { width: 38px; height: 42px; }
.tr-banner-title strong { font-family: Georgia,"Times New Roman","Noto Serif TC",serif; color: #eef0d9; font-size: 21px; line-height: 1.3; display: block; }
.tr-banner-title small { display: block; color: #adc4b5; font-size: 10px; margin-top: 2px; }
.tr-return { display: grid; grid-template-columns: 1fr 15px; column-gap: 7px; padding: 8px 10px; min-height: 45px; border: 1px solid #b0cb9563; border-radius: 9px; background: #193028; color: #dbe8c6; font-size: 11px; text-align: left; }
.tr-return span { font-size: 17px; line-height: 1; text-align: right; }
.tr-return small { font-size: 8px; color: #a8c4af; grid-column: 1 / -1; line-height: 1.5; margin-top: 3px; }
.tr-return:hover:not(:disabled) { background: #354c36; border-color: #c6dfa4; }
.tr-wave-track { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0 12px; padding: 0; list-style: none; }
.tr-wave-track li { position: relative; display: flex; align-items: center; gap: 7px; min-height: 64px; background: #142824; border: 1px solid #88a67b33; border-radius: 10px; padding: 8px 7px 8px 3px; isolation: isolate; }
.tr-wave-track li+li::before { position: absolute; top: 50%; left: -13px; width: 12px; height: 1px; background: #aac68b44; content: ''; }
.tr-wave-track li.is-current { border-color: var(--tr-accent); background: linear-gradient(110deg,#415b3d75,#1e3830); box-shadow: inset 0 0 17px #a2c77412; }
.tr-wave-track li.is-ahead { background: #132528; }
.tr-wave-track li.is-ahead img { opacity: .5; filter: saturate(.4); }
.tr-wave-track img { flex-shrink: 0; width: 51px; height: 53px; object-fit: contain; }
.tr-track-mark { position: absolute; left: 5px; bottom: 4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #42613b; color: #e5edc3; font-size: 8px; box-shadow: 0 0 0 2px #162c26; }
.tr-wave-track small { color: #92b295; font-size: 8px; line-height: 1.5; display: block; text-transform: uppercase; letter-spacing: .6px; }
.tr-wave-track strong { color: #d2e1c9; font-size: 10px; line-height: 1.5; display: block; }
.tr-wave-track .is-current small { color: var(--tr-accent); }
.tr-wave-track .is-current strong { color: #f0f0d8; }
.tr-wave-track .is-cleared { opacity: .7; }
.tr-banner-bottom { display: flex; align-items: center; gap: 17px; justify-content: space-between; border-top: 1px solid #8fab7b2b; padding-top: 12px; }
.tr-banner-rule { font-size: 10px; line-height: 1.65; color: #b8cfb8; max-width: 68%; }
.tr-live-goal { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.tr-live-goal .tr-emblem { width: 27px; height: 30px; }
.tr-live-goal strong { display: block; font-size: 12px; line-height: 1.5; }
.tr-live-goal small { display: block; font-size: 8px; line-height: 1.6; opacity: .9; }
.tr-campaign-kept { display: block; color: #9fb9a9; font-size: 8px; text-align: right; line-height: 1.4; margin-top: 8px; }
.tr-result { margin: 24px 0 15px; border: 1px solid #d9ce8477; border-radius: 18px; overflow: hidden; background: #1a302c; }
.tr-result-hero { position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; isolation: isolate; padding: 28px 24px; overflow: hidden; background: linear-gradient(120deg,#3e5334,#213f3c); }
.tr-result-hero>.tr-route-art { position: absolute; inset: 0; height: 100%; z-index: -1; opacity: .24; filter: saturate(.65); }
.tr-result-hero>.tr-emblem { width: 70px; height: 78px; filter: drop-shadow(0 4px 14px #0c1c2380); animation: tr-medal-reveal 700ms ease-out both; }
.tr-result-hero h2 { font-size: 31px; line-height: 1.15; margin: 5px 0 7px; color: #f4f0d2; }
.tr-result-hero p { font-size: 12px; line-height: 1.7; color: #d5dfc1; }
.tr-result-hero .tr-eyebrow { color: #e5d08b; }
.tr-result-body { padding: 21px 25px 20px; }
.tr-result-lead { font-size: 12px; line-height: 1.8; color: #cbdac2; }
.tr-result-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 18px 0 14px; }
.tr-result-stats>div { display: grid; text-align: center; gap: 4px; padding: 12px 8px; border-radius: 10px; border: 1px solid #97b77a33; background: #10282588; }
.tr-result-stats strong { font: 31px/1.1 Georgia,"Times New Roman",serif; color: #e6e6bd; font-variant-numeric: tabular-nums; }
.tr-result-stats span { font-size: 9px; color: #adc6ad; line-height: 1.6; }
.tr-result-note { color: #aac8b5; font-size: 11px; line-height: 1.8; }
.tr-unlocked { color: #ebd58d; font-size: 13px; line-height: 1.7; margin: 8px 0; }
.tr-result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tr-result-actions>.tr-action { flex: 1; min-width: 140px; }
.tr-result-footnote { display: block; color: #91b19c; font-size: 9px; line-height: 1.7; margin-top: 12px; }
.tr-result.is-defeat { border-color: #c1988077; background: #253432; }
.tr-result.is-defeat .tr-result-hero { background: linear-gradient(120deg,#4c4335,#28393b); }
.tr-result.is-defeat .tr-result-hero>.tr-emblem { animation: none; }
.tr-result.is-defeat .tr-result-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
@keyframes tr-route-awaken { from { transform: translateX(-50%) translateY(4px) scale(.98); } to { transform: translateX(-50%) translateY(0) scale(1.025); } }
@keyframes tr-medal-reveal { from { opacity: 0; transform: translateY(10px) scale(.85) rotate(-7deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@media (max-width: 960px) {
  .tr-routes { gap: 11px; padding: 0 17px 20px; }
  .tr-card-main { padding: 15px 13px 15px; }
  .tr-card-heading h3 { font-size: 23px; }
  .tr-card-heading>.tr-emblem { width: 34px; height: 38px; }
  .tr-card-heading .tr-eyebrow { font-size: 8px; letter-spacing: .75px; }
  .tr-ranks { gap: 4px; }
  .tr-ranks button { gap: 3px; }
  .tr-description { font-size: 11px; min-height: 77px; }
  .tr-tactic { min-height: 77px; }
  .tr-record strong { font-size: 10px; }
  .tr-rule p { min-height: 57px; }
}
@media (max-width: 760px) {
  .tr-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 17px; }
  .tr-heading { padding: 20px 19px 17px; }
  .tr-heading h2 { font-size: 30px; }
  .tr-heading p { font-size: 11px; }
  #trials-context { padding: 15px 17px; }
  .tr-context-copy { align-items: flex-start; gap: 12px; }
  .tr-context-copy p { font-size: 10px; }
  .tr-level { font-size: 10px; padding: 7px 8px; }
  .tr-routes { grid-template-columns: 1fr; gap: 17px; }
  .tr-route { display: grid; grid-template-columns: 33% minmax(0,1fr); }
  .tr-route-art { height: 100%; }
  .tr-route>.tr-route-art .tr-landscape { object-position: 43%; }
  .tr-route>.tr-route-art::after { background: linear-gradient(0deg,#122e2aba,transparent 80%); }
  .tr-route>.tr-route-art .tr-enemy-art { bottom: auto; top: 70px; width: 155px; height: 210px; }
  .tr-route>.tr-route-art .tr-enemy-0 { top: 17px; height: 109px; width: 110px; left: 28%; }
  .tr-route>.tr-route-art .tr-enemy-2 { top: 282px; width: 135px; height: 145px; left: 57%; }
  .tr-route>.tr-route-art .tr-route-orbit { top: 98px; }
  .tr-card-main { padding: 18px; }
  .tr-description, .tr-tactic, .tr-rule p { min-height: 0; }
  .tr-description { font-size: 12px; }
  .tr-recommended { margin-top: 9px; }
  .tr-rule { margin: 13px 0; }
  .tr-record { margin-top: 0; }
  .tr-medal-goals { gap: 10px; }
  .tr-medal-goals article { gap: 7px; align-items: flex-start; }
  .tr-medal-goals .tr-emblem { width: 27px; height: 30px; }
  .tr-medal-goals p { font-size: 9px; }
  .tr-goals { margin: 0 17px 17px; padding: 14px; }
  .tr-footer { padding: 11px 19px; font-size: 9px; }
  #trials-saved { margin: 0 17px 16px; gap: 10px; flex-wrap: wrap; padding: 12px; }
  .tr-saved-art { width: 87px; height: 79px; }
  .tr-saved-copy h3 { font-size: 16px; }
  #trials-saved>.tr-action { margin-left: auto; min-height: 42px; }
  .tr-banner { padding: 13px 12px 10px; }
  .tr-wave-track { gap: 8px; }
  .tr-wave-track li+li::before { width: 8px; left: -9px; }
  .tr-wave-track li { padding: 5px; gap: 3px; }
  .tr-wave-track img { width: 37px; height: 42px; }
  .tr-wave-track strong { font-size: 9px; }
}
@media (max-width: 480px) {
  .tr-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); border-radius: 15px; }
  .tr-heading { padding: 18px 15px 15px; gap: 12px; }
  .tr-heading h2 { font-size: 29px; }
  .tr-heading p { font-size: 10px; }
  .tr-eyebrow { font-size: 8px; letter-spacing: .9px; }
  .tr-close { width: 40px; min-width: 40px; min-height: 40px; }
  .tr-routes { padding: 0 12px 15px; }
  .tr-route { grid-template-columns: 1fr; }
  .tr-route>.tr-route-art { min-height: 139px; height: 139px; }
  .tr-route>.tr-route-art .tr-landscape { object-position: center; }
  .tr-route>.tr-route-art .tr-enemy-art { top: auto; bottom: -12px; width: 156px; height: 155px; }
  .tr-route>.tr-route-art .tr-enemy-0 { top: auto; bottom: -1px; left: 21%; width: 112px; height: 115px; }
  .tr-route>.tr-route-art .tr-enemy-2 { top: auto; bottom: -1px; left: 79%; width: 112px; height: 115px; }
  .tr-route>.tr-route-art .tr-route-orbit { top: 8px; }
  .tr-card-main { padding: 16px; }
  .tr-card-heading h3 { font-size: 26px; }
  .tr-card-heading>.tr-emblem { width: 43px; height: 47px; }
  .tr-context-copy { flex-direction: column; gap: 8px; }
  .tr-context-copy p { font-size: 11px; }
  .tr-level { font-size: 10px; }
  .tr-goals { margin: 0 12px 15px; }
  .tr-medal-goals { grid-template-columns: 1fr; gap: 11px; }
  .tr-medal-goals article { align-items: center; }
  .tr-medal-goals .tr-emblem { width: 33px; height: 36px; }
  .tr-medal-goals p { font-size: 10px; margin-top: 2px; }
  .tr-medal-goals strong { font-size: 14px; }
  .tr-footer { padding: 9px 14px; }
  .tr-footer .tr-replace-note { font-size: 10px; }
  #trials-saved { margin: 0 12px 14px; }
  .tr-saved-art { width: 73px; }
  .tr-saved-copy h3 { font-size: 15px; }
  .tr-saved-copy p { font-size: 10px; }
  .tr-saved-copy small { font-size: 9px; }
  .tr-banner-top { align-items: flex-start; gap: 8px; }
  .tr-banner-title { gap: 7px; }
  .tr-banner-title .tr-emblem { width: 29px; height: 32px; }
  .tr-banner-title strong { font-size: 19px; }
  .tr-banner-title small { font-size: 9px; }
  .tr-return { padding: 6px 8px; font-size: 9px; gap: 3px; }
  .tr-return small { font-size: 7px; }
  .tr-wave-track { gap: 8px; margin: 14px 0 11px; }
  .tr-wave-track li { flex-direction: column; text-align: center; align-items: center; justify-content: flex-start; min-height: 96px; padding: 7px 4px; }
  .tr-wave-track img { width: 50px; height: 49px; }
  .tr-wave-track strong { font-size: 9px; }
  .tr-track-mark { top: 5px; bottom: auto; }
  .tr-banner-bottom { gap: 10px; align-items: flex-start; }
  .tr-banner-rule { max-width: 62%; font-size: 9px; }
  .tr-live-goal { gap: 4px; }
  .tr-live-goal .tr-emblem { width: 22px; height: 25px; }
  .tr-live-goal strong { font-size: 10px; }
  .tr-live-goal small { font-size: 7px; }
  .tr-campaign-kept { font-size: 7px; }
  .tr-result-hero { gap: 12px; padding: 23px 16px; }
  .tr-result-hero>.tr-emblem { width: 51px; height: 58px; }
  .tr-result-hero h2 { font-size: 25px; }
  .tr-result-hero p { font-size: 10px; }
  .tr-result-body { padding: 16px; }
  .tr-result-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .tr-result-stats strong { font-size: 29px; }
  .tr-result-actions { flex-direction: column; }
  .tr-result-actions>.tr-action { width: 100%; }
}
html[data-motion="reduced"] .tr-dialog *, html[data-motion="reduced"] .tr-banner *, html[data-motion="reduced"] .tr-result * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .tr-dialog *, .tr-banner *, .tr-result * { animation: none !important; transition: none !important; } }