.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}.card.tight{padding:12px 14px}.card+.card,.list+.card,.card+.list{margin-top:10px}.grid2>.card,.grid3>.card,.grid4>.card,.grid2>.list,.grid3>.list{margin-top:0}.card.is-on{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}.card.danger{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--danger-soft)}.card h3{font-size:calc(15px * var(--fs))}.section-title{font-size:calc(13px * var(--fs));font-weight:700;color:var(--text-strong);margin:24px 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}.section-title>span:last-child:not(:first-child),.section-title a{font-weight:500;font-size:calc(12px * var(--fs));color:var(--muted)}.section-title a{text-decoration:none}.section-title a:hover{color:var(--acc-text)}.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.list>*{padding:12px 16px;border-bottom:1px solid var(--line)}.list>*:last-child{border-bottom:0}.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-strong);font-size:calc(14px * var(--fs));font-weight:600;cursor:pointer;text-decoration:none;text-align:center;transition:background .12s,border-color .12s}.btn:hover{background:var(--surface-2)}.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}.btn.primary:hover{filter:brightness(1.06);background:var(--acc)}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.danger-text{color:var(--danger-text)}.btn.ghost{background:transparent;border-color:transparent;color:var(--soft)}.btn.ghost:hover{background:var(--surface-3)}.btn.small{min-height:34px;padding:0 12px;font-size:calc(13px * var(--fs));border-radius:10px}.btn.block{width:100%}.btn[disabled]{opacity:.45;cursor:not-allowed}.choice{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:calc(15px * var(--fs));text-align:left;cursor:pointer;text-decoration:none}.choice:hover{background:var(--surface-2)}.choice.main{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}.choice .hint{font-size:calc(12px * var(--fs));color:var(--muted);font-weight:400}.choice.main .hint{color:var(--acc-ink);opacity:.8}.tabs{flex-shrink:0;display:flex;gap:4px;margin:0 0 16px;padding:4px;overflow-x:auto;scrollbar-width:none;background:var(--surface-3);border-radius:12px}.tabs button,.tabs a{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:calc(13px * var(--fs));font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.tabs button.on,.tabs a.on{background:var(--surface);color:var(--text-strong);box-shadow:var(--shadow-1)}.bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}.bar>i{display:block;height:100%;background:var(--acc);border-radius:999px;transition:width .4s}.bar.blue>i{background:#4a7fd9}.bar.red>i{background:var(--danger)}.bar.teal>i{background:var(--ok)}.bar.accent>i{background:var(--gold)}.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:calc(12px * var(--fs));background:var(--surface-3);color:var(--soft);white-space:nowrap;font-weight:500}.pill.accent{background:var(--acc-soft);color:var(--acc-text)}.pill.danger{background:var(--danger-soft);color:var(--danger-text)}.pos{font-size:calc(12px * var(--fs));font-weight:700}.pos.tank{color:var(--pos-tank)}.pos.dealer{color:var(--pos-dealer)}.pos.healer{color:var(--pos-healer)}.pos.support{color:var(--pos-support)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:calc(13px * var(--fs));color:var(--soft);font-weight:500}.input{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:calc(15px * var(--fs));width:100%}.input:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}textarea.input{padding:12px 14px;min-height:90px;resize:vertical}.empty{padding:12px 2px;color:var(--muted);font-size:calc(14px * var(--fs))}.list>.empty{padding:14px 16px}.ic{display:inline-flex}.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.slot{position:relative;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1.5px solid var(--g-normal);cursor:pointer;padding:0}.slot.empty{background:transparent;border:1.5px dashed var(--line-2);cursor:default}.slot.sel{outline:2px solid var(--acc);outline-offset:2px}.lvb{position:absolute;right:2px;bottom:2px;font-size:calc(9.5px * var(--fs));font-weight:800;line-height:1;padding:2px 3px;border-radius:4px;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--soft);box-shadow:0 0 0 1px var(--line);pointer-events:none}.lvb.bad{background:var(--danger);color:#fff;box-shadow:none}.slot.lrned img.px{opacity:.5}.lvb.lrn{bottom:auto;top:2px;right:2px;color:var(--accent)}.lrnpx{position:relative;display:inline-block;flex:none;vertical-align:middle;line-height:0}.lrnpx>img.px{width:100%;height:100%;opacity:.55}.lrnpx>.lrnb{position:absolute;top:-3px;right:-5px;font-size:calc(9px * var(--fs));font-weight:800;line-height:1;padding:2px 3px;border-radius:4px;background:var(--surface);color:var(--accent);box-shadow:0 0 0 1px var(--accent);pointer-events:none;white-space:nowrap}.lrnpx.sm>.lrnb{width:7px;height:7px;padding:0;top:-2px;right:-2px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1.5px var(--surface)}.dexcell{position:relative}.lvreq{display:inline-block;font-weight:700;padding:0 7px;border-radius:999px;background:var(--surface-3);color:var(--soft);font-size:calc(12px * var(--fs));line-height:1.6}.lvreq.bad{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger-text)}.lvline{margin:2px 0}.slot .q{position:absolute;right:4px;bottom:2px;font-size:calc(10px * var(--fs));font-weight:700;color:var(--soft)}.slot .e{position:absolute;left:4px;top:2px;font-size:calc(10px * var(--fs));font-weight:700;color:var(--acc-text)}.g-normal{border-color:var(--g-normal)!important}.g-fine{border-color:var(--g-fine)!important}.g-rare{border-color:var(--g-rare)!important}.g-heroic{border-color:var(--g-heroic)!important}.g-legend{border-color:var(--g-legend)!important}.gt-normal{color:var(--muted)}.gt-fine{color:var(--g-fine)}.gt-rare{color:var(--g-rare)}.gt-heroic{color:var(--g-heroic)}.gt-legend{color:var(--g-legend)}.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.itemrow{display:flex;align-items:center;gap:10px}.itemrow .ic{padding:3px;border-radius:10px;background:var(--surface-2);border:1.5px solid var(--g-normal);flex-shrink:0}.equipgrid{display:grid;grid-template-columns:repeat(4,minmax(0,76px));gap:12px 14px;justify-content:start}.equipgrid .eq{display:flex;flex-direction:column;align-items:center;gap:4px}.equipgrid .slot{width:64px;height:64px}@media (max-width: 400px){.equipgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.equipgrid .slot{width:100%;height:auto}}.banners{display:flex;flex-direction:column;position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:29;background:var(--bg)}.banners:empty{display:none}.banner{display:flex;align-items:center;gap:8px;padding:6px 20px;font-size:calc(13px * var(--fs));border-bottom:1px solid var(--line);background:var(--acc-soft);color:var(--text);white-space:nowrap;overflow:hidden}.banner b{flex-shrink:0}.banner .bn-main{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:2px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;text-align:left}.banner span.bn-main{cursor:default}.banner .bn-main:hover .bn-t,.banner .bn-main:hover b{text-decoration:underline;text-underline-offset:3px}.banner .bn-t{overflow:hidden;text-overflow:ellipsis;min-width:0}.banner .msg-text{overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--muted)}@media (max-width: 640px){.banner .msg-text{display:none}.banner{padding:6px 14px}}.banner .bn-side{margin-left:auto;flex:none}.banner.danger{background:var(--danger-soft);color:var(--danger-text)}.banner .bn-go{flex:none;display:inline-flex;align-items:center;padding:2px 4px;border:0;background:none;font:inherit;font-size:calc(13px * var(--fs));font-weight:600;text-decoration:none;color:var(--acc-text);cursor:pointer}.banner.danger .bn-go{color:var(--danger-text)}.banner .bn-go:hover{text-decoration:underline;text-underline-offset:3px;filter:none}.bn-fold{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:calc(12px * var(--fs))}.bn-foldbar{align-self:flex-end;padding:1px 16px 2px;border-bottom-left-radius:8px;background:var(--surface-2);border:1px solid var(--line);border-top:0;margin:-1px 12px 0 0}.banner.bn-folded .bn-fold{margin-left:auto;padding:0 4px}.banner .bn-brkfold{flex:none;margin-left:auto;padding:0 4px;color:var(--danger-text)}.banner .bn-new{flex:none;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-weight:600}.banner.danger.bn-folded .bn-fold{flex:none;color:var(--danger-text)}.toasts{position:fixed;left:50%;transform:translate(-50%);bottom:92px;z-index:999;display:flex;flex-direction:column;gap:6px;width:min(92vw,420px);pointer-events:none}@media (min-width: 1024px){.toasts{bottom:24px}}@media (max-width: 1023px){body:has(#modal-root .modal-back,.win-back) .toasts{bottom:auto;top:calc(env(safe-area-inset-top) + 12px)}}.toast{padding:12px 16px;border-radius:14px;background:var(--text-strong);color:var(--bg);box-shadow:var(--shadow-2);font-size:calc(14px * var(--fs));font-weight:500;animation:tin .2s ease-out}.toast.warn,.toast.error{background:var(--danger);color:#fff}.toast.has-act{display:flex;align-items:center;gap:12px;pointer-events:auto}.toast.has-act .toast-t{flex:1}.toast-act{flex:none;border:1px solid currentColor;background:none;color:inherit;font:inherit;font-weight:700;padding:4px 10px;border-radius:10px;cursor:pointer}.toast-act:focus-visible{outline:2px solid currentColor;outline-offset:2px}@keyframes tin{0%{opacity:0;transform:translateY(6px)}}.modal-back{position:fixed;inset:0;z-index:80;background:#0a0e1473;display:flex;align-items:flex-end;justify-content:center;animation:fadein .15s}.modal{width:100%;max-width:460px;max-height:88vh;max-height:88dvh;overflow:auto;background:var(--surface);border-radius:22px 22px 0 0;padding:22px 20px max(20px,env(safe-area-inset-bottom));box-shadow:var(--shadow-2)}@media (min-width: 640px){.modal-back{align-items:center}.modal{border-radius:22px}}.tipped{cursor:help;outline:none}.tipped:focus-visible{box-shadow:0 0 0 2px var(--acc-soft);border-radius:10px}.tipbox{white-space:pre-line;position:fixed;z-index:1000;max-width:min(320px,calc(100vw - 24px));padding:8px 11px;border-radius:10px;background:var(--text-strong, #1C2230);color:var(--surface, #fff);font-size:calc(12px * var(--fs));font-weight:500;line-height:1.55;box-shadow:0 8px 22px #00000038;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}.tipbox.on{opacity:1;transform:none}a,button,img.px,[data-tip]{-webkit-touch-callout:none}button,.iconbtn,img.px{-webkit-user-select:none;user-select:none}img.px.pxs{image-rendering:auto}.golink{display:inline;width:max-content;color:var(--acc-text);font-size:calc(13px * var(--fs));font-weight:600;text-decoration:none;max-width:100%}.golink:hover{text-decoration:underline;text-underline-offset:3px;filter:none}.golink.sm{font-size:calc(12px * var(--fs))}.meetpop{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:60;width:min(380px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;background:var(--surface, var(--bg));color:var(--text);border:1px solid var(--line, rgba(127,127,127,.25));box-shadow:var(--shadow-2);animation:tin .25s ease-out}.meetpop .meet-in{display:flex;gap:10px;align-items:flex-start}.meetpop .meet-x{background:none;border:0;color:var(--muted, inherit);cursor:pointer;padding:2px 4px;font-size:14px}.meetpop .meet-acts{gap:6px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}@media (min-width: 1024px){.meetpop{bottom:24px}}.banner.notice{background:var(--gold-soft)}.banner.notice .bn-label{color:color-mix(in srgb,var(--gold) 80%,var(--text-strong));font-weight:700}.banner.notice .bn-t,.banner.notice .bn-go{color:var(--text-strong)}.reppick{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.reppick>.tiny{margin-right:2px}.reppick button{min-width:40px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--soft);font:inherit;font-size:calc(12px * var(--fs));cursor:pointer}.reppick button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,var(--surface));color:var(--text-strong);font-weight:600}.reppick button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}.cc-timers{display:flex;flex-direction:column;gap:2px;margin-top:6px}.cc-timers .cct-h{font-size:calc(11px * var(--fs));color:var(--muted)}.cc-timers a{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--fs));color:var(--soft);text-decoration:none}.cc-timers a:hover{color:var(--text-strong)}.cc-timers a .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-timers a [data-ends]{color:var(--text-strong);font-variant-numeric:tabular-nums}.chx-rep{gap:8px;align-items:center}.hasTip{cursor:help}.tipq{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);font-size:10px;font-weight:700;line-height:1;vertical-align:1px;cursor:help;flex:none}.hasTip:hover .tipq,.tipq:focus-visible{color:var(--text-strong);border-color:var(--muted)}.toast-x{flex:none;border:0;background:none;color:inherit;opacity:.7;font:inherit;font-size:calc(13px * var(--fs));width:28px;height:28px;margin:-4px -6px -4px -2px;border-radius:8px;cursor:pointer}.toast-x:hover{opacity:1;background:#ffffff1f}.is-busy{position:relative;cursor:progress}.is-busy:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:0;animation:busyin 0s .15s forwards,upd-spin .8s linear infinite}@keyframes busyin{to{opacity:.8}}#netbar{position:fixed;left:0;right:0;top:0;height:2px;z-index:2000;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,transparent,var(--acc),transparent) 0 0 / 40% 100% no-repeat}#netbar.on{opacity:1;animation:netbar 1.1s ease-in-out infinite}@keyframes netbar{0%{background-position:-40% 0}to{background-position:140% 0}}.skel{display:flex;flex-direction:column;gap:10px;padding:4px 0}.skel i{display:block;height:44px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)) 0 0 / 300% 100%;animation:skel 1.4s ease-in-out infinite}.skel i.sk-h{height:26px;width:40%}.skel i.sk-t{height:34px;width:70%}.skel i.sk-s{height:14px;width:60%}@keyframes skel{0%{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion: reduce){.skel i,#netbar.on{animation:none}.is-busy:after{animation:busyin 0s .15s forwards}}:root[data-motion=reduce] .skel i,:root[data-motion=reduce] #netbar.on{animation:none}.kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--text-strong);font:600 calc(12px * var(--fs)) / 1 ui-monospace,monospace}
