/* finesse · component: game-media strip + viewer · register=brand
 * states: default · hover · focus-visible · active · disabled · loading · error · success
 * tokens: inherited (style.css :root) */

/* 作品卡片：标题与按钮之间的画面条 */
.game-info>div:first-child{flex:0 1 auto}
.game-media{flex:1 1 0;min-width:0;max-width:720px;position:relative}
.media-strip{--fade-start:0px;--fade-end:0px;list-style:none;margin:-10px -6px -18px;padding:10px 6px 18px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent)}
.media-strip.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.media-strip.is-dragging .media-thumb{cursor:grabbing;pointer-events:none}
.media-strip::-webkit-scrollbar{display:none}
.media-strip>li{flex:0 0 auto;scroll-snap-align:start}
.media-thumb{position:relative;display:block;width:176px;aspect-ratio:16/9;padding:0;border:0;border-radius:14px;overflow:hidden;background:#e9e5f4;outline:2px solid transparent;outline-offset:3px;transition:translate var(--motion-feedback) var(--motion-ease)}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-thumb:focus-visible{outline-color:var(--purple)}
.media-thumb:active{translate:0 1px}
@media(hover:hover){.media-strip{cursor:grab}.media-thumb:hover{translate:0 -2px}}
.media-tag{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:20px;background:#fcfbffe6;color:var(--ink);font:700 11px/1.5 var(--body);letter-spacing:.02em}
.media-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,#27233d66,#27233d1a)}
.media-play>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);box-shadow:0 4px 12px #27233d33;transition:scale .25s ease}
.media-play svg{width:18px;height:18px;margin-left:3px}
@media(hover:hover){.media-thumb:hover .media-play>span{scale:1.08}}
.media-step{position:absolute;top:50%;translate:0 -50%;z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fcfbfff2;display:grid;place-items:center;outline:2px solid transparent;outline-offset:3px;box-shadow:0 4px 12px #27233d14;transition:opacity .2s ease,background-color .2s ease}
.media-step svg{width:16px;height:16px}
.media-step.prev{left:-12px}.media-step.next{right:-12px}
.media-step:focus-visible{outline-color:var(--purple)}
.media-step:active{background:#eeeafb}
.media-step:disabled{opacity:0;pointer-events:none;cursor:not-allowed}
@media(hover:hover){.media-step:hover{background:#eeeafb}}

/* Ci-en と itch.io を並べる */
.game-links{display:flex;justify-content:center;align-items:center;gap:6px;order:2}
.game-links .cien-update{order:0}
.itch-update{display:flex;align-items:center;justify-content:center;padding:7px 12px;outline:2px solid transparent;outline-offset:5px;border-radius:4px;transition:opacity 200ms ease,translate 250ms ease}
.itch-update img{display:block;width:55px;height:14px}
.itch-update:focus-visible{outline-color:var(--purple)}
.itch-update:active{translate:0 1px}
@media(hover:hover){.itch-update:hover{translate:0 -1px;opacity:.75}}

/* ビューア */
.media-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--paper);overflow:hidden}
.media-viewer::backdrop{background:#16132af0}
.media-viewer[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:46px 4vw 18px;gap:14px}
.viewer-stage{position:relative;width:min(1280px,100%,calc((100dvh - 210px)*16/9));aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0f0d1c;box-shadow:0 24px 60px #0007}
.viewer-image,.viewer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0f0d1c}
.viewer-image[hidden],.viewer-video[hidden],.viewer-gate[hidden]{display:none}
.viewer-stage.is-loading:after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #fcfbff40;border-top-color:var(--yellow);animation:viewer-spin 1s linear infinite}
@keyframes viewer-spin{to{transform:rotate(1turn)}}
.viewer-error{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#16132ad9;font-size:14px;text-align:center;padding:24px}
.viewer-error[hidden]{display:none}
.viewer-error button{min-height:44px;padding:0 22px;border:0;border-radius:30px;background:var(--yellow);color:var(--ink);font:700 14px var(--body)}
.viewer-error button:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.viewer-error button:active{translate:0 1px}
.viewer-gate{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:24px;text-align:center;background:#16132ad9}
.gate-title{margin:0;font:900 clamp(18px,2.2vw,26px)/1.5 var(--body);letter-spacing:.02em}
.gate-text{margin:0 0 14px;font-size:14px;line-height:1.9;color:#fcfbffcc}
.gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gate-yes{background:var(--yellow);color:var(--ink);border:0;outline:2px solid transparent;outline-offset:4px}
.gate-yes .arrow{background:var(--ink);color:var(--paper)}
.gate-no{min-height:44px;padding:0 22px;border-radius:60px;border:1px solid #fcfbff52;background:transparent;color:var(--paper);font-size:13px;font-weight:700;outline:2px solid transparent;outline-offset:4px}
.gate-yes:focus-visible,.gate-no:focus-visible{outline-color:var(--yellow)}
.gate-yes:active,.gate-no:active{translate:0 1px}
@media(hover:hover){.gate-no:hover{background:#fcfbff14}.gate-yes:hover{translate:0 -2px}}
.gate-note{margin:12px 0 0;font-size:12px;color:#fcfbff99}
.viewer-footer{width:min(1280px,100%);min-width:0}
.viewer-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 60px 6px}
.viewer-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px}
.viewer-strip{position:relative;margin:0;padding:6px;gap:10px;justify-content:safe center;min-width:0}
.viewer-strip .media-thumb{width:112px;border-radius:8px;opacity:.55;transition:opacity var(--motion-feedback) var(--motion-ease),translate var(--motion-feedback) var(--motion-ease)}
.viewer-strip .media-thumb[aria-current="true"]{opacity:1;outline-color:var(--yellow)}
.viewer-strip .media-thumb:focus-visible{opacity:1;outline-color:var(--paper)}
.viewer-strip .media-tag{display:none}
.viewer-strip .media-play>span{width:26px;height:26px}
.viewer-strip .media-play svg{width:12px;height:12px;margin-left:2px}
.viewer-caption{min-width:0}
.viewer-caption{margin:0;font-size:14px;line-height:1.6}
.viewer-caption small{display:block;font-size:12px;color:#fcfbff99}
.viewer-count{font:600 12px var(--display);letter-spacing:.08em;color:#fcfbffb3;white-space:nowrap}
.viewer-nav,.viewer-close{width:44px;height:44px;border-radius:50%;border:1px solid #fcfbff40;background:#fcfbff14;color:var(--paper);display:grid;place-items:center;outline:2px solid transparent;outline-offset:3px;transition:background-color .2s ease}
.viewer-nav svg,.viewer-close svg{width:18px;height:18px}
.viewer-close{position:fixed;top:12px;right:14px}
.viewer-nav:focus-visible,.viewer-close:focus-visible{outline-color:var(--yellow)}
.viewer-nav:active,.viewer-close:active{background:#fcfbff2e}
.viewer-nav:disabled{opacity:.35;cursor:not-allowed}
@media(hover:hover){.viewer-nav:hover:not(:disabled),.viewer-close:hover{background:#fcfbff26}}

@media(max-width:1000px){.game-media{flex-basis:100%;max-width:none;order:2}.game-actions{order:3}.media-step{display:none}}
@media(max-width:600px){.game-media{margin-top:18px}.media-thumb{width:150px}.media-viewer[open]{padding:46px 3vw 14px;gap:10px}.viewer-meta{padding:0 4px 6px;gap:8px}.viewer-bar{gap:8px}.viewer-strip .media-thumb{width:80px}.viewer-caption{font-size:13px}}
.motion-off .media-thumb,.motion-off .media-step,.motion-off .media-play>span{transition:none}
.motion-off .viewer-stage.is-loading:after{animation:none}

/* 映像の下：いつの更新か（最新は赤）と要点。画像には付けない */
.media-strip{--news:#c8384c}
.media-step{top:49.5px}
.media-note{display:flex;align-items:baseline;gap:7px;margin:9px 2px 0;font:700 12px/1.5 var(--body);color:var(--ink);white-space:nowrap}
.media-note time{font:600 11px/1.5 var(--display);letter-spacing:.03em;color:#736f82}
.media-note.is-new,.media-note.is-new time{color:var(--news)}
.media-sub{max-width:176px;margin:1px 2px 0;font-size:11px;line-height:1.5;color:#736f82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-strip .media-note,.viewer-strip .media-sub{display:none}
.viewer-notes{margin-top:6px;color:#fcfbffe0}
.viewer-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 16px;font-size:13px;line-height:1.75}
.viewer-notes li:before{content:"・";color:var(--yellow)}
.viewer-notes p{margin:2px 0 0;font-size:12px;line-height:1.7;color:#fcfbff99}
@media(max-width:600px){.media-sub{max-width:150px}.viewer-notes ul{font-size:12px}}