/* styles.css — 球場札記 官網 base styles, theme tokens, device frame, stamp & league components, responsive. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; }

.bj-root {
  --paper:#F4EEE2; --card:#FBF8F0; --ink:#233140; --seam:#B8412F; --gold:#C9A36A; --grass:#4F6148;
  --muted:rgba(35,49,64,0.58); --line:rgba(35,49,64,0.12); --page:#EDE4D2; --tape:1;
  --rot:-1.4deg; --rot2:1.1deg; --shadow:0 3px 14px rgba(35,49,64,0.10);
  --barbg:rgba(244,238,226,0.82); --devsh:0 40px 80px rgba(35,49,64,0.22);
  font-family:'Noto Sans TC','Noto Sans KR','Noto Sans JP',sans-serif;
  color:var(--ink); background:var(--page); min-height:100vh; overflow-x:hidden; position:relative;
}

.bj-root a { color: var(--seam); text-decoration: none; }
.bj-root a:hover { color: var(--ink); }
.bj-root code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: var(--page); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
::selection { background: rgba(184,65,47,0.22); }

@keyframes bj-bob { 0%,100% { transform: translateY(0) rotate(var(--phone-rot,-4deg)); } 50% { transform: translateY(-14px) rotate(var(--phone-rot,-4deg)); } }
@keyframes bj-bob2 { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes bj-spin { to { transform: rotate(360deg); } }
@keyframes bj-dash { to { stroke-dashoffset: 0; } }

.ios-device {
  border-radius:48px; overflow:hidden; position:relative; background:#F2F2F7;
  box-shadow:0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12);
  font-family:-apple-system, system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
.ios-statusbar { position:absolute; top:0; left:0; right:0; z-index:10; display:flex; gap:154px; align-items:center; justify-content:center; padding:21px 24px 19px; }
.ios-time { flex:1; display:flex; align-items:center; justify-content:center; padding-top:1.5px; font-family:-apple-system,'SF Pro',system-ui; font-weight:590; font-size:17px; line-height:22px; color:#000; }
.ios-status-icons { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding-top:1px; padding-right:1px; }
.ios-screen { position:absolute; inset:0; background:var(--paper); }
.ios-home { position:absolute; bottom:0; left:0; right:0; z-index:60; height:34px; display:flex; justify-content:center; align-items:flex-end; padding-bottom:8px; pointer-events:none; }
.ios-home span { width:139px; height:5px; border-radius:100px; background:rgba(0,0,0,0.25); }

.shot { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shot img { width:100%; height:100%; object-fit:cover; display:block; }
.shot-ph {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  width:100%; height:100%; padding:26px; text-align:center; color:var(--muted);
  background:var(--paper) repeating-linear-gradient(transparent 0, transparent 27px, var(--line) 28px);
  font-family:'Noto Sans TC','Noto Sans KR','Noto Sans JP',sans-serif;
}
.shot-ph .shot-box { display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 18px; border:1.5px dashed var(--seam); border-radius:14px; background:var(--card); }
.shot-ph .shot-label { font-size:13px; font-weight:600; letter-spacing:.4px; color:var(--ink); }
.shot-ph svg { opacity:.55; }

.bj-stamp { opacity:0; transform:scale(1.5) rotate(-8deg); transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); text-align:center; }
.stamp-img { width:100%; aspect-ratio:1; object-fit:contain; display:block; filter:drop-shadow(var(--shadow)); }
.stamp-name { font-size:12px; font-weight:600; margin-top:8px; }

.league-card { text-align:center; background:rgba(244,238,226,0.06); border:1px solid rgba(244,238,226,0.14); border-radius:14px; padding:18px 24px; min-width:130px; }
.league-code { font-family:'Noto Serif TC',serif; font-weight:900; font-size:24px; color:var(--gold); letter-spacing:1px; }
.league-name { font-size:12px; color:rgba(244,238,226,0.7); margin-top:5px; }

.store-badge { display:inline-block; }
.store-badge img { height:52px; width:auto; display:block; }

@media (max-width:760px) {
  .bj-navlinks { display:none !important; }
}
@media (max-width:640px) {
  .hero-sec { padding-top:44px !important; padding-bottom:20px !important; }
  .hero-art { zoom:0.72; }
  .store-badge img { height:46px; }
}
@media (max-width:520px) {
  #stamp-wall { grid-template-columns:repeat(3,1fr) !important; gap:12px !important; }
}