/* Tablet mode (426-768): force centered 425px phone shell */

@media (min-width: 426px) and (max-width: 768px) {
  body[data-ui="mobile"],
  body[data-ui="web"]{
    --tablet-shell-width: 425px;
    --tablet-shell-gutter: 20px;
    --tablet-shell-size: min(var(--tablet-shell-width), calc(100vw - var(--tablet-shell-gutter)));
  }

  html,
  body{
    scrollbar-gutter: stable both-edges;
  }

  body[data-ui="mobile"].talents-open,
  body[data-ui="mobile"].gear-open,
  body[data-ui="web"].talents-open,
  body[data-ui="web"].gear-open{
    overflow-y: hidden;
  }

  body[data-ui="mobile"] #btnKillEnemy{
    display: none !important;
  }

  body[data-ui="mobile"].mode-debug #btnKillEnemy,
  body[data-ui="mobile"].debug-start-unlocked #btnKillEnemy{
    display: inline-flex !important;
  }

  body[data-ui="mobile"].mode-debug .debugGroup{
    display: inline-flex;
  }

  body[data-ui="mobile"] .logoPanel,
  body[data-ui="mobile"] .panel-log,
  body[data-ui="mobile"] .panel-info,
  body[data-ui="mobile"] .panel-run{
    display: none;
  }

  body[data-ui="mobile"] .panel-enemy::before,
  body[data-ui="mobile"] .panel-enemy::after{
    content: none;
  }

  body[data-ui="mobile"] .rewardCardsGrid{
    flex-direction: column;
    align-items: stretch;
  }

  body[data-ui="mobile"] .talentTreeStage{
    aspect-ratio: 9 / 16;
  }

  body[data-ui="mobile"] .talentNodeLabel{
    font-size: 8px;
  }

  html[data-ui="mobile"] .startCard,
  body[data-ui="mobile"] .startCard{
    width: var(--tablet-shell-size);
    max-width: var(--tablet-shell-width);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(10,12,18,.55), rgba(5,6,11,.8));
    box-shadow: 0 18px 40px rgba(0,0,0,.6);
    padding: 12px 10px 14px;
    gap: 10px;
    z-index: 2;
  }

  html[data-ui="mobile"] .startButtons,
  body[data-ui="mobile"] .startButtons{
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  html[data-ui="mobile"] .startPreviewPanel,
  body[data-ui="mobile"] .startPreviewPanel{
    display: none;
  }

  html[data-ui="mobile"] .startButtons button,
  body[data-ui="mobile"] .startButtons button{
    width: 100%;
    font-size: 12px;
    padding: 8px 10px;
  }

  html[data-ui="mobile"] .startScreen .startButtons button,
  body[data-ui="mobile"] .startScreen .startButtons button{
    background: linear-gradient(180deg, rgba(10,12,18,0.94), rgba(4,6,10,0.98));
    border-color: rgba(255,96,64,0.55);
    box-shadow: 0 12px 26px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.6) inset;
  }

  html[data-ui="mobile"] .startScreen .startButtons button:hover,
  body[data-ui="mobile"] .startScreen .startButtons button:hover{
    border-color: rgba(255,120,74,0.85);
    box-shadow: 0 16px 34px rgba(0,0,0,0.8), 0 0 18px rgba(255,96,64,0.18);
  }

  body[data-ui="mobile"].mode-shrine .shrineSparkle{
    opacity: 1;
    animation: shrineScreenPulse 2.4s ease-in-out infinite;
  }

  body[data-ui="mobile"] #playerStatuses,
  body[data-ui="mobile"] #playerPowers,
  body[data-ui="mobile"] #enemyStatuses,
  body[data-ui="mobile"] #enemyPowers{
    display: none !important;
  }

  body[data-ui="mobile"] #enemyTurnOverlay[data-tone="defense"] .overlayBackdrop{
    background:
      radial-gradient(1600px 920px at 50% 44%, rgba(96,188,255,0.34), rgba(96,188,255,0.08) 54%, transparent 78%),
      radial-gradient(1300px 760px at 50% 38%, rgba(72,136,255,0.22), transparent 68%),
      linear-gradient(180deg, rgba(4,16,34,0.56), rgba(2,8,20,0.80));
  }

  body[data-ui="mobile"] #enemyTurnOverlay[data-tone="defense"] .enemyTurnLabel{
    color: rgba(194,230,255,0.98);
    text-shadow: 0 0 12px rgba(112,198,255,0.34);
  }

  body[data-ui="mobile"] #enemyTurnOverlay[data-tone="defense"] .enemyTurnMove{
    border-color: rgba(110,198,255,0.52);
    background: linear-gradient(180deg, rgba(24,74,126,0.50), rgba(14,44,82,0.58));
    color: rgba(224,242,255,0.98);
    box-shadow: 0 0 0 1px rgba(110,198,255,0.18) inset, 0 0 18px rgba(110,198,255,0.18);
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active.overlay{
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .overlayBackdrop{
    display: none;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .overlayCard{
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .enemyTurnCard{
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .enemyTurnLabel,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .enemyTurnMove,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .enemyTurnHint{
    display: none;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .bracePrompt{
    display: block;
    margin-top: 0;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceArtFrame{
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceArtFrame::before,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceBarrier,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceLead,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceTimer{
    display: none;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceArt{
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: none;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceUi{
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    background: transparent;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceButton{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(38vmin, 360px);
    height: min(38vmin, 360px);
    min-width: 190px;
    min-height: 190px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.20);
    background: radial-gradient(circle, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
    color: transparent;
    text-shadow: none;
    box-shadow: 0 0 0 0 rgba(255,150,150,0.0);
    animation: mobileBraceHotspotPulse 760ms cubic-bezier(.22,.7,.24,1) infinite;
  }

  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceButton.is-success,
  body[data-ui="mobile"] #enemyTurnOverlay.brace-active .braceButton.is-fail{
    color: transparent;
  }

  body[data-ui="mobile"] #menuInfoOverlay.overlay.is-open{
    padding: 12px;
  }

  body[data-ui="mobile"] #menuInfoOverlay .menuInfoCard{
    width: min(92vw, 620px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    padding: 16px;
    border-color: rgba(132,186,240,.30);
    box-shadow: 0 22px 44px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 24px rgba(98,166,232,.16);
  }

  body[data-ui="mobile"] .menuInfoBody{
    font-size: 12px;
    line-height: 1.42;
  }

  body[data-ui="mobile"] .menuInfoBody > h3{
    color: rgba(208,232,255,.98);
  }

  body[data-ui="mobile"] .menuInfoBody > p,
  body[data-ui="mobile"] .menuInfoBody > ul{
    border: 1px solid rgba(162,194,228,.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    padding: 9px 12px;
  }

  body[data-ui="mobile"] .menuInfoBody > ul{
    padding-left: 25px;
  }

  @keyframes mobileBraceHotspotPulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      border-color: rgba(255,255,255,0.20);
      box-shadow: 0 0 0 0 rgba(255,150,150,0.0);
    }
    48% {
      transform: translate(-50%, -50%) scale(1.07);
      border-color: rgba(255,210,210,0.52);
      box-shadow: 0 0 0 16px rgba(255,120,120,0.09);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      border-color: rgba(255,255,255,0.20);
      box-shadow: 0 0 0 0 rgba(255,150,150,0.0);
    }
  }

  body[data-ui="mobile"].hand-drawer-open #tutorialOverlay.overlay.is-open[data-step="play_card"]{
    display: none;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialCard,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] .tutorialCard,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] .tutorialCard,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] .tutorialCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    width: min(372px, 94vw);
    padding: 11px 12px;
    border: 1px solid rgba(255,184,77,0.54);
    background:
      radial-gradient(160% 130% at 0% 0%, rgba(255,184,77,0.20) 0%, rgba(116,168,255,0.12) 42%, rgba(255,255,255,0.02) 56%, rgba(0,0,0,0.44) 100%),
      linear-gradient(180deg, rgba(13,16,28,0.97), rgba(7,9,16,0.99));
    box-shadow: 0 14px 30px rgba(0,0,0,0.76), 0 0 0 1px rgba(0,0,0,.30) inset;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] #tutorialTitle{
    font-size: 28px;
    letter-spacing: 0.12em;
    color: #ffb84d;
    margin: 0;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] .tutorialBody{
    font-size: 14px;
    color: rgba(255,255,255,0.92);
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialActions,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] .tutorialActions,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] .tutorialActions,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] .tutorialActions{
    order: 0;
    margin: 0 0 6px 0;
    gap: 6px;
    justify-content: center;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] #tutorialTitle,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] #tutorialTitle{
    order: 1;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] .tutorialBody,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] .tutorialBody{
    order: 2;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialArrow{
    order: 3;
    display: block;
    width: 40px;
    height: 44px;
    margin-top: 6px;
    position: relative;
    animation: tutorialArrowPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255,184,77,0.55));
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialArrow::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 6px;
    height: 18px;
    background: #ffb84d;
    border-radius: 3px;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialArrow::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid #ffb84d;
  }

  body[data-ui="mobile"] #tutorialOverlay[data-step="play_card"] .tutorialActions button,
  body[data-ui="mobile"] #tutorialOverlay[data-step="open_deck"] .tutorialActions button,
  body[data-ui="mobile"] #tutorialOverlay[data-step="remove_card"] .tutorialActions button,
  body[data-ui="mobile"] #tutorialOverlay[data-step="talent_first_pick"] .tutorialActions button{
    min-width: 0;
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerInventory{
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(34,40,56,.94), rgba(18,23,36,.96));
    color: rgba(238,243,255,.96);
    box-shadow: 0 8px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.24) inset;
  }

  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerTalents{
    border: 1px solid rgba(255,221,166,.26);
    background: linear-gradient(180deg, rgba(52,41,70,.95), rgba(30,23,42,.97));
    color: rgba(243,232,255,.95);
    box-shadow: 0 8px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.24) inset;
  }

  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerGear{
    border: 1px solid rgba(140,194,255,.30);
    background: linear-gradient(180deg, rgba(40,59,90,.95), rgba(22,35,56,.97));
    color: rgba(232,245,255,.96);
    box-shadow: 0 8px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.24) inset;
  }

  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerInventory:hover,
  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerTalents:hover,
  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerGear:hover{
    border-color: rgba(255,255,255,.26);
    background: linear-gradient(180deg, rgba(42,49,68,.96), rgba(22,29,44,.98));
    box-shadow: 0 10px 18px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.28) inset;
  }

  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerInventory:active,
  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerTalents:active,
  body[data-ui="mobile"] .handDrawerHeaderActions .handDrawerGear:active{
    transform: translateY(1px);
    box-shadow: 0 6px 12px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.30) inset;
  }

  body[data-ui="mobile"].mode-debug .topbarButtonsRow button{
    font-size: 12px;
    padding: 8px 10px;
  }

  body[data-ui="mobile"] .gearStage{ aspect-ratio: 10 / 16; }
  body[data-ui="mobile"] .gearSlot{ width: clamp(52px, 18vw, 84px); }
  body[data-ui="mobile"] .gearBottom{ grid-template-columns: 1fr; }
  body[data-ui="mobile"] .gearDetailRow{ grid-template-columns: minmax(0, 1fr) auto; }
  body[data-ui="mobile"] .gearDetailSlot{ display: none; }

  body[data-ui="mobile"] .gearTitleWrap{ gap: 8px; flex-wrap: wrap; }
  body[data-ui="mobile"] .gearTitleWrap .gearHint{ font-size: 10px; letter-spacing: .05em; }
  body[data-ui="mobile"] .gearTotals{ font-size: 10px; padding: 3px 8px; }
  body[data-ui="mobile"] .gearTopBar{ padding: 12px 12px; }
  body[data-ui="mobile"] .gearTitle{ font-size: 14px; }

  body[data-ui="mobile"] .gearSlotPickerList{ max-height: none; }
  body[data-ui="mobile"] .gearSlotPickerCard{ width: min(660px, 96vw); max-height: min(90vh, 900px); }
  body[data-ui="mobile"] .gearSlotPickerTop{
    padding: 8px 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
  }
  body[data-ui="mobile"] .gearSlotPickerTitle{
    width: 100%;
  }
  body[data-ui="mobile"] .gearSlotPickerActions{
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }
  body[data-ui="mobile"] .gearSlotPickerActions > button{
    min-height: 32px;
  }
  body[data-ui="mobile"] .gearSlotPickerEdit,
  body[data-ui="mobile"] .gearSlotPickerUnequip{
    padding: 6px 9px;
    letter-spacing: .07em;
  }

  body[data-ui="mobile"] .gearInventoryItem{
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
  }

  body[data-ui="mobile"] .gearInventoryItem img{ width: 34px; height: 34px; }
  body[data-ui="mobile"] .gearInventoryName{ font-size: 11px; }
  body[data-ui="mobile"] .gearInventoryMeta,
  body[data-ui="mobile"] .gearInventoryDelta{ font-size: 9px; }

  body[data-ui="mobile"] .panel-enemy{ order: 1; }
  body[data-ui="mobile"] .panel-player{ order: 2; }
  body[data-ui="mobile"] .panel-story{ order: 3; }

  body[data-ui="mobile"] .panel-enemy,
  body[data-ui="mobile"] .panel-player{
    min-height: clamp(260px, 38vh, 420px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  body[data-ui="mobile"] .panel-enemy{
    background:
      radial-gradient(120% 120% at 75% 20%, rgba(120,68,76,.28), transparent 58%),
      radial-gradient(140% 120% at 0% 100%, rgba(54,30,36,.42), transparent 62%),
      linear-gradient(180deg, rgba(20,12,16,.84), rgba(10,8,12,.94));
    transform: scaleX(-1);
  }

  body[data-ui="mobile"] .panel-enemy > *{
    transform: scaleX(-1);
    position: relative;
    z-index: 1;
  }

  body[data-ui="mobile"] .panel-player > *:not(.playerParticles){
    position: relative;
    z-index: 1;
  }

  body[data-ui="mobile"] #btnDebug{
    display: none;
  }

  body[data-ui="mobile"] .choiceBtn{
    font-size: 12px;
    padding: 8px 10px;
  }

  body[data-ui="mobile"] .rewardCard{
    width: 100%;
    min-height: 96px;
    padding: 9px 10px;
  }

  body[data-ui="mobile"] .rewardCard .text{
    font-size: 12px;
    line-height: 1.24;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-ui="mobile"] .rewardCard .name{
    font-size: 13px;
  }

  body[data-ui="mobile"] .card{
    padding: 9px 10px;
    border-radius: 14px;
  }

  body[data-ui="mobile"] .cardTopLine{
    gap: 10px;
  }

  body[data-ui="mobile"] .handCardArt{
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }

  body[data-ui="mobile"] .cardTopMain{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body[data-ui="mobile"] .card .row{
    gap: 6px;
  }

  body[data-ui="mobile"] .handDrawerPanel #hand .card .row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 6px;
  }

  body[data-ui="mobile"] .card .name{
    font-size: 13px;
    line-height: 1.14;
  }

  body[data-ui="mobile"] .handDrawerPanel #hand .card .name{
    font-size: 12px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-ui="mobile"] .card .badges{
    gap: 4px;
  }

  body[data-ui="mobile"] .handDrawerPanel #hand .card .badges{
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body[data-ui="mobile"] .card .badge{
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.1;
  }

  body[data-ui="mobile"] .card .badge.cost{
    min-width: 20px;
    padding: 2px 6px;
  }

  body[data-ui="mobile"] .card .text{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.24;
  }

  body[data-ui="mobile"].inventory-open .panel-info{
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: 100vh;
    overflow: visible;
    z-index: 7000 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body[data-ui="mobile"].inventory-open #infoPanelTitle{
    display: none;
  }

  body[data-ui="mobile"].inventory-open #inventoryArea{
    position: fixed !important;
    inset: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7010 !important;
  }

  body[data-ui="mobile"].inventory-open .inventoryContent{
    display: flex;
    flex-direction: column;
    width: var(--tablet-shell-size);
    max-width: var(--tablet-shell-width);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 0;
    border: none;
    background:
      radial-gradient(150% 130% at 12% 0%, rgba(92,150,255,.22) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.34) 100%),
      linear-gradient(180deg, rgba(12,18,34,.96), rgba(7,11,22,.98));
    box-shadow: none;
    position: relative;
    z-index: 7020 !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  body[data-ui="mobile"].inventory-open .inventoryView{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body[data-ui="mobile"].inventory-open .inventoryBackdrop{
    z-index: 6990 !important;
  }

  body[data-ui="mobile"] #postBattleRewards .overlayCard{
    background:
      linear-gradient(180deg, rgba(10,12,18,.42), rgba(6,8,14,.50)),
      url("./data/ui/reward_shop_bg.webp") center/cover no-repeat,
      radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.07) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.34) 100%),
      linear-gradient(180deg, rgba(18,22,34,.92), rgba(10,12,18,.90));
  }

  body[data-ui="mobile"] #postBattleRewards.is-shop .overlayCard{
    background:
      linear-gradient(180deg, rgba(10,12,18,.38), rgba(6,8,14,.44)),
      url("./data/ui/reward_shop_bg.webp") center/cover no-repeat,
      radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.05) 0%, rgba(255,255,255,.015) 40%, rgba(0,0,0,.22) 100%),
      linear-gradient(180deg, rgba(18,22,34,.62), rgba(10,12,18,.58));
  }

  body[data-ui="mobile"] #postBattleRewards.is-shop #postBattleTitle,
  body[data-ui="mobile"] #postBattleRewards.is-reward #postBattleTitle{
    min-height: 104px;
    margin-bottom: 6px;
    border-bottom: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
    overflow: hidden;
  }

  body[data-ui="mobile"] #postBattleRewards.is-shop #postBattleTitle::before,
  body[data-ui="mobile"] #postBattleRewards.is-reward #postBattleTitle::before{
    content: "";
    display: block;
    width: min(98vw, 520px);
    height: clamp(96px, 24vw, 148px);
    margin: 0 auto;
    background: url("./data/ui/victory.webp") center/contain no-repeat;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(255,184,77,.14));
  }

  body[data-ui="mobile"] #mirrorPromptOverlay.overlay{
    z-index: 7170 !important;
  }

  body[data-ui="mobile"].inventory-open .compactCombatHUD,
  body[data-ui="mobile"].inventory-open .handDrawerPanel,
  body[data-ui="mobile"].inventory-open .handDrawerBackdrop,
  body[data-ui="mobile"].inventory-open .handDrawerTab,
  body[data-ui="mobile"].mirror-prompt-open .compactCombatHUD,
  body[data-ui="mobile"].mirror-prompt-open .handDrawerPanel,
  body[data-ui="mobile"].mirror-prompt-open .handDrawerBackdrop,
  body[data-ui="mobile"].mirror-prompt-open .handDrawerTab,
  body[data-ui="mobile"].reward-overlay-open .compactCombatHUD,
  body[data-ui="mobile"].reward-overlay-open .handDrawerPanel,
  body[data-ui="mobile"].reward-overlay-open .handDrawerBackdrop,
  body[data-ui="mobile"].reward-overlay-open .handDrawerTab,
  body[data-ui="mobile"].talents-open .compactCombatHUD,
  body[data-ui="mobile"].talents-open .handDrawerPanel,
  body[data-ui="mobile"].talents-open .handDrawerBackdrop,
  body[data-ui="mobile"].talents-open .handDrawerTab,
  body[data-ui="mobile"].gear-open .compactCombatHUD,
  body[data-ui="mobile"].gear-open .handDrawerPanel,
  body[data-ui="mobile"].gear-open .handDrawerBackdrop,
  body[data-ui="mobile"].gear-open .handDrawerTab{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-ui="mobile"] .inventoryHeader{
    border-bottom-color: rgba(150,186,255,.20);
  }

  body[data-ui="mobile"] .inventoryTabs{
    border: 1px solid rgba(120,156,225,.24);
    background: linear-gradient(180deg, rgba(11,18,34,.84), rgba(8,13,26,.90));
    box-shadow: inset 0 1px 0 rgba(186,208,255,.10), 0 6px 14px rgba(0,0,0,.22);
  }

  body[data-ui="mobile"] .inventoryTab{
    border: 1px solid rgba(118,164,246,.18);
    background: rgba(64,104,178,.22);
    color: rgba(218,229,255,.9);
  }

  body[data-ui="mobile"] .inventoryTab:hover{
    border-color: rgba(158,196,255,.34);
    background: rgba(128,170,255,.16);
  }

  body[data-ui="mobile"] .inventoryTab.active{
    border-color: rgba(146,196,255,.55);
    background:
      radial-gradient(160% 200% at 10% 0%, rgba(125,188,255,.28), transparent 62%),
      linear-gradient(180deg, rgba(30,52,94,.94), rgba(20,38,74,.96));
    box-shadow:
      0 10px 18px rgba(0,0,0,.30),
      0 0 0 1px rgba(0,0,0,.38) inset,
      0 0 14px rgba(120,184,255,.18);
    color: #eaf4ff;
  }

  body[data-ui="mobile"] .inventoryClose{
    border: 1px solid rgba(142,188,255,.36);
    background: rgba(28,48,90,.62);
    color: rgba(228,239,255,.96);
    box-shadow: 0 10px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.38) inset;
  }

  body[data-ui="mobile"] .inventoryClose:hover{
    background: rgba(42,68,120,.70);
  }

  body[data-ui="mobile"] .panel-player{
    background:
      radial-gradient(120% 120% at 20% 22%, rgba(70,126,188,.30), transparent 58%),
      radial-gradient(140% 120% at 100% 100%, rgba(32,56,90,.42), transparent 62%),
      linear-gradient(180deg, rgba(10,14,22,.82), rgba(6,9,15,.94));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  body[data-ui="mobile"] .panel-player .actorRow{
    margin-top: 0;
    align-self: flex-start;
  }

  body[data-ui="mobile"].mode-combat .panel-enemy,
  body[data-ui="mobile"].mode-combat .panel-player,
  body[data-ui="mobile"].mode-debug.in-battle .panel-enemy,
  body[data-ui="mobile"].mode-debug.in-battle .panel-player{
    min-height: clamp(170px, 28vh, 240px);
  }

  body[data-ui="mobile"] .actorRow{
    gap: 10px;
    margin: 4px 0 6px 0;
  }

  body[data-ui="mobile"] .portraitStack{ width: 116px; gap: 4px; }
  body[data-ui="mobile"] .portraitMetaIcons{ gap: 8px; }
  body[data-ui="mobile"] .portraitMetaIcon{ width: 48px; height: 48px; border-radius: 10px; }
  body[data-ui="mobile"] .portraitMetaIcon img{ width: 33px; height: 33px; }

  body[data-ui="mobile"] .portraitFrame.actorPortraitFrame{
    width: 116px;
    height: 116px;
    padding: 6px;
    border-radius: 22px;
  }

  body[data-ui="mobile"] .portraitFrame.actorPortraitFrame .portrait{
    width: 102px;
    height: 102px;
    border-radius: 16px;
  }

  body[data-ui="mobile"] .runemasterBadge{
    width: 40px;
    height: 40px;
    top: -6px;
    left: -6px;
  }

  body[data-ui="mobile"] .actorHeader{ gap: 6px; margin-top: 0; margin-bottom: 6px; }
  body[data-ui="mobile"] .actorName{ font-size: 18px; line-height: 1.08; }

  body[data-ui="mobile"] .playerLevelBadge{
    padding: 2px 6px;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 1;
  }

  body[data-ui="mobile"] .actorBadges{ gap: 6px; }
  body[data-ui="mobile"] .vitalPill{ padding: 5px 10px; gap: 4px; font-size: 13px; }

  body[data-ui="mobile"] .turnRecap{ width: 100%; font-size: 11px; padding: 7px 8px; }
  body[data-ui="mobile"] .turnRecapWrap{ margin-top: 8px; padding-top: 6px; }
  body[data-ui="mobile"] .turnRecapHeader{ font-size: 10px; margin-bottom: 5px; }
  body[data-ui="mobile"] .playerNameStack{ gap: 4px; min-width: 0; }
  body[data-ui="mobile"] .playerXpRow{ gap: 6px; }
  body[data-ui="mobile"] .playerXpTrack{ height: 12px; }
  body[data-ui="mobile"] .playerXpLabel{ min-width: 72px; font-size: 11px; }

  body[data-ui="mobile"] .effectsRow{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 6px 0 6px 0;
  }

  body[data-ui="mobile"] .chip{
    width: 100%;
    justify-content: center;
    padding: 2px 6px;
    gap: 4px;
    font-size: 11px;
  }

  body[data-ui="mobile"] .chip.is-icon-only{ min-width: 0; padding: 2px 5px; }
  body[data-ui="mobile"] .chip.is-icon-only .i{ width: auto; font-size: 13px; }
  body[data-ui="mobile"] .chip.is-icon-only .v{ font-weight: 800; }

  body[data-ui="mobile"] #enemyIntent{
    margin-top: 6px;
    padding: 4px 8px;
    gap: 6px;
    font-size: 12px;
  }

  body[data-ui="mobile"] #uiSharedRoot,
  body[data-ui="web"] #uiSharedRoot{
    position: relative;
    z-index: 0;
  }

  body[data-ui="mobile"] #uiSharedRoot::before,
  body[data-ui="web"] #uiSharedRoot::before{
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--tablet-shell-size);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(180deg, rgba(5,7,12,.68), rgba(5,7,12,.76)),
      radial-gradient(120% 90% at 50% 0%, rgba(120,140,170,.12), transparent 60%);
    border-left: 1px solid rgba(255,255,255,.06);
    border-right: 1px solid rgba(255,255,255,.06);
  }

  body[data-ui="mobile"] #uiMobileRoot,
  body[data-ui="web"] #uiWebRoot{
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 10px !important;
  }

  body[data-ui="mobile"] #uiWebRoot,
  body[data-ui="web"] #uiMobileRoot{
    display: none !important;
  }

  #uiSharedRoot,
  #app{
    flex: 0 1 var(--tablet-shell-width) !important;
    width: var(--tablet-shell-size) !important;
    max-width: var(--tablet-shell-width) !important;
    margin: 0 auto !important;
  }

  body[data-ui="mobile"] #app,
  body[data-ui="web"] #app{
    position: relative;
    z-index: 1;
  }

  body[data-ui="web"] .topbar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-ui="web"] .topbarMainRow{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  body[data-ui="web"] #topbarCombatBars{
    display: none !important;
  }

  body[data-ui="web"] .topbarButtonsRow{
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-ui="web"] .topbar.menu-open .topbarButtonsRow{
    display: grid !important;
  }

  body[data-ui="web"] .topbar .left,
  body[data-ui="web"] .topbar .right{
    display: contents !important;
  }

  body[data-ui="web"] .topbarButtonsRow button{
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    letter-spacing: .06em !important;
  }

  body[data-ui="web"] .grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(0, auto) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body[data-ui="web"] .panel{
    padding: 12px !important;
  }

  body[data-ui="web"] .logoPanel,
  body[data-ui="web"] .panel-log,
  body[data-ui="web"] .panel-info,
  body[data-ui="web"] .panel-run{
    display: none !important;
  }

  body[data-ui="web"] .panel-enemy{ order: 1 !important; }
  body[data-ui="web"] .panel-player{ order: 2 !important; }
  body[data-ui="web"] .panel-story{ order: 3 !important; }

  body[data-ui="web"] .panel-enemy,
  body[data-ui="web"] .panel-player{
    min-height: clamp(260px, 38vh, 420px) !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body[data-ui="web"] .handDrawerTab{
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    width: var(--tablet-shell-size) !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    max-width: none !important;
  }

  body[data-ui="web"].hand-drawer-open .handDrawerTab{
    display: none !important;
  }

  body[data-ui="web"] .handDrawerPanel{
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--tablet-shell-size) !important;
    height: min(76vh, 700px) !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translate(-50%, 105%) !important;
  }

  body[data-ui="web"].hand-drawer-open .handDrawerPanel{
    transform: translate(-50%, 0) !important;
  }

  body[data-ui="web"] .handDrawerPanel #hand{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-height: calc(100vh - 260px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-ui="web"] .handDrawerPanel #hand .card{
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-ui="web"] .compactCombatHUD{
    left: 50% !important;
    right: auto !important;
    width: var(--tablet-shell-size) !important;
    transform: translate(-50%, -100%) !important;
  }

  body[data-ui="web"].mode-combat.hand-drawer-open .compactCombatHUD,
  body[data-ui="web"].mode-debug.hand-drawer-open .compactCombatHUD{
    display: flex !important;
    transform: translate(-50%, 0) !important;
  }

  #talentsOverlay.overlay,
  #gearOverlay.overlay{
    display: flex !important;
    justify-content: center;
    align-items: stretch;
  }

  #talentsOverlay .talentsCard,
  #gearOverlay .gearCard{
    position: relative;
    left: auto;
    right: auto;
    width: var(--tablet-shell-size) !important;
    max-width: var(--tablet-shell-width) !important;
    height: 100dvh !important;
  }

  /* Gear slot picker modal should stay inside tablet shell width. */
  body[data-ui="mobile"] .gearSlotPickerCard,
  body[data-ui="web"] .gearSlotPickerCard{
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    max-height: min(88dvh, 900px) !important;
  }

  body[data-ui="mobile"] .gearSlotPickerTop,
  body[data-ui="web"] .gearSlotPickerTop{
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body[data-ui="mobile"] .gearSlotPickerTitle,
  body[data-ui="web"] .gearSlotPickerTitle{
    width: 100%;
  }

  body[data-ui="mobile"] .gearSlotPickerActions,
  body[data-ui="web"] .gearSlotPickerActions{
    gap: 6px !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  body[data-ui="web"].inventory-open .panel-info{
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    z-index: 5000 !important;
  }

  /* Make Inventory act like a true fullscreen overlay lane (like talents/gear). */
  body[data-ui="web"].inventory-open #inventoryArea{
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    z-index: 6000 !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  body[data-ui="web"].inventory-open .inventoryBackdrop{
    z-index: 5990 !important;
  }

  body[data-ui="web"].inventory-open .inventoryContent{
    position: relative;
    z-index: 6010 !important;
    width: var(--tablet-shell-size) !important;
    max-width: var(--tablet-shell-width) !important;
    max-height: min(86dvh, 900px) !important;
  }

  body[data-ui="web"].inventory-open .handDrawerRoot{
    z-index: 40 !important;
    pointer-events: none !important;
  }

  body[data-ui="web"].inventory-open .compactCombatHUD,
  body[data-ui="web"].inventory-open #topbarCombatBars,
  body[data-ui="web"].inventory-open .handDrawerPanel,
  body[data-ui="web"].inventory-open .handDrawerBackdrop,
  body[data-ui="web"].inventory-open .handDrawerTab{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-ui="web"].mode-story:not(.mode-debug) .panel-enemy,
  body[data-ui="web"].mode-story:not(.mode-debug) .panel-player,
  body[data-ui="web"].mode-story:not(.mode-debug) .panel-hand,
  body[data-ui="web"].mode-story:not(.mode-debug) .panel-info,
  body[data-ui="web"].mode-story:not(.mode-debug) .panel-run,
  body[data-ui="web"].mode-story:not(.mode-debug) .panel-log,
  body[data-ui="web"].mode-story:not(.mode-debug) .logoPanel{
    display: none !important;
  }

  body[data-ui="web"].mode-combat:not(.mode-debug) .panel-story,
  body[data-ui="web"].mode-combat:not(.mode-debug) .panel-info,
  body[data-ui="web"].mode-combat:not(.mode-debug) .panel-run,
  body[data-ui="web"].mode-combat:not(.mode-debug) .panel-log,
  body[data-ui="web"].mode-combat:not(.mode-debug) .logoPanel{
    display: none !important;
  }

  body[data-ui="web"].inventory-open.mode-combat .panel-info,
  body[data-ui="web"].inventory-open.mode-story .panel-info,
  body[data-ui="web"].inventory-open.mode-debug .panel-info,
  body[data-ui="web"].inventory-open.in-battle .panel-info{
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
  }

  body[data-ui="web"].inventory-open #topbarCombatBars{
    display: none !important;
  }

  /* Constrain modal cards to tablet shell width */
  #postBattleRewards .overlayCard,
  #oathOverlay .overlayCard,
  #profileOverlay .profileCard,
  #helpOverlay .overlayCard,
  #runemasterOverlay .runemasterCard,
  #soulCollectorOverlay .runemasterCard{
    width: var(--tablet-shell-size) !important;
    max-width: var(--tablet-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: min(86dvh, 900px) !important;
  }

  .shopItemsGrid{
    grid-template-columns: 1fr;
  }

  .hand .card{ width: 190px; }

  .mirrorPromptPanel{
    top: calc(56% + 75px);
    width: min(92vw, 700px);
    padding: clamp(72px, 11.5vw, 92px) clamp(20px, 4.2vw, 34px) clamp(16px, 3vw, 24px);

    --mirror-content-y: 58%;
    --mirror-content-w: 86%;
  }

  .mirrorPromptContentBox{
    gap: 4px;
  }

  .mirrorPromptText{
    max-height: clamp(68px, 8.8vh, 90px);
    padding: 10px 10px;
    font-size: 12px;
  }

  .mirrorPromptActions{
    gap: 9px;
  }

  body[data-ui="mobile"] .panel-story .titleStory{
    display: none;
  }

  body[data-ui="mobile"] #nodeInfoCompact{
    display: none;
  }

  body[data-ui="mobile"] .handDrawerTab{
    top: auto;
    left: 50%;
    right: auto;
    width: var(--tablet-shell-size);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    justify-content: center;
    text-align: center;
    border-radius: 14px;
    border-right: 1px solid rgba(255,255,255,0.14);
    max-width: none;
    padding: 10px 12px;
    box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  }

  body[data-ui="mobile"] .handDrawerTab:not(:disabled)::before,
  body[data-ui="mobile"] .handDrawerTab:not(:disabled)::after{
    content: "<";
    font-size: 20px;
    font-weight: 700;
    color: var(--ember);
    text-shadow: 0 0 8px rgba(255,184,77,0.6);
    animation: arrowPulse 1.2s ease-in-out infinite;
  }

  body[data-ui="mobile"] .handDrawerTab:not(:disabled)::after{
    content: ">";
    animation-delay: 0.6s;
  }

  @keyframes arrowPulse{
    0%, 100%{
      opacity: 0.4;
      transform: scale(0.95);
      text-shadow: 0 0 4px rgba(255,184,77,0.3);
    }

    50%{
      opacity: 1;
      transform: scale(1.1);
      text-shadow: 0 0 12px rgba(255,184,77,0.9);
    }
  }

  body[data-ui="mobile"].hand-drawer-open .handDrawerTab{
    display: none;
  }

  body[data-ui="mobile"] .handDrawerPanel{
    top: auto;
    left: 50%;
    right: auto;
    bottom: 0;
    width: var(--tablet-shell-size);
    height: min(76vh, 700px);
    border-left: 0;
    border-radius: 18px 18px 0 0;
    transform: translate(-50%, 105%);
    transition: transform 220ms ease;
    box-shadow: 0 -18px 44px rgba(0,0,0,0.60);
  }

  body[data-ui="mobile"] .compactCombatHUD{
    left: 50%;
    right: auto;
    width: var(--tablet-shell-size);
    transform: translate(-50%, -100%);
  }

  body[data-ui="mobile"] .handDrawerHeader{
    position: sticky;
    top: 0;
    z-index: 3;
    gap: 8px;
    padding: 9px 10px 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(18,23,36,0.98), rgba(10,14,22,0.94));
    backdrop-filter: blur(6px);
  }

  body[data-ui="mobile"] .handDrawerHeaderTop{
    align-items: center;
    gap: 6px;
  }

  body[data-ui="mobile"] .handDrawerHeaderLeft{
    gap: 6px;
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  body[data-ui="mobile"] .handDrawerTitle{
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(241,244,255,0.96);
    white-space: nowrap;
  }

  body[data-ui="mobile"] .handDrawerHeader .turnBanner{
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-color: rgba(255,214,102,0.42);
    background: rgba(255,214,102,0.12);
  }

  body[data-ui="mobile"] .handDrawerHeaderActions{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  body[data-ui="mobile"] .handDrawerHeaderTopActions{
    gap: 6px;
  }

  body[data-ui="mobile"] .handDrawerEndTurn{
    min-width: 88px;
    min-height: 32px;
    padding: 5px 9px;
    font-size: 9px;
    letter-spacing: 0.07em;
  }

  body[data-ui="mobile"] .handDrawerInventory,
  body[data-ui="mobile"] .handDrawerTalents,
  body[data-ui="mobile"] .handDrawerGear{
    min-height: 38px;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.2) inset;
  }

  body[data-ui="mobile"] .handDrawerInventory:hover,
  body[data-ui="mobile"] .handDrawerTalents:hover,
  body[data-ui="mobile"] .handDrawerGear:hover{
    border-color: rgba(255,184,77,.30);
    box-shadow: 0 10px 18px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.28) inset, 0 0 14px rgba(255,184,77,.10);
  }

  body[data-ui="mobile"] .handDrawerClose{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  body[data-ui="mobile"] .handDrawerEndTurn:disabled{
    opacity: 0.45;
    box-shadow: none;
  }

  body[data-ui="mobile"].hand-drawer-open .handDrawerPanel{
    transform: translate(-50%, 0);
  }

  body[data-ui="mobile"] .handDrawerPanel #hand .card{
    min-height: 104px;
    padding-top: 10px;
    padding-bottom: 9px;
    width: 100%;
    max-width: 100%;
  }

  body[data-ui="mobile"] .handDrawerPanel #hand .card .text{
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-ui="mobile"]{
    font-size: 12px;
  }

  body[data-ui="mobile"] .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  body[data-ui="mobile"] .topbarMainRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }

  body[data-ui="mobile"] .topbarRunSummary{
    flex:1;
    min-width:0;
  }

  body[data-ui="mobile"] .topbarRunSummary .mono{
    font-size:11px;
    line-height:1.2;
    opacity:0.95;
  }

  body[data-ui="mobile"] .topbarMenuToggle{
    flex-shrink:0;
  }

  body[data-ui="mobile"] .topbarButtonsRow{
    display:none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:6px;
  }

  body[data-ui="mobile"] .topbar.menu-open .topbarButtonsRow{
    display:grid;
    max-height: calc(100vh - 160px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-ui="mobile"] .topbar .left,
  body[data-ui="mobile"] .topbar .right{
    display: contents;
  }

  body[data-ui="mobile"] .settingsGroup{
    display: inline-flex;
    position: static;
  }

  body[data-ui="mobile"] .settingsMenu{
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(var(--safe-top) + 74px);
    margin-top: 0;
    min-width: 0;
    width: auto;
    max-height: min(62vh, 420px);
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
    box-shadow: 0 18px 34px rgba(0,0,0,.52);
    z-index: 160;
  }

  body[data-ui="mobile"] .debugGroup{
    display: none;
    position: static;
  }

  body[data-ui="mobile"].debug-start-unlocked .debugGroup{
    display: inline-flex;
  }

  body[data-ui="mobile"] .debugMenu{
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(var(--safe-top) + 74px);
    margin-top: 0;
    min-width: 0;
    width: auto;
    max-height: min(62vh, 420px);
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
    box-shadow: 0 18px 34px rgba(0,0,0,.55);
    z-index: 161;
  }

  body[data-ui="mobile"] .settingsMenu button,
  body[data-ui="mobile"] .debugMenu button{
    font-size: 12px;
    padding: 10px 12px;
    letter-spacing: 0.06em;
  }

  body[data-ui="mobile"] .settingsVolumeLabel,
  body[data-ui="mobile"] .settingsVolumeValue{
    font-size: 12px;
  }

  body[data-ui="mobile"] .settingsMenu .menuCloseBtn,
  body[data-ui="mobile"] .debugMenu .menuCloseBtn{
    width: 40px !important;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 15px;
  }

  body[data-ui="mobile"] .settingsMiniBtn{
    width: 36px !important;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 12px;
  }

  body[data-ui="mobile"] .topbarButtonsRow button{
    width:100%;
    justify-content:flex-start;
    font-size: 11px;
    padding: 8px 10px;
    letter-spacing: 0.06em;
  }

  body[data-ui="mobile"] .topbarButtonsRow .settingsGroup,
  body[data-ui="web"] .topbarButtonsRow .settingsGroup{
    width: 100%;
    display: flex;
  }

  body[data-ui="mobile"] .topbarButtonsRow .settingsGroup > button,
  body[data-ui="web"] .topbarButtonsRow .settingsGroup > button{
    width: 100%;
    justify-content: flex-start;
  }

  body[data-ui="mobile"] .topbarButtonsRow button:active,
  body[data-ui="mobile"] .topbarButtonsRow button:focus-visible,
  body[data-ui="mobile"] .topbarButtonsRow .settingsGroup > button:active,
  body[data-ui="mobile"] .topbarButtonsRow .settingsGroup > button:focus-visible{
    background:
      radial-gradient(120% 140% at 18% 0%, rgba(255,184,77,.24), transparent 58%),
      linear-gradient(180deg, #2c3750, #1a2233);
    border-color: rgba(255,214,166,.36);
    color: #fff3df;
    box-shadow:
      0 10px 18px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,184,77,.18) inset,
      0 0 16px rgba(255,214,166,.14);
    transform: translateY(1px) scale(.992);
  }

  body[data-ui="mobile"] .settingsMenu button:active,
  body[data-ui="mobile"] .settingsMenu button:focus-visible,
  body[data-ui="mobile"] .debugMenu button:active,
  body[data-ui="mobile"] .debugMenu button:focus-visible{
    background:
      radial-gradient(120% 140% at 18% 0%, rgba(255,184,77,.24), transparent 58%),
      linear-gradient(180deg, #2f3a54, #1c2435);
    border-color: rgba(255,214,166,.38);
    color: #fff3df;
    box-shadow:
      0 10px 18px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,184,77,.18) inset,
      0 0 16px rgba(255,214,166,.16);
    transform: translateY(1px) scale(.992);
  }

  body[data-ui="mobile"] .grid{
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, auto);
    gap: 10px;
    padding:10px;
  }

  body[data-ui="mobile"] .panel{
    padding:12px;
  }

  body[data-ui="mobile"] .logoPanel{ order: 10; }
  body[data-ui="mobile"] .panel-story{ order: 20; }
  body[data-ui="mobile"] .panel-info{ order: 30; }
  body[data-ui="mobile"] .panel-run{ order: 40; }
  body[data-ui="mobile"] .panel-enemy{ order: 50; }
  body[data-ui="mobile"] .panel-player{ order: 60; }
  body[data-ui="mobile"] .panel-hand{ order: 70; }
  body[data-ui="mobile"] .panel-log{ order: 80; }

  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-hand,
  body[data-ui="mobile"].mode-debug.in-battle .panel-hand{
    order: 15;
  }

  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-enemy,
  body[data-ui="mobile"].mode-debug.in-battle .panel-enemy{
    order: 25;
  }

  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-player,
  body[data-ui="mobile"].mode-debug.in-battle .panel-player{
    order: 35;
  }

  body[data-ui="mobile"].mode-combat .panel-hand{
    min-height: 50vh;
  }

  body[data-ui="mobile"] .handDrawerPanel #hand{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body[data-ui="mobile"] #storyText{
    max-height:none;
  }

  body[data-ui="mobile"] .panel-log{
    max-height: 220px;
    overflow-y: auto;
  }

  body[data-ui="mobile"] .characterHeader{
    flex-wrap: wrap;
  }

  body[data-ui="mobile"] .portrait{
    width: 64px;
    height: 64px;
  }

  body[data-ui="mobile"] .hpBar{
    font-size: 13px;
  }

  body[data-ui="mobile"] #hand{
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-enemy,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-player,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-hand,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-info,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-run,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .panel-log,
  body[data-ui="mobile"].mode-story:not(.mode-debug) .logoPanel,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-enemy,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-player,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-hand,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-info,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-run,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .panel-log,
  body[data-ui="mobile"].mode-debug:not(.in-battle) .logoPanel{
    display:none;
  }

  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-story,
  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-info,
  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-run,
  body[data-ui="mobile"].mode-combat:not(.mode-debug) .panel-log,
  body[data-ui="mobile"].mode-combat:not(.mode-debug) .logoPanel,
  body[data-ui="mobile"].mode-debug.in-battle .panel-story,
  body[data-ui="mobile"].mode-debug.in-battle .panel-info,
  body[data-ui="mobile"].mode-debug.in-battle .panel-run,
  body[data-ui="mobile"].mode-debug.in-battle .panel-log,
  body[data-ui="mobile"].mode-debug.in-battle .logoPanel{
    display:none;
  }

  body[data-ui="mobile"].mode-combat:not(.mode-debug) #locationHeader,
  body[data-ui="mobile"].mode-debug.in-battle #locationHeader{
    display: none;
  }

  body[data-ui="mobile"] .runBuildIdentity{
    margin-bottom: 4px;
    padding: 2px 7px;
    gap: 5px;
  }

  body[data-ui="mobile"] .runBuildBranch{
    font-size: 10px;
  }

  body[data-ui="mobile"] .runBuildTag,
  body[data-ui="mobile"] .runBuildChipTag{
    font-size: 8px;
    padding: 1px 4px;
  }

  body[data-ui="mobile"] .runBuildChip{
    padding: 1px 6px;
  }

  body[data-ui="mobile"] .runOathChip{
    font-size:10px;
    padding:1px 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.9);
  }

  body[data-ui="mobile"] .topbarRunSummary .runTalentChipBtn{
    font-size: 8px;
    padding: 1px 6px;
    letter-spacing: .05em;
  }

  body[data-ui="mobile"] .topbarRunSummary .runOathChips{
    margin-top:0;
  }

  body[data-ui="mobile"] .runOathStars .contractStars{
    padding: 1px 5px;
    font-size: 9px;
  }

  #oathOverlay .overlayCard{
    margin-top: 6vh;
    max-height: 86vh;
  }

  .oathMetaCard{
    padding: 7px 8px;
    gap: 5px;
  }

  .oathMetaTitle{
    font-size: 10px;
  }

  .oathMetaName{
    font-size: 10px;
  }

  .oathMetaState{
    font-size: 8px;
  }

  .oathMetaReward{
    font-size: 10px;
  }

  body[data-ui="mobile"].mode-combat.hand-drawer-open .compactCombatHUD,
  body[data-ui="mobile"].mode-debug.hand-drawer-open .compactCombatHUD{
    display: flex;
    transform: translate(-50%, 0);
  }

  body[data-ui="mobile"].reward-overlay-open .compactCombatHUD,
  body[data-ui="mobile"].mirror-prompt-open .compactCombatHUD,
  body[data-ui="mobile"].talents-open .compactCombatHUD,
  body[data-ui="mobile"].gear-open .compactCombatHUD,
  body[data-ui="mobile"].inventory-open .compactCombatHUD{
    display: none !important;
    transform: translate(-50%, -100%) !important;
  }

  [data-tooltip]::after{
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
    max-width: 180px;
  }

  [data-tooltip]::before{
    bottom: auto;
    top: calc(100% + 4px);
    border-color: transparent transparent rgba(255,255,255,0.12) transparent;
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus::after{
    transform: translateX(-50%) translateY(0);
  }

  #tutorialOverlay .tutorialCard{
    width: min(340px, 92vw);
  }

  #tutorialOverlay .tutorialActions{
    justify-content: center;
  }

  #talentsOverlay .talentTreeStage{
    max-height: none;
    border-radius: 0;
  }

  .talentsFooter{
    gap: 8px;
    padding: 12px 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 90px;
  }

  .talentsTopBar{
    min-height: 0;
    padding: 0;
  }

  .talentsTopTitleImg{
    width: 100%;
    max-width: none;
  }

  .talentsFooterBtn{
    min-height: 58px;
    font-size: 10px;
    letter-spacing: .10em;
  }

  body[data-ui="mobile"] #memoryOverlay .memoryCard{
    --memory-card-w: clamp(96px, 22vw, 128px);
    --memory-cols: 3;
    --memory-rows: 4;
    --memory-gap: 8px;
    --memory-side-pad: 20px;
    --memory-top-ui: 126px;
    width: var(--tablet-shell-size);
    max-width: var(--tablet-shell-width);
    height: 100dvh;
    border-radius: 14px;
  }

  body[data-ui="mobile"] .memoryBoard{
    grid-template-columns: repeat(3, var(--memory-card-w));
    gap: var(--memory-gap);
  }

  body[data-ui="mobile"] .memoryTileLabel{
    font-size: 10px;
  }

  body[data-ui="mobile"] .memoryStats{
    font-size: 15px;
  }

  body[data-ui="mobile"] .memorySummary{
    font-size: 12px;
  }

  #helpOverlay .overlayCard{
    margin-top: 2.5vh;
    max-height: 93vh;
    padding: 14px;
  }

  #helpOverlayTitle{
    font-size: 20px;
    letter-spacing: 0.12em;
  }

  .helpSection p,
  .helpSection li{
    font-size: 12px;
  }

  .helpGrid{
    grid-template-columns: 1fr;
  }

  .helpOverlayFooter{
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(6,8,14,0), rgba(6,8,14,0.82) 50%, rgba(6,8,14,0.96));
  }

  .deckLibraryBody{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  #inventoryDeckView{
    min-height: 0;
  }

  body[data-ui="mobile"].inventory-open #inventoryDeckView{
    flex: 1 1 auto;
    min-height: 0;
  }

  @media (max-width: 520px){
    .hand .card{ width: 170px; }
  }

  @media (max-width: 700px){
    #enemyTurnOverlay .overlayCard{
      margin-top: 0;
      width: min(96vw, 560px);
    }

    .enemyTurnCard{
      padding: 10px 10px 10px;
    }

    .braceArtFrame{
      height: min(52vh, 420px);
      border-radius: 10px;
    }

    .braceUi{
      gap: 6px;
      padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .braceButton{
      min-width: 148px;
      min-height: 46px;
    }

    .braceLead{
      font-size: 10px;
    }

    .braceTimer{
      width: min(220px, 68vw);
    }
  }

  @media (max-width: 720px) {
    .bossIntroContent {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (min-width: 700px){
    .endOfStoryButtons{
      flex-direction: row;
      justify-content: center;
    }
  }
}