/* ============================================================
   ohtani.watch — v4 shared shell
   One system, five pages. Every page: same nav, same footer,
   same ink, same grain, same seam. Page flavor lives in content.
   ============================================================ */
:root{
  --ink:#050A12;
  --panel:#0A1220;
  --panel-2:#0D1626;
  --blue:#005A9C;
  --blue-hi:#4FA3E8;
  --blue-soft:#9CC4E8;
  --red:#EF3E42;
  --red-soft:#F08A8D;
  --gold:#D9B24A;
  --green:#38D178;
  --white:#F4F7FC;
  --silver:#98A3B3;
  --line:rgba(152,178,208,.16);
  --disp:'Archivo Black','Noto Sans JP',sans-serif;
  --body:'Archivo','Noto Sans JP',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --jp:'Noto Sans JP',sans-serif;
  --nav-h:62px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);color:var(--white);font-family:var(--body);
  overflow-x:hidden;min-height:100vh;
}
::selection{background:var(--red);color:#fff;}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* ---------- cross-page transitions ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .22s ease both;}
::view-transition-new(root){animation:vt-in .3s ease both;}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px);}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
nav.site{view-transition-name:site-nav;}
footer.site{view-transition-name:site-foot;}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
/* ---------- the seam (brand thread) ---------- */
.seam-rule{
  display:inline-block;width:44px;height:3px;transform:skewX(-30deg);
  background:linear-gradient(90deg,var(--red),rgba(239,62,66,.2));
  box-shadow:0 0 14px rgba(239,62,66,.5);
}
/* ---------- nav (identical on every page) ---------- */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:22px;padding:0 28px;
  background:linear-gradient(180deg,rgba(5,10,18,.94),rgba(5,10,18,.72));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.site .logo{
  font-family:var(--disp);font-size:16.5px;letter-spacing:.06em;color:var(--white);text-decoration:none;
}
nav.site .logo .d{color:var(--red);}
nav.site a.tab{
  position:relative;color:var(--silver);text-decoration:none;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 2px;transition:color .2s;
}
nav.site a.tab:hover{color:var(--white);}
nav.site a.tab.on{color:var(--white);}
nav.site a.tab.on::after{
  content:"";position:absolute;left:0;right:6px;bottom:-4px;height:3px;transform:skewX(-30deg);
  background:var(--red);box-shadow:0 0 12px rgba(239,62,66,.6);
}
nav.site .sp{flex:1;}
nav.site .game-chip{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--red-soft);border:1px solid rgba(239,62,66,.5);border-radius:99px;padding:7px 14px;
  background:rgba(239,62,66,.08);transition:background .2s;
}
nav.site .game-chip:hover{background:rgba(239,62,66,.18);}
nav.site .game-chip i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.4s steps(1) infinite;}
nav.site .game-chip b{color:var(--white);font-weight:600;}
@keyframes blink{50%{opacity:.25;}}
nav.site .lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;font-size:11px;font-weight:800;cursor:pointer;}
nav.site .lang span{padding:6px 11px;color:var(--silver);}
nav.site .lang span.on{background:var(--blue);color:#fff;}
nav.site .cta{
  background:var(--red);color:#fff;text-decoration:none;font-weight:900;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;border-radius:3px;transition:filter .2s;
}
nav.site .cta:hover{filter:brightness(1.1);}
@media(max-width:820px){nav.site a.tab{display:none;}}
/* ---------- shared page header ---------- */
.page-head{padding:calc(var(--nav-h) + 58px) 6vw 34px;}
.page-head .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.32em;color:var(--red);text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
}
.page-head h1{
  font-family:var(--disp);font-size:clamp(38px,5.6vw,78px);text-transform:uppercase;line-height:.98;margin-top:14px;
}
.page-head h1 span{color:var(--blue-hi);}
.page-head .sub{margin-top:14px;color:var(--silver);max-width:600px;line-height:1.75;font-size:15px;}
/* ---------- shared bits ---------- */
.btn-r{background:var(--red);color:#fff;text-decoration:none;font-weight:900;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:16px 28px;border-radius:3px;box-shadow:0 14px 44px rgba(239,62,66,.3);display:inline-block;border:none;cursor:pointer;font-family:var(--body);}
.btn-r:hover{filter:brightness(1.08);}
.btn-g{border:1px solid rgba(148,178,208,.5);color:var(--white);text-decoration:none;font-weight:700;font-size:13.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:16px 28px;border-radius:3px;background:rgba(5,10,18,.4);display:inline-block;cursor:pointer;font-family:var(--body);}
.btn-g:hover{border-color:var(--white);}
.chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--white);
  border:1px solid rgba(148,178,208,.4);background:rgba(4,12,22,.66);border-radius:4px;padding:9px 14px;backdrop-filter:blur(6px);}
.chip b{color:var(--blue-hi);}
.chip.hot{border-color:rgba(240,138,141,.45);background:rgba(22,6,8,.66);}
.chip.hot b{color:var(--red);}
.mono-note{font-family:var(--mono);font-size:11px;color:var(--silver);letter-spacing:.06em;line-height:1.9;}
.credit{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(152,163,179,.65);}
.credit a{color:rgba(152,163,179,.9);}
/* ---------- shared footer ---------- */
footer.site{
  padding:40px 6vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;align-items:flex-start;background:var(--ink);
}
footer.site .fl{font-family:var(--disp);font-size:16px;}
footer.site .fl .d{color:var(--red);}
footer.site .fnav{display:flex;gap:18px;}
footer.site .fnav a{color:var(--silver);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
footer.site .fnav a:hover{color:var(--white);}
footer.site p{max-width:520px;font-size:11.5px;color:var(--silver);line-height:1.8;}
/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:#18243A;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--blue);}
/* ---------- box score (live + replay) ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.box{width:100%;border-collapse:collapse;min-width:560px;}
table.box th{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;
  text-align:right;padding:8px 10px;border-bottom:2px solid rgba(152,178,208,.4);}
table.box th:first-child,table.box td:first-child{text-align:left;}
table.box td{font-family:var(--mono);font-size:12.5px;padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);color:var(--blue-soft);}
table.box td.pl{color:var(--white);font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.02em;white-space:nowrap;}
table.box td.pl small{color:var(--silver);font-family:var(--mono);font-size:10px;margin-left:6px;font-weight:400;}
table.box tr.oh td{background:rgba(239,62,66,.08);}
table.box tr.oh td.pl{color:var(--red-soft);}
table.box tr.tot td{color:var(--white);font-weight:600;border-bottom:0;}
.team-tabs{display:flex;gap:8px;margin-bottom:16px;}
.team-tabs button{background:var(--panel);border:1px solid var(--line);color:var(--silver);border-radius:99px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:8px 18px;cursor:pointer;text-transform:uppercase;}
.team-tabs button.on{background:var(--blue);border-color:var(--blue-hi);color:#fff;}
.box-sub{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--silver);text-transform:uppercase;margin:22px 0 10px;}
/* ---------- game cards (home + games page) ---------- */
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1000px){.gcards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gcards{grid-template-columns:1fr;}}
.gcard{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:var(--white);transition:transform .25s,border-color .25s;}
.gcard:hover{transform:translateY(-4px);border-color:var(--blue-hi);}
.gcard .gd{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--blue-hi);text-transform:uppercase;display:flex;justify-content:space-between;gap:8px;}
.gcard .gd .flag{color:var(--red);}
.gcard .gm{font-family:var(--disp);font-size:clamp(19px,1.8vw,25px);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;}
.gcard .gt{font-family:var(--mono);font-size:11.5px;color:var(--silver);line-height:1.9;}
.gcard .gt b{color:var(--white);}
.gcard .badges{display:flex;gap:7px;flex-wrap:wrap;}
.gcard .bdg{font-family:var(--mono);font-size:9px;letter-spacing:.16em;border:1px solid var(--line);border-radius:99px;padding:3px 9px;color:var(--blue-soft);text-transform:uppercase;}
.gcard .bdg.hot{border-color:rgba(239,62,66,.55);color:var(--red-soft);}
.gcard.live-now{border-color:rgba(239,62,66,.6);background:linear-gradient(120deg,rgba(239,62,66,.1),transparent 55%),var(--panel);}
/* ---------- mobile ---------- */
.tabbar{display:none;}
@media(max-width:820px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;
    background:rgba(5,10,18,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);}
  .tabbar a{flex:1;text-align:center;padding:11px 2px calc(11px + env(safe-area-inset-bottom));text-decoration:none;
    color:var(--silver);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;}
  .tabbar a .g{display:block;font-size:14px;margin-bottom:3px;}
  .tabbar a.on{color:var(--white);}
  .tabbar a.on .g{color:var(--red);}
  body{padding-bottom:64px;}
  nav.site{gap:10px;padding:0 14px;}
  nav.site .lang,nav.site .cta,nav.site .sp{display:none;}
  nav.site .game-chip{margin-left:auto;font-size:10px;padding:6px 11px;}
  .page-head{padding:calc(var(--nav-h) + 34px) 6vw 24px;}
  footer.site{padding-bottom:80px;}
}
@media(max-width:480px){
  nav.site .logo{font-size:14px;}
  nav.site .game-chip{font-size:9px;letter-spacing:.03em;padding:5px 9px;gap:5px;}
}