:root{
  --ink:#1f2a44; --sub:#5b6478; --bg:#eaf7f6; --card:#fff; --line:#e4ecef;
  --pink:#e0336a; --accent:#ff6f91; --radius:18px;
  font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink); -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:linear-gradient(180deg,#bfe9f3 0,#d8f2f4 260px,var(--bg) 520px,var(--bg) 100%);min-height:100vh}
a{color:inherit}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(31,42,68,.06)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:44px}
.brand img{width:40px;height:auto}
/* ロゴ: COTPIAメディアと同じB案（Outfit ExtraBold、COTだけアクセント色）。SIL OFL 1.1、同梱。 */
@font-face{font-family:"COTPIA Logo";src:url("outfit-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
.brand-name{font-family:"COTPIA Logo",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:.01em;line-height:1}
.brand-cot{color:#d02a5e}
.brand-name rt{font-family:system-ui,"Hiragino Sans",sans-serif;font-size:9px;font-weight:700;letter-spacing:.3em;color:var(--sub)}
.lang{min-width:44px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;
  font:inherit;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer}
.lang:focus-visible,.card a:focus-visible,.rank-card:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

main{max-width:1080px;margin:0 auto;padding:0 16px 40px}

/* hero: 空に浮かぶ島 */
.hero{position:relative;text-align:center;padding:26px 0 18px}
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.85;filter:blur(.3px)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:90px;height:26px;top:28px;left:4%;animation:drift 18s ease-in-out infinite}
.c1::before{width:40px;height:40px;top:-18px;left:16px}.c1::after{width:30px;height:30px;top:-12px;left:46px}
.c2{width:70px;height:22px;top:70px;right:6%;animation:drift 22s ease-in-out infinite reverse}
.c2::before{width:32px;height:32px;top:-15px;left:12px}.c2::after{width:24px;height:24px;top:-9px;left:36px}
.c3{width:56px;height:18px;top:190px;left:10%;opacity:.6;animation:drift 26s ease-in-out infinite}
.c3::before{width:26px;height:26px;top:-12px;left:10px}
.spark{position:absolute;color:#ffb347;font-size:16px;animation:twinkle 2.8s ease-in-out infinite}
.s1{top:40px;right:22%}.s2{top:150px;left:20%;animation-delay:.9s;color:#ff6f91}.s3{top:110px;right:12%;animation-delay:1.7s;color:#7fd6ff}

.island{position:relative;width:240px;height:220px;margin:0 auto 6px;animation:float 5s ease-in-out infinite}
.duo{position:absolute;left:50%;bottom:50px;width:180px;height:auto;transform:translateX(-50%);z-index:2;
  filter:drop-shadow(0 8px 10px rgba(224,51,106,.18))}
.island-top{position:absolute;left:14px;right:14px;bottom:42px;height:44px;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse at 50% 35%,#b6ec9c 0,#7fd67f 55%,#55b86c 100%);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.10),0 3px 0 #4aa560}
.island-top::before,.island-top::after{content:"";position:absolute;bottom:14px;width:14px;height:14px;border-radius:50%;background:#ffd166;box-shadow:0 0 0 3px #fff}
.island-top::before{left:28px}.island-top::after{right:30px;background:#ff8fab}
.island-rock{position:absolute;left:30px;right:30px;bottom:0;height:68px;
  clip-path:polygon(0 0,100% 0,78% 62%,56% 100%,40% 78%,22% 64%);background:linear-gradient(180deg,#c99a6b,#9b6f4a)}

.eyebrow{display:inline-block;margin:4px 0 6px;padding:4px 12px;border-radius:999px;background:#fff;color:var(--pink);
  font-weight:800;font-size:12px;letter-spacing:.14em;box-shadow:0 2px 8px rgba(31,42,68,.06)}
h1{margin:6px 0 8px;font-size:clamp(28px,7.4vw,44px);line-height:1.22;font-weight:900;letter-spacing:.02em}
.lede{margin:0 auto 12px;max-width:30em;color:var(--sub);font-size:15px;line-height:1.7}
.stats{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.75);font-size:13px;color:var(--sub);font-weight:600}
.stats b{color:var(--pink);font-size:18px;font-weight:900}

h2{display:flex;align-items:center;gap:10px;margin:52px 0 18px;font-size:22px;font-weight:900}
/* 見出しと前の区画の間を広めに取る（2026-10-21 オーナー指示） */
section{padding-bottom:6px}
section+section{position:relative}
.pickup .cards,.shelf .cards{margin-bottom:4px}
.diamond{width:12px;height:12px;background:var(--pink);transform:rotate(45deg);border-radius:2px}

/* cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;border-radius:var(--radius);background:var(--card);box-shadow:0 6px 18px rgba(31,42,68,.08);overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.card a{display:flex;flex-direction:column;height:100%;padding:14px 12px 12px;text-decoration:none;min-height:44px}
.card .art{display:grid;place-items:center;height:118px;margin:2px -4px 8px;border-radius:14px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 22%,#fff) 0,#fff 72%)}
.card .art img,.card .art svg{width:108px;height:108px;object-fit:contain}
/* 画面写真のカード（2026-10-08 オーナー指示「スクショに・サイズ統一」）: 全カード同じ 16:10 の枠に、端まで敷きつめる。 */
.card .art.shot{display:block;height:auto;aspect-ratio:16/10;margin:2px -4px 8px;overflow:hidden;background:#1f2a44}
.card .art.shot img,.card.open .art.shot img{width:100%;height:100%;object-fit:cover;animation:none}
.meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.no{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sub)}
.tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,#fff);color:#9a2a4c}
.name{display:block;font-size:15px;line-height:1.35;font-weight:900}
.line{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:var(--sub);flex:1}
.play{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;min-height:44px;border-radius:12px;
  background:var(--pink);color:#fff;font-weight:900;font-size:15px;box-shadow:0 3px 0 #b3214f;transition:transform .12s}
.card.open{transition:transform .18s,box-shadow .18s}
.card.open:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(224,51,106,.18)}
.card.open:active .play{transform:translateY(2px);box-shadow:0 1px 0 #b3214f}
.card.open .art img{animation:bob 3.2s ease-in-out infinite}

.card.soon{display:flex;flex-direction:column;padding:14px 12px 14px;background:#fbf8f2;align-self:start}
.card.soon::before{opacity:.55}
.card.soon .art{background:repeating-linear-gradient(-45deg,#fff 0 10px,#f6f1e7 10px 20px)}
.card.soon .art svg{animation:wobble 3.6s ease-in-out infinite;animation-delay:var(--d)}
.card.soon .name{font-size:13px;letter-spacing:.12em;color:#a08a5c}
.card.soon .line{flex:none}

.battle h2{font-size:clamp(16px,4.4vw,22px)}
.battle h2 strong{font-weight:900}
.battle .rank-card{margin-top:14px}
.pickup h2{font-size:clamp(16px,4.4vw,22px)}
.pickup h2 strong{font-weight:900}
.rank-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius);background:#fff;text-decoration:none;
  box-shadow:0 6px 18px rgba(31,42,68,.08);min-height:72px}
.trophy svg{width:44px;height:44px}
.rank-text{flex:1;display:flex;flex-direction:column;gap:2px}
.rank-text b{font-size:16px}.rank-text small{color:var(--sub);font-size:12px;line-height:1.5}
.arrow{color:var(--pink);font-weight:900;font-size:20px}

.long-games h2{font-size:clamp(18px,4.4vw,22px)}
.long-game{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden;
  border-radius:var(--radius);background:var(--card);box-shadow:0 6px 18px rgba(31,42,68,.08)}
.long-game-shot{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;background:#1f2a44}
.long-game-body{display:flex;flex-direction:column;justify-content:center;padding:28px;min-width:0}
.long-game h3{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.4}
.long-game-subtitle{margin:6px 0 0;font-size:12px;letter-spacing:.12em;color:var(--sub)}
.long-game-line{margin:18px 0 22px;line-height:1.7;color:var(--sub)}
.long-game-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.long-game-play,.long-game-guide{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:800}
.long-game-play{gap:10px;padding:10px 18px;border-radius:12px;background:var(--pink);color:#fff;text-decoration:none}
.long-game-guide{text-underline-offset:4px}
.long-game a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media (max-width:639px),(orientation:portrait){
  .long-game{grid-template-columns:minmax(0,1fr)}
  .long-game-body{padding:22px}
}

.foot{max-width:1080px;margin:0 auto;padding:18px 16px 36px;text-align:center;color:var(--sub);font-size:12px;line-height:1.6}
.copy{margin-top:6px;opacity:.7}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(3deg)}60%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 右上: 言語切替＋Discordログイン（共通ヘッダー） */
.bar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
@media (max-width:390px){.bar-actions{gap:6px}.bar .brand-name{font-size:19px}}
/* 2026-10-08 見栄えの統一: 同じ段のカードは高さをそろえ、説明は3行まで（あふれは…）、遊ぶボタンは下端にそろえる。 */
.cards{align-items:stretch}
.card.open .line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;flex:none}
.card.open .play{margin-top:auto}
.card.open .line{margin-bottom:10px}

/* ゲーム一覧の並び替え・ジャンル絞り込み（2026-10-22）。モバイル優先: 1行目＝並び替え＋本数、2行目＝ジャンルのチップ（この列だけ横スクロール）。 */
.shelf h2{margin-bottom:12px}
.shelf-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px;min-width:0}
.sort{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.sort-label{font-size:13px;font-weight:800;color:var(--sub);white-space:nowrap}
.sort select{min-width:0;min-height:44px;max-width:100%;padding:0 34px 0 12px;border-radius:12px;border:1px solid var(--line);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2a44' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;
  font:inherit;font-size:15px;font-weight:800;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.shelf-count{margin:0 0 0 auto;font-size:13px;font-weight:800;color:var(--sub);overflow-wrap:anywhere;text-align:right}
.genre-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  margin:0 -16px 14px;padding:6px 16px 8px;scrollbar-width:thin;scroll-padding-inline:16px}
.genre-chips:empty{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
.sort select:focus-visible,.chip:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.genre-head{grid-column:1/-1;list-style:none}
.genre-head h3{display:flex;align-items:baseline;gap:8px;margin:14px 0 0;font-size:18px;font-weight:900}
.genre-head:first-child h3{margin-top:0}
.genre-head small{font-size:12px;font-weight:800;color:var(--sub)}