:root {
  --st-ink: #17231f;
  --st-green: #073f31;
  --st-green-2: #0c5a45;
  --st-paper: #f5f1e8;
  --st-paper-2: #fffdf7;
  --st-line: #d9d0bf;
  --st-muted: #6c736f;
  --st-coral: #c9664d;
  --st-gold: #c49a49;
}
* { box-sizing: border-box; }
body.portal-page {
  margin: 0;
  color: var(--st-ink);
  background: var(--st-paper);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px max(24px, calc((100vw - 1240px) / 2));
  background: rgba(250,247,239,.94);
  border-bottom: 1px solid rgba(22,53,43,.1);
  backdrop-filter: blur(14px);
}
.portal-brand { display: inline-flex; align-items: center; gap: 11px; }
.portal-brand img { width: 45px; height: 45px; object-fit: contain; }
.portal-brand span { display: flex; align-items: baseline; gap: 12px; }
.portal-brand strong { color: var(--st-green); font-family: "Yu Mincho", serif; font-size: 27px; letter-spacing: .07em; }
.portal-brand small { color: #39443f; font-size: 10px; }
.portal-header nav { display: flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 700; }
.portal-header-cta, .portal-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: white;
  background: var(--st-green);
  border-radius: 9px;
  font-weight: 800;
}
.portal-main { min-height: calc(100vh - 180px); }
.portal-content, .game-single { width: min(1040px, calc(100vw - 40px)); margin: 0 auto; padding: 60px 0 90px; }
.portal-title { margin-bottom: 28px; }
.portal-title p { margin: 0 0 5px; color: var(--st-coral); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.portal-title h1 { margin: 0; font-family: "Yu Mincho", serif; font-size: clamp(34px, 5vw, 55px); font-weight: 500; }
.portal-entry {
  padding: clamp(22px, 4vw, 44px);
  background: var(--st-paper-2);
  border: 1px solid var(--st-line);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(41,35,25,.07);
}
.portal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px max(24px, calc((100vw - 1240px) / 2));
  color: #dde9e3;
  background: #102f26;
  font-size: 11px;
}
.portal-footer .portal-brand strong { color: white; font-size: 21px; }
.portal-footer .portal-brand img { width: 34px; height: 34px; padding: 2px; background: var(--st-paper); border-radius: 50%; }
.portal-breadcrumb { display: flex; gap: 8px; margin-bottom: 24px; color: var(--st-muted); font-size: 10px; }
.game-single-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); gap: 55px; align-items: center; }
.game-single-image img, .game-image-placeholder { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 19px; }
.game-image-placeholder { display: grid; place-items: center; padding: 30px; color: white; text-align: center; background: linear-gradient(145deg,#557c96,#18394f); }
.game-image-placeholder span { align-self: end; padding: 5px 9px; background: var(--st-coral); border-radius: 99px; font-size: 10px; }
.game-image-placeholder strong { align-self: start; font-family: "Yu Mincho", serif; font-size: 36px; }
.game-single-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.game-single-tags span { padding: 5px 9px; color: var(--st-green); background: #e4eee7; border-radius: 99px; font-size: 9px; font-weight: 700; }
.game-single-summary h1 { margin: 12px 0; font-family: "Yu Mincho", serif; font-size: clamp(42px,5vw,67px); font-weight: 500; line-height: 1.15; }
.game-single-pitch { color: var(--st-green); font-family: "Yu Mincho", serif; font-size: 19px; font-weight: 700; }
.game-primary-specs { display: grid; grid-template-columns: repeat(2,1fr); margin: 24px 0; border-top: 1px solid var(--st-line); border-left: 1px solid var(--st-line); }
.game-primary-specs div { padding: 12px; background: rgba(255,253,247,.62); border-right: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); }
.game-primary-specs dt { color: var(--st-muted); font-size: 9px; }
.game-primary-specs dd { margin: 2px 0 0; color: var(--st-green); font-weight: 800; }
.game-circle { margin-bottom: 22px; font-size: 11px; }
.game-single-body { margin-top: 65px; padding: 40px; background: var(--st-paper-2); border: 1px solid var(--st-line); border-radius: 18px; }
.game-single-body h2 { font-family: "Yu Mincho", serif; font-size: 32px; font-weight: 500; }
.portal-game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.portal-game-grid article { overflow: hidden; background: var(--st-paper-2); border: 1px solid var(--st-line); border-radius: 14px; }
.portal-game-grid article img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.portal-game-grid article div { padding: 16px; }
.portal-game-grid h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 20px; }
.portal-game-grid p { color: var(--st-muted); font-size: 11px; }
@media(max-width:760px) {
  .portal-header { min-height: 66px; padding: 9px 15px; }
  .portal-brand img { width: 39px; height: 39px; }
  .portal-brand span small, .portal-header nav > a:not(.portal-header-cta) { display: none; }
  .portal-brand strong { font-size: 23px; }
  .portal-header-cta { min-height: 38px; padding: 0 12px; font-size: 10px; }
  .portal-content, .game-single { width: calc(100vw - 36px); padding: 40px 0 65px; }
  .game-single-hero { grid-template-columns: 1fr; gap: 28px; }
  .game-single-summary h1 { font-size: 43px; }
  .game-single-body { margin-top: 40px; padding: 24px 18px; }
  .portal-game-grid { grid-template-columns: 1fr; }
  .portal-footer { align-items: flex-start; flex-direction: column; padding: 24px 18px; }
}

