/* GOMADARE STUDIO 共通 UI（シンプルゲームシリーズ）v0.11（v0.2：「ほかのゲームで遊ぶ」と下のリンク。v0.3：縦型・横型。v0.4：バージョンの表示。v0.5：ゲームの中の広告の帯と大きさ。v0.6：gs001 でオーナーが直した間隔を共通に。v0.7：スマホの広告を横いっぱいに。2026-10-09。v0.8：body の文字の色を決めた。2026-10-10。v0.9：スマホの広告を横いっぱい・高さ 100px に、SNS でシェアと制覇のひとこと。2026-10-10。v0.10：タイトル画面の事実の1行、段階を選ぶ画面のほかのゲーム。2026-10-11。v0.11：縦に長い場所のスクロールの目印、遊び方のパネル。2026-10-11）
   - 土台はポータルの Game Portal テーマ（濃紺＋「遊ぶ」のコインの黄色＋作品ごとのキーカラー）
   - 画面の作りは SEVEN ALIVE（暗い地、細い線のパネル、数字は等幅、目印の色は1色）
   - 暗い色だけで作る（有機 EL のスマホで電池を食いにくい。通勤通学の車内でもまぶしくない）
   - Web フォントは読み込まない（通信量をかけない）。スマホに入っている文字を使う
   - 作品ごとに変えるのは --key（キーカラー）だけ。<body data-game="gs001"> などで切り替える */

:root{
  color-scheme:dark;
  --bg:#0f1322;        /* いちばん奥の地 */
  --panel:#161b2e;     /* パネル（ポータルの濃紺） */
  --panel-2:#20263f;   /* 押せるものの地 */
  --sunk:#0b0e19;      /* へこんだ場所（盤、数字の欄） */
  --line:#313957;      /* 細い線 */
  --text:#eef0f7;
  --muted:#9aa1bd;
  --coin:#ffc83d;      /* いちばん押してほしいボタン（ポータルの「遊ぶ」と同じ） */
  --coin-ink:#1d1a10;
  --coin-edge:#c7951a;
  --key:#56c2ff;       /* 作品ごとのキーカラー（目印、選択中、見出しの小文字） */
  --ok:#6fdc9a;
  --ng:#ff6b6b;
  --display:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px;
}
[data-game="gs001"]{--key:#56c2ff}  /* ナンプレ：水色 */
[data-game="gs002"]{--key:#f08a24}  /* 箱入れパズル：オレンジ（ポータルの標準のキーカラー） */
[data-game="gs003"]{--key:#ff7aa8}  /* お絵かきロジック：ピンク */
[data-game="gs004"]{--key:#9be15d}  /* 2048型：黄緑 */
[data-game="gs005"]{--key:#9cb4fe}  /* リバーシ：青紫（色の表 key-colors.md の E。2026-10-11） */
[data-game="gs006"]{--key:#1ed5a9}  /* 四目並べ：ミント（色の表 key-colors.md の F。2026-10-11） */
[data-game="gs007"]{--key:#ec92e5}  /* マンカラ：赤紫（色の表 key-colors.md の G。2026-10-12） */
[data-game="gs008"]{--key:#17d0d8}  /* ドット・アンド・ボックス：青緑（色の表 key-colors.md の H。2026-10-12） */
[data-game="gs009"]{--key:#c4a4fe}  /* マインスイーパー：ラベンダー（色の表 key-colors.md の I。2026-10-12） */
[data-game="gs010"]{--key:#56c2ff}  /* 線つなぎ：水色（色の表 key-colors.md の A。2026-10-13） */
[data-game="gs011"]{--key:#f08a24}  /* スライドパズル：オレンジ（色の表 key-colors.md の B。2026-10-13） */
[data-game="gs012"]{--key:#ff7aa8}  /* ライツアウト：ピンク（色の表 key-colors.md の C。2026-10-14） */
[data-game="gs013"]{--key:#9be15d}  /* ピラミッド：黄緑（色の表 key-colors.md の D。2026-10-15） */
[data-game="gs014"]{--key:#9cb4fe}  /* モンテカルロ：青紫（色の表 key-colors.md の E。2026-10-16） */
[data-game="gs015"]{--key:#1ed5a9}  /* クロンダイク：ミント（色の表 key-colors.md の F。2026-10-17） */
[data-game="gs016"]{--key:#ec92e5}  /* フリーセル：赤紫（色の表 key-colors.md の G。2026-10-18） */
[data-game="gs017"]{--key:#17d0d8}  /* 一筆書き：青緑（色の表 key-colors.md の H。2026-10-19） */
[data-game="gs018"]{--key:#c4a4fe}  /* ペグソリティア：ラベンダー（色の表 key-colors.md の I。2026-10-19） */
[data-game="gs019"]{--key:#56c2ff}  /* 同じ色を消すパズル：水色（色の表 key-colors.md の A。2026-10-20） */
[data-game="gs020"]{--key:#f08a24}  /* ペントミノ：オレンジ（色の表 key-colors.md の B。2026-10-20） */

/* 1画面＝1つの .su-screen。上に見出し、まん中に中身、下に指で押すもの */
.su-screen{display:flex;flex-direction:column;gap:16px;min-height:100%;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--bg);color:var(--text);font-family:var(--body);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.su-grow{flex:1}

/* スタジオの名前（あとでロゴ画像に差し替える） */
.su-studio{margin:0;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.24em;color:var(--muted)}
.su-studio b{color:var(--coin);font-weight:800}
/* 見出しの上の小さな文字（英字、番号）。キーカラー */
.su-eyebrow{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--key);text-transform:uppercase}
.su-title{margin:0;font-family:var(--display);font-weight:800;font-size:34px;line-height:1.15;letter-spacing:.02em;text-wrap:balance}
.su-h2{margin:0;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.3}
.su-note{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}

/* ボタン。いちばん押してほしいもの1つだけを --coin にする */
.su-btns{display:flex;flex-direction:column;gap:8px}
/* いちばん押してほしいボタン（遊ぶ）のすぐ下にボタンが続くときは、離して押しまちがいを防ぐ（v0.6。gs001、オーナー：「遊ぶと続きからのボタンがちょっと近い」） */
.su-screen > .su-btns:has(> .su-btn--primary + .su-btn){gap:16px}
.su-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:700 15px/1.2 var(--body);cursor:pointer;text-decoration:none}
.su-btn--primary{background:var(--coin);color:var(--coin-ink);border:0;box-shadow:inset 0 -3px 0 var(--coin-edge);font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.08em}
.su-btn--ghost{background:transparent}
.su-btn:active{transform:translateY(1px)}
.su-btn:focus-visible,.su-icon:focus-visible,.su-cell:focus-visible,.su-key:focus-visible,.su-switch:focus-visible{outline:2px solid var(--key);outline-offset:2px}
/* 四角いアイコンボタン（一時停止、設定）。どの画面でも同じ場所、同じ大きさ */
.su-icon{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;padding:0}
.su-icon svg{width:20px;height:20px}

/* 遊ぶ画面の上の帯：左に一時停止、まん中に面の番号、右に時間 */
.su-hud{display:flex;align-items:center;gap:10px}
.su-hud__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;line-height:1.4} /* v0.6：見出しと説明のあいだを空けた（gs001、オーナー：「詰まりすぎ」） */
.su-hud__mid b{font-family:var(--mono);font-weight:400;font-size:15px;font-variant-numeric:tabular-nums}
.su-hud__mid span{font-size:12px;color:var(--muted)}
.su-time{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}

/* パネルと、数字のタイル */
.su-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
.su-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.su-stat{background:var(--sunk);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.su-stat span{font-size:11px;color:var(--muted)}
.su-stat b{font-family:var(--mono);font-weight:400;font-size:20px;font-variant-numeric:tabular-nums}
.su-stat.is-best b{color:var(--coin)}

/* 設定の行とスイッチ */
.su-rows{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.su-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-size:15px}
.su-row + .su-row{border-top:1px solid var(--line)}
.su-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.su-switch{flex:none;position:relative;width:48px;height:28px;border-radius:14px;border:1px solid var(--line);background:var(--sunk);cursor:pointer;padding:0}
.su-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .15s}
.su-switch[aria-checked="true"]{background:var(--key);border-color:var(--key)}
.su-switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--bg)}

/* 広告の場所。遊んでいる画面には置かない（タイトル、クリア、面と面のあいだだけ） */
.su-ad{border:1px dashed var(--line);border-radius:var(--r);min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:11px}
.su-ad b{font-family:var(--mono);font-weight:400;letter-spacing:.2em;font-size:10px}

/* サイトへ戻るリンク */
.su-back{align-self:center;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* タイトル画面の「ほかのゲームで遊ぶ」（シリーズの一覧へ）。v0.2、2026-10-09 */
.su-ad + .su-more{margin-top:16px} /* 広告とリンクのあいだを空けて、誤タップを防ぐ */
.su-more{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none}
.su-more__t{flex:1;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.su-more__t small{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.18em;color:var(--coin)}
.su-more__t b{font-size:15px}
.su-more svg{flex:none;width:18px;height:18px;color:var(--muted)}
/* ゲームのバージョン（タイトル画面のいちばん下に小さく。v0.4、2026-10-09） */
.su-version{margin:0;align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);opacity:.8}
/* 画面のいちばん下の小さなリンク（ゲームの紹介ページ、スタジオのトップ） */
.su-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
/* タイトル画面の下のリンクとバージョンは、上（ほかのゲームで遊ぶ）とも下（広告の帯）とも同じだけ離す。画面の gap 16px ＋ 12px＝28px ずつ（v0.6。gs001、オーナー：「リンクと AdSense がちょっと近い」） */
.su-screen > .su-links{padding-top:12px}
.su-screen > .su-version{padding-bottom:12px}
.su-links a{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ナンプレ（gs001）の盤と数字のキー。ほかの作品も「盤は上、押すものは下」にそろえる */
.su-board{display:grid;grid-template-columns:repeat(9,1fr);width:100%;max-width:100%;aspect-ratio:1;background:var(--sunk);border:2px solid var(--muted);border-radius:6px;overflow:hidden}
.su-cell{display:flex;align-items:center;justify-content:center;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--key);font:400 clamp(16px,5vw,22px)/1 var(--mono);cursor:pointer;padding:0;min-width:0}
.su-cell.is-given{color:var(--text);font-weight:700;cursor:default}
.su-cell.is-peer{background:rgba(255,255,255,.035)}
.su-cell.is-same{background:color-mix(in srgb,var(--key) 18%,transparent)}
.su-cell.is-sel{background:color-mix(in srgb,var(--key) 34%,transparent);box-shadow:inset 0 0 0 2px var(--key)}
.su-cell.is-ng{color:var(--ng)}
.su-cell:nth-child(9n+3),.su-cell:nth-child(9n+6){border-right:2px solid var(--muted)}
.su-cell:nth-child(9n){border-right:0}
.su-cell:nth-child(n+19):nth-child(-n+27),.su-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--muted)}
.su-cell:nth-child(n+73){border-bottom:0}
.su-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.su-key{min-height:48px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:400 20px/1 var(--mono);cursor:pointer;padding:0;min-width:0}
.su-key.is-done{opacity:.35}
.su-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.su-tool{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--muted);font:700 11px/1 var(--body);cursor:pointer;padding:4px 0}
.su-tool svg{width:20px;height:20px}
.su-tool[aria-pressed="true"]{color:var(--key);border-color:var(--key)}

/* ---------- 縦型・横型（v0.3、2026-10-09） ----------
   <body data-orient="portrait"> 縦型（スマホを縦に持つ。PC では真ん中に縦長の列）
   <body data-orient="landscape"> 横型（スマホを横に持つ。縦に持っているあいだは「横にしてください」を出す） */
/* 文字の色も body で決める（v0.8。.su-screen の外の画面〈クリア、一時停止〉の文字が、Artifact の外枠〈明るい画面用〉の中で黒くなって見えなかった。gs002 の振り返りの案1） */
body[data-orient]{margin:0;background:var(--bg);color:var(--text)}
body[data-orient="portrait"] .su-screen{max-width:520px;margin-inline:auto;min-height:100dvh;box-sizing:border-box}

/* 横型の画面：左に名前と説明、右に押すもの */
.su-screen--wide{min-height:100dvh;box-sizing:border-box;max-width:1100px;margin-inline:auto;padding-left:calc(env(safe-area-inset-left,0px) + 20px);padding-right:calc(env(safe-area-inset-right,0px) + 20px)}
.su-wide{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:12px 28px;align-items:end}
.su-wide__main,.su-wide__side{display:flex;flex-direction:column;gap:12px;min-width:0}
.su-screen--wide .su-title{font-size:clamp(28px,7vh,44px)}
@media (max-height:430px){
  .su-screen--wide{gap:10px;padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .su-screen--wide .su-btn{min-height:42px}
  .su-screen--wide .su-ad{min-height:50px}
}

/* 横型のゲームを縦に持っているとき */
.su-rotate{display:none;position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--text);flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;font-family:var(--body)}
.su-rotate svg{width:64px;height:64px;color:var(--key);animation:su-turn 2.4s ease-in-out infinite}
.su-rotate p{margin:0;font-weight:700}
@keyframes su-turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (max-width:820px){body[data-orient="landscape"] .su-rotate{display:flex}}

/* ---------- ゲームの中の広告（v0.5、2026-10-09） ----------
   画面の下に固定する帯（.su-adbar）と、AdSense の広告ユニット（.su-adunit）。遊んでいる画面では帯を隠す（hidden）
   大きさ：スマホは横いっぱい・高さ 100px（v0.9。320×100 が真ん中に出る）、PC（768px 以上）は横長で高さ 90px・幅は最大 728px */
.su-adbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:1px solid var(--line);padding:4px 0 calc(env(safe-area-inset-bottom,0px) + 4px);text-align:center}
.su-adbar[hidden]{display:none}
.su-adunit{display:block;width:100%;height:100px} /* v0.9：スマホは横いっぱい・高さ 100px（2026-10-10、オーナー「横いっぱい320×100」。v0.7 は高さ 50px） */
.su-adbar .su-ad{min-height:100px;margin:0 8px;box-sizing:border-box}
body.has-ad .su-screen{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px + 8px + 16px)}
@media (min-width:768px){
  .su-adunit{display:block;width:100%;max-width:728px;height:90px;margin:0 auto}
  .su-adbar .su-ad{min-height:90px;max-width:728px;margin:0 auto}
  body.has-ad .su-screen{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px + 8px + 16px)}
}

/* ---------- SNS でシェア（v0.9、2026-10-10、オーナー。X・LINE・Threads） ----------
   タイトル画面（「遊ぶ」の下）と、段階を制覇したときのクリアの画面に置く。押すと、それぞれのポストの画面を開く */
/* 上に「シェア」の文字、下に3つのボタンを同じ幅で並べる（2026-10-10、オーナー） */
.su-share{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px}
.su-share[hidden]{display:none}
.su-share__t{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted)}
.su-share__b{display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none;min-width:0;min-height:40px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:700 13px/1 var(--body);cursor:pointer}
.su-share__b:active{transform:translateY(1px)}
.su-share__b:focus-visible{outline:2px solid var(--key);outline-offset:2px}
/* 段階を制覇したときのひとこと（クリアの画面。「おめでとう！」と、次に挑戦する段階や解放の知らせ） */
.su-conquer{display:block;padding:10px 12px;border:1px solid color-mix(in srgb,var(--coin) 45%,var(--line));border-radius:var(--r);background:color-mix(in srgb,var(--coin) 8%,var(--panel));font-size:14px;line-height:1.7;color:var(--text);text-align:center}
.su-conquer b{color:var(--coin);font-size:16px;font-weight:800}

/* ---------- 検索のための小さな足し（v0.10、2026-10-11、オーナー） ---------- */
/* タイトル画面の、ひとことの下の事実の1行（例：全4段階・90問）。文は game.json の facts と同じ（release.py が確かめる） */
.su-facts{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--key)}
/* 段階を選ぶ画面のいちばん下の「ほかのゲームも遊ぶ」。中身は studio-ui.js の SU.related() が、シリーズの一覧から2本だけ入れる */
.su-related{display:flex;flex-direction:column;gap:8px}
.su-related[hidden]{display:none}
.su-related__t{margin:0;font-size:12px;color:var(--muted)}

/* ---------- 縦に長い場所（v0.11、2026-10-11、オーナー「縦に伸びているところは、右端にスライドバーを表示して、下まで送れる事を示して欲しい」） ---------- */
/* 画面の高さに固定した画面の中で、中だけを動かす箱。段階を選ぶ画面などで使う */
.su-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
/* スクロールの目印：data-su-scroll を付けた箱の中身が見えている高さより長いとき、右の余白に細いバーをいつも出す（studio-ui.js が付ける）。
   スマホのブラウザは、指で動かしているあいだしかスクロールバーを出さないため。もとのスクロールバーは隠す（PC で2本にならないように） */
[data-su-scroll]{scrollbar-width:none}
[data-su-scroll]::-webkit-scrollbar{display:none}
.su-sbar{position:fixed;z-index:5;width:4px;border-radius:2px;background:color-mix(in srgb,var(--line) 70%,transparent);pointer-events:none}
.su-sbar[hidden]{display:none}
.su-sbar i{position:absolute;left:0;right:0;border-radius:2px;background:var(--muted)}
/* 遊び方のパネル（段階を選ぶ画面の下。共通 UI のパネルは縦並びなので、文章は block にする） */
.su-how{display:block;font-size:13px;line-height:1.7;color:var(--muted)}
.su-how b{color:var(--text)}

@media (prefers-reduced-motion:reduce){.su-switch::after{transition:none}.su-btn:active{transform:none}.su-rotate svg{animation:none}}