*,*::before,*::after{box-sizing:border-box}
  html,body{
    margin:0;padding:0;background:#fff;color:#111;overflow-x:hidden;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif
  }

  :root{
    --gap:8px;
    --cell-pc:96px;     /* PCのボードセル */
    --cell-sp:75px;     /* スマホのボードセル（横一列スクロール） */
    --accent:#0aa; --bad:#e53935;
  }

  .wrap{max-width:1280px;width:100%;margin:0 auto;padding:12px}
  header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .stat{font-weight:900;font-size:clamp(18px,3.4vw,28px)}
  .stat small{color:#666;font-weight:700;margin-left:.4em;font-size:.8em}

  /* ===== Layout ===== */
  .layout{display:block}
  @media(min-width:900px){
    .layout{
      display:grid;
      grid-template-columns:minmax(680px,1fr) 460px; /* 左：盤面／右：カード */
      gap:24px; align-items:start;
    }
  }

  /* ===== Board wrapper ===== */
  #boardWrap{
    overflow-x:hidden; overflow-y:visible;
    background:#111;border:6px solid #111;border-radius:22px;padding:10px;
  }
  /* SP は横スクロール黒帯 */
  @media(max-width:899px){
    #boardWrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  }

  /* ===== Board ===== */
  #board{
    display:grid; gap:var(--gap); background:#111; border-radius:16px;
    grid-template-columns:repeat(7,var(--cell-pc));
    grid-template-rows:repeat(7,var(--cell-pc));
  }
  @media(max-width:899px){
    #board{
      background:transparent;
      grid-template-columns:repeat(49,var(--cell-sp));
      grid-template-rows:var(--cell-sp);
    }
  }

  .cell{background:#fff;border-radius:14px;overflow:hidden;position:relative;display:grid;place-items:center}
  .cell img{width:100%;height:100%;object-fit:cover}
  .cell.miss{background:radial-gradient(120% 120% at 50% 30%,#fff 0%,#ffe9e9 100%)}
  .wordTag{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(0,0,0,.72);color:#fff;border-radius:999px;padding:2px 8px;font-size:12px;text-align:center}
  .xmark{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;font-weight:900;color:var(--bad);text-shadow:0 2px 0 #fff,0 0 6px rgba(229,57,53,.35)}
  @media(max-width:899px){ .xmark{font-size:28px} .wordTag{font-size:10px} }

  /* ===== Under-board ===== */
  .turnWrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:10px 0 6px}
  #turnTimer{font-weight:900;letter-spacing:.5px;font-size:clamp(18px,5vw,28px);padding:10px 18px;border-radius:999px;color:#fff;background:#111}
  .withBadge{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--accent),#06c);color:#fff;font-weight:900;padding:8px 12px;border-radius:14px;font-size:clamp(14px,4.2vw,18px);text-transform:uppercase}
  .withBadge .key{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18);font-weight:900}
  .withBadge.hide{visibility:hidden}
  .titleRow{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:4px}
  #nowWord{font-size:clamp(16px,4vw,22px);font-weight:800}
  #needText{color:var(--accent);font-weight:800}

  .chooserTitle{margin:6px 0 8px;color:#666;font-weight:700;text-align:center}

  /* ===== Cards ===== */
  #chooser{display:grid;gap:12px;grid-template-columns:repeat(4, minmax(100px,1fr));justify-content:center}
  .card{background:#fff;border:2px solid #ddd;border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;width:100%;aspect-ratio:1/1}
  .card:hover{border-color:#bbb}
  .thumb{width:100%;height:100%;object-fit:cover}

  /* SP：カード5×4の20枚グリッド */
  @media(max-width:899px){
    #chooser{grid-template-columns:repeat(5,1fr);gap:8px}
  }

  /* タップの二重発火・ハイライト抑止 */
  button, .card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor:pointer; }

  /* ===== Overlays ===== */
  .overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:9999;padding:20px}
  .overlay.active{display:flex}
  .dialog{background:#fff;border-radius:16px;padding:20px;max-width:560px;width:min(92vw,560px);text-align:center}

  /* Start overlay: header + scroll body */
  .dlg { display:flex; flex-direction:column; max-height:86vh; }
  .dlgHeader{ flex:0 0 auto; margin-bottom:10px; }
  .dlgHeader h2{ margin:0 0 12px; font-size:28px; }
  .dlgHeader .bigStart{ font-size:26px; padding:16px 40px; border-radius:40px; }
  .dlgBody{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .dlgBody ul{ text-align:left; line-height:1.7; margin:0 auto 14px; max-width:520px; font-size:16px; }
  .dlgBody ul.en{ font-size:15px; color:#333; }

  .btn{border:0;border-radius:999px;padding:12px 18px;font-weight:800;background:var(--accent);color:#fff;cursor:pointer;margin-top:10px}
  .btn.secondary{background:#444}