/* AI対戦のサイト（/ai）。無料・気軽という PON! 本体とは別の、ダークな専用の見た目。.ai-site の中だけに効く */
.ai-site{--a-bg:#07070D;--a-bg2:#0D0E1B;--a-line:rgba(140,150,255,.18);--a-text:#E9ECFF;--a-mut:#9AA3C7;--a-cyan:#4DE1FF;--a-vio:#8B5CFF;--a-lime:#B6FF5C;
  min-height:100dvh;background:radial-gradient(1200px 520px at 80% -10%,rgba(139,92,255,.22),transparent 60%),radial-gradient(900px 480px at 0% 10%,rgba(77,225,255,.12),transparent 60%),linear-gradient(var(--a-bg),var(--a-bg2));color:var(--a-text);font-weight:500}
.ai-site *{box-sizing:border-box;min-width:0}
.ai-site h1,.ai-site h2,.ai-site h3,.ai-site p{margin:0}
.ai-site a{color:var(--a-cyan)}
.ai-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 28px}

/* ヘッダー */
.ai-nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(7,7,13,.78);border-bottom:1px solid var(--a-line)}
.ai-nav .ai-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:nowrap}
.ai-nav .logo{font-size:26px;color:#fff}
.ai-nav .logo svg{width:48px;height:30px}
.ai-nav nav{display:flex;align-items:center;gap:22px}
.ai-nav a.lk{color:var(--a-mut);text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 2px}
.ai-nav a.lk:hover,.ai-nav a.lk[aria-current="page"]{color:#fff}
.ai-nav a.lk[aria-current="page"]{box-shadow:0 2px 0 var(--a-cyan)}
.ai-nav .acct .lk-btn{border-color:var(--a-line);color:var(--a-text)}

/* ボタン */
.ai-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;border:1px solid transparent;background:linear-gradient(135deg,var(--a-cyan),var(--a-vio));color:#06060F;font:inherit;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 0 24px rgba(77,225,255,.28);transition:transform .12s,box-shadow .12s}
.ai-btn:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(77,225,255,.42)}
.ai-btn:disabled{opacity:.5;cursor:not-allowed}
.ai-btn.lg{min-height:58px;padding:0 32px;font-size:17.5px}
.ai-btn.small{min-height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.ai-ghost{display:inline-flex;align-items:center;min-height:58px;padding:0 22px;border-radius:12px;border:1px solid var(--a-line);color:var(--a-text)!important;text-decoration:none;font-weight:800}
.ai-ghost:hover{border-color:var(--a-cyan)}
.ai-err{color:#FF8E91;min-height:1.4em;font-weight:700}

/* ヒーロー */
.ai-hero{border-bottom:1px solid var(--a-line);background-image:linear-gradient(var(--a-line) 1px,transparent 1px),linear-gradient(90deg,var(--a-line) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px}
.ai-hero-in{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-top:84px;padding-bottom:92px}
.ai-copy{flex:1.2 1 460px;display:flex;flex-direction:column;gap:24px}
.ai-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:99px;border:1px solid var(--a-line);background:rgba(255,255,255,.04);font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--a-cyan)}
.ai-chip i{width:8px;height:8px;border-radius:50%;background:var(--a-lime);box-shadow:0 0 10px var(--a-lime)}
.ai-hero h1{font-size:clamp(34px,5vw,60px);line-height:1.22;font-weight:900;letter-spacing:.01em;word-break:auto-phrase;text-wrap:balance}
.ai-lead{font-size:17px;line-height:1.95;color:var(--a-mut);max-width:34em}
.ai-cta{display:flex;flex-wrap:wrap;gap:14px}
.ai-note{font-size:14px;color:var(--a-lime);font-weight:800}
.ai-art{flex:1 1 320px;display:flex;justify-content:center}
.ai-art svg{width:min(100%,440px);height:auto;filter:drop-shadow(0 0 28px rgba(139,92,255,.35))}

/* セクション */
.ai-sec{padding:84px 0;border-bottom:1px solid var(--a-line)}
.ai-sec>.ai-wrap{display:flex;flex-direction:column;gap:36px}
.ai-head{display:flex;flex-direction:column;gap:10px}
.ai-kicker{font-weight:900;font-size:12.5px;letter-spacing:.18em;color:var(--a-vio)}
.ai-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.3}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.ai-card{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;border:1px solid var(--a-line);background:rgba(255,255,255,.035)}
.ai-card:hover{border-color:rgba(77,225,255,.5)}
.ai-card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ai-card-hd h3{font-size:21px;font-weight:900}
.ai-card-hd span{font-size:13px;font-weight:800;color:var(--a-mut)}
.ai-card p{color:var(--a-mut);line-height:1.8;font-size:14.5px}
.ai-card-ft{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ai-card-ft a{font-weight:800;font-size:14px}
.ai-foot{color:var(--a-mut);font-size:13.5px;line-height:1.8}

/* 難易度 */
.ai-levels{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.ai-lv{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;border:1px solid var(--a-line);background:rgba(255,255,255,.035)}
.ai-lv-name{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-lv-name b{font-size:19px;font-weight:900}
.ai-lv p{color:var(--a-mut);line-height:1.8;font-size:14.5px}
.ai-tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:900;border:1px solid}
.ai-tag.free{color:var(--a-lime);border-color:rgba(182,255,92,.5)}
.ai-tag.paid{color:#FFC86B;border-color:rgba(255,200,107,.5)}
.ai-meter{display:flex;gap:5px}
.ai-meter i{width:100%;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
.ai-meter i.on{background:linear-gradient(90deg,var(--a-cyan),var(--a-vio));box-shadow:0 0 10px rgba(77,225,255,.35)}

/* 3ステップ */
.ai-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.ai-steps li{display:flex;gap:16px;padding:22px;border-radius:16px;border:1px solid var(--a-line);background:rgba(255,255,255,.035)}
.ai-no{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--a-cyan);color:var(--a-cyan);font-weight:900}
.ai-steps h3{font-size:18px;font-weight:900;margin-bottom:6px}
.ai-steps p{color:var(--a-mut);line-height:1.8;font-size:14.5px}

/* 料金 */
.ai-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.ai-plan{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:18px;border:1px solid var(--a-line);background:rgba(255,255,255,.035)}
.ai-plan.pro{border-color:rgba(139,92,255,.55);background:linear-gradient(160deg,rgba(139,92,255,.16),rgba(255,255,255,.03))}
.ai-plan h3{font-size:22px;font-weight:900}
.ai-plan ul{margin:0;padding-left:1.2em;display:grid;gap:8px;color:var(--a-mut);line-height:1.8}
.ai-plan a{font-weight:800;font-size:14px}

/* よくある質問 */
.ai-faq{display:grid;gap:12px;max-width:860px}
.ai-q{border:1px solid var(--a-line);border-radius:14px;background:rgba(255,255,255,.035);padding:4px 18px}
.ai-q summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none}
.ai-q summary::before{content:'＋';display:inline-block;width:1.5em;color:var(--a-cyan)}
.ai-q[open] summary::before{content:'－'}
.ai-q p{color:var(--a-mut);line-height:1.9;padding:0 0 16px 1.5em}

/* フッター */
.ai-foot-bar{padding:48px 0 64px}
.ai-foot-bar .ai-wrap{display:flex;flex-direction:column;gap:16px}
.ai-foot-bar p{color:var(--a-mut);line-height:1.8}
.ai-foot-bar nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ai-foot-bar nav a{color:var(--a-mut);text-decoration:none;font-size:14px;font-weight:700}
.ai-foot-bar nav a:hover{color:#fff}
.ai-foot-bar small{color:#6E7599}

@media (max-width:720px){
  .ai-wrap{padding:0 16px}
  .ai-nav .ai-wrap{min-height:56px;gap:8px}
  .ai-nav .logo{font-size:22px}.ai-nav .logo svg{width:40px;height:25px}
  .ai-nav nav{gap:10px}
  .ai-nav a.lk:not([aria-current="page"]){display:none}
  .ai-nav .acct .who{display:none}
  .ai-nav .acct .lk-btn{min-height:34px;padding:0 10px;font-size:12.5px;white-space:nowrap}
  .ai-hero-in{padding-top:44px;padding-bottom:56px;gap:28px}
  .ai-sec{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){.ai-btn{transition:none}}

/* ---- AI対戦ルームの中（ロビーと、AIの席） ---- */
.aibar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;border:1px solid rgba(77,225,255,.45);background:linear-gradient(135deg,rgba(77,225,255,.12),rgba(139,92,255,.16));font-size:14px}
.aibar b{color:#4DE1FF;letter-spacing:.06em}
.aipanel{display:grid;gap:10px;padding:14px 16px;border-radius:18px;background:var(--felt);border:2px solid rgba(139,92,255,.6)}
.aipanel .grp{display:flex;flex-wrap:wrap;gap:8px}
.aipanel .row{display:flex;flex-wrap:wrap;gap:10px}
.aipanel .chip.lvl{min-height:40px;font-size:14px}
.aipanel .chip.lvl[aria-pressed="true"]{background:#4DE1FF;color:#06060F;border-color:#4DE1FF}
.aipanel .chip.lvl[aria-pressed="false"]{background:var(--tile);color:var(--paper);border-color:var(--line)}
.aipanel .chip.lvl.locked{opacity:.75}
.aipanel .chip.lvl small{margin-left:4px;padding:1px 7px;border-radius:99px;background:rgba(255,200,107,.2);color:#FFC86B;font-size:11px;font-weight:900}
.aipanel .sub.warn{color:#FFC86B}
.seat .tag.bot{background:#4DE1FF;color:#06060F}
.seat-x{margin-left:auto;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--tile);color:var(--paper);font:inherit;font-weight:900;cursor:pointer}
.seat-x:hover{border-color:#FF8E91;color:#FF8E91}
.tile.bot{background:radial-gradient(circle at 50% 38%,#2A2158,#120F26)}
.tile.bot .avatar{background:#0B0C20!important;color:#4DE1FF!important;border:2px solid #4DE1FF;box-shadow:0 0 22px rgba(77,225,255,.5);font-weight:900;letter-spacing:.04em}
html[data-mode="ai"] .screen.room .bar{border-bottom:1px solid rgba(77,225,255,.35);padding-bottom:6px}