:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:18px;--radius-pill:999px;--font-sans:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-4xl:3rem;--leading-tight:1.25;--leading-normal:1.6;--dur-fast:.12s;--dur-base:.22s;--dur-slow:.48s;--dur-reveal:.7s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--z-banner:50;--z-modal:100;--page-max:68rem;--page-pad:var(--space-4);--c-bg:#f6f7fb;--c-bg-elevated:#fff;--c-surface:#fff;--c-surface-2:#eef0f7;--c-surface-3:#e2e6f0;--c-border:#d3d8e6;--c-border-strong:#a9b1c7;--c-text:#16192a;--c-text-muted:#565d78;--c-text-faint:#7c839b;--c-text-invert:#fff;--c-accent:#4338ca;--c-accent-hover:#3730a3;--c-accent-soft:#e5e4fb;--c-accent-text:#fff;--c-win:#0f7a4d;--c-win-soft:#d8f3e6;--c-lose:#b3261e;--c-lose-soft:#fbe0de;--c-draw:#8a6100;--c-draw-soft:#fbeecd;--c-warn:#9a5b00;--c-warn-soft:#fdefd6;--c-danger:#b3261e;--c-info:#1d4ed8;--c-focus:#1d4ed8;--shadow-1:0 1px 2px #0f122814, 0 1px 3px #0f12280f;--shadow-2:0 6px 16px #0f12281a, 0 2px 6px #0f12280f;--shadow-focus:0 0 0 3px color-mix(in srgb, var(--c-focus) 40%, transparent)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--c-bg:#0d0f18;--c-bg-elevated:#161a27;--c-surface:#161a27;--c-surface-2:#1e2333;--c-surface-3:#272d40;--c-border:#333a4f;--c-border-strong:#4c5570;--c-text:#eceef6;--c-text-muted:#a8b0c6;--c-text-faint:#8089a3;--c-text-invert:#0d0f18;--c-accent:#a5b4fc;--c-accent-hover:#c7d2fe;--c-accent-soft:#262a45;--c-accent-text:#10132a;--c-win:#5fd6a0;--c-win-soft:#10301f;--c-lose:#ff8b83;--c-lose-soft:#351616;--c-draw:#f0c469;--c-draw-soft:#33280c;--c-warn:#f0c469;--c-warn-soft:#33280c;--c-danger:#ff8b83;--c-info:#93b4ff;--c-focus:#93b4ff;--shadow-1:0 1px 2px #00000080;--shadow-2:0 8px 24px #0000008c}}:root[data-theme=dark]{--c-bg:#0d0f18;--c-bg-elevated:#161a27;--c-surface:#161a27;--c-surface-2:#1e2333;--c-surface-3:#272d40;--c-border:#333a4f;--c-border-strong:#4c5570;--c-text:#eceef6;--c-text-muted:#a8b0c6;--c-text-faint:#8089a3;--c-text-invert:#0d0f18;--c-accent:#a5b4fc;--c-accent-hover:#c7d2fe;--c-accent-soft:#262a45;--c-accent-text:#10132a;--c-win:#5fd6a0;--c-win-soft:#10301f;--c-lose:#ff8b83;--c-lose-soft:#351616;--c-draw:#f0c469;--c-draw-soft:#33280c;--c-warn:#f0c469;--c-warn-soft:#33280c;--c-danger:#ff8b83;--c-info:#93b4ff;--c-focus:#93b4ff;--shadow-1:0 1px 2px #00000080;--shadow-2:0 8px 24px #0000008c}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:inherit}a{color:var(--c-accent);text-underline-offset:2px}:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app-shell{flex-direction:column;min-height:100%;display:flex}.page{width:100%;max-width:var(--page-max);padding:var(--space-6) var(--page-pad);gap:var(--space-7);flex-direction:column;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--page-pad);border-bottom:1px solid var(--c-border);background:var(--c-bg-elevated);z-index:var(--z-banner);flex-wrap:wrap;display:flex;position:sticky;top:0}.app-header__brand{align-items:baseline;gap:var(--space-2);color:var(--c-text);font-weight:800;text-decoration:none;display:flex}.app-header__brand small{font-weight:400;font-size:var(--text-xs);color:var(--c-text-faint)}.app-header__right{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.app-footer{padding:var(--space-6) var(--page-pad);border-top:1px solid var(--c-border);color:var(--c-text-faint);font-size:var(--text-xs);gap:var(--space-4);flex-wrap:wrap;justify-content:space-between;margin-top:auto;display:flex}.hero{gap:var(--space-6);padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg, color-mix(in srgb, var(--c-accent-soft) 72%, transparent), var(--c-surface) 64%), radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--c-win-soft) 60%, transparent), transparent 34%);border:1px solid var(--c-border);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;display:grid}.hero__title{font-size:var(--text-4xl);letter-spacing:0;margin-bottom:var(--space-4);font-weight:800;line-height:1.1}.hero__body{color:var(--c-text-muted);margin-bottom:var(--space-5);max-width:46ch}.hero__actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.hero__hint{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--c-text-faint);display:block}.hero__art{gap:var(--space-3);justify-content:center;font-size:3.5rem;line-height:1;display:flex}.hero__art--portal span{aspect-ratio:1;border-radius:var(--radius-lg);border:1px solid var(--c-border);background:var(--c-bg-elevated);width:6.5rem;box-shadow:var(--shadow-2);animation:float 3.2s var(--ease-in-out) infinite;place-items:center;display:grid}.hero__art span:nth-child(2){animation-delay:.25s}.hero__art span:nth-child(3){animation-delay:.5s}@keyframes float{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-10px)rotate(3deg)}}.eyebrow{color:var(--c-accent);font-size:var(--text-xs);letter-spacing:0;text-transform:uppercase;font-weight:800}.section-title{font-size:var(--text-2xl);font-weight:700}.section-heading{gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:minmax(0,.8fr) minmax(16rem,.7fr);align-items:end;display:grid}.portal-strip{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.portal-strip>div{padding:var(--space-4);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-surface)}.portal-strip strong{font-size:var(--text-3xl);line-height:1;display:block}.portal-strip span{color:var(--c-text-muted);font-size:var(--text-sm)}.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-1)}.stack{gap:var(--space-4);flex-direction:column;display:flex}.stack--tight{gap:var(--space-2)}.row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.spread{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.muted{color:var(--c-text-muted)}.faint{color:var(--c-text-faint);font-size:var(--text-sm)}.mono{font-family:var(--font-mono);font-size:var(--text-xs);word-break:break-all}.grid-3{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));display:grid}.btn{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--c-border-strong);background:var(--c-surface);color:var(--c-text);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-5);min-height:44px;transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{background:var(--c-surface-2)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-text);font-size:var(--text-lg);padding:var(--space-3) var(--space-6)}.btn--primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}.btn--ghost{color:var(--c-text-muted);background:0 0;border-color:#0000}.btn--sm{min-height:34px;padding:var(--space-1) var(--space-4);font-size:var(--text-sm)}.badge{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-xs);background:var(--c-surface-2);color:var(--c-text-muted);border:1px solid var(--c-border);font-weight:600;display:inline-flex}.badge--accent{background:var(--c-accent-soft);color:var(--c-accent);border-color:color-mix(in srgb, var(--c-accent) 35%, transparent)}.notice{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);border:1px solid var(--c-border);background:var(--c-surface-2);font-size:var(--text-sm)}.notice--warn{background:var(--c-warn-soft);border-color:color-mix(in srgb, var(--c-warn) 35%, transparent)}.notice--error{background:var(--c-lose-soft);border-color:color-mix(in srgb, var(--c-lose) 35%, transparent)}.game-card{gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--c-border);background:var(--c-surface);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);flex-direction:column;display:flex}.game-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}.game-card__title{font-size:var(--text-xl);font-weight:700}.game-grid{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.portal-game-card{gap:var(--space-4);min-height:100%;padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--c-border);background:var(--c-surface);box-shadow:var(--shadow-1);flex-direction:column;display:flex}.portal-game-card__actions{margin-top:auto}.game-art{border-radius:var(--radius-md);border:1px solid var(--c-border);background:var(--c-surface-2);min-height:9rem;overflow:hidden}.game-art--rps{justify-content:center;align-items:center;gap:var(--space-2);font-size:2.25rem;display:flex}.game-art--rps span{aspect-ratio:1;border-radius:var(--radius-md);background:var(--c-bg-elevated);border:1px solid var(--c-border);place-items:center;width:3.5rem;display:grid}.game-art--gomoku{padding:var(--space-4);background:linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px), var(--c-surface-2);background-size:20% 20%;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(5,1fr);gap:1px;display:grid}.game-art--gomoku span{aspect-ratio:1;background:var(--c-text);width:1.25rem;box-shadow:0 0 0 2px var(--c-bg-elevated);border-radius:50%;place-self:center}.game-art--gomoku span:nth-child(2),.game-art--gomoku span:nth-child(4){background:var(--c-bg-elevated)}.game-art--gomoku span:first-child{grid-area:2/2}.game-art--gomoku span:nth-child(2){grid-area:2/3}.game-art--gomoku span:nth-child(3){grid-area:3/3}.game-art--gomoku span:nth-child(4){grid-area:3/4}.game-art--gomoku span:nth-child(5){grid-area:4/4}.game-art--dice{justify-content:center;align-items:center;gap:var(--space-3);font-size:3rem;display:flex}.game-art--dice span{filter:drop-shadow(0 6px 10px #0000002e)}.variant-list{gap:var(--space-1);flex-direction:column;display:flex}.variant-row{justify-content:space-between;align-items:baseline;gap:var(--space-2);padding:var(--space-1) 0;border-bottom:1px dashed var(--c-border);font-size:var(--text-sm);display:flex}.variant-row:last-child{border-bottom:none}.online-dot{background:var(--c-win);width:8px;height:8px;margin-right:var(--space-1);border-radius:50%;display:inline-block}.table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.table th,.table td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--c-border)}.table th{color:var(--c-text-muted)}.table-scroll{overflow-x:auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:var(--c-accent);color:var(--c-accent-text);padding:var(--space-2) var(--space-4);z-index:var(--z-modal);position:absolute;left:-9999px}.skip-link:focus{left:var(--space-3);top:var(--space-3)}@media (max-width:780px){.hero{text-align:left;padding:var(--space-6) var(--space-4);grid-template-columns:1fr}.hero__art{font-size:3rem}.section-heading,.game-grid,.portal-strip{grid-template-columns:1fr}}@media (max-width:640px){:root{--page-pad:var(--space-3);--text-4xl:2.25rem}}@media (prefers-contrast:more){.card,.game-card{border-color:var(--c-text-muted)}}