/* ゲームアーケード共通デザイン */
:root{
  --bg:#0b1020;--panel:#141b30;--panel2:#1b2440;--line:#2a3658;--text:#e9eef8;--muted:#9aa8c4;
  --accent:#f4c21b;--accent2:#35c9e6;--good:#4fd18b;--bad:#ff5a6a;--radius:12px;
  --disp:'Dela Gothic One','Hiragino Kaku Gothic StdN',sans-serif;--body:'M PLUS 1p','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,button,a{touch-action:manipulation}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-tap-highlight-color:transparent}
body{min-height:100vh;background:radial-gradient(1200px 600px at 20% -10%,#1d2a55 0%,transparent 60%),radial-gradient(900px 500px at 110% 10%,#3a1d4f 0%,transparent 55%),var(--bg)}
a{color:inherit}
button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;transition:transform .08s,background .15s,border-color .15s}
button:hover{border-color:#4a5d90}button:active{transform:translateY(1px)}
button.primary{background:var(--accent);color:#1a1300;border-color:var(--accent);font-weight:800}
button.on{background:var(--accent2);color:#04212a;border-color:var(--accent2);font-weight:800}
button:disabled{opacity:.4;cursor:not-allowed}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
/* ゲーム画面の上部バー */
.gbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(11,16,32,.85);backdrop-filter:blur(6px);position:sticky;top:0;z-index:100}
/* ゲーム画面の中の札やカードが、上部バーやサウンド設定より手前に出ないようにする */
.wrap,#wrap{isolation:isolate}
.gbar .back{text-decoration:none;font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.gbar .back:hover{color:var(--text);border-color:#4a5d90}
.gbar h1{margin:0;font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.04em}
.gbar .sp{flex:1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lab{font-size:12px;color:var(--muted);margin-right:2px}
.muted{color:var(--muted)}
.overlay{position:fixed;inset:0;background:rgba(5,8,18,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.overlay[hidden]{display:none}
.dialog{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius);padding:20px 22px;max-width:420px;width:100%;text-align:center}
.dialog h2{font-family:var(--disp);font-weight:400;margin:0 0 8px;font-size:26px}
.dialog p{margin:6px 0}
.dialog .row{justify-content:center;margin-top:14px}
@media (max-width:560px){.gbar h1{font-size:17px}.wrap{padding:10px}}

/* 記録のリセットボタン */
.recrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
button.reset{font-size:12px;padding:4px 10px;color:var(--muted);background:transparent}
button.reset:hover{color:var(--bad);border-color:var(--bad)}

/* 説明ページ（遊び方・サイト紹介・規約など） */
.site-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(11,16,32,.85);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.site-head .logo{font-family:var(--disp);font-size:18px;text-decoration:none;color:var(--accent);letter-spacing:.04em}
.site-head .sp{flex:1}
.site-head nav a{font-size:13px;color:var(--muted);text-decoration:none;margin-left:12px}
.site-head nav a:hover{color:var(--text)}
.doc{max-width:780px;margin:0 auto;padding:18px 16px 40px;line-height:1.85}
.doc .crumb{font-size:13px;color:var(--muted);margin:0}
.doc .crumb a{color:var(--muted)}
.doc h1{font-family:var(--disp);font-weight:400;font-size:clamp(24px,5.5vw,34px);margin:6px 0 4px;letter-spacing:.03em}
.doc h2{font-size:19px;margin:34px 0 10px;padding-left:10px;border-left:4px solid var(--accent)}
.doc h3{font-size:16px;margin:22px 0 6px}
.doc p,.doc li{color:#d6deef}
.doc ul,.doc ol{padding-left:1.4em}
.doc li{margin:4px 0}
.doc .lead{font-size:16px;color:var(--text)}
.doc kbd{font-family:inherit;font-size:13px;background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px}
.tablewrap{overflow-x:auto;margin:10px 0}
.doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.doc th,.doc td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--panel2);white-space:nowrap}
.note{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:14px 0}
.note p{margin:4px 0}
.cta{display:inline-block;background:var(--accent);color:#1a1300;font-weight:800;text-decoration:none;border-radius:999px;padding:10px 24px;margin:6px 0}
.cta:hover{filter:brightness(1.08)}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:10px;padding:0!important;list-style:none;margin:12px 0}
.glist li{margin:0}
.glist a{display:block;height:100%;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;transition:border-color .15s}
.glist a:hover{border-color:var(--accent)}
.glist b{display:block;font-size:16px;color:var(--text)}
.glist span{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-top:2px}
.gform{background:#fff;border-radius:var(--radius);overflow:hidden;margin:14px 0}
.gform iframe{display:block;width:100%;height:1480px;border:0}
@media (max-width:560px){.gform iframe{height:1700px}}
.site-foot{border-top:1px solid var(--line);text-align:center;padding:18px 16px 30px;font-size:13px;color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:8px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--text)}
@media (max-width:560px){.site-head nav{display:none}}

/* サウンド設定ボタン */
.sndwrap{position:relative;flex:none}
.sndbtn{width:34px;height:34px;padding:0;border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center}
.sndbtn.off{opacity:.45;text-decoration:line-through}
.sndpop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:flex;flex-direction:column;gap:6px;min-width:150px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sndpop[hidden]{display:none}
.sndpop b{font-size:12px;color:var(--muted);font-weight:700}
.sndpop button{font-size:13px;padding:6px 10px;text-align:left}
@media (max-width:560px){.sndbtn{width:30px;height:30px;font-size:15px}}

/* スマホで指を動かして遊ぶゲーム：盤面と操作ボタン（.lockarea）の上では拡大・スクロールしない。ページの他の部分は普通にスクロールできる */
@media (pointer:coarse){
  html:has(body.lockpage),body.lockpage{overscroll-behavior:none}
  .lockarea,.lockarea *{touch-action:none}
  /* ゲーム画面の中でも、タイトル画面など文字の多い部分（.scroll-y）は縦にスクロールできる */
  .lockarea .scroll-y,.lockarea .scroll-y *{touch-action:pan-y}
  html.playing,html.playing body{overflow:hidden}
}

/* キャラクター紹介 */
.chara{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:12px 0}
.chara .cimg{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end}
.chara .cf{width:96px;height:96px;border-radius:10px;border:1px solid rgba(255,255,255,.15)}
.chara .cm{width:96px;height:96px;object-fit:contain;background:radial-gradient(circle,#24304f,#141b30 70%);border-radius:10px}
.chara h3{margin:0 0 4px;font-size:18px}
.chara h3 small{display:block;font-size:12px;color:var(--accent);font-weight:700;margin-top:2px}
.chara p{margin:6px 0}
.chara .cq{color:#ffe27a;font-weight:700}
@media (max-width:560px){.chara{grid-template-columns:1fr}.chara .cf,.chara .cm{width:84px;height:84px}}

/* ゲームページ下部の紹介文 */
.gabout{max-width:780px;margin:24px auto 0;padding:0 16px 30px;line-height:1.85;color:#d6deef}
.gabout h2{font-size:18px;margin:22px 0 8px;padding-left:10px;border-left:4px solid var(--accent);color:var(--text)}
.gabout ul{padding-left:1.3em}
.gabout .gcrumb{font-size:13px;color:var(--muted);margin:0}.gabout .gcrumb a{color:var(--muted)}
.gabout .glinks{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.gabout .glinks a{text-decoration:none;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:#c9d4ec}
.gabout .glinks a:hover{border-color:var(--accent);color:var(--accent)}
.gabout nav.fl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:12px;margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.gabout nav.fl a{color:var(--muted);text-decoration:none}

/* 木目の質感（盤などに重ねて使う） */
:root{--woodgrain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .16' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .18 0 0 0 0 .05 .75 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E")}