:root{--bg-app: #f2f5f9;--bg-card: #ffffff;--bg-elevated: #ffffff;--bg-subtle: #f7f9fc;--bg-sunken: #edf1f7;--brand-500: #2bb673;--brand-600: #20945c;--brand-100: #e7f6ee;--brand-700: #177047;--accent-500: #ff7a45;--accent-600: #ee5f28;--accent-100: #ffede4;--gold-500: #f5a623;--gold-100: #fef4e2;--success: #2bb673;--warning: #f5a623;--danger: #e5484d;--info: #3b82f6;--r-common: #8b95a5;--r-rare: #3b82f6;--r-epic: #8b5cf6;--r-legend: #f5a623;--text-1: #1f2937;--text-2: #4b5563;--text-3: #9ca3af;--text-on-brand: #ffffff;--line-1: #e8ecf2;--line-2: #d5dbe5;--line-brand: #2bb673;--r-xs: 6px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-full: 999px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 20px;--s-6: 24px;--s-8: 32px;--s-10: 40px;--s-12: 48px;--s-16: 64px;--e-1: 0 1px 2px rgba(17, 24, 39, .05);--e-2: 0 2px 8px rgba(17, 24, 39, .07);--e-3: 0 8px 24px rgba(17, 24, 39, .1);--e-4: 0 16px 40px rgba(17, 24, 39, .14);--font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-num: "DIN Alternate", "Bahnschrift", "SF Mono", ui-monospace, monospace;--fs-h1: clamp(28px, 3.6vw, 44px);--fs-h2: clamp(22px, 2.6vw, 30px);--fs-h3: clamp(18px, 1.9vw, 22px);--fs-body: 16px;--fs-sm: 14px;--fs-xs: 12px;--ease-out: cubic-bezier(.22, .61, .36, 1);--dur-1: .12s;--dur-2: .2s;--dur-3: .3s;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--bg-app);color:var(--text-1);font-family:var(--font-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;position:fixed;inset:0}#root{position:relative;width:100%;height:100%}#root.force-landscape{position:fixed;top:50%;left:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;overflow:hidden}@supports (width: 100dvw){#root.force-landscape{width:100dvh;height:100dvw}}canvas{touch-action:none;-webkit-user-select:none;user-select:none}.ui-layer,button{touch-action:manipulation}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{color:var(--brand-600);text-decoration:none}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:40px;padding:0 var(--s-5);border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--line-2);color:var(--text-1);font-weight:600;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}.btn:hover{background:var(--bg-subtle)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--brand-500);border-color:var(--brand-500);color:var(--text-on-brand)}.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)}.btn-accent{background:var(--accent-500);border-color:var(--accent-500);color:#fff}.btn-accent:hover{background:var(--accent-600)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}.btn-ghost:hover{background:var(--bg-subtle)}.btn-lg{height:52px;padding:0 var(--s-8);font-size:17px;border-radius:var(--r-md)}.btn-sm{height:30px;padding:0 var(--s-3);font-size:var(--fs-sm)}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background:var(--bg-card);border:1px solid var(--line-1);border-radius:var(--r-md);box-shadow:var(--e-1)}.input{height:40px;padding:0 var(--s-4);border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg-subtle);outline:none;width:100%;transition:border-color var(--dur-1)}.input:focus{border-color:var(--brand-500);background:var(--bg-card)}.input::placeholder{color:var(--text-3)}.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.spacer{flex:1}.muted{color:var(--text-3)}.sm{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}.tag{display:inline-block;padding:2px 8px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600}.tag-brand{background:var(--brand-100);color:var(--brand-700)}.tag-plain{background:#f1f4f9;color:#6b7280}.tag-gold{background:var(--gold-100);color:#9a6510}.tag-danger{background:#fdecec;color:var(--danger)}.tag-info{background:#e8f0fe;color:var(--info)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}::-webkit-scrollbar-track{background:transparent}.page{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}.page-scroll{display:block!important;overflow-y:auto!important;touch-action:pan-y;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.center{display:flex;align-items:center;justify-content:center}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.fade-in{animation:fade-in var(--dur-3) var(--ease-out)}@media (max-width: 1024px){.page{padding:16px!important}:root{--fs-body: 15px}}@media (max-width: 820px){.hide-sm{display:none!important}.stack-sm{flex-direction:column!important;align-items:stretch!important}.btn-lg{height:46px;font-size:16px;padding:0 var(--s-6)}.page{padding:14px!important}}@media (max-width: 560px){.hide-xs{display:none!important}.btn{height:36px;padding:0 14px}.btn-lg{height:44px;font-size:15px}.btn-sm{height:28px;padding:0 10px;font-size:13px}.input{height:38px;font-size:15px}}@media (max-height: 500px){.page{padding:10px!important}.btn{height:34px;padding:0 12px;font-size:14px}.btn-lg{height:40px;font-size:15px;padding:0 var(--s-5)}.input{height:36px;font-size:15px}h1{font-size:var(--fs-h2)!important}h2{font-size:20px!important}h3{font-size:17px!important}}.scroll-y{overflow-y:auto;-webkit-overflow-scrolling:touch}.rotate-hint{position:fixed;left:50%;bottom:calc(12px + var(--sab));transform:translate(-50%);z-index:9998;background:#1f2937e6;color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}@media (max-width: 560px){.modal-shell{border-radius:14px!important}.modal-head{padding:12px 14px!important}.modal-body{padding:14px!important}}@media (max-height: 520px){.modal-head{padding:8px 12px!important}.modal-head h3{font-size:16px!important}.modal-body{padding:10px 12px!important}}