/* ZONE STRIKE — game introduction (about.html) dressed like the game's menus (2026-10-01)
   Loaded after about.css and display-face.css on about.html only. The licence page keeps its plain document look.
   - chapter cards sit on the same frame as the pause / result panels (assets/ui/panel-a.webp, a see-through copy)
   - the small boxes inside a card lose their own outline and become tinted cells with a corner tick
   - the operation chapters carry the hexagon number used on the in-game operation card
   - on phones the controls table becomes one block per action */
.card{--pk:clamp(.3px,.046vw,.6px);position:relative;isolation:isolate;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:max(32px,calc(var(--pk)*96)) max(24px,calc(var(--pk)*86)) max(36px,calc(var(--pk)*108)) max(26px,calc(var(--pk)*96))}
.card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;border-image-source:url(../assets/ui/panel-a.webp);border-image-slice:167 584 276 953 fill;border-image-width:calc(var(--pk)*112.15) calc(var(--pk)*393.6) calc(var(--pk)*185.9) calc(var(--pk)*642.1);border-image-repeat:stretch}
#last .card{padding-top:max(44px,calc(var(--pk)*120));padding-bottom:max(48px,calc(var(--pk)*130))}

/* cells inside a card */
.feat,.weapon{position:relative;border:0;background:rgba(240,237,226,.04)}
.feat::before,.weapon::before{content:"";position:absolute;left:0;top:0;width:10px;height:2px;background:var(--accent)}
.feat{padding:18px 18px 16px}

/* screenshots: a corner tick in the same place */
.shot{position:relative}
.shot::before{content:"";position:absolute;left:0;top:0;z-index:1;width:22px;height:2px;background:var(--accent)}

/* operation chapters: hexagon number, as on the in-game operation card */
.stage-tag{display:inline-flex;align-items:center;gap:12px}
.stage-tag .hexnum{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:33px;flex:0 0 auto;font-style:normal;font-size:15px;letter-spacing:.02em;color:#ffd9c2;background:var(--accent);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);isolation:isolate}
.stage-tag .hexnum::before{content:"";position:absolute;inset:2px;z-index:-1;background:#3a2219;clip-path:inherit}

/* questions get a small Q mark */
dl.faq dt{display:flex;align-items:baseline;gap:10px}
dl.faq dt::before{content:"Q";font-family:var(--disp);font-size:15px;color:var(--accent);letter-spacing:0}
dl.faq dd{padding-left:20px}

@media (max-width:760px){
 .feat{padding:16px 14px 14px}
 .weapon{padding:14px 14px}
}
/* controls on phones: one block per action, PC and phone on their own labelled lines */
@media (max-width:700px){
 #controls table,#controls tbody,#controls tr,#controls td{display:block}
 #controls tr:first-child{display:none}
 #controls tr{padding:12px 0;border-bottom:1px solid var(--line)}
 #controls td{border:0;padding:3px 0}
 #controls td:first-child{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:3px}
 #controls td:nth-child(n+2){position:relative;padding-left:52px}
 #controls td:nth-child(2)::before{content:"PC"}
 #controls td:nth-child(3)::before{content:"スマホ"}
 #controls td:nth-child(n+2)::before{position:absolute;left:0;top:6px;font-size:9px;font-weight:700;letter-spacing:.14em;line-height:1.6;color:var(--accent-light)}
}