:root{color-scheme:dark;--bg:#071018;--panel:rgba(11,24,33,.91);--line:rgba(255,255,255,.09);--text:#f5f7fa;--muted:#8fa0ad;--gold:#f4c85c}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:"Noto Sans CJK JP","Noto Sans JP","Yu Gothic","Meiryo",system-ui,sans-serif;font-variant-numeric:tabular-nums;background:radial-gradient(circle at 80% 8%,var(--glow),transparent 34rem),linear-gradient(135deg,#09141d,#071018 68%);overflow-x:hidden}.theme-yonma{--accent:#43dfd1;--accent2:#65e8de;--soft:rgba(59,215,203,.15);--border:rgba(88,226,216,.28);--glow:rgba(31,188,184,.15)}.theme-sanma{--accent:#c17cff;--accent2:#ec8cff;--soft:rgba(193,124,255,.15);--border:rgba(211,145,255,.3);--glow:rgba(173,88,240,.17)}a{color:inherit;text-decoration:none}.orn{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;fill:none;stroke:var(--accent);stroke-width:2;opacity:.085}.orn .gold{stroke:#b98547}.shell{position:relative;z-index:1;max-width:1480px;margin:auto;padding:0 32px 28px}header{min-height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;flex-direction:column}.brand small,.kicker,h4{color:var(--accent);font-size:11px;letter-spacing:.17em;font-weight:900}.brand strong{font-size:18px}nav,.filters>div,.tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}nav{padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(5,14,20,.52)}nav a,.filters a,.tabs a{padding:9px 13px;border-radius:999px;color:#aab7c0;font-size:13px;font-weight:750}nav a.active,.filters a.active,.tabs a.active{background:var(--soft);color:white}.user{justify-self:end;display:flex;align-items:center;gap:8px;font-size:13px}.user>a{font-size:11px;color:var(--muted)}.avatar{display:inline-grid;place-items:center;object-fit:cover;border-radius:50%;border:1px solid var(--border);background:#12222d;color:var(--accent);font-weight:900;flex:none}.avatar-xs{width:30px;height:30px}.avatar-lg{width:84px;height:84px;font-size:28px}main{padding:42px 0 20px}.hero,.profile{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.profile{justify-content:flex-start;align-items:center}.hero h1,.profile h1{font-size:clamp(38px,5vw,64px);line-height:1;margin:8px 0 10px}.hero h1 span{color:var(--accent)}.hero p,.profile p{margin:0;color:var(--muted)}.ghost,.login-btn{display:inline-flex;border:1px solid var(--border);background:var(--soft);padding:12px 18px;border-radius:14px;font-weight:800}.filters{display:flex;gap:14px;flex-wrap:wrap;padding:13px 15px;margin-bottom:22px;border:1px solid var(--line);border-radius:18px;background:rgba(7,18,26,.72)}.filters small{color:#657887;font-weight:900;letter-spacing:.16em;margin-right:4px}.filters .event{font-size:11px}.stats{display:grid;grid-template-columns:minmax(350px,.78fr) minmax(500px,1.22fr);gap:20px}.left,.right{display:flex;flex-direction:column;gap:16px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.metrics article,.panel,.empty,.match,.login-card{background:linear-gradient(180deg,rgba(14,28,38,.92),rgba(9,21,29,.9));border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.22)}.metrics article{padding:17px}.metrics span{display:block;color:var(--muted);font-size:12px}.metrics b{display:block;font-size:30px;margin-top:8px}.accent,.accent-text,.chart-head b{color:var(--accent)!important}.gold{color:var(--gold)!important}.panel{padding:19px}.panel h4{margin:0 0 12px;color:#8496a4}.place{display:grid;grid-template-columns:45px 55px 1fr 58px;gap:9px;align-items:center;min-height:40px}.place strong{text-align:right}progress{appearance:none;width:100%;height:9px;border:0;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}progress::-webkit-progress-bar{background:rgba(255,255,255,.08)}progress::-webkit-progress-value,progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}.split{display:flex;justify-content:space-between;gap:12px;color:#b8c4cc;font-size:13px;margin-top:10px}.play{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.play>div{padding:13px 9px;border-radius:13px;background:rgba(255,255,255,.035);text-align:center}.play b{display:block;font-size:24px}.play span{color:var(--muted);font-size:11px}.chart-panel{min-height:420px}.chart-head,.section-head{display:flex;justify-content:space-between;align-items:flex-end}.chart-head h3,.section-head h3,.hand h3{margin:3px 0;font-size:22px}.chart-head>span{color:var(--muted)}.chart-head b{font-size:28px}.chart{width:100%;height:auto}.chart .grid{stroke:rgba(255,255,255,.08);stroke-dasharray:3 6}.chart text{fill:#7e909c;font-size:13px}.chart .zero{stroke:rgba(246,200,92,.4)}.chart .line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart circle{fill:#08151d;stroke:var(--accent2);stroke-width:3}.hand{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:center}.hand em{font-style:normal;display:inline-block;padding:5px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--border);color:var(--accent2);font-size:11px;font-weight:900}.hand p{color:var(--muted);font-size:12px}.rates{display:grid;grid-template-columns:repeat(3,1fr)}.rates>div{padding:8px 16px;border-left:1px solid var(--line)}.rates span{display:block;color:var(--muted);font-size:12px}.rates b{display:block;font-size:23px;margin-top:4px}.below{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.section-head>a{color:var(--accent);font-size:12px}.mini{list-style:none;margin:10px 0 0;padding:0}.mini li{display:grid;grid-template-columns:30px 30px 1fr auto 42px;gap:8px;align-items:center;min-height:44px;border-top:1px solid rgba(255,255,255,.05)}.mini li:first-child{border-top:0}.mini li>span{color:var(--accent);font-weight:900}.mini small,.recent span,.recent small{color:var(--muted)}.recent>div{display:grid;grid-template-columns:140px 1fr auto;gap:10px;min-height:43px;align-items:center;border-top:1px solid rgba(255,255,255,.05);font-size:12px}.recent>div:first-child{border-top:0}.tabs{margin-bottom:14px}.table{padding:13px 17px}.scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:880px}th{text-align:left;color:#738592;font-size:10px;letter-spacing:.08em;padding:10px 8px;border-bottom:1px solid var(--line)}td{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px}.rank{color:var(--accent);font-size:17px;font-weight:900}.player-link{display:inline-flex;align-items:center;gap:8px;font-weight:800}.match-list{display:flex;flex-direction:column;gap:13px}.match{padding:17px}.match-meta{display:grid;grid-template-columns:170px 1fr auto;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--line)}.match-meta span,.match-meta small{color:var(--muted);font-size:12px}.match-players{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.match-players>div{display:grid;grid-template-columns:28px 30px minmax(90px,1fr) auto 70px auto;gap:8px;align-items:center;padding:9px;border-radius:12px;background:rgba(255,255,255,.027);font-size:12px}.match-rank{color:var(--accent);font-size:18px;font-weight:900}.match-players strong{color:var(--accent)}.match-players small{color:var(--muted)}.login{min-height:calc(100vh - 40px);display:grid;place-items:center}.login-card{width:min(620px,100%);padding:40px}.login-card h1{font-size:clamp(38px,7vw,60px);line-height:1;margin:12px 0 18px}.login-card p{color:var(--muted);line-height:1.7}.login-btn{width:100%;flex-direction:column;align-items:center;margin-top:18px}.login-btn small{font-size:11px;color:#c7d1d8;margin-top:2px}.privacy,.error{margin-top:18px;padding:14px;border-radius:13px;background:rgba(255,255,255,.03);color:#8295a3;font-size:12px;line-height:1.6}.error{border:1px solid rgba(255,110,125,.28);color:#ffc2c9}.empty{padding:35px;text-align:center;color:var(--muted)}footer{display:flex;justify-content:space-between;color:#60717e;font-size:11px;padding-top:22px}
@media(max-width:1000px){header{grid-template-columns:1fr auto}nav{grid-row:2;grid-column:1/-1;justify-self:center;margin-bottom:10px}.stats{grid-template-columns:1fr}.below{grid-template-columns:1fr}.hand{grid-template-columns:1fr}.match-players{grid-template-columns:1fr}}
@media(max-width:680px){.shell{padding:0 14px 18px}header{min-height:78px}.brand strong{font-size:14px}.user span{display:none}nav{width:100%;justify-content:space-between;overflow:auto}main{padding-top:28px}.hero{align-items:flex-start;flex-direction:column}.hero h1,.profile h1{font-size:40px}.filters{padding:10px}.filters>div{width:100%}.metrics{grid-template-columns:1fr 1fr}.metrics article:last-child{grid-column:1/-1}.place{grid-template-columns:40px 45px 1fr 52px;gap:5px}.play{grid-template-columns:1fr}.split{flex-direction:column}.rates{grid-template-columns:1fr}.rates>div{border-left:0;border-top:1px solid var(--line);padding:11px 0}.recent>div{grid-template-columns:1fr}.match-meta{grid-template-columns:1fr}.match-players>div{grid-template-columns:28px 30px minmax(90px,1fr) auto}.match-players>div>span:nth-of-type(2),.match-players small{display:none}.login-card{padding:28px 22px}.orn{opacity:.05}footer{flex-direction:column;gap:6px}}

/* =========================================================
   Background Rotation v4
   ONLY the background art rotates. Dashboard UI stays phase1.
   Seven motifs: 東 南 西 北 白 發 中
   ========================================================= */
body{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg,#09141d,#071018 68%);
}
.bg-stage{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
  background:#061018;
}
.bg-layer{
  position:absolute;
  inset:-1.5%;
  opacity:0;
  transition:opacity 4.5s ease-in-out;
  will-change:opacity;
}
.bg-layer.is-active{opacity:1}
.bg-art{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:scale(1.025);
  filter:brightness(.80) saturate(.95);
  transition:filter 4.5s ease,transform 9s ease;
}
.bg-layer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(3,10,15,.02) 0%,rgba(3,10,15,.09) 36%,rgba(3,9,14,.34) 72%,rgba(2,7,11,.64) 100%),
    linear-gradient(180deg,rgba(2,8,13,.02),rgba(2,8,13,.10) 45%,rgba(2,8,13,.30));
}
.bg-layer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.42;
  background:radial-gradient(circle at var(--glow-x,80%) var(--glow-y,18%),var(--motif-glow,rgba(64,220,210,.16)),transparent 35rem);
  mix-blend-mode:screen;
}
.bg-glyph{
  position:absolute;
  z-index:3;
  top:var(--glyph-top,11vh);
  right:var(--glyph-right,5vw);
  left:var(--glyph-left,auto);
  bottom:var(--glyph-bottom,auto);
  font-family:"Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(110px,13vw,250px);
  font-weight:700;
  line-height:1;
  color:var(--motif-color,#d7ac67);
  opacity:.095;
  text-shadow:0 0 42px color-mix(in srgb,var(--motif-color,#d7ac67) 30%,transparent);
  user-select:none;
}

/* 東 — cyan/gold, rising east */
.bg-layer[data-motif="east"]{--motif-color:#d9b46e;--motif-glow:rgba(38,223,208,.20);--glow-x:80%;--glow-y:14%;--glyph-top:11vh;--glyph-right:5vw}
.bg-layer[data-motif="east"] .bg-art{background-image:url('/assets/bg-yonma.webp');filter:brightness(.83) saturate(1.02) hue-rotate(0deg)}

/* 南 — warm crimson/gold */
.bg-layer[data-motif="south"]{--motif-color:#e5a15e;--motif-glow:rgba(210,75,82,.18);--glow-x:18%;--glow-y:75%;--glyph-top:auto;--glyph-bottom:8vh;--glyph-right:6vw}
.bg-layer[data-motif="south"] .bg-art{background-image:url('/assets/bg-sanma.webp');filter:brightness(.78) saturate(1.08) hue-rotate(-30deg);transform:scale(1.04)}

/* 西 — pale gold, mirrored composition */
.bg-layer[data-motif="west"]{--motif-color:#e2c98e;--motif-glow:rgba(224,191,124,.13);--glow-x:22%;--glow-y:18%;--glyph-top:12vh;--glyph-left:5vw;--glyph-right:auto}
.bg-layer[data-motif="west"] .bg-art{background-image:url('/assets/bg-yonma.webp');filter:brightness(.80) saturate(.78) sepia(.12) hue-rotate(24deg);transform:scaleX(-1) scale(1.035)}

/* 北 — deep indigo / winter night */
.bg-layer[data-motif="north"]{--motif-color:#9eb8d7;--motif-glow:rgba(80,112,220,.18);--glow-x:76%;--glow-y:72%;--glyph-top:auto;--glyph-bottom:8vh;--glyph-left:5vw;--glyph-right:auto}
.bg-layer[data-motif="north"] .bg-art{background-image:url('/assets/bg-yonma.webp');filter:brightness(.67) saturate(.82) hue-rotate(34deg);transform:scale(1.045)}

/* 白 — mist, low saturation */
.bg-layer[data-motif="white"]{--motif-color:#edf1ea;--motif-glow:rgba(225,235,235,.12);--glow-x:50%;--glow-y:18%;--glyph-top:10vh;--glyph-right:7vw}
.bg-layer[data-motif="white"] .bg-art{background-image:url('/assets/bg-sanma.webp');filter:brightness(.88) saturate(.42) contrast(.96);transform:scale(1.03)}

/* 發 — jade */
.bg-layer[data-motif="green"]{--motif-color:#85d6ae;--motif-glow:rgba(65,210,145,.18);--glow-x:18%;--glow-y:26%;--glyph-top:11vh;--glyph-left:5vw;--glyph-right:auto}
.bg-layer[data-motif="green"] .bg-art{background-image:url('/assets/bg-yonma.webp');filter:brightness(.79) saturate(1.04) hue-rotate(-18deg);transform:scale(1.035)}

/* 中 — vermilion / gold */
.bg-layer[data-motif="red"]{--motif-color:#e7a06a;--motif-glow:rgba(218,63,71,.20);--glow-x:82%;--glow-y:25%;--glyph-top:11vh;--glyph-right:5vw}
.bg-layer[data-motif="red"] .bg-art{background-image:url('/assets/bg-sanma.webp');filter:brightness(.76) saturate(1.20) hue-rotate(-42deg);transform:scale(1.04)}

/* Keep the dashboard readable while allowing art to show through. */
.metrics article,.panel,.empty,.match,.login-card{backdrop-filter:blur(2px)}
.orn{z-index:-1;opacity:.055}
.shell{position:relative;z-index:1}

@media(max-width:680px){
  .bg-layer{inset:-3%}
  .bg-art{background-size:auto 100vh;background-position:center top}
  .bg-glyph{font-size:clamp(86px,26vw,150px);opacity:.075}
  .bg-layer::before{background:linear-gradient(180deg,rgba(3,9,14,.18),rgba(3,9,14,.38))}
}
@media(prefers-reduced-motion:reduce){
  .bg-layer{transition:none!important}
  .bg-art{transition:none!important}
}