:root{--base:#eef3f2;--ink:#1f2e33;--primary:#324851;--primary2:#34675c;--accent:#86ac41;--mist:#7da3a1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--base);color:var(--ink);font-family:"LINE Seed JP","Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.7}
a{color:inherit}
.p-wrap{max-width:960px;margin:0 auto;padding:0 16px}
.muted{opacity:.7}

.p-top{background:var(--primary);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.p-top-inner{height:58px;display:flex;align-items:center}
.p-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px}
.p-brand img{border-radius:8px}

.p-hero{padding:28px 0 8px}
.p-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--primary2)}
.p-hero h1{margin:6px 0 8px;font-size:clamp(26px,6vw,40px);line-height:1.3;font-weight:800}
.p-lead{margin:0;max-width:40em;font-size:15px}

/* 回る柱 */
.prism-stage{position:relative;display:flex;align-items:center;justify-content:center;margin:20px -16px 0;padding:10px 0 24px;overflow:hidden;overflow:clip}
.prism-view{--w:300px;--r:260px;position:relative;width:min(340px,62vw);margin:0 auto;aspect-ratio:3/4;perspective:1400px;touch-action:pan-y;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}
.prism-view:active{cursor:grabbing}
.prism-view:focus-visible{box-shadow:0 0 0 3px var(--accent);border-radius:14px}
.prism{position:absolute;inset:0;transform-style:preserve-3d}
.prism.anim{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.face{position:absolute;inset:0;border:0;padding:0;border-radius:14px;overflow:hidden;background:var(--primary) center/cover no-repeat;color:#fff;text-align:left;font:inherit;cursor:inherit;
  transform:rotateY(var(--rot)) translateZ(var(--r));backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.25);filter:brightness(.72);transition:filter .5s}
.face.is-front{filter:none}
.face-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72))}
.face-text{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.face-text small{font-size:11px;font-weight:700;letter-spacing:.2em;opacity:.85}
.face-text b{font-size:clamp(24px,7vw,32px);font-weight:800;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.prism-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--primary);font-size:30px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
.prism-arrow:focus-visible{outline:3px solid var(--accent)}

.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.open{background:var(--accent);color:var(--ink)}
.badge.soon{background:rgba(255,255,255,.88);color:var(--ink)}

.prism-now{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:20px auto 0;max-width:640px;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.now-text{flex:1 1 260px}
.now-text b{font-size:20px;margin-right:8px}
.now-text .badge.soon{background:var(--base)}
.now-text p{margin:4px 0 0;font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:99px;border:0;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:var(--base);color:var(--ink);opacity:.8;cursor:default}

/* 一覧 */
.p-list{margin:36px 0 0}
.p-list h2{font-size:18px;margin:0 0 10px}
.p-list ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.row{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:14px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.row:focus-visible{outline:3px solid var(--accent)}
.thumb{flex:none;width:56px;height:72px;border-radius:10px;background:var(--mist) center/cover no-repeat}
.row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.row-text b{font-size:16px}
.row-text small{font-size:12px;opacity:.75;line-height:1.5}
.row .badge.soon{background:var(--base)}

.p-foot{margin:40px 0 0;padding:20px 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(0,0,0,.08);font-size:13px}
.p-foot p{margin:4px 0}

/* 準備中のお知らせ */
.p-sheet{border:0;padding:0;border-radius:18px;max-width:min(420px,calc(100vw - 32px));width:100%;overflow:hidden;color:var(--ink)}
.p-sheet::backdrop{background:rgba(0,0,0,.5)}
.sheet-img{height:180px;background:var(--mist) center/cover no-repeat}
.sheet-body{padding:18px 20px 22px}
.sheet-body small{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--primary2)}
.sheet-body h3{margin:2px 0 6px;font-size:22px}
.sheet-body p{margin:0 0 8px;font-size:14px}
.sheet-body .btn{width:100%;margin-top:8px}

.prism-arrow.prev{left:max(8px,calc(50% - 240px))}
.prism-arrow.next{right:max(8px,calc(50% - 240px))}
@media (max-width:420px){.prism-arrow{width:42px;height:42px;font-size:26px}}
@media (prefers-reduced-motion:reduce){.prism.anim{transition:none}}

/* 会員登録・ログイン */
.p-account{margin:18px 0 0;background:#fff;border-radius:18px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.acc-grid{display:grid;gap:18px}
@media (min-width:760px){.acc-grid{grid-template-columns:1fr 360px;align-items:start}}
.acc-how h2{margin:0 0 8px;font-size:19px}
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:10px}
.steps li{counter-increment:st;position:relative;padding-left:42px;display:flex;flex-direction:column}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800}
.steps b{font-size:16px}
.steps span{font-size:14px;opacity:.85}
.small{font-size:13px}
.acc-form{display:flex;flex-direction:column;gap:4px;background:var(--base);border-radius:14px;padding:14px}
.acc-form label{font-size:14px;font-weight:700;margin-top:8px}
.acc-form input[type=email],.acc-form input[type=password],.acc-form input:not([type]){font:inherit;min-height:48px;padding:0 12px;border-radius:10px;border:1px solid rgba(0,0,0,.2);background:#fff;color:var(--ink);width:100%}
.acc-form .check{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:10px 0 4px}
.acc-form .check input{width:22px;height:22px;flex:none;margin-top:2px}
.btn.wide{width:100%;margin-top:10px}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.plain{background:var(--base);color:var(--ink)}
.seg{display:flex;gap:4px;background:#fff;border-radius:99px;padding:4px}
.seg button{flex:1;min-height:42px;border:0;border-radius:99px;background:transparent;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--primary);color:#fff}
.form-error{margin:8px 0 0;color:#b03a2e;font-weight:700;font-size:14px}
.acc-in{display:flex;flex-direction:column;gap:12px}
.acc-hello small{display:block;font-size:12px;opacity:.7}
.acc-hello b{font-size:20px}
.my-ranks{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.my-ranks li{background:var(--base);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column}
.my-ranks span{font-size:12px;opacity:.75}
.my-ranks b{font-size:18px}
.my-ranks small{font-size:12px;opacity:.75}
.acc-next{margin:0;padding:10px 12px;border-radius:12px;background:#f2f7e8;font-size:14px}
.acc-next b{display:block}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px}

/* みんなの順位 */
.p-board{margin:32px 0 0}
.p-sec-head h2{margin:0;font-size:20px}
.p-sec-head p{margin:2px 0 12px}
.board-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.board-card{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:8px}
.board-card header{display:flex;align-items:center;gap:10px}
.board-card header .thumb{width:40px;height:48px;border-radius:8px}
.board-card h3{margin:0;font-size:17px}
.board-card header p{margin:0}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid rgba(0,0,0,.06)}
.board-list li.me{background:#f2f7e8;border-radius:8px}
.board-list li.gap{min-height:20px;justify-content:center;opacity:.5;border:0}
.board-list .rk{flex:none;width:28px;height:28px;border-radius:50%;background:var(--base);display:grid;place-items:center;font-weight:800;font-size:14px}
.board-list .rk.r1{background:#e8c547}.board-list .rk.r2{background:#cfd5da}.board-list .rk.r3{background:#e0a77a}
.board-list .nm{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.board-list .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .pt{flex:none;font-weight:800}
.ai{flex:none;display:inline-block;padding:0 6px;border-radius:6px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;line-height:1.8}
.mini-seg{display:flex;gap:6px}
.mini-seg button{flex:1;min-height:40px;border-radius:99px;border:1px solid rgba(0,0,0,.15);background:#fff;font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
.mini-seg button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.board-tabs{max-width:420px;margin:0 0 12px}
.board-list .solo{flex:none;font-size:11px;font-weight:800;padding:0 6px;border-radius:6px;border:1px solid currentColor;opacity:.8;line-height:1.7}
.my-ranks .two{display:flex;flex-direction:column;gap:2px}
.my-ranks .two em{font-style:normal;font-size:12px;opacity:.75;margin-right:4px}
.board-more{align-self:flex-end;font-size:14px;font-weight:700;text-decoration:none;color:var(--primary2);min-height:40px;display:inline-flex;align-items:center}

/* 競技のメニュー */
.p-list li{display:flex;flex-direction:column;gap:6px}
.row-menu{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.row-menu a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:99px;background:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* ===== 2026-11-04 トップの作り直し：写真・動画のヒーロー、回る柱は見出しの右 ===== */
.p-top{position:absolute;left:0;right:0;top:0;z-index:20;background:linear-gradient(180deg,rgba(8,14,16,.6),rgba(8,14,16,0));color:#fff}
.p-top-inner{justify-content:space-between}
.p-top-acc{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:14px;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.p-hero{position:relative;overflow:hidden;color:#fff;background:#0d1517;padding:calc(76px + env(safe-area-inset-top,0px)) 0 40px}
.hero-bg{position:absolute;inset:0}
.hero-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center 35%/cover no-repeat;opacity:0;transition:opacity 1.2s ease;transform:scale(1.08)}
.hero-layer.on{opacity:1;animation:heroDrift 14s ease-out both}
@keyframes heroDrift{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,16,.88) 0%,rgba(8,14,16,.62) 48%,rgba(8,14,16,.3) 100%),linear-gradient(0deg,rgba(8,14,16,.75) 0%,rgba(8,14,16,0) 35%)}
.hero-inner{position:relative;display:grid;gap:18px;align-items:center}
@media (min-width:860px){.hero-inner{grid-template-columns:1fr 380px;gap:32px;min-height:560px}}
.hero-text .p-kicker{color:var(--accent)}
.p-hero h1{margin:8px 0 12px;font-size:clamp(32px,6.4vw,58px);line-height:1.18;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.p-hero .p-lead{font-size:16px;max-width:30em;opacity:.92}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn.accent{background:var(--accent);color:var(--ink)}
.btn.glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px}
.hero-side .prism-stage{margin:0;padding:6px 0 4px;overflow:visible}
.hero-side .prism-view{width:min(300px,64vw)}
.hero-side .prism-arrow.prev{left:0}.hero-side .prism-arrow.next{right:0}
.hero-side .prism-arrow{background:rgba(255,255,255,.9)}
.hero-side .prism-now{margin:16px 0 0;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-side .prism-now .btn.primary{background:var(--accent);color:var(--ink)}
.hero-side .prism-now .btn.ghost{background:rgba(255,255,255,.15);color:#fff}
.hero-side .now-text .badge.soon{background:rgba(255,255,255,.85)}

/* 登録欄：競技の写真を並べた帯の上 */
.acc-band{position:relative;padding:36px 0;overflow:hidden;background:#0d1517}
.acc-strip{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.acc-strip span{background:center/cover no-repeat;filter:saturate(.9)}
.acc-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,21,23,.55),rgba(13,21,23,.82))}
.acc-band .p-wrap{position:relative;z-index:2}
.acc-band .p-account{margin:0;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.acc-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--primary2)}
.join-note{margin:0 0 6px;padding:10px 12px;border-radius:12px;background:#fff6dc;font-size:14px}
.join-note b{display:block}
.form-ok{margin:0;padding:10px 12px;border-radius:12px;background:#e9f4dc;font-weight:700;font-size:14px}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acc-cols{display:grid;gap:18px}
@media (min-width:760px){.acc-cols{grid-template-columns:1fr 1.2fr}}
.acc-cols h3{margin:0 0 8px;font-size:16px}
.my-groups{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.my-groups li{background:var(--base);border-radius:12px;padding:10px 12px}
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.g-row b{font-size:16px;margin-right:4px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:#fff;font-weight:700}
.tag.g{background:var(--accent);color:var(--ink)}
.g-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.g-tools .inv{flex:1 1 200px;min-width:0;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid rgba(0,0,0,.15);font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.g-form{margin-top:10px}
.g-form label{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.g-line{display:flex;gap:6px}
.g-line input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(0,0,0,.2);font:inherit;background:#fff;color:var(--ink)}

/* 順位のカード：上に競技の写真 */
.board-card{padding:0;overflow:hidden;gap:0}
.board-card header{position:relative;display:flex;align-items:flex-end;min-height:110px;padding:12px 16px;background:var(--primary) center 30%/cover no-repeat;color:#fff}
.board-card header::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
.board-card header>div{position:relative}
.board-card header small{font-size:11px;font-weight:800;letter-spacing:.18em;opacity:.85}
.board-card header h3{margin:0;font-size:19px;color:#fff}
.board-card header p{margin:0;font-size:12px;opacity:.9}
.board-body{padding:8px 16px 12px;display:flex;flex-direction:column;gap:6px}
.board-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.p-board{margin-top:36px}

/* ===== 2026-11-04 単色の背景をやめる：細かい点の模様 ===== */
body{background-color:var(--base);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%231f2e33' fill-opacity='.12'/%3E%3C/svg%3E")}
.board-card,.p-account,.row{background-color:#fff}
.my-groups li{background-color:var(--base);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%231f2e33' fill-opacity='.12'/%3E%3C/svg%3E")}
.row-menu a{background-image:linear-gradient(180deg,#fff,#f4f7f6)}
.p-foot{background:transparent}
.opt{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:0 0 10px}
.opt input{width:20px;height:20px;flex:none;margin-top:2px}
.entry-note{margin:4px 0 0;font-size:13px}
.board-list.entry .rk{background:#e9f4dc;color:#3b6b1f}
.board-list .pt.small{font-size:12px;font-weight:700;opacity:.7}

/* ヘッダーの右（登録・ログイン） */
.p-top-right{display:flex;align-items:center;gap:8px;min-width:0}
@media (max-width:420px){.p-top-acc{padding:0 12px;max-width:10em}}

/* ===== 2026-11-04 TOPで遊び方を選ぶ（POG ／ レース対戦）。ヒーローに同じ重みの2つの札、下の中身はタブで切りかえ ===== */
.p-hero{padding-bottom:28px}
.p-hero>.hero-bg{background:#0d1517 url(media/hero-wide.jpg) center 40%/cover no-repeat}
.p-hero>.hero-bg::after{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 16px),linear-gradient(180deg,rgba(8,14,16,.78) 0%,rgba(8,14,16,.6) 45%,rgba(8,14,16,.9) 100%)}
.p-hero .hero-inner{display:block;min-height:0}
.p-hero h1{font-size:clamp(30px,5.6vw,52px)}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pick{position:relative;display:flex;align-items:flex-end;min-height:300px;padding:0;border:0;border-radius:20px;overflow:hidden;background:#13201b;color:#fff;font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .25s ease,box-shadow .25s ease}
.pick:hover{transform:translateY(-2px)}
.pick:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pick.on{box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 3px var(--accent)}
.pick-media{position:absolute;inset:0}
.pick-media video,.pick-media .pick-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
.pick-mosaic{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.pick-mosaic span{background:center 30%/cover no-repeat}
.pick-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,16,.1) 0%,rgba(8,14,16,.45) 40%,rgba(8,14,16,.9) 100%)}
.pick-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:18px 20px 20px}
.pick-body small{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.pick-body>b{font-size:clamp(24px,3.4vw,32px);line-height:1.25;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.pick-body em{font-style:normal;font-size:15px;opacity:.95}
.pick-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pick-tags span{padding:1px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.4);font-size:12px;font-weight:700;background:rgba(0,0,0,.2)}
.pick-go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:0 20px;border-radius:99px;background:var(--accent);color:var(--ink);font-weight:800;font-size:15px}
.pick-go i{font-style:normal;transition:transform .25s}
.pick:hover .pick-go i{transform:translateX(3px)}
.pick-pre{letter-spacing:0;padding:1px 10px;border-radius:99px;background:#ffe9b0;color:#3a2c08;font-size:11px}
.pick-pre[hidden]{display:none}
.hero-acc{margin:14px 0 0;font-size:13px;opacity:.9}
.hero-acc a{color:#fff;font-weight:800}
@media (max-width:700px){
  .pick-grid{grid-template-columns:1fr;gap:12px;margin-top:18px}
  .pick{min-height:210px}
  .pick-body{padding:14px 16px 16px}
  .pick-body em{font-size:14px}
  .pick-go{min-height:42px;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.pick,.pick-go i{transition:none}.pick:hover{transform:none}}

/* 遊び方のタブ（上にくっつく） */
.play-bar{position:sticky;top:0;z-index:15;padding:10px 0;padding-top:calc(10px + env(safe-area-inset-top,0px));background-color:rgba(238,243,242,.92);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%231f2e33' fill-opacity='.12'/%3E%3C/svg%3E");
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:0}
.play-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:560px;margin:0 auto;padding:4px;border-radius:99px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.play-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:99px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.play-tabs b{font-size:16px;font-weight:800}
.play-tabs small{font-size:12px;opacity:.7}
.play-tabs button.on{background:var(--primary);color:#fff}
.play-tabs button.on small{opacity:.85}
.play-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.play-tabs small{display:none}}
.play-panel[hidden]{display:none}

/* POG：競技を選ぶ柱（背景は正面の競技の写真・競馬は動画） */
.pog-stage{position:relative;overflow:hidden;color:#fff;background:#0d1517;padding:32px 0}
.pog-stage-in{position:relative;display:grid;gap:18px;align-items:center}
@media (min-width:860px){.pog-stage-in{grid-template-columns:1fr 380px;gap:32px}}
.pog-stage .p-kicker{color:var(--accent)}
.pog-stage h2{margin:4px 0 8px;font-size:clamp(24px,4vw,36px);line-height:1.3}
.pog-stage-text p{margin:0 0 14px;font-size:15px;max-width:32em;opacity:.92}

/* レース対戦：写真＋暗いグラデーション＋細い斜線 */
.game-stage{position:relative;overflow:hidden;color:#fff;padding:30px 0 26px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px),linear-gradient(90deg,rgba(10,20,16,.92),rgba(10,20,16,.55)),#13201b url(media/game/race-hero.jpg) center 40%/cover no-repeat}
.game-stage .p-kicker{color:#e8c45a}
.game-stage h2{margin:4px 0 6px;font-size:clamp(24px,4vw,34px);line-height:1.3}
.game-lead{margin:0;font-size:15px;max-width:40em;opacity:.92}
.game-promise{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:10px 0 0;padding:0;font-size:13px;font-weight:800;color:#e8c45a}
.game-promise li::before{content:'✓ '}
.game-pre{max-width:640px;margin-top:10px}
.game-pre .po-box{font-size:14px}
.game-go{margin-top:12px}
.game-stage .btn.accent{background:#e8c45a;color:var(--ink)}

.g-sec{margin:32px 0 0}
.g-sports{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g-sport{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.g-sport-head{position:relative;display:flex;align-items:flex-end;gap:12px;min-height:140px;padding:14px 16px;background:#13201b center 40%/cover no-repeat;color:#fff;text-decoration:none}
.g-sport-head::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78))}
.g-face{position:relative;flex:none;width:54px;height:70px;border-radius:10px;background:center/cover no-repeat;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.g-sport-text{position:relative;display:flex;flex-direction:column;min-width:0}
.g-sport-text small{font-size:11px;font-weight:800;letter-spacing:.2em;color:#e8c45a}
.g-sport-text b{font-size:24px;line-height:1.2}
.g-sport-text em{font-style:normal;font-size:13px;opacity:.92;line-height:1.5}
.g-sport-head:focus-visible,.g-modes a:focus-visible,.g-events a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.g-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}
.g-modes a{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#fff;text-decoration:none;color:var(--ink);transition:border-color .2s}
.g-modes a:hover{border-color:var(--primary2)}
.g-mode-img{display:block;height:58px;background:#cfd8d6 center/cover no-repeat}
.g-mode-text{display:flex;flex-direction:column;padding:6px 8px 8px;min-height:52px}
.g-mode-text b{font-size:13px;line-height:1.35}
.g-mode-text small{font-size:11px;font-weight:700;color:var(--primary2)}
@media (max-width:520px){.g-modes{grid-template-columns:1fr 1fr}}
.g-two{display:grid;gap:0 16px}
@media (min-width:760px){.g-two{grid-template-columns:1.4fr 1fr}}
.g-card{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.g-card p{margin:0 0 8px}
.g-events{list-style:none;margin:0;padding:0}
.g-events li+li{border-top:1px solid rgba(0,0,0,.07)}
.g-events a{display:flex;flex-direction:column;gap:2px;padding:10px 4px;text-decoration:none;color:var(--ink)}
.g-ev-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.g-ev-top b{font-size:15px}
.g-events small{font-size:12px;opacity:.75}
.g-sp{padding:0 8px;border-radius:6px;background:var(--primary);color:#fff;font-size:12px;font-weight:800}
.g-tag{padding:0 8px;border-radius:99px;background:var(--base);font-size:12px;font-weight:700}
.g-tag.on{background:#e9f4dc;color:#3b6b1f}
.g-tag.shut{background:#eee;color:#666}
.g-total{margin:0 0 2px !important;font-size:14px}
.g-new-head{margin-top:24px}
.g-new-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.g-new-l li{display:flex;align-items:center;gap:10px;min-width:0}
.g-new-l li b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-new-l svg{flex:none;border-radius:50%}
.g-total b{font-size:30px;font-variant-numeric:tabular-nums}
.g-boards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.g-boards>.g-card{grid-column:1/-1}
.g-board header{min-height:90px}
.cross-note{margin:28px 0 0;padding:14px 16px;border-radius:14px;background:#fff;font-size:14px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.link-btn{margin:0 2px;padding:0;border:0;background:none;color:var(--primary2);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.link-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.acc-band{margin-top:36px}
.p-board,.p-list,.g-sec,.acc-band{scroll-margin-top:80px}

/* ===== 2026-11-04 回る柱をヒーローに戻す（右に柱、左に見出しと2つの札。スマホは 見出し→札→柱） ===== */
.p-hero .hero-inner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "picks" "side" "acc" "apps";gap:0;align-items:start}
.p-hero .hero-text{grid-area:text}
.p-hero .pick-grid{grid-area:picks}
.p-hero .hero-side{grid-area:side;margin-top:18px;width:100%;max-width:420px;justify-self:center}
.p-hero .hero-acc{grid-area:acc}
@media (min-width:1000px){
  .p-hero .p-wrap.hero-inner{max-width:1180px}
  .p-hero .hero-inner{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"text side" "picks side" "acc side" "apps side";column-gap:44px;min-height:600px;align-content:center}
  .p-hero .hero-side{align-self:center;margin-top:0;max-width:none}
  .p-hero .pick{min-height:270px}
}
/* 背景：下に広い写真、その上に正面の競技の写真（競馬のPOGは動画）、いちばん上に暗いグラデーション */
.p-hero>.hero-bg .hero-layer{background-position:center 35%}
.p-hero .hero-side .prism-stage{padding:4px 0 0}
.p-hero .hero-side .prism-view{width:min(290px,64vw)}
.p-hero .face-text b{font-size:clamp(22px,6vw,28px)}
.p-hero .face.is-front{box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 2px rgba(255,255,255,.35)}
/* 正面の競技：POGで遊ぶ ／ レース対戦で遊ぶ（選んでいるタブの側を目立たせる） */
.p-hero .hero-side .prism-now{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:14px 0 0;padding:14px;max-width:none}
.p-hero .now-text{flex:none}
.p-hero .now-text small{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.p-hero .now-text b{font-size:20px;margin:0}
.p-hero .now-text p{margin:2px 0 0;font-size:13px;line-height:1.55;opacity:.9}
.now-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.now-act{display:flex;flex-direction:column;justify-content:center;min-height:58px;padding:7px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;text-decoration:none;line-height:1.35;transition:background .2s,transform .2s}
.now-act small{font-size:11px;font-weight:700;opacity:.85;white-space:nowrap}
.now-act b{font-size:15px;font-weight:800;white-space:nowrap}
.now-act:hover{background:rgba(255,255,255,.2)}
.now-act.main.pog{background:var(--accent);border-color:transparent;color:var(--ink)}
.now-act.main.game{background:#e8c45a;border-color:transparent;color:var(--ink)}
.now-act.main:hover{transform:translateY(-1px)}
.now-act.off{opacity:.55;cursor:default}
.now-act:focus-visible{outline:3px solid #fff;outline-offset:2px}
body[data-play="game"] .p-hero .now-text small{color:#e8c45a}
@media (max-width:700px){
  .p-hero .hero-side{margin-top:14px}
  .p-hero .hero-side .prism-view{width:min(230px,58vw)}
  .p-hero .prism-arrow{width:42px;height:42px;font-size:26px}
  .p-hero .now-text p{display:none}
  .p-hero .now-text{display:flex;align-items:baseline;gap:10px}
  .p-hero .hero-side .prism-now{padding:12px;gap:8px}
  .now-act{min-height:54px;padding:6px 10px}
  .now-act b{font-size:14px}
}
@media (max-width:360px){.now-act small{white-space:normal}}
@media (prefers-reduced-motion:reduce){.now-act{transition:none}.now-act.main:hover{transform:none}}

/* POG の帯：競技の写真を並べた背景（柱はヒーローへ移した） */
.pog-stage{padding:28px 0}
.pog-strip{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.pog-strip span{background:center 30%/cover no-repeat}
.pog-stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,14,16,.9) 0%,rgba(8,14,16,.72) 55%,rgba(8,14,16,.5) 100%)}
.pog-stage-in{z-index:2}
@media (min-width:860px){.pog-stage-in{grid-template-columns:1fr}}
/* マイページ：アイコンを主に（2026-11-04） */
.acc-me{display:flex;align-items:center;gap:14px}
.acc-icon svg{display:block;border-radius:50%}
.nick-status{min-height:1.2em;margin:4px 0 0}
.nick-status.ok{color:#2f7d4f}
.nick-status.ng{color:#c0392b}
.acc-race{margin:10px 0}
.my-race{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.my-race li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.04)}
.my-race li span{min-width:4.5em;font-size:12px;opacity:.7}
.my-race li small{opacity:.7}
.my-race li a{margin-left:auto;font-weight:800}

/* 招待のQRコード（invite-qr.js・2026-11-04） */
.qr-dialog{border:0;border-radius:16px;padding:0;max-width:min(92vw,360px);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.qr-dialog::backdrop{background:rgba(0,0,0,.45)}
.qr-box{padding:18px;text-align:center;background:#fff;color:#222}
.qr-title{font-weight:800;margin:0 0 10px}
.qr-img svg{width:min(70vw,260px);height:auto}
.qr-url{font-size:12px;word-break:break-all;color:#555;margin:8px 0}
.qr-note{font-size:13px;margin:6px 0 12px}
.qr-btns{display:flex;gap:8px;justify-content:center}
.invite-ctx{border-left:4px solid #c9a227}

/* スマホでは、競技名の上の飾りの英語（JRA 2YO・SUMO・KEIRIN など）を出さない。日本語の競技名がすぐ横にある（2026-11-05 ペルソナレビュー C4。ほかの画面と同じ決まり） */
@media (pointer:coarse),(max-width:700px){
  .face-text small,.sheet-body small,.board-card header small,.g-sport-text small,.p-hero .now-text small{display:none}
}
/* スマホで中身が札の右にはみ出す（2026-11-07 ユーザー指摘・アプリの画面）：グリッドの列は既定で「中身の最小の幅」より縮まないため、
   管理者の道具や順位の札が並ぶと列が札より広がっていた。列が札の幅まで縮むように */
.acc-cols>*,.acc-grid>*,.acc-in>*{min-width:0}
.p-account{overflow-wrap:anywhere}
.g-line .btn{flex:none}
.p-top-set{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:20px;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.p-brand{flex:none;white-space:nowrap}.p-top-inner{gap:8px}
/* みんなの順位：写真の札（競技名）を押すと選手を選ぶ画面へ（2026-11-08） */
.board-head{display:block;text-decoration:none;color:inherit}
.board-head header{transition:filter .15s}
.board-head:hover header,.board-head:focus-visible header{filter:brightness(1.08)}
.board-pick{display:inline-flex;align-items:center;margin-top:8px;padding:6px 14px;border-radius:999px;background:var(--accent,#86ac41);color:#1f2e33;font-size:14px;font-weight:800;min-height:34px}
.board-pick.done{background:#ffffffe0}

/* アプリの案内（トップのヒーロー。ブラウザだけ） */
.hero-apps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.hero-apps-lbl{font-size:13px;font-weight:700;width:100%}
.app-btn{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 14px;border-radius:12px;background:#111;color:#fff;text-decoration:none;line-height:1.2;border:1px solid #ffffff40}
.app-btn small{font-size:11px;opacity:.8}
.app-btn b{font-size:14px}
.app-btn.is-wait{background:#ffffffd9;color:#555;border-color:#0000001f;cursor:default}
.p-hero .hero-apps{grid-area:apps}