.cn-flavor       { font-size: 1.6rem; }      
  .cn-status       { font-size: 1.2rem; }   
  .cn-cell         { font-size: 1.8rem; }   
  .cn-banner-title { font-size: 2rem; }    
  .cn-banner-words { font-size: 1.5rem; }   
  .cn-btn          { font-size: 1.7rem; }    
  .cn-modal-clue   { font-size: 1.35rem; }   
  .cn-modal-answer { font-size: 1.8rem; }    
  

  .cn-wrap { text-align: center; }
  .cn-flavor { font-style: italic; margin: 1rem 0; }
  .cn-rule { width: 60%; margin: 16px auto; border: none; border-top: 1px solid #000; }
  .cn-status { margin: 1rem auto; min-height: 1.3em; font-weight: 500; }

  .cn-board { max-width: 560px; margin: 1.2rem auto 0; }

  .cn-banner {
    border-radius: 8px;
    padding: 10px 8px;
    margin-bottom: 8px;
    color: #121212;
  }
  .cn-banner-title { font-weight: 800; letter-spacing: 0.02em; }
  .cn-banner-words { font-weight: 600; margin-top: 2px; }

  .cn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .cn-cell {
    border: none;
    background: #efefe6;
    color: #121212;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    cursor: pointer;
    font-weight: 700;
    word-break: break-all;
    user-select: none;
    transition: transform 0.08s, background 0.12s, color 0.12s;
  }
  .cn-cell:hover { background: #e4e4d8; }
  .cn-cell.selected { background: #5a594e; color: #fff; }
  .cn-cell.unsolved { font-weight: 500; color: #555; }
  .cn-cell.shake { animation: cnShake 0.4s; }
  @keyframes cnShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
  }

  .cn-controls { margin: 16px auto 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .cn-btn {
    border: 1px solid #121212;
    background: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .cn-btn:disabled { opacity: 0.35; cursor: default; }

  .cn-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: none; align-items: center; justify-content: center; z-index: 1000;
  }
  .cn-overlay.open { display: flex; }
  .cn-modal {
    background: #fff; border: 1px solid #000; border-radius: 8px;
    max-width: 440px; width: calc(100% - 48px); padding: 24px; text-align: center; position: relative;
  }
  .cn-modal-clue { line-height: 1.7; margin-bottom: 1rem; }
  .cn-modal-answer { font-weight: 700; margin: 0.5rem 0; }
  .cn-modal-input { font-family: inherit; font-size: 1rem; padding: 6px 10px; width: 60%; }
  .cn-modal .btn { margin-top: 16px; }
  .cn-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.4rem; cursor: pointer; line-height: 1; }
  .cn-modal-msg { min-height: 0; margin-top: 8px; font-size: 1.5rem; color: #b00; }

  
  .cn-modal.shake { animation: cnShake 0.4s; }
  .cn-modal.flying { transition: transform 0.35s ease, opacity 0.35s ease; }
  
  .cn-cell.pop { animation: cnPop 0.35s ease; }
  @keyframes cnPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
  
  .cn-cell.sweeping { animation: cnSweep 0.32s ease forwards; }
  @keyframes cnSweep { to { opacity: 0; transform: translateY(-18px) scale(0.85); } }
  
  .cn-banner.is-new { animation: cnBannerIn 0.35s ease; }
  @keyframes cnBannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  
  .cn-banner.reordering { transition: transform 0.55s ease; }

  
  .mj-word { display:inline-block; }
  .mj-live { cursor:pointer; }
  .mj-ch { display:inline-block; transform-origin:center; transform:scale(calc(1 + var(--g,0)*0.6)); transition:transform .04s linear; }
  @keyframes mj-pop { 0%{transform:scale(1.6);opacity:1;} 35%{transform:scale(2.4);opacity:1;} 100%{transform:scale(3.0);opacity:0;} }
  .mj-word.mj-pop .mj-ch { animation:mj-pop .4s ease-out forwards; }
  .mj-gone { visibility:hidden; }
  .mj-get { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; flex-direction:column; background:rgba(0,0,0,.55); opacity:0; transition:opacity .3s; }
  .mj-get.show { display:flex; opacity:1; }
  .mj-get-tile { border:3px solid #000; background:#fff; color:#000; padding:14px 26px; font-size:34px; font-weight:800; border-radius:6px; box-shadow:0 0 34px rgba(255,255,255,.7); }
  .mj-get-msg { color:#fff; font-size:1.4rem; margin-top:1rem; }