:root { color-scheme:light; --navy:#102b4e; --hud:rgba(14,42,76,.77); --hud-dark:rgba(8,31,61,.88); --line:rgba(218,239,255,.78); --blue:#72cfff; --white:#f7fbff; --green:#43e68d; }
* { box-sizing:border-box; }
html { min-height:100%; background:#b8cedc; }
body { margin:0; min-width:320px; min-height:100%; color:var(--navy); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif; line-height:1.35; }
button,a { font:inherit; }
.skip-link { position:fixed; z-index:100; top:.6rem; left:.6rem; padding:.65rem .9rem; border-radius:8px; background:white; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.background-art { position:fixed; z-index:-3; inset:-18px; background:url("assets/reference-background.jpg") center/cover no-repeat; filter:blur(10px) saturate(.82); transform:scale(1.04); }
.page-shade { position:fixed; z-index:-2; inset:0; background:linear-gradient(180deg,rgba(233,244,251,.32),rgba(18,46,69,.08) 58%,rgba(7,30,49,.64)); }
.portal-shell { width:min(100% - 28px,820px); min-height:100dvh; margin:auto; padding:max(20px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom)); }
.top-area { position:relative; min-height:230px; }
.player-panel { display:grid; grid-template-columns:58px 1fr; width:min(100%,365px); padding:12px 14px; gap:12px; align-items:center; border:1px solid var(--line); border-radius:15px; background:var(--hud-dark); box-shadow:0 10px 28px rgba(10,32,53,.2),inset 0 1px rgba(255,255,255,.18); color:var(--white); backdrop-filter:blur(10px); }
.avatar { display:block; width:58px; aspect-ratio:1; border:1px solid rgba(255,255,255,.86); border-radius:50%; background:rgba(190,219,236,.2); object-fit:cover; object-position:center 22%; }
.player-info { min-width:0; }
.player-row,.level-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.player-row strong { font-size:1rem; letter-spacing:.02em; }
.player-row span { color:#d7e5ef; font-size:.68rem; }
.player-row i,.staff-heading-row>span i,.staff-card>i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(67,230,141,.9); }
.level-row { margin-top:.15rem; color:#e1ebf2; font-size:.72rem; }
.level-track { height:4px; margin-top:5px; border-radius:99px; background:rgba(255,255,255,.32); }
.level-track span { display:block; width:25%; height:100%; border-radius:inherit; background:#9cddff; }
.brand-panel { position:absolute; top:92px; right:4px; width:220px; }
.brand-panel h1 { margin:0; font-size:3.7rem; line-height:.86; letter-spacing:-.065em; }
.brand-panel strong { display:block; margin-top:.25rem; font-size:.88rem; }
.brand-panel p { margin:.4rem 0 0; padding-bottom:.5rem; border-bottom:1px solid rgba(15,48,76,.4); color:#60798d; font-family:Georgia,serif; font-size:.78rem; font-style:italic; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.action-card { position:relative; min-height:244px; padding:16px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(25,62,99,.76),rgba(7,32,64,.83)); box-shadow:0 12px 26px rgba(11,37,60,.17),inset 0 1px rgba(255,255,255,.14); color:white; text-align:left; text-decoration:none; cursor:pointer; backdrop-filter:blur(8px); transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; }
button.action-card { width:100%; }
.action-card:hover { transform:translateY(-3px); border-color:white; background:linear-gradient(145deg,rgba(28,72,115,.82),rgba(8,39,77,.9)); }
.action-card:focus-visible,.staff-card:focus-visible,.dialog-close:focus-visible,.dialog-link:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.action-number { display:block; color:#d9e9f4; font-size:.75rem; }
.action-symbol { display:block; height:58px; margin-top:.25rem; color:white; font-size:3.2rem; font-weight:300; line-height:1; }
.action-card>strong { display:block; margin-top:.4rem; font-size:1.65rem; letter-spacing:-.035em; }
.action-subtitle { display:block; min-height:38px; margin-top:.2rem; color:#edf7fc; font-size:.82rem; }
.action-line { display:block; width:30px; height:1px; margin-top:.4rem; background:white; }
.action-card small { display:block; margin-top:.45rem; color:#c8dbe8; font-size:.62rem; letter-spacing:.04em; }
.action-arrow { position:absolute; right:15px; bottom:15px; display:grid; width:40px; aspect-ratio:1; place-items:center; border:1px solid white; border-radius:50%; font-size:1.3rem; }
.staff-section { margin-top:28px; }
.staff-heading-row { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:10px; }
.staff-heading-row>div { display:flex; align-items:end; gap:14px; }
.staff-heading-row h2 { margin:0; font-size:1.45rem; }
.staff-heading-row p { margin:0 0 .1rem; padding-left:14px; border-left:1px solid rgba(15,48,76,.34); color:#395b76; font-size:.65rem; }
.staff-heading-row>span { padding-bottom:.15rem; color:#42647e; font-size:.62rem; white-space:nowrap; }
.staff-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.staff-card { position:relative; display:flex; min-width:0; aspect-ratio:.7; padding:0; overflow:hidden; flex-direction:column; justify-content:end; border:1px solid var(--line); border-radius:10px; background:var(--hud-dark); box-shadow:0 8px 18px rgba(9,34,56,.18),inset 0 1px rgba(255,255,255,.16); color:white; text-align:left; cursor:pointer; }
.staff-card img { position:absolute; inset:0; width:100%; height:76%; object-fit:cover; object-position:top center; }
.staff-card>span { position:relative; z-index:1; display:block; min-height:25%; padding:7px 8px 6px; background:linear-gradient(180deg,rgba(8,31,61,.65),rgba(8,31,61,.97)); }
.staff-card strong,.staff-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-card strong { font-size:.78rem; }
.staff-card small { color:#c9dbe7; font-size:.48rem; letter-spacing:.03em; }
.staff-card>i { position:absolute; z-index:2; right:7px; bottom:30px; width:6px; height:6px; margin:0; }
footer { display:flex; justify-content:space-between; gap:1rem; margin-top:78px; color:#c6d8e5; font-size:.63rem; letter-spacing:.02em; }
footer p { margin:0; }
footer p:last-child { text-align:right; }
dialog { width:min(calc(100% - 28px),520px); padding:0; border:0; border-radius:18px; background:transparent; color:white; }
dialog::backdrop { background:rgba(5,20,38,.66); backdrop-filter:blur(8px); }
.dialog-card,.profile-card { position:relative; padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:var(--hud-dark); box-shadow:0 24px 60px rgba(4,20,38,.38),inset 0 1px rgba(255,255,255,.15); }
.dialog-close { position:absolute; top:12px; right:12px; display:grid; width:40px; aspect-ratio:1; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(255,255,255,.08); color:white; font-size:1.4rem; cursor:pointer; }
.dialog-label,.profile-card p { margin:0; color:var(--blue); font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.dialog-card h2,.profile-card h2 { margin:.35rem 2.5rem .25rem 0; font-size:1.8rem; }
.dialog-description { margin:0; color:#c9d9e5; font-size:.9rem; }
.dialog-links { display:grid; gap:.7rem; margin-top:1.2rem; }
.dialog-link { display:grid; grid-template-columns:42px 1fr auto; padding:.8rem; gap:.75rem; align-items:center; border:1px solid rgba(255,255,255,.28); border-radius:12px; color:white; text-decoration:none; }
.dialog-link>span { display:grid; width:42px; aspect-ratio:1; place-items:center; border-radius:10px; background:rgba(126,202,244,.15); font-size:.7rem; }
.dialog-links strong,.dialog-links small { display:block; }
.dialog-links small { margin-top:.1rem; color:#bdcfdd; font-size:.74rem; }
.dialog-links b { font-size:1.3rem; }
.dialog-link.is-locked { border-color:rgba(255,255,255,.16); background:rgba(5,23,45,.34); color:rgba(247,251,255,.68); cursor:not-allowed; }
.dialog-link.is-locked>span { background:rgba(255,255,255,.08); font-size:1rem; }
.dialog-link.is-locked small { color:rgba(201,217,229,.66); }
.dialog-link.is-locked b { color:#9eb5c5; font-size:.62rem; letter-spacing:.1em; }
.profile-card { display:grid; grid-template-columns:120px 1fr; gap:1.1rem; align-items:end; }
.profile-card img { width:120px; aspect-ratio:1; border-radius:12px; object-fit:cover; object-position:top; }
.profile-card span { color:#c8dae7; font-size:.8rem; }
@media (min-width:900px) {
  .portal-shell { width:min(100% - 64px,1100px); display:grid; grid-template-columns:1fr; grid-template-areas:"top" "actions" "staff" "footer"; gap:20px; align-content:center; }
  .top-area { grid-area:top; display:grid; grid-template-columns:365px minmax(0,1fr); min-height:150px; gap:48px; align-items:start; }
  .player-panel { width:100%; }
  .brand-panel { position:relative; top:auto; right:auto; left:auto; width:100%; justify-self:end; }
  .brand-panel h1 { font-size:5.1rem; }
  .brand-panel strong { font-size:1.1rem; }
  .brand-panel p { width:190px; font-size:.9rem; }
  .action-grid { grid-area:actions; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .action-card { min-height:220px; padding:16px; }
  .action-card>strong { font-size:1.7rem; }
  .staff-section { grid-area:staff; margin-top:0; }
  .staff-grid { gap:14px; }
  .staff-card { aspect-ratio:1.25; }
  .staff-card img { height:100%; }
  .staff-card>span { min-height:auto; }
  .staff-card strong { font-size:1rem; }
  .staff-card small { font-size:.58rem; }
  footer { grid-area:footer; margin-top:12px; }
}
@media (max-width:899px) {
  .top-area { display:grid; grid-template-columns:44vw minmax(0,1fr); min-height:148px; gap:10px; align-items:start; }
  .player-panel { grid-template-columns:42px minmax(0,1fr); width:100%; padding:8px 7px; gap:6px; border-radius:12px; background:rgba(8,31,61,.78); box-shadow:0 7px 18px rgba(10,32,53,.16),inset 0 1px rgba(255,255,255,.16); }
  .avatar { width:42px; }
  .player-row,.level-row { gap:.2rem; }
  .player-row strong { font-size:.86rem; }
  .player-row span { font-size:.6rem; }
  .level-row { margin-top:.08rem; font-size:.64rem; }
  .level-track { height:3px; margin-top:3px; }
  .brand-panel { position:relative; top:auto; right:auto; left:auto; width:100%; transform:none; text-align:left; }
  .brand-panel h1 { font-size:clamp(2.7rem,11vw,3.7rem); }
  .brand-panel strong { font-size:clamp(.58rem,1.85vw,.82rem); white-space:nowrap; }
  .brand-panel p { margin-inline:0; color:#34546d; text-shadow:0 1px 3px rgba(255,255,255,.72); }
  .action-card { min-height:138px; padding:11px 12px; }
  .action-number { font-size:.64rem; }
  .action-symbol { height:31px; margin-top:.12rem; font-size:2rem; }
  .action-card>strong { margin-top:.18rem; font-size:1.2rem; }
  .action-subtitle { min-height:0; margin-top:.08rem; padding-right:30px; font-size:.68rem; }
  .action-line,.action-card small { display:none; }
  .action-arrow { right:10px; bottom:10px; width:30px; font-size:1rem; }
  .staff-heading-row p,.staff-heading-row>span { color:#244d6c; text-shadow:0 1px 3px rgba(255,255,255,.7); }
  .staff-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 18px) / 3.35); gap:9px; margin-inline:-2px; padding:2px 2px 10px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:rgba(216,237,250,.65) transparent; }
  .staff-grid:focus-visible { outline:3px solid var(--blue); outline-offset:4px; border-radius:10px; }
  .staff-card { width:100%; aspect-ratio:.72; scroll-snap-align:start; }
  .staff-card img { height:78%; }
  .staff-card>span { min-height:25%; padding:8px 7px 7px; }
  .staff-card strong { font-size:.86rem; }
  .staff-card small { font-size:.5rem; }
  .staff-card>i { right:7px; bottom:34px; }
  footer { margin-top:22px; padding-top:12px; border-top:1px solid rgba(218,239,255,.4); }
}
@media (max-width:430px) {
  .portal-shell { width:min(100% - 24px,390px); }
  .top-area { min-height:142px; }
  .staff-grid { gap:9px; }
  .staff-card { border-radius:8px; }
  .staff-card>span { padding:7px 6px 6px; }
  .staff-card strong { font-size:.82rem; }
  .staff-card small { font-size:.48rem; }
  .staff-card>i { right:6px; bottom:32px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } .action-card:hover { transform:none; } }