.journey-hero{display:flex;align-items:center;gap:22px;margin:20px 0;padding:24px;border:1px solid #3b897c;border-radius:20px;background:linear-gradient(130deg,#102e35,#152333)}.journey-hero>.mode-logo{width:150px;height:150px;object-fit:contain;flex:none}.journey-hero h1{margin:6px 0;color:#f4d694}.journey-hero p{line-height:1.6;max-width:650px}.journey-versus{display:inline-grid;place-items:center;width:88px;height:88px;border-radius:24px;border:2px solid #f4d694;background:#123b42;color:#f4d694;font-size:32px;font-weight:900;flex:none}.journey-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.journey-metrics>span{padding:12px;background:#102e35;border:1px solid #387268;border-radius:12px;color:#d3e9e3}.journey-metrics strong{display:block;font-size:23px;color:#f4d694}.journey-map{list-style:none;padding:8px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.journey-map li{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #435260;border-radius:10px;background:#14232d;color:#bdcbd5}.journey-map li span{font-weight:800}.journey-map li.current{border:2px solid #e6bd63;color:#ffe4ab}.journey-map li.complete{border-color:#4caa8e;background:#173e36;color:#bdffdf}.journey-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}.journey-choices .ut-tile{display:flex;flex-direction:column}.journey-choices .btn{margin-top:auto}.journey-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin:14px 0}.journey-roster>div{display:grid;grid-template-columns:35px 1fr 30px;gap:8px;align-items:center;padding:12px;border:1px solid #46636b;border-radius:10px;background:#142d35}.journey-roster small{color:#b1d8d0}.journey-roster span{font-weight:800;color:#f4d694}.journey-result{display:grid;gap:6px;padding:15px;margin:12px 0;background:#173b36;border:1px solid #528878;border-radius:12px;color:#e5fff4}.friend-code{display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:100px;margin:10px 0;padding:14px;background:#0e202b;color:#e6f1f4;border:1px solid #668a92;border-radius:10px;resize:vertical;overflow-wrap:anywhere;font:13px/1.5 monospace}.journey-new{margin:24px 0}.journey-new .ut-tile>.mode-logo{width:100px;height:100px}.journey-new .ut-tile>p{line-height:1.6}
@media(max-width:600px){.journey-hero{padding:16px;gap:12px}.journey-hero>.mode-logo{width:90px;height:90px}.journey-hero h1{font-size:26px}.journey-metrics{grid-template-columns:repeat(2,1fr)}.journey-map{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-choices{grid-template-columns:1fr}.journey-roster{grid-template-columns:1fr}.journey-choices button,.journey-new button{width:100%;min-height:46px}.journey-hero .journey-versus{width:64px;height:64px}.journey-hero p{font-size:13px}}
html[data-view-mode=phone] .journey-metrics,html[data-view-mode=phone] .journey-map{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-view-mode=phone] .journey-choices,html[data-view-mode=phone] .journey-roster{grid-template-columns:1fr}html[data-view-mode=phone] .journey-hero{padding:14px;gap:12px}html[data-view-mode=phone] .journey-hero>.mode-logo{width:88px;height:88px}html[data-view-mode=phone] .journey-hero h1{font-size:25px}
/* Custom routes leave the compact-menu layout before rendering long mode pages. */
html[data-view-mode=phone] #utRoot:has(.journey-hero),html[data-view-mode=phone] #utRoot:has(.friend-quick){display:block!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y;scroll-padding-bottom:24px;padding-bottom:24px!important}
.friend-short-code{display:block;box-sizing:border-box;width:100%;font-size:clamp(26px,7vw,40px)!important;letter-spacing:.16em;text-transform:uppercase;font-weight:900;text-align:center;min-height:62px;margin:10px 0;color:#f4d694!important;background:#102e35!important;border:2px solid #d2b56b!important;border-radius:12px}.friend-quick .ut-controls{display:flex;flex-wrap:wrap}.friend-quick .btn{min-height:46px}.friend-quick h1{margin:8px 0 16px}