:root{
    /* 明るくポップなクリームソーダ */
    --soda-deep:#12A97A; --soda:#2FD6A6; --soda-light:#B9F7DD;
    --cream:#FFF7E4; --cream-2:#FFFCF4;
    --cherry:#FF4D6D; --cherry-d:#E23458;
    --amber:#FFB020; --grape:#A66BFF; --blueberry:#5C7CE0; --pink:#FF9BC0; --mint:#7DE8C6;
    --ink:#1c4a3f; --ink-soft:#4f8073;
    --line:#ffe0cf;
    /* 見出しは丸ゴシックでポップに（無ければ太ゴシックにフォールバック） */
    --font-pop:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Rounded Mplus 1c","Yu Gothic UI","Meiryo",sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; height:100%;}
  body{
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif;
    color:var(--ink); overflow:hidden; touch-action:none;
    /* 明るいソーダのグラデ＋左上のツヤ＋たっぷりの泡（ミント/ピンクの差し色つき） */
    background:
      radial-gradient(22px 22px at 82% 20%, rgba(255,255,255,.55) 40%, transparent 42%),
      radial-gradient(13px 13px at 90% 30%, rgba(255,255,255,.45) 40%, transparent 42%),
      radial-gradient(10px 10px at 74% 14%, rgba(255,255,255,.4) 40%, transparent 42%),
      radial-gradient(16px 16px at 12% 62%, rgba(125,232,198,.5) 40%, transparent 42%),
      radial-gradient(11px 11px at 22% 78%, rgba(255,155,192,.45) 40%, transparent 42%),
      radial-gradient(9px 9px at 60% 84%, rgba(255,255,255,.4) 40%, transparent 42%),
      radial-gradient(14px 14px at 88% 66%, rgba(255,255,255,.38) 40%, transparent 42%),
      radial-gradient(60% 42% at 16% 10%, rgba(255,255,255,.4), transparent 62%),
      radial-gradient(135% 90% at 50% -12%, var(--soda-light) 0%, var(--soda) 44%, var(--soda-deep) 100%);
  }
  #app{ position:fixed; inset:0; display:flex; flex-direction:column; }

  #topbar{ display:flex; align-items:center; gap:10px; padding:11px 15px 6px; flex:0 0 auto; }
  #brand{ display:flex; align-items:baseline; gap:8px; }
  #brand b{ font-family:var(--font-pop); font-size:20px; font-weight:800; letter-spacing:.03em; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.16); }
  #brand span{ font-family:var(--font-pop); font-size:11px; font-weight:700; color:rgba(255,255,255,.9); }
  #count{ font-size:13px; color:var(--ink); background:#fff; border-radius:999px; padding:4px 12px; font-weight:800; box-shadow:0 3px 0 rgba(0,0,0,.12); }
  .tbtn{ border:none; cursor:pointer; font-weight:800; font-size:12.5px; background:#fff; color:var(--ink); border-radius:999px; padding:6px 13px; box-shadow:0 3px 0 rgba(0,0,0,.13); }
  .tbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.13); }
  .tbtn.cherry{ background:var(--cherry); color:#fff; box-shadow:0 3px 0 var(--cherry-d); }
  #spacer{ margin-left:auto; }

  /* mission bar */
  #mission{ display:none; align-items:center; gap:8px; margin:0 12px 8px; background:#fff; border-radius:14px; padding:8px 13px; box-shadow:0 3px 0 rgba(0,0,0,.1); flex:0 0 auto; }
  #mission .mlabel{ font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.3; }
  #mission .mval{ font-family:var(--font-pop); color:var(--cherry); font-weight:800; }
  #mission .mval.near{ color:var(--soda-deep); }
  #mission .mval.hit{ color:#fff; background:var(--cherry); border-radius:7px; padding:0 6px; }

  #tray-wrap{ flex:0 0 auto; padding:0 12px 9px; }
  #tray{ background:rgba(255,255,255,.22); border:2px dashed rgba(255,255,255,.7); border-radius:16px; min-height:46px; padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; backdrop-filter:blur(2px); }
  #tray.empty::before{ content:"ここに つかまえた ことばが たまっていきます"; color:rgba(255,255,255,.85); font-size:12px; font-weight:600; }
  .chip{ background:#fff; border-left:6px solid var(--ink); border-radius:10px; padding:4px 10px; font-size:15px; font-weight:800; line-height:1.2; box-shadow:0 2px 0 rgba(0,0,0,.12); animation:pop .18s ease; }
  @keyframes pop{ from{ transform:scale(.55); opacity:0;} to{ transform:scale(1); opacity:1;} }

  #stage-wrap{ position:relative; flex:1 1 auto; min-height:0; }
  canvas{ display:block; width:100%; height:100%; }

  #flash{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; }
  #flash.show{ animation:flash 1.6s ease forwards; }
  #flash .inner{ background:var(--cream-2); color:var(--ink); border-radius:22px; padding:16px 22px; max-width:82%; box-shadow:0 10px 0 rgba(0,0,0,.1), 0 20px 40px rgba(0,0,0,.28); text-align:center; }
  #flash .tag{ font-size:12px; font-weight:800; color:var(--cherry); letter-spacing:.14em; }
  #flash .txt{ font-family:var(--font-pop); font-size:21px; font-weight:800; margin-top:6px; line-height:1.5; }
  #flash .sc{ font-size:12px; font-weight:800; color:var(--ink-soft); margin-top:6px; }
  @keyframes flash{ 0%{opacity:0; transform:scale(.85) rotate(-2deg);} 14%{opacity:1; transform:scale(1) rotate(0);} 80%{opacity:1;} 100%{opacity:0; transform:scale(1) translateY(-8px);} }

  #gallery{ position:absolute; inset:0; background:rgba(18,80,60,.5); backdrop-filter:blur(3px); display:none; z-index:46; }
  #gallery.show{ display:block; }
  #gpanel{ position:absolute; right:0; top:0; bottom:0; width:min(420px,88%); background:var(--cream); box-shadow:-16px 0 40px rgba(0,0,0,.3); display:flex; flex-direction:column; animation:slidein .22s ease; }
  @keyframes slidein{ from{transform:translateX(20px); opacity:.4;} to{transform:none; opacity:1;} }
  #ghead{ display:flex; align-items:center; padding:14px 16px; gap:10px; border-bottom:2px solid var(--line); }
  #ghead b{ font-family:var(--font-pop); font-size:17px; }
  #glist{ overflow:auto; padding:12px 14px; flex:1; }
  .card{ background:#fff; border-radius:14px; padding:11px 12px; margin-bottom:10px; box-shadow:0 3px 0 var(--line); }
  .card .s{ font-size:16px; font-weight:800; line-height:1.5; }
  .card .row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .card .n{ font-size:11px; color:var(--ink-soft); }
  .card .tag2{ font-size:10.5px; font-weight:800; color:#fff; background:var(--soda); border-radius:7px; padding:2px 7px; }
  .card .tag2.clear{ background:var(--cherry); }
  .card .tag2.meku{ background:var(--grape); }
  .card .sp{ margin-left:auto; }
  .mini{ border:none; cursor:pointer; font-size:12px; font-weight:800; border-radius:9px; padding:5px 10px; background:var(--soda); color:#fff; }
  .mini:active{ transform:translateY(1px); }
  #gempty{ color:var(--ink-soft); font-size:14px; text-align:center; padding:30px 10px; line-height:1.7; }

  /* タイトル画面（最初に表示。スタートでモード選択へ） */
  #title{ position:absolute; inset:0; z-index:42; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
    background:
      radial-gradient(20px 20px at 22% 24%, rgba(255,255,255,.55) 40%, transparent 42%),
      radial-gradient(12px 12px at 30% 32%, rgba(255,255,255,.45) 40%, transparent 42%),
      radial-gradient(14px 14px at 15% 50%, rgba(125,232,198,.5) 40%, transparent 42%),
      radial-gradient(10px 10px at 78% 22%, rgba(255,155,192,.5) 40%, transparent 42%),
      radial-gradient(16px 16px at 80% 70%, rgba(255,255,255,.42) 40%, transparent 42%),
      radial-gradient(11px 11px at 68% 82%, rgba(125,232,198,.4) 40%, transparent 42%),
      radial-gradient(9px 9px at 40% 84%, rgba(255,255,255,.4) 40%, transparent 42%),
      radial-gradient(120% 85% at 50% 0%, var(--soda-light) 0%, var(--soda) 45%, var(--soda-deep) 100%); }
  #titlecard{ position:relative; width:100%; max-width:360px; }
  /* タイトルまわりのきらめき（ミント/ピンク） */
  #titlecard::before{ content:"✦"; position:absolute; top:-14px; left:10%; font-size:26px; color:var(--pink); text-shadow:0 0 10px rgba(255,155,192,.8); animation:twinkle 1.9s ease-in-out infinite; pointer-events:none; }
  #titlecard::after{ content:"✧"; position:absolute; top:52px; right:8%; font-size:22px; color:var(--mint); text-shadow:0 0 10px rgba(125,232,198,.85); animation:twinkle 2.4s ease-in-out infinite .7s; pointer-events:none; }
  #titlecard h1{ position:relative; }
  #titlecard h1::after{ content:"✦"; position:absolute; top:-10px; right:4%; font-size:18px; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.9); animation:twinkle 2.1s ease-in-out infinite 1.1s; }
  @keyframes twinkle{ 0%,100%{ opacity:.3; transform:scale(.75) rotate(0);} 50%{ opacity:1; transform:scale(1.2) rotate(18deg);} }
  #titlecard h1{ font-family:var(--font-pop); margin:0; font-size:40px; font-weight:800; line-height:1.16; letter-spacing:.02em; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.16); }
  #titlecard h1 span{ position:relative; overflow:hidden; display:inline-block; font-family:var(--font-pop); margin-top:12px; font-size:31px; color:var(--cherry); background:linear-gradient(180deg,#fff 0%,#fff 55%,#fff0f4 100%); border-radius:16px; padding:3px 20px; box-shadow:0 5px 0 rgba(0,0,0,.15); }
  /* プレートを横切る光の反射 */
  #titlecard h1 span::after{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform:skewX(-18deg); animation:shine 3.4s ease-in-out infinite; pointer-events:none; }
  @keyframes shine{ 0%{ left:-70%;} 22%,100%{ left:150%;} }
  #titlecard .tsub{ margin:22px 0 30px; font-size:13.5px; line-height:1.8; color:#fff; font-weight:700; }
  .hublink{ display:inline-block; margin-top:16px; color:rgba(255,255,255,.92); font-size:12.5px; font-weight:800; letter-spacing:.03em; text-decoration:underline; text-underline-offset:3px; }
  .hublink:active{ opacity:.6; }

  #start{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:18px;
    background:
      radial-gradient(18px 18px at 12% 16%, rgba(255,255,255,.42) 40%, transparent 42%),
      radial-gradient(12px 12px at 20% 26%, rgba(125,232,198,.5) 40%, transparent 42%),
      radial-gradient(10px 10px at 86% 20%, rgba(255,155,192,.5) 40%, transparent 42%),
      radial-gradient(14px 14px at 88% 78%, rgba(255,255,255,.4) 40%, transparent 42%),
      radial-gradient(9px 9px at 78% 88%, rgba(125,232,198,.4) 40%, transparent 42%),
      radial-gradient(120% 80% at 50% 0%, rgba(185,247,221,.6), rgba(18,169,122,.9)); }
  #startcard{ background:var(--cream); border-radius:26px; box-shadow:0 12px 0 rgba(0,0,0,.08), 0 22px 46px rgba(0,0,0,.32); padding:22px 20px 18px; max-width:370px; width:100%; text-align:center; max-height:94vh; overflow:auto; }
  #startcard h1{ font-family:var(--font-pop); font-size:25px; font-weight:800; letter-spacing:.02em; margin:2px 0 3px; }
  #startcard .sub{ color:var(--ink-soft); font-size:12.5px; margin-bottom:15px; }
  .mlabel-h{ font-size:12px; font-weight:800; color:var(--ink-soft); text-align:left; margin:2px 2px 7px; }
  .mlabel-h::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:6px 0 0 -1px var(--pink); margin-right:12px; vertical-align:middle; }
  .modes{ display:flex; gap:7px; margin-bottom:13px; }
  .mode{ flex:1; min-width:0; border:2.5px solid #ffe4d6; background:#fff; border-radius:15px; padding:9px 3px; cursor:pointer; text-align:center; transition:.12s; box-shadow:0 3px 0 rgba(0,0,0,.05); }
  .mode.sel{ border-color:var(--cherry); background:#fff0f4; box-shadow:0 3px 0 rgba(255,77,109,.28); }
  .mode b{ display:block; font-family:var(--font-pop); font-size:13.5px; font-weight:800; white-space:nowrap; }
  .mode small{ display:block; font-size:9.5px; color:var(--ink-soft); white-space:nowrap; margin-top:1px; }
  #startcard ol{ text-align:left; font-size:13px; line-height:1.85; color:var(--ink); margin:0 0 15px; padding-left:20px; }
  #startcard ol li{ padding-left:2px; }
  #startcard ol b{ color:var(--cherry); }
  .play{ border:none; cursor:pointer; width:100%; font-size:18px; font-weight:800; letter-spacing:.08em; background:var(--cherry); color:#fff; border-radius:18px; padding:14px; box-shadow:0 5px 0 var(--cherry-d); }
  .play:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--cherry-d); }
  .startlink{ display:inline-block; margin-top:12px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:800; color:var(--soda-deep); text-decoration:underline; text-underline-offset:3px; }
  .startlink:active{ opacity:.6; }
  .soundrow{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:11px; font-size:12px; color:var(--ink-soft); }
  .soundrow input{ transform:scale(1.15); accent-color:var(--cherry); }

  #toast{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font-size:13px; font-weight:800; padding:9px 17px; border-radius:999px; opacity:0; transition:.25s; z-index:60; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.3); }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* 完成時の確認ダイアログ */
  #confirm{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:45; background:rgba(18,80,60,.5); backdrop-filter:blur(3px); padding:18px; }
  #confirm.show{ display:flex; }
  #confirm .cbox{ background:var(--cream-2); color:var(--ink); border-radius:24px; box-shadow:0 12px 0 rgba(0,0,0,.08), 0 22px 46px rgba(0,0,0,.34); padding:20px 22px 16px; width:340px; max-width:88%; text-align:center; animation:pop .18s ease; }
  #confirm .ctag{ font-size:12px; font-weight:800; color:var(--cherry); letter-spacing:.14em; }
  #confirm .ctxt{ font-family:var(--font-pop); font-size:21px; font-weight:800; margin-top:7px; line-height:1.5; }
  #confirm .csc{ font-size:12px; font-weight:800; color:var(--ink-soft); margin-top:6px; min-height:1em; }
  #confirm .crow{ display:flex; gap:10px; margin-top:14px; }
  #confirm .cbtn{ flex:1; border:none; cursor:pointer; font-size:15px; font-weight:800; border-radius:14px; padding:12px; background:var(--cherry); color:#fff; box-shadow:0 4px 0 var(--cherry-d); }
  #confirm .cbtn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cherry-d); }
  #confirm .cbtn.ghost{ background:#fff; color:var(--ink-soft); box-shadow:0 4px 0 var(--line); }
  #confirm .cbtn.ghost:active{ box-shadow:0 2px 0 var(--line); }
  #confirm .cbtn.share{ width:100%; margin-top:10px; background:var(--soda-deep); box-shadow:0 4px 0 #0c7d5a; }
  #confirm .cbtn.share:active{ box-shadow:0 2px 0 #0c7d5a; }
  #confirm .csub{ display:flex; justify-content:center; gap:18px; margin-top:12px; }
  #confirm .clink{ border:none; background:none; cursor:pointer; font-size:12.5px; font-weight:800; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
  #confirm .clink:active{ opacity:.6; }

  /* 既定（縦画面）: #chrome はレイアウト箱を作らず、従来どおり topbar/mission/tray を縦積み */
  #chrome{ display:contents; }

  /* スマホ横画面: 操作系を左サイドパネルに寄せ、ステージを全高で確保。 */
  @media (orientation:landscape) and (max-height:600px){
    #app{ flex-direction:row; }
    #chrome{
      display:flex; flex-direction:column;
      width:min(42vw,264px); flex:0 0 auto;
      padding:8px 8px 10px 10px; gap:8px; overflow:auto;
    }
    #topbar{ flex-wrap:wrap; padding:2px; gap:6px 8px; }
    #brand b{ font-size:17px; }
    #spacer{ display:none; }
    #mission{ margin:0; }
    #tray-wrap{ padding:0; }
    #tray{ min-height:40px; }
    #stage-wrap{ flex:1 1 auto; }
  }