/* Visual reference: AION 2 Global's official /en-us/index and launch site.
   Original companion UI; official NC artwork is credited in docs/THEME.md. */
:root {
  color-scheme: dark;
  --ink: #eaf4ff;
  --muted: #a9b9d0;
  --line: #344d6b;
  --paper: #080f20;
  --nav: #060c19;
  --blue: #90e1ff;
  --cyan: #70d2ff;
  --good: #9be3c7;
  --amber: #ead19a;
  --radius: 5px;
  --display: Georgia, "Times New Roman", serif;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  background: #080f20;
  background-image: linear-gradient(180deg, #080f2070, #080f20 1000px), url("assets/aion2-atmosphere.jpg");
  background-position: center top;
  background-size: auto, 2560px auto;
  background-repeat: no-repeat;
}
::selection { background: #70d2ff; color: #071421; }
a, .text-button { color: #a0e5ff; }
button, a { transition: background-color .16s, border-color .16s, color .16s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #a7e9ff; outline-offset: 4px;
}
.skip { background: #0f1f3c; color: #eaf4ff; }
h1, .hero h2, .stage-label h2, .currency-card h2, .guide-intro h2, .modal-head h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.4px;
}
h1 {
  font-size: clamp(30px, 3.1vw, 44px);
  color: #edf9ff;
  text-shadow: 0 2px 3px #0009, 0 0 30px #70c8ff22;
}
.eyebrow { letter-spacing: 2.2px; }
.sidebar {
  background: linear-gradient(180deg, #080e1ef5, #050b17fc);
  border-right: 1px solid #334b6966;
  box-shadow: 10px 0 40px #0002;
}
.brand { margin-left: 8px; gap: 10px; }
.brand img { width: 44px; height: 44px; }
.brand strong {
  font-family: var(--display); font-size: 23px; font-weight: 400; letter-spacing: 3px;
  color: #e6f5ff; text-shadow: 0 0 18px #86dfff55;
}
.brand span { color: #a8c0d9; letter-spacing: 1.3px; font-size: 9px; }
.nav { gap: 6px; }
.nav button {
  border-radius: 3px; border: 1px solid transparent; position: relative; color: #a9bbd2;
}
.nav button.active {
  color: #e4f8ff;
  background: linear-gradient(90deg, #204869b3, #17314d40);
  border-color: #658aa460;
  box-shadow: inset 2px 0 #9de6ff, inset 0 1px #b0eaff0d;
}
.nav button.active:after {
  content: ""; width: 5px; height: 5px; background: #a0e8ff;
  position: absolute; right: 13px; transform: rotate(45deg); box-shadow: 0 0 10px #70d2ff;
}
.nav button.active svg { color: #96e2ff; }
.nav button:hover { background: #1b304c; color: #fff; }
.sidebar-bottom .small { color: #9fb2cd; }
.scope-pill { border-radius: 2px; border-color: #355473; color: #a4dcf5; background: #0d1a30; }
.scope-pill:before { background: #70d2ff; box-shadow: 0 0 9px #70d2ff; }
.topbar {
  background: #080f20c9; border-color: #54708f38; backdrop-filter: blur(12px);
}
.breadcrumb strong { color: #dcecff; }
.avatar { border-radius: 3px; color: #c1eaff; background: #18304c; border-color: #53728d; }
main { padding-top: 34px; }
.intro { margin-bottom: 28px; }
.intro .eyebrow { color: #9edbf5; }
.intro .eyebrow:before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin: 0 10px 2px 1px; transform: rotate(45deg); background: #b3e8ff;
  box-shadow: 0 0 10px #70d2ff55;
}
.intro p { color: #b2c5dd; }
.button {
  background: linear-gradient(180deg, #1d3550, #12263f);
  border-color: #58748f; color: #deefff; border-radius: 3px; min-height: 44px;
  box-shadow: inset 0 1px #e9f9ff10;
}
.button.primary {
  color: #061a2b;
  background: linear-gradient(135deg, #ddf7ff, #82c9ec);
  border-color: #c6f0ff; box-shadow: 0 0 24px #62bdff16, inset 0 0 0 2px #23446820;
}
.button.subtle { background: #0d1b2e; }
.button.danger { color: #ffb5b5; border-color: #794b56; background: #361e2b; }
.button:hover { filter: brightness(1.13); }
.setup-banner {
  border-radius: 4px; border-color: #567da26e;
  background: linear-gradient(100deg, #183658ed, #182540bd);
}
.setup-banner p { color: #b2c8df; }
.hero {
  min-height: 300px; padding: 34px;
  background: #0a1428; border: 1px solid #718ba5; border-radius: 4px;
  grid-template-columns: minmax(0, 1fr) 185px;
  box-shadow: 0 16px 40px #0004, 0 0 35px #3a94db0c;
  isolation: isolate;
}
.hero-art {
  position: absolute; inset: 0 0 0 32%; z-index: -3;
  background: url("assets/aion2-key-art.png") center center / cover no-repeat;
}
.hero:before {
  inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, #081326 0%, #081326f5 27%, #081326a6 49%, #08132610 76%), linear-gradient(0deg, #071121d9, transparent 70%);
  z-index: -2;
}
.hero:after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid #c1e6ff24; border-radius: 1px; z-index: -1;
}
.hero-copy { align-self: center; max-width: 490px; padding-right: 20px; }
.hero .eyebrow { color: #a2e6ff; font-size: 10px; letter-spacing: 1.7px; line-height: 1.8; }
.hero h2 { color: #f3faff; font-size: 32px; line-height: 1.15; text-shadow: 0 2px 6px #000c; }
.hero p { color: #c2d3e8; font-size: 13px; max-width: 440px; line-height: 1.7; }
.hero .hero-action { color: #b0e9ff; min-height: 32px; }
.progress-orbit { align-items: flex-end; justify-content: flex-end; padding-right: 4px; }
.orbit {
  width: 108px; height: 108px; padding: 3px;
  background: conic-gradient(#a8eaff var(--progress), #617c9c4d 0);
  box-shadow: 0 0 0 7px #07112199, 0 0 0 8px #a7dfff45, 0 0 34px #73bfff24;
}
.orbit-inner { background: #071121e6; }
.orbit-inner strong { font-family: var(--display); font-size: 29px; font-weight: 400; color: #e9f7ff; }
.orbit-inner span { color: #b4cbe3; letter-spacing: 1px; font-size: 8px; }
.reset-strip { color: #b5c5db; border-bottom: 1px solid #3b547247; margin-bottom: 22px; padding-bottom: 19px; }
.reset-strip svg { color: #86b8df; }
.reset-strip strong { color: #e1f2ff; }
.card {
  border-radius: 4px; border-color: #3d5878;
  background: linear-gradient(145deg, #13243ceF, #0c182bf7);
  box-shadow: 0 8px 28px #02061126, inset 0 1px #dbf3ff0a;
}
.card-head { border-bottom: 1px solid #36516f59; margin-bottom: -1px; }
.card-head h2 { font-family: var(--display); font-weight: 400; font-size: 23px; color: #e1f1ff; }
.card-head p { color: #b0c1d7; }
.segmented { border-radius: 3px; background: #060e1dc2; border: 1px solid #3e5874; padding: 3px; }
.segmented button { border-radius: 1px; color: #a8bcd3; min-height: 34px; }
.segmented button.active { color: #e4f6ff; background: #254766; box-shadow: inset 0 0 0 1px #78a5c45c; }
.task { border-color: #39506a6e; }
.task h3 { color: #e4effb; }
.task.done h3 { color: #9dafc5; }
.task.done { opacity: .76; }
.task-sub { color: #adbed4; }
.check { border-radius: 3px; border-color: #7695b4; background: #08182a; }
.check:hover { border-color: #c1efff; box-shadow: 0 0 13px #70d2ff24; }
.check[aria-checked="true"] { color: #b3f1df; background: #16453e; border-color: #6cae9d; }
.chip { border-radius: 2px; color: #b8e1ff; background: #1e3955; border: 1px solid #456c8c50; }
.chip.green { color: #b0ecd5; background: #153d37; border-color: #4d887b70; }
.chip.amber { color: #eed5a4; background: #3c3324; border-color: #9c825147; }
.chip.gray { color: #b8c7db; background: #253246; border-color: #56677a60; }
.icon-button { border-radius: 3px; color: #b4cde6; background: #132840; border-color: #4b6480; }
.icon-button:hover { color: #effaff; border-color: #9bcde8; background: #254566; }
.card-foot { color: #aabed5; background: #0914268c; border-color: #344c697a; }
.side-card h3 { color: #ddedfc; }
.side-card h3 svg { color: #93d6f5; }
.next-event .event-count, .event-card .big-count {
  color: #c3eeff; font-weight: 400; letter-spacing: .5px; text-shadow: 0 0 24px #63c3ff30;
}
.event-small { border-color: #38526e70; }
.tip-card { border-radius: 4px; border-color: #546487; background: linear-gradient(135deg, #1d2f4ce6, #25223de6); }
.tip-card p { color: #b8c4df; }
.resource-bar { background: #071324; height: 5px; border-radius: 1px; }
.resource-bar span { background: linear-gradient(90deg, #4176b3, #9ee5ff); border-radius: 1px; }
.resource-bar.warn span { background: linear-gradient(90deg, #a08453, #ecd596); }
.search, input, select, textarea {
  background: #091729; color: #e5effc; border: 1px solid #57718d; border-radius: 3px;
}
input::placeholder, textarea::placeholder { color: #9bacc2; opacity: 1; }
input[type="checkbox"] { accent-color: #90dfff; }
select option { background: #0c1b2e; color: #eaf4ff; }
.notice { border-radius: 3px; background: #332d21e6; border-color: #8d795652; color: #e4cea4; }
.notice.neutral { background: #172c44e8; border-color: #668fb25c; color: #b6cde5; }
.event-card { border-top-color: #7ca4c4; }
.event-card h3 { font-family: var(--display); font-weight: 400; font-size: 23px; }
.star { color: #afc5dd; }
.star.selected { color: #f4df9f; border-color: #917d53; background: #352e23; }
.unknown-count { color: #ddc7a7; }
.stage-label .step-index { color: #99dbfa; letter-spacing: 2px; }
.stage-label h2 { font-size: 24px; }
.stage.inactive { background: #121a29; border-color: #5f5f6b; }
.stage.inactive .step-index { color: #e1c593; }
.currency-card .eyebrow { color: #a0bdda; line-height: 1.7; }
.currency-card h2 { font-size: 27px; }
.currency-list li { border-color: #38516e75; }
.currency-list strong { color: #e2eefc; }
.rank { color: #bcecff; border: 1px solid #6e92b1; background: #1c3a56; border-radius: 2px; }
.currency-note, .details-box { border-radius: 3px; color: #b7c9de; background: #071326a3; border: 1px solid #3c567370; }
.settings-card h2 { color: #dcefff; font-family: var(--display); font-size: 23px; font-weight: 400; }
.app-foot { border-top: 1px solid #425b763f; padding-top: 22px; color: #a0b2cc; }
.overlay { background: #020817c9; backdrop-filter: blur(9px); }
.modal {
  color: #eaf4ff; background: linear-gradient(155deg, #1b304b, #0c192d 45%, #10192f);
  border: 1px solid #7895b3; border-radius: 5px; box-shadow: 0 25px 100px #0009, inset 0 1px #b5dcff33;
}
.modal-head { border-bottom: 1px solid #54718e70; padding-bottom: 18px; }
.modal-head h2 { font-size: 28px; color: #e9f7ff; }
.modal>p, .field small, .details-box strong { color: #b6c8dd; }
.field { color: #d2e2f3; }
.wallet-row { border-color: #405a776e; }
.wallet-row strong { color: #e3f2ff; }
.wallet-controls .icon-button { background: #234365; border-color: #698cad; color: #e3f7ff; }
.wallet-controls input { background: #071426; color: #c8efff; }
summary { color: #b9cfe7; cursor: pointer; }
#toast { background: #183750; border: 1px solid #84c0df; border-radius: 4px; color: #ecf8ff; box-shadow: 0 10px 36px #0008; }
.currency-filter button { background: #0b1b30; color: #b1c5dd; border-color: #48627f; border-radius: 3px; min-height: 38px; }
.currency-filter button.active { color: #d9f4ff; background: #234563; border-color: #83b7d8; }
.divider { border-color: #405b78; }
.mobile-brand { color: #e4f3ff; font-family: var(--display); font-weight: 400; text-shadow: 0 0 14px #70d2ff30; }
.bottom-nav { background: #081324f5; border-color: #54718e80; box-shadow: 0 -7px 25px #02071155; }
.bottom-nav button { color: #a7bdd6; border-radius: 3px; }
.bottom-nav button.active { color: #c1eeff; background: #214564; box-shadow: inset 0 2px #9addfa; }
@media (max-width:1180px) {
  .hero { padding: 28px; grid-template-columns: minmax(0,1fr) 125px; }
  .hero h2 { font-size: 29px; }
  .hero-art { left: 23%; }
}
@media (max-width:970px) {
  .brand img { width: 40px; height: 40px; }
  .brand { margin-left: 0; }
  .nav button.active:after { display: none; }
  .hero { min-height: 285px; }
}
@media (max-width:760px) {
  .intro h1 { font-size: 32px; }
  .intro>.button { font-size: 12px; }
  .hero h2 { font-size: 29px; }
}
@media (max-width:560px) {
  .topbar { padding-inline: 18px; }
  .mobile-brand { font-size: 18px; letter-spacing: 2px; }
  .intro { display: grid; grid-template-columns: 1fr; gap: 17px; }
  .intro h1 { font-size: 32px; line-height: 1.12; max-width: 330px; }
  .intro p { font-size: 13px; }
  .intro>.button { justify-self: start; font-size: 12px; padding: 10px 15px; min-height: 44px; }
  .intro .eyebrow { font-size: 10px; letter-spacing: 1.6px; }
  .setup-banner { border-radius: 3px; }
  .hero { min-height: 335px; padding: 24px 21px; border-radius: 3px; grid-template-columns: minmax(0,1fr) 76px; align-items: end; }
  .hero-art { inset: 0; background-size: cover; background-position: center top; }
  .hero:before { background: linear-gradient(180deg, #06112515 0%, #0813267d 29%, #081326f0 62%, #081326 100%); }
  .hero-copy { align-self: end; padding: 115px 0 0; }
  .hero .eyebrow { font-size: 9px; line-height: 1.75; letter-spacing: .8px; margin-bottom: 11px; }
  .hero h2 { font-size: 26px; line-height: 1.12; }
  .hero p { font-size: 12px; line-height: 1.6; margin-top: 10px; }
  .hero .hero-action { font-size: 12px; margin-top: 13px; text-align: left; }
  .progress-orbit { padding: 0 0 8px 7px; }
  .orbit { width: 63px; height: 63px; padding: 2px; box-shadow: 0 0 0 4px #07112199, 0 0 0 5px #a7dfff45; }
  .orbit-inner strong { font-size: 22px; }
  .orbit-inner strong span { font-size: 12px!important; }
  .orbit-inner span { font-size: 6px; letter-spacing: .3px; margin-top: 3px; }
  .reset-strip { padding-bottom: 18px; margin-bottom: 20px; font-size: 11px; }
  .reset-strip>div { gap: 6px; }
  .card, .tip-card, .notice { border-radius: 3px; }
  .card-head h2 { font-size: 23px; }
  .card-head p { font-size: 12px; }
  .task h3 { font-size: 14px; }
  .task-sub { font-size: 12px; }
  .task-actions .icon-button { width: 36px; height: 36px; }
  .chip { font-size: 10px; }
  .card-foot { font-size: 11px; }
  .event-grid { grid-template-columns: 1fr; gap: 14px; }
  .event-card { min-height: 205px; padding: 22px; }
  .event-card h3 { font-size: 24px; }
  .event-card .big-count { font-size: 32px; margin-top: 14px; }
  .event-card .time-local { font-size: 12px; }
  .event-card .event-bottom .text-button { font-size: 12px; }
  .event-top .chip { font-size: 10px; }
  .event-top { margin-bottom: 10px; }
  .event-top .icon-button { width: 38px; height: 38px; }
  .unknown-count { font-size: 15px; }
  .stage-label h2 { font-size: 25px; }
  .currency-card h2 { font-size: 27px; }
  .settings-card h2 { font-size: 24px; }
  .notice { font-size: 12px; }
  .modal { border-radius: 4px; padding: 22px; }
  .modal-head h2 { font-size: 27px; }
  .form-grid input, .form-grid select, .form-grid textarea, .wallet-controls input { font-size: 16px; }
  .wallet-controls .icon-button { width: 38px; height: 44px; }
  .wallet-controls input { min-height: 44px; width: 66px; }
  .wallet-row strong { font-size: 13px; }
  .wallet-row .small { font-size: 11px; }
  .bottom-nav button { font-size: 10px; }
  .app-foot { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) { button,a { transition: none; } }
/* Endgame queue: compact, action-first. */
main{max-width:1220px}.page-note{font-size:12px;color:var(--muted);margin:-12px 0 24px}.compact-hero{min-height:210px;grid-template-columns:minmax(0,1fr) 120px;padding:30px;margin-bottom:18px}.compact-hero .hero-copy{padding:0;max-width:560px}.compact-hero h2{font-size:29px;max-width:490px}.compact-hero .hero-art{left:35%;opacity:.82}.daily-progress{align-self:end;z-index:1;text-align:right}.daily-progress>strong{display:block;font-family:var(--display);font-weight:400;font-size:42px;color:#e5f8ff}.daily-progress>strong span{font-size:22px;color:#b5cce1}.daily-progress>span{font-size:8px;letter-spacing:1.6px;color:#a7c2db}.resource-ribbon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #375675;background:#0b1b30a8;margin-bottom:24px;border-radius:4px}.resource-ribbon button{text-align:left;padding:17px 22px;border-right:1px solid #375675}.resource-ribbon button:last-child{border-right:0}.resource-ribbon button:hover{background:#23405a65}.resource-ribbon span{font-size:11px;color:var(--muted);display:block}.resource-ribbon strong{font-size:25px;display:block;font-weight:500;font-variant-numeric:tabular-nums;color:#d8f3ff;margin:4px 0}.resource-ribbon small{font-size:12px;font-weight:400;color:#9cb3cb;margin-left:6px}.resource-ribbon .refill-label{font-size:10px;color:#b6d8e8}.refill-label [data-countdown]{display:inline;font:inherit;color:inherit}.queue-list{padding:0 24px 10px}.queue-row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 0;border-top:1px solid #35516d80}.queue-row.next-up{padding-top:26px;padding-bottom:26px}.queue-number{font-size:11px;font-variant-numeric:tabular-nums;color:#718ba8;align-self:start;padding-top:22px}.next-up .queue-number{color:#b9edff}.queue-copy h3{font-weight:500;font-size:16px;line-height:1.5}.queue-copy p{font-size:12px;color:#afc7dd;line-height:1.6;margin-top:4px}.queue-kicker{font-size:8px;letter-spacing:1.6px;font-weight:600;color:#92abc6;margin-bottom:5px;text-transform:uppercase}.next-up .queue-kicker{color:#a0e5ff}.queue-meta{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:7px;color:#91a6c0;font-size:10px}.queue-meta:empty{display:none}.queue-meta>span+span{border-left:1px solid #4c6682;padding-left:12px}.queue-meta span[data-countdown]{font:inherit;color:inherit}.info-link{display:inline-grid;vertical-align:middle;place-items:center;min-width:32px;min-height:32px;margin-left:2px;color:#8caac4;text-decoration:none}.info-link:hover{color:#d7f5ff}.info-link svg{width:15px;height:15px}.complete-button{min-height:48px;min-width:126px;padding:12px 18px;border:1px solid #a9dced;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:650;color:#0b2134;background:linear-gradient(150deg,#d5f4ff,#8bc4e5);box-shadow:inset 0 0 0 2px #30587c20,0 3px 0 #3b6c8c,0 5px 15px #0004;transition:transform .12s,box-shadow .12s,background .12s}.complete-button svg{width:18px}.complete-button:hover{background:linear-gradient(150deg,#eefbff,#b6e3f8);box-shadow:inset 0 0 0 2px #30587c20,0 3px 0 #3b6c8c,0 0 24px #7fd8ff40}.complete-button:active{transform:translateY(3px) scale(.98);box-shadow:inset 0 0 0 2px #30587c20,0 0 12px #7fd8ff30}.complete-button.completed{background:#a4e9d0;border-color:#d0ffe9;color:#143f35;animation:completion .3s ease-out}.complete-button:disabled:not(.completed){box-shadow:none;opacity:.4}.compact-details{margin-top:18px;border-top:1px solid #36557480;padding-top:17px}.compact-details summary{font-size:12px;min-height:36px}.quiet-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;font-size:12px;border-bottom:1px solid #35516d60}.quiet-row small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.quiet-row>span svg{width:14px;height:14px;vertical-align:middle}.unavailable{color:#b7a987;margin-top:12px}.next-unlock{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#a6bbd2;padding:22px 0 8px}.next-unlock svg{width:15px}.next-unlock strong{font-weight:500;color:#d0e2f2}.buy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.buy-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:24px 24px 8px}.buy-head .eyebrow{color:#88a5c5;font-size:8px;letter-spacing:1.4px;margin-bottom:9px}.buy-head h2{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.22}.buy-card ol{counter-reset:buy;list-style:none;margin:0;padding:0 24px 12px}.buy-card li{display:flex;gap:13px;padding:17px 0;border-bottom:1px solid #35516d70;counter-increment:buy}.buy-card li:before{content:counter(buy,decimal-leading-zero);font-size:10px;color:#a7ddf6;padding-top:3px}.buy-card li:last-child{border:0}.buy-card li strong{font-size:13px;font-weight:500;line-height:1.5}.buy-card li p{font-size:11px;color:#a9c0d8;margin-top:5px;line-height:1.6}.price{display:block;font-size:10px;color:#dcc495;margin-top:9px}.buy-foot{font-size:9px;color:#8da9c3;border-top:1px solid #35516d70;padding:12px 24px;background:#0815264d}.shop-empty{font-size:12px;color:#abc0d7;padding:8px 24px 26px}.settings-card{padding:25px}.settings-card>h2{margin-bottom:15px}.settings-card .button-row{margin:20px 0}.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}.form-submit{margin-top:23px}.form-grid .full{grid-column:1/-1}.field{display:flex;flex-direction:column;gap:7px;font-size:12px}.balance-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 15px}.balance-fields input{font-size:24px;text-align:center;min-height:64px;color:#d6f4ff}.form-details{margin-top:20px;border-top:1px solid #415c7880;padding-top:15px}.form-details summary{font-size:12px;min-height:36px}.form-details[open] summary{margin-bottom:10px}.form-details>p{margin-top:12px}.form-details input,.form-details select{font-size:12px}.toggle-fields{display:grid;gap:15px;margin:22px 0}.toggle-fields label{display:flex;gap:10px;align-items:center;font-size:12px}.toggle-fields input{min-height:20px}.wallet-row{gap:14px;padding:19px 0}.wallet-row>div:first-child{min-width:0}.wallet-row strong{font-size:13px}.wallet-row .small{font-size:10px}.wallet-controls{display:flex;align-items:center;gap:8px}.balance-button{font-size:23px;min-width:64px;min-height:44px;color:#bce9ff;background:#091a2c;border:1px solid #486987;border-radius:3px;font-variant-numeric:tabular-nums}.add-extra{font-size:11px;padding:8px 10px;min-width:64px}.wallet-section{display:flex;justify-content:space-between;align-items:center;margin:28px 0 7px;gap:12px}.wallet-section h3{font-family:var(--display);font-size:21px;font-weight:400}.wallet-note{margin-top:25px}.quick-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.redeem{margin-bottom:15px}.modal>form{margin-top:18px}.modal{max-width:640px}.settings-grid{align-items:start}.bottom-nav{grid-template-columns:repeat(4,1fr)}
@keyframes completion{50%{transform:scale(1.06);box-shadow:0 0 28px #8fe4c775}100%{transform:scale(1)}}
@media(max-width:1100px){.queue-row{gap:10px;grid-template-columns:20px minmax(0,1fr) auto}.complete-button{min-width:112px;padding:12px}.queue-copy h3{font-size:14px}.buy-grid{gap:16px}.buy-head,.buy-card ol{padding-left:20px;padding-right:20px}.resource-ribbon button{padding:16px}}
@media(max-width:760px){.compact-hero{min-height:215px}.buy-grid{grid-template-columns:1fr}.queue-list{padding:0 20px 10px}.settings-grid{grid-template-columns:1fr}.complete-button{min-width:115px}.intro{align-items:center}.resource-ribbon strong{font-size:23px}}
@media(max-width:560px){.intro{display:flex;align-items:center;gap:12px}.intro h1{font-size:29px;max-width:250px}.intro>.button{font-size:11px;padding:10px;min-width:105px;align-self:end}.intro>.button svg{width:16px}.intro .eyebrow{font-size:9px}.compact-hero{min-height:230px;padding:23px 20px;grid-template-columns:minmax(0,1fr) 63px}.compact-hero .hero-copy{padding-top:70px;align-self:end}.compact-hero .hero-art{inset:0;background-position:center 29%;opacity:.8}.compact-hero:before{background:linear-gradient(180deg,#08132610,#081326b3 40%,#081326 100%)}.compact-hero h2{font-size:23px}.compact-hero .eyebrow{font-size:8px;margin-bottom:10px}.daily-progress>strong{font-size:29px}.daily-progress>strong span{font-size:16px}.daily-progress>span{font-size:6px;letter-spacing:.5px}.resource-ribbon button{padding:13px 11px}.resource-ribbon button>span{font-size:9px}.resource-ribbon strong{font-size:23px}.resource-ribbon small{font-size:10px}.resource-ribbon .refill-label{font-size:8px}.queue-row{grid-template-columns:15px minmax(0,1fr);gap:8px 10px;padding:19px 0}.queue-copy h3{font-size:15px;line-height:1.35}.queue-copy p{font-size:11px}.queue-row>.complete-button,.queue-row>.button{grid-column:2;justify-self:stretch;margin-top:7px;min-height:46px}.queue-kicker{font-size:7px}.queue-number{font-size:9px}.queue-meta{font-size:9px;gap:5px 10px}.queue-meta>span+span{padding-left:10px}.queue-list{padding:0 18px 8px}.queue-card .card-head{padding:20px 18px}.card-head h2{font-size:22px}.card-head p{font-size:10px}.info-link{min-width:30px;min-height:30px}.wallet-controls{gap:5px}.balance-button{min-width:52px;font-size:21px}.add-extra{min-width:55px;font-size:10px;padding:7px}.wallet-row strong{font-size:12px}.wallet-row .small{font-size:9px}.balance-fields{grid-template-columns:1fr 1fr}.balance-fields .field{font-size:10px}.form-details input,.form-details select{font-size:16px}.buy-head h2{font-size:25px}.buy-card li strong{font-size:13px}.quiet-row{font-size:11px;gap:10px}.app-foot{display:block;line-height:1.9}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.complete-button{transition:none;animation:none}.complete-button.completed{animation:none}}

.queue-copy .task-how{color:#d1deed;font-size:11px;line-height:1.65;margin-top:4px}.queue-copy .task-why{color:#9ac9d9;font-size:11px;margin-top:5px}

.linked-strip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 20px;font-size:11px;color:#a3bdd4}.linked-strip .text-button{display:inline-flex;align-items:center;gap:6px}.linked-strip svg{width:14px;height:14px}.linked-strip>span{font-size:10px}.linked-strip>button:last-child{margin-left:auto}.link-callout{padding:18px;background:#10294280;border:1px solid #4b6c8777;border-radius:4px;margin-bottom:22px}.link-callout strong{font-family:var(--display);font-size:20px;font-weight:400}.link-callout p{font-size:12px;color:#a9bfd6;margin:6px 0 14px}.link-callout .text-button{margin-left:15px}.character-summary{display:flex;gap:42px;margin:22px 0 15px}.character-summary span{display:block;letter-spacing:1.6px;font-size:9px;color:#93aec9}.character-summary strong{font-family:var(--display);font-size:39px;font-weight:400;color:#d5f1ff}.character-detail{padding:18px 0;border-top:1px solid #46637d77;margin-top:10px}.character-detail summary{font-family:var(--display);font-size:20px;margin-bottom:15px}.board-progress{display:block;width:100%;padding:12px 0;text-align:left}.board-progress>span{font-size:12px;display:flex;justify-content:space-between;margin-bottom:8px}.board-progress strong{font-size:11px;font-weight:400;color:#91b3cc}.progress-chart{margin:24px 0;padding:20px;background:#091a2f;border:1px solid #3f607a;border-radius:4px}.progress-chart p{margin-top:11px;font-size:10px}.gear-list{display:grid;gap:5px}.gear-item{display:grid;grid-template-columns:75px minmax(0,1fr) 60px;gap:9px;text-align:left;align-items:center;padding:11px 7px;background:#0c1b30;border:1px solid #304b6555}.gear-item:hover{background:#19334c}.gear-item>span,.gear-item small{font-size:9px;color:#91acc5}.gear-item strong{font-size:12px;font-weight:500}.gear-item em{font-style:normal;color:#9ee6ff}.gear-item small svg{width:10px;height:10px;vertical-align:middle}.skill-category{margin:20px 0 5px;font-size:13px;color:#b9e8fc;font-weight:500}.import-error{font-size:12px;color:#f1bdac;margin-top:15px;line-height:1.7}.queue-copy h3 .info-link{margin-bottom:-2px}@media(max-width:560px){.linked-strip{gap:10px;margin-bottom:18px}.linked-strip .text-button{font-size:10px}.linked-strip>span{font-size:9px}.character-summary{gap:25px}.character-summary strong{font-size:33px}.gear-item{grid-template-columns:63px minmax(0,1fr) 45px;gap:6px;padding:10px 5px}.gear-item strong{font-size:11px}.gear-item>span,.gear-item small{font-size:8px}.link-callout .text-button{display:block;margin:14px 0 0}}

.membership-fields{margin-top:20px;padding:18px;border:1px solid var(--border);border-radius:12px;background:rgba(30,75,95,.12)}.membership-fields .field+.field{margin-top:14px}.membership-fields p{margin:12px 0 6px}.reset-strip{flex-wrap:wrap}.coverage-row{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}.coverage-row small,.coverage-row>strong span{display:block;margin-top:5px;color:var(--muted)}.coverage-row>strong{white-space:nowrap;text-align:right}.coverage-row>div{min-width:0}

.character-results{margin:20px 0}.character-results h3{font-size:18px}.character-match{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}.character-match span,.character-match small{display:block;color:var(--muted);margin-top:5px}.character-match>div{min-width:0;overflow-wrap:anywhere}.character-match button{flex-shrink:0}@media(max-width:500px){.character-match{align-items:flex-start;flex-direction:column}.character-match button{width:100%}}

.queue-meta .event-urgency{color:#a8eeff;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums}
.queue-meta .event-urgency [data-countdown]{display:inline;font:inherit}
.queue-meta .text-button{font-size:10px;min-height:30px}

/* Responsive containment: intrinsic form/text widths must not widen the viewport. */
.workspace, main, .field, .hero-copy, .queue-copy, .topbar-right,
.profile-button, .profile-button > div, .settings-grid > *, .form-grid > *,
.balance-fields > *, .quiet-row > *, .linked-strip > * { min-width: 0; }
.form-grid, .balance-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.modal { width: 640px; min-width: 0; max-width: 100%; overscroll-behavior: contain; }
.modal-head h2, .quiet-row, .queue-copy, .gear-item, .source-item,
.notice, .app-foot, .linked-strip { overflow-wrap: anywhere; }
.modal-head > .icon-button, .profile-button > svg { flex-shrink: 0; }
.linked-strip .text-button, .hero-action, .board-progress { white-space: normal; }
.profile-button strong, .profile-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-ribbon button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.character-summary, .resource-label, .wallet-section, .quiet-row { flex-wrap: wrap; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .workspace { margin-left: 0; width: 100%; }
  .topbar { gap: 12px; height: auto; min-height: 68px; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .breadcrumb { display: none; }
  .mobile-brand { display: flex; align-items: center; flex-shrink: 0; gap: 7px; font-size: 14px; letter-spacing: 1.7px; }
  .mobile-brand img { width: 30px; height: 30px; }
  .topbar-right { flex: 1; justify-content: flex-end; }
  .profile-button { max-width: 100%; padding: 4px 0; gap: 6px; min-height: 44px; }
  .profile-button .avatar { display: none; }
  .profile-button strong { font-size: 13px; }
  .profile-button span { font-size: 11px; }
  .profile-button > svg { width: 14px; }
  main { padding: 24px max(16px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .bottom-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; border-top: 1px solid #54718e80; padding: 7px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 48px; padding: 7px 4px; font-size: 11px; }
  .bottom-nav svg { width: 20px; height: 20px; }
  .overlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .modal { padding: 20px; max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  /* 16px controls prevent Safari focus zoom; pinch zoom stays enabled. */
  input, select, textarea, .form-grid input, .form-grid select, .form-details input,
  .wallet-controls input { font-size: 16px; }
  .button { white-space: normal; max-width: 100%; }
  .loading { padding: 48px 20px; }
  #toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .intro { flex-wrap: wrap; align-items: flex-start; }
  .intro > div { flex: 1 1 220px; min-width: 0; }
  .intro h1 { max-width: none; font-size: 30px; }
  .intro > .button { align-self: flex-start; font-size: 13px; }
  .form-grid, .balance-fields { grid-template-columns: minmax(0, 1fr); }
  .modal-head h2 { font-size: 25px; }
  .form-grid .field, .field { font-size: 13px; }
  .compact-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .daily-progress { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
  .daily-progress > span { font-size: 11px; letter-spacing: 1px; }
  .compact-hero .eyebrow { font-size: 11px; }
  .resource-ribbon button { padding: 14px 10px; }
  .resource-ribbon button > span, .resource-ribbon .refill-label { font-size: 12px; line-height: 1.5; }
  .resource-ribbon strong { font-size: 24px; }
  .resource-ribbon small { font-size: 12px; display: block; margin: 0; }
  .queue-copy p, .queue-copy .task-how, .queue-copy .task-why { font-size: 13px; line-height: 1.6; }
  .queue-kicker, .queue-number, .queue-meta { font-size: 11px; }
  .queue-card .card-head p, .linked-strip > span, .linked-strip .text-button { font-size: 12px; }
  .wallet-row { flex-wrap: wrap; gap: 10px; }
  .wallet-row > div:first-child { flex-basis: 150px; }
  .wallet-row strong { font-size: 14px; }
  .wallet-row .small { font-size: 12px; }
  .wallet-controls { margin-left: auto; }
  .wallet-controls button { min-height: 44px; }
  .quiet-row .button { flex-shrink: 0; }
  .settings-card { padding: 20px; }
  .app-foot { font-size: 11px; }
}

@media (max-width: 380px) {
  .resource-ribbon { grid-template-columns: minmax(0, 1fr); }
  .resource-ribbon button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; border-right: 0; border-bottom: 1px solid #375675; }
  .resource-ribbon button:last-child { border-bottom: 0; }
  .resource-ribbon strong { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .resource-ribbon .refill-label { grid-column: 1; }
  .mobile-brand { font-size: 12px; letter-spacing: 1px; }
  .mobile-brand img { width: 24px; height: 24px; }
}

/* Game artwork: small, consistent item frames and identifiable activity scenes. */
.game-art {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 48px; height: 48px; overflow: hidden; vertical-align: middle;
  border: 1px solid #7395b663; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 80%, #2a4965, #0a172a 75%);
  box-shadow: inset 0 0 0 2px #05101d, 0 3px 12px #0003;
}
.game-art > svg { width: 24px; height: 24px; color: #7195b4; }
.game-art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #0a172a; }
.game-art > img[hidden] { display: none; }
.game-art.scene-art > img { object-fit: contain; object-position: var(--art-position,50% 50%); padding: 0; background: transparent; }
.game-art.scene-art { background: #11253c; }
.resource-ribbon { gap: 12px; border: 0; background: none; }
.resource-ribbon > button { position: relative; border: 1px solid #50739475; border-radius: 10px; padding: 18px; background: linear-gradient(140deg,#152c46e6,#0b182bd9); box-shadow: inset 0 1px #d3ecff10,0 8px 20px #0002; }
.resource-ribbon > button:last-child { border-right: 1px solid #50739475; }
.resource-ribbon > button:hover { border-color: #8ac9e4; background: #19364e; }
.resource-ribbon .resource-art { display: inline-grid; width: 48px; height: 48px; margin-bottom: 12px; }
.resource-ribbon .resource-name { font-size: 12px; line-height: 1.5; color: #c0d5e9; }
.resource-ribbon strong { font-size: 30px; letter-spacing: -.6px; }
.resource-ribbon small { display: inline; margin-left: 5px; font-size: 12px; }
.resource-ribbon .refill-label { font-size: 11px; }
.queue-card { background: linear-gradient(160deg,#102239ec,#091629f5); border-color: #57799766; box-shadow: 0 12px 35px #01071440; border-radius: 12px; }
.queue-row { grid-template-columns: 72px minmax(0,1fr) auto; gap: 18px; }
.queue-number { position: relative; padding: 0; align-self: start; margin-top: 4px; }
.activity-art { width: 72px; height: 72px; border-radius: 10px; }
.queue-rank { position: absolute; bottom: -5px; right: -4px; display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; background: #0c1b2e; border: 1px solid #507394; border-radius: 5px; font-size: 10px; color: #a5bdd4; }
.next-up .activity-art { border-color: #a6dcf0; box-shadow: 0 0 24px #77cfff20; }
.next-up .queue-rank { background: #a8def1; border-color: #d9f8ff; color: #0c2338; }
.queue-copy h3 { font-size: 17px; }
.queue-kicker { font-size: 10px; }
.queue-copy .task-how { color: #d8e7f4; }
.queue-copy .task-why { color: #9fb9cf; }
.event-card { overflow: hidden; border-radius: 12px; background: linear-gradient(155deg,#182e48,#091629); }
.event-art { display: grid; width: calc(100% + 48px); height: 128px; margin: -24px -24px 20px; border: 0; border-radius: 0; background: radial-gradient(ellipse,#204361,#0a192d); box-shadow: none; }
.event-art:not(.scene-art) > img { padding: 28px; background: transparent; }
.event-art.scene-art { height: 168px; background: radial-gradient(ellipse,#204361,#0a192d); }
.event-card h3 { font-family: var(--display); font-size: 25px; font-weight: 400; }
.event-card .big-count { font-variant-numeric: tabular-nums; color: #d5f3ff; }
.buy-card { border-radius: 12px; background: linear-gradient(145deg,#12243be6,#0a172af5); overflow: hidden; }
.buy-head { align-items: center; padding-bottom: 18px; gap: 14px; }
.buy-head > div { flex: 1; min-width: 0; }
.currency-art { width: 54px; height: 54px; border-radius: 10px; }
.buy-head h2 { font-size: 24px; }
.buy-head .eyebrow { font-size: 9px; line-height: 1.6; }
.buy-card li { align-items: flex-start; gap: 12px; }
.buy-card li:before { display: none; }
.buy-card li > div { min-width: 0; }
.purchase-art { width: 44px; height: 44px; }
.buy-card li strong { font-size: 14px; }
.buy-card li p { font-size: 12px; }
.buy-card li:first-child .purchase-art { border-color: #abcae0; }
.buy-foot { font-size: 10px; line-height: 1.6; }
.wallet-label { display: flex; align-items: center; gap: 12px; }
.wallet-label > div { min-width: 0; }
.wallet-art { width: 44px; height: 44px; }
.coverage-row { gap: 12px; }
.coverage-row > div { flex: 1; }
.coverage-art { width: 44px; height: 44px; }
.gear-item { grid-template-columns: 42px 75px minmax(0,1fr) 60px; }
.gear-art { width: 42px; height: 42px; border-radius: 5px; }
.skill-row { gap: 12px; flex-wrap: nowrap; }
.skill-row > span:nth-child(2) { flex: 1; }
.skill-art { width: 38px; height: 38px; }
.inspect-art { width: 88px; height: 88px; margin-bottom: 20px; }
.section-art-title { display: flex; align-items: center; gap: 13px; font-family: var(--display); font-weight: 400; font-size: 24px; }
.section-art-title .game-art { width: 42px; height: 42px; }
.art-credits { display: grid; gap: 10px; }
.art-credits > a { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 10px 0; border-bottom: 1px solid #34516b; font-size: 13px; }
.art-credits > a > span:nth-child(2) { flex: 1; min-width: 0; }
.art-credits small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.art-credits > a > svg { width: 16px; flex: 0 0 auto; }
.app-foot .text-button { font: inherit; text-decoration: underline; min-height: 30px; }
@media (max-width: 760px) {
  .queue-row { grid-template-columns: 56px minmax(0,1fr); gap: 12px; }
  .activity-art { width: 56px; height: 56px; }
  .queue-row > .complete-button, .queue-row > .button { grid-column: 2; justify-self: stretch; min-height: 48px; margin-top: 4px; }
  .queue-copy h3 { font-size: 16px; }
  .resource-ribbon { gap: 8px; }
  .resource-ribbon > button { padding: 14px 12px; }
  .event-art { height: 112px; }
}
@media (max-width: 560px) {
  .resource-ribbon > button { padding: 12px 10px; }
  .resource-ribbon .resource-art { width: 42px; height: 42px; margin-bottom: 9px; }
  .resource-ribbon .resource-name { font-size: 12px; }
  .resource-ribbon strong { font-size: 26px; }
  .resource-ribbon small { display: block; margin-left: 0; font-size: 11px; }
  .resource-ribbon .refill-label { font-size: 11px; }
  .queue-list { padding: 0 14px 8px; }
  .queue-row { grid-template-columns: 44px minmax(0,1fr); gap: 11px; }
  .activity-art { width: 44px; height: 44px; border-radius: 7px; }
  .queue-rank { min-width: 20px; height: 18px; font-size: 9px; }
  .queue-copy h3 { font-size: 16px; }
  .queue-copy p, .queue-copy .task-how, .queue-copy .task-why { font-size: 13px; }
  .queue-row > .complete-button, .queue-row > .button { grid-column: 1 / -1; margin-top: 8px; }
  .queue-kicker { font-size: 10px; letter-spacing: 1.2px; }
  .event-art { width: calc(100% + 32px); margin: -16px -16px 18px; }
  .buy-head { padding: 20px 16px 12px; gap: 12px; }
  .buy-head h2 { font-size: 23px; }
  .buy-card ol { padding: 0 16px 12px; }
  .buy-foot { padding: 12px 16px; }
  .currency-art { width: 46px; height: 46px; }
  .purchase-art { width: 40px; height: 40px; }
  .wallet-label { gap: 10px; }
  .wallet-art { width: 38px; height: 38px; }
  .gear-item { grid-template-columns: 38px minmax(0,1fr) auto; gap: 4px 10px; padding: 10px; }
  .gear-item > .gear-art { grid-row: 1 / 3; width: 38px; height: 38px; }
  .gear-item > span:not(.gear-art) { grid-column: 2; font-size: 10px; }
  .gear-item > strong { grid-column: 2; grid-row: 2; font-size: 12px; }
  .gear-item > small { grid-column: 3; grid-row: 1 / 3; max-width: 55px; font-size: 10px; }
}
@media (max-width: 380px) {
  .resource-ribbon > button { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 2px 12px; border: 1px solid #50739475; }
  .resource-ribbon > button:last-child { border-bottom: 1px solid #50739475; }
  .resource-ribbon .resource-art { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .resource-ribbon .resource-name { grid-column: 2; }
  .resource-ribbon strong { grid-column: 3; grid-row: 1 / 3; }
  .resource-ribbon .refill-label { grid-column: 2; }
}
.balance-art { width: 64px; height: 64px; margin-bottom: 2px; }
/* Match the card's inset so artwork stays within its clipped frame. */
.event-card { padding: 22px; }

/* All six allowances remain visible without oversized balance cards. */
.resource-ribbon.all-resources { grid-template-columns: repeat(3,minmax(0,1fr)); }
.resource-ribbon.all-resources > button { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 4px 10px; padding: 13px; }
.all-resources .resource-art { width: 32px; height: 32px; margin: 0; grid-column: 1; grid-row: 1 / 3; }
.all-resources .resource-name { grid-column: 2; grid-row: 1; font-size: 12px; }
.all-resources strong { grid-column: 3; grid-row: 1 / 3; font-size: 23px; margin: 0; }
.all-resources small { display: block; margin: 0; font-size: 10px; }
.all-resources .refill-label { grid-column: 2; grid-row: 2; font-size: 10px; }
.event-description { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 9px; }
.event-schedule { color: #c1deef; font-size: 12px; margin-top: 12px; }
.event-schedule-status { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 8px; }
.event-schedule-status.paused { color: var(--amber); }
.event-resource { display: grid; gap: 7px; margin-top: 12px; font-size: 12px; color: #c1deef; }
.event-resource .text-button { justify-self: start; min-height: 32px; text-align: left; }
.balance-help { margin: 12px 0; }
@media(max-width: 700px) {
  .resource-ribbon.all-resources { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .resource-ribbon.all-resources > button { grid-template-columns: 30px minmax(0,1fr); gap: 5px 8px; padding: 12px; }
  .all-resources .resource-art { grid-column: 1; grid-row: 1; }
  .all-resources strong { grid-column: 2; grid-row: 1; justify-self: end; font-size: 23px; }
  .all-resources small { display: inline; font-size: 10px; margin-left: 4px; }
  .all-resources .resource-name { grid-column: 1 / -1; grid-row: 2; font-size: 11px; }
  .all-resources .refill-label { grid-column: 1 / -1; grid-row: 3; font-size: 10px; }
}
.event-art { width: calc(100% + 44px); margin: -22px -22px 20px; }
@media (max-width: 560px) {
  .event-card { padding: 16px; }
  .event-art { width: calc(100% + 32px); margin: -16px -16px 18px; }
}
.sound-card { padding:22px; margin:0 0 24px; }
.sound-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sound-heading h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:20px; }
.sound-heading h2 svg { width:20px; height:20px; color:var(--cyan,#8bd9ed); }
.sound-heading p { margin:7px 0 0; }
.sound-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
.sound-volume { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted,#a8b7c8); }
.sound-volume select { width:auto; min-height:44px; padding:8px 30px 8px 12px; font-size:16px; }
.sound-note { margin:16px 0 0; line-height:1.6; }
@media(max-width:560px) {
 .sound-card { padding:16px; }
 .sound-heading { flex-wrap:wrap; }
 .sound-controls { display:grid; grid-template-columns:minmax(0,1fr); }
 .sound-volume { justify-content:space-between; }
 .sound-volume select { min-width:130px; }
}
.topbar-right { gap:14px; }
.character-sync { min-height:44px; flex-shrink:0; gap:8px; white-space:nowrap; border-color:#73cfe86b; background:#15374c; color:#cef6ff; }
.character-sync:hover:not(:disabled) { background:#204a62; border-color:#91e5ff; }
.character-sync.is-syncing svg { animation:character-sync-spin 1s linear infinite; }
@keyframes character-sync-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .character-sync.is-syncing svg { animation:none; } }
@media(max-width:560px) {
 .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:5px; }
 .topbar-right { display:contents; }
 .topbar .mobile-brand { grid-column:1; grid-row:1; }
 .topbar .character-sync { grid-column:2; grid-row:1; padding:9px 11px; font-size:12px; }
 .topbar .profile-button { grid-column:1 / -1; grid-row:2; justify-self:end; min-height:44px; }
}
.hero .hero-target-reason { margin:10px 0 0; font-size:15px; color:#d7edfb; line-height:1.5; }
.hero .hero-target-wait { margin:6px 0 0; font-size:12px; color:var(--amber); }
.hero h2 .info-link { vertical-align:middle; }
.target-auto { margin-top:16px; width:100%; justify-content:center; min-height:48px; }
.target-group-label { margin:22px 0 10px; font-size:13px; color:var(--muted); }
.gear-target-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gear-target-choice { display:flex; align-items:center; gap:9px; min-width:0; min-height:66px; border:1px solid var(--line); border-radius:6px; background:#101e31; text-align:left; padding:10px; }
.gear-target-choice:hover:not(:disabled), .gear-target-choice.selected { border-color:#88ddff; background:#18394b; }
.gear-target-choice > span:not(.game-art) { min-width:0; flex:1; font-size:13px; }
.gear-target-choice small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.gear-target-choice > svg { width:16px; height:16px; color:var(--cyan); }
.gear-target-choice .target-slot-art { width:36px; height:36px; flex:0 0 36px; }
@media(max-width:560px) {
 .gear-target-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .gear-target-choice { gap:7px; padding:9px; }
 .hero .hero-target-reason { font-size:13px; }
}

/* Character progression: original-ratio artwork and a slot-first phone layout. */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.character-overview { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(0,1.4fr); gap:20px; align-items:start; margin-bottom:24px; }
.character-profile { display:grid; grid-template-columns:1fr; overflow:hidden; background:radial-gradient(ellipse at 50% 12%,#28476090,transparent 65%),#0b192a; }
.character-portrait { position:relative; width:100%; height:240px; background:radial-gradient(ellipse,#2a4b6470,transparent 72%); isolation:isolate; }
.character-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; z-index:1; }
.character-portrait img[hidden] { display:none; }
.portrait-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#8cacc3; font-size:12px; }
.portrait-placeholder svg { width:70px; height:70px; opacity:.45; }
.character-portrait:has(img:not([hidden])) .portrait-placeholder { visibility:hidden; }
.character-identity { padding:18px 24px 22px; text-align:center; min-width:0; }
.character-identity h2 { font-family:var(--display); font-size:36px; line-height:1.15; font-weight:400; margin:10px 0; overflow-wrap:anywhere; }
.character-identity p { margin:0 0 7px; color:#c4d4df; font-size:13px; }
.character-numbers { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid #38516970; padding-top:20px; margin-top:22px; }
.character-numbers strong { display:block; color:#d4f1ff; font-size:27px; font-weight:500; font-variant-numeric:tabular-nums; }
.character-numbers span { display:block; margin-top:5px; font-size:9px; letter-spacing:1.4px; color:#9ab0c5; }
.character-sync-note { border-top:1px solid #38516970; padding:15px 20px; display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center; color:#9ab0c5; font-size:11px; line-height:1.6; }
.upgrade-feature { padding:26px; min-width:0; border-color:#5a8ca180; background:linear-gradient(125deg,#17334880,transparent 60%),#0b192a; }
.upgrade-feature h2 { font-family:var(--display); font-size:30px; font-weight:400; line-height:1.18; margin:12px 0 8px; overflow-wrap:anywhere; }
.upgrade-reason { color:#a8c9dd; font-size:12px; margin:0 0 20px; }
.upgrade-comparison { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:10px; align-items:start; margin:20px 0; }
.upgrade-item { min-width:0; border:1px solid #39526c80; background:#07132190; border-radius:6px; padding:14px; height:100%; }
.upgrade-item>.eyebrow { font-size:9px; letter-spacing:1.1px; line-height:1.5; display:block; }
.upgrade-item-line { display:flex; align-items:center; gap:10px; margin-top:12px; min-width:0; }
.upgrade-item-line>div { min-width:0; }
.upgrade-item-line strong { display:block; font-size:13px; line-height:1.45; overflow-wrap:anywhere; font-weight:500; }
.upgrade-item-line small { display:block; font-size:10px; color:#9eb3c7; line-height:1.5; margin-top:5px; }
.upgrade-item-art { width:46px; height:46px; flex:0 0 46px; }
.upgrade-destination { border-color:#a4894860; background:#5a482014; }
.upgrade-destination strong { color:#f2d89e; }
.upgrade-direction { align-self:center; color:#a3cce2; }
.upgrade-direction svg { width:20px; height:20px; }
.upgrade-dungeon { display:flex; align-items:center; gap:16px; padding:18px 0; margin:12px 0; border-top:1px solid #39526c80; border-bottom:1px solid #39526c80; }
.upgrade-dungeon>div { min-width:0; }
.upgrade-dungeon-art { width:94px; height:80px; flex:0 0 94px; background:#071321; }
.upgrade-dungeon h3 { font-size:16px; line-height:1.4; margin:5px 0; overflow-wrap:anywhere; }
.upgrade-dungeon p { font-size:11px; line-height:1.6; margin:5px 0 0; color:#9fb4c6; }
.upgrade-dungeon .upgrade-warning { color:#e1bf84; }
.upgrade-dungeon .upgrade-ready { color:#8dc5b9; }
.upgrade-explanation { font-size:12px; color:#a5b9ca; line-height:1.7; margin:16px 0 22px; }
.loadout-card { overflow:hidden; }
.loadout-card .card-head { gap:15px; flex-wrap:wrap; }
.loadout-summary { display:flex; flex-wrap:wrap; gap:8px; font-size:11px; color:#b2d1e3; }
.loadout-summary span { padding:7px 10px; background:#2b48654a; border-radius:5px; }
.loadout-group { padding:0 24px 24px; }
.loadout-group h3 { font-size:12px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:#b4c6d4; margin:0 0 12px; }
.loadout-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.loadout-slot { display:flex; align-items:center; gap:11px; min-width:0; padding:14px 12px; min-height:100px; text-align:left; color:#dce7ef; border:1px solid #3b536d80; background:#0a1727; border-radius:6px; cursor:pointer; transition:border-color .15s,background .15s; }
.loadout-slot:hover,.loadout-slot:focus-visible { border-color:#96cde5; background:#132b40; }
.loadout-slot.status-upgrade,.loadout-slot.status-empty { border-color:#5b9b9a80; }
.loadout-art { width:50px; height:50px; flex:0 0 50px; }
.loadout-copy { min-width:0; flex:1; }
.loadout-label { display:flex; align-items:center; justify-content:space-between; gap:5px; color:#9eb4c7; font-size:10px; line-height:1.5; margin-bottom:5px; }
.loadout-label em { font-style:normal; color:#ddc38d; }
.loadout-copy strong { display:block; overflow-wrap:anywhere; font-size:12px; line-height:1.4; font-weight:500; }
.loadout-slot>svg { width:14px; height:14px; flex:0 0 14px; color:#7695ad; }
.loadout-status { display:block; color:#8da4b7; font-size:10px; margin-top:7px; line-height:1.4; }
.status-upgrade .loadout-status,.status-empty .loadout-status { color:#8ed5c1; }
.status-locked .loadout-status,.status-unknown .loadout-status { color:#d5b782; }
.loadout-foot { padding:18px 24px; border-top:1px solid #39526c80; font-size:11px; line-height:1.8; color:#9fb4c6; }
.character-empty { text-align:center; padding:42px 24px; }
.character-empty-art { width:150px; height:150px; margin:auto; }
.character-empty h2 { font-family:var(--display); font-weight:400; font-size:32px; }
.character-empty p { max-width:440px; margin:16px auto; color:#a5b9ca; font-size:14px; line-height:1.7; }
.next-item-strip { display:flex; align-items:center; gap:12px; width:100%; border:1px solid #496c8580; background:#10253a; border-radius:6px; color:#c8ddec; padding:14px 18px; margin:0 0 18px; text-align:left; cursor:pointer; }
.next-item-strip>span:not(.game-art) { flex:1; min-width:0; }
.next-item-strip strong { display:block; color:#efd59f; font-size:13px; overflow-wrap:anywhere; }
.next-item-strip small { display:block; color:#a8bdce; font-size:11px; margin-top:4px; }
.next-item-strip>svg { width:20px; height:20px; flex:0 0 20px; }
@media(max-width:1100px){.character-overview{grid-template-columns:1fr}.character-profile{grid-template-columns:180px minmax(0,1fr)}.character-portrait{height:220px;align-self:center}.character-sync-note{grid-column:1/-1}.character-identity{text-align:left}.character-identity h2{font-size:30px}.character-numbers{margin-top:16px;padding-top:16px}.loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))}.bottom-nav button{font-size:10px;padding-inline:2px}.character-overview{gap:16px}.character-profile{grid-template-columns:110px minmax(0,1fr)}.character-portrait{height:190px}.portrait-placeholder{font-size:10px;text-align:center;padding:10px}.portrait-placeholder svg{width:44px;height:44px}.character-identity{padding:22px 14px 20px 6px}.character-identity h2{font-size:27px}.character-identity .eyebrow{font-size:9px;letter-spacing:1px}.character-identity p{font-size:12px}.character-numbers{gap:8px}.character-numbers strong{font-size:23px}.character-numbers span{font-size:8px;letter-spacing:.6px}.character-sync-note{padding:12px 14px}.upgrade-feature{padding:20px 16px}.upgrade-feature h2{font-size:27px}.upgrade-comparison{grid-template-columns:1fr;gap:8px}.upgrade-direction{justify-self:center;transform:rotate(90deg)}.upgrade-item{padding:13px}.upgrade-item-line{margin-top:8px}.upgrade-item-line strong{font-size:14px}.upgrade-item-art{width:50px;height:50px;flex-basis:50px}.upgrade-dungeon{gap:12px}.upgrade-dungeon-art{width:70px;height:70px;flex-basis:70px}.upgrade-dungeon h3{font-size:15px}.upgrade-feature .button-row>.primary{width:100%;justify-content:center;min-height:48px}.loadout-group{padding:0 14px 20px}.loadout-group h3{font-size:11px;letter-spacing:1px}.loadout-grid{gap:8px}.loadout-slot{flex-wrap:wrap;align-content:start;gap:8px;padding:12px 10px;min-height:149px}.loadout-art{width:44px;height:44px;flex-basis:44px}.loadout-copy{flex:0 0 100%}.loadout-slot>svg{display:none}.loadout-label{font-size:10px}.loadout-copy strong{font-size:12px}.loadout-status{font-size:10px}.loadout-foot{padding:16px}.next-item-strip{padding:12px}.next-item-strip strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.loadout-slot{transition:none}}

/* Clear endgame identity without widening the phone header. */
.mobile-brand>span { display:block; line-height:1.15; }
.mobile-brand small { display:block; margin-top:4px; font:8px/1.2 var(--body,Arial,sans-serif); letter-spacing:.8px; color:#a8c0d9; }
.manual-setup { display:block; margin-top:12px; min-height:36px; }
.queue-card + .compact-hero { margin-top:24px; }
.shop-faction{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-5px 0 18px;font-size:12px;color:var(--muted)}
.shop-faction .text-button{min-height:44px}
.weekly-shops{margin-bottom:30px}
.weekly-shop{padding:22px 24px}
.weekly-shop-top{display:flex;align-items:center;gap:13px}
.weekly-shop-top h3{font-size:17px;font-weight:500;margin-top:6px}
.weekly-shop-top>svg{width:22px;flex-shrink:0;margin-left:auto;color:#a4e9d0}
.weekly-shop>p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:14px}
.buy-section-title{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 18px}
.shop-directions{padding:16px 0;margin:0 24px;border-bottom:1px solid #35516d70}
.weekly-shop .shop-directions{margin:0}
.shop-route-label{font-size:10px;color:#aecbe0;line-height:1.5}
.shop-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;margin:10px 0 13px;line-height:1.6}
.path-stop{font-size:12px;color:#d8edfa;overflow-wrap:anywhere}
.path-stop:last-child{font-weight:600;color:#bbeaff}
.path-arrow{font-size:12px;color:#7ba1be}
.shop-route-button{min-height:44px;gap:8px;font-size:12px;white-space:normal;text-align:left;max-width:100%}
.shop-route-button svg{width:15px;flex-shrink:0}
.shop-route-button svg:last-child{margin-left:3px}
.shop-requirement{color:#dcc495;font-size:11px;margin:0 0 12px}
.buy-card li>div{min-width:0}
.buy-card li strong{overflow-wrap:anywhere}
.shop-tab-label{display:block;width:fit-content;color:#a7ddf6;background:#173851;border:1px solid #345773;border-radius:4px;font-size:10px;line-height:1.4;padding:3px 7px;margin-top:7px}
.queue-meta .shop-route-button{flex-basis:100%;width:fit-content;justify-self:start;flex-grow:0;background:transparent;border-color:#355773;margin:3px 0}
.route-context{font-size:12px;color:var(--muted);margin:4px 0 16px}
.shop-steps{list-style:none;margin:20px 0;padding:0}
.shop-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid #35516d70}
.shop-steps li:last-child{border-bottom:0}
.step-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #648aa8;background:#173851;color:#c5ecff;font-size:12px}
.shop-steps strong{display:block;font-size:14px;line-height:1.5;font-weight:600}
.shop-steps p{font-size:12px;color:#abc5db;line-height:1.65;margin-top:5px}
.shop-route-note{font-size:12px;line-height:1.7;padding:13px 15px;color:#c6d6e4;background:#152c42;border-left:2px solid #83b7d4}
.route-purchases{margin-top:22px}
.route-purchases h3{font-size:14px;font-weight:500;margin-bottom:10px}
.route-purchases>div{display:flex;gap:12px;align-items:center;padding:9px 0}
.route-purchases strong{font-size:12px;font-weight:500}
.route-purchases small{display:block;font-size:11px;color:#a7ddf6;margin-top:4px}
.route-references{font-size:11px;color:var(--muted);margin-top:20px}
.route-references summary{min-height:36px;cursor:pointer}
.route-references a{display:block;color:#abcfe7;padding:8px 0;min-height:36px;overflow-wrap:anywhere}
.pending-shops .quiet-row small{max-width:720px;line-height:1.7}
@media(max-width:600px){.weekly-shop{padding:20px}.shop-directions{margin:0 20px}.shop-route-button{width:100%;justify-content:space-between}.queue-meta .shop-route-button{width:100%}.shop-faction{font-size:11px}.weekly-shop-top h3{font-size:16px}}
.weekly-section-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:8px}
.weekly-section-head .buy-section-title{margin:0}
.weekly-section-head>span{font-size:11px;color:var(--muted)}
.weekly-section-head>button{margin-left:auto;min-height:44px}
.weekly-section-note{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 18px}
.weekly-facts{margin:14px 0;padding:12px 14px;background:#152c42;border-left:2px solid #83b7d4}
.weekly-facts strong{font-size:12px;font-weight:500;color:#d3ecfc;line-height:1.6;display:block}
.weekly-facts p{font-size:11px;color:#cbbd9f;line-height:1.6;margin-top:5px}
.weekly-shop-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:15px}
.weekly-done{opacity:.75}
.weekly-done-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#a4e9d0}
.weekly-done-label svg{width:18px}
.weekly-extra-limits{margin-bottom:32px}
.weekly-extra{padding:18px 0;border-top:1px solid #35516d70}
.weekly-extra h3{font-size:14px;font-weight:500}
.weekly-extra>strong{font-size:11px;color:#dcc495;font-weight:500;display:block;margin:7px 0}
.weekly-extra p{font-size:12px;line-height:1.65;color:var(--muted);margin:6px 0}
.weekly-extra .extra-route{color:#c8e9fb}
.weekly-extra a{font-size:11px;display:inline-block;min-height:44px;padding:12px 0;color:#abcfe7}
.currency-section-title{margin-top:30px}
@media(max-width:600px){.weekly-shop-actions{display:grid;grid-template-columns:minmax(0,1fr)}.weekly-shop-actions .complete-button{width:100%}}

/* Server-region clock stays explicit on narrow screens. */
.server-clock-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;margin-bottom:18px}
.server-clock-card h2{font-size:19px;margin:8px 0}.server-clock-card p{margin:6px 0;line-height:1.5}.server-clock-card .button{flex-shrink:0}
.time-server{margin:10px 0 3px;font-weight:600}.time-server span{font-weight:400;color:var(--muted)}
@media(max-width:560px){.server-clock-card{align-items:flex-start;flex-direction:column;padding:18px}.server-clock-card .button{width:100%}}

.soul-help-card{padding:24px;margin:22px 0}.soul-help-card h2{margin:8px 0}.soul-help-card p{color:var(--muted)}.material-guides{margin-top:18px;flex-wrap:wrap}.material-guides .purchase-art{width:28px;height:28px}.guide-lead{margin:16px 0}.soul-action-list{display:grid;gap:12px;margin:18px 0}.soul-action-list article{padding:16px;border:1px solid var(--line);border-radius:12px}.soul-action-list h3{margin:6px 0}.soul-action-list strong{display:block;margin-top:8px;font-size:12px}.soul-transfer-summary{padding:16px;margin:18px 0;border-left:3px solid var(--amber);background:rgba(180,145,70,.07)}.soul-transfer-summary p{margin-top:8px}.soul-help-card+.buy-section-title{margin-top:28px}
@media(max-width:560px){.soul-help-card{padding:18px}.material-guides{display:grid;grid-template-columns:1fr}.material-guides .button{width:100%;justify-content:flex-start}}

/* Curated encounter artwork: preserve source proportions and crop at its subject.
   Item, ticket, key and energy artwork keeps the existing uncropped icon treatment. */
.game-art.curated-scene > img {
  object-fit: cover;
  object-position: var(--art-position, 50% 50%);
  padding: 0;
}
.game-art.curated-scene { border-radius: 5px; background: #091728; }
.event-art.curated-scene {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border-bottom: 1px solid #80b9dd4d;
}
.event-art.curated-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #d6eeff12;
  background: linear-gradient(180deg, transparent 72%, #0b192b40);
}
.queue-row:has(.curated-scene) { grid-template-columns: 112px minmax(0,1fr) auto; }
.activity-art.curated-scene { width: 112px; height: 63px; }
.coverage-art.curated-scene { width: 80px; height: 45px; }
.upgrade-dungeon-art.curated-scene { width: 128px; height: 72px; flex-basis: 128px; }
@media(max-width:760px) {
  .queue-row:has(.curated-scene) { grid-template-columns: 96px minmax(0,1fr); }
  .activity-art.curated-scene { width: 96px; height: 54px; }
}
@media(max-width:560px) {
  .queue-row:has(.curated-scene) { grid-template-columns: 80px minmax(0,1fr); gap: 11px; }
  .activity-art.curated-scene { width: 80px; height: 45px; }
  .coverage-art.curated-scene { width: 64px; height: 36px; }
  .upgrade-dungeon-art.curated-scene { width: 96px; height: 54px; flex-basis: 96px; }
}
.timer-unavailable { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.timer-unavailable .unknown-count { margin: 0 0 8px; }
.timer-unavailable p { line-height: 1.6; }
.timer-unavailable p:last-child { margin-top: 10px; font-size: 11px; }
/* Task cards: compact identity, full-width guidance, consistent actions. */
.queue-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.queue-card .card-head { padding: 0 2px 18px; border: 0; margin: 0; }
.queue-card .card-head p { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.queue-list { display: grid; gap: 12px; padding: 0; }
.queue-list .queue-row, .queue-list .queue-row.next-up, .queue-list .queue-row:has(.curated-scene) {
 display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px;
 border: 1px solid #45617d80; border-radius: 12px;
 background: linear-gradient(145deg,#13263d,#0f2035); box-shadow: 0 4px 14px #030c191c;
}
.queue-list .queue-row.next-up { border-color: #80b7d09c; background: linear-gradient(145deg,#193149,#11253b); }
.queue-header { display: grid; grid-template-columns: 64px minmax(0,1fr) 36px; gap: 12px; align-items: center; }
.queue-art { display: flex; justify-content: center; align-items: center; min-height: 48px; }
.queue-header .activity-art { width: 48px; height: 48px; border-radius: 8px; box-shadow: none; }
.queue-header .activity-art.curated-scene { width: 64px; height: 36px; border-radius: 6px; }
.queue-heading { min-width: 0; }
.queue-heading h3 { font-size: 17px; font-weight: 600; line-height: 1.35; color: #e4eff7; overflow-wrap: anywhere; }
.queue-header .info-link { width: 44px; height: 44px; margin: 0 -4px 0 0; justify-self: end; align-self: center; }
.queue-header .info-link svg { width: 16px; height: 16px; }
.queue-kicker { font-size: 9px; font-weight: 650; letter-spacing: 1px; line-height: 1.5; margin: 0 0 5px; color: #9bb4cc; }
.next-up .queue-kicker { color: #b7e5f5; }
.queue-copy { min-width: 0; }
.queue-copy .task-how { margin: 0; font-size: 13px; line-height: 1.55; color: #d7e5f1; }
.queue-copy .task-why { margin: 7px 0 0; font-size: 12px; line-height: 1.55; color: #a8bed2; }
.queue-copy .task-why:first-child { margin-top: 0; }
.queue-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11px; line-height: 1.5; color: #9bb2c7; }
.queue-meta > span + span { border: 0; padding-left: 0; }
.queue-row > .shop-route-button { align-self: flex-start; justify-content: flex-start; width: fit-content; max-width: 100%; margin: -6px 0; min-height: 44px; padding: 6px 0; gap: 8px; border: 0; border-radius: 5px; box-shadow: none; color: #b8e3f4; background: transparent; font-size: 12px; }
.queue-row > .shop-route-button:hover { color: #e5f7ff; }
.queue-deadline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid #58829d59; border-radius: 7px; background: #0b1c2f80; color: #b9d4e8; font-size: 12px; }
.queue-deadline > span:first-child { display: flex; align-items: center; gap: 7px; }
.queue-deadline svg { width: 15px; height: 15px; flex-shrink: 0; }
.queue-deadline [data-countdown] { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .3px; white-space: nowrap; }
.queue-deadline.entry-open { color: #c4f0ff; background: #264b6066; border-color: #71bfd359; }
.queue-leave { align-self: flex-start; min-height: 44px; }
.queue-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(94px,.4fr); gap: 10px; align-items: stretch; margin-top: 2px; }
.queue-actions > button { min-width: 0; min-height: 46px; margin: 0; border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 650; }
.queue-actions .complete-button { color: #102c40; background: linear-gradient(180deg,#bfdfed,#a6cfdf); border: 1px solid #c4e3ef; box-shadow: inset 0 1px 0 #e8f8ff80,0 2px 0 #4d768b; }
.queue-actions .complete-button:hover { background: #d1ebf5; box-shadow: inset 0 1px 0 #fff8,0 2px 0 #4d768b; }
.queue-actions .complete-button:active { transform: translateY(2px); box-shadow: none; }
.queue-actions .complete-button.completed { background: #a4e9d0; border-color: #d0ffe9; color: #143f35; }
.queue-actions .complete-button:disabled:not(.completed) { box-shadow: none; }
.queue-actions .defer-task { border: 1px solid #627f9866; background: #10223755; color: #bed2e3; }
.queue-actions .defer-task:hover { color: #eaf7ff; border-color: #90c5df; background: #1c384e; }
.queue-row button:focus-visible, .queue-header a:focus-visible { outline: 2px solid #b6eaff; outline-offset: 3px; }
@media(max-width:560px) {
 .queue-list .queue-row, .queue-list .queue-row.next-up, .queue-list .queue-row:has(.curated-scene) { padding: 16px; gap: 12px; }
 .queue-header { grid-template-columns: 54px minmax(0,1fr) 28px; gap: 10px; }
 .queue-header .activity-art { width: 44px; height: 44px; }
 .queue-header .activity-art.curated-scene { width: 54px; height: auto; aspect-ratio: 16 / 9; }
 .queue-heading h3 { font-size: 16px; }
 .queue-header .info-link { margin-right: -8px; }
 .queue-actions { grid-template-columns: minmax(0,1fr) minmax(94px,.42fr); gap: 9px; }
 .queue-actions > button { min-height: 46px; }
 .queue-card .card-head h2 { font-size: 23px; }
}
/* Timers put the clock ahead of setup and reference text. */
.timer-page-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 8px; }
.timer-page-head h1 { font-family:var(--display); font-size:32px; line-height:1.2; font-weight:400; }
.timer-page-head .icon-button { width:44px; height:44px; border:1px solid #52749080; border-radius:8px; }
.timer-server { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; min-height:44px; max-width:100%; padding:0; margin-bottom:10px; }
.timer-server strong { font-size:12px; font-weight:550; color:#cbdce9; }
.timer-server span { display:flex; align-items:center; gap:6px; color:#9cb6cd; font-size:11px; }
.timer-server svg { width:13px; height:13px; }
.timer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; border-bottom:1px solid #44627a66; }
.timer-toolbar > span { display:flex; align-items:center; gap:7px; color:#a7bfd2; font-size:12px; }
.timer-toolbar svg { width:15px; height:15px; }
.timer-toolbar button { min-height:44px; font-size:12px; }
.timer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.timer-card { container-type:inline-size; min-width:0; padding:16px; border-radius:12px; background:linear-gradient(145deg,#13263d,#0f2035); border:1px solid #45617d80; box-shadow:0 4px 14px #030c191c; }
.timer-card.timer-active { border-color:#8cc8dcaa; background:linear-gradient(145deg,#193149,#11253b); }
.timer-card-head { display:grid; grid-template-columns:68px minmax(0,1fr) 28px; align-items:center; gap:12px; }
.timer-card-head h3 { font-size:18px; font-weight:600; line-height:1.3; color:#e1eef8; }
.timer-card-head .info-link { width:44px; height:44px; margin:0 -8px 0 0; justify-self:end; }
.timer-thumb { width:68px; height:44px; border-radius:6px; }
.timer-thumb.curated-scene { height:auto; aspect-ratio:16 / 9; }
.timer-count-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:10px; }
.timer-count-row .big-count { margin:0; font-size:46px; font-size:clamp(34px,13cqi,58px); font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-1px; color:#d0f0ff; white-space:nowrap; }
.timer-count-row > span { font-size:13px; font-weight:500; color:#9fbed2; text-align:left; line-height:1.3; }
.timer-start-time { margin-top:5px; font-size:13px; color:#a9bed0; line-height:1.4; }
.timer-details { margin-top:2px; }
.timer-details > summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#a7c9de; cursor:pointer; list-style:none; }
.timer-details > summary::-webkit-details-marker { display:none; }
.timer-details > summary:after { content:'+'; font-size:17px; font-weight:400; }
.timer-details[open] > summary:after { content:'−'; }
.timer-detail-body { display:flex; flex-direction:column; align-items:flex-start; gap:10px; border-top:1px solid #42647d66; padding-top:12px; font-size:12px; line-height:1.6; color:#b2c8da; }
.timer-detail-body p { margin:0; }
.timer-detail-body a { color:#b7e3f5; }
.timer-detail-body button { min-height:44px; }
.timer-reset-heading { font-family:var(--display); font-weight:400; font-size:23px; margin:24px 0 12px; }
.timer-resets .timer-card-head { grid-template-columns:minmax(0,1fr) 28px; }
.timer-resets .timer-thumb { display:none; }
.timer-page-footer { display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:20px; }
.timer-method { font-size:12px; color:#a7bdd1; line-height:1.6; }
.timer-method summary { cursor:pointer; min-height:44px; }
.timer-method p { margin:8px 0; max-width:80ch; }
.timer-settings-server { margin-bottom:20px; }
.timer-settings-server h3 { font-size:15px; }
.timer-settings-server p { font-size:12px; margin:6px 0 12px; }
@media(max-width:600px) {
 .timer-page-head h1 { font-size:27px; }
 .timer-grid { grid-template-columns:minmax(0,1fr); }
 .timer-card { padding:14px 16px 8px; }
 .timer-card-head h3 { font-size:17px; }
}

/* Square event tiles follow chronological DOM order, left to right. */
.timer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.timer-card.timer-tile { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:1; padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; }
.timer-tile .timer-tile-art { position:absolute; z-index:-1; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border:0; border-radius:0; opacity:.16; }
.timer-tile:after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#08162925,#081629aa); pointer-events:none; }
.timer-tile h3 { margin:0; font-size:clamp(14px,8cqi,20px); line-height:1.22; font-weight:650; color:#e7f3ff; }
.timer-tile .timer-count-row { margin:0; gap:3px; }
.timer-tile .timer-count-row > span { font-size:clamp(11px,6cqi,14px); }
.timer-tile .big-count { font-size:clamp(22px,18cqi,48px); letter-spacing:-.6px; }
.timer-tile .timer-start-time { margin:0; font-size:clamp(10px,5.7cqi,13px); line-height:1.25; }
.timer-tile-open { position:absolute; inset:0; z-index:2; width:100%; height:100%; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
.timer-tile-open:hover { background:#b6eaff09; }
.timer-tile-open:focus-visible { outline:2px solid #b6eaff; outline-offset:-3px; }
@media(max-width:700px) {
 .timer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .timer-card.timer-tile { padding:12px; gap:5px; }
}
@media(max-width:360px) {
 .timer-card.timer-tile { padding:10px; gap:3px; }
 .timer-tile h3 { font-size:13px; }
}

.link-blurred { filter:blur(8px); pointer-events:none; user-select:none; }
.character-link-gate { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px; background:#050e2055; overflow:auto; }
.link-gate-card { width:min(100%,390px); padding:30px 24px; border:1px solid #7099b977; border-radius:18px; background:linear-gradient(145deg,#18334b,#0d1c30); box-shadow:0 24px 80px #0008; text-align:center; }
.link-gate-icon { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:#294e66; color:#b9edff; }
.link-gate-icon svg { width:30px; height:30px; }
.link-gate-card h1 { font-size:28px; font-family:var(--display); font-weight:400; margin-bottom:10px; }
.link-gate-card > p { font-size:14px; color:#bfd0df; }
.link-gate-card .button { width:100%; min-height:52px; margin:24px 0 16px; font-size:16px; }
.link-gate-card > p.small { font-size:12px; color:#94afc4; }
.link-preview { display:grid; gap:20px; }
.link-preview .card { padding:24px; min-height:150px; }
.preview-line { margin-top:20px; height:14px; border-radius:5px; background:#42658066; width:85%; }
.preview-line.short { width:55%; }
/* Account setup follows the same compact navy and ice-blue visual system. */
.account-form{display:grid;gap:18px}.account-form label{display:grid;gap:8px;font-weight:650}.account-form input{width:100%;min-height:48px;font-size:16px}.account-form label small{font-weight:400;color:var(--muted,#a5b9cc)}.account-form .primary{width:100%;min-height:48px}.account-feedback{margin:0;color:#b9eaff;overflow-wrap:anywhere}.account-feedback:empty{display:none}.link-gate-card>.button+.button{margin-top:12px}.link-gate-card>.text-button{margin-top:12px}

.account-feedback:not(:empty){padding:14px 16px;border:1px solid #52869d;border-radius:12px;background:#162f40;font-weight:600;line-height:1.5}.account-feedback.error{border-color:#e49c92;background:#3a242c;color:#ffe1dc}.account-result{display:grid;gap:16px}.account-result h3,.account-result p{margin:0}.account-result p{line-height:1.6}.account-result strong{overflow-wrap:anywhere}.account-form .primary:disabled{opacity:.7;cursor:wait}