:root{--frame:#3a2840;--win:#fff6fb;--ink:#4a3850;--hp-g:#5cc878;--hp-y:#f0c040;--hp-r:#e85878;--sel:#c869a8;--accent:#f0a860;--love:#ff7eb0;--rival:#5a6ad0;}
  html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;}
  button,canvas{touch-action:manipulation;}
  *{box-sizing:border-box;}
  /* ★iOS の 100vh 問題対策：CSS変数 --app-height を JS から設定 */
  :root{--app-height:100vh;}
  body{
    margin:0;
    font-family:"Hiragino Maru Gothic Pro","Yu Gothic",system-ui,sans-serif;
    background:linear-gradient(160deg,#3a2840,#241830);
    color:var(--ink);
    padding:8px;
    /* ★セーフエリア対応（iPhoneノッチ・ホームバー） */
    padding-top:max(8px,env(safe-area-inset-top));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
    min-height:var(--app-height);
  }
  .game{
    max-width:none;
    width:100%;
    margin:0 auto;
    padding:0 4px;
    /* ★スマホで余白詰める */
    overflow-x:hidden;
  }
  /* ★スマホ向け追加調整 */
  @media (max-width:600px){
    body{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));}
    .game{padding:0 2px;}
    .topbar{font-size:11px;}
    .tabs button{font-size:10px;padding:6px 1px;}
  }
  .topbar{display:flex;justify-content:space-between;color:#ffd6ec;font-size:12px;font-weight:700;margin-bottom:6px;align-items:center;}
  .accent{color:var(--accent);}
  .tabs{display:flex;gap:3px;margin-bottom:6px;flex-wrap:wrap;}
  .tabs button{flex:1;min-width:46px;padding:8px 2px;font-size:11px;font-weight:800;border-radius:12px;border:none;background:linear-gradient(180deg,#fff,#ffd9ee);color:#a85088;cursor:pointer;}
  .tabs button.active{background:linear-gradient(180deg,#ff9ed0,#e85ca8);color:#fff;}
  .view{display:none;} .view.active{display:block;}
  #field-wrap{display:flex;flex-direction:column;align-items:center;}
  #field{border:4px solid #fff;border-radius:14px;width:100%;max-width:640px;height:auto;box-shadow:0 4px 16px rgba(200,100,160,.35);image-rendering:auto;}
  .area-tag{margin-top:6px;font-size:12px;font-weight:800;color:#ffd6ec;}
  .dpad{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:6px;justify-content:center;}
  .dpad button{width:62px;height:62px;font-size:22px;border:none;border-radius:50%;background:linear-gradient(180deg,#fff,#ffd9ee);color:#c869a8;font-weight:800;cursor:pointer;touch-action:none;-webkit-touch-callout:none;}
  .dpad button:active{transform:scale(.92);} .dpad .empty{background:transparent;}
  .fieldmsg{margin-top:0;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700;line-height:1.4;min-height:auto;background:rgba(40,20,40,.82);color:#fff6fb;box-shadow:0 2px 10px rgba(0,0,0,.4);border:1.5px solid rgba(255,160,210,.5);}
  .stage{position:relative;height:300px;border:4px solid #fff;border-radius:14px;overflow:hidden;}
  .stage.flash{animation:flash .5s;} @keyframes flash{0%{filter:brightness(3.5);}40%{filter:brightness(1);}60%{filter:brightness(2.5);}100%{filter:brightness(1);}}
  #battle-bg{position:absolute;inset:0;width:100%;height:100%;}
  .info{position:absolute;background:rgba(255,246,251,.95);border-radius:14px;padding:8px 12px;min-width:190px;z-index:2;}
  .foe-info{top:12px;left:12px;} .ally-info{bottom:12px;right:12px;}
  .nm{font-size:14px;font-weight:800;display:flex;justify-content:space-between;gap:8px;}
  .hp-track{display:inline-block;width:150px;height:16px;background:#c8b0bc;border-radius:8px;overflow:hidden;vertical-align:middle;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
  .hp-fill{display:block;height:100%;width:100%;background:#5cc878;transition:width .45s,background .45s;border-radius:6px;}
  .hp-fill.low{animation:hpPulse .6s ease-in-out infinite;}
  @keyframes hpPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
  .hp-num{font-size:15px;font-weight:800;color:#4a3850;margin-top:4px;}
  .hp-num.low{color:#e02850;}
  .sprite{position:absolute;z-index:2;} .foe-sprite{top:30px;right:60px;transition:transform .3s;} .ally-sprite{bottom:12px;left:46px;}
  .party-dots{position:absolute;z-index:3;display:flex;gap:4px;}
  .pd-foe{top:auto;bottom:8px;left:14px;}
  .pd-ally{top:auto;bottom:8px;right:14px;left:auto;}
  .party-dots span{width:10px;height:10px;border-radius:50%;background:#5cc878;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.3);}
  .party-dots span.dead{background:#999;}
  .type-badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:800;color:#fff;}
  .bottom{margin-top:8px;border-radius:16px;background:var(--win);min-height:130px;display:flex;overflow:hidden;}
  .msg{flex:1;padding:15px;font-size:16px;font-weight:700;line-height:1.5;display:flex;align-items:center;}
  .cmd{width:200px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;}
  .cmd button{background:linear-gradient(180deg,#fff,#ffe4f2);border:none;border-radius:12px;font-size:14px;font-weight:800;padding:13px 4px;color:#a85088;cursor:pointer;}
  .cmd button:active{transform:scale(.95);} .cmd button:disabled{opacity:.4;}
  .move-screen{margin-top:8px;display:flex;gap:6px;}
  .move-list{flex:1;border-radius:16px;background:var(--win);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .move-btn{background:linear-gradient(180deg,#fff,#ffe4f2);border:none;border-radius:12px;padding:11px 8px;font-size:13px;font-weight:800;cursor:pointer;text-align:left;color:#a85088;}
  .move-btn:disabled{opacity:.4;} .move-btn .pp{font-size:11px;color:#c090a8;font-weight:600;display:block;margin-top:2px;}
  .move-detail{width:150px;border-radius:16px;background:var(--win);padding:12px;font-size:12px;}
  .detail-row{display:flex;justify-content:space-between;margin:5px 0;border-bottom:1px dotted #e0c0d0;padding-bottom:3px;}
  .panel{margin-top:8px;border-radius:16px;background:var(--win);padding:14px;}
  .panel h2{font-size:15px;margin:0 0 8px;color:#c05088;}
  .act{background:linear-gradient(180deg,#ff9ed0,#e85ca8);color:#fff;border:none;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:800;cursor:pointer;}
  .act:active{transform:scale(.95);} .act.o{background:linear-gradient(180deg,#ffce80,#f0a040);color:#6a3c00;} .act.gy{background:linear-gradient(180deg,#cfc4d4,#a898b0);} .act.r{background:linear-gradient(180deg,#8a9ae8,#5a6ad0);}
  .mon-row{display:flex;align-items:center;gap:10px;border-radius:14px;padding:9px 12px;margin-bottom:8px;background:linear-gradient(180deg,#fff,#fdeef6);}
  .mn2{font-weight:800;font-size:14px;}
  .mini-hp{width:110px;height:8px;background:#e8d0dc;border-radius:4px;overflow:hidden;} .mini-hp>span{display:block;height:100%;border-radius:4px;}
  .sub{color:#b890a8;font-size:12px;}
  .qty{width:58px;font-size:14px;padding:6px;border-radius:8px;border:2px solid #f0c0d8;text-align:center;}
  .char-card{display:flex;gap:12px;align-items:center;border-radius:18px;padding:11px;margin-bottom:10px;background:linear-gradient(135deg,#fff0f8,#ffe0f0);}
  .char-card.rival{background:linear-gradient(135deg,#eef0ff,#dde2ff);}
  .char-card canvas{border-radius:14px;}
  .heart-bar{height:13px;background:#f4d6e4;border-radius:7px;overflow:hidden;} .heart-bar>span{display:block;height:100%;background:linear-gradient(90deg,#ff7eb0,#ffc0dc);border-radius:7px;}
  .talk-box{border-radius:12px;background:#fff;padding:11px;font-size:14px;font-weight:700;min-height:44px;margin-top:6px;}
  .talk-box .who{color:#c05088;font-weight:900;display:block;margin-bottom:4px;}
  #opening{position:relative;border:4px solid #fff;border-radius:14px;overflow:hidden;max-width:600px;margin:0 auto;}
  #op-canvas{width:100%;display:block;}
  #op-text{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(60,20,50,.2),rgba(60,20,50,.92));color:#fff6fb;padding:16px;font-size:15px;font-weight:700;line-height:1.7;min-height:120px;}
  #op-text .speaker{color:#ffe0a0;font-weight:900;display:block;margin-bottom:4px;font-size:14px;}
  #op-controls{position:absolute;right:12px;bottom:10px;}
  .op-btn{background:linear-gradient(180deg,#ff9ed0,#e85ca8);color:#fff;border:none;border-radius:12px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer;}
  .topicon{
    width:26px;height:26px;padding:0;
    font-size:13px;line-height:1;
    border:none;border-radius:8px;cursor:pointer;
    background:linear-gradient(180deg,#ff9ed0,#e85ca8);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .topicon:active{transform:scale(.9);}
  #name-in{font-size:16px;padding:9px;border-radius:10px;border:2px solid #f0a0c8;width:170px;text-align:center;}
  .starter-row{display:flex;gap:6px;justify-content:center;margin-top:8px;}
  .starter{flex:1;background:#fff;border:2px solid #f0c0d8;border-radius:14px;padding:8px;text-align:center;cursor:pointer;}
  .starter b{display:block;font-size:13px;} .starter .ty{display:inline-block;padding:1px 6px;border-radius:8px;color:#fff;font-size:11px;font-weight:800;margin-top:3px;}
  #main-game{display:none;}
  #log{background:rgba(40,20,40,.85);color:#ffd6ec;border-radius:12px;padding:9px;height:70px;overflow-y:auto;font-size:12px;white-space:pre-wrap;margin-top:8px;}
  .ng{color:#ff9aa8;font-weight:800;} .ok{color:#8ce8a0;font-weight:800;} .lv{color:#ffb0d8;font-weight:800;} .rv{color:#aab0ff;font-weight:800;} .rare{color:#ffe070;font-weight:800;} .drop{color:#a0e0ff;font-weight:800;} .legend{color:#ffd080;font-weight:900;}
  .modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(40,20,40,.7);
    padding:12px;
    overflow-y:auto;
  }
  .modal.show{ display:flex; }
  .modal-box{
    max-height:90vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .modal.show{display:flex;}
  .modal-box{background:var(--win);border:4px solid #fff;border-radius:18px;padding:12px;max-width:520px;width:100%;}
  #cut-canvas{width:100%;border-radius:14px;}
  #nick-input{font-size:16px;padding:9px;border-radius:10px;border:2px solid #f0a0c8;width:60%;text-align:center;}
  .shop-cat{font-weight:800;margin:8px 0 4px;color:#c05088;font-size:14px;}
  .keychip{display:inline-block;background:#f0e0a0;border-radius:8px;padding:3px 9px;font-size:12px;font-weight:800;color:#7a5a00;margin:2px;}
  .badge{width:30px;height:30px;border-radius:50%;background:#e8d8e4;display:inline-flex;align-items:center;justify-content:center;font-size:15px;margin:2px;}
  .badge.got{background:radial-gradient(circle at 35% 30%,#fff,#f0a040);}
  #title-screen{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#2a1840,#140a26 60%,#3a1830);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;}
  #title-canvas{position:absolute;inset:0;width:100%;height:100%;}
  .title-logo{position:relative;z-index:2;text-align:center;}
  .title-logo h1{font-size:56px;margin:0;font-weight:900;color:#fff6fb;letter-spacing:2px;text-shadow:0 0 18px #c869a8,0 0 36px #5a6ad0;animation:logoGlow 2s ease-in-out infinite;}
  @keyframes logoGlow{0%,100%{text-shadow:0 0 14px #c869a8,0 0 28px #5a6ad0;transform:scale(1);}50%{text-shadow:0 0 26px #ff8ec0,0 0 52px #7a8af0;transform:scale(1.04);}}
  .title-logo .sub{font-size:18px;color:#ffd6ec;font-weight:800;margin-top:8px;text-shadow:0 0 8px #c05088;}
  .title-press{position:relative;z-index:2;margin-top:115px;font-size:22px;font-weight:900;color:#fff;animation:pressBlink 1s steps(2) infinite;text-shadow:0 0 10px #ff8ec0;}
  @keyframes pressBlink{50%{opacity:0;}}
  .title-foot{position:absolute;bottom:10px;z-index:2;font-size:12px;color:#9a7ab0;}
  .flashwhite{animation:flashWhite .35s;} @keyframes flashWhite{0%{filter:brightness(6);}100%{filter:brightness(1);}}
  .heartpop{position:fixed;z-index:200;font-size:26px;pointer-events:none;animation:heartUp 1.1s ease-out forwards;}
  @keyframes heartUp{0%{opacity:1;transform:translateY(0) scale(.6);}100%{opacity:0;transform:translateY(-80px) scale(1.4);}}
  .dmgpop{position:absolute;z-index:50;font-weight:900;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.6),0 0 2px #000;animation:dmgUp 0.9s ease-out forwards;white-space:nowrap;}
  @keyframes dmgUp{0%{opacity:0;transform:translate(-50%,0) scale(.5);}15%{opacity:1;transform:translate(-50%,-8px) scale(1.25);}40%{transform:translate(-50%,-18px) scale(1);}100%{opacity:0;transform:translate(-50%,-46px) scale(.95);}}
  .dmgpop.crit{animation:dmgCrit 1.0s ease-out forwards;}
  @keyframes dmgCrit{0%{opacity:0;transform:translate(-50%,0) scale(.4) rotate(-8deg);}12%{opacity:1;transform:translate(-50%,-10px) scale(1.5) rotate(4deg);}40%{transform:translate(-50%,-22px) scale(1.1) rotate(0);}100%{opacity:0;transform:translate(-50%,-52px) scale(1);}}
  #clear-modal .modal-box{text-align:center;}
  .mail-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:10px;
  }

  .mail-list{
    max-height:420px;
    overflow-y:auto;
    padding-right:4px;
  }

  .mail-item{
    width:100%;
    text-align:left;
    border:none;
    border-radius:14px;
    padding:10px;
    margin-bottom:8px;
    background:linear-gradient(180deg,#fff,#fdeef6);
    color:#a85088;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 1px 3px rgba(120,60,100,.12);
  }

  .mail-item:active{
    transform:scale(.98);
  }

  .mail-item.locked{
    opacity:.45;
    cursor:not-allowed;
    color:#8a7890;
  }

  .mail-item-title{
    font-size:13px;
    line-height:1.35;
  }

  .mail-item-meta{
    margin-top:4px;
    font-size:11px;
    color:#b890a8;
    font-weight:700;
  }

  .mail-new{
    display:inline-block;
    margin-left:5px;
    padding:1px 6px;
    border-radius:999px;
    background:#e85878;
    color:#fff;
    font-size:10px;
    font-weight:900;
    vertical-align:middle;
  }

  .mail-detail{
    min-height:300px;
    border-radius:14px;
    padding:12px;
    background:linear-gradient(180deg,#fff,#fff7fb);
    border:2px solid #f0c0d8;
  }

  .mail-detail-title{
    color:#c05088;
    font-size:16px;
    font-weight:900;
    margin-bottom:4px;
  }

  .mail-detail-meta{
    color:#b890a8;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
  }

  .mail-detail-body{
    color:#4a3850;
    font-size:14px;
    font-weight:700;
    line-height:1.75;
    white-space:pre-wrap;
  }

  .mail-empty{
    color:#b890a8;
    font-size:13px;
    font-weight:800;
  }

  @media(max-width:720px){
    .mail-layout{
      grid-template-columns:1fr;
    }

    .mail-list{
      max-height:210px;
    }
  }
    /* File: index.html */

    /* ===== Mobile Opening Layout Emergency Fix ===== */

    #opening {
      height: calc(var(--app-height) - 16px);
      max-height: calc(var(--app-height) - 16px);
    }

    #op-canvas {
      height: 100%;
      object-fit: cover;
    }

    #op-text {
      max-height: 72%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    #op-extra {
      max-height: 48vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 600px) {
      #opening {
        height: calc(var(--app-height) - 8px);
        max-height: calc(var(--app-height) - 8px);
      }

      #op-text {
        max-height: 78%;
        min-height: auto;
        padding: 10px;
        font-size: 13px;
        line-height: 1.45;
      }

      #op-extra {
        max-height: 52vh;
        overflow-y: auto;
      }

      .starter-row {
        gap: 4px;
      }

      .starter {
        min-width: 0;
        padding: 6px 3px;
      }

      .starter b {
        font-size: 11px;
      }

      #starter-detail {
        min-height: 0 !important;
        max-height: 34vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      #starter-decide-wrap {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding-top: 8px;
        background: linear-gradient(
          180deg,
          rgba(60, 20, 50, 0),
          rgba(60, 20, 50, 0.9)
        );
      }

      #starter-decide {
        width: min(90%, 320px);
      }
    }
    /* ===== スマホ：十字キー（dpad）を小さくして視界を確保 ===== */
    @media (max-width:600px){
      /* ボタン1個あたりのサイズを 62px → 48px に縮小 */
      .dpad{
        grid-template-columns:repeat(3,48px);
        grid-template-rows:repeat(3,48px);
        gap:4px;
        opacity:0.82;
      }
      .dpad button{
        width:48px;
        height:48px;
        font-size:18px;
      }
      /* 中央Aボタンの位置・サイズも合わせる */
      .dpad button.act{
        font-size:16px;
      }
      /* dpad全体をさらに下端へ寄せて、主人公（中央）と重なりにくく */
      #field-wrap .dpad{
        bottom:8px;
      }
    }

    /* ===== さらに小さい画面（iPhone SE等・幅380px以下）はもっと小さく ===== */
    @media (max-width:380px){
      .dpad{
        grid-template-columns:repeat(3,42px);
        grid-template-rows:repeat(3,42px);
        gap:3px;
      }
      .dpad button{
        width:42px;
        height:42px;
        font-size:16px;
      }
    }


  /* PHASE_UI1_EVENT_BATTLE_HUD_START
     Phase UI-1 Event Window & Mobile Battle HUD Normalization
  */
  .modal-box {
    max-width: 640px;
    width: min(640px, calc(100vw - 24px));
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #cutscene .modal-box {
    max-width: 640px;
    width: min(640px, calc(100vw - 24px));
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: 600px) {
    .modal {
      padding: 8px;
      align-items: center;
    }
    .modal-box {
      width: calc(100vw - 16px);
      max-width: none;
      max-height: calc(var(--app-height, 100vh) - 16px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #cutscene .modal-box {
      padding: 10px;
    }
    #cut-canvas {
      max-height: 38vh;
      object-fit: contain;
    }
    #cut-line,
    #cut-who {
      font-size: 13px;
      line-height: 1.55;
    }
    #cut-next {
      min-height: 40px;
    }
    .stage {
      height: 300px;
    }
    .info {
      min-width: 128px;
      padding: 5px 7px;
      border-radius: 10px;
      font-size: 10px;
      background: rgba(255, 246, 251, .86);
    }
    .nm {
      font-size: 11px;
      gap: 4px;
      line-height: 1.2;
    }
    .type-badge {
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 8px;
    }
    .hp-track {
      width: 88px;
      height: 10px;
      border-width: 1px;
    }
    .hp-num {
      font-size: 10px;
      margin-top: 2px;
      line-height: 1.15;
    }
    .party-dots {
      gap: 2px;
    }
    .party-dots span {
      width: 7px;
      height: 7px;
      border-width: 1px;
    }
    .foe-info {
      top: 6px;
      left: 6px;
    }
    .ally-info {
      right: 6px;
      bottom: 6px;
    }
    .foe-sprite {
      top: 42px;
      right: 30px;
    }
    .ally-sprite {
      bottom: 22px;
      left: 28px;
    }
  }
  @media (max-width: 380px) {
    .info {
      min-width: 112px;
      padding: 4px 6px;
    }
    .nm {
      font-size: 10px;
    }
    .hp-track {
      width: 76px;
      height: 9px;
    }
    .hp-num {
      font-size: 9px;
    }
    .party-dots span {
      width: 6px;
      height: 6px;
    }
  }
  /* PHASE_UI1_EVENT_BATTLE_HUD_END */
  /* PHASE_UI2_EVENT_WINDOW_SIZE_START
     Phase UI-2.1 Tall Event Window Hotfix
     Event Window Size / Image Quality Normalization - Tall Layout Correction
     Scope: event/cutscene modal that contains #cut-canvas only.
     Existing Phase UI-1 Event Window & Mobile Battle HUD block is preserved.
  */
  #cutscene .modal-box:has(#cut-canvas) {
    width: min(620px, calc(100vw - 24px));
    max-width: min(620px, calc(100vw - 24px));
    height: min(92vh, calc(var(--app-height, 100vh) - 24px));
    max-height: min(92vh, calc(var(--app-height, 100vh) - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px;
  }
  #cutscene .modal-box:has(#cut-canvas) #cut-canvas {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 14px;
    background: rgba(40, 20, 40, .08);
  }
  #cutscene .modal-box:has(#cut-canvas) #cut-canvas + div {
    flex: 0 0 auto;
    margin-top: 10px !important;
    min-height: 76px;
    max-height: 22vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #cutscene .modal-box:has(#cut-canvas) #cut-who,
  #cutscene .modal-box:has(#cut-canvas) #cut-line {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  #cutscene .modal-box:has(#cut-canvas) #cut-canvas + div + div {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px !important;
  }
  #cutscene .modal-box:has(#cut-canvas) #cut-next {
    min-height: 44px;
    min-width: 112px;
  }
  @media (max-width: 600px) {
    #cutscene.modal {
      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));
      align-items: center;
    }
    #cutscene .modal-box:has(#cut-canvas) {
      width: calc(100vw - 16px);
      max-width: none;
      height: calc(var(--app-height, 100vh) - 16px);
      max-height: calc(var(--app-height, 100vh) - 16px);
      padding: 10px;
    }
    #cutscene .modal-box:has(#cut-canvas) #cut-canvas {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      max-height: none;
      object-fit: contain;
      image-rendering: auto;
    }
    #cutscene .modal-box:has(#cut-canvas) #cut-canvas + div {
      min-height: 72px;
      max-height: 24vh;
      overflow-y: auto;
    }
    #cutscene .modal-box:has(#cut-canvas) #cut-line,
    #cutscene .modal-box:has(#cut-canvas) #cut-who {
      font-size: 13px;
      line-height: 1.6;
    }
    #cutscene .modal-box:has(#cut-canvas) #cut-next {
      min-height: 44px;
    }
  }
  @media (max-width: 380px) {
    #cutscene .modal-box:has(#cut-canvas) {
      width: calc(100vw - 12px);
      height: calc(var(--app-height, 100vh) - 12px);
      max-height: calc(var(--app-height, 100vh) - 12px);
      padding: 8px;
    }
    #cutscene .modal-box:has(#cut-canvas) #cut-canvas + div {
      min-height: 68px;
      max-height: 26vh;
    }
  }
  /* PHASE_UI2_EVENT_WINDOW_SIZE_END */

/* ★P1-5(v492-m5)：iPhoneセーフエリア対応。Safariの下部バー/ホームインジケータと
   ボックスUI・技チップの重なりを防ぐ（viewport-fit=cover とセット）。 */
@supports(padding:max(0px)){
  body{padding-bottom:max(0px, env(safe-area-inset-bottom));}
}