/* Jiezi Studio · responsive/mobile layer (V5.5) */
/* Desktop remains visually aligned with V5.4; this layer prioritizes legibility and touch targets. */
:root { color-scheme: dark; }
body { overflow-x: clip; }
img { max-width: 100%; }
:where(a, summary):focus-visible { outline: 3px solid var(--jade); outline-offset: 4px; }
.wrap, .game-row > *, .contact-grid > *, .business-card > *, .detail-heading > * { min-width: 0; }
.contact-copy a, .bc-url a, .section-head a, .policy a { overflow-wrap:anywhere; }
.mobile-nav { display: none; }

/* Gallery: original screenshots preserved at native proportions inside an upright presentation slot. */
.detail-gallery .gallery-frame { min-width:0; margin:0; }
.detail-gallery .gallery-image { display:block; border-radius:12px; overflow:hidden; background:#071210; }
.detail-gallery .gallery-image img { width:100%; display:block; aspect-ratio:9/16; height:auto; object-fit:contain; border-radius:12px; }
.gallery-frame figcaption { padding:8px 2px 0; color:var(--muted); font-size:.75rem; text-align:center; }
.gallery-swipe-hint { display:none; }

@media (max-width: 1050px) {
  .wrap { width: min(100% - 40px, 1180px); }
  .game-table-head, .game-row { grid-template-columns:minmax(185px,29%) minmax(0,1fr) minmax(150px,21%); gap:17px; }
  .game-row { padding:19px; }
  .game-table-head { padding:14px 19px; }
  .btn { white-space:normal; overflow-wrap:normal; line-height:1.3; }
  .section-head p { max-width:430px; }
}

@media (max-width: 900px) {
  .nav { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; min-height:64px; position:relative; }
  header .navlinks { display:none; }
  .mobile-nav { display:block; flex:0 0 auto; }
  .mobile-nav > summary { list-style:none; cursor:pointer; min-height:44px; min-width:88px; display:flex; align-items:center; justify-content:center; padding:0 14px; color:var(--ink); border:1px solid rgba(132,214,185,.33); border-radius:12px; background:#142b24; font-size:.92rem; font-weight:750; white-space:nowrap; user-select:none; }
  .mobile-nav > summary::-webkit-details-marker { display:none; }
  .mobile-nav[open] > summary { background:#244439; border-color:var(--jade); }
  .mobile-menu { position:absolute; right:0; top:calc(100% + 1px); width:min(330px,calc(100vw - 40px)); display:flex; flex-direction:column; gap:4px; padding:10px; background:rgba(13,31,26,.98); border:1px solid rgba(132,214,185,.33); box-shadow:0 20px 40px rgba(0,0,0,.55); border-radius:15px; z-index:70; }
  .mobile-menu a { min-height:48px; border-radius:10px; text-decoration:none; display:flex; align-items:center; padding:11px 14px; color:var(--ink); font-weight:700; }
  .mobile-menu a:hover,.mobile-menu a[aria-current="page"] { background:rgba(132,214,185,.14); color:var(--jade); }
  .section-head { display:block; }
  .section-head p { max-width:100%; margin:10px 0 0; }
  .game-row { grid-template-columns:minmax(185px,38%) minmax(0,1fr); gap:16px; }
  .game-row .store { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
  .game-row .store .btn { flex:1; min-width:155px; }
  .detail-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-grid { gap:20px; }
  .policy { max-width:100%; }
}

@media (max-width: 640px) {
  html { scroll-padding-top:84px; }
  .wrap { width:calc(100% - 32px); }
  .brand { gap:9px; font-size:.94rem; letter-spacing:0; }
  .brand small { font-size:.59rem; letter-spacing:.14em; }
  .seal { width:38px; height:38px; font-size:21px; border-radius:11px; flex-shrink:0; }
  .hero { padding:36px 0 22px; }
  .hero h1 { font-size:clamp(1.75rem,7.1vw,2.3rem); line-height:1.36; margin:13px 0 14px; text-wrap:balance; }
  .hero .lead, .page-hero p { font-size:1rem; line-height:1.85; }
  .mini-tags { gap:7px; margin-top:16px; }
  .mini-tags span { font-size:.76rem; padding:7px 10px; }
  .section { padding:34px 0; }
  .section-head { margin-bottom:19px; }
  .section-head h2 { font-size:clamp(1.53rem,6.1vw,2rem); line-height:1.34; }
  .section-head p { font-size:.96rem; line-height:1.75; }
  .game-table { display:grid; gap:13px; overflow:visible; border:0; border-radius:0; background:transparent; }
  .game-table-head { display:none; }
  .game-row { display:block; padding:15px; border:1px solid var(--line)!important; border-radius:17px; background:#10221d; }
  .game-row .poster { margin:0 0 14px; border-radius:11px; aspect-ratio:1024/500; }
  .game-row .poster img { object-fit:contain; }
  .gtitle { font-size:clamp(1.19rem,5vw,1.45rem); line-height:1.37; margin:4px 0; }
  .gdesc { margin:8px 0 0; font-size:.95rem; line-height:1.75; }
  .game-row .store { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:17px; }
  .game-row .store .btn { width:100%; min-width:0; min-height:49px; padding:10px 9px; font-size:.84rem; white-space:normal; line-height:1.38; }
  .game-row .store .steam,.game-row .store .detail-btn { grid-column:1/-1; }
  .btn { min-height:48px; }
  .micro { font-size:.85rem; line-height:1.65; }
  .contact-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .contact-lead { margin:12px 0; padding:14px; overflow-wrap:anywhere; }
  .card-panel { padding:13px; border-radius:18px; }
  .business-card { padding:18px; border-radius:14px; gap:14px; }
  .bc-name { font-size:1.65rem; }
  .bc-title { margin:9px 0; font-size:.84rem; }
  .bc-url { padding-top:10px; }
  .bc-url a { font-size:.82rem; }
  .bc-right { justify-self:center; }
  .qr-box img { width:132px; height:132px; }
  .footer { margin-top:12px; padding:24px 0; }
  .footer-inner { display:block; line-height:2; overflow-wrap:anywhere; }
  .footer-inner > div+div { margin-top:6px; }

  .page-hero { padding:33px 0 18px; }
  .page-hero h1 { font-size:clamp(1.7rem,6.5vw,2.15rem); line-height:1.3; }
  .quicklinks { display:flex; gap:8px; margin-top:16px; }
  .quicklinks a { min-height:42px; display:inline-flex; align-items:center; font-size:.82rem; padding:8px 11px; }
  .game-detail { padding:16px; border-radius:17px; margin:16px 0; scroll-margin-top:90px; }
  .detail-heading { display:block; }
  .detail-heading h2 { font-size:clamp(1.36rem,5.6vw,1.8rem); }
  .detail-intro { font-size:.97rem; line-height:1.83; margin:13px 0 15px; }
  .detail-bullets { margin:12px 0; gap:7px; }
  .detail-bullets span { font-size:.78rem; padding:7px 9px; }
  .detail-store { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:15px; }
  .detail-store .btn { min-width:0; font-size:.83rem; padding:10px 8px; }
  .detail-store .steam { grid-column:1/-1; }
  .gallery-swipe-hint { display:block; margin:18px 0 7px; font-size:.85rem; color:var(--jade); font-weight:650; }
  .detail-gallery { display:flex; gap:11px; max-width:none; width:100%; margin:0; padding:1px 0 12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding:1px; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; scrollbar-width:thin; }
  .detail-gallery .gallery-frame { flex:0 0 min(85%, 350px); scroll-snap-align:start; background:#0a1714; border:1px solid var(--line); border-radius:14px; padding:7px; }
  .detail-gallery .gallery-image { border-radius:9px; }
  .detail-gallery .gallery-image img { width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; border:0; border-radius:9px; }
  .gallery-frame figcaption { padding:9px 2px 4px; color:#c5d7cc; font-size:.81rem; }
  .detail-bottom { margin-top:15px; }
  .detail-bottom a { display:inline-flex; align-items:center; min-height:44px; }
  .policy .policy-card { padding:18px 16px; border-radius:16px; margin-top:18px; }
  .policy h2 { font-size:1.14rem; line-height:1.48; margin:24px 0 10px; }
  .policy p,.policy li { font-size:.96rem; line-height:1.86; }
  .policy ul { padding-left:1.2em; }
}

@media (max-width: 350px) {
  .wrap { width:calc(100% - 26px); }
  .mobile-nav > summary { min-width:78px; padding:0 10px; font-size:.85rem; }
  .game-row { padding:12px; }
  .game-row .store .btn { padding:9px 6px; font-size:.79rem; }
  .game-detail { padding:13px; }
  .detail-store .btn { font-size:.79rem; }
  .business-card { padding:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }