/*
 * ============================================================
 *  SUMO SITE — style.css
 *  Dark Japanese aesthetic: red/gold on near-black backgrounds
 *
 *  Sections:
 *   1. CSS Variables & Reset
 *   2. Hero Section
 *   3. Countdown Bar
 *   4. Navigation
 *   5. Section Layout
 *   6. Loader & Error
 *   7. Matches (Torikumi)
 *   8. Modals & Overlays
 *   9. Bout Animation
 *  10. Rankings (Banzuke)
 *  11. Profile Modal
 *  12. Compare Modal
 *  13. Heya (Stables)
 *  14. Kimarite
 *  15. Schedule
 *  16. Cache Status Bar
 *  17. Footer & Toast
 *  18. Responsive
 * ============================================================
 */

:root {
  --red:#C0392B;
  --deep-red:#8B1A1A;
  --gold:#D4A843;
  --dark:#0A0806;
  --dark2:#120E09;
  --dark3:#1C1510;
  --dark4:#261E16;
  --text:#F5ECD7;
  --muted:#8A7A62;
  --border:rgba(212,168,67,0.2);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  background:var(--dark);
  color:var(--text);
  font-family:'Noto Sans JP',sans-serif;
  overflow-x:hidden;
}

.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,#2A1A0A 0%,var(--dark) 70%);
}

.hero-rings {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.hero-rings div {
  position:absolute;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid;
  animation:pulse 4s ease-in-out infinite;
}

.hero-rings div:nth-child(1) {
  width:600px;
  height:600px;
  border-color:rgba(212,168,67,.08);
}

.hero-rings div:nth-child(2) {
  width:820px;
  height:820px;
  border-color:rgba(212,168,67,.05);
  animation-delay:.9s;
}

.hero-rings div:nth-child(3) {
  width:1040px;
  height:1040px;
  border-color:rgba(192,57,43,.04);
  animation-delay:1.8s;
}

@keyframes pulse {
0%,100% {
  opacity:.6;
  transform:translate(-50%,-50%) scale(1);
}

50% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1.02);
}

}

.hero-kanji {
  position:absolute;
  font-family:'Noto Serif JP',serif;
  font-weight:900;
  color:rgba(212,168,67,.04);
  font-size:min(600px,80vw);
  line-height:1;
  user-select:none;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.hero-content {
  position:relative;
  z-index:2;
  text-align:center;
}

.hero-label {
  font-size:13px;
  letter-spacing:6px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:16px;
  animation:fadeUp .8s ease forwards;
  opacity:0;
}

.hero-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,14vw,180px);
  line-height:.85;
  animation:fadeUp .8s ease .2s forwards;
  opacity:0;
}

.hero-title span {
  color:var(--red);
}

.hero-jp {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(24px,4vw,48px);
  font-weight:900;
  color:var(--gold);
  letter-spacing:12px;
  margin-top:8px;
  animation:fadeUp .8s ease .4s forwards;
  opacity:0;
}

.hero-meta {
  margin-top:40px;
  padding:16px 48px;
  background:linear-gradient(135deg,var(--dark3),var(--dark4));
  border:1px solid var(--border);
  border-radius:4px;
  animation:fadeUp .8s ease .6s forwards;
  opacity:0;
}

.hero-meta .bn {
  font-family:'Bebas Neue';
  font-size:28px;
  letter-spacing:4px;
  color:var(--gold);
}

.hero-meta .bd {
  font-size:12px;
  color:var(--muted);
  letter-spacing:3px;
  margin-top:4px;
}

.scroll-hint {
  position:absolute;
  bottom:40px;
  left:0;
  right:0;
  margin:0 auto;
  width:max-content;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:3px;
  animation:fadeUp 1s ease 1.2s forwards;
  opacity:0;
}

.scroll-line {
  width:1px;
  height:60px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:sline 2s ease infinite;
}

@keyframes sline {
0%,100% {
  transform:scaleY(1)}

50% {
  transform:scaleY(.5) translateY(20px)}

}

@keyframes fadeUp {
from {
  opacity:0;
  transform:translateY(30px);
}

to {
  opacity:1;
  transform:translateY(0);
}

}

.cbar {
  background:linear-gradient(90deg,var(--dark3),var(--dark4));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}

.clabel {
  font-size:11px;
  letter-spacing:3px;
  color:var(--muted);
  text-transform:uppercase;
}

.cnums {
  display:flex;
  align-items:center;
  gap:8px;
}

.ci {
  text-align:center;
}

.cn {
  font-family:'Bebas Neue';
  font-size:52px;
  color:var(--gold);
  line-height:1;
  min-width:60px;
}

.cu {
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}

.csep {
  font-family:'Bebas Neue';
  font-size:40px;
  color:var(--red);
  line-height:1;
}

nav {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(10,8,6,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 40px;
  display:flex;
  align-items:center;
}

.nav-logo {
  font-family:'Bebas Neue';
  font-size:28px;
  letter-spacing:3px;
  padding:16px 0;
  margin-right:40px;
  flex-shrink:0;
  cursor:pointer;
}

.nav-logo span {
  color:var(--red);
}

.nav-links {
  display:flex;
  flex:1;
  overflow-x:auto;
}

.nl {
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  padding:20px 18px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .2s;
  white-space:nowrap;
}

.nl:hover,.nl.active {
  color:var(--text);
  border-bottom-color:var(--gold);
}

.live-pill {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:20px;
  background:rgba(192,57,43,.1);
  border:1px solid rgba(192,57,43,.3);
  font-size:10px;
  letter-spacing:2px;
  color:var(--red);
  flex-shrink:0;
}

.ldot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  animation:blink 1.2s ease infinite;
  flex-shrink:0;
}

@keyframes blink {
0%,100% {
  opacity:1}

50% {
  opacity:.2}

}

.section {
  padding:80px 40px;
  max-width:1400px;
  margin:0 auto;
}

.sh {
  display:flex;
  align-items:baseline;
  gap:24px;
  margin-bottom:48px;
}

.sn {
  font-family:'Bebas Neue';
  font-size:80px;
  color:rgba(212,168,67,.08);
  line-height:1;
  flex-shrink:0;
}

.st {
  font-family:'Bebas Neue';
  font-size:48px;
  letter-spacing:4px;
  line-height:1;
}

.ss {
  font-size:11px;
  letter-spacing:4px;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:4px;
}

.sline {
  flex:1;
  height:1px;
  background:var(--border);
  margin-left:32px;
  align-self:center;
}

.loader {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:80px 0;
}

.loader-ring {
  width:48px;
  height:48px;
  border:3px solid var(--border);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin {
to {
  transform:rotate(360deg)}

}

.loader-text {
  font-size:11px;
  letter-spacing:3px;
  color:var(--muted);
  text-transform:uppercase;
}

.error-box {
  padding:24px 28px;
  background:rgba(192,57,43,.1);
  border:1px solid rgba(192,57,43,.3);
  border-radius:8px;
  color:var(--red);
  font-size:13px;
}
/* UPCOMING BASHO NOTICE */
.info-box {
  padding:60px 28px 52px;
  background:linear-gradient(160deg,rgba(212,168,67,.07) 0%,rgba(212,168,67,.02) 100%);
  border:1px solid rgba(212,168,67,.35);
  border-radius:8px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.info-box::before {
  content:'相';
  position:absolute;
  font-family:'Noto Serif JP',serif;
  font-weight:900;
  font-size:320px;
  color:rgba(212,168,67,.04);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  line-height:1;
}

.upcoming-notice-title {
  font-family:'Bebas Neue';
  font-size:44px;
  letter-spacing:6px;
  color:var(--gold);
  margin-bottom:4px;
  position:relative;
}

.upcoming-notice-days {
  font-family:'Bebas Neue';
  font-size:96px;
  letter-spacing:2px;
  color:var(--text);
  line-height:1;
  margin:12px 0 4px;
  position:relative;
}

.upcoming-notice-days-label {
  font-size:11px;
  letter-spacing:5px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:20px;
  position:relative;
}

.upcoming-notice-sub {
  font-size:11px;
  letter-spacing:3px;
  color:rgba(138,122,98,.7);
  text-transform:uppercase;
  margin-bottom:32px;
  position:relative;
}

.upcoming-notice-btn {
  display:inline-block;
  padding:14px 48px;
  background:linear-gradient(135deg,rgba(212,168,67,.14),rgba(212,168,67,.06));
  border:1px solid var(--gold);
  border-radius:4px;
  color:var(--gold);
  font-family:'Bebas Neue';
  font-size:20px;
  letter-spacing:4px;
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  position:relative;
}

.upcoming-notice-btn:hover {
  background:rgba(212,168,67,.22);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,168,67,.15);
}
/* MATCHES */
.mg {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mc {
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:20px 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  cursor:pointer;
  transition:all .3s;
}

.mc:hover {
  border-color:rgba(212,168,67,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.mc.wl .fr-side {
  opacity:.3;
}

.mc.wr .fl-side {
  opacity:.3;
}

.fighter-side {
  display:flex;
  align-items:center;
  gap:14px;
}

.fr-side {
  flex-direction:row-reverse;
  text-align:right;
}

.favatar {
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid var(--border);
  background:var(--dark4);
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.favatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.favatar.yokozuna {
  border-color:var(--gold);
}

.favatar.ozeki {
  border-color:#CD7F32;
}

.favatar.winner {
  border-color:var(--gold);
  box-shadow:0 0 10px rgba(212,168,67,.5);
}

.frank {
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

.frank.yokozuna {
  color:var(--gold);
}

.frank.ozeki {
  color:#CD7F32;
}

.fname {
  font-family:'Noto Serif JP';
  font-size:18px;
  font-weight:700;
  margin-top:2px;
}

.mct {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.vs {
  font-family:'Bebas Neue';
  font-size:28px;
  color:var(--red);
}

.bout-label {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}

.rb {
  padding:3px 10px;
  border-radius:20px;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:700;
}

.rb.done {
  background:rgba(192,57,43,.2);
  color:var(--red);
  border:1px solid rgba(192,57,43,.4);
}

.rb.upcoming {
  background:rgba(212,168,67,.1);
  color:var(--gold);
  border:1px solid var(--border);
}

.ktag {
  font-size:10px;
  color:var(--muted);
  text-align:center;
}

.day-sel {
  display:flex;
  gap:6px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.day-btn {
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s;
  font-family:'Bebas Neue';
  font-size:16px;
}

.day-btn:hover,.day-btn.active {
  background:rgba(212,168,67,.1);
  border-color:var(--gold);
  color:var(--gold);
}

.day-btn.done {
  background:rgba(212,168,67,.04);
  border-color:rgba(212,168,67,.15);
  color:rgba(138,122,98,.7);
}

/* OVERLAY */
.overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}

.overlay.on {
  opacity:1;
  pointer-events:all;
}

.modal {
  background:var(--dark2);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transform:scale(.9);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  width:min(680px,95vw);
  max-height:90vh;
  overflow-y:auto;
}

.overlay.on .modal {
  transform:scale(1);
}

.mhdr {
  background:linear-gradient(135deg,var(--dark3),var(--dark4));
  border-bottom:1px solid var(--border);
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
}

.mtitle {
  font-family:'Bebas Neue';
  font-size:24px;
  letter-spacing:4px;
  color:var(--gold);
}

.mclose {
  background:none;
  border:none;
  color:var(--muted);
  font-size:24px;
  cursor:pointer;
  line-height:1;
}

.mclose:hover {
  color:var(--text);
}

/* BOUT */
.marena {
  padding:40px 28px;
}

.dring {
  position:relative;
  width:260px;
  height:260px;
  margin:0 auto;
  border-radius:50%;
  border:3px solid rgba(212,168,67,.25);
  background:radial-gradient(circle,rgba(80,50,20,.5) 0%,rgba(20,14,8,.9) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.dring::before {
  content:'';
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:1px solid rgba(212,168,67,.12);
}

.bfighters {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.bf {
  font-size:56px;
  transition:all .5s cubic-bezier(.68,-.55,.27,1.55);
}

.bfr {
  transform:scaleX(-1);
}

.bimpact {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bebas Neue';
  font-size:80px;
  color:var(--gold);
  opacity:0;
  pointer-events:none;
}

.bimpact.show {
  animation:ipop 1.5s ease forwards;
}

@keyframes ipop {
0% {
  opacity:0;
  transform:scale(.3)}

20% {
  opacity:1;
  transform:scale(1.4)}

40%,70% {
  opacity:1;
  transform:scale(1)}

100% {
  opacity:0;
  transform:scale(.8)}

}

@keyframes quake {
0%,100% {
  transform:translate(0)}

10% {
  transform:translate(-8px,4px)}

30% {
  transform:translate(8px,-4px)}

50% {
  transform:translate(-6px,6px)}

70% {
  transform:translate(6px,-2px)}

90% {
  transform:translate(-4px,4px)}

}

.shake {
  animation:quake .5s ease;
}

.bres {
  text-align:center;
  margin-top:24px;
  padding:0 16px;
}

.brname {
  font-family:'Bebas Neue';
  font-size:40px;
  color:var(--gold);
  letter-spacing:4px;
}

.brsub {
  font-size:12px;
  letter-spacing:3px;
  color:var(--muted);
}

.brkm {
  display:inline-block;
  margin-top:10px;
  padding:8px 24px;
  background:rgba(192,57,43,.15);
  border:1px solid rgba(192,57,43,.4);
  border-radius:4px;
  font-size:13px;
  letter-spacing:2px;
  color:var(--red);
}

.playbtn {
  display:block;
  margin:16px auto 0;
  padding:12px 40px;
  background:linear-gradient(135deg,var(--deep-red),var(--red));
  border:none;
  border-radius:4px;
  color:#fff;
  font-family:'Bebas Neue';
  font-size:22px;
  letter-spacing:4px;
  cursor:pointer;
  transition:all .2s;
}

.playbtn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(192,57,43,.4);
}

/* RANKINGS */
.rank-filters {
  display:flex;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.rf-btn {
  padding:7px 18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s;
}

.rf-btn:hover,.rf-btn.active {
  background:rgba(212,168,67,.1);
  border-color:var(--gold);
  color:var(--gold);
}

.compare-bar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
  padding:14px 18px;
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  flex-wrap:wrap;
}

.compare-bar>span {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  flex-shrink:0;
}

.compare-sel {
  display:flex;
  gap:8px;
  flex:1;
  min-width:180px;
}

.compare-slot {
  padding:7px 14px;
  border:1px dashed var(--border);
  border-radius:4px;
  font-size:11px;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s;
  flex:1;
  text-align:center;
}

.compare-slot.filled {
  border-color:var(--gold);
  color:var(--gold);
  border-style:solid;
}

.compare-slot.selecting {
  border-color:var(--red);
  color:var(--red);
  animation:blink 1s infinite;
}

.compare-btn {
  padding:8px 22px;
  background:linear-gradient(135deg,var(--deep-red),var(--red));
  border:none;
  border-radius:4px;
  color:#fff;
  font-family:'Bebas Neue';
  font-size:18px;
  letter-spacing:3px;
  cursor:pointer;
  transition:all .2s;
}

.compare-btn:disabled {
  opacity:.35;
  cursor:not-allowed;
}

.clear-btn {
  padding:8px 14px;
  background:none;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  transition:all .2s;
}

.clear-btn:hover {
  border-color:var(--red);
  color:var(--red);
}

.rg {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.rc {
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}

.rc:hover {
  border-color:rgba(212,168,67,.4);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.rc::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:3px;
  height:100%;
  opacity:0;
  transition:opacity .3s;
}

.rc:hover::after {
  opacity:1;
}

.rc.yokozuna::after {
  background:linear-gradient(to bottom,var(--gold),transparent);
}

.rc.ozeki::after {
  background:linear-gradient(to bottom,#CD7F32,transparent);
}

.rc.selected {
  border-color:var(--gold);
  background:rgba(212,168,67,.04);
}

.rc.picking {
  cursor:crosshair;
}

.rc-avatar {
  width:52px;
  height:64px;
  border-radius:4px;
  overflow:hidden;
  background:var(--dark4);
  flex-shrink:0;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.rc-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.rinfo {
  flex:1;
  min-width:0;
}

.rbadge {
  display:inline-block;
  padding:2px 7px;
  border-radius:2px;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:5px;
}

.rbadge.yokozuna {
  background:rgba(212,168,67,.15);
  color:var(--gold);
  border:1px solid rgba(212,168,67,.3);
}

.rbadge.ozeki {
  background:rgba(205,127,50,.15);
  color:#CD7F32;
  border:1px solid rgba(205,127,50,.3);
}

.rbadge.sekiwake {
  background:rgba(180,120,80,.15);
  color:#B47850;
  border:1px solid rgba(180,120,80,.3);
}

.rbadge.komusubi {
  background:rgba(158,158,158,.15);
  color:#9E9E9E;
  border:1px solid rgba(158,158,158,.3);
}

.rbadge.maegashira {
  background:rgba(100,130,160,.1);
  color:#7ab0c4;
  border:1px solid rgba(100,130,160,.2);
}

.rname {
  font-family:'Noto Serif JP';
  font-size:17px;
  font-weight:700;
}

.rjp {
  font-size:11px;
  color:var(--muted);
  margin-top:1px;
}

.heya-tag {
  font-size:9px;
  color:var(--muted);
  margin-left:4px;
  padding:1px 5px;
  border:1px solid var(--border);
  border-radius:2px;
}

.rstats {
  display:flex;
  gap:14px;
  margin-top:10px;
}

.rstat-item {
  text-align:center;
}

.rsn {
  font-family:'Bebas Neue';
  font-size:22px;
  line-height:1;
}

.rsn.w {
  color:var(--gold);
}

.rsn.l {
  color:var(--red);
}

.rsl {
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}

.rsdiv {
  width:1px;
  background:var(--border);
  align-self:stretch;
  margin:2px 0;
}

.wbar {
  margin-top:10px;
  height:3px;
  background:var(--dark4);
  border-radius:2px;
  overflow:hidden;
}

.wbar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--deep-red),var(--gold));
  border-radius:2px;
  transition:width 1s ease;
}

/* PROFILE */
.profile-modal {
  width:min(800px,95vw);
}

.profile-body {
  padding:28px;
}

.profile-top {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
}

.profile-photo {
  width:160px;
  height:200px;
  border-radius:8px;
  overflow:hidden;
  background:var(--dark4);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
}

.profile-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-photo.yokozuna {
  border-color:var(--gold);
}

.profile-photo.ozeki {
  border-color:#CD7F32;
}

.profile-name {
  font-family:'Noto Serif JP';
  font-size:30px;
  font-weight:900;
}

.profile-jp {
  font-size:15px;
  color:var(--muted);
  margin-top:4px;
}

.heya-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:4px;
  background:rgba(212,168,67,.08);
  border:1px solid rgba(212,168,67,.2);
  font-size:12px;
  margin-top:12px;
  color:var(--gold);
}

.pmg {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:16px;
}

.pmeta {
  background:var(--dark4);
  border:1px solid var(--border);
  border-radius:4px;
  padding:8px 12px;
}

.pmeta-label {
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}

.pmeta-val {
  font-size:14px;
  font-weight:700;
  margin-top:2px;
}

.pstats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:16px;
}

.pstat {
  background:var(--dark4);
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px;
  text-align:center;
}

.pstn {
  font-family:'Bebas Neue';
  font-size:34px;
  line-height:1;
}

.pstn.gold {
  color:var(--gold);
}

.pstn.red {
  color:var(--red);
}

.pstn.muted {
  color:var(--muted);
}

.pstl {
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:3px;
}

.rec-section {
  margin-top:20px;
}

.rec-title {
  font-size:10px;
  letter-spacing:3px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:10px;
}

.rec-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:5px;
}

.rd {
  background:var(--dark4);
  border-radius:4px;
  padding:6px 5px;
  text-align:center;
  border:1px solid var(--border);
}

.rd.win {
  border-color:rgba(212,168,67,.3);
  background:rgba(212,168,67,.04);
}

.rd.loss {
  border-color:rgba(192,57,43,.3);
  background:rgba(192,57,43,.04);
}

.rd.absent {
  opacity:.35;
}

.rd-n {
  font-size:8px;
  color:var(--muted);
}

.rd-r {
  font-size:11px;
  font-weight:700;
  margin:2px 0;
}

.rd.win .rd-r {
  color:var(--gold);
}

.rd.loss .rd-r {
  color:var(--red);
}

.rd-o {
  font-size:8px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* HEYA */
.heya-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}

.heya-card {
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:all .3s;
}

.heya-card:hover {
  border-color:rgba(212,168,67,.3);
  transform:translateY(-3px);
}

.heya-header {
  padding:18px 20px;
  background:linear-gradient(135deg,var(--dark4),var(--dark3));
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.heya-name {
  font-family:'Bebas Neue';
  font-size:28px;
  letter-spacing:3px;
  color:var(--gold);
}

.heya-sub {
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
  letter-spacing:2px;
}

.heya-count {
  font-family:'Bebas Neue';
  font-size:44px;
  color:rgba(212,168,67,.12);
  line-height:1;
}

.heya-body {
  padding:14px 18px;
}

.heya-members {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.hmember {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  transition:transform .2s;
}

.hmember:hover {
  transform:translateY(-2px);
}

.hmember-av {
  width:44px;
  height:54px;
  border-radius:4px;
  overflow:hidden;
  background:var(--dark4);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.hmember-av img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.hmember-name {
  font-size:8px;
  color:var(--muted);
  max-width:44px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* COMPARE */
.cmp-modal {
  width:min(820px,95vw);
}

.cmp-header {
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:16px;
  padding:24px 28px;
  background:var(--dark3);
  border-bottom:1px solid var(--border);
}

.cmp-fighter {
  text-align:center;
}

.cmp-av {
  width:80px;
  height:100px;
  border-radius:6px;
  overflow:hidden;
  background:var(--dark4);
  border:2px solid var(--border);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}

.cmp-av img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.cmp-av.yokozuna {
  border-color:var(--gold);
}

.cmp-av.ozeki {
  border-color:#CD7F32;
}

.cmp-name {
  font-family:'Noto Serif JP';
  font-size:16px;
  font-weight:700;
  margin-top:10px;
}

.cmp-rank {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:3px;
}

.cmp-heya {
  font-size:10px;
  color:var(--gold);
  margin-top:3px;
}

.cmp-vs {
  font-family:'Bebas Neue';
  font-size:44px;
  color:var(--red);
  align-self:center;
  text-align:center;
}

.cmp-stats {
  padding:20px 28px;
}

.cmp-stats-title {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cmp-row {
  display:grid;
  grid-template-columns:90px 1fr 90px;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}

.cmp-val {
  font-family:'Bebas Neue';
  font-size:28px;
  line-height:1;
}

.cmp-val.lv {
  text-align:right;
}

.cmp-val.rv {
  text-align:left;
}

.cmp-val.w {
  color:var(--gold);
}

.cmp-bar-wrap {
}

.cmp-bar-label {
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;
  margin-bottom:5px;
}

.cmp-bar-cont {
  position:relative;
  height:8px;
  background:var(--dark4);
  border-radius:4px;
  overflow:hidden;
}

.cmp-bar-l {
  position:absolute;
  top:0;
  right:50%;
  height:100%;
  background:linear-gradient(to left,var(--gold),var(--deep-red));
  border-radius:4px 0 0 4px;
  transition:width 1.2s ease;
}

.cmp-bar-r {
  position:absolute;
  top:0;
  left:50%;
  height:100%;
  background:linear-gradient(to right,var(--gold),var(--deep-red));
  border-radius:0 4px 4px 0;
  transition:width 1.2s ease;
}

.cmp-h2h {
  margin:16px 28px;
  padding:16px;
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  text-align:center;
}

.cmp-h2h-title {
  font-size:10px;
  letter-spacing:3px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:6px;
}

.cmp-h2h-desc {
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  margin-bottom: 12px;
  font-style: italic;
}

.cmp-h2h-score {
  font-family:'Bebas Neue';
  font-size:48px;
  letter-spacing:8px;
  color:var(--gold);
}

/* SCHEDULE */
.bg2 {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}

.bc {
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:all .3s;
  cursor:pointer;
}

.bc:hover {
  border-color:rgba(212,168,67,.3);
  transform:translateY(-3px);
}

.bc.current-basho {
  border-color:rgba(192,57,43,.4);
}

.bch {
  padding:18px 20px;
  background:linear-gradient(135deg,var(--dark4),var(--dark3));
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.bm {
  font-family:'Bebas Neue';
  font-size:32px;
  color:var(--red);
  line-height:1;
}

.by {
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  letter-spacing:2px;
}

.bjp {
  font-family:'Noto Serif JP';
  font-size:24px;
  font-weight:900;
  color:rgba(212,168,67,.15);
}

.bcb {
  padding:14px 18px;
}

.bn2 {
  font-size:15px;
  font-weight:700;
}

.bv {
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}

.bdr {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}

.bdate {
  font-size:11px;
  color:var(--muted);
}

.bst {
  padding:3px 10px;
  border-radius:20px;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.bst.upcoming {
  background:rgba(212,168,67,.08);
  color:var(--gold);
  border:1px solid var(--border);
}

.bst.live {
  background:rgba(192,57,43,.15);
  color:var(--red);
  border:1px solid rgba(192,57,43,.4);
  animation:blink 1.5s ease infinite;
}

.bst.past {
  background:rgba(80,80,80,.1);
  color:var(--muted);
  border:1px solid rgba(80,80,80,.2);
}

/* KIMARITE */
.km-search {
  width:100%;
  max-width:400px;
  margin-bottom:20px;
  padding:10px 16px;
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  font-size:13px;
  outline:none;
}

.km-search:focus {
  border-color:var(--gold);
}

.km-search::placeholder {
  color:var(--muted);
}

.km-cats {
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.km-cat-btn {
  padding:6px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  letter-spacing:2px;
  cursor:pointer;
  transition:all .2s;
  text-transform:uppercase;
}

.km-cat-btn:hover,.km-cat-btn.active {
  background:rgba(192,57,43,.1);
  border-color:var(--red);
  color:var(--red);
}

.km-count {
  font-size:11px;
  color:var(--muted);
  margin-bottom:16px;
  letter-spacing:2px;
}

.kg {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:10px;
}

.kc {
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  transition:all .2s;
}

.kc:hover {
  border-color:rgba(192,57,43,.4);
  transform:translateY(-1px);
}

.kname {
  font-size:14px;
  font-weight:700;
}

.kcount {
  font-family:'Bebas Neue';
  font-size:28px;
  color:var(--gold);
  line-height:1;
  margin-top:6px;
}

.kcount-lbl {
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}

.kbar {
  margin-top:6px;
  height:3px;
  background:var(--dark4);
  border-radius:2px;
  overflow:hidden;
}

.kbar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--deep-red),var(--gold));
  border-radius:2px;
}

.klast {
  font-size:9px;
  color:var(--muted);
  margin-top:6px;
}

/* CACHE BAR */
.cache-bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:rgba(212,168,67,.03);
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.cache-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0;
}

.cache-dot.fresh {
  background:#4CAF50;
}

.cache-dot.cached {
  background:var(--gold);
}

.cache-txt {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  flex:1;
}

.cache-clear {
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:3px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  transition:all .2s;
  text-transform:uppercase;
}

.cache-clear:hover {
  border-color:var(--red);
  color:var(--red);
}

footer {
  border-top:1px solid var(--border);
  padding:48px 40px;
  text-align:center;
}

.flogo {
  font-family:'Noto Serif JP';
  font-size:48px;
  font-weight:900;
  color:rgba(212,168,67,.08);
  letter-spacing:8px;
}

.ftxt {
  font-size:11px;
  letter-spacing:3px;
  color:var(--muted);
  margin-top:16px;
  text-transform:uppercase;
}

.fsrc {
  font-size:10px;
  color:rgba(138,122,98,.4);
  margin-top:8px;
}

.page {
  display:none;
}

.page.active {
  display:block;
}

.toast {
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--dark3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 22px;
  font-size:12px;
  letter-spacing:1px;
  z-index:2000;
  transition:transform .3s;
  pointer-events:none;
}

.toast.show {
  transform:translateX(-50%) translateY(0);
}

@media(max-width:768px) {
nav {
  padding:0 16px;
}

.section {
  padding:48px 16px;
}

.mc {
  grid-template-columns:1fr;
  gap:10px;
}

.fr-side {
  flex-direction:row;
  text-align:right;
  justify-content:flex-end;
}

.rg,.bg2,.heya-grid {
  grid-template-columns:1fr;
}

.profile-top {
  grid-template-columns:1fr;
}

.cmp-header {
  grid-template-columns:1fr;
}

.cmp-vs {
  display:none;
}

}



/* ══════════════════════════════════════════════════════════════
   FIX #11 — SHIMMER loading effect
   Apply .shimmer to any element to get the sweep animation
   ══════════════════════════════════════════════════════════════ */
@keyframes shimmer-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.08) 40%,
    rgba(212,168,67,.18) 50%,
    rgba(212,168,67,.08) 60%,
    transparent 100%
  );
  background-size: 800px 100%;
  animation: shimmer-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
/* Shimmer skeleton placeholder (block version) */
.shimmer-block {
  background: var(--dark3);
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════
   FIX #1 — Win/Loss record badge on match cards
   ══════════════════════════════════════════════════════════════ */
.f-record {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--gold);
  margin-top: 3px;
  line-height: 1;
}
.mc.wl .fl-side .f-record { color: var(--gold); }
.mc.wl .fr-side .f-record,
.mc.wr .fl-side .f-record  { color: var(--muted); opacity: .6; }

/* ══════════════════════════════════════════════════════════════
   FIX #2 — Avatar images (placeholder system)
   ══════════════════════════════════════════════════════════════ */
.favatar img,
.rc-avatar img,
.profile-photo img,
.cmp-av img,
.hmember-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   FIX #4 — Previous Basho page styles
   ══════════════════════════════════════════════════════════════ */
.prev-block {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
}
.prev-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 20px;
  background: linear-gradient(135deg, var(--dark3), var(--dark4));
  border-bottom: 1px solid var(--border);
}
.prev-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 32px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.prev-tabs .day-btn {
  margin-bottom: -1px;
  border-bottom-color: transparent;
  border-radius: 4px 4px 0 0;
}
.prev-tabs .day-btn.active {
  background: rgba(212,168,67,.12);
  border-color: var(--gold);
  border-bottom-color: var(--dark2);
  color: var(--gold);
}
.prev-section {
  padding: 0 32px 32px;
}
.prev-divider {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prev-divider::before {
  content: '· · ·';
  color: var(--border);
  letter-spacing: 8px;
  font-size: 18px;
}

/* H2H name sub-label */
.cmp-h2h-names {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 1px;
}

.cmp-h2h-total {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .6;
}

/* ══════════════════════════════════════════════════════════════
   FIX #8 — Responsive improvements
   ══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .rg { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .bg2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .heya-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .kg { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .cmp-row { grid-template-columns: 70px 1fr 70px; }
}

/* Mobile */
@media (max-width: 768px) {
  nav { padding: 0 12px; gap: 0; }
  .nav-logo { font-size: 22px; margin-right: 12px; }
  .nl { padding: 16px 10px; font-size: 9px; letter-spacing: 2px; }
  .live-pill { display: none; }

  .section { padding: 40px 16px; }
  .sh { gap: 14px; margin-bottom: 28px; }
  .sn { font-size: 52px; }
  .st { font-size: 36px; }

  .hero-meta { padding: 12px 24px; }
  .cbar { padding: 14px 16px; gap: 16px; }
  .cn { font-size: 40px; min-width: 44px; }

  /* Matches: single column, stack fighters vertically */
  .mc {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .fr-side {
    flex-direction: row;
    text-align: left;
    justify-content: flex-end;
  }
  .mct { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .hidden-mobile { display: none !important; }

  /* Rankings: 1 col */
  .rg { grid-template-columns: 1fr; }
  .bg2 { grid-template-columns: 1fr; }
  .heya-grid { grid-template-columns: 1fr; }
  .kg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Profile modal */
  .profile-top { grid-template-columns: 1fr; gap: 16px; }
  .profile-photo { width: 120px; height: 140px; margin: 0 auto; }

  /* Compare modal */
  .cmp-header { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cmp-vs { font-size: 28px; grid-column: span 2; text-align: center; padding: 4px 0; }
  .cmp-row { grid-template-columns: 60px 1fr 60px; }
  .cmp-val { font-size: 22px; }
  .cmp-av { width: 72px; height: 84px; }

  /* Prev block */
  .prev-block-header { padding: 20px 16px 14px; }
  .prev-section { padding: 0 16px 24px; }
  .prev-tabs { padding: 12px 16px 0; }

  /* Day selector scroll */
  .day-sel { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .day-sel::-webkit-scrollbar { height: 3px; }
  .day-sel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Heya members */
  .heya-members { gap: 8px; }
  .hmember-av { width: 40px; height: 40px; }
}

/* Very small screens */
@media (max-width: 400px) {
  .hero-title { font-size: 70px; }
  .nl { padding: 14px 7px; font-size: 8px; }
  .sn { display: none; }
  .cn { font-size: 34px; min-width: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v10 ADDITIONS — Language switcher, Footer, FAQ, PWA
   ═══════════════════════════════════════════════════════════════════ */

/* ── Nav additions ─────────────────────────────────────────────── */
.nav-right {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto; flex-shrink: 0;
}
.faq-nl {
  color: var(--gold) !important;
  border-bottom: 1px solid rgba(212,168,67,.3);
  text-decoration: none;
}
.faq-nl:hover { border-bottom-color: var(--gold); }

/* ── Language switcher ──────────────────────────────────────────── */
.lang-sw { position: relative; }
.lang-cur {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: 6px 12px; border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  letter-spacing: 2px; cursor: pointer; display: flex;
  align-items: center; gap: 4px;
  transition: all .2s;
}
.lang-cur:hover { border-color: var(--gold); color: var(--gold); }
.lang-arrow { font-size: 10px; transition: transform .2s; }
.lang-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; min-width: 160px;
  z-index: 200; box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.lang-drop.open { display: flex; flex-direction: column; }
.lang-cur:focus + .lang-drop, .lang-sw:focus-within .lang-drop { display: flex; flex-direction: column; }
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 4px; color: var(--muted);
  text-decoration: none; transition: all .15s;
}
.lang-opt:hover { background: rgba(212,168,67,.08); color: var(--text); text-decoration: none; }
.lang-opt.active { color: var(--gold); }
.lang-code {
  font-family: 'Bebas Neue', sans-serif; font-size: 14px;
  letter-spacing: 2px; width: 28px; flex-shrink: 0;
}
.lang-name { font-size: 12px; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); margin-top: 80px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px; padding: 56px 40px 40px;
  max-width: 1200px; margin: 0 auto;
}
.footer-col {}
.footer-col-title {
  font-size: 9px; letter-spacing: 4px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: 13px; color: rgba(245,236,215,.6);
  text-decoration: none; transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.footer-links a:hover { color: var(--gold); }
.footer-rivalry {
  font-size: 12px; color: rgba(245,236,215,.5);
  padding: 4px 0; border-bottom: 1px solid rgba(212,168,67,.06);
}
.footer-rivalry strong { color: var(--text); font-size: 13px; }
.footer-rivalry .r-score {
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  color: var(--gold); margin-left: 6px;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 24px 40px; text-align: center;
}
.footer-logo {
  font-family: 'Noto Serif JP', serif; font-size: 40px;
  font-weight: 900; color: rgba(212,168,67,.06); letter-spacing: 8px;
}
.footer-data-txt {
  font-size: 11px; color: rgba(138,122,98,.4);
  margin-top: 8px; letter-spacing: 2px;
}
.footer-loading { text-align: center; padding: 40px; }

/* ── FAQ pages ─────────────────────────────────────────────────── */
.faq-page { max-width: 900px; margin: 0 auto; padding: 80px 40px; }
.faq-hero {
  text-align: center; padding: 80px 40px 60px;
  background: linear-gradient(180deg, rgba(26,16,8,.8) 0%, transparent 100%);
}
.faq-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px,8vw,80px); letter-spacing: 8px;
  color: var(--text); margin-bottom: 16px;
}
.faq-hero-desc { font-size: 16px; color: var(--muted); max-width: 600px; margin: 0 auto; }
.faq-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 32px 0;
}
.faq-cat-btn {
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 20px;
  background: transparent; color: var(--muted); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: all .2s; text-decoration: none;
}
.faq-cat-btn:hover, .faq-cat-btn.active {
  border-color: var(--gold); color: var(--gold); background: rgba(212,168,67,.08);
}
.faq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px;
  margin-top: 32px;
}
.faq-card {
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px; display: block;
  color: var(--text); text-decoration: none; transition: all .2s;
}
.faq-card:hover {
  border-color: rgba(212,168,67,.3); transform: translateY(-3px);
  text-decoration: none; color: var(--text);
}
.faq-card-cat {
  font-size: 9px; letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase; margin-bottom: 10px;
}
.faq-card-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.faq-card-desc  { font-size: 13px; color: var(--muted); line-height: 1.5; }
.faq-card-more  { font-size: 11px; color: var(--gold); margin-top: 14px; letter-spacing: 1px; }

/* FAQ Article */
.faq-article { max-width: 760px; margin: 0 auto; padding: 60px 40px 100px; }
.faq-article-back {
  font-size: 11px; letter-spacing: 3px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 40px; display: inline-block;
}
.faq-article-cat {
  font-size: 10px; letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase; margin-bottom: 12px;
}
.faq-article-title {
  font-family: 'Noto Serif JP', serif; font-size: clamp(28px,5vw,48px);
  font-weight: 900; line-height: 1.2; margin-bottom: 20px;
}
.faq-article-desc {
  font-size: 18px; color: var(--muted); line-height: 1.6;
  border-left: 3px solid var(--gold); padding-left: 20px; margin-bottom: 48px;
}
.faq-article-body { font-size: 16px; line-height: 1.8; color: rgba(245,236,215,.85); }
.faq-article-body p { margin-bottom: 20px; }
.faq-article-body h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 32px;
  letter-spacing: 3px; color: var(--gold); margin: 40px 0 16px;
}
.faq-article-body ul, .faq-article-body ol {
  padding-left: 24px; margin-bottom: 20px;
}
.faq-article-body li { margin-bottom: 8px; }
.faq-article-body strong { color: var(--text); }
.faq-article-body a { color: var(--gold); }
.faq-related { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border); }
.faq-related-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 24px;
  letter-spacing: 3px; color: var(--muted); margin-bottom: 20px;
}
.faq-related-list { display: flex; flex-direction: column; gap: 8px; }
.faq-related-list a {
  color: var(--text); text-decoration: none; font-size: 14px; padding: 8px 0;
  border-bottom: 1px solid rgba(212,168,67,.06);
}
.faq-related-list a:hover { color: var(--gold); }

/* ── PWA Install prompt ─────────────────────────────────────────── */
.pwa-prompt {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 500; background: var(--dark2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  max-width: 480px; width: calc(100% - 32px);
  animation: slideUp .4s ease;
}
@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.pwa-icon {
  font-family: 'Noto Serif JP', serif; font-size: 32px;
  font-weight: 900; color: var(--gold); flex-shrink: 0;
}
.pwa-text { flex: 1; min-width: 0; }
.pwa-title { font-size: 14px; font-weight: 700; }
.pwa-desc  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pwa-btn {
  background: linear-gradient(135deg, var(--deep-red), var(--red));
  color: #fff; border: none; border-radius: 6px; padding: 8px 16px;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.pwa-dismiss {
  background: transparent; border: none; color: var(--muted);
  font-size: 11px; cursor: pointer; padding: 4px 8px; flex-shrink: 0;
}

/* ── Responsive additions ───────────────────────────────────────── */
@media (max-width: 768px) {
  nav { flex-wrap: wrap; }
  .nav-right { margin-left: auto; }
  .footer-grid { padding: 40px 16px 32px; gap: 28px; }
  .footer-bottom { padding: 20px 16px; }
  .faq-page { padding: 48px 16px; }
  .faq-article { padding: 40px 16px 60px; }
  .lang-drop { right: auto; left: 0; }
}
@media (max-width: 480px) {
  .lang-name { display: none; }
  .lang-opt { justify-content: center; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* ── v10 Fix: FAQ alignment ─────────────────────────────────────────────── */
.faq-page, .faq-article { text-align: left; }
.faq-article-title, .faq-article-desc, .faq-article-back,
.faq-article-cat, .faq-article-body { text-align: left; }
.faq-card-title, .faq-card-desc, .faq-card-cat, .faq-card-more { text-align: left; }

/* ── v10 Fix: nav-logo color on static pages ─────────────────────────────── */
a.nav-logo { color: var(--text) !important; text-decoration: none; }
a.nav-logo span { color: var(--red) !important; }

/* ── v10 Fix: footer FAQ links left-aligned ─────────────────────────────── */
.footer-links { text-align: left; }
.footer-col { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   v10 PATCH: Missing v9 classes for basho/rikishi/day SEO pages
   ═══════════════════════════════════════════════════════════════════ */

/* ── Basho meta bar ───────────────────────────────────────────────── */
.basho-meta-bar {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-bottom: 40px; padding: 20px 24px;
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: 8px;
}
.bm-item {}
.bm-label {
  font-size: 9px; letter-spacing: 3px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 4px;
}
.bm-value { font-size: 16px; font-weight: 700; }

/* ── Section sub-title ────────────────────────────────────────────── */
.section-sub-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px;
  letter-spacing: 3px; color: var(--muted);
  margin-bottom: 20px; margin-top: 40px;
}

/* ── Banzuke grid (v9 class name used by basho.html template) ─────── */
.banzuke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* ── Day links on basho pages ─────────────────────────────────────── */
.day-links {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
}
a.day-btn {
  display: inline-block;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--muted);
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  text-decoration: none; transition: all .2s;
}
a.day-btn:hover, a.day-btn.active {
  background: rgba(212,168,67,.1); border-color: var(--gold);
  color: var(--gold); text-decoration: none;
}

/* ── Profile page (rikishi.html) ──────────────────────────────────── */
.profile-hero {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 48px; align-items: start;
  padding: 40px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.profile-photo {
  width: 140px; height: 160px; border-radius: 8px;
  overflow: hidden; border: 2px solid var(--border);
  background: var(--dark3);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-name {
  font-family: 'Noto Serif JP', serif; font-size: 36px;
  font-weight: 900; margin-bottom: 6px;
}
.profile-jp { font-size: 20px; color: var(--muted); margin-bottom: 12px; }
.pmg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pmeta {
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
}
.pmeta-label {
  font-size: 9px; letter-spacing: 2px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 3px;
}
.pmeta-val { font-size: 15px; font-weight: 700; }
.pstats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.pstat { text-align: center; }
.pstn {
  font-family: 'Bebas Neue', sans-serif; font-size: 36px; line-height: 1;
}
.pstn.gold { color: var(--gold); }
.pstn.red  { color: var(--red);  }
.pstn.muted{ color: var(--muted); }
.pstl {
  font-size: 9px; letter-spacing: 2px; color: var(--muted);
  text-transform: uppercase; margin-top: 4px;
}
.playbtn {
  display: inline-block; padding: 10px 28px; margin-top: 20px;
  background: linear-gradient(135deg, var(--deep-red), var(--red));
  color: #fff; font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 3px; border-radius: 4px;
  text-decoration: none; border: none; cursor: pointer;
}
.playbtn:hover { text-decoration: none; opacity: .9; }

/* ── Record grid (rikishi current basho day-by-day) ───────────────── */
.rec-section { margin-top: 32px; }
.rec-title {
  font-size: 11px; letter-spacing: 4px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 16px;
}
.rec-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rd {
  width: 48px; text-align: center; padding: 6px 4px;
  border-radius: 4px; border: 1px solid var(--border); font-size: 11px;
}
.rd.win  { background: rgba(212,168,67,.12); border-color: rgba(212,168,67,.3); }
.rd.loss { background: rgba(192,57,43,.1);  border-color: rgba(192,57,43,.3); }
.rd.absent { background: rgba(80,80,80,.1); color: var(--muted); }
.rd-n { font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.rd-r {
  font-family: 'Noto Serif JP', serif; font-size: 16px;
  font-weight: 700; margin: 2px 0;
}
.rd-o {
  font-size: 8px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Error box ────────────────────────────────────────────────────── */
.error-box {
  padding: 24px 28px;
  background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.3);
  border-radius: 8px; color: var(--red); font-size: 13px;
}

/* ── Heya badge ───────────────────────────────────────────────────── */
.heya-badge {
  display: inline-block; margin-bottom: 12px;
  font-size: 12px; color: var(--muted); letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   v10 PATCH: Modal scrollbar — thin, styled, consistent
   ═══════════════════════════════════════════════════════════════════ */

/* Override default scrollbar on modal */
.modal {
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: var(--border) transparent; /* Firefox */
}

/* Chrome / Safari / Edge */
.modal::-webkit-scrollbar {
  width: 4px;
}
.modal::-webkit-scrollbar-track {
  background: transparent;
}
.modal::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(212,168,67,.35);
}

/* Apply same thin scrollbar globally to any scrollable container */
.rg::-webkit-scrollbar,
.prof-body::-webkit-scrollbar,
.cmp-body::-webkit-scrollbar {
  width: 3px;
}
.rg::-webkit-scrollbar-thumb,
.prof-body::-webkit-scrollbar-thumb,
.cmp-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 3px;
}

/* ── Responsive additions for SEO pages ──────────────────────────── */
@media (max-width: 768px) {
  .profile-hero { grid-template-columns: 1fr; gap: 24px; }
  .profile-photo { width: 100px; height: 120px; }
  .profile-name { font-size: 28px; }
  .banzuke-grid { grid-template-columns: 1fr; }
  .basho-meta-bar { gap: 16px; padding: 16px; }
  .day-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .day-links::-webkit-scrollbar { height: 3px; }
  .day-links::-webkit-scrollbar-thumb { background: var(--border); }
}

/* ═══════════════════════════════════════════════════════════════════
   v10 patch6: Nav scrollbar hidden, share buttons
   ═══════════════════════════════════════════════════════════════════ */

/* Hide nav-links scrollbar — items still scroll on touch */
.nav-links { scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }

/* Share button in compare modal */
.cmp-share-btn {
  display: block; width: 100%;
  margin-top: 20px; padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted); font-size: 13px;
  letter-spacing: 1px; cursor: pointer;
  transition: all .2s; text-align: center;
}
.cmp-share-btn:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(212,168,67,.06);
}

/* Share button in day selector */
.day-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); font-size: 14px;
  cursor: pointer; transition: all .2s;
  vertical-align: middle; flex-shrink: 0;
}
.day-share-btn:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(212,168,67,.06);
}

/* ═══════════════════════════════════════════════════════════════════
   v10 patch9: FAQ search
   ═══════════════════════════════════════════════════════════════════ */

.faq-search-wrap {
  max-width: 640px;
  margin: 0 auto 36px;
  padding: 0 16px;
}
.faq-search-inner {
  position: relative; display: flex; align-items: center;
  background: var(--dark3); border: 1px solid var(--border);
  border-radius: 8px; transition: border-color .2s;
}
.faq-search-inner:focus-within {
  border-color: rgba(212,168,67,.5);
  box-shadow: 0 0 0 3px rgba(212,168,67,.08);
}
.faq-search-icon {
  position: absolute; left: 16px; font-size: 20px;
  color: var(--muted); pointer-events: none; line-height: 1;
}
.faq-search-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px; padding: 14px 44px 14px 48px;
}
.faq-search-input::placeholder { color: var(--muted); }
.faq-search-input::-webkit-search-decoration,
.faq-search-input::-webkit-search-cancel-button { display: none; }
.faq-search-clear {
  display: none; position: absolute; right: 12px;
  background: transparent; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 4px 8px;
  border-radius: 4px; transition: all .15s; line-height: 1;
}
.faq-search-clear:hover { color: var(--text); background: rgba(255,255,255,.05); }
.faq-search-info {
  text-align: center; font-size: 12px; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 20px;
}
.faq-no-results { text-align: center; padding: 60px 20px; color: var(--muted); }
.faq-no-results-icon { font-size: 48px; margin-bottom: 16px; opacity: .3; }
.faq-no-results-text { font-size: 15px; letter-spacing: 1px; }
.faq-highlight {
  background: rgba(212,168,67,.25); color: var(--gold);
  border-radius: 2px; padding: 0 2px;
}
@media (max-width: 480px) {
  .faq-search-input { font-size: 14px; padding: 12px 40px 12px 44px; }
}