.bousou-osushi { margin: 0; padding: 0; box-sizing: border-box; }
  .bousou-osushi.bo-app.bo-app * { margin: 0; padding: 0; box-sizing: border-box; }
  .bousou-osushi.bo-app.bo-app h1, .bousou-osushi.bo-app.bo-app p { border: none; background: none; padding: 0; text-align: inherit; text-indent: 0; box-shadow: none; }
  .bousou-osushi.bo-app.bo-app h1::before, .bousou-osushi.bo-app.bo-app h1::after, .bousou-osushi.bo-app.bo-app p::before, .bousou-osushi.bo-app.bo-app p::after { content: none; display: none; }
  .bousou-osushi.bo-app.bo-app :where(h1, p, div, span, b, small) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; background: none; }
  .bousou-osushi.bo-app.bo-app b { font-weight: bold; }
  .bousou-osushi.bo-app.bo-app button { font-family: inherit; line-height: 1.3; letter-spacing: normal; text-transform: none; text-decoration: none; }
  .bousou-osushi.bo-app.bo-app canvas { max-width: none; }
  .bousou-osushi.bo-app.bo-app img { border: 0; box-shadow: none; float: none; max-width: none; background: none; padding: 0; }

  .bousou-osushi.bo-app, .bousou-osushi.bo-app * { box-sizing: border-box; }
  .bousou-osushi.bo-app {
    margin: 0;
    letter-spacing: normal;
    background: #efe4cf;
    color: #3a2414;
    font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: manipulation;
  }
  /* 画面の切り替えは画面全体ではなく #app の大きさで決める(記事の中に置いても同じに動く) */
  .bousou-osushi.bo-app {
    position: relative;
    container-type: size;
    container-name: bousou;
    touch-action: none;
    height: min(88vh, 760px);
    height: min(88svh, 760px);
    width: 100%;
    max-width: 760px;
    margin: 0 auto 2em;
    border-radius: 12px;
    outline: none;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    gap: 8px;
  }
  .bousou-osushi.bo-app .bo-hud, .bousou-osushi.bo-app .bo-controls {
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .bousou-osushi.bo-app .bo-hud { justify-content: space-between; font-size: 15px; white-space: nowrap; background: #3b2616; color: #fbecd2; border-radius: 10px; padding: 6px 12px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
  .bousou-osushi.bo-app .bo-hud .score { color: #f0c98e; min-width: 6.5em; font-variant-numeric: tabular-nums; }
  .bousou-osushi.bo-app .bo-hud .time { font-size: 15px; white-space: nowrap; }
  .bousou-osushi.bo-app .bo-hud .time b { font-size: 24px; font-variant-numeric: tabular-nums; margin: 0 2px 0 4px; }
  .bousou-osushi.bo-app .bo-hud .time small { font-size: 12px; color: #f0c98e; margin-right: 4px; }
  .bousou-osushi.bo-app .bo-hud .best { color: #f0c98e; font-variant-numeric: tabular-nums; text-align: right; }
  .bousou-osushi.bo-app .bo-hud .right { display: flex; align-items: center; gap: 10px; min-width: 6.5em; justify-content: flex-end; }
  .bousou-osushi.bo-app .bo-stage {
    touch-action: none;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bousou-osushi.bo-app .bo-wrap { position: relative; flex: none; }
  .bousou-osushi.bo-app canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    touch-action: none;
    box-shadow: 0 4px 0 #3b2616, 0 8px 22px rgba(59,38,22,0.35);
  }
  .bousou-osushi.bo-app .overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(40, 26, 14, 0.62);
    border-radius: 10px;
  }
  /* 始めの画面: お店の中の絵の上に、タイトル・ひとこと・カードを重ねる */
  .bousou-osushi.bo-app .bo-title-ov { background-color: #efe4cf; background-size: cover; background-position: center top; padding: 10px 14px; overflow: hidden; }
  .bousou-osushi.bo-app .bo-title-panel.panel { max-width: 780px; height: 100%; background: transparent; border: none; box-shadow: none; padding: 0; }
  .bousou-osushi.bo-app .panel.bo-title-panel .bo-title { margin: 2px auto 4px; font-size: 30px; text-shadow: 0 0 6px #f6ecd8; }
  .bousou-osushi.bo-app .bo-title-panel .bo-logo { display: block; margin: 0 auto; width: min(78%, 560px); height: auto; filter: drop-shadow(0 2px 0 rgba(251,243,226,0.9)); }
  .bousou-osushi.bo-app .bo-title-panel .story { font-size: 14px; font-weight: bold; margin: 0 0 4px; text-shadow: 0 0 6px #f6ecd8, 0 0 2px #f6ecd8; }
  .bousou-osushi.bo-app .bo-title-panel .bo-scene { display: block; width: min(100%, 520px); height: auto; aspect-ratio: 520 / 96; margin: 0 auto 6px; box-shadow: none; border-radius: 0; }
  .bousou-osushi.bo-app .bo-cards { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; text-align: left; }
  .bousou-osushi.bo-app .bo-card { background: rgba(251,243,226,0.96); border: 2px solid #caa97a; border-radius: 10px; padding: 8px 12px; box-shadow: 0 2px 0 rgba(59,38,22,0.25); }
  .bousou-osushi.bo-app .bo-card-h { font-weight: bold; font-size: 14px; color: #3a2414; margin-bottom: 4px; }
  .bousou-osushi.bo-app .bo-title-panel .howto { background: rgba(251,243,226,0.96); margin: 0; }
  .bousou-osushi.bo-app .bo-title-panel > .btn { margin-top: 8px; padding: 10px 56px; font-size: 20px; border-radius: 12px; }
  .bousou-osushi.bo-app .bo-resultScreen { container: res / size; }
  .bousou-osushi.bo-app .bo-resultScreen .panel { position: relative; z-index: 1; }
  .bousou-osushi.bo-app .tight1 .bo-scene, .bousou-osushi.bo-app .tight2 .howto p:last-child, .bousou-osushi.bo-app .tight3 .story, .bousou-osushi.bo-app .tight4 .bo-cast-card { display: none !important; }
  .bousou-osushi.bo-app .tight4 .bo-cards { grid-template-columns: 1fr; }
  .bousou-osushi.bo-app .bo-tate { display: none; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 20px; line-height: 1.6; letter-spacing: 0.18em; color: #fbecd2; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: bold; pointer-events: none; }
  .bousou-osushi.bo-app .overlay.show { display: flex; }
  .bousou-osushi.bo-app .panel {
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: #fbf3e2;
    color: #3a2414;
    border: 2px solid #caa97a;
    border-radius: 12px;
    padding: 18px 18px 16px;
    text-align: center;
    box-shadow: 0 4px 0 #3b2616;
  }
  .bousou-osushi.bo-app .panel-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
  .bousou-osushi.bo-app .panel > .btn, .bousou-osushi.bo-app .panel > .btns { flex: none; }
  .bousou-osushi.bo-app .panel > .btn { align-self: center; margin-top: 10px; }
  .bousou-osushi.bo-app .panel .bo-title { font-size: 26px; font-weight: bold; margin: 2px 0 8px; letter-spacing: 0.04em; }
  .bousou-osushi.bo-app .panel .bo-title span { color: #c8322b; }
  .bousou-osushi.bo-app .story { font-size: 14px; line-height: 1.7; margin: 0 0 12px; }
  .bousou-osushi.bo-app .howto {
    text-align: left;
    font-size: 13px;
    line-height: 1.6;
    background: #f1e2c8;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
  }
  .bousou-osushi.bo-app .howto b { color: #b3271a; }
  .bousou-osushi.bo-app .howto p { margin: 0 0 4px; }
  .bousou-osushi.bo-app .cast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin: 6px 0 2px;
  }
  .bousou-osushi.bo-app .cast div { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; }
  .bousou-osushi.bo-app .cast canvas { width: 34px; height: 30px; flex: none; box-shadow: none; border-radius: 0; }
  .bousou-osushi.bo-app .btn {
    font: inherit;
    font-weight: bold;
    border: 3px solid #5a3417;
    border-radius: 12px;
    padding: 10px 26px;
    font-size: 18px;
    cursor: pointer;
    background: #e8752a;
    color: #fff;
    box-shadow: 0 4px 0 #5a3417;
    touch-action: manipulation;
  }
  .bousou-osushi.bo-app .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a3417; }
  .bousou-osushi.bo-app .btn.sub { background: #fbf3e4; color: #3a2414; }
  .bousou-osushi.bo-app .btn:disabled { background: #8b7b6b; color: #e8dccb; cursor: default; }
  .bousou-osushi.bo-app .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
  .bousou-osushi.bo-app .result-line { font-size: 20px; font-weight: bold; margin: 4px 0 10px; color: #c8322b; text-wrap: balance; }
  .bousou-osushi.bo-app .result-line.win { color: #2f8a3a; }
  .bousou-osushi.bo-app .result-time { font-size: 15px; }
  .bousou-osushi.bo-app .result-time b { font-size: 40px; font-variant-numeric: tabular-nums; margin: 0 4px; }
  .bousou-osushi.bo-app .result-sub { font-size: 13px; color: #7a5a3a; margin-top: 4px; min-height: 1.3em; }
  .bousou-osushi.bo-app .badge {
    display: inline-block;
    background: #c8322b;
    color: #fff;
    font-weight: bold;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 14px;
    margin-top: 6px;
  }
  /* みんなのランキング(サーバーの窓口があるときだけ出す) */
  .bousou-osushi.bo-app .bo-rank { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #caa97a; }
  .bousou-osushi.bo-app .bo-rank-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  .bousou-osushi.bo-app .bo-rank [hidden], .bousou-osushi.bo-app .bo-rank-link[hidden], .bousou-osushi.bo-app .bo-rank[hidden] { display: none; }
  .bousou-osushi.bo-app .bo-rankName { font: inherit; font-size: 16px; width: 11em; max-width: 100%; height: auto; min-height: 0; line-height: 1.4; margin: 0; padding: 6px 10px; border: 2px solid #caa97a; border-radius: 10px; background: #fff; color: #3a2414; box-shadow: none; text-align: left; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; outline-offset: 1px; }
  .bousou-osushi.bo-app .bo-rankName:focus { border-color: #e8752a; background: #fff; box-shadow: none; outline: none; }
  .bousou-osushi.bo-app .bo-rankSend { font-size: 15px; padding: 6px 14px; border-width: 2px; box-shadow: 0 3px 0 #5a3417; }
  .bousou-osushi.bo-app .bo-rank-msg { font-size: 13px; color: #7a5a3a; margin-top: 6px; min-height: 1.3em; }
  .bousou-osushi.bo-app .bo-rank-msg b { color: #c8322b; font-size: 18px; margin: 0 2px; }
  .bousou-osushi.bo-app .bo-rank-link { background: none; border: none; box-shadow: none; color: #7a4a1a; text-decoration: underline; font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; padding: 4px 8px; }
  .bousou-osushi.bo-app .bo-title-panel > .bo-rank-link { flex: none; align-self: center; margin-top: 8px; padding: 3px 16px; font-size: 13px; color: #3a2414; text-decoration: none; background: rgba(251,243,226,0.94); border: 2px solid #caa97a; border-radius: 999px; }
  .bousou-osushi.bo-app .bo-rankScreen { z-index: 3; }
  .bousou-osushi.bo-app .bo-rank-h { font-size: 20px; font-weight: bold; margin: 2px 0 8px; }
  .bousou-osushi.bo-app .bo-rank-list { text-align: left; font-size: 15px; }
  .bousou-osushi.bo-app .bo-rank-list > div { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 8px; padding: 5px 8px; border-bottom: 1px dotted #d9c3a0; }
  .bousou-osushi.bo-app .bo-rank-list > div.me { background: #fde3c8; border-radius: 6px; font-weight: bold; }
  .bousou-osushi.bo-app .bo-rank-list .n { color: #c8322b; font-weight: bold; text-align: right; }
  .bousou-osushi.bo-app .bo-rank-list .s { font-variant-numeric: tabular-nums; }
  .bousou-osushi.bo-app .bo-rank-list .empty { display: block; text-align: center; color: #7a5a3a; border: none; }
  .bousou-osushi.bo-app .bo-rank-me { font-size: 13px; color: #7a5a3a; margin-top: 8px; min-height: 1.3em; }
  .bousou-osushi.bo-app .bo-controls { justify-content: center; background: #3b2616; border-radius: 10px; padding: 8px 12px; box-shadow: inset 0 3px 0 rgba(0,0,0,0.25); }
  .bousou-osushi.bo-app .bo-controls .btn { font-size: 16px; padding: 10px 18px; }
  .bousou-osushi.bo-app .bo-provokeBtn { background: #5d554c; border-color: #221509; box-shadow: 0 4px 0 #221509; color: #fbecd2; white-space: nowrap; min-width: 9.2em; }
  .bousou-osushi.bo-app .bo-dashBtn { background: #e8752a; border-color: #221509; box-shadow: 0 4px 0 #221509; min-width: 8em; }
  .bousou-osushi.bo-app .bo-provokeBtn:disabled, .bousou-osushi.bo-app .bo-dashBtn:disabled { background: transparent; color: #8f7a62; border-color: #6a543e; border-style: dashed; box-shadow: none; }
  /* 音の設定: スピーカーのボタンを押すと、オン・オフと音量のバーが出る */
  .bousou-osushi.bo-app .bo-snd { position: relative; }
  .bousou-osushi.bo-app .bo-soundBtn {
    font: inherit;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fbecd2;
    background: transparent;
    border: 2px solid #9a7a55;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
  }
  .bousou-osushi.bo-app .bo-soundBtn svg { width: 22px; height: 22px; display: block; }
  .bousou-osushi.bo-app .bo-soundBtn[aria-expanded="true"] { background: #5a3a20; }
  .bousou-osushi.bo-app .bo-soundPanel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fbf3e2;
    color: #3a2414;
    border: 2px solid #caa97a;
    border-radius: 10px;
    padding: 10px 12px 12px;
    box-shadow: 0 4px 0 #3b2616;
    white-space: normal;
  }
  .bousou-osushi.bo-app .bo-soundPanel[hidden] { display: none; }
  .bousou-osushi.bo-app .bo-snd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: bold; }
  .bousou-osushi.bo-app .bo-muteBtn {
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    min-width: 5.2em;
    min-height: 34px;
    border: 2px solid #5a3417;
    border-radius: 999px;
    padding: 2px 12px;
    cursor: pointer;
    background: #e8752a;
    color: #fff;
    box-shadow: 0 2px 0 #5a3417;
  }
  .bousou-osushi.bo-app .bo-muteBtn[aria-checked="false"] { background: #fbf3e4; color: #3a2414; }
  .bousou-osushi.bo-app .bo-volSlider { width: 100%; margin: 0; accent-color: #e8752a; height: 28px; cursor: pointer; }
  .bousou-osushi.bo-app .bo-volSlider:disabled { opacity: 0.45; cursor: default; }
  .bousou-osushi.bo-app .bo-hint { font-size: 13px; color: #d9c2a0; }
  .bousou-osushi.bo-app .touch-only { display: none; }
  @media (pointer: coarse) {
    .bousou-osushi.bo-app .touch-only { display: block; }
    .bousou-osushi.bo-app .btn.touch-only { display: inline-flex; justify-content: center; align-items: center; }
    .bousou-osushi.bo-app .mouse-only { display: none; }
    .bousou-osushi.bo-app .bo-controls .btn { font-size: 17px; padding: 12px 20px; }
    /* 指で押す小さいボタンは、見た目はそのままで押せる範囲だけ 44px ほどに広げる */
    .bousou-osushi.bo-app .bo-soundBtn, .bousou-osushi.bo-app .bo-rank-link { position: relative; }
    .bousou-osushi.bo-app .bo-soundBtn::after { content: ""; position: absolute; inset: -7px; }
    .bousou-osushi.bo-app .bo-title-panel > .bo-rank-link::after { content: ""; position: absolute; inset: -11px -4px; }
    /* 結果の画面のほうは、下に広げると中が少し動くようになってしまうので、上のお知らせの欄にだけ広げる */
    .bousou-osushi.bo-app .bo-rankViewBtn::after { content: ""; position: absolute; inset: -16px -4px 0; }
  }
  @container bousou (orientation: landscape) and (max-height: 500px) {
    .bousou-osushi.bo-app .bo-hud { font-size: 13px; }
    .bousou-osushi.bo-app .bo-hud .time { font-size: 18px; }
    .bousou-osushi.bo-app .bo-stage { padding: 0 124px; }
    .bousou-osushi.bo-app .bo-controls { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 104px; flex-direction: column; gap: 12px; max-width: none; }
    .bousou-osushi.bo-app .bo-controls .btn { min-width: 104px; padding: 16px 8px; }
    .bousou-osushi.bo-app .bo-provokeBtn { padding: 10px 8px !important; font-size: 14px !important; white-space: normal; word-break: keep-all; min-width: 0; }
    .bousou-osushi.bo-app .bo-title-panel .story, .bousou-osushi.bo-app .howto p:last-child { display: none; }
    .bousou-osushi.bo-app .bo-cast-card { display: none; }
    .bousou-osushi.bo-app .bo-cards { grid-template-columns: 1fr; }
    .bousou-osushi.bo-app .bo-title-panel .bo-scene { display: none; }
    .bousou-osushi.bo-app .panel { padding: 10px 14px; }
    .bousou-osushi.bo-app .panel .bo-title { font-size: 20px; margin-bottom: 4px; }
    .bousou-osushi.bo-app .story { font-size: 12px; margin-bottom: 6px; }
    .bousou-osushi.bo-app .howto { font-size: 12px; padding: 6px 10px; margin-bottom: 8px; }
    .bousou-osushi.bo-app .result-line { font-size: 18px; margin: 0 0 4px; }
    .bousou-osushi.bo-app .result-time b { font-size: 28px; }
    .bousou-osushi.bo-app .btns { margin-top: 8px; }
    .bousou-osushi.bo-app .btn { padding: 8px 20px; font-size: 16px; }
  }
  @container bousou (max-height: 720px) and (max-width: 700px) {
    .bousou-osushi.bo-app .bo-cast-card { display: none; }
  }
  @container bousou (max-height: 640px) {
    .bousou-osushi.bo-app .bo-cast-card { display: none; }
    .bousou-osushi.bo-app .bo-cards { grid-template-columns: 1fr; }
    .bousou-osushi.bo-app .story { font-size: 13px; margin-bottom: 8px; }
  }
  @container bousou (max-width: 420px) {
    .bousou-osushi.bo-app .bo-hud { font-size: 12px; gap: 6px; }
    .bousou-osushi.bo-app .bo-hud .score, .bousou-osushi.bo-app .bo-hud .right { min-width: 0; gap: 6px; }
    .bousou-osushi.bo-app .bo-hud .time { font-size: 13px; }
    .bousou-osushi.bo-app .bo-hud .time b { font-size: 20px; }
    .bousou-osushi.bo-app .bo-hud .time small { font-size: 11px; }
    .bousou-osushi.bo-app .bo-soundBtn { width: 36px; height: 36px; }
    .bousou-osushi.bo-app .panel .bo-title { font-size: 22px; }
    .bousou-osushi.bo-app .bo-cards { grid-template-columns: 1fr; gap: 6px; }
    .bousou-osushi.bo-app .bo-controls { gap: 8px; padding: 6px 8px; }
    .bousou-osushi.bo-app .bo-controls .btn { font-size: 15px; padding: 10px 12px; }
    .bousou-osushi.bo-app .bo-provokeBtn { min-width: 8.6em; }
    .bousou-osushi.bo-app .bo-dashBtn { min-width: 5.5em; }
    .bousou-osushi.bo-app .bo-title-panel .story { font-size: 12px; }
    .bousou-osushi.bo-app .bo-card { padding: 6px 10px; font-size: 12px; }
    /* 案A（2026-10-23 秘書うなぎの決め）: 小さいスマホで結果の画面の下が隠れるので、「もう一回!」「タイトルへ」を横1列にして、空の知らせ欄のすき間を詰める。字の大きさと色はそのまま */
    .bousou-osushi.bo-app .bo-resultScreen .btns { flex-wrap: nowrap; }
    .bousou-osushi.bo-app .bo-resultScreen .btns .btn { padding-left: 10px; padding-right: 10px; white-space: nowrap; flex: 1 1 0; }
    .bousou-osushi.bo-app .bo-rank-msg:empty { min-height: 0; margin-top: 0; }
  }
  @container bousou (max-width: 700px) {
    .bousou-osushi.bo-app .bo-cards { grid-template-columns: 1fr; }
  }
  @container res (min-width: 720px) and (min-height: 300px) { .bousou-osushi.bo-app .bo-tate { display: block; } }
  @container res (max-width: 719px) and (min-height: 560px) {
    .bousou-osushi.bo-app .bo-tate { display: block; writing-mode: horizontal-tb; top: 14px; right: 0; left: 0; transform: none; text-align: center; font-size: 15px; letter-spacing: 0.1em; }
  }
  @container bousou (max-width: 350px) {
    .bousou-osushi.bo-app .bo-hud { padding: 4px 6px; font-size: 11px; gap: 4px; }
    .bousou-osushi.bo-app .bo-hud .time b { font-size: 18px; }
    .bousou-osushi.bo-app .bo-hud .time small { font-size: 10px; }
    .bousou-osushi.bo-app .bo-soundBtn { width: 34px; height: 34px; }
    .bousou-osushi.bo-app .bo-soundBtn svg { width: 18px; height: 18px; }
    .bousou-osushi.bo-app .bo-hud .best { display: none; }
  }
